/* crt.css — the reusable CRT television. Everything is scoped under .crt: no body class, no
   dependence on hero.css / site.css / arcade.css. Pair with crt.js (which builds the inner DOM).

   SIZING. .crt fills 100% of its container and keeps a fixed aspect. It is a size container, so
   every length inside is a multiple of --u (1cqw = 1% of the TV's own width). The whole set scales
   as one object: bezel, knobs, glass, type. Text sizes carry a hard floor (max(14px, …)) so the
   smallest glyph on the glass is never under 14px, even in a 288px-wide TV on a 320px phone.

   GEOMETRY (in u, width = 100u, height = 100u):
     case  0..96.6   bezel 6/5, 88 x 71 (glass = 85 x 68, i.e. 5:4)   chin 77.6..95   feet 96.6..100 */

.crt {
  --u: 1cqw;
  --crt-amber: #f2a93b;
  --crt-hot: #ffcb70;
  --crt-cream: #f4edd9;
  --crt-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 100 / 100;
  container-type: inline-size;
  isolation: isolate;
  color: var(--crt-cream);
  font-family: var(--crt-font);
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  text-shadow: none;
  -webkit-text-size-adjust: 100%;
}
.crt *, .crt *::before, .crt *::after { box-sizing: border-box; text-shadow: none; }

/* before crt.js has built anything (or with scripting off) the slot is a plain dark slab, so the
   page never jumps when the set arrives */
.crt:not(.is-built)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--u) * 3.4);
  border-radius: calc(var(--u) * 5.5); background: #202226;
  box-shadow: inset 0 calc(var(--u) * .3) 0 rgba(255,255,255,.16), 0 calc(var(--u) * 2.6) calc(var(--u) * 3.6) calc(var(--u) * -1.4) rgba(0,0,0,.85);
}
.crt:not(.is-built) noscript {
  position: absolute; left: 12%; right: 12%; top: 22%; z-index: 1; display: block; text-align: center;
}
.crt .crt-nojs-title {
  display: block; font: 900 calc(var(--u) * 11) / 1 var(--crt-font); letter-spacing: -.03em; color: var(--crt-hot);
}
.crt .crt-nojs-line {
  display: block; margin-top: calc(var(--u) * 3); font: 600 max(15px, calc(var(--u) * 3.2)) / 1.4 var(--crt-font); color: var(--crt-cream);
}

/* ── the plastic case ─────────────────────────────────────────────────────────────────────── */
.crt-case {
  position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--u) * 3.4);
  border-radius: calc(var(--u) * 5.6) calc(var(--u) * 5.6) calc(var(--u) * 3.4) calc(var(--u) * 3.4);
  background:
    linear-gradient(180deg, rgba(255,255,255,.11) 0, rgba(255,255,255,0) 8%),
    linear-gradient(90deg, rgba(0,0,0,.42) 0, rgba(0,0,0,0) 6.5%, rgba(0,0,0,0) 93.5%, rgba(0,0,0,.42) 100%),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .78 0 0 0 0 .78 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #35383d 0%, #2a2c31 38%, #1e2023 100%);
  box-shadow:
    inset 0 calc(var(--u) * .32) 0 rgba(255,255,255,.22),
    inset 0 calc(var(--u) * 1) calc(var(--u) * 1.4) rgba(255,255,255,.05),
    inset 0 calc(var(--u) * -1.2) calc(var(--u) * 1.6) rgba(0,0,0,.6),
    inset 0 0 0 calc(var(--u) * .28) rgba(0,0,0,.65),
    0 calc(var(--u) * 2.4) calc(var(--u) * 3.4) calc(var(--u) * -1.2) rgba(0,0,0,.9);
}
/* the screen throws a little warm light onto the plastic around it */
.crt-case::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(56% 46% at 50% 40%, rgba(255,196,110,.10), rgba(255,196,110,0) 100%);
}
.crt[data-power="on"] .crt-case::after, .crt[data-power="boot"] .crt-case::after { opacity: 1; }

/* the recess the glass sits in */
.crt-bezel {
  position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 5);
  width: calc(var(--u) * 88); height: calc(var(--u) * 71);
  padding: calc(var(--u) * 1.5);
  border-radius: calc(var(--u) * 8.4) / calc(var(--u) * 9.2);
  background: linear-gradient(160deg, #060707 0%, #131518 58%, #1d1f23 100%);
  box-shadow:
    inset 0 calc(var(--u) * .6) calc(var(--u) * 1.1) rgba(0,0,0,.95),
    inset 0 0 0 calc(var(--u) * .2) rgba(0,0,0,.85),
    0 calc(var(--u) * .34) 0 rgba(255,255,255,.11),
    0 calc(var(--u) * -.22) 0 rgba(0,0,0,.6);
}

