/* ============================================================
   球帝官网 · 共享样式表 /assets/site.css
   夜间记分牌 + 版本档案馆
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root{
  --ink:#0B1B2B;
  --ink-2:#14314B;
  --cyan:#35E0D0;
  --orange:#FF7A2F;
  --stone:#8A9AA6;
  --moss:#6E8F5A;
  --clay:#C1663F;
  --bone:#F3EFE6;
  --arch:#050D16;

  --rail-w:34px;
  --wrap:1180px;
  --pad:clamp(18px,4.2vw,44px);
  --dur:220ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --line:rgba(138,154,166,.24);
  --line-strong:rgba(138,154,166,.45);

  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-cond:"Arial Narrow","Helvetica Neue",var(--font-sans);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Courier New",monospace;
}

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

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

body{
  margin:0;
  min-height:100vh;
  background-color:var(--ink);
  background-image:
    radial-gradient(1100px 560px at 84% -12%,rgba(53,224,208,.10),transparent 62%),
    radial-gradient(880px 520px at 6% 6%,rgba(255,122,47,.075),transparent 60%);
  background-repeat:no-repeat;
  color:var(--bone);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
img,svg,video{max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
table{border-collapse:collapse;width:100%;}
[hidden]{display:none !important;}

#main-content{display:block;}

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

/* ---------- 3. 通用排版工具 ---------- */
.num{
  font-family:var(--font-mono);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}

.note{
  font-size:13px;
  line-height:1.7;
  color:var(--stone);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(138,154,166,.5);
}

.link-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--cyan);
  padding-bottom:2px;
  border-bottom:1px solid rgba(53,224,208,.45);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.link-more::after{
  content:"\2192";
  font-family:var(--font-mono);
  transition:transform var(--dur) var(--ease);
}
.link-more:hover{color:var(--bone);border-bottom-color:var(--bone);}
.link-more:hover::after{transform:translateX(4px);}

.rule{
  height:1px;
  border:0;
  margin:clamp(32px,6vw,64px) 0;
  background:linear-gradient(90deg,rgba(53,224,208,.6),rgba(138,154,166,.14) 58%,transparent);
}

/* ---------- 4. 跳转链接 ---------- */
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:300;
  display:inline-block;
  padding:10px 18px;
  border-radius:2px;
  background:var(--cyan);
  color:var(--arch);
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  transform:translateY(-180%);
  transition:transform var(--dur) var(--ease);
}
.skip-link:focus{
  transform:translateY(0);
}

/* ---------- 5. 版本轨道 ---------- */
.version-rail{
  display:none;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:var(--rail-w);
  z-index:20;
  padding:16px 0;
  background:var(--arch);
  border-right:1px solid var(--line);
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-mono);
  pointer-events:none;
}
.rail-label{
  writing-mode:vertical-rl;
  font-size:9px;
  letter-spacing:.34em;
  color:var(--stone);
}
.rail-track{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.rail-tick{
  display:block;
  width:6px;
  height:14px;
  background:rgba(138,154,166,.3);
  transition:background var(--dur) var(--ease),width var(--dur) var(--ease);
}
.rail-tick.is-lit{
  background:rgba(53,224,208,.75);
  width:8px;
}
.rail-tick.is-current{
  background:var(--orange);
  width:10px;
}
.rail-index{
  font-size:11px;
  font-weight:600;
  color:var(--orange);
  letter-spacing:.04em;
}

/* ---------- 6. 头部框架导航 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(5,13,22,.94);
  border-bottom:1px solid var(--line);
}
.site-header::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:6px;
  pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(138,154,166,.3) 0 1px,transparent 1px 13px);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  transform:scaleX(var(--read,0));
  transform-origin:left center;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
  transition:transform 120ms linear;
}

.header-inner{
  position:relative;
  max-width:var(--wrap);
  margin:0 auto;
  padding:12px var(--pad) 14px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px 20px;
}

/* 品牌 */
.brand-wrap{min-width:0;}
.brand{display:inline-block;}
.brand-name{
  display:block;
  font-family:var(--font-cond);
  font-weight:800;
  font-stretch:condensed;
  font-size:22px;
  line-height:1.12;
  letter-spacing:.06em;
  color:var(--bone);
  transition:color var(--dur) var(--ease);
}
.brand-line{
  display:block;
  margin-top:4px;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--stone);
}
.brand:hover .brand-name{color:var(--cyan);}

