:root {
  --berry-950: #10162f;
  --berry-900: #171d3f;
  --berry-800: #252b55;
  --leaf-700: #226b67;
  --leaf-400: #69cfb7;
  --mist-300: #c6bdea;
  --moon-100: #fff3cf;
  --lantern-200: #fff1b2;
  --lantern-400: #ffd166;
  --coral-400: #ff927d;
  --amber-500: #dc9846;
  --ink-950: #171729;
  --panel-light: rgba(247, 242, 230, 0.96);
  --text-on-night: #fffaf0;
  --text-muted-night: #d2d3ec;
  --text-on-light: #27243b;
  --text-on-light-muted: #5b5870;
  --fs-label: 13px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --touch-child: 72px;
  --screen-pad-x: clamp(18px, 5vw, 48px);
  --screen-pad-y: clamp(20px, 5dvh, 52px);
  --font: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
  --bg: var(--berry-950);
  --surface: var(--berry-900);
  --surface-hl: var(--berry-800);
  --primary: var(--mist-300);
  --secondary: var(--leaf-400);
  --gold: var(--lantern-400);
  --safe: var(--leaf-400);
  --warning: var(--lantern-400);
  --hidden: var(--amber-500);
  --recovery: var(--leaf-400);
  --failed: var(--moon-100);
  --danger: var(--coral-400);
  --text-1: var(--text-on-night);
  --text-2: var(--text-muted-night);
  --text-3: var(--text-muted-night);
  --radius-xl: var(--radius-lg);
  /* Shared night surfaces, moonlit edges, and elevation. */
  --surface-night: rgba(16, 22, 47, .88);
  --surface-night-solid: var(--berry-950);
  --surface-parchment: rgba(255, 243, 207, .97);
  --line-moon: rgba(255, 243, 207, .5);
  --line-moon-strong: rgba(255, 243, 207, .62);
  --line-lantern: rgba(255, 209, 102, .6);
  --shadow-float: 0 12px 30px rgba(7, 10, 29, .36);
  --shadow-panel: 0 26px 64px rgba(7, 10, 29, .46);
  --motion-press: 120ms;
  --motion-fast: 160ms;
  --motion-enter: 520ms;
  --ease-out-play: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--berry-950); }
body { margin: 0; min-height: 100dvh; overflow: hidden; font-family: var(--font); color: var(--text-on-night); background: var(--berry-950); word-break: keep-all; overflow-wrap: break-word; }
#app { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }
button, input { font: inherit; }
button { touch-action: manipulation; }
button:not(:disabled) { cursor: pointer; }
/* Every scene title shares one weight; sizes come from each screen's rule. */
h1, h2 { font-weight: 800; }
/* Keeps a short list (녹음·저장·전송) from splitting across lines. */
.nowrap { white-space: nowrap; }
:where(button, [tabindex]):focus-visible {
  outline: none;
  filter: brightness(1.14)
    drop-shadow(0 0 10px rgba(255, 209, 102, .72))
    drop-shadow(0 0 24px rgba(255, 209, 102, .5));
  transform: translateY(-3px);
}
@media (pointer: coarse) {
  :where(button, [tabindex]):focus:not(:focus-visible) {
    filter: none;
  }
}
.ui-icon { display: inline-block; width: 1.5em; height: 1.5em; object-fit: contain; pointer-events: none; user-select: none; }
.screen { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--screen-pad-y) var(--screen-pad-x); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.screen.active { opacity: 1; pointer-events: auto; }
.btn { min-height: 56px; border: 0; border-radius: var(--radius-pill); padding: 14px 26px; font-size: 18px; font-weight: 800; cursor: pointer; transition: transform var(--motion-press) var(--ease-out-play), box-shadow var(--motion-fast) ease-out, background-color var(--motion-fast) ease-out, border-color var(--motion-fast) ease-out; }
.btn:active { transform: translateY(2px) scale(.97); }
.btn-primary,
.btn-secondary { min-width: var(--touch-child); min-height: var(--touch-child); }
/* One lantern pill for every main action; a soft inner lip keeps it tactile. */
.btn-primary { color: var(--ink-950); background: linear-gradient(180deg, var(--lantern-200), var(--lantern-400)); box-shadow: inset 0 -4px 0 rgba(171, 111, 26, .22), 0 14px 34px rgba(7, 10, 29, .34); }
/* The quieter choice: a moonlit outline that still reads as a button on night art. */
.btn-secondary { color: var(--moon-100); background: rgba(16, 22, 47, .62); border: 2px solid var(--line-moon-strong); box-shadow: 0 10px 26px rgba(2, 7, 24, .32); }
@media (hover: hover) {
  .btn-primary:hover { box-shadow: inset 0 -4px 0 rgba(171, 111, 26, .22), 0 16px 38px rgba(7, 10, 29, .4), 0 0 22px rgba(255, 209, 102, .28); }
  .btn-secondary:hover { background: rgba(37, 43, 85, .86); border-color: var(--moon-100); }
}
.scene { isolation: isolate; overflow: hidden; background: var(--berry-900); }
.scene::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--scene-art, none) center / cover no-repeat; }
.scene::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--scene-tint, transparent); }
.child-target { min-width: var(--touch-child); min-height: var(--touch-child); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Intro
   ============================================================ */
.intro-scene {
  --intro-tint: linear-gradient(180deg, rgba(16,22,47,.55), rgba(16,22,47,.04) 44%, rgba(16,22,47,.3));
  --scene-art: var(--intro-tint), url('./assets/moonlight/intro-generated-landscape.webp');
  --scene-tint: transparent;
  justify-content: flex-start;
  text-align: center;
}
.intro-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin-top: max(4dvh, env(safe-area-inset-top));
  color: var(--text-on-night);
  text-shadow: 0 4px 22px rgba(7,10,29,.72);
  animation: intro-copy-enter var(--motion-enter) var(--ease-out-play) both;
}
.intro-copy h1 {
  margin: 0;
  font-size: clamp(44px, 7vw, 78px);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.intro-copy p {
  margin: 14px 0 0;
  font-size: clamp(17px, 2.3vw, 24px);
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
}
.intro-lulu {
  position: absolute;
  z-index: 1;
  left: clamp(2%, 8vw, 12%);
  bottom: clamp(8%, 7dvh, 12%);
  width: clamp(190px, 30vw, 360px);
  animation: intro-lulu-enter 640ms var(--ease-out-play) 80ms both;
}
.intro-lulu-image { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.intro-lantern-glow {
  position: absolute;
  left: 35%;
  bottom: 13%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,209,102,.42);
  filter: blur(12px);
}
.intro-start {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(8dvh, calc(env(safe-area-inset-bottom) + 24px));
  translate: -50% 0;
  min-width: min(280px, calc(100vw - 40px));
  font-size: 20px;
}
@keyframes intro-copy-enter {
  from { opacity: .2; filter: blur(8px); transform: translateY(-12px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes intro-lulu-enter {
  from { opacity: .35; clip-path: inset(12% 0 0); transform: translateY(28px); }
  to { opacity: 1; clip-path: inset(0); transform: translateY(0); }
}

@media (max-width: 700px) and (orientation: portrait) {
  .intro-copy { margin-top: max(6dvh, env(safe-area-inset-top)); }
  .intro-copy h1 { font-size: clamp(42px, 14vw, 58px); }
  .intro-copy p { max-width: 280px; margin-inline: auto; }
  .intro-lulu { left: 50%; bottom: 16%; width: min(54vw, 230px); translate: -50% 0; }
  .intro-start { bottom: max(5dvh, calc(env(safe-area-inset-bottom) + 16px)); }
}

@media (orientation: landscape) and (max-height: 700px) {
  .intro-copy { margin-top: max(1dvh, env(safe-area-inset-top)); }
  .intro-copy h1 { font-size: clamp(38px, 7vw, 58px); }
  .intro-copy p { margin-top: 8px; }
  .intro-lulu { bottom: 2%; width: min(27vw, 220px); }
  .intro-start { left: auto; right: max(8vw, env(safe-area-inset-right)); bottom: 10%; translate: 0; }
}

/* ============================================================
   Golden journey: privacy, earned camp, and scrollable route
   ============================================================ */
.voice-privacy-note {
  margin: 0;
  color: var(--text-muted-night);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 2px 12px rgba(7, 10, 29, .72);
}

.intro-actions {
  position: absolute;
  z-index: 5;
  right: max(8vw, env(safe-area-inset-right));
  bottom: max(5%, calc(env(safe-area-inset-bottom) + 14px));
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(38vw, 390px);
}

.intro-actions .intro-start {
  position: static;
  min-width: min(100%, 310px);
  translate: 0;
}

.calibration-progress {
  width: min(280px, 72vw);
  height: 10px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 243, 207, .4);
  border-radius: var(--radius-pill);
  background: rgba(16, 22, 47, .48);
}

.calibration-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--leaf-400), var(--lantern-400));
  transform-origin: left center;
  transform: scaleX(var(--calibration-progress, 0));
}

.calibration-progress + .voice-privacy-note {
  margin-top: 12px;
  color: var(--text-on-light-muted);
  text-shadow: none;
}

.journey-current-button {
  position: absolute;
  z-index: 6;
  right: max(5%, env(safe-area-inset-right));
  bottom: max(5%, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: var(--touch-child);
  min-height: var(--touch-child);
  padding: 10px 20px 10px 16px;
  color: var(--moon-100);
  font-weight: 800;
}
.journey-current-button .ui-icon { width: 28px; height: 28px; }

@media (orientation: portrait) {
  .intro-actions {
    right: 50%;
    bottom: max(2%, calc(env(safe-area-inset-bottom) + 8px));
    width: min(calc(100vw - 32px), 430px);
    translate: 50% 0;
  }
}

/* ============================================================
   Splash
   ============================================================ */
.splash-title {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeInUp 0.6s ease;
}
.splash-sub {
  font-size: 18px;
  color: var(--text-2);
  margin-top: 12px;
  animation: fadeInUp 0.6s ease 0.2s both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Home
   ============================================================ */
.camp-scene { --camp-tint: linear-gradient(180deg, rgba(16,22,47,.08), rgba(16,22,47,.32)); --scene-art: var(--camp-tint), url('./assets/moonlight/camp-generated-landscape.webp'); --scene-tint: transparent; }
.camp-lulu { position: absolute; left: clamp(4%, 8vw, 12%); bottom: clamp(11%, 10dvh, 16%); width: clamp(180px, 31vw, 360px); }
.camp-lulu-image { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 20px 22px rgba(6,9,26,.28)); }
.camp-lantern-glow { position: absolute; right: 3%; bottom: 17%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,209,102,.35); filter: blur(12px); pointer-events: none; }
.camp-greeting { position: absolute; top: max(7%, calc(env(safe-area-inset-top) + 18px)); left: 50%; translate: -50% 0; width: min(82%, 560px); text-align: center; text-shadow: 0 3px 16px rgba(9,12,35,.75); }
.camp-map-prop { position: absolute; right: clamp(7%, 11vw, 16%); bottom: clamp(8%, 8dvh, 13%); display: grid; place-items: center; gap: 4px; width: clamp(132px, 21vw, 210px); aspect-ratio: 1.35; border: 0; color: var(--ink-950); }

@media (orientation: portrait) and (max-width: 700px) {
  .camp-lulu { left: 50%; bottom: 31%; translate: -50% 0; width: min(62vw, 270px); }
  .camp-map-prop { right: max(12px, env(safe-area-inset-right)); bottom: max(7%, env(safe-area-inset-bottom)); translate: 0 0; width: min(48vw, 190px); }
}

@media (orientation: landscape) and (max-height: 700px) {
  .camp-lulu { left: 8%; bottom: 5%; width: min(31vw, 240px); }
  .camp-map-prop { right: 10%; bottom: 8%; width: min(21vw, 170px); }
  .camp-greeting { top: max(4%, env(safe-area-inset-top)); }
}

/* ============================================================
   Calibration
   ============================================================ */
.calibration-screen {
  --calibration-tint: linear-gradient(180deg, rgba(16, 22, 47, .22), rgba(16, 22, 47, .62));
  --scene-art: var(--calibration-tint), url('./assets/moonlight/calibration-generated-landscape.webp');
  --scene-tint: transparent;
  align-items: center;
  justify-content: center;
  padding: var(--screen-pad-y) var(--screen-pad-x);
}
.calibration-panel {
  width: min(100%, 640px);
  padding: clamp(22px, 4vw, 40px);
  text-align: center;
  color: var(--text-on-light);
  background: var(--panel-light);
  border: 1px solid rgba(255, 243, 207, .8);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(8, 11, 30, .36);
}
.calibration-panel h1 { margin: 0; font-size: clamp(28px, 5vw, 40px); line-height: 1.2; word-break: keep-all; }
.calibration-ring {
  width: 112px; height: 112px;
  border-radius: 50%;
  border: 5px solid var(--lantern-400);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  color: var(--text-on-light);
  background: rgba(255, 209, 102, .2);
  box-shadow: 0 0 32px rgba(220, 152, 70, .24);
}
.calibration-ring .ui-icon { width: 48px; height: 48px; }
.calibration-text {
  font-size: 16px;
  color: var(--text-on-light-muted);
  text-align: center;
  margin-top: 16px;
  line-height: 1.6;
}

/* ============================================================
   Gameplay
   ============================================================ */
