.page-home {
  --hm-gap: 16px;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(34, 224, 214, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 224, 214, .028) 1px, transparent 1px);
  background-size: 56px 56px;
  color: var(--text);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.page-home h1,
.page-home h2,
.page-home h3 {
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.16;
}

.page-home p { margin: 0; }

.page-home ul,
.page-home ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home a:focus-visible {
  outline: 2px solid var(--cyan-lift);
  outline-offset: 3px;
}

.page-home #today-list,
.page-home #gift-band { scroll-margin-top: 96px; }

.page-home .section { padding: 44px 0; }

.page-home .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cyan);
  margin-bottom: 10px;
}

.page-home .h-xl {
  font-size: clamp(30px, 5.2vw, 56px);
  font-weight: 800;
}

.page-home .h-lg {
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 800;
}

.page-home .h-md {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
}

.page-home .ctx-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--mist);
}

.page-home .ctx-bar a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-home .ctx-bar a:hover { border-bottom-color: var(--cyan); }

.page-home .divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.page-home .divider::before {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--cyan);
  flex: none;
}

.page-home .divider .annotation {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--mist);
}

/* ---------- 首屏 ---------- */
.page-home .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.page-home .hero-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.page-home .hero-strip {
  position: relative;
  overflow: hidden;
  height: 132px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.page-home .hero-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
}

.page-home .hero-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 19, 32, .94), rgba(6, 19, 32, .4) 58%, rgba(34, 224, 214, .16));
  pointer-events: none;
}

.page-home .board {
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(11, 31, 46, .93);
  box-shadow: var(--shadow-panel);
  min-width: 0;
}

.page-home .board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.page-home .board-head .tag { flex: none; }

.page-home .board-lead {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--mist);
  max-width: 58ch;
}

.page-home .slot-list { margin-top: 6px; }

.page-home .slot {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 6px;
  border-top: 1px solid var(--line);
  transition: background .16s var(--ease);
}

.page-home .slot:first-child { border-top: 0; }

.page-home .slot:hover { background: rgba(34, 224, 214, .05); }

.page-home .slot-time {
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan-lift);
}

.page-home .slot-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.page-home .slot-note {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--mist);
  transition: color .16s var(--ease);
}

.page-home .slot:hover .slot-note { color: var(--cyan-lift); }

.page-home .slot-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mist);
  white-space: nowrap;
}

.page-home .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.page-home .dot--amber { background: var(--amber); }
.page-home .dot--cyan { background: var(--cyan); }
.page-home .dot--rust { background: var(--rust); }

.page-home .live-dot {
  animation: home-pulse 2.4s var(--ease) infinite;
  box-shadow: 0 0 0 3px rgba(242, 178, 51, .16);
}

@keyframes home-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.page-home .board-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .board-foot a,
.page-home .gift-foot a,
.page-home .seal-note a,
.page-home .notice-list a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 224, 214, .42);
}

.page-home .board-foot a:hover,
.page-home .gift-foot a:hover,
.page-home .seal-note a:hover,
.page-home .notice-list a:hover { border-bottom-color: var(--cyan-lift); }

.page-home .hero-aside {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.page-home .aside-visual {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--panel);
}

.page-home .aside-visual img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .9;
}

.page-home .notice {
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  background: rgba(11, 31, 46, .86);
}

.page-home .notice-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.page-home .notice-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.page-home .notice-k {
  font-size: 12px;
  color: var(--amber);
  padding-top: 4px;
}

.page-home .notice-list p {
  font-size: 14px;
  line-height: 1.72;
  color: var(--text);
}

.page-home .gift-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 14px;
  font-size: 13px;
  text-decoration: none;
  color: var(--amber-lift);
  border: 1px solid rgba(242, 178, 51, .42);
  background: rgba(242, 178, 51, .08);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}

.page-home .gift-link:hover {
  background: rgba(242, 178, 51, .16);
  border-color: var(--amber);
}

