/* ==========================================================================
   全民体育 · 共享样式表 /assets/site.css
   视觉主题：夜间球场战术板 —— 深草绿底 / 荧光青索引 / 橙红数据
   ========================================================================== */

:root{
  --ink:#08130F;
  --turf:#0E2A21;
  --turf-2:#1B4A38;
  --neon:#3DF5C8;
  --neon-2:#19C6A6;
  --flare:#FF5A2B;
  --amber:#FFB020;
  --chalk:#EAF4EF;
  --mist:#9BB0A6;
  --concrete:#2A3330;
  --paper:#F5F7F4;

  --font-display:"Source Han Sans SC Heavy","Noto Sans SC Heavy","Archivo Black","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Source Han Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --bd:3px;
  --shadow:8px 8px 0 var(--concrete);
  --shadow-sm:5px 5px 0 var(--concrete);
  --wrap:1240px;
  --gut:20px;
  --nav-bp:900px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark;}
body{
  min-height:100vh;
  background-color:var(--ink);
  background-image:
    linear-gradient(to right,rgba(61,245,200,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(61,245,200,.045) 1px,transparent 1px);
  background-size:32px 32px;
  color:var(--chalk);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
}
img,svg,video,canvas{display:block;max-width:100%;}
ul,ol{list-style-position:outside;}
a{color:var(--neon);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
button,input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;}

/* ---------- 中文排版层级 ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--chalk);
}
h1{font-size:clamp(2.4rem,6vw,4.6rem);}
h2{font-size:clamp(1.6rem,3.4vw,2.6rem);}
h3{font-size:1.25rem;line-height:1.3;letter-spacing:-.01em;}
p{text-wrap:pretty;}
.num,.panel__value,.stat__value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em;}

/* ---------- 布局骨架 ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
@media (min-width:720px){.wrap{padding-inline:32px;}}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;}
.grid > *{grid-column:1 / -1;}
@media (min-width:900px){
  .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-12{grid-column:span 12;}
}
.stack{display:grid;gap:16px;}
.cluster{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}

/* ---------- 跳转链接 ---------- */
.skip-link{
  position:fixed;
  left:16px;top:-120px;
  z-index:300;
  padding:10px 18px;
  background:var(--neon);
  color:var(--ink);
  font-weight:800;
  border:var(--bd) solid var(--ink);
  box-shadow:var(--shadow-sm);
  transition:top .2s ease;
}
.skip-link:focus{top:12px;text-decoration:none;}

/* ==========================================================================
   头部
   ========================================================================== */
.site-header{position:relative;z-index:60;}

/* 上层：品牌说明条 */
.brandbar{
  background:var(--ink);
  border-bottom:var(--bd) solid var(--turf-2);
  overflow:hidden;
  max-height:200px;
  transition:max-height .35s ease,opacity .3s ease,border-color .3s ease;
}
.site-header.is-tucked .brandbar{max-height:0;opacity:0;border-bottom-color:transparent;}
.brandbar__inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding-block:14px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--chalk);
  text-decoration:none;
}
.brand:hover{text-decoration:none;}
.brand__mark{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  background:var(--neon);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.15rem;
  transform:skewX(-6deg);
  box-shadow:4px 4px 0 var(--concrete);
}
.brand__text{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.25rem;
  letter-spacing:-.02em;
}
.brandbar__line{
  min-width:0;
  padding-left:16px;
  border-left:var(--bd) solid var(--turf-2);
  font-size:.95rem;
  line-height:1.5;
  color:var(--mist);
}
.brandbar__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  background:var(--flare);
  border:var(--bd) solid var(--flare);
  color:#1A0800;
  font-weight:800;
  font-size:.95rem;
  box-shadow:4px 4px 0 var(--concrete);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.brandbar__cta:hover{background:#FF7048;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--concrete);text-decoration:none;}
.brandbar__cta:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--concrete);}

/* 下层：吸顶栏目条 */
.navwrap{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(8,19,15,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-top:var(--bd) solid var(--turf-2);
  border-bottom:var(--bd) solid var(--turf-2);
}
.navwrap__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 12px;
  min-height:58px;
  padding-block:10px;
}
.navtoggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 14px;
  background:transparent;
  border:var(--bd) solid var(--turf-2);
  color:var(--chalk);
  font-weight:800;
  font-size:.95rem;
  cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.navtoggle:hover{border-color:var(--neon);color:var(--neon);}
.navtoggle__bars{position:relative;width:18px;height:12px;flex:none;}
.navtoggle__bars::before,
.navtoggle__bars::after{
  content:"";
  position:absolute;left:0;right:0;height:3px;
  background:currentColor;
  transition:transform .25s ease;
}
.navtoggle__bars::before{top:0;}
.navtoggle__bars::after{bottom:0;}
[data-open] .navtoggle__bars::before{transform:translateY(4.5px) rotate(45deg);}
[data-open] .navtoggle__bars::after{transform:translateY(-4.5px) rotate(-45deg);}

