/* ============================================================
   科目地图（#view-map）—— 每个科目一块按键 + 一块专属背景
   ------------------------------------------------------------
   怎么读这个文件：
     ① 变量层：`--m-base / --m-deep / --m-btn / --m-ink / --m-line`
        —— 全部由 map.js 按科目写在卡片的 style 上，这里只管用。
     ② 骨架层：`.map-zone / .mz-btn / .mz-bg` —— 尺寸、圆角、点击、动效。
     ③ 底纹层：`[data-sub="xx"] .mz-bg` 每科 3~6 行，**在这几行里换底纹**。
     ④ 皮肤层：末尾那个 `@supports` 块 —— 深色皮肤下把识别色提亮（不然深紫压深底=1.8:1 看不见）。

   ⚠️ 铁律（设计规范里的）：**这里一个写死的色值都不许有**，
      除了"把识别色往亮/暗混合"用的 #fff / #000 —— 那是混合用的白黑，不是配色。
      换了皮肤，整张地图跟着走。
   ============================================================ */

/* ---------- 视图外层 ---------- */
#view-map { padding-bottom: 8px; }

.map-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 12px;
}
.map-head .mh-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
}
.map-head .mh-sub {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray);
}
/* ⚠️ 这一行说明文字为什么用 --gray：
   它是**次要文字**，全站的次要文字都用 --gray（设计规范里那条 4.5:1 的 AAA 目标
   在浅色皮肤下对 --gray 本来就不达标 —— 那是全站配色决定，不是我这一页的事）。
   实测：浅色皮肤 --gray(#767676) 压页面底 #f7f7f7 = 4.24:1（略低于 AA，但看得清）；
   深色皮肤那一档全部 ≥ 5.6:1。所以**不自己去改色**，跟着皮肤走、别写死。
   （想再深一点：把这一行换成 color: var(--text) 即可，代价是它和标题一样抢眼。） */
.map-head .mh-sub { opacity: .9; }
.map-head .mh-badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--accent-light);
  border: 2px solid var(--line);
}
.map-head .mh-badge:empty { display: none; }

/* ---------- 学段筛选（胶囊） ---------- */
.map-stages {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.map-stages::-webkit-scrollbar { display: none; }

.map-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;                 /* 胶囊，两侧留白够点 */
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray);
  background: var(--card);
  border: 2px solid var(--line);
  cursor: pointer;
}
.map-chip b { color: var(--text); font-weight: 800; }
.map-chip.active {
  color: var(--accent-text);
  background: var(--accent-light);
  border-color: var(--accent);
}
.map-chip.active b { color: var(--accent-text); }

/* ---------- 分组标题 ---------- */
.map-group { margin: 6px 0 0; }
.map-group + .map-group { margin-top: 18px; }
.map-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.map-group-head i {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
}
.map-group-head span.n { color: var(--gray); font-weight: 700; }

/* ---------- 区域卡（= 按键 + 背景） ----------
   ⚠️ 2026-10-08 修：原来只声明了**两列**（46px 头像 + 1fr 文字），
      但卡片里有**三个**子元素：`.mz-face` / `.mz-body` / `.mz-btn`。
      第三项没有列可放 → **换行掉到第二行**，于是「进入」按钮压住了题数文字
      （手机上每张卡的"XX 题"都被按钮盖住，2026-10-08 用户截图发现）。
      补上第三列 `auto`，按钮回到自己那一列、贴右侧。 */
.map-zone {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;                 /* ≥72：整块都能点 */
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid var(--line);
  border-left-width: 4px;
  border-left-color: var(--m-base, var(--accent));
  background: var(--card);
  overflow: hidden;                 /* 底纹不许溢出圆角 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* 这一块就是"背景是科目的"：色 + 纹都在这里，纯 CSS，零图片 */
.mz-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--m-base, var(--accent)) 9%, transparent);
}

/* 角色头像 + 文字 + 按钮都在底纹上面 */
.map-zone > *:not(.mz-bg) { position: relative; z-index: 1; }

.mz-face {
  position: relative;               /* 给下面那张绝对定位的图当参照 */
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  background: var(--card);
  border: 2px solid var(--m-line, var(--line));
  overflow: hidden;
}
/* 角色图：**emoji 在下、图在上**，图只有加载成功才显形
   （见 map.js 卡片HTML 那段注释：这样图 404 时一帧都不会出现"裂图图标"）
   —— `frontier.png`（计算机高考）项目里就没有这张图，正好靠这条兜住。 */
