.page-news {
  --news-warm: linear-gradient(118deg, var(--orange-soft), var(--orange-deep));
  --news-gap: clamp(20px, 4vw, 36px);
  position: relative;
  padding-top: clamp(84px, 11vw, 124px);
  padding-bottom: clamp(40px, 7vw, 88px);
  color: var(--ink);
  background:
    radial-gradient(110% 62% at 88% -8%, rgba(47, 243, 196, .1), transparent 62%),
    radial-gradient(90% 58% at -6% 4%, rgba(255, 107, 44, .13), transparent 58%),
    var(--navy-900);
}

.page-news .section {
  padding-block: clamp(30px, 5.5vw, 58px);
}

.page-news .section-head {
  margin-bottom: clamp(18px, 3vw, 30px);
  display: grid;
  gap: 10px;
  max-width: 64ch;
}

.page-news .section-head .section-lead {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.8;
}

/* 面包屑 */
.page-news .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--steel);
}

.page-news .crumb {
  color: var(--steel);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.page-news .crumb:hover,
.page-news .crumb:focus-visible {
  color: var(--orange);
}

.page-news .crumb[aria-current="page"] {
  color: var(--cy);
}

.page-news .crumb-sep {
  color: rgba(148, 163, 184, .55);
}

/* 头条 */
.news-hero-grid {
  display: grid;
  gap: var(--news-gap);
  align-items: start;
}

.news-hero-copy {
  display: grid;
  gap: 14px;
  justify-items: start;
  min-width: 0;
}

.news-hero-copy .eyebrow {
  color: var(--orange);
}

.page-news .display-title {
  margin: 0;
  font-size: clamp(34px, 7.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -.02em;
  font-style: normal;
}

.news-hero-copy .section-lead {
  margin: 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.hero-metrics {
  list-style: none;
  margin: clamp(18px, 3vw, 28px) 0 0;
  padding: clamp(16px, 3vw, 22px) 0 0;
  width: 100%;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.hero-metrics li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hero-metrics .num {
  font-family: var(--font-mono);
  font-size: clamp(20px, 3.4vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cy);
}

.hero-metrics li:nth-child(1) .num,
.hero-metrics li:nth-child(3) .num {
  color: var(--orange);
}

.metric-label {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--steel);
}

.news-hero-figure {
  margin: 0;
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

.page-news .frame {
  max-width: 100%;
  min-width: 0;
}

.page-news .frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.news-hero-figure img {
  aspect-ratio: 2 / 1;
}

.page-news .frame-caption {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--steel);
  background: rgba(5, 15, 28, .72);
}

/* 更新节奏 */
.flow-scale {
  display: block;
  width: 100%;
  height: auto;
  margin: clamp(24px, 4vw, 38px) 0 0;
}

.update-flow {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.update-flow li {
  position: relative;
  padding: 16px 0 16px 22px;
  border-left: 1px solid var(--line-soft);
}

.update-flow li::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 22px;
  width: 8px;
  height: 8px;
  background: var(--cy);
  transform: rotate(45deg);
}

.update-flow li:last-child::before {
  background: var(--orange);
}

.flow-step {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--orange);
}

.update-flow h3 {
  margin: 7px 0 5px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
}

.update-flow p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.flow-note {
  margin: 18px 0 0;
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.75;
  color: var(--steel);
}

/* 项目簇 */
.cluster-layout {
  display: grid;
  gap: var(--news-gap);
  align-items: start;
}

.page-news .tablist {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-news .tab {
  flex: 0 0 auto;
  padding: 10px 15px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--muted);
  background: rgba(244, 247, 251, .05);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 72%, calc(100% - 9px) 100%, 0 100%);
  transition: color .2s var(--ease), background .2s var(--ease);
}

.page-news .tab:hover {
  color: var(--ink);
  background: rgba(244, 247, 251, .1);
}

.page-news .tab[aria-selected="true"] {
  color: var(--ink-900);
  font-weight: 700;
  background: var(--news-warm);
  border-color: transparent;
}

.page-news .tab-panel {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  outline-offset: 4px;
}

.cluster-panel {
  display: grid;
  gap: 14px;
}

.cluster-text {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--muted);
}

.cluster-sample {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.sample-key {
  display: inline-block;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--orange);
}

.page-news .chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .chip {
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--muted);
  background: rgba(244, 247, 251, .04);
  border: 1px solid var(--line);
}

.cluster-figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--navy-800);
}

.cluster-figure img {
  aspect-ratio: 10 / 7;
}

/* 战报列表 */
.reports-section {
  border-top: 1px solid var(--line-soft);
}

.reports-layout {
  display: grid;
  gap: var(--news-gap);
  align-items: start;
}

.reports-main {
  min-width: 0;
}

.report-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.report-item {
  display: grid;
  gap: 7px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}

.report-item:first-child {
  border-top: 1px solid var(--line-strong);
}

.report-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--steel);
}

