/* ─── Design tokens ─────────────────────────── */
:root {
  --bg:          #080808;
  /* 20% less opacity than before (0.94→0.75, 0.88→0.70) */
  --panel:       linear-gradient(180deg, rgba(10,10,11,0.75) 0%, rgba(8,8,9,0.70) 100%);
  --glass:       rgba(255,255,255,0.04);
  --glass-hover: rgba(255,255,255,0.08);
  --border:      rgba(255,255,255,0.10);
  --border-hi:   rgba(255,255,255,0.24);
  --gold:        #C8A96E;
  --gold-dim:    rgba(200,169,110,0.18);
  --white:       #FFFFFF;
  --muted:       rgba(255,255,255,0.46);
  --muted-2:     rgba(255,255,255,0.62);
  --danger:      #e05353;
  --radius:      14px;
  --radius-sm:   10px;
  --transition:  0.22s cubic-bezier(0.4,0,0.2,1);
  /* Concept width = 23vw, scaled 15% smaller → 23 * 0.85 = 19.55vw.
     --panel-w is the TRUE on-screen width (used by flyout/status/hint). */
  --panel-scale: 0.85;
  --panel-w:     19.55vw;
  /* Left edge of the visible stage area — collapses to 0 when the build
     panel is hidden so centered overlays (hint, toast, cams) re-center. */
  --stage-left:  var(--panel-w);
  --panel-anim:  0.45s cubic-bezier(0.4,0,0.2,1);
  /* Brand UI font — installed on the system */
  --font:        'Cadillac Gothic', 'Segoe UI', system-ui, sans-serif;
  --font-head:   'Cadillac Gothic', 'Segoe UI', system-ui, sans-serif;
}

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

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ─── Player / Pixel Streaming video ─────────── */
#playercontainer { position: absolute; inset: 0; background: #000; z-index: 0; overflow: hidden; }

/* The StreamPixel stream is cross-origin and letterboxes INSIDE the iframe
   (video pinned left, grey band on the right). We can't restyle inside a
   cross-origin frame, so we overscan the iframe until the video's active area
   fills the width — anchored left so the car stays put and the grey band is
   pushed off-screen. Tune --stream-cover if any grey remains (higher = more). */
:root { --stream-cover: 1.1; }
#playercontainer iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: none; display: block;
  transform: scale(var(--stream-cover));
  transform-origin: left center;
}
#playercontainer video,
#playercontainer #videoElementParent {
  width: 100%; height: 100%; border: none; display: block;
  position: absolute; inset: 0; object-fit: cover;
}

/* ─── Loading overlay ───────────────────────── */
#loadingOverlay {
  position: absolute; inset: 0; background: #080808;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 100; gap: 28px; transition: opacity 0.6s ease;
}
#loadingOverlay.hidden { opacity: 0; pointer-events: none; }
.loading-logo {
  font-family: var(--font-head); font-size: 1.1rem;
  letter-spacing: 0.35em; color: var(--white); text-transform: uppercase;
}
.loading-sub { font-size: 0.72rem; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }
.loading-bar-track { width: 200px; height: 1px; background: var(--border); border-radius: 2px; overflow: hidden; }
.loading-bar-fill {
  height: 100%; width: 0%; background: var(--gold); border-radius: 2px;
  transition: width 0.4s ease; animation: loadProgress 3s ease forwards;
}
@keyframes loadProgress { 0%{width:0%} 60%{width:70%} 90%{width:88%} }

/* ─── Start menu (after loading) ─────────────── */
#startMenu {
  position: absolute; inset: 0; background: #080808;
  display: flex; align-items: center; justify-content: center;
  z-index: 90; transition: opacity 0.5s ease;
}
#startMenu.hidden { opacity: 0; pointer-events: none; }
.start-panel {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; width: min(360px, 86vw);
}
.start-logo {
  font-family: var(--font-head); font-size: 1.5rem;
  letter-spacing: 0.35em; color: var(--white); text-transform: uppercase;
}
.start-sub {
  font-size: 0.72rem; letter-spacing: 0.18em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 28px;
}
.start-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.start-actions.hidden { display: none; }
.start-load { display: none; flex-direction: column; gap: 12px; width: 100%; }
.start-load.show { display: flex; }
.start-load-label {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}
.start-load-input {
  width: 100%; background: var(--glass); border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm); padding: 12px 14px; text-align: center;
  font-family: var(--font); font-size: 0.8rem; letter-spacing: 0.12em;
  color: var(--white); text-transform: uppercase;
}
.start-load-input:focus { outline: none; border-color: var(--gold); }
.start-load-actions { display: flex; gap: 10px; }
.start-load-error {
  font-size: 0.64rem; color: var(--danger); text-align: center;
  min-height: 14px; letter-spacing: 0.06em;
}
.start-btn {
  width: 100%; padding: 14px 18px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer;
  border: 1px solid transparent; transition: all var(--transition);
}
.start-btn:hover { transform: translateY(-1px); }
.start-btn:active { transform: translateY(0); }
.start-btn-primary {
  background: var(--white); color: #0a0a0a; border-color: var(--white);
  box-shadow: 0 4px 22px rgba(255,255,255,0.14);
}
.start-btn-primary:hover { background: #ececec; }
.start-btn-ghost { background: transparent; color: var(--muted-2); border-color: var(--border-hi); }
.start-btn-ghost:hover { color: var(--white); border-color: var(--white); }

/* ─── Stream status pill (top-left) ──────────── */
#streamStatus {
  position: absolute; top: 20px; left: calc(var(--stage-left) + 1.4vw);
  transition: left var(--panel-anim);
  display: flex; align-items: center; gap: 7px;
  font-size: 0.6rem; letter-spacing: 0.16em; color: var(--muted);
  text-transform: uppercase; z-index: 12;
  background: rgba(0,0,0,0.4); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(10px);
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #555; transition: background var(--transition); }
.status-dot.live  { background: #4cde80; box-shadow: 0 0 6px #4cde80; }
.status-dot.error { background: var(--danger); }

/* ═══════════════════════════════════════════════
   LEFT BUILD PANEL
   ═══════════════════════════════════════════════ */
/* All metrics below are derived from the concept grid.
   Concept is 16:9; measured on the 2000px-wide render, so 1vw = 20px there.
   Using vw keeps the left container's proportions identical at any size. */
#buildPanel {
  position: absolute; top: 0; left: 0;
  /* Lay out at full concept size, then scale the entire panel (and all
     its concept-accurate internals) down by 15% as one unit.
     width  / scale  → after scale() = --panel-w (19.55vw visual)
     height / scale  → after scale() = 100vh (still full-height)        */
  width:  calc(var(--panel-w) / var(--panel-scale));
  height: calc(100vh / var(--panel-scale));
  transform-origin: 0 0;
  transform: scale(var(--panel-scale));
  background: var(--panel);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  z-index: 20;
  display: flex; flex-direction: column;
  padding: 2.15vw 1.7vw 1.4vw;           /* ≈ 43 / 34 / 28 px @2000    */
  overflow-y: auto;
  transition: transform var(--panel-anim);
}

/* ─── Panel show/hide toggle ─────────────────── */
body.panel-collapsed { --stage-left: 0vw; }
body.panel-collapsed #buildPanel {
  transform: scale(var(--panel-scale)) translateX(-102%); /* slide fully off-screen left */
}
#panelToggle {
  position: absolute; top: 20px; left: calc(var(--panel-w) - 15px); z-index: 20;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); border: 1px solid var(--border-hi); border-radius: 50%;
  color: var(--muted); cursor: pointer; backdrop-filter: blur(10px);
  transition: left var(--panel-anim), color var(--transition), border-color var(--transition);
}
#panelToggle:hover { color: var(--white); border-color: var(--white); }
#panelToggle svg { width: 14px; height: 14px; transition: transform var(--panel-anim); }
body.panel-collapsed #panelToggle { left: 10px; }
body.panel-collapsed #panelToggle svg { transform: rotate(180deg); } /* chevron flips to point right */

