/* ===== 页面专属：page-news（赛事资讯） ===== */
.page-news {
  --page-bg: #0B0E14;
  --page-card-bg: #F5E6C8;
  --page-card-bg-dark: #2C2F36;
  --page-green: #00E676;
  --page-red: #FF1744;
  --page-gold: #FFD700;
  --page-white: #FFFFFF;
  --page-text-dark: #0B0E14;
  --page-text-light: #F5E6C8;
  --page-sidebar-width: 160px;
  --page-radius-sm: 4px;
  --page-radius-md: 8px;
  --page-radius-lg: 12px;
  --page-transition: 0.35s ease;
  --page-font-heading: Impact, 'Stencil', sans-serif;
  --page-font-body: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --page-font-data: 'Courier New', monospace;

  display: block;
  background-color: var(--page-bg);
  color: var(--page-white);
  font-family: var(--page-font-body);
  line-height: 1.6;
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

/* 容器 */
.page-news *,
.page-news *::before,
.page-news *::after {
  box-sizing: border-box;
}

/* ---- 面包屑 ---- */
.page-news__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--page-text-light);
  opacity: 0.75;
  margin-bottom: 0.75rem;
}
.page-news__breadcrumb-link {
  color: var(--page-green);
  text-decoration: none;
  transition: color var(--page-transition);
}
.page-news__breadcrumb-link:hover,
.page-news__breadcrumb-link:focus-visible {
  color: var(--page-gold);
  outline: 2px solid var(--page-gold);
  outline-offset: 2px;
  border-radius: var(--page-radius-sm);
}
.page-news__breadcrumb-sep {
  color: var(--page-text-light);
  opacity: 0.5;
  font-size: 0.75rem;
}
.page-news__breadcrumb-current {
  color: var(--page-gold);
  font-weight: 600;
}

/* ---- 英雄区 ---- */
.page-news__hero {
  padding: 2rem 1rem 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.page-news__hero-text {
  position: relative;
  padding-left: 0;
}
.page-news__hero-num {
  display: block;
  font-family: var(--page-font-heading);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--page-green);
  opacity: 0.2;
  position: absolute;
  top: -1.2rem;
  left: -0.15rem;
  font-weight: 900;
  pointer-events: none;
  user-select: none;
}
.page-news__hero-title {
  font-family: var(--page-font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--page-white);
  margin: 0 0 0.25rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
.page-news__hero-desc {
  font-size: 0.9375rem;
  color: var(--page-text-light);
  opacity: 0.8;
  margin: 0.25rem 0 0;
  max-width: 32em;
}

/* ---- 筛选栏 ---- */
.page-news__filter-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem 1.25rem;
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--page-green) transparent;
  flex-wrap: nowrap;
}
.page-news__filter-bar::-webkit-scrollbar {
  height: 4px;
}
.page-news__filter-bar::-webkit-scrollbar-thumb {
  background: var(--page-green);
  border-radius: 4px;
}
.page-news__filter-btn {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  font-family: var(--page-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--page-text-light);
  background: transparent;
  border: 1.5px solid rgba(245, 230, 200, 0.3);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--page-transition);
  white-space: nowrap;
}
.page-news__filter-btn:hover,
.page-news__filter-btn:focus-visible {
  border-color: var(--page-green);
  color: var(--page-green);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.25);
}
.page-news__filter-btn.is-active {
  background: linear-gradient(135deg, var(--page-green), var(--page-red));
  color: var(--page-white);
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(0, 230, 118, 0.35);
}

/* ---- 主布局 ---- */
.page-news__layout {
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  gap: 1.5rem;
}

/* ---- 侧栏 ---- */
.page-news__sidebar {
  display: none; /* 移动端隐藏 */
}
.page-news__sidebar-title {
  font-family: var(--page-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--page-gold);
  margin: 0 0 1rem;
  letter-spacing: 0.04em;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--page-gold);
}
.page-news__sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.page-news__sidebar-item {
  margin: 0;
}
.page-news__sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: rgba(245, 230, 200, 0.06);
  border-radius: var(--page-radius-md);
  text-decoration: none;
  color: var(--page-text-light);
  transition: all var(--page-transition);
  border: 1px solid transparent;
}
.page-news__sidebar-link:hover,
.page-news__sidebar-link:focus-visible {
  background: rgba(0, 230, 118, 0.12);
  border-color: var(--page-green);
  color: var(--page-green);
  outline: none;
}
.page-news__sidebar-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--page-card-bg);
  flex-shrink: 0;
}
.page-news__sidebar-label {
  font-size: 0.9375rem;
  font-weight: 600;
}
.page-news__sidebar-hint {
  font-size: 0.75rem;
  color: var(--page-text-light);
  opacity: 0.5;
  margin: 1rem 0 0;
  text-align: center;
}

/* ---- 主内容区 ---- */
.page-news__main {
  flex: 1;
  min-width: 0;
}

/* ---- 区块通用 ---- */
.page-news__section {
  margin-bottom: 3rem;
  scroll-margin-top: 5rem;
}
.page-news__section--compact {
  margin-bottom: 2rem;
}
.page-news__section-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  position: relative;
}
.page-news__section-num {
  font-family: var(--page-font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--page-red);
  opacity: 0.6;
  letter-spacing: -0.03em;
}
.page-news__section-title {
  font-family: var(--page-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--page-white);
  margin: 0;
  line-height: 1.2;
}

