*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#000;overflow:hidden;font-family:'Roboto','Helvetica Neue',Arial,sans-serif;color:#fff;-webkit-tap-highlight-color:transparent}

:root{
  --ticker-h: 24px;
  --botbar-h: 36px;
  --cluster-gap: 0px;
  --cluster-push: 22px;
}

#stage{
  position:relative;
  width:100vw;height:100vh;
  background:#000;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

#videoBox{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:100vh;
  background:#000;
  overflow:hidden;
}
@supports not (aspect-ratio:16/9){
  #videoBox{height:56.25vw}
}

#stage.fullscreen #videoBox{
  width:100vw;
  height:100vh;
  aspect-ratio:auto;
  max-height:none;
}

#ytPlayer{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
}
#imageMedia{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:2;
  display:none;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
#imageMedia.active{display:block}

#shield{
  position:absolute;inset:0;z-index:3;
  background:transparent;cursor:pointer;
}

/* ── CONNECTING ── */
#connectOverlay{
  position:absolute;inset:0;z-index:60;
  background:#000;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:20px;
  opacity:1;transition:opacity .5s ease;
}
#connectOverlay.hidden{opacity:0;pointer-events:none}
.conn-spinner{
  width:44px;height:44px;border-radius:50%;
  border:3px solid rgba(255,255,255,.08);
  border-top-color:#1a73e8;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.conn-text{font-size:15px;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.75);text-align:center;padding:0 20px}
.conn-sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.25)}
.conn-bar{width:180px;height:2px;background:rgba(255,255,255,.06);border-radius:1px;overflow:hidden;margin-top:6px}
.conn-bar-fill{height:100%;width:0%;background:#1a73e8;transition:width .1s linear}

/* ── NETWORK ── */
#networkOverlay{
  position:absolute;inset:0;z-index:58;
  background:rgba(0,0,0,.88);
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  gap:16px;padding:0 24px;text-align:center;
}
#networkOverlay.active{display:flex}
.net-icon{
  width:56px;height:56px;border-radius:50%;
  background:rgba(217,48,37,.15);
  border:2px solid #d93025;
  display:flex;align-items:center;justify-content:center;
  color:#d93025;
}
.net-icon svg{width:26px;height:26px}
.net-title{font-size:18px;font-weight:700;color:#fff;letter-spacing:.02em}
.net-msg{font-size:13px;color:rgba(255,255,255,.7);max-width:420px;line-height:1.55}
.net-pill{
  margin-top:8px;
  background:rgba(26,115,232,.15);
  border:1px solid #1a73e8;
  color:#8ab4f8;
  font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:7px 14px;border-radius:20px;
}

/* ── BUFFER ── */
#bufferOverlay{
  position:absolute;inset:0;z-index:55;
  display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;
  background:rgba(0,0,0,.35);pointer-events:none;
}
#bufferOverlay.active{display:flex}
.buffer-spinner{
  width:38px;height:38px;border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:#1a73e8;
  animation:spin .9s linear infinite;
}
.buffer-text{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* ── PURE BLACK BARS ── */
#topBar, #botBar{
  position:absolute;left:0;right:0;
  background:#000;
  z-index:10;
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;
}
#topBar{top:0;height:56px}
#botBar{bottom:0;height:var(--botbar-h)}
#topBar.visible, #botBar.visible{opacity:1}

/* ── ALWAYS-ON OVERLAY ── */
#alwaysOverlay{
  position:absolute;inset:0;z-index:20;
  pointer-events:none;
}

.always-top{
  position:absolute;top:0;left:0;right:0;
  height:76px;
  display:flex;align-items:center;
  padding:0 20px;gap:14px;
}
#brandLogo{
  width:45px;height:45px;border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
.brand{font-size:15px;font-weight:700;letter-spacing:.06em;color:#fff}
.live-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:#d93025;color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.08em;
  padding:3px 8px;border-radius:3px;margin-left:4px;
}
.live-badge::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:#fff;animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.top-spacer{flex:1}
.clock{
  font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.95);
  letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  white-space:nowrap;
}
.clock .date-part{color:rgba(255,255,255,.7);display:none;margin-right:8px}
.clock.show-date .date-part{display:inline}

