:root{--bg:#0c0a18;--bg-2:#15112a;--panel:#ffffff0d;--panel-border:#ffffff1a;--text:#f6f3ff;--muted:#a39cc4;--pink:#ff3d7f;--cyan:#18d4ff;--yellow:#ffd23f;--green:#52f28c;--red:#ff4d5e;--player:var(--pink);--display:"Unbounded", system-ui, sans-serif;--body:"Space Grotesk", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{font-size:clamp(14px,1.1vw,32px)}body{background:radial-gradient(60vw 50vh at 10% 0%, #ff3d7f2e, transparent 70%), radial-gradient(60vw 50vh at 90% 100%, #18d4ff24, transparent 70%), var(--bg);min-height:100vh;color:var(--text);font-family:var(--body);margin:0;overflow-x:hidden}h1,h2{font-family:var(--display);margin:0}code{word-break:break-all;background:#ffffff14;border-radius:.3em;padding:.1em .35em;font-size:.9em}kbd{font-family:var(--body);opacity:.6;border:1px solid;border-radius:.3em;margin-left:.5em;padding:.15em .45em;font-size:.7em}.btn{font:600 1rem var(--body);color:var(--text);border:1px solid var(--panel-border);cursor:pointer;white-space:nowrap;background:#ffffff14;border-radius:999px;justify-content:center;align-items:center;gap:.4em;padding:.7em 1.4em;transition:transform .12s,background .12s,box-shadow .12s;display:inline-flex}.btn:hover:not(:disabled){background:#ffffff26}.btn:active:not(:disabled){transform:scale(.96)}.btn:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.primary{background:var(--player);color:#10081c;box-shadow:0 0 2em color-mix(in srgb, var(--player) 45%, transparent);border-color:#0000}.btn.primary:hover:not(:disabled){background:color-mix(in srgb, var(--player) 85%, white)}.btn.big{padding:.8em 2em;font-size:1.25rem}.btn.small{padding:.45em 1em;font-size:.85rem}.btn.ghost{background:0 0}.btn.icon{width:2.6em;height:2.6em;padding:0;font-size:1rem}.btn.icon.small{width:2em;height:2em;font-size:.9rem}.btn.spotify{color:#06140a;background:#1ed760;border-color:#0000;font-size:1.1rem}.btn.toggle .check{border:2px solid;border-radius:.3em;place-items:center;width:1.3em;height:1.3em;font-size:.85em;display:inline-grid}.btn.toggle.on{background:color-mix(in srgb, var(--green) 25%, transparent);border-color:var(--green)}.logo{font-family:var(--display);letter-spacing:.04em;background:linear-gradient(90deg, var(--pink), var(--yellow), var(--cyan));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:4.5rem;font-weight:900}.logo.small{font-size:1.4rem}.setup{flex-direction:column;gap:2rem;max-width:80rem;margin:0 auto;padding:3rem 2rem;display:flex}.setup-header{text-align:center}.tagline{color:var(--muted);margin:.5rem 0 0;font-size:1.2rem}.setup-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.25rem;display:grid}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:1.25rem;flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.panel h2{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:1.1rem;font-weight:700}.player-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.player-list li{background:color-mix(in srgb, var(--player) 12%, transparent);border-radius:.8rem;align-items:center;gap:.75rem;padding:.5rem .5rem .5rem 1rem;font-size:1.2rem;font-weight:600;display:flex}.player-name{flex:1}.dot{background:var(--player);width:.8em;height:.8em;box-shadow:0 0 .8em var(--player);border-radius:50%}.add-player,.row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}input,select{min-width:0;font:500 1.05rem var(--body);color:var(--text);border:1px solid var(--panel-border);background:#0000004d;border-radius:.7rem;flex:1;padding:.65em .9em}input:focus,select:focus{outline:2px solid var(--cyan)}.field{justify-content:space-between;align-items:center;gap:1rem;font-size:1.05rem;display:flex}.field.column{flex-direction:column;align-items:stretch;gap:.4rem}.stepper{align-items:center;gap:.75rem;display:flex}.stepper b{font-family:var(--display);text-align:center;min-width:2ch;font-size:1.3rem}.segmented{background:#0000004d;border-radius:999px;padding:.25rem;display:flex}.segmented button{font:600 .95rem var(--body);color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.5em 1.2em}.segmented button.on{background:var(--pink);color:#10081c}.hint{color:var(--muted);margin:0;line-height:1.45}.error{color:var(--red);white-space:pre-wrap;font:inherit;margin:0}.deck-info{flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;font-size:1.15rem;display:flex}.deck-info b{font-family:var(--display)}.tag{background:color-mix(in srgb, var(--cyan) 20%, transparent);color:var(--cyan);border-radius:999px;padding:.2em .6em;font-size:.75rem}.tag.warn{background:color-mix(in srgb, var(--yellow) 20%, transparent);color:var(--yellow)}.checkbox{color:var(--muted);cursor:pointer;align-items:center;gap:.5rem;display:flex}.checkbox input{flex:none;width:1.1em;height:1.1em}.setup-footer{flex-direction:column;align-items:center;gap:.75rem;display:flex}.game{grid-template-rows:auto 1fr auto;min-height:100vh;display:grid}.topbar{border-bottom:1px solid var(--panel-border);background:#00000040;flex-wrap:wrap;align-items:center;gap:.75rem 2rem;padding:1rem 2rem;display:flex}.turn{white-space:nowrap;flex-direction:column;flex:1;display:flex}.turn-label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem}.turn-name{font-family:var(--display);color:var(--player);font-size:1.5rem;font-weight:700}.topbar-right{align-items:center;gap:1rem;display:flex}.deck-count{color:var(--muted)}.deck-count span{font-family:var(--display);color:var(--text);font-size:1.2rem}.now-playing{align-items:center;gap:.6rem;display:flex}.now-playing.muted{color:var(--muted)}.eq{align-items:flex-end;gap:.2rem;height:1.6rem;margin-right:.4rem;display:flex}.eq span{background:var(--player);border-radius:.2rem;width:.3rem;height:20%}.eq.on span{animation:.9s ease-in-out infinite alternate eq}.eq.on span:nth-child(2){animation-delay:-.3s}.eq.on span:nth-child(3){animation-delay:-.6s}.eq.on span:nth-child(4){animation-delay:-.15s}@keyframes eq{0%{height:15%}to{height:100%}}.stage{flex-direction:column;justify-content:center;gap:2.5rem;min-width:0;padding:2rem;display:flex}.banner{text-align:center;flex-direction:column;align-items:center;gap:.75rem;max-width:60rem;margin:0 auto;display:flex}.banner h1{font-size:2rem;font-weight:700;line-height:1.25}.banner p{color:var(--muted);margin:0;font-size:1.1rem}.who{color:var(--player)}.song-error{color:var(--yellow);flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;font-size:1.05rem;display:flex}.banner.reveal h1{font-size:1.7rem}.banner.ok h1{color:var(--green)}.banner.bad h1{color:var(--red)}.banner.steal h1{color:var(--yellow)}.reveal-song{flex-direction:column;align-items:center;animation:.45s cubic-bezier(.2,1.6,.4,1) pop;display:flex}.reveal-title{font-family:var(--display);font-size:2.4rem;font-weight:900}.reveal-artist{color:var(--muted);font-size:1.4rem}.reveal-year{font-family:var(--display);color:var(--yellow);font-size:3.2rem;font-weight:900;line-height:1.1}@keyframes pop{0%{opacity:0;transform:scale(.6)}}.actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.timeline{--card-w:min(10.5rem, calc((100vw - 8rem) / (var(--n) * 1.45 + .5)));justify-content:center;align-items:center;gap:calc(var(--card-w) * .08);min-height:calc(var(--card-w) * 1.35);display:flex;position:relative}.timeline-axis{background:linear-gradient(90deg, transparent, var(--panel-border) 10%, var(--panel-border) 90%, transparent);z-index:-1;height:2px;position:absolute;top:50%;left:0;right:0}.card{width:var(--card-w);aspect-ratio:3/4;border-radius:calc(var(--card-w) * .1);flex:none;position:relative;container-type:inline-size}.song-card{text-align:center;padding:calc(var(--card-w) * .08) calc(var(--card-w) * .07);background:radial-gradient(circle at 30% 20%, hsl(var(--hue) 90% 70% / .9), transparent 60%), linear-gradient(160deg, hsl(var(--hue) 85% 55%), hsl(calc(var(--hue) + 40) 80% 35%));color:#0d0716;flex-direction:column;justify-content:space-between;align-items:center;display:flex;box-shadow:0 .6rem 1.5rem #0006}.card-artist,.card-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:10cqw;font-weight:700;line-height:1.15;display:-webkit-box;overflow:hidden}.card-title{font-style:italic;font-weight:500}.card-year{font-family:var(--display);letter-spacing:-.03em;font-size:27cqw;font-weight:900}.card-compact{aspect-ratio:auto;border-radius:.5rem;justify-content:center;width:3.4rem;padding:.3em 0}.card-compact .card-year{font-size:.9rem}.card-ok,.card-bad{animation:.45s cubic-bezier(.2,1.6,.4,1) pop}.card-ok{outline:4px solid var(--green);outline-offset:4px;box-shadow:0 0 3rem color-mix(in srgb, var(--green) 50%, transparent)}.card-bad{outline:4px solid var(--red);outline-offset:4px;box-shadow:0 0 3rem color-mix(in srgb, var(--red) 45%, transparent)}.card-badge{color:#0d0716;background:var(--green);border-radius:50%;place-items:center;width:1.8em;height:1.8em;font-size:1.2rem;font-weight:900;display:grid;position:absolute;top:-.8em;right:-.8em}.card-bad .card-badge{background:var(--red)}.mystery-card{background:var(--bg-2);border:3px solid var(--player);box-shadow:0 0 2.5rem color-mix(in srgb, var(--player) 55%, transparent), inset 0 0 2rem color-mix(in srgb, var(--player) 25%, transparent);place-items:center;animation:1.6s ease-in-out infinite alternate glow;display:grid}@keyframes glow{to{box-shadow:0 0 4rem color-mix(in srgb, var(--player) 75%, transparent), inset 0 0 2rem color-mix(in srgb, var(--player) 35%, transparent)}}.vinyl,.vinyl-label{grid-area:1/1}.vinyl{aspect-ratio:1;background:conic-gradient(transparent 0 15%, #ffffff1f 22%, transparent 30% 65%, #ffffff1f 72%, transparent 80%), repeating-radial-gradient(circle, #0a0a0a 0 2%, #1c1c1c 2% 3%);border-radius:50%;place-items:center;width:75cqw;display:grid;box-shadow:0 0 0 2px #ffffff0d}.vinyl-label{z-index:1;aspect-ratio:1;background:var(--player);color:#10081c;width:28cqw;font-family:var(--display);border-radius:50%;place-items:center;font-size:18cqw;font-weight:900;display:grid;position:relative}.vinyl.spinning{animation:2.4s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.gap{width:calc(var(--card-w) * .28);height:calc(var(--card-w) * 1.1);color:var(--muted);cursor:pointer;background:0 0;border:2px dashed #0000;border-radius:.6rem;flex:none;padding:0;font-size:1.5rem}.gap:disabled{cursor:default}.gap:not(:disabled):hover{border-color:var(--player);color:var(--player)}.markers{width:calc(var(--card-w) * .75);flex-direction:column;gap:.4rem;display:flex}.marker{text-align:center;border:2px solid var(--player);background:color-mix(in srgb, var(--player) 18%, transparent);text-overflow:ellipsis;white-space:nowrap;border-radius:.6rem;padding:.45em .3em;font-size:.85rem;font-weight:700;overflow:hidden}.marker-token{color:var(--player);margin-right:.3em}.marker-pending{border-style:dashed;animation:.9s ease-in-out infinite alternate blink}@keyframes blink{to{opacity:.45}}.marker-won{background:var(--player);color:#10081c}.marker-won .marker-token{color:inherit}.marker-correct{--player:var(--green);color:var(--green);border-style:dashed}.scoreboard{border-top:1px solid var(--panel-border);background:#00000040;flex-wrap:wrap;justify-content:center;gap:1rem;padding:1.25rem 2rem 1.75rem;display:flex}.score{background:var(--panel);border:2px solid #0000;border-radius:1rem;grid-template-columns:1fr auto;align-items:center;gap:.35rem 1rem;min-width:12rem;padding:.8rem 1.1rem;transition:transform .2s,border-color .2s;display:grid}.score.active{border-color:var(--player);box-shadow:0 0 2rem color-mix(in srgb, var(--player) 30%, transparent);transform:translateY(-.3rem)}.score.pending{border-color:var(--player);border-style:dashed}.score-name{color:var(--player);font-size:1.15rem;font-weight:700}.score-cards{color:var(--muted);font-size:.95rem}.score-cards b{font-family:var(--display);color:var(--text);font-size:1.2rem}.progress{background:#ffffff14;border-radius:999px;grid-column:1/-1;height:.35rem;overflow:hidden}.progress div{background:var(--player);height:100%;transition:width .4s}.tokens{grid-column:1/-1;gap:.3rem;display:flex}.coin{background:radial-gradient(circle at 35% 35%, #fff4b0, var(--yellow) 55%, #b88a00);border-radius:50%;width:.85rem;height:.85rem;box-shadow:0 0 .4rem #ffd23f80}.coin.empty{box-shadow:none;background:#ffffff14}.btn.hityear{font-family:var(--display);letter-spacing:.05em;background:var(--player);color:#10081c;border:0;grid-column:1/-1;padding:.5em 1em;font-size:.85rem;font-weight:900}.btn.hityear.done{color:var(--muted);border:1px solid var(--panel-border);font-family:var(--body);background:0 0;font-weight:600}.finished{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:100vh;padding:3rem 2rem;display:flex}.trophy{font-size:5rem;animation:.6s cubic-bezier(.2,1.6,.4,1) pop}.winner{color:var(--player);text-align:center;font-size:3.5rem;font-weight:900}.ranking{flex-direction:column;gap:.6rem;width:min(100%,70rem);display:flex}.rank-row{background:var(--panel);border-left:5px solid var(--player);border-radius:1rem;grid-template-columns:3rem 10rem 1fr auto;align-items:center;gap:1rem;padding:.7rem 1.2rem;display:grid}.rank-pos,.rank-total{font-family:var(--display);font-size:1.4rem;font-weight:900}.rank-name{color:var(--player);text-overflow:ellipsis;font-size:1.2rem;font-weight:700;overflow:hidden}.rank-cards{flex-wrap:wrap;gap:.3rem;display:flex}@media (width<=700px){.topbar{padding:.75rem 1rem}.topbar .logo{display:none}.rank-row{grid-template-columns:2rem 1fr auto}.rank-cards{grid-column:1/-1}}