:root{color-scheme:dark;--lime:#d5f790;--muted:#969baa}*{box-sizing:border-box}body{margin:0;background:#0c0e16;color:#f4f4f7;font:14px system-ui,sans-serif}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid #343743;border-radius:9px;background:#20232f;color:#eee;padding:11px 16px}button:hover{border-color:var(--lime)}button:disabled{opacity:.5;cursor:wait}input,select{background:#1c1f2b;color:white;border:1px solid #343743;border-radius:8px;padding:10px}input:focus,button:focus-visible{outline:2px solid var(--lime);outline-offset:3px}header{height:92px;padding:20px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #252833}.brand{color:var(--lime);font-size:34px;text-decoration:none;display:flex;align-items:center;gap:10px}.brand span{color:white;font-size:20px;letter-spacing:3px;font-weight:800}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:3.2px;margin-top:5px}.private{font-size:12px;color:#afc48f;margin-right:20px}main{max-width:1490px;margin:auto;padding:38px 5%}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--muted)}h1{font-size:clamp(28px,3vw,42px);letter-spacing:-1.5px;margin:10px 0}h1 em{color:var(--lime);font-style:normal}.intro p:not(.eyebrow){color:var(--muted);margin-bottom:0}.primary{background:var(--lime);border-color:var(--lime);color:#172018;font-weight:700}.layout{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:28px}.stage{min-height:430px;position:relative;overflow:hidden;border:1px solid #444454;border-radius:16px;background:radial-gradient(ellipse at 80% 35%,#40516788,transparent 60%),radial-gradient(ellipse at 20% 85%,#7752b688,transparent 55%),#121b2c;padding:24px;isolation:isolate}.stage.sunset{background:radial-gradient(ellipse at 70% 50%,#e0a16288,transparent 60%),linear-gradient(130deg,#261b39,#5d2448)}.stage.midnight{background:radial-gradient(ellipse at 50% 20%,#254b77,transparent 65%),#080d18}.halo{position:absolute;width:650px;height:350px;border:1px solid #bcc5fc22;border-radius:50%;transform:rotate(-25deg);left:0;top:100px;z-index:-1;box-shadow:0 0 90px #8b96ef12,inset 0 0 80px #8b96ef12;animation:float 12s ease-in-out infinite alternate}@keyframes float{to{transform:rotate(-15deg) translate(40px,-30px)}}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.pill{font-size:10px;letter-spacing:1.6px;border:1px solid #ffffff33;padding:7px 10px;border-radius:5px}.stage select{font-size:11px;background:#11172288;border-color:#ffffff22}.song-title{text-align:center;margin:30px 0 22px}.song-title span{font-size:9px;letter-spacing:2px;color:#c5b9e2}.song-title h2{font-size:28px;margin:8px 0}.song-title p{color:#b8bdce;margin:0;font-size:12px}.lyrics{text-align:center;min-height:120px;display:flex;flex-direction:column;justify-content:center}.lyrics p{color:#c3c6d0aa;margin:8px 0;font-size:15px}.lyrics h3{font-size:clamp(20px,2vw,29px);margin:10px 0;color:var(--lime)}.pitch{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px 0;font-size:9px;letter-spacing:1px;color:#cdd1df}.pitchline{height:5px;width:120px;border-radius:10px;background:linear-gradient(90deg,#a179aa,#d5f790,#a179aa);position:relative}.pitchline i{position:absolute;left:50%;top:-3px;border-radius:50%;height:11px;width:11px;background:white;transition:left .1s}.status{font-size:10px;color:#b7bdcf;margin-top:20px}.transport{padding:22px 8px 10px}.progress{color:var(--muted);font-size:11px}progress{height:5px;flex:1;accent-color:var(--lime)}.controls{display:flex;align-items:center;gap:10px;margin-top:20px}#sing{flex:1}.volume{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted)}.volume input{width:70px;accent-color:var(--lime);padding:0}.settings{color:var(--muted);font-size:11px;margin-top:18px}.settings select{font-size:11px;padding:4px}.below{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #252833;margin-top:20px;padding-top:20px}.below span{font-size:10px;letter-spacing:1px;color:#c4c7d3}.below p{color:var(--muted);font-size:11px}aside{background:#151822;border:1px solid #282b36;border-radius:16px;padding:24px}.music{color:var(--lime);font-size:30px}aside h2{font-size:23px;margin:8px 0 20px}#count{font:12px system-ui;color:#a6aabb;background:#262936;border-radius:8px;padding:4px 7px}#search{width:100%}.tabs{display:flex;gap:6px;margin:18px 0}.tabs button{font-size:11px;padding:7px 10px;border:0;background:none;color:var(--muted)}.tabs button.active{background:#343b2b;color:var(--lime)}.song{width:100%;border:1px solid transparent;background:transparent;text-align:left;padding:14px 8px;display:flex;gap:12px;align-items:center;border-radius:10px}.song.selected{background:#252a30;border-color:#464e3f}.cover{width:43px;height:47px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(140deg,#796699,#293c54);font-size:19px;flex-shrink:0}.song:nth-child(2) .cover{background:linear-gradient(140deg,#b18469,#43304d)}.song:nth-child(3) .cover{background:linear-gradient(140deg,#4c7d7f,#24304b)}.song strong{display:block;font-size:13px;margin-bottom:5px}.song small{color:var(--muted);font-size:10px}.length{margin-left:auto;font-size:10px;color:var(--muted)}.catalog-note{padding:17px;border:1px dashed #414651;border-radius:10px;margin-top:20px}.catalog-note strong{font-size:12px}.catalog-note p{font-size:11px;line-height:1.7;color:var(--muted)}.catalog-note button{font-size:11px;background:transparent;padding:7px 10px}.history-title{font-size:13px;margin:25px 0 12px}#history p{font-size:11px;color:var(--muted)}.entry{display:flex;justify-content:space-between;padding:8px 0;font-size:11px;color:#c1c6d1}.entry b{color:var(--lime)}footer{margin-top:35px;border-top:1px solid #252833;padding-top:20px;font-size:10px;letter-spacing:1.5px;color:#7a8192;display:flex;justify-content:space-between}footer span{letter-spacing:0}dialog{background:#171b27;color:white;border:1px solid #444b5e;border-radius:16px;width:min(520px,94vw);padding:30px;max-height:90vh}dialog::backdrop{background:#050812cc;backdrop-filter:blur(6px)}dialog p{color:#b8becc;line-height:1.7}dialog label{display:block;margin:15px 0;font-size:12px}dialog input{display:block;width:100%;margin-top:7px}dialog small{color:var(--muted);line-height:1.7}dialog .primary{width:100%;margin-top:20px}.close{float:right;padding:3px 10px;font-size:20px}.result{border:1px solid #637444;border-radius:14px;padding:24px;margin-top:20px;background:#1c261c}.result b{font-size:36px;color:var(--lime)}.result p{color:#bdc6b4}.empty{padding:20px 0;color:var(--muted)}@media(max-width:1100px){.volume{display:none}main{padding:28px 3%}.layout{grid-template-columns:minmax(0,1fr) 310px}}@media(max-width:760px){header{height:76px;padding:15px 5%}.private{display:none}header button{font-size:11px}.brand span{font-size:16px}.intro{align-items:flex-start;gap:12px}.intro>.primary{font-size:11px;white-space:nowrap;margin-top:20px;padding:10px}.layout{grid-template-columns:1fr}.stage{min-height:405px;padding:18px}.status{font-size:9px}.status span:last-child{max-width:145px;text-align:right}.below p{font-size:10px}.controls button{padding:12px 9px;font-size:12px}aside{padding:20px}footer{gap:20px;line-height:1.6}footer span{max-width:190px}main{padding:23px 4%;padding-bottom:env(safe-area-inset-bottom)}.lyrics h3{font-size:22px}}@media(prefers-reduced-motion:reduce){.halo{animation:none}}
.reservation{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.reservation form{display:flex;gap:10px;align-items:center}.reservation label{font-size:10px;letter-spacing:1px;color:#b8bdce}.reservation input{width:115px}.reservation>button,.video-label{font-size:12px}.video-label{border:1px solid #343743;padding:11px;border-radius:9px;cursor:pointer}#queuestatus{font-size:11px;color:var(--lime)}.queuebar{display:flex;gap:20px;align-items:center;padding:14px 16px;background:#141823;border:1px solid #2a3040;border-radius:10px;margin-bottom:24px}.queuebar b{font-size:10px;letter-spacing:1px;white-space:nowrap;color:var(--lime)}#queue{display:flex;gap:8px;overflow:auto}#queue span{font-size:11px;color:var(--muted)}#queue button{font-size:11px;white-space:nowrap;padding:6px 9px}.songrow{display:flex;align-items:center}.songrow .song{flex:1;min-width:0}.reserve{padding:8px;background:none;border:0}.cover{font-size:11px;font-weight:800}.lyrics h3{--fill:0%;background:linear-gradient(90deg,#ffe857 var(--fill),white var(--fill));background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(2px 2px 1px #111);font-weight:900;letter-spacing:.2px}.lyrics p{color:white;text-shadow:2px 2px 2px #000}.lyrics p:first-child{opacity:.35}.stage{background:radial-gradient(ellipse at 50% 120%,#a6a79a 0%,#48607a 25%,transparent 55%),radial-gradient(ellipse at 80% 35%,#7595a944,transparent 60%),linear-gradient(#10223d,#41546b)}#bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.65}.tv main{max-width:none}.tv .intro,.tv header,.tv footer,.tv .below{display:none}.tv .layout{grid-template-columns:minmax(0,1fr) 330px}.tv .stage{min-height:60vh}.tv .lyrics h3{font-size:clamp(34px,4vw,66px)}.tv .lyrics p{font-size:24px}.tv .song-title h2{font-size:34px}.tv .song strong{font-size:17px}.tv .controls button{font-size:18px}.tv .stage .lyrics{min-height:210px}button:focus-visible{box-shadow:0 0 0 4px #d5f760}.tv .status{font-size:14px}@media(max-width:760px){.tv .layout{grid-template-columns:1fr}.reservation form label{display:none}.reservation{gap:7px}.reservation>button,.video-label{padding:9px;font-size:10px}.reservation form{gap:6px}.reservation input{width:94px}.queuebar{gap:10px}.tv .lyrics h3{font-size:34px}.tv .lyrics p{font-size:18px}}
#landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:.65}.stage{background:#10203377}.stage.sunset,.stage.midnight{background:#10152b66}.stage.hasvideo #landscape{display:none}.halo{display:none}.tv .reservation{position:sticky;top:0;z-index:5;background:#0c0e16;padding:10px 0}
.keypad-panel{display:flex;justify-content:space-between;gap:24px;background:#161b28;border:1px solid #39415b;border-radius:12px;padding:18px;margin-bottom:18px}.keypad-panel b{letter-spacing:2px;color:#d5f790;font-size:12px}.keypad-panel p{color:#aeb8c9;font-size:12px}.keypad-panel label{font-size:12px}.keypad-panel select{display:block;margin:12px 0;font-size:12px}.keypad-panel small{display:block;color:#efcf8f}#keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:260px}#keypad button{font-size:19px;font-weight:700;background:linear-gradient(#35415c,#222b40);border:1px solid #5c6883;box-shadow:0 3px #080c17}#keypad #keyreserve{font-size:12px;background:#63753f}.tv .keypad-panel{padding:10px}.tv #keypad{grid-template-columns:repeat(6,1fr);width:500px}.tv .keypad-panel p{display:none}@media(max-width:600px){.keypad-panel{gap:10px;padding:13px}#keypad{width:190px;flex-shrink:0}#keypad button{padding:9px}.keypad-panel select{max-width:130px}.tv #keypad{grid-template-columns:repeat(3,1fr);width:190px}}
#onlinepanel{background:#151b29;border:1px solid #44506a;border-radius:14px;padding:20px}#onlinepanel p{font-size:12px;line-height:1.7;color:#bdc5d7}#onlinepanel a{display:inline-block;color:#d5f790;margin:12px}#onlineframe iframe{width:100%;aspect-ratio:16/9;min-height:210px;border:0}.tabs{flex-wrap:wrap}[hidden]{display:none!important}
#songs{max-height:520px;overflow:auto}.songcredits{color:#aeb9cc;font-size:12px;line-height:1.8;padding:12px 8px}.songcredits a{color:#c9e99b}.song strong{overflow-wrap:anywhere}.songrow .song>span:nth-child(2){min-width:0}.tv #songs{max-height:65vh}
#onlinepanel #youtubeopen{display:block;text-align:center;background:#d5f790;color:#172018;font-weight:800;text-decoration:none;border-radius:10px;padding:18px;margin:18px 0;font-size:16px}
.intro{margin-bottom:20px}.intro h1{font-size:32px}.below,.catalog-note{display:none}.keypad-panel{max-width:600px;margin-left:auto;margin-right:auto}#listen{background:#d5f790;color:#172018;font-size:19px;font-weight:800;min-width:130px;order:-1}#sing{flex:0 1 auto;background:#252c3b;border-color:#52627c;color:white}.controls{justify-content:center}.volume{display:flex}.song{padding:17px 9px}.song strong{font-size:15px}.reserve{background:#283347;border:1px solid #485872;margin-left:5px;min-width:44px;min-height:44px}.songcredits{font-size:11px}#micstatus{font-size:12px}.stage .lyrics h3{font-size:clamp(25px,3vw,40px)}@media(max-width:760px){.layout{display:flex;flex-direction:column}.intro>.primary{font-size:10px}.volume{display:none}.keypad-panel{margin-bottom:12px}.stage{min-height:390px}#listen{min-width:110px}.controls{flex-wrap:wrap}}

/* Clear songbook and player layout */
header{height:76px}main{padding-top:20px}.intro{margin-bottom:20px}.intro h1{font-size:32px}.reservation{padding:14px;background:#171b28;border-radius:14px;margin-bottom:12px}.remote{margin:0 0 16px;border:1px solid #343743;border-radius:12px;padding:12px}.remote summary,.advanced summary{cursor:pointer;color:#c3c8d5;padding:5px}.keypad-panel{margin:12px 0 0}.queuebar{margin-bottom:18px}.layout{grid-template-columns:minmax(0,1fr) 380px}.layout aside{background:#151925;border:1px solid #303747;border-radius:16px;padding:20px}.tabs{gap:6px}.tabs button{padding:9px 12px}.audio-panel{padding:12px;background:#171d2b;border-radius:12px;margin-top:12px}.audio-panel label{display:block;font-size:12px;color:#c9d1df;margin-bottom:9px}audio{width:100%;display:block}#playbackhint{color:#efd59c;margin-bottom:0}.advanced{margin-top:14px}.settings{padding:8px}.stage{scroll-margin-top:12px}.songrow{border-bottom:1px solid #303747}.song small{line-height:1.5}.history-title,#history{display:none}.songcredits{font-size:11px;opacity:.75}.song-title h2{font-size:30px}.intro #add{background:transparent;color:#d5f790}.controls #listen{min-width:140px;font-size:19px}.private{display:none}
@media(max-width:800px){header{padding:12px 5%;height:70px}.intro h1{font-size:28px}.intro{gap:12px}.intro #add{font-size:12px;padding:9px}.layout{display:flex;flex-direction:column}.layout aside{order:-1;padding:15px}#songs{max-height:275px;overflow:auto}.stage{min-height:370px}.reservation{gap:8px}.reservation #codeform{width:100%}.reservation label.video-label{display:none}.queuebar{font-size:12px}.song-title h2{font-size:24px}.lyrics h3{font-size:26px}.controls{gap:8px}.controls #sing{font-size:14px}.pitch{display:none}}

#onlineframe{background:#080b12;border-radius:12px;overflow:hidden}#onlineframe iframe{display:block;width:100%;aspect-ratio:16/9;min-height:220px}#youtubelinkform{margin:16px 0}#youtubelinkform label{display:block;font-size:12px;margin-bottom:8px;color:#bdc5d7}.youtube-link-row{display:flex;gap:8px}.youtube-link-row input{min-width:0;flex:1;width:100%}.youtube-actions{display:flex;gap:8px;margin-top:12px}.youtube-empty{text-align:center;padding:28px 16px}#onlinestatus{min-height:44px}@media(max-width:600px){.youtube-link-row{flex-direction:column}#onlinepanel{padding:12px}#onlineframe iframe{min-height:210px}}

.era-label{display:block;font-size:12px;color:#bdc5d7;margin:14px 0 6px}#era{width:100%;margin-bottom:8px}.tabs button{min-height:42px}

.mic-panel{margin:20px 0;padding:20px;border:1px solid #44506a;background:#151b29;border-radius:14px}.mic-panel h3{margin:0}.mic-panel p,.mic-panel label{font-size:12px;line-height:1.6;color:#bdc5d7}.mic-panel meter{display:block;width:100%;height:22px;margin:8px 0 14px}.mic-panel form{display:grid;gap:10px;margin-top:14px}.mic-panel label{display:grid;gap:6px}.mic-panel input{width:100%;min-width:0}.mic-panel summary{cursor:pointer;margin-top:14px}.mic-panel #livescore{font-size:17px;color:#d5f790;font-weight:700}

.keypad-panel>div:first-child{display:grid;gap:8px;align-content:start}.keypad-panel>div:first-child label{font-size:12px;color:#bdc5d7}.keypad-panel select{width:100%;min-width:0}.keypad-panel small{display:block;min-height:32px;line-height:1.5}

/* A single singing screen; setup stays in Settings. */
header{height:64px;padding-block:10px}header>div{display:flex;gap:8px}.intro,.below,footer{display:none}main{padding-top:16px}.reservation{padding:10px 12px;margin-bottom:10px}.reservation #queuestatus{flex:1}.reservation form{flex:1}.reservation input{width:108px}.reservation #fullscreen{margin-left:auto}.queuebar{padding:10px 12px;margin-bottom:14px}.remote{padding:8px 12px;margin-bottom:10px}.keypad-panel{justify-content:center;max-width:none;padding:12px}.keypad-panel #keypad{width:min(100%,360px)}.layout{gap:18px;align-items:start;grid-template-columns:minmax(0,1fr) 340px}.layout>section{min-width:0}.performance-screen{background:#111725;border:1px solid #3c4659;border-radius:18px;overflow:hidden;scroll-margin-top:12px}.score-hud{padding:14px 18px;display:flex;gap:18px;align-items:center;background:#171e2b;border-bottom:1px solid #354052}.score-value{display:flex;align-items:baseline;gap:6px;flex-shrink:0}.score-value>span{align-self:center;color:#aeb8c9;font-size:9px;letter-spacing:2px;writing-mode:vertical-rl;transform:rotate(180deg)}.score-value strong{font-size:52px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;color:#d5f790}.score-value small{font-size:11px;color:#aeb8c9}.hud-center{min-width:0;flex:1}.hud-center p{font-size:11px;color:#bdc5d7;line-height:1.45;margin:0}.hud-center meter{width:100%;height:12px;display:block;margin:5px 0;accent-color:#d5f790}#hudmicbutton button{font-size:12px;padding:10px 12px;max-width:145px}#screenfeedback{color:#d5f790;min-height:15px}#onlinepanel{padding:14px;border:0;background:transparent;border-radius:0}#onlinepanel h2{font-size:17px;line-height:1.4;margin:0 0 12px}#onlineframe iframe{min-height:200px}.youtube-actions:empty,.youtube-actions{display:none}#onlinestatus{min-height:0;font-size:11px!important;margin:8px 0 0;line-height:1.4!important}#onlineadvanced{margin-top:12px;font-size:11px;color:#b5bed0}#onlineadvanced summary{cursor:pointer}#onlineadvanced #youtubeopen{font-size:12px;padding:10px;margin:10px 0}.screen-controls{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #313c50;justify-content:center}.screen-controls button{font-size:13px;min-height:43px}.screen-controls #screenplay{min-width:110px}.screen-controls #onlinescoreend{background:transparent;color:#d5f790}.stage{border:0;border-radius:0;min-height:350px;padding:18px}.stage .song-title{margin:20px 0}.stage .song-title h2{font-size:25px}.stage .status,.stage .pitch,.stage .pill{display:none}.stage .lyrics{min-height:140px}.stage .song-title span{font-size:9px}#settingsdialog{width:min(620px,94vw)}#settingsdialog h2{margin-top:0}#settingsdialog details{padding:14px 0;border-top:1px solid #343b4b}#settingsdialog summary{cursor:pointer;font-weight:600;color:#d3dfec}#settingsdialog select{max-width:100%;margin:8px 0}#displaysettings{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:18px}#displaysettings h3{width:100%;margin:8px 0}#displaysettings label.soundsetting{width:100%;display:flex;gap:10px;align-items:center;margin:4px 0}#settingsdialog input[type=checkbox]{width:auto;display:inline;margin:0}#displaysettings .volume{display:flex;margin:0}#displaysettings .volume input{width:100px}#displaysettings .video-label{font-size:12px;margin:0}#settingsdialog .mic-panel{margin:14px 0 0;padding:12px}#settingsdialog .mic-panel h3{font-size:14px}#voicesettings>div{padding-top:12px;display:grid;gap:8px}#voicesettings b,#voicesettings p{display:none}#voicesettings label{margin:0}#settingsdialog .transport{padding:10px 0}#settingsdialog .controls{flex-wrap:wrap}#settingsdialog #sing{font-size:12px}.more-filters{margin:10px 0;color:#9aa6ba;font-size:11px}.more-filters summary{cursor:pointer}.more-filters .tabs{margin:8px 0}aside h2{font-size:20px;margin-bottom:12px}.tabs{margin:12px 0;gap:4px}.tabs button{font-size:11px;padding:8px 10px}#songs{max-height:440px}.song{padding:12px 5px}.song strong{font-size:13px}.song small{font-size:9px}.cover{width:38px;height:40px}.era-label{font-size:10px;margin-top:10px}.has-result #screen-media,.has-result .score-hud,.has-result .screen-controls{display:none}.performance-screen .result{margin:0;border:0;border-radius:0;min-height:420px;text-align:center;padding:34px 20px;background:radial-gradient(ellipse at 50% 10%,#3d415c77,transparent 70%),#101725;position:relative;overflow:hidden}.result-kicker{font-size:10px;letter-spacing:3px;color:#c6d2dc!important;margin:0 0 14px}#resulttitle{font-size:18px;color:#c3cbd8;margin:0;line-height:1.5}.result-digits{display:flex;justify-content:center;align-items:baseline;gap:8px;margin:8px 0}.result-digits strong{font-size:clamp(96px,13vw,170px);line-height:1.15;font-weight:900;color:#e1faac;font-variant-numeric:tabular-nums;text-shadow:0 0 32px #d5f740}.result-digits>span{font-size:17px;color:#a1aebe}#resultreaction{font-size:clamp(24px,3vw,34px);color:#f5dc90;margin:4px 0 16px}#resultdetail{font-size:12px;line-height:1.6;max-width:430px;margin:0 auto 22px;color:#b9c3d3}.result-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.result-buttons button{font-size:12px}#scoresoundhint{font-size:11px;color:#b9c3d3}.result.revealed:not(.unscored)::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#f5dc90 1px,transparent 3px),radial-gradient(circle,#b5c3ef 1px,transparent 3px);background-size:93px 97px,127px 131px;opacity:.22;animation:score-sparkle 2s ease-out both}.result.unscored .result-digits strong{color:#8d9aaa;text-shadow:none}.result.unscored #resultreaction{color:#d1d9e4}@keyframes score-sparkle{from{transform:translateY(-40px);opacity:.55}to{transform:translateY(20px);opacity:.12}}.tv .layout{display:block}.tv aside{display:none}.tv .performance-screen{max-width:1400px;margin:auto}.tv .stage{min-height:60vh}.tv .score-value strong{font-size:64px}.tv #onlineframe iframe{max-height:70vh}.tv .result{min-height:65vh}.tv .result-digits strong{font-size:clamp(120px,17vw,230px)}
@media(max-width:800px){.layout{display:flex;flex-direction:column}.layout>section,.layout>aside{width:100%}.layout aside{order:0}.score-hud{padding:12px;gap:10px}.score-value strong{font-size:44px}.score-value small{font-size:9px}.hud-center p{font-size:10px}#hudmicbutton button{font-size:11px;padding:9px;max-width:110px}.score-value>span{font-size:8px}.screen-controls{padding:10px;gap:6px}.screen-controls button{font-size:11px;padding:10px 12px}.screen-controls #screenplay{min-width:80px}.performance-screen .result{min-height:390px;padding:24px 16px}.reservation #codeform{width:auto}.reservation #queuestatus{flex-basis:100%;min-height:15px}.reservation input{width:85px}.reservation label{display:none}.reservation button{font-size:12px;padding:10px}.stage{min-height:310px}.stage .lyrics h3{font-size:26px}#onlinepanel{padding:10px}#onlinepanel h2{font-size:15px}#songs{max-height:340px}.remote summary{font-size:12px}#settingsdialog #scene{font-size:12px}.tv .score-value strong{font-size:44px}}
@media(prefers-reduced-motion:reduce){.result.revealed:not(.unscored)::before{animation:none}}

#exitfocus{display:none}.tv #exitfocus{display:inline-block}
/* Shared karaoke room */
.room-panel{background:#171d27;border:1px solid #39443c;border-radius:18px;padding:20px;margin-bottom:24px}.room-panel h2{margin:4px 0 16px}.room-panel input{width:100%;margin:8px 0 12px;padding:12px}.room-panel label{font-size:12px;color:#aab4c4}.room-panel canvas{max-width:100%;border-radius:12px;display:block;margin:14px 0}.room-panel #roomcode{font:800 25px monospace;letter-spacing:3px;color:#d4fa71}.room-panel #roommembers{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.room-panel #roommembers li{background:#293424;border:1px solid #425038;border-radius:20px;padding:5px 9px;font-size:12px}.room-panel #roomstatus,.room-panel #phonemicstatus{font-size:12px;color:#aab4c4}.room-panel #joinlink{color:#d4fa71;display:block;margin:8px 0}.room-panel #closeroom{font-size:11px;margin-top:14px}.room-panel #membercount{font-size:12px;color:#aab4c4}#nowreserver{padding:10px 18px;margin:0 0 12px;border-left:3px solid #d4fa71;font-weight:600;color:#d4fa71}.queuebar button small{display:block;color:#d4fa71}.tv aside:has(.room-panel){display:block!important;width:280px}.tv aside:has(.room-panel)>:not(.room-panel){display:none!important}.tv .layout:has(.room-panel){display:grid!important;grid-template-columns:minmax(0,1fr) 280px!important;gap:20px}.room-panel button{margin:4px 3px 4px 0}@media(max-width:760px){.tv .layout:has(.room-panel){grid-template-columns:1fr!important}.tv aside:has(.room-panel){width:auto}.room-panel canvas{width:150px;height:150px}.room-panel{margin-top:10px}}

/* Display-only video: playback stays on the Videoke controls.
   inert blocks keyboard/remote focus; pointer-events blocks taps, clicks,
   double taps, and pointer gestures even on browsers without inert support. */
#onlineframe{touch-action:pan-y;user-select:none;-webkit-user-select:none}
#onlineframe iframe{pointer-events:none}

/* Video stays locked; Full screen and Skip are the only performance controls. */
#performance-screen button:not(#fullscreen):not(#screennext),#hudmicbutton,.result-buttons,#scoresoundhint{display:none!important}
#screen-media{pointer-events:none}
#performance-screen .screen-controls,.has-result .screen-controls{display:flex;justify-content:flex-end}

/* Fitted screen view also works when native fullscreen is unavailable on phones. */
body.screen-mode{overflow:hidden}
.screen-mode #performance-screen{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;border:0;border-radius:0;background:#080b12;max-width:none;margin:0}
.screen-mode #screen-media{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.screen-mode #screen-media>section,.screen-mode #stage{width:100%}
.screen-mode #onlineframe iframe{min-height:0;max-height:calc(100dvh - 170px)}
.screen-mode #stage{min-height:0;height:100%}
.screen-mode .screen-controls{order:3;flex-shrink:0}
.screen-mode #result{order:2;flex:1;min-height:0;overflow:auto}
.screen-mode .room-panel{display:none}
@media(min-width:1000px){.screen-mode:has(#hostroom:not([hidden])) #performance-screen{right:280px}.screen-mode:has(#hostroom:not([hidden])) .room-panel{display:block;position:fixed;top:0;right:0;bottom:0;width:280px;z-index:1001;margin:0;border-radius:0;overflow:auto}.screen-mode .room-panel button,.screen-mode .room-panel a,.screen-mode .room-panel input,.screen-mode .room-panel form{display:none!important}.screen-mode .room-panel{pointer-events:none}}

#scoreart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#result>:not(#scoreart){position:relative;z-index:1}#result[data-mood=awesome] .result-digits strong{color:#ffe6a2}#result[data-mood=practice] .result-digits strong{color:#acbcd8}#result[data-mood=nice] .result-digits strong{color:#c8c6e9}

#screennext{background:#f2cd72;color:#171b24;font-weight:800;min-width:120px}#screennext:disabled{opacity:.45}

/* Keep the concert animation behind legible score text, including fullscreen. */
#result{isolation:isolate}#scoreart{z-index:0}#resulttitle,#resultreaction,#resultdetail,.result-kicker{text-shadow:0 2px 14px #050917,0 1px 4px #050917}.result-digits strong{filter:drop-shadow(0 3px 12px #050917)}

/* Keep the reused player mounted while its next source starts. Never crop video. */
#onlineframe{position:relative;background:#080b12}
#onlineframe[data-playback]:not([data-playback="playing"]) iframe{visibility:hidden}
#youtubetransition{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;color:#d5f790;font-size:clamp(15px,2vw,23px);text-align:center;pointer-events:none;background:radial-gradient(ellipse at center,#202a3b,#080b12)}
#youtubetransition[hidden]{display:none}