.page-home {
  --home-ink: var(--ink);
  --home-edge: clamp(28px, 6vw, 76px);
  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
}

/* ============ 首屏 ============ */
.page-home .hero {
  position: relative;
  background: var(--navy);
  color: var(--light-90);
  padding-block: clamp(20px, 3vw, 34px) var(--home-edge);
  overflow: hidden;
}

.page-home .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  opacity: .34;
  filter: saturate(.9) contrast(1.05);
}

.page-home .hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(16,28,51,.96) 0%, rgba(16,28,51,.88) 46%, rgba(16,28,51,.42) 100%),
    radial-gradient(120% 80% at 12% 0%, rgba(217,164,65,.16), transparent 62%);
}

.page-home .hero-inner {
  position: relative;
  z-index: 1;
}

.page-home .hero .crumbs {
  margin-bottom: clamp(22px, 4vw, 40px);
}

.page-home .hero-grid,
.page-home .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 52px);
}

.page-home .hero-copy {
  max-width: 34em;
}

.page-home .hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -.02em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 8.4vw, 4.4rem);
  color: var(--lamp);
  margin: 12px 0 18px;
  text-wrap: balance;
}

.page-home .hero-lead {
  color: var(--light-70);
  font-size: clamp(1rem, 2.6vw, 1.125rem);
  line-height: 1.78;
  max-width: 30em;
}

.page-home .hero-hint {
  margin-top: 22px;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--gold-soft);
}

/* 入口阶梯 */
.page-home .entry-ladder {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-home .entry-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--hair-light);
  border-radius: var(--r-md);
  background: rgba(27,44,74,.62);
  transition: border-color .22s ease-out, background-color .22s ease-out;
}

.page-home .entry-step:hover,
.page-home .entry-step:focus-within {
  border-color: var(--gold);
  background: rgba(27,44,74,.86);
}

.page-home .entry-num {
  font-family: var(--font-data);
  font-size: 1.5rem;
  letter-spacing: .08em;
  color: var(--gold);
  line-height: 1;
  padding-top: 4px;
}

.page-home .entry-step-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
  font-size: 1.12rem;
  color: var(--lamp);
  margin: 0 0 6px;
}

.page-home .entry-step-note {
  font-size: .94rem;
  line-height: 1.7;
  color: var(--light-70);
  margin: 0 0 10px;
}

.page-home .entry-step-link {
  font-size: .9rem;
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,206,134,.45);
  padding-bottom: 2px;
}

.page-home .entry-step-link:hover {
  color: var(--lamp);
  border-bottom-color: var(--gold);
}

/* 悬浮比分面板 */
.page-home .score-float {
  position: relative;
  align-self: start;
  padding: 18px 16px 16px;
  background: rgba(12,23,41,.88);
  border: 1px solid var(--hair-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  clip-path: polygon(0 2.4%, 100% 0, 100% 97.6%, 0 100%);
  backdrop-filter: blur(8px);
}

.page-home .score-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--hair-light);
}

.page-home .score-stamp {
  font-family: var(--font-data);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--light-45);
}

.page-home .score-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 2px 4px;
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.page-home .score-card {
  padding: 13px 14px;
  border-radius: var(--r-sm);
  background: rgba(27,44,74,.78);
  border-left: 3px solid var(--ember);
}

.page-home .score-card--final {
  border-left-color: var(--gold);
}

.page-home .score-meta {
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--light-45);
  margin: 0 0 8px;
}

.page-home .score-teams {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: .98rem;
  color: var(--light-90);
  line-height: 1.5;
}

.page-home .score-num {
  font-family: var(--font-data);
  font-size: 1.5rem;
  letter-spacing: .08em;
  color: var(--lamp);
  line-height: 1.1;
}

.page-home .score-card:not(.score-card--final) .score-num {
  color: var(--ember);
}

.page-home .score-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--hair-light);
  font-family: var(--font-data);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--light-45);
}

