/* =====================================================================================
   Eduplay-huisstijl: het ene designsysteem voor de site én de spellen.
   - De site laadt dit bestand via src/app/layout.tsx.
   - De spellen (public/spellen/*.html) laden het met <link href="/huisstijl.css"> vóór eduplay.css.
   Richting: lesmateriaal om aan te raken. Warm papier, inktlijnen, een stevige verschoven
   schaduw (zoals stickers en kaartjes uit een doos), oranje knoppen en per vak een eigen kleur.
   Gemaakt voor het digibord: grote letters, hoog contrast, grote klikvlakken.

   Onderdelen (gebruik alleen deze, geen eigen varianten):
     .pagina                      paginabreedte met marges
     .paginakop (+ __sticker)     grote kop bovenaan een pagina, h1 met <mark> als markering
     .sectiekop                   kop boven een blok (h2)
     .kruimel                     kruimelpad
     .knop + --primair | --secundair | --tekst, maat --klein | --groot, --breed, --gevaar
     .chip + --vak | --donker | --zacht        labels (niet klikbaar)
     .keuze (+ --rond)            groep schakelknoppen met aria-pressed of aria-selected (filters, groep, vak);
                                  .keuze-knop is dezelfde knop los, buiten een .keuze-groep
     .kaart (+ a.kaart / .kaart--klik), .paneel     wit vlak met inktlijn; paneel heeft binnenruimte
     .vlak + .vak--<vak>          vakkleur met vakpatroon, voor beeldvlakken (spelbeeld, tegels)
     .veld, .veld__label, .invoer, .hint       formulieren
     .melding + --fout | --goed | --info
     .laden, .leeg                laden en leeg scherm
     .raster                      responsief kaartenraster
   ===================================================================================== */

:root {
  color-scheme: light;

  /* Lettertypes. Op de site vult next/font --font-*; in de spellen laadt Google Fonts dezelfde families. */
  --kop: var(--font-head, "Bricolage Grotesque"), "Bricolage Grotesque", system-ui, sans-serif;
  --speels: var(--font-display, "Fredoka"), "Fredoka", ui-rounded, system-ui, sans-serif;
  --ui: var(--font-ui, "Plus Jakarta Sans"), "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Kleuren */
  --inkt: #1D2433;
  --inkt-zacht: #474E5F;   /* tweede tekst, contrast > 7:1 op papier */
  --inkt-licht: #676C7A;   /* kleine bijschriften */
  --papier: #FBF6EC;
  --papier-2: #F3ECDD;
  --wit: #FFFFFF;
  --rand-zacht: #D9D0BD;
  --oranje: #FF9C00;
  --oranje-donker: #E07B00;
  --oranje-zacht: #FFE7C2;
  --blauw: #1D4A96;
  --goed: #23855A; --goed-zacht: #DDF3E7;
  --fout: #B8302F; --fout-zacht: #FBE3E3;
  --info-zacht: #DCEEFF;

  /* Vakkleuren */
  --v-rekenen: #FFC93C; --v-taal: #FF9A7A; --v-spelling: #C9B3FF; --v-engels: #7CC6FF;
  --v-wereld: #8EDB9C; --v-natuur: #5FD0BD; --v-digitaal: #9FB4FF; --v-kunst: #F7B7D2;
  --v-bewegen: #FFB35C; --v-overig: #E8E0CF;

  /* Lijnen, schaduwen, rondingen */
  --lijn: 2.5px solid var(--inkt);
  --lijn-dun: 2px solid var(--inkt);
  --plak-klein: 2px 2px 0 var(--inkt);
  --plak: 4px 4px 0 var(--inkt);
  --plak-hoog: 6px 6px 0 var(--inkt);
  --rond-s: 12px;
  --rond: 18px;
  --rond-l: 26px;
  --pil: 999px;

  /* Maten */
  --t-klein: 14px;
  --t-basis: 16px;
  --t-groot: 18px;
  --t-kop-3: 22px;
  --t-kop-2: clamp(26px, 3vw, 36px);
  --t-kop-1: clamp(40px, 6.4vw, 84px);
  --klikmaat: 44px;
  --breedte: 1240px;
}

/* ---------- Basis ---------- */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--papier); color: var(--inkt); font-family: var(--ui); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--oranje); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Vakken: zet --kleur, zodat elk onderdeel de vakkleur kan gebruiken */
.vak--rekenen { --kleur: var(--v-rekenen); } .vak--taal { --kleur: var(--v-taal); } .vak--spelling { --kleur: var(--v-spelling); }
.vak--engels { --kleur: var(--v-engels); } .vak--wereld { --kleur: var(--v-wereld); } .vak--natuur { --kleur: var(--v-natuur); }
.vak--digitaal { --kleur: var(--v-digitaal); } .vak--kunst { --kleur: var(--v-kunst); } .vak--bewegen { --kleur: var(--v-bewegen); }
.vak--overig { --kleur: var(--v-overig); } .vak--oranje { --kleur: var(--oranje); }

