/* ============================================================
   华体育网主站 · 共享样式 /assets/site.css
   夜场墨绿底 + 奶油纸阅读面板 + 荧光青数据 + 暖金比分 + 红橙状态
   ============================================================ */

:root{
  --ink:#0B1F1A;
  --ink-2:#102A23;
  --ink-3:#071510;
  --paper:#E9E2CB;
  --paper-2:#D8D2BC;
  --brown:#241A12;
  --cyan:#39F2D0;
  --gold:#E8B45A;
  --signal:#E85D3D;
  --steel:#6E8A96;
  --grid:rgba(233,226,203,0.14);
  --grid-faint:rgba(233,226,203,0.055);
  --rail-w:76px;
  --maxw:1320px;
  --gutter:clamp(16px,3.4vw,44px);
  --font-sans:"PingFang SC","Noto Sans SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,figcaption,blockquote,dl,dd,address{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
address{font-style:normal}

/* ---------- base ---------- */
body{
  min-height:100vh;
  background-color:var(--ink);
  background-image:
    repeating-linear-gradient(to right,var(--grid-faint) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(to bottom,var(--grid-faint) 0 1px,transparent 1px 88px);
  background-position:center top;
  color:var(--paper);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.62;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-weight:900;line-height:1.14;letter-spacing:-.012em}
::selection{background:var(--cyan);color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- skip link ---------- */
.skip-link{
  position:fixed;left:12px;top:-72px;z-index:300;
  display:inline-block;padding:10px 20px;
  background:var(--gold);color:var(--brown);
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  transition:top .16s ease;
}
.skip-link:focus{top:12px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);
  background:var(--ink);
  border-bottom:1px solid var(--grid);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  isolation:isolate;
}
.rail{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:10px 0;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-2),var(--ink-3));
  border-right:1px solid var(--grid);
}
.rail-mark{color:var(--signal);font-size:9px;line-height:1}
.rail-name{
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:11px;font-weight:900;letter-spacing:.42em;
  color:var(--paper-2);
}
.rail-index{
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.1em;
  color:var(--gold);padding-top:8px;border-top:1px solid var(--grid);
}
.masthead{padding:0 var(--gutter);min-width:0}
.masthead-top{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:clamp(10px,2vw,26px);
  padding:12px 0 10px;
}
.brand{display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.brand-name{
  font-size:clamp(20px,2.1vw,26px);font-weight:900;letter-spacing:.16em;
  padding-left:12px;border-left:3px solid var(--signal);line-height:1;
}
.brand-meta{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;
  color:var(--steel);white-space:nowrap;
}
.round-status{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--gold);background:rgba(232,180,90,.07);
  border:1px solid rgba(232,180,90,.32);padding:6px 12px;
}
.status-dot{width:6px;height:6px;background:var(--cyan);box-shadow:0 0 0 3px rgba(57,242,208,.18);flex:none}
.masthead-actions{display:flex;align-items:center;gap:10px;justify-self:end}
.back-home{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;white-space:nowrap;
  color:var(--paper);border:1px solid var(--grid);padding:7px 13px;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.back-home:hover,.back-home:focus-visible{border-color:var(--cyan);color:var(--cyan);background:rgba(57,242,208,.07)}
.nav-toggle{
  display:none;align-items:center;gap:9px;
  border:1px solid var(--grid);padding:8px 12px;
  transition:border-color .16s ease,background .16s ease;
}
.nav-toggle-bar{width:18px;height:2px;background:var(--gold);box-shadow:0 -6px 0 var(--gold),0 6px 0 var(--gold);transition:background .16s ease,box-shadow .16s ease}
.nav-toggle-text{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--paper)}
.nav-toggle:hover{border-color:var(--cyan)}
.site-header[data-open="true"] .nav-toggle{border-color:var(--cyan);background:rgba(57,242,208,.08)}
.site-header[data-open="true"] .nav-toggle-bar{background:var(--cyan);box-shadow:0 -6px 0 var(--cyan),0 6px 0 var(--cyan)}
.site-header[data-open="true"] .nav-toggle-text{color:var(--cyan)}

.site-nav{display:block;border-top:1px solid var(--grid)}
.nav-list{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(6px,2.2vw,34px)}
.nav-item{position:relative}
.nav-link{
  position:relative;display:block;padding:13px 4px 15px;
  font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--paper-2);
  transition:color .16s ease;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--signal);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .18s ease,background .18s ease;
}
.nav-link:hover,.nav-link:focus-visible{color:var(--paper)}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1);background:var(--cyan)}
.nav-link[aria-current="page"]{color:var(--gold)}
.nav-link[aria-current="page"]::after{transform:scaleX(1);background:var(--signal)}