/* ---------- 纸面章节 ---------- */
.page-home .route-band {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(28, 26, 23, .05) 1px, transparent 1px);
  background-size: 4px 4px;
  color: var(--paper-ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .route-band .eyebrow { color: var(--rust); }

.page-home .route-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-home .route-band .h-xl {
  color: var(--paper-ink);
  max-width: 12ch;
}

.page-home .route-intro .prose {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.78;
  color: rgba(28, 26, 23, .78);
  max-width: 40ch;
}

.page-home .route-list { display: grid; }

.page-home .route {
  border-top: 1px solid rgba(28, 26, 23, .2);
}

.page-home .route:last-child { border-bottom: 1px solid rgba(28, 26, 23, .2); }

.page-home .route-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-areas:
    "idx title go"
    "idx desc desc";
  gap: 4px 12px;
  align-items: baseline;
  padding: 18px 8px 18px 0;
  text-decoration: none;
  color: var(--paper-ink);
  transition: background .18s var(--ease), padding-left .18s var(--ease);
}

.page-home .route-link:hover,
.page-home .route-link:focus-visible {
  background: rgba(180, 67, 43, .08);
  padding-left: 10px;
}

.page-home .route-idx {
  grid-area: idx;
  font-size: 13px;
  color: var(--rust);
  padding-top: 5px;
}

.page-home .route-title {
  grid-area: title;
  font-size: 18px;
  font-weight: 800;
}

.page-home .route-desc {
  grid-area: desc;
  font-size: 14px;
  line-height: 1.68;
  color: rgba(28, 26, 23, .72);
}

.page-home .route-go {
  grid-area: go;
  font-size: 13px;
  color: var(--rust);
  white-space: nowrap;
}

.page-home .route-link:hover .route-go { text-decoration: underline; }

/* ---------- 礼包 ---------- */
.page-home .gift-band {
  background: var(--panel);
  border-top: 1px solid rgba(242, 178, 51, .34);
  border-bottom: 1px solid var(--line);
}

.page-home .gift-head .h-lg { max-width: 20ch; }

.page-home .gift-lead {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
  max-width: 62ch;
}

.page-home .gift-stats {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-home .gift-stats li {
  display: grid;
  gap: 6px;
  padding: 18px 16px;
  background: var(--ink);
}

.page-home .gs-num {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--amber-lift);
}

.page-home .gs-label {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--mist);
  line-height: 1.5;
}

.page-home .gift-foot {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--mist);
}

/* ---------- 品类 ---------- */
.page-home .cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.page-home .cat-visual {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--panel);
}

.page-home .cat-visual img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .88;
}

.page-home .cat-lead {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
  max-width: 52ch;
}

.page-home .cap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.page-home .cap {
  display: inline-block;
  padding: 9px 16px;
  font-size: 14px;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}

.page-home .cap:hover,
.page-home .cap:focus-visible {
  border-color: var(--cyan);
  background: rgba(34, 224, 214, .08);
  color: var(--cyan-lift);
}

.page-home .cap--on {
  border-color: var(--cyan);
  background: rgba(34, 224, 214, .08);
  color: var(--cyan-lift);
}

/* ---------- 适配 ---------- */
.page-home .fit-band {
  border-top: 1px solid var(--line);
  background-image: linear-gradient(180deg, rgba(34, 224, 214, .05), transparent 60%);
}

.page-home .fit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.page-home .fit-list {
  margin: 22px 0 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-home .fit-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ink);
}

.page-home .fit-list dt {
  font-size: 13px;
  color: var(--mist);
}

.page-home .fit-list dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cyan-lift);
}

.page-home .fit-note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--mist);
  max-width: 52ch;
}

.page-home .fit-visual {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.page-home .fit-visual img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .92;
}

/* ---------- 路径 ---------- */
.page-home .path-band {
  border-top: 1px solid var(--line);
}

.page-home .path-list {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-home .path-list li {
  display: grid;
  gap: 6px;
  padding: 20px;
  background: var(--panel);
  border-top: 2px solid var(--cyan);
}

.page-home .path-step {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--cyan);
}

.page-home .path-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}

.page-home .path-list p {
  font-size: 13px;
  line-height: 1.72;
  color: var(--mist);
}

