/* ============================================================
   BRAIALS - Lesson Template CSS
   Vast stylesheet voor alle gegenereerde lessen en oefeningen.
   Wordt automatisch geïnjecteerd door lesson-html-injector.js
   ============================================================ */

/* === CSS VARIABELEN === */
:root {
  --ink: #1a1a2e;
  --ink-mid: #3d3d5c;
  --ink-soft: #6e6e8a;
  --paper: #f8f6f1;
  --paper-warm: #f2efe8;
  --white: #ffffff;
  --gold: #d4a843;
  --gold-light: #f5e6be;
  --gold-dark: #b8922f;
  --ocean: #2d6a8f;
  --ocean-light: #c4dff0;
  --ocean-dark: #1d4f6e;
  --ember: #c44b3f;
  --ember-light: #f8cdc9;
  --forest: #3a7d5c;
  --forest-light: #c2e5d3;
  --plum: #7b4f8a;
  --plum-light: #dfc8ea;
  --correct: #22c55e;
  --correct-bg: #f0fdf4;
  --incorrect: #ef4444;
  --incorrect-bg: #fef2f2;
  --border: #d4d0c8;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(26,26,46,0.10);
  --shadow-md: 0 4px 20px rgba(26,26,46,0.14);
  --shadow-lg: 0 8px 32px rgba(26,26,46,0.18);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --header-bg: linear-gradient(135deg, #1a1a2e 0%, #2d3a5c 60%, #2d6a8f 100%);
}

/* === RESET === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === ANIMATIONS === */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #c0b8ad; }
::-webkit-scrollbar-thumb { background: #8a7f72; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #6e6458; }
html { scrollbar-width: auto; scrollbar-color: #8a7f72 #c0b8ad; }

/* === BASE TYPOGRAPHY === */
body {
  font-family: var(--font-body);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 20% 50%, rgba(45,106,143,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(212,168,67,0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(123,79,138,0.05) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.72;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.3;
}

/* === HEADER === */
.header {
  background: var(--header-bg);
  color: var(--white);
  padding: 2.5rem 1.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.header::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(212, 168, 67, 0.08);
}
.header-inner {
  position: relative;
  z-index: 1;
}
.header-tag {
  display: inline-block;
  background: rgba(212, 168, 67, 0.25);
  border: 1px solid rgba(212, 168, 67, 0.4);
  color: var(--gold-light);
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.header h1 {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--white);
}
.header p {
  font-size: 0.92rem;
  opacity: 0.8;
  margin-top: 0.3rem;
}

/* === LAYOUT === */
.container {
  max-width: 840px;
  margin: 0 auto;
  padding: 1.5rem 1.2rem 4rem;
}

/* === PROGRESS BAR === */
.progress-wrap {
  background: var(--white);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.prog-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-mid);
  margin-bottom: 0.4rem;
}
.prog-track {
  height: 8px;
  background: var(--paper-warm);
  border-radius: 4px;
  overflow: hidden;
}
.prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ocean), var(--gold));
  border-radius: 4px;
  width: 0%;
  transition: width 0.6s ease;
}
.prog-num {
  text-align: right;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

/* === SECTION HEADER === */
.sec, .section {
  text-align: center;
  margin: 2.5rem 0 1.2rem;
  padding: 1.2rem 1rem;
  background: linear-gradient(135deg, var(--ocean-light) 0%, rgba(212,168,67,0.08) 100%);
  border-radius: var(--radius);
  position: relative;
  animation: fadeSlideIn 0.5s ease both;
}
.sec-tag {
  display: inline-block;
  background: linear-gradient(135deg, var(--ocean), var(--ocean-dark));
  color: var(--white);
  border-radius: 20px;
  padding: 5px 18px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 8px rgba(45,106,143,0.2);
}
.sec h2, .section h2 {
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.sec-sub {
  font-size: 0.92rem;
  color: var(--ink-mid);
  font-weight: 500;
}

/* === INFO BOX === */
.info {
  background: var(--gold-light);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  font-size: 0.93rem;
  animation: fadeSlideIn 0.5s ease both;
}
.info h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--gold-dark);
  margin-bottom: 0.4rem;
}
.info p {
  line-height: 1.8;
}
.info.ocean {
  background: var(--ocean-light);
  border-left-color: var(--ocean);
}
.info.ocean h3 { color: var(--ocean-dark); }
.info.forest {
  background: var(--forest-light);
  border-left-color: var(--forest);
}
.info.forest h3 { color: var(--forest); }
.info.warning {
  background: var(--ember-light);
  border-left-color: var(--ember);
}
.info.warning h3 { color: var(--ember); }
/* Meerdere alinea's en opsommingen in een info-box (renderer splitst op
   regeleinden). Bewust .info-lijst en niet ".info ul": dat zou ook de
   goal-list van het leerdoelen-blok raken. */
.info p + p, .info p + .info-lijst, .info .info-lijst + p { margin-top: 0.55rem; }
.info .info-lijst {
  margin: 0.25rem 0 0.1rem;
  padding-left: 1.25rem;
  line-height: 1.8;
}
.info .info-lijst li { margin-bottom: 0.15rem; }

/* === LEERDOELEN: CAN-DO-CHECKLIST ===
   Het leerdoelen-blok (info-box met .goal-list) is de opener van elke les;
   elk doel wordt een eigen rij met een vinkjes-badge in de accentrotatie,
   in plaats van een kale opsomlijst. */
.goal-list {
  list-style: none;
  margin: 0.55rem 0 0.1rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.goal-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.8rem;
  background: color-mix(in srgb, var(--white) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--ocean) 22%, var(--white));
  border-radius: var(--radius);
  font-weight: 500;
  line-height: 1.55;
}
.goal-list li::before {
  content: '✓';
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  background: var(--ocean);
  border-radius: 999px;
}
.goal-list li:nth-child(4n+2)::before { background: var(--gold); }
.goal-list li:nth-child(4n+3)::before { background: var(--forest); }
.goal-list li:nth-child(4n)::before { background: var(--plum); }

