/* MACRO MANIA (FOODIKU NEXT, GO 1) -- volledig genamespacede styling, zie js/macromania-*.js. */
/* MACRO MANIA -- VERTICAL SLICE V2.1
   Geïsoleerd prototype. Kleurtokens zijn bewust dezelfde waarden als de
   bestaande FOODIKU-huisstijl, maar dit bestand deelt geen code met FOODIKU
   NEXT of LABEL LAB.

   V2.1-feedbackmodel (hard, geldt overal):
   NEUTRAAL = nog niet beoordeeld (hooguit een fysieke lift, nooit kleur).
   ROOD + shake = fout, keert terug, geen voortgang.
   GROEN = uitsluitend een bevestigd correct antwoord.
   Oranje is een FOODIKU-accentkleur (titels/kroon) maar betekent nooit
   geselecteerd/mogelijk-correct/fout/correct. */

.mm-screen {
  --mm-green: #78bc75;
  --mm-green-dark: #5da35a;
  --mm-green-light: #b9dfb7;
  --mm-green-deep: #46793f;
  --mm-orange: #ff930f;
  --mm-neutral-soft: rgba(43, 43, 40, 0.06);
  --mm-bg: #faf9f5;
  --mm-card: #ffffff;
  --mm-ink: #2b2b28;
  --mm-ink-soft: #6b6b66;
  --mm-red: #e0554a;
  --mm-red-soft: rgba(224, 85, 74, 0.14);
  --mm-radius-lg: 28px;
  --mm-radius-md: 18px;

  /* VISUAL POLISH V1 -- kleine, prototype-eigen randen/schaduw-set.
     Waarden bewust gelijk aan de FOODIKU-kaarttaal (zachte beige rand
     #e3e0d4, tweelaagse zachte schaduw), maar dit blijft een eigen kopie:
     geen gedeelde CSS met FOODIKU NEXT.
     SOFT   = passieve kaarten/containers (lezen, niet aanraken).
     MEDIUM = interactieve objecten en dropdoelen (je mag hier iets mee).
     STRONG = alleen waar de mechanic het eist (actief sleepobject in focus,
              drag-hover, battle-identiteit) -- nooit als standaardkaart.
     DASHED = lege dropzones (uitnodigend, nog niet gevuld). */
  --mm-border-w: 2px;
  --mm-border-soft: #e3e0d4;
  --mm-border-medium: #cbc6b7;
  --mm-border-strong: var(--mm-ink);
  --mm-border-dashed: #d3cebf;
  --mm-surface: var(--mm-card);
  --mm-surface-soft: #f3f1ea;
  --mm-text-primary: var(--mm-ink);
  --mm-text-secondary: var(--mm-ink-soft);
  --mm-green-tint: rgba(120, 188, 117, 0.14);
  --mm-shadow-card: 0 2px 6px rgba(43, 43, 40, 0.05), 0 10px 22px rgba(43, 43, 40, 0.07);
  --mm-shadow-chip: 0 1px 2px rgba(43, 43, 40, 0.06), 0 5px 12px rgba(43, 43, 40, 0.08);
  --mm-shadow-lift: 0 12px 26px rgba(43, 43, 40, 0.18);
  --mm-shadow-cta: 0 6px 16px rgba(255, 147, 15, 0.32);
  --mm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* FOODIKU NEXT: de prototype-globals (*, html/body, img, .app, .screen,
   .hidden, :root en de --safe-*-herdefinitie) zijn bewust NIET meegenomen;
   NEXT levert die zelf. Alles hieronder hangt aan .mm-screen / .mm-*. */
.mm-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  padding: calc(0.8rem + var(--safe-top)) 1.1rem calc(0.8rem + var(--safe-bottom));
  overflow-x: hidden;
  overflow-y: auto; /* vangnet; de speelschermen zijn ontworpen om niet te scrollen */
  background: var(--mm-bg);
  color: var(--mm-ink);
}

.mm-screen img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/* Terugknop (hergebruikt NEXT .btn-back). Op intro/hub zwevend linksboven,
   zodat de gecentreerde opbouw van die schermen ongewijzigd blijft; op het
   speelscherm staat hij in de rij met de modus-/rondeteller. */
.mm-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
}
.mm-topbar .mm-progress { flex: 1; }
.mm-screen-intro > .mm-topbar,
.mm-screen-hub > .mm-topbar {
  position: absolute;
  top: calc(0.8rem + var(--safe-top));
  left: 1.1rem;
  z-index: 2;
}

/* ---------- INTRO ---------- */

.mm-screen-intro {
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
}

.mm-mascot { user-select: none; -webkit-user-drag: none; }
.mm-mascot-intro { width: 150px; height: auto; margin-bottom: 0.4rem; }

.mm-title {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--mm-ink);
}

.mm-payoff {
  font-size: 1rem;
  color: var(--mm-ink-soft);
  margin: 0 0 1rem;
  font-weight: 600;
}

/* VISUAL POLISH V1: één CTA-familie (START, VOLGENDE, CHECK, NOG EEN RONDE,
   START DE ZAAK). Oranje vlak met donkere tekst (leesbaar contrast op
   #ff930f), zachte oranje schaduw i.p.v. een harde offsetrand, en een
   korte, rustige indruk bij het drukken. Breedte blijft per plek vrij. */
.mm-btn-primary {
  background: var(--mm-orange);
  color: var(--mm-ink);
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  min-height: 54px;
  padding: 0.85rem 2.4rem;
  cursor: pointer;
  box-shadow: var(--mm-shadow-cta);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s var(--mm-ease-out), box-shadow 0.12s ease, opacity 0.15s ease;
}
.mm-btn-primary:active { transform: scale(0.97); box-shadow: 0 3px 8px rgba(255, 147, 15, 0.28); }

/* Secundaire actie (bv. "TERUG NAAR MACRO MANIA"): duidelijk minder nadruk
   dan de oranje primaire knop. Zachte, maar nog steeds tastbare pil (geen
   platte tekstlink), met de medium rand i.p.v. een zwarte omlijning. */
.mm-btn-secondary {
  background: var(--mm-surface);
  color: var(--mm-ink);
  border: var(--mm-border-w) solid var(--mm-border-medium);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  min-height: 48px;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s var(--mm-ease-out);
}
.mm-btn-secondary:active { transform: scale(0.97); }

/* ---------- PLAY SHELL ---------- */

.mm-screen-play { gap: 0.4rem; }

/* POLISH PASS V2: de vraag hoort bij het "speelpakket". Voorheen vulde de
   stage (flex: 1) alle resthoogte en centreerde hij alleen zijn eigen inhoud,
   waardoor de vraag bovenaan bleef hangen met een groot leeg vlak eronder.
   Nu vormen vraag + stage samen één blok dat verticaal in de resthoogte
   staat; de mode-/rondeteller blijft bovenaan. Twee lege spacers (via
   ::before/::after en `order`) verdelen de vrije ruimte iets hoger dan
   exact midden (1 : 1,35), zodat het blok optisch goed staat. De stage mag
   krimpen (min-height: 0), dus bij krappe schermen verandert er niets aan
   het bestaande pasgedrag. */
