/* ============================================================
   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;
  --red:#c01810; --red-deep:#7c0d08; --blood:#9e1409;
  --u-blue:#57b0e6; --u-pink:#e85a7a; --u-purple:#a877e0; --u-green:#5fcf86;
  --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;
}
*{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%, #2a1310 0%, transparent 55%),
    radial-gradient(90% 60% at 50% 120%, #2a0d0b 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:linear-gradient(180deg,#ff7a3a 0%,#ef5a1f 32%,#c21a0b 100%);
  border-bottom:3px solid #4a0a05;
  box-shadow:0 4px 0 #5c0d07, 0 10px 26px rgba(0,0,0,.55),
             inset 0 2px 0 rgba(255,255,255,.45), inset 0 -8px 20px rgba(90,6,4,.6);
}
.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}
.chat{grid-area:chat;min-width:0}
.about{grid-area:about;min-width: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;aspect-ratio:16/9;overflow:hidden;background:#070503;
  border-color:#5a160d;}
.screen__video,.screen__graffiti,.screen__blood{position:absolute;inset:0;width:100%;height:100%}
.screen__video{object-fit:contain;background:#000;display:none}
.screen__graffiti{object-fit:cover;opacity:.12;filter:brightness(.55) saturate(.85)}
.screen__blood{object-fit:cover;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{display:none}

.hud{position:absolute;inset:0;padding:16px 18px;display:flex;flex-direction:column;
  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)}

.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}

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

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

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;min-height:520px;max-height:calc(100vh - 140px);overflow:hidden}
.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{list-style:none;margin:0;padding:12px 14px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:2px}
.msg{padding:9px 6px;border-bottom:1px dashed #33201a;font-size:14.5px;color:#d7c7bd;
  max-height:240px;overflow:hidden;
  transition:max-height .45s ease,opacity .4s ease,transform .4s ease,margin .45s ease,padding .45s ease}
.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)}

/* ---------- 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:290px;
  background:linear-gradient(180deg,#241611,#160d0a);border:1px solid #5a160d;border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.7);overflow:hidden}
.settings[hidden]{display:none}
.settings__head{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}}