:root{--bg:#0a0a0a;--bg-raised:#0f0f0f;--surface:#141414;--surface-2:#1e1e1e;--line:#2a2a2a;--line-strong:#3a3a3a;--text:#f2eee6;--text-dim:#c9c4ba;--muted:#8a857c;--faint:#4d4a45;--accent:#ff3d2e;--accent-dim:#7a1d16;--gold:#f5b700;--ok:#2bd47d;--on-accent:#0a0a0a;--font-display:"Anton", "Impact", "Arial Narrow", sans-serif;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--gutter:16px;--header-h:56px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (width>=768px){:root{--gutter:32px;--header-h:64px}}*,:before,:after{box-sizing:border-box;border-radius:0}html,body{background:var(--bg);min-height:100%;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0;font-size:15px;line-height:1.45}body{overflow-x:hidden}body:after{content:"";pointer-events:none;z-index:100;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}#root{flex-direction:column;min-height:100dvh;display:flex}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:var(--accent);color:var(--on-accent)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.display{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;margin:0;font-weight:400;line-height:.95}.label{text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-size:11px;font-weight:600}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.accent{color:var(--accent)}.btn{border:1px solid var(--text);min-height:48px;color:var(--text);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;background:0 0;justify-content:center;align-items:center;gap:10px;padding:0 22px;font-size:13px;font-weight:700;transition:background .15s,color .15s,border-color .15s,transform .1s;display:inline-flex}.btn:hover:not(:disabled){background:var(--text);color:var(--bg)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.35}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn--primary:hover:not(:disabled){background:var(--text);border-color:var(--text)}.btn--ghost{border-color:var(--line-strong);color:var(--text-dim)}.btn--small{min-height:36px;padding:0 14px;font-size:11px}.btn--block{width:100%}.icon-btn{border:1px solid var(--line-strong);background:var(--surface);width:48px;height:48px;color:var(--text);justify-content:center;align-items:center;transition:border-color .15s,background .15s;display:inline-flex}.icon-btn:hover{border-color:var(--text)}.field{flex-direction:column;gap:8px;display:flex}.input{background:var(--surface);border:1px solid var(--line-strong);width:100%;min-height:52px;color:var(--text);outline:none;padding:0 16px;font-size:16px;transition:border-color .15s}.input::placeholder{color:var(--faint)}.input:focus{border-color:var(--text)}.input--code{font-family:var(--font-mono);letter-spacing:.3em;text-transform:uppercase;text-align:center;font-size:22px}.panel{border:1px solid var(--line);background:var(--surface)}.panel__head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.panel__body{padding:16px}.segments{border:1px solid var(--line-strong);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.segments button{border:0;border-right:1px solid var(--line-strong);min-height:44px;color:var(--text-dim);font-family:var(--font-mono);background:0 0;font-size:14px;font-weight:600;transition:background .15s,color .15s}.segments button:last-child{border-right:0}.segments button[aria-pressed=true]{background:var(--text);color:var(--bg)}.segments button:hover:not([aria-pressed=true]):not(:disabled){background:var(--surface-2)}.segments button:disabled{color:var(--faint)}.toggle{text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:0;display:flex}.toggle__track{border:1px solid var(--line-strong);background:var(--bg);flex:none;width:52px;height:26px;transition:background .2s,border-color .2s;position:relative}.toggle__track:after{content:"";background:var(--muted);width:18px;height:18px;transition:transform .2s var(--ease-out), background .2s;position:absolute;top:3px;left:3px}.toggle[aria-checked=true] .toggle__track{background:var(--accent-dim);border-color:var(--accent)}.toggle[aria-checked=true] .toggle__track:after{background:var(--accent);transform:translate(26px)}.toggle:disabled{cursor:default}.toast{z-index:90;max-width:calc(100vw - 2 * var(--gutter));background:var(--text);color:var(--bg);border-left:4px solid var(--accent);animation:toast-in .3s var(--ease-out);padding:12px 18px;font-size:14px;font-weight:600;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,12px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.logo{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.005em;white-space:nowrap;line-height:.88}.logo--sm{font-size:22px}.logo--md{font-size:40px}.logo--xl{flex-direction:column;font-size:clamp(64px,17vw,156px);display:inline-flex}.logo--xl>span{display:block}.game{flex-direction:column;flex:1;display:flex}.topbar{z-index:20;height:var(--header-h);padding:0 var(--gutter);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0a0aeb;justify-content:space-between;align-items:center;gap:12px;display:flex;position:sticky;top:0}.topbar__logo{text-decoration:none}.topbar__right{align-items:center;gap:12px;display:flex}.topbar__room{align-items:baseline;gap:8px;display:none}.topbar__room .mono{letter-spacing:.2em;font-size:16px;font-weight:700}@media (width>=560px){.topbar__room{display:inline-flex}}.game__main{width:100%;max-width:1320px;padding:20px var(--gutter) 24px;flex-direction:column;flex:1;margin:0 auto;display:flex}.home{flex-direction:column;flex:1;min-height:100dvh;display:flex}.home__top{padding:16px var(--gutter);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;display:flex}.home__hero{width:100%;max-width:1320px;padding:32px var(--gutter) 40px;flex:1;gap:40px;margin:0 auto;display:grid}.home__intro{flex-direction:column;gap:24px;max-width:520px;display:flex}.home__logo{margin:0;font-weight:400}.home__lead{color:var(--text-dim);max-width:44ch;margin:0;font-size:17px}.home__lead strong{color:var(--gold)}.home__form{flex-direction:column;gap:12px;display:flex}.home__divider{align-items:center;gap:12px;display:flex}.home__divider:before,.home__divider:after{content:"";background:var(--line);flex:1;height:1px}.home__join{grid-template-columns:1fr auto;gap:8px;display:grid}.home__deck{flex-direction:column;justify-content:center;align-items:center;gap:36px;display:flex}.home__deck .turntable{width:min(78vw,440px)}.home__steps{background:var(--line);border:1px solid var(--line);gap:1px;width:min(100%,440px);margin:0;padding:0;list-style:none;display:grid}.home__steps li{background:var(--bg);color:var(--text-dim);align-items:baseline;gap:14px;padding:12px 14px;font-size:14px;display:flex}.home__steps .mono{color:var(--accent);font-weight:700}@media (width>=960px){.home__hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:64px;padding-top:48px}}.gate{flex-direction:column;align-items:flex-start;gap:20px;width:min(100%,440px);margin:auto;padding:40px 0;display:flex}.gate__title{font-size:clamp(40px,10vw,64px)}.gate__text{color:var(--text-dim);margin:0}.gate__field{width:100%}.turntable{aspect-ratio:1;flex:none;width:min(64vw,340px);position:relative}.vinyl,.vinyl__disc,.vinyl__sheen,.vinyl__spindle{border-radius:50%}.vinyl{aspect-ratio:1;width:86%;position:absolute;top:7%;left:0;box-shadow:0 28px 60px #000000bf,0 0 0 1px #1f1f1f}.vinyl__disc{will-change:transform;background:radial-gradient(circle,#0000 0 32.6%,#050505 32.8% 34%,#0000 34.2% 95%,#050505 96%),repeating-radial-gradient(circle,#0e0e0e 0 1.6px,#161616 2.2px 2.8px,#0e0e0e 3.4px);position:absolute;inset:0}.vinyl__label{width:34%;height:34%;position:absolute;top:33%;left:33%;overflow:visible}.vinyl__label-bg{fill:var(--accent)}.vinyl__label-ring{fill:none;stroke:#0a0a0a59;stroke-width:.8px}.vinyl__label-text{font-family:var(--font-mono);letter-spacing:1.1px;fill:#0a0a0ab8;font-size:6.2px;font-weight:700}.vinyl__label-mark{fill:var(--bg)}.vinyl__sheen{pointer-events:none;background:conic-gradient(from 210deg,#0000 0deg,#ffffff17 30deg,#0000 70deg 180deg,#ffffff0f 210deg,#0000 250deg);position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 0 34%,#000 34.5%);mask:radial-gradient(circle,#0000 0 34%,#000 34.5%)}.vinyl__spindle{background:#d9d4cb;width:2%;height:2%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vinyl__center{z-index:1;color:var(--bg);text-align:center;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:38%}.vinyl__q{font-family:var(--font-display);font-size:clamp(30px,8vw,54px);line-height:1}.vinyl__year{margin-top:30%;font-size:clamp(11px,2.6vw,15px)}.tonearm{transform-origin:70% 10%;width:22%;transition:transform 1.2s var(--ease-in-out);filter:drop-shadow(0 10px 10px #0009);position:absolute;top:-4%;right:0;overflow:visible;transform:rotate(-4deg)}.turntable.is-spinning .tonearm{transform:rotate(22deg)}.tonearm__base{fill:#191919;stroke:var(--line-strong);stroke-width:1.5px}.tonearm__pivot{fill:var(--muted)}.tonearm__arm{fill:none;stroke:#cfc9bf;stroke-width:4px;stroke-linecap:square;stroke-linejoin:miter}.tonearm__head{fill:var(--text)}.turntable--small{width:min(42vw,220px)}.equalizer{align-items:flex-end;gap:3px;width:min(80vw,380px);height:56px;display:flex}.equalizer span{background:linear-gradient(to top, var(--text-dim) 0%, var(--text) 68%, var(--accent) 68%);transform-origin:bottom;flex:1;height:100%;transform:scaleY(.04)}.equalizer--small{gap:2px;width:120px;height:40px}.equalizer--tiny{gap:2px;width:56px;height:26px}.round-timer{flex-direction:column;align-items:flex-end;gap:6px;width:120px;display:flex}.round-timer__readout{align-items:baseline;gap:4px;display:flex}.round-timer__digits{font-size:40px;font-weight:700;line-height:1}.round-timer__track{background:var(--line);width:100%;height:4px}.round-timer__bar{background:var(--text);transform-origin:0;height:100%}.round-timer.is-urgent .round-timer__digits{color:var(--accent);animation:1s ease-in-out infinite blink-soft}.round-timer.is-urgent .round-timer__bar{background:var(--accent)}.on-air{border:1px solid var(--line-strong);color:var(--muted);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;align-items:center;gap:8px;padding:6px 10px;font-size:11px;font-weight:700;display:inline-flex}.on-air__lamp{background:var(--faint);flex:none;width:8px;height:8px;display:inline-block}.on-air.is-live{color:var(--accent);border-color:var(--accent)}.on-air.is-live .on-air__lamp,.lobby__waiting .on-air__lamp{background:var(--accent);box-shadow:0 0 12px var(--accent);animation:1.6s ease-in-out infinite lamp}.tag{border:1px solid var(--line-strong);height:20px;color:var(--text-dim);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;flex:none;align-items:center;padding:0 6px;font-size:10px;font-weight:700;display:inline-flex}.tag--me{border-color:var(--accent);color:var(--accent)}.tag--dim{border-color:var(--line);color:var(--muted)}.tag--ok,.tag--title{background:var(--ok);border-color:var(--ok);color:var(--bg)}.tag--artist,.tag--gold{background:var(--gold);border-color:var(--gold);color:var(--bg)}.tag--wrong{color:var(--muted);text-decoration:line-through}.tag--none{color:var(--faint);border-style:dashed}.tag--warn{border-color:var(--accent);color:var(--accent)}.picker{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex;position:relative}.picker__row{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.picker__field{border:1px solid var(--line-strong);background:var(--surface);align-items:center;min-height:52px;transition:border-color .15s,background .15s;display:flex;position:relative}.picker__field:focus-within{border-color:var(--text)}.picker__row.has-selection .picker__field{border-color:var(--accent);background:#1a0f0d}.picker__icon{color:var(--muted);flex:none;margin-left:14px}.picker__input{text-overflow:ellipsis;background:0 0;border:0;outline:none;flex:1;min-width:0;height:50px;padding:0 12px 0 10px;font-size:16px;font-weight:500}.picker__input::placeholder{color:var(--faint);font-weight:400}.picker__input:disabled{cursor:not-allowed}.picker__clear{border:0;border-left:1px solid var(--line-strong);color:var(--muted);letter-spacing:.14em;text-transform:uppercase;background:0 0;flex:none;align-self:stretch;padding:0 14px;font-size:11px;font-weight:700}.picker__clear:hover{color:var(--text)}.picker__submit{min-height:52px}.picker__panel{z-index:15;border:1px solid var(--line-strong);background:var(--surface);max-height:min(58vh,520px);animation:panel-in .16s var(--ease-out);flex-direction:column;display:flex;position:absolute;bottom:calc(100% + 6px);left:0;right:0;box-shadow:0 -24px 48px #000000a6}.picker__panel-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.picker__keys{color:var(--faint)}.picker__artists{border-bottom:1px solid var(--line);scrollbar-width:none;gap:6px;padding:10px 14px;display:flex;overflow-x:auto}.picker__artist{border:1px solid var(--line-strong);background:var(--bg);height:30px;color:var(--text-dim);white-space:nowrap;flex:none;align-items:center;gap:8px;padding:0 10px;font-size:12px;font-weight:600;display:inline-flex}.picker__artist .mono{color:var(--accent);font-size:11px}.picker__artist:hover{border-color:var(--text);color:var(--text)}.picker__list{overscroll-behavior:contain;flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto}.picker__option{border-bottom:1px solid var(--line);cursor:pointer;align-items:center;gap:12px;padding:10px 14px;display:flex}.picker__option:last-child{border-bottom:0}.picker__option-main{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.picker__option-title{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.picker__option-artist{color:var(--muted);letter-spacing:.06em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:12px;font-weight:600;overflow:hidden}.picker__option mark{color:var(--accent);background:0 0}.picker__option-year{color:var(--faint);flex:none;font-size:12px}.picker__option[aria-selected=true]{background:var(--text);color:var(--bg)}.picker__option[aria-selected=true] .picker__option-artist,.picker__option[aria-selected=true] .picker__option-year{color:#5a564f}.picker__option[aria-selected=true] mark{color:#c22a1d}.picker__empty{color:var(--text-dim);flex-direction:column;gap:4px;padding:18px 14px;display:flex}.picker__empty span{color:var(--muted);font-size:13px}.picker__intro{color:var(--muted);align-items:center;gap:16px;padding:20px 14px;font-size:14px;display:flex}.picker__intro-count{color:var(--accent);font-size:44px}.picker__hint{color:var(--faint);display:none}@media (hover:hover) and (width>=768px){.picker__hint{display:block}}@media (hover:none){.picker__keys{display:none}}.picker.is-sheet{z-index:45;padding:12px var(--gutter) 0;background:var(--bg);animation:sheet-in .2s var(--ease-out);gap:10px;position:fixed;inset:0}.picker__sheet-head{justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.picker__sheet-meta{align-items:center;gap:14px;min-width:0;display:flex}.picker__sheet-meta .round-timer{width:92px}.picker__sheet-meta .round-timer__digits{font-size:26px}.picker__cancel{border:1px solid var(--line-strong);height:36px;color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;background:0 0;align-items:center;gap:6px;padding:0 12px;font-size:11px;font-weight:700;display:inline-flex}.picker.is-sheet .picker__row{grid-template-columns:minmax(0,1fr)}.picker.is-sheet .picker__submit{display:none}.picker.is-sheet .picker__panel{min-height:0;max-height:none;margin:0 calc(-1 * var(--gutter));border:0;border-top:1px solid var(--line);box-shadow:none;flex:1;animation:none;position:static}.picker.is-sheet .picker__option{padding:12px var(--gutter)}.picker--locked{border:1px solid var(--accent);min-height:52px;animation:lock-in .35s var(--ease-out);background:#1a0f0d;flex-flow:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:10px 16px}.picker__locked{flex-direction:column;gap:2px;min-width:0;display:flex}.picker__locked-song{text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.picker__waiting{color:var(--text-dim)}@keyframes panel-in{0%{opacity:0;transform:translateY(6px)}}@keyframes sheet-in{0%{opacity:0;transform:translateY(16px)}}.invite{gap:16px;display:grid}.invite__code{flex-direction:column;gap:8px;display:flex}.invite__code-value{gap:6px;display:flex}.invite__code-value span{border:1px solid var(--line-strong);background:var(--bg);justify-content:center;align-items:center;width:56px;height:68px;font-size:36px;font-weight:700;display:flex}.invite__qr{aspect-ratio:1;background:var(--text);width:168px;padding:12px}.invite__qr svg{width:100%;height:100%;display:block}.invite__link{border:1px solid var(--line);background:var(--bg);align-items:center;gap:8px;min-width:0;padding:6px 6px 6px 12px;display:flex}.invite__link-text{min-width:0;color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;overflow:hidden}@media (width>=560px){.invite{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"qr code""link link";align-items:start;column-gap:20px}.invite__qr{grid-area:qr}.invite__code{grid-area:code}.invite__link{grid-area:link}}.players{border:1px solid var(--line);background:var(--line);flex-direction:column;gap:1px;margin:0;padding:0;list-style:none;display:flex}.players__item{background:var(--surface);min-height:46px;animation:fade-up .35s var(--ease-out) both;align-items:center;gap:12px;padding:8px 12px;display:flex}.players__state{border:1px solid var(--muted);background:var(--text-dim);flex:none;width:10px;height:10px;transition:background .2s,border-color .2s}.players__name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600;overflow:hidden}.players__meta{align-items:center;gap:6px;display:flex}.players__score{text-align:right;min-width:4ch;font-weight:700}.players__item.is-offline{opacity:.45}.players__item.is-offline .players__state,.players--compact .players__state{background:0 0}.players--compact .players__item.has-answered .players__state{background:var(--ok);border-color:var(--ok)}@media (width<=959px){.players--compact{background:0 0;border:0;flex-flow:wrap;gap:6px}.players--compact .players__item{border:1px solid var(--line);gap:8px;min-height:34px;padding:4px 10px}.players--compact .players__meta .tag:not(.tag--me){display:none}}.audio-controls{align-items:center;gap:8px;display:flex}.audio-controls__volume{border:1px solid var(--line-strong);background:var(--surface);height:48px;color:var(--muted);align-items:center;gap:10px;padding:0 14px;display:flex}.audio-controls__volume input{appearance:none;background:linear-gradient(to right, var(--text) var(--fill), var(--line-strong) var(--fill));cursor:pointer;width:96px;height:4px;margin:0}.audio-controls__volume input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);border:0;width:12px;height:18px}.audio-controls__volume input::-moz-range-thumb{background:var(--text);border:0;border-radius:0;width:12px;height:18px}.autoplay-gate{z-index:60;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text);background:#0a0a0ae0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:fixed;inset:0}.autoplay-gate__icon{background:var(--accent);width:88px;height:88px;color:var(--bg);justify-content:center;align-items:center;animation:1.6s ease-in-out infinite lamp;display:flex}.autoplay-gate__title{font-size:44px}.ticker{border-top:1px solid var(--line);background:var(--bg-raised);white-space:nowrap;align-items:center;height:40px;display:flex;overflow:hidden}.ticker__track{animation:linear infinite ticker;display:inline-flex}.ticker__track span{color:var(--muted);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;white-space:pre;font-size:12px}.countdown{z-index:30;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:none;background:#0a0a0ad6;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;position:fixed;inset:0}.countdown .label{z-index:1;color:var(--text-dim);margin-bottom:28px;position:relative}.countdown__digit{color:var(--accent);animation:count-pop 1s var(--ease-out) both;font-size:clamp(180px,42vw,340px);line-height:1}.split__word{white-space:nowrap;margin:-.22em .24em -.08em 0;padding:.22em 0 .08em;display:inline-flex;overflow:hidden}.split__word:last-child{margin-right:0}.split__char{animation:char-up .55s var(--ease-out) both;display:inline-block}.toggle__title{font-weight:600;display:block}.toggle__desc{color:var(--muted);font-size:13px;display:block}.blink{animation:1.2s ease-in-out infinite blink-soft}@keyframes lamp{50%{opacity:.35;box-shadow:none}}@keyframes blink-soft{50%{opacity:.4}}@keyframes ticker{to{transform:translate(-50%)}}@keyframes count-pop{0%{opacity:0;transform:scale(1.35)}20%{opacity:1}80%{opacity:1}to{opacity:0;transform:scale(.85)}}@keyframes char-up{0%{opacity:0;transform:translateY(105%)}}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}}@keyframes lock-in{0%{opacity:0;transform:translateY(8px)}}.lobby{gap:16px;padding-bottom:96px;display:grid}.lobby__settings-body{flex-direction:column;gap:24px;display:flex}.lobby__group{border:0;flex-direction:column;gap:10px;min-width:0;margin:0;padding:0;display:flex}.lobby__group legend{margin-bottom:10px;padding:0}.lobby__readonly{color:var(--faint)}.lobby__count{font-size:16px;font-weight:700}.lobby__count-max{color:var(--faint)}.lobby__toggles{gap:18px}.lobby__pair{gap:24px;display:grid}@media (width>=560px){.lobby__pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}.stepper{flex-wrap:wrap;align-items:center;gap:0;display:flex}.stepper button{border:1px solid var(--line-strong);width:48px;height:44px;color:var(--text);font-family:var(--font-mono);background:0 0;font-size:20px}.stepper button:hover:not(:disabled){background:var(--surface-2)}.stepper button:disabled{color:var(--faint)}.stepper__value{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);justify-content:center;align-items:center;width:64px;height:44px;font-size:20px;font-weight:700;display:flex}.stepper__note{color:var(--muted);margin-left:16px;font-size:13px}.toggle--hard[aria-checked=true] .toggle__title{color:var(--accent)}.lobby__group-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;display:flex}.lobby__hint{color:var(--faint);letter-spacing:.08em;text-transform:none;font-weight:500}.lobby__pool{color:var(--text-dim);font-size:12px}.lobby__pool strong{color:var(--accent);font-size:15px}.catgrid{border:1px solid var(--line);background:var(--bg);flex-direction:column;display:flex;container-type:inline-size}.catgrid__row{grid-template-columns:minmax(0,1fr);display:grid}.catgrid__row+.catgrid__row{border-top:1px solid var(--line)}.catgrid__group{min-width:0;color:var(--text-dim);text-align:left;background:0 0;border:0;align-items:center;gap:10px;padding:8px 10px 0;transition:color .15s;display:flex}.catgrid__group:disabled{cursor:default}.catgrid__group:hover:not(:disabled){color:var(--text)}.catgrid__mark{border:1px solid var(--muted);flex:none;width:10px;height:10px;transition:border-color .15s;position:relative}.catgrid__mark:after{content:"";background:var(--accent);transform-origin:bottom;transition:transform .25s var(--ease-out);position:absolute;inset:1px;transform:scaleY(0)}.catgrid__group[data-state=some] .catgrid__mark:after{transform:scaleY(.5)}.catgrid__group[data-state=all] .catgrid__mark{border-color:var(--accent)}.catgrid__group[data-state=all] .catgrid__mark:after{transform:scaleY(1)}.catgrid__name{min-width:0;font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;flex:1;font-size:11px;font-weight:700;line-height:1.3}.catgrid__sub{color:var(--muted);margin-left:.6em}.catgrid__tally{color:var(--faint);font-size:11px}.catgrid__group:not([data-state=none]) .catgrid__tally{color:var(--accent)}.catgrid__tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px;display:grid}.cat{isolation:isolate;border:1px solid var(--line-strong);background:var(--surface);min-width:0;height:50px;color:var(--text);text-align:left;flex-direction:column;justify-content:space-between;gap:4px;padding:7px 8px 6px;transition:border-color .15s,color .2s;display:flex;position:relative;overflow:hidden}.cat[data-wide]{grid-column:span 2}.cat:before{content:"";z-index:-1;background:var(--accent);transform-origin:bottom;transition:transform .28s var(--ease-out);position:absolute;inset:0;transform:scaleY(0)}.cat:hover:not([aria-disabled=true]),.cat:focus-visible{border-color:var(--text-dim)}.cat[aria-pressed=true]{border-color:var(--accent);color:var(--on-accent)}.cat[aria-pressed=true]:before{transform:scaleY(1)}.cat[aria-disabled=true]{cursor:default}.cat[aria-disabled=true]:not([aria-pressed=true]){color:var(--muted)}.cat__short{text-overflow:ellipsis;white-space:nowrap;font-size:20px;overflow:hidden}.cat__count{color:var(--muted);font-size:10px;line-height:1;transition:color .2s}.cat[aria-pressed=true] .cat__count{color:#0a0a0a99}@container (width>=486px){.catgrid__tiles{grid-template-columns:repeat(7,minmax(0,1fr))}}@container (width>=600px){.catgrid__row{grid-template-columns:112px minmax(0,1fr)}.cat{height:54px;padding-top:8px}.catgrid__group{border-right:1px solid var(--line);flex-wrap:wrap;align-content:center;gap:4px 8px;padding:0 0 0 12px}.catgrid__name{flex:60px}.catgrid__sub{margin-left:0;display:block}.catgrid__tally{flex-basis:100%;padding-left:18px}}.catinfo{border-top:1px solid var(--line);background:var(--bg-raised);min-height:64px;box-shadow:inset 2px 0 var(--accent);padding:8px 12px 8px 14px}.catinfo__body{animation:catinfo-in .2s var(--ease-out);flex-direction:column;gap:4px;display:flex}.catinfo__head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.catinfo__name{text-overflow:ellipsis;white-space:nowrap;font-size:17px;overflow:hidden}.catinfo__meta{color:var(--muted);flex:none;font-size:11px}.catinfo__desc{color:var(--text-dim);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:13px;line-height:1.4;display:-webkit-box;overflow:hidden}.catinfo__hint{text-overflow:ellipsis;white-space:nowrap;flex:0 100 auto;min-width:0;overflow:hidden}@container (width<=485px){.catinfo__hint{display:none}}@media (hover:none){.catinfo__hint{display:none}}@keyframes catinfo-in{0%{opacity:0;transform:translateY(3px)}}.rules{border:1px solid var(--line);background:var(--line);grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;display:grid}.rules div{background:var(--bg);flex-direction:column;gap:6px;padding:10px 12px;display:flex}.rules dd{margin:0;font-size:16px;font-weight:700}.rules small{color:var(--muted);font-size:10px;font-weight:400}@media (width<=520px){.rules{grid-template-columns:1fr}}.lobby__cta{z-index:15;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0a0a0af2;justify-content:flex-end;align-items:center;gap:16px;display:flex;position:fixed;bottom:0;left:0;right:0}.lobby__summary{color:var(--text-dim);font-size:13px;display:none}.lobby__start{flex:1;min-height:56px;font-size:15px}.lobby__waiting{color:var(--text-dim);align-items:center;gap:12px;min-height:56px;margin:0 auto;display:flex}@media (width>=640px){.lobby__summary{display:block}.lobby__start{flex:none;min-width:240px}}@media (width>=960px){.lobby{grid-template:"settings invite""settings players"1fr/minmax(0,1.5fr) minmax(0,1fr);align-items:start}.lobby__settings{grid-area:settings}.lobby__invite{grid-area:invite}.lobby__players{grid-area:players}}.round,.reveal{flex:1;grid-template-columns:minmax(0,1fr);align-content:start;gap:16px;display:grid}.round__bar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding-bottom:14px;display:flex}.round__count{flex-direction:column;gap:2px;display:flex}.round__badges{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.round__number{font-size:40px}.round__total{color:var(--faint)}.round__stage{flex-direction:column;align-items:center;gap:18px;padding:8px 0;display:flex;position:relative}.round__stage .turntable{width:min(62vw,360px)}.round__status{text-align:center;min-height:18px}.round__players{flex-direction:column;gap:8px;display:flex}.round__players-head{justify-content:space-between;align-items:baseline;display:flex}.round__players-head .mono{font-weight:700}.round__dock{z-index:12;margin:0 calc(-1 * var(--gutter));padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#0a0a0af5;gap:10px;display:grid;position:sticky;bottom:0}.round__dock:has(.picker.is-sheet){z-index:60}.round__spectator{border:1px dashed var(--line-strong);color:var(--text-dim);flex-direction:column;gap:4px;padding:12px 16px;display:flex}@media (width>=720px){.round__dock{grid-template-columns:auto minmax(0,1fr);align-items:start}}@media (width>=960px){.round{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"bar bar""stage players""dock dock"}.round>.round__bar{grid-area:bar}.round__stage{grid-area:stage;padding:24px 0}.round__players{grid-area:players}.round__dock{background:0 0;border-top:0;grid-area:dock;margin:0;padding-left:0;padding-right:0}}.reveal__phase{color:var(--accent)}.reveal__main{gap:24px;display:grid}.reveal__track{flex-direction:column;gap:20px;display:flex}.reveal__deck{align-items:flex-end;gap:16px;display:flex}.reveal__names{flex-direction:column;gap:8px;display:flex}.reveal__title{font-size:clamp(44px,8.5vw,96px);line-height:.92}.reveal__artist{color:var(--text-dim);margin:0;font-size:clamp(18px,3vw,28px);font-weight:600}.results{margin:0;padding:0;list-style:none}.results__row{border-bottom:1px solid var(--line);animation:row-in .5s var(--ease-out) both;grid-template-columns:34px minmax(0,1fr) auto 52px;align-items:center;gap:12px;padding:12px 16px;display:grid}.results__row:last-child{border-bottom:0}.results__row.is-me{box-shadow:inset 3px 0 0 var(--accent);background:#ff3d2e0f}.results__rank{align-items:center;gap:2px;font-weight:700;display:flex}.results__up{color:var(--ok)}.results__down{color:var(--accent)}.results__who{flex-direction:column;gap:4px;min-width:0;display:flex}.results__name{align-items:center;gap:8px;min-width:0;font-weight:700;display:flex}.results__answer{min-width:0;color:var(--text-dim);align-items:center;gap:8px;font-size:13px;display:flex}.results__song{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.results__time{color:var(--muted);flex:none;font-size:12px}.results__row.is-wrong .results__song{color:var(--muted);text-decoration:line-through}.results__row.is-none .results__song{color:var(--faint);font-style:italic}.results__points{color:var(--faint);animation:points-pop .6s var(--ease-out) both;font-size:20px;font-weight:700}.results__row.is-title .results__points{color:var(--ok)}.results__row.is-artist .results__points{color:var(--gold)}.results__total{text-align:right;font-size:18px;font-weight:700}.reveal__footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;margin-top:auto;padding-top:4px;display:flex}.reveal__progress{background:var(--line);flex:100%;order:-1;height:3px}.reveal__progress div{background:var(--accent);transform-origin:0;height:100%;transition:transform .12s linear}@media (width<=520px){.results__row{grid-template-columns:26px minmax(0,1fr) auto;padding:12px}.results__total{display:none}}@media (width>=960px){.reveal__main{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}}.podium{flex-direction:column;flex:1;gap:24px;display:flex;position:relative}.podium__confetti{z-index:5;pointer-events:none;position:fixed;inset:0;overflow:hidden}.podium__confetti span{animation-name:confetti;animation-timing-function:linear;animation-fill-mode:both;position:absolute;top:-24px}.podium__head{flex-direction:column;gap:4px;display:flex}.podium__title{font-size:clamp(56px,12vw,120px)}.podium__grid{gap:32px;display:grid}.podium__stage{--bar-max:clamp(150px, 30vh, 260px);flex-direction:column;display:flex}.podium__towers,.podium__knowns{grid-auto-columns:minmax(0,260px);grid-auto-flow:column;justify-content:center;gap:8px;display:grid}.podium__towers{border-bottom:2px solid var(--text);align-items:end}.podium__knowns{align-items:start}.podium__col{flex-direction:column;gap:12px;display:flex}.podium__who{text-align:center;min-width:0;animation:fade-up .5s var(--ease-out) both;animation-delay:var(--at);flex-direction:column;align-items:center;gap:2px;display:flex}.podium__name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:16px;font-weight:700;overflow:hidden}.podium__col.is-me .podium__name{color:var(--accent)}.podium__points{align-items:baseline;gap:4px;display:flex}.podium__score{font-size:clamp(26px,4.4vw,44px);font-weight:700;line-height:1}.podium__bar{height:calc(var(--bar-max) * var(--h));border:1px solid var(--line-strong);background:var(--surface-2);color:var(--gold);transform-origin:bottom;animation:bar-grow .9s var(--ease-out) both;animation-delay:var(--at);border-bottom:0;justify-content:center;padding-top:10px;display:flex}.podium__col--1 .podium__bar{border-color:var(--accent);background:var(--accent);color:var(--bg)}.podium__col--2 .podium__bar{border-color:var(--text);background:var(--text);color:var(--bg)}.podium__place{font-size:clamp(56px,10vw,110px);line-height:1}.podium__known{min-width:0;animation:fade-up .5s var(--ease-out) both;animation-delay:calc(var(--at) + 1.1s);flex-direction:column;gap:10px;padding-top:14px;display:flex}.podium__known ul{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.podium__known li{border-left:2px solid var(--ok);flex-direction:column;min-width:0;padding-left:8px;display:flex}.podium__known li.is-artist{border-color:var(--gold);opacity:.7}.podium__known-title{text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.podium__known-artist{color:var(--muted);font-size:11px}.podium__known li.podium__more{border-color:var(--line-strong);color:var(--muted);font-size:12px}.podium__none{color:var(--faint);font-size:13px}.podium__table{animation:fade-up .6s var(--ease-out) both;animation-delay:var(--at);align-self:start}.standings{border-collapse:collapse;width:100%}.standings th,.standings td{border-bottom:1px solid var(--line);text-align:left;padding:11px 16px}.standings th:last-child,.standings td:last-child{text-align:right}.standings tbody tr{animation:row-in .4s var(--ease-out) both}.standings tbody tr:last-child td{border-bottom:0}.standings td:first-child{width:1%;color:var(--muted);font-weight:700}.standings td:last-child{font-weight:700}.standings tr.is-me td{color:var(--accent)}.podium__empty{color:var(--muted);margin:0;padding:16px}.podium__footer{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;padding-top:16px;display:flex}.podium__music{align-items:center;gap:14px;min-width:0;display:flex}.podium__music>span{flex-direction:column;gap:2px;min-width:0;display:flex}.podium__music-track{font-weight:700}.podium__music-note{color:var(--muted);font-size:12px}.podium__actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.podium__wait{margin-right:8px}@media (width>=960px){.podium__grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}.podium__table{margin-top:calc(var(--bar-max,220px) * .3)}}@keyframes row-in{0%{opacity:0;transform:translate(-16px)}}@keyframes points-pop{0%{opacity:0;transform:translateY(14px)scale(.6)}60%{opacity:1;transform:translateY(-4px)scale(1.15)}}@keyframes bar-grow{0%{transform:scaleY(0)}}@keyframes confetti{0%{transform:translate(0)rotate(0)}to{transform:translate(var(--drift), 110vh) rotate(720deg)}}