/* ===========================================================
   折扣手游库 · 站点样式
   -----------------------------------------------------------
   设计方向：工业实用（Industrial）

   为什么选这个方向 —— 本站真正的资产是**结构化数据**：
   折扣档位、开服记录、VIP 门槛表、包体大小、同类参数对比。
   访客要判断"值不值得玩"，靠的是这些数字，不是漂亮的插图。
   所以视觉上不去堆装饰，而是把数字、表格、层级做准做实，
   让人一眼感到"这里数据全、数据准、能对比"。

   记忆点：折扣角标 —— 每张游戏卡封面上钉一枚价签式标记，
   把"折扣"这个本站最核心的差异价值变成最强的视觉符号。

   性能约束（硬）：百度要求首屏 ≤2 秒。
     · 不加载中文字体（思源等动辄数 MB），中文走系统字体栈
     · 仅自托管 Oswald latin 子集（2 档字重共 25KB）用于数字与拉丁字符
     · 零 JS：全部动效为 CSS，爬虫友好、无阻塞
   =========================================================== */

/* ---------- 字体：仅数字与拉丁 ---------- */
/* 中文不引 webfont：中文字库动辄数 MB，会直接吃掉首屏预算。
   数字与拉丁符号的子集只要 12KB，收益远大于成本。
   字体本地自托管 —— 依赖外部 CDN 在国内服务器上会拖慢甚至静默失败。 */
@font-face {
  font-family: 'Oswald';
  src: url('/static/fonts/oswald-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('/static/fonts/oswald-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- 表面 ---- */
  --bg: #f5f4f2;            /* 暖白底，不用纯白：纯白 + 纯黑太硬，也显廉价 */
  --surface: #ffffff;
  --surface-2: #fafaf9;     /* 次级面：表头、浅块 */
  --dark: #12151c;          /* 深墨：头部、强调块 */
  --dark-2: #1e232d;

  /* ---- 文字（对比度已实测）---- */
  --ink: #14171d;           /* 15.2:1 正文 */
  --ink-2: #59606d;         /*  6.3:1 次要 */
  --ink-3: #757b86;         /*  4.6:1 弱化（仍达标，不为了好看牺牲可读）*/
  --ink-inv: #f4f5f7;

  /* ---- 线 ---- */
  --line: #e7e5e1;          /* 发丝线 */
  --line-2: #d8d5cf;
  --line-inv: rgba(255, 255, 255, .11);

  /* ---- 强调：炽橙，只给折扣与关键动作 ---- */
  --accent: #ff4f12;        /* 亮橙：角标、强调线、图标 */
  --accent-deep: #c93800;   /* 深橙：需要高对比的底色（白字 5.5:1）*/
  --accent-wash: #fff3ed;   /* 橙浅底 */
  --accent-ink: #b83200;    /* 橙浅底上的文字 */

  /* ---- 语义 ---- */
  --ok: #0f7a4a;
  --warn: #a8802c;

  /* ---- 圆角 ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ---- 间距梯度（纵向节奏靠它，不手写魔法数字）---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* ---- 阴影：三级高度，带环境色而非纯黑 ---- */
  --sh1: 0 1px 2px rgba(20, 23, 29, .05), 0 1px 1px rgba(20, 23, 29, .04);
  --sh2: 0 4px 14px rgba(20, 23, 29, .07), 0 1px 3px rgba(20, 23, 29, .05);
  --sh3: 0 14px 34px rgba(20, 23, 29, .11), 0 3px 8px rgba(20, 23, 29, .06);
  --sh-accent: 0 4px 14px rgba(201, 56, 0, .30);

  /* ---- 字阶 ---- */
  --f-num: 'Oswald', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
            'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
            'Helvetica Neue', Arial, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Consolas', 'Liberation Mono', monospace;

  --t-xs: 11px;
  --t-sm: 12.5px;
  --t-base: 14.5px;
  --t-md: 16px;
  --t-lg: 19px;
  --t-xl: 24px;
  --t-2xl: 30px;
  --t-3xl: 40px;

  /* 氛围光：极低饱和的暖/冷光斑，让纯色底不平。
     浓度刻意压到 5%–7% —— 数据站要的是"有质感"，不是"有颜色"。 */
  --glow-warm: rgba(255, 79, 18, .070);
  --glow-cool: rgba(64, 98, 186, .055);

  --lh-tight: 1.15;
  --lh-snug: 1.42;
  --lh-body: 1.75;          /* 中文行高 ≥1.7 才不挤 */

  /* ---- 动效 ---- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: ease-out;
  --dur1: 160ms;
  --dur2: 320ms;
  --dur3: 600ms;

  --max: 960px;
}

/* ===========================================================
   基础
   =========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--bg);
  /* 氛围层：三束极淡的光斑（右上暖橙 / 左上冷蓝 / 底部压暗）。
     纯色平铺是"看着能跑但没设计"的典型信号 —— 大面积留白需要一点点
     环境色才不像一块死灰。浓度全部压在 5%–7%：
     数据站要的是"有质感"，不是"能看出颜色"。
     用多层 radial-gradient 而不是伪元素，避免层叠上下文把内容压到下面。 */
  background-image:
    radial-gradient(70rem 45rem at 82% -14%, var(--glow-warm), transparent 62%),
    radial-gradient(58rem 42rem at -12% 6%, var(--glow-cool), transparent 60%),
    radial-gradient(64rem 48rem at 50% 112%, rgba(20, 23, 29, .045), transparent 64%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  letter-spacing: .012em;   /* 中文微量字距，密排下更透气 */
  -webkit-font-smoothing: antialiased;
}

/* iOS 上 fixed 背景会显著拖慢滚动，窄屏直接降级为随内容滚动 */
@media (max-width: 767px) {
  body { background-attachment: scroll; }
}

a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur1) var(--ease-out);
}
a:hover { color: var(--accent-deep); }