.build-header { margin-bottom: 2.0vw; }  /* ≈ 40px gap to first row    */
.build-title {
  font-family: var(--font-head);
  font-size: 1.4vw; font-weight: 400;    /* ≈ 28px cap height          */
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white); line-height: 1.15;
}
.build-desc {
  margin-top: 0.75vw; font-size: 0.8vw; font-weight: 300;  /* ≈ 16px   */
  line-height: 1.6; color: var(--muted-2); max-width: 16vw; /* ≈ 320px */
}

/* ─── Panel tabs (Configure / Features) ─────── */
/* Sits under the header; switches the pane below between the option rows
   and the feature cards. Panes are toggled with .pane-hidden from JS. */
.panel-tabs {
  display: flex; gap: 0.2vw;
  margin-bottom: 1.1vw;
  padding: 0.2vw;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 0.5vw;
}
.panel-tab {
  flex: 1; padding: 0.55vw 0.4vw;
  border: none; border-radius: 0.38vw; background: transparent;
  color: var(--muted-2); cursor: pointer;
  font-family: var(--font); font-size: 0.6vw; font-weight: 600;  /* ≈ 12px */
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}
.panel-tab:hover { color: var(--white); }
.panel-tab.active { background: var(--white); color: #0a0a0a; }

/* ─── Feature cards ─────────────────────────── */
/* Image tile + a very low-opacity black strip carrying the feature name. */
.feature-list { display: flex; flex-direction: column; gap: 0.5vw; flex: 0 0 auto; }
.option-list.pane-hidden, .feature-list.pane-hidden { display: none; }

.feature-card {
  position: relative; display: block; width: 100%;
  height: 6.2vw;                         /* ≈ 124px @2000              */
  padding: 0; overflow: hidden; cursor: pointer;
  background: #111;
  border: 1px solid var(--border);
  border-radius: 0.5vw;                  /* ≈ 10px, matches option rows */
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover { border-color: var(--border-hi); transform: translateY(-2px); }
.feature-card.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.feature-card-img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.feature-card:hover .feature-card-img { transform: scale(1.05); }

.feature-card-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.45vw 0.6vw;
  background: rgba(0,0,0,0.30);          /* very low opacity black layer */
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  font-family: var(--font); font-size: 0.72vw; font-weight: 500;  /* ≈ 14px */
  letter-spacing: 0.05em; color: var(--white); text-align: left;
}
.feature-card.active .feature-card-label { color: var(--gold); }

/* ─── Option rows ───────────────────────────── */
/* Fixed (concept) row height — list does NOT stretch; actions pin bottom */
.option-list { display: flex; flex-direction: column; gap: 0.4vw; flex: 0 0 auto; }

.option-row {
  display: flex; align-items: center; gap: 0.7vw;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 0.5vw;                  /* ≈ 10px                     */
  padding: 0.8vw 0.85vw;                 /* ≈ 16 / 17px → row ≈ 66px   */
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  text-align: left; width: 100%; color: inherit; font-family: inherit;
}
.option-row:hover { background: var(--glass-hover); border-color: var(--border-hi); }
.option-row.open {
  background: rgba(200,169,110,0.10);
  border-color: var(--gold);
}

.option-row-text { flex: 1; min-width: 0; }
.option-row-label {
  font-size: 0.56vw; font-weight: 600; letter-spacing: 0.20em;  /* ≈ 11px */
  text-transform: uppercase; color: var(--muted);
}
.option-row-value {
  margin-top: 0.22vw; font-size: 0.84vw; font-weight: 500;      /* ≈ 17px */
  color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.option-row-thumb {
  width: 1.65vw; height: 1.65vw; border-radius: 0.35vw;  /* ≈ 33px tile */
  flex-shrink: 0;
  border: 1px solid var(--border-hi);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.option-row-chev {
  width: 0.78vw; height: 0.78vw; flex-shrink: 0; color: var(--muted);  /* ≈ 15px */
  transition: transform var(--transition), color var(--transition);
}
.option-row:hover .option-row-chev { color: var(--white); }
.option-row.open .option-row-chev { color: var(--gold); transform: rotate(90deg); }

/* ─── Ambient light controls (inside the Ambient Light flyout) ── */
/* --amb carries the current colour so the switch, slider thumb and swatch
   glow all track the slider from one place. */
.ambient-controls { display: flex; flex-direction: column; gap: 0.75vw; }
.ambient-line     { display: flex; align-items: center; gap: 0.6vw; }

.ambient-state {
  flex: 1; min-width: 0;
  font-size: 0.72vw; font-weight: 500; color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--transition);
}
.ambient-controls.on .ambient-state { color: var(--white); }

/* on/off switch — lights up in the current ambient colour when on */
.ambient-switch {
  position: relative; flex-shrink: 0;
  width: 2.3vw; height: 1.15vw; padding: 0;            /* ≈ 46 / 23px */
  border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border-hi);
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
.ambient-controls.on .ambient-switch {
  background: var(--amb, var(--gold));
  border-color: transparent;
  box-shadow: 0 0 0.6vw var(--amb, var(--gold));
}
.ambient-knob {
  position: absolute; top: 50%; left: 0.13vw;
  width: 0.85vw; height: 0.85vw; border-radius: 50%;
  background: var(--white); transform: translateY(-50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transition: left var(--transition);
}
.ambient-controls.on .ambient-knob { left: calc(100% - 0.98vw); }

/* hue slider — track is the hue wheel, thumb wears the picked colour */
.ambient-slider {
  flex: 1; min-width: 0; height: 0.45vw; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(to right,
    #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%,
    #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
.ambient-slider:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.ambient-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 0.9vw; height: 0.9vw; border-radius: 50%;
  background: var(--amb, var(--white));
  border: 0.1vw solid #fff; cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,0.55);
}
.ambient-slider::-moz-range-thumb {
  width: 0.9vw; height: 0.9vw; border-radius: 50%;
  background: var(--amb, var(--white));
  border: 0.1vw solid #fff; cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,0.55);
}

.ambient-swatch {
  width: 1.65vw; height: 1.65vw; border-radius: 0.35vw;   /* = .option-row-thumb */
  flex-shrink: 0;
  border: 1px solid var(--border-hi);
  transition: box-shadow var(--transition), opacity var(--transition);
}
.ambient-controls:not(.on) .ambient-swatch { opacity: 0.4; }

/* ─── Feature playback lock ──────────────── */
/* While a feature plays, body.ui-busy freezes every other control so the
   sequence can't be cut short. The card that's playing stays lit and counts
   itself out with a gold progress bar. */
body.ui-busy .option-row,
body.ui-busy .inline-flyout,
body.ui-busy .ambient-switch,
body.ui-busy .ambient-slider,
body.ui-busy .scene-thumb,
body.ui-busy .vt-btn,
body.ui-busy .icam-btn,
body.ui-busy .build-btn,
body.ui-busy .panel-tab,
body.ui-busy .feature-card {
  pointer-events: none;
}
body.ui-busy .option-row,
body.ui-busy .ambient-switch,
body.ui-busy .ambient-slider,
body.ui-busy .scene-thumb,
body.ui-busy .vt-btn,
body.ui-busy .icam-btn,
body.ui-busy .build-btn,
body.ui-busy .panel-tab,
body.ui-busy .feature-card:not(.active) {
  opacity: 0.42;
  filter: saturate(0.55);
  transition: opacity var(--transition), filter var(--transition);
}
body.ui-busy .feature-card.active { border-color: var(--gold); }
body.ui-busy .feature-card.active::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gold);
  animation: featureProgress var(--feature-ms, 7000ms) linear forwards;
}
@keyframes featureProgress { from { width: 0%; } to { width: 100%; } }

/* ─── Cinematic button (under the scene rail) ─── */
.cinema-btn {
  width: 120px;                          /* lines up with .scene-thumb   */
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 12px;                      /* extra drop below the rail gap */
  padding: 14px 0;
  border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.45); backdrop-filter: blur(12px);
  color: var(--muted-2); cursor: pointer;
  font-family: var(--font); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: all var(--transition);
}
.cinema-btn:hover {
  color: var(--white); border-color: var(--gold);
  background: rgba(0,0,0,0.62); transform: translateX(-3px);
}
.cinema-btn svg { width: 11px; height: 11px; fill: currentColor; flex-shrink: 0; }

/* ─── Cinematic playback ─────────────── */
/* While the sequence runs the whole interface gets out of shot. The opacity
   transition is declared on the elements themselves, NOT inside the
   body.cinematic rule -- a transition that only exists while the class is on
   would fade out and then snap back the instant it comes off. */
#viewToggle, #sceneRail, #stageControls {
  transition: opacity 0.55s ease;
}
#buildPanel   { transition: transform var(--panel-anim), opacity 0.55s ease; }
#panelToggle  { transition: left var(--panel-anim), color var(--transition),
                            border-color var(--transition), opacity 0.55s ease; }