.gameplay-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) var(--screen-pad-x) 12px;
  position: absolute;
  top: 0;
  z-index: 5;
}
.stage-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
.first-memory-scene { --scene-art: url('./assets/scenes/memory-clearing.jpg'); --scene-tint: linear-gradient(180deg, rgba(16,22,47,.1), rgba(16,22,47,.3)); }
.guided-demo-slot { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.guided-demo-panel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(90%, 360px); padding: 20px; border: 2px solid var(--lantern-400); border-radius: var(--radius-md); background: var(--berry-950); box-shadow: 0 16px 48px rgba(0, 0, 0, .45); color: var(--moon-100); }
.demo-example { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 100px; }
.demo-example--counting, .demo-example--sorting { flex-direction: column; gap: 12px; }
.guided-demo-caption { margin: 12px 0 0; font-size: 18px; font-weight: 700; text-align: center; word-break: keep-all; }
.demo-card, .demo-star, .demo-sort-object, .demo-bin { position: relative; display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: var(--radius-md); }
.demo-card { background: linear-gradient(145deg, #2f8b75, #1d5b55); box-shadow: inset 0 -6px 10px rgba(6, 44, 41, .24); }
.demo-card .demo-leaf { width: 78%; height: 78%; opacity: .72; }
.demo-card img, .demo-sort-object img { width: 60px; height: 60px; object-fit: contain; }
.demo-stars, .demo-choices, .demo-bins { display: flex; justify-content: center; gap: 12px; }
.demo-star img { width: 56px; height: 56px; object-fit: contain; }
.demo-count-number { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--berry-950); background: var(--moon-100); font-size: 18px; font-weight: 800; }
.demo-choice.counting-option { position: relative; display: grid; place-items: center; width: 72px; height: 72px; min-width: 72px; min-height: 72px; padding: 0; border: 0; border-radius: var(--radius-md); color: var(--ink-950); background: linear-gradient(180deg, var(--lantern-200), var(--lantern-400)); }
.demo-choice .counting-option-number { font-size: 30px; }
.demo-bin { background: rgba(255, 240, 207, .86); box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.demo-bin > img { width: 64px; height: 64px; object-fit: contain; }
.demo-bin-content { position: absolute; inset: 8px; display: grid; place-items: center; }
.demo-bin-content img { width: 46px; height: 46px; object-fit: contain; }
.demo-sort-object.is-placed { height: 12px; }
.demo-example .is-target, .demo-example .is-selected { outline: 3px solid var(--lantern-400); outline-offset: 3px; }
.demo-example .is-matched, .demo-example .is-correct, .demo-example .is-complete { outline: 3px solid var(--leaf-400); outline-offset: 3px; }
.demo-tap-indicator { position: absolute; right: -9px; bottom: -9px; width: 26px; height: 26px; border: 5px solid var(--moon-100); border-radius: 50%; background: var(--lantern-400); box-shadow: 0 0 0 3px var(--berry-950); }
@media (max-height: 430px) {
  .guided-demo-panel { width: min(70%, 350px); padding: 10px; }
  .demo-example { min-height: 72px; }
  .guided-demo-caption { margin-top: 8px; font-size: 16px; }
}
.demo-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gameplay-lulu { position: absolute; z-index: 3; left: 2%; bottom: 2%; width: clamp(128px, 20vw, 240px); }
.mascot-image.gameplay-lulu-image { position: relative; z-index: 1; width: 100%; height: auto; object-fit: contain; }
.lulu-lantern { position: absolute; left: 29%; bottom: 15%; z-index: 0; width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,209,102,.42); filter: blur(10px); pointer-events: none; transition: background .25s ease, scale .25s ease; }
.play-menu-button { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 6; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: var(--touch-child); min-height: var(--touch-child); padding: 11px 16px; color: var(--moon-100); font-weight: 800; white-space: nowrap; }
.play-help-button { position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 6; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: var(--touch-child); min-height: var(--touch-child); padding: 11px 16px; color: var(--lantern-400); font-weight: 800; white-space: nowrap; }
.play-control-icon { flex: none; width: 20px; height: 20px; object-fit: contain; pointer-events: none; user-select: none; }
/* Screen-edge controls (menu, demo, camp, current path) share one night chip. */
.play-menu-button,
.play-help-button,
.map-camp-control,
.journey-current-button {
  border: 2px solid var(--line-moon-strong);
  border-radius: var(--radius-md);
  background: var(--surface-night);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  transition: transform var(--motion-press) var(--ease-out-play), background-color var(--motion-fast) ease-out, border-color var(--motion-fast) ease-out;
}
:is(.play-menu-button, .play-help-button, .map-camp-control, .journey-current-button):active { transform: translateY(2px) scale(.97); }
.quiet-status { --quiet-accent: var(--safe); --quiet-glow: rgba(105, 207, 183, .16); position: absolute; top: max(58px, calc(env(safe-area-inset-top) + 44px)); left: 50%; translate: -50% 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2px solid var(--quiet-accent); border-radius: var(--radius-pill); background: var(--berry-950); color: var(--text-on-night); font-weight: 700; white-space: nowrap; }
.quiet-status .ui-icon { width: 24px; height: 24px; }
.quiet-status-copy { display: grid; gap: 2px; }
.quiet-status-copy strong,
.quiet-status-copy small { display: block; }
.quiet-status-copy small { font-size: 13px; }
.play-dialog[hidden] { display: none; }
.play-dialog { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(7, 10, 29, .72); }
.play-dialog-panel { width: min(100%, 420px); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border-radius: var(--radius-lg); background: var(--moon-100); color: var(--ink-950); box-shadow: 0 24px 60px rgba(7,10,29,.46); }
.play-dialog-panel h2 { margin: 0; text-align: center; }
.play-dialog-panel .btn { width: 100%; min-height: var(--touch-child); margin-top: 10px; }
.gameplay-scene[data-quiet-state='warning'] .lulu-lantern { background: rgba(220,152,70,.72); scale: 1.12; }
.gameplay-scene[data-quiet-state='hidden'] .lulu-lantern,
.gameplay-scene[data-quiet-state='failed'] .lulu-lantern { background: rgba(255,209,102,.16); scale: .78; }
.gameplay-scene[data-quiet-state='recovery'] .lulu-lantern { background: rgba(255,209,102,.64); animation: lantern-breathe 1.8s ease-in-out infinite alternate; }
.cat-mini {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--safe);
  overflow: hidden;
  transition: transform 0.3s ease;
  box-shadow: 0 0 14px rgba(105, 207, 183, .22);
}
.cat-mini[data-quiet-state="warning"] { border-color: var(--warning); }
.cat-mini[data-quiet-state="hidden"] { border-color: var(--hidden); }
.cat-mini[data-quiet-state="recovery"] { border-color: var(--recovery); }
.cat-mini[data-quiet-state="failed"] { border-color: var(--failed); }

.mascot-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mascot-image--home {
  width: 142%;
  height: 142%;
  object-position: 48% 40%;
}
.mascot-image--mini {
  width: 160%;
  height: 160%;
  object-position: 48% 38%;
}

/* Puzzle Area */
.puzzle-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: 80px 16px 100px;
}

/* Memory Cards */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
  width: min(100%, calc(var(--memory-columns, 4) * 72px + (var(--memory-columns, 4) - 1) * 10px));
  max-width: 400px;
}
.memory-card {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  color: inherit;
  background: transparent;
  cursor: pointer;
  perspective: 800px;
  min-width: 72px;
  min-height: 72px;
}
.memory-card-inner {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
  border-radius: var(--radius-md);
}
.memory-card.flipped .memory-card-inner,
.memory-card.matched .memory-card-inner {
  transform: rotateY(180deg);
}
.memory-card-front, .memory-card-back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  font-size: 32px;
}
.memory-card-front {
  background: linear-gradient(145deg, var(--berry-800), var(--berry-900));
}
.memory-card-back {
  background: linear-gradient(145deg, var(--moon-100), var(--lantern-400));
  transform: rotateY(180deg);
}
/* Later memory stages: moonlit cards from the same family as the first mission's leaves.
   Tiles grow with the board and a short last row stays centred. */
.memory-grid:not(.memory-grid--moon-leaves) {
  --memory-tile: clamp(72px, min(9vw, 14dvh), 116px);
  --memory-gap: clamp(8px, 1.4vw, 14px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--memory-gap);
  width: min(100%, calc(var(--memory-columns, 4) * var(--memory-tile) + (var(--memory-columns, 4) - 1) * var(--memory-gap)));
  max-width: none;
}
.memory-card:not(.memory-leaf) {
  width: var(--memory-tile);
  height: var(--memory-tile);
  filter: drop-shadow(0 12px 14px rgba(7, 10, 29, .34));
}
.memory-card:not(.memory-leaf) .memory-card-front {
  background: radial-gradient(circle at 50% 38%, rgba(255, 209, 102, .2), transparent 62%), linear-gradient(145deg, var(--berry-800), var(--berry-900));
  box-shadow: inset 0 0 0 2px rgba(255, 209, 102, .36), inset 0 -8px 12px rgba(7, 10, 29, .3);
}
/* A painted-style crescent: a lantern disc with an offset circle cut away. */
.memory-card:not(.memory-leaf) .memory-card-front::after {
  content: '';
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 34%, transparent 0 44%, var(--lantern-400) 46%);
  filter: drop-shadow(0 0 10px rgba(255, 209, 102, .5));
}
.memory-card:not(.memory-leaf) .memory-card-back { box-shadow: inset 0 -6px 10px rgba(171, 111, 26, .22); }
.memory-card:not(.memory-leaf).matched { opacity: .84; }
.memory-card:not(.memory-leaf).matched .memory-card-back { box-shadow: inset 0 0 0 3px var(--leaf-400), 0 0 18px rgba(105, 207, 183, .4); }
.memory-grid--moon-leaves {
  width: min(72vw, 520px);
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: clamp(14px, 2.5vw, 24px);
}
.memory-leaf {
  min-width: var(--touch-child);
  min-height: var(--touch-child);
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 900px;
  filter: drop-shadow(0 12px 12px rgba(7,10,29,.3));
}
.memory-leaf .memory-card-front,
.memory-leaf .memory-card-back {
  border: 0;
  border-radius: var(--radius-md);
}
.memory-leaf .memory-card-front {
  color: var(--leaf-400);
  background: linear-gradient(145deg, #2f8b75, #1d5b55);
  box-shadow: inset 0 -8px 12px rgba(6,44,41,.24);
}
.memory-leaf .memory-card-front::after { content: none; }
.memory-leaf .memory-card-back {
  color: var(--lantern-400);
  background: linear-gradient(145deg, var(--moon-100), var(--lantern-400));
}
.memory-leaf-shape { width: 78%; height: 78%; opacity: .72; }
.memory-clue-icon {
  width: 64%;
  height: 64%;
  filter: drop-shadow(0 0 10px rgba(255,209,102,.52));
}
.memory-leaf.hinted .memory-card-front {
  outline: 5px solid var(--lantern-400);
  outline-offset: 5px;
  box-shadow: 0 0 28px rgba(255,209,102,.65);
}
.memory-leaf.matched { opacity: .78; }

/* Counting */
.counting-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.counting-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 320px;
}
.counting-item {
  font-size: 36px;
  animation: popIn 0.3s ease both;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.counting-options {
  display: flex;
  gap: 16px;
}
.counting-option {
  width: 80px; height: 80px;
  border-radius: var(--radius-md);
  background: var(--surface-hl);
  border: 3px solid var(--text-3);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-1);
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.2s, transform 0.15s;
}
.counting-option.correct {
  border-color: var(--safe);
  background: rgba(105,207,183,.15);
}
.counting-option.wrong {
  border-color: var(--danger);
  animation: shake 0.4s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* Sorting */
.sorting-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 400px;
}
.sorting-objects {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.sorting-obj {
  width: 72px; height: 72px;
  min-width: var(--touch-child); min-height: var(--touch-child);
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  cursor: grab;
  transition: transform 0.2s;
  border: 3px solid transparent;
}
.sorting-obj.placed { opacity: 0.3; pointer-events: none; }

.sorting-baskets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 16px;
}
.sorting-basket {
  width: 100px; height: 100px;
  min-width: var(--touch-child); min-height: var(--touch-child);
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-hl);
  border: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.2s;
}
.sorting-basket-icon { font-size: 28px; }

/* ============================================================
   Gameplay Footer (Progress)
   ============================================================ */
.gameplay-footer {
  width: 100%;
  padding: 16px 24px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 5;
}
.progress-dots {
  display: flex;
  gap: 8px;
}
.progress-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-3);
  transition: background 0.3s;
}
.progress-dot.done { background: var(--safe); }
.progress-dot.current { background: var(--primary); transform: scale(1.3); }

/* ============================================================
   Result Screen
   ============================================================ */
