/* ==========================================================
   买球看台 · 共享样式表 /assets/site.css
   记分牌式非对称三栏：左轨道 + 顶命令栏 + 右侧正文
   ========================================================== */

:root{
  --rail-w:240px;
  --bar-h:62px;
  --pitch:#0A2A21;
  --pitch-2:#123C2F;
  --turf:#2F9E63;
  --turf-light:#6FD79B;
  --score:#E4552E;
  --amber:#F3B231;
  --cyan:#37C6D6;
  --board:#F5F0E4;
  --ink:#14211C;
  --muted:#8B9C94;
  --radius:16px;
  --radius-sm:10px;
  --rail-line:rgba(111,215,155,.16);
  --dash:rgba(139,156,148,.32);
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
}

@media (max-width:1279px){
  :root{ --rail-w:210px; --bar-h:58px; }
}
@media (max-width:1079px){
  :root{ --rail-w:282px; --bar-h:58px; }
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img,svg,video{ max-width:100%; display:block; }
a{ color:var(--turf-light); text-decoration:none; transition:color .18s ease; }
a:hover{ color:#FFFFFF; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }

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

/* ---------- 中文排版基调 ---------- */
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  color:var(--board);
  background-color:var(--pitch);
  background-image:
    radial-gradient(1100px 620px at 82% -12%, rgba(55,198,214,.10), transparent 62%),
    radial-gradient(900px 520px at 8% 112%, rgba(47,158,99,.18), transparent 66%);
  background-repeat:no-repeat;
  padding-left:var(--rail-w);
  padding-top:var(--bar-h);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-weight:900; letter-spacing:-.02em; line-height:1.18; color:#F7F3E8; }
p{ max-width:74ch; }
strong{ color:var(--amber); font-weight:700; }

.mono,
.rail-num,
.stat-num,
.record-round,
.record-score,
.breadcrumb-list,
.footer-col-title,
.footer-legal-inner,
.eyebrow,
.section-index,
.media-caption,
.footer-tag{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

/* ---------- skip link ---------- */
.skip-link{
  position:fixed; top:-120px; left:16px; z-index:300;
  padding:11px 18px;
  background:var(--amber); color:var(--ink);
  font-size:14px; font-weight:700; letter-spacing:.02em;
  border-radius:0 0 12px 12px;
  transition:top .2s ease;
}
.skip-link:focus{ top:0; color:var(--ink); }

/* ---------- 左侧品牌轨道 ---------- */
.site-header{ --z-rail:120; --z-bar:110; --z-scrim:115; }

.brand-rail{
  position:fixed; top:0; bottom:0; left:0;
  width:var(--rail-w);
  display:flex; flex-direction:column; gap:20px;
  padding:26px 20px 20px;
  overflow-y:auto;
  background:linear-gradient(180deg,#0A2A21 0%,#0E3428 58%,#0A2A21 100%);
  border-right:1px solid var(--rail-line);
  z-index:120;
}
.brand-rail::after{
  content:"";
  position:absolute; top:26px; right:-1px; width:3px; height:76px;
  background:linear-gradient(180deg,var(--amber),rgba(243,178,49,0));
  border-radius:3px;
}

.rail-brand{
  display:block;
  padding-bottom:18px;
  border-bottom:1px dashed var(--dash);
  color:inherit;
}
.rail-brand:hover .rail-brand-name{ color:var(--turf-light); }
.rail-brand-mark{
  display:inline-block;
  margin-bottom:10px;
  padding:3px 9px;
  background:var(--amber); color:var(--ink);
  border-radius:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
}
.rail-brand-name{
  display:block;
  font-size:26px; font-weight:900; letter-spacing:-.02em;
  color:#F7F3E8;
  transition:color .18s ease;
}
.rail-brand-sub{
  display:block; margin-top:8px;
  font-size:12px; line-height:1.65; letter-spacing:.04em;
  color:var(--muted);
}

.rail-nav{ flex:1 1 auto; }
.rail-nav-label{
  margin-bottom:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  color:var(--cyan); text-transform:uppercase;
}
.rail-list{ display:grid; gap:4px; }
.rail-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px;
  border-left:3px solid transparent;
  border-radius:var(--radius-sm);
  color:#DCE7E0;
  font-size:15px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.rail-link:hover{ background:rgba(47,158,99,.16); color:#FFFFFF; }
.rail-link[aria-current="page"]{
  background:var(--turf);
  border-left-color:var(--amber);
  color:#04140F;
  font-weight:700;
}
.rail-link[aria-current="page"] .rail-num{ color:#04140F; }
.rail-num{
  flex:0 0 22px;
  font-size:11px; color:var(--cyan); letter-spacing:.06em;
}

.rail-facts{
  display:flex; flex-wrap:wrap; gap:6px;
  padding-top:16px;
  border-top:1px dashed var(--dash);
}
.rail-fact{
  padding:4px 7px;
  background:rgba(255,255,255,.05);
  border-radius:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--muted);
}
.rail-fact b{ color:var(--amber); font-weight:700; }

/* ---------- 顶部命令栏 ---------- */
.command-bar{
  position:fixed; top:0; left:var(--rail-w); right:0;
  height:var(--bar-h);
  display:flex; align-items:center; gap:14px;
  padding:0 clamp(16px,3vw,34px);
  background:rgba(10,42,33,.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(55,198,214,.22);
  z-index:110;
}
.bar-brand{
  display:none;
  font-size:18px; font-weight:900; letter-spacing:-.01em;
  color:#F7F3E8;
}
.bar-status{
  display:flex; align-items:center; gap:9px;
  max-width:none;
  font-size:12.5px; letter-spacing:.05em;
  color:var(--muted);
}
.bar-status .mono{ color:var(--cyan); }
.bar-dot{
  width:8px; height:8px; flex:none;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(55,198,214,.16);
}
.bar-cta{ margin-left:auto; }

.nav-toggle{
  display:none;
  align-items:center; gap:9px;
  margin-left:auto;
  padding:8px 13px;
  border:1px solid rgba(111,215,155,.35);
  border-radius:var(--radius-sm);
  color:#F7F3E8;
  font-size:13px; letter-spacing:.06em;
}
.nav-toggle:hover{ border-color:var(--turf-light); background:rgba(47,158,99,.16); }
.nav-toggle-bars{ display:flex; flex-direction:column; gap:4px; width:18px; }
.nav-toggle-bars i{
  display:block; height:2px; border-radius:2px;
  background:var(--turf-light);
  transition:transform .22s ease,opacity .22s ease;
}
.rail-scrim{ display:none; }

/* ---------- 正文容器 ---------- */
.page-main{
  display:block;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:clamp(26px,3.6vw,54px) clamp(16px,3.2vw,48px) clamp(44px,5.4vw,84px);
}
#main-content:focus-visible{ outline:3px solid var(--cyan); outline-offset:4px; }

/* ---------- 面包屑 ---------- */
.breadcrumb{ margin-bottom:clamp(18px,2.4vw,30px); }
.breadcrumb-list{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  font-size:12px; letter-spacing:.08em;
  color:var(--muted);
}
.breadcrumb-list li{ display:inline-flex; align-items:center; gap:7px; }
.breadcrumb-list li::after{ content:"/"; color:rgba(139,156,148,.5); }
.breadcrumb-list li:last-child::after{ content:""; }
.breadcrumb-link{ color:var(--cyan); }
.breadcrumb-link:hover{ color:var(--turf-light); }
.breadcrumb-current{ color:#F7F3E8; }

/* ---------- 章节 ---------- */
.section{ padding:clamp(24px,3.4vw,50px) 0; }
.section-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px;
  margin-bottom:clamp(16px,2vw,26px);
}
.eyebrow{
  display:inline-block;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan);
}
.section-index{
  display:inline-block;
  padding:3px 9px;
  background:var(--amber); color:var(--ink);
  border-radius:6px;
  font-size:11.5px; font-weight:700;
}
.section-title{ font-size:clamp(24px,3vw,36px); }
.section-desc{ font-size:15.5px; color:var(--muted); max-width:62ch; }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px;
  border:1px solid transparent;
  border-radius:12px;
  font-size:15px; font-weight:700; letter-spacing:.01em;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .16s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-score{
  background:var(--score); color:#FFFFFF;
  box-shadow:0 8px 20px -12px rgba(228,85,46,.95);
}
.btn-score:hover{ background:#F0653E; color:#FFFFFF; }
.btn-turf{ background:var(--turf); color:#04140F; }
.btn-turf:hover{ background:var(--turf-light); color:#04140F; }
.btn-ghost{ border-color:rgba(111,215,155,.45); color:#EAF3ED; }
.btn-ghost:hover{ background:rgba(47,158,99,.18); border-color:var(--turf-light); color:#FFFFFF; }

/* ---------- 卡片 ---------- */
.card{
  position:relative;
  padding:clamp(16px,2vw,24px);
  background:var(--pitch-2);
  border:1px solid var(--rail-line);
  border-radius:var(--radius);
}
.card-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  margin-bottom:12px;
}
.card-title{ font-size:20px; color:#F7F3E8; }
.card-meta{ font-size:12px; color:var(--muted); }
.card-note{ font-size:15px; color:#C6D3CC; }
.card-board{
  background:var(--board);
  color:var(--ink);
  border-color:rgba(20,33,28,.14);
}
.card-board .card-title{ color:var(--ink); }
.card-board .card-note{ color:#3D4C45; }
.card-board .card-meta{ color:#6C7C74; }

/* ---------- 标签与球队色条 ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border:1px solid rgba(55,198,214,.32);
  border-radius:999px;
  background:rgba(55,198,214,.14);
  color:var(--cyan);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
}
.tag-amber{
  background:rgba(243,178,49,.16);
  border-color:rgba(243,178,49,.42);
  color:var(--amber);
}
.tag-turf{
  background:rgba(47,158,99,.2);
  border-color:rgba(111,215,155,.42);
  color:var(--turf-light);
}
.team-strip{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 10px 5px 8px;
  border-left:5px solid var(--muted);
  border-radius:8px;
  background:rgba(255,255,255,.05);
  color:#DCE7E0;
  font-size:13.5px;
}
.team-c1{ border-left-color:#5C7F6E; }
.team-c2{ border-left-color:#7A6A9C; }
.team-c3{ border-left-color:#9C7A5C; }
.team-c4{ border-left-color:#5C7A9C; }
.team-c5{ border-left-color:#6E8A5C; }
.team-c6{ border-left-color:#8A5C6E; }

/* ---------- 记分牌数据 ---------- */
.stat-strip{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.stat{
  padding:14px 16px;
  background:rgba(255,255,255,.05);
  border-radius:14px;
  border-bottom:3px solid var(--turf);
}
.stat-num{
  display:block;
  font-size:clamp(24px,3vw,34px); line-height:1.1;
  color:var(--amber);
}
.stat-label{ margin-top:4px; font-size:13px; color:var(--muted); }

/* ---------- 对阵记录行 ---------- */
.record-list{ display:grid; gap:10px; }
.record{
  display:grid;
  grid-template-columns:62px minmax(0,1fr) auto;
  gap:14px; align-items:center;
  padding:12px 16px;
  background:var(--pitch-2);
  border-left:4px solid var(--turf);
  border-radius:14px;
}
.record-round{ font-size:12px; color:var(--cyan); }
.record-teams{ font-size:15.5px; color:#EAF3ED; }
.record-score{
  font-size:19px; color:var(--ink);
  background:var(--amber);
  padding:2px 10px;
  border-radius:8px;
}

/* ---------- 栅格 ---------- */
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grid-split{ grid-template-columns:minmax(0,1fr); }
@media (min-width:1000px){
  .grid-split{ grid-template-columns:minmax(0,2.1fr) minmax(0,1fr); gap:clamp(18px,2.4vw,30px); }
}

/* ---------- 图片容器 ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:var(--radius);
  border:1px solid var(--rail-line);
  background:var(--pitch-2);
}
.media-frame img,
.media-frame video{
  width:100%; height:100%;
  object-fit:cover;
}
.media-frame--wide{ aspect-ratio:21 / 9; }
.media-frame--board{
  background:var(--board);
  border-color:rgba(20,33,28,.14);
}
.media-caption{
  margin-top:8px;
  font-size:11.5px; color:var(--muted);
}

/* ---------- 滚动显现 ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease;
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- 返回顶部 ---------- */
.to-top{
  position:fixed;
  right:clamp(14px,2.5vw,32px);
  bottom:clamp(14px,2.5vw,32px);
  z-index:100;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 15px;
  border:1px solid rgba(111,215,155,.4);
  border-radius:999px;
  background:var(--pitch-2);
  color:var(--turf-light);
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,background .2s ease,color .2s ease;
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--turf); color:#04140F; }

/* ---------- 页脚：从看台翻到战术板 ---------- */
.site-footer{
  margin-top:clamp(40px,6vw,84px);
  background:var(--board);
  color:var(--ink);
  border-top:6px solid var(--turf);
}
.footer-inner{
  max-width:1400px;
  margin:0 auto;
  padding:clamp(30px,4.4vw,64px) clamp(16px,3.2vw,48px) clamp(20px,2.6vw,32px);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);
}
@media (min-width:860px){
  .footer-inner{ grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr); }
}
.footer-logo{
  display:inline-block;
  font-size:clamp(24px,3vw,34px); font-weight:900; letter-spacing:-.02em;
  color:var(--ink);
}
.footer-logo:hover{ color:var(--turf); }
.footer-summary{
  margin-top:12px;
  font-size:15px; line-height:1.85;
  color:#3D4C45;
  max-width:36ch;
}
.footer-tag{
  margin-top:14px;
  font-size:12px; letter-spacing:.1em;
  color:var(--score);
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:22px 24px;
}
.footer-col-title{
  margin-bottom:12px;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--turf);
}
.footer-links{ display:grid; gap:9px; }
.footer-link{
  padding-bottom:2px;
  border-bottom:1px dashed transparent;
  color:#22322B;
  font-size:15px;
}
.footer-link:hover{
  color:var(--score);
  border-bottom-color:var(--score);
}
.footer-contact{
  max-width:1400px;
  margin:0 auto;
  padding:22px clamp(16px,3.2vw,48px) clamp(20px,2.6vw,30px);
  display:grid; gap:6px;
  border-top:1px dashed rgba(20,33,28,.18);
  font-size:14px; line-height:1.75;
  color:#3D4C45;
}
.footer-contact b{ font-family:var(--mono); color:var(--ink); }
.footer-legal{ background:var(--pitch); color:var(--muted); }
.footer-legal-inner{
  max-width:1400px;
  margin:0 auto;
  padding:16px clamp(16px,3.2vw,48px);
  display:flex; flex-wrap:wrap; gap:8px 22px;
  justify-content:space-between;
  font-size:12px; letter-spacing:.06em;
}
.footer-copy,
.footer-icp{ max-width:none; color:var(--muted); }

/* ==========================================================
   响应式：≤1079px 轨道转为左滑抽屉
   ========================================================== */
@media (max-width:1079px){
  body{ padding-left:0; }

  .brand-rail{
    width:var(--rail-w);
    transform:translateX(-100%);
    transition:transform .28s ease;
    box-shadow:12px 0 40px -18px rgba(0,0,0,.9);
  }
  .site-header[data-open] .brand-rail{ transform:translateX(0); }

  .command-bar{ left:0; }
  .bar-brand{ display:block; flex:none; }
  .bar-status{ display:none; }
  .bar-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }

  .site-header[data-open] .nav-toggle-bars i:nth-child(1){ transform:translateY(6px) 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(-6px) rotate(-45deg); }

  .rail-scrim{
    display:block;
    position:fixed; inset:0;
    background:rgba(4,16,12,.68);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
    z-index:115;
  }
  .site-header[data-open] .rail-scrim{ opacity:1; pointer-events:auto; }
}

@media (max-width:640px){
  body{ font-size:16.5px; line-height:1.78; }
  .record{ grid-template-columns:52px minmax(0,1fr); row-gap:8px; }
  .record-score{ grid-column:2; justify-self:start; }
  .footer-legal-inner{ justify-content:flex-start; }
}

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .to-top{ opacity:1; transform:none; }
}