.page-faq {
  --faq-accent: var(--cyan);
  padding-bottom: clamp(36px, 6vw, 78px);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
  padding-block: clamp(16px, 3vw, 38px) clamp(24px, 4vw, 48px);
}

.page-faq .faq-hero__copy {
  position: relative;
  min-width: 0;
}

.page-faq .faq-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(27px, 5.4vw, 50px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--text);
}

.page-faq .faq-hero__rule {
  display: block;
  width: 92px;
  height: 8px;
  margin-top: 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: skewX(calc(var(--slant) * -1));
}

.page-faq .faq-hero__lede {
  margin-top: 16px;
  max-width: 58ch;
  color: var(--text-dim);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.85;
}

.page-faq .faq-quick {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-faq .faq-quick__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: var(--edge);
  border-radius: var(--radius-pill);
  background: var(--ink-panel);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 11.5px;
  letter-spacing: .05em;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.page-faq .faq-quick__link::before {
  content: "→";
  font-size: 11px;
  color: var(--cyan);
}

.page-faq .faq-quick__link:hover,
.page-faq .faq-quick__link:focus-visible {
  color: var(--text);
  border-color: var(--cyan);
  background: var(--ink-raise);
  transform: translateY(-2px);
}

.page-faq .faq-hero__media {
  position: relative;
  margin: 0;
  border: var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-panel);
  box-shadow: var(--shadow-panel);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.page-faq .faq-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .faq-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 15, 0) 42%, rgba(5, 7, 15, .78) 100%);
}

.page-faq .faq-hero__media figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* ---------- 两栏结构 ---------- */
.page-faq .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

.page-faq .faq-body {
  min-width: 0;
}

/* ---------- 问题索引 ---------- */
.page-faq .faq-index {
  border: var(--edge);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-raise) 0%, var(--ink-panel) 64%);
  box-shadow: var(--shadow-panel);
  padding: 16px 14px 14px;
}

.page-faq .faq-index__title {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-faq .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-faq .toc-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  border-radius: 8px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.35;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.page-faq .toc-link .mono {
  flex: none;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--violet);
  transition: color .18s ease;
}

.page-faq .toc-link:hover,
.page-faq .toc-link:focus-visible {
  color: var(--text);
  background: rgba(140, 92, 255, .12);
}

.page-faq .toc-link:hover .mono,
.page-faq .toc-link:focus-visible .mono {
  color: var(--cyan);
}

.page-faq .toc-link[aria-current="true"] {
  color: var(--text);
  background: rgba(50, 230, 255, .1);
  border-left-color: var(--cyan);
}

.page-faq .toc-link[aria-current="true"] .mono {
  color: var(--cyan);
}

.page-faq .toc-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-faq .faq-index__foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--text-dim);
}

/* ---------- 分组 ---------- */
.page-faq .faq-group {
  --faq-accent: var(--cyan);
  scroll-margin-top: 110px;
}

.page-faq .faq-group + .faq-group {
  margin-top: clamp(28px, 4.4vw, 52px);
}

.page-faq .faq-group:nth-of-type(2) { --faq-accent: var(--violet); }
.page-faq .faq-group:nth-of-type(3) { --faq-accent: var(--green); }
.page-faq .faq-group:nth-of-type(4) { --faq-accent: var(--amber); }
.page-faq .faq-group:nth-of-type(5) { --faq-accent: var(--cyan); }
.page-faq .faq-group:nth-of-type(6) { --faq-accent: var(--violet); }
.page-faq .faq-group:nth-of-type(7) { --faq-accent: var(--amber); }

.page-faq .faq-group__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-group__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-void);
  background: var(--faq-accent);
  padding: 5px 9px;
  border-radius: 6px;
  transform: skewX(calc(var(--slant) * -.5));
}

.page-faq .faq-group__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}