.result-scene { --scene-art: url('./assets/scenes/memory-clearing.jpg'); text-align: center; }
.result-world-change { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
/* A soft lantern bloom behind the celebration, not hard dots that read as stray pixels. */
.result-success .result-world-change { opacity: 1; background: radial-gradient(circle at 70% 36%, rgba(255, 209, 102, .16), transparent 42%); animation: world-awaken .4s ease-out both; }
.result-mascot { width: clamp(170px, 27vw, 300px); height: auto; }
.result-mascot-image { width: 100%; height: auto; object-fit: contain; }
.explorer-journal { display: flex; gap: 12px; padding: 16px; margin-bottom: 16px; border-radius: var(--radius-md); background: rgba(255,243,207,.94); color: var(--ink-950); }
.journal-stamp { display: grid; place-items: center; align-content: center; gap: 1px; width: 68px; min-width: 68px; height: 68px; min-height: 68px; opacity: .55; border: 2px dashed currentColor; border-radius: 50%; }
.journal-stamp small { max-width: 52px; font-size: 12px; font-weight: 800; line-height: 1.1; text-align: center; }
.journal-stamp.earned { opacity: 1; color: var(--leaf-700); transform: rotate(-3deg); }
.reward-card { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 20px 8px 10px; margin-bottom: 16px; border: 1px solid var(--line-lantern); border-radius: var(--radius-md); color: var(--ink-950); background: var(--surface-parchment); box-shadow: var(--shadow-float); font-weight: 800; }
@keyframes world-awaken { from { opacity: 0; filter: brightness(.75); } to { opacity: 1; filter: brightness(1); } }
.result-msg,
.result-sub {
  width: min(88vw, 480px);
  margin-inline: 0;
  background: rgba(16, 22, 47, .92);
}
.result-msg {
  font-size: 22px;
  font-weight: 600;
  margin-top: 14px;
  margin-bottom: 0;
  padding: 12px 18px 4px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--text-on-night);
  text-align: center;
  word-break: keep-all;
  text-wrap: balance;
}
.result-sub {
  font-size: 16px;
  color: var(--text-2);
  margin-top: 0;
  margin-bottom: 24px;
  padding: 4px 18px 12px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-align: center;
}
.result-actions {
  width: min(100%, 680px);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.result-actions .btn {
  min-width: min(220px, 88vw);
}

/* ============================================================
   World Map
   ============================================================ */
.map-scene { --map-tint: linear-gradient(180deg, rgba(16,22,47,.2), rgba(16,22,47,.5)); --scene-art: var(--map-tint), url('./assets/moonlight/map-generated-landscape.webp'); --scene-tint: transparent; padding: 0; }
.map-heading { position: absolute; z-index: 4; top: max(18px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; width: min(70vw, 560px); text-align: center; text-shadow: 0 3px 18px rgba(7,10,29,.8); }
.map-heading p { margin: 0 0 6px; color: var(--moon-100); font-size: 14px; font-weight: 800; }
.map-heading h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); line-height: 1.2; word-break: keep-all; text-wrap: balance; }
.map-camp-control { position: absolute; z-index: 6; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; color: var(--moon-100); font-size: 13px; font-weight: 800; }
.map-camp-control .ui-icon { width: 30px; height: 30px; }
.map-lulu { position: absolute; z-index: 4; left: max(12px, env(safe-area-inset-left)); bottom: max(3%, env(safe-area-inset-bottom)); width: clamp(118px, 18vw, 210px); pointer-events: none; }
.map-lulu-image { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(7,10,29,.35)); }
.map-lantern-beam { position: absolute; right: -36%; bottom: 18%; width: 82%; height: 34%; transform: rotate(-12deg); transform-origin: left center; background: linear-gradient(90deg, rgba(255,209,102,.46), transparent); clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 62%); }
.map-load-notice { position: absolute; z-index: 8; top: max(112px, calc(env(safe-area-inset-top) + 94px)); left: 50%; translate: -50% 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; width: min(48%, 460px); margin: 0; padding: 14px 18px; overflow: hidden; border-radius: var(--radius-md); color: var(--moon-100); text-align: left; background: linear-gradient(145deg, var(--berry-800), var(--berry-950) 72%); box-shadow: var(--shadow-float); }
.map-load-notice::after { content: ''; position: absolute; inset: 5px; border: 1px dashed var(--line-lantern); border-radius: calc(var(--radius-md) - 5px); pointer-events: none; }
.map-load-notice .ui-icon { position: relative; z-index: 1; width: 34px; height: 34px; color: var(--lantern-400); filter: drop-shadow(0 4px 9px rgba(255, 215, 106, .24)); }
.map-load-notice span { position: relative; z-index: 1; min-width: 0; }
.map-load-notice strong,
.map-load-notice small { display: block; word-break: keep-all; overflow-wrap: break-word; }
.map-load-notice strong { font-size: clamp(16px, 1.55vw, 20px); line-height: 1.25; letter-spacing: -.02em; }
.map-load-notice small { margin-top: 3px; color: var(--text-muted-night); font-size: clamp(13px, 1.05vw, 15px); font-weight: 700; line-height: 1.4; }
.focused-story-map { position: absolute; z-index: 3; left: 50%; top: 54%; translate: -50% -50%; width: min(70vw, 620px); height: min(68dvh, 520px); }
.stage-node { position: absolute; z-index: 3; translate: -50% -50%; width: 76px; height: 76px; min-width: var(--touch-child); min-height: var(--touch-child); padding: 0; border: 0; background: transparent; cursor: pointer; }
.stage-node.is-focus { width: 92px; height: 92px; }
.stage-node.locked { z-index: 1; opacity: .52; }
.stage-node:disabled { cursor: default; }
.stage-marks { position: absolute; left: 50%; bottom: -14px; translate: -50% 0; display: flex; gap: 4px; }
.stage-mark { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,243,207,.28); }
.stage-mark.earned { background: var(--lantern-400); }

@media (max-width: 700px) {
  .map-heading { top: max(16px, env(safe-area-inset-top)); width: calc(100vw - 188px); }
  .map-heading p { font-size: 12px; }
  .map-heading h1 { font-size: clamp(22px, 7vw, 30px); }
  .map-lulu { left: max(4px, env(safe-area-inset-left)); bottom: max(1%, env(safe-area-inset-bottom)); width: min(34vw, 142px); }
  .focused-story-map { top: 53%; width: min(92vw, 430px); height: min(68dvh, 560px); }
  .map-load-notice { top: max(104px, calc(env(safe-area-inset-top) + 88px)); grid-template-columns: 38px minmax(0, 1fr); gap: 9px; width: calc(100% - 40px); padding: 13px 15px; }
  .map-load-notice .ui-icon { width: 31px; height: 31px; }
  .map-load-notice strong { font-size: 17px; }
  .map-load-notice small { font-size: 14px; }
  .map-load-notice + .focused-story-map { top: 59%; height: min(57dvh, 470px); }
  .stage-node { width: 68px; height: 68px; }
  .stage-node.is-focus { width: 82px; height: 82px; }
}

[data-quiet-label] {
  min-width: 5rem;
  text-align: center;
}

.memory-card:not(.memory-leaf).hinted,
.counting-option.hinted,
.sorting-basket.hinted {
  outline: 4px solid var(--gold);
  outline-offset: 3px;
}

.quiet-status[data-state='safe'] { --quiet-accent: var(--safe); }
.quiet-status[data-state='warning'] { --quiet-accent: var(--warning); }
.quiet-status[data-state='hidden'] { --quiet-accent: var(--hidden); }
.quiet-status[data-state='recovery'] { --quiet-accent: var(--recovery); }

/* ============================================================
   Game feel
   ============================================================ */
.camp-lulu {
  transform-origin: 50% 100%;
  animation: lulu-ready 3.2s var(--ease-out-play) 2;
}

.camp-lantern-glow {
  transform-origin: 50% 50%;
  animation: lantern-breathe 2.4s ease-in-out 3 alternate;
}

.camp-map-prop {
  isolation: isolate;
  transition: transform var(--motion-fast) var(--ease-out-play), box-shadow var(--motion-fast) ease-out;
}

.camp-map-prop::before {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: -1;
  border: 2px solid rgba(255, 209, 102, .78);
  border-radius: inherit;
  pointer-events: none;
  animation: mission-ping 1.8s var(--ease-out-play) 3;
}

.stage-node {
  transition: transform var(--motion-fast) var(--ease-out-play), filter var(--motion-fast) ease-out;
}

.stage-node.unlocked {
  isolation: isolate;
  animation: node-arrive var(--motion-enter) var(--ease-out-play) backwards;
}

.stage-node.unlocked::before {
  content: '';
  position: absolute;
  inset: -12px;
  z-index: -1;
  border: 2px solid rgba(255, 209, 102, .72);
  border-radius: inherit;
  pointer-events: none;
  animation: node-ping 1.6s var(--ease-out-play) 3;
}

.gameplay-header {
  background: linear-gradient(180deg, rgba(16, 22, 47, .88), rgba(16, 22, 47, 0));
}

.stage-label {
  font-weight: 800;
  text-shadow: 0 3px 14px rgba(7, 10, 29, .72);
}

.gameplay-scene::after {
  transition: opacity var(--motion-fast) ease-out, filter var(--motion-fast) ease-out;
}

.gameplay-scene[data-quiet-state='warning'] {
  --scene-tint: radial-gradient(circle at 50% 52%, transparent 42%, rgba(220, 152, 70, .22)), linear-gradient(180deg, rgba(16, 22, 47, .12), rgba(16, 22, 47, .38));
}

.gameplay-scene[data-quiet-state='hidden'] {
  --scene-tint: linear-gradient(180deg, rgba(16, 22, 47, .58), rgba(7, 10, 29, .76));
}

.gameplay-scene[data-quiet-state='recovery'] {
  --scene-tint: radial-gradient(circle at 50% 52%, transparent 36%, rgba(105, 207, 183, .18)), linear-gradient(180deg, rgba(16, 22, 47, .14), rgba(16, 22, 47, .4));
}

.quiet-status {
  transform-origin: 50% 50%;
  box-shadow: 0 10px 28px rgba(7, 10, 29, .34), 0 0 18px rgba(105, 207, 183, .16);
  transition: border-color var(--motion-fast) ease-out, box-shadow var(--motion-fast) ease-out, transform var(--motion-fast) var(--ease-out-play);
}

.quiet-status[data-state='warning'] { --quiet-glow: rgba(255, 209, 102, .3); }
.quiet-status[data-state='hidden'] { --quiet-glow: rgba(220, 152, 70, .28); }
.quiet-status[data-state='recovery'] { --quiet-glow: rgba(105, 207, 183, .34); }
.quiet-status[data-state='recovery'] .ui-icon { animation: lantern-breathe 1.8s ease-in-out infinite alternate; }

.gameplay-lulu {
  transform-origin: 50% 100%;
  transition: transform var(--motion-fast) var(--ease-out-play), filter var(--motion-fast) ease-out, opacity var(--motion-fast) ease-out;
}

.gameplay-scene[data-quiet-state='warning'] .gameplay-lulu {
  transform: translateY(-3px) rotate(-1deg);
}

.gameplay-scene[data-quiet-state='hidden'] .gameplay-lulu {
  transform: translateY(28px) scale(.88);
  opacity: .22;
}

.gameplay-scene[data-quiet-state='recovery'] .gameplay-lulu {
  filter: drop-shadow(0 14px 24px rgba(105, 207, 183, .28));
}

.gameplay-scene[data-quiet-state='hidden'] .puzzle-area {
  pointer-events: none;
  filter: brightness(.72);
}

.gameplay-scene.active .gameplay-header {
  animation: hud-enter .42s var(--ease-out-play) backwards;
}

.gameplay-scene.active .puzzle-area {
  animation: mission-field-enter var(--motion-enter) .08s var(--ease-out-play) backwards;
}

.gameplay-scene.active .gameplay-lulu {
  animation: guide-enter var(--motion-enter) .16s var(--ease-out-play) backwards;
}

.gameplay-scene.active .gameplay-footer {
  animation: hud-enter .4s .22s var(--ease-out-play) backwards;
}

.memory-card,
.counting-option,
.sorting-obj,
.sorting-basket {
  transition: transform var(--motion-fast) var(--ease-out-play), border-color var(--motion-fast) ease-out, box-shadow var(--motion-fast) ease-out, opacity var(--motion-fast) ease-out;
}

.memory-card.flipped:not(.matched) {
  animation: card-reveal .38s var(--ease-out-play);
}

.memory-card.matched {
  animation: correct-confirm .58s var(--ease-out-play);
}

.counting-option.correct {
  box-shadow: 0 8px 26px rgba(105, 207, 183, .32);
  animation: correct-confirm .58s var(--ease-out-play);
}

.sorting-obj.placed {
  transform: scale(.72);
}

.progress-dot.current {
  box-shadow: 0 0 16px rgba(198, 189, 234, .48);
  animation: progress-beat 1.4s ease-in-out 3;
}

.result-success.active .result-world-change {
  animation: victory-field 1.1s var(--ease-out-play) both;
}

.result-scene.active .result-mascot {
  animation: result-hero-enter .55s var(--ease-out-play) backwards;
}

.result-scene.active .explorer-journal,
.result-scene.active .reward-card,
.result-scene.active .result-actions {
  animation: reward-enter .48s .16s var(--ease-out-play) backwards;
}

@media (hover: hover) {
  .stage-node.unlocked:hover:not(:focus-visible) { filter: brightness(1.08); }
}

@keyframes lulu-ready {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-7px) rotate(-1deg); }
  58% { transform: translateY(-6px) rotate(1deg); }
}

@keyframes lantern-breathe {
  from { opacity: .62; transform: scale(.9); }
  to { opacity: 1; transform: scale(1.08); }
}

@keyframes mission-ping {
  0% { opacity: .8; transform: scale(.92); }
  75%, 100% { opacity: 0; transform: scale(1.16); }
}

@keyframes node-arrive {
  from { opacity: .28; transform: scale(.72) rotate(-7deg); filter: brightness(1.4); }
}

@keyframes node-ping {
  0% { opacity: .9; transform: scale(.82); }
  80%, 100% { opacity: 0; transform: scale(1.45); }
}


@keyframes hud-enter {
  from { opacity: .22; transform: translateY(-16px); filter: blur(5px); }
}

@keyframes mission-field-enter {
  from { opacity: .22; transform: translateY(18px) scale(.94); filter: blur(7px); }
}

@keyframes guide-enter {
  from { opacity: .22; transform: translateX(-18px) scale(.9); filter: blur(6px); }
}

