/* =========================================================
   ZERO PLAY · COSMIC ARCADE 设计令牌 + 共享可见区块样式
   ---------------------------------------------------------
   真源：LIGHTGAME_FACTORY/public/assets/zero-play-cosmic.css
   （经工厂构建拷入 builds/web/assets，再由 build-site.mjs step 6c 引用图收进 dist-site）

   本文件职责（严格边界，避免污染消费方）：
     1) 定义 :root 设计令牌（唯一来源 = design-system/zero-play-design-system.html）
     2) 定义 .v4seo / .v4seo-rel / #v4seo-host 共享可见区块样式
        （迁移自 tools/build-site.mjs 原 step 9c 的内联 <style>）

   不污染机制：
     - 只定义令牌与 .v4seo* / #v4seo-host 专属类；
     - 布局隔离规则用 :has(#v4seo-host) 作用域限定：只有「含可见区块的游戏页」才应用，
       首页与不含区块的页面完全不受影响（避免 html/body 通用选择器外溢）。
     - 游戏页内联样式使用自有变量名（--bg/--acc/--surface/--a1…），与本文件令牌名
       （--bg-base/--neon-cyan…）不冲突 → 游戏画面零影响。
   加载顺序：必须**先于**消费它的样式（首页内联 <style>、游戏页 zero-play-shell.css）。
   ========================================================= */

