#fx-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

#fx-layer[aria-hidden="true"] * { pointer-events: none; }
#fx-layer.juice-celebration-front { z-index: 110; }

.flower-target::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.flower-target.juice-gold-hit .petals {
  animation: juiceGoldHit .46s ease-out both;
}

.flower-target.juice-gag {
  animation: juiceFlowerGag 1.35s cubic-bezier(.22,.9,.3,1.12) both;
}

.flower-target.juice-gag::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 5px solid rgba(230,165,91,.72);
  border-radius: 50%;
  animation: juiceOopsHalo 1.25s ease-out both;
}

.flower-field:has(.flower-target.hint) .flower-target:not(.hint) {
  opacity: .58;
  filter: saturate(.68) drop-shadow(0 8px 6px rgba(78,48,20,.2));
}

.flower-target.hint::before {
  inset: -12px;
  border: 5px solid rgba(242,193,65,.82);
  box-shadow: 0 0 0 8px rgba(255,244,190,.24), 0 0 24px rgba(242,193,65,.54);
  animation: juiceHintRing 1.35s ease-in-out infinite;
}

.pollen-ball.juice-idle-breathe,
.check-button.juice-idle-breathe {
  animation: juiceIdleBreathe 2s ease-in-out infinite;
}

.hero-character.juice-beat-ma-53 { animation: juiceWingFan 2.1s ease-in-out both; }
.hero-character.juice-beat-ma-19 { animation: juiceLookAround 2.1s ease-in-out both; }
.hero-character.juice-beat-ma-56 { animation: juiceUpsideLook 2.1s ease-in-out both; }
.hero-character.juice-beat-ma-43 { animation: juiceMeadowSneeze 2.1s ease-in-out both; }

.fx-particle,
.fx-soft-ring,
.fx-ambient,
.fx-delight,
.fx-spotlight,
.fx-bloom {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.fx-particle {
  left: 0;
  top: 0;
  width: var(--size, 10px);
  height: calc(var(--size, 10px) * .72);
  border-radius: 65% 25% 65% 30%;
  background: var(--tone, #f2c141);
  border: 1px solid rgba(96,68,33,.24);
  box-shadow: 0 0 11px color-mix(in srgb, var(--tone, #f2c141), transparent 18%), inset 0 1px 0 rgba(255,255,255,.42);
  transform: translate3d(var(--x),var(--y),0) rotate(var(--turn,0deg));
  animation: juiceParticleOut var(--life,700ms) cubic-bezier(.18,.7,.25,1) forwards;
}

.fx-soft-ring {
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: 5px solid #efb54f;
  border-radius: 50%;
  transform: translate3d(calc(var(--x) - 12px),calc(var(--y) - 12px),0) scale(.45);
  animation: juiceSoftRing 1.1s ease-out forwards;
}

.fx-ambient {
  left: 0;
  top: 0;
  width: var(--size, 13px);
  height: calc(var(--size, 13px) * .62);
  border-radius: 70% 20% 70% 25%;
  background: var(--tone, rgba(255,242,202,.7));
  opacity: .5;
  transform: translate3d(var(--start-x),var(--start-y),0) rotate(0deg);
  animation: juiceAmbientDrift var(--drift,16s) linear infinite;
  animation-delay: var(--delay,0s);
}

.fx-ambient.is-fluff {
  width: var(--size, 13px);
  height: var(--size, 13px);
  border: 2px solid rgba(255,250,224,.78);
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,250,224,.9) 0 14%,transparent 16%);
  box-shadow: 5px 0 0 -3px rgba(255,250,224,.8),-5px 0 0 -3px rgba(255,250,224,.8),0 5px 0 -3px rgba(255,250,224,.8);
}

.fx-delight {
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255,250,224,.72);
  border-radius: 50%;
  background: radial-gradient(circle,#fff9df 0 9%,transparent 11%);
  box-shadow: 9px 0 0 -6px #fff9df,-9px 0 0 -6px #fff9df,0 9px 0 -6px #fff9df,0 -9px 0 -6px #fff9df;
  transform: translate3d(-40px,var(--y),0) rotate(0deg);
  animation: juiceDelight 3.8s ease-in-out forwards;
}

.fx-spotlight {
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,transparent 0 38%,rgba(61,50,38,.08) 58%,rgba(61,50,38,.2) 100%);
  opacity: 0;
  animation: juiceSpotlight var(--spot-life,2800ms) ease-in-out forwards;
}

.fx-bloom {
  inset: 0;
  background: radial-gradient(circle at 50% 48%,rgba(255,246,190,.27),rgba(242,193,65,.08) 42%,transparent 68%);
  opacity: 0;
  animation: juiceSceneBloom 1.45s ease-in-out forwards;
}

.game-shell.juice-paused #fx-layer .fx-ambient,
.game-shell.juice-paused #fx-layer .fx-delight {
  animation-play-state: paused;
}

.game-shell:not(.juice-world-active) #fx-layer .fx-ambient { display: none; }

