/* ===========================================================
   球速体育入口 — 共享样式 /assets/site.css
   夜间记分牌体系：深空黑底 + 荧光绿数字 + 1px 精密网格
   =========================================================== */

:root{
  --ink:#07090C;
  --ink-2:#12171C;
  --paper:#F3EFE4;
  --lime:#B7FF2E;
  --blue:#33CFFF;
  --orange:#FF6A1A;
  --grey:#93A0AC;
  --line:#262C33;
  --lime-dark:#5E8A0F;
  --layer:#0C1A26;

  --rail-w:84px;
  --topbar-h:48px;
  --shear:8deg;

  --font-display:'Oswald','Arial Narrow','Impact','Source Han Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,Menlo,monospace;
  --font-body:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;

  --ease:cubic-bezier(.2,.6,.2,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topbar-h) + 12px);
}
@media (min-width:1024px){
  html{scroll-padding-top:24px;}
}

body{
  margin:0;
  min-height:100vh;
  padding-top:var(--topbar-h);
  background-color:var(--ink);
  background-image:
    linear-gradient(to right,rgba(38,44,51,.7) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(38,44,51,.7) 1px,transparent 1px);
  background-size:72px 72px;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:1024px){
  body{padding-top:0;padding-left:var(--rail-w);}
}
body[data-nav-open="true"]{overflow:hidden;}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
img,svg,video{display:block;max-width:100%;}
hr{border:0;}
table{border-collapse:collapse;width:100%;}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

::selection{background:var(--lime);color:var(--ink);}

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

/* ---------- 排版工具 ---------- */
.t-display{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:-.02em;
  transform:scaleX(.94);
  transform-origin:left center;
}
h1.t-display{font-size:clamp(2.4rem,7vw,6.5rem);}
h2.t-display{font-size:clamp(1.6rem,4vw,2.6rem);}
h3.t-display{font-size:clamp(1.3rem,2.6vw,1.7rem);}

.t-num{
  font-family:var(--font-mono);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1;
  letter-spacing:-.01em;
}
.t-num--xl{font-size:clamp(3rem,9vw,6.5rem);color:var(--lime);}
.t-num--lg{font-size:clamp(2rem,5vw,3.4rem);color:var(--lime);}

.anno{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grey);
}
.anno--vertical{writing-mode:vertical-rl;letter-spacing:.32em;}

.lede{
  font-size:clamp(1.02rem,1.6vw,1.15rem);
  line-height:1.75;
  color:rgba(243,239,228,.82);
  max-width:68ch;
}

.prose{max-width:68ch;font-size:16px;line-height:1.75;}
.prose p+p{margin-top:1.1em;}
.prose h2{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:2.2em 0 .7em;
}
.prose h3{font-size:1.15rem;margin:1.8em 0 .5em;color:var(--lime);}
.prose ul,.prose ol{margin:1em 0;}
.prose li{position:relative;padding-left:1.3em;}
.prose li+li{margin-top:.5em;}
.prose li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1px;background:var(--lime);
}
.prose a{color:var(--paper);border-bottom:1px solid var(--lime);}

/* ---------- 容器与分区 ---------- */
.wrap{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
}
@media (min-width:768px){.wrap{padding:0 32px;}}
@media (min-width:1024px){.wrap{padding:0 40px;}}