.header-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

/* 胶囊 */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--stone);
  white-space:nowrap;
}
.chip--version{
  color:var(--orange);
  border-color:rgba(255,122,47,.5);
  background:rgba(255,122,47,.09);
}
.chip--sync{
  color:var(--cyan);
  border-color:rgba(53,224,208,.36);
  background:rgba(53,224,208,.07);
}

/* 移动菜单按钮 */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border:1px solid rgba(53,224,208,.5);
  border-radius:2px;
  color:var(--cyan);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-toggle:hover{background:rgba(53,224,208,.12);}
.nav-toggle-bars{
  display:grid;
  gap:3px;
  width:16px;
}
.nav-toggle-bars i{
  display:block;
  height:2px;
  background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.site-header[data-open] .nav-toggle-bars i:nth-child(1){transform:translateY(5px) rotate(45deg);}
.site-header[data-open] .nav-toggle-bars i:nth-child(2){opacity:0;}
.site-header[data-open] .nav-toggle-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
.nav-toggle-text{white-space:nowrap;}

/* 导航 */
.site-nav{
  grid-column:1 / -1;
  overflow:hidden;
  max-height:0;
  opacity:0;
  visibility:hidden;
  transition:max-height 280ms var(--ease),opacity 200ms linear,visibility 0s 280ms;
}
.site-header[data-open] .site-nav{
  max-height:82vh;
  overflow-y:auto;
  opacity:1;
  visibility:visible;
  transition:max-height 280ms var(--ease),opacity 200ms linear,visibility 0s 0s;
}
.nav-list{
  display:flex;
  flex-direction:column;
  padding:6px 0 0;
}
.nav-item{min-width:0;}
.nav-link{
  display:block;
  padding:13px 4px;
  font-size:15px;
  font-weight:500;
  color:var(--stone);
  border-bottom:1px solid var(--line);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease),padding var(--dur) var(--ease);
}
.nav-link:hover{
  color:var(--bone);
  border-bottom-color:rgba(53,224,208,.55);
  background:rgba(53,224,208,.05);
}
.nav-link[aria-current="page"]{
  color:var(--cyan);
  border-bottom-color:rgba(53,224,208,.75);
  background:rgba(53,224,208,.09);
  font-weight:700;
}

.nav-foot{
  display:grid;
  gap:10px;
  padding:16px 0 8px;
}
.header-actions{display:none;}

/* ---------- 7. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  border:1px solid transparent;
  border-radius:2px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.4;
  cursor:pointer;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn--sm{padding:7px 14px;font-size:13px;}
.btn--block{width:100%;}
.btn--ghost{
  border-color:var(--line-strong);
  color:var(--bone);
}
.btn--ghost:hover{
  border-color:var(--cyan);
  color:var(--cyan);
  background:rgba(53,224,208,.08);
}
.btn--signal{
  background:var(--orange);
  border-color:var(--orange);
  color:#1A0C04;
}
.btn--signal:hover{
  background:#FF8F4D;
  transform:translateY(-2px);
}
.btn--cyan{
  background:var(--cyan);
  border-color:var(--cyan);
  color:#04211F;
}
.btn--cyan:hover{
  background:#5FE9DD;
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0);}

/* ---------- 8. 标签与状态 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:2px;
  border:1px solid transparent;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
}
.tag--stable{
  color:#9DBF85;
  background:rgba(110,143,90,.18);
  border-color:rgba(110,143,90,.5);
}
.tag--legacy{
  color:#E08E69;
  background:rgba(193,102,63,.16);
  border-color:rgba(193,102,63,.5);
}
.tag--live{
  color:var(--cyan);
  background:rgba(53,224,208,.14);
  border-color:rgba(53,224,208,.45);
}

/* ---------- 9. 布局容器与章节 ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
}

.grid{display:grid;gap:clamp(16px,2.6vw,26px);}
.grid--2{grid-template-columns:1fr;}
.grid--3{grid-template-columns:1fr;}

.section-head{
  display:grid;
  gap:10px;
  margin-bottom:clamp(20px,3.4vw,32px);
}
.section-index{
  font-family:var(--font-mono);
  font-size:clamp(34px,7vw,62px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--orange);
}
.section-title{
  font-family:var(--font-cond);
  font-weight:800;
  font-stretch:condensed;
  font-size:clamp(26px,4.4vw,44px);
  line-height:1.14;
  letter-spacing:.01em;
  color:var(--bone);
}
.section-lede{
  max-width:62ch;
  font-size:15px;
  line-height:1.8;
  color:var(--stone);
}

/* ---------- 10. 研究板 / 面板 / 表格 ---------- */
.panel{
  padding:clamp(18px,3vw,26px);
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:4px;
}
.panel--moss{border-left:3px solid var(--moss);}
.panel--clay{border-left:3px solid var(--clay);}

