/* LetterMonsterdorp
   Pastel, veel witruimte, één opdracht per scherm.

   Twee harde regels voor deze doelgroep:
   - raakvlakken minimaal 60x60 px (de gebruikelijke 44 is een volwassenennorm;
     de mikprecisie van een vierjarige is beduidend slechter)
   - nooit rood, nooit een kruis. Een fout antwoord wiebelt zacht en vergrijst. */

:root {
  /* palet uit de ontwerpsheet */
  --geel:      #FBE7A2;
  --groen:     #C6E8C9;
  --blauw:     #C9E4F5;
  --roze:      #F9D3E0;
  --lila:      #DCD2EE;
  --lila-diep: #9C8CC4;

  --bg:        #FDFBF5;
  --kaart:     #FFFFFF;
  --kaart-2:   #F6F3EC;
  --rand:      #EAE4D8;
  --tekst:     #3A3540;
  --tekst-dim: #6E6678;
  --tekst-vaag:#A69FAE;
  --goed:      #7FBF8A;
  --goed-zacht:#E4F3E6;

  /* Comic Sans staat op Windows en macOS. Op een iPad of Android-tablet is
     hij er niet, vandaar de terugval: Chalkboard SE (Apple) en Comic Neue
     lijken er sterk op. Bewust NIET eindigen op de generieke `cursive`: op
     Android levert die vaak een sierlijk schrijfletter-font op, en dat is voor
     een kind dat net letters leert juist slechter leesbaar dan een gewone
     schreefloze. Zie de README als je de look op elk apparaat wilt garanderen. */
  --letterfont: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue",
                "Segoe Print", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --schaduw:    0 3px 14px rgba(58, 53, 64, 0.07);
  --schaduw-lg: 0 14px 38px rgba(58, 53, 64, 0.14);
  --rond:   24px;
  --rond-s: 16px;
  --raak:   60px;                       /* minimale maat van elk raakvlak */
  --veilig-onder: env(safe-area-inset-bottom, 0px);
  --veilig-boven: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  color: var(--tekst);
  background:
    radial-gradient(circle at 10% 0%,   #FFF7DE, transparent 42%),
    radial-gradient(circle at 92% 100%, #EDE6F7, transparent 44%),
    var(--bg);
  background-attachment: fixed;
  font-family: var(--letterfont);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Formulierelementen erven het lettertype niet vanzelf — die pakken het
   systeemfont van het besturingssysteem tenzij je het expliciet zegt. */
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }

/* Padennamen en bestandsnamen in het ouderscherm blijven wel monospace:
   daar is uitlijning belangrijker dan sfeer, en dat leest geen kind. */
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; }

#app {
  max-width: 860px;
  margin: 0 auto;
  padding: calc(12px + var(--veilig-boven)) 16px calc(56px + var(--veilig-onder));
}

.view { display: none; animation: opkomen .24s ease both; }
.view-active { display: block; }
@keyframes opkomen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Deze regel moet er op dag één in staan: het hidden-attribuut verliest van
   elke eigen display-regel, en dan vangt een onzichtbare laag alle taps op. */
.overlay[hidden], .toast[hidden] { display: none !important; }

/* ---------- Koppen ---------- */

.dorp-kop { display: flex; align-items: center; gap: 12px; padding: 10px 2px 16px; }
.dorp-kop h1 {
  margin: 0; flex: 1;
  font-size: clamp(22px, 5.4vw, 30px); font-weight: 800; letter-spacing: -0.02em;
}
.dorp-sterren {
  display: flex; align-items: center; gap: 6px;
  background: var(--kaart); border: 2px solid var(--rand); border-radius: 999px;
  padding: 8px 14px; font-weight: 700; font-size: 15px; white-space: nowrap;
}

.scherm-kop { display: flex; align-items: center; gap: 12px; padding: 6px 0 14px; flex-wrap: wrap; }
.scherm-kop h2 {
  margin: 0; flex: 1; font-size: 21px; font-weight: 800;
  display: flex; align-items: center; gap: 10px;
}
.scherm-kop h2 .letter-svg { flex: none; color: var(--lila-diep); }
.spel-titel { font-size: 19px; }
.spel-meta { flex-basis: 100%; }

