/* ==========================================================================
   tokens.css — 设计令牌（唯一真源）
   改颜色 / 字号 / 间距 / 圆角 / 内容宽度，只改这里，全站生效。
   配套文档：docs/ui-design-spec.md §1
   ========================================================================== */

:root {
  /* ---- 结构基色（冷石墨 · 色相 250°） ---------------------------------- */
  --bg-0: #0a0c11;
  --bg-1: #0f1218;   /* 页面底 */
  --bg-2: #14171f;   /* 面板 */
  --bg-3: #191d26;   /* 卡片 */
  --bg-4: #1f2430;   /* 图标底 */
  --bg-5: #262c39;   /* 悬浮层 */

  /* ---- 分割线 --------------------------------------------------------- */
  --line-soft: #232833;
  --line: #2c3342;
  --line-strong: #3a4353;
  --line-field: #5b6577;          /* 表单控件边框（3.05:1，满足 WCAG 1.4.11） */

  /* ---- 文字三级 ------------------------------------------------------- */
  --txt-1: #eef1f7;
  --txt-2: #aab3c4;
  --txt-3: #8a92a4;

  /* ---- 品牌强调 ------------------------------------------------------- */
  --acc-200: #ffe9bd;
  --acc-300: #ffd98a;
  --acc-400: #ffb020;             /* 主色 */
  --acc-500: #ff9500;
  --acc-600: #f57c00;
  --acc-2: #ff6b35;
  --acc-ink: #1a1205;             /* 琥珀/橙/霓虹填充上的文字色 */

  /* ---- 霓虹折扣层 ----------------------------------------------------- */
  --hot-300: #ff8fa8;
  --hot-400: #ff3d6e;
  --hot-orn: #ff8f3d;
  --gold-400: #ffd45a;
  --gold-600: #ff8f00;
  --cool-300: #7fd8ff;
  --cool-500: #38b6ff;

  /* ---- 语义色 --------------------------------------------------------- */
  --ok-400: #2ee6b0;
  --warn-400: #ffc14d;
  --err-400: #ff5a5f;
  --info-400: #58b9ff;

  /* ---- 渐变（角度全站统一 135deg，背景光斑除外） ----------------------- */
  --grad-brand: linear-gradient(135deg, #ffd98a 0%, #ffb020 45%, #ff6b35 100%);
  --grad-cta: linear-gradient(135deg, #ffb020 0%, #ff8f00 55%, #ff6b35 100%);
  --grad-hot: linear-gradient(135deg, #ff3d6e 0%, #ff663d 55%, #ff8f3d 100%);
  --grad-gold: linear-gradient(135deg, #ffd45a 0%, #ffa91f 55%, #ff8f00 100%);
  --grad-cool: linear-gradient(135deg, #7fd8ff 0%, #38b6ff 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 46%);
  --grad-rule: linear-gradient(90deg, transparent 0%, rgba(255, 176, 32, .55) 50%, transparent 100%);
  --grad-bar: linear-gradient(180deg, var(--hot-400) 0%, var(--acc-400) 100%);
  --grad-num: linear-gradient(180deg, #ffffff 0%, #ffd98a 100%);   /* 仅 ≥26px 数字 */
  --grad-hero:
    radial-gradient(120% 88% at 12% -18%, rgba(255, 61, 110, .20), transparent 58%),
    radial-gradient(104% 76% at 86% -12%, rgba(255, 176, 32, .18), transparent 62%),
    radial-gradient(130% 110% at 50% 118%, rgba(56, 182, 255, .10), transparent 62%);

  /* ---- 暗场网格纹理 --------------------------------------------------- */
  --tex-grid:
    linear-gradient(rgba(44, 51, 66, .34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 51, 66, .34) 1px, transparent 1px);
  --tex-grid-size: 34px 34px;

  /* ---- 阴影与发光 ----------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
  --sh-2: 0 4px 14px -6px rgba(0, 0, 0, .55);
  --sh-3: 0 16px 40px -18px rgba(0, 0, 0, .72);
  --sh-4: 0 26px 64px -28px rgba(0, 0, 0, .82);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
  --glow-acc: 0 0 0 1px rgba(255, 176, 32, .38), 0 8px 26px -12px rgba(255, 176, 32, .55);
  --glow-hot: 0 0 0 1px rgba(255, 61, 110, .42), 0 8px 26px -10px rgba(255, 61, 110, .60);
  --glow-cool: 0 0 0 1px rgba(56, 182, 255, .38), 0 8px 26px -12px rgba(56, 182, 255, .50);
  --glow-focus: 0 0 0 3px rgba(255, 176, 32, .30);

  /* ---- 圆角 ----------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --r-icon: 23.5%;                /* 图标专用比例，随尺寸自适应 */

  /* ---- 间距（4 的倍数） ----------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --pad-card: 12px 10px 10px;
  --gap-card: 14px;
  --sec-gap: 34px;

  /* ---- 宽度档：全站只有这两档 ----------------------------------------- */
  --w-container: 1180px;          /* 内容宽度 */
  --w-prose: 900px;               /* 长文阅读宽度 */

  /* ---- 字体 ----------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
    "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-num: "Chakra Petch", "Rajdhani", "Saira Condensed", ui-monospace, Consolas, monospace;
  --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  /* ---- 动效 ----------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .30, 1);
  --ease-in-out: cubic-bezier(.40, 0, .20, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 90ms;
  --dur-2: 140ms;
  --dur-3: 220ms;
  --dur-4: 320ms;
  --dur-5: 520ms;

  /* ---- 层级 ----------------------------------------------------------- */
  --z-base: 0;
  --z-badge: 2;
  --z-sticky: 30;
  --z-head: 50;
  --z-drawer: 60;
  --z-modal: 80;
  --z-toast: 100;

  /* ---- 结构尺寸（跨组件复用，避免魔法数字散落） ----------------------- */
  --h-topbar: 48px;               /* 移动端顶栏 */
  --h-head: 60px;                 /* 桌面端顶栏 */
  --h-tabbar: 56px;               /* 底部 Tab 栏 */
  --h-seg: 44px;                  /* 分段控件 */
  --h-row-kaifu: 52px;            /* 开服行·移动 */
  --w-cta-col: 88px;              /* 开服表行尾 CTA 列固定宽 */
}

/* reduced-motion：位移/缩放全禁，仅保留 opacity */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
  }
}

/* ==========================================================================
   base.css — reset · 排版 · 无障碍工具类
   依赖：tokens.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 禁下拉刷新，避免误触丢失滚动位置 */
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--txt-1);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* 移动端底部 Tab 栏占位（桌面端由 layout.css 复位） */
  padding-bottom: calc(var(--h-tabbar) + env(safe-area-inset-bottom) + var(--sp-4));
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
figure { margin: 0; }             /* UA 默认 margin:1em 40px 会顶破移动端 */

a { color: inherit; text-decoration: none; }
a:hover { color: var(--acc-400); }

img, svg, video {
  max-width: 100%;
  display: block;
}
img { height: auto; background: var(--bg-4); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }

strong, b { font-weight: 700; }

table { border-collapse: collapse; border-spacing: 0; }

/* hidden 必须压过组件的 display（筛选/折叠全靠它） */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   排版尺度（中文只用 400 / 500 / 700；800/900 仅数字与拉丁）
   -------------------------------------------------------------------------- */
.h1, h1 { font-size: 26px; line-height: 1.30; font-weight: 700; }
.h2, h2 { font-size: 21px; line-height: 1.30; font-weight: 700; }
.h3, h3 { font-size: 17px; line-height: 1.40; font-weight: 700; }
.label {
  font-size: 12px;
  line-height: 1.20;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* 长文阅读块：全站唯一阅读宽度档，一个元素只挂这一个宽度类 */
.prose {
  max-width: var(--w-prose);
  color: var(--txt-2);
  line-height: 1.9;
}
.prose p { margin-bottom: var(--sp-3); }
.prose p:last-child { margin-bottom: 0; }
/* 正文列表：reset 把 list-style 清空了，长文里的对比/步骤列表要显式加回来 */
.prose ul, .prose ol { margin: 0 0 var(--sp-3); padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 6px; }
.prose li:last-child { margin-bottom: 0; }
.prose strong { color: var(--txt-1); }

/* --------------------------------------------------------------------------
   焦点可见（P0：现网缺口最大的一项）
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--acc-400);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   无障碍工具类
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  z-index: var(--z-toast);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--acc-400);
  color: var(--acc-ink);
  font-weight: 700;
  transition: top var(--dur-3) var(--ease-out);
}
.skip-link:focus { top: var(--sp-3); }

/* --------------------------------------------------------------------------
   图片失败占位：尺寸不变（防 CLS），用首字兜底
   -------------------------------------------------------------------------- */
.img-failed {
  background: linear-gradient(135deg, var(--bg-5), var(--bg-3));
  position: relative;
  overflow: hidden;
}
.img-failed::after {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt-3);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   横滑容器：右缘渐隐提示还有内容
   -------------------------------------------------------------------------- */
.scroller {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   layout.css — 容器 · 区块节奏 · 栅格 · 站头/站尾 · 底部Tab · 粘性条
   本文件只放「结构性」断点：容器宽度、栅格列数、站头/站尾/底部栏。
   组件级 @media 必须写在定义该组件的文件里（components.css / blocks.css）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   容器（全站唯一内容宽度档）
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

main { display: block; }

/* --------------------------------------------------------------------------
   区块节奏
   -------------------------------------------------------------------------- */
.sec { padding-block: var(--sp-7) var(--sp-2); }
.sec--tight { padding-block: var(--sp-4) var(--sp-2); }

.sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.sec-head > h2 { font-size: 20px; }
.sec-head > h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--acc-400);
  border-radius: 2px;
  margin-right: 9px;
  vertical-align: -2px;
}
.sec-head .more {
  margin-left: auto;
  color: var(--txt-3);
  font-size: 13px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   栅格（游戏卡 / 内容卡）。列数只在这里变，卡片自身不管列数。
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-card);
}
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* XL 三栏：左 200 粘性目录 / 中 flex / 右 320 粘性 */
.layout-3col { display: block; }
@media (min-width: 1280px) {
  .layout-3col {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 320px;
    gap: var(--sp-7);
    align-items: start;
  }
  .layout-3col > .col-side,
  .layout-3col > .col-aside {
    position: sticky;
    top: calc(var(--h-head) + var(--sp-4));
    /* 侧栏内容（左：分类 + 开服日历 / 右：数据 + 热度 + 盒子）叠加后可能高过视口，
       加一层内部滚动，避免底部被裁。 */
    max-height: calc(100vh - var(--h-head) - var(--sp-6));
    overflow-y: auto;
  }
}
/* 详情页左右两栏：正文 + 320 粘性右栏。
   「同类手游」已并入右栏（放在下载卡下面），原来最左的 200 目录列因此撤掉 ——
   不要再改回三栏：左列条目与页尾「同类型游戏推荐」重复，且正文被压到 596px。 */
.layout-2col { display: block; }
@media (min-width: 1280px) {
  .layout-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-7);
    align-items: start;
  }
  .layout-2col > .col-aside {
    position: sticky;
    top: calc(var(--h-head) + var(--sp-4));
    /* 下载卡 + 同类列表叠加后可能高过视口，加一层内部滚动，避免底部被裁 */
    max-height: calc(100vh - var(--h-head) - var(--sp-6));
    overflow-y: auto;
  }
}