/* ---- 时间线（战报） ---- */
.page-news__timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  padding-left: 0.5rem;
}
.page-news__timeline::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--page-green), var(--page-red));
  opacity: 0.35;
  border-radius: 2px;
}
.page-news__report-card {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  background: var(--page-card-bg-dark);
  border-radius: var(--page-radius-lg);
  border: 1px solid rgba(0, 230, 118, 0.2);
  padding: 0.75rem;
  transition: all var(--page-transition);
  position: relative;
  overflow: hidden;
}
.page-news__report-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--page-green);
  opacity: 0.4;
  border-radius: 0 2px 2px 0;
}
.page-news__report-card:hover,
.page-news__report-card:focus-within {
  border-color: var(--page-gold);
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.15);
  transform: translateX(4px);
}
.page-news__report-thumb {
  flex: 0 0 100px;
  max-width: 120px;
  border-radius: var(--page-radius-md);
  overflow: hidden;
  background: var(--page-bg);
}
.page-news__report-img {
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 120;
  object-fit: cover;
  display: block;
  max-width: 100%;
  height: auto;
}
.page-news__report-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.page-news__report-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.page-news__report-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tag-premier { background: #3D195B; color: #FFF; }
.tag-laliga { background: #C92A2A; color: #FFF; }
.tag-serie-a { background: #004098; color: #FFF; }
.tag-bundesliga { background: #D40511; color: #FFF; }
.tag-ligue1 { background: #004170; color: #FFF; }
.tag-ucl { background: #0B1D3A; color: #FFD700; }
.tag-serie-a { background: #1B3A6B; color: #FFF; }
.page-news__report-time {
  font-size: 0.75rem;
  color: var(--page-text-light);
  opacity: 0.6;
  font-family: var(--page-font-data);
}
.page-news__report-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--page-white);
  margin: 0.125rem 0 0;
  line-height: 1.3;
}
.page-news__report-excerpt {
  font-size: 0.8125rem;
  color: var(--page-text-light);
  opacity: 0.7;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-news__report-link {
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--page-green);
  text-decoration: none;
  margin-top: auto;
  padding: 0.125rem 0;
  border-bottom: 1px solid transparent;
  transition: all var(--page-transition);
}
.page-news__report-link:hover,
.page-news__report-link:focus-visible {
  color: var(--page-gold);
  border-bottom-color: var(--page-gold);
  outline: none;
}
.page-news__section-footer {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}
.page-news__load-more {
  font-size: 0.8125rem;
  color: var(--page-text-light);
  opacity: 0.5;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px dashed rgba(245, 230, 200, 0.25);
  cursor: default;
  transition: all var(--page-transition);
}
.page-news__load-more:hover {
  opacity: 0.8;
  border-color: var(--page-green);
  color: var(--page-green);
}

/* ---- 射手榜 ---- */
.page-news__scorer-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.page-news__scorer-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(44, 47, 54, 0.6);
  border-radius: var(--page-radius-md);
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(255, 215, 0, 0.12);
  transition: all var(--page-transition);
}
.page-news__scorer-item:hover,
.page-news__scorer-item:focus-within {
  border-color: var(--page-gold);
  background: rgba(44, 47, 54, 0.9);
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.08);
}
.page-news__scorer-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--page-bg);
  border: 2px solid var(--page-gold);
}
.page-news__scorer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: 100%;
  height: auto;
}
.page-news__scorer-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.page-news__scorer-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--page-white);
}
.page-news__scorer-league {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.0625rem 0.375rem;
  border-radius: 2px;
  width: fit-content;
}
.page-news__scorer-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  flex-shrink: 0;
}
.page-news__scorer-num {
  font-family: var(--page-font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--page-gold);
}
.page-news__scorer-goals {
  font-size: 0.6875rem;
  color: var(--page-text-light);
  opacity: 0.6;
  white-space: nowrap;
}
.page-news__scorer-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--page-green);
  text-decoration: none;
  flex-shrink: 0;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--page-green);
  border-radius: var(--page-radius-sm);
  transition: all var(--page-transition);
}
.page-news__scorer-link:hover,
.page-news__scorer-link:focus-visible {
  background: var(--page-green);
  color: var(--page-bg);
  outline: none;
}

/* ---- 视频集锦网格 ---- */
.page-news__highlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.page-news__highlight-card {
  background: var(--page-card-bg-dark);
  border-radius: var(--page-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 55, 55, 0.18);
  transition: all var(--page-transition);
  display: flex;
  flex-direction: column;
  position: relative;
}
.page-news__highlight-card:hover,
.page-news__highlight-card:focus-within {
  border-color: var(--page-red);
  box-shadow: 0 6px 28px rgba(255, 23, 68, 0.18);
  transform: scale(1.01);
}
.page-news__highlight-thumb {
  position: relative;
  aspect-ratio: 320 / 180;
  overflow: hidden;
  background: var(--page-bg);
}
.page-news__highlight-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}
.page-news__highlight-card:hover .page-news__highlight-img {
  transform: scale(1.04);
}
.page-news__highlight-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--page-white);
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity var(--page-transition);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.page-news__highlight-card:hover .page-news__highlight-play,
.page-news__highlight-card:focus-within .page-news__highlight-play {
  opacity: 1;
}
.page-news__highlight-info {
  padding: 0.625rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.page-news__highlight-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--page-white);
  margin: 0;
  line-height: 1.3;
}
.page-news__highlight-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.page-news__highlight-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