.mz-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;                       /* 没加载成功 = 透明 → 看见下面的 emoji */
  transition: opacity .18s ease;
}
.mz-face img.is-on { opacity: 1; }  /* onload 时由 map.js 加上 */

.mz-body { min-width: 0; }
.mz-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}
.mz-name small {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--m-ink, var(--accent-text));   /* 深色皮肤下 --m-ink 是提亮过的识别色 */
}
.mz-desc {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 进度条：有做题记录才出现（map.js 决定要不要渲染这一段） */
.mz-meter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.mz-meter .mz-bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m-base, var(--accent)) 16%, transparent);
  overflow: hidden;
}
.mz-meter .mz-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--m-base, var(--accent));
}
.mz-meter .mz-pct {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--m-ink, var(--accent-text));
}

/* 右侧那个按键（.mz-btn）—— 整卡都可点，它是视觉落点 */
.mz-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--m-btn-text, #fff);
  background: var(--m-btn, var(--accent));
  border: 2px solid var(--m-btn, var(--accent));
  box-shadow: 0 2px 0 var(--m-btn-dark, var(--accent-dark));
}
.map-zone:hover .mz-btn { transform: translateY(-1px); }
.map-zone:hover { border-color: var(--m-line, var(--line)); }

/* 按下：和全站主按钮一个语言（下移 2px、厚度变薄） */
.map-zone:active { transform: translateY(2px); }
.map-zone:active .mz-btn { box-shadow: 0 0 0 var(--m-btn-dark, var(--accent-dark)); }

/* 选中的那一科（= 学习页当前科目）：描边点亮 */
.map-zone.is-current {
  border-color: var(--m-base, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-base, var(--accent)) 22%, transparent);
}

/* 键盘/无障碍：焦点可见 */
.map-zone:focus-visible,
.map-chip:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.map-foot {
  margin: 14px 0 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--gray);
  text-align: center;
}

/* ============================================================
   底纹：每科 3~6 行 —— 想换风格只动这一块
   全部用 `--m-base`（= 该科识别色）算色，所以换皮肤/换色都自动跟

   ⚠️ 2026-10-14（地图会话）：加了**底纹名机制**，两件事一起说清楚：
     ① 为什么加：`[data-sub="xx"]` 这种写法**一科一行 CSS**，科目从 17 涨到 41 之后
        漏得很厉害 —— 实测 `map.css` 里只有 17 条，**初中 15 科 + 普高 10 科
        底纹全长一个样**（都落在下面 `.mz-bg` 的通用斜纹上），
        而"每科一块专属背景"是这张地图的核心要求（用户原话「背景是科目的」）。
     ② 现在怎么工作：`map.js` 的科色表里那一列 `纹` **不再只是注释** ——
        卡片会带上 `data-纹="坐标格"`，这里用 `.mz-bg[data-纹="坐标格"]` 命中。
        好处：**加科目只需要在 map.js 表里写一个已有底纹名**，不用碰 CSS；
        新底纹名才需要来这里加一段（10 行左右）。
     ③ 优先级：属性选择器 (0,2,0) **压得过** 下面 `.mz-bg` 那条 (0,1,0)，
        所以专属底纹一定盖得住通用底；名字写错/没写 → 自动退回通用底，不会白块。
   ============================================================ */

/* ① 通用底（没有专属底纹、或底纹名写错时走这个）：斜向纹 + 左上角光 */
.mz-bg {
  background-image:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--m-base) 20%, transparent), transparent 62%),
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--m-base) 7%, transparent) 0 2px,
      transparent 2px 9px);
}

/* ② 计算机专业课 · 电路点阵 */
.mz-bg[data-纹="电路点阵"] {
  background-image:
    radial-gradient(90% 70% at 12% 0%, color-mix(in srgb, var(--m-base) 24%, transparent), transparent 64%),
    radial-gradient(circle, color-mix(in srgb, var(--m-base) 26%, transparent) 1.4px, transparent 1.6px);
  background-size: 100% 100%, 15px 15px;
}

/* ③ 数字媒体技术基础 · 霓虹扫描带 */
.mz-bg[data-纹="霓虹扫描带"] {
  background-image:
    radial-gradient(80% 80% at 100% 0%, color-mix(in srgb, var(--m-base) 26%, transparent), transparent 60%),
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--m-base) 16%, transparent) 0 2px,
      transparent 2px 7px);
}

