:root{--bg:#0d0a1f;--bg2:#171132;--card:#ffffff0f;--card-border:#ffffff1a;--text:#f2eefe;--muted:#9b93b8;--accent:#8b5cf6;--accent2:#ec4899;--accent3:#22d3ee;--green:#34d399;--red:#f87171;--yellow:#fbbf24;--radius:16px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(1200px 600px at 80% -10%, #8b5cf640, transparent 60%), radial-gradient(900px 500px at -10% 110%, #ec48992e, transparent 60%), linear-gradient(160deg, var(--bg), var(--bg2));color:var(--text);background-attachment:fixed;min-height:100dvh;font-family:Segoe UI,system-ui,-apple-system,sans-serif}#root{min-height:100dvh}h1,h2,h3{letter-spacing:-.02em;margin:.4em 0;font-weight:800}h2{font-size:1.15rem}h3{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:1rem}.page{max-width:760px;padding:16px 16px calc(32px + env(safe-area-inset-bottom));flex-direction:column;gap:16px;min-height:100dvh;margin:0 auto;display:flex}.page.narrow{max-width:560px}.page.center{text-align:center;justify-content:center;align-items:center}.page-header{flex-direction:column;gap:4px;display:flex}.back-link{color:var(--muted);font-size:.9rem;text-decoration:none}.back-link:active,.back-link:hover{color:var(--text)}.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;gap:12px;padding:18px;display:flex}input[type=text],input[type=number],input:not([type]){border:1px solid var(--card-border);width:100%;color:var(--text);background:#00000040;border-radius:12px;outline:none;padding:14px 16px;font-size:1rem;transition:border-color .15s}input:focus{border-color:var(--accent)}input::placeholder{color:var(--muted)}.code-input{text-transform:uppercase;text-align:center;letter-spacing:.5em;font-weight:800;font-size:1.6rem!important}.error{color:var(--red);background:#f871711a;border:1px solid #f8717159;border-radius:10px;padding:10px 14px;font-size:.92rem}.hint{color:var(--muted);margin:4px 0;font-size:.92rem}.btn{cursor:pointer;color:var(--text);background:var(--card);border:none;border:1px solid var(--card-border);touch-action:manipulation;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:14px 22px;font-size:1rem;font-weight:700;text-decoration:none;transition:transform .1s,filter .15s;display:inline-flex}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent2));border:none;box-shadow:0 6px 24px #8b5cf666}.btn.secondary{background:linear-gradient(135deg,#22d3ee40,#8b5cf640);border:1px solid #22d3ee66}.btn.ghost{background:0 0}.btn.danger{color:#fda4a4;background:#f8717129;border-color:#f8717166}.btn.correct{color:#6ee7b7;background:#34d39929;border-color:#34d39966}.btn.author{color:#7dd3fc;background:#22d3ee29;border-color:#22d3ee66}.btn.small{border-radius:10px;padding:8px 14px;font-size:.88rem}.btn.big{width:100%;padding:18px 28px;font-size:1.1rem}.actions-row{flex-direction:column;gap:10px;width:100%;margin-top:12px;display:flex}.lang-toggle{top:calc(10px + env(safe-area-inset-top));background:var(--card);border:1px solid var(--card-border);z-index:50;border-radius:999px;gap:2px;padding:3px;display:flex;position:absolute;right:12px}.lang-toggle button{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:5px 11px;font-size:.8rem;font-weight:700}.lang-toggle button.active{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#fff}.landing{justify-content:center;gap:24px;position:relative}.hero{text-align:center;padding-top:24px}.logo{background:linear-gradient(90deg, var(--accent3), var(--accent), var(--accent2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:8px 0 0;font-size:clamp(3rem,14vw,4.5rem)}.tagline{color:var(--muted);margin:6px 0 0;font-size:1.05rem}.equalizer{justify-content:center;align-items:flex-end;gap:6px;height:44px;display:flex}.equalizer i{background:linear-gradient(180deg, var(--accent2), var(--accent));width:9px;animation:1s ease-in-out infinite eq;animation-delay:calc(var(--i) * .13s);border-radius:4px}@keyframes eq{0%,to{height:22%}50%{height:100%}}.join-card h2{margin-top:0}.landing-links{flex-direction:column;gap:10px;display:flex}.stem-inputs{grid-template-columns:1fr;gap:10px;display:grid}@media (width>=540px){.stem-inputs{grid-template-columns:1fr 1fr}}.stem-input{border:1px dashed var(--card-border);cursor:pointer;background:#00000038;border-radius:12px;flex-direction:column;gap:6px;padding:12px;font-size:.92rem;font-weight:600;transition:border-color .15s,background .15s,transform .1s;display:flex}.stem-input.filled{background:#34d39914;border-style:solid;border-color:#34d39973}.stem-input.drag-over{border-color:var(--accent3);background:#22d3ee1f;transform:scale(1.02)}.stem-drop-label{color:var(--muted);font-size:.8rem;font-weight:500}.stem-file{align-items:center;gap:8px;min-width:0;display:flex}.stem-file-name{color:var(--green);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:600;overflow:hidden}.stem-file-clear{color:var(--muted);cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:.7rem;display:inline-flex}.stem-file-clear:hover{color:var(--red);background:#f8717140}.dropzone{transition:border-color .15s,box-shadow .15s}.dropzone.drag-over{border-color:var(--accent3);box-shadow:0 0 0 2px #22d3ee66,0 0 30px #22d3ee33}.upload-progress{color:var(--muted);flex-direction:column;gap:8px;font-size:.9rem;display:flex}.mode-toggle{border:1px solid var(--card-border);background:#00000040;border-radius:12px;gap:4px;padding:4px;display:flex}.mode-toggle-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:9px;flex:1;padding:9px 10px;font-size:.9rem;font-weight:700;transition:background .15s,color .15s}.mode-toggle-btn.active{color:var(--text);background:linear-gradient(135deg,#8b5cf659,#ec48994d)}.song-dropzone{text-align:center;border:1px dashed var(--card-border);cursor:pointer;background:#00000038;border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:28px 18px;transition:border-color .15s,background .15s,transform .1s;display:flex}.song-dropzone:hover{border-color:var(--accent)}.song-dropzone.drag-over{border-color:var(--accent3);background:#22d3ee1f;transform:scale(1.01)}.song-dropzone-icon{font-size:2rem}.song-dropzone-label{font-size:1rem;font-weight:700}.separate-progress{color:var(--muted);flex-direction:column;gap:8px;font-size:.9rem;display:flex}.song-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.song-row{flex-direction:row;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px}.song-info{flex-direction:column;gap:2px;min-width:0;display:flex}.song-title{text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.song-meta{color:var(--muted);font-size:.85rem}.status.ready{color:var(--green);font-style:normal}.status.rendering{color:var(--yellow);font-style:normal}.status.pending{color:var(--muted);font-style:normal}.status.error{color:var(--red);font-style:normal}.mode-options{flex-direction:column;gap:10px;display:flex}.mode-option{border:1px solid var(--card-border);cursor:pointer;background:#0000002e;border-radius:12px;flex-direction:column;gap:4px;padding:14px;transition:border-color .15s,background .15s;display:flex}.mode-option.selected{border-color:var(--accent);background:#8b5cf624}.mode-option input{display:none}.mode-name{font-weight:700}.mode-desc{color:var(--muted);font-size:.88rem}.select-song-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.select-song{border:1px solid var(--card-border);width:100%;color:var(--text);cursor:pointer;background:#0000002e;border-radius:12px;align-items:center;gap:12px;padding:12px 14px;font-size:.95rem;display:flex}.select-song.selected{border-color:var(--accent3);background:#22d3ee1a}.select-song-order{border:1px solid var(--card-border);background:#ffffff14;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:.85rem;font-weight:800;display:inline-flex}.select-song.selected .select-song-order{background:var(--accent3);color:#06283b;border:none}.select-song .song-title{text-align:left;flex:1}.link-btn{cursor:pointer;font:inherit;text-align:left;background:0 0;border:none;padding:0}.song-picker{grid-template-columns:1fr 1fr;align-items:start;gap:16px;display:grid}@media (width<=640px){.song-picker{grid-template-columns:1fr}}.picker-pane{gap:10px;min-width:0}.pane-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.pane-head h2{margin:0}.picker-list,.queue-list{flex-direction:column;gap:8px;max-height:52vh;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.picker-item{border:1px solid var(--card-border);width:100%;color:var(--text);cursor:pointer;text-align:left;background:#0000002e;border-radius:12px;align-items:center;gap:10px;padding:11px 13px;font-size:.92rem;display:flex}.picker-item:hover{border-color:var(--accent3);background:#22d3ee14}.picker-item .song-title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.picker-add{width:24px;height:24px;color:var(--accent3);background:#22d3ee2e;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:800;display:inline-flex}.queue-item{border:1px solid var(--card-border);cursor:grab;background:#8b5cf61a;border-radius:12px;align-items:center;gap:8px;padding:10px 12px;font-size:.92rem;display:flex}.queue-item:active{cursor:grabbing}.queue-item.drag-over{border-color:var(--accent3);box-shadow:0 0 0 2px #22d3ee59}.queue-handle{color:var(--muted);cursor:grab;flex-shrink:0}.queue-order{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:.82rem;font-weight:800;display:inline-flex}.queue-item .song-title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.queue-btn{width:30px;height:30px;color:var(--muted);cursor:pointer;background:#ffffff0f;border:1px solid #0000;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;line-height:1;transition:color .15s,background .15s,border-color .15s;display:inline-flex}.queue-btn.remove:hover{color:var(--red);background:#f8717129;border-color:#f8717166}.lobby{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:10px;display:flex;position:relative}.lobby-label{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:0;font-size:.8rem}.join-code{letter-spacing:.18em;background:linear-gradient(90deg, var(--accent3), var(--accent), var(--accent2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(3.4rem,19vw,5.5rem);font-weight:900}.lobby-url{color:var(--muted);margin:0 0 14px}.lobby-check{font-size:3.4rem;animation:.5s pop}.player-chips{flex-wrap:wrap;justify-content:flex-start;gap:8px;display:flex}.player-chips.center{justify-content:center}.player-chip{background:var(--card);border:1px solid var(--card-border);border-radius:999px;padding:7px 14px;font-size:.92rem;font-weight:600;animation:.3s pop}.player-chip.offline{opacity:.4;text-decoration:line-through}.player-chip.correct{border-color:var(--green);color:var(--green)}.player-chip.me{border-color:var(--accent);color:#c4b5fd}.pulse{animation:1.8s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes pop{0%{opacity:0;transform:scale(.6)}80%{transform:scale(1.06)}to{opacity:1;transform:scale(1)}}.glow{text-shadow:0 0 30px #8b5cf68c}.countdown-screen{z-index:100;background:radial-gradient(700px 700px at 50% 40%, #8b5cf659, transparent 70%), linear-gradient(160deg, var(--bg), var(--bg2));flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:fixed;inset:0}.countdown-round{color:var(--muted);text-transform:uppercase;letter-spacing:.18em;font-weight:700}.countdown-number{background:linear-gradient(180deg, var(--accent3), var(--accent2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(7rem,38vw,13rem);font-weight:900;line-height:1;animation:1s countPop}@keyframes countPop{0%{opacity:0;transform:scale(1.7)}30%{opacity:1;transform:scale(1)}to{opacity:.9;transform:scale(.92)}}.countdown-label{color:var(--muted);font-size:1.1rem}.game-page{position:relative}.round-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.round-badge{background:linear-gradient(135deg, var(--accent), var(--accent2));letter-spacing:.04em;border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:800}.round-song-title{color:var(--accent3);font-weight:700}.round-score{color:var(--muted)}.round-score strong{color:var(--yellow);font-size:1.15rem}.stem-tiles{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}@media (width<=420px){.stem-tiles{grid-template-columns:repeat(2,1fr)}}.stem-tile{border:1px solid var(--card-border);color:var(--muted);background:#00000038;border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 12px;font-family:inherit;font-size:.82rem;font-weight:700;transition:all .2s;display:flex;position:relative;overflow:hidden}.stem-tiles.interactive .stem-tile{cursor:pointer}.stem-tiles.interactive .stem-tile:active{transform:scale(.95)}.stem-tile .stem-icon{filter:grayscale()opacity(.5);font-size:1.7rem;transition:filter .2s}.stem-tile.active{border-color:var(--accent);color:var(--text);background:linear-gradient(160deg,#8b5cf64d,#ec48992e);animation:1.4s ease-in-out infinite tileGlow;box-shadow:0 0 22px #8b5cf659}.stem-tile.active .stem-icon{filter:none}@keyframes tileGlow{0%,to{box-shadow:0 0 14px #8b5cf640}50%{box-shadow:0 0 28px #ec489973}}.stem-bars{align-items:flex-end;gap:3px;height:14px;display:none}.stem-tile.active .stem-bars{display:flex}.stem-bars i{background:var(--accent3);border-radius:2px;width:4px;animation:.8s ease-in-out infinite eq}.stem-bars i:nth-child(2){animation-delay:.2s}.stem-bars i:nth-child(3){animation-delay:.4s}.seekbar{flex-direction:column;gap:6px;display:flex}.seekbar-track{background:#ffffff14;border-radius:999px;height:10px;overflow:hidden}.seekbar-fill{background:linear-gradient(90deg, var(--accent3), var(--accent), var(--accent2));border-radius:999px;height:100%;transition:width .25s linear}.seekbar-times{color:var(--muted);font-variant-numeric:tabular-nums;justify-content:space-between;align-items:center;font-size:.85rem;display:flex}.seekbar.waiting .seekbar-track{animation:1.8s ease-in-out infinite pulse}.seekbar-waiting-label{color:var(--accent3);font-weight:600}.seekbar.interactive{flex:1}.seekbar.interactive .seekbar-track{cursor:pointer;touch-action:none;height:14px;position:relative;overflow:visible}.seekbar.interactive .seekbar-fill{border-radius:999px 0 0 999px;transition:none}.seekbar-handle{border:2px solid var(--accent);pointer-events:none;background:#fff;border-radius:50%;width:18px;height:18px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #0006}.playback-bar{align-items:flex-start;gap:12px;display:flex}.playback-bar .seekbar{flex:1;min-width:0}.volume-control{flex-shrink:0;align-items:center;gap:6px;padding-top:1px;display:flex}.volume-icon{cursor:pointer;background:0 0;border:none;padding:0;font-size:1.1rem;line-height:1}.volume-control input[type=range]{width:92px;accent-color:var(--accent);cursor:pointer}@media (width<=420px){.volume-control input[type=range]{width:64px}}.admin-round,.admin-columns{flex-direction:column;gap:14px;display:flex}@media (width>=700px){.admin-columns{grid-template-columns:3fr 2fr;align-items:start;display:grid}}.answer-feed ul{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.answer-item{border:1px solid var(--card-border);background:var(--card);border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;animation:.25s pop;display:flex}.answer-item.pending{border-color:#fbbf2480}.answer-item.title{opacity:.85;border-color:#34d39966}.answer-item.artist{opacity:.85;border-color:#22d3ee66}.answer-item.wrong{opacity:.5}.answer-body{flex-direction:column;gap:2px;min-width:0;display:flex}.answer-nick{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;font-weight:700}.answer-text{word-break:break-word;font-weight:700}.answer-actions{flex-shrink:0;gap:6px;display:flex}.answer-status{white-space:nowrap;flex-shrink:0;font-weight:800}.answer-status.correct,.answer-status.title{color:var(--green)}.answer-status.artist{color:var(--accent3)}.answer-status.wrong{color:var(--red)}.answer-status.pending{color:var(--yellow)}.end-round{margin-top:6px}.player-round{flex-direction:column;gap:16px;display:flex}.answer-form{flex-direction:column;gap:8px;display:flex}.answer-label{font-size:1.05rem;font-weight:800}.answer-input-row{gap:8px;display:flex}.answer-input-row input{flex:1}.got-it{border-radius:var(--radius);color:var(--green);text-align:center;background:#34d3991a;border:1px solid #34d39973;flex-direction:column;align-items:center;gap:8px;padding:26px;font-weight:800;animation:.4s pop;display:flex}.got-it-icon{font-size:2.4rem}.own-answers ul{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.own-answer{background:var(--card);border:1px solid var(--card-border);border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;font-size:.92rem;display:flex}.own-answer.title{border-color:#34d39966}.own-answer.artist{border-color:#22d3ee66}.own-answer.wrong{opacity:.55}.lobby-volume{top:calc(10px + env(safe-area-inset-top));z-index:50;background:var(--card);border:1px solid var(--card-border);border-radius:999px;padding:5px 12px 5px 8px;position:absolute;left:12px}.guess-targets{gap:8px;display:flex}.guess-target{border:1px solid var(--card-border);color:var(--muted);background:#0003;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:700;display:inline-flex}.guess-target.done{color:var(--green);background:#34d3991f;border-color:#34d39980}.scoreboard{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.scoreboard h2{font-size:1.7rem}.round-end-reason{color:var(--accent3);font-weight:700}.song-reveal{background:var(--card);border:1px solid var(--card-border);border-radius:12px;flex-direction:column;gap:2px;padding:12px 22px;display:flex}.song-reveal-label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}.song-reveal-title{color:var(--accent3);font-size:1.15rem;font-weight:800}.winner-banner{flex-direction:column;align-items:center;gap:2px;margin:8px 0;display:flex}.winner-trophy{font-size:3.6rem;animation:.6s pop}.winner-name{background:linear-gradient(90deg, var(--yellow), var(--accent2));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:900}.winner-label{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem}.score-list{flex-direction:column;gap:8px;width:100%;max-width:440px;margin:8px 0;padding:0;list-style:none;display:flex}.score-row{background:var(--card);border:1px solid var(--card-border);border-radius:12px;align-items:center;gap:12px;padding:12px 16px;animation:.45s both slideIn;display:flex}.score-row.me{border-color:var(--accent);background:#8b5cf61f}@keyframes slideIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.score-rank{text-align:center;flex-shrink:0;width:36px;font-size:1.2rem;font-weight:800}.score-name{text-align:left;text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:700;overflow:hidden}.score-name em{color:var(--muted);font-size:.82rem;font-style:normal}.score-points{color:var(--yellow);font-variant-numeric:tabular-nums;font-weight:800}.audio-unlock{z-index:200;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text);cursor:pointer;background:#0d0a1feb;border:none;flex-direction:column;justify-content:center;align-items:center;gap:14px;font-family:inherit;font-size:1.25rem;font-weight:800;display:flex;position:fixed;inset:0}.audio-unlock-icon{font-size:4rem;animation:1.6s ease-in-out infinite pulse}.answer-popup{z-index:300;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0d0a1fb3;justify-content:center;align-items:center;padding:24px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.answer-popup-card{text-align:center;border-radius:22px;flex-direction:column;align-items:center;gap:10px;max-width:90vw;padding:30px 34px;animation:.35s pop;display:flex}.answer-popup.correct .answer-popup-card{background:linear-gradient(160deg,#34d39940,#22d3ee26);border:1px solid #34d39999;box-shadow:0 0 50px #34d39959}.answer-popup.wrong .answer-popup-card{background:linear-gradient(160deg,#f8717138,#ec48991f);border:1px solid #f871718c}.answer-popup-icon{font-size:3.4rem}.answer-popup-text{font-size:1.25rem;font-weight:900}.answer-popup-guess{color:var(--muted);word-break:break-word;font-size:.95rem}.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti i{top:-14px;left:calc(var(--i) * 4.2%);background:hsl(calc(var(--i) * 47deg), 85%, 62%);width:9px;height:14px;animation:2.6s linear infinite confettiFall;animation-delay:calc(var(--i) * 90ms);border-radius:2px;position:absolute}@keyframes confettiFall{0%{opacity:1;transform:translateY(-20px)rotate(0)}to{opacity:.7;transform:translateY(105vh)rotate(680deg)}}