@import url("tokens.css");

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--room);
  color:var(--inkt);
  font-family:var(--lees);
  font-size:16px;
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
}
:focus-visible{outline:4px solid var(--druif);outline-offset:3px;border-radius:8px}
button{font-family:inherit;cursor:pointer;color:inherit}
[hidden]{display:none !important}

/* het eiland waar alles op staat */
#krabbels{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;display:block;
}
/* los drijvend speelgoed erboven, met een eigen zweefje */
#zwevers{position:fixed;inset:0;pointer-events:none;z-index:0}
.zweeflaag > *{position:absolute;opacity:.62}
/* dezelfde sfeer, maar dan binnen een spelbord */
.sfeervlak{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  border-radius:calc(var(--radius) - 3px);
}
.sfeervlak > *{opacity:.5}

.wrap{
  position:relative;z-index:1;
  max-width:1160px;margin:0 auto;
  /* Op een laag venster is lucht boven en onder de bladzijde het eerste wat
     mag wijken; daaronder staan de knoppen waar het kind op moet tikken. */
  padding-inline:16px;padding-block:clamp(12px,3vh,30px) clamp(16px,6vh,60px);
  display:flex;flex-direction:column;gap:var(--stap);
}

/* ---------- sticker ---------- */
.sticker{
  background:var(--papier);
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius);
  box-shadow:var(--schaduw);
}

/* ---------- bolling op de schil ---------- */

/* De inhoud van het spel is rond geworden: de figuren, de voorwerpen en de
   schatkaart hebben een lichtzijde en een schaduwzijde. De schil bleef plat, en
   dat ging wringen. Dit legt er dezelfde bolling overheen, met dezelfde
   lichtrichting: licht aan de bovenkant, een vleugje schaduw onderaan.

   Het gaat om een aparte laag en niet om een achtergrondverloop, want veel van
   deze elementen wisselen van achtergrondkleur (een actieve tegel, een knop in
   de kleur van het eiland). Een aparte laag overleeft dat.

   z-index -1 met isolation: de laag komt boven de eigen achtergrond maar onder
   de tekst en de iconen. */
.kaart, .sticker, .spelkaart, .knop, .icoon, .terug, .tel,
.weekstrip, .eilandkiezer, .eiland, .keuze, .merkblok, .kindrij{
  position:relative;
  isolation:isolate;
}
.kaart::before, .sticker::before, .spelkaart::before, .knop::before,
.icoon::before, .terug::before, .tel::before, .weekstrip::before,
.eilandkiezer::before, .eiland::before, .keuze::before, .merkblok::before,
.kindrij::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.70) 0%,
    rgba(255,255,255,.10) 38%,
    rgba(255,255,255,0) 62%,
    rgba(36,31,26,.07) 100%
  );
}
/* knoppen mogen iets voller, die moeten eruitzien alsof je ze indrukt */
.knop::before,.icoon::before,.terug::before,.eiland::before{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.18) 34%,
    rgba(255,255,255,0) 58%,
    rgba(36,31,26,.10) 100%
  );
}
/* en ingedrukt keert het licht om, anders voelt de klik nergens naar */
.knop:active::before,.icoon:active::before,.terug:active::before,.eiland:active::before{
  background:linear-gradient(
    180deg,
    rgba(36,31,26,.12) 0%,
    rgba(255,255,255,0) 46%,
    rgba(255,255,255,.34) 100%
  );
}

/* ---------- kop ---------- */
.kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.terug{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--papier);border:var(--lijn) solid var(--inkt);
  border-radius:999px;box-shadow:4px 4px 0 var(--inkt);
  font-size:15px;font-weight:700;padding:9px 16px 9px 12px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.terug:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--inkt)}
.terug:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--inkt)}

.merk{
  font-family:var(--display);
  font-size:clamp(30px,5.2vw,46px);
  line-height:.95;margin:0;flex:1 1 auto;
  letter-spacing:.01em;
  text-wrap:balance;
}
.merk .merkblok{
  display:inline-block;
  background:var(--zon);
  border:var(--lijn) solid var(--inkt);
  border-radius:10px;
  padding:2px 12px 4px;
  transform:rotate(-2deg);
  box-shadow:4px 4px 0 var(--inkt);
}
.merk .naam{display:inline-block;color:var(--koraal);transform:rotate(1.5deg);margin-left:14px}

.tel{
  display:flex;align-items:center;gap:8px;
  background:var(--papier);
  border:var(--lijn) solid var(--inkt);
  border-radius:999px;
  box-shadow:4px 4px 0 var(--inkt);
  padding:7px 16px 7px 12px;
  font-variant-numeric:tabular-nums;
  font-family:var(--display);font-size:20px;line-height:1;
}
.tel.stenen{background:#e9f8f0}
.tel.sterren{background:#fff2cd}

.knopjes{display:flex;gap:8px}
.icoon{
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--papier);border:var(--lijn) solid var(--inkt);
  border-radius:14px;box-shadow:4px 4px 0 var(--inkt);padding:0;
  transition:transform .12s ease,box-shadow .12s ease;
}
.icoon:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--inkt)}
.icoon:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--inkt)}
.icoon[aria-pressed="false"]{background:var(--room-warm);opacity:.6}

/* ---------- schermen ---------- */
.scherm{display:none;flex-direction:column;gap:var(--stap)}
.scherm.aan{display:flex}

/* ---------- kaarten ---------- */
.kaart{
  background:var(--papier);
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius);
  box-shadow:var(--schaduw);
  padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0;
}
.kaart h3{
  font-family:var(--display);font-size:26px;margin:0;line-height:1.05;
}
.kaart p{margin:0;font-size:14.5px;color:var(--inkt-zacht)}

.blok{
  display:inline-block;
  border:var(--lijn) solid var(--inkt);
  border-radius:9px;padding:1px 11px 3px;
  box-shadow:3px 3px 0 var(--inkt);
}
.blok.zon{background:var(--zon)}
.blok.zee{background:var(--zee);color:var(--papier)}
.blok.palm{background:var(--palm);color:var(--papier)}
.blok.koraal{background:var(--koraal);color:var(--papier)}
.blok.druif{background:var(--druif);color:var(--papier)}

.knop{
  border:var(--lijn) solid var(--inkt);
  background:var(--papier);
  font-family:var(--display);font-size:18px;letter-spacing:.01em;
  padding:10px 20px 12px;border-radius:14px;
  box-shadow:4px 4px 0 var(--inkt);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.knop:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--inkt)}
.knop:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--inkt)}
.knop.vol{background:var(--zon)}
.knop.blauw{background:var(--zee);color:var(--papier)}
/* Ook de kleine knop blijft een kinderknop: 44 punten is de ondergrens waar een
   vinger van vijf nog op mikt, en met 8 en 10 punten voering kwam hij op 42. */
.knop.klein{font-size:15px;padding:8px 15px 10px;border-radius:12px;min-height:44px}
.knop:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.werkbalk{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- hub ---------- */
.intro{
  margin:0;max-width:56ch;font-size:17px;font-weight:700;
}
.spellen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.spelkaart{
  text-align:left;
  background:var(--papier);
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius);
  box-shadow:var(--schaduw);
  padding:18px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .16s ease,box-shadow .16s ease;
}
.spelkaart:nth-child(2){transform:rotate(-1deg)}
.spelkaart:nth-child(3){transform:rotate(.8deg)}
.spelkaart:nth-child(4){transform:rotate(-.6deg)}
.spelkaart:nth-child(5){transform:rotate(1deg)}
.spelkaart:hover{transform:translate(-3px,-3px) rotate(0deg);box-shadow:var(--schaduw-op)}
.spelkaart[data-klaar="nee"]{cursor:default;background:var(--room-warm);opacity:.72}
.spelkaart[data-klaar="nee"]:hover{transform:none;box-shadow:var(--schaduw)}
.spelkaart svg.beeld{display:block;width:100%;height:96px}
.spelkaart h3{font-family:var(--display);font-size:27px;margin:0;line-height:1.02}
.spelkaart p{margin:0;font-size:14.5px;color:var(--inkt-zacht)}

.spelkaart.eilandkaart{
  grid-column:1/-1;
  background:var(--papier);
  padding:0;overflow:hidden;gap:0;transform:none;
}
.spelkaart.eilandkaart:hover{transform:translate(-3px,-3px)}
.spelkaart.eilandkaart svg.eilandbeeld{
  display:block;width:100%;height:auto;
  border-bottom:var(--lijn) solid var(--inkt);
}
.spelkaart.eilandkaart .binnen{
  padding:18px;display:flex;flex-direction:column;gap:11px;
}
.spelkaart.eilandkaart h3{font-size:34px}
.spelkaart.eilandkaart p{color:var(--inkt);font-weight:700;max-width:64ch}

.balk{
  height:14px;border-radius:99px;background:var(--room-warm);
  border:2.5px solid var(--inkt);overflow:hidden;
}
.balk i{display:block;height:100%;transition:width .45s ease}
.kaartvoet{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
}
.kaartvoet .heen{font-family:var(--display);font-size:17px}
.later{
  align-self:flex-start;font-family:var(--display);font-size:14px;letter-spacing:.04em;
  background:var(--room-diep);border:2.5px solid var(--inkt);border-radius:99px;
  padding:2px 12px 4px;
}

/* ---------- tekenspel ---------- */
.vlak{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:var(--stap);align-items:start}
/* Het zoekspel en het speelveld willen een breder bord dan het zijpaneel.
   Als klasse en niet als style-attribuut, want inline wint van de media-query
   hieronder en dan blijven de twee kolommen ook op een telefoon naast elkaar. */
