: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;
}

/* QU3 mobile player visibility only — playback JS intentionally untouched */
@media(max-width:700px){
 body.live-room-page .video-shell{display:block!important;position:relative!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:16/9!important;overflow:visible!important;background:#000!important}
 body.live-room-page .qup-video-viewport{display:block!important;visibility:visible!important;opacity:1!important;position:absolute!important;inset:3px!important;width:auto!important;height:auto!important;overflow:hidden!important;background:#000!important;z-index:2!important}
 body.live-room-page .qup-video-viewport #player,body.live-room-page .qup-video-viewport iframe{display:block!important;visibility:visible!important;opacity:1!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;transform:none!important;z-index:2!important;background:#000!important}
}

#navCurrentDj{cursor:pointer!important;pointer-events:auto!important;position:relative!important;z-index:999!important}#navCurrentDj:hover{text-decoration:underline;text-underline-offset:3px}
.qu3-profile-backdrop[hidden]{display:none!important}.qu3-profile-backdrop{position:fixed;inset:0;z-index:2147483000;background:rgba(4,2,12,.78);display:grid;place-items:center;padding:20px}.qu3-profile-card{position:relative;width:min(420px,calc(100vw - 28px));box-sizing:border-box;border:1px solid rgba(190,117,255,.42);border-radius:24px;padding:26px;background:#100b18;color:#fff;box-shadow:0 24px 80px #000}.qu3-profile-close{position:absolute;right:15px;top:13px;background:rgba(255,255,255,.08);color:#fff;width:34px;height:34px;border-radius:50%;font-size:22px;display:grid;place-items:center;cursor:pointer}.qu3-profile-avatar{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:900;background:linear-gradient(145deg,#a74cff,#ff4fc8);overflow:hidden}.qu3-profile-avatar img{width:100%;height:100%;object-fit:cover}.qu3-profile-kicker{display:block;margin-top:14px;color:#ba86e8;font-weight:800;letter-spacing:.13em}.qu3-profile-card h2{margin:3px 0;font-size:28px}.qu3-profile-live{font-size:11px;font-weight:900;color:#ff70d3}.qu3-profile-level{display:flex;justify-content:space-between;margin-top:20px;font-size:12px;font-weight:900}.qu3-profile-xp{height:8px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin-top:8px}.qu3-profile-xp i{display:block;height:100%;background:linear-gradient(90deg,#934cff,#ff4fca)}.qu3-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.qu3-profile-stats div{padding:13px 6px;border:1px solid rgba(255,255,255,.08);border-radius:14px;text-align:center}.qu3-profile-stats b{display:block;font-size:19px}.qu3-profile-stats span{display:block;margin-top:4px;font-size:9px;color:#a99ab5}

.qu3-dj-profile-target{cursor:pointer!important;pointer-events:auto!important}
.qu3-dj-profile-target:hover{text-decoration:underline!important;text-underline-offset:3px!important}

/* QU3 profile card web click + close alignment */
@media(min-width:701px){
 #qu3DesktopDjProfileTarget{position:relative!important;z-index:60!important}
 #topNowUser{pointer-events:auto!important;cursor:pointer!important;position:relative!important;z-index:61!important}
}
@media(max-width:700px){
 #qu3DesktopDjProfileTarget{position:static!important;z-index:auto!important}
 #topNowUser{position:static!important;z-index:auto!important}
 body.live-room-page .video-shell{z-index:2!important}
 body.live-room-page .qup-video-viewport{z-index:2!important}
}
.qu3-profile-card .qu3-profile-close{
  box-sizing:border-box!important;
  right:16px!important;top:16px!important;
  width:34px!important;height:34px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;margin:0!important;
  line-height:1!important;text-align:center!important;
  font-family:Arial,sans-serif!important;font-size:23px!important;font-weight:400!important;
  transform:none!important;
}

.qu3-profile-user-link{cursor:pointer!important;color:inherit;text-decoration:none}
.qu3-profile-user-link:hover{text-decoration:none!important}

.qu3-achievements{margin-top:16px;padding-top:14px;border-top:1px solid rgba(155,107,255,.2)}
.qu3-achievements-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;letter-spacing:.12em}
.qu3-achievements-head b{color:#aee8ff}.qu3-achievements-head span{color:#8f8aa8}
.qu3-badge-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.qu3-badge{min-width:0;border:1px solid rgba(132,98,255,.45);background:rgba(10,8,25,.72);border-radius:12px;padding:9px 4px 7px;color:#ddd;cursor:pointer}
.qu3-badge i{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 6px;border-radius:50%;font-style:normal;font-size:20px;border:1px solid #8b5cff;box-shadow:0 0 12px rgba(123,76,255,.65),inset 0 0 10px rgba(0,205,255,.16)}
.qu3-badge span{display:block;font-size:9px;line-height:1.1}
.qu3-badge.is-unlocked:hover{transform:translateY(-2px);box-shadow:0 0 18px rgba(137,72,255,.3)}
.qu3-badge.is-locked{opacity:.2;filter:grayscale(1);cursor:default}
.qu3-badge-detail{margin-top:10px;padding:10px 12px;border:1px solid rgba(62,207,255,.22);border-radius:10px;background:rgba(7,10,25,.6);font-size:11px;color:#aaa}
.qu3-badge-detail b,.qu3-badge-detail span{display:block}.qu3-badge-detail b{color:#fff;margin-bottom:2px}
.qu3-badge-loading{grid-column:1/-1;font-size:11px;color:#777}
@media(max-width:700px){.qu3-badge-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.qu3-badge{padding:7px 2px}.qu3-badge i{width:30px;height:30px;font-size:17px}.qu3-badge span{font-size:8px}}

/* QU3 deluxe nightclub achievement collection */
.qu3-badge-list{gap:10px!important}
.qu3-badge{position:relative!important;aspect-ratio:1/1.12!important;padding:8px 5px!important;border:1px solid rgba(125,91,255,.26)!important;border-radius:16px!important;background:linear-gradient(155deg,rgba(27,20,55,.88),rgba(5,6,18,.96))!important;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.qu3-badge:before{content:"";position:absolute;inset:-45%;background:conic-gradient(from 90deg,transparent,rgba(95,221,255,.14),transparent,rgba(255,55,196,.14),transparent);animation:qu3BadgeTurn 8s linear infinite;pointer-events:none}
.qu3-badge i{position:relative!important;z-index:1!important;display:grid!important;place-items:center!important;width:48px!important;height:48px!important;margin:0 auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important}
.qu3-badge i svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px rgba(126,85,255,.65))}
.qu3-badge em{position:absolute;z-index:2;left:4px;right:4px;bottom:5px;font-style:normal;font-size:6px;font-weight:900;letter-spacing:.12em;color:#9d97b8}
.qu3-badge.is-unlocked{border-color:rgba(118,105,255,.65)!important;box-shadow:inset 0 0 18px rgba(93,56,201,.12),0 0 14px rgba(93,56,201,.14)}
.qu3-badge.is-unlocked:hover{transform:translateY(-3px) scale(1.03)!important}
.qu3-badge.is-locked{opacity:.16!important;filter:grayscale(1)!important}
.qu3-badge-crowd_favorite.is-unlocked{border-color:rgba(255,67,200,.72)!important;box-shadow:0 0 18px rgba(204,64,255,.28),inset 0 0 18px rgba(77,210,255,.1)}
.qu3-badge-crowd_favorite.is-unlocked i svg{filter:drop-shadow(0 0 8px rgba(255,72,207,.75))}
.qu3-badge-resident_dj.is-unlocked{border-color:rgba(96,222,255,.8)!important;box-shadow:0 0 22px rgba(99,79,255,.34),inset 0 0 22px rgba(226,68,255,.12)}
.qu3-badge-resident_dj.is-unlocked:after{content:"";position:absolute;inset:1px;border-radius:14px;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.qu3-badge-resident_dj.is-unlocked i svg{filter:drop-shadow(0 0 9px rgba(188,75,255,.9))}
.qu3-badge-detail em{font-style:normal;color:#b76cff;font-size:9px;letter-spacing:.08em}
@keyframes qu3BadgeTurn{to{transform:rotate(360deg)}}
@media(max-width:700px){.qu3-badge-list{gap:6px!important}.qu3-badge{border-radius:12px!important;padding:6px 2px!important}.qu3-badge i{width:38px!important;height:38px!important}.qu3-badge em{font-size:5px}}
@media(prefers-reduced-motion:reduce){.qu3-badge:before{animation:none}}

/* Rarity is visual; text appears only in badge details after click/tap. */
.qu3-badge>em{display:none!important}
.qu3-rarity-uncommon.is-unlocked{box-shadow:0 0 15px rgba(76,225,218,.22),inset 0 0 16px rgba(77,139,255,.10)!important}
.qu3-rarity-rare.is-unlocked{box-shadow:0 0 20px rgba(214,65,255,.34),inset 0 0 20px rgba(64,210,255,.12)!important}
.qu3-rarity-epic.is-unlocked{box-shadow:0 0 25px rgba(166,70,255,.45),0 0 10px rgba(72,220,255,.20),inset 0 0 22px rgba(236,61,255,.13)!important}

.qu3-profile-avatar-wrap{position:relative;width:max-content;margin:0 auto}
.qu3-profile-avatar-wrap .qu3-profile-avatar{margin:0!important}
.qu3-avatar-edit{position:absolute;right:-4px;bottom:0;width:28px;height:28px;border-radius:50%;border:1px solid rgba(113,226,255,.7);background:rgba(16,10,37,.96);color:#fff;display:grid;place-items:center;font-size:18px;line-height:1;cursor:pointer;box-shadow:0 0 12px rgba(117,75,255,.55);z-index:3}
.qu3-avatar-edit[hidden]{display:none!important}.qu3-avatar-edit:hover{transform:scale(1.07);box-shadow:0 0 16px rgba(80,218,255,.65)}
.qu3-avatar-edit:disabled{opacity:.55;cursor:wait}
.qu3-profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

.chat-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

.qu3-dock-profile{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;margin-right:10px}
.qu3-dock-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#2b174c,#111225);border:2px solid rgba(153,91,255,.9);box-shadow:0 0 12px rgba(137,67,255,.42);font-weight:900;color:#fff}
.qu3-dock-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.qu3-dock-level{position:absolute;right:-5px;bottom:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;display:grid;place-items:center;background:#151020;border:1px solid rgba(104,226,255,.9);box-shadow:0 0 8px rgba(86,210,255,.42);color:#fff;font-size:9px;font-weight:900;line-height:1}
@media(max-width:700px){.qu3-dock-profile{margin-right:7px}.qu3-dock-avatar{width:34px;height:34px}.qu3-dock-level{min-width:17px;height:17px;font-size:8px}}

.qu3-dock-profile{cursor:pointer}.qu3-dock-profile:focus-visible{outline:2px solid rgba(102,225,255,.95);outline-offset:4px;border-radius:50%}

/* QU3 confirmed mobile video visibility guard — profile UI must never cover/hide player. */
@media(max-width:700px){
 body.live-room-page .video-shell{
  display:block!important;position:relative!important;width:100%!important;height:auto!important;
  min-height:0!important;aspect-ratio:16/9!important;overflow:visible!important;background:#000!important;
  z-index:2!important
 }
 body.live-room-page .qup-video-viewport{
  display:block!important;visibility:visible!important;opacity:1!important;position:absolute!important;
  inset:3px!important;width:auto!important;height:auto!important;overflow:hidden!important;background:#000!important;
  z-index:2!important
 }
 body.live-room-page .qup-video-viewport #player,
 body.live-room-page .qup-video-viewport iframe{
  display:block!important;visibility:visible!important;opacity:1!important;position:absolute!important;
  inset:0!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;
  max-width:none!important;max-height:none!important;transform:none!important;z-index:2!important;background:#000!important
 }
 .qu3-dj-profile-target{position:static!important;z-index:auto!important}
}

/* QU3 bottom dock stability: keep the existing dock pinned to the viewport. */
body.live-room-page .qup-song-dock{
 position:fixed!important;
 left:0!important;right:0!important;bottom:0!important;
 width:100%!important;
 max-width:none!important;
 margin:0!important;
 z-index:120!important;
}

/* Profile target remains inside the proven dock layout; only its own circle intercepts clicks. */
body.live-room-page #qu3DockProfile{
 pointer-events:auto!important;
 cursor:pointer!important;
 position:relative!important;
 z-index:4!important;
}
body.live-room-page #qu3DockAvatar,
body.live-room-page #qu3DockLevel{
 pointer-events:none!important;
}

/* Final viewport anchor after the dock is portaled directly to body. */
html body.live-room-page > .qup-song-dock{
 position:fixed!important;
 left:0!important;
 right:0!important;
 top:auto!important;
 bottom:0!important;
 width:100%!important;
 margin:0!important;
 z-index:2140!important;
}
@media(max-width:700px){
 html 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;
  transform:none!important;margin:0!important;
 }
}

/* QU3 FINAL bottom-nav anchor.
   This rule intentionally comes after every legacy sticky/relative/mobile dock rule. */
html body.live-room-page #qupSongDock:not(.open){
 position:fixed!important;
 inset:auto 0 0 0!important;
 top:auto!important;
 bottom:0!important;
 left:0!important;
 right:0!important;
 width:100vw!important;
 max-width:100vw!important;
 height:62px!important;
 min-height:62px!important;
 max-height:62px!important;
 margin:0!important;
 transform:none!important;
 translate:none!important;
 z-index:2147482000!important;
 grid-template-rows:62px 0!important;
}
html body.live-room-page #qupSongDock:not(.open) > #qupAddSongBarBtn{
 height:62px!important;
 min-height:62px!important;
 max-height:62px!important;
}
html body.live-room-page #qupSongDock.open{
 position:fixed!important;
 inset:56px 0 0 0!important;
 width:100vw!important;
 max-width:100vw!important;
 height:calc(100dvh - 56px)!important;
 margin:0!important;
 transform:none!important;
 translate:none!important;
 z-index:2147482000!important;
}
html body.live-room-page{padding-bottom:62px!important}
html body.live-room-page #qu3DockProfile{pointer-events:auto!important;cursor:pointer!important}
html body.live-room-page #qu3DockAvatar,
html body.live-room-page #qu3DockLevel{pointer-events:none!important}


/* QU3 mobile playlist touch-target repair — no playback/layout changes */
@media (max-width:700px){
  html body.live-room-page #qupSongDock.open > #qupSongDockPanel,
  html body.live-room-page #qupSongDock.open #qupPlaylistPane,
  html body.live-room-page #qupSongDock.open #qupPlaylistList{
    pointer-events:auto!important;
    touch-action:pan-y!important;
  }
  html body.live-room-page #qupSongDock.open .qup-library-tabs{
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  html body.live-room-page #qupSongDock.open .qup-library-tab{
    position:relative!important;
    z-index:20!important;
    min-height:46px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  html body.live-room-page #qupSongDock.open .qup-playlist-song{
    position:relative!important;
    pointer-events:auto!important;
  }
  html body.live-room-page #qupSongDock.open .qup-playlist-actions{
    position:relative!important;
    z-index:21!important;
    pointer-events:auto!important;
  }
  html body.live-room-page #qupSongDock.open .qup-playlist-actions button{
    position:relative!important;
    z-index:22!important;
    min-height:44px!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }
}


/* QU3 account controls */
.qu3-account-controls{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.10);text-align:center}
.qu3-account-controls[hidden]{display:none!important}
.qu3-account-controls small{display:block;margin-top:8px;opacity:.62;font-size:11px;line-height:1.35}
.qu3-delete-account{appearance:none;border:1px solid rgba(255,90,110,.48);background:rgba(150,20,45,.16);color:#ff9aa9;border-radius:10px;padding:10px 14px;font:700 12px/1 inherit;letter-spacing:.02em;cursor:pointer;touch-action:manipulation}
.qu3-delete-account:hover{background:rgba(180,25,50,.24)}
.qu3-delete-account:disabled{opacity:.55;cursor:wait}


/* ===== QU3 ACCOUNT RANKS ===== */
.qu3-profile-roles{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 2px}.qu3-profile-roles[hidden]{display:none!important}
.qu3-role{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:1000;letter-spacing:.08em;border:1px solid currentColor;background:#ffffff08}
.qu3-role-admin{color:#d35cff;box-shadow:0 0 16px #b74cff33}.qu3-role-ambassador{color:#ffd45c;box-shadow:0 0 16px #ffd45c26}.qu3-role-verified{color:#54e68b;box-shadow:0 0 16px #54e68b20}
body.live-room-page .chat-name b.qu3-chat-role-admin{color:#ff4f62!important;text-shadow:0 0 12px rgba(255,79,98,.38)}
body.live-room-page .chat-name b.qu3-chat-role-ambassador{color:#ffd45c!important;text-shadow:0 0 12px #ffc83d55}
body.live-room-page .chat-name b.qu3-chat-role-verified{color:#54e68b!important;text-shadow:0 0 12px #43d77a44}
html.qup-room-listener #roomSettingsPanel.qup-room-info-only.qu3-staff-room-editor .qup-save-room-info{display:inline-flex!important}
html.qup-room-listener #roomSettingsPanel.qup-room-info-only.qu3-staff-room-editor input:not([readonly]),html.qup-room-listener #roomSettingsPanel.qup-room-info-only.qu3-staff-room-editor textarea:not([readonly]){opacity:1!important;cursor:text!important}

/* QU3 profile identity line: permanent rank + live DJ state */
.qu3-profile-status{font-weight:900;letter-spacing:.13em}
.qu3-profile-status.is-admin{color:#d35cff;text-shadow:0 0 14px rgba(211,92,255,.35)}
.qu3-profile-status.is-ambassador{color:#ffd45c;text-shadow:0 0 14px rgba(255,212,92,.30)}
.qu3-profile-status.is-verified{color:#54e68b;text-shadow:0 0 14px rgba(84,230,139,.28)}
.qu3-profile-status.is-dj{color:#ff70d3;text-shadow:0 0 14px rgba(255,112,211,.28)}

/* QU3 admin-only rank management */
.qu3-admin-user-controls{margin-top:18px;padding:15px;border:1px solid rgba(211,92,255,.24);border-radius:16px;background:rgba(211,92,255,.055)}
.qu3-admin-user-controls[hidden]{display:none!important}.qu3-admin-user-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.qu3-admin-user-head b{font-size:11px;letter-spacing:.11em;color:#d35cff}.qu3-admin-user-head small{font-size:10px;opacity:.55}.qu3-admin-user-controls label{display:flex;align-items:center;justify-content:space-between;padding:9px 2px;font-size:12px;font-weight:800}.qu3-admin-user-controls input{width:18px;height:18px;accent-color:#b64cff}.qu3-admin-user-controls button{width:100%;margin-top:8px;padding:10px 12px;border:0;border-radius:11px;background:linear-gradient(90deg,#934cff,#d64fff);color:#fff;font-weight:900;cursor:pointer}.qu3-admin-user-controls>small{display:block;min-height:14px;margin-top:7px;text-align:center;font-size:10px;color:#aef6c6}

/* ===== QU3 DESKTOP PLAYLIST FULL DRAWER — 2026-09-22 ===== */
@media (min-width:701px){
  /* Remove the legacy 330px playlist cap on desktop. The open song-dock panel
     is already the scroll surface, so the playlist can fill the drawer and
     every saved song stays reachable instead of being clipped. */
  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 20px!important;
  }
  body.live-room-page .qup-song-dock.open > .qup-song-dock-panel{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
  }
}


/* QU3 compact rank identity icons */
.qu3-profile-status{display:inline-flex!important;align-items:center;justify-content:center;gap:5px}
.qu3-profile-status .qu3-rank-icon{display:inline-block!important;width:10px!important;height:10px!important;min-width:10px!important;max-width:10px!important;min-height:10px!important;max-height:10px!important;overflow:visible!important;flex:0 0 10px!important;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.qu3-profile-status.is-admin{color:#ff4f62!important;text-shadow:0 0 10px rgba(255,79,98,.28)}
.qu3-profile-status.is-ambassador{color:#ffd45c!important}
.qu3-profile-status.is-verified{color:#54e68b!important}
.qu3-profile-user-link,.qu3-profile-user-link:hover,.qu3-profile-user-link:focus,.qu3-profile-user-link:active{text-decoration:none!important}

/* QU3 room privacy / member room-info cleanup */
.qup-room-settings.qup-room-info-only .qu3-owner-only-hint,
.qup-room-settings.qup-room-info-only #saveRoomInfo,
.qup-room-settings.qup-room-info-only .qu3-owner-only-setting{display:none!important}

/* QU3 account/profile audit */
.qu3-account-controls .qu3-logout-account{width:100%;margin-bottom:9px;border:1px solid rgba(159,107,255,.5);background:rgba(123,76,255,.08);color:#f5efff;border-radius:12px;padding:10px 14px;font:inherit;font-weight:800;cursor:pointer}
.qu3-account-controls .qu3-logout-account:hover{background:rgba(123,76,255,.16);border-color:rgba(184,143,255,.75)}
.qu3-account-controls .qu3-logout-account:disabled{opacity:.6;cursor:default}


/* ===== QU3 BETA ROOM UI POLISH v2 — 2026-09-22 =====
   Visual-only: restores the original LIVE badge look outside the iframe
   and gives the mobile reaction row a visibly smaller footprint. */
/* Idle personality stays behind the player and disappears when YouTube occupies it. */
body.live-room-page .qup-video-viewport:has(#player:empty)::before{
  content:'Q';position:absolute;z-index:0;left:50%;top:45%;transform:translate(-50%,-50%);
  font-size:46px;font-weight:1000;line-height:1;color:rgba(255,255,255,.055);
  text-shadow:0 0 32px rgb(var(--room-led-rgb)/.18);pointer-events:none
}
body.live-room-page .qup-video-viewport:has(#player:empty)::after{
  content:'Waiting for the next song…';position:absolute;z-index:0;left:50%;top:58%;transform:translate(-50%,-50%);
  width:90%;text-align:center;color:rgba(226,226,245,.48);font-size:11px;font-weight:800;letter-spacing:.06em;pointer-events:none
}
body.live-room-page .qup-video-viewport #player{z-index:1}
body.live-room-page .live-chat-panel,body.live-room-page .chat-compose input{box-shadow:none!important}
body.live-room-page .qup-room-people-btn{box-shadow:none!important}

@media(max-width:700px){
  body.live-room-page .video-shell,body.live-room-page .guest-video-shell{order:1!important}
  body.live-room-page .stage-stats.action-stats{
    width:min(326px,88%)!important;margin:12px auto 24px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important
  }
  body.live-room-page .action-stats .stat-action{
    width:90px!important;height:90px!important;max-width:90px!important;aspect-ratio:auto!important
  }
  body.live-room-page .action-stats .stat-action::before{inset:7px!important}
  body.live-room-page .action-stats .stat-action strong{font-size:33px!important}
  body.live-room-page .action-stats .flame-stat strong{font-size:44px!important}
  body.live-room-page .action-stats .steal-stat .qup-steal-emoji{font-size:41px!important}
  body.live-room-page .action-stats .skip-stat strong{font-size:37px!important}
  body.live-room-page .action-stats .stat-action strong>span[id]{
    top:calc(100% + 5px)!important;height:26px!important;min-width:35px!important;
    padding:0 8px!important;font-size:13px!important
  }
  body.live-room-page .live-chat-panel{min-height:360px!important}
  body.live-room-page .chat-head{padding:7px 6px 8px!important;min-height:46px!important}
  body.live-room-page .chat-head .eyebrow{font-size:8px!important;letter-spacing:1.25px!important}
  body.live-room-page .unified-room-shell{gap:9px!important}
  body.live-room-page .qup-room-bar.live-nav{gap:6px!important;padding-left:9px!important;padding-right:9px!important}
}

/* ===== QU3 BETA CHAT POLISH — 2026-09-22 =====
   Visual-only: denser messages, quieter cards, clearer copy. */
body.live-room-page .live-chat-panel .chat-message{
  grid-template-columns:28px minmax(0,1fr)!important;
  gap:8px!important;
  width:min(92%,540px)!important;
  padding:7px 10px!important;
  margin:3px auto!important;
  border-color:rgb(var(--room-led-rgb) / .20)!important;
  border-radius:12px!important;
  background:linear-gradient(90deg,rgb(var(--room-led-rgb) / .065),rgba(7,9,20,.72))!important;
  box-shadow:0 0 8px rgb(var(--room-led-rgb) / .055)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
body.live-room-page .live-chat-panel .chat-message.qup-own-message{
  border-color:rgb(var(--room-led-rgb) / .34)!important;
  background:linear-gradient(90deg,rgb(var(--room-led-rgb) / .10),rgba(7,9,20,.76))!important;
  box-shadow:0 0 10px rgb(var(--room-led-rgb) / .08)!important;
}
body.live-room-page .live-chat-panel .chat-message .chat-avatar{
  width:28px!important;height:28px!important;font-size:10px!important;
  box-shadow:0 0 9px rgb(var(--room-led-rgb) / .10)!important;
}
body.live-room-page .live-chat-panel .chat-name{font-size:11px!important;line-height:1.15!important}
body.live-room-page .live-chat-panel .chat-name span{font-size:8px!important;margin-left:4px!important}
body.live-room-page .live-chat-panel .chat-message p{
  margin:2px 0 0!important;font-size:13px!important;line-height:1.32!important;color:#e0e3f1!important;
}
body.live-room-page .live-chat-panel .chat-messages{padding-top:5px!important;padding-bottom:8px!important}
body.live-room-page .live-chat-panel .qup-pinned-message{margin-bottom:5px!important}

@media(max-width:700px){
  body.live-room-page .live-chat-panel .chat-message{
    grid-template-columns:27px minmax(0,1fr)!important;
    gap:7px!important;width:94%!important;padding:6px 9px!important;margin:2px auto!important;border-radius:11px!important;
  }
  body.live-room-page .live-chat-panel .chat-message .chat-avatar{width:27px!important;height:27px!important;font-size:10px!important}
  body.live-room-page .live-chat-panel .chat-message p{font-size:12px!important;line-height:1.3!important}
  body.live-room-page .live-chat-panel .chat-messages{padding:3px 5px 6px!important;max-height:44vh!important}
}


/* ===== QU3 BETA MOBILE ROOM FINAL POLISH — 2026-09-22 =====
   Visual-only. No playback/queue/sync behavior changes. */
body.live-room-page .live-badge{display:none!important}

@media(max-width:700px){
  /* Make the three song reaction controls materially smaller, including glow footprint. */
  body.live-room-page .stage-stats.action-stats{
    width:min(286px,82%)!important;
    gap:13px!important;
    margin:10px auto 18px!important;
  }
  body.live-room-page .action-stats .stat-action{
    width:78px!important;
    height:78px!important;
    min-width:78px!important;
    min-height:78px!important;
    max-width:78px!important;
    max-height:78px!important;
    box-shadow:0 0 12px rgb(var(--room-led-rgb)/.18)!important;
  }
  body.live-room-page .action-stats .stat-action::before{inset:6px!important;box-shadow:inset 0 0 10px rgba(255,255,255,.025)!important}
  body.live-room-page .action-stats .stat-action strong{font-size:28px!important}
  body.live-room-page .action-stats .flame-stat strong{font-size:37px!important}
  body.live-room-page .action-stats .steal-stat .qup-steal-emoji{font-size:35px!important}
  body.live-room-page .action-stats .skip-stat strong{font-size:32px!important}
  body.live-room-page .action-stats .stat-action strong>span[id]{
    top:calc(100% + 4px)!important;
    height:23px!important;
    min-width:31px!important;
    padding:0 7px!important;
    font-size:12px!important;
    box-shadow:0 0 9px rgb(var(--room-led-rgb)/.20)!important;
  }

  /* Denser Party Chat: preserve message text readability while fitting more conversation. */
  body.live-room-page .live-chat-panel{min-height:0!important}
  body.live-room-page .chat-head{padding:5px 6px 6px!important;min-height:39px!important}
  body.live-room-page .live-chat-panel .chat-messages{
    padding:2px 4px 5px!important;
    gap:0!important;
    max-height:48vh!important;
  }
  body.live-room-page .live-chat-panel .chat-message{
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:6px!important;
    width:96%!important;
    padding:5px 8px!important;
    margin:1px auto!important;
    border-radius:10px!important;
    box-shadow:0 0 5px rgb(var(--room-led-rgb)/.04)!important;
  }
  body.live-room-page .live-chat-panel .chat-message .chat-avatar{
    width:24px!important;height:24px!important;font-size:9px!important;
    box-shadow:0 0 6px rgb(var(--room-led-rgb)/.08)!important;
  }
  body.live-room-page .live-chat-panel .chat-name{font-size:10.5px!important;line-height:1.05!important}
  body.live-room-page .live-chat-panel .chat-name span{font-size:7.5px!important;margin-left:3px!important}
  body.live-room-page .live-chat-panel .chat-message p{
    margin:1px 0 0!important;
    font-size:12px!important;
    line-height:1.22!important;
  }
}


/* ===== QU3 BETA MOBILE BALANCE PASS — 2026-09-22 ===== */
@media(max-width:700px){
  /* Split the difference: larger than the over-shrunk pass, still below the original footprint. */
  body.live-room-page .stage-stats.action-stats{
    width:min(318px,88%)!important;
    gap:14px!important;
    margin:10px auto 8px!important;
  }
  body.live-room-page .action-stats .stat-action{
    width:90px!important;height:90px!important;
    min-width:90px!important;min-height:90px!important;
    max-width:90px!important;max-height:90px!important;
    box-shadow:0 0 14px rgb(var(--room-led-rgb)/.20)!important;
  }
  body.live-room-page .action-stats .stat-action::before{inset:7px!important}
  body.live-room-page .action-stats .stat-action strong{font-size:32px!important}
  body.live-room-page .action-stats .flame-stat strong{font-size:43px!important}
  body.live-room-page .action-stats .steal-stat .qup-steal-emoji{font-size:40px!important}
  body.live-room-page .action-stats .skip-stat strong{font-size:36px!important}

  /* Remove the awkward dead band around PARTY CHAT while preserving compact cards. */
  body.live-room-page .live-chat-panel{margin-top:0!important;padding-top:0!important}
  body.live-room-page .chat-head{
    margin-top:0!important;margin-bottom:0!important;
    padding:2px 6px 3px!important;
    min-height:34px!important;
  }
  body.live-room-page .live-chat-panel .chat-messages{
    padding-top:0!important;
  }
}


/* ===== QU3 MOBILE REACTION RESET — minimal fix only ===== */
@media (max-width:700px){

  /* Keep the reaction row comfortably separated from the video. */
  body.live-room-page .stage-stats.action-stats{
    margin-top:18px!important;
  }

  /* Preserve the clean baseline reaction sizing. */
  body.live-room-page .action-stats .stat-action{
    overflow:visible!important;
  }

  /* Hide only the FLAME / SKIP text labels on mobile. */
  body.live-room-page .action-stats .stat-action > span{
    display:none!important;
  }

  /* Restore the count to its normal/original position UNDER the emoji.
     No transforms, no attached/overlapping badge positioning. */
  body.live-room-page .action-stats .stat-action strong{
    transform:none!important;
  }

  body.live-room-page .action-stats .stat-action strong > span[id]{
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* ===== QU3 MOBILE COUNT DIRECTLY BELOW EMOJI ===== */
@media (max-width:700px){
  /* Stack each reaction's emoji and number vertically in the center. */
  body.live-room-page .action-stats .stat-action > strong{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    transform:none!important;
  }

  body.live-room-page .action-stats .stat-action strong > span[id]{
    display:flex!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:center!important;
  }
}


/* ===== QU3 HIDE CHAT + MICRO REACTION SIZE ===== */

/* Hide only the chat content when toggled. Keep header/toggle available to restore it. */
body.live-room-page.qu3-chat-hidden .live-chat-panel .chat-messages,
body.live-room-page.qu3-chat-hidden .live-chat-panel .chat-compose,
body.live-room-page.qu3-chat-hidden .live-chat-panel .chat-input-wrap,
body.live-room-page.qu3-chat-hidden .live-chat-panel form{
  display:none!important;
}

/* Desktop: remove the chat column and recenter/expand the stage instead of leaving a hole. */
@media (min-width:701px){
  body.live-room-page.qu3-chat-hidden .live-room-layout,
  body.live-room-page.qu3-chat-hidden .room-main,
  body.live-room-page.qu3-chat-hidden .live-main{
    grid-template-columns:minmax(0,1fr)!important;
  }

  body.live-room-page.qu3-chat-hidden .stage-panel,
  body.live-room-page.qu3-chat-hidden .live-stage,
  body.live-room-page.qu3-chat-hidden .video-stage{
    width:min(1100px,100%)!important;
    max-width:1100px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.live-room-page.qu3-chat-hidden .live-chat-panel{
    width:min(1100px,100%)!important;
    max-width:1100px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* When hidden, leave only a compact centered toolbar so Show Chat is reachable. */
  body.live-room-page.qu3-chat-hidden .live-chat-panel .chat-head{
    width:auto!important;
    max-width:max-content!important;
    margin:8px auto 0!important;
  }
}

/* Mobile: slightly larger interactions only. Preserve current number placement. */
@media (max-width:700px){
  body.live-room-page .action-stats .stat-action{
    width:107px!important;
    height:107px!important;
    min-width:107px!important;
    min-height:107px!important;
    max-width:107px!important;
    max-height:107px!important;
  }
  body.live-room-page .action-stats .flame-stat strong{font-size:50px!important}
  body.live-room-page .action-stats .steal-stat .qup-steal-emoji{font-size:47px!important}
  body.live-room-page .action-stats .skip-stat strong{font-size:43px!important}

  body.live-room-page.qu3-chat-hidden .live-chat-panel{
    min-height:0!important;
  }
  body.live-room-page.qu3-chat-hidden .live-chat-panel .chat-head{
    margin-bottom:0!important;
  }
}


/* ===== QU3 MOBILE REACTION SPACING MICRO-FIX ===== */
@media (max-width:700px){

  /* Move the whole interaction group up slightly and reclaim space underneath. */
  body.live-room-page .stage-stats.action-stats{
    width:min(354px,94%)!important;
    grid-template-columns:repeat(3,107px)!important;
    justify-content:space-between!important;
    gap:0!important;
    margin-top:12px!important;
    margin-bottom:1px!important;
    padding-bottom:0!important;
  }

  /* Keep the slightly larger 107px controls, but give each one its own lane. */
  body.live-room-page .action-stats .stat-action{
    width:107px!important;
    height:107px!important;
    min-width:107px!important;
    min-height:107px!important;
    max-width:107px!important;
    max-height:107px!important;
    margin:0!important;
  }

  /* Reduce dead space after the number while preserving number-under-emoji layout. */
  body.live-room-page .action-stats .stat-action > strong{
    gap:2px!important;
    line-height:1!important;
  }

  body.live-room-page .action-stats .stat-action strong > span[id]{
    margin-top:0!important;
    margin-bottom:0!important;
    line-height:1!important;
  }

  /* Keep Party Chat/user controls clear of the reactions. */
  body.live-room-page .live-chat-panel{
    margin-top:0!important;
    padding-top:0!important;
  }
  body.live-room-page .live-chat-panel .chat-head{
    margin-top:0!important;
  }
}


/* ===== QU3 MOBILE REACTION TINY POSITION/SIZE ADJUSTMENT ===== */
@media (max-width:700px){

  /* Tiny move upward toward the video + slightly smaller circles. */
  body.live-room-page .stage-stats.action-stats{
    width:min(342px,93%)!important;
    grid-template-columns:repeat(3,103px)!important;
    justify-content:space-between!important;
    margin-top:7px!important;
    margin-bottom:0!important;
    min-height:103px!important;
    height:103px!important;
  }

  body.live-room-page .action-stats .stat-action{
    width:103px!important;
    height:103px!important;
    min-width:103px!important;
    min-height:103px!important;
    max-width:103px!important;
    max-height:103px!important;
  }

  /* Keep emoji/count stack exactly as-is; just scale emoji very slightly with circle. */
  body.live-room-page .action-stats .flame-stat strong{font-size:48px!important}
  body.live-room-page .action-stats .steal-stat .qup-steal-emoji{font-size:45px!important}
  body.live-room-page .action-stats .skip-stat strong{font-size:41px!important}

  /* No extra vertical tail below the count. */
  body.live-room-page .action-stats .stat-action{
    padding-bottom:0!important;
  }
}


/* ===== QU3 CHAT TIMESTAMP — TOP RIGHT OF BUBBLE ===== */
body.live-room-page .chat-message,
body.live-room-page .chat-msg,
body.live-room-page .message-bubble,
body.live-room-page .chat-bubble{
  position:relative!important;
}

/* Common timestamp classes used by QU3 chat renderers. */
body.live-room-page .chat-message time,
body.live-room-page .chat-msg time,
body.live-room-page .message-bubble time,
body.live-room-page .chat-bubble time,
body.live-room-page .chat-time,
body.live-room-page .message-time,
body.live-room-page .chat-timestamp{
  position:absolute!important;
  top:8px!important;
  right:10px!important;
  margin:0!important;
  white-space:nowrap!important;
  text-align:right!important;
  line-height:1!important;
  font-size:10px!important;
  opacity:.58!important;
}

/* Leave a little room at the top-right so message text does not run underneath it. */
body.live-room-page .chat-message,
body.live-room-page .chat-msg,
body.live-room-page .message-bubble,
body.live-room-page .chat-bubble{
  padding-right:66px!important;
}


/* ===== QU3 CHAT TIMESTAMP — END OF BUBBLE ===== */
body.live-room-page .chat-message time,
body.live-room-page .chat-msg time,
body.live-room-page .message-bubble time,
body.live-room-page .chat-bubble time,
body.live-room-page .chat-time,
body.live-room-page .message-time,
body.live-room-page .chat-timestamp{
  position:absolute!important;
  top:auto!important;
  left:auto!important;
  right:10px!important;
  bottom:7px!important;
  margin:0!important;
  white-space:nowrap!important;
  text-align:right!important;
  line-height:1!important;
  font-size:10px!important;
  opacity:.58!important;
}

/* Space for the timestamp at the end of the bubble, not at the top. */
body.live-room-page .chat-message,
body.live-room-page .chat-msg,
body.live-room-page .message-bubble,
body.live-room-page .chat-bubble{
  padding-right:12px!important;
  padding-bottom:22px!important;
}


/* ===== QU3 CHAT TIMESTAMP — FINAL TOP RIGHT ===== */
body.live-room-page .chat-message time,
body.live-room-page .chat-msg time,
body.live-room-page .message-bubble time,
body.live-room-page .chat-bubble time,
body.live-room-page .chat-time,
body.live-room-page .message-time,
body.live-room-page .chat-timestamp{
  position:absolute!important;
  top:8px!important;
  right:10px!important;
  bottom:auto!important;
  left:auto!important;
  margin:0!important;
  white-space:nowrap!important;
  text-align:right!important;
  line-height:1!important;
  font-size:10px!important;
  opacity:.58!important;
}

body.live-room-page .chat-message,
body.live-room-page .chat-msg,
body.live-room-page .message-bubble,
body.live-room-page .chat-bubble{
  position:relative!important;
  padding-right:72px!important;
  padding-bottom:initial!important;
}


/* ===== QU3 CHAT HEADER: NAME LEFT / TIMESTAMP TRUE FAR RIGHT ===== */
body.live-room-page .chat-message > div:last-child{
  min-width:0!important;
  width:100%!important;
  flex:1 1 auto!important;
}

body.live-room-page .chat-message .chat-name{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  gap:8px!important;
  padding-right:0!important;
}

body.live-room-page .chat-message .chat-name .chat-author-name{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

body.live-room-page .chat-message .chat-name .chat-timestamp{
  position:static!important;
  inset:auto!important;
  margin-left:auto!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  text-align:right!important;
  font-size:10px!important;
  line-height:1!important;
  opacity:.58!important;
}

/* Undo the padding workaround from earlier timestamp attempts. */
body.live-room-page .chat-message{
  padding-right:initial!important;
  padding-bottom:initial!important;
}


/* ===== QU3 TIMESTAMP: TRUE TOP-RIGHT EDGE OF CHAT BUBBLE ===== */
body.live-room-page .chat-message{
  position:relative!important;
}

/* Stop the timestamp from participating beside the username. */
body.live-room-page .chat-message .chat-name .chat-timestamp{
  position:absolute!important;
  top:9px!important;
  right:10px!important;
  left:auto!important;
  bottom:auto!important;
  margin:0!important;
  width:auto!important;
  max-width:none!important;
  flex:none!important;
  white-space:nowrap!important;
  text-align:right!important;
  font-size:10px!important;
  line-height:1!important;
  opacity:.58!important;
  z-index:3!important;
}

/* Reserve only the header's far-right area so long usernames cannot run underneath it. */
body.live-room-page .chat-message .chat-name{
  padding-right:92px!important;
  box-sizing:border-box!important;
}


/* ===== QU3 HOST CHAT TIMESTAMP — ACTUAL ROOM RENDERER ===== */
body.live-room-page .live-chat-panel .chat-message{
  position:relative!important;
}
body.live-room-page .live-chat-panel .chat-message .chat-name{
  display:block!important;
  width:auto!important;
  padding-right:92px!important;
}
body.live-room-page .live-chat-panel .chat-message .chat-name > .chat-timestamp{
  position:absolute!important;
  top:7px!important;
  right:9px!important;
  bottom:auto!important;
  left:auto!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  white-space:nowrap!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:500!important;
  opacity:.62!important;
  z-index:5!important;
}


/* ===== QU3 ROOM HOST CHAT COLOR =====
   Unranked host follows the room LED. Ranked users retain rank CSS color. */
body.live-room-page .chat-name .qu3-chat-role-user.qu3-chat-room-host-led{
  color:var(--room-led)!important;
}


/* ===== QU3 PROFILE FOLLOW SYSTEM ===== */
.qu3-profile-social{display:flex;flex-direction:column;align-items:center;gap:10px;margin:10px 0 14px}
.qu3-follow-btn{border:0;border-radius:999px;padding:8px 22px;font-weight:800;cursor:pointer;background:var(--room-led,#8a42ff);color:#fff;box-shadow:0 0 18px rgb(var(--room-led-rgb,138 66 255)/.24)}
.qu3-follow-btn.is-following{background:rgba(255,255,255,.09);color:#fff;box-shadow:none}
.qu3-follow-btn:disabled{opacity:.55;cursor:default}
.qu3-follow-counts{display:flex;justify-content:center;gap:26px}
.qu3-follow-counts button{border:0;background:none;color:inherit;padding:0;display:flex;gap:5px;align-items:baseline;cursor:default}
.qu3-follow-counts b{font-size:13px}
.qu3-follow-counts span{font-size:10px;opacity:.62;text-transform:uppercase;letter-spacing:.05em}


/* ===== QU3 FIND PARTIES — FOLLOWING ACTIVITY ===== */
.qu3-following-room-activity{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:5px;
  font-size:10px;
  line-height:1.2;
  color:rgba(255,255,255,.72);
}
.qu3-following-room-activity>span{
  color:#58f0a7;
  font-size:8px;
  text-shadow:0 0 8px rgba(88,240,167,.55);
}
.qu3-following-room-activity b{
  color:#fff;
  font-weight:800;
}


/* ===== QU3 FOLLOW PROFILE — SAME PRESENTATION ON WEB + MOBILE ===== */
html body .qu3-profile-card .qu3-profile-social{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  margin:10px 0 14px!important;
}
html body .qu3-profile-card .qu3-follow-btn:not([hidden]){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:104px!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:999px!important;
  font-size:12px!important;
  line-height:1!important;
}
html body .qu3-profile-card .qu3-follow-btn[hidden]{display:none!important}
html body .qu3-profile-card .qu3-follow-counts{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:26px!important;
  margin:0!important;
}
html body .qu3-profile-card .qu3-follow-counts button{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:5px!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
  cursor:default!important;
}
html body .qu3-profile-card .qu3-follow-counts b{font-size:13px!important;line-height:1!important}
html body .qu3-profile-card .qu3-follow-counts span{
  font-size:10px!important;
  line-height:1!important;
  opacity:.62!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
}


/* ===== QU3 FOLLOWING ACTIVITY — THUMBNAIL OVERLAY ===== */
.qup-public-room-media{position:relative!important}
.qu3-following-room-activity{display:none!important}
.qu3-following-thumb-activity{
  position:absolute;
  right:8px;
  bottom:7px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:4px;
  max-width:calc(100% - 16px);
  padding:0;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.88);
  font-size:9px;
  line-height:1.15;
  text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.85);
  white-space:nowrap;
  pointer-events:none;
}
.qu3-following-thumb-activity::before{
  content:"";
  position:absolute;
  z-index:-1;
  right:-8px;
  bottom:-7px;
  width:calc(100% + 24px);
  height:34px;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
  pointer-events:none;
}
.qu3-following-thumb-activity>span{
  color:#58f0a7;
  font-size:7px;
  text-shadow:0 0 7px rgba(88,240,167,.7);
}
.qu3-following-thumb-activity>b{
  overflow:hidden;
  text-overflow:ellipsis;
  font:inherit;
  font-weight:700;
}


/* QU3 following thumbnail activity — tiny + softer refinement */
.qu3-following-thumb-activity{
  font-size:8px!important;
  color:rgba(255,255,255,.68)!important;
  gap:3px!important;
  right:7px!important;
  bottom:6px!important;
  text-shadow:0 1px 3px rgba(0,0,0,.88),0 0 6px rgba(0,0,0,.68)!important;
}
.qu3-following-thumb-activity>span{
  font-size:6px!important;
  opacity:.78!important;
  text-shadow:0 0 5px rgba(88,240,167,.48)!important;
}
.qu3-following-thumb-activity::before{
  opacity:.78!important;
}

/* QU3 following thumbnail activity — confirmed final override */
html body .qu3-following-thumb-activity{
  font-size:7px!important;
  font-weight:500!important;
  color:rgba(255,255,255,.54)!important;
  gap:3px!important;
  right:7px!important;
  bottom:6px!important;
  opacity:.82!important;
  text-shadow:0 1px 3px rgba(0,0,0,.82)!important;
}
html body .qu3-following-thumb-activity>b{
  font-size:7px!important;
  font-weight:500!important;
  color:rgba(255,255,255,.54)!important;
}
html body .qu3-following-thumb-activity>span{
  font-size:5px!important;
  opacity:.62!important;
  text-shadow:0 0 4px rgba(88,240,167,.35)!important;
}
html body .qu3-following-thumb-activity::before{
  opacity:.55!important;
}

/* ===== QU3 ROOM FAVORITES / DISCOVERY FILTERS ===== */
.qu3-room-filters{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px auto 2px;flex-wrap:wrap}
.qu3-room-filters button{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045);color:rgba(255,255,255,.62);border-radius:999px;padding:7px 13px;font-size:10px;font-weight:800;letter-spacing:.02em;cursor:pointer}
.qu3-room-filters button.active{background:rgba(153,75,255,.16);border-color:rgba(181,112,255,.34);color:#fff}
.qu3-room-favorite-heart{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;color:rgba(255,255,255,.58);font-size:15px;line-height:1;cursor:pointer;vertical-align:-1px;transition:opacity .15s ease,transform .15s ease,color .15s ease;pointer-events:auto}
.qu3-room-favorite-heart:hover{opacity:1;transform:scale(1.08)}
.qu3-room-favorite-heart.is-favorite{color:#ff67ba;text-shadow:0 0 8px rgba(255,80,177,.35)}
.qu3-favorite-thumb-heart{position:absolute;left:8px;top:7px;z-index:4;color:rgba(255,105,186,.72);font-size:11px;line-height:1;text-shadow:0 1px 5px rgba(0,0,0,.95);pointer-events:none}
.qu3-room-offline{position:absolute;right:8px;bottom:7px;z-index:4;font-size:7px;font-weight:900;letter-spacing:.11em;color:rgba(255,255,255,.58);text-shadow:0 1px 4px rgba(0,0,0,.95);pointer-events:none}
.qup-public-room-media>img.qu3-empty-room-thumb{filter:brightness(.66) saturate(.82)}
.qup-public-room-card.qu3-offline-room .qup-public-song,.qup-public-room-card.qu3-offline-room .qup-public-current-dj{opacity:.52}
@media(max-width:700px){.qu3-room-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.qu3-room-filters button{flex:0 0 auto}.qu3-room-favorite-heart{font-size:14px;margin-left:5px}}


/* ===== QU3 OFFLINE ROOM LABEL — CENTER OF THUMBNAIL ===== */
.qu3-room-offline,
.qu3-offline-label,
.qu3-room-offline-label{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:5!important;
  margin:0!important;
  text-align:center!important;
  pointer-events:none!important;
}

/* ===== QU3 MOBILE ROOM POLISH — 2026-09-23 =====
   CSS-only. Playback, queue, reactions, realtime and YouTube logic are untouched. */
@media (max-width:700px){
  /* Cleaner compact room header without changing its content or behavior. */
  body.live-room-page .qup-room-bar.live-nav{
    min-height:58px!important;
    padding:7px 10px!important;
    gap:7px!important;
    align-items:center!important;
  }
  body.live-room-page .qup-room-bar .logo{flex:0 0 auto!important}
  body.live-room-page .qup-room-bar .qu3-nav-logo{max-height:34px!important;width:auto!important}
  body.live-room-page .mobile-room-meta,
  body.live-room-page .mobile-now-meta{min-width:0!important}
  body.live-room-page .mobile-room-meta{flex:0 1 auto!important}
  body.live-room-page .mobile-now-meta{flex:1 1 0!important}
  body.live-room-page .mobile-room-name,
  body.live-room-page .mobile-song-title{max-width:100%!important;overflow:hidden!important}
  body.live-room-page .mobile-room-name .qup-nav-label,
  body.live-room-page .mobile-song-title .qup-nav-label{
    display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  body.live-room-page .mobile-room-meta small,
  body.live-room-page .mobile-now-meta small{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.live-room-page .qup-listening{flex:0 0 auto!important;white-space:nowrap!important}

  /* Let the player own the width on phones; keep the existing LED frame intact. */
  body.live-room-page .live-stage{min-width:0!important}
  body.live-room-page .video-shell,
  body.live-room-page .guest-video-shell{
    width:calc(100% - 12px)!important;
    max-width:none!important;
    margin-left:6px!important;
    margin-right:6px!important;
    border-radius:13px!important;
  }
  body.live-room-page .qup-video-viewport{border-radius:11px!important;overflow:hidden!important}

  /* Keep the three controls visually balanced and comfortably tappable. */
  body.live-room-page .stage-stats.action-stats{
    width:min(342px,94%)!important;
    grid-template-columns:repeat(3,103px)!important;
    justify-content:space-between!important;
    margin:9px auto 4px!important;
  }
  body.live-room-page .action-stats .stat-action{
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
    transition:transform .12s ease,filter .12s ease!important;
  }
  body.live-room-page .action-stats .stat-action:active{transform:scale(.965)!important;filter:brightness(1.08)!important}

  /* Chat: slightly more breathing room at the bottom when the keyboard/input is in use. */
  body.live-room-page .live-chat-panel{border-radius:14px!important;overflow:hidden!important}
  body.live-room-page .chat-compose{padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
  body.live-room-page .chat-compose input{font-size:16px!important;min-height:42px!important}
  body.live-room-page .chat-compose button{min-width:42px!important;min-height:42px!important;touch-action:manipulation!important}

  /* Bottom library/dock: respect iPhone home indicator and truncate long song names cleanly. */
  html body.live-room-page > .qup-song-dock{padding-bottom:env(safe-area-inset-bottom)!important}
  body.live-room-page .qup-song-dock-main{min-height:64px!important;touch-action:manipulation!important}
  body.live-room-page .qup-dock-add,
  body.live-room-page .qup-dock-next,
  body.live-room-page .qup-dock-next-copy{min-width:0!important}
  body.live-room-page #qupBottomNextTitle,
  body.live-room-page #qupBottomNextBy{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important}

  /* Settings should feel like a mobile sheet, without altering settings logic. */
  body.live-room-page .qup-room-settings{max-height:min(78vh,650px)!important;overflow-y:auto!important;overscroll-behavior:contain!important}
}

@media (max-width:380px){
  body.live-room-page .stage-stats.action-stats{
    width:min(318px,94%)!important;
    grid-template-columns:repeat(3,96px)!important;
  }
  body.live-room-page .action-stats .stat-action{
    width:96px!important;height:96px!important;min-width:96px!important;min-height:96px!important;max-width:96px!important;max-height:96px!important;
  }
  body.live-room-page .qup-room-bar.live-nav{padding-left:7px!important;padding-right:7px!important;gap:5px!important}
}

/* ===== QU3 MOBILE VIDEO / LED CORNER ALIGNMENT — 2026-09-23 =====
   CSS-only: make the YouTube surface use the exact inner LED-frame radius. */
@media (max-width:700px){
  body.live-room-page .video-shell,
  body.live-room-page .guest-video-shell{
    border-radius:13px!important;
  }
  body.live-room-page .qup-video-viewport{
    border-radius:10px!important;
    overflow:hidden!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,
  body.live-room-page .qup-video-viewport iframe#player,
  body.live-room-page .qup-video-viewport iframe#guestPlayer{
    border-radius:inherit!important;
    overflow:hidden!important;
  }
}

/* ===== QU3 MOBILE YOUTUBE CONTROLS VISIBILITY FIX — 2026-09-23 =====
   Keep the new responsive sizing, but never clip the native YouTube UI. */
@media (max-width:700px){
  body.live-room-page .qup-video-viewport{
    border-radius:0!important;
    overflow:visible!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,
  body.live-room-page .qup-video-viewport iframe#player,
  body.live-room-page .qup-video-viewport iframe#guestPlayer{
    border-radius:0!important;
    overflow:visible!important;
  }
}

/* ===== QU3 MOBILE NATIVE YOUTUBE CONTROL SPACE — 2026-09-23 =====
   CSS-only. Preserve responsive 16:9 sizing while giving YouTube the maximum
   horizontal room available for its native control bar. No player JS changes. */
@media (max-width:700px){
  body.live-room-page .video-shell,
  body.live-room-page .guest-video-shell{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow:visible!important;
  }
  body.live-room-page .qup-video-viewport{
    inset:2px!important;
    border-radius:0!important;
    overflow:visible!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,
  body.live-room-page .qup-video-viewport iframe#player,
  body.live-room-page .qup-video-viewport iframe#guestPlayer{
    width:100%!important;
    height:100%!important;
    border-radius:0!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }
}


/* ===== QU3 FIRE FX V4 — single clean effects layer ===== */
body.live-room-page .video-shell.qup-flame-glow,
body.live-room-page .guest-video-shell.qup-flame-glow{animation:none!important;box-shadow:var(--qup-led-shadow,inherit)!important}
body.live-room-page .video-shell>.qup-flame-ring,
body.live-room-page .guest-video-shell>.qup-flame-ring{display:none!important;opacity:0!important;box-shadow:none!important;background:none!important;filter:none!important}
body.live-room-page .qu3-fire-fx{position:absolute;inset:-10px;z-index:3;pointer-events:none;overflow:visible;border-radius:inherit;contain:layout style paint}
body.live-room-page .qu3-fire-fx.qu3-fire-hit{animation:qu3FireFrame .72s ease-out both}
@keyframes qu3FireFrame{0%{filter:drop-shadow(0 0 0 transparent)}22%{filter:drop-shadow(0 0 9px rgba(255,104,20,.9)) drop-shadow(0 0 18px rgba(255,42,0,.48))}100%{filter:drop-shadow(0 0 0 transparent)}}
body.live-room-page .qu3-fire-bit{position:absolute;bottom:0;width:12px;height:22px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 72%,#fff6a3 0 15%,#ffb21c 28%,#ff4d00 58%,rgba(255,24,0,.15) 76%,transparent 78%);transform-origin:50% 100%;opacity:0;will-change:transform,opacity;animation:qu3FireRise var(--dur,.8s) cubic-bezier(.18,.7,.2,1) var(--delay,0s) forwards}
body.live-room-page .qu3-fire-bit.edge-left{left:0;bottom:auto}
body.live-room-page .qu3-fire-bit.edge-right{right:0;bottom:auto}
@keyframes qu3FireRise{0%{opacity:0;transform:translate3d(0,8px,0) scale(.45) rotate(var(--rot,0deg))}18%{opacity:1}65%{opacity:.9}100%{opacity:0;transform:translate3d(var(--drift,0px),-34px,0) scale(1.15,.65) rotate(var(--rot,0deg))}}
@media (prefers-reduced-motion:reduce){body.live-room-page .qu3-fire-bit{animation-duration:.25s!important}body.live-room-page .qu3-fire-fx.qu3-fire-hit{animation:none!important}}

/* ===== QU3 FIRE FX V5 — Guitar-Hero-style atmospheric heat BEHIND player =====
   No emoji/fire sprites. The YouTube surface stays clean and above this layer. */
body.live-room-page .video-shell,
body.live-room-page .guest-video-shell{isolation:isolate!important;overflow:visible!important}
body.live-room-page .video-shell>.qup-video-viewport,
body.live-room-page .guest-video-shell>.qup-video-viewport{position:absolute!important;z-index:2!important}
body.live-room-page .qu3-fire-fx{
  position:absolute!important;inset:-24px -20px -34px!important;z-index:0!important;pointer-events:none!important;
  overflow:visible!important;border-radius:inherit!important;contain:layout style paint!important;opacity:0;
  filter:none!important;mix-blend-mode:screen;
}
body.live-room-page .qu3-fire-fx.qu3-fire-hit{animation:qu3AtmosphereLife 2.15s ease-out both!important}
body.live-room-page .qu3-fire-haze{position:absolute;bottom:2px;width:46%;height:58%;border-radius:50% 50% 35% 35%;opacity:0;will-change:transform,opacity,filter;background:radial-gradient(ellipse at 50% 100%,rgba(255,236,112,.82) 0%,rgba(255,118,15,.64) 22%,rgba(255,40,0,.32) 48%,rgba(120,0,255,.08) 68%,transparent 76%);filter:blur(14px)}
body.live-room-page .qu3-fire-haze-left{left:-9%;transform-origin:50% 100%;animation:qu3HeatL 1.55s ease-out .02s both}
body.live-room-page .qu3-fire-haze-center{left:27%;width:50%;height:48%;transform-origin:50% 100%;animation:qu3HeatC 1.75s ease-out .08s both}
body.live-room-page .qu3-fire-haze-right{right:-9%;transform-origin:50% 100%;animation:qu3HeatR 1.6s ease-out .04s both}
body.live-room-page .qu3-fire-smoke{position:absolute;bottom:4%;width:35%;height:75%;border-radius:48% 52% 45% 55%;opacity:0;background:radial-gradient(ellipse at 50% 80%,rgba(255,92,25,.22),rgba(120,74,110,.12) 42%,rgba(38,29,55,.10) 62%,transparent 74%);filter:blur(18px);will-change:transform,opacity}
body.live-room-page .qu3-fire-smoke-a{left:-4%;animation:qu3SmokeA 2.05s ease-out both}
body.live-room-page .qu3-fire-smoke-b{left:33%;height:65%;animation:qu3SmokeB 2.15s ease-out .08s both}
body.live-room-page .qu3-fire-smoke-c{right:-4%;animation:qu3SmokeC 2.05s ease-out .04s both}
body.live-room-page .qu3-fire-fx[data-heat="2"]{transform:scale(1.025);filter:saturate(1.12)!important}
body.live-room-page .qu3-fire-fx[data-heat="3"]{transform:scale(1.05);filter:saturate(1.22) brightness(1.08)!important}
body.live-room-page .qu3-fire-bit{display:none!important}
@keyframes qu3AtmosphereLife{0%{opacity:0}10%{opacity:.92}48%{opacity:.78}100%{opacity:0}}
@keyframes qu3HeatL{0%{opacity:0;transform:translate3d(0,20px,0) scale(.55,.45)}22%{opacity:.9;transform:translate3d(5px,0,0) scale(1,.95)}60%{opacity:.68;transform:translate3d(-5px,-14px,0) scale(1.08,1.22)}100%{opacity:0;transform:translate3d(8px,-42px,0) scale(.86,1.38)}}
@keyframes qu3HeatC{0%{opacity:0;transform:translate3d(0,24px,0) scale(.45,.38)}26%{opacity:.72;transform:translate3d(0,1px,0) scale(.95,.88)}68%{opacity:.48;transform:translate3d(0,-18px,0) scale(1.12,1.24)}100%{opacity:0;transform:translate3d(0,-48px,0) scale(.92,1.4)}}
@keyframes qu3HeatR{0%{opacity:0;transform:translate3d(0,20px,0) scale(.55,.45)}22%{opacity:.9;transform:translate3d(-5px,0,0) scale(1,.95)}60%{opacity:.68;transform:translate3d(5px,-14px,0) scale(1.08,1.22)}100%{opacity:0;transform:translate3d(-8px,-42px,0) scale(.86,1.38)}}
@keyframes qu3SmokeA{0%{opacity:0;transform:translate3d(0,22px,0) scale(.72)}25%{opacity:.52}100%{opacity:0;transform:translate3d(-18px,-62px,0) scale(1.18)}}
@keyframes qu3SmokeB{0%{opacity:0;transform:translate3d(0,25px,0) scale(.65)}30%{opacity:.38}100%{opacity:0;transform:translate3d(10px,-70px,0) scale(1.22)}}
@keyframes qu3SmokeC{0%{opacity:0;transform:translate3d(0,22px,0) scale(.72)}25%{opacity:.52}100%{opacity:0;transform:translate3d(18px,-62px,0) scale(1.18)}}
@media(max-width:700px){body.live-room-page .qu3-fire-fx{inset:-16px -10px -24px!important}body.live-room-page .qu3-fire-haze{filter:blur(11px)}body.live-room-page .qu3-fire-smoke{filter:blur(14px)}}
@media(prefers-reduced-motion:reduce){body.live-room-page .qu3-fire-fx.qu3-fire-hit{animation:qu3AtmosphereLife .45s ease-out both!important}body.live-room-page .qu3-fire-haze,body.live-room-page .qu3-fire-smoke{animation:none!important;opacity:.32!important}}

/* ===== QU3 FIRE FX V5.1 — raised atmosphere; never spills into reaction controls ===== */
body.live-room-page .qu3-fire-fx{
  inset:-30px -20px -8px!important;
  clip-path:inset(-90px -90px 0 -90px);
}
body.live-room-page .qu3-fire-haze{bottom:12%!important;height:64%!important}
body.live-room-page .qu3-fire-smoke{bottom:15%!important;height:72%!important}
@media(max-width:700px){
  body.live-room-page .qu3-fire-fx{inset:-24px -10px -5px!important;clip-path:inset(-70px -60px 0 -60px)}
  body.live-room-page .qu3-fire-haze{bottom:14%!important;height:62%!important}
  body.live-room-page .qu3-fire-smoke{bottom:17%!important;height:68%!important}
}
\n\n/* ===== QU3 FIRE FX V6 — live crowd heat + persistent song atmosphere ===== */\nbody.live-room-page .qu3-fire-fx{opacity:0!important;transition:opacity .45s ease,filter .45s ease,transform .45s ease!important}\nbody.live-room-page .qu3-fire-fx[data-baseheat="1"]{opacity:.18!important}\nbody.live-room-page .qu3-fire-fx[data-baseheat="2"]{opacity:.30!important;filter:saturate(1.08)!important}\nbody.live-room-page .qu3-fire-fx[data-baseheat="3"]{opacity:.42!important;filter:saturate(1.16) brightness(1.04)!important}\nbody.live-room-page .qu3-fire-fx:not(.qu3-fire-hit) .qu3-fire-haze{opacity:.34!important;animation:qu3IdleHeat 4.8s ease-in-out infinite alternate!important}\nbody.live-room-page .qu3-fire-fx:not(.qu3-fire-hit) .qu3-fire-smoke{opacity:.14!important;animation:qu3IdleSmoke 6.2s ease-in-out infinite alternate!important}\nbody.live-room-page .qu3-fire-fx[data-baseheat="0"] .qu3-fire-haze,body.live-room-page .qu3-fire-fx[data-baseheat="0"] .qu3-fire-smoke{animation:none!important;opacity:0!important}\nbody.live-room-page .qu3-fire-fx.qu3-fire-hit{opacity:.94!important}\nbody.live-room-page .qu3-fire-fx.qu3-fire-hit[data-heat="2"]{opacity:1!important;filter:saturate(1.14) brightness(1.04)!important}\nbody.live-room-page .qu3-fire-fx.qu3-fire-hit[data-heat="3"]{opacity:1!important;filter:saturate(1.25) brightness(1.09)!important;transform:scale(1.025)!important}\n@keyframes qu3IdleHeat{0%{transform:translate3d(0,5px,0) scale(.94,.88)}100%{transform:translate3d(0,-5px,0) scale(1.03,1.06)}}\n@keyframes qu3IdleSmoke{0%{transform:translate3d(-4px,7px,0) scale(.95)}100%{transform:translate3d(6px,-9px,0) scale(1.04)}}\n@media(max-width:700px){body.live-room-page .qu3-fire-fx[data-baseheat="1"]{opacity:.14!important}body.live-room-page .qu3-fire-fx[data-baseheat="2"]{opacity:.24!important}body.live-room-page .qu3-fire-fx[data-baseheat="3"]{opacity:.34!important}}\n@media(prefers-reduced-motion:reduce){body.live-room-page .qu3-fire-fx:not(.qu3-fire-hit) .qu3-fire-haze,body.live-room-page .qu3-fire-fx:not(.qu3-fire-hit) .qu3-fire-smoke{animation:none!important}}\n\n/* ===== QU3 FIRE FX V6.2 — first-flame visibility fix ===== */
/* V6 hid the haze/smoke whenever baseheat was 0, even during a live hit.
   Only suppress the idle atmosphere; a live flame must always be visible. */
body.live-room-page .qu3-fire-fx[data-baseheat="0"]:not(.qu3-fire-hit) .qu3-fire-haze,
body.live-room-page .qu3-fire-fx[data-baseheat="0"]:not(.qu3-fire-hit) .qu3-fire-smoke{animation:none!important;opacity:0!important}
body.live-room-page .qu3-fire-fx.qu3-fire-hit .qu3-fire-haze{opacity:.92!important}
body.live-room-page .qu3-fire-fx.qu3-fire-hit .qu3-fire-smoke{opacity:.52!important}

/* ===== QU3 FIRE FX V6.6 — consistent side-stage atmosphere ===== */
/* Keep the center of the YouTube surface clean. Every hit uses the same two
   side plumes; the only thing crowd intensity changes is strength, not position. */
body.live-room-page .qu3-fire-haze-center,
body.live-room-page .qu3-fire-smoke-b{display:none!important}
body.live-room-page .qu3-fire-fx{inset:-18px -24px -4px!important;clip-path:inset(-80px -90px 0 -90px)!important}
body.live-room-page .qu3-fire-haze-left,
body.live-room-page .qu3-fire-haze-right{bottom:18%!important;width:34%!important;height:70%!important;animation:none!important;opacity:0!important}
body.live-room-page .qu3-fire-smoke-a,
body.live-room-page .qu3-fire-smoke-c{bottom:20%!important;width:30%!important;height:72%!important;animation:none!important;opacity:0!important}
body.live-room-page .qu3-fire-haze-left{left:-8%!important}
body.live-room-page .qu3-fire-haze-right{right:-8%!important}
body.live-room-page .qu3-fire-smoke-a{left:-5%!important}
body.live-room-page .qu3-fire-smoke-c{right:-5%!important}
body.live-room-page .qu3-fire-fx.qu3-fire-hit .qu3-fire-haze-left{animation:qu3SideHeatL 2s ease-out both!important}
body.live-room-page .qu3-fire-fx.qu3-fire-hit .qu3-fire-haze-right{animation:qu3SideHeatR 2s ease-out both!important}
body.live-room-page .qu3-fire-fx.qu3-fire-hit .qu3-fire-smoke-a{animation:qu3SideSmokeL 2.15s ease-out both!important}
body.live-room-page .qu3-fire-fx.qu3-fire-hit .qu3-fire-smoke-c{animation:qu3SideSmokeR 2.15s ease-out both!important}
@keyframes qu3SideHeatL{0%{opacity:0;transform:translate3d(0,16px,0) scale(.72,.62)}18%{opacity:.88;transform:translate3d(3px,0,0) scale(1,.95)}65%{opacity:.58;transform:translate3d(-3px,-16px,0) scale(1.06,1.16)}100%{opacity:0;transform:translate3d(5px,-40px,0) scale(.9,1.3)}}
@keyframes qu3SideHeatR{0%{opacity:0;transform:translate3d(0,16px,0) scale(.72,.62)}18%{opacity:.88;transform:translate3d(-3px,0,0) scale(1,.95)}65%{opacity:.58;transform:translate3d(3px,-16px,0) scale(1.06,1.16)}100%{opacity:0;transform:translate3d(-5px,-40px,0) scale(.9,1.3)}}
@keyframes qu3SideSmokeL{0%{opacity:0;transform:translate3d(0,18px,0) scale(.78)}25%{opacity:.42}100%{opacity:0;transform:translate3d(-14px,-55px,0) scale(1.14)}}
@keyframes qu3SideSmokeR{0%{opacity:0;transform:translate3d(0,18px,0) scale(.78)}25%{opacity:.42}100%{opacity:0;transform:translate3d(14px,-55px,0) scale(1.14)}}
/* Idle heat stays faint and side-only. */
body.live-room-page .qu3-fire-fx:not(.qu3-fire-hit)[data-baseheat="1"] .qu3-fire-haze-left,
body.live-room-page .qu3-fire-fx:not(.qu3-fire-hit)[data-baseheat="1"] .qu3-fire-haze-right{opacity:.12!important}
body.live-room-page .qu3-fire-fx:not(.qu3-fire-hit)[data-baseheat="2"] .qu3-fire-haze-left,
body.live-room-page .qu3-fire-fx:not(.qu3-fire-hit)[data-baseheat="2"] .qu3-fire-haze-right{opacity:.18!important}
body.live-room-page .qu3-fire-fx:not(.qu3-fire-hit)[data-baseheat="3"] .qu3-fire-haze-left,
body.live-room-page .qu3-fire-fx:not(.qu3-fire-hit)[data-baseheat="3"] .qu3-fire-haze-right{opacity:.24!important}
@media(max-width:700px){body.live-room-page .qu3-fire-fx{inset:-14px -14px -2px!important}body.live-room-page .qu3-fire-haze-left,body.live-room-page .qu3-fire-haze-right{width:31%!important;height:64%!important;bottom:20%!important}body.live-room-page .qu3-fire-smoke-a,body.live-room-page .qu3-fire-smoke-c{width:27%!important;bottom:22%!important}}


/* ===== QU3 FIRE FX V7 — single smooth compositor pulse ===== */
body.live-room-page .qu3-fire-fx{
  transform:translateZ(0)!important;
  backface-visibility:hidden;
  will-change:opacity,transform;
  transition:none!important;
}
body.live-room-page .qu3-fire-fx.qu3-fire-hit{
  animation:qu3SingleFirePulse 1.9s cubic-bezier(.18,.72,.22,1) both!important;
}
body.live-room-page .qu3-fire-fx.qu3-fire-hit .qu3-fire-haze-left{
  animation:qu3SingleSideL 1.9s cubic-bezier(.18,.72,.22,1) both!important;
}
body.live-room-page .qu3-fire-fx.qu3-fire-hit .qu3-fire-haze-right{
  animation:qu3SingleSideR 1.9s cubic-bezier(.18,.72,.22,1) both!important;
}
body.live-room-page .qu3-fire-fx.qu3-fire-hit .qu3-fire-smoke-a,
body.live-room-page .qu3-fire-fx.qu3-fire-hit .qu3-fire-smoke-c{
  animation:none!important;
  opacity:.16!important;
}
@keyframes qu3SingleFirePulse{
  0%{opacity:0;transform:translateZ(0) scale(.995)}
  18%{opacity:.92;transform:translateZ(0) scale(1.006)}
  55%{opacity:.58;transform:translateZ(0) scale(1.003)}
  100%{opacity:0;transform:translateZ(0) scale(1)}
}
@keyframes qu3SingleSideL{
  0%{opacity:0;transform:translate3d(0,10px,0) scale(.94,.88)}
  20%{opacity:.88;transform:translate3d(-2px,-2px,0) scale(1.02,1.04)}
  100%{opacity:0;transform:translate3d(-5px,-16px,0) scale(1.05,1.10)}
}
@keyframes qu3SingleSideR{
  0%{opacity:0;transform:translate3d(0,10px,0) scale(.94,.88)}
  20%{opacity:.88;transform:translate3d(2px,-2px,0) scale(1.02,1.04)}
  100%{opacity:0;transform:translate3d(5px,-16px,0) scale(1.05,1.10)}
}
@media(max-width:700px){
  body.live-room-page .qu3-fire-smoke{display:none!important}
  body.live-room-page .qu3-fire-haze{filter:blur(9px)!important}
}

/* ===== QU3 CSS-ONLY DJ PLATTERS — VISUAL ONLY =====
   No JS, playback, realtime, queue, or reaction logic changes. */
body.live-room-page .action-stats .stat-action{
  isolation:isolate!important;
  border:1px solid rgba(218,224,255,.34)!important;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 27%,rgba(255,255,255,.035) 28% 29%,transparent 30% 37%,rgba(255,255,255,.028) 38% 39%,transparent 40% 47%,rgba(255,255,255,.024) 48% 49%,transparent 50%),
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.18) 2px 4px),
    radial-gradient(circle at 46% 40%,#26293a 0 9%,#11131e 35%,#070811 67%,#020308 100%)!important;
  box-shadow:
    inset 0 0 0 4px #070913,
    inset 0 0 0 7px rgba(187,196,230,.18),
    inset 0 0 18px rgba(0,0,0,.92),
    0 0 0 3px #121522,
    0 7px 16px rgba(0,0,0,.58)!important;
}
body.live-room-page .action-stats .stat-action::before{
  content:""!important;
  position:absolute!important;
  inset:-8px!important;
  z-index:-1!important;
  border-radius:50%!important;
  pointer-events:none!important;
  background:
    repeating-conic-gradient(from -2deg,rgba(225,230,255,.52) 0 1deg,transparent 1deg 11.25deg),
    conic-gradient(from 20deg,#3b3f50,#11131b 12%,#555a6c 24%,#12141d 37%,#484d5d 52%,#10121a 67%,#4d5263 82%,#171923)!important;
  -webkit-mask:radial-gradient(circle,transparent 0 75%,#000 76% 100%)!important;
  mask:radial-gradient(circle,transparent 0 75%,#000 76% 100%)!important;
  box-shadow:0 0 13px rgb(var(--room-led-rgb)/.30)!important;
}
body.live-room-page .action-stats .stat-action::after{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  z-index:-1!important;
  border-radius:50%!important;
  pointer-events:none!important;
  border:2px solid rgb(var(--room-led-rgb)/.58)!important;
  box-shadow:inset 0 0 12px rgb(var(--room-led-rgb)/.28),0 0 10px rgb(var(--room-led-rgb)/.24)!important;
}
body.live-room-page .action-stats .flame-stat::after{border-color:rgba(255,70,200,.76)!important;box-shadow:inset 0 0 12px rgba(255,60,190,.32),0 0 11px rgba(255,60,190,.30)!important}
body.live-room-page .action-stats .skip-stat::after{border-color:rgba(92,105,255,.78)!important;box-shadow:inset 0 0 12px rgba(83,91,255,.28),0 0 11px rgba(83,91,255,.28)!important}
body.live-room-page .action-stats .steal-stat::after{border-color:rgb(var(--room-led-rgb)/.78)!important}
body.live-room-page .action-stats .stat-action strong,
body.live-room-page .action-stats .stat-action .qup-steal-emoji{position:relative!important;z-index:2!important}
body.live-room-page .action-stats .stat-action:active{transform:translateY(1px) scale(.985)!important}
@media(max-width:700px){
  body.live-room-page .action-stats .stat-action::before{inset:-6px!important}
  body.live-room-page .action-stats .stat-action::after{inset:8px!important}
}
@media(prefers-reduced-motion:reduce){body.live-room-page .action-stats .stat-action{transition:none!important}}


/* ===== QU3 PLAYLIST ORDER + QUEUE PLAYLIST — no playback changes ===== */
.qup-playlist-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 5px}
.qup-playlist-toolbar span{font:900 10px/1 system-ui;letter-spacing:1px;color:#8f99b7}
.qup-playlist-toolbar button{border:1px solid rgb(var(--room-led-rgb)/.35);border-radius:10px;padding:9px 12px;background:rgb(var(--room-led-rgb)/.14);color:#fff;font-weight:900;cursor:pointer}
.qup-playlist-toolbar button:disabled{opacity:.6;cursor:wait}
.qup-playlist-hint{display:block;color:#77819e;font-size:10px;margin:0 0 10px}
.qup-playlist-song{grid-template-columns:22px 58px minmax(0,1fr) auto}
.qup-playlist-grip{display:grid;place-items:center;color:#6f7893;font-size:18px;cursor:grab;user-select:none;touch-action:none}
.qup-playlist-song.dragging{opacity:.45;border-color:rgb(var(--room-led-rgb)/.55)}
@media(max-width:700px){.qup-playlist-toolbar button{padding:8px 10px;font-size:10px}.qup-playlist-song{grid-template-columns:18px 48px minmax(0,1fr)}.qup-playlist-actions{grid-column:2/-1}}

/* QU3 playlist arrow ordering */
.qup-playlist-actions .qup-playlist-move{min-width:34px;padding:8px 9px;font-size:15px;line-height:1}
.qup-playlist-actions .qup-playlist-move:disabled{opacity:.28;cursor:not-allowed}
#qupQueuePlaylist.active{box-shadow:0 0 18px rgb(var(--room-led-rgb) / .22)}

/* QU3 playlist room-session controls */
.qup-playlist-controls{display:flex;align-items:center;gap:8px}.qup-playlist-status{font-size:11px;opacity:.65;white-space:nowrap}.qup-playlist-status.active{opacity:1;font-weight:700}
@media(max-width:640px){.qup-playlist-controls{gap:6px}.qup-playlist-status{font-size:10px}}

/* QU3 mobile playlist: keep compact controls at the end of each song row */
@media(max-width:700px){
  .qup-playlist-song{grid-template-columns:18px 44px minmax(0,1fr) auto;gap:7px;padding:7px}
  .qup-playlist-song img{width:44px;height:34px}
  .qup-playlist-actions{grid-column:auto;width:auto;margin-left:auto;gap:4px;flex-wrap:nowrap}
  .qup-playlist-actions button{padding:6px 7px;font-size:9px;border-radius:7px}
  .qup-playlist-actions .qup-playlist-move{min-width:25px;width:25px;height:27px;padding:0;font-size:12px;line-height:27px}
  .qup-playlist-actions .qup-playlist-remove{width:25px;height:27px;padding:0;font-size:12px}
}

/* YouTube API compliance safeguard (2026-09-28)
   Keep the official embedded player viewport at least 200 x 200 CSS pixels.
   This changes layout sizing only; it does not alter player behavior or controls. */
.video-shell,
.guest-video-shell {
  min-width: 200px;
  min-height: 200px;
}
@media (max-width:800px) {
  .video-shell,
  .guest-video-shell {
    width: 100% !important;
    min-width: 200px !important;
    min-height: 200px !important;
  }
  .video-shell #guestPlayer,
  .video-shell iframe,
  .guest-video-shell #guestPlayer,
  .guest-video-shell iframe {
    width: 100% !important;
    height: 100% !important;
    min-width: 200px !important;
    min-height: 200px !important;
  }
}


/* QU3 V21 — compact profile account settings */
.qu3-profile-top-actions{position:absolute;right:15px;top:13px;display:flex;align-items:center;gap:7px;z-index:6}
.qu3-profile-card .qu3-profile-top-actions .qu3-profile-close,.qu3-profile-card .qu3-profile-settings{position:static!important;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(255,255,255,.08);line-height:1}
.qu3-profile-card .qu3-profile-settings{font-size:15px}
.qu3-profile-card .qu3-profile-close{font-size:22px}
.qu3-profile-card .qu3-profile-settings:hover,.qu3-profile-card .qu3-profile-close:hover{background:rgba(255,255,255,.14)}
.qu3-account-settings-menu{position:absolute;right:15px;top:55px;z-index:7;width:min(230px,calc(100% - 30px));box-sizing:border-box;padding:12px;border:1px solid rgba(190,117,255,.35);border-radius:14px;background:#171020;box-shadow:0 16px 42px rgba(0,0,0,.48)}
.qu3-account-settings-menu[hidden]{display:none!important}
.qu3-account-settings-title{margin:0 2px 10px;color:#bca8cb;font-size:9px;font-weight:900;letter-spacing:.12em}
.qu3-account-settings-menu .qu3-logout-account{margin-bottom:7px!important}
.qu3-account-settings-menu .qu3-delete-account{width:100%;border:1px solid rgba(255,91,108,.45);background:rgba(255,70,90,.07);color:#ff9aa6;border-radius:12px;padding:10px 14px;font:inherit;font-weight:800;cursor:pointer}
.qu3-account-settings-menu .qu3-delete-account:hover{background:rgba(255,70,90,.13);border-color:rgba(255,110,125,.7)}
.qu3-account-settings-menu>small{display:block;margin:8px 3px 1px;color:#8f8199;font-size:9px;line-height:1.35}


/* V23 compact sliding profile badges */
.qu3-badge-head-actions{display:flex;align-items:center;gap:7px}
.qu3-badge-next{width:24px;height:24px;display:grid;place-items:center;padding:0;border:1px solid rgba(126,91,255,.42);border-radius:50%;background:rgba(17,12,38,.82);color:#d9cfff;font-size:21px;line-height:1;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.qu3-badge-next:hover{transform:translateX(1px);border-color:rgba(100,220,255,.72);box-shadow:0 0 12px rgba(133,73,255,.28)}
.qu3-badge-slider{width:100%;overflow:hidden}
.qu3-badge-list{display:flex!important;grid-template-columns:none!important;gap:8px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px 1px 5px!important}
.qu3-badge-list::-webkit-scrollbar{display:none}
.qu3-badge{flex:0 0 calc((100% - 24px)/4)!important;scroll-snap-align:start;aspect-ratio:1/1.12!important}
@media(max-width:700px){.qu3-badge-list{gap:6px!important}.qu3-badge{flex-basis:calc((100% - 18px)/4)!important}.qu3-badge-next{width:22px;height:22px;font-size:19px}}

/* V24: account settings are only available on the signed-in user's own profile. */
.qu3-profile-card .qu3-profile-settings[hidden],
.qu3-profile-card .qu3-account-settings-menu[hidden]{display:none!important}

/* QU3 V27 daily streak */
.qu3-profile-streak{margin-top:9px;font-size:11px;font-weight:800;color:#d8b8ff;text-align:right}
\n\n/* QU3 V40 — Find Party / Discover visual system */
.qu3-find-party-v40{background:#05050b!important;position:relative;isolation:isolate}
.qu3-find-party-v40 .activity-stars{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.65;background:
 radial-gradient(circle at 50% 3%,rgba(137,64,255,.22),transparent 30%),
 radial-gradient(circle at 8% 32%,rgba(255,48,172,.08),transparent 23%),
 radial-gradient(circle at 93% 62%,rgba(71,102,255,.09),transparent 26%),
 radial-gradient(circle,rgba(255,255,255,.22) 0 1px,transparent 1.4px) 0 0/47px 47px,
 radial-gradient(circle,rgba(183,133,255,.18) 0 1px,transparent 1.3px) 18px 21px/71px 71px}
.qu3-find-party-v40 .qup-discover-nav.activity-nav{height:64px;padding:0 clamp(16px,3vw,38px);background:rgba(5,5,12,.78);border-bottom:1px solid rgba(166,93,255,.18);box-shadow:0 12px 45px rgba(0,0,0,.28);backdrop-filter:blur(18px)}
.qu3-find-party-v40 .qup-discover-identity{border:1px solid rgba(177,105,255,.2);background:rgba(21,14,37,.7);color:#d7c6ff;box-shadow:0 0 24px rgba(139,69,255,.08)}
.qu3-find-party-v40 .qup-discover-shell{width:min(1180px,100%);padding:44px clamp(14px,3.5vw,44px) 90px}
.qu3-find-party-v40 .qup-discover-hero{max-width:860px;margin-bottom:34px;position:relative}
.qu3-find-party-v40 .qup-discover-hero:before{content:"";position:absolute;width:420px;height:210px;left:50%;top:-45px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(145,67,255,.18),transparent 68%);filter:blur(10px);z-index:-1;pointer-events:none}
.qu3-find-party-v40 .eyebrow{display:inline-block;color:#d9a8ff;font-size:9px;font-weight:950;letter-spacing:.25em;text-shadow:0 0 16px rgba(181,99,255,.6)}
.qu3-find-party-v40 .qup-discover-hero h1{font-size:clamp(42px,6vw,70px);font-weight:1000;letter-spacing:-.055em;margin:9px 0 8px;color:#fff;text-shadow:0 0 30px rgba(126,70,255,.16)}
.qu3-find-party-v40 .qup-discover-hero h1 em{font-style:normal;background:linear-gradient(110deg,#c67bff,#8f62ff 48%,#ff55c8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 13px rgba(167,79,255,.25))}
.qu3-find-party-v40 .qup-discover-hero>p{font-size:14px;color:#8d8aa4;margin-bottom:18px}
.qu3-find-live-stats{display:flex;justify-content:center;gap:10px;margin:0 auto 22px}
.qu3-find-live-stats>div{min-width:150px;padding:10px 16px;border-radius:14px;border:1px solid rgba(165,95,255,.18);background:linear-gradient(180deg,rgba(31,19,52,.78),rgba(12,10,22,.82));box-shadow:inset 0 1px rgba(255,255,255,.03),0 0 28px rgba(139,65,255,.06)}
.qu3-find-live-stats b{display:block;font-size:22px;line-height:1;color:#fff}.qu3-find-live-stats span{display:block;margin-top:5px;color:#9e91b8;font-size:8px;font-weight:900;letter-spacing:.12em}
.qu3-find-party-v40 .qup-room-search-wrap{height:58px;max-width:760px;margin:auto;border-radius:16px;border-color:rgba(160,102,255,.23);background:rgba(13,10,25,.86);box-shadow:0 16px 55px rgba(0,0,0,.32),0 0 30px rgba(132,61,255,.06)}
.qu3-find-party-v40 .qup-room-search-wrap:focus-within{border-color:rgba(181,111,255,.62);box-shadow:0 16px 55px rgba(0,0,0,.38),0 0 0 3px rgba(147,72,255,.1),0 0 35px rgba(147,72,255,.14)}
.qu3-find-party-v40 .qu3-room-filters{margin-top:15px;gap:8px}
.qu3-find-party-v40 .qu3-room-filters button{padding:8px 14px;border-color:rgba(255,255,255,.075);background:rgba(255,255,255,.035);color:#88839b;transition:.16s ease}
.qu3-find-party-v40 .qu3-room-filters button:hover{border-color:rgba(177,106,255,.3);color:#ddd5ed}
.qu3-find-party-v40 .qu3-room-filters button.active{background:linear-gradient(135deg,rgba(146,68,255,.24),rgba(255,67,190,.1));border-color:rgba(181,112,255,.42);box-shadow:0 0 22px rgba(143,69,255,.11);color:#fff}
.qu3-find-party-v40 .qup-discover-status{color:#6e6881!important;margin-top:12px!important}
.qu3-find-party-v40 .qup-room-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.qu3-find-party-v40 .qup-public-room-card{background:linear-gradient(155deg,rgba(18,13,32,.98),rgba(8,8,16,.98));border:1px solid rgba(157,93,255,.18);border-radius:17px!important;box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.025)}
.qu3-find-party-v40 .qup-public-room-card:hover,.qu3-find-party-v40 .qup-public-room-card:focus-visible{transform:translateY(-3px);border-color:rgba(181,102,255,.52);box-shadow:0 22px 60px rgba(0,0,0,.48),0 0 30px rgba(143,63,255,.12)}
.qu3-find-party-v40 .qup-public-room-media{border-bottom:1px solid rgba(160,89,255,.1)}
.qu3-find-party-v40 .qup-public-room-media:after{height:54%;background:linear-gradient(transparent,rgba(9,7,17,.92))}
.qu3-find-party-v40 .qup-public-room-body{padding:13px 14px 14px!important}
.qu3-find-party-v40 .qup-public-room-name{font-size:14px;color:#fff}.qu3-find-party-v40 .qup-public-host{color:#766f89}
.qu3-find-party-v40 .qup-public-song{color:#e7ddff!important}.qu3-find-party-v40 .qup-public-song-icon{color:#b16fff}
.qu3-find-party-v40 .qup-public-card-footer{border-top:1px solid rgba(255,255,255,.04);padding-top:7px;margin-top:7px}
.qu3-find-party-v40 .qup-public-member-count{padding-left:0!important;margin-top:0;color:#a79db9!important}
.qu3-find-party-v40 .qu3-favorite-thumb-heart{filter:drop-shadow(0 0 8px rgba(255,69,177,.6))}
@media(max-width:760px){
 .qu3-find-party-v40 .qup-discover-shell{padding:30px 12px 76px}
 .qu3-find-party-v40 .qup-discover-hero{margin-bottom:25px}
 .qu3-find-party-v40 .qup-discover-hero h1{font-size:40px;letter-spacing:-.05em}
 .qu3-find-live-stats>div{min-width:0;flex:1;max-width:180px;padding:9px 10px}.qu3-find-live-stats b{font-size:19px}.qu3-find-live-stats span{font-size:7px}
 .qu3-find-party-v40 .qu3-room-filters{justify-content:flex-start;padding:0 2px}
 .qu3-find-party-v40 .qup-room-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .qu3-find-party-v40 .qup-public-room-body{padding:8px!important}
 .qu3-find-party-v40 .qup-public-room-name{font-size:11px}.qu3-find-party-v40 .qup-public-host{font-size:7px;padding-left:16px}
 .qu3-find-party-v40 .qup-public-card-footer{padding-left:16px;gap:4px}.qu3-find-party-v40 .qup-public-current-dj{font-size:7px}.qu3-find-party-v40 .qup-public-member-count{font-size:7px!important}
}

/* V41 Find Party card polish */
.qu3-find-party-v40 .qup-public-card-footer{border-top:0!important;padding-top:0!important;margin-top:3px!important}
.qu3-find-party-v40 .qup-public-room-line{display:flex;align-items:center;min-width:0}
.qu3-find-party-v40 .qu3-favorite-room-heart{margin-left:auto;padding-left:7px;color:#ff4aaf;font-size:15px;line-height:1;text-shadow:0 0 9px rgba(255,74,175,.65)}

/* ===== QU3 ROOM BOUNCERS V1 ===== */
.qu3-profile-status.is-bouncer{color:#45c8ff!important;text-shadow:0 0 14px rgba(69,200,255,.38)}
.qu3-bouncer-controls{margin-top:18px;padding:15px;border:1px solid rgba(69,200,255,.28);border-radius:16px;background:rgba(69,200,255,.055)}
.qu3-bouncer-controls[hidden]{display:none!important}.qu3-bouncer-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.qu3-bouncer-head b{font-size:11px;letter-spacing:.11em;color:#45c8ff;text-shadow:0 0 12px rgba(69,200,255,.3)}.qu3-bouncer-head small{font-size:9px;opacity:.6}.qu3-bouncer-controls p{font-size:10px;line-height:1.45;color:#aaa4ba;margin:9px 0 11px}.qu3-bouncer-controls button{width:100%;padding:10px 12px;border:1px solid rgba(69,200,255,.5);border-radius:11px;background:rgba(69,200,255,.12);color:#dff7ff;font-weight:900;cursor:pointer}.qu3-bouncer-controls>small{display:block;min-height:14px;margin-top:7px;text-align:center;font-size:10px;color:#8de3ff}
body.live-room-page .qu3-room-role-admin .qup-room-person-copy b,body.live-room-page .qu3-room-role-admin .qup-room-person-copy small{color:#ff4f62!important;text-shadow:0 0 10px rgba(255,79,98,.28)}
body.live-room-page .qu3-room-role-ambassador .qup-room-person-copy b,body.live-room-page .qu3-room-role-ambassador .qup-room-person-copy small{color:#ffd45c!important;text-shadow:0 0 10px rgba(255,212,92,.25)}
body.live-room-page .qu3-room-role-bouncer .qup-room-person-copy b,body.live-room-page .qu3-room-role-bouncer .qup-room-person-copy small{color:#45c8ff!important;text-shadow:0 0 10px rgba(69,200,255,.34)}
body.live-room-page .qu3-room-role-host .qup-room-person-copy small{color:#f1d9ff!important;font-weight:900}
body.live-room-page .chat-name b.qu3-chat-role-bouncer{color:#45c8ff!important;text-shadow:0 0 12px rgba(69,200,255,.38)}


/* QU3 Bouncers v2 — room role lives inside the existing user-management section. */
#qu3AdminUserControls #qu3BouncerControls{
  margin-top:12px!important;
  padding-top:12px!important;
  border-top:1px solid rgba(69,200,255,.22)!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#qu3AdminUserControls #qu3BouncerControls[hidden],
#qu3AdminUserControls #qu3AdminRankControls[hidden]{display:none!important}
#qu3AdminUserControls #qu3BouncerControls .qu3-bouncer-head b{color:#45C8FF!important}


/* QU3 Bouncers v3 — keep long staff profile cards inside the viewport. */
.qu3-profile-backdrop{
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.qu3-profile-card{
  max-height:calc(100dvh - 32px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin;
}

/* Compact management panel: Admin ranks and room Bouncer controls share one small block. */
.qu3-profile-card .qu3-admin-user-controls{
  margin-top:12px!important;
  padding:10px 12px!important;
  border-radius:13px!important;
}
.qu3-profile-card .qu3-admin-user-head{
  margin-bottom:5px!important;
}
.qu3-profile-card .qu3-admin-user-head b{
  font-size:10px!important;
}
.qu3-profile-card .qu3-admin-user-head small{
  font-size:9px!important;
}
.qu3-profile-card #qu3AdminRankControls{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:5px 10px!important;
  align-items:center!important;
}
.qu3-profile-card #qu3AdminRankControls[hidden]{display:none!important}
.qu3-profile-card #qu3AdminRankControls label{
  padding:5px 0!important;
  font-size:11px!important;
}
.qu3-profile-card #qu3AdminRankControls input{
  width:16px!important;
  height:16px!important;
}
.qu3-profile-card #qu3AdminRankControls #qu3AdminSaveRoles{
  grid-column:1 / -1!important;
  margin-top:2px!important;
  padding:7px 10px!important;
  font-size:11px!important;
}
.qu3-profile-card #qu3AdminRankControls #qu3AdminRoleMessage{
  grid-column:1 / -1!important;
  min-height:0!important;
  margin-top:1px!important;
}
.qu3-profile-card #qu3BouncerControls{
  margin-top:7px!important;
  padding-top:8px!important;
}
.qu3-profile-card #qu3BouncerControls .qu3-bouncer-head{
  margin-bottom:3px!important;
}
.qu3-profile-card #qu3BouncerControls p{
  margin:4px 0 6px!important;
  font-size:10px!important;
  line-height:1.35!important;
}
.qu3-profile-card #qu3BouncerControls button{
  margin-top:2px!important;
  padding:8px 10px!important;
  font-size:11px!important;
}

/* Mobile profile cards get slightly tighter padding but preserve all content. */
@media(max-width:700px){
  .qu3-profile-backdrop{
    padding:8px!important;
    place-items:center!important;
  }
  .qu3-profile-card{
    width:min(420px,calc(100vw - 16px))!important;
    max-height:calc(100dvh - 16px)!important;
    padding:20px 18px!important;
  }
}


/* QU3 Bouncers v4 — compact Admin account-rank dropdown. */
.qu3-profile-card #qu3AdminRankControls.qu3-admin-rank-dropdown{
  display:block!important;
  margin:5px 0 2px!important;
  padding:0!important;
  border:1px solid rgba(211,92,255,.18)!important;
  border-radius:10px!important;
  background:rgba(211,92,255,.035)!important;
}
.qu3-profile-card #qu3AdminRankControls.qu3-admin-rank-dropdown[hidden]{display:none!important}
.qu3-profile-card .qu3-admin-rank-dropdown summary{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:30px!important;
  padding:0 9px!important;
  list-style:none!important;
  cursor:pointer!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.07em!important;
  color:#d9b7ff!important;
  user-select:none!important;
}
.qu3-profile-card .qu3-admin-rank-dropdown summary::-webkit-details-marker{display:none!important}
.qu3-profile-card .qu3-admin-rank-dropdown summary span{
  font-size:11px!important;
  transition:transform .18s ease!important;
}
.qu3-profile-card .qu3-admin-rank-dropdown[open] summary span{
  transform:rotate(180deg)!important;
}
.qu3-profile-card .qu3-admin-rank-dropdown-body{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:4px 10px!important;
  padding:4px 9px 8px!important;
  border-top:1px solid rgba(211,92,255,.12)!important;
}
.qu3-profile-card .qu3-admin-rank-dropdown-body label{
  padding:4px 0!important;
  font-size:10px!important;
}
.qu3-profile-card .qu3-admin-rank-dropdown-body input{
  width:15px!important;
  height:15px!important;
}
.qu3-profile-card .qu3-admin-rank-dropdown-body #qu3AdminSaveRoles{
  grid-column:1 / -1!important;
  margin-top:1px!important;
  padding:6px 9px!important;
  font-size:10px!important;
}
.qu3-profile-card .qu3-admin-rank-dropdown-body #qu3AdminRoleMessage{
  grid-column:1 / -1!important;
  min-height:0!important;
  margin-top:0!important;
  font-size:9px!important;
}

.qup-ban-row .qu3-ban-by{display:block!important;margin-top:3px!important;font-size:10px!important;opacity:.58!important}

/* QU3 room-ban modal (profile-card-inspired). */
.qu3-ban-modal-open{overflow:hidden!important}
.qu3-ban-overlay{position:fixed;inset:0;z-index:2147483646;display:grid;place-items:center;padding:14px;background:rgba(3,2,16,.86);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);overflow-y:auto}
.qu3-ban-card{box-sizing:border-box;width:min(460px,100%);max-height:calc(100dvh - 28px);overflow-y:auto;padding:20px 22px 24px;text-align:center;border-radius:26px;border:1px solid #d548f9;background:linear-gradient(155deg,#11102c 0%,#060918 68%,#1a092c 100%);box-shadow:0 0 0 1px rgba(58,120,255,.45),0 0 36px rgba(218,34,246,.26),0 22px 65px rgba(0,0,0,.65);color:#fff}
.qu3-ban-mewq{display:block;width:min(250px,75%);height:210px;object-fit:contain;margin:0 auto 8px;filter:drop-shadow(0 0 15px rgba(229,48,237,.32))}
.qu3-ban-card h2{font-size:clamp(23px,5vw,29px);line-height:1.2;margin:8px 0 20px;font-weight:850;letter-spacing:-.5px}
.qu3-ban-card h2 em{font-style:normal;color:#ff35bd}
.qu3-ban-details{border:1px solid rgba(126,94,255,.48);border-radius:18px;padding:14px 18px;background:rgba(3,6,25,.65);text-align:left}
.qu3-ban-details>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;align-items:start;padding:9px 0;font-size:13px}
.qu3-ban-details span{color:#a6a6d5}.qu3-ban-details strong{overflow-wrap:anywhere;font-weight:650}.qu3-ban-details>div:first-child strong{color:#ff44c4}
.qu3-ban-discover{display:block;width:min(330px,100%);margin:20px auto 0;padding:15px 18px;border-radius:999px;border:1px solid #ff4bf1;background:linear-gradient(90deg,#58135d,#9900c6);color:#fff;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 0 22px rgba(240,36,238,.35)}
.qu3-ban-discover:focus-visible{outline:2px solid #7dd8ff;outline-offset:3px}
@media(max-height:680px){.qu3-ban-card{padding:12px 16px 16px}.qu3-ban-mewq{height:135px}.qu3-ban-card h2{margin:3px 0 12px}.qu3-ban-details{padding:8px 12px}.qu3-ban-details>div{padding:5px 0}.qu3-ban-discover{margin-top:12px}}