#interiorCams { transition: left var(--panel-anim), opacity 0.55s ease; }
#streamStatus { transition: left var(--panel-anim), opacity 0.55s ease; }
#stageHint    { transition: left var(--panel-anim), opacity 0.55s ease; }

body.cinematic #buildPanel,
body.cinematic #panelToggle,
body.cinematic #viewToggle,
body.cinematic #sceneRail,
body.cinematic #interiorCams,
body.cinematic #stageControls,
body.cinematic #streamStatus,
body.cinematic #stageHint,
body.cinematic #featureInfo,
body.cinematic #toast {
  opacity: 0;
  pointer-events: none;
}

/* ─── Build action buttons ──────────────────── */
/* margin-top:auto pins the actions to the bottom of the panel, as in concept */
.build-actions { display: flex; flex-direction: column; gap: 0.5vw; margin-top: auto; padding-top: 2vw; }
.build-btn {
  width: 100%; padding: 1.1vw 0.9vw; border-radius: 0.5vw;     /* ≈ 22 / 18px */
  font-family: var(--font); font-size: 0.72vw; font-weight: 600; /* ≈ 14px    */
  letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer;
  border: 1px solid transparent; transition: all var(--transition);
}
.build-btn:hover { transform: translateY(-1px); }
.build-btn:active { transform: translateY(0); }
.build-btn-primary {
  background: var(--white); color: #0a0a0a; border-color: var(--white);
  box-shadow: 0 4px 22px rgba(255,255,255,0.14);
}
.build-btn-primary:hover { background: #ececec; }
.build-btn-ghost { background: transparent; color: var(--muted-2); border-color: var(--border-hi); }
.build-btn-ghost:hover { color: var(--white); border-color: var(--white); }

.build-fineprint {
  margin-top: 0.9vw; font-size: 0.58vw; font-weight: 300;       /* ≈ 12px */
  line-height: 1.7; color: var(--muted); letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════
   INLINE FLYOUT — injected directly under the
   active row; expands the list using a CSS-grid
   row-track transition so the rows below slide
   down smoothly, and back up on close.
   ═══════════════════════════════════════════════ */
.inline-flyout {
  display: grid;
  grid-template-rows: 0fr;                       /* collapsed by default       */
  transition: grid-template-rows 0.34s cubic-bezier(0.4,0,0.2,1);
  font-family: var(--font);
}
.inline-flyout.open { grid-template-rows: 1fr; } /* expand to natural height   */

.inline-flyout-clip {
  overflow: hidden;
  min-height: 0;
}
.inline-flyout-inner {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 0.5vw;
  padding: 0.85vw 0.9vw 0.95vw;
  opacity: 0;
  transition: opacity 0.22s ease 0.08s;
}
.inline-flyout.open .inline-flyout-inner { opacity: 1; }

/* Head (label + close) */
.flyout-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.7vw;
}
.flyout-title {
  font-size: 0.58vw; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.flyout-close {
  width: 1.3vw; height: 1.3vw; border-radius: 0.3vw;
  border: 1px solid var(--border); background: var(--glass);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  font-family: var(--font);
}
.flyout-close:hover { color: var(--white); border-color: var(--border-hi); background: var(--glass-hover); }
.flyout-close svg { width: 0.7vw; height: 0.7vw; }

/* Horizontal track of choices (sized to fit inside the panel) */
.flyout-track {
  display: flex; gap: 0.4vw; align-items: flex-start;
  overflow-x: auto; padding-bottom: 0.2vw;
}
.flyout-track::-webkit-scrollbar { height: 3px; }

.flyout-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.35vw;
  cursor: pointer; flex-shrink: 0; width: 2.6vw;
  background: none; border: none; color: inherit;
  font-family: var(--font);
  padding: 0;
}
.flyout-swatch {
  width: 1.8vw; height: 1.8vw; border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--border) inset, 0 2px 6px rgba(0,0,0,0.4);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.flyout-swatch.tile { border-radius: 0.4vw; width: 2.2vw; height: 1.7vw; }
.flyout-item:hover .flyout-swatch { transform: scale(1.08); }
.flyout-item.active .flyout-swatch {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0.2vw 0.5vw rgba(200,169,110,0.4);
}
.flyout-item-label {
  font-size: 0.54vw; font-weight: 400; line-height: 1.3;
  color: var(--muted-2); text-align: center; letter-spacing: 0.03em;
  transition: color var(--transition);
  font-family: var(--font);
}
.flyout-item:hover .flyout-item-label,
.flyout-item.active .flyout-item-label { color: var(--white); }

/* ─── Exterior / Interior toggle (top-right) ─── */
#viewToggle {
  position: absolute; top: calc(20px + 10vh); right: 24px; z-index: 14;
  display: flex; gap: 5px; padding: 5px;
  background: rgba(0,0,0,0.45); border: 1px solid var(--border);
  border-radius: 999px; backdrop-filter: blur(12px);
}
.vt-btn {
  padding: 12px 30px; border: none; background: transparent;
  color: var(--muted); cursor: pointer;
  font-family: var(--font); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px; transition: all var(--transition);
}
.vt-btn:hover { color: var(--white); }
.vt-btn.active { background: var(--white); color: #0a0a0a; }

/* ─── Scene rail (right side) ────────────────── */
#sceneRail {
  position: absolute; top: 50%; right: 22px; transform: translateY(-50%);
  z-index: 13; display: flex; flex-direction: column; gap: 14px;
}
.scene-thumb {
  width: 120px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.4); cursor: pointer; overflow: hidden;
  padding: 0; transition: all var(--transition);
  font-family: var(--font);   /* buttons don't inherit font — force Cadillac Gothic */
}
.scene-thumb:hover { border-color: var(--border-hi); transform: translateX(-3px); }
.scene-thumb.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.scene-thumb-art { display: block; height: 74px; }
/* Limbo = bright white void; Room = the stone hall — cove light, dark
   soffit, panelled wall and pale floor, read as a vertical gradient. */
