/* Layout: a dark living room at night. A chunky toy-red TV glows on the left,
   a TV-guide column sits beside it, stacking under it on phones. */
:root {
  --room: #110d22;          /* night indigo walls */
  --room-2: #1c1638;        /* lifted surface */
  --line: #2f2858;
  --ink: #f6f2ff;
  --muted: #a49dc8;

  --tomato: #ff5a3c;        /* TV body */
  --tomato-dark: #c8331b;
  --sun: #ffc233;
  --sky: #3b8cff;
  --leaf: #2fcb75;
  --bezel: #17122a;
  --osd: #7dff9b;           /* phosphor green on-screen text */

  --glow: var(--tomato);    /* set per channel from JS */
  --p-bright: 1;            /* picture settings, set from JS */
  --p-contrast: 1.05;
  --p-colour: 1.15;
  --magenta: #ff5fb4;

  --font-display: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-osd: "VT323", "Courier New", ui-monospace, monospace;

  --step--1: 0.85rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.2rem;

  --page-max: 1400px;

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--room);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 8px; }

.room {
  min-height: 100vh;
  padding-inline: max(16px, 3vw);
  padding-block: 12px 28px;
  background:
    radial-gradient(1200px 700px at 30% 45%, color-mix(in srgb, var(--glow) 14%, transparent), transparent 70%),
    radial-gradient(900px 500px at 85% 0%, #2a1f5a55, transparent 70%),
    var(--room);
  transition: background 1.2s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--page-max);
  width: 100%;
  margin-inline: auto;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-antu { width: 44px; height: 52px; transform: rotate(-8deg); transition: transform .3s; }
.logo:hover .logo-antu { transform: rotate(6deg) translateY(-2px); }
.logo-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
}
.l1 { color: var(--sun); text-shadow: 3px 3px 0 var(--tomato-dark); }
.l2 {
  color: var(--ink);
  background: var(--tomato);
  border-radius: 12px;
  padding: 0 8px;
  margin-left: 4px;
  transform: rotate(-4deg) translateY(-2px);
  display: inline-block;
  box-shadow: 3px 3px 0 #000a;
}
.logo-tld { font-family: var(--font-body); font-weight: 800; font-size: var(--step--1); color: var(--sky); margin-left: 6px; }

