/* Mira — every style the game uses (linked from index.html). */
:root {
  /* ---- Color palette ---- */
  --bg: #0f1724;
  --bg-2: #131c2f;
  --panel: #1a2238;
  --panel-2: #18213a;
  --panel-3: #15192c;
  --border: #25324f;
  --border-2: #243049;
  --text: #e8eef7;
  --muted: #94a3b8;
  --accent: #7cd1c5;
  --accent-2: #a5b4fc;
  --warn: #f59e0b;
  --danger: #ef4444;
  --ok: #34d399;
  --star: #fcd34d;
  --star-dim: rgba(252, 211, 77, .22);
  /* ---- Standardized spacing scale (8px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  /* ---- Type scale ---- */
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base: 15px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 44px;
  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius:    16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.18);
  --shadow:    0 10px 40px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
  /* ---- Touch targets ---- */
  --touch-min: 44px;
}
body.light-mode {
  --bg: #f5f8fc;
  --bg-2: #ebf1f8;
  --panel: #ffffff;
  --panel-2: #f4f7fc;
  --panel-3: #eaf0f7;
  --border: #dbe2ec;
  --border-2: #cbd3e0;
  --text: #1a2238;
  --muted: #5a6478;
  --accent: #1f928a;
  --accent-2: #5969d6;
  --shadow-sm: 0 2px 8px rgba(120, 130, 160, .12);
  --shadow:    0 8px 30px rgba(120, 130, 160, .18);
  --shadow-lg: 0 18px 50px rgba(120, 130, 160, .22);
}
body.light-mode { background: radial-gradient(1200px 800px at 70% -10%, #fafdff 0%, var(--bg) 60%) no-repeat var(--bg); }
body.light-mode { --star: #d97706; --star-dim: rgba(217, 119, 6, .2); }
/* The 3D stage is always a dark room, whatever the page theme. */
.stage { --star: #fcd34d; --star-dim: rgba(252, 211, 77, .22); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  /* One glow at the top, then flat --bg: the gradient is sized to the
     viewport-high body, and repeating it drew a lighter band one screen down. */
  background: radial-gradient(1200px 800px at 70% -10%, #1f2a44 0%, var(--bg) 60%) no-repeat var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;       /* never let a stray child push horizontal scroll */
}
/* Buttons + interactive controls always meet the 44px touch-target rule */
button, .btn-primary, .btn-ghost, .btn-warn, .home-btn,
.audio-btn, .swatch, .preset-btn, .pick-card, .cmd-btn {
  min-height: var(--touch-min);
}
/* Smoother focus state for keyboard users */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Inputs feel native + spacious on mobile */
input[type="text"], input[type="email"], textarea {
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  width: 100%;
  min-height: var(--touch-min);
}
/* View fade-in: every time the SPA renders a new view, the #view container
   gets the .view-enter class which animates a soft fade-up. Auto-stripped
   after the animation so re-renders trigger it again next time. */
#view.view-enter {
  animation: viewIn .35s ease-out both;
}
@keyframes viewIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Honour reduced-motion preferences — skip the entrance animation. */
@media (prefers-reduced-motion: reduce) {
  #view.view-enter { animation: none; }
  .preview-randomise:hover { transform: none; }
}
.app {
  /* Mobile-first padding: 16 px on phones, 24 px on tablets+, with a max
     width that keeps line-length comfortable on big monitors. */
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-16);
}
@media (min-width: 600px) {
  .app { padding: var(--space-6) var(--space-6) var(--space-16); }
}
/* Full-bleed 3D title / threshold: the canvas IS the page. */
body.landing-mode { overflow: hidden; }
.app.landing-mode {
  max-width: none;
  padding: 0;
  height: 100%;
  min-height: 100dvh;
}
.app.landing-mode header.brand {
  position: absolute;
  z-index: 30;
  top: 0; left: 0; right: 0;
  margin: 0;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(8,12,22,.78) 0%, transparent 100%);
  pointer-events: none;
}
.app.landing-mode header.brand > * { pointer-events: auto; }
.app.landing-mode #view {
  height: 100dvh;
  min-height: 100dvh;
}
.app.landing-mode #view.view-enter { animation: none; }
header.brand {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.brand h1, .brand .lw-head {
  font-size: 18px; margin: 0; letter-spacing: .3px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.brand h1 .dot, .brand .lw-head .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px var(--accent);
}
.brand .home-btn {
  background: transparent; color: var(--muted);
  border: 1px solid #2b3753; padding: 6px 12px;
  border-radius: 999px; cursor: pointer; font-size: 13px;
}
.brand .home-btn:hover { color: var(--text); border-color: #3a4870; }

.panel {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, var(--space-8));
  box-shadow: var(--shadow);
}
h2 {
  margin: 0 0 var(--space-2);
  font-size: clamp(20px, 3vw, var(--text-2xl));
  line-height: 1.25;
  letter-spacing: -.3px;
}
h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: 1.3; }
p { color: var(--muted); margin: 0 0 var(--space-3); font-size: var(--text-base); }
.small { font-size: var(--text-xs); color: var(--muted); }

.disclaimer {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.35);
  color: #fde68a;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.disclaimer strong { color: #fff; }

button {
  font: inherit; cursor: pointer;
  border: none; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-weight: 600;
  font-size: var(--text-base);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b1020;
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(124,209,197,.30); }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
/* Tiny inline action (e.g. "Hear it" voice sample in settings) */
.btn-mini {
  padding: 2px 8px; font-size: 11px; min-height: 0;
  border-radius: 999px; vertical-align: 1px;
}
.btn-warn {
  background: rgba(245,158,11,.15); color: #fde68a;
  border: 1px solid rgba(245,158,11,.4);
}
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

/* Phobia selection grid */
.grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-5);
}
.card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  position: relative; overflow: hidden;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: linear-gradient(180deg, #1c2745, var(--panel-2));
  box-shadow: 0 8px 28px rgba(124,209,197,.12);
}
.card .icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,209,197,.08);
  margin-bottom: var(--space-3);
}
.card h3 { margin-bottom: var(--space-1); }
.card .progress-pill {
  position: absolute; top: 14px; right: 14px;
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: rgba(52,211,153,.12); color: var(--ok);
  border: 1px solid rgba(52,211,153,.3);
}

/* Level ladder */
.ladder { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.rung {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--border);
}
.rung.done { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.06); }
.rung.current { border-color: var(--accent); }
.rung .num {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--border-2); font-weight: 700; font-size: 14px;
}
.rung.done .num { background: var(--ok); color: #0b1020; }
.rung.current .num { background: var(--accent); color: #0b1020; }
.rung .meta { flex: 1; }
.rung .meta strong { display: block; font-size: 14px; }
.rung .meta span { font-size: 12px; color: var(--muted); }
.intensity { display: flex; gap: 3px; }
.intensity i {
  width: 6px; height: 18px; border-radius: 2px;
  background: #2b3753; display: inline-block;
}
.intensity i.on { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }

/* Exposure page — panel with no padding so the stage can extend edge-to-edge.
   The header + step-controls handle their own padding. The header is kept
   single-row and compact: every pixel above the scene is a pixel the user
   doesn't see the scene with. */
.exposure-panel { padding: 0; overflow: hidden; }
/* Headings and <main> get programmatic focus on route change (screen
   readers land on the new page) — that must not paint a browser focus ring
   around the page title for everyone else. */
[tabindex="-1"]:focus { outline: none; }
.exposure-header {
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.exposure-header .badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(124,209,197,.10);
  border: 1px solid rgba(124,209,197,.30);
  color: var(--accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .4px;
  flex: 0 0 auto;
}
.exposure-header h2 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.2;
  flex: 0 0 auto;
}
.exposure-header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .exposure-header { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .exposure-header h2 { font-size: var(--text-base); }
  .exposure-header p { display: none; }
}

/* Stage (the simulation canvas) — the scene is the product, give it real
   estate. Now ideal 78vh (was 60vh) and capped higher so big displays get
   a properly cinematic frame. */
/* The stage stays INSIDE its frame on tablet/desktop. The old full-bleed
   negative margin (-28px) pushed the stage past the surrounding panel
   border, so corner controls (View toggle, trust HUD, Show controls)
   rendered half OUTSIDE the frame. Edge-to-edge is now a phones-only
   treatment (≤600px, where the screen edge IS the frame). */
.stage-wrap { margin: 0; }
.stage {
  height: clamp(360px, 78vh, 900px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden; position: relative;
  background: #0a0f1c;
  transition: height .25s ease;
}
/* Tablet/desktop: a fully framed, rounded stage — neat and contained. */
@media (min-width: 601px) {
  .stage {
    border: 1px solid var(--border-2);
    border-radius: 14px;
  }
}
/* First-person: a soft view vignette — the through-the-eyes cue. Sits under
   the HUD chips (z 5+) and never intercepts input. */
.stage.fp-view::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 4;
  background: radial-gradient(ellipse 105% 90% at 50% 46%, transparent 58%, rgba(4, 7, 16, .42) 100%);
}
/* Theater mode — taller stage that fills more of the viewport without
   going full-fullscreen. Toggled via the 🎬 button in the quick bar. */
.stage.theater {
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px); /* iOS: exclude browser chrome */
}
/* True browser fullscreen — the stage takes the whole screen. */
.stage:fullscreen {
  height: 100vh; width: 100vw;
  border: none; border-radius: 0;
}
.stage:-webkit-full-screen {
  height: 100vh; width: 100vw;
  border: none; border-radius: 0;
}
/* In fullscreen ONLY #stage and its descendants render, so the hold bar and
   the continue button — which live in .step-controls, a sibling — would be
   invisible and the user would be stuck. The script moves that row inside
   the stage on entry and puts it back on exit; this floats it over the
   scene instead of letting it sit in the layout flow. */
.stage:fullscreen > .step-controls,
.stage:-webkit-full-screen > .step-controls {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 12; width: min(760px, calc(100% - 32px));
  background: rgba(8, 11, 22, .58);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px; backdrop-filter: blur(10px);
  padding: 10px 16px;
}
.stage:fullscreen > .scene-cmd-bar,
.stage:-webkit-full-screen > .scene-cmd-bar {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 12; margin: 0;
}
/* Auto-hiding chrome. Once the scene is live and the user has been still
   for a few seconds, everything that says "web page" fades out and the room
   is all that is left; any input brings it back. Same contract as a video
   player, and the reason it is opacity rather than display is that the
   layout must not reflow underneath a running scene. */
.stage .mode-badge, .stage .camera-toggle, .stage .controls-hint,
.stage .stage-quick-bar, .stage .trust-hud, .stage .hold-pill,
.stage .ml-toggle, .stage .cmd-toggle,
.stage > .step-controls, .stage > .scene-cmd-bar {
  transition: opacity .55s ease;
}
.stage.chrome-hidden .mode-badge, .stage.chrome-hidden .camera-toggle,
.stage.chrome-hidden .controls-hint, .stage.chrome-hidden .stage-quick-bar,
.stage.chrome-hidden .trust-hud, .stage.chrome-hidden .ml-toggle,
.stage.chrome-hidden .cmd-toggle,
.stage.chrome-hidden > .step-controls, .stage.chrome-hidden > .scene-cmd-bar {
  opacity: 0; pointer-events: none;
}
/* Two things are exempt, for the same reason: they are the ones a frightened
   person needs. The grounding button is the way out, and once .step-controls
   has faded the pill is the only remaining answer to "how much longer". */
.stage.chrome-hidden .ground-btn { opacity: 1; pointer-events: auto; }
.stage.chrome-hidden .hold-pill { opacity: 1; }
.stage-caption {
  padding: 14px 28px 4px; font-size: 14px;
  color: var(--muted); display: flex; justify-content: space-between;
  border-top: 1px solid var(--border);
}
.stage-caption .lvl { color: var(--accent); font-weight: 600; }

/* SUDS slider */
.suds {
  margin-top: 18px; padding: 18px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
}
.suds label { font-weight: 600; display: block; margin-bottom: 12px; }
.suds .scale-row { display: flex; align-items: center; gap: 14px; }
.suds input[type=range] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #34d399, #fbbf24, #ef4444);
  outline: none;
}
.suds input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid #0b1020;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.suds .value {
  font-size: 28px; font-weight: 700; min-width: 56px; text-align: center;
}
.suds .hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.suds .suds-range { display: none; }
.suds-chips { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.suds-chips .sc {
  position: relative; min-height: 46px; padding: 0; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font: inherit; font-weight: 800; font-size: 16px;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.suds-chips .sc::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 6px; height: 3px; border-radius: 2px;
  background: var(--c); opacity: .8;
}
.suds-chips .sc:hover, .suds-chips .sc:focus-visible { border-color: var(--c); transform: translateY(-1px); outline: none; }
.suds-chips .sc:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.suds-chips .sc.on {
  background: var(--c); border-color: var(--c); color: #0b1020;
  transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,.28); z-index: 1;
}
.suds-chips .sc.on::after { display: none; }
.suds-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 7px; }
@media (max-width: 600px) {
  .suds { padding: 14px 12px; }
  /* Two rows (0–5, 6–10) so each target is ≥ 44 px square: eleven across a
     phone made 25-px-wide keys for the game's most important answer. */
  .suds-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .suds-chips .sc { min-height: 46px; font-size: 15px; border-radius: 9px; }
  .suds-chips .sc::after { bottom: 5px; }
}

/* Breathing screen */
.breath-wrap {
  display: flex; flex-direction: column; align-items: center; padding: 30px 0;
}
.breath-circle {
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,209,197,.4), rgba(124,209,197,0));
  border: 2px solid rgba(124,209,197,.5);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 18px; font-weight: 600;
  transition: transform 4s ease-in-out;
}
.breath-circle.inhale { transform: scale(1.4); }
.breath-circle.exhale { transform: scale(0.9); }

/* Completion */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: rgba(124,209,197,.1);
  border: 1px solid rgba(124,209,197,.3);
  border-radius: 999px; color: var(--accent); font-size: 13px;
}

.progress-bar {
  height: 6px; border-radius: 999px; background: var(--border); overflow: hidden;
  margin: 8px 0 0;
}
.progress-bar > div {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .3s ease;
}

/* Stage scene styles */
.scene { width: 100%; height: 100%; position: relative; }
.scene svg { width: 100%; height: 100%; display: block; }
.stage canvas { display: block; width: 100% !important; height: 100% !important; }
.stage .mode-badge {
  position: absolute; top: 10px; right: 12px; z-index: 5;
  background: rgba(10, 14, 28, .55); color: var(--accent);
  border: 1px solid rgba(124,209,197,.35);
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .4px;
  backdrop-filter: blur(6px); pointer-events: none;
}
.stage .camera-toggle {
  position: absolute; top: 14px; left: 14px; z-index: 7;
  background: linear-gradient(135deg, rgba(124,209,197,.85), rgba(165,180,252,.85));
  color: #0b1020;
  border: 1px solid rgba(255,255,255,.30);
  padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .2px;
  cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(124,209,197,.35);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  transition: background .15s ease, transform .08s ease, box-shadow .2s ease;
}
.stage .camera-toggle::before {
  content: ""; width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 4h6l1.5 2H20a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h3.5L9 4zm3 4a5 5 0 100 10 5 5 0 000-10z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 4h6l1.5 2H20a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h3.5L9 4zm3 4a5 5 0 100 10 5 5 0 000-10z"/></svg>') center/contain no-repeat;
}
.stage .camera-toggle:hover {
  box-shadow: 0 6px 30px rgba(124,209,197,.55);
  transform: translateY(-1px);
}
.stage .camera-toggle:active { transform: translateY(1px); }
.stage .vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  /* Softened: the old .55 corner darkening (starting at 55%) stacked on top
     of the fear vignette and made every scene look murky. A lighter, later
     falloff keeps the cinematic edge without crushing the frame. */
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 64%, rgba(0,0,0,.28) 100%);
}
/* Smooth scene fade-in: when the canvas first mounts, fade up from black
   over ~600ms so users don't see a hard pop into a fully-rendered scene.
   The opacity is set on .stage canvas via JS shortly after creation. */
.stage canvas {
  opacity: 0;
  transition: opacity .55s ease-out;
}
.stage canvas.scene-ready {
  opacity: 1;
}
.stage .loading {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px;
  background: #0a0f1c; z-index: 3;
}

/* Heart-rate vignette — red pulse around the edges; faster at harder stages.
   Kept gentle on purpose: the vignette is a hint, not an alarm. */
.stage .heart {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  opacity: var(--heart-opacity, 0);
  transition: opacity 1.5s ease;
}
/* The lub-dub pulses the OPACITY of one fixed glow — a compositor job.
   Animating the inset box-shadow itself re-rasterised a full-stage 90px
   blur on every frame of the trial. */
.stage .heart::before {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 90px 30px rgba(220, 30, 30, .32);
  opacity: 0;
  animation: heartbeat var(--bpm-dur, 1s) cubic-bezier(.4,.0,.6,1) infinite;
}
.stage .heart.still::before { animation: none; opacity: .4; }
@media (prefers-reduced-motion: reduce) {
  .stage .heart::before { animation: none; opacity: .4; }
  .stage.shake { animation: none; }
}
/* The in-app switch: every CSS animation and transition reduced to an
   instant, as the system setting does for the rules that honour it. */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important;
}
html.reduce-motion .stage .heart::before { opacity: .4; }
@keyframes heartbeat {
  0%, 18%, 40%, 70%, 100% { opacity: 0; }
  8%  { opacity: 1; }
  28% { opacity: .56; }
}

/* Visible notice when the 3D scene fails and the SVG fallback mounts */
.stage .scene-fallback-note {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 9; max-width: min(420px, 90%);
  background: rgba(50, 28, 22, .92); color: #ffd9c9;
  border: 1px solid rgba(255, 150, 110, .45);
  border-radius: 10px; padding: 8px 14px;
  font-size: 12.5px; line-height: 1.4; text-align: center;
  transition: opacity .5s ease;
}
/* Pre-stage countdown overlay */
.stage .countdown {
  position: absolute; inset: 0; z-index: 9;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.85) 100%);
  color: #fff; backdrop-filter: blur(6px);
  transition: opacity .5s ease;
}
.stage .countdown .label {
  font-size: 14px; color: var(--accent);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 8px;
}
.stage .countdown .num {
  font-size: 96px; font-weight: 700;
  color: #fff; text-shadow: 0 0 30px rgba(124,209,197,.6);
  animation: countpop .8s ease-out;
}
.stage .countdown .hint {
  margin-top: 14px; color: var(--muted); font-size: 13px;
}
@keyframes countpop {
  0% { transform: scale(.4); opacity: 0; }
  40% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Continue button states. Pre-finish, the button is a quiet outlined
   "exit door" (always clickable — leaving is allowed); post-finish it
   becomes the filled, earned primary. The visual contrast is what makes
   finish-vs-early-exit legible without ever locking the exit. */
.btn-primary.holding {
  background: transparent;
  border: 1px solid rgba(124, 209, 197, .45);
  color: var(--muted);
  opacity: .85;
  cursor: pointer;
}
.btn-primary.ready-pulse {
  animation: readypulse 1.6s ease-in-out infinite;
}
@keyframes readypulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,209,197,.6); }
  50%      { box-shadow: 0 0 0 12px rgba(124,209,197,0); }
}

/* Sound toggle in header */
.brand .audio-btn {
  background: transparent; color: var(--muted);
  border: 1px solid #2b3753; padding: 6px 10px;
  border-radius: 999px; cursor: pointer; font-size: 13px;
  margin-right: 6px;
}
.brand .audio-btn:hover { color: var(--text); border-color: #3a4870; }
.brand .nav-actions { display: flex; gap: 6px; align-items: center; }

/* Step controls — hold progress */
.step-controls .hold-bar {
  height: 6px; flex: 1; max-width: 220px;
  background: #2b3753; border-radius: 999px; overflow: hidden;
  margin-left: 10px;
  position: relative;
  transition: box-shadow .3s ease;
}
.step-controls .hold-bar > div {
  height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  width: 0%; transition: width .25s linear, box-shadow .3s ease;
}
/* When the user is FACING the fear, the hold-bar glows + the fill
   pulses to show they're earning credit right now. */
.step-controls .hold-bar.in-zone {
  box-shadow: 0 0 14px rgba(124,209,197,.45);
}
.step-controls .hold-bar.in-zone > div {
  box-shadow: 0 0 12px rgba(124,209,197,.7);
  animation: holdPulse 1.4s ease-in-out infinite;
}
/* When the user is in the scene but NOT facing the fear (back at safety),
   the bar dims to communicate "you're not earning credit right now". */
.step-controls .hold-bar.idle {
  opacity: 0.5;
}
/* Completion celebration: a single green flash + brighten as the rung
   completes. The user feels rewarded for staying with it. */
.step-controls .hold-bar.complete {
  box-shadow: 0 0 24px rgba(52, 211, 153, .85);
  animation: holdComplete 1.6s ease-out;
}
.step-controls .hold-bar.complete > div {
  background: linear-gradient(90deg, var(--ok), var(--accent));
  box-shadow: 0 0 18px rgba(52, 211, 153, 1);
  animation: none;
}
@keyframes holdComplete {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes holdPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.35); }
}
.step-controls .hold-label {
  font-size: 12px; color: var(--muted); margin-left: 8px;
  font-variant-numeric: tabular-nums;
}

/* Subtle screen-level shake at the very last rung only. Half-amplitude and
   slower than before so it reads as a held-breath jitter rather than a
   panic-tremor. */
.stage.shake { animation: stageshake .7s ease-in-out infinite; }
@keyframes stageshake {
  0%, 100% { transform: translate(0, 0); }
  25%  { transform: translate(-.5px, .25px); }
  50%  { transform: translate(.5px, -.25px); }
  75%  { transform: translate(-.25px, .5px); }
}

/* Controls hint overlay */
.stage .controls-hint {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  /* Cap the width and let long orientation copy wrap to a few lines instead
     of stretching a single-line pill across the bottom (it used to slide
     under the "Show controls" toggle on the right). Leave a gutter for that
     toggle. Rounded-rect reads cleanly whether it's one line or three. */
  max-width: min(58ch, calc(100% - 160px));
  background: rgba(10, 14, 28, .78); color: var(--accent);
  border: 1px solid rgba(124,209,197,.35);
  padding: 7px 13px; border-radius: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .3px; line-height: 1.5;
  backdrop-filter: blur(6px);
  transition: opacity 1s ease;
  pointer-events: none;
}
/* "nudge" — applied when a walkable scene detects the user hasn't moved yet.
   A gentle breathing glow draws the eye back to the walk instruction without
   alarming a frightened user. */
.stage .controls-hint.nudge {
  /* A couple of soft breaths, then it rests — a forever-pulse (and the old
     up/down jitter) reads as pressure, the opposite of what an anxious user
     needs. Finite + glow-only. */
  animation: hintNudge 2.6s ease-in-out 3;
  border-color: rgba(124,209,197,.55);
}
@keyframes hintNudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,209,197,0); }
  50%      { box-shadow: 0 0 12px 2px rgba(124,209,197,.28); }
}

/* Breath HUD for the flying scene — bottom-centre of the stage. A soft
   ring expands on inhale and contracts on exhale, paced 4 s in / 6 s out.
   Used as a visual breath-pacer the user can sync to. */
