/* ─────────────────────────────────────────────────────────────
   Mirror maze — styles
   Fonts + design tokens (baked in from ../design-system/tokens/*)
   + all UI chrome. The p5 canvas itself is unstyled beyond sizing;
   everything drawn on it is handled in game.js.
   ───────────────────────────────────────────────────────────── */

/* ── Fonts (shipped inside the folder — no network) ── */
@font-face {
  font-family: 'GT Walsheim';
  src: url('assets/fonts/GT-Walsheim-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('assets/fonts/GT-Walsheim-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('assets/fonts/GT-Walsheim-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Walsheim';
  src: url('assets/fonts/GT-Walsheim-Ultra-Bold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand / logo colours ── */
  --brand-blue:   #38C3E4;
  --brand-orange: #FF8A20;
  --brand-pink:   #FC74B4;
  --brand-yellow: #FFD401;
  --brand-red:    #E83459;
  --brand-green:  #45BA90;

  /* ── Purple ramp ── */
  --purple-900: #300028;
  --purple-800: #401E50;
  --purple-700: #4B235D;
  --purple-600: #5D2E73;
  --purple-500: #7A4A92;
  --purple-300: #B79CC8;
  --purple-100: #EDE4F2;
  --purple-50:  #F6F1F9;

  /* ── Ink ramp ── */
  --ink-900: #1C1726;
  --ink-700: #3A3447;
  --ink-600: #5D5670;
  --ink-400: #938DA3;
  --ink-200: #E8E4EE;
  --ink-100: #F2EFF6;
  --white:   #FFFFFF;

  /* ── Dark plum theme (matches examples.fruit3d.com/exploding-dots) ── */
  --plum:       #2B0326;  /* page background + header/footer bars */
  --card:       #3a0a33;  /* pop-up cards / dark panels */
  --card-inset: #4a133f;  /* nested surfaces (tray cards, speech, quiz tiles) */
  --line-dark:  #5a1a4f;  /* plum hairline borders */
  --nav:        #A1FCD2;  /* navigation / primary buttons (mint / "lime") */
  --nav-dark:   #6fcea3;  /* mint button shadow / hover */

  /* ── Surfaces / text (light copy on the dark plum ground) ── */
  --surface-cream:  var(--card);
  --border-cream:   var(--line-dark);
  --text-strong:    #FFFFFF;
  --text-body:      #FFFFFF;
  --text-soft:      rgba(248, 244, 241, .68);
  --text-faint:     rgba(248, 244, 241, .5);

  /* ── Game-world palette (deep aubergine, never pure black) ── */
  --mm-room-1:      #3B1546;   /* room fill, lighter mid */
  --mm-room-2:      #260921;   /* room fill, dark edge (vignette) */
  --mm-wall-fill:   #55296A;
  --mm-wall-edge:   #7E52A0;
  --mm-mirror-cold: #1E5C77;   /* matte, not currently hit */
  --mm-mirror-hot:  #38C3E4;   /* gleaming, currently hit */
  --mm-handle:      #FF8A20;
  --mm-beam:        #FFD401;
  --mm-star:        #FFD401;
  --mm-spark-a:     #FFD401;
  --mm-spark-b:     #FC74B4;

  /* ── Type ──
     Raleway powers the Fruit3D chrome (loaded via Google Fonts, matching the
     exploding-dots reference); the shipped GT Walsheim / Inter faces stay as
     offline fallbacks. */
  --font-brand: 'Raleway', 'GT Walsheim', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:  'Raleway', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-chrome:'Raleway', 'GT Walsheim', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-ultrabold:800;
  --tracking-tight: -0.02em;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-md:  18px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 36px;

  /* ── Spacing / radius / shadow / motion ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
  --shadow-card: 0 12px 28px rgba(28,10,36,0.35), 0 2px 6px rgba(28,10,36,0.20);
  --shadow-soft: 0 4px 12px rgba(28,10,36,0.22);
  --ease-pop: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --ring: color-mix(in srgb, var(--purple-700) 55%, transparent);

  --mm-header-h: 56px;
}

/* ── Reset & base ── */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--plum);
  font-family: var(--font-sans);
  color: var(--text-body);
  -webkit-tap-highlight-color: transparent;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
p { margin: 0; }
h1, h2, h3 { margin: 0; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Author `display:flex/grid` rules below have the same specificity as
   the UA [hidden]{display:none} rule and (being author-origin) would
   otherwise win the cascade. Force hidden elements to actually hide. */
[hidden] { display: none !important; }

/* ── App shell ── */
.mm-app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════
   Fruit3D site chrome — header & footer that bound the stage.
   Cloned from the reference example (examples.fruit3d.com/exploding-dots):
   the Fruit3D wordmark + an activity pill in the header; copyright, a
   "Created by" credit and a "Made with" wordmark in the footer. Raleway
   throughout, on the Fruit3D plum (#2b0326) bar.
   ═══════════════════════════════════════════════════════════════════ */
.site-header,
.site-footer {
  flex: none;
  background: var(--plum);
  z-index: 10;
  font-family: var(--font-chrome);
}
.site-header { border-bottom: 1px solid var(--line-dark); }
.site-footer { border-top: 1px solid var(--line-dark); }
.site-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 22px;
}
/* Header bar: fixed 60px, centred. */
.site-header .site-bar {
  height: 60px;
  padding: 0 20px;
  gap: 16px;
}
.site-logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  transition: opacity .15s ease;
}
.site-logo-link:hover { opacity: .85; }
.site-logo { height: 30px; width: auto; display: block; }
.site-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.site-title h1 {
  margin: 0;
  font-family: var(--font-chrome);
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: #fff;
}
.fruit3d-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border-radius: 11px;
  background: var(--card-inset);
  border: 1px solid var(--line-dark);
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #f8f4f1;
  text-decoration: none;
  transition: opacity .16s;
}
.fruit3d-pill:hover { opacity: .9; }
.fruit3d-pill .pill-logo { display: block; height: 16px; width: auto; }
/* Sign Up CTA — solid pink, same height as the Interactive Activity pill. */
.signup-btn {
  display: inline-flex; align-items: center;
  border: 1px solid transparent; border-radius: 11px;
  background: #EB7CB2; color: #fff;
  padding: 6px 16px;
  font-family: var(--font-chrome);
  font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 16px;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: filter .16s;
}
.signup-btn:hover { filter: brightness(1.06); }

.site-footer .copyright,
.site-footer .made-with {
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #f8f4f1;
}
.site-footer .copyright { margin-right: auto; }
.site-footer .site-bar { position: relative; }
.site-footer .created-by {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #f8f4f1;
}
.site-footer .created-by svg { display: block; flex: none; }
.site-footer .wordmark-link { display: inline-flex; align-items: center; transition: opacity .16s; }
.site-footer .wordmark-link:hover { opacity: .8; }
.site-footer .wordmark { height: 22px; width: auto; }

@media (max-width: 560px) {
  .fruit3d-pill { font-size: 0; gap: 0; padding: 7px; }
  .fruit3d-pill .pill-logo { height: 17px; }
  .site-footer .made-with,
  .site-footer .created-by { display: none; }
}
@media (max-width: 640px) {
  .site-header .site-bar { height: auto; flex-wrap: wrap; padding: 10px 12px; gap: 10px 12px; }
  .site-logo-link { order: 1; }
  .fruit3d-pill { order: 2; }
  .signup-btn { order: 3; }
  .site-title { order: 4; flex-basis: 100%; }
  .site-title h1 { font-size: 17px; }
}

/* ── Stage wrap (fills remaining viewport, centres the canvas) ── */
.mm-stage-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  overflow: hidden;
}

.mm-canvas-wrap {
  position: relative;
  overflow: hidden;
  touch-action: none;
}
.mm-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}
#p5host {
  position: absolute;
  inset: 0;
}
/* Level 3 renders three.js into its own canvas layered over the p5 host. */
.mm-three-host {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.mm-three-host[hidden] { display: none; }

/* Level 3 click-cursor hint — sits on the light source (its tip at 0,0 = the
   element's left/top) and is nudged around by JS until the child drags. */
.mm-l3-cursor {
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  z-index: 12;
  pointer-events: none;
  will-change: left, top;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
.mm-l3-cursor[hidden] { display: none; }
.mm-three-host canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}

/* Level 3 recolours the play area (not the header/footer) to a single
   flat backdrop so the dark 80%-black shadows read, with no nested card. */
body.mm-level3 .mm-stage-wrap { background: #B14884; }
body.mm-level3 .mm-canvas-wrap { box-shadow: none; border-radius: 0; background: #B14884; }

/* ── Per-level % complete HUD (level label + number + bar) ── */
.mm-hud-group {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.mm-hud-group[hidden] { display: none; }
.mm-hud {
  background: var(--card);
  border: 2px solid var(--nav);
  border-radius: 16px;
  padding: 10px 16px 12px;
  min-width: 168px;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-brand);
  text-align: center;
}
.mm-hud-controls { display: flex; gap: 8px; }
.mm-hud-btn {
  flex: 1 1 0;
  font-family: var(--font-brand);
  font-weight: var(--fw-ultrabold);
  font-size: 14px;
  color: var(--nav);
  background: transparent;
  border: 2px solid var(--nav);
  border-radius: 13px;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, transform .1s;
  touch-action: manipulation;
}
.mm-hud-btn:hover { background: var(--nav); color: var(--plum); }
.mm-hud-btn:active { transform: translateY(1px) scale(.98); }
.mm-hud[hidden] { display: none; }
.mm-hud-level {
  font-size: 20px;
  font-weight: var(--fw-ultrabold);
  color: var(--nav);
  line-height: 1.04;
  letter-spacing: .01em;
  margin-bottom: 4px;
}
.mm-hud-pct {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--nav);
  opacity: .9;
  margin-bottom: 8px;
}
.mm-hud-track {
  height: 12px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: rgba(161, 252, 210, .22);
}
.mm-hud-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background: var(--nav);
  transition: width .45s var(--ease-pop);
}

/* ── Opening-card level picker ── */
/* Level picker — copied from the exploding-dots template: all three levels
   sit in one centred, wrapping row. Level 1 is the filled mint button; Levels
   2 & 3 are mint-outline buttons, sized to match, so the eye goes to Level 1. */
.mm-level-picker {
  margin-top: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.mm-title-card .mm-level-picker .mm-btn { margin-top: 0; width: auto; }
/* .mm-btn (defined later) would otherwise win the min-height/padding/font at
   equal specificity, so qualify with .mm-btn to match the exploding-dots size. */
.mm-btn.mm-level-btn {
  flex: 0 0 auto;
  display: block;               /* match the exploding-dots button's block box */
  text-align: center;
  min-width: 0;
  min-height: 0;
  padding: 11px 30px;
  font-size: clamp(15px, 2.4vh, 18px);
  font-weight: var(--fw-ultrabold);
  line-height: 1.17;   /* match the exploding-dots button box height exactly */
  white-space: nowrap;
}
/* Level 1 — filled mint, flat (no 3D lift) so all three sit flush in the row. */
.mm-level-btn.mm-btn--primary {
  border: 2px solid var(--nav);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .3);
}
.mm-level-btn.mm-btn--primary:active { transform: translateY(2px) scale(.98); box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
/* Levels 2 & 3 — mint outline only. */
.mm-level-btn.mm-btn--outline {
  background: transparent;
  color: #A1FCD2;
  border: 2px solid #A1FCD2;
  box-shadow: none;
}
.mm-btn--outline:hover { background: #A1FCD2; color: var(--plum); }
.mm-btn--outline:active { transform: translateY(2px) scale(.98); }

/* ── Mascot dock ── */
.mm-mascot-dock {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;      /* lemon + speech centred, like the kiwi's mascot-row */
  justify-content: center;
  gap: 12px;
  z-index: 10;
  pointer-events: none;
}
/* The lemon (3D model-viewer). The wrapper sways side to side (kiwi-style
   idle); the inner model does the one-shot bounce/tilt so they combine. */
.mm-mascot {
  width: clamp(64px, 10vh, 94px);
  height: clamp(64px, 10vh, 94px);
  flex: 0 0 auto;
  animation: mm-lemon-sway 3s ease-in-out infinite;
}
.mm-mascot-model {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  /* Boost saturation so the lemon reads as vivid yellow, not washed out. */
  filter: saturate(1.5) contrast(1.04);
}
@keyframes mm-lemon-sway {
  0%, 100% { transform: translateX(-5px) rotate(-4deg); }
  50%      { transform: translateX(5px) rotate(4deg); }
}
.mm-mascot-model.mm-bounce { animation: mm-bounce 620ms var(--ease-pop); }
.mm-mascot-model.mm-tilt { animation: mm-tilt 560ms var(--ease-pop); }
@keyframes mm-bounce {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-16px) scale(1.06); }
  60% { transform: translateY(2px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes mm-tilt {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}

/* Mascot speech — yellow bubble, tail pointing left toward the lemon
   (same size as the exploding-dots kiwi's speech). */
.mm-speech-bubble {
  position: relative;
  /* Fixed width (like the kiwi's) so the bubble never resizes per message and
     the lemon stays put — longer lines wrap instead of widening the bubble. */
  width: min(72vw, 420px);
  background: #F9DC4D;
  border: 2px solid #F9DC4D;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 8px 16px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--dur-base) var(--ease-pop), transform var(--dur-base) var(--ease-pop);
}
.mm-speech-bubble.is-visible { opacity: 1; transform: scale(1); }
.mm-speech-bubble p {
  margin: 0;
  font-size: clamp(15px, 2.1vh, 18px);
  line-height: 1.4;
  color: #2B0326;
  font-weight: var(--fw-semibold);
  text-align: center;   /* centred, like the kiwi's play-screen bubble */
}
.mm-speech-bubble::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #F9DC4D;
  border-left: 2px solid #F9DC4D;
  border-bottom: 2px solid #F9DC4D;
}

/* ── Level 1 light controls: lamp power bar + torch beam buttons ── */
.mm-power,
.mm-beams {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3%;
  z-index: 10;
  background: var(--surface-cream);
  border: 2px solid var(--border-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 10px 14px;
  text-align: center;
}
.mm-power[hidden],
.mm-beams[hidden] { display: none; }
.mm-power-label {
  display: block;
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  color: var(--text-strong);
  margin-bottom: 8px;
}
.mm-power-row { display: flex; align-items: center; gap: 10px; }
.mm-power-btn {
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid #F9DC4D;
  background: transparent;
  color: #F9DC4D;   /* yellow "−/+" and ring, no fill */
  font-family: var(--font-brand); font-weight: 800;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  transition: transform .12s var(--ease-pop), background .15s, color .15s;
}
.mm-power-btn:hover { background: #F9DC4D; color: var(--plum); }
.mm-power-btn:active { transform: scale(0.92); }
.mm-power-track {
  width: 96px; height: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-blue) 16%, #fff);
  overflow: hidden;
}
.mm-power-fill {
  height: 100%; width: 50%;
  background: linear-gradient(90deg, #FFD24A, #FFA91E);
  border-radius: inherit;
  transition: width .22s var(--ease-pop);
}

.mm-beams-row { display: flex; gap: 8px; }
.mm-beam-btn {
  width: 66px; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #fff;
  border: 2px solid var(--border-cream);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--text-xs); color: var(--text-strong);
  transition: transform .12s var(--ease-pop), border-color .15s, box-shadow .15s;
}
.mm-beam-btn:hover { transform: translateY(-2px); }
.mm-beam-btn:active { transform: scale(0.95); }
.mm-beam-btn.is-active {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 32%, transparent), var(--shadow-soft);
}
.mm-beam-ico { width: 30px; height: 26px; display: flex; align-items: flex-end; justify-content: center; }
/* A little beam of light — a taller triangle means the beam reaches further. */
.mm-beam-cone {
  display: block; width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 26px solid #FFB021;
}
.mm-beam-cone--small  { border-bottom-width: 12px; border-bottom-color: #FFE3A0; }
.mm-beam-cone--medium { border-bottom-width: 19px; border-bottom-color: #FFCB4D; }
.mm-beam-cone--full   { border-bottom-width: 26px; border-bottom-color: #FFB021; }

/* ── "How light works" intro card ── */
.mm-light-card { text-align: center; max-width: 480px; }
.mm-light-card h2 {
  font-family: var(--font-brand); font-weight: var(--fw-bold);
  font-size: clamp(22px, 3.6vh, 30px);
  color: #fff; margin: 6px 0 14px;
}
.mm-light-card p {
  font-size: clamp(15px, 2.2vh, 18px);
  line-height: 1.5; color: #fff; margin: 0 0 14px;
}
.mm-light-card p b { color: #F9DC4D; font-weight: 800; }
.mm-light-card .mm-btn { margin-top: 6px; }

/* ── Tray (stages 3 & 5) ── */
.mm-tray {
  position: absolute;
  right: 2%;
  bottom: 3%;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mm-tray-card {
  width: 96px;
  min-height: 72px;
  background: var(--surface-cream);
  border: 2px solid var(--border-cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  color: var(--text-strong);
  transition: transform var(--dur-base) var(--ease-pop), box-shadow var(--dur-base) var(--ease-pop), border-color var(--dur-base) var(--ease-pop);
}
.mm-tray-card:hover { transform: translateY(-2px); }
.mm-tray-card:active { transform: scale(0.96); }
.mm-tray-card.is-selected {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 35%, transparent), var(--shadow-soft);
}
/* Guided reflector task: only the current material is pickable; the rest grey. */
.mm-tray-card.is-locked {
  opacity: 0.38;
  filter: grayscale(0.7);
  cursor: default;
  pointer-events: none;
}
.mm-tray-card.is-locked:hover { transform: none; box-shadow: var(--shadow-soft); }
.mm-tray-card.is-done { opacity: 0.5; }
.mm-tray-icon {
  width: 34px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}
.mm-tray-icon--mirror { background: linear-gradient(135deg, #38C3E4, #1E90AC); border: 1px solid #14495B; }
.mm-tray-icon--flat-foil { background: linear-gradient(135deg, #E9EEF2, #B7C2CC); border: 1px solid #8C97A1; }
.mm-tray-icon--crumpled-foil {
  background: repeating-linear-gradient(115deg, #D7DEE4 0 3px, #A7B2BC 3px 6px);
  border: 1px solid #8C97A1;
}
.mm-tray-icon--cardboard { background: linear-gradient(135deg, #C79A63, #9A6F42); border: 1px solid #6E4D2B; }
.mm-tray-card .mm-tray-tag {
  display: none;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: color-mix(in srgb, var(--brand-blue) 60%, var(--ink-900));
}
.mm-tray-card.is-selected .mm-tray-tag { display: block; }

/* ── Foil lab controls — bottom-centre, Crumple on the left ── */
.mm-lab-controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3%;
  z-index: 10;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
#btnCrumple { order: 1; }
#btnSmooth { order: 2; }
#btnLabNext { order: 3; }
.mm-lab-btn, .mm-lab-next {
  min-width: 128px;
  min-height: 64px;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-cream);
  border: 2px solid var(--border-cream);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--text-strong);
  transition: transform var(--dur-base) var(--ease-pop), box-shadow var(--dur-base) var(--ease-pop), border-color var(--dur-base) var(--ease-pop), background var(--dur-base) var(--ease-pop);
}
.mm-lab-btn:active, .mm-lab-next:active { transform: scale(0.96); }
.mm-lab-btn.is-active {
  background: var(--brand-yellow);
  border-color: #C79E00;
  color: var(--ink-900);
}
.mm-lab-next {
  background: var(--nav);
  border-color: var(--nav-dark);
  color: var(--plum);
}
.mm-lab-next[hidden] { display: none; }

/* ── Banner ── */
.mm-banner {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translate(-50%, -8px);
  z-index: 11;
  background: var(--surface-cream);
  border: 1px solid var(--border-cream);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
  padding: 10px 22px;
  max-width: 80%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-pop), transform var(--dur-slow) var(--ease-pop);
}
.mm-banner.is-visible { opacity: 1; transform: translate(-50%, 0); }
.mm-banner p {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  color: var(--text-strong);
  text-align: center;
  white-space: nowrap;
}

/* ── Drag hint (stage 1 only, first drag) ── */
.mm-drag-hint {
  position: absolute;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.mm-drag-hint[hidden] { display: none; }
.mm-drag-hint-hand {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.85);
  animation: mm-pulse 1.4s ease-in-out infinite;
}
.mm-drag-hint p {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--white);
  background: rgba(38, 9, 33, 0.75);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
@keyframes mm-pulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  50%  { transform: scale(1.25); opacity: 0.35; }
  100% { transform: scale(0.85); opacity: 0.9; }
}

/* ── Overlays (title / quiz) ── */
.mm-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(38, 9, 33, 0.6);
  padding: 16px;
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-pop);
}
.mm-overlay[hidden] { display: none; }

.mm-card {
  background: var(--card);
  border: 1px solid var(--line-dark);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: var(--space-8);
  max-width: 560px;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  animation: f3d-pop var(--dur-base) var(--ease-pop);
}
@keyframes f3d-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Opening window — matches the exploding-dots intro card ── */
.mm-title-card { text-align: center; }
/* Opening card sized to the shared Fruit3D template (exploding-dots .intro-card)
   so every experience's title card is identical: width and padding matched. */
.mm-card.mm-title-card {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  padding: clamp(28px, 4vh, 42px) clamp(24px, 4vw, 40px) clamp(26px, 3.4vh, 36px);
}
.intro-logo { display: block; height: 34px; width: auto; margin: 0 auto 16px; }
.intro-emoji { font-size: clamp(38px, 6vh, 48px); line-height: 1; }
.mm-title-card h1 {
  margin: 12px 0 8px;
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 4.6vh, 38px);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: #fff;
}
.intro-sub {
  font-size: clamp(13px, 1.8vh, 15px);
  font-weight: 700;
  letter-spacing: .02em;
  color: #EB7CB2;
  margin: 0 0 6px;
}
.intro-subtitle {
  font-size: clamp(15px, 2.2vh, 19px);
  font-weight: 800;
  letter-spacing: .01em;
  color: #EB7CB2;
  margin: 0 0 12px;
}
.intro-subhead {
  margin: clamp(24px, 5vh, 46px) auto;
  max-width: 420px;
  font-size: clamp(16px, 2.6vh, 21px);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  color: #fff;
}
/* "LIGHT" on the opening card — a yellow→orange gradient clipped to the text,
   with the same lively pulse as the exploding-dots BANG word. */
.mm-light-word {
  display: inline-block;
  background-image: linear-gradient(110deg, var(--brand-yellow), #FFB020 45%, var(--brand-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: mm-light-pulse 1.6s var(--ease-pop) infinite;
}
@keyframes mm-light-pulse {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.12) rotate(2deg); }
}
.intro-hook {
  margin: 0 auto;
  max-width: 400px;
  font-size: clamp(15px, 2vh, 17px);
  line-height: 1.55;
  color: #fff;
  font-weight: 700;
}

.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-base) var(--ease-pop), background var(--dur-base) var(--ease-pop);
}
.mm-btn:active { transform: scale(0.96); }
/* Primary CTA — mint ("lime"), plum ink, with the lifted 3D shadow from
   the exploding-dots Start button. */
.mm-btn--primary {
  background: var(--nav);
  color: var(--plum);
  border: none;
  box-shadow: 0 8px 0 var(--nav-dark), 0 14px 22px rgba(0,0,0,.4);
}
.mm-btn--primary:hover { background: #b6ffdd; }
.mm-btn--primary:active { transform: translateY(3px) scale(.98); box-shadow: 0 4px 0 var(--nav-dark), 0 8px 14px rgba(0,0,0,.4); }
.mm-btn--secondary {
  background: transparent;
  color: #fff;
  border: 2px solid var(--line-dark);
  box-shadow: var(--shadow-soft);
}
.mm-btn--secondary:hover { border-color: var(--nav); background: var(--card-inset); }
.mm-title-card .mm-btn {
  margin-top: var(--space-6);
  width: 100%;
}

/* ── Quiz ── */
/* Quiz cards copy the exploding-dots quiz: dark plum card, pink question,
   bold outlined option tiles, mint correct answer, mint continue pill. */
.mm-quiz-card { text-align: center; }
.mm-card.mm-quiz-card {
  position: relative;
  max-width: 520px;
  padding: clamp(24px, 5vh, 44px) clamp(24px, 5vw, 52px);
}
/* Round nav buttons on a question card: Back (top-left) and Next (bottom-right,
   shown once an answer is right so the child advances in their own time). */
.mm-quiz-back,
.mm-quiz-next {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--nav);
  background: transparent;
  color: var(--nav);
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.mm-quiz-back { top: 12px; left: 12px; }
.mm-quiz-next { bottom: 12px; right: 12px; }
.mm-quiz-next[hidden] { display: none; }
.mm-quiz-back:hover,
.mm-quiz-next:hover { background: var(--nav); color: var(--plum); }
.mm-quiz-back:active,
.mm-quiz-next:active { transform: scale(0.95); }
/* Keep the lemon's speech clear of the Next button in the bottom-right. */
.mm-quiz-mascot-row { padding-right: 46px; }
.mm-quiz-stars {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.mm-quiz-star {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity var(--dur-base) var(--ease-pop), transform var(--dur-base) var(--ease-pop);
}
.mm-quiz-star.is-earned { opacity: 1; transform: scale(1.12); }

.mm-quiz-prompt {
  font-family: var(--font-brand);
  font-weight: var(--fw-ultrabold);
  font-size: clamp(16px, 2.6vh, 21px);
  color: #EB7CB2;
  text-align: center;
  text-wrap: balance;
  margin-bottom: var(--space-2);
}
.mm-quiz-scene {
  display: flex;
  justify-content: center;
  margin: var(--space-3) 0 var(--space-4);
}
.mm-quiz-scene svg { width: min(220px, 70%); height: auto; }
.mm-quiz-optrow { display: inline-flex; align-items: center; gap: 8px; }
.mm-quiz-optrow .mm-dir-arrow { flex: 0 0 auto; }
.mm-quiz-title {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 3.2vh, 28px);
  color: #fff;
  text-align: center;
  margin-bottom: var(--space-3);
}
.mm-quiz-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-4);
}
.mm-quiz-option {
  flex: 0 1 auto;
  min-width: 88px;
  min-height: 64px;
  background: var(--card-inset);
  border: 3px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-brand);
  font-weight: var(--fw-ultrabold);
  font-size: clamp(16px, 2.6vh, 22px);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform .16s var(--ease-pop), border-color .16s, background .16s, color .16s;
}
.mm-quiz-option:hover { transform: translateY(-2px); }
.mm-quiz-option:active { transform: scale(0.95); }
.mm-quiz-option.is-correct {
  background: #A1FCD2;
  color: var(--plum);
  border-color: #A1FCD2;
  transform: scale(1.06);
}
.mm-quiz-option.is-wrong {
  border-color: var(--brand-orange);
  opacity: 0.55;
  animation: mm-shake .4s;
}
.mm-quiz-option svg { width: 22px; height: 22px; }
@keyframes mm-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.mm-quiz-feedback {
  margin-top: var(--space-5);
  min-height: 2.4em;
  font-size: clamp(14px, 2vh, 17px);
  font-weight: var(--fw-semibold);
  color: var(--text-soft);
  text-align: center;
}
.mm-quiz-feedback[hidden] { display: none; }
.mm-quiz-feedback.is-good { color: var(--brand-green); }
.mm-quiz-feedback.is-good strong,
.mm-quiz-feedback.is-kind strong { color: inherit; }

.mm-quiz-continue {
  margin-top: var(--space-5);
  font-size: clamp(20px, 3.2vh, 28px);
  min-height: 68px;
  padding: 18px 40px;
}
.mm-quiz-continue[hidden] { display: none; }

/* The lemon relays each answer in a speech bubble (exploding-dots kiwi style):
   lemon on the left, bubble to its right with the tail pointing back at it. */
.mm-quiz-mascot-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  margin-top: var(--space-5);
}
.mm-quiz-mascot-row[hidden] { display: none; }
.mm-quiz-mascot {
  width: clamp(54px, 8vh, 72px);
  height: clamp(54px, 8vh, 72px);
  flex: 0 0 auto;
}
.mm-quiz-speech {
  width: auto;
  flex: 1 1 auto;
  opacity: 1;
  transform: none;
}
.mm-quiz-speech p { text-align: left; }

/* The end-quiz / interim-question card sits on a plain background — the level's
   interactive scene behind it is a distraction, so the overlay is opaque. */
#quizOverlay { background: var(--plum); }

.mm-finale-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-4);
}
.mm-finale h2 {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  color: var(--text-strong);
  text-align: center;
}
.mm-finale-take {
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--card-inset);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  font-size: var(--text-md);
  color: #fff;
  text-align: center;
}
.mm-finale-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-faint);
  text-align: center;
}
.mm-finale .mm-btn { margin-top: var(--space-6); width: 100%; }
/* When a round Next button sits in the bottom-right, the menu button shrinks to
   its content and centres so the two never overlap. */
