@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{text-align:center;margin-bottom:2rem;animation:fadeIn .6s ease-out}@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-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}}