:root{--bg: #0a0a0a;--surface: #141414;--surface-2: #1d1d1d;--border: #2a2a2a;--border-strong: #3a3a3a;--text: #f2f2f2;--text-dim: #9a9a9a;--text-faint: #6a6a6a;--accent: #ff5f00;--accent-soft: rgba(255, 95, 0, .14);--accent-text: #ff7b2e;--wrong: #b3453f;--wrong-soft: rgba(179, 69, 63, .16);--radius: 12px;--radius-sm: 8px;--font-display: "Space Grotesk", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--ease-out: cubic-bezier(.16, 1, .3, 1);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-12: 48px}*{margin:0;padding:0;box-sizing:border-box}html{color-scheme:dark}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.5;min-height:100dvh;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}a{color:var(--accent-text)}.app{max-width:560px;margin:0 auto;padding:0 var(--space-4) var(--space-12);display:flex;flex-direction:column;min-height:100dvh}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) 0;border-bottom:1px solid var(--border)}.logo{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.08em;text-transform:uppercase}.logo em{font-style:normal;color:var(--accent)}.header-actions{display:flex;gap:var(--space-2)}.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--text-dim);transition:color .15s ease,background .15s ease,transform .1s ease-out}.icon-btn:hover{color:var(--text);background:var(--surface-2)}.icon-btn:active{transform:scale(.94)}.tabs{display:flex;gap:var(--space-2);padding:var(--space-4) 0 var(--space-2)}.tab{flex:1;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;transition:all .18s var(--ease-out)}.tab:active{transform:scale(.97)}.tab.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.chips{display:flex;gap:var(--space-2);padding-bottom:var(--space-2);flex-wrap:wrap}.chip{min-height:40px;padding:0 var(--space-4);border-radius:999px;border:1px solid var(--border);color:var(--text-dim);font-size:14px;font-weight:500;transition:all .18s var(--ease-out)}.chip:active{transform:scale(.96)}.chip.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.round-meta{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-3) 0;color:var(--text-dim);font-size:14px}.round-meta strong{color:var(--text);font-family:var(--font-display);letter-spacing:.04em}.player-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-6);align-items:center}.stage-bar{display:flex;gap:3px;width:100%;height:14px}.stage-seg{border-radius:3px;background:var(--surface-2);border:1px solid var(--border);transition:background .25s var(--ease-out),border-color .25s var(--ease-out);position:relative;overflow:hidden}.stage-seg.unlocked{background:var(--border-strong);border-color:var(--border-strong)}.stage-seg.current{border-color:var(--accent)}.stage-seg .fill{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}.stage-seg.playing .fill{animation:fill linear forwards}@keyframes fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.stage-labels{display:flex;justify-content:space-between;width:100%;color:var(--text-faint);font-size:12px;font-variant-numeric:tabular-nums}.play-btn{width:88px;height:88px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center;transition:transform .12s ease-out,background .15s ease,box-shadow .2s ease}.play-btn:hover{background:var(--accent-soft);box-shadow:0 0 32px #ff5f0040}.play-btn:active{transform:scale(.94)}.play-btn:disabled{opacity:.4;cursor:default;box-shadow:none}.play-hint{color:var(--text-dim);font-size:14px;font-variant-numeric:tabular-nums;text-align:center}.play-hint strong{color:var(--text)}.guess-list{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) 0}.guess-row{min-height:48px;display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-4);border-radius:var(--radius-sm);border:1px dashed var(--border);color:var(--text-faint);font-size:15px;animation:slide-in .25s var(--ease-out)}@keyframes slide-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.guess-row.filled{border-style:solid;color:var(--text);background:var(--surface)}.guess-row.wrong{border-color:var(--wrong);background:var(--wrong-soft)}.guess-row.artist,.guess-row.correct{border-color:var(--accent);background:var(--accent-soft)}.guess-row.skipped{color:var(--text-dim)}.guess-row .what{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guess-row .note{margin-left:auto;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text);flex-shrink:0}.guess-form{position:relative;display:flex;gap:var(--space-2)}.guess-input{flex:1;min-height:52px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text);padding:0 var(--space-4);font-size:16px;transition:border-color .15s ease}.guess-input::placeholder{color:var(--text-faint)}.guess-input:focus{border-color:var(--accent);outline:none}.btn{min-height:52px;padding:0 var(--space-6);border-radius:var(--radius-sm);font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.05em;text-transform:uppercase;transition:transform .1s ease-out,background .15s ease,opacity .15s ease}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#140800}.btn-primary:hover{background:#ff7b2e}.btn-primary:disabled{opacity:.35;cursor:default}.btn-ghost{border:1px solid var(--border-strong);color:var(--text-dim)}.btn-ghost:hover{color:var(--text);border-color:var(--text-faint)}.suggestions{position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden;z-index:30;box-shadow:0 -8px 32px #00000080}.suggestion{display:block;width:100%;text-align:left;padding:var(--space-3) var(--space-4);font-size:15px;color:var(--text);border-bottom:1px solid var(--border)}.suggestion:last-child{border-bottom:none}.suggestion.highlighted,.suggestion:hover{background:var(--accent-soft)}.suggestion .artist{color:var(--text-dim)}.result-card{background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);padding:var(--space-6);text-align:center;display:flex;flex-direction:column;gap:var(--space-4);animation:slide-in .3s var(--ease-out)}.result-card.lost{border-color:var(--border-strong)}.result-title{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:.02em}.result-track{font-size:17px}.result-track .artist{color:var(--text-dim)}.result-grid{font-size:20px;letter-spacing:2px}.result-actions{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:grid;place-items:center;padding:var(--space-4);z-index:100;animation:fade .2s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);max-width:440px;width:100%;max-height:85dvh;overflow-y:auto;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);animation:modal-in .28s var(--ease-out)}@keyframes modal-in{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal h2{font-family:var(--font-display);font-size:20px;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center}.modal p{color:var(--text-dim);font-size:15px}.modal p strong{color:var(--text)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);text-align:center}.stat-num{font-family:var(--font-display);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}.stat-label{font-size:12px;color:var(--text-dim)}.dist-row{display:flex;align-items:center;gap:var(--space-2);font-size:13px;font-variant-numeric:tabular-nums}.dist-row .sec{width:42px;color:var(--text-dim);text-align:right}.dist-bar{height:20px;background:var(--surface-2);border-radius:4px;min-width:24px;display:flex;align-items:center;justify-content:flex-end;padding:0 6px;color:var(--text)}.dist-bar.top{background:var(--accent);color:#140800}.welcome{display:flex;flex-direction:column;gap:var(--space-4)}.welcome-logo{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.05}.welcome-logo em{font-style:normal;color:var(--accent)}.welcome ol{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}.welcome li{display:flex;gap:var(--space-3);color:var(--text-dim);font-size:15px}.welcome li strong{color:var(--text)}.welcome .num{font-family:var(--font-display);color:var(--accent);font-weight:700;flex-shrink:0;width:20px}.consent-note{font-size:12px;color:var(--text-faint);border-top:1px solid var(--border);padding-top:var(--space-3)}.consent-note a{color:var(--text-dim)}.footer{margin-top:auto;padding-top:var(--space-8);display:flex;gap:var(--space-4);justify-content:center;font-size:12px;color:var(--text-faint)}.footer a{color:var(--text-faint)}.footer a:hover{color:var(--text-dim)}.legal{padding:var(--space-6) 0;display:flex;flex-direction:column;gap:var(--space-4);font-size:15px;color:var(--text-dim)}.legal h1{font-family:var(--font-display);color:var(--text);font-size:24px}.legal h2{font-family:var(--font-display);color:var(--text);font-size:17px;margin-top:var(--space-4)}.legal address{font-style:normal}.yt-host{position:fixed;bottom:0;right:0;width:1px;height:1px;opacity:.01;pointer-events:none;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.stage-seg.playing .fill{animation:none;transform:scaleX(1)}}@media(max-width:420px){.player-card{padding:var(--space-4)}.stat-num{font-size:22px}}