style.css

/* cable-82: the 1982 cable character-generator look.
   Identity: bundled IBM VGA bitmap face, broadcast-safe saturated primaries,
   solid color bands, hard cuts, all caps. The one shadow allowed is the hard
   offset drop shadow real character generators used for legibility over color
   (solid, no blur), never a soft neon glow. No gradients, no fake scanlines:
   the CRT is the filter. The one exception is at the end of this file: faux
   CRT mode, for a flat panel, where there is no tube to be the filter. */

@font-face {
  font-family: "VGA";
  src: url("fonts/webplus-ibm-vga-8x16.woff") format("woff");
  font-display: block;
}

/* The palette (--c-blue, --c-cyan, --c-green, --c-yellow, --c-red,
   --c-magenta, --c-white, --c-ink) is set on #stage by app.js from the one
   copy in config-schema.js, CRT variant included. This file never carries
   a hex value that has to match one there. */
:root {
  --letterbox: #0A0A12;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; background: var(--letterbox); }

#letterbox {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The stage is a virtual 640x480 screen. Everything is sized in --u
   (1 virtual pixel), so the composition scales to any real screen. */
#stage {
  width: min(100vw, calc(100vh * 4 / 3));
  aspect-ratio: 4 / 3;
  container-type: size;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--c-ink);
  font-family: "VGA", monospace;
  text-transform: uppercase;
  color: var(--c-white);
  --u: calc(100cqw / 640);
  /* Text scale from config (1-1.5): body, kicker, crawl, and the small header
     lines grow; the big clock and temperature already fill their space. */
  --ts: 1;
  /* Overscan safe margins, one per axis, set from config (percent, 0-15). */
  --ovpx: 7;
  --ovpy: 7;
  --ovx: calc(var(--u) * 640 * var(--ovpx) / 100);
  --ovy: calc(var(--u) * 480 * var(--ovpy) / 100);
  /* Hard offset drop shadow, the way character generators did it: solid,
     no blur, down-and-right. --shadow can be overridden from config. */
  --shadow: rgba(8, 8, 16, 0.7);
  /* Broadcast divider rules and the station-bug / crawl-flag accent. */
  --rule: var(--c-white);
  --flag-bg: var(--c-red);
  --flag-fg: var(--c-white);
}

/* CRT mode (config crtMode): the composite / RF path smears saturated color,
   clips pure white, and turns a hard 2-unit shadow into ringing. app.js
   swaps in the softer palette (90% white) and sets the class; the class
   drops the shadow. */
#stage.crt {
  --shadow: transparent;
}

/* Every glyph on the stage carries the hard CG drop shadow. */
#stage :is(#ch-name, #ch-tagline, #ch-clock, #ch-date, #page-kicker,
  #page-body, #page-time, #page-date, #crawl-flag, #crawl-track,
  #wx-location, #wx-temp, #wx-cond, #wx-hilo, #wx-sun,
  #error-title, #error-sub, #error-detail) {
  text-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--shadow);
}

/* ---- Header band ---- */

#band-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(var(--u) * 16);
  padding: var(--ovy) var(--ovx) calc(var(--u) * 10);
  background: var(--header-bg, var(--c-blue));
  border-bottom: calc(var(--u) * 3) solid var(--rule);
  line-height: 1;
  white-space: nowrap;
}

/* The channel name is a station "bug": an inverted solid box, the way a
   local channel stamped its logo in the corner. --bug-bg / --bug-fg are
   set from the header colors so it inverts cleanly against the band. */
#ch-name {
  font-size: calc(var(--u) * 32);
  display: inline-block;
  padding: calc(var(--u) * 3) calc(var(--u) * 10) calc(var(--u) * 1);
  background: var(--bug-bg, var(--c-white));
  color: var(--bug-fg, var(--header-bg, var(--c-blue)));
  letter-spacing: calc(var(--u) * 2);
  text-shadow: none;
}
#ch-tagline { font-size: calc(var(--u) * 16 * var(--ts)); margin-top: calc(var(--u) * 8); }
#header-right { text-align: right; }
#ch-clock { font-size: calc(var(--u) * 32); }
#ch-date { font-size: calc(var(--u) * 16 * var(--ts)); margin-top: calc(var(--u) * 6); }

/* ---- Page area ---- */