/* ---------- 折叠问答 ---------- */
.page-faq .qa {
  border: var(--edge);
  border-left: 3px solid var(--line);
  border-radius: 14px;
  background: var(--ink-panel);
  margin: 0 0 10px;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.page-faq .qa:hover {
  border-left-color: var(--faq-accent);
  transform: translateY(-1px);
}

.page-faq .qa[open] {
  border-left-color: var(--faq-accent);
  background: var(--ink-raise);
  box-shadow: var(--shadow-float);
}

.page-faq .qa__q {
  display: flex;
  align-items: baseline;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  transition: color .18s ease;
}

.page-faq .qa__q::-webkit-details-marker { display: none; }
.page-faq .qa__q::marker { content: ""; }

.page-faq .qa__q::after {
  content: "+";
  flex: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--text-dim);
  transition: color .18s ease, transform .18s ease;
}

.page-faq .qa[open] .qa__q::after {
  content: "–";
  color: var(--faq-accent);
}

.page-faq .qa__q:hover {
  color: var(--faq-accent);
}

.page-faq .qa__q:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.page-faq .qa__num {
  flex: none;
  min-width: 30px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--faq-accent);
}

.page-faq .qa__text {
  min-width: 0;
}

.page-faq .qa__a {
  margin: 0;
  padding: 14px 16px 16px clamp(16px, 4vw, 42px);
  border-top: 1px solid rgba(42, 53, 85, .75);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.8;
}

.page-faq .qa__a > * + * {
  margin-top: 12px;
}

.page-faq .qa__a a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(50, 230, 255, .45);
  transition: border-color .18s ease, color .18s ease;
}

.page-faq .qa__a a:hover,
.page-faq .qa__a a:focus-visible {
  color: var(--text);
  border-bottom-color: var(--text);
}

.page-faq .qa__a ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.page-faq .qa__a li::marker {
  color: var(--faq-accent);
}

/* ---------- 复制咨询模板 ---------- */
.page-faq .faq-copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
}

.page-faq .faq-copy {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
}

.page-faq .copy-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--green);
}

/* ---------- 配置小表 ---------- */
.page-faq .table-scroll {
  overflow-x: auto;
  border: var(--edge);
  border-radius: 12px;
  background: var(--ink-panel);
}

.page-faq .data-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: 13px;
}

.page-faq .data-table th,
.page-faq .data-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(42, 53, 85, .65);
}

.page-faq .data-table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--ink-raise);
}

.page-faq .data-table td {
  color: var(--text-dim);
}

.page-faq .data-table td:last-child {
  font-family: var(--font-mono);
  color: var(--amber);
}

.page-faq .data-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- 礼包图 ---------- */
.page-faq .faq-media {
  margin: 18px 0 0;
  border: var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-panel);
  box-shadow: var(--shadow-panel);
}

.page-faq .faq-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 适配chip组 ---------- */
.page-faq .faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ---------- 客服面板 ---------- */
.page-faq .faq-contact {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: clamp(18px, 3vw, 28px);
  border-left: 4px solid var(--amber);
}

.page-faq .faq-contact__label {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}

.page-faq .faq-contact__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 7px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}

.page-faq .faq-contact__key {
  flex: none;
  min-width: 34px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--text-dim);
}

.page-faq .faq-contact__note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-faq .faq-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 底部参考 ---------- */
.page-faq .faq-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: clamp(26px, 4vw, 46px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.page-faq .faq-more__label {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet);
}

