:root{
  --juice-gold:#f2c141;
  --juice-lavender:#b9a1cf;
  --juice-silver:#eef6f8;
  --juice-cream:#fff8e6;
  --juice-spring:cubic-bezier(.22,.9,.3,1.2);
}

#fx-layer{
  position:fixed;
  inset:0;
  z-index:110;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint style;
}

.fx-ambient,.fx-celebration{position:absolute;inset:0;pointer-events:none}
.fx-ambient{z-index:0;opacity:0;transition:opacity .6s ease}
.fx-ambient.is-active{opacity:1}
.fx-celebration{z-index:2}

.sky-feather{
  position:absolute;
  width:17px;
  height:7px;
  border-radius:90% 12% 90% 12%;
  background:linear-gradient(135deg,rgba(255,248,230,.25),rgba(238,246,248,.82));
  box-shadow:0 0 10px rgba(255,248,230,.32);
  opacity:.42;
  transform:rotate(var(--tilt));
  animation:sky-feather-drift var(--drift) ease-in-out infinite alternate;
}
.sky-feather:nth-child(1){left:3%;top:19%;--drift:15s;--tilt:18deg;--dx:32px;--dy:76px}
.sky-feather:nth-child(2){right:4%;top:45%;--drift:18s;--tilt:-26deg;--dx:-28px;--dy:88px;animation-delay:-7s}
.sky-feather:nth-child(3){left:7%;bottom:14%;--drift:13s;--tilt:42deg;--dx:39px;--dy:-58px;animation-delay:-4s}
@keyframes sky-feather-drift{
  to{transform:translate3d(var(--dx),var(--dy),0) rotate(calc(var(--tilt) + 150deg));opacity:.2}
}

.fx-particle,.fx-confetti,.fx-heart,.fx-star-flight,.fx-cloud-puff,.fx-thought-dot,.fx-firework-ring,.fx-bloom,.fx-delight{
  position:fixed;
  display:block;
  pointer-events:none;
  will-change:transform,opacity;
}
.fx-particle{width:10px;height:10px;border-radius:50%;box-shadow:0 0 8px currentColor}
.fx-particle.feather{width:14px;height:6px;border-radius:90% 12% 90% 12%;box-shadow:0 0 6px currentColor}
.fx-confetti{width:9px;height:15px;border-radius:5px 1px 5px 1px;box-shadow:0 2px 6px rgba(61,50,38,.12)}
.fx-confetti.round{width:10px;height:10px;border-radius:50%}
.fx-heart{
  width:29px;
  height:27px;
  color:var(--juice-gold);
  overflow:visible;
  filter:drop-shadow(0 4px 4px rgba(91,54,41,.28)) drop-shadow(0 0 9px rgba(255,244,177,.72));
}
.fx-heart path{fill:currentColor}
.fx-round-star{width:48px;height:48px;color:var(--juice-gold);filter:drop-shadow(0 4px 5px rgba(91,54,41,.3)) drop-shadow(0 0 13px rgba(255,225,92,.92))}
.round-dot.juice-star-land{animation:juice-star-land .38s var(--juice-spring)}
@keyframes juice-star-land{0%{transform:scale(.68)}65%{transform:scale(1.34)}100%{transform:scale(1)}}
.fx-star-flight{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,215,72,.88))}

.fx-cloud-puff{
  width:54px;
  height:25px;
  border-radius:999px;
  background:rgba(255,248,230,.88);
  box-shadow:-17px 5px 0 -3px rgba(255,248,230,.78),17px 4px 0 -5px rgba(238,246,248,.85),0 5px 12px rgba(99,74,63,.12);
}
.fx-thought-dot{width:9px;height:9px;border-radius:50%;background:#f2c141;box-shadow:0 0 7px rgba(242,193,65,.72)}
.fx-firework-ring{width:18px;height:18px;border:2px solid rgba(255,235,142,.75);border-radius:50%}
.fx-bloom{inset:0;background:radial-gradient(circle at 50% 46%,rgba(255,247,194,.28),rgba(242,193,65,.08) 36%,transparent 68%);opacity:0}
.fx-delight{width:92px;height:5px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,248,230,.9),rgba(185,161,207,.55),transparent);filter:drop-shadow(0 0 7px rgba(255,248,230,.6))}