/* ④ 计算机软件与硬件基础 · PCB 走线（横竖各一组直角短线） */
.mz-bg[data-纹="PCB 走线"] {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--m-base) 26%, transparent) 9px, transparent 9px),
    linear-gradient(0deg, color-mix(in srgb, var(--m-base) 26%, transparent) 9px, transparent 9px),
    radial-gradient(70% 70% at 90% 100%, color-mix(in srgb, var(--m-base) 16%, transparent), transparent 70%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}

/* ⑤ 计算机类理论题库 · 蓝图方格 */
.mz-bg[data-纹="蓝图方格"] {
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 20%, transparent) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 20%, transparent) 0 1px, transparent 1px 14px);
}

/* ⚠️ 2026-10-11：原来这里的 ⑥「幼儿园 · 数感启蒙 · 数点」（`[data-sub="kg-math"]`）已删 ——
   `kg` 学段整段摘掉，地图上不再有这块卡。序号**故意不重排**（⑦ 还是 ⑦），免得整份文件 diff 一片红。 */

/* ⑦ 小学数学基础 · 田字格 */
.mz-bg[data-纹="田字格"] {
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 22%, transparent) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 22%, transparent) 0 1px, transparent 1px 18px),
    radial-gradient(70% 80% at 100% 0%, color-mix(in srgb, var(--m-base) 18%, transparent), transparent 66%);
}

/* ⑧ 小学语文基础 · 横格纸 */
.mz-bg[data-纹="横格纸"] {
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 22%, transparent) 0 1px, transparent 1px 11px),
    linear-gradient(90deg, color-mix(in srgb, var(--m-base) 26%, transparent) 2px, transparent 2px);
  background-size: 100% 100%, 100% 100%;
}

/* ⑨ 初中数学基础 · 坐标格（细格 + 粗格） */
.mz-bg[data-纹="坐标格"] {
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 24%, transparent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 24%, transparent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 12%, transparent) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 12%, transparent) 0 1px, transparent 1px 8px);
}

/* ⑩ 初中语文基础 · 竖排纸纹 */
.mz-bg[data-纹="竖排纸纹"] {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 18%, transparent) 0 1px, transparent 1px 16px),
    radial-gradient(80% 80% at 0% 0%, color-mix(in srgb, var(--m-base) 20%, transparent), transparent 62%);
}

/* ⑪ 职教高考数学 · 函数曲线网格 */
.mz-bg[data-纹="函数曲线网格"] {
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 20%, transparent) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 20%, transparent) 0 1px, transparent 1px 20px),
    radial-gradient(60% 120% at 100% 50%, color-mix(in srgb, var(--m-base) 22%, transparent), transparent 70%);
}

/* ⑫ 语文 · 基础 · 宣纸纤维（细斜纹，无格） */
.mz-bg[data-纹="宣纸纤维"] {
  background-image:
    repeating-linear-gradient(115deg,
      color-mix(in srgb, var(--m-base) 12%, transparent) 0 1px,
      transparent 1px 6px),
    radial-gradient(90% 90% at 0% 50%, color-mix(in srgb, var(--m-base) 18%, transparent), transparent 68%);
}

/* ⑬ 英语 · 基础 · 四线三格 */
.mz-bg[data-纹="四线三格"] {
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0 4px,
      color-mix(in srgb, var(--m-base) 30%, transparent) 4px 5px,
      transparent 5px 9px,
      color-mix(in srgb, var(--m-base) 14%, transparent) 9px 10px,
      transparent 10px 18px);
}

/* ⑭ 计算机高考 · 靶心刻度 */
.mz-bg[data-纹="靶心刻度"] {
  background-image:
    repeating-conic-gradient(from 0deg at 100% 50%,
      color-mix(in srgb, var(--m-base) 22%, transparent) 0deg 4deg,
      transparent 4deg 14deg),
    radial-gradient(70% 90% at 100% 50%, color-mix(in srgb, var(--m-base) 18%, transparent), transparent 66%);
}

/* ⑮ 计算机网络技术 · 拓扑斜线 */
.mz-bg[data-纹="拓扑斜线"] {
  background-image:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--m-base) 16%, transparent) 0 1px,
      transparent 1px 13px),
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--m-base) 16%, transparent) 0 1px,
      transparent 1px 13px);
}

