/* ============================================
   月灵工坊 - 页面样式 (Page Styles)
   首页、列表页、详情页特定样式
   ============================================ */

/* ============ 首页 Hero 区 ============ */
.hero-section {
  /* 由 100vh 降至 72vh：避免核心工具区被完全推出首屏，
     让用户在第一屏底部即可看到"核心工具"标题与卡片上沿，配合滚动箭头形成引导 */
  min-height: calc(72vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4xl) 0;
  position: relative;
  overflow: hidden;
}

.hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-badge {
  margin-bottom: var(--spacing-lg);
}

.hero-title {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.hero-title .gold-text {
  font-size: var(--font-size-6xl);
  background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold-primary) 50%, var(--color-gold-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 60px var(--color-gold-glow-strong);
}

.hero-subtitle {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  letter-spacing: 0.1em;
}

.hero-tagline {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-2xl);
}

/* 搜索框 */
.hero-search {
  max-width: 600px;
  margin: 0 auto var(--spacing-md);
}

/*
 * 【圆角裁剪链路修复 —— 经验471347】
 * 负责"边框+圆角+裁剪(overflow:hidden)"的元素必须是同一个 (.search-box)
 * 子级 input/btn 不再依赖父级 padding 制造"内缩假象"，否则 btn 的圆角半径会和父级错位，
 * 导致按钮一半看起来是直角边（用户反馈 issue）。
 * 统一 box-sizing: border-box + btn height:100% = 保证 btn 与容器外框完全等高等位（含 1px 边框）
 */
.hero-search .search-box {
  padding: 0;
  box-sizing: border-box;
  background: var(--color-bg-card);
  border: var(--border-gold);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), var(--shadow-gold-glow);
}

.hero-search .search-input {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-lg);
  align-self: center;
}

.hero-search .search-btn {
  flex-shrink: 0;
  align-self: stretch;
  box-sizing: border-box;
  height: 100%;
  /* 与父 search-box 完全对齐：负 margin 吃掉父 1px 上下边框厚度 + padding 回补居中
   * 避免 height% 参照父 content-box 露出的 1-2px 缝隙（经验471347 抗遗忘链路）
   */
  margin-top: -1px;
  margin-bottom: -1px;
  padding: calc(var(--spacing-md) + 1px) var(--spacing-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  /* 半径与父容器 --radius-xl 完全一致，配合 overflow:hidden 二次裁剪 */
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  border: none;
}

.search-suggestions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
}

.search-icon {
  margin-left: var(--spacing-md);
  color: var(--color-text-muted);
  /* ★ v16 把 .search-box 改成 align-items:stretch 来让按钮吃满高度修"一半直角"
   * 但 SVG/search-icon 是替换元素 + flex:0 1 auto → 默认对齐 stretch 父的 content-box TOP
   * → 视觉上：SVG 紧贴搜索框上沿、和居中对齐的 input 文字上下错位
   * 修复：显式 align-self:center 让图标和 input 的中线重合（v17b 单点修复，不改其他任何东西）
   */
  align-self: center;
  flex-shrink: 0;
}

/* 行动按钮 */
.hero-actions {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
  margin: var(--spacing-2xl) 0;
  flex-wrap: wrap;
}

/* 特色标签 */
.hero-features {
  display: flex;
  gap: var(--spacing-xl);
  justify-content: center;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* 滚动提示样式见 背景动画.css（统一来源，避免跨文件重复定义） */

/* ============ 通用 Section ============ */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
}

.section-desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

/* ============ 核心工具区 ============ */
.tools-section {
  padding: var(--spacing-4xl) 0;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
}

.tool-card {
  background: var(--color-bg-card);
  border: var(--border-gold-subtle);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  text-decoration: none;
  color: inherit;
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.tool-card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-lg), var(--shadow-gold-glow);
  transform: translateY(-4px);
}

.tool-card--primary {
  background: linear-gradient(135deg, var(--color-bg-card) 0%, rgba(212, 175, 55, 0.1) 100%);
  border-color: var(--color-gold-light);
}

.tool-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.tool-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  overflow: hidden; /* 防止 logo 图溢出圆角 */
  padding: 0;
}
.tool-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 经验 1349655：不变形 */
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-drag: none;
}

.tool-icon--gold {
  background: linear-gradient(135deg, var(--color-gold-primary) 0%, var(--color-gold-dark) 100%);
  color: var(--color-text-inverse);
}

