/* ============================================================
   BRAIALS THEMA - "Riso Print"
   Handgemaakte riso/zeefdruk-look, vertaald uit de bespoke
   lessen "Kira kennismaking A0" en "Op een verjaardag A1":
   warm papier, donkere inkt, vier gedempte accenten
   (terracotta / sage / mosterd / plum), bijna-vierkante kaarten
   met harde offset-schaduwen en minimale rotatie, handschrift
   (Caveat) voor kickers, badges en captions, Fraunces voor
   koppen en Nederlandse doelwoorden, Inter voor lopende tekst.
   Wordt NA lesson-template.css geladen; deze regels winnen.
   Fonts (Fraunces + Inter + Caveat) laadt de injector apart.
   ============================================================ */

/* === VARIABELEN OVERSCHRIJVEN ===
   Alle basis-tokens hermappen naar het riso-palet, zodat ook
   token-gedreven onderdelen (o.a. de spel-blokken) automatisch
   meekleuren zonder eigen selectors hier. */
:root {
  /* Papier en inkt */
  --ink: #2a241c;
  --ink-mid: #54483a;
  --ink-soft: #7a6c58;
  --paper: #f8f1e3;
  --paper-warm: #f1e7d2;
  --white: #fbf6ea;          /* kaart-achtergrond (papier-2) */
  --paper-2: #fbf6ea;
  --line: #e2d6bd;
  --border: #e2d6bd;
  --soft: #54483a;           /* gebruikt door spel-blokken (pov-teller, memory) */

  /* Vier riso-accenten */
  --terracotta: #b94f3b;
  --sage: #506b48;
  --mustard: #d99a1f;
  --riso-plum: #7a3a5a;

  /* Map de basisrollen op de accenten:
     gold = mosterd, ocean = sage, ember = terracotta,
     forest EN plum = plum (info.forest wordt de plum-variant) */
  --gold: #d99a1f;
  --gold-light: #f4e6c4;
  --gold-dark: #94660e;
  --ocean: #506b48;
  --ocean-light: #e4e9db;
  --ocean-dark: #3c5236;
  --ember: #b94f3b;
  --ember-light: #f2ded6;
  --forest: #7a3a5a;
  --forest-light: #ecdfe6;
  --plum: #7a3a5a;
  --plum-light: #ecdfe6;

  /* Semantiek: gedempt groen = goed, terracotta = fout */
  --correct: #3f7a4d;
  --correct-bg: #e8efe2;
  --incorrect: #b94f3b;
  --incorrect-bg: #f6e3da;

  /* Vorm: bijna vierkant, harde offset-schaduwen (geen blur) */
  --radius: 2px;
  --shadow: 2px 2px 0 #54483a;
  --shadow-md: 3px 3px 0 #2a241c;
  --shadow-lg: 4px 4px 0 #2a241c;

  /* Fonts (NIET importeren; de injector laadt ze apart) */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;

  --header-bg: transparent;
}

/* === BODY: warm papier met drie subtiele kleurwolken === */
body {
  font-family: var(--font-body);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(217, 154, 31, 0.06) 0 40%, transparent 41%),
    radial-gradient(circle at 92% 4%, rgba(185, 79, 59, 0.05) 0 30%, transparent 31%),
    radial-gradient(circle at 88% 92%, rgba(80, 107, 72, 0.06) 0 35%, transparent 36%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.6;
}
h1, h2, h3 {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

/* Warm getinte scrollbar in plaats van de koele default */
::-webkit-scrollbar-track { background: #ece1cb; }
::-webkit-scrollbar-thumb { background: #a08e73; }
::-webkit-scrollbar-thumb:hover { background: #54483a; }
html { scrollbar-color: #a08e73 #ece1cb; }

/* === HEADER: krantenkop op het papier zelf, geen gevulde balk === */
.header {
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 2.6rem 1.2rem 0;
  overflow: visible;
}
.header::before { display: none; } /* geen decoratieve cirkel */
.header-inner {
  /* Even breed als de content in .container (840px min de zijpadding),
     zodat de dubbele lijn uitlijnt met de kaarten eronder. */
  max-width: calc(840px - 2.4rem);
  margin: 0 auto;
  position: relative;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 16px;
}
/* Tweede, dunnere lijn net onder de dikke: de klassieke masthead-dubbel */
.header-inner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--ink);
  opacity: 0.5;
}
/* Kicker in handschrift, licht gedraaid */
.header-tag {
  display: inline-block;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--terracotta);
  letter-spacing: 0;
  text-transform: none;
  transform: rotate(-2deg);
  margin-bottom: 4px;
}
.header h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 6px;
}
/* Subtitel als meta-regel: uppercase met ruime letter-spacing */
.header p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-mid);
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 12px;
}

