/* ==========================================================
 *  theme.css — Once Human Wiki
 *  3套游戏背景图系统 + 亮/暗双模式
 * ========================================================== */

/* 导入主题色变量（与项目根 theme-color.css 同步） */
:root {
  --nav-theme:       185 60% 42%;
  --nav-theme-light: 185 60% 52%;
  --color-accent-gold: 32 85% 52%;
  --cta-mask-center: hsl(220 30% 6% / .78);
  --color-bg:          220 30% 10%;
  --color-surface:     220 22% 14%;
  --color-surface-2:   220 20% 17%;
  --color-border:      220 15% 22%;
  --color-text:        210 40% 96%;
  --color-text-muted:  220 15% 70%;
}
:root.dark {
  --nav-theme:         185 60% 42%;
  --nav-theme-light:   185 60% 52%;
  --color-accent-gold: 32 85% 52%;
  --cta-mask-center:   hsl(220 30% 4% / .85);
  --color-bg:          220 35% 6%;
  --color-surface:     220 28% 9%;
  --color-surface-2:   220 25% 12%;
  --color-border:      220 18% 18%;
  --color-text:        210 40% 96%;
  --color-text-muted:  220 15% 65%;
}

/* ==========================================================
 *  系统1: .hero-game-bg（首页 Hero）
 *  ::before 游戏背景图 + ::after 90°线性渐变遮罩 + 右下radial高光
 * ========================================================== */
.hero-game-bg {
  position: relative;
  overflow: hidden;
}
.hero-game-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/hero-main.jpg");
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.hero-game-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, hsl(var(--color-bg) / .92) 0%, hsl(var(--color-bg) / .70) 50%, hsl(var(--color-bg) / .30) 100%),
    radial-gradient(ellipse at 85% 60%, hsl(var(--color-accent-gold) / .15) 0%, transparent 60%);
  z-index: -1;
}

/* ==========================================================
 *  系统2: .page-hero-bg + 8个 modifier class（内页页首）
 * ========================================================== */
.page-hero-bg {
  position: relative;
  overflow: hidden;
}
.page-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, hsl(var(--color-bg) / .88) 0%, hsl(var(--color-bg) / .65) 60%, hsl(var(--color-bg) / .35) 100%),
    radial-gradient(ellipse at 70% 50%, hsl(var(--nav-theme) / .12) 0%, transparent 55%);
  z-index: -1;
}

/* 8个内页 modifier — fallback链：具体图 → hero-main → 颜色兜底 */
.page-hero-bg.page-beginner::before {
  background-image: url("/images/beginner.jpg"), url("/images/hero-main.jpg");
  background-color: hsl(var(--color-bg));
}
.page-hero-bg.page-deviants::before {
  background-image: url("/images/deviants.jpg"), url("/images/hero-main.jpg");
  background-color: hsl(var(--color-bg));
}
.page-hero-bg.page-bosses::before {
  background-image: url("/images/bosses.jpg"), url("/images/hero-main.jpg");
  background-color: hsl(var(--color-bg));
}
.page-hero-bg.page-progression::before {
  background-image: url("/images/progression.jpg"), url("/images/hero-main.jpg");
  background-color: hsl(var(--color-bg));
}
.page-hero-bg.page-base-building::before {
  background-image: url("/images/base-building.jpg"), url("/images/hero-main.jpg");
  background-color: hsl(var(--color-bg));
}
.page-hero-bg.page-resources::before {
  background-image: url("/images/resources.jpg"), url("/images/hero-main.jpg");
  background-color: hsl(var(--color-bg));
}
.page-hero-bg.page-weapons::before {
  background-image: url("/images/weapons.jpg"), url("/images/hero-main.jpg");
  background-color: hsl(var(--color-bg));
}
.page-hero-bg.page-dedicated-server::before {
  background-image: url("/images/dedicated-server.jpg"), url("/images/hero-main.jpg");
  background-color: hsl(var(--color-bg));
}
.page-hero-bg.page-tiers::before {
  background-image: url("/images/tiers.jpg"), url("/images/hero-main.jpg");
  background-color: hsl(var(--color-bg));
}

/* ==========================================================
 *  系统3: .cta-game-bg（首页+内页结尾CTA卡）
 *  ::after radial-gradient 居中椭圆遮罩（文字居中场景）
 * ========================================================== */
.cta-game-bg {
  position: relative;
  overflow: hidden;
}
.cta-game-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/hero-main.jpg");
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.cta-game-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, var(--cta-mask-center) 0%, hsl(var(--color-bg) / .92) 70%);
  z-index: -1;
}
.cta-game-bg > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================
 *  通用组件样式
 * ========================================================== */

/* 金框边框 */
.gold-border {
  border: 1px solid hsl(var(--color-accent-gold) / .25);
}
.gold-border:hover {
  border-color: hsl(var(--color-accent-gold) / .5);
}

/* 发光阴影 */
.shadow-gold {
  box-shadow: 0 0 0 1px hsl(var(--color-accent-gold) / .4), 0 10px 40px -10px hsl(var(--color-accent-gold) / .35);
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--color-bg));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--color-border));
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--nav-theme) / .6);
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
th, td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid hsl(var(--color-border));
}
th {
  background: hsl(var(--color-surface-2));
  font-weight: 600;
  color: hsl(var(--nav-theme-light));
}
tr:hover {
  background: hsl(var(--color-surface) / .5);
}

/* details/summary FAQ */
details summary::-webkit-details-marker {
  display: none;
}
details[open] summary span:last-child {
  transform: rotate(45deg);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .hero-game-bg::after {
    background:
      linear-gradient(180deg, hsl(var(--color-bg) / .85) 0%, hsl(var(--color-bg) / .60) 100%),
      radial-gradient(ellipse at 50% 80%, hsl(var(--color-accent-gold) / .12) 0%, transparent 60%);
  }
}