.mm-screen-play > .mm-topbar { order: 0; }
.mm-screen-play::before { content: ""; order: 1; flex: 1 1 0; min-height: 0; }
.mm-screen-play > .mm-prompt { order: 2; margin-bottom: 0.2rem; }
.mm-screen-play > .mm-stage { order: 3; flex: 0 1 auto; }
.mm-screen-play::after { content: ""; order: 4; flex: 1.35 1 0; min-height: 0; }

.mm-progress {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--mm-ink-soft);
  text-align: right;
}

.mm-prompt {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--mm-ink);
  text-align: center;
  line-height: 1.22;
  min-height: 1.5em;
}

.mm-hint {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mm-ink-soft);
  text-align: center;
}

.mm-basis-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--mm-ink-soft);
  text-align: center;
}

.mm-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 0;
}

/* ---------- Gedeelde feedbacktaal: neutraal / rood / groen ----------
   .mm-armed (door de engine gezet bij tap-to-place) is UITSLUITEND een
   fysieke lift, nooit een kleur. .mm-wrong / .mm-wrong-zone flashen kort
   rood. .mm-correct / .mm-zone-correct zijn de enige groene bevestiging. */

.mm-armed {
  transform: translateY(-3px);
  box-shadow: var(--mm-shadow-lift);
}

/* QA-J12 (2026-09-28): duidelijke selectiestand, uitsluitend als de stap
   een echt tikdoel heeft (body.mm-has-armed, zie mmSetArmed in
   js/macromania-engine.js). Nog steeds geen groen/rood: een donkere rand +
   hogere lift op de opgepakte pil, en een gestippelde "tik hier"-rand op de
   tikdoelen. In MYSTERY/DETECTIVE (geen tikdoel) verandert er niets. */
body.mm-has-armed .mm-draggable.mm-armed {
  transform: translateY(-6px) scale(1.04);
  border-color: var(--mm-border-strong);
  box-shadow: var(--mm-shadow-lift);
}

body.mm-has-armed .mm-tap-target:not(.mm-hover-drop) {
  outline: 2px dashed var(--mm-border-strong);
  outline-offset: 4px;
  animation: mmTapTargetPulse 1.1s ease-in-out infinite;
}

@keyframes mmTapTargetPulse {
  0%, 100% { outline-color: var(--mm-border-strong); }
  50% { outline-color: var(--mm-border-medium); }
}

@media (prefers-reduced-motion: reduce) {
  body.mm-has-armed .mm-tap-target:not(.mm-hover-drop) { animation: none; }
}

@keyframes mmShake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* Toetsenbordfocus: nu de standaardranden zachter zijn, krijgt focus een
   eigen duidelijke donkere ring (nooit groen/rood/oranje, dat zijn
   feedback-/CTA-kleuren). Alleen bij toetsenbordnavigatie zichtbaar. */
.mm-mystery-option:focus-visible,
.mm-det-suspect:focus-visible,
.mm-energy-target:focus-visible,
.mm-energy-chip:focus-visible,
.mm-macro-card:focus-visible,
.mm-profile-bar:focus-visible,
.mm-tile:focus-visible,
.mm-foodieq-crown:focus-visible,
.mm-hub-card:focus-visible,
.mm-btn-primary:focus-visible,
.mm-btn-secondary:focus-visible {
  outline: 3px solid var(--mm-ink);
  outline-offset: 2px;
}

.mm-wrong {
  outline: 3px solid var(--mm-red) !important;
  outline-offset: 1px;
  animation: mmShake 0.36s ease;
}

.mm-wrong-zone {
  border-color: var(--mm-red) !important;
  background: var(--mm-red-soft) !important;
}

@keyframes mmSnapIn {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.mm-snap { animation: mmSnapIn 0.25s ease; }

/* ---------- INTERACTION 1: DRAG_TO_BOWL ---------- */

.mm-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
  width: 100%;
}

.mm-tile {
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-border-medium);
  border-radius: var(--mm-radius-md);
  font-weight: 800;
  font-size: 1rem;
  padding: 0.95rem 0.4rem;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--mm-ink);
  box-shadow: var(--mm-shadow-chip);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.mm-tile:active { transform: scale(0.97); }
.mm-tile.mm-dragging { cursor: grabbing; transform-origin: center; z-index: 50; border-color: var(--mm-border-strong); box-shadow: var(--mm-shadow-lift); }

/* Een correcte tegel wordt fysiek in de kom gezet en blijft daar VOLLEDIG
   leesbaar en groen -- nooit uitgefaded. */
.mm-tile.mm-in-bowl {
  background: var(--mm-green);
  border-color: var(--mm-green);
  color: var(--mm-ink);
  cursor: default;
  box-shadow: none;
}

/* Geen "FOODIKU"-tekst meer: het grote vlak is puur een uitnodigend leeg
   dropgebied. De opdracht bovenaan is al duidelijk genoeg. VISUAL POLISH
   V1: neutraal gestippeld zoals elke lege dropzone -- groen komt pas van
   de correct geplaatste (groene) macrotegels zelf. */
.mm-bowl {
  width: 92%;
  min-height: 112px;
  border: 3px dashed var(--mm-border-dashed);
  border-radius: var(--mm-radius-lg);
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem;
  transition: transform 0.15s ease, background 0.15s ease, border-width 0.15s ease;
}

.mm-bowl.mm-hover-drop {
  transform: scale(1.03);
  background: var(--mm-card);
  border-style: solid;
  border-color: var(--mm-border-strong);
}

.mm-bowl .mm-tile.mm-in-bowl {
  flex: 0 0 auto;
  min-width: 130px;
}

/* ---------- INTERACTIONS 2-5: DRAG_MACRO_TO_PRODUCT ---------- */

.mm-stage-product { justify-content: center; }

.mm-product-hero {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem;
  border-radius: var(--mm-radius-lg);
  transition: transform 0.15s ease, background 0.15s ease;
}

.mm-product-hero img {
  width: 100%;
  max-width: 290px;
  height: 260px;
  object-fit: contain;
  pointer-events: none;
}

.mm-product-hero.mm-hover-drop { transform: scale(1.02); background: var(--mm-surface-soft); }
.mm-product-hero.mm-wrong-zone { border-radius: var(--mm-radius-lg); }

.mm-product-name {
  margin: 0;
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
  color: var(--mm-ink);
}

.mm-macro-cards {
  display: flex;
  gap: 0.55rem;
  width: 100%;
  justify-content: center;
}

.mm-macro-card {
  flex: 1;
  max-width: 150px;
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-border-medium);
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.85rem 0.35rem;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--mm-ink);
  box-shadow: var(--mm-shadow-chip);
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.15s ease;
}
.mm-macro-card:active { transform: scale(0.97); }
.mm-macro-card.mm-dragging { cursor: grabbing; z-index: 50; border-color: var(--mm-border-strong); box-shadow: var(--mm-shadow-lift); }

