/* ============================================================
   GOONTHEATRE — BRUTALIST CINEMA
   Borrowed from the Goonplex brutalist theme (custom-theme.css /
   landing.html), dark variant (v-B):
     bg #0c0c0d · panel #141416 · ink #f4f4f5 · accent #ff2d55
     line #2a2a2e · label #71717a
     body font: 'Courier New', monospace · headings: -apple-system 900
     borders: 2px solid, NO border-radius, flat high-contrast
     buttons: solid accent, uppercase, letter-spaced, hover -> ink
   ============================================================ */

:root{
  --bg:#0c0c0d;        /* page */
  --panel:#141416;     /* surfaces */
  --panel2:#19191c;    /* recessed */
  --ink:#f4f4f5;       /* text */
  --muted:#a1a1aa;     /* secondary text */
  --label:#71717a;     /* uppercase labels */
  --line:#2a2a2e;      /* hairline borders */
  --hard:#000;         /* hard structural border */
  --accent:#ff2d55;    /* red */
  --accent-ink:#fff;
  --live:#ff2d55;
}

*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{ -webkit-text-size-adjust:100% }
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Courier New',Courier,monospace;
  -webkit-font-smoothing:antialiased;
  font-size:14px; line-height:1.55;
}
h1,h2,h3{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:900; letter-spacing:-0.03em }
.hidden{ display:none !important }
.accent{ color:var(--accent) }
::selection{ background:var(--accent); color:#fff }
a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--ink) }
::-webkit-scrollbar{ width:9px; height:9px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:#3a3a40; border:1px solid var(--hard) }
::-webkit-scrollbar-thumb:hover{ background:var(--accent) }
::placeholder{ color:#6b6b73; text-transform:uppercase; letter-spacing:.05em; opacity:1 }

/* ── shared brutalist primitives ── */
.btn-flat{
  appearance:none; border:2px solid var(--accent);
  background:var(--accent); color:var(--accent-ink);
  font-family:'Courier New',monospace; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; font-size:12px;
  padding:11px 18px; cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.btn-flat:hover{ background:var(--ink); color:#000; border-color:var(--ink) }
.btn-flat:disabled{ background:transparent; color:var(--label); border-color:var(--line); cursor:default }
.strip-label{ font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--label); font-weight:700 }

/* ── AGE GATE ── */
#agegate{
  position:fixed; inset:0; z-index:9999; background:#0a0a0b; color:var(--ink);
  display:flex; align-items:center; justify-content:center; padding:2em; overflow:auto;
}
.ag-inner{ width:100%; max-width:540px; text-align:center }
.ag-brand{ font-family:'Courier New',monospace; font-weight:700; letter-spacing:.35em;
  text-transform:uppercase; font-size:13px; color:var(--muted); margin-bottom:1.6em }
#agegate h2{ font-size:clamp(2.4rem,11vw,3.4em); line-height:.95; text-transform:uppercase; margin-bottom:.55em }
#agegate p{ max-width:480px; margin:0 auto 2em; color:var(--muted); line-height:1.7; font-size:15px }
#agegate strong{ color:var(--ink) }
.ag-buttons{ display:flex; gap:1em; flex-wrap:wrap; justify-content:center; max-width:480px; margin:0 auto }
.ag-btn{ border:none; cursor:pointer; font-family:'Courier New',monospace; font-weight:700;
  font-size:15px; padding:17px 34px; text-transform:uppercase; letter-spacing:.08em;
  transition:background .15s,color .15s; text-decoration:none; display:inline-block }
.ag-yes{ background:var(--accent); color:#fff }
.ag-yes:hover{ background:var(--ink); color:#000 }
.ag-no{ background:transparent; color:var(--label); border:2px solid #3a3a40 }
.ag-no:hover{ color:var(--ink); border-color:var(--ink) }
.ag-fine{ margin-top:2.4em; font-size:10px; color:#555; text-transform:uppercase; letter-spacing:.15em; line-height:1.9 }

/* ── APP SHELL ── */
#app{ height:100%; display:flex; flex-direction:column }
#topbar{
  flex:0 0 auto; height:50px; display:flex; align-items:center; gap:1.4em;
  padding:0 18px; background:#000; border-bottom:2px solid var(--hard);
}
.brand{ font-family:'Courier New',monospace; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; font-size:14px; color:var(--ink) }
.bar-mid{ font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--label);
  flex:1; text-align:center }
.pill{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink);
  border:2px solid var(--accent); padding:5px 12px; white-space:nowrap }
.pill #viewers{ color:var(--accent); font-family:-apple-system,sans-serif; font-weight:900; font-size:13px }
.pill .dot{ width:8px; height:8px; background:var(--live);
  box-shadow:0 0 0 0 var(--live); animation:pulse 1.8s infinite }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,45,85,.55) }
  70%{ box-shadow:0 0 0 8px rgba(255,45,85,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,45,85,0) }
}