/* === LAYOUT === */
.container {
  max-width: 840px;
  padding: 1.8rem 1.2rem 4rem;
}

/* === VOORTGANG: klein gedrukt kaartje met offset-schaduw === */
.progress-wrap {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--ink-mid);
  padding: 0.85rem 1.05rem;
  margin-bottom: 1.6rem;
}
.prog-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mid);
}
.prog-track {
  height: 8px;
  background: var(--paper-warm);
  border-radius: 0;
  border: 1px solid var(--line);
}
.prog-fill {
  background: var(--terracotta);
  border-radius: 0;
}
.prog-num {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--terracotta);
}

/* === SECTIEKOP: links uitgelijnd op het papier, handschrift-label === */
.sec, .section {
  text-align: left;
  background: none;
  border-radius: 0;
  padding: 0.4rem 0 0;
  margin: 3rem 0 1.3rem;
}
.sec-tag {
  display: inline-block;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--terracotta);
  letter-spacing: 0;
  text-transform: none;
  transform: rotate(-2deg);
  margin-bottom: 0.15rem;
}
.sec h2, .section h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.45rem, 4vw, 1.8rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.1rem;
}
.sec-sub {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink-mid);
}
/* Kort mosterd-streepje als afsluiting van de sectiekop */
.sec::after, .section::after {
  content: '';
  display: block;
  width: 54px;
  height: 3px;
  background: var(--mustard);
  margin-top: 0.55rem;
}

/* === INFOBOX: gestempeld kader met dashed rand + handschrift-kop ===
   default = mosterd (tips), .ocean = sage (regels/uitleg), .forest = plum */
.info {
  background: rgba(217, 154, 31, 0.12);
  border: 1.5px dashed var(--mustard);
  border-left: 1.5px dashed var(--mustard);
  border-radius: var(--radius);
  padding: 0.9rem 1.15rem;
  margin-bottom: 1.3rem;
  font-size: 0.96rem;
}
.info h3 {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: 0;
  margin-bottom: 0.25rem;
}
.info p { line-height: 1.75; color: var(--ink); }
.info.ocean {
  background: rgba(80, 107, 72, 0.10);
  border-color: var(--sage);
  border-left-color: var(--sage);
}
.info.ocean h3 { color: var(--sage); }
.info.forest {
  background: rgba(122, 58, 90, 0.09);
  border-color: var(--riso-plum);
  border-left-color: var(--riso-plum);
}
.info.forest h3 { color: var(--riso-plum); }
.info.warning {
  background: rgba(185, 79, 59, 0.10);
  border-color: var(--terracotta);
  border-left-color: var(--terracotta);
}
.info.warning h3 { color: var(--terracotta); }
/* Leerdoelen als handgetekende checklist: elk doel op een eigen
   papiertje met inktrand en een Caveat-vinkje in een getekend hokje. */
.goal-list {
  margin: 0.6rem 0 0.15rem;
  gap: 0.5rem;
}
.goal-list li {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--ink-mid);
}
.goal-list li::before {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 700;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--terracotta);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  transform: rotate(-4deg);
}
.goal-list li:nth-child(4n+2)::before { background: var(--paper); color: var(--sage); }
.goal-list li:nth-child(4n+3)::before { background: var(--paper); color: var(--mustard); }
.goal-list li:nth-child(4n)::before { background: var(--paper); color: var(--riso-plum); }