/* === EXERCISE CARD === */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ocean);
  transition: box-shadow 0.3s, transform 0.3s;
  animation: fadeSlideIn 0.5s ease both;
}
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.08s; }
.card:nth-child(3) { animation-delay: 0.16s; }
.card:nth-child(4) { animation-delay: 0.24s; }
.card:nth-child(5) { animation-delay: 0.32s; }
.card:nth-child(6) { animation-delay: 0.4s; }
.card:nth-child(7) { animation-delay: 0.48s; }
.card:nth-child(8) { animation-delay: 0.56s; }
.card:nth-child(n+9) { animation-delay: 0.6s; }
/* Kleurvariatie per card */
.card:nth-child(4n+1) { border-left-color: var(--ocean); }
.card:nth-child(4n+2) { border-left-color: var(--gold); }
.card:nth-child(4n+3) { border-left-color: var(--forest); }
.card:nth-child(4n+4) { border-left-color: var(--plum); }
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--border);
}
.card-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ocean), var(--ocean-dark));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(45,106,143,0.25);
}
/* Card-num kleur volgt de card border */
.card:nth-child(4n+2) .card-num { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); box-shadow: 0 2px 6px rgba(212,168,67,0.25); }
.card:nth-child(4n+3) .card-num { background: linear-gradient(135deg, var(--forest), #2d6648); box-shadow: 0 2px 6px rgba(58,125,92,0.25); }
.card:nth-child(4n+4) .card-num { background: linear-gradient(135deg, var(--plum), #5e3a6b); box-shadow: 0 2px 6px rgba(123,79,138,0.25); }
.card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}
.card-instr {
  font-size: 0.88rem;
  color: var(--ink-mid);
  margin-bottom: 0.8rem;
  line-height: 1.6;
}
/* Meerregelige opdracht: alinea's en echte lijstjes in plaats van één doorlopende
   lap tekst. De renderer maakt hier ol.card-lijst / ul.card-lijst van zodra een
   opdracht regeleinden bevat. */
.card-instr p { margin: 0 0 0.4rem; }
.card-instr p:last-child { margin-bottom: 0; }
/* Leeslijst, geen formulier: geen kaders en geen kleurenparade, maar rustige
   regels met lucht ertussen en een smalle leesbreedte, zodat de docent tijdens
   de les meteen de juiste regel vindt. */
.card-lijst {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  max-width: 62ch;
  counter-reset: kaartitem;
}
.card-lijst li {
  position: relative;
  padding: 0.1rem 0 0.1rem 2.3rem;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.6;
}
.card-lijst li + li { margin-top: 0.8rem; }
.card-lijst li::before {
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(26, 26, 46, 0.18);
}
/* Kleur zit in de nummers, niet in kaders om de tekst: dat geeft ritme zonder
   dat de lijst een formulier wordt. */
.card-lijst li:nth-child(4n+2)::before { background: var(--ocean); }
.card-lijst li:nth-child(4n+3)::before { background: var(--forest); }
.card-lijst li:nth-child(4n+4)::before { background: var(--plum); }
ol.card-lijst li::before {
  counter-increment: kaartitem;
  content: counter(kaartitem);
}
ul.card-lijst li::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  top: 0.55rem;
  left: 0.45rem;
  background: var(--gold);
}

/* === EXERCISE BLOCK (vocabulary highlighting) === */
.ex-block {
  margin-bottom: 0.6rem;
}
.v1 { color: var(--ocean); font-weight: 700; }
.v2 { color: var(--plum); font-weight: 700; }
.mid { color: var(--gold-dark); font-weight: 600; }

/* Grammatica-chips in uitleg-teksten:
     **woord** = werkwoord-chip (mosterd)      ++woord++ = verbindingswoord-chip (paars)
     ~~woord~~ = deeltje-chip (blauw, los)     ==woord== = samen-chip (groen, vast)
   Zo zie je in voorbeelden waar het werkwoord staat en hoe een scheidbaar werkwoord
   uit elkaar gaat (los ~~op~~) en weer samenklikt (vast ==opsta==). */
.ww-chip {
  background: var(--gold); color: var(--ink); font-weight: 700;
  padding: 1px 9px; border-radius: 3px; border: 1.5px solid var(--ink-mid); white-space: nowrap;
}
.vw-chip {
  background: var(--plum); color: var(--white); font-weight: 700;
  padding: 1px 9px; border-radius: 3px; border: 1.5px solid var(--ink-mid); white-space: nowrap;
}
.pre-chip {
  background: var(--ocean); color: var(--white); font-weight: 700;
  padding: 1px 9px; border-radius: 3px; border: 1.5px solid var(--ink-mid); white-space: nowrap;
}
.vast-chip {
  background: var(--forest); color: var(--white); font-weight: 700;
  padding: 1px 9px; border-radius: 3px; border: 1.5px solid var(--ink-mid); white-space: nowrap;
}
/* Woordvolgorde-schema (zinschema-blok): begin | plek 2 | de rest | het eind.
   Token-gedreven zodat elk thema meekleurt; de rijke thema's geven het schema
   daarbovenop een eigen karakter. Een cel die volledig **vet** gemarkeerd is,
   is de werkwoord-plek en krijgt een marker-chip in de ww-kleur (mosterd),
   zodat de kern van het schema (waar staat het werkwoord) er direct uitspringt. */
.zinschema-titel { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.3rem; }
.zinschema-instr { margin: 0 0 0.6rem; color: var(--ink-soft); }
.schema-wrap { overflow-x: auto; margin: 0.2rem 0; border-radius: var(--radius); }
table.schema {
  border-collapse: collapse; width: 100%; min-width: 460px;
  background: var(--white);
  border: 1.5px solid var(--ink-mid);
  box-shadow: var(--shadow);
}
table.schema th, table.schema td {
  border: 1px solid var(--border); padding: 8px 11px; text-align: left; font-size: 1rem; vertical-align: top;
}
table.schema thead th {
  background: var(--plum); color: var(--white); font-weight: 600; font-size: 0.9rem;
  border-color: color-mix(in srgb, var(--plum) 72%, var(--white));
}
table.schema tbody th { background: var(--paper-warm); font-weight: 700; color: var(--ink-mid); white-space: nowrap; }
table.schema td b {
  display: inline-block;
  padding: 0.02rem 0.5rem;
  background: var(--gold-light);
  color: color-mix(in srgb, var(--gold-dark) 75%, var(--ink));
  border-bottom: 2px solid var(--gold);
  border-radius: 6px;
  font-weight: 800;
}
/* Lege plek in het schema: stille streep, zodat "hier staat niets" zichtbaar is. */
table.schema td:empty::after { content: '\2014'; opacity: 0.22; }

/* Losse voorbeeldzinnen (voorbeelden-blok): elke zin op een eigen regel,
   met optioneel label erboven en terracotta-noot eronder. */
.voorbeeldblok .vb-rij { margin: 0 0 15px; padding-left: 13px; border-left: 3px solid var(--gold); }
.voorbeeldblok .vb-rij:last-child { margin-bottom: 0; }
.vb-label { display: block; font-weight: 600; color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 4px; }
.vb-zin { display: block; font-size: 1.14rem; line-height: 2.05; }
.vb-noot { display: block; color: var(--ember); font-size: 0.9rem; font-style: italic; margin-top: 4px; }
.vb-noot::before { content: "\2192  "; }

/* Fout/goed-contrast (foutgoed-blok): paren met rood kruis en groen vinkje,
   optioneel een terracotta-noot onder het paar. */
.foutgoed-blok .fg-paar { padding: 0.6rem 0 0.5rem; }
.foutgoed-blok .fg-paar:first-of-type { padding-top: 0.15rem; }
.foutgoed-blok .fg-paar + .fg-paar { border-top: 1px dashed var(--border); }
.fg-rij { display: flex; align-items: flex-start; gap: 0.65rem; }
.fg-goed { margin-top: 0.35rem; }
.fg-icoon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.fg-fout .fg-icoon { background: var(--incorrect-bg); color: var(--incorrect); border: 1.5px solid var(--incorrect); }
.fg-goed .fg-icoon { background: var(--correct-bg); color: var(--correct); border: 1.5px solid var(--correct); }
.fg-zin { line-height: 1.9; }
.fg-fout .fg-zin { color: var(--incorrect); opacity: 0.85; }
.fg-goed .fg-zin { font-size: 1.08rem; }
.fg-noot { display: block; margin: 4px 0 0 2.15rem; color: var(--ember); font-size: 0.9rem; font-style: italic; }
.fg-noot::before { content: "\2192  "; }

/* Stappenplan / check-routine (stappen-blok): genummerde badge per stap. */
.stappen-lijst {
  list-style: none;
  margin: 0.45rem 0 0.1rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.stappen-lijst li { display: flex; align-items: flex-start; gap: 0.7rem; }
.stap-num {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--gold-light);
  border: 1.5px solid var(--gold);
  color: var(--gold-dark);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stap-tekst { line-height: 1.8; }

/* Leestekst-kaart: rustige leestypografie (renderer zet .leestekst-card). */
.leestekst-card p {
  max-width: 64ch;
  font-size: 0.98rem;
  line-height: 1.9;
  margin: 0 0 0.75rem;
}
.leestekst-card p:last-child { margin-bottom: 0; }

/* === ENGLISH HINT TEXT === */
.eng {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-style: italic;
}

/* === ROW (question items) === */
.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid rgba(226,223,216,0.5);
  line-height: 2.1;
  border-radius: 6px;
  transition: background 0.15s;
}
.row:nth-child(even) {
  background: rgba(45,106,143,0.02);
}
.row:last-child {
  border-bottom: none;
}
.rn {
  color: var(--ocean);
  font-weight: 700;
  font-size: 0.82rem;
  min-width: 22px;
}

/* === FORM INPUTS === */
input[type="text"],
textarea,
select {
  font-family: var(--font-body);
  font-size: 0.93rem;
  border: 2px solid var(--ocean-light);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  background: var(--paper-warm);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  width: 100%;
}
input[type="text"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(45,106,143,0.15);
  background: var(--white);
}
/* Filled text inputs - subtle highlight when user has typed something */
input[type="text"]:not(:placeholder-shown):not(:focus) {
  border-color: rgba(45,106,143,0.3);
}
textarea {
  min-height: 80px;
  resize: vertical;
}

/* Input size variants */
.inline {
  width: 155px;
  display: inline-block;
}
.narrow {
  width: 120px;
  display: inline-block;
}
.wide {
  width: 280px;
  display: inline-block;
}

/* Input states */
.input-ok {
  border-color: var(--correct) !important;
  background: var(--correct-bg) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12) !important;
  animation: pulseGlow 0.6s ease;
}
.input-no {
  border-color: var(--incorrect) !important;
  background: var(--incorrect-bg) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}
/* MC container feedback state (homework) */
.mc.input-ok {
  border-radius: 8px;
  padding: 0.5rem;
  border: 2px solid var(--correct) !important;
  background: var(--correct-bg) !important;
}
.mc.input-no {
  border-radius: 8px;
  padding: 0.5rem;
  border: 2px solid var(--incorrect) !important;
  background: var(--incorrect-bg) !important;
}

/* === MULTIPLE CHOICE (clickable divs) === */
.mc {
  margin: 0.3rem 0;
}
.mco {
  display: block;
  padding: 0.45rem 0.9rem;
  margin: 0.2rem 0;
  background: var(--paper);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.91rem;
}
.mco:hover {
  border-color: var(--ocean);
  background: var(--ocean-light);
}
.mco.sel {
  border-color: var(--ocean);
  background: var(--ocean-light);
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(45,106,143,0.10);
}
.mco.ok {
  border-color: var(--correct);
  background: var(--correct-bg);
  animation: pulseGlow 0.6s ease;
}
.mco.no {
  border-color: var(--incorrect);
  background: var(--incorrect-bg);
}

/* === MULTIPLE CHOICE (radio buttons) === */
.mc-radio {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.3rem 0;
}
.mc-radio label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.91rem;
}
.mc-radio label:hover {
  border-color: var(--ocean);
  background: var(--ocean-light);
}
.mc-radio label:has(input[type="radio"]:checked) {
  border-color: var(--ocean);
  background: var(--ocean-light);
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(45,106,143,0.10);
}
.mc-radio label.ok {
  border-color: var(--correct);
  background: var(--correct-bg);
}
.mc-radio label.ok:has(input[type="radio"]:checked) {
  border-color: var(--correct);
  background: var(--correct-bg);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}