.navlist{
  list-style:none;
  margin:0;
  padding:0;
  display:none;
  flex-direction:column;
  flex-basis:100%;
  width:100%;
}
[data-open] .navlist{display:flex;}
.navlist__item{border-top:1px solid rgba(61,245,200,.16);}
.navlist__item:first-child{border-top:0;}
.navlist__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:100%;
  min-height:44px;
  padding:14px 4px;
  color:var(--chalk);
  font-weight:700;
  font-size:.98rem;
  text-decoration:none;
  transition:color .18s ease;
}
.navlist__link::after{
  content:"";
  position:absolute;
  left:4px;
  bottom:10px;
  width:26px;
  height:3px;
  background:var(--neon);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
}
.navlist__link:hover{color:var(--neon);text-decoration:none;}
.navlist__link:hover::after{transform:scaleX(1);}
.navlist__link[aria-current="page"]{color:var(--neon);}
.navlist__link[aria-current="page"]::after{transform:scaleX(1);}

@media (min-width:900px){
  .navwrap__inner{flex-wrap:nowrap;padding-block:0;gap:0;}
  .navtoggle{display:none;}
  .navlist{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    flex-basis:auto;
    gap:0;
    justify-content:space-between;
  }
  .navlist__item{flex:1 1 auto;border-top:0;text-align:center;}
  .navlist__link{justify-content:center;padding:18px 10px;font-size:1rem;}
  .navlist__link::after{left:10px;right:10px;bottom:10px;width:auto;}
}

/* 滚动进度 */
.scroll-meter{
  position:absolute;
  left:0;right:0;bottom:-3px;
  height:3px;
  overflow:hidden;
  pointer-events:none;
}
.scroll-meter__bar{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,var(--neon-2),var(--neon) 55%,var(--amber));
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* ==========================================================================
   页脚
   ========================================================================== */
.site-footer{
  position:relative;
  margin-top:80px;
  padding-top:56px;
  background:linear-gradient(120deg,var(--turf) 0%,var(--turf) 58%,#0B211A 58%,#0B211A 100%);
  border-top:var(--bd) solid var(--turf-2);
  color:var(--chalk);
}
.site-footer::before{
  content:"";
  position:absolute;
  left:0;top:-3px;
  width:100%;height:3px;
  background:repeating-linear-gradient(90deg,var(--neon) 0 28px,transparent 28px 56px);
  opacity:.65;
}
.footer__top{
  display:grid;
  grid-template-columns:1fr;
  gap:36px 40px;
  padding-bottom:44px;
}
@media (min-width:720px){.footer__top{grid-template-columns:1fr 1fr;}}
@media (min-width:1024px){.footer__top{grid-template-columns:1.4fr 1fr 1.1fr;}}
.footer__brand{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.4rem,3vw,2rem);
  letter-spacing:-.02em;
  line-height:1.1;
  margin-bottom:10px;
}
.footer__tagline{
  max-width:26em;
  margin-bottom:18px;
  color:var(--mist);
  font-size:.95rem;
  line-height:1.6;
}
.footer__title{
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(61,245,200,.25);
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--neon);
}
.footer__list{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.footer__list a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  color:var(--chalk);
  font-size:.95rem;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.footer__list a:hover{color:var(--neon);border-bottom-color:var(--neon);text-decoration:none;}
.footer__list--plain li{
  display:flex;
  align-items:center;
  min-height:36px;
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:.84rem;
  line-height:1.5;
  word-break:break-word;
}
.footer__col--contact .footer__list--plain li:last-child{color:var(--neon-2);}
.footer__bottom{
  padding-block:18px;
  border-top:1px solid rgba(61,245,200,.18);
  background:rgba(0,0,0,.28);
}
.footer__bottom-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 28px;
  color:var(--mist);
  font-size:.82rem;
}
.footer__meta{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.03em;}

/* ==========================================================================
   通用组件
   ========================================================================== */

/* 按钮 */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:12px 22px;
  background:var(--neon);
  border:var(--bd) solid var(--neon);
  color:var(--ink);
  font-weight:800;
  font-size:.98rem;
  letter-spacing:.02em;
  box-shadow:6px 6px 0 var(--concrete);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--concrete);text-decoration:none;background:#63F8D6;}
.btn:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--concrete);}
.btn--ghost{background:transparent;color:var(--neon);}
.btn--ghost:hover{background:rgba(61,245,200,.12);}
.btn--flare{background:var(--flare);border-color:var(--flare);color:#1A0800;}
.btn--flare:hover{background:#FF7048;}

/* 面包屑 */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  list-style:none;
  margin:0;
  padding:0;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--mist);
}
.crumbs li{display:flex;align-items:center;gap:10px;}
.crumbs li + li::before{content:"/";color:var(--turf-2);}
.crumbs a{color:var(--mist);text-decoration:none;}
.crumbs a:hover{color:var(--neon);text-decoration:none;}
.crumbs [aria-current="page"]{color:var(--chalk);}

