/* ==========================================================================
   环球体育CN中文官方站 — 共享样式 /assets/site.css
   夜场墨绿 · 蓝图网格 · 数据看板 · 锐利直角
   ========================================================================== */

/* --- reset ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dd,pre{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* --- tokens --------------------------------------------------------- */
:root{
  --ink:#0A2620;
  --deep:#0D2033;
  --grid:#7C8C88;
  --lime:#C6F04A;
  --orange:#FF6A2B;
  --moss:#35685A;
  --clay:#B4703F;
  --cream:#F3F1E7;
  --slate:#4E7C72;
  --copper:#D8A657;
  --void:#04110E;
  --mist:#B9C4C0;

  --line:rgba(124,140,136,.4);
  --line-strong:rgba(124,140,136,.72);
  --line-soft:rgba(124,140,136,.18);

  --font-display:"Barlow Condensed","Oswald","Noto Sans SC","Source Han Sans SC",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;

  --maxw:1440px;
  --gutter:24px;
  --header-h:72px;
  --dur:.18s;
}

/* --- base ----------------------------------------------------------- */
body{
  min-height:100vh;
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(124,140,136,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,140,136,.07) 1px,transparent 1px);
  background-size:64px 64px;
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 70% at 10% -12%,rgba(198,240,74,.08),transparent 62%),
    radial-gradient(90% 60% at 100% 0%,rgba(255,106,43,.06),transparent 58%),
    radial-gradient(80% 60% at 50% 110%,rgba(53,104,90,.22),transparent 70%);
}
#main-content{position:relative;z-index:1}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:.01em;line-height:1.12}
h1{font-size:clamp(40px,6.4vw,96px)}
h2{font-size:clamp(28px,3.4vw,40px)}
h3{font-size:clamp(20px,2vw,28px);line-height:1.24}
p{max-width:38em}

/* --- utilities ------------------------------------------------------ */
.container{width:min(1240px,100% - 48px);margin-inline:auto;position:relative}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.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-12{grid-column:span 12}
.divider{border-top:1px solid var(--line);margin-block:clamp(24px,4vw,48px)}
.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}

.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.label{display:inline-block;font:400 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grid)}
.prose{max-width:38em;font-size:16px;line-height:1.75;color:var(--cream)}
.prose p + p{margin-top:1.1em}
.prose strong{color:var(--lime);font-weight:600}
.prose a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(198,240,74,.4)}
.prose a:hover{border-bottom-color:var(--lime)}

/* --- 章节牌 --------------------------------------------------------- */
.section-mark{display:flex;align-items:flex-start;gap:clamp(12px,2vw,24px);padding-bottom:14px;border-bottom:1px solid var(--line)}
.section-num{font:700 clamp(40px,5.4vw,64px)/.86 var(--font-mono);color:var(--clay);letter-spacing:-.02em}
.section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.2vw,28px);line-height:1.2;padding-top:6px}
.section-title small{display:block;font:400 12px/2 var(--font-mono);letter-spacing:.12em;color:var(--grid)}

/* --- 标签 / 数据牌 -------------------------------------------------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line-strong);font:400 12px/1 var(--font-mono);letter-spacing:.12em;color:var(--mist)}
.tag--lime{border-color:var(--lime);color:var(--lime)}
.tag--orange{border-color:var(--orange);color:var(--orange)}
.tag--copper{border-color:var(--copper);color:var(--copper)}
.stat{border-left:2px solid var(--clay);padding-left:14px}
.stat-num{display:block;font-family:var(--font-mono);font-weight:700;font-size:clamp(34px,4.6vw,64px);line-height:1;color:var(--lime);letter-spacing:-.02em}
.stat-label{display:block;margin-top:8px;font:400 12px/1.4 var(--font-mono);letter-spacing:.12em;color:var(--grid)}

/* --- 按钮 ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border:1px solid var(--line-strong);background:transparent;color:var(--cream);
  font:600 14px/1 var(--font-display);letter-spacing:.1em;text-decoration:none;cursor:pointer;
  transition:background var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease;
}
.btn:hover{background:rgba(198,240,74,.12);border-color:var(--lime);color:var(--lime)}
.btn-primary{background:var(--lime);border-color:var(--lime);color:var(--void)}
.btn-primary:hover{background:var(--cream);border-color:var(--cream);color:var(--void)}
.btn-ghost{border-color:var(--line)}
.btn-ghost:hover{border-color:var(--copper);color:var(--copper);background:rgba(216,166,87,.08)}
.btn-cut{clip-path:polygon(0 0,100% 0,100% 66%,86% 100%,0 100%)}

/* --- 面包屑 --------------------------------------------------------- */
.breadcrumb{margin-bottom:clamp(16px,3vw,28px)}
.breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:400 12px/1.6 var(--font-mono);letter-spacing:.08em;color:var(--grid)}
.breadcrumb-list li + li::before{content:"/";margin-right:8px;color:var(--slate)}
.breadcrumb-list a{color:var(--mist);text-decoration:none;border-bottom:1px solid transparent}
.breadcrumb-list a:hover{color:var(--lime);border-bottom-color:var(--lime)}
.breadcrumb-list [aria-current="page"]{color:var(--copper)}

