/* ===== 88新博体育 /assets/site.css ===== */

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html,body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0;}
ul,ol{list-style:none;}
img,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:2px;}

/* ---- tokens ---- */
:root{
  --c-base:#06231C;
  --c-carbon:#0B0F0E;
  --c-turf:#103A2E;
  --c-accent:#3DF2C8;
  --c-signal:#FF7A2F;
  --c-mint:#A8F5DF;
  --c-fog:#EAF4F0;
  --c-ash:#8FA39B;
  --c-deep:#0A2E3A;
  --c-glass:rgba(234,244,240,0.06);
  --c-glass-strong:rgba(234,244,240,0.11);
  --c-line:rgba(61,242,200,0.22);
  --c-line-soft:rgba(234,244,240,0.10);
  --c-shadow:0 18px 48px rgba(0,0,0,0.45);

  --font-display:"Helvetica Neue","Arial Narrow","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --font-data:"SFMono-Regular","JetBrains Mono",Consolas,"Courier New",monospace;

  --step-12:0.75rem;
  --step-14:0.875rem;
  --step-16:1rem;
  --step-18:1.125rem;
  --step-24:1.5rem;
  --step-32:2rem;
  --step-48:3rem;
  --step-72:4.5rem;
  --step-96:6rem;

  --wrap:1200px;
  --wrap-wide:1400px;
  --wrap-narrow:820px;
  --gutter:clamp(1rem,4vw,3rem);
  --radius:14px;
  --radius-sm:8px;
  --slice:8deg;
  --header-h:76px;
}

/* ---- base ---- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background-color:var(--c-base);
  background-image:
    linear-gradient(rgba(61,242,200,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,242,200,0.045) 1px,transparent 1px),
    radial-gradient(circle at 82% 12%,rgba(61,242,200,0.10),transparent 46%),
    radial-gradient(circle at 12% 88%,rgba(10,46,58,0.85),transparent 55%);
  background-size:64px 64px,64px 64px,100% 100%,100% 100%;
  background-attachment:fixed;
  color:var(--c-fog);
  font-family:var(--font-body);
  font-size:var(--step-16);
  line-height:1.75;
  letter-spacing:0.01em;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;font-weight:800;letter-spacing:-0.02em;}
strong{font-weight:700;color:var(--c-fog);}
::selection{background:var(--c-accent);color:var(--c-base);}

.skip-link{
  position:fixed;top:-100px;left:16px;z-index:200;
  padding:10px 18px;border-radius:999px;
  background:var(--c-accent);color:var(--c-base);
  font-size:var(--step-14);font-weight:700;
  transition:top .18s ease;
}
.skip-link:focus{top:16px;}

/* ---- layout helpers ---- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-wide{width:100%;max-width:var(--wrap-wide);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-narrow{width:100%;max-width:var(--wrap-narrow);margin-inline:auto;padding-inline:var(--gutter);}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--step-24);}

/* ---- header ---- */
.site-header{
  position:sticky;top:0;z-index:120;
  padding:0.75rem var(--gutter) 0;
  transition:padding .25s ease;
}
.header-shell{
  width:100%;max-width:var(--wrap-wide);margin-inline:auto;
  display:flex;align-items:center;gap:var(--step-16);
  padding:0.6rem 1.1rem;
  border:1px solid var(--c-line-soft);
  border-radius:999px;
  background:var(--c-glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--c-shadow);
  transition:background .25s ease,border-color .25s ease,padding .25s ease,max-width .25s ease;
}
.site-header.is-scrolled .header-shell{
  background:rgba(6,35,28,0.82);
  border-color:var(--c-line);
  padding:0.4rem 1rem;
  max-width:1180px;
}
.brand{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;min-width:0;}
.brand-mark{
  font-family:var(--font-display);font-weight:900;font-size:var(--step-18);
  letter-spacing:-0.01em;color:var(--c-fog);white-space:nowrap;
}
.brand-mark::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-radius:50%;background:var(--c-accent);vertical-align:middle;
  animation:pulse 2.4s ease-in-out infinite;}
.brand-meta{
  font-family:var(--font-data);font-size:11px;color:var(--c-ash);
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:0.04em;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.28;}}

