:root{--color-bg: #f5f1e6;--color-surface: #ffffff;--color-primary: #0b3d2e;--color-primary-light: #1f6f4a;--color-primary-dark: #06261c;--color-accent: #c9992e;--color-accent-light: #e7c874;--color-ball: #9a2b2b;--color-text: #1a2721;--color-muted: #64756c;--color-success: #1f8a4c;--color-success-bg: #e5f5ec;--color-danger: #c0392b;--color-danger-bg: #fbe9e7;--color-border: rgba(11, 61, 46, .16);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--shadow-card: 0 2px 10px rgba(11, 61, 46, .08), 0 1px 2px rgba(11, 61, 46, .06);color-scheme:light;--illus-wood: #b9791f;--illus-ball: #9a2b2b;--illus-ball-seam: #f2d9d9;--illus-line: #ffffff;--illus-muted: #8a978f;--illus-figure: #2c4a3d;--illus-rope: #c9992e;--illus-grass: #1f6f4a;--illus-grass-dark: #165130;--illus-sky: #eaf3ee;--font-display: "Sora", "Segoe UI", system-ui, sans-serif;--font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif}@media(prefers-color-scheme:dark){:root{--color-bg: #0e1a15;--color-surface: #16261e;--color-primary: #4caf82;--color-primary-light: #6fd0a3;--color-primary-dark: #0b3d2e;--color-accent: #e7c874;--color-accent-light: #f4e2ab;--color-text: #eef3ef;--color-muted: #a3b3ac;--color-success: #4caf82;--color-success-bg: rgba(76, 175, 130, .16);--color-danger: #e07a6d;--color-danger-bg: rgba(224, 122, 109, .16);--color-border: rgba(238, 243, 239, .14);--shadow-card: 0 2px 10px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);color-scheme:dark;--illus-wood: #d9a13f;--illus-ball: #e07a6d;--illus-ball-seam: #3a2020;--illus-line: #0e1a15;--illus-muted: #5c6f66;--illus-figure: #cfe3d8;--illus-rope: #e7c874;--illus-grass: #1c5c3d;--illus-grass-dark: #123d29;--illus-sky: #0b241a}}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.5;-webkit-font-smoothing:antialiased}button{font-family:inherit}h1,h2,h3{font-family:var(--font-display)}.app-shell{min-height:100%;display:flex;flex-direction:column}.app-header{padding:1rem 1.25rem;background:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.2px),linear-gradient(135deg,var(--color-primary-dark),var(--color-primary));background-size:16px 16px,100% 100%;color:#f5f1e6;display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;box-shadow:0 2px 12px #0000002e;position:relative;z-index:5}.app-header__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.15rem;cursor:pointer;background:none;border:none;color:inherit;padding:0;transition:transform .15s ease}.app-header__brand:hover{transform:translateY(-1px)}.app-header__brand span.emoji{font-size:1.4rem}.app-main{flex:1;width:100%;max-width:780px;margin:0 auto;padding:1.25rem 1.1rem 3rem}.card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:1.5rem;border:1px solid var(--color-border)}.stack{display:flex;flex-direction:column;gap:1rem}.hero{text-align:center;padding:1.5rem 0 .5rem;position:relative}.hero__glow{position:absolute;inset:-20px 0 auto 0;height:160px;margin:0 auto;max-width:320px;background:radial-gradient(ellipse at center,var(--color-accent-light) 0%,transparent 70%);opacity:.25;z-index:-1;pointer-events:none}.hero h1{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;letter-spacing:-.01em;margin:.25rem 0 .4rem;color:var(--color-primary)}@media(prefers-color-scheme:dark){.hero h1{color:var(--color-accent-light)}}.hero p.tagline{color:var(--color-muted);max-width:46ch;margin:0 auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:var(--radius-md);padding:.85rem 1.4rem;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .08s ease,box-shadow .15s ease,opacity .15s ease}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));color:#fdfaf2;box-shadow:0 4px 14px #0b3d2e4d}.btn-primary:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 6px 18px #0b3d2e61;transform:translateY(-1px)}.btn-secondary{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-border)}@media(prefers-color-scheme:dark){.btn-secondary{color:var(--color-accent-light)}}.btn-secondary:hover:not(:disabled){border-color:var(--color-primary);transform:translateY(-1px)}.btn-block{width:100%}.btn-ghost{background:none;color:var(--color-muted);padding:.5rem .75rem}.section-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted);font-weight:700;margin:0 0 .6rem}.chip-grid{display:flex;flex-wrap:wrap;gap:.6rem}.chip{border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:999px;padding:.55rem 1rem;font-size:.92rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:all .12s ease}.chip:hover{border-color:var(--color-primary-light)}.chip.selected{background:var(--color-primary);border-color:var(--color-primary);color:#fdfaf2}.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}.category-card{text-align:left;border:1.5px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-md);padding:.85rem 1rem;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease;color:var(--color-text)}.category-card:hover{border-color:var(--color-primary-light);transform:translateY(-2px);box-shadow:var(--shadow-card)}.category-card.selected{border-color:var(--color-primary);background:var(--color-success-bg)}.category-card__title{font-weight:700;display:flex;align-items:center;gap:.45rem;margin-bottom:.2rem}.category-card__blurb{font-size:.85rem;color:var(--color-muted)}.length-grid{display:flex;gap:.6rem;flex-wrap:wrap}.progress-bar-track{height:8px;border-radius:999px;background:var(--color-border);overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transition:width .25s ease}.quiz-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.quiz-stat{display:flex;flex-direction:column;align-items:center;min-width:60px}.quiz-stat__value{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--color-primary);display:inline-block}.quiz-stat__value.pop{animation:stat-pop .3s ease}@keyframes stat-pop{0%{transform:scale(1)}40%{transform:scale(1.25)}to{transform:scale(1)}}@media(prefers-color-scheme:dark){.quiz-stat__value{color:var(--color-accent-light)}}.quiz-stat__label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted)}.streak-flame{color:var(--color-accent)}.tag-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.75rem}.tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.28rem .6rem;border-radius:999px;background:var(--color-border);color:var(--color-muted)}.tag-tier-rookie{background:#e4f2e9;color:#1f7a4c}.tag-tier-pro{background:#eaf0fb;color:#2b52a3}.tag-tier-umpire{background:#f5e9d6;color:#8a5a10}@media(prefers-color-scheme:dark){.tag-tier-rookie{background:#4caf822e;color:#85e0b3}.tag-tier-pro{background:#5a82dc33;color:#a9c1f5}.tag-tier-umpire{background:#e0aa5033;color:#f0c876}}.tag-trial{background:var(--color-ball);color:#fdf0ee}.question-text{font-size:1.2rem;font-weight:600;margin:0 0 1.25rem;line-height:1.4}.options-list{display:flex;flex-direction:column;gap:.65rem}.option-btn{text-align:left;border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-md);padding:.85rem 1rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;gap:.7rem;transition:transform .1s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}.option-btn:hover:not(:disabled){border-color:var(--color-primary-light);transform:translate(2px)}.option-btn:active:not(:disabled){transform:scale(.99)}.option-btn:disabled{cursor:default}.option-btn.correct,.option-btn.incorrect{animation:option-reveal .25s ease}@keyframes option-reveal{0%{transform:scale(.97)}to{transform:scale(1)}}.option-btn__letter{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--color-border);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}.option-btn.correct{border-color:var(--color-success);background:var(--color-success-bg)}.option-btn.correct .option-btn__letter{background:var(--color-success);color:#fff}.option-btn.incorrect{border-color:var(--color-danger);background:var(--color-danger-bg)}.option-btn.incorrect .option-btn__letter{background:var(--color-danger);color:#fff}.explanation-box{margin-top:1.25rem;padding:1rem 1.1rem;border-radius:var(--radius-md);background:var(--color-bg);border:1px solid var(--color-border)}.explanation-box__label{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted);margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}.result-hero{text-align:center;padding:.5rem 0 1rem}.result-hero__icon{font-size:2.6rem;line-height:1;width:88px;height:88px;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle,var(--color-success-bg),transparent 75%);border:3px solid var(--color-accent);animation:rank-pop .4s ease}@keyframes rank-pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.result-hero__rank{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--color-primary);margin:.6rem 0 .2rem}@media(prefers-color-scheme:dark){.result-hero__rank{color:var(--color-accent-light)}}.result-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin:1.25rem 0}.result-stat-card{text-align:center;background:var(--color-bg);border-radius:var(--radius-md);padding:.9rem .5rem;border:1px solid var(--color-border)}.result-stat-card__value{font-size:1.5rem;font-weight:800;color:var(--color-primary)}@media(prefers-color-scheme:dark){.result-stat-card__value{color:var(--color-accent-light)}}.result-stat-card__label{font-size:.75rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:.05em}.breakdown-row{display:grid;grid-template-columns:minmax(120px,1fr) 3fr auto;align-items:center;gap:.75rem;padding:.4rem 0;font-size:.9rem}.breakdown-row__bar-track{height:10px;border-radius:999px;background:var(--color-border);overflow:hidden}.breakdown-row__bar-fill{height:100%;border-radius:999px}.breakdown-row__pct{font-weight:700;min-width:3.5ch;text-align:right}.button-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}.button-row .btn{flex:1;min-width:160px}.empty-state{text-align:center;color:var(--color-muted);padding:2rem 1rem}.home-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.6rem;margin:1.25rem 0}.home-stat{background:var(--color-bg);border-radius:var(--radius-md);padding:.7rem .5rem;text-align:center;border:1px solid var(--color-border)}.home-stat__value{font-weight:800;font-size:1.2rem;color:var(--color-primary)}@media(prefers-color-scheme:dark){.home-stat__value{color:var(--color-accent-light)}}.home-stat__label{font-size:.68rem;color:var(--color-muted);text-transform:uppercase}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.mode-card{text-align:left;border:1.5px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;color:var(--color-text);position:relative;overflow:hidden}.mode-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 60%,var(--color-success-bg) 150%);opacity:0;transition:opacity .15s ease;pointer-events:none}.mode-card:hover{border-color:var(--color-primary);transform:translateY(-3px);box-shadow:var(--shadow-card)}.mode-card:hover:after{opacity:1}.mode-card__icon{font-size:1.8rem}.mode-card__title{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin:.3rem 0 .25rem}.mode-card__blurb{color:var(--color-muted);font-size:.9rem}footer.app-footer{text-align:center;color:var(--color-muted);font-size:.8rem;padding:1rem}@media(max-width:480px){.app-main{padding:1rem .75rem 2.5rem}.card{padding:1.1rem}.breakdown-row{grid-template-columns:minmax(90px,1fr) 2.5fr auto;font-size:.82rem}}.level-card{display:flex;align-items:center;gap:.85rem}.level-card__icon{font-size:2rem;line-height:1}.level-card__info{flex:1;min-width:0}.level-card__title{font-weight:800}.level-card__xp{font-size:.78rem;color:var(--color-muted);margin-top:.15rem}.level-bar-track{height:8px;border-radius:999px;background:var(--color-border);overflow:hidden;margin-top:.4rem}.level-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-primary-light))}.daily-streak-pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;padding:.4rem .8rem;font-weight:700;font-size:.85rem;white-space:nowrap}.home-links-row{display:flex;gap:.6rem;flex-wrap:wrap}.home-links-row .btn{flex:1;min-width:140px}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}.badge-card{text-align:center;border-radius:var(--radius-md);padding:1rem .75rem;border:1.5px solid var(--color-border);background:var(--color-surface)}.badge-card.unlocked{border-color:var(--color-accent);background:linear-gradient(180deg,var(--color-success-bg),var(--color-surface))}.badge-card.locked{opacity:.55}.badge-card__icon{font-size:2rem;margin-bottom:.35rem}.badge-card__name{font-weight:700;font-size:.9rem;margin-bottom:.2rem}.badge-card__desc{font-size:.75rem;color:var(--color-muted);line-height:1.35}.history-table{display:flex;flex-direction:column;gap:.25rem}.history-row{display:grid;grid-template-columns:1.1fr 1.3fr .7fr .9fr 1.4fr;gap:.5rem;padding:.5rem .25rem;font-size:.85rem;border-bottom:1px solid var(--color-border);align-items:center}.history-row--head{font-weight:700;text-transform:uppercase;font-size:.7rem;letter-spacing:.04em;color:var(--color-muted);border-bottom:2px solid var(--color-border)}@media(max-width:480px){.history-row{grid-template-columns:1fr 1fr .6fr .7fr 1.1fr;font-size:.72rem}}.celebration-banner{border-radius:var(--radius-md);padding:.9rem 1.1rem;margin-bottom:.75rem;font-weight:700;text-align:center;border:1.5px solid transparent}.celebration-banner--highscore{background:linear-gradient(90deg,#c9992e2e,#1f8a4c24);border-color:var(--color-accent);color:var(--color-primary)}@media(prefers-color-scheme:dark){.celebration-banner--highscore{color:var(--color-accent-light)}}.celebration-banner--levelup{background:linear-gradient(90deg,#2b52a329,#c9992e24);border-color:var(--color-primary-light)}.achievements-unlocked-section{margin-top:1rem}.achievement-unlock-row{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:var(--radius-md);background:var(--color-success-bg);border:1px solid var(--color-accent);margin-bottom:.5rem}.achievement-unlock-row__icon{font-size:1.5rem}.achievement-unlock-row__name{font-weight:700;font-size:.9rem}.achievement-unlock-row__desc{font-size:.78rem;color:var(--color-muted)}.rank-progress-label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--color-muted);margin-bottom:.3rem}.streak-flame.tier-warm{filter:saturate(1.3)}.streak-flame.tier-hot{color:#e0742b;text-shadow:0 0 8px rgba(224,116,43,.5)}.streak-flame.tier-blazing{color:var(--color-ball);text-shadow:0 0 10px rgba(154,43,43,.6)}.combo-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--color-ball)}.confetti-container{position:relative;height:0;overflow:visible}.confetti-piece{position:absolute;top:-10px;width:8px;height:14px;opacity:.9;animation:confetti-fall 1.6s ease-in forwards}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(220px) rotate(360deg);opacity:0}}.daily-challenge-badge{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;background:var(--color-accent);color:#241a05;margin-left:.4rem}.illustration-wrap{display:flex;justify-content:center;background:var(--illus-sky);border-radius:var(--radius-md);padding:.5rem .75rem;margin-bottom:1rem;border:1px solid var(--color-border)}.illustration-svg{width:100%;max-width:260px;height:auto}.illustration-svg--small{max-width:64px}.mode-card__icon-illus,.category-card__icon-illus{width:100%;max-width:56px;height:auto}.screen-enter{animation:screen-fade-in .28s ease}@keyframes screen-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.question-enter{animation:question-slide-in .3s ease}@keyframes question-slide-in{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.screen-enter,.question-enter,.option-btn.correct,.option-btn.incorrect,.quiz-stat__value.pop,.result-hero__icon,.time-attack-fill{animation:none!important}}.lives-row{display:flex;gap:.25rem;font-size:1.2rem;line-height:1}.lives-row .lost{opacity:.25;filter:grayscale(1)}.time-attack-track{height:6px;border-radius:999px;background:var(--color-border);overflow:hidden;margin-bottom:.75rem}.time-attack-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--color-success),var(--color-accent) 70%,var(--color-danger));animation-name:time-attack-shrink;animation-timing-function:linear;animation-fill-mode:forwards;transform-origin:left}@keyframes time-attack-shrink{0%{width:100%}to{width:0%}}.timed-out-banner{text-align:center;font-weight:700;color:var(--color-danger);margin-bottom:.5rem}.ladder-list{display:flex;flex-direction:column;gap:.6rem}.ladder-node{display:flex;align-items:center;gap:.9rem;text-align:left;border:1.5px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-md);padding:.75rem 1rem;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;color:var(--color-text)}.ladder-node:hover:not(:disabled){border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-card)}.ladder-node.cleared{border-color:var(--color-success);background:var(--color-success-bg)}.ladder-node.locked{opacity:.5;cursor:not-allowed}.ladder-node__number{width:32px;height:32px;border-radius:50%;background:var(--color-border);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-family:var(--font-display)}.ladder-node.cleared .ladder-node__number{background:var(--color-success);color:#fff}.ladder-node__icon{width:44px;flex-shrink:0}.ladder-node__title{font-weight:700}.ladder-node__status{font-size:.8rem;color:var(--color-muted)}.text-input{font-family:inherit;font-size:1rem;padding:.7rem .85rem;border-radius:var(--radius-md);border:1.5px solid var(--color-border);background:var(--color-bg);color:var(--color-text)}.text-input:focus{outline:2px solid var(--color-primary-light);outline-offset:1px}.account-menu{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.account-pill{font-size:.85rem;color:#f5f1e6;opacity:.9}.role-badge{font-size:.65rem;font-weight:800;text-transform:uppercase;padding:.15rem .45rem;border-radius:999px;background:var(--color-accent);color:#241a05;margin-left:.4rem}.admin-table{width:100%;border-collapse:collapse;font-size:.85rem}.admin-table th,.admin-table td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--color-border);vertical-align:middle}.admin-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-muted)}.admin-table-wrap{overflow-x:auto}.status-pill{font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:999px}.status-pill.active{background:var(--color-success-bg);color:var(--color-success)}.status-pill.locked{background:#c9992e2e;color:var(--color-accent)}.status-pill.disabled{background:var(--color-danger-bg);color:var(--color-danger)}.inline-select{font-family:inherit;font-size:.82rem;padding:.3rem .4rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text)}