/* The Broadcast (feat/videos): the video island's episodes terminal --
   since 2026-08-08 the no-WebGL fallback skin only (the flying path plays
   in-world, js/broadcaststage.js; its former bottom-left chip is gone and
   the CERTIFICATE chip owns that slot, css/cert.css). The overlay sits at
   z-index 90 -- the same modal tier as .tx (source order decides if both
   ever coexist, which the phase guards in js/broadcast.js prevent anyway).
   Frame language follows the HUD panel (corner brackets, green hairline,
   color-mix card), the scanline/phosphor treatment follows #egg-log, and
   the player chrome is the HUD cta voice -- a native <video> wearing the
   site's own skin. */

/* ---- the terminal ------------------------------------------------------- */

.bx {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--believe-bg, #050603) 88%, transparent);
  backdrop-filter: blur(2px);
  font-family: "Space Mono", "Courier New", monospace;
  opacity: 0;
  transition: opacity 300ms ease;
}

.bx.is-open { opacity: 1; }
.bx[hidden] { display: none; }

.bx__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: min(860px, 94vw);
  max-height: min(92vh, 960px);
  padding: 1.4rem 1.5rem 1rem;
  border: 1px solid var(--believe-green, #b8d62e);
  background: var(--believe-bg, #050603);
  background: color-mix(in srgb, var(--believe-bg, #050603) 88%, var(--believe-green, #b8d62e));
  box-shadow: 0 0 36px rgba(184, 214, 46, 0.14), inset 0 0 26px rgba(184, 214, 46, 0.05);
  overflow-y: auto;
  scrollbar-width: none; /* site law: content scrolls, scrollbars never show */
}

.bx__frame::-webkit-scrollbar { display: none; }

/* Corner brackets -- the HUD reticle, own keyframe name per house rule. */
.bx__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  animation: bxCornerDraw 340ms ease-out;
}

@keyframes bxCornerDraw {
  from { width: 0; height: 0; }
}

.bx__corner--tl { top: -1px; left: -1px; border-top: 1px solid var(--believe-green, #b8d62e); border-left: 1px solid var(--believe-green, #b8d62e); }
.bx__corner--tr { top: -1px; right: -1px; border-top: 1px solid var(--believe-green, #b8d62e); border-right: 1px solid var(--believe-green, #b8d62e); }
.bx__corner--bl { bottom: -1px; left: -1px; border-bottom: 1px solid var(--believe-green, #b8d62e); border-left: 1px solid var(--believe-green, #b8d62e); }
.bx__corner--br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--believe-green, #b8d62e); border-right: 1px solid var(--believe-green, #b8d62e); }

.bx__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--believe-green, #b8d62e) 35%, transparent);
}

.bx__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--believe-bright, #d4f24b);
}

.bx__sub {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--believe-grey, #6a6f5e);
}

.bx__countdown {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--believe-green, #b8d62e);
  min-height: 1em; /* reserve the line so the list never jumps */
}

.bx__close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--believe-grey, #6a6f5e);
  background: none;
  color: var(--believe-grey, #6a6f5e);
  font: 700 0.58rem/1 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.15em;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 120ms ease, border-color 120ms ease;
}

.bx__close:hover,
.bx__close:focus-visible {
  color: var(--believe-green, #b8d62e);
  border-color: var(--believe-green, #b8d62e);
}

/* ---- the player ---------------------------------------------------------- */

.bx__player {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.bx__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Height-capped 16:9: on short viewports the stage shrinks (centered)
     instead of shoving the episode cards below the fold. */
  width: min(100%, calc(52vh * 16 / 9));
  margin: 0 auto;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--believe-green, #b8d62e) 35%, transparent);
}

.bx__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

/* CRT pass over the footage -- #egg-log's scanline recipe, barely-there so
   it reads as house grain, not damage. */
.bx__scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 34px rgba(5, 6, 3, 0.55);
}

.bx__bigplay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--believe-green, #b8d62e);
  border-radius: 50%;
  background: color-mix(in srgb, var(--believe-bg, #050603) 62%, transparent);
  box-shadow: 0 0 24px rgba(184, 214, 46, 0.28);
  cursor: pointer;
  transition: opacity 180ms ease, box-shadow 180ms ease;
}

.bx__bigplay:hover,
.bx__bigplay:focus-visible {
  box-shadow: 0 0 34px rgba(212, 242, 75, 0.5);
  outline: none;
}

.bx__bigplay-tri {
  display: block;
  margin-left: 5px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--believe-bright, #d4f24b);
}

.bx__player.is-playing .bx__bigplay {
  opacity: 0;
  pointer-events: none;
}

.bx__controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.1rem 0;
}

.bx__ctrl {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--believe-green, #b8d62e);
  background: none;
  color: var(--believe-green, #b8d62e);
  font: 700 0.6rem/1 "Space Mono", "Courier New", monospace;
  letter-spacing: 0.12em;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.bx__ctrl:hover,
.bx__ctrl:focus-visible {
  color: var(--believe-bg, #050603);
  background: var(--believe-green, #b8d62e);
  outline: none;
}

.bx__ctrl--play { min-width: 4.6rem; } /* PLAY <-> PAUSE without layout shift */

.bx__time {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--believe-grey, #6a6f5e);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The timeline: the HUD track's thin line, horizontal. --bx-fill is written
   per-tick by js/broadcast.js. */
.bx__seek {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 60px;
  height: 2px;
  margin: 0;
  background: linear-gradient(
    90deg,
    var(--believe-green, #b8d62e) var(--bx-fill, 0%),
    color-mix(in srgb, var(--believe-grey, #6a6f5e) 45%, transparent) var(--bx-fill, 0%)
  );
  cursor: pointer;
}

.bx__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: var(--believe-bright, #d4f24b);
  border: none;
  border-radius: 0; /* square knob -- this site has no rounded corners */
  box-shadow: 0 0 8px var(--believe-green, #b8d62e);
}

.bx__seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--believe-bright, #d4f24b);
  border: none;
  border-radius: 0;
  box-shadow: 0 0 8px var(--believe-green, #b8d62e);
}

.bx__seek::-moz-range-track { height: 2px; background: transparent; }

.bx__seek:focus-visible {
  outline: 1px solid var(--believe-green, #b8d62e);
  outline-offset: 4px;
}

/* Fullscreen: the wrapper goes up, so the custom controls ride along --
   never the bare <video> (that would summon the browser's own chrome). */
.bx__player:fullscreen {
  background: #000;
  padding: 0 0.8rem 0.4rem;
}

.bx__player:fullscreen .bx__stage {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 0;
  border: none;
}

/* ---- episodes ------------------------------------------------------------ */

.bx__meta {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--believe-green, #b8d62e);
}

.bx__episodes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bx__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  min-width: 12rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--believe-grey, #6a6f5e);
  background: none;
  color: var(--believe-green, #b8d62e);
  font-family: "Space Mono", "Courier New", monospace;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.bx__card:hover,
.bx__card:focus-visible {
  border-color: var(--believe-green, #b8d62e);
  outline: none;
}

.bx__card.is-current {
  border-color: var(--believe-bright, #d4f24b);
  box-shadow: 0 0 14px rgba(184, 214, 46, 0.22);
}

.bx__card--locked {
  cursor: default;
  opacity: 0.62;
}

.bx__card-no {
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--believe-grey, #6a6f5e);
}

.bx__card-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--believe-bright, #d4f24b);
}

.bx__card-title--dim { color: var(--believe-grey, #6a6f5e); }

.bx__card-sub {
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  color: var(--believe-grey, #6a6f5e);
  min-height: 1em; /* the INBOUND card's T-minus ticks in -- reserve the line */
}

.bx__footer {
  padding-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--believe-green, #b8d62e) 35%, transparent);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--believe-grey, #6a6f5e);
}

/* ---- small screens -------------------------------------------------------- */

@media (max-width: 640px) {
  .bx { padding: 0.5rem; }
  .bx__frame { padding: 1rem 0.9rem 0.8rem; gap: 0.7rem; }
  .bx__title { font-size: 0.98rem; }
  .bx__sub { font-size: 0.52rem; }
  .bx__controls { gap: 0.45rem; }
  .bx__ctrl { padding: 0.4rem 0.5rem; font-size: 0.55rem; }
  .bx__ctrl--play { min-width: 4rem; }
  .bx__time { font-size: 0.55rem; }
  .bx__card { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bx, .bx__close, .bx__ctrl, .bx__card, .bx__bigplay, .bx__seek {
    transition: none !important;
  }
  .bx__corner { animation: none !important; }
}