/* ActuallySpeak Kids — fun layer styles (streaks, treasure, combos, buddies,
   leaderboard). Additive; scoped to .askfun-* so it can't touch the base app. */

:root { --af-gold: #f59e0b; --af-gold-d: #b45309; --af-ink: #2a1a08; --af-ink2: #6b533a; }

.askfun-home, .askfun-mapbar, .askfun-rewardadd { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.askfun-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 0; border-radius: 18px; padding: 13px 15px; cursor: pointer;
  background: #fffdf6; box-shadow: 0 3px 0 rgba(120, 80, 20, .12), 0 6px 16px rgba(120, 80, 20, .08);
  font: inherit; color: var(--af-ink); transition: transform .12s ease, box-shadow .12s ease;
}
.askfun-card:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120, 80, 20, .12); }

/* streak */
.askfun-streak { background: linear-gradient(135deg, #fff7e6, #ffe9c2); }
.askfun-streak__big { display: flex; align-items: baseline; gap: 6px; }
.askfun-streak__big b { font-size: 1.9em; font-weight: 900; color: var(--af-gold-d); line-height: 1; }
.askfun-streak__big small { font-size: .74em; font-weight: 800; color: var(--af-ink2); }
.askfun-flame { font-size: 1.5em; filter: drop-shadow(0 2px 3px rgba(245, 158, 11, .5)); }
.askfun-dots { display: flex; gap: 5px; margin-left: auto; }
.askfun-dot {
  width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  font-size: .72em; font-weight: 800; color: #b9a37e; background: #f1e6cf;
}
.askfun-dot.is-on { background: #ffe1a6; color: #b45309; font-size: .95em; box-shadow: inset 0 0 0 2px #f6c16a; }

/* daily chest */
.askfun-chest { flex-direction: column; align-items: flex-start; gap: 2px; position: relative; overflow: hidden; }
.askfun-chest.is-ready { background: linear-gradient(135deg, #fef3c7, #fde68a); animation: askfunPulse 1.8s ease-in-out infinite; }
.askfun-chest.is-done { opacity: .8; }
.askfun-chest__ic { font-size: 1.7em; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.askfun-chest.is-ready .askfun-chest__ic { animation: askfunWiggle 1.2s ease-in-out infinite; }
.askfun-chest__t { font-weight: 900; font-size: 1.02em; }
.askfun-chest__s { font-size: .78em; font-weight: 700; color: var(--af-ink2); }
@keyframes askfunPulse { 0%, 100% { box-shadow: 0 3px 0 rgba(180, 120, 20, .16), 0 0 0 0 rgba(245, 158, 11, .4); } 50% { box-shadow: 0 3px 0 rgba(180, 120, 20, .16), 0 0 0 8px rgba(245, 158, 11, 0); } }
@keyframes askfunWiggle { 0%, 100% { transform: translateY(-50%) rotate(-8deg); } 50% { transform: translateY(-50%) rotate(8deg); } }

/* treasure */
.askfun-treasure__ic { font-size: 1.7em; }
.askfun-treasure__body { flex: 1; }
.askfun-treasure__t { font-weight: 900; font-size: 1em; }
.askfun-treasure__s { font-size: .76em; font-weight: 700; color: var(--af-ink2); margin-top: 2px; }
.askfun-treasure.is-ready { background: linear-gradient(135deg, #e0f2fe, #bae6fd); animation: askfunPulse 1.8s ease-in-out infinite; }
.askfun-prog { height: 9px; border-radius: 6px; background: #ece2cc; overflow: hidden; margin: 5px 0; }
.askfun-prog__b { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #34d399, #10b981); transition: width .5s ease; }

/* mini tiles */
.askfun-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.askfun-mini { flex-direction: column; align-items: flex-start; gap: 1px; }
.askfun-mini > span { font-size: 1.5em; }
.askfun-mini b { font-weight: 900; font-size: .98em; }
.askfun-mini small { font-size: .74em; font-weight: 700; color: var(--af-ink2); }
.askfun-mini--wide { flex-direction: row; align-items: center; background: linear-gradient(135deg, #ecfccb, #d9f99d); }
.askfun-mini--wide > span { font-size: 1.6em; }

/* combo / power-up bar */
.askfun-combo {
  position: fixed; left: 50%; top: 10px; transform: translate(-50%, -140%);
  z-index: 60; display: flex; align-items: center; gap: 10px;
  background: rgba(20, 12, 4, .86); color: #fff; padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: transform .3s cubic-bezier(.2, 1.3, .4, 1);
  max-width: 88vw;
}
.askfun-combo.is-show { transform: translate(-50%, 0); }
.askfun-combo__ic { font-size: 1.2em; }
.askfun-combo__body { min-width: 120px; }
.askfun-combo__lbl { font-size: .66em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.askfun-combo__track { height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .22); overflow: hidden; margin-top: 3px; }
.askfun-combo__track i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #fbbf24, #f97316); transition: width .25s ease; }
.askfun-combo__x { font-weight: 900; font-size: 1.1em; min-width: 1.2em; text-align: center; }
.askfun-combo.is-hot { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.askfun-combo.is-burst { animation: askfunBurst .5s ease; }
@keyframes askfunBurst { 0% { transform: translate(-50%, 0) scale(1); } 40% { transform: translate(-50%, 0) scale(1.14); } 100% { transform: translate(-50%, 0) scale(1); } }

/* celebration splash */
.askfun-splash { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(10, 20, 8, .55); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.askfun-splash.is-in { opacity: 1; }
.askfun-splash.is-out { opacity: 0; }
.askfun-splash img { max-width: 78%; max-height: 82%; border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transform: scale(.86); transition: transform .5s cubic-bezier(.2, 1.3, .4, 1); }
.askfun-splash.is-in img { transform: scale(1); }

/* overlays */
.askfun-ov { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.askfun-ov__scrim { position: absolute; inset: 0; background: rgba(10, 16, 8, .55); opacity: 0; transition: opacity .3s ease; }
.askfun-ov.is-open .askfun-ov__scrim { opacity: 1; }
.askfun-ov__in {
  position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
  background: #fffdf6; border-radius: 24px 24px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .34s cubic-bezier(.2, 1, .3, 1); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}
.askfun-ov.is-open .askfun-ov__in { transform: translateY(0); }
@media (min-width: 620px) { .askfun-ov { align-items: center; } .askfun-ov__in { border-radius: 24px; } }
.askfun-ov__head { display: flex; align-items: center; gap: 10px; }
.askfun-ov__head h2 { font-size: 1.25em; font-weight: 900; color: var(--af-ink); flex: 1; }
.askfun-ov__close { border: 0; background: #f0e7d3; width: 36px; height: 36px; border-radius: 50%; font-size: 1em; font-weight: 800; cursor: pointer; color: var(--af-ink2); }
.askfun-ov__sub { font-size: .84em; font-weight: 700; color: var(--af-ink2); margin: 4px 0 12px; }

/* reward popups (daily / treasure) */
.askfun-reward .askfun-ov__in { text-align: center; max-width: 380px; }
.askfun-reward h2 { font-size: 1.5em; font-weight: 900; color: var(--af-gold-d); margin: 6px 0; }
.askfun-reward p { font-size: .9em; font-weight: 700; color: var(--af-ink2); margin: 6px 0 14px; }
.askfun-reward__ic { font-size: 4.4em; line-height: 1; margin: 6px 0; }
.askfun-reward__amt { font-size: 1.4em; font-weight: 900; color: #15803d; margin: 4px 0; }
.askfun-dig { cursor: pointer; transition: transform .15s ease; }
.askfun-dig:active { transform: scale(.9); }
.askfun-dig.is-open { animation: askfunBurst .5s ease; }

/* buddies gallery */
.askfun-buddies { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 480px) { .askfun-buddies { grid-template-columns: 1fr 1fr 1fr; } }
.askfun-buddy { border: 0; background: #fff; border-radius: 18px; overflow: hidden; cursor: pointer; padding: 0 0 8px; box-shadow: 0 3px 0 rgba(120, 80, 20, .1); text-align: center; transition: transform .12s ease; }
.askfun-buddy:active { transform: scale(.97); }
.askfun-buddy.is-talk { box-shadow: 0 0 0 3px var(--bc), 0 6px 16px rgba(0, 0, 0, .12); }
.askfun-buddy__media { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, #eef7e6, #d9efc6); display: grid; place-items: center; }
.askfun-buddy__media img { width: 100%; height: 100%; object-fit: cover; }
.askfun-buddy__emoji { display: none; font-size: 2.6em; }
.askfun-buddy__media.is-emoji .askfun-buddy__emoji { display: block; }
.askfun-buddy__name { font-weight: 900; font-size: .98em; margin-top: 6px; color: var(--af-ink); }
.askfun-buddy__role { font-size: .72em; font-weight: 700; color: var(--af-ink2); }

/* leaderboard */
.askfun-boardlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.askfun-brow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 13px; background: #fff; box-shadow: 0 2px 0 rgba(120, 80, 20, .08); }
.askfun-brow.is-me { background: linear-gradient(135deg, #fef3c7, #fde68a); box-shadow: inset 0 0 0 2px #f6c16a; }
.askfun-brow__r { width: 30px; font-weight: 900; text-align: center; font-size: 1.05em; }
.askfun-brow__a { font-size: 1.3em; }
.askfun-brow__h { flex: 1; font-weight: 800; color: var(--af-ink); }
.askfun-brow__s { font-weight: 900; color: var(--af-gold-d); font-size: .92em; }
.askfun-load, .askfun-soon { text-align: center; padding: 22px 12px; font-weight: 700; color: var(--af-ink2); font-size: .9em; }
.askfun-soon small { color: #9a8straw; opacity: .8; font-weight: 700; }
.askfun-soon small { color: #a08a5e; }
.askfun-boardfoot { text-align: center; }
.askfun-note, .askfun-you { font-size: .8em; font-weight: 700; color: var(--af-ink2); margin-top: 8px; }
.askfun-join__t { font-weight: 800; margin: 10px 0 6px; }
.askfun-join input { width: 100%; text-align: center; font-size: 1.1em; padding: 10px; border-radius: 12px; border: 2px solid #e6d8b8; }
.askfun-avrow, .askfun-avpick { }
.askfun-avrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; }
.askfun-avpick { border: 2px solid transparent; background: #f3ead4; width: 42px; height: 42px; border-radius: 12px; font-size: 1.3em; cursor: pointer; }
.askfun-avpick.is-on { border-color: var(--af-gold); background: #fff3d6; }

/* painted Kiki overlay in hero banners (vector stays underneath as fallback) */
.askfun-kikiwrap { position: relative; display: inline-block; line-height: 0; width: 100%; }
.askfun-kikiwrap svg.ask-kiki { display: block; width: 100%; height: auto; }
.askfun-kikiwrap:not(.is-fallback) svg.ask-kiki { visibility: hidden; }
.askfun-kiki { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.askfun-float { animation: askfunKikiFloat 3.4s ease-in-out infinite; }
@keyframes askfunKikiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.ask-reduced .askfun-float { animation: none; }

/* reading-adventure region cards — full painted card, no text footer */
.askfun-region { padding-bottom: 0; }
.askfun-region .askfun-buddy__media { border-radius: 18px; }
.askfun-regions { grid-template-columns: 1fr 1fr !important; }
.askfun-mini--map { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }

.ask-reduced .askfun-chest.is-ready, .ask-reduced .askfun-treasure.is-ready { animation: none; }
.ask-reduced .askfun-combo, .ask-reduced .askfun-ov__in, .ask-reduced .askfun-splash img { transition: none; }

/* legal links in Settings / parent area */
.askfun-legal { margin: 10px 0 24px; }
.askfun-legalcard { display: block; }
.askfun-legaltxt { font-size: .86em; font-weight: 600; color: var(--af-ink2); margin: 0 0 12px; }
.askfun-legallinks { display: flex; gap: 10px; }
.askfun-legalbtn { flex: 1; min-height: 46px; font-size: .92em; text-decoration: none; }

/* active map "you are here" Kiki pin */
.askfun-here { position: absolute; left: 0; top: -32px; display: flex; align-items: center; gap: 4px; z-index: 4; animation: askfunHereBob 1.8s ease-in-out infinite; pointer-events: none; }
.askfun-here__k { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.28)); }
.askfun-here__lbl { background: #0F9F43; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; box-shadow: 0 3px 8px rgba(15,159,67,.4); white-space: nowrap; }
@keyframes askfunHereBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ask-reduced .askfun-here { animation: none; }

/* paywall / waitlist + mini research form */
.askfun-paywall .askfun-ov__in { text-align: center; max-width: 440px; }
.askfun-paywall__ic { font-size: 3.2em; line-height: 1; }
.askfun-paywall h2 { font-size: 1.5em; color: var(--af-gold-d); margin: 6px 0; }
.askfun-paywall > .askfun-ov__in > p, .askfun-paywall p { color: var(--af-ink2); font-weight: 700; font-size: .92em; margin: 6px 0 12px; }
.askfun-paywall__list { list-style: none; padding: 0; margin: 0 auto 12px; text-align: left; display: inline-block; }
.askfun-paywall__list li { font-weight: 700; margin: 5px 0; color: var(--af-ink); font-size: .92em; }
.askfun-wl { text-align: left; }
.askfun-wl__lbl { display: block; font-weight: 800; font-size: .82em; color: var(--af-ink); margin: 12px 0 6px; }
.askfun-paywall__in { width: 100%; padding: 12px 14px; border-radius: 12px; border: 2px solid #e6d8b8; font: inherit; font-size: 1em; }
.askfun-wl__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.askfun-wl__chips button { border: 2px solid #e6d8b8; background: #fff; border-radius: 999px; padding: 8px 12px; font-weight: 800; font-size: .8em; cursor: pointer; color: var(--af-ink); }
.askfun-wl__chips button.is-on { border-color: var(--af-gold); background: #fff3d6; color: #8a5a06; }
.askfun-wl__chips--age button { flex: 1; text-align: center; }
.askfun-paywall__note { font-size: .72em !important; color: var(--af-ink2); margin-top: 10px !important; text-align: center; }
.askfun-paywall__done { text-align: center; font-size: 2.4em; }
.askfun-paywall__done h3 { font-size: .58em; color: var(--af-gold-d); margin: 6px 0 3px; }
.askfun-paywall__done p { font-size: .38em; color: var(--af-ink2); font-weight: 700; margin: 0 0 14px; }
.askfun-crown { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 17px; }
.ask-node.is-premium { opacity: .94; }

/* animated welcome intro (first open) */
.askfun-welcome { position: fixed; inset: 0; z-index: 120; overflow: hidden; opacity: 0; transition: opacity .45s ease; background: #0b2010; }
.askfun-welcome.is-in { opacity: 1; }
.askfun-welcome.is-out { opacity: 0; }
.askfun-welcome__bg { position: absolute; inset: 0; background: center/cover no-repeat; transform: scale(1.08); animation: askfunKenBurns 9s ease-out forwards; }
@keyframes askfunKenBurns { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.askfun-welcome__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,10,.10) 0, rgba(10,20,10,.05) 45%, rgba(10,20,10,.72) 100%); }
.askfun-welcome__kiki { position: absolute; left: -8px; bottom: 168px; width: 150px; z-index: 2; filter: drop-shadow(0 10px 14px rgba(0,0,0,.4)); animation: askfunWelcomeKiki .6s cubic-bezier(.2,1.3,.4,1) both, askfunHereBob 2.6s ease-in-out 1s infinite; }
@keyframes askfunWelcomeKiki { from { transform: translateY(60px) scale(.6); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.askfun-welcome__card { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); text-align: center; }
.askfun-welcome__line { color: #fff; font-weight: 900; font-size: 1.5em; line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.55); margin: 0 auto 16px; max-width: 17ch; animation: askfunWelcomeLine .5s ease .15s both; }
@keyframes askfunWelcomeLine { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.askfun-welcome__btn { width: 100%; max-width: 340px; animation: askfunWelcomeLine .5s ease .25s both; }
.askfun-welcome__dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.askfun-welcome__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); }
.askfun-welcome__dots i.on { background: #fff; }
.askfun-welcome__skip { display: block; margin: 14px auto 0; background: none; border: 0; color: rgba(255,255,255,.85); font-weight: 700; font-size: .85em; cursor: pointer; }
.ask-reduced .askfun-welcome__bg, .ask-reduced .askfun-welcome__kiki { animation: none; transform: none; }

/* ===== Account: sign-in / save progress (kids-auth) ===== */
.askfun-savechip{display:flex;align-items:center;gap:10px;width:100%;border:0;cursor:pointer;
  background:linear-gradient(180deg,#fff,#f3fbf4);border:2px solid #d7efdc;border-radius:16px;
  padding:12px 14px;margin:0 0 12px;font:inherit;font-weight:800;color:#0f5a2e;
  box-shadow:0 6px 16px rgba(24,185,79,.10);text-align:left}
.askfun-savechip:active{transform:translateY(1px)}
.askfun-savechip__ic{font-size:1.25em;line-height:1}
.askfun-savechip span:nth-child(2){flex:1}
.askfun-savechip__go{font-size:1.2em;color:#18b94f;font-weight:900}
.askfun-savechip--on{background:linear-gradient(180deg,#eafaef,#dff5e6);border-color:#bfe8c9;color:#0f7a3a}

.askfun-acct{background:#fff;border:2px solid #eadfce;border-radius:18px;padding:16px}
.askfun-acct>b{display:block;font-size:1.05em;color:#20303a}
.askfun-acct__p{font-weight:700;font-size:.9em;color:#6c6152;line-height:1.5;margin:6px 0 12px}
.askfun-acct__in{width:100%;box-sizing:border-box;border:2px solid #e2d8c8;border-radius:12px;
  padding:12px 14px;font:inherit;font-weight:700;font-size:1em;background:#fffdf8}
.askfun-acct__in:focus{outline:none;border-color:#18b94f;box-shadow:0 0 0 3px rgba(24,185,79,.15)}
.askfun-acct__go{background:linear-gradient(180deg,#22c55e,#0f9f43)!important;border:0!important;color:#fff!important}
.askfun-acct__err{color:#d1442a;font-weight:800;font-size:.85em;margin-top:8px;min-height:1px}
.askfun-acct__fine{color:#9a8f7e;font-weight:700;font-size:.78em;margin-top:10px;text-align:center}
.askfun-acct__sent b{display:block;font-size:1.05em;color:#0f7a3a}
.askfun-acct--on{border-color:#bfe8c9;background:linear-gradient(180deg,#f6fdf8,#eefaf0)}
.askfun-acct__row{display:flex;align-items:center;gap:12px}
.askfun-acct__row small{display:block;font-weight:700;color:#6c6152;font-size:.82em;margin-top:2px}
.askfun-acct__dot{width:12px;height:12px;border-radius:50%;background:#18b94f;flex:none;
  box-shadow:0 0 0 4px rgba(24,185,79,.2)}
.askfun-sheet__x{position:absolute;top:10px;right:12px;border:0;background:transparent;
  font-size:1.2em;color:#9a8f7e;cursor:pointer;font-weight:900;line-height:1;padding:6px}
.askfun-acct__opt{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-weight:700;
  font-size:.82em;color:#6c6152;line-height:1.4;cursor:pointer}
.askfun-acct__opt input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:#18b94f}
.askfun-acct__fine a{color:#0f9f43;font-weight:800}
.ask-sheet__in{position:relative}

/* ===== Account: password fields, mode links, install, iOS steps ===== */
.askfun-acct__pw{position:relative}
.askfun-acct__pw .askfun-acct__in{padding-right:44px}
.askfun-acct__eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  font-size:1.1em;cursor:pointer;padding:6px;line-height:1;opacity:.6}
.askfun-acct__eye:hover{opacity:1}
.askfun-acct__remember{margin-top:12px}
.askfun-acct__links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:12px}
.askfun-acct__links a{color:#0f9f43;font-weight:800;font-size:.85em;text-decoration:none}
.askfun-acct__links a:hover{text-decoration:underline}
.askfun-acct__or{display:flex;align-items:center;text-align:center;color:#b8ab97;font-weight:800;font-size:.78em;margin:12px 0 8px}
.askfun-acct__or::before,.askfun-acct__or::after{content:"";flex:1;height:1px;background:#eadfce}
.askfun-acct__or::before{margin-right:10px}.askfun-acct__or::after{margin-left:10px}
.askfun-acct__ghostlink{display:block;text-align:center;color:#2E86D1;font-weight:800;font-size:.9em;text-decoration:none;padding:6px}
.askfun-acct__ghostlink:hover{text-decoration:underline}
.askfun-getapp{margin-top:14px!important}
.askfun-getapp-chip{background:linear-gradient(180deg,#fff,#eef6ff)!important;border-color:#cfe4fb!important;color:#155ea8!important}
.askfun-ios{padding-left:20px;margin:0 0 6px}
.askfun-ios li{font-weight:700;color:#3a2c1e;margin:8px 0;line-height:1.5}
.askfun-ios__ic{display:inline-block;background:#eef6ff;border:1px solid #cfe4fb;border-radius:6px;padding:0 6px;color:#155ea8;font-weight:900}

/* ===== First-run funnel (kids-onboard) ===== */
.askonb{position:fixed;inset:0;z-index:1200;background:linear-gradient(180deg,#FFF9EF,#f3f7ee);
  overflow:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
  animation:askonbIn .35s ease}
.askonb.is-out{animation:askonbOut .4s ease forwards}
@keyframes askonbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes askonbOut{to{opacity:0;transform:translateY(-8px)}}
.askonb__bar{display:flex;gap:6px;padding:16px 20px 0;max-width:520px;margin:0 auto;width:100%;box-sizing:border-box}
.askonb__bar i{flex:1;height:6px;border-radius:6px;background:#e6dcc7}
.askonb__bar i.on{background:linear-gradient(90deg,#22c55e,#0f9f43)}
.askonb__in{max-width:520px;margin:0 auto;width:100%;box-sizing:border-box;padding:8px 22px 40px;
  display:flex;flex-direction:column;min-height:0}
.askonb__hero{position:relative;text-align:center;padding:14px 0 6px}
.askonb__kiki{width:150px;height:auto;filter:drop-shadow(0 10px 18px rgba(61,42,24,.18));animation:askonbBob 3s ease-in-out infinite}
@keyframes askonbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.askonb__bubble{display:inline-block;margin-top:6px;background:#fff;border:2px solid #eadfce;border-radius:16px;
  padding:10px 14px;font-weight:800;color:#2b1f16;max-width:340px;line-height:1.4;box-shadow:0 6px 16px rgba(61,42,24,.1)}
.askonb__body{margin-top:12px}
.askonb__h1{font-size:1.55em;line-height:1.2;font-weight:900;color:#20303a;margin:6px 0 8px;text-align:center}
.askonb__hl{color:#F05423}
.askonb__p{font-weight:700;color:#6c6152;line-height:1.55;text-align:center;margin:0 0 18px}
.askonb__q{font-weight:900;color:#20303a;font-size:1.05em;margin:14px 0 10px;text-align:center}
.askonb .ask-tiles{display:grid;gap:12px}
.askonb__pick{display:grid;gap:12px}
.askonb__yn{width:100%}
.askonb__go{width:100%;margin-top:18px}
.askonb__card{background:#fff;border:2px solid #eadfce;border-radius:18px;padding:16px}
.askonb__lvl{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f0e7d6;font-weight:800;color:#6c6152}
.askonb__lvl:last-of-type{border-bottom:0}
.askonb__lvl b{color:#0f9f43}
.askonb__in-field{width:100%;box-sizing:border-box;border:2px solid #e2d8c8;border-radius:12px;padding:13px 14px;
  font:inherit;font-weight:700;font-size:1em;background:#fffdf8;margin-top:10px}
.askonb__in-field:focus{outline:none;border-color:#18b94f;box-shadow:0 0 0 3px rgba(24,185,79,.15)}
.askonb__pw{position:relative}
.askonb__pw .askonb__in-field{padding-right:44px}
.askonb__eye{position:absolute;right:8px;top:calc(50% + 5px);transform:translateY(-50%);border:0;background:transparent;font-size:1.1em;cursor:pointer;opacity:.6;padding:6px}
.askonb__opt{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-weight:700;font-size:.85em;color:#6c6152;line-height:1.4;cursor:pointer}
.askonb__opt input{margin-top:2px;width:16px;height:16px;accent-color:#18b94f;flex:none}
.askonb__err{color:#d1442a;font-weight:800;font-size:.85em;margin-top:10px;min-height:1px;text-align:center}
.askonb__fine{color:#9a8f7e;font-weight:700;font-size:.78em;margin-top:12px;text-align:center;line-height:1.5}
.askonb__fine a{color:#0f9f43;font-weight:800}
.askonb__switch{text-align:center;font-weight:800;font-size:.85em;color:#6c6152;margin-top:14px}
.askonb__switch a{color:#0f9f43;text-decoration:none}
.askonb__av{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:6px}
.askonb__avpick{font-size:1.5em;background:#fff;border:2px solid #eadfce;border-radius:14px;padding:8px 0;cursor:pointer;line-height:1}
.askonb__avpick.is-on{border-color:#18b94f;background:#eafaef;box-shadow:0 0 0 3px rgba(24,185,79,.15)}

/* first-run funnel: top row + language toggle */
.askonb__top{display:flex;align-items:center;gap:12px;padding:16px 20px 0;max-width:520px;margin:0 auto;width:100%;box-sizing:border-box}
.askonb__top .askonb__bar{flex:1;padding:0;margin:0;max-width:none}
.askonb__lang{display:inline-flex;background:#efe6d4;border-radius:999px;padding:3px;flex:none}
.askonb__lang button{border:0;background:transparent;font:inherit;font-weight:800;font-size:.8em;color:#6c6152;
  padding:5px 11px;border-radius:999px;cursor:pointer;line-height:1}
.askonb__lang button.on{background:#fff;color:#0f9f43;box-shadow:0 2px 6px rgba(61,42,24,.12)}

/* ===== Translate toggle (in-lesson) ===== */
.ask-tr-btn{margin-top:12px;border:2px solid #cfe4fb;background:linear-gradient(180deg,#fff,#eef6ff);
  color:#155ea8;font-weight:800;border-radius:14px;padding:10px 14px;cursor:pointer;font-size:.95em}
.ask-tr-btn:active{transform:translateY(1px)}
.ask-tr{margin-top:12px;background:#f3f8ff;border:2px solid #d7e8fb;border-radius:14px;padding:12px 14px;text-align:center}
.ask-tr__w{font-weight:900;font-size:1.5em;color:#0f3f6e;line-height:1.3}
.ask-tr__ex{font-weight:700;color:#3f6a92;margin-top:6px;line-height:1.5}
.ask-tr__err{font-weight:700;color:#b06a2a;font-size:.9em}

/* ===== Funnel: native-language picker ===== */
.askonb__langs{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:46vh;overflow:auto;
  padding:4px;margin-bottom:4px}
.askonb__langpick{border:2px solid #eadfce;background:#fff;border-radius:12px;padding:11px 10px;
  font:inherit;font-weight:800;font-size:.9em;color:#2b1f16;cursor:pointer;text-align:center;line-height:1.25}
.askonb__langpick.is-on{border-color:#18b94f;background:#eafaef;box-shadow:0 0 0 3px rgba(24,185,79,.15)}