/* =========================================================
   BSPORTS 体育 · 共享站点样式表  /assets/site.css
   深墨绿夜景 + 蓝图网格 + 电子记分牌
   ========================================================= */

/* ---------- 1. CSS 变量 ---------- */
:root{
  --bs-deep:#0A1F1A;
  --bs-deep-2:#10312A;
  --bs-moss:#1C3F34;
  --bs-rock:#8A968E;
  --bs-cream:#EDE7DA;
  --bs-cyan:#35E0C8;
  --bs-cyan-deep:#0FA894;
  --bs-alert:#FF5A34;
  --bs-clay:#C4744F;
  --bs-char:#061210;

  --bs-hair:rgba(138,150,142,.26);
  --bs-hair-soft:rgba(138,150,142,.14);
  --bs-grid-line:rgba(138,150,142,.10);

  --bs-head:"Helvetica Neue","Arial Narrow","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --bs-body:"PingFang SC","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --bs-mono:ui-monospace,"SFMono-Regular","JetBrains Mono","IBM Plex Mono",Menlo,Consolas,monospace;

  --bs-wrap:1280px;
  --bs-gutter:clamp(18px,4vw,48px);
  --bs-radius:2px;

  --bs-fast:120ms;
  --bs-mid:260ms;
  --bs-slow:520ms;
  --bs-ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:118px;
}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,figcaption,blockquote,fieldset{margin:0;padding:0;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
img,svg,video{display:block;max-width:100%;}
table{border-collapse:collapse;width:100%;}
i,em{font-style:normal;}

/* ---------- 3. 基础排版 ---------- */
body{
  background:var(--bs-deep);
  color:var(--bs-cream);
  font-family:var(--bs-body);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 蓝图坐标网格 */
body::before{
  content:"";
  position:fixed;
  inset:-12vh 0 -12vh 0;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0,var(--bs-parallax,0px),0);
  background-image:
    linear-gradient(to right,var(--bs-grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--bs-grid-line) 1px,transparent 1px);
  background-size:72px 72px;
}

::selection{background:var(--bs-cyan);color:var(--bs-deep);}

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

#main-content{position:relative;z-index:1;}

/* ---------- 4. 通用容器与网格 ---------- */
.bs-wrap{
  width:100%;
  max-width:var(--bs-wrap);
  margin-inline:auto;
  padding-inline:var(--bs-gutter);
}

.bs-section{
  position:relative;
  z-index:1;
  padding-block:clamp(48px,7vw,104px);
}

.bs-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}

.bs-hair{border-top:1px solid var(--bs-hair);}

/* ---------- 5. 标题 / 注释 / 数字 ---------- */
.bs-h1{
  font-family:var(--bs-head);
  font-weight:900;
  font-size:clamp(2rem,4.6vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.02em;
}
.bs-h2{
  font-family:var(--bs-head);
  font-weight:800;
  font-size:clamp(1.5rem,3vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.015em;
}
.bs-h3{
  font-family:var(--bs-head);
  font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.45rem);
  line-height:1.28;
  letter-spacing:-.01em;
}

.bs-anno{
  font-family:var(--bs-mono);
  font-size:12px;
  letter-spacing:.28em;
  line-height:1.6;
  color:var(--bs-rock);
  text-transform:uppercase;
}
.bs-anno--v{
  writing-mode:vertical-rl;
  text-orientation:mixed;
}

.bs-num{
  font-family:var(--bs-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--bs-cream);
}
.bs-num--key{
  color:var(--bs-cyan);
  border-bottom:2px solid var(--bs-cyan);
  padding-bottom:3px;
}

/* ---------- 6. 按钮 ---------- */
.bs-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 22px;
  border:1px solid var(--bs-cyan);
  border-radius:999px;
  background:transparent;
  color:var(--bs-cyan);
  font-family:var(--bs-mono);
  font-size:12px;
  letter-spacing:.18em;
  line-height:1.2;
  transition:background var(--bs-fast) var(--bs-ease),
             color var(--bs-fast) var(--bs-ease),
             border-color var(--bs-fast) var(--bs-ease);
}
.bs-btn:hover{background:var(--bs-cyan);color:var(--bs-deep);}
.bs-btn--solid{background:var(--bs-cyan);color:var(--bs-deep);}
.bs-btn--solid:hover{background:var(--bs-cream);border-color:var(--bs-cream);}
.bs-btn--ghost{border-color:var(--bs-hair);color:var(--bs-cream);}
.bs-btn--ghost:hover{background:transparent;border-color:var(--bs-cyan);color:var(--bs-cyan);}
.bs-btn--alert{border-color:var(--bs-alert);color:var(--bs-alert);}
.bs-btn--alert:hover{background:var(--bs-alert);border-color:var(--bs-alert);color:var(--bs-cream);}