/* ---- 联赛索引卡片 ---- */
.page-news__league-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.page-news__league-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem 0.5rem;
  background: rgba(44, 47, 54, 0.5);
  border-radius: var(--page-radius-md);
  border: 1px solid rgba(255, 215, 0, 0.12);
  text-decoration: none;
  transition: all var(--page-transition);
  text-align: center;
}
.page-news__league-card:hover,
.page-news__league-card:focus-visible {
  border-color: var(--page-gold);
  background: rgba(255, 215, 0, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.1);
  outline: none;
}
.page-news__league-name {
  font-family: var(--page-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--page-white);
  line-height: 1.2;
}
.page-news__league-count {
  font-size: 0.6875rem;
  color: var(--page-text-light);
  opacity: 0.6;
}

/* ---- 回到顶部 ---- */
.page-news__back-top {
  display: flex;
  justify-content: center;
  padding: 1rem 1rem 2rem;
}
.page-news__back-top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--page-gold);
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--page-gold);
  border-radius: 20px;
  transition: all var(--page-transition);
}
.page-news__back-top-link:hover,
.page-news__back-top-link:focus-visible {
  background: var(--page-gold);
  color: var(--page-bg);
  outline: none;
}

/* ===== 桌面端 响应式 ===== */
@media (min-width: 768px) {
  .page-news__hero {
    padding: 3rem 2rem 2rem;
  }
  .page-news__hero-num {
    font-size: 6rem;
    top: -1.8rem;
    left: -0.3rem;
  }
  .page-news__hero-title {
    font-size: 3.5rem;
  }
  .page-news__hero-desc {
    font-size: 1.0625rem;
  }
  .page-news__filter-bar {
    padding: 0 2rem 1.5rem;
    gap: 0.625rem;
  }
  .page-news__filter-btn {
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
  }
  .page-news__layout {
    flex-direction: row;
    padding: 0 2rem 4rem;
    gap: 2rem;
  }

  /* 侧栏桌面显示 */
  .page-news__sidebar {
    display: block;
    flex: 0 0 var(--page-sidebar-width);
    position: sticky;
    top: calc(60px + 2rem);
    align-self: flex-start;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding-top: 0.25rem;
  }
  .page-news__sidebar-logo {
    width: 40px;
    height: 40px;
  }

  /* 战报卡片 */
  .page-news__report-thumb {
    flex-basis: 140px;
    max-width: 180px;
  }
  .page-news__report-title {
    font-size: 1rem;
  }
  .page-news__report-excerpt {
    font-size: 0.875rem;
    -webkit-line-clamp: 2;
  }

  /* 视频集锦网格 */
  .page-news__highlight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-news__highlight-title {
    font-size: 0.9375rem;
  }

  /* 联赛索引网格 */
  .page-news__league-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .page-news__hero {
    padding: 4rem 2rem 2rem;
  }
  .page-news__hero-num {
    font-size: 7.5rem;
    top: -2.2rem;
    left: -0.4rem;
  }
  .page-news__hero-title {
    font-size: 4.5rem;
  }
  .page-news__highlight-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-news__league-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  .page-news__sidebar {
    flex-basis: 180px;
  }
  .page-news__sidebar-logo {
    width: 48px;
    height: 48px;
  }
  .page-news__report-thumb {
    flex-basis: 160px;
    max-width: 200px;
  }
}
</style>