.col-side, .col-aside { display: none; }
@media (min-width: 1280px) {
  .col-side, .col-aside { display: block; }
}
.col-main { min-width: 0; }

/* --------------------------------------------------------------------------
   站头
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-head);
  background: rgba(15, 18, 24, .92);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(10px)) {
  .site-head { backdrop-filter: blur(10px); }
}
/* 顶栏永远单行：LOGO 定宽在左，搜索框吃掉剩余宽度。
   移动端曾因 flex-wrap:wrap + 搜索框 width:100% 折成两行（LOGO 一行、
   搜索框一行，88px 常驻吸顶），既浪费首屏又左右失衡 —— 不要改回 wrap。 */
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--h-topbar);
  flex-wrap: nowrap;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  white-space: nowrap;
}
/* 品牌图：圆角与 favicon 一致（13%），让它和浏览器标签页里的图标看起来是同一个东西 */
.logo img {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  flex: none;
}
.logo:hover { color: var(--txt-1); }
/* 极窄屏（≤359）：LOGO 再收一档，给搜索占位文字留余量 */
@media (max-width: 359px) {
  .logo { gap: 5px; font-size: 15px; }
  .logo img { width: 22px; height: 22px; }
}

/* 主导航默认隐藏（移动端交给底部 Tab 栏），LG 起显示 */
.nav { display: none; gap: var(--sp-5); font-size: 15px; }
.nav a {
  color: var(--txt-2);
  padding: var(--sp-2) 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--txt-1); }
.nav a[aria-current="page"] {
  color: var(--txt-1);
  border-bottom-color: var(--acc-400);
}

/* 搜索框：图标内嵌左侧，移动端与 LOGO 同排；字号 <16px 会触发 iOS 聚焦自动放大 */
.head-search {
  position: relative;
  display: flex;
  align-items: center;
  /* 基准 400px 上限：<400 的屏由 shrink 收窄（不与 LOGO 争宽），
     400~1023 的平板靠 margin-left 右贴，避免搜索框被拉成整行。 */
  flex: 0 1 400px;
  min-width: 0;
  margin-left: auto;
}
.hs-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--txt-3);
  pointer-events: none;
}
.head-search input {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px 6px 30px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-field);
  background: var(--bg-2);
  color: var(--txt-1);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.head-search input::placeholder { color: var(--txt-3); }