.page-home .path-note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--mist);
}

/* ---------- 收尾条 ---------- */
.page-home .seal-band { padding-bottom: 60px; }

.page-home .seal-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.page-home .seal-list li {
  display: grid;
  gap: 4px;
}

.page-home .seal-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--mist);
}

.page-home .seal-v {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

.page-home .seal-note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.78;
  color: var(--mist);
}

/* ---------- 响应式 ---------- */
@media (max-width: 479px) {
  .page-home .slot {
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: start;
  }

  .page-home .slot-state {
    grid-column: 2;
    justify-self: start;
    padding-top: 2px;
  }

  .page-home .hero-strip { height: 112px; }
}

@media (min-width: 700px) {
  .page-home .hero-strip { height: 168px; }
  .page-home .board { padding: 26px; }
  .page-home .section { padding: 60px 0; }
  .page-home .seal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
}

@media (min-width: 860px) {
  .page-home .gift-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-home .path-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-home .path-list li { border-top-width: 2px; }
}

@media (min-width: 920px) {
  .page-home .route-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
  }

  .page-home .seal-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

  .page-home .seal-list li + li {
    padding-left: 20px;
    border-left: 1px solid var(--line);
  }
}

@media (min-width: 960px) {
  .page-home .section { padding: 76px 0; }

  .page-home .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 28px;
  }

  .page-home .cat-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 36px;
  }

  .page-home .fit-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .live-dot { animation: none; }

  .page-home *,
  .page-home *::after,
  .page-home *::before {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}


