/* ============================================================
   威体育赛场 · 共享样式表 /assets/site.css
   墨绿指挥室 / 轨道轴 · 三线轴 · 胶囊索引
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root{
  --ink-abyss:#05100D;
  --ink-panel:#0C201A;
  --ink-track:#16463A;
  --lime:#B8FF3C;
  --lime-soft:#E4FFB0;
  --amber:#E3A43C;
  --volt:#45A8FF;
  --alert:#E8503F;
  --wine:#7C2E3E;
  --indigo:#4B3F9E;
  --bone:#F2F5EE;
  --graphite:#6E7B76;
  --graphite-black:#101614;

  --font-sans:"Inter","Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-cond:"Noto Sans SC Condensed","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;

  --radius-l:28px;
  --radius-m:20px;
  --radius-s:14px;
  --hair:1px solid var(--ink-track);
  --gutter:clamp(16px,3vw,36px);
  --shell:1320px;
  --ease:120ms ease;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:92px;
}
body{
  margin:0;
  min-height:100vh;
  background:var(--ink-abyss);
  color:var(--bone);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{ margin:0; }
table{ border-collapse:collapse; width:100%; }
hr{ border:0; border-top:var(--hair); margin:0; }
::selection{ background:var(--lime); color:var(--ink-abyss); }

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:absolute;
  left:12px;
  top:-72px;
  z-index:200;
  padding:10px 20px;
  border-radius:999px;
  background:var(--lime);
  color:var(--ink-abyss);
  font-size:13px;
  font-weight:700;
  transition:top var(--ease);
}
.skip-link:focus{ top:14px; }

/* ---------- 3. 排版 ---------- */
.display{
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(2.4rem,5.6vw,4.75rem);
  line-height:.95;
  letter-spacing:-.02em;
}
.display--s{ font-size:clamp(1.75rem,3.4vw,2.75rem); }
.h2{
  font-family:var(--font-cond);
  font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.1;
  letter-spacing:-.015em;
}
.h3{
  font-family:var(--font-cond);
  font-weight:800;
  font-size:clamp(1.1rem,1.8vw,1.4rem);
  line-height:1.2;
  letter-spacing:-.01em;
}
.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  letter-spacing:-.01em;
}
.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.24em;
  color:var(--graphite);
  text-transform:uppercase;
}
.lead{ font-size:17px; line-height:1.72; color:rgba(242,245,238,.86); }

.prose{ max-width:68ch; font-size:16.5px; line-height:1.75; }
.prose p + p{ margin-top:1em; }
.prose h2,.prose h3{ margin-top:1.6em; margin-bottom:.5em; }
.prose ul{ margin-top:.8em; padding-left:0; }
.prose li{
  padding-left:22px;
  position:relative;
  margin-top:.45em;
}
.prose li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:10px;
  height:2px;
  background:var(--lime);
}

.v-note{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.32em;
  color:var(--graphite);
  user-select:none;
}
.note{
  margin-top:14px;
  padding-left:14px;
  border-left:2px solid var(--lime);
  font-size:12.5px;
  line-height:1.7;
  color:var(--graphite);
}
.note--amber{ border-left-color:var(--amber); }
.note--volt{ border-left-color:var(--volt); }
.note--alert{ border-left-color:var(--alert); }

/* ---------- 4. 布局容器与网格 ---------- */
.shell{
  width:min(var(--shell), 100% - clamp(32px,6vw,72px));
  margin-inline:auto;
}
.shell--narrow{ width:min(880px, 100% - clamp(32px,6vw,72px)); }

.grid-12{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap:clamp(16px,2vw,30px);
}
.col-3{ grid-column:span 3; }
.col-4{ grid-column:span 4; }
.col-5{ grid-column:span 5; }
.col-6{ grid-column:span 6; }
.col-7{ grid-column:span 7; }
.col-8{ grid-column:span 8; }
.col-9{ grid-column:span 9; }
.col-12{ grid-column:span 12; }
.offset-1{ grid-column-start:2; }
.offset-2{ grid-column-start:3; }

