/* Cyberpunk Precision Arcade Styles */
@layer utilities {
  .text-shadow-neon {
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.7), 0 0 20px rgba(0, 240, 255, 0.4);
  }
}

/* Floor Grid with Perspective */
.neon-grid-floor {
  position: absolute;
  bottom: 0;
  left: -50%;
  width: 200%;
  height: 38%;
  background: 
    linear-gradient(rgba(0, 240, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.15) 1px, transparent 1px);
  background-size: 32px 32px;
  transform: perspective(300px) rotateX(65deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 30%, transparent 100%);
  pointer-events-none;
}

/* Fighter Box Styling */
.fighter-box {
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.fighter-shadow {
  position: absolute;
  bottom: -4px;
  width: 70%;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
}

/* Animations for Fighter Actions */
.fighter-idle {
  animation: heroIdle 2s ease-in-out infinite alternate;
}

.enemy-idle {
  animation: enemyIdle 1.8s ease-in-out infinite alternate;
}

@keyframes heroIdle {
  0% { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-5px) scale(1.02); }
}

@keyframes enemyIdle {
  0% { transform: translateY(0px) scale(1); }
  100% { transform: translateY(-4px) scale(1.01); }
}

/* Attack Dash Animations */
.hero-punch {
  animation: heroAttack 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.enemy-punch {
  animation: enemyAttack 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes heroAttack {
  0% { transform: translateX(0) scale(1); }
  45% { transform: translateX(45px) scale(1.12) rotate(4deg); }
  100% { transform: translateX(0) scale(1); }
}

@keyframes enemyAttack {
  0% { transform: translateX(0) scale(1); }
  45% { transform: translateX(-45px) scale(1.12) rotate(-4deg); }
  100% { transform: translateX(0) scale(1); }
}

/* Hit Hurt Reaction */
.fighter-hit {
  animation: takeDamage 0.28s ease-out forwards;
  filter: brightness(2.2) drop-shadow(0 0 18px #ff2a6d) !important;
}

@keyframes takeDamage {
  0% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-15px) rotate(-8deg); }
  60% { transform: translateX(8px) rotate(4deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Slash FX */
.slash-fx {
  position: absolute;
  top: 25%;
  width: 140%;
  height: 60%;
  pointer-events-none;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 25;
}

.player-slash {
  right: -50%;
  background: radial-gradient(ellipse at center, rgba(5,255,161,0.9) 0%, rgba(0,240,255,0.6) 50%, transparent 80%);
  clip-path: polygon(0 40%, 100% 0, 80% 100%, 10% 80%);
  animation: slashBurst 0.25s ease-out forwards;
}

.enemy-slash {
  left: -50%;
  background: radial-gradient(ellipse at center, rgba(255,42,109,0.9) 0%, rgba(255,154,0,0.6) 50%, transparent 80%);
  clip-path: polygon(100% 40%, 0 0, 20% 100%, 90% 80%);
  animation: slashBurst 0.25s ease-out forwards;
}

@keyframes slashBurst {
  0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(10deg); }
  100% { opacity: 0; transform: scale(1.4) rotate(25deg); }
}

/* Floating Shout Word Effect */
.shout-badge {
  animation: shoutFloat 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  font-family: 'Changa', sans-serif;
  text-shadow: 0 0 15px currentColor;
}

@keyframes shoutFloat {
  0% { opacity: 0; transform: translateY(20px) scale(0.6) rotate(-6deg); }
  30% { opacity: 1; transform: translateY(-10px) scale(1.3) rotate(0deg); }
  75% { opacity: 1; transform: translateY(-30px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.9); }
}

/* Screen Shake */
.shake-screen {
  animation: screenRumble 0.25s ease-in-out;
}

@keyframes screenRumble {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 3px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 2px); }
}

.animate-scale-up {
  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes scaleUp {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}