#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 220; overflow: hidden; }
#fx-layer canvas { width: 100%; height: 100%; display: block; }
.juice-friends { position: absolute; inset: 0; pointer-events: none; z-index: 19; }
.juice-friend { position: absolute; object-fit: contain; width: clamp(60px, 10vw, 125px); height: clamp(60px, 10vw, 125px); bottom: 3%; right: 5%; transform-origin: 50% 90%; filter: drop-shadow(0 6px 4px #51382055); }
.juice-friend.dovi { right: auto; left: 8%; bottom: 19%; width: 64px; height: 64px; }
.game:is([data-state="intro"], [data-state="menu"], [data-state="level-complete"], [data-state="game-complete"]) .juice-friends { visibility: hidden; }
.animal-token, .ori, .pim-marker, .highfive, .final-highfive { transform-origin: 50% 88%; }
/* Small in-place movements keep all animals in their original counting slots. */
.game[data-state="playing"] .animal-token { animation: animal-listen 8s ease-in-out infinite; animation-delay: var(--animal-delay, 0s); }
.animal-token[src*="Hare"] { animation-name: animal-hop !important; }
.animal-token[src*="Ant"] { animation-name: animal-march !important; }
.game[data-state="playing"] .pim-marker { animation: juno-curious 7s ease-in-out infinite; }
.game[data-state="playing"] .ori { animation: ori-listen 9s ease-in-out infinite; }
.game[data-state="playing"] .juice-friend { animation: friend-hop 12s ease-in-out infinite; }
.game[data-state="playing"] .juice-friend.dovi { animation: friend-wander 12s ease-in-out infinite; animation-delay: -6s; }
.game[data-state="level-complete"] .highfive, .game[data-state="game-complete"] .final-highfive { animation: friends-cheer 3.8s ease-in-out infinite; }
.game[data-state="level-complete"] .reward-star { animation: star-sway 4.5s ease-in-out infinite; }
.check-button.juice-idle:not(:disabled) { animation: juice-cta 2.8s ease-in-out infinite; }
.progress-dot.done:last-child { animation: progress-arrive 650ms ease-out; }
.lily.hint { animation-duration: 1.5s; }
@keyframes animal-listen { 0%, 12%, 100% { transform: none; } 4% { transform: rotate(-5deg) translateY(-2px); } 8% { transform: rotate(4deg); } }
@keyframes animal-hop { 0%, 14%, 100% { transform: none; } 4% { transform: scale(1.04,.96); } 8% { transform: translateY(-5px) rotate(-3deg); } 11% { transform: scale(1.04,.96); } }
@keyframes animal-march { 0%, 14%, 100% { transform: none; } 4% { transform: translateX(-2px) rotate(-4deg); } 9% { transform: translateX(2px) rotate(4deg); } }
@keyframes juno-curious { 0%, 35%, 100% { transform: none; } 12% { transform: translateY(-5px) rotate(-3deg); } 23% { transform: rotate(2deg) scale(1.02,.98); } }
@keyframes ori-listen { 0%, 45%, 100% { transform: none; } 18% { transform: rotate(-4deg) translateY(-3px); } 30% { transform: rotate(2deg); } }
@keyframes friend-hop { 0%, 20%, 100% { transform: none; } 5% { transform: scale(1.07,.94); } 10% { transform: translateY(-12px) rotate(-4deg); } 15% { transform: translateY(-4px) rotate(3deg); } }
@keyframes friend-wander { 0%, 25%, 100% { transform: none; } 8% { transform: translateX(7px) rotate(5deg); } 17% { transform: translateX(3px) rotate(-4deg); } }
@keyframes friends-cheer { 0%, 65%, 100% { transform: none; } 18% { transform: translateY(-9px) rotate(-2deg); } 38% { transform: translateY(-4px) rotate(2deg); } }
@keyframes star-sway { 0%, 100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.07); } }
@keyframes juice-cta { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.045); } }
@keyframes progress-arrive { 0% { transform: scale(.8); } 45% { transform: scale(1.2); } 100% { transform: none; } }
@media (max-width: 760px), (orientation: portrait) {
  .juice-friend { width: 68px; height: 68px; right: 3%; bottom: 1%; }
  .juice-friend.dovi { display: none; }
  .game:has(.tutorial-skip:not([hidden])) .juice-friends { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  #fx-layer { display: none; }
  .game .animal-token, .game .pim-marker, .game .ori, .game .juice-friend, .game .highfive, .game .final-highfive, .game .reward-star, .game .check-button { animation: none !important; }
}