.icon-btn {
  width: var(--raak); height: var(--raak); flex: none;
  border-radius: 50%; font-size: 24px;
  display: grid; place-items: center;
  background: var(--kaart); border: 2px solid var(--rand); box-shadow: var(--schaduw);
}
.icon-btn:active { transform: scale(0.94); }

/* ---------- Knoppen ---------- */

.knop {
  min-height: var(--raak);
  padding: 14px 22px; border-radius: var(--rond-s);
  background: var(--kaart); border: 2px solid var(--rand);
  font-size: 17px; font-weight: 700; box-shadow: var(--schaduw);
}
.knop:active { transform: translateY(1px); }
.knop.primair { background: var(--lila); border-color: var(--lila-diep); }

.verrassing {
  display: block; width: 100%; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--geel), var(--roze));
  border-color: #E4C98F; font-size: 18px;
}

/* ---------- Dorpskaart ---------- */

.dorp-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

/* De tegel is de wrapper; het luidsprekertje ligt erbovenop en mag dus niet
   in de knop zitten (knop-in-knop is ongeldige HTML). */
.huisje-tegel { position: relative; display: flex; }

.huisje-knop {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  /* Ruim onderin: het luidsprekertje (54 px, 6 px van de rand) ligt daar
     overheen. Minder ruimte en de sterren op het dak of de naam raken het
     knopje — met de naam gecentreerd botst dat precies in het midden. */
  padding: 10px 6px 68px;
  border-radius: var(--rond);
  background: var(--kaart); border: 2px solid var(--rand);
  box-shadow: var(--schaduw);
  min-height: 168px;
}
.huisje-knop:active { transform: translateY(2px) scale(0.985); }

/* Luidspreker rechtsonder: tikken om de klank en de naam te horen zonder het
   huisje binnen te gaan. Op een tablet bestaat zweven met de muis niet, dus
   dit is dáár de enige manier om even te luisteren. */
