/* styles.css */

/* Global variables for colors and fonts */
:root {
  --neon-blue: #00d4ff;
  --neon-purple: #8b5cf6;
  --gaming-orange: #ff6b35;
  --gaming-green: #00ff88;
  --dark-bg: #0a0a0a;
  --card-bg: #1a1a1a;

  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body {
  font-family: var(--font-sans);
  background-color: var(--dark-bg);
  color: var(--neon-blue);
}

.card {
  background-color: var(--card-bg);
  padding: 1rem;
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  color: var(--neon-purple);
}

.btn-orange { background-color: var(--gaming-orange); color:#fff; padding:.5rem 1rem; border-radius:.25rem; }
.text-green { color: var(--gaming-green); }

.gradient-text {
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gaming-gradient {
  background: linear-gradient(135deg, var(--gaming-orange), var(--neon-blue), var(--neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glow-effect { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
.card-hover { transition: all .3s ease; }
.card-hover:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2); }
.floating { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-20px) } }

.pulse-glow { animation: pulse-glow 2s ease-in-out infinite alternate; }
@keyframes pulse-glow { from { box-shadow: 0 0 20px rgba(255,107,53,.3) } to { box-shadow: 0 0 30px rgba(255,107,53,.6) } }

.accordion-content { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.accordion-content.active { max-height: 200px; }

.modal { display: none; }
.modal.active { display: flex; }

.star-rating { color: #ffd700; }

.typing-animation::after { content: '|'; color: var(--neon-blue); animation: blink 1s infinite; }
@keyframes blink { 0%,50% { opacity: 1 } 51%,100% { opacity: 0 } }