/* Fonts are bundled (SIL Open Font License) so the app works offline. */
@font-face{font-family:"Andika";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/andika-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Andika";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/andika-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Andika";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/andika-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Andika";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/andika-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lilita-one-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lilita-one-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pixelify-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/pixelify-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Layout: one-screen phone app. Header (exit · page blocks · coins), scrolling stage, grass action bar with a chalk line.
   One sunny-stadium look, chosen on purpose (single theme, every colour set explicitly). */
:root{
  --sky:#d7efff; --sky-deep:#b4defa;
  --grass:#2f9e52; --grass-dark:#267f42;
  --chalk:#ffffff;
  --ink:#1c2a39; --ink-soft:#4f5f71;
  --sun:#ffc83a; --sun-dark:#c98f00;
  --kick:#ff6a3d;
  --good:#1a9c56; --good-bg:#dcf6e8;
  --bad:#e5484d; --bad-bg:#fde4e4;
  --wait:#a66a00;
  --card:#ffffff; --line:rgba(28,42,57,.14);
  --f-display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Andika","Segoe UI","Helvetica Neue",system-ui,sans-serif;
  --f-pixel:"Pixelify Sans","Courier New",monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--sky);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.35;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit}
#app{height:100%;display:flex;flex-direction:column;max-width:640px;margin:0 auto;position:relative;overflow:hidden}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top{display:flex;align-items:center;gap:10px;padding-block:10px 6px;min-height:62px;flex:none}
.stage{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-block:8px 24px;display:flex;flex-direction:column;gap:16px}
.bottom{position:relative;flex:none;background:repeating-linear-gradient(90deg,var(--grass) 0 48px,var(--grass-dark) 48px 96px);border-top:4px solid var(--chalk);padding-block:12px 14px;display:flex;gap:10px;align-items:center}
h1,h2,h3{font-family:var(--f-display);font-weight:400;margin:0;line-height:1.1;text-wrap:balance}
p{margin:0}
.muted{color:var(--ink-soft)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.center{justify-content:center}
.eyebrow{font-family:var(--f-pixel);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.lead{font-size:20px;font-weight:700}
.panel{background:var(--card);border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink);padding:14px}
.ic{display:inline-grid;width:24px;height:24px;flex:none}
.ic svg{width:100%;height:100%;display:block}
.px{display:block;flex:none}
.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}

/* buttons */
.btn{appearance:none;border:3px solid var(--ink);border-radius:10px;background:var(--kick);color:#fff;font-family:var(--f-display);font-size:22px;letter-spacing:.02em;padding:10px 20px;box-shadow:0 5px 0 var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-shadow:0 2px 0 rgba(0,0,0,.22);transition:transform .07s,box-shadow .07s;min-height:56px;touch-action:manipulation}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn:disabled{background:#c3ccd5;border-color:#8f9caa;box-shadow:0 5px 0 #8f9caa;color:#f4f7f9;text-shadow:none;cursor:default}
.btn.alt{background:var(--chalk);color:var(--ink);text-shadow:none}
.btn.sun{background:var(--sun);color:var(--ink);text-shadow:none}
.btn.go{background:var(--good)}
.btn.grow{flex:1;min-width:0}
.btn.sm{font-size:17px;min-height:44px;padding:6px 14px;box-shadow:0 4px 0 var(--ink)}
.btn.icon{width:52px;min-height:52px;padding:0;flex:none}
.btn.pulse{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.04)}}
:focus-visible{outline:3px solid var(--kick);outline-offset:3px}

/* coins + progress */
.coins{margin-left:auto;display:flex;align-items:center;gap:7px;background:var(--chalk);border:3px solid var(--ink);border-radius:999px;padding:4px 12px 4px 8px;font-family:var(--f-pixel);font-weight:700;font-size:20px;box-shadow:0 3px 0 var(--ink);flex:none;font-variant-numeric:tabular-nums}
.coin{width:18px;height:18px;flex:none;display:inline-block;background:var(--sun);border:2px solid var(--sun-dark);box-shadow:inset 3px 3px 0 #ffe9a3;border-radius:3px}
.coins.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.25)}}
.coinpop{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:-46px;display:flex;align-items:center;gap:6px;background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:4px 12px;font-family:var(--f-pixel);font-weight:700;font-size:20px;box-shadow:0 3px 0 var(--ink);animation:rise 1.6s ease-out forwards;pointer-events:none}
@keyframes rise{0%{transform:translateY(14px) scale(.8)}20%{transform:translateY(0) scale(1.1)}80%{transform:translateY(-6px)}100%{transform:translateY(-14px);opacity:0}}
.prog{flex:1;display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:2px;min-width:0}
.prog i{height:14px;background:rgba(28,42,57,.13);border-radius:2px}
.prog i.d{background:var(--grass)}
.prog i.n{background:var(--sun);box-shadow:0 0 0 2px var(--ink)}

