:root{
  --blue:#0B4FD8; --blue-2:#1E6BFF; --blue-deep:#06308F; --sky:#F2F6FF; --chip:#E3EAFB;
  --yellow:#FFC629; --yellow-deep:#D99A00; --ink:#0E1B3D; --muted:#4A5A86;
  --green:#22C55E; --green-bg:#E7FBEF; --red:#FF5A5F; --red-bg:#FFECEC;
  --teal:#085a5a; --teal-deep:#042a2e; --gold:#c4962a; --paper:#fbf9f3;
  --r:24px; --shadow:0 10px 28px rgba(6,48,143,.18);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:"Baloo 2",system-ui,sans-serif;color:var(--ink);background:var(--blue);min-height:100vh;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button{font:inherit;cursor:pointer;border:0;color:inherit}
a{color:inherit}
.ar{font-family:"Noto Naskh Arabic",serif;direction:rtl;unicode-bidi:isolate;font-weight:700;line-height:1.75}
.dots{background-image:radial-gradient(rgba(255,255,255,.2) 1.2px,transparent 1.4px);background-size:18px 18px}

/* shell */
#app{min-height:100vh;display:flex;flex-direction:column}
.screen{flex:1;width:100%;max-width:560px;margin:0 auto;padding:16px 16px 96px;color:#fff}
.screen.light{background:var(--sky);color:var(--ink);max-width:none}
.screen.light>.inner{max-width:560px;margin:0 auto}
.top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid var(--yellow);background:#fff;flex-shrink:0}
.hello{display:flex;flex-direction:column;flex:1;min-width:0}
.hello b{font-size:18px;line-height:1.1}
.hello span{font-size:13px;font-weight:600;opacity:.9}
.pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.35);font-weight:800}
.pill svg{fill:var(--yellow)}
.back{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;flex-shrink:0}
.light .back{background:var(--chip);color:var(--blue)}

.card{background:#fff;color:var(--ink);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.over{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.bar{height:12px;border-radius:999px;background:var(--chip);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--yellow);border-radius:999px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.on-blue .bar{background:rgba(255,255,255,.22)}
.btn{display:block;width:100%;text-align:center;text-decoration:none;background:var(--yellow);color:var(--ink);font-weight:800;font-size:18px;
  padding:13px 18px;border-radius:999px;box-shadow:0 5px 0 var(--yellow-deep);transition:transform .1s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--yellow-deep)}
.btn.blue{background:var(--blue-2);color:#fff;box-shadow:0 5px 0 var(--blue-deep)}
.btn.soft{background:var(--chip);color:var(--blue);box-shadow:none}
.btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:2px solid rgba(255,255,255,.35);box-shadow:none}
.row{display:flex;gap:10px}
.row>*{flex:1}

/* continue card */
.cont{display:flex;flex-direction:column;gap:10px}
.cont .head{display:flex;align-items:center;gap:12px}
.cont .head>div{flex:1;min-width:0}
.cont .ar{font-size:28px;color:var(--blue);text-align:right}
.cont h2{margin:0;font-size:18px;line-height:1.2}
.cont img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:4px solid var(--yellow)}
.meta{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--muted)}

