/* ==========================================================================
   足博体育赛事 · 共享样式表 /assets/site.css
   母题：夜场灯光下的战术板 —— 堆叠面板 / 轮次纵轴 / 精细刻度
   ========================================================================== */

:root{
  /* 色彩体系 */
  --ink-900:#0A1626;
  --ink-black:#10141A;
  --panel:#14273F;
  --panel-lift:#172C46;
  --turf:#1E7A47;
  --turf-bright:#63D08C;
  --lime:#C9F24D;
  --card-yellow:#F3C63A;
  --card-red:#E0453C;
  --chalk:#F5F7F3;
  --paper:#E2E7DF;
  --neutral:#8C97A6;

  /* 尺度 */
  --shell:1240px;
  --rail:96px;
  --rule:2px;

  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --radius-pill:999px;

  /* 字体 */
  --font-display:"Arial Narrow","Helvetica Neue Condensed","Roboto Condensed","PingFang SC","Microsoft YaHei",sans-serif;
  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono","SFMono-Regular","Menlo","Consolas","Courier New",monospace;
  --font-body:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;

  /* 动效 */
  --t-fast:180ms;
  --t-nav:240ms;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ink-900);
  color:var(--chalk);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;line-height:1.28;letter-spacing:.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
li{list-style:none}
a{color:var(--turf-bright);text-decoration:none}
a:hover{color:var(--lime)}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}
table{border-collapse:collapse;width:100%}
main{display:block}

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
  border-radius:6px;
}

#main-content{scroll-margin-top:92px}

/* ------------------------------------------------------------ 跳至主内容 -- */
.skip-link{
  position:absolute;
  top:-72px;
  left:16px;
  z-index:120;
  padding:11px 20px;
  border-radius:var(--radius-pill);
  background:var(--lime);
  color:var(--ink-black);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:top var(--t-fast) ease;
}
.skip-link:focus{top:14px;color:var(--ink-black)}

/* ---------------------------------------------------------------- 页头 -- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:80;
  background:transparent;
  border-bottom:var(--rule) solid transparent;
  transition:background var(--t-nav) ease,border-color var(--t-nav) ease;
}
.site-header[data-scrolled="true"]{
  background:rgba(10,22,38,.97);
  border-bottom-color:var(--turf);
}
.site-header[data-open="true"]{
  background:rgba(10,22,38,.99);
}

.header-shell{
  position:relative;
  display:flex;
  align-items:center;
  gap:26px;
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:12px 24px;
}

/* 品牌 */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  color:var(--chalk);
  text-decoration:none;
}
.brand:hover{color:var(--chalk)}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:var(--radius-md);
  background:rgba(30,122,71,.86);
  border:var(--rule) solid var(--turf-bright);
  color:var(--turf-bright);
}
.brand-text{display:flex;flex-direction:column;line-height:1.14}
.brand-name{
  font-family:var(--font-serif);
  font-size:17px;
  font-weight:600;
  letter-spacing:.02em;
}
.brand-tag{
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--neutral);
  margin-top:3px;
}

/* 主导航 */
.primary-nav{flex:1 1 auto;min-width:0}
.nav-list{display:flex;align-items:center;gap:2px;justify-content:center}
.nav-list a{
  display:block;
  padding:8px 13px;
  border-radius:var(--radius-pill);
  border:var(--rule) solid transparent;
  color:var(--chalk);
  font-size:14.5px;
  font-weight:500;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease;
}
.nav-list a:hover{
  background:rgba(99,208,140,.14);
  border-color:rgba(99,208,140,.4);
  color:var(--chalk);
}
.nav-list a[aria-current="page"]{
  background:var(--turf);
  border-color:var(--turf-bright);
  color:#FFFFFF;
}

/* 右侧栏 */
.header-rail{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
  margin-left:auto;
}
.round-indicator{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:2px 0 2px 14px;
  margin:0;
  border-left:var(--rule) solid rgba(226,231,223,.28);
}
.round-label{
  font-family:var(--font-display);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--neutral);
}
.round-value{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--turf-bright);
}

