:root{
  --bg1:#5ec8f8;--bg2:#8fe3c4;--ink:#1f2a44;--white:#ffffff;
  --y:#ffd23f;--o:#ff8c42;--r:#ff5d6c;--pk:#ff8fc7;--pu:#a06bff;--bl:#3fa9f5;--gr:#3ddc84;--tl:#2fd9c4;
  --card:#ffffff;--shadow:#1f2a4433;
  font-family:"Baloo 2","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;color:var(--ink);overflow-x:hidden;
  background:
    radial-gradient(circle at 10% 8%,#ffffff55 0 60px,transparent 62px),
    radial-gradient(circle at 88% 18%,#ffffff40 0 90px,transparent 92px),
    radial-gradient(circle at 20% 92%,#ffffff30 0 70px,transparent 72px),
    linear-gradient(160deg,var(--bg1),var(--bg2) 60%,#ffe98a);
  background-attachment:fixed;
}
button,select{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wrap{width:min(1080px,calc(100% - 20px));margin:auto}
.hidden{display:none!important}

/* ===== Sticky header ===== */
header.top{position:sticky;top:0;z-index:30;padding:10px 0}
.headerCard{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-radius:26px;background:linear-gradient(120deg,#ffffffee,#ffffffcc);border:4px solid #ffffff;box-shadow:0 10px 26px var(--shadow);backdrop-filter:blur(10px)}
.brandRow{display:flex;align-items:center;gap:10px}
.brandBtn{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0}
.brandLogo{width:52px;height:52px;display:grid;place-items:center;border-radius:18px;background:var(--y);border:4px solid var(--ink);box-shadow:4px 5px 0 var(--pk);font-size:26px;transform:rotate(-4deg)}
.brandName{font-size:26px;font-weight:800;letter-spacing:-1px;background:linear-gradient(90deg,var(--pu),var(--bl),var(--gr));-webkit-background-clip:text;background-clip:text;color:transparent}
.starPill{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:#fff7d6;border:3px solid var(--y);font-weight:800;font-size:16px;color:#8a6400}
.backBtn{width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:16px;background:#fff;box-shadow:0 5px 0 #00000018;font-size:20px;font-weight:900;color:var(--ink)}

/* ===== Sticky footer (back navigation arrow, bottom-left) ===== */
main{padding-bottom:96px}
.footerBar{position:fixed;z-index:35;left:0;bottom:16px;padding-left:16px}
.footerBackBtn{padding:10px 20px;border-radius:20px;border:4px solid var(--ink);background:var(--pu);color:#fff;font-size:18px;font-weight:800;box-shadow:0 6px 0 #6b3fd6}
.footerBackBtn:active{transform:translateY(5px);box-shadow:none}

/* ===== Age bar (below header: promo box left, age button right) ===== */
.ageBar{display:flex;align-items:center;gap:10px;margin-top:10px}
.ageBox{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.ageBtn{padding:10px 20px;border-radius:20px;border:4px solid var(--ink);background:var(--pu);color:#fff;font-size:18px;font-weight:800;box-shadow:0 6px 0 #6b3fd6}
.ageBtn:active{transform:translateY(4px);box-shadow:none}
.ageHint{font-size:11px;font-weight:800;color:var(--ink)cc;color:#3a4568}
.ageMenu{position:absolute;top:calc(100% + 8px);right:0;z-index:31;min-width:170px;padding:8px;border-radius:18px;background:#fff;border:3px solid var(--ink);box-shadow:0 10px 26px var(--shadow)}
.ageOption{display:block;width:100%;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:var(--ink);font-size:16px;font-weight:800;text-align:left}
.ageOption:hover,.ageOption.sel{background:#f0eaff;color:var(--pu)}

/* ===== Topic grid ===== */
main{padding:18px 0 60px}

/* ===== Promo box (cross-promo to KIDDOKIT+, styled like the age button) ===== */
.promoBox{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:20px;border:4px solid var(--ink);background:var(--pu);color:#fff;box-shadow:0 6px 0 #6b3fd6;text-decoration:none}
.promoBox:active{transform:translateY(4px);box-shadow:none}
.promoText{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(8px,1.8vw,13px);font-weight:800}
.promoMini{flex:0 0 auto;padding:5px 10px;border-radius:999px;background:#fff;color:var(--pu);font-size:clamp(8px,1.6vw,11px);font-weight:800;white-space:nowrap}
.pageTitle{margin:6px 0 16px;text-align:center}
.pageTitle h1{margin:0;font-size:clamp(26px,5vw,40px);color:var(--ink);letter-spacing:-1px}
.pageTitle p{margin:6px 0 0;font-size:14px;font-weight:700;color:#425}
.topicGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.topicCard{position:relative;overflow:hidden;padding:20px 14px;border-radius:26px;border:4px solid var(--ink);background:var(--tc,#fff);box-shadow:0 8px 0 var(--tcd,#0002);text-align:center;transition:transform .15s}
.topicCard:hover{transform:translateY(-4px) rotate(-1deg)}
.topicCard:active{transform:translateY(4px);box-shadow:none}
.topicEmoji{font-size:46px;display:block;margin-bottom:8px;filter:drop-shadow(2px 3px 0 #0002)}
.topicName{font-size:15px;font-weight:800;color:var(--ink);line-height:1.2}

/* ===== Topic detail (2 tiles) ===== */
.topicHead{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.topicHead .bigEmoji{font-size:52px}
.topicHead h1{margin:0;font-size:clamp(24px,5vw,34px)}
.tileRow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tile{padding:28px 18px;border-radius:28px;border:4px solid var(--ink);text-align:center;color:#fff;font-weight:800;box-shadow:0 10px 0 #0003}
.tile:active{transform:translateY(6px);box-shadow:none}
.tile.learn{background:linear-gradient(135deg,var(--bl),#2f8fe0)}
.tile.quiz{background:linear-gradient(135deg,var(--o),#ff5d6c)}
.tile .tEmoji{font-size:44px;display:block;margin-bottom:8px}
.tile .tName{font-size:19px}
.tile .tSub{display:block;margin-top:4px;font-size:11px;font-weight:700;opacity:.9}

/* ===== Flashcards (Pembelajaran) ===== */
.learnHint{margin:-10px 0 16px;color:#425;font-size:13px;font-weight:700}
.cardGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.flashcard{padding:18px 8px;border-radius:22px;border:4px solid var(--ink);background:#fff;box-shadow:0 7px 0 #0002;text-align:center}
.flashcard:active{transform:translateY(4px);box-shadow:none}
.flashcard .fEmoji{font-size:40px;display:block}
.flashcard .fLabel{display:block;margin-top:6px;font-size:14px;font-weight:800}

/* ===== Quiz runner ===== */
.quizWrap{max-width:640px;margin:auto}
.quizTop{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.levelTrack{flex:1;height:16px;border-radius:99px;background:#ffffffaa;border:2px solid var(--ink)}
.levelTrack i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gr),var(--tl))}
.levelLabel{font-weight:800;font-size:13px;white-space:nowrap}
.quizCard{padding:clamp(22px,5vw,34px);border-radius:28px;border:4px solid var(--ink);background:#fff;box-shadow:0 10px 0 #0002;text-align:center}
.quizQ{font-size:clamp(18px,4vw,24px);font-weight:800;margin:0 0 12px}
.quizVisual{font-size:clamp(48px,12vw,80px);margin:8px 0 18px;line-height:1.2}
.quizOptions{display:grid;gap:12px}
.quizOptions.n2{grid-template-columns:1fr 1fr}
.quizOptions.n3{grid-template-columns:repeat(3,1fr)}
.quizOptions.n4{grid-template-columns:1fr 1fr}
.opt{padding:16px 10px;border-radius:20px;border:4px solid var(--ink);background:#f4f4ff;font-size:clamp(20px,5vw,30px);font-weight:800}
.opt.optBig{font-size:clamp(56px,15vw,90px);padding:14px 8px}

/* ===== Apple math visuals (add/subtract/multiply/divide) ===== */
.appleCluster{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:220px;vertical-align:middle}
.mathRow{display:inline-flex;align-items:center;gap:10px}
.mathOp{font-size:0.6em;font-weight:900;color:var(--ink)}
.rottenApple{filter:grayscale(35%) brightness(40%) sepia(60%) saturate(3);display:inline-block}
.basketGrid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:280px}
.basketUnit{display:flex;flex-direction:column;align-items:center;width:60px}
.basketApples{display:flex;flex-wrap:wrap;justify-content:center;gap:0px;font-size:0.4em;max-width:60px;min-height:1.2em}
.basketIcon{font-size:0.5em;margin-top:-2px}
.divideRow{display:inline-flex;align-items:center;gap:10px}
.divGroup{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:120px}
.divLine{width:3px;align-self:stretch;min-height:40px;background:var(--ink);border-radius:2px}
.opt:active{transform:translateY(4px)}
.opt.ok{background:#d7ffe4;border-color:var(--gr)}
.opt.no{background:#ffd9dc;border-color:var(--r)}

/* ===== Completion screen ===== */
.doneCard{max-width:520px;margin:40px auto;padding:36px 24px;border-radius:32px;border:4px solid var(--ink);background:linear-gradient(160deg,#fff9db,#ffe6f2);box-shadow:0 14px 0 #0002;text-align:center}
.doneCard .star{font-size:70px;animation:pop .5s ease}
.doneCard h2{margin:14px 0 4px;font-size:28px}
.doneCard p{margin:0;color:#425;font-weight:700}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

.bigBtn{display:inline-block;margin-top:20px;padding:14px 28px;border-radius:20px;border:4px solid var(--ink);background:var(--pu);color:#fff;font-size:17px;font-weight:800;box-shadow:0 7px 0 #6b3fd6}
.bigBtn:active{transform:translateY(5px);box-shadow:none}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;padding:12px 20px;border-radius:99px;border:3px solid var(--ink);background:var(--gr);color:#053;font-weight:800;box-shadow:0 8px 20px #0003}

@media(max-width:640px){.topicGrid{grid-template-columns:repeat(2,1fr)}.cardGrid{grid-template-columns:repeat(2,1fr)}.tileRow{grid-template-columns:1fr}}
@media(max-width:460px){.ageBar{flex-wrap:wrap;justify-content:flex-end}.promoBox{flex:1 1 100%}.promoText{font-size:clamp(11px,3.2vw,14px);white-space:normal;text-overflow:clip}}