.head-search input:focus { border-color: var(--acc-400); background: var(--bg-3); }
/* type=search 的系统×按钮在暗底上不统一，按令牌重绘并保留可点 */
.head-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-inline-start: 6px;
  border-radius: 50%;
  background: var(--bg-4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.4 5.4l5.2 5.2M10.6 5.4l-5.2 5.2' fill='none' stroke='%23aab3c4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .site-head .wrap { min-height: var(--h-head); gap: var(--sp-4); }
  .logo { gap: 7px; font-size: 18px; }
  .logo img { width: 30px; height: 30px; }
  .nav { display: flex; }
  .head-search { flex: none; }
  .hs-ico { left: 12px; }
  .head-search input { width: 230px; padding-right: 12px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   底部 Tab 栏（<1024 的导航替代品 —— 删它等于手机端没有导航）
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  height: calc(var(--h-tabbar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(20, 23, 31, .96);
  border-top: 1px solid var(--line);
}
@supports (backdrop-filter: blur(10px)) {
  .tabbar { backdrop-filter: blur(10px); }
}
.tabbar a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  font-size: 11px;
  color: var(--txt-3);
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a[aria-current="page"] { color: var(--acc-400); }
@media (min-width: 1024px) { .tabbar { display: none; } }

/* --------------------------------------------------------------------------
   粘性行动条（详情/落地/收口页：hero 主按钮滚出后滑入）
   -------------------------------------------------------------------------- */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  min-height: var(--h-tabbar);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(20, 23, 31, .96);
  border-top: 1px solid var(--line);
  transform: translateY(0);
  transition: transform var(--dur-4) var(--ease-out);
}
@supports (backdrop-filter: blur(10px)) {
  .sticky-bar { backdrop-filter: blur(10px); }
}
.sticky-bar[hidden] { transform: translateY(110%); }
.sticky-bar .sb-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-bar .sb-acts { margin-left: auto; display: flex; gap: var(--sp-2); flex: none; }

/* --------------------------------------------------------------------------
   站尾
   -------------------------------------------------------------------------- */
.site-foot {
  margin-top: var(--sp-8);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-6) var(--sp-8);
  color: var(--txt-3);
  font-size: 13px;
}
.site-foot h2 {
  font-size: 13px;
  color: var(--txt-2);
  margin-bottom: var(--sp-2);
  letter-spacing: .04em;
}
.site-foot a { color: var(--txt-2); }
.site-foot a:hover { color: var(--acc-400); }
.foot-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.foot-cols li { margin-bottom: 5px; line-height: 1.6; }
.foot-legal { line-height: 1.9; }
.foot-legal p { margin-bottom: 5px; }
/* 备案号单独一行、与免责文字拉开距离；颜色继承 .site-foot a（--txt-2，AA 达标） */
.foot-beian { margin-top: var(--sp-3); }
@media (min-width: 768px) {
  .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   面包屑
   -------------------------------------------------------------------------- */
.crumb {
  padding-top: var(--sp-4);
  font-size: 13px;
  color: var(--txt-3);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.crumb a { color: var(--txt-3); }
.crumb a:hover { color: var(--acc-400); }

/* --------------------------------------------------------------------------
   页头（内页 H1 + 导语 + 快捷入口）
   -------------------------------------------------------------------------- */
.page-head { padding-block: var(--sp-5) var(--sp-3); }
.page-head h1 { font-size: 24px; margin-bottom: var(--sp-2); }
.page-head .lead {
  max-width: var(--w-prose);
  color: var(--txt-2);
  line-height: 1.9;
  margin-bottom: var(--sp-4);
}
@media (min-width: 600px) {
  .page-head h1 { font-size: 26px; }
}

/* ==========================================================================
   components.css — 基础交互件：按钮 · 胶囊 · 折扣角标 · 信任状条 · 顶栏盒子入口
   列表页的「导航 / 筛选」控件（标签墙 · 分段控件 · 筛选条 · 快捷筛片）已拆到 filters.css。
   依赖：tokens.css / base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;                       /* 触控目标下限 */
  padding: 10px var(--sp-6);
  border: 0;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: filter var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-in-out);
}

/* L2 主行动：实心渐变 + 琥珀发光。同屏只允许 1 个 */
.btn--primary {
  background: var(--grad-cta);
  color: var(--acc-ink);
  box-shadow: var(--glow-acc);
}
.btn--primary:hover { color: var(--acc-ink); filter: brightness(1.06); }
.btn--primary:active { transform: scale(.97); filter: brightness(.98); }

/* 次级：描边（不要用浅灰实心，看着像禁用态） */
.btn--ghost {
  background: var(--bg-3);
  color: var(--txt-1);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover { color: var(--txt-1); box-shadow: inset 0 0 0 1px var(--acc-400); }

/* 幽灵文字按钮 */
.btn--text { background: none; color: var(--acc-400); padding-inline: var(--sp-3); }
.btn--text:hover { color: var(--acc-300); }

.btn--sm { min-height: 36px; padding: 7px var(--sp-4); font-size: 14px; }
.btn--block { width: 100%; }

.btn.is-busy { opacity: .72; pointer-events: none; }
.btn.is-used { opacity: .55; filter: grayscale(.35); pointer-events: none; }

/* L1 卡片 mini CTA：描边胶囊，不与角标抢注意力 */
.gcard-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin-top: var(--sp-2);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acc-400);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .40);
}
.gcard-dl:hover { background: var(--acc-400); color: var(--acc-ink); }

/* 复制按钮 */
.btn-copy {
  flex: none;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--bg-4);
  color: var(--txt-2);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background var(--dur-2), color var(--dur-2);
}
.btn-copy:hover { color: var(--txt-1); }
.btn-copy.is-done { background: var(--ok-400); color: var(--acc-ink); }
.btn-copy.is-shake { animation: copy-shake 300ms var(--ease-in-out); }
@keyframes copy-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary:active { transform: none; }
  .btn-copy.is-shake { animation: none; }
}

/* --------------------------------------------------------------------------
   胶囊 / 行内小标
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 176, 32, .12);
  color: var(--acc-400);
  font-size: 12.5px;
  line-height: 1.5;
}
.pill--gray { background: var(--bg-5); color: var(--txt-2); }
.pill--cool { background: rgba(56, 182, 255, .12); color: var(--cool-300); }

/* L3 行内行动：小号实心琥珀 */
.pill--act {
  background: var(--acc-400);
  color: var(--acc-ink);
  font-weight: 700;
  min-height: 32px;
  padding-inline: var(--sp-3);
}
.pill--act:hover { background: var(--acc-300); color: var(--acc-ink); }

/* --------------------------------------------------------------------------
   客户端平台标（安卓 / iOS）
   口径：0=安卓 / 1=苹果 / 2=双端，与 src/api.py 的 DEVICE_TEXT 同源。
   两标只在「双端」时并排出现；数量随数据走，不预置固定个数。
   安卓=中性灰（放之四海皆通），iOS=冷蓝（与 .pill--cool 同族）。
   -------------------------------------------------------------------------- */
.plats { display: inline-flex; align-items: center; gap: 4px; }
.plat {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}
.plat.is-android { background: var(--bg-5); color: var(--txt-2); }
.plat.is-ios { background: rgba(56, 182, 255, .12); color: var(--cool-300); }
/* 卡片里的形态：独立一行挂在「传奇 · 新区 30」下面。
   不跟 .tg 同行 —— 那行是 nowrap+省略号，挤进去会在窄卡上丢标。 */
.plats.is-card { display: flex; margin-top: 5px; }
/* 开服行的形态：独立一行挂在「区服 · 版本」下面（.sn-sub 是 nowrap+省略号，
   标塞进去会被裁）。比卡片里的再小一号 —— 开服表行高只有 28px。 */
.plats.is-row { display: flex; margin-top: 3px; }
.plats.is-row .plat { height: 17px; padding: 0 5px; font-size: 10.5px; }

/* --------------------------------------------------------------------------
   折扣角标（全站最高权重组件）
   三档色温 = 折扣力度；文字一律近黑墨色保证对比度 ≥4.5:1；霓虹底上禁白字
   -------------------------------------------------------------------------- */