/* === OEFENKAART: riso-print vel ===
   Papier-2, inkt-rand, bijna vierkant, harde offset-schaduw en een
   minieme rotatie die per kaart wisselt. De basis-animatie gebruikt
   fill-mode "both" (de eind-keyframe blijft de transform vasthouden),
   dus de rotatie zit IN eigen keyframes via var(--tilt): de fade-in
   stagger van de basis blijft werken en de tilt blijft daarna staan.
   Op hover gaat --tilt naar 0 en staat de kaart recht. */
@keyframes risoCardIn {
  from { opacity: 0; transform: translateY(14px) rotate(var(--tilt, 0deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
}
.card {
  --tilt: -0.3deg;
  position: relative;
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 1.4rem 1.5rem 1.55rem;
  margin-bottom: 1.7rem;
  margin-top: 1.5rem; /* ruimte voor de overhangende nummerbadge */
  animation-name: risoCardIn;
  transition: box-shadow 0.2s ease;
}
.card:nth-child(even) { --tilt: 0.25deg; }
.blok:nth-child(even) > .card { --tilt: 0.25deg; }
.blok:nth-child(odd) > .card { --tilt: -0.3deg; }
/* Overschrijf de roterende gekleurde linkerranden uit de basis: rand blijft inkt */
.card:nth-child(4n+1),
.card:nth-child(4n+2),
.card:nth-child(4n+3),
.card:nth-child(4n+4) { border-left-color: var(--ink); }
.blok:nth-child(4n+1) > .card,
.blok:nth-child(4n+2) > .card,
.blok:nth-child(4n+3) > .card,
.blok:nth-child(4n+4) > .card { border-left-color: var(--ink); }
.card:hover {
  --tilt: 0deg;
  box-shadow: 4px 4px 0 var(--ink);
}
/* Geneste kaart (rollenspel): binnenblok-stijl, niet extra gedraaid */
.card .card {
  --tilt: 0deg;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 2px 2px 0 var(--ink-mid);
  margin-top: 1.1rem;
  padding: 1.1rem 1.2rem;
}
.card .card:hover { box-shadow: 2px 2px 0 var(--ink-mid); }

/* Kop van de kaart: geen lijn, ruimte vrijhouden voor de badge */
.card-head {
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0;
  padding-left: 40px;
  border-bottom: none;
  min-height: 26px;
}
/* SIGNATUUR: overhangende handschrift-cirkel als nummerbadge,
   roteert per kaart door de vier accentkleuren */
.card-num,
.card:nth-child(4n+1) .card-num,
.card:nth-child(4n+2) .card-num,
.card:nth-child(4n+3) .card-num,
.card:nth-child(4n+4) .card-num {
  position: absolute;
  top: -17px;
  left: 15px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--paper);
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  transform: rotate(-4deg);
  box-shadow: none;
}
.card:nth-child(4n+2) .card-num { background: var(--sage); color: var(--paper); }
.card:nth-child(4n+3) .card-num { background: var(--mustard); color: var(--ink); }
.card:nth-child(4n+4) .card-num { background: var(--riso-plum); color: var(--paper); }
.blok:nth-child(4n+1) > .card .card-num { background: var(--terracotta); color: var(--paper); box-shadow: none; }
.blok:nth-child(4n+2) > .card .card-num { background: var(--sage); color: var(--paper); box-shadow: none; }
.blok:nth-child(4n+3) > .card .card-num { background: var(--mustard); color: var(--ink); box-shadow: none; }
.blok:nth-child(4n+4) > .card .card-num { background: var(--riso-plum); color: var(--paper); box-shadow: none; }
.card .card .card-num { position: static; width: 30px; height: 30px; font-size: 1.15rem; transform: rotate(-4deg); }
.card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.2;
  color: var(--ink);
}
/* Instructie als gedrukte notitie met mosterd-lijntje */
.card-instr {
  background: rgba(255, 255, 255, 0.5);
  border-left: 3px solid var(--mustard);
  padding: 7px 11px;
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
  font-size: 0.92rem;
  color: var(--ink-mid);
}

/* === VOCAB-HIGHLIGHTS in lopende tekst === */
.v1 { color: var(--terracotta); font-weight: 700; }
.v2 { color: var(--sage); font-weight: 700; }
.mid { color: var(--gold-dark); font-weight: 600; }
.eng { color: var(--ink-soft); font-style: italic; font-size: 0.84rem; }

/* === ZINSCHEMA-TABEL: gedrukt schema op kaartpapier ===
   Inktrand met offset-schaduw, plum-kopregel, handgeschreven rijlabels
   (Caveat) en het werkwoord als mosterd-marker met inkt-kadertje. */
.schema-wrap { border-radius: 2px; }
table.schema {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink-mid);
}
table.schema th, table.schema td { border-color: var(--line); }
table.schema thead th {
  background: var(--riso-plum);
  border-color: color-mix(in srgb, var(--riso-plum) 72%, var(--paper-2));
}
table.schema tbody th {
  background: var(--paper-warm);
  font-family: var(--font-hand);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink-mid);
}
table.schema td b {
  background: var(--gold-light);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 1px 1px 0 var(--ink-mid);
  transform: rotate(-1deg);
  font-family: var(--font-heading);
  font-weight: 700;
}

