/* Change the channel: an old valve television in a walnut cabinet, in a dark living room with a lamp somewhere
   behind. The cabinet colours are here; the four channels carry their own colours in their drawings. */
:root {
  --room: #15110e;          /* the wall in the dark */
  --lamp: #4a3420;          /* the warm glow behind the set */
  --wood: #6b3d22;          /* the walnut of the cabinet */
  --wood-hi: #93593a;       /* the walnut where the light falls */
  --wood-lo: #3d2113;       /* the walnut in the shade */
  --bezel: #1b1714;         /* the dark frame round the tube */
  --brass: #d9b26a;         /* the trims, the badge, the leg caps */
  --plate: #e8dcc3;         /* the cream plate of the controls */
  --plate-ink: #4a3324;     /* the words on the plate */
  --knob: #2a1f19;          /* the bakelite knobs */
  --phosphor: #9dffb0;      /* the on-screen label of the channel */
  --hint: #bfae95;          /* the line under the set */
  --scan: 0.35;             /* how strong the scan lines are (the script writes it from SCANLINES) */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--room);
  color: var(--hint);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.room {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  padding: 16px;
  background:
    radial-gradient(60% 55% at 50% 42%, var(--lamp) 0%, rgba(74, 52, 32, 0.35) 45%, transparent 75%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 46px),
    var(--room);
  overflow: hidden;
}

/* ---- the set: its shape comes from the script (--ar, the screen and the dial in percent of the drawing) ---- */
.tv {
  --ar: 680 / 540;
  position: relative;
  aspect-ratio: var(--ar);
  width: min(92vw, calc((100svh - 120px) * var(--arn, 1.259)), 980px);
  will-change: transform;
}

.cabinet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.screen {
  position: absolute;
  left: var(--sx, 10.3%);
  top: var(--sy, 26.3%);
  width: var(--sw, 52.9%);
  height: var(--sh, 50%);
  border-radius: 9% / 12%;
  overflow: hidden;
  background: #050605;
  isolation: isolate;
  transform: translateZ(0);
}

.tube,
.roll,
.channel,
.flash,
.snow,
.scan,
.glass {
  position: absolute;
  inset: 0;
}

.tube {
  transform-origin: 50% 50%;
  background: #000;
}

.roll {
  will-change: transform;
}

.channel {
  visibility: hidden;
}

.channel.is-on {
  visibility: visible;
}

.channel svg {
  display: block;
  width: 100%;
  height: 100%;
}

.flash {
  background: #f4fff6;
  opacity: 0;
  pointer-events: none;
}

.snow {
  width: 100%;
  height: 100%;
  opacity: 0;
  image-rendering: auto;
  pointer-events: none;
}

/* the last point of light when the set lets go of the picture */
.spot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7%;
  aspect-ratio: 1;
  margin: -3.5% 0 0 -3.5%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 18%, rgba(220, 255, 230, 0.75) 30%, rgba(160, 255, 190, 0.18) 55%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.osd {
  position: absolute;
  top: 15%;
  right: 7%;
  margin: 0;
  font-family: 'JetBrains Mono Variable', ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(10px, 2.2vw, 22px);
  letter-spacing: 0.06em;
  color: var(--phosphor);
  text-shadow: 0 0 6px rgba(120, 255, 150, 0.55), 2px 2px 0 rgba(0, 0, 0, 0.6);
  white-space: pre;
  pointer-events: none;
}

.scan {
  pointer-events: none;
  opacity: var(--scan);
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

/* the curved glass: dark corners, a soft reflection that leans towards the pointer */
.glass {
  --gx: 30%;
  --gy: 22%;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at var(--gx) var(--gy), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 45%, transparent 70%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6), inset 0 0 28px rgba(0, 0, 0, 0.7);
  border-radius: inherit;
}

.screen__hit,
.dial {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.screen__hit {
  inset: 0;
  border-radius: inherit;
}

.dial {
  left: var(--dx, 74%);
  top: var(--dy, 28.7%);
  width: var(--dw, 14.7%);
  height: var(--dh, 18.5%);
  border-radius: 50%;
}

.screen__hit:focus-visible,
.dial:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

.hint {
  margin: 0;
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--hint);
  text-align: center;
}

/* the drawing of the cabinet */
.cab-label {
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  fill: var(--plate-ink);
}

.cab-label.is-on {
  fill: #b5372a;
}

.cab-brand {
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.32em;
  fill: var(--brass);
}

/* the channels */
.wx-title,
.wx-day {
  font: 800 17px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #10233f;
  letter-spacing: 0.04em;
}

.wx-day {
  font-size: 12px;
  font-weight: 700;
}

.wx-temp {
  font: 800 13px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #ffffff;
}

.wx-town {
  font: 700 11px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #ffffff;
  paint-order: stroke;
  stroke: #123563;
  stroke-width: 3px;
}

.wx-line {
  font: 700 13px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #ffffff;
  letter-spacing: 0.03em;
}

.nw-logo,
.nw-tag {
  font: 800 12px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #ffffff;
  letter-spacing: 0.06em;
}

.nw-live {
  font: 800 12px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #c8202f;
  letter-spacing: 0.06em;
}

.nw-head,
.nw-tick {
  font: 800 12px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #15182a;
  letter-spacing: 0.02em;
}

.nw-tick {
  font-weight: 700;
  word-spacing: 0.35em;
}

.tn-title {
  font: 800 38px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  font-stretch: 85%;
  fill: #ff6b3d;
  stroke: #ffffff;
  stroke-width: 7px;
  stroke-linejoin: round;
  paint-order: stroke;
  letter-spacing: 0.01em;
}

.qz-title {
  font: 800 22px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #ffd23f;
  letter-spacing: 0.08em;
}

.qz-q {
  font: 800 13px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #ffffff;
  letter-spacing: 0.02em;
}

.qz-a {
  font: 700 15px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #ffffff;
}

.qz-name {
  font: 700 10px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #b9a6ff;
  letter-spacing: 0.1em;
}

.qz-score {
  font: 800 14px 'Bricolage Grotesque Variable', system-ui, sans-serif;
  fill: #ffffff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}