/* Kids Progress V3.6 — Säru mascot animation engine */
.kp-mascot{--kp-mascot-green:#72a832;--kp-mascot-dark:#2f5419;position:relative;display:grid;grid-template-rows:auto auto;justify-items:center;align-items:end;width:100%;max-width:330px;min-width:96px;pointer-events:none;user-select:none;-webkit-user-select:none}
.kp-mascot-stage{position:relative;width:100%;aspect-ratio:1090/1142;transform-origin:50% 82%;animation:kpMascotBreathe 3.2s ease-in-out infinite}
.kp-mascot-body,.kp-mascot-wing{position:absolute;display:block;pointer-events:none;-webkit-user-drag:none}
.kp-mascot-body{inset:0;width:100%;height:100%;object-fit:contain;z-index:3}
.kp-mascot-wing{z-index:2;object-fit:contain;will-change:transform}
.kp-mascot-wing-left{left:1.28%;top:52.28%;width:34.59%;height:21.89%;transform-origin:94% 26%}
.kp-mascot-wing-right{left:63.30%;top:49.04%;width:35.41%;height:24.08%;transform-origin:7% 35%}
.kp-mascot-eye-lid{position:absolute;z-index:5;background:linear-gradient(180deg,#78ad36,#5e9127);border-bottom:2px solid rgba(46,80,20,.75);border-radius:55% 55% 48% 48%;height:0;opacity:0;transform-origin:50% 0;transition:height .08s ease,opacity .08s ease}
.kp-mascot-eye-left{left:39.2%;top:32.2%;width:15.8%}
.kp-mascot-eye-right{left:66.1%;top:33.0%;width:14.8%}
.kp-mascot-mouth{position:absolute;z-index:6;left:48.7%;top:51.0%;width:23.2%;height:2.4%;min-height:2px;background:#4b2818;border:2px solid rgba(40,24,13,.72);border-radius:50%;opacity:0;transform:scaleY(.15);transform-origin:50% 50%}
.kp-mascot-mouth:after{content:"";position:absolute;left:28%;right:28%;bottom:4%;height:34%;border-radius:50%;background:#f49382;opacity:.9}
.kp-mascot-sparkles{position:absolute;inset:0;z-index:7;pointer-events:none}
.kp-mascot-sparkles i{position:absolute;display:block;opacity:0;font-style:normal;font-size:clamp(14px,4vw,26px);filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.kp-mascot-sparkles i:nth-child(1){left:5%;top:28%}.kp-mascot-sparkles i:nth-child(2){right:4%;top:20%}.kp-mascot-sparkles i:nth-child(3){left:18%;top:7%}.kp-mascot-sparkles i:nth-child(4){right:15%;top:48%}
.kp-mascot-bubble{position:relative;z-index:8;max-width:96%;margin-top:-4px;padding:9px 13px;border-radius:16px;background:rgba(255,255,255,.96);border:2px solid rgba(255,255,255,.95);box-shadow:0 7px 18px rgba(17,18,57,.18);color:#171845;text-align:center;font-weight:900;font-size:clamp(11px,2.5vw,16px);line-height:1.18;opacity:0;transform:translateY(4px) scale(.96);transition:opacity .18s ease,transform .18s ease}
.kp-mascot-bubble:before{content:"";position:absolute;left:50%;top:-8px;width:15px;height:15px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.kp-mascot.has-message .kp-mascot-bubble{opacity:1;transform:none}
.kp-mascot.is-blink .kp-mascot-eye-lid{height:11%;opacity:1}
.kp-mascot.is-squint .kp-mascot-eye-lid{height:7%;opacity:1;top:34%}
.kp-mascot.is-talking .kp-mascot-mouth{opacity:1;animation:kpMascotTalk .24s ease-in-out infinite alternate}
.kp-mascot[data-state="thinking"] .kp-mascot-stage{animation:kpMascotThink 1.35s ease-in-out infinite}
.kp-mascot[data-state="correct"] .kp-mascot-stage,.kp-mascot[data-state="celebrate"] .kp-mascot-stage{animation:kpMascotCelebrate .7s cubic-bezier(.2,.8,.3,1) both}
.kp-mascot[data-state="correct"] .kp-mascot-wing-left,.kp-mascot[data-state="celebrate"] .kp-mascot-wing-left{animation:kpWingLeft .22s ease-in-out 5}
.kp-mascot[data-state="correct"] .kp-mascot-wing-right,.kp-mascot[data-state="celebrate"] .kp-mascot-wing-right{animation:kpWingRight .22s ease-in-out 5}
.kp-mascot[data-state="correct"] .kp-mascot-sparkles i,.kp-mascot[data-state="celebrate"] .kp-mascot-sparkles i{animation:kpMascotSparkle .75s ease-out both}
.kp-mascot[data-state="correct"] .kp-mascot-sparkles i:nth-child(2),.kp-mascot[data-state="celebrate"] .kp-mascot-sparkles i:nth-child(2){animation-delay:.08s}.kp-mascot[data-state="correct"] .kp-mascot-sparkles i:nth-child(3),.kp-mascot[data-state="celebrate"] .kp-mascot-sparkles i:nth-child(3){animation-delay:.15s}.kp-mascot[data-state="correct"] .kp-mascot-sparkles i:nth-child(4),.kp-mascot[data-state="celebrate"] .kp-mascot-sparkles i:nth-child(4){animation-delay:.22s}
.kp-mascot[data-state="wrong"] .kp-mascot-stage{animation:kpMascotEncourage .7s ease-in-out both}
.kp-mascot[data-state="wrong"] .kp-mascot-eye-lid{height:6.5%;opacity:1;top:34%}
.kp-mascot[data-state="wave"] .kp-mascot-stage{animation:kpMascotWave .8s ease-in-out both}
@keyframes kpMascotBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5%) scale(1.012)}}
@keyframes kpMascotThink{0%,100%{transform:rotate(-1.6deg) translateY(0)}50%{transform:rotate(1.8deg) translateY(-1.2%)}}
@keyframes kpMascotCelebrate{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-8%) scale(1.04)}68%{transform:translateY(1%) scale(.99)}100%{transform:translateY(0) scale(1)}}
@keyframes kpMascotEncourage{0%,100%{transform:rotate(0)}28%{transform:rotate(-2.8deg)}62%{transform:rotate(2.5deg)}}
@keyframes kpMascotWave{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg) translateY(-2%)}60%{transform:rotate(3deg) translateY(-1%)}}
@keyframes kpWingLeft{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-16deg) scale(1.03)}}
@keyframes kpWingRight{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(16deg) scale(1.03)}}
@keyframes kpMascotTalk{from{transform:scaleY(.35);height:2.8%}to{transform:scaleY(1);height:5.2%}}
@keyframes kpMascotSparkle{0%{opacity:0;transform:scale(.4) rotate(-20deg)}45%{opacity:1;transform:scale(1.25) rotate(8deg)}100%{opacity:0;transform:translateY(-25%) scale(.75) rotate(20deg)}}
@media(prefers-reduced-motion:reduce){.kp-mascot-stage,.kp-mascot-wing,.kp-mascot-mouth,.kp-mascot-sparkles i{animation-duration:.001ms!important;animation-iteration-count:1!important}}