.page-faq .faq-more__link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.page-faq .faq-more__link:hover,
.page-faq .faq-more__link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ---------- 桌面 ---------- */
@media (min-width: 700px) {
  .page-faq .faq-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-layout {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: clamp(26px, 3.6vw, 52px);
  }

  .page-faq .faq-index {
    position: sticky;
    top: 104px;
  }

  .page-faq .faq-contact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .page-faq .faq-contact__actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1180px) {
  .page-faq .qa__q {
    font-size: 15px;
  }

  .page-faq .qa__a {
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa,
  .page-faq .qa__q,
  .page-faq .qa__q::after,
  .page-faq .toc-link,
  .page-faq .faq-quick__link,
  .page-faq .faq-more__link {
    transition: none;
  }

  .page-faq .qa:hover,
  .page-faq .faq-quick__link:hover {
    transform: none;
  }
}


<main id="main-content" class="page-faq">

  <nav class="breadcrumbs shell" aria-label="页面路径">
    <ol class="breadcrumbs-list">
      <li class="breadcrumbs-item"><a class="breadcrumbs-link" href="/">首页</a></li>
      <li class="breadcrumbs-item"><span class="breadcrumbs-link" aria-current="page">帮助中心</span></li>
    </ol>
  </nav>

  <section class="shell faq-hero" aria-labelledby="faq-title">
    <div class="faq-hero__copy">
      <p class="eyebrow mono">HELP DESK · 自助指引</p>
      <h1 id="faq-title">登录、安装、配置、礼包——卡住的时候先翻这里</h1>
      <span class="faq-hero__rule" aria-hidden="true"></span>
      <p class="lede faq-hero__lede">
        装完打不开、登录一直报错、进游戏前不知道显卡够不够、礼包点了没到账，PC 上最容易碰到的这几类麻烦，616游戏都拆成了能照着做的步骤。按使用顺序分成七组，多数问题翻到自己那一组就能处理完。
      </p>
      <ul class="faq-quick">
        <li><a class="faq-quick__link mono" href="#accounts">账号与登录</a></li>
        <li><a class="faq-quick__link mono" href="#install">下载与安装</a></li>
        <li><a class="faq-quick__link mono" href="#library">游戏库与配置</a></li>
        <li><a class="faq-quick__link mono" href="#gifts">礼包中心</a></li>
        <li><a class="faq-quick__link mono" href="#support">联系客服</a></li>
      </ul>
    </div>
    <figure class="faq-hero__media">
      <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="显示器与键盘旁展开的玩家帮助索引界面，边框透着霓虹青光">
      <figcaption>PC 端自助排查 · 随时可查</figcaption>
    </figure>
  </section>

  <div class="shell faq-layout">

    <aside class="faq-index" aria-label="问题分类索引">
      <p class="faq-index__title mono">问题索引</p>
      <nav class="toc" data-toc aria-label="分类目录">
        <ol class="toc-list">
          <li class="toc-item"><a class="toc-link" href="#accounts"><span class="mono">01</span>账号与登录</a></li>
          <li class="toc-item"><a class="toc-link" href="#install"><span class="mono">02</span>下载与安装</a></li>
          <li class="toc-item"><a class="toc-link" href="#library"><span class="mono">03</span>游戏库与配置</a></li>
          <li class="toc-item"><a class="toc-link" href="#gifts"><span class="mono">04</span>礼包中心</a></li>
          <li class="toc-item"><a class="toc-link" href="#ratings"><span class="mono">05</span>评分统计</a></li>
          <li class="toc-item"><a class="toc-link" href="#adapt"><span class="mono">06</span>适配清单</a></li>
          <li class="toc-item"><a class="toc-link" href="#support"><span class="mono">07</span>联系客服</a></li>
        </ol>
      </nav>
      <p class="faq-index__foot mono">共 20 条问答 · 点开即读</p>
    </aside>

    <div class="faq-body">

      <section class="faq-group" id="accounts" aria-labelledby="faq-accounts-title">
        <div class="faq-group__head">
          <span class="faq-group__num mono">01</span>
          <h2 class="faq-group__title" id="faq-accounts-title">账号与登录</h2>
        </div>
        <div class="faq-list">

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q01</span>
              <span class="qa__text">第一次使用，从哪一步开始比较顺？</span>
            </summary>
            <div class="qa__a">
              先用浏览器打开官网，游戏库、配置要求、评分和礼包都能直接看，不必先登录。想用 PC 客户端，去<a href="/download/">下载与适配</a>页拿安装包，按校验、登录、进入游戏库的顺序走完，之后游戏库和礼包都在客户端里，不用来回切。
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q02</span>
              <span class="qa__text">登录提示账号或密码不正确，先检查哪几处？</span>
            </summary>
            <div class="qa__a">
              <ul>
                <li>确认输入法停在半角状态，没有误触大写锁定；</li>
                <li>自动填充的旧密码先删掉，手动重新输入一次；</li>
                <li>换一台设备登录，看看是不是只有当前设备异常；</li>
                <li>仍进不去，把平台 ID 和完整报错提示一起发给客服。</li>
              </ul>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q03</span>
              <span class="qa__text">平台 ID 在哪里看，咨询时为什么要带上？</span>
            </summary>
            <div class="qa__a">
              登录后在客户端的账号信息区就能找到平台 ID，是一串以数字为主的编号。咨询礼包未到账、条目信息或安装异常时把它附上，客服能直接对到你的记录，少一轮来回确认。
              <div class="faq-copy-row">
                <button type="button" class="btn btn--ghost faq-copy" data-copy-value="平台ID：____ / 问题现象：____ / 设备配置：____ / 发生时间：____">复制咨询模板</button>
                <span class="copy-status" data-copy-status aria-live="polite"></span>
              </div>
            </div>
          </details>

        </div>
      </section>

      <section class="faq-group" id="install" aria-labelledby="faq-install-title">
        <div class="faq-group__head">
          <span class="faq-group__num mono">02</span>
          <h2 class="faq-group__title" id="faq-install-title">下载与安装</h2>
        </div>
        <div class="faq-list">

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q04</span>
              <span class="qa__text">PC 客户端从哪里拿，安装要走几步？</span>
            </summary>
            <div class="qa__a">
              打开下载与适配页，网页版和客户端两个入口都列在那里。客户端按下载、校验、登录、进入游戏库四步走；安装目录建议放在非系统盘，并留出足够空间。第一次启动会先做一次完整性检查，等它跑完再进库更稳。
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q05</span>
              <span class="qa__text">安装包校验失败，是什么原因？</span>
            </summary>
            <div class="qa__a">
              多数是下载中断或者磁盘写入出了问题。按这个顺序处理：删掉已下好的安装包，换一个磁盘重新下载，下载期间保持网络稳定，下完再走一次校验。连续两次失败，把安装包文件名和失败提示截图，附上平台 ID 发给客服。
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q06</span>
              <span class="qa__text">客户端停在更新界面不动，怎么处理？</span>
            </summary>
            <div class="qa__a">
              先等三到五分钟，首次启动会有解压和索引的过程；仍无进展就完全退出客户端再打开一次；还是不动，检查一下网络和代理设置。期间可以先用网页版浏览游戏库，把问题连同客户端版本号一起反馈。
            </div>
          </details>

        </div>
      </section>

      <section class="faq-group" id="library" aria-labelledby="faq-library-title">
        <div class="faq-group__head">
          <span class="faq-group__num mono">03</span>
          <h2 class="faq-group__title" id="faq-library-title">游戏库与配置</h2>
        </div>
        <div class="faq-list">

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q07</span>
              <span class="qa__text">怎么让游戏库只显示我机器跑得动的游戏？</span>
            </summary>
            <div class="qa__a">
              游戏库支持按类型和配置档位筛选，选好档位后列表只留下符合的条目。库里现有 1260 款 PC 游戏条目、14 个类型分类，挑起来不算费劲。看中的条目右侧就是配置要求，和游戏库同屏对照，不用来回切页。
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q08</span>
              <span class="qa__text">九个配置维度里，哪几项最先对？</span>
            </summary>
            <div class="qa__a">
              先看显卡和内存，再对处理器，最后确认存储与系统，顺序对了判断会快很多。
              <div class="table-scroll">
                <table class="data-table">
                  <thead>
                    <tr><th scope="col">维度</th><th scope="col">主要影响</th><th scope="col">建议顺序</th></tr>
                  </thead>
                  <tbody>
                    <tr><td>显卡</td><td>帧数与可选的画质档位</td><td>1</td></tr>
                    <tr><td>内存</td><td>长时间运行是否稳定</td><td>2</td></tr>
                    <tr><td>处理器</td><td>加载速度与运算压力</td><td>3</td></tr>
                    <tr><td>存储</td><td>剩余空间能否装下</td><td>4</td></tr>
                    <tr><td>系统</td><td>版本是否满足启动条件</td><td>5</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q09</span>
              <span class="qa__text">显卡刚好卡在最低和推荐之间，需要先降画质吗？</span>
            </summary>
            <div class="qa__a">
              处在两个档位之间，进游戏前先把分辨率和画质预设调到中间档，再看帧数往上加。条目里标了档位区间，照着区间从低往高试，比一上来就拉满更省事，也更容易跑稳。
            </div>
          </details>

        </div>
      </section>

      <section class="faq-group" id="gifts" aria-labelledby="faq-gifts-title">
        <div class="faq-group__head">
          <span class="faq-group__num mono">04</span>
          <h2 class="faq-group__title" id="faq-gifts-title">礼包中心</h2>
        </div>
        <div class="faq-list">

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q10</span>
              <span class="qa__text">礼包中心在什么位置，需要跳转吗？</span>
            </summary>
            <div class="qa__a">
              礼包中心固定在游戏库右侧，浏览游戏的时候它就在旁边。打开侧翼就能看到当时在更新的礼包和领取条件，不用离开当前页面，也不用另外记一个地址。
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q11</span>
              <span class="qa__text">领取时提示条件未满足，常见原因有哪些？</span>
            </summary>
            <div class="qa__a">
              <ul>
                <li>该礼包限定在特定时间段内领取，时间已经过了；</li>
                <li>同一账号之前领过这款游戏的同类礼包；</li>
                <li>账号信息还没补全，系统无法确认领取资格；</li>
                <li>浏览器拦截了弹窗，领取动作没有真正提交。</li>
              </ul>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q12</span>
              <span class="qa__text">显示已领取，但游戏里一直没收到怎么办？</span>
            </summary>
            <div class="qa__a">
              先退出游戏重新登录一次，礼包一般在登录后发到游戏内邮件或背包，也可能有几分钟的延迟。如果迟迟没有到账，把平台 ID、礼包名称和领取时间一起发给客服，处理起来会快很多。
            </div>
          </details>

        </div>
        <figure class="faq-media media-frame media-frame--wide">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="礼包领取步骤示意：进入游戏库、打开右侧礼包中心、核对领取条件、确认领取" loading="lazy" decoding="async">
        </figure>
      </section>

      <section class="faq-group" id="ratings" aria-labelledby="faq-ratings-title">
        <div class="faq-group__head">
          <span class="faq-group__num mono">05</span>
          <h2 class="faq-group__title" id="faq-ratings-title">评分统计</h2>
        </div>
        <div class="faq-list">

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q13</span>
              <span class="qa__text">本地评分多久更新一次，样本量有多大？</span>
            </summary>
            <div class="qa__a">
              评分统计按周更新，当前累计样本 38 万条，周均新增约 4800 条。分数来自玩家对游戏体验的反馈汇总，用来看一款游戏在社区里的整体口碑位置。
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q14</span>
              <span class="qa__text">条目旁边的评分条和点阵怎么读？</span>
            </summary>
            <div class="qa__a">
              条形长度对应当前分数的高低，旁边的点阵反映近几周的变化方向。条形长、点阵靠右，说明近期评价在往上走；两者方向相反时，往往是热度还在但口碑有波动，值得点进<a href="/press/">动态与评测</a>多看两眼。
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q15</span>
              <span class="qa__text">只看分数就能决定要不要玩吗？</span>
            </summary>
            <div class="qa__a">
              分数适合先把范围缩小。真要下决定，还得看你的设备跑不跑得动——在游戏库里点开配置要求对一遍，再扫一眼近期评测，三样合起来判断更接近你的实际情况。
            </div>
          </details>

        </div>
      </section>

      <section class="faq-group" id="adapt" aria-labelledby="faq-adapt-title">
        <div class="faq-group__head">
          <span class="faq-group__num mono">06</span>
          <h2 class="faq-group__title" id="faq-adapt-title">适配清单</h2>
        </div>
        <div class="faq-list">

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q16</span>
              <span class="qa__text">游戏官网焕新版适配清单在哪里查？</span>
            </summary>
            <div class="qa__a">
              清单放在<a href="/download/">下载与适配</a>页，按终端场景列出当前版本的适配情况。打开页面找到清单区，对着自己常用的设备看就行，浏览和查阅都不用登录。
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q17</span>
              <span class="qa__text">清单覆盖哪些终端场景？</span>
            </summary>
            <div class="qa__a">
              共 12 类终端场景，包括分辨率、系统版本、显卡档位、输入设备与显示比例等。挑你实际在用的那几项对一遍就够了，没必要从头到尾全看。
              <div class="faq-chips cluster">
                <span class="chip chip--cyan">分辨率</span>
                <span class="chip chip--violet">系统版本</span>
                <span class="chip chip--green">显卡档位</span>
                <span class="chip chip--amber">输入设备</span>
                <span class="chip chip--cyan">显示比例</span>
              </div>
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q18</span>
              <span class="qa__text">多久对一次清单比较合适？</span>
            </summary>
            <div class="qa__a">
              清单每月复核一次。换设备、升级显卡驱动，或者系统做了大版本更新之后，适合再翻一遍；日常配置没变化的话，按原来的用法继续就好。
            </div>
          </details>

        </div>
      </section>

      <section class="faq-group" id="support" aria-labelledby="faq-support-title">
        <div class="faq-group__head">
          <span class="faq-group__num mono">07</span>
          <h2 class="faq-group__title" id="faq-support-title">联系客服</h2>
        </div>
        <div class="faq-list">

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q19</span>
              <span class="qa__text">客服什么时候在线，通过什么渠道联系？</span>
            </summary>
            <div class="qa__a">
              工作日 9:00-18:00 有专人回复。邮箱 email@616gamehub.com.cn，电话 15739338398。游戏库与礼包中心相关的问题，邮件里附上平台 ID 会处理得更快；内容纠错和合作事项也走同一个邮箱。
            </div>
          </details>

          <details class="qa">
            <summary class="qa__q">
              <span class="qa__num mono">Q20</span>
              <span class="qa__text">写信之前先把哪些信息准备好？</span>
            </summary>
            <div class="qa__a">
              <ul>
                <li>平台 ID，在客户端账号信息区可以看到；</li>
                <li>问题发生的大致时间；</li>
                <li>当前客户端版本号；</li>
                <li>出现的提示文字或界面截图；</li>
                <li>设备大致配置：处理器、显卡、内存。</li>
              </ul>
              涉及礼包的问题，把礼包名称和领取时间一并写上，定位会更快。
            </div>
          </details>

        </div>

        <div class="faq-contact panel panel--raised">
          <div class="faq-contact__body">
            <p class="faq-contact__label mono">人工通道</p>
            <p class="faq-contact__line"><span class="faq-contact__key mono">邮箱</span><span>email@616gamehub.com.cn</span></p>
            <p class="faq-contact__line"><span class="faq-contact__key mono">电话</span><span>15739338398</span></p>
            <p class="faq-contact__line"><span class="faq-contact__key mono">地址</span><span>内蒙古省呼和浩特市赛罕区腾飞南路88号创意大厦12层</span></p>
            <p class="faq-contact__note">工作日 9:00-18:00 有专人回复；咨询游戏库与礼包相关事项，建议在邮件中附上平台 ID。</p>
          </div>
          <div class="btn-row faq-contact__actions">
            <a class="btn btn--primary" href="/contact-us/">去联络入口</a>
            <a class="btn btn--ghost" href="/download/">查看下载与适配</a>
          </div>
        </div>
      </section>

      <section class="faq-more" aria-label="更多参考">
        <p class="faq-more__label mono">更多参考</p>
        <a class="faq-more__link" href="/download/">客户端与适配清单</a>
        <a class="faq-more__link" href="/press/">动态与评测</a>
        <a class="faq-more__link" href="/">返回首页</a>
      </section>

    </div>
  </div>

</main>

.page-faq {
  --faq-accent: var(--cyan);
  padding-bottom: clamp(36px, 6vw, 78px);
}

/* ---------- 首屏 ---------- */
.page-faq .faq-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
  padding-block: clamp(16px, 3vw, 38px) clamp(24px, 4vw, 48px);
}