/* ── the glass ────────────────────────────────────────────────────────────────────────────── */
.crt-glass {
  position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: 6% / 8%;
  background: radial-gradient(90% 80% at 50% 40%, #12161a, #040505 78%);
}
.crt-scene { position: absolute; inset: 0; }
.crt[data-power="off"] .crt-scene { visibility: hidden; }

/* title card */
.crt-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7% 8%; text-align: center;
  background: radial-gradient(85% 75% at 50% 44%, #2c2214 0%, #16120b 56%, #070605 100%);
}
.crt-card-title {
  display: block; font: 900 calc(var(--u) * 11.6) / 1 var(--crt-font); letter-spacing: -.03em;
  color: var(--crt-hot);
  text-shadow: 0 0 calc(var(--u) * .35) rgba(255,214,140,.95), 0 0 calc(var(--u) * 1.7) rgba(242,169,59,.8), 0 0 calc(var(--u) * 4.6) rgba(242,169,59,.5);
}
.crt-card-title::before, .crt-card-title::after {
  content: ""; display: block; width: 34%; height: 2px; margin: 0 auto;
  background: linear-gradient(90deg, rgba(242,169,59,0), rgba(242,169,59,.95), rgba(242,169,59,0));
}
.crt-card-title::before { margin-bottom: calc(var(--u) * 2.4); }
.crt-card-title::after { margin-top: calc(var(--u) * 2.4); }
.crt-card-line {
  display: block; margin-top: calc(var(--u) * 2.4); max-width: 30em;
  font: 600 max(15px, calc(var(--u) * 3.3)) / 1.4 var(--crt-font); color: #f1e8d1; text-wrap: balance;
  text-shadow: 0 0 calc(var(--u) * .9) rgba(242,169,59,.3);
}
.crt[data-mode="ch"] .crt-card { visibility: hidden; }

/* channel view: the art on top, the credit strip on its own row underneath, so nothing the
   artist put in the frame (the caption boxes are baked into every cameo) is ever covered */
.crt-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: #050506; }
.crt[data-mode="card"] .crt-view { visibility: hidden; }
.crt-stage { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.crt-slide { position: absolute; inset: 0; visibility: hidden; overflow: hidden; }
.crt-slide.is-on { visibility: visible; }
/* the same art, blurred and dimmed, fills the bars either side of a contained picture */
.crt-slide::before {
  content: ""; position: absolute; inset: -8%;
  background: var(--art) center / cover no-repeat;
  filter: blur(calc(var(--u) * 1.6)) brightness(.5) saturate(1.2);
}
.crt-pic {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; margin: 0;
  object-fit: contain; object-position: 50% 50%;
  -webkit-user-drag: none; user-select: none;
}
.crt-band {
  position: relative; flex: none; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * .3);
  padding: max(5px, calc(var(--u) * 1.3)) calc(var(--u) * 3) max(6px, calc(var(--u) * 1.4)) calc(var(--u) * 4.6);
  background: linear-gradient(180deg, #1a1c20, #0b0c0e);
  border-top: 2px solid rgba(242,169,59,.85);
  min-height: calc(var(--u) * 11);
}
.crt-band::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: max(5px, calc(var(--u) * 1.2)); background: var(--crt-amber);
}
.crt-band-tag {
  display: block; font: 800 max(14px, calc(var(--u) * 2.5)) / 1.15 var(--crt-font);
  letter-spacing: .1em; text-transform: uppercase; color: var(--crt-amber);
}
.crt-band-credit {
  display: block; font: 800 max(16px, calc(var(--u) * 3.7)) / 1.15 var(--crt-font);
  color: var(--crt-cream); overflow-wrap: anywhere;
}

/* static between channels: a 96px noise tile drawn once in JS, slid around with transforms only */
.crt-static {
  position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; background: #333;
}
.crt-static-tile {
  position: absolute; left: -30%; top: -30%; width: 160%; height: 160%;
  background-repeat: repeat; background-size: 192px 192px; image-rendering: pixelated; will-change: transform;
}
.crt-static::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0 26%, rgba(255,255,255,.32) 26% 31%, rgba(0,0,0,0) 31% 58%, rgba(0,0,0,.45) 58% 66%, rgba(0,0,0,0) 66%);
}
.crt.is-burst .crt-static { opacity: 1; visibility: visible; }
.crt.is-burst .crt-static-tile { animation: crt-static-shift .25s steps(1, end) both; }
@keyframes crt-static-shift {
  0%   { transform: translate3d(0, 0, 0); }
  17%  { transform: translate3d(-9%, 6%, 0); }
  34%  { transform: translate3d(7%, -14%, 0); }
  51%  { transform: translate3d(-16%, -5%, 0); }
  68%  { transform: translate3d(12%, 11%, 0); }
  85%  { transform: translate3d(-4%, 2%, 0); }
}