@media (max-width:960px){
  .grid-12{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .col-3,.col-4,.col-5{ grid-column:span 6; }
  .col-6,.col-7,.col-8,.col-9{ grid-column:span 6; }
  .offset-1,.offset-2{ grid-column-start:auto; }
}
@media (max-width:600px){
  .grid-12{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-12{ grid-column:span 2; }
}

.section{ padding-block:clamp(40px,6vw,80px); }
.section--tight{ padding-block:clamp(24px,3.5vw,48px); }
.hairline{ border-top:var(--hair); }
.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px 32px;
  padding-bottom:18px;
  border-bottom:var(--hair);
  margin-bottom:clamp(24px,3vw,40px);
}

/* ---------- 5. 按钮 / 胶囊 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 24px;
  border-radius:999px;
  border:1px solid var(--ink-track);
  background:var(--ink-panel);
  color:var(--bone);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  transition:background var(--ease), color var(--ease), border-color var(--ease);
}
.btn:hover{ border-color:var(--lime); color:var(--lime); }
.btn--lime{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ink-abyss);
}
.btn--lime:hover{
  background:var(--lime-soft);
  border-color:var(--lime-soft);
  color:var(--ink-abyss);
}
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background:rgba(184,255,60,.08); }

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 15px;
  border-radius:999px;
  border:1px solid var(--ink-track);
  background:transparent;
  color:rgba(242,245,238,.86);
  font-size:12.5px;
  line-height:1.6;
  white-space:nowrap;
  transition:background var(--ease), color var(--ease), border-color var(--ease);
}
.pill:hover{ border-color:var(--lime); color:var(--lime); }
.pill[aria-current="page"],
.pill[aria-current="location"],
.pill--active{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ink-abyss);
  font-weight:700;
}

.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  font-size:12.5px;
  color:var(--graphite);
  margin-bottom:22px;
}
.crumbs li{ display:inline-flex; align-items:center; }
.crumbs li:not(:first-child)::before{
  content:"／";
  margin-right:6px;
  color:var(--ink-track);
}
.crumbs a{ border-bottom:1px solid transparent; transition:color var(--ease), border-color var(--ease); }
.crumbs a:hover{ color:var(--lime); border-bottom-color:var(--lime); }

/* ---------- 6. 命令栏 ---------- */
.cmd-bar{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(5,16,13,.96);
  border-bottom:var(--hair);
  color:var(--bone);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:box-shadow var(--ease);
}
.cmd-bar[data-scrolled="true"]{
  box-shadow:0 1px 0 rgba(184,255,60,.16), 0 12px 30px -26px rgba(0,0,0,.9);
}
.cmd-bar__inner{
  display:flex;
  align-items:center;
  gap:clamp(14px,2.2vw,34px);
  width:min(1440px, 100%);
  margin-inline:auto;
  padding:0 var(--gutter);
  min-height:62px;
}

.brand-mark{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex:0 0 auto;
  white-space:nowrap;
}
.brand-mark__cn{
  font-family:var(--font-cond);
  font-weight:800;
  font-size:16px;
  letter-spacing:.01em;
  color:var(--bone);
  transition:color var(--ease);
}
.brand-mark__domain{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.02em;
  color:var(--graphite);
}
.brand-mark:hover .brand-mark__cn{ color:var(--lime); }

.cmd-nav{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  min-width:0;
}
.cmd-nav__list{
  display:flex;
  align-items:center;
  gap:2px;
}
.cmd-nav__link{
  display:inline-flex;
  align-items:center;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:13.5px;
  white-space:nowrap;
  color:rgba(242,245,238,.8);
  transition:background var(--ease), color var(--ease), border-color var(--ease);
}
.cmd-nav__link:hover{
  border-color:var(--lime);
  color:var(--lime);
}
.cmd-nav__link[aria-current="page"]{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ink-abyss);
  font-weight:700;
}

.cmd-bar__status{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.status-dot{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--graphite);
  white-space:nowrap;
}
.status-dot::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 3px rgba(184,255,60,.16);
}
.pill-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid var(--ink-track);
  background:rgba(12,32,26,.75);
  color:var(--bone);
  font-size:13px;
  white-space:nowrap;
  transition:background var(--ease), color var(--ease), border-color var(--ease);
}
.pill-toggle::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--lime);
}
.pill-toggle:hover{ border-color:var(--lime); color:var(--lime); }

.cmd-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:rgba(22,70,58,.55);
  overflow:hidden;
}
.cmd-progress__fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--lime),var(--lime-soft));
  transform:scaleX(0);
  transform-origin:0 50%;
}

@media (max-width:1180px){
  .cmd-nav__link{ font-size:13px; padding:6px 10px; }
  .brand-mark__domain{ font-size:10px; }
}

