/* Kids English by CILL — premium theme layer (loaded after the base styles).
 * Brand: CILL orange + charcoal, warm cream "paper", glossy tactile surfaces.
 * Mobile and tablet first; wider screens get more columns, never stretched text. */
:root{
  --brand:#f7941d;--brand-2:#ffb14a;--brand-d:#d9780a;--brand-soft:#fff1de;
  --ink:#27303f;--mut:#6b7686;--line:#efe4d6;--card:#fff;
  --teal:#f7941d;--teal-d:#d9780a;          /* primary actions now use CILL orange */
  --grn:#2fb344;--red:#ff5e62;--blue:#2f80ed;--vio:#7c4dff;--yel:#ffb300;
  --r-lg:28px;--r-md:22px;--r-sm:16px;
  --lift:0 1px 0 rgba(255,255,255,.95) inset,0 -5px 0 rgb(var(--ink-rgb) / .07) inset,0 16px 32px -20px rgb(var(--ink-rgb) / .45),0 2px 6px rgb(var(--ink-rgb) / .06);
  --lift-sm:0 -4px 0 rgb(var(--ink-rgb) / .07) inset,0 10px 22px -16px rgb(var(--ink-rgb) / .45),0 1px 3px rgb(var(--ink-rgb) / .06);
  --gutter:16px;--stage:780px
}
/* ===== PALETTE TOKENS — swap THIS block (and the brand/ink/blue/grn/red/vio/yel/line/mut values above) to re-theme.
   Hex tokens = solid colours; *-rgb tokens = "R G B" channels used as rgb(var(--x) / alpha) for shadows and tints. ===== */
:root{
  --brand-hi:#ffb34f;--mark-1:#ffc271;--hero-1:#ffad42;--hero-3:#f06c3b;--paper:#fff8ef;--paper-1:#fffaf3;--paper-2:#fff3e3;--paper-3:#f3f8ff;--grn-hi:#43c75a;--vio-hi:#b39cff;--tile-abc-1:#ff9a7a;--tile-words-1:#5fd0ff;--tile-st-1:#ffe38a;--tile-st-ink:#5a3e00;--key-1:#5fb3ff;--gold-1:#fff6d9;--gold-2:#ffe7a3;--gold-edge:#ffd76a;--gold-ink:#6b4a00;--passed-1:#fff7df;--passed-2:#ffe9a8;--passed-ink:#7a5200;--newst-1:#fff8e1;--newst-2:#ffefc2;--ok-1:#f0fff3;--ok-2:#e3f9e8;--ok-3:#f3fff5;--ok-4:#e8f9ec;--seen:#f2f8ff;--soft:#f6f2ec;--warm-1:#fff6e8;--warm-edge:#ffd9a8;--level-edge:#ffd49a;--dash:#ffc98a;--cur-edge:#ffd27a;--cur-1:#fff8e6;--track:#f0e3d2;--chevron:#c9bba8;--path:#f0d9bb;--input-bg:#fffdf9;--note-bg:#fff8ec;--note-ink:#7a4a05;
  --ink-rgb:39 48 63;--brand-rgb:247 148 29;--blue-rgb:47 128 237;--grn-rgb:47 179 68;--paper-1-rgb:255 250 243;--hero-3-rgb:240 108 59;--vio-rgb:124 77 255;--red-rgb:255 94 98;--yel-rgb:255 179 0;--glow-rgb:255 200 80;--tile-abc-edge-rgb:150 20 30;--tile-words-edge-rgb:20 60 150;--tile-games-edge-rgb:60 20 160;--tile-st-edge-rgb:150 95 0;--gold-shadow-rgb:160 110 0;--brand-shadow-rgb:160 80 0;--brand-text-shadow-rgb:120 60 0;--hero-shadow-rgb:120 50 0
}

html{-webkit-text-size-adjust:100%}
/* page tint: on a fixed layer that always covers the screen (background-attachment:fixed is ignored on iOS
   and left a white band below the first screen on long pages / full-page captures) */
html{background:var(--paper);min-height:100%}
body{color:var(--ink);background:transparent;min-height:100vh}
body:after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 108% -12%,rgb(var(--brand-rgb) / .20),transparent 62%),
    radial-gradient(900px 560px at -12% 108%,rgb(var(--blue-rgb) / .13),transparent 60%),
    radial-gradient(700px 420px at 50% 120%,rgb(var(--grn-rgb) / .08),transparent 70%),
    linear-gradient(180deg,var(--paper-1) 0%,var(--paper-2) 55%,var(--paper-3) 100%)}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgb(var(--ink-rgb) / .07) 1.2px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
#app{position:relative;z-index:1;max-width:none}
h1,h2,h3,.ttl,b{text-wrap:balance}
p,small{text-wrap:pretty}

