/* ============================================================
   BEPLAY赛场 — 共享外壳样式表 /assets/site.css
   1 重置  2 变量  3 基础排版  4 外框与容器  5 头部  6 页脚
   7 通用组件  8 动效  9 响应式
   ============================================================ */

/* ---------- 1. 重置 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
body,h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;}
img,svg{max-width:100%;}
table{border-collapse:collapse;}

/* ---------- 2. 变量 ---------- */
:root{
  --ink:#0F1310;
  --grass:#123A2E;
  --grass-deep:#082019;
  --paper:#F2EDE2;
  --signal:#FF5A2B;
  --lime:#C9F24E;
  --red:#D3241F;
  --yellow:#F2C231;
  --mist:#B9C2B6;
  --white:#FFFFFF;
  --hair:rgba(185,194,182,.16);
  --hair-strong:rgba(185,194,182,.34);
  --on-paper:#26302A;
  --on-paper-soft:#4A5750;
  --font-cn:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.2s;
  --t-base:.28s;
  --frame-inset:10px;
  --w-max:1360px;
}

/* ---------- 3. 基础排版 ---------- */
body{
  min-height:100vh;
  overflow-x:hidden;
  background-color:var(--ink);
  background-image:
    linear-gradient(180deg,rgba(18,58,46,.50) 0,rgba(15,19,16,0) 460px),
    repeating-linear-gradient(90deg,rgba(185,194,182,.045) 0 1px,transparent 1px 120px);
  color:var(--paper);
  font-family:var(--font-cn);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--white);}
p{line-height:1.75;}
strong{font-weight:700;color:var(--white);}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

/* 外圈刻线：框景的可见边界 */
body::after{
  content:"";
  position:fixed;
  inset:var(--frame-inset);
  border:1px solid rgba(185,194,182,.13);
  pointer-events:none;
  z-index:45;
}

/* ---------- 4. 容器与主体 ---------- */
.container,
.footer__grid,
.footer__legal,
.band__inner,
.band-index__inner{
  width:100%;
  max-width:var(--w-max);
  margin-inline:auto;
  padding-inline:clamp(16px,3vw,40px);
}
.page-main{display:block;min-height:60vh;}
.section{padding-block:clamp(40px,6vw,88px);}
.section--paper{background:var(--paper);color:var(--on-paper);}
.section--grass{background:var(--grass);}
.section--deep{background:var(--grass-deep);}
.section--paper h1,.section--paper h2,.section--paper h3,.section--paper h4,
.panel--paper h1,.panel--paper h2,.panel--paper h3,.panel--paper h4{color:var(--ink);}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;}
.section__title{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:.45em 0 .5em;}
.lead{font-size:1.02rem;color:var(--mist);max-width:62ch;}
.section--paper .lead,.panel--paper .lead{color:var(--on-paper-soft);}
.hero-title{font-size:clamp(2.6rem,7vw,5.4rem);line-height:.98;letter-spacing:-.03em;}
.data-num{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em;color:var(--lime);}

/* 跳转链接 */
.skip-link{
  position:absolute;top:8px;left:8px;z-index:80;
  padding:10px 16px;background:var(--lime);color:var(--ink);
  font-size:.82rem;font-weight:700;text-decoration:none;
  transform:translateY(-160%);
  transition:transform var(--t-fast) var(--ease);
}
.skip-link:focus{transform:translateY(0);}

/* ---------- 5. 头部：两条贴边栏目带 ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(15,19,16,.94);
  border-bottom:1px solid var(--hair);
  transition:box-shadow var(--t-base) var(--ease);
}
.site-header[data-scrolled]{box-shadow:0 14px 34px rgba(0,0,0,.45);}
.band{border-bottom:1px solid var(--hair);}
.band:last-child{border-bottom:0;}
.band__inner{
  display:flex;align-items:center;
  gap:clamp(12px,2vw,28px);
}
.band--brand .band__inner{min-height:54px;}
.band--nav .band__inner{min-height:48px;}

/* 品牌块 */
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;}
.brand__mark{
  display:grid;place-items:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:2px;
  background:var(--signal);color:var(--ink);
  font-family:var(--font-mono);font-size:.76rem;font-weight:700;letter-spacing:.04em;
}
.brand__text{display:flex;flex-direction:column;line-height:1.2;}
.brand__name{
  font-size:1rem;font-weight:700;letter-spacing:-.01em;color:var(--white);
}
.brand__tag{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--mist);text-transform:uppercase;
}