.huisje-luister {
  position: absolute; right: 6px; bottom: 6px;
  /* 54 en niet 44: dit is voor kleutervingers een primaire knop, geen
     bijzaak. Groter kan niet zonder de naam eronder te verdringen. */
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--kaart); border: 2px solid var(--rand);
  box-shadow: var(--schaduw); color: var(--lila-diep);
  z-index: 2;
}
.huisje-luister svg { width: 27px; height: 27px; fill: currentColor; }
.huisje-luister .golf { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.huisje-luister:active { transform: scale(0.9); }

/* Terwijl er gepraat wordt, gaan de geluidsgolfjes mee. Zo zie je dat je knop
   het gedaan heeft, ook als het geluid van de tablet uit staat. */
.huisje-luister.praat {
  background: var(--lila); border-color: var(--lila-diep);
}
.huisje-luister.praat .golf-1 { animation: golf 1s ease-in-out infinite; }
.huisje-luister.praat .golf-2 { animation: golf 1s ease-in-out infinite .18s; }
@keyframes golf {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
.huisje-monster { position: absolute; top: 2px; right: 4px; pointer-events: none; }
.huisje-naam { font-size: 14px; font-weight: 700; color: var(--tekst-dim); margin-top: 2px; }
.huisje-knop.zwaait .huisje-monster { animation: zwaai-in 2.6s ease-in-out infinite; }
@keyframes zwaai-in {
  0%, 72%, 100% { transform: translateY(0) rotate(0); }
  78% { transform: translateY(-4px) rotate(-5deg); }
  86% { transform: translateY(-4px) rotate(5deg); }
}

/* ---------- Huisje: het menu van één letter ---------- */

.huisje-held { display: grid; place-items: center; padding: 4px 0 18px; }
.oefen-lijst { display: grid; gap: 12px; }

.oefen-knop {
  display: flex; align-items: center; gap: 16px;
  min-height: 84px; padding: 14px 18px;
  border-radius: var(--rond);
  background: var(--kaart); border: 2px solid var(--rand);
  box-shadow: var(--schaduw); text-align: left;
}
.oefen-knop:active { transform: translateY(2px); }
.oefen-icoon {
  width: 56px; height: 56px; flex: none; border-radius: 18px;
  display: grid; place-items: center; font-size: 28px;
  background: var(--kaart-2);
}
.oefen-tekst { display: flex; flex-direction: column; gap: 3px; }
.oefen-tekst b { font-size: 18px; }
.oefen-tekst small { font-size: 14px; color: var(--tekst-dim); }
.leeg { color: var(--tekst-dim); text-align: center; padding: 30px 10px; }

/* ---------- Spelscherm ---------- */

.spel-body { padding-bottom: 130px; }

.voortgang { display: flex; gap: 8px; padding: 4px 0 2px; }
.bol {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--kaart); border: 2px solid var(--rand);
}
.bol.af { background: var(--goed); border-color: var(--goed); }
.bol.nu { border-color: var(--lila-diep); transform: scale(1.18); }

.maatje {
  position: fixed; left: 8px; bottom: calc(4px + var(--veilig-onder));
  pointer-events: none; z-index: 5;
  filter: drop-shadow(0 6px 12px rgba(58, 53, 64, 0.14));
}
@media (max-width: 420px) { .maatje { transform: scale(0.78); transform-origin: left bottom; } }

/* de opdracht bovenaan: groot en zonder tekst die gelezen moet worden */
.opdracht {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: var(--kaart); border: 2px solid var(--rand); border-radius: var(--rond);
  padding: 18px; margin-bottom: 18px; box-shadow: var(--schaduw);
}
.opdracht-vraag { font-size: 17px; font-weight: 700; color: var(--tekst-dim); }
.klank-bel {
  min-width: 92px; min-height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lila); border: 3px solid var(--lila-diep);
  color: var(--lila-diep); box-shadow: var(--schaduw);
}
.klank-bel:active { transform: scale(0.95); }
.klank-bel .klank-letters { color: var(--lila-diep); }

/* Vier antwoordplaatjes, 2x2 en flink groot — maar met een plafond. Zonder
   max-width worden de tegels op een breed scherm 400 px en valt de onderste
   rij buiten beeld; dan moet een kleuter scrollen om zijn antwoord te zien
   en dat merkt hij niet. Alle vier moeten altijd tegelijk zichtbaar zijn. */
.keuze-raster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: min(100%, 520px); margin: 0 auto;
}
.keuze {
  display: grid; place-items: center; gap: 6px;
  /* De hoogte volgt wat er ná kop en opdracht (samen ~300 px) overblijft,
     gedeeld door twee rijen. Zo past het raster op elk scherm in één keer. */
  aspect-ratio: 1; min-height: 110px;
  max-height: min(calc((100vh - 320px) / 2), 240px);
  border-radius: var(--rond);
  background: var(--kaart); border: 3px solid var(--rand);
  box-shadow: var(--schaduw);
}
.keuze:active { transform: scale(0.97); }
.woord-beeld {
  width: 68%; aspect-ratio: 1; object-fit: contain;
  display: grid; place-items: center;
}
.woord-emoji { font-size: clamp(46px, 13vw, 72px); line-height: 1; }
.keuze.goed { background: var(--goed-zacht); border-color: var(--goed); }
.keuze.mis  { opacity: 0.42; filter: grayscale(0.7); }
.keuze[disabled] { pointer-events: none; }

.wiebelt { animation: wiebel .5s ease; }
@keyframes wiebel {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-4deg); }
  45% { transform: rotate(3.5deg); }
  70% { transform: rotate(-2deg); }
}

/* ---------- Letter leren ---------- */