img {
  max-width: 100%;
  height: auto;
  display: block;
  background: var(--surface-2);
}

/* 数字统一用 Oswald + 等宽对齐 —— 折扣、包体、开服时间都靠它出"行情感" */
.num,
.tbl td.nowrap,
.gi-badge,
.facts-i dd,
.insight li b {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* 键盘焦点必须看得见 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s3);
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ===========================================================
   头部
   =========================================================== */

/* 深色头部：给全站一个稳定的"顶部锚点"，也让白色卡片区更亮。
   用两段渐变 + 一层极淡的斜向纹理，避免大色块死平。 */
.hd {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--dark);
  background-image:
    linear-gradient(180deg, #191d26 0%, var(--dark) 62%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px);
  background-blend-mode: normal, overlay;
  border-bottom: 1px solid rgba(255, 79, 18, .30);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 18px rgba(20, 23, 29, .16);
}

.hd-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 11px var(--s3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-inv);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1.2;
}
/* 品牌标记：左侧一道橙色竖条，呼应卡片标题的强调线 */
.logo::before {
  content: '';
  width: 3px;
  height: 17px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  box-shadow: 0 0 10px rgba(255, 79, 18, .55);
}
.logo:hover { color: var(--ink-inv); }

.hd-nav {
  display: flex;
  gap: 2px;
  font-size: var(--t-sm);
}

/* 导航做成 pill：触屏上每个都 ≥44px 高，好点 */
.hd-nav a {
  color: rgba(244, 245, 247, .74);
  padding: 0 var(--s3);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background var(--dur1) var(--ease-out), color var(--dur1) var(--ease-out);
}
.hd-nav a:hover {
  background: rgba(255, 79, 18, .16);
  color: #fff;
}

/* 窄屏：导航横向滚动，不折行不挤压 logo */
@media (max-width: 560px) {
  .hd-in { padding: 9px var(--s3); gap: var(--s2); }
  .logo { font-size: 16px; }
  .hd-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    font-size: var(--t-xs);
  }
  .hd-nav::-webkit-scrollbar { display: none; }
  .hd-nav a { padding: 0 9px; min-height: 30px; }
}

/* ===========================================================
   面包屑
   =========================================================== */

.crumb {
  font-size: var(--t-xs);
  color: var(--ink-3);
  padding: var(--s3) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--accent-deep); }
.crumb i { font-style: normal; margin: 0 5px; color: var(--line-2); }

/* ===========================================================
   卡片
   =========================================================== */

/* 卡片有真实高度（阴影），不再是"白纸贴在一起" */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin-top: var(--s3);
  box-shadow: var(--sh1);
}

