/* ActuallySpeak Kids — Home v2.
   One big Play card above the fold, a 2x2 grid of picture tiles, then the
   smaller stuff, then a grown-ups strip. Loaded after polish so it wins. */

/* ---------- header ---------- */
.ask-iconbtn.ask-grownups{
  width:auto;height:40px;border-radius:999px;padding:0 10px 0 8px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:4px;font-size:15px;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.7);color:#fff;box-shadow:none;
}
.ask-iconbtn.ask-grownups small{font-size:11px;font-weight:900;letter-spacing:.01em}
@media (max-width:440px){ .ask-top__sub{display:none} .ask-top__name{font-size:1.2em} }
@media (max-width:370px){ .ask-iconbtn.ask-grownups small{display:none} .ask-iconbtn.ask-grownups{width:40px;padding:0;justify-content:center} }

/* ---------- bottom nav: 5 tabs, one line each ---------- */
.ask-nav button{white-space:nowrap}

/* ---------- 1. Play card ---------- */
.askh{padding-top:12px}
.askh-hero{
  border-radius:26px;overflow:hidden;background:#fff;border:4px solid var(--j-green-d);
  box-shadow:0 6px 0 var(--j-green-d), 0 14px 26px rgba(37,110,49,.22);
}
.askh-hero .askh-hero__art{height:200px;border-bottom:0;border-radius:0;margin:0}
.askh-hero .ask-bubble{font-size:.98em;max-width:58%;top:14px}
.askh-hero .ask-hero__kiki{width:138px}
.askh-say{
  position:absolute;right:12px;bottom:12px;z-index:4;width:48px;height:48px;border-radius:50%;
  border:3px solid #fff;background:var(--j-blue-btn);color:#fff;font-size:21px;cursor:pointer;
  box-shadow:0 3px 0 var(--j-blue-d),0 6px 12px rgba(0,0,0,.2);
}
.askh-say:active{transform:translateY(2px)}
.askh-hero__foot{padding:12px 14px 16px;background:linear-gradient(180deg,#F3FBEF,#fff)}
.askh-hero__meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.askh-hero__ic{
  width:46px;height:46px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;font-size:26px;
  background:#fff;border:2.5px solid var(--rc,#43A94A);
}
.askh-hero__k{font-size:.72em;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--j-green-d)}
.askh-hero__t{font-weight:900;font-size:1.22em;line-height:1.15}
.askh-hero__s{font-size:.8em;font-weight:800;color:var(--j-ink-2)}
.askh-play{
  width:100%;font-size:1.5em !important;padding:16px 10px !important;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:10px;animation:askhPulse 2.8s ease-in-out infinite;
}
.askh-play__i{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--j-green-btn);display:inline-grid;place-items:center;font-size:.7em;padding-left:3px}
@keyframes askhPulse{0%,80%,100%{transform:none}88%{transform:scale(1.035)}}

/* ---------- 2. picture tiles ---------- */
.askh-grid,.askh-grid.askfun-home{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.askh-slot{display:contents}
.askh-tile{
  position:relative;min-height:116px;border-radius:22px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:12px 8px;font-family:inherit;color:var(--j-ink);text-align:center;
  background:#fff;border:3.5px solid var(--tc,var(--t-line-d,#E7D3AA));box-shadow:0 5px 0 var(--tcd,var(--t-line-d,#D9C08C));
}
.askh-tile:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tcd,var(--t-line-d,#D9C08C))}
.askh-tile__ic{font-size:44px;line-height:1}
.askh-tile b{font-size:1.12em;font-weight:900;line-height:1.1}
.askh-tile small{font-size:.74em;font-weight:800;color:var(--j-ink-2)}
.askh-tile--t{--tc:#7CC86F;--tcd:#3E8E3F;background:linear-gradient(180deg,#F0FAEC,#fff)}
.askh-tile--s{--tc:#F2A36B;--tcd:#C25518;background:linear-gradient(180deg,var(--t-paper,#FFF3EA),#fff)}
.askh-tile--c{--tc:#F2C04D;--tcd:#B4741A;background:linear-gradient(180deg,var(--t-paper,#FFF6DA),#fff)}
.askh-tile--g{--tc:#7FC3E0;--tcd:#1A7B9D;background:linear-gradient(180deg,#EAF6FC,#fff)}
.askh-tile--r{--tc:#B9A6EC;--tcd:#6E52B8;background:linear-gradient(180deg,#F3EFFD,#fff)}
.askh-tile--m{--tc:#F19CBD;--tcd:#C2477A;background:linear-gradient(180deg,#FDEFF5,#fff)}
.askh-tile.is-ready:after{content:'';position:absolute;top:10px;right:12px;width:14px;height:14px;border-radius:50%;background:#E5484D;border:2.5px solid #fff}
.askh-tile.is-ready .askh-tile__ic{animation:askhWiggle 2.4s ease-in-out infinite}
@keyframes askhWiggle{0%,84%,100%{transform:none}88%{transform:rotate(-9deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){ .askh-play,.askh-tile.is-ready .askh-tile__ic{animation:none} }

/* ---------- 3. small things ---------- */
.askh-row{display:flex;gap:8px;margin-top:16px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.askh-row::-webkit-scrollbar{display:none}
.askh-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:9px 14px;border-radius:999px;
  font:inherit;font-weight:900;font-size:.9em;color:var(--j-ink);background:#fff;border:2.5px solid var(--j-line);box-shadow:0 3px 0 var(--t-line-d,#D9C08C);
}
.askh-chip span{font-size:1.25em}
.askh-more{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.askh-more .askfun-card{margin:0}
.askh-prog{display:flex;align-items:center;gap:12px;margin-top:12px}
.askh-prog__body{flex:1;min-width:0}
.askh-prog__t{display:flex;justify-content:space-between;font-weight:900;font-size:.95em;margin-bottom:6px}
.askh-prog__s{margin-top:6px;font-size:.8em;font-weight:800;color:var(--j-ink-2)}

/* ---------- 4. grown-ups strip ---------- */
.askh-adult{margin-top:22px;padding:12px;border-radius:18px;background:var(--t-line,#F5EEDD);border:2px dashed var(--t-line-d,#D9C08C)}
.askh-adult__h{font-size:.72em;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--j-ink-2);margin:0 4px 8px}
.askh-adult .askfun-savechip{margin:0 0 8px;width:100%}
.askh-adult .askfun-savechip:last-child{margin-bottom:0}

/* ---------- Jungle / Rewards switch ---------- */
.askh-seg{display:flex;background:var(--t-line,#EFE3C8);border-radius:999px;padding:4px;margin:12px 0 4px;gap:4px}
.askh-seg button{flex:1;border:0;border-radius:999px;padding:10px 8px;font:inherit;font-weight:900;font-size:.92em;background:transparent;color:var(--j-ink-2);cursor:pointer}
.askh-seg button.is-on{background:#fff;color:var(--j-ink);box-shadow:0 2px 0 var(--t-line-d,#D9C08C)}