/* Kwizillo screen layer — world, quiz, hint, feedback, result and native panels.
   Merged from world-native.css + world-clean.css + moodboard-polish.css +
   intro-enhance.css in their original cascade order. */

/* ---- world screen and native panel screens (was world-native.css) ---- */
.native-world{position:absolute;inset:0;overflow:hidden;background:#0b4fa8;color:#fff}.native-world-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.025);filter:saturate(1.08) brightness(.72)}.native-world-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,29,83,.18),rgba(3,30,87,.2) 35%,rgba(2,21,66,.66) 100%),radial-gradient(circle at 50% 35%,transparent 0 28%,rgba(3,26,77,.16) 68%,rgba(2,18,54,.44) 100%)}.native-world-ui{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;gap:2.1%}.native-world-head{display:grid;grid-template-columns:52px 1fr 52px;gap:10px;align-items:start}.world-round{width:48px;height:48px;border:2px solid rgba(255,255,255,.52);border-radius:17px;background:linear-gradient(180deg,rgba(52,146,255,.96),rgba(20,82,190,.96));color:#fff;font-size:25px;font-weight:1000;box-shadow:0 8px 16px rgba(0,32,94,.25);cursor:pointer}.world-title-wrap{text-align:center;text-shadow:0 3px 10px rgba(0,31,84,.26)}.world-kicker{display:inline-flex;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);font-size:10px;font-weight:1000;letter-spacing:.07em}.world-title-wrap h1{margin:7px 0 3px;font-size:clamp(28px,7.6vw,50px);line-height:.95;letter-spacing:-.045em}.world-title-wrap p{margin:0 auto;max-width:92%;font-size:clamp(11px,2.65vw,16px);line-height:1.25;font-weight:800;color:#e8f5ff}.world-topic-grid{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}.world-topic{min-height:112px;border:2px solid rgba(255,255,255,.72);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(231,246,255,.94));color:#102562;display:grid;grid-template-columns:36px 1fr 18px;align-items:center;gap:7px;padding:13px 12px;box-shadow:0 8px 0 rgba(110,187,231,.82),0 15px 24px rgba(0,34,93,.2);cursor:pointer;text-align:start;transition:transform .15s ease,filter .15s ease}.world-topic:active{transform:translateY(5px);box-shadow:0 3px 0 rgba(110,187,231,.82)}.world-topic:hover{filter:brightness(1.025)}.world-topic-num{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(180deg,#7c64ff,#4e43d8);color:#fff;font-weight:1000;box-shadow:0 5px 10px rgba(67,52,163,.22)}.world-topic b{display:block;font-size:clamp(15px,4vw,20px);line-height:1.05;text-align:center}.world-topic i{font-style:normal;font-size:26px;color:#5880ac;font-weight:1000}.world-mix{display:grid;grid-template-columns:42px 1fr 24px;align-items:center;gap:8px;min-height:72px;border:2px solid #fff7c5;border-radius:24px;background:linear-gradient(180deg,#ffe762,#ffb61b);color:#17245e;padding:10px 16px;box-shadow:0 7px 0 #d9860d,0 13px 23px rgba(0,30,90,.22);cursor:pointer;text-align:start}.world-mix>span:first-child{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#205cc6;color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}.world-mix b{display:block;font-size:16px}.world-mix small{display:block;margin-top:2px;font-size:10px;color:#73510d;font-weight:850}.world-mix i{font-style:normal;font-size:28px;font-weight:1000}.native-bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:4px;padding:8px 7px 3px;border-radius:24px 24px 18px 18px;background:rgba(248,253,255,.96);box-shadow:0 8px 24px rgba(0,26,72,.24)}.native-bottom-nav button{border:0;background:transparent;color:#386399;font-size:20px;font-weight:1000;display:grid;place-items:center;gap:1px;cursor:pointer;min-height:50px;border-radius:13px}.native-bottom-nav button.active{background:#e5f2ff;color:#1765d4}.native-bottom-nav small{font-size:8px;font-weight:900}.world-aarde .world-topic-num{background:linear-gradient(180deg,#38bc6a,#168c5b)}.world-dieren .world-topic-num{background:linear-gradient(180deg,#6cc95b,#3c9c48)}.world-geschiedenis .world-topic-num{background:linear-gradient(180deg,#d6a35d,#96642e)}.world-wetenschap .world-topic-num{background:linear-gradient(180deg,#32b7ed,#3172d5)}.world-mysterie .world-topic-num{background:linear-gradient(180deg,#a05fff,#6735d3)}.world-ruimte .world-topic-num{background:linear-gradient(180deg,#5988ff,#3f4bd7)}

/* Fully native dynamic secondary screens. */
.native-panel-screen{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#39aaf2 0,#1775d4 24%,#ecf8ff 24.2%,#e6f5ff 100%);color:#10235f;display:flex;flex-direction:column;gap:10px}.native-panel-glow{position:absolute;inset:0 0 auto;height:29%;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.7),transparent 24%),radial-gradient(circle at 82% 32%,rgba(121,229,255,.55),transparent 29%);pointer-events:none}.panel-head{position:relative;z-index:2;display:grid;grid-template-columns:46px 1fr 46px;align-items:start;gap:8px;color:#fff;text-align:center;min-height:142px}.panel-back,.panel-settings{width:44px;height:44px;border:2px solid rgba(255,255,255,.5);border-radius:15px;background:linear-gradient(180deg,#4ba0ff,#1a64cd);color:#fff;font-size:22px;font-weight:1000;box-shadow:0 7px 14px rgba(0,44,110,.22);cursor:pointer}.panel-kicker{display:inline-flex;margin-top:2px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);font-size:9px;letter-spacing:.08em;font-weight:1000}.panel-head h1{margin:7px 0 2px;font-size:clamp(27px,7vw,43px);line-height:.98;letter-spacing:-.045em;text-shadow:0 4px 13px rgba(0,45,110,.2)}.panel-head p{margin:4px auto 0;max-width:95%;font-size:11px;line-height:1.25;font-weight:800;color:#eaf7ff}.panel-scroll{position:relative;z-index:2;flex:1;min-height:0;overflow:auto;padding:2px 2px 14px;scrollbar-width:none}.panel-scroll::-webkit-scrollbar{display:none}.native-panel-screen>.native-bottom-nav{position:relative;z-index:4;flex:0 0 auto;margin:0}
.summary-hero,.stat-hero{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px;border-radius:24px;background:#fff;box-shadow:0 10px 25px rgba(20,72,125,.13);border:1px solid #d5ecfb}.summary-icon{width:62px;height:62px;border-radius:21px;display:grid;place-items:center;font-size:34px;background:linear-gradient(145deg,#fff7a5,#ffcb31);box-shadow:0 7px 14px rgba(209,147,19,.16)}.summary-hero b,.stat-hero h2{display:block;margin:0 0 4px;font-size:17px}.summary-hero span,.stat-hero p{display:block;margin:0;color:#5b7fa8;font-size:11px;font-weight:800;line-height:1.28}.achievement-grid{display:grid;gap:10px;margin-top:12px}.achievement-card{position:relative;display:grid;grid-template-columns:54px 1fr;gap:11px;align-items:center;padding:13px;border-radius:21px;background:rgba(255,255,255,.92);border:1px solid #d4eafa;box-shadow:0 8px 18px rgba(18,71,127,.09)}.achievement-card.done{border-color:#a9e4b5;background:linear-gradient(180deg,#f7fff5,#ebffed)}.achievement-icon{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;background:#edf6ff;font-size:27px}.achievement-card.done .achievement-icon{background:#dbf8dd}.achievement-card b{font-size:13px}.achievement-card small{display:block;margin-top:3px;color:#6886a7;font-size:10px;font-weight:850}.done-badge{position:absolute;inset-inline-end:11px;top:10px;width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#49ca6c;color:#fff;font-weight:1000}.mini-track,.wide-track{display:block;height:7px;margin-top:7px;border-radius:999px;background:#dcebf5;overflow:hidden}.mini-track i,.wide-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#42d96e,#9ded56)}
.collection-tabs{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px;margin-bottom:10px;border-radius:20px;background:rgba(218,239,253,.96);backdrop-filter:blur(8px)}.collection-tabs button{border:0;border-radius:15px;padding:10px 3px;background:transparent;color:#426b99;font-size:9px;font-weight:1000;line-height:1.1;cursor:pointer}.collection-tabs button.active{background:#fff;color:#1e63c7;box-shadow:0 5px 12px rgba(27,91,156,.12)}.collection-tabs i{font-style:normal;background:#e6f1ff;border-radius:999px;padding:2px 5px}.progress-overall{display:grid;gap:6px;margin-bottom:10px;padding:12px 14px;border-radius:21px;background:linear-gradient(180deg,#fff,#eaf5ff);border:1px solid #d3e9fa;box-shadow:0 8px 18px rgba(20,70,128,.09);color:#12265f}.progress-overall b{font-size:14px}.progress-overall small{color:#6d8ba8;font-size:10px;font-weight:850}.world-progress-grid{display:grid;gap:10px}.progress-world{border:1px solid #d3e9fa;border-radius:21px;background:#fff;display:grid;grid-template-columns:50px 1fr 20px;gap:10px;align-items:center;padding:12px;text-align:start;color:#12265f;box-shadow:0 8px 18px rgba(20,70,128,.09);cursor:pointer}.progress-world-icon{width:48px;height:48px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#e5f5ff,#fff);font-size:27px}.progress-world b{display:block;font-size:13px}.progress-world small{display:block;color:#6d8ba8;font-size:10px;font-weight:850;margin-top:2px}.progress-world em{font-style:normal;font-size:25px;color:#5983ad}.knowledge-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.knowledge-card{min-height:155px;border-radius:22px;padding:12px;text-align:center;background:#fff;border:1px solid #d6eaf9;box-shadow:0 8px 18px rgba(20,70,128,.1);display:flex;flex-direction:column;align-items:center}.knowledge-art{width:65px;height:65px;border-radius:21px;display:grid;place-items:center;font-size:35px;background:linear-gradient(145deg,#e6f5ff,#cae9ff);margin-bottom:9px}.knowledge-card b{font-size:12px;line-height:1.08}.knowledge-card small{color:#6887a6;font-size:9px;font-weight:800;margin-top:4px}.knowledge-card>span{margin-top:auto;padding:5px 8px;border-radius:999px;background:#fff5b8;color:#7e5d12;font-size:8px;font-weight:1000}.mascot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mascot-card{min-height:150px;border:2px solid #d8eafa;border-radius:23px;background:#fff;color:#172961;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:0 8px 18px rgba(20,70,128,.09);cursor:pointer}.mascot-card>div{font-size:40px}.mascot-card b{font-size:13px}.mascot-card small{font-size:9px;color:#6b88a5;font-weight:800}.mascot-card span{margin-top:4px;border-radius:999px;background:#e9f4ff;padding:5px 8px;color:#2f65a0;font-size:8px;font-weight:1000}.mascot-card.selected{border-color:#7360ef;box-shadow:0 0 0 4px rgba(111,88,239,.12),0 9px 19px rgba(20,70,128,.11)}.mascot-card.selected span{background:#7360ef;color:#fff}.mascot-card.locked{filter:grayscale(.5);opacity:.67;cursor:default}.collection-note{text-align:center;color:#6382a2;font-size:10px;font-weight:900;margin:12px}.empty-state{text-align:center;padding:40px 18px;border-radius:24px;background:#fff;border:1px solid #d5eafb}.empty-state>div{font-size:45px}.empty-state h2{margin:8px 0 5px}.empty-state p{margin:0;color:#6686a5;font-size:11px;font-weight:800}
.stat-ring{--p:0;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle closest-side,#fff 72%,transparent 73% 99%),conic-gradient(#49ce70 calc(var(--p)*1%),#dcecf5 0);color:#17326a}.stat-ring b{font-size:21px}.stat-ring small{font-size:9px;color:#6987a4;font-weight:900}.stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.stat-cards article{padding:12px;border-radius:20px;background:#fff;text-align:center;border:1px solid #d6eaf9;box-shadow:0 8px 18px rgba(20,70,128,.08)}.stat-cards span{font-size:23px}.stat-cards b{display:block;font-size:19px;margin-top:3px}.stat-cards small{display:block;color:#6c89a5;font-size:9px;font-weight:850}.section-title{font-size:15px;margin:15px 2px 8px}.world-stat-list{display:grid;gap:9px}.world-stat-list article{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;padding:11px;border-radius:19px;background:#fff;border:1px solid #d6eaf9}.world-stat-list>article>span{font-size:26px}.world-stat-list b{font-size:11px}.world-stat-list small{display:block;color:#6e8aa5;font-size:9px;font-weight:800;margin-top:2px}.world-stat-list strong{text-align:end;font-size:12px;color:#3269a4}
.settings-list{display:grid;gap:10px}.setting-card{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;min-height:76px;padding:12px;border-radius:21px;background:#fff;border:1px solid #d6eaf9;box-shadow:0 8px 18px rgba(20,70,128,.08)}.setting-card.clickable{cursor:pointer}.setting-icon{width:45px;height:45px;border-radius:16px;display:grid;place-items:center;background:#edf6ff;font-size:24px}.setting-card b{display:block;font-size:12px}.setting-card small{display:block;margin-top:3px;color:#6b87a4;font-size:9px;font-weight:800}.setting-card em{font-style:normal;font-size:25px;color:#6486a7}.stepper{display:flex;align-items:center;gap:5px}.stepper button{width:30px;height:30px;border:0;border-radius:10px;background:#e9f3ff;color:#2763a6;font-size:19px;font-weight:1000;cursor:pointer}.stepper strong{font-size:9px;white-space:nowrap}.native-switch{width:48px;height:28px;border:0;border-radius:999px;background:#b9cbd9;padding:3px;cursor:pointer}.native-switch span{display:block;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.15);transition:.16s transform}.native-switch.on{background:#3dca70}.native-switch.on span{transform:translateX(20px)}.range-setting{padding:8px 15px;border-radius:18px;background:rgba(255,255,255,.76);margin-top:-5px}.range-setting input{width:100%;accent-color:#396fe2}.reset-card{border-color:#f4d7d1}.reset-card .setting-icon{background:#fff0eb}.simple-modal{position:absolute;z-index:70;inset:0;display:grid;place-items:center;padding:8%;background:rgba(3,24,69,.55);backdrop-filter:blur(8px)}.simple-modal-card{position:relative;width:100%;padding:25px 20px 20px;border-radius:29px;background:linear-gradient(180deg,#fff,#edf8ff);text-align:center;border:3px solid #fff;box-shadow:0 25px 75px rgba(0,22,70,.45)}.simple-close{position:absolute;inset-inline-end:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#e7f2ff;color:#1b4a84;font-size:21px;cursor:pointer}.simple-icon{font-size:47px}.simple-modal-card h2{margin:6px 0;color:#13235f}.simple-modal-card p{color:#52779e;font-size:11px;font-weight:800;line-height:1.4}.simple-ok,.confirm-actions button{border:0;border-radius:999px;padding:12px 18px;font-weight:1000;cursor:pointer}.simple-ok{background:linear-gradient(180deg,#ffe65c,#ffbc22);color:#17235e}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.confirm-actions .cancel{background:#e9f3ff;color:#285d97}.confirm-actions .confirm{background:#ff785f;color:#fff}

@media(max-width:420px){.native-world-ui{gap:1.6%}.native-world-head{grid-template-columns:44px 1fr 44px}.world-round{width:42px;height:42px;border-radius:14px}.world-title-wrap h1{font-size:30px}.world-title-wrap p{font-size:11px}.world-topic-grid{gap:9px}.world-topic{min-height:96px;border-radius:20px;padding:10px 9px;grid-template-columns:30px 1fr 14px}.world-topic-num{width:28px;height:28px}.world-topic b{font-size:12px}.world-mix{min-height:65px}.native-bottom-nav{padding-top:6px}.native-bottom-nav button{min-height:44px;font-size:18px}.native-panel-screen{gap:7px}.panel-head{min-height:122px;grid-template-columns:42px 1fr 42px}.panel-back,.panel-settings{width:40px;height:40px}.panel-head h1{font-size:29px}.summary-hero{padding:13px}.knowledge-card,.mascot-card{min-height:135px}.setting-card{min-height:69px;padding:10px}.panel-scroll{padding-bottom:9px}}
/* ---- world screen refinements (was world-clean.css) ----
   The transform/filter on .native-world-bg, the whole .native-world-shade rule
   and the whole .world-topic rule were fully superseded by the moodboard pass
   below and have been dropped. */
/* Het wereldscherm: waar het eiland in de plaat zit verschilt per wereld, dus
   m1-ui.js zet er dezelfde kaart op als de tegels gebruiken (K.WORLD_FOCUS).
   `center center` legde voor elke wereld de middenband in beeld, en dan zakte
   het eiland achter de onderwerpknoppen. Dit hier is alleen de terugval. */
.native-world-bg{object-position:center 38%}.world-title-wrap{padding:5px 12px 9px;border-radius:22px;background:linear-gradient(180deg,rgba(4,31,91,.25),rgba(4,31,92,.05));backdrop-filter:blur(2.5px);text-shadow:0 4px 16px rgba(0,20,60,.45)}.world-title-wrap h1,.world-title-wrap p,.world-kicker{position:relative;z-index:1}.world-topic-grid,.world-mix,.native-bottom-nav{position:relative;z-index:3}.world-mix{box-shadow:0 7px 0 #d9850b,0 14px 30px rgba(0,27,80,.24)}
/* ---- moodboard pass: world polish + quiz/hint/result (was moodboard-polish.css); the answer card lives in its own block below ---- */
.native-world-bg{filter:saturate(1.12) brightness(.82)!important;transform:scale(1.015)!important}.native-world-shade{background:linear-gradient(180deg,rgba(2,28,75,.08),rgba(2,28,75,.12) 38%,rgba(3,22,61,.52) 100%)!important}.native-world-ui{gap:1.65%!important}.native-world-head{grid-template-columns:48px 1fr 48px!important}.world-title-wrap h1{font-size:clamp(29px,7.8vw,50px)!important;text-shadow:0 4px 16px rgba(0,26,83,.38)!important}.world-title-wrap p{font-size:clamp(11px,2.7vw,15px)!important;color:#fff!important;text-shadow:0 3px 9px rgba(0,26,83,.4)}.world-topic-grid{gap:10px!important}.world-topic{min-height:104px!important;border-radius:22px!important;background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(239,249,255,.965))!important;box-shadow:0 7px 0 rgba(113,191,232,.82),0 16px 26px rgba(0,33,91,.2)!important}.world-mix{min-height:68px!important}.native-bottom-nav{background:rgba(250,253,255,.985)!important}

.quiz-v2{position:absolute;inset:0;overflow:hidden;color:#10205c;background:#0d58bd}.quiz-v2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) brightness(.61);transform:scale(1.04)}.quiz-v2-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,24,72,.18),rgba(3,32,90,.12) 28%,rgba(5,25,70,.48) 100%)}.quiz-v2-ui{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;gap:1.05%}.quiz-v2-head{display:grid;grid-template-columns:12% 1fr 24%;align-items:center;gap:2%}.quiz-back{width:86%;aspect-ratio:1;border:2px solid rgba(255,255,255,.48);border-radius:30%;background:linear-gradient(180deg,#3993ff,#175ac5);color:white;font-size:clamp(21px,5.5vw,34px);font-weight:1000;box-shadow:0 7px 15px rgba(0,29,88,.26)}.quiz-brand{text-align:center;color:#fff;display:grid;gap:2px}.quiz-brand>span{font-size:clamp(30px,8.2vw,52px);font-weight:1000;line-height:.9;letter-spacing:-.06em;background:linear-gradient(180deg,#fff86c,#ffca26 60%,#ff9b10);-webkit-background-clip:text;color:transparent;-webkit-text-stroke:clamp(1px,.34vw,2px) #2842ae;filter:drop-shadow(0 4px 0 #512fa8) drop-shadow(0 7px 8px rgba(0,20,70,.33))}.quiz-brand small{font-size:clamp(8px,2vw,11px);font-weight:900;text-shadow:0 2px 6px rgba(0,23,77,.55)}.quiz-meta{display:grid;gap:5px}.quiz-meta b{display:block;background:linear-gradient(180deg,rgba(29,104,205,.98),rgba(10,65,154,.98));border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:5px 8px;color:#fff;font-size:clamp(9px,2.2vw,12px);text-align:center;box-shadow:0 5px 10px rgba(0,28,82,.22)}.quiz-progress{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;background:linear-gradient(180deg,rgba(16,83,187,.98),rgba(6,56,146,.98));border:1px solid rgba(255,255,255,.34);border-radius:16px;padding:8px 10px;color:white;box-shadow:0 8px 18px rgba(0,28,89,.24)}.quiz-progress strong,.quiz-progress span{font-size:clamp(10px,2.5vw,14px);white-space:nowrap}.quiz-progress>div{height:11px;border-radius:999px;background:#082967;border:2px solid #71c6ff;overflow:hidden}.quiz-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#43db67,#b8ff50);box-shadow:0 0 10px rgba(103,255,102,.6)}.quiz-card{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.7%;background:linear-gradient(180deg,rgba(255,255,255,.995),rgba(240,249,255,.99));border:2px solid #fff;border-radius:34px 34px 28px 28px;padding:4.2% 3.1% 3.1%;box-shadow:0 22px 44px rgba(0,37,105,.34),inset 0 0 0 2px rgba(96,188,255,.12);overflow:hidden}.quiz-card h1{margin:0;text-align:center;color:#10175c;font-size:clamp(20px,5.15vw,34px);line-height:1.03;letter-spacing:-.035em;font-weight:1000;text-wrap:balance}.quiz-art{position:relative;flex:0 0 31%;min-height:145px;border-radius:26px;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 18px rgba(20,80,145,.17);background:#d4efff}.quiz-art img{width:100%;height:100%;object-fit:cover;object-position:center}.quiz-art::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 -40px 50px rgba(2,38,100,.08);pointer-events:none}.quiz-card .answers{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}.quiz-card .answer{position:relative;min-height:80px;border:2px solid #c8e5fa;border-radius:22px;background:linear-gradient(180deg,#fff,#edf7ff);color:#10175b;padding:11px 10px;padding-inline-start:42px;font-size:clamp(12px,2.8vw,17px);font-weight:1000;line-height:1.08;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 6px 0 #a8d9f4,0 11px 17px rgba(22,84,149,.12);transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,filter .18s ease,border-color .18s ease}.quiz-card .answer.long{font-size:clamp(11px,2.45vw,15px)}.quiz-card .answer.xlong{font-size:clamp(10px,2.2vw,13px)}.answer-letter{position:absolute;inset-inline-start:10px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#e6f1ff;color:#315a9d;font-size:11px;font-weight:1000}.quiz-card .answer.spoken-active{transform:translateY(-8px) scale(1.015);border-color:#75a8ff;box-shadow:0 10px 0 #9fcdf3,0 18px 28px rgba(40,103,189,.22),0 0 0 5px rgba(91,137,255,.12);animation:spokenFloat 1.05s ease-in-out infinite alternate}.quiz-card .answer.correct{background:linear-gradient(180deg,#ecffe7,#c9f7c9);border-color:#55d36b;box-shadow:0 6px 0 #49b95a,0 0 24px rgba(69,217,94,.28)}.quiz-card .answer.wrong{background:linear-gradient(180deg,#fff5e4,#ffd7bb);border-color:#ff9b59;box-shadow:0 6px 0 #ea7d39}.quiz-actions{display:grid;grid-template-columns:1fr 1.85fr;gap:10px}.quiz-actions .action{border:0;border-radius:999px;padding:12px 10px;font-size:clamp(12px,2.8vw,17px);font-weight:1000;cursor:pointer}.quiz-actions .hint{background:linear-gradient(180deg,#9c6cff,#6536e8);color:#fff;box-shadow:0 5px 0 #4a22b7}.quiz-actions .next{background:linear-gradient(180deg,#ffe969,#ffbd23);color:#17235e;box-shadow:0 5px 0 #dc8c12}@keyframes spokenFloat{from{transform:translateY(-6px) scale(1.01)}to{transform:translateY(-10px) scale(1.018)}}

.hint-v2{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:6%;background:rgba(3,24,72,.48);backdrop-filter:blur(5px)}.hint-v2 .hint-card{position:relative;width:92%;max-height:86%;overflow:auto;padding:6% 6% 5%;border-radius:32px;background:linear-gradient(180deg,#ffffff,#edf8ff);border:3px solid rgba(255,255,255,.98);box-shadow:0 25px 70px rgba(0,24,77,.48);text-align:center;color:#10205c}.hint-close{position:absolute;inset-inline-end:14px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:#e8f3ff;color:#24569c;font-size:22px;font-weight:1000}.hint-kicker{display:inline-flex;padding:7px 12px;border-radius:999px;background:#eee7ff;color:#6341cb;font-size:10px;font-weight:1000}.hint-visual{height:185px;margin:14px 0;border-radius:23px;overflow:hidden;box-shadow:0 8px 18px rgba(18,71,127,.16)}.hint-visual img{width:100%;height:100%;object-fit:cover}.hint-card h2{margin:4px 0 6px;font-size:23px}.hint-card p{margin:0;color:#4c6e99;font-size:13px;line-height:1.35;font-weight:850}.hint-ok{margin-top:17px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe863,#ffbd24);color:#17245d;padding:11px 22px;font-weight:1000;box-shadow:0 5px 0 #de8c12}



.result-v2{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center}.result-v2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08) brightness(.62);transform:scale(1.04)}.result-v2-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,34,96,.22),rgba(4,26,74,.56))}.result-v2-card{position:relative;z-index:2;width:94%;padding:7% 6%;border-radius:34px;background:linear-gradient(180deg,#fff,#eef9ff);border:3px solid #fff;box-shadow:0 28px 80px rgba(0,25,75,.5);text-align:center;color:#10205d}.result-mascot{font-size:60px}.result-kicker{font-size:10px;letter-spacing:.08em;color:#3566a8;font-weight:1000}.result-v2 h1{margin:5px 0;font-size:clamp(31px,8vw,48px);line-height:1}.result-stars{font-size:37px;letter-spacing:5px;color:#ffc72d;text-shadow:0 3px 0 #e0930b}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0}.result-stats span{padding:10px 5px;border-radius:18px;background:#eaf5ff}.result-stats b{display:block;font-size:17px}.result-stats small{font-size:9px;color:#6181a7;font-weight:900}.result-native{display:grid;gap:9px}.result-native button{min-height:50px;border:0;border-radius:999px;padding:12px 14px;font-size:clamp(14px,3.6vw,17px);cursor:pointer;background:linear-gradient(180deg,#ffe868,#ffbd21);color:#17235d;font-weight:1000;box-shadow:0 5px 0 #dc8c12}.result-native button.secondary{background:linear-gradient(180deg,#edf5ff,#dbeeff);box-shadow:0 5px 0 #b7d6ef;color:#2e5f9c}

@media(max-width:420px){.quiz-card{padding:4% 2.8% 2.8%;gap:1.5%}.quiz-art{flex-basis:29%;min-height:125px}.quiz-card .answer{min-height:72px;padding-inline-start:38px}.answer-letter{inset-inline-start:8px}.quiz-actions .action{padding:11px 8px}}

/* ---- cinematic intro branding (was intro-enhance.css) ---- */
.motion.kwizillo-cinematic{background:#061937}.intro-bg{display:none}.motion.kwizillo-cinematic video{filter:saturate(1.1) contrast(1.035);transform:scale(1.006)}.intro-brand{position:absolute;z-index:5;left:50%;top:5.2%;transform:translateX(-50%);display:grid;place-items:center;width:min(84%,465px);pointer-events:none;animation:introBrandJourney 12s cubic-bezier(.2,.75,.18,1) both;animation-play-state:paused}.motion.kwizillo-cinematic.cinematic-playing .intro-brand{animation-play-state:running}.intro-brand-logo{display:block;width:100%;height:auto}.motion.kwizillo-cinematic::after{background:linear-gradient(180deg,rgba(0,24,72,.02),rgba(0,24,72,.08) 64%,rgba(0,24,72,.18));pointer-events:none}@keyframes introBrandJourney{0%{opacity:0;transform:translate(-50%,-16px) scale(.72)}6%{opacity:1;transform:translate(-50%,0) scale(1.08)}13%{transform:translate(-50%,0) scale(1)}22%{opacity:1}30%{opacity:0;transform:translate(-50%,-8px) scale(.95)}76%{opacity:0;transform:translate(-50%,8px) scale(.9)}84%{opacity:1;transform:translate(-50%,0) scale(1.07)}92%{transform:translate(-50%,0) scale(.99)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
/* ---- Home hub: real DOM over a painted sky, no screenshot layer ---- */
.home{position:absolute;inset:0;overflow:hidden;background:#0b3f92;color:#fff}
.home-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 16% 12%,rgba(255,255,255,.32),transparent 34%),
  radial-gradient(circle at 84% 20%,rgba(126,214,255,.34),transparent 40%),
  radial-gradient(circle at 50% 96%,rgba(120,86,255,.42),transparent 52%),
  linear-gradient(180deg,#2ea4f5 0%,#2f7bea 34%,#3b53d8 66%,#2b2f96 100%)}
.home-sky::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 42% 12% at 22% 74%,rgba(255,255,255,.5),transparent 70%),
  radial-gradient(ellipse 36% 10% at 78% 84%,rgba(255,255,255,.38),transparent 70%);
  filter:blur(2px);pointer-events:none}
.home-ui{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;gap:12px;
  padding:calc(3.4% + var(--sat)) calc(3.6% + var(--sar)) calc(2.4% + var(--sab)) calc(3.6% + var(--sal));overflow:hidden}

.home-hud{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.hud-player{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;min-width:0}
.hud-avatar{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(223,241,255,.92));box-shadow:0 7px 15px rgba(0,28,84,.26)}
.hud-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.hud-id b{font-size:clamp(15px,4vw,21px);line-height:1.05;text-shadow:0 3px 10px rgba(0,26,80,.42);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-id small{font-size:10px;font-weight:900;color:#dcefff;letter-spacing:.03em}
.hud-xp{display:block;height:6px;width:104px;max-width:100%;margin-top:3px;border-radius:999px;background:rgba(3,26,74,.42);overflow:hidden}
.hud-xp i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffe36a,#ffb524)}
.hud-right{display:flex;align-items:center;gap:6px}
.hud-chip{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:1000;
  background:rgba(4,31,92,.46);border:1px solid rgba(255,255,255,.26);white-space:nowrap}
.hud-gear{width:44px;height:44px;border:1px solid rgba(255,255,255,.34);border-radius:15px;cursor:pointer;
  background:linear-gradient(180deg,rgba(70,159,255,.96),rgba(24,86,196,.96));color:#fff;font-size:20px}

.home-section{margin:2px 2px -2px;font-size:12px;font-weight:1000;letter-spacing:.09em;text-transform:uppercase;color:#dcefff;opacity:.92}
.home-worlds{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:9px}
.home-world{position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.6);border-radius:20px;padding:0;cursor:pointer;
  background:#10306e;box-shadow:0 7px 0 rgba(10,48,116,.5),0 13px 22px rgba(0,26,80,.28);transition:transform .15s ease,filter .15s ease}
.home-world:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(10,48,116,.5)}
.home-world-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.home-world-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,22,66,.06) 38%,rgba(2,20,62,.82) 100%)}
.home-world-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:1px;padding:8px 8px 12px;text-align:center}
.home-world-copy b{font-size:clamp(15px,4.4vw,21px);line-height:1.04;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 10px rgba(0,18,56,.8),0 0 18px rgba(0,18,56,.5)}
.home-world-bar{position:absolute;left:10px;right:10px;bottom:5px;z-index:3;height:4px;border-radius:999px;background:rgba(2,20,62,.5);overflow:hidden}
.home-world-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#43db67,#b8ff50)}

.home-cta{display:grid;grid-template-columns:44px 1fr 20px;align-items:center;gap:9px;min-height:66px;cursor:pointer;text-align:start;
  border:2px solid #fff7c5;border-radius:22px;padding:10px 14px;color:#17245e;
  background:linear-gradient(180deg,#ffe762,#ffb61b);box-shadow:0 7px 0 #d9860d,0 13px 23px rgba(0,30,90,.24)}
.home-cta:active{transform:translateY(4px);box-shadow:0 3px 0 #d9860d}
.home-cta-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#205cc6;color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.home-cta b{display:block;font-size:16px}
.home-cta small{display:block;margin-top:2px;font-size:10px;color:#73510d;font-weight:850}
.home-cta i{font-style:normal;font-size:26px;font-weight:1000}

.home-quick{display:flex;justify-content:space-between;gap:10px}
.quick-group{display:flex;gap:5px;padding:4px;border-radius:999px;background:rgba(4,31,92,.4);border:1px solid rgba(255,255,255,.22)}
.quick-pill{min-width:44px;min-height:38px;border:0;border-radius:999px;background:transparent;cursor:pointer;font-size:17px;
  color:#fff;transition:background .15s ease}
.quick-pill.selected{background:rgba(255,255,255,.94);box-shadow:0 3px 9px rgba(0,26,80,.28)}

/* ---- Onboarding ---- */
.onboarding{position:absolute;inset:0;overflow:hidden;color:#fff;background:#12296f}
.onboarding-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 20% 14%,rgba(255,255,255,.3),transparent 36%),
  radial-gradient(circle at 82% 78%,rgba(133,96,255,.5),transparent 46%),
  linear-gradient(180deg,#36a6f6,#3a5cdc 52%,#2a2b8f)}
.onboarding-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:calc(6% + var(--sat)) calc(7% + var(--sar)) calc(6% + var(--sab)) calc(7% + var(--sal));text-align:center;overflow:auto}
.onboarding-brand{font-size:clamp(30px,8.4vw,52px);font-weight:1000;line-height:.9;letter-spacing:-.06em;
  background:linear-gradient(180deg,#fff86c,#ffca26 60%,#ff9b10);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:clamp(1px,.34vw,2px) #2842ae;filter:drop-shadow(0 4px 0 #512fa8) drop-shadow(0 7px 8px rgba(0,20,70,.33))}
/* Onboarding opens with the logo itself, as big as the screen allows. */
.onboarding-logo{display:block;width:min(78%,330px);height:auto;margin:0 auto;filter:drop-shadow(0 10px 22px rgba(0,20,70,.42))}
@media(max-height:700px){.onboarding-logo{width:min(64%,260px)}}
.onboarding-steps{display:flex;gap:6px;margin:2px 0 6px}
.onboarding-steps i{width:22px;height:5px;border-radius:999px;background:rgba(255,255,255,.28)}
.onboarding-steps i.done{background:rgba(255,255,255,.7)}
.onboarding-steps i.current{background:#ffd23f}
.onboarding h1{margin:0;font-size:clamp(24px,6.6vw,38px);line-height:1.02;letter-spacing:-.03em;text-shadow:0 4px 14px rgba(0,24,76,.42)}
.onboarding-sub{margin:0 0 6px;max-width:30ch;font-size:clamp(12px,3vw,15px);font-weight:800;line-height:1.35;color:#e4f3ff}
.onboarding-choices{display:grid;gap:10px;width:100%;max-width:420px}
.onboarding-choices.guides{grid-template-columns:1fr}
/* The language step lists nine choices: two compact columns fit a phone screen
   without scrolling, the guide step keeps its full-width rows. */
.onboarding-choices.lang{grid-template-columns:1fr 1fr;gap:8px}
.onboarding-choices.lang .onboarding-choice{grid-template-columns:32px 1fr;min-height:54px;padding:8px 10px;gap:8px;border-radius:18px}
.onboarding-choices.lang .choice-icon{font-size:23px}
.onboarding-choices.lang b{font-size:13px;line-height:1.1}
.onboarding-choice{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:12px;min-height:66px;cursor:pointer;text-align:start;
  border:2px solid rgba(255,255,255,.6);border-radius:22px;padding:11px 14px;color:#12265f;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(233,246,255,.94));box-shadow:0 7px 0 rgba(94,163,214,.7),0 13px 22px rgba(0,26,80,.22)}
.onboarding-choice:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(94,163,214,.7)}
.onboarding-choice.selected{border-color:#7360ef;box-shadow:0 0 0 4px rgba(111,88,239,.26),0 9px 19px rgba(0,26,80,.22)}
.onboarding-choice .choice-icon{font-size:32px;text-align:center}
.onboarding-choice b{display:block;font-size:16px}
.onboarding-choice small{display:block;margin-top:2px;font-size:11px;color:#5b7fa8;font-weight:800}
.onboarding-form{display:grid;gap:8px;width:100%;max-width:420px}
.onboarding-form input{width:100%;min-height:58px;border:2px solid rgba(255,255,255,.75);border-radius:20px;padding:0 16px;
  font:1000 18px/1 inherit;color:#12265f;background:rgba(255,255,255,.97);text-align:center}
.onboarding-form input::placeholder{color:#8ea6c9;font-weight:900}
/* A typed name stands out: darker and bigger than the placeholder it replaces. */
.onboarding-form input.filled{color:#07123a;font-size:clamp(22px,6vw,26px);letter-spacing:-.01em}
.onboarding-form input:focus{outline:none;border-color:#ffd23f;box-shadow:0 0 0 4px rgba(255,210,63,.34)}
.onboarding-note{font-size:10px;font-weight:800;color:#d7ecff}
.onboarding-next{width:100%;max-width:420px;min-height:56px;border:0;border-radius:999px;cursor:pointer;
  font-weight:1000;font-size:17px;color:#17245e;background:linear-gradient(180deg,#ffe762,#ffb61b);box-shadow:0 6px 0 #d9860d}
.onboarding-next:disabled{filter:grayscale(.7);opacity:.55;cursor:default;box-shadow:0 6px 0 rgba(120,120,120,.4)}
.onboarding-next:not(:disabled):active{transform:translateY(3px);box-shadow:0 3px 0 #d9860d}
.onboarding-back{border:0;background:transparent;color:#dcefff;font-weight:900;font-size:13px;cursor:pointer;padding:10px;min-height:44px}
.onboarding-welcome{display:grid;place-items:center;margin:4px 0}
.welcome-mascot{font-size:74px;filter:drop-shadow(0 10px 18px rgba(0,22,70,.45))}
.onboarding-final .onboarding-next{margin-top:4px}

/* ---- Safe areas for every full-bleed screen. This is the ONLY place the outer
   padding of these screens is set; earlier rules used to restate it and the
   !important copies silently dropped the notch/home-indicator insets. ---- */
.native-world-ui{padding:calc(3.2% + var(--sat)) calc(3.4% + var(--sar)) calc(2.5% + var(--sab)) calc(3.4% + var(--sal))}
.quiz-v2-ui{padding:calc(3.1% + var(--sat)) calc(3% + var(--sar)) calc(3.3% + var(--sab)) calc(3% + var(--sal))}
.native-panel-screen{padding:calc(3.2% + var(--sat)) calc(3.2% + var(--sar)) calc(2.4% + var(--sab)) calc(3.2% + var(--sal))}
.result-v2{padding:calc(7% + var(--sat)) calc(7% + var(--sar)) calc(7% + var(--sab)) calc(7% + var(--sal))}
@media(max-width:420px){
  .native-world-ui{padding:calc(3.5% + var(--sat)) calc(3.4% + var(--sar)) calc(2.2% + var(--sab)) calc(3.4% + var(--sal))}
  .native-panel-screen{padding:calc(2.7% + var(--sat)) calc(2.7% + var(--sar)) calc(1.8% + var(--sab)) calc(2.7% + var(--sal))}
}

/* Touch targets stay at least 44pt in both nav implementations. */
.native-bottom-nav button{min-height:48px}
.world-topic,.world-mix,.home-world,.progress-world,.mascot-card,.collection-tabs button{min-height:44px}
/* Wat je in dit onderwerp al gedaan hebt, op de tegel zelf. */
.world-topic-copy small{display:block;margin-top:2px;font-size:9.5px;font-weight:900;letter-spacing:.01em}
.world-topic-done{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;background:rgba(58,196,110,.92);color:#04331a;text-shadow:none}
.world-topic-done svg{width:11px;height:11px}
.world-topic-played{color:#e7f2ff;opacity:.92;text-shadow:0 1px 3px rgba(0,20,60,.6)}
.world-progress-line{margin:3px 0 0!important;font-size:11px!important;font-weight:900;color:#eaf4ff;opacity:.95}

/* ---- Language toggle in the parent zone ---- */
.lang-toggle{display:flex;gap:6px}
/* Nine languages do not fit on one line beside the label, so the language card
   gives its buttons their own row and lets them wrap. */
.setting-card.lang-card{grid-template-columns:48px 1fr;row-gap:9px}
.setting-card.profile-row.lang-card{grid-template-columns:1fr}
.setting-card.lang-card .lang-toggle{grid-column:1/-1;flex-wrap:wrap}
.lang-toggle button{min-height:44px;padding:0 11px;border:2px solid #d1e5f7;border-radius:13px;background:#fff;color:#2f6098;
  font-size:12px;font-weight:1000;cursor:pointer}
.lang-toggle button.active{border-color:#267cff;background:#eaf4ff;color:#1257b8;box-shadow:0 0 0 2px rgba(38,124,255,.14)}

@media(max-width:420px){
  .home-ui{gap:9px}
  .hud-avatar{width:42px;height:42px;font-size:22px}
  .home-worlds{gap:8px}
  .home-cta{min-height:60px;grid-template-columns:38px 1fr 18px}
  .home-cta-icon{width:34px;height:34px}
  .onboarding-choice{min-height:60px;grid-template-columns:44px 1fr}
  .welcome-mascot{font-size:60px}
}

/* The illustration keeps its 16:9 framing (CLAUDE.md section 8) instead of being
   cropped into a tall box; the answer grid absorbs the leftover height, so there
   is no empty band and no squeezed picture. */
.quiz-card h1,.quiz-card .quiz-actions{flex:0 0 auto}
/* The illustration takes the leftover height so there is no empty band, but it is
   capped so it stays landscape and never crops the 16:9 art into a tall box. */
.quiz-card .quiz-art{flex:1 1 auto;width:100%;min-height:0;max-height:46%}
/* Tiles grow with the screen but stay tap-sized rather than becoming empty slabs. */
.quiz-card .answers{flex:1 1 auto;margin-top:0;min-height:0;grid-auto-rows:minmax(76px,104px);align-content:center}
/* The A/B/C/D badge sits in the top-left corner as a small chip and the text
   uses the full tile width below it. The previous inline badge with left padding
   ended up covering the first word on iPhone SE and 14 widths. */
.quiz-card .answer{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 10px 10px!important;text-align:center;gap:0}
.quiz-card .answer-letter{position:absolute;inset-inline-start:8px;top:7px;width:22px;height:22px;margin:0;font-size:10px;flex:none}
.quiz-card .answer-copy{display:block;width:100%;max-width:100%;text-align:center;line-height:1.12;
  overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance}
.quiz-card .answer.long{font-size:clamp(11.5px,2.7vw,15px)!important}
.quiz-card .answer.xlong{font-size:clamp(10.5px,2.45vw,13.5px)!important;line-height:1.1!important}
@media(max-width:420px){.quiz-card .answer{padding:23px 8px 9px!important}.quiz-card .answer-letter{inset-inline-start:7px;top:6px;width:20px;height:20px;font-size:9.5px}}

/* ---- Parental gate ---- */
.gate-form{display:grid;gap:8px;margin-top:12px}
.gate-form input{min-height:50px;border:2px solid #cfe4f8;border-radius:16px;padding:0 14px;
  font:1000 18px/1 inherit;color:#12265f;text-align:center;background:#fff}
.gate-form input:focus{outline:none;border-color:#267cff;box-shadow:0 0 0 3px rgba(38,124,255,.2)}
.gate-error{color:#c8453a;font-size:11px;font-weight:900}

/* ---- World topic cards carry their topic illustration (CLAUDE.md section 7):
   full-bleed art with a readable veil, not a white card with a number. ---- */
/* The number badge sits in the top-left corner and the title gets the whole tile width, so long topic names stay one word. */
.world-topic.has-art{position:relative;overflow:hidden;grid-template-columns:1fr;align-items:end;
  padding:11px 10px 11px;min-height:118px!important;color:#fff;border-color:rgba(255,255,255,.55);
  background:#10306e!important;box-shadow:0 7px 0 rgba(10,48,116,.5),0 13px 22px rgba(0,26,80,.28)!important;text-shadow:0 2px 8px rgba(0,18,56,.7)}
.world-topic.has-art:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(10,48,116,.5)}
.world-topic-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;z-index:0}
.world-topic-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(2,22,66,.02) 30%,rgba(2,20,62,.84) 100%)}
.world-topic.has-art .world-topic-num,.world-topic.has-art .world-topic-copy,.world-topic.has-art i{position:relative;z-index:2}
.world-topic.has-art .world-topic-num{position:absolute;inset-inline-start:9px;top:9px;box-shadow:0 5px 10px rgba(0,20,70,.45),0 0 0 2px rgba(255,255,255,.35)}
.world-topic.has-art i{display:none}
.world-topic.has-art .world-topic-copy{width:100%;text-align:center}
.world-topic.has-art b{color:#fff}
.world-topic.has-art small{color:#d6e9ff}
.world-topic.has-art i{color:#fff}
@media(max-width:420px){.world-topic.has-art{min-height:100px;padding:9px 7px 9px}}

/* ---- Mascot portraits replace the robot/headphone emoji wherever Milo or Luna
   appears. Circular crops, sized by context. ---- */
.mascot-face{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;border-radius:50%}
.hud-avatar{padding:0;overflow:hidden}
.hud-avatar .mascot-face{border-radius:14px}
.quick-pill .mascot-face{width:30px;height:30px;margin:auto}
.quick-pill{display:grid;place-items:center}
.sound-voice .mascot-face{width:34px;height:34px}
.mascot-face.large{width:44px;height:44px}
.onboarding-choice .choice-icon .mascot-face.large{width:44px;height:44px;margin:auto}
.mascot-card > div .mascot-face.large{width:52px;height:52px;margin:auto}
.result-mascot .mascot-face.large{width:64px;height:64px;margin:0 auto;box-shadow:0 8px 18px rgba(0,22,70,.3)}
.mascot-face.hero{width:112px;height:112px;margin:auto;box-shadow:0 12px 26px rgba(0,22,70,.45);border:4px solid rgba(255,255,255,.9)}
.welcome-mascot{filter:none}

/* ---- World header: the middle column must be allowed to shrink. With a plain
   1fr the min-content width of a long single-word title ("Geschiedeniswereld")
   pushed the settings button off the right edge of the screen. ---- */
.native-world-head{grid-template-columns:48px minmax(0,1fr) 48px!important;gap:8px}
.world-title-wrap{min-width:0}
.world-title-wrap h1{overflow-wrap:normal;hyphens:none}
.world-title-wrap h1.long{font-size:clamp(22px,6.1vw,40px)!important;letter-spacing:-.04em}
@media(max-width:400px){.world-title-wrap h1.long{font-size:clamp(20px,5.7vw,30px)!important}}

/* ---- World hero (CLAUDE.md section 7: "strong world hero art" first). The world
   paintings are portrait with the island in their lower half; stretched over the
   whole screen that half sat under the topic cards and only sky remained visible.
   The painting now fills a hero band under the header, fading into a blurred copy
   of itself that carries the colour behind the cards. ---- */
.native-world-bg{filter:blur(16px) saturate(1.2) brightness(.6)!important;transform:scale(1.12)!important}
.native-world-hero{position:absolute;left:0;right:0;top:0;height:64%;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
.native-world-hero img{width:100%;height:100%;object-fit:cover;object-position:center 72%;filter:saturate(1.08)}
.native-world-shade{background:linear-gradient(180deg,rgba(2,28,75,.12),rgba(2,28,75,0) 30%,rgba(3,22,61,.28) 100%)!important}

/* Topic titles wrap instead of clipping ("Ontdekkingsreizigers" on 375px). */
.world-topic-copy{min-width:0}
.world-topic b{overflow-wrap:normal;hyphens:none}
@media(max-width:400px){.world-topic b{font-size:14px}}

/* Guide cards: icon spans both rows, the description sits under the name (it
   used to drop into the icon column and wrap word by word). */
.onboarding-choice{gap:2px 12px;align-content:center}
.onboarding-choice .choice-icon{grid-row:1/-1}
.onboarding-choice small{grid-column:2;margin-top:0}

/* Copy on the hint and feedback cards keeps a child-readable floor. */
.hint-card p{font-size:clamp(14px,3.4vw,18px)}
/* Each painting has its island at a different height; keep it in the band
   between the header and the topic cards. */
.world-ruimte .native-world-hero img,.world-mysterie .native-world-hero img{object-position:center 0%}
.world-dieren .native-world-hero img{object-position:center 6%}
.world-wetenschap .native-world-hero img{object-position:center 30%}
.world-aarde .native-world-hero img{object-position:center 48%}
.world-geschiedenis .native-world-hero img{object-position:center 60%}

/* Result stars: earned ones glow gold, the rest stay visibly empty. */
.result-stars i{font-style:normal;color:#cfd9e6;text-shadow:0 3px 0 #a9b6c6}
.result-stars i.on{color:#ffc72d;text-shadow:0 3px 0 #e0930b}

/* Home world tiles are wide and the paintings are tall: aim each tile at its
   island instead of the sky above it. Waar dat punt ligt staat in één kaart,
   K.WORLD_FOCUS (icons.js); m1-ui.js zet het per tegel op de img. Hier stonden
   dezelfde percentages nog een tweede keer, en de twee nieuwste werelden
   ontbraken erin — dan viel de tegel terug op 32% en stond het eiland te laag. */

/* ---- Feedback card v3: the verdict, the right answer and the explanation are
   three clearly separated blocks; "next" only unlocks once the voice is done
   (or the card is closed). ---- */

/* Three quiz actions: hint, read again, another question. */
.quiz-actions{grid-template-columns:1fr 1fr 1.25fr!important;gap:8px!important}
.quiz-actions .repeat{background:linear-gradient(180deg,#5fc4ff,#2b7fe0);color:#fff;box-shadow:0 5px 0 #1a56ad}
.quiz-actions.no-voice{grid-template-columns:1fr 1.6fr!important}
.quiz-actions.no-voice .repeat{display:none}
.quiz-actions .action{padding-inline:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Result: gift → confetti → guide. ---- */
.result-stage{position:relative;height:96px;margin:-6px 0 2px;display:grid;place-items:center}
.result-gift{position:absolute;inset:0;margin:auto;width:84px;height:84px;border:0;background:transparent;font-size:64px;line-height:1;cursor:pointer;animation:giftShake 1.1s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,22,70,.35))}
.result-stage .result-mascot{opacity:0;transform:scale(.3) translateY(20px)}
.result-stage.open .result-gift{animation:giftPop .55s cubic-bezier(.2,.9,.3,1.4) both;pointer-events:none}
.result-stage.open .result-mascot{animation:mascotPop .7s cubic-bezier(.2,.9,.25,1.35) .18s both}
@keyframes giftShake{0%,100%{transform:rotate(0)}15%{transform:rotate(-9deg) scale(1.04)}30%{transform:rotate(8deg)}45%{transform:rotate(-6deg) scale(1.06)}60%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}}
@keyframes giftPop{0%{transform:scale(1);opacity:1}45%{transform:scale(1.35);opacity:1}100%{transform:scale(2.1);opacity:0}}
@keyframes mascotPop{0%{opacity:0;transform:scale(.3) translateY(20px)}60%{opacity:1;transform:scale(1.12) translateY(-6px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.result-stage.open .result-mascot .mascot-face.large{box-shadow:0 0 0 4px #fff,0 0 28px rgba(255,214,60,.75),0 8px 18px rgba(0,22,70,.3)}
@media(prefers-reduced-motion:reduce){.result-gift{animation:none}.result-stage .result-mascot{opacity:1;transform:none}.result-stage .result-gift{display:none}}

/* ---- Knowledge cards: collectable trading cards with the question's own art.
   Frame colour follows the world, the shine follows the rarity. ---- */
.kcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:2px 2px 8px}
.kcard{position:relative;display:block;padding:0;border:0;background:transparent;cursor:pointer;text-align:start;border-radius:18px;
  aspect-ratio:63/88;transition:transform .18s ease}
.kcard:active{transform:scale(.97)}
.kcard-frame{position:relative;display:flex;flex-direction:column;height:100%;padding:7px;border-radius:18px;color:#fff;
  background:var(--kc,linear-gradient(160deg,#3f7ff0,#1f47b0));box-shadow:0 10px 22px rgba(0,26,80,.28),inset 0 0 0 2px rgba(255,255,255,.55),inset 0 0 0 4px rgba(0,20,70,.35);overflow:hidden}
/* Frame texture: the world's painting, tinted with the world colour so the
   name, type and fact stay readable on every card. */
.kcard-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:saturate(1.25) blur(.6px);opacity:.9}
.kcard-tint{position:absolute;inset:0;background:var(--kc,linear-gradient(160deg,#3f7ff0,#1f47b0));opacity:.62;mix-blend-mode:multiply}
.kcard-tint::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,8,40,.35),rgba(0,8,40,0) 30%,rgba(0,8,40,.25) 60%,rgba(0,8,40,.6))}
.kcard-frame>*:not(.kcard-bg):not(.kcard-tint):not(.gold-band){position:relative;z-index:1}
.kcard-frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 45%,rgba(255,255,255,0) 60%)}
.kcard.rare .kcard-frame{box-shadow:0 10px 22px rgba(0,26,80,.28),inset 0 0 0 2px rgba(255,255,255,.55),0 0 0 2px rgba(120,200,255,.55)}
.kcard.epic .kcard-frame::before{background:linear-gradient(115deg,rgba(255,255,255,0) 20%,rgba(255,235,150,.35) 40%,rgba(255,255,255,0) 55%,rgba(180,120,255,.3) 75%,rgba(255,255,255,0) 90%)}
.kcard.epic .kcard-frame{box-shadow:0 10px 22px rgba(0,26,80,.3),inset 0 0 0 2px #ffe27a,0 0 0 2px rgba(255,214,80,.6)}
.kcard.legendary .kcard-frame{box-shadow:0 12px 26px rgba(0,26,80,.34),inset 0 0 0 2px #fff,0 0 0 3px #ffd54a,0 0 18px rgba(255,200,60,.6)}
.kcard.legendary .kcard-frame::before{background:conic-gradient(from 0deg,rgba(255,255,255,0),rgba(255,120,200,.35),rgba(120,220,255,.35),rgba(255,230,120,.35),rgba(255,255,255,0));mix-blend-mode:screen}
.kcard-top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px;padding:5px 8px;border-radius:11px;background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.1));border:1px solid rgba(255,255,255,.45);box-shadow:0 2px 6px rgba(0,10,40,.25)}
.kcard-top b{font-size:clamp(11px,3vw,14px);line-height:1.05;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.kcard-top i{font-style:normal;font-size:10px;color:#ffd54a;letter-spacing:-1px;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.kcard-art{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.9);box-shadow:0 5px 12px rgba(0,10,40,.4),inset 0 0 0 1px rgba(0,0,0,.2);background:#0b2a66}
.kcard-art img{width:100%;height:100%;object-fit:cover;display:block}
.kcard-type{display:block;margin-top:6px;padding:4px 7px;border-radius:999px;background:rgba(3,14,50,.5);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(3px);font-size:8.5px;font-weight:900;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard-text{display:block;flex:1;margin-top:6px;padding:6px 7px;border-radius:10px;background:rgba(3,14,50,.5);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(3px);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);font-size:clamp(8.5px,2.35vw,10.5px);line-height:1.28;font-weight:800;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.kcard-foot{display:flex;justify-content:space-between;margin-top:6px;padding:0 4px 1px;font-size:8.5px;font-weight:900;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.kcard.world-ruimte{--kc:linear-gradient(160deg,#5b7cff,#2a2f9e)}
.kcard.world-dieren{--kc:linear-gradient(160deg,#5fd06b,#1f7a3e)}
.kcard.world-aarde{--kc:linear-gradient(160deg,#37c2e6,#1263a3)}
.kcard.world-geschiedenis{--kc:linear-gradient(160deg,#e9b25a,#9a5b1c)}
.kcard.world-wetenschap{--kc:linear-gradient(160deg,#7e6bff,#3a2ab8)}
.kcard.world-mysterie{--kc:linear-gradient(160deg,#b86bff,#4d1e9c)}
.kcard-zoom{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:8%;background:rgba(3,20,60,.6);backdrop-filter:blur(6px)}
.kcard-zoom .kcard{width:min(78%,300px);aspect-ratio:63/88;animation:kcardPop .32s cubic-bezier(.2,.9,.25,1.25) both}
.kcard-zoom .kcard-top b{font-size:16px}.kcard-zoom .kcard-type{font-size:11px}.kcard-zoom .kcard-text{font-size:12.5px;-webkit-line-clamp:7}.kcard-zoom .kcard-foot{font-size:10px}
@keyframes kcardPop{from{transform:scale(.7) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}

/* ---- Mascot cards: real portraits, locked ones as a silhouette. ---- */
.mascot-portrait{position:relative;display:block;width:76px;height:76px;margin:0 auto;border-radius:50%;box-shadow:0 8px 18px rgba(0,22,70,.22),0 0 0 3px #fff}
.mascot-portrait .mascot-face.large{width:76px;height:76px}
.mascot-portrait.locked .mascot-face{filter:grayscale(1) brightness(.35) blur(1px)}
.mascot-portrait.locked i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.mascot-card.selected .mascot-portrait{box-shadow:0 8px 18px rgba(0,22,70,.22),0 0 0 3px #fff,0 0 0 6px #7360ef}

/* ---- Icon set ---- */
.ki{width:1.15em;height:1.15em;vertical-align:-.2em;display:inline-block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.native-bottom-nav .ki{width:24px;height:24px}
.world-round .ki,.panel-back .ki,.panel-settings .ki,.hud-gear .ki,.quiz-back .ki{width:24px;height:24px;vertical-align:middle}
.hud-chip .ki,.quiz-meta .ki{width:16px;height:16px;vertical-align:-3px}
.quiz-actions .ki{width:18px;height:18px;vertical-align:-4px}
.hint-kicker .ki{width:16px;height:16px}
.world-badge{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 4px 10px rgba(0,26,80,.25);vertical-align:middle;background:#123}
.world-badge.tiny{width:18px;height:18px;box-shadow:0 0 0 1.5px rgba(255,255,255,.85);vertical-align:-4px}
.progress-world-icon{display:grid;place-items:center}
.progress-world-icon .world-badge{width:44px;height:44px}
.world-stat-badge{display:grid;place-items:center}
.hud-avatar{border:0;cursor:pointer}

/* ---- Bottom navigation: glass in the app's own blue, not a white bar. ---- */
.native-bottom-nav{background:linear-gradient(180deg,rgba(24,64,150,.86),rgba(10,32,96,.94))!important;border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 26px rgba(0,20,70,.35),inset 0 1px 0 rgba(255,255,255,.25)!important;padding:7px 6px 5px!important}
.native-bottom-nav button{color:#c9dcff;border-radius:16px;gap:2px}
.native-bottom-nav button .ki{filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.native-bottom-nav button.active{background:linear-gradient(180deg,#ffe36b,#ffbd21);color:#1b2a6b;box-shadow:0 4px 0 #d98b12,0 8px 16px rgba(0,20,70,.3)}
.native-bottom-nav small{font-size:9px;letter-spacing:.01em}

/* ---- Achievements: medals with a progress ring. ---- */
.achievement-card{grid-template-columns:66px 1fr!important}
.achievement-medal{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#ffc531 calc(var(--p,0)*1%),#dfe9f5 0);box-shadow:0 6px 14px rgba(20,70,128,.14)}
.achievement-medal::after{content:"";position:absolute;inset:5px;border-radius:50%;background:linear-gradient(180deg,#f6fbff,#e6f1fc)}
.achievement-medal .achievement-icon{position:relative;z-index:1;width:auto;height:auto;background:transparent;font-size:28px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.15))}
.achievement-card.done .achievement-medal{background:conic-gradient(#ffc531,#ffe27a,#ffc531);box-shadow:0 6px 16px rgba(230,160,20,.35),0 0 0 3px #fff2b3}
.achievement-card.done .achievement-medal::after{background:linear-gradient(180deg,#fff9d6,#ffe9a0)}
.achievement-card:not(.done) .achievement-medal .achievement-icon{filter:grayscale(.55) opacity(.75)}
.achievement-card.done{background:linear-gradient(180deg,#fffdf1,#fff4cf)!important;border-color:#ffd97a!important}
.done-badge{background:linear-gradient(180deg,#ffd54a,#f0a500)!important;color:#5a3a00!important}
.summary-hero .summary-icon{color:#8a5a00}
.summary-hero .summary-icon .ki{width:36px;height:36px}

/* ---- Profile ---- */
.profile-hero{display:grid;justify-items:center;gap:10px;padding:16px 12px 14px;border-radius:24px;background:linear-gradient(180deg,#ffffff,#eaf5ff);border:1px solid #d6eaf9;box-shadow:0 8px 18px rgba(20,70,128,.08)}
.profile-portrait{position:relative;width:104px;height:104px}
.profile-portrait .mascot-face{width:104px;height:104px;box-shadow:0 0 0 4px #fff,0 10px 24px rgba(0,22,70,.3)}
.profile-level{position:absolute;inset-inline-end:-4px;bottom:-2px;min-width:32px;height:32px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(180deg,#ffe36b,#ffbd21);color:#1b2a6b;font-weight:1000;font-size:14px;box-shadow:0 3px 0 #d98b12,0 0 0 3px #fff}
.profile-name{display:flex;gap:6px;width:min(100%,300px)}
.profile-name input{flex:1;min-height:46px;border:2px solid #cfe4f8;border-radius:16px;padding:0 14px;font:1000 18px/1 inherit;color:#12265f;text-align:center;background:#fff}
.profile-name input:focus{outline:none;border-color:#267cff;box-shadow:0 0 0 3px rgba(38,124,255,.2)}
.profile-name button{width:46px;border:0;border-radius:16px;background:linear-gradient(180deg,#5fd06b,#2ea34a);color:#fff;box-shadow:0 4px 0 #1f7a3e;cursor:pointer}
.profile-name button .ki{width:22px;height:22px}
.profile-xp{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;width:min(100%,300px);font-size:11px;font-weight:900;color:#3566a8}
.profile-xp i{display:block;height:9px;border-radius:999px;background:#dcebf5;overflow:hidden}
.profile-xp b{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffc531,#ff9b1a)}
.profile-stats{grid-template-columns:repeat(4,1fr)!important;gap:7px!important}
.profile-stats article{padding:9px 4px!important}
.profile-stats article span .ki{width:22px;height:22px}
.profile-stats article b{display:block;font-size:16px}
.profile-stats article small{font-size:8.5px}
.profile-row{grid-template-columns:1fr auto!important;margin-top:10px}
.profile-link{border:0;border-radius:999px;padding:9px 12px;background:linear-gradient(180deg,#4ba0ff,#1a64cd);color:#fff;font-weight:1000;font-size:12px;box-shadow:0 3px 0 #0f4a9c;cursor:pointer}
.profile-voice .quick-pills{display:flex;gap:4px;padding:3px;border-radius:999px;background:#e7f1fb}
.profile-voice .quick-pill{min-width:40px;min-height:36px}
.stat-cards article span .ki{width:26px;height:26px}

/* ---- Quiz: back/hint/again row, review state, countdown ring, tappable chips ---- */
.quiz-actions .back{background:linear-gradient(180deg,#eef5ff,#d9e9fb);color:#2b5590;box-shadow:0 5px 0 #b5cfe8}
.quiz-actions .back:disabled{opacity:.45;box-shadow:0 5px 0 #c9d6e3}
.quiz-actions .back .ki{width:16px;height:16px}
.is-review .answer:disabled{opacity:1}
.is-review .answer:not(.correct):not(.wrong){filter:saturate(.6);opacity:.75}
/* De klok bij de vraag. De ring was vier pixels dik met een cijfer van 13px:
   op een iPad, waar het frame juist groter staat, zag je hem wel maar niet
   lópen. Nu een dikkere ring en een groter cijfer. De seconden volgen het
   niveau van de wereld (quiz-core-v2.js LEVELS: 30 → 25 → 20 → 16 → 13 → 10). */
.quiz-timer{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#8dff8d calc(var(--p,100)*1%),rgba(255,255,255,.2) 0);box-shadow:0 0 0 2px rgba(255,255,255,.4)}
.quiz-timer::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#0b3b8f}
.quiz-timer b{position:relative;z-index:1;font-size:17px;font-weight:1000;color:#fff;font-variant-numeric:tabular-nums}
.quiz-timer.urgent{background:conic-gradient(#ff7a5c calc(var(--p,100)*1%),rgba(255,255,255,.2) 0);animation:timerPulse .6s ease-in-out infinite}
@keyframes timerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.quiz-progress{grid-template-columns:auto 1fr auto!important}
.meta-chip,.hud-chip{cursor:pointer;font:inherit}
.quiz-meta .meta-chip{display:block;width:100%;border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:5px 8px;color:#fff;font-size:clamp(9px,2.2vw,12px);font-weight:1000;text-align:center;background:linear-gradient(180deg,rgba(29,104,205,.98),rgba(10,65,154,.98));box-shadow:0 5px 10px rgba(0,28,82,.22)}
.profile-stats{cursor:pointer}
.level-toggle{display:flex;gap:4px}
.level-toggle button{min-width:34px;min-height:36px;border:2px solid #cfe4f8;border-radius:12px;background:#fff;color:#2b5590;font-weight:1000;font-size:12px;cursor:pointer}
.level-toggle button.active{border-color:#267cff;background:#e5f0ff;color:#0f4a9c}
.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.scoreboard article{display:grid;justify-items:center;gap:3px;padding:10px 6px;border-radius:18px;background:#fff;border:1px solid #d6eaf9;box-shadow:0 6px 14px rgba(20,70,128,.08)}
.scoreboard article b{font-size:16px;color:#10235f}.scoreboard article small{font-size:9px;color:#5880ac;font-weight:900;text-align:center}
.scoreboard article.gold{background:linear-gradient(180deg,#fff9d6,#ffe9a0);border-color:#ffd54a}
.scoreboard article.silver{background:linear-gradient(180deg,#f7f9fc,#e6ecf3);border-color:#c9d3df}
.scoreboard article.bronze{background:linear-gradient(180deg,#fff1e6,#ffd9bd);border-color:#f0b184}
.share-btn{margin-top:10px;width:100%;min-height:48px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe36b,#ffbd21);color:#1b2a6b;font-weight:1000;font-size:14px;box-shadow:0 5px 0 #d98b12;cursor:pointer}

/* ---- Intro start layer: one tap unlocks sound and starts the cinematic ---- */
.intro-start{position:absolute;inset:0;z-index:6;display:grid;place-content:center;gap:18px;justify-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(30,70,170,.55),rgba(4,20,60,.92) 75%);cursor:pointer}

.intro-start span{padding:12px 22px;border-radius:999px;background:linear-gradient(180deg,#ffe36b,#ffbd21);color:#1b2a6b;font-weight:1000;font-size:16px;box-shadow:0 5px 0 #d98b12,0 10px 20px rgba(0,20,70,.35);animation:startPulse 1.4s ease-in-out infinite}
.motion:not(.cinematic-playing) .intro-brand{display:none}

@keyframes startPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ---- Question art is never cropped: the picture is shown whole (contain)
   over a blurred copy of itself that fills whatever the card leaves over. ---- */
.quiz-card .quiz-art{position:relative;flex:0 1 auto;width:100%;aspect-ratio:16/9;max-height:44%;min-height:0;overflow:hidden}
.quiz-art .art-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(16px) brightness(.8) saturate(1.2);transform:scale(1.2)}
.quiz-art .art-main{position:relative;width:100%;height:100%;object-fit:contain;object-position:center}
.hint-visual{aspect-ratio:16/9;height:auto!important;max-height:180px}
.hint-visual img{object-fit:contain!important;background:#0b2a66;transform:none!important}

/* ---- Primary CTAs in the app's own blue-violet, gold only as the accent. ---- */
.home-cta,.world-mix{border-color:rgba(255,255,255,.6)!important;color:#fff!important;
  background:linear-gradient(180deg,#4f8dff 0%,#2f5fe0 55%,#2b48c4 100%)!important;
  box-shadow:0 7px 0 #1a3a9c,0 14px 28px rgba(0,27,80,.32),inset 0 1px 0 rgba(255,255,255,.45)!important}
.home-cta:active,.world-mix:active{transform:translateY(4px);box-shadow:0 3px 0 #1a3a9c!important}
.home-cta small,.world-mix small{color:#d6e6ff!important}
.home-cta i,.world-mix i{color:#ffe36b}
.home-cta-icon,.world-mix>span:first-child{background:linear-gradient(180deg,#ffe36b,#ffbd21)!important;color:#1b2a6b!important;box-shadow:0 3px 0 #d98b12,inset 0 1px 0 rgba(255,255,255,.6)!important}
.home-cta-icon .ki,.world-mix>span:first-child .ki{width:18px;height:18px;vertical-align:middle}

/* ---- World header: badge and kicker on one line, subtitle without an orphan. ---- */
.world-kicker{display:inline-flex!important;align-items:center;gap:6px;line-height:1;white-space:nowrap}
.world-kicker .world-badge{vertical-align:middle}
.world-title-wrap p{text-wrap:balance;max-width:min(92%,300px)!important}

/* ---- Intro: the film's first frame is the start screen; one pill invites the tap. ---- */
.intro-start{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(2,18,60,.7) 100%)!important;place-content:end center!important;padding-bottom:calc(11% + var(--sab))}
.intro-start span{font-size:17px;padding:14px 26px}

/* ---- Collection cards: never wider than their column, no sideways scroll. ---- */
.kcard{min-width:0;max-width:100%;overflow:hidden}
.kcard-frame{min-width:0}
.kcard-top{min-width:0}
.kcard-top b{min-width:0;overflow-wrap:normal;hyphens:none}
.panel-scroll,.native-panel-screen{overflow-x:hidden}
.kcard-grid{max-width:100%}

/* ---- Review: "next" lives under the answers; the row stays Back/Hint/Again. ---- */
.review-next{margin:8px 0 0;width:100%;min-height:44px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe36b,#ffbd21);color:#1b2a6b;font-weight:1000;font-size:14px;box-shadow:0 4px 0 #d98b12;cursor:pointer}
.is-review .answer{cursor:pointer}
/* Nog niet begonnen: de klok start pas als de vraag is voorgelezen, zodat je
   geen tijd verliest terwijl de gids praat. Dat mag je zien — hij staat stil
   en zacht te wachten in plaats van zomaar niet te lopen. */
.quiz-timer:not(.running){opacity:.6;background:conic-gradient(rgba(255,255,255,.34) 100%,rgba(255,255,255,.34) 0)}
.result-rule{margin:6px 0 0;font-size:12px;font-weight:900;color:#3566a8}
.result-unlock{margin:6px 0 0;padding:6px 10px;border-radius:999px;background:#fff2b3;color:#7a4b00;font-size:12px;font-weight:1000}
.result-unlock.is-gold{background:linear-gradient(180deg,#ffe58a,#ffc64a);color:#6b4500}
/* A buddy that was just earned, introduced the moment it happens. */
.mascot-unlock{position:absolute;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 42%,rgba(40,70,170,.5),rgba(4,16,44,.88));backdrop-filter:blur(3px);animation:goldFade .3s ease both}
.mascot-unlock-card{position:relative;display:grid;justify-items:center;gap:4px;width:min(300px,86%);padding:16px 16px 18px;border-radius:28px;background:linear-gradient(180deg,#ffffff,#e8f3ff);box-shadow:0 0 0 3px #7ee0ff,0 24px 60px rgba(6,26,70,.5);text-align:center;color:#12265f;animation:goldPop .55s cubic-bezier(.2,.9,.25,1.35) both}
.mascot-unlock .mascot-unlock-rays{position:absolute;inset:-35%;background:conic-gradient(from 0deg,rgba(126,224,255,.5) 0 6deg,transparent 6deg 18deg);border-radius:50%;animation:goldSpin 10s linear infinite;z-index:0;opacity:.35}
.mascot-unlock-kicker{position:relative;z-index:1;font-size:10px;font-weight:1000;letter-spacing:.09em;color:#2b74d6}
.mascot-unlock-art{position:relative;z-index:1;width:66%;aspect-ratio:1;max-height:34vh;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 3px #7ee0ff,0 12px 24px rgba(0,22,70,.32)}
.mascot-unlock-card b{position:relative;z-index:1;font-size:20px;line-height:1.1}
.mascot-unlock-sub{position:relative;z-index:1;font-size:12px;font-weight:900;color:#4f7aab}
.mascot-unlock-line{position:relative;z-index:1;margin-top:2px;padding:4px 10px;border-radius:999px;background:#eaf5ff;font-size:10px;font-weight:1000;color:#2b74d6}
.mascot-unlock-ok{position:relative;z-index:1;margin-top:8px;min-height:46px;padding:12px 22px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe868,#ffbd21);color:#5a3a00;font-size:15px;font-weight:1000;box-shadow:0 5px 0 #d79a10;cursor:pointer}
@media(prefers-reduced-motion:reduce){.mascot-unlock,.mascot-unlock-card{animation:none}.mascot-unlock .mascot-unlock-rays{animation:none;opacity:.2}}
/* A world finished at all six levels: the golden card takes the whole screen. */
.gold-unlock{position:absolute;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 42%,rgba(90,60,0,.55),rgba(4,16,44,.88));backdrop-filter:blur(3px);animation:goldFade .35s ease both}
.gold-unlock-card{position:relative;display:grid;justify-items:center;gap:8px;width:min(320px,86%);padding:20px 18px 18px;border-radius:30px;background:linear-gradient(180deg,#fff8e2,#ffe7a8);box-shadow:0 0 0 3px #ffd45e,0 26px 70px rgba(60,35,0,.55);text-align:center;color:#6b4500;animation:goldPop .6s cubic-bezier(.2,.9,.25,1.35) both}
.gold-unlock .gold-rays{position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(255,214,90,.55) 0 6deg,transparent 6deg 18deg);border-radius:50%;animation:goldSpin 9s linear infinite;z-index:0;opacity:.45}
.gold-unlock-art{position:relative;z-index:1;display:block;width:100%;max-height:min(44vh,330px);object-fit:cover;border-radius:22px;box-shadow:0 0 0 3px #fff,0 14px 30px rgba(60,35,0,.4)}
.gold-unlock-card b{position:relative;z-index:1;font-size:16px;line-height:1.15}
.gold-unlock-sub{position:relative;z-index:1;font-size:12px;font-weight:900;color:#8a6210}
.gold-unlock-ok{position:relative;z-index:1;margin-top:4px;min-height:46px;padding:12px 22px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe868,#ffbd21);color:#5a3a00;font-size:15px;font-weight:1000;box-shadow:0 5px 0 #d79a10;cursor:pointer}
@keyframes goldFade{from{opacity:0}to{opacity:1}}
@keyframes goldPop{0%{opacity:0;transform:scale(.6) rotate(-8deg)}70%{opacity:1;transform:scale(1.05) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes goldSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.gold-unlock,.gold-unlock-card{animation:none}.gold-unlock .gold-rays{animation:none;opacity:.25}}
.is-fail .result-v2-card{box-shadow:0 28px 80px rgba(0,25,75,.5),0 0 0 6px rgba(255,170,90,.35)}
.is-fail .result-stage .result-mascot{animation:none;opacity:1;transform:none}
.level-card .level-toggle button{min-width:30px}
.poster-only video{opacity:0}

/* ---- Guide choice: the chosen card lights up. ---- */
.onboarding-choice{position:relative;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.onboarding-choice .choice-check{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%) scale(0);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#5fd06b,#2ea34a);color:#fff;box-shadow:0 3px 8px rgba(0,60,20,.3);transition:transform .2s cubic-bezier(.2,.9,.3,1.4)}
.onboarding-choice .choice-check .ki{width:16px;height:16px}
.onboarding-choice.selected{transform:scale(1.03);border-color:#ffd23f!important;background:linear-gradient(180deg,#fffbe6,#fff1b8)!important;
  box-shadow:0 0 0 4px rgba(255,210,63,.45),0 0 26px rgba(255,210,63,.65),0 10px 22px rgba(0,26,80,.25)!important}
.onboarding-choice.selected .choice-check{transform:translateY(-50%) scale(1)}
.onboarding-choice.selected .mascot-face{box-shadow:0 0 0 3px #ffd23f}
.onboarding-choice:not(.selected){opacity:.92}

/* ---- Feedback "next": transparent while the guide speaks, a bar sweeps
   left to right with the clip, then the button fills gold. ---- */

/* ---- Intro: film runs at once; a small pill at the bottom asks for the tap that turns sound on. ---- */
.intro-start{display:none!important}
.intro-sound{position:absolute;left:50%;bottom:calc(9% + var(--sab));transform:translateX(-50%);z-index:6;padding:11px 18px;border-radius:999px;
  background:rgba(4,20,60,.62);border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:1000;font-size:14px;white-space:nowrap;backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(0,20,70,.35);animation:startPulse 1.4s ease-in-out infinite;pointer-events:none}
.motion .intro-brand{display:grid!important}

/* Intro sound pill: centred with margins (the pulse animation owns transform). */
.intro-sound{left:0!important;right:0!important;transform:none!important;width:max-content;margin:0 auto;bottom:calc(8% + var(--sab))!important}
@keyframes soundPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.intro-sound{animation:soundPulse 1.4s ease-in-out infinite!important}
/* Quiz header: equal side columns so the wordmark sits on the screen's centre line. */
.quiz-v2-head{grid-template-columns:24% 1fr 24%!important}
.quiz-back{width:44px!important;justify-self:start}

/* Back / Hint / Again: three equal, evenly spaced buttons. */
.quiz-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.quiz-actions.no-voice{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.quiz-actions .action{min-height:48px;padding:0 8px;font-size:clamp(12px,3.1vw,15px);display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.quiz-actions .action .ki{width:17px;height:17px;vertical-align:middle;flex:0 0 auto}

/* ==== Memo ==== */
.memo-ui{gap:1.2%!important}
.memo-progress{grid-template-columns:auto 1fr auto!important}
.memo-board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px;padding:2px}
.memo-card{position:relative;border:0;background:transparent;padding:0;cursor:pointer;perspective:800px;min-height:0;-webkit-tap-highlight-color:transparent}
.memo-face{position:absolute;inset:0;border-radius:16px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .42s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.memo-back{background:linear-gradient(160deg,#4f8dff,#2b48c4);border:2px solid rgba(255,255,255,.55);box-shadow:0 6px 0 #1a3a9c,0 10px 18px rgba(0,26,80,.3),inset 0 1px 0 rgba(255,255,255,.5);color:#ffd54a}
.memo-back::before{content:"";position:absolute;inset:6px;border-radius:11px;border:2px dashed rgba(255,255,255,.28)}
.memo-back .ki{width:38%;height:38%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.memo-front{transform:rotateY(180deg);background:#fff;border:3px solid #fff;box-shadow:0 6px 0 #a8d9f4,0 10px 18px rgba(22,84,149,.18)}
.memo-front img{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);object-fit:cover;display:block}
.memo-front.word{padding:6px;background:linear-gradient(160deg,#4f8dff,#2748b8)}
.memo-front.word b{font-size:clamp(11px,3.2vw,17px);line-height:1.05;color:#fff;text-shadow:0 2px 6px rgba(0,20,60,.5);text-align:center;overflow-wrap:normal;hyphens:none;text-wrap:balance}
.memo-card.is-open .memo-back,.memo-card.is-matched .memo-back{transform:rotateY(180deg)}
.memo-card.is-open .memo-front,.memo-card.is-matched .memo-front{transform:rotateY(360deg)}
.memo-card.is-matched .memo-front{border-color:#55d36b;box-shadow:0 6px 0 #49b95a,0 0 22px rgba(69,217,94,.45);animation:memoPop .45s cubic-bezier(.2,.9,.3,1.4)}
.memo-card.is-matched{pointer-events:none}
@keyframes memoPop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.memo-foot{display:flex;justify-content:space-between;gap:10px;padding:2px 6px;color:#e8f2ff;font-size:11px;font-weight:900;text-shadow:0 2px 6px rgba(0,20,60,.5)}
.world-mysterie .memo-back,.quiz-world-mysterie .memo-back{background:linear-gradient(160deg,#b86bff,#4d1e9c);box-shadow:0 6px 0 #3a1478,0 10px 18px rgba(0,26,80,.3)}
.quiz-world-dieren .memo-back{background:linear-gradient(160deg,#5fd06b,#1f7a3e);box-shadow:0 6px 0 #145a2c,0 10px 18px rgba(0,26,80,.3)}
.quiz-world-aarde .memo-back{background:linear-gradient(160deg,#37c2e6,#1263a3);box-shadow:0 6px 0 #0c4a7c,0 10px 18px rgba(0,26,80,.3)}
.quiz-world-geschiedenis .memo-back{background:linear-gradient(160deg,#e9b25a,#9a5b1c);box-shadow:0 6px 0 #6f3f12,0 10px 18px rgba(0,26,80,.3)}
.quiz-world-wetenschap .memo-back{background:linear-gradient(160deg,#7e6bff,#3a2ab8);box-shadow:0 6px 0 #2a1e8a,0 10px 18px rgba(0,26,80,.3)}

/* Entry points: a games row on Home and a slim game button on the world page. */
.home-games{display:grid;grid-template-columns:1fr;gap:8px}
.home-game{display:grid;grid-template-columns:44px 1fr 18px;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border-radius:20px;text-align:start;cursor:pointer;color:#fff;
  border:2px solid rgba(255,255,255,.35);background:linear-gradient(180deg,rgba(124,86,255,.92),rgba(78,52,196,.95));box-shadow:0 6px 0 #37237f,0 10px 20px rgba(0,26,80,.3)}
.home-game:active{transform:translateY(3px);box-shadow:0 3px 0 #37237f}
.home-game .home-game-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,#ffe36b,#ffbd21);color:#1b2a6b;box-shadow:0 3px 0 #d98b12}
.home-game .home-game-icon .ki{width:22px;height:22px}
.home-game b{display:block;font-size:15px}.home-game small{display:block;margin-top:1px;font-size:10px;color:#e6dcff;font-weight:850}
.home-game i{font-style:normal;font-size:24px;font-weight:1000;color:#ffe36b}
.world-game{display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:8px;min-height:46px;padding:6px 12px;border-radius:18px;text-align:start;cursor:pointer;color:#fff;
  border:2px solid rgba(255,255,255,.35);background:linear-gradient(180deg,rgba(124,86,255,.92),rgba(78,52,196,.95));box-shadow:0 5px 0 #37237f,0 10px 18px rgba(0,26,80,.3);position:relative;z-index:3}
.world-game:active{transform:translateY(3px);box-shadow:0 2px 0 #37237f}
.world-game>span:first-child{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(180deg,#ffe36b,#ffbd21);color:#1b2a6b}
.world-game>span:first-child .ki{width:17px;height:17px}
.world-game b{display:block;font-size:13px}.world-game small{display:block;font-size:9.5px;color:#e6dcff;font-weight:850}
.world-game i{font-style:normal;font-size:22px;font-weight:1000;color:#ffe36b}
@media(max-height:700px){.world-game{min-height:42px;padding:4px 10px}.home-game{min-height:50px}}
.memo-board-stats article b{font-size:13px}

/* ==== Rekenen ==== */
.home-games{grid-template-columns:1fr 1fr 1fr}
.home-game.math,.world-game.math{background:linear-gradient(180deg,rgba(45,190,140,.95),rgba(20,130,95,.97));box-shadow:0 6px 0 #0d5a42,0 10px 20px rgba(0,26,80,.3)}
.home-game.math:active,.world-game.math:active{box-shadow:0 3px 0 #0d5a42}
.home-game.math small,.world-game.math small{color:#d9fff0}
.world-games{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative;z-index:3}
.world-game{grid-template-columns:30px 1fr 14px;gap:6px;padding:6px 10px}
.world-game b{font-size:12.5px}.world-game small{font-size:9px}
@media(max-width:400px){.home-game b{font-size:13px}.home-game small{font-size:9px}.home-game{grid-template-columns:36px 1fr 14px;gap:7px;padding:8px 10px}.home-game .home-game-icon{width:34px;height:34px}}
.math-card{justify-content:flex-start}
.math-sum{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:10px 6px 4px;color:#10175c}
.math-sum b{font-size:clamp(34px,11vw,56px);line-height:1;letter-spacing:-.02em}
.math-sum.long b{font-size:clamp(26px,8vw,42px)}
.math-sum span{font-size:clamp(22px,7vw,36px);color:#3566a8;font-weight:1000}
.math-answers .answer{font-size:clamp(20px,6vw,30px)!important;min-height:86px!important}
.math-answers .answer-copy{font-variant-numeric:tabular-nums}
.math-feedback{margin-top:8px;padding:10px 12px;border-radius:16px;text-align:center;font-weight:900;color:#1a2d5a;background:#eef6ff;border:2px solid #cfe5ff;cursor:pointer;display:grid;gap:2px;animation:fadeIn .2s ease both}
.math-feedback b{font-size:12px;letter-spacing:.06em}
.math-feedback span{font-size:clamp(16px,4.6vw,22px);color:#10175b}
.math-feedback.is-good{background:#eaffef;border-color:#a8ecb7;color:#0f5a2a}
.math-feedback.is-try{background:#fff1dc;border-color:#ffd39a;color:#6a3d05}
.math-feedback.is-hint{background:#efeaff;border-color:#cdbfff;color:#3b2a8a;font-size:14px}
.math .quiz-actions{margin-top:auto}
.scoreboard .level-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#4f8dff,#2b48c4);color:#fff;font-weight:1000;box-shadow:0 0 0 2px #fff,0 4px 10px rgba(0,26,80,.25)}
.math-feedback[hidden]{display:none!important}

/* Memo cards: landscape 4:3 so the 16:9 pictures show their subject with a
   light crop; strong white frame, matched pairs glow. */
.memo-board{align-content:center;grid-auto-rows:auto!important;gap:9px}
.memo-card{aspect-ratio:4/3;width:100%}
.memo-face{border-radius:14px}
.memo-front{border:3px solid #fff;box-shadow:0 5px 0 #a8d9f4,0 10px 18px rgba(22,84,149,.22)}
.memo-front img{object-position:center 45%}
.memo-back{border-width:3px}
.memo-back .ki{width:34%;height:34%}
@media(max-height:700px){.memo-board{gap:7px}.memo-face{border-radius:11px}}

/* Game tiles: artwork with the name on it, nothing underneath. */
.home-game.art,.world-game.art{position:relative;display:block;padding:0;overflow:hidden;border-radius:20px;border:2px solid rgba(255,255,255,.75);background:#10306e;
  box-shadow:0 7px 0 rgba(10,48,116,.5),0 13px 22px rgba(0,26,80,.28);aspect-ratio:16/8;min-height:0;text-align:start}
.home-game.art:active,.world-game.art:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(10,48,116,.5)}
.home-game-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.home-game-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,22,66,0) 40%,rgba(2,20,62,.82) 100%)}
.home-game.art b,.world-game.art b{position:absolute;left:6px;right:6px;bottom:8px;text-align:center;font-size:16px;color:#fff;text-shadow:0 2px 8px rgba(0,18,56,.8)}
.world-game.art{aspect-ratio:16/7;border-radius:18px}
.world-game.art b{font-size:13px;left:9px;bottom:6px}
@media(max-height:700px){.world-game.art{aspect-ratio:16/6}.home-game.art{aspect-ratio:16/8}}

/* Home: the six worlds and the two games carry the screen; headings centred. */
.home-section{text-align:center}
.home-worlds{flex:1 1 auto}
.home-games{flex:0 0 auto}
.home-game.art{aspect-ratio:16/9}
@media(min-height:800px){.home-game.art{aspect-ratio:16/10}}
/* Memo: the board fills the height it gets; cells share it evenly. */
.memo-board{height:100%;grid-template-rows:repeat(var(--rows,4),minmax(0,1fr));align-content:stretch;gap:8px}
.memo-card{aspect-ratio:auto;min-height:0;height:100%}
.memo-front img{object-position:center 45%}

/* Sum layout: the operator sits on the centre line, "= ?" underneath. */
.math-sum.grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:12px 6px 0}
.math-sum.grid b:first-child{text-align:end}
.math-sum.grid b:last-child{text-align:start}
.math-sum.grid em{font-style:normal;font-weight:1000;font-size:clamp(30px,9.5vw,48px);color:#3566a8;line-height:1}
.math-eq{text-align:center;font-weight:1000;color:#3566a8;font-size:clamp(20px,6vw,30px);margin:2px 0 4px}
.math-eq strong{color:#0f5a2a}
.math .review-next{margin-top:10px}

/* Memo world picker */
/* The picker fits on one screen: mode row, the "all worlds" tile and a 3x2 world grid share the height, no scrolling. */
/* The picker always fits the height it gets (a phone with browser bars too): compact
   head, the mode row, a bounded "all worlds" tile, and the world grid takes the rest. */
.memo-picker .panel-head{min-height:96px}
.memo-picker .panel-scroll{display:grid;grid-template-rows:auto minmax(64px,132px) minmax(0,1fr);gap:8px;align-content:stretch;overflow:hidden;padding-bottom:4px}
.memo-picker .memo-mode{margin-bottom:0}
.memo-picker .memo-mode-btn{min-height:88px;padding:8px 8px 10px}
.memo-picker .memo-mode-faces{height:40px;margin-bottom:2px}
/* Duel: player 2's name, one compact row under the mode buttons */
.memo-p2{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:6px 8px 6px 14px;border-radius:16px;background:linear-gradient(180deg,#fff,#edf7ff);border:2px solid #fff;box-shadow:0 5px 0 rgba(110,187,231,.6),0 10px 18px rgba(0,34,93,.12)}
.memo-p2[hidden]{display:none}
.memo-p2 span{font-size:14px;font-weight:1000;color:#1b3a7a;white-space:nowrap}
.memo-p2 input{min-height:38px;border:2px solid #cfe3f7;border-radius:12px;padding:0 12px;font:900 16px/1 inherit;color:#12265f;background:#fff;width:100%}
.memo-p2 input::placeholder{color:#8ea6c9}
.memo-p2 input:focus{outline:none;border-color:#ffd23f;box-shadow:0 0 0 3px rgba(255,210,63,.34)}
.memo-picker .memo-mode-faces .mascot-face{width:38px;height:38px}
.memo-picker .memo-mode-faces.two .mascot-face{width:34px;height:34px}
.memo-pick{position:relative;display:block;padding:0;overflow:hidden;border-radius:20px;border:2px solid rgba(255,255,255,.75);background:#10306e;box-shadow:0 7px 0 rgba(10,48,116,.5),0 13px 22px rgba(0,26,80,.28);aspect-ratio:16/8;min-height:0;text-align:start;cursor:pointer;width:100%}
.memo-pick:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(10,48,116,.5)}
.memo-pick b{position:absolute;left:8px;right:8px;bottom:10px;text-align:center;font-size:18px;color:#fff;text-shadow:0 2px 8px rgba(0,18,56,.8)}
.memo-pick.mix{aspect-ratio:auto;height:100%;min-height:64px;max-height:132px}.memo-pick.mix .home-game-art{object-position:center 55%}
.memo-pick-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:8px;min-height:0;height:100%;align-self:start;max-height:300px}
.memo-pick-grid .memo-pick{aspect-ratio:auto;height:100%;min-height:0}
/* The same picker without the two-player modes: the tiles take the room that
   frees up, so the screen is filled instead of ending halfway. */
.game-picker .panel-scroll{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.game-picker .memo-pick.mix{aspect-ratio:16/7;height:auto}
/* Zoveel rijen als er werelden zijn; ze delen de hoogte, zodat de laatste rij nooit onder de rand verdwijnt. */
.game-picker .memo-pick-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:minmax(0,1fr);max-height:none}
.game-picker .memo-pick b{font-size:clamp(13px,3.6vw,16px)}
/* A small phone: flatter tiles so all six stay fully in view. */
@media(max-height:700px){.memo-picker .memo-mode-btn{min-height:72px}.memo-picker .memo-mode-faces{height:34px}.memo-picker .memo-mode-faces .mascot-face{width:32px;height:32px}.memo-picker .memo-mode-faces.two .mascot-face{width:30px;height:30px}}
.memo-pick-grid .memo-pick b{left:5px;right:5px;bottom:7px;font-size:12.5px;line-height:1.05;white-space:normal;overflow-wrap:normal;hyphens:none}
.math-sum.grid b:last-child{white-space:nowrap}
.math-sum .math-eq{display:inline;margin:0}
.voice-volume{margin-top:8px}.voice-volume input:disabled{opacity:.4}

/* Hint budget per level: a small counter on the tile, greyed when spent. */
.quiz-actions .action .hint-count{font-style:normal;display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.75);color:#1e63c7;font-size:11px;font-weight:1000}
.quiz-actions .action.spent{opacity:.45;filter:saturate(.4)}

/* Mascots: the character fills the tile, only the name on top of it. */
.mascot-grid{gap:12px}
.mascot-card{position:relative;padding:0;min-height:0;aspect-ratio:5/4;overflow:hidden;border:0;border-radius:24px;background:#dbe8ff;justify-content:flex-end;align-items:stretch;gap:0;box-shadow:0 10px 22px rgba(20,70,128,.16)}
.mascot-card{background:linear-gradient(170deg,#e9f4ff,#c3ddfb)}
/* The tiles are cut-outs on a transparent canvas: shown whole, centred, on
   the card's own colour — not cropped to fill a box. */
.mascot-card .mascot-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 10px rgba(0,22,70,.22));transition:transform .35s ease}
.mascot-card:active .mascot-fill{transform:none}
.mascot-card .mascot-name{position:relative;z-index:1;margin:0;padding:34px 10px 11px;text-align:center;font-size:15px;font-weight:1000;color:#fff;letter-spacing:.01em;text-shadow:0 2px 6px rgba(0,20,70,.55);background:linear-gradient(180deg,transparent,rgba(6,22,70,.72))}
.mascot-card .mascot-name small{display:block;font-size:10px;font-weight:900;color:#dbe8ff;opacity:.95;margin-top:2px}
.mascot-card .mascot-state{position:absolute;z-index:2;top:9px;right:9px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:#2f65a0;font-size:9px;font-weight:1000;box-shadow:0 3px 8px rgba(0,20,70,.2)}
.mascot-card.selected{box-shadow:0 0 0 4px #7360ef,0 10px 22px rgba(20,70,128,.2)}
.mascot-card.selected .mascot-state{background:#7360ef;color:#fff}
.mascot-card.locked{opacity:1;filter:none}
.mascot-card.locked .mascot-fill{filter:grayscale(1) brightness(.32) blur(1.5px)}
.mascot-card.locked .mascot-lock{position:absolute;z-index:2;inset:0;display:grid;place-items:center;font-size:34px;font-style:normal;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}

/* Memo: solo or head-to-head — two glossy game tiles with the guides on them. */
.memo-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.memo-mode-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:118px;padding:12px 8px 14px;border-radius:22px;border:0;color:#fff;cursor:pointer;overflow:hidden;text-align:center;
  background:linear-gradient(160deg,#5b8cff,#2748c2);box-shadow:0 6px 0 #1a3a9c,0 12px 22px rgba(0,26,80,.28);transition:transform .15s,box-shadow .15s}
.memo-mode-btn.duel{background:linear-gradient(160deg,#a56bff,#5b2bc9);box-shadow:0 6px 0 #3e1c8f,0 12px 22px rgba(0,26,80,.28)}
.memo-mode-btn::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -20%,rgba(255,255,255,.45),transparent 55%);pointer-events:none}
.memo-mode-btn:active{transform:translateY(3px);box-shadow:0 3px 0 #1a3a9c,0 6px 12px rgba(0,26,80,.25)}
.memo-mode-btn b{position:relative;font-size:14px;font-weight:1000;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.memo-mode-btn small{position:relative;font-size:9.5px;font-weight:800;color:rgba(255,255,255,.85);line-height:1.15}
.memo-mode-faces{position:relative;display:flex;align-items:center;justify-content:center;height:50px;margin-bottom:4px}
.memo-mode-faces .mascot-face{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 22%;box-shadow:0 0 0 3px #fff,0 6px 12px rgba(0,20,70,.35);background:#fff}
.memo-mode-faces.two .mascot-face{width:42px;height:42px}
.memo-mode-faces.two .mascot-face+em+.mascot-face{margin-left:-4px}
.memo-mode-faces em{position:relative;z-index:1;margin:0 -6px;padding:2px 5px;border-radius:999px;background:linear-gradient(180deg,#ffe36b,#ffbd21);color:#1b2a6b;font-style:normal;font-size:9px;font-weight:1000;box-shadow:0 2px 5px rgba(0,20,70,.35)}
.memo-mode-btn:not(.active){filter:saturate(.6) brightness(.82)}
/* The chosen tile is marked from the inside (a gold-and-white ring drawn
   inside the tile, a gold check, a gold base), so nothing can be clipped by
   the scroll area around it. */
.memo-mode-btn.active::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 3px #ffc531,inset 0 0 0 5px rgba(255,255,255,.85),inset 0 -8px 0 #ffc531}
.memo-mode-btn.active{box-shadow:0 6px 0 #d98b12,0 12px 22px rgba(0,26,80,.28)}
.memo-mode-btn.duel.active{box-shadow:0 6px 0 #d98b12,0 12px 22px rgba(0,26,80,.28)}
.memo-mode-btn.active .memo-mode-faces .mascot-face{box-shadow:0 0 0 3px #ffc531,0 6px 12px rgba(0,20,70,.35)}
.memo-mode-check{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#ffe36b,#ffbd21);color:#1b2a6b;box-shadow:0 2px 6px rgba(0,20,70,.35)}
.memo-mode-check .ki{width:14px;height:14px}
.memo-duel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 6px}
.memo-player{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 11px;border-radius:14px;background:rgba(6,22,70,.45);color:#dbe8ff;border:1.5px solid rgba(255,255,255,.22);font-size:12px;font-weight:900;transition:transform .2s,background .2s}
.memo-player b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.memo-player em{font-style:normal;display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.18);font-size:14px}
.memo-player.active{background:linear-gradient(180deg,#ffe36b,#ffbd21);color:#1b2a6b;border-color:#fff;transform:scale(1.03);box-shadow:0 6px 16px rgba(255,190,40,.4)}
.memo-player.active em{background:rgba(255,255,255,.65);color:#1b2a6b}
.memo-duel.result{margin:6px 0 10px}
.memo-duel.result .memo-player{background:rgba(6,22,70,.08);color:#1b2a6b;border-color:#d3e6fa}
.memo-duel.result .memo-player em{background:#e6f0ff}
.memo-duel.result .memo-player.active{color:#1b2a6b}

/* ---- The guide as host (Milo or Luna): floating full-body poses with a speech
   bubble. Used by the onboarding steps (figure beside the bubble) and the Home
   tour (figure flies between elements, bubble above or below it). ---- */
.milo-host{display:flex;flex-direction:column;align-items:center;gap:8px;--milo-w:130px;--flip:1}
.milo-host.flip{--flip:-1}
.milo-body{width:var(--milo-w);animation:milo-float 3.4s ease-in-out infinite;will-change:transform}
/* Luna's cut-outs are slimmer than Milo's, so the same box height needs a narrower figure. */
.milo-host.guide-luna .milo-body{width:calc(var(--milo-w) * .74)}
.milo-host.video-mode .milo-body{width:var(--milo-w)}
/* Swapping guides on the guide step: one slips down and out, the other pops up. */
.milo-host.enter{animation:guide-enter .46s cubic-bezier(.2,1.3,.4,1) both}
.milo-host.leave{position:absolute;left:0;top:0;pointer-events:none;animation:guide-leave .34s ease-in both}
@keyframes guide-enter{from{opacity:0;transform:translateY(26px) scale(.8)}to{opacity:1;transform:none}}
@keyframes guide-leave{to{opacity:0;transform:translateY(22px) scale(.82)}}
/* No filter on the cut-out: on iOS WebKit rasterises drop-shadow on a big
   transparent PNG as a grey rectangle around the image box — the "shadow box"
   that showed up around Milo in onboarding. The depth comes from a soft ellipse
   on the ground instead, which is also what a game does. */
.milo-figure{display:block;width:100%;height:auto}
.milo-char::after{content:"";position:absolute;z-index:-1;left:14%;right:14%;bottom:0;height:6.5%;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(0,20,66,.42),rgba(0,20,66,.16) 55%,rgba(0,20,66,0) 72%)}
.milo-host.video-mode .milo-char::after{display:none}
.milo-host.talking .milo-char{animation:milo-talk .42s ease-in-out infinite alternate}
@keyframes milo-float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}
@keyframes milo-talk{from{transform:scale(1) rotate(0)}to{transform:scale(1.035) rotate(1.6deg)}}
.milo-bubble{position:relative;text-wrap:pretty;max-width:min(78vw,340px);padding:12px 15px;border-radius:20px;color:#12265f;text-align:start;
  background:linear-gradient(180deg,#fff,#eef7ff);box-shadow:0 8px 0 rgba(94,163,214,.55),0 14px 26px rgba(0,26,80,.28);font-weight:900;font-size:clamp(14px,3.6vw,17px);line-height:1.3}
.milo-bubble.pop{animation:milo-pop .28s cubic-bezier(.2,1.4,.4,1)}
@keyframes milo-pop{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
.milo-bubble::after{content:'';position:absolute;width:16px;height:16px;background:#fff;transform:rotate(45deg);border-radius:3px}
.milo-host.bubble-top .milo-bubble::after{left:50%;bottom:-7px;margin-left:-8px}
.milo-host.bubble-bottom{flex-direction:column-reverse}
.milo-host.bubble-bottom .milo-bubble::after{left:50%;top:-7px;margin-left:-8px;background:#fff}
.milo-host.bubble-side{flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:10px}
.milo-host.bubble-side .milo-bubble::after{left:-7px;top:50%;margin-top:-8px}
.milo-host.bubble-side .milo-bubble{text-align:start}
.milo-bubble h1{margin:0 0 4px;font-size:clamp(19px,5.4vw,26px);line-height:1.05;letter-spacing:-.03em;text-shadow:none;color:#12265f}
.milo-bubble .onboarding-sub{margin:0;color:#4d6f9d;font-size:clamp(12px,3vw,14px);max-width:none}

/* Onboarding: the guide beside the question, choices below. */
.onboarding-stage{position:relative;width:100%;max-width:440px;display:flex;justify-content:center;margin:2px 0 6px}
.onboarding-stage .milo-host.milo-size-ob{--milo-w:clamp(118px,34vw,164px);width:100%}
.onboarding-stage .milo-host.milo-size-ob .milo-bubble{flex:1;min-width:0}
.onboarding-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;max-width:420px}
.onboarding-chip{min-width:72px;min-height:48px;padding:0 14px;border:2px solid rgba(255,255,255,.6);border-radius:999px;cursor:pointer;color:#12265f;font-weight:1000;font-size:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(233,246,255,.94));box-shadow:0 5px 0 rgba(94,163,214,.7),0 10px 18px rgba(0,26,80,.2)}
.onboarding-chip:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(94,163,214,.7)}
.onboarding-chip.selected{border-color:#ffd23f;background:linear-gradient(180deg,#ffe762,#ffb61b);box-shadow:0 5px 0 #d9860d,0 0 0 4px rgba(255,210,63,.3)}

/* Home tour: a dimmed sheet with a spotlight cut-out; the guide floats over it. */
.home.touring .home-ui{pointer-events:none}
.milo-tour{position:absolute;inset:0;z-index:40;overflow:hidden;cursor:pointer}
.milo-tour-spot{position:absolute;border-radius:24px;border:3px solid #ffd23f;box-shadow:0 0 0 9999px rgba(8,18,60,.6),0 0 0 6px rgba(255,210,63,.25),0 0 30px rgba(255,210,63,.55);
  transition:left .6s cubic-bezier(.2,.9,.3,1),top .6s cubic-bezier(.2,.9,.3,1),width .6s cubic-bezier(.2,.9,.3,1),height .6s cubic-bezier(.2,.9,.3,1)}
.milo-tour-spot[hidden]{display:block;opacity:0;box-shadow:0 0 0 9999px rgba(8,18,60,.6)}
.milo-tour .milo-host{position:absolute;left:0;top:0;display:block;transition:transform .78s cubic-bezier(.3,.85,.25,1);pointer-events:none}
/* In the tour the figure is laid out by height, so every pose stands on the same line. */
.milo-tour .milo-body{height:var(--milo-h,200px);width:auto;animation:none}
.milo-tour .milo-fig-wrap{display:block;position:relative;height:100%}
.milo-tour .milo-char{height:100%}
.milo-tour .milo-figure{height:100%;width:auto}
.milo-tour .milo-host.walking{transition-timing-function:linear}
.milo-tour .milo-host.walking .milo-body{animation:guide-walk .3s ease-in-out infinite}
@keyframes guide-walk{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.milo-tour .milo-host.hopping{transition-timing-function:cubic-bezier(.3,.7,.3,1)}
.milo-tour .milo-host.hopping .milo-body{animation:guide-hop .72s cubic-bezier(.3,0,.2,1) both}
@keyframes guide-hop{0%{transform:translateY(0)}20%{transform:translateY(6px)}55%{transform:translateY(-46px)}100%{transform:translateY(0)}}
/* A little hop on the spot while a line is spoken — smaller than the hop
   between stops, and only on the figure, so the speech bubble stays put. */
.milo-tour .milo-host.nudge .milo-body{animation:guide-nudge .62s cubic-bezier(.3,0,.2,1) both}
@keyframes guide-nudge{0%{transform:translateY(0)}25%{transform:translateY(3px)}60%{transform:translateY(-17px)}100%{transform:translateY(0)}}
.milo-tour .milo-bubble{position:absolute;left:var(--bx,0);width:var(--bw,260px);max-width:none;box-sizing:border-box}
.milo-tour .bubble-top .milo-bubble{bottom:calc(100% + 12px)}
.milo-tour .bubble-bottom .milo-bubble{top:calc(100% + 12px)}
.milo-tour .milo-bubble::after{left:var(--tx,50%);margin-left:0}
.milo-tour .milo-host.no-motion{transition:none}
.milo-tour .milo-host.milo-size-tour{--milo-w:140px}
/* A talking clip is a transparent video that takes the figure's place (same height, the still leaves the flow). */
.milo-clip{display:block;height:auto;width:auto;max-width:none;background:transparent}   /* no filter on a transparent video: WebKit rasterises that wrongly on iOS */
.milo-figure.behind-clip{display:none}
.milo-host.clip-playing .milo-mouth{display:none}
/* The mouth on the figure: placed per pose by milo.js, opened by --open. */
.milo-fig-wrap{position:relative;display:block}
.milo-char{position:relative;display:block;transform-origin:50% 90%;will-change:transform}
.milo-mouth{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,-50%);--open:0}
/* Luna's mouth is her own mouth opening, not a hole in her face: the upper lip
   stays where the artwork drew it and the jaw drops away from it, her top
   teeth stay in view, and the inside is mouth-coloured rather than black. At
   rest it is all but invisible, so her painted smile is what you see. */
.milo-mouth.mouth-jaw{width:calc(var(--mw) * (1 + var(--open) * .03));height:calc(var(--mh) * (0.3 + var(--open) * .85));transform:translate(-50%,calc(-50% + var(--open) * var(--mh) * .425));border-radius:48% 48% 46% 46% / 26% 26% 74% 74%;background:radial-gradient(ellipse at 50% 122%,#a8464f 0 30%,#6d1f27 66%,#40141a 100%);box-shadow:inset 0 1px 2px rgba(50,12,16,.55);opacity:calc(min(1,var(--open) * 3))}
/* the upper teeth, along the top lip */
.milo-mouth.mouth-jaw::after{content:'';position:absolute;left:6%;right:6%;top:0;height:calc(var(--mh) * .3);max-height:46%;background:linear-gradient(180deg,#fff 62%,#f2e6e6);border-radius:40% 40% 26% 26%;box-shadow:0 1px 1px rgba(60,16,20,.22);opacity:calc(.5 + var(--open) * .5)}
/* the lower lip, so the opening reads as a mouth and not as a hole */
.milo-mouth.mouth-jaw::before{content:'';position:absolute;left:3%;right:3%;bottom:-9%;height:30%;background:radial-gradient(ellipse at 50% 15%,rgba(230,132,138,.95),rgba(202,100,108,.7) 60%,rgba(202,100,108,0) 100%);border-radius:30% 30% 50% 50%;opacity:calc(var(--open) * .85)}
.milo-mouth.mouth-robot{--o:clamp(0,(var(--open) - .12) * 8,1);box-sizing:border-box;width:calc(var(--mw) * .92);height:calc(var(--mh) * (1.3 + var(--open) * 1.1));transform:translate(-50%,-50%);border-radius:50%;border:calc(var(--mw) * .14) solid rgba(98,220,255,var(--o));background:rgba(98,220,255,calc(var(--o) * .28));box-shadow:0 0 calc(var(--mw) * .22) rgba(70,190,255,calc(var(--o) * .9)),inset 0 0 calc(var(--mw) * .1) rgba(70,190,255,calc(var(--o) * .5))}
.milo-mouth.mouth-robot::after{content:'';position:absolute;left:0;right:0;top:12%;height:62%;border:0 solid #4fd0ff;border-bottom-width:calc(var(--mw) * .19);border-radius:0 0 50% 50% / 0 0 100% 100%;opacity:calc(1 - var(--o));filter:drop-shadow(0 0 4px rgba(80,200,255,1))}
.milo-mouth.mouth-glow{width:calc(var(--mw) * (0.9 + var(--open) * .3));height:calc(var(--mh) * (0.6 + var(--open) * 1.4));transform:translate(-50%,-30%);border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(20,60,140,.55) 0 30%,#bff4ff 44%,#5fd0ff 56%,rgba(46,166,255,.7) 66%,rgba(46,166,255,0) 78%);opacity:calc(var(--open) * 1.4)}
/* Milo's talk render is drawn with an open mouth: a dark cover with a small glowing smile closes it; it fades out as --open rises. */
.milo-host.flip .milo-fig-wrap{transform:scaleX(-1)}
.milo-tour-hint{position:absolute;left:0;right:0;bottom:calc(6px + var(--sab));display:flex;justify-content:center;align-items:center;gap:10px;font-size:11px;font-weight:900;color:rgba(255,255,255,.8);pointer-events:none}
.milo-tour-skip{pointer-events:auto;min-height:32px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font-weight:1000;font-size:12px;color:#17245e;background:linear-gradient(180deg,#ffe762,#ffb61b);box-shadow:0 3px 0 #d9860d}

/* ---- Statistics: glossy hero with a glowing ring and drifting sparks, 3D-look
   stat tiles, medals on the scoreboards and a big share button. ---- */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.stats-hero3d{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px 16px 16px 14px;border-radius:26px;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.28),transparent 32%),radial-gradient(circle at 15% 90%,rgba(133,96,255,.55),transparent 45%),linear-gradient(160deg,#2f7bf0,#3a4fd6 55%,#5a2fb8);
  box-shadow:0 10px 24px rgba(16,56,124,.26);border:2px solid rgba(255,255,255,.55)}
.stats-hero3d::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 45%);pointer-events:none}
.stats-hero-copy{position:relative;z-index:1}
.stats-hero-copy h2{margin:0 0 4px;font-size:18px;text-shadow:0 2px 8px rgba(0,20,70,.35)}
.stats-hero-copy p{margin:0;font-size:11px;font-weight:800;line-height:1.3;color:#e2f0ff}
.stats-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stats-fx i{position:absolute;left:calc(6% + var(--i)*9.4%);bottom:-8px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(255,255,255,.8);opacity:0;
  animation:stat-spark 4.2s linear infinite;animation-delay:calc(var(--i)*-.55s);transform:scale(calc(.5 + (var(--i) - 4)*(var(--i) - 4)*.02))}
@keyframes stat-spark{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:.9}100%{transform:translateY(-130px) translateX(12px) scale(1);opacity:0}}
.stat-orb{--p:0;position:relative;z-index:1;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;align-content:center;color:#fff;transition:--p 1.1s cubic-bezier(.2,.8,.2,1)}
.stat-orb-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ffe062 0,#ffb321 calc(var(--p)*1%),rgba(255,255,255,.18) 0);
  -webkit-mask:radial-gradient(circle closest-side,transparent 74%,#000 76%);mask:radial-gradient(circle closest-side,transparent 74%,#000 76%);filter:drop-shadow(0 0 8px rgba(255,214,80,.75))}
.stat-orb-glass{position:absolute;inset:11px;border-radius:50%;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.55),rgba(255,255,255,.08) 45%,rgba(20,40,120,.35));box-shadow:inset 0 -6px 14px rgba(0,20,80,.35),inset 0 4px 8px rgba(255,255,255,.35)}
.stat-orb b{position:relative;font-size:24px;letter-spacing:-.03em;text-shadow:0 2px 6px rgba(0,20,70,.45)}
.stat-orb small{position:relative;font-size:9px;font-weight:900;color:#ffe8a3}
.stat-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.stat-tile{position:relative;display:grid;justify-items:center;gap:2px;padding:12px 10px 11px;border-radius:22px;text-align:center;color:#10235f;overflow:hidden;
  background:linear-gradient(180deg,#fff,#eaf5ff);border:2px solid #fff;box-shadow:0 7px 0 #bcd9f3,0 12px 22px rgba(20,70,128,.14)}
.stat-tile::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -30%,rgba(255,255,255,.9),transparent 60%);pointer-events:none}
.stat-tile-icon{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:18px;font-size:28px;line-height:1;
  background:linear-gradient(160deg,#ffd76a,#ff9d2a);box-shadow:0 4px 0 #d9860d,0 8px 14px rgba(217,134,13,.35),inset 0 2px 0 rgba(255,255,255,.55);animation:stat-bob 3.2s ease-in-out infinite}
.stat-tile.coins .stat-tile-icon{animation-delay:-.8s}.stat-tile.streak .stat-tile-icon{background:linear-gradient(160deg,#ff8a5c,#e53c3c);box-shadow:0 4px 0 #a92727,0 8px 14px rgba(229,60,60,.35),inset 0 2px 0 rgba(255,255,255,.5);animation-delay:-1.6s}
.stat-tile.cards .stat-tile-icon{background:linear-gradient(160deg,#a56bff,#5b2bc9);box-shadow:0 4px 0 #3e1c8f,0 8px 14px rgba(91,43,201,.35),inset 0 2px 0 rgba(255,255,255,.5);animation-delay:-2.4s}
.stat-tile.xp .stat-tile-icon{background:linear-gradient(160deg,#5fb2ff,#2b58d6);box-shadow:0 4px 0 #1e3aa0,0 8px 14px rgba(43,88,214,.35),inset 0 2px 0 rgba(255,255,255,.5)}
@keyframes stat-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.stat-tile b{position:relative;font-size:22px;letter-spacing:-.02em}
.stat-tile small{position:relative;font-size:9.5px;font-weight:900;color:#5b7fa8}
.share-3d{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;margin-top:12px;padding:10px 14px 10px 10px;border:2px solid #fff;border-radius:22px;cursor:pointer;text-align:start;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,#ff9d2a,#ff5f7e 60%,#c84bd1);box-shadow:0 7px 0 #a22a6b,0 14px 24px rgba(200,75,209,.35)}
.share-3d::after{content:"";position:absolute;top:-40%;bottom:-40%;width:34%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:share-shine 3.6s ease-in-out infinite}
@keyframes share-shine{0%,60%{left:-40%}100%{left:130%}}
.share-3d:active{transform:translateY(4px);box-shadow:0 3px 0 #a22a6b,0 8px 16px rgba(200,75,209,.3)}
.share-3d-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;font-size:26px;background:rgba(255,255,255,.22);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 10px rgba(0,20,70,.25)}
.share-3d-copy b{display:block;font-size:16px;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.share-3d-copy small{display:block;font-size:10.5px;font-weight:800;color:rgba(255,255,255,.9)}
.share-3d-arrow{font-size:26px;font-weight:1000;opacity:.9}
.scoreboard.v2 article{position:relative;overflow:visible;border:2px solid #fff;box-shadow:0 6px 0 #c6dcf0,0 10px 18px rgba(20,70,128,.12);padding:12px 6px 9px}
.scoreboard.v2 article>span{font-size:30px;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,20,70,.25))}
.scoreboard.v2 article.gold{background:linear-gradient(180deg,#fff8d0,#ffe27a);box-shadow:0 6px 0 #dcae1c,0 10px 18px rgba(220,174,28,.3)}
.scoreboard.v2 article.silver{background:linear-gradient(180deg,#fbfdff,#dfe7f1);box-shadow:0 6px 0 #a9b6c5,0 10px 18px rgba(20,70,128,.14)}
.scoreboard.v2 article.bronze{background:linear-gradient(180deg,#fff0e2,#ffcfa6);box-shadow:0 6px 0 #d98b4a,0 10px 18px rgba(217,139,74,.3)}
.scoreboard.v2 .medal{position:absolute;top:-9px;right:-6px;font-size:22px;font-style:normal;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,20,70,.35));animation:stat-bob 3s ease-in-out infinite}
.scoreboard.v2 .level-dot{width:40px;height:40px;font-size:17px;background:radial-gradient(circle at 35% 25%,#8ab8ff,#2b48c4 70%);box-shadow:0 0 0 2px #fff,0 5px 0 #1e3aa0,0 8px 12px rgba(0,26,80,.3)}
.world-stat-list.v2 article{grid-template-columns:46px 1fr auto;border:2px solid #fff;box-shadow:0 5px 0 #c6dcf0,0 9px 16px rgba(20,70,128,.1);border-radius:20px}
.world-stat-list.v2 .world-stat-badge{font-size:30px;filter:drop-shadow(0 4px 6px rgba(0,20,70,.25))}
.world-stat-list.v2 em{font-style:normal;font-weight:1000;font-size:15px;color:#2b48c4;padding:6px 10px;border-radius:999px;background:#eaf3ff}
.world-stat-list.v2 .wide-track{display:block;margin-top:5px}

/* Talking clips: a rounded window replaces the still pose while a lip-synced line plays. */
.milo-host.video-mode .milo-figure{display:none}
.milo-video{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:24px;border:3px solid #fff;background:#1d2f88;
  box-shadow:0 10px 0 rgba(20,40,120,.45),0 16px 28px rgba(0,22,70,.4),0 0 0 3px rgba(255,255,255,.25)}
.milo-host.video-mode.talking .milo-video{box-shadow:0 10px 0 rgba(20,40,120,.45),0 16px 28px rgba(0,22,70,.4),0 0 0 4px #ffd23f,0 0 24px rgba(255,210,63,.55)}
/* Without a clip the portrait sits in the same window; its mouth opens with the
   voice (--open 0..1, set per frame from the loudness of the line) and the head
   nods gently while the line plays. */
.milo-still{position:relative;overflow:hidden;--open:0;--mx:.5;--my:.5;--mw:.2;--mh:.07}
.milo-still-face{display:block;width:100%;height:100%;object-fit:cover}
/* The dark opening: grows with --open, centred just under the upper lip. */
.milo-mouth-hole{position:absolute;left:calc(var(--mx) * 100%);top:calc(var(--my) * 100%);width:calc(var(--mw) * 100%);height:calc(var(--mh) * 100% * (0.3 + var(--open) * .85));transform:translate(-50%,calc(-50% + var(--open) * var(--mh) * 42.5%));border-radius:48% 48% 46% 46% / 26% 26% 74% 74%;background:radial-gradient(ellipse at 50% 122%,#a8464f 0 30%,#6d1f27 66%,#40141a 100%);opacity:calc(min(1,var(--open) * 3));pointer-events:none}
.milo-still.mouth-jaw .milo-mouth-hole::after{content:'';position:absolute;left:6%;right:6%;top:0;height:22%;background:linear-gradient(180deg,#fff 62%,#f2e6e6);border-radius:40% 40% 26% 26%;opacity:calc(.5 + var(--open) * .5)}
/* The chin: a soft-masked copy of the portrait around the mouth that drops with --open. */
.milo-still-chin{position:absolute;overflow:hidden;left:calc((var(--mx) - var(--mw) * 1.1) * 100%);top:calc(var(--my) * 100%);width:calc(var(--mw) * 2.2 * 100%);height:calc(var(--mh) * 3.4 * 100%);pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 40%,#000 46%,transparent 74%);mask-image:radial-gradient(ellipse 50% 50% at 50% 40%,#000 46%,transparent 74%);
  transform:translateY(calc(var(--open) * var(--mh) * 90%))}
.milo-still-chin img{position:absolute;display:block;width:calc(100% / (var(--mw) * 2.2));height:calc(100% / (var(--mh) * 3.4));left:calc(-1 * (var(--mx) - var(--mw) * 1.1) / (var(--mw) * 2.2) * 100%);top:calc(-1 * var(--my) / (var(--mh) * 3.4) * 100%);object-fit:cover}
/* A robot's mouth is a light: it glows wider instead of dropping a chin. */
.milo-still.mouth-glow .milo-still-chin,.milo-still.mouth-robot .milo-still-chin{display:none}
.milo-still.mouth-glow .milo-mouth-hole,.milo-still.mouth-robot .milo-mouth-hole{height:calc(var(--mh) * 100% * (0.6 + var(--open) * 2.2));width:calc(var(--mw) * 100% * (0.9 + var(--open) * .3));transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(20,60,140,.55) 0 30%,#bff4ff 44%,#5fd0ff 56%,rgba(46,166,255,.7) 66%,rgba(46,166,255,0) 78%);opacity:calc(var(--open) * 1.4);filter:blur(.3px)}
/* Pointing down: dezelfde wijzende houding, rechtop. De figuur hing eerst 38°
   voorover zodat de vinger naar beneden wees, maar een gids die scheef hangt
   ziet eruit alsof hij omvalt. De plek (boven het element) wijst al genoeg. */
.milo-host[data-pose="pointDown"] .milo-fig-wrap{transform:none}
.milo-host.video-mode.talking .milo-still{animation:milo-still-nod 1.6s ease-in-out infinite}
@keyframes milo-still-nod{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-1deg) translateY(-2px)}70%{transform:rotate(1.2deg) translateY(-1px)}}
.onboarding-stage .milo-host.video-mode{--milo-w:clamp(124px,36vw,168px)}

/* ==== Weetjes (fun facts) ==== */
.home-game.facts .home-game-art{object-position:center 30%}
@media(max-width:400px){.home-game.art b{font-size:14px;bottom:6px}.fact-chip{font-size:10.5px;padding:0 8px;min-height:28px}}
.facts-screen .panel-scroll{display:flex;flex-direction:column;gap:10px;overflow:hidden;padding-bottom:6px}
/* All seven chips stay in view (two small rows), nothing scrolls sideways. */
.fact-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 6px;padding:2px 2px 2px;flex:0 0 auto}
.fact-chip{flex:0 0 auto;min-height:30px;padding:0 10px;border:2px solid rgba(255,255,255,.9);border-radius:999px;cursor:pointer;color:#12265f;font-weight:1000;font-size:11px;white-space:nowrap;
  background:linear-gradient(180deg,#fff,#e9f5ff);box-shadow:0 4px 0 rgba(94,163,214,.55),0 8px 14px rgba(0,26,80,.14)}
.fact-chip:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(94,163,214,.55)}
.fact-chip.active{border-color:#ffd23f;background:linear-gradient(180deg,#ffe762,#ffb61b);box-shadow:0 4px 0 #d9860d,0 0 0 3px rgba(255,210,63,.3)}
.fact-stage{flex:1;min-height:0;display:grid}
/* A soft shadow only: the old solid 14 px offset read as a grey block behind the
   card and reached over the buttons below it. */
.fact-card{position:relative;overflow:hidden;border-radius:28px;border:3px solid #fff;background:#10306e;box-shadow:0 6px 14px rgba(0,26,80,.22);display:grid;min-height:0}
.fact-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(1.05)}
.fact-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,22,66,.08) 0%,rgba(2,20,62,.5) 42%,rgba(2,18,58,.92) 100%)}
.fact-body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;padding:14px 16px 18px;color:#fff;min-height:100%;text-align:center}
.fact-top{display:flex;justify-content:space-between;align-items:center;gap:8px;position:absolute;left:12px;right:12px;top:12px}
.fact-world{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);font-size:11px;font-weight:1000;backdrop-filter:blur(6px)}
.fact-new{padding:5px 10px;border-radius:999px;background:linear-gradient(180deg,#ffe762,#ffb61b);color:#17245e;font-size:11px;font-weight:1000;box-shadow:0 3px 0 #d9860d;animation:fact-new-pop .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes fact-new-pop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.fact-kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:1000;color:#ffe36b}
/* Gecentreerd en met volle regels. `text-wrap: balance` verdeelt de woorden
   over de regels in plaats van er één of twee op de laatste regel te laten
   staan; `pretty` is de terugval voor browsers die balance niet kennen. */
.fact-text{margin:0;max-width:34ch;font-size:clamp(16px,4.6vw,21px);line-height:1.3;font-weight:900;
  text-align:center;text-wrap:pretty;text-wrap:balance;text-shadow:0 2px 10px rgba(0,18,56,.6)}
.fact-actions{display:grid;grid-template-columns:1fr 54px;gap:8px;flex:0 0 auto;margin-top:8px;position:relative;z-index:1}
.fact-next{min-height:54px;border:0;border-radius:999px;padding:0 18px;font-size:clamp(15px,4vw,18px);cursor:pointer;background:linear-gradient(180deg,#ffe868,#ffbd21);color:#17235d;font-weight:1000;box-shadow:0 6px 0 #dc8c12,0 12px 22px rgba(0,26,80,.25)}
.fact-next:active{transform:translateY(3px);box-shadow:0 3px 0 #dc8c12}
.fact-listen{min-height:54px;border:0;border-radius:18px;cursor:pointer;background:linear-gradient(180deg,#4ba0ff,#1a64cd);color:#fff;display:grid;place-items:center;box-shadow:0 6px 0 #0f3f8f}
.fact-listen .ki{width:24px;height:24px}
.fact-listen:active{transform:translateY(3px);box-shadow:0 3px 0 #0f3f8f}
/* Result screen: a "did you know" strip under the stats. */
.result-fact{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;width:100%;margin:-6px 0 12px;padding:10px 12px;border:2px solid #fff;border-radius:20px;cursor:pointer;text-align:start;
  background:linear-gradient(180deg,#fff7dc,#ffedb8);box-shadow:0 5px 0 #f0c85a,0 9px 16px rgba(20,70,128,.1);color:#10205d}
.result-fact:active{transform:translateY(2px);box-shadow:0 3px 0 #f0c85a}
.result-fact-emoji{font-size:32px;line-height:1;text-align:center;filter:drop-shadow(0 3px 5px rgba(0,20,70,.25))}
.result-fact-copy small{display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:1000;color:#b0731a}
.result-fact-copy b{display:block;font-size:12.5px;line-height:1.3;font-weight:900}
.result-fact-copy em{display:block;margin-top:3px;font-style:normal;font-size:10.5px;font-weight:1000;color:#2b48c4}
@media(max-height:700px){.result-fact-copy b{font-size:11.5px;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.result-fact{margin:-8px 0 8px;padding:8px 10px}}

/* ==== The answer card (feedback after an answer) — one block, no layers. ==== */
.feedback-float{position:absolute;z-index:28;inset:0;display:grid;place-items:center;padding:6%;background:radial-gradient(circle at 50% 34%,rgba(70,150,255,.18),transparent 32%),rgba(4,25,75,.48);backdrop-filter:blur(8px)}
.feedback-card{position:relative;width:92%;max-height:92%;overflow:auto;scrollbar-width:none;border-radius:30px;padding:16px 16px 16px;text-align:start;background:linear-gradient(180deg,#fefeff,#edf8ff);border:3px solid #fff;box-shadow:0 28px 80px rgba(0,19,69,.5);color:#10205c;animation:feedbackPop .34s cubic-bezier(.18,.92,.25,1.18) both}
.feedback-card::-webkit-scrollbar{display:none}
.feedback-float.is-good .feedback-card{box-shadow:0 28px 80px rgba(0,19,69,.5),0 0 0 6px rgba(88,224,116,.25)}
.feedback-float.is-try .feedback-card{box-shadow:0 28px 80px rgba(0,19,69,.5),0 0 0 6px rgba(255,170,90,.3)}
.feedback-close{position:absolute;right:10px;top:10px;z-index:3;width:36px;height:36px;border:0;border-radius:50%;background:#eef4fb;color:#4c6f9d;font-size:22px;font-weight:1000;cursor:pointer;line-height:1}
.feedback-verdict{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-right:44px}
.feedback-kicker{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;font-size:12px;letter-spacing:.06em;font-weight:1000;background:#e9f3ff;color:#2f5fa3}
.is-good .feedback-kicker{background:linear-gradient(180deg,#d9ffe0,#b8f3c5);color:#0f5a2a}
.is-try .feedback-kicker{background:linear-gradient(180deg,#ffe9c6,#ffd39a);color:#6a3d05}
.is-time .feedback-kicker{background:linear-gradient(180deg,#efeaff,#d9cfff);color:#3b2a8a}
.feedback-reward{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;background:#fff2ad;color:#815b0b;font-size:11px;font-weight:1000}
.feedback-reward .ki{width:14px;height:14px}
/* De hele plaat, nooit een uitsnede: 16:9 zoals hij getekend is, hooguit 150 px hoog
   (dus hooguit 267 px breed, gecentreerd). Met max-height op de volle breedte werd
   een 16:9-foto platgesneden en viel bij sport het hoofd of de bal eraf. */
.feedback-art{display:block;width:min(100%,267px);margin:10px auto 0;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:2px solid #fff;box-shadow:0 6px 14px rgba(20,80,145,.16);background:#d4efff}.feedback-art img{width:100%;height:100%;object-fit:cover;display:block}
.feedback-answer{margin:10px 0 0;padding:12px 14px;border-radius:18px;background:#eef6ff;border:2px solid #cfe5ff;display:grid;gap:2px}
.feedback-answer small{font-size:10px;font-weight:1000;letter-spacing:.06em;text-transform:uppercase;color:#4f78ad}
.feedback-answer b{font-size:clamp(20px,5.6vw,27px);color:#10205c;line-height:1.12;letter-spacing:-.02em}
.is-good .feedback-answer{background:#eaffef;border-color:#a8ecb7}
.is-good .feedback-answer b{color:#0f5a2a}
.feedback-explain{margin:12px 2px 0;color:#2f4f7d;font-size:clamp(14px,3.6vw,18px);line-height:1.38;font-weight:850}
.feedback-fact{display:grid;gap:3px;margin:12px 0 0;padding:11px 13px;border-radius:17px;background:linear-gradient(180deg,#fff8dd,#ffefbd);border:2px solid #ffe9a8;color:#4a3a10}
.feedback-fact b{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#9a6a12}
.feedback-fact span{font-size:clamp(12.5px,3.2vw,15px);font-weight:850;line-height:1.35}
.feedback-next{position:relative;overflow:hidden;margin:14px 0 0;width:100%;min-height:52px;border:2px solid rgba(23,35,93,.22);border-radius:999px;background:transparent;color:#17235d;font-size:clamp(15px,4vw,18px);font-weight:1000;cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s,box-shadow .25s}
.feedback-next .feedback-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(255,227,107,.55),rgba(255,189,33,.75));z-index:0}
.feedback-next .feedback-next-label{position:relative;z-index:1}
.feedback-next .feedback-next-label span{font-size:20px;margin-left:4px}
.feedback-next:disabled{cursor:pointer}
.feedback-next:disabled .feedback-next-label{opacity:.65}
.feedback-next:not(:disabled){background:linear-gradient(180deg,#ffe868,#ffbc21);border-color:#ffe868;box-shadow:0 5px 0 #dc8c12}
.feedback-next:not(:disabled) .feedback-bar{opacity:0}
.feedback-next:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 #dc8c12}
.feedback-next.nudge{animation:feedback-nudge .32s ease}
@keyframes feedback-nudge{30%{transform:scale(.97)}70%{transform:scale(1.02)}}
/* The guide pops up from behind the top edge of the card on a correct answer, cheers, and ducks away. */
.feedback-float .feedback-card{z-index:1}
.feedback-peek{position:absolute;z-index:0;height:auto;pointer-events:none;transform-origin:50% 100%;filter:drop-shadow(0 6px 8px rgba(0,20,70,.35));animation:feedback-peek 2.3s cubic-bezier(.3,1.25,.4,1) both;clip-path:inset(0 0 0 0)}
/* Alleen op en neer, niet kantelen: een gids die scheef blijft hangen ziet er
   niet uit. Het wippen geeft het leven, de draaiing gaf alleen scheefstand. */
@keyframes feedback-peek{0%{transform:translateY(105%) scale(.92);opacity:0}16%{transform:translateY(0) scale(1);opacity:1}30%{transform:translateY(-7px)}44%{transform:translateY(0)}58%{transform:translateY(-4px)}80%{transform:translateY(0);opacity:1}100%{transform:translateY(105%) scale(.95);opacity:0}}
@media(max-height:700px){.feedback-card{padding:13px 13px 13px}.feedback-explain{font-size:14px}.feedback-answer b{font-size:20px}}

/* ---------------- Premium ---------------- */
/* A small lock chip on tiles that need Premium; the tile itself stays readable and tappable (it opens the teaser). */
.premium-badge{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:linear-gradient(180deg,#ffe65c,#ffbc22);color:#17235e;font-size:10px;font-weight:1000;letter-spacing:.03em;box-shadow:0 3px 8px rgba(0,26,80,.25)}
.premium-badge svg{width:12px;height:12px}
.world-topic.locked .world-topic-art,.memo-pick.locked .home-game-art{filter:saturate(.6) brightness(.8)}
.world-mix.locked{filter:saturate(.75)}
.level-toggle button.premium-level{position:relative;opacity:.7}
.level-toggle button.premium-level::after{content:'★';position:absolute;top:-6px;right:-4px;font-size:10px;color:#f0a500}
.premium-teaser .simple-modal-card{padding-top:14px}
.premium-teaser-face{width:74px;height:74px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 8px 18px rgba(0,26,80,.25);margin:4px auto 2px;display:block}
.premium-teaser .simple-modal-card p{font-size:12.5px}
/* The paywall, in the game's panel language */
.premium-screen .panel-head h1{font-size:clamp(22px,6vw,30px);line-height:1.02}
.premium-screen .panel-head p{font-size:12px}
.premium-hero{display:flex;justify-content:center;gap:10px;margin:2px 0 8px}
.premium-hero img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 8px 18px rgba(0,26,80,.22)}
.premium-benefits{list-style:none;margin:0 0 10px;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid #d6eaf9}
.premium-benefits li{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:900;color:#1b3a7a}
.premium-benefits li svg{width:14px;height:14px;color:#2ec46c;flex:0 0 auto}
.premium-plans{display:grid;gap:10px;margin-bottom:8px}
.premium-plan{position:relative;display:grid;gap:2px;text-align:start;padding:14px 16px 12px;border-radius:22px;border:2px solid #cfe3f7;background:linear-gradient(180deg,#fff,#eef8ff);color:#10235f;cursor:pointer;box-shadow:0 6px 0 #b7d6ef,0 12px 22px rgba(0,34,93,.12);min-height:88px}
.premium-plan.recommended{border-color:#ffd23f;background:linear-gradient(180deg,#fff9e0,#ffefb5);box-shadow:0 6px 0 #dc8c12,0 14px 26px rgba(0,34,93,.16)}
.premium-plan:active{transform:translateY(3px)}
.premium-plan:disabled{opacity:.6}
.premium-plan b{font-size:15px}.premium-plan small{font-size:11px;font-weight:900;color:#4f74a8}
.premium-plan strong{font-size:22px;margin-top:4px}.premium-plan strong em{font-style:normal;font-size:12px;color:#4f74a8;font-weight:900}
.premium-best{position:absolute;top:-10px;right:14px;padding:4px 10px;border-radius:999px;background:linear-gradient(180deg,#7c64ff,#4e43d8);color:#fff;font-size:10px;font-weight:1000;letter-spacing:.05em;box-shadow:0 4px 10px rgba(67,52,163,.3)}
.premium-permonth,.premium-trial{font-size:11px;font-weight:900;color:#2b6b2f}
.premium-trial{color:#8a4b00}
.premium-cta{margin-top:8px;justify-self:start;padding:10px 16px;border-radius:999px;background:linear-gradient(180deg,#ffe65c,#ffbc22);color:#17235e;font-size:13px;font-weight:1000;box-shadow:0 4px 0 #dc8c12}
.premium-plan.monthly .premium-cta{background:linear-gradient(180deg,#edf5ff,#dbeeff);box-shadow:0 4px 0 #b7d6ef;color:#2e5f9c}
.premium-loading,.premium-status{padding:18px 12px;text-align:center;font-weight:900;color:#3566a8;border-radius:18px;background:rgba(255,255,255,.7)}
.premium-status p{margin:0 0 10px;color:#10235f;font-size:13px}
.premium-legal{margin:4px 2px 10px;font-size:10px;line-height:1.35;color:#52779e;font-weight:700}
.premium-links{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;padding-bottom:10px}
.premium-links button{border:0;background:transparent;color:#2763a6;font-weight:900;font-size:12px;text-decoration:underline;cursor:pointer;min-height:36px}
.premium-welcome{display:grid;place-items:center}
.premium-welcome-card{position:relative;z-index:2;width:92%;padding:26px 18px 22px;border-radius:30px;background:linear-gradient(180deg,#fff,#eef9ff);border:3px solid #fff;box-shadow:0 25px 70px rgba(0,22,70,.4);text-align:center;color:#10205d}
.premium-welcome-card h1{margin:8px 0 4px;font-size:clamp(24px,6.5vw,32px)}
.premium-welcome-card p{margin:0 0 14px;font-size:13px;font-weight:800;color:#52779e}
.premium-card.active{border-color:#ffd23f;background:linear-gradient(180deg,#fff9e0,#fff)}
.fact-premium{margin:6px auto 0;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:9px 14px;background:linear-gradient(180deg,#ffe65c,#ffbc22);color:#17235e;font-weight:1000;font-size:12px;cursor:pointer;box-shadow:0 4px 0 #dc8c12}
.fact-premium svg{width:14px;height:14px}

/* ==== Wat ben ik? ==== */
.home-games{grid-template-columns:1fr 1fr 1fr}
@media(max-width:430px){.home-games{grid-template-columns:1fr 1fr}.home-game.art{aspect-ratio:16/7}}
.whoami-card{gap:8px}
.whoami-guide{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start}
.whoami-guide .mascot-face{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 5px 12px rgba(0,26,80,.25)}
.whoami-bubble{position:relative;background:#fff;border:2px solid #d6eaf9;border-radius:18px;padding:10px 12px;min-height:64px;box-shadow:0 6px 14px rgba(20,70,128,.1)}
.whoami-bubble::before{content:'';position:absolute;left:-9px;top:18px;border:8px solid transparent;border-right-color:#fff;border-left:0}
.whoami-bubble p{margin:0 0 4px;font-size:clamp(13px,3.4vw,16px);line-height:1.25;font-weight:900;color:#10235f}
.whoami-bubble p.fresh{color:#1765d4}
.whoami-bubble p.whoami-ask{margin-top:6px;color:#7c64ff;font-weight:1000}
.whoami-points{align-self:center;padding:4px 12px;border-radius:999px;background:linear-gradient(180deg,#ffe65c,#ffbc22);color:#17235e;font-size:12px;font-weight:1000;box-shadow:0 3px 0 #dc8c12}
.whoami-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;min-height:0}
.whoami-tile{position:relative;overflow:hidden;border-radius:18px;border:2px solid #c8e5fa;background:#0d3a7a;padding:0;cursor:pointer;min-height:96px;box-shadow:0 5px 0 #a8d9f4,0 10px 16px rgba(22,84,149,.14);transition:transform .15s}
.whoami-tile:active{transform:translateY(3px)}
.whoami-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.whoami-tile b{position:absolute;left:6px;right:6px;bottom:7px;text-align:center;color:#fff;font-size:clamp(12px,3.2vw,15px);text-shadow:0 2px 8px rgba(0,18,56,.9);background:linear-gradient(180deg,rgba(2,22,66,0),rgba(2,20,62,.75));padding:14px 2px 0;border-radius:0 0 14px 14px}
.whoami-tile.correct{border-color:#55d36b;box-shadow:0 5px 0 #49b95a,0 0 20px rgba(69,217,94,.35)}
.whoami-tile.wrong{border-color:#ff9b59;filter:saturate(.6)}
.whoami-tile:disabled:not(.correct):not(.wrong){opacity:.55}
.whoami-actions{grid-template-columns:1fr 1fr!important;gap:10px!important}
.whoami-actions .action{width:100%;min-height:48px}
.whoami .quiz-v2-head{position:relative}
/* De klok van Wat ben ik? en Fotozoom hangt onder de kopregel. Die kopregel
   was geen positioned ancestor, dus `right:0; top:100%` rekende tegen het hele
   scherm: de klok stond buiten beeld, onder de onderrand. Je hoorde hem wel
   aftikken maar zag hem nooit. */
.quiz-v2-head{position:relative}
.whoami-timer{position:absolute;inset-inline-end:0;top:100%;margin-top:6px;z-index:3}
.whoami-card{margin-top:8px}
.whoami-verdict .simple-modal-card h2{font-size:clamp(18px,5vw,24px)}
.whoami-tile.spoken-active{transform:translateY(-4px) scale(1.03);border-color:#75a8ff;box-shadow:0 8px 0 #9fcdf3,0 16px 26px rgba(40,103,189,.25),0 0 0 4px rgba(91,137,255,.18)}
/* Game tile titles stay on one line; fitTitles shrinks a too-long one instead of wrapping it. */
.home-game.art b{white-space:nowrap}

/* ==== Jungle Runner ==== */
.home-game.jungle .home-game-art{object-position:center 30%}
/* The runner fills the whole game frame; it draws its own header, buttons and safe areas inside its shadow root. */
.jungle-screen{position:absolute;inset:0;background:#0f2450}
.jungle-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(7px) brightness(.55) saturate(1.1);transform:scale(1.08);transition:opacity .3s ease}
.jungle-mount{position:absolute;inset:0}
.jungle-mount kwizillo-jungle{display:block;width:100%;height:100%}
.jungle-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:#fff;font-weight:900;text-shadow:0 2px 6px rgba(0,18,56,.6)}
.jungle-loading .spinner{width:34px;height:34px;border-radius:50%;border:4px solid rgba(255,255,255,.35);border-top-color:#fff;animation:jungle-spin .8s linear infinite}
@keyframes jungle-spin{to{transform:rotate(360deg)}}

/* ==== Fotozoom ==== */
.fotozoom-card{gap:8px}
/* Het uitsnedevlak is vierkant: je kijkt door een loep, en een loep is rond of
   vierkant — niet een brede band. Vierkant blijft er bij het inzoomen ook meer
   van het onderwerp over om naar te raden. */
.fotozoom-stage{position:relative;flex:0 1 auto;aspect-ratio:1;width:auto;height:auto;max-height:52%;max-width:min(100%,52vh);margin-inline:auto;border-radius:22px;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 18px rgba(20,80,145,.17);background:#0b2f5c}
.fotozoom-stage img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform}
.fotozoom-lens{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:18px;box-shadow:0 3px 8px rgba(0,26,80,.25)}
.fotozoom-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
/* De vraag staat boven de foto, op de hoogte van de ronde klok: die krijgt zijn eigen plek. */
html:not([data-shape="wide"]) .quiz-v2-ui:has(.whoami-timer) .fotozoom-row{padding-inline-end:44px}
.fotozoom-row h1{text-align:start;font-size:clamp(17px,4.6vw,26px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fotozoom-points{background:linear-gradient(180deg,#ffe969,#ffbd23);color:#17235e;border-radius:999px;padding:5px 11px;font-size:clamp(11px,2.8vw,13px);font-weight:1000;white-space:nowrap;box-shadow:0 3px 0 #dc8c12}
.quiz-card .fotozoom-answers{flex:0 0 auto;grid-auto-rows:minmax(64px,100px);gap:8px}
.fotozoom-card .quiz-actions{margin-top:auto}
.quiz-card.fotozoom-card .answer{min-height:58px;padding:16px 8px 8px!important}
.fotozoom-verdict .simple-modal-card{padding-top:0;overflow:hidden}
.fotozoom-reveal{display:block;width:calc(100% + 40px);margin:-2px -20px 8px;aspect-ratio:16/8;object-fit:cover}

/* ---- parent zone: the privacy screen (what is stored, what leaves, what is never done) ---- */
.privacy-publisher{margin:4px 0 0;text-align:center;color:#6b87a4;font-size:10px;font-weight:800}
.privacy-updated{margin:2px 0 0;text-align:center;color:#6b87a4;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.privacy-screen .panel-scroll{display:grid;gap:10px;align-content:start}
.privacy-block{padding:13px 14px;border-radius:21px;background:#fff;border:1px solid #d6eaf9;box-shadow:0 8px 18px rgba(20,70,128,.08)}
.privacy-block header{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.privacy-block header span{width:34px;height:34px;flex:0 0 34px;border-radius:12px;display:grid;place-items:center;background:#edf6ff;font-size:18px}
.privacy-block h2{margin:0;color:#13235f;font-size:14px;letter-spacing:-.02em}
.privacy-block p{margin:0;color:#52779e;font-size:10px;font-weight:800;line-height:1.5}
.privacy-block ul{margin:9px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.privacy-block li{position:relative;padding:7px 10px 7px 26px;border-radius:13px;background:#f3f9ff;color:#2c548a;font-size:10px;font-weight:900;line-height:1.35;overflow-wrap:anywhere}
.privacy-block li::before{content:"•";position:absolute;left:11px;top:6px;color:#61a8ea;font-size:13px;font-weight:1000}

/* ---- the record book on the statistics screen ---- */
.record-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.record-board article{position:relative;display:grid;gap:1px;padding:10px 8px;border-radius:17px;background:#fff;border:1px solid #d6eaf9;box-shadow:0 6px 14px rgba(20,70,128,.08);text-align:center}
.record-board b{font-size:19px;color:#13235f;line-height:1}
.record-board small{color:#4d7099;font-size:9px;font-weight:900}
.record-board i{font-style:normal;color:#8aa5c0;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.record-board .all-time{grid-column:1/-1;background:linear-gradient(180deg,#fff7d8,#ffe9a8);border-color:#f2d383}
.record-board .all-time b{font-size:25px;color:#7a5406}

/* ---- Statistics, rebuilt: one hero, four chips, one record card, one row per
   world and one line per game. Everything else used to be a grid of its own. ---- */
/* The hero is the top of the page, not a wall: the same soft shadow as the
   cards under it, a little less height, and room underneath so the four chips
   are not pushed off the fold. */
.stats-hero3d{grid-template-columns:auto 1fr;gap:12px;padding:12px 14px;border-radius:24px;margin-bottom:12px;
  background:radial-gradient(circle at 88% 10%,rgba(255,255,255,.22),transparent 34%),linear-gradient(150deg,#3f8ef7,#4a62e2 58%,#6b43d6)}
.stats-hero3d .stat-orb{width:88px;height:88px}
.stats-hero3d .stat-orb b{font-size:21px}
.stats-hero3d::after{background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 42%)}
.stats-hero-who{position:relative;z-index:1;display:flex;align-items:center;gap:7px;margin-bottom:5px}
.stats-hero-who .mascot-face{width:26px;height:26px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.stats-hero-who b{font-size:12px;font-weight:1000;color:#fff;text-shadow:0 2px 6px rgba(0,20,70,.4)}
.stats-hero-copy h2{margin:0 0 6px;font-size:20px}
.stats-xp{position:relative;z-index:1;display:block;height:8px;margin-bottom:7px;border-radius:999px;background:rgba(6,20,60,.42);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,10,40,.4)}
.stats-xp i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffe368,#ffb01f);box-shadow:0 0 10px rgba(255,200,60,.7)}
.stat-tiles{grid-template-columns:repeat(4,1fr);gap:7px}
.stat-tiles .stat-tile{padding:9px 4px 8px;border-radius:17px;gap:1px}
.stat-tiles .stat-tile-icon{width:34px;height:34px;border-radius:12px;font-size:18px}
.stat-tiles .stat-tile b{font-size:15px}
.stat-tiles .stat-tile small{font-size:8px;line-height:1.1;text-align:center}

.stat-card{border-radius:24px;padding:12px;background:linear-gradient(180deg,#fff,#eef7ff);border:2px solid #fff;box-shadow:0 7px 0 #c6dcf0,0 13px 24px rgba(20,70,128,.14)}
.record-alltime{display:flex;align-items:center;gap:11px;padding:11px 12px;margin-bottom:10px;border-radius:19px;background:linear-gradient(160deg,#fff3c4,#ffd76a);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 5px 0 #e0ab1e}
.record-alltime>span{display:grid;place-items:center;width:38px;height:38px;color:#7a5406}
.record-alltime>span svg{width:30px;height:30px}
.record-alltime b{display:block;font-size:27px;line-height:1;color:#6d4a05;letter-spacing:-.02em}
.record-alltime small{display:block;margin-top:2px;font-size:9.5px;font-weight:900;color:#8a6410;text-transform:uppercase;letter-spacing:.04em}
.record-rows{display:grid;gap:7px}
.record-rows article{display:grid;grid-template-columns:1fr auto;grid-template-areas:'label value' 'track track';align-items:center;column-gap:10px;row-gap:5px;padding:8px 11px;border-radius:15px;background:#fff;border:1px solid #dbebfa}
.record-label{grid-area:label;font-size:11px;font-weight:1000;color:#23478f;line-height:1.15}
.record-track{grid-area:track;display:block;height:9px;border-radius:999px;background:#e4eefa;overflow:hidden;box-shadow:inset 0 1px 2px rgba(20,60,120,.14)}
.record-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#6fc4ff,#2e6ff0)}
.record-rows b{grid-area:value;font-size:18px;color:#12265f;text-align:end}
.record-rows em{display:block;font-style:normal;margin-top:2px;font-size:8.5px;font-weight:900;color:#8aa5c0;text-transform:uppercase;letter-spacing:.04em}
.record-note{margin:10px 2px 0;text-align:center;font-size:9.5px;font-weight:900;color:#5f80a4}

.world-stat-list.v3{gap:10px}
.world-stat-list.v3 article{position:relative;grid-template-columns:62px 1fr auto;gap:10px;padding:9px;border:2px solid #fff;border-radius:20px;box-shadow:0 6px 0 #c6dcf0,0 11px 20px rgba(20,70,128,.12);overflow:hidden}
.world-stat-art{width:62px;height:62px;border-radius:15px;object-fit:cover;box-shadow:0 3px 8px rgba(0,26,80,.28),inset 0 0 0 2px rgba(255,255,255,.7)}
.world-stat-copy{min-width:0}
.world-stat-copy b{display:block;font-size:12.5px;color:#12265f}
.world-stat-copy small{display:block;font-size:9px;font-weight:850;color:#4f7aab;margin-top:1px}
.world-stat-copy small.dim{color:#8aa5c0}
.world-stat-copy .wide-track{margin-top:5px}
.world-stat-best{display:grid;justify-items:center;align-content:center;gap:1px;min-width:46px}
.world-stat-best b{font-size:14px;color:#23478f}
.world-stat-best i{font-style:normal;font-size:17px;line-height:1}
.world-stat-list.v3 article.gold{background:linear-gradient(180deg,#fffdf1,#fff2c9)}
.world-stat-list.v3 article.silver{background:linear-gradient(180deg,#fff,#eef3f9)}
.world-stat-list.v3 article.bronze{background:linear-gradient(180deg,#fffaf5,#ffeddf)}

.game-stat-list{display:grid;gap:9px}
.game-stat{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:19px;background:#fff;border:2px solid #fff;box-shadow:0 6px 0 #c6dcf0,0 11px 20px rgba(20,70,128,.12)}
.game-stat-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;font-size:21px;background:linear-gradient(160deg,#e7f3ff,#c9e2fb);box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
.game-stat b{display:block;font-size:12.5px;color:#12265f}
.game-stat small{display:block;font-size:9.5px;font-weight:850;color:#6e8aa5;margin-top:1px}
.game-stat em{font-style:normal;font-size:13px;font-weight:1000;color:#2e6ff0;white-space:nowrap}
@media(max-width:360px){.stat-tiles .stat-tile small{font-size:7.5px}}

/* ---- the shop: coins from the games buy a golden card or a buddy ---- */
.shop-wallet{display:grid;grid-template-columns:34px auto 1fr;align-items:center;gap:8px;padding:10px 12px;border-radius:19px;background:linear-gradient(180deg,#fff7d8,#ffe9a8);border:1px solid #f2d383}
.shop-wallet span{display:grid;place-items:center;font-size:22px}
.shop-wallet b{font-size:21px;color:#7a5406}
.shop-wallet small{color:#8a6a1e;font-size:9px;font-weight:900;line-height:1.3}
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shop-item{display:grid;gap:6px;padding:9px;border-radius:21px;background:#fff;border:1px solid #d6eaf9;box-shadow:0 8px 18px rgba(20,70,128,.08)}
.shop-art{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:15px;background:#e7f3ff}
.shop-item.is-gold .shop-art{box-shadow:inset 0 0 0 3px #ffcf4a}
.shop-copy b{display:block;font-size:12px;color:#13235f;line-height:1.1}
.shop-copy small{display:block;margin-top:2px;color:#6b87a4;font-size:9px;font-weight:800;line-height:1.3}
.shop-buy{display:flex;align-items:center;justify-content:center;gap:5px;min-height:38px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe65c,#ffbc22);color:#17235e;font-size:12px;font-weight:1000;cursor:pointer;box-shadow:0 4px 0 #dc8c12}
.shop-buy.is-short{background:linear-gradient(180deg,#e9f3ff,#d8e9fb);color:#5b7ea6;box-shadow:0 4px 0 #bcd4ea}
.shop-short{display:block;text-align:center;color:#8aa5c0;font-size:9px;font-weight:900}
.shop-owned{display:grid;place-items:center;min-height:38px;border-radius:999px;background:#e8f8ec;color:#2f8a4c;font-size:11px;font-weight:1000}
.shop-item.is-owned{border-color:#bfe8cb}
.kcard.gold .kcard-frame{box-shadow:0 0 0 3px #ffcf4a,0 10px 24px rgba(122,84,6,.32)}
/* A painting that is already a card: shown edge to edge, no frame chrome. */
.kcard.is-art .kcard-frame{padding:0;justify-content:flex-end}
/* The world's name over the painted banner, for the languages the painting was
   not made in. Same gold, same place. */
.gold-band{position:absolute;z-index:3;left:8%;right:8%;top:66.6%;height:11%;display:grid;place-items:center;padding:0 6%;border-radius:999px/50%;
  background:linear-gradient(180deg,#fff1b8,#f3bc46 52%,#c8871a);box-shadow:inset 0 0 0 1.5px rgba(120,70,10,.5),0 2px 6px rgba(50,25,0,.45);
  color:#4a2a05;font-weight:1000;line-height:1;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.45);font-size:clamp(7px,2.6vw,13px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.kcard-zoom .gold-band{font-size:clamp(11px,4.2vw,20px)}
.gold-unlock-frame{position:relative;display:block;width:100%}
.gold-unlock-frame .gold-band{font-size:clamp(12px,4.4vw,21px)}
.kcard.is-art .kcard-bg{transform:none;filter:none;opacity:1}
.kcard.is-art .kcard-tint{display:none}
.kcard-own{position:relative;z-index:3;padding:14px 8px 6px;text-align:center;font-size:9.5px;font-weight:1000;letter-spacing:.04em;text-transform:uppercase;color:#ffeeb4;text-shadow:0 1px 3px rgba(0,0,0,.7);background:linear-gradient(180deg,rgba(6,16,46,0),rgba(6,16,46,.72))}
.kcard.gold .kcard-tint{background:linear-gradient(180deg,rgba(255,207,74,.34),rgba(120,72,0,.52))}
/* a card the runner handed out: its own painting in a cool frame */
.kcard.runner .kcard-frame{box-shadow:0 0 0 3px #7ee0ff,0 10px 24px rgba(10,74,110,.32)}
.kcard.runner .kcard-tint{background:linear-gradient(180deg,rgba(64,196,255,.28),rgba(8,42,84,.55))}
.kcard.runner .kcard-art img{object-fit:contain;background:none}

/* ---- every world carries its own level ---- */
.home-world-level{position:absolute;z-index:3;top:6px;inset-inline-end:6px;padding:3px 7px;border-radius:999px;background:linear-gradient(180deg,rgba(255,230,92,.96),rgba(255,188,34,.96));color:#17235e;font-size:9px;font-weight:1000;letter-spacing:-.01em;box-shadow:0 3px 8px rgba(0,26,83,.28);white-space:nowrap}
.setting-card.world-levels{grid-template-columns:48px 1fr auto}.setting-card.world-levels .world-level-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end;max-width:170px}
.world-level-row span{position:relative;display:grid;place-items:center}
.world-level-row .world-badge{width:24px;height:24px;border-radius:9px;object-fit:cover}
.world-level-row i{position:absolute;inset-inline-end:-4px;bottom:-3px;min-width:14px;height:14px;padding:0 3px;border-radius:999px;background:linear-gradient(180deg,#ffe65c,#ffbc22);color:#17235e;font-style:normal;font-size:9px;font-weight:1000;display:grid;place-items:center;box-shadow:0 2px 4px rgba(0,26,83,.25)}

/* ---- right to left (Arabic) ----
   The layout itself mirrors on its own: the grids, the flex rows and the
   logical paddings above all follow the document's direction. What is left is
   the handful of things that carry a direction inside them — an arrow that
   points back, and artwork that is anchored to one side. */
[dir="rtl"] .panel-back .ki,[dir="rtl"] .quiz-back .ki,[dir="rtl"] .world-round .ki,[dir="rtl"] .fact-back .ki{transform:scaleX(-1)}
[dir="rtl"] .share-3d-arrow{transform:scaleX(-1)}
/* Arabic has no capitals and its letters hang below the line, so the tight
   line-height that suits the Latin display font clips descenders. */
[dir="rtl"] .quiz-card h1,[dir="rtl"] .panel-head h1,[dir="rtl"] .world-title-wrap h1{line-height:1.25;letter-spacing:0}
[dir="rtl"] .home-world-copy b,[dir="rtl"] .home-game b,[dir="rtl"] .world-game b{letter-spacing:0;line-height:1.2}
[dir="rtl"] .quiz-card .answer{letter-spacing:0;line-height:1.3}

/* ---- Terugkeerscherm: "Hoi Jan, verder spelen?" (welcome-back.js) ----
   Dezelfde taal als het wereldscherm: de eigen wereldplaat erachter, donker
   gedimd, met de inhoud in één kolom erop. */
.welcome-back{position:absolute;inset:0;overflow:hidden;color:#fff;background:#0d2464}
.wb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(1.02) brightness(.44);transform:scale(1.04)}
.wb-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,22,66,.62),rgba(6,22,66,.44) 34%,rgba(4,18,58,.86))}
.wb-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:6% calc(7% + var(--sar)) calc(6% + var(--sab)) calc(7% + var(--sal));text-align:center}
.wb-logo{width:min(190px,46%);height:auto;margin-bottom:2px}
.welcome-back h1{margin:0;font-size:clamp(28px,7.4vw,46px);line-height:1;letter-spacing:-.04em;font-weight:1000;
  text-shadow:0 5px 16px rgba(0,26,80,.5)}
.wb-sub{margin:0;font-size:clamp(12px,3vw,16px);font-weight:800;color:#dcefff}
.wb-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:min(430px,100%)}
.wb-tile{display:grid;gap:1px;padding:10px 6px;border-radius:19px;background:rgba(9,42,110,.62);
  border:1px solid rgba(255,255,255,.26);box-shadow:0 8px 18px rgba(0,22,70,.3)}
.wb-tile-icon{font-size:20px;line-height:1}
.wb-tile b{font-size:clamp(17px,4.4vw,24px);font-weight:1000}
.wb-tile small{font-size:9px;font-weight:800;color:#bfdcff}
/* Waar je gebleven was: de wereld met zijn eigen plaat ernaast. */
.wb-where{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;width:min(430px,100%);
  padding:8px;border-radius:21px;background:rgba(9,42,110,.62);border:1px solid rgba(255,255,255,.26);text-align:start}
.wb-where img{width:62px;height:52px;border-radius:15px;object-fit:cover;border:2px solid rgba(255,255,255,.4)}
.wb-where span{display:grid;gap:1px}
.wb-where small{font-size:9px;font-weight:800;color:#bfdcff}
.wb-where b{font-size:clamp(14px,3.6vw,19px);font-weight:1000}
.wb-where i{font-style:normal;font-size:10px;font-weight:800;color:#ffd977}
.wb-go{width:min(430px,100%);border:0;border-radius:999px;padding:15px 18px;font-size:clamp(15px,3.8vw,20px);
  font-weight:1000;color:#17235e;cursor:pointer;background:linear-gradient(180deg,#ffe969,#ffbd23);box-shadow:0 6px 0 #dc8c12,0 14px 26px rgba(0,26,80,.32)}
.wb-other{width:min(430px,100%);border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:11px 16px;
  font-size:clamp(12px,3vw,15px);font-weight:900;color:#eaf6ff;cursor:pointer;background:rgba(9,42,110,.5)}
/* Wie speelt er? */
.wb-players{display:grid;gap:8px;width:min(430px,100%);max-height:46vh;overflow:auto;scrollbar-width:none}
.wb-players::-webkit-scrollbar{display:none}
.wb-player{display:grid;grid-template-columns:46px 1fr;gap:10px;align-items:center;text-align:start;cursor:pointer;
  padding:9px;border-radius:19px;background:rgba(9,42,110,.62);border:1px solid rgba(255,255,255,.26);color:#fff}
.wb-player-face{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:1000;
  background:linear-gradient(180deg,#5aa6ff,#2664c9);border:2px solid rgba(255,255,255,.42)}
.wb-player b{display:block;font-size:clamp(14px,3.6vw,18px);font-weight:1000}
.wb-player small{display:block;font-size:10px;font-weight:800;color:#bfdcff}

/* ---- De gids die achter een popup vandaan piept (celebrate.js, K.peekGuide) ----
   Bij een goed antwoord, niet elke keer en telkens uit een andere hoek. Hij
   staat áchter de kaart (z-index 0 tegen de kaart z-index 1), zodat hij nooit
   de tekst bedekt — maar wel ver genoeg ernaast dat je hem heel ziet. Praat de
   gids mee, dan is dit hetzelfde pratende portret als elders in de app: de mond
   gaat open op de luidheid van de stem die op dat moment de uitleg voorleest.
   Geen scheve stand: een gids die half gekanteld blijft hangen ziet er niet uit,
   dus de animatie schuift en schaalt alleen. */
.cheer-peek{position:absolute;z-index:0;width:min(34%,164px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:4px solid #fff;box-shadow:0 12px 26px rgba(0,22,70,.35);pointer-events:none;background:#1d2f88}
.cheer-peek .milo-still-face{display:block;width:100%;height:100%;object-fit:cover;object-position:center 26%}
.cheer-peek.peek-tl{top:-4%;inset-inline-start:-3%;animation:peekTL .55s cubic-bezier(.2,.9,.25,1.4) both}
.cheer-peek.peek-tr{top:-4%;inset-inline-end:-3%;animation:peekTR .55s cubic-bezier(.2,.9,.25,1.4) both}
.cheer-peek.peek-tc{top:-6%;inset-inline-start:calc(50% - min(17%,82px));animation:peekTC .55s cubic-bezier(.2,.9,.25,1.4) both}
/* Aan een popup (de ballon in Wat ben ik? en Fotozoom): de gids hing aan de
   donkere laag over het hele scherm en stond dus in de schermhoek, half buiten
   beeld. celebrate.js geeft hem de plek van de ballon zelf mee (--cl/--ct/--cw/
   --ch); hij staat erachter en komt in de bovenhoeken met bijna zijn hele hoofd
   boven de rand uit. */
.simple-modal>.simple-modal-card{position:relative;z-index:1}
.cheer-peek.peek-on-card{--s:min(calc(var(--cw) * .34),164px);width:var(--s);inset:auto;margin:0}
.cheer-peek.peek-on-card.peek-tl{left:calc(var(--cl) + var(--cw) * .04);top:calc(var(--ct) - var(--s) * .74)}
.cheer-peek.peek-on-card.peek-tc{left:calc(var(--cl) + (var(--cw) - var(--s)) / 2);top:calc(var(--ct) - var(--s) * .74)}
.cheer-peek.peek-on-card.peek-tr{left:calc(var(--cl) + var(--cw) * .96 - var(--s));top:calc(var(--ct) - var(--s) * .74)}
@keyframes peekTC{from{transform:translateY(55%) scale(.55);opacity:0}to{transform:none;opacity:1}}
@keyframes peekTL{from{transform:translate(30%,55%) scale(.55);opacity:0}to{transform:none;opacity:1}}
@keyframes peekTR{from{transform:translate(-30%,55%) scale(.55);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.cheer-peek{animation:none}}

/* ---- Aanraakvlakken ----
   Apple houdt 44 pt aan als kleinste knop waar een vinger nog goed op mikt, en
   CLAUDE.md volgt dat. Deze knoppen waren tussen de 28 en 38 pixels hoog: de
   munt- en vlamtellers op Home en in een spel, de wereldknopjes bij de weetjes,
   de stemrondjes en de niveaucijfers in de ouderzone, en de plus/min van de
   schoolgroep. Ze houden hun uiterlijk; alleen het raakvlak groeit. */
.hud-chip,.quiz-meta .meta-chip{min-height:44px}
.fact-chip{min-height:44px}
.profile-link{min-height:44px}
.quick-pill,.profile-voice .quick-pill{min-width:48px;min-height:48px}
.level-toggle button{min-width:42px;min-height:44px}
.stepper button{width:44px;height:44px}
.simple-close{width:44px;height:44px}
/* De schakelaar houdt zijn maat — een schakelaar hoort er zo uit te zien — maar
   krijgt een onzichtbaar raakvlak eromheen dat wél 44 pt haalt. */
.native-switch{position:relative}
.native-switch::before{content:"";position:absolute;inset:-8px -6px}
.lang-toggle button{min-width:44px}
/* De zes niveauknoppen stonden in de smalle rechterkolom van de kaart en werden
   daar tot 30 px platgeknepen. Ze krijgen nu een eigen regel over de volle
   breedte, net als de taalknoppen, zodat er zes van 44 pt naast elkaar passen. */
.setting-card.level-card{grid-template-columns:48px 1fr;row-gap:9px}
.setting-card.level-card .level-toggle{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.setting-card.level-card .level-toggle button{flex:1 0 44px;min-width:44px}
/* Lange telefoons (iPhone 12 en nieuwer: hoogte > 1,9 x breedte). De plaat bleef
   op 16:9 staan en alle extra hoogte ging naar de antwoordkaarten, die dan 160 tot
   180 pt hoog werden met één woord erin. Hier krijgt de plaat de ruimte (4:3,
   de plaat heel met onscherpe vulling) en blijven de kaarten compact. */
@media (max-aspect-ratio:10/19){
  :root:not([data-shape="wide"]) .quiz-card .quiz-art{aspect-ratio:4/3;max-height:42%}
  /* Hele plaat (contain) met de onscherpe kopie erachter als vulling: een foto
     die tot 4:3 werd bijgesneden verloor aan de zijkanten precies wat erop moest. */
  :root:not([data-shape="wide"]) .quiz-card .answers{grid-template-rows:repeat(2,minmax(82px,116px));align-content:center}
}

/* In the app the theme starts by itself; the hint only shows if that fails. */
.intro-sound.quiet{visibility:hidden}