#page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(var(--u) * 20);
  padding: calc(var(--u) * 16) var(--ovx);
  overflow: hidden;
  background: var(--c-blue);
}
/* Nothing on the page shrinks to fit: content that is too tall overflows,
   which is what the fit pass in board.js measures. Let flex squeeze the
   text box instead and a five-line headline loses half its last line
   with the page reporting that everything fits. */
#page > * { flex-shrink: 0; }

#page-kicker {
  font-size: calc(var(--u) * 20 * var(--ts));
  line-height: 1;
  padding: calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * 6);
  background: var(--c-ink);
  color: var(--c-white);
  letter-spacing: calc(var(--u) * 2);
  text-shadow: none;
}
#page-kicker:empty { display: none; }

/* --fit is set by app.js after each page renders: 1 normally, less when the
   content would overflow the page area (a long fact, the weather card on a
   short screen, a big textScale). Kicker and header never shrink. */
#page-body {
  font-size: calc(var(--u) * 32 * var(--ts) * var(--fit, 1));
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow-wrap: break-word;
  max-width: 100%;
}
#page-body.big { font-size: calc(var(--u) * 48 * var(--ts) * var(--fit, 1)); line-height: 1.25; -webkit-line-clamp: 4; line-clamp: 4; }

#page-time { font-size: calc(var(--u) * 64); line-height: 1; }
#page-date { font-size: calc(var(--u) * 32 * var(--ts)); line-height: 1.35; }

/* Clock page shows time/date; every other page shows kicker/body. */
#page-time, #page-date { display: none; }
#page.mode-clock #page-time, #page.mode-clock #page-date { display: block; }
#page.mode-clock #page-kicker, #page.mode-clock #page-body { display: none; }

/* Weather page: a card of location / big temp / condition / hi-lo / sun.
   The kicker stays (WEATHER); body, time, and date hide. */
#page-weather { display: none; }
#page.mode-weather #page-weather {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8 * var(--fit, 1));
}
/* Six lines have to share a 480-line screen with the kicker: the card sits
   a little closer to it than a text page does. */
#page.mode-weather { gap: calc(var(--u) * 14); }
#page.mode-weather #page-body,
#page.mode-weather #page-time,
#page.mode-weather #page-date { display: none; }

#wx-location { font-size: calc(var(--u) * 28 * var(--ts) * var(--fit, 1)); line-height: 1; }
#wx-temp { font-size: calc(var(--u) * 84 * var(--fit, 1)); line-height: 1; }
#wx-cond { font-size: calc(var(--u) * 32 * var(--ts) * var(--fit, 1)); line-height: 1; }
#wx-hilo { font-size: calc(var(--u) * 26 * var(--ts) * var(--fit, 1)); line-height: 1; }
#wx-sun { font-size: calc(var(--u) * 18 * var(--ts) * var(--fit, 1)); line-height: 1; margin-top: calc(var(--u) * 4); }
#wx-sun:empty { display: none; }
/* Set by board.js fitPage() when the page would overflow: the sun line goes first. */
#page.tight #wx-sun { display: none; }

/* ---- Crawl band ---- */

#band-crawl {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--crawl-bg, var(--c-ink));
  border-top: calc(var(--u) * 3) solid var(--rule);
  padding-bottom: var(--ovy);
  line-height: 1;
  white-space: nowrap;
}

/* Fixed category flag pinned at the left of the ticker, the cable-news
   lower-third signature. Text scrolls past it in the window to its right. */
#crawl-flag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* The red runs to the raw left edge; the label starts inside the safe
     area, so a tube that eats the edge eats solid color, not letters. */
  padding: calc(var(--u) * 10) calc(var(--u) * 18) calc(var(--u) * 10) calc(var(--u) * 18 + var(--ovx));
  background: var(--flag-bg);
  color: var(--flag-fg);
  font-size: calc(var(--u) * 26 * var(--ts));
  letter-spacing: calc(var(--u) * 2);
  border-right: calc(var(--u) * 3) solid var(--rule);
}
#crawl-flag:empty { display: none; }

#crawl-window {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: calc(var(--u) * 10) 0;
}

#crawl-track {
  display: inline-block;
  font-size: calc(var(--u) * 32 * var(--ts));
  will-change: transform;
}

/* ---- Error card (broken config) ---- */

