:root{--paper: #FAF8F3;--paper-soft: #FFFFFF;--cream: #FFF8EC;--ink: #1F2A37;--ink-soft: #5A6573;--amber: #FF7A45;--amber-soft: #FFD3BD;--forest: #2D6A4F;--forest-soft: #D6E7DD;--forest-deep: #1B4332;--sky: #6FA8C9;--sky-soft: #D6E8F2;--danger: #B23A2E;--danger-soft: #F4D8D3;--gold: #D4A017;--gold-soft: #FFEEB0;--radius-card: 20px;--radius-pill: 999px;--shadow-card: 0 1px 2px rgba(31, 42, 55, .08), 0 12px 32px rgba(31, 42, 55, .18);--shadow-soft: 0 8px 24px rgba(31, 42, 55, .12);--font-display: "Fredoka", "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;--font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden}html{background:var(--forest-deep)}body{font-family:var(--font-body);color:var(--ink);font-size:16px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:manipulation;background:radial-gradient(circle at 20% 0%,rgba(255,122,69,.12),transparent 50%),radial-gradient(circle at 80% 100%,rgba(111,168,201,.12),transparent 60%),linear-gradient(180deg,#1b4332,#2d6a4f)}button{font-family:inherit;cursor:pointer;border:none;background:none}button:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:8px}.app{position:fixed;inset:0;z-index:1;display:flex;align-items:stretch;justify-content:stretch;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}.scene-root{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.top-hud{position:absolute;top:clamp(10px,2.5vw,20px);left:clamp(12px,3vw,28px);display:flex;gap:8px;z-index:10}.chip{background:#1b4332a6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--paper);font-family:var(--font-display);font-weight:500;font-size:.95rem;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid rgba(214,231,221,.3);display:inline-flex;align-items:center;gap:6px;min-height:40px}.chip svg{width:20px;height:20px;flex-shrink:0}.chip-back{cursor:pointer;transition:background .12s}.chip-back:hover{background:#1b4332d9}.chip-back:focus-visible{outline:3px solid var(--paper);outline-offset:2px}.menu-screen{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;padding:clamp(56px,12vw,80px) clamp(14px,3vw,28px) clamp(14px,3vw,28px);overflow-y:auto;-webkit-overflow-scrolling:touch;animation:overlay-in .26s ease-out}.menu-header{text-align:center;margin-bottom:clamp(14px,3vw,22px);color:var(--paper)}.menu-kicker{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;color:var(--amber);font-size:.75rem;margin:0 0 6px}.menu-title{font-family:var(--font-display);font-size:clamp(1.6rem,5.5vw,2.4rem);margin:0 0 6px;color:var(--paper);letter-spacing:-.02em}.menu-subtitle{margin:0 0 10px;color:var(--forest-soft);font-size:clamp(.95rem,2.4vw,1.05rem);line-height:1.4}.menu-stats{font-family:var(--font-display);color:var(--paper);background:#1b43328c;border:1px solid rgba(214,231,221,.25);display:inline-flex;gap:4px;padding:6px 14px;border-radius:var(--radius-pill);font-size:.9rem;margin:0}.menu-stats span:first-of-type{color:var(--gold);font-weight:600}.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:clamp(10px,2.5vw,16px);max-width:640px;width:100%;margin:0 auto}.deck-card{background:var(--paper);border:2px solid transparent;border-radius:var(--radius-card);padding:clamp(14px,3.5vw,20px) 10px;min-height:132px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.deck-card:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 28px #00000040;border-color:var(--amber)}.deck-card:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.deck-card.is-mastered{border-color:var(--gold);background:linear-gradient(160deg,var(--paper),var(--gold-soft))}.deck-card.is-mix{background:linear-gradient(160deg,var(--paper),var(--sky-soft))}.deck-card.is-mix .deck-number{color:var(--sky)}.deck-number{font-family:var(--font-display);font-size:clamp(2.4rem,8vw,3.4rem);font-weight:600;color:var(--forest);line-height:1}.deck-sublabel{font-family:var(--font-body);font-size:.78rem;color:var(--ink-soft);letter-spacing:.02em}.deck-stars{font-family:var(--font-display);color:var(--gold);font-size:1rem;letter-spacing:2px;margin-top:2px}.deck-mastered{font-family:var(--font-display);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;background:var(--gold);color:#fff;padding:3px 8px;border-radius:var(--radius-pill);margin-top:4px}.session-screen{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;padding:clamp(56px,12vw,80px) clamp(16px,4vw,32px) clamp(16px,4vw,32px);gap:clamp(12px,2.5vw,18px);overflow-y:auto;-webkit-overflow-scrolling:touch;animation:overlay-in .26s ease-out;color:var(--paper)}.session-header{width:100%;max-width:520px;text-align:center}.session-kicker{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;color:var(--amber);font-size:.72rem;margin:0 0 8px}.session-progress{display:flex;justify-content:center;gap:6px;margin:0 auto}.progress-dot{width:10px;height:10px;border-radius:50%;background:#ffffff38;flex-shrink:0;transition:background .16s,transform .16s}.progress-dot.done{background:var(--forest-soft)}.progress-dot.active{background:var(--amber);transform:scale(1.4)}.session-streak{font-family:var(--font-display);font-size:.95rem;color:var(--gold);min-height:1.2em;opacity:0;transition:opacity .2s}.session-streak.is-active{opacity:1}.question-card{background:var(--paper);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:clamp(22px,5vw,36px) clamp(20px,4vw,32px);width:100%;max-width:520px}.question-card.is-pop{animation:pop-in .32s cubic-bezier(.2,.8,.2,1)}@keyframes pop-in{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.question-text{font-family:var(--font-display);font-size:clamp(2.4rem,9vw,3.8rem);color:var(--ink);text-align:center;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,16px);line-height:1}.op-sign,.op-eq{color:var(--amber)}.op-q{color:var(--amber);min-width:1.4em;display:inline-block;transition:color .16s}.op-q.is-correct{color:var(--forest)}.op-q.is-wrong{color:var(--danger)}.answers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,14px);width:100%;max-width:520px}.answer-btn{background:var(--paper);color:var(--ink);border:2px solid transparent;border-radius:var(--radius-card);padding:clamp(14px,3vw,22px) 8px;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:var(--shadow-soft);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s;cursor:pointer;font-family:var(--font-display)}.answer-btn:hover:not(:disabled){transform:translateY(-3px);border-color:var(--amber);box-shadow:0 10px 24px #00000040}.answer-btn:disabled{cursor:default}.answer-btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px}.answer-key{font-size:.66rem;color:var(--ink-soft);background:var(--cream);border-radius:var(--radius-pill);padding:1px 8px;letter-spacing:.08em}.answer-value{font-size:clamp(1.6rem,6vw,2.2rem);font-weight:600;color:var(--forest)}.answer-btn.is-correct{background:var(--forest-soft);border-color:var(--forest)}.answer-btn.is-correct .answer-value{color:var(--forest)}.answer-btn.is-wrong{background:var(--danger-soft);border-color:var(--danger)}.answer-btn.is-wrong .answer-value{color:var(--danger)}.feedback{min-height:2.4em;font-family:var(--font-display);border-radius:14px;padding:10px 18px;text-align:center;color:transparent;transition:background .16s,color .16s;width:100%;max-width:520px}.feedback-correct{background:var(--forest-soft);color:var(--forest);border:1.5px solid var(--forest)}.feedback-wrong{background:var(--danger-soft);color:var(--danger);border:1.5px solid var(--danger)}.overlay{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,40px);background:#081c129e;animation:overlay-in .26s ease-out;overflow-y:auto}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.panel{background:var(--paper);color:var(--ink);border-radius:var(--radius-card);padding:clamp(24px,5vw,40px);box-shadow:var(--shadow-card);max-width:460px;width:100%;text-align:center;animation:panel-in .34s cubic-bezier(.2,.8,.2,1)}@keyframes panel-in{0%{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.panel h2{font-family:var(--font-display);font-size:clamp(1.4rem,4.5vw,1.9rem);margin:0 0 10px;letter-spacing:-.01em}.panel p{margin:0 0 14px;color:var(--ink-soft);font-size:clamp(.95rem,2.4vw,1.05rem);line-height:1.55}.panel-kicker{font-family:var(--font-display);text-transform:uppercase;font-size:.72rem;letter-spacing:.12em;color:var(--amber);margin:0 0 6px}.result-stars{font-family:var(--font-display);color:var(--gold);font-size:clamp(2rem,7vw,2.8rem);letter-spacing:6px;margin:4px 0 8px;line-height:1}.result-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0 6px}.stat{background:var(--paper-soft);border-radius:14px;padding:14px 8px;border:1px solid var(--amber-soft)}.stat-value{font-family:var(--font-display);font-size:1.5rem;color:var(--amber);line-height:1.1}.stat-label{font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}.result-mastery{margin:14px 0 0;padding:14px;border-radius:14px;background:var(--gold-soft);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px;border:2px solid var(--gold)}.result-mastery span{font-size:1.6rem;line-height:1}.result-mastery strong{font-family:var(--font-display);font-weight:500}.result-unlock{margin:12px 0 0;padding:12px;border-radius:14px;background:var(--forest-soft);color:var(--forest);animation:bubble-in .3s ease-out}.result-unlock strong{font-family:var(--font-display);font-weight:500}@keyframes bubble-in{0%{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.result-actions{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:20px}.btn-primary{background:var(--amber);color:#fff;font-family:var(--font-display);font-weight:500;font-size:1.05rem;padding:12px 28px;min-height:48px;min-width:160px;border-radius:var(--radius-pill);box-shadow:0 6px 16px #ff7a4559;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;display:inline-flex;align-items:center;justify-content:center}.btn-primary:hover{background:#e86a35}.btn-primary:active{transform:translateY(1px);box-shadow:0 3px 10px #ff7a454d}.btn-primary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.btn-secondary{background:transparent;color:var(--ink-soft);font-family:var(--font-body);font-size:.95rem;padding:8px 16px;min-height:40px;text-decoration:underline;text-underline-offset:3px;transition:color .12s}.btn-secondary:hover{color:var(--ink)}.btn-secondary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}@media (max-width: 380px){.deck-grid{grid-template-columns:repeat(3,1fr)}.answers{grid-template-columns:1fr}.answer-btn{min-height:64px;flex-direction:row;gap:12px;padding:12px 16px}}@media (max-height: 520px){.menu-screen,.session-screen{padding-top:clamp(46px,8vw,60px)}}@media (prefers-reduced-motion: reduce){.menu-screen,.session-screen,.overlay,.panel,.question-card.is-pop,.result-unlock{animation:none!important}.btn-primary,.deck-card,.answer-btn,.progress-dot{transition:none!important}}
