/* ============================================================
   BRAIALS THEMA - "Vrolijk" (playful)
   Verfijnde sticker/3D-look op warm papier, gemapt op de
   standaard Braials-classes. Bespoke mockup-c als visueel doel:
   ronde omrande kaarten, dikke donkere randen, gelaagde
   3D-schaduwen, gekantelde stickers en zachte gradient-gloed.
   Nunito wordt apart geladen; hier alleen toegewezen.
   Groen = goed, rood = fout blijft behouden.
   ============================================================ */

/* === 1. TOKENS OVERSCHRIJVEN === */
:root {
  /* Warme inkt op papier */
  --ink: #3a2e2a;
  --ink-mid: #5b4a44;
  --ink-soft: #6b5b54;

  /* Warm papier */
  --paper: #fff8f0;
  --paper-warm: #fffdf8;
  --white: #ffffff;

  /* Vrolijk palet, vertaald naar de basis-token-namen */
  --gold: #ffc94b;        --gold-light: #fff3d6;  --gold-dark: #a06e10;
  --ocean: #4fb0e6;       --ocean-light: #e3f4fd; --ocean-dark: #2f8cc0;
  --ember: #ff7a59;       --ember-light: #ffe3d9; --ember-dark: #e8603f;
  --forest: #41c1a4;      --forest-light: #e0f6f0; --forest-dark: #2f9a82;
  --plum: #7c6cf0;        --plum-light: #ece8ff;  --plum-dark: #5a4bcf;

  /* Semantiek behouden */
  --correct: #2f9a82;     --correct-bg: #dff6ee;
  --incorrect: #e05656;   --incorrect-bg: #fde4e4;

  /* Stevige donkere rand voor het 3D-sticker-effect */
  --border: #2e241f;
  --line: #f0e3d4;
  --radius: 20px;

  /* Gelaagde 3D-schaduwen, zacht en warm */
  --shadow:    0 6px 0 rgba(46,36,31,0.05), 0 8px 18px rgba(58,46,42,0.08);
  --shadow-md: 0 10px 0 rgba(46,36,31,0.05), 0 14px 28px rgba(58,46,42,0.09);
  --shadow-lg: 0 14px 0 rgba(46,36,31,0.06), 0 18px 36px rgba(58,46,42,0.10);

  /* Nunito (site laadt de font apart) */
  --font-heading: 'Nunito', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Header-gradient: zonnegeel naar koraal */
  --header-bg: linear-gradient(135deg, #ffd56b 0%, #ff9a6b 55%, #ff7a59 100%);
}

/* === 2. BODY + ACHTERGROND === */
body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.65;
  font-size: 17px;
  font-weight: 600;
  background-color: var(--paper);
  /* Zachte multi-radial gloed: zonnegeel, paars, mint */
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,201,75,0.22), transparent 38%),
    radial-gradient(circle at 88% 4%, rgba(124,108,240,0.16), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(65,193,164,0.14), transparent 45%);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 900; letter-spacing: -0.01em; }

/* === 3. HEADER (ronde kaart, gecentreerd, niet full-bleed) === */
.header {
  /* Even breed als de content in .container (816px min de zijpadding van 1.1rem),
     zodat de header-kaart uitlijnt met de leerdoelen en oefenkaarten. */
  width: calc(100% - 2.2rem);
  max-width: calc(816px - 2.2rem);
  margin: 1.5rem auto 0;
  background: var(--header-bg);
  color: #3a2410;
  border: 3px solid var(--border);
  border-radius: 28px;
  padding: 2.4rem 1.8rem 2.1rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
/* Decoratieve zwevende cirkels rechtsboven en rechtsonder */
.header::before {
  content: '';
  position: absolute;
  top: -42px; right: 30px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,0.30);
}
.header::after {
  content: '';
  position: absolute;
  bottom: -34px; right: 150px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
}
.header-inner { position: relative; z-index: 1; }
.header h1 {
  font-size: clamp(1.9rem, 6vw, 2.7rem);
  font-weight: 900;
  color: #3a2410;
  line-height: 1.12;
  margin-bottom: 0.7rem;
  letter-spacing: -0.5px;
}
.header-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  color: var(--ink);
  border: 3px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 1rem 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: none;
  box-shadow: 0 4px 0 rgba(46,36,31,0.16);
  margin-bottom: 0.9rem;
}
/* Gekleurd mint-bolletje voor het label */
.header-tag::before {
  content: '';
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--forest);
  box-shadow: 0 0 0 3px rgba(65,193,164,0.25);
}
.header p {
  font-size: 1.02rem;
  font-weight: 600;
  color: #4a3017;
  opacity: 0.95;
  margin-top: 0.4rem;
}

