@font-face {
  font-family: 'DOUG';
  src: url('/DOUGTEXT01.otf') format('opentype');
  font-display: swap;
}

:root {
  --black: #0a0908;
  --cream: #f3ece0;
  --gold: #f5c742;
  --stripe-gold: #efc953;
  --stripe-copper: #d59448;
  --stripe-pink: #c34664;
  --stripe-purple: #9d54e1;
  --stripe-blue: #2050f2;
  --rec-red: #d8231d;
  --vhs-green: #5a9e3f;
  --doug: 'DOUG', 'Marker Felt', 'Chalkboard SE', 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--black);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--cream);
}

/* Round 10: sized by inset/100%, never 100vw/100vh -- on a phone 100vh is
   the height with the browser's toolbar hidden, so the canvas ran under the
   toolbar and its picture was squashed against the camera's aspect.
   main.js reads the stage's own box for the drawing buffer and for taps. */
#stage {
  position: fixed;
  inset: 0;
  background: #000;
}

#stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* The canvas owns every touch: no page scroll, pinch-zoom or double-tap
     zoom, no iOS long-press callout -- a drag is looking around. */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* HD (default): the backing buffer is already ~screen resolution, so let
     the browser's normal smooth scaling handle the rest. Retro mode (a body
     class, toggled live -- see main.js) switches this to a hard nearest-
     neighbor upscale of the deliberately tiny low-res buffer. */
}
body.retro-mode #stage canvas {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.doug {
  font-family: var(--doug);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.hidden { display: none !important; }

/* crosshair */
#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(243, 236, 224, 0.85);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}
/* round 9 (founder call): a distinct reticle while the remote is in hand --
   a ring + centre dot reads as "you're pointing something" rather than the
   plain pickup dot. .remote-aiming (driven by updateRemoteAim() every frame
   off the TV/coffee-table raycast) brightens it gold when the aim is live,
   so the reticle itself previews whether the current look will do anything. */
#crosshair.remote-crosshair {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(243, 236, 224, 0.55);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.55);
  transition: border-color 0.12s ease, transform 0.12s ease;
}
#crosshair.remote-crosshair::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: rgba(243, 236, 224, 0.85);
}
#crosshair.remote-crosshair.remote-aiming {
  border-color: var(--gold);
  transform: scale(1.12);
}
#crosshair.remote-crosshair.remote-aiming::after {
  background: var(--gold);
}

#hoverLabel {
  position: absolute;
  left: 50%;
  top: calc(50% + 20px);
  transform: translateX(-50%);
  background: rgba(10, 9, 8, 0.82);
  border: 1px solid rgba(245, 199, 66, 0.5);
  color: var(--cream);
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  text-align: center;
  line-height: 1.4;
}
#hoverLabel .hint {
  display: block;
  font-size: 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* corner controls */
.corner-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  pointer-events: auto;
  background: rgba(10, 9, 8, 0.72);
  border: 1px solid rgba(243, 236, 224, 0.35);
  color: var(--cream);
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 9px 14px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 20;
}
.corner-btn:hover { border-color: var(--gold); color: var(--gold); }

#lockHint {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(10, 9, 8, 0.6);
  color: var(--cream);
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 5px;
  letter-spacing: 0.03em;
}

/* den-only: which film is running on the 3D TV, visible from anywhere in
   the room (the player can walk away from the couch mid-watch) -- sits just
   under #lockHint's corner so the two never overlap. */
/* den-only: the tape in your hand (round 7), same slot as #nowPlayingLine --
   the two never show together: a tape is either in the deck or in the hand. */
#holdingLine {
  position: absolute;
  top: 54px;
  left: 16px;
  background: rgba(10, 9, 8, 0.55);
  color: var(--cream);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 5px;
  letter-spacing: 0.03em;
}
/* round 9 (founder call): the remote's old top-left key list (#remoteLine)
   is retired -- the controls now live where you're looking. #remoteHint is
   the one-word idle nudge ("Point at the TV") and the "Put it down · Q" cue
   over the coffee table, same slot, whichever applies; #remoteHud is the
   compact transport panel, shown only while the reticle is on the set. Both
   sit just under the crosshair, the same spot #hoverLabel uses -- they never
   compete for the screen because a tape's hover ray and the TV/table ray
   can't land on the same frame (the sets are nowhere near the shelves). */