/* ===== 页面级品牌 Logo（风灵页 / WeMod 页 Hero 区专属，经验 365169：不叠加多余背景色块重影） ===== */
.page-brand-logo {
  width: 170px;   /* 品牌 Logo 容器统一放大：风灵160 / WeMod170 视觉协调（比原 76-80 大一倍以上字清晰） */
  height: 170px;
  margin: 0 auto var(--spacing-lg);
  background: transparent !important;   /* 经验365169：去掉压在品牌Logo上的多余底色/方块，不与图自带色彩发生重影 */
  border: 0 none !important;
  box-shadow: none !important;
  border-radius: 0;     /* 取消强行裁切圆角：让品牌 Logo PNG 自己的设计圆角/方角完整呈现，不被盒子裁切掉边角 */
  padding: 0 !important;
  overflow: visible !important;
  object-fit: contain;
  display: flex;        /* 兼容 img 嵌套结构（wemod 的 img 在 div 内） */
  align-items: center;
  justify-content: center;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-drag: none;
}
.page-brand-logo > img,
.page-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: inherit;
}
.page-brand-logo--feng {
  filter:
    drop-shadow(0 4px 12px rgba(212, 175, 55, 0.18))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.page-brand-logo--wemod {
  width: 120px;  /* 用户反馈太大：原180→缩到120，比原76大58%字清楚又不突兀（经验878301：只调尺寸不动资源） */
  height: 120px;
  /* 默认金色光晕（呼吸动画会增强/减弱） */
  filter:
    drop-shadow(0 4px 10px rgba(212, 175, 55, 0.18))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
@media (max-width: 480px) {
  .page-brand-logo { width: 120px; height: 120px; }
  .page-brand-logo--wemod { width: 96px; height: 96px; }
}

.tool-name {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}

.tool-desc {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.tool-features {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.tool-features li {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) 0;
}

.tool-card-footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-slate-200);
  font-weight: var(--font-weight-semibold);
}

/* ============ 近期更新 ============
 * 所有颜色、间距、圆角均严格对齐「设计令牌.css」，不使用 inline style（避免优先级混乱）
 * 颜色层级：
 *   主标题 → 金色 (--color-gold-primary)
 *   辅助文字/三角/数量 → 次文字暖灰 (--color-text-secondary)
 *   卡片游戏名 → 暖白主文字 (--color-text-primary) 【显式写死，双重保险】
 *   卡片日期 → 辅助暖灰 (--color-text-muted) 【显式写死，双重保险】
 *
 * 垂直节奏（经验1095830 统一紧凑）：
 *   section 上下 padding = 16px（避免与上下区块出现过大空白）
 *   panel 内边距 = 12px（内层玻璃框内部紧凑不空洞）
 *   header 底部分隔线上下 padding/margin 各 8px（金线上下对称不歪）
 */
.updates-section {
  padding: var(--spacing-md) 0;
}

.updates-panel {
  padding: var(--spacing-sm);
}

.updates-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding-bottom: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  border-bottom: var(--border-gold-subtle);
  user-select: none;
  transition: all var(--duration-fast);
}

.updates-panel-header:hover {
  border-bottom-color: var(--color-gold-primary);
}

.updates-panel-header:hover .updates-title,
.updates-panel-header:hover .updates-right {
  color: var(--color-gold-primary);
}

.updates-toggle {
  gap: var(--spacing-sm);
}

.updates-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold-primary);
}

.updates-right {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast);
}

.updates-right .toggle-icon {
  font-size: 0.75rem;
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast);
  display: inline-block;
  line-height: 1;
}

/*
 * 收拢 = 倒三角 ▼（不加 .active）
 * 展开 = 正三角 ▲（加 .active 顺时针旋 180°）
 * 同时把 textContent 兜底同步（▲ 字符），两者一致不冲突
 */
.updates-toggle.active .toggle-icon {
  transform: rotate(180deg);
}

.updates-content {
  overflow: visible; /* ★ 必须 visible：卡片 hover 的阴影/边框不能被裁剪，更不能让金线被 translateY 遮挡 */
  /* padding-top:4px 是给 hover 效果的预留空间（即使将来再开 translateY 也有缓冲） */
  padding-top: 4px;
}

.updates-content.hidden {
  display: none;
}

.updates-loading,
.updates-empty {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.updates-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--spacing-sm);
  /* 默认展开态 overflow:visible — 保持卡片 hover 金色阴影不被裁（v17金线不遮挡修复） */
  overflow: visible;
}