.stage .breath-hud {
  position: absolute; left: 50%; bottom: 14px; z-index: 7;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  pointer-events: none;
  user-select: none;
}
.stage .breath-hud .breath-ring {
  width: 70px; height: 70px;
  border: 1.5px solid rgba(124,209,197,.45);
  border-radius: 999px;
  background: rgba(10, 14, 28, .35);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.stage .breath-hud .breath-fill {
  width: 56px; height: 56px;
  background: radial-gradient(circle, rgba(124,209,197,.55) 0%, rgba(124,209,197,0) 70%);
  border-radius: 999px;
  transform: scale(0.4);
  opacity: 0.45;
  transition: opacity .3s ease;
}
.stage .breath-hud .breath-label {
  font-size: 11px; font-weight: 600;
  color: var(--text);
  background: rgba(10, 14, 28, .55);
  border: 1px solid rgba(124,209,197,.30);
  padding: 4px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
  letter-spacing: .15px;
  white-space: nowrap;
}

/* Trust HUD for the dog scene — top-left of the stage. Shows the dog's
   name and a trust progress bar that fills as the user pets, throws
   balls, and shares treats. Subtle on purpose so it doesn't compete
   with the scene itself. */
.stage .trust-hud {
  /* Top-RIGHT, tucked just under the audio/voice quick-bar. The top-left
     corner is owned by the camera-toggle pill (opaque, z-index 7); the two
     used to stack here and garble the dog's name ("uddy"). The right column
     below the quick-bar is otherwise empty, so the trust/name feedback now
     reads cleanly without colliding with the toggle or the fear-meter. */
  position: absolute; top: 64px; right: 10px; left: auto; z-index: 7;
  min-width: 150px; max-width: 240px;
  padding: 9px 12px;
  background: rgba(10, 14, 28, .55);
  border: 1px solid rgba(124,209,197,.35);
  border-radius: 12px;
  color: var(--text);
  backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600;
  pointer-events: none;
}
/* On very narrow screens we further compress the trust HUD so it never
   overlaps the quick-bar. Truncates long dog names with ellipsis. */
@media (max-width: 480px) {
  .stage .trust-hud {
    top: 58px; right: 8px;
    min-width: 128px;
    max-width: min(172px, calc(100% - 174px));
    padding: 7px 10px;
    font-size: 11px;
  }
  .stage .trust-hud .trust-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
/* ---- Behavioral experiments (the in-scene quest deck) ---- */
/* Top-LEFT column under the camera pill (top-right belongs to the quick-bar
   + trust HUD, bottom-left to the touch joystick, bottom-centre to the
   hold-bar). Interactive, unlike the trust HUD. */
.stage .exp-panel {
  position: absolute; top: 64px; left: 10px; z-index: 7;
  width: 252px; max-width: min(66vw, 272px);
  background: rgba(10, 14, 28, .62);
  border: 1px solid rgba(159, 170, 231, .38);
  border-radius: 12px;
  color: var(--text);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
  overflow: hidden;
}
.stage .exp-panel.collapsed { width: auto; }
/* Scenes with the mouse-look toggle (dogs, spiders) put it at top:66 left:14
   — exactly on top of this panel. Step the panel down beneath it. */
.stage:has(.ml-toggle) .exp-panel { top: 108px; }
.exp-head {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px; cursor: pointer; user-select: none;
  font-weight: 700; letter-spacing: .2px;
}
.exp-head .exp-n { color: #9faae7; font-weight: 600; font-size: 11px; }
.exp-list { display: flex; flex-direction: column; gap: 6px; padding: 0 9px 9px; }
.exp-item {
  text-align: start; border: 1px solid rgba(255,255,255,.14); border-radius: 9px;
  background: rgba(20, 26, 48, .55); color: var(--text);
  padding: 7px 9px; cursor: pointer; font-size: 12px; line-height: 1.35;
}
.exp-item:hover { border-color: #9faae7; }
.exp-item.done { opacity: .55; }
.exp-item .exp-check { color: var(--ok); margin-right: 4px; }
.exp-pick { padding: 2px 9px 10px; }
.exp-pick .exp-q { font-size: 12px; color: var(--muted); margin: 4px 0 7px; line-height: 1.35; }
.exp-chip {
  display: block; width: 100%; text-align: start; margin-top: 5px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 9px;
  background: rgba(28, 34, 60, .6); color: var(--text);
  padding: 7px 9px; cursor: pointer; font-size: 12px;
}
.exp-chip:hover { border-color: var(--accent); }
.exp-run { padding: 2px 11px 11px; }
.exp-run .exp-how { font-size: 11.5px; color: var(--muted); margin: 3px 0 8px; line-height: 1.4; }
.exp-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.exp-bar i { display: block; height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width .25s linear; }
.exp-result { padding: 2px 11px 11px; }
.exp-result .exp-out { font-size: 12.5px; line-height: 1.45; margin: 4px 0 6px; }
.exp-result .exp-vs { font-size: 11px; color: #a9e8d2; }
.exp-cancel {
  margin-top: 7px; font-size: 11px; color: var(--muted); background: none;
  border: none; cursor: pointer; padding: 0; text-decoration: underline;
}

/* ---- The dog coach: your alarm as a live wave + this trial's card ----
   Top-right, where the trust card used to sit (it now lives in the card's
   footer). Not auto-hidden with the rest of the chrome: it IS the feedback
   loop — the wave falling while you stay is the lesson. */
.stage .dog-coach {
  position: absolute; top: 64px; right: 10px; z-index: 7;
  width: 236px; box-sizing: border-box;
  padding: 9px 11px 8px;
  background: rgba(10, 14, 28, .64);
  border: 1px solid rgba(124,209,197,.32);
  border-radius: 14px;
  color: var(--text);
  backdrop-filter: blur(8px);
  font-size: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  transition: border-color .5s ease;
  --dc-c: #7cd1c5;
}
.dog-coach .dc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dog-coach .dc-title { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #b4c0d2; font-weight: 700; }
.dog-coach .dc-word { color: var(--dc-c); font-weight: 700; font-size: 12.5px; transition: color .3s ease; }
/* The stage's own "canvas" rules (100% height, fade-in from opacity 0)
   are for the 3D view — keep them off the wave. */
.stage .dog-coach canvas.dc-wave {
  display: block; width: 100% !important; height: 52px !important; margin: 5px 0 1px;
  opacity: 1; animation: none; transition: none;
}
.dog-coach .dc-legend { font-size: 10px; color: rgba(124,209,197,.8); height: 12px; opacity: 0; transition: opacity .4s ease; }
.dog-coach .dc-legend.on { opacity: 1; }
.dog-coach .dc-l-line::before {
  content: ""; display: inline-block; width: 14px; margin-right: 5px; vertical-align: middle;
  border-top: 1px dashed rgba(124,209,197,.75);
}
.dog-coach .dc-goals {
  list-style: none; margin: 6px 0 0; padding: 7px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 5px;
}
.dog-coach .dc-goal { display: flex; gap: 7px; align-items: flex-start; line-height: 1.3; color: #cbd5e1; transition: color .3s ease; }
.dog-coach .dc-goal i { font-style: normal; flex: 0 0 16px; text-align: center; opacity: .8; }
.dog-coach .dc-goal.req span { font-weight: 600; color: var(--text); }
.dog-coach .dc-goal.done, .dog-coach .dc-goal.done span { color: #a9e8d2; }
.dog-coach .dc-goal.done span { text-decoration: line-through; text-decoration-color: rgba(169,232,210,.45); }
.dog-coach .dc-goal.done i { color: var(--ok); opacity: 1; }
.dog-coach .dc-n { color: #9faae7; font-weight: 700; margin-left: 3px; }
/* Trial stars: a row atop the goals, and a star at the end of each goal. */
.dog-coach .dc-stars-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #b4c0d2;
}
.dog-coach .dc-stars { letter-spacing: 1px; font-size: 14px; }
.dog-coach .dc-stars i, .dog-coach .dc-gs { font-style: normal; color: var(--star-dim); transition: color .4s ease, text-shadow .4s ease; }
.dog-coach .dc-stars i.on { color: var(--star); text-shadow: 0 0 8px rgba(252,211,77,.55); }
.dog-coach .dc-goal span { flex: 1 1 auto; }
.dog-coach .dc-gs { flex: 0 0 auto; font-weight: 400; font-size: 12px; margin-inline-start: 4px; }
.dog-coach .dc-goal.done .dc-gs { color: var(--star); text-shadow: 0 0 6px rgba(252,211,77,.5); }
/* The star landing — top-centre of the view, one at a time. */
.stage .star-pop {
  position: absolute; top: 16px; left: 50%; z-index: 12;
  display: flex; align-items: center; gap: 12px;
  max-width: min(440px, calc(100% - 24px)); box-sizing: border-box;
  padding: 10px 16px 10px 12px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(38, 32, 12, .92), rgba(20, 22, 40, .92));
  border: 1px solid rgba(252,211,77,.6);
  box-shadow: 0 10px 34px rgba(0,0,0,.35), 0 0 24px rgba(252,211,77,.18);
  color: var(--text); pointer-events: none;
  transform: translateX(-50%);
  animation: starPopIn 2.9s cubic-bezier(.2,.9,.25,1) forwards;
}
.stage .star-pop .sp-row { font-size: 24px; letter-spacing: 2px; white-space: nowrap; line-height: 1; }
.stage .star-pop .sp-row i { font-style: normal; color: rgba(252,211,77,.2); display: inline-block; }
.stage .star-pop .sp-row i.on { color: var(--star); text-shadow: 0 0 12px rgba(252,211,77,.7); }
.stage .star-pop .sp-row i.new { animation: starSpin .8s .15s cubic-bezier(.3,1.6,.5,1) both; }
.stage .star-pop .sp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12.5px; line-height: 1.3; color: #dbe3f0; }
.stage .star-pop .sp-txt b { color: var(--star); font-size: 13.5px; letter-spacing: .02em; }
.stage .star-pop.all { border-color: rgba(252,211,77,.9); box-shadow: 0 10px 34px rgba(0,0,0,.35), 0 0 40px rgba(252,211,77,.35); }
@keyframes starPopIn {
  0% { opacity: 0; transform: translate(-50%, -14px) scale(.9); }
  9% { opacity: 1; transform: translate(-50%, 0) scale(1.03); }
  14% { transform: translate(-50%, 0) scale(1); }
  82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(.96); }
}
@keyframes starSpin {
  0% { transform: scale(0) rotate(-120deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (max-width: 600px) {
  .stage .star-pop { top: auto; bottom: 46%; padding: 8px 12px 8px 10px; gap: 9px; }
  .stage .star-pop .sp-row { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage .star-pop { animation: starPopFade 2.9s linear forwards; }
  .stage .star-pop .sp-row i.new { animation: none; }
  @keyframes starPopFade { 0%, 100% { opacity: 0; } 8%, 85% { opacity: 1; } }
}
.dog-coach .dc-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 7px; font-size: 11px; color: var(--muted); }
.dog-coach .dc-dog { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.dog-coach .dc-trust { color: #f4a3b4; letter-spacing: 1px; }
.dog-coach .dc-trust:empty { display: none; }
.dog-coach .dc-trust.dc-note { color: var(--muted); letter-spacing: normal; font-style: italic; font-size: 11px; }
.dog-coach.dc-settled { border-color: rgba(52,211,153,.65); }
.dog-coach.dc-ping { animation: dcPing .9s ease; }
@keyframes dcPing { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 100% { box-shadow: 0 0 0 14px rgba(52,211,153,0); } }
/* The coach's wave replaces the unlabelled 6px fear bar in this scene. */
.stage:has(.dog-coach) .fear-meter { display: none !important; }

/* Teaching callouts — beside the card, pointing at the wave they explain. */
.stage .dc-callout {
  position: absolute; top: 64px; right: 256px; z-index: 8;
  width: min(300px, calc(100% - 290px)); box-sizing: border-box;
  padding: 10px 13px; border-radius: 12px;
  background: rgba(22, 30, 54, .9); border: 1px solid rgba(165,180,252,.45);
  color: var(--text); font-size: 13px; line-height: 1.45;
  backdrop-filter: blur(8px); box-shadow: 0 8px 28px rgba(0,0,0,.3);
  opacity: 0; transform: translateX(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.stage .dc-callout::after {
  content: ""; position: absolute; right: -6px; top: 24px; width: 10px; height: 10px;
  transform: rotate(45deg); background: rgba(22,30,54,.9);
  border-right: 1px solid rgba(165,180,252,.45); border-top: 1px solid rgba(165,180,252,.45);
}
.stage .dc-callout.show { opacity: 1; transform: none; }
.stage .dc-callout b { color: #c7d0ff; }

/* Reading the dog — bottom-centre, above the captions. While it waits for
   an answer the reach hint and context prompt step aside. */
.stage .dc-read {
  /* Anchored above the dog's head by the coach (left/top set per frame);
     the bottom-centre spot is only the fallback before the first frame. */
  position: absolute; left: 50%; bottom: 128px; z-index: 9;
  transform: translate(-50%, calc(-100% + 8px));
  width: min(500px, calc(100% - 24px)); box-sizing: border-box;
  padding: 11px 13px 10px; border-radius: 14px;
  background: rgba(12, 17, 32, .88); border: 1px solid rgba(165,180,252,.5);
  color: var(--text); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.stage .dc-read.show { opacity: 1; transform: translate(-50%, -100%); pointer-events: auto; }
.stage .dc-read[style*="top"] { bottom: auto; }
.stage .dc-read.result { pointer-events: none; }
.dc-read-q { font-size: 13.5px; line-height: 1.4; margin-bottom: 8px; }
.dc-read-q b { color: #c7d0ff; }
.dc-read-eye { opacity: .9; }
.dc-read-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-opt {
  flex: 1 1 0; min-width: 120px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(28,36,64,.78);
  color: var(--text); font-size: 12.5px; font-weight: 600;
}
.dc-opt:hover, .dc-opt:focus-visible { border-color: var(--accent); }
.dc-opt kbd {
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 2px 5px; border-radius: 4px;
  background: rgba(255,255,255,.1); color: var(--muted);
}
.dc-read-timer { height: 3px; margin-top: 9px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.dc-read-timer i { display: block; height: 100%; width: 100%; background: rgba(165,180,252,.7); }
.dc-read-res .dc-res-top { font-size: 13.5px; margin-bottom: 4px; }
.dc-read-res.ok .dc-res-top { color: #a9e8d2; }
.dc-read-res.no .dc-res-top { color: #f5c98a; }
.dc-read-res .dc-res-means { font-size: 13px; line-height: 1.45; color: #dbe3f0; }
.dc-new { font-size: 10.5px; font-weight: 700; color: #0b1020; background: #a5b4fc; padding: 1px 6px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.stage:has(.dc-read.show) .ctx-prompt, .stage:has(.dc-read.show) .reach-hint { opacity: 0 !important; }
@media (max-width: 600px) {
  .stage .dog-coach { top: 58px; right: 8px; width: 156px; padding: 7px 9px 6px; border-radius: 12px; }
  .stage .dog-coach canvas.dc-wave { height: 34px !important; }
  .dog-coach .dc-legend { display: none; }
  .dog-coach .dc-goal { display: none; }
  .dog-coach .dc-goal.next, .dog-coach.dc-open .dc-goal { display: flex; }
  .dog-coach .dc-goals { font-size: 11px; }
  .dog-coach .dc-foot { margin-top: 5px; }
  .dog-coach .dc-title { font-size: 10.5px; letter-spacing: .06em; }
  .stage .dc-callout { top: 264px; bottom: auto; right: 8px; left: 8px; width: auto; font-size: 12.5px; }
  /* The phone's gyro toggle lives top-right — where the coach card is. */
  .stage:has(.dog-coach) .gyro-btn { top: 220px !important; right: 8px !important; }
  .stage .dc-callout::after { display: none; }
  .stage .dc-read { width: min(360px, calc(100% - 16px)); }
  .dc-opt { min-width: 0; font-size: 12px; padding: 10px 6px; }
}
@media (max-width: 600px) {
  /* Below 600px the hold-pill owns the top-left slot (it is the phone's
     only hold readout) — the experiments chip drops beneath it. */
  /* Never wider than the gap left of the coach card (156px wide, 8px in). */
  .stage .exp-panel { top: 92px; left: 8px; font-size: 12px; width: min(216px, calc(100% - 184px)); max-width: none; }
  /* The demo chip becomes a full-width strip instead of a floating bubble
     four lines tall in the middle of the view. (.stage prefix: the base
     .demo-chip rule sits LATER in the sheet, so this needs the extra
     specificity to win the cascade.) */
  .stage .demo-chip {
    top: 4px; left: 10px; right: 10px; transform: none;
    width: auto; max-width: none; border-radius: 10px;
    font-size: 11px; padding: 4px 10px; line-height: 1.35;
  }
}
@media (max-width: 480px) {
  /* restored from the trust-hud block this CSS was spliced into */
  .stage .trust-hud .trust-name { max-width: 110px; }
}
/* ---- Instant demo ---- */
.demo-chip {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 8; max-width: min(86%, 560px);
  background: rgba(10, 14, 28, .68); border: 1px solid rgba(159, 170, 231, .4);
  border-radius: 999px; padding: 7px 16px;
  font-size: 12.5px; color: var(--text); text-align: center;
  backdrop-filter: blur(6px); pointer-events: none;
}
.landing-actions .demo-cta, .story-actions .demo-cta { display: block; margin: 10px auto 0; font-size: 13px; }
.demo-end {
  position: absolute; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 18, .55); backdrop-filter: blur(3px);
}
.demo-end-card {
  max-width: 430px; width: calc(100% - 40px);
  background: linear-gradient(180deg, var(--panel), var(--panel-3));
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  padding: 22px 24px; text-align: center;
}
.demo-end-card h3 { margin: 8px 0 8px; font-size: 20px; }
.demo-end-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 14px; }
.demo-end-card .actions { display: flex; flex-direction: column; gap: 8px; }
.demo-stay {
  margin-top: 12px; font-size: 12px; color: var(--muted);
  background: none; border: none; cursor: pointer; text-decoration: underline;
}
/* Fainter paths — the six non-featured fears, named on the map */
.jw-faint-head { font-size: 12.5px; color: var(--muted); margin: 10px 0 7px; }
.jw-faint-row { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 12px; }
.jw-faint {
  font-size: 12px; padding: 5px 12px; cursor: pointer;
  background: rgba(20, 26, 46, .55); color: var(--muted);
  border: 1px dashed var(--border-2); border-radius: 999px;
}
.jw-faint:hover { color: var(--text); border-color: var(--accent); border-style: solid; }
/* ---- Self-check quiz ---- */
.quiz-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; margin: 14px 0 10px;
}
.quiz-card {
  text-align: start; padding: 13px 15px; cursor: pointer;
  background: linear-gradient(180deg, var(--panel), var(--panel-3));
  border: 1px solid var(--border-2); border-radius: 14px; color: var(--text);
  display: flex; flex-direction: column; gap: 3px;
}
.quiz-card:hover { border-color: var(--accent); }
.quiz-card strong { font-size: 15px; }
.quiz-card .quiz-realm { font-size: 12px; color: var(--muted); }
.quiz-note { opacity: .75; }
.quiz-moments { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 10px; }
.quiz-moment {
  padding: 11px 13px; border: 1px solid var(--border-2); border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel-3));
}
.quiz-moment p { margin: 0 0 8px; font-size: 14.5px; }
.quiz-lv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.quiz-lv-b {
  min-height: 40px; padding: 6px 4px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2);
  color: var(--text); font: inherit; font-size: 13px;
}
.quiz-lv-b.on { border-color: var(--accent); background: rgba(255, 196, 110, .16); font-weight: 600; }
.quiz-lv-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz-result { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--accent); margin: 4px 0 10px; }
.quiz-result p { margin: 0 0 8px; }
.quiz-next { text-align: start; margin-top: 12px; border-top: 1px solid rgba(255,255,255,.09); padding-top: 12px; }
.quiz-next-head { font-size: 14px; margin: 0 0 6px; }
.quiz-next-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.quiz-steps { margin: 0 0 6px; padding-left: 20px; font-size: 13px; line-height: 1.55; }
.fc-clin {
  font-size: 12.5px; line-height: 1.5; color: #ffd9a8;
  background: rgba(90, 62, 20, .25); border: 1px solid rgba(255, 200, 130, .3);
  border-radius: 10px; padding: 8px 11px; margin: 8px 0 0;
}
/* ---- Discovery nudges (camp) ---- */
.nudge-card {
  display: flex; align-items: center; gap: 10px;
  max-width: 640px; margin: 12px auto 0; padding: 9px 12px;
  background: rgba(16, 24, 40, .6); border: 1px solid var(--border-2);
  border-radius: 12px; font-size: 13px; text-align: start;
}
.nudge-card .nudge-txt { flex: 1; line-height: 1.4; }
.nudge-card .nudge-go { font-size: 12px; padding: 5px 11px; white-space: nowrap; }
.nudge-card .nudge-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 4px;
}
/* Readable (not-yet-lived) sparks */
.spark-slot.readable { opacity: .82; border-style: dashed; }
.spark-slot.readable .spark-unlived {
  display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted);
}
/* Evidence lines — completion screen, realm page and (print) report. */
.evidence-block {
  margin: 10px 0; border-radius: var(--radius-lg); padding: 13px 16px;
  background: linear-gradient(180deg, rgba(24, 34, 30, .5), rgba(15, 24, 22, .6));
  border: 1px solid #2e6b58;
}
.evidence-block h3 { margin: 0 0 8px; font-size: 14px; color: #8fe3c9; }
.evidence-line {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 0; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 13px;
}
.evidence-line:first-of-type { border-top: none; padding-top: 2px; }
.evidence-line .ev-note { color: var(--text); line-height: 1.4; }
.evidence-line .ev-vs { font-size: 11.5px; color: var(--muted); }
.stage .trust-hud .trust-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px;
}
.stage .trust-hud .trust-name {
  font-size: 13px; letter-spacing: .2px;
  /* Ellipsize at every width — long dog names used to clip mid-glyph */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 150px;
}
.stage .trust-hud .trust-pct {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
/* Standalone mood chip for scenes with no trust bar of their own. */
.stage .trust-hud.mood-chip { padding: 8px 12px; }
/* Temperament read. The creature behaves a little differently each visit;
   saying so turns that from "the app is inconsistent" into "it's alive". */
.stage .trust-hud .trust-mood {
  font-size: 11px; color: #94a3b8; margin: 5px 0 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stage .trust-hud .trust-bar {
  width: 100%; height: 6px;
  background: rgba(255,255,255,.10);
  border-radius: 999px; overflow: hidden;
}
.stage .trust-hud .trust-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #e3a06b, #ff6b86);
  transition: width .35s ease;
}
.stage .trust-hud .trust-hint {
  margin-top: 5px;
  font-size: 10px; font-weight: 500;
  opacity: .7;
  letter-spacing: .15px;
  line-height: 1.4;
  /* Wrap to two lines rather than clipping the control hint mid-word
     ("…approaches when invi…"). */
  white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Compact hold-progress pill (top-centre) — the ONLY progress readout on
   ≤600px screens where the hold-bar is display:none. Hidden on desktop. */
.stage .hold-pill {
  /* Sits BELOW the top control row (camera toggle left, quick-bar right) —
     at 375px a top-centred pill slid underneath the camera toggle. */
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  z-index: 7; display: none; align-items: center; gap: 8px;
  background: rgba(10,14,28,.65);
  border: 1px solid rgba(124,209,197,.35);
  border-radius: 999px; padding: 5px 12px;
  font-size: 11px; font-weight: 600; color: var(--text);
  backdrop-filter: blur(6px); pointer-events: none;
}
.stage .hold-pill .hp-bar {
  width: 64px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.12); overflow: hidden; display: inline-block;
}
.stage .hold-pill .hp-fill {
  height: 100%; width: 0%; display: block;
  background: linear-gradient(90deg, var(--accent), var(--ok));
  transition: width .25s ease;
}
.stage .hold-pill.in-zone { border-color: rgba(124,209,197,.85); }
.stage .hold-pill.complete {
  border-color: var(--ok); pointer-events: auto; cursor: pointer;
  background: rgba(16, 44, 38, .82); color: #d6fbef;
  box-shadow: 0 0 0 0 rgba(52,211,153,.5); animation: pillReady 2.4s ease-out 1;
}
.stage .hold-pill.complete:hover { background: rgba(22, 60, 50, .9); }
@keyframes pillReady { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 100% { box-shadow: 0 0 0 16px rgba(52,211,153,0); } }
/* The hold-bar is hidden ≤600px — the pill becomes the progress read.
   (This override must live AFTER the base display:none rule above.) */
@media (max-width: 600px) {
  /* Left-aligned under the camera toggle: centred it slid under the trust
     HUD, top-centred it slid under the toggle. This column is free. */
  .stage .hold-pill { display: flex; left: 12px; transform: none; }
}
/* A viewport-filling stage pushes .step-controls — and with it the hold bar —
   below the fold, so desktop needs the pill for the same reason phones did:
   it is the only progress readout still on screen. */
.stage.theater .hold-pill, .stage:fullscreen .hold-pill,
.stage:-webkit-full-screen .hold-pill { display: flex; }
/* ...except in desktop fullscreen, where the whole .step-controls row (hold
   bar, seconds, timer) is moved INTO the stage: the pill was then the same
   progress bar shown twice, top and bottom. Phones hide the bar, so they
   keep the pill. */
@media (min-width: 601px) {
  .stage:fullscreen .hold-pill, .stage:-webkit-full-screen .hold-pill { display: none; }
}

/* Touch panic-stop: a persistent "ground me" button above the joystick —
   the touch equivalent of Esc. Grounds IN PLACE (the scene survives). */
.stage .ground-btn {
  position: absolute; left: 12px; bottom: 118px; z-index: 9;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(10,14,28,.72);
  border: 1px solid rgba(165,180,252,.55);
  color: var(--text); font: inherit; font-size: 12px; font-weight: 600;
  backdrop-filter: blur(8px); cursor: pointer;
}

/* Pointer-lock crosshair dot — the only aim reference once the OS cursor
   is captured. */
.stage .pl-dot {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: rgba(255,255,255,.55);
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  transform: translate(-50%,-50%);
  z-index: 6; pointer-events: none; display: none;
}

/* Opt-in "Mouse look" pill — sits under the camera toggle. Capturing the
   cursor is now a deliberate click, never a side effect of interacting, so
   the user can't get trapped. */
.stage .ml-toggle {
  position: absolute; top: 66px; left: 14px; z-index: 7;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10, 14, 28, .62); color: var(--text);
  border: 1px solid rgba(255,255,255,.20);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .2px;
  cursor: pointer; backdrop-filter: blur(8px);
  transition: background .15s ease, transform .08s ease;
}
.stage .ml-toggle:hover { background: rgba(20, 28, 48, .85); }
.stage .ml-toggle:active { transform: translateY(1px); }
.stage .perf-hud {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font: 11px/1.6 ui-monospace, monospace; color: #9fd6c8;
  background: rgba(10, 16, 30, .55); padding: 1px 9px; border-radius: 9px;
  pointer-events: none; z-index: 8; white-space: nowrap;
}
/* Persistent release banner shown the WHOLE time the cursor is captured —
   the exit is always visible, so mouse-look never feels like a trap. */
.stage .pl-release {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 8; display: none; align-items: center; gap: 6px;
  background: rgba(10, 14, 28, .78); color: var(--text);
  border: 1px solid rgba(165,180,252,.55);
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .2px;
  backdrop-filter: blur(8px); pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.stage .pl-release b { color: var(--accent); }
.stage .pl-release.visible { display: inline-flex; }

/* Quick mute buttons floating in the top-right of the stage. Always
   visible during exposure so the user can silence voice / sound any
   time without diving into Settings. */
.stage .stage-quick-bar {
  position: absolute; top: 14px; right: 14px; z-index: 8;
  display: flex; gap: 8px;
}
.stage .stage-quick-btn {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 999px;
  background: rgba(10, 14, 28, .65);
  border: 1px solid rgba(124,209,197,.40);
  color: var(--text);
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.stage .stage-quick-btn:hover { transform: scale(1.06); }
@media (max-width: 480px) {
  .stage .stage-quick-bar { top: 10px; right: 10px; gap: 6px; }
  .stage .stage-quick-btn { width: 34px; height: 34px; flex: 0 0 34px; font-size: 14px; }
}
.stage .stage-quick-btn:hover { background: rgba(124,209,197,.18); }
.stage .stage-quick-btn.muted { color: #ff8a8a; border-color: rgba(255,138,138,.45); }
.stage .stage-quick-btn.active {
  background: rgba(124,209,197,.30);
  border-color: rgba(124,209,197,.85);
  color: #d4f8f0;
}
/* Interaction prompt that appears when something is reachable */
.stage .reach-hint {
  position: absolute; left: 50%; bottom: 24px; z-index: 6;
  transform: translateX(-50%);
  background: rgba(124,209,197,.18); color: #fff;
  border: 1px solid rgba(124,209,197,.55);
  padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 20px rgba(124,209,197,.25);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  white-space: nowrap;
}

/* Header layout left/right */
.brand-left { display: flex; align-items: center; gap: 8px; }

/* Side menu drawer (slide-out from the left) */
.menu-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(320px, 86vw);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border-right: 1px solid var(--border-2);
  box-shadow: 10px 0 40px rgba(0,0,0,.4);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform .28s ease;
  padding: 20px 18px;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.menu-drawer.open { transform: translateX(0); }
.menu-drawer .close-btn {
  background: transparent; color: var(--muted);
  border: none; font-size: 20px; cursor: pointer; padding: 4px 8px;
  align-self: flex-end;
  margin-bottom: 8px;
}
.menu-character {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}
.menu-avatar {
  width: 56px; height: 64px;
  background: linear-gradient(180deg, #1a2547 0%, #15192c 100%);
  border-radius: 10px; padding: 4px;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
body.light-mode .menu-avatar { background: linear-gradient(180deg, #e8eef7 0%, #cdd9eb 100%); }
.menu-character-text strong { display: block; font-size: 15px; }
.menu-character-text .small { font-size: 12px; color: var(--muted); }
.menu-list { list-style: none; padding: 0; margin: 0 0 4px; }
.menu-list li { padding: 0; }
.menu-list button {
  width: 100%; text-align: start;
  background: transparent; color: var(--text);
  border: 1px solid transparent; border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.menu-list button:hover { background: var(--panel-2); border-color: var(--border); }
.menu-divider { height: 1px; background: var(--border); margin: 14px 0; }
.menu-footer {
  margin: 0; padding: 0 4px;
  font-size: 11px; color: var(--muted); letter-spacing: .3px;
}
.menu-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 99; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.menu-backdrop.show { opacity: 1; pointer-events: auto; }

/* Settings drawer */
.settings-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 92vw);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border-left: 1px solid var(--border-2);
  box-shadow: -10px 0 40px rgba(0,0,0,.4);
  z-index: 100;
  transform: translateX(100%);
  transition: transform .3s ease;
  padding: 20px 22px;
  overflow-y: auto;
}
.settings-drawer.open { transform: translateX(0); }
.settings-drawer h3 { margin-top: 0; }
.settings-drawer .row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  gap: 14px;
}
.settings-section {
  font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent);
  margin: 18px 0 6px;
  font-weight: 700;
}
.settings-drawer .row label { font-weight: 500; }
.settings-drawer .row .small { font-size: 12px; color: var(--muted); }
.settings-drawer .close-btn {
  background: transparent; color: var(--muted);
  border: none; font-size: 20px; cursor: pointer; padding: 4px 8px;
  float: right;
}
.settings-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 99; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.settings-backdrop.show { opacity: 1; pointer-events: auto; }
.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Range sliders had outline:none with nothing in its place. */
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.toggle {
  position: relative; width: 40px; height: 22px;
  background: #2b3753; border-radius: 999px;
  cursor: pointer; transition: background .2s;
  flex-shrink: 0;
}
.toggle.on { background: var(--accent); }
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; background: #fff;
  border-radius: 50%; transition: transform .2s;
}
.toggle.on::after { transform: translateX(18px); }
.settings-drawer input[type=range] {
  flex: 1; max-width: 140px;
}

/* Home page hero redesign */
.hero {
  position: relative;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 44px) clamp(24px, 4vw, 40px);
  background: linear-gradient(135deg, #1a2547 0%, #0f1724 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 110% -20%, rgba(124,209,197,.18), transparent 50%),
              radial-gradient(600px 300px at -10% 120%, rgba(165,180,252,.12), transparent 50%);
  pointer-events: none;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgba(124,209,197,.12);
  border: 1px solid rgba(124,209,197,.30);
  color: var(--accent); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: var(--space-4);
}
/* Hero stays dark in both themes */
.hero { color: #e8eef7; }
.hero h1.huge {
  font-size: clamp(28px, 5vw, var(--text-4xl));
  line-height: 1.10;
  margin: 0 0 var(--space-3);
  letter-spacing: -.5px; max-width: 18ch;
  color: #fff;
  font-weight: 700;
}
.hero p.lead {
  font-size: clamp(15px, 2vw, var(--text-md));
  max-width: 56ch; margin: 0 0 var(--space-5);
  color: #cbd5e1;
}
.hero .floaters {
  position: absolute; top: 0; right: 0; width: 320px; height: 100%;
  pointer-events: none; opacity: .55;
}
.hero .floater {
  position: absolute;
  width: 110px; height: 110px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--border-2), #1a2547);
  border: 1px solid #2f3e62;
  display: flex; align-items: center; justify-content: center;
  animation: floaty 6s ease-in-out infinite;
}
.hero .floater:nth-child(1) { top: 20px; right: 20px; animation-delay: 0s; }
.hero .floater:nth-child(2) { top: 100px; right: 130px; animation-delay: -1.5s; }
.hero .floater:nth-child(3) { top: 180px; right: 40px; animation-delay: -3s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-2);
}
.pillar {
  padding: var(--space-5);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pillar h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.pillar p { margin: 0; font-size: var(--text-sm); color: var(--muted); }

/* "Coming soon" callout for the future wellness expansion */
.coming-soon { padding: var(--space-5) var(--space-6); }
.coming-soon .cs-row {
  display: flex; align-items: center; gap: var(--space-5);
}
.coming-soon .cs-text { flex: 1; min-width: 0; }
.coming-soon .cs-eyebrow {
  display: inline-block;
  padding: 2px 10px; border-radius: var(--radius-pill);
  background: rgba(165,180,252,.14);
  color: var(--accent-2);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.coming-soon h3 {
  font-size: var(--text-lg); margin: 0 0 var(--space-2);
}
.coming-soon p {
  font-size: var(--text-sm); margin: 0; color: var(--muted);
}
.coming-soon .cs-icons {
  display: flex; gap: var(--space-2);
  font-size: 28px; opacity: .55; flex-shrink: 0;
}

@media (max-width: 700px) {
  .pillars { grid-template-columns: 1fr; gap: var(--space-3); }
  .hero { padding: var(--space-6) var(--space-5) var(--space-5); }
  .hero .floaters { display: none; }
  .coming-soon .cs-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .coming-soon .cs-icons { font-size: 24px; }
}

/* Bigger phobia selection cards */
.grid.big {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 22px;
}
.grid.big .card {
  padding: 22px; min-height: 180px;
  background: linear-gradient(150deg, var(--panel-2) 0%, var(--panel-3) 100%);
}
.grid.big .card .icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, rgba(124,209,197,.14), rgba(165,180,252,.06));
  border: 1px solid rgba(124,209,197,.18);
}
.grid.big .card h3 { font-size: 19px; margin-bottom: 6px; }
.grid.big .card .meta {
  display: flex; gap: 10px; align-items: center;
  margin-top: 14px; font-size: 12px; color: var(--muted);
}
.grid.big .card .meta .dotsep { opacity: .4; }
.grid.big .card:hover { transform: translateY(-3px); border-color: var(--accent); background: linear-gradient(150deg, #1c2745 0%, #181d33 100%); }

/* ===========================================================
   UX motion pass — page transitions, inviting phobia cards,
   richer profile, and tactile controls. All disabled under
   prefers-reduced-motion (see bottom of this block).
   =========================================================== */
@keyframes view-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#view { animation: view-enter .34s cubic-bezier(.2,.7,.3,1); }

@keyframes card-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Phobia select cards: stagger-in, livelier hover, a shine sweep, and a
   "Begin / Continue" call-to-action that invites the click. */
.grid.big .card {
  opacity: 0;
  animation: card-rise .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.grid.big .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(124,209,197,.12) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.grid.big .card:hover::after { transform: translateX(130%); }
.grid.big .card:hover { transform: translateY(-4px) scale(1.012); box-shadow: 0 16px 42px rgba(124,209,197,.16); }
.grid.big .card:active { transform: translateY(-1px) scale(.997); }
.grid.big .card .icon { transition: transform .25s cubic-bezier(.34,1.4,.64,1), background .25s ease, border-color .25s ease; }
.grid.big .card:hover .icon { transform: translateY(-2px) scale(1.08) rotate(-3deg); border-color: rgba(124,209,197,.5); background: linear-gradient(135deg, rgba(124,209,197,.30), rgba(165,180,252,.12)); }
.grid.big .card:hover .icon svg { filter: drop-shadow(0 0 7px rgba(124,209,197,.55)); }
.grid.big .card .progress-bar > div { transition: width .7s cubic-bezier(.2,.7,.3,1); }
.card-go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--accent);
  opacity: 0; transform: translateY(5px);
  transition: opacity .22s ease, transform .22s ease;
}
.grid.big .card:hover .card-go, .grid.big .card:focus-visible .card-go { opacity: 1; transform: none; }
.card-go .arr { transition: transform .22s ease; }
.grid.big .card:hover .card-go .arr { transform: translateX(4px); }

/* Profile cards: stagger-in + a soft lift shadow on hover. */
.profiles-grid .profile-card {
  opacity: 0;
  animation: card-rise .45s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.profile-card { transition: border-color .15s, transform .15s, box-shadow .2s ease; }
.profile-card:hover { box-shadow: 0 12px 32px rgba(124,209,197,.14); }

/* Milestone trophy tiles: stagger-in; earned ones get a soft lift on hover. */
.milestones-grid .milestone {
  opacity: 0;
  animation: card-rise .42s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.milestones-grid .milestone.earned:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(124,209,197,.14); }

/* Profile "your journey" stat strip. */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin: 14px 0 22px;
}
.stat-tile {
  background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel-3) 100%);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; text-align: start;
  opacity: 0; animation: card-rise .45s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.stat-tile .stat-num {
  display: block; font-size: 26px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-tile .stat-lbl { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* Tactile controls — press feedback on buttons + creator swatches/chips. */
.btn-primary:active, .btn-ghost:active, .btn-warn:active { transform: translateY(0) scale(.98); }
.swatch:active { transform: scale(.88); }
/* Satisfying pop when a swatch / coach-voice chip is chosen (the JS toggles
   .selected, so this replays on each pick). */
@keyframes swatch-pop { 0% { transform: scale(.92); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
.swatch.selected, .preset-btn.selected { animation: swatch-pop .26s cubic-bezier(.34,1.56,.64,1); }

/* Quick-start preset looks (character creator) — mini-avatar chips. */
.starter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.starter-preset {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 8px 7px; border-radius: 12px;
  background: var(--panel-3); border: 1.5px solid var(--border);
  cursor: pointer; color: var(--muted);
  transition: transform .12s cubic-bezier(.34,1.4,.64,1), border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.starter-preset:hover { transform: translateY(-2px); border-color: rgba(124,209,197,.55); color: var(--text); }
.starter-preset:active { transform: scale(.95); }
.starter-preset.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,209,197,.22); color: var(--text); }
.starter-av {
  width: 46px; height: 46px; border-radius: 9px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: linear-gradient(180deg, #1a2547 0%, var(--panel-3) 100%);
}
.starter-av svg { width: 46px; height: 46px; }
.starter-lbl { font-size: 11px; font-weight: 600; letter-spacing: .2px; }

@media (prefers-reduced-motion: reduce) {
  #view, .grid.big .card, .profiles-grid .profile-card, .stat-tile,
  .milestones-grid .milestone, .swatch.selected, .preset-btn.selected {
    animation: none !important; opacity: 1 !important;
  }
  .grid.big .card::after { display: none !important; }
  .card-go { opacity: 1; transform: none; }
}

/* Climbing-ladder visual on the ladder page */
.climb-ladder {
  margin: 22px 0;
  background: linear-gradient(180deg, #16203a, #0e1525);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}
.climb-rung {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--space-4); align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius);
  margin: var(--space-2) 0;
  border: 1px solid transparent;
  background: var(--panel-3);
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.climb-rung:hover { background: rgba(124,209,197,.06); border-color: rgba(124,209,197,.25); }
.climb-rung.done {
  background: rgba(52,211,153,.06);
  border-color: rgba(52,211,153,.25);
}
.climb-rung.current {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(124,209,197,.08) 0%, rgba(165,180,252,.05) 100%);
  box-shadow: 0 4px 18px rgba(124,209,197,.10);
}
.climb-rung.locked { opacity: .45; }
.climb-rung .marker {
  position: relative; height: 56px; width: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--border-2); color: var(--text);
  font-weight: 700; font-size: var(--text-lg);
  transition: background .2s ease, box-shadow .2s ease;
}
.climb-rung.done .marker {
  background: linear-gradient(135deg, var(--ok), #6dcfa6);
  color: #0b1020;
  box-shadow: 0 4px 12px rgba(52,211,153,.30);
}
.climb-rung.current .marker {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b1020;
  box-shadow: 0 0 0 6px rgba(124,209,197,.18), 0 4px 18px rgba(124,209,197,.30);
  animation: currentPulse 2.4s ease-in-out infinite;
}
@keyframes currentPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(124,209,197,.18), 0 4px 18px rgba(124,209,197,.30); }
  50%      { box-shadow: 0 0 0 10px rgba(124,209,197,.10), 0 6px 22px rgba(124,209,197,.40); }
}
.climb-rung .info strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
}
.climb-rung .info .desc {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  line-height: 1.45;
}
.climb-rung .info .stats {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-2);
  letter-spacing: .2px;
}
.climb-rung.done .info .stats::after {
  content: " · ✓ completed";
  color: var(--ok);
  font-weight: 600;
}
.climb-rung .intensity-bars {
  display: flex; gap: 3px;
  margin-top: var(--space-1);
}
.climb-rung .intensity-bars i {
  width: 6px; height: 14px; border-radius: 2px;
  background: #2b3753; display: inline-block;
}
.climb-rung .intensity-bars i.on { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.climb-line {
  width: 2px; height: 18px; background: var(--border);
  margin: -2px 0 -2px 35px;
}
.climb-rung.done + .climb-line {
  background: linear-gradient(180deg, var(--ok), var(--border));
}
@media (max-width: 600px) {
  .climb-rung {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .climb-rung .marker { width: 44px; height: 44px; font-size: var(--text-base); }
  .climb-rung > div:last-child {
    grid-column: 1 / -1;
  }
  .climb-rung > div:last-child button { width: 100%; }
}

/* Character badge in header */
.char-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(124,209,197,.08);
  color: var(--text);
  border: 1px solid rgba(124,209,197,.25);
  padding: 4px 10px 4px 4px; border-radius: 999px;
  cursor: pointer; font-size: 13px;
  transition: border-color .15s, background .15s;
}
.char-badge:hover { border-color: var(--accent); background: rgba(124,209,197,.16); }
.char-badge-avatar { display: inline-flex; }
.char-badge-avatar svg { display: block; border-radius: 50%; background: #1a2238; }
.char-badge-name { font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-badge-count {
  font-size: 11px; font-weight: 700; color: #0b1020;
  background: var(--accent); padding: 1px 7px; border-radius: 999px;
}
.char-badge-streak {
  font-size: 11px; font-weight: 700; color: #fde68a;
  background: rgba(245,158,11,.15); padding: 2px 7px; border-radius: 999px;
  border: 1px solid rgba(245,158,11,.4);
}
/* Courage points badge — gamification XP marker */
.courage-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: var(--space-1) var(--space-3);
  background: linear-gradient(135deg, rgba(165,180,252,.18), rgba(124,209,197,.18));
  border: 1px solid rgba(165,180,252,.45);
  border-radius: var(--radius-pill);
  color: #f5e89a;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .3px;
  cursor: default;
  user-select: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.courage-badge.pop {
  animation: couragePop .6s cubic-bezier(.22, 1.4, .4, 1);
}
@keyframes couragePop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.20); box-shadow: 0 0 18px rgba(245,232,154,.55); }
  100% { transform: scale(1); }
}
@media (max-width: 600px) {
  .courage-badge { font-size: 11px; padding: 3px 9px; }
}

/* Profile picker */
.profiles-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 18px 0;
}
.profile-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel-3) 100%);
  border: 1.5px solid var(--border); border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.profile-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.profile-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,209,197,.18); }
.profile-avatar {
  width: 70px; height: 80px;
  background: linear-gradient(180deg, #1a2547 0%, var(--panel-3) 100%);
  border-radius: 10px; padding: 4px;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.profile-text { display: flex; flex-direction: column; gap: 2px; }
.profile-text strong { font-size: 16px; }
.profile-badge {
  display: inline-block;
  font-size: 10px; letter-spacing: .5px; text-transform: uppercase; font-weight: 700;
  background: var(--accent); color: #0b1020;
  padding: 1px 7px; border-radius: 999px;
  width: fit-content; margin-top: 2px;
}
.profile-actions { display: flex; flex-direction: column; gap: 4px; }
.profile-actions button { padding: 5px 10px; font-size: 11px; }

/* Session journal on complete page */
.journal-row {
  margin: 16px 0 8px;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.journal-row label { font-size: 13px; font-weight: 600; }
.journal-row textarea {
  width: 100%; padding: 10px 12px;
  background: #0e1525; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 13px; resize: vertical;
  line-height: 1.55;
}
.journal-row textarea:focus { outline: 2px solid var(--accent); }
.journal-row .actions-inline { display: flex; align-items: center; gap: 8px; }

/* ============================================================
   Character creator — the heart of the app. Hero preview frame on
   the left (sticky on desktop), organised numbered sections on the
   right. Standardised spacing, big touch targets, mobile-first.
   ============================================================ */
.creator { padding: 0; }
.creator-intro {
  margin-bottom: var(--space-6);
  text-align: center;
  max-width: 56ch;
  margin-left: auto; margin-right: auto;
}
.creator-intro h2 {
  font-size: clamp(24px, 4vw, var(--text-3xl));
  margin: 0 0 var(--space-2);
  letter-spacing: -.4px;
  font-weight: 700;
}
.creator-intro .lead-sm {
  color: var(--muted);
  font-size: var(--text-base);
  margin: 0;
  line-height: 1.6;
}
.creator-grid {
  display: grid;
  grid-template-columns: minmax(290px, 360px) 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  align-items: start;
}
.creator-preview {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  position: sticky; top: var(--space-4);
}
.avatar-stage {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1.1;
  cursor: grab;
  background:
    radial-gradient(60% 50% at 50% 35%, rgba(124,209,197,.18) 0%, transparent 70%),
    linear-gradient(180deg, #1d2a4a 0%, #14182a 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.avatar-stage::before {
  /* Soft floor glow */
  content: ""; position: absolute;
  left: 10%; right: 10%; bottom: 6%;
  height: 8px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(124,209,197,.4), transparent);
  filter: blur(6px);
}
.avatar-large {
  width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative; z-index: 1;
}
.avatar-large svg, .avatar-large canvas {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.avatar-hint {
  margin-top: 10px; font-size: 11.5px; color: var(--muted);
  letter-spacing: .2px; opacity: .85;
}
/* The dice button on the preview — quick "shuffle appearance" */
.preview-randomise {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 36px; height: 36px;
  background: rgba(10, 14, 28, .55);
  border: 1px solid rgba(124,209,197,.30);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-size: 16px; line-height: 1; padding: 0;
  cursor: pointer; backdrop-filter: blur(8px);
  transition: transform .15s ease, background .15s ease;
  display: flex; align-items: center; justify-content: center;
  min-height: 36px;       /* override the 44px global for compact UI */
}
.preview-randomise:hover {
  background: rgba(124,209,197,.18);
  transform: rotate(20deg) scale(1.05);
}
.char-name-input {
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font: inherit; font-size: var(--text-md);
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-md);
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.char-name-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,209,197,.18);
}
.creator-section-label {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
}
.char-preset-row {
  display: flex; gap: var(--space-2);
  width: 100%;
  flex-wrap: wrap; justify-content: center;
}
.preset-btn {
  flex: 1 0 auto;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font: inherit; font-size: var(--text-xs); font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  min-height: 36px;
}
.preset-btn:hover { color: var(--text); border-color: var(--accent); }
.preset-btn.selected {
  background: rgba(124,209,197,.14);
  color: var(--accent);
  border-color: var(--accent);
}

/* Form sections */
.creator-form { display: flex; flex-direction: column; gap: var(--space-5); }
.creator-section {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5) var(--space-3);
  transition: border-color .2s ease;
}
.creator-section:focus-within { border-color: var(--accent); }
.creator-section-head {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.creator-section-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b1020;
  font-size: var(--text-sm); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.creator-section-head h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
}
.creator-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border);
}
.creator-row:first-of-type { border-top: none; padding-top: 0; }
.creator-row label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.swatches { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.swatch {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  padding: 0;
  background: var(--panel-3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
  min-height: 36px;
}
.swatch:hover { transform: scale(1.10); }
.swatch.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,209,197,.30), inset 0 1px 2px rgba(0,0,0,.25);
}
.swatches.text .swatch {
  width: auto; padding: var(--space-2) var(--space-3); height: auto;
  border-radius: var(--radius-pill);
  background: var(--panel-3); border: 1px solid var(--border); color: var(--text);
  font-size: var(--text-xs); font-weight: 600;
  box-shadow: none;
}
.swatches.text .swatch.selected {
  background: rgba(124,209,197,.14);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.swatches.text .swatch span { font-weight: 600; }

.creator-phobias {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Validation nudge: shown when "Save & begin" is pressed with no fear
   picked. Replaces a blocking OS alert() — same message, app-styled,
   plus a brief border pulse so the eye lands on the right section. */
.creator-phobias .phobia-note {
  color: var(--warn, #f0b965);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}
.creator-phobias.nudge {
  animation: phobia-nudge 1.2s ease-out 1;
}
@keyframes phobia-nudge {
  0%   { border-color: var(--warn, #f0b965); box-shadow: 0 0 0 3px rgba(240, 185, 101, 0.25); }
  100% { border-color: var(--border); box-shadow: 0 0 0 0 rgba(240, 185, 101, 0); }
}
.creator-phobias .creator-section-head { margin-bottom: var(--space-2); }
.creator-phobias .lead-sm {
  color: var(--muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}
.phobia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.phobia-pick { cursor: pointer; }
.phobia-pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--panel-3);
  border: 1.5px solid var(--border);
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
  min-height: 56px;
}
.phobia-pick:hover .pick-card {
  border-color: rgba(124,209,197,.55);
  transform: translateY(-1px);
}
.phobia-pick input:checked + .pick-card {
  border-color: var(--accent);
  background: rgba(124,209,197,.10);
  box-shadow: 0 0 0 2px rgba(124,209,197,.22);
}
.pick-icon {
  width: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pick-icon svg { width: 28px; height: 28px; }
.pick-text strong {
  display: block; font-size: var(--text-base); font-weight: 600;
}
.pick-text em {
  font-size: var(--text-xs);
  color: var(--accent);
  font-style: normal;
  letter-spacing: .4px; text-transform: uppercase;
}

.creator-actions {
  margin-top: var(--space-6);
  display: flex; gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.creator-actions .btn-primary,
.creator-actions .btn-ghost {
  flex: 0 1 auto;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

@media (max-width: 760px) {
  .creator-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .creator-preview {
    position: static;
    max-width: 320px;
    margin-left: auto; margin-right: auto;
  }
  .creator-row { grid-template-columns: 1fr; gap: var(--space-2); align-items: flex-start; }
  .creator-row label { font-size: var(--text-xs); }
  .creator-section { padding: var(--space-4) var(--space-4) var(--space-2); }
  .creator-actions { justify-content: stretch; }
  .creator-actions button { flex: 1 1 0; }
}
@media (max-width: 420px) {
  .creator-section-num { width: 24px; height: 24px; font-size: var(--text-xs); }
  .creator-section-head h3 { font-size: var(--text-base); }
  .swatch { width: 32px; height: 32px; min-height: 32px; }
}
.pick-primary {
  display: inline-block; margin-top: 4px;
  font-size: 10px; letter-spacing: .6px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  background: var(--accent); color: #0b1020;
}
.pick-card { position: relative; }
.pick-check {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 5px;
  background: #0b1020; border: 1.5px solid #2b3753;
}
.phobia-pick input:checked + .pick-card .pick-check {
  background: var(--accent); border-color: var(--accent);
}
.phobia-pick input:checked + .pick-card .pick-check::after {
  content: "✓"; color: #0b1020; font-weight: 800;
  position: absolute; left: 3px; top: -2px; font-size: 14px;
}

/* Custom phobia ladder editor */
.custom-form { margin-top: 14px; }
.custom-form > label {
  display: block; margin-bottom: 12px; font-weight: 600; font-size: 13px;
  color: var(--muted); letter-spacing: .3px;
}
.custom-form > label .small { font-weight: 400; text-transform: none; }
.custom-form input[type="text"] {
  display: block; width: 100%; margin-top: 4px;
  padding: 9px 12px; font: inherit; font-size: 14px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  color: var(--text); border-radius: 8px;
}
.custom-form input[type="text"]:focus { outline: 2px solid var(--accent); }
.rung-editors { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.rung-editor {
  display: grid; grid-template-columns: 32px 1fr 2fr; gap: 8px; align-items: center;
  padding: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px;
}
.rung-num {
  width: 28px; height: 28px;
  background: var(--accent); color: var(--bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.rung-editor input { margin-top: 0 !important; }
.custom-list {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.custom-list li {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px;
}
@media (max-width: 600px) {
  .rung-editor { grid-template-columns: 28px 1fr; gap: 6px; }
  .rung-editor input[data-field="desc"] { grid-column: 2 / 3; }
}

/* Focus rings — applied to all interactive elements for keyboard a11y */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.swatch:focus-visible, .card:focus-visible, .show-card:focus-visible,
.climb-rung:focus-visible, .profile-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Skip link (visible only on focus) */
/* Parked ABOVE the page, not at left: -9999px — in a right-to-left
   document overflow on the left is scrollable, and every Persian page
   could be swiped 9999 px sideways into nothing. Overflow above the top
   never scrolls, in either direction. */
.skip-link {
  position: absolute; top: 16px; inset-inline-start: 16px;
  transform: translateY(calc(-100% - 40px));
  background: var(--accent); color: var(--bg);
  padding: 8px 14px; border-radius: 6px;
  font-weight: 600; z-index: 1000;
}
.skip-link:focus { transform: none; }

/* Insights page */
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 14px 0 18px;
}
.stat {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
  text-align: center;
}
.stat-num { font-size: 26px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: 11px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; margin-top: 4px; }
.insights-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.insight-card {
  background: linear-gradient(180deg, #16203a, #0e1525);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 16px 18px;
}
.insight-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.insight-icon {
  width: 44px; height: 44px;
  background: rgba(124,209,197,.10);
  border: 1px solid rgba(124,209,197,.18);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.insight-icon svg { width: 26px; height: 26px; }
.insight-card h3 { margin: 0; font-size: 16px; }
.insight-card .small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.insight-chart {
  width: 100%; height: 90px; display: block;
  background: #0c1322;
  border-radius: 8px;
  margin: 6px 0 4px;
}
.insight-legend {
  display: flex; gap: 12px; font-size: 11px; color: var(--muted);
  align-items: center;
  margin-top: 4px;
}
.dotmark {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}

/* "Speak" button pressed state */
.cmd-btn.pressed {
  background: rgba(124,209,197,.18);
  border-color: var(--accent);
  transform: translateY(1px);
}

/* Phobia information panel */
.phobia-info {
  margin: 14px 0 6px; padding: 0;
  background: linear-gradient(180deg, #161e34, #131a2c);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  overflow: hidden;
}
.phobia-info > summary {
  list-style: none; cursor: pointer;
  padding: 14px 18px;
  color: var(--accent); font-weight: 600; font-size: 13.5px;
  display: flex; align-items: center; gap: 8px;
  user-select: none;
}
.phobia-info > summary::-webkit-details-marker { display: none; }
.phobia-info > summary::before {
  content: "▸"; transition: transform .2s; font-size: 11px;
}
.phobia-info[open] > summary::before { transform: rotate(90deg); }
.info-body { padding: 0 18px 18px; }
.info-summary {
  color: #cbd5e1; font-size: 14.5px; line-height: 1.55;
  margin: 0 0 14px;
}
.info-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 14px;
}
.info-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.info-card h4 {
  margin: 0 0 8px; font-size: 13px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--accent);
}
.info-card p { margin: 0 0 8px; font-size: 13px; color: #cbd5e1; }
.info-card ul { margin: 0 0 6px 18px; padding: 0; }
.info-card ul li { font-size: 13px; color: #cbd5e1; line-height: 1.55; margin-bottom: 3px; }
.info-sub {
  font-size: 11px !important; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted) !important;
  margin: 8px 0 4px !important;
}
.info-prevalence {
  font-size: 12px !important; color: var(--muted) !important;
  font-style: italic; margin-top: 8px !important;
}
.info-warning {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.35);
  color: #fde68a;
  padding: 10px 14px; border-radius: 8px;
  font-size: 13px; line-height: 1.55;
}
.info-warning strong { color: #fff; }

/* Phobia tabs (when user has multiple) */
.phobia-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.phobia-tab {
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.phobia-tab:hover { color: var(--text); border-color: #3a4870; }
.phobia-tab.active {
  background: rgba(124,209,197,.12); color: var(--accent);
  border-color: var(--accent);
}

/* Character creation callout on the home page */
.character-callout {
  background: linear-gradient(135deg, #1a2547 0%, var(--panel-3) 100%);
  border-color: rgba(124,209,197,.30);
}
.character-callout-row {
  display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center;
}
.character-callout-text h3 { margin: 0 0 6px; color: var(--accent); font-size: 16px; }
.character-callout-text p { margin: 0 0 6px; color: #cbd5e1; }
.character-callout-samples {
  display: flex; gap: 8px;
}
.sample-avatar {
  background: linear-gradient(180deg, #1a2547 0%, var(--panel-3) 100%);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 6px;
  display: flex; align-items: flex-end; justify-content: center;
  width: 64px; height: 70px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s;
}
.sample-avatar:hover { transform: translateY(-3px); border-color: var(--accent); }
@media (max-width: 700px) {
  .character-callout-row { grid-template-columns: 1fr; }
  .character-callout-samples { justify-content: flex-start; flex-wrap: wrap; }
}

/* Phobia showcase grid (home page) */
.show-grid {
  display: grid; gap: var(--space-4);
  margin-top: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.show-card {
  background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel-3) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0; cursor: pointer; overflow: hidden;
  transition: transform .15s, border-color .15s, background .15s, box-shadow .2s;
  display: flex; flex-direction: column;
  position: relative;
}
.show-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(124,209,197,.15);
}
.show-thumb {
  width: 100%;
  aspect-ratio: 5 / 3;
  background: var(--panel-3);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.show-thumb svg {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Subtle gradient overlay at the bottom of the thumb so the title plate
   (which sits below) reads cleanly even on bright illustrations. */
.show-thumb::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  pointer-events: none;
}
.show-card > .show-icon, .show-card > .show-label, .show-card > .show-clinical,
.show-card > .show-blurb, .show-card > .show-prevalence {
  margin-left: var(--space-4); margin-right: var(--space-4);
}
.show-card > .show-icon {
  margin-top: -26px;
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(124,209,197,.22), rgba(165,180,252,.10));
  border: 1px solid rgba(124,209,197,.35);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.30);
}
.show-card > .show-label { margin-top: var(--space-3); }
.show-card > .show-blurb { margin-bottom: var(--space-4); flex: 1; }
.show-label {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.show-clinical {
  font-size: var(--text-xs);
  letter-spacing: .6px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
  font-weight: 600;
}
.show-blurb {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: #cbd5e1;
  line-height: 1.55;
}
.show-prevalence {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
  padding-bottom: var(--space-3);
  font-style: italic;
}
@media (max-width: 600px) {
  .show-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* Step-by-step journey diagram */
.journey {
  display: grid; gap: 10px; margin: 14px 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.journey-step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 12px;
}
.journey-num {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--accent); color: #0b1020;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.journey-text { display: flex; flex-direction: column; gap: 4px; }
.journey-text strong { font-size: 14px; }
.journey-text span { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Prediction-vs-actual block on the complete page */
.prediction-card {
  margin: 14px 0; padding: 16px 18px;
  background: linear-gradient(180deg, #16203a, #0e1525);
  border: 1px solid var(--border-2);
  border-radius: 12px;
}
.prediction-good { border-color: rgba(52,211,153,.35); background: linear-gradient(180deg, #15293a, #0e1525); }
.prediction-warn { border-color: rgba(245,158,11,.35); }
.prediction-meters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.meter-row { display: grid; grid-template-columns: 80px 1fr 56px; gap: 12px; align-items: center; }
.meter-label { font-size: 12px; color: var(--muted); }
.meter-track {
  height: 8px; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width .6s cubic-bezier(.2,.9,.2,1);
}
.meter-value { font-size: 13px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.prediction-lesson { margin: 0; font-size: 14px; color: #cbd5e1; line-height: 1.55; }
.prediction-good .prediction-lesson strong { color: var(--ok); }
/* The feared-outcome prediction on the predict screen (dogs). */
.expect-block {
  margin: 16px 0 4px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(30, 36, 66, .7), rgba(18, 24, 44, .7));
  border: 1px solid rgba(165,180,252,.28);
}
.expect-q { font-weight: 700; font-size: 15px; }
.expect-sub { font-size: 12.8px; color: var(--muted); margin: 3px 0 10px; line-height: 1.45; }
.expect-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.expect-chip {
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(22, 30, 54, .8);
  color: var(--text); font-size: 13px; font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.expect-chip:hover { border-color: #a5b4fc; }
.expect-chip.on { border-color: #a5b4fc; background: rgba(90, 105, 214, .35); box-shadow: 0 0 0 1px rgba(165,180,252,.35) inset; }
.expect-chip.expect-none { color: var(--muted); font-weight: 500; }
.expect-belief { margin-top: 12px; }
/* Reality check + the trial's alarm wave on the Complete screen. */
.reality-card, .wave-card {
  margin: 14px 0; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, #17203c, #0f1628);
  border: 1px solid rgba(165,180,252,.30);
}
.reality-card.rc-no { border-color: rgba(52,211,153,.42); background: linear-gradient(180deg, #15293a, #0e1525); }
.reality-card .bridge-invite-kicker { color: #c7d0ff; }
.reality-card.rc-no .bridge-invite-kicker { color: #8fe3c9; }
.rc-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; margin-top: 8px; font-size: 14px; line-height: 1.5; }
.rc-lab { color: var(--muted); font-size: 12.5px; padding-top: 2px; }
.rc-bel { color: #9faae7; font-size: 12.5px; font-weight: 700; margin-left: 4px; }
.rc-verdict { margin: 12px 0 0; font-weight: 700; font-size: 15px; color: var(--text); }
.reality-card.rc-no .rc-verdict { color: #a9e8d2; }
.rc-after { margin-top: 12px; }
.rc-after label { font-size: 13.5px; }
#beliefDelta b { color: var(--ok); }
.wave-card .wave-svg { display: block; width: 100%; height: auto; max-height: 150px; margin: 8px 0 4px; }
.wave-note { margin: 4px 0 0; font-size: 14px; color: #dbe3f0; line-height: 1.5; }
.wave-note b { color: var(--text); }
.wave-extra { margin: 6px 0 0; color: var(--muted); line-height: 1.5; }
@media (max-width: 560px) { .rc-row { grid-template-columns: 1fr; gap: 2px; } }
/* In-scene guided breath (Pause & breathe inside a trial). */
.stage .stage-breath {
  position: absolute; left: 50%; top: 50%; z-index: 11;
  transform: translate(-50%, -50%) scale(.96); opacity: 0;
  width: 250px; padding: 18px 18px 14px; border-radius: 20px; text-align: center;
  background: rgba(10, 14, 28, .62); border: 1px solid rgba(124,209,197,.35);
  backdrop-filter: blur(6px); color: var(--text);
  transition: opacity .35s ease, transform .35s ease;
}
.stage .stage-breath.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.stage .stage-breath.gone { opacity: 0; }
.sb-ring {
  width: 112px; height: 112px; margin: 2px auto 12px; border-radius: 50%;
  border: 2px solid rgba(124,209,197,.45); display: flex; align-items: center; justify-content: center;
}
.sb-core {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(165,240,225,.9), rgba(124,209,197,.35));
  transform: scale(1); transition: transform var(--sb-s, 4s) ease-in-out;
}
.sb-ring.in .sb-core { transform: scale(2.2); }
.sb-ring.out .sb-core { transform: scale(1); }
.sb-text { font-size: 15px; font-weight: 600; min-height: 22px; }
.sb-count { font-size: 12px; color: var(--muted); margin: 4px 0 10px; min-height: 16px; }
.sb-close { font-size: 12.5px; padding: 6px 12px; }
/* ---- Realm page: the way out (treatment path) ---- */
.treat-path { margin: 16px 0 6px; }
.tp-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; counter-reset: none; }
.tp-step button {
  width: 100%; height: 100%; text-align: start; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 11px; border-radius: 12px;
  background: rgba(20, 28, 50, .7); border: 1px solid var(--border-2); color: var(--text);
  transition: border-color .15s ease, transform .15s ease;
}
.tp-step button:hover { border-color: var(--accent); transform: translateY(-1px); }
.tp-n {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; background: rgba(255,255,255,.08); color: var(--muted);
}
.tp-t { font-weight: 700; font-size: 13.5px; }
.tp-s { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.tp-step.done button { border-color: rgba(52,211,153,.4); background: rgba(18, 40, 38, .55); }
.tp-step.done .tp-n { background: rgba(52,211,153,.2); color: var(--ok); }
.tp-step.now button { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(124,209,197,.25) inset, 0 6px 20px rgba(124,209,197,.12); }
.tp-step.now .tp-n { background: var(--accent); color: #0b1020; }
.tp-step.later button { opacity: .72; }
@media (max-width: 720px) {
  .tp-steps { grid-template-columns: 1fr; gap: 6px; }
  .tp-step button { flex-direction: row; align-items: center; gap: 10px; padding: 9px 11px; }
  .tp-s { margin-left: auto; text-align: right; }
}
/* ---- Realm page: the field guide ---- */
.fieldguide-block { margin: 18px 0 6px; }
.fg-grid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.fg-card {
  padding: 9px 11px; border-radius: 12px; border: 1px solid var(--border-2);
  background: rgba(20, 28, 50, .6); display: flex; flex-direction: column; gap: 2px; min-height: 58px;
}
.fg-card .fg-ic { font-size: 18px; line-height: 1.1; }
.fg-card b { font-size: 13px; }
.fg-card i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.fg-card p { margin: 3px 0 0; font-size: 11.8px; line-height: 1.4; color: #b9c4d6; }
.fg-card.unseen { opacity: .45; border-style: dashed; justify-content: center; align-items: center; text-align: center; }
.fg-card.unseen .fg-ic { font-size: 16px; color: var(--muted); }
.fg-card.cls-calm { border-color: rgba(52,211,153,.32); }
.fg-card.cls-alert { border-color: rgba(245,176,75,.32); }
.fg-card.cls-space { border-color: rgba(239,107,91,.36); }
/* ---- The primer + keep-it modals ---- */
.primer-modal { max-width: 640px; max-height: 88vh; overflow-y: auto; }
.pr-lede { margin: 0 0 12px; }
.pr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pr-col { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-2); }
.pr-col h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.pr-trap { background: rgba(60, 24, 30, .35); border-color: rgba(239,107,91,.35); }
.pr-trap h4 { color: #f3a093; }
.pr-out { background: rgba(16, 44, 38, .45); border-color: rgba(52,211,153,.38); }
.pr-out h4 { color: #8fe3c9; }
.pr-loop { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pr-loop li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.8px; line-height: 1.4; }
.pr-loop li + li::before { content: none; }
.pr-ic { flex: 0 0 20px; text-align: center; }
.pr-sim { margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(18, 24, 44, .7); border: 1px solid rgba(165,180,252,.28); }
.pr-sim-head { font-weight: 700; font-size: 13.5px; }
.pr-svg { display: block; width: 100%; height: auto; margin: 6px 0; }
.pr-sim-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-sim-btns button { font-size: 12.5px; padding: 7px 12px; }
.pr-sim-note { margin: 8px 0 0; min-height: 18px; }
.pr-sim-note b { color: var(--text); }
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pr-grid div { display: flex; flex-direction: column; gap: 4px; font-size: 12.8px; line-height: 1.45; color: #c7d2e3; }
.pr-grid b { color: var(--text); font-size: 13px; }
.pr-foot { margin: 10px 0 0; }
.keep-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 600px) { .pr-cols, .pr-grid { grid-template-columns: 1fr; } }
/* Calm reward strip on the Complete screen — courage/streak/milestone. */
.reward-strip {
  margin: 10px 0 4px; padding: 8px 14px; border-radius: 12px;
  background: rgba(124,209,197,.10); border: 1px solid rgba(124,209,197,.28);
  color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .2px;
}
.reward-strip .reward-milestone { margin-top: 4px; color: var(--text); font-weight: 600; font-size: 12.5px; }

/* Pill-shaped select element used in settings */
.select-pill {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px;
  font: inherit; font-size: 13px;
  cursor: pointer;
}
.select-pill:focus { outline: 2px solid var(--accent); }
.settings-note {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 11px; color: var(--accent);
  background: rgba(124,209,197,.1);
  border-left: 2px solid var(--accent);
  padding: 4px 8px; border-radius: 4px;
  animation: fade-out 2.2s ease-out forwards;
}
@keyframes fade-out {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

/* First-run tutorial tour with arrows */
.tour-overlay {
  position: fixed; inset: 0; z-index: 1000;
  pointer-events: auto;
  background: rgba(0, 0, 0, .5);
  transition: opacity .35s;
}
.tour-overlay.dismiss { opacity: 0; pointer-events: none; }
.tour-spot {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45), 0 0 24px rgba(124, 209, 197, .55);
  pointer-events: none;
  animation: tourPulse 1.6s ease-in-out infinite;
}
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45), 0 0 24px rgba(124, 209, 197, .55); }
  50%      { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45), 0 0 36px rgba(124, 209, 197, .9); }
}
.tour-card {
  position: absolute;
  width: 280px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 14px 16px 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4), 0 0 30px rgba(124, 209, 197, .2);
  color: var(--text);
}
.tour-step { font-size: 11px; color: var(--accent); letter-spacing: .8px; text-transform: uppercase; font-weight: 700; }
.tour-card h3 { margin: 4px 0 6px; font-size: 15px; }
.tour-card p { margin: 0 0 10px; font-size: 13px; color: #cbd5e1; line-height: 1.55; }
body.light-mode .tour-card p { color: var(--muted); }
.tour-card::before {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-bottom: none; border-right: none;
  transform: rotate(45deg);
  left: 50%; margin-left: -7px;
}
.tour-arrow-down::before { top: -8px; }
.tour-arrow-up::before {
  top: auto; bottom: -8px;
  border: 1px solid var(--accent);
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tour-actions button { font-size: 12px; padding: 6px 14px; }

/* Ladder hero CTA — the one obvious "keep going" action above the fold */
.ladder-cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 14px 0 4px;
}
.ladder-cta .btn-primary {
  font-size: 15px; padding: 12px 22px;
  box-shadow: 0 6px 22px rgba(124, 209, 197, .18);
}
.ladder-cta .btn-primary .arr { transition: transform .15s ease; display: inline-block; }
.ladder-cta .btn-primary:hover .arr { transform: translateX(3px); }
/* "Onward" points the way the line reads: left in Persian. */
html[dir="rtl"] .arr { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .ladder-cta .btn-primary:hover .arr { transform: scaleX(-1) translateX(3px); }
html[dir="rtl"] .grid.big .card:hover .card-go .arr { transform: scaleX(-1) translateX(4px); }
.ladder-cta-sub { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .ladder-cta { gap: 8px; }
  .ladder-cta .btn-primary { width: 100%; text-align: center; justify-content: center; }
}
/* Goal block on the ladder page */
.goal-block {
  margin: 12px 0 14px;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.goal-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.goal-meter { flex: 1; min-width: 140px; }
.goal-meter-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--muted);
  margin-bottom: 4px;
}
.goal-meter-label strong { color: var(--text); font-weight: 600; }
.goal-meter-track {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.goal-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width .4s cubic-bezier(.2,.9,.2,1);
}

/* Goal editor modal */
.goal-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.goal-modal {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 420px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.goal-modal h3 { margin: 0 0 6px; }
.goal-modal p { margin: 0 0 14px; }
.goal-modal label {
  display: block; margin-bottom: 12px;
  font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
}
.goal-modal select {
  display: block; width: 100%; margin-top: 6px;
  padding: 9px 12px; font: inherit; font-size: 14px;
  background: var(--panel-3); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
}
.goal-modal .actions { margin-top: 18px; justify-content: flex-end; }

/* Milestones grid */
.milestones-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 12px;
}
.milestone {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: opacity .2s;
}
.milestone.locked { opacity: .35; }
.milestone.earned {
  border-color: rgba(124,209,197,.4);
  background: linear-gradient(180deg, var(--panel-2), rgba(124,209,197,.05));
}
.milestone-icon {
  width: 40px; height: 40px;
  background: rgba(124,209,197,.10);
  border: 1px solid rgba(124,209,197,.18);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
}
.milestone.earned .milestone-icon { background: rgba(124,209,197,.20); }
.milestone-text strong { display: block; font-size: 14px; }
.milestone-text .small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* Per-phobia progress page */
.back-link {
  color: var(--accent); text-decoration: none;
  font-size: 13px; font-weight: 500;
  display: inline-block; margin-bottom: 10px;
}
.back-link:hover { text-decoration: underline; }
.ladder-progress-link {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px;
  color: var(--accent); text-decoration: none;
  background: rgba(124, 209, 197, .08);
  border: 1px solid rgba(124, 209, 197, .25);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.ladder-progress-link:hover { background: rgba(124, 209, 197, .15); }

.rung-stats {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
}
.rung-stat {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center;
  padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
}
.rung-stat.untouched { opacity: .5; }
.rung-stat-num {
  width: 32px; height: 32px;
  background: var(--accent); color: var(--bg);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.rung-stat.untouched .rung-stat-num { background: var(--border); color: var(--muted); }
.rung-stat-text strong { display: block; font-size: 14px; }
.rung-stat-text .small { font-size: 12px; color: var(--muted); }

.journal-list {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}
.journal-entry {
  padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
}
.journal-meta {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 6px; flex-wrap: wrap;
}
.journal-rung {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: var(--accent); background: rgba(124,209,197,.12);
  padding: 2px 8px; border-radius: 999px;
}
.journal-entry p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #cbd5e1; }
body.light-mode .journal-entry p { color: var(--muted); }

/* First-time tutorial overlay (only the first exposure session) */
.stage .tutorial-overlay {
  position: absolute; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  transition: opacity .35s;
}
.stage .tutorial-overlay.dismiss { opacity: 0; pointer-events: none; }
.stage .tutorial-card {
  background: linear-gradient(180deg, #1a2547, var(--panel-3));
  border: 1px solid rgba(124,209,197,.4);
  border-radius: 14px;
  padding: 22px 26px;
  max-width: min(440px, 86%);
  color: var(--text);
}
.stage .tutorial-card h3 {
  margin: 0 0 10px; color: var(--accent); font-size: 16px;
}
.stage .tutorial-card ul {
  margin: 0 0 14px; padding-left: 18px;
}
.stage .tutorial-card li {
  font-size: 13px; line-height: 1.65; color: #cbd5e1;
  margin-bottom: 4px;
}
.stage .tutorial-card .actions { justify-content: flex-end; margin-top: 0; }

/* Achievement toast — compact pill that slides up from bottom-right
   instead of taking over the page. Was a 420 px panel at the bottom-
   center which felt heavy after every small win; now it's a discreet
   ~280 px chip that gets out of the way fast. */
.stage .sound-cap {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 8;
  padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(10, 14, 28, .72); border: 1px solid rgba(255,255,255,.22); color: #eef2ff;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.stage .sound-cap.show { opacity: 1; }
.save-warn {
  position: fixed; left: 50%; bottom: calc(16px + var(--safe-b, 0px)); transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: min(560px, calc(100% - 24px)); box-sizing: border-box; padding: 12px 14px;
  background: rgba(40, 18, 18, .95); border: 1px solid rgba(255, 140, 120, .55); border-radius: 14px;
  color: var(--text); font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.save-warn span { flex: 1 1 220px; }
.achievement-toast {
  position: fixed; right: var(--space-4); bottom: var(--space-4);
  z-index: 200;
  transform: translateX(120%);
  opacity: 0;
  background: linear-gradient(135deg, rgba(26, 37, 71, .96), rgba(20, 28, 48, .96));
  border: 1px solid rgba(124,209,197,.40);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: var(--space-3);
  transition: transform .35s cubic-bezier(.22,1.4,.4,1), opacity .25s ease;
  color: var(--text);
  max-width: min(320px, calc(100vw - var(--space-8)));
  pointer-events: none;
}
.achievement-toast.show {
  transform: translateX(0); opacity: 1;
}
.ach-icon {
  font-size: 20px; line-height: 1;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,209,197,.14);
  border-radius: 50%;
  flex-shrink: 0;
}
.ach-text { display: flex; flex-direction: column; min-width: 0; }
.ach-text strong {
  font-size: var(--text-xs);
  color: var(--accent);
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 700;
}
.ach-text span {
  font-size: var(--text-sm);
  color: #cbd5e1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
@media (max-width: 480px) {
  .achievement-toast {
    right: var(--space-3); bottom: var(--space-3);
    padding: 6px var(--space-3);
    gap: var(--space-2);
  }
  .ach-icon { width: 28px; height: 28px; font-size: 16px; }
  .ach-text span { font-size: var(--text-xs); max-width: 180px; }
}

/* Smooth scene fade-in when canvas mounts */
.stage canvas { animation: stage-fade .6s ease-out; }
@keyframes stage-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Glow ring when an interactive object is reachable */
.stage .reach-hint {
  box-shadow: 0 0 20px rgba(124,209,197,.25), 0 0 0 0 rgba(124,209,197,.5);
  animation: reach-pulse 1.8s ease-in-out infinite;
}
.stage .reach-hint[style*="opacity: 0"] { animation: none; }
@keyframes reach-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(124,209,197,.25), 0 0 0 0 rgba(124,209,197,.45); }
  50%      { box-shadow: 0 0 28px rgba(124,209,197,.35), 0 0 0 6px rgba(124,209,197,0); }
}

/* Per-phobia command bar — a game HOTBAR floating INSIDE the stage frame
   (it used to be a plain strip below the frame, which read as buttons
   hanging out of the game). Absolute against .stage-wrap: the bar takes no
   flow space, so the wrap's height IS the stage's and "bottom" pins it
   inside the frame, above the toggle/hint line. */
.stage-wrap { position: relative; }
.scene-cmd-bar, .dog-cmd-bar {
  position: absolute; left: 50%; bottom: 64px; z-index: 7;
  transform: translateX(-50%);
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: min(92%, 640px);
  padding: 8px 10px;
  background: rgba(10, 14, 28, .72);
  border: 1px solid rgba(124, 209, 197, .28);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: opacity .22s ease, transform .22s ease;
}
/* Character-driven scenes start with the command bar collapsed — events
   fire from where the player walks / what they look at / what they click
   on, not from a button row. The bar is still there as an accessibility
   fallback (touch users, screen readers, anyone who prefers explicit
   controls) but the player gets a clean view by default. */
.scene-cmd-bar.collapsed {
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}
/* Floating "show controls" / "hide controls" toggle that lives in the
   scene UI when the bar is collapsible. */
.stage .cmd-toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 7;
  background: rgba(10, 14, 28, .70); color: var(--text);
  border: 1px solid rgba(255,255,255,.22);
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  cursor: pointer; backdrop-filter: blur(8px);
  transition: background .15s ease, transform .08s ease;
}
.stage .cmd-toggle:hover { background: rgba(20, 28, 48, .85); }
.stage .cmd-toggle:active { transform: translateY(1px); }
/* Fear-driven visual overlay — radial vignette that tightens AND a colour
   shift toward red/desaturation as the unified Fear value rises. CSS
   filter on the canvas is updated per frame in JS. The vignette is the
   "tunnel vision" felt during real panic — peripheral vision narrows. */
.stage .fear-vignette {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) var(--fv-clear, 60%),
    rgba(20,8,8,0.0) var(--fv-mid, 75%),
    rgba(20,4,4,0.95) 100%);
  opacity: var(--fv-opacity, 0);
  mix-blend-mode: multiply;
  transition: opacity .15s ease;
}
/* Warm completion bloom — fires once when a rung is credited. Gives the "you
   faced it, you're safe" payoff the same full-screen weight the fear got.
   Opacity-only (reduce-motion safe). */
.stage .celebrate-glow {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center,
    rgba(124,209,197,0.30) 0%,
    rgba(165,180,252,0.14) 42%,
    rgba(0,0,0,0) 72%);
  mix-blend-mode: screen;
}
.stage .celebrate-glow.on { animation: celebrateBloom 2.4s ease-out 1; }
@keyframes celebrateBloom {
  0%   { opacity: 0; }
  16%  { opacity: 0.55; }
  100% { opacity: 0; }
}
/* Grounding-mode overlay — gentle desaturated calm when the user activates
   5-4-3-2-1. Soft blue tint, full vignette pulled OUT (very wide), no
   pulsing — the opposite of fear visual language. */
.stage .grounding-overlay {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(40,90,140,0.0) 0%,
    rgba(40,90,140,0.10) 60%,
    rgba(20,40,80,0.30) 100%);
  opacity: 0;
  transition: opacity .8s ease, backdrop-filter .8s ease;
}
/* Only while grounding is on: Chromium keeps drawing a backdrop-filter at
   opacity 0, so the idle overlay desaturated the whole stage — an extra
   full-screen pass on every frame of every trial. */
.stage .grounding-overlay.active { opacity: 1; backdrop-filter: saturate(40%); }
.stage .grounding-text {
  position: absolute; left: 50%; top: 38%; z-index: 8;
  transform: translateX(-50%);
  color: #eaf3ff; font-size: 22px; font-weight: 500;
  text-align: center; letter-spacing: .3px;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  max-width: 80%;
}
.stage .grounding-text.visible { opacity: 1; }
/* Persistent desktop exit affordance during grounding (touch has its own
   "I'm okay — continue" button). */
.stage .grounding-exit-hint {
  /* Under the grounding text, not at the bottom edge — the command bar
     (z-index 12) sat on top of it there. */
  position: absolute; left: 50%; top: calc(50% + 74px); bottom: auto; z-index: 13;
  transform: translateX(-50%);
  color: rgba(234,243,255,.82); font-size: 13px; font-weight: 600;
  letter-spacing: .3px; text-align: center;
  background: rgba(10,14,28,.55); border: 1px solid rgba(165,180,252,.4);
  padding: 7px 16px; border-radius: 999px; backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
.stage .grounding-exit-hint.visible { opacity: 1; }
/* While grounding, nothing else asks for attention: no read card, no
   "click to pet" hint, no context prompts. */
.stage:has(.grounding-overlay.active) .dc-read,
.stage:has(.grounding-overlay.active) .reach-hint,
.stage:has(.grounding-overlay.active) .ctx-prompt { opacity: 0 !important; pointer-events: none !important; }
/* Tiny pulse indicator showing fear level — small dot at top-left under
   the camera toggle. Visible to the user as biofeedback. */
.stage .fear-meter {
  position: absolute; top: 56px; left: 12px; z-index: 6;
  width: clamp(60px, 20vw, 100px); height: 6px; border-radius: 999px;
  background: rgba(20, 24, 36, .60);
  border: 1px solid rgba(255,255,255,.15);
  pointer-events: none; overflow: hidden;
  transition: opacity .2s ease;
}
.stage .fear-meter-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ok), var(--warn), var(--danger));
  transition: width .25s ease, background-position .2s ease;
}
/* Achievement toast — slides in from the right when the player hits a
   milestone (first time at the edge, first pet, etc.). Auto-dismisses
   after 3.5 s. Stack-friendly: multiple toasts queue vertically. */
.stage .achievement-toast {
  /* bottom:auto — the page-level toast rule above pins bottom, and with
     both set this absolutely-positioned chip stretched into a full-height
     panel over the right third of the scene. */
  position: absolute; right: 12px; top: 12px; bottom: auto; z-index: 8;
  background: linear-gradient(135deg, rgba(28,38,64,.95), rgba(20,28,48,.95));
  color: var(--text);
  border: 1px solid rgba(165,180,252,.35);
  border-left: 3px solid var(--accent);
  padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 500;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 28px rgba(0,0,0,.45);
  transform: translateX(120%);
  transition: transform .45s cubic-bezier(.22,1.4,.4,1), opacity .35s ease;
  opacity: 0;
  max-width: 300px;
  display: flex; align-items: center; gap: 10px;
}
.stage .achievement-toast.visible {
  transform: translateX(0);
  opacity: 1;
}
.stage .achievement-toast .achievement-icon {
  font-size: 22px; line-height: 1;
  filter: drop-shadow(0 0 8px rgba(124,209,197,.4));
}
.stage .achievement-toast .achievement-text {
  display: flex; flex-direction: column; gap: 2px;
}
.stage .achievement-toast strong {
  color: var(--accent); font-size: 11px;
  text-transform: uppercase; letter-spacing: .8px;
  font-weight: 700;
}
/* Soft contextual prompt that fades in when the player crosses a
   character-driven event boundary (reached the edge, dog noticed you,
   etc.). No buttons — informational only. */
.stage .ctx-prompt {
  position: absolute; left: 50%; bottom: 122px; z-index: 7;
  transform: translateX(-50%);
  background: rgba(10, 14, 28, .80); color: var(--text);
  border: 1px solid rgba(165,180,252,.40);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500; line-height: 1.35;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  max-width: min(360px, 85%); text-align: center;
  overflow-wrap: break-word;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.stage .ctx-prompt.visible {
  opacity: 1; transform: translateX(-50%) translateY(-4px);
}
@media (max-width: 480px) {
  .stage .ctx-prompt {
    bottom: 104px;
    font-size: var(--text-xs);
    padding: 6px var(--space-3);
    max-width: 90%;
  }
}
.cmd-btn {
  /* Glassy in-frame style so the hotbar buttons match the rest of the
     stage HUD (quick bar, camera toggle) instead of the page's panels. */
  background: rgba(16, 22, 40, .82);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 8px 14px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 1; min-width: 0;   /* narrow phones: shrink + wrap, never overflow */
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .08s;
}
.cmd-btn:hover { border-color: var(--accent); background: rgba(124,209,197,.15); }
.cmd-btn:active { transform: translateY(1px); }
.cmd-btn .cmd-icon { font-size: 16px; line-height: 1; }
@media (max-width: 600px) {
  .scene-cmd-bar, .dog-cmd-bar { bottom: 60px; padding: 6px 8px; gap: 6px; }
  .cmd-btn { padding: 8px 12px; font-size: 12px; }
}

/* Touch joystick (mobile) */
.stage .joystick {
  position: absolute; left: 18px; bottom: 18px; z-index: 8;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(10, 14, 28, .35);
  border: 1.5px solid rgba(124,209,197,.35);
  backdrop-filter: blur(6px);
  touch-action: none;
  user-select: none;
}
.stage .joystick::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(124,209,197,.10), transparent 60%);
  pointer-events: none;
}
.stage .joystick-thumb {
  position: absolute; left: 50%; top: 50%;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px rgba(124,209,197,.4);
  pointer-events: none;
  transition: transform .05s linear;
}

/* Mobile responsive tweaks */
@media (max-width: 600px) {
  /* Tighter app padding + margin: -28px on .stage-wrap pulled the stage
     OUTSIDE the panel padding on desktop. On mobile we want the stage to
     reach edge-to-edge too, so the cmd buttons get the full screen width. */
  .app { padding: 14px 6px 100px; }
  .panel { padding: 14px; }
  .stage-wrap { margin: 0 max(calc(50% - 50vw), -14px); }
  h2 { font-size: 20px; }
  .show-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .step-controls {
    flex-wrap: wrap; gap: 8px;
    padding: 12px 16px;
  }
  .step-controls .timer, .step-controls .hold-label {
    width: 100%; text-align: right;
  }
  .step-controls .hold-bar { display: none; }
  /* Viewport-aware, not a fixed 280px — landscape phones got a crushed letterbox */
  .stage { height: clamp(280px, 62vh, 640px); }
  .stage .joystick { left: 12px; bottom: 12px; width: 84px; height: 84px; }
  .stage .joystick-thumb { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  /* The lowest 108px belong to the joystick and action buttons. Messages
     stack above that control deck instead of making the controls untappable. */
  .stage .reach-hint {
    bottom: 126px;
    font-size: 12px; padding: 6px 12px; max-width: 88%;
    white-space: normal; text-align: center;
  }
  .stage .captions {
    font-size: 12px; max-width: 90%; padding: 6px 12px;
    bottom: 174px; line-height: 1.3; overflow-wrap: break-word;
  }
  .phobia-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .char-badge-name { display: none; }
  /* Phone header: six nav items + brand must fit 375px. Icon-only buttons,
     tighter gaps, compact chip + badge — at the old paddings the row was
     409px wide and pushed the Home button clean off-screen. */
  .nav-actions { gap: 3px; }
  .audio-btn, .home-btn { padding: 5px 8px; font-size: 12px; }
  .brand-left { gap: 6px; }
  .brand h1, .brand .lw-head { font-size: 17px; }
  .courage-badge { font-size: 10px; padding: 2px 6px; }
  .char-badge { padding: 3px 6px; }
  .char-badge-streak { display: none; }
  /* Progress + Home live in the ☰ drawer too — drop their header buttons
     on phones rather than letting the row push past the viewport. */
  #insightsBtn, .home-btn { display: none; }
  .hero { padding: 26px 18px 22px; }
  .hero h1.huge { font-size: 26px; }
  .hero .lead { font-size: 14px; }
  .hero .floaters { display: none; }
  .journey { grid-template-columns: 1fr; }
  button { min-height: 44px; }  /* Apple's recommended touch target */
}

/* Closed captions for voice guidance */
.stage .captions {
  position: absolute; left: 50%; bottom: 56px; z-index: 7;
  transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  color: #fff; padding: 8px 14px; border-radius: 6px;
  font-size: 14px; line-height: 1.4;
  max-width: 70%; text-align: center;
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
  border-left: 3px solid var(--accent);
}
.stage .captions.show { opacity: 1; }
/* Player-spoken lines ("You: Come here.") — visually a different voice */
.stage .captions.you {
  border-left-color: #8ab4ff; font-style: italic; color: #dbe7ff;
}

/* Heights scene */
.scene-heights .ground { transition: transform 1.2s ease; }

/* Water scene */
.scene-water .water-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(125,211,252,.35), rgba(56,189,248,.7));
  transition: height 1.2s ease;
}
.scene-water .ripple {
  position: absolute; border: 2px solid rgba(255,255,255,.4);
  border-radius: 50%; animation: ripple 3s linear infinite;
}
@keyframes ripple {
  0% { transform: scale(.4); opacity: .8; }
  100% { transform: scale(2); opacity: 0; }
}

/* Approach scene (dogs / spiders) */
.scene-approach .creature {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 1.2s ease, opacity .6s ease;
}
.blink { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(.1); }
}

/* Enclosed scene */
.scene-enclosed { display: flex; align-items: center; justify-content: center; }
.scene-enclosed .room {
  position: relative; width: 80%; height: 80%;
  border: 4px solid #475569; border-radius: 8px;
  background: repeating-linear-gradient(45deg, #1e293b, #1e293b 14px, #172033 14px, #172033 28px);
  transition: width 1.2s ease, height 1.2s ease;
}
.scene-enclosed .room::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 30px rgba(124,209,197,.5);
}

.step-controls {
  display: flex; gap: 10px; padding: 10px 20px;
  border-top: 1px solid var(--border);
  align-items: center;
  /* Wrap so the Pause + Continue + timer + hold-bar all stay visible on
     narrow screens. Without wrap the timer (margin-left: auto) was pushing
     the right side off-screen on mobile. */
  flex-wrap: wrap;
}
.step-controls > * { flex-shrink: 0; }
.step-controls .hold-bar { flex-shrink: 1; min-width: 0; }
.step-controls .timer {
  margin-left: auto; color: var(--muted); font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  /* Stage caption / step-controls inset matches the panel inner padding
     so action buttons (Pause, Continue, etc.) line up with the rest of
     the panel content without clipping. */
  /* Single source of truth for the mobile stage height (an earlier rule in
     the other 600px block used to fight this one) — landscape-friendly. */
  .stage { height: clamp(280px, 62vh, 640px); }
  .stage-caption, .step-controls { padding-left: 14px; padding-right: 14px; }
  .app { padding: 16px 14px 64px; }
  .stage-wrap { margin: 0 max(calc(50% - 50vw), -14px); }
  /* Camera toggle + fear meter — bring them in from the corner so they
     don't get clipped by the rounded panel edges on phones. */
  .stage .camera-toggle {
    top: 8px; left: 8px;
    padding: 6px 12px; font-size: 12px;
  }
  /* The hold pill is the compact phone progress readout. A second meter in
     the same corner only obscures the scene. */
  .stage .fear-meter { display: none; }
  .stage .cmd-toggle { right: 8px; bottom: 8px; }
  .stage .ctx-prompt {
    bottom: 222px;
    font-size: 12px; padding: 8px 12px; max-width: 90%;
  }
  /* Persistent orientation copy occupies the open lane beside the joystick,
     clear of Ground me and Show controls. */
  .stage .controls-hint {
    left: 108px; right: 8px; bottom: 62px;
    max-width: none;
    padding: 6px 10px;
    font-size: 10px;
    line-height: 1.35;
  }
}
/* Tablet / mid-width refinement (stage stays contained — no bleed) */
@media (min-width: 601px) and (max-width: 900px) {
  .app { padding: 18px 18px 72px; }
}
/* Make sure the canvas always fills its container exactly. CSS pixel
   ratio mismatches were occasionally pushing it 1-2 px past the panel
   edge on some devices, clipping the camera toggle. */
.stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
/* ================= THE COURAGE JOURNEY (game shell) =================
   Everything below styles the game framing: the scroll-told title story,
   the Valley of Fears journey map, realm trial paths, the shadow guardians
   that shrink with progress, and the collectible Sparks of Wisdom. The
   story/valley scenes pin their own night palette (they are "places", the
   same in light and dark mode); cards inside them use the theme vars. */
.brand-tag {
  font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
@media (max-width: 520px) { .brand-tag { display: none; } }
.btn-xl { font-size: 17px; padding: 14px 26px; }
.spark-hud { position: relative; }
.spark-hud-n {
  position: absolute; top: -4px; right: -4px;
  background: linear-gradient(135deg, #f6c76a, #e78a4e); color: #221a08;
  border-radius: 999px; font-size: 10px; font-weight: 800;
  min-width: 16px; height: 16px; line-height: 16px; padding: 0 3px;
}

/* ---- Title story ---- */
.story-beat {
  min-height: 74vh; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 18px;
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s ease, transform .9s ease;
}
.story-beat.lit { opacity: 1; transform: none; }
.beat-hero {
  min-height: 86vh; overflow: hidden; border-radius: var(--radius-xl);
  background: radial-gradient(120% 90% at 50% 110%, #2c3a63 0%, #131c33 45%, #0b1122 100%);
  border: 1px solid #25324f; color: #e8eef7;
}
.story-sky { position: absolute; inset: 0; pointer-events: none; }
.star {
  position: absolute; border-radius: 50%; background: #dfe9ff;
  opacity: var(--o, .5); animation: twinkle 4s ease-in-out infinite;
  animation-delay: var(--tw, 0s);
}
@keyframes twinkle { 0%, 100% { opacity: var(--o, .5); } 50% { opacity: .08; } }
.story-moon {
  position: absolute; top: 9%; right: 12%; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fdf6de, #d9d3b8 70%);
  box-shadow: 0 0 42px 8px rgba(253, 246, 222, .25);
}
.story-figure {
  position: relative; z-index: 1;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.5));
  animation: heroFloat 5s ease-in-out infinite;
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.story-kicker {
  position: relative; letter-spacing: 3px; text-transform: uppercase;
  font-size: 11px; color: var(--accent); margin: 14px 0 2px; font-weight: 700;
}
.story-title {
  position: relative; margin: 0 0 12px;
  font-size: clamp(34px, 7vw, 58px); letter-spacing: .5px; line-height: 1.06;
  background: linear-gradient(180deg, #ffffff, #9fb4dc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.story-bubble {
  position: relative; max-width: 420px;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 16px;
  padding: 12px 18px; color: var(--text); font-size: 15px; box-shadow: var(--shadow-sm);
}
.story-bubble::after {
  content: ""; position: absolute; top: -7px; left: 50%;
  transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px;
  background: var(--panel); border-left: 1px solid var(--border-2); border-top: 1px solid var(--border-2);
}
.story-actions { justify-content: center; margin-top: 18px; position: relative; }
.scroll-hint {
  position: absolute; bottom: 16px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #94a3b8; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  animation: hintBob 2.2s ease-in-out infinite;
}
@keyframes hintBob { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(6px); opacity: 1; } }
.story-line { font-size: clamp(24px, 4.5vw, 36px); margin: 18px 0 8px; }
.story-text { max-width: 560px; font-size: 16px; }
.beat-shadow {
  width: 90px; height: 74px; position: relative;
  border-radius: 48% 52% 55% 45% / 60% 58% 42% 40%;
  background: radial-gradient(circle at 50% 32%, #2c3654, #10162a 75%);
  border: 1px solid #2c3654;
  display: flex; gap: 14px; align-items: center; justify-content: center;
  animation: blobDrift 7s ease-in-out infinite;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.beat-shadow .eye, .realm-shadow .eye, .shadow-blob .eye {
  width: 9px; height: 9px; border-radius: 50%; background: #b7c6e8;
  box-shadow: 0 0 8px #b7c6e8; display: block;
}
.beat-shadow.sz-1 { transform: scale(.9); }
.beat-shadow.sz-3 { transform: scale(1.9); margin-bottom: 26px; }
.beat-shadow.sz-0 { transform: scale(.55); opacity: .85; }
.beat-shadow.tamed { background: radial-gradient(circle at 50% 32%, #3d5f63, #17313a 75%); border-color: #3d8f7c; }
.beat-shadow.tamed .eye { background: #8fe3c9; box-shadow: 0 0 8px #8fe3c9; }
@keyframes blobDrift {
  0%, 100% { border-radius: 48% 52% 55% 45% / 60% 58% 42% 40%; }
  50%      { border-radius: 55% 45% 48% 52% / 52% 48% 55% 45%; }
}
.story-curve svg { width: min(420px, 86vw); height: auto; overflow: visible; }
.curve-path { stroke: var(--accent); stroke-dasharray: 620; stroke-dashoffset: 620; }
.story-beat.lit .curve-path { animation: curveDraw 2.4s ease forwards .3s; }
@keyframes curveDraw { to { stroke-dashoffset: 0; } }
.curve-label { fill: var(--muted); font-size: 11px; }
.story-realms {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 22px; max-width: 720px;
}
.story-realm {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px;
  padding: 10px; width: 128px; cursor: pointer;
  transition: transform .25s ease, border-color .25s ease;
}
.story-realm:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--accent); }
.story-realm:disabled { opacity: .55; cursor: default; }
/* A gated button with no gated LOOK reads as a broken one. The rate screen
   keeps Save disabled until the slider is moved (so the SUDS reading is
   self-generated, not a confirmed default) — but with no styling it looked
   live, and clicking it did nothing with no explanation. */
button:disabled, .btn-primary:disabled, .btn-ghost:disabled, .btn-warn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: saturate(.55);
}
.story-realm-thumb { width: 104px; height: 62px; border-radius: 9px; overflow: hidden; display: block; }
.story-realm-thumb svg { width: 100%; height: 100%; display: block; }
.story-realm-name { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.2; }
.story-realm-fear { font-size: 10.5px; color: var(--accent); }
.beat-final { padding-bottom: 80px; }
.story-disclaimer {
  max-width: 560px; margin-top: 26px; font-size: 12.5px; color: #fde68a;
  background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .3);
  padding: 10px 14px; border-radius: 10px;
}
body.light-mode .story-disclaimer { color: #8a5b00; }

/* ---- Full-3D cinematic landing / threshold ---- */
.landing {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
  background: #070b14;
  color: #e8eef7;
}
.landing-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.landing-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.landing-hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 88px 20px 28px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,11,20,.35) 0%, transparent 22%, transparent 48%, rgba(7,11,20,.55) 72%, rgba(7,11,20,.88) 100%);
}
.landing-hud > * { pointer-events: auto; max-width: 640px; }
.landing-kicker {
  letter-spacing: 3.2px; text-transform: uppercase;
  font-size: 11px; color: var(--accent); margin: 0 0 6px; font-weight: 700;
}
.landing-title {
  margin: 0 0 10px;
  font-size: clamp(32px, 6.4vw, 56px); letter-spacing: .4px; line-height: 1.06;
  background: linear-gradient(180deg, #ffffff, #9fb4dc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.landing-copy {
  margin: 0 0 16px;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.55;
  color: #d5deee;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.landing-copy em { color: #fff; font-style: italic; }
.landing-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 14px;
}
.landing-beats {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  margin-top: 4px;
}
.landing-beat {
  width: 9px; height: 9px; border-radius: 50%;
  border: 0; padding: 0; min-height: 0;
  background: rgba(232,238,247,.28);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.landing-beat[aria-current="true"] {
  background: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 0 10px rgba(124,209,197,.7);
}
.landing-realms {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 4px 0 12px; max-width: 720px;
}
.landing-realm {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  background: rgba(20,28,50,.72); border: 1px solid rgba(58,74,114,.85);
  border-radius: 12px; padding: 8px 10px; min-width: 104px;
  cursor: pointer; color: #e8eef7; backdrop-filter: blur(8px);
  transition: transform .2s ease, border-color .2s ease;
}
.landing-realm:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--accent); }
.landing-realm:disabled { opacity: .5; cursor: default; }
.landing-realm strong { font-size: 12px; }
.landing-realm span { font-size: 10.5px; color: var(--accent); }
.landing-hint {
  font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
  color: #94a3b8; margin: 8px 0 0;
}
.landing-disclaimer {
  max-width: 520px; margin-top: 12px; font-size: 12px; color: #fde68a;
  background: rgba(245, 158, 11, .10); border: 1px solid rgba(245, 158, 11, .28);
  padding: 8px 12px; border-radius: 10px;
}
.landing-skip {
  position: absolute; top: 58px; right: 16px; z-index: 6;
  background: rgba(20,28,50,.55); border: 1px solid #3a4a72; color: #c5d0e4;
  border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer;
  min-height: 36px;
}
[dir="rtl"] .landing-skip { right: auto; left: 16px; }
@media (max-width: 640px) {
  .landing-hud { padding: 76px 14px 22px; }
  .landing-skip { top: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-beat[aria-current="true"] { transform: none; }
}

/* ---- Journey map (the Valley of Fears) ---- */
/* NOTE: named .jworld because the legacy "how a session works" block already
   owns the .journey class (a grid) — reusing it laid the camp and realm list
   side-by-side. */
.jworld {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl); border: 1px solid #25324f;
  background: linear-gradient(180deg, #0c1224 0%, #101a33 30%, #131c2f 62%, #26243f 86%, #4a3050 96%, #7a4a4e 100%);
  padding: 26px 14px 44px; color: #e8eef7;
}
.jw-stars { position: absolute; inset: -45% 0 0; pointer-events: none; will-change: transform; }
.camp { position: relative; text-align: center; padding: 10px 0 6px; }
.camp-scene { display: flex; align-items: flex-end; justify-content: center; gap: 6px; min-height: 118px; }
.camp-char { transform: translateY(4px); filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }
.campfire { position: relative; width: 64px; height: 74px; }
.campfire .logs {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 10px; border-radius: 5px;
  background: linear-gradient(180deg, #6b4a33, #3f2a1c);
  box-shadow: -8px 2px 0 -2px #57381f, 8px 2px 0 -2px #57381f;
}
.campfire .flame { position: absolute; bottom: 12px; left: 50%; border-radius: 50% 50% 20% 20%; transform-origin: 50% 100%; }
.campfire .f1 { width: 22px; height: 34px; margin-left: -11px; background: radial-gradient(circle at 50% 80%, #ffd86b, #ff9a3d 60%, rgba(255,120,40,0)); animation: flick .9s ease-in-out infinite alternate; }
.campfire .f2 { width: 14px; height: 24px; margin-left: -15px; background: radial-gradient(circle at 50% 80%, #ffe9a8, #ffae52 65%, rgba(255,140,60,0)); animation: flick .7s ease-in-out infinite alternate .2s; }
.campfire .f3 { width: 12px; height: 20px; margin-left: 2px;  background: radial-gradient(circle at 50% 80%, #fff3c4, #ffb85e 65%, rgba(255,150,70,0)); animation: flick .8s ease-in-out infinite alternate .1s; }
@keyframes flick { from { transform: scaleY(1) skewX(0deg); } to { transform: scaleY(1.18) skewX(-4deg); } }
.fire-glow {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 46px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,160,70,.35), transparent 70%);
}
.camp-bubble {
  position: relative; display: inline-block; max-width: 460px; margin-top: 10px;
  background: rgba(20, 28, 50, .85); border: 1px solid #3a4a72; border-radius: 14px;
  padding: 10px 16px; font-size: 14.5px; color: #e8eef7; font-style: italic;
}
.camp-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.camp-stat {
  background: rgba(15, 23, 42, .55); border: 1px solid #3a4a72; color: #e8eef7;
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
}
.camp-stat.as-btn { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; }
.camp-stat.as-btn:hover { border-color: var(--accent); }
.camp-hint { margin-top: 14px; color: #94a3b8; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; }

.realm-list { list-style: none; margin: 8px auto 0; padding: 0; max-width: 760px; position: relative; }
.path-seg { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 0; }
.path-seg i { width: 5px; height: 5px; border-radius: 50%; background: #4c5b82; opacity: .8; }
.path-seg i:nth-child(2) { transform: translateX(8px); }
.path-seg i:nth-child(3) { transform: translateX(-7px); }
.realm-node {
  position: relative; display: grid; grid-template-columns: 190px 1fr;
  background: linear-gradient(180deg, var(--panel), var(--panel-3));
  border: 1px solid var(--border-2); border-radius: 18px; overflow: hidden;
  cursor: pointer; box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(26px);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .8s ease;
}
.realm-node.lit { opacity: 1; transform: none; }
.realm-node:hover, .realm-node:focus-visible {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: 0 14px 44px rgba(0,0,0,.45);
}
.realm-node.side-r { margin-left: min(64px, 8%); }
.realm-node.side-l { margin-right: min(64px, 8%); }
.realm-node.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 40px rgba(124, 209, 197, .12); }
.realm-thumb { position: relative; min-height: 132px; }
.realm-thumb > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.realm-shadow {
  position: absolute; right: 8px; bottom: 8px;
  width: calc(26px + var(--rem, 1) * 34px); height: calc(22px + var(--rem, 1) * 28px);
  border-radius: 48% 52% 55% 45% / 60% 58% 42% 40%;
  background: radial-gradient(circle at 50% 30%, rgba(24, 32, 58, .92), rgba(6, 10, 22, .95));
  border: 1px solid rgba(90, 110, 160, .5);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  animation: blobDrift 6s ease-in-out infinite;
  opacity: calc(.45 + var(--rem, 1) * .55);
}
.realm-shadow .eye { width: 7px; height: 7px; }
.realm-tamed {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(20, 40, 38, .85); color: #8fe3c9; border: 1px solid #3d8f7c;
  border-radius: 999px; font-size: 11px; padding: 3px 9px; font-weight: 700;
}
.you-marker {
  position: absolute; top: 6px; left: 8px; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  animation: heroFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.5));
}
.you-marker > span {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  background: var(--accent); color: #08221e; font-weight: 800;
  border-radius: 999px; padding: 1px 8px; margin-top: -6px;
}
.realm-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; text-align: start; }
.realm-kicker { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.realm-name { margin: 0; font-size: 20px; color: var(--text); }
.realm-epithet { margin: 0; font-size: 12.5px; color: var(--muted); font-style: italic; }
.realm-pips { display: flex; gap: 5px; margin: 7px 0 2px; }
.pip { width: 14px; height: 6px; border-radius: 3px; background: #2c3854; }
body.light-mode .pip { background: #cbd3e0; }
.pip.lit { background: linear-gradient(90deg, #ffd86b, #ff9a3d); box-shadow: 0 0 8px rgba(255, 170, 80, .5); }
.realm-state { margin: 2px 0 4px; font-size: 12.5px; color: var(--muted); }
.realm-cta { margin-top: auto; color: var(--accent); font-weight: 700; font-size: 13px; }
.jw-dawn {
  text-align: center; margin-top: 36px; position: relative;
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.jw-dawn.lit { opacity: 1; transform: none; }
.jw-dawn h3 { color: #ffd9b0; }
.jw-dawn p { color: #d8b8a8; }
/* Realms outside the launch scope: named, visibly not yet walkable. */
.jw-soon { text-align: center; margin: 34px auto 0; max-width: 720px; padding: 0 16px; }
.jw-soon h3 { color: var(--text); margin: 0 0 6px; font-size: 17px; }
.jw-soon p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.jw-soon-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.jw-soon-chip { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-align: start;
  border: 1px dashed var(--border-2); border-radius: 14px; background: rgba(20, 26, 46, .45); opacity: .82; }
.jw-soon-chip strong { font-size: 14px; color: var(--text); }
.jw-soon-chip span { font-size: 12px; color: var(--muted); }
.jw-soon-chip em { font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 4px; }
.soon-panel { max-width: 640px; margin: 24px auto; }
/* Feedback box */
.fb-modal textarea { width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; resize: vertical;
  font: inherit; font-size: 14px; color: var(--text); background: rgba(10, 14, 26, .55);
  border: 1px solid var(--border-2); border-radius: 12px; }
.fb-modal textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-diag { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12px; color: var(--muted); cursor: pointer;
  text-transform: none; letter-spacing: normal; font-weight: 400; }
.fb-diag input { margin-top: 2px; }
.fb-where { color: var(--muted); margin: 8px 0 0; }
.fb-after { text-align: center; margin: 14px 0 0; }
.linklike { background: none; border: 0; padding: 4px 6px; font: inherit; font-size: 13px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linklike:hover, .linklike:focus-visible { color: var(--text); }
.soon-panel .realm-epithet { font-style: italic; color: var(--muted); margin-top: -4px; }
@media (max-width: 640px) {
  .realm-node { grid-template-columns: 1fr; }
  .realm-node.side-r, .realm-node.side-l { margin-left: 0; margin-right: 0; }
  .realm-thumb { min-height: 110px; }
}

/* ---- Realm view (a fear's five trials) ---- */
.realm-view { display: flex; flex-direction: column; gap: 14px; }
.realm-hero {
  position: relative; overflow: hidden; min-height: 190px;
  border-radius: var(--radius-lg); border: 1px solid var(--border-2);
  display: flex; align-items: flex-end; gap: 14px; padding: 18px;
}
.realm-hero-art, .realm-hero-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.realm-hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 26, .15) 0%, rgba(10, 14, 26, .55) 55%, rgba(10, 14, 26, .92) 100%);
}
.realm-hero-text { position: relative; z-index: 1; flex: 1; }
.realm-hero-text .realm-kicker { color: #9fe8dc; }
.realm-hero-text h2 { margin: 2px 0; font-size: clamp(24px, 4.4vw, 34px); color: #fff; }
.realm-hero-text .realm-epithet { color: #b8c4dd; }
/* "Your ground" — the traveller's own record, sitting where the guardian's
   strength meter used to. Numbers, not a monster. */
/* Sits UNDER the hero, not inside it. In the hero it covered the artwork and
   pushed the realm's epithet behind a panel — the numbers deserve room and
   the realm deserves its title back. */
.ground-box {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, var(--panel), var(--panel-3));
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  padding: 12px 16px; margin-top: 10px;
}
.ground-title {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #aab6d4; font-weight: 700;
}
.ground-meter { height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.ground-meter-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--ok));
  transition: width .5s ease;
}
.ground-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ground-stat { display: flex; flex-direction: column; line-height: 1.15; }
.ground-stat .gs-v { font-size: 17px; font-weight: 800; color: var(--text); }
.ground-stat .gs-v i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.ground-stat .gs-l { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ground-note { font-size: 11px; color: #a9e8d2; line-height: 1.35; }
/* Peak-moment progress strip on the completion screen. */
.ground-gain {
  display: flex; flex-direction: column; gap: 7px;
  background: linear-gradient(180deg, rgba(24,40,36,.5), rgba(14,26,24,.6));
  border: 1px solid #2e6b58; border-radius: 12px; padding: 11px 14px; margin: 10px 0;
}
.gg-line { font-size: 13px; color: var(--text); }
.gg-line strong { font-size: 19px; }
.gg-meter { height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.gg-meter i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--ok));
}
.gg-note { font-size: 12px; color: #a9e8d2; line-height: 1.4; }
@media (max-width: 600px) {
  .ground-box { min-width: 0; width: 100%; max-width: none; }
}
.realm-bubble {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px;
  padding: 9px 14px; font-size: 14px; color: var(--text); font-style: italic;
}
.realm-bubble-avatar { flex: 0 0 auto; display: flex; }
.trial-path { list-style: none; margin: 4px 0 0; padding: 0; }
.trial-link { height: 26px; margin-left: 27px; border-left: 2px dashed #3a4a72; }
.trial { display: flex; gap: 14px; align-items: stretch; }
.trial-marker {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; align-self: center;
  background: var(--panel-2); border: 2px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px; color: var(--muted);
}
.trial.done .trial-marker { border-color: #ff9a3d; background: rgba(255, 154, 61, .12); font-size: 22px; }
.trial.current .trial-marker { border-color: var(--accent); color: var(--accent); animation: pulseRing 2.4s ease-in-out infinite; }
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 3px rgba(124, 209, 197, .14); }
  50%      { box-shadow: 0 0 0 9px rgba(124, 209, 197, .04); }
}
.trial-card {
  flex: 1; background: linear-gradient(180deg, var(--panel), var(--panel-3));
  border: 1px solid var(--border-2); border-radius: 14px; padding: 12px 16px;
}
.trial.current .trial-card { border-color: var(--accent); }
.trial.future .trial-card { opacity: .72; }
.trial-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trial-head strong { font-size: 15.5px; }
.trial-flames { display: flex; gap: 3px; }
.tf { width: 7px; height: 11px; border-radius: 4px 4px 2px 2px; background: #2c3854; }
body.light-mode .tf { background: #cbd3e0; }
.tf.on { background: linear-gradient(180deg, #ffd86b, #ff7a3d); }
.trial-desc { margin: 3px 0 4px; font-size: 13.5px; }
/* Stars: best attempt per trial, per realm, across the valley. */
.stars { display: inline-flex; gap: 1px; white-space: nowrap; letter-spacing: 0; }
.stars i { font-style: normal; color: var(--star-dim); }
.stars i.on { color: var(--star); text-shadow: 0 0 6px rgba(252,211,77,.35); }
.trial-stars { font-size: 16px; flex: 0 0 auto; }
.trial-open { margin: 0 0 4px; font-size: 12.5px; color: var(--star); opacity: .9; }
.gs-star { color: var(--star); margin-inline-end: 2px; font-size: 14px; }
.realm-stars { margin-inline-start: 8px; font-size: 12px; font-weight: 700; color: var(--star); align-self: center; white-space: nowrap; }
.realm-stars i { font-style: normal; color: var(--muted); font-weight: 600; }
.camp-stat.stars-stat { color: var(--star); }
.trial-whisper { margin: 0 0 6px; font-size: 12.8px; color: var(--accent); font-style: italic; }
.trial-whisper.misty { color: var(--muted); opacity: .75; }
.trial-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.trial-stats { font-size: 11.5px; color: var(--muted); }
@media (max-width: 560px) {
  .trial { gap: 10px; }
  .trial-marker { flex-basis: 44px; width: 44px; height: 44px; font-size: 16px; }
  .trial-link { margin-left: 21px; }
  .realm-hero { flex-wrap: wrap; }
}

/* ---- Sparks of Wisdom (collectible psychoeducation) ---- */
.spark-reveal { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 16px 0; }
.spark-card { position: relative; width: min(330px, 88vw); height: 195px; cursor: pointer; perspective: 900px; }
.spark-face {
  position: absolute; inset: 0; border-radius: 16px; padding: 16px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  transition: transform .8s cubic-bezier(.2, .7, .25, 1);
}
.spark-back { background: linear-gradient(160deg, #2a3457, #171f38); border: 1px solid #40507e; transform: rotateY(0deg); }
.spark-back > span:first-child { font-size: 30px; color: #f6c76a; text-shadow: 0 0 18px rgba(246, 199, 106, .6); animation: twinkle 2.2s ease-in-out infinite; }
.spark-back em { color: #e8eef7; font-style: normal; font-weight: 700; }
.spark-tap { font-size: 11px; color: #94a3b8; letter-spacing: 1.6px; text-transform: uppercase; }
.spark-front { background: linear-gradient(160deg, #3c3320, #221c10); border: 1px solid #8a6d35; transform: rotateY(180deg); }
.spark-front .spark-icon { font-size: 26px; }
.spark-front strong { color: #ffe1a1; font-size: 16px; }
.spark-front p { margin: 0; font-size: 12.8px; color: #d9cba8; line-height: 1.45; }
.spark-card.flipped .spark-back { transform: rotateY(-180deg); }
.spark-card.flipped .spark-front { transform: rotateY(0deg); }
.spark-count a { color: var(--accent); }
.journal-panel .spark-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin: 14px 0 18px;
}
.spark-slot {
  border-radius: 14px; padding: 14px;
  border: 1px solid #8a6d35; background: linear-gradient(160deg, #37301e, #201a0f);
  display: flex; flex-direction: column; gap: 5px;
  animation: viewIn .4s ease-out both; animation-delay: calc(var(--i, 0) * 40ms);
}
.spark-slot .spark-icon { font-size: 22px; }
.spark-slot strong { color: #ffe1a1; font-size: 14.5px; }
.spark-slot p { margin: 0; font-size: 12.5px; color: #d9cba8; line-height: 1.45; }
.spark-slot.locked { background: var(--panel-3); border-color: var(--border-2); opacity: .7; }
.spark-slot.locked .spark-icon, .spark-slot.locked strong, .spark-slot.locked p { color: var(--muted); }

/* ---- Reduced motion: the journey stays readable, just still ---- */
@media (prefers-reduced-motion: reduce) {
  .story-beat, .realm-node, .jw-dawn { opacity: 1 !important; transform: none !important; transition: none; }
  .beat-shadow.sz-1 { transform: scale(.9) !important; }
  .beat-shadow.sz-3 { transform: scale(1.9) !important; }
  .beat-shadow.sz-0 { transform: scale(.55) !important; }
  .star, .campfire .flame, .beat-shadow, .realm-shadow, .shadow-blob,
  .story-figure, .you-marker, .scroll-hint, .guardian.tamed-bird,
  .spark-back > span:first-child, .trial.current .trial-marker { animation: none !important; }
  .curve-path { stroke-dashoffset: 0 !important; animation: none !important; }
  .spark-face { transition: none; }
}

/* ---- Shell 3D vignettes: containers + 2D fallbacks ---- */
/* Camp: the 3D canvas replaces the CSS campfire the moment it mounts.
   Until then (or if WebGL is unavailable) the 2D scene stays. */
.camp-scene { position: relative; }
.camp-3d { display: none; }
.camp-scene.has3d .camp-3d {
  display: block; width: min(560px, 92%); height: 235px; margin: 0 auto;
}
.camp-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.camp-scene.has3d .camp-2d { display: none; }
.camp-2d { display: flex; align-items: flex-end; justify-content: center; gap: 6px; min-height: 118px; }
/* Realm hero: the live diorama sits over the illustrated art (alpha canvas),
   under the text. Drag-to-spin works through it on the right side. */
.realm-3d { display: none; }
.realm-hero.has3d { min-height: 240px; }
.realm-hero.has3d .realm-3d {
  display: block; position: absolute; inset: 0; z-index: 1;
}
.realm-3d canvas { width: 100% !important; height: 100% !important; display: block; }
/* With the live animal on stage, the illustrated one behind it is a giant
   cartoon head looming over a small real dog. Keep only its colour wash. */
.realm-hero.has3d .realm-hero-art { opacity: .16; filter: blur(6px) saturate(.8); }
.realm-hero.has3d .realm-hero-text { text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6); }
.realm-hero.has3d .realm-hero-text, .realm-hero.has3d .ground-box { z-index: 2; pointer-events: none; }
/* Title screen: swap the flat SVG for the 3D turntable when it mounts */
.story-figure { width: 200px; height: 230px; display: flex; align-items: center; justify-content: center; }
.story-figure.has3d svg { display: none; }
.story-figure.has3d { cursor: grab; }
.story-figure canvas { width: 200px !important; height: 230px !important; }

/* ---- Rank (courage levels) ---- */
.rank-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: 12px;
}
.rank-chip {
  background: linear-gradient(135deg, rgba(246,199,106,.18), rgba(231,138,78,.14));
  border: 1px solid #8a6d35; color: #ffe1a1;
  border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .4px;
}
.rank-bar {
  width: min(220px, 40vw); height: 7px; border-radius: 4px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.rank-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #ffd86b, #ff9a3d);
  box-shadow: 0 0 10px rgba(255,170,80,.5);
  transition: width .6s ease;
}
.rank-next { font-size: 11px; color: #aab6d4; letter-spacing: .4px; }
.camp-stat.streak { border-color: #8a5a35; color: #ffcf9e; }

/* ---- Daily quest ("Today's step") ---- */
.quest-card {
  max-width: 480px; margin: 16px auto 0; text-align: start;
  background: linear-gradient(180deg, rgba(38,32,20,.92), rgba(24,20,12,.94));
  border: 1px solid #8a6d35; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,.4);
}
.quest-card.done { border-color: #3d8f7c; background: linear-gradient(180deg, rgba(18,36,32,.92), rgba(12,24,22,.94)); }
.quest-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.quest-flag { font-weight: 800; color: #ffe1a1; font-size: 13.5px; letter-spacing: .4px; }
.quest-card.done .quest-flag { color: #8fe3c9; }
.quest-chip {
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700;
  color: #d9a75a; background: rgba(246,199,106,.12); border: 1px solid rgba(246,199,106,.35);
  border-radius: 999px; padding: 3px 9px;
}
.quest-chip.done-chip { color: #8fe3c9; background: rgba(61,143,124,.14); border-color: #3d8f7c; }
.quest-body strong { display: block; color: #f2e6cd; font-size: 14.5px; margin-bottom: 2px; }
.quest-card.done .quest-body strong { color: #d9efe7; }
.quest-body p { margin: 0 0 10px; font-size: 12.5px; color: #b9a98a; }
.quest-card.done .quest-body p { color: #9dbfb4; }
/* The camp's story card: the quest card, carrying the six lanterns. */
.story-quest { max-width: 520px; }
html[dir="rtl"] .quest-card { text-align: right; }
.story-quest .lanterns { justify-content: flex-start; margin: 6px 0 10px; }
.quest-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.realm-view .story-card { margin: 12px 0; }
.realm-story-line { margin: 10px 0; font-size: 13.5px; color: var(--muted); }
.exposure-header .exp-focus { margin: 6px 0 0; font-size: 13.5px; color: var(--star); font-weight: 600; }
.quest-actions > * { flex: 1 1 auto; }
/* Title screen, returning: previously / next. */
.arrive-recap { font-size: 13.5px !important; }
.arrive-recap span { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-inline-end: 6px; }
html[dir="rtl"] .arrive-recap span { letter-spacing: 0; font-size: 12px; }
.arrive-next { font-weight: 650; opacity: .95 !important; }

/* ---- Level-complete hero: stars, numbers, rewards, next step ---- */
.vc-hero { position: relative; text-align: center; padding-bottom: 6px; }
.vc-hero .badge { display: inline-block; }
.vc-stars-wrap { margin: 6px 0 4px; }
.vc-stars { display: flex; justify-content: center; align-items: flex-end; gap: 10px; font-size: 54px; line-height: 1; margin: 8px 0 6px; }
.vc-stars i { font-style: normal; color: var(--star-dim); display: inline-block; text-shadow: none; }
.vc-stars i:nth-child(2) { font-size: 66px; transform: translateY(-6px); }
.vc-stars i.on {
  color: var(--star); text-shadow: 0 0 22px rgba(252,211,77,.55), 0 2px 0 #b8860b;
  animation: vcStarIn .7s cubic-bezier(.3,1.7,.5,1) both; animation-delay: calc(.35s + var(--i) * .38s);
}
.vc-stars i:nth-child(2).on { animation-name: vcStarInMid; }
@keyframes vcStarIn { 0% { transform: scale(0) rotate(-140deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes vcStarInMid { 0% { transform: translateY(-6px) scale(0) rotate(-140deg); opacity: 0; } 100% { transform: translateY(-6px) scale(1) rotate(0); opacity: 1; } }
.vc-stars-wrap.all .vc-stars { filter: drop-shadow(0 0 18px rgba(252,211,77,.35)); }
.vc-stars-head { font-weight: 800; font-size: 17px; color: var(--text); margin-bottom: 8px; }
.vc-best {
  display: inline-block; vertical-align: middle; margin-inline-start: 6px; padding: 2px 9px; border-radius: 999px;
  background: var(--star); color: #1c1603; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  animation: vcBest 1.6s ease 1.6s both;
}
@keyframes vcBest { 0% { transform: scale(.6); opacity: 0; } 40% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.vc-goals { list-style: none; margin: 0 auto 4px; padding: 0; display: inline-flex; flex-direction: column; gap: 5px; text-align: start; max-width: 520px; }
.vc-goals li { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.vc-goals li b { color: var(--star-dim); font-weight: 400; flex: 0 0 auto; }
.vc-goals li.done { color: var(--text); }
.vc-goals li.done b { color: var(--star); }
.vc-statrow { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.vc-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 92px;
  padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border-2);
}
.vc-sv { font-size: 17px; font-weight: 800; color: var(--text); white-space: nowrap; }
.vc-sv i { font-style: normal; color: var(--muted); font-weight: 600; margin: 0 2px; }
.vc-sl { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.vc-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.vc-chip {
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(124,209,197,.12); border: 1px solid rgba(124,209,197,.35); color: var(--accent);
  animation: vcChip .5s ease both; animation-delay: 1.5s;
}
.vc-chip:nth-child(2) { animation-delay: 1.65s; } .vc-chip:nth-child(3) { animation-delay: 1.8s; } .vc-chip:nth-child(4) { animation-delay: 1.95s; }
.vc-chip.gold { background: rgba(252,211,77,.12); border-color: rgba(252,211,77,.45); color: var(--star); }
.vc-chip.ember { background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.4); color: #fdba74; }
body.light-mode .vc-chip.ember { color: #c2410c; }
body.light-mode .vc-stat { background: var(--panel-2); }
@keyframes vcChip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vc-ms { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.vc-rank { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; max-width: 520px; margin: 12px auto 2px; font-size: 12.5px; }
.vc-rank-title { font-weight: 700; color: var(--text); white-space: nowrap; }
.vc-rank .rank-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.vc-rank .rank-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--star)); transition: width 1.4s cubic-bezier(.3,.8,.3,1); }
.vc-rank-n { color: var(--muted); white-space: nowrap; }
.vc-rank-n b { color: var(--star); font-size: 14px; }
.vc-cta { justify-content: center; margin-top: 16px; }
.vc-more { margin: 14px 0 6px; border: 1px solid var(--border-2); border-radius: 12px; padding: 0 14px; background: rgba(255,255,255,.02); }
.vc-more > summary { cursor: pointer; padding: 12px 0; font-size: 13.5px; font-weight: 600; color: var(--muted); list-style: none; }
.vc-more > summary::-webkit-details-marker { display: none; }
.vc-more > summary::before { content: "▸"; display: inline-block; margin-inline-end: 8px; transition: transform .2s ease; }
[dir="rtl"] .vc-more > summary::before { transform: scaleX(-1); }
.vc-more[open] > summary::before { transform: rotate(90deg); }
.vc-more[open] { padding-bottom: 12px; }
@media (max-width: 600px) {
  .vc-stars { font-size: 44px; gap: 8px; }
  .vc-stars i:nth-child(2) { font-size: 54px; }
  .vc-stat { min-width: 0; flex: 1 1 40%; }
  .vc-rank { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .vc-cta > * { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-stars i.on, .vc-best, .vc-chip { animation: none; }
  .vc-rank .rank-fill { transition: none; }
}

.companion-card {
  display: flex; gap: 14px; align-items: flex-start; margin: 12px 0;
  padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(251,146,60,.14), rgba(252,211,77,.06));
  border: 1px solid rgba(251,146,60,.45);
  animation: vcChip .6s ease 2.2s both;
}
.companion-card .cc-icon { font-size: 34px; line-height: 1; }
.companion-card .cc-body { display: flex; flex-direction: column; gap: 4px; }
.companion-card strong { font-size: 16px; }
.companion-card p { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.companion-card .btn-ghost { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .companion-card { animation: none; } }
/* ---- Victory celebration: a single calm ember rise ---- */
.victory-panel { position: relative; overflow: hidden; }
.ember-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ember-burst i {
  position: absolute; left: var(--x, 50%); bottom: -8px;
  width: calc(5px * var(--s, 1)); height: calc(5px * var(--s, 1)); border-radius: 50%;
  background: radial-gradient(circle, #ffd86b, #ff9a3d 70%);
  box-shadow: 0 0 8px rgba(255,170,80,.7);
  opacity: 0;
  animation: emberRise 2.6s ease-out forwards;
  animation-delay: var(--d, 0s);
}
@keyframes emberRise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  12%  { opacity: .95; }
  100% { transform: translateY(-78vh) scale(.4); opacity: 0; }
}

/* ---- Shadow-shrink strip on the victory screen ---- */
.shadow-shrink {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 10px 14px; margin: 10px 0;
}
.ss-blob {
  width: calc(22px + var(--rem, 1) * 26px); height: calc(18px + var(--rem, 1) * 21px);
  border-radius: 48% 52% 55% 45% / 60% 58% 42% 40%;
  background: radial-gradient(circle at 50% 30%, #222c4c, #0a0f20 78%);
  border: 1px solid #33406a;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  animation: blobDrift 6s ease-in-out infinite;
}
.ss-blob i { width: 5px; height: 5px; border-radius: 50%; background: #b7c6e8; box-shadow: 0 0 6px #b7c6e8; }
.ss-arrow { color: var(--muted); font-size: 15px; }
.ss-tamed { font-size: 22px; }
.ss-text { font-size: 13px; color: var(--muted); }
.ss-text strong { color: var(--text); }

/* ---- Living valley: dawn progression, talking bubble, art tilt ---- */
/* Dawn glow: painted under the content (sections are positioned and later
   in the DOM, so they stack above it) and scaled by tamed-realm count. */
.jw-dawnglow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(180deg, rgba(255,170,90,0) 0%, rgba(255,150,80,.10) 45%, rgba(255,170,90,.28) 100%);
  pointer-events: none; opacity: 0; transition: opacity 1s ease;
}
.jw-dawn-count { color: #ffd9b0 !important; font-weight: 600; }
.camp-bubble { transition: opacity .35s ease, transform .35s ease; }
.camp-bubble.swap { opacity: 0; transform: translateY(4px); }
.realm-thumb { transition: transform .3s ease; will-change: transform; }
/* Shine sweep across the realm art on hover — a glassy 3D-card read. */
.realm-thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.realm-node:hover .realm-thumb::after, .realm-node:focus-visible .realm-thumb::after {
  transform: translateX(120%);
}

@media (prefers-reduced-motion: reduce) {
  .ember-burst { display: none; }
  .ss-blob { animation: none; }
  .rank-fill { transition: none; }
  .jw-dawnglow, .camp-bubble, .realm-thumb, .realm-thumb::after { transition: none; }
}

/* ============ Stage HUD layout v2 (in-frame, tidy, one family) ============
   All transient in-scene messages share ONE visual family (dark glass pill,
   soft accent border, same radius/blur) and live in FIXED bottom-centre
   slots that never cover the middle of the view:
      captions (guidance)  → slot 1, bottom 56
      reach-hint           → slot 2, above captions
      ctx-prompt (events)  → slot 3, top of the stack
   When the hotbar is open (.cmds-open) the whole stack slides up above it.
   Late in the sheet on purpose: these override the older per-element
   positions at equal specificity. */
.stage .captions,
.stage .ctx-prompt,
.stage .reach-hint {
  background: rgba(10, 14, 28, .78);
  border: 1px solid rgba(124, 209, 197, .28);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
  line-height: 1.4;
  text-align: center;
  overflow-wrap: break-word;
}
.stage .captions {
  bottom: 56px; font-size: 13.5px; padding: 8px 14px;
  max-width: min(560px, 84%);
  transition: opacity .3s ease, bottom .25s ease;
}
.stage .reach-hint { font-size: 12.5px; transition: opacity .3s ease, bottom .25s ease; }
.stage .ctx-prompt {
  bottom: 148px; font-size: 13px; max-width: min(420px, 84%);
  transition: opacity .35s ease, transform .35s ease, bottom .25s ease;
}
/* Hotbar open: the message stack rides up above it (bar ≈ 64px + height). */
.stage.cmds-open .captions   { bottom: 132px; }
.stage.cmds-open .ctx-prompt { bottom: 224px; }
/* Fullscreen: the hold/continue row floats INSIDE the stage (bottom 22px,
   ~72px tall), right where slots 1–2 sit — captions and the reach hint
   rendered underneath the buttons. Lift the stack clear of it (and of the
   command bar above it when that is open). Always, not just while the
   chrome shows, so the text doesn't bob as the controls fade. */
.stage:fullscreen .reach-hint, .stage:-webkit-full-screen .reach-hint { bottom: 104px; }
.stage:fullscreen .captions,   .stage:-webkit-full-screen .captions   { bottom: 140px; }
.stage:fullscreen .ctx-prompt, .stage:-webkit-full-screen .ctx-prompt { bottom: 226px; }
.stage.cmds-open:fullscreen .reach-hint, .stage.cmds-open:-webkit-full-screen .reach-hint { bottom: 162px; }
/* The intro hint sat under that row too (first click/key goes fullscreen,
   and the hint stays until the player moves). The joystick lane has its
   own placement. */
.stage:fullscreen:not(:has(.joystick)) .controls-hint,
.stage:-webkit-full-screen:not(:has(.joystick)) .controls-hint { bottom: 104px; }
.stage.cmds-open:fullscreen:not(:has(.joystick)) .controls-hint,
.stage.cmds-open:-webkit-full-screen:not(:has(.joystick)) .controls-hint { bottom: 162px; }
.stage.cmds-open:fullscreen .captions,   .stage.cmds-open:-webkit-full-screen .captions   { bottom: 198px; }
.stage.cmds-open:fullscreen .ctx-prompt, .stage.cmds-open:-webkit-full-screen .ctx-prompt { bottom: 284px; }
@media (max-width: 600px) {
  .stage .captions {
    bottom: 52px; font-size: 12px; padding: 6px 11px; max-width: 90%;
  }
  /* The message stack, bottom-up: captions low in the middle; the reach
     hint above the Ground-me pill (it ends ~163 px up — at 126 the hint's
     first words sat under the pill); the context prompt above that. With
     the bar open the stack starts above its measured top edge
     (--cmdbar-top, set by the controls toggle). */
  .stage .reach-hint { bottom: 172px; }
  .stage .ctx-prompt { bottom: 236px; font-size: 12px; max-width: 90%; }
  .stage.cmds-open .reach-hint { bottom: max(172px, calc(var(--cmdbar-top, 176px) + 8px)); }
  .stage.cmds-open .captions   { bottom: max(228px, calc(var(--cmdbar-top, 176px) + 64px)); }
  .stage.cmds-open .ctx-prompt { bottom: max(292px, calc(var(--cmdbar-top, 176px) + 128px)); }
  /* The hold pill shares the top row with the coach card: cap it short of
     the card, and drop the (full) bar once it becomes "continue". */
  .stage:has(.dog-coach) .hold-pill { max-width: calc(100% - 200px); }
  /* Two lines, bar underneath, rather than "walk…" at 360 px. */
  .stage .hold-pill { flex-wrap: wrap; row-gap: 4px; border-radius: 12px; }
  .stage .hold-pill .hp-txt {
    min-width: 0; flex: 1 1 100%; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .stage .hold-pill .hp-bar { flex: 1 1 100%; width: auto; }
  .stage .hold-pill.complete .hp-bar { display: none; }
}

/* ---- The Real Path (real-world bridge quests) ---- */
.bridge-block {
  margin-top: 18px; border-radius: var(--radius-lg); padding: 16px 18px;
  background: linear-gradient(180deg, rgba(22, 40, 34, .55), rgba(14, 26, 24, .65));
  border: 1px solid #2e6b58;
}
/* The Valley — the in-game trials, given a matching frame so the two paths
   read as a pair. The Real Path used to sit below the oath, the Guide's
   notes and all five trials, i.e. where nobody scrolls; it is the part that
   actually transfers out of the game, so it now sits directly under them. */
.path-block {
  margin-top: 18px; border-radius: var(--radius-lg); padding: 16px 18px;
  background: linear-gradient(180deg, rgba(24, 28, 48, .55), rgba(14, 18, 34, .65));
  border: 1px solid var(--border-2);
}
.path-block .bridge-head h3 { color: #b9c4ee; }
/* Who's in the yard — the dog realm's two named residents and how well each
   one knows this traveller. */
.companion-block {
  margin-top: 18px; border-radius: var(--radius-lg); padding: 16px 18px;
  background: linear-gradient(180deg, rgba(40,32,24,.55), rgba(26,20,15,.65));
  border: 1px solid #6b543a;
}
.companion-block .bridge-head h3 { color: #f0cfa0; }
.dog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dog-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 10px 14px;
}
.dog-row.mid  { border-color: #8a6a42; }
.dog-row.high { border-color: #c79a56; background: linear-gradient(180deg, rgba(44,34,20,.6), var(--panel)); }
.dog-id { display: flex; flex-direction: column; min-width: 140px; }
.dog-id strong { font-size: 15px; }
.dog-species { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.dog-bond { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 190px; }
.dog-band { font-size: 13px; color: #f0cfa0; font-weight: 600; }
.dog-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.13); overflow: hidden; }
.dog-track i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #c79a56, #f0cfa0); transition: width .5s ease;
}
.dog-when { font-size: 11px; color: var(--muted); }
.bridge-head h3 { margin: 0 0 4px; color: #8fe3c9; }
.bridge-sub { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.bridge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bridge-step {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 10px 14px;
}
.bridge-step.open { border-color: #2e6b58; }
.bridge-step.done { border-color: #3d8f7c; background: linear-gradient(180deg, rgba(20,40,36,.6), var(--panel)); }
.bridge-step.locked { opacity: .62; }
.bridge-mark { font-size: 17px; line-height: 1.3; flex: 0 0 auto; }
.bridge-text { flex: 1; }
.bridge-text strong { font-size: 14px; color: var(--text); }
.bridge-step.done .bridge-text strong { color: #b9e8d9; }
.bridge-text p { margin: 2px 0 0; font-size: 12.5px; }
.bridge-done-note { color: #7cd1a5; }
.bridge-locked-note { font-style: italic; }
.bridge-btn { flex: 0 0 auto; align-self: center; font-size: 12.5px; padding: 8px 14px; border-color: #2e6b58; }
.bridge-invite {
  margin: 14px 0; border-radius: 14px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(22, 40, 34, .8), rgba(14, 26, 24, .85));
  border: 1px solid #2e6b58;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.bridge-invite-kicker {
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 800; color: #8fe3c9;
}
.bridge-invite strong { font-size: 15px; color: #d9efe7; }
.bridge-invite p { margin: 2px 0 8px; font-size: 12.8px; color: #9dbfb4; }
.camp-stat.worldsteps { border-color: #2e6b58; color: #a9e8d2; }
.ws-modal { max-width: 420px; }
@media (max-width: 560px) {
  .bridge-step { flex-wrap: wrap; }
  .bridge-btn { align-self: flex-start; margin-left: 29px; }
}

/* ---- The Mirror (fear check-ins) ---- */
.mirror-invite {
  margin: 4px 0 10px; border-radius: 14px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(38, 32, 52, .75), rgba(24, 20, 36, .8));
  border: 1px solid #5b5182;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.mirror-invite .bridge-invite-kicker { color: #c3b8ec; }
.mirror-invite strong { font-size: 15px; color: #e4ddf7; }
.mirror-invite p { margin: 2px 0 8px; font-size: 12.8px; color: #a99ecf; }
.mirror-invite.compact { margin: 14px 0; }
.mirror-invite.compact p { margin: 2px 0 6px; }
.mirror-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 10px; border-radius: 12px; padding: 8px 14px;
  background: rgba(50, 43, 74, .45); border: 1px solid #4a4170;
  font-size: 13px; color: #cfc6ea;
}
.mirror-chip strong { color: #e4ddf7; }
.mirror-recheck { font-size: 12px; padding: 6px 12px; min-height: 34px; }
.fc-modal { max-width: 560px; max-height: 86vh; overflow-y: auto; }
.fc-item { margin-bottom: 12px; }
.fc-q { margin: 0 0 6px; font-size: 13.5px; color: var(--text); }
.fc-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.fc-opt {
  flex: 1 1 0; min-width: 58px; min-height: 46px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 5px 4px; cursor: pointer;
}
.fc-opt .fc-n { font-weight: 800; font-size: 14px; color: var(--text); }
.fc-opt .fc-lab { font-size: 9.5px; color: var(--muted); letter-spacing: .2px; }
.fc-opt.sel { border-color: var(--accent); background: rgba(124, 209, 197, .12); }
.fc-opt.sel .fc-n { color: var(--accent); }
.fc-result { margin-top: 12px; border-top: 1px solid var(--border-2); padding-top: 12px; }
.fc-score { display: flex; align-items: baseline; gap: 6px; font-size: 15px; }
.fc-score strong { font-size: 26px; }
.fc-score.band-calm strong { color: #7cd1a5; }
.fc-score.band-mild strong { color: #d1c67c; }
.fc-score.band-warm strong { color: #e8a25c; }
.fc-score.band-hot strong { color: #e87a6a; }
.fc-delta { margin: 6px 0 0; font-size: 12.8px; color: var(--muted); }
.fc-delta.down { color: #7cd1a5; }
.fc-delta.up { color: #e8a25c; }

/* ---- Touch-mode stage fixes ---- */
/* The joystick owns the bottom-left lane at EVERY width (a touch-capable
   wide device — iPad landscape, touch laptop — used to get the hint box
   underneath the joystick). :has() is supported everywhere we ship 3D. */
.stage:has(.joystick) .controls-hint {
  left: 112px; bottom: 14px; max-width: min(420px, 58%);
}
/* ...and above the "Show controls" pill, which shares the bottom edge on
   phones and covered the hint's last line — the 🛟 "ground yourself" one.
   (The phone rule's bottom: 62px lost to the :has() rule above.) Left of
   128px clears the Ground me pill (≈ 123px wide in English). */
.stage:has(.joystick):has(.cmd-toggle) .controls-hint { left: 128px; bottom: 62px; }
/* Open command bar on touch: reserve the left lane for the joystick and
   the Ground-me pill (they collided with the first buttons), and hide the
   intro hint while the bar is open — it re-shows when controls collapse.
   NOTE: the bar is a SIBLING of #stage inside .stage-wrap, so the :has()
   guard must live on the wrap, not the stage. */
.stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) { padding-left: 118px; }
.stage.cmds-open:has(.joystick) .controls-hint { display: none; }
/* Same on any touch screen: the open bar's buttons say what the hint says
   (the MRI's "Slide in" sat on top of "Tap Slide in when you're ready"). */
@media (pointer: coarse) { .stage.cmds-open .controls-hint { display: none; } }
/* Phones held sideways: the stage is ~300 px tall and the full coach card
   ran from top to bottom over the pills. Compact card (next goal only),
   callout centred above the room. Gyro look is portrait-mapped — hidden. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .stage .dog-coach { top: 60px; right: 8px; width: 170px; padding: 7px 9px 6px; border-radius: 12px; }
  .stage .dog-coach canvas.dc-wave { height: 30px !important; }
  .dog-coach .dc-legend { display: none; }
  .dog-coach .dc-goal { display: none; }
  .dog-coach .dc-goal.next, .dog-coach.dc-open .dc-goal { display: flex; }
  .dog-coach .dc-goals { font-size: 11px; }
  .stage .dc-callout { top: 92px; bottom: auto; left: auto; right: 190px; width: min(320px, calc(100% - 420px)); font-size: 12.5px; }
  .stage .dc-callout::after { display: none; }
  .stage .gyro-btn { display: none !important; }
}
/* Both live on the bottom edge: a long reach hint ("the dog is sniffing —
   stay still, or click to reach out") slid over the intro hint and left
   half of each unreadable. The live one wins; the intro returns after. */
.stage:has(.reach-hint[style*="opacity: 1"]) .controls-hint { opacity: 0 !important; }
@media (max-width: 600px) {
  .stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) .cmd-btn {
    font-size: 12px; padding: 8px 10px; min-height: 40px;
  }
  /* Two columns beside the joystick lane, labels allowed to wrap. As a
     wrapping flex row, one label a few px too long (Persian, or any 360 px
     phone) dropped every button onto its own line — a tall column over
     the scene. */
  .stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) .cmd-btn {
    white-space: normal; line-height: 1.25; text-align: start;
  }
}
/* Compact creature trust HUD on phones: at full size it covered half the
   room. Name + bar + % stay; the hint shrinks; width is capped. */
@media (max-width: 480px) {
  .trust-hud { max-width: 46%; padding: 8px 10px; }
  .trust-hud .trust-name { font-size: 12.5px; }
  .trust-hud .trust-hint { font-size: 10px; opacity: .85; line-height: 1.35; }
}

/* ---- First-run consent + About + backup nudge ---- */
.consent-overlay { z-index: 300; }
.consent-modal { max-width: 520px; }
.consent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.consent-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--text); line-height: 1.5;
}
.consent-list li > span:first-child { flex: 0 0 auto; font-size: 16px; margin-top: 1px; }
.consent-list a { color: var(--accent); font-weight: 700; }
.about-view h3 { margin-top: 18px; }
.about-view a { color: var(--accent); }
.about-credits { font-size: 13px; }
.backup-nudge {
  max-width: 480px; margin: 14px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: rgba(50, 43, 30, .55); border: 1px solid #7a6a3a; border-radius: 12px;
  padding: 9px 14px; font-size: 12.5px; color: #e8dcbb; text-align: start;
}
.backup-nudge-btns { display: flex; align-items: center; gap: 8px; }
.backup-nudge .btn-ghost { font-size: 12px; padding: 6px 12px; min-height: 34px; }
.backup-later {
  background: none; border: none; color: #a89a74; font-size: 12px;
  text-decoration: underline; cursor: pointer; padding: 6px; min-height: 34px;
}

/* ---- Progress report (screen + print) ---- */
.report-view h2 { margin-bottom: 4px; }
.report-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.report-line { font-size: 13.5px; margin: 2px 0 6px; }
.report-note {
  font-size: 12px; color: var(--muted); border-left: 3px solid var(--border-2);
  padding-left: 10px; margin: 10px 0 18px;
}
.report-fear { margin: 18px 0 8px; }
.report-fear h3 { margin-bottom: 2px; }
.report-clinical { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.report-chart { max-width: 560px; margin: 6px 0; }
.report-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0 10px;
}
.report-table th, .report-table td {
  text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border-2);
}
.report-table th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; }
.report-ws { margin: 4px 0 10px; padding-left: 18px; font-size: 12.8px; color: var(--text); }
.report-ws li { margin-bottom: 3px; }
/* On very narrow screens the table scrolls inside the panel, never the page */
@media (max-width: 640px) {
  .report-table { display: block; overflow-x: auto; }
}
/* ---- RTL (Persian) ----
   <html dir="rtl"> is stamped by i18n applyLang(). Flex/grid mirror on
   their own; these overrides fix the handful of hard-coded left/right
   positions. The 3D stage and the clinician report deliberately STAY LTR
   (scene HUD geometry, and the report is written in English for now). */
html[lang="fa"] body {
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
  line-height: 1.75;
}
html[dir="rtl"] .menu-drawer { left: auto; right: 0; transform: translateX(100%); }
html[dir="rtl"] .menu-drawer.open { transform: translateX(0); }
html[dir="rtl"] .realm-node.side-r { margin-left: 0; margin-right: min(64px, 8%); }
html[dir="rtl"] .realm-node.side-l { margin-right: 0; margin-left: min(64px, 8%); }
html[dir="rtl"] .realm-body { text-align: right; }
html[dir="rtl"] .trial-link { margin-left: 0; margin-right: 27px; border-left: none; border-right: 2px dashed #3a4a72; }
@media (max-width: 560px) {
  html[dir="rtl"] .trial-link { margin-right: 21px; }
  html[dir="rtl"] .bridge-btn { margin-left: 0; margin-right: 29px; }
}
html[dir="rtl"] .you-marker { left: auto; right: 8px; }
html[dir="rtl"] .realm-shadow, html[dir="rtl"] .realm-tamed { right: auto; left: 8px; }
html[dir="rtl"] .report-note { border-left: none; border-right: 3px solid var(--border-2); padding-left: 0; padding-right: 10px; }
/* Keep the 3D stage + its HUD in LTR geometry regardless of UI language */
html[dir="rtl"] .stage, html[dir="rtl"] .stage-wrap { direction: ltr; }
/* ...but the TEXT on it reads right-to-left. Under the LTR stage a Persian
   sentence rendered with its full stop first and a Latin name (the dog's)
   stranded at the wrong end. Positions are set by left/right, so flipping
   direction on these overlays only reorders what's inside them. */
html[dir="rtl"] .stage-wrap :is(.controls-hint, .reach-hint, .captions, .ctx-prompt,
  .countdown, .grounding-text, .grounding-exit-hint, .pl-release, .achievement-toast,
  .dog-coach, .dc-callout, .dc-read, .exp-panel, .hold-pill, .hold-label, .stage-breath,
  .cmd-btn, .cmd-toggle, .ground-btn, .ml-toggle, .camera-toggle, .demo-chip,
  .trust-hud, .step-controls button, .scene-cmd-bar) { direction: rtl; }
/* The report stays English/LTR until it's translated */
html[dir="rtl"] .report-view { direction: ltr; text-align: left; }
html[dir="rtl"] .lang-btn, .lang-btn { font-weight: 800; font-size: 13px; }

@media print {
  /* The report prints clean: white page, black ink, no app chrome. */
  body { background: #fff !important; }
  header.brand, .report-actions, .menu-drawer, .menu-backdrop, .settings-drawer { display: none !important; }
  .app { max-width: 100%; padding: 0; }
  .panel.report-view {
    background: #fff; border: none; box-shadow: none; color: #111; padding: 0;
  }
  .report-view h2, .report-view h3, .report-view p, .report-view li,
  .report-view td, .report-view th, .report-line { color: #111 !important; }
  .report-note { color: #444 !important; border-left-color: #999; }
  .report-clinical { color: #0a6b60 !important; }
  .report-table th, .report-table td { border-bottom: 1px solid #ccc; }
  .report-fear { break-inside: avoid; }
}
/* ==========================================================================
   Mobile-first component layer
   --------------------------------------------------------------------------
   The app grew up on a desktop viewport: fixed panels, hover affordances,
   keyboard hints, and content that assumes a mouse can reach the top of the
   screen. On a phone the top of the screen is the least reachable place
   there is, and the notch and home indicator will happily eat anything
   placed there. Everything below is touch-first and thumb-first.

   `viewport-fit=cover` is already set on the viewport meta, so env() insets
   resolve to real values on a notched device and to 0 everywhere else —
   which means these rules are safe to apply unconditionally.
   ========================================================================== */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* The smallest square a finger reliably hits. Apple says 44pt, Google 48dp;
     44 is the floor, not the target. */
  --touch: 44px;
  --sheet-radius: 22px;
}

/* ---- Full-bleed stage: 3D behind everything, edge to edge ---- */
.mob-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0b1020;
}
.mob-stage canvas { width: 100%; height: 100%; display: block; }
/* A scrim so overlaid text stays legible whatever the 3D is doing behind it.
   Strongest at top and bottom where the UI actually sits, clear through the
   middle so the space itself is never muddied. */
.mob-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(6,10,20,0.72) 0%, rgba(6,10,20,0) 26%),
    linear-gradient(to top,    rgba(6,10,20,0.86) 0%, rgba(6,10,20,0) 38%);
}

/* ---- Bottom sheet: the primary surface on a phone ---- */
.mob-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  padding: 10px calc(16px + var(--safe-r)) calc(14px + var(--safe-b)) calc(16px + var(--safe-l));
  box-shadow: 0 -18px 48px rgba(0,0,0,0.45);
  /* Sheets animate from below, never fade — a fade reads as a modal, a rise
     reads as something you pulled up, which is what a thumb just did. */
  animation: mobSheetRise 260ms cubic-bezier(0.22, 1, 0.36, 1);
  max-height: 76dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The creator has to leave room for the thing being created. At the default
   height the sheet covered everything below the traveler's collarbone. */
.mob-sheet-compact { max-height: 54dvh; }
@keyframes mobSheetRise { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mob-sheet { animation: none; } }
.mob-sheet-grab {
  width: 38px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,0.26);
  margin: 0 auto 12px;
}
.mob-sheet h2 { font-size: 19px; margin: 0 0 4px; line-height: 1.25; }
.mob-sheet p  { font-size: 14px; margin: 0 0 12px; opacity: 0.82; line-height: 1.45; }

/* ---- Thumb bar: actions live where the thumb already is ---- */
.mob-thumb {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.mob-thumb > * { flex: 1; }
.mob-btn {
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font: inherit;
  font-weight: 650;
  font-size: 15px;
  cursor: pointer;
  /* Kill the 300ms tap delay and the grey flash iOS paints over taps. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 90ms ease, background 140ms ease;
}
.mob-btn:active { transform: scale(0.97); }
.mob-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b1020;
  border-color: transparent;
  font-weight: 750;
}
.mob-btn-ghost { background: transparent; }

/* ---- Option chips: horizontal scroll beats a wrapped grid on a phone ---- */
.mob-row { margin-bottom: 14px; }
.mob-row-label {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 7px;
}
.mob-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* Snap so a flick lands on an option rather than between two. */
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mob-chips::-webkit-scrollbar { display: none; }
.mob-chip {
  scroll-snap-align: center;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mob-chip[aria-pressed="true"] {
  background: var(--accent);
  color: #0b1020;
  border-color: transparent;
  font-weight: 700;
}

/* ---- Colour swatches: round, finger-sized, ring marks the selection ---- */
.mob-swatch {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mob-swatch[aria-pressed="true"] {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--accent);
}

/* ---- Top bar: minimal, and clear of the notch ---- */
.mob-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) 10px calc(14px + var(--safe-l));
  pointer-events: none;
}
.mob-top > * { pointer-events: auto; }
.mob-top-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.mob-icon-btn {
  width: var(--touch); height: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,14,26,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mob-spacer { flex: 1; }
.mob-lang-chip {
  min-height: 44px; padding: 0 16px; margin-inline-end: 8px; border-radius: 999px;
  background: rgba(10, 14, 28, .55); border: 1px solid rgba(255,255,255,.28); color: #eef2ff;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; backdrop-filter: blur(8px);
}
.mob-lang-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Hero title over the stage ---- */
.mob-hero {
  position: fixed;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-58%);
  z-index: 10;
  text-align: center;
  padding: 0 calc(24px + var(--safe-l)) 0 calc(24px + var(--safe-r));
  pointer-events: none;
}
/* The returning title screen carries a taller sheet (Mira's note, what's
   next), so its headline sits higher to stay clear of it. */
.mob-hero-high { top: 25%; transform: translateY(-50%); }
.mob-hero-kicker {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.86;
  margin: 0 0 10px;
}
.mob-hero-title {
  font-size: clamp(30px, 9vw, 46px);
  line-height: 1.06;
  margin: 0;
  font-weight: 760;
  text-shadow: 0 4px 28px rgba(0,0,0,0.7);
}

/* On a phone the 3D stage IS the page, so the document must not scroll
   behind it or the address bar will fight every drag. */
body.mob-immersive { overflow: hidden; overscroll-behavior: none; }

/* Anything that only makes sense with a keyboard or a mouse. */
@media (pointer: coarse) { .no-touch { display: none !important; } }

/* Immersive views ship their own .mob-top, so the desktop brand header would
   otherwise render a second title and a second set of icons on top of it. */
body.mob-immersive header.brand { display: none !important; }
body.mob-immersive #view {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
body.mob-immersive .app { padding: 0 !important; }
/* ---- Lite compositing (below the high graphics tier) ----
   A backdrop-filter re-reads and re-blurs whatever is behind it each time
   that changes — over the live 3D stage, every frame — and Chromium keeps
   drawing one even at opacity 0. A phone trial composited ~17 of them (HUD,
   coach card, hints, joystick, command bar), the title sheet blurred 18px
   over the animated room. Their tinted backgrounds (.55–.9 alpha) carry the
   legibility on their own; below the high tier (html.fx-lite, set from the
   resolved Graphics tier) the frosted glass goes. The grounding overlay's
   deliberate desaturation stays. */
html.fx-lite *:not(.grounding-overlay) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ================= LANTERNWALK — brand + title screen =================
   The wordmark, the header lantern, and the night valley that replaced the
   empty 3D room behind the title. The valley is a place, so it keeps its
   own night palette in light mode too. */
.lw-lamp { width: 1em; height: 1.33em; flex: 0 0 auto; color: #f3d9a4; filter: drop-shadow(0 0 6px rgba(255, 190, 90, .55)); }
.lw-lamp-flame { transform-origin: 12px 21px; animation: lwFlame 2.6s ease-in-out infinite; }
@keyframes lwFlame { 0%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(.9, 1.06); opacity: .88; } 70% { transform: scale(1.05, .95); } }
.brand .lw-head { gap: 7px; font-size: 18px; }
.lw-head .lw-lamp { font-size: 17px; }
.lw-name {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-weight: 700; letter-spacing: .2px;
}
html[lang="fa"] .lw-name, html[lang="fa"] .lw-mark span, html[lang="fa"] .lw-mark-sm span { font-family: inherit; }

.mob-valley { background: #050816; }
.mob-valley .valley-hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vh-glass { fill: rgba(18, 22, 38, .85); transition: fill .6s ease; }
.vh-flame { fill: #ffcf6e; opacity: 0; }
.vh-glow { opacity: 0; transition: opacity .8s ease; }
.vh-lantern.on .vh-glass { fill: rgba(255, 214, 140, .32); }
.vh-lantern.on .vh-flame { opacity: 1; }
.vh-lantern.on .vh-glow { opacity: .95; }
.vh-lantern.waiting .vh-glow { animation: vhWait 3.2s ease-in-out infinite; }
.vh-lantern.waiting .vh-flame { animation: vhWaitFlame 3.2s ease-in-out infinite; }
@keyframes vhWait { 0%, 100% { opacity: .08; } 50% { opacity: .5; } }
@keyframes vhWaitFlame { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }
.vh-tw { animation: vhTwinkle var(--d, 3s) ease-in-out infinite; }
@keyframes vhTwinkle { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
.vh-fly { fill: #ffe7a3; opacity: 0; animation: vhFly var(--d, 7s) ease-in-out infinite; animation-delay: calc(var(--k) * -0.9s); }
@keyframes vhFly {
  0% { opacity: 0; transform: translate(0, 0); }
  30% { opacity: .85; }
  60% { opacity: .3; transform: translate(14px, -22px); }
  100% { opacity: 0; transform: translate(-8px, -40px); }
}
@media (prefers-reduced-motion: reduce) {
  .vh-tw, .vh-fly, .vh-lantern.waiting .vh-glow, .vh-lantern.waiting .vh-flame, .lw-lamp-flame { animation: none; }
  .vh-lantern.waiting .vh-glow { opacity: .3; }
}
/* The valley needs no scrim at mid-height — only where text sits. */
.mob-valley::after {
  background:
    linear-gradient(to bottom, rgba(5,8,22,.55) 0%, rgba(5,8,22,0) 30%),
    linear-gradient(to top, rgba(5,8,22,.8) 0%, rgba(5,8,22,0) 34%);
}

.arrive-hero { top: max(70px, calc(9dvh + var(--safe-t, 0px))); transform: none; }
.arrive-hero.mob-hero-high { top: max(70px, calc(9dvh + var(--safe-t, 0px))); transform: none; }
.lw-mark {
  display: inline-flex; align-items: center; gap: .22em;
  margin: 0 0 14px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-size: clamp(40px, 11.5vw, 76px); font-weight: 700; line-height: 1; letter-spacing: -.01em;
  color: #fbf1dc;
  text-shadow: 0 0 34px rgba(255, 186, 92, .35), 0 4px 24px rgba(0, 0, 0, .6);
}
.lw-mark .lw-lamp { font-size: .62em; }
.lw-mark-sm {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700; font-size: 17px; color: #fbf1dc; opacity: .92;
}
.lw-tagline {
  margin: 0 auto; max-width: 15em;
  font-size: clamp(21px, 5.6vw, 32px); line-height: 1.2; font-weight: 650;
  color: #eef2ff; text-shadow: 0 3px 20px rgba(0, 0, 0, .75);
}
.lw-sub {
  margin: 12px auto 0; max-width: 24em;
  font-size: clamp(14px, 3.8vw, 17px); color: #f3d9a4; opacity: .9;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}
.arrive-sheet { padding-top: 16px; }
.arrive-sheet > p:first-child { margin-top: 0; }
.arrive-link {
  display: block; width: 100%; margin: 10px 0 0; padding: 10px;
  background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  min-height: var(--touch, 44px);
}
.arrive-link:hover { color: var(--text); }
/* Wide screens: the sheet is a card under the valley, not a full-width bar. */
@media (min-width: 760px) {
  .arrive-sheet {
    left: 50%; right: auto; bottom: 28px; transform: translateX(-50%);
    width: min(540px, calc(100% - 48px));
    border-radius: 20px; border: 1px solid rgba(255,255,255,.10);
    animation: none;
  }
}
/* A phone held sideways: the sheet covered the wordmark and tagline. Split
   the screen instead — the valley's title on the left, the choices right. */
@media (orientation: landscape) and (max-height: 500px) {
  body.landing-mode .mob-hero { left: 0; right: 50%; padding: 0 12px; }
  body.landing-mode .arrive-sheet {
    left: auto; right: 0; top: 0; bottom: 0; transform: none;
    width: 50%; max-height: none; border-radius: 0;
    border: 0; border-left: 1px solid rgba(255,255,255,.10);
    animation: none;
  }
}
.consent-crisis { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* A crisis line has to be easy to hit: a full 44px target, not a 15px word. */
.consent-crisis a, .crisis-link {
  color: var(--accent); font-weight: 700;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
}
.consent-modal .bridge-invite-kicker { display: inline-flex; align-items: center; gap: 6px; }
.consent-modal .bridge-invite-kicker .lw-lamp { font-size: 12px; }
.vh-moon-n { display: none; }
@media (max-aspect-ratio: 1/1) { .vh-moon-w { display: none; } .vh-moon-n { display: inline; } }
.consent-modal .consent-crisis { margin-top: 16px; }
/* The one-card orientation in creature/place realms: points, doesn't block. */
.tour-overlay.soft { background: none; pointer-events: none; }
.tour-overlay.soft .tour-card { pointer-events: auto; }
.tour-overlay.soft .tour-spot { box-shadow: 0 0 24px rgba(124, 209, 197, .55); animation: tourPulseSoft 1.6s ease-in-out infinite; }
@keyframes tourPulseSoft { 0%, 100% { box-shadow: 0 0 18px rgba(124, 209, 197, .45); } 50% { box-shadow: 0 0 34px rgba(124, 209, 197, .9); } }
/* Theater: stage + the controls row under it fill exactly one screen. The
   row's height is measured into --stepctl-h (fitTheaterStage). */
.stage.theater {
  height: calc(100vh - var(--stepctl-h, 80px));
  height: calc(100dvh - var(--stepctl-h, 80px));
  min-height: 260px;
}
@media (max-width: 600px) {
  /* One row on a phone: the two buttons. The in-stage hold pill already
     shows the hold, so the label and the wall clock don't need rows of
     their own under it. */
  .exposure-panel .step-controls { flex-wrap: nowrap; padding-top: 10px; padding-bottom: 10px; }
  .exposure-panel .step-controls .timer, .exposure-panel .step-controls .hold-label { display: none; }
  .exposure-panel .step-controls > button { flex: 1 1 0; min-width: 0; white-space: normal; }
}
@media (max-width: 600px) {
  .exposure-panel .step-controls > button { font-size: 14px; padding: 10px 12px; }
}
.menu-count {
  display: inline-block; min-width: 18px; padding: 0 6px; margin-inline-start: 6px;
  border-radius: 99px; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  background: linear-gradient(135deg, #f6c76a, #e78a4e); color: #221a08;
}
@media (max-width: 520px) {
  .brand .lw-head { font-size: 16px; gap: 5px; }
}
img.cast-face { display: block; border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 50% 30%, #4a4360 0%, #1a2036 70%); }
img.cast-face.baked { animation: castIn .35s ease; }
@keyframes castIn { from { opacity: .2; } to { opacity: 1; } }
.menu-avatar img.cast-face { width: 56px; height: 56px; }
/* The creator's "Walk in" stays in reach at the foot of the sheet while the
   look options scroll under it. */
.mob-sheet .tw-cta {
  position: sticky; bottom: calc(-14px - var(--safe-b, 0px)); z-index: 2;
  margin: 10px -16px 0; padding: 10px 16px calc(12px + var(--safe-b, 0px));
  background: linear-gradient(to top, color-mix(in srgb, var(--panel) 96%, transparent) 70%, transparent);
}
/* Mira speaks the coach's lessons: her face beside each one. */
.stage .dc-callout:has(.dc-mira) { display: flex; gap: 10px; align-items: flex-start; }
.stage .dc-mira {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(255, 214, 140, .45);
}
.stage .dc-mira > * { width: 30px; height: 30px; display: block; }
.stage .dc-say { min-width: 0; }

/* ============ Quiet HUD (v3) — one message, stable buttons ============
   Players called the trial "notifications and buttons constantly
   appearing". The rules that answer it:
   • ONE message slot. Captions, context beats, Mira's lessons and the reach
     hint all sit in the same bottom-centre spot, and the lane in engine.js
     lets only one of them be up at a time (the reach hint steps aside
     whenever anything else is speaking: .lane-busy).
   • Nothing blinks. The chrome no longer auto-hides and re-appears on every
     key press; the hotbar is open from the start and has no toggle.
   • No duplicates. Desktop drops the hold pill (the row under the stage
     shows the hold); the coach card shows the next goal, not all three.
   • Phones: actions are a 2×2 thumb cluster bottom-right, opposite the
     joystick, instead of a band across the bottom third of the view.
   Late in the sheet on purpose: these override the older positions. */

/* ---- the message slot ---- */
.stage-wrap .stage .captions,
.stage-wrap .stage .ctx-prompt,
.stage-wrap .stage .reach-hint,
.stage-wrap .stage .dc-callout {
  left: 50%; right: auto; top: auto;
  bottom: 64px;
  max-width: min(480px, calc(100% - 24px));
  white-space: normal;
}
.stage-wrap .stage.cmds-open .captions,
.stage-wrap .stage.cmds-open .ctx-prompt,
.stage-wrap .stage.cmds-open .reach-hint,
.stage-wrap .stage.cmds-open .dc-callout {
  bottom: calc(var(--cmdbar-top, 58px) + 10px);
}
.stage-wrap .stage .captions { transform: translateX(-50%); }
.stage-wrap .stage .reach-hint { transform: translateX(-50%); }
.stage-wrap .stage .ctx-prompt { transform: translateX(-50%) translateY(6px); }
.stage-wrap .stage .ctx-prompt.visible { transform: translateX(-50%); }
.stage-wrap .stage .dc-callout {
  width: min(480px, calc(100% - 24px));
  transform: translateX(-50%) translateY(6px);
  background: rgba(14, 20, 38, .9);
}
.stage-wrap .stage .dc-callout.show { transform: translateX(-50%); }
.stage-wrap .stage .dc-callout::after { display: none; }
/* The reach hint is an affordance, not news — it waits while anything else
   is on screen. (Inline opacity is set per frame by the engine.) */
.stage.lane-busy .reach-hint { opacity: 0 !important; transition: none !important; }
.stage .reach-hint { animation: none; }

/* ---- progress: one readout per screen ---- */
@media (min-width: 601px) {
  .stage-wrap .stage .hold-pill { display: none; }
}
.stage .hold-pill.complete { pointer-events: none; cursor: default; }

/* ---- coach card: the wave, the stars, the next goal ---- */
@media (min-width: 601px) {
  .stage .dog-coach { width: 214px; }
  .dog-coach .dc-goal { display: none; }
  .dog-coach .dc-goal.next, .dog-coach.dc-open .dc-goal, .dog-coach:hover .dc-goal { display: flex; }
}
.dc-read-timer i { transform-origin: left center; transition: none; }

/* ---- intro hint: top-centre on desktop, top-left column on touch ---- */
.stage-wrap .stage .controls-hint {
  top: 14px; bottom: auto; left: 50%; transform: translateX(-50%);
  max-width: min(520px, calc(100% - 340px));
  text-align: center;
}
.stage-wrap .stage:has(.joystick) .controls-hint,
.stage-wrap .stage.cmds-open:has(.joystick) .controls-hint {
  display: block;
  top: 92px; bottom: auto; left: 12px; transform: none;
  max-width: calc(100% - 188px);
  text-align: start; font-size: 11px;
}
.stage-wrap .stage:has(.joystick):has(.exp-panel) .controls-hint { top: 132px; }
@media (pointer: coarse) { .stage-wrap .stage.cmds-open .controls-hint { display: block; } }

/* ---- star pop: top of the view, never over the creature ---- */
@media (max-width: 600px) {
  .stage .star-pop { top: 96px; bottom: auto; max-width: calc(100% - 24px); }
}

/* ---- desktop hotbar: small, bottom-centre, with keycaps ---- */
.stage-wrap .scene-cmd-bar:not(.collapsed) { bottom: 12px; padding: 6px 8px; gap: 6px; border-radius: 16px; }
.stage-wrap .scene-cmd-bar:not(.collapsed) .cmd-btn {
  padding: 6px 11px; min-height: 34px; font-size: 12.5px; border-radius: 12px;
}
.scene-cmd-bar .cmd-key {
  display: inline-block; min-width: 16px; margin-inline-start: 5px; padding: 0 4px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  font: 600 10.5px/16px ui-monospace, monospace; color: var(--muted); text-align: center;
}

/* A bar with more than four actions keeps its Show/Hide toggle; with the
   cluster open, the toggle rides above it instead of under its buttons
   (where it could no longer be tapped to collapse the bar again). */
.stage-wrap:has(.joystick) .stage.cmds-open .cmd-toggle { bottom: calc(var(--cmdbar-top, 140px) + 6px); }
/* A swipe that starts on the action buttons must not scroll the page out
   from under the trial (it did, and cancelled the snap-back too). */
.stage-wrap:has(.joystick) .scene-cmd-bar { touch-action: none; overscroll-behavior: contain; }

/* ---- touch: a 2×2 thumb cluster, bottom-right, opposite the joystick ---- */
.stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) {
  left: auto; right: 8px; bottom: 8px; transform: none;
  display: grid; grid-template-columns: repeat(2, 74px); gap: 6px;
  width: auto; max-width: none; padding: 0;
  background: none; border: none; box-shadow: none; backdrop-filter: none;
}
.stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) .cmd-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 74px; height: 62px; min-height: 0; padding: 6px 4px;
  border-radius: 16px; background: rgba(10, 14, 28, .74);
  border: 1px solid rgba(124, 209, 197, .38); backdrop-filter: blur(6px);
  font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: center; white-space: normal;
}
.stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) .cmd-btn .cmd-icon { font-size: 19px; line-height: 1; margin: 0; }
.stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) .cmd-btn > span:last-child {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
}
/* The message slot rides above both thumbs (Ground me ends ~152 px up). */
.stage-wrap .stage:has(.joystick) .captions,
.stage-wrap .stage:has(.joystick) .ctx-prompt,
.stage-wrap .stage:has(.joystick) .reach-hint,
.stage-wrap .stage:has(.joystick) .dc-callout {
  bottom: max(164px, calc(var(--cmdbar-top, 0px) + 12px));
  max-width: calc(100% - 20px); width: max-content;
  font-size: 12.5px;
}
.stage-wrap .stage:has(.joystick) .dc-callout { width: calc(100% - 20px); }
/* Gyro look: a round icon beside the sound button (top-right). */
.stage-wrap .stage .gyro-btn {
  position: absolute; top: 14px; right: 60px; left: auto; z-index: 8;
}
@media (max-width: 480px) { .stage-wrap .stage .gyro-btn { top: 10px; right: 50px; } }
.stage-wrap .stage:has(.dog-coach) .gyro-btn { top: 14px !important; right: 60px !important; }
@media (max-width: 480px) { .stage-wrap .stage:has(.dog-coach) .gyro-btn { top: 10px !important; right: 50px !important; } }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) { .stage-wrap .stage .gyro-btn { display: none !important; } }

/* ---- Title screen: pick the fear (first visit) ---- */
.arrive-pick { padding-top: 14px; }
.arrive-pick .arrive-story { font-size: 13.5px; opacity: .78; margin: 0 0 12px; text-align: center; }
.arrive-pick .arrive-q { font-size: 18px; margin: 0 0 10px; text-align: center; color: #fbf1dc; }
.fear-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fear-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 78px; padding: 10px 6px 9px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 207, 110, .26);
  color: var(--text); font: inherit; cursor: pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fear-tile:hover, .fear-tile:focus-visible {
  background: rgba(255, 196, 104, .12); border-color: rgba(255, 207, 110, .75);
  box-shadow: 0 0 22px rgba(255, 186, 92, .18); transform: translateY(-1px);
}
.fear-tile:active { transform: translateY(1px); }
.ft-icon { font-size: 25px; line-height: 1.1; filter: drop-shadow(0 0 10px rgba(255, 190, 90, .35)); }
.ft-name { font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.ft-realm { font-size: 11px; color: var(--muted); line-height: 1.25; text-align: center; }
.arrive-pick .arrive-promise { font-size: 13px; text-align: center; margin: 10px 0 0; opacity: .88; }
.arrive-pick .arrive-link { margin-top: 0; min-height: 38px; padding: 6px; font-size: 13px; }
@media (max-height: 720px) {
  .arrive-pick .arrive-story { display: none; }
  .fear-tile { min-height: 62px; padding: 8px 4px; }
  .ft-realm { display: none; }
}
/* A fear under the finger lights its lantern in the valley. */
.app:has(.fear-tile[data-phobia="dogs"]:is(:hover, :focus-visible)) .vh-lantern[data-k="dogs"] .vh-glow,
.app:has(.fear-tile[data-phobia="spiders"]:is(:hover, :focus-visible)) .vh-lantern[data-k="spiders"] .vh-glow,
.app:has(.fear-tile[data-phobia="snakes"]:is(:hover, :focus-visible)) .vh-lantern[data-k="snakes"] .vh-glow,
.app:has(.fear-tile[data-phobia="heights"]:is(:hover, :focus-visible)) .vh-lantern[data-k="heights"] .vh-glow,
.app:has(.fear-tile[data-phobia="dark"]:is(:hover, :focus-visible)) .vh-lantern[data-k="dark"] .vh-glow,
.app:has(.fear-tile[data-phobia="enclosed"]:is(:hover, :focus-visible)) .vh-lantern[data-k="enclosed"] .vh-glow { opacity: .9; }
.app:has(.fear-tile[data-phobia="dogs"]:is(:hover, :focus-visible)) .vh-lantern[data-k="dogs"] .vh-flame,
.app:has(.fear-tile[data-phobia="spiders"]:is(:hover, :focus-visible)) .vh-lantern[data-k="spiders"] .vh-flame,
.app:has(.fear-tile[data-phobia="snakes"]:is(:hover, :focus-visible)) .vh-lantern[data-k="snakes"] .vh-flame,
.app:has(.fear-tile[data-phobia="heights"]:is(:hover, :focus-visible)) .vh-lantern[data-k="heights"] .vh-flame,
.app:has(.fear-tile[data-phobia="dark"]:is(:hover, :focus-visible)) .vh-lantern[data-k="dark"] .vh-flame,
.app:has(.fear-tile[data-phobia="enclosed"]:is(:hover, :focus-visible)) .vh-lantern[data-k="enclosed"] .vh-flame { opacity: 1; }

/* ---- The gate (before a trial): the story card, the door, one number ---- */
.gate-panel { max-width: 720px; margin-inline: auto; }
.gate-story {
  margin: 0 0 16px; padding: 14px 16px 10px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 207, 110, .08), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 207, 110, .28);
}
.gs-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #f3d9a4; margin-bottom: 8px; }
html[dir="rtl"] .gs-kicker { letter-spacing: 0; }
.gs-row { display: flex; gap: 12px; align-items: flex-start; }
.gs-face { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.07); }
.gs-face svg, .gs-face img { display: block; width: 56px; height: 56px; }
.gs-body { min-width: 0; }
.gs-quote { margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-style: italic; font-size: 15.5px; line-height: 1.45; color: #f6efe0; }
.gs-who { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.gs-mira { display: flex; gap: 8px; align-items: center; margin: 12px 0 2px; font-size: 13.5px; color: #dbe3f0; }
.gs-mface { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255, 214, 140, .45); }
.gs-mface svg, .gs-mface img { display: block; width: 28px; height: 28px; }
.gs-read { margin-top: 2px; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.gate-trial h2 { margin: 8px 0 4px; }
.gate-desc { margin: 0 0 6px; color: var(--muted); }
.gate-focus { margin: 6px 0 0; font-size: 13px; color: #fcd34d; opacity: .9; }
.gate-suds { margin-top: 16px; }
.gate-suds label { font-weight: 650; }
.gate-expect { margin-top: 14px; }
.gate-opt { font-weight: 500; font-size: 12px; color: var(--muted); margin-inline-start: 4px; }
/* "Enter" stays in reach while the page scrolls under it, at every width. */
.gate-actions {
  position: sticky; bottom: 0; z-index: 3; margin: 18px -4px 0; padding: 12px 4px calc(12px + var(--safe-b, 0px));
  background: linear-gradient(to top, var(--panel, #141b2d) 70%, transparent);
}
.gate-enter { flex: 1 1 auto; min-width: min(100%, 260px); }
.gate-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 600px) {
  .gate-actions .btn-ghost { display: none; }
  .gs-quote { font-size: 14.5px; }
}
/* The trial's flame: dark until the trial is held, then it catches. */
.dog-coach .dc-lamp { display: inline-block; filter: grayscale(1) brightness(.55); opacity: .7; transition: filter .6s ease, opacity .6s ease; }
.dog-coach.dc-lit .dc-lamp { filter: drop-shadow(0 0 6px rgba(255, 186, 92, .9)); opacity: 1; animation: dcLampCatch 1.4s ease-out 1; }
@keyframes dcLampCatch { 0% { transform: scale(.8); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dog-coach.dc-lit .dc-lamp { animation: none; } }
/* Phones: the coach card keeps the lamp, a small label and the stars on one
   line (without the label the lamp read as a stray dot), and drops the
   creature's mood note — the wave and the next goal are the read. */
@media (max-width: 600px) {
  .dog-coach .dc-stars-row { font-size: 10px; letter-spacing: .05em; gap: 4px; }
  .dog-coach .dc-stars-row .dc-stars-lbl { white-space: nowrap; }
  .dog-coach .dc-trust.dc-note { display: none; }
  .dog-coach .dc-stars-row { align-items: center; }
}
/* The camera switch is a tool, not a call to action: quiet glass like the
   other stage buttons (it was a glowing gradient pill — the brightest thing
   in the frame, competing with the creature). */
.stage-wrap .stage .camera-toggle {
  background: rgba(10, 14, 28, .66); color: var(--text);
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: none;
  padding: 7px 12px; font-size: 11.5px; font-weight: 600;
}
.stage-wrap .stage .camera-toggle:hover { background: rgba(20, 28, 48, .85); box-shadow: none; }
/* The skill star's verb: the hotbar button this trial's skill goal names
   wears a soft gold ring until the star lands — the answer to "what do I do
   here?" without another line of text — then ticks once. The selector
   carries the bar so it outranks the touch cluster's own border. */
.scene-cmd-bar .cmd-btn.cmd-goal,
.stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) .cmd-btn.cmd-goal {
  border-color: rgba(252, 211, 77, .85);
  box-shadow: 0 0 0 1px rgba(252, 211, 77, .35), 0 0 12px rgba(252, 211, 77, .28);
  animation: cmdGoalGlow 2.6s ease-in-out infinite;
}
.scene-cmd-bar .cmd-btn.cmd-goal-done,
.stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) .cmd-btn.cmd-goal-done {
  position: relative; border-color: rgba(52, 211, 153, .9);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, .45), 0 0 14px rgba(52, 211, 153, .35);
}
.scene-cmd-bar .cmd-btn.cmd-goal-done::after {
  content: "✓"; position: absolute; top: -7px; right: -5px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #34d399; color: #062018; font: 800 11px/17px system-ui, sans-serif; text-align: center;
  animation: cmdGoalTick 1.6s ease-out 1 forwards;
}
@keyframes cmdGoalGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(252, 211, 77, .30), 0 0 8px rgba(252, 211, 77, .18); }
  50% { box-shadow: 0 0 0 1px rgba(252, 211, 77, .55), 0 0 16px rgba(252, 211, 77, .38); }
}
@keyframes cmdGoalTick { 0% { transform: scale(.4); opacity: 0; } 18% { transform: scale(1.15); opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scene-cmd-bar .cmd-btn.cmd-goal, .stage-wrap:has(.joystick) .scene-cmd-bar:not(.collapsed) .cmd-btn.cmd-goal { animation: none; }
  .scene-cmd-bar .cmd-btn.cmd-goal-done::after { animation: none; opacity: 1; }
}

/* Page pinch-zoom is allowed again (low-vision readers); on the 3D stage a
   pinch or drag belongs to the game. */
.stage canvas { touch-action: none; }

/* Settings → Larger text. Most sizes here are px, so this scales whole
   blocks with zoom: the pages (not while the 3D stage is on them — zooming
   the canvas would skew its pointer maths), and the trial's text overlays. */
html.big-text #app:not(:has(.stage)) { zoom: 1.15; }
html.big-text .stage .dog-coach, html.big-text .stage .hold-pill,
html.big-text .stage .controls-hint, html.big-text .stage .captions,
html.big-text .stage .ctx-prompt, html.big-text .stage .dc-callout,
html.big-text .stage .dc-read, html.big-text .stage .reach-hint,
html.big-text .stage .exp-panel, html.big-text .stage .ml-toggle { zoom: 1.2; }
html.big-text .settings-drawer .row, html.big-text .goal-modal { zoom: 1.12; }