/* Het GEKOZEN, correcte antwoord: hoog contrast, volledig leesbaar, groen. */
.mm-macro-card.mm-correct {
  background: var(--mm-green);
  border-color: var(--mm-green-dark);
  color: var(--mm-ink);
  opacity: 1;
  box-shadow: none;
  cursor: default;
}

/* De niet-gekozen kaarten treden terug, maar blijven leesbaar (geen fletse
   disabled-look). */
.mm-macro-card.mm-faded {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}

/* ---------- REVEAL (gedeeld door 2-5, 8) ---------- */

.mm-reveal {
  width: 100%;
  max-width: 300px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mm-reveal.mm-reveal-in { opacity: 1; transform: translateY(0); }

.mm-bars { display: flex; flex-direction: column; gap: 0.35rem; }

.mm-bar-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 3rem;
  align-items: center;
  gap: 0.4rem;
}

/* De labelkolom moet het langste label ("KOOLHYDRATEN") volledig kunnen
   bevatten -- was eerder 5.2rem, te smal, waardoor die tekst zichtbaar over
   de balk heen viel. nowrap is een extra garantie, geen wrap is hier sowieso
   mogelijk (één woord), maar voorkomt stilzwijgend afbreken bij toekomstige
   labelwijzigingen. */
.mm-bar-label { font-size: 0.68rem; font-weight: 800; color: var(--mm-ink-soft); white-space: nowrap; }
.mm-bar-value { font-size: 0.78rem; font-weight: 800; text-align: right; color: var(--mm-ink); }

.mm-bar-track {
  height: 14px;
  background: var(--mm-neutral-soft);
  border-radius: 999px;
  overflow: hidden;
}

/* Samenhangende groene FOODIKU-familie voor de profielvisualisatie -- kleur
   dient alleen voor onderscheid, niet voor goed/slecht. */
.mm-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.mm-bar-fill-carbs { background: var(--mm-green-light); }
.mm-bar-fill-protein { background: var(--mm-green); }
.mm-bar-fill-fat { background: var(--mm-green-deep); }

.mm-kcal { margin: 0.3rem 0 0; font-size: 0.8rem; font-weight: 600; color: var(--mm-ink-soft); text-align: center; }

/* V4.1.1: "VOLGENDE"-knop onder de HERKEN-reveal -- de speler tikt zelf door
   i.p.v. een getimede auto-advance, zodat het macroprofiel/de grammen/kcal
   daadwerkelijk bekeken kunnen worden. Hergebruikt .mm-btn-primary (zelfde
   oranje CTA-taal als elders), alleen gecentreerd binnen de reveal. */
.mm-reveal-next {
  display: block;
  margin: 0.9rem auto 0;
}

.mm-insight {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
  color: var(--mm-green-dark);
}

/* ---------- KORT TRANSITIEMOMENT (eenmalig, na de macro-intro) ----------
   Geen tekstpagina, geen alinea's -- een vinkje en wat hierna beschikbaar
   wordt. Auto-advance, geen extra tik nodig. */

.mm-stage-transition { justify-content: center; }

.mm-transition-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mm-transition-card.mm-transition-in { opacity: 1; transform: scale(1); }

.mm-transition-check {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--mm-green-dark);
}

.mm-transition-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--mm-ink);
  text-align: center;
}

.mm-transition-next {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mm-ink-soft);
  text-align: center;
}

/* ---------- INTERACTIES 6-7: BASKET_SORT ---------- */

.mm-stage-sort { justify-content: flex-start; padding-top: 0.2rem; gap: 0.75rem; }

.mm-sort-products {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}

/* VISUAL POLISH V1: zachte medium rand + tweelaagse schaduw i.p.v. de
   zwarte speelkaartrand (interactie ongewijzigd; momenteel niet in een
   actieve ronde gebruikt). De hele kaart is de sleepbron; de <img> erin is pointer-events:none zodat
   een pointerdown op de foto altijd naar de kaart zelf bubbelt in plaats van
   dat de browser een losse native image-drag start. */
.mm-sort-product {
  flex: 1;
  max-width: 140px;
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-border-medium);
  border-radius: var(--mm-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--mm-shadow-chip);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.mm-sort-product:active { transform: scale(0.97); }

.mm-sort-product img { width: 100%; height: 104px; object-fit: contain; pointer-events: none; }
.mm-sort-product span { font-size: 0.72rem; font-weight: 800; text-align: center; color: var(--mm-ink); }
.mm-sort-product.mm-dragging { cursor: grabbing; z-index: 50; box-shadow: var(--mm-shadow-lift); }

.mm-sort-zones {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.3rem;
}

.mm-sort-zone {
  flex: 1;
  min-height: 132px;
  border: var(--mm-border-w) dashed var(--mm-border-dashed);
  border-radius: var(--mm-radius-lg);
  background: var(--mm-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.55rem 0.35rem;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.mm-sort-zone-label { font-size: 0.68rem; font-weight: 900; color: var(--mm-ink-soft); text-align: center; letter-spacing: 0.01em; }

.mm-sort-zone.mm-hover-drop { transform: scale(1.02); border-style: solid; border-color: var(--mm-border-strong); }

.mm-sort-zone.mm-zone-correct {
  border-style: solid;
  border-color: var(--mm-green-dark);
  background: rgba(120, 188, 117, 0.12);
}

.mm-sort-zone .mm-sort-product { max-width: 100px; cursor: default; box-shadow: none; }
.mm-sort-zone .mm-sort-product img { height: 62px; }

/* ---------- INTERACTION 8: MACRO_BATTLE ---------- */

.mm-stage-battle { justify-content: center; gap: 0.55rem; }

.mm-battle-label {
  margin: 0;
  font-weight: 900;
  font-size: 0.86rem;
  color: var(--mm-orange);
  letter-spacing: 0.04em;
  text-align: center;
}

.mm-battle-candidates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

/* Twee grote horizontale kandidaatkaarten onder elkaar -- duidelijke
   dropzones. VISUAL POLISH V1: witte kaart met medium rand + zachte
   kaartschaduw (duel-identiteit via de twee tegenover elkaar staande
   kaarten, het oranje VS-label en de kroon, niet via een zwarte rand).
   Drag-hover maakt de kaart kort STRONG. */
.mm-battle-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 96px;
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-border-medium);
  border-radius: var(--mm-radius-lg);
  padding: 0.5rem 0.8rem;
  box-shadow: var(--mm-shadow-card);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.mm-battle-card img { width: 84px; height: 84px; object-fit: contain; pointer-events: none; flex: 0 0 auto; }
.mm-battle-card span { font-size: 1.02rem; font-weight: 800; color: var(--mm-ink); flex: 1; }

.mm-battle-card.mm-hover-drop { transform: scale(1.02); border-color: var(--mm-border-strong); }
.mm-battle-card.mm-zone-correct { border-color: var(--mm-green-dark); background: var(--mm-green-tint); box-shadow: none; }

.mm-battle-card .mm-foodieq-crown { width: 56px; height: 56px; flex: 0 0 auto; }

.mm-foodieq-wrap { margin-top: 0.2rem; display: flex; justify-content: center; }

/* FoodieQ (FoodikuKroon.png, exact zoals aangeleverd) is het sleepbare
   speelstuk zelf -- geen samengestelde compositie meer. */
.mm-foodieq-crown {
  position: relative;
  background: none;
  border: none;
  cursor: grab;
  touch-action: none;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  width: 148px;
  height: 148px;
  transition: transform 0.1s ease;
}
.mm-foodieq-crown img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mm-foodieq-crown.mm-dragging { cursor: grabbing; z-index: 50; transform: scale(1.05); }

.mm-reveal-battle .mm-battle-values {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--mm-ink);
  margin-top: 0.2rem;
}
.mm-reveal-battle .mm-battle-winner { color: var(--mm-green-dark); font-weight: 900; }

