@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --black: #0a0a0a;
  --anthracite: #1a1a1a;
  --neon-green: #00ff88;
  --gold: #ffd700;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Custom Tailwind config via arbitrary values */
.bg-anthracite { background-color: var(--anthracite); }
.border-anthracite { border-color: rgba(42, 42, 42, 0.8); }
.text-neon-green { color: var(--neon-green); }
.bg-neon-green { background-color: var(--neon-green); }
.shadow-neon-green\/10 { box-shadow: 0 25px 50px -12px rgba(0, 255, 136, 0.1); }
.shadow-neon-green\/20 { box-shadow: 0 25px 50px -12px rgba(0, 255, 136, 0.2); }
.shadow-neon-green\/50 { box-shadow: 0 25px 50px -12px rgba(0, 255, 136, 0.5); }
.hover\:bg-neon-green:hover { background-color: var(--neon-green); }
.bg-neon-green\/30 { background-color: rgba(0, 255, 136, 0.3); }
.bg-neon-green\/90 { background-color: rgba(0, 255, 136, 0.9); }

/* Pulse animation for Play button */
@keyframes ping-slow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.1;
    transform: scale(1.15);
  }
}

.animate-ping-slow {
  animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Modal entrance animation */
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-modal-in {
  animation: modal-in 0.3s ease-out;
}

/* Match card hover */
.match-card {
  transition: all 0.2s ease;
}
.match-card:hover {
  background-color: rgba(26, 26, 26, 0.8);
  border-color: rgba(0, 255, 136, 0.3);
}

/* Fix modal display */
#modal {
  display: none;
}
#modal.active {
  display: flex !important;
}