.page-home{
  --home-cut:12px;
  --home-line:rgba(20,64,94,.85);
  --home-soft:rgba(20,64,94,.5);
  background:var(--deep);
  color:var(--mist);
  font-family:var(--font-body);
  overflow-x:hidden;
}

/* ---------- 首屏 ---------- */
.page-home .hero{
  position:relative;
  padding:64px 0 0;
  overflow:hidden;
  background:
    radial-gradient(130% 90% at 50% -12%, rgba(35,199,192,.18), transparent 60%),
    radial-gradient(90% 70% at 92% 8%, rgba(255,122,47,.12), transparent 58%),
    var(--deep);
}
.page-home .hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.16;
  filter:saturate(.65) contrast(1.15);
}
.page-home .hero__veil{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  background:
    linear-gradient(180deg, rgba(6,24,38,.4) 0%, rgba(6,24,38,.88) 58%, var(--deep) 100%),
    repeating-linear-gradient(90deg, rgba(20,64,94,.32) 0 1px, transparent 1px 96px);
}
.page-home .hero__inner{
  position:relative;
  z-index:2;
}
.page-home .hero__ctx{
  display:inline-block;
  margin:0 0 20px;
  padding:5px 10px;
  color:var(--haze);
  border:1px solid var(--home-line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.page-home .hero__title{
  margin:0;
  max-width:16ch;
  font-family:var(--font-head);
  font-size:clamp(34px,6vw,68px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.01em;
  color:var(--mist);
  text-wrap:balance;
}
.page-home .hero__lead{
  max-width:60ch;
  margin:22px 0 0;
  font-size:16px;
  line-height:1.7;
  color:var(--haze);
}
.page-home .hero__index{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:48px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--home-line);
}
.page-home .hero__idx{
  position:relative;
  display:grid;
  gap:6px;
  padding:22px 20px 26px 0;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--home-soft);
  transition:transform .12s ease,background .12s ease;
}
.page-home .hero__idx::after{
  content:"";
  position:absolute;
  left:0;
  bottom:14px;
  width:0;
  height:2px;
  background:var(--orange);
  transition:width .12s ease;
}
.page-home .hero__idx-num{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--orange);
}
.page-home .hero__idx-name{
  font-family:var(--font-head);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--mist);
}
.page-home .hero__idx-desc{
  font-size:14px;
  line-height:1.6;
  color:var(--haze);
}
.page-home .hero__idx:hover{
  background:rgba(12,44,68,.55);
}
.page-home .hero__idx:hover::after{
  width:56px;
}

/* ---------- 章节骨架 ---------- */
.page-home .chap{
  position:relative;
  padding:80px 0 0;
}
.page-home .chap > .band{
  margin-bottom:26px;
}
.page-home .chap__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px;
  margin-bottom:18px;
}
.page-home .chap__num{
  font-size:13px;
  letter-spacing:.14em;
  color:var(--orange);
}
.page-home .chap__title{
  margin:0;
  font-family:var(--font-head);
  font-size:clamp(24px,3.4vw,40px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--mist);
}
.page-home .chap__lead{
  max-width:64ch;
  margin:0 0 32px;
  font-size:16px;
  line-height:1.7;
  color:var(--haze);
}

