/* =========================================================
   球王会体育 · ballking-data.com.cn
   共享样式表 /assets/site.css
   1 Reset · 2 Tokens · 3 Typography · 4 Layout · 5 Masthead
   6 Sitefoot · 7 Components · 8 Utilities · 9 Motion/A11y
   ========================================================= */

/* 1 Reset ------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dt,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}
[hidden]{display:none !important}

/* 2 Tokens ----------------------------------------------- */
:root{
  --ink:#0D1210;
  --ink-green:#0E2A22;
  --paper:#F3EEE1;
  --paper-hi:#F8F5EC;
  --brown:#241C18;
  --cyan:#3FE0C8;
  --orange:#FF6A1F;
  --rust:#D8451C;
  --silver:#C3C9C6;
  --gray:#A8B0AC;

  --line:rgba(195,201,198,.20);
  --line-strong:rgba(195,201,198,.44);
  --line-print:rgba(36,28,24,.18);
  --glow:0 0 16px rgba(63,224,200,.38);

  --font-display:"Barlow Condensed","Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Noto Sans SC","Source Han 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;

  --shell:1240px;
  --gutter:clamp(1rem,3vw,2rem);
  --radius:2px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:.3s;
}

/* 3 Typography ------------------------------------------- */
body{
  min-height:100vh;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(2rem,6vw,3.4rem)}
