/* 1) New junk cells pop in */
.powerup-plasma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.cell[data-fx="junk"] {
  animation: junkPop 0.45s ease-out both;
  filter: drop-shadow(0 0 6px currentColor);
  transform-origin: center;
}
@keyframes junkPop {
  0%   { transform: scale(0.6) rotate(-8deg); opacity: 0.0; }
  60%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scale(1.00) rotate(0deg); opacity: 1; }
}

/* 2) Opponent grid shakes & glows */
#grid1.incoming-junk, #grid2.incoming-junk {
  animation: junkHit 0.55s ease;
  outline: 3px solid rgba(255,255,255,.75);
  box-shadow: 0 0 18px 6px rgba(255,255,255,.45), inset 0 0 14px rgba(255,255,255,.25);
}
@keyframes junkHit {
  0%, 100% { transform: translate3d(0,0,0); }
  10%      { transform: translate3d(-2px,-2px,0); }
  20%      { transform: translate3d(3px,1px,0); }
  30%      { transform: translate3d(-3px,2px,0); }
  40%      { transform: translate3d(2px,-1px,0); }
  50%      { transform: translate3d(-1px,1px,0); }
  60%      { transform: translate3d(1px,-2px,0); }
  70%      { transform: translate3d(-2px,2px,0); }
  80%      { transform: translate3d(2px,-1px,0); }
  90%      { transform: translate3d(-1px,1px,0); }
}

#grid1.burner-active, #grid2.burner-active, .tutorial-board.burner-active {
  outline: 3px solid rgba(255, 72, 72, 0.95);
  box-shadow:
    0 0 18px 6px rgba(255, 72, 72, 0.45),
    inset 0 0 14px rgba(255, 72, 72, 0.25);
}

/* 🚀 Cloned cells that burst outward */
.burst-particle{
  position: absolute;
  will-change: transform, opacity, filter;
  pointer-events: none;
  animation: burstFly 720ms cubic-bezier(.22,.9,.26,1) both;
  transform-origin: center;
  z-index: 5; /* above cells, below overlays */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

@keyframes burstFly {
  0% {
    transform: translate(0,0) scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1.0);
  }
  70% {
    transform: translate(var(--dx), var(--dy)) scale(.92) rotate(var(--rot));
    opacity: .65;
    filter: brightness(1.08);
  }
  100% {
    transform: translate(calc(var(--dx) * 1.1), calc(var(--dy) * 1.1))
               scale(.85) rotate(var(--rot));
    opacity: 0;
    filter: brightness(1.15) blur(1px);
  }
}

/* Motion-reduced fallback: no flight – just fade */
@media (prefers-reduced-motion: reduce) {
  .burst-particle { animation: none !important; opacity: 0 !important; }
}

/* ====== CRUMBLE shards ====== */
.crumb-piece{
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity, clip-path, filter;
  z-index: 6;

  /* Paint like a full cell, then we mask it to feel like a smaller chunk */
  image-rendering: auto;
  background-repeat: no-repeat;
  background-image: url("../assets/block_sprites.webp");
  background-size: var(--sheet-w) var(--sheet-h);

  /* Inherit the correct sprite from data attrs, reusing your mapping */
}
.crumb-piece[data-var="reg"]   { --vx: 0; }
.crumb-piece[data-var="off"]   { --vx: 1; }
.crumb-piece[data-var="def"]   { --vx: 2; }
.crumb-piece[data-var="solid"] { --vx: 3; }

.crumb-piece[data-type="B"] { --vy: 0; }
.crumb-piece[data-type="U"] { --vy: 1; }
.crumb-piece[data-type="R"] { --vy: 2; }
.crumb-piece[data-type="N"] { --vy: 3; }
.crumb-piece[data-type="E"] { --vy: 4; }
.crumb-piece[data-type="r"] { --vy: 5; }

