/* =========================================================
   华体会体育端 · /assets/site.css
   夜间战术板体系：深墨绿底 + 电光青数据线 + 暖橙关键数字
   ========================================================= */

/* ---------- 1. 变量 ---------- */
:root{
  --ink:#062A24;
  --ink-2:#0B3A31;
  --graphite:#04120F;
  --moss:#2E7D6B;
  --rock:#6B7A74;
  --cyan:#17E0C8;
  --orange:#FF8A3D;
  --clay:#C96F4A;
  --cream:#F2EFE6;
  --mist:#A9D8D0;

  --line:rgba(107,122,116,.34);
  --line-soft:rgba(107,122,116,.18);
  --line-strong:rgba(107,122,116,.62);
  --cyan-line:rgba(23,224,200,.28);
  --cyan-soft:rgba(23,224,200,.12);

  --font-sans:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  --font-narrow:"Arial Narrow","Helvetica Neue Condensed","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --h1:56px;
  --h2:34px;
  --h3:22px;
  --body:17px;
  --num:40px;
  --gutter:48px;

  --bar-h:44px;
  --nav-h:64px;
  --nav-h-condensed:52px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (max-width:1023px){
  :root{
    --h1:36px;
    --h2:26px;
    --h3:20px;
    --body:16px;
    --num:30px;
    --gutter:24px;
  }
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
img,svg,video{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
table{border-collapse:collapse;width:100%;}

/* ---------- 3. 基础排版 ---------- */
body{
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(107,122,116,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,122,116,.055) 1px,transparent 1px),
    linear-gradient(rgba(23,224,200,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,224,200,.05) 1px,transparent 1px);
  background-size:8px 8px,8px 8px,96px 96px,96px 96px;
  color:var(--cream);
  font-family:var(--font-sans);
  font-size:var(--body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-narrow);
  font-stretch:condensed;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--cream);
}
h1{font-size:var(--h1);line-height:1.06;}
h2{font-size:var(--h2);line-height:1.12;}
h3{font-size:var(--h3);line-height:1.25;font-weight:800;}
h4{font-size:calc(var(--h3) * .84);line-height:1.3;font-weight:800;}

p{max-width:38em;}
a{color:var(--cyan);text-decoration:none;transition:color .16s var(--ease),border-color .16s var(--ease);}
a:hover{color:var(--cream);}
strong{font-weight:800;color:var(--cream);}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
::selection{background:var(--cyan);color:var(--ink);}

.mono,[data-mono]{font-family:var(--font-mono);letter-spacing:.02em;}
.text-mist{color:var(--mist);}
.rule{height:1px;background:var(--line);border:0;margin:0;}

/* ---------- 4. 布局容器 ---------- */
.container{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:72px;}
.section--tight{padding-block:40px;}

.section-head{display:flex;flex-direction:column;gap:14px;max-width:70ch;margin-bottom:36px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--cyan);display:block;}
.lede{font-size:calc(var(--body) * 1.06);color:var(--mist);max-width:56ch;}

.grid{display:grid;gap:var(--gutter);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--split{grid-template-columns:minmax(240px,280px) minmax(0,1fr);gap:32px;}
.grid--bento{grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;}

@media (max-width:1023px){
  .grid--2,.grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--split{grid-template-columns:1fr;}
  .grid--bento{grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media (max-width:639px){
  .grid--2,.grid--3{grid-template-columns:1fr;}
  .grid--bento{grid-template-columns:1fr;}
}

/* ---------- 5. 通用组件 ---------- */
.panel{
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:24px;
  position:relative;
}
.panel:hover{border-color:var(--line-strong);}

.tag{
  display:inline-block;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;
  padding:3px 9px;
  border:1px solid var(--line-strong);
  color:var(--mist);
  background:rgba(107,122,116,.1);
}
.tag--cyan{border-color:var(--cyan-line);color:var(--cyan);background:var(--cyan-soft);}
.tag--clay{border-color:rgba(201,111,74,.5);color:var(--clay);background:rgba(201,111,74,.12);}

.stat{display:flex;flex-direction:column;gap:4px;}
.stat__value{
  font-family:var(--font-mono);
  font-size:var(--num);
  line-height:1;
  letter-spacing:.02em;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.stat__label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--rock);}

.kv{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-soft);}
.kv__row{
  display:flex;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--line-soft);
  font-size:14px;
}
.kv__key{color:var(--rock);}
.kv__value{font-family:var(--font-mono);color:var(--cream);}

/* 图片容器：页面阶段放入 <img> 即可，自带场地纹理底 */
.media-frame{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--ink-2) 0%,var(--ink) 55%,var(--graphite) 100%);
  border:1px solid var(--line);
}
.media-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(23,224,200,.08) 0 1px,transparent 1px 14px);
}
.media-frame img{width:100%;height:100%;object-fit:cover;}
.media-frame--wide{aspect-ratio:16/9;}
.media-frame--square{aspect-ratio:1/1;}
.media-frame--tall{aspect-ratio:3/4;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-sans);font-weight:700;font-size:14px;
  letter-spacing:.04em;
  padding:11px 20px;
  border:1px solid var(--line-strong);
  color:var(--cream);
  background:transparent;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.btn:hover{background:rgba(242,239,230,.08);color:var(--cream);border-color:var(--cream);}