.nav{margin-inline:auto;}
.nav-list{display:flex;align-items:center;gap:0.25rem;}
.nav-link{
  display:block;padding:0.42rem 0.85rem;border-radius:999px;
  font-size:var(--step-14);color:var(--c-ash);white-space:nowrap;
  transition:color .18s ease,background .18s ease;
}
.nav-link:hover{color:var(--c-fog);background:var(--c-glass-strong);}
.nav-link[aria-current="page"]{
  color:var(--c-base);background:var(--c-accent);font-weight:700;
}
.nav-link[aria-current="page"]:hover{color:var(--c-base);}

.league-dock{position:relative;flex:0 0 auto;}
.league-dock-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:0.48rem 0.95rem;border-radius:999px;
  border:1px solid var(--c-line);
  color:var(--c-accent);font-size:var(--step-14);font-weight:600;
  transition:background .18s ease,color .18s ease;
}
.league-dock-toggle:hover{background:var(--c-glass-strong);}
.league-dock-dot{width:7px;height:7px;border-radius:50%;background:var(--c-signal);}
.league-dock-list{
  position:absolute;top:calc(100% + 12px);right:0;width:230px;
  display:grid;gap:2px;padding:0.6rem;
  border:1px solid var(--c-line);border-radius:var(--radius);
  background:rgba(11,15,14,0.94);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:var(--c-shadow);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.league-dock[data-open] .league-dock-list{opacity:1;visibility:visible;transform:translateY(0);}
.league-link{
  display:block;padding:0.5rem 0.7rem;border-radius:var(--radius-sm);
  font-size:var(--step-14);color:var(--c-ash);
  border-left:2px solid transparent;
  transition:color .16s ease,background .16s ease,border-color .16s ease;
}
.league-link:hover{color:var(--c-fog);background:var(--c-glass);border-left-color:var(--c-accent);}

.nav-toggle{
  display:none;align-items:center;gap:8px;
  padding:0.42rem 0.8rem;border-radius:999px;
  border:1px solid var(--c-line);color:var(--c-fog);font-size:var(--step-14);
}
.nav-toggle-bar{display:block;width:16px;height:1.5px;background:var(--c-accent);}
.nav-toggle-text{font-size:var(--step-12);color:var(--c-ash);}

.header-strip{
  width:100%;max-width:var(--wrap-wide);margin-inline:auto;
  display:flex;justify-content:center;
}
.header-strip-inner{
  display:flex;align-items:center;gap:var(--step-16);
  padding:0.3rem 1rem;margin-top:6px;
  font-family:var(--font-data);font-size:11px;color:var(--c-ash);
  font-variant-numeric:tabular-nums;letter-spacing:0.05em;
}
.strip-tick{color:var(--c-accent);}
.strip-progress{
  display:block;width:120px;height:2px;border-radius:2px;
  background:rgba(234,244,240,0.12);overflow:hidden;
}
.strip-progress i{display:block;height:100%;width:0;background:var(--c-accent);transition:width .12s linear;}
.strip-note{color:var(--c-ash);}

/* ---- breadcrumb ---- */
.breadcrumb{padding:var(--step-24) 0 0;}
.breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;
  font-family:var(--font-data);font-size:var(--step-12);color:var(--c-ash);}
.breadcrumb-list li+li::before{content:"/";margin-right:0.5rem;color:rgba(143,163,155,0.5);}
.breadcrumb-list a:hover{color:var(--c-accent);}
.breadcrumb-list [aria-current="page"]{color:var(--c-fog);}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0.78rem 1.5rem;border-radius:999px;
  font-size:var(--step-14);font-weight:700;letter-spacing:0.02em;
  border:1px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--c-accent);color:var(--c-base);}
.btn-primary:hover{background:var(--c-mint);}
.btn-ghost{border-color:var(--c-line);color:var(--c-accent);}
.btn-ghost:hover{background:var(--c-glass-strong);}
.btn-signal{background:var(--c-signal);color:var(--c-carbon);}

/* ---- section heads ---- */
.section-head{margin-bottom:var(--step-32);}
.section-kicker{
  display:inline-block;font-family:var(--font-data);font-size:var(--step-12);
  letter-spacing:0.16em;text-transform:uppercase;color:var(--c-accent);
  padding-bottom:6px;border-bottom:1px solid var(--c-line);
}
.section-title{
  margin-top:var(--step-16);font-size:clamp(1.75rem,4.4vw,2.6rem);
  font-weight:900;color:var(--c-fog);
}
.section-lede{margin-top:var(--step-16);max-width:56ch;color:var(--c-ash);font-size:var(--step-16);}