.page-faq .faq-hero__copy {
  position: relative;
  min-width: 0;
}

.page-faq .faq-hero h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(27px, 5.4vw, 50px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--text);
}

.page-faq .faq-hero__rule {
  display: block;
  width: 92px;
  height: 8px;
  margin-top: 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: skewX(calc(var(--slant) * -1));
}

.page-faq .faq-hero__lede {
  margin-top: 16px;
  max-width: 58ch;
  color: var(--text-dim);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.85;
}

.page-faq .faq-quick {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-faq .faq-quick__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: var(--edge);
  border-radius: var(--radius-pill);
  background: var(--ink-panel);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 11.5px;
  letter-spacing: .05em;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.page-faq .faq-quick__link::before {
  content: "→";
  font-size: 11px;
  color: var(--cyan);
}

.page-faq .faq-quick__link:hover,
.page-faq .faq-quick__link:focus-visible {
  color: var(--text);
  border-color: var(--cyan);
  background: var(--ink-raise);
  transform: translateY(-2px);
}

.page-faq .faq-hero__media {
  position: relative;
  margin: 0;
  border: var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-panel);
  box-shadow: var(--shadow-panel);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.page-faq .faq-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-faq .faq-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 15, 0) 42%, rgba(5, 7, 15, .78) 100%);
}

