/* ==========================================================================
   完美体育赛事 · 共享样式  /assets/site.css
   深空黑 + 冷光青 · 框景窗口 + 刻度线 + 大圆角
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --ink:#05070B;
  --panel:#0B1418;
  --teal:#0E2A2E;
  --indigo:#1A1233;
  --cyan:#22D3EE;
  --lime:#7CF68A;
  --orange:#FF7A2F;
  --wine:#6E2A3A;
  --wine-ink:#E08CA0;
  --paper:#E7F6F8;
  --muted:#8FA3A8;

  --line:rgba(34,211,238,.24);
  --line-soft:rgba(143,163,168,.18);
  --paper-soft:rgba(231,246,248,.82);
  --paper-dim:rgba(231,246,248,.68);

  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:34px;

  --header-h:76px;
  --maxw:1280px;
  --gutter:clamp(16px,4vw,40px);

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

  --ease:cubic-bezier(.22,.68,.28,1);
  --rail-fade:var(--ink);
}
@media (max-width:640px){ :root{ --header-h:66px; } }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:rgba(34,211,238,.35) transparent;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-display);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; }
hr{ border:0; }
a{ color:var(--cyan); text-decoration:none; }
::selection{ background:rgba(34,211,238,.35); color:#04191D; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* ---------- 3. 中文排版 ---------- */
h1,h2,h3,h4{ font-weight:900; letter-spacing:-.02em; line-height:1.15; }
h1{ font-size:clamp(40px,6vw,72px); }
h2{ font-size:clamp(26px,3vw,40px); }
h3{ font-size:20px; }
h4{ font-size:17px; }
p{ text-wrap:pretty; }

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  left:16px;
  top:-72px;
  z-index:200;
  padding:12px 20px;
  border-radius:999px;
  background:var(--cyan);
  color:#04191D;
  font-weight:700;
  font-size:14px;
  transition:top .22s var(--ease);
}
.skip-link:focus{ top:14px; }

/* ---------- 5. 布局容器 ---------- */
.container,
.header-inner,
.footer-inner,
.footer-base{
  width:min(calc(100% - 2 * var(--gutter)), var(--maxw));
  margin-inline:auto;
}
.container--narrow{ width:min(calc(100% - 2 * var(--gutter)), 820px); }

#main-content{ display:block; padding-top:var(--header-h); }
#main-content:focus{ outline:none; }