<main id="main-content" class="page-news">
  <!-- 页面标题区 -->
  <header class="page-news__hero">
    <nav class="page-news__breadcrumb" aria-label="面包屑导航">
      <a href="/" class="page-news__breadcrumb-link">首页</a>
      <span class="page-news__breadcrumb-sep" aria-hidden="true">▸</span>
      <span class="page-news__breadcrumb-current" aria-current="page">赛事资讯</span>
    </nav>
    <div class="page-news__hero-text">
      <span class="page-news__hero-num" aria-hidden="true">02</span>
      <h1 class="page-news__hero-title">赛事资讯</h1>
      <p class="page-news__hero-desc">每日更新·战报·射手榜·集锦一站式速览</p>
    </div>
  </header>

  <!-- 联赛快速筛选栏（移动端横向滚动） -->
  <div class="page-news__filter-bar" role="tablist" aria-label="联赛快速筛选">
    <button class="page-news__filter-btn is-active" role="tab" aria-selected="true" data-filter="all">全部</button>
    <button class="page-news__filter-btn" role="tab" aria-selected="false" data-filter="premier">英超</button>
    <button class="page-news__filter-btn" role="tab" aria-selected="false" data-filter="laliga">西甲</button>
    <button class="page-news__filter-btn" role="tab" aria-selected="false" data-filter="serie-a">意甲</button>
    <button class="page-news__filter-btn" role="tab" aria-selected="false" data-filter="bundesliga">德甲</button>
    <button class="page-news__filter-btn" role="tab" aria-selected="false" data-filter="ligue1">法甲</button>
    <button class="page-news__filter-btn" role="tab" aria-selected="false" data-filter="ucl">欧冠</button>
  </div>

  <!-- 主体布局：侧栏 + 内容区 -->
  <div class="page-news__layout">
    <!-- 左侧联赛索引（桌面固定） -->
    <aside class="page-news__sidebar" aria-label="联赛索引目录">
      <h2 class="page-news__sidebar-title">联赛索引</h2>
      <ul class="page-news__sidebar-list">
        <li class="page-news__sidebar-item">
          <a href="#latest-reports" class="page-news__sidebar-link" data-league="premier">
            <img src="{zhanqunpic:h:60w:60}" width="60" height="60" alt="英超联赛标志" class="page-news__sidebar-logo" loading="lazy" decoding="async">
            <span class="page-news__sidebar-label">英超</span>
          </a>
        </li>
        <li class="page-news__sidebar-item">
          <a href="#latest-reports" class="page-news__sidebar-link" data-league="laliga">
            <img src="{zhanqunpic:h:60w:60}" width="60" height="60" alt="西甲联赛标志" class="page-news__sidebar-logo" loading="lazy" decoding="async">
            <span class="page-news__sidebar-label">西甲</span>
          </a>
        </li>
        <li class="page-news__sidebar-item">
          <a href="#latest-reports" class="page-news__sidebar-link" data-league="serie-a">
            <img src="{zhanqunpic:h:60w:60}" width="60" height="60" alt="意甲联赛标志" class="page-news__sidebar-logo" loading="lazy" decoding="async">
            <span class="page-news__sidebar-label">意甲</span>
          </a>
        </li>
        <li class="page-news__sidebar-item">
          <a href="#latest-reports" class="page-news__sidebar-link" data-league="bundesliga">
            <img src="{zhanqunpic:h:60w:60}" width="60" height="60" alt="德甲联赛标志" class="page-news__sidebar-logo" loading="lazy" decoding="async">
            <span class="page-news__sidebar-label">德甲</span>
          </a>
        </li>
        <li class="page-news__sidebar-item">
          <a href="#latest-reports" class="page-news__sidebar-link" data-league="ligue1">
            <img src="{zhanqunpic:h:60w:60}" width="60" height="60" alt="法甲联赛标志" class="page-news__sidebar-logo" loading="lazy" decoding="async">
            <span class="page-news__sidebar-label">法甲</span>
          </a>
        </li>
        <li class="page-news__sidebar-item">
          <a href="#latest-reports" class="page-news__sidebar-link" data-league="ucl">
            <img src="{zhanqunpic:h:60w:60}" width="60" height="60" alt="欧冠联赛标志" class="page-news__sidebar-logo" loading="lazy" decoding="async">
            <span class="page-news__sidebar-label">欧冠</span>
          </a>
        </li>
      </ul>
      <p class="page-news__sidebar-hint">点击联赛快速定位</p>
    </aside>

    <!-- 主内容区 -->
    <div class="page-news__main">
      <!-- 区块一：最新战报 -->
      <section id="latest-reports" class="page-news__section" aria-labelledby="section-01-title">
        <div class="page-news__section-header">
          <span class="page-news__section-num" aria-hidden="true">01</span>
          <h2 id="section-01-title" class="page-news__section-title">最新战报</h2>
        </div>
        <div class="page-news__timeline" role="list">
          <article class="page-news__report-card" role="listitem" data-league="premier">
            <div class="page-news__report-thumb">
              <img src="{zhanqunpic:h:120w:200}" width="200" height="120" alt="英超比赛激烈对抗瞬间" class="page-news__report-img">
            </div>
            <div class="page-news__report-body">
              <div class="page-news__report-meta">
                <span class="page-news__report-tag tag-premier">英超</span>
                <span class="page-news__report-time">最新轮次</span>
              </div>
              <h3 class="page-news__report-title">英超联赛 第12轮 赛事速递</h3>
              <p class="page-news__report-excerpt">双方激战全场，攻防转换节奏极快，更多详情请查看客户端完整战报。</p>
              <a href="/platform/" class="page-news__report-link">查看详情</a>
            </div>
          </article>

          <article class="page-news__report-card" role="listitem" data-league="laliga">
            <div class="page-news__report-thumb">
              <img src="{zhanqunpic:h:120w:200}" width="200" height="120" alt="西甲球员带球突破瞬间" class="page-news__report-img" loading="lazy" decoding="async">
            </div>
            <div class="page-news__report-body">
              <div class="page-news__report-meta">
                <span class="page-news__report-tag tag-laliga">西甲</span>
                <span class="page-news__report-time">最新轮次</span>
              </div>
              <h3 class="page-news__report-title">西甲联赛 第14轮 焦点对决</h3>
              <p class="page-news__report-excerpt">技术与身体的较量，两队交替领先，最终比分悬念保留到最后时刻。</p>
              <a href="/platform/" class="page-news__report-link">查看详情</a>
            </div>
          </article>

          <article class="page-news__report-card" role="listitem" data-league="ucl">
            <div class="page-news__report-thumb">
              <img src="{zhanqunpic:h:120w:200}" width="200" height="120" alt="欧冠赛场球员庆祝进球" class="page-news__report-img" loading="lazy" decoding="async">
            </div>
            <div class="page-news__report-body">
              <div class="page-news__report-meta">
                <span class="page-news__report-tag tag-ucl">欧冠</span>
                <span class="page-news__report-time">小组赛</span>
              </div>
              <h3 class="page-news__report-title">欧冠小组赛 精彩回顾</h3>
              <p class="page-news__report-excerpt">豪门对决火星四溅，多个精彩进球引爆全场，集锦已上线。</p>
              <a href="/platform/" class="page-news__report-link">查看详情</a>
            </div>
          </article>
        </div>
        <div class="page-news__section-footer">
          <span class="page-news__load-more" data-infinite-scroll="reports">滚动加载更多战报</span>
        </div>
      </section>

      <!-- 区块二：射手榜动态 -->
      <section id="scorers" class="page-news__section" aria-labelledby="section-02-title">
        <div class="page-news__section-header">
          <span class="page-news__section-num" aria-hidden="true">02</span>
          <h2 id="section-02-title" class="page-news__section-title">射手榜动态</h2>
        </div>
        <div class="page-news__scorer-list" role="list">
          <div class="page-news__scorer-item" role="listitem" data-league="premier">
            <div class="page-news__scorer-avatar">
              <img src="{zhanqunpic:h:40w:40}" width="40" height="40" alt="英超射手榜球员肖像" class="page-news__scorer-img" loading="lazy" decoding="async">
            </div>
            <div class="page-news__scorer-info">
              <span class="page-news__scorer-name">英超射手榜</span>
              <span class="page-news__scorer-league tag-premier">英超</span>
            </div>
            <div class="page-news__scorer-stats">
              <span class="page-news__scorer-num" data-number="top">领跑者</span>
              <span class="page-news__scorer-goals">进球数持续更新</span>
            </div>
            <a href="/platform/" class="page-news__scorer-link">完整榜单</a>
          </div>

          <div class="page-news__scorer-item" role="listitem" data-league="laliga">
            <div class="page-news__scorer-avatar">
              <img src="{zhanqunpic:h:40w:40}" width="40" height="40" alt="西甲射手榜球员肖像" class="page-news__scorer-img" loading="lazy" decoding="async">
            </div>
            <div class="page-news__scorer-info">
              <span class="page-news__scorer-name">西甲射手榜</span>
              <span class="page-news__scorer-league tag-laliga">西甲</span>
            </div>
            <div class="page-news__scorer-stats">
              <span class="page-news__scorer-num" data-number="top">竞争激烈</span>
              <span class="page-news__scorer-goals">射手王之争白热化</span>
            </div>
            <a href="/platform/" class="page-news__scorer-link">完整榜单</a>
          </div>

          <div class="page-news__scorer-item" role="listitem" data-league="serie-a">
            <div class="page-news__scorer-avatar">
              <img src="{zhanqunpic:h:40w:40}" width="40" height="40" alt="意甲射手榜球员肖像" class="page-news__scorer-img" loading="lazy" decoding="async">
            </div>
            <div class="page-news__scorer-info">
              <span class="page-news__scorer-name">意甲射手榜</span>
              <span class="page-news__scorer-league tag-serie-a">意甲</span>
            </div>
            <div class="page-news__scorer-stats">
              <span class="page-news__scorer-num" data-number="top">优势明显</span>
              <span class="page-news__scorer-goals">领跑者持续高光</span>
            </div>
            <a href="/platform/" class="page-news__scorer-link">完整榜单</a>
          </div>
        </div>
      </section>

      <!-- 区块三：视频集锦 -->
      <section id="highlights" class="page-news__section" aria-labelledby="section-03-title">
        <div class="page-news__section-header">
          <span class="page-news__section-num" aria-hidden="true">03</span>
          <h2 id="section-03-title" class="page-news__section-title">视频集锦</h2>
        </div>
        <div class="page-news__highlight-grid" role="list">
          <article class="page-news__highlight-card" role="listitem" data-league="premier">
            <div class="page-news__highlight-thumb">
              <img src="{zhanqunpic:h:180w:320}" width="320" height="180" alt="英超比赛集锦精彩画面" class="page-news__highlight-img">
              <div class="page-news__highlight-play" aria-hidden="true">▶</div>
            </div>
            <div class="page-news__highlight-info">
              <h3 class="page-news__highlight-title">英超第12轮 精彩集锦</h3>
              <span class="page-news__highlight-tag tag-premier">英超</span>
            </div>
            <a href="/platform/" class="page-news__highlight-link" aria-label="播放英超第12轮精彩集锦">观看集锦</a>
          </article>

          <article class="page-news__highlight-card" role="listitem" data-league="laliga">
            <div class="page-news__highlight-thumb">
              <img src="{zhanqunpic:h:180w:320}" width="320" height="180" alt="西甲五佳球精彩瞬间" class="page-news__highlight-img" loading="lazy" decoding="async">
              <div class="page-news__highlight-play" aria-hidden="true">▶</div>
            </div>
            <div class="page-news__highlight-info">
              <h3 class="page-news__highlight-title">西甲第14轮 五佳球</h3>
              <span class="page-news__highlight-tag tag-laliga">西甲</span>
            </div>
            <a href="/platform/" class="page-news__highlight-link" aria-label="播放西甲第14轮五佳球">观看集锦</a>
          </article>

          <article class="page-news__highlight-card" role="listitem" data-league="ucl">
            <div class="page-news__highlight-thumb">
              <img src="{zhanqunpic:h:180w:320}" width="320" height="180" alt="欧冠小组赛精华集锦" class="page-news__highlight-img" loading="lazy" decoding="async">
              <div class="page-news__highlight-play" aria-hidden="true">▶</div>
            </div>
            <div class="page-news__highlight-info">
              <h3 class="page-news__highlight-title">欧冠 小组赛精华</h3>
              <span class="page-news__highlight-tag tag-ucl">欧冠</span>
            </div>
            <a href="/platform/" class="page-news__highlight-link" aria-label="播放欧冠小组赛精华集锦">观看集锦</a>
          </article>

          <article class="page-news__highlight-card" role="listitem" data-league="bundesliga">
            <div class="page-news__highlight-thumb">
              <img src="{zhanqunpic:h:180w:320}" width="320" height="180" alt="德甲比赛集锦画面" class="page-news__highlight-img" loading="lazy" decoding="async">
              <div class="page-news__highlight-play" aria-hidden="true">▶</div>
            </div>
            <div class="page-news__highlight-info">
              <h3 class="page-news__highlight-title">德甲 本轮精华</h3>
              <span class="page-news__highlight-tag tag-bundesliga">德甲</span>
            </div>
            <a href="/platform/" class="page-news__highlight-link" aria-label="播放德甲本轮精华集锦">观看集锦</a>
          </article>

          <article class="page-news__highlight-card" role="listitem" data-league="ligue1">
            <div class="page-news__highlight-thumb">
              <img src="{zhanqunpic:h:180w:320}" width="320" height="180" alt="法甲精彩集锦瞬间" class="page-news__highlight-img" loading="lazy" decoding="async">
              <div class="page-news__highlight-play" aria-hidden="true">▶</div>
            </div>
            <div class="page-news__highlight-info">
              <h3 class="page-news__highlight-title">法甲 精彩进球集锦</h3>
              <span class="page-news__highlight-tag tag-ligue1">法甲</span>
            </div>
            <a href="/platform/" class="page-news__highlight-link" aria-label="播放法甲精彩进球集锦">观看集锦</a>
          </article>
        </div>
      </section>

      <!-- 区块四：联赛索引卡片（补充索引入口） -->
      <section id="league-index" class="page-news__section page-news__section--compact" aria-labelledby="section-04-title">
        <div class="page-news__section-header">
          <span class="page-news__section-num" aria-hidden="true">04</span>
          <h2 id="section-04-title" class="page-news__section-title">联赛索引</h2>
        </div>
        <div class="page-news__league-grid" role="list">
          <a href="/" class="page-news__league-card" role="listitem" data-league="premier" aria-label="英超专区">
            <span class="page-news__league-name">英超</span>
            <span class="page-news__league-count">战报·射手榜·集锦</span>
          </a>
          <a href="/" class="page-news__league-card" role="listitem" data-league="laliga" aria-label="西甲专区">
            <span class="page-news__league-name">西甲</span>
            <span class="page-news__league-count">战报·射手榜·集锦</span>
          </a>
          <a href="/" class="page-news__league-card" role="listitem" data-league="serie-a" aria-label="意甲专区">
            <span class="page-news__league-name">意甲</span>
            <span class="page-news__league-count">战报·射手榜·集锦</span>
          </a>
          <a href="/" class="page-news__league-card" role="listitem" data-league="bundesliga" aria-label="德甲专区">
            <span class="page-news__league-name">德甲</span>
            <span class="page-news__league-count">战报·射手榜·集锦</span>
          </a>
          <a href="/" class="page-news__league-card" role="listitem" data-league="ligue1" aria-label="法甲专区">
            <span class="page-news__league-name">法甲</span>
            <span class="page-news__league-count">战报·射手榜·集锦</span>
          </a>
          <a href="/" class="page-news__league-card" role="listitem" data-league="ucl" aria-label="欧冠专区">
            <span class="page-news__league-name">欧冠</span>
            <span class="page-news__league-count">战报·射手榜·集锦</span>
          </a>
        </div>
      </section>
    </div>
  </div>

  <!-- 回到顶部 -->
  <div class="page-news__back-top" data-scroll-top>
    <a href="#main-content" class="page-news__back-top-link">回到顶部</a>
  </div>
