/* Vegas Neon Carnival Custom Styles */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600;700&display=swap");

:root {
  --neon-pink: #ff0080;
  --neon-purple: #8000ff;
  --neon-cyan: #00ffff;
  --neon-gold: #ffd700;
  --neon-green: #00ff41;
  --midnight: #0a0a0f;
  --deep-purple: #1a0033;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

body, html {
    overflow: auto; /* Ensure scrolling is enabled */
}

/* Neon glow keyframes */
@keyframes neonPulse {
  0%,
  100% {
    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor, 0 0 20px var(--neon-pink);
    filter: brightness(1);
  }
  50% {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px var(--neon-pink);
    filter: brightness(1.2);
  }
}

@keyframes neonFlicker {
  0%,
  100% {
    opacity: 1;
  }
  2% {
    opacity: 0.8;
  }
  4% {
    opacity: 1;
  }
  6% {
    opacity: 0.9;
  }
  8% {
    opacity: 1;
  }
  10% {
    opacity: 0.85;
  }
  12% {
    opacity: 1;
  }
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes floatDice {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(90deg);
  }
  50% {
    transform: translateY(-5px) rotate(180deg);
  }
  75% {
    transform: translateY(-15px) rotate(270deg);
  }
}

@keyframes spotlightSweep {
  0% {
    transform: rotate(-45deg) translateX(-200px);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: rotate(45deg) translateX(200px);
    opacity: 0;
  }
}

@keyframes radialGlow {
  0%,
  100% {
    box-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-cyan), 0 0 60px var(--neon-cyan);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 30px var(--neon-pink), 0 0 60px var(--neon-pink), 0 0 90px var(--neon-pink);
    transform: scale(1.05);
  }
}

/* Base neon text styles */
.neon-text {
  font-family: "Orbitron", monospace;
  font-weight: 700;
  color: var(--neon-cyan);
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
  animation: neonPulse 2s ease-in-out infinite;
}

.neon-pink {
  color: var(--neon-pink);
  text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 15px var(--neon-pink);
}

.neon-gold {
  color: var(--neon-gold);
  text-shadow: 0 0 5px var(--neon-gold), 0 0 10px var(--neon-gold), 0 0 15px var(--neon-gold);
}

.neon-flicker {
  animation: neonFlicker 3s linear infinite;
}

/* Neon borders and boxes */
.neon-border {
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan), inset 0 0 10px rgba(0, 255, 255, 0.1);
  background: rgba(0, 255, 255, 0.05);
}

.neon-border-pink {
  border: 2px solid var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink), inset 0 0 10px rgba(255, 0, 128, 0.1);
  background: rgba(255, 0, 128, 0.05);
}

.neon-border-gold {
  border: 2px solid var(--neon-gold);
  box-shadow: 0 0 10px var(--neon-gold), inset 0 0 10px rgba(255, 215, 0, 0.1);
  background: rgba(255, 215, 0, 0.05);
}

/* Bonus badge with radial glow */
.bonus-badge {
  animation: radialGlow 3s ease-in-out infinite;
  background: linear-gradient(135deg, rgba(255, 0, 128, 0.2), rgba(128, 0, 255, 0.2));
  backdrop-filter: blur(10px);
}

/* Marquee animation */
.marquee {
  animation: marqueeScroll 20s linear infinite;
}

/* Floating elements */
.float-dice {
  animation: floatDice 4s ease-in-out infinite;
}

/* Spotlight effect */
.spotlight {
  position: absolute;
  width: 100px;
  height: 300px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
  animation: spotlightSweep 8s linear infinite;
  pointer-events: none;
}

/* Grid overlay */
.cyber-grid {
  background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* CTA Button styles */
.cta-primary {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  border: 2px solid var(--neon-pink);
  box-shadow: 0 0 20px var(--neon-pink), 0 4px 15px rgba(255, 0, 128, 0.3);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  font-family: "Orbitron", monospace;
  font-weight: 700;
}

.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px var(--neon-pink), 0 6px 20px rgba(255, 0, 128, 0.4);
  filter: brightness(1.1);
}

