/* Bokhara — 3D Adventure Walk
   Palette + type from the Bokhara Design System (assets/DESIGN.md):
   warm, grounded, handmade — never loud-tropical, never surf-bar. */

:root {
  /* Brand colors — refined palette */
  --deep-leaf:   #26351F;
  --olive:       #5F6F38;
  --osb-wood:    #B98247;
  --terracotta:  #A65439;
  --sand-cream:  #F3E8D1;
  --cliff-beige: #C8B392;
  --charcoal:    #171D13;
  --ginger:      #C86B24;
  --hibiscus:    #B94F68;
  --sea-shadow:  #536B72;

  --font-display: 'Pacifico', cursive;
  --font-hand:    'Caveat', cursive;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-xs: 2px;
  --shadow-md: 0 8px 28px rgba(23, 29, 19, 0.28);
  --ease-smooth: cubic-bezier(0.32, 0.72, 0.28, 1);
  --duration: 220ms;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--sand-cream);
  font-family: var(--font-body);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.hidden { display: none !important; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background var(--duration) var(--ease-smooth),
              transform 120ms var(--ease-smooth);
  -webkit-tap-highlight-color: transparent;
  /* a long-press on the label must not summon the OS text/callout menu */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid var(--deep-leaf); outline-offset: 3px; }
/* charcoal on ginger ≈ 6.3:1 (was sand-cream ≈ 3.0:1, failed AA) */
.btn-primary { background: var(--ginger); color: var(--charcoal); }
.btn-primary:hover { background: #a85a1e; }
.btn-secondary {
  background: transparent;
  color: var(--deep-leaf);
  border: 1px solid rgba(23, 29, 19, 0.35);
}
.btn-secondary:hover { background: rgba(23, 29, 19, 0.06); }

/* ── Overlays (title / end) ──────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(95, 111, 56, 0.16), transparent 55%),
    var(--sand-cream);
  overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}
/* Title screen: translucent so the live 3D world breathes behind it
   (end screen keeps the solid .overlay background) */
#title-screen {
  /* opaque warm sky → sand gradient; the weak live 3D never peeks through */
  background: linear-gradient(180deg, #FCF1D9 0%, var(--sand-cream) 50%, #EFE0C1 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
  isolation: isolate;
  align-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
           max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

/* ── Golden-hour field: a soft sun + a full-bleed dune horizon. Radically
   simple, always fills the screen (preserveAspectRatio="none" stretches the
   dunes edge-to-edge at any aspect). Opaque #title-screen hides the live 3D,
   so the loader still lifts and the radial reveal into the walk stays instant. */
.paper-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* a soft, pale low sun in the upper-right sky — warmth, not a hard blob */
.ps-sun {
  position: absolute; top: 9%; right: 13%;
  width: clamp(110px, 16vw, 180px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 246, 224, 0.85) 0%, rgba(228, 176, 116, 0.38) 45%,
    rgba(200, 107, 36, 0) 72%);
  will-change: transform;
  animation: ps-drift-sun 30s ease-in-out infinite alternate;
}
/* two dune bands, pinned to the bottom, stretched to the full viewport width */
.ps-dunes {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 40%; display: block;
  filter: drop-shadow(0 -2px 6px rgba(23, 29, 19, 0.07));
}
.ps-dune-far  { fill: var(--cliff-beige); }
.ps-dune-near { fill: var(--osb-wood); }

.title-inner {
  position: relative; z-index: 2;
  max-width: 460px;
  width: 100%;
  text-align: center;
  margin: auto;
}
/* warm glow halo behind the transparent sprout emblem */
.title-logo-glow {
  position: absolute; z-index: -1; top: -6px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 124px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 224, 0.7) 0%, rgba(200, 107, 36, 0.12) 48%, transparent 72%);
  pointer-events: none;
}
#title-screen .title-word { text-shadow: 0 2px 14px rgba(243, 232, 209, 0.9); }

/* The title doubles as the loading screen. Logo + wordmark + energies show
   instantly (the stylesheet is render-blocking, so no flash of unstyled text).
   The emblem itself is the loading indicator — a soft pulse plus a "loading"
   word in the action slot. When the world is ready, game.js adds .ready:
   "loading" fades out and the three buttons rise in. The logo never moves, so
   there's no jump between "loading" and "loaded". */
@keyframes bok-rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

/* loading text: directly under the emblem, with animated dots. Absolutely
   positioned so it doesn't affect layout — the buttons below reserve their
   height, so the logo never moves between loading and loaded. */