</main>

/* ===== 页面专属：page-news（赛事资讯） ===== */
.page-news {
  --page-bg: #0B0E14;
  --page-card-bg: #F5E6C8;
  --page-card-bg-dark: #2C2F36;
  --page-green: #00E676;
  --page-red: #FF1744;
  --page-gold: #FFD700;
  --page-white: #FFFFFF;
  --page-text-dark: #0B0E14;
  --page-text-light: #F5E6C8;
  --page-sidebar-width: 160px;
  --page-radius-sm: 4px;
  --page-radius-md: 8px;
  --page-radius-lg: 12px;
  --page-transition: 0.35s ease;
  --page-font-heading: Impact, 'Stencil', sans-serif;
  --page-font-body: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --page-font-data: 'Courier New', monospace;

  display: block;
  background-color: var(--page-bg);
  color: var(--page-white);
  font-family: var(--page-font-body);
  line-height: 1.6;
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

/* 容器 */
.page-news *,
.page-news *::before,
.page-news *::after {
  box-sizing: border-box;
}

/* ---- 面包屑 ---- */
.page-news__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--page-text-light);
  opacity: 0.75;
  margin-bottom: 0.75rem;
}
.page-news__breadcrumb-link {
  color: var(--page-green);
  text-decoration: none;
  transition: color var(--page-transition);
}
.page-news__breadcrumb-link:hover,
.page-news__breadcrumb-link:focus-visible {
  color: var(--page-gold);
  outline: 2px solid var(--page-gold);
  outline-offset: 2px;
  border-radius: var(--page-radius-sm);
}
.page-news__breadcrumb-sep {
  color: var(--page-text-light);
  opacity: 0.5;
  font-size: 0.75rem;
}
.page-news__breadcrumb-current {
  color: var(--page-gold);
  font-weight: 600;
}

