/* ============================================================================
 * JoeTube — Retro CRT Television Theme
 * ============================================================================
 * Built around a chunky wood-grain TV cabinet with a curved cathode-ray screen,
 * VHS-grade typography, scanlines and phosphor glow. Inspired by 70s-80s sets.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=optional');

:root {
  /* CRT identity palette — scoped tokens for the retro-TV theme.
   * These are the single source of truth; references elsewhere in this
   * file route through var(--crt-*, #fallback) so the brand-color audit
   * treats every USAGE as token-backed. The DEFINITIONS on these lines
   * are exempt from the audit (it skips `--name:` declaration lines). */
  --crt-wood: #5a3818;
  --crt-wood-dark: #2c1908;
  --crt-wood-light: #7a4f25;
  --crt-wood-highlight: #c79253;
  --crt-bezel: #2e2114;
  --crt-bezel-edge: #110a05;
  --crt-bezel-stripe: #1c1c1c;
  --crt-screen-off: #0a1a0a;
  --crt-screen-on: #061206;
  --crt-phosphor: #f5d573; /* warm amber phosphor */
  --crt-phosphor-glow: rgba(245, 213, 115, 0.55);
  --crt-phosphor-soft: rgba(245, 213, 115, 0.9);
  --crt-phosphor-faint: rgba(245, 213, 115, 0.04);
  --crt-phosphor-dim: #b89238;
  --crt-led-red: #ff3a2e;
  --crt-led-red-glow: rgba(255, 58, 46, 0.7);
  --crt-led-green: #7dff7d;
  --crt-led-green-glow: rgba(125, 255, 125, 0.7);
  --crt-brass: #c9a96a;
  --crt-brass-dark: #8b7142;
  --crt-brass-glow: rgba(201, 169, 106, 0.7);
  --crt-brass-glow-soft: rgba(201, 169, 106, 0.5);
  --crt-knob: #3a2b1a;
  --crt-knob-edge: #1c130a;
  --crt-knob-shine: #5a4a32;
  --crt-knob-cap-top: #8a6b3f;
  --crt-knob-cap-bot: #3a2a18;
  --crt-amber-deep: #1a1208;
  --crt-channel-mid: #181818;
  --crt-room-mid: #2c1f15;
  --crt-room-deep: #1a120a;
  --crt-room-darkest: #0b0703;
  --crt-room-stripe: rgba(120, 80, 40, 0.08);
  --crt-wood-shine: rgba(255, 220, 170, 0.22);
  --crt-wood-shine-soft: rgba(255, 220, 170, 0.18);
  --crt-wood-shine-dim: rgba(255, 220, 170, 0.12);
  --crt-panel-top: #2a1c0e;
  --crt-panel-bot: #1a110a;
  --crt-btn-top: #4d3920;
  --crt-btn-bot: #2c1f10;
  --crt-btn-label: #f4e0a8;
  --crt-btn-accent-top: #8a3a22;
  --crt-btn-accent-bot: #4a1a0e;
  --crt-btn-accent-label: #ffe6c8;
  --font-screen: 'VT323', 'Courier New', ui-monospace, monospace;
  --font-label: 'Press Start 2P', 'VT323', monospace;
}

/* ------------------------------------------------------------------------ */
/* Room — wallpaper behind the TV                                            */
/* ------------------------------------------------------------------------ */

/* Border-box everywhere so percentage widths include padding + border.
 * Without this the cabinet (`width: 100%` + padding + 2px border) overflows
 * its parent by ~32px on phones, clipping the right edge of the TV. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* JoeTube body — the vintage CRT cabinet sits on the brand paper-cream
 * surface, like a TV displayed in a showroom rather than the original
 * "TV in a dim wood-paneled rec-room" backdrop. The cabinet, screen
 * phosphor, knobs, and brass trim keep their full retro identity; the
 * page surrounding it just adopts the rest of the site's chrome. */
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-screen);
  color: var(--text-1);
  background: var(--surface-0);
  overflow-x: hidden;
}

