:root{--bg:#0b0b0b;--surface:#111;--surface-2:#181818;--text:#f1f0ec;--muted:#aaa9a4;--subtle:#6f6e69;--accent:#b6a0ff;--accent-strong:#9274f5;--correct:#67c58a;--wrong:#e06c6c;--border:#292929;--border-strong:#444;--font-sm:13px;--font-md:16px;--font-lg:18px;--font-xl:26px;--font-2xl:42px;--font-3xl:72px;--ease:cubic-bezier(.2, .7, .2, 1)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100vh;font-family:Helvetica Neue,Helvetica,Arial,system-ui,sans-serif}.app-shell{justify-content:center;align-items:center;min-height:100vh;padding:clamp(16px,4vw,48px);display:flex}.card{background:var(--surface);border:1px solid var(--border-strong);box-shadow:none;border-radius:0}button{cursor:pointer;border-radius:0;font-family:inherit}button:focus-visible,a:focus-visible,audio:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
.stage{width:100%;max-width:920px;margin:0 auto}.panel{padding:clamp(24px,5vw,56px)}.enter,.pop{animation:enter .18s var(--ease) both}@keyframes enter{0%{opacity:0}to{opacity:1}}.eyebrow,.edition,.round-label,.score-pill,.breakdown-title{letter-spacing:.13em;text-transform:uppercase;font-size:11px;font-weight:650}.eyebrow{color:var(--accent)}.edition{color:var(--subtle)}.title{letter-spacing:-.065em;max-width:800px;margin:clamp(64px,12vh,120px) 0 0;font-size:clamp(46px,9vw,104px);font-weight:620;line-height:.92}.title .grad{color:var(--accent)}.lede{max-width:600px;color:var(--muted);margin:32px 0 0;font-size:clamp(16px,2.1vw,20px);line-height:1.55}.headline{letter-spacing:-.035em;margin:0;font-size:clamp(24px,4vw,34px);font-weight:560}.btn{border:1px solid var(--border-strong);min-height:50px;color:var(--text);background:0 0;border-radius:0;justify-content:center;align-items:center;gap:12px;padding:0 22px;font-size:14px;font-weight:600;transition:background .12s,color .12s,border-color .12s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--text);background:var(--text);color:var(--bg)}.btn:active:not(:disabled){background:var(--muted)}.btn:disabled{cursor:not-allowed;opacity:.35}.btn-primary{border-color:var(--accent);background:var(--accent);color:#0b0b0b}.btn-primary:hover:not(:disabled){border-color:var(--text);background:var(--text);color:var(--bg)}.btn-lg{min-height:58px;padding:0 28px;font-size:15px}.btn-ghost{background:0 0}.results-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding-bottom:18px;display:flex}.start-actions{align-items:center;gap:16px;margin-top:48px;display:flex}.footer-note{border-top:1px solid var(--border);color:var(--subtle);letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;margin-top:72px;padding-top:16px;font-size:11px;display:flex}.footer-note span:last-child{color:var(--muted)}.game-head{justify-content:space-between;align-items:center;display:flex}.round-label,.score-pill{color:var(--muted)}.score-pill b{color:var(--text);font-size:inherit;margin-left:8px}.progress{grid-template-columns:repeat(5,1fr);gap:4px;margin:18px 0 52px;display:grid}.progress-seg{background:var(--border-strong);height:3px;position:relative;overflow:hidden}.progress-seg .fill{transform-origin:0;background:var(--accent);position:absolute;inset:0;transform:scaleX(0)}.progress-seg.done .fill,.progress-seg.current .fill{transform:scaleX(1)}.progress-seg.current .fill{background:var(--text)}.progress-seg.correct .fill{background:var(--correct)}.progress-seg.wrong .fill{background:var(--wrong)}.question{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px;display:flex}.speed-bonus{color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.1em;text-transform:uppercase;flex:none;font-size:11px;font-weight:650}.single-clip{border:1px solid var(--border-strong);width:100%}.clip-card{background:var(--surface);min-width:0;padding:clamp(24px,5vw,44px);transition:background .12s,border-color .12s;position:relative}.clip-card.correct{box-shadow:inset 0 -3px 0 var(--correct);background:#67c58a0b}.clip-card.wrong{box-shadow:inset 0 -3px 0 var(--wrong);background:#e06c6c0b}.wave{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:0;align-items:center;gap:3px;width:100%;height:clamp(80px,14vw,120px);margin:0 0 36px;padding:0;display:flex}.wave i{transform-origin:50%;background:#333;border-radius:0;flex:1;min-width:2px;transition:background 80ms linear}.wave:hover i{background:#464646}.wave i.filled{background:var(--accent)}.clip-card.playing-now .wave i.filled{animation:.7s ease-in-out infinite alternate meter}.clip-card.playing-now .wave i.filled:nth-child(3n){animation-delay:.12s}.clip-card.playing-now .wave i.filled:nth-child(3n+1){animation-delay:.24s}@keyframes meter{0%{transform:scaleY(.72)}to{transform:scaleY(1)}}.clip-controls{border-top:1px solid var(--border);align-items:center;gap:16px;padding-top:16px;display:flex}.play-btn{border:1px solid var(--accent);background:var(--accent);width:52px;height:52px;color:var(--bg);border-radius:0;flex:0 0 52px;justify-content:center;align-items:center;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.play-btn:hover{border-color:var(--text);background:var(--text)}.play-btn svg{transform:translate(1px)}.play-btn.is-playing svg{transform:none}.clip-time{color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:12px}.clip-time .sep{color:var(--subtle)}audio{display:none}.clip-error{color:var(--wrong);margin:14px 0 0;font-size:12px}.answers{grid-template-columns:1fr 1fr;gap:0;margin-top:16px;display:grid}.answers .btn{min-height:66px;font-size:16px}.answers .btn:last-child{border-color:var(--accent);color:var(--accent)}.answers .btn:last-child:hover{color:var(--bg)}.answers .btn+.btn{border-left:0}.reveal{border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin-top:16px;padding:18px 0 18px 18px;display:grid}.reveal.correct{border-left:3px solid var(--correct)}.reveal.wrong{border-left:3px solid var(--wrong)}.reveal-head{align-items:center;gap:10px;display:flex}.reveal-icon{color:var(--muted);display:inline-flex}.reveal.correct .reveal-icon,.reveal.correct .reveal-title{color:var(--correct)}.reveal.wrong .reveal-icon,.reveal.wrong .reveal-title{color:var(--wrong)}.reveal-title{margin:0;font-size:15px;font-weight:650}.reveal-body{color:var(--muted);margin:0;font-size:13px;line-height:1.45}.reveal-body strong{color:var(--text)}.reveal-actions{justify-self:end}.results{text-align:left}.result-accuracy{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.score-block{border-bottom:1px solid var(--border-strong);grid-template-columns:100px 1fr;align-items:end;column-gap:24px;margin-top:56px;padding-bottom:32px;display:grid}.score-label{color:var(--subtle);letter-spacing:.13em;text-transform:uppercase;align-self:start;font-size:11px;font-weight:650}.score-block .big{letter-spacing:-.08em;justify-self:end;font-size:clamp(72px,15vw,144px);font-weight:520;line-height:.78}.score-block .big small{color:var(--subtle);letter-spacing:-.02em;font-size:.28em}.score-bar{background:var(--border-strong);grid-column:1/-1;height:4px;margin-top:36px}.score-bar span{width:calc(var(--pct) * 1%);background:var(--accent);height:100%;display:block}.result-title{letter-spacing:-.04em;margin:36px 0 0;font-size:clamp(28px,5vw,44px);font-weight:560}.breakdown{border-top:1px solid var(--border-strong);margin-top:48px}.breakdown-title{border-bottom:1px solid var(--border);color:var(--subtle);margin:0;padding:14px 0}.round-row{border-bottom:1px solid var(--border);grid-template-columns:56px 1fr auto;align-items:center;min-height:50px;display:grid}.round-row .idx{color:var(--subtle);font-variant-numeric:tabular-nums;font-size:11px}.round-row .genre{font-size:14px}.round-row .mark{letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:650}.round-row.ok .mark{color:var(--correct)}.round-row.no .mark{color:var(--wrong)}.results-actions{gap:12px;margin-top:32px;display:flex}.toast{min-height:18px;color:var(--accent);margin-top:14px;font-size:12px}@media (max-width:680px){.panel{padding:22px}.title{margin-top:64px}.footer-note{gap:24px}.reveal{grid-template-columns:1fr;padding:18px}.reveal-actions{justify-self:stretch}.reveal-actions .btn{width:100%}.score-block{grid-template-columns:1fr}.score-block .big{justify-self:start;margin-top:56px}.results-actions{display:grid}}@media (max-width:440px){.app-shell{padding:0}.stage{border-left:0;border-right:0;min-height:100vh}.start-actions,.results-actions{display:grid}.start-actions .btn,.results-actions .btn{width:100%}.footer-note{flex-direction:column;align-items:flex-start;gap:8px}.answers{grid-template-columns:1fr}.answers .btn+.btn{border-top:0;border-left:1px solid var(--border-strong)}}