/* ⑯ Python 程序设计基础 · 终端提示符 */
.mz-bg[data-纹="终端提示符"] {
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      color-mix(in srgb, var(--m-base) 34%, transparent) 6px 9px,
      transparent 9px 18px),
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--m-base) 14%, transparent) 0 1px,
      transparent 1px 12px),
    radial-gradient(80% 70% at 0% 0%, color-mix(in srgb, var(--m-base) 20%, transparent), transparent 64%);
}

/* ⑰ MySQL 数据库设计基础 · 数据行条 */
.mz-bg[data-纹="数据行条"] {
  background-image:
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--m-base) 22%, transparent) 0 1px,
      transparent 1px 30px,
      color-mix(in srgb, var(--m-base) 22%, transparent) 30px 31px,
      transparent 31px 44px),
    linear-gradient(90deg, color-mix(in srgb, var(--m-base) 16%, transparent) 3px, transparent 3px);
  background-size: 100% 100%, 100% 100%;
}

/* ============================================================
   ⑱ 以下按**底纹名**组织（2026-10-14 加）
   ------------------------------------------------------------
   给 2026-10-11 之后新铺的那批科目用的：初中 15 科（浙江 6 + 全国 9）、
   小学补课阶梯 7 科、普高 10 科。它们在 map.js 的科色表里各自写了一个**底纹名**，
   卡片上带 `data-纹="…"`，这里按名字命中。
   ⚠️ 同一学科在不同学段**故意用同一个底纹**（初中数学和普高数学都是"坐标格"）：
      底纹是"这一科是什么"的第二层语言，真正的区分靠 `--m-base` 的色相。
      这也让加科目更省事 —— 复用名字即可。
   ⚠️ 每条只写 `background-image`（不写 background-size 的默认按 auto），
      颜色一律 `color-mix(…, var(--m-base) …)` → 换皮肤/换色自动跟。
   ============================================================ */

/* 计算网格（「数学 · 计算训练」：算术草稿纸 —— 格 + 左上角光） */
.mz-bg[data-纹="计算网格"] {
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 22%, transparent) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 18%, transparent) 0 1px, transparent 1px 16px),
    radial-gradient(80% 80% at 0% 0%, color-mix(in srgb, var(--m-base) 18%, transparent), transparent 62%);
}

/* ⚠️ 这里原来还有一份「坐标格」—— 删掉了：
   它和上面 ⑨ 那条（`jun-math` 改名前那份）**同名重复**，
   CSS 里后写的赢，留着只会让人以为改上面那条没用（真凶是重复定义）。 */

/* 三角刻度（浙江数学：三角板 + 直角刻度） */
.mz-bg[data-纹="三角刻度"] {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 26%, transparent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--m-base) 12%, transparent) 0 1px, transparent 1px 11px),
    radial-gradient(70% 70% at 100% 0%, color-mix(in srgb, var(--m-base) 20%, transparent), transparent 66%);
}

/* 算珠格（小学数学拓展） */
.mz-bg[data-纹="算珠格"] {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--m-base) 26%, transparent) 2px, transparent 2.2px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 20%, transparent) 0 1px, transparent 1px 20px);
  background-size: 20px 20px, auto;
}

/* ⚠️ 这里原来还有「横格纸 / 田字格 / 四线三格」三份 —— 全删了：
   它们和上面 ⑧/⑦/⑬（`pri-chn` / `pri-math` / `en` 改名前那几条）**同名重复**。
   CSS 里后写的赢，重复留着就会出现"改了上面那条却不见效"的鬼故事。 */

/* 竖排稿纸（高中语文：竖线 + 格） */
.mz-bg[data-纹="竖排稿纸"] {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 24%, transparent) 0 1px, transparent 1px 17px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 13%, transparent) 0 1px, transparent 1px 17px),
    radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--m-base) 18%, transparent), transparent 66%);
}

/* 朱批竖格（浙江语文：竖格 + 批注线） */
.mz-bg[data-纹="朱批竖格"] {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 26%, transparent) 0 1px, transparent 1px 15px),
    linear-gradient(180deg, color-mix(in srgb, var(--m-base) 18%, transparent) 6px, transparent 6px),
    radial-gradient(70% 80% at 0% 100%, color-mix(in srgb, var(--m-base) 20%, transparent), transparent 66%);
}

/* ⚠️ 这里原来还有「四线三格」一份 —— 删了：和上面 ⑬（`en` 改名前那条）同名重复。 */

