/* ==========================================================================
   Up Next — vintage TV marketing site
   Palette: walnut #4a2f1d/#2e1c10 · brass #c9a15b · room #131017
            phosphor #0a0d0a · coral #f2695c · OSD green #3dff74 · amber #ffd23e
   ========================================================================== */

:root {
  --room: #131017;
  --wood-hi: #6b4526;
  --wood: #4a2f1d;
  --wood-lo: #2e1c10;
  --brass: #c9a15b;
  --phosphor: #0a0d0a;
  --coral: #f2695c;
  --coral-deep: #d94f43;
  --osd: #3dff74;
  --amber: #ffd23e;
  --cream: #f3efe4;
  --glow-color: 210, 225, 255; /* set by JS per channel */
  --ch-angle: 0deg;
  --vol-angle: -80deg;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--room);
  color: var(--cream);
  font-family: "Jost", "Futura", -apple-system, sans-serif;
  overflow-x: hidden;
}

/* ---------- the room ---------- */

.room {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vmin, 36px);
  padding-top: clamp(76px, 11vh, 120px);
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 105%, #1d1622 0%, var(--room) 55%),
    var(--room);
}

.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 48% at 50% 42%, rgba(var(--glow-color), 0.14), transparent 70%);
  transition: background 0.6s ease;
}

.tv-wrap {
  position: relative;
  width: min(1060px, 100%);
}

/* ---------- antenna ---------- */