/* ---- structures ---- */
.rule-label{
  display:flex;align-items:center;gap:var(--step-16);
  margin:var(--step-48) 0;color:var(--c-ash);
  font-family:var(--font-data);font-size:var(--step-12);letter-spacing:0.1em;
}
.rule-label::before,.rule-label::after{content:"";height:1px;flex:1;background:var(--c-line-soft);}
.rule-label::before{background:linear-gradient(90deg,transparent,var(--c-line));}
.rule-label::after{background:linear-gradient(90deg,var(--c-line),transparent);}

.slice-block{
  position:relative;
  padding:var(--step-48) 0;
  clip-path:polygon(0 2.4%,100% 0,100% 97.6%,0 100%);
  background:linear-gradient(135deg,rgba(16,58,46,0.55),rgba(10,46,58,0.35));
}
.glass{
  background:var(--c-glass);
  border:1px solid var(--c-line-soft);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.solid-layer{background:var(--c-turf);border:1px solid var(--c-line-soft);border-radius:var(--radius);}

.tile{padding:var(--step-24);border-radius:var(--radius);background:var(--c-glass);border:1px solid var(--c-line-soft);}
.tile-wide{grid-column:span 12;}
.tile-half{grid-column:span 6;}
.tile-quarter{grid-column:span 3;}
.tile-title{font-family:var(--font-display);font-size:var(--step-24);font-weight:800;color:var(--c-fog);}
.tile-text{margin-top:0.6rem;color:var(--c-ash);font-size:var(--step-16);}
.tile-data{margin-top:var(--step-16);font-family:var(--font-data);font-size:var(--step-14);
  color:var(--c-accent);font-variant-numeric:tabular-nums;}

/* ---- chips / segmented / filter ---- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:0.36rem 0.85rem;border-radius:999px;
  border:1px solid var(--c-line-soft);background:var(--c-glass);
  font-size:var(--step-14);color:var(--c-ash);
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.chip:hover{color:var(--c-fog);border-color:var(--c-line);}
.chip.is-active{color:var(--c-fog);border-color:var(--c-signal);background:rgba(255,122,47,0.12);}
.chip.is-active::before{content:"✓";color:var(--c-accent);font-size:var(--step-12);}

.segmented{
  display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;
  border:1px solid var(--c-line-soft);border-radius:999px;background:var(--c-glass);
}
.segmented-btn{
  padding:0.42rem 1rem;border-radius:999px;
  font-size:var(--step-14);color:var(--c-ash);white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.segmented-btn:hover{color:var(--c-fog);}
.segmented-btn[aria-selected="true"],.segmented-btn.is-active{background:var(--c-accent);color:var(--c-base);font-weight:700;}
.segmented-panel[hidden]{display:none;}

.filter-input{
  width:100%;padding:0.85rem 1.1rem;border-radius:999px;
  background:var(--c-glass);border:1px solid var(--c-line);
  color:var(--c-fog);font-family:var(--font-body);font-size:var(--step-16);
}
.filter-input::placeholder{color:rgba(143,163,155,0.8);}
.filter-empty{display:none;padding:var(--step-24);color:var(--c-ash);text-align:center;}
.filter-empty.is-shown{display:block;}

/* ---- prose ---- */
.prose{max-width:34em;}
.prose p+p{margin-top:var(--step-16);}
.prose h2{margin-top:var(--step-48);font-size:clamp(1.5rem,3.2vw,2rem);color:var(--c-fog);}
.prose h3{margin-top:var(--step-32);font-size:var(--step-24);color:var(--c-fog);}
.prose ul{margin-top:var(--step-16);display:grid;gap:0.5rem;}
.prose ul li{padding-left:1.1rem;position:relative;color:var(--c-ash);}
.prose ul li::before{content:"";position:absolute;left:0;top:0.72em;width:6px;height:1px;background:var(--c-accent);}
.prose a{color:var(--c-accent);border-bottom:1px solid var(--c-line);}
.prose a:hover{border-bottom-color:var(--c-accent);}
.data-num{font-family:var(--font-data);font-variant-numeric:tabular-nums;color:var(--c-accent);}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* ---- figure ---- */
.figure-frame{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(150deg,var(--c-turf),var(--c-deep));
  border:1px solid var(--c-line-soft);
  aspect-ratio:16/9;
}
.figure-frame img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(1.05);}
.figure-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,35,28,0.15),rgba(11,15,14,0.62));
  pointer-events:none;
}
.figure-frame.is-wide{aspect-ratio:21/9;}
.figure-frame.is-tall{aspect-ratio:3/4;}
.figure-caption{
  margin-top:0.6rem;font-family:var(--font-data);font-size:var(--step-12);
  color:var(--c-ash);letter-spacing:0.04em;
}

