/* ==========================================================================
   买球网主站 · /assets/site.css
   深夜数据室 × 计时牌：深墨夜绿底 / 琥珀状态 / 判罚红口径 / 冷青数据
   ========================================================================== */

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

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#08110F;
  --grass:#0E241D;
  --grass-mid:#17392E;
  --paper:#F3EBDA;
  --paper-ink:#10160F;
  --amber:#F2B33D;
  --red:#D94F30;
  --cyan:#57D3C6;
  --line:#DCE7E1;
  --moss:#6F8579;

  --frame:1.5px;
  --cut:14px;
  --gap:clamp(14px,2.1vw,26px);
  --pad-x:clamp(16px,4.2vw,56px);
  --maxw:1480px;
  --header-h:72px;
  --shadow-hard:5px 5px 0 rgba(0,0,0,.55);
  --shadow-hard-lg:8px 8px 0 rgba(0,0,0,.6);

  --font-display:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- 2. BASE ---------- */
body{
  min-height:100vh;
  background-color:var(--ink);
  background-image:
    linear-gradient(to right,rgba(220,231,225,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(220,231,225,.045) 1px,transparent 1px);
  background-size:76px 76px;
  color:var(--line);
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;color:var(--line);text-wrap:balance}
h1,.h1{
  font-stretch:87.5%;
  font-size:clamp(2.8rem,9vw,7.2rem);
  line-height:.92;
  letter-spacing:-.02em;
}
h2,.h2{
  font-stretch:90%;
  font-size:clamp(1.6rem,4vw,3rem);
  line-height:1.04;
  letter-spacing:-.01em;
}
h3,.h3{font-size:clamp(1.05rem,1.8vw,1.45rem);line-height:1.3;font-weight:800}
h4,.h4{font-size:1rem;font-weight:800;letter-spacing:.02em}

p{text-wrap:pretty}
strong{color:var(--paper);font-weight:800}

.num,
.stat-num,
.round-chip,
.nav-footnote,
.foot-legal,
.eyebrow,
.filter-btn,
.data-table thead th,
.brand-mark__sub{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.num{letter-spacing:.02em}

.stat-num{
  display:block;
  font-size:clamp(1.9rem,4.6vw,3.4rem);
  font-weight:700;
  line-height:1;
  color:var(--amber);
}

.prose{max-width:38em;color:var(--line)}
.prose p+p{margin-top:1em}
.prose ul{margin-top:1em;display:grid;gap:.5em}
.prose li{padding-left:1.2em;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:2px;background:var(--cyan)}

.stack>*+*{margin-top:var(--gap)}

/* ---------- 3. LAYOUT ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.section{padding-block:clamp(48px,7vw,108px);position:relative}
.section--tight{padding-block:clamp(30px,4vw,64px)}
.section--grass{background:var(--grass);border-block:var(--frame) solid var(--grass-mid)}
.section--paper{
  background:var(--paper);
  color:var(--paper-ink);
  border-block:var(--frame) solid var(--paper-ink);
}
.section--paper h1,.section--paper h2,.section--paper h3,.section--paper h4{color:var(--paper-ink)}
.section--paper .prose,.section--paper p{color:var(--paper-ink)}
.section--paper .eyebrow{color:#8a6415}
.section--paper .stat-num{color:#8a4a12}
.section--paper .muted{color:#5d6a60}

.muted{color:var(--moss);font-size:14px}

.grid{display:grid;gap:var(--gap)}
.grid--halves{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--thirds{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.grid--quarters{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.grid--asym{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-9{grid-column:span 9}
.span-12{grid-column:span 12}

/* ---------- 4. SKIP LINK ---------- */
.skip-link{
  position:fixed;
  top:-120px;
  left:12px;
  z-index:200;
  padding:11px 18px;
  background:var(--amber);
  color:var(--paper-ink);
  font-weight:800;
  font-size:14px;
  border:2px solid var(--ink);
  transition:top .16s ease;
}
.skip-link:focus{top:12px}

/* ---------- 5. HEADER FRAME ---------- */
.frame-header{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--ink);
  border-bottom:var(--frame) solid var(--grass-mid);
  isolation:isolate;
}
.frame-header::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,var(--amber) 0 34%,var(--cyan) 34% 62%,var(--red) 62% 100%);
  pointer-events:none;
}
.frame-header__inner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(10px,2vw,30px);
  min-height:var(--header-h);
  padding-block:10px;
}

/* brand */
.brand-mark{
  display:flex;
  align-items:center;
  gap:12px;
  padding-right:6px;
  flex:none;
}
.brand-mark__tick{
  width:10px;
  height:28px;
  flex:none;
  background:var(--amber);
  box-shadow:5px 0 0 var(--grass-mid);
}
.brand-mark__text{display:flex;flex-direction:column;line-height:1.1}
.brand-mark__name{font-size:clamp(16px,1.5vw,19px);font-weight:900;letter-spacing:.03em;color:var(--line)}
.brand-mark__sub{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--moss)}