<main id="main-content" class="page-home">
  <div class="container">
    <nav class="ctx-bar" aria-label="当前位置">
      <a href="/">首页</a>
      <span aria-hidden="true">/</span>
      <span>正版入口 · V2.0</span>
    </nav>
  </div>

  <section class="section hero-section" aria-labelledby="today-h">
    <div class="container">
      <div class="hero-grid">
        <div class="hero-main">
          <div class="hero-strip">
            <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="暗调游戏大厅界面局部特写，边缘泛着青色光晕，画面中没有人物">
          </div>
          <div class="board">
            <div class="board-head">
              <div>
                <p class="eyebrow">今日开服 · 09:00 至次日 02:00</p>
                <h1 id="today-h" class="h-lg">今天开什么服，一屏里就排好了</h1>
              </div>
              <span class="tag mono">72 条</span>
            </div>
            <p class="board-lead">大厅游戏官网把当天开的新服按时间从上往下排开，标好品类和当前状态，挑中哪条直接点进去就能进服。12 个品类、386 款大厅游戏里，每天有 168 款在开新服。</p>
            <ul class="slot-list" id="today-list">
              <li class="slot">
                <span class="slot-time mono">08:00</span>
                <div class="slot-body">
                  <p class="slot-name">雾都夜行 · 五区</p>
                  <p class="slot-note">三国历史 · 本场名额已满，下一场明日 09:00 开放</p>
                </div>
                <span class="slot-state"><span class="dot dot--rust"></span>已结束</span>
              </li>
              <li class="slot">
                <span class="slot-time mono">09:00</span>
                <div class="slot-body">
                  <p class="slot-name">赤潮纪元 · 三区</p>
                  <p class="slot-note">角色扮演 · 开服 2 小时内进服，可领新手礼包 3 份</p>
                </div>
                <span class="slot-state"><span class="dot dot--amber live-dot"></span>开服中</span>
              </li>
              <li class="slot">
                <span class="slot-time mono">11:00</span>
                <div class="slot-body">
                  <p class="slot-name">铁幕战线 · 二区</p>
                  <p class="slot-note">策略战争 · 首日开放跨服战，20:00 加开一个团</p>
                </div>
                <span class="slot-state"><span class="dot dot--amber live-dot"></span>开服中</span>
              </li>
              <li class="slot">
                <span class="slot-time mono">13:30</span>
                <div class="slot-body">
                  <p class="slot-name">云顶酒馆</p>
                  <p class="slot-note">模拟经营 · 离线收益按小时结算，午间登录多一份</p>
                </div>
                <span class="slot-state"><span class="dot dot--amber live-dot"></span>开服中</span>
              </li>
              <li class="slot">
                <span class="slot-time mono">16:00</span>
                <div class="slot-body">
                  <p class="slot-name">霓虹回廊</p>
                  <p class="slot-note">动作闯关 · 开放预约名额，开服前 1 小时给出提醒</p>
                </div>
                <span class="slot-state"><span class="dot dot--cyan"></span>预约中</span>
              </li>
              <li class="slot">
                <span class="slot-time mono">19:00</span>
                <div class="slot-body">
                  <p class="slot-name">山海问道 · 十区</p>
                  <p class="slot-note">仙侠玄幻 · 晚场首开，双倍经验同步开启</p>
                </div>
                <span class="slot-state"><span class="dot dot--cyan"></span>待开</span>
              </li>
              <li class="slot">
                <span class="slot-time mono">21:30</span>
                <div class="slot-body">
                  <p class="slot-name">深潜矩阵</p>
                  <p class="slot-note">塔防防守 · 首通奖励按关卡逐层结算</p>
                </div>
                <span class="slot-state"><span class="dot dot--cyan"></span>待开</span>
              </li>
              <li class="slot">
                <span class="slot-time mono">00:00</span>
                <div class="slot-body">
                  <p class="slot-name">夜航棋局</p>
                  <p class="slot-note">放置挂机 · 挂机时长上限 12 小时，睡前登一次</p>
                </div>
                <span class="slot-state"><span class="dot dot--cyan"></span>待开</span>
              </li>
            </ul>
            <p class="board-foot">想看版本怎么迭代、每周的开服节奏怎么走，去 <a href="/insights/">开服观察</a> 翻一翻。</p>
          </div>
        </div>

        <aside class="hero-aside" aria-labelledby="first-h">
          <figure class="aside-visual">
            <img src="{zhanqunpic:h:360w:640}" width="640" height="360" alt="抽象倒计时数字与进度环，青色与琥珀金两色交叠" loading="lazy" decoding="async">
          </figure>
          <div class="notice">
            <p class="eyebrow">第一次来</p>
            <h2 id="first-h" class="h-md">三行字看完，直接开玩</h2>
            <ol class="notice-list">
              <li>
                <span class="notice-k mono">01</span>
                <p>左边那份开服表从早上 09:00 排到凌晨 02:00，越靠上开得越早，右边的状态点会跟着变。</p>
              </li>
              <li>
                <span class="notice-k mono">02</span>
                <p>没看到想玩的类型，就进 <a href="/catalog/">大厅目录</a> 按品类挑，386 款游戏都在那一页。</p>
              </li>
              <li>
                <span class="notice-k mono">03</span>
                <p>想先拿东西再进服，往下滑到礼包那一段，每周三 10:00 会补一批新的。</p>
              </li>
            </ol>
            <a class="gift-link" href="#gift-band"><span class="dot dot--amber"></span>礼包中心入口 · 累计上架 1240 个</a>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <div class="container">
    <div class="divider" aria-hidden="true"><span class="annotation">三种来意</span></div>
  </div>

  <section class="section route-band" aria-labelledby="route-h">
    <div class="container">
      <div class="route-grid">
        <div class="route-intro">
          <p class="eyebrow">先从哪一步开始</p>
          <h2 id="route-h" class="h-xl">来做什么，就走哪条路</h2>
          <p class="prose">有人只想尽快开一局，有人还在挑类型，也有人习惯先把能领的领完再进服。三种情况对应三个入口，点一下就到位。</p>
        </div>
        <ol class="route-list">
          <li class="route">
            <a class="route-link" href="#today-list">
              <span class="route-idx mono">01</span>
              <span class="route-title">直接看今天开的服</span>
              <span class="route-desc">回到上面那份开服表，按时间挑一个还开着门的服，省掉翻列表的工夫。</span>
              <span class="route-go">去今日开服</span>
            </a>
          </li>
          <li class="route">
            <a class="route-link" href="/catalog/">
              <span class="route-idx mono">02</span>
              <span class="route-title">按类型找没玩过的</span>
              <span class="route-desc">十二个品类摊开摆放，标注上手难度和开服频率，选好直接进详情页。</span>
              <span class="route-go">进大厅目录</span>
            </a>
          </li>
          <li class="route">
            <a class="route-link" href="#gift-band">
              <span class="route-idx mono">03</span>
              <span class="route-title">先领礼包再进服</span>
              <span class="route-desc">礼包跟开服挂着走，领完再进服，开局能省下一段时间。</span>
              <span class="route-go">看礼包节奏</span>
            </a>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section gift-band" id="gift-band" aria-labelledby="gift-h">
    <div class="container">
      <div class="gift-head">
        <p class="eyebrow">礼包节奏</p>
        <h2 id="gift-h" class="h-lg">礼包跟着开服走，周三集中补一批</h2>
        <p class="gift-lead">开新服的时候挂上礼包，是这里一直在做的事。每周三上午十点统一补货，当天没领到的会在一天内补发，补不上的直接下架，不让一个空条目占着位置。</p>
      </div>
      <ul class="gift-stats">
        <li>
          <span class="gs-num mono">1240</span>
          <span class="gs-label">累计上架的礼包</span>
        </li>
        <li>
          <span class="gs-num mono">97%</span>
          <span class="gs-label">领取成功的比例</span>
        </li>
        <li>
          <span class="gs-num mono">24 小时</span>
          <span class="gs-label">没领到就补发或下架</span>
        </li>
        <li>
          <span class="gs-num mono">周三 10:00</span>
          <span class="gs-label">每周补货的时间</span>
        </li>
      </ul>
      <p class="gift-foot">领了没到账，先看 <a href="/answers/">答疑中心</a> 里的处理办法；确实卡住了，走 <a href="/feedback/">反馈通道</a> 留一句，工作日都有人接。</p>
    </div>
  </section>

  <section class="section cat-band" aria-labelledby="cat-h">
    <div class="container">
      <div class="cat-grid">
        <figure class="cat-visual">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="游戏大厅列表界面的中景裁切，条目行清晰排列" loading="lazy" decoding="async">
        </figure>
        <div class="cat-body">
          <p class="eyebrow">按类型找</p>
          <h2 id="cat-h" class="h-lg">十二个品类，挑你最熟的那一种</h2>
          <p class="cat-lead">从角色扮演到放置挂机，每个品类下面都挂着正在开服的条目。选一个进去，看到的是这一类的全部在架游戏和它们最近的开服安排。</p>
          <ul class="cap-list">
            <li><a class="cap cap--on" href="/catalog/" aria-label="在大厅目录里查看角色扮演">角色扮演</a></li>
            <li><a class="cap" href="/catalog/">策略战争</a></li>
            <li><a class="cap" href="/catalog/">休闲竞技</a></li>
            <li><a class="cap" href="/catalog/">模拟经营</a></li>
            <li><a class="cap" href="/catalog/">卡牌收集</a></li>
            <li><a class="cap" href="/catalog/">动作闯关</a></li>
            <li><a class="cap" href="/catalog/">仙侠玄幻</a></li>
            <li><a class="cap" href="/catalog/">三国历史</a></li>
            <li><a class="cap" href="/catalog/">塔防防守</a></li>
            <li><a class="cap" href="/catalog/">体育竞速</a></li>
            <li><a class="cap" href="/catalog/">音乐节奏</a></li>
            <li><a class="cap" href="/catalog/">放置挂机</a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="section fit-band" aria-labelledby="fit-h">
    <div class="container">
      <div class="fit-grid">
        <div class="fit-body">
          <p class="eyebrow">机型与适配</p>
          <h2 id="fit-h" class="h-lg">先看看你的手机在不在这个范围里</h2>
          <dl class="fit-list">
            <div>
              <dt>Android</dt>
              <dd class="mono">8.0 – 14</dd>
            </div>
            <div>
              <dt>iOS</dt>
              <dd class="mono">14 – 18</dd>
            </div>
            <div>
              <dt>屏幕尺寸</dt>
              <dd class="mono">5.5 – 6.8 英寸</dd>
            </div>
          </dl>
          <p class="fit-note">每个月拿 24 款主流机型实际跑一遍，结果按季度汇总进适配说明。手机如果落在这个范围外，先进游戏详情页看看有没有同类机型的实测记录，再决定要不要下。</p>
        </div>
        <figure class="fit-visual">
          <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="手机屏幕尺寸区间示意线稿，标出几种宽度比例" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="section path-band" aria-labelledby="path-h">
    <div class="container">
      <p class="eyebrow">两步到达</p>
      <h2 id="path-h" class="h-lg">从首页到一局游戏，最多点两次</h2>
      <ol class="path-list">
        <li>
          <span class="path-step mono">第 1 步</span>
          <span class="path-name">首页开服表</span>
          <p>时间、品类、状态都摆在同一行，看准了直接点，不用先跳列表页。</p>
        </li>
        <li>
          <span class="path-step mono">第 2 步</span>
          <span class="path-name">游戏详情页</span>
          <p>开服时间、礼包和机型反馈集中在一页，确认完就能进服，第二次点击已经到底。</p>
        </li>
        <li>
          <span class="path-step mono">随时换</span>
          <span class="path-name">大厅目录接力</span>
          <p>临时想换类型，从目录进同样只要两步，网页端和手机上看到的是同一份开服信息。</p>
        </li>
      </ol>
      <p class="path-note">网页端与手机端同步一次开服信息，两端间隔不超过 2 分钟。</p>
    </div>
  </section>

  <section class="section seal-band" aria-labelledby="seal-h">
    <div class="container">
      <h2 id="seal-h" class="visually-hidden">站点信息</h2>
      <ul class="seal-list">
        <li>
          <span class="seal-k">站点</span>
          <span class="seal-v">大厅游戏官网 · V2.0 正版首页</span>
        </li>
        <li>
          <span class="seal-k">服务地区</span>
          <span class="seal-v">山东</span>
        </li>
        <li>
          <span class="seal-k">访问范围</span>
          <span class="seal-v">全国 31 个省级行政区</span>
        </li>
        <li>
          <span class="seal-k">备案号</span>
          <span class="seal-v mono">鲁ICP备68680350号-2</span>
        </li>
      </ul>
      <p class="seal-note">自 2016 年起在大厅里做开服这件事，如今有 420 万注册玩家、约 96 万月活在这里进出。<a href="/culture/">了解我们是谁</a></p>
    </div>
  </section>
