@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Rajdhani:wght@500;700&display=swap');

:root {
  --color-bg-main: #0D0D0D;
  --color-bg-card: #1E1E2F;
  --color-primary: #FF3B3B;
  --color-secondary: #3985FF;
  --color-accent: #FFD447;
  --color-success: #2ECC71;
  --color-danger: #E67E22;
  --color-text-main: #F0F0F0;
  --color-text-secondary: #A5A5A5;
}

body {
  background: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: 'Orbitron', 'Rajdhani', Arial, sans-serif;
  min-height: 100vh;
  margin: 0;
  /* 可加噪点背景图或渐变 */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', 'Rajdhani', Arial, sans-serif;
  color: var(--color-text-main);
  letter-spacing: 1px;
}

p, li, td, th {
  color: var(--color-text-main);
  font-family: 'Rajdhani', Arial, sans-serif;
}

.card, .feature-box, .leaderboard-box, .faq-box, .news-box, .privacy-box, .terms-box, .about-hero-text, .about-hero-image, .community-hero-text, .community-hero-image, .leaderboard-hero-text, .leaderboard-hero-image, .privacy-hero-text, .privacy-hero-image, .terms-hero-text, .terms-hero-image {
  background: var(--color-bg-card);
  border-radius: 12px;
  box-shadow: 0 2px 16px #0008;
  padding: 2rem;
}

.cta-btn, .btn-primary {
  background: var(--color-primary);
  color: var(--color-text-main);
  border: none;
  border-radius: 8px;
  font-family: 'Orbitron', 'Rajdhani', Arial, sans-serif;
  font-weight: 700;
  padding: 0.75em 2em;
  box-shadow: 0 0 10px var(--color-primary);
  transition: box-shadow 0.2s, filter 0.2s;
  cursor: pointer;
}
.cta-btn:hover, .btn-primary:hover {
  box-shadow: 0 0 16px var(--color-primary), 0 0 32px var(--color-primary);
  filter: brightness(1.1);
}

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-text-main);
  border-radius: 8px;
  font-family: 'Orbitron', 'Rajdhani', Arial, sans-serif;
  font-weight: 700;
  padding: 0.75em 2em;
  box-shadow: 0 0 10px var(--color-secondary);
  transition: box-shadow 0.2s, filter 0.2s;
  cursor: pointer;
}
.btn-secondary:hover {
  box-shadow: 0 0 16px var(--color-secondary), 0 0 32px var(--color-secondary);
  filter: brightness(1.1);
}

.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-secondary { color: var(--color-text-secondary); }

.leaderboard-table .winner { color: var(--color-success); font-weight: bold; }
.leaderboard-table .loser { color: var(--color-danger); font-weight: bold; }

/* 卡片、表格、输入等基础UI */
input, select, textarea {
  background: var(--color-bg-card);
  color: var(--color-text-main);
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
  padding: 0.5em 1em;
  font-family: 'Rajdhani', Arial, sans-serif;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--color-accent);
}

/* 可选：排行榜高亮、战场氛围、噪点背景等细节可后续补充 */ 