#remoteHint {
  position: absolute;
  left: 50%;
  top: calc(50% + 24px);
  transform: translateX(-50%);
  background: rgba(10, 9, 8, 0.7);
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
}
#remoteHud {
  position: absolute;
  left: 50%;
  top: calc(50% + 24px);
  transform: translateX(-50%);
  background: rgba(10, 9, 8, 0.85);
  border: 1px solid rgba(245, 199, 66, 0.4);
  color: var(--cream);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-align: left;
  min-width: 172px;
}
.remote-hud-row {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.remote-hud-row + .remote-hud-row { margin-top: 4px; }
.remote-hud-key {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  background: rgba(243, 236, 224, 0.12);
  border: 1px solid rgba(243, 236, 224, 0.3);
  color: var(--gold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
}
.remote-hud-key.is-active {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.remote-hud-desc {
  flex: 1;
  color: rgba(243, 236, 224, 0.85);
}
.remote-hud-volbar {
  font-family: monospace;
  letter-spacing: 1px;
  color: var(--gold);
  font-size: 11px;
}
#nowPlayingLine {
  position: absolute;
  top: 54px;
  left: 16px;
  background: rgba(10, 9, 8, 0.55);
  color: var(--gold);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 5px;
  letter-spacing: 0.03em;
}

/* den-only: the couch's "Sit Down" / "Stand Up" prompt, bottom-center like a
   subtitle -- styled like #lockHint rather than #hoverLabel, since it isn't
   tied to the crosshair the way a tape's hover label is. #actionPrompt is the
   VCR's twin of this (Insert tape / Eject / Put it back while carrying) --
   same slot, same look, never shown at the same time (the couch and the VCR
   sit far enough apart in the den that their reach radii can't overlap). */
#seatPrompt,
#actionPrompt {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  background: rgba(10, 9, 8, 0.6);
  color: var(--cream);
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 5px;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
}
#seatPrompt .hint,
#actionPrompt .hint {
  display: block;
  font-size: 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

#loadingLine {
  position: absolute;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.05em;
  text-align: center;
}
#loadingLine a {
  color: var(--cream);
  text-decoration: underline;
  margin-left: 6px;
  pointer-events: auto;
}
#loadingLine a:hover { color: var(--gold); }
/* Cabinet-unavailable only (main.js): the demo "loading the den..." text
   stays bottom-center above, unmoved. That slot is also #seatPrompt's /
   #actionPrompt's ("Sit Down / E / CLICK", bottom: 64px below), so a
   Cabinet-mode message parked there overlapped and was unreadable the
   moment either prompt was showing -- moved to the same free top-center
   slot #cabinetNote uses. */
#loadingLine.cabinet-top {
  top: 18px;
  bottom: auto;
}

/* Cabinet-mode HUD note (empty cabinet / hidden-shelf count / overflow
   count). Top-center, not bottom-center: bottom-center is #seatPrompt's /
   #actionPrompt's slot (bottom: 64px below) and the two collided there.
   Clear of #lockHint/.corner-btn (top-left, 16px) and #nowPlayingLine/
   #holdingLine (top-left, 54px) -- nothing else uses top-center. */
#cabinetNote {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--cream);
  letter-spacing: 0.03em;
  text-align: center;
  background: rgba(10, 9, 8, 0.55);
  padding: 6px 12px;
  border-radius: 5px;
}

/* overlays */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 8, 0.72);
  pointer-events: auto;
  z-index: 30;
}

