/* ═══════════════════════════════════════════════════════════════════
   Magic Window — CSS 3D Room Experiment  ·  style.css  (v5)
   experiments/css-3d-room/

   GEOMETRY (depth 1200 px · perspective 1400 px — unchanged):
     Back wall   translateZ(-1200px)         full-viewport → ~53.8% apparent
     Left wall   rotateY(90deg)   left edge  1200 px wide
     Right wall  rotateY(-90deg)  right edge 1200 px wide
     Ceiling     rotateX(-90deg)  top edge   1200 px tall
     Floor       rotateX(90deg)   bot edge   1200 px tall

   SIDE PANEL GEOMETRY (v5 — screen-scale pass):
     depth unchanged — panels stay at 66–67 % of wall depth (z = −800)
     sf-left  padding-right: 200 px  → panel local x 600–1000 px, center x=800
     sf-right padding-left:  200 px  → panel local x 200–600 px,  center x=400
     panel width:      380→400 px; apparent ≈ 258 px  (scale 0.645 at z=−800)
     panel min-height: 420→500 px; apparent ≈ 322 px  — clear screen proportion
     .panel-wrap wraps panel + two .panel-rail mount lines inside the wall plane

   WALL BACKING (v5):
     sf-left/right ::before upgraded to dual layer:
       · radial glow centred on panel position (ellipse 32 % × 55 %)
       · depth-zone band (recalculated for 400 px panel)

   INTERNAL LAYOUT (v5):
     Drive: added route-bar progress track at bottom
     Stage: added Humidity row; waveform height 44→60 px

   WHAT CHANGED IN v5:
     · padding-right/left: 230→200 px (panel centre exactly at z=−800)
     · Panel 380→400 px wide; min-height 420→500 px
     · .panel-wrap + .panel-rail: mount rail lines in wall plane
     · sf-left/right ::before: radial backing glow + stronger depth band
     · Drive panel: route-bar section added
     · Stage panel: Humidity row; taller waveform

   BEZEL PASS (v6):
     · border-radius: 12→5 px — sharp bezel corners, not rounded card
     · overflow: hidden — children clip to 5 px corners
     · background: rgba(2,6,16,.90) — screen-black (was rgba(3,9,20,.86))
     · box-shadow gains 3 inset layers: inner-frame + top-highlight + bottom-lip
     · ::before accent: left/right 10%→0 (full-width screen-edge top line)
     · ::after directional glow border-radius: 12→5 px
     · panel-rail: 1→2 px, stronger gradient, position:relative
     · panel-rail::before/::after: vertical tick marks at rail ends (bracket cues)
     · sf-left/right ::before radial: 32%→26% ellipse, 5→6.5 % opacity (tighter focus)
     · Focused state box-shadows include bezel inset layers

   TYPOGRAPHY PASS (v6.1 — scale 0.636 at z=−800):
     All sizes scaled to read clearly through the 3D perspective reduction.
     panel-tag       9→12 px  (apparent 5.7→7.6 px)
     panel-title    15→20 px  (apparent 9.5→12.7 px); padding-bottom 14→8 px
     t-key          10→12 px  (apparent 6.4→7.6 px)
     t-val          12→16 px  (apparent 7.6→10.2 px)
     t-big          26→32 px  (apparent 16.5→20.4 px)
     t-big small    10→12 px
     waveform-label  9→12 px
     route-label     9→12 px
     route-stat     11→14 px
     telem-row       9→11 px padding (apparent row gap 5.7→7 px)
     telem-block--sm 6→11 px padding (aligns with main rows)
   ═══════════════════════════════════════════════════════════════════ */

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

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  --depth:       1200px;  /* 500→750→1200: side walls now extend as deep as the room is wide */
  --perspective: 1400px;  /* 900→1100→1400: keeps distortion controlled as depth grows */

  /* ── Presentation viewport ──────────────────────────────────────
   * 1600 × 900 (16:9) is the design canvas — matches common laptop
   * aspect ratios (1440×900, 1366×768) so width fills naturally.
   * JS computes --stage-scale = min(vw/1600, vh/900, 1.1) on load and
   * resize. Scale cap 1.1 allows slight upscale on large monitors while
   * keeping dark margins from dominating. On smaller viewports it shrinks.
   * ─────────────────────────────────────────────────────────────── */
  --design-w:    1600px;
  --design-h:    900px;
  --stage-scale: 1;       /* overridden by JS; CSS fallback keeps layout stable */

  --bg:         #020408;
  --wall-back:  #040a16;
  --wall-side:  #030912;
  --wall-ceil:  #02060c;
  --wall-floor: #030911;

  --cyan:       #5ecfcf;
  --blue:       #7eb8f7;
  --lavender:   #b8a4f7;

  --grid:       rgba(94, 207, 207, 0.055);
  --grid-sz:    60px;

  --glass:      rgba(255, 255, 255, 0.032);
  --glass-bd:   rgba(255, 255, 255, 0.08);
  --seam-glow:  rgba(94, 207, 207, 0.30);   /* was 0.22 */

  --text:       rgba(255, 255, 255, 0.90);
  --text-sub:   rgba(255, 255, 255, 0.48);
  --text-dim:   rgba(255, 255, 255, 0.24);

  --font:  system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'SF Mono', 'Fira Mono', Consolas, monospace;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}


/* ════════════════════════════════════════════════════════════════
   STAGE SHELL — presentation viewport wrapper
   Fixed at the design canvas size (1600 × 900, 16:9), centred in the
   browser window, scaled by --stage-scale (set by JS).

   Key CSS mechanics:
   · position:fixed on this element takes it out of normal flow and
     anchors it to the top-left corner before the transform fires.
   · translate(-50%, -50%) + scale() keeps the canvas centred at any
     scale value.
   · Because this element has a non-identity transform, any
     position:fixed descendant (the .hud) resolves its containing
     block to this element, not to the viewport. The HUD therefore
     occupies the full design canvas and scales with the room.
   ════════════════════════════════════════════════════════════════ */
.stage-shell {
  position: fixed;
  top: 50%;
  left: 50%;
  width: var(--design-w);
  height: var(--design-h);
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  transform-origin: center center;
}