/* power-on: a bright line opens sideways, then up and down into a full frame, then fades */
.crt-boot { position: absolute; inset: 0; visibility: hidden; pointer-events: none; background: #000; }
.crt-boot::before {
  content: ""; position: absolute; inset: 0; transform-origin: 50% 50%; transform: scale(0, .008);
  background: #fff8e8;
  box-shadow: 0 0 calc(var(--u) * 4) calc(var(--u) * 1.1) rgba(255,248,232,.85);
}
.crt[data-power="boot"] .crt-boot { visibility: visible; animation: crt-boot-shell .95s linear 1 both; }
.crt[data-power="boot"] .crt-boot::before { animation: crt-boot-line .95s linear 1 both; }
@keyframes crt-boot-shell { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes crt-boot-line {
  0%   { transform: scale(0, .008); animation-timing-function: cubic-bezier(.25,.8,.3,1); }
  36%  { transform: scale(1, .008); animation-timing-function: cubic-bezier(.55,0,.2,1); }
  72%, 100% { transform: scale(1, 1); }
}

/* glass finish: soft glare, bloom, scanlines, faint RGB mask, vignette, deep inner shadow.
   One static layer, so it costs nothing per frame. */
.crt-fx {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 40%),
    radial-gradient(38% 24% at 20% 9%, rgba(255,255,255,.15), rgba(255,255,255,0) 100%),
    radial-gradient(76% 66% at 50% 46%, rgba(255,238,204,.07), rgba(255,238,204,0) 72%),
    radial-gradient(120% 110% at 50% 50%, rgba(0,0,0,0) 56%, rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(180deg, rgba(0,0,0,.15) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,50,50,.045) 0 1px, rgba(50,255,60,.035) 1px 2px, rgba(70,90,255,.05) 2px 3px);
  box-shadow:
    inset 0 0 calc(var(--u) * 7) calc(var(--u) * .5) rgba(0,0,0,.85),
    inset 0 0 calc(var(--u) * 1.3) rgba(0,0,0,1);
}
/* the slow hum bar rolling down the tube (transform only) */
.crt-roll {
  position: absolute; left: 0; right: 0; top: -24%; height: 24%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,244,220,.05) 50%, rgba(255,255,255,0));
  animation: crt-roll 8s linear infinite; animation-play-state: paused;
}
.crt.is-live .crt-roll { animation-play-state: running; }
.crt[data-power="off"] .crt-roll { visibility: hidden; }
@keyframes crt-roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 520%, 0); } }

