:root{--bg: #1a1226;--ink: #fdf0ff;--muted: #b79ad0;--soft: #2a1e3d;--hi: #ffb84d;--hi-ink: #2a1400;--bad: #ff7a9c;--card: #241834;--pink: #ff6fb5}[data-theme=light]{--bg: #fff4fb;--ink: #35204a;--muted: #8a6ba8;--soft: #f0deea;--hi: #f2960a;--hi-ink: #ffffff;--bad: #d6486e;--card: #ffffff;--pink: #e5449a}*{box-sizing:border-box}body{margin:0;font-family:Quicksand,system-ui,sans-serif;background:radial-gradient(120% 90% at 50% 0%,var(--soft),var(--bg));color:var(--ink);min-height:100vh}#app{min-height:100vh;display:flex;flex-direction:column}.bar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px}.brand{font-weight:800}.brand span{color:var(--pink)}.phasebadge{font-weight:700;color:var(--muted);background:var(--card);border:1px solid var(--soft);border-radius:999px;padding:6px 14px;font-size:.9rem}.toggle{background:var(--card);color:var(--ink);border:1px solid var(--soft);border-radius:999px;padding:7px 14px;font-weight:700;cursor:pointer}.hud{display:flex;gap:12px;justify-content:center;padding:4px 20px 0;flex-wrap:wrap}.stat{background:var(--card);border:2px solid var(--soft);border-radius:20px;padding:9px 22px;text-align:center;min-width:110px}.num{font-size:2.2rem;font-weight:800;line-height:1;color:var(--pink)}.lab{font-size:.76rem;color:var(--muted);font-weight:700;margin-top:4px}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px}.row{display:flex;align-items:center;gap:18px}.mascot{font-size:3.4rem;animation:bob 2s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-8px) rotate(-4deg)}}.say{font-size:1.3rem;color:var(--muted);font-weight:700}.progress{width:min(440px,82vw);height:26px;border-radius:999px;background:var(--soft);overflow:hidden;box-shadow:inset 0 2px 6px #0000004d}.progressfill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--hi),var(--pink));box-shadow:0 0 14px var(--pink);transition:width .25s ease}.big{width:230px;height:230px;border-radius:40px;background:var(--card);border:3px solid var(--pink);display:grid;place-items:center;font-size:9rem;font-weight:800;transition:transform .16s ease,box-shadow .16s ease}.big.hit{transform:scale(1.07) rotate(1.5deg);box-shadow:0 0 26px #ffb84d52}.big.miss{border-color:var(--bad);animation:nudge .3s}@keyframes nudge{25%{transform:translate(-8px)}75%{transform:translate(8px)}}.heat{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:460px}.cell{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:1.5rem;text-transform:lowercase;border:2px solid var(--soft);transition:background .3s,border-color .3s,transform .2s,box-shadow .3s}.cell.untried{background:var(--soft);color:var(--muted)}.cell.learning{background:transparent;border-color:var(--pink);color:var(--ink)}.cell.strong{background:var(--hi);color:var(--hi-ink);transform:translateY(-4px) scale(1.06);box-shadow:0 6px 16px #ff6fb566}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14081eb3;display:grid;place-items:center;padding:20px;z-index:10}.overlay[hidden]{display:none}.card{background:var(--card);color:var(--ink);border-radius:30px;padding:36px 30px;text-align:center;max-width:400px;animation:party .4s}@keyframes party{0%{transform:scale(.7) rotate(-6deg);opacity:0}to{transform:scale(1);opacity:1}}.card h2{margin:6px 0 10px;font-size:2rem}.card p{margin:6px 0}.party{font-size:4rem}.glance{color:var(--muted)}.next{color:var(--pink);font-weight:800}.show{color:var(--muted);font-weight:700;margin-top:12px}.again{margin-top:16px;background:linear-gradient(90deg,var(--hi),var(--pink));color:var(--hi-ink);border:0;border-radius:999px;padding:13px 30px;font-weight:800;font-size:1.1rem;cursor:pointer}