/* A8体育 · 共享站点样式 /assets/site.css */

:root{
  --c-void:#06080B;
  --c-panel:#10151C;
  --c-graphite:#1E2732;
  --c-cyan:#2BE8D6;
  --c-teal:#0B5F5C;
  --c-lava:#FF6A1F;
  --c-green:#86F35A;
  --c-mist:#EDF1F4;
  --c-rock:#8C97A3;
  --c-clay:#C0492B;

  --rail:72px;
  --header-h:80px;
  --shell:1240px;
  --gap:24px;
  --r:8px;

  --font-display:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}

body{
  margin:0;
  padding-left:var(--rail);
  min-height:100vh;
  background:
    radial-gradient(120% 62% at 84% -12%, rgba(43,232,214,.10), transparent 62%),
    radial-gradient(90% 55% at -6% 104%, rgba(255,106,31,.08), transparent 66%),
    var(--c-void);
  color:var(--c-mist);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;}
svg{display:block;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;letter-spacing:-.01em;line-height:1.1;margin:0;}
p{margin:0 0 1.2em;}
ul,ol{margin:0;padding:0;}
::selection{background:rgba(43,232,214,.28);color:#fff;}

:focus-visible{
  outline:2px solid var(--c-cyan);
  outline-offset:4px;
  border-radius:4px;
}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* ---------- 左侧坐标栏 ---------- */
.coord-rail{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--rail);
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:14px 0 16px;
  background:linear-gradient(180deg,#080B10 0%,#06080B 42%,#0A0E13 100%);
  border-right:1px solid var(--c-graphite);
}
.coord-rail__cap,
.coord-rail__foot{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--c-cyan);
  border:1px solid rgba(43,232,214,.32);
  border-radius:4px;
  padding:3px 5px;
  background:rgba(43,232,214,.07);
  line-height:1;
}
.coord-rail__foot{color:var(--c-rock);border-color:var(--c-graphite);background:rgba(30,39,50,.55);}
.coord-rail__track{
  position:relative;
  flex:1 1 auto;
  width:3px;
  margin:4px 0;
  border-radius:2px;
  background:repeating-linear-gradient(180deg,var(--c-graphite) 0 5px,transparent 5px 12px);
  overflow:hidden;
}
.coord-rail__progress{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:0;
  border-radius:2px;
  background:linear-gradient(180deg,var(--c-cyan),var(--c-teal));
  box-shadow:0 0 8px rgba(43,232,214,.65);
  transition:height .12s linear;
}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:10px;
  left:calc(var(--rail) + 10px);
  z-index:200;
  transform:translateY(-180%);
  padding:10px 18px;
  background:var(--c-cyan);
  color:#04110F;
  font-weight:800;
  font-size:14px;
  border-radius:6px;
  text-decoration:none;
  transition:transform .18s var(--ease);
}
.skip-link:focus{transform:translateY(0);}

/* ---------- 头部 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(6,8,11,.94);
  border-bottom:1px solid var(--c-graphite);
}
.header-shell{
  width:min(calc(100% - 48px),var(--shell));
  margin-inline:auto;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  transition:min-height .2s var(--ease);
}
.site-header.is-compact .header-shell{min-height:60px;}

.header-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  text-decoration:none;
  color:var(--c-mist);
  padding:4px 12px 4px 0;
}
.brand-mark{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  border:1.5px solid var(--c-cyan);
  border-radius:6px 6px 6px 2px;
  background:rgba(43,232,214,.08);
  color:var(--c-cyan);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.header-brand:hover .brand-mark{background:rgba(43,232,214,.16);border-color:#5BF2E4;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-name{
  font-family:var(--font-display);
  font-weight:900;
  font-size:19px;
  letter-spacing:.06em;
  color:var(--c-mist);
}
.brand-tag{
  margin-top:4px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--c-rock);
  white-space:nowrap;
}

.header-nav{
  display:flex;
  align-items:center;
  gap:20px;
}
.nav-list{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:6px;
  color:var(--c-rock);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease);
}
.nav-link::before{
  content:"";
  width:6px;height:6px;
  flex:0 0 auto;
  border-radius:1px;
  background:var(--c-graphite);
  transition:background-color .18s var(--ease);
}
.nav-link:hover{
  color:var(--c-mist);
  background:rgba(43,232,214,.06);
  border-color:rgba(43,232,214,.28);
}
.nav-link:hover::before{background:var(--c-cyan);}
.nav-link[aria-current="page"]{
  color:var(--c-mist);
  background:rgba(43,232,214,.10);
  border-color:rgba(43,232,214,.38);
}
.nav-link[aria-current="page"]::before{background:var(--c-green);box-shadow:0 0 6px rgba(134,243,90,.7);}

.header-tools{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:20px;
  border-left:1px solid var(--c-graphite);
}
.icon-link{
  display:grid;
  place-items:center;
  width:38px;height:38px;
  border:1px solid var(--c-graphite);
  border-radius:6px;
  color:var(--c-rock);
  background:rgba(16,21,28,.7);
  transition:color .18s var(--ease),border-color .18s var(--ease),background-color .18s var(--ease);
}
.icon-link svg{
  width:16px;height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}
.icon-link:hover{
  color:var(--c-cyan);
  border-color:rgba(43,232,214,.55);
  background:rgba(43,232,214,.08);
}

/* ---------- 移动导航按钮 ---------- */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:var(--c-panel);
  border:1px solid var(--c-graphite);
  border-radius:6px;
  color:var(--c-mist);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.12em;
  cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.nav-toggle:hover{border-color:rgba(43,232,214,.5);color:var(--c-cyan);}