.antenna {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -88%);
  width: 200px;
  height: 96px;
  pointer-events: none;
}
.antenna .ear {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 3px;
  height: 92px;
  background: linear-gradient(#777, #b9b9b9 40%, #555);
  border-radius: 2px;
  transform-origin: bottom center;
}
.ear-l { transform: rotate(-32deg); }
.ear-r { transform: rotate(24deg); }
.antenna-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 16px;
  background: linear-gradient(#3a3a3a, #171717);
  border-radius: 6px 6px 0 0;
}

/* ---------- cabinet ---------- */

.tv {
  position: relative;
  display: flex;
  gap: clamp(10px, 1.6vw, 18px);
  padding: clamp(14px, 2.4vw, 26px);
  border-radius: clamp(16px, 2.4vw, 26px);
  background:
    repeating-linear-gradient(93deg,
      rgba(0,0,0,0.14) 0 2px, transparent 2px 7px, rgba(255,255,255,0.035) 7px 9px, transparent 9px 26px),
    linear-gradient(178deg, var(--wood-hi) 0%, var(--wood) 34%, var(--wood-lo) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 224, 178, 0.28),
    inset 0 -3px 6px rgba(0, 0, 0, 0.55),
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 6px 16px rgba(0, 0, 0, 0.5);
}
.tv.shake { animation: whack 0.45s ease; }
@keyframes whack {
  0%   { transform: translate(0, 0) rotate(0); }
  15%  { transform: translate(-7px, 3px) rotate(-0.7deg); }
  35%  { transform: translate(6px, -2px) rotate(0.6deg); }
  55%  { transform: translate(-4px, 2px) rotate(-0.35deg); }
  75%  { transform: translate(3px, -1px) rotate(0.2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
.tv.rattle { animation: rattle 0.14s linear infinite; }
@keyframes rattle {
  0% { transform: translate(-1.5px, 1px); }
  50% { transform: translate(1.5px, -1px); }
  100% { transform: translate(-1.5px, 1px); }
}

/* ---------- screen ---------- */

.screen-bezel {
  flex: 3.1;
  min-width: 0;
  padding: clamp(10px, 1.6vw, 18px);
  border-radius: clamp(14px, 2vw, 22px);
  background: linear-gradient(180deg, #241610, #140c07);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.85),
    inset 0 -1px 2px rgba(255, 218, 170, 0.1);
}

.screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 4.5% / 6%;
  background: var(--phosphor);
  overflow: hidden;
  box-shadow:
    inset 0 0 clamp(30px, 6vw, 70px) rgba(0, 0, 0, 0.9),
    inset 0 0 8px 4px rgba(0, 0, 0, 0.9);
}

.picture {
  position: absolute;
  inset: 0;
  transition: opacity 0.15s;
}

/* power-off: collapse to a line, then a dot */
.tv.off .picture { opacity: 0; transition: none; }
.picture.collapsing { animation: crt-off 0.5s cubic-bezier(0.6, 0, 0.9, 1) forwards; }
@keyframes crt-off {
  0%   { transform: scale(1, 1); filter: brightness(1); }
  55%  { transform: scale(1, 0.006); filter: brightness(6); }
  70%  { transform: scale(0.55, 0.004); filter: brightness(8); }
  100% { transform: scale(0.001, 0.002); filter: brightness(12); opacity: 0; }
}
.picture.blooming { animation: crt-on 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
@keyframes crt-on {
  0%   { transform: scale(1, 0.005); filter: brightness(7) saturate(0.2); opacity: 1; }
  40%  { transform: scale(1, 1.02); filter: brightness(2.4) saturate(0.5); }
  100% { transform: scale(1, 1); filter: brightness(1) saturate(1); }
}

/* ---------- channels ---------- */

.channel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(14px, 3.5%, 34px) clamp(16px, 5%, 44px);
}
.channel[hidden] { display: none; }

/* CH2 / CH3 shared hero layout */
.ch-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4%, 44px);
  height: 100%;
  min-height: 0;
}

.phone {
  --bezel: clamp(3px, 0.5vw, 5px);
  flex: 0 0 auto;
  height: 88%;
  aspect-ratio: 1206 / 2622;
  border-radius: clamp(14px, 2.6vw, 26px);
  padding: var(--bezel);
  background: linear-gradient(160deg, #3c3c40, #101013);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 0 2px rgba(255,255,255,0.25);
  transform: rotate(-2.5deg);
}

/* hero phone: larger, sinks past the bottom of the tube */
.phone-cycle {
  position: relative;
  height: 116%;
  align-self: flex-end;
  transform: rotate(-2.5deg) translateY(22%);
}
.phone-cycle img {
  position: absolute;
  inset: var(--bezel);
  width: calc(100% - 2 * var(--bezel));
  height: calc(100% - 2 * var(--bezel));
  opacity: 0;
  transition: opacity 0.9s ease;
}
.phone-cycle img.active { opacity: 1; }
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.pitch { max-width: 34ch; min-width: 0; margin-left: clamp(24px, 5vw, 72px); }

.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(6px, 1.5vh, 14px);
}
.app-icon {
  width: clamp(44px, 7%, 72px);
  height: auto;
  border-radius: 22%;
  box-shadow: 0 6px 18px rgba(242, 105, 92, 0.35);
}
.app-name, .ch-title {
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  color: var(--cream);
  font-size: clamp(1.7rem, 4.4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-shadow: 0 0 18px rgba(242, 105, 92, 0.35);
}
.tagline {
  color: var(--coral);
  font-family: "Righteous", sans-serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.25;
  margin-bottom: clamp(6px, 1.2vh, 12px);
  text-shadow: 0 0 14px rgba(242, 105, 92, 0.4);
}
.sub {
  color: #c9c4b6;
  font-size: clamp(0.8rem, 1.45vw, 1rem);
  line-height: 1.45;
  margin-bottom: clamp(10px, 2.2vh, 20px);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border: 1.5px solid #8a857a;
  border-radius: 12px;
  color: var(--cream);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  cursor: default;
}
.store-badge:hover {
  border-color: var(--coral);
  box-shadow: 0 0 16px rgba(242, 105, 92, 0.3);
  transform: translateY(-1px);
}
.store-badge small { display: block; font-size: 0.62rem; letter-spacing: 0.04em; color: #b5b0a3; }
.store-badge strong { font-size: 1.05rem; letter-spacing: 0.02em; }

.fine {
  margin-top: clamp(8px, 1.6vh, 14px);
  font-family: "VT323", monospace;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  color: #7d897d;
  letter-spacing: 0.05em;
}

.dial-hint {
  position: absolute;
  right: 5%;
  bottom: 4%;
  font-family: "VT323", monospace;
  color: var(--osd);
  opacity: 0.65;
  font-size: clamp(0.8rem, 1.5vw, 1.1rem);
  letter-spacing: 0.08em;
  animation: hint-blink 2.4s steps(2) infinite;
}
@keyframes hint-blink { 50% { opacity: 0.25; } }

.osd-eyebrow {
  font-family: "VT323", monospace;
  color: var(--osd);
  letter-spacing: 0.14em;
  font-size: clamp(0.8rem, 1.5vw, 1.05rem);
  margin-bottom: clamp(4px, 1vh, 10px);
  text-shadow: 0 0 8px rgba(61, 255, 116, 0.6);
}
.channel[data-ch="3"] .ch-title { margin-bottom: clamp(6px, 1.2vh, 12px); }

/* CH2 breaking-news chyron */
.news-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  background: rgba(90, 12, 12, 0.85);
  border-bottom: 1px solid #5a1212;
  font-family: "VT323", monospace;
  color: var(--amber);
  font-size: clamp(0.85rem, 1.6vw, 1.15rem);
  letter-spacing: 0.08em;
  padding: 4px 0;
  text-shadow: 0 0 8px rgba(255, 210, 62, 0.35);
}
.news-banner span { animation: nf-scroll 22s linear infinite; }
.news-banner { cursor: pointer; }
.news-banner:hover { background: rgba(120, 16, 16, 0.92); }
.news-banner:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* CH6 newsflash */
.newsflash {
  background: linear-gradient(180deg, #2a0708, #180405);
  gap: clamp(4px, 1vh, 10px);
  overflow: hidden;
}
.nf-slate {
  align-self: flex-start;
  font-family: "Righteous", sans-serif;
  background: #e23333;
  color: #fff;
  padding: 2px 12px;
  letter-spacing: 0.3em;
  font-size: clamp(0.8rem, 1.6vw, 1.05rem);
  margin-bottom: clamp(4px, 1vh, 10px);
  animation: hint-blink 1.6s steps(2) infinite;
}
.nf-eyebrow {
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 210, 62, 0.5);
}
.newsflash .ch-title { margin-bottom: clamp(4px, 1vh, 8px); }
.newsflash .sub { max-width: 52ch; margin-bottom: clamp(6px, 1.2vh, 10px); }
.newsflash a {
  color: var(--amber);
  text-underline-offset: 3px;
}
.newsflash a:hover { color: #ffe27e; }
.newsflash a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.nf-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.55);
  border-top: 1px solid #5a1212;
  font-family: "VT323", monospace;
  color: var(--amber);
  font-size: clamp(0.85rem, 1.6vw, 1.15rem);
  letter-spacing: 0.08em;
  padding: 4px 0;
}
.nf-ticker span { animation: nf-scroll 20s linear infinite; }
@keyframes nf-scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .nf-ticker span, .news-banner span { animation: none; }
  .nf-slate { animation: none; }
}

/* CH4 teletext */
.teletext {
  background: #0a1550;
  font-family: "VT323", monospace;
  justify-content: flex-start;
  gap: clamp(4px, 1.2vh, 12px);
}
.tt-head, .tt-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  background: #071040;
  padding: 4px 10px;
  font-size: clamp(0.8rem, 1.9vw, 1.25rem);
  letter-spacing: 0.05em;
}
.tt-head span:nth-child(2) { color: var(--amber); }
.tt-list { list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 0; }
.tt-list li {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  line-height: 1.05;
  padding: 2px 10px;
}
.tt-list time { color: #29e8e8; grid-row: 1 / 3; font-size: clamp(0.85rem, 2vw, 1.3rem); }
.tt-list b { color: var(--amber); font-weight: 400; font-size: clamp(0.9rem, 2.1vw, 1.4rem); letter-spacing: 0.04em; }
.tt-list span { color: #cfd6ff; font-size: clamp(0.75rem, 1.7vw, 1.1rem); }
.tt-free b { color: #43ff7a; }
.tt-foot { font-size: clamp(0.7rem, 1.5vw, 1rem); color: #8fa0ff; }

/* CH5 credits */
.credits { text-align: center; justify-content: flex-start; overflow: hidden; }
.credits-roll { will-change: transform; }
.credits-roll dl {
  margin: clamp(10px, 2.5vh, 22px) 0;
  display: grid;
  gap: clamp(6px, 1.4vh, 13px);
}
.credits-roll dt {
  font-family: "VT323", monospace;
  color: #8b8574;
  letter-spacing: 0.22em;
  font-size: clamp(0.7rem, 1.3vw, 0.9rem);
  text-transform: uppercase;
}
.credits-roll dd { font-size: clamp(0.85rem, 1.7vw, 1.1rem); color: var(--cream); }
.credits-roll dd i { color: #8b8574; font-size: 0.82em; }
.credits-roll a { color: var(--coral); }
.credits .fine { text-align: center; }

/* CH0 dead channel */
.dead { align-items: center; text-align: center; }
.whack-hint {
  position: relative;
  z-index: 3;
  font-family: "VT323", monospace;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 10px 18px;
  border-radius: 8px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
.whack-hint .hand { display: inline-block; animation: whack-hand 0.9s ease infinite; }
@keyframes whack-hand { 50% { transform: rotate(-22deg) translateY(-2px); } }
.whack-hint small { color: #9be89b; }

/* test card */
.testcard { padding: 0; }
.bars { display: flex; height: 78%; }
.bars i { flex: 1; }
.bars i:nth-child(1) { background: #c0c0c0; }
.bars i:nth-child(2) { background: #c0c000; }
.bars i:nth-child(3) { background: #00c0c0; }
.bars i:nth-child(4) { background: #00c000; }
.bars i:nth-child(5) { background: #c000c0; }
.bars i:nth-child(6) { background: #c00000; }
.bars i:nth-child(7) { background: #0000c0; }

/* CH1 full SMPTE color bars */
.smpte { width: 100%; height: 100%; display: flex; flex-direction: column; }
.smpte > div { display: flex; width: 100%; }
.smpte-main { flex: 0 0 67%; }
.smpte-castle { flex: 0 0 8%; }
.smpte-pluge { flex: 1 1 auto; }
.smpte-main i { flex: 1; }
.smpte-main i:nth-child(1) { background: #b9b9b9; }
.smpte-main i:nth-child(2) { background: #c4c400; }
.smpte-main i:nth-child(3) { background: #00c3c4; }
.smpte-main i:nth-child(4) { background: #00c400; }
.smpte-main i:nth-child(5) { background: #c400c3; }
.smpte-main i:nth-child(6) { background: #c40000; }
.smpte-main i:nth-child(7) { background: #0000c4; }
.smpte-castle i { flex: 1; }
.smpte-castle i:nth-child(1) { background: #0000c4; }
.smpte-castle i:nth-child(2) { background: #131316; }
.smpte-castle i:nth-child(3) { background: #c400c3; }
.smpte-castle i:nth-child(4) { background: #131316; }
.smpte-castle i:nth-child(5) { background: #00c3c4; }
.smpte-castle i:nth-child(6) { background: #131316; }
.smpte-castle i:nth-child(7) { background: #b9b9b9; }
.smpte-pluge i:nth-child(1) { flex: 3; background: #0a2352; }
.smpte-pluge i:nth-child(2) { flex: 3; background: #fbfbfb; }
.smpte-pluge i:nth-child(3) { flex: 3; background: #2b0a56; }
.smpte-pluge i:nth-child(4) { flex: 3; background: #131316; }
.smpte-pluge i:nth-child(5) { flex: 1; background: #0a0a0c; }
.smpte-pluge i:nth-child(6) { flex: 1; background: #202024; }
.smpte-pluge i:nth-child(7) { flex: 2; background: #131316; }
.standby {
  flex: 1;
  display: grid;
  place-items: center;
  background: #111;
  font-family: "VT323", monospace;
  font-size: clamp(1.2rem, 3.2vw, 2.2rem);
  letter-spacing: 0.35em;
  color: #eee;
  animation: hint-blink 1.6s steps(2) infinite;
}

/* ---------- static, OSD, CRT overlays ---------- */

.static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s linear;
  z-index: 2;
}
.static.on { opacity: 1; }
.static.trace { opacity: 0.14; }

.osd {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  font-family: "VT323", monospace;
  color: var(--osd);
  text-shadow: 0 0 10px rgba(61, 255, 116, 0.7), 1px 0 0 rgba(255, 0, 60, 0.35), -1px 0 0 rgba(0, 120, 255, 0.35);
}
.osd-ch {
  position: absolute;
  top: 5%;
  right: 6%;
  font-size: clamp(1.2rem, 3vw, 2rem);
  letter-spacing: 0.1em;
  transition: opacity 0.4s ease 0s;
}
.osd-vol {
  position: absolute;
  left: 6%;
  bottom: 6%;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.05em;
  white-space: pre;
}
.osd-msg {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  font-size: clamp(1rem, 2.6vw, 1.6rem);
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 14px;
  border-radius: 6px;
  white-space: nowrap;
}

.crt {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(255, 60, 60, 0.045) 0 1px,
      rgba(60, 255, 60, 0.035) 1px 2px,
      rgba(60, 60, 255, 0.045) 2px 3px);
  animation: flicker 0.14s steps(2) infinite;
}
@keyframes flicker { 50% { opacity: 0.88; } }

.glass {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(58% 42% at 32% 22%, rgba(255, 255, 255, 0.1), transparent 60%),
    radial-gradient(130% 120% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.5) 100%);
}

.power-flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, #fff, transparent);
}

/* ---------- control panel ---------- */

.panel {
  flex: 1;
  min-width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.8vh, 18px);
  padding: clamp(10px, 1.6vw, 16px) clamp(6px, 1vw, 12px);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.16));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 -1px 1px rgba(255, 220, 170, 0.08);
}

.nameplate { text-align: center; line-height: 1.1; }
.nameplate .script {
  font-family: "Yellowtail", cursive;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  background: linear-gradient(178deg, #f8f4ec 20%, #b9b29f 45%, #fffdf5 52%, #97917f 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8));
}
.nameplate .model {
  display: block;
  font-family: "VT323", monospace;
  font-size: clamp(0.6rem, 1vw, 0.72rem);
  letter-spacing: 0.28em;
  color: var(--brass);
  opacity: 0.85;
  margin-top: 2px;
}

.dial-block { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.dial {
  --size: clamp(72px, 8.5vw, 104px);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 5px;
  background:
    repeating-conic-gradient(from 0deg, #1c1c1e 0deg 9deg, #3d3d42 9deg 18deg);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.65),
    inset 0 1px 2px rgba(255, 255, 255, 0.28);
  touch-action: manipulation;
}
.dial-sm { --size: clamp(58px, 6.6vw, 82px); }
.dial:active { transform: scale(0.97); }
.dial:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.dial-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 32% 28%, #4b4b50, #232326 58%, #131315 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.14), inset 0 -3px 6px rgba(0, 0, 0, 0.7);
  transform: rotate(var(--angle, 0deg));
  transition: transform 0.22s cubic-bezier(0.3, 1.6, 0.4, 1);
}
#chDialFace { --angle: var(--ch-angle); }
#volDialFace { --angle: var(--vol-angle); }
.dial-face .notch {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 8%;
  height: 26%;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(var(--cream), #b9b29f);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.dial-label {
  font-family: "VT323", monospace;
  font-size: clamp(0.66rem, 1.1vw, 0.8rem);
  letter-spacing: 0.3em;
  color: var(--brass);
}

.switch-row { display: flex; gap: 8px; }
.pswitch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "VT323", monospace;
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  letter-spacing: 0.14em;
  color: #d8d2c2;
  background: linear-gradient(180deg, #2b2b2e, #151517);
  border: 1px solid #000;
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.14);
}
.pswitch:active { transform: translateY(1px); }
.pswitch:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.pled {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4d3f;
  box-shadow: 0 0 8px #ff4d3f;
}
.pled.off { background: #3a3a3a; box-shadow: none; }
/* mute LED: lit red only when muted (uses the default .pled red) */

.speaker {
  width: 82%;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 0 4px;
}
.speaker i {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.75) 12% 88%, transparent);
  box-shadow: 0 1px 0 rgba(255, 220, 170, 0.07);
}

/* ---------- feet & caption ---------- */

.tv-feet {
  display: flex;
  justify-content: space-between;
  padding: 0 9%;
  height: 34px;
}
.tv-feet i {
  width: 30px;
  height: 100%;
  background: linear-gradient(180deg, var(--wood-lo), #1a0f07);
  transform: perspective(60px) rotateX(14deg);
  border-radius: 0 0 6px 6px;
}

.floor-note {
  margin-top: clamp(10px, 2.5vh, 22px);
  text-align: center;
  font-family: "VT323", monospace;
  color: #575263;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  letter-spacing: 0.08em;
}
.floor-note b { color: #7a7490; }
.floor-note a { color: #7a7490; }
.floor-note a:hover { color: var(--coral); }

/* ---------- mobile ---------- */

@media (max-width: 740px) {
  .room { padding: 14px 10px 26px; padding-top: 72px; align-items: start; }
  .tv { flex-direction: column; }
  .screen-bezel { flex: none; }
  .screen { aspect-ratio: 3 / 4; }
  .channel { padding: 14px 16px; }

  .panel {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 10px;
  }
  .nameplate { width: 100%; }
  .speaker { display: none; }
  .switch-row { flex-direction: column; gap: 8px; }

  .antenna { transform: translate(-50%, -82%) scale(0.62); }

  /* hero stacks vertically: text up top (clear of the banner), phone large below and bleeding off the bottom */
  .ch-hero { flex-direction: column; gap: clamp(12px, 2.5vh, 20px); }
  .ch-hero .pitch { order: -1; }
  .channel[data-ch="2"] .ch-hero { justify-content: flex-start; padding-top: clamp(30px, 7vh, 52px); }
  .phone { height: 42%; width: auto; transform: rotate(0deg); }
  .phone-cycle { align-self: center; height: 74%; transform: none; }
  .pitch { text-align: center; max-width: 100%; margin-left: 0; }
  .brand-row { justify-content: center; margin-bottom: 6px; }
  .app-icon { width: 44px; }
  .app-name { font-size: 1.8rem; }
  .tagline { font-size: 1.02rem; margin-bottom: 8px; }
  .sub { font-size: 0.85rem; margin-bottom: 14px; line-height: 1.5; }
  .fine { margin-top: 10px; font-size: 0.8rem; }
  .dial-hint { display: none; }
  .kbd-hint { display: none; }

  .tt-list li { grid-template-columns: 2.6em 1fr; }
}

/* very short desktop windows: cap TV by height */
@media (min-width: 741px) and (min-aspect-ratio: 4/3) {
  .tv-wrap { width: min(1060px, 100%, calc((100svh - 120px) * 1.45)); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .crt { animation: none; }
  .dial-hint, .standby { animation: none; }
  .whack-hint .hand { animation: none; }
  .tv.shake, .tv.rattle { animation: none; }
  .picture.collapsing, .picture.blooming { animation: none; }
  .dial-face { transition: none; }
  .static { transition: none; }
}