.page-contact {
  position: relative;
  background-color: var(--dusk);
  background-image:
    radial-gradient(1100px 620px at 88% -10%, rgba(232, 184, 75, .10), transparent 62%),
    radial-gradient(880px 540px at 2% 36%, rgba(79, 163, 199, .10), transparent 66%),
    repeating-linear-gradient(0deg, rgba(242, 232, 213, .022) 0 1px, transparent 1px 3px);
  color: var(--paper);
  padding-block: clamp(16px, 3vw, 30px) 0;
}

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

.page-contact .contact-shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-contact .breadcrumb {
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-contact h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.1vw, 34px);
  line-height: 1.18;
  letter-spacing: .06em;
  margin: 0 0 .5em;
  color: var(--paper-bright);
}

.page-contact .routing-head h2,
.page-contact .form-copy h2,
.page-contact .contact-channels > h2,
.page-contact .contact-legal > h2 {
  position: relative;
  padding-top: 18px;
}

.page-contact .routing-head h2::before,
.page-contact .form-copy h2::before,
.page-contact .contact-channels > h2::before,
.page-contact .contact-legal > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--barley);
}

/* ---------- 首屏 ---------- */

.page-contact .contact-hero {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  align-items: start;
  padding-block: clamp(10px, 2vw, 18px) clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}

.page-contact .contact-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(31px, 5.2vw, 58px);
  line-height: 1.08;
  letter-spacing: .07em;
  margin: 0 0 .48em;
  color: var(--paper-bright);
}

.page-contact .contact-lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.85;
  color: var(--wash);
  max-width: 34em;
  margin: 0;
}

.page-contact .contact-hero-meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  line-height: 1.7;
  color: var(--slate-blue);
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--lake);
}

.page-contact .contact-card {
  position: relative;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(158deg, rgba(34, 38, 46, .94), rgba(23, 26, 32, .94));
  box-shadow: var(--shadow-soft);
}

.page-contact .contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(242, 232, 213, .07) 0 26%, transparent 26% 100%);
}

.page-contact .contact-card > * {
  position: relative;
}

.page-contact .contact-card-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--slate-blue);
  margin: 0 0 8px;
}

.page-contact .contact-big {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.5vw, 27px);
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--paper-bright);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.page-contact .contact-big--mail {
  overflow-wrap: anywhere;
}

.page-contact .contact-big:hover,
.page-contact .contact-big:focus-visible {
  color: var(--barley);
  border-bottom-color: var(--barley);
  outline: none;
}

.page-contact .contact-big + .contact-card-label {
  margin-top: clamp(18px, 2.4vw, 26px);
}

.page-contact .contact-card-note {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--wash);
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.page-contact .contact-figure {
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  background: transparent;
  border: 0;
}

.page-contact .contact-figure .figure-media,
.page-contact .form-figure .figure-media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

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

/* ---------- 问题分流 ---------- */

.page-contact .contact-routing {
  padding-block: clamp(42px, 6vw, 76px);
}

.page-contact .routing-head {
  max-width: 52ch;
}

.page-contact .routing-head > p,
.page-contact .form-intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  color: var(--wash);
  margin: 0;
}

.page-contact .routing-list {
  list-style: none;
  margin: clamp(24px, 3.4vw, 38px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.page-contact .routing-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 14px;
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background-color .18s var(--ease);
}

.page-contact .routing-row:hover {
  background: rgba(79, 163, 199, .06);
}

.page-contact .routing-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--barley);
  padding-top: 5px;
}

.page-contact .routing-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.1vw, 20px);
  letter-spacing: .04em;
  line-height: 1.4;
  margin: 0 0 7px;
  color: var(--paper-bright);
}

.page-contact .routing-body p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--wash);
  margin: 0;
  max-width: 46em;
}

.page-contact .routing-action {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding-top: 2px;
}

.page-contact .routing-action a {
  color: var(--lake);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(79, 163, 199, .42);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.page-contact .routing-action a:hover,
.page-contact .routing-action a:focus-visible {
  color: var(--barley);
  border-bottom-color: var(--barley);
  outline: none;
}

/* ---------- 表单说明 ---------- */

.page-contact .contact-form {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(42px, 6vw, 76px);
  border-top: 1px solid var(--line);
}

.page-contact .form-copy {
  min-width: 0;
}

.page-contact .field-map {
  list-style: none;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.page-contact .field-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.page-contact .field-row h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: .04em;
  margin: 0 0 6px;
  color: var(--paper-bright);
}

.page-contact .field-row p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--wash);
  margin: 0;
}

