/* ============================================================
   patterns.css — 页面级组合件（由通用组件拼出来的整块）
   玩法卡 / 清单行 / 平台分组 / 步骤卡 / 问答 / 免责 / 信息格 / 装饰
   ============================================================ */

/* ---------------- 玩法导航卡 ---------------- */
.play-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-11);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: transform .15s ease, box-shadow .15s ease;
}
.play-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .38);
  text-decoration: none;
}
.play-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.play-card__desc {
  color: var(--text-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  flex: 1;
}
.play-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block-start: var(--sp-6);
  border-top: 1px solid var(--line);
}
.play-card__count { font-size: var(--fs-xs); font-weight: 600; }
.play-card__arrow { flex: 0 0 auto; opacity: .9; }

/* 说明：原来这里有一组 .dl-list / .dl-row / .dl-row__plat / .dl-row__tag，
   服务于详情页首屏的「可下载客户端」清单。该模块已整块删除，
   规则一并清掉（清单本身改由 .flist 呈现安装包文件名）。 */

/* ---------------- 全量目录行（列表页） ----------------
   一行只放四样：序号、标题、一句话介绍、下载动作。
   平台信息已经写进简介里，不再单列一列元信息，避免同一句话说两遍。 */
.cat-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  counter-reset: cat;
}
.cat-row {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  padding: 15px 22px;
  border-radius: var(--r-block);
  background: var(--surface);
  counter-increment: cat;
}
/* 序号用计数器而不是写死数字：搜索隐藏掉的行不计数，筛完剩下的序号自动连续 */
.cat-row::before {
  content: counter(cat);
  flex: 0 0 auto;
  min-width: 28px;
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}
.cat-row__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
}
.cat-row__title {
  color: var(--text);
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.cat-row__brief {
  color: var(--text-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.cat-row__act { flex: 0 0 auto; }

/* 非「可下载」状态：退化成灰片，不给可点链接，避免点了没东西 */
.cat-off {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--r-btn);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* ---------------- 步骤卡 ---------------- */
.step-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: 22px 24px;
  border-radius: var(--r-block);
  background: var(--surface);
}
.step-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.step-card__num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--brand-surface);
  color: var(--brand-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.step-card__name {
  color: var(--text);
  font-size: var(--fs-card);
  font-weight: 700;
}
.step-card__desc {
  color: var(--text-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

/* 序号大字版（游戏介绍页 / 下载指南页） */
.step-card--big { gap: var(--sp-4); border-radius: var(--r-block); }
.step-card--big .step-card__num {
  width: auto; height: auto;
  background: none;
  color: var(--brand-ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.step-card--big .step-card__name { font-size: var(--fs-card); }

/* 方向卡底部的计数行（游戏介绍页四方向）；颜色随卡片由行内给 */
.step-card__count {
  font-size: var(--fs-2xs);
  font-weight: 600;
}

/* 平台安装卡（下载指南页）：圆点 + 平台名 + 要点行 */
.plat-dot {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-mark);
}
.plat-dot--teal   { background: var(--teal); }
.plat-dot--off    { background: var(--dot-off); }
.plat-dot--violet { background: var(--violet); }
.plat-dot--amber  { background: var(--amber); }

/* ---------------- 问答 / 免责条目 ---------------- */
.qa, .legal-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 20px 24px;
  border-radius: var(--r-card-sm);
  background: var(--surface);
}
.qa__q {
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: 700;
}
.qa__a {
  color: var(--text-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  /* 存档路径这类长串没有空格，不强制换行会横向溢出（移动端实测） */
  overflow-wrap: anywhere;
}

/* 免责条目：序号 + 文字（外层盒与 .qa 同形，见上方合并规则） */
.legal-card__num {
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.legal-card--warn .legal-card__num { color: var(--amber); }
.legal-card__text {
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* ---------------- 亮点行（✓ 同格融合机制 —— …） ---------------- */
.hl-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.hl-row__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-mark);
}
.hl-row__icon svg { width: 9px; height: 9px; }
.hl-row__text {
  color: var(--text);
  font-size: var(--fs-sm);
}

/* ---------------- 小节标题（正文内的三段：游戏介绍 / 玩法机制 / 版本特色） ----------------
   这三段曾经借用 .step-card__name（那是「卡片里的标题」），可它们并不在卡片里，
   渲染成一行悬空粗体字，和区块标题撞脸、层级全乱。改成带序号圆牌的小节头。 */
.sub-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--text);
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: var(--lh-snug);
}
.sub-head__n {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--brand-surface);
  color: var(--brand-ink);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
/* 正文段落之间给足呼吸：.p + .p 只有 6px，连着三段读起来是一坨 */
.stack-2 > .prose + .prose { margin-top: var(--sp-5); }

/* 编号小标题 → 它自己的正文：.stack-2 的 6px 粘得像同一行（放大目检字面几乎挨着）。
   抬到 12px = 6px 间距 + 6px 外边距，仍明显小于段间 stack-8(18px)，
   所以纵向归属不会反过来 —— 小标题依然贴自己的正文。 */
.stack-2 > .sub-head + .prose { margin-top: var(--sp-2); }

/* ---------------- 信息格（配置要求 / 关键事实） ----------------
   左标签 + 右内容的小格。条目数3~4 条不等，
   用 auto-fill + minmax 让能排一行的排一行；
   最后一行剩 1~2 格时不再留半行空缺——.info-cell 是独立卡片
   （不是 1px 网格线连排），空位就是空位，不会看起来像「缺了一块」。 */
.info-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.info-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 16px 20px;
  border-radius: var(--r-block);
  background: var(--surface);
}
.info-cell__k {
  color: var(--brand-ink);
  font-size: var(--fs-2xs);
  font-weight: 600;
}
.info-cell__v {
  color: var(--text-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
/* 标签与正文之间加一条细分隔，避免长文本糊成一团 */
.info-cell__k::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: var(--sp-3);
  border-radius: 2px;
  background: var(--brand-line);
}
@media (max-width: 560px) {
  .info-grid { grid-template-columns: minmax(0, 1fr); }
  .info-cell { padding: 14px 16px; }
}

/* ---------------- 网盘文件名（详情页附录，挂常见问题之后） ----------------
   一平台一张小卡：平台名做身份（品牌绿），下面是真实文件名。
   overflow-wrap: anywhere 是必须的 —— 文件名没空格又是全角括号连排，
   不给断点会撑开手机视口（与 .notice 里的存档路径同一个坑）。 */
.flist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
.flist__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 16px 20px;
  border-radius: var(--r-block);
  background: var(--surface);
}
.flist__plat {
  color: var(--brand-ink);
  font-size: var(--fs-2xs);
  font-weight: 600;
}
.flist__name {
  color: var(--text-body);
  font-size: var(--fs-sm);        /* 文件名是这一块的正文，取 --fs-sm 档 */
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.flist__more {
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
}

/* ---------------- 版本画面（详情页图集） ----------------
   一行一张实机截图 + 一行图注。图注只说「这张图里能看到什么」，
   不写营销话——图注是给玩家判断「这版到底长什么样」用的。 */
.shot-grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  /* 图注在图片正下方，图片给底色以便和页面区分 */
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}
.shot__media {
  border-radius: var(--r-card-sm);
  overflow: hidden;
}
.shot__cap {
  color: var(--text-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  padding-inline: var(--sp-2);
}
@media (max-width: 820px) {
  .shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .shot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .shot { padding: var(--sp-3); }
}

/* ---------------- 提示条（琥珀底） ---------------- */
.notice {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 14px 20px;
  border-radius: var(--r-btn);
  background: var(--amber-soft);
  color: var(--amber);
  font-size: var(--fs-sm);
}
.notice__icon { flex: 0 0 auto; color: var(--amber); }

/* ---------------- CTA 横条 ---------------- */
.cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-11);
  padding: 36px 44px;
  border-radius: 20px;
  background: var(--surface-head);
  flex-wrap: wrap;
}
.cta-box__text {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  line-height: var(--lh-snug);
}

@media (max-width: 560px) {
  .play-card { padding: var(--sp-9); gap: var(--sp-5); }
  .cat-row { padding: 13px 16px; gap: var(--sp-5); }
  .cat-row::before { display: none; }   /* 窄屏序号没有信息量，先让位给标题 */
  .cat-row__act .btn { padding: 11px 18px; }
  .btn--primary, .btn--ghost { padding: 14px 24px; font-size: var(--fs-sm); }
  .btn--lg { padding: 14px 26px; font-size: var(--fs-body); }
}