.mc-radio label.no {
  border-color: var(--incorrect);
  background: var(--incorrect-bg);
}
.mc-radio label.no:has(input[type="radio"]:checked) {
  border-color: var(--incorrect);
  background: var(--incorrect-bg);
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}
.mc-radio input[type="radio"] {
  accent-color: var(--ocean);
  width: 18px;
  height: 18px;
}

/* === MATCHING === */
.match-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid rgba(226,223,216,0.4);
  border-radius: 6px;
  transition: background 0.15s;
}
.match-row:nth-child(odd) {
  background: rgba(45,106,143,0.03);
}
.match-row:hover {
  background: var(--ocean-light);
}
.match-row:last-child {
  border-bottom: none;
}
.match-left {
  min-width: 180px;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--ink);
}
.match-sel {
  min-width: 200px;
}

/* === VOCABULARY === */
.vocab-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.vocab-item {
  background: var(--ocean-light);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  cursor: default;
}
.vocab-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 4px 14px rgba(45,106,143,0.15);
  background: var(--white);
}
/* Afwisselende kleuren voor vocab items */
.vocab-item:nth-child(4n+2) { background: var(--gold-light); }
.vocab-item:nth-child(4n+2) .dutch { color: var(--gold-dark); }
.vocab-item:nth-child(4n+2):hover { background: var(--white); }
.vocab-item:nth-child(4n+3) { background: var(--forest-light); }
.vocab-item:nth-child(4n+3) .dutch { color: var(--forest); }
.vocab-item:nth-child(4n+3):hover { background: var(--white); }
.vocab-item:nth-child(4n+4) { background: var(--plum-light); }
.vocab-item:nth-child(4n+4) .dutch { color: var(--plum); }
.vocab-item:nth-child(4n+4):hover { background: var(--white); }
.vocab-item .dutch {
  font-weight: 700;
  color: var(--ocean-dark);
}
.vocab-item .english {
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.vocab-item.vocab-audio {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
.vocab-item.vocab-audio .vocab-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vocab-play-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: none;
  background: var(--ocean);
  color: white;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.1s;
  flex-shrink: 0;
}
.vocab-play-btn:hover { background: var(--ocean-dark); transform: scale(1.1); }
.vocab-play-btn:active { transform: scale(0.95); }

/* === DIALOGUE === */
.dialogue {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.8rem 0;
}
.dialogue-bubble {
  padding: 0.7rem 1rem;
  border-radius: 12px;
  max-width: 85%;
  font-size: 0.93rem;
  line-height: 1.6;
}
.speaker-a {
  background: var(--ocean-light);
  border: 1px solid rgba(45,106,143,0.2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.speaker-b {
  background: var(--gold-light);
  border: 1px solid rgba(212,168,67,0.2);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.dialogue-bubble strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.2rem;
  color: var(--ink-mid);
}

/* === SCENARIO === */
.scenario-box {
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 0.8rem;
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, var(--ocean), var(--ocean-dark));
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.7rem;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(45,106,143,0.25);
}
.btn:hover {
  background: linear-gradient(135deg, var(--ocean-dark), var(--ocean));
  box-shadow: 0 4px 12px rgba(45,106,143,0.35);
  transform: translateY(-1px);
}
.btn:active {
  transform: scale(0.97) translateY(0);
  box-shadow: 0 1px 4px rgba(45,106,143,0.2);
}
.btn-show {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.2s;
}
.btn-show:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}

/* === FEEDBACK === */
.fb {
  display: none;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-top: 0.6rem;
  font-weight: 600;
}
.fb.ok {
  display: block;
  background: var(--correct-bg);
  color: #166534;
  border: 1px solid #bbf7d0;
  border-left: 4px solid var(--correct);
  animation: fadeSlideIn 0.3s ease;
}
.fb.no {
  display: block;
  background: var(--incorrect-bg);
  color: #991b1b;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--incorrect);
  animation: fadeSlideIn 0.3s ease;
}

/* === MODEL ANSWER === */
.model-answer {
  margin-top: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--gold-light);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem;
  color: var(--gold-dark);
  font-weight: 500;
}
.model-answer strong {
  color: var(--gold-dark);
}

