/* =========================================================
   星空娱乐赛事 · /assets/site.css
   共享外壳：reset / 变量 / 中文排版 / 轨道导航 / 抽屉 / 页脚
   ========================================================= */

:root{
  --void:#05080F;
  --rail:#0B1220;
  --panel:#131C2E;
  --cyan:#38E8D0;
  --orange:#FF7A2F;
  --violet:#8B6BFF;
  --line:#1E2A3D;
  --hi:#EAF2FF;
  --mid:#9FB0C8;
  --dim:#8291A8;
  --ok:#4ADE9B;
  --warn:#FFC24B;
  --pure:#FFFFFF;

  --rail-w:72px;
  --maxw:1280px;
  --gutter:clamp(20px,4.2vw,64px);

  --font-sans:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-cond:"Barlow Condensed","Oswald","DIN Alternate","Arial Narrow",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shade:0 24px 60px -40px rgba(0,0,0,.95);
  --rail-glow:0 0 14px rgba(56,232,208,.55);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dd,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,picture{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
hr{border:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- base ---------- */
body{
  background:var(--void);
  color:var(--mid);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html.is-nav-open{overflow:hidden}

@media (min-width:901px){
  body{padding-left:var(--rail-w)}
}

/* ---------- 中文排版 ---------- */
h1,h2,h3,h4,h5,h6{
  color:var(--hi);
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.02em;
}
h1{font-size:clamp(34px,6vw,72px);font-weight:700}
h2{font-size:clamp(24px,3.4vw,48px)}
h3{font-size:clamp(18px,1.8vw,24px);font-weight:600;letter-spacing:-.01em}
h4{font-size:clamp(16px,1.2vw,18px);font-weight:600}
p{max-width:70ch}
strong{color:var(--hi);font-weight:600}
small{font-size:12.5px;letter-spacing:.06em;color:var(--dim)}

/* ---------- 工具类 ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:clamp(72px,10vw,160px);position:relative}
.section--tight{padding-block:clamp(48px,6vw,96px)}

.rule{height:1px;background:var(--line);width:100%;margin:0}

.index,.eyebrow{
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--dim);
  text-transform:none;
}
.numeric,.num{
  font-family:var(--font-cond);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  line-height:.9;
  letter-spacing:.01em;
  color:var(--hi);
}

.panel{
  position:relative;
  background:var(--rail);
  border:1px solid var(--line);
  padding:clamp(22px,3.4vw,56px);
  box-shadow:var(--shade);
}
.panel + .panel{margin-top:clamp(20px,3vw,48px)}

.prose{max-width:68ch}
.prose p + p{margin-top:1.1em}
.prose h2{margin-top:1.9em;margin-bottom:.55em}
.prose h3{margin-top:1.6em;margin-bottom:.45em}
.prose ul,.prose ol{margin-top:1em;display:flex;flex-direction:column;gap:.6em}
.prose li{padding-left:1.3em;position:relative}
.prose li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:var(--cyan);
}

.link{
  color:var(--cyan);
  border-bottom:1px solid rgba(56,232,208,.35);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.link:hover{border-bottom-color:var(--cyan);color:#7BF4E3}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding:13px 26px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--hi);
  font-size:15px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.2;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn--cyan{background:var(--cyan);border-color:var(--cyan);color:#03110F}
.btn--cyan:hover{background:#63F3E0;border-color:#63F3E0;box-shadow:0 14px 30px -16px rgba(56,232,208,.8)}
.btn--orange{background:var(--orange);border-color:var(--orange);color:#180700}
.btn--orange:hover{background:#FF9559;border-color:#FF9559;box-shadow:0 14px 30px -16px rgba(255,122,47,.85)}
.btn--ghost{border-color:var(--line);color:var(--mid)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--hi)}

/* ---------- 状态标记 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  padding:4px 10px;
  border:1px solid var(--line);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--mid);
  white-space:nowrap;
}
.tag--cyan{color:var(--cyan);border-color:rgba(56,232,208,.35)}
.tag--orange{color:var(--orange);border-color:rgba(255,122,47,.35)}
.tag--violet{color:var(--violet);border-color:rgba(139,107,255,.4)}
.tag--ok{color:var(--ok);border-color:rgba(74,222,155,.4)}
.tag--warn{color:var(--warn);border-color:rgba(255,194,75,.4)}

/* ---------- 网格 ---------- */
.grid{display:grid;gap:clamp(16px,2vw,32px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

@media (max-width:980px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 面包屑 ---------- */
.breadcrumbs{font-size:12px;letter-spacing:.14em;color:var(--dim)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.6em}
.breadcrumbs li{display:flex;align-items:center;gap:.6em}
.breadcrumbs li + li::before{content:"/";color:var(--line)}
.breadcrumbs a{transition:color .25s var(--ease)}
.breadcrumbs a:hover{color:var(--cyan)}
.breadcrumbs [aria-current="page"]{color:var(--mid)}

/* ---------- 图片容器 ---------- */
.imgbox{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
}
.imgbox > img,
.imgbox > svg,
.imgbox > picture,
.imgbox > picture > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.imgbox::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,8,15,.30) 0%,rgba(5,8,15,.78) 100%),
    repeating-linear-gradient(118deg,rgba(56,232,208,.055) 0 1px,transparent 1px 30px);
}
.imgbox--21x9{aspect-ratio:21/9}
.imgbox--16x9{aspect-ratio:16/9}
.imgbox--4x3{aspect-ratio:4/3}
.imgbox--1x1{aspect-ratio:1/1}
.imgbox--3x4{aspect-ratio:3/4}
.imgbox--fill{height:100%;min-height:220px}

/* ---------- 滚动显现 ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .52s var(--ease),transform .52s var(--ease);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none}

/* =========================================================
   跳转链接
   ========================================================= */
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:220;
  padding:10px 18px;
  background:var(--cyan);
  color:#03110F;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  transform:translateY(-220%);
  transition:transform .25s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* =========================================================
   侧边轨道导航
   ========================================================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--rail-w);
  z-index:100;
}

.rail{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:16px 0 20px;
  background:
    linear-gradient(180deg,rgba(56,232,208,.07) 0%,rgba(56,232,208,0) 26%),
    var(--rail);
  border-right:1px solid var(--line);
}

.rail__brand{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  color:var(--hi);
}
.rail__mark{width:38px;height:38px;flex:0 0 auto}
.rail__mark svg{width:100%;height:100%}
.rail__name{
  writing-mode:vertical-rl;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.24em;
  line-height:1;
  color:var(--hi);
}

.rail__nav{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  justify-content:center;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.rail__nav::-webkit-scrollbar{width:0;height:0}

.rail__list{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.rail__item{display:flex;width:100%;justify-content:center}

.rail__link{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:10px 0;
  color:var(--dim);
  transition:color .3s var(--ease);
}
.rail__link::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:2px;
  height:0;
  background:var(--cyan);
  transform:translateY(-50%);
  transition:height .34s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.rail__num{
  font-family:var(--font-cond);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1;
  color:var(--line);
  transition:color .3s var(--ease);
}
.rail__label{
  writing-mode:vertical-rl;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1;
}
.rail__link:hover{color:var(--hi)}
.rail__link:hover::before{height:14px;background:var(--line)}
.rail__link:hover .rail__num{color:var(--dim)}

.rail__link[aria-current="page"]{color:var(--cyan)}
.rail__link[aria-current="page"]::before{height:30px;box-shadow:var(--rail-glow)}
.rail__link[aria-current="page"] .rail__num{color:var(--cyan)}

.rail__tools{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding-top:6px;
}
.rail__icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  color:var(--dim);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.rail__icon svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.rail__icon:hover{color:var(--hi);border-color:var(--line)}

.rail__cta{
  position:relative;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-top:3px;
  background:var(--orange);
  color:#180700;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.rail__cta svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.rail__cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(255,122,47,.9)}
.rail__cta::after{
  content:attr(data-label);
  position:absolute;
  left:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(-6px);
  white-space:nowrap;
  padding:7px 12px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--hi);
  font-size:12px;
  letter-spacing:.1em;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.rail__cta:hover::after,
.rail__cta:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* 矮视口压缩 */
@media (min-width:901px) and (max-height:800px){
  .rail__num{display:none}
  .rail__link{padding:7px 0}
  .rail__name{display:none}
  .rail__brand{padding-top:2px}
  .rail__tools{gap:2px}
}

/* =========================================================
   移动导航按钮 + 抽屉
   ========================================================= */
.nav-toggle{display:none}
.drawer{display:none}

@media (max-width:900px){
  .site-header{
    position:static;
    width:auto;
    height:auto;
  }
  .rail{display:none;}

  .nav-toggle{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:130;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    gap:0;
    border-radius:50%;
    background:linear-gradient(150deg,var(--panel),var(--rail));
    border:1px solid var(--line);
    color:var(--hi);
    box-shadow:0 20px 44px -20px rgba(0,0,0,.98);
  }
  .nav-toggle::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    border:1px solid rgba(56,232,208,.4);
    animation:breathe 4s ease-in-out infinite;
  }
  .nav-toggle__bars{
    position:relative;
    display:block;
    width:20px;
    height:12px;
    margin-bottom:2px;
  }
  .nav-toggle__bars span{
    position:absolute;
    left:0;
    width:100%;
    height:1.5px;
    background:currentColor;
    transition:transform .3s var(--ease);
  }
  .nav-toggle__bars span:nth-child(1){top:0}
  .nav-toggle__bars span:nth-child(2){bottom:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){transform:translateY(-5.25px) rotate(-45deg)}

  .drawer{
    position:fixed;
    inset:0;
    z-index:120;
    display:flex;
    flex-direction:column;
    padding:22px var(--gutter) 40px;
    background:
      radial-gradient(120% 70% at 88% 0%,rgba(56,232,208,.12),transparent 58%),
      radial-gradient(90% 60% at 0% 100%,rgba(255,122,47,.10),transparent 60%),
      linear-gradient(180deg,#070C16 0%,#05080F 62%);
    border-right:1px solid var(--line);
    opacity:0;
    visibility:hidden;
    transform:translateY(-14px);
    pointer-events:none;
    transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s var(--ease);
  }
  .drawer[data-open]{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
  }

  .drawer__top{
    flex:0 0 auto;
    padding-bottom:20px;
    border-bottom:1px solid var(--line);
  }
  .drawer__brand{display:flex;align-items:center;gap:13px;color:var(--hi)}
  .drawer__mark{width:36px;height:36px;flex:0 0 auto}
  .drawer__mark svg{width:100%;height:100%}
  .drawer__brandtext{display:flex;flex-direction:column;gap:3px}
  .drawer__name{font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--hi)}
  .drawer__sub{font-size:11px;letter-spacing:.18em;color:var(--dim)}

  .drawer__nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-top:16px;
  }
  .drawer__list{display:flex;flex-direction:column}
  .drawer__item + .drawer__item{border-top:1px solid var(--line)}
  .drawer__link{
    display:flex;
    align-items:baseline;
    gap:16px;
    padding:15px 4px;
    color:var(--mid);
    transition:color .25s var(--ease),padding-left .25s var(--ease);
  }
  .drawer__link:hover{color:var(--hi);padding-left:12px}
  .drawer__num{
    font-family:var(--font-cond);
    font-size:12px;
    font-weight:600;
    letter-spacing:.1em;
    color:var(--dim);
    min-width:26px;
    transition:color .25s var(--ease);
  }
  .drawer__label{font-size:20px;font-weight:600;letter-spacing:.04em;color:inherit}
  .drawer__link[aria-current="page"]{color:var(--cyan)}
  .drawer__link[aria-current="page"] .drawer__num{color:var(--cyan)}

  .drawer__foot{
    flex:0 0 auto;
    padding-top:20px;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .drawer__foot .btn{width:100%}
  .drawer__meta{font-size:12px;letter-spacing:.16em;color:var(--dim)}
}

@keyframes breathe{
  0%,100%{transform:scale(.92);opacity:.18}
  50%{transform:scale(1.07);opacity:.6}
}

/* =========================================================
   滚动进度轨
   ========================================================= */
.scroll-meter{
  position:fixed;
  left:0;
  top:0;
  width:2px;
  height:100%;
  z-index:140;
  pointer-events:none;
}
.scroll-meter__bar{
  display:block;
  width:100%;
  height:0;
  background:linear-gradient(180deg,var(--cyan) 0%,var(--violet) 100%);
  box-shadow:0 0 12px rgba(56,232,208,.6);
  transition:height .12s linear;
}

/* =========================================================
   页脚
   ========================================================= */
.site-footer{
  position:relative;
  background:var(--rail);
  border-top:1px solid var(--line);
  color:var(--mid);
}
.site-footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,rgba(56,232,208,.6),rgba(139,107,255,.35) 42%,rgba(255,122,47,0) 100%);
}

.footer__inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(48px,6vw,88px) var(--gutter) 0;
  display:grid;
  grid-template-columns:minmax(240px,1.05fr) minmax(0,2fr);
  gap:clamp(32px,5vw,80px);
}

.footer__brand{display:flex;flex-direction:column;gap:13px}
.footer__logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:max-content;
  color:var(--hi);
}
.footer__mark{width:36px;height:36px;flex:0 0 auto}
.footer__mark svg{width:100%;height:100%}
.footer__name{font-size:19px;font-weight:700;letter-spacing:.02em}
.footer__tagline{font-size:12px;letter-spacing:.18em;color:var(--dim)}
.footer__note{
  font-size:14px;
  line-height:1.85;
  color:var(--mid);
  max-width:36ch;
}

.footer__nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
.footer__coltitle{
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--dim);
  margin-bottom:16px;
}
.footer__list{display:flex;flex-direction:column;gap:11px}
.footer__list a{
  font-size:14.5px;
  color:var(--mid);
  transition:color .25s var(--ease);
}
.footer__list a:hover{color:var(--cyan)}
.footer__list a[aria-current="page"]{color:var(--cyan)}

.footer__notes{
  width:100%;
  max-width:var(--maxw);
  margin:clamp(38px,4.6vw,68px) auto 0;
  padding:0 var(--gutter) clamp(24px,3vw,36px);
}
.footer__service{
  font-size:12.5px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--dim);
  max-width:88ch;
  padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--line);
}

.footer__base{border-top:1px solid var(--line)}
.footer__baseinner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(20px,2.6vw,30px) var(--gutter) clamp(40px,4vw,56px);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 28px;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--dim);
}
.footer__legal,.footer__copy{max-width:none}

@media (max-width:820px){
  .footer__inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__service{font-size:12px}
}
@media (max-width:400px){
  .footer__nav{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================
   reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
  }
  .nav-toggle::after{animation:none;opacity:.35;transform:none}
  .scroll-meter__bar{transition:none}
}