#fx-layer { position: fixed; inset: 0; z-index: 85; overflow: hidden; pointer-events: none; contain: strict; }
#fx-layer canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.juice-awaiting { opacity: .2 !important; }
.juice-ready { animation: juice-ready 2.4s ease-in-out infinite; }
.juice-last-slot { animation: juice-slot 3s ease-in-out infinite; }
@keyframes juice-ready { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes juice-slot { 0%,100% { opacity: .5; } 50% { opacity: .95; } }
/* One orchestrated response takes the place of the previous board wobble/glow. */
.juice-enabled .feedback-good, .juice-enabled .feedback-wrong { animation: none; }
.juice-enabled .level-dot { transition-property: transform; }
.juice-enabled .guide-button.speaking { animation: juice-talk 2100ms ease-in-out infinite; }
@keyframes juice-talk { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.juice-enabled .duckling img { transform-origin: 50% 88%; }
.juice-enabled .answer-card { transform-origin: center; }
.juice-enabled .reward-art { transform-origin: 50% 85%; }
.juice-enabled #final-overlay .panel::before { animation: shimmer 4s ease-in-out infinite alternate; }
.juice-enabled .answer-card.hint-target, .juice-enabled .duckling.hint-target { animation-duration: 2s; }
body[data-phase="paused"] .juice-ready, body[data-phase="paused"] .juice-last-slot { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  #fx-layer { display: none; }
  .juice-ready, .juice-last-slot, .juice-enabled .guide-button.speaking { animation: none !important; }
  .juice-awaiting { opacity: 1 !important; }
}