/* ---- footer ---- */
.site-footer{
  margin-top:var(--step-96);
  background:var(--c-carbon);
  border-top:1px solid var(--c-line);
  padding:var(--step-48) 0 var(--step-32);
  color:var(--c-ash);
}
.footer-quick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--step-16);
  padding-bottom:var(--step-32);
  border-bottom:1px solid var(--c-line-soft);
}
.quick-item{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--step-16);border-radius:var(--radius);
  background:var(--c-glass);border:1px solid var(--c-line-soft);
  transition:border-color .18s ease,transform .18s ease;
}
.quick-item:hover{border-color:var(--c-accent);transform:translateY(-2px);}
.quick-kicker{font-family:var(--font-data);font-size:var(--step-12);color:var(--c-accent);letter-spacing:0.14em;}
.quick-label{font-size:var(--step-16);color:var(--c-fog);font-weight:600;}

.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:var(--step-32);
  padding:var(--step-48) 0;
}
.footer-mark{font-family:var(--font-display);font-size:var(--step-24);font-weight:900;color:var(--c-fog);}
.footer-tagline{margin-top:0.6rem;max-width:30ch;font-size:var(--step-14);color:var(--c-ash);}
.footer-col-title{
  font-family:var(--font-data);font-size:var(--step-12);letter-spacing:0.16em;
  text-transform:uppercase;color:var(--c-fog);margin-bottom:var(--step-16);
}
.footer-links{display:grid;gap:0.45rem;font-size:var(--step-14);}
.footer-links a{color:var(--c-ash);transition:color .16s ease;}
.footer-links a:hover{color:var(--c-accent);}
.footer-note{margin-top:var(--step-16);font-size:var(--step-12);line-height:1.7;color:rgba(143,163,155,0.85);}

.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--step-16);
  padding-top:var(--step-24);border-top:1px solid var(--c-line-soft);
  font-family:var(--font-data);font-size:var(--step-12);color:var(--c-ash);
}
.footer-coord{color:rgba(143,163,155,0.7);letter-spacing:0.06em;}

/* ---- responsive ---- */
@media (max-width:1080px){
  .tile-quarter{grid-column:span 6;}
}
@media (max-width:900px){
  .nav-toggle{display:inline-flex;margin-left:auto;order:2;}
  .league-dock{order:3;}
  .brand{order:1;}
  .nav{
    order:4;flex-basis:100%;margin:0;
    display:none;
    padding-top:0.6rem;
  }
  .nav[data-open]{display:block;}
  .nav-list{
    flex-direction:column;align-items:stretch;gap:2px;
    border-top:1px solid var(--c-line-soft);padding-top:0.6rem;
  }
  .nav-link{padding:0.7rem 0.9rem;border-radius:var(--radius-sm);font-size:var(--step-16);}
  .nav-link[aria-current="page"]{background:rgba(61,242,200,0.14);color:var(--c-accent);}
  .header-shell{flex-wrap:wrap;border-radius:var(--radius);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-quick{grid-template-columns:repeat(2,1fr);}
  .header-strip-inner{font-size:10px;gap:0.75rem;}
  .strip-progress{width:80px;}
}
@media (max-width:640px){
  :root{--header-h:64px;}
  .site-header{padding:0.5rem 0.75rem 0;}
  .header-shell{padding:0.5rem 0.75rem;}
  .brand-mark{font-size:var(--step-16);}
  .brand-meta{font-size:10px;}
  .strip-note{display:none;}
  .league-dock-list{right:-8px;width:200px;}
  .tile-half,.tile-quarter{grid-column:span 12;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-quick{grid-template-columns:1fr 1fr;}
  .grid-12{gap:var(--step-16);}
  .slice-block{clip-path:polygon(0 1.2%,100% 0,100% 98.8%,0 100%);}
  .foote
r-bottom{flex-direction:column;}
}

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