#error-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(var(--u) * 24);
  padding: var(--ovy) var(--ovx);
  background: var(--c-blue);
  color: var(--c-white);
}
#error-card[hidden] { display: none; }
#error-title { font-size: calc(var(--u) * 48); line-height: 1; }
#error-sub { font-size: calc(var(--u) * 24); line-height: 1.4; }
#error-detail { font-size: calc(var(--u) * 16); line-height: 1.5; }

/* ------------------------------------------------------------- the dial */
/* Channel layers sit above the bulletin board inside the same stage. Only
   the visible channel does work; hidden layers are stopped, not paused. */

#video-layer, #card-layer, #external-layer, #guide-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: var(--c-ink);
}

#video-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#external-layer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--c-ink);
}

/* Off-air card: bars, clock, the resume line. Same face, same palette. */
#card-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 16);
  color: var(--c-white);
  text-align: center;
}
#card-layer[hidden] { display: none; }
#card-bars { display: flex; width: 76%; height: 34%; }
#card-bars i { flex: 1; }
#card-clock { font-size: calc(var(--u) * 28); }
#card-name { font-size: calc(var(--u) * 18); letter-spacing: 0.08em; }
#card-msg { font-size: calc(var(--u) * 13); line-height: 1.7; letter-spacing: 0.1em; }

/* Channel 0: the guide. Built after the cable preview channels that ran on
   an Amiga in a headend closet: a masthead, three half-hour columns, and the
   lineup crawling up the screen. Flat broadcast blue rather than the
   purple-to-blue gradient the original used, which is the one thing about
   that look that has not aged. */
#guide-layer {
  display: flex;
  flex-direction: column;
  background: var(--c-blue);
  color: var(--c-white);
  overflow: hidden;
}
#guide-layer[hidden] { display: none; }

#guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 16);
  padding: var(--ovy) var(--ovx) calc(var(--u) * 8);
  border-bottom: calc(var(--u) * 3) solid var(--c-white);
}

/* The wordmark: the name with a ring cut around it, the way every guide
   channel of the period drew an ellipse through its logo. */
#guide-logo { display: inline-block; }
/* The ring belongs to the wordmark alone. The tagline sits clear of it, or a
   long one would read straight through the ellipse. */
#guide-logo .cv-mark {
  position: relative;
  display: inline-block;
  padding: calc(var(--u) * 4) calc(var(--u) * 16);
}
#guide-logo .cv-word {
  position: relative;
  z-index: 1;
  font-size: calc(var(--u) * 34 * var(--ts));
  letter-spacing: 0.06em;
  display: block;
  white-space: nowrap;
}
#guide-logo .cv-ring {
  position: absolute;
  inset: 0;
  border: calc(var(--u) * 2) solid var(--c-white);
  border-radius: 50%;
  transform: rotate(-7deg);
  opacity: 0.85;
}
#guide-logo .cv-sub {
  display: block;
  margin-top: calc(var(--u) * 8);
  padding-left: calc(var(--u) * 4);
  font-size: calc(var(--u) * 15 * var(--ts));
  letter-spacing: 0.22em;
  color: var(--c-yellow);
  white-space: nowrap;
}
#guide-logo .cv-sub[hidden] { display: none; }
#guide-clock { font-size: calc(var(--u) * 28 * var(--ts)); letter-spacing: 0.04em; white-space: nowrap; }

/* The column heads and the rows share one grid so the columns line up. */
/* The channel column does not grow with the text size: at 1.25 on a 640
   tube it would take the time columns' room and wrap every "10:30 AM".
   Names wrap to two lines inside it instead (below). */
#guide-cols,
.guide-row {
  display: grid;
  grid-template-columns: calc(var(--u) * 190) repeat(var(--slots, 3), 1fr);
  gap: calc(var(--u) * 3);
}
#guide-cols {
  padding: calc(var(--u) * 8) var(--ovx) calc(var(--u) * 6);
  font-size: calc(var(--u) * 20 * var(--ts));
  color: var(--c-yellow);
}
#guide-cols .gc-slot { text-align: center; }

#guide-view { flex: 1; position: relative; overflow: hidden; padding: 0 var(--ovx) var(--ovy); }
/* The crawling list gets its own layer: on a moving layer the browser drops
   subpixel antialiasing, which otherwise fringes every letter in color. */
#guide-rows {
  position: absolute;
  left: var(--ovx);
  right: var(--ovx);
  top: 0;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
}

