/* Gedeelde stijl voor de tools voor groep 1-3 van Mijn Leerplein (Telbeestjes, Klankenexpres, Letterkoffer, Klankenbrug).
   Grote knoppen, weinig tekst, alles wordt voorgelezen. Kleuren per tool staan in index.html (--acc, --acc-d, --acc-l, --bg).
   Andika (SIL Open Font License) zit lokaal in de map. */
@font-face { font-family: "Andika"; font-weight: 400; font-display: swap; src: url("andika-400.woff2") format("woff2"); }
@font-face { font-family: "Andika"; font-weight: 700; font-display: swap; src: url("andika-700.woff2") format("woff2"); }
:root {
  --acc: #f76707; --acc-d: #c24d00; --acc-l: #fff4e6; --bg: #fff8ef;
  --ink: #1d2533; --muted: #5d6779; --line: #e3dccf;
  --good: #2f9e44; --good-l: #ebfbee; --bad: #e03131; --gold: #fcc419;
  --word: "Andika", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--word); font-size: 20px; line-height: 1.35;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
.hidden { display: none !important; }
.emo { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; line-height: 1; }

/* balk bovenaan */
.k-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--acc); color: #fff; position: sticky; top: 0; z-index: 40; height: 66px; box-shadow: 0 4px 0 var(--acc-d); }
.k-top .titel { flex: 1; font-weight: 700; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rond { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 27px; }
.rond:active { transform: scale(.93); }
.rond.wit { background: #fff; box-shadow: 0 4px 0 var(--line); border: 2px solid var(--line); }
.rond.praat { animation: puls .8s infinite; background: #fff3bf; }
@keyframes puls { 50% { transform: scale(1.1); } }

main { max-width: 1000px; margin: 0 auto; padding: 14px 14px 40px; }

/* startscherm */
.k-home { text-align: center; }
.k-held { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0 2px; flex-wrap: wrap; }
.k-held .mas { font-size: 92px; animation: wiebel 2.4s ease-in-out infinite; display: inline-block; }
.k-held h1 { font-size: 40px; margin: 0; color: var(--acc-d); line-height: 1.05; }
.k-held .ond { font-size: 23px; color: var(--ink); }
@keyframes wiebel { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-6px); } }
.k-luister { margin: 8px auto 14px; }
.k-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 760px; margin: 0 auto; }
.k-lv { position: relative; background: #fff; border-radius: 26px; border: 3px solid var(--line); box-shadow: 0 6px 0 var(--line); padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 150px; transition: transform .1s; }
.k-lv:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.k-lv .nr { position: absolute; left: 10px; top: 6px; font-weight: 700; font-size: 22px; color: var(--acc-d); }
.k-lv .ico { font-size: 54px; margin-top: 8px; }
.k-lv .wat { font-size: 15px; color: var(--muted); min-height: 20px; text-align: center; line-height: 1.1; }
.k-lv .st { font-size: 22px; letter-spacing: -2px; }
.k-lv .st .uit { filter: grayscale(1); opacity: .28; }
.k-lv.dicht { opacity: .5; }
.k-lv.dicht .ico { filter: grayscale(1); }
.k-lv.dicht::after { content: "🔒"; position: absolute; right: 10px; top: 6px; font-size: 22px; }
.k-lv.nu { border-color: var(--acc); box-shadow: 0 6px 0 var(--acc-d); animation: wip 1.6s ease-in-out infinite; }
@keyframes wip { 50% { transform: translateY(-5px); } }
.k-volw { max-width: 760px; margin: 26px auto 0; text-align: left; background: #fff; border-radius: 18px; border: 2px solid var(--line); padding: 4px 16px; font-family: system-ui, "Segoe UI", sans-serif; font-size: 16px; color: var(--muted); }
.k-volw summary { cursor: pointer; padding: 10px 0; font-weight: 700; color: var(--ink); }
.k-volw p { margin: 6px 0 10px; }
.k-volw label { display: flex; gap: 8px; align-items: center; margin: 8px 0; color: var(--ink); }
.k-volw select { font: inherit; max-width: 100%; }
.k-volw .knop { background: var(--acc-l); border: 2px solid var(--line); border-radius: 12px; padding: 6px 12px; font-weight: 700; color: var(--acc-d); margin: 4px 6px 4px 0; }

/* spel */
.k-spel { display: flex; flex-direction: column; gap: 10px; }
.k-balk { display: flex; align-items: center; gap: 10px; }
.k-stip { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.k-stip i { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--line); display: inline-block; transition: all .3s; }
.k-stip i.goed { background: var(--good); border-color: var(--good); }
.k-stip i.half { background: var(--gold); border-color: #e0a800; }
.k-stip i.nu { border-color: var(--acc); transform: scale(1.25); }
.k-tijd { height: 12px; background: rgba(0,0,0,.07); border-radius: 8px; overflow: hidden; }
.k-tijd i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #8ce99a, #ffd43b); border-radius: 8px; }
.k-tijd.leeg { visibility: hidden; }
.k-scene { position: relative; }
.k-veld { position: relative; min-height: 380px; }

/* intro van een level */
.k-intro { text-align: center; padding: 20px 10px; }
.k-intro .mas { font-size: 110px; display: inline-block; animation: wiebel 2.4s ease-in-out infinite; }
.k-intro .voorbeeld { font-size: 64px; margin: 6px 0 16px; }
.k-go { width: 132px; height: 132px; border-radius: 50%; background: var(--good); color: #fff; font-size: 64px; box-shadow: 0 8px 0 #237032; display: inline-flex; align-items: center; justify-content: center; animation: wip 1.4s ease-in-out infinite; }
.k-go:active { transform: translateY(6px); box-shadow: 0 2px 0 #237032; }
.k-intro .rij { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 10px; }

/* einde van een level */
.k-einde { text-align: center; padding: 20px 10px; }
.k-einde .sterren { font-size: 84px; margin: 6px 0; letter-spacing: 4px; }
.k-einde .sterren span { display: inline-block; animation: plop .5s both; }
.k-einde .sterren span.uit { filter: grayscale(1); opacity: .25; }
.k-einde .sterren span:nth-child(2) { animation-delay: .35s; }
.k-einde .sterren span:nth-child(3) { animation-delay: .7s; }
.k-einde .mas { font-size: 100px; display: inline-block; animation: spring .7s ease-in-out infinite alternate; }
.k-einde .rij { display: flex; justify-content: center; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
.k-einde .rond { width: 96px; height: 96px; flex-basis: 96px; font-size: 46px; }
@keyframes plop { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes spring { to { transform: translateY(-18px); } }

/* algemene keuzeknoppen (plaatjes, getallen) */
.k-keus { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.k-kaart { min-width: 120px; min-height: 120px; padding: 10px; background: #fff; border-radius: 26px; border: 4px solid var(--line); box-shadow: 0 6px 0 var(--line); display: inline-flex; align-items: center; justify-content: center; flex-direction: column; font-size: 66px; line-height: 1; transition: transform .12s, opacity .3s; }
.k-kaart:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.k-kaart .cijfer { font-family: var(--word); font-weight: 700; font-size: 62px; color: var(--acc-d); }
.k-goed { border-color: var(--good) !important; background: var(--good-l) !important; animation: hup .45s; }
.k-fout { border-color: var(--bad) !important; animation: schud .45s; }
.k-weg { opacity: .3; pointer-events: none; }
.k-wijs { animation: wijs 1s ease-in-out infinite !important; border-color: var(--gold) !important; box-shadow: 0 0 0 6px rgba(252,196,25,.55) !important; }
@keyframes hup { 40% { transform: scale(1.15) translateY(-6px); } }
@keyframes schud { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@keyframes wijs { 50% { transform: scale(1.1); } }

/* stippen (zoals op een dobbelsteen) */
.k-dob { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 84px; height: 84px; gap: 4px; }
.k-dob b { border-radius: 50%; background: var(--acc-d); margin: 3px; }
.k-dob.groot { width: 100px; height: 100px; }
.k-tien { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 120px; }
.k-tien b { aspect-ratio: 1; border-radius: 50%; background: var(--acc-d); }
.k-tien b.leeg { background: transparent; border: 2px dashed var(--line); }

/* confetti */
.k-conf { position: fixed; top: -20px; font-size: 30px; z-index: 60; pointer-events: none; animation: val linear forwards; }
@keyframes val { to { transform: translateY(110vh) rotate(540deg); } }

/* klank-tegels (letters) */
.k-tegel { min-width: 74px; height: 86px; padding: 0 12px; border-radius: 18px; background: #fff; border: 4px solid var(--line); box-shadow: 0 5px 0 var(--line); display: inline-flex; align-items: center; justify-content: center; font-family: var(--word); font-weight: 700; font-size: 52px; color: var(--ink); transition: transform .25s, background .25s, border-color .25s; }
.k-tegel.licht { background: #fff3bf; border-color: var(--gold); transform: translateY(-8px) scale(1.08); }

.k-melding { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); background: #1d2533; color: #fff; padding: 10px 16px; border-radius: 14px; font-family: system-ui, sans-serif; font-size: 15px; z-index: 70; max-width: 92vw; }

@media (max-width: 640px) {
  body { font-size: 18px; }
  .k-top { height: 58px; }
  .k-top .titel { font-size: 19px; }
  .rond { width: 46px; height: 46px; flex-basis: 46px; font-size: 23px; }
  .k-held .mas { font-size: 70px; }
  .k-held h1 { font-size: 30px; }
  .k-held .ond { font-size: 19px; }
  .k-pad { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .k-lv { min-height: 128px; }
  .k-lv .ico { font-size: 44px; }
  .k-kaart { min-width: 92px; min-height: 92px; font-size: 50px; border-radius: 20px; }
  .k-kaart .cijfer { font-size: 46px; }
  .k-keus { gap: 10px; }
  .k-dob { width: 64px; height: 64px; }
  .k-tien { width: 92px; }
  .k-tegel { min-width: 56px; height: 68px; font-size: 40px; padding: 0 8px; }
  .k-veld { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}