:root {
  --primary-color: #FF0000; /* Website primary color */
  --secondary-color: #000080; /* Website secondary color */
  --neon-primary: var(--primary-color); /* Initial neon primary, will animate */
  --neon-secondary: var(--secondary-color); /* Initial neon secondary, will animate */
  --neon-accent: #FFFF00; /* Initial neon accent, will animate */
  --dark-bg-1: #0a0a0a;
  --dark-bg-2: #1a1a2e;
  --dark-bg-3: #16213e;
  --text-color: #ffffff;
  --link-color: #cccccc;
  --hover-color: #ffcc00;
  --header-top-glow: #FFFF00;
  --main-nav-glow: #FF0000;
}

/* Base Styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  background-color: #000;
  color: var(--text-color);
  line-height: 1.6;
  padding-top: 150px; /* Adjust based on header + mobile-buttons height */
  overflow-x: hidden;
}

.no-scroll {
  overflow: hidden;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--dark-bg-1);
}

.header-top {
  background: linear-gradient(135deg, var(--dark-bg-1), var(--dark-bg-2));
  border-bottom: 2px solid;
  animation: theme-colors-header-top 4s ease-in-out infinite;
  padding: 15px 0;
}

.header-container,
.nav-container,
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.header-container {
  justify-content: space-between;
}

.logo {
  font-family: 'Electrolize', sans-serif; /* A cyberpunk-ish font if available */
  font-size: 2.5em;
  font-weight: bold;
  text-decoration: none;
  color: var(--text-color);
  white-space: nowrap;
  padding: 5px 0;
  animation: text-glow-flow 3s ease-in-out infinite alternate;
  text-shadow:
    0 0 5px var(--neon-primary),
    0 0 10px var(--neon-primary),
    0 0 15px var(--neon-primary);
}

.hamburger-menu {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  position: relative;
  z-index: 1002; /* Above mobile menu overlay */
  animation: theme-colors 4s ease-in-out infinite;
  border-radius: 5px;
  box-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor;
}

.hamburger-menu span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: var(--text-color);
  margin: 6px 0;
  transition: 0.4s;
  box-shadow: 0 0 5px var(--text-color);
}

.hamburger-menu.active span:nth-child(1) {
  transform: translateY(9px) rotate(-45deg);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: translateY(-9px) rotate(45deg);
}

.desktop-nav-buttons {
  display: flex;
  gap: 15px;
}

.btn {
  position: relative;
  padding: 12px 25px;
  color: var(--text-color);
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 2px solid;
  animation: theme-colors 4s ease-in-out infinite;
  text-shadow:
    0 0 5px #ffffff,
    0 0 10px var(--neon-primary);
  white-space: nowrap;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
  background-size: 200% 200%;
}

.btn:hover {
  animation-duration: 2s; /* Speed up glow on hover */
  transform: translateY(-2px);
  background-position: 100% 0;
}

.main-nav {
  background: linear-gradient(135deg, var(--dark-bg-2), var(--dark-bg-3));
  border-top: 2px solid;
  border-bottom: 2px solid;
  animation: theme-colors-main-nav 4s ease-in-out infinite;
  padding: 10px 0;
  display: flex; /* Desktop default */
  justify-content: center;
}

.main-nav .nav-container {
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
}

.nav-link {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 600;
  padding: 5px 0;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--hover-color);
  text-shadow: 0 0 8px var(--hover-color);
}

.mobile-buttons {
  display: none; /* Hidden on desktop */
}

.mobile-menu-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  backdrop-filter: blur(5px);
}

