/* Question host (4 Nov): the lesson's animal from cast/ asks each question in a speech bubble (Duolingo-style),
   reacts Yes! / Hmm in the answer banner, and cheers on the lesson-done screen. kids.js: HOSTS, hostOf, hostPic, hostSay */
.fq.qh{display:flex;align-items:flex-end;gap:8px;margin-top:16px}
.qh-pic{flex:0 0 104px;width:104px;height:124px;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.10));animation:qhIn .5s cubic-bezier(.3,1.45,.5,1) both}
.qh-bub{position:relative;flex:1;min-width:0;background:#fff;border:2px solid #E5E5E5;border-radius:20px;padding:12px 15px 14px;margin-bottom:18px;animation:qhBub .35s .08s cubic-bezier(.3,1.3,.5,1) both}
.qh-bub::before{content:"";position:absolute;left:-9px;bottom:20px;width:14px;height:14px;background:#fff;border-left:2px solid #E5E5E5;border-bottom:2px solid #E5E5E5;transform:rotate(45deg);border-bottom-left-radius:3px}
.qh-bub .kick{margin-top:0!important;font-size:13px;padding:0!important;background:none!important;box-shadow:none!important;border-radius:0}   /* flush with the question (the old pill padding indented it) */
.fq.qh .qh-bub h2{font-size:22px;line-height:1.18;margin-top:4px}
.flow.quiz .fq.qh .qh-bub h2{font-size:22px}
@media(max-width:360px){.qh-pic{flex-basis:76px;width:76px;height:92px}.fq.qh .qh-bub h2{font-size:20px}}
/* the banner's reaction pose: a whole animal, so no crop */
.fb-car.host{width:92px;height:96px;object-fit:contain;object-position:50% 100%;margin:-40px 0 -6px -4px}
/* lesson done: the host's Cheer pose instead of Carlos */
.kw-hero.host img{width:auto;height:190px;max-width:240px;object-fit:contain;-webkit-mask-image:none;mask-image:none}
@keyframes qhIn{from{transform:translateY(14px) scale(.86);opacity:0}}
@keyframes qhBub{from{transform:scale(.92);opacity:0}}

/* 6 Nov (Joshua: "the court gets cut off, you have to scroll… everything's visible"): a court question fills the space left
   between the question bubble and the Check button and shrinks to fit it, never scrolls */
.flow.quiz:has(.courtq) .fq.qh,html.duo3 .flow.quiz:has(.courtq) .fq.qh{margin-top:12px}
.flow.quiz .fbody:has(>.courtq),html.duo3 .flow.quiz .fbody:has(>.courtq){flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column;margin:12px 0 0;padding:4px 0 10px}
.fbody>.courtq{flex:1 1 0;min-height:0}
.fbody>.courtq svg,html.duo3 .fbody>.courtq svg{flex:1 1 0;min-height:0;width:100%;height:100%;max-width:340px;max-height:none}
.fbody>.courtq .cq-key{flex:0 0 auto}
/* 6 Nov (Joshua: "here you have to scroll down"): the lesson-done screen fits the phone. The animal's picture gives up height first
   (kids.js fitDone: 190px down to 72px), everything else is a touch tighter, and only a very long drill on a very small phone would still scroll */
.fbody.center:has(.kw-hero.host){display:flex;flex-direction:column;gap:10px;justify-content:flex-start}
.fbody.center:has(.kw-hero.host)>*{flex:0 0 auto;margin-top:0;margin-bottom:0}
.fbody.center:has(.kw-hero.host)>.rw{padding-top:0}
.rw .kw-hero.host{height:190px;width:100%}
.rw .kw-hero.host::before{width:min(210px,100%);height:auto;aspect-ratio:1;max-height:100%}
.rw .kw-hero.host img{height:100%;max-height:190px;width:auto;max-width:240px}
.rw:has(.kw-hero.host) h2{font-size:28px;margin-top:6px}
.rw:has(.kw-hero.host) p{font-size:15px;margin-top:2px}
.rw:has(.kw-hero.host) .xp{margin-top:10px}
.fbody.center:has(.kw-hero.host) .rc{padding:12px 16px}
.fbody.center:has(.kw-hero.host) .rc b{font-size:17px}
.fbody.center:has(.kw-hero.host) .tryc li,.fbody.center:has(.kw-hero.host) .tryc em{font-size:14.5px;line-height:1.3}
/* lesson intro: the host animal instead of 3D Carlos (6 Nov) */
.ki-hero.host{height:230px;margin-bottom:-18px}
.ki-hero.host img{height:100%;filter:drop-shadow(0 10px 14px rgba(40,20,90,.18))}
@media (max-height:760px){.ki-hero.host{height:160px;margin-bottom:-14px}}
/* two-word answers: a small picture in a soft circle, shorter boxes (6 Nov) */
.tf.words button{height:136px;gap:10px;font-size:19px;line-height:1.15;padding:14px 12px}
.flow.quiz .tf.words button{height:150px}
.tf .tw{width:54px;height:54px;border-radius:50%;background:#F1ECFF;color:#7A41FD;box-shadow:inset 0 -3px 0 rgba(122,65,253,.14);display:grid;place-items:center;flex:none}
.tf .tw svg{width:28px;height:28px;color:#7A41FD}
.tf .tw b{font-size:22px;font-weight:900;color:#7A41FD}
.tf button.on .tw{background:#7A41FD}.tf button.on .tw svg,.tf button.on .tw b{color:#fff}
.tf button.ok .tw{background:#2FC46B}.tf button.no .tw{background:#FF4D5E}.tf button.ok .tw svg,.tf button.no .tw svg,.tf button.ok .tw b,.tf button.no .tw b{color:#fff}
/* tip split into short screens (6 Nov): dots show 1 · 2 · 3, the later screens are one big point with the host */
.tdots{display:flex;justify-content:center;gap:8px;margin:16px 0 4px}
.tdots i{width:8px;height:8px;border-radius:4px;background:#E5E5EE;transition:width .25s,background .25s}
.tdots i.on{width:24px;background:var(--tc,#7A41FD)}.tdots i.done{background:#C9C4E8}
.tcard.tmore{padding-top:18px}
.tcard.tmore .tpic img{max-height:220px;width:auto;margin:0 auto}
.tcard.tmore .tsay b{font-size:24px;line-height:1.2}
.tcard.tmore .tk{display:block;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#7A41FD;margin-bottom:6px}
/* badge art (6 Nov) */
.stk img.bart{display:block;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(30,20,80,.15))}
.stk-g .stk img.bart{width:84px;height:84px;margin:0 auto 6px}
.stk.off img.bart{filter:grayscale(1);opacity:.35}
.medal-art{display:block;width:200px;height:200px;object-fit:contain;margin:0 auto;animation:kiPop .55s cubic-bezier(.3,1.5,.5,1) both;filter:drop-shadow(0 12px 16px rgba(30,20,80,.18))}
/* painted lesson illustration (6 Nov) replaces the drawn court diagram */
.tpic.lart{width:100%;margin:0 0 12px}
.tpic.lart img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}