/* ==========================================================================
   鸿鹄棋弈 · 官网样式表
   基础层（T003）：设计令牌 / Reset / 排版基线 / 版块主题 / 响应式骨架 / 降级
   --------------------------------------------------------------------------
   渐进增强铁律（plan.md D2 决策）：
   本文件禁止出现任何"预隐藏"规则（例如对 .reveal 类预设 opacity:0）。
   所有动画初始态一律由 JS 在确认 GSAP 加载成功后经 gsap.set() 设置，
   以保证三种降级场景下内容默认完整可见：
     1) 禁用 JS        → CSS 天然呈现全部内容
     2) CDN 失败       → main.js 检测后跳过动画，仅一条 console 提示
     3) reduced-motion → CSS / JS 双侧降级，内容瞬时呈现

   后续批次填充指引：
     - Hero 样式           → T007
     - 下载区样式          → T013
     - 响应式细节/导航适配 → T015 / T017
     - 各内容版块样式      → T019 / T022 / T025 / T029 / T032
   ========================================================================== */


/* ==========================================================================
   1. 设计令牌（Design Tokens，:root 自定义属性，D6 视觉规范）
   ========================================================================== */
:root {
  /* —— 色板：苹果灰阶 + 鸿鹄金点缀 —— */
  --bg-light: #f5f5f7;                              /* 浅色版块底 */
  --bg-dark: #0a0a0c;                               /* 深色版块底 */
  --bg-black: #000;                                 /* 收尾版块底（纯黑） */
  --text-dark: #1d1d1f;                             /* 浅底正文色 */
  --text-light: #f5f5f7;                            /* 深底正文色 */
  --gold: #c9a96e;                                  /* 点缀金：强调词/饰线/按钮描边 */
  --gray: #86868b;                                  /* 中性灰：辅助文字 */

  /* —— 衍生色 —— */
  --text-dark-secondary: rgba(29, 29, 31, 0.68);     /* 浅底次级文字 */
  --text-light-secondary: rgba(245, 245, 247, 0.68); /* 深底次级文字 */
  --hairline-light: rgba(29, 29, 31, 0.1);           /* 浅底发丝分隔线 */
  --hairline-dark: rgba(245, 245, 247, 0.14);        /* 深底发丝分隔线 */
  --card-bg-light: #ffffff;                          /* 浅色卡片面 */
  --card-bg-dark: rgba(255, 255, 255, 0.05);         /* 深色卡片面 */
  --gold-soft: rgba(201, 169, 110, 0.28);            /* 金色柔光（光晕/阴影） */
  --gold-bright: #e6d2a4;                            /* 金渐变亮端（按钮描边） */
  --gold-deep: #8f7343;                              /* 金渐变深端（按钮描边） */

  /* —— 字体：系统字体栈，零 Web Font 依赖 —— */
  --font-sans: -apple-system, "SF Pro SC", "PingFang SC", "HarmonyOS Sans SC",
    "Microsoft YaHei", system-ui, sans-serif;

  /* —— 字号 / 行高（clamp 流式排版）—— */
  --size-display: clamp(2.5rem, 6vw, 5rem);                    /* 超大标题（Hero/收尾） */
  --size-h2: clamp(2rem, 4.2vw, 3.25rem);                      /* 版块大标题 */
  --size-h3: clamp(1.25rem, 2.2vw, 1.625rem);                  /* 卡片小标题 */
  --size-body: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);   /* 正文 17-19px */
  --size-small: 0.9375rem;                                     /* 辅助文字 15px */
  --line-height-body: 1.7;                                     /* 正文行高 1.6-1.75 */

  /* —— 间距 —— */
  --section-space: clamp(80px, 12vh, 160px);  /* 版块垂直留白 */
  --container-max: 1200px;                    /* 内容最大宽度 */
  --container-pad: clamp(20px, 5vw, 48px);   /* 容器两侧内边距 */
  --gap-card: clamp(16px, 3vw, 28px);        /* 卡片网格间距（内容版块复用） */

  /* —— 圆角 / 阴影 —— */
  --radius-card: 24px;                       /* 卡片圆角（20-28px 区间） */
  --radius-img: 20px;
  --radius-pill: 999px;                      /* 胶囊按钮 */
  --shadow-card: 0 4px 24px rgba(29, 29, 31, 0.06), 0 1px 4px rgba(29, 29, 31, 0.04);
  --shadow-card-hover: 0 12px 40px rgba(29, 29, 31, 0.1);
  --shadow-gold: 0 8px 28px var(--gold-soft);

  /* —— 固定导航 —— */
  --nav-height: 68px;                        /* 导航高度（64-72px 预留区间） */
  --nav-bg: rgba(245, 245, 247, 0.72);      /* 毛玻璃底（浅色语境默认，T017 做深浅自适应） */
  --nav-ink: var(--text-dark);              /* 导航文字色 */
  --nav-link: rgba(29, 29, 31, 0.78);       /* 导航链接色 */
}


/* ==========================================================================
   2. 现代 Reset 与基础排版
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;       /* 锚点平滑滚动第一道保障（禁 JS 时也生效） */
  overflow-x: clip;              /* 杜绝横向滚动条；clip 不产生滚动容器，不影响后续 pin 场景 */
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: var(--line-height-body);
  color: var(--text-dark);       /* 默认浅色基调，版块内由主题类接管 */
  background-color: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 固定导航会遮住锚点目标 → 预留偏移（导航高度 + 12px 呼吸位） */
section[id] {
  scroll-margin-top: calc(var(--nav-height) + 12px);
}

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

img {
  height: auto;                  /* 与 width/height 属性配合，等比缩放防变形 */
}

input,
button,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;       /* 收紧字距：苹果式大标题质感 */
  overflow-wrap: break-word;
}

h1,
.display-title {
  font-size: var(--size-display);
}

h2,
.section-title {
  font-size: var(--size-h2);
}

h3 {
  font-size: var(--size-h3);
}

p {
  overflow-wrap: break-word;
}

a {
  color: inherit;
}

::selection {
  background: var(--gold);
  color: var(--text-dark);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}


/* ==========================================================================
   3. 容器、版块主题体系与通用版块头
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

section {
  position: relative;            /* 供后续版块叠加装饰层（视差点缀/棋盘纹理等） */
  padding-block: var(--section-space);
}

/* 版块主题：除直接设色外，同时下发"当前墨色"变量，子元素直接引用即可随主题切换 */
.theme-light {
  background-color: var(--bg-light);
  color: var(--text-dark);
  --ink: var(--text-dark);
  --ink-secondary: var(--text-dark-secondary);
  --hairline: var(--hairline-light);
  --card-bg: var(--card-bg-light);
}

.theme-dark {
  background-color: var(--bg-dark);
  color: var(--text-light);
  --ink: var(--text-light);
  --ink-secondary: var(--text-light-secondary);
  --hairline: var(--hairline-dark);
  --card-bg: var(--card-bg-dark);
}

