/* The symbols breathe inside their fixed cells; board geometry never animates. */
.piece>span>.crop,.piece>span>.special-crop{
  transform-origin:50% 70%;
  animation:fruit-idle var(--idle-duration,3.1s) ease-in-out var(--idle-delay,0s) infinite;
}
#board[data-busy=true] .piece>span>.crop,#board[data-busy=true] .piece>span>.special-crop,
.game-hidden .piece>span>.crop,.game-hidden .piece>span>.special-crop{animation-play-state:paused}
.booster:not(:disabled)>.icon,.metric.collect>.crop{animation:booster-idle 3.2s ease-in-out infinite;transform-origin:center}
@keyframes fruit-idle{0%,100%{transform:translateY(0) rotate(-.6deg) scale(1)}50%{transform:translateY(-2%) rotate(.8deg) scale(1.015,1.025)}}
@keyframes booster-idle{0%,100%{transform:scale(.985) rotate(-1deg)}50%{transform:scale(1.02) rotate(1deg)}}
.piece.hinted:not(.clearing)>span{animation:hint-swap-dance 1.15s ease-in-out infinite;transform-origin:center}
.piece.hinted>span>.crop,.piece.hinted>span>.special-crop{animation:none}
@keyframes hint-swap-dance{0%,100%{transform:scale(1.42) translate(0,0) rotate(-5deg)}50%{transform:scale(1.65) translate(var(--hint-x,0px),var(--hint-y,-5px)) rotate(5deg)}}
.piece.hinted{z-index:8;outline:none}
.piece.hinted::after{
  content:"";position:absolute;inset:4%;border:3px solid #f02139;border-radius:17%;
  box-shadow:0 0 0 2px #fff7e6d9,0 0 14px #e3113670,inset 0 0 7px #ff334e40;
  pointer-events:none;animation:hint-red-pulse 1.1s ease-in-out infinite;
}
@keyframes hint-red-pulse{0%,100%{border-color:#f02139;box-shadow:0 0 0 2px #fff7e6d9,0 0 10px #e3113660}50%{border-color:#cc0924;box-shadow:0 0 0 2px #fff7e6,0 0 18px #e3113699}}
.cascade-lightning{position:absolute;inset:0;width:100%;height:100%;z-index:12;pointer-events:none;overflow:hidden;animation:lightning-fade 420ms ease-out both}
.cascade-lightning path{fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;animation:lightning-draw 190ms ease-out both}
.lightning-halo{stroke:#89c8ff;stroke-width:15;opacity:.55;filter:drop-shadow(0 0 9px #51b8ff)}
.lightning-core{stroke:#fffce5;stroke-width:4}
@keyframes lightning-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lightning-fade{0%{opacity:0}14%,55%{opacity:1}100%{opacity:0}}
#garden-weather{position:fixed;inset:0;z-index:9;overflow:hidden;pointer-events:none;contain:strict;user-select:none}
.weather-particle{position:absolute;top:-40px;left:var(--weather-x);width:var(--weather-size);height:var(--weather-size);animation:weather-fall var(--weather-duration) linear var(--weather-delay) infinite;opacity:.4}
.weather-particle>svg{width:100%;height:100%}
[data-weather=leaves] .weather-particle{color:#bf783e}
[data-weather=leaves] .weather-particle:nth-child(3n){color:#a65132}
[data-weather=leaves] .weather-particle:nth-child(3n+1){color:#cfa44c}
[data-weather=snow] .weather-particle{color:#fff;opacity:.7;filter:drop-shadow(0 1px 1px #7fa5b4)}
[data-weather=rain] .weather-particle{width:1px;height:24px;background:linear-gradient(transparent,#b6dcf2);opacity:.34;transform:rotate(13deg)}
[data-weather=sun] .weather-particle{left:auto;right:4%;top:14%;width:86px;height:86px;opacity:.5;animation:weather-sun 7s ease-in-out infinite}
@keyframes weather-fall{from{transform:translate3d(0,-30px,0) rotate(var(--weather-rotation,0deg))}to{transform:translate3d(var(--weather-drift),calc(100vh + 80px),0) rotate(calc(var(--weather-rotation,0deg) + 150deg))}}
@keyframes weather-sun{0%,100%{transform:rotate(-8deg) scale(.95);opacity:.36}50%{transform:rotate(8deg) scale(1.05);opacity:.5}}
.game-hidden .weather-particle,.game-hidden .booster>.icon,.game-hidden .metric.collect>.crop{animation-play-state:paused}
.settings-select{display:block;min-height:44px;max-width:100%;width:100%;padding:9px 11px;border:1px solid #bfa676;border-radius:12px;background:#fffbef;color:#40513e;font:inherit;font-size:14px}
.audio-settings .settings-choice{display:block}
.settings-choice>span{display:block;margin-bottom:7px}
.music-credit{font-size:10px;line-height:1.5;color:#6b705e;margin:9px 0 16px}
@media(prefers-reduced-motion:reduce){
  .piece>span>.crop,.piece>span>.special-crop,.booster>.icon,.metric.collect>.crop,.piece.hinted::after{animation:none}
  #garden-weather[data-weather]:not([data-weather=sun]){display:none}
  [data-weather=sun] .weather-particle{animation:none}
  .cascade-lightning{display:none}
}

/* Each character keeps its own rhythm without moving the touch target. */
.piece[data-crop=water]:not(.hinted)>span>.crop{animation:water-bob 3s ease-in-out var(--idle-delay) infinite}
.piece[data-crop=apple]:not(.hinted)>span>.crop{animation:apple-twinkle 5s ease-in-out var(--idle-delay) infinite}
.piece[data-crop=sun]:not(.hinted)>span>.crop{animation:sun-shimmer 5s ease-in-out var(--idle-delay) infinite}
@keyframes water-bob{0%,100%{transform:translateY(2%) scale(1)}50%{transform:translateY(-7%) scale(.98,1.03)}}
@keyframes apple-twinkle{0%,68%,100%{transform:rotate(0) scale(1);filter:brightness(1)}78%{transform:rotate(-3deg) scale(1.04);filter:brightness(1.2)}87%{transform:rotate(3deg) scale(1.02);filter:brightness(1.08)}}
@keyframes sun-shimmer{0%,70%,100%{transform:scale(1);filter:brightness(1)}82%{transform:scale(1.09) rotate(8deg);filter:brightness(1.25)}}
.game-hidden .piece.hinted>span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
 .piece.hinted:not(.clearing)>span{animation:none;transform:scale(1.35)}
 .piece[data-crop=water]:not(.hinted)>span>.crop,.piece[data-crop=apple]:not(.hinted)>span>.crop,.piece[data-crop=sun]:not(.hinted)>span>.crop{animation:none}
}

#board.hint-active{overflow:visible}