.pill-cta{
  display:inline-flex;
  align-items:center;
  padding:10px 20px;
  border-radius:var(--radius-pill);
  border:var(--rule) solid var(--lime);
  background:var(--lime);
  color:var(--ink-black);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease;
}
.pill-cta:hover{
  background:transparent;
  border-color:var(--lime);
  color:var(--lime);
}

/* 汉堡按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border-radius:var(--radius-pill);
  border:var(--rule) solid rgba(226,231,223,.3);
  background:rgba(10,22,38,.55);
  color:var(--chalk);
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color var(--t-fast) ease,color var(--t-fast) ease;
}
.nav-toggle:hover{border-color:var(--turf-bright);color:var(--turf-bright)}
.nav-toggle__bars{display:grid;gap:3px;width:16px}
.nav-toggle__bars span{
  display:block;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform var(--t-fast) ease,opacity var(--t-fast) ease;
}
.site-header[data-open="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.site-header[data-open="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.site-header[data-open="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* 滚动进度 */
.scroll-progress{
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:2px;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform 90ms linear;
  pointer-events:none;
}

/* ---------------------------------------------------------------- 页脚 -- */
.site-footer{
  position:relative;
  margin-top:0;
  padding:clamp(42px,6vw,70px) 0 26px;
  background:var(--ink-black);
  color:var(--chalk);
  border-top:var(--rule) solid var(--turf);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(90deg,rgba(99,208,140,.06) 1px,transparent 1px);
  background-size:72px 100%;
}
.footer-shell{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 24px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(24px,3vw,44px);
}
.footer-col{min-width:0}

.footer-brand{
  margin:0 0 12px;
  font-family:var(--font-serif);
  font-size:20px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--chalk);
}
.footer-blurb{
  max-width:36ch;
  margin:0 0 16px;
  font-size:14px;
  line-height:1.75;
  color:var(--neutral);
}

.footer-col__title{
  margin:0 0 16px;
  padding-bottom:9px;
  border-bottom:var(--rule) solid rgba(226,231,223,.14);
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--turf-bright);
}

.footer-list{display:grid;gap:9px}
.footer-list a{
  display:inline-block;
  padding:2px 0;
  color:var(--chalk);
  font-size:14.5px;
  opacity:.84;
  transition:color var(--t-fast) ease,opacity var(--t-fast) ease,transform var(--t-fast) ease;
}
.footer-list a:hover{
  color:var(--turf-bright);
  opacity:1;
  transform:translateX(3px);
}

.footer-contact{display:grid;gap:12px;margin-top:20px}
.footer-contact li{display:grid;gap:3px}
.footer-contact__key{
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--neutral);
}
.footer-contact__val{
  font-size:14px;
  color:var(--chalk);
  line-height:1.6;
  word-break:break-word;
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  margin-top:clamp(30px,4vw,46px);
  padding-top:20px;
  border-top:var(--rule) solid rgba(226,231,223,.14);
  font-size:13px;
  color:var(--neutral);
}
.footer-copy{margin:0}
.footer-icp{margin:0;color:var(--neutral);letter-spacing:.06em}

/* ------------------------------------------------------------ 通用容器 -- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 24px;
}
.page-top-offset{padding-top:104px}

.surface-light{
  background:var(--chalk);
  color:var(--ink-black);
}
.surface-light a{color:var(--turf)}
.surface-light a:hover{color:#155C35}

.rule{border:0;border-top:var(--rule) solid rgba(226,231,223,.14);margin:0}

.eyebrow{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--turf-bright);
}
.section-title{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(24px,3.4vw,40px);
  line-height:1.26;
  color:var(--chalk);
  margin:0 0 14px;
}

/* ---------------------------------------------------------------- 面板 -- */
.panel{
  position:relative;
  padding:clamp(20px,2.6vw,32px);
  border:var(--rule) solid rgba(226,231,223,.14);
  border-radius:var(--radius-lg);
  background:var(--panel);
  transition:transform var(--t-fast) ease,border-color var(--t-fast) ease,background var(--t-fast) ease;
}
.panel:hover{
  transform:translateY(-2px);
  border-color:var(--turf-bright);
  background:var(--panel-lift);
}
.panel-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:var(--rule) solid rgba(226,231,223,.16);
}
.panel-index{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--lime);
}
.panel-title{
  flex:1 1 200px;
  font-family:var(--font-serif);
  font-size:clamp(19px,2.2vw,24px);
  font-weight:600;
  color:var(--chalk);
}
.panel-status{flex:0 0 auto}