/* === RIJEN === */
.row {
  line-height: 2.05;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid rgba(226, 214, 189, 0.65);
  border-radius: 0;
}
.row:nth-child(even) { background: rgba(217, 154, 31, 0.05); }
.row:last-child { border-bottom: none; }
.rn {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--terracotta);
  min-width: 24px;
}

/* === INVOER: handschrift-invullijnen ===
   Tekstinputs zonder kader: alleen een dashed onderlijn; het antwoord
   verschijnt in terracotta Fraunces, alsof het met de hand is ingevuld. */
input[type="text"] {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  border: none;
  border-bottom: 2px dashed var(--ink-mid);
  border-radius: 0;
  background: transparent;
  padding: 3px 6px;
  color: var(--terracotta);
}
input[type="text"]::placeholder { color: rgba(84, 72, 58, 0.55); font-family: var(--font-body); font-size: 0.9rem; }
input[type="text"]:focus {
  outline: none;
  border-bottom-color: var(--terracotta);
  border-bottom-style: solid;
  box-shadow: none;
  background: transparent;
}
input[type="text"]:not(:placeholder-shown):not(:focus) {
  border-bottom-color: var(--ink);
}
/* Invulgaten als korte handschrift-lijnen IN de zin, niet over de volle
   breedte: de basis laat width:100% winnen van .inline/.narrow/.wide
   (attribuut-selector telt zwaarder); hier pinnen we de variant-breedtes
   met hogere specificiteit vast, zoals de bespoke riso-lessen doen. */
input[type="text"].inline { width: 155px; display: inline-block; }
input[type="text"].narrow { width: 120px; display: inline-block; }
input[type="text"].wide { width: 280px; display: inline-block; }
textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1.5px dashed var(--ink-mid);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.4);
  padding: 10px 12px;
  color: var(--ink);
}
textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  border-style: solid;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.55);
}
select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background-color: var(--paper);
  color: var(--ink);
  padding: 6px 30px 6px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%232a241c' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
}
select:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: none;
  background-color: var(--paper);
}

/* Invoer-states: groen/rood semantiek (basis gebruikt !important, wij ook) */
.input-ok {
  border-color: var(--correct) !important;
  background: rgba(63, 122, 77, 0.08) !important;
  box-shadow: none !important;
}
input[type="text"].input-ok {
  background: transparent !important;
  border-bottom: 2px solid var(--correct) !important;
  color: var(--correct) !important;
}
.input-no {
  border-color: var(--incorrect) !important;
  background: rgba(185, 79, 59, 0.07) !important;
  box-shadow: none !important;
}
input[type="text"].input-no {
  background: transparent !important;
  border-bottom: 2px solid var(--incorrect) !important;
}
.mc.input-ok {
  border: 1.5px solid var(--correct) !important;
  background: var(--correct-bg) !important;
  border-radius: var(--radius);
}
.mc.input-no {
  border: 1.5px solid var(--incorrect) !important;
  background: var(--incorrect-bg) !important;
  border-radius: var(--radius);
}

