/* Neon glow effects */

/* Neon text - warm (orange/red) */
.neon-warm {
  color: var(--neon-warm);
  text-shadow:
    0 0 4px var(--neon-warm),
    0 0 8px var(--neon-warm),
    0 0 16px var(--neon-warm),
    0 0 32px rgba(255, 107, 53, 0.5);
}

/* Neon text - cool (blue/teal) */
.neon-cool {
  color: var(--neon-blue);
  text-shadow:
    0 0 4px var(--neon-blue),
    0 0 8px var(--neon-blue),
    0 0 16px var(--neon-blue),
    0 0 32px rgba(78, 205, 196, 0.5);
}

/* Subtle flicker animation */
@keyframes neonFlicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

.neon-flicker {
  animation: neonFlicker 4s ease-in-out infinite;
}

/* Neon border glow */
.neon-border-warm {
  box-shadow:
    0 0 4px var(--neon-warm),
    0 0 8px var(--neon-warm),
    inset 0 0 4px rgba(255, 107, 53, 0.2);
  border-color: var(--neon-warm);
}

.neon-border-cool {
  box-shadow:
    0 0 4px var(--neon-blue),
    0 0 8px var(--neon-blue),
    inset 0 0 4px rgba(78, 205, 196, 0.2);
  border-color: var(--neon-blue);
}

/* VS divider neon styling */
.vs-divider .vs-text {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: var(--bg-dark);
  border: 2px solid;
  border-radius: 4px;
}

.vs-divider .line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-warm), transparent);
}

.vs-divider-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Neon glow on hover */
.neon-hover:hover {
  filter: brightness(1.2);
  transition: filter 0.2s ease;
}

/* Pulsing neon effect */
@keyframes neonPulse {
  0%, 100% {
    text-shadow:
      0 0 4px var(--neon-warm),
      0 0 8px var(--neon-warm),
      0 0 16px var(--neon-warm);
  }
  50% {
    text-shadow:
      0 0 8px var(--neon-warm),
      0 0 16px var(--neon-warm),
      0 0 32px var(--neon-warm),
      0 0 48px rgba(255, 107, 53, 0.5);
  }
}

.neon-pulse {
  animation: neonPulse 2s ease-in-out infinite;
}

/* Winner announcement glow */
.winner-glow {
  animation: winnerGlow 0.5s ease-out forwards;
}

@keyframes winnerGlow {
  0% {
    text-shadow:
      0 0 4px var(--gold),
      0 0 8px var(--gold);
  }
  50% {
    text-shadow:
      0 0 20px var(--gold),
      0 0 40px var(--gold),
      0 0 60px var(--gold),
      0 0 80px rgba(212, 168, 83, 0.5);
  }
  100% {
    text-shadow:
      0 0 8px var(--gold),
      0 0 16px var(--gold),
      0 0 24px rgba(212, 168, 83, 0.5);
  }
}