/* ESC Stage Lobby (CHANGES 200) - UI. Third-party stage art in /stage/art is beta placeholder art. */
#escModeToggle{display:inline-flex;align-items:center;flex:0 0 auto;border:1px solid var(--gold);border-radius:999px;overflow:hidden;margin:0 6px;font:600 12px/1 Oswald,sans-serif;letter-spacing:.04em;text-transform:uppercase;pointer-events:auto;height:28px}
#escModeToggle button{background:transparent;border:0;color:var(--gold);padding:0 12px;height:100%;font:inherit;cursor:pointer;white-space:nowrap}
#escModeToggle button[aria-pressed="true"]{background:var(--gold);color:var(--bg)}
@media (max-width:900px){#escModeToggle{display:inline-flex!important;margin:0 4px}#escModeToggle button{padding:0 8px;font-size:11px}}
body.esc-stage-mode .esc-hide-in-stage{display:none!important}
#escStage{position:fixed;left:0;right:0;bottom:8px;z-index:300;display:none;flex-direction:column;background:var(--s-bg);color:var(--s-tx);font:400 14px/1.4 Oswald,system-ui,sans-serif;overflow:hidden}
body.esc-stage-mode #escStage{display:flex}
#escStage *{box-sizing:border-box}
#escStage button{font-family:inherit}
#escStage a{color:var(--gold)}
.es-btn{background:var(--s-card);color:var(--gold);border:1px solid color-mix(in srgb,var(--s-gold) 40%,var(--s-bd));border-radius:8px;padding:6px 12px;font:600 13px Oswald,sans-serif;cursor:pointer;letter-spacing:.03em}
.es-btn:hover{background:color-mix(in srgb,var(--s-gold) 18%,var(--s-card))}.es-btn.pri{background:var(--gold);color:var(--s-on);border-color:var(--gold)}.es-btn.red{color:color-mix(in srgb,var(--accent) 55%,var(--text));border-color:color-mix(in srgb,var(--accent) 45%,var(--bg))}.es-btn.sm{padding:3px 8px;font-size:12px}.es-btn[disabled]{opacity:.45;cursor:not-allowed}
.es-muted{color:var(--s-mu)}.es-small{font-size:12px}
/* list view */
#esList{flex:1;overflow:auto;padding:14px 16px 40px;max-width:1100px;width:100%;margin:0 auto}
.esl-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.esl-head h2{margin:0 8px 0 0;font:600 22px Oswald,sans-serif;color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
.esl-sp{flex:1}
.esl-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.es-chip{background:var(--s-card);color:var(--s-tx);border:1px solid var(--s-bd);border-radius:999px;padding:3px 11px;font:500 12px Oswald,sans-serif;cursor:pointer}
.es-chip[aria-pressed="true"]{background:var(--gold);color:var(--s-on);border-color:var(--gold)}
.es-note{background:var(--s-card);border:1px solid var(--s-bd);border-radius:10px;padding:8px 12px;margin:0 0 12px;color:var(--s-tx)}
.es-row{display:grid;grid-template-columns:56px 1fr auto;gap:8px;align-items:center;background:linear-gradient(180deg,var(--s-card),var(--s-bg));border:1px solid var(--s-bd);border-radius:10px;padding:7px;margin-bottom:6px}
.es-row:hover{border-color:color-mix(in srgb,var(--s-gold) 45%,var(--s-bd))}
.es-row .th{width:56px;height:40px;border-radius:8px;background:var(--bg) center/cover no-repeat;border:1px solid var(--s-bd);position:relative;overflow:hidden}
.es-row .th img{position:absolute;inset:auto 3px 3px auto;height:16px;width:auto;max-width:60%;object-fit:contain;background:color-mix(in srgb,var(--bg) 55%,transparent);border-radius:4px;padding:1px 3px}
.es-row .nm{font:600 14px Oswald,sans-serif;color:var(--s-tx);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.es-row .sub{color:var(--s-mu);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62vw}
.es-row .np{color:var(--s-tx);font-size:12px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es-row .rt{text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.es-row .cnt{font:600 14px Oswald,sans-serif;color:color-mix(in srgb,var(--gold) 55%,var(--text))}
.es-tag{font:600 10px Oswald,sans-serif;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:1px 6px;background:color-mix(in srgb,var(--s-gold) 18%,var(--s-card));color:color-mix(in srgb,var(--s-gold) 62%,var(--text))}
.es-tag.live{background:color-mix(in srgb,var(--accent) 32%,var(--bg));color:color-mix(in srgb,var(--accent) 42%,var(--text))}.es-tag.ok{background:color-mix(in srgb,var(--gold) 26%,var(--bg));color:color-mix(in srgb,var(--gold) 48%,var(--text))}.es-tag.lock{background:color-mix(in srgb,var(--gold-dim) 38%,var(--bg));color:color-mix(in srgb,var(--gold) 62%,var(--text))}.es-tag.esc{background:var(--gold);color:var(--s-on)}
/* room */
#esRoom{flex:1;display:none;min-height:0}
#escStage[data-view="room"] #esRoom{display:flex}
#escStage[data-view="room"] #esList{display:none}
#escStage[data-view="list"] #esRoom{display:none}
.er-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:auto}
/* ===== Stage room layout (Release 2): Turntable-style stage, backstage dock, 3 screens; all colours follow the header theme variables ===== */
#escStage,#esModal,#esToast{--s-bg:var(--bg);--s-chrome:var(--chrome);--s-card:color-mix(in srgb,var(--chrome),var(--text) 8%);--s-bd:var(--border);--s-tx:var(--text);--s-mu:var(--muted);--s-gold:var(--gold);--s-on:var(--bg);--s-glass:color-mix(in srgb,var(--chrome) 55%,transparent);--s-glass2:color-mix(in srgb,var(--chrome) 70%,transparent);--s-in:color-mix(in srgb,var(--chrome),var(--bg) 35%)}
/* (--s-on is var(--bg) for every theme now; the old noir-only pin is gone) */
#esRoom{position:relative;isolation:isolate;overflow:hidden;--bgimg:none}
#esRoom::before{content:"";position:absolute;inset:-24px;z-index:-1;background:var(--bgimg) center/cover no-repeat,var(--s-bg);filter:blur(16px) brightness(.5) saturate(1.1)}
#esRoom.globe::before{display:none}
.er-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;container-type:inline-size;container-name:erm}
.er-bar{display:flex;gap:8px;align-items:center;padding:6px 10px;background:var(--s-glass2);border-bottom:1px solid var(--s-bd);flex-wrap:wrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);min-height:48px}
.er-bar .t{font:600 17px Oswald,sans-serif;color:var(--s-tx);margin-right:2px;max-width:34cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.er-hnow{display:flex;gap:8px;align-items:center;flex:1 1 140px;min-width:0;color:var(--s-tx);font:500 13px Oswald,sans-serif;overflow:hidden;white-space:nowrap}
.er-hnow .ic{color:var(--s-gold)}.er-hnow .tt{overflow:hidden;text-overflow:ellipsis;min-width:0}.er-hnow .rem{color:var(--s-gold);font-weight:600;flex:none}
.er-stat{font:500 12px Oswald,sans-serif;color:var(--s-mu);white-space:nowrap}
.er-stagebox{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size;padding:6px}
.er-scene{--u:8.6cqw;position:relative;width:min(100cqw,calc(100cqh*16/9));aspect-ratio:16/9;overflow:hidden;background:var(--s-bg) center/100% 100% no-repeat;container-type:inline-size;flex:none;border-radius:6px;box-shadow:0 8px 30px color-mix(in srgb,var(--bg) 55%,transparent)}
.er-scene.globe{background:transparent;box-shadow:none}
.er-art{position:absolute;inset:0;background:url(./stage/art/stage.png) center top/100% auto no-repeat;pointer-events:none}
.er-scene.bgimg .er-art{display:none}.er-scene.globe .er-art{opacity:.45}
.er-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:url(./stage/art/floor.jpg) center/cover;opacity:.9;pointer-events:none}
.er-scene.bgimg .er-floor{display:none}.er-scene.globe .er-floor{opacity:.3}
.er-vig{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--bg) 38%,transparent))}
.er-screen{position:absolute;z-index:2;background:var(--bg);border:max(2px,.25cqw) solid color-mix(in srgb,var(--s-gold) 40%,var(--s-bd));border-radius:.6cqw;overflow:hidden;box-shadow:0 0 1.6cqw color-mix(in srgb,var(--s-gold) 35%,transparent)}
.er-screen.main{left:50%;transform:translateX(-50%);top:3%;width:32%;aspect-ratio:16/9}
.er-screen.side{top:6.5%;width:23%;aspect-ratio:16/10}
.er-screen.l{left:4%}.er-screen.r{right:4%}
.er-screen.main.off{left:0;top:0;transform:none;width:2px;height:2px;opacity:0;pointer-events:none;border:0;box-shadow:none}
.er-screen .vid,.er-screen .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.er-screen .sbg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(8px) brightness(.55) saturate(1.3)}
.er-screen .cov{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.er-screen .chip{position:absolute;left:.5cqw;top:.4cqw;z-index:2;font:700 clamp(7px,.95cqw,11px) Oswald,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:color-mix(in srgb,var(--bg) 62%,transparent);color:var(--text);border-radius:3px;padding:0 .6cqw}
.er-screen .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4cqw;text-align:center;color:var(--text);font:600 clamp(9px,1.5cqw,16px) Oswald,sans-serif;letter-spacing:.06em;padding:1cqw}
.er-screen .ph img{max-width:60%;max-height:55%;object-fit:contain}.er-screen .ph small{font-weight:400;opacity:.8;font-size:.8em}
.er-screen a.adl{position:absolute;inset:0;display:block}.er-screen a.adl img{width:100%;height:100%;object-fit:contain;display:block}
.er-tap{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 72%,transparent);color:var(--text);font:600 15px Oswald;cursor:pointer;z-index:3;text-align:center;padding:6px}
.er-booth{position:absolute;left:0;top:calc(var(--cdj,81.4%) - var(--djh,12.6%));width:100%;pointer-events:none;height:calc(var(--djh,12.6%) + var(--djhide,4.2%));z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
/* CHANGES 212: the CDJs are the ones painted into the background. .er-front = copy of the background clipped to the CDJ/table row, drawn OVER the DJ avatar so the DJ stands behind the decks; the old full-width desk bar is now a small name plate */
.er-front{position:absolute;inset:0;z-index:4;pointer-events:none;background:inherit;clip-path:inset(var(--cdj,81.4%) 0 0 0)}
.er-booth::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 42%,transparent));z-index:3}  /* CHANGES 221: soft shadow of the decks on the lower body of the DJ */
.er-front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--bg) 38%,transparent))}
.er-scene:not(.bgimg) .er-front{display:none}
.er-desk{position:absolute;left:50%;transform:translateX(-50%);bottom:.7cqw;z-index:5;display:flex;align-items:center;justify-content:center;max-width:60%;pointer-events:none}
.er-desk .dm{pointer-events:auto}
.er-led{position:absolute;left:50%;transform:translateX(-50%);top:36.5%;z-index:3;width:42%;height:7%;display:flex;align-items:center;gap:1cqw;padding:0 1.2cqw .7cqw;background:var(--bg);border:1px solid var(--border);border-radius:.5cqw;--led:var(--gold);box-shadow:inset 0 0 .8cqw var(--bg),0 0 1.2cqw color-mix(in srgb,var(--s-gold) 30%,transparent)}
/* 2026-10-22: the LED band's title/time text and marquee are removed (Corey) - only the dotted progress (.dots) remains; the .win/.tx/.tm rules went with the elements. */
.er-led .dots{position:absolute;left:1cqw;right:1cqw;bottom:.45cqw;height:.45cqw;background:repeating-linear-gradient(90deg,var(--gold-dim) 0 .3cqw,transparent .3cqw .6cqw)}
.er-led .dots i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--led) 0 .3cqw,transparent .3cqw .6cqw)}
.er-decks{position:relative;width:100%;flex:1 1 auto;min-height:0}
.er-deck{position:absolute;top:0;bottom:0;width:20%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;pointer-events:auto}
.er-deck.alt .av img{opacity:1;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--gold) 50%,transparent))}   /* CHANGES 237: waiting DJ is fully opaque (was .92 = looked transparent); a soft gold glow marks the DJ who is up next */
.er-deck .av,.er-deck .av img{opacity:1}
.er-deck .av{flex:1 1 auto;min-height:0;position:relative;z-index:1;margin-bottom:0;cursor:pointer;display:flex;align-items:flex-end}
.er-deck .av img{height:100%;width:auto;display:block}
.er-deck.cur .av img{animation:erbob .6s ease-in-out infinite alternate}
@keyframes erbob{to{transform:translateY(-3%)}}
.er-deck.stepup .av{animation:erstep 1s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes erstep{0%{transform:translateY(240%) scale(.6);opacity:0}25%{opacity:1}100%{transform:none;opacity:1}}
.er-desk .dm{display:flex;gap:.8cqw;align-items:center;justify-content:center;z-index:3;max-width:100%;min-width:0;color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid color-mix(in srgb,var(--s-gold) 55%,var(--border));border-radius:999px;padding:.25cqw .9cqw}.er-desk .meta{display:flex;gap:.6cqw;align-items:center;justify-content:center;min-width:0;flex:0 1 auto}
.er-desk .nm{color-mix(in srgb,var(--bg) 68%,transparent);border-radius:999px;padding:.1cqw 1cqw;font:600 clamp(9px,1.3cqw,14px)/1.3 Oswald,sans-serif;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16cqw}
.er-desk .pt{background:var(--s-gold);color:var(--s-on);border-radius:999px;padding:.1cqw .9cqw;font:700 clamp(9px,1.2cqw,13px)/1.3 Oswald,sans-serif;white-space:nowrap}
.er-deck.empty .av{align-items:center;justify-content:center;color:var(--text);font:600 clamp(9px,1.5cqw,16px) Oswald,sans-serif;text-shadow:0 1px 3px var(--bg);text-align:center;letter-spacing:.06em;cursor:default}
.er-fl{position:absolute;inset:0;z-index:2;pointer-events:none}
.er-fl .p{position:absolute;display:block;transform:translate(-50%,-100%);transition:left .4s,top .4s;pointer-events:auto;cursor:pointer}
.er-fl .p img{height:100%;width:100%;object-fit:contain;object-position:50% 100%;display:block}
.er-fl .p.me::after{content:"";position:absolute;left:10%;right:10%;bottom:-2%;height:6%;border-radius:50%;background:color-mix(in srgb,var(--s-gold) 70%,transparent)}
.er-fl .you,.er-you{position:absolute;left:50%;transform:translateX(-50%);bottom:100%;margin-bottom:.2cqw;background:var(--s-gold);color:var(--s-on);font:700 clamp(8px,1.05cqw,12px)/1 Oswald,sans-serif;letter-spacing:.1em;padding:.25cqw .7cqw;border-radius:999px;white-space:nowrap;z-index:2}
.er-fl .you::after{content:"";position:absolute;left:50%;top:100%;margin-left:-.4cqw;border:.4cqw solid transparent;border-top-color:var(--s-gold)}
.er-fl .p.dance img,.er-deck.dance .av img{animation:erdance .45s ease-in-out 8}
@keyframes erdance{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-14%) rotate(-5deg)}70%{transform:translateY(-6%) rotate(5deg)}}
.bub{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);font-size:clamp(14px,2.4cqw,22px);animation:erbub 3s forwards;pointer-events:none;z-index:25}
@keyframes erbub{0%{opacity:0;transform:translate(-50%,6px)}10%,80%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}
.cb{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:1.8cqw;width:max-content;max-width:17cqw;color-mix(in srgb,var(--bg) 74%,transparent);border-radius:.8cqw;padding:.3cqw .8cqw .4cqw;font:500 clamp(9px,1.2cqw,13px)/1.25 Oswald,sans-serif;color:var(--text);text-align:left;z-index:30;pointer-events:none;animation:ercb 7s forwards;word-break:break-word}
.er-deck .cb{margin-bottom:.4cqw}
.cb b{display:block;font-weight:700;font-size:.92em}
@keyframes ercb{0%{opacity:0}6%,88%{opacity:1}100%{opacity:0}}
.r-superuser{color:color-mix(in srgb,var(--accent) 55%,var(--text))!important}.r-admin,.r-staff{color:color-mix(in srgb,var(--gold) 72%,var(--text))!important}.r-partner{color:color-mix(in srgb,var(--accent) 48%,var(--text))!important}.r-artist{color:color-mix(in srgb,var(--accent) 62%,var(--gold))!important}.r-mod{color:color-mix(in srgb,var(--gold) 45%,var(--text))!important}.r-user{color:var(--s-tx)}
.er-closed{position:absolute;inset:0;color-mix(in srgb,var(--bg) 90%,transparent);display:none;flex-direction:column;gap:10px;align-items:center;justify-content:center;z-index:40;text-align:center;padding:16px;color:var(--text)}
.er-dock{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"back";gap:4px 10px;align-items:center;padding:6px 10px;background:var(--s-glass2);border-top:1px solid var(--s-bd);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.er-back{grid-area:back;display:flex;flex-direction:column;gap:2px;min-width:0}
.er-back .lab{font:600 10px Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--s-mu)}
.er-bslots{display:flex;gap:6px;align-items:flex-end;min-width:0;overflow:hidden}
.er-bs{position:relative;flex:0 0 66px;width:66px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;background:none;border:0;padding:0;color:var(--s-tx)}
.er-bs .av{height:42px;width:auto;display:block}
.er-bs .nm{font:500 10px/1.2 Oswald,sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;color:var(--s-tx)}
.er-bs .no{position:absolute;left:3px;top:2px;background:var(--s-gold);color:var(--s-on);font:700 10px/1 Oswald;border-radius:999px;padding:2px 5px}
.er-bs.me .nm{color:var(--s-gold);font-weight:700}
.er-bs.enter{animation:erenter .8s ease-out both}
@keyframes erenter{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
.er-bs.empty .play{background:var(--s-gold);color:var(--s-on);border-radius:7px;font:700 10px/1.1 Oswald,sans-serif;letter-spacing:.03em;padding:5px 3px;min-height:30px;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;margin-bottom:2px}
.er-bs.empty[disabled] .play{background:transparent;color:var(--s-mu);border:1px dashed var(--s-bd)}
.er-bs[disabled]{cursor:default}
.er-more{align-self:center;color:var(--s-mu);font:600 12px Oswald;padding:0 4px;white-space:nowrap}
.er-votes{grid-area:votes;display:flex;align-items:center;gap:12px;justify-content:center}
.er-rb{position:relative;width:56px;height:56px;border-radius:50%;border:3px solid;font:700 10px/1 Oswald,sans-serif;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--s-tx);text-shadow:0 1px 2px var(--bg);box-shadow:0 3px 8px color-mix(in srgb,var(--bg) 55%,transparent),inset 0 2px 4px color-mix(in srgb,var(--text) 35%,transparent);padding:0;flex:none}
.er-rb.dn{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 55%,var(--text)),color-mix(in srgb,var(--accent) 72%,var(--bg)) 70%);border-color:color-mix(in srgb,var(--accent) 32%,var(--text))}
.er-rb.up{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gold) 55%,var(--text)),color-mix(in srgb,var(--gold) 68%,var(--bg)) 70%);border-color:color-mix(in srgb,var(--gold) 32%,var(--text))}
.er-rb.on{outline:3px solid var(--text);outline-offset:2px}
.er-rb:hover:not([disabled]){filter:brightness(1.15)}.er-rb[disabled]{filter:grayscale(.85) brightness(.65);cursor:not-allowed}
.er-rb .n{position:absolute;right:-6px;top:-6px;background:var(--bg);color:var(--s-tx);border:1px solid var(--text);border-radius:999px;font:700 10px/1 Oswald;padding:2px 5px;min-width:18px;text-align:center}
.er-rb .n:empty{display:none}
.er-gz{min-width:170px;text-align:center}
.er-gz .lb{font:600 10px Oswald,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--s-mu)}
.er-gz .bar{position:relative;height:12px;border-radius:6px;margin:3px 0;background:linear-gradient(90deg,var(--accent),var(--muted) 50%,var(--gold));border:1px solid color-mix(in srgb,var(--text) 25%,transparent)}
.er-gz .bar i{position:absolute;top:-4px;left:50%;width:5px;height:18px;margin-left:-2px;background:var(--text);border-radius:2px;box-shadow:0 0 4px var(--bg);transition:left .6s}
.er-gz .ends{display:flex;justify-content:space-between;font:700 11px Oswald,sans-serif}.er-gz .sk{color:color-mix(in srgb,var(--accent) 55%,var(--text))}.er-gz .ro{color:color-mix(in srgb,var(--gold) 55%,var(--text))}
.er-hint{grid-area:hint;font:400 12px/1.35 Oswald,sans-serif;color:var(--s-mu);text-align:right;min-width:0}
@container erm (max-width:1040px){
  .er-dock{grid-template-columns:minmax(0,1fr);grid-template-areas:"back";gap:4px}
  .er-hint{display:none}
}
@container erm (max-width:620px){
  .er-dock{grid-template-columns:minmax(0,1fr);gap:4px}
}
.er-meta{display:flex;flex-wrap:wrap;gap:6px;padding:6px 10px;background:var(--s-glass2);border-top:1px solid var(--s-bd);align-items:center;color:var(--s-mu)}
.er-side{width:360px;flex:0 0 360px;border-left:1px solid var(--s-bd);display:flex;flex-direction:column;background:var(--s-glass2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);min-height:0}
.er-banner{border:1px solid var(--s-gold);background:color-mix(in srgb,var(--s-gold) 14%,transparent);color:var(--s-tx);border-radius:10px;padding:8px 10px;font-size:13px}
.er-banner b{color:var(--s-gold)}
/* short landscape phones / small windows */
@media (max-height:520px) and (min-width:821px){
  .er-dock,.er-dock{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"back"!important;gap:6px!important}
  .er-bs{flex-basis:44px!important;width:44px!important;min-height:40px!important}.er-bs .av{height:26px!important}.er-bs .nm{font-size:9px}
  .er-bs.empty .play{font-size:9px;min-height:24px}
  .er-rb{width:40px!important;height:40px!important;font-size:8px!important}.er-gz{min-width:96px!important}.er-gz .ends{font-size:9px}
  .er-bar .es-btn{min-height:28px}
  .er-side{width:270px;flex-basis:270px}
  .er-bar{min-height:38px;padding:3px 8px}.er-bar .t{font-size:15px}
  .er-dock{padding:3px 8px;gap:6px}.er-back .lab{display:none}.er-bs{flex-basis:50px;width:50px;min-height:44px}.er-bs .av{height:30px}
  .er-rb{width:46px;height:46px;font-size:9px}.er-gz{min-width:120px}.er-gz .lb{display:none}
  .er-meta{display:none}.er-hint{display:none}.er-hnow{display:none}
}
/* phones and narrow windows: stacked layout */
@media (max-width:820px){
  .es-row{grid-template-columns:48px 1fr auto;gap:6px;padding:6px}.es-row .th{width:48px;height:36px}
  #esRoom{flex-direction:column;overflow:auto;overflow-x:hidden}
  .er-main{flex:0 0 auto;overflow:visible;container-type:inline-size}
  .er-bar{padding:4px 8px;gap:6px}.er-bar .t{font-size:15px;max-width:38cqw}
  .er-hnow{order:9;flex:1 0 100%}.er-hnow .tt{flex:1}
  .er-stagebox{container-type:normal;display:block;padding:0;flex:none}
  .er-scene{width:100%;aspect-ratio:1/1.1;border-radius:0;background-size:cover}
  .er-screen.main{display:none}
  .er-screen.side{top:2%;width:47%}.er-screen.l{left:2%}.er-screen.r{right:2%}
  .er-booth{top:calc(var(--cdj,81.4%) - var(--djhm,16.5%));width:100%;height:calc(var(--djhm,16.5%) + var(--djhidem,4.4%))}
  .er-led{top:30%;width:92%;height:7.4%;padding:0 2.4cqw 1.6cqw}
  .er-desk{bottom:1.5cqw;max-width:92%}
  .er-led .dots{height:5px;bottom:0}
  .er-desk .nm{font-size:11px;max-width:40cqw}.er-desk .pt{font-size:11px}
  .er-screen .chip{font-size:8px}.er-screen .ph{font-size:12px}
  .cb{max-width:46cqw;font-size:11px;margin-bottom:1.5cqw}.er-fl .you{font-size:9px;padding:2px 6px}
  .er-dock{padding:6px 8px;position:relative;z-index:20;background:color-mix(in srgb,var(--s-chrome) 92%,transparent)}  /* CHANGES 203: no longer sticky - a sticky dock covered the DJ booth; order is scene, backstage, then vote controls */
  .er-bs{flex-basis:56px;width:56px;min-height:60px}.er-bs .av{height:38px}
  .er-rb{width:52px;height:52px}.er-votes{gap:8px}.er-gz{min-width:0;flex:1;max-width:190px}
  .er-side{width:100%;flex:1 1 auto;border-left:0;border-top:1px solid var(--s-bd);min-height:60vh}
  .er-pane{max-height:70vh}
  #escStage .es-btn,#escStage .es-chip,#escStage .er-tabs button{min-height:44px}
  #escStage .es-btn{min-width:44px}
  #escStage .es-chip{padding:0 14px}
  #escStage input[type=text],#escStage input:not([type]),#escStage select,#escStage textarea,.es-in{min-height:44px;font-size:16px}
  #escStage input[type=checkbox]{width:22px;height:22px}
  .es-chk{min-height:44px;align-items:center}
  .er-msg .fl,.cm .rep{min-width:44px;min-height:44px}
  .es-person{min-height:44px}
}
@media (max-width:820px) and (max-height:480px){
  .er-scene{aspect-ratio:16/9}.er-dock{position:static}
}
@media (prefers-reduced-motion:reduce){.er-deck.cur .av img,.er-bs.enter,.er-deck.stepup .av{animation:none}}