.page-faq .faq-hero__media figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* ---------- 两栏结构 ---------- */
.page-faq .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}

.page-faq .faq-body {
  min-width: 0;
}

/* ---------- 问题索引 ---------- */
.page-faq .faq-index {
  border: var(--edge);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-raise) 0%, var(--ink-panel) 64%);
  box-shadow: var(--shadow-panel);
  padding: 16px 14px 14px;
}

.page-faq .faq-index__title {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}

.page-faq .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-faq .toc-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  border-radius: 8px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.35;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.page-faq .toc-link .mono {
  flex: none;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--violet);
  transition: color .18s ease;
}

.page-faq .toc-link:hover,
.page-faq .toc-link:focus-visible {
  color: var(--text);
  background: rgba(140, 92, 255, .12);
}

.page-faq .toc-link:hover .mono,
.page-faq .toc-link:focus-visible .mono {
  color: var(--cyan);
}

.page-faq .toc-link[aria-current="true"] {
  color: var(--text);
  background: rgba(50, 230, 255, .1);
  border-left-color: var(--cyan);
}

.page-faq .toc-link[aria-current="true"] .mono {
  color: var(--cyan);
}

.page-faq .toc-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-faq .faq-index__foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--text-dim);
}

/* ---------- 分组 ---------- */
.page-faq .faq-group {
  --faq-accent: var(--cyan);
  scroll-margin-top: 110px;
}