.card > h1,
.card > h2,
.sec-title {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--s4);
  padding-left: 11px;
  border-left: 3px solid var(--accent);
  letter-spacing: .012em;
}
/* 页面主标题（各聚合页的 h1）比区块标题大一档，体现"这是本页主题"。
   只提 2px 是刻意的：补 h1 是为了语义结构（每页该有一个 h1），
   不是为了改版面，所以不做激进调整。 */
.card > h1 { font-size: 19px; }
.card .sub {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: .01em;
}

/* ===========================================================
   游戏卡 —— 全站最主要的视觉单元
   =========================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
@media (min-width: 620px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 880px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.gi {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh1);
  transition: transform var(--dur2) var(--ease),
              box-shadow var(--dur2) var(--ease),
              border-color var(--dur2) var(--ease);
}
/* 悬停上浮 + 封面上浮：让"可点"这件事有物理感 */
@media (hover: hover) {
  .gi:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh3);
    border-color: var(--line-2);
  }
  .gi:hover .gi-cover img { transform: scale(1.07); }
  .gi:hover .gi-name { color: var(--accent-deep); }
}

.gi-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #eef0f3, #e4e7ec);
}
.gi-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur3) var(--ease);
}

/* ★ 记忆点：折扣角标
   价签形态（左上角、右下一角切平），压在封面上。
   用深橙底保证白字 5.5:1 的对比度，而不是为了亮牺牲可读。 */
.gi-badge {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 3px 9px 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  border-radius: var(--r-md) 0 var(--r-sm) 0;
  box-shadow: var(--sh-accent);
  z-index: 2;
}
.gi-badge i {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  opacity: .92;
}
/* 无折扣时不渲染角标。
   上游有相当一部分游戏没填折扣字段 —— 那不代表"真的没折扣"，
   标一个"无折扣"等于替上游下结论，会误导访客。
   宁可留白：也让橙色角标（有折扣）在列表里更跳。 */
/* 榜单名次：右下角的小号数字牌，与折扣角标形成对角呼应 */
.gi-rank {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 26px;
  padding: 2px 7px 3px;
  text-align: center;
  font-family: var(--f-num);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  background: linear-gradient(150deg, rgba(30, 35, 45, .88), rgba(18, 21, 28, .92));
  backdrop-filter: blur(2px);
  border-radius: var(--r-md) 0 0 0;
}
/* 前三名给一点金属感 —— 榜单页的注意力引导 */
.gi-rank-top {
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  box-shadow: var(--sh-accent);
}

.gi-body {
  padding: 9px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.gi-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.42;
  margin: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.84em;
  transition: color var(--dur1) var(--ease-out);
}

.gi-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: auto;
}
/* 包体等数字用 Oswald，与折扣形成同族的"数据感" */
.gi-meta > span:not(.tag) {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* 榜单入选理由（此前完全没有样式，裸奔） */
.gi-reason {
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  padding: 6px 8px;
  background: var(--surface-2);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===========================================================
   标签
   =========================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 18px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  background: var(--accent-wash);
  color: var(--accent-ink);
  white-space: nowrap;
}
.tag-gray { background: #f0f1f4; color: var(--ink-2); font-weight: 500; }
.tag-dim {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-weight: 400;
}
a.tag-dim:hover {
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-color: #f6d3c2;
}

/* ===========================================================
   详情页 Hero（深色）
   -----------------------------------------------------------
   此前详情页顶部是两张白卡（游戏信息 + 独立的下载条），
   与其他内容卡视觉等重，首屏没有一个"这是主内容"的锚点。
   改成深色区后：① 与下方数据卡形成明确的主次；
   ② 下载动作被提到首屏最显眼处；③ 少一张卡，页面更紧凑。
   =========================================================== */

.dhero {
  position: relative;
  overflow: hidden;
  margin-top: var(--s3);
  padding: var(--s5) var(--s4) var(--s4);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, #1d222d 0%, var(--dark) 56%);
  box-shadow: var(--sh3);
  animation: rise var(--dur2) var(--ease) backwards;
}
/* 右上角一束暖光 + 极淡斜纹，呼应全站的氛围语言 */
.dhero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(30rem 19rem at 90% -28%, rgba(255, 79, 18, .34), transparent 62%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 8px);
}

.dhero-in {
  position: relative;
  display: flex;
  gap: var(--s4);
}

.dhero-cover {
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .10);
}
.dhero-cover img { width: 100%; height: 100%; object-fit: cover; }