.vlak.breed{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.vlak.breder{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
/* Het speelscherm en het zoekspel hebben geen tweede kaart: hun 'waarom dit
   helpt' staat verborgen in de eerste en wordt alleen uitgelezen voor de
   uitlegdialoog. De tweede kolom bleef daardoor leeg strand, en boven 1100
   punten breed werd het bord er kleiner van dan op een smaller scherm: 613 bij
   458 op 1180 tegen 944 bij 707 op 1024. Eén kind, één kolom. */
.vlak:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.opdracht{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.opdracht h2{font-family:var(--display);font-size:30px;margin:0;line-height:1.04}
.trap{
  font-family:var(--display);font-size:15px;letter-spacing:.02em;
  background:var(--room-warm);border:2.5px solid var(--inkt);border-radius:99px;
  padding:2px 12px 4px;white-space:nowrap;
}
.aanwijzing{margin:0;font-size:15.5px;min-height:3.1em;color:var(--inkt)}
.aanwijzing b{font-weight:700}

/* Het schoolbord in een houten lijst. Het is vierkant, dus begrenst dezelfde
   ruimtemaat als bij het speelveld hier de breedte rechtstreeks: op 1024 bij
   768 stond de knop Klaar anders 148 punten onder de onderrand, en over het
   bord vegen schuift de bladzijde niet mee omdat daar getekend wordt. */
.bordhouder{
  position:relative;width:100%;max-width:min(470px, var(--bordruimte));
  margin-inline:auto;
  aspect-ratio:1/1;
  container:veld / size;
  background:var(--bord);
  border:11px solid var(--hout);
  border-radius:16px;
  box-shadow:0 0 0 3px var(--inkt), var(--schaduw);
  overflow:hidden;
}
canvas.tekenbord{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}

/* Op een telefoon is de bladzijde hoger dan het scherm, en een kind van vijf
   scrolt niet: de knop Klaar stond 33 tot 69 punten onder de onderrand. Hoeveel
   precies hing af van de zin bij de vorm, want die loopt van één regel tot vijf.
   De ruimte komt van de rij vormtegels, want daar wordt niet op getekend. Die
   stond op twee regels van 94 punten; smaller en lager passen de vijf vormen op
   één regel van 74, en blijft een tegel met 58 bij 74 punten ruim boven het
   tikdoel van 44. Het tekenbord houdt zo zijn hele maat.
   De bovengrens die met de vensterhoogte meerekent is het vangnet daaronder:
   op een smallere telefoon, of als de tegels ooit toch omvouwen, wijkt het bord
   voordat de knop onder de rand zakt. 520 punten is wat er op 390 bij 844 boven
   en onder het bord staat met de langste zin die er is, plus wat lucht: op die
   twee telefoonmaten raakt de grens het bord dus niet. De ondergrens van 220
   punten is voor een telefoon die ligt: daaronder valt er niet meer op te
   tekenen en mag de bladzijde weer schuiven. */
@media (max-width:560px){
  .bordhouder{max-width:min(470px, var(--bordruimte), max(220px, calc(100dvh - 520px)))}
  #tekenstrook{gap:8px}
  #tekenstrook .keuze{padding:6px 4px 5px;gap:3px;min-width:58px}
  #tekenstrook .keuze svg.vorm{width:28px;height:28px}
  #tekenstrook .keuze .letter{font-size:25px}
  #tekenstrook .keuze b{font-size:11.5px}
  #tekenstrook .puntjes i{width:7px;height:7px}
}

/* Onder de 420 punten breed vouwde de rij vormen alsnog om: vijf tegels van
   58 tot 80 vragen met hun tussenruimte 348 punten en er is er 288. Die
   tweede regel kostte 82 punten hoogte en duwde de knop Klaar op een
   Androidtelefoon van 360 bij 740 weer 42 punten onder de rand, terwijl het
   bord daar al op zijn ondergrens van 220 stond en dus niets meer kon wijken.
   Het label onder het plaatje is wat de tegel breed maakt, niet het plaatje
   zelf: kleiner gezet passen de vijf wel op één regel. Een kind van vijf leest
   dat woord toch niet, ze kijkt naar de vorm.
   Dit geldt voor de reeks vormen, en alleen daarvoor. De reeks vormen telt
   altijd vijf tegels en de reeks cijfers altijd tien, maar de reeks letters
   telt de verschillende letters uit HAAR NAAM en is dus niet elke keer even
   lang: bij Fien vier, bij Charlotte acht, en omdat de naam op twaalf tekens
   wordt afgekapt hooguit twaalf.
   Nagemeten op 360 bij 740, waar de rij 328 punten breed is: vormen vijf tegels
   van 48 bij 68 op één regel; letters van 48 bij 46 tot en met zes tegels op
   één regel en vanaf zeven op twee; cijfers tien van 48 bij 46 op TWEE regels —
   tien tegels van 48 vragen met hun tussenruimte 525 punten, dus daar is geen
   maat die ze op één regel krijgt zonder onder het tikdoel van 44 te zakken.
   Die tweede regel hoort er dus bij: in de cijferreeks altijd, in de
   letterreeks zodra haar naam zeven verschillende letters heeft. Elke tegel
   blijft met 46 punten hoogte boven het tikdoel.
   Ligt de telefoon van 932 bij 430, dan is de rij 900 punten breed en staan
   vormen en cijfers op één regel, met tegels van 70 bij 72 en 70 bij 50; de
   letterreeks past daar tot en met elf tegels op één regel en vouwt bij twaalf
   om. Wat die tweede regel aan hoogte kost, wordt hieronder bij de kopregel
   terugverdiend. */
/* De kop nam op een telefoon van 360 punten breed drie regels en 151 punten
   hoogte: een vijfde van het scherm nog voor het spel begint. In de reeks
   cijfers stond de knop Klaar daardoor 19 tot 40 punten onder de rand,
   terwijl het tekenbord daar al op zijn ondergrens van 220 stond en dus niets
   meer kon wijken. Kleiner gezet past de merknaam naast de terugknop en passen
   de tellers naast de knopjes, en blijft het bij twee regels. De terugknop
   houdt zijn tikdoel van 44 punten; de tellers zijn geen knop. */
@media (max-width:420px){
  .kop{gap:8px}
  .merk{font-size:24px}
  .merk .naam{margin-left:8px}
  .terug{font-size:13px;padding:9px 13px 9px 10px;min-height:44px}
  .tel{font-size:17px;padding:5px 12px 5px 9px;gap:6px}
  .tel svg{width:15px;height:15px}

  /* En binnen een spel gaat de merkregel er helemaal af. Kleiner gezet bleef
     hij op 360 bij 740 nog 39 punten hoog en maakte hij de kop drie regels van
     samen 145, en met haar naam erachter brak hij alsnog in tweeën en werd dat
     173. Daardoor stond de knop Klaar in de reeks cijfers 13 punten onder de
     onderrand, met een langere naam 42, en in de reeks letters vanaf zeven
     tegels 22 tot 42 — terwijl het bord daar al op zijn ondergrens van 220
     stond en dus niets meer kon wijken. Zonder die regel wordt de kop 98
     punten en staat Klaar op 360 bij 740 weer 33 tot 98 punten BOVEN de
     onderrand, hoe lang haar naam ook is.
     Op een spelscherm is de merknaam het enige in de kop waar niet op getikt
     wordt en wat nergens wordt uitgesproken; welk spel het is staat in de kop
     van de kaart eronder, en haar naam hoort ze van Knor. Op de spelkeuze
     blijft de merkregel staan: daar is hij de titel van de bladzijde en staat
     er geen knop onderaan die eronder kan zakken. De terugknop is er alleen
     buiten de spelkeuze en verklapt dus waar we zijn.
     Hij gaat wel van het scherm en niet uit de bladzijde: een voorleesprogramma
     leest de kop van de bladzijde nog steeds voor, en dat is de enige h1 die er
     is. */
  .kop:has(#terugknop:not([hidden])) .merk{
    position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .kop:has(#terugknop:not([hidden])) #stenentel{margin-left:auto}

  /* En dan de rij waar Klaar in staat. Die hield het zelf niet heel: "Kijk hoe
     het gaat" brak de rij in tweeën en de tweede regel, met Opnieuw erop,
     eindigde op 360 bij 740 24 punten onder de onderrand. Klaar stond er dus
     wel, de twee knoppen ernaast niet, en ze horen bij elkaar.
     Dezelfde ingreep als op een liggend venster verderop: een knop mag smaller
     zijn dan zijn zin lang is, dan breekt het woord in plaats van de rij. Drie
     knoppen die elk hooguit een derde pakken passen zo naast elkaar: 64, 87 en
     91 punten breed en alle drie 55 hoog, dus ruim boven het tikdoel van 44.
     De hele rij staat daarmee op 360 bij 740 25 tot 90 punten boven de
     onderrand, in alle drie de reeksen en bij elke naamlengte. */
  #scherm-teken > .vlak > .kaart:not(#t-zijpaneel) > .werkbalk{gap:8px}
  #scherm-teken > .vlak > .kaart:not(#t-zijpaneel) > .werkbalk .knop{
    font-size:15px;padding:8px 12px 10px;border-radius:12px;min-height:44px;
    max-width:calc((100% - 16px) / 3);
    text-align:center;line-height:1.1;
  }
}

@media (max-width:420px){
  #tekenstrook{gap:5px}
  #tekenstrook .keuze{min-width:48px;padding:5px 3px 4px}
  #tekenstrook .keuze b{font-size:9.5px}
  #tekenstrook .keuze svg.vorm{width:26px;height:26px}
  #tekenstrook .keuze .letter{font-size:23px}
}

/* Het zijpaneel met de route over het eiland staat onder de kaart zodra de
   bladzijde één kolom is, en het plaatje erin is dan zo breed als de bladzijde
   en daarmee tot 619 punten hoog. Daardoor stond de knop naar het schateiland
   409 tot 1018 punten onder de onderrand: op geen enkele telefoon of tablet in
   beeld, en een kind van vijf scrolt niet.
   Naast elkaar is het plaatje kleiner maar nog goed te zien, en de knop komt
   direct onder de kop in plaats van onder het hele plaatje. De zin eronder is
   het enige dat van plaats wisselt met de knop; die zin is uitleg voor wie
   leest, en de knop is waar het kind op tikt. */
@media (max-width:1100px){
  #t-zijpaneel{
    display:grid;
    grid-template-columns:clamp(120px,30%,230px) minmax(0,1fr);
    grid-template-areas:"beeld kop" "beeld knop" "tekst tekst";
    grid-template-rows:auto auto auto;
    column-gap:14px;align-content:start;
  }
  #t-zijkop{grid-area:kop;align-self:start}
  #t-zijtekst{grid-area:tekst}
  #t-zijbeeld{grid-area:beeld;align-self:start}
  #t-zijpaneel .werkbalk{grid-area:knop;align-self:start}
}

/* Op een telefoon houdt de rechterkolom van dat paneel nog 152 punten over en
   daarin brak de kop in vier regels, wat de knop eronder weer 50 punten liet
   zakken. De kop is een bijschrift bij het plaatje, geen opdracht; kleiner
   gezet past hij in drie regels. */
@media (max-width:560px){
  #t-zijkop{font-size:19px}
}

.strook{display:flex;gap:10px;flex-wrap:wrap}
.keuze{
  background:var(--papier);border:var(--lijn) solid var(--inkt);
  border-radius:16px;box-shadow:4px 4px 0 var(--inkt);
  padding:9px 8px 8px;min-width:70px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:transform .13s ease,box-shadow .13s ease,background .13s ease;
}
.keuze:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--inkt)}
.keuze[data-actief="ja"]{background:var(--zon)}
.keuze[data-slot="dicht"]{background:var(--room-warm);opacity:.55;cursor:not-allowed}
.keuze[data-slot="dicht"]:hover{transform:none;box-shadow:4px 4px 0 var(--inkt)}
.keuze svg.vorm{display:block;width:34px;height:34px}
.keuze .letter{font-family:var(--display);font-size:30px;line-height:1;padding:0 6px}
.keuze b{font-size:12.5px;font-weight:700}
.puntjes{display:flex;gap:4px}
.puntjes i{
  width:9px;height:9px;border-radius:50%;display:block;
  background:var(--room-warm);border:2px solid var(--inkt);
}
.puntjes i.vol{background:var(--koraal)}
.keuze[data-actief="ja"] .puntjes i{background:rgba(255,255,255,.65)}
.keuze[data-actief="ja"] .puntjes i.vol{background:var(--koraal)}

/* ---------- juichscherm ----------
   Het juichscherm ligt als laag over het speelveld, en dat veld heeft
   overflow:hidden. Wat er niet in past is dus niet afgesneden maar spoorloos,
   inclusief de knop waarop het kind moet tikken. Daarom staat hier niets in
   vaste punten: elke maat rekent mee met de hoogte van het veld zelf (cqh),
   dat als container is aangemeld bij .speelveld, .zoekveld en .bordhouder.
   De knop is de ondergrens; die houdt zijn 44 punten, de rest wijkt. */
.juich{
  position:absolute;inset:0;display:none;place-items:center;
  background:rgba(31,58,50,.93);text-align:center;
  padding:22px;padding:clamp(8px,3cqh,22px);
}
.juich.aan{display:grid}
.sterrenrij{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
.juich p{
  font-family:var(--display);font-size:34px;margin:0 0 8px;line-height:1.05;
  color:var(--zon);
}
.juich small{
  display:block;font-size:15px;color:var(--krijt);opacity:.82;
  margin:0 auto 18px;max-width:32ch;
}

/* De vijf delen staan in een raster met namen, zodat ze op een laag veld naast
   elkaar kunnen zonder dat de volgorde in de bladzijde verandert. */
.juich.aan > div{
  display:grid;justify-items:center;align-content:center;
  grid-template-areas:"knor" "sterren" "kop" "sub" "knop";
  gap:clamp(3px,1.8cqh,12px);
  width:100%;max-width:100%;max-height:100%;
}
.juich.aan > div > canvas{grid-area:knor}
.juich.aan > div > .sterrenrij{grid-area:sterren;margin:0;gap:clamp(4px,1.6cqw,10px)}
.juich.aan > div > p{grid-area:kop;margin:0;font-size:clamp(19px,9cqh,34px)}
.juich.aan > div > small{grid-area:sub;margin:0;font-size:clamp(12.5px,3.4cqh,15px)}
.juich.aan > div > .knop{grid-area:knop;min-height:44px}
.juich .sterrenrij svg{width:min(32px,9cqh);height:auto}

/* Onder de 340 punten veldhoogte gaat de mascotte naast de sterren en de kop
   staan. Zo houdt een telefoon in staande stand, waar het veld maar 239 punten
   hoog is, nog altijd ruimte voor de knop. */
@container veld (max-height:340px){
  .juich.aan > div{
    grid-template-areas:"knor sterren" "knor kop" "sub sub" "knop knop";
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
  }
  .juich.aan > div > small{max-width:none}
}

/* ---------- zoekspel: de zandbak ---------- */
.zoekveld{
  position:relative;width:100%;aspect-ratio:4/3;
  max-width:var(--veldbreed);margin-inline:auto;
  container:veld / size;
  border-radius:var(--radius);
  background:var(--zand);
  border:var(--lijn) solid var(--inkt);
  box-shadow:var(--schaduw);
  overflow:hidden;
}
/* Alleen het zoekbord zelf vult de bak. Zonder het teken > pakte deze regel ook
   het canvas van de mascotte in de juichlaag, dat daarmee 100% bij 100% werd. */
.zoekveld > canvas{display:block;width:100%;height:100%;touch-action:manipulation;cursor:pointer}
.zoekveld .juich{background:rgba(36,31,26,.9)}
/* Wrap, want het aantal stipjes staat niet vast: "Noem ze allemaal" zet er
   vijftien neer en die vroegen op één regel 474 punten. Op een telefoon van
   360 punten breed paste de bladzijde daardoor niet meer in de breedte en
   zoomde de browser het hele scherm uit tot 71 procent — alles kleiner, ook
   elk tikdoel, zonder dat er iets zichtbaar buiten de rand stak. */
.ronde{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ronde i{
  width:26px;height:11px;border-radius:99px;display:block;
  background:var(--room-warm);border:2.5px solid var(--inkt);
}
.ronde i.vol{background:var(--palm)}

/* ---------- schateiland ---------- */
.eilandvel{
  position:relative;width:100%;
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius);
  box-shadow:var(--schaduw);
  overflow:hidden;background:#8fd0f2;
}
/* De kaart rekende alleen met de breedte mee. Op elke liggende maat liep hij
   daardoor het venster uit en stonden de drie knoppen eronder buiten beeld:
   335 punten op 932 bij 430, en nog 324 op 1024 bij 768. Met de bouwbalk erbij
   — die staat er zodra een volle zegelkaart iets te bouwen geeft — werd dat
   490. Een kaart is mooi, maar de knop eronder is hoe je hier wegkomt.
   De kaart houdt zijn verhouding (1200 bij 760) en krijgt een bovengrens die
   met de vensterhoogte meerekent; wat eronder staat past daar precies in.
   De 400 punten zijn kop, randen, tussenruimte en de knoppenbalk, nagemeten op
   1024 bij 768; de 585 zijn diezelfde plus de bouwbalk in zijn kleine maat. De ondergrens
   houdt er een kaart over waar nog op te tikken valt. */
.eilandvel canvas{
  display:block;margin-inline:auto;touch-action:none;cursor:grab;
  width:auto;height:auto;max-width:100%;
  max-height:max(200px, calc(100dvh - 400px));
}
#scherm-eiland:has(#bouwbalk:not([hidden])) .eilandvel canvas{
  max-height:max(150px, calc(100dvh - 585px));
}

/* Ligt het venster en is het laag, dan gaat de kaart náást de knoppen staan.
   Onder elkaar bleef er op 932 bij 430 een kaart van 160 punten over — een
   handpalm groot op een scherm van 932 breed — en stonden de drie knoppen
   alsnog 84 punten onder de rand: de zin, de knoppenrij en de bouwbalk vragen
   samen 256 punten en er is er 361. Naast elkaar heeft de kaart 472 bij 299 en
   past alles, want de breedte stond toch leeg. Dezelfde ingreep als bij het
   speelveld en het tekenbord verderop in dit bestand. */
@media (max-height:560px) and (min-aspect-ratio:5/4){
  /* .aan erbij, anders wint dit nummerteken van .scherm{display:none} en staat
     het schateiland op elk ander scherm mee in de bladzijde. */
  #scherm-eiland.aan{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(330px,420px);
    grid-template-areas:"kaart voet" "kaart bouw";
    grid-template-rows:auto auto;
    gap:var(--stap);align-items:start;
  }
  #scherm-eiland > .eilandvel{grid-area:kaart}
  /* stretch en geen flex-start: anders krimpt de knoppenbalk tot de breedte
     van haar langste knop en komen de drie onder elkaar te staan, 167 punten
     hoog in plaats van 108. */
  #scherm-eiland > .eilandvoet{
    grid-area:voet;flex-direction:column;align-items:stretch;gap:8px;
  }
  #scherm-eiland > .bouwbalk{grid-area:bouw}
  /* De zin is uitleg voor wie meeleest; Knor zegt hem ook hardop. In een
     kolom van 420 punten neemt hij op zijn oude maat vier regels. */
  #scherm-eiland .eilandtekst{font-size:14px}
  /* Twee knoppen naast elkaar in plaats van elk op een eigen regel; het
     tikdoel blijft 44 punten hoog. */
  #scherm-eiland .eilandvoet .knop{font-size:15px;padding:8px 14px 10px;min-height:44px}
  /* De bouwbalk staat hier in zijn kleine maat; die regel staat bij de
     bouwbalk zelf, verderop in dit bestand. */
  /* De kaart mag hier weer groeien: de knoppen staan ernaast en niet eronder. */
  #scherm-eiland .eilandvel canvas,
  #scherm-eiland:has(#bouwbalk:not([hidden])) .eilandvel canvas{
    max-height:calc(100dvh - 130px);
  }
}
.eilandvel canvas.sleept{cursor:grabbing}
.eilandvel[data-kist="vrij"] canvas{cursor:pointer}
.eilandvoet{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.eilandtekst{
  margin:0;font-size:16.5px;max-width:58ch;font-weight:700;
}
.eilandtekst b{
  background:var(--zon);border:2.5px solid var(--inkt);border-radius:8px;
  padding:0 7px 2px;box-shadow:2px 2px 0 var(--inkt);
  display:inline-block;line-height:1.25;
}

/* De schatkamer is de beloning van een week spelen, en de knop onderaan is de
   enige weg eruit. Die stond op een telefoon van 390 bij 844 op 986 punten:
   ruim onder de rand. De rij edelstenen groeit namelijk mee met haar naam —
   vijf vormen plus elke letter erin, dus dertien tegels bij Roosmarijn tegen
   acht bij Ise — en duwde de knop het scherm uit. Een kind van vijf scrolt
   niet: zij zat vast in de kamer die ze net verdiend had.

   De kamer is nu een kolom die nooit hoger wordt dan het venster. De kop, de
   zin en de knop houden hun plek; alleen de rij edelstenen schuift, en dat is
   ook het enige deel dat kan groeien. */
.schatkamer{
  position:fixed;inset:0;z-index:50;display:none;overflow:hidden;
  background:rgba(29,56,80,.96);
  padding:clamp(16px,3vw,32px);
  opacity:0;transition:opacity .35s ease;
}
.schatkamer.aan{display:flex;opacity:1}
.kamerbinnen{
  margin:auto;display:flex;flex-direction:column;gap:16px;align-items:center;
  width:100%;max-width:860px;max-height:100%;text-align:center;
}
.kamerkop,.kamertekst,.kamerbinnen .werkbalk{flex:0 0 auto}
.kamerkop{
  font-family:var(--display);font-size:clamp(30px,5.4vw,50px);
  margin:0;line-height:1;color:var(--inkt);
  background:var(--zon);
  border:var(--lijn) solid var(--inkt);border-radius:14px;
  padding:6px 22px 10px;transform:rotate(-1.6deg);
  box-shadow:6px 6px 0 var(--inkt);
}
.kamertekst{font-size:15.5px;color:#fff;margin:0;max-width:52ch;font-weight:700}
.stenenrek{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(98px,1fr));
  gap:12px;width:100%;max-width:790px;
  /* krimpen mag, groeien ook, maar nooit voorbij de knop eronder */
  flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  /* de schaduw van een tegel valt vier punten naar rechtsonder en werd door de
     eigen overloop afgesneden */
  padding:4px;
}
.steen{
  background:var(--papier);
  border:var(--lijn) solid var(--inkt);
  border-radius:16px;box-shadow:4px 4px 0 var(--inkt);
  padding:9px 6px 7px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.steen:nth-child(odd){transform:rotate(-1.4deg)}
.steen:nth-child(even){transform:rotate(1.2deg)}
.steen canvas{display:block;width:100%;height:auto}
.steen span{font-family:var(--display);font-size:16px}
.steen.leeg{background:var(--room-warm);opacity:.55;box-shadow:none}

/* ---------- dialoog ---------- */
dialog{
  border:var(--lijn) solid var(--inkt);border-radius:var(--radius);
  background:var(--papier);color:var(--inkt);
  box-shadow:8px 8px 0 var(--inkt);
  max-width:680px;width:calc(100% - 32px);padding:0;
}
dialog::backdrop{background:rgba(36,31,26,.62)}
/* De twee vellen voor de volwassene zijn lang: de ouderuitleg is op een
   telefoon van 390 bij 844 ruim achtduizend punten hoog. De knop waarmee je
   hem dichtdoet stond onderaan die lap, op 8128, en kwam dus alleen in beeld
   voor wie eerst alles las. Nu staat hij in een balk die blijft staan; de
   tekst schuift eronderdoor. De proef bewaakt dat: `data-uitgang` moet bij
   elke scrollstand in beeld zijn. */
.dlg{padding:0;display:flex;flex-direction:column;max-height:84vh}
.dlgblad{
  padding:24px;display:flex;flex-direction:column;gap:14px;
  overflow-y:auto;overscroll-behavior:contain;min-height:0;
}
.dlgvoet{
  flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  padding:12px 24px;background:var(--papier);
  border-top:2.5px solid var(--inkt-flauw);
  border-radius:0 0 calc(var(--radius) - 3px) calc(var(--radius) - 3px);
}
.dlg h2{font-family:var(--display);font-size:32px;margin:0;line-height:1.05}
.dlg h4{
  margin:10px 0 0;font-family:var(--display);font-size:19px;
  align-self:flex-start;
  background:var(--room-warm);border:2.5px solid var(--inkt);border-radius:9px;
  padding:1px 11px 3px;box-shadow:3px 3px 0 var(--inkt);
}
.dlg p,.dlg li{font-size:14.5px;margin:0;color:var(--inkt)}
.dlg ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.dlg strong{font-weight:700}
table.norm{width:100%;border-collapse:collapse;font-size:14.5px}
table.norm th,table.norm td{text-align:left;padding:7px 10px;border-bottom:2px solid var(--inkt-flauw)}
table.norm th{font-family:var(--display);font-size:14px;letter-spacing:.03em;border-bottom-color:var(--inkt)}
table.norm td:last-child{text-align:right;font-variant-numeric:tabular-nums}
tr.nu td{background:#fff2cd;font-weight:700}
.naamveld{display:flex;gap:10px;flex-wrap:wrap}
.naamveld input{
  flex:1 1 190px;background:var(--room);
  border:var(--lijn) solid var(--inkt);border-radius:14px;
  color:var(--inkt);font-family:var(--lees);font-size:16px;padding:11px 15px;
}
.naamveld input:focus{background:#fff}

/* Tot 1100px onder elkaar. Op een iPad in liggende stand pakte de uitlegkaart
   de halve breedte en hield het speelbord er 532px van over; die kaart is voor
   de ouder en niet voor het kind, dus die hoort eronder. */
@media (max-width:1100px){
  .vlak,.vlak.breed,.vlak.breder{grid-template-columns:1fr}
  .spelkaart.eilandkaart h3{font-size:28px}
}
@media (max-width:460px){
  :root{--schaduw:4px 4px 0 var(--inkt);--lijn:2.5px}
  .merk{font-size:30px}
  .spellen{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .spelkaart,.keuze,.knop,.icoon,.terug{transform:none !important}
}

/* =====================================================================
   BEWEGING
   Alles hieronder staat uit bij prefers-reduced-motion, zie onderaan.
   ===================================================================== */

@keyframes opkomst{
  0%{opacity:0;transform:translateY(22px) scale(.92)}
  62%{opacity:1;transform:translateY(-5px) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes sterpop{
  0%{transform:scale(0) rotate(-140deg)}
  60%{transform:scale(1.32) rotate(12deg)}
  80%{transform:scale(.92) rotate(-5deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes juichin{
  0%{opacity:0;transform:scale(.55) translateY(24px)}
  65%{opacity:1;transform:scale(1.06) translateY(-6px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes plop{
  0%{transform:scale(1)}
  35%{transform:scale(1.28) rotate(-4deg)}
  70%{transform:scale(.94) rotate(2deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes wiebel{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-2.4deg) translateY(-2px)}
  75%{transform:rotate(2.4deg) translateY(-2px)}
}
@keyframes schud{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-9px) rotate(-2deg)}
  40%{transform:translateX(8px) rotate(2deg)}
  60%{transform:translateX(-6px) rotate(-1deg)}
  80%{transform:translateX(4px)}
}
@keyframes zweef{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-14px) rotate(7deg)}
}
@keyframes schermin{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes pols{
  0%,100%{transform:scale(1);box-shadow:4px 4px 0 var(--inkt)}
  50%{transform:scale(1.05) translate(-2px,-2px);box-shadow:7px 7px 0 var(--inkt)}
}
@keyframes glimglans{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.16)}
}
@keyframes tegelin{
  0%{opacity:0;transform:scale(.4) rotate(-22deg)}
  70%{opacity:1;transform:scale(1.12) rotate(5deg)}
  100%{opacity:1;transform:scale(1) rotate(var(--kanteling,0deg))}
}

/* ---------- de overvaart naar een ander eiland ---------- */
#overvaart{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
#overvaart .zeewand{
  position:absolute;top:0;left:-112%;width:112%;height:100%;
  background:linear-gradient(180deg,var(--zee) 0%,var(--zee-diep) 100%);
  border-right:10px solid #fffaf0;
  display:grid;place-items:center;
}
#overvaart .vaartekst{
  font-family:var(--display);font-size:clamp(24px,4vw,46px);
  color:#fffaf0;text-shadow:4px 4px 0 rgba(0,0,0,.28);margin:0;
  padding-inline:20px;text-align:center;text-wrap:balance;
}
#overvaart .vaarboot{position:absolute;right:-44px;top:38%;width:clamp(70px,9vw,120px);height:auto}
#overvaart.aan .zeewand{animation:overvaart 1.5s cubic-bezier(.55,0,.35,1) both}
#overvaart.aan .vaarboot{animation:dobber 1.5s ease-in-out both}
@keyframes overvaart{
  0%{transform:translateX(0)}
  44%{transform:translateX(100%)}
  58%{transform:translateX(100%)}
  100%{transform:translateX(202%)}
}
@keyframes dobber{
  0%,100%{transform:translateY(0) rotate(-5deg)}
  25%{transform:translateY(-12px) rotate(4deg)}
  50%{transform:translateY(6px) rotate(-3deg)}
  75%{transform:translateY(-8px) rotate(5deg)}
}

/* de sfeer van het eiland: elk soort beweegt anders */
@keyframes dwarrel{
  0%{transform:translate(0,-8vh) rotate(0deg);opacity:0}
  10%{opacity:.7}
  90%{opacity:.7}
  100%{transform:translate(40px,96vh) rotate(240deg);opacity:0}
}
@keyframes opstijgen{
  0%{transform:translate(0,8vh) scale(.6);opacity:0}
  15%{opacity:.75}
  85%{opacity:.55}
  100%{transform:translate(-26px,-92vh) scale(1.05);opacity:0}
}
@keyframes fladder{
  0%{transform:translate(0,0) rotate(-7deg)}
  25%{transform:translate(26px,-20px) rotate(6deg)}
  50%{transform:translate(52px,4px) rotate(-4deg)}
  75%{transform:translate(22px,22px) rotate(7deg)}
  100%{transform:translate(0,0) rotate(-7deg)}
}
@keyframes overvaren{
  0%{transform:translateX(-14vw)}
  100%{transform:translateX(114vw)}
}

/* de achtergrondfiguren zweven rustig rond */
.zweeflaag > *{animation:zweef 7s ease-in-out infinite}
.zweeflaag > *:nth-child(2n){animation-duration:9s;animation-delay:-2s}
.zweeflaag > *:nth-child(3n){animation-duration:11s;animation-delay:-4s}
.zweeflaag > *:nth-child(5n){animation-duration:8s;animation-delay:-1s}

/* Schermen komen op. De vulstand is backwards en niet both: met both bleef de
   eindstand transform:translateY(0) na afloop op het scherm staan, en een
   voorouder met een transform wordt inperkingsblok voor alles wat position
   fixed is. Daardoor werd het groot bekijken in het tekenboek, dat inset:0
   vraagt, afgeknipt op de hoogte van het albumpaneel en waren de knoppen
   Eerder, Later en Terug niet meer aan te tikken. Zonder forwards valt het
   scherm na de animatie terug op zijn gewone stand, die er precies zo uitziet. */
.scherm.aan{animation:schermin .34s ease-out backwards}

/* spelkaarten komen na elkaar op */
.spelkaart{animation:opkomst .46s cubic-bezier(.2,.9,.3,1.2) both}
.spelkaart:nth-child(1){animation-delay:.02s}
.spelkaart:nth-child(2){animation-delay:.09s}
.spelkaart:nth-child(3){animation-delay:.15s}
.spelkaart:nth-child(4){animation-delay:.21s}
.spelkaart:nth-child(5){animation-delay:.27s}
.spelkaart:nth-child(6){animation-delay:.33s}

/* keuzetegels ook */
.keuze{animation:opkomst .34s cubic-bezier(.2,.9,.3,1.2) both}
.keuze:nth-child(2){animation-delay:.05s}
.keuze:nth-child(3){animation-delay:.1s}
.keuze:nth-child(4){animation-delay:.15s}
.keuze:nth-child(5){animation-delay:.2s}
.keuze[data-actief="ja"]{animation:opkomst .34s cubic-bezier(.2,.9,.3,1.2) both, glimglans 2.4s ease-in-out 1s infinite}

/* het juichscherm */
.juich.aan > div{animation:juichin .5s cubic-bezier(.2,.9,.3,1.3) both}
.sterrenrij svg{animation:sterpop .58s cubic-bezier(.2,.9,.3,1.4) both}
.sterrenrij svg:nth-child(2){animation-delay:.16s}
.sterrenrij svg:nth-child(3){animation-delay:.32s}

/* tellers die omhoog gaan */
.tel.knal{animation:plop .58s cubic-bezier(.2,.9,.3,1.3)}

/* de kistknop vraagt aandacht zodra hij mag */
#e-kist:not([hidden]){animation:pols 1.5s ease-in-out infinite}

/* edelstenen ploffen om de beurt in de schatkamer */
.steen{animation:tegelin .5s cubic-bezier(.2,.9,.3,1.35) both}
.steen:nth-child(odd){--kanteling:-1.4deg}
.steen:nth-child(even){--kanteling:1.2deg}
.steen:nth-child(1){animation-delay:.05s}
.steen:nth-child(2){animation-delay:.11s}
.steen:nth-child(3){animation-delay:.17s}
.steen:nth-child(4){animation-delay:.23s}
.steen:nth-child(5){animation-delay:.29s}
.steen:nth-child(6){animation-delay:.35s}
.steen:nth-child(7){animation-delay:.41s}
.steen:nth-child(8){animation-delay:.47s}
.steen:nth-child(9){animation-delay:.53s}
.steen:nth-child(10){animation-delay:.59s}
.steen:nth-child(n+11){animation-delay:.65s}
.kamerkop{animation:juichin .55s cubic-bezier(.2,.9,.3,1.35) both}

/* fout antwoord */
.schudden{animation:schud .46s ease-in-out}
.wiebelen{animation:wiebel .7s ease-in-out}

@media (prefers-reduced-motion:reduce){
  .zweeflaag > *,
  #overvaart.aan .zeewand,#overvaart.aan .vaarboot,
  .scherm.aan,.spelkaart,.keuze,.juich.aan > div,.sterrenrij svg,
  .tel.knal,#e-kist:not([hidden]),.steen,.kamerkop,.schudden,.wiebelen{
    animation:none !important;
  }
  #feestvel{display:none !important}
}

/* ---------- gedeeld speelveld ----------
   Een laag en breed venster (een tablet die ligt, een ouder laptopscherm) gaf
   een bord dat alleen in de breedte meerekende: op 1024 bij 768 werd het 944
   bij 707 en stonden de vier antwoordknoppen tot 265 punten onder de onderrand,
   terwijl er op het bord niet te vegen valt omdat het touch-action:none heeft.
   Het bord houdt zijn verhouding 4:3, dus wordt de hoogte hier via de breedte
   begrensd: boven en onder het veld staan samen 491 punten aan kop, opdracht,
   antwoordknoppen en voet, nagemeten op 1024 bij 768. De ondergrens van 260
   punten is er voor een heel laag venster: kleiner dan dat valt er niet meer op
   te spelen en mag de bladzijde maar schuiven.
   Zodra de hoogte de maat bepaalt, krimpt de hele kaart mee: anders drijft een
   klein bord midden in een brede kaart en staan de antwoordknoppen er ver
   vandaan. Op een hoog venster raakt die grens niets.
   De ondergrens van 520 punten houdt de rij antwoordknoppen op één regel: vier
   knoppen van 96 met 20 ertussen vragen 444 punten binnenwerk. En het is
   align-self en geen marge, want .scherm is een flexkolom en daarin krimpt een
   vak met een automatische zijmarge tot de breedte van zijn eigen tekst. */
.wrap{
  --bordruimte:max(260px, 100dvh - 500px);
  --veldbreed:calc(var(--bordruimte) * 4 / 3);
}
#scherm-speel > .vlak,#scherm-zoek > .vlak{
  max-width:max(calc(var(--veldbreed) + 96px), 520px);
  width:100%;align-self:center;
}
.speelveld{
  position:relative;width:100%;aspect-ratio:4/3;
  max-width:var(--veldbreed);margin-inline:auto;
  container:veld / size;
  border-radius:var(--radius);
  background:var(--room-warm);
  border:var(--lijn) solid var(--inkt);
  box-shadow:var(--schaduw);
  overflow:hidden;
}
/* Alleen het speelbord vult het veld; het canvas van de mascotte in de
   juichlaag is geen speelbord en houdt zijn eigen maat. */
.speelveld > canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
.speelveld .juich{background:rgba(36,31,26,.9)}
/* Een kindervinger van vijf mist een platte knop. Nielsen Norman Group houdt
   voor deze leeftijd ongeveer 2 bij 2 cm aan, met flink wat ruimte ertussen;
   nagemeten kwamen deze knoppen op 1,5 cm hoog uit. 76px is op een tablet
   ruwweg 2 cm. */
#sp-knoppen{gap:20px}
#sp-knoppen .knop{min-width:96px;min-height:76px;justify-content:center}
.antwoord{
  font-family:var(--display);font-size:30px;padding:10px 24px 14px;
}
/* Drie antwoorden met een woord erin passen niet zoals vier cijfers dat doen.
   In het spel vergelijk staat er "Links meer", "Evenveel" en "Rechts meer":
   samen 617 punten, en de kolom naast het speelveld houdt er 444. De rij brak
   daardoor op elke liggende maat in tweeën en op een liggende telefoon zakte
   de onderste knop 3 punten onder de rand.
   Een knop mag smaller worden dan zijn zin lang is: dan breekt het woord in
   plaats van de rij. Drie knoppen die elk hooguit een derde van de rij pakken
   passen zo naast elkaar, en met twee regels tekst worden ze hoger dan de 76
   punten die ze als tikdoel nodig hebben. Knoppen met alleen een getal erop
   blijven onder die derde en veranderen dus niet. */
#sp-knoppen:has(> .knop:nth-child(3):last-child) .antwoord{
  max-width:calc((100% - 46px) / 3);
  padding-inline:14px;
  text-align:center;line-height:1.05;
}
/* Op een staande telefoon hield die derde de rij nog steeds niet heel: de
   knoppen bleven 96 punten breed omdat de ondergrens van 96 wint van een
   bovengrens van 80, en drie van 96 met 20 ertussen vragen 328 punten terwijl
   de kaart er 288 heeft. De rij stond op twee regels van samen 202 punten en
   op 360 bij 740 zakte de onderste knop 21 punten onder de rand.
   Hier mag de ondergrens dus los, en om de letters dan nog in de knop te
   houden gaat de tussenruimte naar 12 en het woord een maat kleiner. Wat het
   tikdoel is verandert nauwelijks: 88 bij 76 punten in plaats van 96 bij 91.
   Alleen knoppen met een woord erop; een knop met een getal erop houdt zijn
   96 punten, want daar past het cijfer zonder dat de rij breekt. */
@media (max-width:460px){
  /* De tweede voorwaarde houdt de rij met alleen getallen erbuiten: die knoppen
     hebben hun 96 punten en hun 20 punten tussenruimte, en daar verandert hier
     niets aan. */
  #sp-knoppen:has(> .knop:nth-child(3):last-child):has(> .antwoord:not(.letterknop)){gap:12px}
  #sp-knoppen:has(> .knop:nth-child(3):last-child) .antwoord:not(.letterknop){
    min-width:0;
    max-width:calc((100% - 30px) / 3);
    font-size:20px;padding-inline:8px;
  }
}
/* Dezelfde breuk, maar dan in de rijen waar geen woord op de knop staat. Vier
   knoppen van 96 met 20 punten ertussen vragen 444 punten en de kaart heeft er
   op 360 bij 740 maar 288: de rij stond op twee regels van samen 172 punten en
   zakte daarmee onder de onderrand — hoeken en buurgetallen 37 punten, tellen
   en klankletter 6. Op 390 bij 844 bleef ze nog in beeld, maar zodra een ouder
   samen spelen aanzette zakte ze ook daar weg: hoeken 32, tellen 24,
   klankletter 1.
   Er staat één cijfer of één letter op die knoppen, dus mag de ondergrens van
   96 los: met 64 punten en 10 ertussen vragen vier knoppen 286 punten en past
   de rij op één regel. Het tikdoel wordt 64 bij 76 en blijft daarmee ruim boven
   de 44, en de knoppen worden alleen breder als hun eigen inhoud dat vraagt —
   bij tellen staat er soms een tien op, en dan is de rij 73 punten per knop.
   De rij van vergelijk blijft erbuiten: daar staat een woord op, die rij is al
   apart geregeld en houdt op alle acht de maten precies de maat die ze had. */
@media (max-width:460px){
  #sp-knoppen:has(> .letterknop),
  #sp-knoppen:has(> .knop:nth-child(4)){gap:10px}
  #sp-knoppen > .letterknop,
  #sp-knoppen:has(> .knop:nth-child(4)) > .antwoord{min-width:64px;padding-inline:12px}
}
.antwoord.goed{background:var(--palm);color:var(--papier)}
.antwoord.fout{background:var(--koraal);color:var(--papier)}

/* ---------- liggend en laag: het veld naast de opdracht ----------
   De hoogtegrens hierboven maakte het veld op een liggende tablet en een ouder
   laptopscherm wel passend, maar ook klein: op 1024 bij 768 bleef er 351 bij
   262 over terwijl de halve schermbreedte leeg stond. Krimpen was daar het
   enige antwoord, en dat is een dure prijs voor een kind van vijf.
   Ligt het venster en is het laag, dan gaat het veld daarom naast de opdracht
   staan in plaats van eronder. De hoogte is dan bijna vrij, en de breedte die
   overblijft naast de kolom met opdracht en antwoordknoppen bepaalt de maat:
   het veld gebruikt de ruimte die er is in plaats van weg te krimpen.
   De rechterkolom houdt 444 punten, want daar passen de vier antwoordknoppen
   van 96 met 20 ertussen op één regel — dezelfde ondergrens als hierboven,
   nu als kolom. Het veld staat in de eerste kolom met minmax(0, ...): is er
   te weinig breedte, dan wijkt het veld en niet de knoppenrij.
   De 252 punten zijn kop, randen, voering en lucht boven en onder de kaart,
   nagemeten op 1024 bij 768; ze houden de bladzijde binnen het venster. */
@media (min-width:900px) and (max-height:920px) and (min-aspect-ratio:5/4){
  /* De ondergrens is de maat die het veld zónder deze regel al had. Met alleen
     min() deed deze regel op een liggende telefoon van 932 bij 430 precies het
     omgekeerde van wat ze bedoelt: het veld werd 237 in plaats van 347 punten
     breed, terwijl er 932 punten breedte stond. Deze regel mag het veld groter
     maken en nooit kleiner. */
  .wrap{--veldbreed:clamp(calc(var(--bordruimte) * 4 / 3), calc((100dvh - 252px) * 4 / 3), 820px)}
  #scherm-speel > .vlak,#scherm-zoek > .vlak{max-width:none;align-self:stretch}
  #scherm-speel > .vlak > .kaart,#scherm-zoek > .vlak > .kaart{
    display:grid;
    grid-template-columns:minmax(0,var(--veldbreed)) minmax(444px,1fr);
    grid-template-areas:"veld kop" "veld vraag" "veld knoppen" "veld voet" "veld samen";
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    column-gap:18px;row-gap:12px;align-items:start;
  }
  /* Alleen de rechtstreekse kinderen krijgen een plek; de twee verborgen
     stukken uitleg voor de ouder blijven display:none en zijn dus geen
     rastervakje. */
  #scherm-speel > .vlak > .kaart > .speelveld,
  #scherm-zoek > .vlak > .kaart > .zoekveld{grid-area:veld}
  #scherm-speel > .vlak > .kaart > .opdracht,
  #scherm-zoek > .vlak > .kaart > .opdracht{grid-area:kop}
  #scherm-speel > .vlak > .kaart > .opdrachtrij,
  #scherm-zoek > .vlak > .kaart > .opdrachtrij{grid-area:vraag}
  /* De samenvraag staat hier als laatste en niet meer tussen de zin en de
     antwoordknoppen. Tussenin kostte hij 61 punten in de kolom naast het veld
     en zakte de voetregel met Nieuwe reeks en het vraagteken op 932 bij 430 59
     punten onder de rand zodra een ouder samen spelen aanzette. Dezelfde ruil
     als staand, een stukje verderop in dit bestand: de knop is voor het kind
     dat niet scrolt, de vraag is voor de volwassene die dat wel doet. */
  #scherm-speel > .vlak > .kaart > .samenkaart{grid-area:samen}
  #scherm-speel > .vlak > .kaart > #sp-knoppen{grid-area:knoppen}
  #scherm-speel > .vlak > .kaart > .spelvoet,
  #scherm-zoek > .vlak > .kaart > .spelvoet{grid-area:voet}
}

/* ---------- liggend en laag: het tekenbord naast de opdracht ----------
   Dezelfde ingreep als hierboven, maar dan voor het tekenbord. Dat hing alleen
   aan --bordruimte, die met de vensterhoogte meerekent, terwijl de regel
   hierboven alleen op het speelscherm en het zoekspel stond. Op 1024 bij 768
   bleef er daardoor een bord van 268 punten over terwijl het speelveld
   ernaast 488 bij 366 kreeg, en stond de knop naar het schateiland 763 punten
   onder de rand.
   De rechterkolom houdt hier 260 punten en niet de 444 van het speelveld: in
   het tekenspel staan er geen vier antwoordknoppen naast elkaar maar drie
   knoppen die mogen omvouwen. De verzameling krijgt een eigen smalle kolom,
   zodat de knop naar het schateiland naast de kaart staat en niet eronder.
   Wat er dan overblijft gaat naar het bord; de 252 punten zijn kop, randen en
   lucht boven en onder de kaart, net als hierboven nagemeten op 1024 bij 768.
   De vraag voor de volwassene staat hier onder de knoppen en niet erboven:
   staande stond hij ertussen, en op een liggende telefoon zakte de knop Klaar
   daarmee 67 punten onder de rand. Die vraag is voor wie meekijkt, de knop is
   voor het kind.
   De ondergrens is --bordruimte, de maat die het bord zónder deze regel al
   had. Dat is geen versiering: met alleen min() werd het bord op een liggende
   telefoon van 932 bij 430 juist 178 in plaats van 260 punten, een bord van
   156 punten binnenwerk om op te tekenen, terwijl er 932 punten breedte naast
   stond. Deze regel mag het bord groter maken en nooit kleiner; op elk venster
   waar de breedte of de 470 al bond verandert er dus niets. */
@media (min-width:900px) and (max-height:920px) and (min-aspect-ratio:5/4){
  .wrap{--bordzij:clamp(var(--bordruimte), calc(100dvh - 252px), 470px)}
  #scherm-teken > .vlak{
    grid-template-columns:minmax(0,1fr) minmax(186px,250px);
    align-items:start;
  }
  #scherm-teken > .vlak > .kaart:not(#t-zijpaneel){
    display:grid;
    grid-template-columns:minmax(0,var(--bordzij)) minmax(260px,1fr);
    grid-template-areas:"bord kop" "bord vraag" "bord knoppen" "bord samen";
    grid-template-rows:auto auto auto minmax(0,1fr);
    column-gap:18px;row-gap:12px;align-items:start;
  }
  #scherm-teken > .vlak > .kaart > .opdracht{grid-area:kop}
  #scherm-teken > .vlak > .kaart > .opdrachtrij{grid-area:vraag}
  #scherm-teken > .vlak > .kaart > .bordhouder{grid-area:bord;max-width:var(--bordzij)}
  #scherm-teken > .vlak > .kaart > .samenkaart{grid-area:samen}
  #scherm-teken > .vlak > .kaart > .werkbalk{grid-area:knoppen}
  /* In een eigen kolom van 250 punten past het plaatje weer boven de tekst;
     de regel voor de smalle bladzijde hierboven zou de kolom hier in tweeën
     hakken en dan blijft er voor geen van beide genoeg over. */
  #t-zijpaneel{display:flex;flex-direction:column}
  #t-zijbeeld,#t-zijkop,#t-zijtekst,#t-zijpaneel .werkbalk{grid-area:auto}
}