/* ── LOWER-THIRD ── */
#broadcast{
  position:absolute;
  left:18px;
  bottom: calc(var(--botbar-h) + var(--ticker-h) + var(--cluster-gap) - var(--cluster-push));
  width:80%;
  max-width:80%;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));
  pointer-events:none;
}
.bn-badge{
  display:inline-block;
  background:#D32F2F;
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:5px 12px 4px;
  border-radius:2px 2px 0 0;
  position:relative;
  z-index:2;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
}
.bn-main{
  position:relative;
  display:flex;
  align-items:stretch;
  background:#FFFFFF;
  color:#111;
  border-left:6px solid #D32F2F;
  min-height:34px;
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.bn-text{
  flex:1;display:flex;align-items:center;gap:8px;
  padding:8px 14px 8px 12px;min-width:0;overflow:hidden;
}
.bn-now{
  color:#111;font-size:13px;font-weight:900;
  letter-spacing:.02em;flex-shrink:0;
}
.bn-headline{
  color:#1a1a1a;font-size:13px;font-weight:700;
  letter-spacing:.01em;text-transform:uppercase;
  line-height:1.25;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.bn-logo{
  display:flex;align-items:center;
  padding:0 14px;background:#111;color:#fff;
  font-size:11px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;flex-shrink:0;
  border-left:6px solid #D32F2F;
}

/* ── FULL-WIDTH TICKER ── */
#fullTicker{
  position:absolute;
  left:18px;
  right:0;
  bottom: calc(var(--botbar-h) - var(--cluster-push));
  height: var(--ticker-h);
  background:rgba(15,15,15,.95);
  overflow:hidden;
  white-space:nowrap;
  display:flex;
  align-items:center;
  pointer-events:none;
  z-index:20;
  border-top:1px solid rgba(255,255,255,.06);
}
#fullTicker::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:6px;
  background:#D32F2F;
}
.bn-ticker-track{
  display:inline-flex;
  animation:bnScroll 80s linear infinite;
  padding-left:100%;
  will-change:transform;
}
.bn-ticker-item{
  display:inline-block;padding:0 22px 0 0;
  font-size:11px;font-weight:500;letter-spacing:.04em;
  color:rgba(255,255,255,.92);
}
.bn-ticker-sep{
  display:inline-block;color:#D32F2F;
  padding:0 14px 0 0;font-weight:900;font-size:11px;
}
@keyframes bnScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}

/* ── CONTROL CLUSTER ── */
#controlCluster{
  position:absolute;
  left:18px;
  bottom: calc(var(--botbar-h) + 8px);
  z-index:30;
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;
  background:rgba(0,0,0,.85);
  border-radius:6px;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
#controlCluster.visible{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
.ctrl-ic{
  width:32px;height:32px;background:transparent;border:none;
  color:#fff;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;flex-shrink:0;
}
.ctrl-ic:hover{background:rgba(255,255,255,.12)}
.ctrl-ic svg{width:16px;height:16px}

#muteBtn .icon-unmuted,#muteBtn .icon-muted{display:none}
#muteBtn.unmuted .icon-unmuted{display:block}
#muteBtn.muted   .icon-muted  {display:block}

.quality-btn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:#fff;font-size:10px;font-weight:600;
  padding:5px 9px;border-radius:4px;cursor:pointer;letter-spacing:.04em;
  font-family:inherit;transition:all .15s;
}
.quality-btn:hover{background:rgba(26,115,232,.25);border-color:#1a73e8}

.quality-popup{
  position:absolute;bottom:50px;left:0;
  background:#fff;border-radius:6px;
  box-shadow:0 8px 28px rgba(0,0,0,.55);
  padding:5px 0;min-width:96px;
  display:none;flex-direction:column;z-index:70;
}
.quality-popup.open{display:flex}
.quality-popup-item{
  padding:7px 14px;font-size:11px;font-weight:500;
  color:#3c4043;cursor:pointer;text-align:center;transition:background .1s;
}
.quality-popup-item:hover{background:#f1f3f4}
.quality-popup-item.active{color:#1a73e8;font-weight:700}

/* ── MOBILE ── */
@media (max-width:600px){
  :root{ --ticker-h: 22px; --botbar-h: 32px; --cluster-push: 14px; }
  #brandLogo{width:38px;height:38px}
  .always-top{height:68px;padding:0 14px}
  .brand{font-size:14px}
  .clock{font-size:12px}
  #broadcast{ width:86%; left:12px }
  .bn-headline{ font-size:12px }
  .bn-now{ font-size:12px }
  .bn-badge{ font-size:10px; padding:4px 10px 3px }
  .bn-logo{ font-size:10px; padding:0 10px }
  .bn-ticker-item{ font-size:10px }
  #controlCluster{ left:12px }
  #fullTicker{ left:12px }
}