:root{color-scheme:dark;--bg:#111214;--card:#1b1c20;--line:#303137;--text:#e3e3e6;--muted:#94969f;--accent:#d7ff71}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px system-ui,-apple-system,Segoe UI,sans-serif}header,footer{max-width:1120px;margin:auto;padding:28px 24px;display:flex;justify-content:space-between;align-items:center}header{border-bottom:1px solid var(--line)}.brand{font-size:22px;font-weight:900;letter-spacing:2px;text-decoration:none;color:var(--text)}.brand span{font-size:10px;margin-left:14px;color:var(--accent);letter-spacing:3px}main{max-width:1120px;margin:60px auto 80px;padding:0 24px}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--accent)}h1{font-size:clamp(44px,7vw,82px);line-height:1.03;letter-spacing:-4px;margin:22px 0}h1 em{font-style:normal;color:var(--accent)}.intro{color:var(--muted);margin-bottom:40px}h2{margin:0 0 22px;font-size:25px}h3{margin-top:32px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px}.join{position:relative;overflow:hidden}.disc{float:right;border:1px solid #42473a;border-radius:50%;width:90px;height:90px;text-align:center;line-height:85px;font-size:40px;color:var(--accent)}label{display:block;font-size:13px;color:var(--muted);margin-bottom:20px}input,select{display:block;width:100%;margin-top:8px;border:1px solid #3b3c42;border-radius:9px;background:#141518;color:var(--text);padding:13px;font:inherit}input:focus,select:focus{outline:2px solid var(--accent);outline-offset:2px}.row{display:flex;gap:12px}.row label{flex:1;min-width:0}button{border:1px solid #46484f;border-radius:9px;background:#292b30;color:var(--text);padding:13px 18px;font:600 14px system-ui;cursor:pointer;min-height:46px}button:hover{filter:brightness(1.1)}button:disabled{opacity:.5;cursor:default}.primary{background:var(--accent);border-color:var(--accent);color:#171b10}.quiet{background:transparent;color:var(--muted);border-color:transparent}.muted{color:var(--muted);font-size:13px;line-height:1.6}.roomtop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px}.roomtop h2{margin:3px 0}.roomtop .muted{font-size:10px;letter-spacing:2px}#status{font-size:23px;margin:26px 0}#message{color:#ffb5ad;margin-bottom:20px;white-space:pre-wrap}#answers{margin:25px 0}#answers button{text-align:left;padding:22px}#answers button small{display:block;color:var(--muted);margin-top:7px}.correct{border-color:var(--accent);color:var(--accent)}.chosen{background:#414439}.player,.track{display:flex;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.player strong{color:var(--accent)}.volume{display:inline-flex;align-items:center;gap:10px;margin:0 0 0 20px}.volume input{width:100px;padding:0}#admin{margin-top:24px}form{margin-top:28px;border-top:1px solid var(--line);padding-top:25px}footer{color:var(--muted);font-size:11px;letter-spacing:1px;border-top:1px solid var(--line)}[hidden]{display:none!important}@media(max-width:700px){main{margin-top:35px}.grid{grid-template-columns:1fr}.card{padding:22px}h1{letter-spacing:-2px}header{padding:20px 18px}.brand span{display:block;margin:5px 0}.volume{display:flex;margin:20px 0}.roomtop button{font-size:12px;padding:10px}.row{gap:8px}.row select{padding:10px 5px}footer span{display:none}}
/* Progressive player */
:root{--accent:#c6ff00}.attempts{display:grid;gap:10px;margin:24px 0 18px}.attempt{min-height:62px;border-radius:24px;background:#171b21;border:1px solid #262b33;padding:17px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#acb0ba}.attempt.active{background:#282b34;border-color:#343945}.attempt span{overflow-wrap:anywhere}.attempt small{flex-shrink:0;color:#727985;font-size:11px}.attempt.success{border-color:#8daa26;color:#d7ff71;background:#253020}.attempt.wrong{border-color:#5d353b;color:#ecabb0}.attempt.skipped{color:#9299a7}.music-player{padding:0 10px;text-align:center}.clip-label{display:table;background:var(--accent);color:#111;font-size:17px;font-weight:900;padding:11px 15px;border-radius:17px;margin-bottom:10px}.timeline{position:relative;height:27px;border:1px solid #383c46;border-radius:20px;background:#20242c;overflow:hidden}.timeline i{position:absolute;top:0;bottom:0;width:1px;background:#3a3e46;z-index:2}.unlocked,.played{position:absolute;left:0;top:0;height:100%;transition:width .06s linear}.unlocked{background:#333c29}.played{background:var(--accent)}.audio-clock{font:bold italic 16px ui-monospace,monospace;text-align:right;color:var(--accent);margin:10px 6px 18px}.play-circle{display:block;margin:0 auto 18px;width:92px;height:92px;border-radius:50%;background:#20242c;border:1px solid #3b404a;color:var(--accent);font-size:33px;padding:0}.play-circle:hover{background:#2c323c}.play-circle span{display:block}.music-player .volume{display:flex;justify-content:center;margin:0;gap:10px}.music-player .volume input{margin:0}.player-hint{min-height:20px}.guess-form{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:0;border:0}.guess-form input{margin:0;flex:1;min-width:0;border-radius:26px;background:#20242c;font-size:14px;padding:16px 18px}.guess-form button{border-radius:26px}.guess-form .quiet{border:1px solid #383c46;background:#20242c}.feedback{min-height:25px;color:var(--accent);font-size:14px}.tried{opacity:.4}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#answers{gap:10px;margin-top:22px}#answers button{border-radius:22px}.roomtop~#status{font-size:20px;line-height:1.5}@media(min-width:800px){#challenge{max-width:780px;margin:auto}.attempt{min-height:66px}}@media(max-width:600px){.guess-form{flex-wrap:wrap}.guess-form input{flex-basis:100%}.guess-form button{flex:1}.attempt{min-height:57px;padding:13px 18px;border-radius:22px}.music-player{padding:0}.audio-clock{font-size:14px}.play-circle{width:82px;height:82px}#room{padding:18px}.roomtop~#status{font-size:17px}#answers{grid-template-columns:1fr}#answers button{padding:16px}}

.in-room main>.eyebrow,.in-room main>h1,.in-room main>.intro{display:none}.in-room main{margin-top:24px;margin-bottom:35px}
.artist-badge{border:1px solid #5b7734;background:#202f1d;color:#d7ff71;border-radius:12px;padding:12px 16px;margin-top:18px;font-size:14px}.attempt.partial{border-color:#7f743a;background:#2e2b1b;color:#e1d78a}.guess-stack{flex:1;min-width:0;position:relative}.guess-stack input{width:100%}.suggestions{position:absolute;left:0;right:0;bottom:calc(100% + 8px);max-height:340px;overflow-y:auto;background:#20242c;border:1px solid #444a55;border-radius:16px;padding:6px;z-index:20;box-shadow:0 10px 36px #0008}.suggestions .suggestion{width:100%;display:block;text-align:left;border:0;border-radius:10px;padding:12px;background:transparent;color:#dedfe4;min-height:56px}.suggestion strong,.suggestion small{display:block}.suggestion small{color:#999faa;margin-top:5px}.suggestion:hover,.suggestion.highlighted{background:#363e2d!important}.suggestion[aria-selected=true]{outline:1px solid #b2d35f}@media(max-width:600px){.guess-stack{flex-basis:100%}.suggestions{max-height:240px}.guess-form .guess-stack input{font-size:16px}}
.track-language{width:200px;min-width:150px;margin:0;padding:10px;font-size:13px;align-self:center}.track>span{flex:1;min-width:0;overflow-wrap:anywhere}@media(max-width:600px){.track{flex-wrap:wrap}.track>span{flex-basis:100%}.track-language{flex:1}}

.autoplay-control{display:flex;align-items:center;justify-content:center;gap:9px;margin:14px 0 0;color:#bcc0c8;font-size:13px}.autoplay-control input{width:17px;height:17px;margin:0;accent-color:var(--accent)}