/* === 4. LAYOUT === */
.container { max-width: 816px; padding: 2rem 1.1rem 4rem; }

/* === 5. VOORTGANG === */
.progress-wrap {
  background: var(--white);
  border: 3px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.prog-label { color: var(--ink-mid); font-weight: 800; }
.prog-track {
  height: 14px;
  background: var(--paper-warm);
  border: 2.5px solid var(--border);
  border-radius: 10px;
}
.prog-fill { background: linear-gradient(90deg, var(--ember), var(--gold)); }
.prog-num { color: var(--ink-soft); font-weight: 700; }

/* === 6. SECTIEKOP (licht, links uitgelijnd) === */
.sec, .section {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.4rem 0.2rem;
  margin: 2.4rem 0 1.1rem;
  box-shadow: none;
  animation: none;
}
.sec-tag {
  display: inline-block;
  background: var(--gold);
  color: #4a2f12;
  border: 3px solid var(--border);
  border-radius: 10px;
  padding: 0.32rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 2px 3px 0 rgba(46,36,31,0.18);
  transform: rotate(-2deg);
  margin-bottom: 0.6rem;
}
.sec h2, .section h2 {
  font-size: clamp(1.3rem, 4.5vw, 1.6rem);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.sec-sub { color: var(--ink-soft); font-weight: 600; }

/* === 7. INFOBOX (zacht getint, dashed accent-rand) === */
.info {
  background: var(--gold-light);
  border: 2.5px dashed var(--ember);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.4rem;
  position: relative;
  animation: none;
}
.info h3 { font-family: var(--font-heading); font-weight: 900; color: var(--gold-dark); font-size: 1.1rem; }
.info p { line-height: 1.7; }
.info.ocean { background: var(--forest-light); border-color: var(--forest); }
.info.ocean h3 { color: var(--forest-dark); }
.info.forest { background: var(--forest-light); border-color: var(--forest); }
.info.forest h3 { color: #16774e; }
/* Decoratief accent-bolletje linksboven */
.info::before {
  content: '';
  position: absolute; top: 16px; left: -8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ember); border: 3px solid var(--border);
}
.info.ocean::before, .info.forest::before { background: var(--forest); }
.info.warning { background: var(--ember-light); border-color: var(--ember); }
.info.warning h3 { color: var(--ember-dark); }
.info.warning::before { background: var(--ember); }

/* === 8. OEFENKAART (witte ronde kaart, donkere rand) === */
.card {
  background: var(--white);
  border: 3px solid var(--border);
  border-radius: 28px;
  padding: 1.7rem 1.5rem 1.8rem;
  margin-bottom: 1.9rem;
  box-shadow: var(--shadow-md);
  animation: none;
}
/* Overschrijf de roterende border-left van de basis: altijd donkere rand */
.card,
.card:nth-child(4n+1),
.card:nth-child(4n+2),
.card:nth-child(4n+3),
.card:nth-child(4n+4) { border-left: 3px solid var(--border); }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.card-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0;
  border-bottom: none;
}
.card-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ember);
  color: #fff;
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 3px 0 var(--ember-dark);
}
/* Gekleurde badge rouleert per kaart, met 3D-drop in donkerder tint */
.card:nth-child(4n+1) .card-num { background: var(--ember);  box-shadow: 0 3px 0 var(--ember-dark); }
.card:nth-child(4n+2) .card-num { background: var(--gold);   box-shadow: 0 3px 0 var(--gold-dark); color: #4a2f12; }
.card:nth-child(4n+3) .card-num { background: var(--forest); box-shadow: 0 3px 0 var(--forest-dark); }
.card:nth-child(4n+4) .card-num { background: var(--plum);   box-shadow: 0 3px 0 var(--plum-dark); }
.card-title { font-family: var(--font-heading); font-weight: 900; font-size: 1.4rem; color: var(--ink); }
.card-instr { color: var(--ink-soft); font-weight: 600; line-height: 1.6; }

/* === 9. VRAGEN / INVOERRIJEN === */
.row {
  background: var(--paper-warm);
  border: 2.5px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.8rem;
  line-height: 1.9;
  font-weight: 700;
}
/* Overschrijf de basis-onderlijnen en zebra-fills */
.row,
.row:nth-child(even),
.row:last-child { border-bottom: 2.5px solid var(--line); background: var(--paper-warm); }
.rn {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: var(--plum);
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
  box-shadow: 0 3px 0 var(--plum-dark);
}
.eng { color: var(--ink-soft); font-weight: 600; font-style: italic; }

/* === 10. FORMULIER-INVOER === */
input[type="text"], textarea, select {
  font-family: var(--font-body);
  font-weight: 800;
  border: 2.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  padding: 0.4rem 0.7rem;
}
.inline, .narrow, .wide { font-weight: 800; text-align: center; }
.wide { text-align: left; }
textarea { text-align: left; min-height: 80px; }
input[type="text"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 4px rgba(255,122,89,0.25);
  background: var(--white);
}
input[type="text"]:not(:placeholder-shown):not(:focus) { border-color: var(--border); }

/* Invoer-states: semantiek behouden, basis gebruikt !important dus wij ook */
.input-ok {
  border-color: var(--correct) !important;
  background: var(--correct-bg) !important;
  box-shadow: 0 0 0 4px rgba(47,154,130,0.20) !important;
}
.input-no {
  border-color: var(--incorrect) !important;
  background: var(--incorrect-bg) !important;
  box-shadow: 0 0 0 4px rgba(224,86,86,0.20) !important;
}
.mc.input-ok, .mc.input-no { border-width: 2.5px !important; border-radius: 14px; }

/* True/false radio-labels in een .row */
.row label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 800;
}
input[type="radio"] { accent-color: var(--ember); width: 20px; height: 20px; }
/* Inline radio-keuzes binnen een .row groter en leesbaarder */
.mc .row { font-size: 1.04rem; line-height: 2.05; }
.mc .row input[type="radio"] { vertical-align: -4px; margin: 0 0.2rem 0 0.5rem; cursor: pointer; }