.theme-black {
  background-color: var(--bg-black);
  color: var(--text-light);
  --ink: var(--text-light);
  --ink-secondary: var(--text-light-secondary);
  --hairline: var(--hairline-dark);
  --card-bg: var(--card-bg-dark);
}

/* —— 版块头通用模式（后续批次按此结构填充内容）——
   结构示例：
     <div class="section-head">
       <p class="eyebrow">小标（eyebrow）</p>
       <h2 class="section-title">版块大标题</h2>
       <p class="section-desc">导语正文</p>
     </div> */
.section-head {
  max-width: 44em;               /* 中文约 40 字/行的舒适行长 */
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;        /* 拉开字距的小标，与收紧的大标题形成对照 */
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75em;
}

.section-desc {
  margin-top: 0.75em;
  color: var(--ink-secondary, var(--gray));
}

/* —— 页脚（与收尾版块同为纯黑，视觉上无缝衔接；文案装饰由 T012/T013 完善）—— */
.site-footer {
  background-color: var(--bg-black);
  color: var(--gray);
  padding-block: clamp(32px, 5vh, 48px);
  border-top: 1px solid rgba(245, 245, 247, 0.08);  /* 与收尾版块之间的发丝分隔（T013） */
}

.site-footer .footer-copy {
  font-size: var(--size-small);
  text-align: center;
}


/* ==========================================================================
   4. 固定导航（基础层：布局 + 毛玻璃；深浅自适应与汉堡交互由 T016/T017 完善）
   ========================================================================== */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* 深浅自适应变量（T017）：默认为浅色语境；JS 依当前版块主题切换
     .nav-on-light / .nav-on-dark / .nav-on-black 状态类覆盖这组变量，
     导航栏、汉堡按钮与移动端面板的配色随之联动 */
  --nav-hairline: var(--hairline-light);
  --nav-link-hover: var(--text-dark);
  --nav-panel-bg: rgba(245, 245, 247, 0.97);
  background-color: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--nav-hairline);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* 不支持 backdrop-filter 的浏览器 → 实底降级（C5 兼容基线；
   深色状态类同步给出实底等价，T017） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav {
    background-color: var(--bg-light);
  }

  .site-nav.nav-on-dark {
    background-color: var(--bg-dark);
  }

  .site-nav.nav-on-black {
    background-color: var(--bg-black);
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: var(--nav-height);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--nav-ink);
  white-space: nowrap;
}

/* "落子"金色圆点装饰母题（D6） */
.nav-brand::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--gold);
}

/* 桌面锚点导航（C2 契约：8 项与版块 id 一一对应） */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nav-link);
  white-space: nowrap;
  transition: color 0.25s ease;
}

.nav-links a:hover {
  color: var(--nav-link-hover);  /* 随导航深浅态切换（T017），默认浅色语境为深字 */
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* —— 下载按钮（金渐变描边胶囊）：导航 / Hero / 收尾共用，T007/T013 细化 —— */
.btn-download {
  --btn-surface: rgba(255, 255, 255, 0.72);   /* 内衬底色（浅色语境） */
  --btn-ink: var(--text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.55em 1.4em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(var(--btn-surface), var(--btn-surface)) padding-box,
    linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 45%, var(--gold-deep) 100%) border-box;
  color: var(--btn-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-download:hover {
  transform: translateY(-2px);   /* 悬停微升（Hero 处由 T007 细化） */
  box-shadow: var(--shadow-gold);
}

.btn-download:active {
  transform: translateY(0);
}

/* 深色 / 纯黑版块中的下载按钮变体 */
.theme-dark .btn-download,
.theme-black .btn-download {
  --btn-surface: rgba(255, 255, 255, 0.08);
  --btn-ink: var(--text-light);
}

/* —— 移动端汉堡按钮（视觉基础层；开合交互由 T016 实现）—— */
.nav-toggle {
  display: none;                 /* ≥768px 隐藏，仅手机断点显示 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--nav-ink);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}


/* ==========================================================================
   5. 响应式断点骨架（细节由 T015 及各版块任务填充）
      <768 手机单列 · 768-1279 平板过渡 · ≥1280 桌面完整布局
   ========================================================================== */

/* —— 手机（<768px）：单列布局，隐藏桌面导航、显示汉堡 —— */
@media (max-width: 767.98px) {
  :root {
    --nav-height: 60px;
    --section-space: clamp(64px, 11vh, 96px);   /* 版块垂直留白收紧（T015） */
  }

  /* 版块头下方留白同步收紧；标题字号已由 clamp 流式收敛，无需另行缩级 */
  .section-head {
    margin-bottom: clamp(2rem, 5vh, 3rem);
  }

  .nav-links {
    display: none;               /* 移动端导航面板（.nav-panel）由 T016 提供开合 */
  }

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

  .nav-brand {
    font-size: 1.0625rem;
  }

  .nav-actions .btn-download {
    padding: 0.45em 1.1em;
    font-size: 0.875rem;
  }

  /* 各内容版块的单列网格塌陷与版块内字号微调，由对应版块任务（T019/T022/
     T025/T029/T032）在各自样式分区内以同断点补充——本块只收敛全站公共基线：
     版块留白（上方 --section-space）、版块头留白、导航形态、图片等比缩放
     （全局 img max-width:100% 已覆盖）。Hero 与下载区的专属响应式规则分别
     位于第 7、9 分区末尾。 */
}

/* —— 平板（768-1279px）：双列过渡区间 —— */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .nav-links {
    gap: 16px;
  }

  .nav-links a {
    font-size: 0.8125rem;        /* 保证 8 项锚点在 768px 宽度下单行排布 */
  }

  /* 双列网格过渡：具体网格降级规则由各内容版块任务（T022/T029/T032）在本
     区间按版块补充；本区间导航保持桌面态（锚点平铺单行 + 汉堡隐藏）。 */
}

/* —— 桌面（≥1280px）：完整布局（棋类版块 pin 横向推镜由 T020 启用）—— */
@media (min-width: 1280px) {
  /* 完整布局基线已由 :root 令牌与 .container 承担（max-width 1200px、
     clamp 流式字号与留白）；本区间特有样式主要为棋类版块 pin 横向推镜
     场景（T020），此处保留占位。 */
}


/* ==========================================================================
   6. 动效降级（prefers-reduced-motion）
      - CSS 只负责滚动行为与过渡降级；
      - 滚动动画（入场 / pin / 视差）由 main.js 检测该设置后整体跳过；
      - 再次强调：本文件不预隐藏任何内容，降级即"完整静态呈现"。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;       /* 关闭平滑滚动 */
  }

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


/* ==========================================================================
   7. Hero 开屏版块（T007，对应 index.html #hero 结构）
      浅色主题 · 垂直水平居中 · 金色克制点缀 · 纯 CSS 背景装饰
      渐进增强铁律：本分区不预设任何入场初始态（opacity/位移一律由
      main.js T008 在确认 GSAP 可用且非 reduced-motion 后经 gsap 设置）。
   ========================================================================== */
#hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;                            /* 旧浏览器回退 */
  min-height: 100svh;                           /* 小视口单位：移动端地址栏不遮内容 */
  padding-top: calc(var(--nav-height) + 32px);  /* 留出固定导航 + 呼吸位 */
  padding-bottom: clamp(88px, 14vh, 120px);     /* 留出滚动提示区 */
  overflow: hidden;                             /* 裁切背景装饰，防溢出 */
}

/* —— 背景装饰 1：极淡棋盘网格（径向蒙版向边缘消隐，不喧宾夺主）—— */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(29, 29, 31, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 29, 31, 0.04) 1px, transparent 1px);
  background-size: clamp(44px, 6vw, 64px) clamp(44px, 6vw, 64px);
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 62% 55% at 50% 44%, #000 30%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 55% at 50% 44%, #000 30%, transparent 72%);
}