/* Op een liggend en laag venster telt elke punt hoogte mee: met het bord naast
   de opdracht stond de knop Klaar op 932 bij 430 nog 3 punten onder de rand.
   De rij vormen is daar het enige dat ruimte kan teruggeven zonder dat het
   bord kleiner wordt; dezelfde maten als op een telefoon, waar ze al staan.

   De kolom naast het bord is wat de bladzijde hier hoog maakt, niet het bord:
   op 932 bij 430 stond er 318 punten kop, zin, knoppen en samenvraag naast een
   bord van 178, en zakte de samenvraag 79 tot 104 punten onder de rand. De
   drie knoppen vroegen daar twee regels van samen 108 punten terwijl ze in hun
   kleine maat op één regel van 44 passen, en de zin houdt 3,1 regel vrij voor
   een zin die naast het bord in twee past. Alles wat die kolom korter maakt
   komt de samenvraag ten goede en kost het bord niets, want het bord staat in
   een eigen kolom.
   Het plaatje van de verzameling staat hier onderaan: in een kolom van 250
   punten is het 137 hoog, en met de knop naar het schateiland eronder zakte
   die knop 150 punten onder de rand. Het plaatje is om naar te kijken, de knop
   is om op te tikken. */
@media (max-height:560px) and (min-aspect-ratio:5/4){
  #tekenstrook{gap:8px}
  #tekenstrook .keuze{padding:5px 6px 4px;gap:3px}
  #tekenstrook .keuze svg.vorm{width:28px;height:28px}
  #tekenstrook .keuze .letter{font-size:25px}
  #tekenstrook .keuze b{font-size:10px}
  #tekenstrook .puntjes i{width:7px;height:7px}

  /* De merknaam rekent met de breedte mee: op 932 punten breed werd hij 46px
     en de kopregel 56 punten hoog, boven een venster van 430. Hij staat op elk
     scherm, en alles eronder schuift mee: bord, knoppen en samenvraag. */
  .merk{font-size:26px}
  /* De ruimte tussen de blokken rekent met de BREEDTE mee (2,6vw), en dit
     venster is breed en laag: op 932 bij 430 stond er 24 punten tussen de kop,
     de rij vormen en de kaart, terwijl het de hoogte is die hier op is. Die
     twee keer 16 punten boven de kaart zijn precies wat het tekenbord en de
     samenvraag onder de rand hield. */
  .wrap{--stap:8px}
  /* Een bord van 260 punten neemt de kolom ernaast 82 punten breedte af, en
     die kolom wordt daar juist hoger van: de zin liep van 80 naar 101 punten.
     De verzameling heeft die 250 punten hier niet nodig — het plaatje erin is
     ook op 186 nog goed te zien — en wat eraf gaat komt bij de kolom met de
     zin en de knoppen. */
  #scherm-teken > .vlak{grid-template-columns:minmax(0,1fr) minmax(150px,186px)}
  #scherm-teken > .vlak > .kaart:not(#t-zijpaneel){row-gap:6px}
  #scherm-teken .opdracht h2{font-size:24px}
  /* Drie knoppen die elk hooguit een derde van de rij pakken passen naast
     elkaar; "Kijk hoe het gaat" breekt dan in twee regels in plaats van de rij
     in tweeën. Twee regels knoppen kostten 98 punten, één regel 57. */
  #scherm-teken > .vlak > .kaart:not(#t-zijpaneel) > .werkbalk{gap:8px}
  #scherm-teken > .vlak > .kaart:not(#t-zijpaneel) > .werkbalk .knop{
    font-size:15px;padding:8px 12px 10px;border-radius:12px;min-height:44px;
    max-width:calc((100% - 16px) / 3);
    text-align:center;line-height:1.1;
  }
  /* De samenvraag is hier het laatste wat nog onder de rand hing; kleiner
     gezet past hij op één regel en staat hij in beeld. */
  #scherm-teken > .vlak > .kaart > .samenkaart{padding:6px 11px 8px}
  #scherm-teken .samenvraag{font-size:15px}
  /* In een kolom van 186 punten nam dit bijschrift drie regels en 109 punten,
     meer dan de knop eronder. Het is een bijschrift bij een plaatje. */
  #t-zijkop{font-size:18px;order:1}
  #t-zijpaneel .werkbalk{order:2}
  #t-zijtekst{order:3}
  #t-zijbeeld{order:4}
}