.mm-finale .mm-btn.mm-finale-menu { width: auto; min-width: 200px; align-self: center; }

/* ── End-of-experience feedback card ── */
.mm-card.mm-endcard { max-width: 540px; text-align: center; }
.mm-end-title {
  font-family: var(--font-brand);
  font-weight: var(--fw-ultrabold);
  font-size: clamp(26px, 4.4vh, 38px);
  line-height: 1.12;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}
.mm-end-ask {
  margin-top: var(--space-4);
  font-family: var(--font-brand);
  font-weight: var(--fw-ultrabold);
  font-size: clamp(17px, 2.8vh, 22px);
  color: var(--brand-pink);
  text-align: center;
}
.mm-end-row {
  display: flex;
  gap: 12px;
  margin-top: var(--space-5);
  align-items: flex-end;
}
.mm-end-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  margin-top: var(--space-4);
}
.mm-end-row .mm-end-field { margin-top: 0; }
.mm-end-field--grow { flex: 1 1 auto; }
.mm-end-field--age { flex: 0 0 104px; }
.mm-end-label {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: clamp(13px, 1.8vh, 15px);
  color: var(--text-soft);
}
.mm-end-input {
  width: 100%;
  min-height: 52px;
  background: var(--card-inset);
  border: 3px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  font-family: var(--font-brand);
  font-weight: var(--fw-semibold);
  font-size: clamp(15px, 2.2vh, 18px);
  color: #fff;
  transition: border-color .16s;
}
.mm-end-input::placeholder { color: var(--text-faint); }
.mm-end-input:focus { outline: none; border-color: var(--brand-pink); }
.mm-end-select { min-height: 52px; cursor: pointer; text-align: center; }
.mm-end-select option { color: #fff; background: var(--plum); }
.mm-end-textarea { resize: vertical; min-height: 76px; line-height: 1.4; }
.mm-end-rate { margin-top: var(--space-5); }
.mm-end-actions {
  display: flex;
  gap: 12px;
  margin-top: var(--space-6);
}
.mm-end-actions .mm-btn { flex: 1 1 0; width: auto; margin-top: 0; text-decoration: none; }
@media (max-width: 480px) {
  .mm-end-actions { flex-direction: column; }
}

/* ── Responsive tweaks ── */
@media (max-width: 1100px) {
  .mm-tray-card { width: 84px; }
  .mm-quiz-options.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 860px) {
  .mm-card { padding: var(--space-6); }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile / narrow phones — same formula as the exploding-dots reference:
   the interactive (the maze) hugs the top of the stage, and the guidance
   (mascot, speech) and the controls (material tray / foil lab) dock along
   the bottom instead of floating over the small letterboxed canvas. The
   title & quiz overlays break out to cover the whole screen so their cards
   never clip inside the canvas box.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Reserve room at the bottom of the stage for the docked controls; the
     landscape maze then centres in the space that remains, sitting in the
     upper part of the screen with the guidance docked below it. */
  .mm-stage-wrap {
    padding: 6px 6px calc(150px + env(safe-area-inset-bottom, 0px));
  }

  /* The banner mirrors the docked speech on every stage entry, so it is
     redundant (and would overlap the maze) on a phone — hide it. */
  .mm-banner { display: none !important; }

  /* Shrink the % HUD so it doesn't cover the small maze. */
  .mm-hud { top: 6px; right: 6px; min-width: 112px; padding: 6px 10px 8px; border-width: 1.5px; }
  .mm-hud-level { font-size: 15px; margin-bottom: 2px; }
  .mm-hud-pct { font-size: 11px; margin-bottom: 5px; }
  .mm-hud-track { height: 9px; }

  /* ── Title & quiz overlays cover the whole viewport ── */
  .mm-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    padding: 14px;
  }
  .mm-card {
    padding: var(--space-6);
    max-height: calc(100dvh - 28px);
    max-width: 460px;
  }
  /* Clear the top-left Back button so it doesn't overlap the centred title. */
  .mm-card.mm-quiz-card { padding-top: 56px; }
  .mm-title-card h1 { font-size: clamp(24px, 8vw, 34px); }
  .intro-logo { height: 28px; margin-bottom: 12px; }

  /* ── Guidance dock: lemon + speech as a bottom bar (kiwi mobile layout:
        lemon 54px on the left, speech to its right) ── */
  .mm-mascot-dock {
    position: fixed;
    left: 8px;
    right: 8px;
    top: auto;         /* undo the desktop top:10 so it docks at the bottom */
    bottom: calc(47px + env(safe-area-inset-bottom, 0px));
    transform: none;   /* undo the desktop top-centre translateX(-50%) */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    z-index: 15;
  }
  .mm-mascot { width: 54px; height: 54px; }
  .mm-speech-bubble {
    flex: 1 1 auto;
    max-width: calc(100vw - 92px);
  }
  .mm-speech-bubble p { font-size: clamp(14px, 3.7vw, 16px); }

  /* ── Material tray: a horizontal row of compact cards above the dock ── */
  .mm-tray {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(115px + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    z-index: 15;
  }
  .mm-tray-card {
    width: auto;
    min-height: 62px;
    padding: 6px 4px;
    gap: 4px;
    font-size: 11px;
  }
  .mm-tray-icon { width: 30px; height: 20px; }

  /* ── Foil lab controls: a horizontal row ── */
  .mm-lab-controls {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(115px + env(safe-area-inset-bottom, 0px));
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    z-index: 15;
  }
  .mm-lab-btn, .mm-lab-next {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 62px;
    padding: 8px 10px;
    font-size: var(--text-base);
  }

  /* ── Level 1 light controls dock above the guidance bar ── */
  .mm-power, .mm-beams {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(115px + env(safe-area-inset-bottom, 0px));
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 10px;
    z-index: 15;
  }
  .mm-power-label { margin-bottom: 0; white-space: nowrap; }
  .mm-power-row { flex: 1 1 auto; justify-content: center; }
  .mm-power-track { flex: 1 1 auto; max-width: 180px; }
  .mm-beams-row { flex: 1 1 auto; justify-content: center; }
  .mm-beam-btn { flex: 1 1 auto; max-width: 96px; min-height: 60px; }

  /* Banner sits just under the nav, at the top of the maze. */
  .mm-banner { top: 8px; max-width: calc(100% - 16px); }
  .mm-banner p { white-space: normal; }
}

/* ── Fruit sprinkle ──
   A variety of fruit rains from under the header when a level is finished
   (see sprinkle.js). The sprinkle sits behind the header/footer so it pours
   out from under the header; the burst rides its own top layer. */
.fruit-sprinkle {
  position: fixed;
  inset: 0 0 auto 0;
  height: 0;
  pointer-events: none;
  z-index: 900;             /* above the header/footer (10); pours from under the header edge */
}
.fruit-sprinkle-item {
  position: fixed;
  display: block;
  height: auto;
  opacity: 0;               /* hidden until its animation fades it in (no start flash) */
  will-change: transform, opacity;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .16));
}
.fruit-burst {
  position: fixed;
  inset: 0;
  height: 0;
  pointer-events: none;
  z-index: 950;
}
.fruit-burst-item {
  position: fixed;
  display: block;
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .18));
}

/* ── Reduced motion ──
   Keep the live beam (it is the lesson). Replace position/scale
   animation with a brief opacity pulse so events still "answer back"
   within 100ms, per output-guidance. Banner keeps only its opacity
   fade, dropping the slide-up transform. */
@media (prefers-reduced-motion: reduce) {
  .mm-mascot { animation: none; }
  .mm-mascot-model.mm-bounce, .mm-mascot-model.mm-tilt { animation: mm-fade-pulse 380ms ease-in-out; }
  .mm-drag-hint-hand { animation: none; opacity: 0.75; }
  .mm-light-word { animation: none; }
  .mm-banner, .mm-banner.is-visible { transform: translate(-50%, 0) !important; }
  .mm-overlay, .mm-card, .mm-banner, .mm-speech-bubble {
    animation: none !important;
    transition-duration: 180ms !important;
  }
  .mm-tray-card, .mm-lab-btn, .mm-btn, .mm-quiz-option {
    transition-duration: 80ms !important;
  }
}
@keyframes mm-fade-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}