/* === IMAGES === */
.lesson-image {
  width: 100%;
  border-radius: var(--radius);
  margin: 0.8rem 0;
  box-shadow: var(--shadow);
}

/* === AUDIO === */
.audio-wrap {
  margin: 0.8rem 0;
}
.audio-wrap audio {
  width: 100%;
  border-radius: 8px;
}
.audio-box {
  background: var(--plum-light);
  border-left: 4px solid var(--plum);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem;
  margin: 0.8rem 0;
}
.audio-box p {
  font-size: 0.93rem;
  line-height: 1.7;
}

/* === DIVIDER === */
.divider {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  border: none;
  margin: 1.5rem 0;
  border-radius: 2px;
}

/* === FOOTER === */
.footer {
  text-align: center;
  padding: 1.5rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
  .card, .info, .sec, .section, .fb.ok, .fb.no { animation: none; }
  .vocab-item:hover { transform: none; }
  .card:hover { transform: none; }
  .input-ok { animation: none; }
  .mco.ok { animation: none; }
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
  .header { padding: 1.8rem 1rem 1.5rem; }
  .header h1 { font-size: 1.5rem; }
  .container { padding: 0 1rem 3rem; }
  .card { padding: 1rem; }
  .sec, .section { padding: 0.8rem 0.6rem; margin: 2rem 0 1rem; }
  .sec h2, .section h2 { font-size: 1.3rem; }
  .inline { width: 125px; }
  .wide { width: 200px; }
  .match-left { min-width: auto; }
  .match-row { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .dialogue-bubble { max-width: 95%; }
  .vocab-list { grid-template-columns: 1fr; }
}

/* ============================================================
   === SPEL-BLOKKEN (lesson-games.js) =========================
   Doorgecomponeerd speels ontwerp voor de 10 lesspellen.
   Alles is gebouwd op de basis-tokens (--ocean/--gold/--forest/
   --plum/--correct/--incorrect/--border/--radius/--shadow), zodat
   de spellen automatisch meekleuren met elk thema. Selectors zijn
   gescoped op [data-game] zodat ze de .mco-restyling van de rijke
   thema's (die NA dit bestand laden) in specificiteit verslaan.
   ============================================================ */

/* Zichtbaarheid in spellen loopt via het HTML hidden-attribuut. Deze garantie
   zorgt dat display-regels hieronder (en bv. .btn-show's inline-flex uit de
   basis) een hidden element nooit alsnog tonen. */
.card[data-game] [hidden] { display: none !important; }

/* Amber = "gemist": universele semantiek (er is geen amber-token; --gold is in
   sommige thema's terracotta en zou dan op fout-rood lijken). */
.card[data-game] {
  --game-mist: #b45309;
  --game-mist-border: #f59e0b;
  --game-mist-bg: #fef3c7;
}

/* Spel-signaal op de kaart: warme accentrand bovenlangs, zachte gloed onder de
   kop en een "Spel"-badge rechts in de card-head. Gewone .card-styling blijft
   verder onaangetast. */
.card[data-game] {
  border-top: 3px solid var(--gold);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 120px);
}
.card[data-game] .card-head::after {
  content: 'Spel';
  flex: none;
  margin-left: auto;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: var(--gold-light);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}