.section{ position:relative; padding:clamp(56px,8vw,112px) 0; }
.section--tight{ padding:clamp(36px,5vw,64px) 0; }
.section--panel{ background:var(--panel); }
.section--teal{ background:linear-gradient(180deg,var(--teal),#0A1F22); }
.section--indigo{ background:linear-gradient(180deg,var(--indigo),#120C26); }
.section--edge{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.section__head{
  display:grid;
  gap:14px;
  max-width:66ch;
  margin-bottom:clamp(24px,4vw,52px);
}
.page-head{
  display:grid;
  gap:16px;
  padding:clamp(40px,6vw,84px) 0 clamp(24px,4vw,44px);
}
.page-head__lead{
  max-width:62ch;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.8;
  color:var(--paper-soft);
}

.grid{ display:grid; gap:clamp(16px,2.2vw,28px); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--sidebar{ grid-template-columns:240px minmax(0,1fr); align-items:start; }

@media (max-width:1100px){
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .grid--2,.grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--sidebar{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
}

.rule{ height:1px; background:var(--line-soft); margin:clamp(24px,4vw,48px) 0; }

.sticky-rail{
  position:sticky;
  top:calc(var(--header-h) + 20px);
  display:grid;
  gap:16px;
}

/* ---------- 6. 文字与数据 ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--cyan);
  font-weight:700;
}
.eyebrow::before{
  content:"";
  width:26px;
  height:1px;
  background:currentColor;
  flex:none;
}
.label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
}
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:clamp(28px,4vw,56px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--paper);
}
.num--cyan{ color:var(--cyan); }
.num--lime{ color:var(--lime); }
.num--down{ color:var(--wine-ink); }

.prose{
  max-width:68ch;
  font-size:16px;
  line-height:1.75;
  color:var(--paper-soft);
}
.prose > * + *{ margin-top:1.1em; }
.prose h2{ margin-top:1.9em; font-size:clamp(24px,2.4vw,32px); color:var(--paper); }
.prose h3{ margin-top:1.6em; color:var(--paper); }
.prose ul,.prose ol{ padding-left:1.3em; }
.prose li + li{ margin-top:.4em; }
.prose a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--paper); font-weight:900; }
.prose blockquote{
  padding:4px 0 4px 20px;
  border-left:2px solid var(--cyan);
  color:var(--paper);
}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:var(--cyan);
}
.link-arrow::after{ content:"→"; transition:transform .22s var(--ease); }
.link-arrow:hover::after{ transform:translateX(4px); }

/* ---------- 7. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 22px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--paper);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn--cta{
  background:var(--orange);
  border-color:transparent;
  color:#180A02;
  box-shadow:0 16px 34px -20px rgba(255,122,47,.9);
}
.btn--cta:hover{ background:#ff8d4d; }
.btn--ghost{ background:rgba(34,211,238,.07); border-color:var(--line); color:var(--paper); }
.btn--ghost:hover{ background:rgba(34,211,238,.14); border-color:var(--cyan); }
.btn--sm{ padding:10px 17px; font-size:13px; }
.btn--block{ width:100%; }

/* ---------- 8. 胶囊筛选 ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 15px;
  border-radius:999px;
  border:1px solid var(--line-soft);
  background:rgba(34,211,238,.05);
  color:var(--paper-soft);
  font-size:13px;
  line-height:1.4;
  text-decoration:none;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.pill:hover{ border-color:var(--line); color:var(--paper); }
.pill[aria-pressed="true"],
.pill.is-active{
  background:rgba(124,246,138,.14);
  border-color:rgba(124,246,138,.55);
  color:var(--lime);
}
.pill--cyan[aria-pressed="true"],
.pill--cyan.is-active{
  background:rgba(34,211,238,.16);
  border-color:var(--line);
  color:var(--cyan);
}

/* ---------- 9. 框景窗口 / 卡片 / 刻度 ---------- */
.ticks{
  height:10px;
  width:100%;
  pointer-events:none;
  opacity:.6;
  background-image:repeating-linear-gradient(90deg, rgba(34,211,238,.5) 0 1px, transparent 1px 14px);
  background-repeat:repeat-x;
  background-position:left center;
}
.ticks--ruled{ height:6px; opacity:.4; }

.frame{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(22px,3vw,44px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(34,211,238,.10), transparent 58%),
    var(--panel);
  overflow:hidden;
}
.frame__ticks{
  position:absolute;
  left:18px;
  right:18px;
  height:8px;
  pointer-events:none;
  opacity:.55;
  background-image:repeating-linear-gradient(90deg, rgba(34,211,238,.55) 0 1px, transparent 1px 18px);
  background-repeat:repeat-x;
}
.frame__ticks--top{ top:12px; }
.frame__ticks--bottom{ bottom:12px; }

.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,28px);
  transition:border-color .24s var(--ease), transform .24s var(--ease);
}
.card:hover{ border-color:var(--line); transform:translateY(-3px); }
.card--glass{
  background:linear-gradient(160deg, rgba(34,211,238,.10), rgba(11,20,24,.92));
  backdrop-filter:blur(6px);
}

/* ---------- 10. 图片容器 ---------- */
.media{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line-soft);
  background:
    linear-gradient(135deg, rgba(34,211,238,.10), rgba(26,18,51,.55)),
    repeating-linear-gradient(45deg, rgba(143,163,168,.10) 0 2px, transparent 2px 11px),
    var(--panel);
}
.media img,
.media > svg{ width:100%; height:100%; object-fit:cover; }
.media--wide{ aspect-ratio:21/9; }
.media--16x9{ aspect-ratio:16/9; }
.media--4x3{ aspect-ratio:4/3; }
.media--1x1{ aspect-ratio:1/1; }
.media--tall{ aspect-ratio:3/4; }
.media__tag{ position:absolute; top:14px; left:14px; }
.media__caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:16px 18px 14px;
  font-size:12.5px;
  color:var(--paper-dim);
  background:linear-gradient(transparent, rgba(5,7,11,.88));
}

/* ---------- 11. 横向轨道 ---------- */
.rail{ position:relative; }
.rail__track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:4px 4px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.rail__track::-webkit-scrollbar{ height:6px; }
.rail__track::-webkit-scrollbar-track{ background:transparent; }
.rail__track::-webkit-scrollbar-thumb{ background:rgba(34,211,238,.35); border-radius:99px; }
.rail__item{ flex:0 0 min(300px,78vw); scroll-snap-align:start; }
.rail__fade{
  position:absolute;
  top:0; bottom:18px; right:0;
  width:72px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--rail-fade));
}

/* ---------- 12. 对照矩阵 ---------- */
.matrix-scroll{
  overflow-x:auto;
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:var(--panel);
}
.matrix{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.matrix th,
.matrix td{
  padding:13px 16px;
  text-align:left;
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
.matrix thead th{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--muted);
}
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td{ border-bottom:0; }
.matrix tbody tr:hover{ background:rgba(34,211,238,.05); }
.matrix .is-up{ color:var(--lime); }
.matrix .is-down{ color:var(--wine-ink); }
.matrix .is-value{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---------- 13. 面包屑 ---------- */
.breadcrumb{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; }
.breadcrumb li{ display:inline-flex; align-items:center; gap:8px; }
.breadcrumb li + li::before{ content:"/"; color:rgba(143,163,168,.45); }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--cyan); }
.breadcrumb [aria-current="page"]{ color:var(--paper); }

/* ---------- 14. 页头 ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  color:var(--paper);
  background:linear-gradient(180deg, rgba(5,7,11,.55), rgba(5,7,11,0));
  transition:background .32s var(--ease), box-shadow .32s var(--ease), backdrop-filter .32s var(--ease);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
  opacity:.9;
}
.site-header.is-solid{
  background:rgba(5,7,11,.88);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 20px 44px -34px rgba(0,0,0,.95);
}

.scroll-progress{
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  overflow:hidden;
  pointer-events:none;
}
.scroll-progress span{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--cyan), var(--lime));
  transition:width .12s linear;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:var(--header-h);
}

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--paper);
  text-decoration:none;
  flex:none;
}
.brand__mark{
  width:36px;
  height:36px;
  flex:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;
  gap:3px;
  padding:8px;
  border-radius:13px;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(34,211,238,.32), transparent 62%),
    var(--panel);
}
.brand__mark i{ display:block; border-radius:2px; background:var(--cyan); opacity:.9; }
.brand__mark i:nth-child(3){ grid-column:span 2; background:var(--lime); opacity:.85; }
.brand__text{ display:grid; gap:1px; }
.brand__line{
  display:block;
  font-size:17px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.25;
}
.brand__tagline{
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--muted);
  line-height:1.3;
}

/* 导航 */
.site-nav{ display:flex; align-items:center; gap:26px; }
.nav-list{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  counter-reset:nav;
}
.nav-list__item{ display:block; }
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  padding:9px 13px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  color:var(--paper-dim);
  text-decoration:none;
  transition:color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-link::before{
  counter-increment:nav;
  content:counter(nav,decimal-leading-zero);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--muted);
}
.nav-link:hover{ color:var(--paper); background:rgba(34,211,238,.08); }
.nav-link[aria-current="page"]{
  color:var(--paper);
  background:rgba(34,211,238,.14);
  box-shadow:inset 0 0 0 1px var(--line);
}
.nav-link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:4px;
  height:2px;
  border-radius:2px;
  background:var(--cyan);
}
.nav-cta{ flex:none; }