/* ════════════════════════════════════════════════════════════════
   SCENE — perspective container (flat 2D)
   Width/height are now 100% of the stage-shell (design canvas),
   not 100vw/100vh — those would track the viewport, not the shell.
   ════════════════════════════════════════════════════════════════ */
.scene {
  width: 100%; height: 100%;
  perspective: var(--perspective);
  perspective-origin: 50% 50%;
}


/* ════════════════════════════════════════════════════════════════
   ROOM — preserve-3d root
   ════════════════════════════════════════════════════════════════ */
.room {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}


/* ════════════════════════════════════════════════════════════════
   SURFACE — base class
   Grid is foreshortened automatically on rotated planes —
   visual proof that these are real 3D surfaces, not 2D fakes.
   ════════════════════════════════════════════════════════════════ */
.surface {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-sz) var(--grid-sz);
}


/* ════════════════════════════════════════════════════════════════
   BACK WALL (center)
   ════════════════════════════════════════════════════════════════ */
.sf-center {
  background-color: var(--wall-back);
  /* Slightly more visible grid on the back wall */
  background-image:
    linear-gradient(rgba(94,207,207,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,207,207,.07) 1px, transparent 1px);
  transform: translateZ(calc(-1 * var(--depth)));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * Ambient glow behind the glass panel + left/right edge accent glows.
 * Left edge: cyan (Drive side)  ·  Right edge: blue (Stage/Weather side)
 * These create a visual "handoff" from back-wall corner to side wall.
 */
.sf-center::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Central ambient behind the glass card — deepened for premium depth */
    radial-gradient(ellipse 72% 68% at 50% 50%,
      rgba(94,207,207,.092) 0%,
      rgba(126,184,247,.042) 40%,
      transparent 68%),
    /* Secondary wide fill — keeps centre from looking too dark */
    radial-gradient(ellipse 95% 80% at 50% 50%,
      rgba(126,184,247,.018) 0%,
      transparent 75%),
    /* Left edge — Drive / cyan side */
    linear-gradient(to right,
      rgba(94,207,207,.08) 0%,
      transparent 20%),
    /* Right edge — Stage / blue side */
    linear-gradient(to left,
      rgba(126,184,247,.07) 0%,
      transparent 20%);
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════════
   LEFT WALL
   Pivot: left edge · rotateY(90deg) → folds into −Z
   Panel local x 600–1000 px  →  z = −600 … −1000, centre z = −800
   ════════════════════════════════════════════════════════════════ */
.sf-left {
  width: var(--depth); height: 100%;
  background-color: var(--wall-side);
  transform-origin: 0% 50%;
  transform: rotateY(90deg);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 200px;   /* panel centre at z = −800 (66.7 % of 1200 px depth) */
}

/* Seam glow at right edge = back-left room corner */
.sf-left::after {
  content: '';
  position: absolute;
  top: 5%; bottom: 5%; right: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(94,207,207,.36) 18%,
    rgba(94,207,207,.38) 50%,
    rgba(94,207,207,.36) 82%,
    transparent);
  pointer-events: none;
}

/*
 * Wall-surface backing for the left panel.
 * Two layers rendered on the rotated wall plane (foreshortened by CSS 3D):
 *   · Radial glow  — tighter halo centred on panel (26 % × 48 %, up from 32 % × 55 %)
 *     opacity raised 5→6.5 % — more focused "screen lit from behind" cue
 *   · Depth band   — linear band spanning panel z-range (50–84 % of wall width)
 * "to right" = toward back wall in sf-left local space.
 */
.sf-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 26% 48% at 67% 50%,
      rgba(94,207,207,.065) 0%,
      transparent 70%),
    linear-gradient(to right,
      transparent 47%,
      rgba(94,207,207,.018) 52%,
      rgba(94,207,207,.030) 67%,
      rgba(94,207,207,.018) 84%,
      transparent 89%);
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════════
   RIGHT WALL
   Pivot: right edge · rotateY(-90deg) → folds into −Z
   Panel local x 200–600 px  →  z = −600 … −1000, centre z = −800
   ════════════════════════════════════════════════════════════════ */
.sf-right {
  width: var(--depth); height: 100%;
  left: auto; right: 0;
  background-color: var(--wall-side);
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 200px;    /* panel centre at z = −800 (66.7 % of 1200 px depth) */
}

.sf-right::after {
  content: '';
  position: absolute;
  top: 5%; bottom: 5%; left: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(126,184,247,.36) 18%,
    rgba(126,184,247,.38) 50%,
    rgba(126,184,247,.36) 82%,
    transparent);
  pointer-events: none;
}

/*
 * Wall-surface backing for the right panel.
 * sf-right: x=0 = back wall (deep), x=1200 = viewer-right (near).
 * Panel local x 200–600 → 17–50 % of wall width, centre at 33.3 %.
 */
.sf-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 26% 48% at 33% 50%,
      rgba(126,184,247,.065) 0%,
      transparent 70%),
    linear-gradient(to right,
      transparent 14%,
      rgba(126,184,247,.018) 19%,
      rgba(126,184,247,.030) 33%,
      rgba(126,184,247,.018) 51%,
      transparent 56%);
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════════
   CEILING
   Pivot: top edge · rotateX(-90deg)
   ════════════════════════════════════════════════════════════════ */
.sf-ceiling {
  width: 100%; height: var(--depth);
  background-color: var(--wall-ceil);
  transform-origin: 50% 0%;
  transform: rotateX(-90deg);
  z-index: 1;
  overflow: hidden;
}

/* Overhead light source at the back edge (local y=100% = far end) */
.ceil-light {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 52% 68% at 50% 100%,
      rgba(126,184,247,.18) 0%,
      rgba(94,207,207,.07)  42%,
      transparent 68%),
    radial-gradient(ellipse 88% 100% at 50% 100%,
      rgba(94,207,207,.05) 0%,
      transparent 62%);
}

/* Faint diagonal beam streaks from the overhead source */
.sf-ceiling::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(170deg,
      transparent 48%, rgba(126,184,247,.025) 50%, transparent 52%),
    linear-gradient(190deg,
      transparent 48%, rgba(126,184,247,.025) 50%, transparent 52%);
}