.badge-discount {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: 1px;
  pointer-events: none;             /* 不可点击，点击穿透到卡片 */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
}
.badge-discount.is-s {
  background: var(--grad-hot);
  color: #1b0a12;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .34),
    0 0 12px -2px rgba(255, 61, 110, .65);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.badge-discount.is-a {
  background: var(--grad-gold);
  color: #20140a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .30),
    0 0 10px -4px rgba(255, 176, 32, .55);
}
.badge-discount.is-b {
  background: rgba(56, 182, 255, .12);
  color: var(--cool-300);
  border: 1px solid rgba(56, 182, 255, .42);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.badge-discount.is-neutral {
  background: var(--bg-5);
  color: var(--txt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
}
/* 悬停只加强发光，角标本身不位移（避免网格一片抖动） */
@media (hover: hover) {
  .gcard:hover .is-s {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .34),
      0 0 18px -2px rgba(255, 61, 110, .80);
  }
  .gcard:hover .is-a {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .30),
      0 0 16px -4px rgba(255, 176, 32, .72);
  }
}
@media (max-width: 599px) {
  .badge-discount { height: 17px; padding: 0 5px; font-size: 10px; }
}
/* 详情页 H1 旁：大号 */
.badge-discount.is-lg {
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 14px;
  vertical-align: 4px;
  clip-path: none;
}
.badge-discount.is-lg.is-s { clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
/* 表格 / 列表行内：小号，紧跟游戏名（不用绝对定位） */
.badge-discount.is-inline {
  height: 17px;
  padding: 0 5px;
  font-size: 10.5px;
  margin-left: 6px;
  clip-path: none;
}

/* --------------------------------------------------------------------------
   信任状条（chips ≤5，每个都可点验证）
   -------------------------------------------------------------------------- */
.trust { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  color: var(--txt-2);
  font-size: 12.5px;
}
.trust-chip b { color: var(--acc-400); font-weight: 700; font-variant-numeric: tabular-nums; }
.trust-chip:hover { color: var(--txt-1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

/* --------------------------------------------------------------------------
   顶栏「装盒子」入口（设计稿 01/07 站头右侧）
   窄屏（<420）只留图标：320~419px 一排同时塞下 LOGO + 搜索占位 + 图标+文字
   会把搜索占位挤掉，而 360 是国产安卓最常见宽度、320 是老机型下限，二者都不能破。
   -------------------------------------------------------------------------- */
.head-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .55);
  color: var(--acc-300);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.head-box:hover { color: var(--acc-200); background: rgba(255, 176, 32, .10); }
.head-box svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 419px) {
  .head-box { width: 34px; padding: 0; }
  .head-box span { display: none; }
}

/* ==========================================================================
   filters.css — 列表页的「导航 / 筛选」控件：标签墙 · 分段控件 · 筛选条 · 快捷筛片
   从 components.css 拆出（该文件已 11.97KB 顶到 12KB 上限）。
   这一层的共同点是「改变列表内容/视图的控件」，与 components.css 的
   「静态呈现件」（按钮·胶囊·角标·信任状条）职责不同。
   依赖：tokens.css / base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   标签 / 标签墙（分类、日期、子类入口）
   -------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* 分组标签：贴在一排 tag 前面，说明这排是什么（如「整月归档」） */
.tags-label {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-right: 2px;
  font-size: 13px;
  color: var(--txt-3);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px;
  color: var(--txt-2);
}
.tag:hover { color: var(--acc-400); box-shadow: inset 0 0 0 1px var(--acc-400); }
.tag b { color: var(--txt-1); font-weight: 600; }
.tag:hover b { color: var(--acc-400); }
.tag[aria-current="page"] {
  color: var(--acc-400);
  box-shadow: inset 0 0 0 1px var(--acc-400);
}
.tag .n { color: var(--txt-3); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   分段控件（链接式，零 JS；选中态由服务端决定）
   -------------------------------------------------------------------------- */
.seg {
  display: flex;
  gap: var(--sp-4);
  min-height: var(--h-seg);
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg a {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  padding: 0 2px;
  font-size: 14px;
  color: var(--txt-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.seg a:hover { color: var(--txt-1); }
.seg a[aria-current="page"] { color: var(--acc-400); border-bottom-color: var(--acc-400); }
/* 计数写成全角括号紧贴档位名（「1折（6）」）：括号本身自带视觉留白，
   再加 gap 会散成「1折 （6）」 —— 所以 .seg a 的 gap 归零。 */
.seg a b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   筛选条
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.filter-bar input,
.filter-bar select {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-field);
  background: var(--bg-2);
  color: var(--txt-1);
  font-size: 14px;
}
.filter-bar input { flex: 1 1 200px; min-width: 0; }
.filter-bar input::placeholder { color: var(--txt-3); }
.filter-bar select { flex: 0 0 auto; }
.filter-bar input:focus,
.filter-bar select:focus { border-color: var(--acc-400); }

/* 左右分置版：搜索吃左侧剩余宽度，版本/类型下拉固定贴右（两端对齐）。
   不换行；窄屏让位折行，搜索与下拉各占整行，避免输入框被压到不可用。 */
.filter-bar--split { flex-wrap: nowrap; }
.filter-bar--split input { flex: 1 1 auto; }
.filter-bar--split select { flex: 0 0 auto; width: 180px; }
@media (max-width: 599px) {
  .filter-bar--split { flex-wrap: wrap; }
  .filter-bar--split input,
  .filter-bar--split select { flex: 1 1 100%; width: 100%; }
}

/* 快捷筛选片 */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips button {
  min-height: 34px;
  padding: 5px 13px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--txt-2);
  font-size: 13px;
}
.chips button[aria-pressed="true"] {
  color: var(--acc-400);
  box-shadow: inset 0 0 0 1px var(--acc-400);
}
.chips button:hover { color: var(--txt-1); }

.hint { color: var(--txt-3); font-size: 13.5px; padding-top: var(--sp-2); }

/* ==========================================================================
   cards.css — 浏览类内容件：游戏卡 · 开服表 · 表格 · 日期分组
   依赖：tokens.css / base.css / components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   游戏卡
   -------------------------------------------------------------------------- */
.gcard {
  position: relative;
  display: block;
  padding: var(--pad-card);
  border-radius: var(--r-md);
  background: var(--bg-3);
  background-image: var(--grad-sheen);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  text-align: center;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.gcard .ico {
  width: 68px;
  height: 68px;
  margin: 0 auto var(--sp-2);
  border-radius: var(--r-icon);
  object-fit: cover;
  background: var(--bg-4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), var(--sh-inset);
  transition: transform var(--dur-3) var(--ease-out);
}
.gcard .nm {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--txt-1);
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gcard .suf {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acc-300);
  line-height: 1.4;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcard .tg {
  font-size: 12px;
  color: var(--txt-3);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcard > .badge-discount {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: var(--z-badge);
}
.gcard .rank {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: var(--z-badge);
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--bg-5);
  color: var(--txt-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.gcard .rank.is-top { background: var(--grad-cta); color: var(--acc-ink); }

@media (hover: hover) {
  .gcard:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--acc-400), var(--sh-2);
  }
  .gcard:hover .ico { transform: scale(1.03); }
}
.gcard:active { transform: scale(.985); }

@media (max-width: 599px) {
  .gcard .ico { width: 60px; height: 60px; }
  .gcard > .badge-discount { top: 5px; right: 5px; }
}

/* 图标描边按折扣档位加重（网格里一眼看出力度） */
.gcard.is-s .ico { box-shadow: 0 0 0 1.5px rgba(255, 61, 110, .55), var(--sh-inset); }
.gcard.is-a .ico { box-shadow: 0 0 0 1.5px rgba(255, 176, 32, .45), var(--sh-inset); }

/* --------------------------------------------------------------------------
   开服表 / 通用表格
   移动端：表头隐藏、类型列并入游戏名（见文件底部断点）
   -------------------------------------------------------------------------- */
.tbl-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  overflow-x: auto;
}
table.tbl { width: 100%; font-size: 14px; }
table.tbl th,
table.tbl td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  vertical-align: middle;
}
table.tbl th {
  background: var(--bg-3);
  color: var(--txt-2);
  font-size: 13px;
  font-weight: 600;
}
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl td.num { font-variant-numeric: tabular-nums; }
table.tbl td.wrap-cell { white-space: normal; }
table.tbl .col-cta { width: var(--w-cta-col); text-align: right; }
table.tbl a:hover { color: var(--acc-400); }

/* --------------------------------------------------------------------------
   开服表列宽：固定表格布局，把「列宽」从内容手里收回来
   --------------------------------------------------------------------------
   auto 布局下，一个 19 字的游戏名会把游戏列撑到 299px，整张表涨到 539px —— 
   在 366px 的手机上就把行尾 CTA 挤出可视区，只能横向拖才能拿到「领礼包」。
   所以这里用 table-layout:fixed 显式定列，游戏列吃剩余宽度并截断。
   -------------------------------------------------------------------------- */
table.tbl--kaifu { table-layout: fixed; }
table.tbl--kaifu th:nth-child(1), table.tbl--kaifu td:nth-child(1) { width: 134px; }
table.tbl--kaifu th:nth-child(3), table.tbl--kaifu td:nth-child(3) { width: 150px; }
table.tbl--kaifu th:nth-child(4), table.tbl--kaifu td:nth-child(4) { width: 92px; }
table.tbl--kaifu th:nth-child(5), table.tbl--kaifu td:nth-child(5) { width: var(--w-cta-col); }

/* 排行榜表格：固定列宽，窄屏隐藏版本/次要数字列，避免行尾 CTA 被挤出屏幕 */
table.tbl--rank { table-layout: fixed; }
table.tbl--rank th:nth-child(1), table.tbl--rank td:nth-child(1) { width: 48px; }
table.tbl--rank th:last-child, table.tbl--rank td:last-child { width: 96px; text-align: right; }
table.tbl--rank td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  table.tbl--rank .col-ver, table.tbl--rank .col-optional { display: none; }
}

/* 时间格：宽屏一行、窄屏折两行（日期在上、时刻在下，省下约 54px 列宽） */
table.tbl--kaifu .st-d { color: var(--txt-3); }
table.tbl--kaifu .st-t { color: var(--txt-1); }
table.tbl--kaifu tr.is-opened .st-t { color: var(--txt-3); }

/* 开服行的游戏单元格：28px 图标 + 名 + 区服/类型副行 */
.srow-game { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.srow-game .ico {
  width: 28px;
  height: 28px;
  border-radius: var(--r-icon);
  object-fit: cover;
  flex: none;
  background: var(--bg-4);
}
.srow-game .sn { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.srow-game .sn-name { color: var(--txt-1); }   /* 详情页：指向当前页的名字不渲染成链接 */
.srow-game .sn-sub {
  display: none;
  font-size: 12px;
  color: var(--txt-3);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
/* 名与副行都必须自己截断：父级只是 flex 容器，光有 min-width:0 不会让文字收住 */
.srow-game .sn a,
.srow-game .sn-name,
.srow-game .sn-sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   礼包中心的按游戏表：同样固定列宽，窄屏把「礼包内容」降级进游戏单元格
   -------------------------------------------------------------------------- */
table.tbl--libao { table-layout: fixed; }
table.tbl--libao th:nth-child(2), table.tbl--libao td:nth-child(2) { width: 92px; }
table.tbl--libao th:nth-child(3), table.tbl--libao td:nth-child(3) { width: 64px; }
table.tbl--libao th:nth-child(4), table.tbl--libao td:nth-child(4) { width: 240px; }
table.tbl--libao th:nth-child(5), table.tbl--libao td:nth-child(5) { width: var(--w-cta-col); }

table.tbl--libao .nm-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
table.tbl--libao .nm-line > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.tbl--libao .nm-line > .badge-discount { flex: none; }
/* 礼包内容：宽屏独立成列，窄屏折到游戏名下方（见文件底部断点） */
table.tbl--libao .sn-sub { display: none; }

/* 日期分组行（开服表内，设计稿 02/08 的「10-08 周三 · 今日 · 12 个新区」）
   写法：<tr class="dategroup"><td colspan="5">…</td></tr>
   槽点记录：这里曾经是可独立使用的 .dategroup 块（display:flex + position:sticky），
   但实际用不了 —— 它要么在表外（列宽对不齐），要么在 .tbl-wrap 里（overflow 容器
   让 sticky 失效）。改成表格内的一行，列宽天然对齐。 */
table.tbl tr.dategroup > td {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: auto;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--txt-2);
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
table.tbl tr.dategroup .dg-n { color: var(--acc-400); font-variant-numeric: tabular-nums; }
table.tbl tr.dategroup .dg-badge {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--acc-ink);
  background: var(--acc-400);
}
table.tbl tr.dategroup .dg-badge.is-tomorrow { background: var(--hot-300); }

/* 行状态：今日冷色竖条 / 明日洋红竖条 / 已开弱化 */
tr.is-today > td:first-child { box-shadow: inset 3px 0 0 var(--grad-cool); }
tr.is-today > td.num { color: var(--acc-400); }
tr.is-tomorrow > td:first-child { box-shadow: inset 3px 0 0 var(--hot-400); }
tr.is-opened { color: var(--txt-3); }
tr.is-opened > td.num { color: var(--txt-3); }

/* --------------------------------------------------------------------------
   移动端降级
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  table.tbl thead { display: none; }
  table.tbl th, table.tbl td { padding: 9px 10px; }
  /* 开服表降到规格要求的 3 列：时间 / 游戏+区服 / CTA（88px 不可压缩）
     区服列的内容已经在 .sn-sub 里，独立成列只会白占 150px */
  table.tbl--kaifu th:nth-child(1), table.tbl--kaifu td:nth-child(1) { width: 58px; }
  table.tbl .col-type,
  table.tbl--kaifu .col-srv { display: none; }
  table.tbl--kaifu .st-d,
  table.tbl--kaifu .st-t { display: block; }
  table.tbl--kaifu .st-d { font-size: 11px; line-height: 1.5; }
  .srow-game .sn-sub { display: block; }
  /* 礼包中心：4 列 → 3 列（游戏+礼包内容 / 礼包数 / CTA） */
  table.tbl--libao th:nth-child(4), table.tbl--libao td:nth-child(4) { display: none; }
  table.tbl--libao .sn-sub {
    display: block;
    font-size: 12px;
    color: var(--txt-3);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  tr.is-today > td:first-child,
  tr.is-tomorrow > td:first-child { box-shadow: none; }
  tr.is-today > td:first-child { color: var(--acc-400); }
  tr.is-tomorrow > td:first-child { color: var(--hot-300); }
}

/* --------------------------------------------------------------------------
   三栏中心栏的开服表（设计稿 07/09）：中心只有 596px
   --------------------------------------------------------------------------
   固定列宽下，时间 134 + 区服 150 + 类型 92 + CTA 88 会吃掉 464px，
   留给游戏名的只剩 130px —— 实测只显示得下两个字（「魔晶…」）。
   这里把三列各让一步，并把时间列按「只显示 HH:MM」收窄，游戏名拿到 230px。
   只在 ≥1280 生效：窄屏下 .layout-3col 已经塌成单栏，列宽另有移动端规则。
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .layout-3col .col-main table.tbl--kaifu th:nth-child(1),
  .layout-3col .col-main table.tbl--kaifu td:nth-child(1) { width: 92px; }
  .layout-3col .col-main table.tbl--kaifu th:nth-child(3),
  .layout-3col .col-main table.tbl--kaifu td:nth-child(3) { width: 110px; }
  .layout-3col .col-main table.tbl--kaifu th:nth-child(4),
  .layout-3col .col-main table.tbl--kaifu td:nth-child(4) { width: 72px; }
}

/* ==========================================================================
   detail.css — 内容件：面板 · 礼包行 · 视频卡 · 问答 · 键值表 · 活动项 ·
                步骤 · 空态 · 锚点导航 · 分页
   依赖：tokens.css / base.css / components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   面板
   -------------------------------------------------------------------------- */
.panel {
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.panel > h2 {
  font-size: 17px;
  margin-bottom: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.panel > h2::before {
  content: "";
  width: 4px;
  height: 15px;
  background: var(--acc-400);
  border-radius: 2px;
  flex: none;
}
.panel > h2 .more { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--txt-3); }
.panel > h2 .more:hover { color: var(--acc-400); }
.panel p { color: var(--txt-2); }
.panel .panel-note { font-size: 13px; color: var(--txt-3); margin-top: var(--sp-3); line-height: 1.8; }

/* --------------------------------------------------------------------------
   礼包行
   -------------------------------------------------------------------------- */
.gift-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.gift-row:last-child { border-bottom: 0; padding-bottom: 0; }
.gift-row .ico {
  width: 48px;
  height: 48px;
  border-radius: var(--r-icon);
  object-fit: cover;
  flex: none;
  background: var(--bg-4);
}
.gift-row .gr-main { flex: 1 1 160px; min-width: 0; }
/* 列表模式（礼包中心/首页）的主行是游戏名 —— 要能点进详情页 */
.gift-row .gr-ico { flex: none; display: block; }
.gift-row .gr-name > a { color: var(--txt-1); }
.gift-row .gr-name > a:hover { color: var(--acc-400); }
.gift-row .gr-name {
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.gift-row .gr-gift { font-size: 13px; color: var(--txt-2); margin-top: 3px; }
.gift-row .gr-type { display: inline-block; margin-left: 6px; font-size: 11.5px; color: var(--cool-300); }
.gift-row .gc-row { display: flex; align-items: center; gap: var(--sp-2); flex: 0 1 auto; }
.gift-row .gr-hint { flex-basis: 100%; }

.gc {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 176, 32, .12);
  color: var(--acc-300);
  user-select: all;
  word-break: break-all;
}
.gc.is-plain { background: none; color: var(--txt-3); box-shadow: inset 0 0 0 1px var(--line); }
.gc.is-manual { background: rgba(46, 230, 176, .12); color: var(--ok-400); }
.gr-hint { font-size: 12.5px; color: var(--txt-3); margin-top: var(--sp-2); }

@media (max-width: 599px) {
  .gift-row .gc-row { flex-basis: 100%; }
  .gift-row .btn-copy { flex: 1 1 auto; min-height: 40px; }
}

/* --------------------------------------------------------------------------
   视频卡（facade：首屏零视频字节）
   -------------------------------------------------------------------------- */
.vcard {
  border-radius: var(--r-lg);
  background: var(--bg-0);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.vcard-facade {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: none;
  overflow: hidden;
}
.vcard-bg {
  position: absolute;
  inset: -18%;
  /* background-image 由行内 style 给：走 CSS 自定义属性时，Chromium 会按
     样式表所在目录（/assets/css/）解析相对地址，导致路径被拼成 /assets/assets/… */
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.1);
  transform: scale(1.6);
  opacity: .5;
}
.vcard-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 17, .25), rgba(10, 12, 17, .78));
}
.vcard-play {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-cta);
  box-shadow: var(--glow-acc);
}
.vcard-play::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--acc-ink);
}
.vcard-label {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  font-size: 12.5px;
  color: var(--txt-1);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(10, 12, 17, .72);
}
.vcard video { width: 100%; aspect-ratio: 16 / 9; background: #000; transition: opacity var(--dur-3) var(--ease-out); }
.vcard video.is-loading { opacity: 0; }
.vcard > .spinner,
.vcard .vcard-facade + .spinner { margin: var(--sp-7) auto; }
.spinner {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 3px solid var(--line);
  border-top-color: var(--acc-400);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--line-strong); }
}
.vcard-err {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-4);
  color: var(--txt-2);
  font-size: 13.5px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   问答 / 键值表 / 活动项 / 步骤
   -------------------------------------------------------------------------- */