/* 单词点阵（英语：词汇卡点阵） */
.mz-bg[data-纹="单词点阵"] {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--m-base) 24%, transparent) 1.6px, transparent 1.8px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 12%, transparent) 0 1px, transparent 1px 16px);
  background-size: 16px 16px, auto;
}

/* 词卡堆叠（高考词汇） */
.mz-bg[data-纹="词卡堆叠"] {
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 10px,
      color-mix(in srgb, var(--m-base) 22%, transparent) 10px 12px,
      transparent 12px 26px),
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--m-base) 16%, transparent) 0 1px,
      transparent 1px 14px);
}

/* 实验方格（科学 / 小学科学） */
.mz-bg[data-纹="实验方格"] {
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 20%, transparent) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 20%, transparent) 0 1px, transparent 1px 13px),
    radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--m-base) 20%, transparent), transparent 68%);
}

/* 电路走线（物理） */
.mz-bg[data-纹="电路走线"] {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--m-base) 24%, transparent) 11px, transparent 11px),
    linear-gradient(0deg, color-mix(in srgb, var(--m-base) 24%, transparent) 11px, transparent 11px),
    radial-gradient(circle, color-mix(in srgb, var(--m-base) 34%, transparent) 2px, transparent 2.4px),
    radial-gradient(70% 70% at 0% 100%, color-mix(in srgb, var(--m-base) 16%, transparent), transparent 70%);
  background-size: 30px 30px, 30px 30px, 30px 30px, 100% 100%;
}

/* 六边晶格（化学：六边形晶体） */
.mz-bg[data-纹="六边晶格"] {
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%,
      color-mix(in srgb, var(--m-base) 20%, transparent) 0deg 60deg,
      transparent 60deg 120deg),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 12%, transparent) 0 1px, transparent 1px 26px);
  background-size: 26px 26px, auto;
}

/* 细胞点阵（生物） */
.mz-bg[data-纹="细胞点阵"] {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--m-base) 22%, transparent) 3.4px, transparent 3.6px),
    radial-gradient(80% 80% at 100% 0%, color-mix(in srgb, var(--m-base) 20%, transparent), transparent 64%);
  background-size: 24px 24px, 100% 100%;
}

/* DNA 双螺旋（高中生物：两道错开的点排成"螺旋"） */
.mz-bg[data-纹="DNA 双螺旋"] {
  background-image:
    radial-gradient(circle at 30% 50%, color-mix(in srgb, var(--m-base) 30%, transparent) 2.2px, transparent 2.4px),
    radial-gradient(circle at 70% 50%, color-mix(in srgb, var(--m-base) 24%, transparent) 2.2px, transparent 2.4px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 10%, transparent) 0 1px, transparent 1px 22px);
  background-size: 22px 22px, 22px 22px, auto;
}

/* 等高线（地理） */
.mz-bg[data-纹="等高线"] {
  background-image:
    repeating-radial-gradient(circle at 12% 82%,
      transparent 0 9px,
      color-mix(in srgb, var(--m-base) 22%, transparent) 9px 10px,
      transparent 10px 19px,
      color-mix(in srgb, var(--m-base) 14%, transparent) 19px 20px,
      transparent 20px 30px),
    radial-gradient(70% 70% at 100% 0%, color-mix(in srgb, var(--m-base) 18%, transparent), transparent 66%);
}

/* 经纬格（历史与社会 · 浙江：网格 + 一条纬线） */
.mz-bg[data-纹="经纬格"] {
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 20%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-base) 20%, transparent) 0 1px, transparent 1px 32px),
    radial-gradient(50% 120% at 50% 0%, color-mix(in srgb, var(--m-base) 24%, transparent), transparent 72%);
}

/* 编年线（历史：一根时间轴 + 刻度） */
.mz-bg[data-纹="编年线"] {
  background-image:
    linear-gradient(0deg, transparent 13px, color-mix(in srgb, var(--m-base) 34%, transparent) 13px 15px, transparent 15px),
    repeating-linear-gradient(90deg,
      transparent 0 22px,
      color-mix(in srgb, var(--m-base) 26%, transparent) 22px 24px,
      transparent 24px 44px),
    radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--m-base) 18%, transparent), transparent 70%);
}