/* ---------- INTERACTIES 9-10: MACRO STACK (echt ontdekken) ---------- */

.mm-stage-build { justify-content: center; gap: 0.55rem; }

/* V4.1.1: productbeeld duidelijk groter (was 104px hoog) -- er stond
   ruimschoots ongebruikte verticale ruimte in dit scherm. Mechanic/structuur/
   labels/dropzones/draggable values blijven ongewijzigd, alleen de visuele
   presence van het product zelf groeit. */
.mm-product-hero-compact { max-width: 230px; padding: 0.2rem; gap: 0.15rem; }
.mm-product-hero-compact img { height: 190px; max-width: 230px; }
.mm-product-hero-compact .mm-product-name { font-size: 0.9rem; }

.mm-stack-zone {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mm-stack-slot {
  min-height: 58px;
  border: var(--mm-border-w) dashed var(--mm-border-dashed);
  border-radius: var(--mm-radius-md);
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.mm-stack-slot-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; color: var(--mm-ink-soft); min-width: 6.6rem; white-space: nowrap; }

.mm-stack-slot.mm-hover-drop { transform: scale(1.02); border-style: solid; border-color: var(--mm-border-strong); background: var(--mm-card); }
.mm-stack-slot.mm-snap { border-style: solid; border-color: var(--mm-green); background: rgba(120, 188, 117, 0.08); }

.mm-stack-bar {
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.55rem;
  /* Een korte balk (bv. 9,7 g op een lage waarde) mag nooit "9,7 / g"
     over twee regels breken: minimaal zo breed als zijn eigen label. */
  min-width: max-content;
  transition: width 0.4s ease;
}
.mm-stack-bar-carbs { background: var(--mm-green-light); }
.mm-stack-bar-protein { background: var(--mm-green); }
.mm-stack-bar-fat { background: var(--mm-green-deep); }
.mm-stack-bar-value { font-size: 0.76rem; font-weight: 800; color: var(--mm-ink); white-space: nowrap; }
.mm-stack-bar-fat .mm-stack-bar-value { color: #fff; }

.mm-profile-bar-wrap {
  display: flex;
  gap: 0.4rem;
  width: 100%;
  justify-content: center;
  margin-top: 0.1rem;
}

/* Losse, echte gramwaarden zonder lengte-codering en zonder macronaam --
   de speler ontdekt de koppeling door te proberen, niet door te lezen. */
.mm-profile-bar {
  flex: 1;
  max-width: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 999px;
  border: var(--mm-border-w) solid var(--mm-border-medium);
  background: var(--mm-card);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--mm-shadow-chip);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.mm-profile-bar:active { transform: scale(0.97); }
.mm-profile-bar.mm-dragging { cursor: grabbing; z-index: 50; border-color: var(--mm-border-strong); box-shadow: var(--mm-shadow-lift); }

/* Getal + eenheid moeten altijd één regel blijven (bv. "0,9 g" mag nooit
   afbreken naar "0,9" / "g" op een smalle chip). */
.mm-profile-bar-value { font-size: 0.95rem; font-weight: 900; color: var(--mm-ink); white-space: nowrap; }

/* ---------- HUB: "welke Macro Mania-game wil je spelen?" ----------
   Speels/fysiek/compact, geen SaaS-dashboardlook (opdracht sectie 14).
   VISUAL POLISH V1: speelhal-rij i.p.v. instellingenmenu -- elke open
   modus is een witte, zwevende kaart (zachte schaduw, geen zwarte rand)
   met het icoon in een eigen rond "muntje" links en een kleine pijl
   rechts. Zelfde markup (icoon/titel/ondertitel), puur CSS-grid. Bewust
   geen grote roadmap -- alleen de spelmodi die daadwerkelijk werken. */

.mm-screen-hub { align-items: center; justify-content: flex-start; gap: 0.3rem; text-align: center; padding-top: calc(1.4rem + var(--safe-top)); }

/* MYSTERY V1: met een vijfde spelmodus past de hub niet meer op elk scherm.
   De hub is een menu, geen actief spelscherm, dus hier mag hij (en alleen
   hij) verticaal scrollen; de kaarten zelf blijven ongewijzigd. De flex-
   kinderen mogen niet krimpen, anders worden ze platgedrukt i.p.v. dat er
   gescrold wordt. */
.mm-screen-hub { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mm-screen-hub > * { flex-shrink: 0; }

.mm-mascot-hub { width: 84px; height: auto; margin-bottom: -0.2rem; }

.mm-hub-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--mm-ink);
}

/* BUILD 10: de introzin van Macro Mania onder de titel. */
.mm-hub-payoff {
  max-width: 300px;
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--mm-ink-soft);
}

.mm-hub-modes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
}

.mm-hub-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon title end" "icon sub end";
  align-items: center;
  column-gap: 0.85rem;
  row-gap: 0.1rem;
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 0.8rem;
  text-align: left;
  font: inherit;
  background: var(--mm-card);
  border: var(--mm-border-w) solid transparent;
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s var(--mm-ease-out), box-shadow 0.12s ease;
}
.mm-hub-card:active { transform: scale(0.98); box-shadow: var(--mm-shadow-chip); }

/* BUILD 10: eigen SVG-iconen (MM_MODES in js/macromania-curriculum.js), zelfde tegel als de Label Lab-hub. */
.mm-hub-card-icon {
  grid-area: icon;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(120, 188, 117, 0.16);
  color: var(--mm-green-dark);
}
.mm-hub-card-icon svg { display: block; width: 28px; height: 28px; }
.mm-hub-card-title { grid-area: title; align-self: end; font-size: 1.08rem; font-weight: 900; color: var(--mm-ink); letter-spacing: 0.03em; }
.mm-hub-card-subtitle { grid-area: sub; align-self: start; font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: var(--mm-ink-soft); }

