/* ================================================
   BSPORT赛场 / site.css
   全站共享样式：布局、头部、页脚、基础组件
   ================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;min-height:100%}
body{min-height:100%;background:var(--black);color:var(--white);font-family:var(--font-body);font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased}
ul,ol{list-style:none}
a{color:var(--bright-green);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--gold)}
img,picture,svg,video{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:none;border:none;cursor:pointer}
address{font-style:normal}
main{display:block}
::selection{background:var(--deep-green);color:var(--white)}

/* ---------- CSS Variables ---------- */
:root{
  --black:#0A0A0A;
  --charcoal:#1A1A1A;
  --deep-green:#0D4F3C;
  --bright-green:#1E7A5A;
  --gold:#D4AF37;
  --bright-gold:#F0C75E;
  --white:#F0F0F0;
  --gray:#A0A0A0;
  --line-gray:#2A2A2A;
  --red:#C0392B;

  --font-title:'Arial Black','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'Roboto Mono','Consolas',monospace;

  --container-max:1440px;
  --spacer-1:.5rem;
  --spacer-2:1rem;
  --spacer-3:1.5rem;
  --spacer-4:2rem;
  --spacer-5:3rem;
  --spacer-6:4rem;
  --spacer-7:6rem;

  --transition:.25s ease;
  --shadow-card:inset 0 0 0 3px rgba(13,79,60,.22);
  --border-fine:1px solid var(--line-gray);
}

/* ---------- Base typography ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-title);
  font-style:italic;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--white);
  line-height:1.25;
}
p{margin-bottom:var(--spacer-2)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Focus & Motion ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
}

/* ---------- Layout utilities ---------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding-left:var(--spacer-3);
  padding-right:var(--spacer-3);
}
@media (min-width:768px){
  .container{padding-left:var(--spacer-4);padding-right:var(--spacer-4)}
}
.section{padding:var(--spacer-6) 0}
.grid-12{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--spacer-4);
}
@media (max-width:768px){
  .grid-12{grid-template-columns:1fr}
}
.split-panel{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:var(--spacer-5);
}
@media (max-width:980px){
  .split-panel{grid-template-columns:1fr}
}
.divider{
  height:1px;
  background:var(--line-gray);
  border:0;
  margin:var(--spacer-4) 0;
}
.divider-gold{
  height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
  border:0;
  margin:var(--spacer-4) 0;
}
.bg-field{
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:24px 24px;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;
  top:-80px;
  left:var(--spacer-2);
  z-index:1000;
  display:inline-block;
  padding:.6rem 1.2rem;
  background:var(--gold);
  color:var(--black);
  font-weight:700;
  font-size:.9rem;
  border-radius:0 0 4px 4px;
  transition:top .25s ease;
}
.skip-link:focus-visible{
  top:var(--spacer-2);
}

/* ---------- Header ---------- */
.site-header{
  position:relative;
  z-index:100;
  background:var(--charcoal);
  border-bottom:1px solid var(--line-gray);
}
.announce-bar{
  background:var(--black);
  border-bottom:1px solid var(--deep-green);
}
.announce-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--spacer-3);
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--spacer-2);
}
.announce-text{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--gold);
  margin:0;
}
.announce-line{
  width:60px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.7;
}
.header-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--spacer-3);
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--spacer-3);
}
@media (min-width:768px){
  .header-inner{padding-left:var(--spacer-4);padding-right:var(--spacer-4)}
}