</main>

.page-home {
  --hm-gap: 16px;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(34, 224, 214, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 224, 214, .028) 1px, transparent 1px);
  background-size: 56px 56px;
  color: var(--text);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.page-home h1,
.page-home h2,
.page-home h3 {
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.16;
}

.page-home p { margin: 0; }

.page-home ul,
.page-home ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home a:focus-visible {
  outline: 2px solid var(--cyan-lift);
  outline-offset: 3px;
}

.page-home #today-list,
.page-home #gift-band { scroll-margin-top: 96px; }

.page-home .section { padding: 44px 0; }

.page-home .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cyan);
  margin-bottom: 10px;
}

.page-home .h-xl {
  font-size: clamp(30px, 5.2vw, 56px);
  font-weight: 800;
}

.page-home .h-lg {
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 800;
}

.page-home .h-md {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
}

.page-home .ctx-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--mist);
}

.page-home .ctx-bar a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-home .ctx-bar a:hover { border-bottom-color: var(--cyan); }

.page-home .divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.page-home .divider::before {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--cyan);
  flex: none;
}

.page-home .divider .annotation {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--mist);
}

/* ---------- 首屏 ---------- */
.page-home .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.page-home .hero-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.page-home .hero-strip {
  position: relative;
  overflow: hidden;
  height: 132px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.page-home .hero-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
}