h2{font-size:clamp(1.55rem,4vw,2.4rem)}
h3{font-size:clamp(1.15rem,2.6vw,1.5rem)}
h4{font-size:1rem;letter-spacing:0}
strong,b{font-weight:700}
::selection{background:var(--cyan);color:var(--ink)}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan);
}
.measure{max-width:36em}
.prose{max-width:42rem;font-size:1rem;line-height:1.85;color:var(--gray)}
.prose p{margin-bottom:1.1em}
.prose h2,.prose h3{color:var(--paper);margin:2.2em 0 .55em}
.prose h2{font-size:clamp(1.4rem,3vw,2rem)}
.prose h3{font-size:clamp(1.1rem,2.2vw,1.35rem)}
.prose ul,.prose ol{list-style:none;margin:0 0 1.2em;padding:0}
.prose li{position:relative;padding-left:1.3em;margin-bottom:.5em}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--cyan)}
.prose a{color:var(--cyan);border-bottom:1px solid rgba(63,224,200,.4)}
.prose a:hover{border-bottom-color:var(--cyan)}
.prose blockquote{
  margin:1.6em 0;padding:.2em 0 .2em 1.2em;
  border-left:3px solid var(--orange);
  color:var(--paper);
}
.panel--paper .prose,.panel--paper .prose h2,.panel--paper .prose h3{color:var(--brown)}
.panel--paper .prose{color:#4b4139}
.panel--paper .prose a{color:var(--rust);border-bottom-color:rgba(216,69,28,.4)}
.panel--paper .prose li::before{background:var(--rust)}

/* 4 Layout ----------------------------------------------- */
.shell{
  width:min(var(--shell),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}
.section{padding:clamp(2.5rem,7vw,5.5rem) 0}
.section--tight{padding:clamp(1.5rem,4vw,2.75rem) 0}
.section--ink{background:var(--ink)}
.section--green{background:var(--ink-green)}
.section--paper{background:var(--paper);color:var(--brown)}
.grid{display:grid;gap:clamp(1rem,2.4vw,2rem)}
.grid--12{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-3{grid-column:span 3}
.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-9{grid-column:span 9}
.col-12{grid-column:span 12}
.rule{height:1px;border:0;background:var(--line)}
.rule--strong{background:var(--line-strong)}
.rule--print{background:var(--line-print)}

/* 5 Masthead --------------------------------------------- */
.skip-link{
  position:fixed;top:.5rem;left:.5rem;z-index:200;
  transform:translateY(-320%);
  padding:.6rem 1rem;
  background:var(--cyan);color:var(--ink);
  font-family:var(--font-mono);font-size:.8125rem;font-weight:700;letter-spacing:.08em;
  border-radius:var(--radius);
  transition:transform var(--dur) var(--ease);
}
.skip-link:focus{transform:translateY(0)}

.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--ink);
  color:var(--paper);
  border-bottom:1px solid var(--line);
}
.masthead__pulse{
  position:relative;
  height:4px;
  background:var(--ink-green);
  overflow:hidden;
}
.masthead__pulse::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(195,201,198,.24) 0 1px,transparent 1px 6%);
  opacity:.55;
}
.masthead__pulse-fill{
  position:relative;display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
  transition:transform .12s linear;
}
.masthead__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  padding:.9rem 0 .55rem;
  transition:padding var(--dur) var(--ease);
}
.masthead__util{display:flex;align-items:center;gap:.75rem;font-size:.8125rem;min-width:0}
.masthead__util--left{justify-self:start}
.masthead__util--right{justify-self:end}
.cycle-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;color:var(--gray);
  text-transform:uppercase;white-space:nowrap;
}
.cycle-tag__dot{
  width:8px;height:8px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 3px rgba(63,224,200,.16);
  animation:pulse-dot 2.6s var(--ease) infinite;
}
.cycle-tag__label{color:var(--silver)}
.cycle-tag__value{color:var(--cyan);font-size:.75rem}
.brand{display:grid;justify-items:center;gap:.2rem;text-align:center}
.brand__mark{
  font-size:.625rem;letter-spacing:.28em;color:var(--rust);white-space:nowrap;
}
.brand__name{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.75rem,4.6vw,2.75rem);
  line-height:1;letter-spacing:-.02em;
  transition:font-size var(--dur) var(--ease);
}
.brand__tagline{
  font-size:.625rem;letter-spacing:.24em;color:var(--silver);
  text-transform:uppercase;white-space:nowrap;
}
.util-link{
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;
  color:var(--silver);white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.util-link:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.util-link--search{
  padding:.3rem .7rem;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
}
.util-link--search:hover{border-color:var(--cyan);color:var(--cyan)}

.navtoggle{
  display:none;align-items:center;gap:.55rem;justify-self:end;
  padding:.5rem .7rem;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.18em;color:var(--silver);
}
.navtoggle:hover{border-color:var(--cyan);color:var(--cyan)}
.navtoggle__bars{position:relative;display:block;width:18px;height:2px;background:var(--cyan);transition:background var(--dur) var(--ease)}
.navtoggle__bars::before,.navtoggle__bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--cyan);
  transition:transform var(--dur) var(--ease);
}
.navtoggle__bars::before{top:-6px}
.navtoggle__bars::after{top:6px}
.navtoggle[aria-expanded="true"] .navtoggle__bars{background:transparent}
.navtoggle[aria-expanded="true"] .navtoggle__bars::before{transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle__bars::after{transform:translateY(-6px) rotate(-45deg)}

.masthead__nav{border-top:1px solid var(--line)}
.navlist{
  counter-reset:nav;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.4rem,2.4vw,1.6rem);
  padding:.3rem 0;
}
.navlist__item{counter-increment:nav}
.navlist__link{
  display:inline-block;
  padding:.42rem .2rem .3rem;
  font-size:.9375rem;color:var(--silver);
  border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.navlist__link::before{
  content:counter(nav,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.625rem;color:var(--gray);
  margin-right:.45rem;vertical-align:.18em;
}
.navlist__link:hover{color:var(--paper);border-bottom-color:var(--cyan)}
.navlist__link[aria-current="page"]{color:var(--cyan);border-bottom-color:var(--orange)}
.navlist__link[aria-current="page"]::before{color:var(--orange)}

.masthead[data-stuck] .masthead__inner{padding:.35rem 0 .2rem}
.masthead[data-stuck] .brand__mark,
.masthead[data-stuck] .brand__tagline{display:none}
.masthead[data-stuck] .brand__name{font-size:clamp(1.2rem,2.6vw,1.5rem)}
.masthead[data-stuck] .masthead__util{opacity:0;pointer-events:none}
.masthead[data-stuck] .navlist{padding:0}
.masthead[data-stuck] .navlist__link{padding:.3rem .2rem}

/* 6 Sitefoot --------------------------------------------- */
.sitefoot{
  background:var(--ink-green);
  color:var(--paper);
  border-top:1px solid var(--line-strong);
  padding:clamp(2rem,5vw,3.5rem) 0 1.25rem;
}
.sitefoot__grid{
  display:grid;
  grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem);
  padding-bottom:clamp(1.5rem,4vw,2.5rem);
  border-bottom:1px solid var(--line);
}
.sitefoot__brand{display:flex;flex-direction:column;gap:.5rem}
.foot-brand{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.4rem,3vw,1.85rem);line-height:1;
  color:var(--paper);
}
.foot-brand:hover{color:var(--cyan)}
.foot-brand__line{font-size:.6875rem;letter-spacing:.22em;color:var(--cyan);text-transform:uppercase}
.foot-brand__meta{font-size:.875rem;color:var(--gray);max-width:32ch}
.footgroup__title{
  position:relative;
  font-family:var(--font-mono);font-weight:700;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--silver);
  padding-bottom:.6rem;margin-bottom:.75rem;
  border-bottom:1px solid var(--line);
}
.footgroup__title::after{
  content:"";position:absolute;left:0;bottom:-1px;width:26px;height:2px;background:var(--orange);
}
.footlist{display:flex;flex-direction:column;gap:.45rem}
.footlist__link{
  font-size:.9375rem;color:var(--gray);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease);
  display:inline-block;
}
.footlist__link:hover{color:var(--cyan);transform:translateX(3px)}
.sitefoot__contact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:.6rem clamp(1rem,3vw,2.5rem);
  padding:clamp(1.25rem,3vw,2rem) 0;
}
.foot-contact__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;font-size:.875rem}
.foot-contact__key{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;
  color:var(--rust);text-transform:uppercase;min-width:4.5em;
}
.foot-contact__val{color:var(--paper);word-break:break-word}
.foot-contact__row--note .foot-contact__val{color:var(--gray);font-size:.8125rem}
.sitefoot__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
}
.foot-legal{font-size:.75rem;letter-spacing:.1em;color:var(--silver)}
.foot-legal__note{font-size:.75rem;color:var(--gray)}

