:root {
  --btl-bg: #000;
  --btl-fg: #fff;
  --btl-accent: #e50914;
  --btl-radius: 12px;
  --btl-control-bg: rgba(0, 0, 0, 0.55);
  --btl-banner-bg: #0b0b0f;
  --btl-banner-fg: #e8e8ea;
  --btl-muted: #9aa0a6;
  --btl-chat-w: 340px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.btlive { width: 100%; max-width: 100%; color: var(--btl-fg); }

/* ---- Layout: player + chat ---- */
.btlive__main { display: flex; gap: 10px; align-items: stretch; }
.btlive__stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;                 /* allow the player to shrink when chat opens */
  aspect-ratio: 16 / 9;
  background: var(--btl-bg);
  overflow: hidden;
  border-radius: var(--btl-radius);
}

/* ---- Players / layers ---- */
.layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: #000; opacity: 0;
  transition: opacity 320ms ease; pointer-events: none;
}
.layer.is-active { opacity: 1; }
#yt-player iframe { width: 100%; height: 100%; }
/* A/B Cloudflare buffers crossfade inside the CF layer */
.cf-buf {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; opacity: 0;
  transition: opacity 350ms ease;
}
.cf-buf.is-front { opacity: 1; }

/* ---- LIVE badge ---- */
.btlive__badge {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.5); color: #fff;
}
.btlive__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--btl-accent); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ---- Controls ---- */
.btlive__controls {
  position: absolute; right: 10px; bottom: 10px; z-index: 6;
  display: flex; gap: 8px; opacity: 0; transition: opacity .25s ease;
}
.btlive__stage:hover .btlive__controls,
.btlive__stage:focus-within .btlive__controls,
.btlive__controls.is-pinned { opacity: 1; }
.ctl {
  min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--btl-control-bg); color: #fff; font-size: 15px; font-weight: 600; line-height: 40px;
  backdrop-filter: blur(4px);
}
.ctl:hover { background: rgba(0,0,0,.75); }
.ctl.is-on { background: var(--btl-accent); }

/* ---- Dev-only controls ---- */
.btlive__dev { position: absolute; top: 10px; right: 10px; z-index: 13; display: flex; gap: 6px; }
.btlive__dev-btn {
  border: 1px dashed rgba(255,255,255,.6); border-radius: 8px; cursor: pointer;
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; padding: 6px 10px; backdrop-filter: blur(4px);
}
.btlive__dev-btn:hover { background: rgba(0,0,0,.85); }
.btlive__dev-btn:disabled { opacity: .5; cursor: default; }

/* ---- Caption menu ---- */
.cc-menu {
  position: absolute; right: 10px; bottom: 58px; z-index: 12;
  min-width: 190px; max-height: 260px; overflow-y: auto;
  background: rgba(15,15,20,.96); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 6px; backdrop-filter: blur(6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.cc-menu[hidden] { display: none; }
.cc-menu h5 { margin: 4px 8px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--btl-muted); }
.cc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; border: 0; background: none; color: #fff;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px;
}
.cc-item:hover { background: rgba(255,255,255,.08); }
.cc-item.is-sel { color: var(--btl-accent); font-weight: 700; }
.cc-item.is-sel::after { content: "✓"; }
.cc-empty { padding: 10px; color: var(--btl-muted); font-size: 13px; }