/* ------------------------------------------------------------ 胶囊标签 -- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 13px;
  border-radius:var(--radius-pill);
  border:var(--rule) solid rgba(226,231,223,.26);
  background:rgba(226,231,223,.05);
  color:var(--chalk);
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pill--live{border-color:var(--turf-bright);color:var(--turf-bright)}
.pill--warn{border-color:var(--card-yellow);color:var(--card-yellow)}
.pill--alert{border-color:var(--card-red);color:#FF918A}
.pill--lime{border-color:var(--lime);background:var(--lime);color:var(--ink-black)}

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--neutral);
}
.tag::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:2px;
  background:var(--turf-bright);
}
.tag--yellow::before{background:var(--card-yellow)}
.tag--red::before{background:var(--card-red)}
.tag--lime::before{background:var(--lime)}

.note{
  display:flex;
  gap:10px;
  margin:0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--neutral);
}
.note::before{
  content:"";
  flex:0 0 4px;
  width:4px;
  align-self:stretch;
  border-radius:2px;
  background:var(--turf-bright);
}
.note--warn::before{background:var(--card-yellow)}
.note--alert::before{background:var(--card-red)}

/* ---------------------------------------------------------------- 按钮 -- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 24px;
  border-radius:var(--radius-pill);
  border:var(--rule) solid transparent;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-fast) ease;
}
.btn--primary{background:var(--turf);border-color:var(--turf);color:#FFFFFF}
.btn--primary:hover{background:var(--turf-bright);border-color:var(--turf-bright);color:var(--ink-900)}
.btn--ghost{background:transparent;border-color:rgba(226,231,223,.36);color:var(--chalk)}
.btn--ghost:hover{border-color:var(--turf-bright);color:var(--turf-bright)}

/* ------------------------------------------------------------ 数字字体 -- */
.mono{
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.num-lg{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:1.5em;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:var(--lime);
}

/* -------------------------------------------------------------- 面包屑 -- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 22px;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--neutral);
}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb li + li::before{content:"/";color:var(--turf-bright)}
.breadcrumb a{color:var(--neutral)}
.breadcrumb a:hover{color:var(--turf-bright)}
.breadcrumb [aria-current="page"]{color:var(--chalk)}

/* ------------------------------------------------------------ 正文容器 -- */
.prose{
  padding:clamp(22px,4vw,54px);
  border:var(--rule) solid var(--paper);
  border-radius:var(--radius-xl);
  background:var(--chalk);
  color:var(--ink-black);
}
.prose > * + *{margin-top:1em}
.prose h2{
  margin-top:1.7em;
  font-family:var(--font-serif);
  font-size:clamp(21px,2.7vw,30px);
  font-weight:600;
  color:var(--ink-black);
}
.prose h3{
  margin-top:1.35em;
  font-family:var(--font-serif);
  font-size:clamp(18px,2vw,22px);
  font-weight:600;
  color:var(--ink-black);
}
.prose p,.prose li{color:#20293A}
.prose ul{display:grid;gap:.55em;margin-top:1em}
.prose ul li{position:relative;padding-left:22px}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.78em;
  width:11px;
  height:2px;
  background:var(--turf);
}
.prose a{color:var(--turf);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:#155C35}
.prose strong{font-weight:700;color:var(--ink-black)}

/* ------------------------------------------------------------ 媒体容器 -- */
.media-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:4 / 3;
  border:var(--rule) solid rgba(226,231,223,.14);
  border-radius:var(--radius-lg);
  background:var(--panel);
}
.media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame--wide{aspect-ratio:16 / 9}
.media-frame--band{aspect-ratio:21 / 9}
.media-frame--tall{aspect-ratio:3 / 4}
.media-frame--square{aspect-ratio:1 / 1}

.media-frame__placeholder{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(99,208,140,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,208,140,.11) 1px,transparent 1px);
  background-size:34px 34px;
}
.media-frame__placeholder::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:2px;
  background:rgba(201,242,77,.3);
}
.media-frame__placeholder::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:32%;
  aspect-ratio:1 / 1;
  transform:translate(-50%,-50%);
  border:2px solid rgba(201,242,77,.45);
  border-radius:50%;
}

