/* STAY TUNED (was SIGNAL LOST): the pack frame (2026-10-13). A neutral late-night TV set: smoked glass, faint scan lines, a little
   static, riso paper and ink outlines kept from the engine. Muted inks only; the frame takes ONE accent from the
   channel in focus (--ch). Every channel brings its own world under [data-channel="<id>"] (public/channels/<id>/
   style.css), set on <html> while that show is on air. LITE (Chromecast): no loops, no filters, no blend modes,
   transform + opacity only. (Replaces the cold-blue jammed-signal skin.) */
:root {
  --ink: #121215;
  --ink-2: #1b1b20;
  --ink-3: #28282f;
  --smoke: #8c8a90;
  --paper: #ebe4d6;
  --paper-2: #d8cfbd;
  --paper-ink: #17161a;
  --pink: #c97b63;          /* the engine's loud accent: muted terracotta */
  --pink-deep: #a65f4a;
  --blue: #5f7d8e;          /* slate */
  --blue-deep: #476172;
  --yellow: #e3c47d;        /* old tube amber: primary buttons */
  --yellow-deep: #c6a35a;
  --mint: #84a98f;
  --orange: #d48a55;
  --lilac: #9a8bb0;
  --red: #c75a4c;
  --good: #84a98f;
  --bad: #c75a4c;
  --osd: #d9f0c8;           /* the on-screen display: a pale phosphor green, the only "screen" colour */
  --osd-font: 'VT323', 'Space Mono', ui-monospace, monospace;
  --ch: #e3c47d;            /* the channel in focus (set by public/js/game.js from the guide) */
}
body { background: var(--ink); }
/* scan lines over everything: 1 px in 3, barely there, never catch taps (no blend mode: LITE-safe) */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}
/* the glass of the set: a soft vignette at the edges */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .38) 100%);
}
html.lite body::before { display: none; }

