/**
 * Player Card Visual Effects
 * Floating numbers and card animations for damage, healing, and energy costs
 */

/* Status badges shared across player card variants */
.player-status-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  border-radius: 999px;
  border: 2px solid #000;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  letter-spacing: 0.5px;
  pointer-events: auto;
  box-shadow: 2px 2px 0 #000;
}

.player-status-badge-icon {
  font-size: 12px;
  line-height: 1;
}

.player-status-badge-value {
  font-family: 'Bangers', cursive;
  font-size: 14px;
  line-height: 1;
}

.player-status-badge--poison {
  background: linear-gradient(135deg, #10341b 0%, #32a052 100%);
  color: #eaffea;
}

.player-status-badge--shrink {
  background: linear-gradient(135deg, #0c233a 0%, #4da0ff 100%);
  color: #e7f4ff;
}

.player-status-badge--animate {
  animation: player-status-badge-pop 650ms cubic-bezier(.25, .9, .35, 1.3);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4), 2px 2px 0 #000;
}

@keyframes player-status-badge-pop {
  0% { transform: scale(0.6); opacity: 0; }
  40% { transform: scale(1.25); opacity: 1; }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

/* Damage Floater - Red, floats up and fades out */
.damage-floater {
  pointer-events: none;
  z-index: 10000;
  font-size: 2rem;
  font-weight: bold;
  color: #ff3333;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 8px rgba(255, 51, 51, 0.8);
  animation: damage-float 1.5s cubic-bezier(0.33, 0.66, 0.66, 1) forwards;
}

@keyframes damage-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -70px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120px) scale(0.8);
  }
}

/* Healing Floater - Green, floats up and fades out */
.healing-floater {
  pointer-events: none;
  z-index: 10000;
  font-size: 2rem;
  font-weight: bold;
  color: #33ff66;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 8px rgba(51, 255, 102, 0.8);
  animation: healing-float 1.5s cubic-bezier(0.33, 0.66, 0.66, 1) forwards;
}

@keyframes healing-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -60px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100px) scale(0.9);
  }
}

/* Player Card Damage Pulse - Shake and red flash */
/* Support both desktop and mobile player profile cards */
.cmp-player-profile-card.card-damage-pulse,
.cmp-player-profile-card.card-damage-pulse,
.ppc-mobile.card-damage-pulse {
  animation: damage-pulse 0.6s ease-out;
}

@keyframes damage-pulse {
  0%, 100% {
    transform: translateX(0);
    filter: none;
  }
  10% {
    transform: translateX(-5px);
    filter: brightness(1.5) sepia(0.8) hue-rotate(-10deg);
  }
  20% {
    transform: translateX(5px);
  }
  30% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(-3px);
    filter: brightness(1.3) sepia(0.6) hue-rotate(-10deg);
  }
  60% {
    transform: translateX(3px);
  }
  70% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}

/* Player Card Healing Glow - Gentle green glow */
/* Support both desktop and mobile player profile cards */
.cmp-player-profile-card.card-healing-glow,
.cmp-player-profile-card.card-healing-glow,
.ppc-mobile.card-healing-glow {
  animation: healing-glow 0.8s ease-out;
}

@keyframes healing-glow {
  0%, 100% {
    filter: none;
    box-shadow: none;
  }
  50% {
    filter: brightness(1.2) saturate(1.3) hue-rotate(30deg);
    box-shadow: 0 0 20px rgba(51, 255, 102, 0.6);
  }
}

/* Health stat highlight when damaged */
/* Support both desktop and mobile player profile cards */
.cmp-player-profile-card.card-damage-pulse .stat-health,
.cmp-player-profile-card.card-damage-pulse .ppc-health,
.ppc-mobile.card-damage-pulse .ppc-health {
  animation: health-flash-damage 0.6s ease-out;
}

@keyframes health-flash-damage {
  0%, 100% {
    background-color: transparent;
  }
  30% {
    background-color: rgba(255, 51, 51, 0.4);
  }
}