/* ---------- opdracht met luidspreker ---------- */
.opdrachtrij{display:flex;gap:12px;align-items:flex-start}
.opdrachtrij .aanwijzing{flex:1 1 auto;margin:0}
.hoorknop{
  flex:0 0 auto;width:46px;height:46px;
  display:grid;place-items:center;
  background:var(--zon);border:var(--lijn) solid var(--inkt);
  border-radius:50%;box-shadow:3px 3px 0 var(--inkt);padding:0;
  transition:transform .12s ease,box-shadow .12s ease;
}
.hoorknop:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--inkt)}
.hoorknop:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--inkt)}
.hoorknop[data-praat="ja"]{animation:pols 1.1s ease-in-out infinite}

/* ---------- schakelaar in de ouderuitleg ---------- */
.schakelaar{
  display:flex;align-items:center;gap:11px;font-size:14.5px;
  cursor:pointer;user-select:none;
}
/* De twee schakelaars waren 52 bij 30 punten en daarmee kleiner dan het
   tikdoel van 44 dat overal elders in de app geldt. Ze staan op het vel voor
   de volwassene, maar een duim is daar niet kleiner. Nu 74 bij 44, met een
   knopje dat mee is gegroeid. */
.schakelaar input{
  appearance:none;width:74px;height:44px;margin:0;flex:0 0 auto;
  background:var(--room-warm);border:var(--lijn) solid var(--inkt);
  border-radius:99px;position:relative;cursor:pointer;
  transition:background .16s ease;
}
.schakelaar input::after{
  content:"";position:absolute;top:4px;left:4px;width:30px;height:30px;
  background:var(--papier);border:2.5px solid var(--inkt);border-radius:50%;
  transition:transform .16s ease;
}
.schakelaar input:checked{background:var(--palm)}
.schakelaar input:checked::after{transform:translateX(30px)}