.scene-thumb-art.limbo {
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #f2f2f0 55%, #d2d2ce 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
}
.scene-thumb-art.room {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,
    #7A6259 0%,     /* upper wall, shaded at the ceiling   */
    #9C8175 18%,    /* ...brightening down toward the cove */
    #C7A995 24%,
    #F2E3CF 27%,    /* the cove light line                 */
    #E9D6BE 29%,
    #1E1717 31%,    /* dark soffit under the light shelf   */
    #2C2220 41%,
    #63504C 45%,    /* main wall, lit from above           */
    #574542 62%,
    #4A3936 84%,
    #2E2422 90%,    /* shadow line where wall meets floor  */
    #ADA59B 93%,    /* pale stone floor                    */
    #C0B8AE 100%);
}
/* CADILLAC CLUBHOUSE signage, sitting on the wall below the soffit */
.scene-thumb-art.room::after {
  content: 'CADILLAC\A CLUBHOUSE';
  white-space: pre; text-align: center;
  position: absolute; left: 0; right: 0; top: 52%;
  font-family: var(--font);
  font-size: 6px; font-weight: 700; line-height: 1.18;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.90);
  text-shadow: 0 1px 1px rgba(0,0,0,0.6), 0 0 3px rgba(0,0,0,0.35);
}
.scene-thumb-art.exterior { background: linear-gradient(180deg, #c98a4e, #6b4a8a 55%, #1c2540); }
.scene-thumb-label {
  display: block; padding: 8px 0; font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  text-align: center; font-family: var(--font);
}
.scene-thumb.active .scene-thumb-label { color: var(--gold); }

/* ─── Bottom-center hint ─────────────────────── */
/* ─── Interior camera shortcuts (bottom-center) ─ */
#interiorCams {
  position: absolute; bottom: 64px;
  left: calc(var(--stage-left) + (100vw - var(--stage-left)) / 2);
  transform: translateX(-50%); z-index: 13;
  display: none; gap: 10px;
  transition: left var(--panel-anim);
}
/* When the panel is collapsed, keep the status pill clear of the toggle button */
body.panel-collapsed #streamStatus { left: calc(1.4vw + 42px); }
#interiorCams.visible { display: flex; }
.icam-btn {
  width: 132px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border-hi); border-radius: 6px;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(12px);
  font-family: var(--font);   /* buttons don't inherit font — force Cadillac Gothic */
  transition: all var(--transition);
}
.icam-btn:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.icam-btn.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.icam-art {
  display: block; height: 58px;
  background-size: cover; background-position: center;
}
/* Screenshot thumbs (drop the captures into images/); gradient shows until then */
.icam-art.cam2 {
  background-image: url("../images/cam2.jpg"),
    linear-gradient(160deg, #3a3f6b, #6b3a5a 55%, #14100c);
}
.icam-art.cam3 {
  background-image: url("../images/cam3.jpg"),
    linear-gradient(160deg, #d9b982, #8a6f45 55%, #201a12);
}
.icam-art.cam4 {
  background-image: url("../images/cam4.jpg"),
    linear-gradient(160deg, #caa668, #4a3a26 55%, #0d0b08);
}
.icam-art.cam5 {
  background-image: url("../images/cam5.jpg"),
    linear-gradient(160deg, #e0c08d, #6b5433 55%, #100d09);
}
.icam-label {
  display: block; padding: 7px 0; font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  text-align: center;
}
.icam-btn:hover .icam-label, .icam-btn.active .icam-label { color: var(--white); }

/* ─── Scene change loader ────────────────────── */
/* Covers the stage (not the build panel) while UE swaps the environment:
   the frozen last frame, blurred, plus a floating spinner card. */
#sceneLoader {
  position: absolute; top: 0; bottom: 0; right: 0; left: var(--stage-left);
  z-index: 16; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,6,7,0.35);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s var(--transition), left var(--panel-anim);
}
#sceneLoader.show { opacity: 1; pointer-events: auto; }

/* The frozen frame sits UNDER the card, blurred at its original scale
   (no zoom — the still must line up 1:1 with the live stream). */
.sl-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none;
  filter: blur(22px) brightness(0.72) saturate(0.9);
}

.sl-card {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 1.4vw;
  background: rgba(0,0,0,0.42);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  transform: translateY(8px);
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
#sceneLoader.show .sl-card { transform: translateY(0); }

.sl-spinner {
  width: 2.2vw; height: 2.2vw; min-width: 32px; min-height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.14);
  border-top-color: var(--gold);
  animation: sl-spin 0.9s linear infinite;
}
@keyframes sl-spin { to { transform: rotate(360deg); } }

/* ─── Feature info card ──────────────────────── */
/* Pops in at the bottom-left of the stage when a feature is played, then
   auto-hides (FEATURE_INFO_MS in Vistiq_demo_02.js). Copy comes from FEATURES. */
#featureInfo {
  position: absolute; bottom: 90px; left: calc(var(--stage-left) + 1.5vw);
  width: 24vw; max-width: 520px; min-width: 300px;
  z-index: 14; pointer-events: none;
  padding: 1.1vw 1.3vw;
  background: rgba(0,0,0,0.42);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.4s var(--transition), transform 0.4s cubic-bezier(0.4,0,0.2,1), left var(--panel-anim);
}
#featureInfo.show { opacity: 1; transform: translateY(0); }