.page-contact .state {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  padding: 4px 8px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}

.page-contact .state--warn {
  color: var(--ochre);
  border-color: rgba(196, 85, 59, .58);
  background: rgba(196, 85, 59, .13);
}

.page-contact .state--ok {
  color: var(--moss);
  border-color: rgba(110, 139, 107, .62);
  background: rgba(110, 139, 107, .13);
}

.page-contact .form-foot {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate-blue);
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.page-contact .form-foot a {
  color: var(--lake);
  text-underline-offset: 3px;
}

.page-contact .form-figure {
  margin: 0;
  background: transparent;
  border: 0;
}

.page-contact .form-figure figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--slate-blue);
  margin-top: 10px;
}

/* ---------- 回复时间与渠道 ---------- */

.page-contact .contact-channels {
  padding-block: clamp(38px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.page-contact .channel-grid {
  display: grid;
  gap: 1px;
  margin-top: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-contact .channel {
  background: var(--panel);
  padding: clamp(20px, 2.6vw, 30px);
  transition: background-color .18s var(--ease);
}

.page-contact .channel:hover {
  background: #262B34;
}

.page-contact .channel-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--lake);
  margin: 0 0 10px;
}

.page-contact .channel h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.4;
  letter-spacing: .04em;
  margin: 0 0 10px;
  color: var(--paper-bright);
}

.page-contact .channel p:last-child {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--wash);
  margin: 0;
}

/* ---------- 地址与备案 ---------- */

.page-contact .contact-legal {
  padding-block: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--line);
}

.page-contact .legal-list {
  display: grid;
  gap: 1px;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-contact .legal-item {
  background: rgba(23, 26, 32, .9);
  padding: 16px 18px;
}

.page-contact .legal-item dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  color: var(--slate-blue);
  margin-bottom: 7px;
}

.page-contact .legal-item dd {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--paper);
  margin: 0;
  overflow-wrap: anywhere;
}

.page-contact .legal-note {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate-blue);
  margin: clamp(16px, 2vw, 22px) 0 0;
  max-width: 60ch;
}

/* ---------- 找游戏索引条 ---------- */

.page-contact .site-index {
  margin-top: clamp(30px, 4vw, 48px);
  margin-bottom: clamp(36px, 5vw, 64px);
  padding-block: clamp(18px, 2.6vw, 26px);
  padding-inline: clamp(16px, 2.6vw, 28px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: linear-gradient(100deg, rgba(232, 184, 75, .12), rgba(79, 163, 199, .09) 58%, transparent);
}

.page-contact .site-index .index-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .2em;
  color: var(--barley);
  margin: 0;
  padding: 0;
}

.page-contact .site-index .index-title::before {
  display: none;
}

.page-contact .index-bar {
  list-style: none;
  counter-reset: idx;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 14px 0 0;
  padding: 0;
}

.page-contact .index-bar li {
  counter-increment: idx;
}

.page-contact .index-bar a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 13px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--paper-bright);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: rgba(14, 16, 20, .38);
  transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}

.page-contact .index-bar a::before {
  content: counter(idx, decimal-leading-zero);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--barley);
  transition: color .18s var(--ease);
}

.page-contact .index-bar a:hover,
.page-contact .index-bar a:focus-visible {
  color: var(--ink);
  background: var(--barley);
  border-color: var(--barley);
  outline: none;
}

.page-contact .index-bar a:hover::before,
.page-contact .index-bar a:focus-visible::before {
  color: var(--ink);
}

/* ---------- 响应式 ---------- */

@media (min-width: 720px) {
  .page-contact .field-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
  }

  .page-contact .legal-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-contact .channel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-contact .contact-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(40px, 5vw, 76px);
  }

  .page-contact .routing-row {
    grid-template-columns: 48px minmax(0, 1fr) 220px;
    gap: 26px;
    align-items: center;
  }

  .page-contact .routing-action {
    grid-column: auto;
    justify-content: flex-start;
  }
}