/* ── STAGE LAYOUT ── */
#stage{ flex:1; min-height:0; display:flex; flex-direction:column; gap:0; overflow:auto }
#screenCol{ display:flex; flex-direction:column }

/* SCREEN */
#screenWrap{ position:relative; background:#000; aspect-ratio:16/9; border-bottom:2px solid var(--hard) }
#screen{ width:100%; height:100%; object-fit:contain; background:#000; display:block }
.overlay-tag{ position:absolute; top:10px; left:10px; background:#000; border:2px solid var(--line);
  color:var(--accent); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.15em;
  padding:4px 9px; font-family:'Courier New',monospace }
.overlay-tag.bl{ top:auto; bottom:10px; color:var(--muted); border-color:var(--line) }
.unmute{ position:absolute; bottom:10px; right:10px; background:var(--accent); border:2px solid var(--accent);
  color:#fff; font-family:'Courier New',monospace; font-weight:700; font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; padding:7px 12px; cursor:pointer; transition:background .15s,color .15s }
.unmute:hover{ background:#fff; color:#000; border-color:#fff }
.unmute.on{ background:#000; color:var(--muted); border-color:var(--line) }

/* CAM FILMSTRIP */
#camStrip{ border-bottom:2px solid var(--hard); background:var(--panel) }
.camStrip-head{ display:flex; align-items:center; gap:14px; padding:9px 14px; border-bottom:2px solid var(--hard) }
.camStrip-head .strip-count{ font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); font-weight:700 }
.camStrip-head .btn-flat{ margin-left:auto; padding:8px 14px }
#camView{ position:relative; background:#000; min-height:150px }

/* Jitsi iframe re-skinned: it lives as a bare tile surface inside our frame.
   The external_api strips its own chrome via config; we frame + clip here. */
#camView iframe{
  width:100% !important; height:34vh !important; min-height:200px; max-height:46vh;
  border:0 !important; display:block; background:#000;
}
.cam-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; min-height:150px; padding:24px; text-align:center;
  color:var(--label); font-size:11px; text-transform:uppercase; letter-spacing:.18em; font-weight:700 }
.cam-placeholder .ph-sub{ text-transform:none; letter-spacing:0; color:#5a5a62; font-weight:400;
  font-size:12px; max-width:360px; line-height:1.6 }
#camView.live .cam-placeholder{ display:none }

/* CHAT */
#chat{ display:flex; flex-direction:column; background:var(--panel); min-height:240px }
.chat-head{ padding:9px 14px; border-bottom:2px solid var(--hard); background:#000 }
.chatlog{ flex:1; min-height:0; overflow:auto; padding:12px 14px; display:flex; flex-direction:column; gap:9px }
.cmsg{ font-size:13px; line-height:1.5; word-break:break-word }
.cmsg .nm{ color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-right:8px }
.cmsg.sys{ color:var(--label); font-style:italic; font-size:12px }
.chatform{ display:flex; gap:0; border-top:2px solid var(--hard) }
.chatform input{ flex:1; background:var(--panel2); border:none; border-right:2px solid var(--hard);
  color:var(--ink); padding:13px; font-size:14px; font-family:'Courier New',monospace }
.chatform input:focus{ outline:none; background:#202024 }
.chatform .send{ border:none; border-radius:0 }

/* ── DESKTOP: cinema on the left, chat rail on the right ── */
@media(min-width:880px){
  #stage{ flex-direction:row; overflow:hidden }
  #screenCol{ flex:1; min-width:0; overflow:auto; border-right:2px solid var(--hard) }
  #screenWrap{ aspect-ratio:auto; height:min(56vw,calc(100vh - 280px)); min-height:300px }
  #camView iframe{ height:30vh !important; max-height:38vh }
  #camStrip{ border-bottom:none }
  #chat{ flex:0 0 340px; max-width:340px; min-height:0 }
}

@media(max-width:520px){
  .bar-mid{ display:none }
  #topbar{ gap:0; justify-content:space-between }
  .ag-buttons{ flex-direction:column }
  .ag-btn{ width:100% }
  .camStrip-head{ flex-wrap:wrap }
  .camStrip-head .btn-flat{ margin-left:0; width:100% }
}