.page-faq .faq-group + .faq-group {
  margin-top: clamp(28px, 4.4vw, 52px);
}

.page-faq .faq-group:nth-of-type(2) { --faq-accent: var(--violet); }
.page-faq .faq-group:nth-of-type(3) { --faq-accent: var(--green); }
.page-faq .faq-group:nth-of-type(4) { --faq-accent: var(--amber); }
.page-faq .faq-group:nth-of-type(5) { --faq-accent: var(--cyan); }
.page-faq .faq-group:nth-of-type(6) { --faq-accent: var(--violet); }
.page-faq .faq-group:nth-of-type(7) { --faq-accent: var(--amber); }

.page-faq .faq-group__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-group__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-void);
  background: var(--faq-accent);
  padding: 5px 9px;
  border-radius: 6px;
  transform: skewX(calc(var(--slant) * -.5));
}

.page-faq .faq-group__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}

/* ---------- 折叠问答 ---------- */
.page-faq .qa {
  border: var(--edge);
  border-left: 3px solid var(--line);
  border-radius: 14px;
  background: var(--ink-panel);
  margin: 0 0 10px;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.page-faq .qa:hover {
  border-left-color: var(--faq-accent);
  transform: translateY(-1px);
}

.page-faq .qa[open] {
  border-left-color: var(--faq-accent);
  background: var(--ink-raise);
  box-shadow: var(--shadow-float);
}

.page-faq .qa__q {
  display: flex;
  align-items: baseline;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  transition: color .18s ease;
}

.page-faq .qa__q::-webkit-details-marker { display: none; }
.page-faq .qa__q::marker { content: ""; }

.page-faq .qa__q::after {
  content: "+";
  flex: none;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--text-dim);
  transition: color .18s ease, transform .18s ease;
}

