/* ============================================================
   火狐体育CN · 共享站点样式 /assets/site.css
   基调：炭黑底 + 深夜球场墨绿 + 火狐橙信号 + 荧光青数据
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root{
  --ink:#0B0F0E;
  --night:#0F2A24;
  --panel:#173F35;
  --paper:#F2F5F4;
  --orange:#FF5A1F;
  --muted:#8A9A94;
  --line:#263531;
  --cyan:#38F2D0;
  --amber:#FFB020;
  --orange-deep:#B83A10;

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

  --wrap:1240px;
  --gutter:24px;
  --dur:180ms;
  --ease:cubic-bezier(.2,.6,.2,1);
  --header-h:72px;
}

@media (max-width:640px){
  :root{ --gutter:18px; --header-h:64px; }
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 48px);
}

body,
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{ margin:0; }

ul,ol{ padding:0; list-style:none; }

img,svg,video{ display:block; max-width:100%; }

button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

a{ color:inherit; text-decoration:none; }

table{ border-collapse:collapse; width:100%; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}

/* ---------- 3. 中文排版基底 ---------- */
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

p + p{ margin-top:1.2em; }

h1,h2,h3,h4{
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  text-wrap:balance;
}
h1{ font-size:clamp(34px,5vw,64px); }
h2{ font-size:clamp(26px,3.4vw,40px); }
h3{ font-size:clamp(20px,2.2vw,28px); }
h4{ font-size:18px; letter-spacing:-.01em; }

strong{ font-weight:800; }

#main-content{
  display:block;
  min-height:60vh;
  scroll-margin-top:calc(var(--header-h) + 24px);
}

/* ---------- 4. 通用工具 ---------- */
.container{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  top:0;left:0;
  z-index:200;
  transform:translateY(-120%);
  background:var(--orange);
  color:#0B0F0E;
  padding:12px 20px;
  font-weight:800;
  font-size:14px;
  letter-spacing:.04em;
  transition:transform var(--dur) var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

.link{
  color:var(--paper);
  border-bottom:1px solid var(--line);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link:hover,.link:focus-visible{
  color:var(--orange);
  border-bottom-color:var(--orange);
}

/* ---------- 5. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:0;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
  white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn-signal{
  background:var(--orange);
  color:#0B0F0E;
}
.btn-signal:hover,.btn-signal:focus-visible{
  background:var(--orange-deep);
  color:var(--paper);
}

.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--paper);
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  border-color:var(--orange);
  color:var(--orange);
}

.btn-data{
  background:transparent;
  border-color:rgba(56,242,208,.45);
  color:var(--cyan);
}
.btn-data:hover,.btn-data:focus-visible{
  background:rgba(56,242,208,.1);
  border-color:var(--cyan);
}

/* ---------- 6. 页头 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}

.header-main{
  background:var(--ink);
}

.header-inner{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  gap:20px;
  min-height:var(--header-h);
}

.header-inner--sub{
  min-height:0;
  gap:0;
  align-items:stretch;
}

/* 品牌锁形 */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:none;
}

.brand-mark{
  position:relative;
  width:30px;
  height:30px;
  flex:none;
  background:var(--orange);
}
.brand-mark::after{
  content:"";
  position:absolute;
  right:0;bottom:0;
  width:10px;height:10px;
  background:var(--ink);
}

.brand-text{ display:block; min-width:0; }

.brand-name{
  display:block;
  font-size:19px;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1.15;
  color:var(--paper);
}

.brand-tag{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--orange);
  margin-left:6px;
  vertical-align:2px;
}

.brand-line{
  display:block;
  margin-top:3px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--muted);
}

/* 状态提示 */
.header-note{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  white-space:nowrap;
}

.status-dot{
  width:6px;
  height:6px;
  flex:none;
  display:inline-block;
  background:var(--orange);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}
.header-note + .header-actions{ margin-left:0; }

/* 移动端目录按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:8px 12px;
  border:1px solid var(--line);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-toggle:hover,.nav-toggle:focus-visible{
  border-color:var(--orange);
  color:var(--orange);
}

.nav-toggle-bars{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:16px;
}
.nav-toggle-bars > span{
  display:block;
  height:2px;
  background:currentColor;
  transition:transform var(--dur) var(--ease);
}
.site-header[data-open] .nav-toggle-bars > span:first-child{
  transform:translateY(3px) rotate(45deg);
}
.site-header[data-open] .nav-toggle-bars > span:last-child{
  transform:translateY(-3px) rotate(-45deg);
}

/* 导航 */
.header-sub{
  border-top:1px solid var(--line);
  background:var(--ink);
}

