/* Backpack Burst detonation. Built in code rather than from the uploaded
   explosion art, so every beat is tunable. Lives in #projectileLayer, which
   game.css forces to z-index 60; damage numbers carry an inline z-index of 6500
   and stay readable on top. */

.bb-flash,
.bb-ring,
.bb-burst,
.bb-shrapnel {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, 50%);
}

/* White core punch */
.bb-flash {
  z-index: 33;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,236,140,.85) 26%, rgba(244,114,182,.5) 52%, transparent 72%);
  animation: bbFlash 320ms ease-out forwards;
}
@keyframes bbFlash {
  0%   { opacity: 1; transform: translate(-50%, 50%) scale(.25); }
  40%  { opacity: 1; transform: translate(-50%, 50%) scale(1.5); }
  100% { opacity: 0; transform: translate(-50%, 50%) scale(2.6); }
}

/* Expanding shockwave, thinning as it grows */
.bb-ring {
  z-index: 32;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  border: 10px solid rgba(255, 255, 255, .92);
  box-shadow: 0 0 26px rgba(255, 214, 102, .85), inset 0 0 20px rgba(244, 114, 182, .6);
  animation: bbRing 420ms cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes bbRing {
  0%   { opacity: .95; border-width: 12px; transform: translate(-50%, 50%) scale(.3); }
  70%  { opacity: .7;  border-width: 5px;  transform: translate(-50%, 50%) scale(2.4); }
  100% { opacity: 0;   border-width: 1px;  transform: translate(-50%, 50%) scale(3.4); }
}

/* Flickering secondary pops around the core */
.bb-burst {
  z-index: 33;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,176,32,.7) 40%, rgba(239,68,68,.35) 66%, transparent 78%);
  animation: bbBurst 360ms steps(6, end) forwards;
}
@keyframes bbBurst {
  0%   { opacity: 1;  transform: translate(-50%, 50%) scale(.3); }
  30%  { opacity: .35; transform: translate(-50%, 50%) scale(1.15); }
  55%  { opacity: 1;  transform: translate(-50%, 50%) scale(1.5); }
  80%  { opacity: .3; transform: translate(-50%, 50%) scale(1.85); }
  100% { opacity: 0;  transform: translate(-50%, 50%) scale(2.1); }
}

/* Candy thrown outward */
.bb-shrapnel {
  z-index: 31;
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255, 214, 102, .9));
  animation: bbShrapnel 760ms cubic-bezier(.2, .7, .4, 1) forwards;
}
@keyframes bbShrapnel {
  0%   { opacity: 1; transform: translate(-50%, 50%) scale(.6) rotate(0deg); }
  70%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--bb-x, 0px)), calc(50% - var(--bb-y, 60px)))
               scale(1.2) rotate(var(--bb-spin, 300deg));
  }
}

/* Pulsing badge while a monster is marked */
.bb-mark {
  position: absolute;
  left: 50%;
  top: -6%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(244,114,182,.75) 45%, transparent 72%);
  animation: bbMark 460ms ease-in-out infinite alternate;
}
@keyframes bbMark {
  from { opacity: .55; transform: scale(.82); }
  to   { opacity: 1;   transform: scale(1.12); }
}

/* Short kick, only for your own blasts */
.bb-shake { animation: bbShake 180ms ease-in-out; }
@keyframes bbShake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-5px, 3px); }
  50%      { transform: translate(4px, -3px); }
  75%      { transform: translate(-3px, -2px); }
}