/* --- Spel-animaties (alleen transform; kleuren wisselen instant) --- */
@keyframes gamePop {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes gameShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* --- Gedeelde chip-basis -------------------------------------------------
   Alle spelchips (.bingo-cell, .zin-chip, .cat-chip, .fout-woord,
   .pov-optie, .galg-letter, .mem-kaart) hergebruiken .mco en zitten in een
   [data-game]-kaart: één tactiele knop-stijl met druk-schaduw, hover-lift
   en duidelijke states. */
[data-game] .mco {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.5rem 0.85rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 0 var(--border), 0 2px 6px rgba(26, 26, 46, 0.05);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
/* Spelchips zijn geen meerkeuze-opties: onderdruk de a/b/c-letterbadges van de
   rijke thema's (die zetten content op .mco::before met hoge specificiteit).
   Eigen decoratie loopt daarom altijd via ::after. */
[data-game] .mco::before {
  content: none !important;
  display: none !important;
}
[data-game] .mco {
  counter-increment: none !important;
}
[data-game] .mco:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--ocean);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ocean) 40%, var(--border)), 0 6px 14px rgba(26, 26, 46, 0.10);
}
[data-game] .mco:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 0 0 var(--border), 0 1px 3px rgba(26, 26, 46, 0.08);
}
[data-game] .mco:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ocean) 55%, transparent);
  outline-offset: 2px;
}
[data-game] .mco:disabled { cursor: default; }
[data-game] .mco:disabled:not(.ok):not(.no):not(.sel):not(.used) {
  opacity: 0.55;
  box-shadow: none;
}
[data-game] .mco.sel {
  border-color: var(--ocean);
  background: var(--ocean-light);
  color: var(--ocean-dark);
  box-shadow: 0 2px 0 var(--ocean), 0 2px 8px color-mix(in srgb, var(--ocean) 25%, transparent);
}
[data-game] .mco.ok {
  border-color: var(--correct);
  background: var(--correct-bg);
  color: color-mix(in srgb, var(--correct) 55%, var(--ink));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--correct) 55%, transparent);
  animation: gamePop 0.25s ease;
}
[data-game] .mco.no {
  border-color: var(--incorrect);
  background: var(--incorrect-bg);
  color: color-mix(in srgb, var(--incorrect) 55%, var(--ink));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--incorrect) 45%, transparent);
}
[data-game] .mco.mist {
  border-color: var(--game-mist-border);
  background: var(--game-mist-bg);
  color: var(--game-mist);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--game-mist-border) 55%, transparent);
}

/* --- Actieknoppen en knoppenrijen in spellen ----------------------------- */
.zin-knoppen,
.hint-acties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.3rem;
}
[data-game] .btn-show {
  margin-top: 0;
  border-radius: 999px;
}
[data-game] .btn-show:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ocean) 55%, transparent);
  outline-offset: 2px;
}
[data-game] .btn-show:disabled {
  opacity: 0.5;
  cursor: default;
}
[data-game] .btn-show:disabled:hover {
  border-color: var(--border);
  color: var(--ink-soft);
}

/* --- Woordbingo & plaatjesbingo ------------------------------------------ */
.bingo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 0.5rem;
  margin: 0.6rem 0 0.3rem;
}
[data-game] .bingo-cell {
  min-height: 3rem;
  border-radius: 14px;
  font-weight: 700;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Aangeklikt = gestempeld: accent-vulling, lichte rotatie en een vinkje. */
[data-game] .bingo-cell.sel {
  background: var(--ocean);
  border-color: var(--ocean-dark);
  color: var(--white);
  transform: rotate(-2deg) scale(0.97);
  box-shadow: 0 1px 0 var(--ocean-dark), inset 0 0 0 2px color-mix(in srgb, var(--white) 30%, transparent);
}
/* State-icoon als hoekbadge, absoluut gepositioneerd: telt niet mee in de
   flex-regel, dus lange woorden breken niet meer midden in het woord. */
[data-game] .bingo-cell.sel::after,
[data-game] .bingo-cell.ok::after,
[data-game] .bingo-cell.no::after,
[data-game] .bingo-cell.mist::after {
  position: absolute;
  top: -0.45rem;
  right: -0.35rem;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  font-size: 0.72rem;
  line-height: 1;
  border-radius: 999px;
  border: 2px solid var(--white);
}
[data-game] .bingo-cell.sel::after {
  content: '✓';
  background: var(--white);
  color: var(--ocean-dark);
  border-color: var(--ocean-dark);
}
/* Na de onthulling (tekstbingo) winnen de resultaat-states van de stempel. */
[data-game] .bingo-cell.ok::after {
  content: '✓';
  background: var(--correct);
  color: var(--white);
}
[data-game] .bingo-cell.no::after {
  content: '✕';
  background: var(--incorrect);
  color: var(--white);
}
[data-game] .bingo-cell.mist::after {
  content: '?';
  background: var(--game-mist-border);
  color: var(--white);
}
[data-game] .bingo-cell.bingo-img {
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem;
}
[data-game] .bingo-img img {
  display: block;
  width: 100%;
  height: 92px;
  object-fit: cover;
  border-radius: 9px;
}
[data-game] .bingo-cell.bingo-img.sel {
  transform: rotate(-1deg) scale(0.97);
}
[data-game] .bingo-cell.bingo-img.sel img { opacity: 0.9; }
.bingo-img-label {
  display: block;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* --- Referentiebeeld (blok `beeld`) ---------------------------------------
   Eén afbeelding om de hele les naar terug te kijken (plattegrond, schema).
   Bewust GEEN object-fit: cover zoals .pov-img en .bingo-img: die snijden bij
   naar een vaste hoogte, wat een kaart onleesbaar maakt. Hier schaalt de
   afbeelding binnen twee grenzen (breedte van de kaart, 70vh hoog) en blijft
   de verhouding intact, staand of liggend. */
.beeld-fig {
  margin: 0.6rem 0 0;
}
.beeld-fig img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  border: 3px solid var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.beeld-fig figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.75;
}

/* --- Zinnenbouwer ---------------------------------------------------------
   .zin-build = bouwstrook (dashed "leg hier neer"-vak), .zin-bank = losse
   woordchips. Duidelijk verschillend, met flash-feedback op het hele item. */
.zin-item {
  margin: 1rem 0;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--paper-warm) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* Vertaalbouwer: de te vertalen bronzin boven de bouwstrook. Zelfde rol als de
   .eng-hint elders, maar als eigen regel met rijnummer. */
.zin-bron {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-soft);
}
.zin-build {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 3.4rem;
  padding: 0.5rem;
  margin-bottom: 0.6rem;
  background: color-mix(in srgb, var(--ocean) 6%, var(--white));
  border: 2px dashed color-mix(in srgb, var(--ocean) 40%, var(--border));
  border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.zin-build:empty::after {
  content: 'Jouw zin komt hier…';
  padding-left: 0.3rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
}
.zin-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
[data-game] .zin-chip {
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  border-radius: 10px;
}
[data-game] .zin-chip.in-build {
  border-color: color-mix(in srgb, var(--ocean) 45%, var(--border));
}
[data-game] .zin-chip.used {
  opacity: 0.35;
  pointer-events: none;
  box-shadow: none;
  transform: none;
  filter: grayscale(60%);
}
/* Alleen in huiswerk: de goede volgorde na een foute poging (rood, want de
   kleur volgt de uitslag en niet de rol van de tekst). */
.zin-reveal {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--incorrect);
}
.zin-item.zin-goed {
  border-color: var(--correct);
  background: var(--correct-bg);
  animation: gamePop 0.25s ease;
}
.zin-item.zin-goed .zin-build {
  border-style: solid;
  border-color: var(--correct);
  background: var(--white);
}
.zin-item.zin-fout {
  border-color: var(--incorrect);
  background: var(--incorrect-bg);
  animation: gameShake 0.22s ease;
}
.zin-item.zin-fout .zin-build {
  border-color: var(--incorrect);
  background: var(--white);
}