.report-tag {
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--cy);
  background: rgba(47, 243, 196, .12);
  border: 1px solid rgba(47, 243, 196, .28);
}

.report-title {
  margin: 0;
  font-size: clamp(17px, 2.4vw, 20px);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -.01em;
  color: var(--ink);
}

.report-excerpt {
  margin: 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.78;
  color: var(--muted);
}

.reports-foot {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--steel);
}

.reports-foot a,
.aside-note a,
.board-note a {
  color: var(--cy);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 243, 196, .45);
}

.reports-foot a:hover,
.aside-note a:hover,
.board-note a:hover {
  color: var(--orange);
  border-bottom-color: rgba(255, 107, 44, .55);
}

.reports-aside {
  min-width: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}

.collect-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(158deg, rgba(139, 92, 246, .18), rgba(11, 39, 69, .92) 46%, rgba(7, 26, 47, .96));
}

.collect-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.collect-body {
  display: grid;
  gap: 12px;
  padding: clamp(18px, 3vw, 24px);
  justify-items: start;
}

.collect-body .eyebrow {
  color: var(--cy);
  font-size: 11px;
}

.collect-body h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.36;
  font-weight: 800;
  color: var(--ink);
}

.collect-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--muted);
}

.collect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}

.collect-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.collect-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.aside-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--steel);
}

/* 射手榜 */
.board-layout {
  display: grid;
  gap: var(--news-gap);
  align-items: start;
}

.board-tabs {
  min-width: 0;
}

.board-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.board-caption {
  caption-side: top;
  padding: 0 0 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--steel);
}

.board-table {
  width: 100%;
  min-width: 470px;
  border-collapse: collapse;
  font-size: 14px;
}

.board-table th,
.board-table td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}

.board-table thead th {
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 1px solid var(--line-strong);
}

.board-table tbody tr:hover td,
.board-table tbody tr:hover th {
  background: rgba(244, 247, 251, .035);
}

.board-table .rank {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
}

.board-name {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.board-score {
  font-weight: 700;
  color: var(--cy);
}

.delta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
}

.delta.up {
  color: var(--cy);
}

.delta.down {
  color: var(--orange);
}

.delta.flat {
  color: var(--steel);
}

.dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--steel);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  transform: rotate(45deg);
}

.legend-dot.home {
  background: var(--cy);
}

.legend-dot.away {
  background: var(--violet);
}

.dist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.dist-row {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.dist-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
}

.dist-num {
  font-size: 12px;
  color: var(--steel);
  letter-spacing: .05em;
}

.dist-bar {
  height: 8px;
  background: rgba(244, 247, 251, .07);
  overflow: hidden;
}

.dist-bar span {
  display: block;
  height: 100%;
}

.dist-bar .home {
  background: linear-gradient(90deg, var(--cy), rgba(47, 243, 196, .28));
}

.dist-bar .away {
  background: linear-gradient(90deg, var(--violet), rgba(139, 92, 246, .28));
}

.board-figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--navy-800);
}

.board-figure img {
  aspect-ratio: 1000 / 650;
}

.board-note {
  margin: clamp(18px, 3vw, 26px) 0 0;
  max-width: 70ch;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--steel);
}

/* 响应式 */
@media (min-width: 760px) {
  .hero-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 22px;
  }

  .update-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 20px;
  }

  .update-flow li {
    padding: 22px 22px 8px 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .update-flow li::before {
    left: 0;
    top: -4.5px;
  }
}

@media (min-width: 960px) {
  .news-hero-grid {
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: end;
  }

  .news-hero-figure {
    margin-bottom: 6px;
  }

  .cluster-layout {
    grid-template-columns: 1.34fr .66fr;
    gap: clamp(28px, 4vw, 52px);
  }

  .board-layout {
    grid-template-columns: 1.24fr .76fr;
    gap: clamp(28px, 4vw, 48px);
  }
}