@keyframes card-reveal {
  0% { transform: scale(.9); }
  58% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes correct-confirm {
  0% { transform: scale(.92); filter: brightness(1); }
  48% { transform: scale(1.12) rotate(2deg); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes progress-beat {
  0%, 100% { transform: scale(1.3); }
  50% { transform: scale(1.7); }
}

@keyframes victory-field {
  0% { opacity: 0; transform: scale(.82); filter: brightness(1.65) blur(7px); }
  52% { opacity: 1; transform: scale(1.04); filter: brightness(1.28) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes result-hero-enter {
  from { opacity: .24; transform: translateY(18px) scale(.82) rotate(-3deg); filter: blur(6px); }
}

@keyframes reward-enter {
  from { opacity: .24; transform: translateY(16px) scale(.96); filter: blur(5px); }
}

@media (max-width: 420px) {
  .camp-map-prop::before { inset: -8px; }
  .gameplay-header { padding-inline: 12px; }
  .stage-label { max-width: 42vw; font-size: 14px; }
  .quiet-status { padding: 7px 11px; }
}

/* ============================================================
   Mission loop — game structure
   ============================================================ */
.camp-map-prop {
  width: clamp(250px, 31vw, 360px);
  min-height: 128px;
  aspect-ratio: auto;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  text-align: left;
}

.camp-map-icon { width: 52px; height: 52px; }
.camp-mission-copy { min-width: 0; display: grid; gap: 3px; }
.camp-mission-no { color: var(--leaf-700); font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; }
.camp-mission-copy strong { overflow: hidden; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.camp-mission-copy small { color: rgba(23, 23, 41, .72); font-size: 13px; font-weight: 700; }

.mission-briefing-scene {
  --briefing-tint: radial-gradient(circle at 50% 48%, rgba(255, 209, 102, .2), rgba(16, 22, 47, .68) 66%);
  --scene-art: var(--briefing-tint), url('./assets/moonlight/briefing-generated-landscape.webp');
  --scene-tint: transparent;
}

.mission-briefing-panel {
  position: relative;
  width: min(92vw, 680px);
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px 24px;
  padding: clamp(24px, 4vw, 40px);
  border: 2px solid rgba(255, 209, 102, .72);
  border-radius: var(--radius-lg);
  background: rgba(16, 22, 47, .94);
  box-shadow: 0 28px 70px rgba(7, 10, 29, .48), 0 0 42px rgba(255, 209, 102, .13);
}

.mission-briefing-scene.active .mission-briefing-panel { animation: mission-briefing-enter .62s var(--ease-out-play) backwards; }
.mission-briefing-beacon { grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; color: var(--lantern-400); background: rgba(255, 209, 102, .12); box-shadow: 0 12px 34px rgba(7, 10, 29, .34), inset 0 0 26px rgba(255, 209, 102, .12); }
.mission-briefing-beacon .ui-icon { width: 58px; height: 58px; }
.mission-briefing-copy { min-width: 0; text-shadow: 0 3px 18px rgba(7, 10, 29, .82); }
.mission-briefing-no { margin: 0; color: var(--lantern-400); font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; }
.mission-briefing-place { margin: 8px 0 0; color: var(--secondary); font-weight: 800; }
.mission-briefing-copy h1 { margin: 4px 0 0; font-size: clamp(32px, 6vw, 52px); line-height: 1.08; text-wrap: balance; }
.mission-briefing-body { margin: 14px 0 0; color: var(--text-2); font-size: clamp(17px, 2.4vw, 21px); line-height: 1.5; }
.mission-briefing-actions { grid-column: 1 / -1; display: flex; gap: 12px; }
.mission-briefing-actions .btn { flex: 1; max-width: 320px; }

.gameplay-mission-id { min-width: 0; display: grid; gap: 1px; }
.gameplay-mission-id small { color: var(--lantern-400); font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; }
.gameplay-vitals { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-weight: 800; }
.mission-timer { min-width: 58px; color: var(--moon-100); font-variant-numeric: tabular-nums; text-align: right; }
.puzzle-area { padding: 112px clamp(12px, 4vw, 48px) 76px; }

.mission-board {
  position: relative;
  isolation: isolate;
  width: min(82vw, 760px);
  max-height: calc(100dvh - 188px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: clamp(16px, 3dvh, 28px);
  padding: clamp(18px, 3vw, 28px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 243, 207, .28);
  border-radius: var(--radius-lg);
  background: rgba(16, 22, 47, .86);
  box-shadow: 0 26px 62px rgba(7, 10, 29, .46), inset 0 1px rgba(255, 243, 207, .14);
}

.mission-board::after { content: ''; position: absolute; inset: 0; z-index: 8; border-radius: inherit; opacity: 0; pointer-events: none; }
.mission-board-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; }
.mission-board-header span { min-width: 0; }
.mission-board-header small { display: block; margin-bottom: 3px; color: var(--secondary); font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; }
.mission-board-header h2 { margin: 0; font-size: clamp(20px, 3vw, 28px); line-height: 1.25; word-break: keep-all; text-wrap: balance; }
/* A status chip, not a button: lantern outline on the board instead of the CTA fill. */
.mission-board-progress { flex: 0 0 auto; min-width: 96px; padding: 8px 14px; border: 2px solid var(--lantern-400); border-radius: var(--radius-pill); color: var(--lantern-400); background: rgba(255, 209, 102, .1); font-size: 15px; text-align: center; }

.memory-mission .memory-grid { margin: 0 auto; }
.counting-mission .counting-area,
.sorting-mission .sorting-area { max-width: none; }
.counting-glyph { width: 100%; height: 100%; color: var(--lantern-400); filter: drop-shadow(0 7px 8px rgba(7, 10, 29, .28)); }
.counting-item { width: clamp(38px, 6vw, 56px); height: clamp(38px, 6vw, 56px); }

.sorting-obj { background: rgba(37, 43, 85, .86); border-color: rgba(255, 243, 207, .22); }
/* Shape tokens are warm moonlit pieces, carved in teal on the chest name plates. */
.sorting-piece { display: block; width: 34px; height: 34px; border-radius: 22%; background: linear-gradient(160deg, var(--moon-100), var(--lantern-400)); box-shadow: inset 0 -5px 8px rgba(171, 111, 26, .3); }
.sorting-piece--red,
.sorting-piece--blue,
.sorting-piece--green,
.sorting-piece--circle { border-radius: 50%; }
.sorting-piece--triangle { border-radius: 0; clip-path: polygon(50% 4%, 96% 92%, 4% 92%); }
.sorting-basket-icon { display: grid; place-items: center; }
.sorting-basket-icon .sorting-piece { width: 30px; height: 30px; }

[data-game-root][data-feedback='correct'] .mission-board { animation: board-correct .42s var(--ease-out-play); }
[data-game-root][data-feedback='correct'] .mission-board::after { animation: board-correct-flash .42s ease-out; background: rgba(105, 207, 183, .22); }
[data-game-root][data-feedback='mistake'] .mission-board { animation: board-mistake .38s ease-out; }
[data-game-root][data-feedback='mistake'] .mission-board::after { animation: board-mistake-flash .38s ease-out; background: rgba(255, 146, 125, .22); }

@keyframes mission-briefing-enter {
  from { opacity: .22; transform: translateY(28px) scale(.94); filter: blur(8px); }
}

@keyframes board-correct {
  0% { transform: scale(.985); box-shadow: 0 26px 62px rgba(7, 10, 29, .46); }
  54% { transform: scale(1.018); box-shadow: 0 28px 68px rgba(7, 10, 29, .48), 0 0 34px rgba(105, 207, 183, .32); }
  100% { transform: scale(1); }
}

@keyframes board-correct-flash { 0% { opacity: .92; } 100% { opacity: 0; } }
@keyframes board-mistake { 0%, 100% { transform: translateX(0); } 28% { transform: translateX(-9px) rotate(-.4deg); } 62% { transform: translateX(7px) rotate(.3deg); } }
@keyframes board-mistake-flash { 0% { opacity: .8; } 100% { opacity: 0; } }

@media (max-width: 700px) {
  .camp-map-prop { right: max(12px, env(safe-area-inset-right)); bottom: max(5%, env(safe-area-inset-bottom)); width: min(calc(100vw - 24px), 360px); min-height: 108px; }
  .camp-greeting { width: min(92%, 560px); }
  .camp-greeting h1 { font-size: clamp(28px, 8.5vw, 34px); line-height: 1.25; word-break: keep-all; text-wrap: balance; }
  .mission-briefing-panel { grid-template-columns: 72px 1fr; gap: 14px; padding: 20px; }
  .mission-briefing-beacon { width: 72px; height: 72px; }
  .mission-briefing-beacon .ui-icon { width: 38px; height: 38px; }
  .mission-briefing-actions { flex-direction: column; }
  .mission-board { width: 100%; max-height: calc(100dvh - 176px); padding: 16px; border-radius: var(--radius-md); }
  .mission-board-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; }
  .mission-board-header span { display: contents; }
  .mission-board-header small { grid-column: 1; grid-row: 1; margin: 0; }
  .mission-board-header h2 { grid-column: 1 / -1; grid-row: 2; }
  .mission-board-progress { grid-column: 2; grid-row: 1; min-width: auto; padding: 8px 10px; font-size: 13px; }
  .memory-grid--moon-leaves {
    width: min(100%, 360px);
    grid-template-columns: repeat(2, minmax(64px, 1fr));
    gap: clamp(10px, 2dvh, 16px) 16px;
    justify-items: center;
  }
  .memory-leaf {
    width: min(112px, 100%);
    max-height: 112px;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  .camp-map-prop { width: min(34vw, 300px); min-height: 104px; }
  .mission-briefing-panel { max-height: calc(100dvh - 28px); padding: 18px 24px; }
  .mission-briefing-beacon { width: 84px; height: 84px; }
  .mission-briefing-copy h1 { font-size: clamp(28px, 5vw, 42px); }
  .mission-briefing-body { margin-top: 8px; }
  .puzzle-area { padding-top: 94px; padding-bottom: 18px; }
  .mission-board { max-height: calc(100dvh - 112px); gap: 14px; padding: 16px 20px; }
}

/* ============================================================
   Child journey — bold storybook composition
   ============================================================ */
/* Intro poster */
.intro-scene {
  --intro-tint: linear-gradient(90deg, rgba(16, 22, 47, .72), rgba(16, 22, 47, .16) 58%, rgba(16, 22, 47, .34));
  --scene-tint: transparent;
  align-items: flex-start;
  text-align: left;
}
.intro-copy {
  width: min(42vw, 540px);
  max-width: none;
  margin: max(13dvh, env(safe-area-inset-top)) 0 0 max(6vw, env(safe-area-inset-left));
  text-align: left;
}
.intro-copy h1 { font-size: clamp(64px, 9vw, 92px); letter-spacing: -.035em; }
.intro-copy p { width: min(34vw, 390px); margin-top: 18px; font-size: clamp(19px, 2.4vw, 26px); }
.intro-lulu { display: none; }
/* Landscape: title, invitation, start action and privacy promise form one left
   column, centred vertically beside Lulu, sharing the title's left edge. */
@media (orientation: landscape) {
  .intro-scene { justify-content: center; }
  .intro-copy { margin-top: 0; }
  .intro-actions {
    position: static;
    justify-items: start;
    width: min(42vw, 460px);
    margin: clamp(24px, 6dvh, 44px) 0 0 max(6vw, env(safe-area-inset-left));
    translate: 0;
  }
  .intro-actions .intro-privacy-note { max-width: 480px; text-align: left; }
}
.intro-privacy-note { max-width: 420px; font-size: 14px; font-weight: 600; }
.intro-start {
  right: max(7vw, env(safe-area-inset-right));
  left: auto;
  bottom: max(8dvh, calc(env(safe-area-inset-bottom) + 24px));
  translate: 0;
  min-width: min(300px, calc(100vw - 40px));
  min-height: 76px;
  font-size: 22px;
}

/* Calibration: the painted room carries the scene, the live meter stays legible above it.
   One left column, vertically centred: listening ring, title, status, meter, privacy
   promise, then the quieter alternative separated by space. */
.calibration-screen { align-items: flex-start; justify-content: flex-start; }
.calibration-panel {
  position: absolute;
  top: 50%;
  left: max(7%, env(safe-area-inset-left));
  translate: 0 -50%;
  display: grid;
  justify-items: start;
  width: min(43%, 540px);
  padding: 0;
  color: var(--text-on-night);
  text-align: left;
  text-shadow: 0 3px 22px rgba(2, 7, 24, .92);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Calibration and fallback titles occupy the same slot, so they share one size. */
.calibration-panel h1,
.microphone-fallback-copy h1 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.calibration-ring {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 0 24px;
  border: 2px solid rgba(255, 209, 102, .78);
  background: rgba(16, 22, 47, .62);
  box-shadow: 0 0 0 6px rgba(255, 209, 102, .1), 0 0 36px rgba(255, 209, 102, .26);
}
.calibration-ring .ui-icon { width: 40px; height: 40px; }
/* A slow lantern halo tells the child the game is listening, not stuck. */
.calibration-screen .calibration-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid rgba(255, 209, 102, .55);
  border-radius: inherit;
  animation: listening-halo 1.8s var(--ease-out-play) infinite;
  pointer-events: none;
}
@keyframes listening-halo {
  from { opacity: .9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.45); }
}
.calibration-text { margin: 12px 0 0; color: rgba(255, 250, 239, .94); font-size: 18px; font-weight: 600; line-height: 1.5; text-align: left; }
.calibration-progress { margin-top: 18px; }
.calibration-panel .voice-privacy-note {
  margin-top: 16px;
  color: var(--text-muted-night);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-shadow: 0 2px 14px rgba(2, 7, 24, .98);
}
/* Inline so the shield wraps with the sentence whether it is centred or left-aligned. */
.privacy-icon { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; }
.calibration-skip {
  margin-top: 32px;
  padding-inline: 28px;
  text-shadow: none;
}

.microphone-fallback-screen {
  --fallback-tint: linear-gradient(90deg, rgba(3, 12, 31, .22), transparent 62%);
  --scene-art: var(--fallback-tint), url('./assets/moonlight/calibration-generated-landscape.webp');
  --scene-tint: transparent;
  align-items: flex-start;
  justify-content: flex-start;
}
.microphone-fallback-copy {
  position: absolute;
  top: 50%;
  left: max(7%, env(safe-area-inset-left));
  translate: 0 -50%;
  width: min(46%, 620px);
  color: var(--text-on-night);
  text-align: left;
  text-shadow: 0 3px 22px rgba(2, 7, 24, .94);
}
.microphone-fallback-copy h1 {
  max-width: 620px;
  margin: 0;
  word-break: keep-all;
  text-wrap: balance;
}
.microphone-fallback-copy p {
  max-width: 520px;
  margin: 17px 0 0;
  color: rgba(255, 250, 239, .96);
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 750;
  line-height: 1.45;
  word-break: keep-all;
}

/* Landscape: calibration and fallback hang from the same top edge and share the intro's
   left edge, so the lantern ring stays put when one screen replaces the other. */
@media (orientation: landscape) {
  .calibration-panel,
  .microphone-fallback-copy {
    top: max(16px, env(safe-area-inset-top), calc(50% - 170px));
    left: calc(var(--screen-pad-x) + max(6vw, env(safe-area-inset-left)));
    translate: 0;
  }
}

/* Camp: one story beat, one next action */
.camp-scene {
  --camp-tint: linear-gradient(90deg, rgba(16, 22, 47, .58), rgba(16, 22, 47, .04) 52%, rgba(16, 22, 47, .28));
  --scene-tint: transparent;
}
.camp-place {
  position: absolute;
  z-index: 4;
  top: max(5%, calc(env(safe-area-inset-top) + 18px));
  left: max(6%, env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--moon-100);
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 3px 16px rgba(7, 10, 29, .82);
}
.camp-place .ui-icon { width: 24px; height: 24px; color: var(--lantern-400); }
.camp-greeting {
  top: max(14%, calc(env(safe-area-inset-top) + 18px));
  left: max(55%, env(safe-area-inset-left));
  translate: 0;
  width: min(39%, 630px);
  text-align: left;
}
.camp-greeting h1 {
  margin: 0;
  font-size: clamp(42px, 5.7vw, 64px);
  line-height: 1.08;
  letter-spacing: -.03em;
  word-break: keep-all;
  text-wrap: balance;
}
.camp-lulu { display: none; }
.camp-decor {
  position: absolute;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--moon-100);
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 3px 12px rgba(7, 10, 29, .86);
}
.camp-decor-object { position: relative; display: block; width: 58px; height: 48px; filter: drop-shadow(0 9px 12px rgba(7, 10, 29, .42)); }
.camp-decor small { display: none; }
.camp-decor--firefly-planter { left: 2%; bottom: 33%; }
.camp-decor--firefly-planter .camp-decor-object { width: clamp(92px, 9vw, 118px); height: auto; filter: drop-shadow(0 10px 16px rgba(255, 209, 102, .24)); }
.camp-decor--moon-mobile { top: 8%; left: 37%; }
.camp-decor--moon-mobile .camp-decor-object { width: clamp(70px, 7vw, 96px); height: auto; }
.camp-decor--feather-pillow { left: 38%; bottom: 8%; }
.camp-decor--feather-pillow .camp-decor-object { width: clamp(66px, 6.5vw, 88px); height: auto; }
.camp-decor--yarn-basket { right: 1%; bottom: 18%; }
.camp-decor--yarn-basket .camp-decor-object { width: clamp(62px, 6vw, 82px); height: auto; }
.camp-decor--star-bed { left: 25%; bottom: 1%; }
.camp-decor--star-bed .camp-decor-object { width: clamp(110px, 11vw, 150px); height: auto; }
.camp-decor--moon-lantern { top: 34%; right: 1%; }
.camp-decor--moon-lantern .camp-decor-object { width: clamp(58px, 5.5vw, 76px); height: auto; }
.camp-decor--golden-fish { top: 44%; left: 60%; }
.camp-decor--golden-fish .camp-decor-object { width: clamp(58px, 6.5vw, 88px); height: auto; }
.camp-decor--night-moth { top: 36%; left: 71%; }
.camp-decor--night-moth .camp-decor-object { width: clamp(52px, 5.8vw, 78px); height: auto; }
.camp-decor--puffy-cloud { top: 22%; left: 33%; }
.camp-decor--puffy-cloud .camp-decor-object { width: clamp(58px, 6.3vw, 86px); height: auto; }
.camp-decor--firefly-lamp { top: 21%; left: 41%; }
.camp-decor--firefly-lamp .camp-decor-object { width: clamp(42px, 4.6vw, 62px); height: auto; }
.camp-decor--owl-clock { top: 20%; left: 49%; }
.camp-decor--owl-clock .camp-decor-object { width: clamp(44px, 4.8vw, 66px); height: auto; }
.camp-decor--dreamcatcher { top: 12%; left: 3%; }
.camp-decor--dreamcatcher .camp-decor-object { width: clamp(42px, 4.5vw, 62px); height: auto; }
.camp-decor--night-rainbow { left: 35%; bottom: 3%; }
.camp-decor--night-rainbow .camp-decor-object { width: clamp(58px, 6.5vw, 88px); height: auto; }
.camp-decor--small-crown { left: 43%; bottom: 4%; }
.camp-decor--small-crown .camp-decor-object { width: clamp(52px, 5.8vw, 78px); height: auto; }
.camp-decor--glow-planter { left: 50%; bottom: 2%; }
.camp-decor--glow-planter .camp-decor-object { width: clamp(44px, 4.8vw, 66px); height: auto; }
.camp-scene[data-episode-complete="true"] { --camp-tint: radial-gradient(circle at 74% 34%, rgba(255, 209, 102, .35), transparent 26%), linear-gradient(90deg, rgba(16, 22, 47, .58), rgba(16, 22, 47, .04) 52%, rgba(16, 22, 47, .28)); }
.camp-map-prop {
  right: max(8%, env(safe-area-inset-right));
  bottom: max(9%, calc(env(safe-area-inset-bottom) + 18px));
  width: min(37%, 500px);
  min-height: 164px;
  grid-template-columns: 76px 1fr;
  gap: 20px;
  padding: 24px 26px;
  justify-items: start;
  border-radius: var(--radius-md);
  background: rgba(255, 243, 207, .97);
  box-shadow: 0 22px 52px rgba(7, 10, 29, .42);
}
/* Landscape: the greeting and the mission card share one left edge. */
@media (orientation: landscape) {
  .camp-map-prop { left: max(55%, env(safe-area-inset-left)); right: auto; width: min(39%, 560px); }
}
.camp-map-prop:active { transform: translateY(2px) scale(.98); box-shadow: 0 12px 30px rgba(7, 10, 29, .38); }
.camp-map-prop::before { inset: -7px; border-width: 1px; opacity: .72; }
.camp-map-icon { width: 68px; height: 68px; color: var(--leaf-700); }
.camp-mission-copy { gap: 5px; }
.camp-mission-copy strong { font-size: clamp(23px, 2.8vw, 32px); letter-spacing: -.025em; white-space: normal; text-wrap: balance; }
.camp-mission-copy small { font-size: 14px; }
.camp-mission-action {
  display: block;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(34, 107, 103, .24);
  color: var(--leaf-700);
  font-size: 16px;
  font-weight: 900;
}
/* Map: the winding moonlit trail */
.map-scene {
  --map-tint: linear-gradient(180deg, rgba(16, 22, 47, .52), rgba(16, 22, 47, .08) 24%, rgba(16, 22, 47, .34));
  --scene-tint: transparent;
}
.map-heading {
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  translate: -50% 0;
  width: min(70vw, 620px);
  text-align: center;
}
.map-heading p { margin-bottom: 6px; font-size: 14px; }
.map-heading h1 { font-size: clamp(30px, 4.5vw, 44px); letter-spacing: -.025em; }
.map-camp-control { top: max(5%, calc(env(safe-area-inset-top) + 16px)); right: max(5%, env(safe-area-inset-right)); width: var(--touch-child); min-width: var(--touch-child); height: var(--touch-child); min-height: var(--touch-child); }
.map-lulu { left: max(2%, env(safe-area-inset-left)); bottom: max(-2%, env(safe-area-inset-bottom)); width: clamp(170px, 21vw, 250px); }
.map-lantern-beam { right: -48%; bottom: 22%; width: 100%; opacity: .7; }
.focused-story-map.map-scroll {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 128px 0 max(92px, env(safe-area-inset-bottom));
  translate: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 243, 207, .42) transparent;
}
.map-load-notice + .focused-story-map.map-scroll { top: 0; height: 100%; padding-top: 195px; }
.focused-story-map.map-scroll::-webkit-scrollbar { width: 8px; }
.focused-story-map.map-scroll::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: rgba(255, 243, 207, .42); }
.story-map-canvas {
  position: relative;
  width: min(100%, 720px);
  height: 1760px;
  margin: 0 auto;
}
.story-trail { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.story-trail-base,
.story-trail-progress-image { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.story-trail-progress {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  height: var(--journey-progress);
  overflow: hidden;
  filter: drop-shadow(0 0 7px rgba(255, 209, 102, .66));
}
.story-trail-progress-image { position: absolute; inset: 0; height: 1760px; max-width: none; }
.future-mist {
  position: absolute;
  inset: var(--mist-start) 0 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(198, 189, 234, .18) 5%, rgba(23, 29, 63, .3) 36%, rgba(23, 29, 63, .08));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.stage-node.story-stage {
  left: var(--map-x);
  top: var(--map-y);
  z-index: 3;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.stage-node.story-stage.is-focus { width: 92px; height: 92px; z-index: 5; }
.stage-node.story-stage.locked { z-index: 1; opacity: .48; }
.stage-node.story-stage.unlocked { animation: none; }
.stage-node.story-stage.unlocked::before { content: none; }
.stage-node.story-stage .stage-node-symbol {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: transparent;
}
.stage-node-art { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(7, 10, 29, .38)); }
.stage-node.story-stage.locked .stage-node-art { filter: grayscale(.55) saturate(.38) brightness(.64) drop-shadow(0 8px 12px rgba(7, 10, 29, .28)); }
.stage-node.story-stage.cleared .stage-node-art { filter: saturate(.82) brightness(.9) drop-shadow(0 8px 12px rgba(7, 10, 29, .32)); }
.stage-node.story-stage.is-focus .stage-node-art { filter: drop-shadow(0 10px 16px rgba(7, 10, 29, .42)) drop-shadow(0 0 10px rgba(255, 209, 102, .5)); }
.stage-node-title {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: max-content;
  max-width: 180px;
  display: grid;
  gap: 2px;
  padding: 8px 12px 9px;
  translate: -50% 0;
  color: var(--moon-100);
  text-align: center;
  pointer-events: none;
  background: rgba(16, 22, 47, .92);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 24px rgba(7, 10, 29, .38);
}
.stage-node-title--above { top: auto; bottom: calc(100% + 10px); }
.stage-node-title small { color: var(--lantern-400); font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; line-height: 1.2; }
.stage-node-title strong { font-size: 16px; line-height: 1.25; word-break: keep-all; text-wrap: balance; }
.stage-marks { top: 10px; right: 12px; bottom: auto; left: auto; translate: 0; }

/* Briefing: use the scene as the stage */
.mission-briefing-scene {
  --briefing-tint: linear-gradient(90deg, rgba(16, 22, 47, .52), rgba(16, 22, 47, .2) 45%, rgba(16, 22, 47, .68));
  --scene-tint: transparent;
}
.mission-briefing-panel {
  position: absolute;
  top: 50%;
  right: max(6%, env(safe-area-inset-right));
  translate: 0 -50%;
  width: min(45%, 590px);
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.mission-briefing-beacon {
  display: none;
}
.mission-briefing-place { margin-top: 12px; }
.mission-briefing-copy h1 { margin-top: 7px; font-size: clamp(40px, 5.1vw, 70px); letter-spacing: -.035em; }
.mission-briefing-body { width: min(100%, 570px); font-size: clamp(16px, 1.7vw, 22px); }
.mission-briefing-actions { max-width: none; margin-top: 23px; }
.mission-briefing-actions .btn { min-height: 72px; }

/* Gameplay: make the puzzle the clearing's focal point */
.gameplay-scene {
  --game-tint: linear-gradient(180deg, rgba(5, 12, 31, .52), transparent 24%, transparent 70%, rgba(4, 10, 25, .58));
  --scene-tint: transparent;
  /* Lulu's corner: directly above the demo button, so neither covers the other. */
  --lulu-w: clamp(110px, 12vw, 170px);
  --lulu-slot-left: max(24px, env(safe-area-inset-left));
  --lulu-slot-bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--touch-child) + 10px);
  --cat-w: clamp(180px, 19vw, 290px);
  padding: 0;
}
.gameplay-scene[data-game-type='memory'] { --scene-art: var(--game-tint), url('./assets/moonlight/memory-game-bg-landscape-v1.webp'); }
.gameplay-scene[data-game-type='counting'] { --scene-art: var(--game-tint), url('./assets/moonlight/counting-bg-landscape-v1.webp'); }
.gameplay-scene[data-game-type='sorting'] { --scene-art: var(--game-tint), url('./assets/moonlight/sorting-bg-landscape-v1.webp'); }
.gameplay-header {
  width: calc(100% - 48px);
  top: max(22px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  padding: 0;
  background: none;
}
.gameplay-mission-id {
  gap: 3px;
  padding: 10px 15px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-night);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .24);
}
.stage-label { margin: 0; color: var(--text-on-night); font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
.gameplay-vitals { position: absolute; top: 58px; right: max(2px, env(safe-area-inset-right)); }
.mission-timer { min-width: 72px; font-size: 18px; }
.quiet-status {
  top: max(20px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  left: auto;
  translate: 0;
  min-height: 48px;
  padding: 10px 16px;
  border: 0;
  box-shadow: 0 14px 34px rgba(7, 10, 29, .4), 0 0 24px var(--quiet-glow), inset 0 0 0 2px var(--quiet-accent);
}
.gameplay-lulu { left: var(--lulu-slot-left); bottom: var(--lulu-slot-bottom); width: var(--lulu-w); }
/* The lanterns the child protects: noise that outlasts a pause and wrong answers put one out. */
.lantern-lives {
  position: absolute;
  z-index: 5;
  top: calc(max(20px, env(safe-area-inset-top)) + 58px);
  right: max(24px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line-lantern);
  border-radius: var(--radius-pill);
  background: var(--surface-night);
  box-shadow: var(--shadow-float);
}
.lantern-life {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 209, 102, .8)) brightness(1.1);
  transition: opacity var(--motion-enter) var(--ease-out-play), filter var(--motion-enter) ease-out, transform var(--motion-enter) var(--ease-out-play);
}
.lantern-lives[data-remaining="2"] .lantern-life:nth-child(n + 3),
.lantern-lives[data-remaining="1"] .lantern-life:nth-child(n + 2),
.lantern-lives[data-remaining="0"] .lantern-life { opacity: .38; filter: grayscale(1) brightness(.75); transform: scale(.82); }
.puzzle-area { align-items: center; padding: 106px 28px 28px; }
.mission-board {
  width: min(70vw, 760px);
  max-height: calc(100dvh - 144px);
  gap: clamp(16px, 2.4dvh, 24px);
  padding: clamp(20px, 3vw, 30px);
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(16, 22, 47, .8);
  box-shadow: 0 26px 64px rgba(7, 10, 29, .46);
}
.mission-board-header h2 { font-size: clamp(22px, 2.6vw, 28px); }
.mission-board-progress { padding: 11px 16px; }
.memory-grid--moon-leaves { width: min(100%, 600px); }
.memory-leaf { filter: drop-shadow(0 16px 18px rgba(7, 10, 29, .38)); }
.memory-clue-character {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(37, 78, 63, .34));
  pointer-events: none;
}

.counting-mission .counting-items {
  max-width: 650px;
  gap: clamp(8px, 1.4vw, 16px);
}
.counting-mission .counting-item {
  width: clamp(66px, 9vw, 112px);
  height: clamp(66px, 9vw, 112px);
}
.counting-star-character { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 13px rgba(4, 14, 35, .42)); }
.counting-mission .counting-options { gap: 15px; }
.counting-mission .counting-option {
  min-width: 108px;
  min-height: var(--touch-child);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink-950);
  background: linear-gradient(180deg, var(--lantern-200), var(--lantern-400));
  box-shadow: inset 0 -5px 0 rgba(171, 111, 26, .23), 0 11px 22px rgba(3, 12, 31, .36);
  font-size: 34px;
  font-weight: 900;
}