.er-closed{position:absolute;inset:0;color-mix(in srgb,var(--bg) 90%,transparent);display:none;flex-direction:column;gap:10px;align-items:center;justify-content:center;z-index:9;text-align:center;padding:16px}
.er-tabs{display:flex;border-bottom:1px solid var(--s-bd)}
.er-tabs button{flex:1;background:transparent;border:0;border-bottom:3px solid transparent;color:var(--s-mu);padding:9px 4px;font:600 14px Oswald,sans-serif;cursor:pointer;letter-spacing:.05em;text-transform:uppercase}
.er-tabs button[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.er-pane{flex:1;overflow:auto;padding:10px;min-height:0;display:none}
.er-pane.on{display:flex;flex-direction:column;gap:8px}
.er-pane h4{margin:10px 0 4px;color:var(--gold);font:600 13px Oswald;letter-spacing:.08em;text-transform:uppercase}
.er-pane h4:first-child{margin-top:0}
.er-card{background:var(--s-card);border:1px solid var(--s-bd);border-radius:10px;padding:8px 10px}
.er-trk{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--s-bd)}
.er-trk img{width:52px;height:38px;object-fit:cover;border-radius:4px;background:var(--bg)}
.er-trk .tt{font-size:13px;color:var(--s-tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.er-trk .ss{font-size:11px;color:var(--s-mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.er-trk .ac{display:flex;gap:3px}
.es-lv{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin-right:4px;line-height:1}
.es-lv b{font:700 10px Oswald;color:var(--s-on);background:var(--gold);border-radius:3px;padding:0 4px}
.es-lv i{display:block;height:2px;width:100%;background:var(--s-bd);margin-top:1px}.es-lv i u{display:block;height:100%;background:color-mix(in srgb,var(--gold) 55%,var(--text))}
.es-bd{font:600 9px Oswald;letter-spacing:.06em;text-transform:uppercase;padding:0 5px;border-radius:3px;margin-left:3px;background:color-mix(in srgb,var(--s-gold) 18%,var(--s-card));color:color-mix(in srgb,var(--s-gold) 62%,var(--text));vertical-align:middle}
.es-bd.Artist{background:color-mix(in srgb,var(--accent) 30%,var(--bg));color:color-mix(in srgb,var(--accent) 52%,var(--text))}.es-bd.Partner{background:color-mix(in srgb,var(--accent) 20%,var(--bg));color:color-mix(in srgb,var(--accent) 34%,var(--text))}.es-bd.Staff{background:color-mix(in srgb,var(--gold-dim) 42%,var(--bg));color:color-mix(in srgb,var(--gold) 46%,var(--text))}.es-bd.SuperUser,.es-bd[data-b="Super User"]{background:color-mix(in srgb,var(--accent) 38%,var(--bg));color:color-mix(in srgb,var(--accent) 58%,var(--text))}.es-bd[data-b="Early Beta"]{background:color-mix(in srgb,var(--gold) 28%,var(--bg));color:color-mix(in srgb,var(--gold) 52%,var(--text))}
.er-chatlog{flex:1;overflow:auto;display:flex;flex-direction:column;gap:3px;min-height:120px}
.er-msg{font-size:13px;line-height:1.35;word-break:break-word;padding:2px 0}
.er-msg .who{font-weight:600;color:var(--s-gold);cursor:pointer}
.er-msg.me .who{color:color-mix(in srgb,var(--gold) 55%,var(--text))}.er-msg.sys{color:var(--s-mu);font-style:italic;font-size:12px}.er-msg.act{font-style:italic;color:var(--s-tx)}
.er-msg .fl{opacity:0;cursor:pointer;margin-left:4px;font-size:11px;color:var(--s-mu);border:0;background:transparent}.er-msg:hover .fl,.er-msg:focus-within .fl{opacity:1}
@media (hover:none){.er-msg .fl{opacity:.6}}
.er-chatin{display:flex;gap:6px;flex-wrap:wrap}
.er-chatin input[type=text]{flex:1;min-width:0;background:var(--s-in);color:var(--s-tx);border:1px solid var(--s-bd);border-radius:8px;padding:8px}
.er-emo{display:flex;gap:4px;flex-wrap:wrap}
.er-emo button{background:var(--s-card);border:1px solid var(--s-bd);border-radius:6px;font-size:16px;cursor:pointer;padding:1px 6px}
.er-signin{text-align:center;padding:18px 10px}
.er-sign-box{background:linear-gradient(180deg,var(--s-card),var(--s-card));border:1px solid color-mix(in srgb,var(--s-gold) 45%,var(--s-bd));border-radius:12px;padding:14px;text-align:center}
.es-in{width:100%;background:var(--s-in);color:var(--s-tx);border:1px solid var(--s-bd);border-radius:8px;padding:8px;font:inherit;margin:3px 0 8px}
.es-lab{display:block;color:var(--s-mu);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.es-chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:6px 0}
/* modal */
#esModal{position:fixed;inset:0;z-index:420;color-mix(in srgb,var(--bg) 72%,transparent);display:none;align-items:center;justify-content:center;padding:12px}
#esModal.on{display:flex}
#esModal .box{background:var(--s-chrome);border:1px solid var(--gold);border-radius:14px;padding:16px;width:min(560px,100%);max-height:92vh;overflow:auto;color:var(--s-tx);position:relative}
#esModal.wide .box{width:min(820px,100%)}
#esModal h3{margin:0 0 8px;color:var(--gold);font:600 19px Oswald;letter-spacing:.05em}
#esModal .x{position:absolute;right:10px;top:8px;background:transparent;border:0;color:var(--s-tx);font-size:22px;cursor:pointer}
.es-av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
.es-av-grid button{background:var(--s-card);border:2px solid var(--s-bd);border-radius:8px;padding:2px;cursor:pointer;height:74px}
.es-av-grid button[aria-pressed="true"]{border-color:var(--gold)}.es-av-grid button[disabled]{opacity:.35}
.es-av-grid img{height:100%;max-width:100%;object-fit:contain}
.es-bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.es-bg-grid button{height:54px;border:2px solid var(--s-bd);border-radius:6px;background:var(--bg) center/cover;cursor:pointer;color:var(--s-tx);font:600 10px Oswald;text-shadow:0 1px 2px var(--bg);padding:0;display:flex;align-items:flex-end;justify-content:center}
.es-bg-grid button[aria-pressed="true"]{border-color:var(--gold)}
#esToast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:440;background:var(--s-card);border:1px solid var(--gold);color:var(--s-tx);border-radius:10px;padding:8px 14px;display:none;max-width:90vw;font:500 14px Oswald}
.es-bell{position:relative}.es-bell b{position:absolute;right:-4px;top:-6px;background:var(--accent);color:var(--s-tx);border-radius:999px;font:700 10px Oswald;padding:0 5px}
.es-prev iframe{width:100%;height:152px;border:0;border-radius:8px;margin-top:6px}
/* v2 additions matching the JS class names */
.es-h{margin:12px 0 5px;color:var(--gold);font:600 13px Oswald;letter-spacing:.08em;text-transform:uppercase}
.es-list{display:flex;flex-direction:column}
.es-trk{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--s-bd)}
.es-trk>img,.es-trk>.ph{width:52px;height:38px;object-fit:cover;border-radius:4px;background:var(--bg)}
.es-trk .ti{font-size:13px;color:var(--s-tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es-trk .by{font-size:11px;color:var(--s-mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es-trk .i{min-width:0}
.acts{display:flex;gap:3px;align-items:center}
.es-person{display:flex;gap:8px;align-items:center;padding:5px 6px;border-radius:8px;cursor:pointer}
.es-person:hover{background:color-mix(in srgb,var(--s-gold) 10%,transparent)}.es-person.cur{background:color-mix(in srgb,var(--s-gold) 16%,transparent);border-left:3px solid var(--gold)}
.es-person>img{width:30px;height:38px;object-fit:contain;flex:0 0 auto}
.es-person .i{flex:1;min-width:0;font-size:13px}
.es-modrow{display:flex;flex-wrap:wrap;gap:5px;align-items:center;border:1px dashed color-mix(in srgb,var(--s-gold) 45%,var(--s-bd));border-radius:8px;padding:6px;margin:6px 0}
.es-prof-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.es-prof-head>img{height:110px;width:auto;object-fit:contain}
.es-signin-chat{margin:auto;text-align:center;padding:18px 10px;background:linear-gradient(180deg,var(--s-card),var(--s-card));border:1px solid color-mix(in srgb,var(--s-gold) 45%,var(--s-bd));border-radius:12px}
.es-signin-chat .big{font:600 22px Oswald;color:var(--gold);margin-bottom:4px}
.es-avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
.es-av{background:var(--s-card);border:2px solid var(--s-bd);border-radius:8px;padding:2px;cursor:pointer;height:74px}
.es-av.on{border-color:var(--gold)}.es-av img{height:100%;max-width:100%;object-fit:contain}
.es-bggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;margin:4px 0 10px}
.es-bgopt{height:54px;border:2px solid var(--s-bd);border-radius:6px;background:var(--bg) center/cover;cursor:pointer;color:var(--s-tx);font:600 10px Oswald;text-shadow:0 1px 2px var(--bg);padding:0;display:flex;align-items:flex-end;justify-content:center}
.es-bgopt.on{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 40%,transparent)}
.er-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:3px;min-height:120px}
.cm{font-size:13px;line-height:1.35;word-break:break-word;padding:2px 0}
.cm .nm{font-weight:600;color:var(--s-gold);cursor:pointer}.cm.me{font-style:italic;color:var(--s-tx)}.cm.sys{color:var(--s-mu);font-style:italic;font-size:12px}
.cm .rep{opacity:.25;cursor:pointer;margin-left:4px;font-size:11px;color:var(--s-mu);border:0;background:transparent}.cm:hover .rep{opacity:1}
@media (hover:none){.cm .rep{opacity:.6}}
.er-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.er-form .es-in{flex:1;min-width:0;margin:0}
.er-emotes{display:flex;gap:4px}
.er-pane.on#erPaneChat{padding-bottom:8px}
#erPaneChat.on{display:flex}
.er-main #erMP{background:var(--bg)}
.es-tag.lock{white-space:nowrap}
@media (max-width:820px){.er-pane{max-height:70vh}.er-bar .es-btn{padding:3px 7px}.es-modal .box{max-height:96vh}}

.cm .nm.r-user,.er-msg .who.r-user{color:var(--s-tx)}
.cm .nm.r-superuser{color:color-mix(in srgb,var(--accent) 55%,var(--text))}.cm .nm.r-admin,.cm .nm.r-staff{color:color-mix(in srgb,var(--gold) 72%,var(--text))}.cm .nm.r-partner{color:color-mix(in srgb,var(--accent) 48%,var(--text))}.cm .nm.r-artist{color:color-mix(in srgb,var(--accent) 62%,var(--gold))}
#escStage ::placeholder{color:var(--s-mu);opacity:.85}
/* Noir's red accent is 4.3:1 on its panels; lift it just inside the Stage so small text passes 4.5:1 */
html[data-theme="noir"] #escStage,html[data-theme="noir"] #esModal,html[data-theme="noir"] #esToast{--gold:color-mix(in srgb,var(--gold) 78%,var(--text))}

.er-vol{display:inline-flex;align-items:center;gap:6px;flex:none}
.er-vol input[type=range]{width:96px;accent-color:var(--s-gold);height:24px;margin:0}
.er-vol .es-btn{min-width:34px}
@media (max-width:820px){.er-vol input[type=range]{width:90px;min-height:44px}.er-vol .es-btn{min-height:44px;min-width:44px}}

.er-screen .ph.promo{background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent) 32%,var(--bg)),var(--bg) 70%);gap:.5cqw}
.er-screen .ph.promo img{max-width:46%;max-height:44%}
.er-screen .ph.promo .pt1{font:700 clamp(8px,1.5cqw,16px) Oswald;letter-spacing:.12em;color:var(--text)}
.er-screen .ph.promo small{font-size:clamp(7px,1.05cqw,11px);letter-spacing:.04em}
.er-screen .ph.promo .modhint{opacity:.55}

.er-step{z-index:6;white-space:nowrap;background:color-mix(in srgb,var(--s-card) 80%,transparent);flex:none}
@media (max-width:820px){.er-step{min-height:44px;font-size:12px}}
/* CHANGES 208: Add songs / playlists panel */
.es-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.es-tabs .es-chip.on{background:var(--s-gold);color:var(--s-on);border-color:var(--s-gold)}
.es-plbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}.es-plbar select{max-width:100%}
.es-prevhead{display:flex;gap:8px;align-items:center;background:var(--s-card);border:1px solid var(--s-bd);border-radius:8px;padding:6px}.es-prevhead img{width:64px;height:36px;object-fit:cover;border-radius:4px;flex:none}.es-prevhead .i{flex:1;min-width:0}.es-prevhead .ti{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#esPrev:empty{display:none}
.es-plbox .es-trk .acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
/* Release C: grouped avatar lists, DM lock note */
.es-avgroups details{margin:6px 0;border:1px solid var(--s-bd);border-radius:8px;padding:4px 6px;background:color-mix(in srgb,var(--text) 2%,transparent)}
.es-avgroups summary{cursor:pointer;font-weight:700;font-size:.85rem;padding:4px 2px;color:var(--gold)}
.es-avgroups .es-avgrid{margin:6px 0 4px;max-height:46vh;overflow:auto}
.es-dmlock{margin-top:8px}
.er-desk .er-play{padding:.1cqw .9cqw;font-size:clamp(9px,1.25cqw,13px);line-height:1.4}
.er-unmute{background:transparent;border:0;color:var(--s-gold);font-size:14px;line-height:1;padding:2px 4px;cursor:pointer;opacity:.85;animation:erunm 1.6s ease-in-out infinite}
@keyframes erunm{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.er-unmute{animation:none}}

/* CHANGES 215: rotating site promo */
.er-screen .pvp{position:absolute;inset:0}
.er-screen a.adl .ph{position:absolute;inset:0}.er-screen a.adl .ph img{width:auto;height:auto}
.er-screen .ph.promo.hasart img{max-width:62%;max-height:56%;object-fit:contain;border-radius:3px}
.er-screen .ph.promo.pitem{animation:erPromoIn .6s ease}
@keyframes erPromoIn{from{opacity:0}to{opacity:1}}

/* CHANGES 222: settings pages, request line, site banner, low motion */
.es-bggrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.es-bgopt{position:relative;height:62px;align-items:flex-start;justify-content:flex-start}
.es-bgopt .dk{position:absolute;left:3px;top:3px;padding:1px 5px;border-radius:4px;color-mix(in srgb,var(--bg) 78%,transparent);font:700 10px Oswald,sans-serif;letter-spacing:.06em;color:var(--text);border:1px solid color-mix(in srgb,var(--text) 35%,transparent)}
.es-bgopt.d2 .dk{background:color-mix(in srgb,var(--accent) 38%,var(--bg));border-color:color-mix(in srgb,var(--accent) 58%,var(--text))}
.es-bgopt.d4 .dk{background:color-mix(in srgb,var(--gold) 32%,var(--bg));border-color:color-mix(in srgb,var(--gold) 62%,var(--text))}
.es-bgopt.on{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 55%,transparent)}
.es-bgopt.on::after{content:"\2713";position:absolute;right:4px;bottom:2px;color:var(--gold);font:700 16px sans-serif;text-shadow:0 1px 3px var(--bg)}
.es-settings .es-sec{scroll-margin-top:6px;border-top:1px solid var(--s-bd);padding-top:10px}
.es-super .es-grp{margin:20px 0 4px;padding:7px 10px;border:1px solid var(--s-bd);border-left:3px solid var(--gold);border-radius:8px;background:var(--s-card);color:var(--gold);font:600 12px Oswald,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.es-super .es-danger{border:1px solid color-mix(in srgb,var(--accent) 55%,var(--s-bd));border-radius:8px;padding:8px 10px;margin:6px 0;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.es-super .es-danger .es-small{color:color-mix(in srgb,var(--accent) 72%,var(--text))}
.es-jump{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px;position:sticky;top:-16px;z-index:5;background:var(--s-chrome);padding:6px 0}
.es-hint{margin:-2px 0 6px 26px}
.es-savebar{position:sticky;bottom:-16px;z-index:5;background:var(--s-chrome);padding:8px 0;border-top:1px solid var(--s-bd);margin-top:10px}
.es-limrow{border:1px solid var(--s-bd);border-radius:8px;padding:8px;margin:6px 0}
.es-invrow.dead{opacity:.55}
.es-loglist{max-height:260px;overflow:auto;border:1px solid var(--s-bd);border-radius:8px;padding:6px;margin:6px 0}
.es-logrow{padding:4px 0;border-bottom:1px solid var(--s-bd);font-size:12px}.es-logrow .at{color:var(--s-mu)}
.es-stats{width:100%;border-collapse:collapse;font-size:13px}.es-stats td{padding:3px 6px;border-bottom:1px solid var(--s-bd)}.es-stats td+td{text-align:right;font-weight:600}
.er-reqform{display:flex;gap:6px;margin:6px 0}.er-reqform .es-in{flex:1;min-width:0}
.er-tap2{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;color-mix(in srgb,var(--bg) 72%,transparent);z-index:3;text-align:center;padding:6px}
#esSiteBanner{position:fixed;left:0;right:0;top:0;z-index:100000;display:flex;gap:10px;align-items:center;justify-content:center;padding:4px 40px 4px 12px;min-height:26px;font:600 13px Oswald,sans-serif;letter-spacing:.02em;text-align:center;color:var(--text);background:var(--chrome);border-bottom:2px solid var(--gold)}
#esSiteBanner.lv-warn{background:color-mix(in srgb,var(--gold) 42%,var(--bg));border-color:var(--gold)}
#esSiteBanner.lv-alert{background:color-mix(in srgb,var(--accent) 42%,var(--bg));border-color:color-mix(in srgb,var(--accent) 55%,var(--text))}
#esSiteBanner button{position:absolute;right:6px;top:0;bottom:0;background:none;border:0;color:var(--text);font-size:20px;cursor:pointer;padding:0 8px}
html.es-lowmo #escStage *,html.es-lowmo #escStage *::before,html.es-lowmo #escStage *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* CHANGES 225: Corey - the DJ stands IN FRONT of the CDJs and mixer (rear view, over the mixer); the foreground deck layer is switched off */
.er-front{display:none!important}

/* CHANGES 227: crowd reactions bar + floating emoji */
.er-react{display:flex;gap:8px;justify-content:center;padding:4px 0}
.er-rx{width:44px;height:44px;border-radius:22px;border:1px solid var(--s-bd);background:var(--s-card);font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s}
.er-rx:hover{border-color:var(--s-gold)}.er-rx.hot{transform:scale(1.18)}
.rx{position:absolute;left:50%;bottom:100%;margin-left:var(--dx,0);transform:translateX(-50%);font-size:clamp(16px,3cqw,26px);animation:errx 1.8s ease-out forwards;pointer-events:none;z-index:26;will-change:transform,opacity}
@keyframes errx{0%{opacity:0;transform:translate(-50%,8px) scale(.6)}12%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-64px) scale(1)}}
.rx.still{animation:none!important;opacity:1;transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){.rx{animation:none!important;opacity:1}}
@media (max-width:820px){.er-react{position:sticky;bottom:0;z-index:30;background:color-mix(in srgb,var(--s-chrome) 94%,transparent);padding:4px 0 calc(4px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--s-bd);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}}