@media (min-width: 1000px) {
  .reports-layout {
    grid-template-columns: 1.42fr .58fr;
    gap: clamp(28px, 4vw, 52px);
  }

  .reports-aside {
    position: sticky;
    top: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .tab,
  .page-news .crumb {
    transition: none;
  }
}


<main id="main-content" class="page-news">
  <div class="container">
    <nav class="breadcrumbs" aria-label="面包屑导航">
      <a class="crumb" href="/">首页</a>
      <span class="crumb-sep" aria-hidden="true">/</span>
      <span class="crumb" aria-current="page">赛场日志</span>
    </nav>
  </div>

  <section class="section news-hero" aria-labelledby="hero-title">
    <div class="container news-hero-grid">
      <div class="news-hero-copy">
        <p class="eyebrow">第 18 轮 · 战报与榜单已同步发布</p>
        <h1 id="hero-title" class="display-title">终场之后，读得懂的那份赛场记录</h1>
        <p class="section-lead">九游体育官网把每轮赛后的战报和射手榜放在同一次发布里：六个项目簇分开读，比分转折有据可查，得分与出场轮次一起刷新。追比赛的人不必来回翻找，收一份自己的对照表就够了。</p>
        <div class="hero-actions">
          <a class="btn btn-primary" href="#reports">读本轮战报</a>
          <a class="btn btn-ghost" href="#leaderboard">看射手榜</a>
        </div>
        <ul class="hero-metrics">
          <li><span class="mono num">18</span><span class="metric-label">个运动项目的赛程持续跟踪</span></li>
          <li><span class="mono num">6</span><span class="metric-label">个项目簇分层归档战报</span></li>
          <li><span class="mono num">30</span><span class="metric-label">分钟内榜单与战报同批上线</span></li>
          <li><span class="mono num">2400</span><span class="metric-label">场赛事条目按赛季维护</span></li>
        </ul>
      </div>
      <figure class="frame frame--wide news-hero-figure">
        <img src="{zhanqunpic:h:800w:1600}" width="1600" height="800" alt="低角度射门瞬间，看台灯光在深空蓝背景里拉出暖橙光带，球员带球产生运动模糊">
        <figcaption class="frame-caption">第 18 轮焦点场次 · 终场前的一次近距离射门</figcaption>
      </figure>
    </div>

    <div class="container">
      <svg class="flow-scale" viewBox="0 0 640 26" aria-hidden="true" focusable="false" role="presentation">
        <defs>
          <linearGradient id="newsFlowGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stop-color="#FF8A3D"></stop>
            <stop offset="1" stop-color="#2FF3C4"></stop>
          </linearGradient>
        </defs>
        <line x1="0" y1="13" x2="640" y2="13" stroke="rgba(244,247,251,.14)" stroke-width="1"></line>
        <line x1="0" y1="13" x2="470" y2="13" stroke="url(#newsFlowGrad)" stroke-width="2"></line>
        <rect x="78" y="9" width="8" height="8" fill="#0B2745" stroke="#FF6B2C" stroke-width="1.5" transform="rotate(45 82 13)"></rect>
        <rect x="236" y="9" width="8" height="8" fill="#0B2745" stroke="#FF6B2C" stroke-width="1.5" transform="rotate(45 240 13)"></rect>
        <rect x="394" y="9" width="8" height="8" fill="#0B2745" stroke="#FF6B2C" stroke-width="1.5" transform="rotate(45 398 13)"></rect>
        <rect x="467" y="8" width="10" height="10" fill="#2FF3C4" transform="rotate(45 472 13)"></rect>
      </svg>

      <ol class="update-flow">
        <li>
          <span class="flow-step">STEP 01</span>
          <h3>终场哨响</h3>
          <p>比分、出场时间与关键事件记录进入本轮更新批次，数据组先行复核。</p>
        </li>
        <li>
          <span class="flow-step">STEP 02</span>
          <h3>分层归档</h3>
          <p>战报按六个项目簇分别归档，标签、轮次与项目归属一次写清。</p>
        </li>
        <li>
          <span class="flow-step">STEP 03</span>
          <h3>榜单核算</h3>
          <p>得分、出场轮次与主客队分布重新排序，名次变化与上一轮对照呈现。</p>
        </li>
        <li>
          <span class="flow-step">STEP 04</span>
          <h3>同批发布</h3>
          <p>战报与榜单在同一次更新里上线，列表和详情页看到的是同一批内容。</p>
        </li>
      </ol>
      <p class="flow-note">赛程、战报与榜单素材来自 40 余家赛事数据与内容合作方；编辑初校、数据复核、发布前抽检三道流程依次走完，内容再对外呈现。</p>
    </div>
  </section>

  <section class="section cluster-section" aria-labelledby="cluster-title">
    <div class="container">
      <div class="section-head cluster-head">
        <p class="eyebrow">项目簇索引</p>
        <h2 id="cluster-title" class="section-title">切到你正在追的那一类</h2>
        <p class="section-lead">同一轮里，足球看换人时机，篮球看第四节球权，网球看破发点转化。挑一个项目簇，战报的写法和关注点会跟着调整。</p>
      </div>

      <div class="cluster-layout">
        <div class="tabs" data-tabs>
          <div class="tablist" role="tablist" aria-label="项目簇分类">
            <button class="tab" type="button" role="tab" id="tab-football" data-tab aria-controls="panel-football" aria-selected="true">足球</button>
            <button class="tab" type="button" role="tab" id="tab-basketball" data-tab aria-controls="panel-basketball" aria-selected="false">篮球</button>
            <button class="tab" type="button" role="tab" id="tab-tennis" data-tab aria-controls="panel-tennis" aria-selected="false">网球</button>
            <button class="tab" type="button" role="tab" id="tab-esports" data-tab aria-controls="panel-esports" aria-selected="false">电竞</button>
            <button class="tab" type="button" role="tab" id="tab-multi" data-tab aria-controls="panel-multi" aria-selected="false">综合赛事</button>
            <button class="tab" type="button" role="tab" id="tab-youth" data-tab aria-controls="panel-youth" aria-selected="false">青少年赛事</button>
          </div>

          <div class="tab-panel cluster-panel" role="tabpanel" id="panel-football" data-tab-panel aria-labelledby="tab-football" tabindex="0">
            <p class="cluster-text">比分、红黄牌与关键换人的时间点写进同一条目，回看转折点不用另开页面。联赛与杯赛按各自的轮次节点分栏，赛季中段的密集赛程会单独标注。</p>
            <p class="cluster-sample"><span class="sample-key">本轮</span>东区 A 组第 18 轮：主队终场前连入两球完成反超</p>
            <div class="chip-group">
              <span class="chip">联赛轮次</span>
              <span class="chip">杯赛淘汰</span>
              <span class="chip">阵容轮换</span>
            </div>
          </div>

          <div class="tab-panel cluster-panel" role="tabpanel" id="panel-basketball" data-tab-panel aria-labelledby="tab-basketball" tabindex="0">
            <p class="cluster-text">分节比分与关键球权放在一起读，第四节的追分节奏和暂停调整能顺着时间线走下来。加时赛单独成段，最后两分钟的罚球与失误逐次列明。</p>
            <p class="cluster-sample"><span class="sample-key">本轮</span>西区 B 组第 18 轮：客队第四节打出 12 比 2 抹平分差</p>
            <div class="chip-group">
              <span class="chip">分节比分</span>
              <span class="chip">关键球权</span>
              <span class="chip">加时赛</span>
            </div>
          </div>

          <div class="tab-panel cluster-panel" role="tabpanel" id="panel-tennis" data-tab-panel aria-labelledby="tab-tennis" tabindex="0">
            <p class="cluster-text">盘分、破发点与决胜盘走势逐盘呈现，长盘比赛会标出体能变化的拐点。一发得分率与接发抢攻的分布放在条目末尾，方便对比同一轮里的不同打法。</p>
            <p class="cluster-sample"><span class="sample-key">本轮</span>硬地系列赛第 18 轮：三盘鏖战中的破发点把握</p>
            <div class="chip-group">
              <span class="chip">盘分走势</span>
              <span class="chip">破发点</span>
              <span class="chip">抢七</span>
            </div>
          </div>

          <div class="tab-panel cluster-panel" role="tabpanel" id="panel-esports" data-tab-panel aria-labelledby="tab-esports" tabindex="0">
            <p class="cluster-text">小局比分与关键团战的时间戳并列，资源点的得失能对上阵容选择。经济曲线在前中期持平的对局里，会重点还原那一波开团的地形与站位。</p>
            <p class="cluster-sample"><span class="sample-key">本轮</span>常规赛第 18 轮：决胜局 25 分钟团战定胜负</p>
            <div class="chip-group">
              <span class="chip">小局比分</span>
              <span class="chip">资源点</span>
              <span class="chip">阵容选择</span>
            </div>
          </div>

          <div class="tab-panel cluster-panel" role="tabpanel" id="panel-multi" data-tab-panel aria-labelledby="tab-multi" tabindex="0">
            <p class="cluster-text">径赛、泳池与场地项目按分项成绩归档，同一天出现的多项纪录会合并成一条条目。技术分段与最终成绩并排，看得到纪录是在哪一段被拉开的。</p>
            <p class="cluster-sample"><span class="sample-key">上一批次</span>分项赛第 17 轮：三个项目在同一天改写纪录</p>
            <div class="chip-group">
              <span class="chip">分项成绩</span>
              <span class="chip">纪录追踪</span>
              <span class="chip">赛程密度</span>
            </div>
          </div>

          <div class="tab-panel cluster-panel" role="tabpanel" id="panel-youth" data-tab-panel aria-labelledby="tab-youth" tabindex="0">
            <p class="cluster-text">梯队赛与选拔赛按年龄组分开，晋级名单和下一阶段安排写在条目末尾。教练组更替、阵容调整这类影响后续轮次的信息，也会在同一位置提示。</p>
            <p class="cluster-sample"><span class="sample-key">上一批次</span>梯队选拔第 17 轮：六名选手进入下一阶段</p>
            <div class="chip-group">
              <span class="chip">年龄组</span>
              <span class="chip">晋级名单</span>
              <span class="chip">选拔节点</span>
            </div>
          </div>
        </div>

        <figure class="frame frame--tall cluster-figure">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="六个项目簇以斜线排列的分层信息图，荧光青绿标注当前轮次节点" loading="lazy" decoding="async">
          <figcaption class="frame-caption">六个项目簇按轮次斜向排列，同一轮的条目落在同一层</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section reports-section" id="reports" aria-labelledby="reports-title">
    <div class="container reports-layout">
      <div class="reports-main">
        <div class="section-head">
          <p class="eyebrow">战报条目</p>
          <h2 id="reports-title" class="section-title">本轮与近几轮的赛况记录</h2>
          <p class="section-lead">条目按发布批次排列，越靠前越新。每条都带着项目标签与轮次线索，扫一眼就知道是不是你要找的那一场。</p>
        </div>

        <ol class="report-list">
          <li class="report-item">
            <div class="report-meta">
              <span class="report-tag">足球</span>
              <span class="mono">第 18 轮 · 赛后 30 分钟内</span>
            </div>
            <h3 class="report-title">两个换人改写最后十分钟，主队完成反超</h3>
            <p class="report-excerpt">落后一球时，主队在第 78 分钟与第 84 分钟连续换上两名前场球员，三次射门换来两粒进球。条目内附完整的换人与射门时间线。</p>
          </li>
          <li class="report-item">
            <div class="report-meta">
              <span class="report-tag">篮球</span>
              <span class="mono">第 18 轮 · 赛后 30 分钟内</span>
            </div>
            <h3 class="report-title">第四节 12 比 2 的攻防转换，客队把分差抹平</h3>
            <p class="report-excerpt">客队在第四节中段连抢三个前场篮板，快攻得分撑起反扑，最后 90 秒两罚全中把比赛拖入加时。</p>
          </li>
          <li class="report-item">
            <div class="report-meta">
              <span class="report-tag">网球</span>
              <span class="mono">第 18 轮 · 赛后 1 小时内</span>
            </div>
            <h3 class="report-title">破发点把握率决定晋级名额</h3>
            <p class="report-excerpt">三盘比赛共出现 14 个破发点，胜方转化 6 个。决胜盘第 9 局的一次接发抢攻，成了整场的分水岭。</p>
          </li>
          <li class="report-item">
            <div class="report-meta">
              <span class="report-tag">电竞</span>
              <span class="mono">第 18 轮 · 赛后 1 小时内</span>
            </div>
            <h3 class="report-title">决胜局 25 分钟团战，蓝方拿下关键资源点</h3>
            <p class="report-excerpt">双方在前 20 分钟经济基本持平，蓝方借地形优势开团，一波换掉四人后直接推进到高地。</p>
          </li>
          <li class="report-item">
            <div class="report-meta">
              <span class="report-tag">综合赛事</span>
              <span class="mono">第 17 轮 · 上一批次</span>
            </div>
            <h3 class="report-title">分项成绩归档：三个项目在同一天改写纪录</h3>
            <p class="report-excerpt">径赛与泳池的两项赛会纪录、一项场地纪录在同一比赛日刷新，条目按项目分列成绩与技术分段。</p>
          </li>
          <li class="report-item">
            <div class="report-meta">
              <span class="report-tag">青少年赛事</span>
              <span class="mono">第 17 轮 · 上一批次</span>
            </div>
            <h3 class="report-title">梯队选拔赛收官，六名选手进入下一阶段</h3>
            <p class="report-excerpt">U 系列选拔赛完成最后一轮，晋级名单与后续集训节点一并更新在条目末尾，方便持续跟进。</p>
          </li>
          <li class="report-item">
            <div class="report-meta">
              <span class="report-tag">足球</span>
              <span class="mono">赛季中段 · 盘点</span>
            </div>
            <h3 class="report-title">轮次密度与阵容轮换的关系</h3>
            <p class="report-excerpt">把上半程的轮次间隔与出场时间放在一起看，哪些位置在密集赛程中最先出现疲劳，读一遍就清楚。</p>
          </li>
        </ol>

        <p class="reports-foot">想知道赛程中心怎么按日期与赛季阶段筛选，可以到 <a href="/features/">功能总览</a> 看各入口的用法。</p>
      </div>

      <aside class="reports-aside" aria-labelledby="collect-title">
        <div class="panel panel--cut collect-card" id="collect">
          <img src="{zhanqunpic:h:500w:800}" width="800" height="500" alt="收藏星标与文件导出图标组合的抽象图，背景是荧光青绿的赛场运动轨迹" loading="lazy" decoding="async">
          <div class="collect-body">
            <p class="eyebrow">收藏与导出</p>
            <h3 id="collect-title">把常看的赛事页收进一处</h3>
            <p>收藏的赛事页与对照记录保存在你当前使用的浏览器里，换台设备后可以照着步骤把路径重新找回来。</p>
            <ul class="collect-list">
              <li>一次最多对照 50 场收藏赛事</li>
              <li>支持导出 CSV 与 PDF 两种格式</li>
              <li>操作位于帮助中心第二步，跟着步骤卡走即可</li>
            </ul>
            <a class="btn btn-primary btn-sm" href="/guide/">查看导出步骤</a>
          </div>
        </div>
        <p class="aside-note">导出的对照表和赛况记录有出入？把轮次与项目标签发到客服邮箱，或在 <a href="/contact-us/">联系我们</a> 提交技术工单，工作日会有同事跟进。</p>
      </aside>
    </div>
  </section>

  <section class="section board-section" id="leaderboard" aria-labelledby="board-title">
    <div class="container">
      <div class="section-head board-head">
        <p class="eyebrow">榜单专题</p>
        <h2 id="board-title" class="section-title">最新九游体育射手榜，跟随本轮批次刷新</h2>
        <p class="section-lead">得分、出场轮次与主客队分布同时呈现，名次升降与上一轮对照。看一名选手最近几轮的状态走势，比单看总数更有用。</p>
      </div>

      <div class="board-layout">
        <div class="tabs board-tabs" data-tabs>
          <div class="tablist" role="tablist" aria-label="射手榜视图">
            <button class="tab" type="button" role="tab" id="tab-score" data-tab aria-controls="panel-score" aria-selected="true">得分榜</button>
            <button class="tab" type="button" role="tab" id="tab-dist" data-tab aria-controls="panel-dist" aria-selected="false">主客队分布</button>
          </div>

          <div class="tab-panel" role="tabpanel" id="panel-score" data-tab-panel aria-labelledby="tab-score" tabindex="0">
            <div class="board-table-wrap">
              <table class="board-table">
                <caption class="board-caption">第 18 轮赛后榜单前五位，箭头表示与上一轮相比的位次变化</caption>
                <thead>
                  <tr>
                    <th scope="col">名次</th>
                    <th scope="col">选手代号</th>
                    <th scope="col">所属队伍</th>
                    <th scope="col">得分</th>
                    <th scope="col">出场轮次</th>
                    <th scope="col">变化</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="rank">01</td>
                    <th scope="row" class="board-name">前锋 · 09</th>
                    <td>东区 A 组</td>
                    <td class="mono board-score">24</td>
                    <td class="mono">18</td>
                    <td><span class="delta up">↑ 1</span></td>
                  </tr>
                  <tr>
                    <td class="rank">02</td>
                    <th scope="row" class="board-name">边锋 · 11</th>
                    <td>西区 B 组</td>
                    <td class="mono board-score">21</td>
                    <td class="mono">18</td>
                    <td><span class="delta flat">—</span></td>
                  </tr>
                  <tr>
                    <td class="rank">03</td>
                    <th scope="row" class="board-name">中锋 · 23</th>
                    <td>南区 A 组</td>
                    <td class="mono board-score">19</td>
                    <td class="mono">17</td>
                    <td><span class="delta down">↓ 2</span></td>
                  </tr>
                  <tr>
                    <td class="rank">04</td>
                    <th scope="row" class="board-name">前腰 · 07</th>
                    <td>北区 B 组</td>
                    <td class="mono board-score">17</td>
                    <td class="mono">18</td>
                    <td><span class="delta up">↑ 3</span></td>
                  </tr>
                  <tr>
                    <td class="rank">05</td>
                    <th scope="row" class="board-name">边卫 · 04</th>
                    <td>东区 B 组</td>
                    <td class="mono board-score">15</td>
                    <td class="mono">16</td>
                    <td><span class="delta flat">—</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div class="tab-panel" role="tabpanel" id="panel-dist" data-tab-panel aria-labelledby="tab-dist" tabindex="0">
            <div class="dist-legend">
              <span class="legend-item"><span class="legend-dot home" aria-hidden="true"></span>主队得分</span>
              <span class="legend-item"><span class="legend-dot away" aria-hidden="true"></span>客队得分</span>
            </div>
            <ul class="dist-list">
              <li class="dist-row">
                <div class="dist-head"><span class="board-name">前锋 · 09</span><span class="mono dist-num">15 / 9</span></div>
                <div class="dist-bar"><span class="home" style="width:62.5%"></span></div>
                <div class="dist-bar"><span class="away" style="width:37.5%"></span></div>
              </li>
              <li class="dist-row">
                <div class="dist-head"><span class="board-name">边锋 · 11</span><span class="mono dist-num">13 / 8</span></div>
                <div class="dist-bar"><span class="home" style="width:61.9%"></span></div>
                <div class="dist-bar"><span class="away" style="width:38.1%"></span></div>
              </li>
              <li class="dist-row">
                <div class="dist-head"><span class="board-name">中锋 · 23</span><span class="mono dist-num">8 / 11</span></div>
                <div class="dist-bar"><span class="home" style="width:42.1%"></span></div>
                <div class="dist-bar"><span class="away" style="width:57.9%"></span></div>
              </li>
              <li class="dist-row">
                <div class="dist-head"><span class="board-name">前腰 · 07</span><span class="mono dist-num">11 / 6</span></div>
                <div class="dist-bar"><span class="home" style="width:64.7%"></span></div>
                <div class="dist-bar"><span class="away" style="width:35.3%"></span></div>
              </li>
              <li class="dist-row">
                <div class="dist-head"><span class="board-name">边卫 · 04</span><span class="mono dist-num">6 / 9</span></div>
                <div class="dist-bar"><span class="home" style="width:40%"></span></div>
                <div class="dist-bar"><span class="away" style="width:60%"></span></div>
              </li>
            </ul>
          </div>
        </div>

        <figure class="frame board-figure">
          <img src="{zhanqunpic:h:650w:1000}" width="1000" height="650" alt="等宽数字榜单与紫罗兰、青绿双色数据条组成的射手榜可视化图形" loading="lazy" decoding="async">
          <figcaption class="frame-caption">主队与客队得分以双色数据条对比，名次升降紧随其后</figcaption>
        </figure>
      </div>

      <p class="board-note">榜单随着当轮战报一起发布，切换项目簇后看到的就是同一次更新里的结果。想核对赛程中心与各入口的对应关系，可前往 <a href="/features/">功能总览</a>。</p>
    </div>
  </section>
</main>

.page-news {
  --news-warm: linear-gradient(118deg, var(--orange-soft), var(--orange-deep));
  --news-gap: clamp(20px, 4vw, 36px);
  position: relative;
  padding-top: clamp(84px, 11vw, 124px);
  padding-bottom: clamp(40px, 7vw, 88px);
  color: var(--ink);
  background:
    radial-gradient(110% 62% at 88% -8%, rgba(47, 243, 196, .1), transparent 62%),
    radial-gradient(90% 58% at -6% 4%, rgba(255, 107, 44, .13), transparent 58%),
    var(--navy-900);
}

.page-news .section {
  padding-block: clamp(30px, 5.5vw, 58px);
}

.page-news .section-head {
  margin-bottom: clamp(18px, 3vw, 30px);
  display: grid;
  gap: 10px;
  max-width: 64ch;
}

.page-news .section-head .section-lead {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.8;
}

/* 面包屑 */
.page-news .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--steel);
}