.faq-item { padding: var(--sp-3) 0; border-bottom: 1px dashed var(--line); }
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-item h3 { font-size: 15px; margin-bottom: 6px; color: var(--txt-1); }
.faq-item p { color: var(--txt-2); line-height: 1.85; }

.kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px var(--sp-4);
}
.kv > div { font-size: 14px; }
.kv dt { color: var(--txt-3); display: inline; }
.kv dd { display: inline; margin-left: 6px; }

.act-item { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.act-item:last-child { border-bottom: 0; padding-bottom: 0; }
.act-head { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.act-date { font-size: 13px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.act-title { font-size: 14.5px; font-weight: 600; }
.act-detail > summary {
  cursor: pointer;
  color: var(--acc-400);
  font-size: 13px;
  list-style: none;
  display: inline-block;
  padding: 3px 0;
}
.act-detail > summary::-webkit-details-marker { display: none; }
.act-detail > summary::before { content: "▸ "; }
.act-detail[open] > summary::before { content: "▾ "; }
.act-body {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-sm);
  color: var(--txt-2);
  font-size: 14px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.act-body p { margin-bottom: var(--sp-2); }
.act-body p:last-child { margin-bottom: 0; }
/* 活动正文里的外链图：宽度自适应，高度由 <img> 上的 width/height 推导比例占位（防跳动） */
.act-body img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); margin: var(--sp-2) 0; }
.act-body table { width: 100%; margin: var(--sp-2) 0; font-size: 13.5px; }
.act-body td, .act-body th { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }

.steps { padding-left: var(--sp-5); list-style: decimal; color: var(--txt-2); line-height: 2; }
.steps li { margin-bottom: var(--sp-1); }

/* --------------------------------------------------------------------------
   空态：任何"没有数据"都必须给出路，不留白屏
   -------------------------------------------------------------------------- */
.empty-box {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-4);
  background: var(--bg-2);
  text-align: center;
}
.empty-box .et { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.empty-box .ed {
  font-size: 13.5px;
  color: var(--txt-2);
  margin-bottom: var(--sp-4);
  line-height: 1.8;
  max-width: var(--w-prose);
  margin-inline: auto;
}
.empty-box .ea { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }

/* --------------------------------------------------------------------------
   详情页锚点导航
   -------------------------------------------------------------------------- */
.anchornav {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: var(--h-topbar);
  z-index: var(--z-sticky);
  padding-block: var(--sp-2);
  margin-bottom: var(--sp-4);
  background: rgba(15, 18, 24, .94);
  border-bottom: 1px solid var(--line);
}
.anchornav::-webkit-scrollbar { display: none; }
.anchornav a { white-space: nowrap; font-size: 13.5px; color: var(--txt-2); }
.anchornav a:hover { color: var(--acc-400); }
@media (min-width: 1024px) { .anchornav { top: var(--h-head); } }

/* 锚点跳转后标题短暂高亮（纯 CSS） */
.panel:target > h2,
.sec:target > .sec-head > h2 { color: var(--acc-400); }

/* --------------------------------------------------------------------------
   分页
   -------------------------------------------------------------------------- */
.pager { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-4); }
.pager a, .pager span {
  min-height: 36px;
  padding: 6px 13px;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px;
  color: var(--txt-2);
}
.pager a:hover { color: var(--acc-400); box-shadow: inset 0 0 0 1px var(--acc-400); }
.pager .is-on { color: var(--acc-400); box-shadow: inset 0 0 0 1px var(--acc-400); }