@media (min-width: 980px) {
  .page-contact .contact-form {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
  }

  .page-contact .form-figure {
    position: sticky;
    top: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-big,
  .page-contact .routing-row,
  .page-contact .routing-action a,
  .page-contact .channel,
  .page-contact .index-bar a,
  .page-contact .index-bar a::before {
    transition: none;
  }
}


<main id="main-content" class="page-contact">
  <div class="contact-shell">

    <nav class="breadcrumb" aria-label="面包屑">
      <ol>
        <li><a href="/">首页</a></li>
        <li aria-current="page">联络</li>
      </ol>
    </nav>

    <section class="contact-hero" aria-labelledby="contact-title">
      <div class="contact-hero-copy">
        <p class="eyebrow">联络 · 邮箱、电话与表单</p>
        <h1 id="contact-title">攻略卡住的时候，<br>直接找到百胜游戏中心的人</h1>
        <p class="contact-lede">标签点进去没条目、平板上翻页不顺手、想把攻略转到自己的社区，写信或打电话都行。我们把常见问题按类型分好了去处，你照着自己那一类走，少绕一步就少等一天。</p>
        <p class="contact-hero-meta mono">工作日 9:00–18:00（青海时间）· 傍晚与周末顺延至下一工作日</p>
      </div>

      <div class="contact-card">
        <p class="contact-card-label">客服邮箱</p>
        <a class="contact-big contact-big--mail" href="mailto:contact@skill-baisheng.com.cn">contact@skill-baisheng.com.cn</a>

        <p class="contact-card-label">客服电话</p>
        <a class="contact-big" href="tel:40073078334">400-7307-8334</a>

        <p class="contact-card-note">邮箱适合带截图、带链接、需要慢慢说清的问题；电话留给页面打不开、条目跳不过去这类等不了的事。</p>

        <figure class="figure figure--wide contact-figure">
          <div class="figure-media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="资料室桌面上摊开的信纸、笔和一叠索引卡片，侧光落在纸张边缘">
          </div>
        </figure>
      </div>
    </section>

    <section class="contact-routing" aria-labelledby="routing-title">
      <div class="routing-head">
        <h2 id="routing-title">先看清是哪一类事</h2>
        <p>四类问题各有各的去处。选对入口，通常一轮就能解决，不必来回确认。</p>
      </div>

      <ol class="routing-list">
        <li class="routing-row">
          <span class="routing-num">01</span>
          <div class="routing-body">
            <h3>专区标签翻不到想要的内容</h3>
            <p>某个标签点进去没有对应条目、常用标签想换个类目、或者觉得某一类少了常在用的项，都可以直接说。写信时带上标签名和它所在的一级类目，我们能对准位置处理。</p>
          </div>
          <div class="routing-action">
            <span class="tag tag--barley">邮件</span>
            <a href="/catalog/">先看专区目录</a>
          </div>
        </li>

        <li class="routing-row">
          <span class="routing-num">02</span>
          <div class="routing-body">
            <h3>找游戏入口走到一半停了</h3>
            <p>索引条里某一项点下去不对、表单没提交成功、或者登录后跳转游戏库时卡住，把所在页面和你停住的那一步写下来。这类走表单最快，能带上页面位置。</p>
          </div>
          <div class="routing-action">
            <span class="tag tag--lake">表单</span>
            <a href="/faqs/">看疑难问答</a>
          </div>
        </li>

        <li class="routing-row">
          <span class="routing-num">03</span>
          <div class="routing-body">
            <h3>平板上的加载与触控问题</h3>
            <p>加载间隔、触控响应、横竖屏排版，这三项我们有 12 款主流平板的实测记录可对照。告诉我们是哪款机型、哪一页，我们翻记录核对后给你换一条更顺的路径。</p>
          </div>
          <div class="routing-action">
            <span class="tag tag--lake">表单</span>
            <a href="/faqs/">设备适配问答</a>
          </div>
        </li>

        <li class="routing-row">
          <span class="routing-num">04</span>
          <div class="routing-body">
            <h3>内容合作与使用授权</h3>
            <p>攻略转载、社区互链、标签体系建议这类事，写信到客服邮箱并在标题里写明来意即可，会由内容运营的同事接手。使用范围与署名要求可以先看使用说明。</p>
          </div>
          <div class="routing-action">
            <span class="tag tag--barley">邮件</span>
            <a href="/notice/">看使用说明</a>
          </div>
        </li>
      </ol>
    </section>

    <section class="contact-form" aria-labelledby="form-title">
      <div class="form-copy">
        <p class="eyebrow">表单 · 三行内容</p>
        <h2 id="form-title">在找游戏入口下方提交</h2>
        <p class="form-intro">专区标签和站内索引的问题，填一张短表单就能落到负责的同事手里。三行内容写清楚，后面基本不用再问第二遍。</p>

        <ol class="field-map">
          <li class="field-row">
            <span class="routing-num">01</span>
            <div>
              <h3>常用邮箱</h3>
              <p>回复会发到这个地址。写成缺域名或漏掉 @ 的格式，提交前就会被拦下并标出要改的那一段。</p>
            </div>
            <span class="state state--warn">格式校验</span>
          </li>
          <li class="field-row">
            <span class="routing-num">02</span>
            <div>
              <h3>问题类型</h3>
              <p>专区标签、站内索引、设备适配、合作咨询四项里选一项。选项平时是折叠的，点开再选，避免挑错行。</p>
            </div>
            <span class="state state--ok">单选</span>
          </li>
          <li class="field-row">
            <span class="routing-num">03</span>
            <div>
              <h3>问题描述</h3>
              <p>写清页面位置、标签名，以及你手上是哪款平板。这三点齐了，我们就能直接对着记录定位，不用再回信追问。</p>
            </div>
            <span class="state state--ok">必填</span>
          </li>
        </ol>

        <p class="form-foot">表单里填的邮箱和问题描述保留 24 个月，到期后清除。想先了解信息怎么处理，可以看 <a href="/privacy-notice/">隐私声明</a>。</p>
      </div>

      <figure class="figure figure--tall form-figure">
        <div class="figure-media">
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="深色屏幕上输入框与分类标签的局部特写，一只手停在键盘旁边，屏幕微光映在桌面上" loading="lazy" decoding="async">
        </div>
        <figcaption>三行内容填到能复述的程度，处理会快很多。</figcaption>
      </figure>
    </section>

    <section class="contact-channels" aria-labelledby="channels-title">
      <h2 id="channels-title">什么时候回、该用哪个渠道</h2>
      <div class="channel-grid">
        <article class="channel">
          <p class="channel-label">邮件</p>
          <h3>工作日 9:00–18:00 内回复</h3>
          <p>青海时间工作日内我们看信。上午发来的多半当天有回应，傍晚和周末的顺延到下一个工作日。需要附截图、附链接的问题走邮箱最稳，来回几轮也不容易丢上下文。</p>
        </article>
        <article class="channel">
          <p class="channel-label">电话</p>
          <h3>400-7307-8334，着急的事直接打</h3>
          <p>页面打不开、条目跳不过去、平板上一直转圈，这类等不了的打这通电话。把现象和你用的机型说清楚，我们当场换个入口，或者先给你一条能走的替代路径。</p>
        </article>
        <article class="channel">
          <p class="channel-label">表单</p>
          <h3>专区标签与站内索引专用</h3>
          <p>找游戏入口下方的表单专收这两类问题。勾好类型、写清描述就行，回复会发到你留的邮箱，同一条线索不用在别处再提一次。</p>
        </article>
      </div>
    </section>

    <section class="contact-legal" aria-labelledby="legal-title">
      <h2 id="legal-title">地址与备案</h2>
      <dl class="legal-list">
        <div class="legal-item">
          <dt>通信地址</dt>
          <dd>青海省西宁市城西区海晏路79号</dd>
        </div>
        <div class="legal-item">
          <dt>ICP 备案号</dt>
          <dd>青ICP备23846610号</dd>
        </div>
        <div class="legal-item">
          <dt>站点域名</dt>
          <dd>skill-baisheng.com.cn</dd>
        </div>
      </dl>
      <p class="legal-note">地址用于通信联络。寄送资料或物品前，请先通过客服邮箱与我们联系，说明来意与到达时间，避免无人接收。</p>
    </section>

    <section class="site-index" id="site-index" aria-labelledby="site-index-title">
      <h2 class="index-title" id="site-index-title">找游戏</h2>
      <ul class="index-bar">
        <li><a href="/catalog/">新手起步</a></li>
        <li><a href="/catalog/">专区标签</a></li>
        <li><a href="/updates/">版本变更</a></li>
        <li><a href="/faqs/">设备适配</a></li>
        <li><a href="/team/">品牌资料室</a></li>
        <li><a href="/contact-us/">联系客服</a></li>
      </ul>
    </section>

  </div>
</main>

.page-contact {
  position: relative;
  background-color: var(--dusk);
  background-image:
    radial-gradient(1100px 620px at 88% -10%, rgba(232, 184, 75, .10), transparent 62%),
    radial-gradient(880px 540px at 2% 36%, rgba(79, 163, 199, .10), transparent 66%),
    repeating-linear-gradient(0deg, rgba(242, 232, 213, .022) 0 1px, transparent 1px 3px);
  color: var(--paper);
  padding-block: clamp(16px, 3vw, 30px) 0;
}

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

.page-contact .contact-shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-contact .breadcrumb {
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-contact h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.1vw, 34px);
  line-height: 1.18;
  letter-spacing: .06em;
  margin: 0 0 .5em;
  color: var(--paper-bright);
}

