:root{
  --bg:#f1f4fa;--card:#fffdf6;--ink:#22313f;--board:#27346b;--line:#dbe3f3;--soft:#eef2fb;
  --ok:#27ae60;--bad:#e8505b;--mark:#e8505b;
  --fh:"Baloo 2","Noto Sans Sinhala","Iskoola Pota","Nirmala UI",system-ui,sans-serif;
  --fb:"Nunito","Noto Sans Sinhala","Iskoola Pota","Nirmala UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:600 clamp(17px,1.1rem + .6vw,22px)/1.55 var(--fb);padding-bottom:env(safe-area-inset-bottom,0px)}

/* ---------- Header ---------- */
header{position:relative;color:#fff;padding:10px 14px 30px;background:linear-gradient(180deg,#3f9a45,#1f5f2a);font-family:var(--fh);font-weight:700}
header::after{content:'🦋 🍃 🦜';position:absolute;right:14px;bottom:3px;font-size:20px;letter-spacing:6px;pointer-events:none;animation:flo 3s ease-in-out infinite}
.top{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.top small{display:block;opacity:.85;font-size:.7em}
#bar{height:8px;background:rgba(255,255,255,.2);border-radius:9px;overflow:hidden;margin-top:8px}
#bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#fff,#feca57);transition:width .4s}
main.container{max-width:820px;margin:0 auto;padding:14px}

/* ---------- Buttons ---------- */
button{font:800 1em var(--fb);cursor:pointer;border:2px solid #fff;border-radius:14px;padding:8px 14px;min-height:46px;margin:3px 2px;background:#3b4cc0;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.18);transition:transform .12s}
button:hover:not(:disabled){transform:translateY(-3px) scale(1.03)}
button:active{transform:scale(.93)!important}
button:disabled{opacity:.45;cursor:default}
button.alt{background:#fff;color:#2d2a5a;border-color:#3b4cc0}
header button{background:rgba(255,255,255,.15);color:#fff;border-color:#fff;padding:6px 12px;min-height:42px}

/* ---------- Card (notebook page) ---------- */
.card{
  display:block;background:var(--card);border:1px solid var(--line);border-left:4px double var(--mark);
  border-radius:20px;
  padding:clamp(14px,3.5vw,28px) clamp(14px,3.5vw,28px) clamp(14px,3.5vw,28px) clamp(20px,4.5vw,34px);
  box-shadow:0 2px 14px rgba(0,0,0,.12);animation:pop .3s;
  background-image:repeating-linear-gradient(transparent 0 31px,var(--line) 31px 32px);
}
h1,h2,h3{font-family:var(--fh);font-weight:800;line-height:1.3;margin:.3em 0;color:var(--ink)}

/* ---------- Lesson tiles ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.opt{display:block;width:100%;text-align:left;margin:8px 0;background:#fff;color:#2d2a5a;border:2px solid #3b4cc0;font-size:clamp(1.05rem,.95rem + .7vw,1.3rem);padding:14px 16px;line-height:1.35;border-radius:16px;white-space:normal}
.opt:disabled{opacity:1}
.unit{--c:hsl(var(--h) 65% 48%);color:#1f2a44!important;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.12);background:linear-gradient(var(--c) 0 10px,transparent 10px),hsl(var(--h) 70% 55%/.14);border-color:var(--c)}
.unit small{font-size:.78em;line-height:1.25;display:inline-block}
.unit .sub{display:block;font-size:.66em;font-weight:700;opacity:.8;margin-top:3px;line-height:1.25}
.progress{background:var(--soft);border:2px solid var(--ink);border-radius:20px;height:20px;overflow:hidden}
.progress div{height:100%;background:var(--board);transition:width .6s}

/* ---------- Animations ---------- */
@keyframes pop{from{transform:translateY(8px);opacity:0}}
@keyframes flo{50%{transform:translateY(-5px)}}
@keyframes bob2{50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes sway{50%{transform:rotate(6deg)}}
@keyframes rip{from{transform:scale(.3);opacity:1}to{transform:scale(2.4);opacity:0}}
@keyframes wv{to{background-position:200px 100%,-160px 100%,0 0}}
.rv{opacity:0;transform:translateY(26px) scale(.96);transition:opacity .55s,transform .55s}
.rv.in{opacity:1;transform:none}

/* ---------- Scenery (every colour comes from variables so the theme button changes the whole background) ---------- */
:root{
  --sky1:#bfe8c8;--sky2:#e6f6d6;--g1:#8fd08a;--g2:#4fa35a;--g3:#2f7a40;--g4:#1f5a2e;--h1:#3f9a45;--h2:#1f5f2a;
}
body{
  background-color:var(--g3);
  background-image:
    radial-gradient(circle at 88% 11%,#fffbd0 0 26px,rgba(255,245,170,.5) 27px 60px,transparent 62px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L12 18 L24 60Z M18 60 L34 8 L50 60Z M44 60 L56 24 L68 60Z M62 60 L80 4 L98 60Z M92 60 L104 26 L116 60Z M110 60 L128 10 L146 60Z M140 60 L152 22 L164 60Z M158 60 L176 6 L194 60Z M186 60 L196 28 L206 60Z' fill='%23000' fill-opacity='.25'/%3E%3C/svg%3E"),
    linear-gradient(180deg,var(--sky1) 0,var(--sky2) 32%,var(--g1) 32%,var(--g2) 62%,var(--g3) 62%,var(--g4) 100%);
  background-repeat:no-repeat,repeat-x,no-repeat;
  background-size:100% 100%,200px 60px,100% 100%;
  background-position:0 0,0 62%,0 0;
  background-attachment:fixed;
  transition:background-color .4s;
}
body::before{content:'🌲 🌳';position:fixed;left:8px;bottom:12px;font-size:56px;letter-spacing:6px;z-index:-1;pointer-events:none;transform-origin:50% 100%;animation:sway 4s ease-in-out infinite}
body::after{content:'🍄 🌿 🐿️';position:fixed;right:12px;bottom:10px;font-size:26px;letter-spacing:12px;z-index:-1;pointer-events:none}
header{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q12 2 25 20 Q37 4 50 20 Q62 2 75 20 Q87 4 100 20 Q112 2 125 20 Q137 4 150 20 Q162 2 175 20 Q187 4 200 20Z' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q20 0 40 20 Q60 2 80 20 Q100 0 120 20 Q140 2 160 20Z' fill='%23000' fill-opacity='.25'/%3E%3C/svg%3E"),
    linear-gradient(180deg,var(--h1),var(--h2));
  background-repeat:repeat-x,repeat-x,no-repeat;
  background-size:200px 20px,160px 20px,100% 100%;
  background-position:0 100%,0 100%,0 0;
  animation:wv 9s linear infinite;
}

/* ---------- Responsive / accessibility ---------- */
@media(max-width:575.98px){
  .top{justify-content:center!important;text-align:center}
  .top>span{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
  .card{border-radius:16px}
}
@media(min-width:992px){main.container{max-width:900px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* =====================================================
   Unit page extras (quiz, labs, arcade, abacus, strips)
   ===================================================== */
button.opt.ok,.opt.ok{background:#1faa59!important;color:#fff!important;border-color:#0d7a3c!important;box-shadow:0 0 0 3px rgba(31,170,89,.35)}
button.opt.no,.opt.no{background:#e03a46!important;color:#fff!important;border-color:#a8212c!important;box-shadow:0 0 0 3px rgba(224,58,70,.35)}
.note.ok{background:#d4f6df;border-color:#1faa59}
.note.no{background:#ffdfe2;border-color:#e03a46}
.opt.pr{background:#d6ccff!important}
.sel{outline:3px dashed var(--mark)}
.teacher{font-size:2.2em}
.grid.two{grid-template-columns:1fr 1fr}
.note{margin:10px 0;padding:10px;border:2px dashed #3b4cc0;border-radius:8px;background:#fff;color:#2d2a5a;font-size:1rem;font-weight:700}
.note b.m{color:var(--mark)}
.chip{display:inline-block;margin:3px;padding:3px 10px;border:2px solid #ff9f43;border-radius:20px;font-size:.85em;background:#fff;color:#2d2a5a}
.stage{position:relative;height:clamp(170px,40vw,260px);background:linear-gradient(#e0f4ff,#fff6c9);color:#22313f;border:2px solid var(--ink);border-radius:8px;overflow:hidden;margin:10px 0;display:flex;align-items:flex-end;justify-content:space-around}
.fun{background:linear-gradient(135deg,#ff6b9d,#ff9f43);border-color:#fff;color:#fff;font-weight:800;box-shadow:0 3px 0 rgba(0,0,0,.25)}
textarea,input.txt{width:100%;font:inherit;border-radius:8px;padding:10px;border:2px solid var(--ink);background:#fff;color:#2d2a5a}
.lnk{display:inline-block;padding:8px 14px;border:2px solid #3b4cc0;border-radius:14px;background:#fff;color:#27346b!important;text-decoration:none;font-weight:800;margin:3px 2px}

/* number strips (fill in the missing numbers) */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:4px;margin:6px 0 12px}
.cell{width:100%;text-align:center;border:2px solid #4aa3df;background:#fff;color:#22313f;border-radius:6px;font:800 1.1em var(--fb);padding:8px 2px;min-height:46px}
.cell.g{background:#cfe9fb;display:flex;align-items:center;justify-content:center}
input.cell.ok{background:#c8f5d8;border-color:var(--ok)}
input.cell.no{background:#ffd6d6;border-color:var(--bad)}

/* abacus buttons sit under the rods */
.abbtn{display:grid;grid-template-columns:repeat(3,1fr);width:200px;max-width:100%;margin:0 auto 8px;text-align:center}
.abbtn button{min-height:44px;min-width:44px}

/* place-value number cards */
.cards{display:inline-flex;flex-direction:column;align-items:flex-end;gap:6px;margin:8px 0}
.ncard{display:inline-block;padding:4px 18px 4px 12px;background:#fff;color:#22313f;border:3px solid #27346b;border-radius:6px 16px 16px 6px;font:800 1.5em var(--fb);letter-spacing:3px}

/* typed-answer line + bars */
.answer{min-height:56px;font:800 1.8em var(--fb);text-align:center;border-bottom:3px dashed var(--mark);margin:8px 0;letter-spacing:2px}
.meter{display:block;height:12px;border-radius:8px;background:#e6edf8;margin-top:6px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#4aa3df,#27ae60)}

/* extra animations */
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes rise{from{transform:translateY(0);opacity:1}to{transform:translateY(-120px);opacity:0}}
@keyframes fall{from{transform:translateY(-20px) rotate(0)}to{transform:translateY(75vh) rotate(360deg);opacity:0}}
@keyframes wob{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

@media(max-width:575.98px){.grid.two .opt{font-size:1rem;padding:12px 10px}}

/* placed (disabled) items must not swallow taps meant for the box */
.stage button:disabled{pointer-events:none}