.site-nav{ display:block; width:100%; }

.nav-list{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
}

.nav-item{
  border-left:1px solid var(--line);
}
.nav-item:first-child{
  border-left:0;
  margin-left:-20px;
}

.nav-link{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:14px 20px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-item:first-child .nav-link{ padding-left:20px; }

.nav-link::after{
  content:"";
  position:absolute;
  left:20px;right:20px;bottom:7px;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}

.nav-index{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--line);
  transition:color var(--dur) var(--ease);
}

.nav-link:hover,.nav-link:focus-visible{
  color:var(--paper);
  background:var(--night);
}
.nav-link:hover::after,.nav-link:focus-visible::after{
  transform:scaleX(1);
}
.nav-link:hover .nav-index,.nav-link:focus-visible .nav-index{
  color:var(--muted);
}

.nav-link[aria-current="page"]{
  color:var(--paper);
  background:var(--panel);
}
.nav-link[aria-current="page"]::after{
  transform:scaleX(1);
  background:var(--orange);
}
.nav-link[aria-current="page"] .nav-index{
  color:var(--cyan);
}

/* 滚动进度轨 */
.progress-rail{
  height:2px;
  background:var(--line);
  overflow:hidden;
}
.progress-rail-fill{
  display:block;
  height:100%;
  width:100%;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left center;
}

/* ---------- 7. 页脚 ---------- */
.site-footer{
  margin-top:0;
  background:var(--night);
  border-top:1px solid var(--line);
  color:var(--paper);
}

.footer-main{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.7fr));
  gap:44px 32px;
  padding-block:64px 44px;
}

.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.footer-brand-name{
  font-size:19px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--paper);
}

.footer-summary{
  margin-top:20px;
  max-width:36ch;
  font-size:15px;
  line-height:1.7;
  color:var(--paper);
}

.footer-meta{
  margin-top:14px;
  max-width:40ch;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.75;
  letter-spacing:.03em;
  color:var(--muted);
}

.footer-col-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--cyan);
  text-transform:uppercase;
}
.footer-col-title::before{
  content:"";
  width:10px;
  height:2px;
  background:var(--orange);
  flex:none;
}

.footer-links{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-link{
  display:inline-block;
  padding-block:6px;
  font-size:14px;
  color:var(--muted);
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer-link:hover,.footer-link:focus-visible{
  color:var(--paper);
  border-bottom-color:var(--orange);
}

.footer-contact{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px 36px;
  padding-block:26px;
  border-top:1px solid var(--line);
}

.footer-contact-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--orange);
  text-transform:uppercase;
  flex:none;
}

.footer-contact-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px 32px;
}
.footer-contact-list > div{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.footer-contact-list dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--muted);
}
.footer-contact-list dd{
  font-size:14px;
  color:var(--paper);
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  padding-block:20px 34px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
}

/* ---------- 8. 章节 / 标题 ---------- */
.chapter{
  position:relative;
  padding-block:clamp(48px,7vw,88px);
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 40px);
  transition:border-color var(--dur) var(--ease);
}
.chapter[data-current]{
  border-top-color:var(--orange);
}

.chapter-index{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--orange);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--orange);
  flex:none;
}

.section-title{
  margin-top:12px;
  font-size:clamp(26px,3.4vw,40px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
}

.lead{
  margin-top:16px;
  max-width:70ch;
  font-size:17px;
  line-height:1.7;
  color:var(--paper);
}

/* ---------- 9. 数字与比分牌 ---------- */
.numeral{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-weight:600;
  letter-spacing:-.03em;
  line-height:.9;
  color:var(--paper);
}
.numeral-xl{ font-size:clamp(56px,11vw,132px); }
.numeral-lg{ font-size:clamp(40px,6vw,64px); }
.numeral-sm{ font-size:20px; letter-spacing:-.01em; }

/* ---------- 10. 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.5;
}
.tag--signal{ color:var(--orange); border-color:rgba(255,90,31,.45); }
.tag--data{ color:var(--cyan); border-color:rgba(56,242,208,.4); }
.tag--warn{ color:var(--amber); border-color:rgba(255,176,32,.4); }
.tag--panel{ background:var(--panel); color:var(--paper); border-color:var(--line); }

/* ---------- 11. 面包屑 ---------- */
.breadcrumb{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
}
.breadcrumb li{
  display:inline-flex;
  align-items:center;
}
.breadcrumb li:not(:last-child)::after{
  content:"/";
  margin-inline:8px;
  color:var(--line);
}
.breadcrumb a{
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.breadcrumb a:hover,.breadcrumb a:focus-visible{
  color:var(--paper);
  border-bottom-color:var(--orange);
}
.breadcrumb [aria-current="page"]{
  color:var(--paper);
}

/* ---------- 12. 网格 ---------- */
.grid{
  display:grid;
  gap:24px;
}
.grid-12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
}
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.span-2{ grid-column:span 2; }
.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; }