.title-loading {
  position: absolute; left: 0; right: 0;
  top: 94px;                          /* just under the 76px emblem */
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; font-size: 0.92rem; letter-spacing: 0.16em;
  text-transform: lowercase; color: rgba(95, 111, 56, 0.8);
  transition: opacity 360ms var(--ease-smooth);
  pointer-events: none;
}
#title-screen.ready .title-loading { opacity: 0; }
/* dots cycle .  ..  ...  — a reserved-width slot keeps "loading" from shifting */
.title-loading .dots {
  display: inline-block;
  width: 1.4em; text-align: left; letter-spacing: normal;
}
.title-loading .dots i {
  font-style: normal; opacity: 0;
  animation: load-dot 1.5s var(--ease-smooth) infinite;
}
.title-loading .dots i:nth-child(2) { animation-delay: 0.25s; }
.title-loading .dots i:nth-child(3) { animation-delay: 0.5s; }
@keyframes load-dot {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

/* a soft spinner arc hugging the emblem while loading — the dynamic indicator
   (the logo is a flat PNG, so the motion lives in a ring around it, not the art) */
.title-logo-ring {
  position: absolute; z-index: 1;
  top: -12px; left: 50%;
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--ginger);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 300ms var(--ease-smooth);
  pointer-events: none;
}
#title-screen:not(.ready) .title-logo-ring {
  opacity: 0.6;
  animation: ring-spin 1.1s linear infinite;
}
@keyframes ring-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

/* title text waits for its webfonts (revealed with .ready) so it never swaps
   font mid-view — the loading state shows just the logo + "loading" */
#title-screen .title-word,
#title-screen .title-sub { opacity: 0; }
#title-screen.ready .title-word { animation: bok-rise 600ms var(--ease-smooth) 140ms both; }
#title-screen.ready .title-sub  { animation: bok-rise 600ms var(--ease-smooth) 260ms both; }

/* buttons hidden + inert until ready, then they rise in one after another */
.hub-actions > .btn { opacity: 0; }
#title-screen:not(.ready) .hub-actions { pointer-events: none; }
/* the Walk button rises, then keeps a slow attract-pulse to mark it the main way in */
#title-screen.ready .hub-actions > .btn:nth-child(1) {
  animation: bok-rise 600ms var(--ease-smooth) 400ms both,
             cta-pulse 2.6s var(--ease-smooth) 1800ms infinite;
}
#title-screen.ready .hub-actions > .btn:nth-child(2) { animation: bok-rise 600ms var(--ease-smooth) 520ms both; }
#title-screen.ready .hub-actions > .btn:nth-child(3) { animation: bok-rise 600ms var(--ease-smooth) 640ms both; }

/* attract-pulse: a soft brown ring breathing outward — matches the terracotta CTA */
@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(166, 84, 57, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(166, 84, 57, 0); }
  100% { box-shadow: 0 0 0 0 rgba(166, 84, 57, 0); }
}

/* the three energies — each tinted to the speaker it foreshadows
   (Bo→ginger, Kha→olive, Ara→terracotta for AA). Motion handled by .intro. */
.title-sub .syl { display: inline-block; font-weight: 700; }
.title-sub .bo  { color: var(--ginger); }
.title-sub .kha { color: var(--olive); }
.title-sub .ara { color: var(--terracotta); }

/* the low sun breathes, slow — transform only */
@keyframes ps-drift-sun { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(5px, -4px, 0); } }

.title-logo {
  width: 76px;
  height: 76px;
  object-fit: contain;
  margin: 0 auto 8px;
  /* transparent emblem catches the golden-hour light; a soft shadow grounds it */
  filter: drop-shadow(0 6px 16px rgba(23, 29, 19, 0.22));
}
.title-word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 10.5vw, 3.1rem);
  color: var(--deep-leaf);
  line-height: 1.12;
}
.title-word.small { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
.title-sub {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--terracotta);
  margin: 4px 0 8px;
}
/* the lore is demoted to a quiet caption — the three doors are the heroes now */
.title-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(23, 29, 19, 0.82);   /* ~8.4:1 on sand-cream */
  margin: 0 auto 16px;
  max-width: 34ch;
}
.lang-mix { font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; color: var(--olive); }
.title-desc .lang-mix { display: block; font-size: 1.05rem; margin-top: 2px; }
/* ── The three ways in — Walk · Bar · Menu. Radically simple: three clean
   stacked buttons, one line each, bilingual label only. ─────────────────── */