.dhero-info { flex: 1; min-width: 0; }
.dhero-info h1 {
  font-size: clamp(19px, 3.1vw, 25px);
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: .004em;
}

.dhero-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.dhero-tags-dim { margin-bottom: 11px; }

.dhero-meta {
  font-size: var(--t-xs);
  color: rgba(244, 245, 247, .60);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 15px;
}
.dhero-meta b {
  font-weight: 600;
  color: #fff;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
}

/* 深色底上的标签：白字 + 半透明底，层级靠透明度而非色相区分 */
.tag-hot {
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-weight: 700;
  box-shadow: var(--sh-accent);
}
.tag-inv {
  background: rgba(255, 255, 255, .115);
  color: rgba(255, 255, 255, .92);
  font-weight: 500;
}
a.tag-inv:hover { background: rgba(255, 255, 255, .20); color: #fff; }
.tag-ghost {
  background: transparent;
  color: rgba(255, 255, 255, .56);
  border: 1px solid rgba(255, 255, 255, .17);
  font-weight: 400;
}
a.tag-ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .07);
}

/* ===========================================================
   下载按钮
   =========================================================== */

.dhero-dl {
  position: relative;
  display: flex;
  gap: var(--s3);
  margin-top: var(--s5);
}

.btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: #fff;
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: .02em;
  min-height: 50px;
  padding: 0 var(--s4);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #e8450d 0%, var(--accent-deep) 100%);
  box-shadow: var(--sh-accent), 0 1px 0 rgba(255, 255, 255, .22) inset;
  transition: transform var(--dur1) var(--ease-out),
              box-shadow var(--dur1) var(--ease-out),
              filter var(--dur1) var(--ease-out);
}
.btn:hover {
  color: #fff;
  filter: brightness(1.06);
  box-shadow: 0 7px 22px rgba(201, 56, 0, .38), 0 1px 0 rgba(255, 255, 255, .22) inset;
}
.btn:active { transform: translateY(1px) scale(.995); }

/* 次要动作（iOS）：描边款，视觉上退一档但不至于点不到。
   深色 Hero 里另有一套配色 —— 白底描边在墨底上会糊成一团，
   改为半透明白描边 + 白字（见下方 .dhero-dl 覆盖）。 */
.btn-ghost {
  background: var(--surface);
  color: var(--accent-deep);
  border: 1.5px solid var(--accent);
  box-shadow: var(--sh1);
}
.btn-ghost:hover {
  color: #fff;
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  box-shadow: var(--sh-accent);
}
.dhero-dl .btn-ghost {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  border-color: rgba(255, 255, 255, .30);
  box-shadow: none;
}
.dhero-dl .btn-ghost:hover {
  background: rgba(255, 255, 255, .17);
  border-color: rgba(255, 255, 255, .58);
  color: #fff;
  box-shadow: none;
}

.dl-note {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: var(--s3) 0 0;
  line-height: 1.62;
}
.dl-note a { color: var(--accent-deep); font-weight: 500; }

/* ===========================================================
   信息表（游戏信息四宫格）
   =========================================================== */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