/* Footer Styles */
.site-footer {
  background: linear-gradient(180deg, #111, #000);
  color: #ccc;
  padding-top: 40px;
  font-size: 0.9em;
}

.footer-top {
  padding-bottom: 30px;
  border-bottom: 1px solid #333;
}

.footer-container {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-col {
  flex: 1;
  min-width: 200px;
  margin-bottom: 20px;
}

.footer-about {
  flex: 1.5; /* Give more space to the about section */
  min-width: 250px;
}

.footer-logo {
  font-family: 'Electrolize', sans-serif;
  font-size: 1.8em;
  font-weight: bold;
  color: var(--text-color);
  text-decoration: none;
  margin-bottom: 15px;
  display: block;
}

.footer-description {
  margin-top: 10px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.site-footer h4 {
  color: var(--hover-color);
  font-size: 1.1em;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 5px;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer ul li {
  margin-bottom: 8px;
}

.site-footer ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer ul li a:hover {
  color: var(--hover-color);
}

.payment-methods .payment-icons,
.game-providers-icons,
.social-media-icons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.payment-methods .payment-icons img,
.game-providers-icons img,
.social-media-icons img {
  max-height: 50px;
  height: auto;
  width: auto;
  object-fit: contain;
}

.game-providers-section,
.social-media-section {
  padding: 30px 0;
  border-bottom: 1px solid #333;
}

.footer-bottom {
  padding: 20px 0;
  text-align: center;
}

.copyright {
  margin: 0;
  color: #888;
}

/* Animations for Neon Glow */
@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    box-shadow:
      0 0 10px currentColor,
      0 0 20px currentColor,
      0 0 30px currentColor,
      inset 0 0 15px currentColor;
  }
  20%, 24%, 55% {
    opacity: 0.8;
    box-shadow:
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor,
      inset 0 0 10px currentColor;
  }
}

@keyframes pulse-glow {
  from {
    box-shadow:
      0 0 5px currentColor,
      0 0 10px currentColor;
  }
  to {
    box-shadow:
      0 0 15px currentColor,
      0 0 30px currentColor,
      0 0 45px currentColor;
  }
}

@keyframes led-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

@keyframes text-glow-flow {
  0% {
    text-shadow:
      0 0 5px var(--neon-primary),
      0 0 10px var(--neon-primary),
      0 0 15px var(--neon-primary);
    color: #ffffff;
  }
  33% {
    text-shadow:
      0 0 5px var(--neon-secondary),
      0 0 10px var(--neon-secondary),
      0 0 15px var(--neon-secondary);
    color: #ffffff;
  }
  66% {
    text-shadow:
      0 0 5px var(--neon-accent),
      0 0 10px var(--neon-accent),
      0 0 15px var(--neon-accent);
    color: #ffffff;
  }
  100% {
    text-shadow:
      0 0 5px var(--neon-primary),
      0 0 10px var(--neon-primary),
      0 0 15px var(--neon-primary);
    color: #ffffff;
  }
}

@keyframes theme-colors {
  0%, 100% {
    border-color: var(--neon-primary);
    box-shadow:
      0 0 10px var(--neon-primary),
      0 0 20px var(--neon-primary),
      inset 0 0 10px rgba(255, 0, 255, 0.3);
  }
  33% {
    border-color: var(--neon-secondary);
    box-shadow:
      0 0 10px var(--neon-secondary),
      0 0 20px var(--neon-secondary),
      inset 0 0 10px rgba(0, 255, 255, 0.3);
  }
  66% {
    border-color: var(--neon-accent);
    box-shadow:
      0 0 10px var(--neon-accent),
      0 0 20px var(--neon-accent),
      inset 0 0 10px rgba(255, 255, 0, 0.3);
  }
}

@keyframes theme-colors-header-top {
  0%, 100% {
    border-color: var(--header-top-glow);
    box-shadow:
      0 0 10px var(--header-top-glow),
      0 0 20px var(--header-top-glow),
      inset 0 0 10px rgba(255, 255, 0, 0.3);
  }
  50% {
    border-color: var(--neon-accent);
    box-shadow:
      0 0 10px var(--neon-accent),
      0 0 20px var(--neon-accent),
      inset 0 0 10px rgba(255, 255, 0, 0.3);
  }
}

@keyframes theme-colors-main-nav {
  0%, 100% {
    border-color: var(--main-nav-glow);
    box-shadow:
      0 0 10px var(--main-nav-glow),
      0 0 20px var(--main-nav-glow),
      inset 0 0 10px rgba(255, 0, 0, 0.3);
  }
  50% {
    border-color: var(--neon-primary);
    box-shadow:
      0 0 10px var(--neon-primary),
      0 0 20px var(--neon-primary),
      inset 0 0 10px rgba(255, 0, 0, 0.3);
  }
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  body {
    padding-top: 190px; /* Adjust for mobile header (approx 70px) + mobile buttons (approx 60px) + some buffer */
  }

  .header-top {
    padding: 10px 0;
  }

  .header-container {
    padding: 0 15px;
    width: 100%;
    max-width: none;
    justify-content: space-between;
    position: relative; /* For absolute logo centering */
  }

  .logo {
    font-size: 2em;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .hamburger-menu {
    display: block;
    order: -1; /* Place it to the far left */
    margin-right: auto; /* Push logo to center */
  }

  .desktop-nav-buttons {
    display: none;
  }

  .main-nav {
    display: none; /* Hidden by default on mobile */
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 70%; /* Adjust as needed */
    height: 100vh;
    background: linear-gradient(180deg, var(--dark-bg-3), var(--dark-bg-1));
    padding-top: 100px; /* Space for fixed header content */
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%); /* Slide out from left */
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
    border-right: 2px solid;
    animation: theme-colors-main-nav 4s ease-in-out infinite;
    box-sizing: border-box;
  }

  .main-nav.active {
    display: flex; /* Show when active */
    transform: translateX(0);
  }

  .main-nav .nav-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px;
    gap: 15px;
    width: 100%;
    max-width: none;
  }

  .nav-link {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px 15px;
    background: linear-gradient(135deg, var(--dark-bg-2), var(--dark-bg-3));
    border-bottom: 2px solid;
    animation: theme-colors-header-top 4s ease-in-out infinite; /* Reuse header top animation */
    width: 100%;
    box-sizing: border-box;
    position: sticky; /* Sticky or fixed, depending on exact design. Using sticky here to not add height to header, but for fixed header, this would also need to be fixed and accounted for in padding-top */
    top: 65px; /* Adjust based on header-top height */
    z-index: 990; /* Below main nav overlay */
  }

  .mobile-buttons .btn {
    flex: 1;
    padding: 10px 15px;
    font-size: 0.9em;
  }

  .mobile-menu-overlay.active {
    display: block;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    width: 100%;
    max-width: none;
  }

  .footer-col {
    min-width: unset;
    width: 100%;
    text-align: center;
  }

  .footer-logo {
    margin-bottom: 10px;
  }

  .footer-col ul {
    text-align: center;
  }
}