.sorting-mission .sorting-area { gap: 12px; }
.sorting-mission .sorting-objects { gap: 9px; }
.sorting-mission .sorting-obj {
  width: 126px;
  height: 116px;
  padding: 4px;
  border: 0;
  background: transparent;
}
.sorting-mission .sorting-obj.selected {
  outline: 4px solid var(--gold);
  outline-offset: -4px;
}
.sorting-mission[data-sorting-rule='shape'] .sorting-obj { filter: drop-shadow(0 10px 10px rgba(1, 8, 25, .45)); }
.sorting-mission[data-sorting-rule='shape'] .sorting-obj .sorting-piece { width: 64px; height: 64px; }
.sorting-piece--square { border-radius: 22%; }
.sorting-mission:where([data-sorting-rule='shape']) .sorting-obj { width: 96px; height: 96px; }
.sorting-chest-shape { position: relative; display: inline-block; line-height: 0; }
.sorting-chest-shape .sorting-piece { position: absolute; left: 40%; top: 67%; width: 24%; height: 24%; translate: -50% -50%; background: var(--leaf-700); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.sorting-toy-character { width: 106px; max-height: 106px; object-fit: contain; filter: drop-shadow(0 11px 12px rgba(1, 8, 25, .5)); pointer-events: none; }
.sorting-mission .sorting-baskets { gap: 12px; }
.sorting-mission .sorting-basket {
  width: 158px;
  height: 166px;
  min-height: var(--touch-child);
  padding: 8px 10px 10px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-on-night);
  background: var(--surface-night);
  box-shadow: 0 11px 23px rgba(0, 0, 0, .3);
  font-size: 15px;
  font-weight: 900;
}
.sorting-mission .sorting-basket-icon { width: 100%; height: 120px; border-radius: var(--radius-sm); background: rgba(255, 240, 207, .86); overflow: hidden; }
.sorting-chest-card { width: 118px; height: 118px; object-fit: contain; mix-blend-mode: multiply; }
.sorting-chest-card--red { filter: hue-rotate(-35deg) saturate(1.5) brightness(1.15); }
.sorting-chest-card--blue { filter: hue-rotate(180deg) saturate(1.2) brightness(1.25); }
.sorting-chest-card--green { filter: hue-rotate(78deg) saturate(.76); }