/* ---------- header ---------- */
.top{display:block;padding:0;background:rgb(var(--paper-1-rgb) / .82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid rgb(var(--ink-rgb) / .07);box-shadow:0 8px 24px -22px rgb(var(--ink-rgb) / .6)}
.topin{display:flex;align-items:center;gap:10px;max-width:1240px;margin:0 auto;padding:10px var(--gutter);padding-top:max(10px,env(safe-area-inset-top))}
.ico{width:48px;height:48px;border-radius:16px;background:#fff;border:1px solid rgb(var(--ink-rgb) / .07);box-shadow:var(--lift-sm);font-size:22px}
.ico:active{transform:translateY(2px)}
.ttl{font-size:21px;font-weight:800;letter-spacing:-.01em}
.ttl small{font-size:13.5px;margin-top:1px}
.chip{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border:1px solid var(--gold-edge);color:var(--gold-ink);border-radius:999px;padding:7px 14px;font-size:17px;
  box-shadow:0 -3px 0 rgb(var(--gold-shadow-rgb) / .14) inset,0 8px 16px -12px rgb(var(--gold-shadow-rgb) / .7)}
.brand{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.brand .mark{width:46px;height:46px;flex:none;border-radius:15px;display:grid;place-items:center;font-size:27px;
  background:linear-gradient(150deg,var(--mark-1),var(--brand) 70%);box-shadow:0 -4px 0 rgba(0,0,0,.12) inset,0 2px 0 rgba(255,255,255,.4) inset,0 10px 20px -10px rgb(var(--brand-rgb) / .9)}
.bname{display:flex;flex-direction:column;min-width:0;line-height:1}
.bname b{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.bname b span{color:var(--brand)}
.bname small{display:flex;align-items:center;gap:6px;margin-top:4px;font:600 12px/1 system-ui,sans-serif;color:var(--mut)}
.bname small img{height:24px;width:auto;display:block}
@media(max-width:430px){.topin .ico+.brand .mark{display:none}.bname b{font-size:21px}}

/* ---------- page body: phones first ---------- */
.body{width:100%;max-width:var(--stage);margin:0 auto;padding:18px var(--gutter) max(28px,env(safe-area-inset-bottom))}
.body.wide{max-width:1240px}
.h{font-size:24px;letter-spacing:-.01em;margin:22px 0 12px}
.h small{font-size:15px}

/* surfaces */
.kidbtn,.theme,.game,.lt,.card-big,.opt,.pic,.bigletter,.trace-wrap,.spic,.lopt,.form,.gate,.nextst,.review,.lcard,.lstep,.lgame,.lgroup,.stk div,.levelbar,.greet,.hero,.mmc .front,.hc,.bs,.seq span,.slot,.revc,.l2w,.rptarget{
  border:1px solid rgb(var(--ink-rgb) / .06)}
.kidbtn,.theme,.game,.lt,.card-big,.opt,.pic,.bigletter,.trace-wrap,.spic,.lopt,.form,.gate,.nextst,.review,.lcard,.lstep,.lgame,.levelbar,.greet{box-shadow:var(--lift)}
.lt,.lopt,.lstep,.lgame,.hc,.bs,.stk div{box-shadow:var(--lift-sm)}
button:active:not(:disabled){transform:translateY(2px) scale(.99)}
@media(hover:hover){.kidbtn,.theme,.game,.lt,.opt,.lgame,.tile,.lcard,.levelbar{transition:transform .18s ease,box-shadow .18s ease}
  .kidbtn:hover,.theme:hover,.game:hover,.lt:hover,.opt:hover:not(:disabled),.lgame:hover,.tile:hover,.levelbar:hover{transform:translateY(-3px)}}

/* buttons */
.btn{border-radius:18px;background:#fff;border:1px solid rgb(var(--ink-rgb) / .07);box-shadow:var(--lift-sm);letter-spacing:-.01em}
.btn.go,.chk{background:linear-gradient(180deg,var(--brand-hi),var(--brand));color:#fff;border:0;text-shadow:0 1px 0 rgb(var(--brand-text-shadow-rgb) / .25);
  box-shadow:0 -5px 0 rgb(var(--brand-shadow-rgb) / .28) inset,0 2px 0 rgba(255,255,255,.35) inset,0 12px 22px -12px rgb(var(--brand-rgb) / .95)}
.chk.passed{background:linear-gradient(180deg,var(--passed-1),var(--passed-2));color:var(--passed-ink);text-shadow:none;box-shadow:0 -4px 0 rgb(var(--gold-shadow-rgb) / .16) inset,0 8px 16px -12px rgb(var(--gold-shadow-rgb) / .6)}
.listen{background:linear-gradient(180deg,var(--brand-hi),var(--brand));border-radius:var(--r-md);
  box-shadow:0 -6px 0 rgb(var(--brand-shadow-rgb) / .28) inset,0 2px 0 rgba(255,255,255,.35) inset,0 16px 28px -16px rgb(var(--brand-rgb) / 1)}
.wide.practice{background:#fff;border:2px solid var(--warm-edge);box-shadow:var(--lift-sm);font-size:20px}
.grown{background:rgba(255,255,255,.75);border:1px solid rgb(var(--ink-rgb) / .08);border-radius:999px;padding:10px 20px}

/* ---------- profiles hero ---------- */
.hero{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:var(--r-lg);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--hero-1) 0%,var(--brand) 45%,var(--hero-3) 100%);box-shadow:0 -6px 0 rgb(var(--hero-shadow-rgb) / .22) inset,0 24px 40px -26px rgb(var(--hero-3-rgb) / .95)}
.hero:before,.hero:after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.14)}
.hero:before{width:260px;height:260px;right:-70px;top:-120px}.hero:after{width:140px;height:140px;right:120px;bottom:-90px;background:rgba(255,255,255,.1)}
.hero-tia{flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);box-shadow:0 2px 0 rgba(255,255,255,.4) inset;position:relative;z-index:1}
.hero-tia .tia-bird{font-size:62px}
.hero-txt{position:relative;z-index:1;min-width:0}
.hero .kicker{margin:0;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.hero h1{margin:2px 0 4px;font-size:27px;line-height:1.1;letter-spacing:-.02em}
.hero .sub{margin:0;font-size:15px;opacity:.95}
.hero .age{display:inline-block;margin-top:8px;background:rgba(255,255,255,.22);border-radius:999px;padding:3px 12px;font-weight:800;font-size:13px}
.kids{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.kidbtn{border-radius:var(--r-md);padding:16px 8px 14px;background:#fff}
.kidbtn .av{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;font-size:52px;margin-bottom:6px;
  background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from 200deg,var(--brand-2),var(--red),var(--vio),var(--blue),var(--grn),var(--brand-2)) border-box;border:4px solid transparent}
.kidbtn .av .avimg{width:100%;height:100%;border:0;box-shadow:none}
.kidbtn.add{background:rgba(255,255,255,.55);border:2.5px dashed var(--dash);box-shadow:none}
.kidbtn.add .av{background:var(--brand-soft);border:4px solid #fff;font-size:40px}

/* ---------- home ---------- */
.home{display:flex;flex-direction:column;gap:14px}
.home-side{display:flex;flex-direction:column;gap:12px}
.greet{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-md);padding:12px 14px}
.gav{width:58px;height:58px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:36px;overflow:hidden;
  background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from 200deg,var(--brand-2),var(--red),var(--vio),var(--blue),var(--grn),var(--brand-2)) border-box;border:3px solid transparent}
.gav img{width:100%;height:100%;object-fit:cover}
.gtxt{flex:1;min-width:0}.gtxt b{display:block;font-size:24px;line-height:1.1;letter-spacing:-.02em}.gtxt small{color:var(--mut);font-size:15px}
.greet .tia-bird{font-size:44px}
.levelbar{margin:0;border:2px solid var(--level-edge);background:linear-gradient(100deg,var(--warm-1),#fff 60%)}
.lvprog{gap:5px}.lvprog i{width:22px;height:8px;border-radius:99px;background:var(--track)}.lvprog i.on{background:linear-gradient(90deg,var(--grn-hi),var(--grn))}
.home .wide.practice{margin:0}
.today{display:none;grid-template-columns:repeat(3,1fr);gap:8px;background:#fff;border-radius:var(--r-md);padding:14px 10px;border:1px solid rgb(var(--ink-rgb) / .06);box-shadow:var(--lift-sm)}
.today span{text-align:center}.today b{display:block;font-size:22px}.today small{color:var(--mut);font-size:13px}
.tiles{gap:14px;margin:0}
.tile{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:168px;padding:18px 10px 16px;isolation:isolate}
.tile:before{content:'';position:absolute;z-index:-1;width:190px;height:190px;border-radius:50%;right:-60px;top:-80px;background:rgba(255,255,255,.16)}
.tile:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 45%);pointer-events:none}
.tile span{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:54px;margin-bottom:6px;
  background:rgba(255,255,255,.24);box-shadow:0 2px 0 rgba(255,255,255,.45) inset,0 10px 20px -12px rgba(0,0,0,.45)}
.tile b{font-size:27px;letter-spacing:-.01em;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.tile small{font-size:15px}
.t-abc{background:linear-gradient(150deg,var(--tile-abc-1),var(--red));box-shadow:0 -7px 0 rgb(var(--tile-abc-edge-rgb) / .25) inset,0 22px 36px -24px rgb(var(--red-rgb) / 1)}
.t-words{background:linear-gradient(150deg,var(--tile-words-1),var(--blue));box-shadow:0 -7px 0 rgb(var(--tile-words-edge-rgb) / .28) inset,0 22px 36px -24px rgb(var(--blue-rgb) / 1)}
.t-games{background:linear-gradient(150deg,var(--vio-hi),var(--vio));box-shadow:0 -7px 0 rgb(var(--tile-games-edge-rgb) / .3) inset,0 22px 36px -24px rgb(var(--vio-rgb) / 1)}
.t-st{background:linear-gradient(150deg,var(--tile-st-1),var(--yel));color:var(--tile-st-ink);box-shadow:0 -7px 0 rgb(var(--tile-st-edge-rgb) / .25) inset,0 22px 36px -24px rgb(var(--yel-rgb) / 1)}
.t-st b{text-shadow:0 1px 0 rgba(255,255,255,.4)}

/* entrance motion (subtle; respects reduced motion) */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}   /* not "rise": that name is the balloons' float-up */
.tiles>*,.kids>*,.themes>*,.games>*,.lgames>*,.stk>*,.lgroup,.home-side>*,.hero,.lcard,.lstep{animation:fadeUp .42s cubic-bezier(.2,.8,.2,1) both}
.tiles>:nth-child(2),.kids>:nth-child(2),.themes>:nth-child(2),.games>:nth-child(2),.lgames>:nth-child(2),.home-side>:nth-child(2),.lstep:nth-child(2){animation-delay:.05s}
.tiles>:nth-child(3),.kids>:nth-child(3),.themes>:nth-child(3),.games>:nth-child(3),.lgames>:nth-child(3),.home-side>:nth-child(3),.lstep:nth-child(3){animation-delay:.1s}
.tiles>:nth-child(4),.kids>:nth-child(4),.themes>:nth-child(4),.games>:nth-child(4),.lgames>:nth-child(4),.home-side>:nth-child(4),.lstep:nth-child(4){animation-delay:.15s}
.kids>:nth-child(n+5),.themes>:nth-child(n+5),.games>:nth-child(n+5),.lgames>:nth-child(n+5){animation-delay:.2s}
@media(prefers-reduced-motion:reduce){*:not(.bal){animation:none!important;transition:none!important}.hint{outline:4px solid #0B6B3A;outline-offset:2px}}

/* ---------- learning screens ---------- */
.lt{border-radius:18px;background:#fff}
.lt.seen{background:var(--seen)}.lt.done{background:linear-gradient(180deg,var(--ok-1),var(--ok-2))}
.theme{border-top:0;border-radius:var(--r-md);overflow:hidden;position:relative;padding-top:18px}
.theme:before{content:'';position:absolute;left:0;right:0;top:0;height:7px;background:var(--c)}
.theme .em{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--soft);background:color-mix(in srgb,var(--c) 16%,#fff);margin-bottom:6px;font-size:46px}
.game{border-left:0;border-radius:var(--r-md);padding:14px 16px;position:relative;overflow:hidden}
.game .em{width:72px;height:72px;flex:none;border-radius:20px;display:grid;place-items:center;font-size:42px;background:var(--soft);background:color-mix(in srgb,var(--c) 18%,#fff)}
.game:after{content:'›';margin-left:auto;font-size:34px;color:var(--chevron);font-weight:800}
.lgame{border-left:0;border-radius:20px;background:#fff}
.lgame .em{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:30px;background:var(--soft);background:color-mix(in srgb,var(--c) 18%,#fff)}
.lgroup{background:rgba(255,255,255,.65);border-radius:var(--r-md)}
.lgroup.cur{background:linear-gradient(180deg,var(--cur-1),#fff);border:2px solid var(--cur-edge);box-shadow:var(--lift-sm)}
.focus{background:rgba(255,255,255,.7);border-radius:999px;padding:8px 18px;width:max-content;max-width:100%;margin:6px auto 14px;border:1px solid rgb(var(--ink-rgb) / .06)}
.card-big{border-radius:32px;background:#fff}
.card-big .tap{background:var(--brand-soft);color:var(--brand-d)}
.bigletter,.pic,.trace-wrap,.spic{border-radius:var(--r-lg)}
.bigletter span{color:var(--blue)}
.opt{border-radius:var(--r-lg);background:#fff}
.opt.ok{background:linear-gradient(180deg,var(--ok-1),var(--ok-2))}
.prog{background:#fff;box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .08)}
.prog i{background:linear-gradient(90deg,var(--brand-hi),var(--brand))}
.dots i.d{background:var(--brand)}.dots i.c{background:var(--blue)}
.ltile{background:linear-gradient(180deg,var(--key-1),var(--blue));box-shadow:0 -5px 0 rgb(var(--tile-words-edge-rgb) / .3) inset,0 10px 18px -12px rgb(var(--blue-rgb) / 1)}
.sky{border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .06),inset 0 -40px 60px -40px rgba(255,255,255,.9)}
.mmc .back{background:linear-gradient(150deg,var(--vio-hi),var(--vio));box-shadow:0 -5px 0 rgb(var(--tile-games-edge-rgb) / .3) inset}
.form,.gate{border-radius:var(--r-lg)}
.form input,.dobsel{border:2px solid var(--line);background:var(--input-bg)}
.form input:focus,.dobsel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgb(var(--brand-rgb) / .15)}
.avpick button.on{border-color:var(--brand);background:var(--brand-soft)}
.gchip.on{background:var(--brand);border-color:var(--brand)}
.stars span.on{filter:drop-shadow(0 6px 10px rgb(var(--yel-rgb) / .45))}
.result .stars{background:radial-gradient(circle at 50% 55%,rgb(var(--glow-rgb) / .35),transparent 60%);padding:6px 0}
.newst{background:linear-gradient(180deg,var(--newst-1),var(--newst-2));border:2px solid var(--gold-edge);box-shadow:var(--lift-sm)}
.review{border-radius:var(--r-lg)}
.revc{background:var(--brand-soft)}
.nextst{border-radius:var(--r-md)}
.lcard.now{background:linear-gradient(100deg,var(--warm-1),#fff);border:2px solid var(--level-edge)}
.lstep.done{background:linear-gradient(180deg,var(--ok-3),var(--ok-4))}
.lpath{border-left-color:var(--path)}
.brkbox{border-radius:32px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}

/* grown-ups area keeps a calm, professional look */
.pd .tabs button.on{background:var(--ink)}
.pd .pcard,.pd .kpi{border:1px solid rgb(var(--ink-rgb) / .06);box-shadow:0 1px 2px rgb(var(--ink-rgb) / .05),0 10px 24px -18px rgb(var(--ink-rgb) / .4);border-radius:18px}
.pd .kpi b{letter-spacing:-.02em}
.pd .bars i{background:linear-gradient(180deg,var(--brand-hi),var(--brand))}
.pbtn.pri{background:var(--brand)}
.note{background:var(--note-bg);border-color:var(--warm-edge);color:var(--note-ink)}

/* ---------- tablets (portrait) ---------- */
@media (min-width:600px){
  :root{--gutter:24px}
  .ttl{font-size:23px}
  .hero{padding:24px 28px}.hero-tia{width:120px;height:120px}.hero-tia .tia-bird{font-size:76px}.hero h1{font-size:34px}.hero .sub{font-size:17px}
  .kids{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
  .kidbtn .av{width:104px;height:104px;font-size:62px}
  .tiles{gap:18px}.tile{min-height:clamp(230px,29vh,330px)}.tile span{width:116px;height:116px;font-size:68px}.tile b{font-size:32px}.tile small{font-size:17px}
  .greet{padding:14px 18px}.gav{width:66px;height:66px}.gtxt b{font-size:28px}
  .themes{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
  .games{grid-template-columns:1fr 1fr;gap:16px}
  .lgames{grid-template-columns:repeat(2,1fr);gap:14px}
  .letters{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px}.lt{font-size:34px}
  .opts{gap:18px}.opt .em.big{font-size:92px}.opt .sw.big{width:100px;height:100px}
  .lopt{width:112px;height:112px;font-size:66px}
  .listen{padding:16px}
  .card-big{padding:32px 16px 22px}
  .rev{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .stk{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px}.stk div{font-size:56px}
}

/* ---------- landscape tablets & computers: use the width ---------- */
@media (min-width:900px){
  :root{--gutter:32px;--stage:860px}
  .v-profiles .hero{padding:30px 36px}
  .home{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:24px;align-items:start}
  .home-side{position:sticky;top:96px}
  .today{display:grid}
  .home .greet{flex-wrap:wrap;padding:20px}
  .tiles{grid-template-columns:1fr 1fr;gap:22px}.tile{min-height:250px}
  .v-abc .lgames{grid-template-columns:repeat(4,1fr)}
  .v-abc .lgroup{display:inline-block;vertical-align:top;width:calc(50% - 8px);margin:0 4px 16px}
  .v-sounds .lgames{grid-template-columns:repeat(5,1fr)}
  .v-sounds .lgroup{display:inline-block;vertical-align:top;width:calc(50% - 8px);margin:0 4px 16px}
  .games{grid-template-columns:repeat(3,1fr)}
  .opts{grid-template-columns:repeat(4,1fr)}.opts.three{grid-template-columns:repeat(3,1fr)}.opts.two{grid-template-columns:repeat(2,minmax(0,260px));justify-content:center}
  .opt{aspect-ratio:1}
  .pd.tab-report.body{column-count:2;column-gap:20px}
  .pd .tabs,.pd .kidsel,.pd .note,.pd .gchips,.pd>.noprint{column-span:all}
  .pd .pcard,.pd .kpis{break-inside:avoid;display:inline-block;width:100%}
}
@media (min-width:1200px){
  .tile{min-height:270px}
  .themes{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .kids{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}

/* white colour swatch needs a visible edge on white cards */
.sw.white{border:4px solid #c9ccd3}

/* ===== DEFAULT PALETTE: 1 · Sunny Lagoon (owner pick 2026-11-06) — overrides the token blocks above.
   Source: cill-kids-brand/sticker-v4-app-tokens.css. Crisp Jewel / Deep Sea live in git history only. ===== */
/* 1 · Sunny Lagoon — crisp white-cool background · bright tiles with dark-ink text · lagoon-teal primary */
:root{
  --ink:#182A44;--ink-rgb:24 42 68;--mut:#56637A;--line:#E3EAF2;--card:#FFFFFF;--brand:#0A7A86;--brand-rgb:10 122 134;--brand-hi:#0B818F;--brand-2:#26A9B3;--brand-d:#07535B;--brand-soft:#F3F8F9;--teal:#0A7A86;--teal-d:#07535B;--mark-1:#26A9B3;--brand-shadow-rgb:4 53 58;--brand-text-shadow-rgb:3 36 39;--hero-1:#0C808E;--hero-3:#2C6CD6;--hero-3-rgb:44 108 214;--hero-shadow-rgb:21 54 109;--paper:#F7FAFD;--paper-1:#FFFFFF;--paper-2:#F3F8FC;--paper-3:#EAF4FB;--paper-1-rgb:255 255 255;--red:#C4472A;--red-rgb:255 138 92;--tile-abc-1:#FFA77F;--tile-abc-edge-rgb:194 55 0;--blue:#1F6FD1;--blue-rgb:31 111 209;--key-1:#1F73DA;--tile-words-1:#7CCBF5;--tile-words-edge-rgb:14 100 148;--vio:#6B4BD6;--vio-hi:#C6B2F8;--vio-rgb:107 75 214;--tile-games-edge-rgb:76 21 213;--yel:#FFC83D;--yel-rgb:255 200 61;--tile-st-1:#FFDB70;--tile-st-ink:#182A44;--tile-st-edge-rgb:163 117 0;--grn:#16804A;--grn-hi:#35B06C;--grn-rgb:22 128 74;--ok-1:#E3F6EA;--ok-2:#D1EEDC;--ok-3:#EBF8F0;--ok-4:#DCF2E4;--passed-1:#E3F6EA;--passed-2:#CDEBD9;--passed-ink:#14693D;--gold-1:#FFF7D6;--gold-2:#FFE89A;--gold-edge:#F2C230;--gold-ink:#6B4800;--gold-shadow-rgb:150 105 0;--glow-rgb:255 200 60;--newst-1:#FFEFE8;--newst-2:#FFDCCE;--seen:#EEF4FA;--soft:#F1F5F9;--warm-1:#EBF4F5;--warm-edge:#B6D7DB;--level-edge:#91C3C9;--dash:#91C3C9;--cur-edge:#78B6BC;--cur-1:#EBF4F5;--track:#E4EAF1;--chevron:#A9B4C2;--path:#D3DEE8;--input-bg:#FFFFFF;--note-bg:#E7F2F3;--note-ink:#06464D
}
:root .t-abc{background:linear-gradient(150deg,#FFA77F,#FF8A5C);color:var(--ink);box-shadow:0 -7px 0 rgb(194 55 0 / .28) inset,0 22px 36px -24px rgb(255 138 92 / 1)}
:root .t-abc b{text-shadow:0 1px 0 rgba(255,255,255,.35)}
:root .t-words{background:linear-gradient(150deg,#7CCBF5,#4DB4EE);color:var(--ink);box-shadow:0 -7px 0 rgb(14 100 148 / .28) inset,0 22px 36px -24px rgb(77 180 238 / 1)}
:root .t-words b{text-shadow:0 1px 0 rgba(255,255,255,.35)}
:root .t-games{background:linear-gradient(150deg,#C6B2F8,#AC8FF4);color:var(--ink);box-shadow:0 -7px 0 rgb(76 21 213 / .28) inset,0 22px 36px -24px rgb(172 143 244 / 1)}
:root .t-games b{text-shadow:0 1px 0 rgba(255,255,255,.35)}
:root .t-st{background:linear-gradient(150deg,#FFDB70,#FFC83D);color:var(--ink);box-shadow:0 -7px 0 rgb(163 117 0 / .28) inset,0 22px 36px -24px rgb(255 200 61 / 1)}
:root .t-st b{text-shadow:0 1px 0 rgba(255,255,255,.35)}
:root .opt.bad,:root .lopt.bad{border-color:#B07F00;background:#FFF2C2}
:root .hc.no,:root .rpb.no{background:#FFF2C2}
:root .failmsg{background:#FFF2C2;color:#6B4800}
:root .lgrid .weak{box-shadow:inset 0 0 0 2px #B07F00}
:root .weaklist button{background:#FFF2C2;border-color:#B07F00;color:#6B4800}

/* ===== BRAND v4: sticker header, tagline hero, two-kids mark, grown-up CILL footer ===== */
.brand .sticker{height:60px;width:auto;display:block;filter:drop-shadow(0 4px 8px rgb(var(--ink-rgb) / .14))}
.hero{flex-direction:column;text-align:center;gap:4px;padding:14px 16px 16px}
.hero-sticker{position:relative;z-index:1;width:min(100%,240px);height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
.hero h1{font-size:24px}
.v-profiles .h{margin-top:16px}
.kids-mark{width:54px;height:54px;flex:none;filter:drop-shadow(0 4px 8px rgb(var(--ink-rgb) / .15))}
.kids-mark.big{width:112px;height:112px}
.cillfoot{margin:30px auto 6px;max-width:520px;text-align:center;font-family:'Nunito',system-ui,sans-serif;color:var(--mut);font-size:12.5px;line-height:1.55}
.cillfoot img{height:40px;width:auto;display:block;margin:0 auto 6px;opacity:.92}
.cillfoot p{margin:0}.cillfoot a{color:var(--mut);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pd .cillfoot{column-span:all}
@media (min-width:600px){
  .brand .sticker{height:68px}
  .hero h1{font-size:34px}
  .hero{flex-direction:row;text-align:left;gap:22px;padding:22px 28px}
  .hero-sticker{width:280px;flex:none}
  .kids-mark{width:64px;height:64px}
}
@media (min-width:900px){ .hero-sticker{width:320px} }

/* contrast fixes from the full-screen QA */
.hero .age{background:rgba(0,0,0,.24);color:#fff}
.lgrid .s0{color:var(--mut)}
/* accent + balloons in Lagoon: bright colours with dark-ink letters (white letters were 1.8–2.8:1) */
:root{--org:#c4562a}
.bal{color:var(--ink);box-shadow:inset -8px -10px 0 rgba(0,0,0,.08)}
/* full-opacity small text on coloured surfaces; locked items look locked without fading their words */
.listen small,.hero .sub{opacity:1}
.lcard.lock{opacity:1;background:var(--soft);box-shadow:none}
.lrest{opacity:1}.lrest span{filter:grayscale(.5) opacity(.75)}.lrest small{color:var(--ink)}

/* ===== UX review 05 (2026-11-06) ===== */
.playnext{display:flex;align-items:center;gap:14px;width:100%;min-height:88px;padding:12px 18px;border:0;border-radius:24px;background:linear-gradient(180deg,var(--brand-hi),var(--brand));color:#fff;text-align:left;box-shadow:0 -6px 0 rgb(0 0 0 / .16) inset,var(--lift-sm)}
.playnext b{display:block;font-size:28px;line-height:1.15}.playnext small{display:block;font-size:15px;color:#fff;font-weight:600}
.pn-ic{flex:none;width:60px;height:60px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;font-size:26px}
.playnext:active{transform:translateY(2px)}
.stay{position:fixed;inset:0;z-index:60;background:rgb(0 0 0 / .45);display:grid;place-items:center;padding:16px}
.staybox{background:#fff;border-radius:24px;padding:18px;display:grid;gap:12px;width:min(100%,340px)}
.staybox .btn{width:100%;min-height:76px;font-size:22px}
.hero.mini{padding:10px 12px}.hero.mini .hero-txt{display:none}.hero.mini .hero-sticker{width:min(100%,170px)}
.lmore{margin-top:12px}.lmore summary{list-style:none;cursor:pointer;min-height:64px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:19px;background:#fff;border-radius:18px;box-shadow:var(--lift-sm)}
.lmore summary::-webkit-details-marker{display:none}.lmore summary small{font-size:15px;color:var(--mut);font-weight:600}.lmore[open] summary{margin-bottom:12px}
span.chk{display:inline-grid;place-items:center;min-width:56px}
/* H4: kid Bangla never below 18px (grown-up area keeps its own sizes) */
.body:not(.pd) :is(.h small,.gtxt small,.tile small,.listen small,.hero .sub,.focus small,.lgame small,.lgh span,.theme small,.game small,.pic small,.lqhint small,.lvtxt small,.lstep small,.lcard small,.spic small,.revc small,.trace-head small,#trace-msg small,.kidbtn small,.huntq small),.top .ttl small{font-size:18px}
.top .ttl small{line-height:1.2}
@media(max-width:430px){.lgames{grid-template-columns:1fr}.letters{grid-template-columns:repeat(3,minmax(0,1fr))!important}.lt{min-height:88px}}
/* M3: tap targets */
.ico{width:64px;height:64px}.ico[aria-label=Back]{width:56px;height:56px}
.chip{min-height:52px}.chk{min-height:64px;padding-left:16px;padding-right:16px}.btn{min-height:64px}
.lvtxt b,.lstep b{text-wrap:wrap}
@media(max-width:430px){.levelbar{flex-wrap:wrap}.lvprog{order:3;width:100%}}
/* M9: Games stays distinct for red-green colour-blind children; right answers carry a tick, not only colour */
:root .t-games{background:linear-gradient(150deg,#6F52D6,#5B3FC4);color:#fff;box-shadow:0 -7px 0 rgb(40 20 120 / .35) inset,0 22px 36px -24px rgb(91 63 196 / 1)}
:root .t-games b{text-shadow:0 1px 0 rgba(0,0,0,.2)}
.opt,.lopt{position:relative}
.opt.ok:after,.lopt.ok:after{content:'✓';position:absolute;top:6px;right:8px;width:30px;height:30px;border-radius:50%;background:var(--ok-ink,#0B6B3A);color:#fff;font-size:20px;font-weight:800;display:grid;place-items:center}
.ldots i.on{transform:scale(1.5)}
.sw{position:relative;display:inline-grid;place-items:center}.swo{font-style:normal;font-size:.5em;line-height:1;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .35))}
/* M11: lighter on slow phones */
.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgb(var(--paper-1-rgb) / .97)}
.tiles>*,.kids>*,.themes>*,.games>*,.lgames>*,.stk>*,.lgroup,.home-side>*,.hero,.lcard,.lstep{animation-duration:.2s;animation-delay:0s!important}
/* M15: skill pills are status, not buttons */
#skills span{box-shadow:none;background:transparent;border:0;padding:2px 6px}

/* Parents, review 05 */
.today-card{background:var(--brand-soft);border:0}.today-card b{display:block;font-size:18px}.today-card p{margin:6px 0 0;font-size:17px;font-weight:600}
.actlist>div{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-bottom:1px solid #eef2f7}.actlist small{color:var(--mut);font-size:13px}.actlist small:last-child{text-align:right}
.staybox p{margin:0;font-size:18px;font-weight:700;text-align:center}.staybox input{width:100%;min-height:52px;border-radius:14px;border:1px solid #cbd5e1;padding:0 12px;font-size:18px}
.ferr{color:#8A5A00;font-weight:700;font-size:16px;min-height:1.2em;margin:6px 0}
.fmore summary{min-height:48px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.avpick{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.mk .pbtn.dan{margin-left:24px}.pbtn{min-height:44px}

.skillnext{display:block;width:100%;margin-top:10px;font-size:20px}
/* M17 tablets: letter choices grow with the screen */
@media(min-width:700px){.lopt{width:clamp(112px,17vw,170px);height:clamp(112px,17vw,170px);font-size:clamp(66px,10vw,100px)}.bs{min-height:96px;font-size:44px}}
@media(min-width:900px) and (max-height:800px){.hc{min-height:64px;font-size:30px}}

/* Blend strip + QR landing */
.blend{background:#fff;border-radius:18px;padding:12px 14px;margin-top:12px;box-shadow:var(--lift-sm)}.blend>b{display:block;font-size:19px;margin-bottom:8px}.blend small{font-size:15px;color:var(--mut)}
.bw{display:flex;gap:6px;align-items:center;margin-top:8px}.bl{width:64px;height:64px;border-radius:14px;background:var(--soft);border:0;font-family:Andika,'Baloo 2',sans-serif;font-size:32px;color:var(--ink)}.bl:disabled{opacity:1}
.bword{flex:1;min-height:64px;border:0;border-radius:14px;background:var(--brand-soft);color:var(--ink);font-size:24px;font-weight:800}
.unitw{margin-top:12px}
.unitw .revc{padding:16px 8px 10px;min-height:128px}

/* re-test 05b */
.body:not(.pd) small,.failmsg,.tap{font-size:18px}
.sw .swo{font-size:0;line-height:0}.sw.huge .swo{font-size:80px;line-height:1}.sw.big .swo{font-size:42px;line-height:1}.sw.mid .swo{font-size:26px;line-height:1}
.seg button{width:64px;height:64px}.btn.soft{min-height:64px}
.bword{flex:1 1 100%}
.v-practice p{font-size:18px}

/* owner 2026-11-08: logo must stand out, so the welcome banner is light */
.hero{background:#fff;color:var(--ink);border:1px solid rgb(var(--ink-rgb) / .06);box-shadow:var(--lift)}
.hero:before{background:rgb(var(--brand-rgb) / .07)}.hero:after{background:rgb(var(--yel-rgb) / .14)}
.hero h1{color:var(--ink)}.hero .sub{color:var(--mut)}.hero .age{background:var(--brand-soft);color:var(--brand-d)}
.hero-sticker{filter:none}
.hero.mini{justify-content:center;align-items:center}