/* nav */
.frame-nav{min-width:0}
.nav-list{display:flex;align-items:center;gap:clamp(2px,.8vw,10px);flex-wrap:wrap}
.nav-link{
  display:inline-block;
  position:relative;
  padding:9px 12px;
  font-size:15px;
  font-weight:700;
  color:var(--line);
  border:var(--frame) solid transparent;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.nav-link:hover{color:var(--amber);background:var(--grass);border-color:var(--grass-mid)}
.nav-link[aria-current="page"]{
  color:var(--paper-ink);
  background:var(--amber);
  border-color:var(--amber);
  box-shadow:inset 0 -3px 0 var(--red);
}
.nav-footnote{display:none}

/* aside */
.frame-header__aside{display:flex;align-items:center;gap:14px;flex:none}
.round-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 11px;
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--cyan);
  border:1px dashed var(--grass-mid);
  white-space:nowrap;
}
.round-chip__dot{
  width:7px;height:7px;flex:none;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(87,211,198,.18);
}

/* toggle */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:var(--grass);
  color:var(--line);
  border:var(--frame) solid var(--grass-mid);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:4px;width:18px}
.nav-toggle__bars i{display:block;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-toggle__label{line-height:1}
.frame-header[data-open] .nav-toggle{background:var(--amber);color:var(--paper-ink);border-color:var(--amber)}
.frame-header[data-open] .nav-toggle__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.frame-header[data-open] .nav-toggle__bars i:nth-child(2){opacity:0}
.frame-header[data-open] .nav-toggle__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* progress */
.frame-header__progress{height:3px;background:var(--grass-mid);position:relative;overflow:hidden}
.progress-bar{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--amber),var(--cyan));
  transition:width .12s linear;
}

/* ---------- 6. BUTTONS / PILLS / EYEBROW ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 22px;
  font-weight:800;
  font-size:15px;
  line-height:1;
  letter-spacing:.02em;
  color:var(--line);
  background:transparent;
  border:var(--frame) solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn--amber{
  background:var(--amber);
  color:var(--paper-ink);
  border-color:var(--amber);
  box-shadow:var(--shadow-hard);
}
.btn--amber:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-lg)}
.btn--ghost{background:var(--grass);color:var(--line);border-color:var(--grass-mid)}
.btn--ghost:hover{background:var(--grass-mid);color:var(--paper);transform:translate(-2px,-2px);box-shadow:var(--shadow-hard)}
.btn--sm{padding:10px 16px;font-size:13.5px}
.btn:active{transform:translate(0,0)}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--line);
  background:var(--grass-mid);
  border:1px solid var(--grass-mid);
  white-space:nowrap;
}
.pill--red{background:transparent;border-color:var(--red);color:var(--red)}
.pill--cyan{background:transparent;border-color:var(--cyan);color:var(--cyan)}
.pill--amber{background:transparent;border-color:var(--amber);color:var(--amber)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--amber);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:none}

/* ---------- 7. BREADCRUMB ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--moss);
}
.breadcrumb a{color:var(--moss);border-bottom:1px dashed transparent}
.breadcrumb a:hover{color:var(--amber);border-bottom-color:var(--amber)}
.breadcrumb__sep{color:var(--grass-mid)}

/* ---------- 8. PANELS ---------- */
.panel{
  position:relative;
  padding:clamp(18px,2.6vw,32px);
  background:var(--grass);
  border:var(--frame) solid var(--grass-mid);
}
.panel--cut{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.panel--shadow{box-shadow:var(--shadow-hard)}
.panel--paper{background:var(--paper);color:var(--paper-ink);border-color:var(--paper-ink)}
.panel--paper h3,.panel--paper .stat-num{color:var(--paper-ink)}

/* ---------- 9. MEDIA FRAMES (页面阶段放图占位) ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--grass);
  border:var(--frame) solid var(--grass-mid);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--square{aspect-ratio:1/1}
.media-frame__img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.68) contrast(1.06) brightness(.92);
}
.media-frame__placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--moss);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  background:repeating-linear-gradient(45deg,rgba(23,57,46,.9) 0 12px,rgba(14,36,29,.9) 12px 24px);
}
.media-frame__caption{
  position:absolute;
  left:0;
  bottom:0;
  max-width:100%;
  padding:6px 12px;
  background:var(--ink);
  color:var(--line);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
}
.media-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

/* ---------- 10. TABLES ---------- */
.table-scroll{
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--grass);
  border:var(--frame) solid var(--grass-mid);
}
.data-table{width:100%;min-width:620px;font-size:15px}
.data-table th,
.data-table td{
  padding:12px 16px;
  text-align:left;
  white-space:nowrap;
  border-bottom:1px solid var(--grass-mid);
}
.data-table thead th{
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--moss);
  background:var(--grass-mid);
}
.data-table tbody tr:nth-child(even){background:rgba(23,57,46,.45)}
.data-table tbody tr:hover{background:var(--grass-mid)}
.data-table tbody th,
.data-table tbody td:first-child{
  position:sticky;
  left:0;
  z-index:2;
  background:var(--grass);
}
.data-table tbody tr:nth-child(even) th,
.data-table tbody tr:nth-child(even) td:first-child{background:#102a21}
.data-table .num{text-align:right;color:var(--cyan)}

/* ---------- 11. FILTER BAR ---------- */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filter-btn{
  padding:9px 14px;
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--moss);
  background:transparent;
  border:var(--frame) solid var(--grass-mid);
  transition:color .16s ease,border-color .16s ease,background-color .16s ease;
}
.filter-btn:hover{color:var(--line);border-color:var(--line)}
.filter-btn[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--ink);font-weight:700}
.filter-count{font-family:var(--font-mono);font-size:12px;color:var(--moss)}
[data-filter-item][hidden]{display:none !important}