/* 工具位 */
.band__utils{margin-left:auto;display:flex;align-items:center;gap:10px;}
.util-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;
  border:1px solid var(--hair-strong);
  background:transparent;color:var(--mist);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.util-btn:hover{color:var(--paper);border-color:var(--lime);}
.util-btn__a,.util-btn__s,.util-btn__b{display:inline-block;}
.util-btn--lang .util-btn__a{color:var(--white);}
.util-btn--lang[aria-pressed="true"] .util-btn__a{color:var(--mist);}
.util-btn--lang[aria-pressed="true"] .util-btn__b{color:var(--lime);}
.util-btn__dot{
  width:7px;height:7px;border-radius:50%;
  background:transparent;border:1px solid var(--hair-strong);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.util-btn--collect[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.util-btn--collect[aria-pressed="true"] .util-btn__dot{background:var(--signal);border-color:var(--signal);}

/* 移动导航按钮（桌面隐藏） */
.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:7px 12px;border:1px solid var(--hair-strong);color:var(--mist);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
}
.nav-toggle__bars{display:flex;flex-direction:column;gap:3px;width:16px;}
.nav-toggle__bars span{display:block;height:1.5px;background:currentColor;transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);}
.nav-toggle[aria-expanded="true"]{color:var(--lime);border-color:var(--lime);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(4.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg);}
.nav-toggle__label{white-space:nowrap;}

/* 主导航 */
.site-nav{display:block;}
.site-nav__list{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(6px,1.4vw,20px);}
.site-nav__item{position:relative;}
.site-nav__link{
  position:relative;display:inline-block;padding:6px 2px;
  color:var(--mist);text-decoration:none;
  font-size:.9rem;font-weight:500;letter-spacing:.01em;
  transition:color var(--t-fast) var(--ease);
}
.site-nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease);
}
.site-nav__link:hover{color:var(--white);}
.site-nav__link:hover::after{transform:scaleX(1);}
.site-nav__link[aria-current="page"]{color:var(--white);font-weight:700;}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--lime);}

/* 栏目带展开控制 */
.band-toggle{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  padding:7px 12px;border:1px solid var(--hair-strong);color:var(--mist);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.band-toggle::after{
  content:"";width:6px;height:6px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);transition:transform var(--t-fast) var(--ease);
}
.band-toggle:hover{color:var(--paper);border-color:var(--lime);}
.band-toggle[aria-expanded="true"]{color:var(--lime);border-color:var(--lime);}
.band-toggle[aria-expanded="true"]::after{transform:rotate(-135deg);}
.band-toggle__text{white-space:nowrap;}