.page-contact .routing-head h2,
.page-contact .form-copy h2,
.page-contact .contact-channels > h2,
.page-contact .contact-legal > h2 {
  position: relative;
  padding-top: 18px;
}

.page-contact .routing-head h2::before,
.page-contact .form-copy h2::before,
.page-contact .contact-channels > h2::before,
.page-contact .contact-legal > h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--barley);
}

/* ---------- 首屏 ---------- */

.page-contact .contact-hero {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  align-items: start;
  padding-block: clamp(10px, 2vw, 18px) clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}

.page-contact .contact-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(31px, 5.2vw, 58px);
  line-height: 1.08;
  letter-spacing: .07em;
  margin: 0 0 .48em;
  color: var(--paper-bright);
}

.page-contact .contact-lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.85;
  color: var(--wash);
  max-width: 34em;
  margin: 0;
}

.page-contact .contact-hero-meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  line-height: 1.7;
  color: var(--slate-blue);
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--lake);
}

.page-contact .contact-card {
  position: relative;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(158deg, rgba(34, 38, 46, .94), rgba(23, 26, 32, .94));
  box-shadow: var(--shadow-soft);
}

.page-contact .contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(242, 232, 213, .07) 0 26%, transparent 26% 100%);
}

.page-contact .contact-card > * {
  position: relative;
}

