@import url('/moko-talking.css');
.moko-character { position:relative; display:inline-block; width:112px; height:112px; flex:0 0 auto; vertical-align:middle; isolation:isolate; }
.moko-body { display:block; width:100%; height:100%; object-fit:contain; position:relative; z-index:1; transform-origin:50% 85%; animation:moko-float 4s ease-in-out infinite; }
.moko-shadow { position:absolute; bottom:5%; left:29%; width:42%; height:7%; border-radius:50%; background:#244d3e16; filter:blur(3px); }
.moko-spark { position:absolute; opacity:0; color:#dcaa35; font-size:24px; z-index:2; }
.moko-spark-one { top:12%; left:0; }.moko-spark-two { top:26%; right:0; }
.moko-character[data-mood="correct"] .moko-body { animation:moko-hop .7s ease-in-out 2; }
.moko-character[data-mood="retry"] .moko-body { animation:moko-tilt 1.5s ease-in-out 1; }
.moko-character[data-mood="listening"] .moko-body { animation:moko-listen 2.8s ease-in-out infinite; }
.moko-character[data-mood="complete"] .moko-body { animation:moko-hop .9s ease-in-out 3; }
.moko-character[data-mood="complete"] .moko-spark,.moko-character[data-mood="correct"] .moko-spark { animation:moko-spark 1s ease-out 2; }
.lesson-companion { display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0 20px; }
.lesson-companion p { margin:0; max-width:250px; color:#49665e; font-size:14px; line-height:1.7; }
.lesson-companion strong { display:block; color:#294e43; font-size:12px; letter-spacing:.12em; }
.lesson-celebration > .moko-character { width:180px; height:180px; }
@keyframes moko-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-5px) rotate(1deg); } }
@keyframes moko-hop { 0%,100% { transform:translateY(0) scale(1); } 20% { transform:scale(1.06,.94); } 50% { transform:translateY(-16px) rotate(-5deg); } 80% { transform:scale(1.03,.97); } }
@keyframes moko-tilt { 0%,100% { transform:rotate(0); } 40%,70% { transform:rotate(11deg) translateY(-2px); } }
@keyframes moko-listen { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(-8deg) translateY(-4px); } }
@keyframes moko-spark { 0%,100% { opacity:0; transform:translateY(4px) scale(.5); } 45% { opacity:1; transform:translateY(-8px) scale(1); } }
@media(max-width:600px) { .lesson-companion { gap:8px; margin:0 0 12px; } .lesson-companion .moko-character { width:82px; height:82px; } .lesson-companion p { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .moko-character *, .moko-character[data-mood] * { animation:none; } }

.lesson-prompt-character { flex:0 0 auto; }
.lesson-prompt-character .moko-character { width:64px; height:72px; }