:root{--bg:#060816;--panel:#0c1021;--panel2:#11172c;--text:#f7f7ff;--muted:#9aa3bf;--purple:#8a42ff;--pink:#ff42ce;--line:#242b48}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0,#171046 0,transparent 32%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}.nav{height:76px;display:flex;align-items:center;gap:28px;padding:0 4vw;border-bottom:1px solid var(--line);background:#060816dd;position:sticky;top:0;z-index:5;backdrop-filter:blur(16px)}.nav nav{display:flex;gap:24px;margin-left:auto}.nav>.btn:last-child{margin-left:auto}.logo,.mini-logo{font-size:30px;font-weight:1000;font-style:italic;letter-spacing:-3px;background:linear-gradient(135deg,#75c7ff,#9c4cff 50%,#ff43d1);-webkit-background-clip:text;color:transparent}.hero{max-width:1200px;margin:auto;min-height:650px;padding:90px 30px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:80px}.hero h1{font-size:clamp(56px,8vw,100px);line-height:.9;margin:14px 0 28px;letter-spacing:-6px}.hero h1 span{background:linear-gradient(90deg,#fff,#ad66ff,#ff56d5);-webkit-background-clip:text;color:transparent}.hero p{color:#c8cee0;font-size:20px;max-width:650px}.eyebrow{font-size:12px;letter-spacing:4px;color:#b8c0dc}.actions{display:flex;gap:14px;margin-top:35px}.btn{border:0;cursor:pointer;color:white;background:linear-gradient(90deg,var(--purple),var(--pink));padding:15px 24px;border-radius:14px;font-weight:800;box-shadow:0 0 35px #9c42ff35}.btn.small{padding:10px 16px}.btn.full{width:100%;font-size:16px}.btn.ghost{background:transparent;border:1px solid #704da8;box-shadow:none}.card{background:linear-gradient(145deg,#0e1327dd,#090d1bdd);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 70px #0006}.phone{padding:45px 35px;text-align:center;transform:rotate(3deg)}.phone h3{font-size:28px}.fake-qr{margin:30px auto;width:180px;height:180px;background:white;color:#080808;display:grid;place-items:center;font-weight:1000;font-size:25px;border-radius:16px}.features{max-width:1200px;margin:0 auto 60px;padding:0 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.features article{padding:24px;border-top:1px solid var(--line)}.features p,.muted{color:var(--muted)}.explainer{max-width:1140px;margin:30px auto;padding:35px}.center{display:grid;place-items:center;padding:30px}.form-card{width:min(460px,100%);padding:40px}.form-card h1{font-size:38px}.form-card label{display:block;color:#cbd1e6;margin:22px 0 8px}.form-card input,.form-card select,.search-card input{width:100%;background:#151b31;color:white;border:1px solid #303a60;border-radius:12px;padding:15px;margin-top:8px;font-size:16px;outline:none}.form-card input:focus,.search-card input:focus{border-color:#a84cff}.party-grid{max-width:1100px;margin:35px auto;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.search-card{display:flex;padding:12px;gap:10px}.search-card input{margin:0}.results{margin-top:15px}.song{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.song img{width:58px;height:58px;object-fit:cover;border-radius:10px}.song small{color:var(--muted);display:block;margin-top:4px}.song button,.host-controls button,.mobile-tabs button{background:#171d34;color:white;border:1px solid #30395c;border-radius:12px;padding:10px 13px;cursor:pointer}.section-head{display:flex;align-items:center;justify-content:space-between;padding:0 18px}.section-head span{color:#e05dff}.host-grid{max-width:1450px;margin:25px auto;padding:0 20px;display:grid;grid-template-columns:1.25fr .9fr .55fr;gap:18px}.player-card{padding:20px}.player-card #player,.player-card iframe{width:100%;aspect-ratio:16/9;min-height:270px;border-radius:15px}.player-card h1{font-size:34px;margin-bottom:4px}.player-card p{color:var(--muted)}.host-controls{display:flex;justify-content:center;gap:15px}.host-controls button{font-size:25px}.join-card{text-align:center;padding:25px}.join-card #qr{background:white;padding:10px;width:max-content;margin:20px auto;border-radius:12px}.room-code{font-size:24px;font-weight:900;letter-spacing:4px}.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);padding:22px}.stats div,.recap-stats div{text-align:center;border-right:1px solid var(--line)}.stats div:last-child,.recap-stats div:last-child{border:0}.stats strong,.recap-stats b{display:block;font-size:30px}.stats span,.recap-stats span{font-size:12px;color:var(--muted);text-transform:uppercase}.recap{width:min(600px,100%);padding:45px;text-align:center}.recap-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:30px 0;padding:22px;background:#12172b;border-radius:16px}.mobile-tabs{display:none}footer{text-align:center;color:#747e9f;padding:50px}@media(max-width:800px){.nav nav{display:none}.hero{grid-template-columns:1fr;padding-top:60px}.hero h1{font-size:62px;letter-spacing:-4px}.phone{display:none}.features{grid-template-columns:1fr 1fr}.party-grid,.host-grid{grid-template-columns:1fr}.join-card{order:-1}.stats{grid-template-columns:1fr 1fr;gap:25px}.mobile-tabs{display:flex;position:fixed;bottom:0;left:0;right:0;background:#080b17;border-top:1px solid var(--line);padding:10px;justify-content:space-around}.mobile-tabs button{border:0;background:transparent}.party-grid{padding-bottom:80px}}

/* QU3 LIVE ROOM REDESIGN */
.live-room-page{overflow-x:hidden;background:radial-gradient(circle at 52% -10%,#2c1260 0,transparent 35%),radial-gradient(circle at 100% 40%,#141f59 0,transparent 32%),#050712}.live-nav{height:70px;padding:0 24px}.live-party-meta{display:flex;align-items:center;gap:8px;color:#aeb7d1}.live-party-meta b{color:#fff}.live-dot,.chat-live-dot{width:8px;height:8px;border-radius:50%;background:#ff43d1;box-shadow:0 0 14px #ff43d1}.live-nav-actions{margin-left:auto;display:flex;align-items:center;gap:12px}.room-pill{font-size:11px;letter-spacing:1.5px;color:#8993b2;border:1px solid #2b3354;background:#0b1021;padding:8px 11px;border-radius:10px}.room-pill b{color:#fff;margin-left:7px;letter-spacing:2px}.live-room-shell{width:min(1800px,100%);margin:0 auto;padding:18px;display:grid;grid-template-columns:minmax(245px,.72fr) minmax(560px,1.9fr) minmax(280px,.82fr);gap:16px;align-items:stretch;min-height:calc(100vh - 70px)}.live-queue-panel,.live-chat-panel{min-height:calc(100vh - 106px);overflow:hidden}.panel-title-row,.chat-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px;border-bottom:1px solid var(--line)}.panel-title-row h2,.chat-head h2{margin:5px 0 0;font-size:22px}.mode-chip{font-size:11px;color:#e4c7ff;background:#20133a;border:1px solid #503172;padding:7px 9px;border-radius:999px}.live-queue{height:calc(100vh - 285px);overflow:auto}.live-song{display:grid;grid-template-columns:30px 54px 1fr auto;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid #1d2540}.live-song:hover{background:#111831}.live-song .rank{font-size:11px;color:#66718e;font-weight:900}.live-song img{width:54px;height:54px;border-radius:9px;object-fit:cover}.live-song-copy{min-width:0}.live-song-copy b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-song-copy small{display:block;color:#7f89a7;font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-vibes{font-size:11px;color:#ffc4f0;font-weight:900}.queue-empty{padding:38px 20px;text-align:center;color:#77819e;display:grid;gap:6px}.queue-empty b{color:#dfe4f5}.queue-footer{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:#080c1b}.mini-stat{text-align:center;padding:13px 4px}.mini-stat+ .mini-stat{border-left:1px solid var(--line)}.mini-stat b{display:block;font-size:14px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:auto}.mini-stat span{font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#68738f}.live-stage{min-width:0;display:flex;flex-direction:column;gap:12px}.stage-heading{display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:0 2px}.live-badge{font-size:10px;font-weight:900;color:#ff6bdd;letter-spacing:1px}.skip-pill{border:1px solid #343e64;background:#0d1327;color:#fff;border-radius:999px;padding:8px 14px;font-weight:800;cursor:pointer}.video-shell{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid #31395e;border-radius:20px;overflow:hidden;box-shadow:0 28px 90px #0008,0 0 60px #733dff18}.video-shell #player,.video-shell iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}.video-click-shield{position:absolute;inset:0;z-index:3;cursor:default;background:transparent}.video-corner-badge{position:absolute;z-index:4;left:16px;top:14px;font-size:9px;letter-spacing:1.5px;font-weight:1000;padding:7px 9px;border-radius:8px;background:#070a13b8;border:1px solid #ffffff24;pointer-events:none}.now-playing-strip{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-radius:17px}.now-copy{min-width:0}.now-copy h1{margin:4px 0 2px;font-size:clamp(18px,2vw,28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-copy p{margin:0;color:#8f99b7}.vibe-total{min-width:90px;text-align:center;font-size:21px}.vibe-total b{font-size:22px}.vibe-total span{display:block;color:#727d9c;font-size:8px;letter-spacing:1.5px;margin-top:2px}.stage-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:14px;border-radius:16px}.stage-stats div{text-align:center}.stage-stats div+div{border-left:1px solid var(--line)}.stage-stats strong{display:block;font-size:20px}.stage-stats span{font-size:9px;text-transform:uppercase;color:#747f9d;letter-spacing:1px}.live-chat-panel{display:flex;flex-direction:column}.chat-head{align-items:center}.chat-messages{flex:1;overflow:auto;padding:12px 15px;min-height:300px}.chat-message{display:grid;grid-template-columns:34px 1fr;gap:9px;padding:9px 0}.chat-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:1000;background:linear-gradient(135deg,#7548ff,#ff47c7);box-shadow:0 0 18px #8b48ff33}.chat-name{font-size:11px;font-weight:900;color:#eef1ff}.chat-name span{font-size:9px;font-weight:500;color:#65708e;margin-left:5px}.chat-message p{margin:3px 0 0;font-size:12px;line-height:1.4;color:#c4cae0;overflow-wrap:anywhere}.chat-empty{color:#6f7996;font-size:12px;text-align:center;padding:35px 10px}.chat-compose{display:grid;grid-template-columns:1fr 38px;gap:8px;padding:12px;border-top:1px solid var(--line)}.chat-compose input{min-width:0;background:#11172a;color:#fff;border:1px solid #30395b;border-radius:11px;padding:11px 12px;outline:none}.chat-compose input:focus{border-color:#8d4dff}.chat-compose button{border:0;border-radius:11px;color:#fff;background:linear-gradient(135deg,#784cff,#ef43d1);cursor:pointer}.join-mini{display:flex;align-items:center;gap:12px;padding:12px 15px;border-top:1px solid var(--line);background:#080c1a}.join-mini #qr{background:#fff;padding:4px;border-radius:7px;width:84px;height:84px}.join-mini #qr img,.join-mini #qr canvas{width:76px!important;height:76px!important}.join-mini small{display:block;color:#707b99;font-size:8px;letter-spacing:1.5px}.join-mini b{display:block;font-size:20px;letter-spacing:4px;margin-top:4px}@media(max-width:1150px){.live-room-shell{grid-template-columns:230px minmax(500px,1fr)}.live-chat-panel{grid-column:1/-1;min-height:420px}.chat-messages{max-height:300px}.join-mini{display:none}}@media(max-width:800px){.live-nav{padding:0 14px}.live-party-meta{font-size:12px}.room-pill{display:none}.live-room-shell{grid-template-columns:1fr;padding:10px}.live-stage{order:1}.live-chat-panel{order:2;grid-column:auto;min-height:440px}.live-queue-panel{order:3;min-height:420px}.live-queue{height:auto;max-height:420px}.video-shell{border-radius:14px}.stage-stats{display:none}.now-playing-strip{padding:14px}.live-nav-actions .btn{padding:9px 11px}.join-mini{display:flex}}
.guest-party-grid{grid-template-columns:1fr 1fr}.guest-chat-card{grid-column:1/-1;overflow:hidden}.guest-chat-messages{height:300px}@media(max-width:800px){.guest-party-grid{grid-template-columns:1fr}.guest-chat-card{grid-column:auto}}

/* QU3 host: song title at top + host YouTube search below video */
.stage-now-meta{min-width:0;display:grid;gap:4px}.stage-song-line{display:flex;align-items:baseline;gap:9px;min-width:0}.stage-song-line b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(58vw,760px)}.stage-song-line span{font-size:11px;color:#9ca6c3;white-space:nowrap}.host-song-search{padding:16px 18px;border-radius:17px}.host-search-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.host-search-head h2{margin:4px 0 0;font-size:18px}.host-search-bar{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:13px}.host-search-bar input{min-width:0;background:#11172a;color:#fff;border:1px solid #30395b;border-radius:12px;padding:13px 14px;font-size:14px;outline:none}.host-search-bar input:focus{border-color:#8d4dff;box-shadow:0 0 0 3px #8d4dff16}.host-search-results{display:grid;gap:7px;max-height:235px;overflow:auto;margin-top:10px}.host-search-song{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:8px;background:#0b1020;border:1px solid #202844;border-radius:12px}.host-search-song img{width:48px;height:48px;border-radius:8px;object-fit:cover}.host-search-song div{min-width:0}.host-search-song b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.host-search-song small{display:block;color:#78839f;font-size:10px;margin-top:3px}.host-search-song button{border:1px solid #6942a4;background:#1a1230;color:#f6eaff;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:900;cursor:pointer}.host-search-note{padding:14px;color:#7e89a7;text-align:center;font-size:12px}@media(max-width:800px){.stage-song-line{display:grid;gap:2px}.stage-song-line b{max-width:70vw;font-size:14px}.host-search-head .vibe-total{display:none}.host-search-results{max-height:300px}}

/* QU3 reactions + skip voting */
.stage-actions,.guest-reactions{display:flex;align-items:center;gap:8px}.flame-pill{border:1px solid #5c355d;background:#1a1020;color:#fff;border-radius:999px;padding:8px 13px;font-weight:900;cursor:pointer;box-shadow:0 0 20px #ff4fc51a}.flame-pill:hover{border-color:#ff62c9}.flame-pill.pop{animation:flamePop .3s ease}.flame-burst{position:absolute;z-index:8;left:50%;top:50%;font-size:72px;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;filter:drop-shadow(0 0 24px #ff4fba)}.flame-burst.show{animation:flameBurst .65s ease-out}.guest-now-playing{grid-column:1/-1;padding:18px 20px}.guest-now-playing h2{margin:5px 0 2px}.guest-reactions{margin-top:12px}.skip-pill.voted{border-color:#8f58ff;background:#241744}.video-click-shield{touch-action:manipulation;cursor:pointer}@keyframes flameBurst{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}30%{transform:translate(-50%,-50%) scale(1.25);opacity:1}100%{transform:translate(-50%,-70%) scale(.85);opacity:0}}@keyframes flamePop{50%{transform:scale(1.15)}}
/* Accounts + synchronized guest player */
.account-nav{margin-left:auto;display:flex;align-items:center;gap:12px}.account-chip{font-weight:800;color:#d9c8ff}.auth-card .eyebrow{display:block;margin-top:28px}.auth-switch{text-align:center;color:var(--muted);margin-top:22px}.auth-switch a{color:#d887ff;font-weight:800}.check-label{display:flex!important;align-items:center;gap:10px}.check-label input{width:auto!important;margin:0!important}.guest-live-player{grid-column:1/-1;padding:0;overflow:hidden;position:relative}.guest-video-shell{position:relative;aspect-ratio:16/9;background:#000;max-height:62vh}.guest-video-shell #guestPlayer,.guest-video-shell iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}.guest-video-shield{position:absolute;inset:0;z-index:3;touch-action:manipulation}.guest-player-meta{padding:16px 20px;display:flex;justify-content:space-between;align-items:center}.enter-party-overlay{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#050712d9;backdrop-filter:blur(8px)}.enter-party-overlay.hidden{display:none}.enter-party-box{text-align:center;padding:28px}.enter-party-box h2{margin:8px 0}.sync-badge{font-size:10px;color:#8df0ba;border:1px solid #285d45;background:#0b2119;padding:6px 9px;border-radius:999px}.sync-badge.syncing{color:#ffd18d;border-color:#66502a;background:#251c0b}@media(max-width:800px){.account-nav>a:not(.btn){display:none}.guest-player-meta{align-items:flex-start;gap:10px}}

/* QU3 unified host + guest live-room layout */
.unified-room-shell{grid-template-columns:minmax(0,1fr) minmax(280px,360px);max-width:1500px}
.unified-room-shell .live-chat-panel{min-height:calc(100vh - 106px)}
.up-next-card{padding:16px 18px;border-radius:17px;overflow:hidden}
.up-next-card .host-search-head{margin-bottom:10px}
.up-next-list{display:grid;gap:7px;max-height:300px;overflow:auto}
.up-next-list .live-song,.up-next-list .song{display:grid;grid-template-columns:30px 54px 1fr auto;gap:10px;align-items:center;padding:10px;background:#0b1020;border:1px solid #202844;border-radius:12px}
.up-next-list .song img,.up-next-list .live-song img{width:54px;height:54px;border-radius:9px;object-fit:cover}
.up-next-list .song>div{min-width:0}.up-next-list .song b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.up-next-list .song small{display:block;color:#7f89a7;font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-next-list .song button{border:1px solid #6942a4;background:#1a1230;color:#f6eaff;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:900;cursor:pointer}
.skip-hint{text-align:right;margin:-5px 4px 0;min-height:16px}
.flame-pill[disabled]{opacity:.55;cursor:default;filter:saturate(.5)}
@media(max-width:950px){.unified-room-shell{grid-template-columns:1fr}.unified-room-shell .live-chat-panel{grid-column:auto;min-height:420px}.up-next-list{max-height:360px}}
.host-search-results .song{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:8px;background:#0b1020;border:1px solid #202844;border-radius:12px}.host-search-results .song img{width:48px;height:48px;border-radius:8px;object-fit:cover}.host-search-results .song div{min-width:0}.host-search-results .song b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.host-search-results .song small{display:block;color:#78839f;font-size:10px;margin-top:3px}.host-search-results .song button{border:1px solid #6942a4;background:#1a1230;color:#f6eaff;border-radius:10px;padding:8px 10px;font-size:11px;font-weight:900;cursor:pointer}

/* Current-song stats: always directly below video */
.live-song-stats{margin:0}.live-song-stats span{white-space:nowrap}@media(max-width:800px){.stage-stats.live-song-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:11px 6px}.stage-stats.live-song-stats strong{font-size:17px}.stage-stats.live-song-stats span{font-size:7px;letter-spacing:.6px}}


/* QU3 large live interaction tiles */
.action-stats{padding:0!important;overflow:hidden;min-height:112px;align-items:stretch}
.action-stats .stat-tile,.action-stats .stat-action{min-width:0;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:0;background:transparent;color:#fff;text-align:center}
.action-stats .stat-action{cursor:pointer;font:inherit;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.action-stats .stat-action:hover{background:#ffffff08;transform:translateY(-1px)}
.action-stats .stat-action:active{transform:scale(.98)}
.action-stats .stat-tile+*,.action-stats .stat-action+*{border-left:1px solid var(--line)}
.action-stats strong,.action-stats .stat-action strong{font-size:30px;line-height:1;font-weight:1000}
.action-stats span,.action-stats .stat-action>span{font-size:10px!important;font-weight:900;letter-spacing:1.2px;color:#8f99b7}
.action-stats .flame-stat strong{filter:drop-shadow(0 0 15px #ff4fc555)}
.action-stats .skip-stat strong{filter:drop-shadow(0 0 14px #845cff55)}
.action-stats .stat-action.voted,.action-stats .stat-action:disabled{background:#23163a;box-shadow:inset 0 0 30px #a553ff18}
.action-stats .flame-stat.voted,.action-stats .flame-stat:disabled{background:#30152b}
.action-stats .stat-action:disabled{opacity:.78;cursor:default}
@media(max-width:800px){.stage-stats.live-song-stats.action-stats{display:grid!important;padding:0!important;min-height:94px}.action-stats .stat-tile,.action-stats .stat-action{min-height:94px}.action-stats strong,.action-stats .stat-action strong{font-size:23px}.action-stats span,.action-stats .stat-action>span{font-size:7px!important;letter-spacing:.65px}}

/* Compact live-room polish */
.live-stage{gap:7px}
.stage-heading{min-height:42px;margin-bottom:1px}
.stage-song-line b{font-size:clamp(22px,2.5vw,34px);line-height:1.08;max-width:min(70vw,900px)}
.action-stats{min-height:76px!important;margin-top:-1px;border-radius:13px}
.action-stats .stat-tile,.action-stats .stat-action{min-height:76px!important;gap:3px;padding:5px 6px}
/* Keep the existing icon/number/label sizing; only remove excess vertical space. */
.up-next-card{padding:10px 12px;border-radius:14px}
.up-next-card .host-search-head{margin-bottom:5px}
.up-next-card .host-search-head h2{margin-top:1px;font-size:16px}
.up-next-card .eyebrow{font-size:8px}
.up-next-list{gap:4px;max-height:190px}
.up-next-list .live-song,.up-next-list .song{grid-template-columns:24px 44px 1fr auto;gap:8px;padding:6px 8px;border-radius:10px}
.up-next-list .song img,.up-next-list .live-song img{width:44px;height:44px;border-radius:7px}
.up-next-list .song small{margin-top:2px}
@media(max-width:800px){
  .live-stage{gap:6px}
  .stage-song-line b{font-size:23px;max-width:88vw}
  .stage-stats.live-song-stats.action-stats{min-height:72px!important}
  .action-stats .stat-tile,.action-stats .stat-action{min-height:72px!important;padding:4px}
  .up-next-card{padding:9px 10px}
  .up-next-list{max-height:170px}
}


/* Match Up Next to Add to the Party card footprint */
.up-next-card,.host-song-search{padding:10px 12px!important;border-radius:14px!important}
.up-next-card{max-height:118px;display:flex;flex-direction:column}
.up-next-card .host-search-head{flex:0 0 auto;margin-bottom:5px}
.up-next-card .up-next-list{flex:1;min-height:0;max-height:64px!important;overflow-y:auto}
.up-next-card .queue-empty{padding:10px 8px}
.up-next-card .queue-empty span{display:none}
@media(max-width:800px){.up-next-card{max-height:116px}.up-next-card .up-next-list{max-height:62px!important}}


/* Up Next: compact, but always tall enough to show the next song clearly. */
.up-next-card{max-height:220px!important;min-height:142px!important;}
.up-next-card .up-next-list{max-height:154px!important;min-height:64px!important;overflow-y:auto!important;}
@media(max-width:800px){.up-next-card{max-height:210px!important;min-height:138px!important}.up-next-card .up-next-list{max-height:148px!important;min-height:64px!important}}

/* Up Next is display-only: no queue flame/vote control. */
.up-next-list .live-song,.up-next-list .song{grid-template-columns:30px 54px minmax(0,1fr)!important}
.up-next-list .song-vibes,.up-next-list [data-vote]{display:none!important}
@media(max-width:800px){.up-next-list .live-song,.up-next-list .song{grid-template-columns:24px 44px minmax(0,1fr)!important}}

/* QU3: Up Next shows exactly one upcoming song */
.up-next-card{min-height:0!important;max-height:none!important}
.up-next-card .up-next-list{min-height:0!important;max-height:none!important;overflow:visible!important}
.up-next-list .coming-next{grid-template-columns:58px minmax(0,1fr)!important;padding:8px 10px!important}
.up-next-list .coming-next img{width:58px!important;height:58px!important}
@media(max-width:800px){.up-next-list .coming-next{grid-template-columns:50px minmax(0,1fr)!important}.up-next-list .coming-next img{width:50px!important;height:50px!important}}

/* === SAFE SURGICAL ROOM FIX === */
/* Absolutely nothing QU3-owned may cover the YouTube player. */
.video-click-shield,.guest-video-shield,.flame-burst{
  display:none !important;
  pointer-events:none !important;
}
.video-shell iframe,.guest-video-shell iframe{
  pointer-events:auto !important;
}

/* Exact visual order without moving/removing existing HTML nodes:
   Flame | Songs Queued | Skip */
.stage-stats.action-stats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-template-rows:112px !important;
  align-items:stretch !important;
  gap:0 !important;
}
.stage-stats.action-stats > *{
  min-width:0 !important;
  width:100% !important;
  height:112px !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
#flameBtn,#guestFlameBtn{grid-column:1 !important;grid-row:1 !important}
#stageSongs,#guestStageSongs{grid-column:2 !important;grid-row:1 !important}
#skipBtn,#voteSkipBtn{grid-column:3 !important;grid-row:1 !important}

/* Glow the player border when the existing Flame button is active.
   No player click/double-click is involved. */
.video-shell.qup-flame-glow,
.guest-video-shell.qup-flame-glow{
  animation:qupSafeFlameGlow .9s ease-out;
}
@keyframes qupSafeFlameGlow{
  0%{
    box-shadow:0 0 0 rgba(255,110,20,0);
  }
  25%{
    box-shadow:
      0 0 0 2px rgba(255,139,30,.95),
      0 0 22px rgba(255,61,118,.85),
      0 0 48px rgba(147,61,255,.68);
  }
  100%{
    box-shadow:0 0 0 rgba(255,110,20,0);
  }
}

/* QU3 current-folder restore: YouTube itself must receive all pointer input. */
.video-click-shield,.guest-video-shield,.flame-burst{
  display:none!important;
  pointer-events:none!important;
}
.video-shell iframe,.guest-video-shell iframe{
  pointer-events:auto!important;
}


/* ===== QU3 PARTY UI POLISH ===== */
.party-shell,.host-shell{background:
 radial-gradient(circle at 28% 12%,rgba(178,69,255,.10),transparent 28%),
 radial-gradient(circle at 75% 28%,rgba(68,85,255,.08),transparent 32%);}

.stage-card,.room-stage,.video-panel{
 border-color:rgba(151,91,255,.45)!important;
 box-shadow:0 0 0 1px rgba(255,68,207,.06),0 18px 55px rgba(0,0,0,.30);
}

.video-shell{
 border-radius:14px 14px 0 0!important;
 overflow:hidden;
 box-shadow:0 0 26px rgba(151,70,255,.12);
}

.stage-actions,.guest-stage-actions,.video-actions{
 min-height:78px!important;
 border-radius:0 0 14px 14px!important;
 background:linear-gradient(180deg,rgba(11,14,35,.96),rgba(8,11,29,.99))!important;
}
.stage-actions>*,
.guest-stage-actions>*,
.video-actions>*{
 background:transparent!important;
 border-color:rgba(130,144,196,.14)!important;
 transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.stage-actions>*:hover,
.guest-stage-actions>*:hover,
.video-actions>*:hover{
 background:rgba(139,76,255,.08)!important;
}
.stage-actions .active,.guest-stage-actions .active,
#flameBtn.active,#guestFlameBtn.active{
 background:radial-gradient(circle at 50% 65%,rgba(255,52,164,.19),transparent 62%)!important;
 box-shadow:inset 0 -2px 0 rgba(255,73,203,.48);
}

.up-next-card,.queue-card,.coming-up-card{
 background:linear-gradient(145deg,rgba(11,15,37,.97),rgba(9,12,31,.98))!important;
 border-color:rgba(120,137,194,.22)!important;
 box-shadow:0 12px 36px rgba(0,0,0,.18);
}
.chat-panel,.party-chat{
 background:
 radial-gradient(circle at 88% 54%,rgba(130,49,255,.08),transparent 35%),
 linear-gradient(180deg,rgba(12,16,40,.99),rgba(8,12,31,.99))!important;
}
.chat-input-wrap,.comment-form{
 background:rgba(17,22,49,.94)!important;
 border-color:rgba(136,104,224,.32)!important;
 border-radius:18px!important;
}


/* ===== QU3 MOCKUP UI — ACTUAL ROOM SELECTORS ===== */
:root{--qup-glow:rgba(191,70,255,.36);--qup-pink:rgba(255,61,199,.30);}

body{
 background:
 radial-gradient(ellipse at 30% -10%,rgba(155,62,255,.13),transparent 38%),
 radial-gradient(ellipse at 85% 35%,rgba(60,65,220,.09),transparent 38%),
 #050817!important;
}

.room-main,.host-main,.party-main,main{
 gap:14px!important;
}

.video-shell,.guest-video-shell{
 border-color:rgba(157,92,255,.55)!important;
 box-shadow:
  0 0 0 1px rgba(255,65,207,.08),
  0 0 30px rgba(138,69,255,.13),
  0 18px 48px rgba(0,0,0,.28)!important;
}

#stageActions,#guestStageActions,
.stage-actions,.guest-stage-actions{
 min-height:76px!important;
 border:1px solid rgba(113,128,184,.22)!important;
 border-top:0!important;
 border-radius:0 0 15px 15px!important;
 overflow:hidden!important;
 background:linear-gradient(180deg,rgba(10,13,34,.98),rgba(7,10,27,.99))!important;
 box-shadow:0 14px 35px rgba(0,0,0,.20)!important;
}

#flameBtn,#guestFlameBtn,#skipBtn,#guestSkipBtn,
.stage-action,.guest-stage-action{
 background:transparent!important;
 min-height:76px!important;
 transition:.18s ease!important;
}
#flameBtn:hover,#guestFlameBtn:hover,#skipBtn:hover,#guestSkipBtn:hover{
 background:rgba(148,70,255,.08)!important;
 transform:translateY(-1px);
}
#flameBtn.active,#guestFlameBtn.active{
 background:radial-gradient(circle at center,rgba(255,52,177,.18),transparent 68%)!important;
 box-shadow:inset 0 -2px 0 rgba(255,76,208,.60)!important;
}

#queue,.up-next,.up-next-card,.queue-panel{
 background:linear-gradient(145deg,rgba(10,14,36,.98),rgba(7,10,28,.99))!important;
 border-color:rgba(118,132,188,.22)!important;
 box-shadow:0 12px 35px rgba(0,0,0,.16)!important;
}

.chat-panel,.chat-card,.comments-panel{
 background:
 radial-gradient(circle at 88% 45%,rgba(130,48,255,.09),transparent 38%),
 linear-gradient(180deg,#0b1028,#080c20)!important;
 border-color:rgba(119,130,183,.25)!important;
 box-shadow:-12px 0 35px rgba(0,0,0,.16)!important;
}

#commentForm,#guestCommentForm,
.chat-form,.comment-form{
 background:rgba(14,19,44,.96)!important;
 border:1px solid rgba(145,100,226,.32)!important;
 border-radius:18px!important;
 box-shadow:0 0 22px rgba(135,64,255,.08)!important;
}

.search-box,.song-search,.search-wrap{
 background:rgba(9,13,33,.95)!important;
 border-color:rgba(117,134,194,.30)!important;
 border-radius:13px!important;
}

.video-corner-badge{
 border-color:rgba(224,92,255,.55)!important;
 box-shadow:0 0 15px rgba(211,64,255,.18)!important;
}


/* =========================================================
   QU3 VISIBLE ROOM REDESIGN — actual host/party selectors
   ========================================================= */
.live-room-page{
  background:
    radial-gradient(900px 500px at 28% 0%,rgba(146,55,255,.18),transparent 62%),
    radial-gradient(700px 520px at 90% 34%,rgba(255,47,198,.08),transparent 70%),
    #050713!important;
}
.live-nav{
  height:76px!important;
  padding:0 22px!important;
  background:rgba(5,7,19,.82)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(123,104,196,.20)!important;
}
.live-party-meta{
  padding:8px 12px!important;
  border:1px solid rgba(132,115,201,.22)!important;
  border-radius:999px!important;
  background:rgba(14,17,39,.78)!important;
}
.live-dot{background:#52f2b5!important;box-shadow:0 0 14px #52f2b5!important}

.live-room-shell{
  width:min(1540px,100%)!important;
  padding:12px 18px 20px!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  gap:14px!important;
}
.live-stage{
  gap:0!important;
  padding:14px!important;
  border:1px solid rgba(174,84,255,.50)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(11,13,34,.97),rgba(7,9,25,.98))!important;
  box-shadow:
    0 0 0 1px rgba(255,63,205,.05),
    0 0 45px rgba(145,56,255,.13),
    0 24px 70px rgba(0,0,0,.32)!important;
}
.stage-heading{
  min-height:72px!important;
  padding:4px 10px 12px!important;
  align-items:center!important;
}
.stage-song-line b{
  font-size:clamp(22px,2.25vw,34px)!important;
  letter-spacing:-.4px!important;
}
.stage-now-meta{
  margin-top:5px!important;
  color:#aab2cc!important;
}
.video-shell,.guest-video-shell{
  border-radius:14px 14px 0 0!important;
  border:1px solid rgba(121,134,192,.32)!important;
  box-shadow:0 0 30px rgba(122,67,255,.13)!important;
}
.video-corner-badge{
  top:12px!important;left:12px!important;
  border:1px solid rgba(238,90,255,.48)!important;
  background:rgba(7,8,20,.80)!important;
  box-shadow:0 0 18px rgba(225,67,255,.17)!important;
}

/* Attached, compact interaction bar */
.stage-stats.action-stats{
  min-height:82px!important;
  height:82px!important;
  grid-template-rows:82px!important;
  padding:0!important;
  margin:0!important;
  border-radius:0 0 14px 14px!important;
  border:1px solid rgba(121,134,192,.28)!important;
  border-top:0!important;
  background:linear-gradient(180deg,#0a0e23,#080b1d)!important;
  overflow:hidden!important;
}
.stage-stats.action-stats > *{
  min-height:82px!important;
  height:82px!important;
  padding:6px!important;
  background:transparent!important;
}
.action-stats strong,.action-stats .stat-action strong{
  font-size:25px!important;
}
.action-stats span,.action-stats .stat-action>span{
  font-size:8px!important;
  letter-spacing:1.5px!important;
}
.action-stats .flame-stat.voted,
.action-stats .flame-stat:disabled{
  background:
    radial-gradient(circle at 50% 60%,rgba(255,53,170,.22),transparent 62%)!important;
  box-shadow:inset 0 -2px 0 rgba(255,70,208,.65)!important;
}
.action-stats .stat-tile+*,.action-stats .stat-action+*{
  border-left:1px solid rgba(116,129,181,.20)!important;
}

/* Up Next becomes a sleek continuation of the stage */
.up-next-card{
  margin-top:12px!important;
  padding:13px 15px!important;
  border-radius:15px!important;
  border:1px solid rgba(118,132,188,.25)!important;
  background:linear-gradient(145deg,rgba(10,14,35,.96),rgba(7,10,27,.98))!important;
  box-shadow:none!important;
}
.up-next-card .host-search-head{
  margin-bottom:8px!important;
}
.up-next-card .host-search-head h2{
  font-size:18px!important;
}
.up-next-list .coming-next{
  background:rgba(18,22,47,.72)!important;
  border:1px solid rgba(117,131,185,.18)!important;
  border-radius:12px!important;
}

/* Search feels like the mockup's wide add-to-party control */
.host-song-search{
  margin-top:10px!important;
  padding:13px 15px!important;
  border:1px solid rgba(118,132,188,.25)!important;
  background:linear-gradient(145deg,rgba(10,14,35,.96),rgba(7,10,27,.98))!important;
  border-radius:15px!important;
}
.host-search-bar{
  gap:9px!important;
}
.host-search-bar input{
  min-height:46px!important;
  border-radius:12px!important;
  background:#0d122b!important;
  border:1px solid rgba(119,136,202,.35)!important;
}
.host-search-bar button{
  min-height:46px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#784cff,#e83bd0)!important;
  box-shadow:0 0 24px rgba(163,61,255,.18)!important;
}

/* Chat becomes its own tall party panel */
.live-chat-panel{
  min-height:calc(100vh - 108px)!important;
  border-radius:18px!important;
  border:1px solid rgba(119,132,187,.28)!important;
  background:
    radial-gradient(circle at 85% 45%,rgba(133,48,255,.10),transparent 40%),
    linear-gradient(180deg,#0b1028,#080c20)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.24)!important;
}
.chat-head{
  padding:17px 19px!important;
  background:rgba(12,16,38,.72)!important;
}
.chat-head h2{font-size:22px!important}
.chat-messages{padding:15px 18px!important}
.chat-message{padding:10px 0!important}
.chat-avatar{
  box-shadow:0 0 20px rgba(147,68,255,.25)!important;
}
.chat-compose{
  margin:12px!important;
  padding:5px!important;
  border:1px solid rgba(139,111,215,.34)!important;
  border-radius:18px!important;
  background:#0e142e!important;
}
.chat-compose input{
  border:0!important;
  background:transparent!important;
  min-height:42px!important;
}
.chat-compose button{
  width:42px!important;height:42px!important;
  border-radius:13px!important;
  box-shadow:0 0 20px rgba(170,64,255,.22)!important;
}

/* Hide any obsolete left queue panel if an older room file still contains it. */
.live-queue-panel{display:none!important}

@media(max-width:900px){
  .live-room-shell{grid-template-columns:1fr!important;padding:10px!important}
  .live-stage{padding:9px!important;border-radius:15px!important}
  .live-chat-panel{min-height:430px!important}
  .stage-heading{min-height:62px!important;padding:3px 5px 9px!important}
}


/* =========================================================
   QU3 STAGE FRAME — VIDEO + INTERACTIONS ONLY
   ========================================================= */
.live-stage{
  border-color:transparent!important;
  box-shadow:none!important;
  background:transparent!important;
}

/* One visual frame around video + interaction controls only */
.video-shell,.guest-video-shell{
  position:relative!important;
  z-index:2;
  overflow:visible!important;
  border:2px solid rgba(161,73,255,.68)!important;
  border-bottom:0!important;
  border-radius:16px 16px 0 0!important;
  box-shadow:0 0 22px rgba(133,62,255,.18)!important;
}
.video-shell iframe,.guest-video-shell iframe{
  display:block;
  border-radius:14px 14px 0 0!important;
  overflow:hidden;
}

/* Make the controls a substantial part of the stage */
.stage-stats.action-stats{
  position:relative!important;
  z-index:3;
  height:108px!important;
  min-height:108px!important;
  grid-template-rows:108px!important;
  border:2px solid rgba(161,73,255,.68)!important;
  border-top:1px solid rgba(161,73,255,.32)!important;
  border-radius:0 0 16px 16px!important;
  background:
    radial-gradient(circle at 17% 100%,rgba(191,45,255,.13),transparent 35%),
    linear-gradient(180deg,#0b0f27,#070a1d)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.25)!important;
}
.stage-stats.action-stats > *{
  height:108px!important;
  min-height:108px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  cursor:pointer;
}
.action-stats strong,.action-stats .stat-action strong{
  font-size:31px!important;
  line-height:1!important;
  text-shadow:0 0 16px rgba(202,81,255,.18);
}
.action-stats span,.action-stats .stat-action>span{
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:1.8px!important;
}
.flame-stat,.skip-stat{
  transition:transform .16s ease,background .2s ease,box-shadow .2s ease!important;
}
.flame-stat:hover,.skip-stat:hover{
  transform:translateY(-2px) scale(1.025)!important;
  background:radial-gradient(circle,rgba(161,61,255,.15),transparent 68%)!important;
}
.flame-stat:active,.skip-stat:active{
  transform:scale(.96)!important;
}

/* Active Flame button */
.flame-stat.qup-flaming{
  background:
    radial-gradient(circle at 50% 70%,rgba(255,49,157,.28),transparent 55%),
    radial-gradient(circle at 50% 90%,rgba(255,135,32,.15),transparent 45%)!important;
  box-shadow:inset 0 -3px 0 rgba(255,67,192,.70)!important;
}
.flame-stat.qup-flaming strong{
  animation:qupFlameIcon .72s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 7px #ff4fc7) drop-shadow(0 0 14px #ff7a28);
}
@keyframes qupFlameIcon{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-3px) scale(1.13)}
}

/* Decorative flame perimeter. Never intercepts YouTube controls. */
.qup-flame-ring{
  position:absolute;
  z-index:1;
  left:-9px;right:-9px;top:-9px;bottom:-117px;
  border-radius:22px;
  pointer-events:none!important;
  opacity:0;
  transition:opacity .2s ease;
}
.qup-flame-ring.on{opacity:1}
.qup-flame-ring::before{
  content:"";
  position:absolute;inset:0;
  border:3px solid rgba(255,62,188,.88);
  border-radius:inherit;
  box-shadow:
    0 0 8px rgba(255,69,197,.95),
    0 0 20px rgba(182,56,255,.88),
    0 0 38px rgba(255,94,42,.50),
    0 0 58px rgba(150,48,255,.32);
  animation:qupRingPulse .7s ease-in-out infinite alternate;
}
@keyframes qupRingPulse{
  from{filter:brightness(1);transform:scale(1)}
  to{filter:brightness(1.42);transform:scale(1.003)}
}

/* Small rising streak/flame particles OUTSIDE the frame */
.qup-flame-particle{
  position:absolute;
  z-index:5;
  pointer-events:none!important;
  width:8px;height:20px;
  border-radius:60% 40% 65% 35%;
  background:linear-gradient(to top,rgba(255,45,154,0),#ff4ab8 38%,#ff9a32 72%,#fff0a6);
  filter:drop-shadow(0 0 6px rgba(255,72,185,.95));
  opacity:0;
  animation:qupFlameRise 900ms ease-out forwards;
}
@keyframes qupFlameRise{
  0%{opacity:0;transform:translateY(7px) scale(.55) rotate(-5deg)}
  18%{opacity:1}
  100%{opacity:0;transform:translateY(-34px) scale(1.18) rotate(8deg)}
}


/* ===== QU3 ORANGE FLAME BURST ===== */
/* Keep the interaction centered on the icon/count, hide FLAME and SKIP labels only. */
.flame-stat > span:last-child,
.skip-stat > span:last-child{
  display:none!important;
}
.flame-stat,.skip-stat{
  gap:0!important;
}

/* Orange perimeter burst lasts a few seconds, then fades away. */
.qup-flame-ring.burst-orange{
  opacity:1!important;
  animation:qupOrangeRingLife 3.2s ease-out forwards!important;
}
.qup-flame-ring.burst-orange::before{
  border-color:#ff8a1f!important;
  box-shadow:
    0 0 7px rgba(255,196,76,.98),
    0 0 16px rgba(255,132,25,.98),
    0 0 30px rgba(255,82,10,.86),
    0 0 52px rgba(255,120,0,.55)!important;
  animation:qupOrangePulse .24s ease-in-out infinite alternate!important;
}
@keyframes qupOrangePulse{
  from{filter:brightness(1);transform:scale(1)}
  to{filter:brightness(1.55);transform:scale(1.004)}
}
@keyframes qupOrangeRingLife{
  0%{opacity:0}
  8%{opacity:1}
  72%{opacity:1}
  100%{opacity:0}
}


/* ===== QU3 CHAT ALIGN + BIGGER INTERACTIONS ===== */

/* Start Party Chat at the same vertical line as the YouTube player.
   The stage heading is 72px plus its lower spacing in this desktop layout. */
@media (min-width:901px){
  .live-chat-panel{
    margin-top:86px!important;
  }
}

/* Bigger interaction icons/numbers and queue label */
.stage-stats.action-stats{
  height:116px!important;
  min-height:116px!important;
  grid-template-rows:116px!important;
}
.stage-stats.action-stats > *{
  height:116px!important;
  min-height:116px!important;
}
.action-stats strong,
.action-stats .stat-action strong{
  font-size:39px!important;
  line-height:1!important;
}
.action-stats span,
.action-stats .stat-action > span{
  font-size:12px!important;
  letter-spacing:1.6px!important;
  font-weight:900!important;
}
.flame-stat strong,
.skip-stat strong{
  font-size:42px!important;
}


/* ===== QU3 CHAT = VIDEO HEIGHT ===== */
@media (min-width:951px){
  .unified-room-shell{
    align-items:start!important;
  }
  .unified-room-shell .live-chat-panel{
    /* stage usable width = shell - chat - gap - stage horizontal padding */
    height:calc((min(1540px, 100vw - 36px) - 360px - 14px - 28px) * 9 / 16)!important;
    min-height:0!important;
    max-height:none!important;
    margin-top:86px!important;
    overflow:hidden!important;
  }
  .unified-room-shell .chat-messages{
    min-height:0!important;
    max-height:none!important;
  }
}
/* Search results must never change chat height. */
.host-search-results{max-height:235px!important;overflow:auto!important;}


/* =========================================================
   QU3 PLUG.DJ-INSPIRED ROOM BAR
   ========================================================= */
.qup-room-bar.live-nav{
  height:72px!important;
  min-height:72px!important;
  padding:0 18px!important;
  display:grid!important;
  grid-template-columns:auto minmax(150px,240px) minmax(280px,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  border-bottom:1px solid rgba(143,72,255,.24)!important;
  background:rgba(5,8,23,.96)!important;
}
.qup-room-bar .logo{font-size:26px!important}
.qup-room-block,.qup-now-block{min-width:0;display:flex;flex-direction:column;justify-content:center}
.qup-room-block>b{
  color:#fff;font-size:14px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.qup-room-block small,.qup-now-block small{
  margin-top:3px;color:rgba(220,224,255,.52);font-size:10px;text-transform:lowercase
}
.qup-room-block small strong,.qup-now-block small strong{color:rgba(255,255,255,.84);font-weight:750}
.qup-now-block{
  padding-left:18px!important;
  border-left:1px solid rgba(255,255,255,.09)!important;
}
#navNowTitle{
  display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#fff;font-size:clamp(18px,1.65vw,27px)!important;font-weight:900!important;line-height:1.08!important
}
.qup-room-bar .live-nav-actions{display:flex!important;align-items:center!important;gap:10px!important}
.qup-listening{
  display:inline-flex;align-items:center;gap:5px;
  color:rgba(232,235,255,.70);font-size:11px;font-weight:750;white-space:nowrap
}
.qup-listening b{color:#fff;font-size:12px}
.qup-listening .live-dot{margin:0!important}

/* Song information now lives in the top room bar. */
.stage-heading{display:none!important}

/* Party Chat starts with the video and is sized by JS to video + interactions.
   Searching / expanding results cannot stretch it. */
@media (min-width:951px){
  .unified-room-shell{align-items:start!important}
  .unified-room-shell .live-chat-panel{
    margin-top:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  .live-chat-panel .chat-messages{min-height:0!important;overflow-y:auto!important}
}

/* Pinned chat strip */
.qup-pinned-message{
  display:none;
  flex:0 0 auto;
  margin:0 10px 8px;
  padding:10px 12px;
  border:1px solid rgba(170,79,255,.46);
  border-radius:11px;
  background:linear-gradient(90deg,rgba(120,43,195,.20),rgba(255,105,31,.08));
  box-shadow:0 0 18px rgba(153,65,255,.10);
  color:#f5efff;
  font-size:12px;
  line-height:1.35;
}
.qup-pinned-message.show{display:block}
.qup-pinned-message::before{content:"📌 ";}

/* No-song state: flame is visibly unavailable. */
.flame-stat:disabled,.flame-stat.qup-disabled{
  opacity:.32!important;
  cursor:not-allowed!important;
  filter:grayscale(.75)!important;
  transform:none!important;
}

/* Browser search X returns the search card to its clean original state. */
.host-search-results:empty{display:none!important}
.host-song-search.qup-search-idle .host-search-results,
.host-song-search.qup-search-idle .results{display:none!important}

@media(max-width:950px){
  .qup-room-bar.live-nav{
    grid-template-columns:auto minmax(105px,1fr) auto!important;
    gap:10px!important;
  }
  .qup-now-block{grid-column:1/-1;order:4;border-left:0!important;padding:7px 0 9px!important;border-top:1px solid rgba(255,255,255,.07)!important}
  .qup-room-bar.live-nav{height:auto!important;min-height:72px!important}
  .qup-room-bar .live-nav-actions .room-pill{display:none!important}
}


/* =========================================================
   QU3 ROOM SETTINGS + QUEUE LOCK + CHAT TOGGLE
   ========================================================= */
.qup-settings-btn{cursor:pointer!important;font:inherit!important}
.qup-room-settings{
  position:absolute!important;
  z-index:1000!important;
  top:62px!important;
  right:18px!important;
  width:310px!important;
  padding:14px!important;
  border:1px solid rgba(165,77,255,.42)!important;
  border-radius:15px!important;
  background:#0a0e23!important;
  box-shadow:0 18px 55px rgba(0,0,0,.55),0 0 24px rgba(145,58,255,.15)!important;
}
.qup-room-settings[hidden]{display:none!important}
.qup-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.qup-settings-head>b{font-size:14px;color:#fff}
.qup-settings-head button{border:0;background:transparent;color:#aeb4d7;font-size:22px;cursor:pointer}
.qup-setting-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px;border-radius:12px;background:rgba(255,255,255,.035);cursor:pointer
}
.qup-setting-row span{display:flex;flex-direction:column;gap:3px}
.qup-setting-row b{font-size:12px;color:#fff}
.qup-setting-row small{font-size:10px;color:rgba(224,228,255,.52)}
.qup-setting-row input{width:20px;height:20px;accent-color:#a84cff}

/* Three-line chat control */
.qup-chat-toggle{
  width:34px;height:34px;border:0;border-radius:9px;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;transition:background .15s ease
}
.qup-chat-toggle:hover{background:rgba(161,73,255,.12)}
.qup-chat-toggle span{display:block;width:17px;height:2px;border-radius:3px;background:#d9dcf8;transition:.18s ease}

/* Chat spans the exact video + interaction height. JS also locks exact pixels. */
@media(min-width:951px){
  .unified-room-shell .live-chat-panel{
    margin-top:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  .unified-room-shell.qup-chat-hidden{
    grid-template-columns:minmax(0,1120px)!important;
    justify-content:center!important;
  }
  .unified-room-shell.qup-chat-hidden .live-chat-panel{display:none!important}
  .unified-room-shell.qup-chat-hidden .live-stage{
    width:100%!important;max-width:1120px!important;margin:0 auto!important
  }
}
/* Floating restore button when chat is hidden */
.qup-chat-restore{
  position:fixed;right:18px;top:86px;z-index:999;
  width:40px;height:40px;border:1px solid rgba(165,77,255,.42);border-radius:11px;
  background:#0a0e23;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer
}
.qup-chat-restore span{width:18px;height:2px;background:#fff;border-radius:2px}
.qup-chat-restore.show{display:flex}


/* ===== ACTUAL PARTY CHAT FIX ===== */
.chat-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.chat-live-dot{display:none!important}

/* This replaces the old pink dot with the requested 3-line control. */
.qup-chat-toggle{
  display:flex!important;
  width:38px!important;height:38px!important;
  flex:0 0 38px!important;
  padding:0!important;
  border:0!important;
  border-radius:10px!important;
  background:rgba(169,65,255,.10)!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  cursor:pointer!important;
}
.qup-chat-toggle span{
  display:block!important;
  width:19px!important;height:2px!important;
  border-radius:3px!important;
  background:#ff4fd8!important;
  box-shadow:0 0 7px rgba(255,79,216,.55)!important;
}

/* Chat is exactly video + interaction bar tall. JS supplies exact px height. */
@media(min-width:951px){
  .unified-room-shell .live-chat-panel{
    margin-top:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    align-self:start!important;
  }
  .unified-room-shell.qup-chat-hidden{
    grid-template-columns:minmax(640px,1120px)!important;
    justify-content:center!important;
  }
  .unified-room-shell.qup-chat-hidden .live-chat-panel{display:none!important}
  .unified-room-shell.qup-chat-hidden .live-stage{
    width:100%!important;
    max-width:1120px!important;
    margin-inline:auto!important;
  }
}


/* =========================================================
   QU3 DEFINITIVE CHAT HEIGHT
   Chat top = video top; chat bottom = interaction bar bottom.
   ========================================================= */
@media(min-width:951px){
  .unified-room-shell{
    align-items:start!important;
  }
  .unified-room-shell .live-stage{
    min-width:0!important;
  }
  .unified-room-shell .live-chat-panel{
    align-self:start!important;
    margin-top:0!important;
    height:var(--qup-stage-media-height, 650px)!important;
    min-height:var(--qup-stage-media-height, 650px)!important;
    max-height:var(--qup-stage-media-height, 650px)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .unified-room-shell .live-chat-panel .chat-messages{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
  }
  .unified-room-shell .live-chat-panel .chat-compose{
    flex:0 0 auto!important;
  }
}

/* ===== QU3 MAN LIST ===== */
.qup-man-list{margin-top:10px;padding:12px;border-radius:12px;background:rgba(255,255,255,.035)}
.qup-man-list-head{display:flex;flex-direction:column;gap:2px;margin-bottom:9px}
.qup-man-list-head b{font-size:12px;color:#fff}
.qup-man-list-head small,.qup-muted{font-size:10px;color:rgba(224,228,255,.52)}
.qup-man-list-body{display:flex;flex-direction:column;gap:7px;max-height:190px;overflow:auto}
.qup-man-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.035);font-size:11px}
.qup-man-row strong{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qup-man-row span{font-size:9px;color:#9ea6cb}

.qup-old-up-next{display:none!important}
.qup-bottom-queue-bar{width:100%;min-height:58px;margin-top:12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;border:1px solid rgba(137,71,255,.28);border-radius:13px;overflow:hidden;background:rgba(7,11,30,.96)}
.qup-bottom-add{height:58px;padding:0 18px;display:flex;align-items:center;gap:10px;border:0;border-right:1px solid rgba(255,255,255,.08);background:rgba(145,60,255,.15);color:#fff;cursor:pointer}
.qup-bottom-add span{color:#db62ff;font-size:18px}.qup-bottom-add b{font-size:11px}
.qup-bottom-next{min-width:0;padding:8px 15px;display:flex;align-items:baseline;gap:10px;cursor:pointer}
.qup-bottom-next small{font-size:8px;font-weight:900;letter-spacing:.2em;color:#9299bc}
.qup-bottom-next strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:12px}
.qup-bottom-next span{color:#858dab;font-size:10px}.qup-bottom-chevron{padding:0 18px;color:#8e96ba;font-size:24px}
.qup-search-drawer{display:none!important}.qup-search-drawer.qup-search-open{display:block!important;margin-top:8px!important}
.qup-search-drawer .host-search-results,.qup-search-drawer .results{max-height:300px!important;overflow-y:auto!important}
@media(max-width:700px){.qup-bottom-queue-bar{grid-template-columns:auto 1fr}.qup-bottom-chevron{display:none}.qup-bottom-next span{display:none}}

.qup-readonly-setting{opacity:.62!important;cursor:default!important}
.qup-readonly-setting input{cursor:not-allowed!important}

/* =========================================================
   QU3 BOTTOM SONG NAV — mirrors the top navbar
   ========================================================= */
.qup-bottom-queue-bar{display:none!important}
.qup-song-dock{
  width:100%;margin-top:0;
  position:relative;
  border-top:1px solid rgba(133,68,255,.28);
  border-bottom:1px solid rgba(133,68,255,.18);
  background:rgba(5,8,23,.97);
  box-shadow:0 -10px 35px rgba(0,0,0,.18);
}
.qup-song-dock-main{
  width:100%;height:66px;padding:0 18px;
  display:grid;grid-template-columns:34px 120px 1px minmax(0,1fr) 34px;
  align-items:center;gap:14px;
  border:0;background:transparent;color:#fff;text-align:left;cursor:pointer;
}
.qup-dock-icon{font-size:19px;color:#d75aff;text-align:center}
.qup-dock-add,.qup-dock-next{min-width:0;display:flex;flex-direction:column;gap:2px}
.qup-dock-add small,.qup-dock-next small{font-size:8px;font-weight:900;letter-spacing:.18em;color:#7f87aa}
.qup-dock-add b{font-size:12px}
.qup-dock-next b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qup-dock-next em{font-size:9px;color:#7f87aa;font-style:normal}
.qup-dock-divider{height:32px;background:rgba(255,255,255,.09)}
.qup-dock-arrow{font-size:20px;color:#8f97b9;text-align:center;transition:transform .22s ease}
.qup-song-dock.open .qup-dock-arrow{transform:rotate(180deg)}
.qup-song-dock-panel{
  max-height:0;opacity:0;overflow:hidden;
  border-top:0 solid rgba(255,255,255,.07);
  transition:max-height .28s ease,opacity .18s ease,padding .28s ease,border-width .2s ease;
  padding:0 18px;background:rgba(6,9,25,.985);
}
.qup-song-dock.open .qup-song-dock-panel{
  max-height:430px;opacity:1;padding:14px 18px 18px;border-top-width:1px;overflow-y:auto;
}
/* Existing search UI is physically moved into this expandable dock. */
.qup-song-dock-panel .qup-search-drawer{
  display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;
}
.qup-song-dock-panel .host-search-results,.qup-song-dock-panel .results{
  max-height:300px!important;overflow-y:auto!important;
}
@media(max-width:700px){
 .qup-song-dock-main{grid-template-columns:28px 86px 1px minmax(0,1fr) 25px;padding:0 10px;gap:8px}
 .qup-dock-next em{display:none}
}

/* =========================================================
   QU3 FULL-WIDTH BOTTOM SONG NAV
   Breaks out of the centered stage width and spans the room viewport.
   ========================================================= */
.qup-song-dock{
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  box-sizing:border-box!important;
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
}
.qup-song-dock-main{
  width:min(100%,1440px)!important;
  max-width:1440px!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
  padding-left:28px!important;
  padding-right:28px!important;
}
.qup-song-dock-panel{
  width:min(100%,1440px)!important;
  max-width:1440px!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
}
@media(max-width:700px){
  .qup-song-dock-main{padding-left:12px!important;padding-right:12px!important}
}


/* =========================================================
   QU3 FIXED BOTTOM SONG NAV
   Stays pinned to viewport just like the top navbar.
   ========================================================= */
.qup-song-dock{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  z-index:950!important;
  width:100vw!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
  background:rgba(5,8,23,.985)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 -10px 35px rgba(0,0,0,.42)!important;
}

/* Expansion opens upward from the fixed bar instead of pushing the page. */
.qup-song-dock-panel{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:66px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:rgba(6,9,25,.99)!important;
  box-shadow:0 -18px 45px rgba(0,0,0,.42)!important;
}
.qup-song-dock.open .qup-song-dock-panel{
  max-height:min(430px,55vh)!important;
  overflow-y:auto!important;
}

/* Keep normal room content from disappearing underneath the fixed navbar. */
body{
  padding-bottom:78px!important;
}

@media(max-width:700px){
  body{padding-bottom:74px!important}
  .qup-song-dock-panel{bottom:66px!important}
}

/* =========================================================
   QU3 MOBILE ROOM — fixed top + bottom navigation
   ========================================================= */
@media (max-width:700px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body.live-room-page{padding-top:64px!important;padding-bottom:76px!important;min-height:100dvh!important}

  /* Top room navbar stays visible and uses one compact row. */
  .qup-room-bar.live-nav{
    position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:1100!important;
    width:100%!important;height:64px!important;min-height:64px!important;
    padding:0 12px!important;display:grid!important;
    grid-template-columns:54px minmax(0,1fr) auto!important;gap:9px!important;align-items:center!important;
    background:rgba(5,7,19,.97)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;
  }
  .qup-room-bar .logo{font-size:25px!important;letter-spacing:-2px!important;min-width:0!important}
  .qup-room-block{min-width:0!important;overflow:hidden!important}
  .qup-room-block b{display:block!important;font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .qup-room-block small{display:block!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .qup-now-block{display:none!important}
  .qup-room-bar .live-nav-actions{margin:0!important;gap:0!important;min-width:0!important}
  .qup-room-bar .qup-listening{font-size:9px!important;white-space:nowrap!important;padding:7px 8px!important}
  .qup-room-bar .live-nav-actions .room-pill{display:none!important}

  /* Main room must always render below the top bar. */
  .live-room-shell.unified-room-shell{
    display:block!important;width:100%!important;max-width:none!important;min-height:0!important;
    margin:0!important;padding:10px 10px 20px!important;
  }
  .live-stage{display:flex!important;width:100%!important;min-width:0!important;gap:8px!important}
  .stage-heading{min-height:42px!important;padding:0 2px!important;gap:8px!important}
  .stage-now-meta{min-width:0!important}
  .stage-song-line{min-width:0!important}
  .stage-song-line b{font-size:15px!important;max-width:68vw!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .stage-song-line span{font-size:9px!important}
  .stage-actions{min-height:0!important;flex:0 0 auto!important}
  #goLiveBtn{display:none!important}
  #syncBadge{font-size:8px!important;padding:6px 7px!important}

  /* Full-width responsive player. */
  .video-shell,.guest-video-shell{
    display:block!important;width:100%!important;height:auto!important;min-height:0!important;
    aspect-ratio:16/9!important;border-radius:12px 12px 0 0!important;
  }
  .video-shell #guestPlayer,.video-shell iframe,.guest-video-shell iframe{width:100%!important;height:100%!important}
  .video-corner-badge{top:8px!important;left:8px!important;font-size:7px!important;padding:5px 6px!important}

  /* Interaction buttons remain large enough to tap. */
  .stage-stats.action-stats{grid-template-rows:68px!important;min-height:68px!important;padding:0!important;border-radius:0 0 12px 12px!important;overflow:hidden!important}
  .stage-stats.action-stats>*{height:68px!important;min-height:68px!important;padding:5px 2px!important}
  .stage-stats.action-stats strong{font-size:16px!important}
  .stage-stats.action-stats span{font-size:7px!important;letter-spacing:.5px!important}

  /* Chat is normal page content on phones instead of a desktop-height panel. */
  .unified-room-shell .live-chat-panel{
    display:flex!important;width:100%!important;min-height:300px!important;height:330px!important;max-height:330px!important;
    margin:10px 0 0!important;border-radius:14px!important;overflow:hidden!important;
  }
  .live-chat-panel .chat-head{padding:12px 14px!important}
  .live-chat-panel .chat-messages{min-height:0!important;padding:10px!important}
  .live-chat-panel .chat-compose{padding:8px!important}

  /* Bottom queue navbar is always pinned and readable. */
  .qup-song-dock{
    display:block!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:1200!important;
    width:100%!important;height:66px!important;margin:0!important;
  }
  .qup-song-dock-main{
    display:grid!important;width:100%!important;height:66px!important;
    grid-template-columns:25px 70px 1px minmax(0,1fr) 22px!important;gap:7px!important;
    padding:0 9px!important;
  }
  .qup-dock-icon{font-size:17px!important}
  .qup-dock-add small,.qup-dock-next small{font-size:7px!important}
  .qup-dock-add b{font-size:11px!important}
  .qup-dock-next b{font-size:11px!important;max-width:100%!important}
  .qup-dock-next em{display:none!important}
  .qup-dock-arrow{font-size:17px!important}
  .qup-song-dock-panel{bottom:66px!important;max-height:0!important;padding-left:10px!important;padding-right:10px!important}
  .qup-song-dock.open .qup-song-dock-panel{max-height:min(62dvh,520px)!important;padding:12px 10px 14px!important}
  .qup-song-dock-panel .host-search-bar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important}
  .qup-song-dock-panel .host-search-bar input{min-width:0!important;font-size:16px!important}
  .qup-song-dock-panel .host-search-results,.qup-song-dock-panel .results{max-height:45dvh!important}

  .qup-room-settings{position:fixed!important;top:70px!important;left:10px!important;right:10px!important;width:auto!important;max-height:70dvh!important;overflow:auto!important}
}

/* QU3 2026-09-15 final room fixes */
.qup-ban-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
.qup-ban-row>div{min-width:0;display:grid;gap:3px}.qup-ban-row small{color:#7f89a8;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qup-unban-btn{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:1px solid #ffffff26;background:#151a2d;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.qup-unban-btn:hover{background:#2a1731;border-color:#ff5d9e}
@media(max-width:700px){.qup-room-settings{left:10px!important;right:10px!important;width:auto!important;max-width:none!important;top:76px!important;max-height:calc(100dvh - 96px)!important;overflow:auto!important}.qup-song-dock{left:0!important;right:0!important;width:100%!important;max-width:none!important}.qup-room-bar.live-nav{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:1000!important}.live-room-page{padding-top:72px!important;padding-bottom:74px!important}}

/* QU3 mobile audio unlock */
.qup-listen-overlay{position:absolute;inset:0;z-index:20;display:none;place-items:center;align-content:center;gap:10px;background:rgba(5,7,19,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.qup-listen-overlay.hidden{display:none!important}
.qup-start-listening{font-size:16px!important;padding:13px 22px!important;border-radius:999px!important;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.qup-listen-overlay small{color:#ddd;font-size:11px;font-weight:700}
@media(max-width:800px){.qup-listen-overlay{display:grid}.qup-listen-overlay.hidden{display:none!important}}


/* ===== QU3 2026-09-15 MOBILE REAL FIX ===== */
@keyframes qupFlameIconPop{
  0%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 0 rgba(255,105,35,0))}
  30%{transform:scale(1.38) rotate(-7deg);filter:drop-shadow(0 0 12px rgba(255,105,35,.95))}
  58%{transform:scale(.94) rotate(5deg);filter:drop-shadow(0 0 18px rgba(255,52,171,.75))}
  100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 0 rgba(255,105,35,0))}
}
.flame-stat strong.qup-flame-icon-pop{animation:qupFlameIconPop .55s cubic-bezier(.2,.8,.2,1)!important;transform-origin:center!important}

/* Never place an audio prompt over the video. */
.qup-listen-overlay{display:none!important}

@media(max-width:700px){
  /* Remove the leftover stage padding/gap below the interaction strip. */
  .live-stage{padding:8px 8px 0!important;gap:0!important}
  .live-room-shell.unified-room-shell{padding:6px 8px 12px!important}
  .stage-stats.action-stats{margin-bottom:0!important}

  /* On mobile, hiding chat collapses its body but leaves its header/control in place. */
  .unified-room-shell.qup-chat-hidden .live-chat-panel{
    display:flex!important;height:56px!important;min-height:56px!important;max-height:56px!important;
    margin:4px 0 0!important;overflow:hidden!important
  }
  .unified-room-shell.qup-chat-hidden .live-chat-panel .chat-messages,
  .unified-room-shell.qup-chat-hidden .live-chat-panel .chat-compose,
  .unified-room-shell.qup-chat-hidden .live-chat-panel .qup-pinned-message,
  .unified-room-shell.qup-chat-hidden .live-chat-panel .join-mini{display:none!important}
  .unified-room-shell.qup-chat-hidden .live-chat-panel .chat-head{height:56px!important;min-height:56px!important;border-bottom:0!important}
  .qup-chat-restore{display:none!important}
  .unified-room-shell.qup-chat-hidden #chatToggleBtn span:nth-child(1){transform:translateY(6px) rotate(45deg)!important}
  .unified-room-shell.qup-chat-hidden #chatToggleBtn span:nth-child(2){opacity:0!important}
  .unified-room-shell.qup-chat-hidden #chatToggleBtn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important}
}


/* ===== QU3 2026-09-15 ROOM POLISH: mobile bar, exact video glow, interactions ===== */
/* The flame perimeter belongs to the VIDEO only — never the interaction bar. */
.video-shell,.guest-video-shell{overflow:visible!important}
.video-shell #player,.video-shell #guestPlayer,.guest-video-shell #guestPlayer,
.video-shell iframe,.guest-video-shell iframe{border-radius:inherit!important;overflow:hidden!important}
.qup-flame-ring{
  inset:-3px!important;
  left:-3px!important;right:-3px!important;top:-3px!important;bottom:-3px!important;
  border-radius:calc(20px + 3px)!important;
}
@media(max-width:700px){
  .qup-flame-ring{border-radius:15px!important}

  /* Compact stage: no dead space after the interaction row. */
  .live-room-shell.unified-room-shell{padding:4px 8px 8px!important}
  .live-stage{padding:0!important;margin:0!important;gap:0!important}
  .stage-heading{margin:0!important;padding:5px 2px 6px!important;min-height:38px!important}
  .stage-stats.action-stats{
    margin:0!important;padding:0!important;height:76px!important;min-height:76px!important;
    grid-template-rows:76px!important;border-radius:0 0 12px 12px!important
  }
  .stage-stats.action-stats>*{height:76px!important;min-height:76px!important;padding:4px 2px!important}
  .action-stats strong,.action-stats .stat-action strong{font-size:27px!important;line-height:1!important}
  .flame-stat strong,.skip-stat strong{font-size:30px!important}
  .action-stats span,.action-stats .stat-action>span{font-size:9px!important;letter-spacing:.8px!important;font-weight:900!important}

  /* Mobile top bar: QU3 | current song | Room Settings. */
  .qup-room-bar.live-nav{
    grid-template-columns:48px minmax(0,1fr) auto!important;
    gap:8px!important;padding:0 10px!important;height:64px!important;min-height:64px!important
  }
  .qup-room-bar .qup-room-block{display:none!important}
  .qup-room-bar .qup-now-block{display:block!important;min-width:0!important;overflow:hidden!important}
  .qup-room-bar .qup-now-block b{display:block!important;font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .qup-room-bar .qup-now-block small{display:block!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#8993b2!important}
  .qup-room-bar .live-nav-actions{display:flex!important;margin:0!important;gap:0!important;align-items:center!important}
  .qup-room-bar .qup-listening{display:none!important}
  .qup-room-bar .live-nav-actions .room-pill{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-height:38px!important;padding:8px 10px!important;font-size:9px!important;letter-spacing:.4px!important;
    white-space:nowrap!important;border-radius:10px!important
  }
  .qup-room-bar #endBtn{display:none!important}
}

/* ===== QU3 2026-09-15 MOBILE FRAME + TOPBAR ALIGNMENT ===== */
@media(max-width:700px){
  /* Flame perimeter wraps the video AND the attached interaction strip. */
  .video-shell,.guest-video-shell{position:relative!important;overflow:visible!important;z-index:1!important}
  .stage-stats.action-stats{position:relative!important;z-index:2!important}
  .video-shell .qup-flame-ring,.guest-video-shell .qup-flame-ring{
    top:-3px!important;left:-3px!important;right:-3px!important;
    bottom:-79px!important;
    border-radius:15px!important;
    pointer-events:none!important;
    z-index:8!important;
  }
  .video-shell .qup-flame-ring::before,.guest-video-shell .qup-flame-ring::before{
    border-radius:15px!important;
  }

  /* True single-line mobile navbar: logo | centered song | compact settings. */
  .qup-room-bar.live-nav{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) 62px!important;
    align-items:center!important;
    column-gap:6px!important;
    padding:0 8px!important;
  }
  .qup-room-bar .logo{font-size:23px!important;line-height:1!important;align-self:center!important}
  .qup-room-bar .qup-now-block{
    display:flex!important;flex-direction:column!important;justify-content:center!important;
    align-items:center!important;min-width:0!important;height:64px!important;text-align:center!important;
    padding:0 2px!important;
  }
  .qup-room-bar .qup-now-block b{
    width:100%!important;margin:0!important;line-height:15px!important;font-size:12px!important;
    text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  .qup-room-bar .qup-now-block small{
    width:100%!important;margin:1px 0 0!important;line-height:11px!important;font-size:7px!important;text-align:center!important;
  }
  .qup-room-bar .live-nav-actions{width:62px!important;justify-content:flex-end!important;align-items:center!important}
  .qup-room-bar .live-nav-actions .room-pill{
    width:58px!important;min-width:58px!important;min-height:30px!important;height:30px!important;
    padding:4px 5px!important;border-radius:8px!important;font-size:7px!important;line-height:9px!important;
    letter-spacing:0!important;text-align:center!important;white-space:normal!important;
  }
}


/* ===== QU3 MOBILE COMPACT NOW-PLAYING NAV + GEAR — 2026-09-15 ===== */
@media(max-width:700px){
  .qup-room-bar.live-nav{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr) 38px!important;
    align-items:center!important;
    gap:4px!important;
    height:54px!important;
    min-height:54px!important;
    padding:0 10px!important;
  }
  .qup-room-bar>.logo{
    grid-column:1!important;
    align-self:center!important;
    justify-self:start!important;
    margin:0!important;
    font-size:23px!important;
    line-height:1!important;
  }
  .qup-room-bar>.qup-room-block{display:none!important}
  .qup-room-bar>.qup-now-block{
    grid-column:2!important;
    display:flex!important;
    width:100%!important;
    height:54px!important;
    min-width:0!important;
    margin:0!important;
    padding:0 5px!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    text-align:center!important;
  }
  .qup-room-bar>.qup-now-block>b{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:12px!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:center!important;
  }
  .qup-room-bar>.qup-now-block>small{display:none!important}
  .qup-room-bar>.live-nav-actions{
    grid-column:3!important;
    display:flex!important;
    width:38px!important;
    height:54px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:0!important;
  }
  .qup-room-bar>.live-nav-actions>.qup-listening,
  .qup-room-bar>.live-nav-actions>#endBtn{display:none!important}
  .qup-room-bar #roomSettingsBtn{
    display:grid!important;
    place-items:center!important;
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    margin:0!important;
    padding:0!important;
    border-radius:9px!important;
    font-size:16px!important;
    line-height:1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
  }
  /* The song is already represented in the navbar on mobile; remove the oversized duplicate heading. */
  .live-stage>.stage-heading{display:none!important}
}

/* ===== QU3 MOBILE NAV TITLE — HARD FIX 2026-09-15 ===== */
@media(max-width:700px){
  .qup-room-bar.live-nav{grid-template-columns:58px minmax(0,1fr) 34px!important;height:54px!important;min-height:54px!important;padding:0 10px!important;gap:6px!important}
  .qup-room-bar>.qup-now-block{display:flex!important;visibility:visible!important;opacity:1!important;position:static!important;transform:none!important;grid-column:2!important;height:54px!important;align-items:center!important;justify-content:center!important;padding:0 4px!important;border:0!important;overflow:hidden!important}
  .qup-room-bar #navNowTitle{display:block!important;visibility:visible!important;opacity:1!important;position:static!important;width:100%!important;max-width:100%!important;color:#f7f7ff!important;font-size:9px!important;font-weight:800!important;line-height:11px!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .qup-room-bar>.qup-now-block>small{display:none!important}
  .qup-room-bar>.live-nav-actions{grid-column:3!important;width:34px!important;height:54px!important;justify-content:flex-end!important}
  .qup-room-bar #roomSettingsBtn{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;font-size:15px!important;border-radius:8px!important}
}


/* ===== QU3 REAL MOBILE NAV MARKUP FIX ===== */
.mobile-nav-song-title{display:none}
@media(max-width:700px){
  .qup-room-bar.live-nav{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr) 34px!important;
    align-items:center!important;
    height:54px!important;min-height:54px!important;
    padding:0 10px!important;gap:6px!important;
  }
  .qup-room-bar>.logo{grid-column:1!important;grid-row:1!important;margin:0!important;align-self:center!important;justify-self:start!important}
  .qup-room-bar>.mobile-nav-song-title{
    display:block!important;grid-column:2!important;grid-row:1!important;
    min-width:0!important;width:100%!important;margin:0!important;padding:0 4px!important;
    color:#f7f7ff!important;font-size:10px!important;font-weight:800!important;line-height:1.15!important;
    text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    align-self:center!important;
  }
  .qup-room-bar>.qup-now-block,.qup-room-bar>.qup-room-block{display:none!important}
  .qup-room-bar>.live-nav-actions{grid-column:3!important;grid-row:1!important;width:34px!important;height:54px!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important}
  .qup-room-bar #roomSettingsBtn{display:grid!important;place-items:center!important;width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;margin:0!important;padding:0!important;font-size:15px!important;line-height:1!important;border-radius:8px!important}
  .qup-room-bar .qup-listening,.qup-room-bar #endBtn{display:none!important}
  .live-stage>.stage-heading{display:none!important}
}


/* ===== QU3 ROOM LED LIGHT ===== */
:root{--room-led:#8a42ff;--room-led-rgb:138 66 255}
.live-room-page{
  background:
    radial-gradient(circle at 52% -10%,rgb(var(--room-led-rgb) / .25) 0,transparent 36%),
    radial-gradient(circle at 100% 40%,rgb(var(--room-led-rgb) / .12) 0,transparent 34%),#050712!important;
}
.live-room-page .logo,.live-room-page .mini-logo{background:linear-gradient(135deg,#fff 0%,var(--room-led) 48%,color-mix(in srgb,var(--room-led) 72%,white) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.live-room-page .video-shell{border-color:rgb(var(--room-led-rgb) / .58)!important;box-shadow:0 28px 90px #0008,0 0 34px rgb(var(--room-led-rgb) / .28),0 0 72px rgb(var(--room-led-rgb) / .16)!important}
.live-room-page .stage-stats.action-stats{border-color:rgb(var(--room-led-rgb) / .50)!important;box-shadow:0 0 26px rgb(var(--room-led-rgb) / .16)!important}
.live-room-page .video-shell+.stage-stats.action-stats{border-top-color:rgb(var(--room-led-rgb) / .28)!important}
.live-room-page .live-badge,.live-room-page .eyebrow,.live-room-page .section-head span,.live-room-page .song-vibes{color:color-mix(in srgb,var(--room-led) 62%,white)!important}
.live-room-page .live-dot,.live-room-page .chat-live-dot{background:var(--room-led)!important;box-shadow:0 0 14px var(--room-led),0 0 26px rgb(var(--room-led-rgb) / .42)!important}
.live-room-page .chat-avatar,.live-room-page .chat-compose button,.live-room-page .btn:not(.ghost){background:linear-gradient(135deg,var(--room-led),color-mix(in srgb,var(--room-led) 68%,white))!important;box-shadow:0 0 22px rgb(var(--room-led-rgb) / .20)!important}
.live-room-page input:focus,.live-room-page .chat-compose input:focus{border-color:var(--room-led)!important;box-shadow:0 0 0 2px rgb(var(--room-led-rgb) / .12)!important}
.live-room-page .room-pill,.live-room-page .qup-song-dock-main,.live-room-page .up-next-list .song button,.live-room-page .host-search-results .song button{border-color:rgb(var(--room-led-rgb) / .48)!important}
.live-room-page .qup-song-dock-main{box-shadow:0 -8px 30px rgb(var(--room-led-rgb) / .12),0 0 20px rgb(var(--room-led-rgb) / .10)!important}
.live-room-page .flame-stat.is-flamed,.live-room-page .flame-stat.flame-active{box-shadow:inset 0 0 30px rgb(var(--room-led-rgb) / .16),0 0 24px rgb(var(--room-led-rgb) / .20)!important}
.live-room-page .qup-room-settings{border-color:rgb(var(--room-led-rgb) / .48)!important;box-shadow:0 18px 60px #0009,0 0 34px rgb(var(--room-led-rgb) / .16)!important}
.qup-led-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.qup-led-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.qup-led-copy small{color:var(--muted);font-size:10px}
.qup-led-controls{display:flex;align-items:center;gap:8px;flex:0 0 auto}.qup-led-picker{width:44px;height:36px;padding:2px;border:1px solid rgb(var(--room-led-rgb) / .55);border-radius:10px;background:#0a0e20;cursor:pointer;box-shadow:0 0 16px rgb(var(--room-led-rgb) / .18)}
.qup-led-picker::-webkit-color-swatch-wrapper{padding:2px}.qup-led-picker::-webkit-color-swatch{border:0;border-radius:7px}.qup-led-reset{height:34px;padding:0 10px;border-radius:9px;border:1px solid rgb(var(--room-led-rgb) / .38);background:#10152a;color:#fff;font-size:10px;font-weight:800;cursor:pointer}
.qup-led-setting.qup-readonly-setting{opacity:.55}.qup-led-setting.qup-readonly-setting .qup-led-picker,.qup-led-setting.qup-readonly-setting .qup-led-reset{cursor:not-allowed}
@media(max-width:800px){.qup-led-setting{padding:12px 0}.qup-led-picker{width:48px;height:40px}.qup-led-reset{height:38px}}


/* ===== QU3 MOBILE ROOM META + LED PIN — 2026-09-16 ===== */
/* Pinned messages are part of the room's neon lighting. */
.live-room-page .qup-pinned-message{
  border-color:rgb(var(--room-led-rgb) / .58)!important;
  background:linear-gradient(90deg,rgb(var(--room-led-rgb) / .18),rgb(var(--room-led-rgb) / .055))!important;
  box-shadow:0 0 18px rgb(var(--room-led-rgb) / .18),inset 0 0 18px rgb(var(--room-led-rgb) / .055)!important;
}
.mobile-room-meta,.mobile-now-meta,.mobile-headphones{display:none}
@media(max-width:700px){
  /* Mobile: QU3 | room/host | song/DJ | headphones count | host gear */
  .qup-room-bar.live-nav{
    display:grid!important;
    grid-template-columns:46px minmax(58px,.82fr) minmax(90px,1.45fr) auto auto!important;
    gap:5px!important;height:58px!important;min-height:58px!important;padding:0 8px!important;
    align-items:center!important;
  }
  .qup-room-bar>.logo{grid-column:1!important;font-size:21px!important;min-width:0!important}
  .qup-room-bar>.mobile-room-meta{grid-column:2!important;display:flex!important}
  .qup-room-bar>.mobile-now-meta{grid-column:3!important;display:flex!important}
  .mobile-room-meta,.mobile-now-meta{
    min-width:0!important;height:44px!important;flex-direction:column!important;justify-content:center!important;
    overflow:hidden!important;padding:0 2px!important;
  }
  .mobile-room-meta b,.mobile-now-meta b{
    display:block!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;
    white-space:nowrap!important;font-size:9px!important;line-height:12px!important;color:#f7f7ff!important;font-weight:850!important;
  }
  .mobile-room-meta small,.mobile-now-meta small{
    display:block!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;
    white-space:nowrap!important;margin-top:1px!important;font-size:6.5px!important;line-height:9px!important;color:#858daa!important;
  }
  .mobile-room-meta small strong,.mobile-now-meta small strong{font-weight:750!important;color:#aeb5d0!important}
  /* Hide desktop metadata and the older standalone mobile title. */
  .qup-room-bar>.qup-room-block,.qup-room-bar>.qup-now-block,.qup-room-bar>.mobile-nav-song-title{display:none!important}
  .qup-room-bar>.live-nav-actions{
    grid-column:4 / 6!important;display:flex!important;width:auto!important;height:58px!important;min-width:0!important;
    gap:5px!important;align-items:center!important;justify-content:flex-end!important;
  }
  .qup-room-bar>.live-nav-actions>.qup-listening{
    display:flex!important;align-items:center!important;gap:2px!important;min-width:0!important;margin:0!important;
    font-size:8px!important;white-space:nowrap!important;color:#dfe3f4!important;
  }
  .qup-room-bar .qup-listening .live-dot,.qup-room-bar .qup-listening .listener-word{display:none!important}
  .qup-room-bar .mobile-headphones{display:inline!important;font-size:12px!important;line-height:1!important}
  .qup-room-bar .qup-listening #peopleCount{font-size:8px!important;line-height:1!important}
  .qup-room-bar #roomSettingsBtn{
    display:grid!important;place-items:center!important;flex:0 0 30px!important;width:30px!important;min-width:30px!important;
    height:30px!important;min-height:30px!important;margin:0!important;padding:0!important;font-size:15px!important;border-radius:8px!important;
  }
  /* party.html has no settings button, so the listener count naturally occupies the far-right slot. */
}


/* QU3 room info/settings */
.qup-room-info-settings{display:grid;gap:12px;padding:12px 0;border-bottom:1px solid rgb(var(--room-led-rgb) / .18);margin-bottom:10px}
.qup-room-field{display:grid;gap:7px}.qup-room-field>span,.qup-share-field>span{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.qup-room-field small,.qup-share-field small{color:#9692a5;font-size:11px}
.qup-room-field input,.qup-room-field textarea{width:100%;box-sizing:border-box;background:#0c0b10;color:#fff;border:1px solid rgb(var(--room-led-rgb) / .35);border-radius:10px;padding:10px 11px;outline:none;font:inherit}.qup-room-field input:focus,.qup-room-field textarea:focus{border-color:var(--room-led);box-shadow:0 0 15px rgb(var(--room-led-rgb) / .18)}
.qup-room-field textarea{resize:vertical;min-height:70px}.qup-share-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:7px}.qup-share-row code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#0c0b10;border:1px solid rgb(var(--room-led-rgb) / .28);border-radius:9px;padding:9px 10px;color:var(--room-led)}.qup-share-row button{border:1px solid rgb(var(--room-led-rgb) / .45);background:rgb(var(--room-led-rgb) / .12);color:#fff;border-radius:9px;padding:0 12px;font-weight:700}.qup-save-room-info{justify-self:start}.qup-info-display{display:grid;gap:4px}.qup-info-display small{font-size:10px;letter-spacing:.12em;color:#8f8a9c}.qup-info-display b{font-size:16px}.qup-info-display p{margin:0;color:#d5d1dc;line-height:1.4;white-space:pre-wrap}
@media(max-width:700px){.qup-room-info-settings{padding-top:8px}.qup-room-field input,.qup-room-field textarea{font-size:16px}.qup-share-row button{min-height:42px}}


/* QU3 Ban List — full settings-panel subview */
.qup-ban-list-open{width:100%;margin-top:10px;padding:12px;border:1px solid rgb(var(--room-led-rgb) / .24);border-radius:12px;background:rgba(255,255,255,.035);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer}
.qup-ban-list-open>span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}.qup-ban-list-open b{font-size:12px}.qup-ban-list-open small{font-size:10px;color:rgba(224,228,255,.52)}.qup-ban-list-open>span:last-child{font-size:24px;color:rgb(var(--room-led-rgb));line-height:1}
.qup-ban-list-view{min-height:250px}.qup-ban-list-view[hidden]{display:none!important}.qup-ban-list-nav{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid rgb(var(--room-led-rgb) / .22);margin-bottom:10px}.qup-ban-list-nav button{width:36px;height:36px;border:1px solid rgb(var(--room-led-rgb) / .35);border-radius:10px;background:rgba(255,255,255,.04);color:#fff;font-size:25px;line-height:1;cursor:pointer}.qup-ban-list-nav div{display:flex;flex-direction:column;gap:1px}.qup-ban-list-nav b{font-size:13px}.qup-ban-list-nav small{font-size:10px;color:rgba(224,228,255,.52)}
.qup-ban-list-body{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto}.qup-ban-row{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;gap:10px;padding:10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055)}.qup-ban-row>div{min-width:0;display:flex;flex-direction:column;gap:2px}.qup-ban-row strong{font-size:11px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qup-ban-row small{font-size:9px;color:#9ea6cb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qup-unban-btn{width:34px;height:34px;border-radius:9px;border:1px solid rgb(var(--room-led-rgb) / .35);background:rgb(var(--room-led-rgb) / .08);color:#fff;font-size:20px;cursor:pointer}.qup-ban-empty{padding:28px 12px;text-align:center;display:flex;flex-direction:column;gap:4px}.qup-ban-empty b{font-size:12px}.qup-ban-empty small{font-size:10px;color:rgba(224,228,255,.52)}

/* ===== QU3 FLOATING PARTY CHAT BUBBLES — 2026-09-16 ===== */
/* Remove the boxed chat-panel look; the room background shows between messages. */
.live-room-page .live-chat-panel{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.live-room-page .live-chat-panel .chat-head{
  background:transparent!important;
  border-bottom:0!important;
  padding-left:8px!important;
  padding-right:8px!important;
}
.live-room-page .live-chat-panel .chat-messages{
  background:transparent!important;
  padding:10px 6px 14px!important;
}
.live-room-page .live-chat-panel .chat-message{
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  gap:8px!important;
  width:min(92%,430px)!important;
  margin:0 0 9px 0!important;
  padding:9px 11px!important;
  border:1px solid rgb(var(--room-led-rgb) / .22)!important;
  border-radius:16px 16px 16px 6px!important;
  background:linear-gradient(135deg,rgba(13,17,34,.82),rgba(7,10,21,.68))!important;
  box-shadow:0 7px 20px rgba(0,0,0,.20),0 0 14px rgb(var(--room-led-rgb) / .07)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
.live-room-page .live-chat-panel .chat-avatar{
  width:32px!important;height:32px!important;
  box-shadow:0 0 14px rgb(var(--room-led-rgb) / .20)!important;
}
.live-room-page .live-chat-panel .chat-name{color:color-mix(in srgb,var(--room-led) 42%,white)!important}
.live-room-page .live-chat-panel .chat-message p{color:#d9deef!important;font-size:12px!important}
.live-room-page .live-chat-panel .chat-empty{
  width:max-content!important;max-width:92%!important;margin:8px auto!important;padding:10px 14px!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:999px!important;
  background:rgba(7,10,21,.55)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;
}
/* Composer floats independently instead of being the bottom of a card. */
.live-room-page .live-chat-panel .chat-compose{
  margin:0 6px 8px!important;padding:7px!important;border:1px solid rgb(var(--room-led-rgb) / .20)!important;
  border-radius:15px!important;background:rgba(7,10,21,.72)!important;
  box-shadow:0 7px 22px rgba(0,0,0,.22),0 0 14px rgb(var(--room-led-rgb) / .06)!important;
  backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;
}
.live-room-page .live-chat-panel .join-mini{
  margin:0 6px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:15px!important;background:rgba(7,10,21,.62)!important;
}
/* Pinned bubble stays stronger than normal chat bubbles. */
.live-room-page .live-chat-panel .qup-pinned-message{
  margin:0 6px 9px!important;border-radius:15px!important;
}
@media(max-width:700px){
  .live-room-page .live-chat-panel{min-height:0!important}
  .live-room-page .live-chat-panel .chat-head{padding:9px 4px!important}
  .live-room-page .live-chat-panel .chat-messages{padding:6px 2px 10px!important}
  .live-room-page .live-chat-panel .chat-message{width:91%!important;margin-bottom:8px!important;padding:8px 10px!important}
  .live-room-page .live-chat-panel .chat-compose{margin:0 2px 6px!important}
  .live-room-page .live-chat-panel .qup-pinned-message{margin:0 2px 8px!important}
}

/* ===== QU3 MOBILE QUEUE DRAWER: NAV BAR BECOMES DRAWER HEADER — 2026-09-16 ===== */
@media(max-width:700px){
  /* Closed state stays exactly where it is: fixed to the bottom. */
  .qup-song-dock{
    height:66px!important;
    overflow:visible!important;
    transition:height .28s cubic-bezier(.2,.8,.2,1)!important;
  }
  /* When opened, grow the whole dock upward. The navbar is now the TOP edge
     of the drawer, with Add to the Party / Search directly beneath it. */
  .qup-song-dock.open{
    height:min(72dvh,560px)!important;
    max-height:calc(100dvh - 64px)!important;
    background:rgba(5,8,23,.992)!important;
    box-shadow:0 -20px 55px rgba(0,0,0,.58),0 0 28px rgb(var(--room-led-rgb) / .12)!important;
  }
  .qup-song-dock-main{
    position:absolute!important;
    top:0!important;left:0!important;right:0!important;bottom:auto!important;
    height:66px!important;
    z-index:3!important;
    background:rgba(5,8,23,.992)!important;
  }
  .qup-song-dock-panel,
  .qup-song-dock.open .qup-song-dock-panel{
    position:absolute!important;
    top:66px!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    background:rgba(6,9,25,.992)!important;
    box-shadow:none!important;
  }
  .qup-song-dock:not(.open) .qup-song-dock-panel{
    top:66px!important;height:0!important;max-height:0!important;padding-top:0!important;padding-bottom:0!important;
    opacity:0!important;overflow:hidden!important;
  }
  .qup-song-dock.open .qup-song-dock-panel{
    height:calc(100% - 66px)!important;
    padding:12px 10px 18px!important;
    opacity:1!important;
    border-top:1px solid rgb(var(--room-led-rgb) / .22)!important;
  }
  .qup-song-dock-panel .host-search-results,
  .qup-song-dock-panel .results{max-height:none!important;overflow:visible!important}

  /* Give the current song a little more presence in the TOP mobile navbar. */
  .qup-room-bar>.mobile-now-meta b,
  .mobile-now-meta .mobile-song-title{
    font-size:11px!important;
    line-height:13px!important;
    font-weight:900!important;
  }
}

/* ===== QU3 MOBILE DRAWER HARD FIX — 2026-09-16b ===== */
@media (max-width:700px){
  /* Closed: compact fixed footer. Open: the dock itself becomes a tall bottom sheet,
     so its existing nav row physically sits at the sheet's TOP. Uses vh fallback for iOS. */
  body.live-room-page .qup-song-dock{height:66px!important;max-height:none!important;overflow:visible!important;}
  body.live-room-page .qup-song-dock.open{height:70vh!important;max-height:calc(100vh - 58px)!important;overflow:hidden!important;}
  body.live-room-page .qup-song-dock>.qup-song-dock-main{position:absolute!important;top:0!important;bottom:auto!important;left:0!important;right:0!important;height:66px!important;}
  body.live-room-page .qup-song-dock>.qup-song-dock-panel{position:absolute!important;top:66px!important;bottom:auto!important;left:0!important;right:0!important;height:0!important;max-height:0!important;padding:0 10px!important;overflow:hidden!important;opacity:0!important;}
  body.live-room-page .qup-song-dock.open>.qup-song-dock-panel{height:calc(100% - 66px)!important;max-height:calc(100% - 66px)!important;padding:12px 10px 18px!important;overflow-y:auto!important;opacity:1!important;}

  /* Restore/readability of the collapsed UP NEXT title. */
  body.live-room-page .qup-dock-next{min-width:0!important;overflow:hidden!important;}
  body.live-room-page .qup-dock-next b#qupBottomNextTitle{display:block!important;width:100%!important;max-width:100%!important;font-size:13px!important;line-height:16px!important;font-weight:850!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#fff!important;}
  body.live-room-page .qup-dock-next small{display:block!important;font-size:7px!important;line-height:9px!important;}
}

/* ===== QU3 MOBILE SONG DRAWER — STRUCTURAL OPEN STATE 2026-09-16c =====
   Closed: dock is the fixed 66px footer.
   Open: the SAME dock occupies the area below the room header, so its nav row
   is physically the top edge and the search content begins immediately below. */
@media (max-width:700px){
  body.live-room-page .qup-song-dock{
    position:fixed!important;
    left:0!important;right:0!important;
    top:auto!important;bottom:0!important;
    height:66px!important;
    max-height:none!important;
    overflow:hidden!important;
    z-index:1200!important;
  }
  body.live-room-page .qup-song-dock.open{
    top:64px!important;
    bottom:0!important;
    height:auto!important;
    max-height:none!important;
    display:grid!important;
    grid-template-rows:66px minmax(0,1fr)!important;
    align-content:stretch!important;
    background:rgba(5,8,23,.992)!important;
  }
  body.live-room-page .qup-song-dock > .qup-song-dock-main{
    position:relative!important;
    inset:auto!important;
    grid-row:1!important;
    width:100%!important;
    height:66px!important;
    min-height:66px!important;
    margin:0!important;
    z-index:2!important;
  }
  body.live-room-page .qup-song-dock > .qup-song-dock-panel{
    position:relative!important;
    inset:auto!important;
    grid-row:2!important;
    width:100%!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0 10px!important;
    opacity:0!important;
    overflow:hidden!important;
  }
  body.live-room-page .qup-song-dock.open > .qup-song-dock-panel{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:12px 10px 20px!important;
    opacity:1!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-top:1px solid rgb(var(--room-led-rgb) / .22)!important;
  }
  body.live-room-page .qup-song-dock.open .qup-search-drawer{
    display:block!important;
    margin:0!important;
  }
  body.live-room-page .qup-dock-next{min-width:0!important;overflow:hidden!important;}
  body.live-room-page #qupBottomNextTitle{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    font-size:13px!important;
    line-height:16px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* ===== QU3 DESKTOP QUEUE DRAWER — dock bar becomes drawer header ===== */
@media (min-width:701px){
  body.live-room-page .qup-song-dock{
    height:66px!important;
    max-height:none!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-rows:66px 0!important;
    transition:height .28s cubic-bezier(.2,.8,.2,1),grid-template-rows .28s cubic-bezier(.2,.8,.2,1)!important;
  }
  body.live-room-page .qup-song-dock.open{
    height:min(62vh,560px)!important;
    grid-template-rows:66px minmax(0,1fr)!important;
    background:rgba(5,8,23,.992)!important;
    box-shadow:0 -20px 55px rgba(0,0,0,.58),0 0 28px rgb(var(--room-led-rgb) / .12)!important;
  }
  body.live-room-page .qup-song-dock > .qup-song-dock-main{
    position:relative!important;inset:auto!important;grid-row:1!important;
    height:66px!important;min-height:66px!important;margin:0 auto!important;z-index:2!important;
  }
  body.live-room-page .qup-song-dock > .qup-song-dock-panel{
    position:relative!important;inset:auto!important;grid-row:2!important;
    width:min(100%,1440px)!important;height:0!important;max-height:0!important;
    margin:0 auto!important;padding:0 18px!important;opacity:0!important;overflow:hidden!important;box-shadow:none!important;
  }
  body.live-room-page .qup-song-dock.open > .qup-song-dock-panel{
    height:auto!important;max-height:none!important;padding:14px 18px 20px!important;
    opacity:1!important;overflow-y:auto!important;border-top:1px solid rgb(var(--room-led-rgb) / .22)!important;
  }
  body.live-room-page .qup-song-dock.open .qup-search-drawer{display:block!important;margin:0!important;}
}

/* Listener count uses headphones on desktop and mobile; no 'listening' word/dot. */
.qup-room-bar .qup-listening .live-dot,
.qup-room-bar .qup-listening .listener-word{display:none!important;}
.qup-room-bar .qup-listening .mobile-headphones{display:inline!important;font-size:15px!important;line-height:1!important;}
.qup-room-bar .qup-listening{gap:5px!important;}

/* QU3: search drawer is intentionally title-free; dock bar is its header. */
body.live-room-page .qup-search-drawer .host-search-bar{margin-top:0!important;}

/* ===== QU3 MOBILE DRAWER SMOOTH SLIDE + FIRST-TAP VIDEO SHIELD — 2026-09-16e ===== */
@media (max-width:700px){
  /* Keep the drawer at its full open geometry and slide the whole unit down until
     only its 66px navbar remains visible. This makes mobile animate exactly like
     the desktop drawer instead of jumping between bottom/top positioning. */
  body.live-room-page .qup-song-dock{
    top:64px!important;
    bottom:0!important;
    height:auto!important;
    max-height:none!important;
    display:grid!important;
    grid-template-rows:66px minmax(0,1fr)!important;
    overflow:hidden!important;
    transform:translateY(calc(100% - 66px))!important;
    transition:transform .30s cubic-bezier(.2,.8,.2,1)!important;
    will-change:transform;
  }
  body.live-room-page .qup-song-dock.open{
    top:64px!important;
    bottom:0!important;
    height:auto!important;
    transform:translateY(0)!important;
  }
  body.live-room-page .qup-song-dock > .qup-song-dock-main{
    grid-row:1!important;
    position:relative!important;
    top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
  }
  body.live-room-page .qup-song-dock > .qup-song-dock-panel{
    grid-row:2!important;
    position:relative!important;
    top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
  }
  /* Transparent only until the first interaction. It prevents the YouTube iframe
     from treating that first tap as a pause before QU3 can unlock audio. */
  #guestVideoUnlockShield{
    position:absolute;inset:0;z-index:3;background:transparent;
    touch-action:manipulation;cursor:pointer;
  }
}
@media (min-width:701px){#guestVideoUnlockShield{display:none!important}}

/* ===== QU3 DESKTOP FLAME FRAME RESTORE — 2026-09-16f =====
   On desktop the flame perimeter wraps the video + attached 108px interaction strip.
   Mobile keeps its existing 76px frame and autoplay/drawer behavior untouched. */
@media (min-width:701px){
  body.live-room-page .video-shell,
  body.live-room-page .guest-video-shell{
    position:relative!important;
    overflow:visible!important;
    z-index:1!important;
  }
  body.live-room-page .stage-stats.action-stats{
    position:relative!important;
    z-index:2!important;
  }
  body.live-room-page .video-shell .qup-flame-ring,
  body.live-room-page .guest-video-shell .qup-flame-ring{
    top:-3px!important;
    left:-3px!important;
    right:-3px!important;
    bottom:-111px!important;
    border-radius:19px!important;
    pointer-events:none!important;
    z-index:8!important;
  }
  body.live-room-page .video-shell .qup-flame-ring::before,
  body.live-room-page .guest-video-shell .qup-flame-ring::before{
    border-radius:19px!important;
  }
}


/* ===== QU3 ROOM NAME OPENS SETTINGS / LISTENERS AT FAR RIGHT ===== */
.qup-room-settings-trigger{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:0;margin:0;cursor:pointer;min-width:0}
.qup-room-settings-trigger:hover b{color:var(--room-led)}
.qup-room-settings-trigger:focus-visible{outline:1px solid rgb(var(--room-led-rgb) / .65);outline-offset:5px;border-radius:6px}
.qup-room-bar>.live-nav-actions{margin-left:auto!important}
.qup-room-bar>.live-nav-actions>.qup-listening{display:flex!important}
@media(max-width:700px){
  .qup-room-bar>.live-nav-actions{grid-column:5!important;justify-self:end!important;width:max-content!important;min-width:max-content!important;gap:0!important}
  .qup-room-bar>.live-nav-actions>.qup-listening{display:flex!important;padding:7px 6px!important}
  .qup-room-bar .mobile-headphones{font-size:14px!important}
  .qup-room-bar .qup-listening #peopleCount{font-size:10px!important}
  .mobile-room-meta.qup-room-settings-trigger{cursor:pointer!important}
}
/* Ban List remains a true second settings page: only its subview is visible while open. */
.qup-room-settings.qup-ban-page{overflow:hidden!important}

/* QU3: room-name settings trigger is navbar text, never a native/button box. */
body.live-room-page .qup-room-bar .qup-room-settings-trigger,
body.live-room-page .qup-room-bar button.qup-room-settings-trigger{
  appearance:none!important;
  -webkit-appearance:none!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:inherit!important;
  padding:0!important;
}


/* ===== QU3 NAV META ICONS ===== */
.qup-room-bar .qup-room-block>b,
.qup-room-bar .qup-now-block>b,
.qup-room-bar .mobile-room-meta>b,
.qup-room-bar .mobile-now-meta>b{
  display:flex!important;align-items:center!important;min-width:0!important;gap:8px!important;
}
.qup-nav-icon{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  color:var(--room-led,#ec7cf4);text-shadow:0 0 10px rgb(var(--room-led-rgb) / .48);
  font-weight:900;line-height:1;
}
.qup-room-icon{font-size:13px;transform:scaleX(.82);letter-spacing:-2px}
.qup-song-icon{font-size:17px}
.qup-nav-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){
  .qup-room-bar .mobile-room-meta>b,.qup-room-bar .mobile-now-meta>b{gap:4px!important}
  .qup-room-bar .qup-nav-icon{font-size:9px!important;text-shadow:0 0 7px rgb(var(--room-led-rgb) / .42)}
  .qup-room-bar .qup-song-icon{font-size:11px!important}
}


/* ===== QU3 MY PLAYLIST / STEAL ===== */
.action-stats .steal-stat strong{font-size:29px;filter:drop-shadow(0 0 14px rgb(var(--room-led-rgb) / .55));color:var(--room-led,#8a42ff)}
.action-stats .steal-stat.saved{background:rgb(var(--room-led-rgb) / .12);box-shadow:inset 0 0 28px rgb(var(--room-led-rgb) / .10)}
.qup-library-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px;padding:4px;border:1px solid rgb(var(--room-led-rgb) / .18);border-radius:13px;background:#080b18}
.qup-library-tab{border:0;border-radius:10px;padding:10px 12px;background:transparent;color:#8f99b7;font:900 11px/1 system-ui;letter-spacing:.9px;cursor:pointer}
.qup-library-tab.active{color:#fff;background:rgb(var(--room-led-rgb) / .16);box-shadow:inset 0 0 20px rgb(var(--room-led-rgb) / .08)}
.qup-library-pane{display:none}.qup-library-pane.active{display:block}
.qup-result-actions,.qup-playlist-actions{display:flex;align-items:center;gap:7px;margin-left:auto}
.qup-result-actions button,.qup-playlist-actions button{white-space:nowrap}
.qup-save-result{border:1px solid rgb(var(--room-led-rgb) / .30)!important;background:rgb(var(--room-led-rgb) / .08)!important;color:#fff!important}
.qup-playlist-list{display:grid;gap:8px;max-height:330px;overflow:auto;padding:1px}
.qup-playlist-song{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px;border:1px solid #ffffff12;border-radius:12px;background:#ffffff05}
.qup-playlist-song img{width:58px;height:42px;object-fit:cover;border-radius:8px;background:#000}
.qup-playlist-copy{min-width:0}.qup-playlist-copy b,.qup-playlist-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qup-playlist-copy b{font-size:13px}.qup-playlist-copy small{font-size:10px;color:#8f99b7;margin-top:3px}
.qup-playlist-actions button{border:1px solid rgb(var(--room-led-rgb) / .28);border-radius:9px;padding:8px 10px;background:rgb(var(--room-led-rgb) / .10);color:#fff;font-weight:850;cursor:pointer}
.qup-playlist-actions .qup-playlist-remove{width:34px;padding:8px 0;color:#aeb5cf;background:#ffffff08;border-color:#ffffff12}
.qup-playlist-empty{padding:28px 12px;text-align:center;color:#8f99b7}.qup-playlist-empty b,.qup-playlist-empty span{display:block}.qup-playlist-empty b{color:#fff;margin-bottom:6px}
@media(max-width:700px){.qup-library-tabs{margin-bottom:9px}.qup-playlist-song{grid-template-columns:48px minmax(0,1fr);gap:9px}.qup-playlist-song img{width:48px;height:36px}.qup-playlist-actions{grid-column:1/-1;width:100%;margin:0}.qup-playlist-actions button:first-child{flex:1}.qup-result-actions{flex-direction:column;align-items:stretch}.qup-result-actions button{padding:7px 8px!important;font-size:10px!important}}

/* QU3 vote-to-skip numeric room setting */
.qup-skip-threshold-row input[type=number]{width:72px;height:38px;border:1px solid rgb(var(--room-led-rgb)/.35);border-radius:10px;background:#090d20;color:#fff;text-align:center;font-weight:900;padding:0 8px;outline:none}
.qup-skip-threshold-row input[type=number]:focus{border-color:var(--room-led);box-shadow:0 0 0 3px rgb(var(--room-led-rgb)/.12)}


/* ===== QU3 FINAL NAV ICON + STEAL ICON + DESKTOP SETTINGS ANCHOR ===== */
.qup-room-icon{width:18px!important;height:16px!important;transform:none!important;letter-spacing:normal!important}
.qup-room-icon svg{display:block;width:18px;height:16px;overflow:visible}
.qup-room-icon svg rect{fill:currentColor;filter:drop-shadow(0 0 4px rgb(var(--room-led-rgb) / .55))}
.action-stats .steal-stat strong{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.qup-steal-icon{display:inline-flex;width:28px;height:25px;color:var(--room-led,#8a42ff)}
.qup-steal-icon svg{display:block;width:100%;height:100%;overflow:visible}
.qup-steal-icon .steal-note{fill:currentColor;opacity:.98}
.qup-steal-icon .steal-hand{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qup-steal-icon{filter:drop-shadow(0 0 7px rgb(var(--room-led-rgb) / .55))}
@media(min-width:701px){
  body.live-room-page #roomSettingsPanel.qup-room-settings{
    position:fixed!important;
    right:auto!important;
    margin:0!important;
    width:310px!important;
    max-width:calc(100vw - 24px)!important;
  }
}
@media(max-width:700px){
  .qup-room-icon,.qup-room-icon svg{width:13px!important;height:12px!important}
  .qup-steal-icon{width:23px;height:21px}
}


/* ===== QU3 interaction polish: emoji steal + LED counts + tactile motion ===== */
.action-stats .stat-action strong{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.action-stats .stat-action strong > span[id]{color:var(--room-led,#e776ff)!important;text-shadow:0 0 8px rgb(var(--room-led-rgb) / .72),0 0 18px rgb(var(--room-led-rgb) / .36)!important;font-variant-numeric:tabular-nums}
.qup-steal-emoji{display:inline-block!important;font-size:32px!important;line-height:1!important;filter:none!important;transform-origin:55% 70%}
@media(max-width:700px){.qup-steal-emoji{font-size:30px!important}}

@keyframes qupFlameActivePulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 3px rgba(255,105,35,.25))}50%{transform:scale(1.075);filter:drop-shadow(0 0 11px rgba(255,105,35,.7))}}
.flame-stat.voted strong,.flame-stat.is-flamed strong,.flame-stat.flame-active strong{animation:qupFlameActivePulse 1.55s ease-in-out infinite;transform-origin:center}
@media(hover:hover){.flame-stat:not(:disabled):hover strong{transform:translateY(-2px) scale(1.08);filter:drop-shadow(0 0 10px rgba(255,105,35,.72));transition:transform .16s ease,filter .16s ease}}

@keyframes qupStealSnatch{0%{transform:translateX(0) rotate(0) scale(1)}35%{transform:translateX(-5px) rotate(-12deg) scale(1.18)}65%{transform:translateX(3px) rotate(8deg) scale(.96)}100%{transform:translateX(0) rotate(0) scale(1)}}
.steal-stat.qup-interaction-hit .qup-steal-emoji{animation:qupStealSnatch .48s cubic-bezier(.2,.8,.2,1)}
@keyframes qupDownBounce{0%{transform:translateY(0) scale(1)}45%{transform:translateY(5px) scale(1.12)}100%{transform:translateY(0) scale(1)}}
.skip-stat.qup-interaction-hit strong:first-child{animation:qupDownBounce .42s ease}

@media(prefers-reduced-motion:reduce){.flame-stat.voted strong,.flame-stat.is-flamed strong,.flame-stat.flame-active strong,.steal-stat.qup-interaction-hit .qup-steal-emoji,.skip-stat.qup-interaction-hit strong{animation:none!important}}


/* ===== QU3 grab optical-size + owned-song lock ===== */
.action-stats .steal-stat .qup-steal-emoji{
  font-size:42px!important;
  line-height:.82!important;
  width:46px!important;
  height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:translateY(1px) scale(1.08)!important;
}
.action-stats .steal-stat:disabled{opacity:.42!important;cursor:not-allowed!important;}
.action-stats .steal-stat:disabled .qup-steal-emoji{filter:grayscale(.35)!important;}
@media(max-width:700px){
  .action-stats .steal-stat .qup-steal-emoji{font-size:40px!important;width:44px!important;height:40px!important;}
}

/* ===== QU3 ROOM SETTINGS: contained internal scrolling ===== */
body.live-room-page #roomSettingsPanel.qup-room-settings{
  box-sizing:border-box!important;
  max-height:min(68dvh,620px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin;
  scrollbar-color:rgb(var(--room-led-rgb) / .72) rgba(255,255,255,.055);
  -webkit-overflow-scrolling:touch;
}
body.live-room-page #roomSettingsPanel.qup-room-settings::-webkit-scrollbar{width:6px}
body.live-room-page #roomSettingsPanel.qup-room-settings::-webkit-scrollbar-track{background:rgba(255,255,255,.045);border-radius:999px}
body.live-room-page #roomSettingsPanel.qup-room-settings::-webkit-scrollbar-thumb{background:rgb(var(--room-led-rgb) / .68);border-radius:999px;box-shadow:0 0 8px rgb(var(--room-led-rgb) / .35)}
body.live-room-page #roomSettingsPanel .qup-settings-head{
  position:sticky!important;
  top:-14px!important;
  z-index:4!important;
  margin:-14px -14px 10px!important;
  padding:14px 14px 10px!important;
  background:linear-gradient(180deg,#0a0e23 78%,rgba(10,14,35,.94) 100%)!important;
  border-bottom:1px solid rgb(var(--room-led-rgb) / .12)!important;
}
/* Ban List remains the second page, but its list can scroll when long. */
body.live-room-page #roomSettingsPanel.qup-ban-page{overflow-y:auto!important}
body.live-room-page #roomSettingsPanel.qup-ban-page .qup-ban-list-body{
  max-height:calc(min(68dvh,620px) - 115px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
@media(max-width:700px){
  body.live-room-page #roomSettingsPanel.qup-room-settings{
    max-height:calc(100dvh - 166px)!important;
    overflow-y:auto!important;
    scrollbar-width:none;
  }
  body.live-room-page #roomSettingsPanel.qup-room-settings::-webkit-scrollbar{display:none}
  body.live-room-page #roomSettingsPanel.qup-ban-page .qup-ban-list-body{
    max-height:calc(100dvh - 275px)!important;
  }
}

/* ======================================================================
   QU3 UI V2 — Neon After-Party interface — 2026-09-16
   Presentation-only redesign. Playback/realtime element IDs stay intact.
   ====================================================================== */
body.live-room-page{
  --v2-bg:#050718;
  --v2-panel:#090b20;
  --v2-text:#f7f3ff;
  --v2-muted:#9a9fc3;
  background:
    radial-gradient(70% 48% at 50% 36%,rgb(var(--room-led-rgb)/.13),transparent 70%),
    radial-gradient(42% 28% at 95% 72%,rgb(var(--room-led-rgb)/.08),transparent 75%),
    linear-gradient(180deg,#050716 0%,#06081a 54%,#040615 100%)!important;
  color:var(--v2-text);
}
body.live-room-page::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.34;background:repeating-radial-gradient(ellipse at 0 55%,transparent 0 18px,rgb(var(--room-led-rgb)/.07) 19px 20px,transparent 21px 27px)}

/* Header */
body.live-room-page .qup-room-bar{
  height:76px!important;min-height:76px!important;padding:0 28px!important;
  background:rgba(5,7,22,.91)!important;backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgb(var(--room-led-rgb)/.22)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.18)!important;
}
body.live-room-page .qup-room-bar .logo{
  font-size:34px!important;font-weight:1000!important;font-style:italic!important;letter-spacing:-3px!important;
  color:#ef83ff!important;text-shadow:0 0 20px rgb(var(--room-led-rgb)/.52)!important;
}
body.live-room-page .qup-room-block,body.live-room-page .qup-now-block{min-width:0!important}
body.live-room-page .qup-room-block>b,body.live-room-page .qup-now-block>b{font-size:15px!important}
body.live-room-page .qup-room-block small,body.live-room-page .qup-now-block small{font-size:11px!important;color:var(--v2-muted)!important;margin-top:4px!important}
body.live-room-page .qup-listening{border:0!important;background:transparent!important;font-size:16px!important}
body.live-room-page .mobile-headphones{font-size:24px!important}
body.live-room-page #peopleCount{font-size:16px!important}

/* Main desktop composition */
body.live-room-page .unified-room-shell{
  width:min(1460px,calc(100% - 42px))!important;max-width:1460px!important;margin:0 auto!important;
  grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr)!important;gap:22px!important;
  padding:22px 0 120px!important;
}
body.live-room-page .live-stage{min-width:0!important}
body.live-room-page .stage-heading{display:none!important}
body.live-room-page .video-shell,body.live-room-page .guest-video-shell{
  border:2px solid rgb(var(--room-led-rgb)/.78)!important;border-radius:30px!important;
  overflow:hidden!important;background:#02030a!important;
  box-shadow:0 0 0 1px rgb(var(--room-led-rgb)/.16),0 0 22px rgb(var(--room-led-rgb)/.35),0 18px 60px rgba(0,0,0,.44)!important;
}
body.live-room-page .video-shell iframe,body.live-room-page .guest-video-shell iframe{border-radius:27px!important}
body.live-room-page .video-corner-badge{
  top:20px!important;left:20px!important;padding:9px 15px!important;border-radius:999px!important;
  border:1px solid rgb(var(--room-led-rgb)/.72)!important;background:rgba(8,7,24,.72)!important;
  backdrop-filter:blur(10px)!important;color:#fff!important;font-size:10px!important;letter-spacing:2px!important;
  box-shadow:0 0 18px rgb(var(--room-led-rgb)/.22)!important;
}

/* Big circular reaction controls */
body.live-room-page .stage-stats.action-stats{
  width:min(620px,88%)!important;margin:24px auto 28px!important;padding:0!important;background:transparent!important;border:0!important;
  box-shadow:none!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:34px!important;overflow:visible!important;
}
body.live-room-page .action-stats .stat-action{
  position:relative!important;aspect-ratio:1!important;width:100%!important;max-width:150px!important;justify-self:center!important;
  border-radius:50%!important;border:2px solid rgb(var(--room-led-rgb)/.74)!important;
  background:radial-gradient(circle at 50% 42%,rgb(var(--room-led-rgb)/.18),rgba(7,8,27,.96) 68%)!important;
  box-shadow:inset 0 0 28px rgb(var(--room-led-rgb)/.12),0 0 16px rgb(var(--room-led-rgb)/.35),0 0 42px rgb(var(--room-led-rgb)/.12)!important;
  padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;
}
body.live-room-page .action-stats .stat-action strong{font-size:43px!important;gap:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
body.live-room-page .action-stats .stat-action strong>span[id]{
  position:absolute!important;top:calc(100% + 5px)!important;left:50%!important;transform:translateX(-50%)!important;
  min-width:44px!important;height:32px!important;padding:0 10px!important;border-radius:999px!important;
  display:grid!important;place-items:center!important;background:#0b0b26!important;border:1px solid rgb(var(--room-led-rgb)/.24)!important;
  font-size:18px!important;color:#f2b3ff!important;box-shadow:0 0 18px rgb(var(--room-led-rgb)/.24)!important;
}
body.live-room-page .action-stats .flame-stat strong{font-size:54px!important}
body.live-room-page .action-stats .skip-stat strong{font-size:47px!important}
body.live-room-page .action-stats .steal-stat .qup-steal-emoji{font-size:52px!important;width:auto!important;height:auto!important;transform:none!important}
body.live-room-page .action-stats .stat-action>span:last-child{display:none!important}
body.live-room-page .action-stats .flame-stat{border-color:#ff4fca!important;box-shadow:inset 0 0 32px rgba(255,44,193,.15),0 0 20px rgba(255,51,205,.52),0 0 50px rgba(255,44,193,.18)!important}
body.live-room-page .action-stats .skip-stat{border-color:#646dff!important;box-shadow:inset 0 0 32px rgba(76,83,255,.14),0 0 20px rgba(83,91,255,.38)!important}
body.live-room-page .qup-flame-ring{display:none!important}

/* Chat becomes a clean neon social feed */
body.live-room-page .live-chat-panel{
  border:1px solid rgb(var(--room-led-rgb)/.20)!important;border-radius:25px!important;background:rgba(7,9,27,.68)!important;
  backdrop-filter:blur(18px)!important;box-shadow:0 18px 60px rgba(0,0,0,.25)!important;overflow:hidden!important;
}
body.live-room-page .chat-head{min-height:68px!important;padding:16px 20px!important;border-bottom:1px solid rgb(var(--room-led-rgb)/.15)!important}
body.live-room-page .chat-head .eyebrow{font-size:13px!important;letter-spacing:4px!important;color:#e5b0ff!important}
body.live-room-page .qup-chat-toggle{width:46px!important;height:46px!important;border-radius:50%!important;border:1px solid rgb(var(--room-led-rgb)/.62)!important;background:rgb(var(--room-led-rgb)/.10)!important;box-shadow:0 0 20px rgb(var(--room-led-rgb)/.20)!important}
body.live-room-page .chat-messages{padding:10px 20px 18px!important}
body.live-room-page .chat-message{grid-template-columns:42px 1fr!important;gap:12px!important;padding:12px 0!important}
body.live-room-page .chat-avatar{width:42px!important;height:42px!important;border:1px solid rgb(var(--room-led-rgb)/.72)!important;box-shadow:0 0 15px rgb(var(--room-led-rgb)/.22)!important}
body.live-room-page .chat-name{font-size:13px!important}.chat-name span{font-size:10px!important}
body.live-room-page .chat-message p{font-size:14px!important;color:#c9cbe5!important}
body.live-room-page .chat-compose{margin:0 14px 14px!important;padding:0!important;border:0!important;grid-template-columns:1fr 48px!important;gap:9px!important}
body.live-room-page .chat-compose input{height:48px!important;border-radius:999px!important;background:#090b22!important;border:1px solid #4d5078!important;padding:0 18px!important;font-size:14px!important}
body.live-room-page .chat-compose button{width:48px!important;height:48px!important;border-radius:50%!important;background:linear-gradient(145deg,#8f36d9,#df4cff)!important;box-shadow:0 0 22px rgb(var(--room-led-rgb)/.44)!important;font-size:18px!important}

/* Bottom music dock */
body.live-room-page .qup-song-dock{
  left:50%!important;right:auto!important;bottom:0!important;width:min(1100px,calc(100% - 30px))!important;transform:translateX(-50%)!important;
  border:1px solid rgb(var(--room-led-rgb)/.66)!important;border-bottom:0!important;border-radius:28px 28px 0 0!important;
  background:rgba(7,9,29,.94)!important;backdrop-filter:blur(22px)!important;
  box-shadow:0 -3px 24px rgb(var(--room-led-rgb)/.22),0 -18px 55px rgba(0,0,0,.30)!important;
}
body.live-room-page .qup-song-dock-main{height:86px!important;min-height:86px!important;padding:0 24px!important}
body.live-room-page .qup-dock-icon{width:58px!important;height:58px!important;border-radius:50%!important;display:grid!important;place-items:center!important;font-size:25px!important;color:#fff!important;background:radial-gradient(circle,rgb(var(--room-led-rgb)/.25),#171037 70%)!important;border:1px solid rgb(var(--room-led-rgb)/.65)!important;box-shadow:0 0 22px rgb(var(--room-led-rgb)/.35)!important}
body.live-room-page .qup-dock-add small,body.live-room-page .qup-dock-next small{letter-spacing:2.5px!important;color:#a6a4d2!important}
body.live-room-page .qup-dock-add b,body.live-room-page .qup-dock-next b{font-size:18px!important}
body.live-room-page .qup-dock-arrow{width:46px!important;height:46px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:rgb(var(--room-led-rgb)/.10)!important;border:1px solid rgb(var(--room-led-rgb)/.18)!important}
body.live-room-page .qup-song-dock-panel{background:rgba(7,9,29,.985)!important}
body.live-room-page .qup-old-up-next{display:none!important}

/* Search drawer matches V2 */
body.live-room-page .qup-search-drawer{border-radius:20px!important;border:1px solid rgb(var(--room-led-rgb)/.18)!important;background:rgba(8,10,29,.72)!important}

/* Mobile: closely follow the supplied QU3 concept */
@media(max-width:700px){
  body.live-room-page{padding-bottom:78px!important}
  body.live-room-page .qup-room-bar{
    height:82px!important;min-height:82px!important;padding:0 12px!important;
    display:grid!important;grid-template-columns:58px minmax(0,1fr) minmax(0,1fr) auto!important;gap:8px!important;
  }
  body.live-room-page .qup-room-bar .logo{font-size:27px!important;letter-spacing:-2.5px!important}
  body.live-room-page .mobile-room-meta,body.live-room-page .mobile-now-meta{display:block!important;min-width:0!important}
  body.live-room-page .mobile-room-meta>b,body.live-room-page .mobile-now-meta>b{font-size:11px!important;gap:4px!important}
  body.live-room-page .mobile-room-meta small,body.live-room-page .mobile-now-meta small{font-size:8.5px!important;margin-top:4px!important;color:#9c9fbe!important;display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.live-room-page .qup-room-block,body.live-room-page .qup-now-block{display:none!important}
  body.live-room-page .qup-room-bar>.live-nav-actions{grid-column:4!important;display:flex!important;align-items:center!important}
  body.live-room-page .qup-room-bar>.live-nav-actions>.qup-listening{padding:5px!important;gap:3px!important}
  body.live-room-page .qup-room-bar .mobile-headphones{font-size:18px!important}
  body.live-room-page .qup-room-bar #peopleCount{font-size:12px!important}
  body.live-room-page #endBtn{display:none!important}

  body.live-room-page .unified-room-shell{display:flex!important;flex-direction:column!important;width:100%!important;padding:14px 12px 94px!important;gap:14px!important}
  body.live-room-page .live-stage{display:contents!important}
  body.live-room-page .video-shell,body.live-room-page .guest-video-shell{
    order:1!important;width:100%!important;border-radius:25px!important;border-width:2px!important;
    box-shadow:0 0 15px rgb(var(--room-led-rgb)/.48),0 0 38px rgb(var(--room-led-rgb)/.16)!important;
  }
  body.live-room-page .video-shell iframe,body.live-room-page .guest-video-shell iframe{border-radius:22px!important}
  body.live-room-page .video-corner-badge{top:12px!important;left:12px!important;padding:7px 11px!important;font-size:8px!important}

  body.live-room-page .stage-stats.action-stats{
    order:2!important;width:min(390px,92%)!important;margin:14px auto 24px!important;gap:24px!important;display:grid!important;
  }
  body.live-room-page .action-stats .stat-action{max-width:96px!important;border-width:1.5px!important}
  body.live-room-page .action-stats .stat-action strong{font-size:31px!important}
  body.live-room-page .action-stats .flame-stat strong{font-size:39px!important}
  body.live-room-page .action-stats .skip-stat strong{font-size:34px!important}
  body.live-room-page .action-stats .steal-stat .qup-steal-emoji{font-size:38px!important;width:auto!important;height:auto!important}
  body.live-room-page .action-stats .stat-action strong>span[id]{top:calc(100% + 3px)!important;height:26px!important;min-width:35px!important;font-size:14px!important;padding:0 8px!important}

  body.live-room-page .live-chat-panel{order:3!important;min-height:390px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
  body.live-room-page .chat-head{padding:10px 6px 11px!important;min-height:52px!important;border-bottom:0!important}
  body.live-room-page .chat-head .eyebrow{font-size:12px!important;letter-spacing:4px!important}
  body.live-room-page .qup-chat-toggle{width:42px!important;height:42px!important}
  body.live-room-page .chat-messages{min-height:235px!important;max-height:42vh!important;padding:0 7px 10px!important}
  body.live-room-page .chat-message{grid-template-columns:38px 1fr!important;gap:10px!important;padding:10px 0!important}
  body.live-room-page .chat-avatar{width:38px!important;height:38px!important}
  body.live-room-page .chat-name{font-size:12px!important}.chat-name span{font-size:9px!important}
  body.live-room-page .chat-message p{font-size:13px!important}
  body.live-room-page .chat-compose{margin:5px 4px 8px!important;grid-template-columns:1fr 46px!important}
  body.live-room-page .chat-compose input{height:46px!important}.chat-compose button{width:46px!important;height:46px!important}
  body.live-room-page .join-mini{display:none!important}
  body.live-room-page .qup-search-drawer{display:none!important}

  /* preserve the existing slide mechanism but give the closed bar V2 geometry */
  body.live-room-page .qup-song-dock{
    top:82px!important;left:0!important;right:0!important;width:100%!important;transform:translateY(calc(100% - 78px))!important;
    grid-template-rows:78px minmax(0,1fr)!important;border-radius:28px 28px 0 0!important;border-left:1px solid rgb(var(--room-led-rgb)/.55)!important;border-right:1px solid rgb(var(--room-led-rgb)/.55)!important;
  }
  body.live-room-page .qup-song-dock.open{top:82px!important;transform:translateY(0)!important}
  body.live-room-page .qup-song-dock-main{height:78px!important;min-height:78px!important;padding:0 13px!important;gap:10px!important}
  body.live-room-page .qup-dock-icon{width:50px!important;height:50px!important;font-size:21px!important}
  body.live-room-page .qup-dock-add{min-width:86px!important}
  body.live-room-page .qup-dock-add small,body.live-room-page .qup-dock-next small{font-size:8px!important;letter-spacing:1.7px!important}
  body.live-room-page .qup-dock-add b,body.live-room-page .qup-dock-next b{font-size:13px!important;line-height:1.2!important}
  body.live-room-page .qup-dock-divider{height:42px!important}
  body.live-room-page .qup-dock-arrow{width:38px!important;height:38px!important;flex:0 0 38px!important}
  body.live-room-page .qup-song-dock-panel{padding-bottom:max(12px,env(safe-area-inset-bottom))!important}

  body.live-room-page #roomSettingsPanel.qup-room-settings{top:76px!important}
}

@media(min-width:701px) and (max-width:1050px){
 body.live-room-page .unified-room-shell{grid-template-columns:1fr!important;width:min(900px,calc(100% - 32px))!important}
 body.live-room-page .live-chat-panel{min-height:430px!important}
}

/* ===== QU3 UI V2.1 — compact mobile header + mockup reaction rings ===== */
@media(max-width:700px){
  /* Header is intentionally shallow; content starts exactly below it. */
  body.live-room-page{padding-top:68px!important;}
  body.live-room-page .qup-room-bar,
  body.live-room-page .qup-room-bar.live-nav{
    height:68px!important;min-height:68px!important;padding:0 12px!important;
    align-items:center!important;
  }
  body.live-room-page .mobile-room-meta,
  body.live-room-page .mobile-now-meta{align-self:center!important;padding:0!important;margin:0!important;line-height:1.05!important;}
  body.live-room-page .mobile-room-meta>b,
  body.live-room-page .mobile-now-meta>b{line-height:1.08!important;margin:0!important;}
  body.live-room-page .mobile-room-meta small,
  body.live-room-page .mobile-now-meta small{margin-top:3px!important;line-height:1.05!important;}
  body.live-room-page .unified-room-shell{padding-top:10px!important;}

  /* Bottom drawer's open position follows the new header height. */
  body.live-room-page .qup-song-dock{top:68px!important;}
  body.live-room-page .qup-song-dock.open{top:68px!important;}

  /* Reaction row: three luminous glass discs like the approved mockup. */
  body.live-room-page .stage-stats.action-stats{
    width:min(370px,96%)!important;margin:18px auto 30px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;
    align-items:start!important;
  }
  body.live-room-page .action-stats .stat-action{
    width:104px!important;height:104px!important;max-width:104px!important;aspect-ratio:auto!important;
    border:2px solid rgb(var(--room-led-rgb)/.95)!important;
    background:
      radial-gradient(circle at 50% 42%,rgb(var(--room-led-rgb)/.25) 0%,rgb(var(--room-led-rgb)/.10) 35%,rgba(8,9,32,.98) 72%)!important;
    box-shadow:
      inset 0 0 22px rgb(var(--room-led-rgb)/.22),
      inset 0 0 2px rgba(255,255,255,.45),
      0 0 8px rgb(var(--room-led-rgb)/.88),
      0 0 25px rgb(var(--room-led-rgb)/.46),
      0 0 48px rgb(var(--room-led-rgb)/.18)!important;
  }
  body.live-room-page .action-stats .stat-action::before{
    content:"";position:absolute;inset:8px;border-radius:50%;pointer-events:none;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 0 18px rgba(255,255,255,.04),0 0 12px rgb(var(--room-led-rgb)/.16);
  }
  body.live-room-page .action-stats .stat-action strong{font-size:38px!important;line-height:1!important;z-index:1!important;}
  body.live-room-page .action-stats .flame-stat strong{font-size:51px!important;filter:drop-shadow(0 0 9px rgba(255,80,25,.95)) drop-shadow(0 0 18px rgba(255,40,170,.72))!important;}
  body.live-room-page .action-stats .steal-stat .qup-steal-emoji{font-size:48px!important;filter:drop-shadow(0 0 10px rgb(var(--room-led-rgb)/.48))!important;}
  body.live-room-page .action-stats .skip-stat strong{font-size:43px!important;filter:drop-shadow(0 0 11px rgba(102,112,255,.72))!important;}

  body.live-room-page .action-stats .flame-stat{
    border-color:#ff48d7!important;
    background:radial-gradient(circle at 50% 42%,rgba(255,46,199,.25),rgba(84,19,116,.18) 42%,rgba(8,9,32,.98) 74%)!important;
    box-shadow:inset 0 0 25px rgba(255,50,207,.20),0 0 8px #ff48d7,0 0 27px rgba(255,55,209,.62),0 0 52px rgba(255,40,177,.25)!important;
  }
  body.live-room-page .action-stats .steal-stat{
    border-color:#b248ff!important;
    box-shadow:inset 0 0 25px rgba(171,65,255,.18),0 0 8px #b248ff,0 0 26px rgba(171,65,255,.52),0 0 48px rgba(128,55,255,.20)!important;
  }
  body.live-room-page .action-stats .skip-stat{
    border-color:#6672ff!important;
    background:radial-gradient(circle at 50% 42%,rgba(80,91,255,.24),rgba(39,39,112,.16) 42%,rgba(8,9,32,.98) 74%)!important;
    box-shadow:inset 0 0 25px rgba(91,101,255,.18),0 0 8px #6672ff,0 0 26px rgba(80,91,255,.48),0 0 48px rgba(67,70,255,.18)!important;
  }
  /* Detached count capsules directly below each disc. */
  body.live-room-page .action-stats .stat-action strong>span[id]{
    top:calc(100% + 7px)!important;height:29px!important;min-width:39px!important;padding:0 9px!important;
    border-radius:999px!important;background:rgba(9,9,31,.96)!important;font-size:15px!important;font-weight:900!important;
    color:#f7c8ff!important;border:1px solid rgb(var(--room-led-rgb)/.30)!important;
    box-shadow:0 0 15px rgb(var(--room-led-rgb)/.35),inset 0 0 10px rgb(var(--room-led-rgb)/.10)!important;
  }
  body.live-room-page .action-stats .flame-stat strong>span[id]{color:#fff0fb!important;border-color:rgba(255,72,215,.35)!important;box-shadow:0 0 17px rgba(255,72,215,.45)!important;}
  body.live-room-page .action-stats .skip-stat strong>span[id]{color:#cdd2ff!important;border-color:rgba(102,114,255,.35)!important;box-shadow:0 0 17px rgba(102,114,255,.35)!important;}
}


/* ===== QU3 UI V2.2 — tighter nav + thumbnail Up Next + collision-safe dock ===== */
body.live-room-page .qup-song-dock-main{
  grid-template-columns:58px minmax(112px,150px) 1px minmax(0,1fr) 46px!important;
  column-gap:14px!important;
}
body.live-room-page .qup-dock-add{min-width:0!important;overflow:hidden!important;}
body.live-room-page .qup-dock-add small,body.live-room-page .qup-dock-add b{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
body.live-room-page .qup-dock-next{display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;align-items:center!important;gap:11px!important;overflow:hidden!important;}
body.live-room-page .qup-dock-next-thumb{width:52px!important;height:38px!important;object-fit:cover!important;border-radius:8px!important;border:1px solid rgb(var(--room-led-rgb)/.45)!important;box-shadow:0 0 12px rgb(var(--room-led-rgb)/.18)!important;}
body.live-room-page .qup-dock-next-copy{min-width:0!important;display:flex!important;flex-direction:column!important;gap:2px!important;overflow:hidden!important;}
body.live-room-page .qup-dock-next-copy b,body.live-room-page .qup-dock-next-copy em{display:block!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}

@media(max-width:700px){
  body.live-room-page{padding-top:56px!important;}
  body.live-room-page .qup-room-bar,body.live-room-page .qup-room-bar.live-nav{
    height:56px!important;min-height:56px!important;padding:0 10px!important;gap:6px!important;
    grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) auto!important;
  }
  body.live-room-page .qup-room-bar .logo{font-size:24px!important;line-height:1!important;}
  body.live-room-page .mobile-room-meta,body.live-room-page .mobile-now-meta{height:40px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:0!important;}
  body.live-room-page .mobile-room-meta>b,body.live-room-page .mobile-now-meta>b{font-size:10.5px!important;line-height:1!important;min-height:12px!important;}
  body.live-room-page .mobile-room-meta small,body.live-room-page .mobile-now-meta small{font-size:8px!important;margin-top:2px!important;line-height:1!important;min-height:9px!important;}
  body.live-room-page .unified-room-shell{padding-top:6px!important;}
  body.live-room-page .qup-song-dock,body.live-room-page .qup-song-dock.open{top:56px!important;}
  body.live-room-page #roomSettingsPanel.qup-room-settings{top:60px!important;}

  body.live-room-page .qup-song-dock-main{
    grid-template-columns:46px minmax(70px,88px) 1px minmax(0,1fr) 34px!important;
    padding:0 9px!important;column-gap:7px!important;
  }
  body.live-room-page .qup-dock-icon{width:44px!important;height:44px!important;font-size:18px!important;}
  body.live-room-page .qup-dock-add{width:auto!important;min-width:0!important;}
  body.live-room-page .qup-dock-add small{font-size:7px!important;letter-spacing:1.25px!important;}
  body.live-room-page .qup-dock-add b{font-size:11px!important;}
  body.live-room-page .qup-dock-next{grid-template-columns:40px minmax(0,1fr)!important;gap:7px!important;}
  body.live-room-page .qup-dock-next-thumb{width:40px!important;height:30px!important;border-radius:6px!important;}
  body.live-room-page .qup-dock-next-copy small{font-size:7px!important;letter-spacing:1.25px!important;}
  body.live-room-page .qup-dock-next-copy b{font-size:10.5px!important;}
  body.live-room-page .qup-dock-arrow{width:32px!important;height:32px!important;font-size:15px!important;}
}


/* ===== QU3 UI V2.3 — compact chat icon, reliable collapse, centered desktop ===== */
/* Replace the oversized three-line control with a speech-message glyph. */
body.live-room-page .qup-chat-toggle,
body.live-room-page .qup-chat-restore{
  position:relative!important;
  width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important;
  padding:0!important;border-radius:50%!important;
  border:1px solid rgb(var(--room-led-rgb)/.48)!important;
  background:rgba(9,10,31,.86)!important;
  box-shadow:0 0 13px rgb(var(--room-led-rgb)/.18)!important;
}
body.live-room-page .qup-chat-toggle span,
body.live-room-page .qup-chat-restore span{display:none!important}
body.live-room-page .qup-chat-toggle::before,
body.live-room-page .qup-chat-restore::before{
  content:""!important;display:block!important;position:absolute!important;
  left:8px!important;top:8px!important;width:16px!important;height:12px!important;
  border:1.8px solid #e9c9ff!important;border-radius:6px!important;
  background:rgb(var(--room-led-rgb)/.10)!important;
  box-shadow:0 0 7px rgb(var(--room-led-rgb)/.42)!important;
}
body.live-room-page .qup-chat-toggle::after,
body.live-room-page .qup-chat-restore::after{
  content:""!important;position:absolute!important;left:11px!important;top:19px!important;
  width:5px!important;height:5px!important;border-left:1.8px solid #e9c9ff!important;
  border-bottom:1.8px solid #e9c9ff!important;transform:skewY(-35deg)!important;
}

/* Desktop: when chat closes, collapse to one centered stage column. */
@media(min-width:951px){
  body.live-room-page .unified-room-shell.qup-chat-hidden{
    display:grid!important;grid-template-columns:minmax(0,1050px)!important;
    justify-content:center!important;justify-items:stretch!important;gap:0!important;
  }
  body.live-room-page .unified-room-shell.qup-chat-hidden .live-chat-panel{display:none!important}
  body.live-room-page .unified-room-shell.qup-chat-hidden .live-stage{
    width:100%!important;max-width:1050px!important;margin:0 auto!important;justify-self:center!important;
  }
  body.live-room-page .qup-chat-restore{right:18px!important;top:72px!important}

  /* Same reaction language as mobile: luminous glass discs + detached counts. */
  body.live-room-page .stage-stats.action-stats{
    width:min(430px,92%)!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:28px!important;margin:20px auto 32px!important;
  }
  body.live-room-page .action-stats .stat-action{
    width:118px!important;height:118px!important;max-width:118px!important;aspect-ratio:auto!important;
    border:2px solid rgb(var(--room-led-rgb)/.95)!important;
    background:radial-gradient(circle at 50% 42%,rgb(var(--room-led-rgb)/.25) 0%,rgb(var(--room-led-rgb)/.10) 35%,rgba(8,9,32,.98) 72%)!important;
    box-shadow:inset 0 0 24px rgb(var(--room-led-rgb)/.22),inset 0 0 2px rgba(255,255,255,.45),0 0 8px rgb(var(--room-led-rgb)/.88),0 0 27px rgb(var(--room-led-rgb)/.46),0 0 50px rgb(var(--room-led-rgb)/.18)!important;
  }
  body.live-room-page .action-stats .stat-action::before{
    content:"";position:absolute;inset:9px;border-radius:50%;pointer-events:none;
    border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 18px rgba(255,255,255,.04),0 0 12px rgb(var(--room-led-rgb)/.16);
  }
  body.live-room-page .action-stats .flame-stat{
    border-color:#ff48d7!important;background:radial-gradient(circle at 50% 42%,rgba(255,46,199,.25),rgba(84,19,116,.18) 42%,rgba(8,9,32,.98) 74%)!important;
    box-shadow:inset 0 0 25px rgba(255,50,207,.20),0 0 8px #ff48d7,0 0 27px rgba(255,55,209,.62),0 0 52px rgba(255,40,177,.25)!important;
  }
  body.live-room-page .action-stats .steal-stat{border-color:#b248ff!important;box-shadow:inset 0 0 25px rgba(171,65,255,.18),0 0 8px #b248ff,0 0 26px rgba(171,65,255,.52),0 0 48px rgba(128,55,255,.20)!important}
  body.live-room-page .action-stats .skip-stat{border-color:#6672ff!important;background:radial-gradient(circle at 50% 42%,rgba(80,91,255,.24),rgba(39,39,112,.16) 42%,rgba(8,9,32,.98) 74%)!important;box-shadow:inset 0 0 25px rgba(91,101,255,.18),0 0 8px #6672ff,0 0 26px rgba(80,91,255,.48),0 0 48px rgba(67,70,255,.18)!important}
  body.live-room-page .action-stats .flame-stat strong{font-size:56px!important;filter:drop-shadow(0 0 9px rgba(255,80,25,.95)) drop-shadow(0 0 18px rgba(255,40,170,.72))!important}
  body.live-room-page .action-stats .steal-stat .qup-steal-emoji{font-size:52px!important;filter:drop-shadow(0 0 10px rgb(var(--room-led-rgb)/.48))!important}
  body.live-room-page .action-stats .skip-stat strong{font-size:47px!important;filter:drop-shadow(0 0 11px rgba(102,112,255,.72))!important}
  body.live-room-page .action-stats .stat-action strong>span[id]{top:calc(100% + 7px)!important;height:30px!important;min-width:42px!important;padding:0 9px!important;font-size:15px!important;background:rgba(9,9,31,.96)!important}
}

@media(max-width:700px){
  /* Keep the chat header as the restore affordance, but make its control tiny. */
  body.live-room-page .qup-chat-toggle{width:30px!important;height:30px!important;min-width:30px!important;flex-basis:30px!important}
  body.live-room-page .qup-chat-toggle::before{left:7px!important;top:7px!important;width:14px!important;height:11px!important}
  body.live-room-page .qup-chat-toggle::after{left:10px!important;top:17px!important}
  body.live-room-page .chat-head{min-height:48px!important;padding:9px 12px!important}
  body.live-room-page .unified-room-shell.qup-chat-hidden .live-chat-panel{height:48px!important;min-height:48px!important;max-height:48px!important}
  body.live-room-page .unified-room-shell.qup-chat-hidden .live-chat-panel .chat-head{height:48px!important;min-height:48px!important}
}

/* ===== QU3 UI V2.4 — compact dock + tap-chat composer ===== */
body.live-room-page .chat-messages{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}
body.live-room-page .chat-message{
  width:min(94%,560px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.live-room-page .chat-empty{width:100%!important;text-align:center!important}

/* Composer stays out of the way until the chat stream/pinned area is tapped. */
body.live-room-page .chat-compose{
  max-height:0!important;
  min-height:0!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  transform:translateY(8px)!important;
  transition:max-height .2s ease,opacity .16s ease,transform .2s ease,margin .2s ease!important;
}
body.live-room-page .live-chat-panel.qup-compose-open .chat-compose{
  max-height:68px!important;
  opacity:1!important;
  overflow:visible!important;
  pointer-events:auto!important;
  margin:7px 4px 9px!important;
  transform:translateY(0)!important;
}
body.live-room-page .chat-messages{cursor:text}

@media(max-width:700px){
  /* Smaller icon artwork while preserving a comfortable 30px tap target. */
  body.live-room-page .qup-chat-toggle::before{left:8px!important;top:8px!important;width:11px!important;height:9px!important;border-width:1.4px!important}
  body.live-room-page .qup-chat-toggle::after{left:10px!important;top:15px!important;width:4px!important;height:4px!important;border-width:0 0 1.4px 1.4px!important}

  /* Bottom dock should feel like navigation, not a second content card. */
  body.live-room-page .qup-song-dock{grid-template-rows:62px minmax(0,1fr)!important;transform:translateY(calc(100% - 62px))!important}
  body.live-room-page .qup-song-dock-main{height:62px!important;min-height:62px!important;padding:0 10px!important;gap:7px!important}
  body.live-room-page .qup-dock-icon{width:39px!important;height:39px!important;min-width:39px!important;font-size:17px!important;border-radius:13px!important}
  body.live-room-page .qup-dock-add{min-width:70px!important}
  body.live-room-page .qup-dock-add small,body.live-room-page .qup-dock-next small{font-size:7px!important;letter-spacing:1.25px!important}
  body.live-room-page .qup-dock-add b,body.live-room-page .qup-dock-next b{font-size:11px!important}
  body.live-room-page .qup-dock-next-thumb{width:40px!important;height:30px!important;border-radius:7px!important}
  body.live-room-page .qup-dock-divider{height:32px!important}
  body.live-room-page .qup-dock-arrow{width:30px!important;height:30px!important;flex:0 0 30px!important;font-size:17px!important}
  body.live-room-page .live-chat-panel.qup-compose-open .chat-compose{max-height:62px!important}
}


/* ===== QU3 UI V2.5 — pinned-style chat cards + reliable flame frame ===== */
/* ===== QU3 UI V2.5.1 — corrected chat cards + visible flame frame ===== */
body.live-room-page .live-chat-panel .chat-messages{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  width:100%!important;
}
body.live-room-page .live-chat-panel .chat-message{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  gap:9px!important;
  width:min(92%,540px)!important;
  padding:10px 12px!important;
  margin:5px auto!important;
  border:1px solid rgb(var(--room-led-rgb) / .34)!important;
  border-radius:14px!important;
  background:linear-gradient(90deg,rgb(var(--room-led-rgb) / .11),rgba(7,9,20,.82))!important;
  box-shadow:0 0 14px rgb(var(--room-led-rgb) / .10),inset 0 0 14px rgb(var(--room-led-rgb) / .035)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}
body.live-room-page .live-chat-panel .chat-message.qup-own-message{
  border-color:rgb(var(--room-led-rgb) / .58)!important;
  background:linear-gradient(90deg,rgb(var(--room-led-rgb) / .16),rgba(7,9,20,.84))!important;
  box-shadow:0 0 18px rgb(var(--room-led-rgb) / .18),inset 0 0 16px rgb(var(--room-led-rgb) / .05)!important;
}
body.live-room-page .live-chat-panel .chat-message .chat-avatar{width:30px!important;height:30px!important;font-size:11px!important}
body.live-room-page .live-chat-panel .chat-message p{margin-top:2px!important}
body.live-room-page .live-chat-panel .qup-pinned-message{width:min(96%,560px)!important;margin:0 auto 8px!important}

/* Earlier V2 CSS explicitly hid this element with display:none!important. */
body.live-room-page .video-shell>.qup-flame-ring,
body.live-room-page .guest-video-shell>.qup-flame-ring{
  display:block!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:20!important;
  inset:2px!important;
  border-radius:inherit!important;
  opacity:0!important;
  transition:opacity .18s ease,filter .18s ease!important;
}
body.live-room-page .video-shell>.qup-flame-ring.on,
body.live-room-page .guest-video-shell>.qup-flame-ring.on{opacity:1!important}
body.live-room-page .qup-flame-ring::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border:2px solid var(--room-led)!important;
  border-radius:inherit!important;
  pointer-events:none!important;
}
body.live-room-page .qup-flame-ring.qup-heat-1::before{
  box-shadow:0 0 9px var(--room-led),0 0 20px rgb(var(--room-led-rgb) / .48)!important;
}
body.live-room-page .qup-flame-ring.qup-heat-2::before{
  border-width:3px!important;
  box-shadow:0 0 10px var(--room-led),0 0 27px rgb(var(--room-led-rgb) / .72),0 0 46px rgb(var(--room-led-rgb) / .34)!important;
}
body.live-room-page .qup-flame-ring.qup-heat-3::before{
  border-width:3px!important;
  box-shadow:0 0 11px #ffb12b,0 0 27px #ff5b20,0 0 48px rgb(var(--room-led-rgb) / .72),0 0 68px rgba(255,56,144,.36)!important;
  animation:qupRingPulse .48s ease-in-out infinite alternate!important;
}
body.live-room-page .qup-flame-ring.burst-orange{display:block!important;opacity:1!important}


/* ===== QU3 UI V2.6 — temporary flame burst BEHIND video ===== */
/* Persistent flame totals never leave a permanent frame/glow. The ring is visual only during a burst. */
body.live-room-page .video-shell>.qup-flame-ring,
body.live-room-page .guest-video-shell>.qup-flame-ring{
  display:block!important;
  position:absolute!important;
  inset:-7px!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:32px!important;
  opacity:0!important;
  border:0!important;
  background:transparent!important;
  filter:none!important;
  transition:none!important;
}
body.live-room-page .qup-flame-ring.on,
body.live-room-page .qup-flame-ring.qup-heat-1,
body.live-room-page .qup-flame-ring.qup-heat-2,
body.live-room-page .qup-flame-ring.qup-heat-3{opacity:0!important}
body.live-room-page .qup-flame-ring::before{
  content:""!important;position:absolute!important;inset:0!important;border:0!important;border-radius:inherit!important;
  background:transparent!important;box-shadow:none!important;animation:none!important;opacity:0!important;
}
body.live-room-page .qup-flame-ring.burst-orange{
  opacity:1!important;
  animation:qupVideoBackFlameBurst 2.65s ease-out forwards!important;
}
body.live-room-page .qup-flame-ring.burst-orange::before{
  opacity:1!important;
  background:radial-gradient(ellipse at 50% 88%,rgba(255,91,24,.62) 0%,rgba(255,36,155,.34) 35%,rgb(var(--room-led-rgb)/.25) 58%,transparent 76%)!important;
  box-shadow:0 0 18px rgba(255,106,25,.78),0 0 42px rgba(255,43,166,.55),0 0 72px rgb(var(--room-led-rgb)/.42)!important;
  filter:blur(3px)!important;
}
@keyframes qupVideoBackFlameBurst{
  0%{opacity:0;transform:scale(.985)}
  12%{opacity:1;transform:scale(1.012)}
  45%{opacity:.9;transform:scale(1.018)}
  100%{opacity:0;transform:scale(1.025)}
}
/* Embers sit behind the video but can rise just beyond its top edge. */
body.live-room-page .video-shell>.qup-flame-particle,
body.live-room-page .guest-video-shell>.qup-flame-particle{
  z-index:-1!important;pointer-events:none!important;width:5px!important;height:13px!important;border-radius:70% 30% 70% 30%!important;
  background:linear-gradient(to top,#ff4d18,#ffb21f 55%,#fff2a5)!important;
  box-shadow:0 0 8px #ff5a1f,0 0 14px rgba(255,54,157,.72)!important;
  animation:qupVideoEmberRise 1.45s ease-out forwards!important;
}
@keyframes qupVideoEmberRise{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.65) rotate(0deg)}
  15%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--qup-drift,8px),-62px,0) scale(.2) rotate(28deg)}
}
/* The video itself stays above the decorative effect. */
body.live-room-page .video-shell,
body.live-room-page .guest-video-shell{isolation:isolate!important}
body.live-room-page .video-shell #player,
body.live-room-page .video-shell #guestPlayer,
body.live-room-page .guest-video-shell #guestPlayer,
body.live-room-page .video-shell iframe,
body.live-room-page .guest-video-shell iframe{z-index:1!important}

/* Mobile only: give the player breathing room below the compact top bar. */
@media(max-width:700px){
  body.live-room-page .video-shell,
  body.live-room-page .guest-video-shell{margin-top:12px!important}
}
@media(prefers-reduced-motion:reduce){
  body.live-room-page .qup-flame-ring.burst-orange{animation:none!important;opacity:.55!important}
  body.live-room-page .qup-flame-particle{display:none!important}
}

/* ===== QU3 V2.6.1 — visible flame burst layer fix ===== */
/* V2.6 put the burst at z-index:-1 inside an isolated video shell, which placed it
   behind the shell itself. Keep the glow below YouTube, but above the shell surface. */
body.live-room-page .video-shell,
body.live-room-page .guest-video-shell{overflow:visible!important;isolation:isolate!important}
body.live-room-page .video-shell>.qup-flame-ring,
body.live-room-page .guest-video-shell>.qup-flame-ring{z-index:0!important}
body.live-room-page .video-shell>.qup-flame-particle,
body.live-room-page .guest-video-shell>.qup-flame-particle{z-index:3!important}
body.live-room-page .video-shell #player,
body.live-room-page .video-shell #guestPlayer,
body.live-room-page .guest-video-shell #guestPlayer,
body.live-room-page .video-shell iframe,
body.live-room-page .guest-video-shell iframe{position:relative!important;z-index:2!important}

/* ===== QU3 V2.6.3 — exact LED frame + tight flame halo ===== */
/* The shell owns the LED border. YouTube is clipped inside it so it can never cover the border. */
body.live-room-page .video-shell,
body.live-room-page .guest-video-shell{
  box-sizing:border-box!important;
  border:3px solid var(--room-led)!important;
  border-radius:30px!important;
  background:#000!important;
  overflow:visible!important;
  isolation:isolate!important;
}
body.live-room-page .video-shell #player,
body.live-room-page .video-shell #guestPlayer,
body.live-room-page .guest-video-shell #guestPlayer{
  position:absolute!important;
  inset:3px!important;
  width:auto!important;
  height:auto!important;
  overflow:hidden!important;
  border-radius:25px!important;
  z-index:2!important;
  background:#000!important;
}
body.live-room-page .video-shell #player iframe,
body.live-room-page .video-shell #guestPlayer iframe,
body.live-room-page .guest-video-shell #guestPlayer iframe,
body.live-room-page .video-shell>iframe,
body.live-room-page .guest-video-shell>iframe{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:25px!important;
  overflow:hidden!important;
}
/* Flame layer is exactly the shell size. Only its shadow extends outside. */
body.live-room-page .video-shell>.qup-flame-ring,
body.live-room-page .guest-video-shell>.qup-flame-ring{
  inset:0!important;
  border-radius:30px!important;
  z-index:1!important;
  transform:none!important;
  background:transparent!important;
}
body.live-room-page .qup-flame-ring.burst-orange{
  animation:qupTightVideoFlame 2.35s ease-out forwards!important;
}
body.live-room-page .qup-flame-ring.burst-orange::before{
  inset:0!important;
  border-radius:30px!important;
  background:transparent!important;
  border:0!important;
  filter:none!important;
  box-shadow:0 0 10px rgba(255,101,24,.72),0 0 18px rgba(255,38,153,.52),0 0 26px rgb(var(--room-led-rgb) / .28)!important;
}
@keyframes qupTightVideoFlame{
  0%{opacity:0;transform:none}
  12%{opacity:1;transform:none}
  55%{opacity:.72;transform:none}
  100%{opacity:0;transform:none}
}
body.live-room-page .video-shell>.qup-flame-particle,
body.live-room-page .guest-video-shell>.qup-flame-particle{z-index:4!important}
@media(max-width:700px){
  body.live-room-page .video-shell,
  body.live-room-page .guest-video-shell{border-radius:28px!important}
  body.live-room-page .video-shell #player,
  body.live-room-page .video-shell #guestPlayer,
  body.live-room-page .guest-video-shell #guestPlayer,
  body.live-room-page .video-shell #player iframe,
  body.live-room-page .video-shell #guestPlayer iframe,
  body.live-room-page .guest-video-shell #guestPlayer iframe{border-radius:23px!important}
  body.live-room-page .video-shell>.qup-flame-ring,
  body.live-room-page .guest-video-shell>.qup-flame-ring,
  body.live-room-page .qup-flame-ring.burst-orange::before{border-radius:28px!important}
}

/* ===== QU3 V2.6.4 — YouTube fills LED frame correctly ===== */
/* YT replaces #player/#guestPlayer with the iframe itself. The ID selector must therefore
   size that generated iframe explicitly; otherwise the API's 640x390 dimensions win. */
body.live-room-page .video-shell iframe#player,
body.live-room-page .video-shell iframe#guestPlayer,
body.live-room-page .guest-video-shell iframe#guestPlayer{
  position:absolute!important;
  top:3px!important;
  right:3px!important;
  bottom:3px!important;
  left:3px!important;
  inset:3px!important;
  width:calc(100% - 6px)!important;
  height:calc(100% - 6px)!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:25px!important;
  z-index:2!important;
  display:block!important;
}
@media(max-width:700px){
  body.live-room-page .video-shell iframe#player,
  body.live-room-page .video-shell iframe#guestPlayer,
  body.live-room-page .guest-video-shell iframe#guestPlayer{
    border-radius:23px!important;
  }
}


/* ===== QU3 V2.6.5 — wider video inset, exact queue-end frame ===== */
/* Keep a 3px reveal above/below for the LED, but only 1px at the sides so
   the 16:9 YouTube image reaches the inner LED edge without a black gutter. */
body.live-room-page .video-shell iframe#player,
body.live-room-page .video-shell iframe#guestPlayer,
body.live-room-page .guest-video-shell iframe#guestPlayer{
  top:3px!important;
  bottom:3px!important;
  left:1px!important;
  right:1px!important;
  inset:auto!important;
  width:calc(100% - 2px)!important;
  height:calc(100% - 6px)!important;
}

/* ===== QU3 V2.6.6 — restore original full-size video; LED overlays edge ===== */
/* Undo the V2.6.3–V2.6.5 inset approach. The player again fills the original
   16:9 shell exactly; the LED is drawn over its edge instead of consuming space. */
body.live-room-page .video-shell,
body.live-room-page .guest-video-shell{
  border:0!important;
  background:#000!important;
  overflow:visible!important;
  position:relative!important;
}
body.live-room-page .video-shell #player,
body.live-room-page .video-shell #guestPlayer,
body.live-room-page .guest-video-shell #guestPlayer,
body.live-room-page .video-shell iframe,
body.live-room-page .guest-video-shell iframe,
body.live-room-page .video-shell iframe#player,
body.live-room-page .video-shell iframe#guestPlayer,
body.live-room-page .guest-video-shell iframe#guestPlayer{
  position:absolute!important;
  inset:0!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:inherit!important;
  display:block!important;
  z-index:2!important;
  background:#000!important;
}
/* LED line overlays the video edge, so there is no black gutter. */
body.live-room-page .video-shell::after,
body.live-room-page .guest-video-shell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  border:3px solid var(--room-led);
  border-radius:inherit;
  box-sizing:border-box;
  box-shadow:inset 0 0 8px rgb(var(--room-led-rgb)/.22),0 0 12px rgb(var(--room-led-rgb)/.22);
}
/* Flame layer tracks the exact original shell geometry; only shadow escapes it. */
body.live-room-page .video-shell>.qup-flame-ring,
body.live-room-page .guest-video-shell>.qup-flame-ring{
  inset:0!important;
  border-radius:inherit!important;
  transform:none!important;
}

/* ===== QU3 V2.6.8 — clipped mobile video viewport ===== */
/* Keep the desktop geometry untouched. On phones, the player may be enlarged
   slightly to hide cinematic letterboxing, but a dedicated viewport clips it
   to the exact LED frame so YouTube can never spill outside the border. */
body.live-room-page .qup-video-viewport{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  border-radius:inherit!important;
  z-index:2!important;
  background:#000!important;
}
body.live-room-page .qup-video-viewport #player,
body.live-room-page .qup-video-viewport #guestPlayer,
body.live-room-page .qup-video-viewport iframe{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  border:0!important;
  border-radius:inherit!important;
  display:block!important;
}
@media(max-width:700px){
  body.live-room-page .qup-video-viewport{border-radius:25px!important;}
  body.live-room-page .qup-video-viewport iframe#player,
  body.live-room-page .qup-video-viewport iframe#guestPlayer{
    width:118%!important;
    height:118%!important;
    left:-9%!important;
    top:-9%!important;
    right:auto!important;
    bottom:auto!important;
    inset:auto!important;
    border-radius:0!important;
  }
}

/* ===== QU3 V2.6.9 — mobile iframe/frame alignment ===== */
/* Do not zoom the cross-origin YouTube iframe: zooming also enlarges/crops
   YouTube's own controls. On mobile the iframe now matches the LED viewport
   exactly, just like the working desktop player. */
@media(max-width:700px){
  body.live-room-page .qup-video-viewport iframe#player,
  body.live-room-page .qup-video-viewport iframe#guestPlayer{
    position:absolute!important;
    inset:0!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    transform:none!important;
    border:0!important;
    border-radius:inherit!important;
  }
}

/* ===== QU3 V2.6.10 — mobile LED right-edge wrap ===== */
/* The mobile YouTube player is now correctly sized. Keep it untouched and
   extend only the decorative LED overlay a few pixels on the right so the
   border fully wraps the player edge. Desktop remains unchanged. */
@media(max-width:700px){
  body.live-room-page .video-shell::after,
  body.live-room-page .guest-video-shell::after{
    right:-5px!important;
  }
}

/* ===== QU3 V2.6.11 — exact mobile LED clipping + clean glow ===== */
@media(max-width:700px){
  /* The LED shell stays the same size. Clip only the YouTube viewport a few
     pixels inside the decorative LED line so the iframe can never peek past it. */
  body.live-room-page .qup-video-viewport{
    inset:3px!important;
    width:auto!important;
    height:auto!important;
    border-radius:24px!important;
    overflow:hidden!important;
    background:#000!important;
    box-shadow:none!important;
  }
  body.live-room-page .qup-video-viewport iframe,
  body.live-room-page .qup-video-viewport iframe#player,
  body.live-room-page .qup-video-viewport iframe#guestPlayer{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border-radius:21px!important;
    overflow:hidden!important;
  }
  /* Undo V2.6.10's asymmetric border extension. The viewport is now clipped
     correctly, so the LED outline can match the shell on every side. */
  body.live-room-page .video-shell::after,
  body.live-room-page .guest-video-shell::after{
    inset:0!important;
    right:0!important;
  }
  /* Remove the old rectangular ambient player glow. The LED pseudo-element
     remains the only persistent glow; flame burst remains temporary. */
  body.live-room-page .video-shell,
  body.live-room-page .guest-video-shell{
    box-shadow:none!important;
    background:transparent!important;
  }
}

/* QU3 V2.6.12 — live room people pill + queue count */
body.live-room-page .chat-head{position:relative!important;}
body.live-room-page .qup-room-people-wrap{margin-left:auto;position:relative;display:flex;align-items:center;}
body.live-room-page .qup-room-people-btn{height:34px;padding:0 11px;border-radius:18px;border:1px solid rgb(var(--room-led-rgb)/.42);background:rgba(8,8,28,.78);color:#dddaf5;display:flex;align-items:center;gap:6px;font:600 11px/1 inherit;white-space:nowrap;box-shadow:inset 0 0 14px rgb(var(--room-led-rgb)/.06);cursor:pointer;}
body.live-room-page .qup-room-people-btn:hover,body.live-room-page .qup-room-people-btn[aria-expanded="true"]{border-color:rgb(var(--room-led-rgb)/.8);box-shadow:0 0 14px rgb(var(--room-led-rgb)/.16),inset 0 0 14px rgb(var(--room-led-rgb)/.08);}
body.live-room-page .qup-room-people-icon{font-size:12px;transform:rotate(180deg);opacity:.9;}
body.live-room-page .qup-room-people-chevron{font-size:12px;opacity:.75;margin-left:1px;}
body.live-room-page .qup-room-people-menu{position:absolute;right:0;top:calc(100% + 8px);width:190px;max-height:240px;overflow:auto;padding:7px;border:1px solid rgb(var(--room-led-rgb)/.5);border-radius:14px;background:rgba(7,6,24,.97);box-shadow:0 16px 38px rgba(0,0,0,.48),0 0 22px rgb(var(--room-led-rgb)/.14);z-index:80;backdrop-filter:blur(16px);}
body.live-room-page .qup-room-person{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;color:#f3efff;min-width:0;}
body.live-room-page .qup-room-person+.qup-room-person{border-top:1px solid rgb(var(--room-led-rgb)/.09);}
body.live-room-page .qup-room-person-avatar{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,rgb(var(--room-led-rgb)/.8),rgba(35,20,74,.95));border:1px solid rgb(var(--room-led-rgb)/.75);box-shadow:0 0 10px rgb(var(--room-led-rgb)/.2);font-size:10px;font-weight:800;color:#fff;text-transform:uppercase;}
body.live-room-page .qup-room-person-copy{display:flex;flex-direction:column;min-width:0;line-height:1.15;}
body.live-room-page .qup-room-person-copy b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.live-room-page .qup-room-person-copy small{font-size:8px;color:#9c97bb;margin-top:2px;}
@media(max-width:700px){
 body.live-room-page .chat-head{display:flex!important;align-items:center!important;gap:8px!important;}
 body.live-room-page .chat-head>div:first-child{min-width:0;}
 body.live-room-page .qup-room-people-wrap{margin-left:auto!important;}
 body.live-room-page .qup-room-people-btn{height:29px;padding:0 8px;gap:4px;font-size:9px;}
 body.live-room-page .qup-room-people-icon{font-size:10px;}
 body.live-room-page .qup-room-people-menu{right:0;width:174px;top:calc(100% + 6px);}
}
body.live-room-page .qup-room-people-icon{transform:none!important;width:13px;height:13px;display:inline-flex!important;}
body.live-room-page .qup-room-people-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* ===== QU3 V2.6.14 — mobile chat compact + keyboard-stable ===== */
@media(max-width:700px){
  /* Chat should consume only the space its visible content needs. */
  body.live-room-page .live-chat-panel{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    flex:none!important;
  }
  body.live-room-page .live-chat-panel .chat-messages{
    flex:none!important;
    min-height:0!important;
    height:auto!important;
    max-height:44vh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-bottom:6px!important;
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    border-radius:0!important;
  }
  /* Remove the old empty/glowing tray behind the composer. */
  body.live-room-page .live-chat-panel .chat-compose,
  body.live-room-page .live-chat-panel.qup-compose-open .chat-compose{
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
  }
  body.live-room-page .live-chat-panel.qup-compose-open .chat-compose{
    margin:5px 4px 4px!important;
  }
  /* Do not let focus/keyboard animations translate the chat panel or composer. */
  body.live-room-page .live-chat-panel.qup-compose-open,
  body.live-room-page .live-chat-panel.qup-compose-open .chat-head,
  body.live-room-page .live-chat-panel.qup-compose-open .chat-messages{
    transform:none!important;
  }
}


/* ===== QU3 V2.6.15 — compact composer + true no-song interaction lock ===== */
@media(max-width:700px){
  body.live-room-page .live-chat-panel.qup-compose-open .chat-compose{
    max-height:50px!important;
    margin:3px 4px 0!important;
    padding:0!important;
  }
  body.live-room-page .live-chat-panel.qup-compose-open{padding-bottom:0!important;margin-bottom:0!important;}
  body.live-room-page .live-chat-panel.qup-compose-open .chat-messages{padding-bottom:2px!important;margin-bottom:0!important;}
}
body.live-room-page .action-stats button:disabled,
body.live-room-page .action-stats button.qup-disabled{
  pointer-events:none!important;
  cursor:default!important;
  opacity:.42!important;
  filter:saturate(.45)!important;
}

/* ===== QU3 V2.6.16 — chat height collapse + room chevron alignment ===== */
@media(max-width:700px){
  /* Never reserve viewport-height space beneath the composer. */
  body.live-room-page .unified-room-shell{
    min-height:0!important;
  }
  body.live-room-page .live-chat-panel,
  body.live-room-page .live-chat-panel.qup-compose-open{
    min-height:0!important;
    height:max-content!important;
    max-height:none!important;
    padding-bottom:0!important;
    margin-bottom:0!important;
    align-self:flex-start!important;
  }
  body.live-room-page .live-chat-panel .chat-messages,
  body.live-room-page .live-chat-panel.qup-compose-open .chat-messages{
    min-height:0!important;
    height:auto!important;
    padding-bottom:2px!important;
    margin-bottom:0!important;
  }
  body.live-room-page .live-chat-panel .chat-compose,
  body.live-room-page .live-chat-panel.qup-compose-open .chat-compose{
    min-height:0!important;
    height:46px!important;
    max-height:46px!important;
    margin:3px 4px 0!important;
    padding:0!important;
  }
  /* Keep the compact people pill vertically centered. */
  body.live-room-page .qup-room-people-btn{
    align-items:center!important;
  }
  body.live-room-page .qup-room-people-chevron{
    position:relative!important;
    display:inline-block!important;
    width:7px!important;
    height:7px!important;
    margin:0 0 3px 1px!important;
    font-size:0!important;
    line-height:0!important;
    opacity:.8!important;
    flex:0 0 7px!important;
  }
  body.live-room-page .qup-room-people-chevron::after{
    content:""!important;
    position:absolute!important;
    left:1px!important;
    top:0!important;
    width:5px!important;
    height:5px!important;
    border-right:1.5px solid currentColor!important;
    border-bottom:1.5px solid currentColor!important;
    transform:rotate(45deg)!important;
    transform-origin:center!important;
  }
}


/* ===== QU3 V2.6.17 — six-message live party feed ===== */
body.live-room-page .chat-messages{
  overflow-y:hidden!important;
  overflow-x:hidden!important;
  scrollbar-width:none!important;
}
body.live-room-page .chat-messages::-webkit-scrollbar{display:none!important;}
@media(max-width:700px){
  body.live-room-page .live-chat-panel .chat-messages,
  body.live-room-page .live-chat-panel.qup-compose-open .chat-messages{
    overflow-y:hidden!important;
    max-height:none!important;
    height:auto!important;
  }
}


/* ===== QU3 V2.6.21 — mobile chat ends at content; dock follows it ===== */
@media(max-width:700px){
  /* The old fixed footer left a large empty viewport gap after a short 6-message feed.
     Closed dock now participates in page flow immediately after chat, then sticks to
     the bottom edge only while scrolling. Opening the song drawer still uses the
     existing full-screen fixed drawer behavior. */
  body.live-room-page .unified-room-shell{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }
  body.live-room-page .live-chat-panel,
  body.live-room-page .live-chat-panel.qup-compose-open{
    flex:none!important;
    align-self:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-bottom:8px!important;
  }
  body.live-room-page .live-chat-panel .chat-messages{
    flex:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-bottom:0!important;
    padding-bottom:4px!important;
  }
  body.live-room-page .live-chat-panel .chat-compose,
  body.live-room-page .live-chat-panel.qup-compose-open .chat-compose{
    margin:4px 4px 4px!important;
  }
  body.live-room-page .qup-song-dock:not(.open){
    position:sticky!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    height:62px!important;
    min-height:62px!important;
    transform:none!important;
    margin:0!important;
    z-index:1200!important;
    grid-template-rows:62px 0!important;
  }
  body.live-room-page .qup-song-dock:not(.open)>.qup-song-dock-main{
    height:62px!important;
    min-height:62px!important;
  }
  body.live-room-page .qup-song-dock.open{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:56px!important;
    bottom:0!important;
    width:100%!important;
    height:auto!important;
    transform:none!important;
    margin:0!important;
    grid-template-rows:62px minmax(0,1fr)!important;
  }
}

/* ===== QU3 V2.6.26 — fast, clean interaction feedback ===== */
body.live-room-page .action-stats button,
body.live-room-page .action-stats .flame-stat,
body.live-room-page .action-stats .steal-stat,
body.live-room-page .action-stats .skip-stat{
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:transform 110ms cubic-bezier(.2,.8,.2,1),filter 140ms ease,box-shadow 140ms ease!important;
}
body.live-room-page .action-stats button:active,
body.live-room-page .action-stats .flame-stat:active,
body.live-room-page .action-stats .steal-stat:active,
body.live-room-page .action-stats .skip-stat:active,
body.live-room-page .action-stats .qup-fast-hit{
  transform:scale(.94)!important;
}
/* The temporary video flame layer must leave absolutely no second border after fade. */
body.live-room-page .qup-flame-ring:not(.burst-orange),
body.live-room-page .qup-flame-ring:not(.burst-orange)::before{
  opacity:0!important;
  box-shadow:none!important;
  background:transparent!important;
  filter:none!important;
}

/* ===== QU3 V2.6.27 — true content-sized mobile chat + dock ===== */
@media(max-width:700px){
  /* Nothing in the room should reserve a fake viewport-sized area below chat. */
  body.live-room-page{
    padding-bottom:0!important;
    min-height:0!important;
  }
  body.live-room-page .live-room-shell.unified-room-shell{
    min-height:0!important;
    height:auto!important;
    padding-bottom:0!important;
    margin-bottom:0!important;
    gap:8px!important;
  }
  body.live-room-page .live-chat-panel,
  body.live-room-page .live-chat-panel.qup-compose-open{
    flex:0 0 auto!important;
    align-self:stretch!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0 0 8px!important;
    padding:0!important;
  }
  body.live-room-page .live-chat-panel .chat-messages,
  body.live-room-page .live-chat-panel.qup-compose-open .chat-messages{
    flex:0 0 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding-bottom:2px!important;
    overflow:hidden!important;
  }
  body.live-room-page .live-chat-panel .chat-compose,
  body.live-room-page .live-chat-panel.qup-compose-open .chat-compose{
    flex:0 0 46px!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    margin:4px 4px 4px!important;
    padding:0!important;
  }
  /* Static is intentional: sticky bottom was pushing a short chat feed down to
     the viewport edge and visually creating the large blank gap. */
  body.live-room-page .qup-song-dock:not(.open){
    position:relative!important;
    inset:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:62px!important;
    min-height:62px!important;
    margin:0!important;
    transform:none!important;
    grid-template-rows:62px 0!important;
  }
}

/* ===== QU3 V2.6.28 — mobile document background through Safari bottom area ===== */
html{
  background:#050617;
}
@media(max-width:700px){
  html,
  body.live-room-page{
    background-color:#050617!important;
  }
  html{
    min-height:100%;
  }
  body.live-room-page{
    /* Keep the content-sized room layout from V2.6.27; only paint the document
       beneath it so Safari never exposes its default white canvas. */
    background:
      radial-gradient(circle at 80% 0,#171046 0,transparent 32%),
      #050617!important;
  }
}

/* ===== QU3 V2.6.29 — restore fixed mobile dock + full dark viewport ===== */
@media(max-width:700px){
  html{
    min-height:100%!important;
    background:#050617!important;
  }
  body.live-room-page{
    min-height:100vh!important;
    min-height:100dvh!important;
    margin:0!important;
    background:
      radial-gradient(circle at 80% 0,#171046 0,transparent 32%),
      #050617!important;
    background-attachment:fixed!important;
    /* Only protect the last chat content from the fixed dock; this does not
       position the dock or create a spacer below it. */
    padding-bottom:62px!important;
  }
  body.live-room-page .live-room-shell.unified-room-shell{
    min-height:calc(100dvh - 56px)!important;
    background:transparent!important;
  }
  body.live-room-page .qup-song-dock:not(.open){
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    height:62px!important;
    min-height:62px!important;
    margin:0!important;
    transform:none!important;
    z-index:1200!important;
    grid-template-rows:62px 0!important;
  }
  body.live-room-page .qup-song-dock:not(.open)>.qup-song-dock-main{
    height:62px!important;
    min-height:62px!important;
  }
}

/* ===== QU3 V2.6.30 — mobile playlist uses the full open drawer ===== */
@media(max-width:700px){
  /* The playlist itself still had an old 330px desktop cap. That made the
     cards stop halfway down the open mobile drawer and left a dead dark area. */
  body.live-room-page .qup-song-dock.open #qupPlaylistPane.active{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.live-room-page .qup-song-dock.open .qup-playlist-list{
    display:grid!important;
    max-height:none!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    padding:1px 1px max(18px,env(safe-area-inset-bottom))!important;
  }
  /* The drawer panel is the one scroll surface, so every saved song remains
     reachable without creating a second nested scrollbar. */
  body.live-room-page .qup-song-dock.open>.qup-song-dock-panel{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:max(22px,env(safe-area-inset-bottom))!important;
  }
  body.live-room-page .qup-song-dock.open .qup-library-tabs{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    background:#080b18!important;
  }
}


/* V2.6.31 — shared room info: listeners can read room name/description without owner controls */
html.qup-room-listener #roomSettingsPanel.qup-room-info-only .qup-share-field,
html.qup-room-listener #roomSettingsPanel.qup-room-info-only .qup-save-room-info,
html.qup-room-listener #roomSettingsPanel.qup-room-info-only .qup-setting-row,
html.qup-room-listener #roomSettingsPanel.qup-room-info-only .qup-led-setting,
html.qup-room-listener #roomSettingsPanel.qup-room-info-only .qup-ban-list-open,
html.qup-room-listener #roomSettingsPanel.qup-room-info-only .qup-ban-list-view{display:none!important}
html.qup-room-listener #roomSettingsPanel.qup-room-info-only input[readonly],
html.qup-room-listener #roomSettingsPanel.qup-room-info-only textarea[readonly]{opacity:1!important;cursor:default!important}


/* QU3 2.6.35 — permanent room URL claim */
.qup-url-preview{margin:-2px 0 18px;padding:13px 14px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.035)}
.qup-url-preview>span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.58;margin-bottom:6px}
.qup-url-preview code{display:block;font-size:15px;font-weight:800;word-break:break-all}
.qup-url-status{display:block;margin-top:7px;font-size:12px;opacity:.7}.qup-url-status.available{color:#80f6ad;opacity:1}.qup-url-status.taken{color:#ff8f9c;opacity:1}

/* QU3 V2.6.43 — public room discovery */
.qup-discover-page{min-height:100dvh;background:radial-gradient(circle at 50% -20%,#27145a 0,transparent 36%),radial-gradient(circle at 100% 30%,#291044 0,transparent 28%),#060816;color:#f7f7ff}
.qup-discover-nav{height:70px;padding:0 clamp(18px,4vw,56px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #242b48;background:#060816d9;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}
.qup-discover-identity{font-size:13px;font-weight:850;color:#cbb9ff;border:1px solid #342c56;background:#0d1020;padding:8px 12px;border-radius:999px}
.qup-discover-shell{width:min(1380px,100%);margin:0 auto;padding:54px clamp(18px,4vw,54px) 80px}
.qup-discover-hero{text-align:center;max-width:980px;margin:0 auto 48px}.qup-discover-hero h1{font-size:clamp(42px,6vw,72px);letter-spacing:-4px;line-height:.95;margin:12px 0 14px}.qup-discover-hero>p{color:#929bb8;margin:0 auto 28px;font-size:16px}
.qup-room-search-wrap{height:66px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;background:#0d1122;border:1px solid #343b61;border-radius:20px;padding:0 18px;box-shadow:0 18px 60px #0007,0 0 34px #8a42ff12;transition:border-color .15s,box-shadow .15s}.qup-room-search-wrap:focus-within{border-color:#8e57ff;box-shadow:0 18px 60px #0007,0 0 0 3px #8a42ff18,0 0 38px #8a42ff20}.qup-room-search-icon{font-size:27px;line-height:1;color:#9c8cc5;transform:rotate(-20deg)}.qup-room-search-wrap input{min-width:0;width:100%;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font:inherit;font-size:17px!important;margin:0!important;padding:0!important;box-shadow:none!important}.qup-room-search-wrap input::placeholder{color:#66708d}.qup-room-search-wrap button{width:34px;height:34px;border:0;border-radius:50%;background:#1a2036;color:#b7bfd8;font-size:22px;cursor:pointer}.qup-discover-status{font-size:11px!important;margin-top:10px!important;min-height:16px!important;color:#68738f!important}
.qup-public-section{margin-top:10px}.qup-public-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.qup-public-head h2{font-size:27px;margin:5px 0 0;letter-spacing:-1px}.qup-live-room-total{font-size:12px;font-weight:900;color:#d8caff;border:1px solid #3b315f;background:#121126;padding:8px 11px;border-radius:999px}
.qup-room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.qup-public-room-card{min-width:0;overflow:hidden;background:linear-gradient(145deg,#0e1327,#090d1b);border:1px solid #252c49;border-radius:19px;cursor:pointer;box-shadow:0 16px 45px #0004;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.qup-public-room-card:hover,.qup-public-room-card:focus-visible{transform:translateY(-3px);border-color:#6849a3;box-shadow:0 20px 55px #0007,0 0 28px #8a42ff16;outline:0}.qup-public-room-media{position:relative;aspect-ratio:16/9;background:#05060d;overflow:hidden}.qup-public-room-media img{display:block;width:100%;height:100%;object-fit:cover}.qup-public-room-media:after{content:"";position:absolute;inset:auto 0 0;height:44%;background:linear-gradient(transparent,#090d1be8);pointer-events:none}.qup-public-live-badge{position:absolute;z-index:2;left:12px;top:12px;padding:5px 8px;border-radius:7px;background:#ff3f8f;color:#fff;font-size:9px;font-weight:1000;letter-spacing:1.3px;box-shadow:0 0 18px #ff3f8f66}.qup-public-room-idle{width:100%;height:100%;display:grid;place-items:center;align-content:center;gap:4px;background:radial-gradient(circle,#211545 0,#090b17 65%)}.qup-public-room-idle span{font-size:48px;font-weight:1000;font-style:italic;background:linear-gradient(135deg,#75c7ff,#9c4cff 50%,#ff43d1);-webkit-background-clip:text;color:transparent}.qup-public-room-idle small{font-size:8px;letter-spacing:2px;color:#777f9c}.qup-public-room-body{padding:14px 15px 15px}.qup-public-song{font-size:11px;font-weight:800;color:#a98cff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}.qup-public-room-body h3{font-size:18px;line-height:1.15;margin:0 0 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qup-public-room-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#77819d;font-size:10px;font-weight:700}.qup-public-room-meta>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qup-public-member-count{flex:0 0 auto!important;color:#aeb6ce!important}.qup-room-empty{min-height:220px;border:1px dashed #303755;border-radius:19px;display:grid;place-items:center;align-content:center;text-align:center;gap:6px;color:#7f89a6}.qup-room-empty b{color:#d8dcef;font-size:18px}.qup-room-empty span{font-size:12px}
@media(max-width:980px){.qup-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.qup-discover-nav{height:60px}.qup-discover-nav .logo{font-size:25px}.qup-discover-shell{padding-top:34px}.qup-discover-hero{margin-bottom:34px}.qup-discover-hero h1{font-size:43px;letter-spacing:-3px}.qup-discover-hero>p{font-size:13px}.qup-room-search-wrap{height:58px;border-radius:17px;padding:0 14px}.qup-room-search-wrap input{font-size:14px!important}.qup-room-grid{grid-template-columns:1fr;gap:14px}.qup-public-head h2{font-size:21px}.qup-public-room-body h3{font-size:17px}}


/* QU3 V2.6.44 — compact live-only room browser */
.qup-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;max-width:980px;margin:0 auto}
.qup-public-room-card{border-radius:15px!important}
.qup-public-room-body{padding:10px 11px 11px!important}
.qup-public-song{font-size:9px!important;margin-bottom:4px!important}
.qup-public-room-body h3{font-size:15px!important;margin-bottom:8px!important}
.qup-public-room-meta{font-size:9px!important;gap:6px!important}
.qup-public-live-badge{left:8px!important;top:8px!important;padding:4px 6px!important;font-size:8px!important}
@media(max-width:620px){
  .qup-room-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .qup-public-room-body{padding:8px 8px 9px!important}
  .qup-public-song{font-size:8px!important}
  .qup-public-room-body h3{font-size:13px!important;margin-bottom:7px!important}
  .qup-public-room-meta{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;font-size:8px!important}
  .qup-public-member-count{justify-self:start}
  .qup-public-live-badge{left:6px!important;top:6px!important;font-size:7px!important}
}


/* QU3 V2.6.47 — navbar-style public room cards */
.qup-public-navbar-meta{display:grid;gap:2px!important}
.qup-public-nav-line{display:flex;align-items:center;min-width:0;gap:6px}
.qup-public-nav-icon{width:15px;height:15px;display:inline-grid;place-items:center;flex:0 0 15px;color:#a76cff;text-shadow:0 0 10px rgba(167,108,255,.55);font-weight:1000}
.qup-public-room-icon svg{display:block;width:13px;height:13px;fill:currentColor;filter:drop-shadow(0 0 5px rgba(167,108,255,.38))}
.qup-public-song-icon{font-size:16px;line-height:1}
.qup-public-room-name,.qup-public-song{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qup-public-room-name{font-size:14px;line-height:1.2;color:#f7f7ff}
.qup-public-host{padding-left:21px;color:#77819d;font-size:8px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.qup-public-song{font-size:10px!important;line-height:1.25;color:#eeeaff!important;margin:0!important}
.qup-public-member-count{display:flex;align-items:center;gap:4px;padding-left:21px;margin-top:2px;color:#8d96b1!important;font-size:8px;font-weight:750;white-space:nowrap}
.qup-public-member-count .live-dot{width:5px;height:5px;flex:0 0 5px}
.qup-public-headphones{font-size:9px}
.qup-public-member-count b{color:#d7dcf0;font-size:9px}
@media(max-width:620px){
  .qup-public-navbar-meta{padding:8px!important}
  .qup-public-nav-line{gap:4px}
  .qup-public-nav-icon{width:12px;height:12px;flex-basis:12px}
  .qup-public-room-icon svg{width:11px;height:11px}
  .qup-public-song-icon{font-size:13px}
  .qup-public-room-name{font-size:11px}
  .qup-public-song{font-size:8px!important}
  .qup-public-host,.qup-public-member-count{padding-left:16px;font-size:7px}
}


/* QU3 V2.6.49 — discovery card DJ + compact audience count */
.qup-public-live-badge{display:none!important}
.qup-public-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:21px;margin-top:4px;min-width:0}
.qup-public-current-dj{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8f98b5;font-size:8px;font-weight:750}
.qup-public-member-count{padding-left:0!important;margin-top:0!important;margin-left:auto!important;gap:3px!important;flex:0 0 auto!important}
.qup-public-member-count .live-dot{display:none!important}
.qup-public-headphones{font-size:10px!important;line-height:1}
.qup-public-member-count b{font-size:9px!important}
@media(max-width:620px){.qup-public-card-footer{padding-left:16px;gap:5px}.qup-public-current-dj{font-size:7px}.qup-public-headphones{font-size:8px!important}.qup-public-member-count b{font-size:8px!important}}

/* QU3 V2.6.50 — match Current DJ to Hosted by */
.qup-public-current-dj{
  color:#77819d!important;
  font-size:8px!important;
  font-weight:750!important;
}
@media(max-width:620px){
  .qup-public-current-dj{font-size:7px!important}
}

/* QU3 V2.6.51 — aligned discovery metadata */
.qup-public-host,
.qup-public-current-dj{
  color:#77819d!important;
  font-size:8px!important;
  font-weight:750!important;
  line-height:1.25!important;
}
.qup-public-card-footer{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px!important;
  padding-left:21px!important;
  width:100%!important;
  box-sizing:border-box!important;
}
.qup-public-current-dj{
  padding:0!important;
  margin:0!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.qup-public-member-count{
  justify-self:end!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:620px){
  .qup-public-host,.qup-public-current-dj{font-size:7px!important}
  .qup-public-card-footer{padding-left:16px!important;gap:5px!important}
}

/* QU3 V2.6.52 — tighten discovery metadata stack */
.qup-public-host{margin-bottom:1px!important;}
.qup-public-card-footer{margin-top:0!important;}
.qup-public-current-dj{line-height:1.15!important;}
@media(max-width:620px){.qup-public-host{margin-bottom:0!important}.qup-public-card-footer{margin-top:0!important}}

/* ===== QU3 NAVBAR LOGO IMAGE =====
   Fits inside the existing header; does not change navbar/banner height. */
.qu3-nav-logo{
  display:block;
  width:auto;
  height:34px;
  max-width:52px;
  object-fit:contain;
  flex:0 0 auto;
}
@media(max-width:700px){
  .qu3-nav-logo{
    height:30px;
    max-width:46px;
  }
}

/* ===== QU3 NAV LOGO FINAL SIZE FIX ===== */
img.qu3-nav-logo,
.qu3-nav-logo{
  display:block!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  object-fit:contain!important;
  object-position:center!important;
  flex:0 0 42px!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:700px){
  img.qu3-nav-logo,
  .qu3-nav-logo{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    flex-basis:36px!important;
  }
}

/* QU3 logo — final cross-page sizing */
a.logo > img.qu3-nav-logo,
img.qu3-nav-logo{
  display:block!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  object-fit:contain!important;
  flex:none!important;
}
@media(max-width:700px){
  a.logo > img.qu3-nav-logo,
  img.qu3-nav-logo{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    min-height:38px!important;
    max-height:38px!important;
  }
}

/* ===== QU3 INDEX: full glow + compact page bottom =====
   Index-only. Lets decorative glow breathe beyond its section instead of clipping. */
.qu3-index-page{
  overflow-x:hidden;
}
.qu3-index-page main,
.qu3-index-page .hero,
.qu3-index-page .hero-section,
.qu3-index-page .home-hero,
.qu3-index-page .index-hero{
  overflow:visible!important;
}

/* Common glow/hero art containers: contain the whole asset instead of side-cropping it. */
.qu3-index-page .hero img,
.qu3-index-page .hero-section img,
.qu3-index-page .home-hero img,
.qu3-index-page .index-hero img{
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
}

/* Remove oversized trailing whitespace after the index content. */
.qu3-index-page main{
  padding-bottom:24px!important;
  margin-bottom:0!important;
}
.qu3-index-page footer{
  margin-top:20px!important;
}
.qu3-index-page section:last-of-type{
  margin-bottom:0!important;
  padding-bottom:0!important;
}

@media(max-width:700px){
  .qu3-index-page main{
    padding-bottom:14px!important;
  }
  .qu3-index-page footer{
    margin-top:14px!important;
  }
}

/* ===== QU3 UP NEXT: thumbnail + longer title ===== */
.bottom-song-nav img,
.bottom-queue-nav img,
.up-next img,
.upnext img,
[data-up-next] img{
  display:block;
  width:48px;
  height:48px;
  min-width:48px;
  object-fit:cover;
  border-radius:8px;
}
.bottom-song-nav .song-title,
.bottom-queue-nav .song-title,
.up-next .song-title,
.upnext .song-title,
.next-song-title,
#nextSongTitle,
#upNextTitle{
  max-width:min(520px,48vw)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:700px){
  .bottom-song-nav .song-title,
  .bottom-queue-nav .song-title,
  .up-next .song-title,
  .upnext .song-title,
  .next-song-title,
  #nextSongTitle,
  #upNextTitle{
    max-width:58vw!important;
  }
}

/* ===== QU3 MOBILE PINNED MESSAGE VISIBILITY =====
   Keep the pinned notice inside the chat column on phones instead of hiding it
   with desktop-only responsive rules. */
@media(max-width:700px){
  #pinnedMessage,
  #pinnedComment,
  .pinned-message,
  .chat-pinned,
  .qup-pinned-message,
  .qup-chat-pinned{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:0 0 8px!important;
    z-index:3!important;
  }
  #pinnedMessage:empty,
  #pinnedComment:empty,
  .pinned-message:empty,
  .chat-pinned:empty,
  .qup-pinned-message:empty,
  .qup-chat-pinned:empty{
    display:none!important;
  }
}

/* QU3 remote Up Next thumbnail */
.qup-bottom-next img,
.bottom-song-nav img,
.bottom-queue-nav img,
.up-next img,
.upnext img,
[data-up-next] img{
  display:block!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  flex:0 0 48px!important;
  object-fit:cover!important;
}