/* === 11. MEERKEUZE met LETTER-BADGES via counters === */
.mc { margin: 0.4rem 0 1.2rem; counter-reset: mcopt; }
.mco {
  counter-increment: mcopt;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--paper-warm);
  border: 2.5px solid var(--line);
  border-radius: 14px;
  padding: 0.7rem 1rem;
  margin: 0.45rem 0;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.mco::before {
  content: counter(mcopt, lower-alpha);
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--white);
  border: 2.5px solid var(--border);
  font-weight: 900;
  font-size: 0.9rem;
}
.mco:hover { transform: translateY(-2px); border-color: var(--ocean); box-shadow: var(--shadow); }
.mco.sel { border-color: var(--ocean); background: var(--ocean-light); box-shadow: 0 4px 0 var(--ocean); }
.mco.sel::before { background: var(--ocean); color: #fff; border-color: var(--ocean); }
.mco.ok { border-color: var(--correct); background: var(--correct-bg); color: #145246; }
.mco.ok::before { background: var(--correct); color: #fff; border-color: var(--correct); }
.mco.no { border-color: var(--incorrect); background: var(--incorrect-bg); color: #7a2424; }
.mco.no::before { background: var(--incorrect); color: #fff; border-color: var(--incorrect); }

/* Radio-meerkeuze met dezelfde letter-badges */
.mc-radio { counter-reset: mcropt; }
.mc-radio label {
  counter-increment: mcropt;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 2.5px solid var(--line);
  border-radius: 14px;
  padding: 0.75rem 1.05rem;
  font-size: 1.02rem;
  font-weight: 700;
  background: var(--paper-warm);
}
.mc-radio label::before {
  content: counter(mcropt, lower-alpha);
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--white);
  border: 2.5px solid var(--border);
  font-weight: 900;
  font-size: 0.9rem;
}
.mc-radio label:hover { border-color: var(--ocean); background: var(--ocean-light); transform: translateY(-1px); }
.mc-radio label:has(input[type="radio"]:checked) { border-color: var(--ocean); background: var(--ocean-light); }
.mc-radio label.ok, .mc-radio label.ok:has(input[type="radio"]:checked) { border-color: var(--correct); background: var(--correct-bg); }
.mc-radio label.ok::before { background: var(--correct); color: #fff; border-color: var(--correct); }
.mc-radio label.no, .mc-radio label.no:has(input[type="radio"]:checked) { border-color: var(--incorrect); background: var(--incorrect-bg); }
.mc-radio label.no::before { background: var(--incorrect); color: #fff; border-color: var(--incorrect); }
.mc-radio input[type="radio"] { accent-color: var(--ember); }

/* === 12. MATCHING === */
.match-row {
  border: 2.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper-warm);
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.8rem;
}
.match-row:nth-child(odd) { background: var(--paper-warm); }
.match-row:hover { border-color: var(--plum); background: var(--plum-light); }
.match-left { font-weight: 900; color: var(--ink); }

/* === 13. WOORDENSCHAT (uniform wit, donkere accenten) === */
.vocab-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.vocab-item {
  background: var(--paper-warm);
  border: 2.5px solid var(--line);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
/* Overschrijf de roterende achtergrondkleuren: houd cellen uniform */
.vocab-item:nth-child(4n+2),
.vocab-item:nth-child(4n+3),
.vocab-item:nth-child(4n+4) { background: var(--paper-warm); }
.vocab-item:hover,
.vocab-item:nth-child(4n+2):hover,
.vocab-item:nth-child(4n+3):hover,
.vocab-item:nth-child(4n+4):hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--shadow);
  background: var(--white);
}
.vocab-item .dutch,
.vocab-item:nth-child(4n+2) .dutch,
.vocab-item:nth-child(4n+3) .dutch,
.vocab-item:nth-child(4n+4) .dutch { color: var(--ink); font-weight: 900; font-size: 1.08rem; }
.vocab-item .english { color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; }
.vocab-item.vocab-audio { flex-direction: row; align-items: center; gap: 0.7rem; }
.vocab-play-btn {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  background: var(--ember);
  color: #fff;
  box-shadow: 0 4px 0 var(--ember-dark);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.vocab-play-btn:hover { background: var(--ember-dark); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ember-dark); }
.vocab-play-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ember-dark); }

/* === 14. DIALOOG === */
.dialogue-bubble {
  border: 2.5px solid var(--border);
  border-radius: 20px;
  font-weight: 700;
  line-height: 1.5;
  max-width: 88%;
  padding: 0.8rem 1.05rem;
  box-shadow: 0 3px 0 rgba(46, 36, 31, 0.12);
}
.speaker-a { background: #ffe5d8; border-bottom-left-radius: 6px; align-self: flex-start; }
.speaker-b { background: #c7eee2; border-bottom-right-radius: 6px; align-self: flex-end; }
.dialogue-bubble strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 900;
  opacity: 0.65;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

/* === 15. SCENARIO (vrolijk getint, dashed rand) === */
.scenario-box {
  background: var(--ocean-light);
  border: 2.5px dashed var(--ocean);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  position: relative;
}

/* === 16. KNOPPEN === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--gold);
  color: #4a2f12;
  border: 3px solid var(--border);
  border-radius: 14px;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 5px 0 #d9a52f;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn:hover { background: var(--gold); filter: brightness(1.03); transform: translateY(-2px); box-shadow: 0 7px 0 #d9a52f; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #d9a52f; }
.btn:focus-visible { outline: none; box-shadow: 0 5px 0 #d9a52f, 0 0 0 4px rgba(255,201,75,0.45); }
/* Toon modelantwoord: paars */
.btn-show {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--plum);
  color: #fff;
  border: 3px solid var(--border);
  border-radius: 14px;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.9rem;
  box-shadow: 0 5px 0 var(--plum-dark);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-show:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 7px 0 var(--plum-dark); }
.btn-show:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--plum-dark); }

/* === 17. FEEDBACK (semantiek behouden) === */
.fb { border-radius: 14px; font-weight: 800; }
.fb.ok { background: var(--correct-bg); color: #136b41; border: 2.5px solid var(--correct); border-left: 2.5px solid var(--correct); }
.fb.no { background: var(--incorrect-bg); color: #a31b2a; border: 2.5px solid var(--incorrect); border-left: 2.5px solid var(--incorrect); }

/* === 18. MODELANTWOORD (witte box, dashed paarse rand) === */
.model-answer {
  background: var(--white);
  border: 2.5px dashed var(--plum);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  color: #2c2360;
  font-weight: 800;
}
.model-answer strong { color: var(--plum-dark); font-weight: 900; }

/* === 19. MEDIA === */
.lesson-image { border: 3px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.audio-wrap audio { width: 100%; border-radius: 12px; }
.audio-box {
  background: var(--plum-light);
  border: 2.5px dashed var(--plum);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}

/* === 20. DIVIDER (subtiel, gestippeld) === */
.divider {
  height: 0;
  background: none;
  border: none;
  border-top: 3px dotted rgba(46,36,31,0.18);
  border-radius: 0;
  margin: 2rem 0;
}

/* === 21. FOOTER (witte omrande ronde kaart) === */
.footer {
  text-align: center;
  background: var(--white);
  border: 3px solid var(--border);
  border-radius: 28px;
  padding: 1.7rem 1.5rem;
  margin-top: 2.4rem;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.02rem;
  box-shadow: var(--shadow-md);
}

/* === 22. REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
  .card, .info, .sec, .section, .fb.ok, .fb.no { animation: none; }
  .card:hover, .vocab-item:hover, .mco:hover, .mc-radio label:hover,
  .btn:hover, .btn-show:hover, .match-row:hover { transform: none; }
  .vocab-play-btn:hover, .vocab-play-btn:active { transform: none; }
}

/* === 23. RESPONSIVE === */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .header { margin: 1rem auto 0; padding: 2rem 1.2rem 1.8rem; border-radius: 24px; }
  .header h1 { font-size: 1.7rem; }
  .header::before { width: 110px; height: 110px; right: 12px; top: -30px; }
  .container { padding: 1.4rem 0.9rem 3rem; }
  .card { padding: 1.3rem 1.1rem 1.4rem; border-radius: 24px; }
  .card-title { font-size: 1.2rem; }
  .sec h2, .section h2 { font-size: 1.3rem; }
  .sec-tag, .header-tag { transform: rotate(-1.5deg); }
  .header-tag { transform: none; }
  .vocab-list { grid-template-columns: 1fr; }
  .dialogue-bubble { max-width: 95%; }
  .footer { border-radius: 24px; }
}
/* Blok-wrappers (lesbouwer/AI-JSON-pad): zelfde badge-rotatie als hierboven. */
.blok:nth-child(4n+1) > .card .card-num { background: var(--ember);  box-shadow: 0 3px 0 var(--ember-dark); }
.blok:nth-child(4n+2) > .card .card-num { background: var(--gold);   box-shadow: 0 3px 0 var(--gold-dark); color: #4a2f12; }
.blok:nth-child(4n+3) > .card .card-num { background: var(--forest); box-shadow: 0 3px 0 var(--forest-dark); }
.blok:nth-child(4n+4) > .card .card-num { background: var(--plum);   box-shadow: 0 3px 0 var(--plum-dark); }

/* === ZINSCHEMA: sticker-tabel met dikke rand en kleurkop === */
table.schema {
  border: 3px solid #2e241f;
  box-shadow: 4px 4px 0 rgba(46, 36, 31, 0.15);
}
table.schema thead th {
  background: var(--ocean);
  font-family: var(--font-heading);
  font-size: 0.95rem;
}
table.schema td b {
  border: 2px solid #2e241f;
  border-bottom-width: 2px;
  border-radius: 8px;
  box-shadow: 2px 2px 0 rgba(46, 36, 31, 0.2);
  transform: rotate(-1.5deg);
}

/* === UITLEG TUSSENDOOR: sticker-chips en vrolijke voorbeelden === */
.ww-chip, .vw-chip, .pre-chip, .vast-chip {
  border: 2px solid #2e241f;
  border-radius: 9px;
  padding: 1px 10px;
  box-shadow: 1.5px 1.5px 0 rgba(46, 36, 31, 0.25);
}
.voorbeeldblok .vb-rij {
  padding: 0.5rem 0.9rem;
  border-left: none;
  border: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.voorbeeldblok .vb-rij + .vb-rij { margin-top: 0.6rem; }