/* map */
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:20px 4px 8px}
.sec h3{margin:0;font-size:18px}
.sec .ar{color:var(--yellow)}
.path{display:flex;flex-direction:column;gap:10px}
.node{display:flex;align-items:center;gap:12px;width:min(86%,420px);padding:10px 12px;border-radius:20px;background:#fff;color:var(--ink);text-align:left;text-decoration:none}
.node:nth-child(even){margin-left:auto}
.node .dot{width:44px;height:44px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:19px;background:var(--green);color:#fff}
.node .t{flex:1;min-width:0;display:flex;flex-direction:column}
.node .t .ar{font-size:17px;text-align:right;line-height:1.5}
.node .t small{font-size:13px;font-weight:700;opacity:.85}
.node .tag{font-size:13px;font-weight:800;color:var(--yellow-deep);white-space:nowrap}
.node.now{outline:4px solid var(--yellow)}
.node.now .dot{background:var(--blue-2)}
.node.now .tag{color:var(--blue-2)}
.node.open .dot{background:var(--blue-2)}
.node.soon{background:rgba(255,255,255,.12);border:2px dashed rgba(255,255,255,.45);color:#fff;cursor:default}
.node.soon .dot{background:rgba(255,255,255,.2)}
.node.soon .tag{color:#fff;opacity:.8}

/* worlds */
.world{display:flex;gap:12px;align-items:center;text-decoration:none;background:#fff;color:var(--ink);border-radius:22px;padding:12px 14px;box-shadow:var(--shadow);margin-bottom:12px}
.world .ic{width:56px;height:56px;flex-shrink:0;border-radius:18px;display:grid;place-items:center;font-size:22px;font-weight:800}
.world .t{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.world .t b{font-size:17px;line-height:1.15}
.world .t .ar{font-size:16px;color:var(--blue);text-align:left;line-height:1.5}
.world .t small{font-size:12px;font-weight:700;color:var(--muted)}

/* lesson header */
.lhead{background:var(--blue);color:#fff;padding:16px;border-radius:0 0 28px 28px;display:flex;flex-direction:column;gap:8px}
.lhead .ar{font-size:32px;text-align:right;line-height:1.5}
.lhead h1{margin:-6px 0 0;font-size:20px}
.steps{list-style:none;margin:0;padding:16px 0;display:flex;flex-direction:column;gap:10px}
.step{display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:10px 12px;color:var(--ink);text-decoration:none}
.step .dot{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:800;font-size:18px;background:#D3DDF5;color:var(--muted)}
.step .t{flex:1;display:flex;flex-direction:column;min-width:0}
.step .t b{font-size:17px;line-height:1.15}
.step .t small{font-size:13px;font-weight:600;opacity:.8}
.step.done .dot{background:var(--green);color:#fff}
.step.now{border:4px solid var(--yellow)}
.step.now .dot{background:var(--blue-2);color:#fff}
.step.later{background:#E8EEFB;color:var(--muted)}

/* activity screens */
.act{display:flex;flex-direction:column;gap:14px;min-height:calc(100vh - 32px)}
.act .bigcard{flex:1;background:#fff;border-radius:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;color:var(--ink)}
.badge{font-size:56px;font-weight:800;color:var(--blue-2);line-height:1}
.word-ar{font-size:58px;line-height:1.6}
.word-en{font-size:28px;font-weight:800;color:var(--blue)}
.say{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.say button{min-height:48px;padding:0 18px;border-radius:999px;font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;background:var(--blue-2);color:#fff}
.say button.soft{background:var(--chip);color:var(--blue)}
.koko-say{display:flex;align-items:center;gap:10px;background:#FFF7DB;color:var(--ink);border-radius:18px;padding:10px 12px}
.koko-say img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid var(--yellow)}
.koko-say span{font-weight:700;font-size:15px}
.koko-say.good{background:var(--green-bg)}.koko-say.bad{background:var(--red-bg)}

.playbig{width:112px;height:112px;border-radius:50%;border:6px solid var(--yellow);background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:0 8px 0 rgba(0,0,0,.15);margin:0 auto}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{min-height:112px;border-radius:22px;border:4px solid #fff;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px}
.light .opt{border-color:#DCE5FF;background:#F3F6FF}
.opt .ar{font-size:28px;line-height:1.6}
.opt small{font-size:15px;font-weight:700;color:var(--muted)}
.opt.right{background:var(--green-bg);border-color:var(--green)}
.opt.wrong{background:var(--red-bg);border-color:var(--red);animation:shake .35s}
.opt.picked{border-color:var(--blue-2);background:#E8F0FF}
.opt.gone{visibility:hidden}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.chat{flex:1;display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;border-radius:20px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;background:#fff;color:var(--ink);align-self:flex-start}
.msg.me{align-self:flex-end;background:var(--blue-2);color:#fff}
.msg small{font-size:12px;font-weight:800;opacity:.75}
.msg .ar{font-size:21px;text-align:right}
.msg .en{font-size:14px;font-weight:600;opacity:.85}
.msg button{align-self:flex-start;background:none;color:inherit;font-weight:800;font-size:13px;padding:2px 0;opacity:.85}
.tray{background:#fff;color:var(--ink);border-radius:26px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 -8px 24px rgba(6,48,143,.10)}
.choice{min-height:56px;border-radius:18px;border:3px solid #DCE5FF;background:#F3F6FF;display:flex;flex-direction:column;align-items:center;padding:6px 12px}
.choice .ar{font-size:20px;line-height:1.6}
.choice small{font-size:14px;font-weight:600;color:var(--muted)}
.choice.wrong{border-color:var(--red);background:var(--red-bg);animation:shake .35s}
.rec{display:flex;gap:10px;align-items:center}
.rec .btn{flex:1}

.orderbox{display:flex;flex-wrap:wrap;gap:8px;min-height:64px;padding:10px;border-radius:18px;background:rgba(255,255,255,.14);border:2px dashed rgba(255,255,255,.4)}
.light .orderbox{background:#fff;border-color:#C9D7FF}
.tile{border-radius:14px;padding:4px 12px;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;border:3px solid #DCE5FF;min-height:56px;justify-content:center}
.tile .ar{font-size:20px;line-height:1.5}
.tile small{font-size:12px;font-weight:700;color:var(--muted)}

.win{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.win img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:7px solid var(--yellow);background:#fff}
.win .ar{font-size:36px;line-height:1.5}
.stars{display:flex;gap:10px}
.stars svg{width:56px;height:56px;fill:rgba(255,255,255,.25)}
.stars svg.on{fill:var(--yellow);animation:pop .5s both}
.stars svg.on:nth-child(2){animation-delay:.2s}.stars svg.on:nth-child(3){animation-delay:.4s}
@keyframes pop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{display:inline-flex;flex-direction:column;align-items:center;background:#F3F6FF;border-radius:14px;padding:4px 12px;color:var(--ink);border:0}
.chip .ar{font-size:18px;line-height:1.5}
.chip small{font-size:12px;font-weight:700;color:var(--muted)}

video{width:100%;border-radius:18px;background:#000;display:block;aspect-ratio:16/9}

/* parents */
.parents{background:var(--paper);color:#14201f;min-height:100vh}
.parents .phead{background:var(--teal-deep);color:var(--paper);padding:16px;border-bottom:3px solid var(--gold)}
.parents .phead .in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.parents .phead h1{font-family:"Playfair Display",Georgia,serif;margin:0;font-size:24px}
.parents .phead img{width:80px;background:var(--paper);border-radius:10px;padding:4px 6px;margin-left:auto}
.parents .body{max-width:560px;margin:0 auto;padding:14px 16px 40px;display:flex;flex-direction:column;gap:12px}
.pcard{background:#fff;border:1px solid #e6ede9;border-radius:16px;padding:12px}
.pcard .k{font-size:12px;font-weight:800;letter-spacing:.06em;color:#9A7420;text-transform:uppercase}
.stat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat3 div{background:#fff;border:1px solid #e6ede9;border-radius:16px;padding:10px;text-align:center}
.stat3 b{display:block;font-size:24px;color:var(--teal);line-height:1.1}
.stat3 span{font-size:12px;font-weight:700;color:#46615c}
.try{background:#e6f4f3;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.tryline{background:#fff;border-radius:14px;padding:8px 12px;display:flex;align-items:center;gap:10px}
.tryline button{width:44px;height:44px;border-radius:50%;background:var(--teal);color:var(--paper);display:grid;place-items:center;flex-shrink:0}
.tbtn{display:block;text-align:center;text-decoration:none;background:var(--teal);color:var(--paper);font-weight:800;padding:13px;border-radius:12px}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:8px 8px calc(10px + env(safe-area-inset-bottom));background:var(--blue-deep);z-index:5}
.nav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;text-decoration:none;font-weight:700;font-size:12px;min-width:64px;min-height:44px}
.nav a.on{color:var(--yellow)}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
footer.brand{margin:28px auto 0;text-align:center;color:rgba(255,255,255,.8);font-size:13px}
footer.brand img{width:84px;background:var(--paper);border-radius:10px;padding:5px 7px;display:block;margin:0 auto 6px}

/* laptop */
@media (min-width:900px){
  .screen.home{max-width:1180px;display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
  .screen.home .side{position:sticky;top:16px}
  .nav{display:none}
  .screen{padding-bottom:40px}
  .side .world{margin-bottom:8px}
}
@media (max-width:899px){ .screen.home .side{display:none} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}