/* ---------- 7. 面包屑 ---------- */
.bs-crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-block:16px 0;
  font-family:var(--bs-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--bs-rock);
}
.bs-crumb a{color:var(--bs-rock);transition:color var(--bs-fast) var(--bs-ease);}
.bs-crumb a:hover{color:var(--bs-cyan);}
.bs-crumb__sep{opacity:.5;}
.bs-crumb [aria-current="page"]{color:var(--bs-cyan);}

/* ---------- 8. 图片容器 ---------- */
.bs-figure{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--bs-moss);
  border:1px solid var(--bs-hair);
  border-radius:var(--bs-radius);
}
.bs-figure > img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(1.12) brightness(.94) hue-rotate(-6deg);
}
.bs-figure::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(200deg,rgba(10,31,26,.06),rgba(10,31,26,.58));
}
.bs-figure::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
  background-image:
    linear-gradient(to right,rgba(53,224,200,.16) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(53,224,200,.16) 1px,transparent 1px);
  background-size:40px 40px;
}
.bs-figure--wide{aspect-ratio:16/9;}
.bs-figure--tall{aspect-ratio:3/4;}
.bs-figure--square{aspect-ratio:1/1;}
.bs-figure--band{aspect-ratio:21/9;}
.bs-figure__cap{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  padding:5px 10px;
  border-left:2px solid var(--bs-clay);
  background:rgba(6,18,16,.74);
  color:var(--bs-cream);
  font-family:var(--bs-mono);
  font-size:10px;
  letter-spacing:.22em;
  line-height:1.5;
}

/* ---------- 9. 滚动显现 ---------- */
.bs-js .bs-reveal{
  opacity:0;
  transform:translate3d(-12px,12px,0);
  transition:opacity var(--bs-slow) var(--bs-ease),
             transform var(--bs-slow) var(--bs-ease);
}
.bs-js .bs-reveal.is-inview{opacity:1;transform:none;}

/* ---------- 10. 返回顶部 ---------- */
.bs-totop{
  position:fixed;
  right:clamp(14px,3vw,32px);
  bottom:clamp(14px,3vw,32px);
  z-index:70;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--bs-cyan);
  border-radius:50%;
  background:rgba(6,18,16,.86);
  color:var(--bs-cyan);
  font-family:var(--bs-mono);
  font-size:15px;
  line-height:1;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--bs-mid) var(--bs-ease),
             transform var(--bs-mid) var(--bs-ease),
             visibility var(--bs-mid),
             background var(--bs-fast) var(--bs-ease),
             color var(--bs-fast) var(--bs-ease);
}
.bs-totop.is-on{opacity:1;visibility:visible;transform:none;}
.bs-totop:hover{background:var(--bs-cyan);color:var(--bs-deep);}

/* =========================================================
   11. HEADER
   ========================================================= */
.bs-header{
  position:sticky;
  top:0;
  z-index:90;
  background:var(--bs-char);
  border-bottom:1px solid var(--bs-hair);
}

.bs-skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:120;
  padding:10px 18px;
  background:var(--bs-cyan);
  color:var(--bs-deep);
  font-family:var(--bs-mono);
  font-size:12px;
  letter-spacing:.18em;
}
.bs-skip:focus{left:8px;top:8px;}