/* ---------- Stage ---------- */
.stage {
  /* The TV is sized from the screen height so the whole TV fits on screen. It starts 90px down
     (room padding plus the antenna), and its height, feet included, is about 0.75 x width + 80px
     above 800px wide, or 0.51 x width + 272px below that, so take the smaller fit. */
  --tv-w: clamp(460px, min(calc((100dvh - 184px) * 1.32), calc((100dvh - 412px) * 1.96)), 1040px);
  display: grid;
  grid-template-columns: minmax(0, var(--tv-w)) minmax(300px, 400px);
  justify-content: center;
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 14px;
  align-items: start;
  padding-top: 78px; /* room for the antenna */
  max-width: var(--page-max);
  width: 100%;
  margin-inline: auto;
}
@media (max-width: 900px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The TV ---------- */
.tv-wrap { position: relative; min-width: 0; }
.tv-glow {
  position: absolute; inset: 20% 6% 10%;
  background: var(--glow);
  filter: blur(80px);
  opacity: .0;
  transition: opacity 1s, background 1s;
  pointer-events: none;
}
.is-on .tv-glow { opacity: .35; }

.tv-top {
  position: absolute; top: -78px; left: 50%; transform: translateX(-50%);
  width: 190px; max-width: 70%;
  z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tv-top:focus-visible { outline-offset: 0; }
.antenna { display: block; width: 100%; height: auto; overflow: visible; }
.antenna .tip { fill: #f1eefc; stroke: #1a1430; stroke-width: 2; }

.tv {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, var(--tomato) 0%, var(--tomato-dark) 100%);
  border-radius: 38px;
  padding: clamp(12px, 2.4vw, 24px);
  padding-bottom: 0;
  box-shadow:
    inset 0 6px 0 #ffffff40,
    inset 0 -10px 0 #00000040,
    0 4px 0 #8c1f0e,
    0 40px 70px #000000b0;
}
.bezel {
  background: var(--bezel);
  border-radius: 28px;
  padding: clamp(8px, 1.6vw, 16px);
  box-shadow: inset 0 0 0 3px #00000080, inset 0 8px 24px #000;
}
.screen {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  overflow: hidden;
  border-radius: 10% / 13%;
  background: #05040a;
  isolation: isolate;
}

.picture { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.is-on .picture { opacity: 1; }
.picture iframe, #yt {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  transform: scale(1.04);  /* crops YouTube's edge chrome a little */
  filter: brightness(var(--p-bright)) contrast(var(--p-contrast)) saturate(var(--p-colour));
  transition: transform .4s ease;
}

/* overlays */
.scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: repeating-linear-gradient(180deg, #00000038 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.glass {
  position: absolute; inset: 0; pointer-events: none; z-index: 7;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 60%, #000000b5 100%),
    linear-gradient(135deg, #ffffff1c 0%, transparent 28%);
  box-shadow: inset 0 0 40px #000c, inset 0 0 4px #000;
}
.is-on .glass { animation: flicker 6s infinite; }
.shield { position: absolute; inset: 0; z-index: 8; } /* stops clicks reaching the player: no scrubbing */

.static {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5;
  image-rendering: pixelated; opacity: 0; pointer-events: none;
}
.static.is-active { opacity: 1; }

/* ---------- Program cards ---------- */
.card {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; text-align: center;
  gap: 4px; padding: 8%;
  color: var(--ink);
  overflow: hidden;
}
.card-bg {
  position: absolute; inset: -50%; z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--glow) 55%, #2a2150) 0 14%, transparent 14.5%),
    repeating-conic-gradient(from 0deg at 50% 50%, #2a2150 0 15deg, #221a45 15deg 30deg);
}
.card[data-kind="ident"] .card-bg { animation: spin 18s linear infinite; }
.card-antu { width: clamp(70px, 18%, 130px); aspect-ratio: 120 / 140; height: auto; animation: bob 1.6s ease-in-out infinite; }
.card-kicker {
  margin: 8px 0 0; font-weight: 800; font-size: clamp(.65rem, 1.6vw, .85rem);
  letter-spacing: .14em; text-transform: uppercase; color: var(--sun);
}
.card-title {
  margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.05;
  font-size: clamp(1.2rem, 4.4vw, 2.6rem); text-wrap: balance;
  text-shadow: 3px 3px 0 #000a;
}
.card-sub { margin: 4px 0 0; color: #d6d0f2; font-size: clamp(.7rem, 1.7vw, .95rem); max-width: 40ch; }

/* ---------- On-screen display ---------- */
.osd {
  position: absolute; top: 7%; right: 8%; z-index: 9;
  font-family: var(--font-osd); color: var(--osd);
  font-size: clamp(1.6rem, 5.5vw, 3.6rem); line-height: 1; text-align: right;
  text-shadow: 0 0 6px #7dff9baa, 2px 2px 0 #000;
  opacity: 0; transition: opacity .2s; pointer-events: none;
  white-space: pre;
}
.osd.is-shown { opacity: 1; }
.osd small { display: block; font-size: .5em; }

.bug {
  position: absolute; top: 4.5%; left: 5.5%; z-index: 4;
  display: none; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(.6rem, 1.5vw, .85rem);
  color: #fff; opacity: .75; letter-spacing: .06em;
}
.bug svg { width: clamp(16px, 3vw, 26px); aspect-ratio: 120/140; height: auto; }
.is-on .bug { display: flex; }

.banner {
  position: absolute; left: 6%; right: 6%; bottom: 7%; z-index: 9;
  display: flex; gap: 12px; align-items: stretch;
  background: linear-gradient(180deg, #1c1638f0, #110d22f0);
  border: 2px solid color-mix(in srgb, var(--glow) 70%, #fff);
  border-radius: 16px; padding: 10px 14px;
  /* Hidden: slide down and fade out completely, so no edge peeks above the bezel */
  transform: translateY(40%); opacity: 0; visibility: hidden;
  transition: transform .35s cubic-bezier(.3,1.4,.5,1), opacity .25s ease, visibility 0s linear .35s;
  font-size: clamp(.65rem, 1.6vw, .9rem);
}
.banner.is-shown { transform: none; opacity: 1; visibility: visible; transition: transform .35s cubic-bezier(.3,1.4,.5,1), opacity .2s ease, visibility 0s; }
.banner-ch {
  display: grid; place-items: center;
  min-width: 3.2em; padding-inline: 6px; border-radius: 10px;
  background: var(--glow); color: #120d22;
  font-family: var(--font-osd); font-size: 2.6em; line-height: 1;
}
.banner-body { min-width: 0; flex: 1; display: grid; gap: 2px; }
.banner-body p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-name { font-family: var(--font-display); font-weight: 800; font-size: 1.25em; line-height: 1.1; }
.banner b { color: var(--sun); text-transform: uppercase; font-size: .8em; letter-spacing: .1em; margin-right: 4px; }
.banner-next { color: var(--muted); }
.banner-bar { height: 5px; border-radius: 3px; background: #ffffff22; overflow: hidden; }
.banner-bar span { display: block; height: 100%; background: var(--glow); width: 0; }

/* ---------- Power-off screen ---------- */
.off {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 8%;
  background: radial-gradient(circle at 50% 45%, #1d1838 0%, #07060d 70%);
}
.is-on .off { display: none; }
.tune-in {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 3.4vw, 1.9rem);
  padding: .35em 1.1em .3em .7em; border: 0; border-radius: 999px;
  background: var(--sun); color: #1a1430;
  box-shadow: 0 6px 0 #b98200, 0 0 0 6px #ffc23326, 0 0 60px #ffc23355;
  transition: transform .12s, box-shadow .12s;
}
.tune-in:hover { transform: translateY(-2px); }
.tune-in:active { transform: translateY(4px); box-shadow: 0 2px 0 #b98200, 0 0 0 6px #ffc23326; }
.tune-in-icon {
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: .16em solid currentColor; border-top-color: transparent; position: relative;
}
.tune-in-icon::after {
  content: ""; position: absolute; left: 50%; top: -.28em; width: .16em; height: .55em;
  background: currentColor; transform: translateX(-50%); border-radius: 2px;
}
.off-hint { margin: 0; color: var(--muted); font-size: clamp(.75rem, 1.8vw, 1rem); }

/* CRT power on / off */
.screen.powering-on .picture,
.screen.powering-on .card { animation: crt-on .55s ease-out both; }
.screen.powering-off::after {
  content: ""; position: absolute; inset: 0; z-index: 11; background: #fff;
  animation: crt-off .45s ease-in forwards;
}

/* ---------- Control panel ---------- */
.panel {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 6px 12px;
}
/* The site logo as the TV's name plate: mascot, "Cartoon", the TV badge and .xyz, on a dark plate. */
.brandplate {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: 12px; text-decoration: none;
  background: #1a1430e0; box-shadow: inset 0 2px 6px #000a, 0 1px 0 #ffffff30;
}
.brandplate .logo-antu { width: 24px; height: 28px; flex: none; transform: rotate(-8deg); transition: transform .3s; }
.brandplate:hover .logo-antu { transform: rotate(6deg) translateY(-1px); }
.brandplate .logo-word { font-size: 1.25rem; }
.brandplate .l1 { text-shadow: 2px 2px 0 var(--tomato-dark); }
.brandplate .l2 { margin-left: 3px; padding: 0 5px; border-radius: 7px; box-shadow: 2px 2px 0 #000a; }
.brandplate .logo-tld { font-size: .6rem; margin-left: 4px; }
/* VCR-style clock on the TV panel. Click to switch 12/24-hour. */
.vcr {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px 4px; border: 0; border-radius: 8px;
  background: #0b0818; box-shadow: inset 0 2px 6px #000c, 0 1px 0 #ffffff30;
  font-family: var(--font-osd); line-height: 1; color: var(--osd); text-shadow: 0 0 8px #7dff9b88; cursor: pointer;
}
.vcr .clock-time { font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.vcr .clock-tz { font-size: 1rem; color: var(--muted); text-shadow: none; }
.vcr:hover { box-shadow: inset 0 2px 6px #000c, 0 0 0 2px #7dff9b55; }
/* Narrower TVs drop the speaker grille first, then the time zone. */
.tv { container-type: inline-size; }
/* Narrower TVs give things up in order: speaker grille, time zone, .xyz, the clock, then the VOL
   knobs. The CartoonTV name and the other knobs always stay. */
@container (max-width: 860px) { .grille { display: none; } .panel { grid-template-columns: auto auto minmax(0, 1fr); } }
@container (max-width: 800px) { .vcr .clock-tz { display: none; } }
@container (max-width: 760px) { .brandplate .logo-tld { display: none; } }
@container (max-width: 720px) { .vcr { display: none; } .panel { grid-template-columns: auto minmax(0, 1fr); } }
@container (max-width: 700px) { #volDown, #volUp { display: none; } }
.grille {
  height: 34px; min-width: 40px; border-radius: 10px;
  background: radial-gradient(circle, #00000070 2px, transparent 2.5px) 0 0 / 9px 9px;
}
.controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.knob {
  display: grid; place-items: center; align-content: center; gap: 2px; line-height: 1;
  width: 44px; height: 40px; border: 2.5px solid #1a1430; border-radius: 12px;
  background: linear-gradient(180deg, #ffe596 0%, #ffc233 55%, #f2a90f 100%);
  color: #2b1a00; font-weight: 800; font-size: .95rem;
  box-shadow: 0 4px 0 #1a1430, inset 0 2px 0 #ffffffaa, inset 0 -3px 0 #00000022;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.knob span { font-size: .48rem; letter-spacing: .12em; opacity: .7; }
.knob:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 5px 0 #1a1430, inset 0 2px 0 #ffffffaa, inset 0 -3px 0 #00000022; }
.knob:active { transform: translateY(4px); box-shadow: 0 0 0 #1a1430, inset 0 3px 5px #0000003a; }
.knob[aria-pressed="true"] { background: linear-gradient(180deg, #b5d6ff 0%, #6aa9ff 55%, #3b8cff 100%); color: #061633; }
/* Power: a red push button with a power symbol and a status light. */
.power {
  position: relative; display: grid; place-items: center; margin-left: 6px;
  width: 48px; height: 48px; border-radius: 50%; border: 2.5px solid #1a1430;
  background: radial-gradient(circle at 35% 30%, #ff9a83 0%, #ff5a3c 45%, #c8331b 100%);
  color: #fff; font-size: 17px;
  box-shadow: 0 4px 0 #1a1430, inset 0 2px 0 #ffffff70, inset 0 -4px 0 #00000030;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.power .tune-in-icon { filter: drop-shadow(0 1px 0 #0005); }
.power:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 5px 0 #1a1430, inset 0 2px 0 #ffffff70, inset 0 -4px 0 #00000030; }
.power:active { transform: translateY(4px); box-shadow: 0 0 0 #1a1430, inset 0 3px 6px #0000004a; }
.led {
  position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #1a1430; background: #5a1a10; box-shadow: inset 0 1px 2px #0008;
}
.is-on .led { background: #46ff8a; box-shadow: 0 0 8px #46ff8a, 0 0 2px #fff; }
/* These come after the base knob and control rules so they win. */
@container (max-width: 640px) { .knob { width: 40px; } }
/* Smallest TVs: the logo gets its own row above the knobs, like on phones. */
@container (max-width: 560px) {
  .panel { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; }
  .controls { flex-wrap: nowrap; justify-content: center; }
}
@media (max-width: 560px) {
  .panel { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
  .grille { display: none; }
  .controls { justify-content: center; gap: 6px; }
  .knob { width: 40px; height: 36px; }
  .power { width: 42px; height: 42px; }
}

.tv-feet { display: flex; justify-content: space-between; padding-inline: 14%; }
.tv-feet span { width: 70px; height: 14px; background: #2b2450; border-radius: 0 0 14px 14px; }

kbd {
  font-family: var(--font-body); font-weight: 800; font-size: .75rem;
  background: var(--room-2); border: 2px solid var(--line); border-bottom-width: 4px;
  border-radius: 7px; padding: 1px 7px; color: var(--ink);
}
/* ---------- Sidebar ---------- */
.side {
  min-width: 0;
  background: var(--room-2);
  border: 3px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 8px 0 #0b0818;
  overflow: hidden;
  display: flex; flex-direction: column;
  /* Never taller than the TV column: the row height comes from the TV, the panel scrolls. */
  align-self: stretch; height: 0; min-height: 100%;
}
.panel-body {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
@media (max-width: 900px) {
  .side { height: auto; min-height: 0; max-height: min(760px, 88dvh); }
}
.tabs { flex: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px; background: #0000002e; }
.tab {
  border: 0; border-radius: 14px; padding: 9px 6px;
  background: transparent; color: var(--muted);
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.1;
}
.tab:hover { color: var(--ink); background: #ffffff0d; }
.tab[aria-selected="true"] { background: var(--sun); color: #1a1430; box-shadow: 0 3px 0 #a06f00; }
.panel-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 18px; display: grid; gap: 18px; align-content: start;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.side-section h3 { margin: 0 0 8px; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.side-section h3 span { color: var(--ink); }
.hint { margin: 0; color: var(--muted); }
.eyebrow { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sun); }

.later { list-style: none; margin: 0; padding: 0; display: grid; }
.later li { display: grid; grid-template-columns: 4.8em minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 2px dashed var(--line); }
.later li:first-child { border-top: 0; }
.l-time { font-family: var(--font-osd); font-size: 1.3rem; line-height: 1.15; color: var(--osd); font-variant-numeric: tabular-nums; }
.l-body { display: grid; min-width: 0; }
.l-title { font-weight: 800; line-height: 1.25; }
.l-meta { color: var(--muted); font-size: var(--step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ch-btn {
  width: 100%; text-align: left; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 7px; border-radius: 18px; background: #ffffff08; border: 2px solid transparent;
  transition: background .15s, border-color .15s;
}
.ch-btn:hover { background: #ffffff12; }
.ch-btn[aria-current="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ch-art { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0b0818; }
.ch-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-num {
  position: absolute; left: 6px; bottom: 6px; padding: 0 6px; border-radius: 8px;
  background: var(--c); color: #120d22; font-family: var(--font-osd); font-size: 1.3rem; line-height: 1.1;
}
.ch-text { display: grid; gap: 3px; min-width: 0; }
.ch-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; }
.ch-now { color: var(--muted); font-size: var(--step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-bar { height: 4px; border-radius: 2px; background: #ffffff18; overflow: hidden; }
.ch-bar span { display: block; height: 100%; background: var(--c); }

/* Settings: styled like an old TV's on-screen menu */
.settings fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.settings legend {
  font-family: var(--font-osd); font-size: 1.35rem; color: var(--osd); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 4px; padding: 0;
}
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 0; border-top: 2px dashed var(--line);
}
.row > span { display: grid; font-weight: 700; }
.row small { color: var(--muted); font-weight: 600; font-size: .78rem; line-height: 1.35; }
.settings select {
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink);
  background: var(--room); border: 2px solid var(--line); border-radius: 10px; padding: 6px 8px; max-width: 11rem;
}
.settings input[type="range"] { width: 9.5rem; accent-color: var(--sun); }
.switch {
  appearance: none; width: 46px; height: 26px; border-radius: 999px; margin: 0; position: relative; cursor: pointer;
  background: var(--room); border: 2px solid var(--line); transition: background .15s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s;
}
.switch:checked { background: var(--leaf); border-color: var(--leaf); }
.switch:checked::after { transform: translateX(20px); background: #fff; }
.reset {
  justify-self: start; margin-top: 6px; border: 2px solid var(--line); background: transparent; color: var(--ink);
  font-weight: 800; border-radius: 10px; padding: 6px 12px;
}
.reset:hover { border-color: var(--muted); }

/* Picture settings applied to the screen */
.screen.is-zoomed #yt { transform: scale(1.36); }
.no-crt .scanlines { display: none; }
.no-crt .glass { animation: none; }

/* ---------- TV guide grid ---------- */
.epg {
  max-width: var(--page-max); width: 100%; margin-inline: auto;
  background: var(--room-2); border: 3px solid var(--line); border-radius: 28px; box-shadow: 0 8px 0 #0b0818;
  padding: 18px 0 8px; display: grid; gap: 10px;
  --epg-label: 150px;
}
.epg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-inline: 18px; }
.epg-head h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.1; }
.epg-head p { margin: 0; color: var(--muted); font-size: var(--step--1); }
.epg-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; }
.epg-grid { position: relative; width: max-content; min-width: 100%; }
.epg-row { display: flex; align-items: stretch; min-height: 58px; }
.epg-label {
  position: sticky; left: 0; z-index: 2; flex: 0 0 var(--epg-label); width: var(--epg-label);
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 18px; text-align: left;
  background: var(--room-2); border: 0; border-right: 2px solid var(--line);
  color: var(--ink); font-weight: 800; font-size: var(--step--1); line-height: 1.1;
}
.epg-times .epg-label { color: var(--muted); font-weight: 700; }
.epg-num {
  flex: none; display: grid; place-items: center; min-width: 2.2em; padding: 2px 4px; border-radius: 8px;
  background: var(--c); color: #120d22; font-family: var(--font-osd); font-size: 1.3rem; line-height: 1;
}
.epg-row.is-current .epg-label { box-shadow: inset 4px 0 0 var(--c); }
.epg-track { position: relative; flex: none; }
.epg-times { min-height: 30px; }
.epg-tick {
  position: absolute; top: 4px; padding-left: 6px; border-left: 2px solid var(--line);
  font-family: var(--font-osd); font-size: 1.15rem; color: var(--osd); white-space: nowrap;
}
.epg-prog {
  position: absolute; top: 4px; bottom: 4px; display: grid; align-content: center; gap: 1px;
  padding: 4px 10px; overflow: hidden; text-align: left;
  border: 0; border-left: 3px solid var(--room-2); border-radius: 12px;
  background: #ffffff0d; color: var(--ink); cursor: default;
}
.epg-prog b, .epg-prog span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epg-prog b { font-size: .88rem; }
.epg-prog span { font-size: .74rem; color: var(--muted); }
.epg-prog.is-cut { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.epg-prog.is-live { background: color-mix(in srgb, var(--c) 26%, transparent); cursor: pointer; }
.epg-prog.is-live:hover { background: color-mix(in srgb, var(--c) 40%, transparent); }
.epg-prog.is-live span { color: var(--ink); }
.epg-nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--tomato); z-index: 1; pointer-events: none; box-shadow: 0 0 8px var(--tomato); }
@media (max-width: 560px) { .epg { --epg-label: 64px; } .epg-name { display: none; } .epg-label { padding-left: 12px; } }

/* Footer: a broadcast sign-off */
.footer {
  max-width: var(--page-max); width: 100%; margin-inline: auto; margin-top: 24px;
  border-radius: 28px; overflow: hidden; background: var(--room-2); border: 3px solid var(--line); box-shadow: 0 8px 0 #0b0818;
  color: var(--muted); font-size: var(--step--1);
}
.bars { display: grid; grid-template-columns: repeat(7, 1fr); height: 14px; }
.bars span:nth-child(1) { background: var(--ink); }
.bars span:nth-child(2) { background: var(--sun); }
.bars span:nth-child(3) { background: #1fc8c8; }
.bars span:nth-child(4) { background: var(--leaf); }
.bars span:nth-child(5) { background: var(--magenta); }
.bars span:nth-child(6) { background: var(--tomato); }
.bars span:nth-child(7) { background: var(--sky); }
/* ---------- Animations ---------- */
@keyframes blink { 50% { opacity: .2; } }
@keyframes bob { 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 48% { opacity: 1; } 50% { opacity: .92; } 52% { opacity: 1; } }
@keyframes crt-on {
  0% { transform: scale(1, .004); filter: brightness(6); }
  45% { transform: scale(1, .004); filter: brightness(6); }
  100% { transform: none; filter: none; }
}
@keyframes crt-off {
  0% { transform: scale(1, 1); opacity: .9; }
  50% { transform: scale(1, .004); opacity: 1; }
  100% { transform: scale(0, .004); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 520px) {
  .logo-word { font-size: var(--step-2); }
  .logo-antu { width: 34px; height: 40px; }
  .tv { border-radius: 26px; }
  .bezel { border-radius: 20px; }
  .panel-body { padding: 14px; }
  .ch-btn { grid-template-columns: 84px minmax(0, 1fr); }
  .settings input[type="range"] { width: 7.5rem; }
}

/* ---------- Heading, about, FAQ, consent ---------- */
.logo-h1 { margin: 0; font-size: inherit; font-weight: inherit; }

/* About section: how it works, what's on, questions */
.about {
  max-width: var(--page-max); width: 100%; margin-inline: auto;
  display: grid; gap: clamp(40px, 6vw, 72px);
  padding-block: clamp(24px, 4vw, 48px) 16px;
}
.about h1, .about h2 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.05; text-wrap: balance; }
.about h3 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.15; }
.about p { margin: 0; }

.intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px) { .intro { grid-template-columns: minmax(0, 1fr); } }
.about-head { display: grid; gap: 12px; justify-items: start; }
.about-eyebrow {
  font-family: var(--font-osd); font-size: 1.35rem; line-height: 1; color: var(--osd);
  text-shadow: 0 0 8px #7dff9b66; text-transform: uppercase; letter-spacing: .04em;
}
.about-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); color: var(--sun); text-shadow: 3px 3px 0 var(--tomato-dark); }
.about-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink); max-width: 34rem; }
.tune-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  padding: .35em 1.1em .3em .75em; border: 0; border-radius: 999px;
  background: var(--sun); color: #1a1430; box-shadow: 0 5px 0 #b98200;
  transition: transform .12s, box-shadow .12s;
}
.tune-cta:hover { transform: translateY(-2px); }
.tune-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #b98200; }

/* An old TV's on-screen menu */
.osd-menu {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 26px / 30px; background: radial-gradient(circle at 50% 35%, #1d1838 0%, #07060d 80%);
  border: 10px solid var(--bezel); box-shadow: 0 0 0 3px var(--line), 0 10px 0 #0b0818, inset 0 0 60px #000;
  font-family: var(--font-osd); color: var(--osd);
}
.osd-menu::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, #ffffff07 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, #000a 100%);
}
.osd-title {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 2px dashed var(--line); font-size: 1.6rem; line-height: 1; text-transform: uppercase;
  text-shadow: 0 0 8px #7dff9b88;
}
.osd-title span:last-child { opacity: .55; }
.osd-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.osd-rows li {
  position: relative; display: grid; grid-template-columns: 2em 6.2em minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 10px 12px 10px 28px; border-radius: 10px; transition: background .25s;
}
.osd-rows li::before {
  content: "▶"; position: absolute; left: 8px; top: 14px; font-size: .9rem; color: var(--sun);
  opacity: 0; transition: opacity .2s;
}
.osd-rows li.is-selected { background: #ffc23314; box-shadow: inset 0 0 0 2px #ffc23340; }
.osd-rows li.is-selected::before { opacity: 1; animation: blink 1s steps(2) infinite; }
.osd-key {
  display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 7px; align-self: center;
  background: var(--c); color: #120d22; font-size: 1.3rem; line-height: 1; box-shadow: 0 3px 0 #0008; transform: rotate(-4deg);
}
.osd-rows li:nth-child(1) { --c: var(--tomato); }
.osd-rows li:nth-child(2) { --c: var(--magenta); }
.osd-rows li:nth-child(3) { --c: var(--sky); }
.osd-label { font-size: 1.5rem; line-height: 1; letter-spacing: .04em; color: var(--ink); }
.osd-rows li.is-selected .osd-label { color: var(--sun); }
.osd-text { font-family: var(--font-body); font-size: .95rem; color: var(--muted); }
.osd-status {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding-top: 12px;
  border-top: 2px dashed var(--line); font-size: 1.1rem; line-height: 1; color: var(--osd);
}
.osd-status span { display: inline-flex; align-items: center; gap: 7px; }
.osd-status span::before { content: ""; width: 6px; height: 6px; background: var(--sun); }
@media (max-width: 560px) {
  .osd-rows li { grid-template-columns: 2em minmax(0, 1fr); }
  .osd-text { grid-column: 2; }
}

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.section-head p { font-family: var(--font-osd); font-size: 1.3rem; line-height: 1; color: var(--osd); }

/* What's on: a full-day listings grid (06:00 to 06:00), one column per channel */
.about > *, .whats-on { min-width: 0; }

/* What's on: one row per channel, with a tile for every show it airs */
.channel-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.channel-row {
  display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: start;
  padding: clamp(18px, 2.4vw, 26px); border-radius: 26px; background: var(--room-2); border: 3px solid var(--line); box-shadow: 0 8px 0 #0b0818;
}
.channel-info { display: grid; gap: 8px; justify-items: start; }
.channel-num {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; margin-bottom: 4px;
  background: var(--c); color: #120d22; font-family: var(--font-osd); font-size: 2.5rem; line-height: 1;
  box-shadow: 0 4px 0 #0007; transform: rotate(-3deg);
}
.channel-info h3 { font-size: 1.45rem; }
.channel-info p { color: var(--muted); }
.channel-now { min-height: 1.4em; font-size: var(--step--1); }
.channel-now:empty { display: none; }
.channel-now b { color: var(--ink); }
.channel-now::before {
  content: "On now"; display: inline-block; margin-right: 8px; vertical-align: 1px; padding: 1px 7px; border-radius: 999px;
  background: var(--tomato); color: #fff; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.channel-watch {
  margin-top: 6px; border: 0; border-radius: 999px; padding: 8px 16px;
  background: var(--c); color: #120d22; font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  box-shadow: 0 4px 0 #0008; transition: transform .12s, box-shadow .12s;
}
.channel-watch:hover { transform: translateY(-2px); }
.channel-watch:active { transform: translateY(3px); box-shadow: 0 1px 0 #0008; }

.channel-shows { display: grid; gap: 14px; min-width: 0; }
.show-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.show-tiles.is-small { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.show-tiles.is-small b { font-size: .8rem; }
.tiles-sub {
  margin: 6px 0 0; padding-top: 14px; border-top: 2px dashed var(--line);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.show-tile { display: grid; gap: 8px; align-content: start; }
.show-tile img {
  width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 12px; /* 4:3 crops the black side bars of classic cartoons */
  background: #0b0818; border: 2px solid color-mix(in srgb, var(--c) 35%, var(--room-2));
}
.show-tile b { font-size: .88rem; line-height: 1.25; }
@media (max-width: 760px) {
  .channel-row { grid-template-columns: minmax(0, 1fr); }
  .show-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* FAQ */
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.faq details { border-radius: 18px; background: var(--room-2); border: 3px solid var(--line); transition: border-color .15s; }
.faq details[open] { border-color: #ffc23366; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; font-weight: 800;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: #ffffff10; color: var(--sun); font-family: var(--font-display); font-size: 1.2rem; line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--sun); }
.faq details p { padding: 0 18px 16px; color: var(--muted); max-width: 60ch; }

.consent {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  max-width: 560px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 14px 16px; border-radius: 18px;
  background: var(--room-2); border: 3px solid var(--line); box-shadow: 0 8px 0 #0b0818, 0 20px 50px #000a;
}
.consent p { margin: 0; flex: 1 1 260px; font-size: var(--step--1); }
.consent-actions { display: flex; gap: 8px; }
.consent button { border: 0; border-radius: 12px; padding: 8px 14px; font-weight: 800; }
.consent-no { background: transparent; color: var(--muted); border: 2px solid var(--line) !important; }
.consent-yes { background: var(--sun); color: #1a1430; box-shadow: 0 3px 0 #a06f00; }

/* Current program: first row of the "Now & next" list */
.later li.is-now {
  margin: 0 -10px 4px; padding: 10px; border: 0; border-radius: 14px;
  background: color-mix(in srgb, var(--glow) 16%, transparent);
}
.later li.is-now + li { border-top: 0; }
.l-now {
  display: inline-block; margin-bottom: 3px; padding: 1px 7px; border-radius: 999px; justify-self: start;
  background: var(--tomato); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.l-bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: #ffffff1f; overflow: hidden; }
.l-bar span { display: block; height: 100%; width: 0; background: var(--glow); }
.l-link { justify-self: start; margin-top: 5px; color: var(--sky); font-size: .78rem; font-weight: 700; }

.shortcuts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.shortcuts li { display: flex; align-items: center; gap: 8px; font-size: var(--step--1); font-weight: 700; color: var(--muted); }
.shortcuts li > span { flex: none; min-width: 4.6em; color: var(--muted); }
@media (hover: none) { .settings fieldset:has(.shortcuts) { display: none; } }
@media (max-width: 760px) { .faq-list { grid-template-columns: minmax(0, 1fr); } }



/* ---------- Motion ---------- */
/* Standby screen: faint static and a pulsing Tune in button */
.off { overflow: hidden; }
.off-static { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .07; pointer-events: none; }
.off .tune-in, .off .off-hint { position: relative; z-index: 1; }
.tune-in { animation: beckon 2.4s ease-in-out infinite; }
.tune-in:hover, .tune-in:active { animation: none; }

/* Antenna: idle sway, a wobble while tuning, glowing tips when on */
/* Only the ears move; the base stays put */
.antenna .ears { transform-box: view-box; transform-origin: 120px 64px; animation: sway 7s ease-in-out infinite; }
/* Each ear pivots on its own hinge. Hover: they perk up and wiggle. Tap: someone fiddles with them. */
.antenna .ear { transform-box: view-box; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.antenna .ear-l { transform-origin: 113px 64px; }
.antenna .ear-r { transform-origin: 127px 64px; }
.tv-top:hover .ear-l { animation: ear-wiggle-l .9s ease-in-out infinite; }
.tv-top:hover .ear-r { animation: ear-wiggle-r .9s ease-in-out .15s infinite; }
.tv-top:hover .antenna .tip { filter: brightness(1.3); }
.tv-top.is-adjusting .ear-l { animation: ear-fiddle-l .9s cubic-bezier(.3, 1.4, .5, 1); }
.tv-top.is-adjusting .ear-r { animation: ear-fiddle-r .9s cubic-bezier(.3, 1.4, .5, 1); }
.tv-top.is-adjusting .antenna .dial { animation: dial .9s ease-in-out; }
.tv-top.is-adjusting .antenna { animation: hop .45s cubic-bezier(.3, 1.6, .5, 1); }
.antenna .wave { stroke: var(--osd); opacity: 0; transform-box: fill-box; transform-origin: center; }
.tv-top.is-adjusting .wave { animation: wave 1s ease-out; }
.tv-top.is-adjusting .wave.w2 { animation-delay: .25s; }
@keyframes ear-wiggle-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes ear-wiggle-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes ear-fiddle-l { 0% { transform: rotate(0); } 25% { transform: rotate(-22deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
@keyframes ear-fiddle-r { 0% { transform: rotate(0); } 25% { transform: rotate(18deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
@keyframes wave { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
.antenna .dial { transform-box: view-box; transform-origin: 145px 85px; }
.tv-top.is-tuning .antenna .ears { animation: wobble .7s ease-in-out; }
.tv-top.is-tuning .antenna .dial { animation: dial .7s ease-in-out; }
.antenna .tip { transition: fill .3s; }
.is-on .antenna .tip-l { fill: var(--tomato); animation: tip 1.8s ease-in-out infinite alternate; }
.is-on .antenna .tip-r { fill: var(--sky); animation: tip 1.8s ease-in-out .9s infinite alternate; }

/* Power light breathes in standby */
.led { animation: breathe 2.6s ease-in-out infinite; }
.is-on .led { animation: none; }

/* Speaker grille pulses while sound plays */
.is-sound .grille { animation: speaker .42s ease-in-out infinite alternate; }

/* Picture rolls briefly when changing channel (old vertical hold) */
.picture.is-rolling { animation: vroll .5s ease-out; }

/* Header clock colon blinks */
.vcr .colon { animation: blink 1s steps(2) infinite; }

/* Sidebar: live dot on "On now", soft shine on progress bars */
.l-now::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  margin-right: 5px; vertical-align: 1px; animation: blink 1.2s steps(2) infinite;
}
.l-bar span, .ch-bar span {
  background-image: linear-gradient(90deg, transparent 0 35%, #ffffff55 50%, transparent 65% 100%);
  background-size: 220% 100%; background-repeat: no-repeat; animation: shine 3.2s linear infinite;
}
.l-bar span { background-color: var(--glow); }
.ch-bar span { background-color: var(--c); }

@keyframes snooze { 0%, 100% { transform: translateX(-50%) scale(1, 1); } 50% { transform: translateX(-50%) scale(1.03, .97) translateY(3%); } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .8; } 100% { opacity: 0; transform: translate(2.2em, -3.2em) scale(1.2); } }
@keyframes beckon { 0%, 100% { box-shadow: 0 6px 0 #b98200, 0 0 0 6px #ffc23326, 0 0 60px #ffc23355; } 50% { box-shadow: 0 6px 0 #b98200, 0 0 0 14px #ffc23314, 0 0 90px #ffc23377; } }
@keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes wobble { 0% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 45% { transform: rotate(5deg); } 70% { transform: rotate(-2.5deg); } 100% { transform: rotate(0); } }
@keyframes tip { from { opacity: .5; } to { opacity: 1; filter: brightness(1.35); } }
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes speaker { from { opacity: .7; } to { opacity: 1; filter: brightness(1.6); } }
@keyframes vroll { 0% { transform: translateY(0); } 30% { transform: translateY(-9%) skewY(-1deg); } 60% { transform: translateY(4%); } 100% { transform: translateY(0); } }
@keyframes shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-8deg); } 80% { transform: rotate(7deg); } 90% { transform: rotate(-4deg); } }

/* Break card: rotating promos */
.card-poster {
  width: clamp(110px, 32%, 240px); max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; border: 3px solid var(--glow); box-shadow: 0 6px 0 #0008; margin-bottom: 6px;
}
.card.has-poster .card-antu { display: none; }
.card-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; width: min(100%, 26em); font-size: clamp(.75rem, 1.9vw, 1.05rem); }
.card-list li {
  display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 10px; align-items: baseline; text-align: left;
  padding: 6px 10px; border-radius: 10px; background: #00000059;
}
.card-list span { font-family: var(--font-osd); font-size: 1.3em; line-height: 1; color: var(--osd); }
.card-list b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.slide-in > :not(.card-bg):not(.card-antu) { animation: slidein .45s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


@keyframes dial { 0% { transform: rotate(0); } 50% { transform: rotate(140deg); } 100% { transform: rotate(0); } }

/* Footer credit bar */
.foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 14px clamp(18px, 3vw, 30px) 18px; border-top: 2px dashed var(--line);
}
.creator {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px;
  background: var(--room); border: 2px solid var(--line); color: var(--ink); text-decoration: none;
  box-shadow: 0 4px 0 #0b0818; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.creator:hover { transform: translateY(-2px); border-color: var(--sun); box-shadow: 0 6px 0 #0b0818; }
.creator:active { transform: translateY(2px); box-shadow: 0 2px 0 #0b0818; }
.creator-text { display: grid; line-height: 1.1; }
.creator-text small { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 700; color: var(--muted); }
.creator-text b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.creator-heart { width: 11px; height: 11px; fill: var(--tomato); }
.creator:hover .creator-heart { animation: heartbeat .8s ease-in-out infinite; }
.creator-cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 999px;
  background: #000; color: #fff; font-weight: 800; font-size: .8rem; border: 1px solid #ffffff2e;
}
.creator-cta svg { width: 13px; height: 13px; fill: currentColor; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.35); } 60% { transform: scale(.95); } }

/* ---------- Settings sheet (opened from the gear in the top bar) ---------- */
.sheet {
  width: min(440px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px)); padding: 0;
  background: var(--room-2); color: var(--ink); border: 3px solid var(--line); border-radius: 24px;
  box-shadow: 0 8px 0 #0b0818, 0 30px 80px #000c; overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: #07051099; backdrop-filter: blur(3px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 20px; background: #0000002e; }
.sheet-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--step-1); }
.sheet-close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 1.1rem; }
.sheet-close:hover { color: var(--ink); background: #ffffff12; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 20px; display: grid; gap: 18px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* ---------- Chat ---------- */
.dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--tomato); vertical-align: middle; box-shadow: 0 0 0 2px var(--room-2); }
.tab[aria-selected="true"] .dot { box-shadow: 0 0 0 2px var(--sun); }
.panel-body.chat { display: flex; flex-direction: column; padding: 0; gap: 0; -webkit-mask-image: none; mask-image: none; overflow: hidden; }
@media (max-width: 900px) { .side:has(#panel-chat:not([hidden])) { height: min(640px, 80dvh); } }

.chat-card { padding: 18px; display: grid; gap: 10px; align-content: start; overflow-y: auto; }
.chat-card h3 { margin: 0; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.chat-card p { margin: 0; color: var(--muted); }
.chat-kicker { margin: 0; font-family: var(--font-osd); font-size: 1.25rem; line-height: 1; color: var(--osd); text-transform: uppercase; letter-spacing: .04em; }
.chat-rules { margin: 4px 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--step--1); color: var(--muted); }
.chat-rules li { padding-left: 22px; position: relative; }
.chat-rules li::before { content: "★"; position: absolute; left: 0; color: var(--sun); }
.chat-rules b { color: var(--ink); }
.chat-age { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: var(--step--1); cursor: pointer; }
.chat-age input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--sun); flex: none; }
.chat-join {
  border: 0; border-radius: 14px; padding: 11px 16px; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  background: var(--sun); color: #1a1430; box-shadow: 0 3px 0 #a06f00;
}
.chat-join:disabled { opacity: .4; cursor: not-allowed; }

.chat-live { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-head { flex: none; display: grid; gap: 8px; padding: 12px 14px 10px; border-bottom: 2px dashed var(--line); }
.chat-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 12px; background: var(--room); }
.chat-room { border: 0; border-radius: 9px; padding: 6px 4px; background: transparent; color: var(--muted); font-weight: 800; font-size: .9rem; }
.chat-room[aria-pressed="true"] { background: var(--room-2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.chat-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.chat-count { font-family: var(--font-osd); font-size: 1.15rem; line-height: 1; color: var(--osd); white-space: nowrap; }
.chat-count::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--tomato); vertical-align: 2px; animation: blink 1.6s steps(2) infinite; }
.chat-me { min-width: 0; color: var(--c); font-weight: 800; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: -4px; }
.chat-me small, .msg-who small { color: var(--muted); font-weight: 600; }

.chat-link { border: 0; background: none; padding: 0; color: var(--muted); font-weight: 700; font-size: .85rem; text-decoration: underline; text-underline-offset: 2px; }
.chat-link:hover { color: var(--ink); }

.chat-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  overflow-wrap: anywhere; font-size: .92rem; line-height: 1.4;
}
.chat-log > :first-child { margin-top: auto; }
.msg { padding: 3px 6px; margin: 0 -6px; border-radius: 8px; }
.msg:hover { background: #ffffff08; }
.msg.is-me { background: color-mix(in srgb, var(--glow) 10%, transparent); }
.msg-who { border: 0; background: none; padding: 0; margin-right: 6px; color: var(--c); font-weight: 800; font-size: inherit; }
.msg-who:hover { text-decoration: underline; }
.msg-ch { display: inline-block; max-width: 14em; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: #ffffff14; color: var(--muted); font-size: .75rem; font-weight: 700; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: -3px; }
.msg-mute { margin-right: 6px; border: 0; border-radius: 6px; padding: 0 7px; background: var(--tomato); color: #fff; font-weight: 800; font-size: .75rem; vertical-align: 1px; }
.sys { align-self: center; text-align: center; margin: 4px 0; padding: 3px 10px; border-radius: 999px; background: #ffffff0a; color: var(--muted); font-size: .8rem; font-weight: 700; }

.chat-react { flex: none; display: flex; justify-content: space-between; gap: 4px; padding: 8px 14px 0; border-top: 2px dashed var(--line); }
.chat-emoji { flex: 1; border: 0; border-radius: 10px; padding: 5px 0; background: #ffffff08; font-size: 1.25rem; line-height: 1; transition: transform .1s, background .15s; }
.chat-emoji:hover { background: #ffffff14; }
.chat-emoji:active { transform: scale(1.25); }
.chat-form { flex: none; display: flex; gap: 6px; padding: 8px 14px 4px; }
.chat-react[hidden] + .chat-form { border-top: 2px dashed var(--line); padding-top: 10px; }
.chat-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--ink); background: var(--room);
  border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px;
}
.chat-form input:focus { outline: none; border-color: var(--sun); }
.chat-send { flex: none; width: 42px; border: 0; border-radius: 12px; background: var(--sun); color: #1a1430; font-size: 1rem; box-shadow: 0 3px 0 #a06f00; }
.chat-hint { flex: none; margin: 0; min-height: 1.6em; padding: 2px 14px 8px; color: var(--sun); font-size: .78rem; font-weight: 700; }

/* Reactions float up over the picture */
.reactions { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; container-type: size; }
.reactions span {
  position: absolute; bottom: 4%; font-size: clamp(1.4rem, 3.4vw, 2.4rem); line-height: 1;
  animation: float-up 2.6s cubic-bezier(.2, .6, .4, 1) forwards; filter: drop-shadow(0 2px 4px #0008);
}
@keyframes float-up {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  12% { transform: translate(0, -8%) scale(1.15); opacity: 1; }
  100% { transform: translate(var(--drift), -75cqh) scale(1); opacity: 0; }
}
.msg.is-me .msg-who { cursor: default; text-decoration: none; }

/* ---------- Links to the show, channel and info pages ---------- */
.show-tile a { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.show-tile a:hover b { color: var(--sun); text-decoration: underline; text-underline-offset: 3px; }
.show-tile a:hover img { border-color: var(--c, var(--sun)); }
.channel-info h3 a { color: inherit; text-decoration: none; }
.channel-info h3 a:hover { color: var(--c); }
.faq details p a { color: var(--sun); text-underline-offset: 3px; }

/* ---------- Footer: a station sign-off with Antu ---------- */
.foot-main {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(220px, .8fr); gap: clamp(24px, 4vw, 48px); align-items: start;
  padding: clamp(24px, 3.5vw, 40px) clamp(20px, 3.5vw, 40px) clamp(20px, 3vw, 32px);
}
.foot-brand { display: grid; gap: 14px; align-content: start; }
.foot-brand-text { display: grid; gap: 10px; justify-items: start; }
.foot-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: .95; color: var(--sun); text-shadow: 3px 3px 0 var(--tomato-dark); }
.foot-tag { margin: 0; max-width: 36ch; color: var(--muted); font-size: .95rem; }
.foot-top {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 16px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--room); color: var(--ink); font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, transform .15s;
}
.foot-top:hover { border-color: var(--sun); transform: translateY(-2px); }

/* Antu: poke him and he nags you like a grown-up in 2003 */
.foot-antu-row { display: flex; align-items: center; gap: 12px; }
.foot-antu-btn { flex: none; border: 0; background: none; padding: 0; border-radius: 16px; }
.foot-antu { display: block; width: 64px; height: 75px; transform-origin: 50% 100%; animation: wave 2.8s ease-in-out infinite; }
.foot-antu-btn:hover .foot-antu { animation: wiggle .5s ease-in-out infinite; }
.foot-antu-btn.is-poked .foot-antu { animation: boing .45s cubic-bezier(.3, 1.6, .5, 1); }
.foot-bubble {
  position: relative; margin: 0 0 18px; max-width: 230px; padding: 8px 13px; border-radius: 14px 14px 14px 4px;
  background: var(--ink); color: #1a1430; font-weight: 800; font-size: .85rem; line-height: 1.3;
  box-shadow: 0 4px 0 #0007; transform-origin: 0 100%;
}
.foot-bubble::before { content: ""; position: absolute; left: -9px; bottom: 6px; border: 6px solid transparent; border-right: 8px solid var(--ink); border-left: 0; }
.foot-antu-row:has(.is-poked) .foot-bubble { animation: pop .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.7); } to { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes boing { 0% { transform: scale(1, 1); } 30% { transform: scale(1.15, .8); } 60% { transform: scale(.9, 1.12) translateY(-8px); } 100% { transform: scale(1, 1); } }

.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.foot-head { margin: 0 0 12px; font-family: var(--font-osd); font-weight: 400; font-size: 1.3rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--osd); }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-list a { color: var(--ink); font-weight: 700; text-decoration: none; }
.foot-list a:hover { color: var(--sun); }
.foot-ch { display: inline-flex; align-items: center; gap: 9px; }
.foot-ch span {
  display: grid; place-items: center; min-width: 30px; height: 24px; border-radius: 8px; background: var(--c); color: #120d22;
  font-family: var(--font-osd); font-size: 1.15rem; line-height: 1; transform: rotate(-3deg); transition: transform .15s;
}
.foot-ch:hover span { transform: rotate(3deg) scale(1.1); }
.foot-list .foot-ch:hover { color: var(--c); }

.foot-coffee {
  display: grid; gap: 4px; padding: 18px; border-radius: 22px; text-decoration: none; color: var(--ink);
  background: linear-gradient(160deg, #ffc23322, transparent 70%), var(--room); border: 2px solid #ffc23355; box-shadow: 0 6px 0 #0b0818;
  transition: transform .15s, border-color .15s;
}
.foot-coffee:hover { transform: translateY(-3px) rotate(-1deg); border-color: var(--sun); }
.foot-coffee b { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.1; color: var(--sun); }
.foot-coffee small { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.foot-cup { position: relative; justify-self: start; font-size: 2rem; line-height: 1; margin-bottom: 4px; }
.foot-cup i { position: absolute; bottom: 85%; width: 3px; height: 10px; border-radius: 3px; background: var(--muted); opacity: 0; animation: steam 2.4s ease-in-out infinite; }
.foot-cup i:nth-child(1) { left: 28%; }
.foot-cup i:nth-child(2) { left: 46%; animation-delay: .6s; }
.foot-cup i:nth-child(3) { left: 64%; animation-delay: 1.2s; }
@keyframes steam { 0% { transform: translateY(0) scaleY(.6); opacity: 0; } 40% { opacity: .6; } 100% { transform: translateY(-14px) scaleY(1.2); opacity: 0; } }

.foot-copy { margin: 0; font-size: .75rem; color: var(--muted); opacity: .8; max-width: 62ch; }
@media (max-width: 980px) {
  .foot-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .foot-main { grid-template-columns: minmax(0, 1fr); }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* "What's on": cap each channel's tiles, the channel page has the full list */
.channel-shows {
  max-height: 380px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.channel-more { color: var(--c); font-weight: 800; text-decoration: none; font-size: var(--step--1); }
.channel-more:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .channel-shows { max-height: 300px; } }

/* ---------- Big screen: the TV takes the whole window, the sidebar moves below ---------- */
@media (min-width: 901px) {
  .is-big .stage {
    /* Same fit as normal (see .stage), with a bigger cap now the sidebar is below. */
    --tv-w: clamp(460px, min(calc((100dvh - 184px) * 1.32), calc((100dvh - 412px) * 1.96)), 1400px);
    grid-template-columns: minmax(0, var(--tv-w));
  }
  .is-big .side { height: min(640px, 80dvh); min-height: 0; }
}
.knob-big[aria-pressed="true"] { font-size: 1.05rem; }

/* ---------- Phones ---------- */
/* SIZE goes full screen on small screens; hide it where the browser can't (iPhone Safari). */
@media (max-width: 900px) { .no-fs .knob-big { display: none; } }

/* Compact TV for phones, upright or on their side: slim frame, one row of controls
   (phones have volume buttons), no name plate or speaker grille. */
@media (max-width: 560px), (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .room { padding-inline: 12px; gap: 10px; }
  .tv { border-radius: 24px; padding: 8px 8px 0; box-shadow: inset 0 4px 0 #ffffff40, inset 0 -6px 0 #00000040, 0 3px 0 #8c1f0e, 0 20px 40px #000000b0; }
  .bezel { border-radius: 18px; padding: 6px; }
  .panel { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 8px 0 10px; }
  .grille, .vcr { display: none; }
  .brandplate { padding: 4px 10px 4px 6px; }
  .brandplate .logo-word { font-size: 1.1rem; }
  .brandplate .logo-tld { display: inline; }
  .controls { flex-wrap: nowrap; justify-content: center; gap: 5px; }
  #volDown, #volUp { display: none; }
  .knob { width: 38px; height: 34px; font-size: .8rem; border-radius: 10px; }
  .knob span { font-size: .5rem; }
  .power { width: 38px; height: 38px; margin-left: 2px; font-size: 14px; }
}

/* Upright phones: a small antenna, and the TV sticks to the top while you scroll the
   Channels/Chat panel, which fills the rest of the screen like a video app.
   --tv-h is the TV's height, set from app.js. */
@media (max-width: 560px) {
  .stage { padding-top: 46px; row-gap: 12px; }
  .tv-top { top: -46px; width: 112px; }
  .tv-feet span { width: 46px; height: 8px; }
  .tv-wrap { position: sticky; top: 0; z-index: 20; }
  .tv-wrap.is-stuck::before { content: ""; position: absolute; inset: -1px -12px -8px; background: var(--room); box-shadow: 0 8px 16px #0009; z-index: -1; }
  .is-stuck .tv { border-top-left-radius: 0; border-top-right-radius: 0; }
  .side, .side:has(#panel-chat:not([hidden])) { height: calc(100dvh - var(--tv-h, 340px) - 12px); min-height: 340px; max-height: none; }
}

/* Phones on their side: TV and panel next to each other, both as tall as the screen
   allows. app.js sizes the TV to fit (--tv-w on .stage). */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .room { padding-block: 8px 20px; gap: 8px; }
  .stage { grid-template-columns: minmax(0, var(--tv-w, 50vw)) minmax(260px, 1fr); justify-content: center; column-gap: 12px; padding-top: 0; }
  .tv-top, .tv-feet { display: none; }
  .side, .side:has(#panel-chat:not([hidden])) { height: 0; min-height: 100%; max-height: none; }
}

/* Full screen (the SIZE knob on phones): just the TV, as big as fits, on black. */
.tv-wrap:fullscreen { display: grid; place-items: center; background: #000; padding: 8px; }
.tv-wrap:-webkit-full-screen { display: grid; place-items: center; background: #000; padding: 8px; }
.tv-wrap:fullscreen .tv-top, .tv-wrap:fullscreen .tv-feet, .tv-wrap:fullscreen .tv-glow { display: none; }
.tv-wrap:-webkit-full-screen .tv-top, .tv-wrap:-webkit-full-screen .tv-feet, .tv-wrap:-webkit-full-screen .tv-glow { display: none; }
.tv-wrap:fullscreen::before { display: none; }

/* "What's on" on phones: each channel's shows swipe sideways instead of stacking. */
@media (max-width: 560px) {
  .channel-row { gap: 14px; padding: 16px; }
  .channel-info { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .channel-info .channel-num { width: 46px; height: 46px; font-size: 1.9rem; margin: 0; }
  .channel-info > :not(.channel-num):not(h3) { grid-column: 1 / -1; }
  .channel-shows { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .channel-shows .show-tiles {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: -16px; padding: 0 16px 6px; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .channel-shows .show-tiles::-webkit-scrollbar { display: none; }
  .channel-shows .show-tile { flex: 0 0 118px; scroll-snap-align: start; }
  .channel-shows .show-tiles.is-small .show-tile { flex-basis: 96px; }
}

/* Settings on phones: a sheet that slides up from the bottom. */
@media (max-width: 560px) {
  .sheet {
    width: 100%; max-width: 100%; max-height: 86dvh; margin: auto 0 0;
    border-radius: 24px 24px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sheet[open] { animation: sheet-up .25s cubic-bezier(.2, .8, .3, 1); }
  .sheet-head { position: relative; }
  .sheet-head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; border-radius: 2px; background: var(--line); transform: translateX(-50%); }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* The narrowest phones (under 375px): slimmer knobs so all seven and the power button fit. */
@media (max-width: 374px) {
  .controls { gap: 4px; }
  .knob { width: 35px; }
  .power { width: 34px; height: 34px; font-size: 13px; }
}
/* 320px phones: CRT is still in MENU, so its knob can go. */
@media (max-width: 340px) { #crt { display: none; } }

/* Phones on their side: a narrow TV, so slimmer knobs and no CRT knob (it's in MENU). */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  #crt { display: none; }
  .controls { gap: 4px; }
  .knob { width: 35px; }
  .power { width: 34px; height: 34px; font-size: 13px; }
}