.page-news .crumb {
  color: var(--steel);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.page-news .crumb:hover,
.page-news .crumb:focus-visible {
  color: var(--orange);
}

.page-news .crumb[aria-current="page"] {
  color: var(--cy);
}

.page-news .crumb-sep {
  color: rgba(148, 163, 184, .55);
}

/* 头条 */
.news-hero-grid {
  display: grid;
  gap: var(--news-gap);
  align-items: start;
}

.news-hero-copy {
  display: grid;
  gap: 14px;
  justify-items: start;
  min-width: 0;
}

.news-hero-copy .eyebrow {
  color: var(--orange);
}

.page-news .display-title {
  margin: 0;
  font-size: clamp(34px, 7.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -.02em;
  font-style: normal;
}

.news-hero-copy .section-lead {
  margin: 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.hero-metrics {
  list-style: none;
  margin: clamp(18px, 3vw, 28px) 0 0;
  padding: clamp(16px, 3vw, 22px) 0 0;
  width: 100%;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.hero-metrics li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hero-metrics .num {
  font-family: var(--font-mono);
  font-size: clamp(20px, 3.4vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cy);
}

.hero-metrics li:nth-child(1) .num,
.hero-metrics li:nth-child(3) .num {
  color: var(--orange);
}

.metric-label {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--steel);
}

.news-hero-figure {
  margin: 0;
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

.page-news .frame {
  max-width: 100%;
  min-width: 0;
}

.page-news .frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.news-hero-figure img {
  aspect-ratio: 2 / 1;
}

.page-news .frame-caption {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--steel);
  background: rgba(5, 15, 28, .72);
}

/* 更新节奏 */
.flow-scale {
  display: block;
  width: 100%;
  height: auto;
  margin: clamp(24px, 4vw, 38px) 0 0;
}

.update-flow {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.update-flow li {
  position: relative;
  padding: 16px 0 16px 22px;
  border-left: 1px solid var(--line-soft);
}

.update-flow li::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: 22px;
  width: 8px;
  height: 8px;
  background: var(--cy);
  transform: rotate(45deg);
}

.update-flow li:last-child::before {
  background: var(--orange);
}

.flow-step {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--orange);
}

.update-flow h3 {
  margin: 7px 0 5px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
}

.update-flow p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.flow-note {
  margin: 18px 0 0;
  max-width: 72ch;
  font-size: 13px;
  line-height: 1.75;
  color: var(--steel);
}

/* 项目簇 */
.cluster-layout {
  display: grid;
  gap: var(--news-gap);
  align-items: start;
}

.page-news .tablist {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-news .tab {
  flex: 0 0 auto;
  padding: 10px 15px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--muted);
  background: rgba(244, 247, 251, .05);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 72%, calc(100% - 9px) 100%, 0 100%);
  transition: color .2s var(--ease), background .2s var(--ease);
}

.page-news .tab:hover {
  color: var(--ink);
  background: rgba(244, 247, 251, .1);
}

.page-news .tab[aria-selected="true"] {
  color: var(--ink-900);
  font-weight: 700;
  background: var(--news-warm);
  border-color: transparent;
}

.page-news .tab-panel {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  outline-offset: 4px;
}

.cluster-panel {
  display: grid;
  gap: 14px;
}

.cluster-text {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--muted);
}

