/* Distinct motion for all eight approved 2D mascot reactions. */
.reaction-mascot.wave img{animation:tsoohorWave .75s ease 2!important;transform-origin:45% 70%}
.reaction-mascot.idle img{animation:tsoohorIdle 2.4s ease-in-out infinite!important}
.reaction-mascot.thinking img{animation:tsoohorThink 1.7s ease-in-out infinite!important}
.reaction-mascot.surprised img{animation:tsoohorSurprise .55s cubic-bezier(.2,1.5,.5,1) both!important}
.reaction-mascot.proud img{animation:tsoohorProud .8s ease both!important}
.reaction-mascot.sleepy img{animation:tsoohorSleepy 2.6s ease-in-out infinite!important}
@keyframes tsoohorWave{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-5deg) translateY(-7px)}70%{transform:rotate(4deg) translateY(-3px)}}
@keyframes tsoohorIdle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.01)}}
@keyframes tsoohorThink{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes tsoohorSurprise{0%{transform:scale(.72) rotate(-5deg)}65%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1)}}
@keyframes tsoohorProud{0%{transform:translateY(8px) scale(.9)}55%{transform:translateY(-10px) scale(1.06)}100%{transform:translateY(0) scale(1)}}
@keyframes tsoohorSleepy{0%,100%{transform:translateY(2px) rotate(-2deg);opacity:.92}50%{transform:translateY(7px) rotate(2deg);opacity:.74}}
@media(prefers-reduced-motion:reduce){.reaction-mascot img{animation:none!important}}

/* Feedback box tone: green = correct, red = wrong — wins over theme & mobile overrides */
.feedback.feedback--correct{background:#eafff5!important;border-top-color:#b7ebd9!important}
.feedback.feedback--correct b{color:#168461!important}
.feedback.feedback--correct p{color:#487569!important}
.feedback.feedback--wrong{background:#fff0ee!important;border-top-color:#f3c1c6!important}
.feedback.feedback--wrong b{color:#b4232a!important}
.feedback.feedback--wrong p{color:#7c5a5e!important}
html[data-theme="dark"] .feedback.feedback--correct{background:#12251d!important;border-top-color:#31574e!important}
html[data-theme="dark"] .feedback.feedback--correct b{color:#63e0a6!important}
html[data-theme="dark"] .feedback.feedback--correct p{color:#a8d8c4!important}
html[data-theme="dark"] .feedback.feedback--wrong{background:#2b1416!important;border-top-color:#5e3438!important}
html[data-theme="dark"] .feedback.feedback--wrong b{color:#ff9c9c!important}
html[data-theme="dark"] .feedback.feedback--wrong p{color:#d4a3a3!important}