.leren-vak {
  display: grid; place-items: center; gap: 10px;
  background: var(--kaart); border: 2px solid var(--rand); border-radius: var(--rond);
  padding: 20px; box-shadow: var(--schaduw); margin-bottom: 16px;
}
/* Op hoogte begrenzen, niet op breedte: de viewBox is 100x140, dus een
   breedte van 240 px wordt 336 px hoog en duwt de knoppen onder de vouw. */
.letter-animatie { height: min(38vh, 260px); width: auto; color: var(--lila-diep); }
.leren-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.leren-woorden { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.leren-woord {
  display: grid; place-items: center; gap: 2px;
  min-width: 96px; min-height: 96px; padding: 10px;
  border-radius: var(--rond-s); background: var(--kaart);
  border: 2px solid var(--rand); box-shadow: var(--schaduw);
}
.leren-woord .woord-emoji { font-size: 38px; }
.leren-woord small { font-size: 13px; color: var(--tekst-dim); font-weight: 700; }

/* ---------- Schrijven ---------- */

.schrijf-vak {
  position: relative; margin: 0 auto 16px;
  width: min(78vw, 320px); aspect-ratio: 100 / 140;
  background: var(--kaart); border: 2px solid var(--rand); border-radius: var(--rond);
  box-shadow: var(--schaduw); overflow: hidden;
}
.schrijf-gids, .schrijf-doek { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Zonder touch-action:none scrollt de browser in plaats van dat er getekend
   wordt. Bewust hier en niet op body, anders kun je nergens meer scrollen. */
.schrijf-doek { touch-action: none; user-select: none; -webkit-user-select: none; }
.gids-lijn   { stroke: var(--rand); stroke-width: 1.5; stroke-dasharray: 4 5; }
.gids-haal   { fill: none; stroke: var(--blauw); stroke-width: 11;
               stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 6; }
.gids-haal.af    { stroke: var(--goed); stroke-dasharray: none; opacity: .85; }
.gids-haal.later { opacity: .18; }
.gids-start  { fill: var(--lila-diep); }
.gids-nummer { fill: #fff; font-size: 11px; font-weight: 800; }
.schrijf-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.samen-bol { fill: var(--lila-diep); }

/* ---------- Woorden bouwen ---------- */

.bouw-beeld { display: grid; place-items: center; margin-bottom: 6px; }
.bouw-beeld .woord-emoji { font-size: clamp(58px, 17vw, 96px); }
.bouw-vakjes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0 22px; }
.bouw-vak {
  width: 74px; height: 88px; border-radius: var(--rond-s);
  display: grid; place-items: center;
  background: var(--kaart-2); border: 3px dashed var(--rand);
  color: var(--lila-diep);
}
.bouw-vak.vol   { border-style: solid; border-color: var(--lila-diep); background: var(--kaart); }
.bouw-vak.raak  { border-color: var(--lila-diep); background: var(--lila); }
.bouw-vak.goed  { border-color: var(--goed); background: var(--goed-zacht); }
.bouw-tegels { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tegel {
  min-width: 74px; height: 88px; padding: 0 10px; border-radius: var(--rond-s);
  display: grid; place-items: center;
  background: var(--kaart); border: 3px solid var(--rand);
  box-shadow: var(--schaduw); color: var(--lila-diep);
  touch-action: none;
}
.tegel[aria-pressed="true"] { border-color: var(--lila-diep); background: var(--lila); transform: translateY(-6px); }
.tegel.gebruikt { visibility: hidden; }
.tegel.zweeft {
  position: fixed; z-index: 60; pointer-events: none;
  box-shadow: var(--schaduw-lg); transform-origin: center;
}
.sleep-laag { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* ---------- Overlay ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 20px;
  background: rgba(58, 53, 64, 0.32);
  opacity: 0; transition: opacity .22s ease;
}
.overlay.zichtbaar { opacity: 1; }
.overlay-kaart {
  width: min(440px, 100%); max-height: 88vh; overflow: auto;
  background: var(--kaart); border-radius: 28px; padding: 24px 22px;
  box-shadow: var(--schaduw-lg); text-align: center;
  transform: translateY(14px); transition: transform .22s ease;
}
.overlay.zichtbaar .overlay-kaart { transform: none; }
.overlay-monster { display: grid; place-items: center; }
.overlay-titel { margin: 6px 0 8px; font-size: 24px; font-weight: 800; }
.score-groot { font-size: 30px; letter-spacing: 3px; }
.score-sub { color: var(--tekst-dim); font-size: 15px; margin-top: 8px; }
.overlay-knoppen { display: grid; gap: 10px; margin-top: 20px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(22px + var(--veilig-onder));
  transform: translate(-50%, 14px); z-index: 80;
  background: var(--tekst); color: #fff;
  padding: 13px 20px; border-radius: 999px; font-weight: 700; font-size: 15px;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  max-width: calc(100% - 32px);
}
.toast.zichtbaar { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Effecten ---------- */

.fx-laag { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti {
  position: absolute; width: 11px; height: 15px; border-radius: 3px;
  animation: confetti-val 1.5s ease-out forwards;
}
@keyframes confetti-val {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) * -1 + 260px)) rotate(var(--rot)); opacity: 0; }
}
.bel {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.92), rgba(220,210,238,.34));
  border: 1px solid rgba(255,255,255,.7);
  animation: bel-op 3s ease-in forwards;
}
@keyframes bel-op {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  15%  { opacity: .95; }
  100% { transform: translate(var(--zij), -105vh) scale(1); opacity: 0; }
}
.ster-vlucht {
  position: absolute; font-size: 30px; transform: translate(-50%, -50%);
  animation: ster-op 1.4s ease-out forwards;
}
@keyframes ster-op {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -190%) scale(.85); opacity: 0; }
}