.hub-actions {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 11px;
  max-width: 300px; margin: 18px auto 0;
}
.hub-actions .btn { width: 100%; font-size: 1.04rem; }
/* Main-screen Walk CTA: warm brown (#a65439) + white text — cleaner and more
   distinct than the ginger fill. white on #a65439 ≈ 5.8:1 (AA). */
#walk-btn.btn-primary { background: var(--terracotta); color: #fff; }
#walk-btn.btn-primary:hover { background: #8f4630; }

/* ── Language toggle (EN · PT) — top-right, above the title and through the walk.
   z-index above the title/end overlays so it stays reachable everywhere. ── */
.lang-toggle {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 35;
  display: inline-flex;
  background: rgba(23, 29, 19, 0.72);
  border-radius: 999px;
  padding: 3px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-tap-highlight-color: transparent;
}
.lang-opt {
  /* system font: this control is visible during loading, so a webfont swap here
     would be its own little flicker — sidestep it entirely */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(243, 232, 209, 0.7);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--duration) var(--ease-smooth), color var(--duration) var(--ease-smooth);
}
.lang-opt:hover { color: var(--sand-cream); }
.lang-opt.active { background: var(--ginger); color: var(--charcoal); }
.lang-opt:focus-visible { outline: 2px solid var(--sand-cream); outline-offset: 1px; }

/* ── Persistent menu link (top-right, just below the language toggle) ──── */
.menu-link {
  position: fixed;
  top: calc(max(14px, env(safe-area-inset-top)) + 46px);
  right: max(14px, env(safe-area-inset-right));
  z-index: 22;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--sand-cream);
  background: rgba(23, 29, 19, 0.72);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background var(--duration) var(--ease-smooth), transform 120ms var(--ease-smooth);
}
.menu-link:hover { background: var(--ginger); }
.menu-link:active { transform: scale(0.96); }

/* ── Sound toggle (top-left, mirrors the menu link) ──────────────────── */
.corner-btn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 22;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sand-cream);
  background: rgba(23, 29, 19, 0.72);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--duration) var(--ease-smooth), transform 120ms var(--ease-smooth);
}
.corner-btn:hover { background: var(--ginger); }
.corner-btn:active { transform: scale(0.94); }
/* second corner button (mute) sits just below the first (home) */
.corner-btn-2 { top: calc(max(14px, env(safe-area-inset-top)) + 48px); }
.corner-btn .snd-slash { opacity: 0; transition: opacity 160ms var(--ease-smooth); }
.corner-btn.muted .snd-slash { opacity: 1; }
.corner-btn.muted .snd-wave { opacity: 0.2; }

/* full-menu link inside the food hotspot card */
.menu-cta {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--sand-cream);
  background: var(--ginger);
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration) var(--ease-smooth);
}
.menu-cta:hover { background: #a85a1e; }

.end-photo {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(23, 29, 19, 0.12);
  margin: 4px 0 16px;
  display: block;
}
.end-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
@media (min-width: 480px) {
  .end-actions { flex-direction: row; justify-content: center; }
}

/* ── HUD ─────────────────────────────────────────────── */
#hud {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 0; right: 0;
  z-index: 20;
  text-align: center;
  pointer-events: none;
}
#chapter-dots { display: flex; gap: 8px; justify-content: center; }
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(23, 29, 19, 0.25);
  transition: background var(--duration) var(--ease-smooth), transform var(--duration) var(--ease-smooth);
}
.dot.active { background: var(--ginger); transform: scale(1.3); }
.dot.done { background: var(--olive); }
#chapter-label {
  margin-top: 8px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--deep-leaf);
  text-shadow: 0 1px 0 rgba(243, 232, 209, 0.8);
}
/* ── Walk control: hold to move forward (drag the world to look around) ─── */
.walk-forward {
  position: fixed;
  bottom: max(26px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 21;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  /* charcoal on ginger ≈ 6.3:1 (AA), matching the primary CTA */
  color: var(--charcoal);
  background: var(--ginger);
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  transition: transform 120ms var(--ease-smooth), background var(--duration) var(--ease-smooth);
}
.walk-forward svg { width: 18px; height: 18px; display: block; }
.walk-forward .wf-label { line-height: 1; }
.walk-forward:active { transform: translateX(-50%) scale(0.95); background: #a85a1e; }
.walk-forward:focus-visible { outline: 3px solid var(--deep-leaf); outline-offset: 3px; }
/* attract until first use, then it calms (game.js drops .attract on first press) */
.walk-forward.attract { animation: walk-pulse 2.2s var(--ease-smooth) infinite; }
@keyframes walk-pulse {
  0%   { box-shadow: var(--shadow-md), 0 0 0 0 rgba(200, 107, 36, 0.5); }
  70%  { box-shadow: var(--shadow-md), 0 0 0 16px rgba(200, 107, 36, 0); }
  100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(200, 107, 36, 0); }
}

/* ── Character name card: fades in, floats up, lifts away on each meeting ── */
.name-card {
  position: fixed;
  left: 0; right: 0;
  top: 28%;
  z-index: 26;
  text-align: center;
  pointer-events: none;
}
.name-card .nc-text {
  display: inline-block;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1.1;
  color: var(--speaker, var(--ginger));
  text-shadow: 0 2px 18px rgba(243, 232, 209, 0.95), 0 1px 0 rgba(243, 232, 209, 0.8);
  opacity: 0;   /* the animation reveals it; base 0 avoids a flash before .show */
}
.name-card.show .nc-text { animation: name-float 2.4s var(--ease-smooth) forwards; }
@keyframes name-float {
  0%   { opacity: 0; transform: translateY(20px); }
  16%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-26px); }
}

