/* ============================================================
   Site Kit · 华体会体育 · 夜间赛场指挥台
   堆叠面板 / 粗野主义边框 / 数据高亮 / 左右分置导航
   ============================================================ */

:root{
  --ink:#080C0A;
  --panel:#0E211A;
  --panel-2:#163328;
  --lime:#C8FF3D;
  --lime-soft:#DCFF8A;
  --orange:#FF8A3D;
  --cyan:#2BE4C4;
  --mist:#D7E0D8;
  --moss:#8FA89A;
  --line:#2A3D33;
  --line-strong:#3D5C4B;
  --shell-max:1240px;
  --shadow-hard:8px 8px 0 rgba(0,0,0,.55);
  --shadow-soft:4px 4px 0 rgba(0,0,0,.42);
  --font-display:"Arial Narrow","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --font-serif:"Songti SC","Noto Serif SC",Georgia,"Times New Roman",serif;
  --bp-nav:1140px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--ink);
  background-image:
    radial-gradient(880px 400px at 84% -8%, rgba(43,228,196,.10), transparent 72%),
    radial-gradient(720px 380px at 6% 0%, rgba(200,255,61,.06), transparent 72%),
    repeating-linear-gradient(90deg, rgba(42,61,51,.26) 0 1px, transparent 1px 96px);
  background-repeat:no-repeat,no-repeat,repeat;
  color:var(--mist);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4,h5,h6,p,figure,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--lime);color:#06180C;}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;}
#main-content:focus-visible{outline:3px solid var(--cyan);outline-offset:-4px;}

/* ---------- 排版基础 ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.14;
  color:#F2F7F1;
}
h1{font-size:clamp(34px,5.2vw,62px);letter-spacing:-.01em;}
h2{font-size:clamp(26px,3.4vw,42px);}
h3{font-size:clamp(19px,2.1vw,26px);}
p{max-width:72ch;}

/* ---------- 容器 ---------- */
.shell{
  width:100%;
  max-width:var(--shell-max);
  margin:0 auto;
  padding:0 24px;
}
.section{padding:56px 0;}
.section__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:26px;
}

/* ---------- 栅格 ---------- */
.grid{display:grid;gap:22px;}
.grid--split{grid-template-columns:minmax(220px,270px) minmax(0,1fr);}
.grid--halves{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--thirds{grid-template-columns:repeat(3,minmax(0,1fr));}

/* ---------- 跳过链接 ---------- */
.skip-link{
  position:absolute;
  left:16px;
  top:-72px;
  z-index:300;
  padding:10px 18px;
  background:var(--lime);
  color:#06180C;
  border:2px solid #06180C;
  box-shadow:var(--shadow-soft);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.12em;
  transition:top .18s ease;
}
.skip-link:focus{top:14px;}

/* ============================================================
   头部
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:120;
  background:var(--ink);
}

/* 赛事状态条 */
.status-bar{
  background:linear-gradient(90deg,#0E211A 0%,#13291F 55%,#0E211A 100%);
  border-bottom:2px solid var(--line);
}
.status-bar__inner{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:36px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.status-bar__dot{
  flex:none;
  width:8px;
  height:8px;
  background:var(--lime);
  box-shadow:0 0 0 0 rgba(200,255,61,.65);
  animation:status-pulse 2.6s ease-out infinite;
}
@keyframes status-pulse{
  0%{box-shadow:0 0 0 0 rgba(200,255,61,.6);}
  70%{box-shadow:0 0 0 9px rgba(200,255,61,0);}
  100%{box-shadow:0 0 0 0 rgba(200,255,61,0);}
}
.status-bar__text{color:#A9BDB1;}
.status-bar__meta{margin-left:auto;color:var(--moss);}

/* 主行 */
.header-main{
  border-bottom:2px solid var(--line);
  background:rgba(8,12,10,.94);
  backdrop-filter:blur(10px) saturate(1.15);
}
.header-main__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 24px;
  min-height:80px;
  padding-top:12px;
  padding-bottom:12px;
}
.header-left{
  display:flex;
  align-items:center;
  gap:22px;
  min-width:0;
}

/* 品牌 */
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex:none;
  color:var(--mist);
}
.brand__mark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  background:var(--lime);
  color:#06180C;
  border:2px solid #06180C;
  box-shadow:4px 4px 0 rgba(200,255,61,.2);
  font-family:var(--font-display);
  font-size:21px;
  font-weight:700;
  line-height:1;
}
.brand__text{display:flex;flex-direction:column;gap:2px;line-height:1.1;}
.brand__name{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:.09em;
  color:#F2F7F1;
}
.brand__tagline{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--moss);
}

