/* ActuallySpeak Kids — "How do I play?" mini videos (js/kids-howto.js) */
.ht-q{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;margin:0 6px;cursor:pointer;border:3px solid #fff;
  font-family:'Fredoka',var(--font);font-weight:700;font-size:20px;line-height:1;color:#fff;
  background:linear-gradient(160deg,#FFB21A,#FF3D7F);box-shadow:0 3px 0 #C21E5C;animation:htQ 3s ease-in-out infinite
}
@keyframes htQ{0%,85%,100%{transform:none}90%{transform:rotate(-12deg) scale(1.1)}95%{transform:rotate(10deg) scale(1.1)}}
.ht-ov{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:16px;background:rgba(43,26,94,.55);animation:htFade .2s ease both}
.ht-ov.is-out{animation:htFade .2s ease reverse both}
@keyframes htFade{from{opacity:0}to{opacity:1}}
.ht-card-wrap{width:min(380px,100%);background:#fff;border-radius:28px;padding:14px 14px 16px;box-shadow:0 18px 40px rgba(0,0,0,.3);animation:askSayIn .4s cubic-bezier(.2,1.5,.4,1) both}
.ht-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ht-kiki{width:58px;flex:0 0 auto}
.ht-title{font-family:'Fredoka',var(--font);font-weight:700;font-size:1.45em;line-height:1.1;
  background:linear-gradient(90deg,#FF6A2E,#FF3D7F,#A030E8);-webkit-background-clip:text;background-clip:text;color:transparent}
.ht-screen{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;border:4px solid #2B1A5E;
  background:linear-gradient(180deg,#7AD8FF 0%,#2EC5FF 45%,#2DE1D0 100%)}
.ht-rec{position:absolute;left:8px;top:8px;font:700 11px 'Fredoka',var(--font);color:#fff;background:rgba(0,0,0,.35);padding:3px 8px;border-radius:999px}
.ht-btns{display:flex;gap:10px;margin-top:12px}
.ht-again{width:54px;border:0;border-radius:18px;font-size:22px;cursor:pointer;background:#F4ECFF;color:#6D28D9;box-shadow:0 4px 0 #C6B6FA}
.ht-gotit{flex:1;border:0;border-radius:18px;padding:14px;cursor:pointer;font:700 1.15em 'Fredoka',var(--font);color:#fff;
  background:linear-gradient(160deg,#FFB21A,#FF6A2E 45%,#FF3D7F);box-shadow:0 5px 0 #C21E5C}

/* the stage + its actors */
.ht-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-family:'Fredoka',var(--font)}
.ht-hand{position:absolute;font-size:40px;font-style:normal;left:70%;top:110%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.3));z-index:5;transition:none}
.ht-star{position:absolute;font-style:normal;font-size:30px;opacity:0;z-index:4}
.ht-row{display:flex;gap:10px}
.ht-card{position:relative;width:76px;height:76px;border-radius:16px;background:#fff;display:grid;place-items:center;font-size:40px;box-shadow:0 4px 0 #C6B6FA}
.ht-spk,.ht-word{background:#fff;border-radius:999px;padding:6px 16px;font-weight:700;font-size:20px;color:#2B1A5E;box-shadow:0 3px 0 #C6B6FA}
.ht-spk b{margin-left:6px;color:#FF3D7F}
.ht-word{font-size:26px;color:#FF3D7F}
.ht-pic{width:84px;height:84px;border-radius:18px;background:#fff;display:grid;place-items:center;font-size:52px;box-shadow:0 4px 0 #C6B6FA}
.ht-boxes{display:flex;gap:6px}
.ht-boxes i{width:38px;height:44px;border-radius:10px;border:3px dashed #A030E8;background:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:24px;color:transparent}
.ht-tiles{display:flex;gap:8px}
.ht-tiles span,.ht-fly,.ht-pick span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:22px;color:#fff;background:linear-gradient(180deg,#FFB21A,#FF6A2E);box-shadow:0 3px 0 #C2410C}
.ht-fly{position:absolute;opacity:0;z-index:4}
.ht-pick{display:flex;gap:8px;opacity:0;padding:6px 10px;border-radius:14px;background:#F4ECFF;border:2px dashed #A030E8}
.ht-pick span{background:#fff;color:#2B1A5E;box-shadow:0 3px 0 #C6B6FA}
.ht-mic{position:relative;display:grid;place-items:center}
.ht-mic__btn{width:76px;height:76px;border-radius:50%;border:4px solid #fff;box-shadow:0 5px 0 #C21E5C;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='22' y='6' width='20' height='34' rx='10' fill='white'/%3E%3Cpath d='M14 30a18 18 0 0 0 36 0' fill='none' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M32 48v8M22 58h20' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/52% no-repeat,linear-gradient(160deg,#FFB21A,#FF6A2E 45%,#FF3D7F)}
.ht-mic--sm .ht-mic__btn{width:56px;height:56px}
.ht-waves{position:absolute;left:100%;display:flex;gap:3px;align-items:center;margin-left:8px;opacity:0}
.ht-waves i{width:5px;height:10px;border-radius:3px;background:#fff}
.ht-bubble{background:#fff;border-radius:16px;padding:4px 12px;font-weight:700;color:#2B1A5E;opacity:0}
.ht-help{position:absolute;right:12px;bottom:12px;background:#fff;border-radius:999px;padding:4px 10px;font-weight:700;font-size:14px;color:#4A5182}
.ht-slots{display:flex;gap:6px}
.ht-slots i{min-width:56px;height:40px;border-radius:10px;border:3px dashed #A030E8;background:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;color:transparent;padding:0 6px}
.ht-build .ht-tiles span{width:auto;padding:0 12px}
.ht-fly--w{width:auto;padding:0 12px}
.ht-line{background:#fff;border-radius:16px;padding:10px 14px;font-size:22px;font-weight:700;color:#2B1A5E}
.ht-line span{border-radius:8px;padding:0 3px}
.ht-row--btns .ht-b{width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 3px 0 #C6B6FA}
.ht-go{background:linear-gradient(160deg,#FFB21A,#FF3D7F);color:#fff;font-weight:700;padding:6px 16px;border-radius:14px;box-shadow:0 3px 0 #C21E5C}

/* ---- the clips (4.5s loops, start when .is-play is added) ---- */
.is-play .ht-hand{animation:htHand 4.5s ease-in-out infinite}
.ht-tap.is-play .ht-hand{animation-name:htTapHand}
.ht-tap.is-play .ht-ok{animation:htGood 4.5s ease infinite}
.ht-tap.is-play .ht-star{left:50%;top:40%;animation:htStar 4.5s ease infinite}
.ht-tap.is-play .ht-spk{animation:htPulse 4.5s ease infinite}
@keyframes htTapHand{0%{left:80%;top:110%}20%{left:80%;top:110%}45%{left:48%;top:56%}52%{left:48%;top:52%;transform:scale(.85)}58%{left:48%;top:56%;transform:none}90%,100%{left:48%;top:56%}}
@keyframes htGood{0%,52%{box-shadow:0 4px 0 #C6B6FA;transform:none}56%{box-shadow:0 0 0 5px #22C55E;transform:scale(1.1)}62%,92%{box-shadow:0 0 0 5px #22C55E;transform:none}100%{box-shadow:0 4px 0 #C6B6FA}}
@keyframes htStar{0%,54%{opacity:0;transform:translateY(0) scale(.4)}62%{opacity:1;transform:translateY(-26px) scale(1.2)}85%{opacity:1;transform:translateY(-36px) scale(1)}100%{opacity:0}}
@keyframes htPulse{0%,10%{transform:none}15%{transform:scale(1.12)}20%,100%{transform:none}}

.ht-say.is-play .ht-hand{animation-name:htSayHand}
@keyframes htSayHand{0%{left:80%;top:110%}18%{left:52%;top:56%}22%{left:52%;top:52%;transform:scale(.85)}26%{left:52%;top:56%;transform:none}40%{left:85%;top:85%}62%{left:52%;top:56%}66%{left:52%;top:52%;transform:scale(.85)}70%,100%{left:52%;top:56%;transform:none}}
.ht-say.is-play .ht-mic__btn,.ht-recall.is-play .ht-mic__btn{animation:htRec 4.5s ease infinite}
@keyframes htRec{0%,21%{filter:none}23%,65%{filter:hue-rotate(-30deg) saturate(1.6);transform:scale(1.06)}67%,100%{filter:none;transform:none}}
.ht-say.is-play .ht-waves{animation:htShow 4.5s ease infinite}
.ht-say.is-play .ht-waves i{animation:htWave .4s ease-in-out infinite alternate}
.ht-waves i:nth-child(2){animation-delay:.1s !important}.ht-waves i:nth-child(3){animation-delay:.2s !important}.ht-waves i:nth-child(4){animation-delay:.3s !important}
@keyframes htWave{to{height:26px}}
@keyframes htShow{0%,24%{opacity:0}28%,64%{opacity:1}68%,100%{opacity:0}}
.ht-say.is-play .ht-bubble{animation:htShow2 4.5s ease infinite}
@keyframes htShow2{0%,30%{opacity:0;transform:scale(.6)}36%,64%{opacity:1;transform:none}70%,100%{opacity:0}}
.ht-say.is-play .ht-star{left:50%;top:22%;animation:htStar2 4.5s ease infinite}
@keyframes htStar2{0%,70%{opacity:0;transform:scale(.4)}78%,94%{opacity:1;transform:scale(1.3)}100%{opacity:0}}

.ht-recall.is-play .ht-hand{animation-name:htRecHand}
@keyframes htRecHand{0%{left:80%;top:110%}20%{left:52%;top:72%}24%{left:52%;top:68%;transform:scale(.85)}28%,100%{left:52%;top:72%;transform:none}}
.ht-recall.is-play .ht-boxes i{animation:htLetter 4.5s ease infinite}
.ht-recall.is-play .ht-boxes i:nth-child(2){animation-delay:.15s}.ht-recall.is-play .ht-boxes i:nth-child(3){animation-delay:.3s}
@keyframes htLetter{0%,55%{color:transparent;background:#fff}62%,95%{color:#2B1A5E;background:#DCFCE7;border-style:solid;border-color:#16A34A}100%{color:transparent}}
.ht-recall.is-play .ht-star{left:62%;top:18%;animation:htStar2 4.5s ease infinite}

.ht-spell.is-play .ht-hand{animation:htSpellHand 6s ease-in-out infinite}
@keyframes htSpellHand{0%{left:80%;top:110%}12%{left:36%;top:80%}16%{left:36%;top:80%;transform:scale(.85)}36%{left:38%;top:52%;transform:scale(.85)}40%{left:38%;top:52%;transform:none}52%{left:50%;top:52%}55%{left:50%;top:50%;transform:scale(.85)}58%{left:50%;top:52%;transform:none}70%{left:50%;top:66%}73%{left:50%;top:64%;transform:scale(.85)}76%,100%{left:50%;top:66%;transform:none}}
.ht-spell.is-play .ht-fly{animation:htFly 6s ease-in-out infinite}
@keyframes htFly{0%,15%{opacity:0;left:34%;top:72%}16%{opacity:1;left:34%;top:72%;transform:scale(1.15) rotate(-6deg)}36%{opacity:1;left:35%;top:43%;transform:scale(1.15) rotate(-6deg)}40%,100%{opacity:0;left:35%;top:43%}}
.ht-spell.is-play .ht-tiles .t1{animation:htGone 6s ease infinite}
@keyframes htGone{0%,15%{opacity:1}16%,96%{opacity:.25}100%{opacity:1}}
.ht-spell.is-play .ht-boxes .b1{animation:htFill1 6s ease infinite}
@keyframes htFill1{0%,38%{color:transparent;background:#fff}40%,96%{color:#2B1A5E;background:#FFF1D6;border-style:solid;border-color:#FF6A2E}100%{color:transparent}}
.ht-spell.is-play .ht-boxes .b2{animation:htFill2 6s ease infinite}
@keyframes htFill2{0%,53%{color:transparent;background:#fff;box-shadow:none}55%,74%{color:transparent;box-shadow:0 0 0 4px rgba(160,48,232,.35)}76%,96%{color:#2B1A5E;background:#FFF1D6;border-style:solid;border-color:#FF6A2E;box-shadow:none}100%{color:transparent}}
.ht-spell.is-play .ht-pick{animation:htPick 6s ease infinite}
@keyframes htPick{0%,56%{opacity:0;transform:scale(.8)}60%,76%{opacity:1;transform:none}80%,100%{opacity:0}}
.ht-spell .ht-pick span.ok{animation:none}
.ht-spell.is-play .ht-pick .ok{animation:htOkPick 6s ease infinite}
@keyframes htOkPick{0%,72%{background:#fff}74%,78%{background:#DCFCE7;box-shadow:0 0 0 3px #16A34A}100%{background:#fff}}

.ht-build.is-play .ht-hand{animation:htBuildHand 6s ease-in-out infinite}
@keyframes htBuildHand{0%{left:80%;top:110%}12%{left:50%;top:70%}16%{left:50%;top:70%;transform:scale(.85)}34%{left:22%;top:42%;transform:scale(.85)}38%,100%{left:22%;top:42%;transform:none}}
.ht-build.is-play .ht-fly{animation:htFlyW 6s ease-in-out infinite}
@keyframes htFlyW{0%,15%{opacity:0;left:44%;top:60%}16%{opacity:1;left:44%;top:60%;transform:scale(1.15) rotate(-5deg)}34%{opacity:1;left:16%;top:33%;transform:scale(1.15) rotate(-5deg)}38%,100%{opacity:0}}
.ht-build.is-play .ht-slots .s1{animation:htW1 6s ease infinite}
.ht-build.is-play .ht-slots .s2{animation:htW2 6s ease infinite}
.ht-build.is-play .ht-slots .s3{animation:htW3 6s ease infinite}
@keyframes htW1{0%,37%{color:transparent}39%,96%{color:#2B1A5E;background:#FFF1D6;border-style:solid;border-color:#FF6A2E}100%{color:transparent}}
@keyframes htW2{0%,55%{color:transparent}57%,96%{color:#2B1A5E;background:#FFF1D6;border-style:solid;border-color:#FF6A2E}100%{color:transparent}}
@keyframes htW3{0%,72%{color:transparent}74%,96%{color:#2B1A5E;background:#DCFCE7;border-style:solid;border-color:#16A34A}100%{color:transparent}}
.ht-build.is-play .ht-tiles .w1{animation:htGone 6s ease infinite}
.ht-build.is-play .ht-tiles .w2{animation:htGone2 6s ease infinite}
.ht-build.is-play .ht-tiles .w3{animation:htGone3 6s ease infinite}
@keyframes htGone2{0%,55%{opacity:1}57%,96%{opacity:.25}100%{opacity:1}}
@keyframes htGone3{0%,72%{opacity:1}74%,96%{opacity:.25}100%{opacity:1}}

.ht-find.is-play .ht-hand{animation:htFindHand 4.5s ease-in-out infinite}
@keyframes htFindHand{0%{left:80%;top:110%}30%{left:40%;top:60%}36%{left:40%;top:56%;transform:scale(.85)}42%,100%{left:40%;top:60%;transform:none}}
.ht-find.is-play .ht-line .ok{animation:htFound 4.5s ease infinite}
@keyframes htFound{0%,36%{background:transparent}40%,95%{background:#FFE14D;box-shadow:0 0 0 3px #FFC800}100%{background:transparent}}
.ht-find.is-play .ht-star{left:40%;top:36%;animation:htStar 4.5s ease infinite}

.ht-teach.is-play .ht-hand{animation:htTeachHand 6s ease-in-out infinite}
@keyframes htTeachHand{0%{left:80%;top:110%}12%{left:42%;top:72%}15%{left:42%;top:70%;transform:scale(.85)}18%{left:42%;top:72%;transform:none}38%{left:58%;top:72%}41%{left:58%;top:70%;transform:scale(.85)}44%{left:58%;top:72%;transform:none}66%{left:52%;top:90%}69%{left:52%;top:88%;transform:scale(.85)}72%,100%{left:52%;top:90%;transform:none}}
.ht-teach.is-play .ht-b.b1{animation:htB1 6s ease infinite}
.ht-teach.is-play .ht-b.b2{animation:htB2 6s ease infinite}
@keyframes htB1{0%,14%{transform:none}16%,24%{transform:scale(1.2);box-shadow:0 0 0 4px #2EC5FF}26%,100%{transform:none}}
@keyframes htB2{0%,40%{transform:none}42%,60%{transform:scale(1.2);box-shadow:0 0 0 4px #FF3D7F}62%,100%{transform:none}}

@media (prefers-reduced-motion:reduce){ .ht-q{animation:none} }