/* ---------- 01 主队 ---------- */
.page-home .track__pick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:30px;
}
.page-home .track__slot{
  position:relative;
  display:grid;
  gap:2px;
  min-width:150px;
  padding:12px 16px;
  cursor:pointer;
  background:var(--panel-2);
  border:1px solid var(--home-line);
  clip-path:polygon(var(--home-cut) 0,100% 0,100% calc(100% - var(--home-cut)),calc(100% - var(--home-cut)) 100%,0 100%,0 var(--home-cut));
  transition:border-color .12s ease,background .12s ease,transform .12s ease;
}
.page-home .track__slot-num{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--haze);
}
.page-home .track__slot-name{
  font-family:var(--font-head);
  font-size:16px;
  font-weight:700;
  color:var(--mist);
}
.page-home .track__slot-state{
  color:var(--haze);
}
.page-home .track__radio:checked + .track__slot{
  background:linear-gradient(180deg,rgba(255,122,47,.2),rgba(12,44,68,.92));
  border-color:var(--orange);
  transform:translateY(-2px);
}
.page-home .track__radio:checked + .track__slot .track__slot-num{
  color:var(--orange);
}
.page-home .track__radio:checked + .track__slot .track__slot-state{
  color:var(--lime);
}
.page-home .track__radio:focus-visible + .track__slot{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

.page-home .fx-list{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-home .fx{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px 14px;
  padding:14px 16px 14px 18px;
  background:var(--panel);
  border-left:3px solid var(--grid);
  clip-path:polygon(var(--home-cut) 0,100% 0,100% calc(100% - var(--home-cut)),calc(100% - var(--home-cut)) 100%,0 100%,0 var(--home-cut));
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
  order:0;
}
.page-home .fx[data-state="live"]{ border-left-color:var(--lime); }
.page-home .fx[data-state="replay"]{ border-left-color:var(--cyan); }
.page-home .fx[data-state="done"]{ border-left-color:var(--grid); }
.page-home .fx__zone{
  color:var(--haze);
  white-space:nowrap;
}
.page-home .fx__main{
  display:grid;
  gap:3px;
  min-width:0;
}
.page-home .fx__name{
  font-family:var(--font-head);
  font-size:16px;
  font-weight:700;
  color:var(--mist);
}
.page-home .fx__meta{
  font-size:13px;
  color:var(--amber);
}
.page-home .fx:hover{
  transform:translateY(-4px);
  background:var(--panel-2);
}
.page-home .track:has(#tk01:checked) .fx[data-slot="01"],
.page-home .track:has(#tk02:checked) .fx[data-slot="02"],
.page-home .track:has(#tk03:checked) .fx[data-slot="03"],
.page-home .track:has(#tk04:checked) .fx[data-slot="04"],
.page-home .track:has(#tk05:checked) .fx[data-slot="05"]{
  order:-1;
  background:var(--panel-2);
}

/* ---------- 02 赛程两级 ---------- */
.page-home .split{
  display:grid;
  gap:32px;
  grid-template-columns:1fr;
}
.page-home .ladder{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.page-home .ladder__row details{
  background:var(--panel-2);
  border-left:3px solid var(--grid);
  clip-path:polygon(var(--home-cut) 0,100% 0,100% calc(100% - var(--home-cut)),calc(100% - var(--home-cut)) 100%,0 100%,0 var(--home-cut));
}
.page-home .ladder__row details[open]{
  border-left-color:var(--cyan);
}
.page-home .ladder__row summary{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  align-items:baseline;
  justify-content:space-between;
  padding:14px 18px;
  cursor:pointer;
  list-style:none;
}
.page-home .ladder__row summary::-webkit-details-marker{
  display:none;
}
.page-home .ladder__row summary::after{
  content:"＋";
  margin-left:auto;
  color:var(--haze);
  font-size:14px;
}
.page-home .ladder__row details[open] summary::after{
  content:"－";
  color:var(--orange);
}
.page-home .ladder__name{
  font-family:var(--font-head);
  font-size:16px;
  font-weight:700;
  color:var(--mist);
}
.page-home .ladder__meta{
  font-size:12px;
  letter-spacing:.06em;
  color:var(--cyan);
}
.page-home .ladder__dates{
  margin:0;
  padding:0 18px 16px;
  list-style:none;
  display:grid;
  gap:8px;
  border-top:1px solid var(--home-soft);
  padding-top:12px;
}
.page-home .ladder__dates li{
  display:flex;
  gap:14px;
  font-size:14px;
  color:var(--haze);
}
.page-home .ladder__dates li span{
  min-width:64px;
  color:var(--amber);
}

.page-home .shot{
  position:relative;
  margin:0;
}
.page-home .shot img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--home-line);
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}
.page-home .shot--wide img{ aspect-ratio:3/2; }
.page-home .shot--pan img{ aspect-ratio:3/1; }
.page-home .shot--tall img{ aspect-ratio:4/3; }
.page-home .shot__cap{
  display:block;
  margin-top:10px;
  color:var(--haze);
}

/* ---------- 03 回看 ---------- */
.page-home .axis{
  display:flex;
  gap:12px;
  margin:26px 0 0;
  padding:4px 0 16px;
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.page-home .axis__card{
  flex:0 0 148px;
  scroll-snap-align:start;
  display:grid;
  gap:4px;
  padding:14px 14px 16px;
  background:linear-gradient(180deg,rgba(35,199,192,.16),var(--panel-2) 72%);
  border-left:3px solid var(--cyan);
  clip-path:polygon(var(--home-cut) 0,100% 0,100% calc(100% - var(--home-cut)),calc(100% - var(--home-cut)) 100%,0 100%,0 var(--home-cut));
}
.page-home .axis__card--now{
  background:linear-gradient(180deg,rgba(200,240,74,.2),var(--panel-2) 72%);
  border-left-color:var(--lime);
}
.page-home .axis__num{
  font-size:26px;
  font-weight:700;
  line-height:1;
  color:var(--mist);
}
.page-home .axis__unit{
  color:var(--haze);
}
.page-home .axis__stage{
  margin-top:6px;
  font-size:13px;
  line-height:1.5;
  color:var(--amber);
}
.page-home .stage-set{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
.page-home .stage-set__item{
  padding:5px 12px;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--mist);
  background:rgba(12,44,68,.9);
  border:1px solid var(--home-line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.page-home .stage-set__item:nth-child(3n+1){ border-color:rgba(35,199,192,.55); }
.page-home .stage-set__item:nth-child(3n+2){ border-color:rgba(255,180,92,.5); }
.page-home .stage-set__item:nth-child(3n){ border-color:rgba(200,240,74,.45); }

/* ---------- 04 排名 ---------- */
.page-home .views{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 24px;
  padding:0;
  list-style:none;
}
.page-home .views__item{
  padding:6px 14px;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--haze);
  border:1px solid var(--home-line);
  background:var(--panel-2);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.page-home .views__item--on{
  color:var(--deep);
  background:var(--orange);
  border-color:var(--orange);
  font-weight:700;
}
.page-home .board{
  display:grid;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-home .board__row{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 54px 40px;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--panel-2);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:background .12s ease;
}
.page-home .board__row:hover{
  background:var(--panel);
}
.page-home .board__pos{
  font-size:13px;
  color:var(--haze);
  text-align:right;
}
.page-home .board__row:nth-child(1) .board__pos,
.page-home .board__row:nth-child(2) .board__pos,
.page-home .board__row:nth-child(3) .board__pos{
  color:var(--orange);
}
.page-home .board__bar{
  display:block;
  height:10px;
  background:var(--grid);
  overflow:hidden;
}
.page-home .board__bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--amber));
}
.page-home .board__row:nth-child(1) .board__bar i{ width:100%; }
.page-home .board__row:nth-child(2) .board__bar i{ width:93%; }
.page-home .board__row:nth-child(3) .board__bar i{ width:86%; }
.page-home .board__row:nth-child(4) .board__bar i{ width:79%; }
.page-home .board__row:nth-child(5) .board__bar i{ width:72%; }
.page-home .board__row:nth-child(6) .board__bar i{ width:63%; }
.page-home .board__row:nth-child(7) .board__bar i{ width:55%; }
.page-home .board__row:nth-child(8) .board__bar i{ width:44%; background:linear-gradient(90deg,var(--amber),var(--wine)); }
.page-home .board__val{
  font-size:15px;
  color:var(--mist);
  text-align:right;
}
.page-home .board__delta{
  font-size:12px;
  color:var(--cyan);
  text-align:right;
}
.page-home .board__row:nth-child(4) .board__delta,
.page-home .board__row:nth-child(6) .board__delta,
.page-home .board__row:nth-child(8) .board__delta{
  color:var(--orange);
}
.page-home .board__note{
  max-width:64ch;
  margin:18px 0 0;
  font-size:13px;
  line-height:1.7;
  color:var(--haze);
}

/* ---------- 05 友谊赛 ---------- */
.page-home .chap--exh .band{
  filter:hue-rotate(-12deg);
}
.page-home .chap--exh .ladder__row details{
  border-left-color:var(--wine);
}
.page-home .exh-list{
  display:grid;
  gap:10px;
  margin:0 0 20px;
  padding:0;
  list-style:none;
}
.page-home .exh{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:6px 14px;
  padding:12px 16px;
  background:linear-gradient(90deg,rgba(122,43,63,.28),rgba(12,44,68,.9) 46%);
  border-left:3px solid var(--wine);
  clip-path:polygon(var(--home-cut) 0,100% 0,100% calc(100% - var(--home-cut)),calc(100% - var(--home-cut)) 100%,0 100%,0 var(--home-cut));
}
.page-home .exh__tag{
  color:var(--amber);
}
.page-home .exh__name{
  font-family:var(--font-head);
  font-size:15px;
  font-weight:700;
  color:var(--mist);
}
.page-home .exh__time{
  font-size:12px;
  color:var(--haze);
}
.page-home .exh__note{
  max-width:60ch;
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--haze);
}

/* ---------- 06 收束 ---------- */
.page-home .chap--close{
  padding-bottom:96px;
}
.page-home .routes{
  display:grid;
  gap:12px;
  margin:0 0 28px;
  padding:0;
  list-style:none;
}
.page-home .routes__link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 16px;
  padding:20px 20px 22px;
  color:inherit;
  text-decoration:none;
  background:var(--panel);
  border-left:3px solid var(--orange);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  transition:transform .12s ease,background .12s ease;
}
.page-home .routes__link:hover{
  transform:translateY(-4px);
  background:var(--panel-2);
}
.page-home .routes__num{
  grid-row:span 2;
  font-size:22px;
  font-weight:700;
  color:var(--orange);
}
.page-home .routes__name{
  font-family:var(--font-head);
  font-size:20px;
  font-weight:800;
  color:var(--mist);
}
.page-home .routes__desc{
  font-size:14px;
  line-height:1.6;
  color:var(--haze);
}
.page-home .close-note{
  max-width:68ch;
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--haze);
}
.page-home .inline-link{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(35,199,192,.45);
}
.page-home .inline-link:hover{
  color:var(--lime);
  border-bottom-color:var(--lime);
}

/* ---------- 动效降级 ---------- */
.page-home [data-reveal]{
  opacity:1;
  transform:none;
  transition:opacity .28s ease,transform .28s ease;
}

/* ---------- 响应式 ---------- */
@media (min-width:760px){
  .page-home .hero{
    padding-top:84px;
  }
  .page-home .hero__index{
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:56px;
  }
  .page-home .hero__idx{
    padding:26px 26px 30px;
    border-bottom:0;
  }
  .page-home .hero__idx::before{
    content:"";
    position:absolute;
    left:0;
    top:20px;
    bottom:20px;
    width:1px;
    background:var(--home-line);
  }
  .page-home .hero__index > li:first-child .hero__idx::before{
    display:none;
  }
  .page-home .hero__idx:hover{
    background:rgba(12,44,68,.5);
  }
  .page-home .chap{
    padding-top:104px;
  }
  .page-home .split{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:start;
    gap:48px;
  }
  .page-home .split--rev{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  }
  .page-home .routes{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:1080px){
  .page-home .hero__title{
    max-width:18ch;
  }
  .page-home .board__row{
    grid-template-columns:40px minmax(0,1fr) 64px 48px;
    padding:12px 16px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-home .hero__idx,
  .page-home .fx,
  .page-home .track__slot,
  .page-home .routes__link,
  .page-home [data-reveal]{
    transition:opacity .2s linear;
    transform:none;
  }
  .page-home .axis{
    scroll-snap-type:none;
  }
}