.page-home {
  --ph-radius: 2px;
  --ph-pad-y: clamp(48px, 8vw, 104px);
  background: var(--c-base);
  color: var(--c-text);
  overflow-x: hidden;
}

.page-home section[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.page-home .ph-inline-link {
  color: var(--c-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(166, 255, 60, 0.35);
}

.page-home .ph-inline-link:hover,
.page-home .ph-inline-link:focus-visible {
  border-bottom-color: var(--c-green);
}

.page-home .ph-h1 {
  margin: 14px 0 18px;
  font-size: clamp(30px, 6.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  max-width: 16em;
}

.page-home .ph-h2 {
  margin: 12px 0 18px;
  font-size: clamp(23px, 3.6vw, 36px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.page-home .ph-p {
  margin: 0 0 16px;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.78;
  color: var(--c-text);
  opacity: 0.88;
}

.page-home .ph-p--wide {
  max-width: 52em;
}

.page-home .ph-p--aside {
  max-width: 34em;
  color: var(--c-fog);
  opacity: 1;
}

.page-home .ph-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-fog);
}

.page-home .ph-num--hot {
  color: var(--c-green);
}

.page-home .ph-num--warn {
  color: var(--c-orange);
}

/* ---------- Hero ---------- */

.page-home .ph-hero {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--line-soft);
}

.page-home .ph-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.page-home .ph-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: saturate(0.8) contrast(1.06);
}

.page-home .ph-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 85% at 76% 8%, rgba(166, 255, 60, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(7, 11, 20, 0.5) 0%, rgba(7, 11, 20, 0.84) 44%, var(--c-base) 100%);
}

.page-home .ph-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
  padding-block: clamp(28px, 5vw, 64px) clamp(46px, 7vw, 96px);
}

.page-home .ph-hero-main {
  min-width: 0;
}

.page-home .ph-lede {
  margin: 0 0 24px;
  max-width: 38em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-text);
  opacity: 0.86;
}

.page-home .ph-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}

.page-home .ph-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line-soft);
}

.page-home .ph-preview-item {
  border-top: 1px solid var(--line-soft);
}

.page-home .ph-preview-link {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 14px;
  padding: 13px 4px;
  text-decoration: none;
  color: inherit;
  border-left: 2px solid transparent;
  transition: background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.page-home .ph-preview-link:hover,
.page-home .ph-preview-link:focus-visible {
  background: var(--c-panel);
  border-left-color: var(--c-green);
  transform: translateX(2px);
}

.page-home .ph-preview-link--scene:hover,
.page-home .ph-preview-link--scene:focus-visible {
  border-left-color: var(--c-orange);
}

.page-home .ph-preview-no {
  grid-row: 1 / span 2;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--c-green);
}

.page-home .ph-preview-link--scene .ph-preview-no {
  color: var(--c-orange);
}

.page-home .ph-preview-title {
  grid-column: 2;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-home .ph-preview-desc {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-fog);
}

.page-home .ph-float {
  position: relative;
  align-self: start;
  padding: 18px;
  border: 1px solid var(--line-firm);
  border-radius: var(--ph-radius);
  background: linear-gradient(165deg, rgba(14, 22, 38, 0.94), rgba(7, 11, 20, 0.88));
  box-shadow: inset 0 1px 0 rgba(232, 238, 247, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.page-home .ph-float-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.page-home .ph-float-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-fog);
}

.page-home .ph-pitch {
  display: block;
  width: 100%;
  height: auto;
  margin: 16px 0;
}

.page-home .ph-pitch-line {
  fill: none;
  stroke: var(--c-line);
  stroke-width: 1;
  opacity: 0.6;
}

.page-home .ph-link-line {
  fill: none;
  stroke: var(--c-green);
  stroke-width: 1.3;
  opacity: 0.78;
  animation: ph-breathe 7s ease-in-out infinite;
}

.page-home .ph-node {
  fill: var(--c-teal);
  opacity: 0.85;
}

.page-home .ph-node--hot {
  fill: var(--c-green);
}

@keyframes ph-breathe {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.92; }
}

.page-home .ph-float-stats {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-home .ph-float-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  background: var(--c-panel);
}

.page-home .ph-float-stat .stat-value {
  font-size: 18px;
  color: var(--c-green);
}

.page-home .ph-float-map {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.page-home .ph-float-map-dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(53, 214, 196, 0.16);
}

.page-home .ph-float-map-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-fog);
}

/* ---------- 斜向色带 ---------- */

.page-home .ph-slant {
  height: clamp(46px, 7vw, 78px);
  background: linear-gradient(96deg, rgba(22, 35, 58, 0) 0%, var(--c-indigo) 20%, var(--c-indigo) 80%, rgba(22, 35, 58, 0) 100%);
  clip-path: polygon(0 42%, 100% 0, 100% 58%, 0 100%);
}

