/* Treetop celebrations. Sprites stay in their existing layout; all extra art is in the FX layer. */
#fx-layer{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;contain:strict}
#fx-layer *{pointer-events:none}
.juice-particle{position:absolute;left:0;top:0;width:var(--size,24px);height:var(--size,24px);background:center/contain no-repeat;opacity:0;will-change:transform,opacity}
.juice-star{background-image:url('../assets/ui/ui-reward-star.webp');filter:drop-shadow(0 2px 2px rgba(138,85,44,.22))}
.juice-leaf{background-image:url('../assets/props/webp-transparent/Prop-Universal-Leaf-Pointed.webp')}
.juice-feather{background-image:url('../assets/props/webp-transparent/Prop-OpenSky-Feather-White.webp')}
.juice-spark{border-radius:50%;background:var(--wm-gold);box-shadow:0 0 7px var(--wm-cream-1)}
.juice-ring{position:absolute;left:0;top:0;width:var(--size);height:var(--size);border:3px solid var(--wm-gold);border-radius:50%;background:radial-gradient(circle,rgba(242,193,65,.04) 42%,rgba(242,193,65,.15) 65%,transparent 70%);opacity:0}
.juice-cloud{border-radius:50%;background:radial-gradient(ellipse,rgba(255,248,230,.9),rgba(255,248,230,0) 70%)}
.juice-bloom{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,rgba(255,239,184,.24),transparent 68%);opacity:0}
.game[data-juice-ready] .hero:not(.happy):not(.cross){animation:juice-rubi-idle 5.4s ease-in-out infinite}
.game[data-juice-ready] .guide-button img{transform-origin:50% 90%;animation:juice-ori-idle 6.8s ease-in-out infinite}
.game[data-juice-ready] .hero.happy,.game[data-juice-ready] .hero.cross{animation:none;transition:none}
.game[data-juice-ready] .hero-zone:after{animation:none}
.game[data-juice-ready] .level-dot.current,.game[data-juice-ready] .level-choice.current{animation:none}
.game[data-juice-ready] .board[data-chosen="0"] .bridge-scene:after{display:none}
.game[data-juice-ready] .highfive-art{transform-origin:50% 90%;animation:juice-highfive 3100ms ease-in-out infinite}
.game[data-juice-ready] .level-reward-art{transform-origin:50% 95%;animation:juice-bly-dance 2.4s ease-in-out infinite}
.game[data-juice-ready] .helper:not([hidden]){transform-origin:50% 95%;animation:juice-bodi-rock 3.4s ease-in-out infinite}
.game[data-juice-ready] .reward-star{animation:juice-medal 3.6s ease-in-out infinite}
.game[data-juice-ready] .final-stars img{animation:juice-star-sway 3.2s ease-in-out infinite;animation-delay:calc(var(--star-index,0) * .18s)}
.juice-idle-cta{animation:juice-cta 2.8s ease-in-out infinite!important}
#checkButton.juice-idle-cta{animation-name:juice-check-cta!important}
.game[data-juice-ready] .piece-button.hint{animation:juice-hint 2.4s ease-in-out infinite;outline:3px solid var(--wm-gold);outline-offset:1px}
.game[data-juice-ready] .guide.glow .speech{animation:none}
.game[data-juice-ready][data-state="resolving"] .guide-button img{animation:none}
@keyframes juice-rubi-idle{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}30%{transform:translateY(-6px) rotate(2deg) scale(1.025,.98)}50%{transform:translateY(-3px) rotate(0)}72%{transform:translateY(-9px) rotate(-3deg) scale(.99,1.02)}}
@keyframes juice-ori-idle{0%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-4deg) scale(1.02)}58%{transform:rotate(3deg) translateY(-3px)}78%{transform:rotate(0) scale(1.015,.985)}}
@keyframes juice-highfive{0%,100%{transform:translateY(0) rotate(-1deg)}25%{transform:translateY(-8px) rotate(2deg) scale(1.02)}55%{transform:translateY(-2px) rotate(-2deg)}75%{transform:translateY(-7px) rotate(1deg)}}
@keyframes juice-bly-dance{0%,100%{transform:rotate(-5deg) translateY(0)}25%{transform:rotate(6deg) translateY(-9px) scale(.96,1.04)}50%{transform:rotate(-5deg) scale(1.04,.96)}75%{transform:rotate(5deg) translateY(-6px)}}
@keyframes juice-bodi-rock{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-3px)}}
@keyframes juice-medal{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-7px) rotate(5deg)}}
@keyframes juice-star-sway{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes juice-cta{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes juice-check-cta{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.045)}}
@keyframes juice-hint{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.game[data-juice-ready] *{animation:none!important;transition:none!important}#fx-layer{display:none}}
.game[data-juice-reduced="true"] *{animation:none!important;transition:none!important}
.game[data-juice-reduced="true"] ~ #fx-layer{display:none}
/* Four earned stars belong to the child. Feathers mark the five levels. */
.round-track{gap:7px;padding:4px 10px}
.round-dot,.round-dot.complete{width:30px;height:30px;border:0;border-radius:0;box-shadow:none;background:transparent center/contain no-repeat url('../assets/ui/ui-reward-star.webp')}
.round-dot{filter:grayscale(1);opacity:.35}
.round-dot.complete{filter:drop-shadow(0 0 4px var(--wm-gold));opacity:1}
.level-dot,.level-dot.current,.level-dot.complete,.level-choice,.level-choice.current,.level-choice.complete{border:0;border-radius:0;background:transparent center/contain no-repeat url('../assets/props/webp-transparent/Prop-OpenSky-Feather-White.webp');box-shadow:none;color:var(--wm-ink);text-shadow:0 1px 2px var(--wm-cream-1),1px 0 2px var(--wm-cream-1);font-weight:900}
.level-dot:before,.level-dot:after,.level-choice:before,.level-choice:after{display:none}
.level-dot.complete,.level-choice.complete{background-image:url('../assets/props/webp-transparent/Prop-OpenSky-Feather-Yellow.webp');color:var(--wm-ink);filter:drop-shadow(0 0 3px var(--wm-gold))}
.level-dot.current,.level-choice.current{filter:drop-shadow(0 0 5px var(--wm-gold));transform:scale(1.12) rotate(-5deg)}
.level-dot,.level-dot.current,.level-dot.complete,.level-choice,.level-choice.current,.level-choice.complete{background-size:180% 100%}
.level-track:before,.menu-levels:before{opacity:1}
@media(orientation:portrait),(max-width:700px){.round-dot,.round-dot.complete{width:25px;height:25px}.round-track{gap:6px;padding:3px 9px}}
@media(max-width:380px) and (max-height:700px){.round-dot,.round-dot.complete{width:24px;height:24px}.round-track{gap:5px}}