/* Bottom-edge seam where ceiling meets back wall */
.sf-ceiling::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(94,207,207,.28) 30%,
    rgba(126,184,247,.28) 70%,
    transparent);
}


/* ════════════════════════════════════════════════════════════════
   FLOOR
   Pivot: bottom edge · rotateX(90deg)
   ════════════════════════════════════════════════════════════════ */
.sf-floor {
  width: 100%; height: var(--depth);
  top: auto; bottom: 0;
  background-color: var(--wall-floor);
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
  z-index: 1;
  overflow: hidden;
}

/* Fine tile grid — brighter toward viewer (bottom of local element = z=0) */
.floor-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(94,207,207,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,207,207,.11) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.75) 100%);
  mask-image:         linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.75) 100%);
}

/* SVG convergence lines — parallel locally, converge in perspective */
.floor-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.fl { fill: none; }
.fl-center { stroke: rgba(94,207,207,.40); stroke-width: 0.7; }
.fl-inner  { stroke: rgba(94,207,207,.16); stroke-width: 0.4; }
.fl-outer  { stroke: rgba(94,207,207,.08); stroke-width: 0.3; }
.fl-edge   { stroke: rgba(94,207,207,.04); stroke-width: 0.3; }

/*
 * Center path glow — a narrow soft strip along the dashed centerline.
 * In floor local space: top (y=0) = far end (z=-500), bottom = viewer.
 * The gradient brightens toward the viewer then fades; the horizontal
 * mask clips it to a narrow centre corridor.
 */
.floor-path {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent  0%,
    rgba(94,207,207,.05) 45%,
    rgba(94,207,207,.09) 80%,
    rgba(94,207,207,.06) 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 44%, rgba(0,0,0,.9) 50%, transparent 56%);
  mask-image: linear-gradient(to right,
    transparent 44%, rgba(0,0,0,.9) 50%, transparent 56%);
}

/* Radial back-glow where floor meets back-wall */
.floor-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%,
    rgba(94,207,207,.11) 0%, transparent 65%);
}

/* Top-edge seam where floor meets back wall */
.sf-floor::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(94,207,207,.22) 30%,
    rgba(126,184,247,.22) 70%,
    transparent);
}


/* ════════════════════════════════════════════════════════════════
   PANEL WRAP — flex column container for panel + mount rails.
   Lives as the sole flex child of .sf-left or .sf-right.
   The wrap has no background/border of its own — it's invisible;
   it exists solely to vertically stack the two rail lines with the panel.
   ════════════════════════════════════════════════════════════════ */
.panel-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/*
 * Mount rail — 2 px horizontal bar above and below the panel.
 * Rendered on the rotated wall plane → perspective-foreshortened in 3D.
 * ::before / ::after add small vertical tick marks at each end,
 * suggesting physical bracket attachment points on the wall.
 */
.panel-rail {
  height: 2px;
  position: relative;
  background: linear-gradient(90deg,
    transparent 3%,
    rgba(94,207,207,.16) 8%,
    rgba(94,207,207,.36) 30%,
    rgba(94,207,207,.50) 50%,
    rgba(94,207,207,.36) 70%,
    rgba(94,207,207,.16) 92%,
    transparent 97%);
}

/* Vertical tick marks — bracket / bolt cue at each rail end */
.panel-rail::before,
.panel-rail::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 1px; height: 10px;
  background: rgba(255,255,255,.18);
}
.panel-rail::before { left: 6%; }
.panel-rail::after  { right: 6%; }

.panel-rail:first-child { margin-bottom: 10px; }
.panel-rail:last-child  { margin-top: 10px; }

/* Right wall rail — blue accent */
.sf-right .panel-rail {
  background: linear-gradient(90deg,
    transparent 3%,
    rgba(126,184,247,.16) 8%,
    rgba(126,184,247,.36) 30%,
    rgba(126,184,247,.50) 50%,
    rgba(126,184,247,.36) 70%,
    rgba(126,184,247,.16) 92%,
    transparent 97%);
}


/* ════════════════════════════════════════════════════════════════
   WALL PANEL — base
   Child of .panel-wrap which is child of .sf-left or .sf-right.
   Width 400 px at z = −800 (66.7 % of 1200 px wall).
   Scale at z=−800: 1400/2200 = 0.636 → apparent 258 × 318 px.
   min-height 500 px → apparent 318 px: clear wall-screen proportion.
   space-between distributes header / data / footer vertically.

   BEZEL STRUCTURE (box-shadow layers, outermost → innermost):
     outer ring        — faint accent corona outside the border
     contact shadow    — dark spread onto wall plane (2 layers)
     inner-frame       — 1 px inset ring simulating screen's inner bezel
     top highlight     — 2 px bright top edge (lit screen face)
     bottom lip        — 2 px dark bottom edge (shadow under bezel)
   ════════════════════════════════════════════════════════════════ */
.wall-panel {
  width: 400px;
  min-height: 500px;
  border: 1px solid rgba(94,207,207,.16);
  border-radius: 5px;
  /*
   * Subtle vertical gradient: slightly lighter/cooler at top — mimics ambient
   * light catching the screen face. Panel reads as a glass display, not a card.
   */
  background: linear-gradient(180deg,
    rgba(5, 12, 28, .87) 0%,
    rgba(2,  6, 16, .92) 50%,
    rgba(1,  4, 12, .95) 100%);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.055),      /* neutral ambient outer ring */
    0 0 110px rgba(0,0,0,.94),             /* deep wall contact shadow */
    0 0 44px rgba(0,0,0,.70),              /* secondary diffuse shadow */
    inset 0 0 0 1px rgba(255,255,255,.06), /* inner bezel ring */
    inset 0 2px 0 rgba(255,255,255,.16),   /* top edge highlight — lit screen face */
    inset 0 -2px 0 rgba(0,0,0,.62);        /* bottom lip — bezel base shadow */
}