/* ── Bottom sheets (dialogue / info) ─────────────────── */
.sheet {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  justify-content: center;
  padding: 0 12px max(12px, env(safe-area-inset-bottom));
  pointer-events: none;
}
.sheet-card {
  pointer-events: auto;
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--sand-cream);
  border: 1px solid rgba(23, 29, 19, 0.14);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 18px 18px 16px;
  animation: sheet-up 320ms var(--ease-smooth);
}
@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* JRPG dialogue box: speaker-coloured edge + a little portrait nameplate */
#dialogue .sheet-card {
  border-left: 4px solid var(--speaker, var(--ginger));
  cursor: pointer;            /* the whole box is tappable to skip/advance */
}
.speaker-row { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.speaker-mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--speaker, var(--ginger));
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--sand-cream);
  box-shadow: 0 2px 8px rgba(23, 29, 19, 0.22);
}
.speaker-name {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--deep-leaf);
}
#dialogue-text {
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(23, 29, 19, 0.86);
  min-height: 3.1em;          /* reserve height so the box doesn't jump as text types */
}
/* the "learned" note slips in only after the line finishes */
.learn-line {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--terracotta);
  margin-top: 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms var(--ease-smooth), transform 320ms var(--ease-smooth);
}
.learn-line.show { opacity: 1; transform: none; }
/* the ▾ blinks when it's the reader's turn; it hides while text is still typing */
.cont-arrow { display: inline-block; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#dialogue.typing .cont-arrow { visibility: hidden; }
#dialogue.typing #dialogue-next { opacity: 0.65; }
#dialogue-next, #info-close { margin-top: 14px; width: 100%; }

.kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ginger);
  margin-bottom: 4px;
}
#info-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--deep-leaf);
  margin-bottom: 10px;
}
#info-body { font-size: 0.95rem; line-height: 1.55; color: rgba(23, 29, 19, 0.86); }
#info-body ul { list-style: none; margin-top: 6px; }
#info-body li { padding: 5px 0; border-bottom: 1px dashed rgba(23, 29, 19, 0.14); }
#info-body li:last-child { border-bottom: none; }
#info-body .price { color: var(--terracotta); font-family: var(--font-hand); font-size: 1.15rem; }
#info-body em { font-family: var(--font-hand); font-style: normal; font-size: 1.15rem; color: var(--olive); }
#info-body img {
  width: 100%;
  border-radius: var(--radius-xs);
  margin-top: 10px;
  border: 1px solid rgba(23, 29, 19, 0.12);
}

/* ── Interior progress chip: four pips that fill as corners are discovered ── */
#interior-hint {
  position: fixed;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(23, 29, 19, 0.72);
  padding: 11px 16px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.pip {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(243, 232, 209, 0.22);
  box-shadow: inset 0 0 0 1.5px rgba(243, 232, 209, 0.55);
  transition: background var(--duration) var(--ease-smooth),
              box-shadow var(--duration) var(--ease-smooth),
              transform var(--duration) var(--ease-smooth);
}
.pip.done {
  background: var(--ginger);
  box-shadow: inset 0 0 0 1.5px var(--ginger), 0 0 8px rgba(200, 107, 36, 0.5);
  transform: scale(1.2);
}