/* ---------- 12. TIMELINE ---------- */
.timeline{position:relative;display:grid;gap:18px;padding-left:28px}
.timeline::before{
  content:"";
  position:absolute;
  left:9px;
  top:6px;
  bottom:6px;
  width:2px;
  background:repeating-linear-gradient(180deg,var(--grass-mid) 0 8px,transparent 8px 16px);
}
.timeline__node{position:relative;padding-left:4px}
.timeline__node::before{
  content:"";
  position:absolute;
  left:-24px;
  top:.55em;
  width:10px;
  height:10px;
  background:var(--grass-mid);
  border:2px solid var(--grass-mid);
}
.timeline__node.is-active::before{background:var(--amber);border-color:var(--amber)}
.timeline__label{
  display:block;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--moss);
}

/* ---------- 13. FOOTER ---------- */
.site-foot{
  position:relative;
  margin-top:clamp(56px,8vw,120px);
  background:var(--grass);
  border-top:3px solid var(--amber);
}
.site-foot::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:8px;
  background:repeating-linear-gradient(90deg,var(--grass-mid) 0 18px,transparent 18px 36px);
  opacity:.6;
  pointer-events:none;
}
.site-foot__inner{
  display:grid;
  grid-template-columns:1.5fr repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,46px);
  padding-block:clamp(38px,5vw,68px);
}
.site-foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.site-foot__logo{
  font-size:clamp(20px,2.2vw,26px);
  font-weight:900;
  letter-spacing:.02em;
  color:var(--paper);
  border-bottom:3px solid var(--amber);
  padding-bottom:2px;
}
.site-foot__brandline{font-size:14.5px;color:var(--line)}
.site-foot__note{font-size:13.5px;color:var(--moss);max-width:34em}

.foot-col__title{
  padding-bottom:10px;
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber);
  border-bottom:1px dashed var(--grass-mid);
}
.foot-list{display:grid;gap:9px}
.foot-list a{
  font-size:15px;
  color:var(--line);
  border-bottom:1px dashed transparent;
  transition:color .15s ease,border-color .15s ease;
}
.foot-list a:hover{color:var(--amber);border-bottom-color:var(--amber)}

.site-foot__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 28px;
  padding-block:18px 28px;
  border-top:1px dashed var(--grass-mid);
}
.foot-contact{font-size:13.5px;color:var(--moss)}
.foot-legal{font-size:12px;letter-spacing:.08em;color:var(--moss)}

/* ---------- 14. MOTION / REVEAL ---------- */
.js-ready .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.js-ready .reveal.is-visible{opacity:1;transform:none}
.js-ready .reveal--delay{transition-delay:.09s}

/* ---------- 15. FOCUS ---------- */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.btn--amber:focus-visible{outline-color:var(--paper)}
.filter-btn:focus-visible{outline-color:var(--cyan)}

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width:1180px){
  .round-chip{display:none}
}
@media (max-width:980px){
  :root{--header-h:64px}
  html{scroll-padding-top:88px}
  .frame-header__inner{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
  }
  .frame-header__aside{display:none}
  .nav-toggle{display:inline-flex;justify-self:end}
  .frame-nav{
    grid-column:1 / -1;
    display:none;
    padding-top:12px;
    margin-top:4px;
    border-top:1px dashed var(--grass-mid);
  }
  .frame-header[data-open] .frame-nav{display:block}
  .nav-list{flex-direction:column;align-items:stretch;gap:6px}
  .nav-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 14px;
    background:var(--grass);
    border-color:var(--grass-mid);
  }
  .nav-link::after{content:"→";color:var(--moss);font-family:var(--font-mono)}
  .nav-link[aria-current="page"]::after{color:var(--paper-ink)}
  .nav-footnote{
    display:block;
    padding:12px 4px 4px;
    font-size:11.5px;
    letter-spacing:.1em;
    color:var(--moss);
  }
  .grid--asym{grid-template-columns:1fr}
  .grid-12{grid-template-columns:1fr}
  .grid-12>*{grid-column:1 / -1 !important}
  .site-foot__inner{grid-template-columns:1fr 1fr}
  .site-foot__brand{grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:16px}
  .site-foot__inner{grid-template-columns:1fr;gap:26px}
  .site-foot__meta{flex-direction:column;align-items:flex-start}
  .panel{padding:16px}
  .data-table{min-width:520px}
  .btn{width:auto}
}

/* ---------- 17. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-ready .reveal,
  .js-ready .reveal.is-visible{opacity:1 !important;transform:none !important}
}