:root{
  --sky:#4fc3f7; --sky-d:#0288d1;
  --sun:#ffd54f; --sun-d:#ff8f00;
  --grass:#81c784; --grass-d:#388e3c;
  --coral:#ff8a80; --coral-d:#e64a19;
  --grape:#b39ddb; --grape-d:#5e35b1;
  --ink:#37474f; --paper:#fffdf7;
  --card:#ffffff; --shadow:0 6px 0 rgba(0,0,0,.08);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:"Fredoka","Segoe UI Rounded","Comic Sans MS","Chalkboard SE",sans-serif;
  background:linear-gradient(180deg,#e1f5fe 0%,#fffde7 60%,#f1f8e9 100%);
  color:var(--ink); min-height:100vh;
}
header.hero{
  text-align:center; padding:28px 16px 20px;
  background:linear-gradient(135deg,var(--sky) 0%,#81d4fa 60%,#b3e5fc 100%);
  border-bottom:6px solid #fff; position:relative; overflow:hidden;
}
header.hero::after{content:"☁️ ☁️"; position:absolute; top:8px; left:0; right:0; font-size:28px; opacity:.7; animation:drift 18s linear infinite;}
@keyframes drift{from{transform:translateX(-30%);}to{transform:translateX(30%);}}
.hero h1{font-size:clamp(28px,6vw,52px); margin:6px 0; color:#fff; text-shadow:2px 3px 0 var(--sky-d);}
.hero p{font-size:clamp(15px,3vw,20px); color:#01579b; margin:4px 0 10px; font-weight:bold;}
.badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px;}
.badge{background:#fff; border-radius:999px; padding:8px 16px; font-weight:bold; box-shadow:var(--shadow); font-size:15px;}
main{max-width:1100px; margin:0 auto; padding:20px 14px 60px;}
.section-title{font-size:clamp(20px,4vw,28px); margin:26px 4px 12px; color:var(--grape-d);}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
.ucard{
  background:var(--card); border-radius:22px; padding:16px 10px; text-align:center;
  box-shadow:var(--shadow); cursor:pointer; border:4px solid transparent;
  transition:transform .15s, border-color .15s; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:6px; position:relative;
}
.ucard:hover{transform:translateY(-4px) scale(1.03); border-color:var(--sun);}
.ucard .ico{font-size:42px;}
.ucard .num{position:absolute; top:8px; left:10px; background:var(--grape); color:#fff; font-size:12px; font-weight:bold; border-radius:999px; padding:2px 9px;}
.ucard .t{font-weight:bold; font-size:14px; line-height:1.25;}
.ucard .stars{font-size:14px; letter-spacing:2px;}
.ucard.done{border-color:var(--grass);}
/* Progress states: completed lessons dimmed with tick, in-progress highlighted */
.ucard.is-done{opacity:.55;}
.ucard.is-active{border-color:var(--sun-d); box-shadow:0 0 0 3px var(--sun), var(--shadow);}
.cflag{display:none; font-size:12px; font-weight:700; border-radius:999px; padding:3px 12px; margin-top:2px;}
.cflag.show{display:inline-block;}
.cflag.is-act-flag{background:#fff3e0; color:#e65100; border:2px solid var(--sun-d);}
.cflag.is-done-flag{background:#e8f5e9; color:#2e7d32; border:2px solid var(--grass-d);}
.alldone{background:#fff; border-radius:999px; padding:12px 22px; font-size:19px; font-weight:700;
  color:#2e7d32; box-shadow:var(--shadow); display:inline-block;}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; justify-content:center;}
.toolbar .btn{font-size:16px; padding:10px 18px;}
#continueBar{padding:0 12px;}
#continueBar .btn.contbtn{display:block; font-size:16px; padding:12px 16px; white-space:normal; line-height:1.4;}
#continueBar .alldone{font-size:16px; padding:10px 18px;}
.btn{
  border:none; cursor:pointer; font-family:inherit; font-weight:bold;
  border-radius:999px; padding:14px 26px; font-size:18px; color:#fff;
  background:linear-gradient(180deg,var(--sky),var(--sky-d)); box-shadow:0 5px 0 rgba(0,0,0,.15);
  transition:transform .1s;
}
.btn:active{transform:translateY(3px); box-shadow:none;}
.btn.sun{background:linear-gradient(180deg,#ffca28,var(--sun-d));}
.btn.grass{background:linear-gradient(180deg,#66bb6a,var(--grass-d));}
.btn.coral{background:linear-gradient(180deg,#ff8a65,var(--coral-d));}
.btn.grape{background:linear-gradient(180deg,#9575cd,var(--grape-d));}
.btn.ghost{background:#fff; color:var(--ink); box-shadow:var(--shadow);}
.btn.ghost.sel{background:linear-gradient(180deg,#ffca28,var(--sun-d)); color:#fff; box-shadow:0 0 0 3px var(--sun-d);}
.lesson{background:var(--card); border-radius:26px; padding:22px 16px; margin:16px 0; box-shadow:var(--shadow); border:4px solid #fff;}
.lesson h2{margin:0 0 6px; font-size:clamp(20px,4.5vw,30px); color:var(--sky-d);}
.lesson .sub{color:#78909c; font-size:15px; margin-bottom:14px;}
.fcards{display:flex; gap:12px; overflow-x:auto; padding:10px 4px 16px; scroll-snap-type:x mandatory;}
.fcard{
  flex:0 0 170px; scroll-snap-align:center; background:linear-gradient(180deg,#fff,#fff8e1);
  border:4px solid var(--sun); border-radius:20px; padding:14px 8px; text-align:center; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .15s;
}
.fcard:active{transform:scale(.95);}
.fcard .e{font-size:56px;}
.fcard .w{font-size:24px; font-weight:bold; margin-top:6px; color:var(--ink);}
.fcard .h{font-size:13px; color:#78909c;}
.fcard.flipped{background:linear-gradient(180deg,#e8f5e9,#c8e6c9); border-color:var(--grass);}
.qbox{background:#f3e5f5; border-radius:20px; padding:18px; margin:12px 0; border:3px dashed var(--grape);}
.qbox .q{font-size:22px; font-weight:bold; margin-bottom:12px;}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media(max-width:520px){.opts{grid-template-columns:1fr;}}
.opt{
  background:#fff; border:3px solid var(--sky); border-radius:16px; padding:14px; font-size:20px;
  font-weight:bold; cursor:pointer; font-family:inherit; transition:transform .1s; color:var(--ink);
}
.opt .e{font-size:30px; display:block;}
.opt:active{transform:scale(.96);}
.opt.right{background:#c8e6c9; border-color:var(--grass-d);}
.opt.wrong{background:#ffcdd2; border-color:#c62828;}
.opt:disabled{opacity:.85; cursor:default;}
.progress{height:14px; background:#eceff1; border-radius:999px; overflow:hidden; margin:10px 0;}
.progress>div{height:100%; width:0; background:linear-gradient(90deg,var(--sun),var(--sun-d)); border-radius:999px; transition:width .4s;}
.score{font-size:20px; font-weight:bold; color:var(--sun-d); text-align:center; margin:10px 0;}
.bigemoji{font-size:80px; text-align:center; margin:6px 0;}
.letters{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:14px 0; min-height:64px;}
.ltile{
  width:58px; height:58px; border-radius:14px; background:#fff; border:3px solid var(--sky);
  font-size:30px; font-weight:bold; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-family:inherit; color:var(--ink); box-shadow:var(--shadow);
}
.ltile.used{opacity:.25; pointer-events:none;}
.slots{display:flex; gap:8px; justify-content:center; margin:14px 0; min-height:64px;}
.slot{width:58px; height:58px; border-radius:14px; border:3px dashed #b0bec5; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:bold; background:#fafafa;}
.matchgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
@media(max-width:520px){.matchgrid{grid-template-columns:repeat(3,1fr);}}
.mcard{
  aspect-ratio:1; border-radius:16px; background:linear-gradient(135deg,var(--grape),var(--grape-d));
  color:#fff; font-size:26px; font-weight:bold; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-family:inherit; border:none; box-shadow:var(--shadow); padding:6px; text-align:center;
}
.mcard .e{font-size:34px;}
.mcard.open{background:#fff; color:var(--ink); border:3px solid var(--grape);}
.mcard.matched{background:#c8e6c9; border:3px solid var(--grass-d); pointer-events:none;}
.buckets{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0;}
.bucket{background:#e3f2fd; border:3px solid var(--sky); border-radius:18px; padding:12px; min-height:150px; text-align:center;}
.bucket h3{margin:4px 0 10px; color:var(--sky-d);}
.bucket.alt{background:#fce4ec; border-color:var(--coral);}
.bucket.alt h3{color:var(--coral-d);}
.chip{background:#fff; border-radius:999px; padding:10px 16px; margin:6px; font-size:18px; font-weight:bold; cursor:pointer; border:3px solid var(--sun); font-family:inherit; display:inline-block; color:var(--ink);}
.chip:active{transform:scale(.95);}
.speakbtn{background:var(--sun); border:none; border-radius:50%; width:64px; height:64px; font-size:30px; cursor:pointer; box-shadow:var(--shadow); margin:4px;}
.speakbtn:active{transform:scale(.92);}
.center{text-align:center;}
.hidden{display:none !important;}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:99;}
/* Missing-letter game */
.missword{font-size:52px; font-weight:bold; letter-spacing:6px; margin:10px 0; color:var(--ink);}
.missword .blank{display:inline-block; min-width:52px; border-bottom:6px solid var(--coral-d); color:var(--coral-d); text-align:center; margin:0 4px;}
.missword .blank.filled{color:var(--grass-d); border-color:var(--grass-d);}
.opt.big{font-size:34px; padding:20px;}

/* Urdu text: bigger, clear, always readable for little kids */
.urdu{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",serif; line-height:2.1;}
.sub.urdu{font-size:19px; color:#5e35b1; margin-top:4px;}
.q.urdu{font-size:22px; color:#5e35b1;}
.opt .ur{display:block; font-size:17px; color:#5e35b1; margin-top:4px;}
.fcard .ur{font-size:18px; color:#5e35b1; margin-top:2px;}
.chip .ur{font-size:16px; color:#5e35b1;}
.bucket .urdu{font-size:17px; color:#5e35b1;}
.kbd-hint .urdu{font-size:16px;}
.score .urdu{font-size:22px; color:#5e35b1;}

/* Bigger, chunkier UI for 4-5 year olds */
.fcard{flex:0 0 200px;}
.fcard .e{font-size:72px;}
.fcard .w{font-size:30px;}
.opt{font-size:24px; padding:18px;}
.opt .e{font-size:40px;}
.qbox .q{font-size:26px;}
.speakbtn{width:84px; height:84px; font-size:40px;}
.ltile,.slot{width:68px; height:68px; font-size:36px;}
.bigemoji{font-size:100px;}
.btn{font-size:20px; padding:16px 30px;}
.mcard{font-size:30px;}
.mcard .e{font-size:42px;}

/* Book page: vertical portrait image, just like the real book */
img.bookpage{display:block; width:auto; max-width:100%; max-height:72vh; height:auto; margin:14px auto;
  border-radius:14px; border:5px solid #fff; box-shadow:var(--shadow); outline:3px solid var(--sky); background:#fff;}
img.bookpage.small{max-height:52vh;}
.writebtn{margin:6px 0 2px;}
/* English praise lines in games */
.praise{color:#2e7d32; font-weight:600;}
.bigpraise{font-size:22px; margin:6px 0 10px;}
.tagline{font-size:clamp(16px,3.4vw,22px);}
/* ---- Writable book page overlay ---- */
.write-overlay{position:fixed; inset:0; z-index:200; background:#263238; display:flex; flex-direction:column;}
.wtools{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px 8px; background:#37474f;}
.wgroup{display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.08); border-radius:12px; padding:4px 6px;}
.wbtn{border:none; border-radius:10px; min-width:42px; min-height:42px; font-size:19px; font-family:inherit;
  font-weight:600; background:#546e7a; color:#fff; cursor:pointer; padding:4px 10px;}
.wbtn:active{transform:scale(.93);}
.wbtn:disabled{opacity:.35;}
.wbtn.wdone{background:linear-gradient(180deg,#66bb6a,#388e3c); font-size:16px;}
.wbtn.sel{background:var(--sun-d); box-shadow:0 0 0 3px #fff;}
.wcolors{gap:6px;}
.swatch{width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,255,255,.5); cursor:pointer; padding:0;}
.swatch.sel{border-color:#fff; box-shadow:0 0 0 3px var(--sun);}
.wsize{display:flex; align-items:center; gap:4px; color:#fff; font-size:19px;}
.wsize input{width:90px; accent-color:var(--sun);}
.wfab{position:absolute; right:14px; bottom:14px; z-index:5; width:60px; height:60px; border-radius:50%;
  border:none; font-size:28px; background:linear-gradient(180deg,#66bb6a,#388e3c); color:#fff; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.45);}
.wfab:active{transform:scale(.92);}
.wbody{flex:1; overflow:auto; display:flex; justify-content:center; align-items:flex-start; padding:14px;
  -webkit-overflow-scrolling:touch;}
.wpage{position:relative; line-height:0; border-radius:10px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,.5);}
.wpage img{width:100%; height:auto; display:block; user-select:none; -webkit-user-select:none; pointer-events:none;}
.wpage canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair;}

/* Parent tip box */
.parent-tip{background:#fff8e1; border:3px dashed var(--sun-d); border-radius:16px; padding:12px 14px; margin:12px 0; font-size:15px;}
.parent-tip b{color:var(--sun-d);}

footer{text-align:center; padding:26px; color:#78909c; font-size:14px;}
.backlink{display:inline-block; margin:14px 0; text-decoration:none; font-weight:bold; color:var(--sky-d); font-size:17px;}
.kbd-hint{font-size:13px; color:#90a4ae; text-align:center; margin-top:8px;}