.guide-row { margin-bottom: calc(var(--u) * 3); font-size: calc(var(--u) * 22 * var(--ts)); }
.guide-row > * {
  background: rgba(0, 0, 0, 0.22);
  padding: calc(var(--u) * 8) calc(var(--u) * 10);
  min-height: calc(var(--u) * 40 * var(--ts));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A long program title wraps inside its cell rather than being cut off at
   one line. Two lines is what fits a half hour before the row gets taller
   than the tube can spare. */
.guide-row .g-cell { display: flex; align-items: flex-start; white-space: normal; }
.guide-row .g-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.15;
}
.guide-row .g-ch { display: flex; gap: calc(var(--u) * 10); align-items: flex-start; min-width: 0; }
/* A name wraps to two lines before it is cut; the number never gives way,
   because a channel you cannot name is still a channel you can tune. */
.guide-row .g-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  line-height: 1.15;
  min-width: 0;
}
.guide-row .g-num { color: var(--c-yellow); min-width: calc(var(--u) * 40 * var(--ts)); text-align: right; flex: 0 0 auto; }
.guide-row .g-cell.is-offair,
.guide-row .g-cell.is-unknown { color: var(--c-white); opacity: 0.62; }

/* Tuning static: a small noise canvas scaled up reads like real snow. */
#tuner-snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  image-rendering: pixelated;
}

/* The other kind of channel change: a blanked raster. */
#tuner-blank {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--c-ink);
}
#tuner-blank[hidden] { display: none; }

/* Switched off from the remote: a dark tube over everything, bug included.
   It covers the whole window, not just the stage, because the stage folds up
   underneath it on the way out. */
#power-off {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #060609; /* a dead tube is very dark grey, not a hole */
  display: flex;
  align-items: center;
  justify-content: center;
  /* The on-screen display is drawn here while the set is off, so the dark
     screen measures itself the way the stage does, a 640x480 picture, and
     writes in the stage's white (tuner.js hands it over). */
  container-type: size;
  --u: calc(min(100cqw, 100cqh * 4 / 3) / 640);
  font-family: "VGA", monospace;
  text-transform: uppercase;
  color: var(--c-white);
}
#power-off[hidden] { display: none; }

/* The dying raster. A CRT losing power loses vertical deflection first, so
   the picture folds into one bright line while the beam still sweeps side to
   side; then the high voltage drops, the line pulls in to a dot, and the
   phosphor keeps glowing for a moment after the beam is gone. Each class is
   one step of that, driven from tuner.js so the timings stay in one table. */
#crt-line {
  position: relative;
  width: min(100vw, calc(100vh * 4 / 3));
  height: max(2px, 0.45vh);
  background: #fff;
  opacity: 0;
  transform: scaleX(1);
}
/* The bloom: phosphor lights up around the beam, so the line carries a
   blurred copy of itself. It scales with the line, so the dot blooms too. */
#crt-line::after {
  content: "";
  position: absolute;
  inset: calc(-1 * max(4px, 0.7vh)) 0;
  background: rgba(255, 255, 255, 0.45);
  filter: blur(max(4px, 0.7vh));
}
#crt-line.line { opacity: 1; }
/* The beam pulls in to a point. The glow is a box-shadow and transforms
   scale it away to nothing, so the point stands on its own: small, hard, and
   a little taller than the line it came from, the way the last of the beam
   piles up in one spot. */
#crt-line.snap {
  transition: transform 130ms cubic-bezier(0.5, 0, 0.9, 0.4);
  transform: scaleX(0.014) scaleY(1.6);
}
/* By now the line has already pulled in to a dot, so only the glow changes:
   the phosphor decays where the beam left it. */
#crt-line.fade {
  transition: opacity 380ms ease-out, transform 380ms ease-in;
  opacity: 0;
  transform: scaleX(0.014) scaleY(0.9);
}
#crt-line.dot { opacity: 1; transform: scaleX(0.014) scaleY(1.6); }
#crt-line.dot.open {
  transition: transform 90ms ease-out;
  transform: scaleX(1) scaleY(1);
}

/* The picture folding away, and blooming back. The stage carries these; the
   4:3 box is what collapses, so the fold reads as the tube, not the page. */