/* ==========================================================================
   blocks.css — 通用页面区块：Hero · 口径说明条 · 详情头 · 折扣等级卡 · 正文导语
                独立页面外壳（落地页 / 收口页 / 404 / 关于）在 pages.css
   依赖：tokens.css / base.css / components.css / cards.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero（首页首屏）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--sp-8) var(--sp-6);
  background-color: var(--bg-1);
  background-image: var(--grad-hero);
  border-bottom: 1px solid var(--line);
}
.hero::after {                          /* 暗场网格纹理，收在 Hero 内 */
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tex-grid);
  background-size: var(--tex-grid-size);
  opacity: .5;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: 25px; margin-bottom: var(--sp-3); max-width: var(--w-prose); }
.hero .hero-lead {
  color: var(--txt-2);
  max-width: var(--w-prose);
  margin-bottom: var(--sp-5);
}
.hero .hero-acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.hero-stats > div { font-size: 12.5px; color: var(--txt-3); }
.hero-stats b {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--acc-400);
  font-variant-numeric: tabular-nums;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-stats b {
    background-image: var(--grad-num);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (min-width: 768px) {
  .hero { padding-block: var(--sp-10) var(--sp-7); }
  .hero h1 { font-size: 34px; line-height: 1.2; }
}

/* --------------------------------------------------------------------------
   口径说明条（不做成"提示弹窗"，纯静态说明）
   -------------------------------------------------------------------------- */
.notice {
  max-width: var(--w-prose);
  border-left: 3px solid var(--line-strong);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--txt-3);
  font-size: 13px;
  line-height: 1.85;
}
.notice p + p { margin-top: 6px; }