/* ---------- Pagina en koppen ---------- */
.pagina { max-width: var(--breedte); margin: 0 auto; box-sizing: border-box; padding: 20px max(20px, env(safe-area-inset-right, 0px)) 72px max(20px, env(safe-area-inset-left, 0px)); display: grid; gap: 32px; }
.pagina > * { min-width: 0; }

.paginakop { position: relative; display: grid; gap: 14px; padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px); background: var(--wit); border: var(--lijn); border-radius: var(--rond-l); box-shadow: var(--plak-hoog);
  background-image: linear-gradient(var(--papier-2) 1.5px, transparent 1.5px); background-size: 100% 34px; background-position: 0 22px; }
.paginakop h1 { margin: 0; font-family: var(--kop); font-weight: 800; letter-spacing: -.045em; font-size: var(--t-kop-1); line-height: .95; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }
.paginakop h1 mark, .markeer { background: linear-gradient(transparent 58%, var(--oranje) 58% 92%, transparent 92%); color: inherit; padding: 0 .06em; }
.paginakop p { margin: 0; font-size: var(--t-groot); line-height: 1.5; font-weight: 600; color: var(--inkt-zacht); max-width: 62ch; }
.paginakop p a { color: var(--inkt); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.paginakop__sticker { position: absolute; right: clamp(16px, 4vw, 44px); top: -18px; transform: rotate(6deg); background: var(--kleur, var(--v-rekenen)); border: var(--lijn); border-radius: 14px; padding: 8px 14px; font-family: var(--kop); font-weight: 800; font-size: clamp(16px, 2vw, 22px); box-shadow: 3px 3px 0 var(--inkt); }

.sectiekop { margin: 0; font-family: var(--kop); font-weight: 800; letter-spacing: -.035em; font-size: var(--t-kop-2); line-height: 1.05; }
.sectiekop small { font-family: var(--ui); font-size: var(--t-basis); font-weight: 800; letter-spacing: 0; color: var(--inkt-licht); margin-left: 8px; }
.sectie { display: grid; gap: 18px; }
.sectie > p { margin: 0; color: var(--inkt-zacht); font-weight: 600; font-size: var(--t-basis); line-height: 1.55; max-width: 62ch; }
.bovenschrift { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-zacht); }