.juice-awaiting{opacity:0!important}
.juice-revealed,.final-stars img.juice-revealed,.reward-star.juice-revealed{animation:juice-reveal .42s var(--juice-spring) both}
@keyframes juice-reveal{0%{opacity:0;transform:scale(.4) rotate(-12deg)}75%{opacity:1;transform:scale(1.15) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

.juice-gold-flash{animation:juice-gold-flash 1.2s ease-in-out both}
@keyframes juice-gold-flash{
  50%{transform:translate(-50%,-50%) scale(1.12)}
}

.hero.juice-beat-sway{animation:juice-beat-sway 1.1s var(--juice-spring)}
.hero.juice-beat-think{animation:juice-beat-think 1s ease-in-out}
.hero.juice-beat-cloud{animation:juice-beat-cloud 1.35s var(--juice-spring)}
.hero.juice-beat-fan{animation:juice-beat-fan 1.1s ease-in-out}
@keyframes juice-beat-sway{
  25%{transform:translate(-50%,-50%) rotate(-9deg)}
  55%{transform:translate(-50%,-50%) rotate(8deg)}
  80%{transform:translate(-50%,-50%) rotate(-3deg)}
}
@keyframes juice-beat-think{
  45%{transform:translate(-50%,-50%) rotate(-7deg) scale(.97)}
  75%{transform:translate(-50%,-50%) rotate(3deg)}
}
@keyframes juice-beat-cloud{
  35%{transform:translate(-50%,-60%) rotate(-4deg)}
  70%{transform:translate(-50%,-47%) rotate(4deg)}
}
@keyframes juice-beat-fan{
  25%{transform:translate(-50%,-50%) rotate(-6deg) scaleX(.94)}
  50%{transform:translate(-50%,-50%) rotate(7deg) scaleX(1.04)}
  75%{transform:translate(-50%,-50%) rotate(-3deg)}
}

.hero.juice-idle{animation:juice-idle 2s ease-in-out infinite}
@keyframes juice-idle{50%{transform:translate(-50%,-50%) scale(1.045);filter:drop-shadow(0 0 13px rgba(242,193,65,.66))}}
.hero.juice-hint-target{animation:juice-hint 1.25s ease-in-out infinite alternate}
@keyframes juice-hint{to{filter:drop-shadow(0 0 19px rgba(242,193,65,.94));transform:translate(-50%,-50%) scale(1.08)}}

.panel.juice-spotlight{animation:juice-panel-arrive .7s var(--juice-spring) both}
@keyframes juice-panel-arrive{
  0%{opacity:.15;transform:translateY(18px) scale(.94)}
  70%{opacity:1;transform:translateY(-3px) scale(1.018)}
  100%{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  #fx-layer{display:none}
  .juice-awaiting{opacity:1!important}
  .juice-revealed,.juice-gold-flash,.round-dot.juice-star-land,.hero.juice-beat-sway,.hero.juice-beat-think,.hero.juice-beat-cloud,.hero.juice-beat-fan,.hero.juice-idle,.hero.juice-hint-target,.panel.juice-spotlight{animation:none!important}
}

/* Maximum celebration: gold stars use the existing UI reward art. */
.fx-spark-star{position:fixed;display:block;object-fit:contain;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 2px 2px #8a552c55)}
.fx-celebration{isolation:isolate}
/* Animate the supplied animal sprites, preserving their route anchor. */
.game[data-state="playing"] .hero:not([class*="juice-beat"]):not(.juice-hint-target),
.game[data-state="demo"] .hero{animation:aro-hover 3.2s ease-in-out infinite;transform-origin:50% 65%}
.game[data-state="resolving"] .hero{animation:aro-flight-wiggle .85s ease-in-out infinite;transform-origin:50% 60%}
.game[data-state="playing"] .goal-ori,.game[data-state="demo"] .goal-ori{animation:ori-welcome 4.4s ease-in-out infinite;transform-origin:50% 75%}
.game[data-state="playing"] .guide-button img,.game[data-state="demo"] .guide-button img{animation:ori-guide-nod 5.2s ease-in-out infinite;transform-origin:50% 85%}
.game[data-state="playing"] .helper:not([hidden]){animation:bodi-comfort 3.6s ease-in-out infinite;transform-origin:50% 90%}
.game[data-state="level-complete"] .bly{animation:bly-dance 1.8s ease-in-out infinite;transform-origin:50% 90%}
.game[data-state="level-complete"] .highfive-art,.game[data-state="game-complete"] .highfive-art{animation:friends-celebrate 3s ease-in-out infinite;transform-origin:50% 80%}
.game[data-state="level-complete"] .reward-star,.game[data-state="game-complete"] .final-stars img{animation:reward-float 3.4s ease-in-out infinite}
.final-stars img:nth-child(2n){animation-delay:-1.5s!important}
.check-button.juice-idle:not(:disabled){animation:check-pulse-centred 2s ease-in-out infinite alternate}
@keyframes aro-hover{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}35%{transform:translate(-50%,calc(-50% - 5px)) rotate(3deg) scale(1.025,.985)}70%{transform:translate(-50%,calc(-50% + 2px)) rotate(-3deg)}}
@keyframes aro-flight-wiggle{0%,100%{transform:translate(-50%,-50%) rotate(-5deg) scale(.97,1.03)}50%{transform:translate(-50%,-50%) rotate(5deg) scale(1.05,.96)}}
@keyframes ori-welcome{0%,100%{transform:translate(-50%,-50%)}35%{transform:translate(-50%,calc(-50% - 4px)) rotate(-4deg)}65%{transform:translate(-50%,-50%) rotate(3deg)}}
@keyframes ori-guide-nod{0%,65%,100%{transform:rotate(0)}75%{transform:rotate(-5deg) translateY(2px)}86%{transform:rotate(4deg) translateY(-2px)}}
@keyframes bodi-comfort{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg) translateY(-3px)}}
@keyframes bly-dance{0%,100%{transform:translateY(0) rotate(-3deg)}25%{transform:translateY(-12px) rotate(6deg)}50%{transform:translateY(0) rotate(3deg) scale(1.04,.97)}75%{transform:translateY(-7px) rotate(-6deg)}}
@keyframes friends-celebrate{0%,100%{transform:translateY(0) rotate(-1deg)}40%{transform:translateY(-5px) rotate(1.5deg) scale(1.015)}70%{transform:translateY(0) rotate(-1deg)}}
@keyframes reward-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(4deg)}}
.game[data-state="paused"] #fx-layer,.game[data-state="menu"] #fx-layer{visibility:hidden}
@media(prefers-reduced-motion:reduce){.game *,.game *::before,.game *::after{animation:none!important;transition:none!important}}