/* ---- Companion status strip (this device, while the movie is on the TV) ---- */
.btlive__companion {
  position: absolute; top: 0; left: 0; right: 0; z-index: 16;      /* above chat */
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: rgba(10,10,14,.92); backdrop-filter: blur(6px); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px;
}
.btlive__companion[hidden] { display: none; }
.companion__icon { font-size: 18px; line-height: 1; }
.companion__text { flex: 1; min-width: 0; font-weight: 700; line-height: 1.2; }
.companion__show { display: block; font-weight: 400; font-size: 12px; color: var(--btl-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.companion__stop {
  border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff;
  border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.companion__stop:hover { background: rgba(255,255,255,.12); }
/* Dim the parked local video so it reads as "on the TV", not frozen here. */
.btlive.is-companion .btlive__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 13; background: rgba(6,6,9,.78); pointer-events: none;
}

/* ---- Gate / nudge ---- */
.btlive__gate {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(0,0,0,.35), rgba(0,0,0,.75));
}
.btlive__gate.is-hidden { display: none; }
.gate-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--btl-accent); color: #fff; font-size: 18px; font-weight: 700; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.gate-icon { font-size: 16px; }
.unmute-nudge {
  position: absolute; left: 12px; bottom: 12px; z-index: 8; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(0,0,0,.7); color: #fff; padding: 10px 14px; font-weight: 600;
}
.unmute-nudge[hidden] { display: none; }

/* ---- Chat: SIDE PANEL on desktop ---- */
.btlive__chat {
  flex: 0 0 var(--btl-chat-w);
  display: flex; flex-direction: column;
  background: var(--btl-banner-bg);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--btl-radius);
  overflow: hidden; min-height: 0;
}
.btlive__chat[hidden] { display: none; }
.chat__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08); }
.chat__close { background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.chat__log { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.chat__msg { line-height: 1.35; word-break: break-word; }
.chat__msg .who { font-weight: 700; color: var(--btl-accent); margin-right: 6px; }
.chat__form { display: grid; grid-template-columns: 92px 1fr auto; gap: 6px; padding: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.chat__name, .chat__text { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; border-radius: 8px; padding: 8px 10px; font-size: 14px; min-width: 0; }
.chat__send { border: 0; border-radius: 8px; background: var(--btl-accent); color: #fff; font-weight: 700; padding: 0 12px; cursor: pointer; }

/* ---- Chat: OVERLAY on mobile ---- */
@media (max-width: 768px) {
  .btlive__main { display: block; position: relative; }
  .btlive__chat {
    position: absolute; inset: 0; z-index: 15;
    flex: none; width: 100%; height: 100%; border-radius: var(--btl-radius);
    background: rgba(10,10,14,.9); backdrop-filter: blur(8px);
  }
  .btlive__controls { opacity: 1; }        /* touch: always visible */
  .ctl { min-width: 44px; height: 44px; line-height: 44px; }
}

/* ---- Chat in FULLSCREEN: side frame (video shrinks), NOT an overlay ---- */
.btlive__main:fullscreen,
.btlive__main:-webkit-full-screen { display: flex; width: 100vw; height: 100vh; background: #000; align-items: stretch; gap: 0; }
.btlive__main:fullscreen .btlive__stage,
.btlive__main:-webkit-full-screen .btlive__stage { flex: 1 1 auto; height: 100%; aspect-ratio: auto; border-radius: 0; }
.btlive__main:fullscreen .btlive__chat,
.btlive__main:-webkit-full-screen .btlive__chat { position: static; flex: 0 0 360px; height: 100%; border-radius: 0; background: var(--btl-banner-bg); backdrop-filter: none; }
/* keep the control toggles (mute / CC / cast / fullscreen) visible in fullscreen */
.btlive__main:fullscreen .btlive__controls,
.btlive__main:-webkit-full-screen .btlive__controls { opacity: 1; }


/* ---- Banner ---- */
.btlive__banner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px;
  margin-top: 10px; border-radius: var(--btl-radius); overflow: hidden; background: rgba(255,255,255,.06);
}
.slot { background: var(--btl-banner-bg); color: var(--btl-banner-fg); padding: 12px 16px; }
.slot h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--btl-muted); }
.slot--now h4 { color: var(--btl-accent); }
.slot__body { font-size: 15px; font-weight: 600; line-height: 1.3; }
.slot__body .sub { display: block; font-size: 12px; font-weight: 400; color: var(--btl-muted); margin-top: 2px; }
.slot__body .time { font-variant-numeric: tabular-nums; color: var(--btl-muted); font-weight: 400; }

@media (max-width: 640px) { .btlive__banner { grid-template-columns: 1fr; } }