/* =====================================================================
   ZXS 游戏库 · 基础层（base.css）
   重置 / 排版基线 / 氛围底 / 焦点与降级动效
   ===================================================================== */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

[hidden] { display: none !important; }

body {
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.75;                 /* 中文正文行高 ≥ 1.7 */
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;                /* 容纳倾斜跑马灯 */
}

/* —— 氛围层 1：渐变网格（左上琥珀 / 右下沉青，极低透明） —— */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 6% -8%, rgba(255, 178, 36, .09), transparent 62%),
    radial-gradient(42rem 36rem at 104% 2%, rgba(96, 124, 160, .08), transparent 58%),
    radial-gradient(60rem 44rem at 50% 112%, rgba(255, 178, 36, .045), transparent 60%);
}

/* —— 氛围层 2：胶片颗粒 —— */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* —— 排版基线 —— */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 1.15; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--ink-900); }

/* —— 焦点：全局可见描边 —— */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* —— 滚动条 —— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 5px; border: 2px solid var(--ink-900); }
* { scrollbar-width: thin; scrollbar-color: var(--ink-600) var(--ink-900); }

/* —— 工具类 —— */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); }
.wrap { width: min(var(--wrap), 100% - 2 * var(--s4)); margin-inline: auto; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 500;
  background: var(--accent); color: var(--ink-900);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  padding: 10px 16px; border-radius: var(--r-card);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* —— 入场序列：3–6 组错峰，统一 ease-out —— */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.reveal[data-d="1"] { transition-delay: 80ms; }
.reveal[data-d="2"] { transition-delay: 160ms; }
.reveal[data-d="3"] { transition-delay: 240ms; }
.reveal[data-d="4"] { transition-delay: 320ms; }
.reveal[data-d="5"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}