@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";:root{--bg-main: #FBEFEF;--bg-secondary: #F5E6E6;--bg-gradient: #FBEFEF;--card-bg: #ffffff;--panel-bg: rgba(255, 255, 255, .8);--input-bg: #FBEFEF;--stat-bg: rgba(251, 239, 239, .8);--battle-stats-bg: rgba(245, 230, 230, .6);--image-bg: #F5E6E6;--accent-color: #E57373;--accent-glow: rgba(229, 115, 115, .25);--accent-secondary: #EF5350;--text-primary: #2D2D2D;--text-secondary: #5A5A5A;--text-muted: #888888;--border-color: #C4A8A8;--highlight-bg: rgba(229, 115, 115, .15);--badge-bg: rgba(229, 115, 115, .2);--badge-text: #C62828;--carnivore-bg: rgba(239, 68, 68, .15);--carnivore-text: #C62828;--herbivore-bg: rgba(34, 197, 94, .15);--herbivore-text: #2E7D32;--omnivore-bg: rgba(168, 85, 247, .15);--omnivore-text: #7B1FA2;--stat-attack: #EF5350;--stat-defense: #42A5F5;--stat-speed: #66BB6A;--stat-intelligence: #AB47BC;--stat-bar-track: rgba(0, 0, 0, .1);--button-primary: linear-gradient(135deg, #E57373 0%, #EF5350 100%);--button-disabled: #CCCCCC;--button-secondary: #E57373;--winner-bg: rgba(229, 115, 115, .15);--winner-border: #E57373;--winner-bar: #E57373;--tie-border: #AAAAAA;--bar-color: #F5E6E6;font-family:Fredoka,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--text-primary);background-color:var(--bg-main);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:var(--bg-gradient);background-attachment:fixed}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}.dinosaur-search{width:100%}.search-label{display:block;font-size:1.25rem;font-weight:600;margin-bottom:.75rem;color:var(--text-primary)}.search-input-wrapper{position:relative;width:100%}.search-input{width:100%;padding:1rem 1.25rem;font-size:1.1rem;border:3px solid var(--border-color);border-radius:16px;background:var(--input-bg);color:var(--text-primary);transition:border-color .2s,box-shadow .2s}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 4px var(--accent-glow)}.suggestions-list{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--card-bg);border:2px solid var(--border-color);border-radius:16px;list-style:none;padding:.5rem;margin:0;z-index:100;max-height:300px;overflow-y:auto;box-shadow:0 8px 24px #0000004d}.suggestion-item{display:flex;justify-content:space-between;align-items:center;padding:.875rem 1rem;border-radius:12px;cursor:pointer;transition:background-color .15s}.suggestion-item:hover,.suggestion-item.highlighted{background:var(--highlight-bg)}.suggestion-name{font-weight:600;font-size:1rem}.suggestion-diet{font-size:.85rem;padding:.25rem .5rem;border-radius:8px;background:var(--badge-bg);color:var(--badge-text)}.no-results{padding:1rem;text-align:center;color:var(--text-muted);font-style:italic}.dinosaur-card{background:var(--card-bg);border:3px solid var(--border-color);border-radius:24px;overflow:hidden;margin-top:1.5rem;animation:cardAppear .4s ease-out}@keyframes cardAppear{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.card-image-container{width:100%;height:200px;overflow:hidden;background:var(--image-bg);display:flex;align-items:center;justify-content:center}.card-image{width:100%;height:100%;object-fit:cover}.image-fallback{font-size:5rem;opacity:.5}.card-content{padding:1.5rem}.card-name{font-size:1.5rem;font-weight:800;color:var(--text-primary);margin-bottom:1rem;text-align:center}.card-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1rem}.stat-item{display:flex;flex-direction:column;align-items:center;padding:.75rem;background:var(--stat-bg);border-radius:12px}.stat-icon{font-size:1.25rem;margin-bottom:.25rem}.stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:.95rem;font-weight:700;color:var(--text-primary)}.diet-badge{padding:.2rem .5rem;border-radius:6px;font-size:.85rem}.diet-badge[data-diet=carnivore]{background:var(--carnivore-bg);color:var(--carnivore-text)}.diet-badge[data-diet=herbivore]{background:var(--herbivore-bg);color:var(--herbivore-text)}.diet-badge[data-diet=omnivore]{background:var(--omnivore-bg);color:var(--omnivore-text)}.card-period{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:var(--stat-bg);border-radius:12px;margin-bottom:1rem;font-size:.95rem;color:var(--text-primary)}.period-icon{font-size:1.1rem}.card-features{margin-bottom:1rem}.features-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.features-list{list-style:none;padding:0;margin:0}.feature-item{position:relative;padding:.4rem 0 .4rem 1.5rem;font-size:.9rem;color:var(--text-secondary);line-height:1.4}.feature-item:before{content:"•";position:absolute;left:.5rem;color:var(--accent-color);font-weight:700}.card-battle-stats{background:var(--battle-stats-bg);border-radius:16px;padding:1rem}.battle-stats-title{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:.75rem;text-align:center}.battle-stats-grid{display:flex;flex-direction:column;gap:.6rem}.stat-bar-container{width:100%}.stat-bar-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem}.stat-bar-icon{font-size:.9rem}.stat-bar-label{font-size:.8rem;font-weight:600;color:var(--text-secondary);flex:1}.stat-bar-value{font-size:.8rem;font-weight:700;color:var(--text-primary)}.stat-bar-track{width:100%;height:8px;background:var(--stat-bar-track);border-radius:4px;overflow:hidden}.stat-bar-fill{height:100%;border-radius:4px;transition:width .5s ease-out}.results-view{min-height:100vh;padding:2rem;background:var(--bg-gradient)}.results-container{max-width:900px;margin:0 auto}.results-title{text-align:center;font-size:2rem;font-weight:800;color:var(--text-primary);margin-bottom:2rem;animation:fadeInDown .5s ease-out}.vs{color:var(--accent-color);font-size:1.5rem;margin:0 .5rem}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.winner-announcement{text-align:center;margin-bottom:2rem;animation:scaleIn .6s ease-out}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.winner-result,.tie-result{background:var(--winner-bg);border:3px solid var(--winner-border);border-radius:24px;padding:2rem;display:inline-block}.trophy-icon,.tie-icon{font-size:4rem;display:block;margin-bottom:.5rem;animation:bounce 1s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.winner-result h2,.tie-result h2{font-size:1.75rem;color:var(--text-primary);margin:0}.tie-result p{margin:.5rem 0 0;color:var(--text-secondary)}.score-comparison{display:flex;justify-content:center;align-items:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.score-card{background:var(--card-bg);border:3px solid var(--border-color);border-radius:20px;padding:1.5rem 2rem;text-align:center;min-width:180px;transition:transform .3s,border-color .3s}.score-card.winner{border-color:var(--winner-border);transform:scale(1.05)}.score-card.tie{border-color:var(--tie-border)}.dino-emoji{font-size:2.5rem;display:block;margin-bottom:.5rem}.score-card h3{font-size:1.1rem;color:var(--text-primary);margin:0 0 .5rem}.score-value{font-size:2.5rem;font-weight:800;color:var(--accent-color)}.score-label{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.vs-badge{font-size:2rem;padding:.5rem}.category-breakdown{background:var(--card-bg);border:2px solid var(--border-color);border-radius:20px;padding:1.5rem;margin-bottom:2rem}.breakdown-title{text-align:center;font-size:1.25rem;color:var(--text-primary);margin:0 0 1.5rem}.breakdown-grid{display:flex;flex-direction:column;gap:1rem}.category-row{display:flex;flex-direction:column;gap:.5rem}.category-label{font-weight:600;font-size:1rem;color:var(--text-primary);text-align:center}.category-bars{display:flex;gap:.5rem}.bar-container{flex:1;height:36px;background:var(--stat-bar-track);border-radius:8px;overflow:hidden}.bar-container.left{display:flex;justify-content:flex-end}.bar-container.right{display:flex;justify-content:flex-start}.bar{height:100%;background:var(--bar-color);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:width .8s ease-out;min-width:50px}.bar.winner{background:var(--winner-bar)}.bar-value{font-weight:700;font-size:.9rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.explanation-sections{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.explanation-section{background:var(--card-bg);border:2px solid var(--border-color);border-radius:16px;padding:1.25rem 1.5rem;animation:slideInUp .5s ease-out backwards}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.section-title{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin:0 0 .5rem}.section-text{font-size:1rem;color:var(--text-secondary);line-height:1.6;margin:0}.back-button{display:block;width:100%;max-width:300px;margin:0 auto;padding:1rem 2rem;font-size:1.1rem;font-weight:700;color:#fff;background:var(--button-secondary);border:none;border-radius:16px;cursor:pointer;transition:transform .2s,box-shadow .2s}.back-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.back-button:active{transform:translateY(0)}@media(max-width:600px){.results-title{font-size:1.5rem}.score-comparison{flex-direction:column}.score-card{width:100%}.vs-badge{transform:rotate(90deg)}}.app{display:flex;flex-direction:column;min-height:100vh;padding:1.5rem}.app-header{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;animation:fadeIn .6s ease-out;position:relative}.header-content{text-align:center}.auth-status{position:absolute;top:0;right:0}.auth-loading{color:var(--text-muted);font-size:.9rem}.user-info{display:flex;align-items:center;gap:12px}.user-greeting{color:var(--text-secondary);font-size:.95rem;font-weight:500}.sign-in-btn,.sign-out-btn{background:var(--panel-bg);border:2px solid var(--border-color);color:var(--text-primary);padding:8px 16px;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.sign-in-btn:hover,.sign-out-btn:hover{background:var(--border-color);transform:translateY(-1px)}.auth-hint{color:var(--accent-color)!important;font-weight:600}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.app-title{font-size:2.5rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.5rem}.title-emoji{font-size:2.2rem;animation:wiggle 2s ease-in-out infinite}.title-emoji:last-child{animation-delay:.5s}@keyframes wiggle{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.app-subtitle{font-size:1.1rem;color:var(--text-secondary);font-weight:500}.battle-arena{flex:1;display:flex;flex-direction:column}.panels-container{display:flex;gap:1rem;flex:1;margin-bottom:1.5rem}.panel{flex:1;background:var(--panel-bg);border:2px solid var(--border-color);border-radius:24px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn .5s ease-out}.panel-left{animation-delay:.1s}.panel-right{animation-delay:.2s}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.panel-right{animation-name:slideInRight}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.panel-divider{display:flex;align-items:center;justify-content:center;padding:0 .5rem}.divider-text{font-size:1.75rem;font-weight:700;color:var(--accent-color)}.battle-button-container{text-align:center;padding:1rem 0}.battle-button{display:inline-flex;align-items:center;gap:.75rem;padding:1.25rem 2.5rem;font-size:1.5rem;font-weight:700;font-family:inherit;color:#fff;background:var(--button-primary);border:none;border-radius:20px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #e573734d}.battle-button.enabled:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px #e5737366}.battle-button.enabled:active{transform:translateY(-1px) scale(1)}.battle-button.disabled{background:var(--button-disabled);color:var(--text-muted);cursor:not-allowed;box-shadow:none}.button-icon{font-size:1.4rem}.button-hint{margin-top:.75rem;font-size:1rem;color:var(--text-muted);font-weight:500}.app-footer{text-align:center;padding:1.5rem 0;margin-top:auto}.app-footer p{font-size:.95rem;color:var(--text-muted)}@media(max-width:900px){.panels-container{flex-direction:column}.panel-divider{padding:1rem 0}.divider-text{font-size:1.5rem}.app-title{font-size:2rem}.title-emoji{font-size:1.8rem}}@media(max-width:480px){.app{padding:1rem}.app-header{padding-top:48px}.auth-status{position:absolute;top:0;left:50%;transform:translate(-50%);right:auto}.user-info{flex-direction:column;gap:4px}.user-greeting{font-size:.8rem}.sign-in-btn,.sign-out-btn{padding:6px 12px;font-size:.8rem}.app-title{font-size:1.5rem;flex-wrap:wrap}.title-emoji{font-size:1.5rem}.panel{padding:1rem;border-radius:16px}.battle-button{padding:1rem 1.5rem;font-size:1.2rem}.button-icon{font-size:1.2rem}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a472a,#2d5a3d,#1a472a);padding:20px}.auth-container{background:linear-gradient(180deg,#2d5016,#1e3a0f);border-radius:24px;padding:40px;width:100%;max-width:420px;box-shadow:0 20px 60px #0006,inset 0 1px #ffffff1a;border:2px solid #4a7c23}.auth-header{text-align:center;margin-bottom:32px}.auth-icon{font-size:64px;display:block;margin-bottom:16px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.auth-header h1{color:#f4e4bc;font-size:28px;margin:0 0 8px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.auth-header p{color:#c5d4a0;font-size:16px;margin:0;line-height:1.5}.auth-header strong{color:#f4e4bc;word-break:break-all}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{color:#c5d4a0;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.form-group input{background:#0000004d;border:2px solid #4a7c23;border-radius:12px;padding:14px 16px;font-size:16px;color:#f4e4bc;transition:all .2s ease}.form-group input::placeholder{color:#7a9a5a}.form-group input:focus{outline:none;border-color:#7cb342;box-shadow:0 0 0 3px #7cb34233;background:#0006}.form-group input:disabled{opacity:.6;cursor:not-allowed}.otp-inputs{display:flex;justify-content:center;gap:10px}.otp-input{width:50px;height:60px;background:#0000004d;border:2px solid #4a7c23;border-radius:12px;font-size:24px;font-weight:700;color:#f4e4bc;text-align:center;transition:all .2s ease}.otp-input:focus{outline:none;border-color:#7cb342;box-shadow:0 0 0 3px #7cb34233;background:#0006}.otp-input:disabled{opacity:.6;cursor:not-allowed}.auth-error{background:#dc354533;border:1px solid #dc3545;border-radius:12px;padding:12px 16px;color:#ff8a8a;font-size:14px;display:flex;align-items:center;gap:8px}.auth-button{background:linear-gradient(180deg,#7cb342,#558b2f);border:none;border-radius:12px;padding:16px 24px;font-size:18px;font-weight:700;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s ease;box-shadow:0 4px 12px #0003,inset 0 1px #fff3;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.auth-button:hover:not(:disabled){background:linear-gradient(180deg,#8bc34a,#689f38);transform:translateY(-2px);box-shadow:0 6px 16px #00000040,inset 0 1px #fff3}.auth-button:active:not(:disabled){transform:translateY(0)}.auth-button:disabled{background:#4a5a3a;cursor:not-allowed;opacity:.7;box-shadow:none}.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.spinner.large{width:40px;height:40px;border-width:4px}@keyframes spin{to{transform:rotate(360deg)}}.auth-footer{margin-top:24px;text-align:center}.auth-link{background:none;border:none;color:#7cb342;font-size:14px;cursor:pointer;padding:8px;transition:color .2s ease}.auth-link:hover{color:#8bc34a;text-decoration:underline}.auth-link.inline{padding:0;font-weight:600}.resend-text{color:#c5d4a0;font-size:14px;margin:0 0 12px}.cooldown{color:#7a9a5a;font-weight:600}@media(max-width:480px){.auth-container{padding:28px 20px}.auth-icon{font-size:48px}.auth-header h1{font-size:24px}.otp-input{width:44px;height:54px;font-size:20px}.otp-inputs{gap:8px}}