.bs-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  z-index:2;
  background:var(--bs-cyan);
  transform:scaleX(0);
  transform-origin:0 50%;
  pointer-events:none;
}

/* --- 命令栏 --- */
.bs-utility{
  background:var(--bs-char);
  border-bottom:1px solid var(--bs-hair-soft);
  font-family:var(--bs-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--bs-rock);
}
.bs-utility__inner{
  display:flex;
  align-items:center;
  gap:clamp(12px,3vw,30px);
  min-height:38px;
  padding-block:7px;
}

.bs-pulse{display:inline-flex;align-items:center;gap:9px;flex:none;}
.bs-pulse__ring{
  width:16px;
  height:16px;
  flex:none;
  border-radius:50%;
  background:conic-gradient(var(--bs-cyan) var(--bs-pulse,0deg),rgba(53,224,200,.16) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.6px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.6px));
}
.bs-pulse__text{display:inline-flex;align-items:baseline;gap:8px;}
.bs-pulse__label{color:var(--bs-rock);}
.bs-pulse__time{
  color:var(--bs-cyan);
  font-variant-numeric:tabular-nums;
  letter-spacing:.1em;
}

.bs-league{
  display:inline-flex;
  align-items:center;
  flex:none;
  padding:2px;
  border:1px solid var(--bs-hair);
  border-radius:999px;
}
.bs-league__tag{padding:0 10px 0 9px;opacity:.75;}
.bs-league__btn{
  padding:3px 12px;
  border-radius:999px;
  color:var(--bs-rock);
  font-family:var(--bs-mono);
  font-size:11px;
  letter-spacing:.18em;
  line-height:1.5;
  transition:background var(--bs-fast) var(--bs-ease),
             color var(--bs-fast) var(--bs-ease);
}
.bs-league__btn:hover{color:var(--bs-cream);}
.bs-league__btn[aria-pressed="true"]{background:var(--bs-cyan);color:var(--bs-deep);}

.bs-utility__note{
  margin-left:auto;
  max-width:48ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:.72;
}

/* --- 主导航条 --- */
.bs-bar{background:var(--bs-deep);}
.bs-bar__inner{
  display:flex;
  align-items:stretch;
  gap:clamp(10px,2vw,26px);
  min-height:64px;
}

.bs-brand{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  flex:none;
  padding-right:clamp(12px,2vw,26px);
  border-right:1px solid var(--bs-hair);
}
.bs-brand__mark{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--bs-head);
  font-weight:900;
  font-size:19px;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--bs-cream);
}
.bs-brand__dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--bs-cyan);
  animation:bs-ping 2.4s var(--bs-ease) infinite;
}
@keyframes bs-ping{
  0%{box-shadow:0 0 0 0 rgba(53,224,200,.55);}
  70%{box-shadow:0 0 0 9px rgba(53,224,200,0);}
  100%{box-shadow:0 0 0 0 rgba(53,224,200,0);}
}
.bs-brand__sub{
  font-family:var(--bs-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--bs-rock);
  opacity:.78;
}

.bs-nav{
  display:flex;
  align-items:stretch;
  gap:clamp(8px,1.4vw,20px);
  margin-left:auto;
}
.bs-nav__list{display:flex;align-items:stretch;}
.bs-nav__item{display:flex;}
.bs-nav__item + .bs-nav__item{border-left:1px solid var(--bs-hair-soft);}
.bs-nav__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 clamp(8px,1.1vw,15px);
  color:var(--bs-rock);
  font-family:var(--bs-mono);
  font-size:12px;
  letter-spacing:.14em;
  line-height:1.4;
  transition:color var(--bs-fast) var(--bs-ease),
             background var(--bs-fast) var(--bs-ease);
}
.bs-nav__idx{font-size:9px;letter-spacing:.1em;color:var(--bs-cyan-deep);}
.bs-nav__link:hover{color:var(--bs-cream);background:rgba(53,224,200,.07);}
.bs-nav__link[aria-current="page"]{background:var(--bs-cyan);color:var(--bs-deep);}
.bs-nav__link[aria-current="page"] .bs-nav__idx{color:var(--bs-deep);opacity:.55;}