/* Hero区红黑渐变+HUD+粒子 */
.hero-animated {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #0D0D0D 60%, #FF3B3B 100%);
}
.hero-bg-gradient {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(120deg, #0D0D0D 60%, #FF3B3B 100%);
  opacity: 0.7;
  z-index: 1;
}
#hero-particles {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
.hero-hud {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 3;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  color: var(--color-text-main);
  padding: 3rem 1rem;
}
.btn-hero {
  font-size: 1.3em;
  margin-top: 2rem;
  background: var(--color-primary);
  color: var(--color-text-main);
  box-shadow: 0 0 16px var(--color-primary);
  transition: box-shadow 0.2s, filter 0.2s, transform 0.2s;
}
.btn-hero:hover {
  box-shadow: 0 0 32px var(--color-primary), 0 0 64px var(--color-primary);
  filter: brightness(1.1);
  transform: scale(1.08);
}

/* 排行榜数字滚动/胜利高亮 */
.leaderboard-animated .winner td {
  color: var(--color-success);
  font-weight: bold;
  text-shadow: 0 0 8px var(--color-success);
}
.leaderboard-animated .loser td {
  color: var(--color-danger);
  font-weight: bold;
  text-shadow: 0 0 8px var(--color-danger);
}
.rolling-number {
  font-variant-numeric: tabular-nums;
  font-family: 'Orbitron', 'Rajdhani', Arial, sans-serif;
  font-size: 1.3em;
  transition: color 0.2s;
}

/* FAQ/社区卡片高亮 */
.faq-box {
  border: 2px solid var(--color-bg-card);
  border-radius: 10px;
  margin-bottom: 1.5em;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  background: var(--color-bg-card);
  padding: 1.5em;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-solved {
  border-color: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
}
.faq-unsolved {
  border-color: var(--color-secondary);
  box-shadow: 0 0 8px var(--color-secondary);
}
.faq-warning {
  border-color: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
}
.faq-status-icon {
  margin-right: 0.5em;
  font-size: 1.2em;
  vertical-align: middle;
} 

/* FAQ卡片统一深灰边框，icon点缀色 */
.faq-card {
  border: 2px solid #23263a;
  background: rgba(30,30,47,0.98);
  color: #F0F0F0;
  margin-bottom: 1.5em;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  padding: 1.5em;
}
.faq-card .faq-status-icon {
  font-size: 1.3em;
  margin-right: 0.5em;
  vertical-align: middle;
}
.faq-solved .faq-status-icon { color: #2ECC71; }
.faq-unsolved .faq-status-icon { color: #3985FF; }
.faq-warning .faq-status-icon { color: #FFD447; }
.faq-card h3 { color: #F0F0F0; font-size: 1.15em; margin-bottom: 0.5em; }
.faq-card p { color: #A5A5A5; }

/* 排行榜分数/主内容用白色，胜利/失败仅在状态icon或小标签上用色 */
.leaderboard-table td, .leaderboard-table th {
  color: #F0F0F0;
}
.leaderboard-table .winner .rolling-number,
.leaderboard-table .winner .status-label { color: #2ECC71; }
.leaderboard-table .loser .rolling-number,
.leaderboard-table .loser .status-label { color: #E67E22; }
.leaderboard-table .rolling-number { font-weight: bold; } 

/* Section和卡片间距优化 */
section, .feature-section, .faq-section, .leaderboard-animated, .cta-banner {
  margin-bottom: 3.5rem;
  margin-top: 2.5rem;
}
.section-divider {
  height: 32px;
  background: none;
}
.feature-card, .faq-card, .leaderboard-table, .cta-banner {
  padding: 2.5em 2em;
  margin-bottom: 2.5em;
  border-radius: 14px;
}

/* 卡片内部段落间距 */
.feature-card p, .faq-card p, .leaderboard-table td, .leaderboard-table th {
  margin-bottom: 1.1em;
  line-height: 1.8;
}
.feature-card h2, .faq-card h3, .cta-banner h2 {
  margin-bottom: 1.2em;
  margin-top: 0.5em;
}

/* 标题与正文间距 */
.hero-slogan {
  margin-bottom: 1.5em;
}
.hero-sub {
  margin-bottom: 2.5em;
}

/* 响应式优化 */
@media (max-width: 900px) {
  .feature-card, .faq-card, .leaderboard-table, .cta-banner {
    padding: 1.5em 0.7em;
    margin-bottom: 1.5em;
  }
  section, .feature-section, .faq-section, .leaderboard-animated, .cta-banner {
    margin-bottom: 2em;
    margin-top: 1.2em;
  }
} 

/* 内容区整体居中+大留白 */
.main-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2vw;
}

section {
  margin: 3.5rem 0 3.5rem 0;
}
.section-divider {
  height: 40px;
  background: linear-gradient(90deg, #0D0D0D 0%, #FF3B3B 100%);
  border: none;
  margin: 2.5rem 0;
}

/* 只保留重点卡片 */
.card, .leaderboard-table, .faq-card, .cta-banner {
  background: rgba(30,30,47,0.97);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  padding: 2.5em 2em;
  margin-bottom: 2.5em;
}

/* 其他内容直接用分区+大留白，不用卡片 */
.feature-section, .about-section, .community-section {
  background: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 3.5em;
}

h2, h3 { margin-bottom: 1.2em; }
p, ul, ol { margin-bottom: 1.1em; line-height: 1.8; }
.btn-hero { margin-top: 2.5em; margin-bottom: 2em; }

@media (max-width: 900px) {
  .main-content { padding: 0 1vw; }
  .card, .leaderboard-table, .faq-card, .cta-banner {
    padding: 1.5em 0.7em;
    margin-bottom: 1.5em;
  }
  section {
    margin-bottom: 2em;
    margin-top: 1.2em;
  }
  .section-divider { height: 24px; margin: 1.2rem 0; }
}