/* —— 背景装饰 2：顶部金色径向光晕（呼应鸿鹄金，极低强度）—— */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 38% at 50% 30%, rgba(201, 169, 110, 0.12), transparent 70%);
}

/* —— 内容栈：置于装饰层之上 —— */
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* —— App 图标：展示 112-136px + 圆角 + 多层柔和阴影（含金色环境光）—— */
.hero-icon {
  width: clamp(112px, 15vw, 136px);
  height: auto;
  border-radius: 28px;
  box-shadow:
    0 20px 48px rgba(29, 29, 31, 0.16),
    0 6px 16px rgba(29, 29, 31, 0.08),
    0 24px 64px rgba(201, 169, 110, 0.2);
  margin-bottom: clamp(22px, 3.5vh, 30px);
}

.hero-eyebrow {
  margin-bottom: clamp(12px, 2vh, 18px);
}

/* —— 大标题：复用基础层 h1 的 clamp 字号（--size-display），超大字下再收紧字距 —— */
.hero-title {
  letter-spacing: -0.03em;
}

.hero-slogan {
  margin-top: clamp(16px, 2.5vh, 22px);
  max-width: 24em;
  font-size: clamp(1.1875rem, 1rem + 1vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.hero-summary {
  margin-top: clamp(12px, 2vh, 16px);
  max-width: 34em;                 /* 摘要控制在 2-3 行 */
  font-size: var(--size-body);
  color: var(--ink-secondary, var(--gray));
}

/* —— Hero 下载按钮：在 .btn-download 基础上放大为第一行动号召 —— */
.btn-hero {
  margin-top: clamp(28px, 4.5vh, 40px);
  padding: 0.85em 2.3em;
  font-size: 1.0625rem;
  box-shadow: 0 6px 20px rgba(201, 169, 110, 0.2);
}

.btn-hero:hover {
  transform: translateY(-3px);     /* 覆盖基础层 -2px：首屏主按钮悬停微升更明显一档 */
  box-shadow:
    0 12px 36px var(--gold-soft),
    0 4px 16px rgba(29, 29, 31, 0.1);
}

/* —— 向下滚动提示：细轨道 + 金色滑落光点（仅 transform/opacity 微动画）—— */
.hero-scroll-hint {
  position: absolute;
  bottom: clamp(24px, 5vh, 40px);
  left: 0;
  right: 0;
  margin-inline: auto;             /* 配合定宽，实现免 transform 居中 */
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--gray);
  z-index: 1;
}

.hero-scroll-hint .scroll-text {
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;             /* 抵消末字符 letter-spacing，保证光学居中 */
}

.hero-scroll-hint .scroll-track {
  position: relative;
  width: 1px;
  height: 44px;
  background: var(--hairline, var(--hairline-light));
  overflow: hidden;
}

.hero-scroll-hint .scroll-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 12px;
  background: var(--gold);
  animation: hero-scroll-drop 2.6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

@keyframes hero-scroll-drop {
  0%   { transform: translateY(-14px); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

/* —— 金色落子点缀（.deco-stone）——
   通用装饰约定（T011 视差目标，供后续版块交界处直接复用）：
   本体只承担定位与 GSAP 视差 transform；呼吸感放在 ::after 伪元素上，
   避免 CSS keyframes 与 GSAP 内联 transform 相互覆盖。 */
.deco-stone {
  position: absolute;
  top: 22%;
  left: 15%;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.deco-stone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow: 0 0 22px rgba(201, 169, 110, 0.5);
  animation: deco-stone-breathe 6s ease-in-out infinite;
}

/* Hero 内的落子：落在右下棋盘网格上，避开正文 */
#hero .deco-stone {
  top: auto;
  left: auto;
  right: 18%;
  bottom: 27%;
}

@keyframes deco-stone-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.18); opacity: 0.95; }
}

/* —— Hero 响应式（<768px）：图标缩小、摘要行宽收窄 —— */
@media (max-width: 767.98px) {
  #hero {
    padding-top: calc(var(--nav-height) + 20px);
    padding-bottom: clamp(72px, 12vh, 88px);
  }

  .hero-icon {
    width: 108px;
    border-radius: 24px;
  }

  .hero-slogan {
    max-width: 19em;
  }

  .hero-summary {
    max-width: 30em;
  }

  .hero-scroll-hint {
    bottom: 20px;
  }

  #hero .deco-stone {
    right: 13%;
    bottom: 20%;
  }
}


/* ==========================================================================
   8. 装饰动画的显式关闭（T010 ③ · prefers-reduced-motion）
      上方第 6 分区的全局 reduce 块已把所有 animation/transition 压到 0.01ms，
      此处再对本文件新增的装饰性 keyframes 逐一声明 animation: none，
      确保减少动态效果时滚动光点与呼吸落子完全静止。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint .scroll-dot,
  .deco-stone::after {
    animation: none;
  }
}


/* ==========================================================================
   9. 通用装饰元素基线与下载收尾版块（T012/T013，#download · theme-black）
   --------------------------------------------------------------------------
   #download 刻意不使用 .section-head 通用版块头：CTA 大标题由 T014 专属
   编排（字距收拢入场），若套用 .section-head 会与 T011 版块头显现系统
   形成双重动画，故采用自有类名（.download-title 等）+ data-animate 钩子组合。
   渐进增强铁律依旧：本分区不预设任何隐藏态。
   ========================================================================== */

/* —— .deco-line 金色素线基线（配合 main.js T011 视差约定）——
   外观在此统一定义，定位由各版块按需覆盖；本体 transform 归 GSAP scrub，
   CSS 不在本体上叠加动画（呼吸类效果放伪元素，避免相互覆盖）。 */
.deco-line {
  position: absolute;
  width: 1px;
  height: clamp(90px, 16vh, 150px);
  background: linear-gradient(to bottom,
    transparent, var(--gold) 32%, var(--gold) 68%, transparent);
  opacity: 0.5;
  pointer-events: none;
}

/* —— 版块本体：全屏纯黑沉浸收尾，内容垂直水平居中 —— */
#download {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;                            /* 旧浏览器回退 */
  min-height: 100svh;                           /* 小视口单位：移动端地址栏不遮内容 */
  overflow: hidden;                             /* 裁切装饰与光晕，防溢出 */
  text-align: center;
}