/*
 * Top accent — full-width screen-edge highlight line.
 * left: 0 / right: 0 so it runs the full panel width (not 80% centred).
 * Overridden per modifier class with accent colour.
 */
.wall-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 2%,
    rgba(94,207,207,.40) 35%,
    rgba(126,184,247,.40) 65%,
    transparent 98%);
}


/* ────────────────────────────────────────────────────────────────
   wp-drive — left wall panel (Drive · Navigation)
   Accent: cyan. Directional glow toward the right side of the panel
   (right = direction of the back-wall corner from the viewer's angle).
   ──────────────────────────────────────────────────────────────── */
.wp-drive {
  border-color: rgba(94,207,207,.20);
}

/* Override base top accent with pure cyan — full width */
.wp-drive::before {
  background: linear-gradient(90deg,
    transparent 2%,
    rgba(94,207,207,.55) 30%,
    rgba(94,207,207,.38) 70%,
    transparent 98%);
}

/*
 * Directional right-side glow: the right edge of the Drive panel
 * is closest to the back-wall corner. The glow visually threads the
 * panel into the cyan corner seam of the room.
 * border-radius matches panel (5 px) for correct clipping with overflow:hidden.
 */
.wp-drive::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: linear-gradient(to right,
    transparent 38%,
    rgba(94,207,207,.07) 100%);
  pointer-events: none;
}


/* ────────────────────────────────────────────────────────────────
   wp-stage — right wall panel (Stage · Weather)
   Accent: blue/lavender. Directional glow toward the left side of
   the panel (left = direction of the back-wall corner).
   ──────────────────────────────────────────────────────────────── */
.wp-stage {
  border-color: rgba(126,184,247,.20);
}

/* Override base top accent with blue/lavender — full width */
.wp-stage::before {
  background: linear-gradient(90deg,
    transparent 2%,
    rgba(126,184,247,.45) 28%,
    rgba(184,164,247,.55) 62%,
    transparent 98%);
}

/* Directional left-side glow toward the back-wall/right-wall corner */
.wp-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: linear-gradient(to left,
    transparent 38%,
    rgba(126,184,247,.07) 100%);
  pointer-events: none;
}


/* ── Panel header ────────────────────────────────────────────────── */
.panel-head {
  display: flex; flex-direction: column; gap: 6px;
}

.panel-tag {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cyan); opacity: .65;
}

.wp-stage .panel-tag { color: var(--blue); }

.panel-title {
  font-size: 20px; font-weight: 600; letter-spacing: .04em;
  color: var(--text);
  border-bottom: 1px solid var(--glass-bd);
  padding-bottom: 8px;
}

/*
 * Section label — small uppercase tag used inside a panel to separate
 * two distinct content blocks (e.g. Stage vs. Weather within the right panel).
 */
.panel-section {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: var(--mono);
  opacity: .64;
  padding-top: 2px;
}
.wp-drive .panel-section { color: var(--cyan); opacity: .65; }
.wp-stage .panel-section { color: var(--blue); opacity: .70; }

.panel-rule {
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(94,207,207,.12) 30%,
    rgba(94,207,207,.12) 70%, transparent);
}
.wp-stage .panel-rule {
  background: linear-gradient(90deg,
    transparent, rgba(126,184,247,.12) 30%,
    rgba(126,184,247,.12) 70%, transparent);
}


/* ════════════════════════════════════════════════════════════════
   TELEMETRY ROWS
   ════════════════════════════════════════════════════════════════ */
.telem-block { display: flex; flex-direction: column; gap: 0; }
.telem-block--sm .telem-row { padding: 11px 0; }

.telem-row {
  display: flex; align-items: baseline;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.telem-row:last-child { border-bottom: none; }
.telem-row--speed  { align-items: center; }
.telem-row--signal { align-items: center; }

.t-key {
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-dim); font-family: var(--mono);
}

.t-val {
  font-size: 16px; color: var(--text);
  font-family: var(--mono); text-align: right;
}

.t-on    { color: var(--cyan); }
.t-clear { color: rgba(94,207,207,.75); }

.t-big {
  font-size: 32px; font-weight: 700; line-height: 1; color: var(--cyan);
}
.wp-stage .t-big { color: var(--blue); }

.t-big small {
  font-size: 12px; font-weight: 400; color: var(--text-dim);
  margin-left: 3px; vertical-align: middle; font-family: var(--mono);
}


/* ── Signal bars ────────────────────────────────────────────────── */
.signal-row { display: flex; align-items: center; gap: 8px; }

.signal-bars {
  display: flex; align-items: flex-end; gap: 2px; height: 13px;
}

.sig { width: 3px; border-radius: 1px 1px 0 0; background: rgba(255,255,255,.12); }
.sig:nth-child(1)  { height: 3px; }
.sig:nth-child(2)  { height: 4px; }
.sig:nth-child(3)  { height: 5px; }
.sig:nth-child(4)  { height: 6px; }
.sig:nth-child(5)  { height: 7px; }
.sig:nth-child(6)  { height: 8px; }
.sig:nth-child(7)  { height: 9px; }
.sig:nth-child(8)  { height: 11px; }
.sig:nth-child(9)  { height: 12px; }
.sig:nth-child(10) { height: 13px; }
.sig-on { background: var(--blue); opacity: .72; }


/* ── Waveform ───────────────────────────────────────────────────── */
.waveform-wrap { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }

.waveform-label {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim); font-family: var(--mono);
}

.waveform {
  display: flex; align-items: flex-end; gap: 2.5px; height: 60px;
}

.waveform span {
  flex: 1;
  height: calc(var(--h, .5) * 60px);
  border-radius: 1px 1px 0 0;
  background: var(--blue); opacity: .44;
  animation: wv-pulse 1.9s ease-in-out infinite alternate;
  animation-delay: calc(var(--h, .5) * -3.2s);
}

@keyframes wv-pulse { to { opacity: .78; } }


/* ── Route progress bar (Drive panel footer) ─────────────────────── */
.route-bar {
  display: flex; flex-direction: column; gap: 9px;
}

.route-header {
  display: flex; justify-content: space-between; align-items: baseline;
}

.route-label {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim); font-family: var(--mono);
}