.quiet-state-actors { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.quiet-state-actor {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.96);
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .4));
  transition: opacity var(--motion-enter) var(--ease-out-play), transform var(--motion-enter) var(--ease-out-play), visibility 0s linear var(--motion-enter);
}
.gameplay-scene[data-quiet-state='hidden'] :is(.quiet-hidden-cat, .quiet-hidden-lulu),
.gameplay-scene[data-quiet-state='recovery'] :is(.quiet-recovery-cat, .quiet-recovery-lulu) { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* The sleeping cat keeps one footprint: the round recovery cushion sits where the oval one was. */
.quiet-hidden-cat,
.quiet-recovery-cat { top: 18%; right: max(2%, env(safe-area-inset-right)); width: var(--cat-w); }
.quiet-recovery-cat { width: calc(var(--cat-w) * .78); right: calc(max(2%, env(safe-area-inset-right)) + var(--cat-w) * .11); }
/* Hiding and returning Lulu take her own corner instead of the board centre. */
.quiet-hidden-lulu { left: var(--lulu-slot-left); bottom: var(--lulu-slot-bottom); width: calc(var(--lulu-w) * 1.5); }
.quiet-recovery-lulu { left: var(--lulu-slot-left); bottom: var(--lulu-slot-bottom); width: calc(var(--lulu-w) * .92); }
.gameplay-scene[data-quiet-state='hidden'] .gameplay-lulu,
.gameplay-scene[data-quiet-state='recovery'] .gameplay-lulu { visibility: hidden; }

.play-dialog { background: rgba(4, 8, 22, .74); }
.play-dialog-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(310px, 1fr);
  align-items: center;
  gap: 24px;
  width: min(700px, calc(100% - 24px));
  max-height: calc(100dvh - 40px);
  min-height: 390px;
  padding: 30px 34px 30px 18px;
  border-radius: var(--radius-md);
  color: var(--moon-100);
  background: linear-gradient(145deg, var(--berry-800), var(--berry-950) 68%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 209, 102, .18);
}
.play-dialog-panel::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255, 209, 102, .28); border-radius: calc(var(--radius-md) - 10px); pointer-events: none; }
.play-menu-lulu { width: 100%; max-height: 330px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35)); }
.play-dialog-copy { position: relative; z-index: 1; }
.play-dialog-panel h2 { text-align: left; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.play-dialog-copy p { margin: 14px 0 22px; color: var(--text-muted-night); font-size: 17px; font-weight: 700; line-height: 1.55; word-break: keep-all; }

/* Guardian dialogs (E2 notice, E4 summary): the play-menu night surface, centred copy.
   Fixed so a scrolled result still sits fully behind it; tall content scrolls from the top. */
.guardian-dialog[hidden] { display: none; }
.guardian-dialog {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  justify-items: center;
  align-content: center;
  align-content: safe center;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(16, 22, 47, .45);
}
/* The notice dims and softens the intro art so only the promises read. */
.guardian-notice { background: rgba(16, 22, 47, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.guardian-panel {
  position: relative;
  width: min(660px, 100%);
  padding: 38px 48px 34px;
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--moon-100);
  background: linear-gradient(145deg, var(--berry-800), var(--berry-950) 68%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(255, 209, 102, .18);
  animation: guardian-enter var(--motion-enter) var(--ease-out-play) both;
}
.guardian-panel::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255, 209, 102, .28); border-radius: calc(var(--radius-md) - 10px); pointer-events: none; }
@keyframes guardian-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.guardian-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--lantern-400); font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; }
.guardian-label .ui-icon { width: 22px; height: 22px; }
.guardian-panel h2 { margin: 10px 0 0; color: var(--text-on-night); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; word-break: keep-all; filter: none; outline: none; }
.guardian-kid-line { margin: 0 0 18px; color: var(--moon-100); font-size: 24px; font-weight: 800; line-height: 1.3; word-break: keep-all; }
.guardian-promises { display: grid; gap: 16px; width: fit-content; max-width: 100%; margin: 26px auto 0; padding: 0; list-style: none; text-align: left; }
.guardian-promises li { display: flex; align-items: center; gap: 14px; color: var(--text-muted-night); font-size: 17px; font-weight: 700; line-height: 1.5; word-break: keep-all; }
.guardian-promises .ui-icon { flex: none; width: 40px; height: 40px; }
.guardian-time { margin: 10px 0 0; color: var(--text-muted-night); font-size: 17px; font-weight: 700; }
.guardian-time strong { color: var(--lantern-400); }
.guardian-decor { --decor-slot: 92px; display: flex; justify-content: center; gap: 14px; margin-top: 24px; }
.guardian-decor-slot { flex: none; display: block; width: var(--decor-slot); height: var(--decor-slot); padding: 8px; border-radius: var(--radius-md); background: rgba(255, 243, 207, .08); }
.guardian-decor-slot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.guardian-panel .btn { min-width: min(280px, 100%); margin-top: 30px; padding-inline: 36px; }

@media (max-width: 700px) and (orientation: portrait) {
  .guardian-panel { padding: 30px 22px 24px; }
  .guardian-kid-line { font-size: 21px; }
  .guardian-promises li { font-size: 16px; }
  .guardian-decor { --decor-slot: 56px; gap: 8px; }
  .guardian-decor-slot { padding: 5px; }
}
@media (orientation: landscape) and (max-height: 430px) {
  .guardian-panel { padding: 20px 28px 18px; }
  .guardian-kid-line { margin-bottom: 8px; font-size: 19px; }
  .guardian-panel h2 { font-size: 24px; }
  .guardian-promises { gap: 8px; margin-top: 14px; }
  .guardian-promises li { font-size: 15px; }
  .guardian-promises .ui-icon { width: 32px; height: 32px; }
  .guardian-decor { --decor-slot: 48px; gap: 8px; margin-top: 12px; }
  .guardian-decor-slot { padding: 4px; }
  .guardian-panel .btn { margin-top: 14px; }
}

/* Result: character, outcome, then the next choice */
.result-scene {
  --scene-tint: linear-gradient(90deg, rgba(16, 22, 47, .24), rgba(16, 22, 47, .2) 42%, rgba(16, 22, 47, .68));
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(390px, 1.2fr);
  grid-auto-rows: min-content;
  align-content: center;
  align-content: safe center;
  align-items: center;
  justify-items: start;
  gap: 8px clamp(32px, 6vw, 80px);
  padding: max(28px, env(safe-area-inset-top)) max(5vw, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(5vw, env(safe-area-inset-left));
  text-align: left;
  overflow-y: auto;
}
.result-success { --scene-art: url('./assets/moonlight/result-success-bg-landscape-v2.webp'); --scene-tint: linear-gradient(90deg, rgba(3, 8, 22, .08) 0 39%, rgba(3, 8, 22, .4) 55%, rgba(3, 8, 22, .82) 100%); }
.result-failure { --scene-art: url('./assets/moonlight/result-retry-bg-landscape-v1.webp'); --scene-tint: linear-gradient(90deg, rgba(3, 8, 22, .06) 0 42%, rgba(3, 8, 22, .48) 58%, rgba(3, 8, 22, .87) 100%); }
.result-episode-complete .result-world-change { background: radial-gradient(circle at 70% 36%, rgba(255, 209, 102, .24), transparent 46%), radial-gradient(circle at 30% 62%, rgba(255, 243, 207, .12), transparent 34%); }
.result-mascot { display: none; }
.result-msg,
.result-sub,
.explorer-journal,
.result-scene .reward-card,
.result-scene .save-note,
.result-actions { grid-column: 2; }
.result-msg,
.result-sub {
  width: min(100%, 620px);
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-align: left;
  text-shadow: 0 4px 20px rgba(7, 10, 29, .82);
}
.result-msg { margin: 0; font-size: clamp(38px, 5vw, 58px); line-height: 1.08; letter-spacing: -.035em; }
.result-sub { margin: 8px 0 20px; color: var(--moon-100); font-size: 18px; font-weight: 800; }
.explorer-journal { gap: 14px; margin: 0 0 12px; padding: 0; color: var(--ink-950); background: transparent; }
.journal-stamp { background: rgba(255, 243, 207, .95); box-shadow: 0 12px 28px rgba(7, 10, 29, .28); }
.result-scene .reward-card { margin: 0 0 12px; }
.reward-image { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(93, 48, 27, .24)); }
.save-note { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; width: min(100%, 440px); margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--line-lantern); border-radius: var(--radius-md); color: var(--moon-100); background: linear-gradient(145deg, var(--berry-800), var(--berry-950) 72%); box-shadow: var(--shadow-float); }
.save-note .ui-icon { width: 34px; height: 34px; color: var(--lantern-400); }
.save-note strong,
.save-note small { display: block; }
.save-note strong { font-size: 15px; line-height: 1.35; }
.save-note small { margin-top: 3px; color: var(--text-muted-night); font-size: 13px; font-weight: 700; line-height: 1.45; word-break: keep-all; }
.result-actions { width: min(100%, 620px); justify-content: flex-start; }
.result-actions .btn { flex: 1 1 0; max-width: 320px; min-height: var(--touch-child); }