.kruimel { font-weight: 800; font-size: var(--t-klein); color: var(--inkt-zacht); display: flex; gap: 8px; flex-wrap: wrap; }
.kruimel a { color: var(--inkt); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Knoppen ----------
   Eén knop in drie soorten. .btn-start en .btn-ghost zijn de oude namen; die komen alleen nog voor
   in de spellen (hun scripts maken ze aan) en zien er precies zo uit als --primair en --secundair. */
.knop, .btn-start, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: var(--klikmaat);
  border: var(--lijn); border-radius: var(--pil); padding: 12px 22px; background: var(--wit); color: var(--inkt);
  font-family: var(--ui); font-weight: 800; font-size: var(--t-basis); line-height: 1.1; letter-spacing: -.01em; text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 3px 3px 0 var(--inkt); filter: none; transition: transform .12s ease, box-shadow .12s ease, background .15s;
}
.knop:hover, .btn-start:hover, .btn-ghost:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--inkt); filter: none; }
.knop:active, .btn-start:active, .btn-ghost:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--inkt); }
.knop:disabled, .btn-start:disabled, .btn-ghost:disabled { background: #E4DED1; color: var(--inkt-licht); transform: none; box-shadow: none; cursor: default; opacity: 1; filter: none; }
.knop svg, .btn-start svg, .btn-ghost svg { width: 1.15em; height: 1.15em; flex: none; }
.knop--primair, .btn-start { background: var(--oranje); padding: 14px 26px; box-shadow: var(--plak); }
.knop--primair:hover, .btn-start:hover { background: var(--oranje); box-shadow: var(--plak-hoog); }
.knop--secundair, .btn-ghost { background: var(--wit); }
.knop--secundair:hover, .btn-ghost:hover { background: var(--wit); }
.knop--klein { min-height: 38px; padding: 7px 14px; font-size: var(--t-klein); box-shadow: var(--plak-klein); }
.knop--klein:hover { box-shadow: 3px 3px 0 var(--inkt); }
.knop--groot { padding: 18px 32px; font-size: 20px; }
.knop--breed { width: 100%; }
.knop--gevaar { background: var(--fout-zacht); color: var(--fout); }
.knop--gevaar:hover { background: var(--fout-zacht); }
.knop--tekst { min-height: 0; border: 0; background: none; box-shadow: none; padding: 2px 0; border-radius: 4px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.knop--tekst:hover, .knop--tekst:active { transform: none; box-shadow: none; text-decoration-thickness: 3px; }

/* ---------- Chips (labels) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; border: var(--lijn-dun); border-radius: var(--pil); background: var(--wit); color: var(--inkt); padding: 4px 11px; font-weight: 800; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.chip svg { width: 15px; height: 15px; flex: none; }
.chip--vak { background: var(--kleur, var(--v-overig)); }
.chip--donker { background: var(--inkt); color: var(--wit); }
.chip--zacht { background: var(--papier); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- Keuzeknoppen (filters, groep, vak, instellingen) ---------- */
.keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.keuze > button, .keuze-knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: var(--lijn-dun); background: var(--wit); border-radius: var(--pil); padding: 7px 14px; font: 800 15px var(--ui); color: var(--inkt); cursor: pointer; transition: background .12s, box-shadow .12s; }
.keuze > button:hover, .keuze-knop:hover { background: var(--papier-2); }
.keuze > button[aria-pressed="true"], .keuze > button[aria-selected="true"], .keuze-knop[aria-pressed="true"], .keuze-knop[aria-selected="true"] { background: var(--inkt); color: var(--wit); }
.keuze > button:disabled, .keuze-knop:disabled { opacity: .45; cursor: not-allowed; }
.keuze > button svg, .keuze-knop svg { width: 16px; height: 16px; flex: none; }
.keuze > button .stip { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; background: var(--kleur, transparent); }
.keuze--rond > button { min-width: 44px; padding: 7px 0; font-family: var(--kop); font-size: 17px; }
.keuze--rond > button.alle { min-width: 0; padding: 7px 14px; font-family: var(--ui); font-size: 15px; }
.keuze__label { font-family: var(--kop); font-weight: 800; font-size: 17px; letter-spacing: -.02em; min-width: 64px; }

/* ---------- Kaart en paneel ---------- */
.kaart, .paneel { background: var(--wit); border: var(--lijn); border-radius: var(--rond); box-shadow: var(--plak); color: var(--inkt); min-width: 0; }
.kaart { display: grid; grid-template-rows: auto 1fr; overflow: hidden; text-decoration: none; }
a.kaart, .kaart--klik { transition: transform .12s ease, box-shadow .12s ease; cursor: pointer; }
a.kaart:hover, .kaart--klik:hover { transform: translate(-2px, -2px); box-shadow: var(--plak-hoog); }
a.kaart:active, .kaart--klik:active { transform: translate(2px, 2px); box-shadow: var(--plak-klein); }
.kaart__beeld { border-bottom: var(--lijn); }
.kaart__tekst { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.kaart__tekst h3 { margin: 0; font-family: var(--kop); font-weight: 800; letter-spacing: -.03em; font-size: 21px; line-height: 1.12; }
.kaart__tekst p { margin: 0; color: var(--inkt-zacht); font-weight: 600; line-height: 1.45; }
.paneel { padding: clamp(18px, 3vw, 28px); display: grid; gap: 18px; align-content: start; }
.paneel h2 { margin: 0; font-family: var(--kop); font-weight: 800; letter-spacing: -.035em; font-size: clamp(22px, 2.4vw, 28px); }
.paneel--vak { background: var(--kleur); }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 22px; }

/* ---------- Beeldvlak: vakkleur met vakpatroon ---------- */
.vlak { position: relative; display: grid; place-items: center; overflow: hidden; background-color: var(--kleur, var(--v-overig)); container-type: inline-size; }
.vlak.vak--rekenen { background-image: linear-gradient(rgba(29,36,51,.13) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(29,36,51,.13) 1.5px, transparent 1.5px); background-size: 18px 18px; }
.vlak.vak--spelling { background-image: linear-gradient(rgba(29,36,51,.14) 1.5px, transparent 1.5px); background-size: 100% 20px; }
.vlak.vak--taal { background-image: linear-gradient(rgba(29,36,51,.13) 1.5px, transparent 1.5px), linear-gradient(90deg, transparent 22px, rgba(196,40,40,.45) 22px 24.5px, transparent 24.5px); background-size: 100% 20px, 100% 100%; }
.vlak.vak--engels { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.3) 0 10px, transparent 10px 20px); }
.vlak.vak--wereld { background-image: radial-gradient(rgba(29,36,51,.2) 1.6px, transparent 1.8px); background-size: 16px 16px; }
.vlak.vak--natuur { background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.34) 0 7px, transparent 8px); background-size: 34px 30px; }
.vlak.vak--digitaal { background-image: linear-gradient(90deg, rgba(29,36,51,.14) 2px, transparent 2px), linear-gradient(rgba(255,255,255,.3) 6px, transparent 6px); background-size: 26px 100%, 100% 26px; }
.vlak.vak--kunst { background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.4) 0 9px, transparent 10px), radial-gradient(circle at 70% 70%, rgba(29,36,51,.12) 0 6px, transparent 7px); background-size: 40px 36px; }
.vlak.vak--bewegen, .vlak.vak--oranje { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.3) 0 6px, transparent 6px 22px); }
/* Een stukje echte inhoud als sticker in het vlak */
.vlak__tekst { max-width: 82%; box-sizing: border-box; background: var(--wit); border: var(--lijn); border-radius: 10px; box-shadow: 3px 3px 0 var(--inkt); padding: .22em .5em .28em; transform: rotate(var(--draai, -2deg)); font-family: var(--kop); font-weight: 800; letter-spacing: -.03em; color: var(--inkt); text-align: center; line-height: 1.05; font-size: clamp(22px, 11cqi, 46px); overflow-wrap: anywhere; }
.vlak__tekst--lang { font-size: clamp(16px, 7.6cqi, 32px); }
/* Een spelvorm-icoon als sticker in het vlak */
.vlak__icoon { width: clamp(64px, 30cqi, 140px); aspect-ratio: 1; box-sizing: border-box; display: grid; place-items: center; background: var(--wit); border: var(--lijn); border-radius: 24%; box-shadow: 4px 4px 0 var(--inkt); transform: rotate(var(--draai, -4deg)); color: var(--inkt); }
.vlak__icoon svg { width: 62%; height: 62%; }