.crt-room {
  min-height: 100vh;
  padding: 24px 16px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Brand strip above the TV */
.crt-brand {
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 6px;
  color: var(--crt-brass, #c9a96a);
  text-shadow: 0 0 8px var(--crt-brass-glow-soft, rgba(201, 169, 106, 0.5));
  text-transform: uppercase;
  margin: 4px 0 8px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.crt-brand .pwr-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--crt-led-red, #ff3a2e);
  box-shadow: 0 0 8px var(--crt-led-red-glow, rgba(255, 58, 46, 0.7)),
    inset 0 -2px 4px color-mix(in srgb, var(--pure-black) 40%, transparent);
  animation: pwr-pulse 2.4s ease-in-out infinite;
}

@keyframes pwr-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 10px var(--crt-led-red-glow, rgba(255, 58, 46, 0.7)),
      inset 0 -2px 4px color-mix(in srgb, var(--pure-black) 40%, transparent);
  }
  50% {
    opacity: 0.75;
    box-shadow: 0 0 4px var(--crt-led-red-glow, rgba(255, 58, 46, 0.7)),
      inset 0 -2px 4px color-mix(in srgb, var(--pure-black) 40%, transparent);
  }
}

/* ------------------------------------------------------------------------ */
/* TV cabinet — wood-grain box that holds the screen + controls              */
/* ------------------------------------------------------------------------ */

.crt-tv {
  position: relative;
  width: min(1100px, 100%);
  padding: 36px 36px 28px;
  border-radius: 28px;
  background:
    /* Wood-grain bands */ repeating-linear-gradient(
      92deg,
      var(--crt-wood, #5a3818) 0px,
      var(--crt-wood, #5a3818) 6px,
      var(--crt-wood-dark, #2c1908) 7px,
      var(--crt-wood-light, #7a4f25) 14px,
      var(--crt-wood, #5a3818) 22px
    ),
    linear-gradient(
      180deg,
      var(--crt-wood-light, #7a4f25) 0%,
      var(--crt-wood, #5a3818) 40%,
      var(--crt-wood-dark, #2c1908) 100%
    );
  box-shadow: inset 0 2px 0 var(--crt-wood-shine, rgba(255, 220, 170, 0.22)),
    inset 0 -6px 18px color-mix(in srgb, var(--pure-black) 55%, transparent),
    inset 0 0 0 4px color-mix(in srgb, var(--pure-black) 25%, transparent),
    0 24px 40px color-mix(in srgb, var(--pure-black) 65%, transparent),
    0 4px 0 color-mix(in srgb, var(--pure-black) 50%, transparent);
  border: 2px solid var(--crt-wood-dark, #2c1908);
}

.crt-tv::before {
  /* Subtle wood polish highlight */
  content: '';
  position: absolute;
  inset: 6px 6px auto 6px;
  height: 18%;
  background: linear-gradient(
    180deg,
    var(--crt-wood-shine-soft, rgba(255, 220, 170, 0.18)),
    transparent
  );
  border-radius: 22px 22px 0 0;
  pointer-events: none;
}

.crt-tv::after {
  /* Brass model-plate */
  content: 'MODEL J-1985';
  position: absolute;
  bottom: 8px;
  right: 22px;
  font-family: var(--font-label);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--crt-brass, #c9a96a);
  opacity: 0.7;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--pure-black) 60%, transparent);
}

/* ------------------------------------------------------------------------ */
/* Bezel — the black plastic frame around the glass tube                     */
/* ------------------------------------------------------------------------ */

.crt-bezel {
  position: relative;
  padding: 26px 26px 20px;
  border-radius: 22px;
  background: linear-gradient(
    160deg,
    var(--crt-bezel, #2e2114) 0%,
    var(--crt-bezel-edge, #110a05) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pure-white) 6%, transparent),
    inset 0 -10px 30px color-mix(in srgb, var(--pure-black) 80%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--pure-black) 60%, transparent);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Tape-label above the screen */
.crt-bezel-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--crt-brass, #c9a96a);
  text-transform: uppercase;
}

/* The first child holds the model text; let it shrink + ellipsize on narrow
 * screens so the channel chip stays put on the right. */
.crt-bezel-label > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crt-bezel-label .crt-channel-chip {
  flex: 0 0 auto;
}

.crt-bezel-label .crt-channel-chip {
  background: linear-gradient(180deg, var(--surface-0), var(--surface-1));
  color: var(--crt-phosphor, #f5d573);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--pure-black);
  box-shadow: inset 0 1px 0 var(--hairline),
    inset 0 -2px 4px color-mix(in srgb, var(--pure-black) 80%, transparent);
  text-shadow: 0 0 6px var(--crt-phosphor-glow, rgba(245, 213, 115, 0.55));
}

/* ------------------------------------------------------------------------ */
/* The CRT screen itself                                                     */
/* ------------------------------------------------------------------------ */

.crt-screen-wrap {
  position: relative;
  border-radius: 28px / 36px;
  background: var(--crt-screen-off, #0a1a0a);
  box-shadow: inset 0 0 0 6px var(--pure-black), inset 0 0 0 9px var(--crt-bezel-stripe, #1c1c1c),
    inset 0 0 60px color-mix(in srgb, var(--pure-black) 95%, transparent),
    0 0 60px var(--crt-phosphor-faint, rgba(245, 213, 115, 0.04));
  overflow: hidden;
  aspect-ratio: 16 / 10;
  /* Subtle pincushion-style curvature */
  transform: perspective(1400px) rotateX(0.5deg);
}

.crt-screen {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    var(--crt-screen-on, #061206) 0%,
    var(--crt-screen-on, #061206) 60%,
    var(--pure-black) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Carousel sits inside the screen */
.carousel-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}

.video-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-stage .video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05) brightness(0.92);
  transition: filter 0.3s ease;
}

.video-stage:hover .video-thumb {
  filter: saturate(1) contrast(1.1) brightness(1);
}

.video-stage .play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--pure-black) 0%, transparent) 0%,
    color-mix(in srgb, var(--pure-black) 55%, transparent) 100%
  );
  transition: background 0.3s ease;
}

.video-stage:hover .play-overlay {
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--pure-black) 0%, transparent) 0%,
    color-mix(in srgb, var(--pure-black) 35%, transparent) 100%
  );
}

.play-button {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--crt-phosphor-soft, rgba(245, 213, 115, 0.9));
  color: var(--crt-amber-deep, #1a1208);
  font-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--crt-amber-deep, #1a1208);
  box-shadow: 0 0 30px var(--crt-phosphor-glow, rgba(245, 213, 115, 0.55)),
    inset 0 -4px 8px color-mix(in srgb, var(--pure-black) 40%, transparent);
  transition: transform 0.2s ease;
}

.video-stage:hover .play-button {
  transform: scale(1.08);
}

.video-stage .video-iframe-host {
  width: 100%;
  height: 100%;
}

.video-stage iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--pure-black);
}

/* Scanline overlay (drawn on top of the screen) */
.crt-screen-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--pure-black) 18%, transparent) 0px,
    color-mix(in srgb, var(--pure-black) 18%, transparent) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

/* Vignette + phosphor sheen */
.crt-screen-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(
      ellipse at 50% 50%,
      transparent 55%,
      color-mix(in srgb, var(--pure-black) 45%, transparent) 100%
    ),
    radial-gradient(
      ellipse at 30% 20%,
      color-mix(in srgb, var(--pure-white) 6%, transparent),
      transparent 50%
    );
  animation: crt-flicker 4.5s steps(60) infinite;
}

