/* Bloomventure — continuous garden motion.
   app.js owns awaited WAAPI position/fruit animations. This layer supplies
   light, particles and HUD accents without changing any hit-test geometry. */
:root{
  --motion-gold:#ead18d;
  --motion-cream:#fff7d5;
  --motion-sage:#bdd4a9;
  --motion-ease:cubic-bezier(.2,.7,.25,1);
}
.piece{
  transition:none;
  will-change:transform;
  backface-visibility:hidden;
}
.piece>span{transition:none;transform-origin:50% 58%;backface-visibility:hidden}
.piece.clearing>span,.piece.landing>span,.piece.new-special>span{
  animation:none;transition:none;
}
.piece.clearing>span{transform:none;opacity:1}
.piece.selected:not(.clearing)>span{animation:garden-selected 1.5s ease-in-out infinite}
.piece.hinted:not(.clearing)>span{animation:garden-hint .8s ease-in-out 3}
.board[data-phase=fall] .piece{z-index:3}
.board[data-phase=clear] .piece.clearing{z-index:4}

/* A small, readable reward in the stone HUD after each harvest wave. */
[data-score],[data-crop]{display:inline-block;transform-origin:45% 60%}
[data-score].score-gain,[data-crop].score-gain,
.metric.score-gain [data-score],.metric.collect.score-gain [data-crop],
.metric.gaining [data-score],.metric.gaining [data-crop],
.metric-value.score-gain{animation:garden-count .36s var(--motion-ease) both}
.metric{position:relative}
.metric>.score-gain{
  position:absolute;right:6px;top:5px;z-index:5;max-width:47%;
  border:1px solid #d9b474;border-radius:7px;padding:2px 4px;
  background:linear-gradient(#fff6d9,#eed69f);color:#88612b;
  box-shadow:inset 0 1px 0 #fff9dd,0 1px 2px #7c713733;
  font-size:8px;font-weight:850;line-height:1.3;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  animation:garden-score-gain .45s var(--motion-ease) both;
}
.progress-fill{transition:width .42s cubic-bezier(.18,.68,.24,1)}

/* Every cleared cell can emit a light particle, including large cascades. */
.harvest-spark{
  display:block;position:absolute;z-index:7;width:14px;height:14px;
  color:var(--motion-gold);pointer-events:none;
  filter:drop-shadow(0 0 3px #fff3c5b0);
  will-change:transform,opacity;
  animation:garden-spark .6s cubic-bezier(.12,.5,.3,1) both;
  animation-delay:clamp(0ms,var(--spark-delay,0ms),60ms);
}
.harvest-spark .icon{width:14px;height:14px}
.harvest-spark:before{
  content:"";position:absolute;inset:-3px;border:1px solid #fff0c1a8;
  border-radius:50%;pointer-events:none;
  animation:garden-spark-ring .6s ease-out both;
}
.harvest-spark:after{
  content:"";position:absolute;top:6px;left:6px;width:2px;height:2px;
  border-radius:50%;background:#fff6d4;
  box-shadow:-6px 3px 0 #d2ddb4,7px -4px 0 #eacf91,2px -8px 0 #fff6d4;
  animation:garden-dust .6s ease-out both;pointer-events:none;
}
.harvest-glow{
  position:absolute;z-index:5;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse,#fff7d1b8,#e6d09b3b 45%,transparent 72%);
  animation:garden-harvest-glow .6s ease-out both;
  will-change:transform,opacity;
}

/* A warm shockwave rather than a hard flash, in the brass/cream palette. */
.effect-blast{
  border:2px solid #f5dca5;
  background:radial-gradient(circle,#fff8d9b8 0%,#ecd49879 36%,#c6d8a72e 58%,transparent 72%);
  box-shadow:0 0 13px #fff0c74f,inset 0 0 10px #fff9df6e;
  transform-origin:center;will-change:transform,opacity;
  animation:garden-bomb .6s cubic-bezier(.12,.66,.26,1) both;
}
.effect-blast:before{
  content:"";position:absolute;inset:9%;border:1px solid #fff9e1bb;
  border-radius:50%;box-shadow:0 0 9px #ffeabc5c;pointer-events:none;
}
.effect-blast:after{
  content:"";position:absolute;inset:33%;border-radius:50%;
  background:#fff7d5ba;box-shadow:0 0 17px #fff5d56e;pointer-events:none;
}
.effect-ring{
  position:absolute;z-index:6;border-radius:50%;pointer-events:none;
  border:2px solid #f7e4b4;background:transparent;
  box-shadow:0 0 8px #f9e6b347,inset 0 0 6px #f9e6b330;
  animation:garden-ring .62s cubic-bezier(.12,.65,.25,1) both;
  will-change:transform,opacity;
}
.effect-ring:before{content:"";position:absolute;inset:8%;border:1px solid #fff5d58c;border-radius:50%}

/* The rocket's light travels along its actual row or column. */
.effect-line{
  border:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#e7ce9166 20%,#fff8d9eb 50%,#c6d9b589 78%,transparent);
  box-shadow:0 0 12px 3px #ffefc25c;
  transform-origin:var(--beam-origin,0%) 50%;
  animation:garden-rocket-horizontal .6s cubic-bezier(.1,.68,.2,1) both;
  will-change:transform,opacity;
}
.effect-line.vertical{
  background:linear-gradient(180deg,transparent,#e7ce9166 20%,#fff8d9eb 50%,#c6d9b589 78%,transparent);
  transform-origin:50% var(--beam-origin,0%);
  animation-name:garden-rocket-vertical;
}
.effect-line:before{
  content:"";position:absolute;left:0;top:-30%;width:18%;height:160%;
  border-radius:50%;background:radial-gradient(ellipse,#fffbedf5,#f3dfa17a 45%,transparent 75%);
  animation:garden-rocket-head-horizontal .6s cubic-bezier(.1,.6,.3,1) both;
  pointer-events:none;
}
.effect-line.vertical:before{
  left:-30%;top:0;width:160%;height:18%;
  animation-name:garden-rocket-head-vertical;
}
.rocket-trail{
  position:absolute;z-index:6;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#d6ddb480,#fff2c9c2,transparent);
  box-shadow:0 0 10px #f6dea078;
  transform-origin:0 50%;animation:garden-rocket-horizontal .64s ease-out both;
}
.rocket-trail.vertical{
  background:linear-gradient(180deg,transparent,#d6ddb480,#fff2c9c2,transparent);
  transform-origin:50% 0;animation-name:garden-rocket-vertical;
}
.effect-line>.rocket-trail{inset:20% -5%;border-radius:inherit}
.effect-line.vertical>.rocket-trail{
  inset:-5% 20%;
  background:linear-gradient(180deg,transparent,#d6ddb480,#fff2c9c2,transparent);
  transform-origin:50% var(--beam-origin,0%);animation-name:garden-rocket-vertical;
}

/* A soft pearl-colored sweep links a color bomb to the whole board. */
.effect-rainbow{
  position:absolute;inset:0;z-index:6;border-radius:17px;pointer-events:none;
  border:1px solid #fff5d19e;
  background:radial-gradient(ellipse at var(--origin-x,50%) var(--origin-y,48%),#fff8df19,#ecd89830 35%,#bfd6ba30 54%,#d1c6d336 70%,transparent 88%);
  box-shadow:inset 0 0 24px #fff7d573;
  animation:garden-pearl-wave .66s ease-out both;will-change:transform,opacity;
}
.effect-rainbow:before{
  content:"";position:absolute;inset:0 auto 0 0;width:38%;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff8d89c 45%,#c6dab573 70%,transparent);
  animation:garden-pearl-sweep .66s cubic-bezier(.15,.5,.25,1) both;
}
.effect-blast.rainbow{background:radial-gradient(circle,#fff5d5b8,#dfc99668 38%,#bfdbc747 58%,transparent 74%)}

.combo-bubble{
  max-width:calc(100% - 24px);font-size:20px;
  animation:garden-cascade .85s cubic-bezier(.18,.72,.24,1) both;
  transform-origin:50% 60%;will-change:transform,opacity;
  border-color:#dfbd7f;text-shadow:0 1px 0 #fff6d8;
}
.combo-bubble[data-wave="3"],.combo-bubble[data-wave="4"]{box-shadow:inset 0 1px 0 #fffadd,0 4px 0 #a1844d,0 0 15px #efcf905e,0 10px 24px #2343334d}

@keyframes garden-selected{
  0%,100%{transform:scale(1.035)}50%{transform:scale(1.065)}
}
@keyframes garden-hint{
  0%,100%{transform:scale(1.025)}50%{transform:scale(1.115)}
}
@keyframes garden-count{
  0%{transform:scale(1)}35%{transform:scale(1.12)}70%{transform:scale(.99)}100%{transform:scale(1)}
}
@keyframes garden-score-gain{
  0%{opacity:0;transform:translateY(4px) scale(.8)}
  25%,58%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-7px) scale(.96)}
}
@keyframes garden-spark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-8deg)}
  20%{opacity:1;transform:translate(-50%,-60%) scale(1.03) rotate(2deg)}
  66%{opacity:.86}
  100%{opacity:0;transform:translate(calc(-50% + var(--drift-x,var(--drift,0px))),calc(-50% + var(--drift-y,-38px))) scale(.35) rotate(24deg)}
}
@keyframes garden-spark-ring{
  0%{opacity:.65;transform:scale(.25)}60%{opacity:.26}100%{opacity:0;transform:scale(1.6)}
}
@keyframes garden-dust{
  0%{opacity:0;transform:scale(.2)}25%{opacity:.9}100%{opacity:0;transform:scale(1.9)}
}
@keyframes garden-harvest-glow{
  0%{opacity:0;transform:scale(.45)}25%{opacity:.8;transform:scale(1.03)}100%{opacity:0;transform:scale(1.3)}
}
@keyframes garden-bomb{
  0%{opacity:0;transform:scale(.16)}25%{opacity:1;transform:scale(.87)}70%{opacity:.5}100%{opacity:0;transform:scale(1.32)}
}
@keyframes garden-ring{
  0%{opacity:0;transform:scale(.3)}22%{opacity:.95}100%{opacity:0;transform:scale(1.45)}
}
@keyframes garden-rocket-horizontal{
  0%{opacity:0;transform:scaleX(.04) scaleY(.65)}24%{opacity:1;transform:scaleX(.72) scaleY(1)}52%{opacity:.95;transform:scaleX(1) scaleY(.95)}100%{opacity:0;transform:scaleX(1) scaleY(.4)}
}
@keyframes garden-rocket-vertical{
  0%{opacity:0;transform:scaleY(.04) scaleX(.65)}24%{opacity:1;transform:scaleY(.72) scaleX(1)}52%{opacity:.95;transform:scaleY(1) scaleX(.95)}100%{opacity:0;transform:scaleY(1) scaleX(.4)}
}
@keyframes garden-rocket-head-horizontal{
  0%{opacity:0;transform:translateX(-80%)}20%{opacity:1}100%{opacity:0;transform:translateX(560%)}
}
@keyframes garden-rocket-head-vertical{
  0%{opacity:0;transform:translateY(-80%)}20%{opacity:1}100%{opacity:0;transform:translateY(560%)}
}
@keyframes garden-pearl-wave{
  0%{opacity:0;transform:scale(.83)}32%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.07)}
}
@keyframes garden-pearl-sweep{
  0%{opacity:0;transform:translateX(-110%)}22%{opacity:.85}100%{opacity:0;transform:translateX(280%)}
}
@keyframes garden-cascade{
  0%{opacity:0;transform:translate(-50%,calc(-50% + 8px)) scale(.84)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.035)}
  38%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 14px)) scale(.98)}
}
@keyframes garden-short-fade{0%{opacity:.5}100%{opacity:0}}

@media(max-width:350px){.combo-bubble{font-size:18px;padding:11px 17px}}
@media(prefers-reduced-motion:reduce){
  .piece{will-change:auto}
  .piece.selected:not(.clearing)>span,.piece.hinted:not(.clearing)>span{animation:none;transform:none}
  [data-score].score-gain,[data-crop].score-gain,.metric.score-gain [data-score],
  .metric.collect.score-gain [data-crop],.metric.gaining [data-score],
  .metric.gaining [data-crop],.metric-value.score-gain{animation:none}
  .metric>.score-gain{animation:garden-short-fade .1s linear both;animation-duration:.1s!important}
  .progress-fill{transition-duration:.01ms}
  .harvest-spark,.harvest-glow,.rocket-trail{display:none}
  .effect-blast,.effect-ring,.effect-line,.effect-rainbow,.combo-bubble{
    animation:garden-short-fade .1s linear both;animation-duration:.1s!important;will-change:opacity;
  }
  .effect-line:before,.effect-rainbow:before{display:none}
}