/* ---------------------------------------------------------------- OSD + static (shared by the flip, the opening, the teaser) */
.osd { font: 400 34px/1 var(--osd-font); color: var(--osd); letter-spacing: .04em; text-shadow: 2px 2px 0 rgba(0, 0, 0, .65); }
.static-cv { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
/* the channel flip overlay (public/pack/frame.js flip()): static burst, CH number, name; one-shot, WAAPI */
.flipfx { position: fixed; inset: 0; z-index: 9990; pointer-events: none; }
.flipfx .fx-static { position: absolute; inset: 0; opacity: 0; }
.flipfx .fx-bar { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1px; background: var(--osd); opacity: 0; transform: scaleX(0); }
.flipfx .fx-osd { position: absolute; top: calc(var(--safe-top) + 22px); right: 24px; text-align: right; opacity: 0; font-size: 44px; }
.flipfx .fx-osd small { display: block; font: 400 22px/1 var(--osd-font); color: var(--osd); opacity: .85; margin-top: 4px; }
.screen-mode .flipfx .fx-osd { top: 5vh; right: 5vw; font-size: 9vh; }
.screen-mode .flipfx .fx-osd small { font-size: 3.6vh; }

/* ---------------------------------------------------------------- the coming-soon teaser (public/pack/frame.js soonView) */
.soon { max-width: 560px; margin: 0 auto; padding: calc(var(--safe-top) + 46px) var(--gutter) 40px; display: grid; gap: 18px; }
.soon .lead { text-align: center; font: 600 16px/1.4 var(--body); color: var(--paper-2); max-width: 30em; margin: 0 auto; }
.listings { padding: 14px 14px 10px; }
.listings .kicker { margin-bottom: 8px; }
.listings .lrow { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1.5px dashed rgba(23, 22, 26, .25); }
.listings .lrow:first-of-type { border-top: 0; }
.listings .lrow .t { font: 700 13px/1.2 var(--mono); }
.listings .lrow .t small { display: block; font-weight: 400; opacity: .6; }
.listings .lrow .n { font: 400 20px/1 var(--display); letter-spacing: .02em; }
.listings .lrow .p { font: 500 13px/1.3 var(--body); opacity: .75; margin-top: 3px; }
.listings .lrow .tag { font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 6px; border: 1.5px solid var(--paper-ink); transform: rotate(3deg); white-space: nowrap; }
.listings .lrow .tag.on { background: var(--tile, var(--ch)); }
.soon .acts { display: grid; gap: 10px; }
.soon .acts a.btn { text-decoration: none; }
.soon .staff { text-align: center; font: 600 13px/1.4 var(--body); color: var(--smoke); }
.soon .staff button { background: none; border: 0; color: var(--paper); text-decoration: underline; font: inherit; padding: 4px; cursor: pointer; }

/* ---------------------------------------------------------------- the STAY TUNED wordmark + title card (public/pack/frame.js)
   The card is the painted living room (pack/title.webp) in a printed frame; the set in the picture shows the guide's
   tiles; the wordmark's knob is a pre-rendered strip moved by one transform. Static layers only (LITE-safe). */
.st-mark svg { display: block; width: 100%; height: auto; }
.logo .st-home { width: min(78vw, 340px); margin: 0 auto; }
.st-card { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid var(--paper-ink); border-radius: 10px; background: #1c1a18; box-shadow: 6px 6px 0 rgba(0, 0, 0, .55); }
.st-card .st-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the dark left side of the room, deepened for the title (a plain gradient: painted once) */
.st-card .st-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 18, 21, .9) 0%, rgba(18, 18, 21, .62) 36%, rgba(18, 18, 21, 0) 56%); }
.st-card .st-screen { position: absolute; border-radius: 14% / 16%; overflow: hidden; }
.st-card .st-tile { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.st-card .st-osd { position: absolute; top: 6%; right: 7%; font-size: clamp(9px, 2.1vw, 22px); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; white-space: nowrap; }
.st-card .st-titlemark { position: absolute; left: 4.5%; top: 9%; width: 42%; }
.st-card .st-knob { position: absolute; aspect-ratio: 1; overflow: hidden; }
.st-card .st-strip { display: block; height: 100%; width: auto; max-width: none; }
.st-card .st-tag { position: absolute; left: 4.8%; bottom: 8%; font: 400 clamp(13px, 3.2vw, 30px)/1 var(--osd-font); color: var(--osd); letter-spacing: .05em; text-shadow: 2px 2px 0 rgba(0, 0, 0, .65); }
/* the teaser hero: the card + a COMING SOON band slapped on like a sticker */
.st-hero { position: relative; }
.st-hero .st-soonband { position: absolute; right: -6px; bottom: -12px; font: 400 clamp(18px, 5vw, 26px)/1 var(--osd-font); color: var(--paper-ink); background: var(--yellow); padding: 6px 12px 4px; border: 2.5px solid var(--paper-ink); box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); transform: rotate(-3deg); }
.st-join { padding: 14px 14px 12px; display: grid; gap: 8px; }
.st-join .small { font: 500 13px/1.35 var(--body); opacity: .8; }
/* the TV's title screen (engine tv.js pairing page): the card fills the left column */
.tvpair .logo .st-card { width: 100%; }
/* the TV guide's header: the one-line wordmark */
.guide .g-head .st-guide { width: 26vh; flex: none; }
.guide .g-head { align-items: center; }

/* ---------------------------------------------------------------- the channel guide (lobby panel, public/pack/frame.js)
   Built around the TV set (public/pack/set.js): the painted walnut CRT on the sideboard of the living room
   (pack/room.webp), the focused channel's loop in its glass; the show's card beside it (TV) or under it (phones);
   a strip of the eight channels. Static gradients only; every animation is a one-shot WAAPI transform/opacity. */