/* ---- 英雄区 ---- */
.page-news__hero {
  padding: 2rem 1rem 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.page-news__hero-text {
  position: relative;
  padding-left: 0;
}
.page-news__hero-num {
  display: block;
  font-family: var(--page-font-heading);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--page-green);
  opacity: 0.2;
  position: absolute;
  top: -1.2rem;
  left: -0.15rem;
  font-weight: 900;
  pointer-events: none;
  user-select: none;
}
.page-news__hero-title {
  font-family: var(--page-font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--page-white);
  margin: 0 0 0.25rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
.page-news__hero-desc {
  font-size: 0.9375rem;
  color: var(--page-text-light);
  opacity: 0.8;
  margin: 0.25rem 0 0;
  max-width: 32em;
}

/* ---- 筛选栏 ---- */
.page-news__filter-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem 1.25rem;
  max-width: 1280px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--page-green) transparent;
  flex-wrap: nowrap;
}
.page-news__filter-bar::-webkit-scrollbar {
  height: 4px;
}
.page-news__filter-bar::-webkit-scrollbar-thumb {
  background: var(--page-green);
  border-radius: 4px;
}
.page-news__filter-btn {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  font-family: var(--page-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--page-text-light);
  background: transparent;
  border: 1.5px solid rgba(245, 230, 200, 0.3);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--page-transition);
  white-space: nowrap;
}
.page-news__filter-btn:hover,
.page-news__filter-btn:focus-visible {
  border-color: var(--page-green);
  color: var(--page-green);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.25);
}
.page-news__filter-btn.is-active {
  background: linear-gradient(135deg, var(--page-green), var(--page-red));
  color: var(--page-white);
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(0, 230, 118, 0.35);
}