.page-contact .contact-card-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--slate-blue);
  margin: 0 0 8px;
}

.page-contact .contact-big {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.5vw, 27px);
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--paper-bright);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.page-contact .contact-big--mail {
  overflow-wrap: anywhere;
}

.page-contact .contact-big:hover,
.page-contact .contact-big:focus-visible {
  color: var(--barley);
  border-bottom-color: var(--barley);
  outline: none;
}

.page-contact .contact-big + .contact-card-label {
  margin-top: clamp(18px, 2.4vw, 26px);
}

.page-contact .contact-card-note {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--wash);
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.page-contact .contact-figure {
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  background: transparent;
  border: 0;
}

.page-contact .contact-figure .figure-media,
.page-contact .form-figure .figure-media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

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

/* ---------- 问题分流 ---------- */

.page-contact .contact-routing {
  padding-block: clamp(42px, 6vw, 76px);
}

.page-contact .routing-head {
  max-width: 52ch;
}

.page-contact .routing-head > p,
.page-contact .form-intro {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.85;
  color: var(--wash);
  margin: 0;
}

.page-contact .routing-list {
  list-style: none;
  margin: clamp(24px, 3.4vw, 38px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.page-contact .routing-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 14px;
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background-color .18s var(--ease);
}

.page-contact .routing-row:hover {
  background: rgba(79, 163, 199, .06);
}

.page-contact .routing-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--barley);
  padding-top: 5px;
}

.page-contact .routing-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.1vw, 20px);
  letter-spacing: .04em;
  line-height: 1.4;
  margin: 0 0 7px;
  color: var(--paper-bright);
}

.page-contact .routing-body p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--wash);
  margin: 0;
  max-width: 46em;
}

.page-contact .routing-action {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding-top: 2px;
}

.page-contact .routing-action a {
  color: var(--lake);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(79, 163, 199, .42);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.page-contact .routing-action a:hover,
.page-contact .routing-action a:focus-visible {
  color: var(--barley);
  border-bottom-color: var(--barley);
  outline: none;
}

/* ---------- 表单说明 ---------- */

.page-contact .contact-form {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(42px, 6vw, 76px);
  border-top: 1px solid var(--line);
}

.page-contact .form-copy {
  min-width: 0;
}

.page-contact .field-map {
  list-style: none;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}

.page-contact .field-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.page-contact .field-row h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: .04em;
  margin: 0 0 6px;
  color: var(--paper-bright);
}

.page-contact .field-row p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--wash);
  margin: 0;
}