.overlay-inner {
  max-width: 420px;
  text-align: center;
  padding: 40px 36px;
  background: linear-gradient(180deg, rgba(20, 17, 14, 0.92), rgba(10, 9, 8, 0.96));
  border: 1px solid rgba(245, 199, 66, 0.3);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.overlay-inner h2.doug {
  font-size: 28px;
  color: var(--cream);
  margin-bottom: 18px;
}

.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: 0.02em;
  display: inline-block;
  margin: 4px;
}
.btn-primary {
  background: var(--gold);
  color: var(--black);
}
.btn-primary:hover { background: #ffd75c; }
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(243, 236, 224, 0.4);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-small { font-size: 12px; padding: 8px 14px; }

/* inspect card */
#inspectCard {
  position: absolute;
  top: 50%;
  right: 6%;
  transform: translateY(-50%);
  width: 300px;
  pointer-events: auto;
  z-index: 25;
}
.card-inner {
  background: linear-gradient(180deg, #faf5ea, var(--cream));
  color: var(--black);
  border-radius: 8px;
  padding: 24px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(245, 199, 66, 0.25);
  border-top: 5px solid var(--gold);
}
#cardTitle {
  font-size: 22px;
  margin-bottom: 10px;
  line-height: 1.15;
}
.card-row {
  font-size: 12px;
  color: rgba(10, 9, 8, 0.65);
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.card-meta { font-weight: 600; color: rgba(10, 9, 8, 0.8); }
.card-meta .dot { opacity: 0.4; }

.contributors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 10px;
}
.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 9, 8, 0.06);
  border-radius: 20px;
  padding: 3px 10px 3px 3px;
  font-size: 11px;
}
.chip-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  flex: none;
}

.tagline {
  font-size: 13px;
  font-style: italic;
  color: rgba(10, 9, 8, 0.7);
  margin: 8px 0 18px;
  line-height: 1.4;
}

.card-actions { display: flex; flex-direction: column; gap: 8px; }
.card-actions .btn { margin: 0; width: 100%; }
/* .btn-ghost is tuned for cream text over the dark overlays; on the cream
   card it would be nearly invisible, so restyle it dark-on-transparent here. */
.card-actions .btn-ghost {
  color: var(--black);
  border-color: rgba(10, 9, 8, 0.35);
}
.card-actions .btn-ghost:hover {
  border-color: rgba(10, 9, 8, 0.7);
  background: rgba(10, 9, 8, 0.06);
}

/* watch modal -- a cream/faux-wood plastic vintage TV, like the site's own
   vintage-TV player chrome */
#watchModal { background: rgba(10, 9, 8, 0.92); z-index: 40; }
.tv-bezel {
  width: min(860px, 88vw);
  background: linear-gradient(180deg, #e9dfc7, #cdb98d 60%, #b89f70);
  border-radius: 20px;
  padding: 20px 20px 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.35), inset 0 -3px 10px rgba(70, 50, 20, 0.25);
}
.tv-bezel-top {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.tv-screen {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 26px / 20px;
  overflow: hidden;
  box-shadow:
    inset 0 0 50px rgba(0, 0, 0, 0.85),
    inset 0 0 0 3px #0a0908,
    inset 0 0 18px 6px rgba(0, 0, 0, 0.6);
}
.tv-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* subtle CRT curvature vignette on top of the picture */
.tv-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
}

.tv-side-panel {
  flex: 0 0 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 12px;
  background: linear-gradient(180deg, #f1e8d2, #d8c69a);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 2px 6px rgba(70, 50, 20, 0.18);
}
.tv-wordmark {
  font-family: var(--doug);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #5a4a30;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.tv-grille {
  flex: 1;
  width: 34px;
  margin: 10px 0;
  border-radius: 4px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(70, 50, 20, 0.35) 0px,
    rgba(70, 50, 20, 0.35) 2px,
    transparent 2px,
    transparent 6px
  );
  box-shadow: inset 0 0 0 1px rgba(70, 50, 20, 0.15);
}
.tv-knobs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tv-knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e8, #b89f70 70%, #8a7350);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(90, 74, 48, 0.4);
  position: relative;
}
.tv-knob::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  width: 2px;
  height: 6px;
  background: #5a4a30;
  transform: translateX(-50%);
  border-radius: 1px;
}
.osd {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 15px;
  color: #d7ffcf;
  text-shadow: 0 0 6px rgba(120, 255, 140, 0.7), 0 1px 1px rgba(0,0,0,0.8);
  letter-spacing: 0.04em;
  pointer-events: none;
}
.osd-play { top: 12px; left: 14px; }
.osd-counter { bottom: 12px; right: 16px; }
.scanline-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.14) 0px,
    rgba(0, 0, 0, 0.14) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.tv-plate {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
#watchTitle {
  font-family: var(--doug);
  text-transform: uppercase;
  font-size: 16px;
  color: #4a3a22;
  letter-spacing: 0.03em;
}
/* the bezel is now cream/faux-wood, not the dark overlay .btn-ghost expects */
.tv-plate .btn-ghost {
  color: #4a3a22;
  border-color: rgba(74, 58, 34, 0.4);
}
.tv-plate .btn-ghost:hover {
  border-color: #4a3a22;
  background: rgba(74, 58, 34, 0.08);
}