.route-stat {
  font-size: 14px; color: var(--text-sub); font-family: var(--mono);
}

.route-track {
  height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.10); overflow: hidden;
}

.route-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan) 0%, rgba(126,184,247,.55) 100%);
}


/* ════════════════════════════════════════════════════════════════
   GLASS PANEL — wraps the entire center dashboard
   Lives as a direct child of .sf-center (which is translateZ(-500px)).
   The panel sits on the back-wall plane; the ::before ambient glow
   on sf-center radiates through this panel's semi-transparent bg.
   ════════════════════════════════════════════════════════════════ */
.dash-glass {
  position: relative;
  width: min(1500px, 92%);  /* wider: compensates for smaller apparent scale in deeper room */
  border: 1px solid rgba(94,207,207,.18);
  border-radius: 22px;
  /*
   * Glass layering: warm cyan tint at top-left corner, then deep opaque dark,
   * finishing with a cool blue whisper at the bottom-right.
   * The two middle stops create a subtle "volume" — panel reads as thick glass.
   */
  background: linear-gradient(158deg,
    rgba(94,207,207,.07)   0%,
    rgba(6, 14, 32, .94)   20%,
    rgba(3,  8, 20, .93)   58%,
    rgba(3,  8, 22, .95)   82%,
    rgba(126,184,247,.04)  100%);
  padding: 52px 64px 48px;
  box-shadow:
    0 0 140px rgba(94,207,207,.09),
    0 0 48px  rgba(126,184,247,.04),
    0 0 0 1px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(94,207,207,.06);
  transition: border-color .45s ease, box-shadow .45s ease;
}

/* Top accent — wider span (5 % inset vs. 10 %) and slightly stronger */
.dash-glass::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(94,207,207,.62) 28%,
    rgba(126,184,247,.62) 72%,
    transparent);
}

/* Bottom specular edge — simulates a thin light reflection on the glass base */
.dash-glass::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.06) 25%,
    rgba(126,184,247,.08) 50%,
    rgba(255,255,255,.06) 75%,
    transparent);
  border-radius: 0 0 22px 22px;
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════════
   CENTER DASHBOARD — layout inside the glass panel
   Font sizes ~1.86× larger to compensate for perspective scale (~0.538 at depth 1200 / persp 1400).
   ════════════════════════════════════════════════════════════════ */
.center-dash {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}

.dash-header {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.dash-eyebrow {
  font-size: 19px; letter-spacing: .44em; text-transform: uppercase;
  color: var(--cyan); opacity: .50;
}

.dash-title {
  font-size: 70px; font-weight: 700; letter-spacing: .06em; line-height: 1;
  background: linear-gradient(140deg, var(--blue) 10%, var(--cyan) 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dash-sub {
  font-size: 22px; color: rgba(255,255,255,.42); letter-spacing: .14em;
}

.dash-rule {
  width: 100%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(94,207,207,.22) 25%, rgba(126,184,247,.22) 75%,
    transparent);
}

.dash-nav {
  font-size: 20px; color: var(--text-dim);
  letter-spacing: .16em; text-transform: uppercase; opacity: .50;
}


/* ── App cards row ───────────────────────────────────────────────── */
.app-cards {
  display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
}

.app-card {
  width: 330px;                        /* 280→302→330 px: maintains apparent size in deeper room */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.028);
  padding: 36px 32px 30px;            /* was 30px 28px 26px */
  display: flex; flex-direction: column; gap: 15px;
  position: relative; overflow: hidden;
}

/* Per-card top accent */
.app-card--drive::before {
  content: '';
  position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(94,207,207,.50), transparent);
}
.app-card--stage::before {
  content: '';
  position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(184,164,247,.50), transparent);
}
.app-card--weather::before {
  content: '';
  position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(126,184,247,.50), transparent);
}

/*
 * Directional background gradients:
 * Drive   — left edge glows cyan (signals the left-wall connection)
 * Weather — right edge glows blue (signals the right-wall connection)
 */
.app-card--drive {
  background: linear-gradient(108deg,
    rgba(94,207,207,.055) 0%,
    rgba(255,255,255,.028) 35%, rgba(255,255,255,.028) 100%);
}
.app-card--weather {
  background: linear-gradient(252deg,
    rgba(126,184,247,.050) 0%,
    rgba(255,255,255,.028) 35%, rgba(255,255,255,.028) 100%);
}

.app-card-top { display: flex; align-items: center; gap: 12px; }

.app-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; font-family: var(--mono);
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.07);
}
.app-card--drive   .app-icon { background: rgba(94,207,207,.13);  color: var(--cyan);     border-color: rgba(94,207,207,.18); }
.app-card--stage   .app-icon { background: rgba(184,164,247,.13); color: var(--lavender); border-color: rgba(184,164,247,.18); }
.app-card--weather .app-icon { background: rgba(126,184,247,.13); color: var(--blue);     border-color: rgba(126,184,247,.18); }

.app-name { font-size: 28px; font-weight: 600; color: var(--text); letter-spacing: .03em; }

.app-sub {
  font-size: 18px;
  color: var(--text-dim);
  letter-spacing: .05em;
  margin-top: -5px;
}

.app-stat { font-size: 23px; color: var(--text-sub); letter-spacing: .03em; }

.app-cap { font-size: 14px; color: var(--text-dim); letter-spacing: .06em; }

/* Drive storage bar */
.app-bar { height: 3px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.app-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--blue)); }

/* Stage mini waveform */
.app-mini-wave { display: flex; align-items: flex-end; gap: 2px; height: 24px; }
.app-mini-wave span {
  flex: 1;
  height: calc(var(--h, .5) * 24px);
  border-radius: 1px 1px 0 0;
  background: rgba(184,164,247,.52);
  animation: wv-pulse 2.3s ease-in-out infinite alternate;
  animation-delay: calc(var(--h, .5) * -4s);
}

/* Weather large temp */
.app-temp {
  font-size: 48px; font-weight: 300; font-family: var(--mono);
  color: var(--blue); line-height: 1; letter-spacing: -.02em;
}

