/* Shared screen styles for the modules (from aiden-spel v11), plus Steyn Studie additions. */
.btn{display:block;width:100%;border:0;border-radius:16px;padding:16px;font-size:20px;font-weight:800;color:#fff;background:var(--g);box-shadow:0 5px 0 var(--gd);margin:10px 0;cursor:pointer;font-family:inherit;letter-spacing:.5px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--gd)}
.btn.blue{background:var(--b);box-shadow:0 5px 0 var(--bd)}
.btn.blue:focus,.btn.blue:hover{background:var(--b)}
.btn.blue.playing{background:var(--y);box-shadow:0 5px 0 #e0a800}
.btn.white{background:#fff;color:var(--txt);box-shadow:0 5px 0 #ddd;border:2px solid #e5e5e5}
.btn.small{font-size:16px;padding:10px}
.row{display:flex;gap:10px}.row>*{flex:1}
.card{background:#fff;border:2px solid #e5e5e5;border-radius:20px;padding:14px;margin:8px 0}
.sets{display:flex;gap:10px}
.set{flex:1;border:3px solid #e5e5e5;border-radius:18px;padding:12px;text-align:center;background:#fff;cursor:pointer;font-weight:800}
.set.on{border-color:var(--b);background:#ddf4ff}
.set small{display:block;font-weight:600;color:#777}
.x{font-size:28px;background:none;border:0;color:#aaa;cursor:pointer}
.bar{flex:1;height:18px;background:#e5e5e5;border-radius:10px;overflow:hidden}
.bar>div{height:100%;background:var(--g);border-radius:10px;transition:width .4s}
.pic{width:100%;max-width:420px;aspect-ratio:1;margin:0 auto;display:block;border-radius:20px;object-fit:cover;border:3px solid #e5e5e5;background:#fff}
.big{font-size:clamp(44px,12vw,72px);font-weight:900;text-align:center;margin:8px 0 0;letter-spacing:2px;color:#2b70c9}
.big .ch{display:inline-block;transition:transform .15s,color .15s}
.big .ch.lit{color:var(--g)}
.big .ch.now{animation:pop .45s}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.5) translateY(-10px)}100%{transform:scale(1.15)}}
.def{text-align:center;font-size:18px;color:#777;margin:4px 8px;min-height:24px;transition:color .2s}
.def.on{color:var(--txt);font-weight:700}
.speak{display:flex;justify-content:center;margin:4px}
.spk{width:64px;height:64px;border-radius:50%;border:0;background:var(--b);box-shadow:0 4px 0 var(--bd);font-size:30px;cursor:pointer;color:#fff}
.spk:active{transform:translateY(3px);box-shadow:none}
.game{display:flex;gap:10px;align-items:center}
.game .pic{width:46%;max-width:240px}
.hang{width:54%;max-width:260px}
.slots{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:12px 0}
.slot{width:clamp(28px,8vw,46px);height:clamp(40px,11vw,58px);border-bottom:4px solid #bbb;font-size:clamp(26px,7vw,40px);font-weight:900;display:flex;align-items:flex-end;justify-content:center;color:var(--txt)}
.slot.cur{border-color:var(--b);animation:blink 1s infinite}
.slot.ok{color:var(--g);border-color:var(--g)}
.slot.reveal{color:var(--r)}
@keyframes blink{50%{border-color:#ddf4ff}}
.kb{display:flex;flex-direction:column;gap:6px;margin-top:auto;user-select:none}
.kr{display:flex;justify-content:center;gap:4px}
.k{flex:1;max-width:58px;height:clamp(44px,11vw,58px);border-radius:10px;border:2px solid #e5e5e5;border-bottom-width:4px;background:#fff;font-size:clamp(18px,5vw,24px);font-weight:800;font-family:inherit;color:var(--txt);cursor:pointer;padding:0}
.k.acc{background:#fff8d6}
.k.bad{background:#ffdfe0;border-color:var(--r)}
.k.hint{background:#d7ffb8;border-color:var(--g);animation:pulse .6s infinite alternate}
@keyframes pulse{to{transform:scale(1.12)}}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.msg{text-align:center;font-size:22px;font-weight:900;min-height:30px}
.msg.good{color:var(--g)}.msg.bad{color:var(--r)}
.score{font-size:64px;font-weight:900;text-align:center;color:var(--g)}
table{width:100%;border-collapse:collapse;font-size:15px}td,th{padding:6px;border-bottom:1px solid #eee;text-align:left}
.dots span{display:inline-block;width:12px;height:12px;border-radius:50%;margin:1px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:9}
.hidden{display:none!important}
.hdots{display:flex;justify-content:center;gap:6px;margin:4px 0}
.hdots span{width:14px;height:14px;border-radius:50%;background:#e5e5e5}.hdots span.on{background:var(--r)}

.monster{position:fixed;left:0;bottom:8px;width:100%;height:190px;pointer-events:none;z-index:60}
.monster .mbody{position:absolute;bottom:0;left:-130px;animation:mwalk 2.6s linear forwards}
.monster .lg1{animation:leg .25s infinite alternate;transform-origin:44px 96px}.monster .lg2{animation:leg .25s infinite alternate-reverse;transform-origin:76px 96px}
@keyframes leg{from{transform:rotate(-25deg)}to{transform:rotate(25deg)}}
@keyframes mwalk{0%{left:-130px}37%{left:calc(50% - 70px)}62%{left:calc(50% - 70px)}100%{left:110%}}
.monster .rock{position:absolute;bottom:0;left:calc(50% + 30px);font-size:28px}
.monster.stub .mbody svg{animation:hop .5s ease-out}
@keyframes hop{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-60px) rotate(-18deg)}60%{transform:translateY(-20px) rotate(12deg)}100%{transform:translateY(0) rotate(0)}}
.monster .star{position:absolute;right:-10px;bottom:0;font-size:34px;opacity:0}
.monster.stub .star{animation:pow .6s ease-out}
@keyframes pow{0%{opacity:1;transform:scale(.3)}60%{opacity:1;transform:scale(1.4)}100%{opacity:0}}
.monster .bubble{position:absolute;left:calc(50% - 20px);bottom:140px;background:#fff;border:3px solid #3c3c3c;border-radius:18px;padding:6px 14px;font:900 24px system-ui;opacity:0;transform:scale(.4)}
.monster.talk .bubble{animation:bub 1.3s ease-out forwards}
@keyframes bub{0%{opacity:0;transform:scale(.4) rotate(-8deg)}15%{opacity:1;transform:scale(1.15) rotate(4deg)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:#58cc02;color:#fff;font-weight:800;padding:10px 18px;border-radius:14px;box-shadow:0 4px 0 #46a302;z-index:99;font-size:18px}

/* ---- kieslys + wiskunde ---- */
.tile{display:flex;align-items:center;gap:16px;width:100%;border:3px solid #e5e5e5;border-bottom-width:6px;border-radius:22px;background:#fff;padding:20px 18px;margin:12px 0;font-family:inherit;color:var(--txt);text-align:left;cursor:pointer}
.tile:active{transform:translateY(3px);border-bottom-width:3px}
.tile .ti{font-size:52px;line-height:1}.tile b{display:block;font-size:28px;font-weight:900}.tile small{display:block;font-size:16px;color:#777;font-weight:700;margin-top:2px}
.tile.spel{border-color:#b9e98a;background:#f2ffe6}.tile.wisk{border-color:#a8dcfa;background:#e9f7ff}
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wt{border:3px solid var(--c);border-bottom-width:6px;border-radius:18px;background:#fff;padding:12px 8px;font-family:inherit;color:var(--txt);cursor:pointer;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.wt:active{transform:translateY(3px);border-bottom-width:3px}.wt .ti{font-size:32px}.wt b{font-size:19px;font-weight:900}.wt small{font-size:13px;color:#777;font-weight:700}
.wt.off{opacity:.45;border-color:#ccc;cursor:default}
.wq{display:flex;gap:8px;align-items:stretch}.wq .qcard{flex:1}
.qcard{background:#fff;border:3px solid var(--c);border-radius:20px;padding:12px 14px;min-height:120px;display:flex;flex-direction:column}
.qtag{font-size:15px;font-weight:800;color:var(--c)}
.qt{font-size:clamp(34px,10vw,52px);font-weight:900;text-align:center;margin:auto 0;line-height:1.25;color:#2b70c9}
.qt.woord{font-size:clamp(19px,5.2vw,24px);text-align:left;color:var(--txt);font-weight:800;line-height:1.35}
.withm .qt{font-size:clamp(28px,8.5vw,46px)}.withm .qt.woord{font-size:clamp(17px,4.6vw,22px)}
.hang.mini{width:104px;flex:0 0 104px}.hang.mini .hdots span{width:10px;height:10px}.hang.end{width:170px;margin:0 auto}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 3px;font-size:.82em}
.fr>span:last-child{border-top:.09em solid currentColor;padding:0 .12em;min-width:1em;text-align:center}
.blank{display:inline-block;min-width:1em;color:#ff9600}
.ans{margin:8px auto 4px;min-width:60%;min-height:76px;border:3px solid #cfe7ff;border-radius:18px;background:#fff;font-size:44px;font-weight:900;display:flex;align-items:center;justify-content:center;color:var(--txt);padding:4px 16px}
.ans .ph{color:#ccc}.ans.right{border-color:var(--g);color:var(--g);background:#efffe3}.ans.wrong{border-color:var(--r);color:var(--r);background:#fff0f0}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px;user-select:none}
.pk{height:clamp(58px,8.5vh,78px);border-radius:16px;border:2px solid #e5e5e5;border-bottom-width:5px;background:#fff;font-size:32px;font-weight:900;font-family:inherit;color:var(--txt);cursor:pointer}
.pk:active{transform:translateY(3px);border-bottom-width:2px}.pk.del{background:#fff3e0}.pk.none{visibility:hidden}.pk:disabled{opacity:.6}
.choices{display:flex;gap:12px;margin-top:14px}
.ch-b{flex:1;height:110px;border-radius:20px;border:3px solid #e5e5e5;border-bottom-width:6px;background:#fff;font-size:60px;font-weight:900;font-family:inherit;color:#2b70c9;cursor:pointer}
.ch-b.good{background:#d7ffb8;border-color:var(--g)}.ch-b.bad{background:#ffdfe0;border-color:var(--r)}
.fb{background:#fff8e6;border:3px solid #ffc800;border-radius:18px;padding:10px 14px;margin:6px 0;font-size:18px;line-height:1.45}
.fbans{font-size:22px;font-weight:800;margin-bottom:4px}.fbans b{color:var(--g)}
.fbmy{font-size:17px;font-weight:700;color:#999}.fbmy s{color:var(--r)}
.fbw div{font-weight:700;color:#555}
.inp{margin-top:auto}
td.rq{font-weight:800}td.rq+td{white-space:nowrap;text-align:right}td.rq .fr{font-size:.95em}
.tile.geo{border-color:#ffd27a;background:#fff8e6}
.tile.u{padding:12px 14px;margin:8px 0;border-bottom-width:5px}.tile.u .ti{font-size:36px}.tile.u b{font-size:19px}
/* ---- geografie ---- */
.gcard{background:#fff;border:3px solid var(--c);border-radius:20px;padding:12px 14px;margin:8px 0}
.gcard h2{margin:4px 0 8px;font-size:23px;color:var(--c);line-height:1.2}
.gcard ul{margin:0;padding-left:22px;font-size:18px;line-height:1.45}.gcard li{margin:6px 0}.gcard li.n{list-style:none;margin-left:-20px}
.gimg{width:100%;border-radius:14px;border:2px solid #eee;margin:4px 0 2px;display:block;background:#fff}
.gcap{font-size:13px;color:#888;text-align:center;margin-bottom:8px}
.wtab{font-size:17px}.wtab td{vertical-align:top;padding:8px 6px}.wtab td:first-child{font-weight:900;color:#2b70c9;width:38%;word-break:break-word}
.gq{font-size:clamp(19px,5.2vw,24px);font-weight:800;line-height:1.35;margin:6px 0 2px}
.opt{display:block;width:100%;text-align:left;border:3px solid #e5e5e5;border-bottom-width:5px;border-radius:16px;background:#fff;padding:12px 14px;margin:8px 0;font-size:18px;font-weight:700;line-height:1.3;font-family:inherit;color:var(--txt);cursor:pointer}
.opt:active{transform:translateY(2px)}.opt:disabled{cursor:default}
.opt.big2{text-align:center;font-size:22px;padding:18px 8px}
.opt.sel{border-color:var(--b);background:#ddf4ff}.opt.on{border-color:var(--b);background:#eef8ff}
.opt.good{background:#d7ffb8;border-color:var(--g)}.opt.bad{background:#ffdfe0;border-color:var(--r)}
.pcols{display:flex;gap:8px}.pcols>div{flex:1}.pcols .opt{font-size:15px;padding:10px;min-height:64px}
.fc{perspective:1000px;height:270px;margin:10px 0;cursor:pointer}
.fc .in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.fc.flip .in{transform:rotateY(180deg)}
.fc .f,.fc .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;border:3px solid var(--c);border-bottom-width:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:#fff}
.fc .f b{font-size:clamp(26px,8vw,40px);color:#2b70c9;word-break:break-word}
.fc .b{transform:rotateY(180deg);background:#fbf3ff;font-size:21px;font-weight:700;line-height:1.4}
td.gtq{font-weight:700}
/* 🔥 Verryking + klank */
.btn.vk{background:linear-gradient(135deg,#ff4b4b,#ff9600);box-shadow:0 5px 0 #c23a1e;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn.vk:active{box-shadow:0 1px 0 #c23a1e}
.btn small{display:block;font-size:14px;font-weight:700;opacity:.92;margin-top:2px;letter-spacing:0}
.gcard.vk{border-color:#ff4b4b;background:linear-gradient(180deg,#fff4ee,#fff 60%);box-shadow:0 0 0 3px #ffd2b8}
.vkpill{display:inline-block;background:#ff4b4b;color:#fff;border-radius:10px;padding:1px 8px;font-size:13px;font-weight:900;margin-right:4px}
.vkbar>div{background:linear-gradient(90deg,#ff9600,#ff4b4b)}
.score.vks{color:#ff4b4b}
.qimg{max-height:260px;object-fit:contain;margin-bottom:8px}
.gtik{display:block;width:100%;box-sizing:border-box;font-family:inherit;font-size:24px;font-weight:800;padding:14px 16px;border:3px solid #e5e5e5;border-bottom-width:5px;border-radius:16px;margin:8px 0;color:var(--txt);background:#fff;outline:none}
.gtik:focus{border-color:var(--b)}.gtik.right{border-color:var(--g);background:#efffe3;color:var(--g)}.gtik.wrong{border-color:var(--r);background:#fff0f0;color:var(--r)}
.opt.chk::before{content:'⬜ ';}.opt.chk.sel::before,.opt.chk.good::before{content:'✅ ';}.opt.chk.bad::before{content:'❌ ';}
.opt.missed{border-color:var(--g);border-style:dashed;background:#f3fff0}.opt.chk.missed::before{content:'👉 ';}
.mute{color:#888;font-size:14px;text-align:center}
.top h1.mt{flex:1;margin:0;font-size:24px;text-align:left}
.btn.purple{background:#ce82ff;box-shadow:0 5px 0 #a568cc}
.pic.nopic{display:flex;align-items:center;justify-content:center;font-size:96px;aspect-ratio:auto;height:180px}
.xpline{text-align:center;color:#b58a00;font-weight:800;margin:12px 0 0}
.xpwin{text-align:center;color:#b58a00;font-weight:900;font-size:22px;margin:0 0 6px}
.olist{margin:6px 0}
/* ---- #/teken-in: login + profile picker (Zoe se Studie-app mockups, Tank PASS) ---- */
.top-plek{width:40px;flex:none}
.tekenin{margin:4px 0 0}
.kinders{display:flex;flex-direction:column;gap:10px;margin:8px 0 12px}
.kind{display:flex;align-items:center;gap:16px;width:100%;border:3px solid var(--line);border-bottom-width:6px;border-radius:22px;background:#fff;padding:16px 18px;margin:0;font-family:inherit;color:var(--txt);text-align:left;cursor:pointer;min-height:88px}
.kind:active{transform:translateY(3px);border-bottom-width:3px}
.kind:focus-visible{outline:3px solid var(--b);outline-offset:2px}
.kind .ti{font-size:52px;line-height:1}
.kind b{display:block;font-size:28px;font-weight:900}
.kind small{display:block;font-size:16px;color:#555;font-weight:700;margin-top:2px}
.kind.aiden{border-color:#7ec8ea;background:#e9f7ff}
.kind.zoe{border-color:#d9b4f5;background:#f6edff}
.kind[aria-pressed="true"]{border-width:4px;border-bottom-width:7px;box-shadow:0 0 0 3px rgba(28,176,246,.35)}
.kind.zoe[aria-pressed="true"]{box-shadow:0 0 0 3px rgba(206,130,255,.45)}
.kind[aria-pressed="true"]::after{content:"✓";margin-left:auto;font-size:32px;font-weight:900;color:var(--bd);line-height:1}
.kind.zoe[aria-pressed="true"]::after{color:#a568cc}
.kinders.is-gekies .kind[aria-pressed="false"]{opacity:.48;background:#fff;border-color:var(--line);filter:saturate(.6)}
.kind:disabled{cursor:not-allowed;opacity:.6}
.kies-weer{display:block;text-align:center;background:none;border:0;color:var(--bd);font:700 16px "Nunito",system-ui,sans-serif;cursor:pointer;padding:8px;min-height:44px;text-decoration:underline;width:100%}
.kies-weer[hidden]{display:none}
.vorm{margin:4px 0 0}
.veld{margin:10px 0}
.veld label{display:block;font-weight:800;font-size:16px;margin:0 0 6px}
.veld input{width:100%;min-height:52px;font:800 20px "Nunito",system-ui,sans-serif;border:3px solid var(--line);border-radius:16px;padding:12px 16px;color:var(--txt);background:#fff;outline:none}
.veld input:focus{border-color:var(--b)}
.veld input:disabled{background:#f3f3f3;color:#777}
.wag-ry{position:relative}
.wag-ry input{padding-right:58px}
.oog{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;background:transparent;font-size:22px;cursor:pointer;border-radius:12px;padding:0;line-height:1}
.oog:focus-visible{outline:3px solid var(--b)}
.boodskap{border-radius:18px;padding:12px 14px;margin:10px 0;font-size:18px;font-weight:700;line-height:1.4;text-align:center;color:#1767a0}
.boodskap[hidden]{display:none}
.boodskap.verkeerd,.boodskap.bediener,.boodskap.leeg{background:#fff0f0;border:3px solid #ff4b4b;color:#9b1c1c}
.boodskap.gesluit{background:#fff8e6;border:3px solid var(--y);color:#7a6400}
.boodskap.aflyn,.boodskap.info{background:#eef8ff;border:3px solid var(--b);color:#1767a0}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* start screen: greeting row with two separate controls, sync line */
.tuis-profiel{display:flex;align-items:center;gap:8px;margin:8px 0 4px}
.tuis-profiel .groet{flex:1;margin:0;font-weight:700;font-size:16px}
.uitknop{flex:none;border:2px solid var(--line);border-bottom-width:4px;background:#fff;color:var(--txt);border-radius:14px;padding:8px 12px;font:800 14px "Nunito",system-ui,sans-serif;cursor:pointer;min-height:44px;line-height:1.2}
.uitknop:active{transform:translateY(2px);border-bottom-width:2px}
.uitknop:focus-visible{outline:3px solid var(--b);outline-offset:2px}
.synclyn{font-size:13px;font-weight:700;color:var(--gd);margin:0 0 6px}
.synclyn.wag{color:#8a5a00}
.ob-knop{display:block;margin:14px auto 0}
/* bottom sheet (Teken uit) */
.sluier{position:fixed;inset:0;background:rgba(60,60,60,.45);z-index:80;display:flex;align-items:flex-end;justify-content:center;padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
.dialog{background:#fff;border:3px solid var(--line);border-radius:22px;padding:20px 16px 16px;width:100%;max-width:720px;box-shadow:0 10px 0 rgba(0,0,0,.06);text-align:center}
.dialog .held{font-size:48px;line-height:1;margin:0 0 8px}
.dialog h2{font-size:24px;font-weight:900;margin:0 0 8px}
.dialog p{font-size:18px;font-weight:700;line-height:1.4;margin:0 0 8px}
.dialog.wag{border-color:var(--y);background:#fffdf6}
.dialog .btn{margin:8px 0 0}
.tekenin .kp-klein{text-align:center}