/* ============================================================
   LUMIO — styles.css
   Mobile-first · Direction 1: Golden Hour
   Fredoka One (brand) + Nunito (body) · Violet + Amber + Cream
   ============================================================ */

/* ── Fonts — zelf gehost (Sprint 80.3) ──────────────────────
   Voorheen via fonts.googleapis.com; in een kinderapp willen we
   GEEN requests naar derden vanaf kinderschermen (Apple Kids
   Category / AVG — ook een font-CDN logt IP-adressen). Latin-
   subset dekt Nederlands volledig (ë, é, ï, €). Nunito is één
   variabel bestand voor alle gewichten 400–900; italics werden
   ook vroeger al door de browser gesynthetiseerd. Bestanden
   krijgen de 30-dagen cache-header uit firebase.json. */
/* Sprint 112 — Grandstander (variabel, 400-900): de nieuwe merkletter
   van de Confetti-speeltuin-stijl. Eén bestand dekt alle gewichten. */
@font-face {
  font-family: 'Grandstander';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/grandstander-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fredoka-one-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/nunito-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  --purple:        #7c3aed;
  --purple-dark:   #4c1d95;
  --purple-light:  #9b6ae8;
  --purple-pale:   #ede9fe;

  --gold:          #f59e0b;
  --gold-dark:     #b45309;
  --gold-light:    #fcd34d;
  --gold-pale:     #fffbeb;

  --teal:          #0d9488;
  --teal-dark:     #0f766e;
  --teal-light:    #2dd4bf;
  --teal-pale:     #f0fdfa;

  --bg:            #fffbeb;
  --bg-card:       #ffffff;
  --bg-muted:      #fef3c7;

  --text:          #1c1039;
  --text-muted:    #6b46c1;

  --success:       #059669;
  --success-bg:    #ecfdf5;
  --success-dark:  #065f46;
  --error:         #dc2626;
  --error-bg:      #fef2f2;
  --error-dark:    #991b1b;

  /* legacy aliases */
  --forest:        var(--purple);
  --forest-light:  var(--purple-light);
  --river:         var(--teal);
  --river-light:   var(--teal-light);
  --campfire:      var(--gold);
  --campfire-light:var(--gold-light);
  --cream:         var(--bg);
  --cream-dark:    var(--bg-muted);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow:    0 2px 14px rgba(124,58,237,0.10);
  --shadow-lg: 0 6px 28px rgba(76,29,149,0.16);

  /* ── Sprint 112 — Confetti-speeltuin design tokens ──────────
     Gekozen richting (Tim, aug 2026): felle vakkleuren, dikke
     inkt-outlines, blok-schaduwen, Grandstander als merkletter.
     Stap 1+2 past dit toe op de oefenschermen; landing en home
     volgen in latere stappen. */
  --ink:            #1E2749;
  --font-speels:    'Grandstander', 'Nunito', sans-serif;
  --confetti-lucht: linear-gradient(180deg, #BDE9FF 0%, #E4F7FF 55%, #FFF6D6 100%);

  --vak-lezen:      #FF5D8F;
  --vak-rekenen:    #23C4A7;
  --vak-spelling:   #FFB800;
  --vak-snellezen:  #FF7A29;
  --vak-schrijven:  #9D6BFF;
  --vak-engels:     #3E9BFF;

  --rand-ink:       3px solid var(--ink);
  --schaduw-blok:   4px 4px 0 var(--ink);
  --schaduw-blok-s: 3px 3px 0 var(--ink);
  /* Ingedrukte staat: knop zakt 2px en de schaduw krimpt mee. */
  --schaduw-blok-in: 2px 2px 0 var(--ink);
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  /* Sprint 115 — Grandstander en de lucht zijn nu de standaard voor
     de HELE app (was: alleen de oefen-/landings-/homeschermen). */
  font-family: var(--font-speels);
  font-size: 18px;
  color: var(--text);
  background: var(--confetti-lucht);
  -webkit-font-smoothing: antialiased;
}

/* ── Utility ────────────────────────────────────────────────── */
.hidden {
  display: none !important;
}

/* ── Screens ────────────────────────────────────────────────── */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  /* Sprint 115 — elk scherm op de confetti-lucht. */
  background: var(--confetti-lucht);
  z-index: 1;
}

.screen.active {
  display: block;
}

.screen-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 20px 40px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── App Header ─────────────────────────────────────────────── */
.app-header {
  background: var(--header-bg, linear-gradient(140deg, #7c3aed 0%, #5b21b6 55%, #4c1d95 100%));
  color: white;
  border-radius: var(--radius-lg);
  padding: 28px 20px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--header-shadow, 0 8px 28px rgba(76,29,149,0.40));
}

.app-header::before {
  content: '✦  ✦  ✦  ✦  ✦  ✦  ✦  ✦';
  position: absolute;
  bottom: 7px;
  left: 0;
  right: 0;
  font-size: 10px;
  opacity: 0.2;
  letter-spacing: 8px;
  text-align: center;
  color: #fde68a;
}

.app-header::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(253,230,138,0.08);
  pointer-events: none;
}

/* ── Logo group ─────────────────────────────────────────────── */
.app-logo-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.app-logo-lockup {
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.28));
  flex-shrink: 0;
}

.balance-display {
  font-size: 24px;
  font-weight: 800;
  color: var(--gold-light);
  display: inline-block;
  background: rgba(255,255,255,0.12);
  padding: 7px 20px;
  border-radius: 50px;
  border: 1.5px solid rgba(255,200,90,0.35);
  letter-spacing: -0.3px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ── Level Badges ───────────────────────────────────────────── */
.level-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.level-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow);
  border-left: 5px solid var(--purple);
}

.level-badge--speed {
  border-left-color: var(--teal);
}

.level-badge__icon {
  font-size: 28px;
  line-height: 1;
}

.level-badge__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.level-badge__rank {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Nunito', sans-serif;
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
  text-decoration: none;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: linear-gradient(160deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--text);
  box-shadow: 0 4px 0 var(--gold-dark), 0 6px 16px rgba(245,166,35,0.3);
}
.btn--primary:hover {
  filter: brightness(1.05);
}
.btn--primary:active {
  box-shadow: 0 2px 0 var(--gold-dark), 0 3px 8px rgba(245,166,35,0.2);
  transform: translateY(2px) scale(0.98);
}

.btn--secondary {
  background: linear-gradient(160deg, var(--purple-light) 0%, var(--purple) 100%);
  color: white;
  box-shadow: 0 4px 0 var(--purple-dark), 0 6px 16px rgba(108,93,211,0.28);
}
.btn--secondary:hover {
  filter: brightness(1.08);
}
.btn--secondary:active {
  box-shadow: 0 2px 0 var(--purple-dark);
  transform: translateY(2px) scale(0.98);
}

.btn--outline {
  background: var(--bg-card);
  color: var(--text-muted);
  border: 2px solid var(--bg-muted);
  box-shadow: var(--shadow);
  font-size: 17px;
}
.btn--outline:hover {
  border-color: var(--purple-light);
  background: var(--purple-pale);
  color: var(--purple);
}

.btn--accent {
  background: linear-gradient(160deg, var(--teal-light) 0%, var(--teal) 100%);
  color: white;
  box-shadow: 0 4px 0 var(--teal-dark), 0 6px 16px rgba(0,180,166,0.28);
}
.btn--accent:hover {
  filter: brightness(1.08);
}

.btn--danger {
  background: var(--error);
  color: white;
  box-shadow: 0 4px 0 var(--error-dark);
}
.btn--danger:hover {
  filter: brightness(1.08);
}

.btn--back {
  background: rgba(255,255,255,0.7);
  color: var(--purple);
  border: 2px solid var(--purple-pale);
  font-size: 15px;
  min-height: 44px;
  width: auto;
  padding: 8px 16px;
  display: inline-block;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}
.btn--back:hover {
  background: var(--purple-pale);
}

/* Slightly different fill so the "previous question" button doesn't
   visually match the "leave session" button right next to it. */
.btn--prev-question {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}
.btn--prev-question:hover {
  background: #fde68a !important;
}

.btn--settings {
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 14px;
  min-height: 44px;
  width: auto;
  padding: 8px 16px;
  display: inline-block;
  align-self: center;
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.btn--settings:hover {
  border-color: var(--purple-light);
  color: var(--purple);
}

.btn--close {
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  min-height: 40px;
  width: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn--close:hover {
  background: var(--bg-muted);
}

/* ── Home screen layout ─────────────────────────────────────── */
.home-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn--large {
  min-height: 80px;
  font-size: 22px;
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.btn--large::after {
  content: '→';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  opacity: 0.5;
  transition: right 0.15s, opacity 0.15s;
}

.btn--large:hover::after {
  right: 16px;
  opacity: 0.9;
}


.home-secondary-buttons {
  display: flex;
  gap: 10px;
}

.home-secondary-buttons .btn {
  flex: 1;
  min-height: 56px;
  font-size: 16px;
}

/* ── Screen nav ─────────────────────────────────────────────── */
.screen-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.screen-title {
  font-size: 22px;
  font-weight: 800;
  flex: 1;
  text-align: right;
  color: var(--text);
}

.screen-level-badge {
  background: var(--purple);
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
}

/* ── Reading card ───────────────────────────────────────────── */
.reading-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(108,93,211,0.08);
  position: relative;
}

/* Sprint 4.1 — Read-aloud toggle button. Sits in the top-right of the
   reading card so it's discoverable but doesn't compete with the text.
   Pulses subtly while playing so the kid knows audio is active. */
.btn-read-aloud {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--purple-pale);
  border: 1.5px solid var(--purple-light);
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--purple);
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.btn-read-aloud:hover {
  background: rgba(124,58,237,0.15);
  border-color: var(--purple);
}
.btn-read-aloud:active {
  transform: scale(0.96);
}
.btn-read-aloud__icon {
  font-size: 15px;
}
.btn-read-aloud--playing {
  background: var(--purple);
  color: white;
  border-color: var(--purple);
  animation: read-aloud-pulse 1.8s ease-in-out infinite;
}
@keyframes read-aloud-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(124,58,237,0); }
}

.text-type-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.reading-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--purple);
  margin-bottom: 14px;
}

.reading-text {
  font-size: 22px;
  line-height: 1.75;
  color: var(--text);
}

/* ── Loading state ──────────────────────────────────────────── */
.loading-state {
  text-align: center;
  padding: 40px 30px;
  font-size: 20px;
  color: var(--text-muted);
}

/* ── Running fox loader ─────────────────────────────────────── */
.fox-track {
  position: relative;
  width: 240px;
  height: 50px;
  margin: 0 auto 16px;
  border-bottom: 3px dashed rgba(0, 0, 0, 0.18);
}

.fox-runner {
  position: absolute;
  bottom: 2px;
  left: 0;
  display: inline-block;
  animation: fox-run 2.6s ease-in-out infinite;
}

.fox-emoji {
  display: inline-block;
  font-size: 38px;
  line-height: 1;
  animation: fox-bounce 0.42s ease-in-out infinite;
}

@keyframes fox-run {
  0%, 100% { left: 0%;                     transform: scaleX(1); }
  48%      { left: calc(100% - 38px);      transform: scaleX(1); }
  50%      { left: calc(100% - 38px);      transform: scaleX(-1); }
  98%      { left: 0%;                     transform: scaleX(-1); }
}

@keyframes fox-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .fox-runner, .fox-emoji { animation: none; }
}

.loading-progress {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 6px;
  min-height: 20px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* ── Comp actions ───────────────────────────────────────────── */
.comp-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Sprint 5.1 — Desktop side-by-side comprehension layout ──
   Kicks in at ≥1024px (tablet landscape + laptops + desktops).
   While answering questions, the kid sees the story on the left
   (60%) and the question UI on the right (40%) — no more scrolling
   back to remember what the text said.

   Mobile / tablet-portrait fall through to the existing two-screen
   stacked flow. The body.desktop-comp-split class is only added by
   _updateDesktopCompSplit() when both conditions hold (desktop
   width + currently on the question screen). */
@media (min-width: 1024px) {
  body.desktop-comp-split #screen-comprehension,
  body.desktop-comp-split #screen-comprehension-question {
    /* Both screens visible simultaneously instead of swapping. */
    display: block;
    position: fixed;
    top: 0; bottom: 0;
    overflow-y: auto;
  }
  body.desktop-comp-split #screen-comprehension {
    left: 0;
    right: 40vw;
    border-right: 1px solid rgba(108, 93, 211, 0.15);
  }
  body.desktop-comp-split #screen-comprehension-question {
    left: 60vw;
    right: 0;
  }
  /* The default .screen-inner caps at 600px and centres — at split
     widths we want the inner content to use the available pane. */
  body.desktop-comp-split #screen-comprehension .screen-inner,
  body.desktop-comp-split #screen-comprehension-question .screen-inner {
    max-width: none;
    padding: 20px 28px 40px;
  }
  /* "Naar de vragen" and "← Tekst" buttons are redundant when both
     panes are visible. Hide them on the split layout only. */
  body.desktop-comp-split #btn-start-questions,
  body.desktop-comp-split #btn-back-to-text {
    display: none;
  }
  /* The text-screen back button still navigates home — leave it
     visible. */
}

/* ── Question screen ────────────────────────────────────────── */
.question-progress {
  font-size: 15px;
  font-weight: 800;
  color: var(--purple);
  background: var(--purple-pale);
  padding: 7px 16px;
  border-radius: 20px;
  display: inline-block;
}

.question-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(108,93,211,0.08);
}

.question-text {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text);
}

/* Phase A — vocab question layout: the source sentence (context) sits above
   the actual question in a softer typographic style so kids can scan it
   while reading the question. */
.vocab-context {
  display: block;
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  color: var(--text-muted);
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(108, 93, 211, 0.06);
  border-left: 3px solid rgba(108, 93, 211, 0.35);
  border-radius: 6px;
  line-height: 1.45;
}
.vocab-q {
  display: block;
}

/* Result-score breakdown when both vocab + comprehension were played */
.result-score-row {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 2px 0;
}
.result-score-row b { color: var(--purple); font-weight: 900; }

.answer-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn--answer {
  background: var(--bg-card);
  color: var(--text);
  border: 3px solid var(--bg-muted);
  font-size: 18px;
  font-weight: 700;
  min-height: 64px;
  text-align: left;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  width: 100%;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
}

.btn--answer:hover:not(:disabled) {
  border-color: var(--purple-light);
  background: var(--purple-pale);
}

.btn--answer:active:not(:disabled) {
  transform: scale(0.98);
}

.btn--answer.correct {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success-dark);
  animation: correct-glow 0.5s ease-out;
}

.btn--answer.wrong {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error-dark);
}

.btn--answer.correct::after {
  content: ' ✓';
  font-weight: 900;
}

.btn--answer.wrong::after {
  content: ' ✗';
  font-weight: 900;
}

.answer-feedback {
  background: var(--purple-pale);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  text-align: center;
  border-left: 4px solid var(--purple);
}

.feedback-message {
  font-size: 20px;
  font-weight: 700;
  color: var(--purple);
}

/* "💡 Hoe?" explanation shown under the wrong-answer message. Soft yellow
   so it reads as a hint, not a punishment. Kid-friendly font sizing. */
.feedback-explanation {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #92400e;
  line-height: 1.45;
  text-align: left;
}

/* Sprint 5.2 — Lucas explanation bubble. When the explanation slot
   contains the Lucas-explanation layout, drop the parent's padding
   and background so we own the visual treatment end-to-end. */
.feedback-explanation:has(.lucas-explanation) {
  background: transparent;
  border-left: none;
  padding: 0;
}
.lucas-explanation {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: #fef3c7;
  border: 1.5px solid #fcd34d;
  border-radius: 14px;
}
.lucas-explanation__fox {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Subtle nod — looks like Lucas is gesturing while explaining. */
  animation: lucas-explain-bob 2.4s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes lucas-explain-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-2px) rotate(-3deg); }
  75%      { transform: translateY(-2px) rotate(3deg); }
}
.lucas-explanation__bubble {
  flex: 1;
  position: relative;
  background: white;
  border: 1.5px solid #fcd34d;
  border-radius: 12px;
  padding: 10px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #713f12;
  line-height: 1.45;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
/* Speech-bubble tail pointing at Lucas — two pseudo-elements (border + fill). */
.lucas-explanation__bubble::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 14px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-right: 10px solid #fcd34d;
  border-bottom: 8px solid transparent;
}
.lucas-explanation__bubble::after {
  content: '';
  position: absolute;
  left: -7px;
  top: 14px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-right: 10px solid white;
  border-bottom: 8px solid transparent;
}
.lucas-explanation__icon {
  font-size: 16px;
  line-height: 1.3;
  flex: 0 0 auto;
}
.lucas-explanation__text {
  flex: 1;
}
/* Sprint 18 — step-paced reveal of the explanation. Each step fades in
   with a staggered animation-delay set inline (700 ms × index). When
   there's only one step the rendered output is identical to the old
   single-block bubble, just wrapped in a span (no visible difference). */
.lucas-step {
  display: block;
  opacity: 0;
  animation: lucas-step-in 350ms ease-out forwards;
}
.lucas-step + .lucas-step {
  margin-top: 4px;
}
@keyframes lucas-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 380px) {
  /* Tighter on small phones — keep the bubble + Lucas in one row but
     shrink Lucas a bit. */
  .lucas-explanation__fox { flex: 0 0 42px; }
  .lucas-explanation__fox .lucas-svg { width: 42px !important; height: 42px !important; }
  .lucas-explanation__bubble { font-size: 13px; padding: 8px 10px; }
}

/* ── Result screen ──────────────────────────────────────────── */
.result-screen {
  align-items: center;
  text-align: center;
  justify-content: center;
  padding-top: 20px;
}

.result-icon {
  font-size: 72px;
  line-height: 1;
  margin-bottom: 4px;
  animation: result-bounce 0.6s cubic-bezier(0.175,0.885,0.32,1.4);
  display: block;
}

@keyframes result-bounce {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  80%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.result-title {
  font-size: 30px;
  font-weight: 900;
  color: var(--purple);
}

.result-score {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-muted);
}

.result-earned {
  font-size: 38px;
  font-weight: 900;
  color: var(--gold-dark);
  background: var(--gold-pale);
  padding: 12px 28px;
  border-radius: 50px;
  border: 2px solid rgba(245,166,35,0.3);
}

/* Sprint 44 — XP earned pill, mirrors the home XP chip palette
   (greens) so kids visually link the two. Smaller than the coins
   pill since XP is the secondary signal; coins are the immediate
   reward, XP is the long-term ledger. */
.result-xp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #059669;
  border: 2px solid rgba(5, 150, 105, 0.25);
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.result-xp[hidden] { display: none; }

.result-balance {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 2px;
}

.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.result-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.level-progress-area {
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(108,93,211,0.08);
}

.level-progress-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.progress-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.progress-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bg-muted);
  background: var(--bg);
}

.progress-dot--perfect {
  background: var(--success);
  border-color: var(--success);
}

.progress-dot--near {
  background: var(--gold);
  border-color: var(--gold);
}

.progress-dot--poor {
  background: var(--error);
  border-color: var(--error);
}

/* ── Side level tracker (nav bar dots) ──────────────────────── */
.level-tracker {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-left: auto;
  padding: 5px 10px;
  background: rgba(255,255,255,0.75);
  border-radius: 20px;
  border: 1px solid var(--bg-muted);
}

.tracker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-muted);
  background: transparent;
  flex-shrink: 0;
}

.tracker-dot--perfect {
  background: var(--success);
  border-color: var(--success);
}

.tracker-dot--near {
  background: var(--gold);
  border-color: var(--gold);
}

.tracker-dot--poor {
  background: var(--error);
  border-color: var(--error);
}

/* ── Comprehension paragraphs ───────────────────────────────── */
.comp-paragraph {
  margin: 0 0 1em 0;
  line-height: 1.75;
}
.comp-paragraph:last-child {
  margin-bottom: 0;
}

/* ── Word definition popup ──────────────────────────────────── */
.word-clickable {
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}

.word-clickable:hover {
  background: rgba(108,93,211,0.12);
}

.word-def-popup {
  position: absolute;
  z-index: 500;
  background: var(--purple-dark);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.4;
  max-width: 240px;
  box-shadow: 0 4px 20px rgba(76,61,179,0.4);
  pointer-events: none;
}

.word-def-popup strong {
  color: var(--gold-light);
}

.word-def-loading {
  opacity: 0.8;
  font-style: italic;
}

/* ── Passcode question styling ──────────────────────────────── */
/* Sprint 3.2 — PIN input styling. Large, centered, wide letter-
   spacing so the 4 digits read clearly. Mobile inputmode="numeric"
   triggers the numeric keypad. */
.passcode-pin-input {
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.6em;
  font-family: 'Courier New', monospace;
  padding-left: 0.6em;  /* compensate letter-spacing on the trailing edge */
}

.passcode-question {
  font-size: 20px;
  font-weight: 800;
  color: var(--purple);
  background: var(--purple-pale);
  padding: 12px 16px;
  border-radius: 12px;
  text-align: center;
  margin: 8px 0 16px;
}

/* Sprint 52 — PIN reset link. Quiet, link-styled — deliberately not a
   prominent button so a kid scanning the modal reaches for the big OK
   or Annuleren instead. Sits under the action buttons so the primary
   flow stays visually dominant. */
.passcode-forgot {
  display: block;
  margin: 14px auto 0;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
}
.passcode-forgot:hover { opacity: 0.75; }
.passcode-forgot:disabled { opacity: 0.5; cursor: wait; }

/* ── Speed reading screen ───────────────────────────────────── */
.speed-ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
  text-align: center;
  padding: 30px 0;
}

.speed-ready-icon {
  font-size: 64px;
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.speed-ready h2 {
  font-size: 28px;
  font-weight: 900;
  color: var(--teal);
}

.speed-ready p {
  font-size: 18px;
  color: var(--text-muted);
}

.speed-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 300px;
}

.countdown-number {
  font-size: 130px;
  font-weight: 900;
  color: var(--gold);
  animation: pulse-count 0.9s ease-in-out;
  line-height: 1;
  text-shadow: 0 4px 16px rgba(245,166,35,0.4);
}

@keyframes pulse-count {
  0%   { transform: scale(0.4); opacity: 0; }
  55%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.speed-word-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 300px;
  gap: 30px;
}

.speed-word {
  font-size: 56px;
  font-weight: 900;
  color: var(--text);
  text-align: center;
  animation: word-flash 0.2s ease-out;
  padding: 0 10px;
}

@keyframes word-flash {
  from { transform: scale(0.75); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.speed-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.speed-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-muted);
  transition: background 0.2s;
}

.speed-dot.done {
  background: var(--teal);
}

/* ── Recall screen ──────────────────────────────────────────── */
.recall-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--text);
  text-align: center;
}

.recall-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 17px;
  margin-top: -8px;
}

.word-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.btn--word {
  background: var(--bg-card);
  color: var(--text);
  border: 3px solid var(--bg-muted);
  font-size: 17px;
  font-weight: 700;
  min-height: 64px;
  border-radius: var(--radius-md);
  width: 100%;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  padding: 10px 6px;
  text-align: center;
  line-height: 1.2;
}

.btn--word:hover {
  border-color: var(--teal-light);
  background: var(--teal-pale);
}

.btn--word.selected {
  background: var(--teal);
  border-color: var(--teal-dark);
  color: white;
}

.btn--word.result-correct {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success-dark);
}

.btn--word.result-missed {
  background: var(--gold-pale);
  border-color: var(--gold);
  color: var(--gold-dark);
  opacity: 0.85;
}

.btn--word.result-distractor {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error-dark);
}

/* ── Speed result detail ────────────────────────────────────── */
.speed-result-detail {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow);
  width: 100%;
  font-size: 16px;
}

.speed-result-detail p {
  margin-bottom: 6px;
  color: var(--text-muted);
}

.speed-result-detail strong {
  color: var(--text);
}

/* ── History screen ─────────────────────────────────────────── */
.history-section-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 2px solid var(--bg-muted);
  padding-bottom: 8px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 4px;
  gap: 8px;
}

.history-day-header__label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: capitalize;
}

.history-day-header__time {
  font-size: 13px;
  font-weight: 800;
  color: var(--purple);
  background: var(--purple-pale);
  padding: 3px 10px;
  border-radius: 20px;
}

.history-row {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  gap: 10px;
}

.history-row__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.history-row__title {
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-row__subtitle {
  color: var(--text-muted);
  font-size: 13px;
}

.history-row__amount {
  font-size: 17px;
  font-weight: 800;
  flex-shrink: 0;
}

.history-row__amount.positive { color: var(--success-dark); }
.history-row__amount.negative { color: var(--error-dark); }
.history-row__amount.earned   { color: var(--gold-dark); }

.empty-state {
  color: var(--text-muted);
  text-align: center;
  padding: 20px;
  font-style: italic;
}

/* ── Modals ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,16,64,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-box {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 26px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(76,61,179,0.3);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid rgba(108,93,211,0.12);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.modal-header h2 {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
}

.modal-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-section--danger h3 {
  color: var(--error);
  font-size: 17px;
}

.modal-section--danger p {
  color: var(--text-muted);
  font-size: 15px;
}

.modal-divider {
  border: none;
  border-top: 2px solid var(--bg-muted);
  margin: 0;
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-md);
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  color: var(--text);
  background: var(--bg-card);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(108,93,211,0.15);
}

.form-hint {
  font-size: 14px;
  color: var(--text-muted);
}

.error-hint {
  color: var(--error);
  font-weight: 700;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--purple);
}

/* ── Level-up overlay ───────────────────────────────────────── */
.levelup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,16,64,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  flex-direction: column;
}

.levelup-content {
  text-align: center;
  z-index: 201;
  animation: levelup-pop 0.55s cubic-bezier(0.175,0.885,0.32,1.275);
}