.fi-title {
  font-size: 0.6vw; font-weight: 600; letter-spacing: 0.22em;   /* ≈ 12px */
  text-transform: uppercase; color: var(--gold);
}
.fi-value {
  margin-top: 0.35vw;
  font-family: var(--font-head);
  font-size: 1.5vw; font-weight: 400; line-height: 1.15;        /* ≈ 30px */
  letter-spacing: 0.03em; color: var(--white);
}
.fi-desc {
  margin-top: 0.55vw; font-size: 0.72vw; font-weight: 300;      /* ≈ 14px */
  line-height: 1.6; color: var(--muted-2);
}
.fi-extra {
  margin-top: 0.6vw; padding-top: 0.55vw; list-style: none;
  border-top: 1px solid var(--border);
}
.fi-extra li {
  position: relative; padding-left: 0.85vw;
  font-size: 0.66vw; font-weight: 300; line-height: 1.7;        /* ≈ 13px */
  color: var(--muted);
}
.fi-extra li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 0.28vw; height: 0.28vw; border-radius: 50%; background: var(--gold);
}

#stageHint {
  position: absolute; bottom: 26px; left: calc(var(--stage-left) + (100vw - var(--stage-left)) / 2);
  transform: translateX(-50%); z-index: 12;
  transition: left var(--panel-anim);
  display: flex; align-items: center; gap: 12px;
  color: var(--muted-2); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  pointer-events: none;
}
.hint-chip {
  border: 1px solid var(--border-hi); border-radius: 999px;
  padding: 4px 10px; font-size: 0.56rem; font-weight: 600; color: var(--white);
}
.hint-sep { color: var(--border-hi); }
.hint-zoom { width: 14px; height: 14px; }

/* ─── Bottom-right stage controls ────────────── */
#stageControls {
  position: absolute; bottom: 22px; right: 24px; z-index: 13;
  display: flex; gap: 22px;
}
.stage-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: none; color: var(--muted-2); cursor: pointer;
  font-family: var(--font); font-size: 0.54rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; transition: color var(--transition);
}
.stage-btn:hover { color: var(--white); }
.stage-btn svg {
  width: 18px; height: 18px;
  border: 1px solid var(--border-hi); border-radius: 50%;
  padding: 9px; box-sizing: content-box; transition: border-color var(--transition);
}
.stage-btn:hover svg { border-color: var(--white); }