/*
 * ★ 近期更新「默认只显示一排」（用户 v18 需求）
 * 设计思路：不动 JS 生成逻辑（仍然渲染全部 10 张，保持点卡片搜索/时间排序不退化）
 * 只通过 3 条 grid/overflow 纯 CSS 把"第二排及以后"的卡片压成 0 高度+hidden：
 *   1. grid-template-rows: repeat(1, auto) → 只给第一排一个"自动高度轨道"
 *   2. grid-auto-rows: 0 → 超过一排的自动生成轨道高度为 0（不再占空间）
 *   3. overflow: hidden → 把 0 高轨道里仍想露出来的卡片 padding/文字裁掉
 *   4. .update-card 额外 overflow:hidden 双保险（如果卡片 padding/margin 越线再裁一次）
 * —— 好处：天然匹配各断点列数！桌面 5 列=显示 5 张 / 1024px 4 列=4 张 / 768px 3 列=3 张 / 560px 2 列=2 张
 *    不需要写任何 nth-child 或 media query 单独控制一排几张，响应式自动跟着列数走。
 */
.updates-grid.grid-row-1 {
  grid-template-rows: repeat(1, auto);
  grid-auto-rows: 0;
  overflow: hidden;
}

.updates-grid.grid-row-1 .update-card {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .updates-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .updates-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .updates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.update-card {
  display: block;
  background: var(--color-bg-card);
  border: var(--border-gold-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--duration-fast) var(--ease-out);
}

/*
 * ★ 近期更新卡片 hover：故意去掉 translateY 浮起
 * 因为卡片上方紧邻 header 底部金色分隔线（只有 8+4px 的间隙），
 * 浮起会让卡片的 top 越过金线，遮挡/破坏分隔线视觉（用户反馈 issue）。
 * 保留金色边框 + 浅卡底 + 金色光晕 → 风格统一且不会越界遮挡。
 */
.update-card:hover {
  border-color: var(--color-gold-primary);
  background: var(--color-bg-card-hover);
  box-shadow: var(--shadow-gold-glow);
  /* transform: translateY(-2px); ← 已移除：会遮挡 header 下方金线 */
}

/* ★ 双重保险：显式指定颜色令牌，不继承 body 的默认色
 * —— 就算将来全局样式.css 又漏加载，也不会出现"黑字在深底"的灾难
 */
.update-game-name {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.update-date {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

/* ============ 安全保障 ============ */
.security-section {
  padding: var(--spacing-4xl) 0;
}

.security-card {
  padding: var(--spacing-2xl);
  text-align: center;
}

.security-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  justify-content: center;
  margin-bottom: var(--spacing-xl);
}

.security-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-gold-glow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-text h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

.security-text p {
  color: var(--color-text-muted);
}

.security-features {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.security-feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

/* ============ FAQ 板块 ============ */
.faq-section {
  padding: var(--spacing-4xl) 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  background: var(--color-bg-card);
  border: var(--border-gold-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast);
}

.faq-item:hover {
  border-color: var(--border-gold-light);
}

.faq-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: left;
}

.faq-header:hover {
  background: var(--color-bg-card-hover);
  color: var(--color-gold-primary);
}

.faq-icon {
  font-size: var(--font-size-xl);
  color: var(--color-gold-primary);
  transition: transform var(--duration-fast);
}

.faq-content {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.faq-content.hidden {
  display: none;
}

.faq-content ol {
  padding-left: var(--spacing-lg);
  margin-top: var(--spacing-sm);
}

.faq-content li {
  padding: var(--spacing-xs) 0;
}

.faq-more {
  text-align: center;
  margin-top: var(--spacing-xl);
}

/* ============ 列表页特定样式 ============ */
.list-page {
  padding-top: calc(var(--header-height) + var(--spacing-lg));
}

.list-header {
  text-align: center;
  /* 原 spacing-2xl (48px) → spacing-md (16px)：消除分类按钮行和近期更新之间的大空白（红框1核心贡献者） */
  margin-bottom: var(--spacing-md);
}

.list-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
}

.list-header p {
  color: var(--color-text-muted);
}

.list-search-section {
  max-width: 600px;
  /* 旧 spacing-xl (32px) → spacing-sm (8px)：消除搜索框和近期更新之间的大空白（经验1095830 垂直节奏统一） */
  margin: 0 auto var(--spacing-sm);
}

.list-search-section .search-box {
  padding: 0;
  box-sizing: border-box;
  background: var(--color-bg-card);
  border: var(--border-gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md), var(--shadow-gold-glow);
}

.list-filters {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  justify-content: center;
  /* 原 spacing-xl (32px) 过大 → 压到 12px（经验1095830：垂直节奏统一紧凑） */
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
}

.filter-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-card);
  border: var(--border-gold-subtle);
  border-radius: var(--radius-full);
  transition: all var(--duration-fast);
}

