/* Sparky the mascot (paired with mascot.js) */
.mascot-row{display:flex;align-items:center;gap:8px;margin:0 0 8px;text-align:left}
.mascot{appearance:none;border:0;background:none;padding:0;margin:0;width:64px;height:64px;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mascot svg{width:100%;height:100%;overflow:visible;display:block}
.mascot-bubble{position:relative;flex:1;min-height:42px;display:flex;align-items:center;background:#fff;border:3px solid #d6e4ff;border-radius:16px;padding:6px 12px;font-weight:800;font-size:.95rem;line-height:1.2;color:#1a2a4a}
.mascot-bubble::before{content:"";position:absolute;left:-9px;top:50%;width:14px;height:14px;background:#fff;border-left:3px solid #d6e4ff;border-bottom:3px solid #d6e4ff;transform:translateY(-50%) rotate(45deg)}
.mascot-bubble.pop{animation:spBubble .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes spBubble{from{transform:scale(.85);opacity:.4}to{transform:none;opacity:1}}
body.grade-adult .mascot-bubble{background:#2e3d58;border-color:#4a5a78;color:#e8eef8}
body.grade-adult .mascot-bubble::before{background:#2e3d58;border-color:#4a5a78}
#start .mascot-row,#end .mascot-row{justify-content:center}

/* Sparky parts */
.sp *{transform-box:fill-box}
.sp-all{transform-origin:50% 100%;animation:spBob 2.4s ease-in-out infinite}
.sp-eyes{transform-origin:50% 50%;animation:spBlink 4.6s infinite}
.sp-eyes-happy,.sp-m-open,.sp-m-oops,.sp-m-o,.sp-drop{display:none}
.sp-arm{transform-origin:50% 0;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.sp-pupil{transition:transform .25s}
.sp-tuft{transform-origin:50% 100%;animation:spTuft 3s ease-in-out infinite}
@keyframes spBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes spBlink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
@keyframes spTuft{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}

/* Happy / correct */
.mascot.happy .sp-eyes,.mascot.cheer .sp-eyes{display:none}
.mascot.happy .sp-eyes-happy,.mascot.cheer .sp-eyes-happy{display:inline}
.mascot.happy .sp-m-smile,.mascot.cheer .sp-m-smile{display:none}
.mascot.happy .sp-m-open,.mascot.cheer .sp-m-open{display:inline}
.mascot.happy .sp-arm-l,.mascot.cheer .sp-arm-l{transform:rotate(140deg)}
.mascot.happy .sp-arm-r,.mascot.cheer .sp-arm-r{transform:rotate(-140deg)}
.mascot.happy .sp-all{animation:spJump .8s cubic-bezier(.3,1.4,.5,1) 1,spBob 2.4s .8s ease-in-out infinite}
.mascot.cheer .sp-all{animation:spCheer .9s ease-in-out infinite}
@keyframes spJump{0%{transform:translateY(0) scale(1.08,.9)}35%{transform:translateY(-22px) scale(.95,1.08) rotate(-6deg)}70%{transform:translateY(0) scale(1.1,.9) rotate(4deg)}100%{transform:translateY(0) scale(1)}}
@keyframes spCheer{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(6deg)}}

/* Oops / wrong (gentle, encouraging) */
.mascot.oops .sp-m-smile{display:none}
.mascot.oops .sp-m-oops,.mascot.oops .sp-drop{display:inline}
.mascot.oops .sp-all{animation:spSad .9s ease-in-out 1,spBob 3.2s .9s ease-in-out infinite}
.mascot.oops .sp-arm-l{transform:rotate(12deg)}
.mascot.oops .sp-arm-r{transform:rotate(-12deg)}
@keyframes spSad{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}45%{transform:rotate(7deg)}70%{transform:rotate(-4deg)}}

/* Listening + thinking */
.mascot.listen .sp-all{animation:spTilt 2.2s ease-in-out infinite}
.mascot.listen .sp-arm-l{transform:rotate(150deg) translateY(4px)}
.mascot.listen .sp-arm-r{transform:rotate(-150deg) translateY(4px)}
.mascot.think .sp-pupil{transform:translate(0,-3px)}
.mascot.think .sp-all{animation:spTilt 3s ease-in-out infinite}
.mascot.think .sp-arm-r{transform:rotate(-165deg)}
@keyframes spTilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* Hurry (countdown) */
.mascot.worry .sp-m-smile{display:none}
.mascot.worry .sp-m-o,.mascot.worry .sp-drop{display:inline}
.mascot.worry .sp-all{animation:spShake .18s linear infinite}
.mascot.worry .sp-arm-l{transform:rotate(25deg)}
.mascot.worry .sp-arm-r{transform:rotate(-25deg)}
@keyframes spShake{0%,100%{transform:translateX(-1.5px)}50%{transform:translateX(1.5px)}}

/* Greeting wave */
.mascot.greet .sp-arm-r{animation:spWave .7s ease-in-out infinite}
.mascot.greet .sp-m-smile{display:none}
.mascot.greet .sp-m-open{display:inline}
@keyframes spWave{0%,100%{transform:rotate(-105deg)}50%{transform:rotate(-150deg)}}

/* Tapped */
.mascot.tapped .sp-all{animation:spJump .6s cubic-bezier(.3,1.4,.5,1)}
.mascot:active .sp-all{transform:scale(.94)}