:root {
  /* ---- 背景层次 (Background Elevation) ---- */
  --bg-base: #050714;
  --bg-deep: #03040d;
  --bg-elevated: #0c1024;
  --bg-card: #11152e;
  --bg-card-2: #161b3a;
  --bg-glass: rgba(255, 255, 255, .045);
  --bg-glass-2: rgba(255, 255, 255, .07);

  /* ---- 描边 (Borders) ---- */
  --border-subtle: rgba(142, 162, 255, .12);
  --border-soft: rgba(142, 162, 255, .2);
  --border-neon: rgba(46, 230, 255, .42);

  /* ---- 霓虹强调色 (Neon Accents) ---- */
  --neon-cyan: #2ee6ff;
  --neon-magenta: #ff3ea5;
  --neon-violet: #8b5cff;
  --neon-lime: #c6ff4d;
  --neon-amber: #ffb648;

  /* ---- 语义色 (Semantic) ---- */
  --color-success: #38e8a0;
  --color-warning: #ffb648;
  --color-error: #ff5d6c;
  --color-info: #2ee6ff;

  /* ---- 文本 (Text — AA 对比度已校验) ---- */
  --text-primary: #eef1ff;
  --text-secondary: #aab2d8;
  --text-tertiary: #6f78a8;
  --text-on-neon: #050714;

  /* ---- 间距 (Spacing · 4px 基准) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- 圆角 (Radius) ---- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- 阴影 / 辉光 (Shadow & Glow) ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
  --glow-cyan: 0 0 0 1px rgba(46, 230, 255, .5), 0 8px 30px rgba(46, 230, 255, .28);
  --glow-magenta: 0 0 0 1px rgba(255, 62, 165, .5), 0 8px 30px rgba(255, 62, 165, .28);
  --glow-violet: 0 0 0 1px rgba(139, 92, 255, .5), 0 8px 30px rgba(139, 92, 255, .28);

  /* ---- 动效 (Motion) ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 130ms var(--ease);
  --t-norm: 240ms var(--ease);
  --t-slow: 420ms var(--ease);
}

/* =========================================================
   共享可见 SEO 区块样式（Pilot 富区块 / 非 Pilot 轻区块共用）
   迁移自 tools/build-site.mjs 原 step 9c 内联 <style>（逐值保留，保证 Pilot 不退化）
   ========================================================= */
.v4seo { margin: 0; padding: 64px 20px; background: linear-gradient(180deg, #0a1024, #101633); color: #eaf0ff; font-family: inherit; }
.v4seo-wrap { max-width: 1080px; margin: 0 auto; }
.v4seo-head { margin-bottom: 24px; }
.v4seo-head .eyebrow { font-size: 12px; letter-spacing: .24em; color: #8b96b8; text-transform: uppercase; }
.v4seo-head h2 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.01em; margin: 6px 0 0; }
.v4seo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.v4seo-card { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; padding: 18px; }
.v4seo-card h3 { font-size: 14px; color: #bfe9ff; margin: 0 0 10px; letter-spacing: .06em; }
.v4seo-card ol { margin: 0; padding-left: 20px; line-height: 1.65; }
.v4seo-card p { margin: 0 0 12px; color: #dfe6f7; line-height: 1.6; }
.v4seo-card.v4seo-shot img { width: 100%; height: auto; border-radius: 10px; display: block; }
.v4seo-rel { margin-top: 28px; }
.v4seo-rel h3 { font-size: 14px; color: #bfe9ff; margin: 0 0 12px; letter-spacing: .06em; }
.v4seo-rel-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.v4seo-rel-list .rel { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .04); color: #eaf0ff; text-decoration: none; transition: .18s; }
.v4seo-rel-list .rel small { color: #8b96b8; font-size: 11px; letter-spacing: .08em; }
.v4seo-rel-list .rel:hover { background: rgba(110, 231, 255, .12); border-color: rgba(110, 231, 255, .5); }
.v4seo-more { margin-top: 28px; }
.v4seo-more a { color: #bfe9ff; text-decoration: none; border-bottom: 1px solid rgba(191, 233, 255, .35); }
.v4seo-more a:hover { color: #eaf0ff; border-color: rgba(234, 240, 255, .7); }

/* 布局隔离：游戏页的 body 多为「全屏 flex 居中 + overflow:hidden」。
   追加的可见区块若作为普通 flex 子项参与布局，会把游戏容器挤小（V4 QA 实测
   reflex-rush 的 #app 从 390px 被压到 174px）。这里把区块包进一个不参与
   flex 主轴的容器，并放开页面纵向滚动 —— 游戏本身尺寸不受影响。
   ⚠️ 作用域：用 :has(#v4seo-host) 限定，仅对「含可见区块的页面」生效，首页零影响。
   ⚠️ 关键修正（V5 实测）：**不覆盖 body 的 height**。
     部分游戏（tile-stack / stack-tower）用 `#app{height:100%}` 撑满视口，
      若把 body 改成 `height:auto`，`#app` 的百分比高度失去参照 → 被压到内容高
      （实测 844px → 275px，游戏被挤小、区块挤进首屏）。改为保留 body 原高度 +
      html/body overflow:visible：内容（区块）自然溢出到下方并由文档滚动揭示，
      游戏容器保持满屏尺寸。 */
#v4seo-host { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; }

/* 主规则：根节点标记 + 直接子选择器 —— 不依赖 :has()，兼容所有浏览器（含旧版 Safari/Chromium）。
   构建期由 tools/lib/game-seo.mjs:ensureSeoRootClass() 给 <html> 加 class="zp-has-seo"。 */
html.zp-has-seo { overflow: visible !important; scroll-behavior: auto; }
html.zp-has-seo > body { flex-wrap: wrap !important; align-content: flex-start !important; overflow: visible !important; }
html.zp-has-seo > body > #app,
html.zp-has-seo > body > main,
html.zp-has-seo > body > .game-root,
html.zp-has-seo > body > canvas { margin-left: auto !important; margin-right: auto !important; }

/* 冗余保险：支持 :has() 的浏览器即使漏打标记也照样生效（两条并存，互不冲突） */
html:has(#v4seo-host) { overflow: visible !important; }
body:has(#v4seo-host) { flex-wrap: wrap !important; align-content: flex-start !important; overflow: visible !important; }

@media (max-width: 780px) {
  .v4seo-grid { grid-template-columns: 1fr; }
  .v4seo-rel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}