/* --- 图片容器 ------------------------------------------------------- */
.media-frame{position:relative;display:block;width:100%;overflow:hidden;background:var(--void);border:1px solid var(--line)}
.media-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(124,140,136,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,140,136,.16) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(120% 90% at 20% 10%,#000 20%,transparent 85%);
  -webkit-mask-image:radial-gradient(120% 90% at 20% 10%,#000 20%,transparent 85%);
}
.media-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.06) brightness(.9)}
.media-frame--16x9{aspect-ratio:16/9}
.media-frame--4x3{aspect-ratio:4/3}
.media-frame--1x1{aspect-ratio:1/1}
.media-frame--tall{aspect-ratio:3/4}
.media-frame__caption{
  position:absolute;left:0;bottom:0;z-index:2;max-width:90%;
  padding:8px 12px;background:rgba(4,17,14,.85);
  font:400 12px/1.5 var(--font-mono);letter-spacing:.08em;color:var(--mist);
  border-top:1px solid var(--line);
}

/* --- 折叠面板 ------------------------------------------------------- */
.fold{border:1px solid var(--line);background:rgba(4,17,14,.34)}
.fold + .fold{margin-top:-1px}
.fold-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:14px 16px;border:0;background:var(--moss);color:var(--cream);text-align:left;cursor:pointer;
  font:600 15px/1.4 var(--font-display);letter-spacing:.04em;
  transition:background var(--dur) ease;
}
.fold-head:hover{background:#3d7466}
.fold[data-open="true"] > .fold-head{background:var(--slate)}
.fold-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fold-arrow{
  flex:0 0 auto;width:10px;height:10px;border-right:1.5px solid var(--lime);border-bottom:1.5px solid var(--lime);
  transform:rotate(45deg);transition:transform var(--dur) ease;
}
.fold[data-open="true"] .fold-arrow{transform:rotate(-135deg)}
.fold-body{padding:16px;border-top:1px solid var(--line);background:rgba(13,32,51,.62);font-size:15px;color:var(--mist)}
.fold-body[hidden]{display:none}

/* --- skip link ------------------------------------------------------ */
.skip-link{
  position:absolute;left:12px;top:-120px;z-index:120;
  padding:10px 16px;background:var(--lime);color:var(--void);
  font:600 14px/1 var(--font-display);letter-spacing:.08em;text-decoration:none;
  transition:top .16s ease;
}
.skip-link:focus{top:12px}

/* --- 页头 ----------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(10,38,32,.94);
  border-bottom:1px solid var(--line-strong);
  color:var(--cream);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.header-frame{width:min(var(--maxw),100%);margin-inline:auto}
.header-inner{
  position:relative;display:flex;align-items:center;gap:clamp(10px,2vw,28px);
  min-height:var(--header-h);padding:0 var(--gutter);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:0 0 auto}
.brand-mark{
  display:grid;place-items:center;width:38px;height:38px;
  background:var(--lime);color:var(--void);
  font:700 15px/1 var(--font-mono);letter-spacing:.02em;
  clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
}
.brand-text{display:flex;flex-direction:column;gap:3px}
.brand-title{font:700 17px/1.1 var(--font-display);letter-spacing:.01em;white-space:nowrap}
.brand-sub{font:400 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--lime)}

.site-nav{margin-inline:auto}
.nav-list{display:flex;align-items:center;gap:clamp(2px,1vw,16px)}
.nav-link{
  display:flex;align-items:baseline;gap:6px;padding:10px 8px;
  color:var(--mist);text-decoration:none;
  font:500 15px/1 var(--font-body);letter-spacing:.04em;
  border-bottom:2px solid transparent;
  transition:color var(--dur) ease,border-color var(--dur) ease;
}
.nav-index{font:400 11px/1 var(--font-mono);color:var(--slate);letter-spacing:.06em}
.nav-link:hover{color:var(--lime)}
.nav-link[aria-current="page"]{color:var(--cream);border-bottom-color:var(--lime)}
.nav-link[aria-current="page"] .nav-index{color:var(--lime)}

.header-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.version-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border:1px solid var(--line);
  font:400 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--mist);white-space:nowrap;
}
.status-dot{
  width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 3px rgba(198,240,74,.16);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}

.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:10px 12px;background:transparent;border:1px solid var(--line-strong);color:var(--cream);
  font:600 13px/1 var(--font-display);letter-spacing:.08em;cursor:pointer;
}
.nav-toggle:hover{border-color:var(--lime);color:var(--lime)}
.nav-toggle-bars{position:relative;display:block;width:16px;height:2px;background:var(--lime)}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:var(--lime);
  transition:transform var(--dur) ease;
}
.nav-toggle-bars::before{top:-5px}
.nav-toggle-bars::after{top:5px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-5px) rotate(-45deg)}

/* --- 页脚 ----------------------------------------------------------- */
.site-footer{
  position:relative;z-index:1;
  margin-top:clamp(56px,8vw,112px);
  background:var(--deep);
  border-top:1px solid var(--line-strong);
  color:var(--mist);
}
.footer-frame{width:min(var(--maxw),100%);margin-inline:auto;padding:clamp(32px,5vw,64px) var(--gutter) 20px}
.footer-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(24px,4vw,52px)}
.footer-brand{display:flex;flex-direction:column;gap:10px}
.footer-brand-title{font:700 clamp(20px,2vw,26px)/1.2 var(--font-display);color:var(--cream)}
.footer-brand-sub{font:400 13px/1.6 var(--font-mono);letter-spacing:.06em;color:var(--grid)}
.footer-batch{display:flex;align-items:center;gap:10px;margin-top:4px}
.footer-batch .num{font-size:18px;color:var(--lime);font-weight:700}
.footer-heading{
  font:600 13px/1 var(--font-mono);letter-spacing:.16em;color:var(--copper);
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.footer-list li + li{margin-top:9px}
.footer-list a{
  color:var(--mist);text-decoration:none;font-size:15px;
  border-bottom:1px solid transparent;
  transition:color var(--dur) ease,border-color var(--dur) ease;
}
.footer-list a:hover{color:var(--lime);border-bottom-color:var(--lime)}
.footer-contact{
  margin-top:clamp(28px,4vw,48px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;
}
.footer-contact-line{font-size:14px;line-height:1.7;color:var(--mist);max-width:64em}
.footer-contact-line .mono{color:var(--cream)}
.footer-address{font-size:13px;line-height:1.7;color:var(--grid)}
.footer-bottom{
  margin-top:clamp(20px,3vw,32px);padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;
}
.footer-legal,.footer-copy{font:400 12px/1.7 var(--font-mono);letter-spacing:.06em;color:var(--grid)}
.footer-copy{margin-left:auto}

/* --- 返回顶部 / 进度 ------------------------------------------------ */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:80;
  padding:12px 16px;border:1px solid var(--line-strong);
  background:var(--void);color:var(--lime);cursor:pointer;
  font:600 13px/1 var(--font-display);letter-spacing:.08em;
  clip-path:polygon(0 0,100% 0,100% 68%,86% 100%,0 100%);
  transition:background var(--dur) ease,color var(--dur) ease;
}
.to-top:hover{background:var(--lime);color:var(--void)}
.to-top[hidden]{display:none}
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:90;
  background:var(--lime);transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}