/* 极低强度金色径向光晕：纯黑底上的深度暗示，不破坏"纯黑"基调 */
#download::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 40% at 50% 34%,
    rgba(201, 169, 110, 0.07), transparent 70%);
  pointer-events: none;
}

.download-inner {
  position: relative;
  z-index: 1;                                   /* 置于光晕装饰层之上 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* —— 小尺寸 App 图标：约 60-72px 展示 + 圆角 + 黑底阴影与金色环境光 —— */
.download-icon {
  width: clamp(60px, 8vw, 72px);
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 16px 48px rgba(201, 169, 110, 0.16);
  margin-bottom: clamp(20px, 3.5vh, 28px);
}

.download-eyebrow {
  margin-bottom: clamp(10px, 2vh, 16px);
}

/* —— CTA 大标题：比常规 --size-h2 更大一档的收尾排版，字距收紧 ——
   常态字距 -0.02em；入场时由 T014 自 0.08em 一次性收拢至此 */
.download-title {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* —— 副句：金色承接，字号介于大标题与正文之间 —— */
.download-sub {
  margin-top: clamp(14px, 2.5vh, 22px);
  font-size: clamp(1.375rem, 3vw, 2.125rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
}

/* —— 意境文案：灰阶弱化 + 略宽字距（0.05em）营造留白意境 —— */
.download-mood {
  margin-top: clamp(24px, 4.5vh, 36px);
  max-width: 30em;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--gray);
}

/* 金色分隔饰线：CTA 与意境文案之间的仪式感过渡 */
.download-mood::before {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto clamp(16px, 3vh, 24px);
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.7;
}

/* —— 收尾下载按钮辉光：常态金色柔光描边，悬停脉冲增强
   （transition 仅 transform/box-shadow；入场后的一次性 scale 脉冲由 T014 JS 执行，
    不做 CSS 无限呼吸，避免持续的 box-shadow 重绘开销）—— */
#download .btn-hero {
  margin-top: clamp(32px, 5.5vh, 48px);
  padding: 0.9em 2.5em;
  box-shadow:
    0 0 0 1px rgba(201, 169, 110, 0.3),
    0 10px 34px rgba(201, 169, 110, 0.22);
}

#download .btn-hero:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(201, 169, 110, 0.55),
    0 16px 48px rgba(201, 169, 110, 0.4);
}

/* —— 版块内金色装饰定位（低频克制，避开正文中轴）—— */
#download .deco-stone {
  top: 18%;
  left: 14%;
}

#download .deco-line {
  top: 16%;
  right: 14%;
}

/* —— 下载区响应式（<768px）：标题缩级、间距收紧 —— */
@media (max-width: 767.98px) {
  .download-icon {
    width: 60px;
    border-radius: 16px;
  }

  .download-title {
    font-size: clamp(2.2rem, 9vw, 2.75rem);
  }

  .download-sub {
    font-size: clamp(1.1875rem, 2.6vw, 1.375rem);
  }

  .download-mood {
    margin-top: clamp(20px, 4vh, 28px);
  }

  #download .btn-hero {
    margin-top: clamp(26px, 5vh, 36px);
  }

  #download .deco-stone {
    top: 12%;
    left: 9%;
  }

  #download .deco-line {
    top: 10%;
    right: 9%;
    height: 84px;
  }
}


/* ==========================================================================
   10. 移动端导航面板与开合态（T016）
   --------------------------------------------------------------------------
   面板为导航栏下方全宽下拉（最高占满剩余视口，可内部滚动），仅 <768px 呈现；
   开合状态类 .nav-open 由 main.js 挂在 <html> 上：
     html.nav-open       → 面板展开 + 视口滚动锁定（overflow:hidden 保留
                           当前滚动位置，关闭即恢复）
     .nav-toggle 三线    → 变形为关闭叉
   配色经由 --nav-ink / --nav-link / --nav-panel-bg / --nav-hairline 自动
   跟随 T017 导航深浅自适应状态（面板是 .site-nav 子元素，变量向下继承）。
   ========================================================================== */
.nav-panel {
  position: absolute;               /* .site-nav 带 backdrop-filter，充当包含块 */
  top: 100%;                        /* 紧贴导航栏下缘 */
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--nav-height));    /* 旧浏览器回退 */
  max-height: calc(100dvh - var(--nav-height));   /* 动态视口：地址栏收展不裁切 */
  overflow-y: auto;                 /* 横屏矮视口下允许面板内部滚动 */
  overscroll-behavior: contain;     /* 面板内滚动不穿透到底下页面 */
  padding: clamp(20px, 4vh, 36px) var(--container-pad) clamp(32px, 6vh, 56px);
  background-color: var(--nav-panel-bg);          /* 近实底玻璃，随导航深浅态切换 */
  border-bottom: 1px solid var(--nav-hairline);
  visibility: hidden;               /* 收起时移出无障碍树，Tab 不可聚焦 */
  opacity: 0;
  transform: translateY(-10px);
  /* 收起时 visibility 延迟 0.3s 切换，等淡出完成；展开时立即恢复可见 */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

html.nav-open .nav-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

/* 展开时锁定视口滚动（html 保留当前滚动位置，收起即恢复；
   基础规则 html { overflow-x: clip } 在锁定期间被本规则短暂覆盖） */
html.nav-open {
  overflow: hidden;
}

.nav-panel-links {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-panel-links a {
  display: block;
  padding: clamp(14px, 2.2vh, 18px) 4px;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nav-link);
  text-decoration: none;
  border-bottom: 1px solid var(--nav-hairline);
  transition: color 0.25s ease;
}

.nav-panel-links li:last-child a {
  border-bottom: 0;
}

.nav-panel-links a:hover {
  color: var(--nav-ink);
}

/* 面板内下载引导：滚动至页尾 CTA（复用 .btn-download 视觉，浅深态变量接管配色） */
.nav-panel-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 4vh, 32px);
  padding: 0.85em 2em;
  font-size: 1.0625rem;
}

/* 汉堡按钮 → 关闭叉（位移量 = 线高 2px + 行距 5px） */
html.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

html.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

html.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ≥768px：面板彻底移除（桌面锚点导航直接可见，防意外展开残留） */
@media (min-width: 768px) {
  .nav-panel {
    display: none;
  }
}


/* ==========================================================================
   11. 导航深浅自适应三态（T017）
   --------------------------------------------------------------------------
   main.js（原生 IntersectionObserver，不依赖 GSAP）监测"视口顶部窄带"
   当前命中的版块主题，为 .site-nav 切换状态类：
     默认 / .nav-on-light → 白玻璃 + 深字（禁 JS 或 JS 未就绪时的兜底形态，
                            即中性配色降级——无任何状态类时即为此形态）
     .nav-on-dark         → 黑玻璃 + 浅字（深色版块 #0a0a0c 上保证对比度）
     .nav-on-black        → 更低不透明度的黑玻璃（收尾纯黑版块的沉浸收束）
   变量组在状态类上重定义：导航链接 hover 色、发丝线、移动端面板底色
   （面板/汉堡为 .site-nav 子元素，自动继承联动）；backdrop-filter 的
   实底降级见第 4 分区 @supports 块。
   ========================================================================== */