/* ---------- ouderrapport ---------- */
#rapport{display:flex;flex-direction:column;gap:8px}
.rapportrij{
  display:grid;grid-template-columns:minmax(84px,auto) 1fr auto;
  gap:11px;align-items:center;font-size:14px;
}
.rapportrij b{font-weight:700}
.meter{
  height:13px;border-radius:99px;background:var(--room-warm);
  border:2.5px solid var(--inkt);overflow:hidden;
}
.meter i{display:block;height:100%}
.rapportrij span{font-variant-numeric:tabular-nums;color:var(--inkt-zacht);font-size:13px;white-space:nowrap}
.rapportnoot{font-size:13.5px;color:var(--inkt-zacht);margin:4px 0 0}

/* ---------- dagstempels ---------- */
.dagen{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.dag{
  width:38px;height:38px;border-radius:12px;
  border:2.5px solid var(--inkt);background:var(--room-warm);
  display:grid;place-items:center;font-family:var(--display);font-size:15px;
}
.dag.vol{background:var(--zon);box-shadow:2px 2px 0 var(--inkt)}
.dag.vandaag{outline:3px solid var(--druif);outline-offset:2px}

/* ---------- weekstrip op de hub ---------- */
.weekstrip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--papier);border:var(--lijn) solid var(--inkt);
  border-radius:99px;box-shadow:4px 4px 0 var(--inkt);
  padding:9px 18px 9px 20px;align-self:flex-start;
}
.weeklabel{font-family:var(--display);font-size:17px;white-space:nowrap}