@media (max-width:960px){
  .cmd-bar__inner{
    flex-wrap:wrap;
    padding-block:10px;
    gap:8px 12px;
  }
  .brand-mark{ flex:1 1 auto; }
  .cmd-bar__status{ order:2; gap:10px; }
  .cmd-nav{
    order:3;
    flex-basis:100%;
    display:none;
    justify-content:flex-start;
    padding:6px 0 12px;
    margin-top:8px;
    border-top:1px solid rgba(22,70,58,.7);
  }
  .cmd-bar[data-open="true"] .cmd-nav{
    display:block;
    animation:cmdDrop 180ms ease-out;
  }
  .cmd-bar[data-open="true"] .pill-toggle{
    border-color:var(--lime);
    color:var(--lime);
    background:rgba(184,255,60,.1);
  }
  .cmd-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:2px;
  }
  .cmd-nav__link{
    padding:12px 15px;
    border-radius:var(--radius-s);
    font-size:15px;
  }
  .cmd-nav__link:hover{ background:rgba(184,255,60,.08); }
}
@keyframes cmdDrop{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- 7. 页脚 ---------- */
.deck-footer{
  position:relative;
  margin-top:clamp(48px,8vw,120px);
  background:var(--ink-panel);
  border-top:var(--hair);
  color:var(--bone);
  overflow:hidden;
}
.deck-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(184,255,60,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(184,255,60,.04) 0 1px, transparent 1px 72px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 78%);
}
.deck-footer__inner{
  position:relative;
  width:min(1440px, 100% - clamp(32px,6vw,72px));
  margin-inline:auto;
  padding:clamp(32px,5vw,62px) 0 26px;
}
.deck-footer__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 28px;
  padding:18px 0;
  border-top:1px solid rgba(22,70,58,.85);
}
.deck-footer__row--brand{
  border-top:0;
  padding-top:0;
  align-items:baseline;
}
.deck-footer .brand-mark__cn{ font-size:clamp(18px,2.2vw,24px); }
.deck-footer__stamp{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--graphite);
}
.deck-footer__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--graphite);
}
.deck-footer__rails,
.deck-footer__legal{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.deck-footer__row--contact{ align-items:flex-start; }
.deck-footer__contact{
  display:flex;
  flex-wrap:wrap;
  gap:10px 34px;
  flex:1 1 320px;
}
.deck-footer__contact li{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}
.deck-footer__k{
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--graphite);
  flex:0 0 auto;
}
.deck-footer__v{
  font-size:13.5px;
  color:rgba(242,245,238,.9);
  word-break:break-word;
}
.deck-footer__icp{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--graphite);
}
.deck-footer__row--copy{ padding-bottom:0; }
.deck-footer__copy{
  font-size:12.5px;
  color:rgba(242,245,238,.78);
}
.deck-footer__note{
  font-size:12.5px;
  color:var(--graphite);
}

/* ---------- 8. 面板 / 轨道 / 图例 ---------- */
.panel{
  position:relative;
  background:var(--ink-panel);
  border:var(--hair);
  border-radius:var(--radius-l);
  padding:clamp(20px,2.4vw,32px);
  transition:border-color var(--ease), background var(--ease);
}
.panel:hover{ border-color:rgba(184,255,60,.35); }
.panel--wine{
  background:linear-gradient(150deg, var(--wine), var(--ink-panel) 78%);
  border-color:rgba(232,80,63,.28);
}
.panel--indigo{
  background:linear-gradient(150deg, var(--indigo), var(--ink-panel) 78%);
  border-color:rgba(69,168,255,.28);
}
.panel--lime{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ink-abyss);
}
.panel--lime .note,
.panel--lime .eyebrow{ color:rgba(5,16,13,.66); border-left-color:var(--ink-abyss); }
.panel__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 20px;
  margin-bottom:16px;
}
.panel__title{
  font-family:var(--font-cond);
  font-weight:800;
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.2;
}
.panel__fix{
  position:absolute;
  right:clamp(16px,2.2vw,28px);
  bottom:clamp(12px,1.8vw,20px);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--graphite);
  border-bottom:1px solid transparent;
  transition:color var(--ease), border-color var(--ease);
}
.panel__fix:hover{ color:var(--lime); border-bottom-color:var(--lime); }