.site-nav.nav-on-light {
  background-color: rgba(245, 245, 247, 0.72);  /* 显式浅色态：与默认一致 */
}

.site-nav.nav-on-dark {
  background-color: rgba(10, 10, 12, 0.66);
  --nav-ink: var(--text-light);
  --nav-link: rgba(245, 245, 247, 0.72);
  --nav-link-hover: var(--text-light);
  --nav-hairline: var(--hairline-dark);
  --nav-panel-bg: rgba(10, 10, 12, 0.97);
}

.site-nav.nav-on-black {
  background-color: rgba(0, 0, 0, 0.45);        /* 收尾沉浸：玻璃透明度更低 */
  --nav-ink: var(--text-light);
  --nav-link: rgba(245, 245, 247, 0.72);
  --nav-link-hover: var(--text-light);
  --nav-hairline: rgba(245, 245, 247, 0.1);
  --nav-panel-bg: rgba(0, 0, 0, 0.97);
}


/* ==========================================================================
   12. 六大棋类版块（T019，#chess-types · theme-light）
   --------------------------------------------------------------------------
   布局总纲（与 main.js T020 动画约定配套）：
     - 默认（所有视口）：.chess-track 纵向堆叠、卡片居中可读——禁 JS /
       CDN 失败 / reduced-motion 三条降级路径均天然安全；
     - ≥1280px 且 main.js T020 在"GSAP 可用 + 非 reduced-motion"双闸门内
       为版块加 .is-horizontal 后：本媒询内的横排版式（100svh flex 纵向
       承载：版块头在上、轨道在中下）+ .chess-track flex 横排 nowrap 生效，
       供 pin + scrub 横向推镜平移；状态类不存在时媒询内规则全部不生效，
       版块回到默认纵向可读形态。
   渐进增强铁律依旧：本分区不预设任何隐藏态。
   ========================================================================== */

/* —— 轨道视口：纵向模式下自身即为内容容器（等价 .container 的约束）—— */
.chess-viewport {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* —— 卡片轨道：默认纵排（降级可读的基石），横排仅由下方 ≥1280 媒询提供 —— */
.chess-track {
  display: flex;
  flex-direction: column;
  gap: var(--gap-card);
}

/* —— 棋类卡片：白面 + 大圆角 + 克制层次阴影 + 发丝描边 —— */
.chess-card {
  position: relative;
  overflow: hidden;                     /* 裁切棋纹装饰，圆角不露角 */
  width: 100%;
  max-width: 44rem;                     /* 纵向模式下的舒适行长 */
  margin-inline: auto;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
  background-color: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* —— 金色序号：衬线 + 大号细体，六卡统一的视觉锚点 —— */
.chess-index {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: clamp(14px, 2vh, 20px);
}

.chess-name {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ink);
  margin-bottom: 0.55em;
}

.chess-copy {
  color: var(--ink-secondary);
}

/* —— 每卡棋纹点缀（纯 CSS；填充透明度 0.04-0.08 的墨色/金色，克制不喧宾；
      1px 细线描边最高放宽至 0.16 以保可辨识，仍远低于正文层级）—— */
.chess-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 围棋 · 淡网格（棋盘经纬） */
.chess-card--go::before {
  background-image:
    linear-gradient(rgba(29, 29, 31, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 29, 31, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* 五子棋 · 淡点阵（星位落子） */
.chess-card--gomoku::before {
  background-image: radial-gradient(rgba(29, 29, 31, 0.07) 1.3px, transparent 1.5px);
  background-size: 26px 26px;
}

/* 国际象棋 · 淡格纹（黑白棋格，repeating-conic 旧浏览器缺失时自然无纹理） */
.chess-card--chess::before {
  background-image: repeating-conic-gradient(rgba(29, 29, 31, 0.045) 0% 25%, transparent 0% 50%);
  background-size: 44px 44px;
}

/* 将棋 · 淡竖线纹理（将棋盤目盛） */
.chess-card--shogi::before {
  background-image: repeating-linear-gradient(to right,
    transparent 0 30px, rgba(29, 29, 31, 0.05) 30px 31px);
}

/* 中国象棋 · 「楚河汉界」式中缝双线（卡面中央的留白河界） */
.chess-card--xiangqi::before {
  background-image: linear-gradient(to right,
    transparent calc(50% - 72px),
    rgba(29, 29, 31, 0.08) calc(50% - 72px),
    rgba(29, 29, 31, 0.08) calc(50% - 64px),
    transparent calc(50% - 64px),
    transparent calc(50% + 64px),
    rgba(29, 29, 31, 0.08) calc(50% + 64px),
    rgba(29, 29, 31, 0.08) calc(50% + 72px),
    transparent calc(50% + 72px));
  background-size: 100% 1px;
  background-position: 0 50%;
  background-repeat: no-repeat;
}

/* 中国象棋 · 印章感点缀（右上角金色小方章） */
.chess-card--xiangqi::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201, 169, 110, 0.16);
  border-radius: 6px;
  background-color: rgba(201, 169, 110, 0.05);
  pointer-events: none;
}

/* 技能五子棋 · 双卡牌圆角矩形点缀（右下角错落"手牌"，呼应 16 张创意卡牌） */
.chess-card--skill::before {
  inset: auto -18px -26px auto;         /* 覆盖基线 inset:0，改为定尺寸定位 */
  width: 96px;
  height: 132px;
  border: 1px solid rgba(201, 169, 110, 0.16);
  border-radius: 14px;
  background-color: rgba(201, 169, 110, 0.05);
  transform: rotate(-8deg);
}

.chess-card--skill::after {
  content: "";
  position: absolute;
  right: 46px;
  bottom: -12px;
  width: 96px;
  height: 132px;
  border: 1px solid rgba(29, 29, 31, 0.08);
  border-radius: 14px;
  transform: rotate(9deg);
  pointer-events: none;
}


/* —— 桌面（≥1280px）· pin 横向推镜版式 ——
      仅 #chess-types.is-horizontal 状态下生效（状态类由 main.js T020 在
      GSAP + 非 reduced-motion 双闸门内添加，断点退出自动移除）。
      版块整体 100svh 纵向承载：版块头在上（pin 期间仍在视口内），
      轨道在中下横向平移，pin 距离 = 横移总长，末尾自然松开。
      垂直居中采用 auto margin（而非 justify-content:center）：空间充裕时
      两端均分居中，矮视口内容溢出时 auto 归零、顶部对齐——版块头永不被裁。 */
@media (min-width: 1280px) {
  #chess-types.is-horizontal {
    display: flex;
    flex-direction: column;
    height: 100vh;                       /* 旧浏览器回退 */
    height: 100svh;                      /* 小视口单位 */
    padding-block: 0;
    padding-top: var(--nav-height);      /* 固定导航让位，pin 期间版块头不被遮 */
    overflow: clip;                      /* 裁切横向推镜溢出（clip 不产生滚动容器，不影响 pin） */
  }

  #chess-types.is-horizontal > .container {
    margin-top: auto;                    /* auto margin 居中技巧（见上注） */
  }

  #chess-types.is-horizontal .section-head {
    margin-bottom: clamp(2rem, 6vh, 3.5rem);
  }

  #chess-types.is-horizontal .chess-viewport {
    max-width: none;                     /* 轨道全出血，横向溢出由版块裁切 */
    margin-inline: 0;
    padding-inline: 0;
    margin-bottom: auto;                 /* auto margin 居中技巧（见上注） */
  }

  #chess-types.is-horizontal .chess-track {
    flex-direction: row;                 /* 横排推镜（与默认纵排对照，仅在媒询内提供） */
    flex-wrap: nowrap;
    align-items: stretch;                /* 六卡等高不换行，供 pin 平移 */
    gap: clamp(32px, 2.4vw, 40px);
    width: max-content;                  /* 按内容横向延展：scrollWidth 即推镜总长 */
    /* 首卡左缘与 .container 内容左缘对齐；末端对称收边（推镜终点末卡齐右） */
    padding-inline: max(var(--container-pad),
      calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  }

  #chess-types.is-horizontal .chess-card {
    flex: 0 0 auto;
    width: min(560px, 88vw);
    max-width: none;
    margin-inline: 0;
  }
}