/* 快捷动作 */
.header-actions{display:flex;align-items:center;gap:10px;}
.action-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:2px solid var(--line);
  background:var(--panel);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  white-space:nowrap;
  transition:border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.action-btn:hover{
  border-color:var(--cyan);
  color:#fff;
  transform:translate(-1px,-1px);
  box-shadow:var(--shadow-soft);
}
.action-btn--lime{
  background:var(--lime);
  border-color:var(--lime);
  color:#06180C;
  font-weight:700;
}
.action-btn--lime:hover{
  background:var(--lime-soft);
  border-color:var(--lime-soft);
  color:#06180C;
}

/* 移动按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  background:var(--panel-2);
  border:2px solid var(--line);
  color:var(--mist);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease;
}
.nav-toggle:hover{border-color:var(--lime);color:var(--lime);}
.nav-toggle__bars{
  position:relative;
  display:block;
  width:18px;
  height:2px;
  background:currentColor;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:currentColor;
  transition:transform .18s ease,opacity .18s ease;
}
.nav-toggle__bars::before{top:-6px;}
.nav-toggle__bars::after{top:6px;}
.nav-toggle__label{line-height:1;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg);}

/* 主导航 */
.site-nav{margin-left:auto;}
.site-nav__list{
  display:flex;
  align-items:center;
  gap:2px;
}
.site-nav__item{display:block;}
.site-nav__link{
  display:block;
  padding:9px 11px;
  color:var(--mist);
  font-size:13.5px;
  letter-spacing:.03em;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.site-nav__link:hover{color:var(--lime);border-bottom-color:var(--lime);}
.site-nav__link[aria-current="page"]{
  background:var(--lime);
  color:#06180C;
  border-bottom-color:var(--lime);
  font-weight:700;
}

/* ============================================================
   页脚
   ============================================================ */
.site-footer{
  margin-top:96px;
  background:linear-gradient(180deg,#0A1712 0%,#080C0A 72%);
  border-top:2px solid var(--line);
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.65fr) minmax(0,1.2fr);
  gap:44px;
  padding-top:64px;
  padding-bottom:52px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
}
.footer-summary{
  color:var(--moss);
  font-size:14.5px;
  line-height:1.75;
  max-width:32ch;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.footer-col{min-width:0;}
.footer-col__title{
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--lime);
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-link{
  display:inline-block;
  color:var(--mist);
  font-size:14.5px;
  line-height:1.5;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.footer-link:hover{color:var(--lime);border-bottom-color:var(--lime);}
.footer-contact{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-left:26px;
  border-left:2px solid var(--line);
  min-width:0;
}
.footer-contact__item{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.footer-contact__label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--moss);
}
.footer-contact__value{
  color:var(--mist);
  font-size:14px;
  line-height:1.6;
  word-break:break-word;
}
.footer-note{
  margin-top:2px;
  color:var(--moss);
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.75;
  max-width:34ch;
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 28px;
  padding-top:22px;
  padding-bottom:40px;
  border-top:2px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--moss);
}
.footer-legal{
  padding:4px 10px;
  border:1px solid var(--line);
  color:#A9BDB1;
}
.footer-copyright{color:var(--moss);}

/* ============================================================
   通用组件
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 22px;
  border:2px solid var(--line);
  background:var(--panel-2);
  color:var(--mist);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,0,0,.55);}
.btn--primary{background:var(--orange);border-color:var(--orange);color:#1A0C00;}
.btn--primary:hover{background:#FFA166;border-color:#FFA166;}
.btn--lime{background:var(--lime);border-color:var(--lime);color:#06180C;}
.btn--lime:hover{background:var(--lime-soft);border-color:var(--lime-soft);}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--mist);}
.btn--ghost:hover{border-color:var(--cyan);color:#fff;}

.breadcrumbs{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--moss);
}
.breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.breadcrumbs__item{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.breadcrumbs__item:not(:last-child)::after{
  content:"/";
  color:var(--line-strong);
}
.breadcrumbs__link{
  color:var(--moss);
  transition:color .16s ease;
}
.breadcrumbs__link:hover{color:var(--lime);}
.breadcrumbs__link[aria-current="page"]{color:var(--mist);}

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

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid var(--line-strong);
  background:var(--panel-2);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--moss);
  white-space:nowrap;
}
.tag--lime{border-color:rgba(200,255,61,.5);color:var(--lime);}
.tag--orange{border-color:rgba(255,138,61,.5);color:var(--orange);}
.tag--cyan{border-color:rgba(43,228,196,.5);color:var(--cyan);}

.score{
  display:inline-flex;
  align-items:baseline;
  font-family:var(--font-mono);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--orange);
}
.score__value{font-size:clamp(30px,4.4vw,54px);}
.score__sep{color:var(--moss);margin:0 8px;font-size:.62em;}

.panel{
  position:relative;
  background:var(--panel);
  border:2px solid var(--line);
  box-shadow:var(--shadow-hard);
  padding:22px;
}
.panel--accent{border-left:6px solid var(--lime);}
.panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  margin-bottom:18px;
  border-bottom:2px solid var(--line);
}
.panel__title{
  margin:0;
  font-family:var(--font-display);
  font-size:17px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#F2F7F1;
}
.panel__tag{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--moss);
  white-space:nowrap;
}
.panel__body{font-size:15.5px;color:var(--mist);}

/* 长文容器 */
.prose{max-width:68ch;}
.prose p{margin-bottom:1.15em;color:var(--mist);}
.prose p:last-child{margin-bottom:0;}
.prose h2,.prose h3{margin:1.6em 0 .6em;}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.25em;list-style:disc;}
.prose li{margin-bottom:.45em;}

