/* Wondertocht spel — game-stijl. Palet gedeeld met de site: lucht, zon, navy. */
@font-face{font-family:"Lilita One";src:url(fonts/lilita.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{--navy:#0b1d4d;--navy2:#061133;--blauw:#1565e0;--lucht:#3fa9ff;--diep:#0b2f8a;--zon:#ffd21f;--zon2:#fff27a;--zonrand:#e8a200;--rood:#e53935;--rood2:#ff6b5e;--roodrand:#b71c1c;--groen:#2fb83c;--groen2:#5ee36a;--groenrand:#1f8f2b;--wit:#fff;--ijs:#eaf4ff;--papier:#f4f9ff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:"Nunito",system-ui,sans-serif;font-weight:700;color:var(--navy);font-size:20px;line-height:1.35;-webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:manipulation;
  background:radial-gradient(120% 80% at 70% -10%,var(--lucht) 0%,var(--blauw) 45%,var(--diep) 100%) fixed;min-height:100%}

#app{min-height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:relative;z-index:0}
.laden{margin:auto;font-size:1.2rem;color:#fff}
button{font:inherit;color:inherit}
:focus-visible{outline:4px solid var(--zon);outline-offset:3px}
.titel,h1{font-family:"Lilita One",Impact,sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.02}
h1{font-size:clamp(2rem,4.8vw,3.2rem);margin:0;color:#fff;-webkit-text-stroke:3px var(--navy);paint-order:stroke fill;text-shadow:0 5px 0 var(--navy);text-wrap:balance}
h2{font-family:"Lilita One",Impact,sans-serif;font-weight:400;font-size:1.7rem;margin:.2em 0}
.klein{font-size:.95rem;margin:.3em 0;font-weight:700;opacity:.85}

/* kop */
.kop{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;gap:12px}
.kop-merk{display:flex;gap:12px;align-items:center;min-width:0}
.ster-pil{display:flex;align-items:center;gap:6px;background:#fff;border:3px solid var(--navy);border-radius:999px;padding:5px 14px 5px 8px;box-shadow:0 4px 0 var(--navy);font-weight:900;font-size:1.05rem;flex:none}
.ster-pil .ico{display:grid}
.kop-tekst{color:#fff;font-weight:900;font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 0 var(--navy)}
.kop-knoppen{display:flex;gap:10px}
.icoon-knop{width:52px;height:52px;border-radius:16px;border:3px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 0 var(--navy);padding:0}
.icoon-knop:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}
.ico{display:grid;place-items:center}
.voortgang{height:16px;margin:0 20px;background:rgba(6,17,51,.35);border:3px solid var(--navy);border-radius:99px;overflow:hidden}
.voortgang span{display:block;height:100%;background:linear-gradient(var(--zon2),var(--zon));box-shadow:inset 0 -3px 0 var(--zonrand);border-radius:99px;transition:width .5s}

/* kaart */
.kaart-vlak{flex:1;display:flex;padding:18px 20px 8px;justify-content:center;align-items:flex-start}
.kaart{width:100%;max-width:900px;background:linear-gradient(#fff,var(--papier));border:4px solid var(--navy);border-radius:34px;padding:clamp(18px,3.4vw,36px);box-shadow:0 10px 0 var(--navy),0 30px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:16px;animation:in .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes in{from{transform:translateY(24px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.kaart-nummer{margin:0;align-self:flex-start;background:var(--rood);color:#fff;border:3px solid var(--navy);border-radius:12px;padding:4px 12px;font-weight:900;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 3px 0 var(--navy)}
.kaart-kop{display:flex;gap:16px;align-items:center}
.kaart-emoji{flex:none;width:clamp(64px,9vw,88px);height:clamp(64px,9vw,88px);display:grid;place-items:center;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;background:linear-gradient(var(--zon2),var(--zon));border:4px solid var(--navy);border-radius:24px;box-shadow:inset 0 -6px 0 var(--zonrand),0 5px 0 var(--navy);transform:rotate(-4deg)}
.kaart-tekst{font-size:clamp(1.2rem,2.6vw,1.55rem);margin:0;font-weight:800}
.groot-emoji{font-size:6rem;line-height:1;text-align:center;filter:drop-shadow(0 6px 0 rgba(11,29,77,.25))}
.groot-emoji.klein{font-size:3.6rem}
.midden{display:flex;flex-direction:column;align-items:center;gap:22px;padding:10px 0}

/* knoppen: 3D game-knoppen */
.knop{font-family:"Nunito",system-ui,sans-serif;font-weight:900;font-size:1.2rem;min-height:58px;padding:12px 26px;border-radius:20px;border:4px solid var(--navy);background:linear-gradient(var(--zon2),var(--zon));color:var(--navy);cursor:pointer;box-shadow:inset 0 -6px 0 var(--zonrand),0 6px 0 var(--navy);transition:transform .08s,box-shadow .08s}
.knop:active:not(:disabled){transform:translateY(5px);box-shadow:inset 0 -3px 0 var(--zonrand),0 1px 0 var(--navy)}
.knop:disabled{filter:grayscale(.7);opacity:.55;cursor:not-allowed}
.knop-groot{font-family:"Lilita One",Impact,sans-serif;font-weight:400;font-size:1.7rem;letter-spacing:.02em;min-height:72px;padding:14px 36px;border-radius:24px}
.knop-klein{font-size:1rem;min-height:48px;padding:8px 16px;background:#fff;box-shadow:inset 0 -4px 0 #d3e2f5,0 4px 0 var(--navy);border-radius:16px}
.knop-groen{background:linear-gradient(var(--groen2),var(--groen));color:#fff;box-shadow:inset 0 -6px 0 var(--groenrand),0 6px 0 var(--navy);text-shadow:0 2px 0 var(--groenrand)}
.knop-groen:active:not(:disabled){box-shadow:inset 0 -3px 0 var(--groenrand),0 1px 0 var(--navy)}
.knop-rood{background:linear-gradient(var(--rood2),var(--rood));color:#fff;box-shadow:inset 0 -6px 0 var(--roodrand),0 6px 0 var(--navy);text-shadow:0 2px 0 var(--roodrand)}
.knop-rond{width:58px;height:58px;min-height:0;padding:0;border-radius:18px;background:#fff;font-size:1.4rem;box-shadow:inset 0 -4px 0 #d3e2f5,0 4px 0 var(--navy)}
.knop-link{background:none;border:0;box-shadow:none;text-decoration:underline;font-size:1rem;min-height:44px;color:var(--navy);font-weight:800}
.knop-link:active{transform:none}
.acties{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.voet{display:flex;justify-content:center;padding:8px 20px 26px}

/* gedeelde 'tegel' */
.lijst li,.vink,.bingo-cel,.optie,.dobbel-vak,.slot-som,.taal-symbool,.toets,.random-uit,.stop-bord,.wk-scherm,.buzzer-vraag{border:4px solid var(--navy);box-shadow:0 5px 0 var(--navy)}

/* opdracht */
.lijst{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lijst li{background:var(--ijs);border-radius:20px;padding:12px 18px;font-size:1.3rem;font-weight:900}
.vinkenlijst{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.vink{display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:12px 16px;font-size:1.25rem;font-weight:900;cursor:pointer;text-align:left;min-height:66px}
.vink:active{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}
.vink-kleur{width:36px;height:36px;border-radius:12px;border:3px solid var(--navy);flex:none}
.vink-teken{font-size:1.8rem;flex:none}
.vink-tekst{flex:1}
.vink-vink{width:36px;height:36px;border-radius:50%;border:3px solid var(--navy);display:grid;place-items:center;color:transparent;background:var(--ijs);font-weight:900}
.vink[aria-pressed=true]{background:linear-gradient(var(--zon2),var(--zon))}
.vink[aria-pressed=true] .vink-vink{background:var(--groen);color:#fff}
.timer,.teller,.teller-vrij{display:flex;flex-direction:column;align-items:center;gap:14px}
.teller-vrij{flex-direction:row;justify-content:center}
.timer-getal,.teller-getal{font-family:"Lilita One",Impact,sans-serif;font-size:4.4rem;line-height:1;color:#fff;-webkit-text-stroke:3px var(--navy);paint-order:stroke fill;text-shadow:0 5px 0 var(--navy)}
.grootcijfer{font-size:5.4rem;min-width:2ch;text-align:center}
.teller-balk{width:100%;height:24px;border:4px solid var(--navy);border-radius:99px;overflow:hidden;background:var(--ijs)}
.teller-balk span{display:block;height:100%;background:linear-gradient(var(--groen2),var(--groen));transition:width .15s}

/* keuze */
.vraag{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:900;margin:0}
.hints{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.hints li{background:var(--ijs);border:3px dashed var(--blauw);border-radius:16px;padding:10px 14px;font-size:1.15rem}
.hints li::before{content:"Hint: ";color:var(--blauw);font-weight:900}
.opties{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.optie{font-family:inherit;font-size:1.35rem;font-weight:900;min-height:76px;padding:14px 18px;background:#fff;border-radius:22px;cursor:pointer;color:var(--navy)}
.optie:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--navy)}
.optie.goed{background:linear-gradient(var(--groen2),var(--groen));color:#fff;text-shadow:0 2px 0 var(--groenrand)}
.optie.fout{background:#ffe0dd;text-decoration:line-through;opacity:.7;box-shadow:none;transform:translateY(4px)}
.optie:disabled{cursor:default}
.feedback{margin:0;min-height:1.4em;font-weight:900;font-size:1.25rem;text-align:center}

/* bingo */
.bingo-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bingo-cel{position:relative;aspect-ratio:1.3;font-family:inherit;font-weight:900;font-size:clamp(1.05rem,2.6vw,1.5rem);background:#fff;border-radius:22px;cursor:pointer;padding:8px;display:grid;place-items:center;text-align:center;color:var(--navy)}
.bingo-cel:active{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}
.bingo-vink{position:absolute;inset:-12px -12px auto auto;width:40px;height:40px;border-radius:50%;background:var(--groen);border:3px solid var(--navy);color:#fff;display:none;place-items:center;font-weight:900}
.bingo-cel[aria-pressed=true]{background:linear-gradient(#4f9dff,var(--blauw));color:#fff;text-shadow:0 2px 0 var(--diep)}
.bingo-cel[aria-pressed=true] .bingo-vink{display:grid}

/* random */
.random{display:flex;flex-direction:column;align-items:center;gap:16px}
.random-uit{width:100%;min-height:160px;display:grid;place-items:center;text-align:center;background:linear-gradient(#fff,var(--ijs));border-radius:26px;padding:18px;font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:900}
.dobbel-rij{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.dobbel-vak{background:#fff;border-radius:22px;padding:14px;text-align:center;display:grid;gap:6px}
.dobbel-label{font-size:.85rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--blauw)}
.dobbel-woord{font-family:"Lilita One",Impact,sans-serif;font-size:1.9rem}

/* camera, editor */
.camera{display:flex;flex-direction:column;gap:14px;align-items:center}
.foto-groot,.editor-vlak{width:100%;max-height:58vh;object-fit:contain;border:4px solid var(--navy);border-radius:22px;background:#fff;touch-action:none;box-shadow:0 5px 0 var(--navy)}
.editor{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.editor-gereedschap{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.knop.aan{background:linear-gradient(var(--zon2),var(--zon));box-shadow:inset 0 -4px 0 var(--zonrand),0 0 0 4px var(--navy)}
.sticker-tray{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sticker-knop{font-size:2rem;min-height:66px;min-width:66px;padding:4px 10px;background:#fff;box-shadow:inset 0 -4px 0 #d3e2f5,0 4px 0 var(--navy)}
.swatch{width:42px;height:42px;border-radius:14px;border:3px solid var(--navy);cursor:pointer}
.swatch.aan{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--navy)}
.collage{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.collage img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;border:4px solid var(--navy);transform:rotate(-2deg);box-shadow:0 5px 0 var(--navy)}
.collage img:nth-child(even){transform:rotate(2deg)}

/* tekenen */
.tekenen{display:flex;flex-direction:column;gap:12px;align-items:center}
.tekenbalk{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.tekenvlak{width:100%;max-width:calc(52vh*1.5625);aspect-ratio:1000/640;border:4px solid var(--navy);border-radius:22px;background:#fff;touch-action:none;box-shadow:0 5px 0 var(--navy)}
.dikte{width:48px;height:48px;border-radius:14px;border:3px solid var(--navy);background:#fff;display:grid;place-items:center;cursor:pointer}
.dikte span{display:block;background:var(--navy);border-radius:50%}

/* memory */
.memory{display:grid;gap:12px}
.mem{position:relative;aspect-ratio:1;border:0;background:none;font-size:2.6rem;cursor:pointer;padding:0;perspective:600px}
.mem-voor,.mem-achter{position:absolute;inset:0;display:grid;place-items:center;border-radius:22px;border:4px solid var(--navy);box-shadow:0 5px 0 var(--navy);backface-visibility:hidden;transition:transform .4s}
.mem-voor{background:linear-gradient(#4f9dff,var(--blauw));color:#fff;font-family:"Lilita One",Impact,sans-serif;font-size:2.6rem;-webkit-text-stroke:2px var(--navy);paint-order:stroke fill}
.mem-achter{background:#fff;transform:rotateY(180deg);font-size:3.4rem}
.mem.om .mem-voor,.mem.klaar .mem-voor{transform:rotateY(180deg)}
.mem.om .mem-achter,.mem.klaar .mem-achter{transform:none}
.mem.klaar .mem-achter{background:linear-gradient(var(--zon2),var(--zon))}

/* codeslot */
.code{display:flex;flex-direction:column;gap:16px;align-items:center}
.slot-sommen{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.slot-som{display:flex;gap:10px;align-items:center;background:#fff;border-radius:20px;padding:10px 16px;font-family:"Lilita One",Impact,sans-serif;font-size:1.9rem}
.slot-vak{display:grid;place-items:center;width:50px;height:58px;background:var(--ijs);border:3px solid var(--navy);border-radius:14px}
.toetsen{display:grid;grid-template-columns:repeat(5,minmax(60px,78px));gap:12px}
.toets{font-family:"Lilita One",Impact,sans-serif;font-weight:400;font-size:1.9rem;min-height:68px;background:#fff;border-radius:18px;cursor:pointer;padding:0;color:var(--navy)}
.toets:active{transform:translateY(4px);box-shadow:0 1px 0 var(--navy)}
.taal-code,.taal-antwoord{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.taal-symbool{font-size:3rem;background:#fff;border-radius:18px;padding:2px 10px}
.taal-vak{display:grid;place-items:center;width:54px;height:64px;border:3px solid var(--navy);border-radius:14px;font-family:"Lilita One",Impact,sans-serif;font-size:2.1rem;background:var(--ijs)}
.taal-legenda{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;font-size:1.05rem}
.taal-paar{background:var(--ijs);border-radius:12px;padding:4px 10px;font-weight:900}
.taal-toetsen{display:flex;flex-wrap:wrap;justify-content:center;max-width:540px}
.taal-toetsen .toets{width:70px}

/* gps */
.gps{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.gps-afstand{font-family:"Lilita One",Impact,sans-serif;font-size:3.8rem;color:#fff;-webkit-text-stroke:3px var(--navy);paint-order:stroke fill;text-shadow:0 5px 0 var(--navy)}
.ouder-skip{opacity:.7}
.ouder-skip.houdt{opacity:1;text-decoration-thickness:4px}

/* stopdans */
.stopdans{display:flex;flex-direction:column;align-items:center;gap:14px}
.stop-bord{width:100%;min-height:210px;display:grid;place-items:center;font-family:"Lilita One",Impact,sans-serif;font-size:3.6rem;border-radius:30px;background:var(--ijs)}
.stop-bord.dans{background:linear-gradient(var(--zon2),var(--zon));animation:wiebel .45s infinite alternate}
.stop-bord.stop{background:linear-gradient(var(--rood2),var(--rood));color:#fff;-webkit-text-stroke:2px var(--navy);paint-order:stroke fill}
@keyframes wiebel{from{transform:rotate(-1.5deg) scale(1)}to{transform:rotate(1.5deg) scale(1.02)}}

/* warm koud */
.warmkoud{display:flex;flex-direction:column;gap:14px;align-items:center}
.wk-scherm{width:100%;min-height:210px;border-radius:30px;display:grid;place-items:center;align-content:center;gap:6px;background:var(--ijs);transition:background .3s}
.wk-emoji{font-size:5rem}
.wk-tekst{font-family:"Lilita One",Impact,sans-serif;font-size:2.4rem}
.wk-knoppen{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.wk-knoppen .knop{border-width:4px}
.ouder-uitleg{font-size:1rem;background:var(--ijs);border-radius:14px;padding:8px 14px;width:100%}

/* buzzer */
.buzzer{display:flex;flex-direction:column;gap:14px;align-items:center}
.buzzer-vraag{width:100%;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:900;text-align:center;min-height:2.8em;display:grid;place-items:center;background:#fff;border-radius:22px;padding:12px}
.buzzer-antwoord{margin:0;font-weight:900;font-size:1.25rem;min-height:1.5em;text-align:center}
.buzz-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;width:100%}
.buzz-pad{font-family:"Lilita One",Impact,sans-serif;font-weight:400;font-size:1.7rem;min-height:140px;border:4px solid var(--navy);border-radius:30px;display:grid;place-content:center;gap:2px;cursor:pointer;box-shadow:inset 0 -10px 0 rgba(0,0,0,.18),0 8px 0 var(--navy);color:#fff;padding:8px;-webkit-text-stroke:2px var(--navy);paint-order:stroke fill}
.buzz-pad small{font-size:1.6rem}
.buzz-pad:disabled{opacity:.5}
.buzz-pad.gedrukt{transform:translateY(7px);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 1px 0 var(--navy);opacity:1}
.buzz-pad.uit{opacity:.35}

/* ritme */
.ritme{display:flex;flex-direction:column;gap:14px;align-items:center}
.rit-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:480px}
.rit-pad{aspect-ratio:1.4;border:4px solid var(--navy);border-radius:28px;cursor:pointer;filter:saturate(.6) brightness(.9);box-shadow:inset 0 -10px 0 rgba(0,0,0,.18),0 7px 0 var(--navy)}
.rit-pad.aan{filter:none;transform:scale(1.06);box-shadow:0 0 0 6px #fff,0 0 0 10px var(--navy)}

/* finale */
.finale{display:flex;flex-direction:column;gap:20px;align-items:center}
.diploma{width:100%;text-align:center;background:linear-gradient(var(--zon2),var(--zon));border:4px solid var(--navy);border-radius:30px;padding:clamp(18px,3vw,34px);display:grid;gap:8px;font-size:1.25rem;font-weight:800;box-shadow:inset 0 -8px 0 var(--zonrand),0 8px 0 var(--navy)}
.diploma p{margin:0}
.diploma-kop{display:flex;gap:12px;justify-content:center;align-items:center;font-family:"Lilita One",Impact,sans-serif;font-size:2.8rem;color:#fff;-webkit-text-stroke:3px var(--navy);paint-order:stroke fill;text-shadow:0 4px 0 var(--navy)}
.diploma-naam{font-family:"Lilita One",Impact,sans-serif;font-size:clamp(2rem,5vw,3.2rem);line-height:1.05}
.diploma-jarig{font-weight:900;font-size:1.5rem;color:var(--rood)}

/* menu en overig */
.ouder-dlg{border:4px solid var(--navy);border-radius:28px;padding:0;max-width:min(520px,92vw);background:#fff;color:var(--navy);font-family:inherit;box-shadow:0 8px 0 var(--navy)}
.ouder-dlg::backdrop{background:rgba(6,17,51,.6)}
.ouder-inh{padding:24px;display:grid;gap:14px}
.invoer{font-family:inherit;font-weight:800;font-size:1.3rem;padding:12px 14px;border:3px solid var(--navy);border-radius:14px;width:100%;background:#fff;color:var(--navy);-webkit-user-select:text;user-select:text}
.veld{display:grid;gap:6px;font-weight:900}
.demo-start{margin:auto;max-width:800px;padding:24px;text-align:center;display:grid;gap:18px;color:#fff}
.demo-start h1{font-size:clamp(3rem,9vw,5rem)}
.demo-start .kaart-tekst{text-shadow:0 2px 0 var(--navy)}
.demo-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.demo-kaart{display:grid;gap:6px;place-items:center;background:#fff;border:4px solid var(--navy);border-radius:24px;padding:16px;font-weight:900;font-size:1.2rem;text-decoration:none;color:var(--navy);box-shadow:0 6px 0 var(--navy)}
.demo-kaart:active{transform:translateY(4px);box-shadow:0 2px 0 var(--navy)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
.sterretje{position:fixed;font-size:1.8rem;pointer-events:none;z-index:50;animation:ster .9s ease-out forwards}
@keyframes ster{to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:600px){body{font-size:18px}.toetsen{grid-template-columns:repeat(5,1fr)}.kaart{border-radius:28px}.kop-tekst{display:none}}
/* titels op de witte kaart: navy, geen omlijning */
.kaart h1{color:var(--navy);-webkit-text-stroke:0;text-shadow:none}
.timer-getal,.teller-getal,.gps-afstand{color:var(--blauw)}
.diploma-jarig{color:var(--roodrand)}
/* Fluent Emoji Flat */
img.emo{width:1.15em;height:1.15em;vertical-align:-0.2em;display:inline-block;pointer-events:none;-webkit-user-drag:none}
.kaart-emoji img.emo{width:72%;height:72%;vertical-align:middle}
.groot-emoji img.emo{width:1em;height:1em}
.mem-achter img.emo,.sticker-knop img.emo,.taal-symbool img.emo{width:1em;height:1em;vertical-align:middle}
.wk-emoji img.emo{width:1em;height:1em}
.groot-emoji{filter:none}
/* rode draad: rugzak met schatletters */
.rugzak{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin:10px 20px 0}
.rugzak-label{color:#fff;font-weight:900;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-right:6px;text-shadow:0 2px 0 var(--navy)}
.rugzak-vak{width:34px;height:40px;display:grid;place-items:center;border-radius:10px;border:3px solid var(--navy);background:rgba(255,255,255,.35);font-family:"Lilita One",Impact,sans-serif;font-size:1.3rem;color:rgba(11,29,77,.45)}
.rugzak-vak.vol{background:linear-gradient(var(--zon2),var(--zon));color:var(--navy);box-shadow:inset 0 -3px 0 var(--zonrand),0 3px 0 var(--navy)}
.letter-laag{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(6,17,51,.55);animation:in .3s ease-out}
.letter-laag.weg{opacity:0;transition:opacity .35s}
.letter-kaart{background:#fff;border:4px solid var(--navy);border-radius:30px;padding:26px 34px;text-align:center;box-shadow:0 8px 0 var(--navy);display:grid;gap:12px;justify-items:center}
.letter-kaart p{margin:0;font-weight:900;font-size:1.3rem}
.letter-groot{width:130px;height:150px;display:grid;place-items:center;font-family:"Lilita One",Impact,sans-serif;font-size:6rem;color:var(--navy);background:linear-gradient(var(--zon2),var(--zon));border:4px solid var(--navy);border-radius:26px;box-shadow:inset 0 -8px 0 var(--zonrand),0 7px 0 var(--navy);animation:draai .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes draai{from{transform:scale(.3) rotate(-30deg)}to{transform:none}}
/* schatkist */
.schatkist{display:flex;flex-direction:column;align-items:center;gap:16px}
.kist{position:relative;width:200px;height:150px}
.kist-bak{position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(#b5712f,#8d5a2b);border:4px solid var(--navy);border-radius:10px 10px 18px 18px;box-shadow:0 6px 0 var(--navy)}
.kist-deksel{position:absolute;left:0;right:0;top:12px;height:58px;background:linear-gradient(#c98a45,#a76a33);border:4px solid var(--navy);border-radius:60px 60px 10px 10px;transform-origin:20% 100%;transition:transform .7s cubic-bezier(.3,1.4,.5,1);z-index:2}
.kist-slot{position:absolute;left:50%;top:56px;transform:translateX(-50%);z-index:3;font-size:2rem;width:2.2rem;height:2.2rem;display:grid;place-items:center}
.kist-schat{position:absolute;left:50%;bottom:40px;transform:translate(-50%,40px) scale(.4);font-size:3.4rem;opacity:0;transition:all .7s .2s;z-index:1}
.kist.open .kist-deksel{transform:rotate(-38deg) translate(-10px,-16px)}
.kist.open .kist-slot{opacity:0}
.kist.open .kist-schat{opacity:1;transform:translate(-50%,-30px) scale(1)}
.kist-hint{display:flex;gap:10px;align-items:center;background:var(--ijs);border:3px dashed var(--blauw);border-radius:16px;padding:8px 16px;font-weight:900}
.kist-hint-beeld{font-size:2.2rem}
.kist-woord{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.kist-vak{width:58px;height:68px;display:grid;place-items:center;border:4px dashed var(--navy);border-radius:16px;font-family:"Lilita One",Impact,sans-serif;font-size:2.4rem;background:#fff;position:relative}
.kist-vak.spook::before{content:attr(data-spook);position:absolute;inset:0;display:grid;place-items:center;color:rgba(11,29,77,.15)}
.kist-vak.vol{border-style:solid;background:linear-gradient(var(--zon2),var(--zon));box-shadow:inset 0 -4px 0 var(--zonrand)}
.kist-vak.vol::before{display:none}
.kist-vak.fout{border-color:var(--rood);animation:schud .4s}
@keyframes schud{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.kist-letters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.kist-letter{width:64px;height:72px;font-family:"Lilita One",Impact,sans-serif;font-size:2.4rem;color:var(--navy);background:linear-gradient(var(--zon2),var(--zon));border:4px solid var(--navy);border-radius:18px;box-shadow:inset 0 -5px 0 var(--zonrand),0 5px 0 var(--navy);cursor:pointer;padding:0}
.kist-letter:disabled{opacity:.25;box-shadow:none;transform:translateY(4px)}
/* punten en uitslag */
.diploma-punten{font-family:"Lilita One",Impact,sans-serif;font-size:2.2rem;color:var(--blauw)}
.uitslag-rij{display:grid;grid-template-columns:1fr 120px;gap:12px;align-items:center}
.uitslag-rij span{display:grid}
.uitslag-rij small{font-weight:700;opacity:.75}
.podium{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.podium li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:12px 16px;border:3px solid var(--navy);border-radius:18px;background:var(--ijs);font-weight:900}
.podium li small{font-weight:700;opacity:.75}
.podium li.goud{background:linear-gradient(var(--zon2),var(--zon));box-shadow:inset 0 -4px 0 var(--zonrand)}
@media (max-width:600px){.rugzak-vak{width:28px;height:34px;font-size:1.1rem}.kist-vak,.kist-letter{width:48px;height:58px;font-size:1.9rem}}
[hidden]{display:none!important}

/* decor per thema en omgeving */
.decor{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.decor svg{position:absolute;left:0;width:100%;display:block}
.decor-verte{bottom:22vh;height:78vh}
.decor-grond{bottom:0;height:28vh}
.voortgang span{background:var(--accent);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.kaart-nummer{background:var(--accent)}
.kaart{box-shadow:0 10px 0 var(--navy),0 30px 60px rgba(0,0,0,.3)}
.kop-tekst,.rugzak-label{text-shadow:0 2px 0 var(--navy),0 0 8px rgba(11,29,77,.5)}
body:not(.donker-thema) .kop-tekst,body:not(.donker-thema) .rugzak-label{color:#fff}
.demo-start{position:relative}
.opties.groot .optie img.emo{width:2.4em;height:2.4em;vertical-align:middle}
.donker-thema .rugzak-vak:not(.vol){background:rgba(255,255,255,.85);color:rgba(11,29,77,.45)}
.donker-thema .rugzak-label{color:#fff}
/* fotoalbum */
.album-laag{position:fixed;inset:0;z-index:70;background:rgba(6,17,51,.7);display:grid;place-items:center;padding:16px;overflow:auto}
.album-kaart{width:min(960px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border:4px solid var(--navy);border-radius:30px;padding:22px;display:grid;gap:14px;box-shadow:0 8px 0 var(--navy)}
.album-kop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.album-kop h2{margin:0;font-size:2rem}
.album-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.album-foto{position:relative;margin:0;display:grid;gap:4px}
.album-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border:4px solid var(--navy);border-radius:18px;box-shadow:0 4px 0 var(--navy)}
.album-foto figcaption{font-size:.85rem;font-weight:800;opacity:.75}
.album-weg{position:absolute;top:8px;right:8px;min-width:38px;height:38px;border-radius:12px;border:3px solid var(--navy);background:#fff;font-weight:900;cursor:pointer;padding:0 8px}
.album-weg.zeker{background:var(--rood);color:#fff}
.album-leeg{grid-column:1/-1;text-align:center;padding:24px;background:var(--ijs);border-radius:18px}
.album-status{display:grid;gap:12px;justify-items:center;margin:0}
.album-collage{width:100%;max-width:640px;border:4px solid var(--navy);border-radius:18px}
.spotify-houder{width:100%;min-height:152px;border-radius:16px;overflow:hidden;background:var(--ijs);display:grid;place-items:center}
.spotify-houder iframe{display:block;border:0;border-radius:12px}
.liedje{display:flex;flex-direction:column;gap:14px}