@media (max-width: 640px) {
  #inspectCard { right: 4%; width: min(280px, 82vw); }
  .tv-bezel { padding: 14px 14px 10px; border-radius: 12px; }
  .tv-side-panel { display: none; }
}

/* ---------------------------------------------------------------------------
   The one desktop hint, and the phone HUD (round 10, rebuilt in round 11 on
   standard mobile patterns: a compact top bar, one bottom bar laid out as a
   grid -- tape carousel, one primary + one secondary action, station dock --
   44 px+ touch targets, safe-area aware). The room is still the interface;
   these make every screen answer "what do I do now?" at a glance.
   --------------------------------------------------------------------------- */

:root {
  --safe-top: max(12px, env(safe-area-inset-top));
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  --safe-left: max(12px, env(safe-area-inset-left));
  --safe-right: max(12px, env(safe-area-inset-right));
  --dock-h: 54px;
  --action-h: 50px;
  --card-w: 138px;
  --card-h: 86px;
  --panel: rgba(18, 16, 14, 0.78);
  --panel-line: rgba(243, 236, 224, 0.14);
}

/* "Click to look around" (mouse, before the first click) sits where the
   reticle will appear. Phones get no hint: their action row always offers
   the next step. */
#roomHint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 9, 8, 0.62);
  color: var(--cream);
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  animation: roomHintIn 0.6s ease 0.3s both;
}
@keyframes roomHintIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Top bar (touch): a compact back button and one status pill, one row */
body.touch-mode .corner-btn {
  top: var(--safe-top);
  left: var(--safe-left);
  height: 40px;
  padding: 0 14px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 20px;
  background: var(--panel);
  border-color: var(--panel-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.touch-mode .corner-btn::before {
  content: '';
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin: 0 4px 0 4px;
}
body.touch-mode #nowPlayingLine,
body.touch-mode #holdingLine {
  top: var(--safe-top);
  left: calc(var(--safe-left) + 104px);
  right: var(--safe-right);
  width: max-content;
  max-width: calc(100vw - 104px - var(--safe-left) - var(--safe-right));
  height: 40px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.touch-mode #cabinetNote {
  top: calc(var(--safe-top) + 50px);
  left: var(--safe-left);
  right: var(--safe-right);
  transform: none;
  white-space: normal;
  text-align: left;
  width: max-content;
  max-width: calc(100vw - var(--safe-left) - var(--safe-right));
}

/* Full screen's way out: top-right, where every full-screen viewer puts it. */
#screenDone {
  position: absolute;
  top: var(--safe-top);
  right: var(--safe-right);
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--cream);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  touch-action: manipulation;
}

/* Full screen (a film filling the phone): the picture and Done, nothing
   else -- the remote's pad stays if it's in hand. */
body.room-fullscreen #exitBtn,
body.room-fullscreen #nowPlayingLine,
body.room-fullscreen #holdingLine,
body.room-fullscreen #cabinetNote,
body.room-fullscreen #stationDock {
  display: none !important;
}
body.room-fullscreen #actionRow { min-height: 0; }

/* ---- The bottom bar: one grid, so its rows can never overlap */
#touchBar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'shelf' 'actions' 'dock';
  justify-items: center;
  row-gap: 10px;
  pointer-events: none;
}

