:root{--ink:#1a1320;--ink-2:#241a2b;--ink-3:#2e2335;--cream:#f6ecdc;--bone:#c2b4a3;--ash:#7a6f7e;--coral:#ffaa7a;--rose:#e88aa8;--line:#f6ecdc14;--line-2:#f6ecdc29;--display:"Bricolage Grotesque", "Helvetica Neue", sans-serif;--sans:"Manrope", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, Consolas, monospace;font:16px/1.5 var(--sans);letter-spacing:-.005em;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--cream);background:var(--ink);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body{background:var(--ink);margin:0;padding:0}body{min-height:100svh;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(60% 50% at 50% -5%,#ffaa7a0f,#0000 70%),radial-gradient(50% 45% at 50% 100%,#2e233580,#0000 80%);position:fixed;inset:0}#root{z-index:2;flex-direction:column;width:100%;min-height:100svh;display:flex;position:relative}.display{font-family:var(--display);letter-spacing:-.035em;font-weight:700;line-height:.95}.mono{font-family:var(--mono);letter-spacing:0}.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--ash);font-size:11px;font-weight:500}h1,h2,h3{font-family:var(--display);color:var(--cream);letter-spacing:-.03em;margin:0;font-weight:700;line-height:.98}p{margin:0}button{font-family:var(--sans)}input,button{color:inherit}::selection{background:var(--coral);color:var(--ink)}:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:4px}.btn-primary{background:var(--coral);color:var(--ink);font-family:var(--display);letter-spacing:-.01em;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:10px;padding:14px 24px;font-size:16px;font-weight:700;transition:background .15s,transform .1s;display:inline-flex}.btn-primary:hover:not(:disabled){background:#ffb88e}.btn-primary:active:not(:disabled){transform:scale(.985)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-ghost{color:var(--cream);border:1px solid var(--line-2);font-family:var(--display);cursor:pointer;background:0 0;border-radius:12px;padding:12px 22px;font-size:15px;font-weight:600;transition:border-color .15s,color .15s,background .15s}.btn-ghost:hover:not(:disabled){border-color:var(--coral);color:var(--coral)}.btn-ghost:disabled{opacity:.4;cursor:not-allowed}.input{background:var(--ink-2);color:var(--cream);border:1px solid var(--line);font-family:var(--sans);border-radius:12px;outline:none;width:100%;padding:14px 16px;font-size:16px;transition:border-color .15s,background .15s}.input:focus{border-color:var(--coral);background:var(--ink-3)}.input::placeholder{color:var(--ash)}.card{background:var(--ink-2);border:1px solid var(--line);border-radius:16px}.chip{border:1px solid var(--line-2);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone);background:0 0;border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:11px;display:inline-flex}.divider-line{background:var(--line);flex:1;height:1px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop-in{0%{opacity:0;transform:translateY(6px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes float-up{0%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-32px)scale(.95)}}@keyframes urgent-pulse{0%,to{opacity:1}50%{opacity:.55}}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes wave-bar{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@keyframes cover-morph{0%{border-radius:50%}to{border-radius:4px}}@keyframes puck-form{0%{opacity:0;border-radius:6px;transform:scale(.94)}to{opacity:1;border-radius:50%;transform:scale(1)}}@keyframes ring-sweep{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes rank-up{0%{box-shadow:0 0 #ffaa7a00}40%{box-shadow:0 0 0 6px #ffaa7a2e}to{box-shadow:0 0 #ffaa7a00}}@keyframes pill-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}.animate-spin{animation:.8s linear infinite spin}.animate-pop-in{animation:.28s cubic-bezier(.22,1,.36,1) both pop-in}.animate-slide-in{animation:.2s ease-out both slide-in-left}.animate-float-up{animation:1.1s cubic-bezier(.22,1,.36,1) both float-up}.animate-urgent{animation:.6s ease-in-out infinite urgent-pulse}.animate-fade-in{animation:.4s cubic-bezier(.22,1,.36,1) both fade-in}.animate-rank-up{animation:.8s ease-out rank-up}.animate-pill-pop{animation:.35s cubic-bezier(.34,1.56,.64,1) both pill-pop}.lobby-cols{flex-direction:column;gap:clamp(14px,2.2vh,22px);height:100%;min-height:0;display:flex}.lobby-cols>.lobby-cols__players{flex-direction:column;flex:none;min-height:0;max-height:30vh;display:flex}.lobby-cols>.lobby-cols__config{flex-direction:column;flex:auto;gap:14px;min-height:0;display:flex}@media (width>=720px){.lobby-cols{flex-direction:row;align-items:stretch;gap:clamp(16px,2.4vw,24px)}.lobby-cols>.lobby-cols__players{flex:0 280px;max-height:none}.lobby-cols>.lobby-cols__config{flex:1 1 0}}@media (width<=640px){.lobby-root{grid-template-rows:auto auto!important;gap:14px!important;padding:14px 14px 24px!important;overflow-y:auto!important}.lobby-cols{gap:14px;height:auto!important}.lobby-cols>.lobby-cols__players{flex:none;max-height:none}.lobby-cols>.lobby-cols__config{flex:none}.playlist-grid{flex:none!important;height:260px!important}.lobby-cta{margin-bottom:48px}}.game-layout{box-sizing:border-box;z-index:1;flex:1;grid-template:"stage""scores""chat"1fr/1fr;gap:10px;width:100%;max-width:1180px;min-height:0;margin:0 auto;padding:12px 16px 16px;display:grid;position:relative}.game-stage-slot{flex-direction:column;grid-area:stage;gap:8px;min-width:0;display:flex}.game-sidebar-slot{flex-direction:column;grid-area:scores;min-width:0;min-height:0;display:flex}.game-chat-slot{flex-direction:column;grid-area:chat;min-width:0;min-height:0;padding:clamp(10px,1.6vw,14px);display:flex}@media (width>=820px){.game-layout{grid-template:"stage scores""chat scores"1fr/minmax(0,1fr) clamp(280px,30vw,360px);gap:16px}}@media (height<=620px) and (width>=641px){.game-desktop-wrap{overflow-y:auto!important}.phase-stage{min-height:0!important}.game-chat-slot{min-height:240px}.leaderboard{max-height:300px}}@media (width<=640px){.game-layout{gap:6px;padding:6px 10px 10px}.phase-stage{min-height:0!important}.song-card{padding:10px 12px!important}.game-layout.is-keyboard-open .game-sidebar-slot{display:none}.leaderboard.is-compact{-webkit-backdrop-filter:none;background:0 0;border:0;max-height:none;padding:0}.leaderboard.is-compact .leaderboard-header{display:none}.leaderboard.is-compact .leaderboard-list{scroll-snap-type:x proximity;scrollbar-width:none;flex-direction:row;gap:6px;padding:2px;overflow:auto hidden}.leaderboard.is-compact .leaderboard-list::-webkit-scrollbar{display:none}.leaderboard.is-compact .lb-row{scroll-snap-align:start;grid-template-columns:auto auto auto;gap:8px;min-width:0;padding:5px 9px}.leaderboard.is-compact .lb-rank,.leaderboard.is-compact .lb-hits{display:none}.leaderboard.is-compact .lb-name{max-width:86px;font-size:12px}.leaderboard.is-compact .lb-score{font-size:13px}.leaderboard.is-compact .lb-avatar{width:22px;height:22px;font-size:16px}.leaderboard.is-compact .lb-avatar-letter{font-size:11px}.leaderboard.is-compact .lb-delta{font-size:12px;top:-16px}}.phone-game-shell{-webkit-overflow-scrolling:touch;overflow:hidden}.phone-hero{border-bottom:1px solid var(--line);background:#241a2b99;flex-shrink:0;grid-template-columns:44px 1fr;align-items:center;gap:12px;padding:6px 12px;display:grid}.phone-hero-ring{justify-content:center;align-items:center;width:44px;height:44px;display:flex}.phone-hero-meta{justify-content:space-between;align-items:center;gap:10px;min-width:0;display:flex}.phone-hero-track{letter-spacing:.16em;color:var(--cream);font-size:11px;font-weight:700}.phone-hero-pill{letter-spacing:.22em;border:1px solid var(--line);white-space:nowrap;background:#0000002e;border-radius:999px;padding:4px 10px;font-size:10px;font-weight:700}.phone-correct-ribbon{border-bottom:1px solid var(--line);scrollbar-width:none;background:#241a2b66;flex-shrink:0;gap:6px;padding:6px 12px;display:flex;overflow:auto hidden}.phone-correct-ribbon::-webkit-scrollbar{display:none}.phone-correct-chip{font-family:var(--mono);letter-spacing:.02em;white-space:nowrap;background:#0000002e;border:1px solid;border-radius:999px;flex-shrink:0;align-items:center;gap:6px;max-width:220px;padding:4px 10px;font-size:11px;animation:.35s cubic-bezier(.34,1.56,.64,1) both pill-pop;display:inline-flex}.phone-correct-chip>span:nth-child(2){text-overflow:ellipsis;max-width:140px;overflow:hidden}.phone-chat-wrap{flex-direction:column;flex:1;min-height:0;padding:8px 10px 10px;display:flex}.phone-reveal-hero{border-bottom:1px solid var(--line);background:#241a2b99;flex-shrink:0;grid-template-columns:96px 1fr;gap:12px;padding:10px 12px;animation:.3s both fade-in;display:grid}.phone-reveal-cover{object-fit:cover;border-radius:6px;width:96px;height:96px;animation:.5s cubic-bezier(.34,1.56,.64,1) both tl-cover-in;display:block;box-shadow:0 8px 22px #0006}.phone-reveal-text>*{animation:.4s cubic-bezier(.22,1,.36,1) both fade-in}.phone-reveal-text>:nth-child(2){animation-delay:70ms}.phone-reveal-text>:nth-child(3){animation-delay:.14s}.phone-reveal-text>:nth-child(4){animation-delay:.21s}.phone-reveal-text{flex-direction:column;gap:4px;min-width:0;display:flex}.phone-reveal-title{color:var(--cream);letter-spacing:-.04em;word-break:break-word;font-size:20px;line-height:1.05}.phone-reveal-artist{color:var(--bone);font-size:13px}.phone-reveal-meta{color:var(--ash);letter-spacing:.14em;text-transform:uppercase;word-break:break-word;font-size:10px}.phone-reveal-board{flex:1;min-height:0;padding:8px 12px 16px;overflow-y:auto}.phone-reveal-board .lb-row{animation:.35s cubic-bezier(.22,1,.36,1) both pop-in}.phone-reveal-board .lb-row:nth-child(2){animation-delay:50ms}.phone-reveal-board .lb-row:nth-child(3){animation-delay:.1s}.phone-reveal-board .lb-row:nth-child(4){animation-delay:.15s}.phone-reveal-board .lb-row:nth-child(5){animation-delay:.2s}.phone-reveal-board .lb-row:nth-child(n+6){animation-delay:.25s}.phase-stage{flex-shrink:0;grid-template-areas:"stack";display:grid}.phase-stage>.phase-pane{grid-area:stack;min-width:0;transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}.phase-pane.is-hidden{opacity:0;pointer-events:none;transform:scale(.985)}.phase-pane.is-visible{opacity:1;transform:scale(1)}.text-crossfade{grid-template-areas:"stack";min-width:0;display:grid}.text-crossfade>.text-pane{grid-area:stack;min-width:0;transition:opacity .35s,transform .4s cubic-bezier(.22,1,.36,1)}.text-pane.is-hidden{opacity:0;pointer-events:none;transform:translateY(4px)}.text-pane.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}.text-pane .reveal-line{opacity:0;transition:opacity .45s,transform .5s cubic-bezier(.22,1,.36,1);transform:translateY(10px)}.text-pane.is-visible .reveal-line{opacity:1;transform:translateY(0)}.text-pane.is-visible .reveal-line:nth-child(2){transition-delay:80ms}.text-pane.is-visible .reveal-line:nth-child(3){transition-delay:.16s}.text-pane.is-visible .reveal-line:nth-child(4){transition-delay:.24s}.text-pane.is-hidden .reveal-line{transition-delay:0s}.leaderboard{border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);background:#241a2b8c;border-radius:16px;flex-direction:column;gap:6px;min-height:0;padding:12px;display:flex}.leaderboard-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;margin-bottom:4px;padding:2px 4px 8px;display:flex}.leaderboard-list{flex-direction:column;gap:4px;min-height:0;padding:2px;display:flex;overflow-y:auto}.lb-row{background:var(--ink-2);border:1px solid var(--line);will-change:transform;border-radius:12px;grid-template-columns:18px auto 1fr auto;align-items:center;gap:10px;padding:8px 10px;transition:background .35s,border-color .35s;display:grid;position:relative}.lb-row.is-me{background:#ffaa7a12;border-color:#ffaa7a52}.lb-row.is-leader{background:linear-gradient(#ffaa7a1f,#ffaa7a0a);border-color:#ffaa7a5c}.lb-rank{font-family:var(--mono);letter-spacing:.06em;color:var(--ash);font-variant-numeric:tabular-nums;text-align:right;font-size:10px;font-weight:700}.lb-row.is-leader .lb-rank{color:var(--coral)}.lb-avatar{flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:20px;line-height:1;display:flex}.lb-avatar-letter{font-family:var(--display);color:var(--ink);text-transform:uppercase;border-radius:50%;font-size:12px;font-weight:800}.lb-name-wrap{align-items:center;gap:10px;min-width:0;display:flex;overflow:hidden}.lb-name{font-family:var(--display);letter-spacing:-.01em;color:var(--cream);white-space:nowrap;text-overflow:ellipsis;flex:0 auto;min-width:0;font-size:13.5px;overflow:hidden}.lb-row.is-me .lb-name{color:var(--coral);font-weight:700}.lb-score{font-family:var(--mono);color:var(--cream);font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:14px;font-weight:700;position:relative}.lb-row.is-me .lb-score{color:var(--coral)}.lb-hits{flex-wrap:nowrap;flex:none;gap:4px;display:flex}.lb-delta{font-family:var(--display);color:var(--coral);pointer-events:none;letter-spacing:-.03em;white-space:nowrap;z-index:5;font-size:15px;font-weight:800;position:absolute;top:-22px;right:0}@media (width>=641px) and (width<=819px){.leaderboard{max-height:260px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.eq{align-items:end;gap:2px;height:12px;display:inline-flex}.eq span{transform-origin:bottom;background:currentColor;border-radius:2px;width:3px;height:100%;animation:.9s ease-in-out infinite wave-bar;display:block}.eq span:first-child{animation-delay:0s}.eq span:nth-child(2){animation-delay:.15s}.eq span:nth-child(3){animation-delay:.3s}.eq span:nth-child(4){animation-delay:.45s}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--bone)}@media (width<=700px){:root{font-size:15px}}@keyframes eq-bar{0%{transform:scaleY(.35)}to{transform:scaleY(1)}}.tl-root{flex-direction:column;flex:1;width:100%;max-width:1280px;min-height:0;margin:0 auto;padding:12px 16px 16px;display:flex}.tl-layout{flex:1;grid-template-columns:minmax(0,1fr);gap:10px;min-height:0;display:grid}.tl-main{flex-direction:column;gap:10px;min-width:0;display:flex}.tl-side{flex-direction:column;gap:10px;min-width:0;min-height:0;display:flex}.tl-standings{flex-direction:column;gap:8px;min-height:0;display:flex}.tl-chat{min-height:180px;display:flex}@media (width<=899px){.tl-root{overflow-y:auto}}@media (width>=900px){.tl-root{padding:18px 24px 20px}.tl-layout{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 350px;gap:16px}.tl-main{overflow-y:auto}.tl-standings{flex:0 auto;max-height:42%;padding:2px;overflow-y:auto}.tl-chat{flex:1;min-height:0}}.tl-row{flex-wrap:wrap;justify-content:center;align-items:stretch;gap:10px 4px;padding:4px 2px 8px;display:flex}.tl-hero{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(12px,2.4vw,22px);padding:clamp(12px,2vw,18px);display:grid;overflow:hidden}.tl-hero.is-good{background:linear-gradient(135deg, #ffaa7a1a, var(--ink-2) 55%);border-color:#ffaa7a73}.tl-hero.is-bad{background:linear-gradient(135deg, #e88aa81a, var(--ink-2) 55%);border-color:#e88aa873;animation:.5s .3s both tl-shake}.tl-hero-cover{aspect-ratio:1;object-fit:cover;border-radius:12px;width:clamp(96px,24vw,200px);animation:.55s cubic-bezier(.34,1.56,.64,1) both tl-cover-in;box-shadow:0 14px 36px #00000073}.tl-hero-text{flex-direction:column;gap:5px;min-width:0;display:flex}.tl-verdict{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;border:2px solid;border-radius:8px;align-self:flex-start;padding:5px 12px;font-size:clamp(13px,1.6vw,16px);font-weight:800;animation:.45s cubic-bezier(.34,1.56,.64,1) .18s both tl-verdict-stamp}.tl-hero-year{font-family:var(--display);color:var(--coral);font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:clamp(34px,6vw,56px);font-weight:800;line-height:.95}.tl-hero-title{font-family:var(--display);color:var(--cream);letter-spacing:-.02em;word-break:break-word;font-size:clamp(17px,2.6vw,26px);font-weight:700;line-height:1.08}.tl-hero-artist{color:var(--bone);font-size:clamp(13px,1.8vw,16px)}.tl-hero-sub{color:var(--ash);margin-top:2px;font-size:12px}.tl-card-in{animation:.3s cubic-bezier(.22,1,.36,1) both tl-card-land}.tl-card-landed-good{animation:.5s cubic-bezier(.34,1.56,.64,1) .35s both tl-card-land,1.1s ease-out .85s 2 tl-glow-good;border-color:#ffaa7aa6!important}.tl-card-landed-bad{animation:.5s cubic-bezier(.34,1.56,.64,1) .35s both tl-card-land,1.1s ease-out .85s 2 tl-glow-bad;border-color:#e88aa8a6!important}.tl-slot-pending{animation:1.1s ease-in-out infinite tl-slot-pulse}@keyframes tl-cover-in{0%{opacity:0;transform:scale(.55)rotate(-5deg)}60%{opacity:1;transform:scale(1.05)rotate(1.5deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes tl-verdict-stamp{0%{opacity:0;transform:scale(1.9)rotate(-9deg)}55%{opacity:1;transform:scale(.92)rotate(2deg)}to{opacity:1;transform:scale(1)rotate(-1deg)}}@keyframes tl-shake{0%,to{transform:translate(0)}15%{transform:translate(-7px)}30%{transform:translate(6px)}45%{transform:translate(-4px)}60%{transform:translate(3px)}75%{transform:translate(-2px)}}@keyframes tl-card-land{0%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes tl-glow-good{0%{box-shadow:0 0 #ffaa7a8c}to{box-shadow:0 0 0 16px #ffaa7a00}}@keyframes tl-glow-bad{0%{box-shadow:0 0 #e88aa88c}to{box-shadow:0 0 0 16px #e88aa800}}@keyframes tl-slot-pulse{0%,to{box-shadow:0 0 #ffaa7a00}50%{box-shadow:0 0 0 6px #ffaa7a38}}