.game-shell.juice-reduced #fx-layer .fx-particle,
.game-shell.juice-reduced #fx-layer .fx-soft-ring,
.game-shell.juice-reduced #fx-layer .fx-ambient,
.game-shell.juice-reduced #fx-layer .fx-delight,
.game-shell.juice-reduced #fx-layer .fx-bloom { display: none !important; }
.game-shell.juice-reduced .flight-ball { transition: opacity .2s linear !important; }
.game-shell.juice-reduced .sparkle { display: none !important; }
.game-shell.juice-reduced .flower-target.juice-gold-hit .petals,
.game-shell.juice-reduced .flower-target.juice-gag,
.game-shell.juice-reduced .hero-character[class*="juice-beat"],
.game-shell.juice-reduced .pollen-ball.juice-idle-breathe,
.game-shell.juice-reduced .check-button.juice-idle-breathe { animation: none !important; }

@keyframes juiceGoldHit {
  0%,100% { filter: saturate(.9) contrast(1.04) brightness(1); }
  35% { filter: saturate(1.18) contrast(1.04) brightness(1.48) drop-shadow(0 0 13px #f2c141); transform: scale(1.055); }
}

@keyframes juiceFlowerGag {
  0%,100% { transform: translateX(0) rotate(0deg) scale(1); }
  22% { transform: translateX(-7px) rotate(-5deg) scale(.97); }
  45% { transform: translateX(7px) rotate(5deg) scale(1.03); }
  68% { transform: translateX(-3px) rotate(-2deg) scale(.99); }
}

@keyframes juiceOopsHalo {
  0% { opacity: 0; transform: scale(.86); }
  35% { opacity: .82; }
  100% { opacity: 0; transform: scale(1.16); }
}

@keyframes juiceHintRing {
  0%,100% { opacity: .62; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes juiceIdleBreathe {
  0%,100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.04); }
}

.check-button.juice-idle-breathe { animation-name: juiceCheckBreathe; }
@keyframes juiceCheckBreathe {
  0%,100% { transform: scale(1); box-shadow: 0 7px 0 #2c6b31,0 13px 20px rgba(43,84,29,.28),inset 0 4px 3px rgba(255,255,255,.38); }
  50% { transform: scale(1.04); box-shadow: 0 7px 0 #2c6b31,0 0 0 7px rgba(242,193,65,.2),0 13px 25px rgba(124,92,29,.32),inset 0 4px 3px rgba(255,255,255,.38); }
}

@keyframes juiceWingFan {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  24% { transform: translateY(-4px) rotate(-7deg) scale(1.04, .98); }
  48% { transform: translateY(1px) rotate(7deg) scale(.98,1.04); }
  72% { transform: translateY(-2px) rotate(-4deg) scale(1.02); }
}

@keyframes juiceLookAround {
  0%,100% { transform: translateX(0) rotate(0deg); }
  28% { transform: translateX(-8px) rotate(-5deg); }
  58% { transform: translateX(8px) rotate(5deg); }
}

@keyframes juiceUpsideLook {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  38% { transform: translateY(-6px) rotate(18deg) scale(1.03); }
  70% { transform: translateY(-2px) rotate(-7deg) scale(.99); }
}

@keyframes juiceMeadowSneeze {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  34% { transform: translateY(3px) rotate(-4deg) scale(.96,1.05); }
  52% { transform: translateY(-8px) rotate(8deg) scale(1.08,.92); }
  76% { transform: translateY(0) rotate(-3deg) scale(.99,1.02); }
}

@keyframes juiceParticleOut {
  0% { opacity: .96; }
  72% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy)),0) rotate(calc(var(--turn,0deg) + 150deg)) scale(.35); }
}

@keyframes juiceSoftRing {
  0% { opacity: .78; }
  100% { opacity: 0; transform: translate3d(calc(var(--x) - 12px),calc(var(--y) - 12px),0) scale(3.3); }
}

@keyframes juiceAmbientDrift {
  0% { opacity: 0; transform: translate3d(var(--start-x),var(--start-y),0) rotate(0deg); }
  12%,82% { opacity: .46; }
  100% { opacity: 0; transform: translate3d(var(--end-x),var(--end-y),0) rotate(220deg); }
}

@keyframes juiceDelight {
  0% { opacity: 0; transform: translate3d(-40px,var(--y),0) rotate(0deg) scale(.75); }
  18%,76% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(110px,calc(var(--y) - 86px),0) rotate(260deg) scale(1.05); }
}

@keyframes juiceSpotlight {
  0%,100% { opacity: 0; }
  18%,78% { opacity: 1; }
}

@keyframes juiceSceneBloom {
  0%,100% { opacity: 0; }
  48% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #fx-layer .fx-particle,
  #fx-layer .fx-soft-ring,
  #fx-layer .fx-ambient,
  #fx-layer .fx-delight,
  #fx-layer .fx-bloom { display: none !important; }
  .flower-target.juice-gold-hit .petals,
  .flower-target.juice-gag,
  .hero-character[class*="juice-beat"],
  .pollen-ball.juice-idle-breathe,
  .check-button.juice-idle-breathe { animation: none !important; }
  .fx-spotlight { animation-duration: 1.2s; }
}