/* BUILD 10: pijl (open) of slot (vergrendeld) als los element, zoals .ll-mode-end. */
.mm-hub-card-end {
  grid-area: end;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--mm-green-dark);
}
.mm-hub-card-end svg { display: block; width: 18px; height: 18px; color: #b8b3a6; }

/* BUILD 10: NIEUW bij een open mode die nog nooit is uitgespeeld (zoals .ll-mode-tag.is-new). */
.mm-hub-tag-new {
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--mm-green);
  color: var(--mm-ink);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* Vergrendelde modus: plat (geen schaduw/druk-gevoel), zachte gestippelde
   rand, gedempt icoon en een slotje i.p.v. de pijl; niet klikbaar -- maar
   nooit onleesbaar, de speler moet kunnen zien wat hij nog gaat
   ontgrendelen. */
.mm-hub-card-locked {
  background: transparent;
  border-style: dashed;
  border-color: var(--mm-border-dashed);
  box-shadow: none;
  cursor: default;
}
.mm-hub-card-locked:active { transform: none; box-shadow: none; }
.mm-hub-card-locked .mm-hub-card-icon { background: var(--mm-neutral-soft); color: #a19d92; }
.mm-hub-card-locked .mm-hub-card-title { color: var(--mm-ink-soft); }

/* ---------- RONDE KLAAR (routinematig, geen "modus voltooid") ----------
   BUILD 10: één opbouw voor alle modes (zie mhShowRoundComplete()). De kaart
   staat in het midden zolang hij past; op een laag scherm begint hij bovenaan
   en scrolt het scherm (.mm-screen heeft overflow-y: auto). */

.mm-screen-end { align-items: center; justify-content: flex-start; }
.mm-screen-end > * { flex-shrink: 0; }

.mm-round-complete-card {
  width: 100%;
  max-width: 420px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
}
.mm-round-complete-card .mm-btn-primary,
.mm-round-complete-card .mm-btn-secondary { min-width: 250px; }

.mm-mascot-round { width: 128px; height: auto; animation: mmMascotCelebrate 0.6s ease; }

@keyframes mmMascotCelebrate {
  0% { transform: scale(0.6) rotate(-6deg); opacity: 0; }
  55% { transform: scale(1.1) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.mm-round-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.28rem 0.85rem 0.28rem 0.32rem;
  border-radius: 999px;
  background: var(--mm-green-tint);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--mm-green-deep);
}
.mm-round-mode-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mm-card);
  color: var(--mm-green-dark);
}
.mm-round-mode-icon svg { display: block; width: 15px; height: 15px; }

.mm-round-title {
  margin: 0.2rem 0 0;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--mm-ink);
}

.mm-round-score {
  margin: 0.15rem 0 0;
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--mm-ink);
}

.mm-round-caption {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--mm-ink-soft);
}

/* BUILD 10: PREDICT, de verdeling RAAK/DICHTBIJ/MIS in de kleuren van de ronde zelf (.mm-predict-*-badges). */
.mm-round-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
}
.mm-round-stat {
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.mm-round-stat b { font-size: 0.86rem; }
.mm-round-stat-raak { background: var(--mm-green); color: var(--mm-ink); }
.mm-round-stat-dichtbij { background: rgba(43, 43, 40, 0.12); color: var(--mm-ink); }
.mm-round-stat-mis { background: var(--mm-red); color: #fff; }

.mm-round-text {
  max-width: 320px;
  margin: 0.35rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mm-ink-soft);
}
.mm-round-complete-card .xp-result-badge { margin: 0.35rem 0 0.45rem; }

/* BUILD 10: alleen na een ronde die een nieuwe mode heeft vrijgespeeld. Groen (merk), zodat de oranje
   NOG EEN RONDE de hoofdactie blijft. */
.mm-round-unlock {
  width: 100%;
  max-width: 320px;
  margin: 0 0 0.35rem;
  padding: 0.75rem 0.9rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-green);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-card);
}
.mm-round-unlock-label {
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--mm-green-deep);
}
.mm-round-unlock-mode { display: flex; align-items: center; gap: 0.7rem; }
.mm-round-unlock-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(120, 188, 117, 0.16);
  color: var(--mm-green-dark);
}
.mm-round-unlock-icon svg { display: block; width: 24px; height: 24px; }
.mm-round-unlock-text { display: flex; flex-direction: column; min-width: 0; }
.mm-round-unlock-name { font-size: 1rem; font-weight: 900; letter-spacing: 0.03em; color: var(--mm-ink); }
.mm-round-unlock-sub { font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--mm-ink-soft); }
.mm-btn-unlock {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 999px;
  background: var(--mm-green);
  color: var(--mm-ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s var(--mm-ease-out);
}
.mm-btn-unlock:active { transform: scale(0.97); }
.mm-btn-unlock:focus-visible { outline: 3px solid var(--mm-ink); outline-offset: 2px; }

/* BUILD 10: lage schermen (iPhone SE e.d.): kleinere Oedi en titel, zodat het eindscherm zonder unlock-kaart past. */
@media (max-height: 700px) {
  .mm-mascot-round { width: 92px; }
  .mm-round-title { font-size: 1.35rem; }
  .mm-round-score { font-size: 2rem; }
  .mm-round-text { margin-top: 0.2rem; font-size: 0.95rem; }
}
/* Zeer lage schermen (iPhone SE van de eerste generatie, 568 pt): alles compacter, de unlock-kaart zonder subtitel. */
@media (max-height: 600px) {
  .mm-round-complete-card { gap: 0.3rem; }
  .mm-mascot-round { width: 60px; }
  .mm-round-title { margin-top: 0; font-size: 1.25rem; }
  .mm-round-score { margin-top: 0; font-size: 1.8rem; }
  .mm-round-text { margin-top: 0.1rem; font-size: 0.9rem; }
  .mm-round-complete-card .xp-result-badge { margin: 0.15rem 0 0.25rem; }
  .mm-round-unlock { padding: 0.55rem 0.75rem 0.65rem; gap: 0.4rem; }
  .mm-round-unlock-icon { width: 38px; height: 38px; }
  .mm-round-unlock-icon svg { width: 20px; height: 20px; }
  .mm-round-unlock-sub { display: none; }
  .mm-btn-unlock { min-height: 42px; padding: 0.5rem 1rem; }
}

/* ---------- Gedeelde bounce (fysieke terugveer bij een foute drop) ---------- */

@keyframes mmBounceBack {
  0% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.mm-bounce { animation: mmBounceBack 0.3s ease; }

/* ---------- PREDICT -- schat het macroprofiel (spelmodus PREDICT) ----------
   Eigen visuele identiteit t.o.v. HERKEN (kiezen)/MACRO STACK (koppelen)/
   BATTLE (versus): PREDICT = "bouwen/schatten". Geen native <input
   type="range">-look, geen SaaS-dashboard/spreadsheet-look. VISUAL POLISH
   V1: onaangeraakt = zachte gestippelde uitnodiging, aangeraakt = een
   echte witte meterkaart met zachte schaduw; de greep (handle) is het
   enige element met een donkere rand, want dat is waar je vastpakt.
   Duidelijk "leeg tot je hem aanraakt"-startstaat (opdracht sectie 6). */

.mm-stage-predict { justify-content: center; gap: 0.5rem; }

.mm-product-hero-predict { max-width: 240px; padding: 0.2rem; gap: 0.15rem; }
.mm-product-hero-predict img { height: 168px; max-width: 240px; }
.mm-product-hero-predict .mm-product-name { font-size: 0.95rem; }
/* Lage schermen (bv. 375x620): na CHECK verschijnen per meter een
   resultaatregel + VOLGENDE; het productbeeld krimpt hier zodat er nooit
   gescrold hoeft te worden tijdens het spelen. */
@media (max-height: 700px) {
  .mm-product-hero-predict img { height: 100px; }
  .mm-stage-predict .mm-reveal-next { margin-top: 0.3rem; }
}

.mm-predict-meters {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mm-predict-meter {
  width: 100%;
  padding: 0.45rem 0.6rem 0.55rem;
  border: var(--mm-border-w) dashed var(--mm-border-dashed);
  border-radius: var(--mm-radius-md);
  background: rgba(255, 255, 255, 0.55);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* Aangeraakt: de meter wordt "echt" (solide witte kaart), maar krijgt
   bewust nog geen kleur die iets goed/fout suggereert -- dat blijft
   neutraal tot CHECK. */
.mm-predict-meter.mm-predict-meter-touched {
  border-style: solid;
  border-color: var(--mm-border-soft);
  background: var(--mm-card);
  box-shadow: var(--mm-shadow-chip);
}

.mm-predict-meter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.mm-predict-meter-label { font-size: 0.72rem; font-weight: 800; color: var(--mm-ink-soft); letter-spacing: 0.04em; white-space: nowrap; }

/* Onaangeraakte staat toont expliciet een uitnodiging, nooit "0 g" of een
   reeds ingevulde waarde -- een speler mag nooit denken dat er al een
   (impliciete) schatting staat die hij gewoon kan laten staan. */
.mm-predict-meter-value { font-size: 0.78rem; font-weight: 700; color: var(--mm-ink-soft); white-space: nowrap; }
.mm-predict-meter-touched .mm-predict-meter-value { font-size: 0.95rem; font-weight: 900; color: var(--mm-ink); }

.mm-predict-meter-track {
  position: relative;
  height: 30px;
  border-radius: 999px;
  background-color: var(--mm-neutral-soft);
  /* POLISH PASS V2: drie rustige ijkstreepjes (25 / 50 / 75 g) als
     referentiepunt; de vulling schuift er gewoon overheen. */
  background-image:
    linear-gradient(to right, transparent calc(25% - 1px), rgba(43, 43, 40, 0.14) calc(25% - 1px), rgba(43, 43, 40, 0.14) calc(25% + 1px), transparent calc(25% + 1px)),
    linear-gradient(to right, transparent calc(50% - 1px), rgba(43, 43, 40, 0.2) calc(50% - 1px), rgba(43, 43, 40, 0.2) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to right, transparent calc(75% - 1px), rgba(43, 43, 40, 0.14) calc(75% - 1px), rgba(43, 43, 40, 0.14) calc(75% + 1px), transparent calc(75% + 1px));
  background-size: 100% 44%;
  background-position: center;
  background-repeat: no-repeat;
  touch-action: none;
  cursor: pointer;
}

/* Samen boven 100 g per 100 g kan niet: rustige nadruk, geen foutkleur
   (het is een hint, geen oordeel). */
.mm-basis-label.mm-predict-sum-over { color: var(--mm-ink); }

.mm-predict-meter-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  pointer-events: none;
  transition: width 0.05s linear;
}
.mm-predict-meter-carbs .mm-predict-meter-fill { background: var(--mm-green-light); }
.mm-predict-meter-protein .mm-predict-meter-fill { background: var(--mm-green); }
.mm-predict-meter-fat .mm-predict-meter-fill { background: var(--mm-green-deep); }

/* De handle is de daadwerkelijke greep -- iets groter dan de trackhoogte
   zodat hij op een telefoon prettig vastgepakt kan worden, en pas zichtbaar
   zodra de meter voor het eerst is aangeraakt (opdracht sectie 6). */
.mm-predict-meter-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-border-strong);
  transform: translateY(-50%);
  box-shadow: var(--mm-shadow-chip);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.mm-predict-meter-touched .mm-predict-meter-handle { opacity: 1; }

/* Na CHECK: de echte waarde verschijnt als een tweede, duidelijk andere
   markering op DEZELFDE meter -- de voorspelling (handle) blijft gewoon
   staan, zodat het verschil in één oogopslag zichtbaar is (opdracht
   sectie 7), zonder tabel/spreadsheet-look. */
.mm-predict-meter-actual {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 4px;
  margin-left: -2px;
  background: var(--mm-ink);
  border-radius: 999px;
}

.mm-predict-result {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mm-ink-soft);
}

.mm-predict-result-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--mm-ink);
}