/* ---------- Monster-animaties ---------- */

.lmd-arm-l { animation: klap-l .5s ease-in-out infinite alternate; }
.lmd-arm-r { animation: klap-r .5s ease-in-out infinite alternate; }
@keyframes klap-l { to { transform: translateX(7px); } }
@keyframes klap-r { to { transform: translateX(-7px); } }
.lmd-arm-zwaai { animation: zwaai .7s ease-in-out infinite alternate; }
@keyframes zwaai { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.lmd-arm-wijs { animation: wijs 1.1s ease-in-out infinite alternate; }
@keyframes wijs { from { transform: translateX(0); } to { transform: translateX(5px); } }

/* ---------- Voor ouders ---------- */

/* Voor ouders: een eigen vak onderaan de dorpskaart, in dezelfde stijl als de
   oefenknoppen. Bewust niet zwevend — dat lag over de tegels heen en zei niet
   waar het voor was. Het blijft wel rustig van kleur, zodat het niet met de
   huisjes concurreert om de aandacht van een kind. */
.ouder-vak {
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 76px; margin-top: 20px; padding: 12px 18px;
  border-radius: var(--rond);
  background: var(--kaart-2); border: 2px solid var(--rand);
  text-align: left; color: var(--tekst-dim);
  /* Zonder dit opent iOS zijn eigen menu bij lang drukken. */
  touch-action: none; -webkit-touch-callout: none;
}
.ouder-vak:active { transform: translateY(1px); }
.ouder-vak-icoon {
  position: relative; flex: none;
  width: 48px; height: 48px; display: grid; place-items: center; font-size: 22px;
}
.ouder-vak-tekst { display: flex; flex-direction: column; gap: 2px; }
.ouder-vak-tekst b { font-size: 16px; color: var(--tekst); }
.ouder-vak-tekst small { font-size: 13px; }

/* De ring loopt vol terwijl je vasthoudt. */
.houd-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.houd-vulling {
  fill: none; stroke: var(--lila-diep); stroke-width: 3.5; stroke-linecap: round;
}

.ouder-blok {
  background: var(--kaart); border: 2px solid var(--rand); border-radius: var(--rond);
  padding: 18px; margin-bottom: 14px; box-shadow: var(--schaduw);
}
.ouder-blok h3 { margin: 0 0 12px; font-size: 17px; }
.ouder-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.ouder-cel {
  display: grid; place-items: center; gap: 2px; padding: 9px 4px;
  border-radius: 12px; background: var(--kaart-2); font-size: 12px;
}
.ouder-cel .letter-svg { color: var(--lila-diep); }
.ouder-cel .cel-sterren { font-size: 10px; letter-spacing: 1px; }
.ouder-cel .cel-info { color: var(--tekst-vaag); font-size: 11px; }
.ouder-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--rand); min-height: var(--raak);
}
.ouder-rij:first-of-type { border-top: none; }
.ouder-rij select, .ouder-rij button.mini {
  min-height: 44px; padding: 8px 14px; border-radius: 12px;
  border: 2px solid var(--rand); background: var(--kaart-2); font-weight: 700;
}
.balk { height: 10px; border-radius: 999px; background: var(--kaart-2); overflow: hidden; margin-top: 8px; }
.balk span { display: block; height: 100%; background: var(--lila-diep); }
.ouder-hint { color: var(--tekst-dim); font-size: 14px; margin: 6px 0 0; }