/* ═══════════════════════════════════════════════
   OVERLAYS (availability / save) — preserved
   ═══════════════════════════════════════════════ */
#availabilityOverlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.72); z-index: 50;
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
#availabilityOverlay.open { display: flex; }
.overlay-panel {
  background: rgba(12,12,12,0.96); border: 1px solid var(--border-hi);
  border-radius: 20px; width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  animation: slideUp 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.overlay-header {
  padding: 22px 24px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.overlay-title {
  font-family: var(--font-head); font-size: 0.9rem;
  letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase;
}
.overlay-close {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--glass);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: all var(--transition);
}
.overlay-close:hover { background: var(--glass-hover); color: var(--white); border-color: var(--border-hi); }
.overlay-close svg { width: 14px; height: 14px; }
.overlay-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.config-summary {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.config-field { display: flex; flex-direction: column; gap: 3px; }
.config-field-label {
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.config-field-value { font-size: 0.78rem; font-weight: 600; color: var(--white); }
.config-field-value.empty { color: #444; font-style: italic; font-weight: 400; }
/* Ambient light in the summary: the colour itself, never its hex code. */
.amb-dot {
  display: inline-block; width: 9px; height: 9px; margin-left: 6px;
  border-radius: 50%; vertical-align: baseline;
  box-shadow: 0 0 5px currentColor, 0 0 0 1px rgba(255,255,255,0.22) inset;
}
.price-display { display: flex; align-items: baseline; gap: 10px; }
.price-label { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.price-value { font-family: var(--font-head); font-size: 1.6rem; color: var(--gold); letter-spacing: 0.04em; }
.price-currency { font-size: 0.85rem; color: var(--gold); opacity: 0.7; }
.dealers-title {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.dealer-row {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: border-color var(--transition);
}
.dealer-row:hover { border-color: var(--border-hi); }
.dealer-info { flex: 1; min-width: 0; }
.dealer-name {
  font-size: 0.8rem; font-weight: 600; color: var(--white); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dealer-availability { font-size: 0.64rem; color: #4cde80; letter-spacing: 0.08em; }
.dealer-availability.low  { color: #f0b429; }
.dealer-availability.none { color: var(--muted); }
.dealer-actions { display: flex; gap: 6px; flex-shrink: 0; }
.dealer-btn {
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--glass); cursor: pointer;
  font-family: var(--font); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted);
  transition: all var(--transition); white-space: nowrap;
}
.dealer-btn:hover { background: var(--glass-hover); border-color: var(--border-hi); color: var(--white); }
.dealer-btn.primary { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }
.dealer-btn.primary:hover { background: rgba(200,169,110,0.28); }
.no-stock-notice {
  background: rgba(240,180,41,0.06); border: 1px solid rgba(240,180,41,0.18);
  border-radius: var(--radius-sm); padding: 12px 16px;
  font-size: 0.72rem; color: #f0b429; text-align: center; line-height: 1.5;
}
.overlay-footer { display: flex; gap: 8px; border-top: 1px solid var(--border); padding: 16px 24px; }

#saveDialog {
  position: absolute; inset: 0; background: rgba(0,0,0,0.72); z-index: 60;
  display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px);
}
#saveDialog.open { display: flex; }
.save-panel {
  background: rgba(12,12,12,0.97); border: 1px solid var(--border-hi);
  border-radius: 20px; width: min(400px, calc(100vw - 32px));
  animation: slideUp 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
  /* The lead form is four fields tall now. The dialog is centred inside an
     absolutely positioned overlay, so without a cap a short viewport pushes
     the submit button off-screen with nothing to scroll. */
  max-height: calc(100% - 32px); display: flex; flex-direction: column;
}
/* Title bar stays put; only the body scrolls. */
.save-panel > .overlay-header { flex: 0 0 auto; }
.save-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; align-items: center;
  min-height: 0; overflow-y: auto; }
/* The two save steps must center their own children (they're the flex child of .save-body) */
#saveFormStep, #saveResultStep {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.save-title { font-family: var(--font-head); font-size: 0.85rem; letter-spacing: 0.16em; color: var(--gold); text-align: center; }
.save-sub { font-size: 0.7rem; color: var(--muted); text-align: center; line-height: 1.6; max-width: 280px; }
.qr-placeholder {
  width: 140px; height: 140px; background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 0.62rem; letter-spacing: 0.12em; text-align: center;
  text-transform: uppercase; padding: 16px;
}
/* Real, scannable QR with the Cadillac crest centred over it */
.qr-frame {
  position: relative; width: 200px; height: 200px;
  background: #fff; border-radius: 14px; padding: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.qr-img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qr-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #777;
}
.qr-frame.ready .qr-loading { display: none; }
.qr-crest {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 50px; height: 40px; display: none;
  background: #fff; border-radius: 7px; padding: 3px;
  box-shadow: 0 0 0 3px #fff;
}
.qr-frame.ready .qr-crest { display: block; }
.qr-crest svg { width: 100%; height: 100%; display: block; }

/* Load form: "Scan QR Code" button + divider */
.start-load-or {
  display: flex; align-items: center; gap: 10px; color: var(--muted);
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.start-load-or::before, .start-load-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.start-btn-scan {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: transparent; color: var(--gold); border-color: var(--gold);
}
.start-btn-scan svg { width: 18px; height: 18px; }
.start-btn-scan:hover { background: rgba(201,162,39,0.12); color: var(--gold); border-color: var(--gold); }

/* Scan QR dialog (mirrors #saveDialog) */
#scanDialog {
  position: absolute; inset: 0; background: rgba(0,0,0,0.72); z-index: 60;
  display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px);
}
#scanDialog.open { display: flex; }
#qrReader {
  width: 260px; max-width: 100%; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border-hi); background: #000;
}
#qrReader video { display: block; width: 100% !important; height: auto !important; }
.save-code-label {
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}
.save-code {
  font-family: var(--font-head); font-size: 1.05rem; letter-spacing: 0.2em;
  color: var(--gold); text-transform: uppercase; text-align: center;
  cursor: pointer; transition: color var(--transition);
}
.save-code:hover { color: var(--white); }
#shareUrl {
  width: 100%; background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-family: var(--font); font-size: 0.66rem; color: var(--muted);
  cursor: pointer; text-align: center; letter-spacing: 0.06em;
  word-break: break-all; transition: all var(--transition);
}
#shareUrl:hover { border-color: var(--border-hi); color: var(--white); }
.save-footer { padding: 0 24px 20px; display: flex; gap: 8px; }
.full-width { width: 100%; justify-content: center; }
.cta-btn {
  padding: 12px 22px; border-radius: var(--radius); border: 1px solid; cursor: pointer;
  font-family: var(--font); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; transition: all var(--transition);
}
.cta-secondary { background: rgba(255,255,255,0.08); border-color: var(--border-hi); color: var(--white); }
.cta-secondary:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.36); }
.cta-ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.cta-ghost:hover { border-color: var(--border-hi); color: var(--white); }

