/* ActuallySpeak Kids — three strands on the path (🗣️ Words · 🔤 Sounds · 📖 Reading),
   the region goals strip, My Learning Path, and the vocabulary practice stages
   (build/spell the word, Listen & Tap, Say it to Kiki, sentence builder).
   Uses the theme-tropic tokens (css/kids-theme.css) with fallbacks.        */

:root {
  --s-words: var(--c5, #FF9214);   --s-words-d: var(--c5d, #D56500);   --s-words-soft: #FFF1DE;
  --s-sounds: var(--c3, #9B5CFF);  --s-sounds-d: var(--c3d, #6127D6);  --s-sounds-soft: #F1E9FF;
  --s-reading: var(--c1, #FF4FA3); --s-reading-d: var(--c1d, #D11F7A); --s-reading-soft: #FFE6F2;
}
.is-words { --s: var(--s-words); --s-d: var(--s-words-d); --s-soft: var(--s-words-soft); }
.is-sounds { --s: var(--s-sounds); --s-d: var(--s-sounds-d); --s-soft: var(--s-sounds-soft); }
.is-reading { --s: var(--s-reading); --s-d: var(--s-reading-d); --s-soft: var(--s-reading-soft); }

/* strand chip */
.asks-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 7px; border-radius: 999px;
  background: var(--s, #FF9214); color: #fff; font-weight: 900; font-size: .82em; line-height: 1.2;
  box-shadow: 0 2px 0 var(--s-d, #D56500); white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.asks-chip i { font-style: normal; font-size: 1.05em; }
.asks-chip small { font-weight: 800; opacity: .92; margin-left: 2px; }

/* ============================== MAP ============================== */
.askm-stop.is-s-words { --s: var(--s-words); --s-d: var(--s-words-d); --s-soft: var(--s-words-soft); }
.askm-stop.is-s-sounds { --s: var(--s-sounds); --s-d: var(--s-sounds-d); --s-soft: var(--s-sounds-soft); }
.askm-stop.is-s-reading { --s: var(--s-reading); --s-d: var(--s-reading-d); --s-soft: var(--s-reading-soft); }
.askm-node { position: relative; }
html .askm-stop.is-done[class*="is-s-"] .askm-node {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--s) 45%, #fff), var(--s) 60%, var(--s-d));
  box-shadow: 0 6px 0 var(--s-d), 0 10px 18px rgba(31,37,71,.2);
}
html .askm-stop.is-open[class*="is-s-"] .askm-node { background: #fff; color: var(--s-d); border-color: var(--s); box-shadow: 0 5px 0 var(--s-d); }
html .askm-stop.is-locked[class*="is-s-"] .askm-node { border-color: var(--s-soft); box-shadow: 0 4px 0 color-mix(in srgb, var(--s) 35%, var(--t-lock-2, #D8D2EE)); }
/* the strand badge on every stop */
.asks-badge {
  position: absolute; right: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: var(--s, #FF9214); border: 3px solid #fff; box-shadow: 0 2px 0 var(--s-d, #D56500);
}
.askm-stop.is-locked .asks-badge { width: 26px; height: 26px; font-size: 13px; right: -5px; top: -5px; opacity: .85; }
.askm-stop.is-here .asks-badge { width: 38px; height: 38px; font-size: 19px; right: -4px; top: -4px; border-width: 4px; }
.asks-here { margin-top: 6px; }

/* legend + region goals strip */
.asks-goals { margin: 10px 0 2px; }
.asks-legend { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.asks-legend .asks-chip { font-size: .74em; padding: 3px 9px 3px 6px; }
.asks-goals__card {
  background: rgba(255,255,255,.95); border-radius: 18px; padding: 8px 10px;
  box-shadow: 0 4px 0 rgba(76,29,149,.18), 0 8px 16px rgba(31,37,71,.1);
}
.asks-goals__h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; font-size: .84em; color: var(--j-ink, #1F2547); }
.asks-goals__h > b { font-weight: 900; color: var(--j-ink-2, #4A5182); font-size: .92em; letter-spacing: .02em; text-transform: uppercase; }
.asks-goals__h > span { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.asks-goals__h > span i { font-style: normal; }
.asks-goals__h > span b { color: var(--s-d); font-weight: 900; font-size: 1.1em; }
.asks-cando { display: flex; align-items: center; gap: 6px; margin-top: 6px; overflow-x: auto; scrollbar-width: none; margin-right: -10px; padding-right: 10px; }
.asks-cando::-webkit-scrollbar { display: none; }
.asks-cando > * { flex: 0 0 auto; }
.asks-cando__k { font-weight: 900; font-size: .72em; color: var(--j-ink-2, #4A5182); text-transform: uppercase; letter-spacing: .03em; }
.asks-cando__c {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 800; font-size: .8em; color: var(--s-words-d);
  background: var(--s-words-soft); border: 2px solid color-mix(in srgb, var(--s-words) 55%, #fff);
}
.asks-cando__c i { font-style: normal; font-size: .9em; }
.asks-cando__c:active { transform: translateY(2px); }
.asks-snd {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 8px;
  font: inherit; font-weight: 900; font-size: .88em; color: #fff; background: var(--s-sounds); box-shadow: 0 2px 0 var(--s-sounds-d); border: 0;
}

/* ============================== home card + segs ============================== */
.asks-progcard { position: relative; cursor: pointer; }
.asks-progcard__go {
  position: absolute; right: 12px; top: -11px; padding: 3px 10px; border-radius: 999px; font-weight: 900; font-size: .74em;
  color: #fff; background: var(--t-pick-grad, #7C3AED); box-shadow: 0 2px 0 var(--t-pick-edge, #5B1A9E);
}
.asks-seg3 button { font-size: .88em; padding-left: 4px; padding-right: 4px; white-space: nowrap; }

/* ============================== MY LEARNING PATH ============================== */
.asks-lp__kiki { margin: 12px 0 4px; }
.asks-lane {
  position: relative; margin-top: 14px; padding: 12px 12px 12px; border-radius: 22px; background: #fff;
  border: 3px solid var(--s); box-shadow: 0 5px 0 var(--s-d), 0 10px 20px rgba(31,37,71,.12);
}
.asks-lane__h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.asks-lane__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: 24px; background: var(--s); box-shadow: 0 3px 0 var(--s-d); }
.asks-lane__h > b { flex: 1; font-weight: 900; font-size: 1.15em; color: var(--j-ink, #1F2547); }
.asks-lane__n { font-weight: 900; font-size: 1.5em; color: var(--s-d); }
.asks-lane__n small { font-size: .55em; color: var(--j-ink-2, #4A5182); }
.asks-empty { padding: 10px; border-radius: 14px; background: var(--s-soft); font-weight: 800; color: var(--j-ink-2, #4A5182); text-align: center; }
.asks-topics { display: flex; flex-direction: column; gap: 8px; }
.asks-topic { background: var(--s-soft); border-radius: 16px; padding: 8px 8px 6px; }
.asks-topic__h { display: flex; align-items: center; gap: 6px; font-size: .9em; margin-bottom: 6px; }
.asks-topic__h span { font-size: 1.2em; }
.asks-topic__h b { flex: 1; font-weight: 900; }
.asks-topic__h small { font-weight: 900; color: var(--s-d); }
.asks-topic__w { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.asks-topic__w::-webkit-scrollbar { display: none; }
.asks-wchip { flex: 0 0 auto; position: relative; width: 62px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: center; }
.asks-wchip__pic { display: block; width: 62px; height: 52px; border-radius: 12px; overflow: hidden; position: relative; border: 2.5px solid #fff; box-shadow: 0 2px 0 rgba(31,37,71,.15); }
.asks-wchip__pic .ask-wordart, .asks-wchip__pic > * { width: 100%; height: 100%; }
.asks-wchip__pic svg, .asks-wchip__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asks-wchip small { display: block; font-weight: 800; font-size: .7em; color: var(--j-ink, #1F2547); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asks-wchip.is-star::after { content: "⭐"; position: absolute; top: -6px; right: -4px; font-size: 14px; }
.asks-more { flex: 0 0 auto; align-self: center; font-weight: 900; color: var(--s-d); padding: 0 6px; }
.asks-camps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.asks-camp {
  position: relative; display: grid; place-items: center; min-height: 40px; padding: 4px; border-radius: 12px;
  font-weight: 900; font-size: .78em; white-space: nowrap; overflow: hidden; color: var(--t-lock-ink, #6E6890); background: var(--t-lock, #E9E5F6);
}
.asks-camp.is-done { color: #fff; background: var(--s); box-shadow: 0 3px 0 var(--s-d); }
.asks-camp.is-next { color: var(--s-d); background: #fff; border: 2.5px dashed var(--s); }
.asks-camp i { position: absolute; top: -5px; right: -3px; width: 18px; height: 18px; border-radius: 50%; background: #22C55E; color: #fff; font-style: normal; font-size: 11px; display: grid; place-items: center; border: 2px solid #fff; }
.asks-books { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.asks-book { flex: 0 0 auto; position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.asks-book__c, .asks-next__cov { display: block; width: 70px; height: 70px; border-radius: 12px; overflow: hidden; background: var(--s-soft); border: 3px solid #fff; box-shadow: 0 3px 0 var(--s-d); }
.asks-book__c img, .asks-next__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asks-book__c.is-em::before, .asks-next__cov.is-em::before { content: attr(data-em); display: grid; place-items: center; height: 100%; font-size: 32px; }
.asks-book i { position: absolute; top: -5px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: #22C55E; color: #fff; font-style: normal; font-size: 12px; display: grid; place-items: center; border: 2px solid #fff; }
.asks-next {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; margin-top: 10px; padding: 8px 10px; border-radius: 18px;
  font: inherit; text-align: left; cursor: pointer; color: var(--j-ink, #1F2547);
  background: var(--s-soft); border: 3px solid var(--s); position: relative;
}
.asks-next:disabled { opacity: .7; cursor: default; }
.asks-next__k { position: absolute; top: -11px; left: 12px; padding: 1px 9px; border-radius: 999px; background: var(--s); color: #fff; font-weight: 900; font-size: .7em; }
.asks-next__pic { display: flex; gap: 4px; flex: 0 0 auto; }
.asks-next__pic i { display: block; width: 44px; height: 40px; border-radius: 9px; overflow: hidden; border: 2px solid #fff; }
.asks-next__pic i svg, .asks-next__pic i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asks-next__pic em { font-style: normal; font-weight: 900; font-size: 1.1em; padding: 8px 10px; border-radius: 12px; background: var(--s); color: #fff; }
.asks-next__cov { width: 52px; height: 52px; }
.asks-next__t { flex: 1; min-width: 0; font-weight: 900; font-size: .95em; line-height: 1.2; }
.asks-next__go { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 18px; color: #fff; background: var(--t-cta, var(--s)); box-shadow: 0 3px 0 var(--t-cta-edge, var(--s-d)); }
.asks-next:disabled .asks-next__go { background: var(--t-lock, #E9E5F6); box-shadow: none; }
.asks-next.is-all { justify-content: center; font-size: 1.05em; }
.asks-adult { display: none; margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--t-line, #E3DAFF); }
.asks-lp.is-adult .asks-adult { display: block; }
.asks-tab { width: 100%; border-collapse: collapse; font-size: .82em; }
.asks-tab th { text-align: left; font-weight: 700; color: var(--j-ink-2, #4A5182); padding: 4px 4px 4px 0; }
.asks-tab td { text-align: right; font-weight: 900; white-space: nowrap; padding: 4px 0; }
.asks-tab tr + tr { border-top: 1px solid var(--t-line, #E3DAFF); }
.asks-note { margin: 8px 0 0; font-size: .78em; font-weight: 600; color: var(--j-ink-2, #4A5182); line-height: 1.4; }
.asks-adult-tog {
  display: block; width: 100%; min-height: 50px; margin-top: 16px; border-radius: 16px; cursor: pointer; font: inherit; font-weight: 900;
  color: var(--j-ink-2, #4A5182); background: rgba(255,255,255,.8); border: 2.5px solid rgba(255,255,255,.95);
}

/* ============================== LESSON: hook + win ============================== */
.asks-hookstrand { margin-top: 10px; display: flex; justify-content: center; }
.asks-winstrand { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px 6px; margin: 4px 0 0; font-size: .92em; }
.asks-winstrand > small { font-weight: 800; font-size: .84em; color: var(--j-ink-2, #4A5182); background: rgba(255,255,255,.88); padding: 3px 10px; border-radius: 999px; }
.asks-winsnd { display: inline-flex; align-items: center; gap: 4px; }
.asks-winsnd > span { font-size: 15px; }
.asks-winsnd .asks-snd { cursor: pointer; min-width: 30px; height: 30px; }
.asks-dots { margin: 2px 0 10px; }
.asks-hear { width: 100%; }

/* ============================== SPELL / BUILD THE WORD ============================== */
.asks-spell { text-align: center; padding: 12px; }
.asks-spell__pic { position: relative; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 300 / 200; border-radius: 18px; overflow: hidden; }
.asks-spell__pic > :first-child { width: 100%; height: 100%; }
.asks-spell__pic svg, .asks-spell__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asks-spell__snd { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 3; }
.asks-spell__snd .ask-speak-btn { width: 48px; height: 48px; }
.asks-slots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.asks-slot, .asks-gap {
  display: grid; place-items: center; width: 44px; height: 54px; border-radius: 13px; font-weight: 900; font-size: 1.6em; line-height: 1;
  border: 3px dashed var(--t-line-d, #C6B6FA); background: #fff; color: var(--j-ink, #1F2547); text-transform: lowercase;
}
.asks-gap { border: 0; background: none; width: 14px; }
.asks-slot.is-given { border-style: solid; border-color: var(--s-words); background: var(--s-words-soft); color: var(--s-words-d); }
.asks-slot.is-fill { border-style: solid; border-color: var(--t-success-solid, #22C55E); background: var(--t-success-soft, #E6FFE0); animation: asksDrop .25s ease-out; }
.asks-slot.is-next { border-color: var(--s-words); box-shadow: 0 0 0 4px rgba(255,146,20,.22); animation: asksBreath 1.4s ease-in-out infinite; }
.asks-slots.is-win .asks-slot { border-color: var(--t-success-solid, #22C55E); background: var(--t-success, #3FE07A); color: #fff; }
.asks-slots.is-shake, .asks-wslots.is-shake { animation: asksShake .4s; }
.asks-tiles { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.asks-tiles.is-big { gap: 10px; }
.asks-tile {
  width: 48px; height: 56px; border-radius: 14px; border: 3px solid #fff; cursor: pointer; font: inherit; font-weight: 900; font-size: 1.6em; line-height: 1;
  color: #fff; background: linear-gradient(180deg, #FFB347, var(--s-words) 55%, var(--s-words-d)); box-shadow: 0 5px 0 var(--s-words-d), 0 8px 14px rgba(213,101,0,.25);
  text-shadow: 0 2px 0 rgba(0,0,0,.18); transition: transform .1s ease, opacity .2s ease;
}
.asks-tiles.is-big .asks-tile { width: 68px; height: 72px; font-size: 2.1em; border-radius: 18px; }
.asks-tile:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--s-words-d); }
.asks-tile.is-used { opacity: .18; box-shadow: none; transform: scale(.9); }
.asks-tile.is-no { animation: asksShake .4s; }
.asks-tile.is-hint { box-shadow: 0 5px 0 var(--s-words-d), 0 0 0 5px var(--t-sun, #FFC800), 0 0 22px rgba(255,200,0,.8); animation: asksBreath 1s ease-in-out infinite; }
.asks-spell__bar { display: flex; gap: 8px; margin-top: 12px; }
.asks-spell__bar .ask-btn { flex: 1; min-height: 52px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; padding: 0 10px; font-size: 1em; }
.asks-spell__bar .ask-btn::before, .asks-spell__bar .ask-btn::after { display: none; }
.asks-typein { width: 100%; margin-top: 10px; text-align: center; font-size: 1.4em; font-weight: 900; min-height: 56px; border-radius: 14px; }

/* ============================== SAY IT TO KIKI ============================== */
.asks-sayit { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.asks-sayit__kiki { display: flex; align-items: center; gap: 8px; }
.asks-sayit__kiki .kiki-host { flex: 0 0 auto; width: 82px; display: block; }
.asks-sayit__kiki .kiki-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 4px rgba(31,37,71,.2)); }
.asks-sayit__q {
  position: relative; flex: 1; padding: 12px 14px; border-radius: 18px; background: #fff; font-weight: 900; font-size: 1.2em; color: var(--j-ink, #1F2547);
  box-shadow: 0 3px 0 rgba(76,29,149,.18);
}
.asks-sayit__q::before { content: ""; position: absolute; left: -9px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right-color: #fff; border-left: 0; }
.asks-sayit__card { position: relative; padding: 10px; text-align: center; }
.asks-sayit__card > :first-child { display: block; width: 100%; max-width: 320px; margin: 0 auto; aspect-ratio: 300 / 200; border-radius: 16px; overflow: hidden; }
.asks-sayit__card > :first-child svg, .asks-sayit__card > :first-child img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asks-sayit__w { margin-top: 8px; font-weight: 900; font-size: 1.6em; color: var(--s-words-d); animation: asksDrop .3s ease-out; }
.asks-sayit__hear {
  margin-top: 8px; min-height: 48px; padding: 6px 18px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 900;
  color: var(--j-blue-d, #0369A1); background: #E6F6FF; border: 2.5px solid #9ED8F7;
}

/* ============================== LISTEN & TAP ============================== */
.asks-pop { animation: asksPop .45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--k, 0) * .07s); }

/* ============================== SENTENCE BUILDER ============================== */
.asks-build { text-align: center; padding: 14px 12px; }
.asks-build__pic { width: 150px; height: 104px; margin: 0 auto 8px; border-radius: 14px; overflow: hidden; }
.asks-build__pic > *, .asks-build__pic svg, .asks-build__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asks-frame { font-weight: 900; font-size: 1.45em; line-height: 1.6; color: var(--j-ink, #1F2547); margin: 4px 0 10px; }
.asks-gapslot {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 86px; min-height: 52px; margin: 0 4px; padding: 2px 10px;
  vertical-align: middle; border-radius: 14px; border: 3px dashed var(--s-words); background: var(--s-words-soft); color: var(--s-words-d);
}
.asks-gapslot.is-hintgap { min-width: 60px; min-height: 36px; font-size: .8em; }
.asks-gapslot.is-fill { border-style: solid; border-color: var(--t-success-solid, #22C55E); background: var(--t-success-soft, #E6FFE0); color: var(--j-ink, #1F2547); animation: asksDrop .3s ease-out; }
.asks-gapslot i { display: block; width: 46px; height: 36px; border-radius: 8px; overflow: hidden; }
.asks-gapslot i svg, .asks-gapslot i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asks-wslots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 48px; margin: 6px 0; }
.asks-wslot { min-width: 54px; height: 44px; padding: 0 8px; border-radius: 12px; border: 3px dashed var(--t-line-d, #C6B6FA); background: #fff; display: grid; place-items: center; font-weight: 900; font-size: 1.05em; }
.asks-wslot.is-fill { border-style: solid; border-color: var(--s-words); background: var(--s-words-soft); }
.asks-wtiles { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.asks-wtile {
  min-height: 52px; padding: 0 16px; border-radius: 14px; border: 3px solid #fff; cursor: pointer; font: inherit; font-weight: 900; font-size: 1.1em;
  color: #fff; background: linear-gradient(180deg, #FFB347, var(--s-words) 55%, var(--s-words-d)); box-shadow: 0 4px 0 var(--s-words-d);
}
.asks-wtile.is-used { opacity: .2; box-shadow: none; }
.asks-wtile:active { transform: translateY(3px); }

@keyframes asksDrop { 0% { transform: translateY(-10px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes asksPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes asksBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes asksShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) {
  .asks-slot, .asks-tile, .asks-pop, .asks-gapslot, .asks-sayit__w, .asks-slots, .asks-wslots { animation: none !important; }
}
.ask-reduced .asks-slot, .ask-reduced .asks-tile, .ask-reduced .asks-pop, .ask-reduced .asks-gapslot { animation: none !important; }

/* painted Kiki in the practice stages' coach row */
.asks-coach .kiki-host { flex: 0 0 auto; display: block; width: 78px; }
.asks-coach .kiki-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 4px rgba(31,37,71,.2)); }