.ch .v { display: none; }
.ch[data-mood="normal"] .v-normal,
.ch[data-mood="happy"] .v-happy,
.ch[data-mood="surprised"] .v-surprised,
.ch[data-mood="thinking"] .v-thinking,
.ch[data-mood="sad"] .v-sad,
.ch[data-mood="love"] .v-love { display: inline; }
.ch .talk { display: none; }
.ch[data-talking] .mouth { display: none; }
.ch[data-talking] .talk { display: inline; }
.ch .talk-open { animation: ch-talk .26s steps(1, end) infinite; }
/* Lip sync: while a voice clip plays, the mouth follows the visemes. */
.ch .vis { display: none; }
.ch[data-viseme] .mouth, .ch[data-viseme] .talk { display: none; }
.ch[data-viseme="X"] .vis-X,
.ch[data-viseme="M"] .vis-M,
.ch[data-viseme="S"] .vis-S,
.ch[data-viseme="E"] .vis-E,
.ch[data-viseme="A"] .vis-A,
.ch[data-viseme="O"] .vis-O,
.ch[data-viseme="F"] .vis-F { display: inline; }
@keyframes ch-talk { 0% { opacity: 1; } 50% { opacity: 0; } }
.ch .look { transition: transform .25s ease-out; }
.ch .act { transform-box: view-box; transform-origin: 120px 212px; }
.ch.act-hop .act { animation: ch-hop .7s ease-out; }
@keyframes ch-hop {
  0% { transform: none; }
  15% { transform: scale(1.1, .9); }
  45% { transform: translateY(-46px) scale(.95, 1.06); }
  75% { transform: translateY(0) scale(1.08, .92); }
  100% { transform: none; }
}
.ch.act-wiggle .act { animation: ch-wiggle .7s ease-in-out; }
@keyframes ch-wiggle {
  0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); }
  40% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); }
}
.ch.walking .act { animation: ch-walk .38s ease-in-out infinite; }
@keyframes ch-walk {
  0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .ch, .ch * { animation: none !important; transition: none !important; } }

