/* ActuallySpeak Kids — Jungle English Adventure
   Design tokens follow §19: colours carry consistent meaning. */

:root{
  /* meaning-carrying palette */
  --j-green:#22c55e;   /* navigation + progress */
  --j-green-d:#15803d;
  --j-blue:#0ea5e9;    /* listening + calm */
  --j-blue-d:#0369a1;
  --j-yellow:#fbbf24;  /* stars + success */
  --j-yellow-d:#d97706;
  --j-orange:#f97316;  /* speaking + energy */
  --j-orange-d:#c2410c;
  --j-purple:#a855f7;  /* rewards + stories */
  --j-purple-d:#7e22ce;
  --j-red:#ef4444;
  --j-pink:#ec4899;
  --j-cream:#fdf6e3;
  --j-cream-2:#fffbf0;
  --j-ink:#2c2013;
  --j-ink-2:#6b5b45;
  --j-line:#e6d8b8;

  --ask-textscale:1;
  --r:22px; --r-sm:14px; --r-pill:999px;
  --tap:56px;
  --shadow:0 6px 0 rgba(0,0,0,.10), 0 12px 26px rgba(60,40,10,.14);
  --shadow-sm:0 3px 0 rgba(0,0,0,.09), 0 6px 14px rgba(60,40,10,.12);
  --font:'Baloo 2',ui-rounded,'SF Pro Rounded','Nunito','Quicksand','Segoe UI Rounded',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html.ask-contrast{ --j-cream:#fff; --j-ink:#000; --j-line:#333; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);color:var(--j-ink);
  background:var(--j-cream);
  font-size:calc(17px * var(--ask-textscale));
  line-height:1.35;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em}

/* ---------------- app frame ---------------- */
#ask-root{
  max-width:520px;margin:0 auto;min-height:100%;
  display:flex;flex-direction:column;position:relative;
  background:var(--j-cream);
  box-shadow:0 0 60px rgba(0,0,0,.12);
}
@media(min-width:560px){ body{background:#e8f5e0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 6c10 6 14 16 10 26-8-4-13-15-10-26z' fill='%2322c55e' opacity='.10'/%3E%3C/svg%3E")} }

#ask-screen{flex:1;padding:0 0 96px;position:relative}
.ask-pad{padding:0 16px}

/* ---------------- top bar ---------------- */
.ask-top{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:linear-gradient(180deg,var(--j-cream-2),rgba(253,246,227,.92));
  backdrop-filter:blur(8px);
  border-bottom:3px solid var(--j-line);
}
.ask-av{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:26px;
  background:#fff;border:3px solid var(--j-green);box-shadow:var(--shadow-sm);
}
.ask-top__name{font-weight:800;font-size:1.02em;line-height:1.1}
.ask-top__sub{font-size:.74em;color:var(--j-ink-2);font-weight:700}
.ask-top__grow{flex:1;min-width:0}
.ask-pillbar{display:flex;gap:6px}
.ask-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 11px;border-radius:var(--r-pill);font-weight:800;font-size:.82em;
  background:#fff;border:2.5px solid var(--j-line);box-shadow:var(--shadow-sm);white-space:nowrap;
}
.ask-pill--star{border-color:var(--j-yellow);color:var(--j-yellow-d)}
.ask-pill--fire{border-color:var(--j-orange);color:var(--j-orange-d)}
.ask-iconbtn{
  width:44px;height:44px;border-radius:50%;border:2.5px solid var(--j-line);
  background:#fff;display:grid;place-items:center;font-size:20px;cursor:pointer;
  box-shadow:var(--shadow-sm)
}
.ask-iconbtn:active{transform:translateY(2px)}

/* ---------------- hero / scene ---------------- */
.ask-hero{position:relative;height:190px;overflow:hidden;border-bottom:4px solid #15803d}
.ask-scene{position:absolute;inset:0;overflow:hidden}
.ask-scene__svg{position:absolute;inset:0;width:100%;height:100%}
.ask-scene__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ask-scene__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,45,20,.30) 0,rgba(20,45,20,.06) 34%,rgba(20,45,20,0) 60%,rgba(253,246,227,.55) 100%);
}
.ask-scene__scrim.is-strong{background:linear-gradient(180deg,rgba(20,45,20,.48),rgba(20,45,20,.16) 55%,rgba(253,246,227,.6))}
.ask-photocard{position:relative;height:150px;border-radius:var(--r);overflow:hidden;border:4px solid var(--j-green-d);box-shadow:var(--shadow)}
.ask-photocard--tall{height:186px}
.ask-hero__kiki{position:absolute;left:8px;bottom:-6px;width:132px;z-index:2}
.ask-bubble{
  position:absolute;right:12px;top:18px;max-width:60%;z-index:3;
  background:#fff;border:3px solid var(--j-green);border-radius:20px;
  padding:10px 13px;font-weight:800;font-size:.92em;box-shadow:var(--shadow-sm);
}
.ask-bubble:after{
  content:'';position:absolute;left:-13px;bottom:14px;
  border:10px solid transparent;border-right-color:var(--j-green);
}
.ask-bubble b{color:var(--j-orange-d)}