/* --- Categoriespel --------------------------------------------------------
   Vakken zijn gekleurde dropzones met titelband en een permanent zacht
   oplichtende dashed binnenrand (een "vastgepakte" chip elders is via CSS
   niet op de dropzone te zien, dus de uitnodiging is altijd zichtbaar). */
.cat-woorden {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 2.8rem;
  margin: 0.6rem 0;
  padding: 0.55rem;
  background: color-mix(in srgb, var(--paper-warm) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
}
[data-game] .cat-chip.kies {
  border-style: dashed;
  border-color: var(--gold-dark);
  background: var(--gold-light);
  color: var(--gold-dark);
  transform: translateY(-2px) rotate(-2deg);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--gold) 50%, transparent), 0 6px 12px rgba(26, 26, 46, 0.10);
}
.cat-vakken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin: 0.6rem 0;
}
.cat-vak {
  overflow: hidden;
  padding: 0;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.cat-vak:hover {
  border-color: var(--ocean);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.cat-vak-titel {
  margin: 0;
  padding: 0.35rem 0.6rem;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ocean-dark);
  background: var(--ocean-light);
  border-bottom: 2px solid color-mix(in srgb, var(--ocean) 25%, transparent);
}
.cat-vak:nth-child(4n+2) .cat-vak-titel {
  color: var(--gold-dark);
  background: var(--gold-light);
  border-bottom-color: color-mix(in srgb, var(--gold) 30%, transparent);
}
.cat-vak:nth-child(4n+3) .cat-vak-titel {
  color: var(--forest);
  background: var(--forest-light);
  border-bottom-color: color-mix(in srgb, var(--forest) 30%, transparent);
}
.cat-vak:nth-child(4n+4) .cat-vak-titel {
  color: var(--plum);
  background: var(--plum-light);
  border-bottom-color: color-mix(in srgb, var(--plum) 30%, transparent);
}
.cat-drop {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.35rem;
  min-height: 3.2rem;
  margin: 0.45rem;
  padding: 0.4rem;
  background: color-mix(in srgb, var(--ocean) 4%, transparent);
  border: 2px dashed color-mix(in srgb, var(--ocean) 30%, var(--border));
  border-radius: 10px;
}
/* Chips in vakken compacter dan in de woordenpool. */
[data-game] .cat-drop .cat-chip {
  padding: 0.25rem 0.55rem;
  font-size: 0.84rem;
  border-radius: 8px;
}

/* --- Foutenjacht-klik ------------------------------------------------------
   Woorden als klikbare inline-chips met hover-onderstreping; pas bij een klik
   verschijnt de volle chip-state (groen/rood). */
.fout-item {
  margin: 1rem 0;
  padding: 0.7rem 0.8rem;
  background: color-mix(in srgb, var(--paper-warm) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.fout-zin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.3rem;
  line-height: 1.9;
}
[data-game] .fout-woord {
  padding: 0.1rem 0.4rem;
  font-weight: 500;
  font-size: 0.97rem;
  background: transparent;
  border-color: transparent;
  border-radius: 8px;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
[data-game] .fout-woord:hover:not(:disabled) {
  transform: none;
  background: var(--gold-light);
  border-color: transparent;
  box-shadow: none;
  text-decoration-color: var(--gold-dark);
}
[data-game] .fout-woord.ok,
[data-game] .fout-woord.no {
  font-weight: 700;
  text-decoration-color: transparent;
}
.fout-beter {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.3rem 0.8rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--correct) 55%, var(--ink));
  background: var(--correct-bg);
  border: 1.5px solid var(--correct);
  border-radius: 999px;
}

/* --- Luistertekst-bingo ---------------------------------------------------
   .tb-tekst = voorleeskaart; .tb-woord-markeringen groen (gehoord en geklikt)
   of amber (gemist); docentkopie behoudt het dashed voorlees-label. */
.tb-audio { margin: 0.4rem 0 0.7rem; }
.tb-audio audio { width: 100%; border-radius: 8px; }
.tb-tekst {
  margin-top: 0.7rem;
  padding: 0.9rem 1.1rem;
  font-size: 1.02rem;
  line-height: 1.85;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ocean);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tb-woord {
  padding: 0.05rem 0.3rem;
  border-radius: 6px;
  font-weight: 700;
}
.tb-woord.ok {
  background: var(--correct-bg);
  color: color-mix(in srgb, var(--correct) 55%, var(--ink));
  box-shadow: inset 0 0 0 1.5px var(--correct);
}
.tb-woord.mist {
  background: var(--game-mist-bg);
  color: var(--game-mist);
  box-shadow: inset 0 0 0 1.5px var(--game-mist-border);
}
.tb-tekst.tb-docent {
  border-style: dashed;
  border-left-style: solid;
  border-left-color: var(--gold);
  background: color-mix(in srgb, var(--gold-light) 30%, var(--paper));
}
.tb-tekst.tb-docent::before {
  content: 'Alleen zichtbaar voor jou · lees dit voor';
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--game-mist);
}
.tb-tekst.tb-docent .tb-woord {
  outline: 1.5px dashed var(--gold-dark);
  outline-offset: 1px;
}
.tb-hint {
  margin-top: 0.5rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gold-dark);
  background: var(--gold-light);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
}

/* --- POV-spel --------------------------------------------------------------
   Elke scène is een verhaalkaart met ingekaderde foto, vertellend situatie-
   blok, volwaardige keuzepillen, badge-teller en een feestelijke afsluiter. */
.pov-scene {
  padding: 0.9rem;
  background: color-mix(in srgb, var(--paper-warm) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: fadeSlideIn 0.35s ease both;
}
.pov-img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  margin-bottom: 0.7rem;
  border: 3px solid var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}
.pov-situatie {
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.9rem;
  font-style: italic;
  color: var(--ink-mid);
  background: var(--white);
  border-left: 4px solid var(--plum);
  border-radius: 0 10px 10px 0;
  box-shadow: var(--shadow);
}
.pov-vraag {
  margin: 0.5rem 0 0.2rem;
  font-weight: 700;
  font-size: 1.02rem;
}
.pov-opties {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.6rem 0 0.2rem;
}
[data-game] .pov-optie {
  justify-content: flex-start;
  text-align: left;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-weight: 600;
}
/* Vertakkings-keuzes: plum-tint + pijl, zodat "kies je pad" voelbaar is. */
[data-game] .pov-keuze {
  border-color: color-mix(in srgb, var(--plum) 45%, var(--border));
}
[data-game] .pov-keuze::after {
  content: '→';
  margin-left: auto;
  font-weight: 800;
  color: var(--plum);
}
[data-game] .pov-open {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
[data-game] .pov-open:focus {
  outline: none;
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ocean) 18%, transparent);
}
.pov-uitleg {
  position: relative;
  margin-top: 0.6rem;
  padding: 0.6rem 0.9rem 0.6rem 2.4rem;
  font-size: 0.92rem;
  background: var(--correct-bg);
  border: 1px solid color-mix(in srgb, var(--correct) 35%, transparent);
  border-left: 4px solid var(--correct);
  border-radius: 0 10px 10px 0;
}
.pov-uitleg::after {
  content: '💡';
  position: absolute;
  left: 0.7rem;
  top: 0.6rem;
}
.pov-nav {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.pov-teller {
  margin: 0 auto;
  padding: 0.2rem 0.85rem;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ocean-dark);
  background: var(--ocean-light);
  border-radius: 999px;
}