.bs-nav__cta{
  display:inline-flex;
  align-items:center;
  align-self:center;
  padding:9px 16px;
  border:1px solid var(--bs-cyan);
  border-radius:999px;
  color:var(--bs-cyan);
  font-family:var(--bs-mono);
  font-size:11px;
  letter-spacing:.16em;
  line-height:1.3;
  white-space:nowrap;
  transition:background var(--bs-fast) var(--bs-ease),
             color var(--bs-fast) var(--bs-ease);
}
.bs-nav__cta:hover{background:var(--bs-cyan);color:var(--bs-deep);}

.bs-navbtn{
  display:none;
  align-items:center;
  gap:9px;
  align-self:center;
  margin-left:auto;
  padding:9px 12px;
  border:1px solid var(--bs-hair);
  border-radius:var(--bs-radius);
  color:var(--bs-cream);
  font-family:var(--bs-mono);
  font-size:11px;
  letter-spacing:.16em;
  line-height:1.3;
  transition:border-color var(--bs-fast) var(--bs-ease);
}
.bs-navbtn:hover{border-color:var(--bs-cyan);}
.bs-navbtn__bars{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  width:16px;
  flex:none;
}
.bs-navbtn__bars i{
  display:block;
  height:1.5px;
  background:currentColor;
  transition:transform var(--bs-fast) var(--bs-ease),
             opacity var(--bs-fast) var(--bs-ease);
}
.bs-navbtn[aria-expanded="true"] .bs-navbtn__bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg);}
.bs-navbtn[aria-expanded="true"] .bs-navbtn__bars i:nth-child(2){opacity:0;}
.bs-navbtn[aria-expanded="true"] .bs-navbtn__bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg);}

/* =========================================================
   12. FOOTER
   ========================================================= */
.bs-footer{
  position:relative;
  z-index:1;
  background:var(--bs-cream);
  color:var(--bs-deep);
  font-size:15px;
}

.bs-footer__strip{
  background:var(--bs-char);
  color:var(--bs-rock);
  border-bottom:1px solid rgba(53,224,200,.28);
}
.bs-footer__striproll{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px clamp(14px,3vw,34px);
  min-height:46px;
  padding-block:9px;
  font-family:var(--bs-mono);
  font-size:11px;
  letter-spacing:.18em;
}
.bs-footer__mark{color:var(--bs-cream);letter-spacing:.22em;}
.bs-footer__domain{color:var(--bs-cyan);opacity:.85;}
.bs-footer__legal{margin-left:auto;opacity:.8;}

.bs-footer__index{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(0,2.8fr);
  gap:clamp(24px,4vw,60px);
  padding-block:clamp(36px,5vw,68px);
}
.bs-footer__lead{border-left:2px solid var(--bs-cyan);padding-left:16px;}
.bs-footer__wordmark{
  font-family:var(--bs-head);
  font-weight:900;
  font-size:clamp(22px,3vw,30px);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--bs-deep);
}
.bs-footer__tag{
  margin-top:12px;
  max-width:22ch;
  color:#5c6b62;
  font-family:var(--bs-mono);
  font-size:11px;
  letter-spacing:.2em;
  line-height:1.9;
}

.bs-footer__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:clamp(18px,2.4vw,32px);
}
.bs-indexcol__title{
  display:block;
  padding-bottom:9px;
  margin-bottom:12px;
  border-bottom:1px solid rgba(10,31,26,.16);
  color:var(--bs-cyan-deep);
  font-family:var(--bs-mono);
  font-size:11px;
  letter-spacing:.24em;
  line-height:1.5;
  transition:color var(--bs-fast) var(--bs-ease),
             border-color var(--bs-fast) var(--bs-ease);
}
.bs-indexcol__title:hover{color:var(--bs-deep);border-color:var(--bs-cyan);}
.bs-indexcol__list li{
  color:#3f564e;
  font-size:14px;
  line-height:2;
}