/* How it works tour (CHANGES 228) */
.es-tour{text-align:center;padding:4px 2px 2px}
.es-tour .es-tic{font-size:46px;line-height:1.1;margin:4px 0 6px}
.es-tour .es-th{font-size:19px;font-weight:700;margin-bottom:8px}
.es-tour .es-tp{margin:0 auto 14px;max-width:34em;font-size:15px;line-height:1.5;opacity:.92}
.es-tdots{display:flex;gap:7px;justify-content:center;margin:0 0 14px}
.es-tdots span{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--text) 25%,transparent)}
.es-tdots span.on{background:color-mix(in srgb,var(--gold) 72%,var(--text));transform:scale(1.25)}
.es-trow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.es-trow .es-btn{min-height:44px;min-width:84px}

/* Custom backgrounds (CHANGES 229) */
.es-bgprev{width:100%;max-width:640px;aspect-ratio:16/9;border-radius:8px;border:1px solid color-mix(in srgb,var(--text) 20%,transparent);touch-action:none;display:block;margin:8px 0;background:var(--bg)}
.es-cbup{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.es-cbup input[type=range]{width:100%;min-height:32px}
.es-bgthumb{width:64px;height:36px;border-radius:4px;background-size:cover;background-position:center;flex:none}

/* Full screen (CHANGES 232) */
#escFsBtn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:28px;margin:0 2px;padding:0;border:1px solid var(--gold);border-radius:8px;background:transparent;color:var(--gold);font:600 17px/1 system-ui,sans-serif;cursor:pointer;pointer-events:auto}
#escFsBtn[aria-pressed="true"]{background:var(--gold);color:var(--bg)}
/* Corey 2026-10-22: the header (header.top, incl. the radio player docked in it) STAYS in full screen.
   Only the secondary chrome strips still hide. The floating "Exit full screen" pill (#escFsExit)
   is RETIRED — where it docked under the header it covered the open left panel's tab row. The
   header's own full-screen toggle (#escFsBtn, in header.top) is the exit now: fsApply() flips
   its title/aria-label to "Exit full screen" while full screen is on. Esc key unchanged. */
body.esc-fs .stats-strip,body.esc-fs .celestial-bar,body.esc-fs footer.hint{display:none!important}

/* CHANGES 235: artist card inside the Stage profile popup; scrollable bio; Super User bar */
.es-supbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 8px;padding:8px;border:1px dashed var(--gold);border-radius:10px;background:color-mix(in srgb,var(--gold) 8%,transparent)}
.es-acard{margin:6px 0}
.es-acard-hero{display:block;width:100%;max-height:150px;object-fit:cover;border-radius:10px;margin-bottom:6px}
.es-wx{margin:4px 0;color:var(--s-tx)}
.es-bio{max-height:min(38vh,260px);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0;padding:8px 10px;border:1px solid var(--s-bd);border-radius:10px;background:color-mix(in srgb,var(--bg) 25%,transparent);font-size:14px;line-height:1.45;text-align:left;-webkit-overflow-scrolling:touch}
.es-acard-links{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.es-rels{display:flex;flex-direction:column;gap:8px;max-height:min(34vh,260px);overflow:auto;padding-right:2px}
.es-rel{display:flex;gap:10px;align-items:flex-start}
.es-rel>img,.es-rel>.ph{width:56px;height:56px;flex:none;border-radius:8px;object-fit:cover;background:var(--s-card)}
.es-rel .tt{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.es-rel-links{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.es-rel-links a{text-decoration:none}
@media (max-width:820px){.es-bio{max-height:34vh}.es-rels{max-height:30vh}}

/* CHANGES 239: phone header. The right group (Staff sign in, Artists, theme, language, tools, Super User view-as) used to be squeezed and clipped under the view toggle and the new Full screen button. Now it is a swipeable strip of normal-size controls, Artists and the tools first. */
@media (max-width:700px){
  header.top .top-right{overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:8px}
  header.top .top-right::-webkit-scrollbar{display:none}
  header.top .top-right>*{flex:0 0 auto!important}
  header.top .top-right>#toggleList{order:0}
  header.top .top-right>.tool-btns,header.top .top-right>#toolBtns{order:1}
  header.top .top-right>#themeSelect{order:2}
  header.top .top-right>#langSelect{order:3}
  header.top .top-right>#escSignInLink{order:4}
  header.top .top-right>#escViewPrevWrap{order:5}
  header.top .top-right select{min-width:52px}
}

/* CHANGES 241: bigger tap targets on phones. Header view toggle and Full screen buttons 34 px high (header is 48), the phone player buttons 34 px, the sound-waiting button in a room a real 40x36, links in the Stage notes get 9 px of vertical padding. */
@media (max-width:700px) and (pointer:coarse){
  header.top #escModeToggle{height:36px!important}
  header.top #escModeToggle button{height:34px!important;min-height:34px!important;max-height:34px!important;line-height:32px!important}
  header.top #escFsBtn{height:34px!important;min-height:34px!important;max-height:34px!important}
  #nowPlaying .tool-btn,#nowPlaying button:not(#volMute){min-height:34px!important;height:34px!important}
  #erUnmute{min-width:40px;min-height:36px;font-size:18px}
  .es-note a,.es-foot a{display:inline-block;padding:9px 0;margin:-9px 0}
}

/* CHANGES 255: track strip below the stage scene in the narrow (phone / Discord Activity) layout - it no longer covers the TRACK ART / PROMO screens */
.er-led.below{flex:none;position:relative;left:auto;top:auto;transform:none;width:auto;height:5px;min-height:0;margin:6px 8px 0;padding:0;gap:0;border:0;border-radius:0;background:transparent;z-index:auto;box-shadow:none}
.er-led.below .dots{left:0;right:0;bottom:0;height:5px;background:repeating-linear-gradient(90deg,var(--gold-dim) 0 3px,transparent 3px 6px)}
.er-led.below .dots i{background:repeating-linear-gradient(90deg,var(--led) 0 3px,transparent 3px 6px)}

/* CHANGES 256: pinned release party */
.es-row.pin{border-color:var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent),0 0 18px color-mix(in srgb,var(--gold) 18%,transparent)}

/* CHANGES 257: who's here strip, crowd energy meter, Request-a-track button, mini player */
.er-who{display:flex;flex-direction:column;gap:6px;padding:6px 10px;border-top:1px solid var(--s-bd)}
.er-who .wr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.er-who .ws{display:flex;align-items:center;gap:4px;flex:1 1 200px;min-width:0;overflow:hidden}
.er-who .wc{font:600 12px/1 Oswald,system-ui,sans-serif;color:var(--s-mu);white-space:nowrap;margin-right:4px}
.er-who .wa{flex:0 0 auto;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid var(--s-bd);background:var(--s-glass2);overflow:hidden;cursor:pointer}
.er-who .wa img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.er-who .wm{font:600 12px/1 Oswald,system-ui,sans-serif;color:var(--s-mu);margin-left:2px}
.er-who .en{display:flex;align-items:center;gap:8px}
.er-who .en .el{font:600 11px/1 Oswald,system-ui,sans-serif;color:var(--s-mu);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.er-who .eb{display:flex;gap:2px;flex:1 1 auto;max-width:260px}
.er-who .eb i{flex:1 1 0;height:8px;border-radius:2px;background:color-mix(in srgb,var(--text) 10%,transparent);transition:background .4s,transform .4s}
.er-who .en[data-lv=lo] .eb i.on{background:var(--accent)}.er-who .en[data-lv=mid] .eb i.on{background:var(--gold)}.er-who .en[data-lv=hi] .eb i.on{background:color-mix(in srgb,var(--accent) 68%,var(--gold));transform:scaleY(1.25)}
.er-who .ev{font:600 12px/1 Oswald,system-ui,sans-serif;min-width:80px}
@media (max-width:820px){.er-who{padding:6px 8px}}
@media (prefers-reduced-motion:reduce){.er-who .eb i{transition:none}}
#escStage.mini{display:flex!important;left:-3000px!important;right:auto!important;width:960px!important;top:0!important;bottom:auto!important;height:720px!important;pointer-events:none!important}
#erMini{position:fixed;left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:900;display:none;align-items:center;gap:8px;max-width:min(420px,calc(100vw - 20px));padding:6px 8px;border-radius:14px;background:var(--chrome);color:var(--text);border:1px solid var(--gold);box-shadow:0 6px 24px color-mix(in srgb,var(--bg) 50%,transparent);font:500 13px/1.25 Oswald,system-ui,sans-serif}
#erMini img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--bg);flex:0 0 auto}
#erMini .ti{min-width:0;flex:1 1 auto}#erMini .ti b,#erMini .ti span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#erMini .ti span{font-size:11px;opacity:.7}
#erMini button{min-height:36px;min-width:36px;border-radius:999px;border:1px solid var(--border);background:var(--chrome);color:var(--text);font:600 13px system-ui,sans-serif;cursor:pointer;padding:0 10px}
#erMini #erMiniOpen{background:var(--gold);color:var(--bg);border-color:var(--gold)}

/* CHANGES 258: keep-the-page-open tip */
#erTip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 10px 6px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--gold) 12%,var(--bg));border:1px solid var(--gold);color:color-mix(in srgb,var(--gold) 70%,var(--text));font:500 13px/1.3 system-ui,sans-serif}
#erTip[style*="display: none"]{display:none!important}
#erTip .tm{flex:1 1 220px}
#erTip button{min-height:34px;padding:4px 12px;border-radius:999px;border:1px solid var(--gold-dim);background:transparent;color:color-mix(in srgb,var(--gold) 70%,var(--text));font:600 12px system-ui,sans-serif;cursor:pointer}
#erTip #erTipX{background:var(--gold);color:var(--bg);border-color:var(--gold)}
body.esc-listen #erTip{margin:6px 12px}

/* CHANGES 259: tabbed Settings page + display / accessibility switches */
.es-stabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--s-bd);margin:6px 0 10px;scrollbar-width:thin}
.es-stabs button{flex:0 0 auto;min-height:40px;padding:6px 12px;background:transparent;border:0;border-bottom:3px solid transparent;color:var(--s-mu);font:600 13px Oswald,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.es-stabs button[aria-selected="true"]{color:var(--s-gold);border-bottom-color:var(--s-gold)}
.es-stabs button:focus-visible{outline:2px solid var(--s-gold);outline-offset:-2px}
.es-spanel{min-height:280px}.es-spanel .es-h:first-child{margin-top:4px}
.es-spanel input[type=range]{flex:1 1 auto;max-width:320px}
html.es-hc #escStage,html.es-hc #esModal,html.es-hc #esToast{--s-bg:#000;--s-chrome:#000;--s-card:#111;--s-bd:#fff;--s-tx:#fff;--s-mu:#e8e8e8;--s-gold:#ffe600;--s-on:#000;--s-glass:#000;--s-glass2:#000;--s-in:#000}
html.es-hc .es-btn,html.es-hc .es-in,html.es-hc .er-rb{border-color:#fff!important}
html.es-hc :focus-visible{outline:3px solid #ffe600!important;outline-offset:2px}
html.es-big #esList,html.es-big #esModal .box,html.es-big .er-side{zoom:1.15}
html.es-nobg #esRoom{--bgimg:none!important}
html.es-nobg #esRoom::before{filter:none!important;background:var(--s-bg)!important}
html.es-nocrowd #erFl{display:none!important}
html.es-noemoji .er-fl .rx{display:none!important}
html.es-cf-s .er-log .cm{font-size:12px}html.es-cf-l .er-log .cm{font-size:17px}
.er-log .cm .tr{margin-left:6px;font-size:11px;opacity:.65;white-space:nowrap}

/* CHANGES 260: admin dashboard */
.es-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:8px 0}
.es-tiles .tile{border:1px solid color-mix(in srgb,var(--s-gold) 24%,var(--s-bd));border-radius:8px;padding:8px 10px;background:var(--s-card)}
.es-tiles .tile b{display:block;font-size:22px;color:var(--gold)}
.es-tiles .tile span{font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.04em}
.es-bars{display:flex;align-items:flex-end;gap:2px;height:56px;margin:6px 0 10px;border-bottom:1px solid color-mix(in srgb,var(--s-gold) 24%,var(--s-bd))}
.es-bars .b{flex:1;min-width:2px;background:var(--gold);opacity:.85;border-radius:2px 2px 0 0}
.es-bars.sign .b{background:var(--accent)}

/* CHANGES 262: achievements, artist of the day, history */
.es-ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin:6px 0 10px}
.es-ach .ach{border:1px solid color-mix(in srgb,var(--s-gold) 24%,var(--s-bd));border-radius:8px;padding:6px 8px;background:var(--s-card);display:flex;flex-direction:column;gap:2px;opacity:.55;font-size:12px}
.es-ach .ach.on{opacity:1;border-color:var(--gold)}
.es-ach .ic{font-size:20px}.es-ach .nm{font-weight:700}.es-ach .pg{opacity:.8}
.es-spot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-color:var(--gold)}
.es-spot img{width:72px;height:72px;object-fit:cover;border-radius:8px;flex:none}
.es-spot .tx{flex:1;min-width:140px}.es-spot .acts{display:flex;gap:6px;flex-wrap:wrap}
#esSpotChip{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;z-index:40;display:flex;gap:2px;color-mix(in srgb,var(--bg) 88%,transparent);border:1px solid var(--gold);border-radius:999px;padding:2px 4px;max-width:92vw}
#esSpotChip button{background:none;border:0;color:var(--gold);font:600 12px system-ui,sans-serif;cursor:pointer;padding:5px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#esSpotChip .x{opacity:.7}
body.esc-stage-mode #esSpotChip{display:none}

/* ===== DJ polish pass (dj-polish): self-hosted Oswald (works inside the Discord Activity CSP), accent and panels follow the site theme variables ===== */
@font-face{font-family:Oswald;font-style:normal;font-weight:400 700;font-display:swap;src:url(./assets/oswald-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;font-style:normal;font-weight:400 700;font-display:swap;src:url(./assets/oswald-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
html:not(.es-hc) #escStage,html:not(.es-hc) #esModal,html:not(.es-hc) #esToast{--es-r:10px;--es-r-sm:8px} /* the --s-* palette itself is defined once, from the theme variables, in the room-layout block above - this block used to re-pin it (and --gold) to a fixed zinc scheme, which is why the Stage never re-skinned with the themes */
#escStage .er-bar,#escStage .er-tabs,#escStage .er-side,#escStage .er-dock,#escStage .er-who,#escStage .er-react,#escStage .er-meta{background:var(--s-chrome)}
#escStage button,#escStage .es-btn,#escStage .es-chip,#escStage h1,#escStage h2,#escStage h3,#escStage h4,#escStage .es-h,#escStage .lab,#escStage .lb,#escStage label,#esModal h3,#esModal .es-btn{font-family:Oswald,system-ui,sans-serif}
#escStage .es-btn{border-radius:var(--es-r-sm);border-color:color-mix(in srgb,var(--s-gold) 35%,var(--s-bd));letter-spacing:.03em}
#escStage .es-btn.pri,#escStage .es-btn.pri:hover{background:var(--s-gold);color:var(--s-on);border-color:var(--s-gold)}
#escStage .es-note,#escStage .dc-nowcard,#escStage .es-person{border-radius:var(--es-r)!important;border-color:var(--s-bd)!important;background:var(--s-card)}
#escStage .es-pinrel{border-color:var(--s-gold)!important}
#escStage .er-tabs button[aria-selected=true]{color:var(--s-gold);border-bottom-color:var(--s-gold)}
/* top bar: overflow menu */
.er-more-wrap{position:relative;flex:0 0 auto}
.er-morebtn{min-width:34px;font-size:18px!important;line-height:1!important;padding:3px 10px!important}
.er-moremenu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:190px;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--s-card);border:1px solid var(--s-bd);border-radius:var(--es-r);box-shadow:0 10px 28px color-mix(in srgb,var(--bg) 60%,transparent)}
.er-moremenu[hidden]{display:none}
.er-moremenu .es-btn{width:100%;text-align:left;justify-content:flex-start;background:transparent;border-color:transparent;color:var(--s-tx)}
.er-moremenu .es-btn:hover,.er-moremenu .es-btn:focus-visible{background:color-mix(in srgb,var(--s-gold) 14%,transparent);color:var(--s-gold)}
.er-profdc{display:inline-flex;align-items:center;gap:6px;max-width:200px}
.er-profdc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.er-profav{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* center screen in the Discord Activity: actions bar; when there is no ESC audio only a small pill sits bottom-right over the full-size cover */
.dc-np-acts{position:absolute;left:0;right:0;top:0;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:6px;z-index:2}
.dc-np-acts.noaud{top:auto;bottom:0;left:auto;justify-content:flex-end;padding:max(4px,.6cqw)}
.dc-extpill{display:inline-flex;align-items:center;gap:4px;padding:max(3px,.35cqw) max(8px,.9cqw);border-radius:999px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);color-mix(in srgb,var(--bg) 62%,transparent);color:color-mix(in srgb,var(--gold) 32%,var(--text));font:500 max(9px,1cqw)/1.2 Oswald,system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;backdrop-filter:blur(4px);opacity:.85;transition:opacity .2s,background .2s}
.dc-extpill:hover,.dc-extpill:focus-visible{opacity:1;color-mix(in srgb,var(--bg) 82%,transparent);color:var(--s-gold)}
/* bottom: bigger now-playing strip + wider crowd energy */
.er-npstrip{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--s-bd);background:var(--s-chrome);min-width:0}
.er-npstrip img{width:56px;height:56px;border-radius:var(--es-r-sm,8px);object-fit:cover;background:var(--bg);flex:0 0 auto;border:1px solid var(--s-bd)}
.er-npstrip .tx{min-width:0;flex:1 1 auto}
.er-npstrip .lb{font:600 10px/1 Oswald,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--s-gold);margin-bottom:4px}
.er-npstrip .ti{font:600 22px/1.15 Oswald,system-ui,sans-serif;color:var(--s-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.er-npstrip .ar{font:400 14px/1.3 Oswald,system-ui,sans-serif;color:var(--s-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#escStage .er-who .eb{max-width:none;flex:1 1 auto}
#escStage .er-who .en{width:100%}
#escStage .er-who .eb i{height:10px;border-radius:3px}
#escStage .er-who .en[data-lv=lo] .eb i.on{background:color-mix(in srgb,var(--s-gold) 45%,var(--muted))}
#escStage .er-who .en[data-lv=mid] .eb i.on{background:var(--s-gold)}
#escStage .er-who .en[data-lv=hi] .eb i.on{background:color-mix(in srgb,var(--s-gold) 72%,var(--text))}
@media (max-width:820px){.er-npstrip{padding:8px}.er-npstrip img{width:44px;height:44px}.er-npstrip .ti{font-size:18px}.er-npstrip .ar{font-size:13px}.er-moremenu{right:-4px}}
/* dj-polish: queue DJ card - text column never collapses; action buttons stay compact */
#escStage .es-person{min-width:0;flex-wrap:nowrap}
#escStage .es-person .i{flex:1 1 auto;min-width:72px;overflow:hidden}
#escStage .es-person .i>b,#escStage .es-person .i>.es-small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#escStage .es-person .acts{display:flex;flex:0 1 auto;gap:4px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
#escStage .es-person .acts .es-btn{min-width:28px;min-height:28px;padding:2px 7px}
@container (max-width:300px){#escStage .es-person{flex-wrap:wrap}#escStage .es-person .acts{flex-basis:100%}}
/* dj-polish: top bar stays on one row on tablet/desktop widths */
@media (min-width:600px){
  #escStage .er-bar{flex-wrap:nowrap;overflow:visible;min-width:0}
  #escStage .er-bar>*{flex-shrink:0}
  #escStage .er-bar .t{flex:0 1 auto;min-width:40px}
  #escStage .er-bar .er-hnow{flex:1 1 0;min-width:0}
  #escStage .er-bar .er-stat{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #escStage .er-bar .er-vol{flex:0 1 auto;min-width:0}
  #escStage .er-bar .er-vol input[type=range]{width:clamp(50px,9vw,110px);min-width:0}
  #escStage .er-bar .esl-sp{flex:1 1 0;min-width:0}
  #escStage .er-bar>button:not(.er-morebtn),#escStage .er-bar .dcBrowserBtn{flex:0 1 auto;min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #escStage .er-bar #erProf{max-width:160px}
}
@media (min-width:600px) and (max-width:1100px){#escStage .er-bar .er-hnow,#escStage .er-bar .er-stat{display:none}}
#escStage .er-bar{position:relative;z-index:40}
/* Halloween stages (hwgraveyard / hwpumpkin / hwcrypt): themed accent + one cheap CSS fog layer (no JS, no canvas) */
/* Halloween stages: the accent follows the site theme like the rest of the Stage (the per-room --gold pins are gone); the fog layer below keeps the room mood. */


#erScene[data-bg^=hw] .er-vig::after{content:'';position:absolute;left:-20%;right:-20%;bottom:18%;height:30%;pointer-events:none;opacity:.35;background:radial-gradient(40% 60% at 30% 60%,color-mix(in srgb,var(--text) 35%,transparent),transparent 70%),radial-gradient(35% 50% at 70% 50%,color-mix(in srgb,var(--text) 25%,transparent),transparent 70%);animation:esHwFog 18s ease-in-out infinite alternate}
#erScene[data-bg=hwpumpkin] .er-vig::after{background:radial-gradient(40% 60% at 30% 60%,color-mix(in srgb,var(--gold) 30%,transparent),transparent 70%),radial-gradient(35% 50% at 70% 50%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 70%)}
#erScene[data-bg=hwcrypt] .er-vig::after{background:radial-gradient(40% 60% at 50% 60%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%),radial-gradient(35% 50% at 20% 50%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%)}
@keyframes esHwFog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@media (prefers-reduced-motion:reduce){#erScene[data-bg^=hw] .er-vig::after{animation:none}}
html.es-lowpower #erScene[data-bg^=hw] .er-vig::after{display:none}
/* Substructure Stage (bg subbw): black & white - white/gray accents instead of gold, monochrome stage art (the main video screen keeps its colors) */
html:not(.es-hc) #escStage:has(#erScene[data-bg=subbw]){--s-gold:var(--text);--gold:var(--text);--s-on:var(--bg)}
#erScene[data-bg=subbw]>:not(.er-screen.main){filter:grayscale(1)}
#erScene[data-bg=subbw] .er-screen.side{border-color:color-mix(in srgb,var(--text) 74%,var(--bg))}
#escStage:has(#erScene[data-bg=subbw]) .er-npstrip img,#escStage:has(#erScene[data-bg=subbw]) .er-who .wa{filter:grayscale(1)}
#erScrR .bwpromo{position:absolute;inset:0}
#erScrR .bwpromo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover!important}
html:not(.es-hc) #escStage:has(#erScene[data-bg=subbw]) .er-who .en .eb i.on{background:color-mix(in srgb,var(--text) 82%,var(--bg))}

/* CHANGES 275: Substructure room - the release tag is white/black, not ESC gold */
html:not(.es-hc) #escStage:has(#erScene[data-bg=subbw]) .es-tag.esc{background:var(--text);color:var(--bg)}

/* CHANGES 276: phones/tablets (<=820px): the sticky reaction bar covered the 'Sign up to DJ' / Take-the-deck pill at the bottom of the scene. The bar now sits in the flow directly under the stage (not sticky), so it can never overlap the pill. Desktop unchanged. */
@media (max-width:820px){#escStage .er-main>.er-stagebox~*{order:2}#escStage .er-main>.er-react{order:1;position:static}}

/* flash-fix (2026-10-20): the Artist of the Day chip is positioned by CSS only. On phone layouts it
   sits statically above the bottom dock instead of being rewritten by the layout guard every 400ms. */
@media (max-width: 900px) { #esSpotChip { bottom: 118px; } }

/* ===== Stage layout rework + DJ view (Corey, 2026-10-22) =====
   Clean and compact like the globe view: the scene fills its area, the
   chrome below it is ONE slim deck, and Queue/Room/Chat is a drawer.
   - The scene grows to the full stagebox (was a centered 16:9 island in
     a blurred frame - "the panels take up too much space, the stage
     doesn't take up enough"). Background art is cover-fit, framed low
     so the platform/decks end of the scene stays in view; the artwork
     itself is untouched.
   - The three screens (track art / player / promo) move off the stage
     image into one slim strip at the stage's bottom edge.
   - The below-stage bands (backstage+votes, now playing, who, react,
     release buttons) become one continuous deck surface: one glass, one
     top border, hairlines between rows. DOM order is unchanged.
   - DJ view: #esRoom.dj-on shows the DJ console band and reframes the
     scene to the booth side (lower frame, booth band larger). */
.er-strip{flex:0 0 auto;display:flex;gap:8px;align-items:stretch;height:92px;padding:6px 8px;background:var(--s-glass2);border-top:1px solid var(--s-bd)}
.er-strip .er-screen{position:relative;left:auto;right:auto;top:auto;transform:none;height:100%;aspect-ratio:auto;border-width:2px;border-radius:8px;box-shadow:none}
.er-strip .er-screen.side{width:150px;flex:0 0 150px}
.er-strip .er-screen.main{flex:1 1 auto;width:auto}
.er-strip .er-screen.main.off{flex:0 0 2px;width:2px}
@media (max-width:820px){.er-strip{height:76px}.er-strip .er-screen.side{width:104px;flex-basis:104px}}
.er-dock,.er-npstrip,.er-who,.er-meta{background:var(--s-glass2)}
.er-npstrip,.er-who,.er-meta{border-top:1px solid color-mix(in srgb,var(--s-bd) 40%,transparent)}
.er-react{border-top:1px solid color-mix(in srgb,var(--s-bd) 40%,transparent);background:var(--s-glass2)}
.er-djcon{display:none;align-items:center;gap:10px;padding:5px 10px;background:var(--s-glass2);border-top:1px solid color-mix(in srgb,var(--s-bd) 40%,transparent);color:var(--s-tx);font:600 12px Oswald,sans-serif;flex-wrap:wrap}
#esRoom.dj-on .er-djcon{display:flex}
.er-djcon .lb{color:var(--s-gold);letter-spacing:.12em;text-transform:uppercase;font-size:10px}
.er-djcon .ln{color:var(--s-mu)}
@media (min-width:821px){
  .er-stagebox{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0}
  .er-scene{flex:1 1 auto;width:100%;min-height:0;aspect-ratio:auto;background-size:cover;background-position:center 68%;border-radius:0;box-shadow:none}
  .er-side{position:absolute;top:0;right:0;bottom:0;width:360px;flex:none;z-index:40;transform:translateX(105%);transition:transform .22s ease;box-shadow:-12px 0 32px color-mix(in srgb,var(--bg) 55%,transparent)}
  #esRoom.side-open .er-side{transform:none}
  #esRoom.dj-on .er-scene{background-position:center 85%}
  #esRoom.dj-on .er-booth{transform:scale(1.07);transform-origin:50% 100%}
}

/* 2026-10-22 (Discord Activity visual fix): the strip's side screens are fixed 150px boxes;
   the promo card's title ("ELECTRIC SUNSHINE CULT") is wider than the box and was clipped on
   BOTH sides at Activity widths. Side screens may now shrink slightly instead of crushing the
   main screen, and promo text wraps inside its box instead of overflowing it. */
.er-strip .er-screen.side{flex:0 1 150px;min-width:106px}
.er-strip .er-screen .ph{overflow:hidden}
.er-strip .er-screen .ph.promo .pt1{white-space:normal;overflow-wrap:break-word;text-align:center;max-width:100%;letter-spacing:.05em}
.er-strip .er-screen .ph.promo small{white-space:normal;overflow-wrap:break-word;text-align:center;max-width:100%}
.er-strip .er-screen .ph.promo img{max-width:52%;max-height:42%}

/* ===== 2026-10-22 build 2245: stage screen share + promo label + short-scene marquee =====
   1) VIDEO SCREEN SHARE (Corey: "the video screen is too small" on the browser stage): the
      strip that carries the main screen was 92px tall, so the video/art screen rendered ~80px
      high - about a tenth of the stage view. On wide layouts the strip is now viewport-tall
      and the dock/meta rows below it are compacted; the scene flexes to give the space up.
      Before (900px-tall window): screen ~80px of ~828px stage view (~10%).
      After: strip clamp(176px,30vh,300px) -> screen ~258px (~31%), dock ~146px -> ~112px.
   2) PROMO LABEL: the floating chip sat ON the promo text's first line (reproduced on the
      open web too). In the strip, the chip becomes a label bar across the screen's top and
      the promo text starts below it; floating screens outside the strip get matching
      clearance under their chip.
   3) TRACK BAR SEATING (Corey: the title/duration bar "floats in a weird place" mid-room):
      the LED bar no longer sits on the scene at all - esc-stage.js seats it in the stagebox
      as the strip's top edge in EVERY layout (the narrow-layout relocation, extended). The
      Activity marquee-vs-deck collision is resolved by construction: the bar is furniture
      now, and the desk plate has the scene's bottom band to itself. */
@media (min-width:821px){
  .er-strip{height:clamp(176px,30vh,300px)}
  .er-dock{padding:4px 10px;gap:2px 10px}
  .er-bs{flex-basis:56px;width:56px;min-height:46px}
  .er-bs .av{height:34px}
  .er-rb{width:44px;height:44px}
  .er-gz .bar{height:10px}
  .er-meta{padding:4px 10px}
}
.er-strip .er-screen .chip{top:0;left:0;right:0;border-radius:7px 7px 0 0;text-align:center;padding:1px 4px;background:color-mix(in srgb,var(--bg) 78%,transparent)}
.er-strip .er-screen.ph.promo{padding-top:17px}
.er-screen.ph.promo{padding-top:1.6cqw}
.er-led.below{margin:6px 8px 0}   /* hairline only since the band-text removal - no radius, no box */
/* 4) SIDE PANELS HOLD, NEVER COVER (Corey: "chat covers the stage and panels instead of
      holding"): the Queue/Room/Chat column was absolutely positioned over the stage in the
      wide layout and slid in on top of it. It is an in-flow column again - closed it takes
      no space, open it reserves its 360px and the stage, strip and seated track bar reflow
      to the width that remains. Nothing layers over the stage.
   5) PANEL CLOSE (Corey, build 20261022-2250: "there is no way to close the chat"): the
      column now collapses by animating its flex-basis to 0 instead of a display flip, so
      closing hands the width back to the stage smoothly - no leftover gap, no jump. The
      panel header carries a close (x) button (.er-sidex, built in esc-stage.js), the
      header's Queue/Room/Chat button toggles, and re-clicking the active tab closes. */
@media (min-width:821px){
  #esRoom .er-side{position:static;transform:none;box-shadow:none;z-index:auto;display:flex;width:auto;flex:0 0 0;overflow:hidden;opacity:0;visibility:hidden;border-left-width:0;transition:flex-basis .22s ease,opacity .18s ease,border-left-width .22s ease,visibility 0s linear .22s}
  #esRoom.side-open .er-side{flex-basis:360px;opacity:1;visibility:visible;border-left-width:1px;transition:flex-basis .22s ease,opacity .18s ease,border-left-width .22s ease,visibility 0s}
}
@media (max-height:520px) and (min-width:821px){
  #esRoom.side-open .er-side{flex-basis:270px}
}
/* Panel close (x): a fixed narrow slot at the tabs row's right edge; the tabs keep flex:1.
   Hidden in the stacked narrow layout, where the panel is in-flow page content below the
   stage rather than a held column, so there is no column to hand back. */
.er-tabs .er-sidex{flex:0 0 40px;width:40px;padding:9px 0;font-size:19px;line-height:1;color:var(--s-mu);text-transform:none;letter-spacing:0}
.er-tabs .er-sidex:hover{color:var(--s-tx)}
@media (max-width:820px){.er-tabs .er-sidex{display:none}}

/* ===== 2026-10-22 below-stage consolidation (Corey: "alot of things layered
   ontop of eachother - put some of the tools below the stage together") =====
   The six stacked bands under the strip (vote row, Now Playing band,
   presence row, crowd energy row, emoji row, link row) are now TWO rows in
   one grid (.er-below, built in esc-stage.js buildRoom):
     deck bar  : Now Playing block (art/title/artist + the link chips,
                 #erMeta, inside the block) | vote cluster (LAME + meter +
                 AWESOME, hint as a caption under the meter) | presence
                 ("N here" + avatars) and the Requests button.
     crowd bar : Crowd Energy label + segmented meter + state word | the
                 four emoji reaction buttons at the right end.
   #erWho is display:contents here so its .wr (presence) and .en (energy)
   children land in the two rows. Before (wide layout, CSS-computed):
   dock ~112 (backstage + vote row) + NP band ~79 + who ~62 + react ~52 +
   meta ~36 = ~341px under the strip. After: dock ~58 (backstage only) +
   deck bar ~72 + crowd bar ~46 = ~176px. The ~165px difference returns to
   the stagebox (flex:1) - the scene grows by that much. */
.er-below{display:grid;grid-template-columns:minmax(0,1.15fr) auto minmax(0,1fr);grid-template-areas:"np votes wr" "en en react";gap:2px 14px;align-items:center;padding:6px 10px;background:var(--s-chrome);border-top:1px solid var(--s-bd)}
.er-below .er-npstrip{grid-area:np;border-top:0;background:transparent;padding:0;gap:10px;min-width:0}
.er-below .er-npstrip img{width:44px;height:44px}
.er-below .er-npstrip .lb{margin-bottom:1px;font-size:9px}
.er-below .er-npstrip .ti{font-size:17px;line-height:1.15}
.er-below .er-npstrip .ar{font-size:12px}
.er-below .er-npstrip .tm{font:600 11px/1.25 Oswald,system-ui,sans-serif;color:var(--s-mu);letter-spacing:.05em}
.er-below .er-npstrip .tm:empty{display:none}
.er-below .er-npstrip .er-meta{border-top:0;background:transparent;padding:0;gap:4px;justify-content:flex-end;flex:0 1 auto;max-width:46%}
.er-votewrap{grid-area:votes;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.er-votewrap .er-hint{grid-area:auto;text-align:center;font-size:10px;line-height:1.25;max-width:300px}
.er-below .er-who{display:contents}
.er-below .er-who .wr{grid-area:wr;justify-content:flex-end;padding:0;border:0;min-width:0}
.er-below .er-who .ws{flex:0 1 auto}
.er-below .er-who .en{grid-area:en;border-top:1px solid color-mix(in srgb,var(--s-bd) 40%,transparent);padding-top:5px;min-width:0}
.er-below .er-react{grid-area:react;justify-content:flex-end;padding:5px 0 0;border-top:1px solid color-mix(in srgb,var(--s-bd) 40%,transparent);background:transparent}
.er-below .er-rx{width:38px;height:38px;font-size:19px}
@container erm (max-width:1100px){
  .er-below{gap:2px 8px}
  .er-below .er-gz{min-width:120px}
  .er-below .er-npstrip{flex-wrap:wrap}
  .er-below .er-npstrip .er-meta{flex-basis:100%;max-width:none;justify-content:flex-start}
  .er-votewrap .er-hint{display:none}
}
@media (max-width:820px){
  /* 2026-10-23 (Corey): portrait keeps the SAME two-bar structure as landscape -
     no separate stacked rows. Deck bar: Now Playing (rows 1-2) | vote cluster
     (LAME + meter + AWESOME) with presence + Requests under it. Crowd bar:
     crowd energy | emoji reactions at the right end. */
  .er-below{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"np votes" "np wr" "en react";gap:4px 8px;padding:6px 8px}
  .er-below .er-npstrip{align-self:center}
  .er-below .er-who .wr{justify-content:flex-end}
  .er-below .er-gz{min-width:100px}
  .er-below .er-react{position:static;justify-content:flex-end;border-top:1px solid color-mix(in srgb,var(--s-bd) 40%,transparent)}
  .er-below .er-rx{width:44px;height:44px;font-size:22px}
  .er-below .er-npstrip .er-meta{display:flex;max-width:none;justify-content:flex-start}
}

/* ===== 2026-10-22 five-item pass (Corey, approved 23:00) =====
   1) Presence count once: the stage bar's center count (#erCount) is out of
      the DOM (esc-stage.js) - presence lives in the deck bar.
   2) ONE volume control in the Stage: the stage bar's own mute + slider
      (#erMute/#erVol) is the control - it drives the Stage player directly
      (volApply) over the shared esc-vol state. The globe header player
      (#nowPlaying, with #volRange/#volMute) is not presented while the
      Stage is open; outside the Stage it is untouched and keeps working. */
body.esc-stage-mode #nowPlaying{display:none!important}
/* 3) "Take the deck" pill docked: the desk plate no longer floats as a
      centered pill over the scene - it sits flush across the scene's
      bottom band, full width, square to the frame. Same elements, same
      actions (name/Take-the-deck, points, PLAY MUSIC / Step down). */
.er-desk{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none}
.er-desk .dm{width:100%;max-width:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:.4cqw .9cqw}
/* 4) Track Art fold: in the strip's art-presentation mode (.artfold, set
      from the player's mode in renderScreens) the left screen is folded
      away and the main screen flexes into its width. */
.er-strip.artfold .er-screen.side.l{display:none}
/* 5) Queue "back on the dance floor" notice as ONE line: text ellipsises,
      the Add songs action stays on the line. */
.er-banner.er-oneline{display:flex;align-items:center;gap:8px;padding:6px 10px}
.er-banner.er-oneline .tx{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er-banner.er-oneline .es-btn{flex:0 0 auto}

/* ===== 2026-10-22 item 6: video pillars (Corey: "when the video is up
   theres alot of black space") =====
   Diagnosis: container-side. The strip's main slot is far wider than 16:9
   at strip height (~620px x ~258px = ~2.4:1 in Corey's frame); the iframe
   fills the slot (YouTube's chrome spans its full width in his shot) and
   YouTube pillars the 16:9 picture inside it with raw black. Fix: the
   video host is sized to TRUE 16:9 at the strip's inner height and
   centered, and the slot behind it is filled with the established 2245
   blur treatment (a blurred, darkened copy of the track art, painted by
   renderScreens into #erMainBg). The embed itself is never scaled or
   cropped, so play/progress controls are untouched. Width formula mirrors
   the strip height clamp (176px/30vh/300px, wide layout) minus strip
   padding + screen border (16px). */
.er-strip .er-screen.main{overflow:hidden}
.er-mainbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.er-mainbg img{display:block;width:100%;height:100%;object-fit:cover;filter:blur(14px) brightness(.5) saturate(1.35);transform:scale(1.12)}
@media (min-width:821px){
  .er-strip .er-screen.main .vid{left:50%;right:auto;transform:translateX(-50%);width:min(100%,calc((clamp(176px,30vh,300px) - 16px)*16/9))}
}

/* 2026-10-23 (Corey): in-flow home for the 'Play this track?' banner at the top
   of the Queue tab (esc-fix5.js docks #escPlayBanner here on portrait). */
#erPlaySlot:empty{display:none}