/* 移动导航按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(11,20,24,.72);
  color:var(--paper);
  font-size:13px;
  font-weight:700;
}
.nav-toggle__bar,
.nav-toggle__bars{ display:inline-flex; flex-direction:column; gap:4px; width:18px; }
.nav-toggle__bars i{
  display:block;
  height:1.5px;
  width:100%;
  border-radius:2px;
  background:var(--cyan);
  transition:transform .26s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width:960px){
  .nav-toggle{ display:inline-flex; }

  .site-nav{
    position:fixed;
    top:calc(var(--header-h) + 8px);
    left:var(--gutter);
    right:var(--gutter);
    bottom:auto;
    max-height:calc(100vh - var(--header-h) - 32px);
    overflow-y:auto;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:18px;
    border-radius:var(--r-lg);
    border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(11,20,24,.98), rgba(5,7,11,.99));
    box-shadow:0 34px 70px -34px rgba(0,0,0,.95);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .site-nav[data-open]{ opacity:1; visibility:visible; transform:none; }
  .nav-list{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav-link{
    justify-content:flex-start;
    padding:14px 16px;
    border-radius:var(--r-md);
    font-size:16px;
    background:rgba(34,211,238,.04);
  }
  .nav-cta{ width:100%; }
  body.nav-open{ overflow:hidden; }
}

@media (max-width:560px){
  .brand__tagline{ display:none; }
  .nav-toggle__label{ display:none; }
}

/* ---------- 15. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(56px,8vw,110px);
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, var(--ink) 0%, var(--panel) 38%, var(--ink) 100%);
  color:var(--paper);
}
.site-footer > .ticks{ position:absolute; top:-5px; left:0; right:0; opacity:.35; }

.footer-inner{
  display:grid;
  grid-template-columns:1.55fr 1fr 1fr 1.45fr;
  gap:clamp(24px,3vw,44px);
  padding:clamp(44px,6vw,80px) 0 clamp(28px,3vw,40px);
  border-bottom:1px dashed var(--line-soft);
}
.footer-brand{ display:grid; gap:16px; align-content:start; max-width:34ch; }
.footer-cta{ justify-self:start; }
.footer-note{
  font-size:12.5px;
  line-height:1.75;
  color:var(--muted);
  max-width:38ch;
}
.footer-col{ display:grid; gap:16px; align-content:start; }
.footer-col__title{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--muted);
}
.footer-col__title::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line-soft);
  min-width:20px;
}
.footer-list{ list-style:none; display:grid; gap:11px; }
.footer-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:var(--paper-soft);
  text-decoration:none;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.footer-link::before{
  content:"";
  width:7px;
  height:1px;
  flex:none;
  background:var(--cyan);
  opacity:.55;
  transition:width .2s var(--ease);
}
.footer-link:hover{ color:var(--cyan); transform:translateX(2px); }
.footer-link:hover::before{ width:13px; opacity:1; }

.footer-contact{ list-style:none; display:grid; gap:14px; }
.footer-contact__row{ display:grid; gap:3px; }
.footer-contact__key{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--muted);
}
.footer-contact__val{
  font-size:13.5px;
  line-height:1.6;
  color:var(--paper);
  word-break:break-word;
}
.footer-col--contact .footer-note{ margin-top:2px; }

.footer-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 28px;
  padding:22px 0 32px;
  font-size:12.5px;
  color:var(--muted);
}
.footer-meta{ display:flex; flex-wrap:wrap; gap:8px 20px; font-family:var(--font-mono); }
.footer-icp{ color:var(--paper-dim); }

@media (max-width:1080px){
  .footer-inner{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
  .footer-base{ flex-direction:column; align-items:flex-start; }
  .footer-brand{ max-width:none; }
}

/* ---------- 16. 动效 ---------- */
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .52s var(--ease), transform .52s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

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