/* ==========================================================================
   13. 联机能力与四种模式版块（T022，#connectivity 深色 / #modes 浅色）
   --------------------------------------------------------------------------
   #connectivity：四项能力网格（移动 1 列 / 平板 2 列 / 桌面 4 列）+
     金色互联连线装饰母题（贯穿图标行心，图标实底打断为"节点"感）；
   #modes：2×2 卡片网格（<768 单列），白底圆角阴影，悬停微升（transform-only）。
   两版块的卡片渐入均由 data-animate 钩子 + T009 通用系统承担；
   连线生长由 main.js T023 在动画闸门内编排（本分区不预设隐藏态）。
   ========================================================================== */

/* —— 联机版块：四项能力网格 —— */
.connect-grid {
  position: relative;                    /* 互联连线（.connect-line）的定位基准 */
  display: grid;
  grid-template-columns: 1fr;            /* 移动 1 列 */
  gap: clamp(32px, 5vh, 48px) var(--gap-card);
  max-width: 1040px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .connect-grid {
    grid-template-columns: repeat(2, 1fr);   /* 平板 2 列 */
  }
}

@media (min-width: 1280px) {
  .connect-grid {
    grid-template-columns: repeat(4, 1fr);   /* 桌面 4 列（单行，连线母题成立） */
  }
}

.connect-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 图标节点：金色描边圆环 + 实底（≥1280 时打断贯穿连线，形成"串珠节点"感） */
.connect-icon {
  position: relative;
  z-index: 1;                            /* 置于 .connect-line 之上 */
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(201, 169, 110, 0.38);
  border-radius: 50%;
  background-color: var(--bg-dark);
  color: var(--gold);                    /* SVG 描边随 currentColor 取金 */
}

.connect-icon svg {
  width: 26px;
  height: 26px;
}

.connect-name {
  margin-top: 18px;
  font-size: 1.1875rem;
  color: var(--ink);
}

.connect-desc {
  margin-top: 8px;
  max-width: 16em;
  font-size: var(--size-small);
  line-height: 1.65;
  color: var(--ink-secondary);
}

/* —— 互联连线装饰母题：贯穿图标行心的金色细线 ——
   仅桌面 4 列单行时呈现（更窄视口下连线方向与网格流向不符，隐藏为宜）；
   两端渐隐；生长动画 scaleX 0→1 由 T023 在动画闸门内编排，禁 JS /
   CDN 失败 / reduced-motion 时静态完整可见（不预隐藏）。 */
.connect-line {
  display: none;
  position: absolute;
  top: 28px;                             /* 与 .connect-icon 圆心对齐（56px 的一半） */
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(201, 169, 110, 0.55) 16%, rgba(201, 169, 110, 0.55) 84%, transparent);
  pointer-events: none;
}

@media (min-width: 1280px) {
  .connect-line {
    display: block;
  }
}

/* —— 模式版块：2×2 卡片网格 —— */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr;            /* <768 单列 */
  gap: var(--gap-card);
}

@media (min-width: 768px) {
  .mode-grid {
    grid-template-columns: repeat(2, 1fr);   /* ≥768 起 2×2 */
  }
}

.mode-card {
  padding: clamp(28px, 4vw, 44px);
  background-color: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s ease, box-shadow 0.35s ease;   /* transform-only 微升 */
}

.mode-card:hover {
  transform: translateY(-4px);           /* 悬停微升（渐入结束 clearProps 后交还 CSS） */
  box-shadow: var(--shadow-card-hover);
}

/* 图标底衬：淡金圆角方块（浅色卡面上的柔和点缀） */
.mode-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background-color: rgba(201, 169, 110, 0.1);
  color: var(--gold);
}

.mode-icon svg {
  width: 26px;
  height: 26px;
}

.mode-name {
  margin-top: 20px;
  font-size: var(--size-h3);
  color: var(--ink);
}

.mode-desc {
  margin-top: 10px;
  color: var(--ink-secondary);
}


/* ==========================================================================
   14. 残局题库版块（T025，#puzzles · theme-dark）
   --------------------------------------------------------------------------
   布局：版块头之下文案列（六项练习网格 + 解答说明行）与截图列左右分栏
   （<768 塌陷上下；DOM 顺序文案在前、截图在后，移动端叙事顺序不变）。
   截图为自带手机机框的原始截图：不加任何边框/阴影，仅以 max-height 约束
   等比缩放；.shot-img 的 aspect-ratio 与 width/height 属性一致，懒加载
   占位同形，零布局抖动。
   渐进增强铁律依旧：本分区不预设任何隐藏态。
   ========================================================================== */

/* —— 通用截图展示规则（T025/T029 各截图版块共用）—— */
.shot-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;                     /* 旧浏览器回退（72-80vh 约束区间） */
  max-height: min(78vh, 760px);         /* 等比缩放不裁切，双声明兜底 min() 缺失 */
  margin-inline: auto;
  aspect-ratio: 1434 / 2955;            /* 与 width/height 属性一致：懒加载占位同形，防 CLS */
}

/* —— 文案列 + 截图列分栏（列内垂直居中对齐）—— */
.puzzle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}

.puzzle-shot {
  display: flex;
  justify-content: center;              /* 截图列内水平居中（视差 scrub 由 T026 注册在本体上） */
}

/* —— 六项练习网格：默认单列，≥768 起 2×3（见下方媒询）—— */
.practice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-card);
}

.practice-item {
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 28px);
  background-color: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  transition: transform 0.35s ease, border-color 0.35s ease;   /* transform-only 微升 */
}