.page-home .hero-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 19, 32, .94), rgba(6, 19, 32, .4) 58%, rgba(34, 224, 214, .16));
  pointer-events: none;
}

.page-home .board {
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(11, 31, 46, .93);
  box-shadow: var(--shadow-panel);
  min-width: 0;
}

.page-home .board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.page-home .board-head .tag { flex: none; }

.page-home .board-lead {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--mist);
  max-width: 58ch;
}

.page-home .slot-list { margin-top: 6px; }

.page-home .slot {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 6px;
  border-top: 1px solid var(--line);
  transition: background .16s var(--ease);
}

.page-home .slot:first-child { border-top: 0; }

.page-home .slot:hover { background: rgba(34, 224, 214, .05); }

.page-home .slot-time {
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan-lift);
}

.page-home .slot-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.page-home .slot-note {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--mist);
  transition: color .16s var(--ease);
}

.page-home .slot:hover .slot-note { color: var(--cyan-lift); }

.page-home .slot-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mist);
  white-space: nowrap;
}

.page-home .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.page-home .dot--amber { background: var(--amber); }
.page-home .dot--cyan { background: var(--cyan); }
.page-home .dot--rust { background: var(--rust); }

.page-home .live-dot {
  animation: home-pulse 2.4s var(--ease) infinite;
  box-shadow: 0 0 0 3px rgba(242, 178, 51, .16);
}

