:root{--bg: #14111a;--bg-glow: #251e30;--bg-elevated: #1d1826;--bg-raised: #282031;--bg-hover: #342b40;--border: #3b3147;--border-hover: #504462;--border-dashed: #4a3f57;--text: #f4eee8;--text-dim: #b3a6b6;--text-faint: #8c7f95;--accent: #e5a33c;--accent-hover: #f2b754;--accent-shade: #8d5a1a;--on-accent: #241706;--ok: #58cc8f;--danger: #f2606b;--disc: #0f0c14;--disc-groove: #241d2c;--disc-rim: #4a3f57;--radius: 14px;--radius-sm: 9px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 700px at 50% -10%,var(--bg-glow) 0%,var(--bg) 60%);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--border);background:var(--bg-raised);border-radius:var(--radius-sm);padding:9px 16px;transition:background .12s ease,border-color .12s ease,transform 80ms ease}button:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-hover)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:transparent;color:var(--on-accent);font-weight:650}button.primary:hover:not(:disabled){background:var(--accent-hover)}button.ghost{background:transparent}input,select{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;width:100%}input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.app{max-width:1040px;margin:0 auto;padding:28px 20px 64px}.brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}.brand .logo{width:34px;height:34px;flex:none}.brand h1{margin:0;font-size:30px;letter-spacing:-.5px}.panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:18px}.panel h2{margin:0 0 4px;font-size:17px}.panel .hint{color:var(--text-dim);font-size:13px;margin:0 0 16px}.field{margin-bottom:14px}.field>label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.choices{display:flex;gap:8px;flex-wrap:wrap}.choice{flex:1 1 160px;text-align:left;padding:12px 14px;line-height:1.35}.choice.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.choice.selected:hover:not(:disabled){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,transparent)}.choice.group{flex:0 0 auto}.choice small{display:block;color:var(--text-dim);font-size:12px;margin-top:3px}.notice{border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;margin-bottom:14px;border:1px solid}.notice.error{background:color-mix(in srgb,var(--danger) 10%,transparent);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}.notice.warn{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}.notice code{background:#ffffff14;padding:1px 5px;border-radius:4px;font-size:12.5px}.notice ol{margin:8px 0 0;padding-left:20px}.notice li{margin-bottom:4px}.statusbar{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;color:var(--text-dim);font-size:13px}.statusbar>.row{flex:1 1 auto;min-width:0}.statusbar>button{flex:0 0 auto}.pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg-raised);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:12.5px}.turn{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}.turn h2{margin:0;font-size:22px}.turn .sub{color:var(--text-dim);font-size:13px}.timeline-wrap{padding:4px 2px 12px;overflow-x:hidden}.timeline{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;row-gap:10px;min-height:132px;-webkit-user-select:none;user-select:none}.card{flex:0 0 auto;width:132px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;display:flex;flex-direction:column;justify-content:center;gap:5px;text-align:center}.card .year{font-size:27px;font-weight:700;letter-spacing:-.5px}.card .title{font-size:12.5px;font-weight:600;line-height:1.25}.card .artist{font-size:11.5px;color:var(--text-dim)}.card.fresh{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok)}.card.wrong{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}.slot{flex:0 0 auto;width:42px;align-self:stretch;margin:0 5px;border:1px dashed var(--border-dashed);border-radius:var(--radius-sm);background:transparent;color:var(--text-faint);font-size:20px;display:flex;align-items:center;justify-content:center;padding:0}.slot:hover:not(:disabled){border-color:var(--accent);border-style:solid;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.slot.selected:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 26%,transparent)}.timeline.idle .slot{visibility:hidden;width:10px;margin:0 1px}.mystery{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(135deg,var(--bg-raised),var(--bg-elevated));border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}.disc{position:relative;width:64px;height:64px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,var(--disc) 0 1.5px,var(--disc-groove) 1.5px 3px),var(--disc);box-shadow:inset 0 0 0 1px var(--disc-rim),inset 0 0 10px #000c,0 2px 8px #0000008c;flex:0 0 auto}.disc-label{position:absolute;top:33%;right:33%;bottom:33%;left:33%;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-shade));box-shadow:0 0 0 1px #0009}.disc-label:after{content:"";position:absolute;top:38%;right:38%;bottom:38%;left:38%;border-radius:50%;background:var(--bg)}.cover{width:72px;height:72px;border-radius:6px;object-fit:cover;flex:0 0 auto;box-shadow:0 2px 8px #0000008c}.disc.spinning{animation:spin 3.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.disc.spinning{animation:none}}.mystery .info{flex:1 1 220px;min-width:0}.mystery .info strong{display:block;font-size:17px}.mystery .info span{color:var(--text-dim);font-size:13px}.reveal{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border-radius:var(--radius);padding:20px 22px;margin-bottom:18px;border:1px solid}.reveal.correct{background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}.reveal.wrong{background:color-mix(in srgb,var(--danger) 9%,transparent);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}.reveal .verdict{font-size:19px;font-weight:700;margin-bottom:2px}.reveal .detail{color:var(--text-dim);font-size:13.5px}.scoreboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}.stat{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}.stat .label{color:var(--text-faint);font-size:12px;text-transform:uppercase;letter-spacing:.5px}.stat .value{font-size:25px;font-weight:700;margin-top:2px}.player-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}.player-row{display:flex;gap:8px;align-items:center}.player-row button{flex:0 0 auto;padding:9px 12px}.footnote{color:var(--text-faint);font-size:12.5px;margin-top:10px}@media(max-width:560px){.card{width:104px;padding:10px 8px}.card .year{font-size:22px}.slot{width:34px;margin:0 4px}}.roster{display:flex;flex-direction:column;gap:8px}.roster-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px}.roster-name{display:flex;align-items:baseline;gap:8px;font-weight:600}.tag{font-weight:400;font-size:11.5px;color:var(--text-faint);border:1px solid var(--border);border-radius:999px;padding:1px 8px}.roster-row .detail{color:var(--text-dim);font-size:13px}.roster-row button{padding:6px 12px;font-size:13.5px}.roster-row .choice{flex:0 0 auto}.guess-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.guess-form input{flex:1 1 160px;width:auto;min-width:0}.guess-form button{flex:0 0 auto}.guess-result{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}.guess-result .ok{color:var(--ok)}.guess-result .bad{color:var(--danger)}.guess-result strong{color:var(--text)}.turn.end{justify-content:center}.turn.end .hint{flex-basis:100%;text-align:center;margin:2px 0 0;color:var(--text-dim);font-size:13px}button.big{padding:14px 44px;font-size:17px}button.block{width:100%}.handoff{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:60vh;text-align:center}.handoff h2{margin:0;font-size:34px;letter-spacing:-.5px}.handoff button{padding:14px 40px;font-size:17px}.card.pending{border-style:dashed;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}.card.pending .year{font-size:30px}.card.pending .title{color:var(--text-dim)}.timeline-label{color:var(--text-faint);font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin-top:14px}.row.spread{justify-content:space-between;width:100%}input[type=range]{background:transparent;border:none;padding:0;accent-color:var(--accent)}.volume{display:flex;align-items:center;gap:0;color:var(--text-dim)}.volume.muted button.icon{color:var(--text-faint)}.volume input[type=range]{flex:0 1 96px;min-width:40px}.panel>h2+*:not(.hint),.panel>.panel-head+*:not(.hint){margin-top:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.panel-head h2{margin:0}.panel-head .hint{margin:2px 0 0}.row.end{justify-content:flex-end;width:100%}.slot.selected{border-style:solid;border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}.field>label .tag{margin-left:8px}.transport{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:10px}.controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}.controls>:first-child{justify-self:end}.controls>:last-child{justify-self:start}.mystery.player{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center}@media(max-width:620px){.mystery.player{grid-template-columns:64px minmax(0,1fr)}}button.icon{display:grid;place-items:center;width:46px;height:46px;padding:0;border-color:transparent;background:transparent;border-radius:50%;color:var(--text-dim)}button.icon:hover:not(:disabled){background:#ffffff12;border-color:transparent;color:var(--text)}button.icon svg,.volume svg{width:25px;height:25px;flex:0 0 auto}button.icon.big{width:58px;height:58px;background:var(--bg-raised);border-color:var(--border);color:var(--text)}.verdict-toggle{background:transparent;border:1px solid transparent;padding:2px 8px;font:inherit;border-radius:var(--radius-sm)}.verdict-toggle.ok{color:var(--ok)}.verdict-toggle.bad{color:var(--danger)}.verdict-toggle.static{display:inline-block}.verdict-toggle:hover:not(:disabled):not(.static){background:#ffffff0f;border-color:var(--border)}.lobby-code{display:flex;flex-direction:column;align-items:center;gap:6px}.lobby-code label{color:var(--text-dim);font-size:12.5px}.lobby-code .code{font-size:clamp(28px,9vw,44px);font-family:ui-monospace,SF Mono,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.22em;text-indent:.22em;color:var(--accent);font-variant-numeric:tabular-nums}.lobby-players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.lobby-players+*{margin-top:16px}.lobby-players li{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm)}.join-row{align-items:stretch}.join-row input{flex:1 1 8ch}.join-row .code-input{flex:0 1 11ch}.code-input{flex:0 1 11ch;letter-spacing:.18em;font-size:18px;font-weight:600;font-family:ui-monospace,SF Mono,SFMono-Regular,Menlo,Consolas,monospace}.code-input::placeholder{font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:15px;font-weight:400;letter-spacing:normal}