@media (hover: hover) {
  .camp-map-prop:hover { transform: translateY(-5px); box-shadow: 0 28px 62px rgba(7, 10, 29, .46); }
  .play-menu-button:hover, .play-help-button:hover, .map-camp-control:hover, .journey-current-button:hover { background: rgba(37, 43, 85, .92); border-color: var(--moon-100); }
  .stage-node:not(:disabled):hover:not(:focus-visible) { filter: brightness(1.06); }
}

@media (orientation: portrait) {
  .intro-scene { --scene-art: var(--intro-tint), url('./assets/moonlight/intro-generated-portrait.webp'); }
  .calibration-screen { --scene-art: var(--calibration-tint), url('./assets/moonlight/calibration-generated-portrait.webp'); }
  .microphone-fallback-screen { --scene-art: var(--fallback-tint), url('./assets/moonlight/calibration-generated-portrait.webp'); }
  .camp-scene { --scene-art: var(--camp-tint), url('./assets/moonlight/camp-generated-portrait.webp'); }
  .map-scene { --scene-art: var(--map-tint), url('./assets/moonlight/map-generated-portrait.webp'); }
  .mission-briefing-scene { --scene-art: var(--briefing-tint), url('./assets/moonlight/briefing-generated-portrait.webp'); }
  .gameplay-scene[data-game-type='memory'] { --scene-art: var(--game-tint), url('./assets/moonlight/memory-game-bg-portrait-v1.webp'); }
  .gameplay-scene[data-game-type='counting'] { --scene-art: var(--game-tint), url('./assets/moonlight/counting-bg-portrait-v1.webp'); }
  .gameplay-scene[data-game-type='sorting'] { --scene-art: var(--game-tint), url('./assets/moonlight/sorting-bg-portrait-v1.webp'); }
  .result-success { --scene-art: url('./assets/moonlight/result-success-bg-portrait-v2.webp'); --scene-tint: linear-gradient(180deg, rgba(3, 8, 22, .08) 0 28%, rgba(3, 8, 22, .48) 43%, rgba(3, 8, 22, .88) 100%); }
  .result-failure { --scene-art: url('./assets/moonlight/result-retry-bg-portrait-v1.webp'); --scene-tint: linear-gradient(180deg, rgba(3, 8, 22, .06) 0 33%, rgba(3, 8, 22, .43) 48%, rgba(3, 8, 22, .9) 100%); }

  .camp-place { left: 50%; translate: -50% 0; }
  .camp-greeting { top: max(10%, calc(env(safe-area-inset-top) + 62px)); left: 50%; translate: -50% 0; width: min(86%, 600px); text-align: center; }
  .camp-lulu { left: 50%; bottom: 20%; translate: -50% 0; width: min(48vw, 380px); }
  .camp-map-prop { right: auto; left: 50%; bottom: max(4%, calc(env(safe-area-inset-bottom) + 16px)); translate: -50% 0; width: min(calc(100vw - 48px), 560px); }
  .camp-decor { scale: .75; }
  .camp-decor--firefly-planter { top: 18%; right: auto; bottom: auto; left: 0; }
  .camp-decor--moon-mobile { top: 26%; left: 0; }
  .camp-decor--golden-fish { top: 34%; left: 0; }
  .camp-decor--puffy-cloud { top: 42%; left: 0; }
  .camp-decor--owl-clock { top: 50%; left: 0; }
  .camp-decor--night-rainbow { top: 58%; bottom: auto; left: 0; }
  .camp-decor--glow-planter { top: 66%; bottom: auto; left: 0; }
  .camp-decor--night-moth { top: 18%; right: 0; left: auto; }
  .camp-decor--firefly-lamp { top: 26%; right: 0; left: auto; }
  .camp-decor--dreamcatcher { top: 34%; right: 0; bottom: auto; left: auto; }
  .camp-decor--small-crown { top: 42%; right: 0; bottom: auto; left: auto; }
  .camp-decor--feather-pillow { top: 50%; right: 0; bottom: auto; left: auto; }
  .camp-decor--star-bed { top: 58%; right: 0; bottom: auto; left: auto; }
  .camp-decor--moon-lantern { top: 66%; right: 0; }
  .camp-decor--yarn-basket { top: 58%; right: 8%; bottom: auto; }

  .microphone-fallback-copy { top: max(7%, env(safe-area-inset-top)); right: 8%; left: 8%; width: auto; translate: 0; text-align: center; }
  .fallback-ring { margin-inline: auto; }
  /* Portrait tablets match phones: the calibration column sits centred near the top. */
  .calibration-panel { top: max(7%, env(safe-area-inset-top)); right: 8%; left: 8%; width: auto; translate: 0; justify-items: center; text-align: center; }
  .calibration-ring { margin-inline: auto; }
  .calibration-text,
  .calibration-panel .voice-privacy-note { text-align: center; }
  .calibration-progress { margin-inline: auto; }
  /* Portrait intro keeps the title centred above Lulu, matching its centred start action. */
  .intro-scene { align-items: center; text-align: center; }
  .intro-copy { width: min(calc(100% - 36px), 560px); margin: max(5dvh, env(safe-area-inset-top)) auto 0; text-align: center; }
  .intro-copy p { width: auto; max-width: 420px; margin-inline: auto; }
  .calibration-panel h1,
  .microphone-fallback-copy h1 { font-size: clamp(30px, 8.7vw, 40px); }
  .microphone-fallback-copy p { margin-top: 12px; font-size: clamp(14px, 4vw, 18px); }

  .map-heading { left: 50%; translate: -50% 0; width: calc(90vw - 168px); text-align: center; }
  .mission-briefing-panel { top: auto; right: 50%; bottom: max(8%, calc(env(safe-area-inset-bottom) + 24px)); translate: 50% 0; width: min(86vw, 600px); text-align: center; }
  .mission-briefing-body { margin-inline: auto; }
  .mission-briefing-actions { justify-content: center; }
  .map-heading h1 { font-size: clamp(32px, 7vw, 48px); }
  .stage-node.story-stage { width: 76px; height: 76px; }
  .stage-node.story-stage.is-focus { width: 92px; height: 92px; }
  .map-lulu { width: min(23vw, 180px); }

  .gameplay-scene { --lulu-w: min(24vw, 130px); --lulu-slot-left: calc(50% - var(--lulu-w) / 2); --lulu-slot-bottom: max(10px, env(safe-area-inset-bottom)); --cat-w: min(44vw, 240px); }
  .quiet-hidden-lulu { translate: calc(var(--lulu-w) * -.25) 0; }
  /* Portrait boards are narrow but tall: size memory tiles from the width. */
  .memory-grid:not(.memory-grid--moon-leaves) { --memory-tile: clamp(72px, 12vw, 104px); }
  .puzzle-area { padding-inline: clamp(18px, 5vw, 40px); }
  .mission-board { width: min(100%, 680px); margin-left: 0; }
  .quiet-hidden-cat,
  .quiet-recovery-cat { top: 17%; }

  /* Portrait art keeps the characters up top; the copy rests on the dark lower band. */
  .result-scene { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; align-content: end; align-content: safe end; text-align: center; }
  .result-mascot { grid-column: 1; grid-row: auto; align-self: center; width: min(31vw, 240px); }
  .result-msg,
  .result-sub,
  .explorer-journal,
  .result-scene .reward-card,
  .result-scene .save-note,
  .result-actions { grid-column: 1; }
  .result-msg,
  .result-sub { text-align: center; }
  .save-note { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; width: min(330px, 100%); margin: 0 auto 10px; padding: 10px 11px; text-align: left; }
  .save-note .ui-icon { width: 30px; height: 30px; }
  .reward-image { width: 72px; height: 72px; }
  .result-actions { justify-content: center; }
}

@media (max-width: 700px) {
  .calibration-panel { inset: 7% 8% auto; width: auto; translate: 0; justify-items: center; text-align: center; }
  .calibration-ring { width: 60px; height: 60px; margin: 0 auto 16px; }
  .calibration-ring .ui-icon { width: 32px; height: 32px; }
  .calibration-panel h1 { font-size: clamp(30px, 8.7vw, 40px); }
  .calibration-text { margin-top: 10px; font-size: 17px; text-align: center; }
  .calibration-progress { margin-inline: auto; }
  .calibration-panel .voice-privacy-note { margin-top: 14px; text-align: center; }
  .calibration-skip { margin-top: 24px; }

  .intro-scene { align-items: center; text-align: center; }
  .intro-copy { width: calc(100% - 36px); margin: max(5dvh, env(safe-area-inset-top)) auto 0; text-align: center; }
  .intro-copy h1 { font-size: clamp(48px, 15vw, 62px); }
  .intro-copy p { width: min(100%, 300px); margin: 12px auto 0; font-size: 18px; }
  .intro-lulu { left: 50%; bottom: 14%; width: min(66vw, 270px); translate: -50% 0; }
  .intro-start { right: 50%; bottom: max(3dvh, calc(env(safe-area-inset-bottom) + 12px)); translate: 50% 0; min-height: var(--touch-child); }

  .camp-place { top: max(3%, calc(env(safe-area-inset-top) + 12px)); font-size: 13px; }
  .camp-greeting { top: max(9%, calc(env(safe-area-inset-top) + 54px)); width: calc(100% - 32px); }
  .camp-greeting h1 { font-size: clamp(28px, 8.5vw, 34px); line-height: 1.2; word-break: keep-all; text-wrap: balance; }
  .camp-lulu { bottom: 22%; width: min(62vw, 250px); }
  .camp-map-prop { right: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-left)); bottom: max(2%, calc(env(safe-area-inset-bottom) + 10px)); width: auto; min-height: 126px; grid-template-columns: 58px 1fr; gap: 14px; padding: 18px; translate: 0 0; }
  .camp-map-icon { width: 54px; height: 54px; }
  .camp-mission-copy strong { font-size: 22px; }
  .camp-mission-action { margin-top: 5px; padding-top: 7px; font-size: 14px; }

  .map-heading { top: max(16px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; width: calc(100vw - 188px); text-align: center; }
  .map-heading p { font-size: 12px; }
  .map-heading h1 { font-size: clamp(27px, 8vw, 34px); }
  .map-camp-control { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
  .focused-story-map.map-scroll { padding-top: 118px; }
  .map-load-notice + .focused-story-map.map-scroll { padding-top: 190px; }
  .stage-node.story-stage { width: 72px; height: 72px; }
  .stage-node.story-stage.is-focus { width: 86px; height: 86px; }
  .stage-node-title { max-width: 164px; padding: 7px 10px 8px; }
  .stage-node-title strong { font-size: 15px; }
  .map-lulu { left: max(-18px, env(safe-area-inset-left)); bottom: max(-1%, env(safe-area-inset-bottom)); width: min(30vw, 126px); }

  .mission-briefing-panel { inset: auto 7% max(5%, env(safe-area-inset-bottom)); translate: 0; width: auto; max-height: none; padding: 0; overflow: visible; text-align: center; }
  .mission-briefing-copy h1 { font-size: clamp(36px, 11vw, 48px); }
  .mission-briefing-body { margin: 10px auto 0; font-size: 17px; }
  .mission-briefing-actions { justify-content: center; flex-direction: column; }
  .mission-briefing-actions .btn { min-height: var(--touch-child); }

  .gameplay-header { top: max(16px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); width: calc(100% - 28px); }
  .gameplay-mission-id { width: calc(100vw - 164px); }
  .stage-label { max-width: none; font-size: clamp(18px, 5.5vw, 22px); white-space: normal; }
  .play-menu-button { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); min-width: var(--touch-child); min-height: var(--touch-child); }
  .play-help-button { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); min-width: var(--touch-child); min-height: var(--touch-child); }
  .quiet-status { top: max(88px, calc(env(safe-area-inset-top) + 72px)); right: max(12px, env(safe-area-inset-right)); min-height: 44px; padding: 8px 12px; font-size: 13px; }
  .quiet-status-copy small { font-size: 12px; }
  .lantern-lives { top: calc(max(88px, calc(env(safe-area-inset-top) + 72px)) + 52px); right: max(12px, env(safe-area-inset-right)); padding: 4px 10px; }
  .lantern-life { width: 26px; height: 26px; }
  .gameplay-vitals { top: 138px; right: max(12px, env(safe-area-inset-right)); }
  .mission-timer { font-size: 15px; }
  .puzzle-area { padding: 166px 14px 78px; }
  .mission-board { width: 100%; max-height: calc(100dvh - 254px); margin: 0; padding: 16px; border-radius: var(--radius-md); }
  .memory-mission { gap: 10px; padding: 12px; }
  .mission-board-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; }
  .mission-board-header span { display: contents; }
  .mission-board-header small { grid-column: 1; grid-row: 1; margin: 0; }
  .mission-board-header h2 { grid-column: 1 / -1; grid-row: 2; font-size: clamp(20px, 6vw, 24px); }
  .mission-board-progress { grid-column: 2; grid-row: 1; min-width: auto; padding: 8px 10px; font-size: 13px; }
  .memory-grid--moon-leaves { width: min(100%, 280px); grid-template-columns: repeat(3, minmax(72px, 1fr)); gap: 8px; justify-items: center; }
  .memory-leaf { width: 100%; max-height: none; }
  .gameplay-scene { --lulu-w: min(24vw, 96px); }
  .counting-mission .counting-area { gap: 16px; }
  .counting-mission .counting-items { max-width: 310px; gap: 4px 18px; }
  .counting-mission .counting-item { width: 74px; height: 74px; }
  .counting-mission .counting-options { gap: 10px; }
  .counting-mission .counting-option { min-width: 84px; min-height: var(--touch-child); font-size: 31px; }
  .sorting-mission .sorting-objects { gap: 2px 12px; }
  .sorting-mission .sorting-obj { width: 92px; height: 84px; padding: 2px; }
  .sorting-toy-character { width: 78px; max-height: 78px; }
  .sorting-mission .sorting-baskets { gap: 7px; }
  .sorting-mission .sorting-basket { width: 96px; height: 128px; padding: 5px 6px 8px; font-size: 12px; }
  .sorting-mission .sorting-basket-icon { height: 84px; }
  .sorting-chest-card { width: 86px; height: 86px; }
  .play-dialog { padding: 14px; }
  .play-dialog-panel { grid-template-columns: 1fr; justify-items: center; gap: 2px; width: min(342px, 100%); min-height: 490px; padding: 22px 20px 20px; text-align: center; }
  .play-menu-lulu { width: 165px; height: 172px; margin-top: -4px; }
  .play-dialog-panel h2 { text-align: center; font-size: 34px; }
  .play-dialog-copy { width: 100%; }
  .play-dialog-copy p { max-width: 270px; margin: 10px auto 18px; font-size: 15px; }
  .play-dialog-panel .btn { min-height: var(--touch-child); font-size: 17px; }

  .result-scene { padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); }
  .result-mascot { width: min(42vw, 176px); }
  .result-msg { font-size: clamp(30px, 9vw, 40px); }
  .result-sub { margin-bottom: 12px; font-size: 16px; }
  .explorer-journal { gap: 8px; }
  .journal-stamp { width: 62px; min-width: 62px; height: 62px; min-height: 62px; }
  .journal-stamp small { max-width: 44px; font-size: 12px; line-height: 1.05; text-align: center; transform: translateY(-2px); }
  .result-actions { gap: 10px; }
  .result-actions .btn { flex-basis: 100%; width: 100%; max-width: none; min-width: var(--touch-child); min-height: var(--touch-child); }
}

