:root {  --primary-color: #017439; /* Green */  --secondary-color: #FFFFFF;  --register-color: #C30808;  --login-color: #C30808;  --register-login-font-color: #FFFF00;  /* Neon colors for Header/Marquee - derived from primary/secondary but vibrant */  --neon-primary: #39ff14; /* Electric Green */  --neon-secondary: #ff00ff; /* Magenta */  --neon-accent: #ffff00; /* Bright Yellow */  /* Header offsets - calculated based on assumed heights */  --marquee-height-desktop: 50px;  --header-top-height-desktop: 60px;  --main-nav-height-desktop: 50px;  --header-offset: calc(var(--marquee-height-desktop) + var(--header-top-height-desktop) + var(--main-nav-height-desktop)); /* Desktop */}@media (max-width: 768px) {  :root {    --marquee-height-mobile: 30px;    --header-top-height-mobile: 50px;    --mobile-nav-buttons-height: 60px; /* Approx height with padding */    --header-offset: calc(var(--marquee-height-mobile) + var(--header-top-height-mobile) + var(--mobile-nav-buttons-height)); /* Mobile */  }  .page-content img {    max-width: 100% !important;    height: auto !important;    display: block;  }  .page-content {    overflow-x: hidden;    max-width: 100%;  }  body {    overflow-x: hidden;  }}/* Base Styles */body {  margin: 0;  font-family: Arial, sans-serif;  color: #f0f0f0;  background-color: #0a0a0a; /* Dark background for overall page */  padding-top: var(--header-offset); /* Apply offset to body */}/* Utility classes for neon animations */@keyframes rainbow-border {  0% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; }  16.6% { border-color: #ff8000; box-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000; }  33.3% { border-color: #ffff00; box-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00; }  50% { border-color: #00ff00; box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; }  66.6% { border-color: #0000ff; box-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff; }  83.3% { border-color: #8000ff; box-shadow: 0 0 10px #8000ff, 0 0 20px #8000ff; }  100% { border-color: #ff0000; box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; }}@keyframes hue-spin {  0% { filter: hue-rotate(0deg); box-shadow: 0 0 10px var(--neon-primary), 0 0 20px var(--neon-primary); }  100% { filter: hue-rotate(360deg); box-shadow: 0 0 10px var(--neon-primary), 0 0 20px var(--neon-primary); }}@keyframes alternate-colors {  0% { border-color: var(--neon-primary); box-shadow: 0 0 10px var(--neon-primary), 0 0 20px var(--neon-primary); }  100% { border-color: var(--neon-secondary); box-shadow: 0 0 10px var(--neon-secondary), 0 0 20px var(--neon-secondary); }}@keyframes gradient-flow {  0% { background-position: 0% 50%; box-shadow: 0 0 10px #ff0000, 0 0 20px #ff8000; }  50% { background-position: 100% 50%; box-shadow: 0 0 10px #00ffff, 0 0 20px #0000ff; }  100% { background-position: 0% 50%; box-shadow: 0 0 10px #ff0000, 0 0 20px #ff8000; }}@keyframes random-glow {  0% { border-color: #ff00ff; box-shadow: 0 0 20px #ff00ff; }  20% { border-color: #00ffff; box-shadow: 0 0 20px #00ffff; }  40% { border-color: #ffff00; box-shadow: 0 0 20px #ffff00; }  60% { border-color: #00ff00; box-shadow: 0 0 20px #00ff00; }  80% { border-color: #ff0000; box-shadow: 0 0 20px #ff0000; }  100% { border-color: #ff00ff; box-shadow: 0 0 20px #ff00ff; }}@keyframes theme-colors {  0%, 100% {    border-color: var(--neon-primary);    box-shadow:       0 0 10px var(--neon-primary),      0 0 20px var(--neon-primary);  }  33% {    border-color: var(--neon-secondary);    box-shadow:       0 0 10px var(--neon-secondary),      0 0 20px var(--neon-secondary);  }  66% {    border-color: var(--neon-accent);    box-shadow:       0 0 10px var(--neon-accent),      0 0 20px var(--neon-accent);  }}@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; }  50% { text-shadow: 0 0 5px var(--neon-secondary), 0 0 10px var(--neon-secondary), 0 0 15px var(--neon-secondary); color: #ffffff; }  100% { text-shadow: 0 0 5px var(--neon-accent), 0 0 10px var(--neon-accent), 0 0 15px var(--neon-accent); color: #ffffff; }}/* Marquee Section Styles */.marquee-section {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: var(--marquee-height-desktop);  background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e);  color: #ffffff;  overflow: hidden;  border-bottom: 2px solid;  animation: theme-colors 4s ease-in-out infinite;  box-shadow:     0 0 10px var(--neon-primary),    0 0 20px var(--neon-primary),    0 0 30px var(--neon-primary),    inset 0 0 20px rgba(57, 255, 20, 0.1); /* Using rgba for inset */  z-index: 1001;  display: flex;  align-items: center;}.marquee-container {  width: 100%;  max-width: 100%;  margin: 0 auto;  overflow: hidden;  display: flex;  align-items: center;  gap: 15px;  padding: 0px 20px;}.marquee-icon {  flex-shrink: 0;  display: flex;  align-items: center;  justify-content: center;  width: 40px;  height: 40px;  z-index: 2;  position: relative;}.marquee-icon-emoji {  font-size: 24px;  display: inline-block;  animation: marquee-pulse 2s ease-in-out infinite, 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);  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));}@keyframes marquee-pulse {  0%, 100% { transform: scale(1); opacity: 1; }  50% { transform: scale(1.15); opacity: 0.9; }}.marquee-wrapper {  flex: 1;  overflow: hidden;  position: relative;  height: 100%; /* Ensure wrapper takes full height */  display: flex;  align-items: center;}.marquee-content {  display: inline-flex;  align-items: center;  white-space: nowrap;  animation: marquee-scroll 30s linear infinite;  gap: 30px;  height: 100%; /* Ensure content takes full height */}.marquee-text {  font-size: 16px;  font-weight: 600;  color: #ffffff;  text-decoration: none;  text-shadow:     0 0 5px var(--neon-primary),    0 0 10px var(--neon-primary),    0 0 15px var(--neon-primary);  line-height: 1.5;  display: inline-block;  vertical-align: middle;  animation: text-glow-flow 3s ease-in-out infinite alternate;  cursor: pointer;  transition: all 0.3s ease;}.marquee-text:hover {  text-shadow:     0 0 10px var(--neon-primary),    0 0 20px var(--neon-primary),    0 0 30px var(--neon-primary),    0 0 40px var(--neon-primary);  transform: scale(1.05);  color: #ffffff;}.marquee-separator {  font-size: 16px;  color: rgba(255, 255, 255, 0.6);  margin: 0 15px;  text-shadow:     0 0 3px var(--neon-primary),    0 0 6px var(--neon-primary);}@keyframes marquee-scroll {  0% { transform: translateX(0); }  100% { transform: translateX(-50%); }}/* Header Styles */.site-header {  position: fixed;  top: var(--marquee-height-desktop); /* Position below marquee */  left: 0;  width: 100%;  z-index: 1000;  background: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e);  border-bottom: 2px solid;  animation: theme-colors 4s ease-in-out infinite;  box-shadow:     0 0 10px var(--neon-primary),    0 0 20px var(--neon-primary),    0 0 30px var(--neon-primary);  color: var(--secondary-color);}.site-header .header-top {  height: var(--header-top-height-desktop);  display: flex;  align-items: center;  border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.site-header .header-container {  max-width: 1200px;  margin: 0 auto;  width: 100%;  display: flex;  justify-content: space-between;  align-items: center;  padding: 0 20px;}/* LOGO Styles (NO NEON) */.site-header .logo {  font-size: 28px;  font-weight: bold;  color: var(--secondary-color); /* White for contrast */  text-decoration: none;  display: block;  padding: 5px 0;  /* NO NEON EFFECTS for LOGO */  text-shadow: none;  box-shadow: none;  filter: none;  animation: none;}.site-header .logo img {  display: block;  max-width: 100%;  height: auto;  max-height: 50px;  /* NO NEON EFFECTS for LOGO */  filter: none;  box-shadow: none;  animation: none;}/* Desktop Navigation Buttons */.desktop-nav-buttons {  display: flex;  gap: 10px;}/* Mobile Navigation Buttons (hidden on desktop) */.mobile-nav-buttons {  display: none;}/* Main Navigation (Desktop) */.main-nav {  height: var(--main-nav-height-desktop);  display: flex;  align-items: center;  justify-content: center;  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); /* Slightly different dark background */  border-top: 1px solid rgba(255, 255, 255, 0.1);  border-bottom: 2px solid;  animation: alternate-colors 4s ease-in-out infinite; /* Different neon animation for distinction */  box-shadow:     0 0 8px var(--neon-secondary),    0 0 15px var(--neon-secondary),    0 0 25px var(--neon-secondary);}.main-nav .nav-container {  max-width: 1200px;  margin: 0 auto;  width: 100%;  display: flex;  justify-content: center;  align-items: center;  padding: 0 20px;  gap: 25px;}.main-nav .nav-link {  color: var(--secondary-color); /* White for contrast */  text-decoration: none;  font-size: 16px;  font-weight: 500;  padding: 10px 0;  transition: color 0.3s ease, text-shadow 0.3s ease;  /* No neon for nav links, but a subtle glow on hover */  text-shadow: none;}.main-nav .nav-link:hover {  color: var(--neon-accent); /* Highlight with a neon accent color */  text-shadow: 0 0 5px var(--neon-accent), 0 0 10px var(--neon-accent);}/* Hamburger Menu (hidden on desktop) */.hamburger-menu {  display: none;  background: transparent;  border: none;  cursor: pointer;  padding: 10px;  position: relative;  z-index: 1002;}.hamburger-menu span {  display: block;  width: 25px;  height: 3px;  background-color: var(--neon-primary);  margin-bottom: 5px;  position: relative;  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;  box-shadow: 0 0 5px var(--neon-primary), 0 0 10px var(--neon-primary);}.hamburger-menu span:last-child {  margin-bottom: 0;}.hamburger-menu.active span:nth-child(1) {  transform: translateY(8px) rotate(45deg);}
/* Payment Methods 图标容器样式 */
.payment-icons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 5px;
}

.payment-icons img,
.payment-icon {
  max-height: 50px;
  height: auto;
  width: auto;
  display: block;
}

/* Game Providers 图标容器样式 */
.game-providers-icons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.game-providers-icons img,
.game-provider-icon {
  max-height: 50px;
  height: auto;
  width: auto;
  display: block;
}

/* Social Media 图标容器样式 */
.social-media-icons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.social-media-icons img,
.social-media-icon {
  max-height: 50px;
  height: auto;
  width: auto;
  display: block;
}
/* 移动端内容区防溢出（系统追加，请勿删除） */
@media (max-width: 768px) {
  .page-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  .page-content {
    overflow-x: hidden;
    max-width: 100%;
  }
  body {
    overflow-x: hidden;
  }
}