/* Hapje, vormgeving van de dienst. Alleen variabelen uit hapje-tokens.css (sub-huisstijl Hapje v1.0). */

/* Lettertypen, zelf gehost (latin-subset van @fontsource, licentie OFL in fonts/OFL.txt) */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/fredoka-500.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/fredoka-600.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/space-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space-mono-700.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--hapje-schil);
  color: var(--hapje-inkt);
  font-family: var(--hapje-font-tekst);
  font-size: var(--hapje-ouder-tekst);
  line-height: var(--hapje-regel-tekst);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--hapje-oranje-diep); }
a:hover { color: var(--hapje-inkt); }
.code { font-family: var(--hapje-font-code); color: var(--hapje-inkt); }

.scherm {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--hapje-ruimte-6) var(--hapje-ruimte-7);
  gap: var(--hapje-ruimte-7);
}

/* Het hapmotief (handboek 7): een cirkel met een hap eruit, alleen CSS */
.hap {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--hapje-mandarijn);
  -webkit-mask: radial-gradient(circle at 88% 12%, transparent 30%, #000 31%);
          mask: radial-gradient(circle at 88% 12%, transparent 30%, #000 31%);
  flex: none;
}
.hap-groot { width: 96px; height: 96px; }
.hap-draai { animation: hapjeDraai 3s ease-in-out infinite; }
@keyframes hapjeDraai {
  0%, 18% { transform: rotate(0deg); }
  25%, 43% { transform: rotate(90deg); }
  50%, 68% { transform: rotate(180deg); }
  75%, 93% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

.kop { display: flex; align-items: center; justify-content: space-between; gap: var(--hapje-ruimte-4); }
.merk {
  display: flex;
  align-items: center;
  gap: var(--hapje-ruimte-3);
  font-family: var(--hapje-font-kop);
  font-weight: 600;
  font-size: var(--hapje-ouder-h2);
}
.ouderlink {
  display: inline-flex;
  align-items: center;
  min-height: var(--hapje-tik-ouder);
  padding: 0 var(--hapje-ruimte-4);
  border-radius: var(--hapje-rond-pil);
  font-size: var(--hapje-ouder-klein);
  color: var(--hapje-inkt-zacht);
  text-decoration: none;
  border: 1px solid var(--hapje-lijn);
  background: var(--hapje-wit);
}

.inhoud {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--hapje-ruimte-7);
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

h1 {
  margin: 0;
  text-align: center;
  font-family: var(--hapje-font-kop);
  font-weight: 600;
  font-size: var(--hapje-kind-titel);
  line-height: var(--hapje-regel-kop);
}
h1.links { text-align: left; font-size: var(--hapje-kind-titel-staand); }
.kind-tekst {
  margin: 0;
  font-family: var(--hapje-font-kop);
  font-weight: 500;
  font-size: var(--hapje-kind-tekst);
  line-height: 1.35;
  color: var(--hapje-inkt-zacht);
  text-align: center;
}
.voet { text-align: center; font-size: var(--hapje-ouder-klein); color: var(--hapje-inkt-zacht); }
.klein, .ouderregel { margin: 0; font-size: var(--hapje-ouder-klein); line-height: 1.5; color: var(--hapje-inkt-zacht); }

/* Knoppen: minimaal 80 px hoog voor kinderen */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hapje-tik-kind);
  min-width: var(--hapje-tik-kind);
  padding: 0 var(--hapje-ruimte-7);
  border: 0;
  border-radius: var(--hapje-rond-pil);
  background: var(--hapje-mandarijn);
  color: var(--hapje-inkt);
  font-family: var(--hapje-font-kop);
  font-weight: 600;
  font-size: var(--hapje-kind-knop-min);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--hapje-schaduw-2);
  touch-action: manipulation;
  transition: transform var(--hapje-duur-kort) var(--hapje-curve), box-shadow var(--hapje-duur-kort) var(--hapje-curve);
}
.knop:hover { color: var(--hapje-inkt); }
.knop:active { transform: scale(0.97); box-shadow: var(--hapje-schaduw-ingedrukt); }
.knop:focus-visible, .speler:focus-visible, .tegel:focus-visible, .code-invoer:focus-visible { outline: none; box-shadow: var(--hapje-focus); }
.knop-salie { background: var(--hapje-salie); color: var(--hapje-wit); }
.knop-salie:hover { color: var(--hapje-wit); }
.knop-wit { background: var(--hapje-wit); border: 2px solid var(--hapje-lijn); box-shadow: var(--hapje-schaduw-1); }