@media (min-width: 620px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.facts-i { background: var(--surface); padding: 11px var(--s3); margin: 0; }
.facts-i dt {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: 0 0 4px;
  letter-spacing: .02em;
}
.facts-i dd {
  font-size: var(--t-md);
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

/* ===========================================================
   正文
   =========================================================== */

.prose {
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: #2b3038;
}
.prose p { margin: 0 0 var(--s3); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* 福利/返利区块：上游给的是多行文本（VIP 门槛表尤其明显），
   默认会把换行折叠成空格，把「1 0.05 / 2 0.25 / 3 2.5」压成一串读不出档位的数字。
   用 pre-line 保住换行（连续空格仍折叠，避免上游的制表符把行撑爆）。 */
.prose-feat p { white-space: pre-line; }
.prose-feat strong { display: inline; }

/* 首页主标题：承载大词。
   不过度放大 —— 百度对首页的权重来自文本本身，
   夸张的字号只会挤掉首屏内容、拉低停留。 */
/* 首页主标题
   ★ 字号不是越大越好，前提是「这行文字本身适合被放大」。
   曾把 h1 做到 36px 去凑「标题 / 正文 2.5×」的设计基准，结果那行
   「手游下载_手机游戏下载大全」被放大成了首屏最扎眼、也最不像人话的东西 ——
   下划线串起来的关键词是 <title> 的写法，不该搬到页面上当大标题。
   现在 h1 用短词，字号收到 30px：层级依然清楚，也不再突兀。 */
.hero-h1 {
  font-size: clamp(23px, 3.8vw, 30px);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 7px;
  letter-spacing: -.004em;
}

/* 首页副标题：承接「手机游戏下载大全」这类完整说法与规模信息。
   放在 h1 之外而不是塞进 h1 —— 让 h1 保持短而干净；
   完整关键词由 <title> 覆盖，h1 里再堆一遍不增加权重，只增加违和感。 */
.hero-lead {
  margin: 0 0 var(--s4);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink-2);
}

/* 首屏规模数据条
   首屏只有标题 + 导航时右侧会空掉一大片；补一条数据带既填满视线，
   也立刻回答访客最关心的"这里有多少东西"。数字走 Oswald，
   与卡片角标、表格数字同一套语言，强化"数据终端"的印象。 */
.hero-stat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin: 0 0 var(--s4);
}
@media (min-width: 620px) {
  .hero-stat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hs-i {
  background: var(--surface-2);
  padding: 11px var(--s3);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.hs-i b {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--accent-deep);
}
.hs-i span {
  font-size: var(--t-xs);
  color: var(--ink-2);
  letter-spacing: .01em;
}

/* 品类数据观察
   手写的品类说明在前，这段是本站按实时数据生成的分布情况。
   用一条虚线分隔而不是彩色边框 —— 内容本身就该区分得清，
   不需要再加一层装饰色。 */
.cat-insight {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px dashed var(--line);
  font-size: var(--t-sm);
  line-height: 1.8;
  color: var(--ink-2);
}

/* ===========================================================
   同类横向对比
   =========================================================== */

.cmp { list-style: none; padding: 0; margin: 0; }
.cmp li {
  font-size: var(--t-base);
  line-height: 1.78;
  color: #2b3038;
  padding: 10px 0 10px 20px;
  border-bottom: 1px dashed var(--line);
  position: relative;
}
.cmp li:last-child { border-bottom: 0; padding-bottom: 0; }
.cmp li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* ===========================================================
   常见问题
   =========================================================== */

.faq { margin: 0; }
.faq dt {
  font-size: var(--t-base);
  font-weight: 600;
  margin: var(--s4) 0 6px;
  padding-left: 18px;
  position: relative;
  color: var(--ink);
}
.faq dt::before {
  content: 'Q';
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--f-num);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--accent);
}
.faq dt:first-child { margin-top: 0; }
.faq dd {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.8;
  margin: 0;
}

/* ===========================================================
   截图
   =========================================================== */

.shots {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.shots .shot { flex: 0 0 auto; display: block; line-height: 0; }
.shots img {
  flex: 0 0 auto;
  width: 134px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  box-shadow: var(--sh1);
  transition: transform var(--dur2) var(--ease), box-shadow var(--dur2) var(--ease);
}
@media (hover: hover) {
  .shots .shot:hover img {
    transform: translateY(-3px);
    box-shadow: var(--sh2);
  }
}

/* ===========================================================
   数据表格 —— 本站"专业感"的主要来源
   =========================================================== */

.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.tbl th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-2);
  font-size: var(--t-xs);
  letter-spacing: .03em;
  padding: 9px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: #2b3038;
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
/* 斑马纹：中文小字密排时，靠它对齐读数 */
.tbl tbody tr:nth-child(even) { background: rgba(250, 250, 249, .8); }
.tbl tbody tr { transition: background var(--dur1) var(--ease-out); }
@media (hover: hover) {
  .tbl tbody tr:hover { background: var(--accent-wash); }
}
.tbl td.nowrap {
  white-space: nowrap;
  font-size: var(--t-sm);
}
/* 当前页所在行：整行点亮，一眼定位 */
.tbl tr.on,
.tbl tbody tr.on:nth-child(even) { background: var(--accent-wash); }
.tbl tr.on td { color: var(--accent-ink); font-weight: 600; }
.tbl tr.on:hover { background: #ffe9df; }

.tbl .cur {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 600;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--accent-deep);
  color: #fff;
  vertical-align: 1px;
}