.ch-moogi .bob { transform-box: view-box; transform-origin: 120px 206px; animation: moogi-breathe 2.2s ease-in-out infinite; }
@keyframes moogi-breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.04,.96); } }
.ch-moogi .shadow { transform-box: fill-box; transform-origin: center; animation: moogi-shadow 2.2s ease-in-out infinite; }
@keyframes moogi-shadow { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.07); } }
.ch-moogi .eye { transform-box: fill-box; transform-origin: center; animation: moogi-blink 4.2s infinite; }
@keyframes moogi-blink { 0%,44%,50%,100% { transform: scaleY(1); } 47% { transform: scaleY(.1); } }
.ch-moogi .arm-r { transform-box: view-box; transform-origin: 176px 146px; transform: rotate(-20deg); }
.ch-moogi.act-wave .arm-r { animation: moogi-wave 1.5s ease-in-out; }
@keyframes moogi-wave {
  0%,100% { transform: rotate(-20deg); } 20% { transform: rotate(-140deg); } 35% { transform: rotate(-105deg); }
  50% { transform: rotate(-140deg); } 65% { transform: rotate(-105deg); } 80% { transform: rotate(-140deg); }
}
.ch-moogi .antenna { transform-box: view-box; transform-origin: 120px 80px; animation: moogi-sway 2.2s ease-in-out infinite; }
@keyframes moogi-sway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
.ch-moogi .glow { transform-box: fill-box; transform-origin: center; animation: moogi-glow 2.2s ease-in-out infinite; }
.ch-moogi[data-mood="thinking"] .glow { animation-duration: .7s; }
.ch-moogi[data-mood="thinking"] .bulb { fill: #FFF3A6; }
@keyframes moogi-glow { 0%,100% { opacity: .2; transform: scale(.75); } 50% { opacity: .8; transform: scale(1.3); } }
.ch-moogi .tear { animation: moogi-tear 1.6s ease-in infinite; }
@keyframes moogi-tear { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

.ch-bitty .hover { animation: bitty-hover 2s ease-in-out infinite; }
@keyframes bitty-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ch-bitty .shadow { transform-box: fill-box; transform-origin: center; animation: bitty-shadow 2s ease-in-out infinite; }
@keyframes bitty-shadow { 0%,100% { transform: scale(1); opacity: .16; } 50% { transform: scale(.8); opacity: .08; } }
.ch-bitty .jet { transform-box: fill-box; transform-origin: center top; animation: bitty-jet .25s ease-in-out infinite alternate; }
@keyframes bitty-jet { from { transform: scaleY(.8); opacity: .7; } to { transform: scaleY(1.15); opacity: 1; } }
.ch-bitty .eye { transform-box: fill-box; transform-origin: center; animation: bitty-blink 5s infinite; }
@keyframes bitty-blink { 0%,60%,65%,100% { transform: scaleY(1); } 62.5% { transform: scaleY(.12); } }
.ch-bitty .beat { transform-box: fill-box; transform-origin: center; animation: bitty-beat .5s ease-in-out infinite; }
@keyframes bitty-beat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.ch-bitty .light { animation: bitty-light 1s ease-in-out infinite; }
@keyframes bitty-light { 0%,100% { opacity: .15; } 50% { opacity: .7; } }
.ch-bitty .arm-l { transform-box: view-box; transform-origin: 92px 164px; animation: bitty-arm-l 2s ease-in-out infinite; }
.ch-bitty .arm-r { transform-box: view-box; transform-origin: 148px 164px; animation: bitty-arm-r 2s ease-in-out infinite; }
@keyframes bitty-arm-l { 0%,100% { transform: rotate(8deg); } 50% { transform: rotate(-14deg); } }
@keyframes bitty-arm-r { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(14deg); } }
.ch-bitty .scan { animation: bitty-scan 2s linear infinite; }
@keyframes bitty-scan { from { transform: translateY(0); } to { transform: translateY(58px); } }
.ch-bitty .dot { animation: bitty-dot 1.2s ease-in-out infinite; }
.ch-bitty .dot2 { animation-delay: .2s; } .ch-bitty .dot3 { animation-delay: .4s; }
@keyframes bitty-dot { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

.ch-puff .float { transform-box: view-box; transform-origin: 120px 140px; animation: puff-float 4s ease-in-out infinite; }
@keyframes puff-float { 0%,100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-12px) rotate(2.5deg); } }
.ch-puff .squish { transform-box: view-box; transform-origin: 120px 180px; animation: puff-squish 2s ease-in-out infinite; }
@keyframes puff-squish { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.03,.97); } }
.ch-puff .shadow { transform-box: fill-box; transform-origin: center; animation: puff-shadow 4s ease-in-out infinite; }
@keyframes puff-shadow { 0%,100% { transform: scale(1); opacity: .14; } 50% { transform: scale(.82); opacity: .07; } }
.ch-puff .eye { transform-box: fill-box; transform-origin: center; animation: puff-blink 4.6s infinite; }
@keyframes puff-blink { 0%,72%,78%,100% { transform: scaleY(1); } 75% { transform: scaleY(.1); } }
.ch-puff .sparkle { transform-box: fill-box; transform-origin: center; animation: puff-twinkle 2s ease-in-out infinite; }
.ch-puff .s2 { animation-delay: -.5s; } .ch-puff .s3 { animation-delay: -1s; } .ch-puff .s4 { animation-delay: -1.5s; }
@keyframes puff-twinkle { 0%,100% { transform: scale(.15) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.ch-puff[data-mood="sad"] .sparkle { display: none; }
.ch-puff .star { transform-box: fill-box; transform-origin: center; animation: puff-star 2s ease-in-out infinite; }
@keyframes puff-star { 0%,100% { transform: scale(1) rotate(-8deg); } 50% { transform: scale(1.15) rotate(8deg); } }
.ch-puff .star-glow { transform-box: fill-box; transform-origin: center; animation: puff-glow 2s ease-in-out infinite; }
@keyframes puff-glow { 0%,100% { opacity: .15; transform: scale(.8); } 50% { opacity: .6; transform: scale(1.3); } }
.ch-puff .drop { animation: puff-rain .9s linear infinite; }
.ch-puff .d2 { animation-delay: -.3s; } .ch-puff .d3 { animation-delay: -.6s; }
@keyframes puff-rain { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }

.ch-sprout .bounce { transform-box: view-box; transform-origin: 120px 207px; animation: sprout-bounce 2.4s ease-in-out infinite; }
@keyframes sprout-bounce { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.03,.97); } }
.ch-sprout .shadow { transform-box: fill-box; transform-origin: center; opacity: .15; }
.ch-sprout .ear-l { transform-box: view-box; transform-origin: 98px 102px; animation: sprout-twitch 5s ease-in-out infinite; }
@keyframes sprout-twitch { 0%,80%,92%,100% { transform: rotate(0); } 84% { transform: rotate(-12deg); } 88% { transform: rotate(6deg); } }
.ch-sprout .ear-r { transform-box: view-box; transform-origin: 144px 102px; transition: transform .5s ease; }
.ch-sprout[data-mood="sad"] .ear-r { transform: rotate(48deg); }
.ch-sprout[data-mood="sad"] .ear-l { animation: none; transform: rotate(-30deg); transition: transform .5s ease; }
.ch-sprout[data-mood="surprised"] .ear-r { transform: rotate(-30deg); }
.ch-sprout .leaf { transform-box: view-box; transform-origin: 120px 94px; animation: sprout-sway 3s ease-in-out infinite; }
@keyframes sprout-sway { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.ch-sprout .eye { transform-box: fill-box; transform-origin: center; animation: sprout-blink 5.4s infinite; }
@keyframes sprout-blink { 0%,86%,92%,100% { transform: scaleY(1); } 89% { transform: scaleY(.1); } }

.world .sky-night, .world .stars, .world .moon, .world .night-lights { opacity: 0; transition: opacity 1.2s ease; }
.world .sun, .world .night-shade-layer, .world .clouds { transition: opacity 1.2s ease; }
.world.night .clouds { opacity: .28; }
.world .night-shade-layer { opacity: 0; }
.world.night .sky-night, .world.night .stars, .world.night .moon, .world.night .night-lights { opacity: 1; }
.world.night .night-shade-layer { opacity: 1; }
.world.night .sun { opacity: 0; pointer-events: none; }
.world:not(.night) .moon { pointer-events: none; }
.world .night-shade-layer, .world .night-lights { pointer-events: none; }
.world.night .actor { filter: brightness(.86) saturate(.9); }

.world .sun-rays { transform-box: fill-box; transform-origin: center; animation: w-spin 40s linear infinite; }
@keyframes w-spin { to { transform: rotate(360deg); } }
.world .twinkle { transform-box: fill-box; transform-origin: center; animation: w-twinkle 3s ease-in-out infinite; }
@keyframes w-twinkle { 0%,100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
.world .drift { animation: w-drift linear infinite; }
@keyframes w-drift { from { transform: translateX(-420px); } to { transform: translateX(2000px); } }
.world .smoke { transform-box: fill-box; transform-origin: center; animation: w-smoke 4s ease-out infinite; }
@keyframes w-smoke { 0% { transform: translate(0,0) scale(.4); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(26px,-90px) scale(1.4); opacity: 0; } }
.world .firefly { animation: w-firefly 4s ease-in-out infinite; }
@keyframes w-firefly { 0%,100% { transform: translate(0,0); opacity: .2; } 25% { opacity: 1; } 50% { transform: translate(18px,-22px); opacity: .5; } 75% { transform: translate(-12px,-8px); opacity: 1; } }
.world .sway { transform-box: fill-box; transform-origin: center bottom; animation: w-sway 3.5s ease-in-out infinite; }
@keyframes w-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.world .lily { animation: w-bob 3s ease-in-out infinite; }
@keyframes w-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

.world [data-hit] { cursor: pointer; }
.world [data-hit]:focus { outline: none; }
.world [data-hit]:focus-visible { outline: 4px solid #7A5CD6; outline-offset: 6px; }
.world .boing { transform-box: fill-box; transform-origin: center bottom; animation: w-boing .6s ease-out; }
@keyframes w-boing { 0% { transform: scale(1); } 30% { transform: scale(1.15,.85); } 60% { transform: scale(.92,1.12); } 100% { transform: scale(1); } }
.world .shake { transform-box: fill-box; transform-origin: center bottom; animation: w-shake .6s ease-in-out; }
@keyframes w-shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg); } }
.world .flag { transform-box: view-box; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.world .flag.up { transform: rotate(-90deg); }
.world .apple { transform-box: fill-box; transform-origin: center; }
.world .apple.fall { animation: w-fall 1.6s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes w-fall {
  0% { transform: translateY(0); } 45% { transform: translateY(var(--drop)); }
  60% { transform: translateY(calc(var(--drop) - 26px)); } 75% { transform: translateY(var(--drop)); }
  85% { transform: translateY(calc(var(--drop) - 8px)); } 100% { transform: translateY(var(--drop)); }
}
@media (prefers-reduced-motion: reduce) { .world * { animation: none !important; } }