/* 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,#d4af37);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,#d4af37);padding:0 12px;height:100%;font:inherit;cursor:pointer;white-space:nowrap}
#escModeToggle button[aria-pressed="true"]{background:var(--gold,#d4af37);color:var(--s-on,#111)}
@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:0;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,#d4af37)}
.es-btn{background:var(--s-card);color:var(--gold,#d4af37);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,#d4af37);color:var(--s-on,#14110a);border-color:var(--gold,#d4af37)}.es-btn.red{color:#ff8a8a;border-color:#6b2b2b}.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,#d4af37);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,#d4af37);color:#14110a;border-color:var(--gold,#d4af37)}
.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:76px 1fr auto;gap:12px;align-items:center;background:linear-gradient(180deg,var(--s-card),#120e21);border:1px solid var(--s-bd);border-radius:12px;padding:10px;margin-bottom:8px}
.es-row:hover{border-color:#6b5a2a}
.es-row .th{width:76px;height:54px;border-radius:8px;background:#000 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:20px;width:auto;max-width:60%;object-fit:contain;background:rgba(0,0,0,.55);border-radius:4px;padding:1px 3px}
.es-row .nm{font:600 16px 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:13px;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 15px Oswald,sans-serif;color:#9de6a8}
.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:#cdbf8a}
.es-tag.live{background:#5a1c1c;color:#ffb0b0}.es-tag.ok{background:#1d4a2a;color:#a8f0b8}.es-tag.lock{background:#3b2a12;color:#f0c36a}.es-tag.esc{background:#d4af37;color:#14110a}
/* 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,#0b0912);--s-chrome:var(--chrome,#100c1d);--s-card:color-mix(in srgb,var(--chrome,#171229),#fff 8%);--s-bd:var(--border,#2d2548);--s-tx:var(--text,#eee);--s-mu:var(--muted,#a79fb8);--s-gold:var(--gold,#d4af37);--s-on:#14110a;--s-glass:color-mix(in srgb,var(--chrome,#100c1d) 55%,transparent);--s-glass2:color-mix(in srgb,var(--chrome,#100c1d) 70%,transparent);--s-in:color-mix(in srgb,var(--chrome,#0a0814),#000 35%)}
html[data-theme="noir"] #escStage,html[data-theme="noir"] #esModal,html[data-theme="noir"] #esToast{--s-on:#0a0a0a}
#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:#0b0912 center/100% 100% no-repeat;container-type:inline-size;flex:none;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.55)}
.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%,rgba(0,0,0,.38))}
.er-screen{position:absolute;z-index:2;background:#05040a;border:max(2px,.25cqw) solid color-mix(in srgb,var(--s-gold) 40%,#262033);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:rgba(0,0,0,.62);color:#fff;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:#fff;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:rgba(0,0,0,.72);color:#fff;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,rgba(0,0,0,.42));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%,rgba(0,0,0,.38))}
.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:#07060b;border:1px solid #2c2a33;border-radius:.5cqw;--led:#ffb02e;box-shadow:inset 0 0 .8cqw #000,0 0 1.2cqw color-mix(in srgb,var(--s-gold) 30%,transparent)}
.er-led .win{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.er-led .tx{display:inline-block;font:700 clamp(9px,1.6cqw,18px)/1.2 'Courier New',ui-monospace,monospace;letter-spacing:.06em;color:var(--led);text-shadow:0 0 .6cqw var(--led);text-transform:uppercase}
.er-led .tx.mq{animation:ermq 9s linear infinite alternate}
@keyframes ermq{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(var(--d,0))}}
.er-led .tm{flex:none;font:700 clamp(9px,1.4cqw,16px)/1 'Courier New',ui-monospace,monospace;color:var(--led);text-shadow:0 0 .5cqw var(--led)}
.er-led .dots{position:absolute;left:1cqw;right:1cqw;bottom:.45cqw;height:.45cqw;background:repeating-linear-gradient(90deg,#3b2a0d 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 rgba(212,175,55,.5))}   /* 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;background:rgba(0,0,0,.62);border:1px solid color-mix(in srgb,var(--s-gold) 55%,#333);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{background:rgba(0,0,0,.68);border-radius:999px;padding:.1cqw 1cqw;font:600 clamp(9px,1.3cqw,14px)/1.3 Oswald,sans-serif;color:#fff;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:#fff;font:600 clamp(9px,1.5cqw,16px) Oswald,sans-serif;text-shadow:0 1px 3px #000;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;background:rgba(0,0,0,.74);border-radius:.8cqw;padding:.3cqw .8cqw .4cqw;font:500 clamp(9px,1.2cqw,13px)/1.25 Oswald,sans-serif;color:#fff;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:#ff8a8a!important}.r-admin,.r-staff{color:#ffb86b!important}.r-partner{color:#8ccbff!important}.r-artist{color:#dda8ff!important}.r-mod{color:#7de3b0!important}.r-user{color:var(--s-tx)}
.er-closed{position:absolute;inset:0;background:rgba(5,4,10,.9);display:none;flex-direction:column;gap:10px;align-items:center;justify-content:center;z-index:40;text-align:center;padding:16px;color:#fff}
.er-dock{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"back back back" "pad votes hint";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 #000;box-shadow:0 3px 8px rgba(0,0,0,.55),inset 0 2px 4px rgba(255,255,255,.35);padding:0;flex:none}
.er-rb.dn{background:radial-gradient(circle at 35% 30%,#ff7a7a,#b3122b 70%);border-color:#ffc2c2}
.er-rb.up{background:radial-gradient(circle at 35% 30%,#62f09a,#117a3d 70%);border-color:#bdf8d4}
.er-rb.on{outline:3px solid #fff;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:#000;color:var(--s-tx);border:1px solid #fff;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,#b3122b,#6d6d75 50%,#117a3d);border:1px solid rgba(255,255,255,.25)}
.er-gz .bar i{position:absolute;top:-4px;left:50%;width:5px;height:18px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 4px #000;transition:left .6s}
.er-gz .ends{display:flex;justify-content:space-between;font:700 11px Oswald,sans-serif}.er-gz .sk{color:#ff8f8f}.er-gz .ro{color:#7be8a6}
.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" "votes";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) auto!important;grid-template-areas:"back votes"!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:60px 1fr auto;gap:8px;padding:8px}.es-row .th{width:60px;height:46px}
  #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 .tx{font-size:clamp(9px,3cqw,13px)}.er-led .tm{font-size:clamp(8px,2.8cqw,12px)}
  .er-led .dots{height:1.2cqw;bottom:1.1cqw}
  .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-led .tx.mq,.er-deck.cur .av img,.er-bs.enter,.er-deck.stepup .av{animation:none}}

.er-closed{position:absolute;inset:0;background:rgba(5,4,10,.9);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,#d4af37);border-bottom-color:var(--gold,#d4af37)}
.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,#d4af37);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:#000}
.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,#14110a);background:var(--gold,#d4af37);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:#9de6a8}
.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:#cdbf8a;vertical-align:middle}
.es-bd.Artist{background:#3a1d5a;color:#e0b8ff}.es-bd.Partner{background:#1d3a5a;color:#b8dcff}.es-bd.Staff{background:#5a3a1d;color:#ffd9b8}.es-bd.SuperUser,.es-bd[data-b="Super User"]{background:#5a1d1d;color:#ffb8b8}.es-bd[data-b="Early Beta"]{background:#1d5a3a;color:#b8ffd9}
.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:#9de6a8}.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;background:rgba(0,0,0,.72);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,#d4af37);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,#d4af37);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:#d4af37}.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:#000 center/cover;cursor:pointer;color:var(--s-tx);font:600 10px Oswald;text-shadow:0 1px 2px #000;padding:0;display:flex;align-items:flex-end;justify-content:center}
.es-bg-grid button[aria-pressed="true"]{border-color:#d4af37}
#esToast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:440;background:var(--s-card);border:1px solid var(--gold,#d4af37);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:#e33;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,#d4af37);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:#000}
.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,#d4af37)}
.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,#d4af37);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:#d4af37}.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:#000 center/cover;cursor:pointer;color:var(--s-tx);font:600 10px Oswald;text-shadow:0 1px 2px #000;padding:0;display:flex;align-items:flex-end;justify-content:center}
.es-bgopt.on{border-color:#d4af37;box-shadow:0 0 0 2px rgba(212,175,55,.4)}
.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:#000}
.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:#ff8a8a}.cm .nm.r-admin,.cm .nm.r-staff{color:#ffb86b}.cm .nm.r-partner{color:#8ccbff}.cm .nm.r-artist{color:#dda8ff}
#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:#ff4757}

.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%,#2b1650,#0b0a14 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:#fff}
.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,#d4af37);color:var(--s-on,#14110a);border-color:var(--s-gold,#d4af37)}
.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:rgba(255,255,255,.02)}
.es-avgroups summary{cursor:pointer;font-weight:700;font-size:.85rem;padding:4px 2px;color:#d4af37}
.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;background:rgba(0,0,0,.78);font:700 10px Oswald,sans-serif;letter-spacing:.06em;color:#fff;border:1px solid rgba(255,255,255,.35)}
.es-bgopt.d2 .dk{background:#0b4d6e;border-color:#6fd0ff}
.es-bgopt.d4 .dk{background:#5a3b05;border-color:#ffd166}
.es-bgopt.on{border-color:#d4af37;box-shadow:0 0 0 3px rgba(212,175,55,.55)}
.es-bgopt.on::after{content:"\2713";position:absolute;right:4px;bottom:2px;color:#d4af37;font:700 16px sans-serif;text-shadow:0 1px 3px #000}
.es-settings .es-sec{scroll-margin-top:6px;border-top:1px solid var(--s-bd);padding-top:10px}
.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;background:rgba(0,0,0,.72);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:#fff;background:#1d4f8f;border-bottom:2px solid #7db7ff}
#esSiteBanner.lv-warn{background:#8a5a00;border-color:#ffd166}
#esSiteBanner.lv-alert{background:#8f1d2c;border-color:#ff7a8a}
#esSiteBanner button{position:absolute;right:6px;top:0;bottom:0;background:none;border:0;color:#fff;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,#e8b800)}.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,#111) 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:rgba(255,255,255,.25)}
.es-tdots span.on{background:#ffd86b;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 rgba(255,255,255,.2);touch-action:none;display:block;margin:8px 0;background:#111}
.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,#d4af37);border-radius:8px;background:transparent;color:var(--gold,#d4af37);font:600 17px/1 system-ui,sans-serif;cursor:pointer;pointer-events:auto}
#escFsBtn[aria-pressed="true"]{background:var(--gold,#d4af37);color:var(--s-on,#111)}
#escFsExit{display:none;position:fixed;top:max(3px,env(safe-area-inset-top));right:8px;z-index:500;height:30px;padding:0 14px;white-space:nowrap;align-items:center;justify-content:center;border:1px solid var(--gold,#d4af37);border-radius:15px;background:rgba(0,0,0,.65);color:var(--gold,#d4af37);font:600 14px/1 Oswald,system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;opacity:.8}
body.esc-fs #escFsExit{display:flex}
body.esc-fs header.top,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,#d4af37);border-radius:10px;background:color-mix(in srgb,var(--gold,#d4af37) 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,#2d2548);border-radius:10px;background:color-mix(in srgb,#000 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:#1b1530}
.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:auto;min-height:34px;margin:6px 8px 4px;padding:6px 10px 14px;gap:8px;border-radius:6px;z-index:auto;box-shadow:inset 0 0 6px #000,0 0 8px rgba(255,176,46,.18)}
.er-led.below .tx{font-size:12px}.er-led.below .tm{font-size:12px}
.er-led.below .dots{left:10px;right:10px;bottom:5px;height:4px;background:repeating-linear-gradient(90deg,#3b2a0d 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:#ffc83a;box-shadow:0 0 0 1px rgba(255,200,58,.45),0 0 18px rgba(255,200,58,.18)}

/* 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,rgba(20,16,32,.6));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:rgba(255,255,255,.1);transition:background .4s,transform .4s}
.er-who .en[data-lv=lo] .eb i.on{background:#4fc3f7}.er-who .en[data-lv=mid] .eb i.on{background:#ffc83a}.er-who .en[data-lv=hi] .eb i.on{background:#ff5a3c;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:#1a1426;color:#fff;border:1px solid #ffc83a;box-shadow:0 6px 24px rgba(0,0,0,.5);font:500 13px/1.25 Oswald,system-ui,sans-serif}
#erMini img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#000;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 #665;background:#2a2238;color:#fff;font:600 13px system-ui,sans-serif;cursor:pointer;padding:0 10px}
#erMini #erMiniOpen{background:#ffc83a;color:#111;border-color:#ffc83a}

/* 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:#2a2410;border:1px solid #ffc83a;color:#ffd96a;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 #886;background:transparent;color:#ffd96a;font:600 12px system-ui,sans-serif;cursor:pointer}
#erTip #erTipX{background:#ffc83a;color:#111;border-color:#ffc83a}
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,#d4af37);border-bottom-color:var(--s-gold,#d4af37)}
.es-stabs button:focus-visible{outline:2px solid var(--s-gold,#d4af37);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 #3a3320;border-radius:8px;padding:8px 10px;background:#15120a}
.es-tiles .tile b{display:block;font-size:22px;color:#f5c542}
.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 #3a3320}
.es-bars .b{flex:1;min-width:2px;background:#f5c542;opacity:.85;border-radius:2px 2px 0 0}
.es-bars.sign .b{background:#6bd18f}

/* 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 #3a3320;border-radius:8px;padding:6px 8px;background:#15120a;display:flex;flex-direction:column;gap:2px;opacity:.55;font-size:12px}
.es-ach .ach.on{opacity:1;border-color:#f5c542}
.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:#ffc83a}
.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;background:rgba(10,8,2,.88);border:1px solid #f5c542;border-radius:999px;padding:2px 4px;max-width:92vw}
#esSpotChip button{background:none;border:0;color:#f5c542;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), one gold accent, neutral dark panels ===== */
@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{--s-bg:#0b0b0c;--s-chrome:#111113;--s-card:#18181b;--s-bd:#2a2a2e;--s-mu:#a3a3a8;--s-gold:#d4af37;--gold:#d4af37;--s-on:#14110a;--s-glass:rgba(17,17,19,.6);--s-glass2:rgba(17,17,19,.75);--es-r:10px;--es-r-sm:8px}
#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 rgba(0,0,0,.6)}
.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 rgba(212,175,55,.55);background:rgba(0,0,0,.62);color:#f1e6c0;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;background:rgba(0,0,0,.82);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:#000;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%,#555)}
#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:#e8c24a}
@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) */
html:not(.es-hc) #escStage:has(#erScene[data-bg=hwgraveyard]){--s-gold:#9be37a;--gold:#9be37a}
html:not(.es-hc) #escStage:has(#erScene[data-bg=hwpumpkin]){--s-gold:#ff9a2e;--gold:#ff9a2e}
html:not(.es-hc) #escStage:has(#erScene[data-bg=hwcrypt]){--s-gold:#b58cff;--gold:#b58cff}
#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%,rgba(200,230,210,.35),transparent 70%),radial-gradient(35% 50% at 70% 50%,rgba(200,230,210,.25),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%,rgba(255,160,70,.3),transparent 70%),radial-gradient(35% 50% at 70% 50%,rgba(255,120,30,.22),transparent 70%)}
#erScene[data-bg=hwcrypt] .er-vig::after{background:radial-gradient(40% 60% at 50% 60%,rgba(110,230,120,.3),transparent 70%),radial-gradient(35% 50% at 20% 50%,rgba(150,90,220,.22),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:#e8e8e8;--gold:#e8e8e8;--s-on:#000}
#erScene[data-bg=subbw]>:not(.er-screen.main){filter:grayscale(1)}
#erScene[data-bg=subbw] .er-screen.side{border-color:#bdbdbd}
#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:#d0d0d0}

/* 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:#e8e8e8;color:#000}

/* 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; } }