@keyframes home-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.page-home .board-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--mist);
}

.page-home .board-foot a,
.page-home .gift-foot a,
.page-home .seal-note a,
.page-home .notice-list a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 224, 214, .42);
}

.page-home .board-foot a:hover,
.page-home .gift-foot a:hover,
.page-home .seal-note a:hover,
.page-home .notice-list a:hover { border-bottom-color: var(--cyan-lift); }

.page-home .hero-aside {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.page-home .aside-visual {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--panel);
}

.page-home .aside-visual img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .9;
}

.page-home .notice {
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  background: rgba(11, 31, 46, .86);
}

.page-home .notice-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.page-home .notice-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.page-home .notice-k {
  font-size: 12px;
  color: var(--amber);
  padding-top: 4px;
}

.page-home .notice-list p {
  font-size: 14px;
  line-height: 1.72;
  color: var(--text);
}

.page-home .gift-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 14px;
  font-size: 13px;
  text-decoration: none;
  color: var(--amber-lift);
  border: 1px solid rgba(242, 178, 51, .42);
  background: rgba(242, 178, 51, .08);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}

.page-home .gift-link:hover {
  background: rgba(242, 178, 51, .16);
  border-color: var(--amber);
}

/* ---------- 纸面章节 ---------- */
.page-home .route-band {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(28, 26, 23, .05) 1px, transparent 1px);
  background-size: 4px 4px;
  color: var(--paper-ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-home .route-band .eyebrow { color: var(--rust); }

.page-home .route-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.page-home .route-band .h-xl {
  color: var(--paper-ink);
  max-width: 12ch;
}

.page-home .route-intro .prose {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.78;
  color: rgba(28, 26, 23, .78);
  max-width: 40ch;
}

.page-home .route-list { display: grid; }

.page-home .route {
  border-top: 1px solid rgba(28, 26, 23, .2);
}

.page-home .route:last-child { border-bottom: 1px solid rgba(28, 26, 23, .2); }

.page-home .route-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-areas:
    "idx title go"
    "idx desc desc";
  gap: 4px 12px;
  align-items: baseline;
  padding: 18px 8px 18px 0;
  text-decoration: none;
  color: var(--paper-ink);
  transition: background .18s var(--ease), padding-left .18s var(--ease);
}

.page-home .route-link:hover,
.page-home .route-link:focus-visible {
  background: rgba(180, 67, 43, .08);
  padding-left: 10px;
}

.page-home .route-idx {
  grid-area: idx;
  font-size: 13px;
  color: var(--rust);
  padding-top: 5px;
}

.page-home .route-title {
  grid-area: title;
  font-size: 18px;
  font-weight: 800;
}

.page-home .route-desc {
  grid-area: desc;
  font-size: 14px;
  line-height: 1.68;
  color: rgba(28, 26, 23, .72);
}

.page-home .route-go {
  grid-area: go;
  font-size: 13px;
  color: var(--rust);
  white-space: nowrap;
}

