/* Kadabra Games Room v25 — implementation of Website Updates.pdf
   Loaded last. The room now has exactly two primary compositions:
   1) television-focused, and 2) cassette-selection. */

:root {
  --v25-red: #d94a3d;
  --v25-red-dark: #6f1712;
  --v25-cream: #f2dfb2;
  --v25-brass: #d2ad5f;
  --v25-shelf-width: clamp(310px, 21vw, 365px);
}

/* ---------- Permanent two-view room composition ---------- */
body.room-primary-layout .room-layout-v4 {
  padding: clamp(12px, 1.6vw, 24px) 2px 32px !important;
}

body.room-primary-layout .hero-zone,
body.room-primary-layout.onboarding-active .hero-zone,
body.room-primary-layout.cassette-viewing-focus .hero-zone {
  position: relative !important;
  isolation: isolate;
  width: min(1720px, calc(100vw - 10px)) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--v25-shelf-width) !important;
  grid-template-areas:
    "main tapes"
    "chat chat" !important;
  align-items: start !important;
  gap: clamp(12px, 1.25vw, 22px) !important;
  perspective: none !important;
  transition: grid-template-columns .34s cubic-bezier(.2,.72,.2,1), gap .34s ease !important;
}

body.room-primary-layout .hero-zone .console-column,
body.room-primary-layout.onboarding-active .hero-zone .console-column,
body.room-primary-layout.cassette-viewing-focus .hero-zone .console-column {
  grid-area: main !important;
  width: 100% !important;
  max-width: 1320px !important;
  min-width: 0 !important;
  justify-self: end !important;
  align-self: start !important;
  transform: none !important;
  filter: none !important;
  transition: max-width .34s ease, opacity .22s ease !important;
}