/* --- Brand --- */
.brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  flex-shrink:0;
  color:var(--white);
  text-decoration:none;
}
.brand-symbol{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:var(--deep-green);
  border:1px solid var(--gold);
  border-radius:2px;
  flex-shrink:0;
}
.brand-symbol::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:54px;
  height:54px;
  border:1px solid rgba(212,175,55,.4);
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:1px;
  pointer-events:none;
}
.brand-symbol::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:38px;
  height:38px;
  border:1px solid rgba(212,175,55,.6);
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:1px;
  pointer-events:none;
}
.symbol-b{
  position:relative;
  z-index:2;
  font-family:var(--font-title);
  font-style:italic;
  font-weight:900;
  font-size:1.7rem;
  line-height:1;
  color:var(--gold);
}
.brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.brand-name{
  font-family:var(--font-title);
  font-style:italic;
  font-weight:900;
  font-size:1.35rem;
  letter-spacing:.02em;
  color:var(--white);
  margin:0;
}
.brand-tagline{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--gold);
  margin-top:.25rem;
  white-space:nowrap;
}

/* --- Navigation --- */
.site-nav{
  visibility:visible;
  opacity:1;
  transform:none;
}
.nav-list{
  display:flex;
  align-items:center;
}
.nav-item+.nav-item{margin-left:0}
.nav-link{
  position:relative;
  display:block;
  padding:.6rem .75rem;
  font-size:.95rem;
  font-weight:500;
  color:var(--white);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:.75rem;
  right:.75rem;
  bottom:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s ease;
}
.nav-link:hover,
.nav-link[aria-current="page"]{
  color:var(--gold);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after{
  transform:scaleX(1);
}

/* --- Mobile nav toggle --- */
.nav-toggle{
  display:none;
  position:relative;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:42px;
  height:42px;
  background:transparent;
  border:1px solid var(--line-gray);
  border-radius:2px;
  padding:0;
  transition:border-color .2s ease;
}
.nav-toggle:hover{border-color:var(--gold)}
.toggle-bar{
  width:20px;
  height:2px;
  background:var(--white);
  display:block;
  transition:transform .25s ease,opacity .25s ease,background .2s ease;
}
.nav-toggle[data-open]{
  border-color:var(--gold);
}
.nav-toggle[data-open] .toggle-bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
  background:var(--gold);
}
.nav-toggle[data-open] .toggle-bar:nth-child(2){
  opacity:0;
}
.nav-toggle[data-open] .toggle-bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
  background:var(--gold);
}

/* --- Header responsive --- */
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--charcoal);
    border-bottom:1px solid var(--line-gray);
    box-shadow:0 18px 32px rgba(0,0,0,.4);
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    z-index:90;
  }
  .site-nav[data-open]{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
  }
  .nav-list{
    flex-direction:column;
    padding:var(--spacer-1) 0;
  }
  .nav-item+.nav-item{margin-left:0}
  .nav-link{
    padding:var(--spacer-2) var(--spacer-4);
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{
    color:var(--gold);
    border-left:2px solid var(--gold);
  }
}
@media (max-width:640px){
  .brand-tagline{display:none}
  .brand-symbol{
    width:38px;
    height:38px;
  }
  .brand-name{font-size:1.15rem}
  .announce-line{width:24px}
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--black);
  color:var(--gray);
  border-top:1px solid var(--line-gray);
}
.footer-accent{
  height:3px;
  background:repeating-linear-gradient(90deg,
    var(--gold) 0,var(--gold) 70px,
    transparent 70px,transparent 86px);
  border-bottom:1px solid var(--charcoal);
}
.footer-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:var(--spacer-5) var(--spacer-3) var(--spacer-3);
}
@media (min-width:768px){
  .footer-inner{padding-left:var(--spacer-4);padding-right:var(--spacer-4)}
}
.footer-grid{
  display:grid;
  grid-template-columns:4fr 2fr 3fr;
  gap:var(--spacer-5);
  padding-bottom:var(--spacer-4);
  border-bottom:1px solid var(--line-gray);
}
.footer-col{
  min-width:0;
}
.footer-brand-name{
  font-family:var(--font-title);
  font-style:italic;
  font-weight:900;
  font-size:1.6rem;
  color:var(--white);
  letter-spacing:.02em;
  margin:0 0 .25rem;
}
.footer-tagline{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--gold);
  margin:0;
}
.footer-trust{
  max-width:32em;
  margin-top:var(--spacer-2);
  font-size:.9rem;
  line-height:1.7;
  color:var(--gray);
}
.footer-heading{
  font-family:var(--font-body);
  font-style:normal;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  border-bottom:1px solid var(--line-gray);
  padding-bottom:var(--spacer-1);
  margin-bottom:var(--spacer-2);
}
.footer-links li+li{
  margin-top:var(--spacer-1);
}
.footer-link{
  position:relative;
  padding-left:1rem;
  color:var(--gray);
  font-size:.92rem;
  transition:color .2s ease;
}
.footer-link::before{
  content:'';
  position:absolute;
  left:0;
  top:.45rem;
  width:6px;
  height:6px;
  border:1px solid var(--gold);
  transform:rotate(45deg);
  background:transparent;
  transition:background .2s ease;
}
.footer-link:hover,
.footer-link:focus-visible{
  color:var(--white);
}
.footer-link:hover::before,
.footer-link:focus-visible::before{
  background:var(--gold);
}
.footer-address{
  display:flex;
  flex-direction:column;
  gap:var(--spacer-1);
  font-size:.9rem;
}
.addr-item{
  position:relative;
  padding-left:1rem;
  color:var(--gray);
}
.addr-item::before{
  content:'';
  position:absolute;
  left:0;
  top:.5rem;
  width:4px;
  height:4px;
  background:var(--deep-green);
  border:1px solid var(--bright-green);
  transform:rotate(45deg);
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--spacer-1);
  padding-top:var(--spacer-3);
  font-size:.8rem;
  color:var(--gray);
}
.copyright{margin:0}
.icp{margin:0}