/* Harde kleursemantiek (opdracht/V2.1-regel): oranje is uitsluitend CTA,
   nooit een antwoordstatus. RAAK = groen (bevestigd goed genoeg), MIS = rood
   (duidelijk mis), DICHTBIJ = neutrale ink-toon -- expliciet GEEN oranje,
   want "redelijk dichtbij" is geen call-to-action en geen fout. */
.mm-predict-raak .mm-predict-result-badge { background: var(--mm-green); }
.mm-predict-dichtbij .mm-predict-result-badge { background: rgba(43, 43, 40, 0.12); color: var(--mm-ink); }
.mm-predict-mis .mm-predict-result-badge { background: var(--mm-red); color: #fff; }

.mm-predict-check { margin-top: 0.15rem; }
.mm-predict-check:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.mm-predict-check:disabled:active { transform: none; }

/* ---------- MYSTERY -- macro-vingerafdruk (spelmodus MYSTERY) ----------
   Eigen identiteit: de "food fingerprint" bovenaan is het sleepobject; de
   drie producten eronder zijn ruime, volledig symmetrische dropzones (geen
   enkele klasse of stijl verraadt het target). Feedback volgt het vaste
   model: neutraal (hooguit een fysieke lift), rood + shake bij fout, groen
   uitsluitend bij het bevestigde juiste product.
   VISUAL POLISH V1: de vingerafdruk is het primaire object en houdt als
   enige een donkere (STRONG) rand + kaartschaduw; de drie producten zijn
   bestemmingen en krijgen een lichtere medium rand zonder schaduw. */

.mm-stage-mystery { justify-content: center; gap: 0.6rem; }

.mm-mystery-fp {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 360px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--mm-radius-md);
}

/* Alle zichtbare kaartstijl zit op de binnenlaag, zodat die tijdens het
   slepen rond de vinger kan krimpen (de engine zet zelf translate() op de
   buitenlaag). */
.mm-fp-inner {
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-border-strong);
  border-radius: var(--mm-radius-md);
  padding: 0.5rem 0.75rem 0.6rem;
  box-shadow: var(--mm-shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.15s ease;
}

.mm-fp-basis {
  margin: 0 0 0.35rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--mm-ink-soft);
}

.mm-fp-row {
  display: grid;
  grid-template-columns: 6.3rem 1fr 3.4rem;
  align-items: center;
  gap: 0.45rem;
}
.mm-fp-row + .mm-fp-row { margin-top: 0.3rem; }

/* Labels en gramwaarden nooit afbreken (zelfde les als HERKEN/STACK). */
.mm-fp-label { font-size: 0.7rem; font-weight: 800; color: var(--mm-ink); white-space: nowrap; }
.mm-fp-value { font-size: 0.92rem; font-weight: 900; color: var(--mm-ink); text-align: right; white-space: nowrap; }