/* Health stat highlight when healed */
/* Support both desktop and mobile player profile cards */
.cmp-player-profile-card.card-healing-glow .stat-health,
.cmp-player-profile-card.card-healing-glow .ppc-health,
.ppc-mobile.card-healing-glow .ppc-health {
  animation: health-flash-heal 0.8s ease-out;
}

@keyframes health-flash-heal {
  0%, 100% {
    background-color: transparent;
  }
  40% {
    background-color: rgba(51, 255, 102, 0.3);
  }
}

/* Energy Cost Floater - Yellow/Gold, floats up and fades out */
.energy-cost-floater {
  pointer-events: none;
  z-index: 10000;
  font-size: 2rem;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 8px rgba(255, 215, 0, 0.8);
  animation: energy-cost-float 1.5s cubic-bezier(0.33, 0.66, 0.66, 1) forwards;
}

@keyframes energy-cost-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -65px) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -110px) scale(0.85);
  }
}

/* VP Gain Floater - Gold, floats up and fades out */
.vp-gain-floater {
  pointer-events: none;
  z-index: 10000;
  font-size: 2.2rem;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 12px rgba(255, 215, 0, 0.9);
  animation: vp-gain-float 1.5s cubic-bezier(0.33, 0.66, 0.66, 1) forwards;
}

@keyframes vp-gain-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -70px) scale(1.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -130px) scale(0.9);
  }
}

/* Player Card VP Flash - Gold pulse */
.cmp-player-profile-card.card-vp-flash,
.ppc-mobile.card-vp-flash {
  animation: vp-card-flash 0.6s ease-out;
}

@keyframes vp-card-flash {
  0%, 100% {
    filter: none;
    box-shadow: none;
  }
  30% {
    filter: brightness(1.4) saturate(1.5) hue-rotate(10deg);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  }
}

/* Energy Gain Floater - Electric blue, floats up and fades out */
.energy-gain-floater {
  pointer-events: none;
  z-index: 10000;
  font-size: 2rem;
  font-weight: bold;
  color: #64C8FF;
  text-shadow: 
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 10px rgba(100, 200, 255, 0.9);
  animation: energy-gain-float 1.5s cubic-bezier(0.33, 0.66, 0.66, 1) forwards;
}

@keyframes energy-gain-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -65px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -115px) scale(0.85);
  }
}

/* Player Card Energy Flash - Brief yellow pulse */
.cmp-player-profile-card.card-energy-flash,
.ppc-mobile.card-energy-flash {
  animation: energy-flash 0.6s ease-out;
}

@keyframes energy-flash {
  0%, 100% {
    filter: none;
  }
  30% {
    filter: brightness(1.3) sepia(0.4) hue-rotate(30deg);
  }
}

/* VP Stat Flash - Gold glow animation */
.ppc-stat.vp.vp-flash {
  animation: vp-stat-flash 0.6s ease-out;
}

@keyframes vp-stat-flash {
  0%, 100% {
    background-color: transparent;
    box-shadow: none;
  }
  30% {
    background-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
  }
}

/* Energy Stat Flash - Yellow/Blue glow animation */
.ppc-stat.energy.energy-flash {
  animation: energy-stat-flash 0.6s ease-out;
}

@keyframes energy-stat-flash {
  0%, 100% {
    background-color: transparent;
    box-shadow: none;
  }
  30% {
    background-color: rgba(100, 200, 255, 0.4);
    box-shadow: 0 0 12px rgba(100, 200, 255, 0.6);
  }
}

/* Health Bar Flash - Red/Green glow for damage/heal */
.ppc-health-bar.health-flash {
  animation: health-bar-flash 0.6s ease-out;
}

@keyframes health-bar-flash {
  0%, 100% {
    box-shadow: none;
  }
  30% {
    box-shadow: 0 0 12px rgba(51, 255, 102, 0.6);
  }
}