#stage.tube-off {
  transition: transform 170ms cubic-bezier(0.25, 0.6, 0.35, 1), filter 170ms ease-out;
  transform: scaleY(0.008) scaleX(1.03);
  filter: brightness(2.6) contrast(1.15);
}
#stage.tube-on { animation: tube-on 190ms ease-out; }
@keyframes tube-on {
  0% { transform: scaleY(0.01); filter: brightness(2.2); }
  60% { transform: scaleY(1.04); filter: brightness(1.25); }
  100% { transform: scaleY(1); filter: brightness(1); }
}

/* The on-screen display: the channel on a tune, the digits as they are
   typed, the volume as a meter. A plate centered in the upper third of the
   picture, the way a cable converter drew its number, dark behind light
   type so it reads over anything: a bright program, a white web page, the
   board's own masthead. Shown for a moment, fades on its own. */
#channel-bug {
  position: absolute;
  left: 50%;
  top: 27%;
  transform: translate(-50%, -50%);
  z-index: 60;
  /* As wide as what it says, on one line: a plate that wrapped would cover
     twice the picture. */
  width: max-content;
  max-width: 100%;
  min-width: calc(var(--u) * 210);
  padding: calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * 12);
  background: rgba(10, 10, 18, 0.84);
  border: calc(var(--u) * 3) solid var(--c-white);
  color: var(--c-white);
  text-align: center;
  letter-spacing: 0.06em;
  transition: opacity 0.5s;
}
#channel-bug[hidden] { display: none; }
#channel-bug.fading { opacity: 0; }
#bug-number { font-size: calc(var(--u) * 56); line-height: 1; white-space: nowrap; }
#bug-name { font-size: calc(var(--u) * 18); margin-top: calc(var(--u) * 8); white-space: nowrap; }
#bug-name[hidden] { display: none; }
/* The volume meter: eight cells, filled from the left as the key steps up,
   all empty at sound off. Outlined cells are the empties, so the row's full
   length is always visible and the level reads as a fraction of it. */
#bug-meter {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 12);
}
#bug-meter[hidden] { display: none; }
#bug-meter i {
  display: block;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 26);
  border: calc(var(--u) * 2) solid var(--c-white);
  opacity: 0.55;
}
#bug-meter i.on { background: var(--c-white); opacity: 1; }

/* ------------------------------------------------------------- faux CRT */
/* The flat-panel path (config fauxCrt; set.js). The letterbox becomes a 16:9
   drawing that covers the panel, so the television's own frame is the
   console's frame; the stage sits in the console's glass at a fixed 4:3
   window of it. A panel that is not 16:9 crops the wood, never the glass.
   The wood, the brass, the cloth: one palette, here, read by the SVG. */
#set {
  position: absolute;
  inset: 0;
  z-index: 0;
  --set-wood: #5B3A22;
  --set-wood-dk: #3E2615;
  --set-wood-lt: #7A5232;
  --set-bezel: #2A2622;
  --set-bezel-lt: #4A423A;
  --set-glass: #0B0C12;
  --set-panel: #2E2A25;
  --set-dial: #1B1915;
  --set-dial-in: #26221D;
  --set-dial-rim: #141210;
  --set-knob: #3A342C;
  --set-brass: #C9A24A;
  --set-paper: #E9E4D6;
  --set-soft: #B9B2A2;
  --set-label: #8A7E6E;
  --set-engrave: #6A5F52;
  --set-cloth: #2B2620;
  --set-cloth-hi: #4A4036;
  --set-cloth-mid: #3F3630;
  --set-cloth-edge: #1E1A16;
}
#set[hidden] { display: none; }
#set svg { display: block; width: 100%; height: 100%; }
/* The dial is live: the pointer turns on a tune, a number is a button. */
#set #set-pointer { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
#set .dn { cursor: pointer; }
#set .dn text { fill: var(--set-soft); transition: fill 0.15s ease; }
#set .dn:hover text, #set .dn:focus text, #set .dn.on text { fill: var(--set-paper); }
#set .dn:focus { outline: none; }
#set .dn:focus-visible text { fill: var(--set-brass); }

body.faux { overflow: hidden; }
#letterbox.faux {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, calc(100vh * 16 / 9));
  height: max(100vh, calc(100vw * 9 / 16));
  display: block;
  overflow: hidden;
}
/* The glass: 1200x900 of a 1920x1080 drawing (set.js GLASS). */
#letterbox.faux #stage,
#letterbox.faux #power-off {
  position: absolute;
  left: 6.7708%;
  top: 6.4815%;
  width: 62.5%;
  height: 83.3333%;
  z-index: 1;
}
#letterbox.faux #power-off { z-index: 70; }
#letterbox.faux #crt-line { width: 100%; }