.arch-table{
  width:100%;
  font-size:14px;
  line-height:1.7;
  background:transparent;
}
.arch-table caption{
  caption-side:top;
  text-align:left;
  padding-bottom:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--stone);
}
.arch-table th{
  text-align:left;
  padding:10px 12px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--cyan);
  border-bottom:1px solid rgba(53,224,208,.35);
  white-space:nowrap;
}
.arch-table td{
  padding:11px 12px;
  border-bottom:1px solid rgba(138,154,166,.18);
  color:var(--bone);
  vertical-align:top;
}
.arch-table tbody tr{
  transition:background var(--dur) var(--ease);
}
.arch-table tbody tr:hover{
  background:rgba(53,224,208,.05);
}
.arch-table .num{color:var(--orange);}

/* ---------- 11. 条目卡 ---------- */
.entry-card{
  display:block;
  padding:clamp(16px,2.4vw,22px);
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:4px;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.entry-card:hover{
  border-color:rgba(53,224,208,.55);
  background:#173A57;
  transform:translateY(-2px);
}
.entry-card-meta{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--orange);
}
.entry-card-title{
  font-family:var(--font-cond);
  font-weight:800;
  font-stretch:condensed;
  font-size:19px;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--bone);
}
.entry-card-text{
  margin-top:10px;
  font-size:14px;
  line-height:1.75;
  color:var(--stone);
}

/* ---------- 12. 展开控件 ---------- */
.expand-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--cyan);
  border-bottom:1px dashed rgba(53,224,208,.45);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.expand-toggle::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1;
  transition:transform var(--dur) var(--ease);
}
.expand-toggle:hover{
  color:var(--bone);
  border-bottom-color:var(--bone);
}
.expand-toggle[aria-expanded="true"]::after{transform:rotate(45deg);}
.expand-toggle[aria-expanded="true"]{
  color:var(--orange);
  border-bottom-color:rgba(255,122,47,.5);
}

/* ---------- 13. 图片容器基础规则 ---------- */
.media{
  position:relative;
  display:block;
  width:100%;
  margin:0;
  min-height:120px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:4px;
  background-color:var(--ink-2);
  background-image:linear-gradient(135deg,rgba(53,224,208,.12),rgba(5,13,22,.65) 56%,rgba(255,122,47,.10));
}
.media > img,
.media > picture,
.media > picture > img{
  display:block;
  width:100%;
  height:100%;
}
.media > img,
.media > picture > img{
  object-fit:cover;
}
.media--21x9{aspect-ratio:21 / 9;}
.media--16x9{aspect-ratio:16 / 9;}
.media--4x3{aspect-ratio:4 / 3;}
.media--1x1{aspect-ratio:1 / 1;}
.media--auto{aspect-ratio:auto;}
.media-caption{
  display:block;
  margin-top:10px;
  font-size:13px;
  line-height:1.7;
  color:var(--stone);
}