/* --- Raad het woord (hintspel) ---------------------------------------------
   Hints als oplopende kaartjes met een genummerde badge; de gok-invoer en
   knoppen vormen samen een speelse zoekbalk. */
.hint-item {
  margin: 1rem 0;
  padding: 0.8rem;
  background: color-mix(in srgb, var(--paper-warm) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hint-lijst {
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
  counter-reset: hintnr;
}
.hint-regel {
  counter-increment: hintnr;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.35rem 0;
  padding: 0.45rem 0.7rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--plum);
  border-radius: 8px;
  animation: fadeSlideIn 0.3s ease both;
}
.hint-regel::before {
  content: 'Hint ' counter(hintnr);
  flex: none;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plum);
  background: var(--plum-light);
}
[data-game] .hint-gok {
  flex: 1 1 160px;
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
[data-game] .hint-gok:focus {
  outline: none;
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ocean) 18%, transparent);
  background: var(--white);
}
[data-game] .hint-gok:disabled { opacity: 0.55; }
/* Raad = de primaire actie in de zoekbalk. */
[data-game] .hint-raad {
  color: var(--white);
  background: var(--ocean);
  border-color: var(--ocean);
  font-weight: 700;
}
[data-game] .hint-raad:hover:not(:disabled) {
  color: var(--white);
  background: var(--ocean-dark);
  border-color: var(--ocean-dark);
}
.hint-item.hint-goed {
  border-color: var(--correct);
  background: color-mix(in srgb, var(--correct-bg) 60%, var(--white));
}
.hint-item.hint-fout {
  border-color: var(--incorrect);
  background: color-mix(in srgb, var(--incorrect-bg) 60%, var(--white));
}

/* --- Galgje -----------------------------------------------------------------
   Grote gespatieerde letterslots, warme hartjes en een toetsenbord-grid. */
.galg-item {
  margin: 1rem 0;
  padding: 0.8rem;
  background: color-mix(in srgb, var(--paper-warm) 55%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.galg-hint {
  margin-bottom: 0.5rem;
  font-style: italic;
  color: var(--ink-mid);
}
.galg-hint::before {
  content: '💬 ';
  font-style: normal;
}
.galg-levens {
  margin-bottom: 0.55rem;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--ember);
}
.galg-masker {
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.8rem;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.25rem, 4.5vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: center;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(26, 26, 46, 0.06);
}
.galg-letters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.3rem, 1fr));
  gap: 0.3rem;
}
[data-game] .galg-letter {
  min-width: 0;
  padding: 0.45rem 0;
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  border-radius: 10px;
}
[data-game] .galg-letter.no { opacity: 0.5; }
.galg-item.galg-goed {
  border-color: var(--correct);
  background: color-mix(in srgb, var(--correct-bg) 60%, var(--white));
}
.galg-item.galg-fout {
  border-color: var(--incorrect);
  background: color-mix(in srgb, var(--incorrect-bg) 60%, var(--white));
}

/* --- Memory -----------------------------------------------------------------
   Dicht = kaartrug (accent-gradient + decoratie), open = papiervlak,
   gevonden = groene tint met zachte pop. */
.mem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.55rem;
  margin: 0.6rem 0 0.4rem;
}
[data-game] .mem-kaart {
  min-height: 4rem;
  padding: 0.4rem 0.35rem;
  border-radius: 14px;
  font-size: 0.82rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* De onthulde betekenis kan langer zijn dan het ?-symbool: kleinere tekst die
   netjes afbreekt. De kaart heeft geen vaste aspect-ratio meer, zodat lange
   betekenissen niet meer buiten het kaartje vallen. */
[data-game] .mem-kaart .mem-achter {
  font-size: 0.72rem;
  font-weight: 600;
}
[data-game] .mem-kaart:not(.sel):not(.ok) {
  background: linear-gradient(135deg, var(--ocean), var(--plum));
  border-color: var(--ocean-dark);
  box-shadow: 0 3px 0 var(--ocean-dark), 0 4px 10px rgba(26, 26, 46, 0.12);
}
[data-game] .mem-kaart:not(.sel):not(.ok) .mem-voor {
  font-size: 1.5rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--white) 88%, transparent);
}
[data-game] .mem-kaart:not(.sel):not(.ok)::after {
  content: '✦';
  position: absolute;
  right: 0.45rem;
  bottom: 0.25rem;
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--white) 45%, transparent);
}
[data-game] .mem-kaart.sel {
  background: var(--white);
  border-color: var(--ocean);
  color: var(--ocean-dark);
  box-shadow: 0 2px 0 var(--ocean), 0 3px 8px color-mix(in srgb, var(--ocean) 20%, transparent);
}
[data-game] .mem-kaart.ok {
  background: var(--correct-bg);
  border-color: var(--correct);
  color: color-mix(in srgb, var(--correct) 55%, var(--ink));
  box-shadow: 0 2px 0 color-mix(in srgb, var(--correct) 55%, transparent);
  cursor: default;
  animation: gamePop 0.3s ease;
}

/* --- Duobeeld: twee beelden zij-aan-zij -------------------------------------
   Vergelijkingsblok (verschillen zoeken, kies-en-verdedig): altijd twee
   kolommen, ook op mobiel, want de vergelijking ís de opdracht. */
.duobeeld-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.4rem 0;
}
.duobeeld-fig { margin: 0; }
.duobeeld-fig img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.duobeeld-label {
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
  margin-bottom: 0.3rem;
  text-align: center;
}

/* --- Spreektimer op een spreekkaart ---------------------------------------- */
.spreektimer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.6rem 0;
}
.spreektimer-klok {
  font-size: 1.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ocean-dark);
  min-width: 4.5ch;
}
.spreektimer-om .spreektimer-klok { color: var(--incorrect); }