/* 7 Components ------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.25rem;
  font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;
  border:1px solid var(--silver);border-radius:var(--radius);
  color:var(--paper);background:transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn--primary:hover{background:var(--cyan);border-color:var(--cyan)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn--paper{background:var(--paper);border-color:var(--brown);color:var(--brown);box-shadow:4px 4px 0 var(--brown)}
.btn--paper:hover{box-shadow:2px 2px 0 var(--brown)}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;
  color:var(--gray);
}
.crumbs__item{display:flex;align-items:center;gap:.5rem}
.crumbs__item + .crumbs__item::before{content:"/";color:var(--rust)}
.crumbs__link{color:var(--gray)}
.crumbs__link:hover{color:var(--cyan)}

.panel{
  background:var(--ink-green);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2.25rem);
}
.panel--ink{background:var(--ink)}
.panel--paper{
  background:var(--paper);color:var(--brown);
  border:1px solid var(--brown);
  box-shadow:8px 8px 0 var(--brown);
}
.card{
  display:flex;flex-direction:column;gap:.6rem;
  background:var(--ink-green);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.25rem;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card--paper{background:var(--paper);color:var(--brown);border-color:var(--brown);box-shadow:6px 6px 0 var(--brown)}
.card--paper:hover{transform:translateY(-3px)}
.card__eyebrow{
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);
}
.card--paper .card__eyebrow{color:var(--rust)}
.card__title{font-family:var(--font-display);font-weight:900;font-size:1.25rem;line-height:1.2;margin:0;color:inherit}
.card__body{margin:0;font-size:.9375rem;color:var(--gray)}
.card--paper .card__body{color:#4b4139}

.tagcloud{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .65rem;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;
  color:var(--silver);background:transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.tag:hover{border-color:var(--cyan);color:var(--cyan)}
.tag[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.tag--orange{border-color:rgba(255,106,31,.55);color:var(--orange)}
.tag--orange:hover{border-color:var(--orange);color:var(--orange)}

.statbig{display:flex;flex-direction:column;gap:.25rem}
.statbig__value{
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(2.5rem,7vw,4.5rem);line-height:1;letter-spacing:-.03em;
  color:var(--cyan);
}
.statbig__label{font-size:.8125rem;letter-spacing:.1em;color:var(--gray)}

.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line-strong)}
.timeline__item{position:relative;padding:0 0 1.6rem 1.5rem}
.timeline__item::before{
  content:"";position:absolute;left:-7px;top:.6em;
  width:12px;height:12px;border-radius:50%;
  background:var(--ink);border:2px solid var(--cyan);
}
.timeline__time{display:block;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--orange)}

.media-frame{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ink-green);
}
.media-frame__inner{display:block;width:100%;height:100%;object-fit:cover}
.media-frame__grid{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,rgba(63,224,200,.16) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(0deg,rgba(195,201,198,.10) 0 1px,transparent 1px 40px);
}
.media-frame__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:.6rem .8rem;
  background:rgba(13,18,16,.82);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;color:var(--silver);
}
.media-frame--16x9{aspect-ratio:16/9}
.media-frame--4x3{aspect-ratio:4/3}
.media-frame--1x1{aspect-ratio:1/1}

.totop{
  position:fixed;right:1rem;bottom:1rem;z-index:70;
  display:none;place-items:center;
  width:46px;height:46px;
  background:var(--ink);color:var(--cyan);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:1rem;line-height:1;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.totop[data-show]{display:grid}
.totop:hover{background:var(--ink-green);border-color:var(--cyan);transform:translateY(-3px)}

[data-toc] a[aria-current="true"]{
  color:var(--cyan);
  box-shadow:inset 2px 0 0 var(--orange);
}

/* 8 Utilities -------------------------------------------- */
.visually-hidden{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.text-cyan{color:var(--cyan)}
.text-orange{color:var(--orange)}
.text-rust{color:var(--rust)}
.text-gray{color:var(--gray)}
.stack-sm{display:flex;flex-direction:column;gap:.6rem}
.stack-md{display:flex;flex-direction:column;gap:1.25rem}
.stack-lg{display:flex;flex-direction:column;gap:clamp(1.5rem,4vw,3rem)}
.row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}