/* lesson header: exit · mistakes · coins, the page blocks in a full-width row below */
.top.ltop{flex-wrap:wrap;row-gap:8px}
.ltop .prog{flex:1 1 100%}
.misses{appearance:none;display:flex;align-items:center;gap:8px;min-height:40px;background:var(--chalk);border:3px solid var(--ink);border-radius:999px;padding:4px 12px;box-shadow:0 3px 0 var(--ink);font-family:var(--f-pixel);font-weight:700;font-size:20px;cursor:pointer;flex:none;font-variant-numeric:tabular-nums}
.misses .lbl{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.misses .pips{display:flex;gap:4px}
.misses .pips i{position:relative;width:18px;height:18px;background:#fff;border:2px solid var(--ink);border-radius:50%}
.misses .pips i.x{background:var(--bad);border-color:#a3262b}
.misses .pips i.x::before,.misses .pips i.x::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:3px;background:#fff;border-radius:2px;transform:translate(-50%,-50%) rotate(45deg)}
.misses .pips i.x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.misses.last{background:var(--bad-bg);border-color:var(--bad);box-shadow:0 3px 0 var(--bad)}
.misses.last .lbl{color:var(--bad)}
.misses.bump{animation:shake .5s}
@media (max-width:399px){.misses .lbl{display:none}}
/* pp-v102: level/lesson chip in the lesson top bar ("3/8" = level 3, lesson 8) */
.where{appearance:none;display:flex;align-items:center;gap:4px;min-height:40px;background:var(--ink);border:3px solid var(--ink);border-radius:10px;padding:4px 10px;box-shadow:0 3px 0 #000;font-family:var(--f-pixel);font-weight:700;font-size:20px;color:#fff;cursor:pointer;flex:none;font-variant-numeric:tabular-nums}
.where .wi{font-size:15px;line-height:1}
@media (max-width:399px){.where .wi{display:none}.where{padding:4px 9px}}
.oops .dialog{animation:popin .35s .2s both}
.oops h2{font-size:30px;color:var(--bad)}
@keyframes popin{from{transform:scale(.8);opacity:0}}

/* speech + instruction */
.instr{display:flex;align-items:center;gap:12px}
.instr h2{font-size:26px}
.instr h2.long{font-size:22px;line-height:1.15}.instr h2.xl{font-size:20px;line-height:1.15}.instr h2.xxl{font-size:18px;line-height:1.12}
.spk{flex:none;width:52px;height:52px;border-radius:50%;border:3px solid var(--ink);background:var(--sun);color:var(--ink);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.spk .ic{width:26px;height:26px}
.spk:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.spk.big{width:116px;height:116px;margin:4px auto 0}
.spk.big .ic{width:56px;height:56px}
.spk.mini{width:38px;height:38px;border-width:2px;box-shadow:0 2px 0 var(--ink)}
.spk.mini .ic{width:18px;height:18px}
.spk.ping{animation:ping .6s}
@keyframes ping{40%{transform:scale(1.1)}}
.bubble{position:relative;background:var(--chalk);border:3px solid var(--ink);border-radius:16px;padding:10px 14px;font-weight:700;font-size:21px;box-shadow:0 4px 0 var(--ink);min-width:0;flex:1;display:flex;align-items:center;gap:10px;justify-content:space-between}
.bubble::before{content:"";position:absolute;left:-11px;bottom:16px;width:16px;height:16px;background:var(--chalk);border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
.bubble .bt{min-width:0}
.say-row{display:flex;align-items:center;gap:16px}

/* brand + who */
.logo{font-family:var(--f-display);font-size:36px;line-height:1;color:var(--chalk);text-shadow:3px 3px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink)}
.logo .y{color:var(--sun)}
.logo small{display:block;font-family:var(--f-pixel);font-size:15px;font-weight:700;letter-spacing:.32em;color:var(--ink);text-shadow:none;margin-top:6px}
/* LangsCraft: the logo is built from blocks (logoSVG in app.js) */
.logo .logosvg{display:block;width:min(100%,300px);height:auto}
.logo small{font-size:13px;letter-spacing:.24em;margin-top:5px}
.logo .slogan,.top.lbar .slogan{display:block;width:min(100%,300px);text-align:right;font-family:var(--f-display);font-size:16px;line-height:1.1;letter-spacing:.02em;color:var(--kick);text-shadow:none;margin-top:0;padding:.1em 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* pp-v67: under LANGUAGES FOR KIDS, right edge of the logo; pp-v81: always ONE row (app.js fitSlogan shrinks a long translation; the padding keeps accents from being cut) */
/* pp-v84: logo + menu-language button in row 1, the slogan in row 2 across the full width, text on the right edge of the screen */
.top.lbar{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:0;align-items:center}
.top.lbar .logo{grid-column:1;grid-row:1}
.top.lbar .mlang{grid-column:2;grid-row:1}
.top.lbar .slogan{grid-column:1 / -1;grid-row:2;width:100%;text-align:right}
.hero{display:flex;align-items:center;gap:14px}
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kid{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 12px;background:var(--card);border:3px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink);cursor:pointer;min-width:0}
.kid:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.kid .pic{display:flex;align-items:flex-end;justify-content:center;width:100%;height:106px;margin-bottom:2px;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:linear-gradient(#bfe6ff 0 72%,#59c26a 72% 100%)}
.kid .pic.w-football{background:linear-gradient(#bfe6ff 0 72%,#2fa84f 72% 100%)}
.kid .pic.w-space{background:radial-gradient(#fff 1px,transparent 1.6px) 0 0/26px 26px,radial-gradient(#cfe 1px,transparent 1.6px) 13px 13px/26px 26px,linear-gradient(#1b2a5a 0 72%,#7d8aa6 72% 100%)}
.kid .pic.w-ocean{background:linear-gradient(#8fd8ff 0 72%,#f2d28b 72% 100%)}
.kid .pic.w-castle{background:linear-gradient(#d9c4f2 0 72%,#8d96a3 72% 100%)}
.kid .pic.w-racing{background:linear-gradient(#cfd8e3 0 72%,#3a3f4a 72% 100%)}
.kid .nm{font-family:var(--f-display);font-size:28px;max-width:100%;overflow-wrap:anywhere}
.kid .meta{display:flex;align-items:center;gap:6px;font-family:var(--f-pixel);font-weight:700;font-size:17px}
.note{font-size:15px;color:var(--ink-soft);text-align:center}

/* home */
.hello{font-family:var(--f-display);font-size:24px;min-width:0}
.avbtn{border:3px solid var(--ink);background:var(--chalk);border-radius:10px;padding:3px;box-shadow:0 3px 0 var(--ink);cursor:pointer;flex:none}
/* my big picture (pp-v57): box on the Play tab, choose, build one part, finished */
.homeduo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.homeduo.one{grid-template-columns:minmax(0,1fr)}
.hometile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 8px;text-align:center;min-width:0}
.hometile .kicker{font:700 11px var(--f-pixel);text-transform:uppercase;letter-spacing:.05em;color:var(--kick);white-space:nowrap}
.hometile .s{font-size:13px;color:var(--ink-soft);font-weight:700;line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hometile .btn{width:100%}
.picbox .pthumb{flex:none;padding:3px;border:2px solid var(--ink);border-radius:8px;background:#fff;cursor:pointer;line-height:0}
.tripbox .tvis{display:flex;align-items:center;justify-content:center;gap:6px;height:60px;width:126px;border:2px solid var(--ink);border-radius:8px;background:#58b4e6;cursor:pointer}
.tripbox .te{font-size:30px;line-height:1}
.tripbox .tn{font:700 20px var(--f-pixel);color:#fff;text-shadow:0 2px 0 var(--ink)}
.picthumb{display:block}
.picicons{display:grid;grid-template-columns:repeat(3,40px);grid-auto-rows:30px;place-items:center;font-size:24px;line-height:1;width:120px;height:60px}
.picgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.piccard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);cursor:pointer;font:700 16px var(--f-body);color:var(--ink);min-width:0}
.piccard .picthumb{max-width:100%;height:auto!important}
.piccard.on{background:var(--sun)}
.piccard:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.picpanel{padding:8px;display:flex;justify-content:center;background:var(--sky-deep)}
.piccv{display:block;touch-action:none;border:2px solid var(--ink);background:#fff;max-width:100%;cursor:pointer;-webkit-user-select:none;user-select:none}
.bigbuild{display:flex;gap:10px;align-items:flex-start}
.bigbuild .picpanel{flex:none}
.bside{flex:0 0 124px;width:124px;min-width:0;display:flex;flex-direction:column;gap:6px}
.ptitle{font:700 14px var(--f-pixel);color:var(--kick);line-height:1.3}
.ovbox{line-height:0}
.picov{display:block;border:2px solid var(--ink);background:#fff;cursor:pointer;max-width:100%;height:auto!important}
.ovhint{font-size:12px;margin:0;line-height:1.25}
.picprog{display:flex;align-items:center;gap:8px;font:700 13px var(--f-pixel)}
.picprog .bar{flex:1;margin-top:0}
.picmsg{font-weight:700;margin:2px 0;line-height:1.3;font-size:15px}
.picmore:empty{display:none}
.picmore .btn{width:100%}
.pich{font-size:23px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blkico{width:18px;height:18px;background:#e0a052;border:2px solid var(--ink);border-radius:3px;display:inline-block;box-shadow:inset 0 3px 0 rgba(255,255,255,.35);flex:none}
.picres{gap:8px}
.picwords{font-family:var(--f-display);font-size:28px;line-height:1.2;margin:4px 0}
.picwords-l{width:100%;gap:8px}
.reply.picword{background:#fff;padding:8px 12px;font-size:18px}
.reply.picword.sel{background:var(--sun)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px;margin-top:8px}
.gpic{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.gpic .picthumb{border:2px solid var(--ink);border-radius:4px}
.gpic .gw{font-weight:700;font-size:13px;line-height:1.2}
.gpic .gl{font-size:12px}
/* the treasure journey (pp-v57) */
.tmap{flex:none;position:relative;margin:0 auto;width:max-content;border:3px solid var(--ink);border-radius:8px;overflow:hidden;line-height:0;background:#58b4e6}
.tcv{display:block}
.tlayer{position:absolute;inset:0;pointer-events:none}
.tpin{position:absolute;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--ink);display:grid;place-items:center;font:700 10px var(--f-pixel);color:var(--ink);line-height:1}
.tpin.done{background:#fff3c4;width:22px;height:22px}
.tpin.next{background:var(--sun);animation:tpulse 1.2s infinite}
@keyframes tpulse{50%{transform:translate(-50%,-50%) scale(1.3)}}
.tpin.chest{width:24px;height:22px;border-radius:6px;background:#fff3c4}
.tpin .tico{font-size:13px;line-height:1}
.tme{position:absolute;transform:translate(-50%,-100%);line-height:0;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35));z-index:2}
.tme.go{transition:left 1.4s ease-in-out,top 1.4s ease-in-out}
.postcard{display:flex;gap:10px;align-items:center;padding:10px 12px;margin-top:10px}
.postcard .pci{font-size:34px;width:52px;height:52px;display:grid;place-items:center;background:#fff3c4;border:2px solid var(--ink);border-radius:10px;flex:none}
.postcard .pct{min-width:0;flex:1}
.postcard h2{font-size:20px;margin:0}
.postcard p{margin:2px 0 0;font-weight:700;font-size:15px;line-height:1.3}
.postcard .pcx{margin-top:5px;padding-left:8px;border-left:4px solid var(--sun);font-weight:600;font-size:14px;color:var(--ink-soft)}   /* pp-v84: the place text in the menu language */
.postcard .pcb{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.postcard .pcl{min-width:52px;min-height:34px;padding:2px 6px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 3px 0 var(--ink);font:700 13px/1.1 var(--f-pixel);cursor:pointer}
.postcard .pcl.on{background:var(--sun)}
.treasure .pcx{margin:6px 0 0;text-align:left;display:inline-block}
.tcount{font-size:16px}
.dialog.treasure{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.tbig{font-size:72px;line-height:1;animation:bump .8s}
.treasures{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px}
.treasures .tr{display:flex;flex-direction:column;align-items:center;padding:4px 0;border:2px dashed #b0bec5;border-radius:10px;opacity:.45;filter:grayscale(1)}
.treasures .tr.got{opacity:1;filter:none;border:2px solid var(--ink);background:#fff3c4}
.treasures .te{font-size:24px;line-height:1.2}
.treasures .tl{font:700 11px var(--f-pixel)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sec-h h2{font-size:24px}
.lessons{display:flex;flex-direction:column;gap:10px}
.les{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px 12px;background:var(--card);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink)}
.les .ico{font-size:30px;width:48px;height:48px;display:grid;place-items:center;background:var(--sky);border:2px solid var(--ink);border-radius:8px;flex:none}
.les .txt{flex:1 1 150px;min-width:0}
.les .t{font-family:var(--f-display);font-size:19px}
.les .s{font-size:14px;color:var(--ink-soft)}
.les .acts{display:flex;gap:8px;flex:none;margin-left:auto}
.les.locked{opacity:.6;box-shadow:0 4px 0 rgba(28,42,57,.45);border-color:rgba(28,42,57,.45)}
.bar{height:10px;background:rgba(28,42,57,.12);border-radius:5px;overflow:hidden;margin-top:6px}
.bar b{display:block;height:100%;background:var(--grass)}
.shopcard{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;width:100%}
.shopcard .e{font-size:44px;flex:none}
.shopcard .t{font-family:var(--f-display);font-size:22px}
.lockbar{display:flex;gap:5px;margin-top:6px}
.lockbar i{flex:1;height:16px;border:2px solid var(--ink);border-radius:4px;background:var(--chalk)}
.lockbar i.d{background:var(--grass)}

/* learn cards */
.page{display:flex;flex-direction:column;gap:16px}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lcard{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 8px 12px;background:var(--card);border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink);cursor:pointer;text-align:center;min-height:124px;min-width:0}
.lcard:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.lcard .pic{font-size:52px;line-height:1}
.lcard .w{font-weight:700;font-size:23px;line-height:1.15;overflow-wrap:anywhere}
.lcard .pic.sm{font-size:30px;letter-spacing:-.04em;line-height:1.15;max-width:100%;overflow-wrap:anywhere}
.lcard .blk{font-size:58px}
.lcard.wide{grid-column:1/-1;flex-direction:row;justify-content:flex-start;text-align:left;min-height:0;padding:10px 14px;gap:14px}
.lcard.wide .w{font-size:24px;flex:1}
.lcard.heard{background:#f1fbf5}
.lcard .tick{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;background:var(--good);border:3px solid var(--ink);color:#fff;display:none;place-items:center;font-size:15px;font-weight:700}
.lcard.heard .tick{display:grid}
.ncard .d{font-family:var(--f-display);font-size:42px;width:56px;text-align:center;flex:none}
.ncard .set{justify-content:flex-start;font-size:15px;max-width:120px;gap:3px;flex:none}
.hint{text-align:center;color:var(--ink-soft);font-size:15px}
.intro{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:8px}
.intro .lines{display:flex;flex-direction:column;gap:10px;width:100%}
.intro .bubble{flex:none}

/* questions + options */
.q{display:flex;flex-direction:column;gap:12px}
.scene{font-size:54px;text-align:center;line-height:1.15;letter-spacing:.06em}
.scene.rep{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:42px;letter-spacing:0}
.scene.blocks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:40px}
.word-big{font-weight:700;font-size:54px;text-align:center;background:var(--card);border:3px dashed var(--ink);border-radius:14px;padding:4px 10px}
.word-big.long{font-size:42px}.word-big.xl{font-size:34px}
.prompt{display:flex;align-items:center;gap:10px;justify-content:center;text-align:center}
.prompt p{font-weight:700;font-size:24px}
.blank{display:inline-block;min-width:2.4em;border-bottom:4px solid var(--kick);margin:0 .12em;text-align:center;color:var(--good)}
.blank.filled{border-color:var(--good)}
.dots{display:flex;gap:6px;justify-content:center}
.dot{width:16px;height:16px;border:2px solid var(--ink);background:var(--chalk);border-radius:3px}
.dot.done{background:var(--grass)}
.dot.now{background:var(--sun)}
.q-hint{text-align:center;color:var(--ink-soft);font-size:15px}
.opts{display:grid;gap:12px}
.opts.two,.opts.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts.list{grid-template-columns:minmax(0,1fr)}
.opt{position:relative;background:var(--card);border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink);transition:transform .07s,box-shadow .07s;min-width:0}
.opt.vis{min-height:104px;display:grid;place-items:center;padding:8px;cursor:pointer}
.opt.vis:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.opt.txt{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px}
.opt-main{flex:1;min-width:0;text-align:left;background:none;border:0;padding:12px 10px;font-weight:700;font-size:22px;cursor:pointer;border-radius:10px}
.opt .pic{font-size:56px;line-height:1}
.opt .num{font-family:var(--f-display);font-size:52px;line-height:1}
.opt .blk{font-size:62px}
.opt.right{background:var(--good-bg);border-color:var(--good);box-shadow:0 5px 0 var(--good)}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad);box-shadow:0 5px 0 var(--bad);opacity:.65;animation:shake .4s}
.opt.reveal{animation:pop .5s}
.opt.locked:not(.right):not(.wrong){opacity:.5}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
@keyframes pop{40%{transform:scale(1.07)}}
.blk{display:inline-block;width:1em;height:1em;background:var(--c);border:2px solid rgba(28,42,57,.6);border-radius:3px;box-shadow:inset 0 .14em 0 rgba(255,255,255,.4),inset 0 -.14em 0 rgba(0,0,0,.18);vertical-align:middle;flex:none}
.set{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;font-size:28px}

/* match */
.match{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.match .col{display:flex;flex-direction:column;gap:10px}
.mt{min-height:58px;background:var(--card);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);font-weight:700;font-size:23px;cursor:pointer}
.mt.d{font-family:var(--f-display);font-size:30px}
.mt.sel{background:var(--sun)}
.mt.ok{background:var(--good-bg);border-color:var(--good);box-shadow:0 4px 0 var(--good);color:var(--good)}
.mt.bad{animation:shake .4s;background:var(--bad-bg)}

/* build */
.line{min-height:78px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;border:3px dashed var(--ink);border-radius:14px;background:rgba(255,255,255,.6)}
.line .ph{color:var(--ink-soft);font-size:16px;width:100%;text-align:center}
.line.right{border-style:solid;border-color:var(--good);background:var(--good-bg)}
.line.bad{animation:shake .4s;border-color:var(--bad)}
.pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tile{font-weight:700;font-size:24px;padding:9px 16px;background:var(--sun);border:3px solid var(--ink);border-radius:10px;box-shadow:0 4px 0 var(--ink);cursor:pointer}
.tile.in{background:var(--chalk)}
.line.rw .tile,.pool.rw .tile{font-size:21px;padding:6px 12px}
.line.rw,.pool.rw{gap:7px}
.srcbox{margin:0 0 10px;padding:8px 12px;border:3px solid var(--sky-deep);border-radius:14px;background:var(--sky);font-weight:700;font-size:20px;line-height:1.25;text-align:center}
.tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}

/* say */
.sayit{font-weight:700;font-size:28px;line-height:1.45;text-align:center;padding:16px 12px}
.sayit span{border-radius:6px;padding:0 3px;transition:background .15s}
.sayit span.on{background:var(--sun)}
.bar.sayalong{max-width:260px;margin:4px auto 0;width:100%}
.mic{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink-soft);font-weight:700}
.mic .ring{width:84px;height:84px;border-radius:50%;background:#c3ccd5;color:#fff;border:3px solid var(--ink);display:grid;place-items:center}
.mic.on .ring{background:var(--kick);animation:pulse 1s infinite}
.mic .ring .ic{width:40px;height:40px}
.tip{background:var(--sun);border:3px solid var(--ink);border-radius:12px;padding:8px 12px;font-weight:700;text-align:center}

/* paint */
.kit{width:100%;max-width:230px;height:auto;margin:0 auto;display:block}
.kit .part{stroke:var(--ink);stroke-width:4;stroke-linejoin:round;transition:fill .3s}
.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.sw{aspect-ratio:1;width:100%;border:3px solid var(--ink);border-radius:10px;box-shadow:0 4px 0 var(--ink),inset 0 6px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.15);background:var(--c);cursor:pointer;padding:0}
.sw:active{transform:translateY(3px)}
.sw.wrong{animation:shake .4s}
.paint-q{display:flex;align-items:center;gap:10px;justify-content:center;text-align:center;font-weight:700;font-size:23px}
/* lesson 3: the player you tap (page type "body") */
.bodybox{display:flex;justify-content:center}
.bodyfig{display:block;height:min(46vh,340px);width:auto;max-width:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.bodybox.small .bodyfig{height:min(36vh,290px)}
.bodyfig .hit{fill:var(--sun);fill-opacity:0;stroke:none;pointer-events:all;cursor:pointer;transition:fill-opacity .2s}
.bodyfig .bp.hl .hit{fill-opacity:.6}
.bodyfig .bp.ok .hit{fill:var(--good);fill-opacity:.5}
.bodyfig .bp.bad .hit{fill:var(--bad);fill-opacity:.5}
.bodyfig .bp.hint .hit{fill-opacity:.45;animation:bphint 1s ease-in-out infinite}
@keyframes bphint{0%,100%{fill-opacity:0}50%{fill-opacity:.7}}
.bodyfig [data-paint]{transition:fill .3s}
.paint-q .bw{font-family:var(--f-display);font-weight:400;font-size:34px}
.chip-b{background:var(--chalk);border:3px solid var(--ink);border-radius:999px;padding:6px 16px;font:700 19px var(--f-body);color:var(--ink);box-shadow:0 3px 0 var(--ink);cursor:pointer;min-height:44px}
.chip-b.done{background:var(--good-bg);border-color:var(--good);box-shadow:0 3px 0 var(--good)}
.chip-b:active{transform:translateY(2px)}
/* lesson 4: pick your favourite (page type "pick") */
.opts.pick{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.opt.pk{min-height:92px;gap:2px;padding:6px 4px}
.opt.pk .pic{font-size:42px}
.opt.pk .pw{font-weight:700;font-size:17px;line-height:1.1}
/* lesson 5: Cubo's Café (page type "tray") and the Prize Shop opening */
.cafe-sign{align-self:center;background:var(--kick);color:#fff;font-family:var(--f-display);font-size:20px;letter-spacing:.03em;padding:4px 16px;border:3px solid var(--ink);border-radius:10px;box-shadow:0 3px 0 var(--ink);text-shadow:0 2px 0 rgba(0,0,0,.2)}
.tray{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;min-height:76px;padding:10px 12px;background:#e9d3b4;border:3px solid var(--ink);border-radius:999px;box-shadow:0 5px 0 var(--ink),inset 0 4px 0 rgba(255,255,255,.4);transition:background .2s}
.tray.right{background:var(--good-bg)}
.tray.bad{background:var(--bad-bg);animation:shake .4s}
.tray .slot{width:54px;height:54px;border-radius:50%;border:3px dashed rgba(28,42,57,.35);background:rgba(255,255,255,.55);display:grid;place-items:center;font-size:34px;line-height:1;padding:0}
.tray .slot.full{border:3px solid var(--ink);background:#fff;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mi{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;background:var(--card);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);cursor:pointer;min-width:0}
.mi:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.mi .pic{font-size:34px;line-height:1.1}
.mi .pw{font-weight:700;font-size:15px;line-height:1.35;white-space:nowrap;max-width:100%;overflow:hidden}
.mi .pw.long{font-size:12.5px;letter-spacing:-.02em;white-space:normal;line-height:1.1;text-align:center}
.shopopen{display:flex;align-items:center;gap:12px;background:var(--sun);text-align:left;font-size:19px}
.shopopen .e{font-size:40px}

/* chat */
.chat{display:flex;flex-direction:column;gap:10px}
.msg{display:flex;align-items:flex-end;gap:8px;max-width:90%;animation:in .3s ease-out}
.msg .b{background:var(--chalk);border:3px solid var(--ink);border-radius:16px 16px 16px 4px;padding:8px 12px;font-weight:700;font-size:20px;box-shadow:0 3px 0 var(--ink);min-width:0}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .b{background:#e3f0ff;border-radius:16px 16px 4px 16px}
@keyframes in{from{transform:translateY(8px);opacity:.3}}
.replies{display:flex;flex-direction:column;gap:10px}
.reply{text-align:left;font-weight:700;font-size:21px;padding:12px 14px;background:var(--sun);border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);cursor:pointer}
.reply:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.reply.wrong{animation:shake .4s;opacity:.5}

/* finish + result */
.result{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.title-xl{font-size:40px}
.big-score{font-family:var(--f-display);font-size:76px;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips span{background:var(--chalk);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;font-weight:700;font-size:16px}
.wonchip{display:flex;align-items:center;gap:8px;background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:6px 16px;font-family:var(--f-pixel);font-weight:700;font-size:24px;box-shadow:0 4px 0 var(--ink)}
.mailline{font-size:16px}

/* test */
.score{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.sb{font-family:var(--f-pixel);font-weight:700;background:var(--ink);color:var(--sun);padding:4px 10px;border-radius:6px;font-size:18px;white-space:nowrap;font-variant-numeric:tabular-nums}
.kicks{display:flex;gap:3px;flex-wrap:wrap;min-width:0}
.kicks i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);background:var(--chalk)}
.kicks i.g{background:var(--good)}
.kicks i.s{background:var(--bad)}
.kicks i.n{background:var(--sun)}
.kicks.big i{width:22px;height:22px}
.pitchbox{position:relative;height:190px;border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:linear-gradient(var(--sky-deep) 0 60%,var(--grass) 60% 100%);box-shadow:0 5px 0 var(--ink);flex:none;width:100%}
.goal{position:absolute;left:50%;top:14px;width:min(300px,90%);transform:translateX(-50%)}
.goal.shake{animation:netshake .5s}
@keyframes netshake{30%{transform:translateX(-50%) scaleY(1.05)}}
.keeper{position:absolute;left:50%;bottom:54px;width:48px;margin-left:-24px;transform-origin:50% 100%;transition:transform .35s ease-out}
.ball{position:absolute;left:50%;bottom:6px;width:42px;height:42px;margin-left:-21px;font-size:36px;line-height:42px;text-align:center;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.shout{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:58px;color:var(--sun);text-shadow:3px 3px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink);animation:pop .5s;pointer-events:none}
.shout.save{color:var(--chalk)}
.tq{display:flex;flex-direction:column;gap:12px}

/* shop */
.prizes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prize{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.prize .e{font-size:48px;line-height:1}
.prize .n{font-weight:700;font-size:18px;overflow-wrap:anywhere}
.price{display:flex;align-items:center;gap:6px;font-family:var(--f-pixel);font-weight:700;font-size:20px}

/* pin + parents */
.pinpad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:320px;margin:0 auto;width:100%}
.pinpad .btn{font-size:28px}
.pindots{display:flex;gap:12px;justify-content:center}
.pindots i{width:22px;height:22px;border:3px solid var(--ink);border-radius:5px;background:var(--chalk)}
.pindots i.f{background:var(--ink)}
.pindots.bad{animation:shake .4s}
.parent{font-size:16px}
.parent .panel h3{font-size:22px;margin-bottom:10px}
.parent .panel{display:flex;flex-direction:column;gap:10px}
.form{display:grid;gap:10px}
.field{display:grid;gap:4px;min-width:0}
.field label{font-size:14px;font-weight:700;color:var(--ink-soft)}
.field input,.field select,.field textarea{font:inherit;font-size:17px;padding:9px 11px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);min-width:0;width:100%}
.field textarea{resize:vertical;min-height:110px;line-height:1.35}
.techinfo{margin:0;padding:9px 11px;border:2px solid var(--line);border-radius:8px;background:#f4f7fb;color:var(--ink-soft);font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;max-height:150px;overflow:auto}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.plist{display:flex;flex-direction:column}
.item{display:flex;gap:8px 12px;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.item:last-child{border-bottom:0}
.item .grow{flex:1;min-width:0}
.chip{font-family:var(--f-pixel);font-weight:700;font-size:13px;padding:2px 8px;border-radius:99px;border:2px solid currentColor;white-space:nowrap}
.chip.ok{color:var(--good)}
.chip.wait{color:var(--wait)}
.chip.no{color:var(--bad)}
.prow{display:grid;grid-template-columns:58px minmax(0,1fr) 86px 44px;gap:8px;align-items:center}
.prow input{font:inherit;font-size:17px;padding:8px;border:2px solid var(--ink);border-radius:8px;min-width:0;width:100%;background:#fff;color:var(--ink)}
.prow .del{width:44px;height:44px;border:2px solid var(--ink);border-radius:8px;background:var(--bad-bg);cursor:pointer;display:grid;place-items:center;padding:0}
.statline{font-family:var(--f-pixel);font-size:15px}
.kidhead{display:flex;align-items:center;gap:10px}
.kidhead h4{margin:0;font-family:var(--f-display);font-weight:400;font-size:22px}
hr.sep{border:0;border-top:2px dashed var(--line);margin:6px 0}

/* overlays */
.overlay{position:absolute;inset:0;background:rgba(28,42,57,.55);display:grid;place-items:center;padding:20px;z-index:20}
.dialog{max-width:360px;width:100%;display:grid;gap:16px;text-align:center}
/* installing (pp-v58): the steps for iPhone / Android / in-app browsers, the warning inside Instagram, Facebook … */
.dialog.idialog{gap:10px;text-align:left;max-height:calc(100% - 20px);overflow:auto}
.dialog.idialog h2{font-size:22px;text-align:center}
.dialog.idialog .lead{font-size:17px;margin:0}
.isteps{margin:0;padding-left:22px;display:grid;gap:8px;font-weight:700;font-size:16px;line-height:1.35}
.isteps .ic-i{display:inline-block;vertical-align:-5px;line-height:0}
.dialog.idialog .row{gap:8px;flex-wrap:wrap}
.inapp{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff3c4;border-color:var(--sun-dark);margin-bottom:10px;font-size:15px;line-height:1.3}
.inapp .e{font-size:24px;flex:none}
/* every language its own (pp-v60): the flag ribbon, the guide, the stickers */
:root{--lc1:#012169;--lc2:#ffffff;--lc3:#c8102e}
.ribbon{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--lc1) 0 33.4%,var(--lc2) 0 66.7%,var(--lc3) 0);box-shadow:0 0 0 1px rgba(28,42,57,.25)}
.top.ltop{background:linear-gradient(90deg,var(--lc1) 0 33.4%,var(--lc2) 0 66.7%,var(--lc3) 0) left bottom/100% 4px no-repeat}
.coursechip{background-image:linear-gradient(180deg,var(--lc1) 0 33.4%,var(--lc2) 0 66.7%,var(--lc3) 0);background-size:8px 100%;background-repeat:no-repeat;background-position:left;padding-left:18px}
.dialog.sticker{gap:10px}
.stk-h{display:flex;align-items:center;gap:12px;text-align:left}
.stk-h .kicker{font:700 12px var(--f-pixel);text-transform:uppercase;letter-spacing:.06em;color:var(--kick)}
.stk-n{font-family:var(--f-display);font-size:20px;line-height:1.15}
.stk-i{font-size:64px;line-height:1.1}
.stk-t{font-weight:700;font-size:19px;line-height:1.35;margin:0}
.guide{line-height:0;flex:none}
.album .ribbon{margin:-2px 0 8px}
.alb-h{display:flex;align-items:center;gap:10px;margin:4px 0 8px;font-size:14px;line-height:1.3}
.stickers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.stickers .stk{display:flex;flex-direction:column;align-items:center;padding:4px 0;border:2px dashed #b0bec5;border-radius:10px;background:#fff;cursor:pointer;font:inherit;color:inherit}
.stickers .stk.got{border:2px solid var(--ink);background:#fff3c4}
.stickers .si{font-size:24px;line-height:1.2}
.stickers .stk:not(.got) .si{font:700 20px var(--f-pixel);color:#b0bec5}
.stickers .sl{font:700 11px var(--f-pixel)}
details.gets{margin:6px 0 10px;border:2px dashed #cfd8dc;border-radius:10px;padding:8px 10px;background:#fffdf3}
details.gets summary{font-weight:700;cursor:pointer}
details.gets ul{margin:8px 0 0;padding-left:0;list-style:none;display:grid;gap:6px;font-size:15px;line-height:1.35}
.dlg-text{font-weight:700;font-size:22px}
#fx{position:fixed;inset:0;pointer-events:none;z-index:30;width:100%;height:100%}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:40;font-weight:700;max-width:calc(100% - 32px);text-align:center;font-size:16px}
#toast.low{top:calc(env(safe-area-inset-top,0px) + 104px)} /* below the lesson header, so the mistake counter stays visible */
.loading{flex:1;display:grid;place-items:center;align-content:center;gap:14px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* app shell (no host page around us here) */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
img{max-width:100%}
body{-webkit-user-select:none;user-select:none}
input,select{-webkit-user-select:text;user-select:text}

/* speaking check */
.micbtn{width:92px;height:92px;border-radius:50%;border:3px solid var(--ink);background:var(--kick);color:#fff;box-shadow:0 5px 0 var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;margin:0 auto}
.micbtn .ic{width:44px;height:44px}
.micbtn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.micbtn.on{animation:pulse 1s infinite;background:var(--bad)}
.micbtn:disabled{background:#c3ccd5;border-color:#8f9caa;box-shadow:0 5px 0 #8f9caa}
.micbtn.sm{width:56px;height:56px;box-shadow:0 4px 0 var(--ink)}
.micbtn.sm .ic{width:28px;height:28px}
.heard{text-align:center;font-size:16px;color:var(--ink-soft);min-height:22px}
.sayit span.ok{background:var(--good-bg);color:var(--good);box-shadow:inset 0 -3px 0 var(--good)}
.sayit span.miss{box-shadow:inset 0 -3px 0 var(--bad)}
.stars{display:flex;gap:6px;justify-content:center;font-size:30px;min-height:36px}
.voice-row{display:flex;align-items:center;gap:12px;justify-content:center}
.voice-row .muted{font-weight:700}

/* connect + device */
.codein{font:inherit;font-size:22px;padding:12px 14px;border:3px solid var(--ink);border-radius:10px;width:100%;background:#fff;color:var(--ink);text-align:center;letter-spacing:.04em}
.sync{font-family:var(--f-pixel);font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;border:2px solid currentColor;white-space:nowrap}
.sync.ok{color:var(--good)}
.sync.off{color:var(--wait)}
/* worlds: app colours */
:root[data-theme="space"]{--sky:#e6e3ff;--sky-deep:#cfc9fb;--grass:#5b4bb7;--grass-dark:#4a3c9c}
:root[data-theme="ocean"]{--sky:#d6f3f8;--sky-deep:#ade3ee;--grass:#1f8fb8;--grass-dark:#18789b}
:root[data-theme="castle"]{--sky:#f2e8fb;--sky-deep:#e0cff4;--grass:#4c9a52;--grass-dark:#3f8445}
:root[data-theme="racing"]{--sky:#eceff3;--sky-deep:#d4dbe3;--grass:#4a5361;--grass-dark:#3b4350}
/* worlds: test games */
.arena > div{position:absolute;line-height:1;transition:left .6s cubic-bezier(.3,.7,.3,1),bottom .6s cubic-bezier(.3,.7,.3,1),top .6s,transform .6s,opacity .4s}
.arena .ac,.arena .tg,.arena .fx,.arena .prize{font-size:44px}
.arena .fx{opacity:0}
.arena .prize{opacity:0;font-size:22px}
.ar-space{background:radial-gradient(circle at 18% 30%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 72% 18%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 40% 62%,#ffe08a 0 1.5px,transparent 2px),radial-gradient(circle at 88% 70%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 10% 80%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 58% 40%,#fff 0 1px,transparent 1.5px),linear-gradient(#141a46,#2f3486)}
.ar-space .tg{left:62%;top:14px;font-size:52px}
.ar-space .ac{left:calc(50% - 22px);bottom:10px}
.ar-space .ac span{display:inline-block;transform:rotate(-45deg)}
.ar-space .fx{left:-60px;top:40px}
.ar-space.win .ac{bottom:118px;left:calc(62% + 4px);transform:scale(.55)}
.ar-space.lose .ac{transform:rotate(-14deg);bottom:22px}
.ar-space.lose .fx{left:110%;top:90px;opacity:1}
.ar-ocean{background:linear-gradient(#7fd3f0,#2b93d1 70%,#e8c582 70%,#f2d49b)}
.ar-ocean .tg{right:14%;bottom:12px}
.ar-ocean .prize{right:calc(14% + 14px);bottom:30px}
.ar-ocean .ac{left:8%;top:40px}
.ar-ocean .ac span{display:inline-block;transform:scaleX(-1)}
.ar-ocean .fx{left:calc(50% - 22px);top:56px;transform:scale(.2)}
.ar-ocean.win .ac{left:calc(86% - 70px);top:96px}
.ar-ocean.win .prize{opacity:1;transform:scale(1.6) translateY(-14px)}
.ar-ocean.lose .fx{opacity:1;transform:scale(1.4)}
.ar-ocean.lose .ac{left:2%;top:30px}
.ar-castle{background:linear-gradient(#8fd0fa,#d7efff 75%,#43b04d 75%)}
.ar-castle .tg{left:calc(68% - 34px);top:18px}
.ar-castle .ring{display:block;width:68px;height:68px;border-radius:50%;border:9px solid #ffc83a;box-shadow:0 0 0 3px #1c2a39,inset 0 0 0 3px #1c2a39}
.ar-castle .ac{left:4%;bottom:12px}
.ar-castle .ac span{display:inline-block;transform:scaleX(-1)}
.ar-castle .fx{left:calc(68% - 20px);top:120px}
.ar-castle.win .ac{left:calc(68% - 22px);bottom:auto;top:30px;transform:scale(.9)}
.ar-castle.win .tg .ring{border-color:#ffe680}
.ar-castle.lose .ac{left:calc(68% - 22px);bottom:8px}
.ar-castle.lose .fx{opacity:1}
.ar-racing{background:repeating-linear-gradient(90deg,#e8ecf1 0 22px,transparent 22px 44px) 0 92px/100% 6px no-repeat,linear-gradient(#43b04d 0 14px,#4a5361 14px 176px,#43b04d 176px)}
.ar-racing .tg{left:34%;top:30px}
.ar-racing .ac{right:6%;bottom:30px}
.ar-racing .fx{left:34%;top:30px}
.ar-racing.win .ac{right:74%}
.ar-racing.lose .tg{left:-30%}
.ar-racing.lose .fx{opacity:1}
/* worlds: chooser */
.worlds{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.world{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--card);border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink);cursor:pointer;text-align:left;font:inherit;color:inherit}
.world:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.world.on{background:var(--good-bg);border-color:var(--good);box-shadow:0 5px 0 var(--good)}
.world .wt{font-family:var(--f-display);font-size:23px;line-height:1.1}
.world .ws{font-size:15px;color:var(--ink-soft);line-height:1.3}
.world .wi{font-size:30px;margin-left:auto;flex:none}
.thbtn{font-size:24px}
/* courses: language and level */
.coursechip{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;background:var(--card);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);font:inherit;color:inherit;text-align:left;cursor:pointer}
.coursechip .f{font-size:26px}
.coursechip .chg{font-weight:700;font-size:15px;color:var(--kick)}
.coursechip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.world:disabled{opacity:.55;cursor:default;box-shadow:0 3px 0 rgba(28,42,57,.4)}
.world .flag{font-size:40px;line-height:1;flex:none}
.world .lvl{font-size:34px;line-height:1;flex:none;width:44px;text-align:center}
.langrow .wi{font-size:14px}
.coursechip .grow{flex:1;min-width:0}
/* sign in */
.agree{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.35}
.agree input{width:24px;height:24px;flex:none;margin-top:2px}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--ink-soft);text-decoration:underline;font:inherit;font-size:16px;cursor:pointer}
.note a{color:var(--ink-soft)}
/* lesson 6: the house (body page with fig:'house') and on / under / in / next to */
.bodybox.fig-house .bodyfig,.bodybox.fig-house.small .bodyfig{height:auto;width:100%;max-width:460px;max-height:48vh}
.bodyfig .friend{animation:friend .5s ease-out}
@keyframes friend{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.bodyfig .friend{transform-box:fill-box;transform-origin:center}
.placebox{display:flex;justify-content:center}
.placefig{display:block;width:100%;max-width:420px;height:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.placefig .sp{fill:#ffffff;fill-opacity:.35;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:5 4;cursor:pointer;pointer-events:all;transition:fill .2s}
.placefig .spot:active .sp{fill:var(--sun);fill-opacity:.6}
.placefig .spot.bad .sp{fill:var(--bad);fill-opacity:.5;animation:shake .4s}
.placefig .spot.hint .sp{fill:var(--sun);fill-opacity:.45;animation:spothint 1s ease-in-out infinite}
@keyframes spothint{0%,100%{fill-opacity:.15}50%{fill-opacity:.75}}
.hand{display:grid;place-items:center;width:72px;height:72px;font-size:46px;line-height:1;background:var(--card);border:3px dashed var(--ink);border-radius:50%}
.scene.placescene{display:block;margin:0 auto;width:min(280px,86%);letter-spacing:0}
.scene.placescene svg{display:block;width:100%;height:auto}
.pmini{display:block;flex:none;width:132px}
.pmini svg{display:block;width:100%;height:auto}
.lcard.wide .pmini{width:128px}

/* lesson 7: dress for the weather (page type "dress") */
/* the player (left) and the clothes (right) side by side, so every button is on the screen */
.dresswrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch}
.dressbox{position:relative;min-height:230px;border:3px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 5px 0 var(--ink)}
.dressfig{position:absolute;inset:0;z-index:1;display:flex;justify-content:center;align-items:flex-end;padding:8px 4px 0}
.dressfig .bodyfig{height:auto;width:100%;max-height:100%}
.dressorder .bt{font-size:17px;line-height:1.3}
.menu.dressmenu{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-content:start}
.dressmenu .mi{padding:3px 2px;gap:0}
.dressmenu .mi .pic{font-size:26px}
.dressmenu .mi .pw{font-size:13.5px}
.dressmenu .mi .pw.long{font-size:12px}
.wx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;background:#5cbf60;border-top:3px solid rgba(28,42,57,.25)}
.wx .sky{position:absolute;top:6px;left:8px;font-size:36px;line-height:1}
.wx .f{position:absolute;display:block;font-style:normal;line-height:1}
.wx-sunny{background:linear-gradient(#8fd3ff,#e6f6ff)}
.wx-sunny .sky{animation:sunspin 14s linear infinite}
.wx-rainy{background:linear-gradient(#8a9fb2,#d3dde6)}
.wx-rainy .f{width:3px;height:16px;background:#3b7fc4;border-radius:2px;opacity:.75;animation:wxrain .9s linear infinite}
.wx-snowy{background:linear-gradient(#c3d6e8,#f7fbff)}
.wx-snowy::after{background:#ffffff;border-top-color:rgba(28,42,57,.15)}
.wx-snowy .f{color:#fff;font-size:17px;text-shadow:0 0 2px #6f98bf;animation:wxsnow 4s linear infinite}
.wx-windy{background:linear-gradient(#a6d8f2,#eaf7ff)}
.wx-windy .f{font-size:22px;animation:wxwind 2.6s linear infinite}
.wx-cloudy{background:linear-gradient(#b4c3d1,#e8eef3)}
.wx-cloudy .f{font-size:40px;opacity:.9;animation:wxcloud 12s linear infinite}
@keyframes sunspin{to{transform:rotate(360deg)}}
@keyframes wxrain{from{transform:translateY(-320px)}to{transform:translateY(320px)}}
@keyframes wxsnow{from{transform:translate(-14px,-320px) rotate(0)}to{transform:translate(14px,320px) rotate(200deg)}}
@keyframes wxwind{from{transform:translate(-420px,-30px) rotate(0)}to{transform:translate(420px,30px) rotate(540deg)}}
@keyframes wxcloud{from{transform:translateX(-160px)}to{transform:translateX(160px)}}
.mi.on{background:var(--good-bg);border-color:var(--good);box-shadow:0 4px 0 var(--good)}
.mi.wrong{animation:shake .4s}
/* lesson 8: the sports bag (tray page with bag:true) */
.tray.bag{background:#7fb3ff;border-radius:22px;box-shadow:0 5px 0 var(--ink),inset 0 6px 0 rgba(255,255,255,.35)}
.tray.bag.right{background:var(--good-bg)}

/* lesson 9: clocks (page type "clock", mini clocks in questions, answers, cards and pick) */
.clock{display:block;width:100%;height:auto}
.clockmini{display:inline-block;line-height:0}
.clockmini .clock{width:88px}
.scene.clockscene .clock{width:124px;margin:0 auto}
.opt.vis .clockmini .clock{width:min(26vw,104px)}
.lcard .clockmini .clock{width:66px}
.lcard.wide .clockmini .clock{width:56px}
.opt.pk .clockmini .clock{width:62px}
.opts.pick.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.clockbox{display:flex;justify-content:center}
.clockbox .clock{width:min(72vw,40vh,300px)}
.clock .hh,.clock .mh{transform-origin:100px 100px;transition:transform .7s cubic-bezier(.3,1.35,.5,1)}
.clock .cn{cursor:pointer}
.clock .cn .hit{fill:var(--sun);fill-opacity:0;transition:fill-opacity .2s}
.clock .cn.ok .hit{fill:var(--good);fill-opacity:.5}
.clock .cn.bad .hit{fill:var(--bad);fill-opacity:.5}
.clock .cn.hint .hit{fill-opacity:.45;animation:bphint 1s ease-in-out infinite}
/* lesson 9: put the day in order (build page with phrases:true) */
.line.phr{flex-direction:column;align-items:stretch}
.line.phr .tile{text-align:left}
.phr .tile{font-size:19px;padding:8px 12px}
/* lesson 10: the question wheel (page type "spin"), chatting with a new friend, the last finish page */
.wheelwrap{position:relative;align-self:center;width:min(230px,26vh);height:min(230px,26vh);flex:none;margin-top:12px}
.wheel{position:absolute;inset:0;border-radius:50%;border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform 2.5s cubic-bezier(.15,.85,.25,1)}
.wheel .wl{position:absolute;transform:translate(-50%,-50%);font-size:min(30px,4vh);line-height:1}
.wheel::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--chalk);border:4px solid var(--ink)}
.pointer{position:absolute;left:50%;top:-14px;z-index:2;width:0;height:0;margin-left:-14px;border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--ink)}
.qcard{display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;padding:10px 14px;background:var(--chalk);border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);text-align:center;font-weight:700;font-size:21px}
.qcard .qp{font-size:36px;line-height:1}
.chat-pic{font-size:34px;line-height:1;flex:none}
.finote{color:var(--kick)}

/* level 2, lesson 1: the classroom (body page with fig:'classroom') */
.bodybox.fig-classroom .bodyfig,.bodybox.fig-classroom.small .bodyfig{height:auto;width:100%;max-width:460px;max-height:48vh}
/* level 2, lesson 2: this / that (near and far things) */
.nf{display:flex;align-items:center;justify-content:center;gap:6px;line-height:1}
.nf.near-s{flex-direction:column;gap:2px}
.nf .nfh{font-size:34px}
.nf.near-s .nfi{font-size:58px;letter-spacing:-.04em}
.nf.far-s{align-items:flex-start}
.nf.far-s .nfh{align-self:center}
.nf.far-s .nfg{width:70px;height:2px;margin-top:22px;border-top:3px dotted var(--ink-soft);align-self:flex-start}
.nf.far-s .nfi{font-size:24px;letter-spacing:-.04em;padding-top:8px}
.nf.scene{min-height:96px}
.nf.mini{flex:none;min-width:64px}
.nf.mini .nfh{font-size:22px}
.nf.mini.near-s .nfi{font-size:30px}
.nf.mini.far-s .nfi{font-size:17px;padding-top:2px}
.nf.mini.far-s .nfg{width:22px;margin-top:10px}
/* level 2, lesson 2: whose is it? (page type "sort") */
.sortitem{display:flex;justify-content:center;min-height:70px}
.sortitem .pic{font-size:60px;line-height:1.1;animation:pop .4s}
.bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bin{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 10px;min-height:150px;background:#e9d3b4;border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink),inset 0 -26px 0 rgba(0,0,0,.06);cursor:pointer;min-width:0}
.bin:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.bin .bl{font-weight:700;font-size:16px;max-width:100%;overflow-wrap:anywhere}
.bin .pic{font-size:40px;line-height:1.2}
.bin .got{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-size:24px;line-height:1.1}
.bin.wrong{animation:shake .4s;background:var(--bad-bg)}

/* level 2, lesson 3: the town map (body page with fig:'town') */
.bodybox.fig-town .bodyfig,.bodybox.fig-town.small .bodyfig{height:auto;width:100%;max-width:460px;max-height:50vh}
/* level 2, lesson 4: shapes */
.shapemini{display:inline-block;line-height:0}
.shapemini .shape{width:80px;height:80px;display:block}
.scene.shapescene .shape{width:118px;height:118px;margin:0 auto}
.scene.shapes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.scene.shapes .shape{width:54px;height:54px}
.opt.vis .shapemini .shape{width:min(24vw,96px);height:min(24vw,96px)}
.lcard .shapemini .shape{width:64px;height:64px}
.lcard.wide .shapemini .shape{width:54px;height:54px}
.opt.pk .shapemini .shape{width:52px;height:52px}
.bin .shapemini .shape{width:44px;height:44px}
/* short phones: hide the café / bag sign so the whole menu fits on the screen */
@media (max-height:700px){.cafe-sign{display:none}.tray{min-height:64px;padding:5px 10px}.tray .slot{width:48px;height:48px;font-size:30px}}

/* level 2, lesson 5: tens and ones */
.tensmini{display:inline-block;line-height:0}
.tensmini .tens{height:46px;width:auto;display:block}
.lcard .tensmini.card .tens{height:50px;max-width:120px}
.scene.tensscene .tens{height:104px;width:auto;max-width:100%;margin:0 auto}
.tensbox{display:flex;align-items:flex-end;justify-content:center;gap:16px;min-height:150px;padding:12px;background:var(--chalk);border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink)}
.tensview{display:flex;align-items:flex-end;min-height:120px}
.tensview .tens{height:120px;width:auto;max-width:62vw}
.tensview.bad{animation:shake .4s}
.tensnum{font-family:var(--f-pixel);font-weight:700;font-size:44px;min-width:70px;text-align:center}
.btn.tb{gap:6px}
.tenrod{display:inline-block;width:11px;height:34px;border:2px solid var(--ink);background:repeating-linear-gradient(#fb8c00 0 2.6px,var(--ink) 2.6px 3.4px)}
.oneblk{display:inline-block;width:14px;height:14px;border:2px solid var(--ink);background:#1e66f5}
/* level 2, lesson 6: many boxes (the days of the week) */
.bins.many{gap:6px}
.bins.many .bin{min-height:86px;padding:6px 2px 8px}
.bins.many .bin .pic{font-size:22px}
.bins.many .bin .bl{font-size:min(12.5px,3.1vw);letter-spacing:-.02em;overflow-wrap:normal;word-break:keep-all}
.bins.many .bin .got{font-size:22px}
/* level 2, lesson 7: dress up for a job (no weather) */
.wx-plain{background:linear-gradient(#ffe9c7,#fff8ec)}
.wx-plain::after{background:#e9d3b4;border-top-color:rgba(28,42,57,.2)}
/* level 2, lesson 9: feelings on the face (page type "mood") */
.moodface{display:flex;justify-content:center}
.moodsvg{display:block;width:min(56vw,230px,30vh);height:auto;background:linear-gradient(#e6f6ff,#ffffff);border:3px solid var(--ink);border-radius:26px;box-shadow:0 5px 0 var(--ink)}
.moodface.pop .moodsvg{animation:pop .35s}
.menu.moodmenu{grid-template-columns:repeat(3,minmax(0,1fr))}
.moodmenu .mi .pic{font-size:30px}
.mi.hint{animation:pulse .8s ease-in-out infinite;border-color:var(--sun)}
/* short phones (e.g. 360×640): smaller face and picture so the buttons below fit without scrolling */
@media (max-height:700px){
  .moodsvg{width:min(56vw,190px,22vh)}
  .moodmenu .mi{padding:3px 2px;gap:0}
  .moodmenu .mi .pic{font-size:24px}
  .moodmenu + .hint{display:none}
  .kit{max-width:min(230px,25vh)}
  .lcard{min-height:104px;padding:10px 6px 8px;gap:4px}
  .lcard .pic{font-size:44px}
  .lcard .w{font-size:21px}
  .lcard.wide{padding:7px 12px}
  .lcard.wide .pic{font-size:38px}
  .lcard.wide .w{font-size:21px}
  .lcard .pic.sm{font-size:26px}
  .page .scene{font-size:42px}
  .page .scene.rep{font-size:24px;gap:2px}
  .spk.big{width:84px;height:84px}
  .spk.big .ic{width:42px;height:42px}
  .q-hint{margin:2px 0 0}
  .opt.vis{min-height:90px}
  .opt.vis .clockmini .clock{width:min(24vw,82px)}
  .scene.clockscene .clock{width:104px}
  .opt.txt{padding:2px 6px 2px 2px}
  .opt-main{padding:8px;font-size:20px}
  .sayintro{display:none}
  .pinpad{gap:8px}
  .pinpad .btn{padding-top:9px;padding-bottom:9px}
  .sayit{font-size:22px;padding:10px}
  .micbtn{width:72px;height:72px}
  .micbtn .ic{width:36px;height:36px}
  .stars{min-height:0}
  .page .say-row{gap:10px}
  .page .say-row .bubble{font-size:18px;padding:7px 10px}
  .opts{gap:10px}
  .phr .tile{font-size:17px;padding:6px 10px}
  .pool.phr{gap:7px}
  .srcbox{font-size:17px;padding:6px 10px;margin-bottom:0}
  .line:not(.phr){min-height:54px;padding:6px;gap:6px}
  .pool:not(.phr){gap:6px}
  .line:not(.phr) .tile,.pool:not(.phr) .tile{font-size:20px;padding:4px 9px;border-width:2px;border-radius:8px;box-shadow:0 3px 0 var(--ink)}
}
@media (max-height:600px){
  .moodsvg{width:min(56vw,150px,17vh)}
  .kit{max-width:min(230px,21vh)}
  .moodface + .paint-q{font-size:17px;min-height:0}
}
/* "Your privacy" for kids */
.linkbtn.kidpriv{font-weight:700;font-size:15px}
.privlist{display:grid;gap:10px}
.privline{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;background:var(--card);border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);font:inherit;font-weight:700;font-size:18px;line-height:1.3;color:var(--ink);cursor:pointer}
.privline .pic{font-size:30px;flex:none;width:40px;text-align:center}
.privline:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
/* level 3, lesson 2: money and the pay page */
.moneymini{display:inline-block;line-height:0}
.moneymini .coinsvg{width:calc(var(--d) * 1.25px + 6px);height:auto}
.lcard .moneymini .coinsvg{width:calc(var(--d) * 1.5px + 8px)}
.moneymini .note{width:78px;height:auto}
.lcard .moneymini .note{width:70px}
.scene.moneyscene{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.scene.moneyscene .pic{font-size:46px;margin-left:8px}
.opt.vis .moneymini .note{width:min(26vw,96px)}
.shoprow{display:flex;align-items:center;gap:12px}
.shoprow .paint-q{flex:1;font-size:19px;justify-content:flex-start;text-align:left}
.pricetag{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px 8px;background:#fff8e6;border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);transform:rotate(-3deg)}
.pricetag .pic{font-size:40px;line-height:1.1}
.pricetag .pt{font-family:var(--f-display);font-size:26px;line-height:1}
.paytray{min-height:74px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center;padding:8px;background:#e9d3b4;border:3px solid var(--ink);border-radius:14px;box-shadow:inset 0 -10px 0 rgba(0,0,0,.06)}
.paytray.bad{animation:shake .4s;background:var(--bad-bg)}
.paytray .paid{background:none;border:0;padding:0;cursor:pointer;line-height:0}
.paytray .paid .note{width:62px}
.paytotal{min-width:72px;text-align:center;font-family:var(--f-display);font-size:26px;line-height:1;padding:8px 10px;background:#fff;border:3px solid var(--ink);border-radius:12px}
.payrow{align-items:center}
.wallet .coinsvg{width:calc(var(--d) * 1px + 4px)}
.wallet .note{width:66px}
.wallet{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.wallet .wb{background:var(--card);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);padding:6px;cursor:pointer;line-height:0;min-width:58px;min-height:58px;display:flex;align-items:center;justify-content:center}
.wallet .wb:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (max-height:700px){.pricetag{padding:4px 8px 6px}.pricetag .pic{font-size:28px}.pricetag .pt{font-size:21px}.paytray{min-height:52px;padding:4px}.paytray .coinsvg{width:calc(var(--d) * .85px)}.paytray .paid .note{width:52px}.wallet{gap:6px}.wallet .wb{min-width:46px;min-height:46px;padding:3px}.wallet .coinsvg{width:calc(var(--d) * .85px + 2px)}.wallet .note{width:56px}.paytotal{font-size:22px;padding:6px 8px}}
/* level 3, lesson 3: the park */
.bodybox.fig-park .bodyfig,.bodybox.fig-park.small .bodyfig{height:auto;width:100%;max-width:460px;max-height:50vh}
/* level 3, lesson 1: how often bars */
.fbar{display:inline-flex;gap:3px;flex:none}
.fbar i{width:13px;height:13px;border:2px solid var(--ink);border-radius:3px;background:#fff}
.fbar i.on{background:#2fa84f}
.scene.barscene{display:flex;align-items:center;justify-content:center;gap:14px}
.scene.barscene .fbar i{width:18px;height:18px}
/* level 3, lesson 4: read a short text (page type "read") */
.readcard{position:relative;display:grid;gap:2px;padding:10px 12px;background:#fffdf5;border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink);max-height:28vh;overflow:auto;flex:none}
.readcard .rhead{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.readcard.postcard{background:repeating-linear-gradient(0deg,#fffdf5 0 27px,#e8eef3 27px 28px);padding-right:64px}
.readcard .stamp{position:absolute;top:8px;right:8px;width:46px;height:52px;display:grid;place-items:center;font-size:28px;background:#fff;border:2px dashed #e2475b;border-radius:4px}
.readcard .rtitle{font-family:var(--f-display);font-size:20px}
.readcard .rline{background:none;border:0;padding:2px 4px;margin:0;text-align:left;font:inherit;font-size:18px;line-height:1.4;color:var(--ink);cursor:pointer;border-radius:6px}
.readcard .rline:active,.readcard .rline:hover{background:#fff3c4}
@media (max-height:700px){.readcard{max-height:25vh}.readcard .rline{font-size:16px;line-height:1.3}}
/* pp-v47: long reading texts – first the whole text (the page scrolls), then the small card with the questions */
.readcard.long.first{max-height:none;overflow:visible}
.readgo{margin:12px auto 6px;display:flex;align-items:center;gap:8px}
/* level 3, lesson 6: love it / like it / don't like it (page type "rate") */
.rateitem{display:flex;align-items:center;justify-content:center;gap:12px;min-height:84px;padding:10px;background:var(--card);border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);text-align:center}
.rateitem .pic{font-size:52px;line-height:1}
.rateitem .w{font-family:var(--f-display);font-size:26px}
.ratefaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ratefaces .rf .pic{font-size:40px}
.ratelist{display:grid;gap:6px}
.rated{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#fff;border:2px solid var(--ink);border-radius:12px;font-weight:700;animation:in .3s}
.rated span:nth-child(2){flex:1}
.rated .pic{font-size:24px}
.readpage .opts.list{gap:8px}
.readpage .opt.txt{padding:2px 6px 2px 2px}
.readpage .opt-main{padding:7px 10px;font-size:19px}
.readpage .opt.txt .spk.mini{width:36px;height:36px}
.readpage .prompt p{font-size:21px}
.readpage .q{gap:6px}
@media (max-height:700px){.readpage > .dots{display:none}.readcard{max-height:22vh}.readpage .opt-main{padding:5px 8px;font-size:18px}.readpage .prompt p{font-size:19px}}
/* the Parents lock */
.pinmsg{text-align:center;min-height:22px;font-weight:700;flex:none}
.stage > .pinpad,.stage > .pindots{flex:none}
.pinpad.off{opacity:.35;pointer-events:none}
.dialog.pcheck{display:grid;gap:10px;max-width:400px}
.dialog.pcheck h3{font-family:var(--f-display);font-size:24px}
.dialog.pcheck .codein{text-align:center;letter-spacing:.3em}
.bodybox.fig-forest .bodyfig,.bodybox.fig-forest.small .bodyfig{height:auto;width:100%;max-width:460px;max-height:50vh}

/* level 4: the departures board (scene {board}) */
.scene.board,.page .scene.board{font-family:var(--f-pixel);font-size:17px;letter-spacing:.02em;line-height:1.3;text-align:left;background:#14202c;color:#ffd54a;border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);padding:8px 12px;display:grid;gap:3px;width:100%;max-width:380px;margin:0 auto}
.scene.board .bh{color:#fff;font-size:16px}
.scene.board .br{display:grid;grid-template-columns:3.6em minmax(0,1fr) auto;gap:10px;border-top:1px dashed rgba(255,255,255,.22);padding-top:3px}
.scene.board .b0{color:#7ee787}
.scene.board .b2{color:#9fd3ff}
@media (max-height:700px){
  .scene.board,.page .scene.board{font-size:14px;padding:5px 10px;gap:1px;line-height:1.2}
  .scene.board .br{padding-top:1px}
  .stage:has(.scene.board) .dots{display:none}
  .stage:has(.scene.board) .q{gap:8px}
  .stage:has(.scene.board) .prompt p{font-size:19px}
}
/* short phones: the test game's picture (pitch, sea, space…) is drawn smaller, so the question and the answers fit */
@media (max-height:700px){
  .stage > .pitchbox{zoom:.55}
  .tq{gap:8px}
  .tq .eyebrow,.tq .instr{display:none}
}

/* level 4: town map, world map, bar chart */
.bodybox.fig-citymap .bodyfig,.bodybox.fig-citymap.small .bodyfig{height:auto;width:100%;max-width:440px;max-height:52vh}
.bodybox.fig-world .bodyfig,.bodybox.fig-world.small .bodyfig{height:auto;width:100%;max-width:520px;max-height:46vh}
.bodyfig.worldmap{border:3px solid var(--ink);border-radius:12px}
.bodyfig.citymap{border:3px solid var(--ink);border-radius:12px}
.scene.chart,.page .scene.chart{font-size:16px;letter-spacing:0;line-height:1.2;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);padding:8px 10px;display:grid;gap:5px;width:100%;max-width:400px;margin:0 auto}
.scene.chart .ch{font-weight:700;font-size:15px}
.scene.chart .cr{display:grid;grid-template-columns:1.6em 5.2em minmax(0,1fr) 4.2em;align-items:center;gap:6px}
.scene.chart .cp{font-size:20px;line-height:1}
.scene.chart .cn{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene.chart .cb{height:14px;background:#eef3f7;border-radius:7px;overflow:hidden;border:2px solid var(--ink)}
.scene.chart .cb i{display:block;height:100%;background:var(--sun)}
.scene.chart .cv{font-family:var(--f-pixel);font-size:13px;text-align:right;white-space:nowrap}
@media (max-height:700px){
  .scene.chart,.page .scene.chart{padding:5px 8px;gap:3px}
  .stage:has(.scene.chart) .dots{display:none}
  .stage:has(.scene.chart) .prompt p{font-size:19px}
  .scene.chart .ch{display:none}
  .scene.chart .cr{gap:4px}
  .scene.chart .cp{font-size:17px}
  .bodybox.fig-citymap .bodyfig,.bodybox.fig-citymap.small .bodyfig{max-height:43vh}
  .stage:has(.fig-citymap) .paint-q,.stage:has(.fig-world) .paint-q{font-size:18px}
}

/* ---------- main menu: four main screens with a menu at the bottom (v pp-v44) ---------- */
.tabs{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:var(--grass);border-top:4px solid var(--chalk);padding-block:9px 10px}
.tab{position:relative;appearance:none;border:3px solid var(--ink);border-radius:12px;background:var(--chalk);color:var(--ink);font:700 14px/1.1 var(--f-body);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;min-width:0;padding:4px 2px;box-shadow:0 4px 0 var(--ink);cursor:pointer}
.tab .ti{font-size:25px;line-height:1}
.tab.on{background:var(--sun);transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.tab:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.tab .dot{position:absolute;top:-7px;right:-4px;width:17px;height:17px;border-radius:50%;background:var(--bad);border:3px solid var(--ink)}
/* Parents area: five sections with the same menu at the bottom (pp-v50) */
.tabs.five{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding-inline:max(8px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-right,0px))}
.tabs.five .tab{font-size:12.5px;min-height:56px}
.tabs.five .tab .ti{font-size:23px}
/* pp-v61: six sections (🌍 Languages has its own tab) */
.tabs.six{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:3px;padding-inline:max(5px,env(safe-area-inset-left,0px)) max(5px,env(safe-area-inset-right,0px))}
.tabs.six .tab{font-size:11px;letter-spacing:-.1px;min-height:56px;border-width:2.5px;padding:4px 0;border-radius:10px}
.tabs.six .tab .ti{font-size:22px}
.pane{display:flex;flex-direction:column;gap:16px}
.pane[hidden]{display:none}
.parent details.panel{display:block}
.kidd>summary,.fold>summary{list-style:none;cursor:pointer;position:relative;padding-right:30px;min-height:48px}
.kidd>summary::-webkit-details-marker,.fold>summary::-webkit-details-marker,.more>summary::-webkit-details-marker{display:none}
.kidd>summary::after,.fold>summary::after{content:'▾';position:absolute;right:2px;top:50%;margin-top:-12px;font-size:22px;line-height:24px;transition:transform .15s}
.kidd[open]>summary::after,.fold[open]>summary::after{transform:rotate(180deg)}
.fold>summary{display:flex;align-items:center}
.parent .fold>summary h3{margin:0}
.foldbody{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:12px;border-top:2px dashed var(--line)}
.more>summary{list-style:none;cursor:pointer;font-weight:700;color:var(--ink-soft);padding:6px 0;min-height:36px;display:flex;align-items:center;gap:6px}
.more>summary::before{content:'▸';font-size:16px}
.more[open]>summary::before{content:'▾'}
.more[open]>summary{margin-bottom:4px}
.more>p{margin:6px 0}
.kidd>summary .grow{display:flex;flex-direction:column;min-width:0}
.kidsub{font-size:14px;font-weight:700}
.kidbody{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:12px;border-top:2px dashed var(--line)}
@media (max-width:340px){.tabs.five .tab{font-size:11px}.tabs.five .tab .ti{font-size:21px}}
@media (max-height:480px){.tabs.five{padding-block:5px 6px}.tabs.five .tab{min-height:38px;flex-direction:row;gap:5px}.tabs.five .tab .ti{font-size:17px}}
@media (max-width:340px){.tabs.six .tab{font-size:10px}.tabs.six .tab .ti{font-size:20px}}
@media (max-height:480px){.tabs.six{padding-block:5px 6px}.tabs.six .tab{min-height:38px;flex-direction:row;gap:4px}.tabs.six .tab .ti{font-size:17px}}
@media (min-width:420px){.tabs.six .tab{font-size:12px;letter-spacing:0}}
.hello .sub{font:700 13px/1.2 var(--f-body);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col{display:flex;flex-direction:column;gap:10px}
/* Play */
.nextup{display:flex;flex-direction:column;gap:8px;padding:12px}
.nextup .nu-h{display:flex;align-items:center;gap:12px}
.nextup .ico{font-size:34px;width:56px;height:56px;display:grid;place-items:center;background:var(--sky);border:2px solid var(--ink);border-radius:10px;flex:none}
.nextup .txt{min-width:0;flex:1}
.nextup .kicker{font:700 12px var(--f-pixel);text-transform:uppercase;letter-spacing:.06em;color:var(--kick)}
.nextup .t{font-family:var(--f-display);font-size:22px;line-height:1.1}
.nextup .s{font-size:14px;color:var(--ink-soft);font-weight:700}
.nextup .bar{margin-top:0}
.nextup .btn{width:100%}
.t-play{gap:12px}
/* pp-v99: QR card in the empty space under "Next up" – computers only (wide window + mouse; app.js makes it only then) and only when the window is tall enough,
   so the home screen never has to scroll: it needs about 750 px of window height (content 522 px + card 112 px + tab bar 81 px + padding). */
.qrcard{display:none}
@media (min-width:900px) and (hover:hover) and (pointer:fine) and (min-height:752px){
  .qrcard{display:flex;align-items:center;gap:14px;align-self:center;width:max-content;max-width:100%;margin-block:auto;padding:8px 16px 8px 8px;box-shadow:0 4px 0 var(--ink)}
  .qrcard[hidden]{display:none}
  .qrcard .qr{width:88px;flex:none;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:#fff;line-height:0}
  .qrcard .qr svg{display:block;width:100%;height:auto}
  .qrcard .qr-txt{display:flex;flex-direction:column;gap:2px;max-width:320px}
  .qrcard .t{font-family:var(--f-display);font-size:19px;line-height:1.1}
  .qrcard .s{font-size:14px;line-height:1.25;color:var(--ink-soft);font-weight:700;text-wrap:balance}
}
/* Lessons: ten tiles */
.t-lessons{padding-block:2px 12px}
.ltiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ltile{display:flex;flex-direction:column;gap:3px;text-align:left;padding:7px 9px 8px;min-width:0;background:var(--card);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);font:inherit;color:inherit;cursor:pointer}
.ltile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.ltile .lt-h{display:flex;align-items:center;gap:8px;min-width:0}
.ltile .ico{font-size:22px;width:34px;height:34px;display:grid;place-items:center;background:var(--sky);border:2px solid var(--ink);border-radius:8px;flex:none}
.ltile .t{font-family:var(--f-display);font-size:15px;line-height:1.1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.ltile .s{font-size:13px;line-height:1.2;font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ltile .bar{height:7px;margin-top:2px}
.ltile.locked{opacity:.6;box-shadow:0 4px 0 rgba(28,42,57,.45);border-color:rgba(28,42,57,.45)}
.ltile.perfect{background:#fff8dc;border-color:var(--sun-dark);box-shadow:0 4px 0 var(--sun-dark)}
.ltile.perfect .bar b{background:var(--sun)}
/* Prizes: one compact row per prize */
.prizes{grid-template-columns:minmax(0,1fr);gap:10px}
.prize{flex-direction:row;text-align:left;align-items:center;gap:12px;padding:8px 12px}
.prize .e{font-size:36px;flex:none}
.prize .pi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.prize .n{font-size:17px;line-height:1.15}
.prize .price{font-size:18px}
.prize .btn{flex:none}
/* Me */
.mehead{display:flex;align-items:center;gap:14px}
.mehead .grow{min-width:0}
.mehead .mn{font-family:var(--f-display);font-size:28px;line-height:1.1;overflow-wrap:anywhere}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{background:var(--card);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);padding:8px 4px;text-align:center;min-width:0}
.stat .sn{font-family:var(--f-pixel);font-weight:700;font-size:19px;white-space:nowrap}
.stat .sl{font-size:13px;color:var(--ink-soft);font-weight:700}
.trow{display:flex;align-items:center;gap:12px;padding:6px 0}
.trow .tcup{flex:none;width:64px;display:grid;place-items:center}
.trow .tinfo{flex:1;min-width:0}
.trow .tn{font-family:var(--f-display);font-size:20px}
.trow .ts{font-weight:700}
.trow.won .ts{color:var(--good)}
.overlay.troph .dialog{border-color:var(--sun-dark)}
.mini-b{appearance:none;border:3px solid var(--ink);border-radius:999px;background:var(--chalk);color:var(--ink);font:700 14px var(--f-body);padding:5px 11px;min-height:36px;box-shadow:0 3px 0 var(--ink);cursor:pointer;white-space:nowrap}
.mini-b:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.t-me{gap:12px}

/* help after the second wrong tap in a round (pp-v45): the right answer glows */
.opt.hint{border-color:var(--good);box-shadow:0 5px 0 var(--good);background:var(--good-bg);animation:hintglow 1s ease-in-out 3}
@keyframes hintglow{50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.opt.hint{animation:none}}

/* new page types (pp-v46): spell, fix, listening story */
.spellarea{display:grid;gap:10px;justify-items:center;align-content:start}
.spellpic{display:flex;align-items:center;justify-content:center;gap:14px;min-height:76px}
.spellpic .pic{font-size:60px;line-height:1}
.spellclue{margin:0;text-align:center}
.slots{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.slot{width:28px;height:42px;display:grid;place-items:center;border-bottom:4px solid var(--ink);font-family:var(--f-display);font-size:28px;line-height:1;color:var(--ink)}
.slot.on{border-color:var(--kick)}
.slot.right{border-color:var(--good);color:var(--good)}
.sptiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:340px}
.sptile{appearance:none;width:48px;height:52px;border:3px solid var(--ink);border-radius:10px;background:var(--sun);box-shadow:0 4px 0 var(--ink);font-family:var(--f-display);font-size:28px;line-height:1;color:var(--ink);cursor:pointer;padding:0}
.sptile:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.sptile.used{visibility:hidden}
.sptile.wrong{background:var(--bad-bg);border-color:var(--bad);box-shadow:0 4px 0 var(--bad);animation:shake .4s}
.sptile.hint,.fixw.hint,.fixopt.hint{border-color:var(--good);box-shadow:0 4px 0 var(--good);background:var(--good-bg);animation:hintglow 1s ease-in-out 3}
.fixarea{display:grid;gap:9px;justify-items:center;align-content:start}
.fixscene{font-size:42px;line-height:1}
.fixline{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.fixw{appearance:none;font:inherit;font-weight:700;font-size:21px;line-height:1.1;padding:6px 10px;border:3px solid var(--ink);border-radius:10px;background:var(--card);box-shadow:0 3px 0 var(--ink);color:var(--ink);cursor:pointer}
.fixw.bad{background:var(--bad-bg);border-color:var(--bad);box-shadow:0 3px 0 var(--bad);text-decoration:line-through}
.fixw.fixed{background:var(--good-bg);border-color:var(--good);box-shadow:0 3px 0 var(--good);text-decoration:none}
.fixw.wrong{animation:shake .4s}
.fixhint{margin:0;text-align:center;min-height:1.5em}
.fixopts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fixopt{appearance:none;font:inherit;font-weight:700;font-size:20px;padding:7px 12px;border:3px solid var(--ink);border-radius:12px;background:var(--sun);box-shadow:0 4px 0 var(--ink);color:var(--ink);cursor:pointer}
.fixopt.right{background:var(--good-bg);border-color:var(--good);box-shadow:0 4px 0 var(--good)}
.fixopt.wrong{background:var(--bad-bg);border-color:var(--bad);box-shadow:0 4px 0 var(--bad);opacity:.65;animation:shake .4s}
.readcard.listen{max-height:none;overflow:visible}
.listenrow{display:flex;align-items:center;gap:12px}
.listenrow .showtext{font-size:18px;padding:8px 14px}
.readcard.listen .rtext{max-height:22vh;overflow:auto;margin-top:6px}
@media (prefers-reduced-motion:reduce){.sptile.hint,.fixw.hint,.fixopt.hint{animation:none}}

/* practise the missed game questions (pp-v46) */
.practicebtn{margin:6px 0 4px;max-width:100%}

/* ---------- pp-v61: help button, free lesson, coming later, voices ---------- */
/* pp-v87: the marker at the right of a harder task's description (the flag of the menu language); its box opens under the description */
.instrwrap{position:relative;flex:none}
.instr h2{min-width:0;flex:1 1 auto}
.instr h2 .helpb{display:inline-grid;vertical-align:middle;margin:-6px 0 -6px 8px;width:34px;height:34px;font-size:18px}
.helpb{flex:none;width:40px;height:40px;border-radius:50%;border:3px solid var(--ink);background:#fff;box-shadow:0 3px 0 var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;font-size:20px;line-height:1}
.helpb:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.helpb[aria-expanded="true"]{background:var(--sun)}
.helpbox{display:flex;align-items:flex-start;gap:10px;margin:8px 0 4px;padding:10px 12px;border:3px solid var(--ink);border-radius:14px;background:#fffbe6;box-shadow:0 3px 0 var(--ink);font-size:16px;line-height:1.3}
.helpbox.float{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;z-index:20;box-shadow:0 4px 0 var(--ink),0 8px 24px rgba(0,0,0,.18)}
.helpbox p{margin:0}.helpbox .hs{margin-bottom:4px}
.helpbox .hf{font-size:24px;line-height:1}
.helpbox .hx{flex:none;border:0;background:none;font:900 22px/1 var(--f-body);color:var(--ink);cursor:pointer;padding:0 2px}
.chip.sun{color:#8a5a00;background:#fff3c4;border-color:#e0a800}
.panel.later{margin-top:12px}.panel.later h2{font-size:20px;margin:0 0 4px}
.lchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lchip{display:inline-flex;align-items:center;gap:2px;padding:4px 9px;border:2px solid var(--line);border-radius:99px;background:var(--chalk);color:var(--ink-soft);font:700 13px/1.2 var(--f-body);cursor:default}
button.lchip{cursor:pointer}
.lchip small{font-weight:700;color:var(--ink-soft)}
.lrow .lnote{display:block;font-size:13px;margin-top:2px}
.lrow .lbtns{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}   /* pp-v82: Unlock + Pay by invoice (confirmed schools) */
.dialog.trial .tbig{font-size:56px;text-align:center;line-height:1}
.dialog.trial h2{text-align:center}
.vlist{display:flex;flex-direction:column;gap:10px;margin:8px 0}
.vrow{border:2px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.vrow .vh{display:flex;align-items:center;gap:8px}.vrow .vh b{font-size:17px;flex:1}
.vrow .vb{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vrow .vb .btn{min-height:42px;font-size:15px;padding:4px 12px}.vrow .vh .btn.icon{width:42px;min-height:40px;padding:0;font-size:18px;box-shadow:0 3px 0 var(--ink)}
.vrow .vf{font-size:24px}
.vrow select{max-width:100%}
.vrow .vline{margin:0;font-size:13px}

/* pp-v69: the menu language – 🌐 button on the sign-in screen (the logo gives it room) */
.top .logo{min-width:0;flex:1 1 auto}
.mlang{margin-left:auto;flex:none;align-self:flex-start;display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:700 15px/1 var(--f-body, inherit);cursor:pointer;box-shadow:0 2px 0 var(--ink)}
.mlang span:first-child{font-size:17px}
.mlang.mid{align-self:center}
.sync + .mlang{margin-left:8px}
.mlang.mini{padding:6px 7px}
.mlang.mini span + span{display:none}   /* Parents header: only 🌐 (the language name is in the dialog) */
/* pp-v69: the six Parents tabs share the width by their labels (in Slovak "Nastavenia" is the long one, in English "Languages") */
.tabs.six{grid-template-columns:repeat(6,auto)}
.tabs.six .tab{padding-inline:3px;min-width:0}
/* pp-v88 (Dana): prizes in order, skip with the Parents code, share the app */
.prize.got{opacity:.72}
.prize.next{border-color:var(--sun-dark);box-shadow:0 5px 0 var(--sun-dark),0 0 0 3px var(--sun)}
.prize.later{opacity:.55}
.prize.later .e{filter:grayscale(.7)}
.prize .chip{margin-top:auto}
.prizegoal{display:grid;gap:2px;margin-bottom:12px}
.prizegoal .lead{margin:0}
.prizegoal .muted{margin:2px 0 0;font-size:14px;line-height:1.3}
.prizehint{background:var(--sun);border:3px solid var(--sun-dark);border-radius:999px;padding:5px 12px;font:700 17px/1.1 var(--f-body);color:var(--ink);box-shadow:0 3px 0 var(--sun-dark);cursor:pointer;white-space:nowrap}
.prizehint.pulse{animation:pulse 1.2s ease-in-out infinite}
.skipbtn{flex:none;white-space:nowrap;padding-inline:12px;font-size:16px}
.dialog.pindlg{gap:8px;max-height:100%;overflow:auto}
.pindlg h2{font-size:22px;margin:0}
.pindlg .pc-txt{margin:0;font-size:15px;line-height:1.3}
.pindlg .pinpad{gap:6px;max-width:270px}
.pindlg .pinpad .btn{font-size:24px;min-height:46px;padding-top:6px;padding-bottom:6px}
.pindlg .pindots i{width:18px;height:18px}
.pindlg .pinmsg{min-height:20px;margin:0;font-size:15px}
.pindlg .pc-links{margin:0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.dialog.sharedlg{gap:10px;max-height:100%;overflow:auto}
.sharedlg h2{font-size:22px;margin:0}
.sharedlg p{margin:0}
.sharedlg .row{flex-wrap:wrap}
.sharedlg .field{display:grid;gap:6px;text-align:left}
.sharedlg .field textarea{min-height:0}
.sharelink{font-weight:700;font-size:15px;background:var(--chalk);border:2px dashed var(--ink);border-radius:10px;padding:8px 10px;overflow-wrap:anywhere}
.bottom.whobar{flex-wrap:wrap;row-gap:8px}
.bottom.whobar .btn{white-space:nowrap}
.bottom.whobar{gap:8px}
.bottom.whobar .btn.sm{padding-inline:10px}