/* The Crawl — Live Feed skin. Self-contained; same "System" voice + palette
   language as the Arcade, Archive, Quest Log, and Prize Carousel. */
:root{
  --bg:#08050f;
  --bg2:#0e0a1c;
  --panel:#140d28;
  --panel-edge:#2a1d4d;
  --ink:#f3ecff;
  --muted:#9a8fc0;
  --gold:#ffce4a;
  --pink:#ff2e88;
  --cyan:#39d6ff;
  --ok:#56e39f;
  --danger:#ff5a5a;
  --shadow:0 8px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:"Space Mono",ui-monospace,monospace;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(57,214,255,.08), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,46,136,.07), transparent 60%),
    var(--bg);
  color:var(--ink);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:920px;margin:0 auto;padding:28px 18px 80px;}
a{color:var(--gold);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- header (admin) ---- */
header{margin-bottom:22px;}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);opacity:.85;}
h1{font-family:"Bungee",sans-serif;font-weight:400;color:var(--pink);
  font-size:clamp(28px,6vw,52px);line-height:1.05;margin:6px 0 8px;
  text-shadow:0 0 24px rgba(255,46,136,.35);}
.subline{color:var(--muted);font-size:13.5px;}
.subline b{color:var(--ink);}

/* ---- connection banner ---- */
.conn{position:fixed;top:0;left:0;right:0;z-index:60;text-align:center;
  background:var(--danger);color:#1a0008;font-weight:700;font-size:12.5px;
  letter-spacing:.06em;padding:7px;transform:translateY(-110%);transition:transform .25s;}
html.ws-down .conn{transform:translateY(0);}

/* =====================================================================
   PLAYER SCREEN — the held channel. Fullscreen; no page scroll.
   ===================================================================== */
body.screen{overflow:hidden;height:100vh;}

/* the broadcast frame */
#frame{position:fixed;inset:0;width:100%;height:100%;border:0;background:#000;
  display:none;}
body.screen.onair #frame{display:block;}

/* faint scanlines — broadcast feed texture (over standby only, never the frame) */
#standby::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
}

/* standby (OFF AIR) screen */
#standby{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:24px;gap:10px;}
body.screen.offair #standby{display:flex;}
#standby .bars{display:flex;width:min(420px,80vw);height:10px;border-radius:3px;overflow:hidden;
  opacity:.8;margin-bottom:18px;}
#standby .bars i{flex:1;}
#standby h1{font-size:clamp(40px,10vw,88px);margin:0;animation:offair 2.6s infinite steps(1);}
@keyframes offair{0%,92%,100%{opacity:1}94%{opacity:.35}96%{opacity:1}98%{opacity:.6}}
#standby .sub{color:var(--muted);font-size:14px;max-width:46ch;}
#standby .sub b{color:var(--ink);}
#standby .hold{margin-top:16px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);animation:holdpulse 1.6s infinite;}
@keyframes holdpulse{0%,100%{opacity:.9}50%{opacity:.3}}

/* LIVE pill — shows briefly on channel change, then fades out of the way */
#livepill{position:fixed;top:10px;right:12px;z-index:40;display:flex;align-items:center;gap:8px;
  background:rgba(8,5,15,.82);border:1px solid var(--panel-edge);border-radius:999px;
  padding:6px 14px;font-family:"Bungee",sans-serif;font-size:12px;letter-spacing:.1em;color:var(--pink);
  opacity:0;transition:opacity .4s;pointer-events:none;}
#livepill .dot{width:9px;height:9px;border-radius:50%;background:var(--pink);
  box-shadow:0 0 10px var(--pink);animation:holdpulse 1.4s infinite;}
#livepill.show{opacity:1;}

/* channel-change static burst */
#static{position:fixed;inset:0;z-index:45;pointer-events:none;opacity:0;background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 2px, rgba(0,0,0,.5) 2px 4px),
  repeating-linear-gradient(90deg, rgba(57,214,255,.06) 0 3px, rgba(255,46,136,.06) 3px 6px),
  #05030a;}
#static.burst{animation:staticburst .55s steps(6);}
@keyframes staticburst{0%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* NOW SHOWING toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:40;
  background:rgba(8,5,15,.88);border:1px solid var(--panel-edge);border-radius:12px;
  padding:10px 18px;box-shadow:var(--shadow);opacity:0;transition:opacity .35s,transform .35s;
  pointer-events:none;max-width:88vw;text-align:center;}
#toast.show{opacity:1;transform:translate(-50%,0);}
#toast .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);}
#toast .t{font-family:"Bungee",sans-serif;font-size:15px;color:var(--gold);line-height:1.25;}

/* =====================================================================
   shared form controls (admin)
   ===================================================================== */
button{font-family:"Space Mono",monospace;cursor:pointer;background:var(--panel);
  color:var(--ink);border:1px solid var(--panel-edge);border-radius:8px;padding:7px 12px;
  font-size:12.5px;transition:all .15s;}
button:hover{border-color:var(--cyan);}
button.primary{background:var(--gold);color:#241a00;border-color:var(--gold);font-weight:700;}
button.primary:hover{filter:brightness(1.08);}
button.stop{background:transparent;color:var(--danger);border-color:rgba(255,90,90,.4);}
button.stop:hover{border-color:var(--danger);}
input,select,textarea{font-family:"Space Mono",monospace;background:rgba(0,0,0,.4);
  border:1px solid var(--panel-edge);color:var(--ink);border-radius:8px;padding:8px;
  font-size:12.5px;width:100%;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cyan);}
textarea{min-height:60px;resize:vertical;line-height:1.5;}
label.chk{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);cursor:pointer;width:auto;}
label.chk input{width:auto;}