/* ============================================================
   CG After Dark — player UI
   Theme derived from ui-examples/ (VHS tape + comic/blood horror)
   Display face: DirtyBrush (the show font).
   ============================================================ */
@font-face{
  font-family:'DirtyBrush';
  src:url('assets/fonts/DirtyBrush.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}
:root{
  --bg:#140c0a; --bg2:#1d1210; --panel:#241611; --panel2:#19100d;
  --ink:#dcccc2; --ink-dim:#9c877c; --line:#3a241d;
  --mono:#ece3dc; --cyan:#6fcadd; --blue:#5aa9e6;
  --yellow:#ffce2b; --yellow-2:#e79a1b; --orange:#ef5a1f; --accent-rgb:255,120,60;
  --red:#c01810; --red-deep:#7c0d08; --blood:#9e1409;
  --u-blue:#57b0e6; --u-pink:#e85a7a; --u-purple:#a877e0; --u-green:#5fcf86;
  /* theme-driven ground + outlines + top bar (overridden per body.theme-*) */
  --frame:#5a160d; --glow-a:#2a1310; --glow-b:#2a0d0b;
  --topbar-bg:linear-gradient(180deg,#ff7a3a 0%,#ef5a1f 32%,#c21a0b 100%);
  --tb-border:#4a0a05; --tb-edge:#5c0d07; --tb-inner:rgba(90,6,4,.6);
  --f-comic:'DirtyBrush','Impact','Haettenschweiler','Arial Black',sans-serif;
  --f-mono:'Courier New',ui-monospace,Menlo,Consolas,monospace;
  --f-body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:1320px; --rad:10px;
}
/* THEMES — each re-points accent, ground, outlines, and the top bar. HalloLeem is the :root
   default (no class); Blood Shot Red keeps the warm ground. Applied session-only via body.theme-* (app.js). */
body.theme-bloodred{ --orange:#d6160c; --accent-rgb:206,38,28;
  --topbar-bg:linear-gradient(180deg,#f0402e 0%,#d6160c 32%,#6b0a05 100%); }

/* 🤖🧛 RobotDracula — periwinkle purple on deep indigo */
body.theme-robotdrac{ --orange:#9b8cff; --accent-rgb:150,135,255;
  --bg:#0f0b1a; --bg2:#171030; --panel:#1b1436; --panel2:#130d28; --line:#3a2f63; --frame:#5a49b0;
  --glow-a:#241a4d; --glow-b:#1a1240;
  --topbar-bg:linear-gradient(180deg,#cabfff 0%,#8f7bf0 34%,#4a3aa6 100%);
  --tb-border:#2a1f63; --tb-edge:#1f1750; --tb-inner:rgba(60,40,150,.5); }

/* Serial Silver — brushed metal on cool slate */
body.theme-silver{ --orange:#c3c9d4; --accent-rgb:196,204,216;
  --bg:#101216; --bg2:#181b21; --panel:#1b1f27; --panel2:#141720; --line:#39404d; --frame:#7a8494;
  --glow-a:#20242c; --glow-b:#191d24;
  --topbar-bg:linear-gradient(180deg,#f5f7fa 0%,#c3c9d4 40%,#8b94a3 100%);
  --tb-border:#5b6472; --tb-edge:#3a4049; --tb-inner:rgba(120,135,155,.45); }
/* Serial Silver is a LIGHT theme: the page becomes brushed metal (the dark player/chat/about
   panels stay as cards on top). Soften the dark vignette + darken the footer so they read on silver. */
body.theme-silver{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.40) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(180deg,#eef0f4 0%,#c6ccd6 46%,#a9b1be 100%);
  background-attachment:fixed; }
body.theme-silver .vignette{ box-shadow:inset 0 0 160px 26px rgba(88,98,112,.30); }
body.theme-silver .foot{ color:#39414c; }

/* Krimblooded Edition — cold-blooded slime blue on deep teal */
body.theme-krimblood{ --orange:#1fc8dd; --accent-rgb:40,200,224;
  --bg:#07121a; --bg2:#0c1b26; --panel:#0f2130; --panel2:#0a1824; --line:#1d3a49; --frame:#0a6f88;
  --glow-a:#0a2733; --glow-b:#071f2b;
  --topbar-bg:linear-gradient(180deg,#9af0ff 0%,#1fc8dd 38%,#0a6f88 100%);
  --tb-border:#0a5566; --tb-edge:#063b49; --tb-inner:rgba(20,150,180,.5); }

/* With Lantern's Light — warm green glow on deep forest */
body.theme-lantern{ --orange:#4fd67a; --accent-rgb:90,210,130;
  --bg:#081209; --bg2:#0d1e10; --panel:#102414; --panel2:#0a1a0d; --line:#244a2c; --frame:#2f7a43;
  --glow-a:#0f2d16; --glow-b:#0a2410;
  --topbar-bg:linear-gradient(180deg,#9af0b0 0%,#4fd67a 36%,#0a6f2e 100%);
  --tb-border:#0a5a2a; --tb-edge:#063f1e; --tb-inner:rgba(30,150,70,.5); }

/* Slime Time — bright digital-slime blue on deep blue. Palette: #0083FF main · #0099FF vibrant
   · #0081E2 shadow · #00D3F7 highlight (the glare at the top of the bar/glow). */
body.theme-slime{ --orange:#0083ff; --accent-rgb:0,131,255;
  --bg:#04131f; --bg2:#072438; --panel:#082b45; --panel2:#05192b; --line:#134a70; --frame:#0081e2;
  --glow-a:#0a496e; --glow-b:#042436;
  --topbar-bg:linear-gradient(180deg,#00d3f7 0%,#0099ff 22%,#0083ff 58%,#0081e2 100%);
  --tb-border:#0266ad; --tb-edge:#024a85; --tb-inner:rgba(0,170,255,.5); }
*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:hidden}
body{
  font-family:var(--f-body); color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--glow-a) 0%, transparent 55%),
    radial-gradient(90% 60% at 50% 120%, var(--glow-b) 0%, transparent 60%),
    var(--bg);
  min-height:100vh; line-height:1.55; letter-spacing:.2px;
}
img{max-width:100%;display:block}
a{color:inherit}
b{color:#f3e7df}

/* ambient overlays */
.vignette{position:fixed;inset:0;pointer-events:none;z-index:60;
  box-shadow:inset 0 0 220px 40px rgba(0,0,0,.75), inset 0 0 60px rgba(120,10,6,.25);}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:61;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);}
body.noscan .scanlines{display:none}

/* comic / display type: gradient fill + dark stroke to mimic the show font */
.comic{
  font-family:var(--f-comic); font-weight:700; letter-spacing:1.5px;
  line-height:1; text-transform:uppercase;
  background:linear-gradient(180deg,#fff1a6 0%,#ffd23f 46%,var(--orange) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px #4a0f08;
  filter:drop-shadow(0 2px 0 #5c0d07) drop-shadow(0 1px 3px rgba(0,0,0,.6));
  text-wrap:balance;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 18px;
  background:var(--topbar-bg);
  border-bottom:3px solid var(--tb-border);
  box-shadow:0 4px 0 var(--tb-edge), 0 10px 26px rgba(0,0,0,.55),
             inset 0 2px 0 rgba(255,255,255,.45), inset 0 -8px 20px var(--tb-inner);
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand__badge{width:58px;height:58px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.brand__text{display:flex;flex-direction:column;line-height:1;gap:4px}
.brand__wordmark{height:40px;width:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.brand__tag{
  font-family:var(--f-mono); font-size:11px; letter-spacing:2px; color:#2a0603; margin-top:4px; font-weight:700;
}
.brand__tag b{background:#1a0d0a;color:var(--yellow);padding:1px 7px;border-radius:3px;letter-spacing:2px}
.topbar__right{display:flex;align-items:center;gap:12px}
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-weight:700;
  font-size:13px;letter-spacing:2px;padding:7px 14px;border-radius:7px;
  background:linear-gradient(180deg,#2c2c2c,#111);border:1px solid #000;color:#cdbdae;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}
.status__dot{width:9px;height:9px;border-radius:50%;background:#777;box-shadow:0 0 0 2px #000}
.status--live{color:#ffd7d2}
.status--live .status__dot{background:#ff2a1a;box-shadow:0 0 10px #ff2a1a;animation:pulse 1.2s infinite}
.status--vod{color:#ffe0b0}
.status--vod .status__dot{background:#ff9a3a;box-shadow:0 0 9px #ff9a3a}
@keyframes pulse{50%{opacity:.35}}
.gear{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:#2a0603;font-family:var(--f-mono);
  font-weight:700;font-size:12px;letter-spacing:2px;padding:7px 12px;border-radius:7px;
  background:linear-gradient(180deg,#ffd98f,#f0a83c);border:1px solid #7a3607;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.gear:hover{filter:brightness(1.07)}
.gear__label{display:inline}

/* ---------- layout ---------- */
.grid{
  max-width:var(--maxw); margin:22px auto; padding:0 18px; display:grid; gap:20px;
  grid-template-columns:minmax(0,1fr) 352px;
  grid-template-areas:"stage chat" "about chat";
  align-items:start;
}
.stage{grid-area:stage;min-width:0;position:relative}
.chat{grid-area:chat;min-width:0}
.about{grid-area:about;min-width:0}

/* ---------- embed mode (?embed=1): player only, for the X/Twitter player card ---------- */
html.embed body{margin:0;background:#000}
html.embed .topbar,html.embed .chat,html.embed .about,html.embed .foot,
html.embed .vignette,html.embed .webframe{display:none}
html.embed .grid{display:block;max-width:none;margin:0;padding:0;gap:0}
html.embed .stage{height:100vh}
html.embed .screen{aspect-ratio:auto;width:100vw;height:100vh;border:0;border-radius:0}

/* ---------- panels (shared frame) ---------- */
.screen,.chat,.about{
  border:1px solid var(--line); border-radius:var(--rad);
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---------- player screen ---------- */
.screen{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;overflow:hidden;background:#070503;
  border-color:var(--frame);}
.screen__video,.screen__graffiti,.screen__blood{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;display:block}
.screen__video{object-fit:contain;background:#000;display:none}
.screen__graffiti{object-fit:contain;opacity:.5;filter:brightness(.85) saturate(1)}
.screen__blood{object-fit:fill;opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity .25s}
.screen[data-state="live"] .screen__video{display:block}
.screen[data-state="live"] .screen__graffiti,
.screen[data-state="live"] .offline,
.screen.has-source .offline{display:none}   /* live/VOD loaded → no "offline / next show soon" text, just the press-play poster */

.hud{position:absolute;inset:0;padding:16px 18px;display:flex;flex-direction:column;z-index:10;
  font-family:var(--f-mono);color:var(--mono);text-shadow:0 1px 2px rgba(0,0,0,.9);pointer-events:none}
.hud__row{display:flex;justify-content:space-between;align-items:flex-start;font-size:14px;letter-spacing:2px}
.hud__row--bottom{margin-top:auto}
.hud__meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.hud__transport{color:#fff}
.hud__clock{color:var(--blue);line-height:1.3;font-size:13px}
.hud__sig{color:#e8d7cf;align-self:flex-end;letter-spacing:3px;font-size:13px;opacity:.9}
#timecode{color:var(--cyan)}
#timecode.tc-wait,.dtime.tc-wait{color:var(--yellow)}   /* no VoD/live loaded → the counter reads yellow */

.offline{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:20px;
  background:radial-gradient(62% 58% at 50% 48%, rgba(8,4,3,.78) 0%, rgba(8,4,3,.4) 55%, transparent 82%)}
.offline__signal{font-family:var(--f-mono);letter-spacing:6px;color:#b9a79d;font-size:13px;margin:0}
.offline__headline{margin:0;line-height:0}
.offline__logo{width:auto;max-width:min(420px,66%);max-height:46%;height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
.offline__head{font-family:var(--f-comic);margin:4px 0 0;font-weight:400;letter-spacing:2px;color:var(--yellow);
  font-size:clamp(22px,3.4vw,38px);line-height:1;text-shadow:0 2px 4px rgba(0,0,0,.85)}
.offline__sub{margin:0;font-family:var(--f-mono);color:#d9c9bf;font-size:15px}
.offline__sub--dim{color:#9c857a;font-size:13px}
/* start gate — paused poster over the video (VoD/live indication, no autoplay) */
/* transparent so the branded offline screen (graffiti + NO SIGNAL + logo) shows behind */
.startgate{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;cursor:pointer;text-align:center;padding:0 20px 8%;
  background:linear-gradient(to top,rgba(8,4,3,.6) 0%,transparent 42%)}
.startgate[hidden]{display:none}
.startgate__btn{width:84px;height:84px;border-radius:50%;border:2px solid rgba(var(--accent-rgb),.75);background:rgba(20,10,7,.6);
  color:#ffe3d6;font-size:30px;line-height:1;display:grid;place-items:center;cursor:pointer;padding-left:4px;
  transition:transform .15s,background .15s;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.startgate__btn:hover{background:rgba(74,38,28,.9);transform:scale(1.06)}
.startgate__label{font-family:var(--f-comic);font-size:clamp(22px,3vw,34px);letter-spacing:2px;color:var(--yellow);text-shadow:0 2px 4px rgba(0,0,0,.85)}
.startgate__label.live{color:#ff5a4a}
.startgate__sub{font-family:var(--f-mono);font-size:13px;letter-spacing:1px;color:#d9c9bf}
/* live-started-during-replay prompt */
.livealert{position:absolute;inset:0;z-index:13;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,4,3,.7)}
.livealert[hidden]{display:none}
.livealert__box{max-width:420px;width:100%;text-align:center;background:linear-gradient(180deg,#241611,#160d0a);
  border:1px solid rgba(var(--accent-rgb),.5);border-radius:14px;padding:20px 22px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.livealert__title{font-family:var(--f-comic);letter-spacing:2px;color:#ff5a4a;font-size:clamp(18px,2.6vw,26px);text-shadow:0 2px 4px rgba(0,0,0,.8)}
.livealert__msg{font-family:var(--f-body);color:#e7d8ce;font-size:14.5px;margin:8px 0 16px}
.livealert__btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.labtn{cursor:pointer;font-family:var(--f-mono);font-size:13px;letter-spacing:1px;padding:9px 14px;border-radius:8px;
  background:#2a1812;border:1px solid #4a271d;color:#f0e2d9}
.labtn:hover{background:#3a201a}
.labtn--live{background:linear-gradient(180deg,#ff7a3a,#ef5a1f);border-color:#4a0a05;color:#190a06;font-weight:700}
.labtn--live:hover{filter:brightness(1.08)}

/* seek / DVR + VOD scrub bar */
.seekbar{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 12px;
  border:1px solid var(--line);border-radius:var(--rad);background:linear-gradient(180deg,#201410,#160d0a)}
.seekbar[hidden]{display:none}
.seek{flex:1;min-width:0;accent-color:var(--orange);height:4px}
.seek__time{font-family:var(--f-mono);font-size:12px;color:var(--cyan);min-width:96px;text-align:right;letter-spacing:.5px}
.seek__time.atlive{color:#ff5a4a;font-weight:700}
.ctl--live{width:auto;padding:0 12px;font-family:var(--f-mono);font-size:12px;letter-spacing:1px;color:#ffd7d2}

/* ---- in-screen overlay controls (work inside fullscreen) ---- */
.scr-mini,.scr-pop{font-family:var(--f-mono)}
.screen[data-state="offline"] .scr-mini,
.screen[data-state="offline"] .scr-pop,
.screen[data-state="offline"] .scr-scan{display:none}
.scr-scan{position:absolute;inset:0;z-index:6;pointer-events:none;display:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);opacity:.55}
.screen.fs .scr-scan{display:block}
body.noscan .scr-scan{display:none}
/* hide the faux-VCR readouts over the video (keeps scanlines + offline msg) */
body.no-vhs .hud__row--top,body.no-vhs .hud__row--bottom{display:none}
.scrbtn{cursor:pointer;color:#ffe3d6;background:rgba(42,24,18,.6);border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:7px;min-width:36px;height:30px;font-size:13px;font-family:var(--f-mono);
  display:grid;place-items:center;letter-spacing:1px}
.scrbtn:hover{background:rgba(74,38,28,.85)}
.scrbtn--live{color:#ff6a58;padding:0 11px;min-width:auto}
/* compact, always-on */
.scr-mini{position:absolute;left:18px;bottom:62px;z-index:8;
  display:flex;align-items:center;gap:9px;padding:4px 10px;border-radius:999px;
  background:rgba(10,6,4,.42);border:1px solid rgba(var(--accent-rgb),.3)}
.scr-mini .scrbtn{height:26px;min-width:30px;font-size:11px}
.scr-mini__t{font-size:12px;color:var(--cyan);letter-spacing:1px}
.scr-mini__t.atlive{color:#ff5a4a;font-weight:700}
/* pop-up near the middle (fullscreen), partially transparent CCTV panel */
.scr-pop{position:absolute;right:14px;bottom:14px;z-index:9;
  width:min(560px,76%);display:flex;flex-direction:column;gap:11px;padding:14px 16px;border-radius:12px;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(20,10,7,.6),rgba(10,5,4,.52));
  border:1px solid rgba(var(--accent-rgb),.4);
  box-shadow:0 10px 44px rgba(0,0,0,.55),inset 0 0 34px rgba(120,10,6,.28);
  opacity:0;pointer-events:none;transition:opacity .2s ease}
.scr-pop.show{opacity:1;pointer-events:auto}
/* "Worse Playbar": the old pop-up overlay controls, only when the toggle is on */
body:not(.worsebar) #scrMini,body:not(.worsebar) #scrPop{display:none}
body.worsebar .dockbar--float{display:none}  /* in float/fullscreen the worse pop takes over */
.scr-pop__seek{display:flex;align-items:center;gap:10px}
.scr-seek{flex:1;min-width:0;accent-color:var(--orange);height:4px}
.scr-time{font-size:12.5px;color:var(--cyan);min-width:96px;text-align:right;letter-spacing:.5px}
.scr-time.atlive{color:#ff5a4a;font-weight:700}
.scr-pop__btns{display:flex;align-items:center;justify-content:center;gap:14px}
.scr-sel{display:flex;align-items:center;gap:6px;font-size:11px;color:#e7cfc4;letter-spacing:1px}
.scr-sel select{font-family:var(--f-mono);background:rgba(26,15,11,.85);color:var(--yellow);
  border:1px solid rgba(var(--accent-rgb),.4);border-radius:6px;padding:5px 7px}
.screen.fs{cursor:none}
.screen.fs.pop-on{cursor:auto}
/* cast + pin buttons */
.ctl--cast[hidden],.scrbtn--cast[hidden]{display:none}
.ctl--cast svg,.scrbtn--cast svg{display:block}
.scrbtn--pin{transition:background .15s,color .15s}
.scrbtn--pin[aria-pressed="true"]{background:var(--orange);color:#1a0d0a;border-color:var(--orange)}
.opt-sel{font-family:var(--f-mono);background:#2a1812;color:var(--yellow);border:1px solid #4a271d;border-radius:6px;padding:5px 8px;font-size:12px}

/* controls */
.controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--rad);
  background:linear-gradient(180deg,#201410,#160d0a)}
.ctl{cursor:pointer;color:#f0e2d9;background:#2a1812;border:1px solid #4a271d;border-radius:7px;
  width:38px;height:34px;font-size:15px;line-height:1;display:grid;place-items:center;flex:none}
.ctl:hover{background:#3a201a}
.vol{flex:1 1 80px;min-width:60px;accent-color:var(--orange)}
.controls__spacer{flex:1}
.qpick{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:2px;color:var(--ink-dim)}
.qpick select{font-family:var(--f-mono);font-weight:700;background:#2a1812;color:var(--yellow);
  border:1px solid #4a271d;border-radius:7px;padding:7px 9px;letter-spacing:1px}

/* ---------- unified control bar (dockbar): orange CCTV theme ---------- */
.dockbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px;padding:10px 14px;border-radius:12px;
  font-family:var(--f-mono);
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(30,16,11,.94),rgba(17,9,7,.94));
  border:1px solid rgba(var(--accent-rgb),.4);
  box-shadow:inset 0 0 30px rgba(120,10,6,.2)}
/* offline: keep the play bar visible (play runs the wait clock); dim the stream-only controls */
/* 15s rewind / forward skip buttons — gold arrow, white number, standard box */
.dbtn--skip{min-width:42px}
.dbtn--skip .sk-ico{position:relative;display:inline-grid;place-items:center}
.dbtn--skip .sk-ico svg{display:block;fill:#ffd23f}
.dbtn--skip .sk-n{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-mono);
  font-weight:700;font-size:8.5px;font-variant-numeric:tabular-nums;color:#fff;padding-top:1px}
.opt .skipset{display:flex;flex-direction:row;align-items:center;gap:5px;font-family:var(--f-mono);font-size:12.5px;color:var(--ink-dim);white-space:nowrap}
.skipset__g{color:var(--yellow);font-size:15px}
/* .opt input{width:20px;height:20px} (the checkbox rule) outranks a bare .opt-num — so scope higher */
.opt input.opt-num{width:62px;height:auto;background:#2a1812;color:var(--yellow);border:1px solid #4a271d;border-radius:6px;padding:5px 7px;font:700 13px var(--f-mono);text-align:center;accent-color:auto}
.dockbar.is-offline .dbtn--skip,.dockbar.is-offline .dseek,.dockbar.is-offline .dbtn--live,.dockbar.is-offline .dvol,
.dockbar.is-offline #muteBtn,.dockbar.is-offline #castBtn,.dockbar.is-offline .dsel{opacity:.4;pointer-events:none}
.dbtn{cursor:pointer;color:#ffe3d6;background:rgba(42,24,18,.6);border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:7px;min-width:38px;height:32px;font-size:14px;font-family:var(--f-mono);
  display:grid;place-items:center;letter-spacing:1px;padding:0 10px;flex:none}
.dbtn:hover{background:rgba(74,38,28,.85)}
.dbtn--live{color:#ff6a58}
.vodbtn{color:#9c877c!important;letter-spacing:1px;cursor:pointer}
/* in-page Help panel (iframe) */
.helpmodal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,4,3,.82)}
.helpmodal[hidden]{display:none}
.helpmodal__panel{display:flex;flex-direction:column;width:min(920px,100%);height:min(90vh,100%);background:var(--bg);border:1px solid rgba(var(--accent-rgb),.5);border-radius:12px;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.6)}
.helpmodal__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(180deg,#241611,#160d0a);border-bottom:1px solid var(--line)}
.helpmodal__title{font-family:var(--f-comic);letter-spacing:1px;color:var(--yellow);font-size:18px;flex:1;min-width:0}
.helpmodal__ext{font-family:var(--f-mono);font-size:12px;color:var(--cyan);text-decoration:none;border:1px solid var(--line);padding:5px 9px;border-radius:7px;white-space:nowrap}
.helpmodal__ext:hover{color:#fff;border-color:var(--cyan)}
.helpmodal__close{cursor:pointer;background:#2a1812;border:1px solid #4a271d;color:#f0e2d9;width:34px;height:30px;border-radius:7px;font-size:14px}
.helpmodal__close:hover{background:#3a201a}
.helpmodal__frame{flex:1;width:100%;border:0;background:var(--bg)}
.dbtn--cast[hidden],.dbtn--pip[hidden]{display:none}
.dbtn.on{background:var(--orange);color:#1a0d0a;border-color:var(--orange)}   /* active (e.g. in Picture-in-Picture) */
.dbtn--cast svg{display:block}
.dseek{flex:1 1 150px;min-width:110px;accent-color:var(--orange);height:4px}
.dtime{font-size:12.5px;color:var(--cyan);min-width:112px;text-align:right;letter-spacing:.5px}
.dtime.atlive{color:#ff5a4a;font-weight:700}
.dvol{flex:0 1 90px;min-width:54px;accent-color:var(--orange)}
.dsel{display:flex;align-items:center;gap:6px;font-size:11px;color:#e7cfc4;letter-spacing:1px}
.dsel select{font-family:var(--f-mono);font-weight:700;background:rgba(26,15,11,.9);color:var(--yellow);
  border:1px solid rgba(var(--accent-rgb),.4);border-radius:6px;padding:6px 8px;letter-spacing:1px}
/* docked = always visible; the pin only matters while floating */
.dockbar:not(.dockbar--float) .dbtn--pin{display:none}
/* floating: translucent panel over the video, auto-hide + pinnable */
.dockbar--float{position:absolute;left:12px;right:12px;bottom:12px;z-index:9;margin:0;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(20,10,7,.62),rgba(10,5,4,.54));
  box-shadow:0 10px 44px rgba(0,0,0,.55),inset 0 0 34px rgba(120,10,6,.28);
  opacity:0;pointer-events:none;transition:opacity .2s ease}
.dockbar--float.show,.dockbar--float.pinned{opacity:1;pointer-events:auto}
.dockbar--float .dbtn--pin[aria-pressed="true"]{background:var(--orange);color:#1a0d0a;border-color:var(--orange)}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;min-height:520px;max-height:calc(100vh - 140px);overflow:visible}
/* pinned Ko-fi "shout" — a comic burst bubble, tail pointing left at the stream, breaking out of the panel */
.kofi-shout{position:relative;display:flex;align-items:center;gap:13px;text-decoration:none;
  margin:12px 10px 10px -24px;                      /* negative left = break out toward the video */
  padding:22px 20px 22px 60px;min-height:116px;color:#140a06;overflow:visible;isolation:isolate}
/* the spiky bubble + comic outline live on ::before, so the cup's flames (real content) can spill past the edge */
.kofi-shout::before{content:"";position:absolute;inset:0;z-index:0;background:#fbfaf4;
  clip-path:polygon(55.0% 5.0%, 63.4% 15.0%, 75.4% 10.2%, 78.3% 23.1%, 91.2% 24.4%, 87.9% 37.2%, 98.7% 44.6%, 89.9% 54.3%, 96.1% 66.0%, 84.0% 70.5%, 84.2% 83.7%, 71.4% 81.9%, 65.5% 93.7%, 55.0% 86.0%, 44.5% 93.7%, 38.6% 81.9%, 25.8% 83.7%, 26.0% 70.5%, 13.9% 66.0%, 20.1% 54.3%, 0.0% 50.0%, 22.1% 37.2%, 18.8% 24.4%, 31.7% 23.1%, 34.6% 10.2%, 46.6% 15.0%);
  filter:drop-shadow(2.5px 0 0 #000) drop-shadow(-2.5px 0 0 #000) drop-shadow(0 2.5px 0 #000) drop-shadow(0 -2.5px 0 #000) drop-shadow(0 8px 12px rgba(0,0,0,.55))}
.kofi-shout__fire{position:relative;z-index:1;width:68px;height:68px;object-fit:contain;flex:none;
  margin:-26px 2px -8px -14px;                      /* lift + nudge out so the flames break the bubble's top-left edge */
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.kofi-shout__txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;min-width:0}
/* Slime Time / Krimblooded: sit the slime low so its blue body lines up with the bubble's arrow/tail
   (which points left at the stream, at the vertical middle), and tighten the text so it stays in-bubble. */
.kofi-shout__fire--slime{width:auto;height:112px;margin:4px 2px -10px 14px}
body.theme-slime .kofi-shout,body.theme-krimblood .kofi-shout{padding-left:38px;gap:8px}
body.theme-slime .kofi-shout__cta,body.theme-krimblood .kofi-shout__cta{font-size:20px}
body.theme-slime .kofi-shout__txt,body.theme-krimblood .kofi-shout__txt{margin-left:-20px}
.kofi-shout__cta{font-family:var(--f-comic);letter-spacing:1px;text-transform:uppercase;font-size:23px;line-height:.92;color:#140a06}
.kofi-shout__url{font-family:var(--f-mono);font-weight:700;font-size:12.5px;letter-spacing:.2px;color:#141414;word-break:break-all}
.kofi-shout:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .kofi-shout{transition:transform .14s ease}
  .kofi-shout:hover{transform:scale(1.02) rotate(-.6deg)}
}
.chat__head{padding:12px 16px;font-size:22px;letter-spacing:2px;
  background:linear-gradient(180deg,#ffe07a,#f0a83c);border-bottom:2px solid #7a3607;
  -webkit-text-stroke:1.2px #4a0f08}
.chat__log{position:relative;flex:1;min-height:0;overflow:hidden;padding:0 14px}
/* the chat "simulation" slow-scrolls and loops seamlessly: two identical copies stacked, and the
   animation runs 0 → -50% (exactly one copy) so the restart is invisible. hover or the in-message
   "pause the chat" checkbox pauses it. */
.chat__track{display:flex;flex-direction:column;will-change:transform;animation:chatscroll linear infinite}
.chat__track:hover,.chat__track.is-paused{animation-play-state:paused}
.chat__copy{list-style:none;margin:0;padding:0 0 2px;display:flex;flex-direction:column;gap:2px}
@keyframes chatscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.msg{padding:9px 6px;border-bottom:1px dashed #33201a;font-size:14.5px;color:#d7c7bd;flex-shrink:0;
  max-height:240px;overflow:hidden}
@media (prefers-reduced-motion:reduce){.chat__track{animation:none}.chat__log{overflow-y:auto}}
.msg:last-child{border-bottom:0}
.u{font-weight:800;margin-right:6px}
.u--blue{color:var(--u-blue)} .u--pink{color:var(--u-pink)}
.u--purple{color:var(--u-purple)} .u--green{color:var(--u-green)}
.u--cgad{color:var(--yellow)}
.msg a{color:var(--cyan);text-decoration:underline;word-break:break-all}
.msg a:hover{color:#9fe4f2}
.msg.announce{border-left:3px solid var(--yellow);padding-left:9px;
  background:linear-gradient(90deg,rgba(255,206,43,.08),transparent 70%)}
.msg.slideout{max-height:0;opacity:0;transform:translateY(-12px);margin:0;padding-top:0;padding-bottom:0;border-bottom-color:transparent}
.msg.slidein{animation:msgin .45s ease}
@keyframes msgin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rotchk{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.5px;color:#9a867c;cursor:pointer}
.rotchk input{width:15px;height:15px;accent-color:var(--orange)}
.rotchk.inmsg{margin-top:9px;color:#c9b7ab}
.chat__note{margin:0;padding:8px 16px;font-size:11.5px;color:#8a7369;border-top:1px solid var(--line);background:#19100d}
.chat__form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:#19100d}
.chat__input{flex:1;font-family:var(--f-mono);font-size:13px;color:#e7d8ce;background:#120b09;
  border:1px solid #3a241d;border-radius:7px;padding:10px 12px;letter-spacing:1px}
.chat__input::placeholder{color:#7a6459}
.chat__send{cursor:pointer;font-size:16px;letter-spacing:1px;padding:0 16px;border-radius:7px;
  color:#2a0603;background:linear-gradient(180deg,#ffd45a,#e79a1b);border:1px solid #7a3607;
  -webkit-text-stroke:0}
.chat__send:disabled,.chat__input:disabled{opacity:.6;cursor:not-allowed}

/* ---------- about ---------- */
.about{padding:20px 22px;display:flex;flex-direction:column;gap:14px;border-style:dashed;border-color:#4a271d}
.about__tape{align-self:flex-start;font-family:var(--f-mono);font-size:11px;letter-spacing:2px;color:#cdbcb2;
  background:#d7c9bc;color:#2a1a12;padding:3px 10px;border-radius:3px;transform:rotate(-1.2deg)}
.about__title{font-size:30px;margin:2px 0 0}
.about p{margin:0;max-width:62ch}
.about__dim{color:var(--ink-dim)}
.about__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-mono);
  font-weight:700;letter-spacing:1.5px;font-size:13px;padding:11px 18px;border-radius:8px}
.btn--kofi{color:#fff;background:linear-gradient(180deg,#ef4d4d,#c01810);border:1px solid #7c0d08;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.btn--x{color:#eadfd8;background:#120b09;border:1px solid #4a2a20}
.btn:hover{filter:brightness(1.08)}
.about__vm{font-family:var(--f-mono);font-size:12.5px;color:#9c877c}
.about__vm b{color:var(--yellow)}

/* --- producer credits (one-line roll) --- */
.about__credits{font-family:var(--f-mono);font-size:12px;line-height:2;color:var(--ink-dim);max-width:none}
.about__credits .cred__role{color:var(--yellow-2);letter-spacing:.3px}
.about__credits .cred__name{color:var(--ink)}
.about__credits .cred__sep{color:var(--line);margin:0 6px;filter:brightness(1.8)}
.about__credits .cred__links{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
.about__credits .cred__cut{color:#6e564c}
.ic{display:inline-flex;align-items:center;gap:4px;color:var(--ink-dim);text-decoration:none;transition:color .15s,transform .15s}
.ic svg{width:14px;height:14px;fill:currentColor;display:block}
.ic:hover{text-decoration:none;transform:translateY(-1px)}
.ic--x:hover{color:#fff}
.ic--yt{color:#ff3d3d}.ic--yt:hover{color:#ff6060}
.ic--tw{color:#a877e0}.ic--tw:hover{color:#c49bff}
.ic--sub{color:var(--orange)}.ic--sub:hover{color:#ff7a3c}
.ic--x .handle{color:var(--yellow);font-size:11.5px}
.ic--x:hover .handle{color:#fff}

/* ---------- footer ---------- */
.foot{text-align:center;font-family:var(--f-mono);font-size:12px;letter-spacing:2px;color:#6f5a50;
  padding:26px 16px 40px}

/* ---------- settings popover ---------- */
.settings{position:fixed;top:72px;right:18px;z-index:50;width:min(300px,calc(100vw - 24px));
  background:linear-gradient(180deg,#241611,#160d0a);border:1px solid #5a160d;border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.7);max-height:calc(100vh - 90px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.settings[hidden]{display:none}
.settings__head{position:sticky;top:0;z-index:1;padding:11px 16px;font-size:18px;letter-spacing:2px;
  background:linear-gradient(180deg,#ffe07a,#f0a83c);border-bottom:2px solid #7a3607;-webkit-text-stroke:1.1px #4a0f08}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #2c1a14;cursor:pointer}
.opt span{display:flex;flex-direction:column}
.opt small{color:var(--ink-dim);font-size:11.5px}
.opt input{width:20px;height:20px;accent-color:var(--red)}
.settings__foot{margin:0;padding:11px 16px;font-size:11px;color:#8a7369}

/* display font on YELLOW surfaces: solid dark fill for contrast (matches mockups) */
.chat__head,.settings__head,.chat__send{
  -webkit-text-fill-color:#47100a;color:#47100a;
  -webkit-text-stroke:0;background-clip:border-box;-webkit-background-clip:border-box;
  filter:drop-shadow(0 1px 0 rgba(255,230,150,.55));
}
.chat__head,.settings__head{font-size:26px;letter-spacing:3px}
.chat__send{font-size:19px;letter-spacing:2px}

/* ============================================================
   BLOOD FRAME (HalloLeem) — toggled per session, default OFF
   Matches layout-example-3 / -4: red glossy frame + top drips.
   ============================================================ */
body.blood .screen,body.blood .chat{
  border-color:#ff2a1a;
  box-shadow:0 0 0 2px #7c0d08, 0 0 26px 2px rgba(255,30,20,.45),
             inset 0 0 40px rgba(120,6,4,.5);
}
body.blood .screen__blood{opacity:.32}
body.blood .screen::after,body.blood .chat::after{
  content:"";position:absolute;left:0;right:0;top:-2px;height:26px;pointer-events:none;z-index:5;
  background:
    radial-gradient(10px 22px at 12% 0,#c01810 60%,transparent 62%),
    radial-gradient(7px 30px at 26% 0,#9e1409 60%,transparent 62%),
    radial-gradient(9px 18px at 44% 0,#c01810 60%,transparent 62%),
    radial-gradient(6px 34px at 61% 0,#9e1409 60%,transparent 62%),
    radial-gradient(11px 20px at 78% 0,#c01810 60%,transparent 62%),
    radial-gradient(7px 28px at 91% 0,#9e1409 60%,transparent 62%);
}
body.blood .chat{position:relative}
body.blood{background:
  radial-gradient(120% 80% at 50% -10%, #4a1210 0%, transparent 55%),
  radial-gradient(90% 70% at 50% 120%, #45100c 0%, transparent 60%),
  var(--bg);}

/* whole-website blood frame — same HalloLeem toggle, wraps the entire viewport */
.webframe{position:fixed;inset:0;pointer-events:none;z-index:62;display:none}
body.blood .webframe{display:block;
  box-shadow:inset 0 0 0 4px #ff2a1a, inset 0 0 0 9px #5c0d07,
             inset 0 0 100px 18px rgba(255,26,16,.30);}
body.blood .webframe::before{content:"";position:absolute;left:0;right:0;top:4px;height:34px;pointer-events:none;
  background-image:
    radial-gradient(9px 26px at 20px 0,#c01810 58%,transparent 60%),
    radial-gradient(6px 34px at 58px 0,#9e1409 58%,transparent 60%),
    radial-gradient(8px 20px at 96px 0,#c01810 58%,transparent 60%);
  background-repeat:repeat-x;background-size:120px 34px}
body.blood .webframe::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;pointer-events:none;
  background-image:
    radial-gradient(9px 22px at 36px 100%,#c01810 58%,transparent 60%),
    radial-gradient(6px 28px at 80px 100%,#9e1409 58%,transparent 60%);
  background-repeat:repeat-x;background-size:120px 22px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:1fr;grid-template-areas:"stage" "chat" "about";}
  .chat{max-height:none;min-height:420px}
  .brand__wordmark{height:30px}
  .brand__badge{width:46px;height:46px}
  .gear__label{display:none}
  .gear{padding:8px 10px}
}
/* mobile: stack the header like layout-example-2 (brand row, then status row) */
@media (max-width:560px){
  .topbar{flex-wrap:wrap;padding:10px 14px;gap:8px}
  .brand{flex:1 1 100%}
  .brand__wordmark{height:26px}
  .brand__badge{width:42px;height:42px}
  .topbar__right{width:100%;justify-content:flex-start}
  .screen[data-state="offline"]{aspect-ratio:auto;min-height:252px}
  .hud{padding:12px 14px}
  .offline{gap:7px;padding:12px}
  .offline__signal{letter-spacing:3px;font-size:11px}
  .offline__logo{max-width:62%;max-height:120px}
  .offline__head{font-size:13px;letter-spacing:2px}
  .offline__sub{font-size:13px} .offline__sub--dim{font-size:12px}
  .hud__row{font-size:12px}
  .hud__clock{font-size:11px}
}
@media (max-width:420px){
  .brand__tag{font-size:9px}
}

/* ---------- a11y ---------- */
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}