/* ActuallySpeak Kids — read2 redesign layer: the Stories tab (bookshelf +
   Sounds) and the one-page-at-a-time reader. Everything is namespaced
   .askrd-* so it cannot collide with the lesson-page .ask-bookpg styles. */

/* ---------------- Kiki (the lead upgrades every .kiki-host) ---------------- */
.askrd .kiki-host,.askrd-sheet .kiki-host,.askrd-done .kiki-host{display:inline-block;flex:0 0 auto;line-height:0}
.askrd .kiki-img,.askrd-sheet .kiki-img,.askrd-done .kiki-img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 6px rgba(60,30,10,.22))}

/* ---------------- Books | Sounds segment ---------------- */
.askrd{padding-top:14px}
.askrd-seg{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:16px;
  background:#fff;border:3px solid var(--j-line);border-radius:999px;box-shadow:var(--sticker-sm);
}
.askrd-seg button{
  min-height:56px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-weight:900;font-size:1.12em;color:var(--j-ink-2);
}
.askrd-seg button span{font-size:1.25em;line-height:1}
.askrd-seg button.is-on{background:var(--j-green-btn);color:#fff;box-shadow:0 4px 0 var(--j-green-d)}
.askrd-seg button:active{transform:translateY(2px)}

/* section heads: one short word or two, never a sentence */
.askrd-h{display:flex;align-items:center;gap:8px;margin:4px 2px 10px}
.askrd-h b{font-size:1.18em;font-weight:900;color:var(--j-green-d)}
.askrd-h span{
  font-weight:900;font-size:.82em;color:var(--j-green-d);background:#E6F4E1;
  border:2px solid #CDE8C6;border-radius:999px;padding:1px 10px;
}
.askrd-h--soft{margin-top:22px}
.askrd-h--soft b{color:var(--j-ink-2)}

/* ---------------- Keep reading ---------------- */
.askrd-cont{
  width:100%;display:grid;grid-template-columns:96px 1fr 60px;align-items:center;gap:12px;
  padding:10px 12px 10px 10px;margin:0 0 20px;cursor:pointer;text-align:left;color:var(--j-ink);
  background:linear-gradient(180deg,#F3FBEF,#fff);border:4px solid var(--j-green-d);border-radius:24px;
  box-shadow:0 6px 0 var(--j-green-d),0 14px 24px rgba(37,110,49,.2);
}
.askrd-cont:active{transform:translateY(4px);box-shadow:0 2px 0 var(--j-green-d)}
.askrd-cont__pic{position:relative;width:96px;height:96px;border-radius:16px;overflow:hidden;display:block;border:3px solid #fff;box-shadow:var(--sticker-sm)}
.askrd-cont__pic img{width:100%;height:100%;object-fit:cover;display:block}
.askrd-cont__b{display:flex;flex-direction:column;gap:3px;min-width:0}
.askrd-cont__b i{font-style:normal;font-size:.74em;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--j-green-d)}
.askrd-cont__b b{font-size:1.18em;font-weight:900;line-height:1.12}
.askrd-cont__dots{display:flex;gap:3px;margin-top:4px;flex-wrap:nowrap}
.askrd-cont__dots em{flex:0 0 auto;width:8px;height:8px;border-radius:999px;background:var(--j-line)}
.askrd-cont__dots em.is-done{background:var(--j-green)}
.askrd-cont__dots em.is-here{width:18px;background:var(--j-green-d)}
.askrd-cont__go{
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:26px;padding-left:4px;
  background:var(--j-green-btn);color:#fff;box-shadow:0 4px 0 var(--j-green-d);
  animation:askrdPulse 2.6s ease-in-out infinite;
}
@keyframes askrdPulse{0%,78%,100%{transform:none}86%{transform:scale(1.08)}}

/* ---------------- nothing to read yet ---------------- */
.askrd-first{
  display:flex;align-items:center;gap:10px;padding:12px 14px;margin:0 0 20px;
  background:linear-gradient(180deg,#F3FBEF,#fff);border:4px solid var(--j-green-d);border-radius:24px;
  box-shadow:0 6px 0 var(--j-green-d),0 14px 24px rgba(37,110,49,.2);
}
.askrd-first .kiki-host{width:92px}
.askrd-first__b{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.askrd-first__b b{font-size:1.25em;font-weight:900;line-height:1.15}
.askrd-first__go{width:100%;min-height:60px;font-size:1.06em;padding:0 10px;white-space:nowrap}

/* ---------------- the shelf ---------------- */
.askrd-shelf{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.askrd-book,.askrd-scene{
  display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:0;margin:0;
  background:none;border:0;cursor:pointer;text-align:center;color:var(--j-ink);min-width:0;
}
.askrd-cover{
  position:relative;display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#CFE9C3,#9ACB86);
  border:4px solid #fff;box-shadow:var(--sticker);transition:transform .1s,box-shadow .1s;
}
/* a painted spine down the left edge so it reads as a book, not a photo */
.askrd-cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:9px;z-index:2;
  background:linear-gradient(90deg,rgba(60,35,10,.38),rgba(60,35,10,.06));
}
.askrd-cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.askrd-cover__img.is-sheet{object-position:50% 0}
.askrd-book:active .askrd-cover,.askrd-scene:active .askrd-scene__pic{transform:translateY(4px);box-shadow:0 1px 0 rgba(90,60,20,.15)}
.askrd-book__t{
  font-weight:900;font-size:1.02em;line-height:1.14;padding:0 2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.askrd-book__s{font-size:.78em;font-weight:800;color:var(--j-ink-2);margin-top:-4px}

.askrd-badge{position:absolute;z-index:3;font-weight:900;line-height:1;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.askrd-badge--new{
  top:8px;left:14px;padding:5px 9px;border-radius:999px;font-size:.72em;letter-spacing:.05em;
  background:linear-gradient(180deg,#FFD167,var(--j-yellow));color:#5A3A06;border:2px solid #fff;
}
.askrd-badge--done{
  top:8px;right:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  background:var(--j-green-btn);color:#fff;border:2.5px solid #fff;
}
.askrd-badge--plan{
  bottom:8px;right:8px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  background:#fff;border:2.5px solid var(--j-line);
}

/* locked: still on the shelf, but soft */
.askrd-book.is-locked .askrd-cover{box-shadow:var(--sticker-sm);background:var(--t-line,#EFE6D2)}
.askrd-book.is-locked .askrd-cover__img{filter:grayscale(.75) brightness(1.08);opacity:.5}
.askrd-book.is-locked .askrd-book__t{color:var(--j-ink-2)}
.askrd-lock{
  position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:27px;
  background:rgba(255,255,255,.94);border:3px solid var(--j-line);box-shadow:0 3px 0 rgba(90,60,20,.14);
}

/* ---------------- Sounds ---------------- */
.askrd-camps{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.askrd-camp{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 10px;padding:10px 10px 12px 12px;
  background:#fff;border:3px solid var(--j-line);border-radius:20px;box-shadow:var(--sticker-sm);
}
.askrd-camp__n{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:1.25em;background:var(--t-line,#F1E8D6);color:var(--j-ink-2);border:3px solid #fff;
  box-shadow:0 2px 0 rgba(90,60,20,.14);
}
.askrd-camp.is-done .askrd-camp__n{background:linear-gradient(180deg,#FFE08A,var(--j-yellow));color:#5A3A06}
.askrd-camp.is-next{border-color:var(--j-green);box-shadow:0 4px 0 var(--j-green-d)}
.askrd-camp.is-next .askrd-camp__n{background:var(--j-green-btn);color:#fff}
.askrd-camp__b{display:contents}
.askrd-camp__t{grid-column:2;font-size:1em;font-weight:900;color:var(--j-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.askrd-camp__g{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;gap:7px}
.askrd-chip{
  display:inline-flex;align-items:center;gap:3px;min-height:48px;min-width:56px;padding:0 9px;justify-content:center;
  border-radius:14px;border:2.5px solid var(--j-line);background:var(--j-cream-2);cursor:pointer;
  box-shadow:0 3px 0 var(--j-line);
}
.askrd-chip b{font-size:1.32em;font-weight:900;color:var(--j-green-d);line-height:1}
.askrd-chip i{font-style:normal;font-size:1.05em;line-height:1}
.askrd-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--j-line)}
.askrd-chip.is-pop{animation:askrdPop .45s ease}
.askrd-chip.is-off{cursor:default;min-height:40px;min-width:44px;box-shadow:none;background:var(--t-paper,#F6F0E3)}
.askrd-chip.is-off b{color:var(--t-line-d,#B9A688);font-size:1.1em}
.askrd-camp.is-locked{background:var(--t-paper,#FBF7EE);box-shadow:none}
.askrd-camp.is-locked .askrd-camp__t{color:#A8957A}
.askrd-camp__go{
  grid-column:3;grid-row:1;width:56px;height:56px;flex:0 0 auto;border-radius:50%;border:0;cursor:pointer;font-size:22px;padding-left:4px;
  background:var(--j-green-btn);color:#fff;box-shadow:0 4px 0 var(--j-green-d);
}
.askrd-camp__go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--j-green-d)}
.askrd-camp__lock{grid-column:3;grid-row:1;width:48px;height:48px;flex:0 0 auto;border:0;background:none;font-size:22px;cursor:pointer;opacity:.7}
.is-nope{animation:askrdNope .4s ease}

.askrd-scene__pic{
  position:relative;display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#CFE9C3,#9ACB86);border:4px solid #fff;box-shadow:var(--sticker);
}
.askrd-scene__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.askrd-scene__ic{
  position:absolute;right:8px;bottom:8px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:20px;background:rgba(255,255,255,.95);box-shadow:0 2px 0 rgba(0,0,0,.15)
}
.askrd-scene.is-locked .askrd-scene__pic{box-shadow:var(--sticker-sm)}
.askrd-scene.is-locked .askrd-scene__pic img{filter:grayscale(.75) brightness(1.08);opacity:.5}
.askrd-scene.is-locked .askrd-book__t{color:var(--j-ink-2)}

/* ---------------- overlay sheet (locked book, mic) ---------------- */
.askrd-ov{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(40,25,10,.48);animation:askrdFade .2s ease;
}
.askrd-sheet{
  position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;
  padding:20px 18px calc(22px + env(safe-area-inset-bottom));
  background:var(--j-cream-2);border-radius:28px 28px 0 0;border-top:4px solid #fff;
  box-shadow:0 -10px 30px rgba(0,0,0,.2);animation:askrdUp .28s cubic-bezier(.2,.9,.3,1.2);
  display:flex;flex-direction:column;gap:12px;
}
.askrd-sheet__x{
  position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:3px solid var(--j-line);background:#fff;font-size:20px;font-weight:900;color:var(--j-ink)
}
.askrd-sheet__top{display:flex;align-items:flex-end;justify-content:center;gap:4px;padding-top:4px}
.askrd-sheet .kiki-host{width:96px;margin-left:-10px}
.askrd-cover--sm{width:104px;flex:0 0 auto}
.askrd-cover--sm .askrd-cover__img{filter:grayscale(.6);opacity:.6}
.askrd-cover--sm .askrd-lock{width:46px;height:46px;font-size:22px}
.askrd-sheet__say{
  font-size:1.38em;font-weight:900;line-height:1.2;text-align:center;padding:0 30px;color:var(--j-ink)
}
.askrd-sheet__later{
  min-height:52px;border:0;background:none;cursor:pointer;font-weight:800;font-size:1.02em;color:var(--j-ink-2)
}
.askrd-sheet--mic .askrd-sheet__say{padding-top:4px}
.askrd-sheet__line{
  font-size:26px;font-weight:800;line-height:1.4;text-align:center;color:var(--j-ink);
  background:#fff;border:3px solid var(--j-line);border-radius:18px;padding:10px 14px
}
.askrd-sheet--mic .ask-micwrap{padding-top:0}

/* ---------------- the reader ---------------- */
.askrd-rd{min-height:100vh;padding-bottom:116px;background:var(--j-cream)}
.askrd-rd__top{gap:12px}
.askrd-x{width:52px;height:52px;font-size:22px;font-weight:900}
.askrd-rd__title{
  font-weight:900;font-size:1.08em;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.22);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.askrd-rd__page{padding:14px 16px 0}
.askrd-rd__pic{
  position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,#CFE9C3,#9ACB86);border:4px solid #fff;box-shadow:var(--sticker);
}
.askrd-rd__ic{position:absolute;inset:0;display:grid;place-items:center;font-size:84px}
.askrd-rd__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.askrd-rd__pic img.is-on{opacity:1}
.askrd-rd__text{
  margin-top:14px;padding:14px 14px;text-align:center;
  font-size:30px;font-weight:800;line-height:1.55;color:#2A1E12;letter-spacing:.01em;
  background:#fff;border:3px solid var(--j-line);border-radius:22px;box-shadow:var(--sticker-sm);
  transition:border-color .2s,box-shadow .2s;
}
@media (max-width:370px){ .askrd-rd__text{font-size:27px} }
/* tall phones: let the painting grow a little taller (a gentle side crop) */
@media (min-height:780px) and (max-width:480px){ .askrd-rd__pic{aspect-ratio:1.12} .askrd-rd__text{font-size:31px} }
/* later books have longer pages: keep the painting, the words and "Read to me" on one screen */
.askrd-rd__text.is-long{font-size:26px;line-height:1.48}
.askrd-rd__text.is-longer{font-size:23px;line-height:1.45}
.askrd-rd__text.is-reading{border-color:var(--j-blue);box-shadow:0 0 0 5px rgba(43,166,207,.18),var(--sticker-sm)}
.askrd-w{
  display:inline;border:0;margin:0;padding:0 3px;background:none;cursor:pointer;
  font:inherit;color:inherit;border-radius:10px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.askrd-w.is-on{background:var(--t-gold-hi,#FFF0C2)}
.askrd-w.is-split{background:var(--t-paper,#FFF7DE)}
.askrd-w.is-split i{font-style:normal;display:inline-block;margin:0 2px;padding:0 3px;border-radius:8px;
  border-bottom:4px solid var(--j-line);transition:background .15s}
.askrd-w.is-split i.is-lit{background:var(--j-yellow);border-bottom-color:var(--j-yellow-d)}

.askrd-rd__acts{display:flex;gap:12px;padding:16px 16px 0}
.askrd-play{
  flex:1;min-height:66px;border:0;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-weight:900;font-size:1.32em;color:#fff;background:var(--j-blue-btn);
  box-shadow:0 5px 0 var(--j-blue-d),0 10px 18px rgba(18,104,140,.26);
}
.askrd-play:active{transform:translateY(4px);box-shadow:0 1px 0 var(--j-blue-d)}
.askrd-play__i{
  width:40px;height:40px;border-radius:50%;background:#fff;color:var(--j-blue-btn);
  display:inline-grid;place-items:center;font-size:.72em;padding-left:3px
}
.askrd-play.is-on .askrd-play__i{animation:askrdBeat .8s ease-in-out infinite}
.askrd-mic{
  width:66px;height:66px;flex:0 0 auto;border-radius:50%;border:0;cursor:pointer;font-size:28px;
  background:var(--j-orange-btn);color:#fff;box-shadow:0 5px 0 var(--j-orange-d),0 10px 18px rgba(176,70,25,.24);
}
.askrd-mic:active{transform:translateY(4px);box-shadow:0 1px 0 var(--j-orange-d)}
.askrd-mic.is-done{background:linear-gradient(180deg,#FFD167,var(--j-yellow));box-shadow:0 5px 0 var(--j-yellow-d)}

.askrd-rd__bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:520px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(253,244,225,.97);border-top:3px solid var(--j-line);
}
.askrd-arrow{
  width:84px;height:66px;flex:0 0 auto;border-radius:22px;cursor:pointer;font-size:28px;font-weight:900;
  background:#fff;color:var(--j-ink);border:3px solid var(--j-line);box-shadow:0 5px 0 var(--j-line);
}
.askrd-arrow:active{transform:translateY(4px);box-shadow:0 1px 0 var(--j-line)}
.askrd-arrow[disabled]{opacity:.35;pointer-events:none}
.askrd-arrow--next{background:var(--j-green-btn);color:#fff;border-color:var(--j-green-d);box-shadow:0 5px 0 var(--j-green-d)}
.askrd-arrow--next:active{box-shadow:0 1px 0 var(--j-green-d)}
.askrd-arrow--next.is-end{background:linear-gradient(180deg,#FFD167,var(--j-yellow));border-color:var(--j-yellow-d);
  box-shadow:0 5px 0 var(--j-yellow-d);animation:askrdPulse 2.2s ease-in-out infinite}
/* books are 10 pages now: one row of small dots that fits between the arrows even at 360px */
.askrd-dots{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:nowrap}
.askrd-dots i{flex:0 0 auto;width:10px;height:10px;border-radius:999px;background:var(--j-line);transition:width .2s}
.askrd-dots i.is-done{background:var(--j-green)}
.askrd-dots i.is-here{width:20px;background:var(--j-green-d)}
/* 11–12 page books: smaller dots, still one row at 360px */
.askrd-dots.is-tight i,.askrd-cont__dots.is-tight em{width:8px;height:8px}
.askrd-dots.is-tight i.is-here{width:16px}
/* 13–16 page books: a chunky progress bar with "7/16" instead of dots */
.askrd-prog{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.askrd-prog__track{flex:1;min-width:0;height:14px;border-radius:999px;background:var(--j-line);overflow:hidden}
.askrd-prog__track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--j-green),var(--j-green-d));transition:width .3s ease}
.askrd-prog__n{flex:0 0 auto;font-weight:900;font-size:17px;color:var(--j-ink);white-space:nowrap}
.askrd-prog__n small{font-size:13px;color:var(--j-ink-2);font-weight:800}
.askrd-cont__b .askrd-prog{margin-top:6px;max-width:170px;gap:6px}
.askrd-cont__b .askrd-prog__track{height:9px}
.askrd-cont__b .askrd-prog__n{font-size:13px}
.askrd-cont__b .askrd-prog__n small{font-size:11px}
@media (prefers-reduced-motion:reduce){.askrd-prog__track i{transition:none}}

.askrd-rd__page.is-fwd{animation:askrdInR .32s ease}
.askrd-rd__page.is-back{animation:askrdInL .32s ease}

/* ---------------- The End ---------------- */
.askrd-done{padding-top:18px;text-align:center;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.askrd-done__hero{position:relative;display:flex;justify-content:center;padding-top:30px}
.askrd-done__hero .kiki-host{width:164px;animation:askrdHop 1.6s ease-in-out infinite}
.askrd-done__stars{position:absolute;inset:0;pointer-events:none}
.askrd-done__stars i{position:absolute;font-style:normal;font-size:46px;opacity:0;animation:askrdStar .5s cubic-bezier(.2,.9,.3,1.4) forwards}
.askrd-done__stars i:nth-child(1){left:calc(50% - 128px);top:58px;animation-delay:.15s}
.askrd-done__stars i:nth-child(2){left:calc(50% - 26px);top:-8px;font-size:56px;animation-delay:.35s}
.askrd-done__stars i:nth-child(3){left:calc(50% + 82px);top:58px;animation-delay:.55s}
.askrd-done__t{font-size:2.3em;font-weight:900;color:var(--j-green-d);line-height:1;margin-top:-4px}
.askrd-done__book{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.askrd-done__book b{font-size:1.08em;font-weight:900}
.askrd-cover--xs{width:46px;border-width:3px;border-radius:10px;box-shadow:var(--sticker-sm)}
.askrd-cover--xs::before{width:5px}
.askrd-done__book .ask-pill{border-color:var(--j-yellow-d)}
.askrd-done__again{width:100%;min-height:58px}

/* ---------------- motion ---------------- */
@keyframes askrdFade{from{opacity:0}to{opacity:1}}
@keyframes askrdUp{from{transform:translateY(60%)}to{transform:none}}
@keyframes askrdInR{from{opacity:.2;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes askrdInL{from{opacity:.2;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes askrdPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes askrdNope{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes askrdBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes askrdHop{0%,100%{transform:none}50%{transform:translateY(-8px)}}
@keyframes askrdStar{0%{opacity:0;transform:scale(.2) rotate(-40deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){
  .askrd *,.askrd-rd *,.askrd-rd__page,.askrd-done *,.askrd-ov,.askrd-sheet{animation:none !important;transition:none !important}
  .askrd-done__stars i{opacity:1}
}
.ask-reduced .askrd *,.ask-reduced .askrd-rd__page,.ask-reduced .askrd-rd *,.ask-reduced .askrd-done *,
.ask-reduced .askrd-ov,.ask-reduced .askrd-sheet{animation:none !important;transition:none !important}
.ask-reduced .askrd-done__stars i{opacity:1}

/* =====================================================================
   LEARNING INSIDE THE STORYBOOKS — words before, word sheet + find-it
   during, a one-minute round after. Tropic theme tokens (--t-*) with the
   storybook tokens as fallbacks. Logical properties keep it RTL-safe.
   ===================================================================== */

/* a picture slot: a word card, or a page of the book, filling its box */
.askrd-pic{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:18px;
  background:linear-gradient(160deg,#E9FBF3,#C9F0FF)}
.askrd-pic .ask-wordart{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.askrd-pic--page img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.askrd-pic--page img.is-on{opacity:1}

/* small round chip buttons: 🔊 / 🧩 Sound it out */
.askrd-chipbtn{
  min-height:52px;min-width:56px;padding:0 14px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-weight:900;font-size:1.02em;color:var(--t-pick-edge,#5B21B6);
  background:#fff;border:3px solid var(--t-line-d,var(--j-line));box-shadow:0 4px 0 var(--t-line-d,var(--j-line));
}
.askrd-chipbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--t-line-d,var(--j-line))}
.askrd-chipbtn--so{color:#fff;border-color:transparent;background:var(--t-pick-grad,var(--j-purple-btn));box-shadow:0 4px 0 var(--t-pick-edge,var(--j-purple-d))}
.askrd-chipbtn--so:active{box-shadow:0 1px 0 var(--t-pick-edge,var(--j-purple-d))}
.askrd-chipbtn--big{min-height:58px;font-size:1.1em;padding:0 18px}

/* sound it out: one tile per sound, lit as it is spoken, then pushed together */
.askrd-so{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px;transition:gap .35s ease}
.askrd-so i{font-style:normal;min-width:48px;height:52px;padding:0 8px;border-radius:14px;display:grid;place-items:center;
  font-size:30px;font-weight:900;color:var(--t-ink,var(--j-ink));background:var(--t-tint,#F1F5FF);
  border:3px solid var(--t-line,var(--j-line));border-bottom-width:6px;transition:background .15s,transform .15s,border-color .15s}
.askrd-so i.is-lit{background:var(--t-gold-hi,var(--j-yellow));border-color:var(--t-gold-edge,var(--j-yellow-d));transform:translateY(-4px)}
.askrd-so.is-blend{gap:0}
.askrd-so.is-blend i{border-radius:0;transform:none;background:var(--t-success-soft,#E6FFE0);border-color:var(--t-success-edge,var(--j-green-d))}
.askrd-so.is-blend i:first-child{border-start-start-radius:14px;border-end-start-radius:14px}
.askrd-so.is-blend i:last-child{border-start-end-radius:14px;border-end-end-radius:14px}
.askrd-so--big{justify-content:center}
.askrd-so--big i{min-width:60px;height:66px;font-size:38px}

/* ---------------- before: words in this book ---------------- */
.askrd-pre{padding-bottom:120px}
.askrd-pre__head{display:flex;align-items:center;gap:12px;padding:14px 16px 4px}
.askrd-pre__cover{flex:0 0 auto;width:60px;height:60px;border-radius:16px;overflow:hidden;border:3px solid #fff;box-shadow:var(--sticker-sm);position:relative}
.askrd-pre__cover img{width:100%;height:100%;object-fit:cover;display:block}
.askrd-pre__t{display:flex;flex-direction:column;min-width:0}
.askrd-pre__t b{font-size:1.5em;font-weight:900;line-height:1.1;color:var(--t-on-bg,var(--j-green-d));text-shadow:var(--t-on-bg-shadow,none)}
.askrd-pre__t span{font-size:1em;font-weight:800;color:var(--t-on-bg,var(--j-ink-2));opacity:.95;text-shadow:var(--t-on-bg-shadow,none)}
.askrd-pre__list{display:flex;flex-direction:column;gap:14px;padding:12px 16px 0}
.askrd-kw{
  display:grid;grid-template-columns:116px 1fr;gap:14px;align-items:center;padding:8px;
  background:#fff;border-radius:26px;border:4px solid #fff;
  box-shadow:0 0 0 4px var(--c1,var(--j-line)),0 7px 0 4px var(--c1d,var(--j-line));
}
.askrd-kw:nth-child(2){box-shadow:0 0 0 4px var(--c2,var(--j-line)),0 7px 0 4px var(--c2d,var(--j-line))}
.askrd-kw:nth-child(3){box-shadow:0 0 0 4px var(--c3,var(--j-line)),0 7px 0 4px var(--c3d,var(--j-line))}
.askrd-kw.is-pop{animation:askrdPop .45s ease}
.askrd-kw__pic{padding:0;border:0;background:none;cursor:pointer;display:block;width:116px}
.askrd-kw__pic .askrd-pic{border-radius:18px}
.askrd-kw__b{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.askrd-kw__w{padding:0 4px;border:0;background:none;cursor:pointer;font:inherit;font-size:42px;font-weight:900;line-height:1.05;
  color:var(--t-ink,var(--j-ink));letter-spacing:.01em}
.askrd-kw.is-heard .askrd-kw__w{color:var(--t-pick-edge,var(--j-green-d))}
.askrd-kw__row{display:flex;align-items:center;gap:8px;width:100%;min-height:58px}
.askrd-kw__row .askrd-kw__w{flex:1;text-align:start;min-width:0}
.askrd-kw__hear{flex:0 0 auto;width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:22px;
  background:#fff;border:3px solid var(--t-line-d,var(--j-line));box-shadow:0 4px 0 var(--t-line-d,var(--j-line))}
.askrd-kw__hear:active{transform:translateY(3px);box-shadow:0 1px 0 var(--t-line-d,var(--j-line))}
.askrd-kw.is-so .askrd-kw__w{display:none}
.askrd-kw .askrd-so{flex:1;margin:0;flex-wrap:nowrap;gap:5px;min-width:0}
.askrd-kw .askrd-so i{flex:1 1 0;min-width:0;max-width:50px;height:50px;padding:0;font-size:28px}
.askrd-kw .askrd-so.is-blend{gap:0}
.askrd-kw.is-so .askrd-kw__hear{display:none}
.askrd-kw .askrd-chipbtn--so{align-self:stretch}

.askrd-pre__bar{gap:12px}
.askrd-skip{
  flex:0 0 auto;min-height:56px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;background:transparent;
  font:inherit;font-weight:900;font-size:1em;color:var(--t-nav-dim,var(--j-ink-2));
}
html[class*="theme-"] .askrd-pre__bar .askrd-skip{color:#E9DDFF}
.askrd-go{flex:1;min-height:66px;font-size:1.28em;border-radius:999px;margin:0}

/* ---------------- during: the reader page ---------------- */
.askrd-w.is-say{background:var(--t-gold-hi,#FFF0C2);box-shadow:0 3px 0 var(--t-gold-edge,#E5B400)}
.askrd-w.is-found{background:var(--t-success-solid,var(--j-green));color:#fff;animation:askrdPop .45s ease}
.askrd-w.is-miss{animation:askrdNope .4s ease}
.askrd-w.is-hint{animation:askrdHint 1s ease-in-out infinite;background:var(--t-pick-soft,#F4ECFF)}
@keyframes askrdHint{0%,100%{transform:none}50%{transform:translateY(-3px) scale(1.06)}}

/* "Can you find …?" — a pill over the foot of the painting */
.askrd-find{
  position:absolute;inset-inline:8px;bottom:8px;z-index:5;min-height:60px;padding:5px 5px 5px 12px;
  display:flex;align-items:center;gap:8px;border-radius:999px;
  background:#fff;border:3px solid var(--c3,var(--j-purple));box-shadow:0 5px 0 var(--c3d,var(--j-purple-d)),0 10px 20px rgba(31,37,71,.2);
  animation:askrdUp .3s cubic-bezier(.2,.9,.3,1.2);
}
.askrd-find.is-out{opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s}
.askrd-find.is-yes{border-color:var(--t-success-solid,var(--j-green));box-shadow:0 5px 0 var(--t-success-edge,var(--j-green-d))}
.askrd-find__ic{font-size:26px;line-height:1}
.askrd-find__t{flex:1;min-width:0;min-height:48px;padding:0;border:0;background:none;cursor:pointer;text-align:start;
  font:inherit;font-weight:900;font-size:1.04em;color:var(--t-ink,var(--j-ink));line-height:1.15}
.askrd-find__q{white-space:nowrap}
.askrd-find__q span{font-size:.8em}
.askrd-find__t b{font-size:1.22em;color:var(--t-pick-edge,var(--j-purple-d));padding:0 2px}
.askrd-find__b{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;font-size:20px;
  background:var(--t-tint,#F1F5FF);color:var(--t-ink,var(--j-ink))}
.askrd-find__x{font-weight:900;font-size:18px;color:var(--t-ink-2,var(--j-ink-2))}

/* the word sheet */
.askrd-wsheet{align-items:center;text-align:center;gap:10px;padding-top:24px}
.askrd-wsheet__pic{width:min(62vw,240px);padding:0;border:4px solid #fff;border-radius:24px;overflow:hidden;cursor:pointer;
  box-shadow:0 0 0 4px var(--c2,var(--j-line)),0 7px 0 4px var(--c2d,var(--j-line));background:none}
.askrd-wsheet__pic .ask-wordart{border-radius:0}
.askrd-wsheet__w{border:0;background:none;cursor:pointer;font:inherit;font-size:56px;font-weight:900;line-height:1.1;
  color:var(--t-ink,var(--j-ink));padding:2px 12px}
.askrd-wsheet__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.askrd-tr{
  min-height:52px;padding:6px 18px;border-radius:16px;font:inherit;font-weight:900;font-size:1.05em;cursor:pointer;
  color:var(--t-ink,var(--j-ink));background:var(--t-tint,#F1F5FF);border:3px dashed var(--t-line-d,var(--j-line));
}
.askrd-tr.is-on{cursor:default;font-size:1.5em;border-style:solid;background:var(--t-pick-soft,#F4ECFF);border-color:var(--t-pick-soft,#EADCFF);padding:8px 22px}

/* ---------------- after: the learning round ---------------- */
.askrd-q{padding-bottom:30px}
.askrd-q__dots{display:flex;gap:5px;margin-top:4px}
.askrd-q__dots i{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.45)}
.askrd-q__dots i.is-done{background:#fff}
.askrd-q__dots i.is-here{width:22px;background:var(--t-gold-hi,var(--j-yellow))}
.askrd-q__coach{display:flex;align-items:center;gap:8px;padding:14px 16px 4px}
.askrd-q__coach .kiki-host{display:inline-block;width:84px;flex:0 0 auto;line-height:0}
.askrd-q__coach .kiki-img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 6px rgba(60,30,10,.22))}
.askrd-q__bub{
  position:relative;flex:1;min-width:0;min-height:64px;padding:12px 16px;border-radius:22px;cursor:pointer;text-align:start;
  font:inherit;font-weight:900;font-size:1.3em;line-height:1.2;color:var(--t-ink,var(--j-ink));
  background:#fff;border:0;box-shadow:0 5px 0 rgba(76,29,149,.2);
}
.askrd-q__bub::before{content:"";position:absolute;inset-inline-start:-9px;top:50%;margin-top:-10px;width:20px;height:20px;background:#fff;transform:rotate(45deg);border-radius:3px}
.askrd-q__bub b{color:var(--t-pick-edge,var(--j-purple-d))}
.askrd-q__bub{padding-inline-end:54px}
.askrd-q__hear{position:absolute;inset-inline-end:8px;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;font-size:18px;background:var(--t-tint,#F1F5FF)}
.askrd-q__body{padding:12px 16px 0}
.askrd-q__skip{display:block;margin:18px auto 0;color:var(--t-on-bg,var(--j-ink-2));text-shadow:var(--t-on-bg-shadow,none);font-size:.95em;opacity:.9}

.askrd-q__opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.askrd-qo{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:8px 8px 12px;cursor:pointer;
  background:#fff;border:4px solid #fff;border-radius:26px;font:inherit;color:var(--t-ink,var(--j-ink));
  box-shadow:0 0 0 4px var(--c6,var(--j-line)),0 7px 0 4px var(--c6d,var(--j-line));transition:transform .1s;
}
.askrd-qo:nth-child(2){box-shadow:0 0 0 4px var(--c5,var(--j-line)),0 7px 0 4px var(--c5d,var(--j-line))}
.askrd-qo:active{transform:translateY(4px)}
.askrd-qo .askrd-pic{aspect-ratio:1;border-radius:18px}
.askrd-qo__t{font-size:1.5em;font-weight:900;line-height:1.1;text-align:center}
.askrd-qo.is-text{justify-content:center;min-height:180px}
.askrd-qo.is-text .askrd-qo__t{font-size:2em}
.askrd-qo.is-right{box-shadow:0 0 0 5px var(--t-success-solid,var(--j-green)),0 7px 0 5px var(--t-success-edge,var(--j-green-d));animation:askrdPop .45s ease}
.askrd-qo.is-right .askrd-qo__t{color:var(--t-success-edge,var(--j-green-d))}
.askrd-qo.is-wrong{animation:askrdNope .4s ease;opacity:.6}

.askrd-sp{display:flex;flex-direction:column;align-items:center;gap:16px}
.askrd-sp__pic{width:min(54vw,210px);padding:0;border:4px solid #fff;border-radius:24px;overflow:hidden;cursor:pointer;background:none;
  box-shadow:0 0 0 4px var(--c2,var(--j-line)),0 7px 0 4px var(--c2d,var(--j-line))}
.askrd-sp__pic .askrd-pic{border-radius:0}
.askrd-sp__slots{display:flex;gap:10px;justify-content:center;padding:12px 14px;border-radius:24px;background:rgba(255,255,255,.35)}
.askrd-sp__slots i{
  position:relative;font-style:normal;width:68px;height:78px;border-radius:18px;display:grid;place-items:center;
  font-size:44px;font-weight:900;color:var(--t-ink,var(--j-ink));background:#fff;border:3px dashed var(--t-line-d,var(--j-line));
}
.askrd-sp__slots.is-ghost i:not(.is-full)::after{content:attr(data-ghost);color:var(--t-line-d,#CBBFA6);opacity:.75}
.askrd-sp__slots i.is-full{border-style:solid;border-color:var(--t-pick,var(--j-purple));animation:askrdPop .35s ease}
.askrd-sp__slots.is-done i{border-color:var(--t-success-solid,var(--j-green));background:var(--t-success-soft,#E6FFE0)}
.askrd-sp__tiles{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.askrd-tile{
  min-width:72px;height:72px;padding:0 10px;border-radius:20px;cursor:pointer;font:inherit;font-size:38px;font-weight:900;
  color:#fff;background:var(--t-pick-grad,var(--j-purple-btn));border:3px solid #fff;
  box-shadow:0 6px 0 var(--t-pick-edge,var(--j-purple-d)),0 10px 18px rgba(91,33,182,.25);text-shadow:0 2px 0 rgba(60,10,90,.35);
}
.askrd-tile:active{transform:translateY(4px);box-shadow:0 2px 0 var(--t-pick-edge,var(--j-purple-d))}
.askrd-tile.is-used{visibility:hidden}
.askrd-tile.is-wrong{animation:askrdNope .4s ease}
.askrd-tile.is-hint{animation:askrdHint 1s ease-in-out infinite;box-shadow:0 0 0 4px var(--t-gold-hi,var(--j-yellow)),0 6px 0 var(--t-pick-edge,var(--j-purple-d))}

.askrd-say{display:flex;flex-direction:column;gap:12px}
.askrd-say__pic{position:relative;aspect-ratio:2.1/1;border-radius:22px;overflow:hidden;border:4px solid #fff;box-shadow:var(--sticker);
  background:linear-gradient(160deg,#E9FBF3,#C9F0FF)}
.askrd-say__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.askrd-say__pic img.is-on{opacity:1}
.askrd-say__line{padding:12px 14px;border-radius:22px;background:#fff;box-shadow:0 6px 0 rgba(76,29,149,.22);
  text-align:center;font-size:30px;font-weight:900;line-height:1.35;color:var(--t-ink,#2A1E12)}
.askrd-say__line.is-done{box-shadow:0 0 0 4px var(--t-success-solid,var(--j-green)),0 6px 0 4px var(--t-success-edge,var(--j-green-d))}
.askrd-say__mic{background:#fff;border-radius:24px;padding:6px 8px 10px;box-shadow:0 6px 0 rgba(76,29,149,.22)}

@media (max-width:370px){
  .askrd-kw{grid-template-columns:100px 1fr}
  .askrd-kw__pic{width:100px}
  .askrd-kw__w{font-size:36px}
  .askrd-say__line{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .askrd-kw,.askrd-find,.askrd-qo,.askrd-tile,.askrd-w,.askrd-so,.askrd-so i,.askrd-sp__slots i{animation:none !important;transition:none !important}
}
.ask-reduced .askrd-kw,.ask-reduced .askrd-find,.ask-reduced .askrd-qo,.ask-reduced .askrd-tile,.ask-reduced .askrd-so i{animation:none !important;transition:none !important}

/* =====================================================================
   MY WORDS — big flip flashcards (js/kids-app.js viewWords)
   ===================================================================== */
.askw{padding-top:14px}
.askw-seg{margin-bottom:14px}
.askw-seg button{font-size:1.02em;gap:6px;white-space:nowrap;padding:0 6px;min-width:0}
.askw-seg button span{font-size:1.1em}
.askw-seg button em{font-style:normal;font-size:.78em;font-weight:900;min-width:28px;padding:1px 8px;border-radius:999px;
  background:rgba(255,255,255,.3);line-height:1.5}
.askw-seg button:not(.is-on) em{background:rgba(255,255,255,.22)}

/* the painted word card fills whatever box it is given */
.askw .ask-wordart{border-radius:0}
.askw-face__pic .ask-wordart,.askw-back__thumb .ask-wordart{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}

.askw-stage{perspective:1400px}
.askw-card{position:relative;width:100%;aspect-ratio:1/1.04;max-height:58vh;margin:0 auto;cursor:pointer;outline:none;
  -webkit-tap-highlight-color:transparent}
@media (max-height:760px){ .askw-card{aspect-ratio:1/.92} }
.askw-card:focus-visible .askw-face{box-shadow:0 0 0 5px var(--t-gold-hi,var(--j-yellow)),0 8px 0 5px var(--c3d,var(--j-line))}
.askw-card__in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.9,.3,1.1)}
.askw-card.is-flipped .askw-card__in{transform:rotateY(180deg)}
.askw-card:active .askw-card__in{scale:.985}
.askw-card.is-in-r{animation:askrdInR .32s ease}
.askw-card.is-in-l{animation:askrdInL .32s ease}
.askw-face{
  position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:#fff;border:5px solid #fff;border-radius:32px;
  box-shadow:0 0 0 5px var(--c3,var(--j-line)),0 9px 0 5px var(--c3d,var(--j-line)),0 18px 30px rgba(31,37,71,.18);
}
.askw-face__pic{position:relative;flex:1;min-height:0;border-radius:26px 26px 18px 18px;overflow:hidden;background:#EAF6FF}
.askw-face__foot{flex:0 0 auto;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.askw-grow{min-width:56px;font-size:26px;line-height:1}
.askw-flip{min-width:56px;text-align:end;font-size:30px;font-weight:900;color:var(--t-line-d,var(--j-line))}
.askw-hear{
  width:66px;height:66px;border-radius:50%;border:4px solid #fff;cursor:pointer;font-size:28px;
  background:linear-gradient(180deg,#22D3EE,#0284C7);box-shadow:0 5px 0 #075985,0 10px 18px rgba(3,105,161,.3);
}
.askw-hear:active{transform:translateY(4px);box-shadow:0 1px 0 #075985}
.askw-hear--sm{width:56px;height:56px;font-size:23px}

.askw-face--back{transform:rotateY(180deg);align-items:center;justify-content:center;gap:12px;padding:16px 18px;text-align:center;
  box-shadow:0 0 0 5px var(--c2,var(--j-line)),0 9px 0 5px var(--c2d,var(--j-line)),0 18px 30px rgba(31,37,71,.18)}
.askw-back__top{display:flex;align-items:center;gap:12px}
.askw-back__thumb{position:relative;display:block;width:96px;height:76px;border-radius:18px;overflow:hidden;border:3px solid var(--t-line,var(--j-line))}
.askw-back__w{font-size:56px;font-weight:900;line-height:1.02;color:var(--t-ink,var(--j-ink));word-break:break-word}
.askw-syl{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.askw-syl i{font-style:normal;font-weight:900;font-size:1.25em;padding:4px 12px;border-radius:12px;
  background:var(--t-pick-soft,#F4ECFF);color:var(--t-pick-edge,var(--j-purple-d))}
.askw-ex{max-width:100%;padding:10px 14px;border-radius:18px;cursor:pointer;font:inherit;font-weight:800;font-size:1.18em;line-height:1.35;
  color:var(--t-ink-2,var(--j-ink-2));background:var(--t-tint,#F1F5FF);border:0}
.askw-ex mark{background:var(--t-gold-hi,#FFF0C2);color:var(--t-ink,var(--j-ink));padding:0 4px;border-radius:8px;font-weight:900;
  box-shadow:0 2px 0 var(--t-gold-edge,#E5B400)}
.askw-tr{min-height:50px;padding:6px 18px;border-radius:16px;cursor:pointer;font:inherit;font-weight:900;font-size:1.05em;
  color:var(--t-ink,var(--j-ink));background:#fff;border:3px dashed var(--t-line-d,var(--j-line))}
.askw-tr.is-on{cursor:default;font-size:1.5em;border:0;background:var(--t-pick-soft,#F4ECFF);padding:6px 22px}

.askw-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}
.askw-arrow{width:72px;height:56px;border-radius:20px;cursor:pointer;font-size:24px;font-weight:900;
  background:#fff;color:var(--t-pick-edge,var(--j-ink));border:3px solid #fff;box-shadow:0 5px 0 rgba(76,29,149,.25)}
.askw-arrow:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(76,29,149,.25)}
.askw-arrow[disabled]{opacity:.4;pointer-events:none}
.askw-count{min-width:84px;text-align:center;font-weight:900;font-size:1.1em;color:var(--t-on-bg,var(--j-ink));text-shadow:var(--t-on-bg-shadow,none)}
.askw-count b{font-size:1.35em}

.askw-rate{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.askw-rate__b{min-height:66px;border-radius:22px;cursor:pointer;font:inherit;font-weight:900;font-size:1.12em;
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px;line-height:1.1}
.askw-rate__b span{font-size:1.35em;line-height:1}
.askw-rate__b--again{background:#fff;color:var(--t-pick-edge,var(--j-purple-d));border:3px solid #fff;box-shadow:0 6px 0 rgba(76,29,149,.25)}
.askw-rate__b--know{color:#fff;border:3px solid #fff;text-shadow:0 2px 0 rgba(14,143,67,.45);
  background:var(--t-success,linear-gradient(135deg,#8CE07A,var(--j-green)));box-shadow:0 6px 0 var(--t-success-edge,var(--j-green-d))}
.askw-rate__b:active{transform:translateY(4px)}
.askw-rate__b.is-pop{animation:askrdPop .4s ease}
.askw-speak{width:100%;margin-top:14px;min-height:58px}

.askw-h{display:flex;align-items:center;gap:8px;margin:24px 2px 10px}
.askw-h b{font-size:1.18em;font-weight:900;color:var(--t-on-bg,var(--j-green-d));text-shadow:var(--t-on-bg-shadow,none)}
.askw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.askw-thumb{position:relative;min-width:0}
.askw-thumb__b{width:100%;display:flex;flex-direction:column;padding:4px 4px 8px;cursor:pointer;font:inherit;color:var(--t-ink,var(--j-ink));
  background:#fff;border:3px solid #fff;border-radius:20px;box-shadow:0 5px 0 rgba(76,29,149,.2)}
.askw-thumb__b .ask-wordart{border-radius:15px}
.askw-thumb__w{font-weight:900;font-size:.98em;margin-top:5px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.askw-thumb__g{position:absolute;inset-block-start:8px;inset-inline-start:8px;font-size:18px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.askw-thumb.is-here .askw-thumb__b{border-color:var(--t-pick,var(--j-purple));box-shadow:0 0 0 3px var(--t-pick,var(--j-purple)),0 5px 0 3px var(--t-pick-edge,var(--j-purple-d))}
.askw-thumb__x{position:absolute;inset-block-start:-8px;inset-inline-end:-8px;width:40px;height:40px;border-radius:50%;cursor:pointer;
  font-size:16px;font-weight:900;background:#fff;color:var(--t-ink-2,var(--j-ink-2));border:3px solid var(--t-line-d,var(--j-line));box-shadow:0 2px 0 rgba(0,0,0,.12)}

.askw-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:18px 16px 20px;
  background:#fff;border-radius:28px;box-shadow:0 0 0 4px var(--c1,var(--j-line)),0 7px 0 4px var(--c1d,var(--j-line))}
.askw-empty .kiki-host{display:inline-block;width:110px;line-height:0}
.askw-empty .kiki-img{width:100%;height:auto;display:block}
.askw-empty b{font-size:1.3em;font-weight:900;color:var(--t-ink,var(--j-ink))}
.askw-empty span:not(.kiki-host){font-weight:800;color:var(--t-ink-2,var(--j-ink-2))}
.askw-empty .ask-btn{width:100%}

.askw-cats{display:flex;flex-direction:column;gap:10px}
.askw-cat{width:100%;min-height:62px;display:flex;align-items:center;gap:12px;padding:0 16px;cursor:pointer;font:inherit;text-align:start;
  background:#fff;color:var(--t-ink,var(--j-ink));border:3px solid #fff;border-radius:20px;box-shadow:0 5px 0 rgba(76,29,149,.2)}
.askw-cat__e{font-size:28px;line-height:1}
.askw-cat b{flex:1;font-size:1.1em;font-weight:900}
.askw-cat em{font-style:normal;font-weight:900;font-size:.85em;color:#fff;background:var(--t-success-solid,var(--j-green));border-radius:999px;padding:2px 10px}
.askw-cat i{font-style:normal;font-size:.9em;color:var(--t-ink-2,var(--j-ink-2))}
.askw-pick.is-open .askw-cat{border-color:var(--t-pick,var(--j-purple));border-radius:20px 20px 8px 8px}
.askw-pick__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 4px 6px}
.askw-add{position:relative;min-width:0;display:flex;flex-direction:column;padding:4px 4px 8px;cursor:pointer;font:inherit;color:var(--t-ink,var(--j-ink));
  background:#fff;border:3px solid #fff;border-radius:18px;box-shadow:0 4px 0 rgba(76,29,149,.2)}
.askw-add .ask-wordart{border-radius:13px}
.askw-add__w{font-weight:900;font-size:.95em;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.askw-add__b{position:absolute;inset-block-start:-7px;inset-inline-end:-7px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:900;background:var(--t-pick-grad,var(--j-purple-btn));color:#fff;border:3px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.askw-add.is-own{border-color:var(--t-success-solid,var(--j-green))}
.askw-add.is-own .askw-add__b{background:var(--t-success-solid,var(--j-green))}
.askw-soon{margin-top:16px;padding:14px;border-radius:18px;text-align:center;font-weight:800;color:#fff;
  background:rgba(255,255,255,.18);border:2.5px dashed rgba(255,255,255,.75);text-shadow:var(--t-on-bg-shadow,none)}
html:not([class*="theme-"]) .askw-soon{color:var(--j-ink-2);border-color:var(--j-line)}

/* a painted card that arrives late fades in over the old picture */
.ask-wordart__paint.is-new{animation:askrdFade .35s ease}

@media (prefers-reduced-motion:reduce){
  .askw-card__in{transition:none}
  .askw-card,.askw-rate__b,.ask-wordart__paint{animation:none !important}
}
.ask-reduced .askw-card__in{transition:none}
.ask-reduced .askw-card,.ask-reduced .askw-rate__b{animation:none !important}