/*
 * Directional navigation hint — appears at the bottom of Drive and Stage cards.
 * Signals which wall extends that app's context.
 * Scaled ~1.55× for back-wall perspective: 16px local → ~10px apparent.
 */
.app-card-nav {
  font-size: 20px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: .55;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.app-card-nav--left  { text-align: left;  color: rgba(94,207,207,.55); }
.app-card-nav--right { text-align: right; color: rgba(126,184,247,.55); }


/* ════════════════════════════════════════════════════════════════
   HUD — position:fixed, entirely outside the 3D stack
   ════════════════════════════════════════════════════════════════ */
.hud {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 500;
  font-family: var(--mono); font-size: 10px; letter-spacing: .10em;
}

/*
 * hud-back — hidden in the standalone presentation deployment.
 * The href="/" link reloads the page; it serves no purpose for
 * a deployed demo. Set display:block to restore if needed.
 */
.hud-back {
  display: none;
}

/*
 * Home button — shown when currentApp !== 'home'.
 * Resets app state without affecting camera or input mode.
 * Shares visual language with hud-back (cyan tint instead of blue).
 * Hidden via body[data-app="home"] — JS sets this attribute on load.
 */
.hud-home {
  pointer-events: all;
  position: absolute; top: 15px; left: 16px;
  background: none;
  border: 1px solid rgba(94,207,207,.14); padding: 5px 13px;
  border-radius: 4px; letter-spacing: .15em; text-transform: uppercase;
  font-size: 10px; font-family: var(--mono);
  color: rgba(94,207,207,.38);
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.hud-home:hover       { color: rgba(94,207,207,.75); border-color: rgba(94,207,207,.28); }
.hud-home:focus-visible { outline: 1px solid rgba(94,207,207,.30); outline-offset: 2px; }
body[data-app="home"] .hud-home { display: none; }

/*
 * Fullscreen toggle — top-right HUD, below the mode readout.
 * Matches hud-home visual language. Label toggles between
 * "Fullscreen" and "Exit Full" via JS fullscreenchange listener.
 * Keyboard shortcut: F key (see main.js).
 */
.hud-fs {
  pointer-events: all;
  position: absolute; top: 60px; right: 16px;
  background: none;
  border: 1px solid rgba(94,207,207,.14); padding: 5px 13px;
  border-radius: 4px; letter-spacing: .15em; text-transform: uppercase;
  font-size: 10px; font-family: var(--mono);
  color: rgba(94,207,207,.38);
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.hud-fs:hover        { color: rgba(94,207,207,.75); border-color: rgba(94,207,207,.28); }
.hud-fs:focus-visible { outline: 1px solid rgba(94,207,207,.30); outline-offset: 2px; }
.hud-fs:disabled     { opacity: .28; cursor: default; }

.hud-badge {
  position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  color: rgba(94,207,207,.35); letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap;
}

.hud-readout {
  position: absolute; top: 15px; right: 16px;
  color: rgba(126,184,247,.24); text-align: right;
  line-height: 1.9; white-space: pre;
}

.hud-hint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.18); letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}


/* ════════════════════════════════════════════════════════════════
   INTERACTION PROTOTYPE (v4)
   Click-focus system: card click → camera pan → hold → return.
   All rules here layer on top of existing card/panel/wall styles.
   ════════════════════════════════════════════════════════════════ */

/*
 * Cards: add cursor + transitions so state changes animate smoothly.
 * The transform on hover moves the card within the back-wall plane
 * (translateZ(-500px)); it appears ~2.5 px up on screen at 0.643 scale.
 */
.app-card {
  cursor: pointer;
  transition:
    border-color .24s ease,
    box-shadow   .24s ease,
    opacity      .28s ease,
    transform    .24s ease;
}

.app-card:hover {
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 6px 36px rgba(0,0,0,.68),
    0 0 18px rgba(0,0,0,.48);
  transform: translateY(-3px) scale(1.018);
}

/* Active/selected card — accent glow, no positional transform */
.app-card.is-active {
  border-color: rgba(94,207,207,.44);
  box-shadow:
    0 0 0 1px rgba(94,207,207,.14),
    0 0 0 4px rgba(94,207,207,.04),
    0 0 40px rgba(94,207,207,.14);
  transform: none;
}
.app-card--stage.is-active,
.app-card--weather.is-active {
  border-color: rgba(126,184,247,.44);
  box-shadow:
    0 0 0 1px rgba(126,184,247,.14),
    0 0 0 4px rgba(126,184,247,.04),
    0 0 40px rgba(126,184,247,.14);
}

/*
 * Dimmed cards (not the active one).
 * Hover on a dim card shows it's still clickable but keeps it
 * clearly secondary — can redirect focus to a new wall.
 */
.app-card.is-dim {
  opacity: .38;
  transform: scale(0.968);
}
.app-card.is-dim:hover {
  opacity: .58;
  transform: scale(0.978);
}

/*
 * Wall panels: smooth border/glow transitions for focus state.
 * transition added here rather than in the base rule to keep v3 intact.
 * opacity added for app-state dimming (drive/stage/weather panel de-emphasis).
 */
.wall-panel {
  transition: border-color .40s ease, box-shadow .40s ease, opacity .40s ease;
}

/* App-section elements within a panel — smooth opacity for state dimming */
[data-app-section] {
  transition: opacity .35s ease;
}

/* Focused Drive panel (left wall — cyan accent) */
.wp-drive.is-focused {
  border-color: rgba(94,207,207,.52);
  box-shadow:
    0 0 0 1px rgba(94,207,207,.20),
    0 0 110px rgba(0,0,0,.96),
    0 0 44px rgba(0,0,0,.72),
    0 0 72px rgba(94,207,207,.26),
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.62);
}

/* Focused Stage/Weather panel (right wall — blue accent) */
.wp-stage.is-focused {
  border-color: rgba(126,184,247,.52);
  box-shadow:
    0 0 0 1px rgba(126,184,247,.20),
    0 0 110px rgba(0,0,0,.96),
    0 0 44px rgba(0,0,0,.72),
    0 0 72px rgba(126,184,247,.26),
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.62);
}