.section{padding:56px 0;}
@media (min-width:1024px){.section{padding:88px 0;}}
.section--ink{background:var(--ink);}
.section--panel{
  background:var(--ink-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section--paper{
  background:var(--paper);
  background-image:none;
  color:var(--ink);
}
.section--paper .anno{color:#5c6570;}
.section--paper .lede{color:rgba(7,9,12,.76);}
.section--paper h2.t-display{color:var(--ink);}
.section--paper .rule{background:rgba(7,9,12,.16);}

/* ---------- 网格 ---------- */
.grid{display:grid;gap:20px;}
.grid--tight{gap:12px;}
@media (min-width:640px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1024px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;}
@media (max-width:1023px){
  .grid-12{grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media (max-width:639px){
  .grid-12{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
}

/* ---------- 分隔线 ---------- */
.rule{height:1px;background:var(--line);border:0;width:100%;}
.rule--accent{background:linear-gradient(to right,var(--lime) 0 56px,var(--line) 56px);}

/* ---------- 面板 ---------- */
.panel{
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:22px;
}
.panel--paper{
  background:var(--paper);
  color:var(--ink);
  border-color:rgba(7,9,12,.14);
}
.panel--shear{
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border:1px solid var(--line);
  background:var(--ink-2);
  color:var(--grey);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  white-space:nowrap;
}
.tag--live{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.tag--info{background:transparent;border-color:var(--blue);color:var(--blue);}
.tag--alert{background:transparent;border-color:var(--orange);color:var(--orange);}

/* ---------- 数据块 ---------- */
.stat{display:flex;flex-direction:column;gap:8px;}
.stat-value{
  font-family:var(--font-mono);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1;
  font-size:clamp(2rem,5vw,3.4rem);
  color:var(--lime);
}
.stat-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--grey);
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 24px 13px 20px;
  border:1px solid var(--line);
  border-left:3px solid var(--lime);
  background:var(--ink-2);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.14em;
  line-height:1.2;
  transition:background-color .24s ease,color .24s ease,border-color .24s ease;
}
.btn:hover{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.btn--solid{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.btn--solid:hover{background:var(--lime-dark);border-color:var(--lime-dark);color:var(--paper);}
.btn--ghost{background:transparent;border-left-color:var(--blue);color:var(--blue);}
.btn--ghost:hover{background:var(--blue);border-color:var(--blue);color:var(--ink);}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- 面包屑 ---------- */
.crumbs{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;}
.crumbs ul{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:18px 0;}
.crumbs li{display:flex;align-items:center;gap:10px;}
.crumbs li+li::before{content:"/";color:var(--line);}
.crumbs a{
  color:var(--grey);
  border-bottom:1px solid transparent;
  transition:color .22s ease,border-color .22s ease;
}
.crumbs a:hover{color:var(--lime);border-bottom-color:var(--lime);}
.crumbs [aria-current="page"]{color:var(--paper);}

/* ---------- 图片容器基础规则 ---------- */
.media-frame{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border:1px solid var(--line);
  background-color:var(--ink-2);
  background-image:
    linear-gradient(to right,rgba(51,207,255,.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(51,207,255,.10) 1px,transparent 1px);
  background-size:32px 32px;
}
.media-frame img{width:100%;height:100%;object-fit:cover;}
.media-frame--16x9{aspect-ratio:16/9;}
.media-frame--4x3{aspect-ratio:4/3;}
.media-frame--3x2{aspect-ratio:3/2;}
.media-frame--1x1{aspect-ratio:1/1;}
.media-frame--21x9{aspect-ratio:21/9;}
.media-frame--shear{
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}
.media-frame__tag{
  position:absolute;
  left:0;
  bottom:0;
  padding:6px 10px;
  background:var(--ink);
  color:var(--lime);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
}
.media-frame[data-placeholder]::after{
  content:attr(data-placeholder);
  position:absolute;
  right:12px;
  bottom:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--grey);
  text-align:right;
}
.media-caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--grey);
}

/* ---------- 显现 ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .42s ease-out,transform .42s ease-out;
}
[data-reveal].is-visible{opacity:1;transform:none;}

/* ===========================================================
   共享外壳 — 头部
   =========================================================== */
.site-header{position:relative;z-index:70;}

.skip-link{
  position:fixed;
  left:8px;
  top:8px;
  z-index:120;
  transform:translateY(-200%);
  padding:10px 16px;
  background:var(--lime);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.1em;
  transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);}

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:2px;
  width:0;
  background:var(--lime);
  z-index:90;
  pointer-events:none;
}
@media (min-width:1024px){
  .scroll-progress{left:var(--rail-w);}
}

/* 移动端顶部细条 */
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--topbar-h);
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  background:var(--ink-2);
  border-bottom:1px solid var(--line);
}
@media (min-width:1024px){
  .topbar{display:none;}
}
.topbar-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:15px;
  letter-spacing:.06em;
  color:var(--paper);
  white-space:nowrap;
}
.topbar-mark{
  display:block;
  width:10px;
  height:10px;
  background:var(--lime);
  transform:skewX(calc(var(--shear) * -1));
}
.topbar-tools{display:flex;align-items:center;gap:10px;}
.topbar-round{
  padding:3px 8px;
  border:1px solid var(--line);
  color:var(--lime);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
}
.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--line);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease;
}
.nav-toggle:hover{border-color:var(--lime);color:var(--lime);}
.nav-toggle[aria-expanded="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.nav-toggle-lines{display:flex;flex-direction:column;gap:3px;width:16px;}
.nav-toggle-lines i{display:block;height:2px;background:currentColor;}
.nav-toggle-text{white-space:nowrap;}

/* 侧边轨道 / 移动抽屉 */
.rail{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--rail-w);
  z-index:70;
  display:flex;
  flex-direction:column;
  background:var(--ink-2);
  border-right:1px solid var(--line);
  overflow-y:auto;
  overscroll-behavior:contain;
}
@media (max-width:1023px){
  .rail{
    top:var(--topbar-h);
    width:min(84vw,320px);
    z-index:75;
    transform:translateX(-101%);
    visibility:hidden;
    transition:transform .28s var(--ease),visibility .28s linear;
  }
  .rail[data-open]{transform:translateX(0);visibility:visible;}
}

.rail-head{border-bottom:1px solid var(--line);}
.rail-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:16px 8px;
  transition:background-color .22s ease;
}
.rail-brand:hover{background:rgba(183,255,46,.08);}
.rail-brand-cn{
  font-family:var(--font-display);
  font-weight:900;
  font-size:20px;
  line-height:1;
  letter-spacing:.04em;
  color:var(--lime);
}
.rail-brand-en{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.24em;
  color:var(--grey);
}