/* --- Rollenspel: rolkaarten + doelzinnen-checklist -------------------------- */
.rol-kaarten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.6rem 0;
}
.rol-kaart {
  padding: 0.7rem 0.85rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rol-kaart p { margin: 0; }
.rol-student { border: 2px solid var(--ocean); }
.rol-kop {
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.rol-doelen { margin-top: 0.6rem; }
.rol-doel-lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}
.rol-doel.sel::after {
  content: '✓';
  margin-left: 0.4rem;
  font-weight: 800;
}

/* --- Examentaak-reeks ------------------------------------------------------- */
.exam-taak {
  margin: 0.6rem 0;
  padding: 0.75rem 0.85rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.exam-opdracht { font-size: 1.05rem; }
.exam-beeld {
  max-width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0.4rem 0;
  display: block;
}
.exam-klok {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0.6rem 0;
}
.exam-fase {
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
}
.exam-spreekt .exam-fase { color: var(--correct); }
.exam-tijd {
  font-size: 1.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ocean-dark);
}
.exam-oordeel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.exam-oordeel-vraag { font-weight: 700; }
.exam-nav {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.exam-teller {
  margin-left: auto;
  padding: 0.2rem 0.85rem;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ocean-dark);
  background: var(--ocean-light);
  border-radius: 999px;
}
.exam-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}
.exam-badge-o2 { background: var(--correct-bg); color: var(--correct); }
.exam-badge-o1 { background: var(--gold-light); color: var(--gold-dark); }
.exam-badge-o0 { background: var(--incorrect-bg); color: var(--incorrect); }
.exam-badge-ox { background: var(--paper-warm); color: var(--ink-mid); }
.exam-model { margin-top: 0.4rem; }
.exam-klaar { margin-top: 0.6rem; font-weight: 600; }

/* --- Uitslag- en statusbanners ----------------------------------------------
   Vriendelijke resultaatregels; kleuren volgen goed/fout op het spel-item. */
.tb-uitslag,
.hint-uitslag,
.galg-uitslag,
.mem-status,
.pov-klaar {
  margin-top: 0.6rem;
  padding: 0.55rem 0.95rem;
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--ink);
  background: var(--gold-light);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
}
.mem-status { text-align: center; }
.hint-item.hint-goed .hint-uitslag,
.galg-item.galg-goed .galg-uitslag {
  color: color-mix(in srgb, var(--correct) 55%, var(--ink));
  background: var(--correct-bg);
  border-color: color-mix(in srgb, var(--correct) 45%, transparent);
  border-left-color: var(--correct);
}
.hint-item.hint-goed .hint-uitslag::after,
.galg-item.galg-goed .galg-uitslag::after { content: ' 🎉'; }
.hint-item.hint-fout .hint-uitslag,
.galg-item.galg-fout .galg-uitslag {
  color: color-mix(in srgb, var(--incorrect) 55%, var(--ink));
  background: var(--incorrect-bg);
  border-color: color-mix(in srgb, var(--incorrect) 40%, transparent);
  border-left-color: var(--incorrect);
}
.pov-klaar {
  text-align: center;
  font-size: 1rem;
  background: linear-gradient(135deg, var(--gold-light), var(--ocean-light));
  animation: gamePop 0.3s ease;
}
.pov-klaar::after { content: ' 🎉'; }

/* --- Spel: reduced motion ---------------------------------------------------
   Sluit aan op het algemene reduce-blok hierboven: alle spel-animaties uit,
   alle hover/druk/stempel-transforms uit. Kleur-states blijven zichtbaar. */
@media (prefers-reduced-motion: reduce) {
  [data-game] .mco.ok,
  [data-game] .mem-kaart.ok,
  .zin-item.zin-goed,
  .zin-item.zin-fout,
  .hint-regel,
  .pov-scene,
  .pov-klaar { animation: none; }
  [data-game] .mco,
  [data-game] .mco:hover:not(:disabled),
  [data-game] .mco:active:not(:disabled),
  [data-game] .bingo-cell.sel,
  [data-game] .bingo-cell.bingo-img.sel,
  [data-game] .cat-chip.kies,
  .cat-vak,
  .cat-vak:hover { transform: none; transition: none; }
}

/* --- Spel: mobiel (lessen draaien in een iframe, vaak ~380px breed) -------- */
@media (max-width: 600px) {
  [data-game] .mco { font-size: 0.88rem; }
  .bingo-grid { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 0.4rem; }
  [data-game] .bingo-cell { min-height: 2.7rem; font-size: 0.85rem; }
  [data-game] .bingo-img img { height: 74px; }
  .mem-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 0.4rem; }
  [data-game] .mem-kaart { font-size: 0.8rem; }
  .cat-vakken { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.45rem; }
  .galg-letters { grid-template-columns: repeat(auto-fill, minmax(2.1rem, 1fr)); gap: 0.25rem; }
  .galg-masker { letter-spacing: 0.16em; }
  .pov-img { max-height: 220px; }
  .pov-nav { flex-wrap: wrap; }
  .zin-item, .fout-item, .hint-item, .galg-item { padding: 0.6rem; }
  .rol-kaarten { grid-template-columns: 1fr; }
  .duobeeld-grid { gap: 0.4rem; }
  .exam-nav { flex-wrap: wrap; }
  .exam-tijd { font-size: 1.6rem; }
}

/* === Blok-wrappers (lesbouwer/AI-JSON-pad) === */
/* In gewrapte lessen telt nth-child over .blok-wrappers; spiegel de stagger en
   kleurrotatie van de directe-kind-variant hierboven. */
.blok:nth-child(1) > .card { animation-delay: 0s; }
.blok:nth-child(2) > .card { animation-delay: 0.08s; }
.blok:nth-child(3) > .card { animation-delay: 0.16s; }
.blok:nth-child(4) > .card { animation-delay: 0.24s; }
.blok:nth-child(5) > .card { animation-delay: 0.32s; }
.blok:nth-child(6) > .card { animation-delay: 0.4s; }
.blok:nth-child(7) > .card { animation-delay: 0.48s; }
.blok:nth-child(8) > .card { animation-delay: 0.56s; }
.blok:nth-child(n+9) > .card { animation-delay: 0.6s; }
.blok:nth-child(4n+1) > .card { border-left-color: var(--ocean); }
.blok:nth-child(4n+2) > .card { border-left-color: var(--gold); }
.blok:nth-child(4n+3) > .card { border-left-color: var(--forest); }
.blok:nth-child(4n+4) > .card { border-left-color: var(--plum); }
.blok:nth-child(4n+2) > .card .card-num { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); box-shadow: 0 2px 6px rgba(212,168,67,0.25); }
.blok:nth-child(4n+3) > .card .card-num { background: linear-gradient(135deg, var(--forest), #2d6648); box-shadow: 0 2px 6px rgba(58,125,92,0.25); }
.blok:nth-child(4n+4) > .card .card-num { background: linear-gradient(135deg, var(--plum), #5e3a6b); box-shadow: 0 2px 6px rgba(123,79,138,0.25); }