/* een vondst valt op tussen de edelstenen: die heeft ze zelf ontdekt */
.steen.vondst{outline:3px dashed var(--goud);outline-offset:4px;border-radius:14px}

/* ---------- bouwen op je eiland ---------- */
/* Staat onder de kaart, niet erop. Een keuzebalk die over het eiland heen valt
   dekt precies af waar de keuze over gaat, en schoof bovendien scheef: de
   animatie overschreef het centreren met translateX. */
.bouwbalk{
  width:100%;
  background:var(--papier);
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius);
  box-shadow:var(--schaduw);
  padding:12px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  animation:opkomst .4s cubic-bezier(.2,.9,.3,1.25) both;
}
.bouwtekst{margin:0;font-family:var(--display);font-size:clamp(16px,2.2vw,21px);text-align:center}
.bouwkeus{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bouwknop{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:104px;padding:8px 4px 6px;
  background:var(--room-warm);
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius-klein);
  box-shadow:3px 3px 0 var(--inkt);
  font-family:var(--display);font-size:13px;line-height:1.1;
  transition:transform .12s ease,box-shadow .12s ease;
}
.bouwknop:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--inkt)}
.bouwknop:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--inkt)}
.bouwknop canvas{display:block;width:82px;height:66px}

/* Op een kleine telefoon en op een liggend laag venster krijgt de bouwbalk zijn
   kleine maat. Op 360 bij 740 stonden de bouwsels in tegels van 104 punten
   breed: er passen er twee op een regel, de rij werd drie regels van samen 225
   punten en de balk 316. Met de kaart en de knoppenbalk erbij stond Verder
   oefenen daardoor 194 punten onder de rand. In de kleine maat passen er drie
   op een regel en is de hele balk 146 punten. De tegel blijft 84 bij 95 en dus
   ruim boven het tikdoel van 44. */
@media (max-width:460px),(max-height:560px){
  .bouwbalk{padding:9px 12px;gap:6px}
  .bouwtekst{font-size:15px}
  .bouwknop{width:84px;padding:5px 3px 4px;font-size:12px}
  .bouwknop canvas{width:66px;height:52px}
}
/* En op een kleine telefoon ook de zin en de knoppen eronder: de zin nam vijf
   regels van 102 punten en de drie knoppen stonden elk op een eigen regel. */
@media (max-width:460px){
  .eilandtekst{font-size:14.5px}
  .eilandvoet .knop{font-size:15px;padding:8px 14px 10px;min-height:44px}
}

/* ---------- de opdracht van vandaag ---------- */
.dagkaart{
  background:var(--papier);
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius);
  box-shadow:var(--schaduw);
  padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;isolation:isolate;
}
.dagkaart::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.08) 40%,rgba(36,31,26,.07));
}
.dagkaart[data-af="ja"]{background:#e9f8f0}
.dagkop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dagkop h2{font-family:var(--display);font-size:clamp(21px,3vw,27px);margin:0;line-height:1}
.dagreeks{font-size:14px;font-weight:700;color:var(--inkt-zacht)}
.dagtaken{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.dagtaak{
  flex:1 1 210px;display:flex;align-items:center;gap:10px;
  background:var(--room-warm);
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius-klein);
  box-shadow:3px 3px 0 var(--inkt);
  padding:9px 12px;text-align:left;font-size:15px;font-weight:700;
  transition:transform .12s ease,box-shadow .12s ease;
}
.dagtaak:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--inkt)}
.dagtaak:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--inkt)}
.dagtaak[data-af="ja"]{background:#dff5e8}
.dagtaak .bolletje{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  border:3px solid var(--inkt);display:grid;place-items:center;
}
.dagtaak[data-af="ja"] .bolletje{background:var(--palm)}
.dagtaak .bolletje svg{display:block}
.zegelkaart{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.zegellabel{font-family:var(--display);font-size:15px;white-space:nowrap}
.zegels{display:flex;gap:6px;flex-wrap:wrap}
.zegels canvas{
  width:38px;height:38px;display:block;
  border:2.5px dashed var(--inkt-flauw);border-radius:50%;
}
.zegels canvas[data-vol="ja"]{border-style:solid;border-color:var(--inkt);background:var(--room-warm)}

/* ---------- de kinderen ---------- */
.kindkiezer .eiland{width:auto;min-width:92px;padding:9px 14px;font-size:15px}
.kinderlijst{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}
.kindrij{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:var(--lijn) solid var(--inkt);border-radius:var(--radius-klein);
  background:var(--room-warm);padding:8px 12px;
}
.kindrij[data-nu="ja"]{background:var(--zon);box-shadow:3px 3px 0 var(--inkt)}
.kindrij b{font-family:var(--display);font-size:17px;flex:1 1 auto}
.kindrij .sinds{font-size:13px;color:var(--inkt-zacht)}

/* ---------- de eilandkiezer ---------- */
.eilandkiezer{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--papier);border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius);box-shadow:4px 4px 0 var(--inkt);
  padding:10px 16px;align-self:flex-start;max-width:100%;
}
.kiezerlabel{font-family:var(--display);font-size:17px;white-space:nowrap}
.eilanden{display:flex;gap:10px;flex-wrap:wrap}
.eiland{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  width:86px;padding:7px 4px 6px;
  background:var(--room-warm);
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius-klein);
  box-shadow:3px 3px 0 var(--inkt);
  font-family:var(--display);font-size:13px;line-height:1.1;
  transition:transform .12s ease,box-shadow .12s ease;
}
.eiland:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--inkt)}
.eiland:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--inkt)}
.eiland canvas{display:block;width:64px;height:44px}
.eiland[data-hier="ja"]{background:var(--zon);box-shadow:5px 5px 0 var(--inkt)}
.eiland[data-slot="dicht"]{opacity:.5;cursor:not-allowed;background:var(--room-warm)}
.eiland[data-slot="dicht"]:hover{transform:none;box-shadow:3px 3px 0 var(--inkt)}
.eilandslot{font-size:11px;font-family:var(--lees);font-weight:700;color:var(--inkt-zacht)}