/* Fouten: Perzik, nooit rood */
.fout {
  margin: 0;
  padding: var(--hapje-ruimte-4) var(--hapje-ruimte-5);
  background: var(--hapje-perzik);
  border: 2px solid var(--hapje-mandarijn);
  border-radius: var(--hapje-rond-m);
  color: var(--hapje-inkt);
  font-family: var(--hapje-font-kop);
  font-weight: 500;
  font-size: var(--hapje-kind-tekst);
  line-height: 1.35;
}

/* 8.1 Koppelen */
.koppel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.koppel-uitleg {
  background: var(--hapje-room);
  padding: var(--hapje-ruimte-8) var(--hapje-ruimte-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--hapje-ruimte-5);
}
.koppel-uitleg h1 { text-align: left; font-size: var(--hapje-kind-titel-staand); }
.uitleg { margin: 0; font-size: 20px; color: var(--hapje-inkt-zacht); }
.stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hapje-ruimte-4); counter-reset: stap; }
.stappen li { display: flex; align-items: flex-start; gap: var(--hapje-ruimte-4); font-size: 19px; line-height: 1.5; counter-increment: stap; }
.stappen li::before {
  content: counter(stap);
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--hapje-wit);
  display: grid; place-items: center;
  font-family: var(--hapje-font-kop); font-weight: 600; font-size: var(--hapje-ouder-h3);
}
.koppel-formulier {
  padding: var(--hapje-ruimte-8) var(--hapje-ruimte-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--hapje-ruimte-5);
}
.code-label { font-size: var(--hapje-ouder-tekst); font-weight: 600; }
.code-invoer {
  width: 100%;
  min-height: 104px;
  border: 2px solid var(--hapje-lijn);
  border-radius: var(--hapje-rond-s);
  background: var(--hapje-wit);
  color: var(--hapje-inkt);
  font-family: var(--hapje-font-code);
  font-weight: 700;
  font-size: var(--hapje-code);
  letter-spacing: 0.25em;
  text-align: center;
}

/* 8.2 Kiezen */
.spelers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--hapje-tik-afstand); }
.speler {
  width: 100%;
  min-height: var(--hapje-spelerknop);
  min-width: var(--hapje-tik-kind);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hapje-ruimte-4);
  padding: var(--hapje-ruimte-5);
  background: var(--hapje-wit);
  border: 4px solid var(--kleur);
  border-radius: var(--hapje-rond-l);
  box-shadow: var(--hapje-schaduw-2);
  color: var(--hapje-inkt);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--hapje-duur-kort) var(--hapje-curve), box-shadow var(--hapje-duur-kort) var(--hapje-curve);
}
.speler:active { transform: scale(0.97); box-shadow: var(--hapje-schaduw-ingedrukt); }
.speler-emoji {
  width: 104px; height: 104px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--kleur);
  box-shadow: inset 0 0 0 3px var(--hapje-speler-rand);
  font-size: var(--hapje-kind-emoji);
  line-height: 1;
}
.speler-naam { font-family: var(--hapje-font-kop); font-weight: 600; font-size: var(--hapje-kind-naam); line-height: var(--hapje-regel-kop); }