/* --------------------------------------------------------------------------
   详情页头部（图标 + 标题 + 折扣 + 行动）
   -------------------------------------------------------------------------- */
.ghead {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding-block: var(--sp-4) var(--sp-5);
  flex-wrap: wrap;
}
.ghead .icon-big {
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: var(--r-icon);
  object-fit: cover;
  background: var(--bg-4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), var(--sh-inset);
}
.ghead .ghead-meta { flex: 1 1 260px; min-width: 0; }
.ghead h1 {
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
/* H1 里的版本后缀（如「送金吗喽」）：h1 是 flex，它自成一个 flex item，
   所以不需要手写间距。字号压到正文级，避免把 H1 读成一句更长的标题。 */
.ghead .ghead-ver {
  font-size: 13px;
  font-weight: 400;
  color: var(--txt-3);
}
.ghead .ghead-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-4);
}
.ghead .ghead-acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* 决策区的补充说明（设计稿 04：「新区 3 · 礼包 5 · 更新 10-07 · 无需安装盒子」） */
.ghead .ghead-note {
  margin-top: var(--sp-3);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--txt-3);
}
@media (min-width: 600px) {
  .ghead .icon-big { width: 108px; height: 108px; }
  .ghead h1 { font-size: 25px; }
  .ghead .ghead-ver { font-size: 14px; }
}

/* 二维码：放在详情页右栏下载卡内（≥1280 才显示，右栏本身在更窄视口是隐藏的）。
   窄屏不显示 —— 手机上扫自己屏幕上的码没有意义，还给窄屏省版面与带宽。 */