.practice-item:hover {
  transform: translateY(-3px);          /* 入场 clearProps 后交还 CSS 的悬停微升 */
  border-color: rgba(201, 169, 110, 0.32);
}

/* —— 金色序号：衬线细体，与棋类版块 .chess-index 同语言、小一号 —— */
.practice-index {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.625rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: clamp(10px, 1.6vh, 14px);
}

.practice-name {
  font-size: 1.1875rem;
  color: var(--ink);
  margin-bottom: 0.4em;
}

.practice-desc {
  font-size: var(--size-small);
  line-height: 1.65;
  color: var(--ink-secondary);
}

/* —— 解答与复盘说明行：发丝线之上弱化呈现 —— */
.puzzle-note {
  margin-top: clamp(26px, 4.5vh, 38px);
  padding-top: clamp(18px, 3vh, 24px);
  border-top: 1px solid var(--hairline);
  max-width: 44em;
  color: var(--ink-secondary);
}

@media (min-width: 768px) {
  .practice-grid {
    grid-template-columns: repeat(2, 1fr);   /* 平板起 2×3 网格 */
  }
}

@media (max-width: 767.98px) {
  .puzzle-layout {
    grid-template-columns: 1fr;              /* 移动上下堆叠（文案先、截图后） */
    gap: clamp(40px, 7vh, 56px);
  }

  .puzzle-shot .shot-img {
    max-height: min(72vh, 640px);            /* 移动端略收紧，避免单图占满两屏 */
  }
}


/* ==========================================================================
   15. 新版本亮点 / 成长体系 / 趣味体验三版块（T029）
   --------------------------------------------------------------------------
   #highlights（深色）：三张亮点卡与首页截图左右分栏（<768 上下塌陷），
     卡片为深色玻璃面（半透白 + 发丝描边）+ 金色描边圆环图标；
   #growth（浅色）：文案列（数据统计 2×2 + 对局回放深色子面板）与双截图列
     分栏（<768 单列塌陷）；对局回放面板复用 .theme-dark 主题类取深底浅墨；
     胜率曲线为面板内文档流装饰，不与文字重叠、无需提升 z-index；
     双截图第二张桌面端下错半格形成错落，对向视差由 T030 叠加（transform-only）；
   #fun（深色）：三卡横排（<768 纵排），图标金色描边圆环，与联机版块同语言。
   渐进增强铁律依旧：本分区不预设任何隐藏态。
   ========================================================================== */

/* —— #highlights：亮点卡列 + 首页截图列 —— */
.highlight-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}

.highlight-grid {
  display: grid;
  gap: var(--gap-card);
}

/* 亮点卡：玻璃面 + 描边；圆环图标与文字横排的紧凑列表卡 */
.highlight-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2vw, 22px);
  align-items: center;
  padding: clamp(22px, 3vw, 30px);
  background-color: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.highlight-card:hover {
  transform: translateY(-3px);           /* 入场 clearProps 后交还 CSS 的悬停微升 */
  border-color: rgba(201, 169, 110, 0.32);
}

.highlight-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(201, 169, 110, 0.38);
  border-radius: 50%;
  background-color: var(--bg-dark);
  color: var(--gold);                    /* SVG 描边随 currentColor 取金 */
}

.highlight-icon svg {
  width: 24px;
  height: 24px;
}

.highlight-name {
  font-size: 1.1875rem;
  color: var(--ink);
  margin-bottom: 0.35em;
}

.highlight-desc {
  font-size: var(--size-small);
  line-height: 1.65;
  color: var(--ink-secondary);
}

.highlight-shot {
  display: flex;
  justify-content: center;
}

/* —— #growth：文案列 + 双截图列 —— */
.growth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
}

.growth-group-title {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  color: var(--ink);
  margin-bottom: clamp(18px, 3vh, 26px);
}

/* 数据统计：默认单列，≥768 起 2×2（见下方媒询） */
.growth-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-card);
}

.stat-item {
  padding: clamp(20px, 3vw, 28px);
  background-color: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.stat-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.0625rem;
  color: var(--ink);
  margin-bottom: 0.45em;
}

/* 金色落子小点：统计项视觉锚点（呼应全站"落子"母题） */
.stat-name::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(201, 169, 110, 0.45);
}

.stat-desc {
  font-size: var(--size-small);
  line-height: 1.65;
  color: var(--ink-secondary);
}

/* 对局回放深色子面板：.theme-dark 主题类提供深底与浅墨变量（--ink/--hairline 等） */
.growth-panel {
  margin-top: clamp(28px, 5vh, 44px);
  padding: clamp(26px, 4vw, 42px);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 48px rgba(29, 29, 31, 0.14);
}

.growth-panel-title {
  margin-bottom: clamp(14px, 2.2vh, 20px);
}

/* 回放三项：发丝线分隔的紧凑列表（面板深底上 --hairline/--ink 随主题类联动） */
.growth-replay {
  display: grid;
}

.replay-item {
  padding-block: clamp(14px, 2.2vh, 18px);
  border-bottom: 1px solid var(--hairline);
}

.replay-item:last-child {
  border-bottom: 0;
}

.replay-name {
  font-size: 1.0625rem;
  color: var(--ink);
  margin-bottom: 0.35em;
}

.replay-desc {
  font-size: var(--size-small);
  line-height: 1.65;
  color: var(--ink-secondary);
}

/* 胜率评估曲线装饰：面板底部文档流内呈现，不与文字重叠；
   描边生长由 T030 以 stroke-dasharray/dashoffset 编排（不预隐藏） */
.winrate-graph {
  margin-top: clamp(20px, 3.5vh, 30px);
}

.winrate-curve {
  display: block;
  width: 100%;
  height: auto;
}

.winrate-grid {
  stroke: rgba(245, 245, 247, 0.08);
  stroke-width: 1;
}

.winrate-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.winrate-dot {
  fill: var(--gold-bright);
}

/* 双截图列：两图并排；第二张桌面端下错半格形成错落（见下方媒询），
   对向视差由 T030 注册在外层 .growth-shot 本体上（transform-only） */
.growth-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}

.growth-shot {
  display: flex;
  justify-content: center;
}

/* —— #fun：三卡横排 —— */
.fun-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-card);
  max-width: 1040px;
  margin-inline: auto;
}

.fun-card {
  padding: clamp(28px, 4vw, 40px);
  background-color: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  text-align: center;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.fun-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 110, 0.32);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35);
}

.fun-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  border: 1px solid rgba(201, 169, 110, 0.38);
  border-radius: 50%;
  background-color: var(--bg-dark);
  color: var(--gold);                    /* 图标金色描边 */
}

.fun-icon svg {
  width: 26px;
  height: 26px;
}

.fun-name {
  margin-top: 18px;
  font-size: 1.1875rem;
  color: var(--ink);
}

.fun-desc {
  margin-top: 8px;
  font-size: var(--size-small);
  line-height: 1.65;
  color: var(--ink-secondary);
}