@media (max-width:768px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:var(--spacer-4);
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.7rem 1.4rem;
  border:1px solid var(--line-gray);
  background:var(--charcoal);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover{
  border-color:var(--gold);
  color:var(--gold);
}
.btn-primary{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--black);
}
.btn-primary:hover{
  background:var(--bright-gold);
  border-color:var(--bright-gold);
  color:var(--black);
}
.btn-outline{
  background:transparent;
  border-color:var(--gold);
  color:var(--gold);
}
.btn-outline:hover{
  background:var(--deep-green);
  border-color:var(--deep-green);
  color:var(--white);
}

/* ---------- Tags ---------- */
.tag{
  display:inline-block;
  padding:.2rem .6rem;
  font-size:.72rem;
  border:1px solid var(--line-gray);
  background:var(--charcoal);
  color:var(--gray);
  line-height:1.4;
  white-space:nowrap;
}
.tag-gold{
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(212,175,55,.08);
}
.tag-green{
  border-color:var(--bright-green);
  color:var(--bright-green);
  background:rgba(30,122,90,.08);
}
.tag-red{
  border-color:var(--red);
  color:var(--red);
  background:rgba(192,57,43,.08);
}

/* ---------- Data number ---------- */
.data-num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.5rem;
  line-height:1.1;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}

/* ---------- Scope frame ---------- */
.scope-box{
  position:relative;
  background:var(--charcoal);
  border:1px solid var(--line-gray);
  box-shadow:var(--shadow-card);
  padding:var(--spacer-4);
  transition:border-color .25s ease;
}
.scope-box::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  height:2px;
  width:56px;
  background:repeating-linear-gradient(90deg,
    var(--gold) 0,var(--gold) 6px,
    transparent 6px,transparent 12px);
}
.scope-box::after{
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  height:1px;
  width:56px;
  background:repeating-linear-gradient(90deg,
    var(--gold) 0,var(--gold) 5px,
    transparent 5px,transparent 10px);
  opacity:.5;
}
.scope-box:hover{
  border-color:var(--gold);
}
.scope-box:hover::before{
  width:96px;
  background:repeating-linear-gradient(90deg,
    var(--bright-gold) 0,var(--bright-gold) 6px,
    transparent 6px,transparent 12px);
  transition:width .25s ease,background .25s ease;
}