/* 9 Motion & A11y ---------------------------------------- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:var(--radius)}
html.js-ready [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
html.js-ready [data-reveal].is-in{opacity:1;transform:none}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 3px rgba(63,224,200,.16)}
  50%{box-shadow:0 0 0 7px rgba(63,224,200,.04)}
}

/* 10 Responsive ------------------------------------------ */
@media (max-width:1024px){
  .col-3,.col-4,.col-5{grid-column:span 6}
  .col-7,.col-8,.col-9{grid-column:span 12}
  .sitefoot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sitefoot__brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .masthead__inner{grid-template-columns:1fr auto;padding:.7rem 0 .5rem}
  .masthead__util--left,.masthead__util--right{display:none}
  .brand{justify-items:start;text-align:left}
  .brand__tagline{display:none}
  .navtoggle{display:inline-flex}
  .masthead__nav{
    max-height:0;overflow:hidden;border-top:0;
    transition:max-height .32s var(--ease);
  }
  .masthead__nav[data-open]{
    max-height:70vh;overflow-y:auto;
    border-top:1px solid var(--line);
  }
  .navlist{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .navlist__item{border-bottom:1px solid var(--line)}
  .navlist__link{display:block;padding:.9rem 1.25rem;border-bottom:0;font-size:1rem}
  .navlist__link[aria-current="page"]{
    border-bottom:0;border-left:3px solid var(--orange);
    background:rgba(63,224,200,.07);
  }
}
@media (max-width:760px){
  .grid--12{grid-template-columns:repeat(4,minmax(0,1fr))}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 4}
}
@media (max-width:600px){
  .sitefoot__grid{grid-template-columns:1fr}
  .sitefoot__bottom{flex-direction:column;align-items:flex-start}
  .totop{right:.75rem;bottom:.75rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.js-ready [data-reveal]{opacity:1;transform:none}
}