.page-faq .qa[open] .qa__q::after {
  content: "–";
  color: var(--faq-accent);
}

.page-faq .qa__q:hover {
  color: var(--faq-accent);
}

.page-faq .qa__q:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.page-faq .qa__num {
  flex: none;
  min-width: 30px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--faq-accent);
}

.page-faq .qa__text {
  min-width: 0;
}

.page-faq .qa__a {
  margin: 0;
  padding: 14px 16px 16px clamp(16px, 4vw, 42px);
  border-top: 1px solid rgba(42, 53, 85, .75);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.8;
}

.page-faq .qa__a > * + * {
  margin-top: 12px;
}

.page-faq .qa__a a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(50, 230, 255, .45);
  transition: border-color .18s ease, color .18s ease;
}

.page-faq .qa__a a:hover,
.page-faq .qa__a a:focus-visible {
  color: var(--text);
  border-bottom-color: var(--text);
}

.page-faq .qa__a ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.page-faq .qa__a li::marker {
  color: var(--faq-accent);
}

/* ---------- 复制咨询模板 ---------- */
.page-faq .faq-copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
}

.page-faq .faq-copy {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
}

.page-faq .copy-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--green);
}

/* ---------- 配置小表 ---------- */
.page-faq .table-scroll {
  overflow-x: auto;
  border: var(--edge);
  border-radius: 12px;
  background: var(--ink-panel);
}