/* ---- 主布局 ---- */
.page-news__layout {
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  gap: 1.5rem;
}

/* ---- 侧栏 ---- */
.page-news__sidebar {
  display: none;
}
.page-news__sidebar-title {
  font-family: var(--page-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--page-gold);
  margin: 0 0 1rem;
  letter-spacing: 0.04em;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--page-gold);
}
.page-news__sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.page-news__sidebar-item {
  margin: 0;
}
.page-news__sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: rgba(245, 230, 200, 0.06);
  border-radius: var(--page-radius-md);
  text-decoration: none;
  color: var(--page-text-light);
  transition: all var(--page-transition);
  border: 1px solid transparent;
}
.page-news__sidebar-link:hover,
.page-news__sidebar-link:focus-visible {
  background: rgba(0, 230, 118, 0.12);
  border-color: var(--page-green);
  color: var(--page-green);
  outline: none;
}
.page-news__sidebar-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--page-card-bg);
  flex-shrink: 0;
}
.page-news__sidebar-label {
  font-size: 0.9375rem;
  font-weight: 600;
}
.page-news__sidebar-hint {
  font-size: 0.75rem;
  color: var(--page-text-light);
  opacity: 0.5;
  margin: 1rem 0 0;
  text-align: center;
}

/* ---- 主内容区 ---- */
.page-news__main {
  flex: 1;
  min-width: 0;
}

/* ---- 区块通用 ---- */
.page-news__section {
  margin-bottom: 3rem;
  scroll-margin-top: 5rem;
}
.page-news__section--compact {
  margin-bottom: 2rem;
}
.page-news__section-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  position: relative;
}
.page-news__section-num {
  font-family: var(--page-font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--page-red);
  opacity: 0.6;
  letter-spacing: -0.03em;
}
.page-news__section-title {
  font-family: var(--page-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--page-white);
  margin: 0;
  line-height: 1.2;
}

/* ---- 时间线（战报） ---- */
.page-news__timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  padding-left: 0.5rem;
}
.page-news__timeline::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--page-green), var(--page-red));
  opacity: 0.35;
  border-radius: 2px;
}
.page-news__report-card {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  background: var(--page-card-bg-dark);
  border-radius: var(--page-radius-lg);
  border: 1px solid rgba(0, 230, 118, 0.2);
  padding: 0.75rem;
  transition: all var(--page-transition);
  position: relative;
  overflow: hidden;
}
.page-news__report-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--page-green);
  opacity: 0.4;
  border-radius: 0 2px 2px 0;
}
.page-news__report-card:hover,
.page-news__report-card:focus-within {
  border-color: var(--page-gold);
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.15);
  transform: translateX(4px);
}
.page-news__report-thumb {
  flex: 0 0 100px;
  max-width: 120px;
  border-radius: var(--page-radius-md);
  overflow: hidden;
  background: var(--page-bg);
}
.page-news__report-img {
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 120;
  object-fit: cover;
  display: block;
  max-width: 100%;
  height: auto;
}
.page-news__report-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.page-news__report-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.page-news__report-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tag-premier { background: #3D195B; color: #FFF; }
.tag-laliga { background: #C92A2A; color: #FFF; }
.tag-serie-a { background: #004098; color: #FFF; }
.tag-bundesliga { background: #D40511; color: #FFF; }
.tag-ligue1 { background: #004170; color: #FFF; }
.tag-ucl { background: #0B1D3A; color: #FFD700; }
.page-news__report-time {
  font-size: 0.75rem;
  color: var(--page-text-light);
  opacity: 0.6;
  font-family: var(--page-font-data);
}
.page-news__report-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--page-white);
  margin: 0.125rem 0 0;
  line-height: 1.3;
}
.page-news__report-excerpt {
  font-size: 0.8125rem;
  color: var(--page-text-light);
  opacity: 0.7;
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-news__report-link {
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--page-green);
  text-decoration: none;
  margin-top: auto;
  padding: 0.125rem 0;
  border-bottom: 1px solid transparent;
  transition: all var(--page-transition);
}
.page-news__report-link:hover,
.page-news__report-link:focus-visible {
  color: var(--page-gold);
  border-bottom-color: var(--page-gold);
  outline: none;
}
.page-news__section-footer {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}
.page-news__load-more {
  font-size: 0.8125rem;
  color: var(--page-text-light);
  opacity: 0.5;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px dashed rgba(245, 230, 200, 0.25);
  cursor: default;
  transition: all var(--page-transition);
}
.page-news__load-more:hover {
  opacity: 0.8;
  border-color: var(--page-green);
  color: var(--page-green);
}

/* ---- 射手榜 ---- */
.page-news__scorer-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.page-news__scorer-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(44, 47, 54, 0.6);
  border-radius: var(--page-radius-md);
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(255, 215, 0, 0.12);
  transition: all var(--page-transition);
}
.page-news__scorer-item:hover,
.page-news__scorer-item:focus-within {
  border-color: var(--page-gold);
  background: rgba(44, 47, 54, 0.9);
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.08);
}
.page-news__scorer-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--page-bg);
  border: 2px solid var(--page-gold);
}
.page-news__scorer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: 100%;
  height: auto;
}
.page-news__scorer-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.page-news__scorer-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--page-white);
}
.page-news__scorer-league {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.0625rem 0.375rem;
  border-radius: 2px;
  width: fit-content;
}
.page-news__scorer-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  flex-shrink: 0;
}
.page-news__scorer-num {
  font-family: var(--page-font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--page-gold);
}
.page-news__scorer-goals {
  font-size: 0.6875rem;
  color: var(--page-text-light);
  opacity: 0.6;
  white-space: nowrap;
}
.page-news__scorer-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--page-green);
  text-decoration: none;
  flex-shrink: 0;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--page-green);
  border-radius: var(--page-radius-sm);
  transition: all var(--page-transition);
}
.page-news__scorer-link:hover,
.page-news__scorer-link:focus-visible {
  background: var(--page-green);
  color: var(--page-bg);
  outline: none;
}