@keyframes levelup-pop {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.levelup-emoji {
  font-size: 100px;
  line-height: 1;
  display: block;
  animation: float 2s ease-in-out infinite;
}

.levelup-title {
  font-size: 52px;
  font-weight: 900;
  color: var(--gold-light);
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  margin: 12px 0 8px;
}

.levelup-subtitle {
  font-size: 26px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* ── Confetti ───────────────────────────────────────────────── */
#confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 199;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -16px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── Glow animation for correct answer ─────────────────────── */
@keyframes correct-glow {
  0%   { box-shadow: 0 0 0 0 rgba(0,200,117,0.6); }
  50%  { box-shadow: 0 0 0 10px rgba(0,200,117,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(0,200,117,0); }
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 360px) {
  .app-title { font-size: 28px; }
  .balance-display { font-size: 28px; }
  .speed-word { font-size: 44px; }
  .countdown-number { font-size: 96px; }
  .btn--large { font-size: 19px; min-height: 68px; }
  .word-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .btn--word { font-size: 15px; }
}

@media (min-height: 800px) {
  .speed-ready { padding: 50px 0; }
  .speed-countdown { min-height: 400px; }
  .speed-word-display { min-height: 400px; }
}

/* ── Profile indicator (home header) ────────────────────────── */
.profile-indicator {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.1px;
  min-height: 18px;
  margin-bottom: 6px;
}

/* ── Home tertiary buttons ──────────────────────────────────── */
.home-tertiary-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.home-tertiary-buttons .btn--settings {
  flex: 1;
  text-align: center;
}

/* ── Math problem card ──────────────────────────────────────── */
.math-problem-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(108,93,211,0.08);
  text-align: center;
}

.math-problem-text {
  font-size: 32px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.4;
}

/* ── Phase D: visual problem formats ───────────────────────── */

/* Emoji rows for plaatjessommen — large emojis with consistent spacing
   so kids can count them at a glance. */
.math-emoji-row {
  display: inline-block;
  font-size: 28px;
  letter-spacing: 4px;
  line-height: 1;
  vertical-align: middle;
}
.math-op {
  font-family: 'Fredoka One', cursive;
  font-size: 30px;
  font-weight: 900;
  color: var(--purple);
  vertical-align: middle;
  margin: 0 4px;
}

/* Analog clock SVG */
.math-clock {
  display: block;
  margin: 0 auto 8px;
}

/* Number line SVG */
.math-numberline {
  display: block;
  margin: 0 auto 8px;
  max-width: 100%;
  height: auto;
}

/* Prompt text under a visual (clock, number line) — slightly smaller
   so it doesn't compete with the visual itself. */
.math-prompt {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-top: 6px;
}

/* On very narrow screens the number line text label can crowd. */
@media (max-width: 380px) {
  .math-emoji-row { font-size: 24px; letter-spacing: 3px; }
  .math-op        { font-size: 26px; }
  .math-prompt    { font-size: 18px; }
}

/* ── Phase E: breuken visuals ──────────────────────────────── */
.math-pie {
  display: block;
  margin: 0 auto 8px;
}

/* Pair of pies side-by-side for fraction comparison. */
.math-fraction-pair {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;
}
.math-fraction-pair__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.math-fraction-pair__label {
  font-family: 'Fredoka One', cursive;
  font-size: 22px;
  color: var(--purple);
  margin-top: 4px;
}

@media (max-width: 380px) {
  .math-fraction-pair { gap: 14px; }
  .math-fraction-pair__item .math-pie { width: 100px; height: 100px; }
}

/* ── Phase F: meetkunde shapes ─────────────────────────────── */
.math-shape {
  display: block;
  margin: 0 auto 8px;
}

/* ── Phase H: splitsschema (organigram-style decomposition) ── */
.math-splitschema {
  display: block;
  margin: 0 auto 10px;
}

/* ── Phase G: data visuals ─────────────────────────────────── */
.math-barchart,
.math-linechart {
  display: block;
  margin: 0 auto 8px;
  max-width: 100%;
  height: auto;
}

/* Picture diagram — labelled rows of emoji counts. */
.math-beelddiagram {
  display: inline-block;
  text-align: left;
  margin: 0 auto 10px;
  padding: 12px 16px;
  background: #fefce8;
  border: 2px solid #fde68a;
  border-radius: 12px;
}
.math-beelddiagram__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.math-beelddiagram__label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  color: #92400e;
  min-width: 80px;
  font-size: 15px;
}
.math-beelddiagram__emojis {
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
}
.math-beelddiagram__count {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: #78716c;
  font-size: 13px;
}

/* Data table for tabel-aflezen questions. */
.math-table {
  margin: 0 auto 12px;
  border-collapse: collapse;
  background: white;
  border: 2px solid #94a3b8;
  border-radius: 8px;
  overflow: hidden;
  font-family: 'Nunito', sans-serif;
}
.math-table th,
.math-table td {
  padding: 8px 18px;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
  font-size: 16px;
}
.math-table th {
  background: #1e293b;
  color: white;
  font-weight: 800;
  font-size: 14px;
}
.math-table tr:last-child td { border-bottom: 0; }

/* ── Wizard header ──────────────────────────────────────────── */
.wizard-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-step-indicator {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.wizard-title {
  font-family: 'Fredoka One', cursive;
  font-size: 30px;
  font-weight: 400;
  color: var(--purple);
}

.wizard-subtitle {
  font-size: 16px;
  color: var(--text-muted);
}

/* ── Wizard card ────────────────────────────────────────────── */
.wizard-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid rgba(108,93,211,0.08);
}

/* ── Age selector ───────────────────────────────────────────── */
.groep-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.groep-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--bg-muted);
  background: var(--bg-card);
  font-size: 16px;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  position: relative;
}

.groep-btn.selected {
  background: var(--purple);
  border-color: var(--purple);
  color: white;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(108,93,211,0.35);
}

.groep-btn:hover:not(.selected) {
  background: var(--purple-pale);
  border-color: var(--purple-light);
}

.groep-btn__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.65;
  text-transform: uppercase;
}

.groep-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  color: #92400e;
  margin-top: 10px;
  line-height: 1.4;
}

