.bottom-nav{display:flex;justify-content:space-around;align-items:center;background:var(--bg-surface);border-top:1px solid var(--border);padding:var(--space-sm) 0;position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:420px;z-index:40}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--text-tertiary);opacity:.4;cursor:pointer;padding:var(--space-xs) var(--space-md);min-width:44px;min-height:44px;font-family:var(--font-display);transition:color var(--duration-short) ease,opacity var(--duration-short) ease}.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}.nav-item.active{color:var(--accent-text);opacity:1}.nav-icon{font-size:20px}.nav-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;font-weight:600}.profile-setup{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-xl)}.setup-header{text-align:center;margin-bottom:var(--space-2xl)}.logo-icon{font-size:48px;display:block;margin-bottom:var(--space-sm)}.setup-header h1{margin-bottom:var(--space-xs)}.subtitle{font-family:var(--font-display);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent-text)}.setup-form{width:100%;max-width:360px}.avatar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);margin-bottom:var(--space-lg)}.avatar-card{background:var(--bg-surface);border:2px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);cursor:pointer;text-align:center;transition:border-color var(--duration-short) ease;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);min-height:44px;font-family:var(--font-body);color:var(--text-primary)}.avatar-card:hover{border-color:var(--accent)}.avatar-card.selected{border-color:var(--accent);box-shadow:var(--shadow-glow-green)}.avatar-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.avatar-emoji{font-size:28px}.avatar-name{font-family:var(--font-display);font-size:12px;font-weight:600}.avatar-sci{font-size:10px;color:var(--text-tertiary);font-style:italic}.username-input{width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-md);color:var(--text-primary);font-family:var(--font-body);font-size:14px;text-align:center;margin-bottom:var(--space-sm);transition:border-color var(--duration-short) ease}.username-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-glow-green)}.username-input::placeholder{color:var(--text-tertiary)}.input-error{color:var(--threat);font-size:12px;text-align:center;margin-bottom:var(--space-sm)}.begin-btn{width:100%;margin-top:var(--space-md);padding:var(--space-md) var(--space-xl);font-size:14px}.play-setup{padding-top:var(--space-lg)}.play-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.points-display{font-family:var(--font-mono);font-size:13px;color:var(--gold)}.setup-card{margin-bottom:var(--space-md)}.setup-desc{font-size:13px;color:var(--text-secondary);margin-bottom:var(--space-md)}.player-count-selector{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg)}.count-btn{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-md);color:var(--text-primary);font-family:var(--font-display);font-size:14px;font-weight:500;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;min-height:44px;transition:border-color var(--duration-short) ease}.count-btn:hover{border-color:var(--accent)}.count-btn.active{border-color:var(--accent);background:var(--bg-elevated)}.count-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.count-sub{font-size:11px;color:var(--text-tertiary);font-weight:400}.start-btn{width:100%;font-size:14px;padding:var(--space-md)}.stats-card{margin-bottom:var(--space-md)}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) 0;border-bottom:1px solid var(--border)}.stat-row:last-child{border-bottom:none}.stat-label{font-size:13px;color:var(--text-secondary)}.stat-value{font-family:var(--font-mono);font-size:14px;font-weight:600}.stat-value.accent{color:var(--accent-text)}.stat-value.gold{color:var(--gold)}.game-page{min-height:100vh;display:flex;flex-direction:column;padding:var(--space-sm);background:var(--bg-deep)}.cutscene{align-items:center;justify-content:center;text-align:center;cursor:pointer;animation:cutscene-fade 3.5s ease-in-out}@keyframes cutscene-fade{0%{opacity:0}15%{opacity:1}85%{opacity:1}to{opacity:0}}.cutscene-content h1{font-size:28px;margin-bottom:var(--space-sm);color:var(--accent)}.cutscene-desc{color:var(--text-secondary);margin-bottom:var(--space-lg)}.cutscene-snakes{display:flex;flex-direction:column;gap:var(--space-md);text-align:left;max-width:340px}.flyover-snake{display:flex;gap:var(--space-sm);align-items:flex-start;padding:var(--space-sm);background:var(--bg-surface);border-radius:var(--radius-sm);border:1px solid var(--border)}.flyover-icon{font-size:24px;flex-shrink:0}.flyover-info{display:flex;flex-direction:column;gap:2px}.flyover-info strong{font-size:13px;color:var(--accent-text)}.flyover-fact{font-size:11px;color:var(--text-secondary);line-height:1.4}.flyover-pos{font-size:10px;color:var(--text-tertiary);font-family:var(--font-mono)}.cutscene-skip{margin-top:var(--space-lg);font-size:11px;color:var(--text-tertiary);letter-spacing:1px;text-transform:uppercase}.game-over{align-items:center;justify-content:center}.game-over-card{text-align:center;padding:var(--space-2xl);max-width:320px}.go-icon{font-size:48px;display:block;margin-bottom:var(--space-md)}.go-points{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);margin:var(--space-lg) 0;display:flex;flex-direction:column;gap:var(--space-xs)}.go-total{color:var(--gold);font-weight:600;font-size:16px;margin-top:var(--space-sm)}.game-top-bar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) var(--space-sm)}.top-bar-actions{display:flex;gap:var(--space-xs)}.habitat-label{font-family:var(--font-display);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-text)}.back-btn,.mute-btn{padding:var(--space-xs) var(--space-sm)!important;font-size:10px!important;min-height:36px!important}.board-container{border-radius:var(--radius-md);margin:var(--space-sm) auto;display:flex;justify-content:center;overflow:hidden}.player-bar{display:flex;justify-content:space-around;padding:var(--space-sm) 0}.player-info{display:flex;align-items:center;gap:var(--space-xs);opacity:.5;transition:opacity var(--duration-short) ease}.player-info.active-turn{opacity:1}.player-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6)}.dot-red{background:#e74c3c}.dot-blue{background:#3498db}.dot-green{background:#2ecc71}.dot-orange{background:#f39c12}.player-name{font-size:10px;color:var(--text-secondary)}.player-pos{font-family:var(--font-mono);font-size:9px;color:var(--text-tertiary)}.dice-area{text-align:center;padding:var(--space-md) 0}.dice-btn{font-size:16px!important;padding:var(--space-md) var(--space-2xl)!important}.dice-btn:disabled{opacity:.4;cursor:not-allowed}.turn-indicator{font-size:11px;color:var(--text-tertiary);margin-top:var(--space-sm)}.toast{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary)}.popup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:30;padding:var(--space-md);animation:overlay-in var(--duration-short) ease-out}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.popup{background:var(--bg-surface);border-radius:var(--radius-lg);padding:var(--space-lg);max-width:360px;width:100%;animation:popup-in var(--duration-short) ease-out}@keyframes popup-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.snake-popup{border:1px solid var(--threat)}.ladder-popup{border:1px solid var(--growth)}.popup-icon{text-align:center;font-size:32px;margin-bottom:var(--space-sm)}.popup-title{font-family:var(--font-display);font-size:13px;font-weight:600;text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:var(--space-md)}.popup-title.threat{color:var(--threat)}.popup-title.growth{color:var(--growth)}.popup-fact{font-size:13px;color:var(--text-secondary);line-height:1.6;padding:var(--space-md);border-radius:var(--radius-sm);margin-bottom:var(--space-md)}.snake-popup .popup-fact{background:#e74c3c14}.ladder-popup .popup-fact{background:#8fbc8f14}.popup-question{font-size:14px;font-weight:500;margin-bottom:var(--space-md)}.popup-options{display:flex;flex-direction:column;gap:var(--space-sm)}.popup-option{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-size:13px;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;gap:var(--space-sm);text-align:left;font-family:var(--font-body);min-height:44px;transition:border-color var(--duration-short) ease}.popup-option:hover{border-color:var(--accent)}.popup-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.option-letter{font-family:var(--font-display);font-weight:700;color:var(--accent)}@keyframes haptic-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.haptic-shake{animation:haptic-shake .15s ease-in-out infinite}@media(min-width:421px){.game-page{padding:var(--space-md)}.player-bar{padding:var(--space-md) 0}.player-name{font-size:12px}}@media(min-width:1025px){.game-page{align-items:center;padding:var(--space-lg)}}.sanctuary-page{padding-top:var(--space-lg)}.sanc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg)}.snake-list{display:flex;flex-direction:column;gap:var(--space-sm)}.terrarium-card{background:var(--bg-surface);border:2px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);display:flex;align-items:center;gap:var(--space-md)}.terrarium-card.habitat-rainforest{border-color:var(--habitat-rainforest-board)}.terrarium-card.habitat-desert{border-color:var(--habitat-desert-board)}.terrarium-card.habitat-ocean{border-color:var(--habitat-ocean-board)}.terrarium-card.habitat-garden{border-color:var(--habitat-garden-board)}.terrarium-card.habitat-savanna{border-color:var(--habitat-savanna-board)}.terrarium-card.habitat-wetland{border-color:var(--habitat-wetland-board)}.terrarium-card.locked{opacity:.5}.terrarium-card.level-locked{opacity:.35}.terrarium-avatar{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--bg-deep);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;animation:breathe 3s ease-in-out infinite}.terrarium-card.locked .terrarium-avatar,.terrarium-card.level-locked .terrarium-avatar{animation:none}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@media(prefers-reduced-motion:reduce){.terrarium-avatar{animation:none}}.terrarium-info{flex:1;min-width:0}.terrarium-name{font-family:var(--font-display);font-size:14px;font-weight:600}.terrarium-level{font-size:11px;color:var(--accent-text);margin-bottom:var(--space-xs)}.upgrade-btn{padding:var(--space-sm) var(--space-md)!important;font-size:10px!important;flex-shrink:0}.upgrade-btn:disabled{opacity:.4;cursor:not-allowed}.empty-state{text-align:center;padding:var(--space-2xl) var(--space-lg)}.empty-icon{font-size:48px;display:block;margin-bottom:var(--space-md)}.empty-state p{color:var(--text-secondary);margin-bottom:var(--space-lg)}.quiz-page{padding-top:var(--space-lg)}.quiz-page h2{margin-bottom:var(--space-sm)}.quiz-desc{color:var(--text-secondary);font-size:13px;margin-bottom:var(--space-lg)}.persona-list{display:flex;flex-direction:column;gap:var(--space-sm)}.persona-card{display:flex;align-items:center;gap:var(--space-md);cursor:pointer;border:1px solid var(--border);transition:border-color var(--duration-short) ease;text-align:left;width:100%;font-family:var(--font-body);color:var(--text-primary)}.persona-card:hover{border-color:var(--accent)}.persona-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.persona-avatar{font-size:32px;flex-shrink:0}.persona-info{flex:1;min-width:0}.persona-name{font-family:var(--font-display);font-size:14px;font-weight:600}.persona-catchphrase{font-size:11px;color:var(--text-tertiary);font-style:italic;margin:2px 0}.persona-difficulty{font-family:var(--font-display);font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:600}.diff-easy{color:var(--growth)}.diff-medium{color:var(--gold)}.diff-hard{color:var(--threat)}.quiz-active{display:flex;flex-direction:column;align-items:center;padding-top:var(--space-lg)}.quiz-top{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.quiz-bot-avatar{font-size:28px}.quiz-bot-name{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--accent-text)}.quiz-progress{font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary);margin-bottom:var(--space-md)}.quiz-question-card{width:100%}.quiz-q-text{font-size:15px;font-weight:500;margin-bottom:var(--space-md);line-height:1.5}.quiz-options{display:flex;flex-direction:column;gap:var(--space-sm)}.quiz-option{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-md);font-size:13px;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;gap:var(--space-sm);text-align:left;font-family:var(--font-body);min-height:44px;transition:border-color var(--duration-short) ease}.quiz-option:hover:not(:disabled){border-color:var(--accent)}.quiz-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.quiz-option.correct{border-color:var(--growth);background:#2ecc711a}.quiz-option.wrong{border-color:var(--threat);background:#e74c3c1a}.option-letter{font-family:var(--font-display);font-weight:600;color:var(--accent-text);flex-shrink:0}.quiz-scoreboard{display:flex;justify-content:space-between;width:100%;margin-top:var(--space-lg);font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary)}.quiz-results{display:flex;align-items:center;justify-content:center;min-height:80vh}.results-card{text-align:center;padding:var(--space-2xl)}.results-icon{font-size:48px;display:block;margin-bottom:var(--space-md)}.results-scores{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);margin:var(--space-lg) 0}.result-score{text-align:center}.result-label{font-size:12px;color:var(--text-tertiary);margin-bottom:var(--space-xs)}.result-value{font-family:var(--font-display);font-size:32px;font-weight:700}.result-vs{color:var(--text-tertiary);font-size:14px}.results-points{color:var(--gold);font-family:var(--font-mono);font-size:14px;margin-bottom:var(--space-lg)}.badges-page{padding-top:var(--space-lg)}.badges-page h2{margin-bottom:var(--space-md)}.season-banner{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);border-color:var(--habitat-rainforest-start)}.season-icon{font-size:28px;flex-shrink:0}.season-name{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--growth)}.season-desc{font-size:11px;color:var(--text-tertiary)}.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.badge-card{text-align:center;padding:var(--space-md);transition:all var(--duration-short) ease}.badge-card.locked{opacity:.35}.badge-card.earned{border-color:var(--gold)}.badge-icon{font-size:28px;display:block;margin-bottom:var(--space-sm)}.badge-name{font-family:var(--font-display);font-size:12px;font-weight:600;margin-bottom:2px}.badge-desc{font-size:10px;color:var(--text-tertiary)}.badge-earned-label{font-family:var(--font-display);font-size:10px;color:var(--gold);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-top:var(--space-sm)}:root{--bg-deep: #06402B;--bg-surface: #0D5435;--bg-elevated: #14693F;--accent: #77DD77;--accent-text: #A3E8A3;--gold: #FFD700;--threat: #E74C3C;--growth: #8FBC8F;--text-primary: #E0E0E0;--text-secondary: #A0B0A0;--text-tertiary: #6B806B;--border: #2A5A3A;--habitat-rainforest-bg: #1A3A0A;--habitat-rainforest-board: #3D6B2E;--habitat-rainforest-accent: #8FBC8F;--habitat-wetland-bg: #1A3D2E;--habitat-wetland-board: #4A7A5A;--habitat-wetland-accent: #8B7355;--habitat-garden-bg: #2D4A1E;--habitat-garden-board: #6B9F5B;--habitat-garden-accent: #DDA0DD;--habitat-savanna-bg: #3A2E1A;--habitat-savanna-board: #C4A84A;--habitat-savanna-accent: #CD853F;--habitat-ocean-bg: #0A2744;--habitat-ocean-board: #2980B9;--habitat-ocean-accent: #FFB6C1;--habitat-desert-bg: #3D2B1F;--habitat-desert-board: #C4A35A;--habitat-desert-accent: #E8967D;--ladder: #F5E6C8;--font-display: "Outfit", system-ui, sans-serif;--font-body: "Plus Jakarta Sans", system-ui, sans-serif;--font-mono: "Geist Mono", "JetBrains Mono", "Courier New", monospace;--space-2xs: 2px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 50%;--shadow-card: 0 2px 8px rgba(0,0,0,.3);--shadow-popup: 0 4px 24px rgba(0,0,0,.5);--shadow-glow-green: 0 0 12px rgba(119,221,119,.4);--shadow-glow-gold: 0 0 12px rgba(255,215,0,.4);--ease-move: cubic-bezier(.25, .1, .25, 1);--duration-micro: 80ms;--duration-short: .2s;--duration-medium: .4s;--duration-long: .8s}@media(prefers-reduced-motion:reduce){:root{--duration-micro: 0ms;--duration-short: 0ms;--duration-medium: 0ms;--duration-long: 0ms}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;width:100%}body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{display:flex;justify-content:center}.app-shell{width:100%;max-width:420px;min-height:100vh;display:flex;flex-direction:column;position:relative;background:var(--bg-deep)}.page{flex:1;padding:var(--space-md);padding-bottom:72px;overflow-y:auto}.section-label{font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--border)}h1,h2,h3{font-family:var(--font-display);line-height:1.2}h1{font-size:32px;font-weight:700;letter-spacing:4px;text-transform:uppercase}h2{font-size:18px;font-weight:600;letter-spacing:2px}h3{font-size:14px;font-weight:600}.btn{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;border:none;border-radius:var(--radius-sm);padding:12px 24px;cursor:pointer;transition:all var(--duration-short) ease-out;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--accent);color:#06402b;font-weight:700}.btn-primary:hover{background:#5cbf5c}.btn-primary:active{transform:scale(.97)}.btn-gold{background:var(--gold);color:#1a1a2e}.btn-gold:hover{background:#e6c200}.btn-ghost{background:transparent;color:var(--accent-text);border:1px solid var(--border)}.btn-ghost:hover{border-color:var(--accent)}.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow-card)}.toast{position:fixed;top:var(--space-md);left:50%;transform:translate(-50%);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:13px;z-index:50;animation:toast-in var(--duration-short) ease-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.skeleton{background:linear-gradient(90deg,var(--bg-surface) 25%,var(--bg-elevated) 50%,var(--bg-surface) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.xp-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}.xp-fill{height:100%;background:var(--accent);border-radius:2px;transition:width var(--duration-medium) ease-out}@media(min-width:421px)and (max-width:1024px){.app-shell{max-width:720px}}@media(min-width:1025px){.app-shell{max-width:960px}}@media(orientation:landscape)and (max-height:500px){.landscape-warning{display:flex!important}.app-shell{display:none!important}}.landscape-warning{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-deep);z-index:9999;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-md);color:var(--text-secondary);font-family:var(--font-display);text-align:center;padding:var(--space-xl)}.landscape-warning .rotate-icon{font-size:48px;animation:rotate-phone 2s ease-in-out infinite}@keyframes rotate-phone{0%,to{transform:rotate(0)}50%{transform:rotate(-90deg)}}