/* ============================================================
   /assets/site.css — 全站外壳与通用组件
   夜间战术分析室：深墨绿底 / 荧光青数据线 / 琥珀橙高亮
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root {
  --ink-abyss: #06110F;
  --ink-deep: #0B1A17;
  --ink-surface: #102622;
  --moss-line: #1E3A33;
  --mist-text: #CCDAD4;
  --mist-dim: #8AA29A;
  --fluoro-cyan: #35F0D0;
  --cyan-glass: rgba(53, 240, 208, 0.13);
  --amber-orange: #FFB347;
  --amber-deep: #B87514;
  --paper: #F2F7F5;
  --graphite: #3A4A46;

  --rail-w: 88px;
  --topline-h: 56px;
  --gutter: 5vw;
  --gap: 24px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 160ms;

  --font-display: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-body: var(--font-display);
  --font-mono: "JetBrains Mono", "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink-deep);
  color: var(--mist-text);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--paper);
}

p { margin: 0 0 1em; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

table { border-collapse: collapse; width: 100%; }

::selection {
  background: var(--fluoro-cyan);
  color: var(--ink-abyss);
}

:focus-visible {
  outline: 2px solid var(--fluoro-cyan);
  outline-offset: 2px;
}

/* 微光粒子层：52s 缓慢漂移，透明度 5.5% */
body::before {
  content: "";
  position: fixed;
  inset: -6%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(53, 240, 208, 0.55), transparent 62%),
    radial-gradient(1.5px 1.5px at 78% 64%, rgba(53, 240, 208, 0.42), transparent 62%),
    radial-gradient(1.5px 1.5px at 44% 88%, rgba(255, 179, 71, 0.38), transparent 62%),
    radial-gradient(2px 2px at 88% 12%, rgba(53, 240, 208, 0.32), transparent 62%),
    radial-gradient(1.5px 1.5px at 28% 52%, rgba(53, 240, 208, 0.26), transparent 62%);
  opacity: 0.055;
  animation: ky-drift 52s linear infinite alternate;
}

@keyframes ky-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.2%, -3%, 0) scale(1.06); }
}

/* ---------- 3. 跳过链接 ---------- */
.skip-link {
  position: fixed;
  top: 10px;
  left: calc(var(--rail-w) + 14px);
  z-index: 200;
  padding: 10px 18px;
  background: var(--fluoro-cyan);
  color: var(--ink-abyss);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* ---------- 4. 顶边细条 ---------- */
.site-header {
  position: relative;
  z-index: 80;
}

.topline {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topline-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter) 0 0;
  background: var(--ink-abyss);
  border-bottom: 1px solid var(--moss-line);
  z-index: 90;
}

.topline__brand {
  flex: 0 0 auto;
  width: var(--rail-w);
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--moss-line);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--mist-text);
}

.brand__sig {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--fluoro-cyan);
}

.brand__cn {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--mist-dim);
}

.brand:hover .brand__sig,
.brand:focus-visible .brand__sig { color: var(--paper); }

.topline__meta {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  padding-left: 22px;
}

/* 赛季阶段状态点 */
.stage {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.stage__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--graphite);
}

.stage__scale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stage__node {
  width: 6px;
  height: 6px;
  border: 1px solid var(--moss-line);
  background: transparent;
  transform: rotate(45deg);
}

.stage__node.is-current {
  background: var(--amber-orange);
  border-color: var(--amber-orange);
  box-shadow: 0 0 10px rgba(255, 179, 71, 0.45);
}

.stage__now {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--amber-orange);
}

.topline__mail {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mist-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.topline__mail:hover,
.topline__mail:focus-visible {
  color: var(--fluoro-cyan);
  border-bottom-color: rgba(53, 240, 208, 0.45);
}

.topline__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--fluoro-cyan);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0.85;
}