.cluster-sample {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

.sample-key {
  display: inline-block;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--orange);
}

.page-news .chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .chip {
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--muted);
  background: rgba(244, 247, 251, .04);
  border: 1px solid var(--line);
}

.cluster-figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--navy-800);
}

.cluster-figure img {
  aspect-ratio: 10 / 7;
}

/* 战报列表 */
.reports-section {
  border-top: 1px solid var(--line-soft);
}

.reports-layout {
  display: grid;
  gap: var(--news-gap);
  align-items: start;
}

.reports-main {
  min-width: 0;
}

.report-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.report-item {
  display: grid;
  gap: 7px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}

.report-item:first-child {
  border-top: 1px solid var(--line-strong);
}

.report-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--steel);
}

.report-tag {
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--cy);
  background: rgba(47, 243, 196, .12);
  border: 1px solid rgba(47, 243, 196, .28);
}

.report-title {
  margin: 0;
  font-size: clamp(17px, 2.4vw, 20px);
  font-weight: 800;
  line-height: 1.42;
  letter-spacing: -.01em;
  color: var(--ink);
}

.report-excerpt {
  margin: 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.78;
  color: var(--muted);
}

.reports-foot {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--steel);
}

.reports-foot a,
.aside-note a,
.board-note a {
  color: var(--cy);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 243, 196, .45);
}