/* --- 显现 ----------------------------------------------------------- */
html[data-js="on"] [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
html[data-js="on"] [data-reveal].is-visible{opacity:1;transform:none}

/* --- 响应式 --------------------------------------------------------- */
@media (min-width:1100px){
  .header-frame{border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .footer-frame{border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .header-inner{padding-inline:48px}
  .footer-frame{padding-inline:48px}
}
@media (max-width:1099px){
  .brand-title{font-size:16px}
  .version-badge{font-size:10px;letter-spacing:.06em}
}
@media (max-width:1023px){
  .header-inner{flex-wrap:wrap;gap:10px 12px;padding:12px 16px;min-height:0}
  .brand{order:1}
  .nav-toggle{display:inline-flex;order:2;margin-left:auto}
  .header-actions{order:3;flex:1 1 100%;justify-content:space-between;gap:10px}
  .site-nav{
    position:absolute;left:0;right:0;top:100%;
    max-height:0;overflow:hidden;margin:0;
    background:var(--deep);border-bottom:1px solid var(--line-strong);
    transition:max-height var(--dur) ease;
  }
  .site-nav[data-open="true"]{max-height:min(72vh,460px);overflow-y:auto}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:6px 16px 14px}
  .nav-link{justify-content:flex-start;padding:15px 2px;border-bottom:1px solid var(--line-soft);font-size:16px}
  .nav-link[aria-current="page"]{border-bottom-color:var(--lime)}
  .nav-index{min-width:22px}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-copy{margin-left:0}
}
@media (max-width:760px){
  h1{font-size:clamp(32px,9vw,52px)}
  .grid-12{grid-template-columns:1fr;gap:16px}
  .col-4,.col-5,.col-6,.col-7,.col-8{grid-column:span 1}
  .container{width:min(100% - 32px,1240px)}
  .prose{max-width:none}
  .brand-mark{width:32px;height:32px;font-size:13px}
  .brand-title{font-size:14px;white-space:normal;line-height:1.2}
  .brand-sub{display:none}
  .btn{padding:11px 14px;font-size:13px}
  .to-top{right:12px;bottom:12px;padding:10px 13px;font-size:12px}
}
@media (max-width:520px){
  .footer-top{grid-template-columns:1fr;gap:26px}
  .footer-bottom{flex-direction:column;gap:6px}
  .version-badge{padding:7px 8px}
  .header-actions .btn{flex:0 0 auto}
}

/* --- 动效降级 ------------------------------------------------------- */
@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[data-js="on"] [data-reveal]{opacity:1;transform:none}
  .status-dot{animation:none}
}