/* ---------- Knor ---------- */
/* Het vak waarin een personage getekend wordt is 230 bij 250 (zie VAK in
   personages.js). Zolang het canvas nog niet is opgemeten staat zijn bitmap op
   de standaard 300 bij 150, en dan gaf height:auto een vak van 2:1: Knor stond
   doormidden. Met de verhouding in de stijl klopt het vak al voordat er ook
   maar iets getekend is. */
.knorvel{display:block;width:100%;height:auto;aspect-ratio:230 / 250}

.knorknop{
  flex:0 0 auto;width:74px;min-height:44px;padding:0;background:none;border:0;
  transition:transform .14s ease;
}
.knorknop:hover{transform:translateY(-3px) rotate(-3deg)}
.knorknop:active{transform:translateY(1px) scale(.96)}

.welkom{
  display:flex;align-items:center;gap:clamp(12px,2.5vw,26px);
  flex-wrap:wrap;
}
.knorgroot{
  flex:0 0 auto;width:clamp(120px,18vw,168px);padding:0;background:none;border:0;
  transition:transform .16s ease;
}
.knorgroot:hover{transform:translateY(-4px) rotate(-3deg)}
.knorgroot:active{transform:translateY(2px) scale(.97)}
.welkomtekst{flex:1 1 280px;display:flex;flex-direction:column;gap:4px}
.knornaam{
  margin:0;font-family:var(--display);font-size:26px;line-height:1;
  color:var(--koraal);
}
/* Op het juichscherm rekent de mascotte mee met de hoogte van het veld, want
   hij is de grootste post in die laag: vroeg hij 132 punten breed terwijl er
   maar 239 punten veld was, dan duwde hij de knop eronderuit. */
.knorjuich{width:132px;margin:0 auto -6px}
.juich .knorjuich{width:min(132px,30cqh);margin:0}

@media (max-width:520px){
  .knorknop{width:60px}
}
@media (prefers-reduced-motion:reduce){
  .knorknop,.knorgroot{transform:none !important}
}

/* ---------- letterknoppen in het klankspel ---------- */
.letterknop{
  font-family:var(--display);font-size:42px;line-height:1;
  min-width:92px;padding:8px 22px 14px;
  text-transform:lowercase;
}

/* ---------- het tekenboek ---------- */
.boekkop{
  /* .kaart zet flex-direction op column; hier staan kop en knop naast elkaar */
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.boekkoptekst{flex:1 1 260px;min-width:0}
.boekkop h2{font-family:var(--display);font-size:clamp(26px,4.4vw,36px);margin:0;line-height:1.05}
.boektekst{margin:2px 0 0;font-size:15px;color:var(--inkt-zacht)}
.boekleeg{
  margin:0;padding:26px 22px;text-align:center;font-size:15.5px;color:var(--inkt-zacht);
  background:var(--papier);border:var(--lijn) dashed var(--inkt-flauw);
  border-radius:var(--radius);
}

.boekdagen{display:flex;flex-direction:column;gap:var(--stap)}
.boekdag{
  background:var(--papier);
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius);
  box-shadow:var(--schaduw);
  padding:16px 18px 20px;
}
.boekdagkop{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:2.5px dashed var(--inkt-flauw);
  padding-bottom:8px;margin-bottom:14px;
}
.boekdagkop h3{font-family:var(--display);font-size:24px;margin:0;line-height:1}
.boekaantal{font-size:13.5px;color:var(--inkt-zacht);white-space:nowrap}

.boekrek{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px}
.boekstuk{
  background:transparent;border:0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .13s ease;
}
.boekstuk canvas{
  display:block;width:100%;height:auto;aspect-ratio:1/1;
  border-radius:calc(var(--radius-klein) - 2px);
  box-shadow:4px 4px 0 var(--inkt);
}
.boekstuk:hover{transform:translate(-2px,-3px)}
.boekstuk:active{transform:translate(1px,1px)}
.boekstuk b{font-family:var(--display);font-size:17px;line-height:1.1;text-align:center}
.boeksterren{font-size:13px;color:var(--goud-diep);line-height:1;letter-spacing:.06em;min-height:1em}

/* één tekening groot */
.boekgroot{
  position:fixed;inset:0;z-index:50;display:flex;overflow-y:auto;
  background:rgba(22,43,37,.94);
  padding:clamp(16px,3vw,32px);
}
.grootbinnen{
  margin:auto;display:flex;flex-direction:column;gap:10px;align-items:center;
  width:100%;max-width:520px;text-align:center;
}
/* De tekening is vierkant en werd zo groot als de laag breed is. Op een
   liggende telefoon (932 bij 430) stonden Eerder, Later en Terug daardoor 220
   punten onder de rand: de tekening zelf was 420 punten hoog in een venster
   van 430. Hij mag hier krimpen; de knoppen eronder niet. De 210 punten zijn
   de naam, de datum, de sterren, de knoppenrij en de lucht ertussen. */
.grootbinnen canvas{
  display:block;margin-inline:auto;
  width:auto;height:auto;
  max-width:min(420px, 100%);
  max-height:max(150px, calc(100dvh - 235px));
  border-radius:var(--radius);box-shadow:var(--schaduw);
}
.grootnaam{
  font-family:var(--display);font-size:clamp(24px,4.6vw,34px);margin:6px 0 0;line-height:1;
  color:var(--inkt);background:var(--zon);
  border:var(--lijn) solid var(--inkt);border-radius:14px;
  padding:5px 20px 9px;transform:rotate(-1.4deg);box-shadow:5px 5px 0 var(--inkt);
}
.grootdatum{margin:0;font-size:15px;color:var(--krijt-zacht);font-weight:700}
.grootsterren{display:flex;gap:4px;justify-content:center}
.grootbinnen .knop:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:3px 3px 0 var(--inkt)}

@media (max-width:460px){
  .boekrek{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:11px}
  .boekdag{padding:13px 13px 16px}
}

/* de knop die pas bij de tweede klik echt wist */
.knop.waarschuwing{background:var(--koraal);color:var(--papier)}

/* ---------- het verhaal ---------- */
.verhaal{
  position:fixed;inset:0;z-index:80;display:flex;overflow-y:auto;
  background:rgba(10,18,32,.94);
  padding:clamp(14px,3vw,30px);
}
body.verhaalt{overflow:hidden}
.verhaalbinnen{
  position:relative;margin:auto;width:100%;max-width:760px;
  display:flex;flex-direction:column;gap:0;
}
#verhaaldoek{
  display:block;width:100%;height:auto;
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius) var(--radius) 0 0;
  background:#101c38;
}
.verhaalblok{
  background:var(--papier);
  border:var(--lijn) solid var(--inkt);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--schaduw);
  padding:16px 20px 18px;
  display:flex;flex-direction:column;gap:8px;
}
.verhaalwie{
  margin:0;font-family:var(--display);font-size:20px;line-height:1;
  color:var(--koraal);letter-spacing:.01em;
}
.verhaaltekst{
  margin:0;font-size:clamp(17px,2.3vw,21px);line-height:1.45;font-weight:700;
  min-height:3.6em;
}
.verhaalvoet{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.verhaalstip{display:flex;gap:7px}
.verhaalstip i{
  width:11px;height:11px;border-radius:50%;
  border:2.5px solid var(--inkt);background:transparent;display:block;
}
.verhaalstip i.vol{background:var(--zon)}
/* Overslaan is een tikdoel als elk ander, dus minstens 44 punten hoog. Het
   staat 7 punten hoger dan de tekst zelf vraagt, want het vak groeit naar
   onderen en het woord hoort op dezelfde plek te blijven staan. */
/* Ligt het venster en is het laag, dan komt de plaat naast de tekst te staan
   in plaats van erboven. Onder elkaar werden ze op 932 bij 430 samen 575
   punten hoog: de knop Verder stond 203 punten onder de rand en Overslaan,
   die boven de plaat hangt, 13 punten erboven. Naast elkaar is de plaat 274
   hoog en past het geheel met de knoppen erbij in 315 punten.
   Een prentenboek dat ligt zet de plaat ook links en de tekst rechts. */
@media (max-height:560px) and (min-aspect-ratio:5/4){
  .verhaalbinnen{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,1fr);
    max-width:920px;align-items:stretch;
  }
  #verhaaldoek{
    align-self:start;
    border-radius:var(--radius) 0 0 var(--radius);
  }
  .verhaalblok{
    border-radius:0 var(--radius) var(--radius) 0;
    border-top:var(--lijn) solid var(--inkt);border-left:0;
  }
}

.verhaaloverslaan{
  position:absolute;top:-41px;right:0;
  background:none;border:0;padding:4px 2px;
  min-height:44px;display:flex;align-items:center;
  color:var(--krijt-zacht);font-family:var(--lees);font-size:14px;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}
.verhaaloverslaan:hover{color:var(--papier)}

/* ---------- Sterreneiland ---------- */
.torenvel{
  position:relative;width:100%;
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius);
  box-shadow:var(--schaduw);
  overflow:hidden;background:#101c38;
}
/* Dezelfde reparatie als bij de schatkaart: de vuurtoren rekende alleen met de
   breedte mee en duwde daarmee de enige knop van dit scherm — Terug naar het
   eiland — op elke liggende maat buiten beeld, tot 373 punten op 932 bij 430.
   De 260 punten zijn kop, randen, tussenruimte en de knoppenbalk eronder,
   nagemeten op 1024 bij 768. */
#torenbord{
  display:block;margin-inline:auto;touch-action:manipulation;cursor:pointer;
  width:auto;height:auto;max-width:100%;
  max-height:max(170px, calc(100dvh - 260px));
}

@media (max-width:460px){
  .verhaaloverslaan{top:-38px;font-size:13px}
  .verhaaltekst{min-height:4.4em}
}

/* ---------- leven in de kaartplaatjes ----------
   Niet alles tegelijk en niet hard: één bootje dat deint en een wolk die
   doorschuift maken de hub levend, negentien wiebelende plaatjes maken hem
   onrustig. De media-query onderaan zet alles stil als het apparaat daar om
   vraagt. */
@keyframes deinen{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-4px) rotate(-2deg)}
}
@keyframes overvliegen{
  0%{transform:translate(0,0)}
  50%{transform:translate(28px,-7px)}
  100%{transform:translate(0,0)}
}
@keyframes doordrijven{
  0%{transform:translateX(0)}
  100%{transform:translateX(-150px)}
}
@keyframes gloeien{
  0%,100%{opacity:.38}
  50%{opacity:.78}
}
.beeld .deint{animation:deinen 3.6s ease-in-out infinite;transform-origin:46px 172px}
.beeld .vliegt{animation:overvliegen 7s ease-in-out infinite}
.beeld .drijft{animation:doordrijven 34s linear infinite}
.beeld .pulst{animation:gloeien 2.8s ease-in-out infinite}

/* ---------- samen spelen ---------- */
.samenkaart{
  background:var(--room-warm);
  border:2.5px dashed var(--inkt-flauw);
  border-radius:var(--radius-klein);
  padding:9px 14px 11px;
  display:flex;flex-direction:column;gap:2px;
}
.samenkop{
  font-family:var(--display);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--inkt-zacht);line-height:1;
}
.samenvraag{margin:0;font-size:16px;font-weight:700;color:var(--inkt)}
/* Staand stond de samenvraag tussen het tekenbord en de knop Klaar in, en dan
   duwt hij die knop 12 tot 63 punten onder de onderrand zodra een ouder samen
   spelen aanzet: op 360 bij 740 in de reeksen letters en cijfers, op 390 bij
   844 in cijfers, op 414 bij 896 in vormen en cijfers. Liggend stond hij al
   onder de knoppen, om precies dezelfde reden. De kaart is een flexkolom, dus
   volstaat hier de volgorde: de knop is voor het kind dat niet scrolt, de
   vraag is voor de volwassene die dat wel doet. */
