/* Retro mode: a flat, early-'90s cable guide channel, seen through a CRT. */

:root[data-theme="retro"] {
  --navy-950: #040a2c;
  --navy-900: #071245;
  --navy-800: #0b1a63;
  --chan: #10238a;
  --blue: #1f3bb8;
  --blue-hi: #3555dc;
  --next: #172d94;
  --off: #0a1650;
  --off-dither: #0e1e70;
  --yellow: #f7d23e;
  --white: #f2f5ff;
  --ink-soft: #c3cff7;
  --ink-dim: #8592cf;
  --live-red: #e8322a;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  /* Character-generator type for clocks, times, numbers and controls. */
  --font-pixel: "VT323", "Courier New", monospace;

  --text-shadow: 2px 2px 0 #000;

  --channel-w: 220px;
  --row-h: 64px;
  --row-gap: 3px;
  --header-h: 40px;
  /* Widescreen, like the last tube TVs. Streams are all 16:9, so a 4:3 screen
     would letterbox every one of them, and cropping the player to fill it
     isn't allowed by YouTube's or Twitch's embed terms. */
  --screen-aspect: 16 / 9;

  --scanlines: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.24) 0 1px, transparent 1px 3px);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  body {
    background: #000;
    color: var(--white);
    font-family: var(--font-body);
  }

  .app { background: #000; }

  /* ───────────── Marquee ───────────── */

  .marquee {
    column-gap: 28px;
    row-gap: 12px;
    padding: 12px 20px 16px;
    background: var(--navy-900);
    border-bottom: 4px solid var(--yellow);
  }

  .brandbar { gap: 18px; }

  .logo {
    font: italic 800 28px/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .logo-a { color: var(--white); text-shadow: var(--text-shadow); }

  .logo-b {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 10px 1px;
    background: var(--yellow);
    color: #000;
    transform: skewX(-8deg);
  }

  .tagline {
    font: 400 21px/1 var(--font-pixel);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }

  .brandbar-right { gap: 10px; }

  .demo-bug {
    font: 400 19px/1 var(--font-pixel);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yellow);
    border: 2px solid var(--yellow);
    padding: 2px 6px 1px;
  }

  .clock {
    margin-left: 6px;
    font: 400 40px/0.8 var(--font-pixel);
    text-shadow: var(--text-shadow);
  }

  .monitor {
    border: 3px solid #000;
    background: #000;
  }

  /* Film grain and scanlines over the screen (the player sits above them). */
  .screen::before,
  .screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .screen::before {
    z-index: 3;
    background-image: var(--noise);
    opacity: 0.08;
    animation: grain 0.6s steps(4) infinite;
  }

  .screen::after {
    z-index: 4;
    background: var(--scanlines);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.6);
  }

  .screen-card {
    gap: 8px;
    padding: 10%;
    background: var(--navy-950);
  }

  .screen-card::after {
    content: "";
    width: 40%;
    height: 4px;
    background: var(--cat);
    order: 1;
  }

  /* The odd thumbnail that isn't widescreen is letterboxed, not cropped. */
  .screen-thumb { object-fit: contain; }

  .screen-name {
    font: 800 clamp(22px, 3.2vw, 46px)/1 var(--font-display);
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #000;
  }

  .screen-sub {
    order: 2;
    font: 400 clamp(16px, 1.5vw, 22px)/1 var(--font-pixel);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cat);
  }

  .bug {
    font: 400 18px/1 var(--font-pixel);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px 1px;
  }

  .bug--live { top: 8px; left: 8px; background: var(--live-red); }
  .bug--platform { top: 8px; right: 8px; background: var(--platform); color: var(--platform-on); }
  .bug--viewers { bottom: 8px; left: 8px; background: #000; }

  .static {
    background-color: #777;
    background-image: var(--noise);
    background-size: 180px;
    animation: static-flash 0.45s steps(6) forwards;
  }

  .no-signal {
    background: linear-gradient(90deg, #c0c0c0 0 14.28%, #c0c000 0 28.57%, #00c0c0 0 42.85%, #00c000 0 57.14%, #c000c0 0 71.42%, #c00000 0 85.71%, #0000c0 0);
  }

  .no-signal span {
    background: #000;
    padding: 4px 12px 3px;
    font: 400 clamp(20px, 2vw, 30px)/1 var(--font-pixel);
    letter-spacing: 0.12em;
  }

  .info-label {
    font: 400 22px/1 var(--font-pixel);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--yellow);
    text-shadow: var(--text-shadow);
  }

  .info-actions { gap: 4px 20px; margin-top: 10px; }

  .info-action {
    font: 400 21px/1 var(--font-pixel);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: var(--text-shadow);
    color: var(--ink-soft);
  }

  .info-action:hover { color: var(--white); text-decoration: underline; }
  .info-action:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

  .info-tags { gap: 6px; margin-top: 10px; }

  .tag {
    font: 400 19px/1 var(--font-pixel);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px 1px;
  }

  .tag--platform { background: var(--platform); color: var(--platform-on); }
  .tag--cat { background: var(--cat); color: #000; }
  .tag--mature { background: var(--live-red); color: var(--white); }

  /* Trending, as old-listings-style flags: red for heating up, yellow for new. */
  :is(.trend, .cell-mature) { padding: 0 4px; font: 400 17px/1.05 var(--font-pixel); text-transform: uppercase; text-shadow: none; }
  /* Drawn like a TV rating bug: white, in a white box. */
  .cell-mature { color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
  :is(.trend--rising, .tag--trend[data-trend="rising"]) { color: var(--white); background: var(--live-red); }
  :is(.trend--new, .tag--trend[data-trend="new"]) { color: #000; background: var(--yellow); }

  .info-name {
    margin: 10px 0 4px;
    font: 800 clamp(30px, 4vw, 56px)/1 var(--font-display);
    text-transform: uppercase;
    color: var(--yellow);
    text-shadow: 3px 3px 0 #000;
  }

  .info-title {
    max-width: 46ch;
    font: 600 clamp(16px, 1.5vw, 21px)/1.3 var(--font-body);
    text-shadow: var(--text-shadow);
  }

  .info-stats {
    gap: 2px 20px;
    margin-top: 10px;
    font: 400 23px/1.1 var(--font-pixel);
    color: var(--ink-soft);
    text-shadow: var(--text-shadow);
  }

  .live-dot { color: var(--live-red); animation: blink 1.4s steps(1) infinite; }

  .info-next {
    margin-top: 4px;
    font: 400 21px/1.1 var(--font-pixel);
    color: var(--ink-dim);
  }

  .info-notice { margin-top: 6px; font: 400 19px/1.1 var(--font-pixel); color: var(--ink-soft); }
  .notice-title { margin-right: 8px; text-transform: uppercase; color: var(--yellow); }
  .notice-platform { color: var(--platform-ink); }

  .watch-links { gap: 8px; margin-top: 14px; }

  .watch-btn {
    padding: 5px 14px 3px;
    font: 400 25px/1 var(--font-pixel);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
    background: var(--yellow);
  }

  .watch-btn::after { content: " ▸"; }
  .watch-btn:hover { background: var(--white); }
  .watch-btn:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

  /* ───────────── Filters and toggles ───────────── */

  .filters {
    gap: 18px;
    padding: 10px 20px;
    background: var(--navy-950);
  }

  .filter-group { gap: 6px; }

  .filters--sub { gap: 6px; padding-top: 0; }
  .filters--sub .chip { padding: 3px 8px 2px; font-size: 20px; }

  .chip {
    gap: 8px;
    padding: 4px 10px 3px;
    font: 400 23px/1 var(--font-pixel);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--chan);
  }

  .chip:hover { color: var(--white); background: var(--blue); }
  .chip:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

  .chip .swatch { width: 10px; height: 10px; background: var(--cat); }
  .chip .count { opacity: 0.6; }

  .chip[aria-pressed="true"] { color: #000; background: var(--yellow); }


  .chip--small { padding: 3px 8px 2px; font-size: 20px; }

  .chip--icon { padding: 4px 6px 5px; } /* 25px tall, like the Sound button and search box */
  .chip--icon:has(+ :popover-open) { color: #000; background: var(--yellow); }

  .chip--select { padding: 0; }
  .chip--select select { padding: 4px 30px 3px 10px; text-transform: uppercase; }
  .chip--select select:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
  .chip--select option { background: var(--navy-900); color: var(--white); text-transform: none; }
  .chip--select::after { content: "▾"; right: 10px; }
  .chip--select[data-active="true"] { color: #000; background: var(--yellow); }

  /* A picked Twitch stream on a phone, where its player can't fit. */
  .screen-hint {
    padding: 3px 8px 2px;
    font: 400 18px/1 var(--font-pixel);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--yellow);
    background: #000;
    border: 2px solid var(--yellow);
  }

  /* ───────────── Search ───────────── */

  .search-icon { left: 8px; width: 14px; height: 14px; color: var(--ink-dim); }

  /* The same height and type as the Sound button beside it. */
  .search-input {
    width: 250px;
    height: 25px;
    padding: 1px 10px 0 29px;
    font: 400 20px/1 var(--font-pixel);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--navy-950);
    border: 2px solid var(--ink-dim);
  }

  .search-input::placeholder { color: var(--ink-dim); }
  .search-input:focus { outline: none; border-color: var(--yellow); }

  .search-suggestions {
    padding: 6px 0 8px;
    color: var(--white);
    background: var(--navy-900);
    border: 3px solid var(--yellow);
    box-shadow: 6px 6px 0 #000;
  }

  .suggestion-heading {
    padding: 8px 14px 4px;
    font: 400 20px/1 var(--font-pixel);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--yellow);
    text-shadow: var(--text-shadow);
  }

  .suggestion { gap: 2px; padding: 6px 14px; }
  .suggestion:is(:hover, [aria-selected="true"]) { background: var(--chan); }
  .suggestion-name { font: 700 19px/1.1 var(--font-display); text-shadow: var(--text-shadow); }

  .suggestion-meta {
    gap: 8px;
    font: 400 18px/1.1 var(--font-pixel);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }

  .suggestion-empty {
    margin: 0;
    padding: 10px 14px;
    font: 400 20px/1.2 var(--font-pixel);
    text-transform: uppercase;
    color: var(--ink-dim);
  }

  .chip--search .search-icon { width: 15px; height: 15px; color: inherit; }
  .chip--search { gap: 8px; }

  .ch-fav { color: var(--yellow); }
  .info-action[aria-pressed="true"] { color: var(--yellow); }

  /* ───────────── Settings menu ───────────── */

  .channel-list summary { padding: 8px 14px; }
  .channel-list summary:hover { background: var(--chan); }
  .channel-list summary::after { color: var(--ink-dim); transition: none; }
  .channel-count { font: 400 20px/1 var(--font-pixel); color: var(--ink-dim); }
  .channel-list li { padding: 4px 14px 4px 24px; font: 400 19px/1.1 var(--font-pixel); text-transform: uppercase; }
  .channel-list li:hover { background: var(--chan); }
  .channel-list .empty-note { color: var(--ink-dim); }
  .channel-remove { font: inherit; color: var(--ink-dim); }
  .channel-remove:hover { color: var(--white); }
  .transfer-fallback {
    width: calc(100% - 28px);
    margin: 0 14px 10px;
    padding: 4px 8px 3px;
    border: 2px solid var(--chan);
    border-radius: 0;
    font: 400 19px/1.1 var(--font-pixel);
    color: var(--ink-soft);
    background: #000;
    outline: none;
  }

  .settings-panel {
    padding: 6px 0 8px;
    color: var(--white);
    background: var(--navy-900);
    border: 3px solid var(--yellow);
    box-shadow: 6px 6px 0 #000;
  }

  .settings-heading {
    padding: 8px 14px 4px;
    font: 400 20px/1 var(--font-pixel);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--yellow);
    text-shadow: var(--text-shadow);
  }

  .setting { padding: 8px 14px; }
  .setting:hover { background: var(--chan); }
  .setting--transfer:hover { background: none; }
  .setting--sub { padding-left: 32px; }

  .setting-name {
    font: 400 22px/1.1 var(--font-pixel);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: var(--text-shadow);
  }

  .setting-hint { font: 400 17px/1.1 var(--font-pixel); color: var(--ink-dim); }
  /* Light or dark is a modern-mode choice; Retro has its own look. */
  .setting--appearance { display: none; }
  .platform-dot { width: 10px; height: 10px; margin-right: 10px; }

  .setting input[role="switch"] {
    width: 40px;
    height: 22px;
    background: var(--off);
    border: 2px solid var(--ink-dim);
  }

  .setting input[role="switch"]::before {
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--ink-dim);
  }

  .setting input[role="switch"]:checked { background: var(--yellow); border-color: var(--yellow); }
  .setting input[role="switch"]:checked::before { transform: translateX(18px); background: #000; }
  .setting input[role="switch"]:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

  /* ───────────── The guide grid ───────────── */

  .guide { background: #000; }

  .guide-header {
    background: var(--yellow);
    color: #000;
    border-bottom: var(--row-gap) solid #000;
    font: 400 28px/1 var(--font-pixel);
    text-transform: uppercase;
  }

  .date-cell {
    padding: 0 14px;
    border-right: var(--row-gap) solid #000;
  }

  .slot { padding-left: 10px; border-left: 2px solid #000; }
  .slot:first-child { border-left: 0; }

  .row-pick:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; }

  .row-actions { gap: 4px; padding-right: 6px; }

  .row-action {
    width: 26px;
    height: 26px;
    border: 2px solid var(--ink-dim);
    color: var(--ink-soft);
    background: var(--navy-950);
  }

  .row-action svg { width: 14px; height: 14px; }
  .row-action:hover { color: var(--white); border-color: var(--white); }
  .row-action[data-action="favorite"]:is(:hover, [aria-pressed="true"]) { color: var(--yellow); border-color: var(--yellow); }
  .row-action[data-action="block"]:hover { color: var(--live-red); border-color: var(--live-red); }

  .channel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    padding: 0 10px 0 14px;
    background: var(--chan);
  }

  .ch-thumb { display: none; }

  .ch-name {
    align-self: end;
    font: 700 19px/1.1 var(--font-display);
    text-shadow: var(--text-shadow);
  }

  .ch-platform {
    align-self: start;
    display: flex;
    gap: 8px;
    overflow: hidden;
    font: 400 18px/1 var(--font-pixel);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .ch-feed { color: var(--platform-ink); }
  .ch-more { color: var(--ink-dim); }

  /* Three platforms only fit set a little tighter. */
  .ch-platform:has(> :nth-child(3)) { gap: 6px; letter-spacing: 0; }

  .cell {
    gap: 2px;
    padding: 0 16px 0 15px;
    background: var(--blue);
  }

  /* Category stripe down the left edge of each program. */
  .cell::before { left: 0; top: 0; bottom: 0; width: 5px; }

  .cell-title {
    font: 600 20px/1.15 var(--font-display);
    text-shadow: var(--text-shadow);
  }

  .cell-meta {
    gap: 6px;
    font: 400 19px/1 var(--font-pixel);
    color: var(--ink-soft);
    text-shadow: var(--text-shadow);
  }

  .cell-viewers { color: var(--white); }
  .cell-viewers::before { content: "· "; color: var(--ink-dim); }
  /* Viewer counts in their platform's color (each, for a simulcast). */
  .feed-viewers { color: var(--platform-ink); }
  .feed-sep { color: var(--ink-dim); }

  .cell-arrow { right: 5px; font-size: 10px; color: var(--yellow); }

  .cell--next { background: var(--next); }
  .cell--next .cell-title { color: var(--ink-soft); }

  /* Off air: a dithered fill, like a 16-color palette faking a darker shade. */
  .cell--off {
    background-color: var(--off);
    background-image: conic-gradient(var(--off-dither) 25%, transparent 0 50%, var(--off-dither) 0 75%, transparent 0);
    background-size: 4px 4px;
  }

  .cell--off .cell-title {
    font: 400 20px/1 var(--font-pixel);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }

  /* Hover only hints that a row is clickable; the selected row (the one on
     the preview screen) gets the full yellow treatment. */
  .row:hover .channel { background: #1a31a6; }
  .row:hover .cell--live { background: var(--blue-hi); }

  .row.is-selected .channel { background: var(--yellow); }
  .row.is-selected :is(.ch-name, .ch-fav) { color: #000; text-shadow: none; }
  .row.is-selected :is(.ch-feed, .ch-more) { color: var(--navy-800); }

  .row.is-selected .cell--live {
    background: var(--blue-hi);
    box-shadow: inset 0 0 0 3px var(--yellow);
  }

  .now-line { background: var(--live-red); }

  .now-line::before {
    left: -5px;
    border: 6px solid transparent;
    border-top-color: var(--live-red);
  }

  .empty {
    font: 400 28px/1.2 var(--font-pixel);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }

  /* Under the CRT overlay, as part of the picture. */
  .toast-action { font: inherit; text-transform: uppercase; color: var(--white); }
  .toast-action:hover { text-decoration: underline; }
  .toast-close { margin-left: 16px; color: var(--ink-dim); }

  .toast {
    z-index: 10;
    padding: 6px 14px 4px;
    font: 400 23px/1.1 var(--font-pixel);
    background: #000;
    color: var(--yellow);
    border: 2px solid var(--yellow);
  }

  .stale-note {
    padding: 4px 12px 2px;
    font: 400 19px/1.1 var(--font-pixel);
    text-transform: uppercase;
    color: #000;
    background: var(--yellow);
  }

  /* ───────────── Multiview ───────────── */

  .mv-grid { gap: 8px; padding: 6px 8px 8px; }
  .mv-tile { border: 2px solid var(--blue); background: var(--chan); }
  .mv-caption { gap: 8px; padding: 3px 4px 2px 10px; font: 400 20px/1 var(--font-pixel); text-transform: uppercase; color: var(--ink-soft); }
  .mv-name { color: var(--white); }
  .mv-platform { color: var(--platform-ink); }
  .mv-button { width: 26px; height: 26px; border: 2px solid var(--ink-dim); color: var(--ink-soft); background: var(--navy-950); }
  .mv-button:hover { color: var(--white); border-color: var(--white); }
  .mv-button:focus-visible { outline: 2px solid var(--white); outline-offset: 1px; }
  .mv-button svg { width: 14px; height: 14px; }
  .mv-sound[aria-pressed="true"] { color: #000; border-color: var(--yellow); background: var(--yellow); }
  .mv-note { padding: 3px 8px 2px; font: 400 18px/1.1 var(--font-pixel); text-transform: uppercase; color: var(--yellow); background: #000; border: 2px solid var(--yellow); }
  .mv-note a { color: var(--white); }
  .mv-add { gap: 12px; border: 2px dashed var(--ink-dim); background: transparent; font: 400 20px/1.1 var(--font-pixel); text-transform: uppercase; color: var(--ink-dim); }
  .mv-add-button { padding: 6px 12px 4px; border: 0; font: 400 24px/1 var(--font-pixel); text-transform: uppercase; color: #000; background: var(--yellow); cursor: pointer; }
  .mv-add-button:hover { background: var(--white); }
  .mv-add-hint svg { width: 16px; height: 16px; }
  .row-action[data-action="multiview"]:is(:hover, [aria-pressed="true"]) { color: var(--yellow); border-color: var(--yellow); }

  /* ───────────── Footer, and agreeing to the terms ───────────── */

  .site-footer {
    padding: 4px 12px 2px;
    border-top: 2px solid var(--chan);
    font: 400 17px/1.1 var(--font-pixel);
    text-transform: uppercase;
    color: var(--ink-dim);
    background: #000;
  }
  .footer-links a { color: var(--ink-soft); text-decoration: none; }
  .footer-links a:hover { color: var(--white); text-decoration: underline; }

  .agreement { background: rgba(0, 0, 0, 0.75); }
  .agreement-card {
    padding: 20px 22px;
    border: 3px solid var(--yellow);
    background: var(--blue);
    box-shadow: 8px 8px 0 #000;
  }
  .agreement-title { margin: 0 0 12px; font: 400 32px/1 var(--font-pixel); text-transform: uppercase; color: var(--yellow); }
  .agreement-card p { margin: 0 0 12px; font: 400 21px/1.15 var(--font-pixel); color: var(--white); }
  .agreement-card a { color: var(--yellow); }
  .agreement-button {
    width: 100%;
    margin-top: 6px;
    padding: 8px 12px 6px;
    border: 0;
    font: 400 25px/1 var(--font-pixel);
    text-transform: uppercase;
    color: #000;
    background: var(--yellow);
    cursor: pointer;
  }
  .agreement-button:hover { background: var(--white); }
  .agreement-button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

  /* ───────────── CRT overlay ───────────── */

  .crt {
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    pointer-events: none;
    border-radius: 22px;
    background:
      radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.42) 100%),
      var(--scanlines),
      repeating-linear-gradient(90deg, rgba(255, 0, 0, 0.035) 0 1px, rgba(0, 255, 0, 0.025) 1px 2px, rgba(0, 0, 255, 0.035) 2px 3px);
    /* The spread fills the corners outside the radius: rounded picture tube. */
    box-shadow: 0 0 0 40px #000;
  }

  /* A faint bright band that rolls down the screen. */
  .crt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -25vh;
    height: 25vh;
    background: linear-gradient(to bottom, transparent, rgba(190, 210, 255, 0.045), transparent);
    animation: roll 10s linear infinite;
  }

  &[data-crt="off"] .crt,
  &[data-crt="off"] .screen::before,
  &[data-crt="off"] .screen::after { display: none; }

  /* ───────────── Phones ───────────── */

  @media (max-width: 760px) {
    --channel-w: 112px;
    --row-h: 58px;
    --header-h: 34px;

    .marquee {
      row-gap: 10px;
      padding: 12px 0;
    }

    .brandbar, .info { padding-inline: 16px; }

    .brandbar { gap: 8px; }
    .brandbar-right { gap: 6px; }
    .search-input { width: 32px; padding: 0; }
    .search:not(:focus-within) .search-input,
    .search:not(:focus-within) .search-input::placeholder { color: transparent; }
    .search:focus-within { background: var(--navy-900); }
    .search:focus-within .search-input { padding: 1px 10px 0 29px; }
    .logo { font-size: 21px; }
    .clock { margin-left: 2px; font-size: 30px; }
    .demo-bug { font-size: 15px; padding: 1px 4px 0; }
    .chip--small { padding: 2px 6px 1px; font-size: 17px; }

    .monitor { border-width: 2px 0; }
    .bug { font-size: 13px; padding: 1px 4px 0; }
    .bug--live, .bug--platform { top: 5px; }
    .bug--live, .bug--viewers { left: 5px; }
    .bug--platform { right: 5px; }
    .bug--viewers { bottom: 5px; }

    .info-label { font-size: 17px; }
    .info-actions { gap: 2px 12px; margin-top: 6px; }
    .info-action { font-size: 17px; }
    .info-tags { margin-top: 6px; gap: 4px; }
    .tag { font-size: 15px; padding: 1px 5px 0; }
    .tag--cat { display: none; }
    .info-name { margin: 0 0 2px; font-size: 22px; text-shadow: var(--text-shadow); }
    .info-title { font-size: 13px; }
    .info-stats { margin-top: 6px; gap: 0 10px; font-size: 18px; }
    .info-stats > :nth-child(n + 3) { display: none; }
    .watch-links { gap: 5px; margin-top: 8px; }
    .watch-btn { padding: 4px 9px 2px; font-size: 19px; letter-spacing: 0.02em; white-space: nowrap; }

    .filters { padding: 8px 16px; gap: 12px; }
    .filters--sub { padding-top: 0; gap: 6px; }
    .chip { font-size: 20px; padding: 4px 8px 3px; }
    .chip--icon { padding: 4px 8px 5px; } /* 32×25, like the search icon beside it */

    .guide-header { font-size: 22px; }
    .date-cell { padding: 0 8px; font-size: 18px; }
    .slot { padding-left: 6px; }

    .channel {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-content: center;
      row-gap: 2px;
      padding: 0 6px;
    }

    .ch-name { font-size: 15px; }
    .ch-platform { font-size: 15px; letter-spacing: 0.03em; }

    .cell { padding: 0 12px 0 11px; }
    .cell::before { width: 4px; }
    .cell-title { font-size: 16px; }
    .cell-meta { font-size: 16px; }

    .crt { border-radius: 14px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .screen::before,
    .crt::after,
    .live-dot { animation: none; }
  }
}

@keyframes roll {
  to { transform: translateY(150vh); }
}

@keyframes grain {
  0% { background-position: 0 0; }
  25% { background-position: -40px 20px; }
  50% { background-position: 30px -50px; }
  75% { background-position: -60px -10px; }
}

@keyframes static-flash {
  0% { opacity: 1; background-position: 0 0; }
  60% { opacity: 0.9; background-position: -60px 40px; }
  100% { opacity: 0; background-position: 30px -70px; }
}

@keyframes blink {
  50% { opacity: 0.2; }
}