/* 下一组开服：把最有时效性的信息提到表格上方，做成一条"播报" */
.next-server {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  background: linear-gradient(90deg, var(--accent-wash), var(--surface-2));
  border: 1px solid #f6d9cb;
  border-radius: var(--r-sm);
  padding: 10px var(--s3);
  margin: 0 0 var(--s3);
}
.next-server::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 79, 18, .18);
}
.next-server b {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
  font-weight: 600;
}

/* ===========================================================
   时间线
   =========================================================== */

.tl { list-style: none; padding: 0; margin: 0; }
.tl li {
  font-size: var(--t-sm);
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  color: #2b3038;
}
.tl li:last-child { border-bottom: 0; }
.tl time {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-size: var(--t-xs);
  margin-right: 9px;
}

/* ===========================================================
   手游数据分析 —— 本站独家推导结论
   =========================================================== */

.insight {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 620px) {
  .insight { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
}

.insight li {
  font-size: 13.5px;
  line-height: 1.75;
  color: #2b3038;
  padding: 9px 0 9px var(--s3);
  border-bottom: 1px dashed var(--line);
  border-left: 2px solid var(--line);
}
.insight li b {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-wash);
  padding: 1px 7px;
  border-radius: var(--r-xs);
  margin-right: 8px;
  vertical-align: 1px;
}
.insight li span { color: #2b3038; }

/* 这是本站独有内容，给一层浅底 + 左侧橙线，与外链内容形成区分 */
.insight-box {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 2px var(--s3);
  background: linear-gradient(180deg, #fdfcfc, var(--surface));
}

/* ===========================================================
   可领礼包
   =========================================================== */

.gift-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s4);
}
.gift-list li {
  font-size: 13px;
  color: #2b3038;
  padding: 8px 0 8px 22px;
  border-bottom: 1px dashed var(--line);
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.95em;
}
.gift-list li::before {
  content: '礼';
  position: absolute;
  left: 0;
  top: 9px;
  width: 15px;
  height: 15px;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  border-radius: 3px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 600;
}
.gift-list li:nth-last-child(-n+2) { border-bottom: 0; }

/* ===========================================================
   人工备注
   =========================================================== */

.note {
  background: #fffcF5;
  border: 1px solid #f2e4c9;
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  padding: var(--s3);
  font-size: 13.5px;
  line-height: 1.8;
  color: #5c4a20;
}
.note b {
  display: block;
  font-size: var(--t-xs);
  color: var(--warn);
  margin-bottom: 5px;
  font-weight: 600;
}

/* ===========================================================
   分页
   =========================================================== */

.pager {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--s4) 0 0;
}
.pager a,
.pager span {
  min-width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  padding: 0 11px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--f-num);
  font-size: var(--t-base);
  color: var(--ink-2);
  transition: all var(--dur1) var(--ease-out);
}
.pager a:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--accent-wash);
}
.pager .on {
  background: linear-gradient(180deg, #e8450d, var(--accent-deep));
  border-color: var(--accent-deep);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sh-accent);
}

/* ===========================================================
   品类 / 折扣导航
   =========================================================== */

.cats { display: flex; flex-wrap: wrap; gap: 7px; }

.cats a {
  font-size: 13px;
  padding: 8px 14px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: all var(--dur1) var(--ease-out);
}
.cats a:hover {
  background: var(--accent-wash);
  border-color: #f6d3c2;
  color: var(--accent-deep);
  transform: translateY(-1px);
}