/* ---------- 5. 移动栏目按钮 ---------- */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--moss-line);
  color: var(--mist-text);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-toggle:hover {
  color: var(--fluoro-cyan);
  border-color: rgba(53, 240, 208, 0.4);
  background: var(--cyan-glass);
}

.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
}

.nav-toggle__bars > span {
  display: block;
  height: 1px;
  background: currentColor;
}

.nav-toggle__bars > span:nth-child(2) { width: 70%; }

/* ---------- 6. 纵向数据轴 ---------- */
.rail {
  position: fixed;
  top: var(--topline-h);
  left: 0;
  bottom: 0;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  padding: 26px 0 20px;
  background: var(--ink-abyss);
  border-right: 1px solid var(--moss-line);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 70;
}

.rail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail__item { display: block; }

.rail__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 6px;
  text-decoration: none;
  color: var(--mist-dim);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.rail__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--fluoro-cyan);
  transform: translateY(-50%);
  transition: height var(--dur) var(--ease);
}

.rail__link:hover {
  color: var(--mist-text);
  background: var(--cyan-glass);
}

.rail__link:focus-visible {
  outline: 2px solid var(--fluoro-cyan);
  outline-offset: -2px;
}

.rail__link[aria-current="page"] {
  color: var(--fluoro-cyan);
  background: var(--cyan-glass);
}

.rail__link[aria-current="page"]::before { height: 22px; }

.rail__link[aria-current="page"] .rail__idx { color: var(--amber-orange); }

.rail__idx {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--graphite);
}

.rail__label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.16em;
}

.rail__foot {
  margin-top: auto;
  padding: 18px 8px 0;
  border-top: 1px solid var(--moss-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.rail__chapter-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--graphite);
}

.rail__chapter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--fluoro-cyan);
}

/* ---------- 7. 内容骨架 ---------- */
main,
#main-content {
  display: block;
  margin-left: var(--rail-w);
  padding-top: var(--topline-h);
}

.shell {
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--moss-line);
}

/* ---------- 8. 通用文字组件 ---------- */
.idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

.data-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.prose {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.75;
}

.prose p { margin: 0 0 1.4em; }

.prose h2,
.prose h3 {
  margin: 2.2em 0 0.8em;
}

.prose h2 { font-size: 1.45rem; }
.prose h3 { font-size: 1.15rem; }

.prose a {
  color: var(--fluoro-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover { color: var(--paper); }

.glass {
  background: rgba(16, 38, 34, 0.72);
  border: 1px solid var(--moss-line);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.glass:hover,
.glass:focus-within {
  opacity: 1;
  transform: translateY(-3px);
  border-color: rgba(53, 240, 208, 0.4);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  border: 1px solid var(--moss-line);
  color: var(--mist-dim);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.tag--hot {
  border-color: rgba(255, 179, 71, 0.5);
  color: var(--amber-orange);
}

/* ---------- 9. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--mist-text);
  border: 1px solid var(--moss-line);
  background: transparent;
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:hover,
.btn:focus-visible {
  color: var(--fluoro-cyan);
  border-color: rgba(53, 240, 208, 0.4);
  background: var(--cyan-glass);
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--fluoro-cyan);
  border-color: var(--fluoro-cyan);
  color: var(--ink-abyss);
  font-weight: 700;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink-abyss);
}

.btn--ghost {
  border-color: rgba(255, 179, 71, 0.45);
  color: var(--amber-orange);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--amber-orange);
  border-color: var(--amber-orange);
  background: rgba(255, 179, 71, 0.1);
}

/* ---------- 10. 面包屑 ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mist-dim);
}

.crumbs a {
  color: var(--mist-dim);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.crumbs a:hover,
.crumbs a:focus-visible { color: var(--fluoro-cyan); }

.crumbs__sep { color: var(--graphite); }

/* ---------- 11. 图片容器基础规则 ---------- */
.figure {
  margin: 0;
  display: block;
}

.figure__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(53, 240, 208, 0.07), rgba(6, 17, 15, 0)),
    var(--ink-surface);
  border: 1px solid var(--moss-line);
}

.figure__frame > img,
.figure__frame > svg,
.figure__frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figure--wide .figure__frame { aspect-ratio: 21 / 9; }
.figure--tall .figure__frame { aspect-ratio: 4 / 5; }
.figure--square .figure__frame { aspect-ratio: 1 / 1; }

.figure__caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mist-dim);
}

