/* FOK TV - public broadcast styles */
:root{
  --bg:#0a0c10;
  --panel:#0f1318;
  --ink:#eef2f6;
  --muted:#8a94a3;
  --line:rgba(255,255,255,.08);
  --signal:#ff3b30;      /* on-air red */
  --signal-2:#ffd23f;    /* accent yellow */
  --glow:0 0 0 1px rgba(255,255,255,.04), 0 30px 80px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 800px at 70% -10%, #14191f 0%, var(--bg) 55%);
  color:var(--ink);
  font-family:'Barlow',system-ui,sans-serif;
  min-height:100%;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
.bg-grain{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* Topbar */
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;}
.brand{font-family:'Oswald',sans-serif;font-weight:700;font-size:26px;letter-spacing:.06em;display:flex;gap:6px}
.brand-mark{background:#fff;color:#0a0c10;padding:2px 9px;border-radius:4px}
.brand-mark.accent{background:var(--signal-2);color:#0a0c10}
.onair{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.12em;font-size:14px;
  display:flex;align-items:center;gap:8px;color:var(--muted);
  border:1px solid var(--line);padding:7px 12px;border-radius:999px}
.onair.live{color:#fff;border-color:rgba(255,59,48,.5)}
.onair .dot{width:9px;height:9px;border-radius:50%;background:#444}
.onair.live .dot{background:var(--signal);box-shadow:0 0 0 0 rgba(255,59,48,.7);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.6)}70%{box-shadow:0 0 0 10px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

/* Stage */
.stage-wrap{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:8px 22px 22px}
.stage{position:relative;width:100%;max-width:1100px;aspect-ratio:16/9;background:#000;
  border-radius:16px;overflow:hidden;box-shadow:var(--glow)}
#localVideo{width:100%;height:100%;object-fit:contain;background:#000;display:none}
#ytHost{position:absolute;inset:0;display:none}
#ytHost iframe,#ytHost>div{width:100%;height:100%;border:0;display:block}

/* Logo watermark (burned-in look) */
.logo{position:absolute;z-index:5;pointer-events:none;display:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.logo.pos-top-right{top:16px;right:18px}
.logo.pos-top-left{top:16px;left:18px}
.logo.pos-bottom-right{bottom:64px;right:18px}
.logo.pos-bottom-left{bottom:64px;left:18px}

/* Gate */
.gate{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%, rgba(15,19,24,.55), rgba(5,6,8,.92))}
.gate-btn{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.08em;font-size:18px;
  color:#0a0c10;background:var(--signal-2);border:0;padding:16px 28px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;gap:10px;transition:transform .15s, box-shadow .2s;
  box-shadow:0 12px 40px rgba(255,210,63,.25)}
.gate-btn:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(255,210,63,.35)}
.gate-dot{width:10px;height:10px;border-radius:50%;background:var(--signal);box-shadow:0 0 12px var(--signal)}
.gate-sub{color:var(--muted);font-size:13px;letter-spacing:.04em}

/* Lower third */
.lowerthird{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;gap:28px;
  padding:30px 20px 14px;background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  font-family:'Barlow',sans-serif;transition:opacity .4s;opacity:0}
.lowerthird.show{opacity:1}
.lt-label{display:block;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.18em;color:var(--signal-2)}
.lt-next .lt-label{color:var(--muted)}
.lt-title{font-size:16px;font-weight:600;color:#fff;display:block;margin-top:2px;max-width:46ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-next .lt-title{color:var(--muted);font-weight:500}

/* Offline */
.offline{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#070809}
.offline-icon{font-size:46px;color:#2a2f36}
.offline-text{font-family:'Oswald',sans-serif;letter-spacing:.04em;font-size:17px}
.offline-sub{color:var(--muted);font-size:13px}

/* Mute line */
.muteline{margin-top:14px;min-height:20px}
.mutebtn{font-family:'Oswald',sans-serif;letter-spacing:.06em;background:transparent;color:var(--ink);
  border:1px solid var(--line);padding:9px 18px;border-radius:999px;cursor:pointer}
.mutebtn:hover{border-color:var(--signal-2);color:var(--signal-2)}

/* Footer */
.footbar{position:relative;z-index:2;display:flex;gap:10px;align-items:center;justify-content:center;
  padding:16px;color:var(--muted);font-size:13px;letter-spacing:.03em;border-top:1px solid var(--line)}
.footbar .sep{opacity:.4}
.footbar .muted{color:var(--muted)}

@media (max-width:640px){
  .brand{font-size:21px}
  .lt-title{font-size:14px;max-width:24ch}
  .lowerthird{gap:16px}
  .stage-wrap{padding:6px 12px 16px}
}