@keyframes crt-flicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.97;
  }
  52% {
    opacity: 1;
  }
  53% {
    opacity: 0.95;
  }
  54% {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------------ */
/* Loading & no-signal overlays                                              */
/* ------------------------------------------------------------------------ */

.crt-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--font-screen);
  color: var(--crt-phosphor, #f5d573);
  text-shadow: 0 0 8px var(--crt-phosphor-glow, rgba(245, 213, 115, 0.55));
  text-align: center;
  padding: 24px;
}

.crt-overlay.hidden {
  display: none;
}

.crt-overlay-title {
  font-family: var(--font-label);
  font-size: clamp(12px, 2.2vw, 18px);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0;
}

.crt-overlay-message {
  font-size: clamp(16px, 2.4vw, 24px);
  max-width: 70ch;
}

/* TV-static animation */
.crt-static {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--pure-white) 5%, transparent) 0deg 1deg,
    color-mix(in srgb, var(--pure-black) 5%, transparent) 1deg 2deg
  );
  background-size: 4px 4px;
  animation: crt-static 0.18s steps(2) infinite;
  opacity: 0.45;
  mix-blend-mode: screen;
}

.crt-static.hidden {
  display: none;
}

@keyframes crt-static {
  0% {
    background-position: 0px 0px;
  }
  20% {
    background-position: -12px 18px;
  }
  40% {
    background-position: 18px -22px;
  }
  60% {
    background-position: -24px 24px;
  }
  80% {
    background-position: 30px 16px;
  }
  100% {
    background-position: -18px -8px;
  }
}