.reports-foot a:hover,
.aside-note a:hover,
.board-note a:hover {
  color: var(--orange);
  border-bottom-color: rgba(255, 107, 44, .55);
}

.reports-aside {
  min-width: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}

.collect-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(158deg, rgba(139, 92, 246, .18), rgba(11, 39, 69, .92) 46%, rgba(7, 26, 47, .96));
}

.collect-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.collect-body {
  display: grid;
  gap: 12px;
  padding: clamp(18px, 3vw, 24px);
  justify-items: start;
}

.collect-body .eyebrow {
  color: var(--cy);
  font-size: 11px;
}

.collect-body h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.36;
  font-weight: 800;
  color: var(--ink);
}

.collect-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--muted);
}

.collect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}

.collect-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.collect-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.aside-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--steel);
}

/* 射手榜 */
.board-layout {
  display: grid;
  gap: var(--news-gap);
  align-items: start;
}

.board-tabs {
  min-width: 0;
}

.board-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.board-caption {
  caption-side: top;
  padding: 0 0 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--steel);
}

.board-table {
  width: 100%;
  min-width: 470px;
  border-collapse: collapse;
  font-size: 14px;
}

.board-table th,
.board-table td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}

.board-table thead th {
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 1px solid var(--line-strong);
}

.board-table tbody tr:hover td,
.board-table tbody tr:hover th {
  background: rgba(244, 247, 251, .035);
}