.page-faq .data-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: 13px;
}

.page-faq .data-table th,
.page-faq .data-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(42, 53, 85, .65);
}

.page-faq .data-table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--ink-raise);
}

.page-faq .data-table td {
  color: var(--text-dim);
}

.page-faq .data-table td:last-child {
  font-family: var(--font-mono);
  color: var(--amber);
}

.page-faq .data-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- 礼包图 ---------- */
.page-faq .faq-media {
  margin: 18px 0 0;
  border: var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-panel);
  box-shadow: var(--shadow-panel);
}

.page-faq .faq-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 适配chip组 ---------- */
.page-faq .faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ---------- 客服面板 ---------- */
.page-faq .faq-contact {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: clamp(18px, 3vw, 28px);
  border-left: 4px solid var(--amber);
}

.page-faq .faq-contact__label {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}

.page-faq .faq-contact__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 7px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}

.page-faq .faq-contact__key {
  flex: none;
  min-width: 34px;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--text-dim);
}

.page-faq .faq-contact__note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-dim);
}

.page-faq .faq-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 底部参考 ---------- */
.page-faq .faq-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: clamp(26px, 4vw, 46px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.page-faq .faq-more__label {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet);
}

.page-faq .faq-more__link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.page-faq .faq-more__link:hover,
.page-faq .faq-more__link:focus-visible {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ---------- 桌面 ---------- */
@media (min-width: 700px) {
  .page-faq .faq-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-layout {
    grid-template-columns: 244px minmax(0, 1fr);
    gap: clamp(26px, 3.6vw, 52px);
  }

  .page-faq .faq-index {
    position: sticky;
    top: 104px;
  }

  .page-faq .faq-contact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .page-faq .faq-contact__actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1180px) {
  .page-faq .qa__q {
    font-size: 15px;
  }

  .page-faq .qa__a {
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .qa,
  .page-faq .qa__q,
  .page-faq .qa__q::after,
  .page-faq .toc-link,
  .page-faq .faq-quick__link,
  .page-faq .faq-more__link {
    transition: none;
  }

  .page-faq .qa:hover,
  .page-faq .faq-quick__link:hover {
    transform: none;
  }
}