.nav-toggle__bars{display:grid;gap:4px;width:18px;}
.nav-toggle__bars i{
  display:block;
  height:2px;
  border-radius:1px;
  background:var(--c-cyan);
  transition:transform .18s var(--ease),opacity .18s var(--ease);
}
.site-header[data-open] .nav-toggle__bars i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.site-header[data-open] .nav-toggle__bars i:nth-child(2){opacity:0;}
.site-header[data-open] .nav-toggle__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 22px;
  border:1.5px solid transparent;
  border-radius:8px 8px 8px 2px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:15px;
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.btn--primary{
  background:var(--c-lava);
  border-color:var(--c-lava);
  color:#1A0A02;
  box-shadow:0 8px 20px -10px rgba(255,106,31,.85);
}
.btn--primary:hover{
  background:#FF8244;
  border-color:#FF8244;
  transform:translateY(-2px);
  box-shadow:0 12px 26px -10px rgba(255,106,31,.95);
}
.btn--ghost{
  background:transparent;
  border-color:rgba(43,232,214,.45);
  color:var(--c-cyan);
}
.btn--ghost:hover{
  background:rgba(43,232,214,.10);
  border-color:var(--c-cyan);
  transform:translateY(-2px);
}
.btn--sm{padding:9px 16px;font-size:13.5px;border-radius:6px 6px 6px 2px;}

/* ---------- 页脚 ---------- */
.site-footer{
  margin-top:96px;
  background:linear-gradient(180deg,#080B10 0%,#06080B 70%);
  border-top:1px solid var(--c-graphite);
}
.footer-shell{
  width:min(calc(100% - 48px),var(--shell));
  margin-inline:auto;
  padding:52px 0 26px;
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding-bottom:26px;
  border-bottom:1px solid var(--c-graphite);
}
.footer-brand__link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--c-mist);
}
.footer-brand__link .brand-mark{width:36px;height:36px;font-size:13px;}
.footer-brand__note{
  margin:10px 0 0;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--c-rock);
}
.footer-legend{display:flex;flex-wrap:wrap;gap:16px;}
.legend__item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--c-rock);
}
.legend__swatch{
  display:inline-block;
  width:10px;height:10px;
  border-radius:2px;
  background:var(--c-graphite);
}
.legend__swatch--live{background:var(--c-green);}
.legend__swatch--soon{background:var(--c-lava);}
.legend__swatch--end{background:var(--c-clay);}

.footer-map{
  display:grid;
  grid-template-columns:1.05fr 1fr 1fr 1.35fr;
  gap:34px 28px;
  padding:34px 0 30px;
  border-bottom:1px solid var(--c-graphite);
}
.footer-col__title{
  margin:0 0 14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(43,232,214,.22);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-cyan);
}
.footer-list{list-style:none;display:grid;gap:9px;}
.footer-link{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  color:var(--c-rock);
  font-size:14.5px;
  text-decoration:none;
  transition:color .18s var(--ease),padding-left .18s var(--ease);
}
.footer-link::before{
  content:"";
  width:5px;height:5px;
  flex:0 0 auto;
  border-radius:1px;
  background:var(--c-graphite);
  transform:translateY(-2px);
  transition:background-color .18s var(--ease);
}
.footer-link:hover{color:var(--c-cyan);padding-left:4px;}
.footer-link:hover::before{background:var(--c-cyan);}

.footer-meta{margin:0;display:grid;gap:10px;}
.footer-meta__row{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:baseline;}
.footer-meta dt{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--c-rock);
}
.footer-meta dd{
  margin:0;
  font-family:var(--font-mono);
  font-size:13.5px;
  letter-spacing:.02em;
  color:var(--c-mist);
  word-break:break-word;
}
.footer-note{
  margin:14px 0 0;
  max-width:34em;
  font-size:12.5px;
  line-height:1.7;
  color:var(--c-rock);
}
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 24px;
  padding-top:20px;
}
.footer-legal__line{
  margin:0;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--c-rock);
}