.btn--primary{background:var(--cyan);border-color:var(--cyan);color:var(--ink);}
.btn--primary:hover{background:var(--cream);border-color:var(--cream);color:var(--ink);}
.btn--ghost{border-color:var(--cyan-line);color:var(--cyan);}
.btn--ghost:hover{background:var(--cyan-soft);border-color:var(--cyan);color:var(--cyan);}

.breadcrumbs{padding-block:20px;}
.breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--rock);}
.breadcrumbs__list li+li::before{content:"/";margin-right:10px;color:var(--line-strong);}
.breadcrumbs__list a{color:var(--mist);}
.breadcrumbs__list a:hover{color:var(--cyan);}

/* 显现动效协议 */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .18s var(--ease),transform .18s var(--ease);}
.js [data-reveal].is-visible{opacity:1;transform:none;}

/* ---------- 6. 头部 ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  color:var(--cream);
  background:var(--ink);
}

.skip-link{
  position:absolute;left:16px;top:-60px;z-index:80;
  padding:10px 16px;
  background:var(--cyan);color:var(--ink);
  font-weight:700;font-size:14px;
  transition:top .16s var(--ease);
}
.skip-link:focus{top:8px;color:var(--ink);}

/* 6.1 上层品牌说明条 */
.brand-bar{
  height:var(--bar-h);
  overflow:hidden;
  background:linear-gradient(90deg,var(--ink) 0%,var(--ink-2) 58%,var(--ink) 100%);
  border-bottom:1px solid var(--cyan-line);
  transition:height .2s var(--ease),opacity .2s var(--ease),border-color .2s var(--ease);
}
.site-header.is-condensed .brand-bar{height:0;opacity:0;border-bottom-color:transparent;}
.brand-bar__inner{
  width:100%;max-width:1440px;margin-inline:auto;
  height:var(--bar-h);
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:20px;
  font-size:13px;
}
.brand-bar__sign{
  display:flex;align-items:center;gap:12px;
  color:var(--mist);max-width:none;white-space:nowrap;
}
.brand-bar__rule{width:1px;height:14px;background:var(--line-strong);display:block;}
.brand-bar__cta{
  margin-left:auto;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  padding:4px 12px;
  border:1px solid var(--cyan-line);
  color:var(--cyan);
}
.brand-bar__cta:hover{background:var(--cyan);color:var(--ink);border-color:var(--cyan);}
.brand-bar__update{display:flex;align-items:center;gap:8px;color:var(--rock);max-width:none;white-space:nowrap;}
.brand-bar__dot{
  width:7px;height:7px;background:var(--orange);display:block;
  animation:pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,138,61,.5);}
  50%{opacity:.6;box-shadow:0 0 0 5px rgba(255,138,61,0);}
}

/* 6.2 下层栏目条 */
.nav-bar{
  position:relative;
  background:rgba(6,42,36,.94);
  border-bottom:1px solid var(--line);
  transition:border-color .2s var(--ease);
}
.site-header.is-condensed .nav-bar{border-bottom-color:var(--cyan-line);}
.nav-bar__inner{
  width:100%;max-width:1440px;margin-inline:auto;
  height:var(--nav-h);
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:28px;
  transition:height .2s var(--ease);
}
.site-header.is-condensed .nav-bar__inner{height:var(--nav-h-condensed);}

.brand{display:flex;align-items:center;gap:10px;color:var(--cream);flex:0 0 auto;}
.brand:hover{color:var(--cream);}
.brand__mark{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  padding:5px 8px;background:var(--cyan);color:var(--ink);
}
.brand__name{font-family:var(--font-narrow);font-weight:900;font-size:19px;letter-spacing:-.01em;}
.brand--footer .brand__name{font-size:21px;}

.nav-toggle{
  display:none;align-items:center;gap:10px;
  margin-left:auto;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  color:var(--cream);
  font-size:13px;letter-spacing:.08em;
}
.nav-toggle__bars{position:relative;width:18px;height:10px;display:block;}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--cyan);
  transition:transform .2s var(--ease),top .2s var(--ease);
}
.nav-toggle__bars::before{top:0;}
.nav-toggle__bars::after{top:8px;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:4px;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:4px;transform:rotate(-45deg);}

.site-nav{flex:1 1 auto;}
.site-nav__list{display:flex;align-items:center;gap:4px;}
.site-nav__link{
  position:relative;display:block;
  padding:10px 12px;
  font-size:15px;font-weight:600;letter-spacing:.01em;
  color:var(--mist);
}
.site-nav__link:hover{color:var(--cream);background:rgba(23,224,200,.06);}
.site-nav__link[aria-current="page"]{color:var(--cream);}
.site-nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:2px;
  height:3px;background:var(--orange);
}