/* 8.3 Tegels */
.speler-chip { display: flex; align-items: center; gap: var(--hapje-ruimte-4); }
.chip-emoji {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--kleur);
  box-shadow: inset 0 0 0 3px var(--hapje-speler-rand);
  font-size: 36px; line-height: 1;
}
.chip-naam { font-family: var(--hapje-font-kop); font-weight: 600; font-size: var(--hapje-kind-naam); }
.tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--hapje-tik-afstand); }
.tegel {
  min-height: var(--hapje-tegel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hapje-ruimte-3);
  padding: var(--hapje-ruimte-5);
  background: var(--hapje-wit);
  border-radius: var(--hapje-rond-l);
  box-shadow: var(--hapje-schaduw-1);
  color: var(--hapje-inkt);
  text-decoration: none;
  touch-action: manipulation;
  transition: transform var(--hapje-duur-kort) var(--hapje-curve);
}
.tegel:hover { color: var(--hapje-inkt); }
.tegel:active { transform: scale(0.97); }
.tegels li:nth-child(even) .hap { background: var(--hapje-salie); }
.tegel-naam { font-family: var(--hapje-font-kop); font-weight: 600; font-size: var(--hapje-kind-tegel); text-align: center; }
.tegel-rust { background: var(--hapje-room); }
.tegel-rust .hap { opacity: 0.5; }
.pil {
  padding: var(--hapje-ruimte-1) var(--hapje-ruimte-4);
  border-radius: var(--hapje-rond-pil);
  background: var(--hapje-wit);
  font-family: var(--hapje-font-kop);
  font-weight: 500;
  font-size: var(--hapje-kind-knop-min);
}

/* 8.4, 8.8 en 404: rustige middenschermen */
.midden { align-items: center; justify-content: center; text-align: center; gap: var(--hapje-ruimte-6); }
.midden .kind-tekst, .midden .ouderregel { max-width: 640px; }
.midden .ouderregel { margin-top: var(--hapje-ruimte-5); }
.midden .fout { max-width: 640px; }
.cirkel { width: 200px; height: 200px; border-radius: 50%; background: var(--hapje-munt); display: grid; place-items: center; }

.ouder .pil { font-size: var(--hapje-ouder-klein); }
/* Ouderschermen: welkom, inloggen en beheer. Rustig, leesbaar, tikdoelen van minstens 48 px. */
.ouder { max-width: 880px; margin: 0 auto; padding: var(--hapje-ruimte-6) var(--hapje-ruimte-5) var(--hapje-ruimte-8);
  display: flex; flex-direction: column; gap: var(--hapje-ruimte-5); }
.ouder h1 { font-size: var(--hapje-ouder-h1); text-align: left; }
.ouder h2 { margin: 0; font-family: var(--hapje-font-kop); font-weight: 600; font-size: var(--hapje-ouder-h2); line-height: var(--hapje-regel-kop); }
.ouder h3 { margin: var(--hapje-ruimte-3) 0 0; font-family: var(--hapje-font-kop); font-weight: 600; font-size: var(--hapje-ouder-h3); }
.ouder p { margin: 0; }
.midden-ouder { align-items: center; justify-content: center; text-align: center; min-height: 100%; }
.midden-ouder h1 { text-align: center; }
.ouder-kop { display: flex; align-items: center; gap: var(--hapje-ruimte-4); }
.ouder-merk { display: flex; align-items: center; gap: var(--hapje-ruimte-4); }
.logo { width: 112px; height: auto; margin: calc(112px * var(--hapje-logo-ruimte) / 2); flex: none; }
.kaart { background: var(--hapje-wit); border: 1px solid var(--hapje-lijn); border-radius: var(--hapje-rond-m);
  box-shadow: var(--hapje-schaduw-1); padding: var(--hapje-ruimte-5); display: flex; flex-direction: column; gap: var(--hapje-ruimte-4); }
.voorwaarden { max-height: 420px; overflow-y: auto; padding: var(--hapje-ruimte-4); background: var(--hapje-room); border-radius: var(--hapje-rond-s); }
.voorwaarden h1, .voorwaarden h2 { font-size: var(--hapje-ouder-h3); margin: var(--hapje-ruimte-4) 0 var(--hapje-ruimte-2); }
.voorwaarden p { margin: 0 0 var(--hapje-ruimte-3); }
.beheer .voorwaarden, .welkom .voorwaarden, .voorwaarden-pagina .voorwaarden { max-height: none; }
.gewijzigd { background: var(--hapje-perzik); border-left: 4px solid var(--hapje-mandarijn); padding: 0 var(--hapje-ruimte-3); margin: var(--hapje-ruimte-2) 0; border-radius: var(--hapje-rond-s); }
.velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--hapje-ruimte-4); }
.veld { display: flex; flex-direction: column; gap: var(--hapje-ruimte-1); font-size: var(--hapje-ouder-klein); font-weight: 600; }
.veld.breed { grid-column: 1 / -1; }
.veld input, .veld select { min-height: var(--hapje-tik-ouder); padding: 0 var(--hapje-ruimte-3); border: 2px solid var(--hapje-lijn);
  border-radius: var(--hapje-rond-s); background: var(--hapje-wit); color: var(--hapje-inkt); font: inherit; font-weight: 400; }