/* ---------- Corner frame ---------- */
.corner-frame{
  position:relative;
}
.corner-frame::before,
.corner-frame::after{
  content:'';
  position:absolute;
  width:14px;
  height:14px;
  border:0 solid var(--gold);
  pointer-events:none;
  z-index:2;
  transition:width .25s ease,height .25s ease;
}
.corner-frame::before{
  top:-1px;
  left:-1px;
  border-top-width:2px;
  border-left-width:2px;
}
.corner-frame::after{
  bottom:-1px;
  right:-1px;
  border-bottom-width:2px;
  border-right-width:2px;
}
.corner-frame:hover::before,
.corner-frame:hover::after{
  width:24px;
  height:24px;
}

/* ---------- Figure & image container ---------- */
.figure-frame{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--charcoal);
  border:1px solid var(--line-gray);
  box-shadow:var(--shadow-card);
}
.figure-frame::before{
  content:'';
  display:block;
  padding-top:56.25%;
}
.figure-frame[data-ratio="4:3"]::before{padding-top:75%}
.figure-frame[data-ratio="3:4"]::before{padding-top:133.34%}
.figure-frame[data-ratio="1:1"]::before{padding-top:100%}
.figure-frame[data-ratio="21:9"]::before{padding-top:42.86%}
.figure-frame>*{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.figure-frame::after{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg,
    transparent 0,transparent 10px,
    rgba(255,255,255,.012) 10px,rgba(255,255,255,.012) 11px);
  pointer-events:none;
}
.figure-label{
  position:absolute;
  left:0;
  bottom:0;
  z-index:3;
  background:rgba(10,10,10,.85);
  color:var(--white);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  padding:.3rem .8rem;
  border-left:2px solid var(--gold);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  font-size:.8rem;
  color:var(--gray);
  padding-bottom:var(--spacer-3);
}
.breadcrumb a{
  color:var(--gold);
}
.breadcrumb a:hover{
  color:var(--bright-gold);
  text-decoration:underline;
}
.breadcrumb-sep{
  color:var(--line-gray);
}

/* ---------- Table wrapper ---------- */
.table-wrap{
  overflow-x:auto;
  border:1px solid var(--line-gray);
  background:var(--charcoal);
}
.table-wrap table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.table-wrap th,
.table-wrap td{
  padding:.65rem .9rem;
  border-bottom:1px solid var(--line-gray);
  text-align:left;
  white-space:nowrap;
}
.table-wrap th{
  background:var(--deep-green);
  color:var(--white);
  font-weight:700;
}
.table-wrap tr:last-child td{
  border-bottom:0;
}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:1000;
  background:transparent;
  transform-origin:left center;
  transform:scaleX(var(--progress,0));
  background-color:var(--gold);
  pointer-events:none;
}

/* ---------- Reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease;
}
[data-revealed][data-reveal]{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ---------- Utility helpers ---------- */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.text-kicker{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.text-mono{font-family:var(--font-mono)}
.text-gold{color:var(--gold)}
.text-white{color:var(--white)}
.text-gray{color:var(--gray)}
.text-center{text-align:center}
.mt-1{margin-top:var(--spacer-1)}
.mt-2{margin-top:var(--spacer-2)}
.mt-3{margin-top:var(--spacer-3)}
.mt-4{margin-top:var(--spacer-4)}
.mt-5{margin-top:var(--spacer-5)}
.mt-6{margin-top:var(--spacer-6)}
.mb-2{margin-bottom:var(--spacer-2)}
.mb-3{margin-bottom:var(--spacer-3)}
.mb-4{margin-bottom:var(--spacer-4)}
.mb-5{margin-bottom:var(--spacer-5)}
.mb-6{margin-bottom:var(--spacer-6)}
#main-content{
  min-height:50vh;
}