:root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;color:#f8faff;min-height:100vh;background:radial-gradient(ellipse at 18% 15%,#202f82 0,transparent 40%),radial-gradient(ellipse at 82% 12%,#742056 0,transparent 38%),radial-gradient(ellipse at 50% 90%,#56185b 0,transparent 50%),#080b21;background-attachment:fixed}body:before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(135deg,transparent 20%,#fa12b015 22%,transparent 25%,transparent 66%,#008dff12 69%,transparent 72%)}header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 26px;border-bottom:1px solid #5c43a4;background:#080c27c9;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px}.brand>span{font-size:38px}.brand strong{font-size:clamp(28px,3vw,45px);font-style:italic;letter-spacing:-2px;text-shadow:0 0 16px #168bff}.brand strong span{color:#ffb32b}.brand small{display:block;font-size:10px;letter-spacing:3px;margin-left:4px}nav{display:flex;gap:7px}.nav{background:#121a39;border:1px solid #3b447a}.nav.active{background:#057fff;box-shadow:0 0 15px #0077ff66}.code{border:1px solid #8055f8;border-radius:12px;padding:9px 22px;text-align:center;color:#cbd0e7;font-size:12px}.code b{display:block;font-size:28px;letter-spacing:2px;color:#ffe435}main{position:relative;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);gap:20px;padding:20px;max-width:1800px;margin:auto}.stage,.panel{min-width:0}.player{position:relative;aspect-ratio:16/9;border:3px solid #008dff;border-radius:13px;box-shadow:0 0 22px #007aff66;background:#04091b;overflow:hidden}#youtubePlayer,#youtubePlayer iframe{width:100%;height:100%;border:0}.placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at center,#373b8b,#11162f 65%);padding:20px}.placeholder h1{font-size:clamp(22px,3vw,38px);margin:10px}.placeholder p{color:#bbc7e6}.mic{font-size:58px}.now{font-size:18px;font-weight:700;text-align:center;padding:14px}.controls{display:flex;justify-content:center;gap:16px;margin:8px 0 24px}button{background:linear-gradient(180deg,#079dff,#0060e8);color:white;border:1px solid #3fb5ff;border-radius:10px;padding:12px 16px;cursor:pointer;font-weight:700;box-shadow:0 4px 12px #0005}button:hover{filter:brightness(1.15)}button:disabled{opacity:.45;cursor:not-allowed}.skip{background:linear-gradient(180deg,#ff3364,#ba0b36);border-color:#ff5577}.join,.panel{background:#0a1030e8;border:1px solid #5c3cbe;border-radius:14px;padding:18px;box-shadow:0 0 16px #491ba640}.join h3,.panel h2{margin:0 0 14px}.join p,.hint,.note{color:#b8c3e4;font-size:13px;line-height:1.6}.share,.searchbar{display:flex;gap:8px}.share input,.searchbar input{flex:1;min-width:0}input{background:#f9faff;color:#172038;border:0;border-radius:9px;padding:12px;font-size:15px;width:100%}.filters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.filters button{padding:7px 12px;background:#172147;border-color:#324879;font-size:12px}.result,.queueitem{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #2e365c}.result img{width:100px;aspect-ratio:16/9;object-fit:cover;border-radius:7px;background:#222}.result .info,.queueitem .info{flex:1;min-width:0}.result strong,.queueitem strong{display:block;font-size:13px;line-height:1.4}.result small,.queueitem small{color:#aab9dc}.result button{padding:9px 12px}.hidden{display:none!important}.joinform{display:grid;gap:9px;margin-top:20px}.modal{position:fixed;z-index:10;inset:0;background:#020518d9;display:flex;align-items:center;justify-content:center;padding:20px}.dialog{background:linear-gradient(150deg,#18205a,#0c102b);border:2px solid #6b4cf0;border-radius:18px;box-shadow:0 0 40px #bd24fa55;padding:28px;max-width:440px;width:100%;display:grid;gap:12px;text-align:center}.dialog h2{margin:0}.dialog p{color:#cad0ed}.dialog .or{color:#a7b6e4}.dialog .note{font-size:12px}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#172b62;border:1px solid #54acff;border-radius:10px;z-index:15}#toast:empty{display:none}@media(max-width:900px){main{grid-template-columns:1fr}header{justify-content:center}.brand{width:100%;justify-content:center}nav{order:3;width:100%;justify-content:center}.code{margin-left:auto}.result img{width:90px}}@media(max-width:470px){main{padding:10px;gap:12px}.panel,.join{padding:12px}.brand strong{font-size:30px}.code b{font-size:20px}.result img{width:72px}.result button{padding:8px}.share{flex-wrap:wrap}.share button{width:100%}}

