/* oc-terminal.css — Offline Comedy shared night terminal design system
   Link before inline <style> in every HTML page. Inline rules override these. */

:root {
  --green: #00ff41;
  --green-dim: #00b32c;
  --green-dark: #003b0f;
  --yellow: #C4A840;
  --red: #ff4444;
  --bg: #050505;
  --card-bg: #050505;
  --input-bg: #0a0a0a;
  --placeholder: #1c4827;
  --scanline: rgba(0,255,65,.025);
  --green-glow: rgba(0,255,65,.18);
  --tile-bg: rgba(0,255,65,.02);
  --tile-bg-hover: rgba(0,255,65,.05);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body::before { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg,var(--scanline) 0px,var(--scanline) 1px,transparent 1px,transparent 2px); pointer-events:none; z-index:999; }

.terminal-bar { background:var(--green-dark); border-bottom:1px solid var(--green-dim); padding:8px 14px; display:flex; align-items:center; gap:10px; }
.dots { display:flex; gap:6px; }
.dot { width:11px; height:11px; border-radius:50%; background:var(--green-dim); opacity:.45; }
.dot-close { cursor:pointer; transition:background .15s, opacity .15s; }
.dot-close:hover { background:var(--red); opacity:1; }
.terminal-title { flex:1; text-align:center; font-size:.68rem; color:var(--green-dim); letter-spacing:.18em; }

.ln { font-size:.82rem; line-height:1.65; }
.dim { color:var(--green-dim); }
.bright { color:var(--green); text-shadow:0 0 8px var(--green-glow); }

.btn { background:transparent; border:1px solid var(--green); color:var(--green); font-family:inherit; font-size:.8rem; padding:.55rem 1rem; cursor:pointer; letter-spacing:.15em; text-transform:uppercase; width:100%; transition:background .18s, color .18s; }
.btn:hover { background:var(--green); color:var(--bg); }

.input-pfx { padding:.5rem .65rem; color:var(--green-dim); font-size:.85rem; }

.flash { font-size:.76rem; padding:.5rem .7rem; border:1px solid; margin:.5rem 0; display:none; }
.flash.show { display:block; }
.flash.ok { border-color:var(--green); color:var(--green); }
.flash.err { border-color:var(--red); color:var(--red); }

.cur { display:inline-block; width:8px; height:.9em; background:var(--green); vertical-align:text-bottom; animation:blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.btn.ghost { border-color:var(--green-dark); color:var(--green-dim); background:transparent; }
.btn.ghost:hover { background:transparent; color:var(--red); border-color:var(--red); }

.section-label { font-size:.72rem; color:var(--green-dim); letter-spacing:.15em; margin:1rem 0 .4rem; text-transform:uppercase; }
.sep { border:none; border-top:1px solid var(--green-dark); margin:1rem 0; }
.back-link { display:inline-block; margin-top:1.2rem; font-size:.75rem; color:var(--green-dim); text-decoration:none; letter-spacing:.1em; }
.back-link:hover { color:var(--green); }

/* Pixel run-cycle banner (offline-run-banner.js) — reserves height via CSS so the
   canvas never causes layout shift while it sizes itself. */
.run-banner { position:relative; width:100%; height:150px; background:#000; overflow:hidden; contain:layout paint; }
@media (min-width:768px) { .run-banner { height:200px; } }

.run-banner__canvas { position:absolute; inset:0; display:block; }

.run-banner__hud { position:absolute; z-index:2; font-family:'Courier New', monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green); text-shadow:0 0 6px var(--green-glow); pointer-events:none; white-space:nowrap; }
.run-banner__hud--tl { top:8px; left:10px; }
.run-banner__hud--tr { top:8px; right:10px; color:var(--red); text-shadow:0 0 6px rgba(255,68,68,.35); }
.run-banner__hud--bl { bottom:8px; left:10px; opacity:.7; }

/* White-silhouette treatment matches #zone-logo's mask on the comedy-show
   img-zone (brightness(0) invert(1) recolors any opaque pixel pure white,
   leaving transparency alone) so the offline mark reads the same way Paul
   Elia's page does. Only applied while the offline mark itself is showing
   (--rb-mono set via .run-banner__logo--mono, toggled in JS) — a sponsor
   logo in the rotation keeps its own brand colors, just with the same
   chromatic-split glow. */
.run-banner__logo { --rb-mono: ; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:192%; max-height:288px; width:auto; z-index:3; pointer-events:none; filter:var(--rb-mono) drop-shadow(0 0 10px var(--green-glow)); opacity:1; }
.run-banner__logo--mono { --rb-mono: brightness(0) invert(1); }

.run-banner__logo.is-glitching { animation:oc-run-glitch .42s steps(1, end); }

@keyframes oc-run-glitch {
  0%   { clip-path:inset(0 0 0 0); transform:translate(-50%,-50%); filter:var(--rb-mono) drop-shadow(0 0 10px var(--green-glow)); opacity:1; }
  8%   { clip-path:inset(10% 0 60% 0); transform:translate(calc(-50% - 3px), calc(-50% + 1px)); filter:var(--rb-mono) drop-shadow(-2px 0 0 var(--red)) drop-shadow(2px 0 0 var(--green)); }
  16%  { clip-path:inset(40% 0 10% 0); transform:translate(calc(-50% + 2px), calc(-50% - 2px)); opacity:.6; }
  24%  { clip-path:inset(0 0 0 0); transform:translate(-50%,-50%); filter:var(--rb-mono) drop-shadow(2px 0 0 #00e5ff) drop-shadow(-2px 0 0 var(--yellow)); opacity:1; }
  32%  { clip-path:inset(65% 0 5% 0); transform:translate(calc(-50% + 4px), -50%); opacity:.4; }
  40%  { clip-path:inset(5% 0 45% 0); transform:translate(calc(-50% - 1px), calc(-50% + 3px)); filter:var(--rb-mono) drop-shadow(-2px 0 0 #00e5ff) drop-shadow(2px 0 0 var(--yellow)); }
  48%  { clip-path:inset(0 0 0 0); opacity:.8; transform:translate(-50%,-50%); }
  60%  { clip-path:inset(20% 0 30% 0); transform:translate(calc(-50% + 2px), calc(-50% - 1px)); filter:var(--rb-mono) drop-shadow(-1px 0 0 var(--red)) drop-shadow(1px 0 0 var(--green)); }
  72%  { clip-path:inset(0 0 0 0); opacity:1; transform:translate(-50%,-50%); filter:var(--rb-mono) drop-shadow(0 0 10px var(--green-glow)); }
  100% { clip-path:inset(0 0 0 0); transform:translate(-50%,-50%); filter:var(--rb-mono) drop-shadow(0 0 10px var(--green-glow)); opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
  .run-banner__logo.is-glitching { animation:none; }
}