:root{--color-bg:#1c2b44;--color-bg-elevated:#263a58;--color-surface:#31496b;--color-surface-hover:#3d587e;--color-primary:#ffc233;--color-primary-contrast:#1a1300;--color-secondary:#6fe0c6;--color-danger:#ffa0a0;--color-text:#fff;--color-text-muted:#cfdcee;--color-border:#4a668f;--radius-md:14px;--radius-lg:20px;--radius-pill:999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--touch-target-min:56px;--font-family:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-family);background:radial-gradient(circle at top, #31496b 0%, var(--color-bg) 60%);color:var(--color-text);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain;margin:0}h1,h2,h3,h4{margin:0 0 8px;line-height:1.15}p{color:var(--color-text-muted);margin:0 0 12px}button{font-family:inherit}a{color:var(--color-secondary)}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::selection{background:var(--color-primary);color:var(--color-primary-contrast)}.app-shell{max-width:480px;min-height:100%;padding:0 0 env(safe-area-inset-bottom,0);flex-direction:column;margin:0 auto;display:flex;position:relative}.screen{flex-direction:column;flex:1;gap:16px;padding:20px 20px 100px;display:flex}.screen-header{align-items:center;gap:12px;margin-bottom:4px;display:flex}.screen-header .back-button{min-width:44px;min-height:44px}.brand-header{text-align:center;padding:32px 16px 8px}.brand-header .brand-mark{letter-spacing:3px;text-transform:uppercase;color:var(--color-secondary);font-size:13px;font-weight:800}.brand-header h1{margin-top:4px;font-size:30px;font-weight:900}.brand-header .tagline{color:var(--color-text-muted);font-size:15px}.btn{min-height:var(--touch-target-min);border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 20px;font-size:17px;font-weight:700;transition:transform 80ms,background .15s;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-primary);color:var(--color-primary-contrast)}.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-surface-hover)}.btn-ghost{color:var(--color-text);border:1px solid var(--color-border);background:0 0}.btn-danger{background:var(--color-danger);color:#2a0000}.btn-lg{min-height:72px;font-size:20px}.btn-icon{flex:none;width:44px;min-height:44px;padding:0}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px}.card-tappable{cursor:pointer;text-align:left;width:100%;color:inherit}.card-tappable:active{background:var(--color-surface-hover)}.grid-stack{flex-direction:column;gap:12px;display:flex}.mode-card{border-radius:var(--radius-lg);border:2px solid var(--color-border);background:var(--color-surface);text-align:left;cursor:pointer;flex-direction:column;gap:6px;min-height:96px;padding:24px 20px;display:flex}.mode-card .mode-title{font-size:20px;font-weight:900}.mode-card .mode-desc{color:var(--color-text-muted);font-size:14px}.mode-card.mode-road{border-color:var(--color-primary)}.mode-card.mode-queue{border-color:var(--color-secondary)}.category-card{border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);text-align:left;cursor:pointer;justify-content:space-between;align-items:center;width:100%;padding:18px;display:flex}.category-card .cat-name{font-size:16px;font-weight:800}.category-card .cat-progress{color:var(--color-text-muted);font-size:13px}.category-card.selected{border-color:var(--color-primary);background:var(--color-surface-hover)}.pill-row{flex-wrap:wrap;gap:8px;display:flex}.pill{border-radius:var(--radius-pill);background:var(--color-surface);border:1px solid var(--color-border);cursor:pointer;min-height:44px;padding:10px 16px;font-size:14px;font-weight:700}.pill.selected{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}.answer-grid{grid-template-columns:1fr;gap:12px;display:grid}.answer-card{color:var(--color-text);border-radius:var(--radius-md);background:var(--color-surface);border:2px solid var(--color-border);text-align:left;cursor:pointer;align-items:center;gap:12px;min-height:64px;padding:16px 18px;font-size:17px;font-weight:700;display:flex}.answer-card .answer-letter{background:var(--color-bg-elevated);border-radius:50%;flex:none;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;display:flex}.answer-card.correct{background:#3ddc9726;border-color:#3ddc97}.answer-card.incorrect{border-color:var(--color-danger);background:#ff6b6b26}.answer-card.disabled{opacity:.85;cursor:default}.answer-card.correct.disabled{opacity:1}.progress-bar-track{border-radius:var(--radius-pill);background:var(--color-bg-elevated);height:8px;overflow:hidden}.progress-bar-fill{background:var(--color-primary);border-radius:var(--radius-pill);height:100%;transition:width .25s}.quiz-topbar{color:var(--color-text-muted);justify-content:space-between;align-items:center;font-size:13px;display:flex}.quiz-buildup{color:var(--color-secondary);font-size:15px;font-style:italic}.quiz-question{color:var(--color-text);font-size:21px;font-weight:800}.behind-the-answer{background:var(--color-bg-elevated);border-left:4px solid var(--color-primary);border-radius:var(--radius-md);padding:14px 16px;font-size:15px}.road-controls{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.road-controls .btn{min-height:64px}.player-turn-banner{text-align:center;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-primary);padding:10px;font-weight:800}.bottom-nav{background:var(--color-bg-elevated);border-top:1px solid var(--color-border);width:100%;max-width:480px;padding:8px 4px calc(8px + env(safe-area-inset-bottom,0));justify-content:space-around;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.bottom-nav-item{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;min-width:56px;padding:6px 10px;font-size:11px;display:flex}.bottom-nav-item.active{color:var(--color-primary)}.field-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:700}.text-input{width:100%;min-height:var(--touch-target-min);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg-elevated);color:var(--color-text);padding:12px 16px;font-size:16px}.disclaimer{color:var(--color-text-muted);font-size:12px;line-height:1.5}.section-title{text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-top:8px;font-size:14px;font-weight:800}.stat-row{border-bottom:1px solid var(--color-border);justify-content:space-between;padding:10px 0;font-size:15px;display:flex}.empty-state{text-align:center;color:var(--color-text-muted);padding:40px 16px}.toggle-row{justify-content:space-between;align-items:center;min-height:56px;display:flex}.switch{background:var(--color-border);border-radius:var(--radius-pill);cursor:pointer;border:none;flex:none;width:52px;height:30px;position:relative}.switch.on{background:var(--color-primary)}.switch .knob{background:#fff;border-radius:50%;width:24px;height:24px;transition:left .15s;position:absolute;top:3px;left:3px}.switch.on .knob{left:25px}.mode-card.mode-story{border-color:var(--color-secondary)}.mode-card.selected{border-color:var(--color-primary);background:var(--color-surface-hover)}.story-card{display:block}.story-card-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.story-glyph{color:var(--color-secondary);font-size:22px}.story-status{letter-spacing:1px;text-transform:uppercase;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:4px 10px;font-size:11px;font-weight:800}.story-subtitle{color:var(--color-secondary);font-size:15px;font-style:italic}.story-meta{color:var(--color-text-muted);font-size:13px;line-height:1.5}.story-segment-label{letter-spacing:1px;text-transform:uppercase;color:var(--color-secondary);font-size:12px;font-weight:800}.story-body{color:var(--color-text);font-size:17px;line-height:1.6}.answer-badge{color:var(--color-text-muted);font-size:13px;font-weight:700}.mode-card[aria-pressed=false]{border-color:var(--color-border);opacity:.75}.mode-card[aria-pressed=true]{border-color:var(--color-primary);background:var(--color-surface-hover);opacity:1}