/* Fredoka (SIL Open Font License 1.1, zie /fonts/OFL.txt) – lokaal meegeleverd */
@font-face{font-family:"Fredoka";font-style:normal;font-display:swap;font-weight:300 700;
  src:url(/fonts/fredoka-latin-wght-normal.woff2) format("woff2-variations"),url(/fonts/fredoka-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fredoka";font-style:normal;font-display:swap;font-weight:300 700;
  src:url(/fonts/fredoka-latin-ext-wght-normal.woff2) format("woff2-variations"),url(/fonts/fredoka-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --guus:#ff8a1f; --guus-d:#e06600; --guus-l:#ffe3c7;
  /* Teun: game-look */
  --teun:#22e1ff; --teun-d:#6d28d9; --teun-l:#141a3d;
  --navy:#0b1030; --navy2:#141a3d; --navy3:#1f2760; --neon:#22e1ff; --neon2:#b44dff; --cartoon:#ffd90f;
  --r-gewoon:#9aa4b2; --r-ongewoon:#3ddc5a; --r-zeldzaam:#2fa8ff; --r-episch:#b44dff; --r-legendarisch:#ffb020;
  --team:#9b5de5; --team-l:#efe3ff;
  --geel:#ffd93b; --roze:#ff4d6d; --groen:#4cd964;
  --ink:#2b2340; --bg:#fff8ec;
  --radius:24px;
  --font:"Fredoka","Baloo 2","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);
  background-image:radial-gradient(circle at 10% 10%,#ffe9b3 0 60px,transparent 61px),radial-gradient(circle at 90% 30%,#d9dcff 0 80px,transparent 81px);
  -webkit-tap-highlight-color:transparent;min-height:100vh}
button{font-family:inherit;color:inherit}
.wrap{max-width:980px;margin:0 auto;padding:16px}
.verborgen{display:none!important}

/* ---------- Kindkleuren: --c is de kleur van het kind ---------- */
[style*="--c"]{--cd:color-mix(in srgb,var(--c) 72%,#000);--cl:color-mix(in srgb,var(--c) 20%,#fff)}

/* ---------- Scène ---------- */
.scene{position:relative;width:100%;aspect-ratio:400/220;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 8px 0 rgba(43,35,64,.12);background:#bfe6ff}
.scene-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pad{fill:none;stroke:rgba(255,255,255,.55);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 9}
.pad.t-game{stroke:color-mix(in srgb,var(--c) 55%,transparent)}
.pad.t-stoer{stroke:rgba(255,255,255,.35);stroke-width:2;stroke-dasharray:none}
.stapje{fill:rgba(255,255,255,.5);transition:fill .4s}
.stapje.gehaald{fill:var(--c)}
.stapje.t-game{fill:rgba(20,26,61,.45)} .stapje.t-game.gehaald{fill:var(--c)}
.stapje.t-stoer{fill:rgba(255,255,255,.35)} .stapje.t-stoer.gehaald{fill:#fff}
.zon{animation:zon 6s ease-in-out infinite;transform-origin:345px 38px}
@keyframes zon{50%{transform:scale(1.12)}}
.wolk{animation:wolk 18s ease-in-out infinite alternate}
.w2{animation-duration:24s}
@keyframes wolk{to{transform:translateX(30px)}}
.doel-top{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:1;
  width:clamp(40px,10.5vw,76px);height:clamp(40px,10.5vw,76px);border-radius:50%;display:grid;place-items:center;
  background:#fff;border:clamp(3px,.8vw,5px) solid var(--geel);box-shadow:0 0 0 6px rgba(255,217,59,.35),0 4px 0 #d9a400;animation:gloei 2s ease-in-out infinite}
@keyframes gloei{50%{box-shadow:0 0 0 12px rgba(255,217,59,.15),0 4px 0 #d9a400}}
.doel-emoji{display:block;font-size:clamp(22px,6vw,44px);line-height:1;animation:zweef 2.4s ease-in-out infinite}
@keyframes zweef{50%{transform:translateY(-5px) rotate(-4deg)}}
.klimmer{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;
  transition:transform 1s cubic-bezier(.34,1.56,.64,1);z-index:2;pointer-events:none}
.klimmer-hoofd{width:clamp(38px,10vw,72px);height:clamp(38px,10vw,72px);border-radius:50%;display:grid;place-items:center;
  font-size:clamp(22px,6vw,44px);background:#fff;border:clamp(3px,.8vw,6px) solid var(--c);box-shadow:0 4px 0 var(--cd);
  animation:wiebel 2s ease-in-out infinite}
.scene.veel .klimmer-hoofd{width:clamp(30px,7.5vw,54px);height:clamp(30px,7.5vw,54px);font-size:clamp(17px,4.5vw,32px)}
.klimmer:nth-of-type(even) .klimmer-hoofd{animation-delay:-1s}
@keyframes wiebel{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.klimmer-naam{margin-top:3px;background:var(--c);color:#fff;font-weight:700;border-radius:99px;padding:1px 10px;
  font-size:clamp(11px,2.6vw,17px);box-shadow:0 2px 0 var(--cd);white-space:nowrap}
/* Game-klimmer: strak, donker, neon */
.klimmer.t-game .klimmer-hoofd{border-radius:28%;background:radial-gradient(circle at 50% 35%,#2a3380,var(--navy));border-color:var(--c);
  box-shadow:0 0 0 2px var(--neon2),0 0 14px color-mix(in srgb,var(--c) 75%,transparent),0 4px 0 var(--navy);animation:zweefgamer 3s ease-in-out infinite}
@keyframes zweefgamer{50%{transform:translateY(-3px)}}
.klimmer.t-game .klimmer-naam{background:var(--navy);color:var(--c);border-radius:6px;letter-spacing:.12em;font-size:clamp(10px,2.3vw,15px);
  box-shadow:0 0 0 2px var(--neon2),0 0 10px rgba(180,77,255,.6);text-shadow:0 0 6px color-mix(in srgb,var(--c) 80%,transparent)}
/* Stoer-klimmer: minimaal */
.klimmer.t-stoer .klimmer-hoofd{background:#16181d;border:2px solid #fff;box-shadow:0 0 0 2px var(--c);animation:none}
.klimmer.t-stoer .klimmer-naam{background:rgba(22,24,29,.85);border-radius:4px;box-shadow:none;font-weight:600;letter-spacing:.04em;font-size:clamp(10px,2.3vw,14px)}
.klimmer.hop .klimmer-hoofd{animation:hop .6s ease}
@keyframes hop{0%{transform:scale(1)}30%{transform:scale(1.35) translateY(-10px)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.klimmer.emote .klimmer-hoofd{animation:emote .9s ease}
@keyframes emote{0%{transform:none}15%{transform:translateY(-12px) rotate(-15deg) scale(1.15)}30%{transform:translateY(0) rotate(15deg)}
  45%{transform:translateY(-8px) rotate(-10deg) scaleX(-1)}60%{transform:translateY(0) rotate(0) scaleX(-1)}80%{transform:translateY(-6px) scale(1.2)}100%{transform:none}}
.klimmer.knik .klimmer-hoofd{animation:knik .4s ease}
@keyframes knik{50%{transform:translateY(-4px)}}
/* aftrek: rustig zakken, even grijs */
.klimmer.zak .klimmer-hoofd{animation:zak 1.2s ease}
@keyframes zak{0%{transform:none;filter:none}30%{transform:translateY(8px) scale(.92);filter:grayscale(.8)}100%{transform:none;filter:none}}
.klimmer.boven .klimmer-hoofd{animation:juich .8s ease-in-out infinite}
.klimmer.t-stoer.boven .klimmer-hoofd{animation:none;box-shadow:0 0 0 2px var(--c),0 0 0 6px rgba(255,255,255,.35)}
@keyframes juich{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- Algemeen ---------- */
.titel{font-weight:700;margin:0}
.knop{border:0;border-radius:18px;padding:12px 18px;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;
  background:#fff;box-shadow:0 5px 0 rgba(43,35,64,.18);transition:transform .08s,box-shadow .08s;color:var(--ink)}
.knop:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(43,35,64,.18)}
.knop:disabled{opacity:.45;cursor:not-allowed}
.knop-paars{background:var(--team);color:#fff;box-shadow:0 5px 0 #6d36b8}
.knop-geel{background:var(--geel);box-shadow:0 5px 0 #d9b100}
.knop-rood{background:#fff1f3;color:#c81e45;box-shadow:0 4px 0 #f3b3c1}
.knop:focus-visible,.taak:focus-visible,.teamtaak:focus-visible,.tab:focus-visible{outline:4px solid var(--team);outline-offset:2px}
.ster{color:#e3dcef;font-size:1em;line-height:1;display:inline-block;transition:color .3s}
.ster.aan{color:var(--geel);text-shadow:0 2px 0 #d9a400;animation:sterpop .6s calc(var(--i)*60ms) both}
@keyframes sterpop{0%{transform:scale(0) rotate(-90deg)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
.confetti-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:1000}
.voet{text-align:center;opacity:.6;font-size:14px;padding:20px 0 30px}
.voet a{color:inherit}

/* XP-balk (Teun) */
.xp{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;padding:4px;border-radius:8px;background:#060a22;box-shadow:inset 0 0 0 2px #2a3380}
.seg{height:14px;border-radius:3px;background:#1b2250;transform:skewX(-14deg)}
.seg.aan{background:linear-gradient(180deg,color-mix(in srgb,var(--c,var(--neon)) 50%,#fff),var(--c,var(--neon)) 50%,color-mix(in srgb,var(--c,var(--neon)) 70%,#000));box-shadow:0 0 8px color-mix(in srgb,var(--c,var(--neon)) 80%,transparent);animation:segpop .5s calc(var(--i)*40ms) both}
@keyframes segpop{0%{opacity:0;transform:skewX(-14deg) scaleY(.2)}100%{opacity:1;transform:skewX(-14deg)}}
.lvl{display:inline-block;background:linear-gradient(90deg,var(--neon2),#3b5bff);color:#fff;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;border-radius:6px;padding:2px 10px;font-size:14px;box-shadow:0 0 12px rgba(180,77,255,.6)}

/* Formulieren */
.veld{display:block;text-align:left;font-weight:600;margin-bottom:12px}
.veld input,.veld select{display:block;width:100%;margin-top:4px;font:inherit;font-size:17px;padding:12px 14px;border-radius:14px;border:3px solid #e6dff3;background:#fbf9ff;color:var(--ink)}
.veld input:focus,.veld select:focus{outline:none;border-color:var(--team)}
.foutmelding{background:#fff1f3;color:#c81e45;border-radius:14px;padding:10px 12px;font-weight:600;margin:0 0 12px;text-align:left}

/* Toast */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(200%);visibility:hidden;z-index:1001;background:var(--ink);color:#fff;border-radius:18px;
  padding:12px 18px;font-weight:600;font-size:17px;transition:transform .35s cubic-bezier(.34,1.56,.64,1);max-width:92vw;text-align:center}
.toast.zichtbaar{transform:translateX(-50%) translateY(0);visibility:visible}
.toast.gamer{background:var(--navy);color:var(--neon);box-shadow:0 0 0 2px var(--neon2),0 0 20px rgba(180,77,255,.6);letter-spacing:.04em;text-transform:uppercase}

/* Geel cartoon-tekstwolkje (Teun) */
.tekstwolk.t-stoer{background:#16181d;color:#fff;border:0;box-shadow:none;border-radius:6px;font-size:15px;font-weight:600}
.tekstwolk.t-stoer::after{display:none}
.tekstwolk.t-vrolijk{background:#fff;color:var(--ink);border-color:var(--ink)}
.tekstwolk.t-vrolijk::after{background:#fff;border-color:var(--ink)}
.tekstwolk{position:fixed;z-index:1002;pointer-events:none;background:var(--cartoon);color:#1a1a1a;font-weight:700;font-size:18px;
  padding:6px 14px;border-radius:16px;border:3px solid #1a1a1a;box-shadow:3px 3px 0 #1a1a1a;white-space:nowrap}
.tekstwolk::after{content:"";position:absolute;left:50%;bottom:-11px;width:14px;height:14px;background:var(--cartoon);
  border-right:3px solid #1a1a1a;border-bottom:3px solid #1a1a1a;transform:translateX(-50%) rotate(45deg)}

/* Feest / Victory */
.victory{display:inline-block;font-size:clamp(34px,9vw,62px);font-weight:700;letter-spacing:.06em;color:var(--cartoon);
  background:linear-gradient(90deg,#6d28d9,#3b5bff);padding:2px 22px 6px;transform:skewX(-10deg) rotate(-3deg);
  border:4px solid #1a1a1a;box-shadow:6px 6px 0 #1a1a1a,0 0 30px rgba(34,225,255,.7);-webkit-text-stroke:2px #1a1a1a;paint-order:stroke;
  animation:victory 1.4s ease-in-out infinite}
@keyframes victory{50%{transform:skewX(-10deg) rotate(-3deg) scale(1.06)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.toast.rustig{background:#5b5670}
/* Feest */
.feest-duo{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;font-size:clamp(48px,14vw,90px);margin-top:16px}
.feest-duo span{display:inline-block;animation:juich .7s ease-in-out infinite}
.feest-duo span:nth-child(even){animation-delay:-.35s}
.feest-duo span.t-game{animation:emote 1.4s ease infinite}
/* Wachtwoordkaart, pagina's met één kaart */
.enkel{min-height:100vh;display:grid;place-items:center;padding:20px}
.enkel-kaart{background:#fff;border-radius:32px;padding:28px 24px;width:100%;max-width:400px;text-align:center;box-shadow:0 10px 0 rgba(43,35,64,.12)}
.enkel-kaart .groot-e{font-size:64px;animation:zweef 2.4s ease-in-out infinite}
.enkel-kaart h1{font-size:30px;margin:4px 0 2px}
.enkel-kaart p{margin:0 0 18px;color:#6f6588}
.enkel-kaart .knop{width:100%;margin-top:6px;font-size:20px;padding:14px}
.hint{font-size:14px;color:#9a90b0;margin-top:14px}
.hint a{color:inherit}
.schud{animation:schud .4s ease}
@keyframes schud{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}