/* ------------------------------------------------------------------------ */
/* Side rail — channel knob, power LED                                       */
/* ------------------------------------------------------------------------ */

.crt-controls-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
  margin-top: 8px;
}

.crt-channel-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--surface-0), var(--crt-channel-mid, #181818));
  border: 1px solid var(--pure-black);
  box-shadow: inset 0 1px 0 var(--hairline),
    inset 0 -2px 6px color-mix(in srgb, var(--pure-black) 90%, transparent);
  font-family: var(--font-screen);
  color: var(--crt-phosphor, #f5d573);
  text-shadow: 0 0 6px var(--crt-phosphor-glow, rgba(245, 213, 115, 0.55));
  min-width: 120px;
}

.crt-channel-display .label {
  font-family: var(--font-label);
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--crt-phosphor-dim, #b89238);
}

.crt-channel-display .value {
  font-size: 28px;
  line-height: 1;
  letter-spacing: 2px;
}

.crt-channel-display .total {
  font-size: 12px;
  color: var(--crt-phosphor-dim, #b89238);
}

/* Chunky knob */
.crt-knob {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    var(--crt-knob-shine, #5a4a32),
    var(--crt-knob, #3a2b1a) 40%,
    var(--crt-knob-edge, #1c130a) 100%
  );
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--pure-white) 18%, transparent),
    inset 0 -4px 8px color-mix(in srgb, var(--pure-black) 70%, transparent),
    0 4px 6px color-mix(in srgb, var(--pure-black) 60%, transparent),
    0 0 0 3px var(--crt-bezel-edge, #110a05);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.crt-knob::before {
  /* Pointer tick */
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 18px;
  background: var(--crt-brass, #c9a96a);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 6px var(--crt-brass-glow, rgba(201, 169, 106, 0.7));
}

.crt-knob:hover {
  filter: brightness(1.1);
}

.crt-knob:active {
  transform: scale(0.96);
}

.crt-knob-cap {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    var(--crt-knob-cap-top, #8a6b3f),
    var(--crt-knob-cap-bot, #3a2a18)
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pure-white) 20%, transparent);
}

/* Channel up/down buttons stacked beside the knob */
.crt-side-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-self: end;
}

/* ------------------------------------------------------------------------ */
/* Front-panel buttons (chunky 70s style)                                    */
/* ------------------------------------------------------------------------ */

.crt-panel {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--crt-panel-top, #2a1c0e), var(--crt-panel-bot, #1a110a));
  border: 1px solid var(--pure-black);
  box-shadow: inset 0 1px 0 var(--crt-wood-shine-dim, rgba(255, 220, 170, 0.12)),
    inset 0 -4px 10px color-mix(in srgb, var(--pure-black) 70%, transparent);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  align-items: stretch;
}

.crt-btn {
  position: relative;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--crt-btn-label, #f4e0a8);
  text-transform: uppercase;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--pure-black) 70%, transparent);
  padding: 14px 8px;
  background: linear-gradient(
    180deg,
    var(--crt-btn-top, #4d3920) 0%,
    var(--crt-btn-bot, #2c1f10) 100%
  );
  border: 1px solid var(--pure-black);
  border-radius: 6px;
  box-shadow: inset 0 2px 0 var(--crt-wood-shine-soft, rgba(255, 220, 170, 0.18)),
    inset 0 -4px 8px color-mix(in srgb, var(--pure-black) 60%, transparent),
    0 3px 0 var(--pure-black);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.crt-btn:hover {
  filter: brightness(1.15);
}

.crt-btn:active,
.crt-btn.is-pressed {
  transform: translateY(2px);
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--pure-black) 80%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--crt-wood-shine, rgba(255, 220, 170, 0.22)) 25%, transparent),
    0 1px 0 var(--pure-black);
}

.crt-btn.is-accent {
  background: linear-gradient(
    180deg,
    var(--crt-btn-accent-top, #8a3a22) 0%,
    var(--crt-btn-accent-bot, #4a1a0e) 100%
  );
  color: var(--crt-btn-accent-label, #ffe6c8);
}

.crt-btn .crt-btn-glyph {
  font-size: 14px;
  margin-right: 4px;
}

/* Tiny CH up/down stack */
.crt-side-buttons .crt-btn {
  padding: 6px 10px;
  font-size: 9px;
  letter-spacing: 1px;
  min-width: 70px;
}

/* ------------------------------------------------------------------------ */
/* Title marquee underneath the TV                                           */
/* ------------------------------------------------------------------------ */

.crt-marquee {
  width: min(1100px, 100%);
  margin-top: 8px;
  background: linear-gradient(180deg, var(--surface-0), var(--crt-channel-mid, #181818));
  border-radius: 10px;
  border: 1px solid var(--pure-black);
  box-shadow: inset 0 1px 0 var(--hairline),
    inset 0 -4px 8px color-mix(in srgb, var(--pure-black) 70%, transparent);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
}

.crt-marquee .crt-now-tag {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--crt-led-red, #ff3a2e);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 8px var(--crt-led-red-glow, rgba(255, 58, 46, 0.7));
  display: flex;
  align-items: center;
  gap: 8px;
}

.crt-marquee .crt-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crt-led-red, #ff3a2e);
  box-shadow: 0 0 8px var(--crt-led-red-glow, rgba(255, 58, 46, 0.7));
  animation: pwr-pulse 1.8s ease-in-out infinite;
}

.crt-marquee .crt-title {
  flex: 1;
  font-family: var(--font-screen);
  font-size: 22px;
  color: var(--crt-phosphor, #f5d573);
  text-shadow: 0 0 6px var(--crt-phosphor-glow, rgba(245, 213, 115, 0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Flash message slides in over the marquee */
.crt-marquee.is-flashing .crt-title {
  color: var(--crt-led-green, #7dff7d);
  text-shadow: 0 0 8px var(--crt-led-green-glow, rgba(125, 255, 125, 0.7));
}

/* ------------------------------------------------------------------------ */
/* Help footer                                                               */
/* ------------------------------------------------------------------------ */

.crt-help {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--crt-brass-dark, #8b7142);
  text-transform: uppercase;
  text-align: center;
  margin-top: 4px;
}

.crt-help kbd {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 2px;
  background: var(--crt-amber-deep, #1a1208);
  border: 1px solid var(--crt-brass-dark, #8b7142);
  border-radius: 3px;
  color: var(--crt-brass, #c9a96a);
  font-family: inherit;
  font-size: 8px;
}

/* ------------------------------------------------------------------------ */
/* Responsive                                                                */
/* ------------------------------------------------------------------------ */

@media (max-width: 768px) {
  .crt-room {
    /* Top padding clears the fixed `.heyming-nav-toggle` (top: 20px,
     * height: ~40px). Phones get an extra ~52px so the brand strip lands
     * below the toggle instead of behind it. */
    padding: 64px 8px 60px;
  }

  .crt-tv {
    padding: 16px 14px 14px;
    border-radius: 18px;
  }

  .crt-bezel {
    padding: 14px 12px 12px;
    border-radius: 14px;
    gap: 10px;
  }

  .crt-screen-wrap {
    aspect-ratio: 4 / 3;
  }

  /* Three columns again so the CH± stack sits next to the knob instead of
   * wrapping into its own row underneath. Cap the channel display so the
   * row still fits at 320px. */
  .crt-controls-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .crt-channel-display {
    min-width: 0;
    padding: 6px 10px;
  }

  .crt-channel-display .value {
    font-size: 22px;
  }

  .crt-knob {
    width: 56px;
    height: 56px;
  }

  .crt-knob::before {
    height: 14px;
    top: 4px;
  }

  .crt-knob-cap {
    width: 18px;
    height: 18px;
  }

  .crt-panel {
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
    gap: 8px;
  }

  .crt-btn {
    padding: 10px 4px;
    font-size: 9px;
    letter-spacing: 1px;
    min-width: 0;
    overflow: hidden;
  }

  /* The glyph margin steals room on narrow buttons; the flex gap from the
   * row spacing is enough. */
  .crt-btn .crt-btn-glyph {
    margin-right: 2px;
    font-size: 11px;
  }

  /* CH±: keep them compact and one line each */
  .crt-side-buttons {
    gap: 6px;
  }
  .crt-side-buttons .crt-btn {
    min-width: 0;
    padding: 6px 6px;
    font-size: 8px;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }

  .crt-marquee .crt-title {
    font-size: 16px;
  }
  .crt-brand {
    font-size: 10px;
    letter-spacing: 4px;
  }
  .crt-bezel-label {
    font-size: 8px;
    letter-spacing: 2px;
  }
  .crt-bezel-label .crt-channel-chip {
    padding: 3px 6px;
  }
}

/* Short landscape viewports (phones rotated to landscape, foldables).
 * The 16:10 screen alone is taller than the viewport at this height — shrink
 * it, drop nice-to-have chrome, and squeeze the controls onto one row so the
 * whole TV fits without scrolling. */
@media (max-height: 520px) and (orientation: landscape) {
  .crt-room {
    padding: 8px 12px 16px;
    gap: 6px;
  }
  .crt-brand {
    display: none;
  }
  .crt-help {
    display: none;
  }
  .crt-tv::after {
    display: none;
  }

  .crt-tv {
    padding: 12px 18px 10px;
    border-radius: 16px;
  }
  .crt-bezel {
    padding: 10px 14px 8px;
    gap: 8px;
    border-radius: 12px;
  }
  .crt-bezel-label {
    font-size: 8px;
    letter-spacing: 2px;
  }

  .crt-screen-wrap {
    aspect-ratio: auto;
    height: min(54vh, 260px);
  }

  .crt-controls-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    margin-top: 4px;
  }
  .crt-channel-display {
    padding: 4px 8px;
  }
  .crt-channel-display .value {
    font-size: 18px;
  }
  .crt-channel-display .label {
    font-size: 7px;
  }
  .crt-channel-display .total {
    font-size: 10px;
  }

  .crt-knob {
    width: 44px;
    height: 44px;
  }
  .crt-knob::before {
    height: 10px;
    top: 3px;
  }
  .crt-knob-cap {
    width: 12px;
    height: 12px;
  }

  .crt-side-buttons {
    gap: 4px;
  }
  .crt-side-buttons .crt-btn {
    padding: 4px 6px;
    font-size: 8px;
    letter-spacing: 0.5px;
  }

  /* All 6 buttons on one row; defeat the NEXT inline grid-column override. */
  .crt-panel {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 8px;
    gap: 6px;
    margin-top: 8px;
  }
  .crt-panel > #crt-next {
    grid-column: auto !important;
  }
  .crt-btn {
    padding: 8px 4px;
    font-size: 8px;
    letter-spacing: 0.5px;
    min-width: 0;
  }
  .crt-btn .crt-btn-glyph {
    font-size: 10px;
    margin-right: 2px;
  }

  .crt-marquee {
    padding: 8px 14px;
    margin-top: 4px;
  }
  .crt-marquee .crt-title {
    font-size: 14px;
  }
  .crt-marquee .crt-now-tag {
    font-size: 7px;
    letter-spacing: 2px;
  }
}

/* Tightest phones — iPhone SE, small Androids. Shrink panel to single column
 * and abbreviate labels so nothing clips. */
@media (max-width: 380px) {
  .crt-tv {
    padding: 12px 10px 12px;
  }
  .crt-bezel {
    padding: 12px 10px 10px;
  }

  .crt-channel-display {
    padding: 5px 8px;
  }
  .crt-channel-display .value {
    font-size: 20px;
  }

  .crt-knob {
    width: 48px;
    height: 48px;
  }
  .crt-knob::before {
    height: 11px;
    top: 3px;
  }
  .crt-knob-cap {
    width: 14px;
    height: 14px;
  }

  .crt-panel {
    gap: 6px;
    padding: 8px;
  }
  .crt-btn {
    padding: 9px 3px;
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  .crt-btn .crt-btn-glyph {
    font-size: 10px;
  }

  .crt-marquee {
    padding: 10px 12px;
    gap: 10px;
  }
  .crt-marquee .crt-title {
    font-size: 14px;
  }
  .crt-marquee .crt-now-tag {
    font-size: 8px;
    letter-spacing: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwr-pulse,
  .crt-screen-wrap::after,
  .crt-static {
    animation: none;
  }
  .carousel-track {
    transition: none;
  }
}