:root {
  --bg: #050607;
  --ink: #e8ecef;
  --live: #ff3b30;
  --phosphor: rgba(190, 255, 220, .85);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font: 14px/1.4 ui-monospace, "Cascadia Mono", Menlo, monospace; }

/* The monitor: a putty-coloured CRT case of around 2000, as large as the
   window allows. The bezel's padding is a share of its width, so the
   16:9 screen inside keeps its shape: 0.91 x 9/16 + 0.036 + 0.082 of the
   width makes the whole 0.630 as tall as it is wide. */
.monitor {
  position: absolute; inset: 0; margin: auto;
  width: min(98vw, 155vh); aspect-ratio: 1 / .630; height: auto; max-height: 98vh;
}
.bezel {
  position: relative; width: 100%; height: 100%;
  padding: 3.6% 4.5% 8.2%;
  border-radius: 2.2% / 3.5%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(#e4dfd2, #cfc8b6 55%, #bdb5a1);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.7), inset 0 -3px 6px rgba(0,0,0,.18),
    0 1.5vh 4vh rgba(0,0,0,.6);
}
/* The screen, sunk into the bezel. */
.stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #000;
  border-radius: 10px;
  box-shadow: 0 0 0 3px #3a3833, 0 0 0 6px #a59d89, 0 -2px 0 7px rgba(0,0,0,.15);
}
.chin {
  position: absolute; left: 4.5%; right: 4.5%; bottom: 0; height: 8.2%;
  display: flex; align-items: center; justify-content: center;
}
.maker {
  font: 600 clamp(8px, 1.05vw, 15px)/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .12em; color: #7d7564;
  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(0,0,0,.18);
}
.controls { position: absolute; right: 1%; top: 50%; transform: translateY(-50%); display: flex; gap: .9vw; align-items: center; }
.controls i {
  display: block; width: clamp(6px, .9vw, 13px); height: clamp(4px, .45vw, 7px); border-radius: 2px;
  background: linear-gradient(#c3bba8, #a9a18d); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.3);
}
.controls .power {
  display: block; padding: 0; border: 0; cursor: pointer;
  width: clamp(12px, 1.3vw, 19px); height: clamp(12px, 1.3vw, 19px); border-radius: 50%;
  background: linear-gradient(#c3bba8, #a9a18d); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.3);
}
.controls .power:active { box-shadow: inset 0 1px 3px rgba(0,0,0,.35); transform: translateY(1px); }
.controls .power:focus-visible { outline: 2px solid #3647D8; outline-offset: 2px; }
.controls .led {
  display: block; width: clamp(3px, .4vw, 6px); height: clamp(3px, .4vw, 6px); border-radius: 50%;
  background: #6dff8a; box-shadow: 0 0 4px #3dff6a, 0 0 9px rgba(61,255,106,.6);
}
.controls .led.standby { background: #ffb020; box-shadow: 0 0 4px #ff9d00, 0 0 9px rgba(255,157,0,.5); }

/* Power: off collapses the picture to a bright line, then a dot, and
   fades; on warms it back up the other way. */
.stage.off .replay, .stage.off .badge { visibility: hidden; }
.stage.powering-off .replay { animation: crt-off .55s ease-in forwards; }
.stage.powering-on .replay { animation: crt-on .7s ease-out; }
@keyframes crt-off {
  0%   { transform: scale(1, 1); filter: brightness(1); opacity: 1; }
  45%  { transform: scale(1, .006); filter: brightness(4); opacity: 1; }
  75%  { transform: scale(.003, .006); filter: brightness(6); opacity: 1; }
  100% { transform: scale(0, 0); filter: brightness(1); opacity: 0; }
}
@keyframes crt-on {
  0%   { transform: scale(.003, .006); filter: brightness(6); opacity: 1; }
  35%  { transform: scale(1, .006); filter: brightness(4); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}

/* Sticky notes stuck on the monitor, screen or bezel, each a link to a
   page on index. Placed by site-editor, as shares of the monitor. Hidden
   while live; they ride the zoom in and fade with the CRT. */
.monitor { container-type: size; }
.notes { position: absolute; inset: 0; pointer-events: none; z-index: 20; transition: opacity .6s; overflow: hidden; } /* a note past the edge is cut off there */
.on-air .notes, .fill .notes, .bare .notes { display: none; }
body:has(.replay.clean) .notes { opacity: 0; }
.note {
  position: absolute; pointer-events: auto; display: block; box-sizing: border-box;
  padding: .7em .8em 1em; min-height: 5em;
  font: 400 clamp(10px, 1.32cqw, 28px)/1.25 "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  color: #2b2614; text-decoration: none; overflow-wrap: anywhere;
  background: linear-gradient(#fff6a5, #ffe970); box-shadow: 0 .3em .8em rgba(0,0,0,.45), inset 0 -1.2em 1.2em -1.2em rgba(0,0,0,.12);
  transform-origin: 50% 0; transition: transform .2s;
}
.note.pink { background: linear-gradient(#ffd3e2, #ffb8d0); }
.note.blue { background: linear-gradient(#d4ecff, #b6dcff); }
.note.green { background: linear-gradient(#dcf7c8, #c2eda6); }
.note:hover, .note:focus-visible { transform: rotate(0deg) scale(1.06) !important; outline: none; }

.layer { position: absolute; inset: 0; }
.layer[hidden] { display: none; }
.live iframe { width: 100%; height: 100%; border: 0; display: block; }

/* The replay wears the CRT all the time; the live player never does
   (YouTube's terms: nothing may cover the player). */
.replay-view { position: absolute; inset: 0; }
.scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .09; mix-blend-mode: screen; }
/* A phone (narrow or upright): the phone window fills the screen, no case. */
.phone .monitor { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; max-height: none; }
.phone .bezel { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.phone .stage { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.phone .chin { display: none; }
.phone .replay-view { overflow: hidden; }

/* ?fill (site-editor's backdrop): the monitor, filling the window exactly. */
.fill .monitor { width: 100vw; height: 100vh; aspect-ratio: auto; max-height: none; }

/* ?bare: the screen alone, filling the window. */
.bare .monitor { width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; max-height: none; }
.bare .bezel { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.bare .stage { border-radius: 0; box-shadow: none; }
.bare .chin, .bare .badge { display: none; }

/* On air: the screen is the window, without the case or the CRT. app.js
   zooms into the screen first, so this lands at the same size. */
.on-air .monitor { width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; max-height: none; }
.on-air .bezel { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.on-air .stage { border-radius: 0; box-shadow: none; }
.on-air .chin { display: none; }
.replay .scanlines, .replay .grain, .replay .vline, .replay .glass, .replay::after { transition: opacity 1.2s; }
.phone.on-air .monitor { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; } /* the vertical stream, full screen */
.replay.clean .scanlines, .replay.clean .grain, .replay.clean .vline, .replay.clean .glass, .replay.clean::after { opacity: 0 !important; }

/* Now and then a thin vertical line drifts across (crt.js, vline). */
.vline {
  position: absolute; top: 0; bottom: 0; width: 2px; display: none; pointer-events: none;
  background: rgba(220,255,235,.9); box-shadow: 0 0 6px rgba(200,255,225,.8), 0 0 18px rgba(200,255,225,.35);
  mix-blend-mode: screen;
}
/* The glass: a soft reflection across the top. Replay only; nothing
   covers the live player. */
.glass {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 45% at 30% 0%, rgba(255,255,255,.07), transparent 70%);
}
.replay::after { /* vignette and a little curvature of light */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* The wipe: a vertical bar of noisy light crossing left to right. */
.wipe { position: absolute; inset: 0; pointer-events: none; z-index: 10; display: none; }
.wipe.on { display: block; }
.wipe-noise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: screen; }
.wipe-bar {
  position: absolute; top: 0; bottom: 0; width: 7%; left: 0; transform: translateX(-100%);
  background:
    linear-gradient(to right, transparent, rgba(255,40,80,.35) 30%, var(--phosphor) 48%, #fff 50%, var(--phosphor) 52%, rgba(40,120,255,.35) 70%, transparent);
  mix-blend-mode: screen; filter: blur(.5px);
}

.badge {
  position: absolute; left: 2.2%; top: 3.5%; margin: 0; z-index: 11;
  padding: .25em .6em; font-size: clamp(10px, 1.1vw, 15px); letter-spacing: .14em;
  color: var(--ink); background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25);
}
.badge.is-live { color: #fff; background: var(--live); border-color: var(--live); }
.badge.is-live { pointer-events: none; opacity: 0; transition: opacity .6s 2s; } /* out of the player's way */

@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
}