/* 圆章印（政治：一枚印章的方框 + 圈） */
.mz-bg[data-纹="圆章印"] {
  background-image:
    repeating-radial-gradient(circle at 84% 76%,
      transparent 0 7px,
      color-mix(in srgb, var(--m-base) 30%, transparent) 7px 9px,
      transparent 9px 22px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--m-base) 14%, transparent) 0 1px, transparent 1px 18px),
    radial-gradient(70% 70% at 0% 0%, color-mix(in srgb, var(--m-base) 20%, transparent), transparent 64%);
}

/* 条文横格（道德与法治：一条条规则线） */
.mz-bg[data-纹="条文横格"] {
  background-image:
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--m-base) 26%, transparent) 0 1px,
      transparent 1px 15px,
      color-mix(in srgb, var(--m-base) 13%, transparent) 15px 16px,
      transparent 16px 30px),
    radial-gradient(80% 80% at 100% 100%, color-mix(in srgb, var(--m-base) 18%, transparent), transparent 68%);
}

/* 格纹布（劳动：织物的方格） */
.mz-bg[data-纹="格纹布"] {
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--m-base) 22%, transparent) 0 4px,
      transparent 4px 18px),
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--m-base) 22%, transparent) 0 4px,
      transparent 4px 18px);
}

/* 像素方块（小学信息科技：8bit 方块） */
.mz-bg[data-纹="像素方块"] {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--m-base) 26%, transparent) 7px, transparent 7px),
    linear-gradient(0deg, color-mix(in srgb, var(--m-base) 26%, transparent) 7px, transparent 7px);
  background-size: 16px 16px, 16px 16px;
  background-position: 0 0, 0 0;
}

/* ============================================================
   坏图兜底（2026-10-06 加 · 用户截图问「这是什么」的那张小图）
   ------------------------------------------------------------
   案情：全站**唯一**一张 404 的图是 `icons/subjects/frontier.png`
   —— 科目「📘 计算机高考」的角色图，这科是后来加的、图一直没人做
   （`design/subject-chars/` 里也没有它的源图；实测证据在 `自查-坏图.html`：
    浏览器真实失败请求只有这一条）。
   `subject-art.js` 的 `subjectArtHtml()` 会给每个科目都写一个 `<img>`：
     · 地图这边有 `onerror` → 退回 emoji，所以地图一直看着正常
     · 学习页（科目页签 / 科目卡 / 计算训练标题）**没有兜底** →
       浏览器就画出「裂图小图标 + 边框」，用户问的就是它
   这里用**纯 CSS** 兜底（不碰 app.js / subject-art.js 这些多会话共用文件）：
     裂掉的图 `visibility:hidden` 藏掉、**占位保留**（版面不跳），
     父元素补一圈虚线框，看着像"这里本来就留了个位置"。
   ⚠️ 判据 `.bad-art` 这个类由 **map.js 的一小段兜底代码**加上
      （它拦 `window.subjectArtHtml`，给生成的 `<img>` 挂 `onerror`）——
      光靠 CSS 认不出"这张图裂了"，只能写内联 onerror，而那是要改公共文件的。
   想撤：删掉这一段（map.js 里那段拦法也一起删）。
   想根治：给 `icons/subjects/frontier.png` 补一张 320×320 的角色图，
   补完之后这段兜底自然失效（图能加载了，`.bad-art` 不会被加上）。
   ============================================================ */
img.s-art, img.s-art-tab, .s-ico img, .s-chibi img {
  background: transparent;          /* 去 Chrome 那种"灰底 + 图钉"的默认样式 */
}
img.s-art.bad-art,
img.s-art-tab.bad-art,
.s-ico img.bad-art,
.s-chibi img.bad-art {
  visibility: hidden;               /* 藏掉裂图图标，但**保留占位** */
}
/* 虚线占位画在父元素上（图自己 hidden 了，画不出来） */
.subj-tab:has(> img.s-art-tab.bad-art),
.s-ico:has(> img.s-art.bad-art),
.s-chibi:has(> img.bad-art) {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--card);
}
/* 老内核不认 :has() → 至少把裂图图标藏掉，不要出现"图钉"那种脏东西 */
@supports not (selector(:has(*))) {
  img.s-art.bad-art, img.s-art-tab.bad-art { opacity: 0; }
}