/* 坐标索引 */
.band-index{
  max-height:0;opacity:0;visibility:hidden;overflow:hidden;
  border-top:1px solid transparent;
  transition:max-height var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease),visibility 0s linear var(--t-fast),border-color var(--t-fast) var(--ease);
}
.band-index[data-open]{
  max-height:280px;opacity:1;visibility:visible;border-top-color:var(--hair);
  transition:max-height var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease),visibility 0s,border-color var(--t-fast) var(--ease);
}
.band-index__inner{padding-block:14px 16px;}
.band-index__list{display:flex;flex-wrap:wrap;gap:8px 10px;}
.band-index__item{animation:none;}
.band-index[data-open] .band-index__item{animation:tagIn var(--t-base) var(--ease) both;}
.band-index[data-open] .band-index__item:nth-child(2){animation-delay:.03s;}
.band-index[data-open] .band-index__item:nth-child(3){animation-delay:.06s;}
.band-index[data-open] .band-index__item:nth-child(4){animation-delay:.09s;}
.band-index[data-open] .band-index__item:nth-child(5){animation-delay:.12s;}
.band-index[data-open] .band-index__item:nth-child(6){animation-delay:.15s;}
.band-index[data-open] .band-index__item:nth-child(7){animation-delay:.18s;}
.band-index[data-open] .band-index__item:nth-child(8){animation-delay:.21s;}
.band-index__link{
  display:inline-flex;align-items:baseline;gap:9px;
  padding:7px 13px;background:var(--grass-deep);border:1px solid var(--hair);
  color:var(--mist);text-decoration:none;font-size:.82rem;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.band-index__link:hover{color:var(--paper);border-color:var(--lime);background:var(--grass);}
.band-index__num{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--lime);}
.band-index__label{white-space:nowrap;}
@keyframes tagIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---------- 6. 页脚 ---------- */
.site-footer{background:var(--grass-deep);border-top:1px solid var(--hair);color:var(--mist);}
.footer__ticker{
  display:flex;flex-wrap:wrap;
  border-bottom:1px solid var(--hair);
  background:rgba(15,19,16,.38);
}
.footer__tick{
  padding:9px 20px;border-right:1px solid var(--hair);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(185,194,182,.55);white-space:nowrap;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1.3fr 1fr;
  gap:clamp(20px,3vw,44px);
  padding-block:clamp(32px,5vw,58px);
}
.footer__col{min-width:0;}
.footer__brand{
  font-size:1.12rem;font-weight:700;letter-spacing:-.02em;color:var(--white);
}
.footer__brand-sub{
  margin-bottom:18px;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(185,194,182,.6);
}
.footer__title{
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);
}
.footer__title::before{content:"";width:14px;height:1px;background:currentColor;flex:0 0 auto;}
.footer__list li{margin-bottom:8px;}
.footer__list a{
  color:var(--mist);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.footer__list a:hover{color:var(--white);border-bottom-color:var(--lime);}
.footer__list--plain li{color:var(--mist);}
.footer__key{
  display:block;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(185,194,182,.52);
}
.footer__value{
  display:block;font-size:.9rem;line-height:1.6;color:var(--paper);
  overflow-wrap:anywhere;
}
.footer__note{margin-top:12px;font-size:.78rem;line-height:1.7;color:rgba(185,194,182,.68);}
.footer__legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 24px;
  padding-block:18px 26px;
  border-top:1px solid var(--hair);
  font-size:.78rem;
}
.footer__copy{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:rgba(185,194,182,.65);}
.footer__legal-links{display:flex;flex-wrap:wrap;gap:18px;}
.footer__legal-links a{
  color:var(--mist);text-decoration:none;
  transition:color var(--t-fast) var(--ease);
}
.footer__legal-links a:hover{color:var(--lime);}
.footer__rule{
  height:5px;
  background:linear-gradient(90deg,var(--signal) 0 12%,var(--lime) 12% 22%,var(--grass) 22% 100%);
}