/* 6.3 最近查看 */
.recent{position:relative;flex:0 0 auto;}
.recent__toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;
  border:1px solid var(--cyan-line);
  color:var(--cyan);
  font-size:13px;letter-spacing:.06em;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.recent__toggle:hover,.recent__toggle[aria-expanded="true"]{background:var(--cyan-soft);color:var(--cream);}
.recent__key{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;opacity:.75;}
.recent__panel{
  position:absolute;right:0;top:calc(100% + 12px);
  width:340px;
  padding:18px;
  background:var(--ink-2);
  border:1px solid var(--cyan-line);
  box-shadow:0 18px 40px rgba(4,18,15,.6);
}
.recent__title{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rock);margin-bottom:12px;max-width:none;
}
.recent__list{display:flex;flex-direction:column;border-top:1px solid var(--line-soft);}
.recent__item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 4px;
  border-bottom:1px solid var(--line-soft);
  color:var(--cream);font-size:14px;
}
.recent__item:hover{background:rgba(23,224,200,.07);color:var(--cream);}
.recent__league{color:var(--mist);}
.recent__score{font-family:var(--font-mono);color:var(--orange);letter-spacing:.02em;}
.recent__note{font-size:12.5px;line-height:1.6;color:var(--rock);margin-top:12px;max-width:none;}
.recent__more{
  display:inline-block;margin-top:14px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--cyan);
  border-bottom:1px solid var(--cyan-line);
}

/* 6.4 滚动进度 */
.scroll-meter{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--cyan-soft);overflow:hidden;
}
.scroll-meter__fill{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--orange) 100%);
  transform:scaleX(0);transform-origin:left center;
}

/* ---------- 7. 页脚 ---------- */
.site-footer{
  background:var(--graphite);
  border-top:1px solid var(--cyan-line);
  margin-top:72px;
  color:var(--mist);
}
.site-footer__inner{
  width:100%;max-width:1440px;margin-inline:auto;
  padding-inline:var(--gutter);
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(280px,1.1fr) 2fr;
  gap:48px;
  padding-block:56px 36px;
}
.footer-brand{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.footer-brand__line{
  font-family:var(--font-narrow);font-weight:800;font-size:17px;
  letter-spacing:-.01em;color:var(--cream);max-width:24em;
}
.footer-brand__meta{font-size:13.5px;line-height:1.7;color:var(--rock);max-width:34em;}

.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}
.footer-col__title{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
  margin-bottom:14px;
}
.footer-col__list{display:flex;flex-direction:column;gap:9px;}
.footer-col__list a{color:var(--mist);font-size:14.5px;}
.footer-col__list a:hover{color:var(--cyan);}

.footer-contact{
  display:grid;
  grid-template-columns:minmax(160px,240px) minmax(0,1fr);
  gap:10px 40px;
  padding-block:28px;
  border-top:1px solid var(--line-soft);
}
.footer-contact__title{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
}
.footer-contact__list{display:flex;flex-direction:column;gap:8px;}
.footer-contact__item{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;}
.footer-contact__label{min-width:42px;color:var(--rock);font-size:12px;letter-spacing:.1em;}
.footer-contact__value{font-family:var(--font-mono);color:var(--cream);}
.footer-contact__note{grid-column:2;font-size:12.5px;line-height:1.7;color:var(--rock);max-width:60em;}

.footer-legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;
  padding-block:22px 32px;
  border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--rock);
}
.footer-legal__copy{font-family:var(--font-mono);max-width:none;}
.footer-legal__links{display:flex;flex-wrap:wrap;gap:18px;}
.footer-legal__links a{color:var(--mist);}
.footer-legal__links a:hover{color:var(--cyan);}
.footer-legal__icp{font-family:var(--font-mono);margin-left:auto;max-width:none;color:var(--rock);}

/* ---------- 8. 响应式 ---------- */
@media (max-width:1023px){
  .site-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--ink-2);
    border-top:1px solid var(--cyan-line);
    border-bottom:1px solid var(--cyan-line);
    padding:8px var(--gutter) 20px;
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
  }
  .site-nav[data-open]{display:block;}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0;}
  .site-nav__link{
    padding:15px 2px;font-size:17px;
    border-bottom:1px dashed var(--line-soft);
    color:var(--cream);
  }
  .site-nav__link[aria-current="page"]::after{left:auto;right:auto;bottom:10px;width:26px;}
  .site-nav__item:last-child .site-nav__link{border-bottom:0;}
  .nav-toggle{display:inline-flex;}
  .recent{display:none;}

  .footer-top{grid-template-columns:1fr;gap:36px;padding-block:44px 28px;}
  .footer-contact{grid-template-columns:1fr;}
  .footer-contact__note{grid-column:1;}
}

@media (max-width:767px){
  .brand-bar__sign{font-size:12px;}
  .brand-bar__rule,.brand-bar__update{display:none;}
  .brand-bar__cta{margin-left:auto;}
  .brand__name{font-size:17px;}
  .footer-cols{grid-template-columns:1fr;gap:26px;}
  .footer-legal__icp{margin-left:0;}
}

@media (max-width:479px){
  .brand-bar__sign span{display:none;}
  .site-header{position:sticky;}
}

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