.guide { padding: 12px 12px 12px; display: grid; gap: 12px; }
.guide .g-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.guide .g-head .osd { font-size: 22px; color: var(--paper); text-shadow: none; opacity: .8; }
.g-body { display: grid; gap: 12px; }
/* the room: a square-ish crop on phones, centred on the sideboard; the set stands on it */
.g-stage { position: relative; aspect-ratio: 10 / 11; overflow: hidden; border: 2.5px solid var(--paper-ink); border-radius: 8px; background: #1c1a18; }
.g-stage .g-room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 82.7% 50%; display: block; }
.g-stage .g-lamp { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(10, 10, 12, .55) 100%); pointer-events: none; }
.g-stage .tvs-slot { position: absolute; left: 20%; width: 60%; bottom: 28%; }

/* the set (public/pack/set.js): the body is the cut-out picture; the glass sits under its screen hole; the ears and
   the knob are their own layers; the antenna's height is reserved above it (margin in % of the width) */
.tvset { position: relative; margin-top: 37%; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.tvset.tap { cursor: pointer; }
.tvset .tvs-wob { position: relative; transform-origin: 50% 100%; }
.tvset .tvs-body { position: relative; display: block; width: 100%; height: auto; pointer-events: none; }
.tvset .tvs-ant { position: absolute; left: 33.4%; bottom: 94.3%; width: 19.3%; height: auto; transform-origin: 50% 96%; pointer-events: none; }
.tvset .tvs-knob { position: absolute; aspect-ratio: 1; height: auto; transition: transform 380ms cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
.tvset .tvs-glass { position: absolute; overflow: hidden; border-radius: 10% / 12%; background: #0b0c0d; }
.tvset .tvs-poster, .tvset .tvs-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tvset .tvs-vid { opacity: 0; transition: opacity 320ms linear; }
.tvset .tvs-vid.on { opacity: 1; }
.tvset .tvs-static { position: absolute; inset: 0; opacity: 0; }
/* the curved glass: a soft highlight top-left, the tube's dark edges, faint scan lines (all static) */
.tvset .tvs-shine { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 28% 18%, rgba(255, 255, 255, .16), transparent 60%), radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, .5) 100%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px); }
.tvset .tvs-osd { position: absolute; top: 6%; right: 6%; text-align: right; opacity: 0; font-size: 6.2vw; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; }
.tvset .tvs-osd small { display: block; font-size: .55em; opacity: .9; }
.tvset .tvs-soon { display: none; position: absolute; left: -8%; bottom: 9%; padding: 3% 14% 2.4%; font: 700 2.6vw/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink); background: var(--yellow); border: 2px solid var(--paper-ink); transform: rotate(-8deg); }
.tvset.is-soon .tvs-soon { display: block; }
.tvset .tvs-shadow { position: absolute; left: 4%; right: 4%; bottom: -3%; height: 9%; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55), transparent 70%); pointer-events: none; }