.qr-box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.qr-box img {
  width: 104px;
  height: 104px;
  padding: 5px;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.qr-box span { font-size: 13px; color: var(--txt-2); line-height: 1.7; }

/* --------------------------------------------------------------------------
   折扣专区：等级卡（对应画布 03 屏）
   -------------------------------------------------------------------------- */
.zhe-levels { display: grid; gap: var(--sp-3); }
.zhe-level {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 76px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.zhe-level:hover { box-shadow: inset 0 0 0 1px var(--acc-400); }
.zhe-level .zl-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.zhe-level .zl-info { flex: 1 1 auto; min-width: 0; }
.zhe-level .zl-name { display: block; font-size: 15px; font-weight: 700; color: var(--txt-1); }
.zhe-level .zl-count { display: block; font-size: 11.5px; color: var(--txt-3); margin-top: 2px; }
.zhe-level .zl-arrow { flex: none; color: var(--txt-3); display: flex; align-items: center; }
/* 三档色：与折扣角标同源 */
.zhe-level.is-s .zl-tag { background: var(--grad-hot); color: #1b0a12; }
.zhe-level.is-a .zl-tag { background: var(--grad-gold); color: #20140a; }
.zhe-level.is-b .zl-tag {
  background: rgba(56, 182, 255, .12);
  color: var(--cool-300);
  box-shadow: inset 0 0 0 1px rgba(56, 182, 255, .42);
}
.zhe-level.is-neutral .zl-tag { background: var(--bg-5); color: var(--txt-2); }
@media (min-width: 768px) {
  .zhe-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   正文导语（长文，收敛到唯一阅读宽度档）
   -------------------------------------------------------------------------- */
.intro {
  max-width: var(--w-prose);
  color: var(--txt-2);
  line-height: 1.9;
  margin-bottom: var(--sp-4);
}


/* --------------------------------------------------------------------------
   右侧栏卡片（XL 粘性栏用）
   -------------------------------------------------------------------------- */
.aside-card {
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.aside-card > h2 {
  font-size: 15px;
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.aside-card > h2::before {
  content: "";
  width: 3px;
  height: 13px;
  background: var(--acc-400);
  border-radius: 2px;
}
.aside-card .aside-list li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.aside-card .aside-list li:last-child { border-bottom: 0; }
.aside-card .aside-list li > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aside-card .aside-list li > .badge-discount { flex: none; }
.aside-card .aside-list .n { margin-left: auto; color: var(--txt-3); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   游戏截图条（详情页正文，简介下方）
   竖图 400×~864，横排；窄屏横向滚动而不是压成小方块 ——
   截图缩太小就失去「看画面」的意义，宁可让用户滑。
   宽度走 --shot-w 变量（由 <img> 的 width 属性给出），不写死。
   -------------------------------------------------------------------------- */
.shot-strip {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.shot-strip img {
  flex: none;
  height: 320px;
  width: auto;
  border-radius: var(--r-sm);
  background: var(--bg-4);
  border: 1px solid var(--line);
  object-fit: cover;
  scroll-snap-align: start;
}
/* 窄屏：图略高一些好滑，但不要高到一屏只剩图 */
@media (max-width: 599px) {
  .shot-strip img { height: 380px; }
}
/* 滚动条：细一点，别抢视觉 */
.shot-strip::-webkit-scrollbar { height: 6px; }
.shot-strip::-webkit-scrollbar-thumb { background: var(--bg-6); border-radius: 3px; }

/* ==========================================================================
   aside.css — 侧栏（设计稿 07/09 的三栏两侧）
     左 200px：游戏分类导航
     右 320px：站点数据 / 折扣热度榜 / 游戏盒子卡
   两侧的显示开关在 layout.css（.col-side / .col-aside 只在 ≥1280 出现）。
   这里只负责「长什么样」，不负责「什么时候出现」。
   依赖：tokens.css / base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   左侧：游戏分类导航
   -------------------------------------------------------------------------- */
.side-nav {
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-2);
}
.side-nav h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--txt-3);
  padding: 0 var(--sp-2) var(--sp-3);
}
.side-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--txt-2);
  /* 当前分类的琥珀竖条：用伪元素而不是 border，避免未选中项也占位 */
  position: relative;
}
.side-nav a:hover { background: var(--bg-4); color: var(--txt-1); }
.side-nav a[aria-current="page"] {
  background: var(--bg-4);
  color: var(--txt-1);
  font-weight: 700;
}
.side-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 2px;
  background: var(--acc-400);
}
.side-nav .n {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
.side-nav a[aria-current="page"] .n { color: var(--acc-300); }

/* 「近期开服日历」复用 .side-nav 外壳（同一个 200px 窄栏里的第二块，
   视觉上必须和分类导航是同一种卡），但内容是纯日期列表、没有计数。 */
.side-nav--plain { margin-top: var(--sp-4); }
.side-nav--plain a {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  padding-block: 7px;
}
.side-nav--plain .side-more {
  margin-top: var(--sp-1);
  font-size: 12.5px;
  color: var(--txt-3);
  justify-content: flex-end;
}
.side-nav--plain .side-more:hover { color: var(--acc-400); }

/* --------------------------------------------------------------------------
   右栏：站点数据（2×2 计数格）
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3);
}
.stat-grid b {
  display: block;
  font-family: var(--font-num);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--acc-300);
  font-variant-numeric: tabular-nums;
}
.stat-grid span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--txt-3);
}

/* --------------------------------------------------------------------------
   右栏：折扣热度榜（列表行，设计稿 03/07）—— 复用 .aside-card .aside-list
   -------------------------------------------------------------------------- */
.aside-card .aside-list .ico {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-icon);
  object-fit: cover;
  background: var(--bg-4);
}
.aside-card .aside-list .hl-name {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.aside-card .aside-list .hl-name > a,
.aside-card .aside-list .hl-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aside-card .aside-list .hl-name > .badge-discount { flex: none; }
.aside-card .aside-list .n { flex: none; font-size: 12px; }

/* --------------------------------------------------------------------------
   右栏：详情页下载卡头部（图标 + 游戏名 + 类型/规模信息，设计稿 09）
   -------------------------------------------------------------------------- */
.aside-card .ad-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.aside-card .ad-head .ico {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-icon);
  object-fit: cover;
  background: var(--bg-4);
}
.aside-card .ad-head .ad-name {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aside-card .ad-head .ad-sub {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--txt-3);
}

/* --------------------------------------------------------------------------
   右栏：游戏盒子卡（非模态二次引导，只在内容流固定位出现）
   -------------------------------------------------------------------------- */
.box-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.box-card .bc-main { min-width: 0; flex: 1 1 auto; text-align: left; }
.box-card .bc-t { font-size: 14px; font-weight: 700; }
.box-card .bc-d {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--txt-3);
}
.box-card .bc-act { flex: none; }

/* 320px 的侧栏塞不下「图标 + 名 + 角标 + 新区/礼包」四段：
   实测游戏名会被截成「十二战纪（6…」。按设计稿 07 只留前三段，
   全宽列表页（折扣专区等）不受影响，那里照旧显示第四段。 */
@media (min-width: 1280px) {
  .col-aside .aside-card .aside-list .n { display: none; }
}

/* ==========================================================================
   home.css — 首页 / 开服表页专用区块（设计稿 01/02/07/08）
     · 页头（H1 + 日期副行）
     · 分节标题右侧的计数
     · 首充折扣榜（移动端横滑 / 桌面 4 列）
     · 猜你想玩网格（固定 4 列，不随全站 6 列网格放大）
     · 今日动态四类标签流
   依赖：tokens.css / base.css / components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   页头：H1 + 日期副行（不用 .hero —— 首页首屏要直接交付卖点，不做宣传大图）
   -------------------------------------------------------------------------- */
.home-head { padding-block: var(--sp-5) var(--sp-3); }
.home-head h1 { font-size: 24px; }
.home-head .lead {
  color: var(--txt-2);
  font-size: 13.5px;
  line-height: 1.8;
  margin-top: 6px;
}
@media (min-width: 768px) {
  .home-head h1 { font-size: 28px; }
}

/* 分节标题右侧的计数（「今日 12 个新区」） */
.sec-head .sec-n {
  margin-left: auto;
  flex: none;
  font-size: 13px;
  color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
.sec-head .sec-n b { color: var(--acc-400); font-size: 15px; }

/* --------------------------------------------------------------------------
   首充折扣榜：移动/平板横滑（照设计稿的滑动卡），拉宽到 4 列
   -------------------------------------------------------------------------- */
.hscroll {
  display: flex;
  gap: var(--gap-card);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* 横滑区自带 8px 内边距，避免卡片阴影被滚动容器裁掉 */
  padding: 2px 2px 6px;
  margin: 0 -2px;
}
.hscroll > * { flex: 0 0 156px; scroll-snap-align: start; }
@media (min-width: 1024px) {
  .hscroll {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  .hscroll > * { flex: none; }
}

/* --------------------------------------------------------------------------
   固定 4 列网格（中心栏只有 596px，不能再跟全站的 6 列走）
   -------------------------------------------------------------------------- */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-card);
}
@media (min-width: 600px) { .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   今日动态：四类标签流（新区开服 / 新游上线 / 上新礼包 / 活动上新）
   -------------------------------------------------------------------------- */
.feed-list { display: block; }
.feed-list > li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.feed-list > li:last-child { border-bottom: 0; }
.feed-list .fl-tag {
  flex: none;
  min-width: 68px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--acc-400);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 32, .45);
}
.feed-list .fl-tag.is-new { color: var(--cool-500); box-shadow: inset 0 0 0 1px rgba(56, 182, 255, .45); }
.feed-list .fl-tag.is-gift { color: var(--hot-300); box-shadow: inset 0 0 0 1px rgba(255, 143, 168, .45); }
.feed-list .fl-tag.is-act { color: var(--ok-400); box-shadow: inset 0 0 0 1px rgba(46, 230, 176, .45); }
.feed-list .fl-txt {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-list .fl-txt a { color: var(--txt-1); }
.feed-list .fl-meta {
  flex: none;
  font-size: 12px;
  color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   首页信任条：<1280 显示（替代桌面右栏的「站点数据」卡），桌面隐藏避免重复
   -------------------------------------------------------------------------- */
.home-trust { margin-top: var(--sp-2); }
@media (min-width: 1280px) { .home-trust { display: none; } }

/* 首页移动端靠右栏承接的区块：窄屏补一条等效入口，别让内容凭空消失 */
.home-side-fallback { display: block; }
@media (min-width: 1280px) { .home-side-fallback { display: none; } }

/* ==========================================================================
   pages.css — 独立页面外壳：落地页 /lp/ · 404 · 关于页
                这几个页面不带站内导航/侧栏，是自成一套的整页版式，
                所以从 blocks.css 拆出来单列一层，避免通用区块层被撑爆。
   依赖：tokens.css / base.css / components.css / cards.css / blocks.css / aside.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   落地页 /lp/（无导航，供投放）
   -------------------------------------------------------------------------- */
.lp {
  max-width: 620px;
  margin-inline: auto;
  padding: var(--sp-7) var(--sp-4) var(--sp-8);
  text-align: center;
}
.lp .icon-big {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-icon);
  object-fit: cover;
  background: var(--bg-4);
}
.lp h1 { font-size: 25px; margin-bottom: var(--sp-2); }
.lp .lp-disc { margin-bottom: var(--sp-3); }
.lp .lp-sub { color: var(--acc-400); font-size: 15px; margin-bottom: var(--sp-5); }
.lp .btn { width: 100%; max-width: 380px; }
.lp .lp-desc {
  text-align: left;
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin: var(--sp-5) 0;
  font-size: 14.5px;
  color: var(--txt-2);
}
.lp .lp-qr { margin-top: var(--sp-6); }
.lp .lp-qr img {
  width: 120px;
  height: 120px;
  margin-inline: auto;
  padding: 5px;
  border-radius: var(--r-sm);
  background: #fff;
}
.lp .lp-qr p { color: var(--txt-3); font-size: 13px; margin-top: var(--sp-2); }
.lp .lp-pts { margin-top: var(--sp-5); display: flex; justify-content: center; }
.lp .lp-beian { margin-top: var(--sp-7); font-size: 12px; }
.lp .lp-beian a { color: var(--txt-3); }
.lp .lp-beian a:hover { color: var(--acc-400); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.notfound { padding-block: var(--sp-9) var(--sp-8); text-align: center; }
.notfound .nf-code {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--acc-400);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.notfound p { color: var(--txt-2); margin-bottom: var(--sp-6); }
.notfound .tags { justify-content: center; }

/* --------------------------------------------------------------------------
   关于页
   -------------------------------------------------------------------------- */
.about-links { margin-top: var(--sp-5); }