@media (orientation: landscape) and (max-height: 700px) {
  .intro-copy { margin-top: max(4dvh, env(safe-area-inset-top)); }
  .intro-copy h1 { font-size: clamp(50px, 8vw, 72px); }
  .intro-lulu { width: min(32vw, 280px); }
  .intro-start { right: max(5vw, env(safe-area-inset-right)); bottom: max(6dvh, env(safe-area-inset-bottom)); }

  .camp-place { top: max(3%, env(safe-area-inset-top)); }
  .camp-greeting { top: max(10%, calc(env(safe-area-inset-top) + 32px)); }
  .camp-greeting h1 { font-size: clamp(34px, 5.5vw, 48px); }
  .camp-lulu { bottom: -12%; width: min(30vw, 260px); }
  .camp-map-prop { right: 5%; bottom: 5%; width: auto; min-height: 126px; }

  .map-heading { top: max(3%, env(safe-area-inset-top)); }
  .map-heading h1 { font-size: clamp(32px, 5vw, 46px); }
  .focused-story-map.map-scroll { padding-top: 110px; }
  .stage-node.story-stage { width: 72px; height: 72px; }
  .stage-node.story-stage.is-focus { width: 86px; height: 86px; }
  .map-lulu { width: min(18vw, 170px); }

  .mission-briefing-copy h1 { font-size: clamp(34px, 5vw, 48px); }
  .mission-briefing-body { margin-top: 6px; font-size: 17px; }
  .mission-briefing-actions .btn { min-height: var(--touch-child); }

  .puzzle-area { padding-top: 92px; padding-bottom: 14px; }
  .mission-board { max-height: calc(100dvh - 106px); gap: 12px; padding: 14px 18px; }
  .memory-grid--moon-leaves { width: min(100%, 293px); gap: 10px; }
  .play-menu-button { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .counting-mission .counting-item { width: clamp(50px, 7vw, 88px); height: clamp(50px, 7vw, 88px); }
  .sorting-mission .sorting-obj { width: 100px; height: 82px; }
  .sorting-toy-character { width: 78px; max-height: 78px; }
  .sorting-mission .sorting-basket { width: 126px; height: 120px; }
  .sorting-mission .sorting-basket-icon { height: 76px; }
  .sorting-chest-card { width: 76px; height: 76px; }
  .play-dialog-panel { min-height: min(390px, calc(100dvh - 28px)); padding-block: 18px; }

  .result-scene { gap: 5px 36px; padding-block: 16px; }
  .result-mascot { width: min(28vw, 270px); }
  .result-msg { font-size: clamp(32px, 4.5vw, 46px); }
  .result-sub { margin-bottom: 10px; }
  .journal-stamp { min-width: 58px; min-height: 58px; }
  .result-actions .btn { min-height: var(--touch-child); }
}

@media (orientation: landscape) and (max-width: 700px) {
  /* Phones on their side: keep the opening screens in a left column beside Lulu
     instead of the portrait centring, which put the copy over the art. */
  .intro-scene { align-items: flex-start; text-align: left; }
  .intro-copy { width: min(54vw, 360px); margin: 0 0 0 max(3vw, env(safe-area-inset-left)); text-align: left; }
  .intro-copy h1 { font-size: clamp(38px, 8vw, 52px); }
  .intro-copy p { width: auto; margin: 8px 0 0; font-size: 16px; }
  .intro-actions { width: min(54vw, 360px); margin: 16px 0 0 max(3vw, env(safe-area-inset-left)); }
  .intro-actions .intro-start { min-width: min(100%, 280px); min-height: var(--touch-child); font-size: 19px; }
  .intro-privacy-note { font-size: 12px; }
  .calibration-panel,
  .microphone-fallback-copy { inset: auto; top: max(12px, env(safe-area-inset-top), calc(50% - 124px)); left: calc(var(--screen-pad-x) + max(3vw, env(safe-area-inset-left))); width: min(56%, 380px); translate: 0; justify-items: start; text-align: left; }
  .microphone-fallback-copy h1 { font-size: 26px; }
  .microphone-fallback-copy p { margin-top: 8px; font-size: 16px; }
  .calibration-ring { width: 52px; height: 52px; margin: 0 0 12px; }
  .calibration-ring .ui-icon { width: 28px; height: 28px; }
  .calibration-panel h1 { font-size: 26px; }
  .calibration-text { margin-top: 6px; font-size: 15px; text-align: left; }
  .calibration-progress { margin-inline: 0; }
  .calibration-panel .voice-privacy-note { margin-top: 8px; font-size: 12px; text-align: left; }
  .calibration-skip { margin-top: 14px; font-size: 16px; }
  .camp-greeting { left: 51%; right: 5%; width: auto; }
  .camp-greeting h1 { font-size: clamp(24px, 4.5vw, 32px); }
  .camp-map-prop { left: 51%; right: 5%; width: auto; z-index: 4; }
  .play-dialog-panel { grid-template-columns: 132px minmax(0, 1fr); justify-items: stretch; gap: 16px; width: min(560px, 100%); min-height: 0; padding: 22px 20px 16px 12px; text-align: left; }
  .play-menu-lulu { width: 132px; height: auto; margin: 0; }
  .play-dialog-panel h2 { text-align: left; font-size: 28px; }
  .play-dialog-copy p { max-width: none; margin: 6px 0 10px; }
  .mission-briefing-panel { inset: auto; top: 50%; right: max(5%, env(safe-area-inset-right)); width: min(52%, 330px); translate: 0 -50%; text-align: left; }
  .mission-briefing-copy h1 { font-size: 26px; }
  .mission-briefing-body { margin: 6px 0 0; font-size: 15px; }
  .mission-briefing-actions { margin-top: 14px; gap: 8px; }
}

@media (orientation: landscape) and (max-height: 340px) and (max-width: 700px) {
  .gameplay-mission-id { width: auto; max-width: 330px; }
  .quiet-status { top: 12px; right: 12px; }
  .quiet-status-copy small { display: none; }
  .memory-mission { width: min(100%, 310px); gap: 6px; padding: 8px; }
  .memory-mission .mission-board-header { display: flex; align-items: center; gap: 6px; }
  .memory-mission .mission-board-header small { display: none; }
  .memory-mission .mission-board-header h2 { font-size: 16px; line-height: 1.2; }
  .memory-mission .mission-board-progress { padding: 6px 8px; font-size: 12px; }
  .memory-grid--moon-leaves { width: 232px; grid-template-columns: repeat(3, 72px); gap: 8px; }
  .memory-leaf { width: 72px; height: 72px; }
}

@media (orientation: landscape) and (max-width: 820px) {
  .result-scene { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .result-msg, .result-sub, .explorer-journal, .result-scene .reward-card, .result-scene .save-note, .result-actions { grid-column: 1; }
  .result-msg, .result-sub { text-align: center; }
  .result-actions { justify-content: center; }
}

@media (orientation: landscape) and (max-height: 430px) {
  .result-scene { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; row-gap: 0; padding: 16px 24px; }
  .result-msg, .result-sub, .explorer-journal, .result-scene .reward-card, .result-scene .save-note, .result-actions { grid-column: 1; }
  .result-msg, .result-sub { text-align: center; }
  .result-actions { justify-content: center; flex-wrap: wrap; }
  .result-actions .btn { width: auto; flex: 1 1 190px; }
  .gameplay-header { top: max(6px, env(safe-area-inset-top)); left: max(88px, env(safe-area-inset-left)); width: auto; }
  .gameplay-mission-id { width: auto; max-width: min(40vw, 330px); }
  .gameplay-mission-id small { display: none; }
  .stage-label { max-width: none; font-size: 18px; white-space: normal; }
  .quiet-status { top: max(6px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); min-height: 48px; padding: 7px 11px; }
  .quiet-status-copy small { display: none; }
  .lantern-lives { top: calc(max(6px, env(safe-area-inset-top)) + 54px); right: max(8px, env(safe-area-inset-right)); gap: 4px; padding: 3px 8px; }
  .lantern-life { width: 20px; height: 20px; }
  .gameplay-lulu,
  :is(.quiet-hidden-lulu, .quiet-recovery-lulu) { display: none; }
  .play-menu-button { top: max(6px, env(safe-area-inset-top)); right: auto; bottom: auto; left: max(6px, env(safe-area-inset-left)); min-width: var(--touch-child); min-height: var(--touch-child); }
  .play-help-button { right: auto; bottom: max(6px, env(safe-area-inset-bottom)); left: max(6px, env(safe-area-inset-left)); min-width: var(--touch-child); min-height: var(--touch-child); }
  .play-menu-button, .play-help-button { width: var(--touch-child); padding: 6px; flex-direction: column; gap: 4px; font-size: 12px; }
  .puzzle-area { padding: 78px 8px 8px 94px; }
  .mission-board { width: 100%; max-width: none; max-height: calc(100dvh - 86px); margin-left: 0; gap: 6px; padding: 8px 10px; overflow-y: auto; }
  .mission-board-header { display: flex; align-items: center; gap: 8px; }
  .mission-board-header span { display: block; }
  .mission-board-header small { display: none; }
  .mission-board-header h2 { font-size: 16px; line-height: 1.2; }
  .mission-board-progress { min-width: auto; padding: 6px 8px; font-size: 12px; }
  .memory-mission .memory-grid:not(.memory-grid--moon-leaves) { --memory-tile: 72px; --memory-gap: 6px; width: min(100%, 540px); max-width: none; gap: 6px; }
  .memory-mission .memory-card { min-width: var(--touch-child); min-height: var(--touch-child); }
  .sorting-mission .sorting-area { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sorting-mission .sorting-objects { display: flex; flex-wrap: wrap; gap: 8px; }
  .sorting-mission .sorting-obj { width: 72px; min-width: var(--touch-child); height: 72px; min-height: var(--touch-child); padding: 2px; }
  .sorting-toy-character { width: 68px; max-height: 68px; }
  .sorting-mission .sorting-baskets { gap: 4px; }
  .sorting-mission .sorting-basket { width: 78px; min-width: var(--touch-child); height: 96px; min-height: var(--touch-child); padding: 4px; }
  .sorting-mission .sorting-basket-icon { height: 64px; }
  .sorting-chest-card { width: 62px; height: 62px; }
}

/* Shown in the empty puzzle area while the mission microphone check runs. */
.microphone-check-note {
  margin: auto;
  max-width: min(90%, 420px);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  background: rgba(16, 22, 47, .78);
  color: var(--moon-100);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}

/* Revealed by boot_guard.js when the game cannot start in this browser. */
.boot-unsupported {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  background: var(--berry-950);
  color: var(--moon-100);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
.boot-unsupported[hidden] { display: none; }