#mascot-container.hidden{display:none!important}#mascot-container{position:absolute;display:inline-block;padding:20px}.mascot-fixed-wrapper{position:fixed;z-index:9999;pointer-events:none}.mascot-stage{display:flex;flex-direction:column;align-items:center;width:250px;pointer-events:auto}.mascot-visual-wrapper{width:150px;height:150px;display:flex;justify-content:center;align-items:center}.mascot-svg{display:block;position:relative;max-height:150px;z-index:1}.bubble-tail-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:max-content;max-width:250px;margin-bottom:20px;opacity:0;transform:translateY(35px) scale(.1);transform-origin:bottom center;transition:opacity .2s ease-in,transform .4s cubic-bezier(.6,-.28,.735,.045)}.bubble-tail-container.show{opacity:1;transform:translateY(0) scale(1);transition:opacity .2s ease-out,transform .6s cubic-bezier(.34,1.7,.64,1)}.speech-bubble{background:#fff;border-radius:56% 44% 55% 49%/44% 47% 50% 54%;padding:1.1rem 1.6rem 1.25rem;font-family:Inter,sans-serif;font-weight:600;color:#4b4b4b;text-align:center;filter:drop-shadow(2px 2px 0px #e5e5e5) drop-shadow(-2px -2px 0px #e5e5e5) drop-shadow(-2px 2px 0px #e5e5e5) drop-shadow(2px -2px 0px #e5e5e5)}.tail{width:24px;height:24px;margin-top:-2px;filter:drop-shadow(0px 3px 0px #e5e5e5);z-index:-1}.tail path{fill:#fff}.state-correct{animation:jump-bounce .6s cubic-bezier(.34,1.56,.64,1)}.state-incorrect{animation:shake .4s ease-in-out}.state-completed{animation:celebrate 1.5s infinite ease-in-out}.state-failed{filter:grayscale(100%);opacity:.6;transform:translateY(10px)}.state-idle #eyes,.state-playing #eyes{animation:blink 5s infinite}.state-playing{animation:slow-nod 3s infinite ease-in-out}@keyframes jump-bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px) rotate(-3deg)}75%{transform:translate(8px) rotate(3deg)}}@keyframes celebrate{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.1) rotate(5deg)}75%{transform:scale(1.1) rotate(-5deg)}}@keyframes blink{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}@keyframes slow-nod{0%,to{transform:rotate(0)}50%{transform:rotate(3deg) translateY(2px)}}.mascot-stage:has(.mascot-svg.state-correct) .bubble-tail-container.show,.mascot-stage:has(.mascot-svg.state-playing) .bubble-tail-container.show{animation:bubble-pulse 2s infinite ease-in-out}@keyframes bubble-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}