.filter-btn:hover,
.filter-btn.active {
  color: var(--color-text-inverse);
  background: var(--color-gold-primary);
  border-color: var(--color-gold-primary);
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-lg) 0;
}

/* ============ WeMod 页面特定样式 ============ */
.wemod-section {
  padding: var(--spacing-3xl) 0 var(--spacing-4xl);
}

/* Hero：Logo + 标题 + 徽章 + CTA 一体化，紧凑聚焦 */
.wemod-hero {
  text-align: center;
  padding: var(--spacing-2xl) 0 var(--spacing-lg);
}

/* Logo：经验365169修复→删除压在品牌Logo上的多余盒子装饰(深蓝底/金边/24圆角裁切/padding14),
   改为纯透明容器+page-brand-logo统一尺寸;呼吸光晕迁移为drop-shadow(直接打在img内容上不压盒子) */
.wemod-logo {
  width: 120px;   /* 用户反馈太大：原180→缩到120（经验878301：只调CSS尺寸不动资源文件/路径） */
  height: 120px;
  margin: 0 auto var(--spacing-lg);
  background: transparent !important;
  border: 0 none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wemod-glow 3.2s ease-in-out infinite;
}
.wemod-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-drag: none;
}
.wemod-logo span {
  font-size: 52px;
  font-weight: var(--font-weight-bold);
  background: linear-gradient(150deg, #f3dd9a 0%, #d4af37 55%, #b8941f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(212, 175, 55, 0.35));
}

@keyframes wemod-glow {
  0%, 100% {
    /* 经验365169：呼吸光晕直接 drop-shadow 打在 Logo 图内容本身（金色光晕），不再压盒子边框 */
    filter:
      drop-shadow(0 4px 10px rgba(212, 175, 55, 0.18))
      drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  }
  50% {
    filter:
      drop-shadow(0 6px 20px rgba(212, 175, 55, 0.38))
      drop-shadow(0 3px 9px rgba(0, 0, 0, 0.55));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wemod-logo { animation: none; filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.18)); }
}
@media (max-width: 480px) {
  .wemod-logo { width: 96px; height: 96px; }
}

.wemod-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-primary) 55%, var(--color-gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wemod-tagline {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-lg);
}

.wemod-badges {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl);
}

.wemod-badge {
  font-size: var(--font-size-xs);
  color: var(--color-gold-primary);
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
  white-space: nowrap;
}

.wemod-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.wemod-cta {
  min-width: 220px;
  font-size: var(--font-size-lg);
  box-shadow: var(--shadow-gold-glow);
}

.wemod-version-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  opacity: 0.85;
}

/* 安装步骤条：与 CTA 呼应，替代原 ol 安装说明 */
.wemod-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  max-width: 860px;
  margin: var(--spacing-2xl) auto;
}

.wemod-step {
  text-align: center;
  padding: var(--spacing-lg) var(--spacing-sm);
  background: var(--color-bg-card);
  border: var(--border-gold-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.wemod-step:hover {
  border-color: rgba(212, 175, 55, 0.45);
  transform: translateY(-2px);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: #0b1220;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-primary));
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

.wemod-step p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* 使用提示横幅：细窄居中，不喧宾夺主 */
.wemod-notice {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-gold-glow);
  border: var(--border-gold-light);
  border-radius: var(--radius-md);
  color: var(--color-gold-primary);
  font-size: var(--font-size-sm);
  text-align: center;
}

@media (max-width: 768px) {
  .wemod-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .wemod-steps {
    grid-template-columns: 1fr;
  }
  .wemod-logo {
    width: 84px;
    height: 84px;
    border-radius: 20px;
  }
  .wemod-logo span {
    font-size: 42px;
  }
}

/* ============ 404 页面特定样式 ============ */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-xl);
}

.error-content {
  max-width: 400px;
}

.error-code {
  font-size: 120px;
  font-weight: var(--font-weight-bold);
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: var(--spacing-lg);
}

.error-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
}

.error-desc {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xl);
}

.error-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}

/* ============ 响应式 ============ */
@media (max-width: 768px) {
  .hero-title {
    font-size: var(--font-size-4xl);
  }
  
  .hero-title .gold-text {
    font-size: var(--font-size-4xl);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-lg);
  }
  
  .hero-features {
    gap: var(--spacing-md);
  }
  
  .tools-grid,
  .wemod-features {
    grid-template-columns: 1fr;
  }
  
  .security-header {
    flex-direction: column;
    text-align: center;
  }
  
  .search-suggestions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
  }
  
  .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--font-size-3xl);
  }
  
  .hero-title .gold-text {
    font-size: var(--font-size-3xl);
  }
  
  .hero-features {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .game-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}