/* ============================================================================
   NEXUS · 基础层
   reset / 排版 / 焦点 / 背景空间（六层）
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { -webkit-user-drag: none; user-select: none; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--text-on-accent); }

/* ---------------------------------------------------------------- 焦点 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.nx-focus-ring:focus-visible { outline-offset: 2px; }

/* 键盘用户专用：鼠标点击不显示焦点环 */
body:not(.kb-nav) :focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------- 滚动条 */
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: var(--surface-5) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-4);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--surface-5); background-clip: content-box; }

/* ---------------------------------------------------------------- 排版原子 */
.eyebrow {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  line-height: 1.4;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }

.h-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 600;
}
.h-1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 600;
}
.h-2 {
  font-size: var(--fs-h2);
  line-height: 1.24;
  letter-spacing: var(--ls-tight);
  font-weight: 600;
}

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 10px; left: 50%; translate: -50% -140%;
  z-index: var(--z-debug);
  padding: 10px 18px; border-radius: var(--r-full);
  background: var(--accent); color: var(--text-on-accent);
  font-size: var(--fs-sm); font-weight: 600;
  transition: translate var(--dur-2) var(--ease-enter);
}
.skip-link:focus-visible { translate: -50% 0; }

/* ============================================================================
   背景空间 · 六层
   1 基底  2 大范围渐变  3 局部环境光  4 颗粒  5 暗角  6 随焦点漂移的光场
   ========================================================================== */
.bg-space {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
  contain: strict;
}

/* 1 · 基底 */
.bg-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 82% at 50% -12%, var(--glow-teal) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

/* 2 · 大范围渐变（冷白 / 暗青 / 薄荷，全部低饱，无彩光） */
.bg-wash {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(52% 44% at 14% 6%, var(--glow-cool) 0%, transparent 68%),
    radial-gradient(46% 40% at 86% 88%, var(--glow-mint) 0%, transparent 70%);
  opacity: 0.9;
  will-change: transform;
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0);
  transition: transform 900ms var(--ease-space);
}

/* 3 · 局部环境光（跟随当前选中游戏的主色调） */
.bg-aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(30% 26% at 76% 18%, var(--aurora, var(--glow-cool)) 0%, transparent 72%),
    radial-gradient(26% 22% at 22% 76%, var(--aurora-2, var(--glow-mint)) 0%, transparent 74%);
  opacity: 0.75;
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0);
  transition: transform 1200ms var(--ease-space), opacity 700ms linear,
              background 900ms linear;
}

/* 4 · 极细颗粒 */
.bg-grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: overlay;
}

/* 5 · 暗角 */
.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    128% 96% at 50% 42%,
    transparent 30%,
    rgba(0, 0, 0, calc(var(--vignette) * 0.42)) 74%,
    rgba(0, 0, 0, calc(var(--vignette) * 0.78)) 100%
  );
}

/* 6 · 随焦点缓慢变化的光场（唯一会“动”的大面积层） */
.bg-field {
  position: absolute;
  width: 92vmax;
  height: 92vmax;
  left: 0; top: 0;
  translate: calc(var(--fx, 0.5) * (100vw - 92vmax)) calc(var(--fy, 0.4) * (100vh - 92vmax));
  background: radial-gradient(
    closest-side,
    var(--glow-accent) 0%,
    color-mix(in srgb, var(--glow-cool) 55%, transparent) 42%,
    transparent 72%
  );
  opacity: 0.5;
  transition: translate 1400ms var(--ease-space), opacity 900ms linear;
  filter: blur(18px);
}

/* 极宽屏下颗粒不至于太满 */
@media (min-width: 1920px) {
  .bg-grain { background-size: 180px 180px; }
}

/* 触屏 / 低性能：减少背景开销 */
@media (hover: none) {
  .bg-field { opacity: 0.34; filter: blur(26px); }
  .bg-aurora { opacity: 0.55; }
}