/* ── the chin: sticker, grille, lamp, two knobs ───────────────────────────────────────────── */
.crt-chin {
  position: absolute; left: calc(var(--u) * 7); right: calc(var(--u) * 7);
  top: calc(var(--u) * 77.6); bottom: calc(var(--u) * 5);
  display: flex; align-items: center; gap: calc(var(--u) * 2.6);
}
/* a tiny battery sticker at two percent, drawn with no text */
.crt-batt {
  flex: none; position: relative; width: calc(var(--u) * 6); height: calc(var(--u) * 3.1); border-radius: calc(var(--u) * .7);
  background: #0d0e10; border: max(1.5px, calc(var(--u) * .34)) solid #8f958b;
  box-shadow: inset 0 0 calc(var(--u) * .8) rgba(0,0,0,.9);
}
.crt-batt::after {
  content: ""; position: absolute; right: calc(var(--u) * -1); top: 28%; width: calc(var(--u) * .7); height: 44%;
  background: #8f958b; border-radius: 0 2px 2px 0;
}
.crt-batt i { position: absolute; left: 6%; top: 14%; bottom: 14%; width: 13%; background: #d9452b; border-radius: 1px; box-shadow: 0 0 calc(var(--u) * .8) rgba(217,69,43,.7); }
.crt-grille {
  flex: 1 1 auto; min-width: 0; height: 74%; border-radius: calc(var(--u) * 1.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%),
    repeating-linear-gradient(180deg, #050607 0 calc(var(--u) * .55), #2c2e33 calc(var(--u) * .55) calc(var(--u) * 1.15));
  box-shadow: inset 0 calc(var(--u) * .4) calc(var(--u) * .9) rgba(0,0,0,.9), inset 0 0 0 calc(var(--u) * .22) rgba(0,0,0,.7), 0 calc(var(--u) * .3) 0 rgba(255,255,255,.08);
}
.crt-lamp {
  flex: none; width: calc(var(--u) * 3); height: calc(var(--u) * 3); min-width: 9px; min-height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #4a3512, #2a1e0a 70%);
  box-shadow: inset 0 0 calc(var(--u) * .6) rgba(0,0,0,.8), 0 0 0 calc(var(--u) * .3) #0d0e10, 0 calc(var(--u) * .34) 0 calc(var(--u) * .3) rgba(255,255,255,.08);
}
.crt[data-power="boot"] .crt-lamp, .crt[data-power="on"] .crt-lamp {
  background: radial-gradient(circle at 36% 30%, #ffe2a4, #f2a93b 55%, #b8721a);
  box-shadow: 0 0 calc(var(--u) * 2.2) calc(var(--u) * .4) rgba(242,169,59,.85), 0 0 0 calc(var(--u) * .3) #0d0e10, 0 calc(var(--u) * .34) 0 calc(var(--u) * .3) rgba(255,255,255,.08);
}

.crt-knob {
  --k: max(44px, calc(var(--u) * 11.2));
  position: relative; flex: none; width: var(--k); height: var(--k); min-width: 44px; min-height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--crt-cream);
  font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; appearance: none; -webkit-appearance: none;
  filter: drop-shadow(0 calc(var(--u) * .9) calc(var(--u) * .7) rgba(0,0,0,.85));
}
.crt-knob-ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.3), rgba(255,255,255,0) 46%),
    repeating-conic-gradient(from 0deg, #33363b 0 7.5deg, #15161a 7.5deg 15deg);
  box-shadow: inset 0 0 0 max(1.5px, calc(var(--u) * .3)) rgba(0,0,0,.75), inset 0 max(1px, calc(var(--u) * .3)) 0 rgba(255,255,255,.2), 0 calc(var(--u) * .3) 0 rgba(255,255,255,.07);
  transform: rotate(var(--turn, 0deg)); transition: transform .14s ease-out;
}
.crt-knob-ring::after {           /* the indicator tick */
  content: ""; position: absolute; left: 50%; top: 5.5%; width: 9%; height: 15%; transform: translateX(-50%);
  border-radius: 2px; background: var(--crt-amber); box-shadow: 0 0 6px rgba(242,169,59,.65);
}
.crt-knob-cap {
  position: absolute; inset: 22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 36% 28%, #55585f, #282a2f 62%, #17181b);
  box-shadow: inset 0 max(1px, calc(var(--u) * .25)) 0 rgba(255,255,255,.22), inset 0 -2px 4px rgba(0,0,0,.6), 0 0 0 max(1px, calc(var(--u) * .2)) rgba(0,0,0,.7);
}
.crt-knob svg {
  position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); pointer-events: none;
  fill: none; stroke: var(--crt-cream); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.crt-knob:hover .crt-knob-cap { background: radial-gradient(circle at 36% 28%, #62656d, #2f3136 62%, #1b1c1f); }
.crt-knob:active { transform: translateY(1px) scale(.97); }
.crt-knob:focus { outline: none; }
.crt-knob:focus-visible { outline: 2px solid var(--crt-amber); outline-offset: 2px; }

/* plastic feet */
.crt-feet { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 3.4); pointer-events: none; }
.crt-feet::before, .crt-feet::after {
  content: ""; position: absolute; bottom: 0; width: calc(var(--u) * 17); height: calc(var(--u) * 3.4);
  background: linear-gradient(180deg, #16171a, #08090a);
  border-radius: 0 0 calc(var(--u) * 1.8) calc(var(--u) * 1.8);
  box-shadow: inset 0 calc(var(--u) * .3) 0 rgba(255,255,255,.07);
}
.crt-feet::before { left: calc(var(--u) * 11); }
.crt-feet::after { right: calc(var(--u) * 11); }

/* visually hidden live region (announces the channel only after a button press) */
.crt-sr {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* off-screen / hidden tab: crt.js drops .is-live, which parks every looping animation */
.crt:not(.is-live) .crt-roll { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .crt-boot, .crt-static, .crt-roll { display: none !important; }
  .crt *, .crt *::before, .crt *::after { animation: none !important; transition: none !important; }
}