/* 折扣档位导航：与品类导航区分开，做出"重点入口"的重量（此前无样式） */
.cats-sub { margin-top: var(--s3); }
.cats-sub a {
  background: linear-gradient(180deg, #fff5f0, var(--accent-wash));
  border-color: #f8d9ca;
  color: var(--accent-ink);
  font-weight: 600;
}
.cats-sub a:hover {
  background: linear-gradient(180deg, #ffe9df, #ffe0d2);
  color: var(--accent-deep);
}

/* ===========================================================
   站内搜索
   =========================================================== */

/* 输入框做成大号胶囊：这是页面上唯一的目标，值得占满一整行。
   高度 48px 也满足触屏 ≥44px 的最小点击目标。 */
.search-box input {
  width: 100%;
  height: 50px;
  padding: 0 var(--s4);
  font-family: inherit;
  font-size: var(--t-md);
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--dur1) var(--ease-out),
              background var(--dur1) var(--ease-out),
              box-shadow var(--dur1) var(--ease-out);
}
.search-box input::placeholder { color: var(--ink-3); }
.search-box input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.sr-list { list-style: none; padding: 0; margin: 0; }
.sr-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--t-base);
}
.sr-list li:last-child { border-bottom: 0; }
.sr-list li a { font-weight: 600; }
.sr-list li span {
  flex: 0 0 auto;
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sr-list .sr-empty {
  display: block;
  color: var(--ink-3);
  text-align: center;
  padding: var(--s5) 0;
}

/* ===========================================================
   页脚
   =========================================================== */

.ft {
  margin-top: var(--s6);
  padding: var(--s5) var(--s3) var(--s6);
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.95;
  text-align: center;
  border-top: 1px solid var(--line);
}
.ft a { color: var(--ink-2); }
.ft a:hover { color: var(--accent-deep); }
.ft .sep { margin: 0 7px; color: var(--line-2); }
.ft-icp { color: var(--ink-3); }

/* ===========================================================
   动效：一次编排好的入场序列
   （零 JS —— 纯 CSS，不动 opacity 以外的属性，无布局抖动）
   =========================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.card {
  animation: rise var(--dur2) var(--ease) backwards;
}
/* 错峰 70ms：连续但不拖沓，四段以内结束 */
.wrap > .card:nth-of-type(1) { animation-delay: 0ms; }
.wrap > .card:nth-of-type(2) { animation-delay: 70ms; }
.wrap > .card:nth-of-type(3) { animation-delay: 140ms; }
.wrap > .card:nth-of-type(4) { animation-delay: 200ms; }
.wrap > .card:nth-of-type(n+5) { animation-delay: 240ms; }

/* 首屏网格里的卡片轻微错峰，避免整片同时出现 */
.grid > .gi {
  animation: rise var(--dur2) var(--ease) backwards;
}
.grid > .gi:nth-child(1)  { animation-delay: 40ms; }
.grid > .gi:nth-child(2)  { animation-delay: 80ms; }
.grid > .gi:nth-child(3)  { animation-delay: 120ms; }
.grid > .gi:nth-child(4)  { animation-delay: 160ms; }
.grid > .gi:nth-child(5)  { animation-delay: 200ms; }
.grid > .gi:nth-child(6)  { animation-delay: 240ms; }
.grid > .gi:nth-child(n+7) { animation-delay: 280ms; }

/* ---- 滚动进入动效（渐进增强）----
   游戏卡改由"滚动到哪、浮到哪"驱动，比统一入场更贴合浏览节奏 ——
   列表往下拉时一张张浮起，而不是一进页面就全部演完。
   用 animation-timeline: view()，只有 Chrome/Edge 115+ 支持；
   @supports 之外的浏览器不应用这套规则，保留上面那套入场动画，
   卡片同样可见 —— 动效永远不能是"内容可见性"的前提。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grid > .gi {
      animation-name: rise;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      /* 在元素刚露头的阶段完成，避免"滑到一半才出现"的迟滞感 */
      animation-range: entry 6% cover 30%;
    }
  }
}

/* 动效降级：必须给，不能省。
   关掉所有动画与过渡，元素直接以最终态呈现。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card, .grid > .gi { animation: none; opacity: 1; transform: none; }
}

/* ===========================================================
   窄屏微调
   =========================================================== */

@media (max-width: 420px) {
  .card { padding: var(--s3); border-radius: var(--r-md); }
  .dhero { padding: var(--s4) var(--s3) var(--s3); border-radius: var(--r-md); }
  .dhero-in { gap: var(--s3); }
  .dhero-cover { flex-basis: 84px; width: 84px; height: 84px; }
  .dhero-info h1 { font-size: 18px; }
  .dhero-dl { gap: var(--s2); margin-top: var(--s4); }
  .btn { font-size: var(--t-base); min-height: 48px; padding: 0 var(--s3); }
  .grid { gap: var(--s2); }
  .gift-list { grid-template-columns: 1fr; }
  .gift-list li:nth-last-child(-n+2) { border-bottom: 1px dashed var(--line); }
  .gift-list li:last-child { border-bottom: 0; }
}