/*
 * Wall corner seam glows — brightened while the wall is focused.
 * These are instant (no CSS transition on gradient background),
 * but the camera pan provides the primary timing cue.
 * The brighter seam creates a visual thread:
 *   active card → corner seam line → focused panel.
 */
.sf-left.wall-focused::after {
  background: linear-gradient(to bottom,
    transparent,
    rgba(94,207,207,.58) 18%,
    rgba(94,207,207,.58) 82%,
    transparent);
}

.sf-right.wall-focused::after {
  background: linear-gradient(to bottom,
    transparent,
    rgba(126,184,247,.58) 18%,
    rgba(126,184,247,.58) 82%,
    transparent);
}


/* ════════════════════════════════════════════════════════════════
   APP STATE THEMES
   Activated by .room.app-drive / .room.app-stage / .room.app-weather
   (class set by updateAppTheme() in main.js on each setCurrentApp call).

   Rules here change atmosphere only: floor surface, ceiling light,
   seam glows, accent text-shadows, and decorative pseudo-elements.
   Panel opacity is owned by JS (updatePanelState via inline style).
   Room geometry, transforms, and depth are never changed here.
   ════════════════════════════════════════════════════════════════ */

/* ── Shared keyframes ─────────────────────────────────────────── */
@keyframes lane-pulse {
  from { opacity: .55; }
  to   { opacity: 1.0; }
}
@keyframes route-advance {
  from { background-position: 0 0; }
  to   { background-position: 18px 0; }
}
@keyframes sky-breathe {
  from { opacity: .85; }
  to   { opacity: 1.0; }
}

/*
 * Panel entrance — plays once when a wall panel becomes active
 * (its app-theme class is added/re-added to .room by updateAppTheme).
 * CSS animations win over transitions on the same property, so this
 * handles the opacity entrance; after it ends the normal transition
 * takes over for focus-state changes.
 */
@keyframes panel-enter {
  0%   { opacity: .45; transform: scale(.984); }
  100% { opacity: 1;   transform: scale(1); }
}


/* ════════════════════════════════════════════════════════════════
   DRIVE — road/navigation mood
   Accent: cyan. Left wall primary. Floor = road. Ceiling = tunnel.
   ════════════════════════════════════════════════════════════════ */

/* Floor — brighter centerline lane stripe with pulse animation */
.room.app-drive .fl-center {
  stroke: rgba(94,207,207,.62);
  animation: lane-pulse 1.6s ease-in-out infinite alternate;
}

/*
 * Floor path — widened center glow simulating a lit road surface.
 * Bottom (viewer end) is brightest — forward motion sense.
 */
.room.app-drive .floor-path {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(94,207,207,.07) 35%,
    rgba(94,207,207,.18) 72%,
    rgba(94,207,207,.13) 100%);
}

/* Floor–wall seam — stronger cyan for road horizon cue */
.room.app-drive .sf-floor::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(94,207,207,.40) 28%,
    rgba(94,207,207,.40) 72%,
    transparent);
}

/*
 * Ceiling — tunnel/overpass mood: tighter focused pool, no wide spread.
 * Blue warmth removed; pure cyan so ceiling reads as a confined space.
 */
.room.app-drive .ceil-light {
  background:
    radial-gradient(ellipse 42% 62% at 50% 100%,
      rgba(94,207,207,.10) 0%,
      rgba(94,207,207,.04) 48%,
      transparent 70%),
    radial-gradient(ellipse 72% 90% at 50% 100%,
      rgba(94,207,207,.02) 0%,
      transparent 58%);
}

/*
 * Route bar fill — moving stripe simulates forward travel on route.
 * pattern repeats every 18px; background-position animates rightward.
 */
.room.app-drive .route-fill {
  background: repeating-linear-gradient(
    90deg,
    var(--cyan) 0px,
    var(--cyan) 10px,
    rgba(126,184,247,.60) 10px,
    rgba(126,184,247,.60) 18px
  );
  background-size: 18px 100%;
  animation: route-advance 0.9s linear infinite;
}

/* Speed number — subtle cyan halo on the t-big value */
.room.app-drive .wp-drive .t-big {
  text-shadow: 0 0 18px rgba(94,207,207,.52);
}

/* Drive app-icon on back-wall card — brighter accent glow */
.room.app-drive .app-card--drive .app-icon {
  background: rgba(94,207,207,.24);
  border-color: rgba(94,207,207,.32);
  box-shadow: 0 0 14px rgba(94,207,207,.36);
}

/* Left wall seam — persistent elevated glow; reinforces Drive = left */
.room.app-drive .sf-left::after {
  background: linear-gradient(to bottom,
    transparent,
    rgba(94,207,207,.62) 16%,
    rgba(94,207,207,.62) 84%,
    transparent);
}

/* Back-wall glass — cyan accent tint when Drive is active */
.room.app-drive .dash-glass {
  border-color: rgba(94,207,207,.28);
  box-shadow:
    0 0 150px rgba(94,207,207,.14),
    0 0 52px  rgba(94,207,207,.06),
    0 0 0 1px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(94,207,207,.10);
}

/* Drive panel entrance — plays on each setCurrentApp('drive') call */
.room.app-drive .wp-drive {
  animation: panel-enter .52s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ════════════════════════════════════════════════════════════════
   STAGE — audio/performance mood
   Accent: lavender + blue. Right wall primary. Floor = stage deck.
   Ceiling = dual off-centre spotlights.
   ════════════════════════════════════════════════════════════════ */

/*
 * Floor — stage deck: lavender-tinted grid instead of the default cyan.
 * Horizontal bands (::before) add subtle row/beat texture.
 */
.room.app-stage .floor-grid {
  background-image:
    linear-gradient(rgba(184,164,247,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,164,247,.07) 1px, transparent 1px);
}

.room.app-stage .sf-floor::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 28px,
    rgba(184,164,247,.018) 28px,
    rgba(184,164,247,.018) 29px
  );
  pointer-events: none;
}

/* Floor centerline — solid lavender strip (no dashes for stage look) */
.room.app-stage .fl-center {
  stroke: rgba(184,164,247,.30);
  stroke-dasharray: none;
}