.page-home .ph-slant--alt {
  background: linear-gradient(96deg, rgba(22, 35, 58, 0) 0%, rgba(255, 138, 43, 0.16) 22%, rgba(22, 35, 58, 0.95) 58%, rgba(22, 35, 58, 0) 100%);
  clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 60%);
}

/* ---------- 通用分栏 ---------- */

.page-home .ph-section {
  padding-block: var(--ph-pad-y);
  position: relative;
}

.page-home .ph-split {
  display: grid;
  gap: 32px;
  align-items: center;
}

.page-home .ph-split-text {
  min-width: 0;
}

.page-home .ph-figure {
  margin: 0;
}

.page-home .ph-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-home .ph-figure figcaption {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--c-fog);
}

/* ---------- 数据面板 ---------- */

.page-home .ph-tabs {
  margin-top: 24px;
  border: 1px solid var(--line-firm);
  background: var(--c-panel);
}

.page-home .tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--c-indigo);
}

.page-home .tab {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--line-soft);
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--c-fog);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 20px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.page-home .tab[aria-selected="true"] {
  color: var(--c-base);
  background: var(--c-green);
  border-bottom-color: var(--c-green);
}

.page-home .tab:hover:not([aria-selected="true"]) {
  color: var(--c-text);
  background: var(--c-card);
}

.page-home .tab-panel {
  padding: 4px 0 0;
  animation: ph-pane-in 0.28s ease both;
}

.page-home .tab-panel[hidden] {
  display: none;
}

@keyframes ph-pane-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.page-home .ph-table-scroll {
  overflow-x: auto;
}

.page-home .ph-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-home .ph-table-caption {
  caption-side: top;
  text-align: left;
  padding: 12px 14px 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fog);
}

.page-home .ph-table th,
.page-home .ph-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.page-home .ph-table thead th {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-fog);
  font-weight: 500;
  background: var(--c-indigo);
}

.page-home .ph-table tbody th {
  font-weight: 500;
  color: var(--c-fog);
}

.page-home .ph-table tbody tr:hover {
  background: var(--c-card);
}

.page-home .ph-table tbody tr:hover th {
  color: var(--c-text);
}

/* ---------- 主场地图 ---------- */

.page-home .ph-section--map {
  background: linear-gradient(180deg, var(--c-base) 0%, var(--c-panel) 50%, var(--c-base) 100%);
}

.page-home .ph-map-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.page-home .ph-map-item {
  display: grid;
  gap: 2px 16px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line-soft);
}

.page-home .ph-map-key {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-teal);
}

.page-home .ph-map-val {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-text);
  opacity: 0.86;
}

/* ---------- 赛程时间轴 ---------- */

.page-home .ph-section--timeline {
  background: var(--c-panel);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.page-home .ph-timeline {
  margin-top: 28px;
  border: 1px solid var(--line-firm);
  background: var(--c-base);
}

.page-home .ph-tl-head {
  display: none;
}

.page-home .ph-tl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .ph-tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 14px;
  padding: 14px 14px 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.page-home .ph-tl-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-green);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.page-home .ph-tl-row:hover,
.page-home .ph-tl-row:focus {
  background: var(--c-panel);
  transform: translateY(-2px);
  outline: none;
}

.page-home .ph-tl-row:hover::before,
.page-home .ph-tl-row:focus::before,
.page-home .ph-tl-row:focus-visible::before {
  opacity: 1;
}

.page-home .ph-tl-time {
  font-size: 15px;
  color: var(--c-green);
  padding-top: 2px;
}

.page-home .ph-tl-body {
  min-width: 0;
}

.page-home .ph-tl-match {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
}

.page-home .ph-tl-summary {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-orange);
  transition: max-height 0.28s ease, opacity 0.28s ease, margin-top 0.28s ease;
}

.page-home .ph-tl-row:hover .ph-tl-summary,
.page-home .ph-tl-row:focus .ph-tl-summary,
.page-home .ph-tl-row:focus-within .ph-tl-summary {
  max-height: 4em;
  opacity: 1;
  margin-top: 6px;
}

.page-home .ph-tl-stage {
  justify-self: end;
  align-self: start;
  padding: 3px 9px;
  border: 1px solid var(--line-firm);
  border-radius: var(--ph-radius);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--c-fog);
  white-space: nowrap;
}

/* ---------- 战术解读 ---------- */

.page-home .ph-tactics-head {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.page-home .ph-tactics {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-home .ph-tactic {
  padding: 22px 20px;
  background: var(--c-panel);
}

.page-home .ph-tactic-time {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-orange);
}

.page-home .ph-tactic-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-home .ph-tactic-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--c-fog);
}