.page-home .score-final-note {
  margin: 8px 0 0;
  font-size: .74rem;
  color: var(--gold-soft);
}

.page-home .score-foot {
  margin: 12px 4px 0;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--light-45);
}

.page-home .score-foot a {
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,206,134,.4);
}

.page-home .hero-slant {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(26px, 5vw, 64px);
  background: var(--cream);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 2;
}

/* ============ 战报时间轴 ============ */
.page-home .tl-section {
  position: relative;
}

.page-home .tl-banner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-home .tl-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .08;
}

.page-home .tl-track {
  position: relative;
  list-style: none;
  margin: 26px 0 0;
  padding: 0 4px 14px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.page-home .tl-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 10%, var(--gold-deep) 55%, transparent 100%);
}

.page-home .tl-node {
  position: relative;
  flex: 0 0 auto;
  width: min(76vw, 268px);
  padding-top: 42px;
  scroll-snap-align: start;
}

.page-home .tl-node::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--gold);
}

.page-home .tl-node--gold::before {
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(217,164,65,.18);
}

.page-home .tl-mark {
  display: inline-block;
  font-family: var(--font-data);
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--clay);
  background: rgba(169,88,58,.12);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  margin-bottom: 8px;
}

.page-home .tl-node--gold .tl-mark {
  color: var(--ink);
  background: rgba(217,164,65,.24);
}

.page-home .tl-node-title {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 8px;
}

.page-home .tl-node-note {
  font-size: .9rem;
  line-height: 1.72;
  color: var(--ink-70);
  margin: 0;
}

.page-home .tl-more {
  margin: 22px 0 0;
}

/* ============ 排名与射门卡组 ============ */
.page-home .rank-section {
  background:
    radial-gradient(90% 60% at 88% 0%, rgba(27,44,74,.9), transparent 68%),
    var(--navy);
  position: relative;
}

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

.page-home .rank-card {
  padding: 22px 20px 18px;
  border-radius: var(--r-lg);
  background: rgba(27,44,74,.72);
  border: 1px solid var(--hair-light);
  box-shadow: var(--shadow-soft);
}

.page-home .rank-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .02em;
  color: var(--lamp);
  margin: 0 0 14px;
}

.page-home .rank-card-note {
  margin: 14px 0 0;
  font-size: .82rem;
  line-height: 1.66;
  color: var(--light-45);
}

.page-home .rank-list,
.page-home .split-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-home .rank-row,
.page-home .split-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(240,206,134,.1);
  font-size: .96rem;
  color: var(--light-90);
}

.page-home .rank-row:last-child,
.page-home .split-row:last-child {
  border-bottom: 0;
}

.page-home .rank-pos {
  font-family: var(--font-data);
  font-size: .84rem;
  letter-spacing: .08em;
  color: var(--gold);
  min-width: 1.6em;
}

.page-home .rank-team {
  flex: 1 1 auto;
}

.page-home .rank-pts {
  font-size: .84rem;
  color: var(--light-45);
}

.page-home .split-label {
  color: var(--light-70);
}

.page-home .split-val {
  font-size: .84rem;
  color: var(--light-45);
}

.page-home .data-num {
  font-family: var(--font-data);
  font-size: 1.08em;
  letter-spacing: .08em;
  color: var(--lamp);
}

.page-home .data-num--lg {
  font-size: 1.85rem;
  color: var(--gold);
}

.page-home .shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.page-home .shot-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  border-radius: var(--r-sm);
  background: rgba(12,23,41,.72);
  border: 1px solid rgba(240,206,134,.12);
}

.page-home .shot-label {
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--light-45);
}

.page-home .rank-more {
  margin: 26px 0 0;
}

/* ============ 球队库 ============ */
.page-home .db-section {
  position: relative;
}

.page-home .db-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.page-home .db-note {
  margin: 18px 0 0;
  font-size: .96rem;
  line-height: 1.78;
  color: var(--ink-70);
  max-width: 32em;
}

.page-home .db-more {
  margin: 20px 0 0;
}