.crumb-piece{
  background-position:
    calc(var(--vx) * -1 * var(--sprite-step) - var(--sprite-inset))
    calc(var(--vy) * -1 * var(--sprite-step) - var(--sprite-inset));
  /* Make each shard look like a different “chip” of the tile:
     - Slight crop using clip-path
     - Tiny internal offset to desync the sprite details
  */
  transform: translate(0,0) rotate(0deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  animation: crumbFall 900ms cubic-bezier(.2,.8,.2,1) both;
}

/* Irregular small polygon “chips”; runtime tweaks with --clip-x/--clip-y */
.crumb-piece{
  /* default polygon — varied enough; internal offsets add more variation */
  --clip-x: 0%;
  --clip-y: 0%;
  clip-path: polygon(
    calc(10% + var(--clip-x)) calc(10% + var(--clip-y)),
    calc(65% + var(--clip-x)) calc(8%  + var(--clip-y)),
    calc(85% + var(--clip-x)) calc(45% + var(--clip-y)),
    calc(60% + var(--clip-x)) calc(80% + var(--clip-y)),
    calc(18% + var(--clip-x)) calc(70% + var(--clip-y))
  );
}

/* Gravity-like fall with a little spin and fade */
@keyframes crumbFall {
  0% {
    transform: translate(0,0) rotate(0deg) scale(1);
    opacity: 1;
  }
  60% {
    transform: translate(calc(var(--c-dx) * .75), calc(var(--c-dy) * .75))
               rotate(calc(var(--c-rot) * .7)) scale(.94);
    opacity: .75;
  }
  100% {
    transform: translate(var(--c-dx), var(--c-dy))
               rotate(var(--c-rot)) scale(.90);
    opacity: 0;
    filter: blur(0.6px) brightness(1.06);
  }
}

/* Reduced-motion: skip shards */
@media (prefers-reduced-motion: reduce) {
  .crumb-piece { animation: none !important; opacity: 0 !important; }
}

/* Mobile clears skip shard creation in renderer.js. This also hides any
   in-flight desktop shards if the viewport is resized into mobile layout. */
@media (max-width: 560px) {
  .crumb-piece { display: none !important; }
}


/* ====== Combo Popup ====== */
.combo-pop{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(var(--combo-scale, 1));
  pointer-events: none;
  z-index: 10;

  /* Typography */
  font-weight: 900;
  text-align: center;
  letter-spacing: .5px;
  line-height: 1;

  /* Base look */
  --combo-hue: 0deg;
  color: white;
  filter: saturate(1.25) contrast(1.1)
          drop-shadow(0 2px 18px rgba(255,255,255,.22));
  text-shadow:
    0 0 10px rgba(255,255,255,.55),
    0 0 24px rgba(255,255,255,.35);

  /* Animated outline-glow via pseudo element */
}
.combo-pop .combo-main{
  display:block;
  font-size: clamp(20px, 4.8vmin, 40px);
  background: conic-gradient(
    from var(--combo-hue),
    #fff 0 20%,
    #ffd24a 20% 40%,
    #7dd3fc 40% 60%,
    #fff 60% 80%,
    #ffd24a 80% 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.combo-pop .combo-sub{
  display:block;
  margin-top: 2px;
  font-weight: 800;
  font-size: clamp(12px, 2.6vmin, 18px);
  opacity: .85;
}

/* Pop → breathe → float → fade */
/* Pop → breathe → float → fade (longer chain feel) */
.combo-pop{
  animation:
    comboPopIn 660ms cubic-bezier(.2,.9,.2,1) both,
    comboHold 1100ms ease-out 460ms both,
    comboFloat 1200ms ease-in 1360ms both;
}

@keyframes comboPopIn{
  0%   { opacity: 0; transform: translate(-50%,-48%) scale(calc(var(--combo-scale,1) * .78)); }
  60%  { opacity: 1; transform: translate(-50%,-50%) scale(calc(var(--combo-scale,1) * 1.12)); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(calc(var(--combo-scale,1) * 1.00)); }
}

@keyframes comboHold{
  0%   { filter: brightness(1.08); }
  100% { filter: brightness(1.18); } /* slightly brighter at peak */
}

@keyframes comboFloat{
  0%   { transform: translate(-50%,-50%) scale(var(--combo-scale,1)); opacity: 1; }
  100% { transform: translate(-50%,-66%) scale(calc(var(--combo-scale,1) * .98)); opacity: 0; }
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .combo-pop{ animation: none !important; opacity: 1 !important; }
}