body.room-primary-layout .hero-zone .tv-set,
body.room-primary-layout.onboarding-active .hero-zone .tv-set,
body.room-primary-layout.cassette-viewing-focus .hero-zone .tv-set {
  width: min(100%, 1240px, calc((100dvh - 198px) * 1.46)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body.room-primary-layout .hero-zone .vcr-unit,
body.room-primary-layout.onboarding-active .hero-zone .vcr-unit,
body.room-primary-layout.cassette-viewing-focus .hero-zone .vcr-unit {
  width: min(94%, 1120px) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body.room-primary-layout .hero-zone .instruction-plaque,
body.room-primary-layout.onboarding-active .hero-zone .instruction-plaque,
body.room-primary-layout.cassette-viewing-focus .hero-zone .instruction-plaque {
  width: min(91%, 1030px) !important;
  margin-inline: auto !important;
}

body.room-primary-layout .hero-zone .tape-library,
body.room-primary-layout.onboarding-active .hero-zone .tape-library,
body.room-primary-layout.cassette-viewing-focus .hero-zone .tape-library {
  grid-area: tapes !important;
  width: 100% !important;
  max-width: var(--v25-shelf-width) !important;
  max-height: calc(100dvh - 84px);
  justify-self: end !important;
  align-self: start !important;
  margin: 0 !important;
  overflow-y: auto;
  overflow-x: visible;
  transform: none !important;
  filter: brightness(1.01) saturate(.99) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(211,174,91,.45) rgba(0,0,0,.25);
  transition: max-width .34s ease, filter .24s ease, box-shadow .24s ease !important;
}

/* View 2: cassette selection. The outer hero does not move, so the fixed
   hover zone cannot create an enter/leave feedback loop. */
body.room-primary-layout.cassette-focus .hero-zone,
body.room-primary-layout.onboarding-active.cassette-focus .hero-zone {
  --v25-shelf-width: clamp(390px, 27vw, 470px);
  grid-template-columns: minmax(0, .86fr) var(--v25-shelf-width) !important;
  gap: clamp(10px, 1vw, 17px) !important;
}

body.room-primary-layout.cassette-focus .hero-zone .console-column,
body.room-primary-layout.onboarding-active.cassette-focus .hero-zone .console-column {
  max-width: 1030px !important;
  transform: none !important;
  filter: brightness(.91) saturate(.9) !important;
}

body.room-primary-layout.cassette-focus .hero-zone .tv-set,
body.room-primary-layout.onboarding-active.cassette-focus .hero-zone .tv-set {
  width: min(100%, 990px, calc((100dvh - 205px) * 1.38)) !important;
}

body.room-primary-layout.cassette-focus .hero-zone .tape-library,
body.room-primary-layout.onboarding-active.cassette-focus .hero-zone .tape-library {
  max-width: var(--v25-shelf-width) !important;
  filter: brightness(1.08) saturate(1.04) !important;
  box-shadow:
    inset 0 0 0 2px rgba(126,37,28,.28),
    0 27px 42px rgba(0,0,0,.58),
    0 0 26px rgba(190,58,44,.13) !important;
}

/* Loaded/playing is the TV-focused composition—not a third layout. */
body.room-primary-layout.tv-active-layout .hero-zone,
body.room-primary-layout.cassette-viewing-focus .hero-zone {
  --v25-shelf-width: clamp(300px, 20.5vw, 350px);
  grid-template-columns: minmax(0, 1fr) var(--v25-shelf-width) !important;
}
body.room-primary-layout.tv-active-layout .hero-zone .console-column,
body.room-primary-layout.cassette-viewing-focus .hero-zone .console-column {
  max-width: 1340px !important;
}
body.room-primary-layout.tv-active-layout .hero-zone .tv-set,
body.room-primary-layout.cassette-viewing-focus .hero-zone .tv-set {
  width: min(100%, 1280px, calc((100dvh - 190px) * 1.48)) !important;
}

/* Chat always lives beneath the TV/shelf composition after the first guide. */
body.room-primary-layout:not(.onboarding-active) .studio-chatroom,
body.room-primary-layout.cassette-viewing-focus:not(.onboarding-active) .studio-chatroom {
  grid-area: chat !important;
  display: grid !important;
  width: min(760px, 100%) !important;
  min-height: 470px !important;
  height: 520px !important;
  margin: 28px auto 0 !important;
  justify-self: center !important;
}
body.room-primary-layout.onboarding-active .studio-chatroom { display: none !important; }
body.room-primary-layout .background-zone { margin-top: clamp(50px, 6vw, 88px) !important; }

/* ---------- Smaller directional guide (no oversized red tab) ---------- */
.guided-instruction,
body.onboarding-active .guided-instruction {
  position: absolute;
  z-index: 140;
  left: var(--guide-left, 0px);
  top: var(--guide-top, 0px);
  width: min(330px, 24vw);
  padding: 9px 12px 10px 15px;
  border: 1px solid rgba(224,80,66,.52);
  border-left: 6px solid var(--v25-red);
  border-radius: 4px;
  clip-path: none;
  background:
    linear-gradient(90deg, rgba(217,74,61,.13), transparent 62%),
    rgba(10,8,6,.93);
  color: var(--v25-cream);
  box-shadow: 0 9px 22px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.035);
  transform: none !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, left .3s ease, top .3s ease !important;
}
body.onboarding-active .guided-instruction { opacity: 1; }
.guided-instruction::after {
  content: "➜";
  position: absolute;
  right: -21px;
  top: 50%;
  color: var(--v25-red);
  font: 900 28px/1 Arial, sans-serif;
  transform: translateY(-50%);
  text-shadow: 0 3px 4px rgba(0,0,0,.6);
}
.guided-instruction > span { margin: 0 0 3px; color: #d68579; font: 900 7px/1 var(--mono); letter-spacing: .2em; }
.guided-instruction > strong { color: #fff0ca; font: 1000 clamp(19px, 1.7vw, 29px)/1 var(--ui); letter-spacing: .025em; text-shadow: none; }
.guided-instruction > small { margin-top: 5px; color: rgba(241,222,182,.75); font: 700 7px/1.35 var(--mono); letter-spacing: .045em; }
.guided-arrow-layer path { stroke: #ec5648 !important; stroke-width: 6 !important; }
.guided-arrow-layer .arrow-head { fill: #ec5648 !important; }
.guided-mobile-arrow { color: #ec5648 !important; }

/* ---------- Larger, clearer cassette labels ---------- */
.tape-stack { gap: 14px !important; padding: 12px 5px 15px !important; }
.tape-stack .vhs-tape {
  height: 69px !important;
  overflow: visible !important;
}
.tape-stack .vhs-tape .tape-meta {
  margin: 7px 0 12px !important;
  padding: 5px 14px !important;
}
.tape-stack .vhs-tape .tape-title {
  font-size: clamp(10.6px, .83vw, 13px) !important;
  line-height: 1.02 !important;
  letter-spacing: .045em !important;
  text-overflow: clip !important;
}
.tape-stack .vhs-tape .tape-code {
  font-size: 6.5px !important;
  letter-spacing: .14em !important;
}
.tape-stack .vhs-tape[data-game="golden-keep-sidescroller"] .tape-title,
.tape-stack .vhs-tape[data-game="dark-between-stations"] .tape-title,
.tape-stack .vhs-tape[data-game="prototype-os"] .tape-title,
.tape-stack .vhs-tape[data-game="tools-for-devs"] .tape-title {
  font-size: 10px !important;
  letter-spacing: .025em !important;
}
.tape-stack .vhs-tape .tape-index,
.tape-stack .vhs-tape .tape-format { font-size: 9.4px !important; }

/* Red rental-store tags are now readable at normal desktop distance. */
.tape-demo-sticker {
  z-index: 40 !important;
  top: -8px !important;
  left: 17px !important;
  min-width: 78px !important;
  padding: 5px 7px 4px !important;
  border: 2px solid #5d100c !important;
  box-shadow: 0 4px 7px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,224,180,.16) !important;
  transform: rotate(-2deg) !important;
}
.tape-demo-sticker strong { font-size: 7.7px !important; letter-spacing: .075em !important; }
.tape-demo-sticker small { margin-top: 3px !important; padding: 2px 4px !important; font-size: 5.7px !important; }

/* ---------- Physical main-TV controls ---------- */
.tv-face { grid-template-columns: minmax(0,1fr) clamp(122px, 11.2vw, 154px) !important; }
.tv-control-panel { padding: 12px 8px 10px !important; }
.tv-maker { margin-bottom: 9px !important; }
.tv-knob,
.channel-knob { width: clamp(46px, 4.1vw, 60px) !important; }

.main-volume-bank {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 100%;
  margin: 17px 0 10px;
  padding: 9px 5px 7px;
  border: 1px solid #050505;
  border-radius: 7px;
  background: linear-gradient(#0a0908,#1b1814 60%,#080706);
  box-shadow: inset 0 2px 7px #000, 0 1px rgba(255,255,255,.04);
}
.main-volume-dial {
  --volume-angle: 64deg;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(70px, 6.4vw, 90px);
  aspect-ratio: 1;
  padding: 0;
  border: 3px solid #050505;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#4d4a43 0 2deg,#171614 2deg 6deg),
    radial-gradient(circle,#393631,#0d0c0b 72%);
  box-shadow: inset 0 0 0 11px #171613, inset 0 0 9px rgba(255,255,255,.04), 0 6px 10px rgba(0,0,0,.72);
  color: #d6c59f;
  cursor: ns-resize;
  touch-action: none;
}
.main-volume-dial i {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 23px;
  border-radius: 4px;
  background: #ead9b5;
  box-shadow: 0 1px 2px #000;
  transform: translateX(-50%) rotate(var(--volume-angle));
  transform-origin: 50% calc(50% + 20px);
  transition: transform .14s ease;
}
.main-volume-dial > span {
  position: absolute;
  left: 50%;
  bottom: -17px;
  transform: translateX(-50%);
  color: #a29275;
  font: 900 7px/1 var(--ui);
  letter-spacing: .12em;
}
.main-volume-dial > small {
  position: relative;
  z-index: 2;
  min-width: 27px;
  padding: 3px 4px;
  border: 1px solid #050705;
  border-radius: 3px;
  background: #031006;
  color: #7fbd79;
  font: 900 9px/1 var(--mono);
  text-shadow: 0 0 5px rgba(126,195,118,.5);
}
.main-volume-dial:hover,
.main-volume-dial:focus-visible { filter: brightness(1.16); outline: 2px solid rgba(232,197,120,.6); outline-offset: 3px; }
.main-volume-trim { display: grid; grid-template-columns: repeat(2, 32px); gap: 5px; margin-top: 11px; }
.main-volume-trim button {
  min-height: 27px;
  border: 1px solid #050505;
  border-radius: 2px;
  background: linear-gradient(#393733,#151412);
  color: #c1b397;
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 2px 2px #000;
  font: 900 14px/1 var(--ui);
}

.main-tv-service-controls {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 5px !important;
}
.main-tv-service-controls button { min-height: 32px !important; font-size: 8px !important; }
.tv-physical-toggle {
  position: relative;
  display: grid !important;
  grid-template-columns: 8px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 1px 5px !important;
  align-items: center !important;
  padding: 5px 4px !important;
}
.tv-physical-toggle i {
  grid-row: 1 / span 2;
  width: 7px;
  height: 16px;
  border: 1px solid #050505;
  border-radius: 4px;
  background: #3a110e;
  box-shadow: inset 0 0 4px #000;
}
.tv-physical-toggle[data-control-state="on"] i,
.tv-physical-toggle[aria-pressed="true"] i { background: #c4462f; box-shadow: 0 0 7px rgba(220,84,49,.65), inset 0 1px rgba(255,255,255,.25); }
.tv-physical-toggle span { font: 900 7px/1 var(--ui); letter-spacing: .06em; }
.tv-physical-toggle small { color: #8e8068; font: 800 6px/1 var(--mono); }
.tv-physical-toggle[aria-pressed="true"] small { color: #e0bd6c; }
.main-volume-readout { margin: 7px 0 0 !important; }

/* ---------- Three-dimensional cassette treatment ---------- */
.held-tape {
  transform-style: preserve-3d !important;
  box-shadow:
    inset 0 2px rgba(255,255,255,.08),
    0 8px 0 #080807,
    0 13px 0 #1a1917,
    0 31px 43px rgba(0,0,0,.72) !important;
}
.held-tape.is-following-pointer {
  transform: translate(-50%,-50%) perspective(760px) rotateX(13deg) rotateY(-8deg) rotateZ(var(--drag-rotation)) scale(.72) !important;
}
.held-tape.is-following-pointer.is-over-drop-target {
  transform: translate(-50%,-50%) perspective(760px) rotateX(18deg) rotateY(-4deg) rotateZ(-2deg) scale(.67) !important;
}
.held-tape.is-parked {
  transform: translate(-50%,-50%) perspective(760px) rotateX(11deg) rotateY(-7deg) rotateZ(-3deg) scale(.7) !important;
}

.ejected-tape {
  box-shadow:
    inset 0 2px rgba(255,255,255,.09),
    0 7px 0 #080807,
    0 11px 0 #1a1917,
    0 24px 30px rgba(0,0,0,.7) !important;
  transform: translate(-50%, 2px) perspective(620px) rotateX(54deg) rotateY(-2deg) scale(.92) !important;
}
.ejected-tape:hover,
.ejected-tape:focus-visible { transform: translate(-50%, 6px) perspective(620px) rotateX(48deg) rotateY(-2deg) scale(.96) !important; }

.loaded-cassette-3d {
  --loaded-accent: #c4ad64;
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 7px;
  width: 82%;
  height: 54px;
  transform: translate(-50%, -37px) perspective(640px) rotateX(68deg);
  transform-origin: center bottom;
  border: 2px solid #030303;
  border-radius: 6px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.06),transparent 18% 80%,rgba(0,0,0,.48)),
    repeating-linear-gradient(0deg,#20201f 0 3px,#111 3px 7px);
  box-shadow: inset 0 2px rgba(255,255,255,.08), 0 7px 0 #080807, 0 13px 18px rgba(0,0,0,.74);
  pointer-events: none;
}
.loaded-cassette-3d[hidden] { display: none !important; }
.loaded-cassette-3d::before {
  content:"";
  position:absolute;
  inset:8px 14px 16px;
  border:1px solid rgba(40,26,11,.5);
  border-radius:3px;
  background:var(--loaded-accent);
  box-shadow:inset 0 0 10px rgba(255,255,255,.18);
}
.loaded-cassette-3d > span {
  position:absolute;
  z-index:3;
  left:38px;
  right:38px;
  top:14px;
  overflow:hidden;
  color:#17120d;
  font:900 8px/1 var(--ui);
  text-align:center;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}
.loaded-cassette-3d > i {
  position:absolute;
  z-index:2;
  top:27px;
  width:17px;
  height:17px;
  border:4px dotted #d2cbb9;
  border-radius:50%;
  background:#0b0b0b;
}
.loaded-cassette-3d > i:first-of-type { left:24px; }
.loaded-cassette-3d > i:last-of-type { right:24px; }
.loaded-cassette-3d > b { position:absolute;z-index:1;left:50%;top:32px;width:35%;height:8px;transform:translateX(-50%);background:#060606; }
.loaded-cassette-3d[data-transport="playing"] { transform: translate(-50%,-43px) perspective(640px) rotateX(73deg) scale(.96); }

/* ---------- Polished top of every standard game cassette page ---------- */
.game-program { padding: clamp(13px, 2.5cqw, 24px) !important; }
.program-intro-card {
  position: relative;
  margin-bottom: clamp(14px, 2.2cqw, 22px);
  padding: clamp(13px, 2.2cqw, 21px);
  border: 1px solid color-mix(in srgb, var(--program-accent) 48%, rgba(197,224,176,.24));
  border-radius: 5px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--program-accent) 10%, transparent), transparent 44%),
    linear-gradient(180deg,rgba(20,31,20,.93),rgba(5,9,6,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.045), inset 0 0 24px rgba(0,0,0,.36), 0 8px 16px rgba(0,0,0,.18);
}
.program-intro-card::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  border-radius:4px 0 0 4px;
  background:var(--program-accent);
  opacity:.8;
}
.program-intro-card .program-topline { margin-bottom: 13px !important; }
.program-intro-grid {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(250px,.78fr);
  gap:clamp(13px,2cqw,24px);
  align-items:start;
}
.program-intro-card .program-heading { margin:0 !important; min-width:0; }
.program-intro-card .program-kicker { font-size:clamp(9px,1.45cqw,13px) !important; }
.program-intro-card .program-title { margin-top:4px !important; color:#fff5d8 !important; line-height:.94 !important; }
.program-intro-card .program-tagline { margin-top:9px !important; color:#c9d7ba !important; font-size:clamp(11px,1.85cqw,16px) !important; }
.program-status-badge {
  display:inline-flex;
  margin-top:13px;
  padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--program-accent) 56%,rgba(214,231,196,.18));
  border-radius:999px;
  background:rgba(0,0,0,.26);
  color:#d9e5c9;
  font:800 clamp(7px,1.15cqw,10px)/1 var(--mono);
  letter-spacing:.075em;
  text-transform:uppercase;
}
.program-demo-mount { min-width:0; }
.program-demo-mount .demo-download-section { margin:0 !important; padding:11px !important; }
.program-demo-mount .demo-state-strip { margin-bottom:8px !important; }
.program-demo-mount .demo-download-heading h3 { font-size:clamp(17px,2.7cqw,25px) !important; }
.program-demo-mount .demo-download-status { margin:7px 0 !important; }
.program-demo-mount .demo-build-contents { margin-top:9px !important; }
.program-hero { cursor:default !important; }
.program-caption { position:static !important; display:block; margin:0; padding:6px 8px !important; border-top:1px solid rgba(203,231,181,.24); background:#050805 !important; }

/* TV scrolling naturally hands off to the browser at either boundary. */
.screen-content {
  overscroll-behavior-y: auto !important;
  scroll-behavior: smooth;
}

/* ---------- Welcome film ---------- */
body.intro-film-playing .screen-content { overscroll-behavior: contain !important; }
.kadabra-intro-film video,
.kadabra-intro-film .intro-film-poster { object-fit:cover !important; }
.intro-film-controls button[data-intro-sound][aria-pressed="true"] {
  background:#7a241c !important;
  color:#fff1c7 !important;
  box-shadow:0 0 12px rgba(202,74,50,.24);
}

@media (max-width: 1180px) and (min-width: 871px) {
  :root { --v25-shelf-width: clamp(285px, 28vw, 335px); }
  body.room-primary-layout .hero-zone,
  body.room-primary-layout.onboarding-active .hero-zone,
  body.room-primary-layout.cassette-viewing-focus .hero-zone {
    grid-template-columns:minmax(0,1fr) var(--v25-shelf-width) !important;
  }
  body.room-primary-layout.cassette-focus .hero-zone { --v25-shelf-width: clamp(345px,34vw,400px); }
  .tv-face { grid-template-columns:minmax(0,1fr) 118px !important; }
  .main-volume-dial { width:70px; }
  .program-intro-grid { grid-template-columns:1fr; }
}

@media (max-width: 870px) {
  body.room-primary-layout .room-layout-v4 { padding-top: 82px !important; }
  body.room-primary-layout .hero-zone,
  body.room-primary-layout.onboarding-active .hero-zone,
  body.room-primary-layout.cassette-focus .hero-zone,
  body.room-primary-layout.cassette-viewing-focus .hero-zone {
    width:min(100% - 8px,720px) !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:"main" "tapes" "chat" !important;
    gap:14px !important;
  }
  body.room-primary-layout .hero-zone .console-column,
  body.room-primary-layout .hero-zone .tape-library,
  body.room-primary-layout.cassette-focus .hero-zone .console-column,
  body.room-primary-layout.cassette-focus .hero-zone .tape-library {
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
    filter:none !important;
  }
  body.room-primary-layout .hero-zone .tv-set,
  body.room-primary-layout.cassette-focus .hero-zone .tv-set,
  body.room-primary-layout.tv-active-layout .hero-zone .tv-set { width:100% !important; }
  body.room-primary-layout .hero-zone .tape-library { max-height:none; overflow:visible; }
  body.room-primary-layout:not(.onboarding-active) .studio-chatroom { width:100% !important; height:560px !important; margin-top:4px !important; }

  .guided-instruction,
  body.onboarding-active .guided-instruction {
    position:fixed !important;
    z-index:3900;
    left:10px !important;
    right:10px !important;
    top:auto !important;
    bottom:max(10px, env(safe-area-inset-bottom)) !important;
    width:auto !important;
    padding:9px 42px 9px 13px;
    transform:none !important;
  }
  .guided-instruction::after { right:10px; }
  .guided-instruction > strong { font-size:21px; }
  .guided-instruction > small { font-size:7px; }
  .guided-arrow-layer { display:none !important; }
  .guided-mobile-arrow { display:none !important; }

  .tv-face { grid-template-columns:minmax(0,1fr) 104px !important; gap:7px !important; }
  .tv-control-panel { padding:8px 5px !important; }
  .main-volume-dial { width:64px; }
  .main-volume-bank { padding:7px 3px 6px; }
  .main-tv-service-controls button { min-height:38px !important; }
  .tape-stack .vhs-tape .tape-title { font-size:11px !important; }
  .tape-demo-sticker { min-width:72px !important; }
  .program-intro-grid { grid-template-columns:1fr; }
  .program-intro-card .program-title { font-size:clamp(27px,8.5cqw,48px) !important; }
}

@media (max-width: 560px) {
  .tv-face { grid-template-columns:minmax(0,1fr) 88px !important; }
  .main-volume-dial { width:56px; }
  .main-volume-dial > span { font-size:6px; }
  .main-volume-trim { grid-template-columns:repeat(2,27px); }
  .main-tv-service-controls { grid-template-columns:1fr !important; }
  .tv-physical-toggle { grid-template-columns:7px 1fr !important; }
  .tape-stack .vhs-tape { height:67px !important; }
  .tape-stack .vhs-tape .tape-title { font-size:10.3px !important; }
  .tape-stack .vhs-tape[data-game="golden-keep-sidescroller"] .tape-title,
  .tape-stack .vhs-tape[data-game="dark-between-stations"] .tape-title,
  .tape-stack .vhs-tape[data-game="prototype-os"] .tape-title { font-size:9.2px !important; }
  .tape-demo-sticker { top:-7px !important; left:12px !important; }
  .program-intro-card { padding:12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.room-primary-layout .hero-zone,
  body.room-primary-layout .hero-zone .console-column,
  body.room-primary-layout .hero-zone .tape-library,
  .guided-instruction,
  .main-volume-dial i { transition:none !important; }
}

/* ---------- Final PDF review refinements ---------- */
/* Keep the loaded TV/VCR/PLAY composition inside a desktop viewport. */
body.room-primary-layout.tv-active-layout .hero-zone .tv-set,
body.room-primary-layout.cassette-viewing-focus .hero-zone .tv-set {
  width: min(100%, 1240px, calc((100dvh - 238px) * 1.48)) !important;
}

/* Replace the old red card appearance with a compact directional caption. */
.guided-instruction,
body.onboarding-active .guided-instruction {
  width: min(292px, 21vw) !important;
  min-width: 218px;
  padding: 7px 12px 8px 13px !important;
  border: 0 !important;
  border-bottom: 2px solid #db5145 !important;
  border-left: 0 !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, rgba(8,7,5,.96), rgba(8,7,5,.78) 72%, rgba(8,7,5,.18)) !important;
  box-shadow: 0 7px 15px rgba(0,0,0,.4) !important;
}
.guided-instruction::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 42%;
  height: 2px;
  background: #ff6858;
  box-shadow: 0 0 8px rgba(237,78,65,.35);
}
.guided-instruction::after {
  content: "" !important;
  right: -9px !important;
  top: auto !important;
  bottom: -7px !important;
  width: 12px;
  height: 12px;
  border-top: 3px solid #ef5a4c;
  border-right: 3px solid #ef5a4c;
  transform: rotate(45deg) !important;
  text-shadow: none !important;
}
.guided-instruction > span {
  display: inline-block;
  margin: 0 8px 0 0 !important;
  color: #d66b60 !important;
  font-size: 6.5px !important;
  vertical-align: middle;
}
.guided-instruction > strong {
  display: inline;
  color: #fff0ca !important;
  font-size: clamp(17px, 1.42vw, 24px) !important;
  line-height: 1.05 !important;
  vertical-align: middle;
}
.guided-instruction > small {
  display: block;
  max-width: 245px;
  margin-top: 4px !important;
  font-size: 6.4px !important;
  line-height: 1.3 !important;
}
.guided-arrow-layer path {
  stroke: #ef5a4c !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .94;
}
.guided-arrow-layer .arrow-head { fill: #ef5a4c !important; }

/* Demo stickers should remain readable at the normal room distance. */
.tape-demo-sticker {
  min-width: 88px !important;
  padding: 6px 8px 5px !important;
}
.tape-demo-sticker strong { font-size: 8.4px !important; }
.tape-demo-sticker small { font-size: 6.2px !important; }

/* A loaded tape should visibly remain a VHS cassette, not an edge-on colored board. */
.loaded-cassette-3d {
  top: 5px !important;
  width: min(76%, 640px) !important;
  height: 70px !important;
  transform: translate(-50%, -49px) perspective(720px) rotateX(47deg) rotateY(-1deg) rotateZ(-.35deg) !important;
  transform-style: preserve-3d;
  box-shadow:
    inset 0 2px rgba(255,255,255,.1),
    0 9px 0 #090908,
    0 14px 0 #1d1c1a,
    0 25px 25px rgba(0,0,0,.72) !important;
}
.loaded-cassette-3d::before { inset: 9px 15px 19px !important; }
.loaded-cassette-3d::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -10px;
  height: 10px;
  border: 1px solid #030303;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg,#292824,#090909 78%);
  transform: translateZ(-1px);
  box-shadow: 0 6px 9px rgba(0,0,0,.55);
}
.loaded-cassette-3d > span { top: 17px !important; font-size: 9px !important; }
.loaded-cassette-3d > i { top: 35px !important; width: 19px !important; height: 19px !important; }
.loaded-cassette-3d > b { top: 41px !important; }
.loaded-cassette-3d[data-transport="playing"] {
  transform: translate(-50%, -53px) perspective(720px) rotateX(51deg) rotateY(-1deg) scale(.97) !important;
}

/* Give the moving cassette a deep edge throughout its loading animation. */
.held-tape { isolation: isolate; }
.held-tape::after { box-shadow: 0 7px 0 #080807, 0 12px 16px rgba(0,0,0,.48) !important; }

@media (max-width:870px) {
  .guided-instruction,
  body.onboarding-active .guided-instruction {
    min-width: 0;
    width: min(310px, calc(100vw - 30px)) !important;
  }
  .loaded-cassette-3d { width: 78% !important; height: 60px !important; transform: translate(-50%,-41px) perspective(620px) rotateX(48deg) !important; }
}

/* Mobile physical controls retain a full finger-sized hit target. */
@media (max-width:870px), (pointer:coarse) {
  .tv-physical-toggle,
  .main-volume-trim button,
  .tv-button,
  .vcr-button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .guided-instruction,
  body.onboarding-active .guided-instruction {
    position: fixed !important;
    z-index: 2100 !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: 360px;
    margin-inline: auto;
  }
}

/* ---------- Final v25 QA polish ---------- */
/* Keep the cassette program header readable through the CRT treatment. */
body[data-tv-state="on"] .game-program .program-intro-card,
body[data-tv-state="idle"] .game-program .program-intro-card {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--program-accent) 14%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(25,39,26,.98), rgba(7,13,8,.985)) !important;
  border-color: color-mix(in srgb, var(--program-accent) 62%, rgba(220,238,204,.32)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.075),
    inset 0 0 28px rgba(0,0,0,.2),
    0 8px 18px rgba(0,0,0,.22) !important;
}
body[data-tv-state="on"] .game-program .program-intro-card .program-kicker,
body[data-tv-state="on"] .game-program .program-intro-card .program-tagline,
body[data-tv-state="on"] .game-program .program-intro-card .program-status-badge {
  opacity: 1 !important;
}
body[data-tv-state="on"] .game-program .program-intro-card .program-title {
  color: #fff8df !important;
  text-shadow: 0 0 8px rgba(238,244,218,.12) !important;
}
body[data-tv-state="on"] .game-program .program-intro-card .demo-download-section {
  background: rgba(5,10,6,.82) !important;
  border-color: rgba(211,230,194,.24) !important;
}
body[data-tv-state="on"] .game-program .program-hero img {
  filter: saturate(.9) contrast(1.05) brightness(1) !important;
}
body[data-tv-state="on"] .game-program .gallery-thumb img {
  filter: saturate(.82) contrast(1.05) brightness(.9) !important;
}

/* The physical TV switches remain finger-sized on phones. */
@media (pointer: coarse), (hover: none), (max-width: 640px) {
  .tv-physical-toggle,
  .main-volume-trim button,
  .tv-control-panel > button:not(.tv-knob):not(.main-volume-dial) {
    min-height: 44px !important;
  }
  .tv-physical-toggle { min-width: 48px !important; }
  .main-volume-trim { grid-template-columns: repeat(2, 44px) !important; }
  .main-volume-trim button { min-width: 44px !important; }
}