@media (max-width:899px){
  .grid-3,.grid-2{ grid-template-columns:minmax(0,1fr); }
  .grid-12{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .span-7,.span-8,.span-9{ grid-column:span 6; }
  .span-5,.span-6{ grid-column:span 6; }
  .span-4{ grid-column:span 3; }
  .span-3{ grid-column:span 3; }
}
@media (max-width:599px){
  .grid-12{ grid-template-columns:minmax(0,1fr); }
  .span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-12{
    grid-column:span 1;
  }
}

/* ---------- 13. 图片容器（页面阶段填充） ---------- */
.media-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:var(--night);
  border:1px solid var(--line);
  overflow:hidden;
}
.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(1.06);
  transition:filter var(--dur) var(--ease);
}
.media-frame::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:16%;
  height:1px;
  background:var(--orange);
  opacity:.75;
  pointer-events:none;
}
.media-frame--wide{ aspect-ratio:21/9; }
.media-frame--square{ aspect-ratio:1/1; }
.media-frame--tall{ aspect-ratio:3/4; }

.media-frame figcaption{
  position:absolute;
  left:12px;bottom:12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--paper);
  background:rgba(11,15,14,.82);
  padding:4px 8px;
}

/* ---------- 14. 平板 ---------- */
@media (max-width:1100px){
  .header-note{ display:none; }
}

@media (max-width:1023px){
  .footer-main{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:36px 28px;
    padding-block:52px 36px;
  }
  .footer-brand-col{ grid-column:1 / -1; }
}

/* ---------- 15. 移动端页头 ---------- */
@media (max-width:899px){
  .nav-toggle{ display:inline-flex; }

  .header-sub{ display:none; }
  .site-header[data-open] .header-sub{
    display:block;
    background:var(--night);
    border-top:1px solid var(--line);
  }

  .header-inner--sub{
    display:block;
    padding-block:4px 12px;
  }

  .nav-list{
    flex-direction:column;
    flex-wrap:nowrap;
  }

  .nav-item{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .nav-item:first-child{
    margin-left:0;
    border-top:0;
  }

  .nav-link{
    padding:15px 0;
    font-size:16px;
    font-weight:700;
    color:var(--paper);
    background:transparent;
  }
  .nav-item:first-child .nav-link{ padding-left:0; }

  .nav-link::after{
    left:0;
    right:auto;
    bottom:11px;
    width:40px;
  }

  .nav-index{ color:var(--muted); }

  .nav-link:hover,.nav-link:focus-visible{ background:transparent; }

  .nav-link[aria-current="page"]{
    background:transparent;
    color:var(--orange);
  }
  .nav-link[aria-current="page"] .nav-index{ color:var(--orange); }
}

@media (max-width:640px){
  .header-inner{
    gap:12px;
    min-height:var(--header-h);
  }
  .brand-line{ display:none; }
  .brand-name{ font-size:17px; }

  .header-actions{ gap:8px; }

  .btn{ min-height:40px; padding:9px 14px; font-size:13px; }
  .header-actions .btn-signal{ padding-inline:12px; }

  .nav-toggle-label{ display:none; }
  .nav-toggle{ padding-inline:10px; }

  .footer-main{
    grid-template-columns:minmax(0,1fr);
    gap:30px;
    padding-block:44px 30px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    padding-block:18px 28px;
  }
}

@media (max-width:359px){
  .header-actions .btn-signal{ display:none; }
}

/* ---------- 16. 减少动态 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }

  .skip-link{ transition:none; }
  .nav-link::after{ transition:none; }
}