.read-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--cyan),var(--gold));
  transform:scaleX(0);transform-origin:0 50%;
}

/* ---------- footer ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(48px,7vw,96px);
  background:var(--ink-2);
  border-top:1px solid var(--grid);
  color:var(--paper);
}
.site-footer::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  width:min(320px,46%);
  background:linear-gradient(90deg,var(--signal),var(--gold),rgba(232,180,90,0));
}
.footer-grid{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(32px,4.6vw,62px) var(--gutter) clamp(24px,3vw,40px);
  display:grid;grid-template-columns:1.5fr .85fr 1.4fr;
  gap:clamp(24px,4vw,58px);
}
.footer-brand{min-width:0}
.footer-logo{
  font-size:clamp(20px,2.1vw,26px);font-weight:900;letter-spacing:.16em;line-height:1;
  padding-left:12px;border-left:3px solid var(--signal);margin-bottom:16px;
}
.footer-tag{font-size:14px;line-height:1.72;color:var(--paper-2);max-width:34ch}
.footer-nav{display:block;min-width:0}
.footer-zone-title{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);padding-bottom:9px;margin-bottom:12px;border-bottom:1px solid var(--grid);
}
.footer-nav-list{display:grid;gap:1px}
.footer-nav-list a{
  display:block;padding:6px 0;font-size:14px;color:var(--paper-2);
  border-bottom:1px solid rgba(233,226,203,.07);
  transition:color .16s ease,padding-left .16s ease;
}
.footer-nav-list a:hover,.footer-nav-list a:focus-visible{color:var(--gold);padding-left:6px}
.footer-contact{min-width:0}
.footer-address{display:grid;gap:9px}
.footer-line{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:14px;color:var(--paper-2);line-height:1.55}
.footer-key{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  color:var(--steel);min-width:4.6em;flex:none;
}
.copy-btn{
  margin-top:12px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  color:var(--gold);border:1px solid rgba(232,180,90,.42);padding:4px 9px;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.copy-btn:hover{background:var(--gold);color:var(--ink)}
.copy-btn[data-copied="true"]{border-color:var(--cyan);color:var(--cyan);background:rgba(57,242,208,.08)}
.footer-note{
  margin-top:14px;padding-left:10px;border-left:2px solid rgba(110,138,150,.45);
  font-size:12.5px;line-height:1.68;color:var(--steel);max-width:42ch;
}
.footer-base{
  max-width:var(--maxw);margin:0 auto;
  padding:14px var(--gutter) 22px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 22px;
  border-top:1px solid var(--grid);
}
.footer-legal{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--steel);
}
.footer-legal a{color:var(--paper-2);transition:color .16s ease}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--cyan)}
.footer-copy{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--steel)}
.to-top{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--paper);
  border:1px solid var(--grid);padding:6px 13px;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.to-top:hover,.to-top:focus-visible{border-color:var(--gold);color:var(--gold);background:rgba(232,180,90,.08)}

/* ---------- shared page furniture ---------- */
.page-main{display:block}
.page-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 0;border-bottom:1px solid var(--grid);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--steel);
}
.breadcrumb a{color:var(--paper-2);transition:color .16s ease}
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--cyan)}
.breadcrumb-sep{color:rgba(110,138,150,.72)}
.breadcrumb [aria-current="page"]{color:var(--gold)}

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:10px;
}
.lede{font-size:clamp(15px,1.4vw,17px);line-height:1.7;color:var(--paper-2);max-width:70ch}

.section-head{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:start;
  padding-top:16px;margin-bottom:clamp(18px,2.6vw,32px);
  border-top:1px solid var(--grid);
}
.num{
  font-family:var(--font-mono);font-size:clamp(28px,4.4vw,56px);font-weight:700;line-height:.92;
  letter-spacing:-.02em;color:var(--signal);
}
.section-title{font-size:clamp(22px,3vw,36px);color:var(--paper)}