/* ============================================================
   深浅皮肤：把识别色**提亮**给文字/按钮/描边用
   ------------------------------------------------------------
   为什么必须做：深紫 #6A1B9A 压在深色卡 #0d141b 上只有 **1.97:1** ——
   结构和以前两次"看不见"的 bug 一模一样（元素在、字也在、就是看不见）。
   浅色皮肤用 deep 那档压字，深色皮肤用 light 那档当字色。
   `@supports` 兜底：浏览器不认识 color-mix → 退回 --line，绝不消失。
   ============================================================ */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .map-zone {
    --m-line: color-mix(in srgb, var(--m-base) 55%, #fff);
    --m-ink: color-mix(in srgb, var(--m-base) 88%, #000);
    --m-ink-soft: color-mix(in srgb, var(--m-base) 74%, #000);
    --m-btn-text: #fff;
    --m-btn: color-mix(in srgb, var(--m-base) 92%, #000);
    --m-btn-dark: color-mix(in srgb, var(--m-base) 62%, #000);
  }
  /* ⚠️ 皮肤类名和"深底还是浅底"都是**从 style.css 里量出来的**，不许凭印象写
     （我第一版写成 skin-pixel / skin-ink / skin-deep，结果好几套皮肤没被匹配到、
      全走了浅色那一档 —— 自检脚本第 ⑥ 段抓出来的）。
     真名 + 卡片底色（style.css 的 --card）：
       skin-tech 科技风   #0d141b  深
       skin-ocean 深海    #07161e  深
       skin-gold 典藏金   #16130c  深
       skin-game 像素游戏 #1e1b3d  深
       skin-cinnabar 朱批 #1a100e  深
       skin-autumn 枫叶   #fffcf6  浅
       skin-shanshui 山水 #fbf9f2  浅
     ⚠️ 以后加皮肤：**先看 --card 是深是浅，再决定加进哪一组**。 */
  body.skin-tech .map-zone,
  body.skin-ocean .map-zone,
  body.skin-gold .map-zone,
  body.skin-game .map-zone,
  body.skin-cinnabar .map-zone {
    --m-line: color-mix(in srgb, var(--m-base) 45%, #fff);
    --m-ink: color-mix(in srgb, var(--m-base) 32%, #fff);
    --m-ink-soft: color-mix(in srgb, var(--m-base) 52%, #fff);
    --m-btn: color-mix(in srgb, var(--m-base) 26%, #fff);
    --m-btn-dark: color-mix(in srgb, var(--m-base) 8%, #fff);
    --m-btn-text: #06141b;
  }
  /* 学段胶囊的字：**不能用 --gray** —— 深色皮肤下 --gray 压卡片只有 3.6~4.1:1，
     而浅色皮肤那一档更是这个项目的老毛病（设计规范第六节的基线）。
     选中态用"提亮/压深过的识别色"，和科名小字同一档。 */
  .map-chip {
    --m-ink: color-mix(in srgb, var(--accent) 78%, #000);
    --m-ink-soft: color-mix(in srgb, var(--accent) 72%, #000);
  }
  body.skin-tech .map-chip,
  body.skin-ocean .map-chip,
  body.skin-gold .map-chip,
  body.skin-game .map-chip,
  body.skin-cinnabar .map-chip {
    --m-ink: color-mix(in srgb, var(--accent) 52%, #fff);
    --m-ink-soft: color-mix(in srgb, var(--accent) 50%, #fff);
  }
}

/* 胶囊的字色走上面那套变量（**别退回 --gray**）：
   未选中=压深/提亮过的次色，选中=同一个色但底换成浅底/主题浅底 */
.map-chip { color: var(--m-ink-soft, var(--gray)); }
.map-chip b { color: var(--m-ink-soft, var(--gray)); font-weight: 800; }
.map-chip.active,
.map-chip.active b { color: var(--m-ink, var(--accent-text)); }

/* 减少动态效果：按全站约定，直接关掉动效 */
@media (prefers-reduced-motion: reduce) {
  .map-zone,
  .map-zone .mz-btn { transition: none; }
  .map-zone:active,
  .map-zone:hover .mz-btn { transform: none; }
}

/* ---------- PC（≥900px）：两列，别让地图拉成一条细线 ---------- */
@media (min-width: 900px) {
  .map-group .map-zone { margin-bottom: 10px; }
  .map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .map-grid .map-zone { margin: 0; }
}

/* ---------- 极窄屏（≤340px）：卡片缩一档，字不折行 ---------- */
@media (max-width: 340px) {
  .map-zone {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }
  .mz-face { width: 38px; height: 38px; font-size: 18px; }
  .mz-name { font-size: 14px; }
  .mz-btn { padding: 0 8px; font-size: 12px; }
}