/* === MEERKEUZE (klikbare divs): gedrukte keuzeblokjes met a/b/c
   in handschrift; geselecteerd = terracotta-vulling met wit.
   Flex-opzet zoals app.css: spelchips onderdrukken hun ::before in de
   basis en houden dan geen scheve padding over. === */
.mc { counter-reset: mcopt; margin: 0.4rem 0; }
.mco {
  counter-increment: mcopt;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--ink-mid);
  padding: 0.5rem 0.9rem;
  margin: 0.45rem 0;
  font-size: 0.94rem;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mco::before {
  content: counter(mcopt, lower-alpha);
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-mid);
  border: 1.5px solid var(--ink-mid);
  background: transparent;
  transform: rotate(-4deg);
}
.mco:hover {
  border-color: var(--ink);
  background: var(--paper-2);
  box-shadow: 3px 3px 0 var(--ink);
}
.mco.sel {
  border-color: var(--ink);
  background: var(--terracotta);
  color: #fbf6ea;
  font-weight: 600;
  box-shadow: 2px 2px 0 var(--ink);
}
.mco.sel::before {
  color: var(--terracotta);
  background: #fbf6ea;
  border-color: #fbf6ea;
}
.mco.ok {
  border-color: var(--correct);
  background: var(--correct-bg);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--correct);
}
.mco.ok::before { color: #fbf6ea; background: var(--correct); border-color: var(--correct); }
.mco.no {
  border-color: var(--incorrect);
  background: var(--incorrect-bg);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--incorrect);
}
.mco.no::before { color: #fbf6ea; background: var(--incorrect); border-color: var(--incorrect); }

/* === MEERKEUZE (radio-knoppen): zelfde gedrukte toon === */
.mc-radio { gap: 0.45rem; margin: 0.45rem 0; }
.mc-radio label {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 0.55rem 0.95rem;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mc-radio label:hover {
  border-color: var(--ink);
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink-mid);
}
.mc-radio label:has(input[type="radio"]:checked) {
  border-color: var(--terracotta);
  background: rgba(185, 79, 59, 0.09);
  font-weight: 600;
  box-shadow: 2px 2px 0 var(--terracotta);
}
.mc-radio label.ok,
.mc-radio label.ok:has(input[type="radio"]:checked) {
  border-color: var(--correct);
  background: var(--correct-bg);
  box-shadow: 2px 2px 0 var(--correct);
}
.mc-radio label.no,
.mc-radio label.no:has(input[type="radio"]:checked) {
  border-color: var(--incorrect);
  background: var(--incorrect-bg);
  box-shadow: 2px 2px 0 var(--incorrect);
}
.mc-radio input[type="radio"] { accent-color: var(--terracotta); }
/* Inline radio-keuzes binnen een .row */
.mc .row input[type="radio"] { accent-color: var(--terracotta); cursor: pointer; }

/* === MATCHING === */
.match-row {
  border-bottom: 1px dashed var(--line);
  border-radius: 0;
}
.match-row:nth-child(odd) { background: rgba(80, 107, 72, 0.04); }
.match-row:hover { background: rgba(217, 154, 31, 0.09); }
.match-row:last-child { border-bottom: none; }
.match-left {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}

/* === WOORDENSCHAT: gedrukte kaartjes, doelwoord in Fraunces === */
.vocab-item,
.vocab-item:nth-child(4n+1),
.vocab-item:nth-child(4n+2),
.vocab-item:nth-child(4n+3),
.vocab-item:nth-child(4n+4) {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 2px 2px 0 var(--ink-mid);
  padding: 0.6rem 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vocab-item:hover,
.vocab-item:nth-child(4n+1):hover,
.vocab-item:nth-child(4n+2):hover,
.vocab-item:nth-child(4n+3):hover,
.vocab-item:nth-child(4n+4):hover {
  transform: none;
  background: var(--paper-2);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.vocab-item .dutch,
.vocab-item:nth-child(4n+1) .dutch,
.vocab-item:nth-child(4n+2) .dutch,
.vocab-item:nth-child(4n+3) .dutch,
.vocab-item:nth-child(4n+4) .dutch {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--ink);
}
.vocab-item .english {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.83rem;
}
.vocab-play-btn {
  background: var(--terracotta);
  color: #fbf6ea;
}
.vocab-play-btn:hover { background: #9c3f2e; transform: scale(1.08); }

/* === DIALOOG: twee accent-tinten (terracotta / sage) === */
.dialogue-bubble {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 2px 2px 0 var(--ink-mid);
  font-size: 0.94rem;
  line-height: 1.6;
}
.speaker-a {
  background: #fff;
  border-left: 4px solid var(--terracotta);
  border-bottom-left-radius: 0;
}
.speaker-b {
  background: rgba(80, 107, 72, 0.10);
  border-left: 1px solid var(--line);
  border-right: 4px solid var(--sage);
  border-bottom-right-radius: 0;
}
.dialogue-bubble strong {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.15rem;
}
.speaker-a strong { color: var(--terracotta); }
.speaker-b strong { color: var(--sage); }
/* Invullijnen in een bubbel blijven leesbaar op de tint */
.dialogue-bubble input[type="text"] { background: transparent; }

/* === SCENARIO / SPREEKOPDRACHT: mosterd-naar-terracotta wolk in inkt-kader === */
.scenario-box {
  background: linear-gradient(180deg, rgba(217, 154, 31, 0.08), rgba(185, 79, 59, 0.08));
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}

/* === KNOPPEN: gedrukte stempels met offset-schaduw === */
.btn {
  background: var(--terracotta);
  color: #fbf6ea;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.5rem 1.2rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 2px 2px 0 var(--ink);
}
.btn:hover {
  background: #9c3f2e;
  box-shadow: 3px 3px 0 var(--ink);
  transform: translateY(-1px);
}
.btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn-show {
  background: transparent;
  border: 1.5px dashed var(--ink-mid);
  border-radius: var(--radius);
  font-family: var(--font-hand);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-mid);
  padding: 0.3rem 0.9rem;
}
.btn-show:hover {
  border-color: var(--terracotta);
  border-style: solid;
  color: var(--terracotta);
}

/* === FEEDBACK (semantiek behouden: groen = goed, terracotta = fout) === */
.fb { border-radius: var(--radius); }
.fb.ok {
  background: var(--correct-bg);
  color: #2c5636;
  border: 1.5px solid var(--correct);
  border-left: 4px solid var(--correct);
}
.fb.no {
  background: var(--incorrect-bg);
  color: #7e3527;
  border: 1.5px solid var(--incorrect);
  border-left: 4px solid var(--incorrect);
}

/* === MODELANTWOORD: wit sleutelkaartje met terracotta lijn === */
.model-answer {
  background: #fff;
  border-left: 4px solid var(--terracotta);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--ink-mid);
  padding: 0.7rem 1rem;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.8;
}
.model-answer strong {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--terracotta);
}