.split-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(20px,3vw,44px);align-items:start}
.panel{background:var(--ink-2);border:1px solid var(--grid);padding:clamp(16px,2.4vw,28px)}
.content-panel{
  background:var(--paper);color:var(--brown);
  border:1px solid rgba(36,26,18,.16);
  padding:clamp(20px,3.4vw,44px);
}
.content-panel h2,.content-panel h3{color:var(--brown)}
.content-panel p{line-height:1.68;max-width:74ch}
.content-panel p+p{margin-top:1em}
.content-panel a{color:#8A3A18;text-decoration:underline;text-underline-offset:3px}
.content-panel a:hover{color:var(--brown);background:rgba(232,93,61,.16)}
.angle-block{
  background:var(--ink-2);
  border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);
  padding:clamp(28px,5vw,64px) 0;
  clip-path:polygon(0 2.4vw,100% 0,100% calc(100% - 2.4vw),0 100%);
}

.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  padding:12px 22px;min-height:44px;
  font-size:14px;font-weight:800;letter-spacing:.08em;
  color:var(--paper);background:var(--ink-2);border:1px solid var(--grid);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn:hover,.btn:focus-visible{background:var(--cyan);color:var(--ink);border-color:var(--cyan)}
.btn--gold{background:var(--gold);color:var(--brown);border-color:var(--gold)}
.btn--gold:hover,.btn--gold:focus-visible{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--paper);border-color:rgba(233,226,203,.34)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:transparent;color:var(--cyan);border-color:var(--cyan)}

.media-frame{
  position:relative;overflow:hidden;aspect-ratio:16/9;
  border:1px solid var(--grid);
  background:
    linear-gradient(140deg,var(--ink-2) 0%,#16332A 52%,var(--ink-3) 100%);
}
.media-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(57,242,208,.10) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(to bottom,rgba(57,242,208,.07) 0 1px,transparent 1px 64px);
}
.media-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.06) brightness(.92)}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:4/5}
.media-frame--square{aspect-ratio:1/1}
.media-caption{
  padding-top:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--steel);
}

.data-strip{
  display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,44px);
  padding:14px 0;border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);
}
.stat{display:flex;flex-direction:column;gap:5px;min-width:0}
.stat-value{
  font-family:var(--font-mono);font-size:clamp(20px,2.6vw,32px);font-weight:700;
  line-height:1;letter-spacing:-.01em;color:var(--gold);
}
.stat-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}

.tag{
  display:inline-block;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--steel);border:1px solid var(--grid);padding:3px 8px;
}

.table-scroll{overflow-x:auto;border:1px solid var(--grid)}
.data-table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.data-table th,.data-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--grid)}
.data-table th{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);background:var(--ink-3);font-weight:700;
}
.data-table td{color:var(--paper-2)}
.data-table tbody tr:nth-child(even){background:rgba(233,226,203,.035)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  :root{--rail-w:64px}
  .nav-list{gap:clamp(8px,1.6vw,22px)}
  .nav-link{font-size:14px;letter-spacing:.04em}
  .brand-meta{display:none}
}

@media (max-width:960px){
  .site-header{display:block}
  .rail{display:none}
  .masthead{padding:0 var(--gutter)}
  .masthead-top{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
    padding:10px 0;
  }
  .brand{order:1;flex:1 1 auto}
  .brand-name{font-size:20px;letter-spacing:.14em}
  .masthead-actions{order:2;margin-left:auto}
  .round-status{order:3;flex:1 1 100%;justify-content:flex-start;margin-top:2px}
  .nav-toggle{display:inline-flex}
  .back-home{display:none}
  .site-nav{display:none;border-top:1px solid var(--grid);max-height:calc(100vh - 128px);overflow-y:auto}
  .site-header[data-open="true"] .site-nav{display:block}
  .nav-list{flex-direction:column;justify-content:flex-start;gap:0}
  .nav-link{
    padding:14px 12px;font-size:16px;letter-spacing:.06em;
    border-bottom:1px solid var(--grid);border-left:2px solid transparent;
  }
  .nav-link::after{display:none}
  .nav-link[aria-current="page"]{
    color:var(--gold);background:rgba(57,242,208,.07);border-left-color:var(--signal);
  }
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-brand{grid-column:1 / -1}
  .split-grid{grid-template-columns:1fr}
  .angle-block{clip-path:polygon(0 14px,100% 0,100% calc(100% - 14px),0 100%)}
}

@media (max-width:640px){
  body{font-size:15px}
  .footer-grid{grid-template-columns:1fr}
  .footer-base{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-tag,.footer-note{max-width:none}
  .brand-name{padding-left:9px;border-left-width:2px}
  .section-head{grid-template-columns:1fr;gap:8px}
  .read-progress{height:3px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}