/* osd.css — the TV's OSD (on-screen display): WHITE boxy pixel text on the classic VCR menu
 * blue, used for the channel name, the program/now-playing name, the TUNING cover, and the
 * volume bar. Font is self-hosted Bedstead Bold (bjh21.me.uk, public domain) — the outline
 * recreation of the Mullard SAA5050 teletext / Ceefax character generator (the famous smoothed
 * diagonals), the same ROM lineage as 90s European TV/VCR OSDs. */

@font-face {
  font-family: "OSD";
  /* woff2 first (small); otf fallback for any browser that rejects it. ?v bust forces a
     re-fetch past a stale cache (the OSD font wasn't applying on some devices). */
  src: url("../fonts/bedstead-bold.woff2?v=4") format("woff2"),
       url("../fonts/bedstead-bold.otf?v=4") format("opentype");
  font-display: swap;
}

/* The OSD palette: the classic TV/VCR menu blue (a bright, saturated royal blue, like a
   VCR's no-signal/menu screen) and one uniform pixel-text size for every readout. */
:root {
  --osd-blue: #1c3fd6;                  /* classic VCR menu blue — bright azure royal (matches the JVC OSD photo) */
  --osd-fg: #ffffff;                    /* OSD text on the BLUE bars is WHITE (like the VCR menu) */
  --osd-green: #2bff5c;                 /* OSD text drawn straight on the tube (no blue bg) = phosphor green */
  /* faint phosphor bloom around the white glyphs (the CRT softens/halos them) */
  --osd-glow: 0 0 3px rgba(190, 215, 255, 0.5);
  --osd-green-glow: 0 0 6px rgba(43, 255, 92, 0.55);
  --osd-fz: clamp(20px, 3vw, 30px);     /* uniform OSD text size — matches the TUNING box */
}

/* Blue OSD bars over the video — mask YouTube's title (top) and cards (bottom). Shown
   transiently by JS for ~3s, then hidden with NO fade. Top = channel name; bottom =
   program/now-playing name (which scrolls when it doesn't fit). */
#topbar, #botbar {
  position: absolute;
  left: 0; right: 0;
  /* Just enough to cover YouTube's chrome: measured ~8% of the frame (title+byline
     at the top, share/"More videos" buttons at the bottom). Proportional so it
     scales with the screen, clamped for tiny/huge frames. */
  height: clamp(54px, 9cqh, 100px);
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;     /* the grid is CENTRED (1-char margin each side, set in app.js) */
  padding: 0;
  background-color: var(--osd-blue);
  pointer-events: none;
  font-family: "OSD", "Courier New", monospace;
  color: var(--osd-fg);
  letter-spacing: 1px;
  text-shadow: var(--osd-glow);
  font-size: var(--osd-fz);       /* every OSD readout is the same size */
  text-transform: uppercase;      /* OSD is always ALL CAPS */
}
#topbar { top: 0; }
#botbar { bottom: 0; }
/* Both bars hold a JS character-GRID scroller (app.js): .scroll shows exactly the cells that fit the
   centred region; the bar clips. #ch = channel (top), #np = now-playing (bottom). */
#topbar #ch, #botbar #np {
  font-size: inherit;
  overflow: hidden;
  white-space: nowrap;            /* width / max-width are set by the grid scroller */
}
/* The grid el is region-wide and centred in the bar (its edges sit on the 4:3 margins). The channel
   (top) hugs the 4:3 LEFT margin; the now-playing (bottom) hugs the 4:3 RIGHT margin. */
#topbar #ch { text-align: left; }
#botbar #np { text-align: right; }
#topbar #ch .chnum { color: #ffff00; }   /* the CHNN number chip is yellow; the channel name stays white */
#topbar #ch span { display: inline-block; filter: url(#osdBlur); opacity: 0.98; }   /* same CRT softening as the scrollers */
/* The CRT blur + 2% glyph transparency goes on the TEXT only (not whole bars/box) — an SVG filter on
   a full-width bar or the centred TUNING box streaks a black line in Chrome (composited-filter bug).
   The blue backgrounds stay fully opaque. */
#topbar #ch .scroll, #botbar #np .scroll { display: inline-block; white-space: pre; filter: url(#osdBlur); opacity: 0.98; }

/* centered "TUNING…" cover — masks YouTube's play/pause icon (which we can't style,
   being cross-origin) whenever a play/seek summons it. Shown by JS for ~the ripple
   duration and kept up while a transition is scanning. */
#tuning {
  position: absolute;
  inset: 0;
  z-index: 11;                 /* above the black cut (z10) too — "TUNING…" shows on the
                                  black while switching, then over the video as it returns */
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#tuning .tunebox {
  min-width: 11%;
  text-align: center;
  white-space: nowrap;
  background-color: var(--osd-blue);
  color: var(--osd-fg);
  font-family: "OSD", "Courier New", monospace;
  font-size: var(--osd-fz);
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 22px 34px;          /* tall/wide enough to fully cover the center icon */
  border-radius: 6px;
  text-shadow: var(--osd-glow);
}
/* the TUNING readout ("AUTO FINE") blinks on/off — 500ms lit, 500ms dark. Blur + 2% transparency on
   the TEXT only (the box background stays opaque); lit state = 0.98 so the glyphs are 2% transparent. */
#tuning .tunebox .scroll { display: inline-block; opacity: 0.98; filter: url(#osdBlur); animation: osd-blink 1s step-end infinite; }
@keyframes osd-blink { 0% { opacity: 0.98; } 50% { opacity: 0; } }

/* volume bar overlay (Sony-style) — phosphor green, sitting ABOVE the bottom OSD bar with a gap. */
#volosd {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(clamp(54px, 9cqh, 100px) + 18px);   /* just above the bottom bar, with some space */
  z-index: 7;
  display: none;
  pointer-events: none;
  text-align: center;
  white-space: pre;
  font-family: "OSD", "Courier New", monospace;
  color: var(--osd-green);          /* volume sits straight on the picture (no blue bar) → phosphor green */
  font-size: calc(var(--osd-fz) * 2);   /* double size */
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: var(--osd-green-glow);
  filter: url(#osdBlur);            /* same CRT blur as the rest of the OSD */
  opacity: 0.98;                    /* glyphs 2% transparent */
}
/* when muted (or volume 0), [MUTE] hugs the 4:3 LEFT margin (padding-left set by app.js to match the
   channel name's left edge), instead of centring like the volume bar. */
#volosd.muted { text-align: left; }

/* "RCV" — a brief blinking phosphor-green readout, TOP-RIGHT inside the 4:3 box (its `right` is set by
   app.js to the 4:3 margin), shown for ~3s when a synced peer changes the channel list while watching. */
#rcv {
  position: absolute;
  top: calc(clamp(54px, 9cqh, 100px) + 14px);   /* just below the top OSD bar */
  z-index: 7;
  display: none;
  pointer-events: none;
  font-family: "OSD", "Courier New", monospace;
  color: var(--osd-green);
  font-size: var(--osd-fz);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: var(--osd-green-glow);
  filter: url(#osdBlur);
}
#rcv.on { display: block; animation: rcv-blink 0.6s steps(1, end) infinite; }
@keyframes rcv-blink { 0%, 49% { opacity: 0.98; } 50%, 100% { opacity: 0.12; } }