.mm-fp-track {
  height: 14px;
  background: var(--mm-neutral-soft);
  border-radius: 999px;
  overflow: hidden;
}
.mm-fp-fill { height: 100%; border-radius: 999px; }
.mm-fp-fill-carbs { background: var(--mm-green-light); }
.mm-fp-fill-protein { background: var(--mm-green); }
.mm-fp-fill-fat { background: var(--mm-green-deep); }

.mm-mystery-fp.mm-dragging { z-index: 50; cursor: grabbing; }
.mm-mystery-fp.mm-dragging .mm-fp-inner {
  transform: scale(0.62);
  box-shadow: var(--mm-shadow-lift);
}

.mm-mystery-options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mm-mystery-option {
  width: 100%;
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-border-medium);
  border-radius: var(--mm-radius-lg);
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.mm-mystery-option-head { display: flex; align-items: center; gap: 0.7rem; min-height: 78px; }
.mm-mystery-option img { width: 76px; height: 76px; object-fit: contain; pointer-events: none; flex: 0 0 auto; }
.mm-mystery-option-name {
  flex: 1;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--mm-ink);
  overflow-wrap: anywhere;
}

.mm-mystery-option.mm-hover-drop { transform: scale(1.02); border-color: var(--mm-border-strong); }
.mm-mystery-option.mm-zone-correct { border-color: var(--mm-green-dark); background: var(--mm-green-tint); }

/* Na het juiste antwoord: alleen het goede product blijft, met de
   vingerafdruk er fysiek aan vast. */
.mm-mystery-dismissed { display: none; }
.mm-mystery-solved { cursor: default; padding: 0.5rem 0.8rem 0.75rem; }
.mm-mystery-solved img { width: 88px; height: 88px; }
.mm-mystery-solved .mm-mystery-option-name { font-size: 1.1rem; }

.mm-mystery-fp.mm-mystery-attached { margin-top: 0.5rem; max-width: none; cursor: default; }
.mm-mystery-attached .mm-fp-inner { border-color: var(--mm-green); box-shadow: none; }

/* ---------- BASICS V2 -- 4/4/9 (energie per gram) ----------
   Onderdeel van BASICS, geen eigen spelmodus. Eén macro als ruim doel,
   drie energiechips eronder. Neutraal tot bevestigd: gestippelde rand,
   rood/shake bij fout (gedeelde klassen), groen uitsluitend bij correct. */

.mm-stage-energy { justify-content: center; gap: 1.1rem; }

.mm-energy-target {
  width: 92%;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  background: var(--mm-card);
  border: 3px dashed var(--mm-border-dashed);
  border-radius: var(--mm-radius-lg);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.mm-energy-target-label { font-size: 1.6rem; font-weight: 900; letter-spacing: 0.02em; color: var(--mm-ink); white-space: nowrap; }
.mm-energy-target-slot { display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; font-weight: 700; color: var(--mm-ink-soft); white-space: nowrap; }
.mm-energy-target-blank { color: var(--mm-ink-soft); }
.mm-energy-target.mm-hover-drop { transform: scale(1.03); border-style: solid; border-color: var(--mm-border-strong); }
.mm-energy-target.mm-zone-correct { border-style: solid; border-color: var(--mm-green); background: var(--mm-green-tint); }

.mm-energy-chips { display: flex; justify-content: center; gap: 0.6rem; width: 100%; }

.mm-energy-chip {
  flex: 1;
  max-width: 110px;
  height: 60px;
  border-radius: 999px;
  border: var(--mm-border-w) solid var(--mm-border-medium);
  background: var(--mm-card);
  color: var(--mm-ink);
  font-size: 1.1rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--mm-shadow-chip);
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.15s ease;
}
.mm-energy-chip:active { transform: scale(0.97); }
.mm-energy-chip.mm-dragging { cursor: grabbing; z-index: 50; border-color: var(--mm-border-strong); box-shadow: var(--mm-shadow-lift); }
.mm-energy-chip.mm-faded { opacity: 0.35; cursor: default; }
.mm-energy-chip.mm-energy-chip-placed {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 1rem;
  background: var(--mm-green);
  border-color: var(--mm-green);
  box-shadow: none;
  cursor: default;
  opacity: 1;
}

/* VISUAL POLISH V1: een "geheugenkaart" -- witte kaart met zachte
   schaduw, geen zwarte rand; het 4 • 4 • 9-getal is het ankerpunt. */
.mm-energy-recap {
  width: 100%;
  max-width: 340px;
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-border-soft);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-card);
  padding: 1.1rem 1.1rem 1.15rem;
  text-align: center;
}
.mm-energy-recap-title { margin: 0; font-size: 2.4rem; font-weight: 900; letter-spacing: 0.06em; color: var(--mm-ink); line-height: 1.1; }
.mm-energy-recap-sub { margin: 0.15rem 0 0.8rem; font-size: 0.8rem; font-weight: 700; color: var(--mm-green-deep); }
.mm-energy-recap-rows { display: flex; flex-direction: column; gap: 0.35rem; }
.mm-energy-recap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface-soft);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--mm-ink);
  white-space: nowrap;
}
.mm-energy-recap-note { margin: 0.8rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--mm-ink-soft); line-height: 1.35; }

/* ---------- DETECTIVE -- vier verdachten, drie clues, één product ----------
   VISUAL POLISH V1: zachte kaarttaal zoals de rest van Macro Mania.
   Eigen identiteit via de cluekaart (dossierkaart met FoodieQ als
   detective, CLUE-teller als label-pil), de 2x2-verdachten en de
   afvallerzone. FoodikuDetective.png is exact het aangeleverde bestand:
   prominent op de intro, klein op de cluekaart, middelgroot bij CASE
   CLOSED -- nergens als achtergrond/watermerk.
   Kleurmodel ongewijzigd: neutraal tot bevestigd, rood/shake bij een foute
   eliminatie, groen uitsluitend bij een bevestigd juiste stap. Een
   afgevallen verdachte krijgt een neutrale (grijze, doorgestreepte) staat --
   geen rood, want die eliminatie was juist correct. */

.mm-stage-detective { justify-content: center; gap: 0.55rem; }

/* V1.1: de eliminatiezinnen zijn langer, dus de kleine FoodieQ staat naast
   de "CLUE x/3"-regel en de zin krijgt de volle kaartbreedte (max 2 regels
   op 320-430 px). display: contents laat de body-kinderen direct in het
   grid meedoen zonder extra markup. */
.mm-det-clue {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "char meta" "text text" "hint hint";
  align-items: center;
  column-gap: 0.55rem;
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-border-soft);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-card);
  padding: 0.45rem 0.8rem 0.6rem;
}
.mm-det-clue-character { grid-area: char; width: 42px; height: 42px; object-fit: contain; pointer-events: none; }
.mm-det-clue-body { display: contents; }
.mm-det-clue-meta {
  grid-area: meta;
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--mm-ink-soft);
  white-space: nowrap;
}
.mm-det-clue-step {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--mm-surface-soft);
  color: var(--mm-ink);
  font-weight: 900;
}
.mm-det-clue-text { grid-area: text; margin: 0.35rem 0 0; font-size: 1.05rem; font-weight: 800; line-height: 1.28; color: var(--mm-ink); }
.mm-det-clue-hint { grid-area: hint; margin: 0.25rem 0 0; font-size: 0.78rem; font-weight: 600; color: var(--mm-ink-soft); }
/* Smalste telefoons: de langste relatiezin ("... evenveel of meer
   koolhydraten dan eiwit heeft.") blijft zo op 2 regels. */