/* ---- 视频集锦网格 ---- */
.page-news__highlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.page-news__highlight-card {
  background: var(--page-card-bg-dark);
  border-radius: var(--page-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 55, 55, 0.18);
  transition: all var(--page-transition);
  display: flex;
  flex-direction: column;
  position: relative;
}
.page-news__highlight-card:hover,
.page-news__highlight-card:focus-within {
  border-color: var(--page-red);
  box-shadow: 0 6px 28px rgba(255, 23, 68, 0.18);
  transform: scale(1.01);
}
.page-news__highlight-thumb {
  position: relative;
  aspect-ratio: 320 / 180;
  overflow: hidden;
  background: var(--page-bg);
}
.page-news__highlight-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}
.page-news__highlight-card:hover .page-news__highlight-img {
  transform: scale(1.04);
}
.page-news__highlight-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--page-white);
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity var(--page-transition);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.page-news__highlight-card:hover .page-news__highlight-play,
.page-news__highlight-card:focus-within .page-news__highlight-play {
  opacity: 1;
}
.page-news__highlight-info {
  padding: 0.625rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.page-news__highlight-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--page-white);
  margin: 0;
  line-height: 1.3;
}
.page-news__highlight-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.page-news__highlight-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}

/* ---- 联赛索引卡片 ---- */
.page-news__league-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.page-news__league-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem 0.5rem;
  background: rgba(44, 47, 54, 0.5);
  border-radius: var(--page-radius-md);
  border: 1px solid rgba(255, 215, 0, 0.12);
  text-decoration: none;
  transition: all var(--page-transition);
  text-align: center;
}
.page-news__league-card:hover,
.page-news__league-card:focus-visible {
  border-color: var(--page-gold);
  background: rgba(255, 215, 0, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.1);
  outline: none;
}
.page-news__league-name {
  font-family: var(--page-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--page-white);
  line-height: 1.2;
}
.page-news__league-count {
  font-size: 0.6875rem;
  color: var(--page-text-light);
  opacity: 0.6;
}

/* ---- 回到顶部 ---- */
.page-news__back-top {
  display: flex;
  justify-content: center;
  padding: 1rem 1rem 2rem;
}
.page-news__back-top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--page-gold);
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--page-gold);
  border-radius: 20px;
  transition: all var(--page-transition);
}
.page-news__back-top-link:hover,
.page-news__back-top-link:focus-visible {
  background: var(--page-gold);
  color: var(--page-bg);
  outline: none;
}

/* ===== 桌面端 响应式 ===== */
@media (min-width: 768px) {
  .page-news__hero {
    padding: 3rem 2rem 2rem;
  }
  .page-news__hero-num {
    font-size: 6rem;
    top: -1.8rem;
    left: -0.3rem;
  }
  .page-news__hero-title {
    font-size: 3.5rem;
  }
  .page-news__hero-desc {
    font-size: 1.0625rem;
  }
  .page-news__filter-bar {
    padding: 0 2rem 1.5rem;
    gap: 0.625rem;
  }
  .page-news__filter-btn {
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
  }
  .page-news__layout {
    flex-direction: row;
    padding: 0 2rem 4rem;
    gap: 2rem;
  }

  /* 侧栏桌面显示 */
  .page-news__sidebar {
    display: block;
    flex: 0 0 var(--page-sidebar-width);
    position: sticky;
    top: calc(60px + 2rem);
    align-self: flex-start;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding-top: 0.25rem;
  }
  .page-news__sidebar-logo {
    width: 40px;
    height: 40px;
  }

  /* 战报卡片 */
  .page-news__report-thumb {
    flex-basis: 140px;
    max-width: 180px;
  }
  .page-news__report-title {
    font-size: 1rem;
  }
  .page-news__report-excerpt {
    font-size: 0.875rem;
    -webkit-line-clamp: 2;
  }

  /* 视频集锦网格 */
  .page-news__highlight-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-news__highlight-title {
    font-size: 0.9375rem;
  }

  /* 联赛索引网格 */
  .page-news__league-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .page-news__hero {
    padding: 4rem 2rem 2rem;
  }
  .page-news__hero-num {
    font-size: 7.5rem;
    top: -2.2rem;
    left: -0.4rem;
  }
  .page-news__hero-title {
    font-size: 4.5rem;
  }
  .page-news__highlight-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-news__league-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  .page-news__sidebar {
    flex-basis: 180px;
  }
  .page-news__sidebar-logo {
    width: 48px;
    height: 48px;
  }
  .page-news__report-thumb {
    flex-basis: 160px;
    max-width: 200px;
  }
}