#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:290;overflow:hidden;contain:strict}
#fx-layer *{pointer-events:none}
.fx-item{position:absolute;left:0;top:0;will-change:transform,opacity}
.fx-star{width:156px;height:156px;background:center/contain no-repeat url('../assets/ui/ui-reward-star.webp');filter:drop-shadow(0 0 20px #f2c141aa)}
.fx-star::after{content:'';position:absolute;inset:18%;border-radius:50%;background:radial-gradient(#fff8e644,transparent 70%);pointer-events:none}
.fx-spark{width:12px;height:12px;background:var(--wm-gold);clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%)}
.fx-ring.water{border-color:#c8ded3;box-shadow:0 0 8px #c8ded344}
.fx-mote{width:10px;height:10px;border-radius:60% 40% 65% 35%;background:var(--wm-gold);box-shadow:inset 1px 1px 0 #fff8e6}
.fx-mote.water{background:#a6c9c1;border:1px solid #fff8e6;border-radius:50%}
.fx-ring{width:100px;height:100px;border:3px solid var(--wm-gold);border-radius:50%;box-shadow:0 0 14px #f2c14155,inset 0 0 14px #f2c14133}
.fx-bubble{width:40px;height:40px;border:2px solid #c8ded3;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff8e699,transparent 42%);box-shadow:inset -3px -4px 7px #6f999344}
.fx-thought{width:7px;height:7px;border-radius:50%;background:var(--wm-cream-1);box-shadow:0 1px 2px var(--wm-wood-2)}
.fx-bloom{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#f2c14166,transparent 64%);opacity:0}
.fx-trail{width:10px;height:10px;border-radius:50%;background:var(--wm-gold);box-shadow:0 0 8px #f2c141aa}
.fx-dragonfly{width:28px;height:6px;border-radius:50%;background:var(--world-water-dark)}
.fx-dragonfly::before,.fx-dragonfly::after{content:'';position:absolute;left:8px;top:-9px;width:15px;height:24px;border-radius:80% 15%;background:#c8ded399;transform:rotate(32deg)}
.fx-dragonfly::after{transform:rotate(-32deg)}
.round-progress{gap:4px;padding:4px 6px}
.progress-seed{width:34px;height:34px;border:0;border-radius:0;background:center/140% no-repeat url('../assets/ui/ui-reward-star-empty.webp');box-shadow:none;filter:brightness(.68) drop-shadow(0 1px 0 #fff8e6)}
.progress-seed::after{content:none}
.progress-seed.done{background:center/140% no-repeat url('../assets/ui/ui-reward-star.webp');box-shadow:none;filter:drop-shadow(0 0 4px #f2c14199)}
.progress-seed.star-arrived{animation:star-arrival .4s cubic-bezier(.22,.9,.3,1.2)}
.progress-seed.last-slot:not(.done){animation:last-star-breathe 2.6s ease-in-out infinite}
.shape-heart{visibility:hidden}
.juice-idle{animation:juice-breathe 2.4s ease-in-out infinite!important}
.hero.juice-oops{animation:juice-oops 1.2s ease-in-out!important}
.hero.juice-wave{animation:juice-wave 1.5s ease-in-out!important}
.hero.juice-think{animation:juice-think 1s ease-in-out!important}
.hero.juice-happy{transform-origin:50% 92%;animation:juice-happy 1.2s ease-in-out!important}
.edge-slot.juice-settle img{animation:stick-settle .38s cubic-bezier(.22,.9,.3,1.2)}
.stick-token.held{animation:stick-lift .28s cubic-bezier(.22,.9,.3,1.2)}
.edge-slot.retry-nudge{animation:gentle-nudge .32s ease-in-out 2}
.edge-slot.counting img{animation:count-beam .7s ease-out;opacity:1}
.game[data-state='level-complete'] .reward-art img,.game[data-state='game-complete'] .reward-art img{animation:high-five-arrive 1s cubic-bezier(.22,.9,.3,1.15)}
.game[data-state='level-complete'] .badge,.game[data-state='game-complete'] .badge{animation:medal-arrive 1.1s cubic-bezier(.22,.9,.3,1.15)}
/* Only the guide and one quiet water layer move at rest. */
.level-boat img,.stick-token:not(.held):not(.used),.supply,.hero{animation:none}
.ambient-water i:nth-child(n+2){display:none}
.game::after{animation:none;opacity:.3}
.game[data-state='paused'] ~ #fx-layer{visibility:hidden}
@keyframes star-arrival{0%{transform:scale(.65)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes last-star-breathe{50%{transform:scale(1.06)}}
@keyframes juice-breathe{50%{scale:1.04}}
@keyframes juice-oops{25%{transform:translateY(-5px) rotate(-5deg)}60%{transform:rotate(4deg)}100%{transform:none}}
@keyframes juice-wave{25%{transform:translateY(-7px) rotate(3deg)}65%{transform:translateY(2px) rotate(-2deg)}100%{transform:none}}
@keyframes juice-think{35%{transform:rotate(-5deg)}75%{transform:rotate(3deg)}100%{transform:none}}
@keyframes juice-happy{0%,100%{transform:none}22%{transform:translateY(-12px) rotate(-5deg) scale(1.05)}46%{transform:translateY(0) scale(1.03,.96)}70%{transform:translateY(-6px) rotate(4deg)}}
@keyframes stick-settle{0%{transform:translateY(-9px) scale(1.12)}65%{transform:translateY(2px) scale(.97)}100%{transform:none}}
@keyframes stick-lift{0%{scale:1}65%{scale:1.18}100%{scale:1.1}}
@keyframes count-beam{50%{transform:scale(1.07)}}
@keyframes high-five-arrive{0%{transform:translateY(18px) scale(.82);opacity:0}60%{transform:translateY(-5px) scale(1.04);opacity:1}100%{transform:none;opacity:1}}
@keyframes medal-arrive{0%{transform:scale(.6) rotate(-12deg);opacity:0}70%{transform:scale(1.08) rotate(4deg);opacity:1}100%{transform:none;opacity:1}}
.highfive-stage{position:relative;height:100%;aspect-ratio:1.5;max-width:100%;isolation:isolate}
#menu .panel h1{margin-top:0}
#menu .menu-highfive{height:180px;min-height:0;margin-bottom:8px}
/* The menu greeting runs while gameplay remains paused. */
.game[data-state='paused'] #menu .highfive-stage *{animation-play-state:running!important}
@media(orientation:portrait){#menu .panel{padding:44px 24px 24px}#menu .menu-highfive{height:clamp(100px,17dvh,180px)}#menu .level-buttons{flex-wrap:nowrap;gap:8px;width:100%;justify-content:center}#menu .level-button{width:48px;min-width:48px;height:56px}}
@media(orientation:landscape) and (max-height:500px){#menu .menu-highfive{height:80px}}
:is(#reward,#menu) .highfive-stage img{filter:none;max-height:100%;object-fit:fill}
:is(#reward,#menu) .highfive-stage .highfive-left{clip-path:polygon(0 0,50% 0,52% 23%,49% 35%,49% 100%,0 100%);transform-origin:26% 92%;animation:highfive-left 1.8s .15s both cubic-bezier(.22,.8,.3,1)}
:is(#reward,#menu) .highfive-stage .highfive-right{clip-path:polygon(50% 0,100% 0,100% 100%,49% 100%,49% 35%,52% 23%);transform-origin:76% 92%;animation:highfive-right 1.8s .15s both cubic-bezier(.22,.8,.3,1)}
.highfive-contact{position:absolute;left:50%;top:16%;width:44px;height:44px;margin:-22px;border:3px solid var(--wm-gold);border-radius:50%;box-shadow:0 0 16px #f2c14177;opacity:0;animation:highfive-contact 1.8s .15s both ease-out}
@keyframes highfive-left{0%,12%{transform:translateX(-14px) rotate(-6deg)}52%{transform:none}64%{transform:translateY(-3px) rotate(-1deg)}82%,100%{transform:none}}
@keyframes highfive-right{0%,12%{transform:translateX(14px) rotate(6deg)}52%{transform:none}64%{transform:translateY(-3px) rotate(1deg)}82%,100%{transform:none}}
@keyframes highfive-contact{0%,40%{opacity:0;transform:scale(.3)}74%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
@media(orientation:portrait){#reward .reward-art{height:clamp(150px,27dvh,250px)}}
@media(orientation:landscape) and (min-height:501px){#reward .reward-art{height:230px}}
@media(orientation:portrait){.progress-seed{width:26px;height:26px}.round-progress{gap:2px;padding:4px}}
@media(orientation:landscape) and (max-height:500px){.progress-seed{width:25px;height:25px}.round-progress{gap:2px;padding:4px}}
@media(prefers-reduced-motion:reduce){.game *,.game *::before,.game *::after{animation:none!important;transition:none!important}#fx-layer{display:none}}
html[data-motion='reduce'] .game *,html[data-motion='reduce'] .game *::before,html[data-motion='reduce'] .game *::after{animation:none!important;transition:none!important}
html[data-motion='reduce'] #fx-layer,html[data-motion='reduce'] .confetti{display:none}