.page-home .route-link:hover .route-go { text-decoration: underline; }

/* ---------- 礼包 ---------- */
.page-home .gift-band {
  background: var(--panel);
  border-top: 1px solid rgba(242, 178, 51, .34);
  border-bottom: 1px solid var(--line);
}

.page-home .gift-head .h-lg { max-width: 20ch; }

.page-home .gift-lead {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
  max-width: 62ch;
}

.page-home .gift-stats {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-home .gift-stats li {
  display: grid;
  gap: 6px;
  padding: 18px 16px;
  background: var(--ink);
}

.page-home .gs-num {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--amber-lift);
}

.page-home .gs-label {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--mist);
  line-height: 1.5;
}

.page-home .gift-foot {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--mist);
}

/* ---------- 品类 ---------- */
.page-home .cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.page-home .cat-visual {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--panel);
}

.page-home .cat-visual img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .88;
}

.page-home .cat-lead {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--mist);
  max-width: 52ch;
}

.page-home .cap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.page-home .cap {
  display: inline-block;
  padding: 9px 16px;
  font-size: 14px;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}

.page-home .cap:hover,
.page-home .cap:focus-visible {
  border-color: var(--cyan);
  background: rgba(34, 224, 214, .08);
  color: var(--cyan-lift);
}

.page-home .cap--on {
  border-color: var(--cyan);
  background: rgba(34, 224, 214, .08);
  color: var(--cyan-lift);
}

/* ---------- 适配 ---------- */
.page-home .fit-band {
  border-top: 1px solid var(--line);
  background-image: linear-gradient(180deg, rgba(34, 224, 214, .05), transparent 60%);
}

.page-home .fit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.page-home .fit-list {
  margin: 22px 0 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-home .fit-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ink);
}

.page-home .fit-list dt {
  font-size: 13px;
  color: var(--mist);
}

.page-home .fit-list dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cyan-lift);
}

.page-home .fit-note {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--mist);
  max-width: 52ch;
}

.page-home .fit-visual {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.page-home .fit-visual img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .92;
}

/* ---------- 路径 ---------- */
.page-home .path-band {
  border-top: 1px solid var(--line);
}

.page-home .path-list {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.page-home .path-list li {
  display: grid;
  gap: 6px;
  padding: 20px;
  background: var(--panel);
  border-top: 2px solid var(--cyan);
}

.page-home .path-step {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--cyan);
}

.page-home .path-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}

.page-home .path-list p {
  font-size: 13px;
  line-height: 1.72;
  color: var(--mist);
}

.page-home .path-note {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--mist);
}

/* ---------- 收尾条 ---------- */
.page-home .seal-band { padding-bottom: 60px; }

.page-home .seal-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.page-home .seal-list li {
  display: grid;
  gap: 4px;
}

.page-home .seal-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--mist);
}

.page-home .seal-v {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

.page-home .seal-note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.78;
  color: var(--mist);
}

/* ---------- 响应式 ---------- */
@media (max-width: 479px) {
  .page-home .slot {
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: start;
  }

  .page-home .slot-state {
    grid-column: 2;
    justify-self: start;
    padding-top: 2px;
  }

  .page-home .hero-strip { height: 112px; }
}

@media (min-width: 700px) {
  .page-home .hero-strip { height: 168px; }
  .page-home .board { padding: 26px; }
  .page-home .section { padding: 60px 0; }
  .page-home .seal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
}

@media (min-width: 860px) {
  .page-home .gift-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-home .path-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-home .path-list li { border-top-width: 2px; }
}

@media (min-width: 920px) {
  .page-home .route-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
  }

  .page-home .seal-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

  .page-home .seal-list li + li {
    padding-left: 20px;
    border-left: 1px solid var(--line);
  }
}

@media (min-width: 960px) {
  .page-home .section { padding: 76px 0; }

  .page-home .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 28px;
  }

  .page-home .cat-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 36px;
  }

  .page-home .fit-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .live-dot { animation: none; }

  .page-home *,
  .page-home *::after,
  .page-home *::before {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}