.board-table .rank {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
}

.board-name {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.board-score {
  font-weight: 700;
  color: var(--cy);
}

.delta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
}

.delta.up {
  color: var(--cy);
}

.delta.down {
  color: var(--orange);
}

.delta.flat {
  color: var(--steel);
}

.dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--steel);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
}

.legend-dot.home {
  background: var(--cy);
}

.legend-dot.away {
  background: var(--violet);
}

.dist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.dist-row {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.dist-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
}

.dist-num {
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--steel);
}

.dist-bar {
  height: 8px;
  background: rgba(244, 247, 251, .07);
  overflow: hidden;
}

.dist-bar span {
  display: block;
  height: 100%;
}

.dist-bar .home {
  background: linear-gradient(90deg, var(--cy), rgba(47, 243, 196, .28));
}

.dist-bar .away {
  background: linear-gradient(90deg, var(--violet), rgba(139, 92, 246, .28));
}

.board-figure {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--navy-800);
}

.board-figure img {
  aspect-ratio: 1000 / 650;
}

.board-note {
  margin: clamp(18px, 3vw, 26px) 0 0;
  max-width: 70ch;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--steel);
}

/* 响应式 */
@media (min-width: 760px) {
  .hero-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 22px;
  }

  .update-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 20px;
  }

  .update-flow li {
    padding: 22px 22px 8px 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .update-flow li::before {
    left: 0;
    top: -4.5px;
  }
}

@media (min-width: 960px) {
  .news-hero-grid {
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: end;
  }

  .news-hero-figure {
    margin-bottom: 6px;
  }

  .cluster-layout {
    grid-template-columns: 1.34fr .66fr;
    gap: clamp(28px, 4vw, 52px);
  }

  .board-layout {
    grid-template-columns: 1.24fr .76fr;
    gap: clamp(28px, 4vw, 48px);
  }
}

@media (min-width: 1000px) {
  .reports-layout {
    grid-template-columns: 1.42fr .58fr;
    gap: clamp(28px, 4vw, 52px);
  }

  .reports-aside {
    position: sticky;
    top: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .tab,
  .page-news .crumb {
    transition: none;
  }
}