/* the show's card */
.g-card { padding: 12px 14px; background: var(--paper); color: var(--paper-ink); border: 2.5px solid var(--paper-ink); border-left: 8px solid var(--ch); border-radius: 6px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); display: grid; gap: 4px; align-content: start; }
.g-card .g-kick { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-card .g-kick .osd { font-size: 24px; color: var(--paper-ink); text-shadow: none; }
.g-card .g-name { font: 400 clamp(28px, 9vw, 44px)/.95 var(--display); letter-spacing: .01em; overflow-wrap: break-word; }
.g-card .g-host { font: 600 13px/1.25 var(--body); opacity: .8; }
.g-card .g-pitch { margin: 4px 0 0; font: 500 14px/1.35 var(--body); }
.g-card .g-when { margin-top: 6px; font: 700 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
/* Rex Reception's host cam (public/pack/rex.js): a little walnut monitor at the top of the card, his name beside it.
   The poster breathes at idle (transform only); his loops cross-fade by opacity; no video = a transform wobble. */
.g-rex { position: absolute; left: 2%; bottom: 3%; width: 22%; z-index: 2; display: grid; justify-items: center; gap: 3px; pointer-events: none; }
.g-rex-t { display: grid; justify-items: center; padding: 2px 7px 3px; background: rgba(12, 12, 14, .78); border: 1.5px solid rgba(242, 232, 213, .35); border-radius: 4px; text-align: center; white-space: nowrap; }
.g-rex-t b { font: 400 13px/1 var(--display); letter-spacing: .02em; color: var(--paper); }
.g-rex-t small { font: 700 8px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); opacity: .6; }
.rex-slot { width: 100%; }
.rex { position: relative; display: grid; gap: 4px; justify-items: center; }
.rex-box { position: relative; width: 100%; box-sizing: border-box; padding: 6%; background: linear-gradient(#5b3b22, #3a2414); border: 2px solid #1d120a; border-radius: 14%; box-shadow: 3px 4px 0 rgba(0, 0, 0, .45); }
.rex-screen { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12%; overflow: hidden; background: #1b2526; }
.rex-poster, .rex-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rex-vid { opacity: 0; transition: opacity .18s linear; }
.rex-vid.on { opacity: 1; }
.rex-scan { position: absolute; inset: 0; background: repeating-linear-gradient(rgba(8, 10, 10, .18) 0 1px, transparent 1px 3px); pointer-events: none; }
.rex-glass { position: absolute; inset: 0; border-radius: 12%; background: radial-gradient(ellipse at 30% 18%, rgba(255, 250, 230, .16), transparent 42%), radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, .45) 100%); pointer-events: none; }
.rex-plate { display: none; }
.rex-plate b, .rex-plate small { display: none; }
.rex-tally { display: inline-flex; align-items: center; gap: .35em; font: 700 .7em/1 var(--mono); letter-spacing: .1em; padding: .25em .45em; border-radius: 3px; background: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .55); }
.rex-tally i { width: .6em; height: .6em; border-radius: 50%; background: #5a2a25; }
.rex.talking .rex-tally { color: #ffe1d6; background: #8e2a26; }
.rex.talking .rex-tally i { background: #ff5a45; }
.rex-poster { transform-origin: 50% 85%; }
.rex[data-mood="idle"] .rex-poster { animation: rex-breathe 4.4s ease-in-out infinite alternate; }
.rex.wob .rex-poster { animation: rex-wob .44s ease-in-out infinite; }
.rex.wob[data-mood="laugh"] .rex-poster { animation: rex-chuckle .24s ease-in-out infinite; }
.g-rex .rex.talking .rex-box { box-shadow: 3px 4px 0 rgba(0, 0, 0, .45), 0 0 0 3px var(--ch); }
@keyframes rex-breathe { from { transform: scale(1); } to { transform: scale(1.025) translateY(-.6%); } }
@keyframes rex-wob { 0%, 100% { transform: none; } 30% { transform: rotate(-1.3deg) scale(1.02, .99); } 65% { transform: translateY(1.2%) rotate(1deg) scale(.99, 1.02); } }
@keyframes rex-chuckle { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(2deg) translateY(-2%) scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .rex .rex-poster { animation: none !important; } }
.screen-mode .g-rex { width: 17%; left: 3%; bottom: 5%; gap: .6vh; }
.rex-plate { position: absolute; top: 4%; right: 6%; } .rex.talking .rex-plate { display: flex; font-size: 9px; } .screen-mode .rex.talking .rex-plate { font-size: 1.3vh; }
.screen-mode .g-rex-t { padding: .3vh 1vh .4vh; } .screen-mode .g-rex-t small { font-size: 1.2vh; } .screen-mode .g-rex-t b { font-size: 2.4vh; }
.g-sticker { font: 700 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; background: var(--paper-2); border: 1.5px solid var(--paper-ink); transform: rotate(3deg); white-space: nowrap; }
.g-sticker.on { background: var(--ch); }

/* the eight channels: painted thumbs, the focused one lifted and lit in its accent */
.g-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.g-th { position: relative; display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--paper); font: inherit; text-align: left; transition: transform 160ms cubic-bezier(.2, 1.3, .4, 1); }
button.g-th { cursor: pointer; }
button.g-th:active { transform: scale(.94); }
.g-th .g-th-art { position: relative; display: block; aspect-ratio: 4 / 3; border: 2px solid var(--paper-ink); border-radius: 5px; overflow: hidden; background: var(--ink-3); }
.g-th .g-th-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-th .g-th-ch { position: absolute; left: 4px; top: 2px; font: 400 18px/1 var(--osd-font); color: var(--osd); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.g-th .g-th-n { font: 700 10px/1.15 var(--mono); letter-spacing: .02em; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-th.soon .g-th-art img { opacity: .7; }
.g-th.focus { transform: translateY(-3px); }
.g-th.focus .g-th-art { outline: 3px solid var(--tile, var(--ch)); outline-offset: 2px; }
.g-th.focus .g-th-n { opacity: 1; color: var(--tile, var(--ch)); }
.g-th.tuned .g-th-art::after { content: ''; position: absolute; right: 5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--good); border: 1.5px solid var(--paper-ink); }
.g-remote { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; align-items: stretch; }
.g-remote .rbtn { display: grid; place-items: center; height: 56px; border-radius: 28px; border: 2.5px solid var(--paper-ink); background: var(--ink-3); color: var(--paper); font: 400 30px/1 var(--osd-font); box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); cursor: pointer; }
.g-remote .rbtn:active { transform: scale(.94); }
.g-remote .rok { border-radius: 10px; border: 2.5px solid var(--paper-ink); background: var(--ch); color: var(--paper-ink); font: 400 22px/1 var(--display); letter-spacing: .03em; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); cursor: pointer; }
.g-remote .rok:active { transform: scale(.97); }
.g-remote .rok.cold { background: var(--paper-2); }
.g-hint { font: 600 12px/1.3 var(--body); color: var(--smoke); text-align: center; }
/* a wide phone / tablet: the set and the card side by side */
@media (min-width: 640px) {
  .g-body { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
  .tvset .tvs-osd { font-size: 3.4vw; } .tvset .tvs-soon { font-size: 1.4vw; }
  .g-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
/* the TV: the room wide (16:9, the set on the sideboard), the card beside it, the strip in one row; sizes in vh so
   720p and 1080p sets match */
.screen-mode .guide { padding: 1.8vh 1.4vw; gap: 1.6vh; }
.screen-mode .guide .g-head .osd { font-size: 4vh; }
.screen-mode .g-body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.4vw; align-items: stretch; }
.screen-mode .g-stage { aspect-ratio: 16 / 9; }
.screen-mode .g-stage .g-room { object-position: 50% 50%; }
.screen-mode .g-stage .tvs-slot { left: 49%; width: 31%; bottom: 28.5%; }
.screen-mode .tvset .tvs-osd { font-size: 3.6vh; }
.screen-mode .tvset .tvs-soon { font-size: 1.3vh; }
.screen-mode .g-card { padding: 2vh 1.4vw; gap: .8vh; }
.screen-mode .g-card .g-kick .osd { font-size: 4.2vh; }
.screen-mode .g-sticker { font-size: 1.4vh; }
.screen-mode .g-card .g-name { font-size: 5.6vh; }
.screen-mode .g-card .g-host { font-size: 2vh; }
.screen-mode .g-card .g-pitch { font-size: 2.3vh; }
.screen-mode .g-card .g-when { font-size: 1.6vh; }
.screen-mode .g-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1vh .8vw; }
.screen-mode .g-th .g-th-ch { font-size: 2.6vh; }
.screen-mode .g-th .g-th-n { font-size: 1.5vh; }
.screen-mode .screen-lobby .tvl-tag { font-size: 2.4vh; }

/* ---------------------------------------------------------------- the opening (channel flip into the show) */
.opening-ch { position: relative; width: min(92vw, 720px); aspect-ratio: 4 / 3; margin: 0 auto; border-radius: 22px / 18px; overflow: hidden; background: #0b0c0d; border: 3px solid var(--paper-ink); }
.screen-mode .opening-ch { width: min(86vw, 112vh); }
.opening-ch .static-cv { position: absolute; inset: 0; }
.opening-ch .op-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.opening-ch .op-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 12, 13, 0) 35%, rgba(11, 12, 13, .82) 100%); }
.opening-ch .osd { position: absolute; top: 5%; right: 5%; text-align: right; font-size: clamp(30px, 8vw, 72px); opacity: 0; }
.opening-ch .osd small { display: block; font-size: .45em; opacity: .85; }
.opening-ch .name { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font: 400 clamp(40px, 12vw, 110px)/.9 var(--display); color: var(--paper); opacity: 0; }
.opening-ch .crew { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font: 400 clamp(16px, 3.6vw, 28px)/1 var(--osd-font); color: var(--osd); opacity: 0; }
/* ---- 2026-10-14 polish ---- */
/* the leader's Skip on a skippable beat (public/pack/skip.js): bottom right, out of the way of the cards */
.st-skip { position: absolute; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 30px; border: 2.5px solid var(--paper-ink, #151318); background: var(--paper, #f2e8d5); color: var(--paper-ink, #151318); font: 700 15px/1 var(--body); box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }
.st-skip i { font-style: normal; letter-spacing: -.1em; }
.st-skip.gone { opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; pointer-events: none; }
/* the opening: "Everybody's in!" + Rex's 3-2-1 on the set */
.opening-ch .op-in { position: absolute; left: 6%; top: 7%; padding: .25em .6em; background: var(--yellow, #ffd23f); color: var(--paper-ink, #151318); border: 3px solid var(--paper-ink, #151318); font: 400 clamp(18px, 4.4vw, 40px)/1 var(--display); opacity: 0; transform: rotate(-4deg); }
.opening-ch .op-count { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(120px, 34vw, 300px)/1 var(--osd-font, monospace); color: var(--osd, #e8f5e0); text-shadow: 0 0 .12em rgba(232, 245, 224, .55), .04em .04em 0 #000; opacity: 0; pointer-events: none; }
.screen-mode .opening-ch .op-count { font-size: 46vh; } .screen-mode .opening-ch .op-in { font-size: 6vh; }
/* the TV lobby fits without shrinking the QR: the guide card already carries the wordmark */
.screen-mode .screen-lobby .tvl-side > .logo, .screen-mode .screen-lobby .tvl-tag { display: none; }
.tvl-hidden .tvl-lock svg { width: 30vh; height: 30vh; margin: 4vh auto 2vh; display: block; opacity: .8; }
/* a new viewer on the TV: the channel-style OSD banner (public/js/game.js tunedIn) */
.st-tuned { position: fixed; left: 50%; top: 7vh; z-index: 60; display: flex; align-items: baseline; gap: 2vh; padding: 1.6vh 3.2vh; transform: translateX(-50%); background: rgba(8, 10, 11, .9); border: 3px solid var(--osd, #e8f5e0); color: var(--osd, #e8f5e0); font: 400 4.2vh/1 var(--osd-font, monospace); letter-spacing: .08em; overflow: hidden; animation: st-tuned-in .38s cubic-bezier(.2, 1.4, .4, 1) both; }
.st-tuned b { font: 400 7vh/1 var(--display); color: var(--yellow, #ffd23f); letter-spacing: .02em; }
.st-tuned-ch { font-size: 2.4vh; opacity: .75; }
.st-tuned-st { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 4px); animation: st-tuned-st .5s steps(4) both; pointer-events: none; }
.st-tuned.out { animation: st-tuned-out .4s ease-in both; }
@keyframes st-tuned-in { from { opacity: 0; transform: translateX(-50%) scaleY(.1); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes st-tuned-out { to { opacity: 0; transform: translateX(-50%) translateY(-3vh); } }
@keyframes st-tuned-st { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .st-tuned, .st-tuned.out, .st-tuned-st { animation: none; } }

/* the lobby's install chip (pack/frame.js installChip, 2026-10-14) */
.g-install:empty { display: none; }
.g-install { display: flex; justify-content: center; margin-top: 10px; }
.g-inst-btn { width: auto; }
.g-inst-ios { font: 500 13px/1.35 var(--body, inherit); opacity: .85; text-align: center; }