/* 图片容器 */
.media-frame{
  position:relative;
  display:block;
  border:2px solid var(--line);
  background:var(--panel-2);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.media-frame__ratio{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:linear-gradient(135deg,#13291F 0%,#0B1712 58%,#102018 100%);
}
.media-frame--wide .media-frame__ratio{aspect-ratio:21 / 9;}
.media-frame--square .media-frame__ratio{aspect-ratio:1 / 1;}
.media-frame--portrait .media-frame__ratio{aspect-ratio:3 / 4;}
.media-frame__ratio::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(135deg,rgba(42,61,51,.55) 0 2px,transparent 2px 12px);
  opacity:.45;
}
.media-frame__ratio > img,
.media-frame__ratio > video{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media-frame__tag{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  padding:5px 11px;
  background:var(--lime);
  color:#06180C;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* 滚动进度（JS 注入） */
.scroll-progress{
  position:fixed;
  left:0;
  top:0;
  z-index:200;
  width:100%;
  height:3px;
  pointer-events:none;
  background:rgba(42,61,51,.5);
}
.scroll-progress__bar{
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--cyan),var(--lime));
}

/* 返回顶部（JS 注入） */
.to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:190;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:2px solid var(--lime);
  background:rgba(8,12,10,.92);
  color:var(--lime);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease,background .16s ease;
}
.to-top[data-visible]{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--lime);color:#06180C;}
.to-top__arrow{font-size:14px;line-height:1;}

/* 显现动效 */
[data-reveal]{transition:opacity .55s ease,transform .55s ease;}
.js-reveal [data-reveal]:not([data-revealed]){
  opacity:0;
  transform:translateY(14px);
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1140px){
  .site-header{position:static;}
  .status-bar__meta{display:none;}
  .header-main__inner{min-height:0;}
  .nav-toggle{display:inline-flex;}
  .site-nav{
    order:3;
    flex:1 0 100%;
    width:100%;
    margin-left:0;
    display:none;
    border-top:2px solid var(--line);
    margin-top:6px;
  }
  .site-nav[data-open]{display:block;max-height:calc(100vh - 150px);overflow-y:auto;}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px;}
  .site-nav__link{
    padding:14px 4px;
    font-size:16px;
    border-bottom:1px solid var(--line);
  }
  .site-nav__link:hover{border-bottom-color:var(--lime);}
  .site-nav__link[aria-current="page"]{background:transparent;color:var(--lime);border-bottom-color:var(--lime);}
  .grid--split{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:1024px){
  .footer-top{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:48px;padding-bottom:40px;}
  .footer-contact{padding-left:0;padding-top:24px;border-left:0;border-top:2px solid var(--line);}
  .footer-summary{max-width:52ch;}
  .grid--thirds{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:760px){
  body{font-size:16px;}
  .shell{padding:0 18px;}
  .section{padding:44px 0;}
  .site-footer{margin-top:64px;}
  .grid--halves{grid-template-columns:minmax(0,1fr);}
  .grid--thirds{grid-template-columns:minmax(0,1fr);}
  .panel{padding:18px;}
  .panel__head{flex-wrap:wrap;}
  .to-top{right:14px;bottom:14px;padding:9px 12px;}
}

@media (max-width:560px){
  .header-actions{display:none;}
  .brand__mark{width:36px;height:36px;font-size:18px;}
  .brand__name{font-size:17px;}
  .brand__tagline{font-size:9.5px;letter-spacing:.18em;}
  .footer-cols{grid-template-columns:minmax(0,1fr);gap:22px;}
  .footer-bottom{font-size:11px;padding-bottom:34px;}
  .btn{width:100%;}
  .footer-brand .btn{width:auto;}
}

/* ============================================================
   可访问性与动效偏好
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .status-bar__dot{animation:none;}
  .js-reveal [data-reveal]:not([data-revealed]){opacity:1;transform:none;}
  .scroll-progress{display:none;}
  .to-top{transition:none;}
}