@media (max-width: 359px) {
  .mm-det-clue-text { font-size: 0.96rem; }
}

@keyframes mmDetClueIn {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.mm-det-clue-in .mm-det-clue-text { animation: mmDetClueIn 0.25s ease; }

.mm-det-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

.mm-det-suspect {
  position: relative;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.45rem 0.45rem 0.5rem;
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-border-medium);
  border-radius: var(--mm-radius-md);
  box-shadow: var(--mm-shadow-chip);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.2s ease, filter 0.2s ease;
}
.mm-det-suspect img { width: 70px; height: 70px; object-fit: contain; pointer-events: none; }
.mm-det-suspect-name { font-size: 0.85rem; font-weight: 800; line-height: 1.15; text-align: center; color: var(--mm-ink); overflow-wrap: anywhere; }
.mm-det-suspect.mm-dragging { z-index: 50; cursor: grabbing; border-color: var(--mm-border-strong); box-shadow: var(--mm-shadow-lift); }

.mm-det-suspect.mm-det-eliminated {
  opacity: 0.38;
  filter: grayscale(1);
  background: transparent;
  border-style: dashed;
  border-color: var(--mm-border-medium);
  box-shadow: none;
  cursor: default;
}
.mm-det-eliminated .mm-det-suspect-name { text-decoration: line-through; }
.mm-det-eliminated::after {
  content: "✕";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  font-weight: 900;
  color: var(--mm-ink);
  pointer-events: none;
}

.mm-det-bin {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: var(--mm-border-w) dashed var(--mm-border-medium);
  border-radius: var(--mm-radius-lg);
  background: var(--mm-neutral-soft);
  color: var(--mm-ink-soft);
  font-weight: 800;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mm-det-bin-icon { font-size: 1.3rem; }
.mm-det-bin-text { font-size: 0.95rem; letter-spacing: 0.08em; }
.mm-det-bin.mm-hover-drop { transform: scale(1.02); border-style: solid; border-color: var(--mm-border-strong); background: var(--mm-card); color: var(--mm-ink); }
.mm-det-bin.mm-zone-correct { border-style: solid; border-color: var(--mm-green); background: var(--mm-green-tint); color: var(--mm-green-deep); }

.mm-det-closed-head { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.mm-det-closed-character { width: 84px; height: 84px; object-fit: contain; pointer-events: none; flex: 0 0 auto; }
.mm-det-closed-title { margin: 0; font-size: 1.6rem; font-weight: 900; letter-spacing: 0.04em; color: var(--mm-ink); white-space: nowrap; }

.mm-det-closed-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--mm-card);
  border: var(--mm-border-w) solid var(--mm-green);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-card);
  padding: 0.6rem 0.8rem 0.75rem;
}
.mm-det-closed-product { display: flex; align-items: center; gap: 0.7rem; }
.mm-det-closed-product img { width: 72px; height: 72px; object-fit: contain; pointer-events: none; flex: 0 0 auto; }
.mm-det-closed-name { margin: 0; font-size: 1.1rem; font-weight: 900; color: var(--mm-ink); }
.mm-det-closed-fp { border: none; box-shadow: none; padding: 0.1rem 0; background: transparent; }

.mm-det-closed-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.mm-det-closed-checks li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 800; color: var(--mm-ink); }
.mm-det-check { color: var(--mm-green-dark); font-size: 1rem; flex: 0 0 auto; }
.mm-det-check-text { flex: 1; min-width: 0; }
.mm-det-check-value { color: var(--mm-ink-soft); font-weight: 700; white-space: nowrap; }

.mm-det-intro { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.mm-det-intro-character { width: 176px; height: 176px; object-fit: contain; pointer-events: none; }
.mm-det-intro-title { margin: 0; font-size: 1.45rem; font-weight: 900; line-height: 1.25; color: var(--mm-ink); }
.mm-det-intro-text { margin: 0.4rem 0 0; font-size: 1rem; font-weight: 600; color: var(--mm-ink-soft); }
/* Lage schermen (bv. 375x620): de detective blijft prominent maar laat
   ruimte voor de drie introregels en START DE ZAAK. */
@media (max-height: 660px) {
  .mm-det-intro-character { width: 140px; height: 140px; }
}

/* ---------- Rustige beweging (VISUAL POLISH V1) ----------
   Alleen decoratieve animaties vallen weg; functionele feedback (rood
   schudden bij een fout) blijft, want die draagt betekenis. */
@media (prefers-reduced-motion: reduce) {
  .mm-mascot-round { animation: none; }
  .mm-det-clue-in .mm-det-clue-text { animation: none; }
  .mm-btn-primary, .mm-btn-secondary, .mm-hub-card, .mm-btn-unlock { transition: none; }
}

/* FOODIKU NEXT (GO 1): de rij met terugknop (36 px, NEXT .btn-back) is hoger
   dan de oude losse rondeteller van het prototype. Op korte schermen
   (<= 700 px hoog) compenseert een iets kleinere bovenmarge van het
   speelscherm dat, zodat ook de hoogste reveals (MATCH/PREDICT) zonder
   scroll blijven passen. De knop zelf blijft 36 px (tikbaar). */
@media (max-height: 700px) {
  .mm-screen-play { padding-top: calc(0.3rem + var(--safe-top)); }
}

/* FOODIKU NEXT (GO 2): tijdens de 6 game-modes staat de live Pizza-badge
   bovenin (standaard FOODIKU-regel body.pizza-live-active: +42 px boven het
   speelscherm). Op korte schermen (<= 660 px hoog) compenseren iets kleinere
   productfoto's dat, zodat de hoogste reveals (MATCH/PREDICT/STACK) zonder
   scroll blijven passen. Alleen Macro Mania, alleen met zichtbare badge. */
@media (max-height: 660px) {
  body.pizza-live-active .mm-screen-play .mm-product-hero img { height: 216px; }
  body.pizza-live-active .mm-screen-play .mm-product-hero-compact img { height: 170px; }
  body.pizza-live-active .mm-screen-play .mm-product-hero-predict img { height: 64px; }
}

/* GO 2: idem voor iPhone-formaten 701-880 px hoog (bv. 375x812 met safe-
   area): alleen de PREDICT-reveal kwam daar met badge dicht (4 px) bij de
   home-indicatorzone; een iets kleinere productfoto geeft weer ruime marge.
   (<= 700 px blijft de al bestaande 100 px-regel hierboven leidend.) */
@media (min-height: 701px) and (max-height: 880px) {
  body.pizza-live-active .mm-screen-play .mm-product-hero-predict img { height: 140px; }
}