/* ── Theme grid ─────────────────────────────────────────────── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.theme-chip {
  background: var(--bg-card);
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.theme-chip.selected {
  background: var(--purple);
  border-color: var(--purple);
  color: white;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(108,93,211,0.28);
}

.theme-chip__emoji {
  font-size: 22px;
  flex-shrink: 0;
}

.theme-chip__label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

/* ── Name chips ─────────────────────────────────────────────── */
.names-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.names-section-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.name-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.name-chip {
  background: var(--bg-card);
  border: 2px solid var(--bg-muted);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.name-chip.selected {
  background: var(--teal);
  border-color: var(--teal-dark);
  color: white;
}

/* ── Exercise cards ─────────────────────────────────────────── */
.exercise-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exercise-card {
  background: var(--bg-card);
  border: 3px solid var(--bg-muted);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.exercise-card.selected {
  background: var(--purple-pale);
  border-color: var(--purple);
}

.exercise-card__emoji {
  font-size: 36px;
  flex-shrink: 0;
}

.exercise-card__name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  flex: 1;
}

.exercise-card.selected .exercise-card__name {
  color: var(--purple);
}

.exercise-card::after {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--bg-muted);
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.exercise-card.selected::after {
  content: '✓';
  background: var(--purple);
  border-color: var(--purple);
  color: white;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Wizard nav buttons ─────────────────────────────────────── */
.wizard-nav-buttons {
  display: flex;
  gap: 10px;
}

.wizard-nav-buttons .btn--outline {
  flex: 0 0 auto;
  width: auto;
  padding: 14px 20px;
}

.wizard-nav-buttons .btn--primary {
  flex: 1;
}

/* ── Wizard parent note ─────────────────────────────────────── */
.wizard-parent-note {
  background: var(--teal-pale);
  border: 1px solid rgba(0,180,166,0.3);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 15px;
  color: var(--teal-dark);
  font-weight: 600;
  line-height: 1.5;
}

/* ── Theme counter ───────────────────────────────────────────── */
.wizard-themes-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wizard-themes-meta .wizard-subtitle {
  flex: 1;
}

.theme-counter {
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bg-muted);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.theme-counter--some {
  background: var(--teal-pale);
  color: var(--teal-dark);
}

.theme-counter--full {
  background: var(--purple-pale);
  color: var(--purple);
}

/* ── Names input group ──────────────────────────────────────── */
.names-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.names-inspiration {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Profile picker ─────────────────────────────────────────── */
.profile-picker-subtitle {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  margin-top: 6px;
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-card {
  background: var(--bg-card);
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.profile-card:hover {
  border-color: var(--purple-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.profile-card.active {
  border-color: var(--gold);
  background: var(--gold-pale);
}

.profile-card__emoji {
  font-size: 32px;
  flex-shrink: 0;
}

.profile-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-card__name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.profile-card__meta {
  font-size: 14px;
  color: var(--text-muted);
}

.profile-card__balance {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-dark);
  flex-shrink: 0;
}

/* ── Object password grid ───────────────────────────────────── */
.object-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 8px 0;
}

.object-tile {
  background: var(--bg-card);
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 10px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.object-tile:hover {
  border-color: var(--purple-light);
  background: var(--purple-pale);
  transform: scale(1.04);
}

.object-tile.selected {
  background: var(--purple-pale);
  border-color: var(--purple);
  border-width: 3px;
}

.object-tile--wrong {
  animation: shake 0.35s ease;
  border-color: var(--error) !important;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

.object-tile__emoji {
  font-size: 30px;
  line-height: 1;
}

.object-tile__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.object-tile.selected .object-tile__label {
  color: var(--purple);
}

/* ── Parent portal button (home screen) ─────────────────────── */
.btn--portal {
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 14px;
  min-height: 44px;
  width: auto;
  padding: 8px 16px;
  display: inline-block;
  align-self: center;
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn--portal:hover {
  border-color: var(--purple-light);
  color: var(--purple);
  background: var(--purple-pale);
}

/* ── Parent portal screen ───────────────────────────────────── */
.portal-header {
  text-align: center;
  padding: 8px 0 4px;
}

.portal-header__icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
}

.portal-header__title {
  font-family: 'Fredoka One', cursive;
  font-size: 30px;
  font-weight: 400;
  color: var(--purple);
}

.portal-header__sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

.portal-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portal-menu-item {
  background: var(--bg-card);
  border: 2px solid rgba(124,58,237,0.08);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  text-align: left;
  width: 100%;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}

.portal-menu-item:hover {
  border-color: var(--purple-light);
  background: var(--purple-pale);
  transform: translateX(3px);
}

.portal-menu-item:active {
  transform: scale(0.98);
}

.portal-menu-item__icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.portal-menu-item__text {
  flex: 1;
  min-width: 0;
}

.portal-menu-item__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}

.portal-menu-item__sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.portal-menu-item__arrow {
  font-size: 24px;
  color: var(--purple-light);
  font-weight: 300;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Usage limit inputs ─────────────────────────────────────── */
.limit-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.limit-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.limit-input {
  width: 120px;
  flex-shrink: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
}

.limit-unit {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
}

/* ── Repeat (no-earn) state on result screens ───────────────── */
.result-earned--repeat {
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ── Theme overrides ─────────────────────────────────────────── */
[data-theme="ocean"] {
  --header-bg: linear-gradient(140deg, #0369a1 0%, #0284c7 55%, #0ea5e9 100%);
  --header-shadow: 0 8px 28px rgba(3,105,161,0.40);
  --purple: #0369a1;
  --purple-dark: #075985;
  --purple-light: #0ea5e9;
  --purple-pale: #e0f2fe;
  --text-muted: #075985;
  --bg: #f0f9ff;
  --bg-muted: #bae6fd;
  --bg-card: #ffffff;
}

[data-theme="bos"] {
  --header-bg: linear-gradient(140deg, #166534 0%, #15803d 55%, #16a34a 100%);
  --header-shadow: 0 8px 28px rgba(22,101,52,0.40);
  --purple: #15803d;
  --purple-dark: #166534;
  --purple-light: #22c55e;
  --purple-pale: #dcfce7;
  --text-muted: #166534;
  --bg: #f0fdf4;
  --bg-muted: #bbf7d0;
  --bg-card: #ffffff;
}

[data-theme="ruimte"] {
  --header-bg: linear-gradient(140deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
  --header-shadow: 0 8px 28px rgba(30,27,75,0.55);
  --purple: #4338ca;
  --purple-dark: #3730a3;
  --purple-light: #818cf8;
  --purple-pale: #e0e7ff;
  --text-muted: #3730a3;
  --bg: #eef2ff;
  --bg-muted: #c7d2fe;
  --bg-card: #ffffff;
}

[data-theme="flamingo"] {
  --header-bg: linear-gradient(140deg, #9d174d 0%, #be185d 55%, #ec4899 100%);
  --header-shadow: 0 8px 28px rgba(157,23,77,0.40);
  --purple: #be185d;
  --purple-dark: #9d174d;
  --purple-light: #f472b6;
  --purple-pale: #fce7f3;
  --text-muted: #9d174d;
  --bg: #fdf2f8;
  --bg-muted: #fbcfe8;
  --bg-card: #ffffff;
}

/* ── Incentive mode cards (wizard step 5) ─────────────────────── */
.incentive-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.incentive-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg-card);
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}

.incentive-card.selected {
  border-color: var(--purple);
  background: var(--purple-pale);
}

.incentive-card__emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.incentive-card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.incentive-card__desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Home mode buttons (shop / rewards) ───────────────────────── */
.home-mode-buttons {
  display: flex;
  gap: 10px;
}

.home-mode-buttons .btn {
  flex: 1;
}

.btn--mode {
  background: var(--bg-card);
  color: var(--purple);
  border: 2px solid var(--purple-pale);
  box-shadow: var(--shadow);
  font-size: 16px;
  font-weight: 800;
  min-height: 50px;
}

.btn--mode:hover {
  border-color: var(--purple-light);
  background: var(--purple-pale);
}

/* ── Shop screen ─────────────────────────────────────────────── */
.shop-balance-display {
  font-size: 22px;
  font-weight: 900;
  color: var(--gold-light);
  background: rgba(255,255,255,0.15);
  padding: 8px 20px;
  border-radius: 50px;
  border: 2px solid rgba(255,200,90,0.4);
  display: inline-block;
  margin-top: 6px;
}

.shop-section-title {
  font-family: 'Fredoka One', cursive;
  font-size: 20px;
  color: var(--purple-dark);
  margin: 4px 0 2px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.shop-item {
  background: var(--bg-card);
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
  position: relative;
  transition: border-color 0.15s;
}

.shop-item--unlocked {
  border-color: var(--teal-light);
}

.shop-item--equipped {
  border-color: var(--gold);
  background: var(--gold-pale);
}

.shop-item__emoji {
  font-size: 32px;
  display: block;
  margin-bottom: 6px;
}

.shop-item__label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  display: block;
  margin-bottom: 6px;
}

.shop-item__price {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: block;
}

.shop-item__btn {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.15s;
}

.shop-item__btn--buy {
  background: var(--gold);
  color: var(--text);
}

.shop-item__btn--equip {
  background: var(--teal);
  color: white;
}

.shop-item__btn--equipped {
  background: var(--gold-pale);
  color: var(--gold-dark);
  border: 1px solid var(--gold-light);
  cursor: default;
}

.shop-item__btn--unaffordable {
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ── Shop / rewards toast ─────────────────────────────────────── */
.shop-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: white;
  padding: 12px 22px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  z-index: 999;
}

.shop-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Rewards screen (mode 2 child view) ───────────────────────── */
.rewards-header-meta {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  margin-top: 4px;
}

.reward-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.reward-item__emoji {
  font-size: 28px;
  flex-shrink: 0;
}

.reward-item__info {
  flex: 1;
}

.reward-item__name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.reward-item__cost {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.reward-item__btn {
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  background: var(--gold);
  color: var(--text);
  flex-shrink: 0;
}

.reward-item__btn:disabled {
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ── Parent rewards screen ────────────────────────────────────── */
.parent-reward-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--bg-muted);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.parent-reward-item__text {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
}

.parent-reward-item__del {
  background: var(--error-bg);
  color: var(--error);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 700;
}

.add-reward-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.add-reward-row .form-input {
  flex: 1;
}

.add-reward-row .btn--primary {
  flex-shrink: 0;
  width: auto;
  padding: 10px 16px;
  font-size: 15px;
  min-height: 0;
}

.incentive-mode-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.incentive-mode-btn {
  flex: 1;
  padding: 8px 4px;
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  text-align: center;
  transition: border-color 0.15s;
}

.incentive-mode-btn.active {
  border-color: var(--purple);
  color: var(--purple);
  background: var(--purple-pale);
}

.unlocked-items-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.unlocked-item-chip {
  background: var(--teal-pale);
  border: 1px solid var(--teal-light);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-dark);
}

/* ── Loading screen ──────────────────────────────────────────── */
.loading-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 28px;
  background: var(--bg);
}

.loading-logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.loading-title {
  font-family: 'Fredoka One', cursive;
  font-size: 38px;
  color: var(--purple);
  letter-spacing: 1px;
}

.loading-subtitle {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--purple-light);
  opacity: 0.8;
  letter-spacing: 0.02em;
}

.loading-dots {
  display: flex;
  gap: 8px;
}

.loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--purple-light);
  animation: loadingDot 1.2s infinite ease-in-out;
}

.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes loadingDot {
  0%, 60%, 100% { transform: scale(0.8); opacity: 0.35; }
  30%            { transform: scale(1.3); opacity: 1; }
}

/* ── Sign-in screen ──────────────────────────────────────────── */
.signin-inner {
  justify-content: center;
  min-height: 100vh;
  padding-top: 0;
  gap: 0;
}

.signin-hero {
  background: linear-gradient(140deg, #7c3aed 0%, #5b21b6 55%, #4c1d95 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 52px 24px 36px;
  text-align: center;
  color: white;
  box-shadow: 0 8px 28px rgba(76,29,149,0.30);
  margin: -20px -20px 0;
}

.signin-hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.signin-hero__tagline {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  margin-top: 8px;
  line-height: 1.4;
}

.signin-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px 22px 24px;
  margin-top: 24px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signin-card__title {
  font-family: 'Fredoka One', cursive;
  font-size: 22px;
  color: var(--text);
  text-align: center;
  margin-bottom: 2px;
}

.signin-card__desc {
  font-size: 15px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 4px;
}

.btn--google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: white;
  color: #3c4043;
  border: 1.5px solid #dadce0;
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s, background 0.15s;
  width: 100%;
  min-height: 54px;
}

.btn--google:hover {
  background: #f8f9fa;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}

.btn--google:active {
  background: #f1f3f4;
}

.signin-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}

.signin-divider::before,
.signin-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bg-muted);
}

.signin-guest-note {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  margin-top: -4px;
}

/* ── Trust chips (sign-in screen) ────────────────────────────── */
.trust-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  width: 100%;
}

.trust-chip {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  padding: 7px 16px;
  text-align: center;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* ── Lucas hero card (prominent companion on home screen) ───── */
.lucas-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 16px 18px;
  margin-top: 12px;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
  border: 2px solid #fdba74;
  border-radius: 22px;
  cursor: pointer;
  text-align: left;
  font-family: 'Nunito', sans-serif;
  box-shadow: 0 6px 18px rgba(234, 88, 12, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lucas-hero:hover,
.lucas-hero:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(234, 88, 12, 0.28);
  outline: none;
}
.lucas-hero:active { transform: scale(0.99); }

.lucas-hero__portrait {
  flex-shrink: 0;
  display: block;
  width: 110px;
  height: 110px;
  animation: lucas-idle 3.4s ease-in-out infinite;
}
.lucas-hero__portrait .lucas-svg { display: block; }

.lucas-hero__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.lucas-hero__name {
  font-family: 'Fredoka One', cursive;
  font-size: 22px;
  color: #ea580c;
  line-height: 1.05;
}
.lucas-hero__stage {
  font-size: 13px;
  font-weight: 800;
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.lucas-hero__progress {
  font-size: 13px;
  font-weight: 600;
  color: #7c2d12;
  margin-top: 1px;
}
.lucas-hero__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  background: #ea580c;
  color: white;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  width: fit-content;
}

@keyframes lucas-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lucas-hero__portrait { animation: none; }
}

/* Mobile: stack info under portrait for narrow screens */
@media (max-width: 480px) {
  .lucas-hero { flex-direction: column; align-items: center; text-align: center; }
  .lucas-hero__portrait { width: 100px; height: 100px; }
  .lucas-hero__name { font-size: 20px; }
}

/* ── Garderobe header (top of shop screen) ──────────────────── */
.garderobe-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
  border: 2px solid #fdba74;
  border-radius: 18px;
}
.garderobe-preview__portrait {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
}
.garderobe-preview__portrait .lucas-svg { display: block; }
.garderobe-preview__info { flex: 1; min-width: 0; }
.garderobe-preview__name {
  font-family: 'Fredoka One', cursive;
  font-size: 22px;
  color: #ea580c;
  line-height: 1.1;
}
/* Sprint 142 — .garderobe-preview__stage en __progress zijn verwijderd
   met de groeitrap-regels uit de paskamer (die groeitrap wordt nergens
   anders in de app getoond en was daardoor onbegrijpelijk). De
   stage-mechaniek zelf leeft door in getStageXpLabel: itemsloten
   spreken nu in XP. */

/* ── Shop items — Lucas outfits with rarity ribbons ─────────── */
.shop-item--lucas {
  position: relative;
  overflow: hidden;
}
.shop-item--lucas .shop-item__preview {
  display: flex;
  justify-content: center;
  /* Top spacing so the rarity ribbon (and Nieuw! badge) sit in their own
     band ABOVE the preview SVG rather than overlapping it. Especially
     important for achtergrond items whose SVG fills the whole 52×52
     viewBox with no transparent corners. */
  margin-top: 22px;
  margin-bottom: 6px;
}
.shop-item--lucas .shop-item__preview .lucas-svg { display: block; }
.shop-item__rarity-ribbon {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 8px;
  color: white;
  /* Sit clearly above the preview area in stacking order. */
  z-index: 2;
}
.shop-item--rarity-brons         .shop-item__rarity-ribbon { background: #b45309; }
.shop-item--rarity-zilver        .shop-item__rarity-ribbon { background: #6b7280; }
.shop-item--rarity-goud          .shop-item__rarity-ribbon { background: #d97706; }
.shop-item--rarity-legendarisch  .shop-item__rarity-ribbon { background: linear-gradient(135deg, #f59e0b, #dc2626); }

.shop-item--rarity-legendarisch {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}
/* Legendarisch items get a subtle shimmer to stand out from common loot. */
.shop-item--rarity-legendarisch::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: legendary-shimmer 4.2s ease-in-out infinite;
  border-radius: inherit;
  mix-blend-mode: overlay;
  z-index: 1;
}
.shop-item--rarity-legendarisch > * { position: relative; z-index: 1; }
@keyframes legendary-shimmer {
  0%   { background-position: 200% 0; }
  60%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}

/* "Nieuw!" badge — pops on items the user hasn't yet seen in the shop.
   Same top edge as the rarity ribbon so the two badges align visually. */
.shop-item__new-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.4);
  animation: new-badge-pop 1.6s ease-in-out infinite;
  z-index: 2;
}
@keyframes new-badge-pop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Stage-locked items: visible in the catalog but greyed out with a 🔒 button. */
.shop-item--locked {
  opacity: 0.55;
  filter: saturate(0.7);
}
.shop-item--locked .shop-item__preview { filter: grayscale(0.4); }
.shop-item__btn--locked {
  background: #4b5563 !important;
  color: white !important;
  cursor: not-allowed;
  font-size: 12px;
}

/* "Geen X" / unequip card — softer styling than a normal outfit. */
.shop-item--unequip {
  background: #fafaf9;
  border: 2px dashed #d6d3d1;
}
.shop-item--unequip .shop-item__label { color: #78716c; }
.shop-item--unequip .shop-item__btn--equip {
  background: #78716c;
  color: white;
}
.shop-item--unequip .shop-item__btn--equip:hover { background: #57534e; }

/* ── Sign-in highlights ─────────────────────────────────────── */
.signin-highlights {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.signin-highlight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
}

.signin-highlight__icon {
  font-size: 20px;
  line-height: 1.2;
  flex-shrink: 0;
}

.signin-highlight__text {
  flex: 1;
}

/* ── Over Lumio screen ───────────────────────────────────────── */
.about-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 20px;
  margin-bottom: 14px;
}

.about-card--muted {
  background: var(--bg-soft);
  border-color: transparent;
}

.about-card__icon {
  font-size: 30px;
  margin-bottom: 10px;
  display: block;
}

.about-card__title {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--purple-dark);
  margin-bottom: 8px;
}

.about-card__body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── Portal user info ────────────────────────────────────────── */
.portal-account-info {
  background: var(--purple-pale);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-account-info__icon {
  font-size: 24px;
  flex-shrink: 0;
}

.portal-account-info__text {
  flex: 1;
  min-width: 0;
}

.portal-account-info__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.portal-account-info__email {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-account-info__action {
  flex-shrink: 0;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--purple);
  color: white;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ── Desktop layout — centered phone card ─────────────────── */
@media (min-width: 700px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }

  body {
    background: linear-gradient(145deg, #2d1b69 0%, #4c1d95 35%, #6d28d9 65%, #3b0f8c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Screens become a centered phone-shaped card */
  .screen {
    position: relative !important;
    inset: auto !important;
    width: 430px !important;
    height: min(900px, 94vh) !important;
    border-radius: 40px !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.10),
      0 32px 80px rgba(0,0,0,0.50),
      0 8px 24px rgba(0,0,0,0.30);
    overflow: hidden;
    overflow-y: auto;
  }

  /* Modals and overlays must still cover full viewport */
  .modal-overlay,
  .levelup-overlay {
    position: fixed !important;
    inset: 0 !important;
    border-radius: 0 !important;
  }

  /* Loading and signin screens fill the card */
  .loading-center {
    height: min(900px, 94vh);
  }

  .signin-inner {
    min-height: min(900px, 94vh);
  }

  /* Word definition popup still anchors to viewport */
  .word-def-popup {
    position: fixed !important;
  }

  /* Shop toast anchors to card — keep fixed for simplicity */
  .shop-toast {
    position: fixed !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 3 — Engagement loops
   ═══════════════════════════════════════════════════════════ */

/* ── Streak chip on the Lucas hero card ───────────────────── */
.lucas-hero__streak {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb923c, #ef4444);
  color: white;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  align-self: flex-start;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

/* ── Boswandeling card on home screen ─────────────────────── */
.boswandeling-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  margin-top: 12px;
  background: linear-gradient(135deg, #d1fae5, #86efac);
  border: 2px solid #4ade80;
  border-radius: 18px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.boswandeling-card:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.3);
}
.boswandeling-card:disabled {
  cursor: not-allowed;
}
.boswandeling-card--ready { animation: bos-pulse 2.4s ease-in-out infinite; }
.boswandeling-card--cooldown {
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-color: #cbd5e1;
}
.boswandeling-card--cooldown .boswandeling-card__title { color: #475569; }
.boswandeling-card--cooldown .boswandeling-card__sub   { color: #64748b; }
.boswandeling-card__icon {
  font-size: 36px;
  flex-shrink: 0;
}
.boswandeling-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.boswandeling-card__title {
  font-family: 'Fredoka One', cursive;
  font-size: 18px;
  color: #166534;
  line-height: 1.1;
}
.boswandeling-card__sub {
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
  margin-top: 2px;
}
.boswandeling-card__arrow {
  font-size: 22px;
  color: #166534;
  font-weight: 800;
}
.boswandeling-card--cooldown .boswandeling-card__arrow { display: none; }

/* Sprint 1.4 — compact "chip" variant. Half the height of the original
   card, smaller icon, single-line text. The big card was the loudest
   thing on the home screen and out-competed the actual learning CTAs.
   This keeps the daily-reward signal visible but no longer dominant. */
.boswandeling-card--compact {
  padding: 8px 12px;
  gap: 10px;
  margin-top: 8px;
  border-radius: 14px;
  /* Suppress the pulsing animation on the compact form — it's small enough
     that the kid will see it without an attention-grabbing pulse. */
  animation: none !important;
}
.boswandeling-card--compact .boswandeling-card__icon  { font-size: 22px; }
.boswandeling-card--compact .boswandeling-card__title { font-size: 14px; font-family: 'Nunito', sans-serif; font-weight: 700; }
.boswandeling-card--compact .boswandeling-card__sub   { font-size: 11px; margin-top: 0; }
.boswandeling-card--compact .boswandeling-card__arrow { font-size: 16px; }

@keyframes bos-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}

/* ── Boswandeling modal — full scene with running Lucas ──── */
.modal-box--boswandeling {
  max-width: 420px;
  padding: 0;
  overflow: hidden;
}
.boswandeling-scene {
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #bae6fd 0%, #d1fae5 60%, #86efac 100%);
}
.boswandeling-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.6) 0 14px, transparent 16px),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.5) 0 12px, transparent 14px);
}
.boswandeling-trees {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  font-size: 30px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}
.boswandeling-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(180deg, #65a30d, #4d7c0f);
}
.boswandeling-fox {
  position: absolute;
  bottom: 18px;
  left: -80px;
  width: 72px;
  height: 72px;
  z-index: 2;
}
.boswandeling-fox--run {
  animation: bos-fox-run 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards,
             bos-fox-bounce 0.35s ease-in-out 9 alternate;
}
@keyframes bos-fox-run {
  0%   { left: -80px; }
  100% { left: 180px; }
}
@keyframes bos-fox-bounce {
  from { transform: translateY(0)    rotate(-2deg); }
  to   { transform: translateY(-8px) rotate(2deg); }
}
.boswandeling-prize {
  position: absolute;
  top: 30%;
  right: 18%;
  font-size: 48px;
  z-index: 3;
  animation: bos-prize-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
}
@keyframes bos-prize-pop {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}
.boswandeling-reward {
  padding: 18px 22px 22px;
  text-align: center;
  animation: bos-reward-in 0.4s ease-out;
}
@keyframes bos-reward-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);  }
}
.boswandeling-reward__label {
  font-family: 'Fredoka One', cursive;
  font-size: 22px;
  color: #166534;
  margin-bottom: 4px;
}
.boswandeling-reward__amount {
  font-family: 'Nunito', sans-serif;
  font-size: 30px;
  font-weight: 900;
  color: #ea580c;
  margin-bottom: 14px;
}

/* ── Outfit sets in garderobe ─────────────────────────────── */
.lucas-sets {
  margin: 16px 0;
  padding: 14px;
  background: #fffbeb;
  border: 2px solid #fde68a;
  border-radius: 16px;
}
.lucas-sets__title {
  font-family: 'Fredoka One', cursive;
  font-size: 16px;
  color: #92400e;
  margin-bottom: 10px;
}
.lucas-sets__list {
  display: grid;
  gap: 12px;
}

/* Each set: top row = preview + heading/status; bottom row = clickable
   item chips. Designed so kids see "what will Lucas look like" first,
   then "what do I still need to buy". */
.lucas-set {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: white;
  border: 2px solid #fef3c7;
  border-radius: 14px;
}
.lucas-set__top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lucas-set__preview {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  background: #fef3c7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lucas-set__head {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lucas-set__label {
  font-family: 'Fredoka One', cursive;
  color: #92400e;
  font-size: 17px;
  line-height: 1.1;
}
.lucas-set__statusline {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #b45309;
  margin-top: 3px;
}
.lucas-set__statusline--done { color: #16a34a; }
.lucas-set__bonus {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #ea580c;
  background: #fef3c7;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
  align-self: flex-start;
}

/* Item chips — one per item in the set. Owned ones are static badges,
   missing ones are buttons that scroll to that slot in the wardrobe. */
.lucas-set__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lucas-set-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: white;
  -webkit-tap-highlight-color: transparent;
}
.lucas-set-item__icon { font-size: 14px; }
.lucas-set-item__name { color: #1f2937; }
.lucas-set-item__status {
  font-weight: 800;
  margin-left: 4px;
}
.lucas-set-item--owned {
  background: #ecfdf5;
  border-color: #6ee7b7;
  cursor: default;
}
.lucas-set-item--owned .lucas-set-item__status { color: #15803d; font-size: 14px; }
.lucas-set-item--owned .lucas-set-item__name { color: #166534; }
.lucas-set-item--missing {
  background: #fafaf9;
  border-color: #d6d3d1;
}
.lucas-set-item--missing:hover {
  background: #f5f5f4;
  border-color: #a8a29e;
  transform: translateY(-1px);
  transition: transform 0.1s, background 0.1s;
}
.lucas-set-item--missing .lucas-set-item__status { color: #92400e; }
.lucas-set-item--missing .lucas-set-item__name   { color: #78716c; }

.lucas-set--complete {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}
.lucas-set--complete .lucas-set__label { color: #78350f; }

/* Flash a shop-section-title when a missing-item chip jumps the user to it. */
.shop-section-title--flash {
  animation: section-flash 1.4s ease;
}
@keyframes section-flash {
  0%, 100% { background: transparent; }
  20%      { background: #fef3c7; box-shadow: 0 0 0 6px #fef3c7; border-radius: 8px; }
}

/* Mobile: stack hero card content a bit tighter */
@media (max-width: 480px) {
  .boswandeling-scene { height: 170px; }
  .boswandeling-fox { width: 60px; height: 60px; bottom: 22px; }
  @keyframes bos-fox-run {
    0%   { left: -70px; }
    100% { left: 140px; }
  }
}

/* ═══════════════════════════════════════════════════════════
   BLOKKEN — Tetris-style arcade game
   ═══════════════════════════════════════════════════════════ */

/* Shop card for buying a Blokken session */
.blokken-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #f59e0b;
  border-radius: 18px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: left;
}
.blokken-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3);
}
.blokken-card__icon { font-size: 36px; flex-shrink: 0; }
.blokken-card__info { flex: 1; min-width: 0; }
.blokken-card__title {
  font-family: 'Fredoka One', cursive;
  font-size: 18px;
  color: #92400e;
  line-height: 1.1;
}
.blokken-card__sub {
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  margin-top: 2px;
}
.blokken-card__highscore {
  font-size: 12px;
  font-weight: 600;
  color: #78350f;
  margin-top: 4px;
}
.blokken-card__price {
  font-family: 'Fredoka One', cursive;
  font-size: 20px;
  color: #ea580c;
}

/* Parent portal toggle row */
.portal-menu-item--toggle {
  cursor: pointer;
}
.portal-toggle {
  width: 44px;
  height: 26px;
  appearance: none;
  background: #cbd5e1;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.portal-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s;
}
.portal-toggle:checked {
  background: #22c55e;
}
.portal-toggle:checked::before {
  transform: translateX(18px);
}

/* Game screen layout */
#screen-blokken .screen-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.blokken-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: white;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.blokken-timer {
  font-family: 'Fredoka One', cursive;
  font-size: 28px;
  color: #ea580c;
  flex: 1;
  text-align: center;
  letter-spacing: 0.02em;
}
.blokken-timer--low { color: #dc2626; animation: blokken-timer-pulse 0.8s ease-in-out infinite; }
@keyframes blokken-timer-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}
.blokken-meta { display: flex; flex-direction: column; gap: 2px; font-family: 'Nunito', sans-serif; }
.blokken-meta__row {
  display: flex; gap: 6px; align-items: center;
  font-size: 12px; font-weight: 600; color: #64748b;
}
.blokken-meta__row b { color: #1f2937; font-size: 14px; font-weight: 800; }

.blokken-banner {
  background: #fef3c7;
  border: 2px solid #fbbf24;
  color: #92400e;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  font-family: 'Nunito', sans-serif;
}

.blokken-stage {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
}

.blokken-board {
  display: grid;
  grid-template-columns: repeat(var(--blokken-cols, 10), 1fr);
  grid-template-rows:    repeat(var(--blokken-rows, 20), 1fr);
  gap: 1px;
  background: #1f2937;
  padding: 4px;
  border-radius: 8px;
  /* Sprint 98 — óók op hoogte begrensd (veldfeedback: op telefoons was
     het bord 640px hoog en stonden de knoppen onder de vouw — scrollen
     midden in een potje Tetris). Breedte ≤ (beschikbare hoogte − ruimte
     voor topbar+knoppen) / 2, want het bord is 1:2. dvh volgt de echte
     viewport op mobiel; de vh-regel ervóór is de fallback. */
  width: min(94vw, 320px, calc((100vh - 250px) / 2));
  width: min(94vw, 320px, calc((100dvh - 250px) / 2));
  aspect-ratio: 10 / 20;
}
/* De knoppenbalk moet binnen de duimzone blijven, ook met een
   iPhone-homebalk eronder. */
#screen-blokken .screen-inner {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.blokken-cell {
  background: #0f172a;
  border-radius: 2px;
}
.blokken-cell--filled { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.blokken-cell--active { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }

/* Iconic Tetris-ish piece colors (different enough to read on phones). */
.blokken-cell--i { background: #06b6d4; }
.blokken-cell--o { background: #fbbf24; }
.blokken-cell--t { background: #a855f7; }
.blokken-cell--s { background: #22c55e; }
.blokken-cell--z { background: #ef4444; }
.blokken-cell--j { background: #3b82f6; }
.blokken-cell--l { background: #f97316; }

.blokken-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  min-width: 80px;
}
.blokken-side__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  text-align: center;
}
.blokken-next {
  background: #1f2937;
  border-radius: 8px;
  padding: 4px;
}
.blokken-next__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1px;
  aspect-ratio: 1;
}
.blokken-lines {
  background: white;
  border-radius: 8px;
  text-align: center;
  padding: 8px;
  font-family: 'Fredoka One', cursive;
  font-size: 24px;
  color: #ea580c;
}

/* Sprint 98 — XP-vergrendelde spelkaarten grijs (veldfeedback: het
   slot in de statustekst alleen viel niet op). Kaart blijft klikbaar
   zodat het kind de uitleg ("verdien nog X XP") kan zien. */
.blokken-card--locked {
  opacity: 0.45;
  filter: grayscale(0.7);
}

/* Bottom on-screen controls (mobile-first, also clickable on desktop) */
.blokken-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 8px;
  margin-top: 4px;
}
.blokken-btn {
  background: white;
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  padding: 14px 0;
  font-family: 'Fredoka One', cursive;
  font-size: 22px;
  color: #1f2937;
  cursor: pointer;
  transition: transform 0.05s, background 0.1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.blokken-btn:active {
  transform: scale(0.96);
  background: #f1f5f9;
}
.blokken-btn--wide {
  background: linear-gradient(135deg, #ea580c, #f97316);
  color: white;
  border-color: #c2410c;
  font-size: 18px;
}

/* Game-over overlay */
.blokken-gameover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(15, 23, 42, 0.82);
  z-index: 5;
  padding: 24px;
  text-align: center;
}
.blokken-gameover__title {
  font-family: 'Fredoka One', cursive;
  font-size: 36px;
  color: white;
}
.blokken-gameover__score {
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fef3c7;
}
.blokken-gameover__sub {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #cbd5e1;
  max-width: 280px;
}
.blokken-gameover__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
  max-width: 280px;
}

/* Make the game screen a relative positioning context so the gameover
   overlay can fill it. */
#screen-blokken { position: relative; }
#screen-blokken .screen-inner { position: relative; }

/* Wider layout on tablets / desktop */
@media (min-width: 720px) {
  .blokken-board { width: 360px; }
  .blokken-controls { max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* ═══════════════════════════════════════════════════════════
   HOME — quick actions row & SHOP — 2-block layout
   ═══════════════════════════════════════════════════════════ */

/* Quick-actions row holds the Shop entry button and the daily Boswandeling
   card. Stacks vertically by default; side-by-side on wider screens. */
.home-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
/* Reset the boswandeling card's standalone top-margin when it lives inside
   the quick-actions row — the parent's gap already spaces children. */
.home-quick-actions .boswandeling-card { margin-top: 0; }
@media (min-width: 720px) {
  .home-quick-actions {
    flex-direction: row;
    align-items: stretch;
  }
  .home-quick-actions > * {
    flex: 1;
  }
}

/* Dedicated Shop entry button — same visual weight as boswandeling card so
   the kid sees the two main destinations as siblings. */
.home-quick-action {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 18px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: left;
  border: 2px solid transparent;
}
.home-quick-action:hover {
  transform: translateY(-2px);
}
.home-quick-action--shop {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-color: #a78bfa;
  color: #4c1d95;
}
.home-quick-action--shop:hover {
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.28);
}
.home-quick-action__icon { font-size: 34px; flex-shrink: 0; }
.home-quick-action__text { flex: 1; display: flex; flex-direction: column; }
.home-quick-action__title {
  font-family: 'Fredoka One', cursive;
  font-size: 18px;
  line-height: 1.1;
}
.home-quick-action__sub {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 2px;
}

/* Shop screen uses a tab bar at the top so kids can jump straight to
   the section they want — no scrolling through 5 wardrobe slots to find
   Tetris. Each tab has its own colour matching the panel theme. */
.shop-tabs {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding: 6px;
  background: white;
  border-radius: 16px;
  border: 2px solid #e2e8f0;
  position: sticky;
  top: 12px;
  z-index: 4;
  /* On narrow screens allow horizontal scroll if more tabs are ever added */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.shop-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.05s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.shop-tab:hover  { background: #f1f5f9; color: #1f2937; }
.shop-tab:active { transform: scale(0.97); }
.shop-tab__emoji { font-size: 20px; line-height: 1; }
.shop-tab__label { line-height: 1; }

/* Active tab — colour matches the panel background tint underneath. */
.shop-tab--active.shop-tab--garderobe {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
}
.shop-tab--active.shop-tab--themes {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
}
.shop-tab--active.shop-tab--games {
  background: linear-gradient(135deg, #d1fae5, #86efac);
  color: #166534;
}

/* Each panel has a soft tinted background matching its tab. */
.shop-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 20px;
  border: 2px solid transparent;
}
.shop-panel--garderobe {
  background: linear-gradient(180deg, #fef3c7 0%, #ffffff 80px);
  border-color: #fde68a;
}
.shop-panel--themes {
  background: linear-gradient(180deg, #ede9fe 0%, #ffffff 80px);
  border-color: #c4b5fd;
}
.shop-panel--games {
  background: linear-gradient(180deg, #d1fae5 0%, #ffffff 80px);
  border-color: #86efac;
}

/* On phones the labels can crowd; let the emojis carry meaning when space
   gets tight. (The label still reads to screen readers.) */
@media (max-width: 380px) {
  .shop-tab__label { display: none; }
  .shop-tab { padding: 10px 6px; }
  .shop-tab__emoji { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   HOME REORDER — compact header + primary-CTA-first layout
   ═══════════════════════════════════════════════════════════ */

/* Compact variant of the app header used only on the home screen.
   Slimmer top padding, no decorative starburst, name/balance on one row. */
.app-header--compact {
  padding: 16px 18px 14px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app-header--compact::before,
.app-header--compact::after { display: none; }
.app-header--compact .profile-indicator {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 800;
  color: white;
  text-align: left;
}
.app-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.app-logo-lockup--mini {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.app-header--compact .balance-display {
  font-size: 17px;
  padding: 4px 12px;
}

/* Streak chip — its own row under the header. Tinted warm to read as
   "fire / progress" without competing with the primary CTAs below. */
/* Sprint 37 — engagement strip groups three chips (streak / XP / badges)
   into a single flex row under the header. Each chip is a small pill that
   shows nothing when empty (e.g. no streak yet, no badges yet) and pops
   in once the kid earns the underlying state. The badges chip is a
   button — clicking opens the Trofeeën modal. */
.home-engagement-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: -2px;
  margin-bottom: 4px;
}
.engagement-chip {
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: white;
  border: 0;
  cursor: default;
}
.engagement-chip--streak {
  background: linear-gradient(135deg, #fb923c, #ef4444);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
  /* Sprint 45 — streak/XP chips are now <button>s for the tap-to-info
     flow. Make them feel tappable with a subtle press animation, while
     keeping the visual identical to the original <div> chips. */
  cursor: pointer;
  transition: transform 0.1s ease;
}
.engagement-chip--streak:active { transform: scale(0.95); }
.engagement-chip--xp {
  background: linear-gradient(135deg, #34d399, #059669);
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.engagement-chip--xp:active { transform: scale(0.95); }

/* Sprint 45 — chip-info modal. Used by streak + XP taps. Kid-friendly
   tone, sized small (it's an explainer, not an interaction surface). */
.modal-box--chip-info {
  max-width: 380px;
}
.chip-info-body {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text, #1c1039);
  padding: 6px 4px 4px;
}
.chip-info-body p {
  margin: 0 0 12px;
}
.chip-info-body p:last-child {
  margin-bottom: 0;
}
.chip-info-body .chip-info-stat {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  color: #92400e;
  text-align: center;
  margin: 8px 0;
}
.engagement-chip--badges {
  background: linear-gradient(135deg, #c084fc, #7c3aed);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.engagement-chip--badges:active { transform: scale(0.95); }

/* Sprint 38 — boxes chip pulses softly when ≥1 unopened box waits, so
   the kid notices it immediately on returning to home. */
.engagement-chip--boxes {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.4);
  cursor: pointer;
  transition: transform 0.1s ease;
  animation: box-chip-pulse 1.4s ease-in-out infinite;
}
.engagement-chip--boxes:active { transform: scale(0.95); animation: none; }
@keyframes box-chip-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 2px 6px  rgba(217, 119, 6, 0.4); }
  50%      { transform: scale(1.06); box-shadow: 0 4px 14px rgba(217, 119, 6, 0.65); }
}

/* Sprint 38 — Mystery box modal. Three visual phases in one body:
   (1) idle  — big closed 🎁 + "Tik op het doosje", "Doosje openen" CTA
   (2) opening — 0.8s shake animation on the box art
   (3) revealed — reward emoji + amount + flavor + "Volgend / Sluiten" CTA */
.modal-box--mystery {
  max-width: 420px;
  text-align: center;
}
.mystery-box-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 4px;
}
.mystery-box-art {
  font-size: 96px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(217, 119, 6, 0.4));
  transition: transform 0.15s ease;
}
.mystery-box-art.is-shaking {
  animation: mystery-box-shake 0.8s ease-in-out;
}
@keyframes mystery-box-shake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15%      { transform: rotate(-8deg) scale(1.05); }
  30%      { transform: rotate(8deg) scale(1.05); }
  45%      { transform: rotate(-6deg) scale(1.1); }
  60%      { transform: rotate(6deg) scale(1.1); }
  75%      { transform: rotate(-4deg) scale(1.15); }
  90%      { transform: rotate(0deg) scale(1.2); }
}
.mystery-box-prompt {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted, #6b46c1);
  font-weight: 700;
}
.mystery-box-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
  animation: mystery-box-reveal 0.5s ease-out;
}
@keyframes mystery-box-reveal {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1);   }
}
.mystery-box-reward-emoji {
  font-size: 64px;
  line-height: 1;
}
.mystery-box-reward-amount {
  font-family: 'Fredoka One', cursive;
  font-size: 28px;
  color: #b45309;
  line-height: 1.1;
}
.mystery-box-reward-flavor {
  font-size: 14px;
  color: var(--text, #1c1039);
  max-width: 280px;
  line-height: 1.35;
}
/* Tier-specific reward halos. Common = plain; rare/legendary glow. */
.mystery-box-reward.tier-rare .mystery-box-reward-emoji {
  text-shadow: 0 0 18px rgba(124, 58, 237, 0.6);
}
.mystery-box-reward.tier-legendary .mystery-box-reward-emoji {
  text-shadow: 0 0 22px rgba(245, 158, 11, 0.85), 0 0 36px rgba(245, 158, 11, 0.45);
  animation: mystery-box-reveal 0.5s ease-out, legendary-pulse 1.6s ease-in-out infinite 0.5s;
}
@keyframes legendary-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.mystery-box-remaining {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted, #6b46c1);
  font-weight: 600;
}
.mystery-box-action.hidden { display: none; }

/* Sprint 37 — Trofeeën modal grid. 4 cols on desktop, 3 on narrow mobile.
   Locked badges show grayscale + ? overlay so kids can see what's still
   to unlock without spoiling the details. Tapping an unearned badge does
   nothing (no animation, no popup) — they earn it by completing the act. */
.modal-box--badges {
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
}
.badges-summary {
  margin: 8px 0 14px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted, #6b46c1);
  font-weight: 700;
}
.badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 480px) {
  .badges-grid { grid-template-columns: repeat(4, 1fr); }
}
.badge-tile {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 12px 6px;
  text-align: center;
  cursor: default;
}
.badge-tile--locked {
  background: #f3f4f6;
  border-color: #d1d5db;
  filter: grayscale(0.6);
  opacity: 0.55;
}
.badge-tile-emoji {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 4px;
}
.badge-tile-label {
  font-size: 12px;
  font-weight: 800;
  color: #92400e;
}
.badge-tile--locked .badge-tile-label { color: #6b7280; }
.badge-tile-desc {
  font-size: 11px;
  color: #b45309;
  margin-top: 2px;
  line-height: 1.25;
}
.badge-tile--locked .badge-tile-desc { color: #9ca3af; }

/* Sprint 47 — progress indicator on locked numeric badges. Shows
   "current / target" + a small fill bar so kids can see how close they
   are ("47/100 XP") rather than just a 🔒 with no signal. */
.badge-tile-progress {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.badge-tile-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.badge-tile-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.badge-tile-progress-label {
  font-size: 10px;
  color: #6b7280;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Sprint 37 — celebration toast for a freshly earned badge. Appears
   briefly at the top of the home screen after the kid returns from a
   session that unlocked something. Auto-dismisses on the next render
   so the kid doesn't see it twice. */
.badge-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.45);
  font-family: 'Fredoka One', cursive;
  font-size: 18px;
  z-index: 10000;
  animation: badge-toast-in 0.4s ease-out, badge-toast-out 0.4s ease-in 3.6s;
}
@keyframes badge-toast-in {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes badge-toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, -20px); }
}

/* Legacy class kept for backwards compat — the old code referenced
   .home-streak-chip directly; the new home renderer writes into the same
   element ID so this still works for the streak slot. */
.home-streak-chip {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb923c, #ef4444);
  color: white;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
  margin-top: -6px;
}

/* Primary CTA stack — the daily-routine buttons (reading, math) sit
   right under the header, prominent. Each carries level info inline. */
.home-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.btn-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--purple) 0%, #5b21b6 100%);
  color: white;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  text-align: left;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.4);
}
.btn-cta:active { transform: scale(0.99); }
.btn-cta__icon {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
}
.btn-cta__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.btn-cta__title {
  font-family: 'Fredoka One', cursive;
  font-size: 22px;
  line-height: 1.05;
}
/* Sprint 43.1 — level indicator pill. Was plain inline text under the
   CTA title showing "Beginnend voetballer (niveau 3)". Now a compact
   rounded pill ("📊 niveau 3/5") so the new engagement strip at the top
   of the home (streak / XP / boxes / badges) carries the visible
   progression weight, and the per-CTA niveau is a quieter secondary
   indicator. Inherits the CTA's white text colour so it works on every
   button gradient. */
.btn-cta__sub {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.94;
  width: fit-content;
}
.btn-cta__arrow {
  font-size: 24px;
  font-weight: 800;
  opacity: 0.7;
  flex-shrink: 0;
}

/* Sprint 51 — category balance lock. Greyed-out state for a CTA whose
   category has run ahead of the median by CATEGORY_LOCK_THRESHOLD
   today. Click handler is no-op'd in JS; this is the visual signal.
   The lock is temporary — it lifts as soon as the kid plays other
   categories enough to raise the median. */
.btn-cta--locked {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.25);
  cursor: not-allowed;
  opacity: 0.78;
}
.btn-cta--locked:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.25);
}
.btn-cta--locked:active { transform: none; }
.btn-cta--locked .btn-cta__arrow { opacity: 0.3; }

/* Shop quick-action — sibling to boswandeling-card in shape but with a
   warm yellow/orange palette so it reads as "stuff to buy" rather than
   "stuff to find" (boswandeling = green/nature). */
.shop-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #f59e0b;
  border-radius: 18px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  text-align: left;
  transition: transform 0.15s, box-shadow 0.15s;
}
.shop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3);
}
.shop-card:active { transform: scale(0.99); }
.shop-card__icon {
  font-size: 36px;
  flex-shrink: 0;
}
.shop-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.shop-card__title {
  font-family: 'Fredoka One', cursive;
  font-size: 19px;
  color: #92400e;
  line-height: 1.1;
}
.shop-card__sub {
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  margin-top: 2px;
}
.shop-card__arrow {
  font-size: 22px;
  font-weight: 800;
  color: #92400e;
  flex-shrink: 0;
}

/* Lucas hero on the reordered home — slightly slimmer than the original
   110px hero, but still substantial enough to anchor the page. The CTAs
   above stay the focal point because they're brighter (purple gradient)
   and at the natural thumb-zone. */
.lucas-hero--compact {
  padding: 14px 18px;
  margin-top: 0;
}
.lucas-hero--compact .lucas-hero__portrait {
  width: 90px;
  height: 90px;
}
.lucas-hero--compact .lucas-hero__name { font-size: 20px; }
.lucas-hero--compact .lucas-hero__stage,
.lucas-hero--compact .lucas-hero__progress { font-size: 13px; }
@media (max-width: 480px) {
  .lucas-hero--compact { flex-direction: row; text-align: left; }
  .lucas-hero--compact .lucas-hero__portrait { width: 80px; height: 80px; }
}

/* ═══════════════════════════════════════════════════════════
   PROGRESS / VOORTGANG SCREEN
   ═══════════════════════════════════════════════════════════ */
.progress-intro {
  font-family: 'Nunito', sans-serif;
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 16px;
}

.progress-subject {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.progress-subject__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(108, 93, 211, 0.18);
}
.progress-subject__icon { font-size: 22px; }
.progress-subject__title {
  font-family: 'Fredoka One', cursive;
  font-size: 20px;
  color: var(--purple);
}

.progress-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progress-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.progress-row__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
}
.progress-row__icon { font-size: 18px; flex-shrink: 0; }
.progress-row__label {
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
  flex: 1;
}
.progress-row__kd {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.progress-row__bar {
  position: relative;
  height: 10px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.progress-row__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--purple);
  border-radius: inherit;
  transition: width 0.3s ease;
}
.progress-row--strong .progress-row__fill { background: linear-gradient(90deg, #4ade80, #16a34a); }
.progress-row--okay   .progress-row__fill { background: linear-gradient(90deg, #fcd34d, #f59e0b); }
.progress-row--weak   .progress-row__fill { background: linear-gradient(90deg, #fb7185, #e11d48); }
.progress-row--empty  .progress-row__fill { background: transparent; }

.progress-row__stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
}
.progress-row__pct {
  font-weight: 800;
  color: var(--text);
}
.progress-row--empty .progress-row__pct { color: #94a3b8; font-weight: 600; }
.progress-row__sample { color: var(--text-muted); }

/* ── Lezen vertical (KD7) ──────────────────────────────────────
   Countdown bar at the top of each lezen vraag. Width animates from
   100% → 0% over the question's timerMs (set inline via JS). Colour
   shifts from green → orange → red as time runs out via the CSS
   linear gradient — keeps the visual urgency high. */
/* Sprint 12.2 — more prominent timer bar. Was 8px tall on a faint
   grey background; kids couldn't see it. Now 16px tall, a stronger
   track tint and a softer shadow inside the track. The green → orange
   → red gradient reads as "time" without explanation.
   Sprint 140 — het "⏱ Tijd"-label is geschrapt (veldfeedback: de balk
   spreekt voor zich, het label kneep de 16px-balk dicht). De balk staat
   op aria-hidden, dus er ging geen screenreader-tekst verloren. */
.lezen-timer-track {
  position: relative;
  width: 100%;
  height: 16px;
  background: #f3e8ff;
  border: 1px solid #d8b4fe;
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0 18px 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.lezen-timer-fill {
  height: 100%;
  /* Solid colour — gradients would just scale with the shrinking
     element and never show a colour-shift. JS adds .lezen-timer-fill--low
     near the end so the bar turns red as time runs out (see _lzStartTimer). */
  background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
  border-radius: 7px;
  transition-property: width, background;
  /* width transition timing is JS-gestuurd; the background transition
     is short so the colour swap to red feels reactive. */
}
.lezen-timer-fill--low {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
}
.lezen-timer-fill--critical {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  animation: lezen-timer-pulse 0.45s ease-in-out infinite;
}
@keyframes lezen-timer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Lezen-vragen worden iets groter weergegeven dan andere — leesvloeiend-
   heid is het hele punt, dus tekst moet goed leesbaar zijn. */
.lezen-problem-card {
  background: #fef3c7;
  border: 2px solid #ea580c;
  padding: 28px 20px;
  text-align: center;
  border-radius: 14px;
}
.lezen-problem-text {
  font-size: 28px;
  font-weight: 700;
  color: #7c2d12;
  line-height: 1.4;
  margin: 0;
}
/* Mobile compactness */
@media (max-width: 480px) {
  .lezen-problem-text { font-size: 22px; }
}

/* Sprint 6.2 — explicit prompt above the target word/sentence so the
   kid knows what to do. Instruction is small + grey + italic (clearly
   a meta-question, not the content). Target word is big + bold +
   centred (the content). */
.lz-prompt-instruction {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  font-style: italic;
  margin-bottom: 10px;
  text-transform: none;
  letter-spacing: 0;
}
.lz-prompt-word {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: #7c2d12;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.lz-prompt-sentence {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #7c2d12;
  line-height: 1.4;
}
.lz-prompt-emoji {
  display: block;
  font-size: 72px;
  line-height: 1.1;
}
@media (max-width: 480px) {
  .lz-prompt-instruction { font-size: 12px; margin-bottom: 6px; }
  .lz-prompt-word        { font-size: 28px; }
  .lz-prompt-sentence    { font-size: 18px; }
  .lz-prompt-emoji       { font-size: 56px; }
}

/* Sprint 140 — .result-speed (de leestempo-pil) is verwijderd: het
   kindscherm toont geen wpm meer. De AVI-banner hieronder is voor de
   OUDER en blijft ongemoeid. */

/* AVI-banner in de parent-portal voortgang-view. Niet voor het kind. */
.lezen-avi-banner {
  background: linear-gradient(135deg, #ede9fe 0%, #fef3c7 100%);
  border: 1px solid #c4b5fd;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 12px 0;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #5b21b6;
  line-height: 1.5;
}
.lezen-avi-banner__big {
  font-size: 20px;
  font-weight: 800;
  color: #6d28d9;
  display: block;
  margin-bottom: 4px;
}
.lezen-avi-banner__disclaimer {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  margin-top: 6px;
}

/* ── Mastery dashboard (parent portal) ────────────────────────
   Top-of-page mastery summary banner + per-row mastery badges.
   Lifetime-based: distinct from the rolling-5-sessions colour bars. */
.mastery-banner {
  background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
  border: 2px solid #facc15;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 12px 0 20px 0;
  box-shadow: 0 2px 6px rgba(250, 204, 21, 0.15);
}
.mastery-banner__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mastery-banner__icon  { font-size: 28px; }
.mastery-banner__title {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #713f12;
  line-height: 1.3;
}
.mastery-banner__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 6px 0;
}
.mastery-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.mastery-pill--mastered { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.mastery-pill--learning { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.mastery-pill--starting { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.mastery-banner__legend {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #78716c;
  font-style: italic;
  margin-top: 6px;
}

/* Per-row badge — sits to the right of the kerndoel-tag in the head. */
.progress-row__badge {
  font-size: 18px;
  margin-left: 6px;
  cursor: help;
}
/* Subtle left-border accent per mastery state. */
.progress-row--mastery-mastered { border-left: 4px solid #22c55e; }
.progress-row--mastery-learning { border-left: 4px solid #3b82f6; }
.progress-row--mastery-starting { border-left: 4px solid #cbd5e1; }
.progress-row--mastery-empty    { border-left: 4px solid transparent; }

/* Lifetime totals line beneath the bar. Smaller + greyer than the
   recent-sessions line above it. */
.progress-row__lifetime {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
  font-style: italic;
}


/* ── Sprint 11 — Schrijven vertical ──────────────────────────
   Write screen: prompt card on top, big textarea in the middle,
   inline feedback card after submit. */

.schrijven-prompt-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 14px;
  padding: 18px 20px;
}
.schrijven-prompt-label {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92400e;
  margin: 0 0 6px 0;
}
.schrijven-prompt-text {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #7c2d12;
  line-height: 1.4;
  margin: 0 0 8px 0;
}
.schrijven-tip {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-style: italic;
  color: #78350f;
  margin: 8px 0 0 0;
  padding: 6px 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
}
.schrijven-target {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #92400e;
  margin: 10px 0 0 0;
}

.schrijven-write-area {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.schrijven-textarea {
  width: 100%;
  min-height: 200px;
  padding: 14px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1f2937;
  background: var(--bg-card);
  border: 2px solid var(--bg-muted);
  border-radius: var(--radius-md);
  resize: vertical;
  outline: none;
}
.schrijven-textarea:focus {
  border-color: var(--purple-light);
}
.schrijven-textarea:disabled {
  background: #f9fafb;
  color: #6b7280;
}
.schrijven-wordcount {
  align-self: flex-end;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.schrijven-wordcount--low   { color: #b91c1c; background: #fee2e2; }
.schrijven-wordcount--ok    { color: #1e40af; background: #dbeafe; }
.schrijven-wordcount--great { color: #166534; background: #dcfce7; }

/* Inline feedback card (after submit, before "Volgende"). */
.schrijven-feedback {
  background: var(--bg-card);
  border: 2px solid var(--purple-light);
  border-radius: 14px;
  padding: 18px 20px;
  font-family: 'Nunito', sans-serif;
}
.schrijven-feedback__summary {
  font-size: 16px;
  font-weight: 700;
  color: var(--purple-dark);
  line-height: 1.5;
  margin-bottom: 12px;
}
.schrijven-feedback__overall {
  font-size: 14px;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 10px;
}
.schrijven-feedback__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.schrijven-feedback__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px;
}
.schrijven-feedback__row-label { font-size: 14px; color: #374151; font-weight: 600; }
.schrijven-feedback__row-score { font-size: 16px; letter-spacing: 0.04em; }

.schrijven-feedback__suggestions {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 6px;
}
.schrijven-feedback__suggestions-title {
  font-weight: 700;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 4px;
}
.schrijven-feedback__suggestions ul {
  margin: 0;
  padding-left: 20px;
}
.schrijven-feedback__suggestions li {
  font-size: 13px;
  color: #78350f;
  line-height: 1.4;
  margin: 2px 0;
}

/* Recap card on result screen — re-uses feedback styles + adds the
   kid's response so they can review what they wrote. */
.schrijven-result-recap {
  width: 100%;
  background: var(--bg-card);
  border: 2px solid var(--purple-light);
  border-radius: 14px;
  padding: 18px 20px;
  font-family: 'Nunito', sans-serif;
  text-align: left;
}
.schrijven-feedback__recap-resp {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}
.schrijven-feedback__recap-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 6px;
}
.schrijven-feedback__recap-text {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.55;
  white-space: pre-wrap;
  background: #f9fafb;
  padding: 10px 12px;
  border-radius: 8px;
}

@media (max-width: 480px) {
  .schrijven-prompt-text { font-size: 17px; }
  .schrijven-textarea    { font-size: 15px; min-height: 160px; }
}

/* Writings viewer (parent portal) — list of recent samples. */
.writings-list { display: flex; flex-direction: column; gap: 14px; }
.writing-sample {
  background: var(--bg-card);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'Nunito', sans-serif;
}
.writing-sample__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.writing-sample__when {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}
.writing-sample__overall {
  font-size: 13px;
  font-weight: 700;
  color: #5b21b6;
}
.writing-sample__prompt {
  font-size: 14px;
  color: #374151;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #fef3c7;
  border-radius: 6px;
  line-height: 1.4;
}
.writing-sample__response {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.55;
  white-space: pre-wrap;
  padding: 8px 10px;
  background: #f9fafb;
  border-radius: 6px;
  margin-bottom: 8px;
}
.writing-sample__grades {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 6px;
}
.writing-sample__feedback {
  font-size: 13px;
  font-style: italic;
  color: #5b21b6;
  background: #f3e8ff;
  padding: 6px 10px;
  border-radius: 6px;
}

/* ── Sprint 29 — themes manager ────────────────────────────── */
.themes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.theme-chip {
  background: var(--gold-pale, #fffbeb);
  border: 1.5px solid var(--gold-light, #fcd34d);
  color: var(--gold-dark, #b45309);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, transform 0.1s;
}
.theme-chip:hover {
  background: #fde68a;
  transform: translateY(-1px);
}
.theme-chip:active { transform: scale(0.97); }
.theme-chip__x {
  font-size: 18px;
  line-height: 1;
  opacity: 0.65;
}
.themes-add-row {
  display: flex;
  gap: 8px;
  margin: 18px 0;
}
.themes-add-row input {
  flex: 1;
  background: white;
  border: 2px solid var(--purple-pale, #ede9fe);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  color: var(--text, #1c1039);
  outline: none;
  transition: border-color 0.15s;
}
.themes-add-row input:focus {
  border-color: var(--purple, #7c3aed);
}
.themes-add-row .btn {
  background: var(--gold, #f59e0b);
  color: white;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.themes-note {
  font-size: 14px;
  color: var(--text-muted, #6b46c1);
  line-height: 1.5;
  background: var(--purple-pale, #ede9fe);
  border-radius: 12px;
  padding: 12px 16px;
}

/* ── Sprint 31 — feedback FAB + modal ──────────────────────── */
#feedback-fab {
  position: fixed;
  /* Sprint 32.2 — env() handles iOS Safari's URL bar + home
     indicator. Without this the FAB sits under the toolbar on
     iPhone and is invisible. The `max()` ensures a 16px minimum
     gap on browsers that don't support env (older Android). */
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold, #f59e0b), var(--gold-dark, #b45309));
  color: white;
  border: 2px solid white;
  font-size: 26px;
  cursor: pointer;
  z-index: 1000;
  box-shadow:
    0 8px 24px rgba(180, 83, 9, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: 'Nunito', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#feedback-fab:hover {
  transform: scale(1.08);
  box-shadow:
    0 8px 24px rgba(180, 83, 9, 0.50),
    0 4px 10px rgba(0, 0, 0, 0.15);
}
#feedback-fab:active { transform: scale(0.95); }
@media (max-width: 480px) {
  /* Slightly bigger touch target on phones — fits the 44px Apple
     HIG minimum with comfortable padding. */
  #feedback-fab { width: 64px; height: 64px; font-size: 28px; }
}

#modal-feedback .modal-box--feedback {
  background: white;
  border-radius: 20px;
  padding: 24px;
  max-width: 460px;
  width: 92%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feedback-intro {
  color: var(--text-muted, #6b46c1);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}
.feedback-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feedback-field > span {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1c1039);
}
.feedback-field textarea,
.feedback-field input {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  color: var(--text, #1c1039);
  background: var(--gold-pale, #fffbeb);
  border: 1.5px solid var(--gold-light, #fcd34d);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
}
.feedback-field textarea:focus,
.feedback-field input:focus {
  border-color: var(--gold-dark, #b45309);
  background: white;
}
.feedback-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.feedback-actions .btn {
  padding: 8px 16px;
  font-size: 15px;
  border-radius: 10px;
  border: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  cursor: pointer;
}
.feedback-actions .btn--secondary {
  background: transparent;
  color: var(--text-muted, #6b46c1);
  border: 1.5px solid var(--purple-pale, #ede9fe);
}
.feedback-actions .btn--secondary:hover {
  background: var(--purple-pale, #ede9fe);
}
.feedback-actions .btn:not(.btn--secondary) {
  background: linear-gradient(135deg, var(--gold, #f59e0b), var(--gold-dark, #b45309));
  color: white;
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.25);
}
.feedback-actions .btn:not(.btn--secondary):hover {
  filter: brightness(1.05);
}
.feedback-status {
  margin: 0;
  font-size: 14px;
  text-align: center;
  color: var(--text-muted, #6b46c1);
  min-height: 18px;
}
.feedback-status:empty { display: none; }

/* ── Sprint 39 — Lucas Geheugen (memory game) ──────────────────
   Three difficulty modes share the same game-screen scaffolding;
   only the grid column count (set inline) and the card count vary.
   Cards use a soft 3D-flip illusion via background switch + scale. */

.geheugen-locked {
  background: #fef3c7;
  color: #92400e;
  border-radius: 12px;
  padding: 16px 18px;
  text-align: center;
  font-weight: 700;
  margin: 16px 0;
}
.geheugen-difficulty-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
/* Sprint 41 — free-then-paid status pill that appears above the
   difficulty picker on each game's home screen. */
.game-cost-status {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 999px;
  padding: 8px 14px;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #92400e;
  align-self: center;
}
.geheugen-difficulty-btn {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border: 2px solid #e9d5ff;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  text-align: left;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.geheugen-difficulty-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}
.geheugen-difficulty-btn.is-default {
  border-color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
}
.geheugen-difficulty-btn__label {
  font-family: 'Fredoka One', cursive;
  font-size: 20px;
  color: #4c1d95;
}
.geheugen-difficulty-btn__detail {
  font-size: 13px;
  color: #6b46c1;
  margin-top: 2px;
}
.geheugen-difficulty-btn__best {
  font-size: 12px;
  color: #92400e;
  margin-top: 4px;
  font-weight: 700;
}

/* Topbar with quit / meta — mirrors the blokken-topbar styling. */
.geheugen-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0 12px;
  flex-wrap: wrap;
}
.geheugen-meta {
  display: flex;
  gap: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--text-muted, #6b46c1);
}
.geheugen-meta__row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.geheugen-meta__row span { font-size: 10px; text-transform: uppercase; opacity: 0.7; }
.geheugen-meta__row b { font-size: 16px; color: var(--text, #1c1039); font-weight: 800; }

/* Board grid — columns set inline by _ghRenderBoard. Cards squeeze
   to fit available width; aspect-ratio keeps them square-ish. */
.geheugen-board {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  /* Sprint 48.1 — explicit width:100% is REQUIRED here. Without it the
     grid collapses to its intrinsic content width — but the cards use
     `aspect-ratio: 1/1` which has zero intrinsic width, so the columns
     resolve to 0px and the kid sees an empty board with only the timer
     visible. (The fix is identical to what `.slangetje-board` already
     does.) */
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.geheugen-card {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
  transition: transform 0.15s ease, background 0.2s ease;
  padding: 0;
}
.geheugen-card:active { transform: scale(0.96); }
.geheugen-card__back {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka One', cursive;
  font-size: 28px;
  color: white;
  opacity: 1;
  transition: opacity 0.15s ease;
}
.geheugen-card__face {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fffbeb;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-weight: 800;
  color: #92400e;
  padding: 4px;
  text-align: center;
}
.geheugen-card__face--emoji { font-size: 36px; }
.geheugen-card__face--word  { font-size: 14px; font-family: 'Nunito', sans-serif; }
@media (min-width: 480px) {
  .geheugen-card__face--emoji { font-size: 44px; }
  .geheugen-card__face--word  { font-size: 16px; }
}
.geheugen-card.is-faceup .geheugen-card__back { opacity: 0; }
.geheugen-card.is-faceup .geheugen-card__face { opacity: 1; }
.geheugen-card.is-matched {
  background: linear-gradient(135deg, #34d399, #059669);
  cursor: default;
  animation: geheugen-match-flash 0.5s ease-out;
}
.geheugen-card.is-matched .geheugen-card__face { background: #ecfdf5; color: #059669; }
@keyframes geheugen-match-flash {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.geheugen-result {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 14px;
  padding: 18px 22px;
  text-align: center;
  margin-top: 16px;
}
.geheugen-result h2 {
  margin: 0 0 6px;
  font-family: 'Fredoka One', cursive;
  color: #b45309;
}
.geheugen-result p {
  margin: 0 0 12px;
  font-size: 15px;
  color: #92400e;
  font-weight: 700;
}
.geheugen-result.hidden { display: none; }

/* ── Sprint 40 — Slangetje (Snake) game board + controls ────── */
.slangetje-board {
  display: grid;
  gap: 1px;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: 12px auto;
  background: #f3e8d6;
  padding: 4px;
  border-radius: 8px;
}
.slangetje-cell {
  background: #fefcf7;
  border-radius: 1px;
}
.slangetje-cell.is-body {
  background: #34d399;
}
.slangetje-cell.is-head {
  background: #059669;
  box-shadow: inset 0 0 0 1px #064e3b;
}
.slangetje-cell.is-fruit {
  background: radial-gradient(circle, #ef4444 50%, transparent 51%);
}
.slangetje-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 8px auto;
  user-select: none;
}
.slangetje-controls-row {
  display: flex;
  gap: 6px;
}

/* ── Sprint 40 — Woordzoeker (Word Search) ──────────────────── */
.woordzoeker-board {
  display: grid;
  gap: 2px;
  /* Sprint 48.1 — same fix as .geheugen-board. Without width:100% the
     grid collapses because the .woordzoeker-cell children use
     `aspect-ratio: 1/1` and resolve to 0px when there's no incoming
     width to divide. */
  width: 100%;
  max-width: 480px;
  margin: 10px auto;
  background: #e9d5ff;
  padding: 4px;
  border-radius: 8px;
}
.woordzoeker-cell {
  aspect-ratio: 1 / 1;
  background: #fffbeb;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #4c1d95;
  transition: background 0.1s ease, transform 0.1s ease;
  padding: 0;
}
.woordzoeker-cell:hover { background: #fef3c7; }
.woordzoeker-cell:active { transform: scale(0.9); }
.woordzoeker-cell.is-armed {
  background: #fbbf24;
  color: white;
  box-shadow: 0 0 0 2px #d97706;
}
.woordzoeker-cell.is-found {
  background: #34d399;
  color: white;
  cursor: default;
}
.woordzoeker-cell.is-found:active { transform: none; }
@media (max-width: 480px) {
  .woordzoeker-cell { font-size: 14px; }
}
.woordzoeker-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  margin: 6px auto 0;
  max-width: 480px;
}
.woordzoeker-word {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text-muted, #6b46c1);
  padding: 3px 10px;
  background: #f3e8ff;
  border-radius: 999px;
}
.woordzoeker-word.is-found {
  text-decoration: line-through;
  background: #d1fae5;
  color: #047857;
}

/* ═══════════════════════════════════════════════════════════════
   Sprint 59 — RICHTING 1 "WARME VOS" HOME REDESIGN
   Appended as an override block (base styles above untouched) so the
   pre-redesign look is restorable from git checkpoint 626e705.
   Palette: warm paper ground, violet-tinted ink, per-category tiles.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --r1-paper-1:#FBF6EA; --r1-paper-2:#F3E7D2;
  --r1-ink:#2C1B4A; --r1-ink-soft:#6B5C86;
  --r1-card:#FFFDF8;
}

body {
  background:
    radial-gradient(90% 55% at 18% 0%, rgba(109,59,235,.12), transparent 60%),
    radial-gradient(80% 50% at 92% 0%, rgba(240,138,60,.14), transparent 58%),
    linear-gradient(170deg,#efe7f6,#f6eede 60%) fixed;
}

/* ── Home header: transparent, big warm greeting, gold coin pill ── */
#screen-home .app-header--compact {
  background: none;
  box-shadow: none;
  border: none;
  padding: 6px 2px 2px;
}
#screen-home .app-header--compact::before,
#screen-home .app-header--compact::after { display: none; }
#screen-home .profile-indicator {
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--r1-ink);
  text-shadow: none;
  background: none;
  padding: 0;
}
#screen-home .app-logo-lockup--mini { display: none; }
#screen-home .balance-display {
  background: linear-gradient(160deg,#fffdf5,#fdeecb);
  color: #8a5a10;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow:
    0 1px 2px rgba(44,27,74,.06),
    0 6px 16px -6px rgba(242,167,44,.55),
    inset 0 1px 0 rgba(255,255,255,.9);
  border: none;
  text-shadow: none;
}

/* ── Engagement chips: 4-up grid of stacked mini-cards ── */
#screen-home .home-engagement-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 12px 0 16px;
}
#screen-home .engagement-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px 8px;
  border-radius: 18px;
  background: linear-gradient(180deg,#fffdf8,#fdf4e6);
  border: none;
  box-shadow:
    0 1px 2px rgba(44,27,74,.05),
    0 8px 18px -12px rgba(44,27,74,.5),
    inset 0 1px 0 #fff;
  color: var(--r1-ink);
  font-family: inherit;
  text-shadow: none;
}
#screen-home .engagement-chip.hidden { display: none; }
#screen-home .engagement-chip .chip-ico { font-size: 21px; line-height: 1.15; }
#screen-home .engagement-chip b {
  font-size: 14.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--r1-ink);
}
#screen-home .engagement-chip small {
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--r1-ink-soft);
}

/* ── Exercise CTAs: white dimensional cards + colored tiles ── */
#screen-home .btn-cta {
  background: linear-gradient(180deg,var(--r1-card),#fbf5ea);
  color: var(--r1-ink);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  padding: 12px 14px;
  gap: 13px;
  box-shadow:
    0 1px 2px rgba(44,27,74,.04),
    0 5px 12px rgba(44,27,74,.05),
    0 16px 30px -18px rgba(44,27,74,.30),
    inset 0 1px 0 rgba(255,255,255,.9);
}
#screen-home .btn-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(44,27,74,.05),
    0 10px 20px rgba(44,27,74,.08),
    0 24px 44px -20px rgba(44,27,74,.4);
}
#screen-home .btn-cta__title {
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', sans-serif;
  color: var(--r1-ink);
  font-size: 17px;
  letter-spacing: -0.01em;
}
#screen-home .btn-cta__icon {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.5),
    inset 0 -6px 12px rgba(0,0,0,.14),
    0 8px 16px -8px rgba(0,0,0,.4);
}
#btn-start-comprehension .btn-cta__icon { background: radial-gradient(120% 120% at 30% 20%,#8b5cf6,#5b21b6); }
#btn-start-math          .btn-cta__icon { background: radial-gradient(120% 120% at 30% 20%,#34d6a2,#0f9c72); }
#btn-start-spelling      .btn-cta__icon { background: radial-gradient(120% 120% at 30% 20%,#ffd968,#e6982a); }
#btn-start-lezen         .btn-cta__icon { background: radial-gradient(120% 120% at 30% 20%,#ff9a86,#e85b46); }
#btn-start-schrijven     .btn-cta__icon { background: radial-gradient(120% 120% at 30% 20%,#ff8ec2,#d84f92); }

#screen-home .btn-cta__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}
#screen-home .btn-cta__bar {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: #ece1cf;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(44,27,74,.12);
}
#screen-home .btn-cta__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width .4s ease;
}
#btn-start-comprehension .btn-cta__bar i { background: linear-gradient(90deg,#8b5cf6,#6d3beb); }
#btn-start-math          .btn-cta__bar i { background: linear-gradient(90deg,#34d6a2,#0f9c72); }
#btn-start-spelling      .btn-cta__bar i { background: linear-gradient(90deg,#ffd968,#e6982a); }
#btn-start-lezen         .btn-cta__bar i { background: linear-gradient(90deg,#ff9a86,#e85b46); }
#btn-start-schrijven     .btn-cta__bar i { background: linear-gradient(90deg,#ff8ec2,#d84f92); }

#screen-home .btn-cta__sub {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--r1-ink-soft);
  opacity: 1;
  white-space: nowrap;
  width: auto;
}
#screen-home .btn-cta__arrow {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #6D3BEB;
  background: rgba(109,59,235,.10);
  opacity: 1;
}

/* Locked (category balance lock) — quiet grey wash */
#screen-home .btn-cta--locked {
  background: linear-gradient(180deg,#f0ede7,#e6e0d5);
  opacity: .82;
  cursor: not-allowed;
}
#screen-home .btn-cta--locked:hover { transform: none; }
#screen-home .btn-cta--locked .btn-cta__icon { filter: grayscale(.75); opacity: .75; }
#screen-home .btn-cta--locked .btn-cta__bar { display: none; }
#screen-home .btn-cta--locked .btn-cta__sub { white-space: normal; }
#screen-home .btn-cta--locked .btn-cta__arrow { opacity: .35; }

/* ── Lucas hero: warm card, floating mascot ── */
#screen-home .lucas-hero {
  background: linear-gradient(165deg,#fff7ea,#fde8cf);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(44,27,74,.05),
    0 16px 30px -18px rgba(218,95,30,.45),
    inset 0 1px 0 rgba(255,255,255,.9);
}
#screen-home .lucas-hero__portrait .lucas-svg {
  animation: lucasFloat 5.5s ease-in-out infinite;
}
@keyframes lucasFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── Winkel + Spelletjes side by side ── */
#screen-home .home-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 12px;
}
#screen-home .home-duo .shop-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  margin: 0;
  border-radius: 22px;
  background: linear-gradient(165deg,#fff5da,#fbe4b0);
  border: none;
  color: #7a5410;
  box-shadow:
    0 1px 2px rgba(44,27,74,.05),
    0 14px 26px -16px rgba(44,27,74,.4),
    inset 0 1px 0 rgba(255,255,255,.7);
}
#screen-home .home-duo .shop-card__icon { font-size: 24px; }
#screen-home .home-duo .shop-card__title {
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: inherit;
}
#screen-home .home-duo .shop-card__sub {
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  opacity: .75;
}
#screen-home .home-duo .shop-card--games {
  background: linear-gradient(165deg,#efe7ff,#d7c6fb);
  color: #3f2382;
}

@media (prefers-reduced-motion: reduce) {
  #screen-home .lucas-hero__portrait .lucas-svg { animation: none; }
  #screen-home .btn-cta__bar i { transition: none; }
}

/* Sprint 59 — on desktop (≥1024px) the sidebar already links Winkel +
   Spelletjes; desktop.css long hid #btn-home-shop for that reason.
   Hide the whole duo row so Spelletjes doesn't sit alone stretched. */
@media (min-width: 1024px) {
  #screen-home .home-duo { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Sprint 60 — RICHTING 1 FULL ROLLOUT (all screens + desktop polish)
   Same override-block strategy as Sprint 59; base styles untouched.
   ═══════════════════════════════════════════════════════════════ */

/* ── Screen headers everywhere: softer violet, no star row ── */
.app-header {
  background: linear-gradient(150deg,#7C4DEF 0%,#5B2BC4 60%,#4A1D9E 100%);
  border-radius: 24px;
  box-shadow:
    0 2px 4px rgba(44,27,74,.08),
    0 18px 34px -18px rgba(74,29,158,.55),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.app-header::before { content: none; }

/* ── Buttons ── */
.btn--primary {
  background: linear-gradient(160deg,#7C4DEF,#5B2BC4);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow:
    0 2px 4px rgba(44,27,74,.10),
    0 10px 22px -10px rgba(74,29,158,.65),
    inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow: none;
}
.btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn--primary:active { transform: scale(.98); filter: none; }
.btn--secondary, .btn--outline {
  background: linear-gradient(180deg,#FFFDF8,#F6EDDE);
  color: #5B2BC4;
  border: 1.5px solid rgba(109,59,235,.25);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(44,27,74,.06), inset 0 1px 0 #fff;
  text-shadow: none;
}
.btn--secondary:hover, .btn--outline:hover { border-color: rgba(109,59,235,.45); }
.btn--back {
  background: linear-gradient(180deg,#FFFDF8,#F3E9DA);
  color: #2C1B4A;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(44,27,74,.08), 0 6px 14px -8px rgba(44,27,74,.35), inset 0 1px 0 #fff;
  text-shadow: none;
}

/* ── Answer options: warm white cards, colored states ── */
.btn--answer {
  background: linear-gradient(180deg,#FFFDF8,#FBF3E6);
  color: #2C1B4A;
  border: 1.5px solid rgba(44,27,74,.08);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(44,27,74,.04),
    0 8px 18px -12px rgba(44,27,74,.35),
    inset 0 1px 0 rgba(255,255,255,.9);
  text-shadow: none;
}
.btn--answer:hover {
  border-color: rgba(109,59,235,.45);
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(44,27,74,.06),
    0 12px 24px -12px rgba(74,29,158,.4),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.btn--answer.correct {
  background: linear-gradient(160deg,#34D6A2,#0F9C72);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(15,156,114,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--answer.wrong {
  background: linear-gradient(160deg,#FF9A86,#E0553C);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(224,85,60,.6), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ── Modals: warm cards ── */
.modal-box {
  background: linear-gradient(180deg,#FFFDF8,#FBF3E6);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow:
    0 2px 6px rgba(44,27,74,.12),
    0 40px 80px -30px rgba(44,27,74,.55),
    inset 0 1px 0 #fff;
}

/* ── Desktop polish (≥1024): warm sidebar + centered home column ── */
@media (min-width: 1024px) {
  #app-sidebar {
    background: linear-gradient(180deg,#FDF9F0,#F4EADB);
    border-right: 1px solid rgba(44,27,74,.07);
    box-shadow: inset -12px 0 24px -18px rgba(44,27,74,.12);
  }
  #app-sidebar .sidebar-brand-name { color: #2C1B4A; }
  #app-sidebar .sidebar-section-label { color: #6B5C86; }
  #app-sidebar .sidebar-nav button,
  #app-sidebar .sidebar-secondary button {
    color: #2C1B4A;
    border-radius: 14px;
  }
  #app-sidebar .sidebar-nav button:hover,
  #app-sidebar .sidebar-secondary button:hover {
    background: rgba(109,59,235,.08);
  }
  #app-sidebar .sidebar-nav button.is-active {
    background: linear-gradient(160deg,#7C4DEF,#5B2BC4);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(74,29,158,.6);
  }
  #app-sidebar .sidebar-balance {
    background: linear-gradient(160deg,#fffdf5,#fdeecb);
    color: #8a5a10;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(44,27,74,.06), inset 0 1px 0 rgba(255,255,255,.9);
  }

  /* Home: keep content in a comfortable reading column */
  #screen-home .app-header--compact,
  #screen-home .home-engagement-strip,
  #screen-home .home-cta-stack,
  #screen-home .lucas-hero {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  #screen-home .home-engagement-strip { max-width: 720px; margin-left: 0; }
  #screen-home .btn-cta__icon { width: 56px; height: 56px; font-size: 28px; }
  #screen-home .btn-cta__title { font-size: 18px; }
  #screen-home .lucas-hero { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════
   Sprint 61 — RICHTING 1 FINAL PASS
   Shop, spelletjes, result screens, parent portal, trofeeën, rewards.
   ═══════════════════════════════════════════════════════════════ */

/* ── Result screens: warm celebration card ── */
.result-screen {
  background: linear-gradient(180deg,#FFFDF8,#FBF3E6);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 26px;
  box-shadow:
    0 2px 6px rgba(44,27,74,.08),
    0 30px 60px -28px rgba(44,27,74,.45),
    inset 0 1px 0 #fff;
  color: #2C1B4A;
}
.result-title { color: #2C1B4A; }
.result-score { color: #6B5C86; }
.result-earned {
  background: linear-gradient(160deg,#fffdf5,#fdeecb);
  color: #8a5a10;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(44,27,74,.06);
  border: none;
}
.result-xp {
  background: linear-gradient(160deg,#efe7ff,#ddd0f6);
  color: #4A1D9E;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(44,27,74,.06);
  border: none;
}

/* ── Shop: tab bar + garderobe ── */
.shop-tabs {
  background: linear-gradient(180deg,#FFFDF8,#F6EDDE);
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 1px 2px rgba(44,27,74,.06), inset 0 1px 0 #fff;
  border: 1px solid rgba(255,255,255,.7);
}
.shop-tab { border-radius: 999px; color: #6B5C86; }
.shop-tab--active.shop-tab--garderobe,
.shop-tab--active.shop-tab--themes,
.shop-tab--active.shop-tab--games,
.shop-tab--active {
  background: linear-gradient(160deg,#7C4DEF,#5B2BC4);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(74,29,158,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.garderobe-preview {
  background: linear-gradient(165deg,#fff7ea,#fde8cf);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(44,27,74,.05), 0 16px 30px -18px rgba(218,95,30,.4), inset 0 1px 0 rgba(255,255,255,.9);
}
.shop-section-title { color: #2C1B4A; }
.shop-item {
  background: linear-gradient(180deg,#FFFDF8,#FBF3E6);
  border: 1.5px solid rgba(44,27,74,.07);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(44,27,74,.04), 0 10px 20px -14px rgba(44,27,74,.35), inset 0 1px 0 rgba(255,255,255,.9);
}
.lucas-set {
  background: linear-gradient(180deg,#FFFDF8,#FBF3E6);
  border: 1.5px solid rgba(44,27,74,.07);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(44,27,74,.04), 0 12px 24px -16px rgba(44,27,74,.35), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Spelletjes: warm game cards, violet accents ── */
.blokken-card {
  background: linear-gradient(180deg,#FFFDF8,#FBF3E6);
  border: 1.5px solid rgba(44,27,74,.08);
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(44,27,74,.04),
    0 14px 28px -18px rgba(44,27,74,.4),
    inset 0 1px 0 rgba(255,255,255,.9);
  color: #2C1B4A;
}
.blokken-card:hover { border-color: rgba(109,59,235,.4); transform: translateY(-2px); }
.blokken-card__title { color: #2C1B4A; }
.blokken-card__sub { color: #6B5C86; }
.blokken-card__highscore { color: #6B5C86; }
.blokken-card__price {
  background: linear-gradient(160deg,#fffdf5,#fdeecb);
  color: #8a5a10;
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(44,27,74,.08);
}

/* ── Parent portal menu ── */
.portal-menu-item {
  background: linear-gradient(180deg,#FFFDF8,#FBF3E6);
  border: 1.5px solid rgba(44,27,74,.07);
  border-radius: 18px;
  color: #2C1B4A;
  box-shadow: 0 1px 2px rgba(44,27,74,.04), 0 8px 18px -14px rgba(44,27,74,.35), inset 0 1px 0 rgba(255,255,255,.9);
}
.portal-menu-item:hover { border-color: rgba(109,59,235,.4); }

/* ── Rewards + trofeeën ── */
.reward-item {
  background: linear-gradient(180deg,#FFFDF8,#FBF3E6);
  border: 1.5px solid rgba(44,27,74,.07);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(44,27,74,.04), 0 10px 20px -14px rgba(44,27,74,.35), inset 0 1px 0 rgba(255,255,255,.9);
}
.badge-tile {
  background: linear-gradient(180deg,#FFFDF8,#FBF3E6);
  border: 1.5px solid rgba(44,27,74,.07);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(44,27,74,.04), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ================================================================
   SPRINT 64 — HOME V3 (approved "Home v2" mockup, juli 2026)
   Sidebar-less home, identical on desktop and mobile: slim topbar
   (brand | coin pill + Ouders chip), hero band (Springvos + weekday
   + greeting + growth pill + drawn chips), 5 uniform gradient tiles
   with white monoline icons, Winkel/Spelletjes/Beloningen row.
   Everything scoped to #screen-home / .home-v3. The id-based
   selectors below deliberately out-specify desktop.css's generic
   .screen / body .screen-inner !important rules.
   ================================================================ */

/* Id-only selector: the app boots in design-v1 and strips every
   screen--v2-* class, so scoping on that class would never match.
   #screen-home (1-0-0) still out-specifies desktop.css's
   `.screen { background !important }` (0-1-0). */
#screen-home {
  background:
    radial-gradient(80% 50% at 15% 0%, rgba(109, 59, 235, .12), transparent 60%),
    radial-gradient(70% 45% at 90% 0%, rgba(240, 138, 60, .14), transparent 58%),
    linear-gradient(170deg, #efe7f6, #f6eede 60%) !important;
}
/* Old v2 scene + waving-character overlays are retired on home. */
#screen-home .screen-bg,
#screen-home .screen-character { display: none !important; }
/* Legacy incentive-mode buttons: superseded by the row3 cards. */
#screen-home .home-mode-buttons { display: none !important; }
#screen-home .home-tertiary-buttons { display: none !important; }

#screen-home .screen-inner.home-v3 {
  max-width: 1080px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 12px 20px 70px !important;
}
@media (min-width: 1024px) {
  #screen-home .screen-inner.home-v3 { padding: 16px 28px 80px !important; }
}

/* ── Topbar ─────────────────────────────────────────────────── */
.home-v3 .home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;          /* ultra-narrow screens: pills drop below the brand */
  gap: 8px 10px;
  padding: 6px 0 4px;
}
.home-v3 .home-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #2C1B4A;
}
.home-v3 .home-brand svg { width: 29px; height: 34px; display: block; }
.home-v3 .home-top-r { display: flex; align-items: center; gap: 8px; }
.home-v3 .coin-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 9px;
  border-radius: 999px;
  background: linear-gradient(160deg, #fffdf5, #fdeecb);
  color: #8a5a10;
  font-weight: 800;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(44, 27, 74, .06), 0 6px 16px -6px rgba(242, 167, 44, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.home-v3 .coin-pill svg { width: 18px; height: 18px; display: block; }
.home-v3 .ouders-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFDF8, #F3E9DA);
  color: #2C1B4A;
  font-family: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(44, 27, 74, .08), inset 0 1px 0 #fff;
  transition: transform .12s ease;
}
.home-v3 .ouders-chip:active { transform: scale(.96); }
.home-v3 .ouders-chip svg { width: 16px; height: 16px; display: block; }

/* ── Hero band ──────────────────────────────────────────────── */
.home-v3 .home-hero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 0 18px;
}
.home-v3 .home-hero__fox {
  flex: none;
  width: 120px;
  height: 120px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 12px 16px rgba(218, 95, 30, .28));
}
.home-v3 .home-hero__fox span { display: block; width: 100%; height: 100%; }
.home-v3 .home-hero__fox svg { width: 100%; height: 100%; display: block; }
/* Sprint 73 — de vos zelf huppelt BINNEN de svg (.lucas-bob); de
   gekochte achtergrond-scène en de schaduw staan stil. Voorheen
   bewoog de hele svg mee en leek de vos niet meer te springen zodra
   er een achtergrond aanstond. -12px is in 240-viewBox-eenheden. */
.home-v3 .home-hero__fox .lucas-bob { animation: lucasSvgBob 5.5s ease-in-out infinite; }
@keyframes homeV3Bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes lucasSvgBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-v3 .home-hero__fox,
  .home-v3 .home-hero__fox .lucas-bob { animation: none; }
}
.home-v3 .home-hero__greet { flex: 1; min-width: 210px; }
.home-v3 .home-hero__title {
  margin: 2px 0 7px;
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  font-size: 27px;
  letter-spacing: -.015em;
  color: #2C1B4A;
  line-height: 1.12;
}
/* Engagement chips — Sprint 59 stacked layout, re-tuned to the
   mockup card look + drawn SVG icons. */
.home-v3 .home-chips { display: flex; gap: 10px; }
.home-v3 .engagement-chip {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 4px 9px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf8, #fdf4e6);
  color: #2C1B4A;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(44, 27, 74, .05), 0 8px 18px -12px rgba(44, 27, 74, .5), inset 0 1px 0 #fff;
  transition: transform .12s ease;
}
.home-v3 .engagement-chip:active { transform: scale(.95); }
.home-v3 .engagement-chip .chip-ico { line-height: 0; }
.home-v3 .engagement-chip .chip-ico svg { width: 24px; height: 24px; display: block; }
.home-v3 .engagement-chip b { font-size: 15px; font-variant-numeric: tabular-nums; }
.home-v3 .engagement-chip small {
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6B5C86;
  font-weight: 700;
}
.home-v3 .engagement-chip.chip--dormant .chip-ico { filter: grayscale(1); opacity: .5; }

/* ── 5 uniform category tiles ───────────────────────────────── */
.home-v3 .home-cats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.home-v3 .cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 18px 10px 14px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFDF8, #fbf5ea);
  color: #2C1B4A;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(44, 27, 74, .04), 0 5px 12px rgba(44, 27, 74, .05), 0 16px 30px -18px rgba(44, 27, 74, .3), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .15s ease;
}
.home-v3 .cat:hover  { transform: translateY(-3px); }
.home-v3 .cat:active { transform: scale(.97); }
.home-v3 .cat__tile {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .5), inset 0 -6px 12px rgba(0, 0, 0, .16), 0 8px 16px -8px rgba(0, 0, 0, .4);
}
.home-v3 .cat__tile svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-v3 .cat__tile text { fill: #fff; stroke: none; font-weight: 800; }
.home-v3 .cat__tile--comp      { background: radial-gradient(120% 120% at 30% 20%, #8b5cf6, #5b21b6); }
.home-v3 .cat__tile--math      { background: radial-gradient(120% 120% at 30% 20%, #34d6a2, #0f9c72); }
.home-v3 .cat__tile--spelling  { background: radial-gradient(120% 120% at 30% 20%, #ffd968, #e6982a); }
.home-v3 .cat__tile--lezen     { background: radial-gradient(120% 120% at 30% 20%, #ff9a86, #e85b46); }
.home-v3 .cat__tile--schrijven { background: radial-gradient(120% 120% at 30% 20%, #ff8ec2, #d84f92); }
.home-v3 .cat__name {
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 14.5px;
  line-height: 1.15;
  text-align: center;
  letter-spacing: -.01em;
}
.home-v3 .cat__pause {
  font-size: 10.5px;
  font-weight: 800;
  color: #B4530F;
}
/* Sprint 51 category-balance lock — visual only; the click no-op
   lives in _guardedStart (app.js). */
.home-v3 .cat--locked {
  opacity: .6;
  cursor: not-allowed;
}
.home-v3 .cat--locked:hover { transform: none; }
.home-v3 .cat--locked .cat__tile { filter: grayscale(.65) brightness(.92); }

/* ── Winkel / Spelletjes / Beloningen row ───────────────────── */
.home-v3 .home-row3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.home-v3 .soft-card {
  min-width: 0;             /* let grid tracks shrink below content width */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 1px 2px rgba(44, 27, 74, .05), 0 14px 26px -16px rgba(44, 27, 74, .4), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .15s ease;
}
.home-v3 .soft-card:hover  { transform: translateY(-2px); }
.home-v3 .soft-card:active { transform: scale(.97); }
.home-v3 .soft-card__ic {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, .4), inset 0 -4px 8px rgba(0, 0, 0, .15);
}
.home-v3 .soft-card__ic svg {
  width: 21px;
  height: 21px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-v3 .soft-card__t {
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
}
.home-v3 .soft-card--shop  { background: linear-gradient(165deg, #fff5da, #fbe4b0); color: #7a5410; }
.home-v3 .soft-card--shop .soft-card__ic  { background: radial-gradient(120% 120% at 30% 20%, #f2b950, #c8861d); }
.home-v3 .soft-card--games { background: linear-gradient(165deg, #efe7ff, #d7c6fb); color: #3f2382; }
.home-v3 .soft-card--games .soft-card__ic { background: radial-gradient(120% 120% at 30% 20%, #8b5cf6, #5b21b6); }
.home-v3 .soft-card--rew   { background: linear-gradient(165deg, #ffe9f2, #fbcfe0); color: #8f2b5c; }
.home-v3 .soft-card--rew .soft-card__ic   { background: radial-gradient(120% 120% at 30% 20%, #ff8ec2, #d84f92); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .home-v3 .home-cats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .home-v3 .home-chips { flex-basis: 100%; }
  .home-v3 .engagement-chip { flex: 1; width: auto; min-width: 0; }
}
@media (max-width: 600px) {
  .home-v3 .home-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-v3 .soft-card--rew { grid-column: 1 / -1; }
  .home-v3 .soft-card { gap: 9px; padding: 13px 12px; }
}
@media (max-width: 360px) {
  .home-v3 .home-row3 { grid-template-columns: 1fr; }
  .home-v3 .soft-card--rew { grid-column: auto; }
}
@media (max-width: 560px) {
  .home-v3 .home-hero { gap: 12px; padding: 12px 0 16px; }
  .home-v3 .home-hero__fox { width: 88px; height: 88px; }
  .home-v3 .home-hero__greet { min-width: 150px; }
  .home-v3 .home-hero__title { font-size: 21px; }
  .home-v3 .home-cats { gap: 9px; }
  .home-v3 .cat { padding: 14px 8px 12px; border-radius: 18px; gap: 7px; }
  .home-v3 .cat__tile { width: 48px; height: 48px; border-radius: 14px; }
  .home-v3 .cat__tile svg { width: 24px; height: 24px; }
  .home-v3 .cat__name { font-size: 12.5px; }
  .home-v3 .home-brand { font-size: 19px; }
  .home-v3 .home-brand svg { width: 26px; height: 30px; }
  .home-v3 .coin-pill { font-size: 13.5px; padding: 6px 11px 6px 8px; }
  .home-v3 .ouders-chip { font-size: 12.5px; padding: 7px 12px; }
}

/* ================================================================
   SPRINT 65 — LANDINGSPAGINA / SIGN-IN (mockup "Richting A")
   Zelfde warme taal als Home v3: gradient-ondergrond, brand-rij,
   hero met pitch + Springvos + inlogkaart, vier feature-kaartjes,
   de vijf vak-tegels, voetregel. Id-scoped zodat de generieke
   desktop.css .screen / body .screen-inner !important-regels het
   afleggen (zelfde truc als Sprint 64).
   ================================================================ */

/* Sprint 118 — de oude lila Sprint-103-gradient is verwijderd; de
   lucht komt uit de confetti-laag verderop (die daardoor zijn
   !important zou kunnen verliezen — bewust gelaten: de desktop.css-
   reset zet nog altijd een eigen achtergrond met gewicht). */
#screen-signin .screen-bg,
#screen-signin .screen-character { display: none !important; }

#screen-signin .screen-inner.signin-v3 {
  display: block !important;
  max-width: 1040px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 8px 22px 90px !important;
}
@media (min-width: 1024px) {
  #screen-signin .screen-inner.signin-v3 { padding: 10px 28px 70px !important; }
}


/* ── Hero: pitch | vos | inlogkaart ─────────────────────────── */
.signin-v3 .sv3-hero {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 26px 0 6px;
  flex-wrap: wrap;
}
.signin-v3 .sv3-pitch { flex: 1.2; min-width: 280px; }
.signin-v3 .sv3-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6B5C86;
}
.signin-v3 .sv3-pitch h1 {
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #2C1B4A;
  margin: 8px 0 14px;
  text-wrap: balance;
}
.signin-v3 .sv3-pitch h1 em { font-style: normal; color: #6D3BEB; }
.signin-v3 .sv3-pitch p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #4a3a68;
  max-width: 52ch;
  margin: 0;
}
.signin-v3 .sv3-fox {
  flex: none;
  width: 130px; /* Sprint 103 — −30%: CTA bij de vouw */
  align-self: flex-end;
  /* Sprint 118 — zachte gloed weg: de hertekende vos heeft zijn
     eigen inkt-grondellips, passend bij de blokschaduw-taal. */
  animation: homeV3Bob 5.5s ease-in-out infinite;
}
.signin-v3 .sv3-fox svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) {
  .signin-v3 .sv3-fox { animation: none; }
}

/* Inlogkaart */
.signin-v3 .sv3-login {
  flex: 1;
  min-width: 280px;
  max-width: 360px;
  background: linear-gradient(180deg, #FFFDF8, #FBF3E6);
  border-radius: 24px;
  padding: 24px 22px 16px;
  box-shadow: 0 2px 4px rgba(44, 27, 74, .06), 0 24px 48px -24px rgba(44, 27, 74, .4), inset 0 1.5px 0 #fff;
}
.signin-v3 .sv3-gbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  background: linear-gradient(160deg, #7C4DEF, #5B2BC4);
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 2px 4px rgba(44, 27, 74, .12), 0 12px 24px -10px rgba(91, 43, 196, .65), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .12s ease;
}
.signin-v3 .sv3-gbtn:hover  { transform: translateY(-1px); }
.signin-v3 .sv3-gbtn:active { transform: scale(.98); }
.signin-v3 .sv3-gmark {
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
.signin-v3 .sv3-gmark svg { width: 13px; height: 13px; display: block; }

/* Sprint 79 — Sign in with Apple. Apple HIG: zwart vlak, witte tekst +
   logo, even prominent als de andere knop. Zelfde vorm/afmeting als de
   Google-knop; 8px marge erboven zodat ze los van elkaar leesbaar zijn. */
.signin-v3 .sv3-abtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 14px 18px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  background: #000;
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 12px 24px -12px rgba(0, 0, 0, .5);
  transition: transform .12s ease;
}
.signin-v3 .sv3-abtn:hover  { transform: translateY(-1px); }
.signin-v3 .sv3-abtn:active { transform: scale(.98); }
.signin-v3 .sv3-amark { display: grid; place-items: center; flex: none; }
.signin-v3 .sv3-amark svg { width: 19px; height: 19px; display: block; margin-top: -2px; }

.signin-v3 .sv3-guest {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 8px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #6D3BEB;
  font-weight: 800;
  font-size: 13.5px;
}
.signin-v3 .sv3-guest:hover { text-decoration: underline; }

/* ── Feature-kaartjes ───────────────────────────────────────── */

/* ── Vak-tegels ─────────────────────────────────────────────── */

.signin-v3 .sv3-foot {
  text-align: center;
  font-size: 12px;
  color: #8a7ba3;
  font-weight: 600;
  margin-top: 30px;
}

/* ── Smal scherm: vos boven de pitch, kaart eronder ─────────── */
@media (max-width: 760px) {
  .signin-v3 .sv3-hero { gap: 14px; padding-top: 10px; }
  .signin-v3 .sv3-fox {
    order: -1;
    width: 90px; /* Sprint 103 — −30%: CTA binnen één schermhoogte */
    align-self: center;
    margin: 0 auto;
    flex-basis: 100%;
  }
  .signin-v3 .sv3-fox svg { width: 90px; margin: 0 auto; }
  .signin-v3 .sv3-pitch { text-align: center; }
  .signin-v3 .sv3-pitch p { margin: 0 auto; }
  .signin-v3 .sv3-login { max-width: none; }
}

/* ── Sprint 103 — demo-kaart, 6 tegels, compacte features ─────── */
.signin-v3 .sv3-demo {
  margin-top: 18px;
  background: linear-gradient(180deg, #FFFDF8, #FBF3E6);
  border-radius: 24px;
  padding: 22px 20px 18px;
  box-shadow: 0 2px 4px rgba(44, 27, 74, .06), 0 24px 48px -24px rgba(44, 27, 74, .4), inset 0 1.5px 0 #fff;
}
.signin-v3 .sv3-demo h2 {
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  font-size: 18px;
  color: #2C1B4A;
  margin: 0 0 4px;
}
.signin-v3 .sv3-demo__sub { font-size: 13.5px; color: #6B5C86; margin-bottom: 12px; }
.signin-v3 .sv3-demo__row { display: flex; gap: 8px; }
.signin-v3 .sv3-demo__input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 2px solid #E4D9F5;
  border-radius: 14px;
  font: inherit;
  font-size: 15px;
  background: #fff;
}
.signin-v3 .sv3-demo__input:focus { outline: none; border-color: #6D3BEB; }
.signin-v3 .sv3-demo__go {
  flex: none;
  width: 48px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #7C4DFF, #6D3BEB);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(109, 59, 235, .6);
}
.signin-v3 .sv3-demo__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.signin-v3 .sv3-chip {
  border: 1.5px solid #E4D9F5;
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #4a3a68;
  cursor: pointer;
}
.signin-v3 .sv3-chip:active { transform: scale(.96); }
.signin-v3 .sv3-demo__sample {
  margin-top: 14px;
  background: #fff;
  border: 1.5px solid #EFE6DA;
  border-radius: 16px;
  padding: 14px 14px 12px;
}
.signin-v3 .sv3-demo__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6D3BEB;
  background: #F1EBFF;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.signin-v3 .sv3-demo__text { font-size: 15px; line-height: 1.55; color: #2C1B4A; }
.signin-v3 .sv3-demo__text em { font-style: normal; color: #6B5C86; }
.signin-v3 .sv3-demo__more {
  margin-top: 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: #6D3BEB;
  cursor: pointer;
  padding: 4px 0;
}
.signin-v3 .sv3-demo__more[disabled] { opacity: .5; cursor: default; }

/* Engels-tegelkleur (wereldbol) */

/* Compacte feature-kaarten: 2 kolommen, derde over de volle breedte.
   min-width: 0 op kaart én tekstkolom — de basisstijl eist 225px en
   dat blies de rechterkaart uit de 380px-grid (veldscreenshot). */

/* Tegel-sectie kreeg zijn ruimte vroeger van de feats-blok erboven;
   sinds de herordening (tegels vóór feats) hoort de marge hier. */

/* Sprint 103.2 — naam naast de springende vos (losse logoregel weg),
   en de demo-kop gecentreerd. */
.signin-v3 .sv3-fox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;             /* de rij (vos + naam) bepaalt zelf zijn breedte */
}
.signin-v3 .sv3-fox svg { flex: none; width: 130px; }
.signin-v3 .sv3-demo h2,
.signin-v3 .sv3-demo__sub { text-align: center; }
@media (max-width: 760px) {
  .signin-v3 .sv3-fox { width: auto; margin: 0 auto; }
  /* margin 0: de oudere svg-regel zette 'margin: 0 auto' en duwde
     daarmee de naam naar de rand in plaats van naast de vos. */
  .signin-v3 .sv3-fox svg { width: 90px; margin: 0; }
}

/* Gast-disclaimer in de wizard (Sprint 103 — verhuisd uit de inlogkaart) */
.wizard-guest-note {
  text-align: center;
  font-size: 12.5px;
  color: #6B5C86;
  margin: 6px 0 0;
}


/* ================================================================
   SPRINT 66 — HOME V3 DESKTOP-COMPOSITIE
   Op grote schermen oogde home leeg: compacte widgets tegen de
   bovenrand en een halve pagina cream eronder. Twee ingrepen:
   1) de topbar blijft boven, maar hero + tegels + onderste rij
      centreren als groep verticaal (auto-margins — verdwijnen
      vanzelf zodra de inhoud niet meer in de viewport past);
   2) alles schaalt een maat op (vos, koppen, chips, tegels).
   Mobiel (<1024px) blijft exact zoals het was.
   ================================================================ */
@media (min-width: 1024px) {
  /* Sprint 66.1 — verticale centrering weer weg (gebruikersfeedback:
     de lucht tussen topbar en begroeting stoorde meer dan de lege
     ruimte onderaan). Inhoud start direct onder de topbar; de
     opgeschaalde maten blijven. */
  #screen-home .screen-inner.home-v3 {
    max-width: 1140px !important;
    padding: 20px 32px 32px !important;
  }
  .home-v3 .home-hero {
    padding: 20px 0 26px;
    gap: 26px;
  }
  .home-v3 .home-row3 { margin-top: 18px; gap: 16px; }

  .home-v3 .home-hero__fox { width: 152px; height: 152px; }
  .home-v3 .home-hero__title { font-size: 33px; }

  .home-v3 .engagement-chip { width: 96px; padding: 14px 6px 11px; border-radius: 20px; }
  .home-v3 .engagement-chip .chip-ico svg { width: 28px; height: 28px; }
  .home-v3 .engagement-chip b { font-size: 17px; }
  .home-v3 .engagement-chip small { font-size: 10px; }

  .home-v3 .home-cats { gap: 16px; }
  .home-v3 .cat { padding: 26px 12px 20px; gap: 12px; border-radius: 26px; }
  .home-v3 .cat__tile { width: 72px; height: 72px; border-radius: 21px; }
  .home-v3 .cat__tile svg { width: 34px; height: 34px; }
  .home-v3 .cat__name { font-size: 16px; }

  .home-v3 .soft-card { padding: 19px 20px; border-radius: 22px; }
  .home-v3 .soft-card__ic { width: 46px; height: 46px; border-radius: 15px; }
  .home-v3 .soft-card__ic svg { width: 24px; height: 24px; }
  .home-v3 .soft-card__t { font-size: 16.5px; }

  .home-v3 .home-brand { font-size: 22px; }
  .home-v3 .home-brand svg { width: 31px; height: 36px; }
  .home-v3 .coin-pill { font-size: 15px; }
  .home-v3 .ouders-chip { font-size: 14px; }
}

/* ================================================================
   SPRINT 69 — OUDERPORTAAL-SECTIES + RESULTAAT-BLOK ("lumio edits")
   1) Portaal: secties met labels; toggles gebundeld op het
      Vakken & spelletjes-subscherm.
   2) Resultaatschermen: verdiend geld + totaalsaldo als één
      cluster; XP-pil toont ook totaal-XP en teast de volgende
      spelletjes-unlock.
   ================================================================ */

.portal-section-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6B5C86;
  margin: 18px 6px 2px;
}
.portal-menu .portal-section-label:first-child { margin-top: 2px; }
@media (min-width: 1024px) {
  /* desktop-grid: labels over de volle breedte van beide kolommen */
  #screen-parent-portal .portal-menu .portal-section-label { grid-column: 1 / -1; }
}
.portal-subtitle {
  text-align: center;
  font-size: 13px;
  color: #6B5C86;
  font-weight: 600;
  margin: 6px 0 0;
}
#screen-portal-vakken .portal-menu--toggles { margin-top: 18px; }

/* Geld-cluster: verdiend bedrag groot, totaalsaldo er direct onder. */
.result-balance { margin-top: 2px; }
.result-xp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}
.result-xp__total { display: block; font-size: .78em; font-weight: 700; opacity: .75; }
.result-xp__next {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #B4530F;
  background: linear-gradient(165deg, #fff7ea, #fde8cf);
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(44, 27, 74, .06);
}

/* ================================================================
   SPRINT 72 — UITGAVEN IN GESCHIEDENIS + BELONING-CLAIMS
   Badge op de portaal-knop, afhandel-lijst op het Beloningen-scherm,
   "Gekocht!"-hint voor het kind.
   ================================================================ */
.portal-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(160deg, #7C4DEF, #5B2BC4);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 2px 6px rgba(91, 43, 196, .4);
}
#parent-rewards-claims { margin-bottom: 16px; }
.claim-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #FFFDF8, #FBF3E6);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 8px;
  box-shadow: 0 1px 2px rgba(44, 27, 74, .06), inset 0 1px 0 #fff;
}
.claim-row__text { flex: 1; min-width: 0; }
.claim-row__name { font-weight: 800; font-size: 14.5px; color: #2C1B4A; }
.claim-row__sub  { font-size: 12px; color: #6B5C86; font-weight: 600; }
.claim-row__btn {
  border: 0;
  border-radius: 12px;
  padding: 9px 12px;
  background: linear-gradient(160deg, #34d6a2, #0f9c72);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  flex: none;
}
.claim-row__btn:active { transform: scale(.96); }
.reward-item__claimed {
  font-size: 12px;
  font-weight: 800;
  color: #0f9c72;
  margin-top: 3px;
}

/* ================================================================
   SPRINT 74 — RESULTAATSCHERMEN HERONTWORPEN
   Eén samenhangende kolom (max 560px — knoppen even breed als de
   inhoud), getekende vaktegel i.p.v. emoji, score-regels als
   compacte chips, geld + XP samen in één warme beloningen-kaart,
   voortgang als subtiele regel. Geldt voor alle vijf vakken.
   ================================================================ */
body .screen-inner.result-screen {
  max-width: 560px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 34px 22px 60px !important;
}

/* Getekende vaktegel — zelfde beeldtaal als de home-tegels. */
.result-screen .result-tile {
  width: 64px;
  height: 64px;
  border-radius: 19px;
  margin: 4px auto 12px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .5), inset 0 -6px 12px rgba(0, 0, 0, .16), 0 10px 20px -10px rgba(0, 0, 0, .45);
}
.result-screen .result-tile svg {
  width: 30px;
  height: 30px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.result-screen .result-tile text { fill: #fff; stroke: none; font-weight: 800; }
.result-tile--comp      { background: radial-gradient(120% 120% at 30% 20%, #8b5cf6, #5b21b6); }
.result-tile--math      { background: radial-gradient(120% 120% at 30% 20%, #34d6a2, #0f9c72); }
.result-tile--spelling  { background: radial-gradient(120% 120% at 30% 20%, #ffd968, #e6982a); }
.result-tile--lezen     { background: radial-gradient(120% 120% at 30% 20%, #ff9a86, #e85b46); }
.result-tile--schrijven { background: radial-gradient(120% 120% at 30% 20%, #ff8ec2, #d84f92); }

.result-screen .result-title {
  text-align: center;
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  font-size: 26px;
  letter-spacing: -.015em;
  color: #2C1B4A;
  margin: 0 0 12px;
}

/* Score-regels: compacte chips die netjes wrappen (was: 5 losse
   gecentreerde tekstregels). Enkele score-tekst centreert als
   los flex-item net zo goed. */
.result-screen .result-score {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: #4a3a68;
}
.result-screen .result-score-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 253, 248, .85);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  box-shadow: 0 1px 2px rgba(44, 27, 74, .05), inset 0 1px 0 #fff;
}

/* Beloningen-kaart: geld + XP samen in één warme kaart (was: cream
   pil + kale regel + paarse pil door elkaar). */
.result-screen .result-rewards {
  background: linear-gradient(180deg, #FFFDF8, #FBF3E6);
  border-radius: 24px;
  padding: 18px 18px 16px;
  margin: 0 0 14px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(44, 27, 74, .06), 0 18px 36px -20px rgba(44, 27, 74, .35), inset 0 1.5px 0 #fff;
}
.result-screen .result-rewards .result-earned {
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 36px;
  line-height: 1.1;
  font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif;
  color: #8a5a10;
}
.result-screen .result-rewards .result-earned--repeat { font-size: 17px; color: #6B5C86; }
.result-screen .result-rewards .result-balance {
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: #6B5C86;
}
.result-screen .result-rewards .result-xp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 12px 0 0;
  margin: 12px 0 0;
  border-top: 1.5px dashed rgba(44, 27, 74, .14);
  font-weight: 800;
  color: #5B2BC4;
}
.result-screen .result-rewards .result-xp[hidden] { display: none; }

/* Voortgang: subtiele regel i.p.v. losse witte kaart. */
.result-screen .level-progress-area {
  background: none;
  border: 0;
  box-shadow: none;
  text-align: center;
  margin: 2px 0 20px;
  padding: 0;
}
.result-screen .level-progress-label {
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6B5C86;
  font-weight: 800;
  margin-bottom: 8px;
}
.result-screen .progress-dots { display: flex; justify-content: center; gap: 8px; }

.result-screen .result-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}

/* ================================================================
   SPRINT 75 — UITLEG-OVERLAY (fout antwoord)
   Scherm-over-alles: vos + grote uitlegtekst + Volgende-knop die
   pas klikbaar wordt na afloop van de audio (vangnet-timer in JS).
   ================================================================ */
.uitleg-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(44, 27, 74, .45);
  backdrop-filter: blur(3px);
}
.uitleg-overlay.hidden { display: none; }
.uitleg-card {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, #FFFDF8, #FBF3E6);
  border-radius: 26px;
  padding: 24px 22px 20px;
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(20, 8, 50, .6), inset 0 1.5px 0 #fff;
}
.uitleg-fox svg { width: 96px; height: 96px; }
.uitleg-bubble { margin: 8px 0 18px; }
.uitleg-icon { font-size: 22px; display: block; margin-bottom: 6px; }
.uitleg-text {
  font-size: 19px;
  line-height: 1.6;
  font-weight: 700;
  color: #2C1B4A;
  margin: 0;
}
.uitleg-next {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 15px 18px;
  background: linear-gradient(160deg, #7C4DEF, #5B2BC4);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 24px -10px rgba(91, 43, 196, .65), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .12s ease;
}
.uitleg-next:not(:disabled):active { transform: scale(.97); }
.uitleg-next:disabled {
  background: linear-gradient(160deg, #b9a8e6, #a291d8);
  cursor: wait;
  box-shadow: none;
}
@media (max-width: 480px) {
  .uitleg-text { font-size: 17px; }
}

/* ================================================================
   SPRINT 75.7 — GARDEROBE: PASKAMER + SECTIE-CHIPS + COMPACTE KAARTEN
   De vos blijft sticky in beeld tijdens het scrollen (live passen),
   chips springen naar een slot-sectie, en de itemkaarten zijn een
   maat kleiner zodat 149 items niet eindeloos scrollen.
   ================================================================ */
#shop-panel-garderobe .garderobe-paskamer {
  position: sticky;
  top: 8px;
  z-index: 30;
  background: linear-gradient(180deg, #FFFDF8, #FBF3E6);
  border-radius: 22px;
  padding: 10px 12px 12px;
  margin-bottom: 14px;
  box-shadow: 0 2px 4px rgba(44, 27, 74, .08), 0 16px 32px -14px rgba(44, 27, 74, .4), inset 0 1px 0 #fff;
}
/* De bestaande preview-kaart wordt kaal BINNEN de paskamer. */
#shop-panel-garderobe .garderobe-paskamer .garderobe-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
#shop-panel-garderobe .garderobe-paskamer .garderobe-preview__portrait svg {
  width: 84px;
  height: 84px;
  display: block;
}
#shop-panel-garderobe .garderobe-slotchips {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
#shop-panel-garderobe .garderobe-slotchips button {
  flex: 1;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 13px;
  background: linear-gradient(180deg, #fff, #F6EAD6);
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(44, 27, 74, .07), inset 0 1px 0 #fff;
  transition: transform .12s ease;
}
#shop-panel-garderobe .garderobe-slotchips button:active { transform: scale(.93); }
/* Anker-secties komen onder de sticky paskamer uit. */
#shop-panel-garderobe .shop-grid,
#shop-panel-garderobe .shop-section-title { scroll-margin-top: 212px; }

/* Compactere itemkaarten: kleinere vos, prijs klein (staat ook op de
   koopknop), strakkere padding — ± een derde minder scrollen. */
#shop-panel-garderobe .shop-item { padding: 10px 8px 10px; border-radius: 18px; }
#shop-panel-garderobe .shop-item__preview svg { width: 76px; height: 76px; }
#shop-panel-garderobe .shop-item__label { font-size: 13.5px; margin: 4px 0 2px; }
#shop-panel-garderobe .shop-item__price { font-size: 11px; opacity: .7; margin: 0 0 6px; }
#shop-panel-garderobe .shop-item__btn { padding: 9px 10px; font-size: 13px; border-radius: 12px; }

/* ================================================================
   SPRINT 76 — VORIGE-KNOP ZICHTBAARDER
   De ↺ Vorige-knop (rekenen/spelling, vanaf vraag 2) ging visueel
   op in de Terug-knop; ouders/kinderen zagen niet dat je terug kon
   naar de vorige vraag en gebruikten ← Terug (= stoppen-dialoog).
   ================================================================ */
.btn--prev-question {
  background: linear-gradient(180deg, #efe7ff, #d7c6fb) !important;
  color: #3f2382 !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 2px rgba(44, 27, 74, .08), inset 0 1px 0 #fff !important;
}

/* ================================================================
   SPRINT 77 — UITLEG ALS BODEMPANEEL (vraag blijft in beeld)
   Benchmark Squla/Snappet/Duolingo/IXL: uitleg verschijnt ONDER de
   vraag, met het gekozen (rode) en goede (groene) antwoord nog
   zichtbaar. Geen dekkende achtergrond, geen audio-slot meer;
   optionele 🔊-knop. Overschrijft de Sprint 75-overlayregels.
   ================================================================ */
.uitleg-overlay {
  inset: auto 0 0 0;
  display: block;
  padding: 0 10px 10px;
  background: none;
  backdrop-filter: none;
  pointer-events: none;
}
.uitleg-card {
  pointer-events: auto;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 14px 12px;
  border: 2px solid rgba(124, 77, 239, .3);
  border-radius: 22px;
  text-align: left;
  animation: uitlegSlideUp .28s ease-out;
  box-shadow: 0 -6px 40px -8px rgba(20, 8, 50, .35), 0 2px 4px rgba(44, 27, 74, .08), inset 0 1.5px 0 #fff;
}
@keyframes uitlegSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .uitleg-card { animation: none; }
}
.uitleg-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
}
.uitleg-icon { font-size: 20px; display: block; margin: 2px 0 0; }
.uitleg-fox { float: left; margin-right: 10px; }
.uitleg-fox svg { width: 56px; height: 56px; display: block; }
.uitleg-text {
  flex: 1;
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
  margin: 0;
}
.uitleg-speaker {
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 14px;
  background: linear-gradient(180deg, #efe7ff, #d7c6fb);
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(44, 27, 74, .08), inset 0 1px 0 #fff;
}
.uitleg-speaker:active { transform: scale(.93); }
@media (max-width: 480px) {
  .uitleg-text { font-size: 16px; }
}

/* ── Sprint 80.4 — privacy-links ────────────────────────────── */
/* Voetregel op de landingspagina: dezelfde grijstint als de rest
   van de regel, alleen een underline verraadt dat het klikbaar is. */
.signin-v3 .sv3-foot__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.signin-v3 .sv3-foot__link:hover { color: #6D3BEB; }
/* Portaal-item als <a>: .portal-menu-item is voor <button> geschreven;
   een anker erft daarvan alles behalve linkkleur en underline. */
.portal-menu-item--link {
  color: inherit;
  text-decoration: none;
}

/* ── Sprint 82 — vak Engels ─────────────────────────────────── */
/* 6e tegel: helderblauw, de enige nog vrije tint in de rij
   (paars/groen/goud/koraal/roze). */
.home-v3 .cat__tile--engels { background: radial-gradient(120% 120% at 30% 20%, #5EB2FF, #1D63D8); }
.result-tile--engels        { background: radial-gradient(120% 120% at 30% 20%, #5EB2FF, #1D63D8); }
/* 6 tegels: ≤900px wordt het vanzelf 3×2 (bestaande regel repeat(3,1fr));
   daarboven van 5 naar 6 kolommen zodat de rij één regel blijft.
   901px sluit exact aan op de max-width:900px-regel hierboven. */
@media (min-width: 901px) {
  .home-v3 .home-cats { grid-template-columns: repeat(6, 1fr); }
}
/* NL-vertaling onder een Engelse gatenzin — klein en gedempt. */
.engels-problem-sub {
  margin-top: 10px;
  font-size: 15px;
  color: #7A6A93;
  font-style: italic;
}

/* ── Sprint 84 — streak-viering ─────────────────────────────── */
/* Hergebruikt .levelup-overlay/.levelup-title/.levelup-subtitle;
   alleen de vlam en de extra-regel zijn eigen. */
.streak-flame {
  font-size: 100px;
  line-height: 1;
  display: block;
  animation: streak-flame-pop 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes streak-flame-pop {
  0%   { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  55%  { transform: scale(1.25) rotate(6deg);  opacity: 1; }
  75%  { transform: scale(0.95) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.streak-extra {
  margin-top: 14px;
  font-size: 19px;
  font-weight: 800;
  color: #9CD8FF;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
/* Sprint 84.1 — muntjes-bonusregel op de streak-pop-up. */
.streak-coins {
  margin-top: 14px;
  font-size: 21px;
  font-weight: 900;
  color: var(--gold-light, #fcd34d);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* ── Sprint 88 — kleuters (groep 1-2) ───────────────────────── */
/* Home: één grote speeltegel in plaats van het vakkenrooster. */
.kleuter-tile {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 26px 24px;
  border: 0;
  border-radius: 26px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  text-align: left;
  background: radial-gradient(130% 140% at 25% 15%, #2DD4BF, #0F766E);
  color: #fff;
  box-shadow: 0 4px 8px rgba(15, 118, 110, .18), 0 18px 34px -14px rgba(15, 118, 110, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .12s ease;
}
.kleuter-tile:hover  { transform: translateY(-2px); }
.kleuter-tile:active { transform: scale(.98); }
.kleuter-tile__emoji { font-size: 52px; line-height: 1; }
.kleuter-tile__text  { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.kleuter-tile__title { font-size: 21px; font-weight: 900; }
.kleuter-tile__sub   { font-size: 14px; font-weight: 700; opacity: .85; }
.kleuter-tile__play {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .22);
  border-radius: 50%;
  font-size: 22px;
}

/* Sessie: grote voorleesknop, groot toonvlak, 2×2 tikknoppen. */
.kleuter-speak {
  display: block;
  margin: 8px auto 4px;
  width: 84px; height: 84px;
  border: 0; border-radius: 50%;
  cursor: pointer;
  font-size: 40px;
  background: linear-gradient(160deg, #2DD4BF, #0F766E);
  color: #fff;
  box-shadow: 0 4px 10px rgba(15, 118, 110, .25), 0 14px 26px -12px rgba(15, 118, 110, .6);
  transition: transform .12s ease;
}
.kleuter-speak:active { transform: scale(.93); }
.kleuter-display {
  margin: 14px auto;
  padding: 18px 16px;
  max-width: 560px;
  background: var(--bg-card, #FFFDF8);
  border-radius: 22px;
  box-shadow: var(--shadow, 0 4px 14px rgba(44, 27, 74, .08));
  font-size: 44px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 6px;
  overflow-wrap: anywhere;
}
.kleuter-opties {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 560px;
  margin: 16px auto 0;
}
.kleuter-optie {
  min-height: 128px;
  border: 3px solid rgba(15, 118, 110, .12);
  border-radius: 24px;
  cursor: pointer;
  background: var(--bg-card, #FFFDF8);
  font-family: 'Nunito', sans-serif;
  font-size: 64px;
  line-height: 1.1;
  box-shadow: var(--shadow, 0 4px 14px rgba(44, 27, 74, .08));
  transition: transform .1s ease, border-color .15s;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: anywhere;
  padding: 10px;
}
.kleuter-optie:not(:disabled):hover  { transform: translateY(-2px); border-color: rgba(15, 118, 110, .35); }
.kleuter-optie:not(:disabled):active { transform: scale(.96); }
.kleuter-optie--cijfer { font-weight: 900; color: #0F766E; }
.kleuter-optie--groep  { font-size: 34px; letter-spacing: 2px; }
.kleuter-optie.correct { border-color: #22C55E; background: #F0FDF4; }
.kleuter-optie.wrong   { border-color: #EF4444; background: #FEF2F2; }
.result-tile--kleuters { background: radial-gradient(120% 120% at 30% 20%, #2DD4BF, #0F766E); }

/* Sprint 89 — warme vos-noot op resultaatschermen bij lage scores. */
.result-fox-note {
  max-width: 480px;
  margin: 10px auto 2px;
  padding: 12px 16px;
  background: #F3EAFB;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #5B2BC4;
  line-height: 1.45;
}

/* Sprint 89 — kleuter-UI zonder tekst: icoonknoppen. */
.kleuter-icon-btn {
  border: 0;
  cursor: pointer;
  background: var(--bg-card, #FFFDF8);
  border-radius: 50%;
  width: 64px; height: 64px;
  font-size: 30px;
  box-shadow: var(--shadow, 0 4px 14px rgba(44, 27, 74, .08));
  transition: transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.kleuter-icon-btn:active { transform: scale(.92); }
.kleuter-result-btns {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-top: 18px;
}
.kleuter-result-btns .kleuter-icon-btn {
  width: 96px; height: 96px; font-size: 44px;
  background: linear-gradient(160deg, #2DD4BF, #0F766E);
  color: #fff;
}
.kleuter-result-btns .kleuter-icon-btn--huis { background: var(--bg-card, #FFFDF8); }
/* Grote sticker-onthulling op het kleuter-resultaatscherm. */
.kleuter-sticker-reveal {
  font-size: 96px;
  line-height: 1;
  margin: 8px auto 2px;
  animation: streak-flame-pop 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.kleuter-sticker-label {
  font-size: 19px;
  font-weight: 900;
  color: #0F766E;
  margin-bottom: 6px;
}
/* Stickerboek: raster van verdiende stickers. */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 12px;
  max-width: 560px;
  margin: 18px auto;
}
.sticker-cel {
  background: var(--bg-card, #FFFDF8);
  border-radius: 18px;
  box-shadow: var(--shadow, 0 4px 14px rgba(44, 27, 74, .08));
  font-size: 52px;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
.sticker-cel--goud { background: linear-gradient(160deg, #FDE68A, #F59E0B); }
/* Sprint 93 — drie tegels: NL-speeltegel + boekje op rij één, de
   Engelse tegel op eigen rij eronder (wrap). De kleuter herkent de
   Engelse tegel aan de blauwe kleur, niet aan de tekst. */
.kleuter-tile-row { display: flex; flex-wrap: wrap; gap: 12px; }
.kleuter-tile-row .kleuter-tile { flex: 1 1 calc(100% - 130px); }
.kleuter-tile-row .kleuter-tile--engels { flex: 1 1 100%; }
.kleuter-tile--engels {
  background: radial-gradient(130% 140% at 25% 15%, #60A5FA, #3B4FD8);
  box-shadow: 0 4px 8px rgba(59, 79, 216, .18), 0 18px 34px -14px rgba(59, 79, 216, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.kleuter-boekje-tile {
  flex: none;
  width: 108px;
  border: 0; border-radius: 26px; cursor: pointer;
  font-size: 44px;
  background: linear-gradient(160deg, #FDE68A, #F59E0B);
  box-shadow: 0 4px 8px rgba(180, 83, 9, .18), 0 18px 34px -14px rgba(180, 83, 9, .5);
  transition: transform .12s ease;
}
.kleuter-boekje-tile:active { transform: scale(.96); }
/* Uitleg-overlay Volgende als groot ▶-icoon (kleuter-mode). */
.uitleg-next--icoon { font-size: 30px; min-height: 72px; }
@media (max-width: 480px) {
  .kleuter-optie { min-height: 104px; font-size: 52px; }
  .kleuter-display { font-size: 36px; }
}

/* ── Sprint 81 — account verwijderen ────────────────────────── */
#delete-account-sub { margin: 2px 0 8px; }
/* .feedback-actions .btn:not(.btn--secondary) schildert zijn ambere
   gradient over .btn--danger heen (:not telt mee: 3 klassen) — voor
   een verwijderknop moet het onmiskenbaar rood zijn, dus ook 3. */
.feedback-actions .btn.btn--danger {
  background: linear-gradient(135deg, #EF4444, #B91C1C);
  box-shadow: 0 2px 6px rgba(153, 27, 27, 0.30);
}
.portal-menu-item--danger .portal-menu-item__title { color: #B91C1C; }
.portal-menu-item--danger:hover { border-color: rgba(185, 28, 28, .35); }
.delete-account-list {
  margin: 10px 0 12px;
  padding-left: 24px;
}
.delete-account-list li { margin-bottom: 4px; }
.delete-account-warn {
  font-weight: 800;
  color: #B91C1C;
  margin-bottom: 16px;
}
/* Sprint 93 — verwijderen ontward van wisselen/uitloggen: een
   vluchtweg-blok bovenaan + typ-bevestiging voor de rode knop. */
.delete-account-switch {
  background: #F0F9FF;
  border: 1.5px solid #BAE6FD;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0 14px;
}
.delete-account-switch p { margin: 0 0 10px; }
.delete-account-switch .btn { width: 100%; }
.delete-account-type-label { display: block; margin-bottom: 6px; }
.delete-account-type {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #FCA5A5;
  border-radius: 12px;
  font: inherit;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 14px;
}
.delete-account-type:focus { outline: none; border-color: #B91C1C; }
.feedback-actions .btn.btn--danger:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* ── Sprint 89.1 — kleuter-scherm vult het scherm ───────────
   Gebruikersfeedback: te veel lege ruimte op desktop. Twee zones
   naast elkaar op brede schermen (vraag + vos links, grote
   antwoordknoppen rechts), alles een maat groter, en zachte
   kleurvlekken zodat de achtergrond 'af' voelt i.p.v. leeg.
   Staat NA de Sprint 88/89-regels, dus deze winnen bij gelijke
   specificiteit. */
.kleuter-inner { position: relative; }
.kleuter-inner::before,
.kleuter-inner::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.kleuter-inner::before {
  width: 46vw; height: 46vw;
  left: -14vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(45, 212, 191, .18), transparent 65%);
}
.kleuter-inner::after {
  width: 42vw; height: 42vw;
  right: -12vw; top: -10vw;
  background: radial-gradient(circle, rgba(245, 158, 11, .16), transparent 65%);
}
.kleuter-stage {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
  max-width: 640px;
  margin: 0 auto;
}
.kleuter-vraagzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.kleuter-vos { line-height: 0; display: none; }
/* Een maat groter dan Sprint 88. */
.kleuter-speak { width: 96px; height: 96px; font-size: 44px; margin: 4px auto 0; }
.kleuter-display { font-size: 52px; padding: 22px 20px; width: 100%; margin: 0; }
.kleuter-opties { gap: 18px; max-width: none; margin: 0; }
.kleuter-optie { min-height: 150px; font-size: 72px; }

@media (min-width: 900px) {
  .kleuter-stage {
    grid-template-columns: minmax(300px, 1fr) minmax(440px, 1.25fr);
    align-items: center;
    max-width: 1080px;
    gap: 56px;
    min-height: min(72vh, 720px);
  }
  .kleuter-vos { display: block; margin-top: 10px; }
  .kleuter-optie { min-height: 210px; font-size: 96px; border-radius: 32px; }
  .kleuter-optie--groep { font-size: 46px; }
  .kleuter-optie--cijfer { font-size: 104px; }
  .kleuter-display { font-size: 62px; letter-spacing: 10px; }
  .kleuter-speak { width: 112px; height: 112px; font-size: 52px; }
}

/* Sprint 92 — nieuwe kleutervormen. Ná het 900px-blok hierboven:
   deze klassen delen specificiteit met .kleuter-optie, dus alleen
   de bronvolgorde laat ze de generieke groottes overrulen. */
/* Stippen (subitizing): dobbelsteenpatroon als tekstregels. */
.kleuter-optie--stippen { font-size: 30px; line-height: 1.35; letter-spacing: 7px; white-space: pre-line; }
/* Schaduw: het filter mag alleen het teken raken, niet de knop. */
.kleuter-schaduw-glyph { display: block; line-height: 1; filter: brightness(0) opacity(.85); }
/* Groot & klein: de maat-klasse IS het antwoord (maat 4 = grootst). */
.kleuter-optie--maat1 { font-size: 30px; }
.kleuter-optie--maat2 { font-size: 48px; }
.kleuter-optie--maat3 { font-size: 68px; }
.kleuter-optie--maat4 { font-size: 92px; }
@media (min-width: 900px) {
  .kleuter-optie--stippen { font-size: 36px; letter-spacing: 9px; }
  .kleuter-optie--maat1 { font-size: 34px; }
  .kleuter-optie--maat2 { font-size: 56px; }
  .kleuter-optie--maat3 { font-size: 82px; }
  .kleuter-optie--maat4 { font-size: 110px; }
}
/* De generieke .screen-inner-regels uit desktop.css knijpen het
   kleuterpodium af én laten het links hangen; id-scope + !important
   wint (Sprint 64-les). Flex-kolom + stage met margin:auto centreert
   het podium horizontaal én verticaal in de vrije ruimte. */
@media (min-width: 900px) {
  #screen-kleuters .screen-inner {
    max-width: 1160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #screen-kleuters .kleuter-stage { margin: auto; min-height: 0; }
}
/* Flex-kinderen krimpen naar inhoud → de fr-kolommen krijgen geen
   vrije ruimte. Expliciete breedte lost het op. */
.kleuter-stage { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   Sprint 112 — Confetti-speeltuin op de oefenschermen
   ═══════════════════════════════════════════════════════════════
   Scope: alleen schermen met de klasse .screen--oefening (de zes
   school-verticalen + hun resultaatschermen). Kleuters, home, shop
   en portaal behouden voorlopig de oude stijl; die volgen in de
   volgende stappen van de restyle. Alles hier bouwt op de tokens
   in :root (--ink, --vak-*, --schaduw-blok, --font-speels). */

.screen--oefening {
  background: var(--confetti-lucht);
  font-family: var(--font-speels);
}
.screen--oefening .screen-inner { position: relative; }

/* Zwevende wolkjes — puur decor, klikt niet, leest niet voor. */
.screen--oefening .screen-inner::before {
  content: '☁️';
  position: absolute; top: 120px; left: -4px;
  font-size: 20px; opacity: .85; pointer-events: none;
}
.screen--oefening .screen-inner::after {
  content: '✨';
  position: absolute; top: 84px; right: 2px;
  font-size: 14px; opacity: .9; pointer-events: none;
}

/* ── Navigatie bovenin ── */
.screen--oefening .btn--back {
  background: #fff;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 14px;
  box-shadow: var(--schaduw-blok-s);
  font-family: var(--font-speels);
  font-weight: 700;
}
.screen--oefening .btn--back:hover {
  background: #fff;
  transform: translate(1px, 1px);
  box-shadow: var(--schaduw-blok-in);
}
.screen--oefening .question-progress {
  background: var(--vak-schrijven);
  color: #fff;
  border: var(--rand-ink);
  box-shadow: var(--schaduw-blok-s);
  font-family: var(--font-speels);
  font-weight: 700;
  transform: rotate(1deg);
}

/* ── Sprint 140 — voortgangsstippen in de topbalk zichtbaar ──
   Veldfeedback: "rechtsboven is niet zichtbaar". De basisregels
   (rond regel 1049) geven de pil een half-witte vulling en de stippen
   een 2px rand in --bg-muted (bleek crème, in sommige thema's zelfs
   lichtblauw) — op de lichtblauwe luchtgradient viel dat volledig weg.
   Hier krijgen ze de gewone confetti-taal: inkt-omlijning + harde
   vulkleur. Schaduw expliciet in var(--ink) genoteerd, want de
   senior-band herdefinieert --schaduw-blok-s zonder kleurcomponent. */
.screen--oefening .level-tracker {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 99px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 5px 9px;
  gap: 6px;
}
.screen--oefening .tracker-dot {
  width: 13px;
  height: 13px;
  border: 2.5px solid var(--ink);
  background: #FFF6D6;
}
/* De drie gevulde toestanden MOETEN hierna staan: de basisregel
   hierboven is even specifiek (0,2,0) en zou anders de scorekleur
   overschrijven — dan zien alle vijf stippen er identiek uit. Ze
   krijgen meteen de inkt-omlijning (hun eigen border-color uit de
   basislaag zou kleur-op-kleur geven en dus slap ogen). */
.screen--oefening .tracker-dot--perfect {
  background: var(--success);
  border-color: var(--ink);
}
.screen--oefening .tracker-dot--near {
  background: var(--gold);
  border-color: var(--ink);
}
.screen--oefening .tracker-dot--poor {
  background: var(--error);
  border-color: var(--ink);
}

/* ── Vraagkaart ── */
.screen--oefening .question-card,
.screen--oefening .math-problem-card {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-0.4deg);
}
.screen--oefening .question-text,
.screen--oefening .math-problem-text {
  font-family: var(--font-speels);
  font-weight: 700;
  color: var(--ink);
}

/* ── Antwoordknoppen ── */
.screen--oefening .btn--answer {
  background: #fff;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok);
  font-family: var(--font-speels);
  font-weight: 700;
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
}
.screen--oefening .btn--answer:hover:not(:disabled) {
  background: #fff;
  border-color: var(--ink);
  transform: translate(1px, 1px);
  box-shadow: var(--schaduw-blok-s);
}
.screen--oefening .btn--answer:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: var(--schaduw-blok-in);
}
.screen--oefening .btn--answer.correct {
  background: var(--vak-rekenen);
  border-color: var(--ink);
  color: #fff;
  transform: translate(2px, 2px);
  box-shadow: var(--schaduw-blok-in);
}
.screen--oefening .btn--answer.wrong {
  background: var(--vak-lezen);
  border-color: var(--ink);
  color: #fff;
  transform: translate(2px, 2px);
  box-shadow: var(--schaduw-blok-in);
}

/* ── Feedback en uitleg ── */
.screen--oefening .answer-feedback {
  background: #fff;
  border: var(--rand-ink);
  border-left: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok-s);
}
.screen--oefening .feedback-message {
  font-family: var(--font-speels);
  font-weight: 800;
  color: var(--ink);
}
.screen--oefening .feedback-explanation {
  background: #FFF6D6;
  border: 2.5px dashed var(--ink);
  border-radius: 14px;
  color: var(--ink);
}

/* ── Lezen: aftel-balk in confetti-stijl ── */
.screen--oefening .lezen-timer-track {
  border: var(--rand-ink);
  border-radius: 99px;
  background: #fff;
}

/* ── Resultaatschermen ── */
/* De oude zachte crème-gradient op de result-kolom zou de
   lucht-achtergrond afdekken; de confetti-stijl toont de inhoud
   direct op de lucht. */
.screen--oefening .screen-inner.result-screen {
  background: transparent;
}
.screen--oefening .result-title {
  font-family: var(--font-speels);
  font-weight: 800;
  color: var(--ink);
}
.screen--oefening .result-rewards {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 18px;
  box-shadow: var(--schaduw-blok);
}
/* Drie klassen diep — de Sprint-74-regel
   `.result-screen .result-rewards .result-earned` wint anders op
   specificiteit van een tweeklasser. */
.screen--oefening .result-rewards .result-earned {
  background: #FFD93D;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 99px;
  box-shadow: var(--schaduw-blok-s);
  transform: rotate(-1deg);
  display: inline-block;
  padding: 8px 22px;
}
/* ── Sprint 140 — XP even zwaar als de lumi's ──
   Veldfeedback: "de lumi's zijn gemarkeerd, de XP niet — houd ze op
   hetzelfde niveau". De basisregel (rond 7280) zette hier expliciet
   background/box-shadow op none plus een stippellijn, waardoor XP als
   voetnoot oogde. Zelfde specificiteit (0,3,0) maar later in dit
   bestand, dus deze wint. Geldt op alle oefen-resultaatschermen zodat
   de vakken onderling consistent blijven. Eigen kleur (violet i.p.v.
   geel) én tegengestelde kanteling: gelijkwaardig, niet verwarrend. */
.screen--oefening .result-rewards .result-xp {
  background: #EDE4FF;
  color: #4C1D95;
  border: var(--rand-ink);
  border-radius: 99px;
  box-shadow: 3px 3px 0 var(--ink);
  border-top: var(--rand-ink);
  transform: rotate(1deg);
  font-family: var(--font-speels);
  font-size: 19px;
  font-weight: 800;
  padding: 8px 20px;
  margin: 16px auto 0;
  width: fit-content;
}
/* De subregels binnen het XP-blok blijven ondergeschikt aan de kopregel. */
.screen--oefening .result-rewards .result-xp__total {
  font-size: 13.5px;
  font-weight: 700;
  opacity: .75;
}
.screen--oefening .btn--primary {
  background: #FFD93D;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok);
  font-family: var(--font-speels);
  font-weight: 800;
}
.screen--oefening .btn--primary:hover {
  background: #FFD93D;
  transform: translate(1px, 1px);
  box-shadow: var(--schaduw-blok-s);
}
.screen--oefening .btn--outline,
.screen--oefening .btn--secondary {
  background: #fff;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok);
  font-family: var(--font-speels);
  font-weight: 700;
}
.screen--oefening .btn--outline:hover,
.screen--oefening .btn--secondary:hover {
  background: #fff;
  transform: translate(1px, 1px);
  box-shadow: var(--schaduw-blok-s);
}

/* ═══════════════════════════════════════════════════════════════
   Sprint 113 — Confetti-speeltuin stap 3: de landingspagina
   ═══════════════════════════════════════════════════════════════
   Zelfde beeldtaal als de oefenschermen (stap 2): lucht-gradient,
   inkt-outlines, blokschaduwen, Grandstander, vaste vakkleuren.
   Alle sv3-ids en -bindings blijven ongemoeid — dit is puur huid. */

#screen-signin {
  /* !important: de Sprint-103-regel hierboven zet zijn lila
     gradient ook met !important; latere positie + gelijk gewicht
     laat de lucht winnen. */
  background: var(--confetti-lucht) !important;
  font-family: var(--font-speels);
}
.signin-v3 { position: relative; }
/* Sprint 117 — de losse wolk/ballon-emoji op vaste pixelposities zijn
   weg (veldfeedback: op desktop landden ze onder de kop en zwevend in
   het niets). De lucht-gradient draagt de speelsheid zelf. */

.signin-v3 .sv3-kicker {
  background: #fff;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  box-shadow: var(--schaduw-blok-s);
  display: inline-block;
  padding: 3px 13px;
  font-weight: 700;
  transform: rotate(-1deg);
}
.signin-v3 .sv3-pitch h1 {
  font-family: var(--font-speels);
  font-weight: 900;
  color: var(--ink);
}
.signin-v3 .sv3-pitch h1 em { color: var(--vak-lezen); }
.signin-v3 .sv3-pitch p { color: #3A4166; font-weight: 600; }

/* Inlogknoppen: Google-merkteken blijft, de schil wordt confetti.
   De Apple-knop houdt zijn zwarte vlak (Apple HIG) maar krijgt
   dezelfde inkt-rand zodra hij ooit zichtbaar wordt. */
.signin-v3 .sv3-gbtn {
  background: #fff;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 18px;
  box-shadow: var(--schaduw-blok);
  font-family: var(--font-speels);
  font-weight: 700;
}
.signin-v3 .sv3-gbtn:hover { transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-s); }
.signin-v3 .sv3-gbtn:active { transform: translate(2px, 2px); box-shadow: var(--schaduw-blok-in); }
.signin-v3 .sv3-abtn { border: var(--rand-ink); box-shadow: var(--schaduw-blok); border-radius: 18px; }
.signin-v3 .sv3-guest { color: var(--ink); font-weight: 700; text-decoration: underline; }

/* Demo-kaart */
.signin-v3 .sv3-demo {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-0.5deg);
}
.signin-v3 .sv3-demo h2 {
  font-family: var(--font-speels);
  font-weight: 800;
  color: var(--ink);
}
.signin-v3 .sv3-demo__sub { color: #3A4166; font-weight: 600; }
.signin-v3 .sv3-demo__input {
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  font-family: var(--font-speels);
  font-weight: 600;
  color: var(--ink);
}
.signin-v3 .sv3-demo__input:focus { border-color: var(--vak-engels); }
.signin-v3 .sv3-demo__go {
  background: #FFD93D;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 12px;
  box-shadow: var(--schaduw-blok-s);
  font-weight: 900;
}
.signin-v3 .sv3-demo__go:active { transform: translate(2px, 2px); box-shadow: none; }
.signin-v3 .sv3-chip {
  background: #E4F7FF;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  font-weight: 700;
  font-family: var(--font-speels);
}
.signin-v3 .sv3-chip:hover { background: #fff; }
.signin-v3 .sv3-demo__sample {
  background: #FFF6D6;
  border: 2.5px dashed var(--ink);
  border-radius: 14px;
}
.signin-v3 .sv3-demo__badge {
  background: #FFD93D;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 99px;
  font-weight: 800;
  transform: rotate(-1.5deg);
}
.signin-v3 .sv3-demo__text { color: var(--ink); font-weight: 600; }
.signin-v3 .sv3-demo__more {
  background: #fff;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--schaduw-blok-s);
  font-family: var(--font-speels);
  font-weight: 700;
}
.signin-v3 .sv3-demo__more:active { transform: translate(2px, 2px); box-shadow: none; }

/* Vaktegels: hele tegel in de vaste vakkleur (was: wit met gekleurd
   icoon-chipje). De kleurklasse zit op het icoon-element, dus de
   tegel kleurt via :has(). Spelling (geel) krijgt inkt-tekst voor
   contrast; de rest wit. */

/* Feature-kaarten en voet */
.signin-v3 .sv3-foot { color: #3A4166; font-weight: 700; }
.signin-v3 .sv3-foot__link { color: var(--ink); }

/* Login-blok zweeft op de lucht (schets): geen crème-kaart eromheen. */
.signin-v3 .sv3-login {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* De v2-scene-lagen (lila gradient + personage) verfden op mobiel
   over de confetti-lucht heen; de landing heeft ze niet meer nodig. */
#screen-signin .screen-bg,
#screen-signin .screen-character { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   Sprint 114 — Confetti-speeltuin stap 4: home, winkel, spelletjes
   ═══════════════════════════════════════════════════════════════
   Home volgt de gekozen mockup: lucht, gekleurde vaktegels in de
   vaste vakkleuren, inkt-outlines en blokschaduwen, Grandstander.
   Winkel en spelletjes delen dezelfde huid via de blokken-cards.
   Id-selectors + !important winnen op specificiteit van zowel de
   oude home-gradient als de desktop.css .screen-reset. */

#screen-home {
  background: var(--confetti-lucht) !important;
  font-family: var(--font-speels);
}
#screen-shop,
#screen-spelletjes,
#screen-geheugen-home,
#screen-slangetje-home,
#screen-woordzoeker-home,
#screen-stickers {
  background: var(--confetti-lucht) !important;
  font-family: var(--font-speels);
}

/* ── Home: topbar ── */
.home-v3 .home-brand span {
  font-family: var(--font-speels);
  font-weight: 900;
  color: var(--ink);
}
.home-v3 .coin-pill {
  background: #FFD93D;
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  box-shadow: var(--schaduw-blok-s);
  color: var(--ink);
  font-weight: 800;
  /* Sprint 143 — de pil is nu een <button>: font en cursor erven niet
     vanzelf, en hij hoort dezelfde indruk-animatie te hebben als de
     chips ernaast. min-height houdt het taparea ≥34px op smalle
     telefoons, waar de padding krimpt. */
  font-family: var(--font-speels);
  cursor: pointer;
  min-height: 34px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.home-v3 .coin-pill:active {
  transform: translate(2px, 2px);
  box-shadow: var(--schaduw-blok-in) var(--ink);
}
.home-v3 .ouders-chip {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  box-shadow: var(--schaduw-blok-s);
  color: var(--ink);
  font-weight: 700;
}
.home-v3 .ouders-chip svg { stroke: var(--ink); }

/* ── Home: hero ── */
.home-v3 .home-hero__title {
  font-family: var(--font-speels);
  font-weight: 900;
  color: var(--ink);
}
.home-v3 .engagement-chip {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  box-shadow: var(--schaduw-blok-s);
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-speels);
}
.home-v3 .engagement-chip:nth-child(odd)  { transform: rotate(-1.2deg); }
.home-v3 .engagement-chip:nth-child(even) { transform: rotate(1deg); }

/* ── Home: vaktegels in de vaste vakkleuren (mockup) ── */
.home-v3 .cat {
  border: var(--rand-ink);
  border-radius: 20px;
  box-shadow: var(--schaduw-blok);
  color: #fff;
}
.home-v3 .cat:hover { transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-s); }
.home-v3 .cat:active { transform: translate(2px, 2px); box-shadow: var(--schaduw-blok-in); }
.home-v3 .cat:nth-child(odd)  { rotate: -1.2deg; }
.home-v3 .cat:nth-child(even) { rotate: 1.1deg; }
.home-v3 .cat__name { color: #fff; font-family: var(--font-speels); font-weight: 700; }
.home-v3 .cat:has(.cat__tile--comp)      { background: var(--vak-lezen); }
.home-v3 .cat:has(.cat__tile--math)      { background: var(--vak-rekenen); }
.home-v3 .cat:has(.cat__tile--spelling)  { background: var(--vak-spelling); }
.home-v3 .cat:has(.cat__tile--spelling) .cat__name { color: var(--ink); }
.home-v3 .cat:has(.cat__tile--lezen)     { background: var(--vak-snellezen); }
.home-v3 .cat:has(.cat__tile--schrijven) { background: var(--vak-schrijven); }
.home-v3 .cat:has(.cat__tile--engels)    { background: var(--vak-engels); }
.home-v3 .cat__tile { background: rgba(255, 255, 255, .22) !important; box-shadow: none; }
.home-v3 .cat:has(.cat__tile--spelling) .cat__tile svg { stroke: var(--ink); }
.home-v3 .cat:has(.cat__tile--spelling) .cat__tile text { fill: var(--ink); }
.home-v3 .cat--locked {
  background: #E8ECF4 !important;
  color: #8A94B8;
}
.home-v3 .cat--locked .cat__name { color: #6B7194; }

/* ── Home: Winkel/Spelletjes/Beloningen ── */
.home-v3 .soft-card {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 18px;
  box-shadow: var(--schaduw-blok);
  color: var(--ink);
}
.home-v3 .soft-card:hover { transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-s); }
.home-v3 .soft-card--shop { background: #FFD93D; }
.home-v3 .soft-card__t { color: var(--ink); font-family: var(--font-speels); font-weight: 800; }
.home-v3 .soft-card__ic svg { stroke: var(--ink); }

/* ── Winkel & spelletjes: koppen en kaarten ── */
#screen-shop .app-title,
#screen-spelletjes .app-header h1,
#screen-geheugen-home .app-header h1,
#screen-slangetje-home .app-header h1,
#screen-woordzoeker-home .app-header h1,
#screen-stickers .app-header h1 {
  font-family: var(--font-speels);
  font-weight: 900;
  color: var(--ink);
}
#screen-shop .btn--back,
#screen-spelletjes .btn--back,
#screen-geheugen-home .btn--back,
#screen-slangetje-home .btn--back,
#screen-woordzoeker-home .btn--back,
#screen-stickers .btn--back {
  background: #fff;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 14px;
  box-shadow: var(--schaduw-blok-s);
  font-family: var(--font-speels);
  font-weight: 700;
}
#screen-shop .shop-balance-display {
  background: #FFD93D;
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  box-shadow: var(--schaduw-blok-s);
  color: var(--ink);
  font-weight: 800;
}

/* Spelkaarten (spelletjesscherm + winkel-games-tab + spel-homes). */
.blokken-card {
  background: #fff !important;
  border: var(--rand-ink) !important;
  border-radius: 18px !important;
  box-shadow: var(--schaduw-blok) !important;
  font-family: var(--font-speels);
}
.blokken-card:hover { transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-s) !important; }
.blokken-card__title { color: var(--ink) !important; font-family: var(--font-speels); font-weight: 800; }
.blokken-card__sub, .blokken-card__highscore { color: #3A4166 !important; font-weight: 600; }
.blokken-card__price {
  background: #FFD93D;
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink) !important;
  font-weight: 800;
  padding: 4px 12px;
  transform: rotate(-1.5deg);
}
.blokken-card--locked {
  background: #EDF0F6 !important;
  opacity: 1 !important;
}
.blokken-card--locked .blokken-card__title { color: #8A94B8 !important; }

/* Id-gewicht: regel 5916 stylet de chips als #screen-home
   .engagement-chip (1-1-0) en wint van een klassen-tweetal. */
#screen-home .engagement-chip {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  box-shadow: var(--schaduw-blok-s);
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-speels);
}
#screen-home .engagement-chip:nth-child(odd)  { transform: rotate(-1.2deg); }
#screen-home .engagement-chip:nth-child(even) { transform: rotate(1deg); }

/* De paarse header-band past niet meer op de lucht: transparant,
   inkt-titel, sterretjes-decor uit. Geldt voor winkel + spelknoppen-
   schermen; oefenschermen hebben geen app-header meer in beeld. */
#screen-shop .app-header,
#screen-spelletjes .app-header,
#screen-geheugen-home .app-header,
#screen-slangetje-home .app-header,
#screen-woordzoeker-home .app-header,
#screen-stickers .app-header {
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  overflow: visible;
  padding-top: 8px;
  padding-bottom: 8px;
}
#screen-shop .app-header::before,
#screen-spelletjes .app-header::before,
#screen-geheugen-home .app-header::before,
#screen-slangetje-home .app-header::before,
#screen-woordzoeker-home .app-header::before,
#screen-stickers .app-header::before { content: none; }

/* ═══════════════════════════════════════════════════════════════
   Sprint 115 — Confetti-speeltuin stap 5: de restpartij
   ═══════════════════════════════════════════════════════════════
   Lucht + Grandstander zijn nu de standaard (body/.screen hierboven);
   dit blok zet de resterende schermen en gedeelde componenten om:
   loading, ouderportaal + subschermen, beloningen, wizard, voortgang,
   profielkiezer en alle modals. Plus de desktop-leesbaarheidsfix
   voor de home-statchips. */

/* ── Generieke knoppen, app-breed ── */
.btn--primary {
  background: #FFD93D;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok);
  font-family: var(--font-speels);
  font-weight: 800;
}
.btn--primary:hover { background: #FFD93D; transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-s); }
.btn--primary:active { transform: translate(2px, 2px); box-shadow: var(--schaduw-blok-in); }
.btn--secondary,
.btn--outline {
  background: #fff;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok);
  font-family: var(--font-speels);
  font-weight: 700;
}
.btn--secondary:hover, .btn--outline:hover { background: #fff; transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-s); }
.btn--back {
  background: #fff;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 14px;
  box-shadow: var(--schaduw-blok-s);
  font-family: var(--font-speels);
  font-weight: 700;
}
.btn--back:hover { background: #fff; transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-in); }
.screen-title { font-family: var(--font-speels); font-weight: 900; color: var(--ink); }

/* ── App-headers: paarse band overal weg ── */
.app-header {
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  overflow: visible;
  padding-top: 8px;
  padding-bottom: 8px;
}
.app-header::before { content: none; }
.app-header h1, .app-header .app-title { color: var(--ink); font-family: var(--font-speels); font-weight: 900; }

/* ── v2-scenelagen (lila gradients) definitief uit ── */
.screen-bg, .screen-character { display: none !important; }

/* ── Loading ── */
.loading-title { color: var(--ink); font-family: var(--font-speels); font-weight: 900; }
.loading-subtitle { color: #3A4166; font-weight: 700; }
.loading-dot { background: var(--ink); }
.loading-dot:nth-child(1) { background: var(--vak-lezen); }
.loading-dot:nth-child(2) { background: var(--vak-spelling); }
.loading-dot:nth-child(3) { background: var(--vak-engels); }

/* ── Home-statchips: leesbaar op elke maat (veldfoto desktop:
   de 99px-pil kneep de kolominhoud tot een ovaal) ── */
#screen-home .engagement-chip {
  border-radius: 18px;
  padding: 10px 14px 8px;
}

/* ── Modals ── */
.modal-box {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
}
.modal-header h2 { color: var(--ink); font-family: var(--font-speels); font-weight: 900; }
.btn--close {
  background: #fff;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--ink);
}

/* ── Ouderportaal + subschermen ── */
.portal-header h1, .portal-header h2 { color: var(--ink); font-family: var(--font-speels); font-weight: 900; }
.portal-subtitle { color: #3A4166; font-weight: 600; }
.portal-section-label {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 1px;
}
.portal-menu-item {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok-s);
}
.portal-menu-item:hover { transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-in); }
.portal-menu-item__title { color: var(--ink); font-weight: 800; }
.portal-menu-item__sub { color: #3A4166; font-weight: 600; }
.portal-badge {
  background: #FFD93D;
  color: var(--ink);
  border: 2px solid var(--ink);
  font-weight: 800;
}
.portal-account-info {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok-s);
}

/* ── Profielkiezer ── */
.profile-card {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 18px;
  box-shadow: var(--schaduw-blok);
  font-family: var(--font-speels);
}
.profile-card:hover { transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-s); }
.profile-card.active { background: #FFF6D6; }

/* ── Voortgang (portaal) ── */
.progress-subject {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 18px;
  box-shadow: var(--schaduw-blok-s);
}
.progress-subject__title { color: var(--ink); font-weight: 800; }
.mastery-banner {
  background: #FFF6D6;
  border: 2.5px dashed var(--ink);
  border-radius: 14px;
  color: var(--ink);
}

/* ── Beloningen (winkel-tab + portaal-lijst) ── */
.reward-item, .reward-row {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok-s);
}
.reward-item__claimed { color: #3A4166; font-weight: 600; }

/* ── Wizard ── */
.wizard-card {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--ink);
}
.wizard-header h1, .wizard-header h2 { color: var(--ink); font-family: var(--font-speels); font-weight: 900; }
.exercise-card, .incentive-card, .theme-card {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--schaduw-blok-in);
}
.exercise-card.selected, .incentive-card.selected, .theme-card.selected {
  background: #FFF6D6;
  box-shadow: var(--schaduw-blok-s);
}

/* ── Overige kaarten (over-lumio, schrijven, uitleg, lezen) ── */
.about-card, .uitleg-card, .reading-card, .schrijven-prompt-card {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 18px;
  box-shadow: var(--schaduw-blok-s);
}

/* screens-v2.css (ná dit bestand geladen) zet nog een crème-vlak op
   het laadscherm; id-gewicht wint onafhankelijk van laadvolgorde. */
#screen-loading { background: var(--confetti-lucht) !important; }
#screen-profile-picker { background: var(--confetti-lucht) !important; }
/* .loading-center verfde als binnenlaag alsnog crème over de lucht. */
.loading-center { background: var(--confetti-lucht) !important; }
/* Desktop: de statchips kregen op groot scherm te weinig ruimte —
   het getal en het label zaten tegen de rand (veldfoto). */
@media (min-width: 1024px) {
  #screen-home .engagement-chip { padding: 14px 22px 12px; min-width: 116px; gap: 4px; }
  #screen-home .engagement-chip b { font-size: 25px; line-height: 1.1; }
  #screen-home .engagement-chip small { font-size: 12.5px; letter-spacing: .6px; }
  #screen-home .engagement-chip .chip-ico { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   Sprint 116 — Confetti-speeltuin stap 6: kledingkast + kleuters
   ═══════════════════════════════════════════════════════════════
   De laatste twee zakken: de winkel-binnenkant (tabs, artikelen,
   sectiekoppen) en de kleuterschermen (grote knoppen, resultaat,
   stickers, home-tegels). Zelfde taal: wit + inkt + blokschaduw,
   vergrendeld/te duur = grijs. */

/* ── Winkel: tabs ── */
.shop-tabs {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 99px;
  box-shadow: var(--schaduw-blok-s);
}
.shop-tab { border-radius: 99px; color: var(--ink); font-family: var(--font-speels); font-weight: 700; }
.shop-tab[aria-selected="true"], .shop-tab.active {
  background: var(--vak-schrijven);
  color: #fff;
  border: 2.5px solid var(--ink);
}

/* ── Winkel: artikelen ── */
.shop-section-title { color: var(--ink); font-family: var(--font-speels); font-weight: 800; }
.shop-item {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok-in);
}
.shop-item:hover { transform: translate(1px, 1px); }
.shop-item__label { color: var(--ink); font-weight: 700; }
.shop-item__price {
  background: #FFD93D;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 99px;
  font-weight: 800;
  padding: 2px 10px;
}
.shop-item.owned .shop-item__price { background: #E8ECF4; }
.shop-item.too-expensive { background: #EDF0F6; }
.shop-item.too-expensive .shop-item__price { background: #E8ECF4; }
.shop-item__new-badge {
  background: var(--vak-lezen);
  color: #fff;
  border: 2px solid var(--ink);
  font-weight: 800;
}

/* ── Kleuters: speelknoppen en resultaat ── */
.kleuter-display {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 22px;
  box-shadow: 5px 5px 0 var(--ink);
}
.kleuter-optie {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 20px;
  box-shadow: var(--schaduw-blok);
  font-family: var(--font-speels);
}
.kleuter-optie:hover { transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-s); }
.kleuter-optie:active { transform: translate(2px, 2px); box-shadow: var(--schaduw-blok-in); }
.kleuter-optie.correct { background: var(--vak-rekenen); border-color: var(--ink); }
.kleuter-optie.wrong { background: var(--vak-lezen); border-color: var(--ink); }
.kleuter-speak, .kleuter-icon-btn {
  background: #FFD93D;
  color: var(--ink);
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok-s);
}
.kleuter-speak:active, .kleuter-icon-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.kleuter-sticker-reveal {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 22px;
  box-shadow: 5px 5px 0 var(--ink);
}
.kleuter-sticker-label { color: var(--ink); font-family: var(--font-speels); font-weight: 800; }

/* ── Kleuters: home-tegels (speeltegel + stickerboekje) ── */
.kleuter-tile, .kleuter-boekje-tile {
  background: var(--vak-rekenen);
  border: var(--rand-ink);
  border-radius: 22px;
  box-shadow: var(--schaduw-blok);
  color: #fff;
  font-family: var(--font-speels);
}
.kleuter-tile:hover, .kleuter-boekje-tile:hover { transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-s); }
.kleuter-boekje-tile { background: var(--vak-spelling); color: var(--ink); }
.kleuter-tile__play { color: #fff; font-weight: 800; }

/* Vos-voorbeeldkaart en sets-verzamelkaarten in de winkel. */
.garderobe-preview {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 20px;
  box-shadow: var(--schaduw-blok);
}
.garderobe-preview__name { color: var(--ink); font-family: var(--font-speels); font-weight: 900; }

/* ── Sprint 142 — paskamer in confetti-stijl ──
   Veldfeedback: "de winkel ziet uit als de oude stijl". De sticky
   paskamer-wrapper stond nog op een crème gradient met zachte,
   vervaagde schaduwen (regel ~7366) terwijl de rest van de app inkt-
   omlijning + blokschaduw gebruikt. Zelfde selector-gewicht (1,1,0),
   maar later in dit bestand, dus deze wint. */
#shop-panel-garderobe .garderobe-paskamer {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px 14px;
}
/* De panelen zelf hadden nog de amberkleurige kaart uit de oude
   "Golden Hour"-stijl (crème gradient + #fde68a rand, regel ~4258).
   Dat gaf een kaart-in-een-kaart-in-een-kaart: precies het "rommelige"
   gevoel uit de feedback. De panelen worden nu neutraal; de paskamer,
   de sets en de itemkaarten zíjn de kaarten. */
.shop-panel--garderobe,
.shop-panel--themes,
.shop-panel--games,
.shop-panel--beloningen {
  background: none;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
/* De saldoregel vervangt de oude stage-/XP-regels: dit is wat je in een
   winkel wilt weten. */
.garderobe-preview__saldo {
  font-family: var(--font-speels);
  font-weight: 800;
  font-size: 14px;
  color: #8a5a10;
  margin-top: 2px;
}
.lucas-sets {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 20px;
  box-shadow: var(--schaduw-blok-s);
}
.lucas-sets__title { color: var(--ink); font-family: var(--font-speels); font-weight: 800; }
.lucas-set {
  background: #FFF6D6;
  border: 2.5px dashed var(--ink);
  border-radius: 16px;
}
.lucas-set__label { color: var(--ink); font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════
   Sprint 117 — landing: merk-anker, hero-herindeling, eind-CTA
   ═══════════════════════════════════════════════════════════════ */

/* Topregel: merk links, rustige inloglink rechts. */
.signin-v3 .sv3-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 2px;
}
.signin-v3 .sv3-brandrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-speels);
  font-weight: 900;
  font-size: 21px;
  color: var(--ink);
}
.signin-v3 .sv3-brandrow svg { width: 26px; height: 32px; display: block; }
.signin-v3 .sv3-loginlink {
  background: #fff;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--schaduw-blok-in);
  font-family: var(--font-speels);
  font-weight: 700;
  font-size: 14px;
  padding: 7px 16px;
  cursor: pointer;
}
.signin-v3 .sv3-loginlink:hover { transform: translate(1px, 1px); box-shadow: none; }

/* Hero als grid: de inlog-CTA schuift ONDER de pitch (zelfde markup-
   volgorde, grid-areas doen de herplaatsing) en de vos krijgt een
   vaste eigen kolom rechts — geen flex-wrap-zweven meer. */
.signin-v3 .sv3-hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "fox"
    "pitch"
    "login";
  gap: 10px;
  padding: 14px 0 6px;
}
.signin-v3 .sv3-pitch { grid-area: pitch; min-width: 0; }
.signin-v3 .sv3-fox   { grid-area: fox; }
.signin-v3 .sv3-login { grid-area: login; max-width: none; }
/* Sprint 118 — breakpoint 700 → 1024: tussen 700 en 1023px geldt het
   oude telefoonkaart-patroon (elk scherm in een kaart van 430px) en
   daar liep de tweekoloms-hero 91px over (iPad-portret, 200% zoom). */
@media (min-width: 1024px) {
  /* Sprint 120 — de hero als één gecentreerde compositie. De oude
     1.25fr-kolom rekte over de volle containerbreedte, waardoor de
     vos tegen de rechterrand werd gedrukt en het midden leeg bleef
     (veldfeedback). Nu: totaalbreedte begrensd, gecentreerd, vos
     groter en direct naast de tekst. */
  .signin-v3 .sv3-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "pitch fox"
      "login fox";
    align-items: center;
    column-gap: 40px;
    /* Smaller totaal: de knop/subregel eindigden ±340px vóór de vos
       omdat de tekstkolom veel breder was dan zijn inhoud. */
    max-width: 790px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .signin-v3 .sv3-login { justify-self: start; max-width: 380px; width: 100%; }
  .signin-v3 .sv3-fox svg { width: 265px; }
}

/* Afsluitende CTA onderaan de pagina. */
.signin-v3 .sv3-eindcta { text-align: center; padding: 22px 0 6px; }
.signin-v3 .sv3-eindcta .sv3-gbtn { max-width: 360px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   Sprint 118 — landing: Duolingo-opbouw + kritiekronde (15 punten)
   ═══════════════════════════════════════════════════════════════ */

/* Sectieritme: één boodschap per scherm, twee vaste maten. */
:root {
  --ruimte-sectie: 46px;
  --ruimte-in: 16px;
}
@media (min-width: 1024px) {
  :root { --ruimte-sectie: 72px; }
}
.signin-v3 .sv3-sectie { margin-top: var(--ruimte-sectie); }

/* Eén sectiekop-stijl voor de hele pagina (was drie systemen). */
.signin-v3 .sv3-h2 {
  font-family: var(--font-speels);
  font-weight: 800;
  font-size: 24px;
  color: var(--ink);
  text-align: center;
  margin: 0 0 8px;
}
@media (min-width: 1024px) {
  .signin-v3 .sv3-h2 { font-size: 28px; }
}
.signin-v3 .sv3-sectie__intro {
  text-align: center;
  font-weight: 600;
  color: #3A4166;
  font-size: 15.5px;
  max-width: 52ch;
  margin: 0 auto 22px;
}

/* Primaire CTA nu écht primair: geel, met het Google-merkteken op
   een wit schijfje (merkteken-richtlijn). */
.signin-v3 .sv3-gbtn { background: #FFD93D; }
.signin-v3 .sv3-gbtn:hover { background: #FFD93D; }
.signin-v3 .sv3-gmark {
  background: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
}
.signin-v3 .sv3-gmark svg { width: 14px; height: 14px; }

/* Demo: volwaardige sectiekop, gecentreerde as, nette knop-paddings. */
.signin-v3 .sv3-demo h2 { font-size: 24px; }
.signin-v3 .sv3-demo__sub { font-size: 15px; text-align: center; margin: 0 0 14px; }
.signin-v3 .sv3-demo__chips { justify-content: center; }
.signin-v3 .sv3-chip { padding: 9px 16px; }
.signin-v3 .sv3-demo__more { padding: 8px 16px; }
.signin-v3 .sv3-demo__sample { text-align: left; }

/* Sprint 119 — brug-stijlen verwijderd met de brug zelf. */

/* Vakken-sectie: witte inkt-kaarten met gekleurd icoon-chipje en
   inkt-tekst (lost meteen het wit-op-vakkleur-contrast op). */
.signin-v3 .sv3-vakken {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}
/* Op 700-1023px geldt de telefoonkaart (430px breed) — daar blijft
   één kolom; twee kolommen pas op echte desktopbreedte. */
@media (min-width: 1024px) {
  .signin-v3 .sv3-vakken { grid-template-columns: 1fr 1fr; }
}
.signin-v3 .sv3-vak {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: #fff;
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok-s);
  padding: 13px 15px;
}
.signin-v3 .sv3-vak:nth-child(odd)  { transform: rotate(-0.5deg); }
.signin-v3 .sv3-vak:nth-child(even) { transform: rotate(0.4deg); }
.signin-v3 .sv3-vak__chip {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 2.5px solid var(--ink);
  display: grid;
  place-items: center;
}
.signin-v3 .sv3-vak__chip svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.signin-v3 .sv3-vak__chip text { fill: #fff; stroke: none; font-weight: 800; }
.signin-v3 .sv3-vk-comp { background: var(--vak-lezen); }
.signin-v3 .sv3-vk-math { background: var(--vak-rekenen); }
.signin-v3 .sv3-vk-spel { background: var(--vak-spelling); }
.signin-v3 .sv3-vk-spel svg { stroke: var(--ink); }
.signin-v3 .sv3-vk-lees { background: var(--vak-snellezen); }
.signin-v3 .sv3-vk-schr { background: var(--vak-schrijven); }
.signin-v3 .sv3-vk-eng  { background: var(--vak-engels); }
.signin-v3 .sv3-vak__tekst b {
  display: block;
  font-family: var(--font-speels);
  font-weight: 800;
  color: var(--ink);
  font-size: 15.5px;
}
.signin-v3 .sv3-vak__tekst span {
  display: block;
  font-weight: 600;
  color: #3A4166;
  font-size: 13.5px;
  line-height: 1.45;
  margin-top: 2px;
}

/* Feature-blokken: één boodschap per scherm, gecentreerd. */
.signin-v3 .sv3-blok { text-align: center; }
.signin-v3 .sv3-blok__chip {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  border: var(--rand-ink);
  box-shadow: var(--schaduw-blok-s);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  transform: rotate(-2deg);
}
.signin-v3 .sv3-blok__chip svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.signin-v3 .sv3-blok p {
  max-width: 54ch;
  margin: 0 auto;
  font-weight: 600;
  color: #3A4166;
  font-size: 16px;
  line-height: 1.6;
}

/* Slot: het afsluitakkoord op een eigen kaart. */
.signin-v3 .sv3-slot {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-0.4deg);
  text-align: center;
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.signin-v3 .sv3-slot .sv3-gbtn { max-width: 340px; width: 100%; }
.signin-v3 .sv3-foot { padding-top: 26px; }

/* Toegankelijkheid: één zichtbare focusring voor alles (de demo-
   input had zelfs outline:none met alleen een kleurwissel). */
.signin-v3 :is(button, a, input):focus-visible {
  outline: 3px solid var(--vak-engels);
  outline-offset: 2px;
}
.signin-v3 .sv3-demo__input:focus { outline: revert; }

/* 320px-reflow: de inlogkaart hield een min-width van 280px. */
.signin-v3 .sv3-login { min-width: 0; }

/* ═══ Sprint 121 — klikbare vakkaarten + vak-informatie-modal ═══ */
/* De kaart is nu een knop: reset + zichtbare klik-affordance. */
.signin-v3 .sv3-vak {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-speels);
  transition: transform .1s, box-shadow .1s;
}
.signin-v3 .sv3-vak:hover { transform: translate(1px, 1px); box-shadow: var(--schaduw-blok-in); }
.signin-v3 .sv3-vak__pijl {
  margin-left: auto;
  align-self: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  opacity: .55;
  flex: none;
  padding-left: 10px;
}
.signin-v3 .sv3-vak:hover .sv3-vak__pijl { opacity: 1; }

/* De vak-informatie-modal. */
.modal-box--vak-info { max-width: 480px; width: calc(100vw - 36px); }
.vak-info__intro {
  color: #3A4166;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.55;
  margin: 4px 0 14px;
}
.vak-info__kop {
  font-family: var(--font-speels);
  font-weight: 800;
  color: var(--ink);
  font-size: 15px;
  margin: 14px 0 8px;
}
.vak-info__vormen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vak-info__vormen li {
  background: #E4F7FF;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 7px 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.vak-info__voorbeeld {
  background: #FFF6D6;
  border: 2.5px dashed var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-line;
}
.vak-info__voet {
  margin: 14px 0 0;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  color: #3A4166;
}

/* Sprint 121.1 — het voorbeeld als mini-schermafdruk: luchtje als
   achtergrond, echte vraagkaart-stijl en meerkeuze-knoppen, plus
   een niveaubadge zodat ouders de moeilijkheid kunnen plaatsen. */
.vak-info__voorbeeld {
  background: var(--confetti-lucht);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  padding: 12px;
  white-space: normal;
}
.vak-mini__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}
.vak-mini__badge {
  background: #FFD93D;
  border: 2px solid var(--ink);
  border-radius: 99px;
  padding: 2px 10px;
  font-weight: 800;
  font-size: 12px;
  color: var(--ink);
  transform: rotate(-1.5deg);
}
.vak-mini__groep {
  font-weight: 800;
  font-size: 12px;
  color: #3A4166;
}
.vak-mini__kaart {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 12px 14px;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  white-space: pre-line;
}
.vak-mini__opties {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 11px;
}
.vak-mini__optie {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--schaduw-blok-in);
  padding: 8px 12px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.vak-mini__schrijfveld {
  background: #fff;
  border: 2.5px dashed var(--ink);
  border-radius: 12px;
  padding: 12px;
  margin-top: 11px;
  min-height: 58px;
  font-weight: 600;
  font-size: 13.5px;
  color: #8A94B8;
  font-style: italic;
}

/* ============================================================
   Sprint 123 — De wereld van het kind
   Vos-vraag van de dag op home + portaalscherm Persoonlijk maken.
   ============================================================ */
.wereld-kaart {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 22px;
  box-shadow: var(--schaduw-blok) var(--ink);
  padding: 16px 18px 12px;
  margin: 14px 0 4px;
}
.wereld-kaart__kop {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wereld-kaart__kop svg {
  width: 44px;
  height: 54px;
  flex: none;
}
.wereld-kaart__vraag {
  font-family: var(--font-speels);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.wereld-kaart__opties {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 13px;
}
.wereld-optie {
  font-family: var(--font-speels);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  background: #FFF6D6;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 9px 13px;
  box-shadow: var(--schaduw-blok-s) var(--ink);
  cursor: pointer;
}
.wereld-optie:active {
  transform: translate(2px, 2px);
  box-shadow: var(--schaduw-blok-in) var(--ink);
}
.wereld-kaart__skip {
  display: block;
  background: none;
  border: none;
  color: #7A7E9C;
  font-size: 13px;
  text-decoration: underline;
  padding: 6px 0 2px;
  margin-top: 8px;
  cursor: pointer;
}
/* Bedankt-stand: opties + skip weg, dankregel + verder-knop erin. */
.wereld-kaart__dank { display: none; margin-top: 12px; }
.wereld-kaart--klaar .wereld-kaart__opties,
.wereld-kaart--klaar .wereld-kaart__skip { display: none; }
.wereld-kaart--klaar .wereld-kaart__dank { display: block; }
.wereld-kaart__dank p {
  font-family: var(--font-speels);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Portaal: Persoonlijk maken */
.wereld-form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.wereld-form .form-label { margin-top: 14px; }
.wereld-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#portal-wereld-opslaan { margin-top: 22px; }
.wereld-bewaard {
  color: #1D9E6F;
  font-weight: 700;
  text-align: center;
  margin-top: 12px;
}

/* ============================================================
   Sprint 126 — Niveau per vak (ouder-niveauknop in het portaal)
   ============================================================ */
.niveau-lijst {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.niveau-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: var(--rand-ink);
  border-radius: 18px;
  box-shadow: var(--schaduw-blok-s) var(--ink);
  padding: 12px 14px;
}
.niveau-rij__emoji { font-size: 24px; flex: none; }
.niveau-rij__tekst { flex: 1; min-width: 0; }
.niveau-rij__naam {
  font-family: var(--font-speels);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.niveau-rij__sub { font-size: 13px; color: #7A7E9C; margin-top: 1px; }
.niveau-rij__knoppen { display: flex; gap: 8px; flex: none; }
.niveau-knop {
  width: 42px;
  height: 42px;
  border: 2.5px solid var(--ink);
  border-radius: 13px;
  background: #FFF6D6;
  color: var(--ink);
  font-family: var(--font-speels);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  box-shadow: var(--schaduw-blok-in) var(--ink);
  cursor: pointer;
}
.niveau-knop:active { transform: translate(2px, 2px); box-shadow: none; }
.niveau-knop:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

/* ============================================================
   Sprint 131 — Senior-modus (groep 7-8)
   Zelfde lay-out, rustigere presentatie: subtielere blokschaduwen,
   decoratieve rotaties uit en een stil profielembleem i.p.v. de
   huppelende vos. Sprint 144 — de staalblauwe lucht is teruggedraaid
   (veldfeedback: "oogt grijs en sober"); ook groep 7-8 houdt de
   gewone luchtgradient. De inkt (--ink) blijft — alle contrast-
   verhoudingen blijven gelijk.
   ============================================================ */
body.band-senior {
  --schaduw-blok: 3px 3px 0;
  --schaduw-blok-s: 2px 2px 0;
}
/* Decoratieve rotaties uit op de meest zichtbare spelers. */
body.band-senior .wereld-kaart,
body.band-senior .vak-mini__badge,
body.band-senior .engagement-chip,
body.band-senior .home-hero__fox,
body.band-senior .cat__tile {
  transform: none !important;
}
/* De vos huppelt niet meer: klein, stil profielembleem. */
body.band-senior .home-v3 .home-hero__fox .lucas-bob { animation: none; }
body.band-senior .home-hero__fox { scale: 0.78; }

/* Sprint 132 — uiterlijk-keuzemodal */
.uiterlijk-uitleg {
  font-size: 14px;
  color: #5C6285;
  margin: 4px 0 14px;
}
.uiterlijk-opties { display: flex; flex-direction: column; gap: 10px; }
.uiterlijk-optie {
  font-family: var(--font-speels);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  box-shadow: var(--schaduw-blok-s) var(--ink);
  cursor: pointer;
}
.uiterlijk-optie--actief {
  background: #FFE477;
  box-shadow: var(--schaduw-blok-in) var(--ink);
  transform: translate(1px, 1px);
}

/* ============================================================
   Sprint 135 — vakbalans: vakweek-kaart (home) + tijd per vak
   (ouderportaal Voortgang).
   ============================================================ */
.vakweek-kaart {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 18px;
  box-shadow: var(--schaduw-blok-s) var(--ink);
  padding: 12px 16px;
  margin: 10px 0 4px;
}
.vakweek-kaart__titel {
  font-family: var(--font-speels);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--ink);
}
.vakweek-kaart__sub {
  font-size: 13.5px;
  color: #5C6285;
  margin-top: 3px;
}

/* Volle breedte afdwingen: de voortgangskolom centreert kinderen op
   inhoudsbreedte, waardoor de balken anders tot 0px krompen. */
.progress-tijd { margin: 6px 0 18px; width: 100%; align-self: stretch; }
.tijd-blok { width: 100%; box-sizing: border-box; }
.tijd-rij { width: 100%; }
.tijd-kop {
  font-family: var(--font-speels);
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 8px;
}
.tijd-blok {
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok-s) var(--ink);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.tijd-blok__titel { font-weight: 800; font-size: 13px; color: #5C6285; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.tijd-rij { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.tijd-rij__naam { flex: 0 0 150px; font-size: 14px; font-weight: 700; color: var(--ink); }
.tijd-rij__balkwrap { flex: 1; height: 12px; background: #EEF1F6; border-radius: 6px; overflow: hidden; }
.tijd-rij__balk { display: block; height: 100%; background: linear-gradient(90deg, #23C4A7, #3E9BFF); border-radius: 6px; }
.tijd-rij__cijfers { flex: 0 0 88px; text-align: right; font-size: 12.5px; color: #5C6285; font-variant-numeric: tabular-nums; }
.tijd-blok__vlaggen { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #B45309; }
@media (max-width: 480px) {
  .tijd-rij__naam { flex-basis: 116px; font-size: 12.5px; }
  .tijd-rij__cijfers { flex-basis: 74px; }
}
/* Ultrasmal (kleine telefoons, smalle panes): balk op een eigen regel,
   anders knijpen de vaste kolommen hem naar 0px. */
@media (max-width: 360px) {
  .tijd-rij { flex-wrap: wrap; row-gap: 3px; }
  .tijd-rij__naam { flex: 1 0 auto; }
  .tijd-rij__cijfers { flex: 0 0 auto; }
  .tijd-rij__balkwrap { flex: 0 0 100%; order: 3; }
}

/* Sprint 137 — topbar-profielknop (naast Ouders). Sprint 144 — het
   mini-avatar-portret is eruit (oogde niet, veldfeedback); de pil is
   nu een persoon-icoon + naam, in dezelfde taal als de Ouders-chip.
   Het icoon erft de 16px-maat via .home-v3 .ouders-chip svg. */
.profiel-chip { gap: 6px; }
.profiel-chip__naam {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Smal scherm: kortere naam zodat merk + drie chips op één rij passen. */
@media (max-width: 600px) {
  .profiel-chip__naam { max-width: 56px; }
  .profiel-chip { padding-left: 9px; padding-right: 9px; }
}

/* Sprint 138 — inleverdrempel schrijven */
.schrijven-min-hint {
  font-weight: 700;
  font-size: 14px;
  color: #B45309;
  background: #FEF3C7;
  border-radius: 12px;
  padding: 9px 13px;
  margin: 0 0 10px;
}

/* ═══════════════════════════════════════════════════════════════
   Sprint 147 — vraagmeldingen
   De ⚠-knop staat op kinderschermen en moet daar duidelijk GEEN
   antwoordknop lijken: kleiner dan de FAB, gedempt, linksonder
   (de feedback-FAB zit rechtsonder en ze zijn nooit tegelijk
   zichtbaar, maar zo botsen ze ook op tablets niet).
   ═══════════════════════════════════════════════════════════════ */
/* De oefening-navbalk mag afbreken. Gemeten op 375px: terugknop (79)
   + voortgangspil (146) + niveaustippen (113) + tussenruimtes lopen
   samen al tot 376px in een balk van 335px — de stippen liepen dus
   vóór deze sprint al buiten beeld, en de meldknop maakte dat
   zichtbaar. Met wrap valt de knop netjes op een tweede regel in
   plaats van buiten het venster. Kost ~22px hoogte op een telefoon. */
.screen--oefening .screen-nav {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Staat IN de navigatiebalk van het actieve oefenscherm (showScreen
   verplaatst hem daarheen), niet zwevend over het scherm: als fixed
   element lag hij bij smalle vensters bovenop de onderste
   antwoordknop. */
#meld-vraag-btn {
  margin-left: auto;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Sprint 171 — was #FFF6D6 op 0.8 doorzichtig: op het lichte
     startscherm loste de knop visueel op ("er staat geen
     feedbackknop"). Nu vol dekkend en met een eigen kleur. */
  background: #FFD44D;
  border: var(--rand-ink);
  box-shadow: var(--schaduw-blok-s);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
#meld-vraag-btn.hidden { display: none; }
#meld-vraag-btn:hover  { opacity: 1; transform: translateY(-1px); }
#meld-vraag-btn:active { transform: translate(2px, 2px); box-shadow: var(--schaduw-blok-in); }
#meld-vraag-btn:focus-visible { outline: 3px solid #6D3BEB; outline-offset: 2px; opacity: 1; }

.meld-toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-speels);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(30, 39, 73, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 1200;
  max-width: min(92vw, 420px);
  text-align: center;
}
.meld-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Portaal: de wachtrij ── */
.meldingen-leeg {
  background: #FFF;
  border: var(--rand-ink);
  border-radius: 16px;
  box-shadow: var(--schaduw-blok-s);
  padding: 18px;
  text-align: center;
  color: #4A5578;
}
.meldingen-lijst { display: flex; flex-direction: column; gap: 14px; }

.melding-kaart {
  background: #fff;
  border: var(--rand-ink);
  border-radius: 18px;
  box-shadow: var(--schaduw-blok-s);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.melding-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.melding-vak {
  font-family: var(--font-speels);
  font-weight: 800;
  color: var(--ink);
}
.melding-meta { font-size: 13px; color: #6B7394; }
.melding-opgave {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}
.melding-opties {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.melding-opties li {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid #D5DAEA;
  color: #4A5578;
  background: #F7F8FC;
}
/* Groen = door de app goed gerekend, paars = wat het kind koos. */
.melding-optie--goed {
  border-color: #16A34A;
  background: #EAF7EF;
  color: #14532D;
  font-weight: 800;
}
.melding-optie--gekozen { box-shadow: inset 0 0 0 2px #6D3BEB; }

.melding-shot {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  object-position: top;
  border: 2px solid #D5DAEA;
  border-radius: 12px;
  background: #FFFBEB;
}
.melding-tekst {
  width: 100%;
  border: var(--rand-ink);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
}
.melding-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.melding-status { font-size: 13px; color: #6B7394; min-height: 1em; }

@media (max-width: 380px) {
  .melding-acties .btn { flex: 1 1 100%; }
}

/* ── Sprint 150 — melden gaat ook over ideeën ────────────────
   Vaste keuzes in plaats van vrije tekst: zo kan een kind het ook
   aantikken zonder dat er een invoerveld op een kinderscherm staat. */
.meld-opgave {
  background: #FFF6D6;
  border: 2px solid #F2E3A8;
  border-radius: 12px;
  padding: 9px 12px;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  max-height: 4.6em;
  overflow: hidden;
}
.meld-redenen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 12px;
}
.meld-chip {
  border: var(--rand-ink);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--schaduw-blok-s);
  -webkit-tap-highlight-color: transparent;
}
.meld-chip:active { transform: translate(2px, 2px); box-shadow: var(--schaduw-blok-in); }
.meld-chip--aan { background: #FFD93D; }
.meld-chip:focus-visible { outline: 3px solid #6D3BEB; outline-offset: 2px; }
.meld-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.meld-acties .btn { flex: 1 1 auto; }
.melding-reden {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #6D3BEB;
}
@media (max-width: 380px) {
  .meld-acties .btn { flex: 1 1 100%; }
}

/* ── Sprint 151 — resultaatscherm opgeruimd ──────────────────
   Veldfeedback: minder tekst. De subscores en de rangregel zijn in
   JS/HTML verwijderd; hier krijgen de lumi's dezelfde pilvorm als de
   XP: kopregel (wat kwam erbij) + subregel (totaal) in één vorm. */
.screen--oefening .result-rewards .result-earned {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: fit-content;
  margin: 0 auto;
  font-size: 19px;               /* zelfde maat als de XP-pil */
  font-family: var(--font-speels);
  padding: 8px 20px;
}
.screen--oefening .result-rewards .result-earned__total {
  font-size: 13.5px;
  font-weight: 700;
  opacity: .75;
}
/* Herhaalsessie: zelfde pil, gedempte tekst — geen aparte vorm meer. */
.screen--oefening .result-rewards .result-earned--repeat {
  font-size: 15px;
  color: var(--ink);
}
/* De losse totaalregel is uit de flow (JS zet hidden); dit vangt het
   geval dat een oude cache-versie van app.js nog tekst neerzet. */
.screen--oefening .result-rewards .result-balance[hidden] { display: none; }

/* ── Sprint 152 — meldknop overal ────────────────────────────
   Op schermen zonder navigatiebalk (home, winkel, portaal) zweeft de
   knop rechtsonder, op de plek van de oude feedback-FAB. */
#meld-vraag-btn.meld-vraag-btn--zwevend {
  position: fixed;
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px));
  margin-left: 0;
  /* Sprint 171 — zwevend krijgt een woordlabel: een kaal tekstwolkje
     werd als versiering gelezen. Gedokt (oefenschermen) blijft het
     ronde icoon, want daar is de navigatiebalk al krap (Sprint 147.1
     liep bij 375px over). */
  width: auto;
  height: 48px;
  padding: 0 16px;
  gap: 7px;
  border-radius: 24px;
  font-size: 20px;
  opacity: 1;
  z-index: 900;   /* onder de modals, boven de schermen */
}
#meld-vraag-btn.meld-vraag-btn--zwevend::after {
  content: 'Feedback';
  font-family: var(--font-speels);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
}
/* Sprint 171 — nagemaakte knop in de panel-uitleg; puur ter
   herkenning, dus geen echte knop (niet klikbaar, niet in de
   tabvolgorde). Zelfde maten en kleur als de zwevende knop
   hierboven, anders herkent het gezin hem straks niet. */
.panel-welkom-knop {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  padding: 0 16px;
  border-radius: 24px;
  background: #FFD44D;
  border: var(--rand-ink);
  box-shadow: var(--schaduw-blok-s);
  color: var(--ink);
  font-family: var(--font-speels);
  font-size: 15px;
  font-weight: 700;
}
.meld-bijlage {
  margin: 8px 0 12px;
  font-size: 12.5px;
  color: #6B7394;
}

/* ── Sprint 157 — aankondiging vóór de plaatsingstest ────────
   Vriendelijk en duidelijk: groot kompas, korte uitleg, één knop.
   Geen sluitkruis: de enige weg is bewust starten (Terug op het
   oefenscherm blijft de uitweg erna). */
.plaatsing-intro { text-align: center; }
.plaatsing-intro__kompas {
  font-size: 56px;
  line-height: 1;
  margin: 4px 0 10px;
  animation: plaatsing-wiebel 2.4s ease-in-out infinite;
}
@keyframes plaatsing-wiebel {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .plaatsing-intro__kompas { animation: none; }
}
.plaatsing-intro h2 {
  font-family: var(--font-speels);
  color: var(--ink);
  margin: 0 0 10px;
}
.plaatsing-intro__tekst {
  margin: 0 0 10px;
  line-height: 1.5;
  color: #3A4266;
}
.plaatsing-intro__tekst b { color: var(--ink); }
.plaatsing-intro__start {
  width: 100%;
  margin-top: 8px;
  font-size: 17px;
}

/* ── Sprint 159 — plaatsingsintro: kompas niet afgeknipt, één regel ──
   De emoji werd bovenaan geclipt: font-size 56 met line-height 1
   knipt de ascent af binnen de modal-box. Ruimere line-height +
   padding lost het op; de tekst is één regel en mag groter. */
.plaatsing-intro { padding-top: 22px; }
.plaatsing-intro__kompas {
  font-size: 48px;
  line-height: 1.3;
  margin: 0 0 8px;
}
.plaatsing-intro__tekst {
  font-size: 17px;
  margin: 0 0 14px;
}

/* Typvraag op de wereld-kaart (eten): invoer + OK naast elkaar. */
.wereld-tekst-invoer { flex: 1 1 160px; min-width: 0; }
.wereld-tekst-ok { flex: 0 0 auto; }