.page-contact .state {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  padding: 4px 8px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}

.page-contact .state--warn {
  color: var(--ochre);
  border-color: rgba(196, 85, 59, .58);
  background: rgba(196, 85, 59, .13);
}

.page-contact .state--ok {
  color: var(--moss);
  border-color: rgba(110, 139, 107, .62);
  background: rgba(110, 139, 107, .13);
}

.page-contact .form-foot {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate-blue);
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.page-contact .form-foot a {
  color: var(--lake);
  text-underline-offset: 3px;
}

.page-contact .form-figure {
  margin: 0;
  background: transparent;
  border: 0;
}

.page-contact .form-figure figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .03em;
  color: var(--slate-blue);
  margin-top: 10px;
}

/* ---------- 回复时间与渠道 ---------- */

.page-contact .contact-channels {
  padding-block: clamp(38px, 5vw, 64px);
  border-top: 1px solid var(--line);
}

.page-contact .channel-grid {
  display: grid;
  gap: 1px;
  margin-top: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-contact .channel {
  background: var(--panel);
  padding: clamp(20px, 2.6vw, 30px);
  transition: background-color .18s var(--ease);
}

.page-contact .channel:hover {
  background: #262B34;
}

.page-contact .channel-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--lake);
  margin: 0 0 10px;
}

.page-contact .channel h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.4;
  letter-spacing: .04em;
  margin: 0 0 10px;
  color: var(--paper-bright);
}

.page-contact .channel p:last-child {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--wash);
  margin: 0;
}

/* ---------- 地址与备案 ---------- */

.page-contact .contact-legal {
  padding-block: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--line);
}

.page-contact .legal-list {
  display: grid;
  gap: 1px;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-contact .legal-item {
  background: rgba(23, 26, 32, .9);
  padding: 16px 18px;
}

.page-contact .legal-item dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  color: var(--slate-blue);
  margin-bottom: 7px;
}

.page-contact .legal-item dd {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--paper);
  margin: 0;
  overflow-wrap: anywhere;
}

.page-contact .legal-note {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.8;
  color: var(--slate-blue);
  margin: clamp(16px, 2vw, 22px) 0 0;
  max-width: 60ch;
}

/* ---------- 找游戏索引条 ---------- */

.page-contact .site-index {
  margin-top: clamp(30px, 4vw, 48px);
  margin-bottom: clamp(36px, 5vw, 64px);
  padding-block: clamp(18px, 2.6vw, 26px);
  padding-inline: clamp(16px, 2.6vw, 28px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: linear-gradient(100deg, rgba(232, 184, 75, .12), rgba(79, 163, 199, .09) 58%, transparent);
}

.page-contact .site-index .index-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .2em;
  color: var(--barley);
  margin: 0;
  padding: 0;
}

.page-contact .site-index .index-title::before {
  display: none;
}

.page-contact .index-bar {
  list-style: none;
  counter-reset: idx;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 14px 0 0;
  padding: 0;
}

.page-contact .index-bar li {
  counter-increment: idx;
}

.page-contact .index-bar a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 13px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--paper-bright);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: rgba(14, 16, 20, .38);
  transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}

.page-contact .index-bar a::before {
  content: counter(idx, decimal-leading-zero);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--barley);
  transition: color .18s var(--ease);
}

.page-contact .index-bar a:hover,
.page-contact .index-bar a:focus-visible {
  color: var(--ink);
  background: var(--barley);
  border-color: var(--barley);
  outline: none;
}

.page-contact .index-bar a:hover::before,
.page-contact .index-bar a:focus-visible::before {
  color: var(--ink);
}

/* ---------- 响应式 ---------- */

@media (min-width: 720px) {
  .page-contact .field-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
  }

  .page-contact .legal-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-contact .channel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-contact .contact-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(40px, 5vw, 76px);
  }

  .page-contact .routing-row {
    grid-template-columns: 48px minmax(0, 1fr) 220px;
    gap: 26px;
    align-items: center;
  }

  .page-contact .routing-action {
    grid-column: auto;
    justify-content: flex-start;
  }
}

@media (min-width: 980px) {
  .page-contact .contact-form {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
  }

  .page-contact .form-figure {
    position: sticky;
    top: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .contact-big,
  .page-contact .routing-row,
  .page-contact .routing-action a,
  .page-contact .channel,
  .page-contact .index-bar a,
  .page-contact .index-bar a::before {
    transition: none;
  }
}