/* 正文 */
.prose{max-width:74ch;}
.prose p{max-width:38em;margin-bottom:1.15em;}
.prose h2{margin:1.6em 0 .6em;}
.prose h3{margin:1.4em 0 .5em;}
.prose ul,.prose ol{padding-left:1.25em;margin-bottom:1.15em;}
.prose li{margin-bottom:.35em;}
.prose a{color:var(--neon);border-bottom:1px solid rgba(61,245,200,.45);}
.prose a:hover{text-decoration:none;border-bottom-color:var(--neon);}

/* 章节头 */
.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px 24px;
  margin-bottom:28px;
}
.section-head__text{max-width:52ch;color:var(--mist);font-size:.98rem;}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--neon);
}
.lede{
  max-width:34em;
  font-size:clamp(1.05rem,2vw,1.3rem);
  line-height:1.7;
  color:var(--mist);
}
.sec-index{
  display:inline-block;
  padding:3px 10px;
  background:var(--neon);
  color:var(--ink);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.1em;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.rule{
  height:3px;
  border:0;
  margin:40px 0;
  background:repeating-linear-gradient(90deg,var(--turf-2) 0 18px,transparent 18px 36px);
}

/* 数据面板 */
.panel{
  position:relative;
  padding:22px;
  background:var(--turf);
  border:var(--bd) solid var(--concrete);
  box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.panel:hover{
  transform:translateY(-4px);
  border-color:var(--neon);
  box-shadow:8px 14px 0 var(--concrete);
}
.panel--accent{border-color:var(--neon);}
.panel--flat{box-shadow:var(--shadow-sm);}
.panel__label{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--neon);
}
.panel__value{
  display:block;
  font-size:clamp(1.9rem,5vw,3rem);
  line-height:1;
  color:var(--chalk);
}

.stat{display:flex;flex-direction:column;gap:4px;}
.stat__label{
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.12em;
  color:var(--mist);
}
.stat__value{
  font-size:clamp(1.6rem,4vw,2.6rem);
  line-height:1;
  color:var(--neon);
}
.stat__value--flare{color:var(--flare);}
.stat__value--amber{color:var(--amber);}

/* 斜切过渡带 */
.slash-band{
  position:relative;
  padding:28px 0;
  background:linear-gradient(100deg,var(--turf) 0%,var(--turf) 62%,var(--turf-2) 62%,var(--turf-2) 100%);
  border-top:var(--bd) solid var(--concrete);
  border-bottom:var(--bd) solid var(--concrete);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),0 100%);
}

/* 图片容器 */
.shot{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:var(--bd) solid var(--concrete);
  background:linear-gradient(155deg,#12382B 0%,var(--turf) 45%,var(--ink) 100%);
  box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.shot::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(115deg,rgba(61,245,200,.07) 0 2px,transparent 2px 26px),
    radial-gradient(120% 90% at 12% 0%,rgba(61,245,200,.20),transparent 60%),
    radial-gradient(90% 80% at 100% 100%,rgba(255,90,43,.14),transparent 65%);
}
.shot:hover{transform:translateY(-4px);border-color:var(--neon);box-shadow:8px 14px 0 var(--concrete);}
.shot img{width:100%;height:100%;object-fit:cover;}
.shot--wide{aspect-ratio:21 / 9;}
.shot--tall{aspect-ratio:4 / 5;}
.shot--square{aspect-ratio:1 / 1;}
.shot__cap{
  margin-top:10px;
  color:var(--mist);
  font-size:.82rem;
  line-height:1.6;
}

/* 筛选标签 */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:6px 14px;
  background:transparent;
  border:2px solid var(--turf-2);
  color:var(--chalk);
  font-family:var(--font-mono);
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.chip:hover{border-color:var(--neon);color:var(--neon);}
.chip[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:var(--ink);}

/* 折叠问答 */
.qa{
  background:var(--turf);
  border:var(--bd) solid var(--concrete);
  box-shadow:var(--shadow-sm);
}
.qa + .qa{margin-top:14px;}
.qa > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:44px;
  padding:16px 20px;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:-.01em;
  list-style:none;
}
.qa > summary::-webkit-details-marker{display:none;}
.qa > summary::after{
  content:"＋";
  flex:none;
  font-family:var(--font-mono);
  font-size:1rem;
  color:var(--neon);
}
.qa[open] > summary::after{content:"－";}
.qa[open] > summary{border-bottom:1px solid rgba(61,245,200,.22);}
.qa__body{padding:16px 20px 22px;color:var(--mist);font-size:.95rem;}
.qa__body p{max-width:38em;}

/* 浅底分区 */
.zone-light{
  background:var(--paper);
  color:#233029;
}
.zone-light h1,.zone-light h2,.zone-light h3{color:#08130F;}
.zone-light a{color:#0E6B57;}
.zone-light .lede,.zone-light .section-head__text{color:#4A5A52;}
.zone-light .crumbs,.zone-light .crumbs a{color:#4A5A52;}
.zone-light .crumbs [aria-current="page"]{color:#08130F;}
.zone-light .prose a{border-bottom-color:rgba(14,107,87,.45);}

/* ==========================================================================
   动效克制
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}