#scherm-teken .kaart > .samenkaart{order:1}
/* Op het speelscherm stond dezelfde vraag nog wél tussen het speelveld en de
   antwoordknoppen, en daar doet hij precies hetzelfde. Op 360 bij 740 zakte de
   antwoordrij van 37 naar 133 punten onder de rand in hoeken en van 6 naar 102
   in tellen, en in vergelijk van 59 punten boven de rand naar 15 eronder: een
   rij die zonder de vraag netjes in beeld stond. Zelfde reden, zelfde
   volgorde.
   De vraag zelf zakt op 360 bij 740 dan 45 tot 153 punten onder de rand. Dat is
   de bedoelde ruil en geen nieuwe fout: op 390 bij 844 en alles daarboven staat
   hij gewoon in beeld, en wie meeleest scrolt wél. */
#scherm-speel .kaart > .samenkaart{order:1}

/* ---------- de 3D-wereld ----------

   Het canvas vult het scherm, want in een wereld waar je doorheen loopt is
   randversiering afleiding. Alles wat erbovenop staat is één knop en één zin,
   en die zin is er voor de volwassene die meekijkt.

   De HUD staat in een eigen laag met pointer-events:none, zodat hij nergens
   een tik onderschept die voor de wereld bedoeld was. Alleen de knop zelf
   vangt weer. */
.wereldvel{
  position:relative;width:100%;
  height:min(74vh,720px);
  min-height:340px;
  border:var(--lijn) solid var(--inkt);
  border-radius:var(--radius);
  box-shadow:var(--schaduw);
  overflow:hidden;
  background:var(--lucht);
}
.wereldvel canvas{display:block;width:100%;height:100%;touch-action:none}
.wereldhud{
  position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:flex-start;gap:12px;
  padding:14px;
}
.wereldhud > *{pointer-events:auto}
.rondknop{
  width:54px;height:54px;flex:0 0 auto;
  display:grid;place-items:center;padding:0;
  background:var(--papier);color:var(--inkt);
  border:var(--lijn) solid var(--inkt);
  border-radius:50%;
  box-shadow:4px 4px 0 var(--inkt);
  transition:transform .12s ease,box-shadow .12s ease;
}
.rondknop svg{width:26px;height:26px}
.rondknop:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--inkt)}
.rondknop:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--inkt)}
.wereldwijzer{
  margin:0;align-self:flex-start;
  background:rgba(255,250,240,.92);
  border:3px solid var(--inkt);
  border-radius:14px;
  box-shadow:3px 3px 0 var(--inkt);
  padding:7px 14px 9px;
  font-family:var(--display);font-size:17px;line-height:1.15;
  max-width:34ch;
}
.wereldwijzer:empty{display:none}
.wereldlader{
  position:absolute;inset:0;display:grid;place-items:center;
  background:var(--lucht);
  font-family:var(--display);font-size:20px;
  transition:opacity .4s ease;
}
.wereldlader[hidden]{display:none !important}

/* Het doek van de overvaart. Geen zwart: een kind van vier dat het scherm zwart
   ziet worden denkt dat het spel stuk is. Het is de kleur van de lucht, zodat
   het leest als mist waar je doorheen vaart. */
.overvaartdoek{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--lucht,#bfe4f5);
  opacity:0;transition:opacity .7s ease;
}
.overvaartdoek.dicht{opacity:1}
@media (prefers-reduced-motion:reduce){
  .overvaartdoek{transition:opacity .2s linear}
}
@media (max-width:700px){
  .wereldvel{height:min(68vh,560px)}
  .wereldwijzer{font-size:15px;max-width:26ch}
}

/* ---------- de leeftijdknop in de ouderuitleg ----------

   Twee knoppen, en de gekozen staat ingedrukt. Geen keuzelijst: dit is één
   beslissing die de ouder één keer neemt en die de hele app verandert, dus hij
   hoort zichtbaar te zijn en niet weggevouwen in een menu. */
.leeftijdkeuze{display:flex;gap:10px;flex-wrap:wrap}
.knop.leeftijd{min-width:104px;justify-content:center}
.knop.leeftijd[aria-pressed="true"]{
  background:var(--zon);
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--inkt);
}

/* ---------- de opdracht hoort gehoord te worden, niet gelezen ----------

   Een kind van vijf leest niets. Toch stond de opdracht als geschreven zin even
   groot in beeld als het spel zelf, en de uitleg voor de ouder ernaast nog eens
   zo groot. Dat is omgedraaid: het luidsprekertje van Knor is nu groot en
   duidelijk, de zin eronder is klein en grijs voor de volwassene die meekijkt,
   en de uitleg zit achter een vraagteken. */
.opdrachtrij .knorknop{flex:0 0 auto}
.aanwijzing{
  font-size:14px;
  color:var(--inkt-zacht);
  font-weight:600;
  line-height:1.4;
  max-width:62ch;
}
.aanwijzing b{font-weight:800;color:var(--inkt)}

.spelvoet{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  border-top:2.5px dashed rgba(36,31,26,.18);
  padding-top:12px;margin-top:4px;
}
.spelvoet > p{
  margin:0;font-weight:700;font-size:14px;color:var(--inkt-zacht);
  font-variant-numeric:tabular-nums;
}
/* Op een kleine telefoon (360 bij 740) stonden Nieuwe reeks en het vraagteken
   ernaast 2 punten onder de rand, en alleen in de spellen waarvan de kop op
   twee regels breekt: Tel de hoeken, Meer of minder, Welk getal hoort ertussen
   en Hoe ging het ook alweer. Twee punten is genoeg om het onderste randje van
   allebei af te snijden, en het is de knop waarmee je een nieuwe reeks begint.
   De kop is een bijschrift voor wie meeleest — het kind hoort de opdracht van
   Knor — en gaat hier een maat kleiner: twee regels van 27 in plaats van 31.
   De streep boven de voetregel had 16 punten lucht en houdt er 8. Samen 16
   punten, ruim genoeg voor elke kop die er staat. */
@media (max-width:460px){
  #scherm-speel .opdracht h2,#scherm-zoek .opdracht h2{font-size:26px}
  #scherm-speel .spelvoet,#scherm-zoek .spelvoet{padding-top:8px;margin-top:0}
}
.vraagknop{
  width:44px;height:44px;flex:0 0 auto;
  display:grid;place-items:center;padding:0;
  background:var(--papier);color:var(--inkt);
  border:var(--lijn) solid var(--inkt);
  border-radius:50%;
  box-shadow:3px 3px 0 var(--inkt);
  font-family:var(--display);font-size:21px;line-height:1;
  transition:transform .12s ease,box-shadow .12s ease;
}
.vraagknop:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--inkt)}
.vraagknop:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--inkt)}

/* ---------- het tekenvel over de wereld ----------

   Een deur in het dorp is geen ander scherm meer. Het bord komt uit de boog
   naar haar toe, de camera zakt erin tot het bord het hele venster vult, en dán
   pas komt dit vel eroverheen. Op dat moment kijkt zij naar een egaal vlak van
   --bord met een krijtvorm erop, en dat is letterlijk hetzelfde vlak als wat
   hier aangaat. Daarom is de achtergrond hier --bord en geen papier: één tint
   verschil op de tel dat het vel het overneemt is precies de sprong die niemand
   mag zien.

   Het vel ligt over het wereldvenster en niet over de bladzijde. De kop blijft
   dus staan, met de weg terug erin, en de wereld eromheen wordt nergens
   afgebroken — hij draait eronder gewoon door. De maten komen uit het venster
   zelf; main.js schrijft ze hier als vier waarden neer. */
#scherm-teken[data-overdewereld="ja"]{
  position:absolute;
  left:var(--aankomstlinks,0);
  top:var(--aankomstboven,0);
  width:var(--aankomstbreed,100%);
  height:var(--aankomsthoog,100%);
  z-index:3;
  gap:0;padding:0;overflow:hidden;
  border-radius:var(--radius);
  background:var(--bord);
  display:flex;align-items:center;justify-content:center;
  animation:velerover .24s ease-out backwards;
}
#scherm-teken[data-overdewereld="ja"][data-aankomst="weg"]{
  animation:velerafd .24s ease-in forwards;
}
@keyframes velerover{from{opacity:0}to{opacity:1}}
@keyframes velerafd{from{opacity:1}to{opacity:0}}

/* Geen kaart en geen paneel: alles wat er als kaartje bij staat maakt er weer
   een scherm van, en zij staat op het eiland. Wat blijft is wat op het bord
   hoort: wat je gaat tekenen, het bord zelf en de knoppen eronder.
   De :not() erbij houdt hem sterker dan de kaartindeling die op een breed
   venster twee kolommen van deze kaart maakt; die indeling is voor een vol
   scherm en dit is een bord in een boog. */
#scherm-teken[data-overdewereld="ja"] > .vlak{
  display:flex;width:100%;height:100%;
  align-items:center;justify-content:center;max-width:none;
}
#scherm-teken[data-overdewereld="ja"] > .vlak > .kaart:not(#t-zijpaneel){
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;height:100%;
  background:transparent;border:0;box-shadow:none;
  padding:clamp(6px,2vh,16px);gap:clamp(4px,1.4vh,10px);
}
/* Krijt op een bord, geen inkt op papier: op --bord haalt de inktkleur de
   4,5:1 niet en het room wel (11,4:1, nagemeten op #fff4e0 op #1f3a32). */
#scherm-teken[data-overdewereld="ja"] .opdracht h2,
#scherm-teken[data-overdewereld="ja"] .aanwijzing,
/* het dikgedrukte stuk heeft een eigen inktkleur en erft de onze dus niet;
   op het bord viel dat weg in het groen */
#scherm-teken[data-overdewereld="ja"] .aanwijzing b{color:var(--room)}
#scherm-teken[data-overdewereld="ja"] .opdracht{text-align:center}
#scherm-teken[data-overdewereld="ja"] .trap{background:var(--bord-diep);color:var(--room-warm)}
#scherm-teken[data-overdewereld="ja"] .opdrachtrij{align-items:center}
/* De glans die elke kaart draagt hoort bij papier. Op een bord is het een
   witte waas over de bovenste helft, en dan is het groen van het vel niet meer
   het groen van het bord waar de camera in zakt. */
#scherm-teken[data-overdewereld="ja"] > .vlak > .kaart::before{display:none}
/* Het bord zo groot als er overblijft. De hoogte is hier de maat en niet de
   breedte: het venster van de wereld is breder dan hoog, en boven en onder het
   bord staan de opdracht en de knoppen.
   Niet laten krimpen: een bord dat meegeeft aan de kolom verliest zijn vierkant
   en dan wordt de cirkel die zij moet natrekken een ovaal. De breedte is de
   maat, de hoogte volgt eruit.

   Tweehonderd punten gaan eraf: dat is wat de opdracht, de regel van Knor en de
   knoppenrij samen innemen. Gemeten zonder die aftrek in een venster van 518
   punten hoog: het bord werd 448 en toen stond "De cirkel" 61 punten boven de
   bovenrand en de knop Klaar 61 punten onder de onderrand — en juist die knop
   is hoe zij zegt dat ze klaar is.

   Het pad met .kaart erin staat er om sterker te zijn dan de kaartindeling die
   op een breed venster twee kolommen van deze kaart maakt; die rekent het bord
   met --bordzij uit en die maat is voor een vol scherm. */
#scherm-teken[data-overdewereld="ja"] > .vlak > .kaart > .bordhouder{
  max-width:min(100%, calc(var(--aankomsthoog,100%) - 200px));
  flex:0 0 auto;
}

@media (prefers-reduced-motion:reduce){
  #scherm-teken[data-overdewereld="ja"]{animation:none !important}
}