/* ---------- Rustige weergave ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Een klank met twee tekens (ei, oe, aa) toont beide letters naast elkaar. */
.klank-letters { display: inline-flex; align-items: center; gap: 1px; }

/* Klankregelaar in het ouderscherm: horen wat de stem zegt en het bijstellen. */
.klank-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px;
  margin-bottom: 14px;
}
.klank-rij { display: flex; align-items: center; gap: 8px; }
.klank-speel {
  flex: none; min-width: 72px; min-height: 44px;
  border-radius: 12px; border: 2px solid var(--rand);
  background: var(--lila); font-weight: 800;
}
.klank-speel:active { transform: scale(0.96); }
.klank-tekst {
  flex: 1; min-width: 0; min-height: 44px;
  padding: 8px 12px; border-radius: 12px;
  border: 2px solid var(--rand); background: var(--kaart-2);
  font: inherit; font-size: 15px;
}

/* Een woord dat uit de getekende letters is opgebouwd. inline-flex met de
   letters op één lijn; de spatie is een echte tussenruimte en geen letter. */
.woord-svg { display: inline-flex; align-items: baseline; gap: 1px; vertical-align: -0.18em; }
.woord-svg .letter-svg { display: block; }
.woord-svg-spatie { display: inline-block; width: 0.42em; }
.woord-svg-rest { display: inline-block; }
.huisje-naam { margin-top: 2px; color: var(--tekst-dim); }
.huisje-naam-groot { display: inline-flex; }

/* Het monster houdt zijn hand aan het oor en wiegt zachtjes: "ik luister". */
.lmd-arm-oor { animation: oor-wieg 1.4s ease-in-out infinite alternate; }
@keyframes oor-wieg { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }

/* ---------- Onthaal: de letter groot in beeld ---------- */

.onthaal { display: grid; place-items: center; gap: 10px; text-align: center; }
.onthaal-letter { color: var(--lila-diep); line-height: 0; }
.onthaal-letter .letter-svg { height: min(38vh, 260px); width: auto; }
.onthaal-tekst { min-height: 34px; }
.onthaal-vraag { font-size: 22px; font-weight: 800; color: var(--tekst-dim); }
.onthaal-monster { line-height: 0; }
.onthaal-knoppen {
  display: grid; gap: 10px; width: 100%; max-width: 340px;
  padding-bottom: calc(12px + var(--veilig-onder));
}

/* De knop "Gezegd!" met een ring die volloopt: het kind ziet dat er op hem
   gewacht wordt, zonder aftellende cijfers die hij toch niet leest en die er
   tijdsdruk van zouden maken. */
.onthaal-klaar { position: relative; overflow: hidden; }
.luisterring {
  position: absolute; inset: 0;
  background: rgba(156, 140, 196, 0.28);
  transform-origin: left center;
  animation: luister-vul 4.2s linear forwards;
}
@keyframes luister-vul { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.onthaal-klaar > span:last-child { position: relative; }