.rail{
  position:relative;
  height:14px;
  border-radius:999px;
  background:var(--ink-track);
  overflow:hidden;
}
.rail__fill{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:calc(var(--v,0) * 100%);
  border-radius:999px;
  background:linear-gradient(90deg, var(--lime), #4f9a49);
  transition:width 400ms ease;
}
.rail__fill--neg{ background:linear-gradient(90deg, var(--alert), #8d2f26); }
.rail__fill--mid{ background:linear-gradient(90deg, var(--amber), #8a6320); }

.legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  font-size:12.5px;
  color:var(--graphite);
}
.legend__item{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.legend__swatch{
  display:block;
  width:24px;
  height:0;
  border-top-width:2px;
  border-top-style:solid;
  border-top-color:var(--graphite);
}
.legend__swatch--direct{ border-top-color:var(--amber); border-top-style:solid; }
.legend__swatch--playoff{ border-top-color:var(--volt); border-top-style:dashed; }
.legend__swatch--drop{ border-top-color:var(--alert); border-top-style:dotted; }
.legend__item[aria-pressed="false"],
.legend__item[data-off="true"]{ opacity:.38; }

/* ---------- 9. 表格 ---------- */
.table-wrap{
  overflow-x:auto;
  border:var(--hair);
  border-radius:var(--radius-m);
  background:var(--ink-panel);
  -webkit-overflow-scrolling:touch;
}
.table-wrap::-webkit-scrollbar{ height:8px; }
.table-wrap::-webkit-scrollbar-track{ background:rgba(22,70,58,.4); }
.table-wrap::-webkit-scrollbar-thumb{ background:var(--ink-track); border-radius:99px; }

table.data{
  width:100%;
  min-width:640px;
  font-size:14px;
  line-height:1.6;
}
table.data th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--ink-track);
  color:var(--bone);
  text-align:left;
  padding:12px 16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  white-space:nowrap;
}
table.data td{
  padding:12px 16px;
  border-top:1px solid rgba(22,70,58,.7);
  vertical-align:top;
}
table.data tbody tr{ transition:background var(--ease); }
table.data tbody tr:hover{ background:rgba(184,255,60,.06); }
table.data th:first-child,
table.data td:first-child{
  position:sticky;
  left:0;
  z-index:1;
  background:var(--ink-panel);
}
table.data thead th:first-child{ background:var(--ink-track); z-index:2; }
table.data tbody tr:hover td:first-child{ background:#10261F; }

/* ---------- 10. 图片容器（页面阶段放置占位） ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-l);
  border:var(--hair);
  background-color:var(--ink-panel);
  background-image:
    linear-gradient(180deg, rgba(22,70,58,.5), rgba(5,16,13,.92)),
    repeating-linear-gradient(90deg, rgba(184,255,60,.09) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(184,255,60,.07) 0 1px, transparent 1px 48px);
}
.media-frame > img,
.media-frame > picture > img,
.media-frame > svg{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(1.08) brightness(.92);
}
.media-frame--16x9{ aspect-ratio:16 / 9; }
.media-frame--4x3{ aspect-ratio:4 / 3; }
.media-frame--3x4{ aspect-ratio:3 / 4; }
.media-frame--1x1{ aspect-ratio:1 / 1; }
.media-frame__tag{
  position:absolute;
  left:16px;
  bottom:16px;
  padding:5px 13px;
  border-radius:999px;
  background:rgba(5,16,13,.78);
  border:1px solid rgba(184,255,60,.35);
  color:var(--lime);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
}
.media-frame__coord{
  position:absolute;
  right:14px;
  top:14px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:rgba(242,245,238,.55);
}

/* ---------- 11. 斜切转场 ---------- */
.rift{
  position:relative;
  height:clamp(44px,7vw,104px);
  overflow:hidden;
  pointer-events:none;
}
.rift::before{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  top:8%;
  bottom:8%;
  background:linear-gradient(100deg, rgba(22,70,58,.9), rgba(12,32,26,.35) 62%, transparent);
  border-top:1px solid rgba(184,255,60,.18);
  transform:rotate(-9deg);
}

/* ---------- 12. 显现与动效 ---------- */
html.is-reveal-ready [data-reveal]{
  opacity:0;
  transform:translateY(14px);
}
html.is-reveal-ready [data-reveal].is-in{
  opacity:1;
  transform:translateY(0);
  transition:opacity 400ms ease, transform 400ms ease;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.is-reveal-ready [data-reveal]{
    opacity:1;
    transform:none;
  }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}