/* === MEDIA: afbeelding als polaroid met wit passe-partout === */
.lesson-image {
  background: #fff;
  padding: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink-mid);
}
.audio-wrap audio { border-radius: 0; }
.audio-box {
  background: rgba(122, 58, 90, 0.09);
  border: 1.5px dashed var(--riso-plum);
  border-left: 1.5px dashed var(--riso-plum);
  border-radius: var(--radius);
}

/* === DIVIDER: handgestippelde lijn === */
.divider {
  height: 0;
  background: none;
  border: none;
  border-top: 2px dashed var(--line);
  border-radius: 0;
  margin: 2.2rem 0;
}

/* === FOOTER: handgeschreven afsluiting boven een inktlijn === */
.footer {
  border-top: 2px solid var(--ink);
  margin-top: 2.8rem;
  padding-top: 1.3rem;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--ink-mid);
  text-align: center;
}

/* === REDUCE MOTION ===
   De basis zet de kaart-animatie al uit; zonder animatie is er ook geen
   vastgehouden rotatie meer, dus kaarten staan dan vanzelf recht.
   Geen extra beweging introduceren. */
@media (prefers-reduced-motion: reduce) {
  .card, .blok > .card { --tilt: 0deg; }
  .card:hover, .vocab-item:hover, .btn:hover, .vocab-play-btn:hover { transform: none; }
  .btn:active { transform: none; }
}

