/* ActuallySpeak Kids — remember & call back (js/kids-recall.js) and the
   livelier reader moments in kids-read.js. */

/* ---------------- the recall card ---------------- */
.askrc{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:4px 0 6px}
.askrc__head{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}
.askrc__t{font-weight:900;font-size:1.05em;color:var(--t-ink,#1F2547)}
.askrc__n{font-weight:900;font-size:.8em;padding:4px 10px;border-radius:999px;background:var(--t-pick-soft,#F4ECFF);color:var(--t-pick-edge,#5B1A9E)}
.askrc-from{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 12px;border-radius:999px;
  font-weight:800;font-size:.82em;line-height:1.2;color:#fff;background:var(--t-pick-grad,linear-gradient(135deg,#7C3AED,#DB2777));
  box-shadow:0 3px 0 var(--t-pick-edge,#5B1A9E);
}
.askrc-from b{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.askrc-from.is-book{background:linear-gradient(135deg,#FF9A1A,#FF3D7F);box-shadow:0 3px 0 #C21E5C}
.askrc__pic{
  position:relative;overflow:hidden;width:min(200px,56vw);aspect-ratio:1;border-radius:28px;border:4px solid #fff;padding:0;cursor:pointer;
  background:radial-gradient(circle at 50% 40%,#fff 0,#FFF7D6 70%);display:grid;place-items:center;font-size:96px;line-height:1;
  box-shadow:0 0 0 4px var(--t-sun,#FFC800),0 10px 24px rgba(31,37,71,.18);
  animation:askrcIn .45s cubic-bezier(.2,1.5,.4,1) both;
}
.askrc__pic img{width:100%;height:100%;object-fit:cover}
.askrc__pic.is-wig{animation:askrcWig .5s ease}
.askrc__shine{position:absolute;inset:0;background:var(--t-gloss);background-size:250% 100%;animation:askrcShine 2.8s ease-in-out infinite;pointer-events:none}
.askrc__q{font-weight:900;font-size:1.15em;color:var(--t-ink,#1F2547)}
.askrc__q b{color:var(--t-pick,#A030E8)}
.askrc__ans{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:44px}
.askrc__ans i{
  width:34px;height:42px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:1.45em;
  background:#fff;border:3px dashed var(--t-line-d,#C6B6FA);color:var(--t-ink,#1F2547);text-transform:lowercase;
}
.askrc__ans i.is-gap{width:12px;border:0;background:none}
.askrc__ans i.is-on{border-style:solid;border-color:var(--t-sun-d,#E08A00);background:var(--t-gold,#FFE14D);animation:askrcPop .35s ease both}
.askrc.is-yes .askrc__ans i{border-color:#16A34A;background:#DCFCE7}
.askrc.is-yes .askrc__pic{box-shadow:0 0 0 4px #22C55E,0 0 28px rgba(34,197,94,.6)}
.askrc__mic{width:100%}
.askrc__mic .ask-micbtns{display:none}                 /* our own help ladder instead of "Hear it" */
.askrc__opts{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
.askrc__o{
  display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:18px;cursor:pointer;
  font:inherit;font-weight:900;font-size:1.3em;color:var(--t-ink,#1F2547);background:#fff;border:3px solid var(--t-line-d,#C6B6FA);
  box-shadow:0 4px 0 var(--t-line-d,#C6B6FA);
}
.askrc__o i{font-style:normal;font-size:.75em;opacity:.7}
.askrc__o:active{transform:translateY(3px);box-shadow:0 1px 0 var(--t-line-d,#C6B6FA)}
.askrc__o.is-heard{border-color:var(--t-pick,#A030E8);box-shadow:var(--t-pick-glow),0 4px 0 var(--t-pick-edge,#5B1A9E)}
.askrc__o.is-right{background:#DCFCE7;border-color:#16A34A;box-shadow:0 4px 0 #15803D}
.askrc__o.is-wrong{animation:askrcNo .4s ease}
.askrc__o.is-dim{opacity:.45}
.askrc__o.is-hint{animation:askrcHint 1s ease-in-out infinite}
.askrc__help{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.askrc__hb{
  font:inherit;font-weight:900;font-size:.9em;padding:9px 16px;border-radius:999px;cursor:pointer;
  background:#fff;color:var(--t-ink-2,#4A5182);border:2.5px solid var(--t-line,#E3DAFF);box-shadow:0 3px 0 var(--t-line-d,#C6B6FA);
}
.askrc__hb:disabled{opacity:.45}
@keyframes askrcIn{from{transform:scale(.6) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@keyframes askrcWig{0%,100%{transform:none}25%{transform:rotate(-6deg) scale(1.05)}60%{transform:rotate(5deg) scale(1.05)}}
@keyframes askrcShine{0%,55%{background-position:150% 0}100%{background-position:-60% 0}}
@keyframes askrcPop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:none}}
@keyframes askrcNo{0%,100%{transform:none}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes askrcHint{0%,100%{box-shadow:0 4px 0 var(--t-line-d,#C6B6FA)}50%{box-shadow:0 0 0 5px var(--t-sun,#FFC800),0 4px 0 var(--t-line-d,#C6B6FA)}}

/* lesson: "you saw this in a book" */
.askrc-teachfrom{
  display:inline-block;margin:0 auto 8px;padding:5px 12px;border-radius:999px;font-weight:800;font-size:.8em;
  color:#fff;background:linear-gradient(135deg,#FF9A1A,#FF3D7F);box-shadow:0 3px 0 #C21E5C;
}
/* win page: look out for it in the next book */
.askrc-ahead{
  display:flex;align-items:center;gap:10px;margin:10px 0;padding:10px 12px;border-radius:18px;text-align:left;
  background:#fff;border:3px solid #FF9A1A;box-shadow:0 4px 0 #C2410C;
}
.askrc-ahead__ic{font-size:30px;line-height:1}
.askrc-ahead__t{flex:1;min-width:0;display:flex;flex-direction:column;color:var(--t-ink,#1F2547)}
.askrc-ahead__t small{font-size:.72em;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#C2410C}
.askrc-ahead__t b{font-weight:900;font-size:.95em;line-height:1.2}
.askrc-ahead__go{font:inherit;font-weight:900;padding:9px 14px;border-radius:999px;border:0;color:#fff;cursor:pointer;background:var(--t-cta);box-shadow:0 3px 0 var(--t-cta-edge,#C21E5C)}
.askrc-ahead__soon{font-weight:900;font-size:.8em;color:var(--t-ink-2,#4A5182);white-space:nowrap}

/* ---------------- the reader ---------------- */
.askrd-rem__body{padding:8px 16px 0}
.askrd-rem .askrd-skip{display:block;margin:12px auto 20px}
/* words the child already knows from lessons */
.askrd-w.is-known{background:linear-gradient(180deg,transparent 62%,rgba(255,200,0,.55) 62%);border-radius:6px}
.askrd-w.is-known::after{content:'⭐';font-size:.45em;vertical-align:super;margin-left:1px}
.askrd-kw{position:relative}
.askrd-kw.is-known{border-color:var(--t-sun,#FFC800) !important;box-shadow:0 0 0 3px rgba(255,200,0,.35)}
.askrd-kw__known{position:absolute;top:-10px;right:10px;padding:2px 9px;border-radius:999px;font-weight:900;font-size:.68em;background:var(--t-gold);color:var(--t-gold-ink,#5A2E00);box-shadow:0 2px 0 var(--t-gold-edge,#D97706)}
.askrd-find.is-known{background:var(--t-gold);color:var(--t-gold-ink,#5A2E00)}
.askrd-wsheet__known{margin:6px 0 2px;padding:7px 12px;border-radius:14px;font-weight:800;font-size:.85em;background:#FFF7D6;color:#7A4A00;border:2px solid var(--t-sun,#FFC800)}
/* the picture is alive */
.askrd-rd__pic{cursor:pointer}
.askrd-rd__pic.is-boing img{animation:askrdBoing .6s cubic-bezier(.2,1.6,.4,1)}
.askrd-spark{position:absolute;z-index:5;font-style:normal;font-size:24px;pointer-events:none;animation:askrdSpark 1.1s ease-out both}
@keyframes askrdBoing{0%{transform:scale(1)}30%{transform:scale(1.06) rotate(-1deg)}60%{transform:scale(.98) rotate(.6deg)}100%{transform:none}}
@keyframes askrdSpark{0%{transform:scale(0) rotate(0);opacity:0}25%{transform:scale(1.3) rotate(40deg);opacity:1}100%{transform:translateY(-36px) scale(.6) rotate(140deg);opacity:0}}
/* story memory: which picture / what came first */
.askrd-mt__line{margin:0 0 12px;padding:12px 14px;border-radius:18px;background:#fff;font-weight:900;font-size:1.2em;line-height:1.3;color:var(--t-ink,#1F2547);border:3px solid var(--t-line,#E3DAFF);text-align:center}
.askrd-mt{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.askrd-mt.is-three{grid-template-columns:1fr 1fr 1fr;gap:8px}
.askrd-mt__o{position:relative;padding:0;border-radius:20px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;background:#EEE;border:4px solid #fff;box-shadow:0 5px 0 var(--t-line-d,#C6B6FA),0 8px 16px rgba(31,37,71,.15)}
.askrd-mt.is-three .askrd-mt__o{aspect-ratio:3/4}
.askrd-mt__o img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.askrd-mt__o img.is-on{opacity:1}
.askrd-mt__o.is-right{border-color:#22C55E;box-shadow:0 0 0 4px #22C55E,0 0 26px rgba(34,197,94,.55)}
.askrd-mt__o.is-wrong{animation:askrcNo .4s ease}
.askrd-mt__o.is-dim{opacity:.45}
.askrd-mt__n{position:absolute;top:8px;left:8px;width:38px;height:38px;border-radius:50%;display:none;place-items:center;font-style:normal;font-weight:900;font-size:1.3em;color:#fff;background:var(--t-pick-grad);box-shadow:0 3px 0 var(--t-pick-edge,#5B1A9E)}
.askrd-mt__o.is-numbered .askrd-mt__n{display:grid;animation:askrcPop .35s ease both}
/* end page: words to take away */
.askrd-take{margin:14px 0 6px;padding:12px;border-radius:20px;background:#fff;border:3px solid var(--t-line,#E3DAFF)}
.askrd-take__h{font-weight:900;font-size:.95em;margin-bottom:8px;color:var(--t-ink,#1F2547)}
.askrd-take__row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.askrd-take__w{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border-radius:14px;cursor:pointer;font:inherit;background:var(--t-pick-soft,#F4ECFF);border:2px solid transparent}
.askrd-take__w.is-known{background:#FFF7D6;border-color:var(--t-sun,#FFC800)}
.askrd-take__pic{width:48px;height:48px;display:grid;place-items:center;font-size:34px;line-height:1;overflow:hidden;border-radius:12px}
.askrd-take__pic img{width:100%;height:100%;object-fit:cover}
.askrd-take__w b{font-weight:900;font-size:.82em;color:var(--t-ink,#1F2547)}
.askrd-take__w i{position:absolute;top:-6px;right:-4px;font-style:normal;font-size:.9em}
.askrd-take__s{margin-top:8px;font-weight:800;font-size:.8em;color:var(--t-ink-2,#4A5182)}

@media (prefers-reduced-motion:reduce){
  .askrc__pic,.askrc__shine,.askrc__ans i.is-on,.askrd-rd__pic.is-boing img,.askrd-spark,.askrc__o.is-hint{animation:none}
}

/* the on-model Kiki wherever the app used to draw its SVG stand-in */
.ask-kiki--img{display:block;width:100%;line-height:0}
.ask-kiki--img > img, .ask-kiki--img .kiki-anim{display:block;width:100%;height:auto}

/* ================= the microphone: one big, friendly, alive button =================
   Ready: a glossy orange-to-pink button with a white mic, gently breathing,
   two soft ripples inviting a tap. Recording: it turns red with a stop
   square and the ripples race. Thinking: a sparkle ring spins. The emoji
   text the panel writes into the button is hidden; the icon comes from CSS. */
.ask-micwrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 4px}
.ask-wave{height:38px;margin:0;gap:4px}
.ask-wave i{width:6px;border-radius:4px;background:linear-gradient(180deg,#FF9A1A,#FF3D7F);height:6px;opacity:.85}
html[class*="theme-"] .ask-mic, .ask-mic, .ask-mic:not(.is-rec):not(.is-busy){
  width:124px;height:124px;border-radius:50%;margin:10px auto 6px;position:relative;cursor:pointer;
  font-size:0 !important;color:transparent;border:5px solid #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='22' y='6' width='20' height='34' rx='10' fill='white'/%3E%3Cpath d='M14 30a18 18 0 0 0 36 0' fill='none' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M32 48v8M22 58h20' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/52% no-repeat,
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 38%),
    linear-gradient(160deg,#FFB21A 0%,#FF6A2E 45%,#FF3D7F 100%);
  box-shadow:0 7px 0 #C21E5C,0 0 0 8px rgba(255,106,46,.18),0 16px 30px rgba(194,30,92,.35);
  animation:askMicBreathe 2.6s ease-in-out infinite;
}
.ask-mic::before,.ask-mic::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:4px solid rgba(255,106,46,.45);
  animation:askMicRipple 2.6s ease-out infinite;pointer-events:none
}
.ask-mic::after{animation-delay:1.3s}
.ask-mic:active{transform:translateY(5px) scale(.97);box-shadow:0 2px 0 #C21E5C,0 0 0 8px rgba(255,106,46,.18)}
html[class*="theme-"] .ask-mic.is-rec, .ask-mic.is-rec{
  animation:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='20' y='20' width='24' height='24' rx='6' fill='white'/%3E%3C/svg%3E") center/50% no-repeat,
    linear-gradient(160deg,#FF5A6E 0%,#E11D48 100%);
  box-shadow:0 7px 0 #9F1239,0 0 0 10px rgba(225,29,72,.18),0 16px 30px rgba(159,18,57,.4);
}
.ask-mic.is-rec::before,.ask-mic.is-rec::after{border-color:rgba(225,29,72,.5);animation-duration:1.1s}
html[class*="theme-"] .ask-mic.is-busy, .ask-mic.is-busy{
  animation:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8l5 15 15 5-15 5-5 15-5-15-15-5 15-5z' fill='white'/%3E%3C/svg%3E") center/48% no-repeat,
    linear-gradient(160deg,#8B5CF6 0%,#6D28D9 100%);
  box-shadow:0 7px 0 #4C1D95,0 16px 30px rgba(76,29,149,.35);
}
.ask-mic.is-busy::before{inset:-8px;border:4px dashed rgba(139,92,246,.6);animation:askMicSpin 1.4s linear infinite}
.ask-mic.is-busy::after{display:none}
.ask-micstate{margin:4px 0 0;font-size:1.05em;line-height:1.3;max-width:300px;padding:0 8px}
.ask-micbtns{margin-top:4px;gap:10px}
@keyframes askMicBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes askMicRipple{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.45);opacity:0}}
@keyframes askMicSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .ask-mic,.ask-mic::before,.ask-mic::after{animation:none} }

/* coach row: Kiki and his bubble sit level, with room to breathe */
.ask-coachrow{align-items:center;gap:12px;margin:10px 0 14px}
.ask-coachrow .ask-kiki,.ask-coachrow .kiki-host{width:78px;flex:0 0 auto}
.ask-coachrow__say{font-size:1.12em;line-height:1.3;padding:12px 16px}
.ask-coachrow__say:after{bottom:auto;top:50%;transform:translateY(-50%)}
/* picture choices: big square cards */
.ask-opts--three{grid-template-columns:repeat(3,1fr);gap:10px}
.ask-opts .ask-opt .ask-wordart{aspect-ratio:1/1;height:auto}

/* ================= spelling helper: tap a box, choose from a few =================*/
.asks-slot.is-open{border-color:var(--t-pick,#A030E8) !important;box-shadow:0 0 0 4px rgba(160,48,232,.25);animation:askrcPop .3s ease}
.asks-slot[data-slot]{cursor:pointer}
.asks-pick{display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0 2px;padding:10px 12px;border-radius:18px;
  background:var(--t-pick-soft,#F4ECFF);border:2px dashed var(--t-pick,#A030E8);animation:askrcIn .3s ease both}
.asks-pick__q{font-weight:900;color:var(--t-ink,#1F2547);font-size:.95em;display:flex;align-items:center;gap:8px}
.asks-pick__q button{border:0;background:#fff;border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;box-shadow:0 2px 0 var(--t-line-d,#C6B6FA)}
.asks-pick__row{display:flex;gap:10px}
.asks-pick__o{width:58px;height:58px;border-radius:16px;font:inherit;font-weight:900;font-size:1.8em;cursor:pointer;
  background:#fff;color:var(--t-ink,#1F2547);border:3px solid var(--t-line-d,#C6B6FA);box-shadow:0 4px 0 var(--t-line-d,#C6B6FA)}
.asks-pick__o.is-no{opacity:.35;animation:askrcNo .4s ease}
.asks-pick__o.is-yes{background:#DCFCE7;border-color:#16A34A;box-shadow:0 4px 0 #15803D}
.asks-helptip{text-align:center;font-weight:800;font-size:.85em;color:var(--t-ink-2,#4A5182);margin-top:6px}

/* ================= drag and drop ================= */
.asks-tile,.asks-wtile,.asks-bpics .ask-opt{touch-action:none;-webkit-user-select:none;user-select:none}
.is-dragging{opacity:.3}
.askdrag-ghost{transform:scale(1.12) rotate(-4deg);box-shadow:0 14px 26px rgba(31,37,71,.3) !important;transition:none;opacity:.96}
html.askdrag-on, html.askdrag-on *{cursor:grabbing !important}
.asks-slot.is-over,.asks-wslot.is-over,#bGap.is-over{border-color:var(--t-pick,#A030E8) !important;background:var(--t-pick-soft,#F4ECFF) !important;
  box-shadow:0 0 0 5px rgba(160,48,232,.28) !important;transform:scale(1.08)}
.asks-slot.is-no{animation:askrcNo .4s ease}
/* keep the speaking screens on one phone screen: a slightly smaller picture */
.ask-wordcard .ask-wordart{max-width:240px;margin-left:auto;margin-right:auto}

/* ================= fun type: self-hosted (China-safe) rounded fonts ================= */
@font-face{font-family:'Fredoka';src:url('../art/fonts/fredoka-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Baloo 2';src:url('../art/fonts/baloo2-latin.woff2') format('woff2');font-weight:400 800;font-display:swap}

/* Kiki's speech bubble: a candy bubble, not a form field */
.ask-coachrow__say,html[class*="theme-"] .ask-coachrow__say{
  font-family:'Fredoka','Baloo 2',var(--font);font-weight:600;font-size:1.22em;line-height:1.2;letter-spacing:.01em;
  color:#2B1A5E;padding:12px 16px 13px;border-radius:24px;
  border:4px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#FFB21A,#FF3D7F 55%,#A030E8) border-box;
  box-shadow:0 5px 0 rgba(160,48,232,.25),0 10px 20px rgba(31,37,71,.12);
  animation:askSayIn .45s cubic-bezier(.2,1.5,.4,1) both;
}
.ask-coachrow__say:after,html[class*="theme-"] .ask-coachrow__say:after{border-right-color:#FF6A2E}
/* the key word: a bouncy candy pill */
.ask-coachrow__say b{
  display:inline-block;margin:2px 2px 0;padding:1px 12px 3px;border-radius:14px;
  font-family:'Fredoka',var(--font);font-weight:700;font-size:1.18em;color:#fff;
  background:linear-gradient(160deg,#FFB21A 0%,#FF6A2E 45%,#FF3D7F 100%);
  box-shadow:0 3px 0 #C21E5C;text-shadow:0 1px 0 rgba(0,0,0,.18);
  transform:rotate(-3deg);animation:askWordBob 2.4s ease-in-out .5s infinite;
}
@keyframes askSayIn{from{transform:scale(.7) translateX(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes askWordBob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(2deg) translateY(-3px)}}

/* the big word on a card */
.ask-wordcard .ask-w{
  font-family:'Fredoka','Baloo 2',var(--font);font-weight:700;font-size:2.6em;line-height:1.05;letter-spacing:.02em;
  background:linear-gradient(180deg,#FF6A2E 0%,#FF3D7F 55%,#A030E8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(160,48,232,.18));
}
.ask-wordcard .ask-syl{font-family:'Fredoka',var(--font);font-weight:600;letter-spacing:.12em;color:#7C3AED}
.asks-slot,.asks-tile,.asks-pick__o,.askrc__ans i,.askrc__o{font-family:'Fredoka','Baloo 2',var(--font)}
.ask-micstate{font-family:'Fredoka',var(--font);font-weight:600;font-size:1.12em;color:#3B1A7A}
@media (prefers-reduced-motion:reduce){ .ask-coachrow__say,.ask-coachrow__say b{animation:none} }