/* Piñata Party: the hanging piñata, its burst, and the homing candy packs. */

/* ---- the piñata itself ---- */
.pinata {
  position: absolute;
  /* MUST match PINATA_SPRITE_PX in server/combat/pinataParty.js — the grid spacing
     is derived from it, so drawing larger than the layout believes puts sprites on
     top of each other while the maths insists they are apart. */
  width: 340px;
  height: 340px;
  margin-left: -170px;
  margin-bottom: -170px;
  pointer-events: none;
  z-index: 86;
  /* Slow, subtle bob. The server already drifts it vertically; a fast CSS bounce on
     top of that reads as jitter. */
  animation: pp-bob 4.6s ease-in-out infinite;
}
.pinata-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(var(--pinata-tilt, 0deg));
  transition: transform 120ms linear;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
}
/* Your own piñata glows so you can tell which one you may pop. */
.pinata.is-mine .pinata-art {
  filter:
    drop-shadow(0 0 14px rgba(255, 220, 120, .95))
    drop-shadow(0 0 34px rgba(255, 140, 220, .7))
    drop-shadow(0 10px 16px rgba(0, 0, 0, .45));
}
@keyframes pp-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---- per-candy hit: a slash mark and its own damage number ---- */
.pp-hitmark {
  position: absolute;
  width: 190px;
  height: 143px;
  margin: 0 0 -71px -95px;
  pointer-events: none;
  z-index: 95;
  object-fit: contain;
  animation: pp-hitmark 340ms ease-out forwards;
}
@keyframes pp-hitmark {
  0%   { transform: scale(.55) rotate(var(--pp-hit-rot, 0deg)); opacity: 0; }
  30%  { transform: scale(1.15) rotate(var(--pp-hit-rot, 0deg)); opacity: 1; }
  100% { transform: scale(1.35) rotate(var(--pp-hit-rot, 0deg)); opacity: 0; }
}
.pp-hitnum {
  position: absolute;
  margin-left: -70px;
  width: 140px;
  text-align: center;
  pointer-events: none;
  z-index: 96;
  font-weight: 900;
  font-size: 30px;
  color: #fff;
  -webkit-text-stroke: 3px #7a1fa2;
  paint-order: stroke fill;
  text-shadow: 0 0 12px rgba(190, 120, 255, .9);
  animation: pp-hitnum 800ms cubic-bezier(.2,.9,.3,1) forwards;
}
.pp-hitnum.is-crit {
  font-size: 38px;
  -webkit-text-stroke: 3px #b8860b;
  color: #fff3b0;
}
@keyframes pp-hitnum {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { transform: translateY(-14px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-72px) scale(.95); opacity: 0; }
}

/* ---- the burst ---- */
.pp-flash, .pp-shockwave, .pp-spark, .pp-confetti, .pp-popnum {
  position: absolute;
  pointer-events: none;
  z-index: 94;
}
.pp-flash {
  width: 60px; height: 60px;
  margin: 0 0 -30px -30px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fff6c8 40%, rgba(255,255,255,0) 72%);
  animation: pp-flash 420ms ease-out forwards;
}
@keyframes pp-flash {
  0%   { transform: scale(.3); opacity: 0; }
  25%  { transform: scale(4.2); opacity: 1; }
  100% { transform: scale(7); opacity: 0; }
}
.pp-shockwave {
  width: 60px; height: 60px;
  margin: 0 0 -30px -30px;
  border-radius: 50%;
  border: 5px solid rgba(255, 215, 120, .9);
  box-shadow: 0 0 40px 12px rgba(255, 170, 60, .5);
  animation: pp-shock 700ms cubic-bezier(.15,.8,.3,1) forwards;
}
@keyframes pp-shock {
  0%   { transform: scale(.2); opacity: 0; }
  20%  { opacity: .95; }
  100% { transform: scale(11); opacity: 0; border-width: 1px; }
}
.pp-spark {
  width: 46px; height: 4px;
  margin: 0 0 -2px -23px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 40%, #ffd25e);
  transform: rotate(var(--pp-rot, 0deg));
  animation: pp-spark 620ms cubic-bezier(.1,.7,.3,1) forwards;
}
@keyframes pp-spark {
  0%   { transform: translate(0,0) rotate(var(--pp-rot,0deg)) scaleX(.3); opacity: 1; }
  100% { transform: translate(var(--pp-x,0), var(--pp-y,0)) rotate(var(--pp-rot,0deg)) scaleX(1.4); opacity: 0; }
}
.pp-confetti {
  width: 14px; height: 20px;
  margin: 0 0 -10px -7px;
  border-radius: 2px;
  background: var(--pp-color, #ff2d95);
  box-shadow: 0 0 8px rgba(255,255,255,.5);
  animation: pp-confetti 1500ms cubic-bezier(.15,.6,.4,1) forwards;
}
@keyframes pp-confetti {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  /* Falls past its peak, so the paper tumbles down rather than freezing mid-air. */
  100% { transform: translate(var(--pp-x,0), calc(var(--pp-y,0) + 190px)) rotate(var(--pp-rot,0deg)); opacity: 0; }
}
.pp-popnum {
  margin-left: -140px;
  width: 280px;
  text-align: center;
  font-weight: 900;
  font-size: 46px;
  color: #fff;
  -webkit-text-stroke: 4px #d81b60;
  paint-order: stroke fill;
  text-shadow: 0 0 22px rgba(255, 90, 180, .9);
  animation: pp-popnum 1400ms cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes pp-popnum {
  0%   { transform: translateY(0) scale(.4); opacity: 0; }
  18%  { transform: translateY(-26px) scale(1.25); opacity: 1; }
  70%  { transform: translateY(-64px) scale(1); opacity: 1; }
  100% { transform: translateY(-110px) scale(.9); opacity: 0; }
}

/* ---- the homing candy packs ----
   Deliberately NOT projectile--duckies-pack: that class is pinned to 64x30 with
   !important in game.css and has already crushed two other sprites. */
.projectile.projectile--candy-pack {
  width: 92px;
  height: 92px;
  background: transparent;
  z-index: 82;
}
.projectile.projectile--candy-pack::before,
.projectile.projectile--candy-pack::after {
  display: none !important;
  content: none !important;
}
.projectile.projectile--candy-pack .projectile-art--candy-pack {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, .85))
    drop-shadow(0 0 22px rgba(255, 190, 90, .75))
    drop-shadow(0 5px 8px rgba(0, 0, 0, .4));
  animation: pp-pack-wobble 520ms ease-in-out infinite alternate;
}
@keyframes pp-pack-wobble {
  from { transform: rotate(-9deg) scale(1); }
  to   { transform: rotate(9deg) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .pinata { animation: none; }
  .projectile.projectile--candy-pack .projectile-art--candy-pack { animation: none; }
}