/* === RESPONSIVE: op klein scherm rotaties uit, badges kleiner === */
@media (max-width: 600px) {
  .card,
  .card:nth-child(even),
  .blok:nth-child(odd) > .card,
  .blok:nth-child(even) > .card { --tilt: 0deg; }
  .header { padding: 1.8rem 1rem 0; }
  .header h1 { font-size: 1.7rem; }
  .header-tag { font-size: 1.3rem; }
  .header p { font-size: 0.74rem; letter-spacing: 0.1em; }
  .container { padding: 1.3rem 1rem 3rem; }
  .card { padding: 1.1rem 1rem 1.2rem; margin-top: 1.3rem; }
  .card-num,
  .card:nth-child(4n+1) .card-num,
  .card:nth-child(4n+2) .card-num,
  .card:nth-child(4n+3) .card-num,
  .card:nth-child(4n+4) .card-num {
    top: -14px;
    left: 11px;
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
  }
  .card-head { padding-left: 32px; }
  .sec h2, .section h2 { font-size: 1.35rem; }
  .sec-tag { font-size: 1.25rem; }
  input[type="text"].inline { width: 125px; }
  input[type="text"].wide { width: 200px; }
  .vocab-list { grid-template-columns: 1fr; }
  .match-row { flex-direction: column; align-items: stretch; }
}

/* === SPELBLOKKEN: RISO-ACCENTEN ===
   De spel-chipbasis in lesson-template.css is token-gedreven en kleurt
   hierboven al mee via de hermapte variabelen; dit blok maakt alleen de
   VORM riso: bijna vierkant, inktrand en harde offset-schaduw in plaats
   van de zachte afgeronde lift. States (.sel/.ok/.no/.mist) behouden hun
   kleuren en stempel-gedrag uit de basis. */
[data-game] .mco {
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--ink-mid);
}
[data-game] .bingo-cell,
[data-game] .mem-kaart {
  border-radius: 4px;
}
[data-game] .mco:hover:not(:disabled) {
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink-mid);
}
[data-game] .mco:active:not(:disabled) {
  box-shadow: 1px 1px 0 var(--ink-mid);
}
[data-game] .btn-show {
  border-radius: 4px;
}

/* === UITLEG TUSSENDOOR: chips, voorbeelden en leestekst in riso-stijl ===
   Chips krijgen de volle inktrand terug. LET OP: --forest is in dit thema
   op plum gemapt (info.forest), waardoor de samen-chip zou botsen met de
   verbindingswoord-chip; pin hem daarom expliciet op het riso-groen. */
.ww-chip, .vw-chip, .pre-chip, .vast-chip {
  border: 1.5px solid var(--ink);
  border-radius: 2px;
}
.pre-chip { background: #3f7d8c; }
.vast-chip { background: var(--correct); }
.vw-chip { background: var(--riso-plum); }
.voorbeeldblok .vb-rij { border-left: 3px solid var(--mustard); }
.vb-zin { font-family: var(--font-heading); font-size: 1.16rem; }
.vb-label { font-family: var(--font-hand); font-size: 1.05rem; color: var(--ink-mid); }
.vb-noot { color: var(--terracotta); }
/* Leestekst als boekpagina: een boekje dat door de bovenrand prikt. */
.leestekst-card { position: relative; }
.leestekst-card::before {
  content: '\1F4D6';
  position: absolute;
  top: -14px;
  right: 22px;
  font-size: 1.25rem;
  background: var(--paper-2);
  padding: 0 6px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--ink-mid);
  transform: rotate(2deg);
}
.leestekst-card p:first-of-type { font-size: 1.05rem; }