/* ---------- Formulieren ---------- */
.veld { display: grid; gap: 8px; min-width: 0; }
.veld__label, .label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt); }
.invoer { width: 100%; box-sizing: border-box; min-width: 0; border: var(--lijn-dun); border-radius: var(--rond-s); padding: 11px 13px; font: 600 var(--t-basis) var(--ui); color: var(--inkt); background: var(--wit); }
.invoer:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 156, 0, .45); }
.invoer.groot { font: 800 22px var(--kop); letter-spacing: -.01em; padding: 13px 15px; }
.invoer.goed { background: var(--goed-zacht); }
.invoer::placeholder { color: #7C7568; font-weight: 600; }
select.invoer { appearance: auto; }
textarea.invoer { resize: vertical; line-height: 1.5; }
.zoek { padding-left: 50px; border-radius: var(--pil); font-weight: 700; font-size: 17px; background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D2433' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") 18px 50% / 20px no-repeat; }
.hint { margin: 0; font-size: var(--t-klein); color: var(--inkt-zacht); font-weight: 600; line-height: 1.55; }
.hint code { background: var(--papier-2); padding: 2px 7px; border-radius: 7px; font-size: 13px; color: var(--inkt); }

/* ---------- Meldingen ---------- */
.melding, .err { margin: 0; border: var(--lijn-dun); border-radius: var(--rond-s); padding: 11px 15px; font-weight: 700; font-size: 15px; line-height: 1.45; background: var(--info-zacht); color: var(--inkt); }
.melding--fout, .err { background: var(--fout-zacht); color: var(--fout); border-color: var(--fout); }
.melding--goed { background: var(--goed-zacht); color: #17603F; border-color: #17603F; }
.melding--info { background: var(--info-zacht); }
.melding ul { margin: 4px 0 0; padding-left: 18px; }
.melding a { color: inherit; font-weight: 800; }

/* ---------- Laden en leeg ---------- */
.laden { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--inkt-zacht); padding: 18px 0; }
.laden::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--rand-zacht); border-top-color: var(--inkt); animation: hs-draai .8s linear infinite; }
@keyframes hs-draai { to { transform: rotate(360deg); } }
.leeg { display: grid; gap: 12px; justify-items: start; background: var(--wit); border: 2.5px dashed var(--inkt); border-radius: var(--rond); padding: clamp(20px, 3vw, 30px); }
.leeg h2, .leeg h3 { margin: 0; font-family: var(--kop); font-weight: 800; letter-spacing: -.03em; font-size: var(--t-kop-3); }
.leeg p { margin: 0; color: var(--inkt-zacht); font-weight: 600; line-height: 1.55; max-width: 60ch; }

@media (max-width: 560px) {
  .paginakop { border-radius: 20px; }
  .paginakop p { font-size: var(--t-basis); }
  .paginakop__sticker { top: -14px; }
  .knop--groot { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .laden::before { animation-duration: 3s; }
  .knop, .btn-start, .btn-ghost, a.kaart, .kaart--klik { transition: none; }
}

/* Spelbeeld met een cover (GPT-illustratie) */
.vlak--hoes { aspect-ratio: 16 / 10; }
.vlak--hoes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tegel--beeld .vlak__tekst { position: relative; z-index: 1; align-self: end; margin-bottom: 7%; font-size: clamp(16px, 8cqi, 34px); }