/* The tells. Each overlay reads one --tube-* number the set writes on the
   stage; at 0 it is invisible and costs nothing. They sit above every
   channel layer and the on-screen display, so the picture and its plate
   are one surface under the glass. `tells` is on whenever faux CRT is on;
   `faux` (the console layout) only with a set drawn. */
#tube { display: none; }
#letterbox.tells #tube {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 65;
  pointer-events: none;
}
#tube > * { position: absolute; inset: 0; }
#tube-scan {
  opacity: var(--tube-scan, 0);
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) calc(100% / 480),
    rgba(0, 0, 0, 0.6) calc(100% / 480),
    rgba(0, 0, 0, 0.6) calc(100% / 240)
  );
}
#tube-mask {
  opacity: var(--tube-mask, 0);
  mix-blend-mode: multiply;
  background: repeating-linear-gradient(to right, #ff8c8c 0 1px, #8cff8c 1px 2px, #8c8cff 2px 3px);
}
#tube-noise {
  width: 100%;
  height: 100%;
  opacity: var(--tube-noise, 0);
  image-rendering: pixelated;
  mix-blend-mode: overlay;
}
#tube-noise[hidden] { display: none; }
#tube-vig {
  opacity: var(--tube-vig, 0);
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.9) 100%);
}
#tube-refl {
  inset: 4% auto auto 6%;
  width: 34%;
  height: 22%;
  opacity: var(--tube-refl, 0);
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 40%, rgba(255, 250, 235, 0.16), rgba(255, 250, 235, 0) 70%);
}
#tube-flick { opacity: 0; background: #fff; mix-blend-mode: overlay; }
#stage.flicker #tube-flick { animation: tube-flick 100ms steps(2) infinite; }
@keyframes tube-flick {
  0% { opacity: var(--tube-flick, 0); }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #stage.flicker #tube-flick { animation: none; }
}

/* Jarvis, the on-screen host (jarvis.js): he fills the safe area over
   whatever is on, a hard-pixel picture with his line typed underneath, and
   arrives and leaves with a roll, the way a feed cut in did. */
#jarvis {
  position: absolute;
  inset: var(--ovy) var(--ovx);
  z-index: 62;
  display: flex;
  align-items: center;
  justify-content: center;
}
#jarvis[hidden] { display: none; }
#jarvis .jv-frame {
  position: relative;
  /* Short of the safe area, and the caption well up from the bottom: a
     real tube hides more of its lower edge than the margins promise. */
  height: 94%;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background: #0a0630;
  box-shadow: 0 0 0 calc(var(--u) * 3) var(--c-white), calc(var(--u) * 6) calc(var(--u) * 6) 0 calc(var(--u) * 3) var(--shadow);
  overflow: hidden;
}
#jarvis canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
#jarvis .jv-caption {
  position: absolute;
  left: calc(var(--u) * 16);
  right: calc(var(--u) * 16);
  bottom: calc(var(--u) * 30);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 10);
  font-size: calc(var(--u) * 22 * var(--ts));
  line-height: 1.15;
  color: var(--c-white);
  text-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--shadow);
}
#jarvis .jv-flag {
  flex: none;
  padding: 0 calc(var(--u) * 8);
  background: var(--c-magenta);
  color: var(--c-white);
  text-shadow: none;
}
#jarvis .jv-text {
  padding: 0 calc(var(--u) * 6);
  background: rgba(10, 6, 48, 0.78);
  min-height: 1.15em;
}
#jarvis.jv-in .jv-frame { animation: jv-in 260ms steps(6) both; }
#jarvis.jv-out .jv-frame { animation: jv-out 240ms steps(5) both; }
@keyframes jv-in {
  0% { transform: scaleY(0.02); filter: brightness(3); }
  40% { transform: scaleY(1.08) translateX(calc(var(--u) * -12)); }
  70% { transform: scaleY(0.96) translateX(calc(var(--u) * 8)); }
  100% { transform: none; filter: none; }
}
@keyframes jv-out {
  0% { transform: none; }
  60% { transform: scaleY(0.04); filter: brightness(2.5); }
  100% { transform: scaleY(0) scaleX(0.2); filter: brightness(3); }
}