.page-home .db-figure {
  margin: 0;
  align-self: start;
}

.page-home .db-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-soft);
}

.page-home .db-cap {
  margin: 12px 0 0;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--stone);
}

/* ============ 更新节奏 ============ */
.page-home .cadence-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-home .cadence-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.66);
  border-left: 3px solid var(--gold);
}

.page-home .cadence-k {
  font-family: var(--font-data);
  font-size: .92rem;
  letter-spacing: .06em;
  color: var(--clay);
  line-height: 1.5;
  padding-top: 2px;
}

.page-home .cadence-t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--ink);
  margin: 0 0 6px;
}

.page-home .cadence-d {
  margin: 0;
  font-size: .93rem;
  line-height: 1.74;
  color: var(--ink-70);
}

.page-home .cadence-more {
  margin: 22px 0 0;
}

.page-home .cadence-figure {
  margin: 0;
  align-self: start;
}

.page-home .cadence-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-soft);
}

.page-home .cadence-cap {
  margin: 12px 0 0;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--stone);
}

/* ============ 后续路径 ============ */
.page-home .home-tail {
  background: var(--navy-3);
}

.page-home .tail-links {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-home .tail-link {
  padding: 20px 20px 18px;
  border-radius: var(--r-md);
  background: rgba(27,44,74,.7);
  border: 1px solid var(--hair-light);
  transition: border-color .22s ease-out;
}

.page-home .tail-link:hover {
  border-color: var(--gold);
}

.page-home .tail-t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--lamp);
  margin: 0 0 8px;
}

.page-home .tail-d {
  margin: 0 0 12px;
  font-size: .92rem;
  line-height: 1.72;
  color: var(--light-70);
}

.page-home .tail-a {
  font-size: .88rem;
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,206,134,.4);
  padding-bottom: 2px;
}

.page-home .tail-a:hover {
  color: var(--lamp);
  border-bottom-color: var(--gold);
}

.page-home .tail-note {
  margin: 24px 0 0;
  font-size: .88rem;
  line-height: 1.76;
  color: var(--light-45);
}

/* ============ 回到顶部 ============ */
.page-home .to-top-row {
  display: flex;
  justify-content: center;
  padding: 22px var(--pad) 34px;
  background: var(--navy-3);
}

/* ============ 主按钮微调 ============ */
.page-home .btn {
  display: inline-block;
  text-decoration: none;
}

/* ============ 断点：平板 ============ */
@media (min-width: 720px) {
  .page-home .tl-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 2.4vw, 28px);
    overflow: visible;
  }

  .page-home .tl-node {
    width: auto;
  }

  .page-home .rank-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .page-home .rank-card--shot {
    grid-column: 1 / -1;
  }

  .page-home .shot-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .page-home .tail-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* ============ 断点：桌面 ============ */
@media (min-width: 1000px) {
  .page-home .hero-inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: start;
    gap: clamp(32px, 4.4vw, 62px);
  }

  .page-home .score-float {
    margin-top: 6px;
  }

  .page-home .score-list {
    max-height: 460px;
  }

  .page-home .rank-deck {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px;
  }

  .page-home .rank-card--lead {
    grid-column: 1 / 6;
  }

  .page-home .rank-card:not(.rank-card--lead):not(.rank-card--shot) {
    grid-column: 7 / 13;
    margin-top: 56px;
  }

  .page-home .rank-card--shot {
    grid-column: 3 / 11;
    margin-top: 26px;
  }

  .page-home .shot-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .page-home .cadence-grid {
    align-items: start;
    column-gap: clamp(28px, 4vw, 60px);
  }

  .page-home .cadence-figure {
    margin-top: 40px;
  }
}

/* ============ 窄屏兜底 ============ */
@media (max-width: 560px) {
  .page-home .entry-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 16px;
  }

  .page-home .entry-num {
    font-size: 1.2rem;
  }

  .page-home .shot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .page-home .score-float {
    clip-path: none;
  }
}