/* ---------- 7. 通用组件 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border:1px solid transparent;
  font-size:.88rem;font-weight:600;letter-spacing:.02em;text-decoration:none;
  cursor:pointer;
  transition:transform var(--t-base) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.btn:active{transform:translateY(1px);}
.btn--signal{background:var(--signal);color:var(--ink);}
.btn--signal:hover{background:#FF7048;}
.btn--lime{background:var(--lime);color:var(--ink);}
.btn--lime:hover{background:#D8FF6B;}
.btn--ghost{border-color:var(--hair-strong);color:var(--paper);background:transparent;}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime);}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border:1px solid var(--hair-strong);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);white-space:nowrap;
}
.tag--lime{background:var(--lime);border-color:var(--lime);color:var(--ink);}
.tag--signal{background:var(--signal);border-color:var(--signal);color:var(--ink);}
.tag--red{background:var(--red);border-color:var(--red);color:var(--white);}
.tag--yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink);}

.panel{
  padding:clamp(20px,3vw,32px);
  background:var(--grass-deep);
  border:1px solid var(--hair);
}
.panel--paper{background:var(--paper);color:var(--on-paper);border-color:rgba(15,19,16,.12);}
.panel--grass{background:var(--grass);}

.breadcrumb{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--mist);}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--hair-strong);}
.breadcrumb a{color:var(--mist);text-decoration:none;transition:color var(--t-fast) var(--ease);}
.breadcrumb a:hover{color:var(--lime);}

.grid{display:grid;gap:clamp(16px,2.4vw,28px);}
.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(0,7fr) minmax(0,5fr);}
.grid--split-rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}

.prose{max-width:70ch;font-size:1rem;line-height:1.75;}
.prose h2{font-size:1.5rem;margin:1.6em 0 .6em;}
.prose h3{font-size:1.15rem;margin:1.4em 0 .5em;}
.prose p{margin-bottom:1.1em;}
.prose ul{list-style:disc;padding-left:1.3em;margin-bottom:1.1em;}
.prose li{margin-bottom:.4em;}
.prose--paper{color:var(--on-paper);}

.media{
  position:relative;display:block;overflow:hidden;
  background:var(--grass-deep);border:1px solid var(--hair);
}
.media__img{display:block;width:100%;height:100%;object-fit:cover;}
.media--16x9{aspect-ratio:16/9;}
.media--4x3{aspect-ratio:4/3;}
.media--1x1{aspect-ratio:1/1;}
.media--3x4{aspect-ratio:3/4;}
.media--slant{clip-path:polygon(0 0,100% 0,100% 88%,0 100%);}
.media__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 12px;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper);background:linear-gradient(transparent,rgba(8,32,25,.88));
}
.media__tag{position:absolute;top:10px;left:10px;}

/* ---------- 8. 动效 ---------- */
[data-reveal]{
  opacity:0;transform:translateY(10px);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
[data-reveal][data-visible]{opacity:1;transform:none;}
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--signal),var(--lime));
  pointer-events:none;
}
@keyframes pulseLime{
  0%,100%{box-shadow:0 0 0 0 rgba(201,242,78,.55);}
  50%{box-shadow:0 0 0 6px rgba(201,242,78,0);}
}
[data-pulse]{animation:pulseLime 1.2s var(--ease) infinite;}

/* ---------- 9. 响应式 ---------- */
@media (max-width:1080px){
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .grid--2,.grid--3,.grid--split,.grid--split-rev{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:880px){
  .nav-toggle{display:inline-flex;}
  .band--nav .band__inner{flex-wrap:wrap;min-height:0;padding-block:10px;}
  .site-nav{order:3;flex:1 0 100%;display:none;}
  .site-nav[data-open]{display:block;padding-top:8px;border-top:1px solid var(--hair);}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0;}
  .site-nav__item{border-bottom:1px solid var(--hair);}
  .site-nav__link{display:block;padding:12px 4px;font-size:.95rem;}
  .site-nav__link::after{display:none;}
  .site-nav__link[aria-current="page"]{color:var(--lime);}
  .band-toggle{margin-left:0;}
  .band-index[data-open]{max-height:520px;}
  .band-index__list{flex-direction:column;}
  .band-index__link{width:100%;}
}
@media (max-width:640px){
  :root{--frame-inset:5px;}
  .band--brand .band__inner{min-height:50px;}
  .brand__tag{display:none;}
  .util-btn--collect{padding:7px 10px;}
  .footer__grid{grid-template-columns:1fr;gap:26px;}
  .footer__legal{flex-direction:column;align-items:flex-start;}
}
@media (max-width:400px){
  .util-btn--lang{display:none;}
}

/* ---------- 10. 减少动态 ---------- */
@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;}
  .band-index{transition:none;}
}