.veld input:focus-visible, .veld select:focus-visible, .tekstblok:focus-visible { outline: none; box-shadow: var(--hapje-focus); }
.code-veld { font-family: var(--hapje-font-code); text-transform: uppercase; letter-spacing: 0.12em; }
.vakjes { display: flex; flex-direction: column; gap: var(--hapje-ruimte-3); }
.vakje { display: flex; gap: var(--hapje-ruimte-3); align-items: flex-start; min-height: var(--hapje-tik-ouder); }
.vakje input { width: 24px; height: 24px; margin-top: 2px; flex: none; accent-color: var(--hapje-salie); }
.knop-ouder { min-height: var(--hapje-tik-ouder); min-width: var(--hapje-tik-ouder); padding: 0 var(--hapje-ruimte-5); font-size: var(--hapje-ouder-tekst); align-self: flex-start; }
.ouderlink { cursor: pointer; font-family: inherit; }
button.ouderlink:hover { color: var(--hapje-inkt); }
.sprong { display: flex; flex-wrap: wrap; gap: var(--hapje-ruimte-3); }
.sprong a { display: inline-flex; align-items: center; min-height: var(--hapje-tik-ouder); padding: 0 var(--hapje-ruimte-4);
  border-radius: var(--hapje-rond-pil); background: var(--hapje-room); text-decoration: none; }
.rijen, .lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hapje-ruimte-4); }
.lijst { gap: var(--hapje-ruimte-2); }
.rij-blok { display: flex; flex-direction: column; gap: var(--hapje-ruimte-3); padding-bottom: var(--hapje-ruimte-4); border-bottom: 1px solid var(--hapje-lijn); }
.rij-kop { display: flex; justify-content: space-between; gap: var(--hapje-ruimte-4); align-items: flex-start; flex-wrap: wrap; }
.inline { display: flex; flex-direction: column; gap: var(--hapje-ruimte-3); }
.inline-rij { display: flex; gap: var(--hapje-ruimte-3); align-items: flex-end; flex-wrap: wrap; }
.inline-klein { display: inline; margin-left: var(--hapje-ruimte-2); }
details summary { cursor: pointer; min-height: var(--hapje-tik-ouder); display: flex; align-items: center; font-weight: 600; }
.tekstblok { width: 100%; padding: var(--hapje-ruimte-3); border: 2px solid var(--hapje-lijn); border-radius: var(--hapje-rond-s);
  background: var(--hapje-room); color: var(--hapje-inkt); font-family: var(--hapje-font-code); font-size: var(--hapje-ouder-klein); resize: vertical; }
.pil-rust { background: var(--hapje-perzik); }
.gelukt { padding: var(--hapje-ruimte-3) var(--hapje-ruimte-4); background: var(--hapje-munt); color: var(--hapje-salie-diep); border-radius: var(--hapje-rond-s); }
.grote-code { font-size: var(--hapje-code); font-weight: 700; letter-spacing: 0.1em; }
.link-blok { word-break: break-all; padding: var(--hapje-ruimte-3); background: var(--hapje-room); border-radius: var(--hapje-rond-s); }
.balk { height: 12px; background: var(--hapje-room); border-radius: var(--hapje-rond-pil); overflow: hidden; }
.balk span { display: block; height: 100%; background: var(--hapje-salie); }
.chip-emoji-klein { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: var(--hapje-ruimte-3);
  border-radius: 50%; background: var(--kleur); box-shadow: inset 0 0 0 2px var(--hapje-speler-rand); font-size: 22px; }

/* iPad staand en smalle schermen */
@media (orientation: portrait), (max-width: 820px) {
  .scherm { padding: var(--hapje-ruimte-7) var(--hapje-ruimte-6); }
  h1 { font-size: var(--hapje-kind-titel-staand); }
  .spelers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .speler { min-height: calc(var(--hapje-spelerknop) + var(--hapje-ruimte-7)); }
  .koppel { grid-template-columns: 1fr; padding: 0; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hap-draai { animation: none; }
}