/* ---------- 14. 面包屑 ---------- */
.breadcrumb{
  padding-top:clamp(20px,3vw,30px);
}
.breadcrumb-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 8px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--stone);
}
.breadcrumb-list li + li::before{
  content:"/";
  margin-right:8px;
  color:rgba(138,154,166,.5);
}
.breadcrumb-list a{
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.breadcrumb-list a:hover{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}
.breadcrumb-list [aria-current="page"]{color:var(--bone);}

/* ---------- 15. 页脚 ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(52px,8vw,110px);
  background:var(--arch);
  border-top:1px solid rgba(53,224,208,.25);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:120px;
  height:2px;
  background:var(--orange);
}
.footer-inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(36px,6vw,72px) var(--pad) 26px;
  display:grid;
  gap:34px;
}
.footer-lead{min-width:0;}
.footer-slogan{
  max-width:22ch;
  font-family:var(--font-cond);
  font-weight:800;
  font-stretch:condensed;
  font-size:clamp(20px,2.8vw,26px);
  line-height:1.42;
  letter-spacing:.01em;
  color:var(--bone);
}
.footer-slogan::before{
  content:"";
  display:block;
  width:38px;
  height:3px;
  margin-bottom:16px;
  background:var(--orange);
}
.footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.footer-cols{
  display:grid;
  gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.footer-col{min-width:0;}
.footer-col-title{
  margin-bottom:12px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--cyan);
}
.footer-list{display:grid;gap:2px;}
.footer-link{
  display:inline-block;
  padding:5px 0;
  font-size:14px;
  color:var(--stone);
  border-bottom:1px solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.footer-link:hover{
  color:var(--bone);
  border-bottom-color:var(--cyan);
}

.footer-contact{
  display:grid;
  gap:8px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.footer-contact-line{
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  font-size:14px;
  color:var(--bone);
}
.footer-k{
  flex:0 0 auto;
  min-width:74px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--stone);
}
.footer-v{
  min-width:0;
  word-break:break-word;
}
.footer-v.num{color:var(--orange);}

.footer-base{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 20px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--stone);
}
.footer-base-route{color:rgba(138,154,166,.75);}

/* ---------- 16. 断点 ---------- */
@media (min-width:760px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:900px){
  .footer-inner{
    grid-template-columns:minmax(240px,1fr) minmax(0,2fr);
    gap:40px 64px;
  }
  .footer-lead{grid-column:1;}
  .footer-cols{grid-column:2;}
  .footer-contact{grid-column:1 / -1;}
  .footer-base{grid-column:1 / -1;}
}

@media (min-width:1000px){
  .header-inner{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:12px 26px;
  }
  .brand-wrap{
    display:flex;
    align-items:center;
    gap:20px;
    padding-right:22px;
    border-right:1px solid var(--line);
  }
  .header-chips{margin-top:0;}
  .nav-toggle{display:none;}
  .site-nav{
    grid-column:auto;
    visibility:visible;
    max-height:none;
    opacity:1;
    overflow:visible;
    transition:none;
  }
  .nav-list{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:2px;
    padding:0;
  }
  .nav-link{
    padding:8px 12px;
    font-size:14px;
    border:1px solid transparent;
    border-radius:2px;
  }
  .nav-link:hover,
  .nav-link[aria-current="page"]{
    border:1px solid rgba(53,224,208,.5);
  }
  .nav-link[aria-current="page"]{
    border-color:rgba(53,224,208,.7);
  }
  .nav-foot{display:none;}
  .header-actions{
    display:flex;
    align-items:center;
    gap:8px;
  }
}

@media (min-width:1080px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (min-width:1280px){
  body{padding-left:var(--rail-w);}
  .version-rail{display:flex;}
}

/* ---------- 17. 减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .entry-card:hover,
  .btn--signal:hover,
  .btn--cyan:hover{transform:none;}
  .link-more:hover::after{transform:none;}
}