/* -------------------------------------------------------------- 数据表 -- */
.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.data-table{
  width:100%;
  min-width:520px;
  font-size:14.5px;
}
.data-table th{
  padding:0 12px 10px;
  border-bottom:var(--rule) solid rgba(226,231,223,.2);
  text-align:left;
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--neutral);
  white-space:nowrap;
}
.data-table td{
  height:44px;
  padding:0 12px;
  border-bottom:var(--rule) solid rgba(226,231,223,.08);
  color:var(--chalk);
  vertical-align:middle;
}
.data-table tbody tr{transition:background var(--t-fast) ease,box-shadow var(--t-fast) ease}
.data-table tbody tr:hover{
  background:rgba(99,208,140,.09);
  box-shadow:inset 0 0 0 2px var(--turf-bright);
}
.data-table .numeric{
  text-align:right;
  font-family:var(--font-mono);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------ 轮次刻度 -- */
.round-rail{
  position:relative;
  padding-left:20px;
}
.round-rail::before{
  content:"";
  position:absolute;
  left:5px;
  top:8px;
  bottom:8px;
  width:2px;
  background:rgba(226,231,223,.18);
}
.round-rail > li{
  position:relative;
  padding:5px 0;
}
.round-rail > li::before{
  content:"";
  position:absolute;
  left:-20px;
  top:15px;
  width:12px;
  height:2px;
  border-radius:2px;
  background:rgba(99,208,140,.55);
}
.round-rail > li[aria-current="step"]::before{background:var(--lime);width:16px;left:-20px;height:4px;border-radius:3px}

/* ------------------------------------------------------------ 响应式 -- */
@media (max-width:1180px){
  .round-indicator{display:none}
  .nav-list a{padding:8px 10px;font-size:14px}
}

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

  .site-header[data-nav-ready="true"] .primary-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    background:var(--ink-900);
    border-top:var(--rule) solid var(--turf);
    border-bottom:var(--rule) solid var(--turf);
    transition:max-height var(--t-nav) ease,visibility var(--t-nav) ease;
  }
  .site-header[data-nav-ready="true"][data-open="true"] .primary-nav{
    max-height:520px;
    overflow-y:auto;
    visibility:visible;
  }
  .site-header[data-nav-ready="true"] .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:14px 20px 18px;
  }
  .site-header[data-nav-ready="true"] .nav-list a{
    padding:13px 16px;
    border-radius:var(--radius-md);
    font-size:15.5px;
  }

  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-col--brand{grid-column:1 / -1}
  .footer-blurb{max-width:60ch}
}

@media (max-width:620px){
  body{font-size:16px}

  .header-shell{padding:10px 16px;gap:14px}
  .brand-tag{display:none}
  .brand-mark{width:38px;height:38px}
  .pill-cta{padding:9px 15px;font-size:11.5px;letter-spacing:.08em}
  .nav-toggle{padding:9px 12px}
  .nav-toggle__text{display:none}

  .shell{padding:0 18px}
  .footer-shell{padding:0 18px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}

  .panel-head{align-items:flex-start}
  .data-table{min-width:460px}
}

/* --------------------------------------------------- 减少动效偏好 -- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .panel:hover{transform:none}
  .footer-list a:hover{transform:none}
  .scroll-progress{transition:none}
}