/* ---------- 12. 显现（JS 钩子） ---------- */
html[data-motion="ready"] [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
}

html[data-motion="ready"] [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 340ms var(--ease), transform 340ms var(--ease);
}

/* ---------- 13. 页脚 ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  margin-left: var(--rail-w);
  background: var(--ink-abyss);
  border-top: 1px solid var(--moss-line);
  color: var(--mist-dim);
  padding-top: clamp(56px, 7vw, 104px);
}

.footer__inner {
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.footer__brand { max-width: 40ch; }

.footer__sig {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--fluoro-cyan);
}

.footer__cn {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--mist-dim);
}

.footer__line {
  margin: 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mist-dim);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.footer__group-title {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--graphite);
  text-transform: uppercase;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__link {
  display: inline-block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mist-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--fluoro-cyan);
  border-bottom-color: rgba(53, 240, 208, 0.45);
}

.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__field {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--graphite);
}

.footer__value {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mist-dim);
}

.footer__contact-item .footer__link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  word-break: break-all;
}

.footer__legalbar {
  margin-top: clamp(44px, 5vw, 78px);
  border-top: 1px solid var(--moss-line);
}

.footer__legal {
  max-width: 1520px;
  margin-inline: auto;
  padding: 20px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  justify-content: space-between;
}

.footer__legal-item {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--graphite);
}

/* ---------- 14. 无障碍工具 ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 15. 平板与移动 ---------- */
@media (max-width: 1439px) {
  :root { --gutter: 4vw; }
}

@media (max-width: 1179px) {
  :root {
    --rail-w: 0px;
    --gap: 18px;
  }

  .topline { padding-right: 16px; }

  .topline__brand {
    width: auto;
    padding-inline: 16px;
    border-right: 0;
  }

  .topline__meta { gap: 16px; padding-left: 12px; }

  .nav-toggle { display: inline-flex; }

  .rail {
    top: var(--topline-h);
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-height: calc(100vh - var(--topline-h));
    padding: 12px 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--moss-line);
    background: var(--ink-abyss);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 180ms var(--ease),
      transform 180ms var(--ease),
      visibility 180ms linear;
  }

  .site-header[data-open="true"] .rail {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .rail__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    padding-inline: 10px;
  }

  .rail__item { flex: 0 0 auto; }

  .rail__link {
    flex-direction: row;
    align-items: baseline;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid transparent;
  }

  .rail__link::before { display: none; }

  .rail__link[aria-current="page"] {
    border-color: rgba(53, 240, 208, 0.35);
    background: var(--cyan-glass);
  }

  .rail__foot {
    margin-top: 14px;
    flex-direction: row;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px;
    padding: 14px 18px 0;
    text-align: right;
  }

  .footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root { --topline-h: 52px; }

  body { font-size: 16px; }

  .skip-link { left: 14px; }

  .stage,
  .topline__mail { display: none; }

  .topline__meta { gap: 10px; }

  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }

  .footer__inner { grid-template-columns: minmax(0, 1fr); }

  .footer__nav { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .footer__legal { flex-direction: column; }

  .figure--wide .figure__frame { aspect-ratio: 16 / 9; }
}

@media (max-width: 599px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .btn { width: 100%; justify-content: center; }
}

/* ---------- 16. 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  body::before { animation: none; opacity: 0.04; }

  .btn:hover,
  .glass:hover,
  .glass:focus-within,
  .nav-toggle:hover { transform: none; }

  html[data-motion="ready"] [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}