/* Charge Gaming - Custom Styles */
:root {
  --neon-cyan: #00f0ff;
  --neon-purple: #b026ff;
  --neon-pink: #ff00aa;
  --dark-bg: #0a0a0f;
  --card-bg: #12121a;
  --text-primary: #f0f0f5;
  --text-muted: #a0a0b0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--dark-bg);
  color: var(--text-primary);
  min-height: 100vh;
}

/* Neon glow utilities */
.glow-cyan {
  text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px rgba(0, 240, 255, 0.5);
}

.glow-purple {
  text-shadow: 0 0 10px var(--neon-purple), 0 0 20px rgba(176, 38, 255, 0.5);
}

.border-neon {
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
}

.btn-neon {
  background: linear-gradient(135deg, #00c4d4, #7b1fa2);
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.btn-neon:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.6), 0 0 60px rgba(176, 38, 255, 0.3);
}

.btn-outline-neon {
  border: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  transition: all 0.3s ease;
}

.btn-outline-neon:hover {
  background: rgba(0, 240, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

/* Cards */
.game-card {
  background: var(--card-bg);
  border: 1px solid rgba(0, 240, 255, 0.15);
  transition: all 0.3s ease;
}

.game-card:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.2);
  transform: translateY(-4px);
}

/* Hero */
.hero-section {
  background: linear-gradient(135deg, rgba(10, 10, 15, 0.85), rgba(20, 10, 30, 0.9)), url('../images/hero.jpg');
  background-size: cover;
  background-position: center;
  min-height: 70vh;
}

/* Navigation */
.nav-link {
  position: relative;
  transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
  color: var(--neon-cyan);
}

.nav-link.active::after,
.nav-link:hover::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
}

/* Mobile menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}

/* Schedule table */
.schedule-row:hover {
  background: rgba(0, 240, 255, 0.05);
}

/* Leaderboard */
.rank-1 { color: #ffd700; }
.rank-2 { color: #c0c0c0; }
.rank-3 { color: #cd7f32; }

/* Form inputs */
.form-input {
  background: #1a1a24;
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

/* Animations */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 240, 255, 0.4); }
  50% { box-shadow: 0 0 30px rgba(0, 240, 255, 0.7); }
}

.live-badge {
  animation: pulse-glow 2s infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.float-anim {
  animation: float 4s ease-in-out infinite;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0f;
}
::-webkit-scrollbar-thumb {
  background: #2a2a3a;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neon-cyan);
}