.cta-secondary {
  background: transparent;
  border: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 15px var(--neon-cyan);
  text-shadow: 0 0 5px var(--neon-cyan);
  transition: all 0.3s ease;
  font-family: "Orbitron", monospace;
  font-weight: 600;
}

.cta-secondary:hover {
  background: rgba(0, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 0 25px var(--neon-cyan);
}

/* Game card hover effects */
.game-card {
  transition: all 0.3s ease;
  background: rgba(26, 0, 51, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.game-card:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--neon-pink);
  box-shadow: 0 10px 30px rgba(255, 0, 128, 0.3);
}

/* Mobile burger menu */
.burger-line {
  width: 25px;
  height: 3px;
  background: var(--neon-cyan);
  margin: 3px 0;
  transition: 0.3s;
  box-shadow: 0 0 5px var(--neon-cyan);
}

.burger-active .burger-line:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.burger-active .burger-line:nth-child(2) {
  opacity: 0;
}

.burger-active .burger-line:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Prose styling for readability */
.prose {
  font-family: "Exo 2", sans-serif;
  line-height: 1.7;
  color: #e0e0e0;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.prose h1 {
  font-family: "Orbitron", monospace;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--neon-pink);
  text-shadow: 0 0 15px var(--neon-pink);
  margin-top: 0;
  margin-bottom: 2rem;
  text-align: center;
  line-height: 1.2;
}

.prose h2 {
  font-family: "Orbitron", monospace;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan);
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid rgba(0, 255, 255, 0.3);
  padding-bottom: 0.5rem;
}

.prose h3 {
  font-family: "Orbitron", monospace;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--neon-gold);
  text-shadow: 0 0 8px var(--neon-gold);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose p {
  margin-bottom: 1.5rem;
  color: #c0c0c0;
  font-size: 1.1rem;
  text-align: justify;
}

.prose ul,
.prose ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.prose li {
  margin-bottom: 0.8rem;
  color: #c0c0c0;
  font-size: 1rem;
}

.prose ul li::marker {
  color: var(--neon-cyan);
}

.prose ol li::marker {
  color: var(--neon-pink);
  font-weight: bold;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background: rgba(26, 0, 51, 0.3);
  border-radius: 8px;
  overflow: hidden;
  overflow-x: auto;
  display: block;
  white-space: nowrap;
}

.prose table tbody {
  display: table;
  width: 100%;
}

.prose th,
.prose td {
  border: 1px solid rgba(0, 255, 255, 0.3);
  padding: 1rem;
  text-align: left;
  font-size: 0.95rem;
}

.prose th {
  background: rgba(0, 255, 255, 0.15);
  color: var(--neon-cyan);
  font-weight: 700;
  text-shadow: 0 0 5px var(--neon-cyan);
}

.prose td {
  background: rgba(26, 0, 51, 0.1);
}

.prose blockquote {
  border-left: 4px solid var(--neon-pink);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: #d0d0d0;
  background: rgba(255, 0, 128, 0.05);
  padding: 1rem 1.5rem;
  border-radius: 0 8px 8px 0;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2rem 0;
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2);
}

.prose strong {
  color: var(--neon-gold);
  font-weight: 700;
  text-shadow: 0 0 5px var(--neon-gold);
}

.prose em {
  color: var(--neon-pink);
  font-style: italic;
}

/* Responsive prose adjustments */
@media (max-width: 768px) {
  .prose h1 {
    font-size: 2rem;
  }

  .prose h2 {
    font-size: 1.5rem;
  }

  .prose h3 {
    font-size: 1.2rem;
  }

  .prose p {
    font-size: 1rem;
  }

  .prose table {
    font-size: 0.85rem;
  }

  .prose th,
  .prose td {
    padding: 0.75rem;
  }
}

/* Responsive utilities */
@media (max-width: 1023px) {
  .mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

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

/* Background effects */
.midnight-bg {
  background: linear-gradient(135deg, var(--midnight) 0%, var(--deep-purple) 100%);
  position: relative;
  overflow: hidden;
}

.midnight-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255, 0, 128, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(128, 0, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}