/* ─── Toast ──────────────────────────────────── */
#toast {
  position: absolute; bottom: 80px;
  left: calc(var(--stage-left) + (100vw - var(--stage-left)) / 2);
  transform: translateX(-50%) translateY(10px);
  background: rgba(20,20,20,0.95); border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm); padding: 10px 18px;
  font-size: 0.7rem; letter-spacing: 0.10em; color: var(--white);
  z-index: 80; opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s; white-space: nowrap; backdrop-filter: blur(12px);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

/* No fixed-width breakpoint: the panel is locked to 23vw so it always
   holds the exact concept proportions on the (16:9) stream canvas. */


/* ═══════════════════════════════════════════════
   RESPONSIVE — mirrors the LXdemo_02 approach
   ───────────────────────────────────────────────
   Desktop (≥ 1024px) is the kiosk layout above and is left
   exactly as it was: the build panel is a scaled left sidebar
   and every metric is vw-locked to a 16:9 kiosk canvas.

   Below 1024px that inverts: the stream takes the top of the
   screen and the build panel becomes a full-width scrollable
   bottom sheet. Because the panel's internals are vw-locked,
   they render microscopic on a phone — so every readable size
   is restated here in px/rem.

   --stage-bottom is how much of the viewport the sheet eats;
   every stage overlay (toast, cams, stage buttons) offsets
   from it, so collapsing the sheet moves them all at once.
   ═══════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
  :root {
    --sheet-h:      42vh;    /* the bottom sheet                        */
    --stage-bottom: 42vh;    /* what the stage must clear (0 collapsed) */
    --stage-left:   0px;     /* centred stage overlays use full width   */
  }
  body.panel-collapsed { --stage-bottom: 0px; }

  /* ── Stage on top ─────────────────────────── */
  #playercontainer {
    inset: 0 0 auto 0;
    height: calc(100vh - var(--stage-bottom));
    transition: height var(--panel-anim);
  }
  /* The desktop overscan exists to hide the letterbox band on a wide
     kiosk canvas; on a short portrait stage it just crops the car. */
  #playercontainer iframe { transform: none; }

  /* ── Build panel → bottom sheet ───────────── */
  #buildPanel {
    position: fixed; inset: auto 0 0 0; top: auto;
    width: 100%; height: var(--sheet-h);
    transform: none;                       /* drop the desktop 0.85 scale */
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    padding: 16px 16px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.panel-collapsed #buildPanel { transform: translateY(100%); }

  /* The toggle becomes a grab handle centred on the sheet's top edge. */
  #panelToggle {
    position: fixed; top: auto; left: 50%;
    bottom: calc(var(--sheet-h) - 15px);
    transform: translateX(-50%) rotate(90deg);
    transition: bottom var(--panel-anim), color var(--transition),
                border-color var(--transition), opacity 0.55s ease;
  }
  body.panel-collapsed #panelToggle { left: 50%; bottom: 16px; }

  /* ── Sheet internals: vw → px ─────────────── */
  .build-header { margin-bottom: 14px; }
  .build-title  { font-size: 1.08rem; letter-spacing: 0.09em; }
  .build-desc   { font-size: 0.78rem; margin-top: 6px; max-width: none; }

  .panel-tabs { gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 10px; }
  .panel-tab  { padding: 10px 8px; font-size: 0.62rem; border-radius: 8px; }

  .option-list      { gap: 8px; }
  .option-row       { gap: 12px; padding: 12px 14px; border-radius: 10px; }
  .option-row-label { font-size: 0.6rem; }
  .option-row-value { font-size: 0.86rem; margin-top: 2px; }
  .option-row-thumb { width: 34px; height: 34px; border-radius: 7px; }
  .option-row-chev  { width: 15px; height: 15px; }

  .inline-flyout-inner { padding: 12px 12px 14px; border-radius: 10px; }
  .flyout-head       { margin-bottom: 10px; }
  .flyout-title      { font-size: 0.62rem; }
  .flyout-close      { width: 26px; height: 26px; border-radius: 6px; }
  .flyout-close svg  { width: 13px; height: 13px; }
  .flyout-track      { gap: 12px; padding-bottom: 4px; }
  .flyout-item       { width: 62px; gap: 6px; }
  .flyout-swatch     { width: 40px; height: 40px; }
  .flyout-swatch.tile{ width: 48px; height: 36px; border-radius: 8px; }
  .flyout-item-label { font-size: 0.62rem; }
  .flyout-item.active .flyout-swatch { box-shadow: 0 0 0 1px var(--gold), 0 3px 8px rgba(200,169,110,0.4); }

  /* Ambient light — touch targets big enough to actually hit */
  .ambient-controls { gap: 12px; }
  .ambient-line     { gap: 10px; }
  .ambient-state    { font-size: 0.8rem; }
  .ambient-switch   { width: 46px; height: 24px; }
  .ambient-knob     { width: 18px; height: 18px; left: 2px; }
  .ambient-controls.on .ambient-knob { left: calc(100% - 21px); }
  .ambient-controls.on .ambient-switch { box-shadow: 0 0 10px var(--amb, var(--gold)); }
  .ambient-slider   { height: 8px; }
  .ambient-slider::-webkit-slider-thumb { width: 20px; height: 20px; border-width: 2px; }
  .ambient-slider::-moz-range-thumb     { width: 20px; height: 20px; border-width: 2px; }
  .ambient-swatch   { width: 34px; height: 34px; border-radius: 7px; }

  .feature-list        { gap: 8px; }
  .feature-card        { height: 98px; border-radius: 10px; }
  .feature-card-label  { padding: 8px 10px; font-size: 0.66rem; }

  .build-actions { gap: 8px; padding-top: 18px; }
  .build-btn     { padding: 14px 12px; font-size: 0.68rem; border-radius: 10px; }

  /* ── Stage chrome ─────────────────────────── */
  /* Desktop-only affordances: the status pill and the drag/zoom hint are
     mouse-language and eat scarce vertical space on a phone. */
  #streamStatus, #stageHint { display: none; }

  #viewToggle { top: 10px; right: 10px; padding: 4px; gap: 4px; }
  .vt-btn     { padding: 9px 16px; font-size: 0.6rem; letter-spacing: 0.12em; }

  /* top:50% is 50% of the VIEWPORT, which on mobile lands in the sheet --
     re-centre the rail on the stage instead so it clears the stage buttons. */
  #sceneRail {
    right: 10px; gap: 8px;
    top: calc((100vh - var(--stage-bottom)) / 2);
    transform: translateY(-50%);
    transition: top var(--panel-anim), opacity 0.55s ease;
  }
  .scene-thumb        { width: 78px; border-radius: 8px; }
  .scene-thumb-art    { height: 46px; }
  .scene-thumb-label  { padding: 5px 0; font-size: 0.5rem; letter-spacing: 0.12em; }

  /* The cinematic button hangs off the scene rail, so it has to shrink with it. */
  .cinema-btn { width: 78px; margin-top: 8px; padding: 10px 0; gap: 6px; font-size: 0.5rem; letter-spacing: 0.12em; }
  .cinema-btn svg { width: 9px; height: 9px; }
  .cinema-btn:hover { transform: none; }   /* no hover on touch; keep it put */

  #stageControls { bottom: calc(var(--stage-bottom) + 12px); right: 10px; gap: 14px; }
  .stage-btn     { font-size: 0.48rem; gap: 5px; }
  .stage-btn svg { width: 30px; height: 30px; }

  #interiorCams { bottom: calc(var(--stage-bottom) + 12px); gap: 6px; }
  .icam-btn     { width: 88px; }
  .icam-art     { height: 40px; }
  .icam-label   { padding: 5px 0; font-size: 0.5rem; letter-spacing: 0.12em; }

  /* The info card moves to the top of the stage so it can't collide with
     the camera shortcuts or the sheet. */
  #featureInfo {
    top: 58px; bottom: auto; left: 10px; right: 10px;
    width: auto; min-width: 0; max-width: none;
    padding: 13px 15px;
  }
  .fi-title { font-size: 0.58rem; }
  .fi-value { font-size: 1.15rem; }
  .fi-desc  { margin-top: 5px; font-size: 0.72rem; }
  .fi-extra { margin-top: 7px; padding-top: 6px; }
  .fi-extra li { padding-left: 12px; font-size: 0.66rem; }
  .fi-extra li::before { width: 4px; height: 4px; }

  #toast { bottom: calc(var(--stage-bottom) + 16px); font-size: 0.66rem; max-width: 88vw; white-space: normal; text-align: center; }

  .sl-card { transform: scale(0.8); }
}