/* QR room join panel */
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px auto 18px;text-align:center}
.qr-code{display:flex;align-items:center;justify-content:center;min-width:192px;min-height:192px;background:#fff;border-radius:14px;padding:8px;color:#142040;font-size:12px;max-width:260px}
.qr-code img,.qr-code canvas{display:block;max-width:100%;height:auto}
.qr-description{color:#d8d8ed;font-size:14px}
/* TV stage + QR sidebar / phone-only remote, October 2026 */
header{max-width:1800px;margin:auto;padding:16px 28px}.brand strong span{color:#008cff}.brand small{color:#ffe36e}.current-header{font-size:11px;color:#aeb9db;text-align:center}.current-header b{display:block;color:#fff;font-size:21px;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tv-layout{grid-template-columns:minmax(0,3fr) minmax(265px,1fr);gap:15px;align-items:start}.tv-sidebar{display:grid;gap:14px}.tv-sidebar .panel{border-color:#126de4;background:#080f2ae8;padding:15px}.tv-sidebar h2{font-size:19px;display:flex;align-items:center;justify-content:space-between;gap:8px}.count{font-size:12px;color:#a4b7e8;font-weight:400}.queue-list{max-height:330px;overflow:auto}.queueitem{padding:10px 2px}.queueitem>b{color:#5aa9ff;font-size:17px}.queueitem strong{font-size:12px;overflow-wrap:anywhere}.qr-panel{text-align:center}.qr-wrap{margin:8px auto}.qr-code{min-width:184px;min-height:184px;width:184px;margin:auto}.tv-start{font-size:12px;text-align:center;color:#a5b5da}.tv-start-button{display:block;margin:10px auto;background:#172b62}.remote-layout{display:none}.is-remote header,.is-remote .tv-layout{display:none}.is-remote .remote-layout{display:block;max-width:700px;margin:0 auto;padding:15px 12px 120px}.remote-head{text-align:center;margin:5px 0 18px}.remote-head>span{font-size:30px;font-weight:900;font-style:italic}.remote-head .blue{color:#138eff}.remote-head small{display:block;color:#ffd96a;letter-spacing:3px;font-size:10px}.remote-head p{color:#dce8ff}.remote-card{background:#0a1030eb;border:1px solid #2669b9;border-radius:13px;padding:14px;margin:12px 0}.remote-card h2{font-size:17px;margin:0 0 12px;display:flex;justify-content:space-between}.remote-card .searchbar{flex-wrap:wrap}.remote-card .searchbar input{min-width:160px}.remote-card .result{gap:8px}.remote-card .result img{width:75px}.remote-card .result button{font-size:12px;padding:9px 8px;white-space:nowrap}.remote-card .result strong{overflow-wrap:anywhere}.remote-card .queueitem strong{overflow-wrap:anywhere}.remote-controls{position:fixed;z-index:5;bottom:0;left:0;right:0;display:none;justify-content:center;gap:8px;padding:12px;background:#07122ff5;border-top:1px solid #2c6dd1}.is-remote .remote-controls{display:flex}.remote-controls button{flex:1;max-width:220px;font-size:15px;padding:15px 7px}.remote-controls #pauseBtn{background:linear-gradient(#ff4656,#c8142c);border-color:#ff566c}.remote-controls #nextBtn{background:linear-gradient(#ffbd24,#e28b00);border-color:#ffc53b;color:#1d1730}.remote-note{text-align:center;color:#a8b7d9;font-size:12px}.is-remote .modal .dialog{max-width:420px}@media(max-width:900px){.tv-layout{grid-template-columns:minmax(0,1fr) minmax(230px,.4fr)}.tv-sidebar .panel{padding:10px}}@media(max-width:650px){.tv-layout{grid-template-columns:1fr}.tv-sidebar{grid-template-columns:1fr 1fr}.qr-code{width:155px;min-width:155px;min-height:155px}.qr-code img{width:140px;height:140px}.current-header{display:none}.remote-card .result img{width:65px}}@media(max-width:390px){.tv-sidebar{grid-template-columns:1fr}.remote-controls button{font-size:13px}.remote-card .result button{font-size:11px}}

/* Auto-start TV: no welcome dialog, no visible numeric room code. QR still carries the room code. */
body.auto-tv-start:not(.is-remote) #startModal{display:none!important}
body:not(.is-remote) .tv-room-code{display:none!important}

/* Home link on TV only */
.home-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;background:linear-gradient(180deg,#168dff,#0955cb);border:1px solid #5bb6ff;border-radius:10px;padding:10px 17px;font-size:15px;font-weight:800;white-space:nowrap;box-shadow:0 3px 12px #0006}.home-link:hover,.home-link:focus-visible{filter:brightness(1.18)}.remote-home{position:absolute;left:0;top:0;padding:9px 13px;font-size:13px}.remote-head{position:relative;min-height:43px}.is-remote header .home-link{display:none}@media(max-width:470px){header>.home-link{margin:0 auto}.remote-home{position:static;display:table;margin:0 0 8px}}

/* Hide Home on the phone remote; retain TV header Home. */
.is-remote .home-link{display:none!important}

/* ReyVideoK remote v2: TV layout is unchanged */
.is-remote{background:#101010;color:#f5f5f5}.is-remote:before{display:none}.is-remote .remote-layout{max-width:780px;padding:0 0 90px;margin:auto}.rv-shell{background:#101010;min-height:100dvh}.rv-top{display:flex;justify-content:space-between;align-items:center;padding:18px 16px;border-bottom:1px solid #292929}.rv-top strong{font-size:25px}.rv-top strong span{color:#ff8220}.rv-top>div{font-size:12px;color:#aaa}.rv-top b{display:inline-block;padding:9px;color:#ddd;background:#262626;border-radius:7px;letter-spacing:2px}.rv-now{margin:14px 14px 10px;padding:16px;background:#1b1511;border:1px solid #57321c;border-radius:14px;display:grid;gap:6px}.rv-now small,.rv-transport small{color:#ff8a24;font-weight:800;letter-spacing:1px}.rv-now strong{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rv-now span{color:#bbb;font-size:13px}.rv-transport{margin:0 14px 15px;padding:13px;background:#2b1d15;border:1px solid #77401b;border-radius:14px;text-align:center}.rv-transport-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}.rv-transport-buttons button{min-width:0;padding:13px 3px;font-size:13px;background:#5b3016;border-color:#5b3016;color:#ff9a3d}.rv-transport-buttons #stopBtn{background:#5b2925;color:#ff7770}.rv-tab-panel{padding:12px 14px 18px}.rv-tab-panel h2{font-size:19px}.rv-searchbar{display:flex;gap:8px}.rv-searchbar input{background:#222;color:white;border:1px solid #3c3c3c;min-width:0}.rv-searchbar button,.rv-discover button{background:#382115;color:#ff8a24;border:1px solid #784019;box-shadow:none}.rv-discover{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.rv-discover button{font-size:13px}.rv-song-scroll{overflow-y:auto;max-height:calc(100dvh - 485px);min-height:140px;overscroll-behavior:contain}.rv-tab-panel .result,.rv-tab-panel .queueitem{background:#1c1c1c;border:1px solid #2d2d2d;border-radius:12px;margin:9px 0;padding:11px}.rv-tab-panel .result img{width:76px}.rv-tab-panel .result button{background:#392319;color:#ff9136;border-color:#6b3c21;box-shadow:none}.rv-bottom{position:fixed;z-index:8;bottom:0;left:0;right:0;display:flex;justify-content:space-around;background:#181818;border-top:1px solid #333;padding:10px max(8px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom));gap:0}.rv-nav{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;background:none!important;border:0!important;box-shadow:none!important;color:#aaa;font-size:24px;padding:4px!important}.rv-nav span{font-size:11px}.rv-nav.active{color:#ff8b29}.is-remote .remote-controls{display:none}.rv-mic-card{background:#1d1d1d;border:1px solid #333;border-radius:14px;padding:18px}.rv-setting-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.rv-setting-head h2{margin:0}.rv-setting-head p{color:#aaa;font-size:12px}.rv-setting-head button{background:#4d2d1b;border-color:#a4531b;white-space:nowrap}.rv-wake{display:inline-block;background:#423015;color:#ffb363;border-radius:30px;padding:8px 12px;font-size:13px;font-weight:700;margin:10px 0 18px}.rv-wake.on{background:#086b3e;color:white}.rv-mic-card>label:not(.rv-check){display:flex;justify-content:space-between;margin:16px 0 8px;font-weight:600}.rv-mic-card output{color:#ff902c}.rv-mic-card input[type=range]{width:100%;accent-color:#ff8b20}.rv-check{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:18px;border-top:1px solid #333}.rv-check input{width:24px;height:24px;accent-color:#ff8b20}.rv-warning{color:#d6b7a0;font-size:12px;line-height:1.6;margin-top:22px}
@media(min-width:780px){.rv-bottom{max-width:780px;margin:auto}.rv-song-scroll{max-height:calc(100dvh - 450px)}}

/* Hide retired suggestion shortcuts */
.rv-discover{display:none!important}