/* components.status-effects.css
 * Dedicated visual sequences for status effect cards (Poison Spit, Shrink Ray)
 */

.status-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6000;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.status-overlay.visible {
  opacity: 1;
}

/* POISON SPIT */
.poison-spit-overlay {
  background: radial-gradient(circle at center, rgba(4, 40, 12, 0.85) 0%, rgba(0, 0, 0, 0.65) 60%, transparent 75%);
}

.poison-bottle {
  width: clamp(180px, 18vw, 260px);
  height: clamp(220px, 22vw, 320px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transform-origin: center calc(35%);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65));
  animation: poison-bottle-spin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.poison-spit-overlay.shatter .poison-bottle {
  animation: poison-bottle-shatter 0.5s ease forwards;
}

.poison-bottle-neck {
  width: 38%;
  height: 22%;
  background: linear-gradient(180deg, #442b1b 0%, #2b1c12 70%);
  border-radius: 40% 40% 30% 30%;
}

.poison-bottle-body {
  width: 78%;
  flex: 1;
  background: linear-gradient(180deg, #0c7d3c 0%, #064824 80%);
  border-radius: 40% 40% 18% 18%;
  border: 4px solid rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.poison-bottle-label {
  width: 70%;
  padding: 14px;
  text-align: center;
  background: #f3e7c6;
  border-radius: 10px;
  border: 3px solid #3b2614;
  font-family: 'Bangers', 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: 0.1em;
  color: #2b140a;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poison-skull {
  font-size: 1.5em;
  display: block;
}

.poison-glass {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.poison-spit-overlay.shatter .poison-glass {
  opacity: 1;
}

.poison-glass-piece {
  width: 16px;
  height: 24px;
  background: rgba(195, 255, 204, 0.9);
  margin: 2px;
  border-radius: 4px;
  opacity: 0;
  transform: translate(0, 0) scale(0.6);
  animation: poison-glass-fly 0.6s ease forwards;
  animation-delay: calc(var(--index, 0) * 20ms);
}

.poison-spit-overlay.fade {
  opacity: 0;
  transition: opacity 400ms ease;
}

/* SHRINK RAY */
.shrink-ray-overlay {
  background: radial-gradient(circle at center, rgba(25, 20, 45, 0.9) 0%, rgba(4, 4, 8, 0.85) 55%, transparent 75%);
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.shrink-ray-beam {
  width: 100%;
  max-width: 720px;
  height: 8px;
  background: linear-gradient(90deg, transparent, #0ff, #f0f, transparent);
  opacity: 0;
  transform: scaleX(0.2);
  transition: opacity 220ms ease, transform 220ms ease;
}

.shrink-ray-overlay.sequence-active .shrink-ray-beam {
  opacity: 1;
  transform: scaleX(1);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.7);
}

.shrink-ray-target-row {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.shrink-ray-target {
  width: clamp(90px, 13vw, 160px);
  height: clamp(90px, 13vw, 160px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Bangers', 'Bebas Neue', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform-origin: center bottom;
  opacity: 0;
  transform: translateY(30px) scale(1.1);
  animation: shrink-target-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--delay, 0s);
}

.shrink-ray-target.has-image {
  background-size: cover;
  background-position: center;
  border: 3px solid rgba(255, 255, 255, 0.6);
}

.shrink-ray-overlay.sequence-active .shrink-ray-target {
  animation: shrink-target-sequence 1.5s ease forwards;
  animation-delay: var(--delay, 0s);
}

.shrink-ray-overlay.complete .shrink-ray-target {
  animation: shrink-target-exit 0.8s ease forwards;
}

/* CARD-LEVEL PULSES */
.cmp-player-profile-card.card-poison-hit,
.ppc-mobile.card-poison-hit {
  animation: card-poison-splash 900ms ease;
}

.cmp-player-profile-card.card-shrink-hit,
.ppc-mobile.card-shrink-hit {
  animation: card-shrink-wobble 1100ms ease;
}

@keyframes poison-bottle-spin {
  0% { transform: scale(0.8) rotate(-12deg); opacity: 0; }
  30% { opacity: 1; }
  60% { transform: scale(1.05) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes poison-bottle-shatter {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.1) rotate(-8deg); }
  100% { transform: scale(0.75) rotate(-28deg); opacity: 0; }
}

@keyframes poison-glass-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc((var(--index, 0) - 6) * 12px), calc(-40px - var(--index, 0) * 4px)) scale(0.2); }
}

@keyframes shrink-target-enter {
  0% { opacity: 0; transform: translateY(30px) scale(1.2); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shrink-target-sequence {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(0.25); opacity: 1; }
  65% { transform: scale(0.3) translateY(-10px); }
  100% { transform: scale(0.25) translateY(40px); opacity: 0.5; }
}

@keyframes shrink-target-exit {
  0% { transform: scale(0.25) translateY(40px); opacity: 0.5; }
  100% { transform: scale(0.25) translateY(120px) rotate(12deg); opacity: 0; }
}

@keyframes card-poison-splash {
  0% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); filter: saturate(1); }
  20% { box-shadow: 0 0 35px rgba(0, 255, 128, 0.5); filter: saturate(1.3); transform: scale(1.02); }
  60% { box-shadow: 0 0 18px rgba(0, 255, 128, 0.25); }
  100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); transform: scale(1); filter: saturate(1); }
}

@keyframes card-shrink-wobble {
  0% { transform: scale(1); }
  25% { transform: scale(0.85); }
  55% { transform: scale(0.6); }
  65% { transform: scale(0.7); }
  100% { transform: scale(1); }
}