/* ── Phones (≤ 560px) — tighter still ───────── */
@media (max-width: 560px) {
  :root { --sheet-h: 46vh; --stage-bottom: 46vh; }

  #buildPanel { padding: 14px 12px 20px; }
  .build-title { font-size: 0.98rem; }
  .build-desc  { display: none; }        /* the sheet is short; the rows matter more */

  .option-row       { padding: 11px 12px; gap: 10px; }
  .option-row-value { font-size: 0.82rem; }
  .option-row-thumb { width: 30px; height: 30px; }

  #viewToggle { top: 8px; right: 8px; }
  .vt-btn     { padding: 8px 13px; font-size: 0.55rem; }

  #sceneRail         { right: 8px; gap: 6px; }
  .scene-thumb       { width: 62px; }
  .scene-thumb-art   { height: 38px; }
  .scene-thumb-label { padding: 4px 0; font-size: 0.44rem; }
  .cinema-btn        { width: 62px; margin-top: 6px; padding: 9px 0; gap: 5px; font-size: 0.44rem; }

  .icam-btn { width: 72px; }
  .icam-art { height: 34px; }

  #stageControls { gap: 10px; }
  .stage-btn svg { width: 26px; height: 26px; }

  #featureInfo { top: 50px; padding: 11px 13px; }
  .fi-value    { font-size: 1rem; }
}

/* ── Short landscape (phones on their side) ───
   Height is the scarce axis here, so the sheet goes back to
   being a side panel and the stream keeps the full height. */
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 560px) {
  :root { --sheet-w: 300px; --stage-bottom: 0px; --stage-left: 300px; }

  #playercontainer { inset: 0; height: 100%; }

  #buildPanel {
    position: fixed; inset: 0 auto 0 0; top: 0;
    width: var(--sheet-w); height: 100%;
    border-top: none; border-right: 1px solid var(--border);
    border-radius: 0;
    padding: 14px 14px 18px;
  }
  body.panel-collapsed #buildPanel { transform: translateX(-100%); }
  body.panel-collapsed { --stage-left: 0px; }

  #panelToggle {
    left: calc(var(--sheet-w) - 15px); bottom: auto; top: 12px;
    transform: none;
  }
  body.panel-collapsed #panelToggle { left: 10px; bottom: auto; }

  .build-desc { display: none; }
  #featureInfo { top: auto; bottom: 12px; left: calc(var(--stage-left) + 10px); right: 10px; }
  #sceneRail { top: 50%; }          /* stage is full height again here */
  .cinema-btn { margin-top: 6px; padding: 8px 0; }
  #interiorCams, #stageControls { bottom: 10px; }
  #toast { bottom: 12px; }
}