/* ── Easter-egg reveal — a celebratory "secret found" card ──────────────── */
.egg-card {
  position: fixed; inset: 0; z-index: 38;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(23, 29, 19, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 260ms var(--ease-smooth);
}
.egg-card.show { opacity: 1; }
.egg-inner {
  position: relative;
  width: 100%; max-width: 360px;
  text-align: center;
  background: linear-gradient(180deg, #FCF3DE 0%, var(--sand-cream) 100%);
  border: 1px solid rgba(200, 107, 36, 0.4);
  border-radius: 10px;
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(200, 107, 36, 0.08);
  padding: 26px 22px 22px;
  transform: translateY(12px) scale(0.96);
  transition: transform 320ms var(--ease-smooth);
}
.egg-card.show .egg-inner { transform: none; }
.egg-spark {
  position: absolute; color: var(--ginger); font-size: 1rem;
  animation: egg-twinkle 1.8s var(--ease-smooth) infinite;
}
.egg-spark.s1 { top: 12px; left: 20px; }
.egg-spark.s2 { top: 18px; right: 24px; font-size: 0.8rem; animation-delay: 0.4s; }
.egg-spark.s3 { bottom: 70px; left: 28px; font-size: 0.72rem; animation-delay: 0.85s; }
@keyframes egg-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
.egg-kicker {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ginger); margin-bottom: 8px;
}
.egg-title {
  font-family: var(--font-display); font-weight: 400; font-size: 1.55rem;
  color: var(--deep-leaf); margin-bottom: 10px; line-height: 1.12;
}
.egg-line {
  font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.4;
  color: var(--olive); margin-bottom: 16px;
}
.egg-code-box {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1.5px dashed rgba(166, 84, 57, 0.55);
  border-radius: 8px; padding: 9px 22px; margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.45);
}
.egg-code-label {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(23, 29, 19, 0.5);
}
.egg-code {
  font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.08em;
  color: var(--terracotta);
}
.egg-note {
  font-size: 0.9rem; line-height: 1.45; color: rgba(23, 29, 19, 0.78); margin-bottom: 16px;
}
#egg-close { width: 100%; }

/* title emblem reacts to taps (3× opens the first secret) */
@keyframes egg-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes egg-bloom  { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
.title-logo.egg-wobble { animation: egg-wobble 320ms var(--ease-smooth); }
.title-logo.egg-bloom  { animation: egg-bloom 520ms var(--ease-smooth); }

/* ── Fader ───────────────────────────────────────────── */
#fader {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--charcoal);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease-smooth);
}
#fader.on { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .sheet-card { animation: none; }
  /* loading-state visuals shown plainly, no emblem pulse, no drift */
  .paper-scene,
  .ps-sun, .ps-dunes,
  .title-logo-glow,
  .title-logo {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  /* title text + buttons: hidden until ready (so fonts settle first), then shown plainly */
  #title-screen .title-word, #title-screen .title-sub,
  .hub-actions > .btn { animation: none !important; transform: none !important; }
  #title-screen.ready .title-word,
  #title-screen.ready .title-sub,
  #title-screen.ready .hub-actions > .btn { opacity: 1 !important; }
  .title-loading { transition: none; }
  .title-loading .dots i { animation: none !important; opacity: 1 !important; }  /* static "loading..." */
  .title-logo-ring { animation: none !important; }                              /* static arc, no spin */
  .cont-arrow { animation: none; }
  .learn-line { transition: none; }
  /* no attract-pulse, no name-card float — show the name plainly */
  .walk-forward, .walk-forward.attract { animation: none !important; }
  .name-card .nc-text { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pip { transition: none; }
  .egg-spark, .title-logo.egg-wobble, .title-logo.egg-bloom { animation: none !important; }
  .egg-card, .egg-card .egg-inner { transition: none !important; }
  .egg-card .egg-inner { transform: none !important; }
}

/* Radial reveal: the new (world-revealed) state is wiped in by an expanding
   circle from the Start button — disable the default cross-fade so the
   game.js clip-path animation is the only motion. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) { z-index: 1; }
::view-transition-old(root) { z-index: 0; }

/* Loading: no separate screen — the title IS the loader. The emblem stays put
   with a spinning arc ring around it + a "loading…" word with animated dots
   directly beneath, all shown until #title-screen.ready (see the title rules above). */