/* The tape carousel: readable cards, scrolls sideways, snaps. */
#tapeShelf {
  grid-area: shelf;
  justify-self: stretch;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  pointer-events: auto;
}
#tapeShelf::-webkit-scrollbar { display: none; }
.tape-card {
  position: relative;
  flex: none;
  width: var(--card-w);
  height: var(--card-h);
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tape-color, #333);
  color: #fff;
  text-align: left;
  font: inherit;
  scroll-snap-align: start;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  touch-action: pan-x;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tape-card img,
.tape-card canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the tape's own label colour, as a stripe down the card's edge */
.tape-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--tape-color, #888);
  z-index: 2;
}
.tape-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.82) 100%);
  z-index: 1;
}
.tape-card-text {
  position: absolute;
  left: 12px;
  right: 8px;
  bottom: 7px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tape-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.tape-card-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tape-card.is-selected {
  box-shadow: 0 0 0 2.5px var(--gold), 0 8px 22px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}
.tape-card:active { transform: scale(0.97); }

/* The action row: one gold primary, one quiet secondary, or the remote. */
#actionRow {
  grid-area: actions;
  min-height: var(--action-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
}
.action-btn {
  height: var(--action-h);
  padding: 0 22px;
  border-radius: 25px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s ease, background 0.15s ease;
}
.action-primary {
  border: 0;
  background: var(--gold);
  color: var(--black);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  min-width: 150px;
}
.action-primary[data-action="play"]::before {
  content: '';
  display: inline-block;
  margin-right: 9px;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  vertical-align: -1px;
}
.action-secondary {
  border: 1px solid rgba(243, 236, 224, 0.32);
  background: var(--panel);
  color: var(--cream);
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.action-btn:active { transform: scale(0.97); }

#remotePad {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: rgba(24, 22, 20, 0.9);
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
#remotePad button {
  min-width: 46px;
  height: calc(var(--action-h) - 10px);
  padding: 0 8px;
  border: 1px solid rgba(243, 236, 224, 0.2);
  border-radius: 11px;
  background: rgba(243, 236, 224, 0.08);
  color: var(--cream);
  font-family: 'Courier New', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#remotePad button:active,
#remotePad button.is-active {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
#remotePad button:disabled { opacity: 0.35; }
#remotePad .remote-pad-down {
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  color: rgba(243, 236, 224, 0.7);
}

/* The station dock: three places, one row. */
#stationDock {
  grid-area: dock;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.station-btn {
  position: relative;
  min-width: 78px;
  height: var(--dock-h);
  padding: 6px 10px 5px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(243, 236, 224, 0.78);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.station-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.station-btn:active { background: rgba(243, 236, 224, 0.12); }
.station-btn.is-here {
  background: rgba(243, 236, 224, 0.14);
  color: var(--cream);
  border-color: rgba(243, 236, 224, 0.22);
}
/* where the sequence wants you next: a quiet gold glow, nothing louder */
.station-btn.is-next {
  color: var(--gold);
}
.station-btn.is-next::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  border: 1px solid rgba(245, 199, 66, 0.7);
  animation: stationNext 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stationNext {
  0%, 100% { opacity: 0.25; box-shadow: 0 0 0 0 rgba(245, 199, 66, 0); }
  50% { opacity: 1; box-shadow: 0 0 14px 1px rgba(245, 199, 66, 0.35); }
}
.station-btn.is-blocked { opacity: 0.4; }
.station-btn.is-nudge { animation: stationNudge 0.45s ease 2; }
@keyframes stationNudge {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .station-btn.is-next::after { animation: none; opacity: 1; }
  .station-btn.is-nudge { animation: none; }
  #roomHint { animation: none; }
  .tape-card, .action-btn { transition: none; }
}

/* A phone on its side: width to spare, no height. The carousel keeps the
   full width on top; the dock and the actions share the bottom row, so the
   whole bar is two rows, not three. */
@media (orientation: landscape) and (max-height: 540px) {
  :root {
    --card-w: 124px;
    --card-h: 70px;
    --dock-h: 48px;
    --action-h: 46px;
  }
  #touchBar {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'shelf shelf' 'dock actions';
    row-gap: 8px;
    column-gap: 16px;
    align-items: center;
  }
  #actionRow { justify-self: center; }
  .station-btn { min-width: 70px; }
  .action-btn { padding: 0 18px; font-size: 15px; }
}

@media (max-width: 380px) {
  :root { --card-w: 124px; --card-h: 80px; }
  .station-btn { min-width: 70px; }
  #remotePad { gap: 4px; padding: 4px; }
  #remotePad button { min-width: 42px; font-size: 13px; }
  .action-btn { padding: 0 16px; font-size: 15px; }
}