.bs-footer__contact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:12px clamp(24px,4vw,48px);
  padding-block:clamp(22px,3vw,34px);
  border-top:1px solid rgba(10,31,26,.16);
}
.bs-contactline{display:flex;gap:12px;align-items:baseline;}
.bs-contactline__k{
  flex:none;
  min-width:52px;
  color:var(--bs-cyan-deep);
  font-family:var(--bs-mono);
  font-size:10px;
  letter-spacing:.24em;
}
.bs-contactline__v{color:#22403a;font-size:14px;line-height:1.7;word-break:break-word;}

.bs-footer__base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px clamp(16px,3vw,30px);
  padding-block:18px 24px;
  border-top:1px solid rgba(10,31,26,.16);
  color:#59705f;
  font-family:var(--bs-mono);
  font-size:11px;
  letter-spacing:.14em;
}
.bs-footer__legalnav{display:flex;flex-wrap:wrap;gap:8px 18px;}
.bs-footer__legalnav a{
  color:#3d5a50;
  border-bottom:1px solid transparent;
  transition:color var(--bs-fast) var(--bs-ease),
             border-color var(--bs-fast) var(--bs-ease);
}
.bs-footer__legalnav a:hover{color:var(--bs-cyan-deep);border-color:var(--bs-cyan-deep);}
.bs-footer__copy{color:#59705f;}
.bs-footer__note{margin-left:auto;color:#6b8078;}

/* =========================================================
   13. 响应式
   ========================================================= */
@media (max-width:1060px){
  html{scroll-padding-top:106px;}

  .bs-navbtn{display:inline-flex;}

  .bs-nav{
    position:fixed;
    top:0;
    right:0;
    z-index:95;
    width:min(88vw,380px);
    height:100vh;
    height:100dvh;
    margin-left:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:clamp(78px,14vh,116px) 22px 34px;
    overflow-y:auto;
    background:var(--bs-deep-2);
    border-left:1px solid var(--bs-hair);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform var(--bs-mid) var(--bs-ease),
               visibility var(--bs-mid);
  }
  .bs-nav[data-open]{transform:translateX(0);visibility:visible;}

  .bs-nav__list{flex-direction:column;align-items:stretch;}
  .bs-nav__item + .bs-nav__item{border-left:0;border-top:1px solid var(--bs-hair-soft);}
  .bs-nav__link{
    padding:15px 12px;
    font-size:13px;
    border-radius:var(--bs-radius);
  }
  .bs-nav__link[aria-current="page"]{border-radius:var(--bs-radius);}

  .bs-nav__cta{
    align-self:stretch;
    justify-content:center;
    margin-top:24px;
    padding:13px 18px;
  }

  .bs-footer__index{grid-template-columns:1fr;}
}

@media (max-width:820px){
  body{font-size:16px;}

  .bs-grid{grid-template-columns:repeat(6,minmax(0,1fr));}

  .bs-utility__note{display:none;}

  .bs-footer__contact{grid-template-columns:1fr;}
  .bs-footer__note{margin-left:0;}
}

@media (max-width:620px){
  .bs-utility__inner{gap:12px;}
  .bs-league__tag{display:none;}
  .bs-brand__sub{display:none;}
  .bs-brand__mark{font-size:17px;}
  .bs-bar__inner{min-height:58px;}

  .bs-footer__striproll{gap:6px 14px;letter-spacing:.14em;}
  .bs-footer__legal{margin-left:0;width:100%;}
  .bs-footer__cols{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
  .bs-footer__base{letter-spacing:.1em;}
}

/* =========================================================
   14. 降低动效偏好
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  body::before{transform:none;}
  .bs-brand__dot{animation:none;box-shadow:none;}

  .bs-js .bs-reveal{opacity:1;transform:none;}
  .bs-totop{transform:none;}
}