/* ---------- 页面基础容器 ---------- */
.page-wrap,
.shell{
  width:min(calc(100% - 48px),var(--shell));
  margin-inline:auto;
}
.section{padding:64px 0;}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-cyan);
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--c-cyan);}
.stack{display:grid;gap:16px;}
.stack--lg{display:grid;gap:28px;}
.prose{max-width:38em;}
.prose p{margin:0 0 1.2em;}
.prose h2{font-size:clamp(24px,3vw,34px);margin:0 0 16px;}
.prose h3{font-size:20px;margin:28px 0 12px;}
.ink{color:var(--c-mist);border-bottom:2px solid rgba(43,232,214,.5);padding-bottom:1px;}
.mono{font-family:var(--font-mono);font-size:.92em;letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:var(--c-cyan);
}

/* ---------- 栅格 ---------- */
.grid{display:grid;gap:var(--gap);}
.grid--7-5{grid-template-columns:7fr 5fr;}
.grid--4-8{grid-template-columns:4fr 8fr;}
.grid--3{grid-template-columns:repeat(3,1fr);}

/* ---------- 面板 ---------- */
.panel{
  position:relative;
  padding:22px;
  background:var(--c-panel);
  border:1px solid var(--c-graphite);
  border-radius:var(--r);
  transition:border-color .2s var(--ease),transform .2s var(--ease),background-color .2s var(--ease);
}
.panel:hover{
  border-color:rgba(43,232,214,.45);
  background:#121822;
  transform:translateY(-2px);
}
.panel--cut{border-radius:14px 14px 14px 3px;}

/* ---------- 面包屑 ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:22px 0 0;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--c-rock);
}
.breadcrumb a{color:var(--c-rock);text-decoration:none;transition:color .18s var(--ease);}
.breadcrumb a:hover{color:var(--c-cyan);}
.breadcrumb__sep{color:var(--c-graphite);}
.breadcrumb [aria-current="page"]{color:var(--c-mist);}

/* ---------- 状态标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border:1px solid var(--c-graphite);
  border-radius:4px;
  background:rgba(30,39,50,.6);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--c-rock);
  white-space:nowrap;
}
.tag--live{color:var(--c-green);border-color:rgba(134,243,90,.35);background:rgba(134,243,90,.08);}
.tag--soon{color:var(--c-lava);border-color:rgba(255,106,31,.38);background:rgba(255,106,31,.08);}
.tag--end{color:var(--c-clay);border-color:rgba(192,73,43,.42);background:rgba(192,73,43,.10);}
.tag--info{color:var(--c-cyan);border-color:rgba(43,232,214,.35);background:rgba(43,232,214,.08);}

/* ---------- 图片容器基础规则 ---------- */
.figure{margin:0;display:grid;gap:10px;}
.figure__media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid var(--c-graphite);
  border-radius:var(--r);
  background:
    radial-gradient(120% 120% at 18% 0%,rgba(43,232,214,.18),transparent 56%),
    radial-gradient(110% 110% at 92% 100%,rgba(255,106,31,.20),transparent 58%),
    #0A0E13;
}
.figure__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(237,241,244,.055) 0 1px,transparent 1px 4px);
}
.figure__media img,
.figure__media video,
.figure__media picture{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.95) contrast(1.04);
}
.figure__caption{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--c-rock);
}
.figure--wide .figure__media{aspect-ratio:21/9;}
.figure--square .figure__media{aspect-ratio:1/1;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  :root{--rail:0px;--header-h:70px;}
  .coord-rail{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 20px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    background:#080B10;
    border-bottom:1px solid var(--c-graphite);
    transition:max-height .24s var(--ease),opacity .18s var(--ease),visibility .18s var(--ease);
  }
  .site-header[data-open] .header-nav{
    max-height:82vh;
    overflow-y:auto;
    opacity:1;
    visibility:visible;
    padding-bottom:20px;
  }
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding-top:8px;}
  .nav-link{
    padding:14px 12px;
    font-size:16px;
    border-radius:6px;
    border-bottom:1px solid rgba(30,39,50,.75);
  }
  .nav-link:hover,.nav-link[aria-current="page"]{border-bottom-color:rgba(43,232,214,.35);}
  .header-tools{
    padding:16px 0 0;
    border-left:0;
    border-top:1px solid var(--c-graphite);
    flex-wrap:wrap;
  }
  .grid--7-5,.grid--4-8,.grid--3{grid-template-columns:1fr;}
  .footer-map{grid-template-columns:1fr 1fr;}
  .footer-shell{padding-top:42px;}
}

@media (max-width:640px){
  body{font-size:16px;}
  .header-shell,
  .page-wrap,
  .shell,
  .footer-shell{width:calc(100% - 32px);}
  .brand-tag{font-size:10px;letter-spacing:.08em;}
  .brand-mark{width:36px;height:36px;font-size:13px;}
  .brand-name{font-size:17px;}
  .section{padding:44px 0;}
  .footer-map{grid-template-columns:1fr;gap:28px;}
  .footer-meta__row{grid-template-columns:1fr;gap:2px;}
  .footer-legal{flex-direction:column;align-items:flex-start;}
  .site-footer{margin-top:64px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .panel:hover{transform:none;}
  .btn:hover{transform:none;}
}