/* Floor path — lavender center glow */
.room.app-stage .floor-path {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(184,164,247,.04) 42%,
    rgba(184,164,247,.10) 78%,
    rgba(184,164,247,.06) 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 38%, rgba(0,0,0,.85) 50%, transparent 62%);
  mask-image: linear-gradient(to right,
    transparent 38%, rgba(0,0,0,.85) 50%, transparent 62%);
}

/* Floor seam — lavender/blue blend for stage edge */
.room.app-stage .sf-floor::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(184,164,247,.20) 25%,
    rgba(126,184,247,.24) 75%,
    transparent);
}

/*
 * Ceiling — stage lighting: two off-centre spotlights.
 * Left spot: lavender. Right spot: blue. Centre fill very dim.
 */
.room.app-stage .ceil-light {
  background:
    radial-gradient(ellipse 34% 55% at 28% 100%,
      rgba(184,164,247,.14) 0%,
      transparent 65%),
    radial-gradient(ellipse 34% 55% at 72% 100%,
      rgba(126,184,247,.12) 0%,
      transparent 65%),
    radial-gradient(ellipse 80% 100% at 50% 100%,
      rgba(126,184,247,.02) 0%,
      transparent 60%);
}

/* Waveform — faster, punchier animation when Stage is active */
.room.app-stage .waveform span {
  animation-duration: 1.2s;
  opacity: .48;
}

/* Signal bars — brighter lit segments for Stage active state */
.room.app-stage [data-app-section="stage"] .sig-on {
  opacity: .90;
}

/* Channel number — blue halo */
.room.app-stage [data-app-section="stage"] .t-big {
  text-shadow: 0 0 18px rgba(126,184,247,.55);
}

/* Stage app-icon on back-wall card */
.room.app-stage .app-card--stage .app-icon {
  background: rgba(184,164,247,.24);
  border-color: rgba(184,164,247,.32);
  box-shadow: 0 0 14px rgba(184,164,247,.36);
}

/*
 * Right wall seam — lavender/blue blend; reinforces Stage = right.
 * Values raised to ≥0.60 so this rule (specificity 0,3,1) stays
 * at least as bright as .sf-right.wall-focused::after (0,2,1 = 0.58)
 * when both classes are active simultaneously.
 */
.room.app-stage .sf-right::after {
  background: linear-gradient(to bottom,
    transparent,
    rgba(126,184,247,.62) 16%,
    rgba(184,164,247,.58) 60%,
    rgba(126,184,247,.62) 84%,
    transparent);
}

/* Back-wall glass — lavender/blue tint when Stage is active */
.room.app-stage .dash-glass {
  border-color: rgba(184,164,247,.22);
  box-shadow:
    0 0 150px rgba(184,164,247,.12),
    0 0 52px  rgba(126,184,247,.05),
    0 0 0 1px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(184,164,247,.08);
}

/* Stage panel entrance */
.room.app-stage .wp-stage {
  animation: panel-enter .52s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ════════════════════════════════════════════════════════════════
   WEATHER — environment/forecast mood
   Accent: blue. Right wall primary. Floor = wet/wind surface.
   Ceiling = wide overcast sky.
   ════════════════════════════════════════════════════════════════ */

/*
 * Floor — wind/rain direction: diagonal repeating streaks at ~108°.
 * Very low opacity (0.022) — barely perceptible, adds texture only.
 */
.room.app-weather .sf-floor::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    108deg,
    transparent 0px,
    transparent 20px,
    rgba(126,184,247,.022) 20px,
    rgba(126,184,247,.022) 21px
  );
  pointer-events: none;
}

/* Floor centerline — blue tint */
.room.app-weather .fl-center {
  stroke: rgba(126,184,247,.32);
}

/* Floor path — blue environmental glow */
.room.app-weather .floor-path {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(126,184,247,.04) 42%,
    rgba(126,184,247,.10) 78%,
    rgba(126,184,247,.06) 100%);
}

/* Floor seam — blue horizon */
.room.app-weather .sf-floor::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(126,184,247,.28) 25%,
    rgba(126,184,247,.28) 75%,
    transparent);
}

/*
 * Ceiling — overcast sky: wide, even blue expanse.
 * Larger radii than default, higher opacity, with gentle breathe animation.
 * Feels open/atmospheric rather than focused.
 */
.room.app-weather .ceil-light {
  background:
    radial-gradient(ellipse 90% 95% at 50% 100%,
      rgba(126,184,247,.20) 0%,
      rgba(126,184,247,.08) 48%,
      transparent 75%),
    radial-gradient(ellipse 100% 100% at 50% 100%,
      rgba(126,184,247,.04) 0%,
      transparent 60%);
  animation: sky-breathe 4.0s ease-in-out infinite alternate;
}

/* Temperature on the back-wall Weather card — atmospheric blue glow */
.room.app-weather .app-card--weather .app-temp {
  text-shadow: 0 0 22px rgba(126,184,247,.65);
}

/* Weather app-icon */
.room.app-weather .app-card--weather .app-icon {
  background: rgba(126,184,247,.24);
  border-color: rgba(126,184,247,.32);
  box-shadow: 0 0 14px rgba(126,184,247,.34);
}

/* Forecast value in right panel — blue tint to match weather accent */
.room.app-weather [data-app-section="weather"] .telem-row:first-child .t-val {
  color: var(--blue);
}

/* Right wall seam — sky-blue; reinforces Weather = right */
.room.app-weather .sf-right::after {
  background: linear-gradient(to bottom,
    transparent,
    rgba(126,184,247,.55) 16%,
    rgba(126,184,247,.55) 84%,
    transparent);
}

/* Back-wall glass — sky-blue tint when Weather is active */
.room.app-weather .dash-glass {
  border-color: rgba(126,184,247,.26);
  box-shadow:
    0 0 150px rgba(126,184,247,.15),
    0 0 52px  rgba(126,184,247,.06),
    0 0 0 1px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(126,184,247,.09);
}

/* Weather panel entrance — same right panel, different app context */
.room.app-weather .wp-stage {
  animation: panel-enter .52s cubic-bezier(0.22, 1, 0.36, 1);
}