/* —— 三版块响应式 —— */
@media (min-width: 768px) {
  .growth-stats {
    grid-template-columns: repeat(2, 1fr);   /* 数据统计 2×2 */
  }

  .fun-grid {
    grid-template-columns: repeat(3, 1fr);   /* 趣味三卡横排 */
  }

  .growth-shot--keymove {
    margin-top: clamp(48px, 9vh, 96px);      /* 第二张截图下错半格（桌面错落构图） */
  }
}

@media (max-width: 767.98px) {
  .highlight-layout,
  .growth-layout {
    grid-template-columns: 1fr;              /* 移动上下堆叠（文案先、截图后） */
    gap: clamp(40px, 7vh, 56px);
  }

  .highlight-shot .shot-img,
  .growth-shot .shot-img {
    max-height: min(72vh, 640px);            /* 移动端略收紧 */
  }
}


/* ==========================================================================
   16. 技术特点版块（T032，#tech · theme-light）
   --------------------------------------------------------------------------
   布局总纲（与 main.js T033 动画约定配套）：
     - 文案居中在上：版块头（.section-head 通用结构，T011 自动显现）+
       两项技术特点卡（.tech-grid，≥768 双列、<768 单列）；
     - 截图横排画廊位在下：.tech-gallery 为全出血轨道，总宽约 120vw
       （110-130vw 区间取中），两张截图复用 .shot-img 通用规则并排展示；
       轨道以负左 margin 让静止态（禁 JS / CDN 失败 / reduced-motion 三条
       降级路径）图像组恰好居中正对视口；≥768px 由 main.js T033 注册滚动
       scrub 横移（transform-only、不 pin 的轻量画廊手法），超宽部分随滚动
       平移进入视口——html overflow-x:clip 已杜绝横向滚动条；
     - <768px：轨道回收为容器宽，两图纵向堆叠。
   渐进增强铁律依旧：本分区不预设任何隐藏态。
   ========================================================================== */

/* —— 两项技术特点卡：白面圆角卡 + 金环图标，与全站卡片语言一致 —— */
.tech-grid {
  display: grid;
  grid-template-columns: 1fr;            /* <768 单列 */
  gap: var(--gap-card);
  max-width: 880px;
  margin-inline: auto;
}

.tech-card {
  padding: clamp(28px, 4vw, 40px);
  background-color: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;   /* transform-only 微升 */
}

.tech-card:hover {
  transform: translateY(-3px);           /* 入场 clearProps 后交还 CSS 的悬停微升 */
  box-shadow: var(--shadow-card-hover);
}

/* 金环图标：浅底金衬，与趣味/联机版块同语言（金色仅装饰） */
.tech-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  border: 1px solid rgba(201, 169, 110, 0.38);
  border-radius: 50%;
  background-color: rgba(201, 169, 110, 0.08);
  color: var(--gold);                    /* SVG 描边随 currentColor 取金 */
}

.tech-icon svg {
  width: 26px;
  height: 26px;
}

.tech-name {
  margin-top: 18px;
  font-size: 1.1875rem;
  color: var(--ink);
}

.tech-desc {
  margin-top: 8px;
  font-size: var(--size-small);
  line-height: 1.65;
  color: var(--ink-secondary);
}

/* —— 截图横排画廊轨道：总宽约 120vw，静止态图像组正对视口中心 ——
   宽度取 110-130vw 区间中值：超出的约 20vw 供 scrub 横移展示；
   margin-left: -10vw 抵消轨道相对视口的右溢出，使 justify-content:center
   的图像组在未位移时恰好居中（三条降级路径的静态观感 = 桌面动效的中点）。
   轨道水平溢出由 html overflow-x:clip 兜底，不产生横向滚动条。 */
.tech-gallery {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(48px, 7vw, 128px);
  width: 120vw;
  margin-left: -10vw;
  margin-top: clamp(3rem, 7vh, 5rem);
}

.tech-shot {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

/* 本版块截图为视觉主角：在 .shot-img 通用规则上放宽一档高度上限 */
.tech-gallery .shot-img {
  max-height: min(82vh, 800px);
}

/* —— ≥768：双列特点卡 + 画廊横排成立（横移 scrub 由 main.js T033 注册）—— */
@media (min-width: 768px) {
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* —— 平板区间（768-1279）：收紧截图高度，两图并排不溢出视口 —— */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .tech-gallery .shot-img {
    max-height: min(62vh, 560px);
  }
}

/* —— <768：画廊回收为容器宽、两图纵向堆叠（负 margin 一并撤销）—— */
@media (max-width: 767.98px) {
  .tech-gallery {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: center;
    gap: clamp(40px, 7vh, 56px);
    padding-inline: var(--container-pad);
  }

  .tech-shot {
    width: 100%;                          /* 定宽基准：img max-width:100% 有明确参照 */
  }

  .tech-shot .shot-img {
    max-height: min(72vh, 640px);         /* 移动端略收紧，与各截图版块一致 */
  }
}


/* ==========================================================================
   17. 无障碍收口（T036）：键盘焦点态显式覆盖 + 对比度复核结论
   --------------------------------------------------------------------------
   (1) 焦点态：全局 :focus-visible（第 2 分区）已为全站可聚焦元素提供金色
       2px 轮廓；此处对键盘操作高频目标显式声明并微调，确保轮廓在毛玻璃
       导航（浅/深/黑三态）与下载按钮的金色渐变描边之间均留有空隙、
       清晰可辨：
         - 导航链接（桌面锚点 / 移动端面板 / 品牌入口）：offset 4px +
           6px 圆角（仅取形轮廓，不改变链接盒模型观感）；
         - 下载按钮与汉堡按钮：offset 4px，与按钮自身 1px 金描边拉开层次。
   (2) 对比度复核结论（金色 #c9a96e 仅装饰、不作正文色）：
       - 正文墨色：浅区 #1d1d1f / #f5f5f7 底 ≈ 15.5:1；次级
         rgba(29,29,31,.68) 合成后 ≈ 5.6:1——均达 WCAG AA；
       - 深区 #f5f5f7 / #0a0a0c 底 ≈ 18:1；纯黑收尾区同色系 ≥ 18:1；
         次级 rgba(245,245,247,.68) 合成后 ≈ 8.5:1——均达 AA；
       - 金色 #c9a96e（浅底 ≈ 2.1:1）仅用于装饰层：eyebrow 点缀小标、
         序号、饰线、图标描边、焦点轮廓与按钮描边，不承载正文信息；
         深底上作大号副句（.download-sub，#000 底 ≈ 9.4:1）亦达标；
       - 中性灰 #86868b 仅用于深底辅助文字（页脚版权 ≈ 5.8:1）与
         aria-hidden 的装饰性滚动提示，不作浅区正文。
   ========================================================================== */
.nav-links a:focus-visible,
.nav-panel-links a:focus-visible,
.nav-brand:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 6px;                    /* 供轮廓取形；链接无底色，观感不变 */
}

.btn-download:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;                   /* 与按钮 1px 金渐变描边拉开层次 */
}