/* ---------- 资源与索引 ---------- */

.page-home .ph-section--resources {
  background: linear-gradient(180deg, var(--c-base) 0%, rgba(14, 22, 38, 0.7) 100%);
}

.page-home .ph-res-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.page-home .ph-res-item {
  padding: 14px 2px;
  border-bottom: 1px solid var(--line-soft);
}

.page-home .ph-res-text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--c-fog);
}

.page-home .ph-index-card {
  padding: 24px 22px;
  border: 1px solid var(--line-firm);
  border-radius: var(--ph-radius);
  background: linear-gradient(160deg, var(--c-indigo), var(--c-panel));
  box-shadow: inset 0 1px 0 rgba(232, 238, 247, 0.05);
}

.page-home .ph-index-num {
  margin: 12px 0 10px;
  font-size: clamp(38px, 7vw, 56px);
  line-height: 1;
  font-weight: 700;
  color: var(--c-green);
}

.page-home .ph-index-unit {
  margin-left: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-fog);
}

.page-home .ph-index-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.76;
  color: var(--c-text);
  opacity: 0.86;
}

.page-home .ph-index-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
}

/* ---------- 运营规模 ---------- */

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

.page-home .ph-scale-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  background: var(--c-panel);
}

.page-home .ph-scale-num {
  font-size: clamp(24px, 4.6vw, 34px);
  line-height: 1;
  font-weight: 700;
  color: var(--c-text);
}

.page-home .ph-scale-unit {
  margin-left: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-fog);
}

.page-home .ph-scale-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-fog);
}

.page-home .ph-scale-body {
  max-width: 46em;
}

/* ---------- 收尾 ---------- */

.page-home .ph-closing {
  position: relative;
  padding-block: clamp(52px, 8vw, 104px) clamp(56px, 9vw, 112px);
  background:
    linear-gradient(102deg, rgba(22, 35, 58, 0.9) 0%, rgba(22, 35, 58, 0.35) 46%, var(--c-base) 100%);
  border-top: 1px solid var(--line-soft);
}

.page-home .ph-closing-grid {
  display: grid;
  gap: 30px;
  align-items: center;
}

.page-home .ph-closing-figure {
  margin: 0;
}

.page-home .ph-closing-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  opacity: 0.72;
}

.page-home .ph-closing-links {
  display: grid;
  gap: 1px;
  margin: 26px 0 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.page-home .ph-route {
  display: grid;
  gap: 6px;
  padding: 18px 20px 20px;
  text-decoration: none;
  color: inherit;
  background: var(--c-panel);
  border-left: 3px solid var(--c-green);
  transition: background-color 0.22s ease, transform 0.22s ease;
}

.page-home .ph-route--orange {
  border-left-color: var(--c-orange);
}

.page-home .ph-route:hover,
.page-home .ph-route:focus-visible {
  background: var(--c-indigo);
  transform: translateX(4px);
}

.page-home .ph-route-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.page-home .ph-route-text {
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--c-fog);
}

.page-home .ph-closing-foot {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--c-fog);
}

/* ---------- 桌面端 ---------- */

@media (min-width: 768px) {
  .page-home .ph-scale {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .ph-tactics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-home .ph-tactics-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26em);
    align-items: end;
    gap: 32px;
  }

  .page-home .ph-map-item {
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .page-home .ph-tl-head {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 10px 14px 10px 18px;
    border-bottom: 1px solid var(--line-firm);
    background: var(--c-indigo);
  }

  .page-home .ph-tl-head-cell {
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-fog);
  }

  .page-home .ph-tl-head-cell:last-child {
    justify-self: end;
  }
}

@media (min-width: 1024px) {
  .page-home .ph-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 44px;
    align-items: start;
  }

  .page-home .ph-float {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }

  .page-home .ph-hero-bg::after {
    background:
      radial-gradient(85% 70% at 74% 6%, rgba(166, 255, 60, 0.18), transparent 58%),
      linear-gradient(180deg, rgba(7, 11, 20, 0.55) 0%, rgba(7, 11, 20, 0.88) 52%, var(--c-base) 100%);
  }

  .page-home .ph-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
  }

  .page-home .ph-split--flip {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-home .ph-split-media {
    margin-top: -28px;
  }

  .page-home .ph-split--flip .ph-split-media {
    margin-top: 32px;
  }

  .page-home .ph-closing-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 52px;
    align-items: center;
  }

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

  .page-home .ph-tactics-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .ph-link-line {
    animation: none;
    opacity: 0.8;
  }

  .page-home .tab-panel {
    animation: none;
  }

  .page-home .ph-preview-link,
  .page-home .ph-tl-row,
  .page-home .ph-route {
    transition: none;
  }
}