/* ---------------- cards & buttons ---------------- */
.ask-card{
  background:#fff;border:3px solid var(--j-line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px;
}
.ask-card--wood{
  background:linear-gradient(180deg,#fff8e6,#fdf0d0);border-color:#e0c48a;
}
.ask-sign{
  display:inline-block;background:linear-gradient(180deg,#b98b4d,#96682f);
  color:#fff;font-weight:800;padding:8px 20px;border-radius:14px;
  border:3px solid #7c4a12;box-shadow:var(--shadow-sm);text-shadow:0 1px 0 rgba(0,0,0,.3)
}
.ask-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--tap);padding:0 22px;border-radius:var(--r-pill);
  border:none;font-weight:800;font-size:1.04em;cursor:pointer;
  background:var(--j-green);color:#fff;
  box-shadow:0 5px 0 var(--j-green-d), 0 10px 18px rgba(21,128,61,.28);
  transition:transform .08s,box-shadow .08s;
  text-decoration:none;
}
.ask-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--j-green-d)}
.ask-btn--big{width:100%;min-height:66px;font-size:1.2em}
.ask-btn--blue{background:var(--j-blue);box-shadow:0 5px 0 var(--j-blue-d),0 10px 18px rgba(3,105,161,.26)}
.ask-btn--blue:active{box-shadow:0 1px 0 var(--j-blue-d)}
.ask-btn--orange{background:var(--j-orange);box-shadow:0 5px 0 var(--j-orange-d),0 10px 18px rgba(194,65,12,.26)}
.ask-btn--orange:active{box-shadow:0 1px 0 var(--j-orange-d)}
.ask-btn--purple{background:var(--j-purple);box-shadow:0 5px 0 var(--j-purple-d),0 10px 18px rgba(126,34,206,.26)}
.ask-btn--purple:active{box-shadow:0 1px 0 var(--j-purple-d)}
.ask-btn--yellow{background:var(--j-yellow);color:#5a3a06;box-shadow:0 5px 0 var(--j-yellow-d),0 10px 18px rgba(217,119,6,.26)}
.ask-btn--yellow:active{box-shadow:0 1px 0 var(--j-yellow-d)}
.ask-btn--ghost{background:#fff;color:var(--j-ink);border:3px solid var(--j-line);box-shadow:0 4px 0 var(--j-line)}
.ask-btn--ghost:active{box-shadow:0 1px 0 var(--j-line)}
.ask-btn[disabled]{opacity:.5;pointer-events:none}
.ask-btn.is-loading:after{content:'';width:16px;height:16px;border:3px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:askspin .7s linear infinite}
@keyframes askspin{to{transform:rotate(360deg)}}

.ask-tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ask-tile{
  border:3px solid var(--j-line);border-radius:var(--r);background:#fff;
  padding:13px 11px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;min-height:96px;
}
.ask-tile:active{transform:translateY(3px);box-shadow:none}
.ask-tile__ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:23px;background:#f1f5f9}
.ask-tile__t{font-weight:800;font-size:.96em}
.ask-tile__s{font-size:.76em;color:var(--j-ink-2);font-weight:700}
.ask-tile--v .ask-tile__ic{background:#dbeafe}
.ask-tile--s .ask-tile__ic{background:#ffe4d3}
.ask-tile--m .ask-tile__ic{background:#fce7f3}
.ask-tile--g .ask-tile__ic{background:#dcfce7}
.ask-tile--r .ask-tile__ic{background:#ede9fe}

/* progress */
.ask-prog{height:16px;border-radius:var(--r-pill);background:#e8dcc2;overflow:hidden;border:2.5px solid var(--j-line)}
.ask-prog__b{height:100%;background:linear-gradient(90deg,#4ade80,#22c55e);border-radius:var(--r-pill);transition:width .4s cubic-bezier(.2,.9,.3,1)}
.ask-seg{display:flex;gap:5px}
.ask-seg i{flex:1;height:13px;border-radius:var(--r-pill);background:#e8dcc2;border:2px solid #d8c8a4}
.ask-seg i.on{background:linear-gradient(90deg,#4ade80,#22c55e);border-color:#15803d}

.ask-star{width:22px;height:22px;vertical-align:-4px}

/* ---------------- bottom nav ---------------- */
.ask-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  max-width:520px;margin:0 auto;
  display:flex;background:var(--j-cream-2);
  border-top:4px solid var(--j-line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.ask-nav button{
  flex:1;background:none;border:0;cursor:pointer;padding:5px 2px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:.66em;font-weight:800;color:var(--j-ink-2);min-height:54px;
  border-radius:14px;
}
.ask-nav button span{font-size:23px;line-height:1;filter:grayscale(.5);transition:transform .15s}
.ask-nav button.is-on{color:var(--j-green-d);background:#e9f9ec}
.ask-nav button.is-on span{filter:none;transform:scale(1.16) translateY(-1px)}

/* ---------------- Kiki ---------------- */
.ask-kiki{display:block;width:100%;height:auto;overflow:visible}
.ask-kiki--float{animation:askfloat 3.4s ease-in-out infinite}
@keyframes askfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* ---- lip sync ----
   --jaw is driven from the live audio amplitude (see kids-core.js). The open
   jaw cross-fades against the closed mouth, so Kiki speaks from any pose. */
.ask-kiki{--jaw:0}
.ask-kiki .ask-mouth__closed{opacity:calc(1 - min(1, max(var(--jaw), var(--rest,0)) * 2.2))}
.ask-kiki .ask-jaw{
  transform-box:fill-box;transform-origin:50% 0%;
  opacity:min(1, max(var(--jaw), var(--rest,0)) * 2.2);
  transform:translateY(calc(max(var(--jaw), var(--rest,0)) * 3px))
            scaleY(calc(.35 + max(var(--jaw), var(--rest,0)) * .85));
}
html.ask-reduced .ask-kiki .ask-jaw{transform:none;opacity:var(--rest,0)}
html.ask-reduced .ask-kiki .ask-mouth__closed{opacity:calc(1 - var(--rest,0))}

/* ---- blinking ---- */
.ask-kiki .ask-lids{transform-box:fill-box;transform-origin:50% 0%;transform:scaleY(0);animation:askblink 6s infinite}
@keyframes askblink{0%,96%,100%{transform:scaleY(0)}97.5%{transform:scaleY(1)}}

/* ---- a little life while speaking ---- */
.ask-kiki.is-speaking{animation:askbob .5s ease-in-out infinite alternate}
@keyframes askbob{from{transform:translateY(0) rotate(0)}to{transform:translateY(-3px) rotate(-1.2deg)}}
.ask-kiki--float.is-speaking{animation:askbob .5s ease-in-out infinite alternate}
.ask-kiki .ask-notes{transform-box:fill-box;animation:asknotes 2s ease-in-out infinite}
@keyframes asknotes{0%,100%{opacity:.3;transform:translateY(4px)}50%{opacity:1;transform:translateY(-6px)}}
.ask-buddy{
  position:relative;display:inline-grid;place-items:center;width:48px;height:48px;flex:0 0 auto;
  border-radius:50%;background:#fff;border:3px solid var(--bc,#22c55e);box-shadow:var(--shadow-sm);overflow:hidden;font-size:24px
}
.ask-buddy b{font-weight:400;line-height:1}
.ask-buddy img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;background:#fff}

.ask-coachrow{display:flex;align-items:flex-end;gap:10px;margin:12px 0}
.ask-coachrow .ask-kiki{width:92px;flex:0 0 auto}
.ask-coachrow__say{
  flex:1;background:#fff;border:3px solid var(--j-green);border-radius:20px;
  padding:11px 13px;font-weight:800;position:relative;box-shadow:var(--shadow-sm);font-size:.95em
}
.ask-coachrow__say:after{content:'';position:absolute;left:-13px;bottom:16px;border:10px solid transparent;border-right-color:var(--j-green)}

/* ---------------- word card ---------------- */
.ask-wordart{position:relative;width:100%;aspect-ratio:300/220;border-radius:var(--r);overflow:hidden;display:block;background:#fff1c9}
.ask-wordart__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ask-wordart__img{
  position:absolute;left:0;top:0;width:100%;height:86%;
  object-fit:contain;padding:5% 8% 0;
  filter:drop-shadow(0 6px 6px rgba(0,60,20,.28));
  background:radial-gradient(ellipse 42% 46% at 50% 46%,var(--wcover,#fff8e1) 0 62%,rgba(255,248,225,0) 100%);
}
.ask-opt .ask-wordart,.ask-opts--three .ask-wordart{border-radius:14px}
.ask-wordcard{text-align:center}
.ask-wordcard .ask-w{
  font-size:2.5em;font-weight:800;letter-spacing:.01em;margin:10px 0 2px;
  background:linear-gradient(90deg,var(--j-orange),var(--j-red),var(--j-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ask-syl{font-size:.9em;color:var(--j-ink-2);font-weight:800;letter-spacing:.08em}
.ask-ex{font-size:.95em;color:var(--j-ink-2);font-weight:700;margin-top:8px}
.ask-ex i{font-style:normal;color:var(--j-orange-d);font-weight:800}
.ask-gap{display:inline-block;min-width:74px;border-bottom:4px dotted var(--j-orange);vertical-align:-2px}

.ask-speak-btn{
  width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;
  background:var(--j-blue);color:#fff;font-size:27px;
  box-shadow:0 5px 0 var(--j-blue-d),0 10px 18px rgba(3,105,161,.3);
  display:grid;place-items:center;
}
.ask-speak-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--j-blue-d)}
.ask-speak-btn--slow{width:48px;height:48px;font-size:19px;background:#fff;color:var(--j-blue-d);border:3px solid var(--j-blue);box-shadow:0 4px 0 var(--j-blue)}

/* option grid */
.ask-opts{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}
.ask-opt{
  border:4px solid var(--j-line);border-radius:var(--r);background:#fff;padding:8px;
  cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .1s;
}
.ask-opt:active{transform:scale(.97)}
.ask-opt .ask-wordart{border-radius:14px}
.ask-opt__l{font-weight:800;margin-top:5px;font-size:1em}
.ask-opt.is-right{border-color:var(--j-green);background:#eefbf1;animation:askpop .35s}
.ask-opt.is-wrong{border-color:var(--j-red);background:#fef2f2;animation:askshake .4s}
.ask-opt.is-dim{opacity:.45}
.ask-opts--three{grid-template-columns:repeat(3,1fr)}
.ask-opts--three .ask-opt{padding:6px}
.ask-opts--text{grid-template-columns:1fr}
.ask-opts--text .ask-opt{padding:16px;font-size:1.15em;font-weight:800;text-align:center}
@keyframes askpop{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes askshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ---------------- mic ---------------- */
.ask-mic{
  width:112px;height:112px;border-radius:50%;border:none;cursor:pointer;margin:0 auto;display:grid;place-items:center;
  background:linear-gradient(180deg,#34d399,#16a34a);color:#fff;font-size:46px;
  box-shadow:0 7px 0 #14532d,0 14px 28px rgba(22,101,52,.35);position:relative
}
.ask-mic:active{transform:translateY(5px);box-shadow:0 2px 0 #14532d}
.ask-mic.is-rec{background:linear-gradient(180deg,#f87171,#dc2626);box-shadow:0 7px 0 #7f1d1d,0 14px 28px rgba(153,27,27,.4)}
.ask-mic.is-rec:before{content:'';position:absolute;inset:-14px;border-radius:50%;border:5px solid rgba(239,68,68,.4);animation:askpulse 1.2s ease-out infinite}
@keyframes askpulse{from{transform:scale(.9);opacity:.9}to{transform:scale(1.35);opacity:0}}
.ask-mic.is-busy{background:linear-gradient(180deg,#93c5fd,#3b82f6);box-shadow:0 7px 0 #1e40af}
.ask-wave{height:52px;display:flex;align-items:center;justify-content:center;gap:3px;margin:12px 0}
.ask-wave i{width:5px;border-radius:3px;background:var(--j-orange);height:8px;transition:height .09s}
.ask-micstate{font-weight:800;text-align:center;min-height:26px;color:var(--j-ink-2)}
.ask-micstate.is-good{color:var(--j-green-d)}
.ask-micstate.is-warn{color:var(--j-orange-d)}

/* ---------------- map ---------------- */
.ask-map{padding:8px 16px 20px}
.ask-levelhead{
  display:flex;align-items:center;gap:10px;margin:18px 0 8px;
  background:#fff;border:3px solid var(--lc,#22c55e);border-radius:var(--r);
  padding:10px 12px;box-shadow:var(--shadow-sm)
}
.ask-levelhead__tag{
  display:inline-grid;place-items:center;min-width:44px;height:36px;padding:0 8px;
  border-radius:12px;background:var(--lc,#22c55e);color:#fff;font-weight:800;font-size:.95em;
  box-shadow:0 3px 0 rgba(0,0,0,.16)
}
.ask-region{margin-bottom:22px}
.ask-region__h{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.ask-region__ic{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:#fff;border:3px solid var(--rc);box-shadow:var(--shadow-sm)}
.ask-path{position:relative;padding-left:12px}
.ask-path:before{content:'';position:absolute;left:34px;top:6px;bottom:6px;width:6px;border-radius:3px;background:repeating-linear-gradient(180deg,#e0c48a 0 10px,transparent 10px 20px)}
.ask-node{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;position:relative;
  background:none;border:0;padding:0;width:100%;text-align:left;cursor:pointer
}
.ask-node__dot{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:24px;flex:0 0 auto;
  background:#fff;border:4px solid var(--j-line);box-shadow:var(--shadow-sm);z-index:1
}
.ask-node.is-open .ask-node__dot{border-color:var(--nc);background:#fff}
.ask-node.is-done .ask-node__dot{background:var(--nc);color:#fff;border-color:rgba(0,0,0,.15)}
.ask-node.is-locked{opacity:.55}
.ask-node.is-next .ask-node__dot{animation:askbeat 1.5s ease-in-out infinite}
@keyframes askbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.ask-node__t{font-weight:800;font-size:.98em}
.ask-node__s{font-size:.75em;color:var(--j-ink-2);font-weight:700}

/* ---------------- rewards ---------------- */
.ask-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ask-badge{text-align:center;font-size:.66em;font-weight:800;color:var(--j-ink-2)}
.ask-badge__ic{
  width:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:27px;
  background:#f4ecd8;border:3px dashed #d8c8a4;margin-bottom:4px;filter:grayscale(1);opacity:.55
}
.ask-badge.is-on .ask-badge__ic{background:linear-gradient(180deg,#fde68a,#fbbf24);border:3px solid var(--j-yellow-d);filter:none;opacity:1;box-shadow:var(--shadow-sm)}
.ask-jungleyard{
  position:relative;height:230px;border-radius:var(--r);overflow:hidden;
  border:4px solid var(--j-green-d);background:linear-gradient(180deg,#bfe9ff 0 45%,#86efac 45% 100%);
}
.ask-jungleyard i{position:absolute;font-size:36px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));font-style:normal}
.ask-shop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.ask-shopitem{border:3px solid var(--j-line);border-radius:16px;background:#fff;padding:10px 6px;text-align:center;cursor:pointer;font-weight:800;font-size:.7em;box-shadow:var(--shadow-sm)}
.ask-shopitem b{display:block;font-size:30px;margin-bottom:3px}
.ask-shopitem.is-own{background:#eefbf1;border-color:var(--j-green)}
.ask-shopitem.is-locked{opacity:.6}

/* ---------------- games ---------------- */
.ask-slots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.ask-slot{width:38px;height:48px;border-radius:12px;border:3px dashed #d8c8a4;background:#fff;display:grid;place-items:center;font-size:1.3em;font-weight:800}
.ask-slot.is-fill{border-style:solid;border-color:var(--j-green);background:#eefbf1}
.ask-keys{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:12px}
.ask-key{
  min-width:42px;min-height:48px;border-radius:12px;border:3px solid var(--j-line);background:#fff;
  font-weight:800;font-size:1.15em;cursor:pointer;box-shadow:0 3px 0 var(--j-line)
}
.ask-key:active{transform:translateY(3px);box-shadow:none}
.ask-key.is-used{opacity:.35;pointer-events:none}
.ask-memgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ask-mem{aspect-ratio:.85;border-radius:14px;border:3px solid var(--j-line);background:linear-gradient(180deg,#4ade80,#22c55e);cursor:pointer;display:grid;place-items:center;font-size:26px;color:#fff;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;font-weight:800}
.ask-mem.is-up{background:#fff;color:var(--j-ink)}
.ask-mem.is-got{background:#eefbf1;border-color:var(--j-green);opacity:.65;pointer-events:none}
.ask-mem small{font-size:.44em;line-height:1.1;padding:0 2px;text-align:center}
.ask-catch{position:relative;height:330px;border-radius:var(--r);overflow:hidden;border:4px solid var(--j-green-d);background:linear-gradient(180deg,#bfe9ff,#dcfce7)}
.ask-catch i{position:absolute;font-size:38px;font-style:normal;will-change:transform}
.ask-basket{position:absolute;bottom:4px;font-size:44px;transition:left .08s linear}
.ask-gamehead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}

/* ---------------- misc ---------------- */
.ask-confetti{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.ask-confetti i{position:absolute;top:-16px;width:11px;height:15px;border-radius:3px;animation:askfall 2.4s linear forwards}
@keyframes askfall{to{transform:translateY(108vh) rotate(640deg);opacity:.2}}
.ask-badgepop{position:fixed;inset:0;z-index:130;display:grid;place-items:center;background:rgba(20,40,20,.42);animation:askfade .25s}
.ask-badgepop.is-out{opacity:0;transition:opacity .35s}
.ask-badgepop__in{background:#fff;border:5px solid var(--j-yellow);border-radius:28px;padding:22px 30px;text-align:center;box-shadow:var(--shadow);animation:askpop .45s}
.ask-badgepop__ic{font-size:62px}
.ask-badgepop__t{color:var(--j-yellow-d);font-weight:800}
.ask-badgepop__n{font-size:1.35em;font-weight:800}
@keyframes askfade{from{opacity:0}to{opacity:1}}
.ask-toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:140;background:#2c2013;color:#fff;padding:11px 18px;border-radius:var(--r-pill);font-weight:800;box-shadow:var(--shadow);max-width:88%;text-align:center}
.ask-toast.is-out{opacity:0;transition:opacity .3s}

.ask-caption{
  position:fixed;left:50%;transform:translateX(-50%);bottom:104px;z-index:35;
  background:rgba(44,32,19,.9);color:#fff;padding:8px 16px;border-radius:var(--r-pill);
  font-weight:800;font-size:.88em;max-width:90%;text-align:center;pointer-events:none
}
.ask-sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;background:rgba(20,40,20,.45)}
.ask-sheet__in{background:var(--j-cream-2);width:100%;max-width:520px;margin:0 auto;border-radius:26px 26px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;border-top:5px solid var(--j-green);animation:askup .28s cubic-bezier(.2,.9,.3,1)}
@keyframes askup{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}}
.ask-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:2px solid var(--j-line)}
.ask-row:last-child{border-bottom:0}
.ask-row label{font-weight:800;font-size:.94em}
.ask-row small{display:block;color:var(--j-ink-2);font-weight:700;font-size:.8em}
.ask-switch{width:56px;height:32px;border-radius:var(--r-pill);border:3px solid var(--j-line);background:#eee;position:relative;cursor:pointer;flex:0 0 auto}
.ask-switch:after{content:'';position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .16s}
.ask-switch.is-on{background:var(--j-green);border-color:var(--j-green-d)}
.ask-switch.is-on:after{left:26px}
input[type=range]{accent-color:var(--j-green);width:130px}
select,input[type=text],input[type=number]{font:inherit;padding:10px 12px;border-radius:12px;border:3px solid var(--j-line);background:#fff;font-weight:800;min-height:48px}
.ask-h1{font-size:1.5em;font-weight:800;margin:16px 0 4px}
.ask-sub{color:var(--j-ink-2);font-weight:700;font-size:.9em;margin-bottom:10px}
.ask-sec{display:flex;align-items:center;gap:8px;margin:20px 0 10px;font-weight:800;font-size:1.08em}
.ask-sec:before{content:'';width:16px;height:16px;border-radius:5px;background:var(--j-green);transform:rotate(45deg)}
.ask-empty{text-align:center;color:var(--j-ink-2);font-weight:700;padding:26px 10px}
.ask-avgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.ask-avpick{aspect-ratio:1;border-radius:18px;border:3px solid var(--j-line);background:#fff;font-size:27px;cursor:pointer;box-shadow:var(--shadow-sm)}
.ask-avpick.is-on{border-color:var(--j-green);background:#eefbf1;transform:scale(1.06)}
.ask-stat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ask-stat div{background:#fff;border:3px solid var(--j-line);border-radius:16px;padding:11px;text-align:center}
.ask-stat b{display:block;font-size:1.5em;color:var(--j-green-d)}
.ask-stat span{font-size:.74em;font-weight:800;color:var(--j-ink-2)}
.ask-bar{height:12px;border-radius:8px;background:#e8dcc2;overflow:hidden;margin-top:5px}
.ask-bar i{display:block;height:100%;background:var(--j-green)}
:focus-visible{outline:4px solid var(--j-blue);outline-offset:2px}

html.ask-reduced *,html.ask-reduced *:before,html.ask-reduced *:after{animation:none!important;transition:none!important}
html[data-age="little"]{--ask-textscale:1.1}
html[data-age="little"] .ask-node__s,html[data-age="little"] .ask-tile__s{display:none}

/* ---------------- word web (cluster view) ---------------- */
.ask-web{background:#fff;border:3px solid var(--j-line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.ask-web__core{text-align:center;margin-bottom:12px}
.ask-web__art{max-width:190px;margin:0 auto}
.ask-web__w{font-size:1.9em;font-weight:800;margin-top:6px;
  background:linear-gradient(90deg,var(--j-orange),var(--j-red),var(--j-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ask-web__ring{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ask-chip{
  border:3px solid var(--j-line);border-radius:16px;background:#fff;cursor:pointer;
  padding:8px 12px;font-weight:800;font-size:.92em;text-align:left;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:2px;min-height:52px;justify-content:center
}
.ask-chip:active{transform:translateY(2px);box-shadow:none}
.ask-chip__k{font-size:.6em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--j-ink-2)}
.ask-chip.is-on{background:#eefbf1;border-color:var(--j-green)}
.ask-chip--fam{border-color:#bfdbfe}.ask-chip--fam.is-on{border-color:var(--j-blue)}
.ask-chip--col{border-color:#fed7aa}.ask-chip--col.is-on{border-color:var(--j-orange)}
.ask-chip--opp{border-color:#e9d5ff}.ask-chip--opp.is-on{border-color:var(--j-purple)}
.ask-chip--rhy{border-color:#fbcfe8}.ask-chip--rhy.is-on{border-color:var(--j-pink)}
.ask-chip--say{border-color:#fde68a}.ask-chip--say.is-on{border-color:var(--j-yellow-d)}

/* ---------------- context ladder ---------------- */
.ask-ladder{display:flex;flex-direction:column;gap:9px}
.ask-rung{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  border:3px solid var(--j-line);border-radius:18px;background:#fff;padding:11px;
  box-shadow:var(--shadow-sm);transition:transform .12s
}
.ask-rung__n{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:#f4ecd8;font-weight:800;color:var(--j-ink-2)}
.ask-rung__b{flex:1;min-width:0}
.ask-rung__l{display:block;font-size:.66em;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--j-ink-2)}
.ask-rung__t{display:block;font-weight:800;font-size:1.02em}
.ask-rung__s{font-size:19px;opacity:.7}
.ask-rung.is-now{border-color:var(--j-green);background:#eefbf1;transform:scale(1.02)}
.ask-rung.is-now .ask-rung__n{background:var(--j-green);color:#fff}
.ask-rung.is-done{opacity:.85}
.ask-rung.is-done .ask-rung__n{background:var(--j-yellow);color:#5a3a06}
.ask-rung.is-next{opacity:.4;pointer-events:none}
.ask-rung.is-next .ask-rung__t{filter:blur(3px)}

/* ---------------- grammar drill ---------------- */
.ask-saycard{font-size:1.32em;font-weight:800;margin-top:12px;line-height:1.25}
.ask-saycard__g{font-size:.7em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--j-purple-d);margin-top:6px}

/* ---------------- pronunciation coaching ---------------- */
.ask-micwrap{text-align:center}
.ask-micbtns{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.ask-btn--sm2{min-height:46px;padding:0 15px;font-size:.92em}
.ask-coach{background:#fff8e6;border:3px solid var(--j-orange);border-radius:20px;padding:13px;margin-top:12px;box-shadow:var(--shadow-sm)}
.ask-coach__h{font-size:.7em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--j-orange-d)}
.ask-coach__row{display:flex;align-items:center;gap:12px;margin:9px 0}
.ask-coach__sound{
  width:62px;height:62px;flex:0 0 auto;border-radius:18px;border:3px solid var(--j-orange);
  background:#fff;font-weight:800;font-size:1.35em;cursor:pointer;box-shadow:0 4px 0 var(--j-orange)
}
.ask-coach__sound:active{transform:translateY(3px);box-shadow:none}
.ask-coach__txt{text-align:left;font-weight:800}
.ask-coach__txt span{display:block;font-size:.82em;font-weight:700;color:var(--j-ink-2)}
.ask-coach__syl{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.ask-syl-btn{border:3px solid var(--j-line);background:#fff;border-radius:12px;padding:7px 12px;font-weight:800;cursor:pointer}
.ask-syl-btn.is-first{border-color:var(--j-orange);background:#ffedd5}
.ask-coach__btns{display:flex;gap:8px;justify-content:center;margin-top:6px}

/* ---------------- story studio ---------------- */
.ask-storycards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.ask-storycard{
  border:3px solid var(--j-line);border-radius:18px;background:#fff;cursor:pointer;
  padding:12px 6px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:5px;align-items:center
}
.ask-storycard:active{transform:scale(.96)}
.ask-storycard b{font-size:34px;line-height:1}
.ask-storycard span{font-weight:800;font-size:.82em;text-align:center;line-height:1.15}
.ask-sparkrow{display:flex;gap:9px}
.ask-sparkrow .ask-btn{flex:1;min-height:52px;font-size:.95em;padding:0 12px}
.ask-spark{
  background:linear-gradient(180deg,#f5f0ff,#ede9fe);border:3px solid var(--j-purple);
  border-radius:18px;padding:12px;margin-top:11px;font-weight:800;box-shadow:var(--shadow-sm)
}
.ask-spark__k{display:block;font-size:.64em;letter-spacing:.08em;text-transform:uppercase;color:var(--j-purple-d);margin-bottom:3px}
.ask-storybook{display:flex;flex-direction:column;gap:9px}
.ask-page{
  display:flex;gap:11px;align-items:center;background:#fff;border:3px solid var(--j-line);
  border-radius:18px;padding:11px;cursor:pointer;box-shadow:var(--shadow-sm)
}
.ask-page__e{font-size:32px;flex:0 0 auto}
.ask-page__t{font-weight:800;font-size:.98em}
.ask-page.is-now{border-color:var(--j-green);background:#eefbf1;transform:scale(1.02)}
.ask-storyrow{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  border:3px solid var(--j-line);border-radius:18px;background:#fff;padding:11px;
  box-shadow:var(--shadow-sm);margin-bottom:9px
}
.ask-storyrow__e{font-size:30px}
.ask-storyrow b{display:block;font-size:.98em}
.ask-storyrow span span{font-size:.76em;font-weight:700;color:var(--j-ink-2)}
.ask-storyrow__p{margin-left:auto;font-size:20px}

/* ---------------- voice picker ---------------- */
.ask-voicegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ask-voicebtn{
  border:3px solid var(--j-line);border-radius:16px;background:#fff;cursor:pointer;
  padding:9px 4px;font-weight:800;font-size:.72em;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:center;gap:3px
}
.ask-voicebtn b{font-size:24px;line-height:1}
.ask-voicebtn:active{transform:translateY(2px);box-shadow:none;background:#eefbf1}
.ask-row--stack{flex-direction:column;align-items:stretch;gap:8px}
.ask-row--stack label{margin-bottom:2px}