.rail-rounds{padding:14px 10px;border-bottom:1px solid var(--line);}
.rail-rounds-title{
  margin:0 0 8px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--grey);
}
.rail-rounds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;}
.round-btn{
  padding:6px 0;
  border:1px solid var(--line);
  background:transparent;
  color:var(--grey);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-align:center;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.round-btn:hover{border-color:var(--lime);color:var(--lime);}
.round-btn[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink);}

.rail-menu{flex:1 1 auto;display:flex;flex-direction:column;padding:6px 0;}
.rail-link{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:58px;
  padding:8px 4px;
  color:var(--grey);
  transition:background-color .22s ease,color .22s ease;
}
.rail-link::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--lime);
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform .24s var(--ease),background-color .24s ease;
}
.rail-link:hover{background:rgba(51,207,255,.07);color:var(--paper);}
.rail-link:hover::before{transform:scaleY(1);background:var(--blue);}
.rail-index{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--grey);
  transition:color .22s ease;
}
.rail-label{
  font-size:12px;
  letter-spacing:.1em;
  color:inherit;
  opacity:.72;
  transition:color .22s ease,letter-spacing .24s var(--ease),opacity .22s ease;
}
.rail-link:hover .rail-label{color:var(--lime);letter-spacing:.2em;opacity:1;}
.rail-link:hover .rail-index{color:var(--blue);}
.rail-link[aria-current="page"]{background:rgba(183,255,46,.1);color:var(--lime);}
.rail-link[aria-current="page"]::before{transform:scaleY(1);}
.rail-link[aria-current="page"] .rail-index{color:var(--lime);}
.rail-link[aria-current="page"] .rail-label{opacity:1;}

.rail-foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:12px 10px 16px;
  border-top:1px solid var(--line);
}
.rail-fav{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 4px;
  border:1px solid var(--line);
  color:var(--grey);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease;
}
.rail-fav-mark{
  display:block;
  width:8px;
  height:8px;
  border:1px solid currentColor;
  transform:rotate(45deg);
  transition:background-color .22s ease;
}
.rail-fav:hover{border-color:var(--lime);color:var(--lime);}
.rail-fav[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.rail-fav[aria-pressed="true"] .rail-fav-mark{background:var(--ink);}
.rail-fav-text{white-space:nowrap;}
.rail-status{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--grey);
  text-align:center;
}
.status-dot{
  flex:none;
  width:6px;
  height:6px;
  background:var(--lime);
  box-shadow:0 0 0 3px rgba(183,255,46,.18);
}

@media (max-width:1023px){
  .rail-brand{align-items:flex-start;padding:14px 16px;}
  .rail-rounds{padding:14px 16px;}
  .rail-rounds-title{text-align:left;}
  .rail-rounds-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .rail-menu{padding:8px 0;}
  .rail-link{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    padding:6px 16px;
  }
  .rail-label{order:1;font-size:15px;opacity:1;}
  .rail-index{order:2;font-size:11px;}
  .rail-foot{align-items:stretch;padding:14px 16px 20px;}
  .rail-status{justify-content:center;}
}

.nav-scrim{
  position:fixed;
  inset:0;
  z-index:72;
  background:rgba(7,9,12,.6);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s linear;
}
.nav-scrim[data-open]{opacity:1;visibility:visible;}
@media (min-width:1024px){
  .nav-scrim{display:none;}
}

/* ===========================================================
   共享外壳 — 页脚
   =========================================================== */
.site-footer{
  position:relative;
  background:var(--ink-2);
  border-top:1px solid var(--line);
  padding:44px 0 26px;
}
.footer-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.footer-logo{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--paper);
  transition:color .22s ease;
}
.footer-logo:hover{color:var(--lime);}
.footer-note{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--grey);
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  padding:26px 0;
}
@media (min-width:640px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1024px){
  .footer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
}
.footer-col{min-width:0;}
.footer-title{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--lime);
}
.footer-list li+li{margin-top:8px;}
.footer-list a{
  display:inline-block;
  padding-bottom:2px;
  font-size:14px;
  color:rgba(243,239,228,.78);
  background-image:linear-gradient(var(--lime),var(--lime));
  background-repeat:no-repeat;
  background-size:0 1px;
  background-position:0 100%;
  transition:color .22s ease,background-size .24s ease;
}
.footer-list a:hover{color:var(--lime);background-size:100% 1px;}
.footer-meta{
  display:grid;
  gap:8px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--grey);
}
@media (min-width:900px){
  .footer-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;}
}
.footer-meta-item{display:flex;flex-wrap:wrap;gap:10px;}
.footer-meta-key{color:var(--blue);min-width:64px;}
.footer-meta-item--copy{color:rgba(147,160,172,.7);}

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