/* ===== 原神 Wiki 设计令牌（提取自 Ardot 设计稿） ===== */
:root {
  --c-primary: #1491BB;        /* 青蓝：版本标签 / 区块图标条 */
  --c-primary-dark: #0E6E8E;
  --c-gold: #D4AF37;           /* 金黄：分类标题图标条 */
  --c-red: #E53E3E;            /* 限定 UP 标签 */
  --c-blue-soft: #BFD4E8;     /* 导航未激活文字 / 搜索提示 */
  --c-ink: #1A1A2E;           /* 深字 */
  --c-gray: #718097;           /* 卡片次要信息 */
  --c-bg: #F5F9FD;            /* 页面浅背景 */
  --radius-card: 16px;
  --radius-pill: 20px;
  --shadow-card: 0 4px 16px rgba(20, 69, 107, .08);
  --shadow-card-sm: 0 3px 12px rgba(20, 69, 107, .06);
  --nav-h: 72px;
  /* 悬浮元素的吸顶偏移 = 导航高度 + 呼吸间距。书籍左侧列与窄屏目录条共用这一个值。
     ⚠️ 2026-09-28 之前这里是 12px，因为当时顶栏并没有真的固定住：.nav 虽写着 position:sticky，
     却被外层 #site-header（无任何样式、高度恰好等于导航高度）锁死而静默失效（实测 scrollY=900
     时 navTop=-900，可 getComputedStyle 照样返回 'sticky'，看代码根本发现不了）。
     现在 #site-header 自己吸顶（见下方规则），偏移必须把导航高度算进来。
     ⚠️ 拆成两个变量不是洁癖：JS 要用这个偏移去算「点目录跳卷」的落点，而 --sticky-top 里含
     var()+calc()，getComputedStyle 取回来是 'calc(72px + 12px)'（var 已代入但 calc 不求值），
     parseFloat 直接 NaN。所以 JS 只读裸 px 的 --sticky-gap，导航高度量 #site-header.offsetHeight。 */
  --sticky-gap: 12px;
  --sticky-top: calc(var(--nav-h) + var(--sticky-gap));
  --pad-x: 80px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ===== 站点顶栏：真正吸顶（2026-09-28 用户要求） =====
 * 关键是**吸顶挂在父级 #site-header 上**，而不是里面的 .nav：
 *   .nav 早就写了 position:sticky; top:0，但 #site-header 没有任何样式、高度恰好等于导航高度
 *   72px，而 sticky 只能在父容器内移动 —— 父容器与自身等高 ⇒ 没有余量 ⇒ 静默失效。
 *   表现：导航随页面滚走（实测 scrollY=900 时 navTop=-900），且 getComputedStyle 仍返回 'sticky'。
 * 层级取 90：必须低于 .modal-backdrop(100) 与 .lightbox(9999)，否则弹窗/看图会被顶栏压住。
 * .nav 内部那条 sticky 保留不动（父级吸顶后它已无处可动，纯冗余但无害）。 */
#site-header { position: sticky; top: 0; z-index: 90; }

/* ===== 导航栏（鱼群图案背景） ===== */
.nav {
  height: var(--nav-h);
  background: url('img/fish-pattern.png') center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 24px;
  flex-shrink: 0;
}
.nav__logo img { width: 40px; height: 40px; border-radius: 50%; }
.nav__links {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 60vw;
  padding-bottom: 2px;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a {
  color: var(--c-blue-soft);
  font-size: 14.5px;
  font-weight: 500;
  transition: color .2s;
  white-space: nowrap;
}
.nav__links a:hover, .nav__links a.active { color: #fff; }
.nav__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  color: #fff;
  flex-shrink: 0;
}
.nav__search svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav__search input {
  border: 0;
  background: transparent;
  outline: none;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}
.nav__search input::placeholder { color: var(--c-blue-soft); }
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav__toggle span {
  width: 22px; height: 2px; background: #fff; border-radius: 2px;
}

/* ===== 导航二级下拉（「任务 → 8 种任务类型」）=====
 * 观感对齐 B站原神WIKI 的二级导航（用户 2026-09-27 给参考图定稿）：
 *   · 面板**贴住导航条底边**、0 间距，视觉上与导航连成一体
 *   · 配色**跟随导航条**（深蓝 + 白字），不做异色断层
 *   · 菜单项行高放松（~40px/项）、左对齐
 *   · 无右侧「>」箭头 —— 本面板是终点（点了直接进任务页并筛选），
 *     加箭头会暗示还有下一级，语义不符
 *
 * ⚠️ 面板必须用 position: fixed，**不能**用 absolute：
 *   .nav__links 带 overflow-x: auto（769~1240 区间要靠横向滚动容纳 20 个中文分类），
 *   而 overflow-x:auto 会把同元素 overflow-y 的 visible 计算成 auto →
 *   绝对定位的面板会被裁掉、还会顶出一条纵向滚动条。fixed 不受祖先 overflow 影响。
 *   代价是 left 要算，见 app.js 的 bindNavDrop()。
 *
 * ⚠️ 面板与鼠标之间**不能留缝**，否则鼠标从导航项移向面板的途中脱离 :hover，面板立刻消失、
 *   根本点不到里面的项（2026-09-27 用户反馈）。 */
.nav__drop { display: flex; align-items: center; position: relative; }
.nav__caret { font-size: 9px; margin-left: 3px; opacity: .8; vertical-align: 1px; }
.nav__menu {
  position: fixed;
  top: var(--nav-h);
  min-width: 150px;
  padding: 10px 0 12px;
  /* 与导航条同色系：稍暗一档，既一体又有层次 */
  background: var(--c-primary-dark);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .12));
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 30px rgba(6, 30, 46, .38);
  display: none;
  z-index: 60;
}
/* ⚠️ 「鼠标从导航项移到面板」这段路必须无缝，否则面板会在半路闪没、里面的项点不到
 *  （2026-09-27 用户反馈「没法停留在下拉框的位置去点击」）。
 *
 *  ❌ 试过但**行不通**的两种写法：
 *     ① `.nav__drop { padding-bottom: 13px; margin-bottom: -13px; }` —— 负 margin 把 padding
 *        撑出来的高度又抵消掉，盒子仍停在 y=48，对 hover 命中毫无帮助。
 *     ② `.nav__drop { align-self: stretch }` + `.nav__links { align-items: stretch }` —— 盒子确实
 *        撑到 70px 了，但 `.nav__drop` 的 cross-axis 对齐与兄弟项不一致，**它会被挤到新的
 *        flex line 上**：分类排第一行、「任务」单独掉到第二行，导航整体变成两行
 *        （2026-09-27 用户截图反馈「变成这样了很丑」）。同时它还会污染 ≤1240 的汉堡抽屉
 *        （抽屉的 height 被覆盖，内容被裁）。
 *
 *  ✅ 现在的写法：**不碰 flex 对齐、不碰盒子高度**，只靠 `.nav__menu` 自己往上铺一层
 *     透明的「接驳区」把鼠标接住。面板是 position:fixed，`top` 已钉在导航底边，
 *     所以 `::before` 从面板顶边往上延 72px（= 导航整高），刚好盖住「导航项文字 → 面板」
 *     之间那段真空，鼠标一路都落在面板/hover 子树里，不掉 :hover。
 *     优点：导航的排版一行没动（flex 对齐 / hover 判定完全照旧）。 */
.nav__menu::before {
  content: '';
  position: absolute;
  left: -1px; right: -1px; top: calc(-1 * var(--nav-h)); height: var(--nav-h);
}
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { display: block; }
/* ⚠️ 选择器必须带 .nav__links 前缀：基础规则 `.nav__links a`(0,1,1) 会盖掉单类选择器(0,1,0) 的
   font-size / color，导致菜单项沿用导航的 14.5px 浅蓝字，在深底面板上对比度不足。 */
.nav__links .nav__menu-i {
  display: block;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #EAF3FA;
  white-space: nowrap;
  transition: background .16s, color .16s;
}
.nav__links .nav__menu-i:hover { background: rgba(255, 255, 255, .16); color: #fff; }
/* 当前所处类型：与任务页 chip--active 同款强调（这里用导航色系的高亮） */
.nav__links .nav__menu-i.nav__menu-i--on { background: var(--c-red); color: #fff; }

/* ===== 页首标题条（原「云海英雄区」） =====
   ⚠️ 2026-10-12 用户要求：「把所有页面这个图片给去掉，把所有图鉴的内容都往上移动到导航栏下面」。
   原实现是 height:800px + img/hero-bg.jpg 的整屏云海插画，标题/副标题/统计浮在右下角，
   结果首屏被装饰图完全占满、看不到任何图鉴内容。
   现在：① 去掉背景图；② `height:800px` → `auto`，压成紧贴导航栏的标题条；
         ③ 标题由「靠右下」改为「靠左上」；④ 用 `.hero + .section` 收窄紧随其后内容的上内边距。
   ⚠️ 保留 `.hero` / `.hero__title` / `.hero__subtitle` / `.hero__stats` 这套类名：
      verify_geo.js 会用 `.hero__title` 断言一级页标题（如「地理志」）。 */
.hero {
  position: relative;
  height: auto;
  background: linear-gradient(160deg, #E8F2F8 0%, #F4FAFC 58%, #FBFDFE 100%);
  border-bottom: 1px solid rgba(20, 69, 107, .10);
}
.hero__inner {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* 由「沉到底部」改为「贴顶」 */
  align-items: flex-start;       /* 由「靠右」改为「靠左」 */
  text-align: left;
  gap: 8px;
  padding: 26px var(--pad-x) 24px;
}
.hero__title {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 34px;
  color: var(--c-ink);
  text-shadow: none;
}
.hero__subtitle {
  font-size: 15px;
  color: var(--c-ink);
  opacity: .68;
  text-shadow: none;
}
.hero__stats {
  display: flex;
  gap: 40px;
  margin-top: 8px;
  text-shadow: none;
}
.hero__stat { display: flex; flex-direction: column; gap: 4px; }
.hero__stat .num {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--c-ink);
}
.hero__stat .label { font-size: 13px; color: var(--c-ink); opacity: .68; }
/* 标题条正下方那个区块：`.section` 默认上内边距 60px，这里收窄，让图鉴内容真正贴到导航栏下面 */
.hero + .section { padding-top: 26px; }

/* ===== 通用区块 ===== */
.section { padding: 60px var(--pad-x); }
.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.section__title-wrap { display: flex; align-items: center; gap: 12px; }
.section__bar { width: 6px; height: 28px; border-radius: 3px; background: var(--c-primary); }
.section__bar--gold { background: var(--c-gold); }
.section__title {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--c-ink);
}
.section__more { font-size: 14px; font-weight: 500; color: var(--c-ink); opacity: .7; }
/* 区块右上角：计数 + 操作按钮（2026-10-07 给「版本图鉴」补「＋新增条目」用） */
.section__tools { display: flex; align-items: center; gap: 14px; }

/* ===== 版本图鉴卡片（280×282） ===== */
.grid-versions { display: flex; flex-wrap: wrap; gap: 24px; }
.vcard {
  width: 280px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
}
.vcard:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(20, 69, 107, .14); }
.vcard__cover { height: 140px; display: flex; align-items: flex-end; justify-content: flex-start; position: relative; overflow: hidden; }
.vcard__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard__ver {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 30px;
  color: rgba(20, 69, 107, .35);
  padding: 12px 14px;
  line-height: 1;
}
.vcard__tag {
  display: inline-block;
  background: var(--c-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
  margin: 0 12px;
  position: relative;
  top: -20px;
}
.vcard__tag--big { background: var(--c-red); border-radius: 10px; padding: 5px 10px; top: -18px; }
.vcard__body { padding: 16px; }
.vcard__count { margin-top: 8px; font-size: 12px; color: var(--c-gray); }
.vcard__count b { color: var(--c-primary); font-size: 13px; }
.vcard__name {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--c-ink);
}
.vcard__meta { font-size: 13px; color: var(--c-gray); margin-top: 4px; }

/* ===== 图鉴分类卡片（200×140） ===== */
.grid-cats { display: flex; flex-wrap: wrap; gap: 20px; }
.catcard {
  width: 200px;
  height: 140px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.catcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.catcard__icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.catcard__name { font-size: 16px; font-weight: 500; color: var(--c-ink); }
.catcard__desc { font-size: 12px; color: var(--c-ink); opacity: .65; }

/* ===== 任务类型入口卡（一级「任务」页，对齐 BWIKI /任务 的入口形态）=====
 * ⚠️ 2026-09-27 用户要求：一级任务页不放卡片列表，只放 8 张类型入口卡，点进去才看列表。
 * 复用 .catcard 骨架，但多一行条数 + 主题色图标底。 */
.catcard--quest { width: 248px; height: 168px; gap: 9px; position: relative; }
.catcard--quest:hover .catcard__icon--quest { background: var(--c-primary); color: #fff; }
.catcard__icon--quest {
  width: 44px; height: 44px; border-radius: 13px; font-size: 21px;
  background: #F1E7D8; color: #C2603A;
  transition: background .2s, color .2s;
}
.catcard--quest .catcard__name { font-size: 16.5px; font-weight: 600; }
.catcard--quest .catcard__desc { line-height: 1.5; }
.catcard__count {
  position: absolute; right: 18px; bottom: 16px;
  font-size: 12px; font-weight: 600; color: #B4744A;
  background: #FBF1E4; border: 1px solid #F0DFC9;
  border-radius: 10px; padding: 2px 9px;
}

/* ===== 筛选标签 ===== */
/* ⚠️ 必须换行：任务页 9 个类型 chip + 2 个操作按钮在 ~900px 以下会顶出横向滚动条
 *  （实测 w=900 时 .chip--imp 右边伸到 1007，把整页撑宽 107px）。
 *  原来靠「屏幕够宽」侥幸没露出来；≤1240 折叠档里 nav 也变窄后更容易撞上。 */
.filters { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px var(--pad-x) 0; }
/* ⚠️ `.filters` 显式写了 display:flex，会**覆盖** hidden 属性默认的 display:none
 *  → 想用 `el.hidden = true` 收起整行时，必须自己补这条兜底，否则元素仍占 66px 空白
 *  （任务页所有列表都靠 hidden 收起类型 chip，见 renderRoute）。 */
.filters[hidden] { display: none; }
/* 同上：任务类型页只收起筛选 chip（保留 ＋新增 / ⤒导入），单个 chip 也要能 hidden 收起 */
.filters .chip[hidden] { display: none; }

/* ===== 阅读状态（本机记录：看过 / 读完）=====
 * 两个地方用它：① 列表页这一行「阅读」筛选；② 详情页工具栏右侧的三态控件。
 * 这里刻意比主筛选行矮一点、字号小一点 —— 它是附加维度，不该跟「类型/元素」抢视线。 */
.filters--read { padding-top: 14px; align-items: center; }
.filters__label { font-size: 13px; color: #8592A0; align-self: center; padding-right: 2px; }
/* 「阅读」筛选行（2026-10-13 用户拍板）：**中性灰分段控件**，与主筛选的红色 chip 明确区分。
   原来它直接复用 .chip--active/.chip--off 的红底红字，和类型/元素筛选长得一模一样，
   在一个页面里出现两行红 chip，主次不分、视觉过重。
   ⚠️ 选择器带 .filters--read 前缀 → 特异性高于 .chip--active，能稳定压过全局红底白字。 */
.filters--read .segmented {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--radius-pill); background: #EBF1F7; border: 1px solid rgba(20, 69, 107, .06);
}
.filters--read .chip { padding: 6px 15px; font-size: 12.5px; font-weight: 500; background: transparent; color: #7A8794; }
.filters--read .chip--active { background: #fff; color: var(--c-ink); box-shadow: 0 1px 3px rgba(20, 69, 107, .18); }
.filters--read .chip--off { background: transparent; color: #7A8794; }
.filters--read .chip:hover { opacity: 1; background: rgba(255, 255, 255, .65); }
.filters--read .chip--active:hover { background: #fff; }

.readctl {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
  padding: 3px; border-radius: 999px;
  background: #F1F6FA; border: 1px solid #E4EBF3;
}
.readctl__label { font-size: 12px; color: #8592A0; padding: 0 8px 0 6px; }
.readctl__btn {
  border: 0; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: #6B7A89; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: .15s;
}
.readctl__btn:hover { background: #E5EEF7; }
/* 选中态：白底浮起；颜色随状态变 —— 未读灰 / 看过蓝 / 读完绿，扫一眼就知道读到哪一档 */
.readctl__btn.is-on { background: #fff; box-shadow: 0 1px 3px rgba(15, 45, 70, .14); font-weight: 600; }
.readctl[data-state="0"] .readctl__btn.is-on { color: #8592A0; }
.readctl[data-state="1"] .readctl__btn.is-on { color: #2F6FB5; }
.readctl[data-state="2"] .readctl__btn.is-on { color: #2E8B57; }
.chip {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  font-family: inherit;
  transition: opacity .2s;
}
.chip--active { background: var(--c-red); color: #fff; }
.chip--off { background: #FDEAEA; color: var(--c-red); }
.chip:hover { opacity: .85; }

/* 版本 / 第二维度筛选下拉（2026-09-27 用户要求：从页面顶部搬到导航栏搜索框旁）
 * ⚠️ 旧的 .ver-bar 是「页面内容区的一整行」（padding: 20px var(--pad-x) 0），已废弃；
 *    现在整块挂在 .nav__tools 里，与搜索框同高（--nav-h 内垂直居中）、同色系。 */
.nav__tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav__ver { position: relative; display: flex; align-items: center; height: 40px; flex-shrink: 0; }
.nav__ver-sel {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  height: 40px;
  max-width: 210px;
  padding: 0 30px 0 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
/* 原生 option 列表在部分平台不吃自定义配色 → 显式给深色字 + 白底，避免「白字白底」看不见 */
.nav__ver-sel option { color: #22303F; background: #fff; }
.nav__ver-sel:hover { background: rgba(255, 255, 255, .13); }
.nav__ver-sel:focus { outline: none; border-color: rgba(255, 255, 255, .55); }
.nav__ver-caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 9px; color: rgba(255, 255, 255, .7);
  pointer-events: none;   /* 只做指示，点击要落到 select 上 */
}

/* ===== 内容卡片网格（角色/装备等） ===== */
.grid-cards { display: flex; flex-wrap: wrap; gap: 24px; padding: 28px var(--pad-x) 60px; }
.ccard {
  width: 240px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.ccard:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(20, 69, 107, .12); }
.ccard { flex-direction: row; align-items: center; gap: 14px; }
.ccard__badge {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff;
  box-shadow: 0 2px 8px rgba(20, 69, 107, .12);
}
.ccard__badge--soft {
  background: #EFF6F9; color: var(--c-primary-dark);
  font-size: 15px; font-weight: 600;
}
.ccard__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ccard__name {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--c-ink);
  display: flex; align-items: center; gap: 8px;
}
.ccard__stars { font-size: 13px; color: var(--c-gold); letter-spacing: 1px; }
.ccard__info { font-size: 12px; color: var(--c-gray); }
.ccard__meta { font-size: 12px; color: var(--c-ink); opacity: .55; }

/* 角色卡 / 武器卡：与观测枢同款 —— 图标与文字相互独立，卡片本身无底板（无背景/边框/阴影） */
.ccard--char,
.ccard--weapon {
  width: 156px;
  padding: 0;
  overflow: visible;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.ccard--char:hover,
.ccard--weapon:hover { box-shadow: none; }

/* 圣遗物卡：与观测枢 189/218 频道页同款**横向宽卡**
   —— 上行「60×60 套装图标 + 名称」，下行「2件套 / 4件套」效果文字
   尺寸/内距/底色/字号均按观测枢官网实测值：407×146、padding 8、图标底 #E0DAD3、
   名称 14px/#333、套装行 12px/#737373（key 加粗）、4件套最多 2 行、超出省略
   高度公式：8 + 60 + 12 + (16+5) + (32+5) + 8 = 146（与官网逐像素一致） */
.ccard--artifact {
  width: 407px;
  flex: 0 1 407px;
  min-width: 0;
  height: 146px;
  padding: 8px;
  overflow: hidden;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: #F5F5F5;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  transition: background .18s ease;
}
.ccard--artifact:hover { transform: none; box-shadow: none; background: #EDEDED; }
/* 上行：图标 + 名称 */
.ccard__relic-top {
  display: flex;
  align-items: center;
  height: 60px;
  flex: none;
  margin-bottom: 12px;
}
.ccard__relic-icon {
  width: 60px;
  height: 60px;
  flex: none;
  margin-right: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: #E0DAD3;
}
.ccard__relic-icon img { width: 100%; height: 100%; display: block; }
/* 名称：与官网一致 —— 常规字重、14px、#333（不套用站内角色卡的衬线加粗） */
.ccard--artifact .ccard__name {
  display: block;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #333;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 「已移除出游戏」套装角标（站内 2 条旧套装的注记，从套装文本里剥离出来单放） */
.ccard__relic-tag {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 16px;
  color: #8A8A8A;
  background: #E4E4E4;
}
/* 下行：2件套 / 4件套 */
.ccard__relic-item { display: flex; margin-bottom: 5px; }
.ccard__relic-key {
  flex: 0 0 auto;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: #737373;
}
.ccard__relic-val {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #737373;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 书籍卡：封面方块（图标铺满 + 名称在底部），对齐 BWiki 书籍一览风格 */
/* 书籍卡（2026-10-26 照 B站「书籍一览」）：100×100 方形封面
   —— 封面铺满整卡，书名压在底部渐变条上（白字 + 深色描边），星级叠左上角 */
.ccard--book {
  position: relative;
  width: 100px;
  aspect-ratio: 1 / 1;   /* ⚠️ .ccard__art 是 absolute 铺满，卡高必须自己撑起来 */
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
  border-radius: 8px;
  border: 2px solid #333;
  box-shadow: 0 0 1px #000;
  background: linear-gradient(145deg, #F3F7FB, #E4ECF4);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ccard--book:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,.20); }
.ccard--book .ccard__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ccard--book .ccard__stars {
  position: absolute; top: 3px; left: 4px;
  font-size: 10px; letter-spacing: -1px;
  color: #FFD544; text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 3px rgba(0,0,0,.45);
  z-index: 3;
}
.ccard--book .ccard__art img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .2s ease;
}
.ccard--book:hover .ccard__art img { transform: scale(1.05); }
/* 书名条：压在封面底部的渐变带（B站同款布局，字比 B站 稍大保证可读） */
.ccard--book .ccard__main {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 12px 4px 3px;
  background: linear-gradient(rgba(0,0,0,0), rgba(20,28,38,.82));
  text-align: center;
}
.ccard--book .ccard__name {
  font-size: 10.5px; font-weight: 700; line-height: 1.2; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 成就子系列卡：方块 + 奖杯图标 + 版本角标 */
.ccard--ach {
  width: 150px;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 5px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ccard--ach:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20,69,107,.14); }
.ccard--ach .ccard__art--ach {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#EAF6F4,#CFE9E4);
}
.ccard--ach .ccard__ach-icon { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.08)); }
.ccard--ach .ccard__trophy { font-size: 40px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }
.ccard--ach .ccard__ver {
  position: absolute; top: 5px; right: 6px;
  font-size: 10px; font-weight: 600; color: #fff;
  background: rgba(20,69,107,.55); padding: 1px 6px; border-radius: 9px;
}
.ccard--ach .ccard__main { padding: 6px 8px 8px; background: rgba(255,255,255,.7); }
.ccard--ach .ccard__name { font-size: 12.5px; line-height: 1.25; color: #1d3a4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard--ach .ccard__info { font-size: 11px; color: #5a7a86; margin-top: 2px; }

/* 成就详情页：子系列成就列表 */
.detail--ach { background: #FBFCFD; }
.detail__ach-head { padding: 10px 24px 0; }
.detail__ach-title { font-family: 'Noto Serif SC', serif; font-size: 26px; color: var(--c-ink); margin: 0; }
.detail__ach-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ach-tag { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #EAF6F4; color: #1d6b63; }
.ach-tag--gem { background: #E8F1FB; color: #2b6cb0; }
/* 单版本 → 版本号可点，跳到该版本的版本图鉴（2026-10-24 方案 3） */
.ach-tag--link { text-decoration: none; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.ach-tag--link:hover { background: #DCEFE9; color: #14524C; box-shadow: 0 1px 4px rgba(29,107,99,.18); }
.ach-tag__arrow { font-size: 11px; margin-left: 4px; opacity: .75; }
/* 跨版本系列（天地万象 1.0–7.1 / 心跳的记忆 1.4–4.5）：区间样式，且不可点 */
.ach-tag--range { background: #EDF3F8; color: #4F6D80; }
.ach-list { padding: 16px 24px 60px; display: flex; flex-direction: column; gap: 10px; }
.ach-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 10px; transition: box-shadow .18s; }
.ach-row:hover { box-shadow: 0 4px 12px rgba(20,69,107,.10); }
.ach-row__idx { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: #EAF6F4; color: #1d6b63; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ach-row__body { flex: 1; min-width: 0; }
.ach-row__name { font-size: 15px; font-weight: 700; color: #1d3a4a; font-family: 'Noto Serif SC', serif; }
.ach-row__desc { font-size: 13px; color: #4a5a62; margin-top: 3px; line-height: 1.5; white-space: pre-wrap; }
/* 行右侧信息：版本号 + 原石。
 * ⚠️ 两者必须在**同一条水平线**上（2026-10-24 用户指出预览图里「版本号居中、原石偏上」很难看）：
 *    外面包一个横向 flex 且 align-items:center，整块贴行顶（.ach-row 是 flex-start），
 *    这样不管左边说明有几行，版本胶囊与原石都保持同一基线。 */
.ach-row__side { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.ach-row__ver {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: #4F7C8C; background: #F0F6F8; border: 1px solid #DCE9EF;
  border-radius: 999px; padding: 2px 9px; line-height: 1.6; white-space: nowrap;
}
/* 固定最小宽度 + 右对齐：各行的「N 原石」右边缘对齐，版本胶囊也就跟着对齐了 */
.ach-row__reward { min-width: 64px; text-align: right; font-size: 12px; color: #888; white-space: nowrap; }
/* 窄屏：右侧「版本 + 原石」会把说明挤成一条窄缝（390 宽实测正文只剩 104px）。
 * 改成两行网格 —— 序号 / 正文占第一行，版本与原石落到正文下方的右侧一行。 */
@media (max-width: 600px) {
  .ach-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
  .ach-row__side { grid-column: 2; justify-self: end; }
  .ach-row__reward { min-width: 0; }
}
.ach-row__gem { display: inline-block; font-size: 14px; font-weight: 700; color: #3FA9F5; }
/* 官方图标模式：尺寸与观测枢一致 —— 图标 114×114，无内衬背景、无角标（角色卡 / 武器卡共用） */
.ccard--char .ccard__art--charicon,
.ccard--weapon .ccard__art--charicon {
  width: 114px;
  height: 114px;
  aspect-ratio: auto;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  border-radius: 4px;
}
.ccard--char .ccard__art--charicon img,
.ccard--weapon .ccard__art--charicon img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transition: transform .28s ease;
}
.ccard--char:hover .ccard__art--charicon img,
.ccard--weapon:hover .ccard__art--charicon img { transform: translateY(-3px) scale(1.03); }
/* 文字区：独立排在图标下方（不再与图标同处一块底板），整体居中（角色卡 / 武器卡共用） */
.ccard--char .ccard__main,
.ccard--weapon .ccard__main {
  padding: 0;
  gap: 3px;
  width: 100%;
  align-items: center;
  text-align: center;
}
.ccard--char .ccard__name,
.ccard--weapon .ccard__name {
  font-size: 14px;
  justify-content: center;
  max-width: 100%;
}
.ccard--char .ccard__nm,
.ccard--weapon .ccard__nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccard--char .ccard__stars,
.ccard--weapon .ccard__stars { flex-shrink: 0; font-size: 11px; }
/* 副标题：字体/字号/颜色与名称保持一致（仅字重保持常规，避免两行都加粗失去主次） */
.ccard--char .ccard__info,
.ccard--weapon .ccard__info {
  font-family: 'Noto Serif SC', serif;
  font-size: 14px;
  color: var(--c-ink);
  opacity: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 页脚（鱼群图案背景） ===== */
.foot {
  background: url('img/fish-pattern.png') center / cover no-repeat;
  padding: 48px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.foot__left { display: flex; flex-direction: column; gap: 8px; }
.foot__logo { font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 20px; color: #fff; }
.foot__desc { font-size: 13px; color: var(--c-blue-soft); }
.foot__links { display: flex; gap: 32px; flex-wrap: wrap; }
.foot__links a { font-size: 13px; color: var(--c-blue-soft); transition: color .2s; }
.foot__links a:hover { color: #fff; }

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
  :root { --pad-x: 48px; }
  .hero__inner { padding: 80px; }
}
@media (max-width: 768px) {
  :root { --pad-x: 24px; }
  .nav { padding: 0 20px; }
  .nav__links {
    display: none;
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    gap: 16px;
    background: var(--c-primary-dark);
    padding: 16px 20px;
  }
  .nav--open .nav__links { display: flex; }
  .nav__search { display: none; }
  /* 折叠态（≤768px）：版本/第二维度下拉也一起收进汉堡抽屉（空间不够，且筛选入口在列表页仍有「筛选」提示） */
  .nav__tools { display: none; }
  .nav__toggle { display: flex; }
  /* 折叠态（≤768px）：分类已变成竖向抽屉，二级面板没有悬停语义 → 直接不显示 */
  .nav__menu { display: none !important; }
  .nav__caret { display: none; }
  /* 窄屏标题条：大图已去掉，这里不再需要 min-height:440px，只等比缩小字号与内边距 */
  .hero__inner { padding: 20px 24px 18px; }
  .hero__title { font-size: 26px; }
  .hero__stats { gap: 24px; flex-wrap: wrap; }
  .hero__stat .num { font-size: 22px; }
  .grid-versions, .grid-cats, .grid-cards { gap: 16px; }
  .vcard, .catcard, .ccard { width: 100%; }
  .catcard { height: auto; }
  .foot { flex-direction: column; align-items: flex-start; }
}

/* ===== 详情弹层 ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 28, 46, .55);
  backdrop-filter: blur(3px);
}
.modal--open { display: flex; }
.modal__panel {
  position: relative;
  width: 720px;
  max-width: 100%;
  max-height: 88vh;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(16, 28, 46, .38);
  display: flex;
  overflow: hidden;
  animation: modalIn .25s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--c-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.modal__close:hover { background: #fff; }
.modal__cover {
  position: relative;
  width: 260px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__initial {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 72px;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.modal__element {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  backdrop-filter: blur(2px);
}
.modal__body {
  flex: 1;
  padding: 36px 32px;
  overflow-y: auto;
}
.modal__kicker {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-primary);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.modal__title {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--c-ink);
}
.modal__sub { font-size: 14px; color: var(--c-gray); margin-top: 6px; }
.modal__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.modal__tag {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 12px;
  background: #EFF6F9;
  color: var(--c-primary-dark);
}
.modal__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-gray);
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #EEF2F6;
}
.modal__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 18px;
  margin-top: 18px;
}
.modal__field {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  background: #F7FAFC;
  border-radius: 10px;
}
.modal__field-k { font-size: 12px; color: var(--c-gray); flex-shrink: 0; }
.modal__field-v { font-size: 14px; font-weight: 500; color: var(--c-ink); }
.modal__ph {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-gold);
  background: #FCF6E8;
  padding: 5px 12px;
  border-radius: 12px;
}
@media (max-width: 640px) {
  .modal { padding: 12px; }
  .modal__panel { flex-direction: column; max-height: 90vh; }
  .modal__cover { width: 100%; height: 180px; }
  .modal__initial { font-size: 56px; }
  .modal__body { padding: 28px 22px; }
}

/* ===== 角色详情弹层（立绘 + 标签页） ===== */
.modal__panel--char { width: 880px; }
.modal__char { display: flex; width: 100%; height: 100%; }
.modal__char-art {
  width: 320px;
  flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: center;
  overflow: hidden;
  background: #EAF2FA;
}
.modal__char-art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.modal__char-info {
  flex: 1;
  padding: 32px 30px 30px;
  overflow-y: auto;
  min-height: 0;
}
.modal__char-full { font-size: 14px; color: var(--c-gray); margin-top: 4px; }
.modal__char-title { font-size: 15px; color: var(--c-primary-dark); font-style: italic; margin-top: 4px; }
.cm-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.cm-stat { background: #F5F9FC; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.cm-stat-k { font-size: 11px; color: var(--c-gray); }
.cm-stat-v { font-size: 13px; font-weight: 600; color: var(--c-ink); }
/* 属性网格里的「星级」行：与角色一样用金色星星 */
.cm-stat-v--stars { color: var(--c-gold); letter-spacing: 1px; }
/* 介绍字段：占满网格整行，文本正常字重换行 */
.cm-stat--full { grid-column: 1 / -1; background: #F7FAFC; padding: 12px 14px; }
.cm-stat--full .cm-stat-v { font-weight: 400; font-size: 14px; line-height: 1.8; white-space: normal; }
.modal__tabs { display: flex; gap: 4px; margin-top: 22px; border-bottom: 1px solid #EEF2F6; }
.cm-tab {
  padding: 9px 14px; border: 0; background: none; font-family: inherit;
  font-size: 14px; font-weight: 500; color: var(--c-gray); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s;
}
.cm-tab:hover { color: var(--c-primary-dark); }
.cm-tab--active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.cm-pane { display: none; padding-top: 18px; }
.cm-pane--active { display: block; }

/* 角色故事内嵌子标签 */
.cm-stabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EEF2F6;
}
.cm-stab {
  padding: 7px 12px;
  border: 0;
  background: #F2F6FA;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-gray);
  cursor: pointer;
  transition: all .15s;
}
.cm-stab:hover { color: var(--c-primary-dark); background: #E9F1F7; }
.cm-stab--active { color: #fff; background: var(--c-primary); }
.cm-spane { display: none; }
.cm-spane--active { display: block; }
.cm-intro, .cm-story {
  font-size: 14px; line-height: 1.8; color: var(--c-ink);
  white-space: pre-wrap; background: #F7FAFC; border-radius: 12px; padding: 16px 18px;
}

/* ===== 圣遗物详情页 ===== */
.detail--artifact { background: #FBFCFE; }
.detail__artifact { padding: 8px 24px 64px; }
.detail--artifact .modal__kicker { margin-top: 18px; }
.detail--artifact .detail__title { margin: 4px 0 8px; }
.af-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 20px; }
.af-meta__star { font-size: 15px; font-weight: 700; color: #E9A23B; }
.af-meta__ver { font-size: 13px; color: var(--c-gray); }

/* 五个部件图标 —— 2026-10-06 用户要求「缩小成和外面一级页面的大小一致」。
 * 一级页（圣遗物列表卡）的套装图标是 `.ccard--artifact .ccard__relic-icon` = **76×76**，
 * 这里对齐同一尺寸；原来铺满 1/5 栏宽（≈176px）显得比列表页大一倍多。
 * 同时这几个图标成了「切换故事」的 tab（.af-piece--on 高亮），所以是 <button>，要清掉浏览器默认样式。 */
.af-pieces {
  display: flex; flex-wrap: wrap; gap: 18px 22px;
  margin-bottom: 28px;
}
.af-piece {
  width: 76px; flex: none; text-align: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; -webkit-appearance: none; appearance: none;
}
.af-piece__icon {
  width: 76px; height: 76px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid rgba(180, 160, 130, .2);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.af-piece__img { width: 78%; height: 78%; object-fit: contain; display: block; filter: drop-shadow(0 2px 5px rgba(100, 70, 30, .18)); transition: transform .25s ease; }
.af-piece__ph { color: #c9b79a; font-size: 12px; }
.af-piece__name { margin-top: 7px; font-size: 12.5px; font-weight: 600; color: var(--c-ink); line-height: 1.3; }
.af-piece__slot { font-size: 11px; color: var(--c-gray); margin-top: 2px; }
/* 有故事的部位：鼠标移上去 + 选中态都给出明确反馈 */
.af-piece--story .af-piece__icon { cursor: pointer; }
.af-piece:hover .af-piece__icon { border-color: rgba(233, 162, 59, .55); box-shadow: 0 4px 14px rgba(200, 150, 60, .18); }
.af-piece:hover .af-piece__img { transform: scale(1.06); }
.af-piece--on .af-piece__icon { border-color: #E9A23B; box-shadow: 0 0 0 2px rgba(233, 162, 59, .35), 0 4px 14px rgba(200, 150, 60, .22); }
.af-piece--on .af-piece__name { color: #C87A18; }
.af-piece--on .af-piece__slot { color: #C87A18; font-weight: 600; }
.af-piece:focus-visible .af-piece__icon { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* 套装效果 */
.af-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.af-effect { border-radius: 14px; padding: 16px 18px; border: 1px solid #EDF2F6; background: #fff; }
.af-effect--2 { background: linear-gradient(135deg, #FFF7EC, #FDEFD6); border-color: #F3E2BF; }
.af-effect--4 { background: linear-gradient(135deg, #EEF4FF, #E2ECFB); border-color: #CFE0F7; }
.af-effect__tag { display: inline-block; font-size: 13px; font-weight: 700; color: #fff; background: #E9A23B; border-radius: 8px; padding: 2px 10px; margin-bottom: 10px; }
.af-effect--4 .af-effect__tag { background: #3F7FD6; }
.af-effect__body { font-size: 14px; line-height: 1.8; color: var(--c-ink); }
.af-effect__body br { margin-bottom: 4px; }

/* 获取秘境 */
.af-domain-row { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-radius: 12px; background: #fff; border: 1px solid #EDF2F6; margin-bottom: 24px; }
.af-domain__k { font-size: 13px; font-weight: 700; color: var(--c-gray); flex-shrink: 0; }
.af-domain__v { font-size: 14px; color: var(--c-ink); line-height: 1.7; }
.af-domain__link { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.af-domain__link:hover { text-decoration: underline; }
.af-domain__arrow { font-size: 12px; opacity: .8; margin-left: 2px; }

/* 2026-10-18 用户要求：部位图标在左，2/4 件套 + 获取秘境在右（原来三段各占一整行，竖着排太长）。
   ≥900px 时头部整块固定、只有故事正文单独滚（见下方 body.af-fixed）；窄屏仍按原顺序竖排。 */
.af-top { display: flex; align-items: flex-start; gap: 28px; }
.af-top .af-pieces { flex: 0 0 auto; margin-bottom: 0; }
.af-side { flex: 1 1 auto; min-width: 0; }
.af-side .af-effects { margin-bottom: 14px; }
.af-side .af-domain-row { margin-bottom: 0; }
@media (max-width: 899px) {
  .af-top { display: block; }
  .af-side { margin-top: 18px; }
}

/* 故事 —— 按部位切换（2026-10-06 用户要求：点图标切对应文本） */
.af-story { margin-top: 4px; }
.af-story__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
/* ⚠️ 2026-10-17 用户要求：滚到「圣遗物图鉴 / 名字」这行下方后，把「圣遗物故事 + 五个部位」吸住，
   正文继续往下滚，读长文时随时能切部位。
   吸顶位 = 导航高 + 详情顶栏高：
     · >1240px：.detail__bar 自己也是 sticky（top:72，高 85，实测各宽度恒定）→ 157
     · ≤1240px：.detail__bar 退回静态，会随页面滚走 → 故事栏直接贴导航底
   必须给**不透明**底色，否则正文会从吸住的标签行里透出来（.detail--artifact 的底色）。 */
.detail--artifact .af-story__bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 55;
  background: #FBFCFE;
}
@media (min-width: 1241px) {
  .detail--artifact .af-story__bar { top: calc(var(--nav-h) + 85px); }
}

/* 2026-10-18 用户要求：「改完后这一块固定住，滚动条拉动只拉动圣遗物具体的文本」。
   桌面端把圣遗物详情做成**整页不滚、只有故事正文单独滚**：
     section 高 = 视口 - 导航；顶栏（返回/编辑）和 .af-head（标题 + 图标 + 套装 + 秘境）都是 flex:none，
     .af-story__panes 吃掉剩余高度并 overflow-y:auto。
   body 加锁由 app.js 的 bindArtifactStory() 负责切（离开本路由时 renderRoute 会摘掉）。
   ⚠️ 窄屏（<900）不进这套布局：头部本身就占掉大半屏，留给正文的高度不够，
      仍走「整页滚 + 故事栏吸顶」的老路径。 */
@media (min-width: 900px) {
  body.af-fixed { overflow: hidden; }
  body.af-fixed #view > .detail--artifact {
    height: calc(100vh - var(--nav-h));
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  /* ⚠️ 必须把顶栏退回 static：body 一旦 overflow:hidden 就成了滚动容器，
     sticky + top:72 会把它整体推到 144px，压住下面的标题（实测「炉火锻炼之心」被切掉一半）。
     整页不滚时 sticky 本来也没有意义。 */
  body.af-fixed .detail--artifact .detail__bar { flex: none; position: static; }
  /* 头部收紧一点，把高度让给正文（900px 高的窗口下正文从 223px 提到 ~250px） */
  body.af-fixed .af-head > .modal__kicker { margin-top: 6px; }
  body.af-fixed .af-meta { margin-bottom: 14px; }
  body.af-fixed .detail__artifact {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    padding-bottom: 0;
    overflow: hidden;
  }
  body.af-fixed .af-head { flex: none; }
  body.af-fixed .af-story {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    margin-top: 6px;
  }
  body.af-fixed .af-story__bar { flex: none; position: static; margin-bottom: 10px; }
  body.af-fixed .af-story__panes {
    flex: 1; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    padding: 0 6px 28px 0;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }
  body.af-fixed .af-story__panes::-webkit-scrollbar { width: 8px; }
  body.af-fixed .af-story__panes::-webkit-scrollbar-thumb { background: #DCE5EE; border-radius: 4px; }
  body.af-fixed .af-story__panes::-webkit-scrollbar-track { background: transparent; }
}
.af-story__bar .modal__kicker { margin: 0; }
/* 2026-10-17 用户要求：切换查看的标签靠左（原先 margin-left:auto 顶到行尾，视线要横跨整行） */
.af-story__tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 0; }
.af-story__tab {
  font-size: 12px; line-height: 1; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid #E3E9F0; background: #fff; color: var(--c-gray);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.af-story__tab:hover { border-color: #F0CFA0; color: #C87A18; }
.af-story__tab.is-on { background: #E9A23B; border-color: #E9A23B; color: #fff; font-weight: 600; }
.af-story__pane { display: none; }
.af-story__pane.is-on { display: block; }
.af-story__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.af-story__slot {
  font-size: 12px; font-weight: 700; color: #fff; background: #E9A23B;
  border-radius: 6px; padding: 3px 9px; flex-shrink: 0;
}
.af-story__pname { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.af-story__zoom {
  margin-left: auto; font-size: 12px; line-height: 1; padding: 6px 11px; border-radius: 999px;
  border: 1px solid #E3E9F0; background: #fff; color: var(--c-gray); cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.af-story__zoom:hover { border-color: #B9D4F0; color: var(--c-primary); }
.af-story__desc {
  font-size: 13px; line-height: 1.75; background: #F7F9FC;
  border-left: 3px solid #D9E3EE; border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 12px;
  /* 2026-10-18 用户要求：这段「秘境 / 一句话简介」换成高亮色（原 #6B7A88 太灰，和正文混在一起） */
  color: #B0600F; font-weight: 600;
}
/* 2026-10-18 用户要求：圣遗物故事的正文居中显示。
   源数据是「一段一行」（pre-wrap + 空行分段），段落都不长，左对齐时右边会空出一大片；
   居中后整段像题记一样落在版面中间。 */
.af-story__body { font-size: 14.5px; line-height: 2; color: var(--c-ink); text-align: center; }
.af-story__body p { margin: 0 0 12px; }

@media (max-width: 760px) {
  .af-pieces { gap: 14px 16px; }
  .af-piece, .af-piece__icon { width: 68px; }
  .af-piece__icon { height: 68px; }
  .af-effects { grid-template-columns: 1fr; }
  .detail__artifact { padding: 8px 16px 48px; }
  .af-story__tabs { margin-left: 0; width: 100%; }
}

/* ===== 书籍详情页 ===== */
.detail--book { background: #FBFCFE; }
.detail__book { padding: 8px 24px 64px; display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
.bk-cover {
  position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid rgba(120,140,160,.18);
}
.bk-cover__img { width: 84%; height: 84%; object-fit: contain; display: block; cursor: zoom-in; filter: drop-shadow(0 3px 8px rgba(0,0,0,.15)); }
.bk-cover__ph { color: #9aa; font-size: 13px; }
.bk-cover__stars { position: absolute; top: 8px; left: 10px; font-size: 15px; letter-spacing: -1px; }
.bk-info { min-width: 0; }
.detail--book .modal__kicker { margin-top: 4px; }
.detail--book .detail__title { margin: 4px 0 10px; }
.bk-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; align-items: center; }
.bk-meta__star { font-size: 15px; font-weight: 700; color: #E9A23B; }
.bk-meta__tag { font-size: 12px; font-weight: 600; color: #4a6072; background: #EAF1F8; border-radius: 8px; padding: 3px 10px; }
.bk-meta__ver { font-size: 13px; color: var(--c-gray); }
.bk-fields { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 12px 16px; background: #fff; border: 1px solid #EDF2F6; border-radius: 12px; margin-bottom: 24px; }
.bk-field { display: flex; flex-direction: column; gap: 2px; }
.bk-field__k { font-size: 11px; color: var(--c-gray); }
.bk-field__v { font-size: 14px; font-weight: 600; color: var(--c-ink); }
.bk-vol { padding: 18px; background: #fff; border: 1px solid #EDF2F6; border-radius: 14px; margin-bottom: 16px; }
.bk-vol__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.bk-vol__no { font-size: 13px; font-weight: 700; color: #fff; background: #3F7FD6; border-radius: 8px; padding: 2px 10px; flex-shrink: 0; }
.bk-vol__title { font-size: 15px; font-weight: 600; color: var(--c-ink); }
.bk-vol__acq { display: flex; gap: 8px; font-size: 13px; color: var(--c-ink); margin-bottom: 8px; line-height: 1.6; }
.bk-vol__acq .bk-vol__k { color: var(--c-gray); flex-shrink: 0; }
.bk-vol__desc { font-size: 14px; line-height: 1.8; color: var(--c-ink); background: #F7FAFC; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.bk-vol__content .modal__kicker { margin-bottom: 10px; }
/* 书籍正文的富文本通道（观测枢原文含插图 / 居中诗行 / 加粗 / 表格时走这里） */
.bk-rich .cm-story { white-space: normal; }
.bk-rich .cm-story p { margin: 0 0 10px; }
.bk-rich .cm-story p:last-child { margin-bottom: 0; }
.bk-rich .cm-story p:empty { height: 6px; margin: 0; }
.bk-rich .rich-img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 12px auto; }
.bk-rich .rich-fig { display: block; }
.bk-rich .rich-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.bk-rich .rich-table td, .bk-rich .rich-table th { padding: 7px 10px; border: 1px solid #E4EBF3; vertical-align: top; }

/* --- 书籍左侧固定列（图标 + 目录）：滚动时整列钉在导航条下方不动 --- */
.bk-side {
  position: sticky; top: var(--sticky-top); align-self: start;
  display: flex; flex-direction: column; gap: 14px;
  max-height: calc(100vh - var(--sticky-top) - 18px);
}
.bk-side .bk-cover { flex: 0 0 auto; }
/* 目录卡片：卷多时只有列表内部滚动，卡片本身不被撑破 */
.bk-toc {
  flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 12px 4px 10px 12px; background: #fff; border: 1px solid #EDF2F6; border-radius: 14px;
}
.bk-toc__head { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; padding-right: 8px; margin-bottom: 8px; }
.bk-toc__cap { font-size: 13px; font-weight: 700; color: var(--c-ink); letter-spacing: .5px; }
.bk-toc__n { font-size: 11px; color: var(--c-gray); }
.bk-toc__list {
  /* ⚠️ 必须是 flex 容器，否则窄屏里的 flex-direction:row 是空操作（<ol> 默认 block，条目照样竖排） */
  display: flex; flex-direction: column;
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  list-style: none; margin: 0; padding: 0 8px 0 0;
  scrollbar-width: thin;
}
.bk-toc__list::-webkit-scrollbar { width: 6px; }
.bk-toc__list::-webkit-scrollbar-thumb { background: #DCE5EE; border-radius: 3px; }
.bk-toc__i {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; margin-bottom: 2px;
  border: 0; border-radius: 9px; background: transparent;
  font: inherit; text-align: left; color: var(--c-ink); cursor: pointer;
  transition: background .15s;
}
.bk-toc__i:hover { background: #F1F6FB; }
.bk-toc__ord {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: #7A8B99; background: #EFF3F7; border-radius: 6px;
}
.bk-toc__t { min-width: 0; font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-toc__i--on { background: #E7F0FA; }
.bk-toc__i--on .bk-toc__ord { color: #fff; background: #3F7FD6; }
.bk-toc__i--on .bk-toc__t { font-weight: 600; color: var(--c-primary-dark); }

@media (max-width: 760px) {
  .detail__book { grid-template-columns: 1fr; gap: 18px; padding: 8px 16px 48px; }
  .bk-cover { max-width: 200px; margin: 0 auto; }
  /* 窄屏：拆掉左列包裹，让目录直接成为网格子项 —— 这样它能跨整页 sticky（挂在导航条下） */
  .bk-side { display: contents; }
  .bk-toc {
    position: sticky; top: var(--sticky-top); z-index: 30;
    padding: 10px 12px; border-radius: 0 0 12px 12px;
    box-shadow: 0 6px 14px rgba(15, 45, 70, .07);
    /* ⚠️ 必须给 min-width:0：.bk-side 在窄屏是 display:contents，目录直接成了网格子项，
       而网格子项默认 min-width:auto 会被不换行的横条撑破轨道 → 整页横向溢出 */
    min-width: 0;
  }
  .bk-toc__head { margin-bottom: 8px; }
  .bk-toc__list {
    flex-direction: row; align-items: stretch;
    gap: 8px; padding: 0 0 4px; overflow-x: auto; overflow-y: hidden;
  }
  .bk-toc__list > li { flex: 0 0 auto; display: flex; }
  .bk-toc__i { width: auto; margin-bottom: 0; background: #F1F6FB; }
  .bk-toc__t { white-space: nowrap; overflow: visible; text-overflow: clip; }
  /* 窄屏详情工具栏：多出来的「阅读」控件会把这一行挤破，允许换行并让它独占一行居中 */
  .detail__bar { flex-wrap: wrap; row-gap: 10px; }
  .readctl { width: 100%; justify-content: center; }
}
.cm-item { padding: 12px 0; border-bottom: 1px solid #F0F4F8; }
.cm-item:last-child { border-bottom: 0; }
.cm-item-h { display: flex; align-items: center; gap: 8px; }
.cm-item-no {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.cm-item-name { font-size: 15px; font-weight: 600; color: var(--c-ink); }
.cm-item-type { font-size: 11px; color: var(--c-primary-dark); background: #EFF6F9; padding: 2px 8px; border-radius: 8px; }
.cm-item-desc { font-size: 13px; line-height: 1.7; color: var(--c-gray); margin-top: 6px; white-space: pre-wrap; }
.cm-voice { padding: 10px 0; border-bottom: 1px solid #F0F4F8; }
.cm-voice:last-child { border-bottom: 0; }
.cm-voice-scene { font-size: 13px; font-weight: 600; color: var(--c-primary-dark); margin-bottom: 4px; }
.cm-voice-text { font-size: 13px; line-height: 1.7; color: var(--c-gray); white-space: pre-wrap; margin: 0; }
.cm-empty { font-size: 13px; color: var(--c-gray); opacity: .7; padding: 12px 0; }

/* 名片 */
.cm-namecard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: #F7FAFC;
  border-radius: 16px;
}
.cm-namecard img {
  max-width: 280px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(20, 69, 107, .1);
}
.cm-namecard--text {
  text-align: center;
  padding: 32px 24px;
}
.cm-namecard-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink);
  font-style: italic;
}
.cm-namecard-full { font-size: 14px; color: var(--c-gray); margin-top: 6px; }
.cm-namecard-label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--c-primary);
  font-weight: 600;
  letter-spacing: .06em;
}
@media (max-width: 720px) {
  .modal__panel--char { width: 100%; }
  .modal__char { flex-direction: column; height: auto; }
  .modal__char-art { width: 100%; height: 300px; }
  .cm-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 详情页（占据整个页面，非弹窗） ===== */
.detail {
  min-height: calc(100vh - var(--nav-h));
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px 64px;
}
/* ⚠️ 2026-10-14：给**所有**详情页补一层页面底色兜底。
 *   起因：吸顶顶栏 .detail__bar 用 `background: inherit` 取页面底色，而一部分详情类型
 *   （char / weapon / item / domain / bag / version …）自己没设底色 → 继承到透明 →
 *   吸顶时正文会从顶栏里透出来。
 *   ⚠️ 必须用 `:where()`（特异性 = 0）：这样绝不会盖掉各 `.detail--X` 自己的底色
 *   （如 .detail--ach 的 #FBFCFD），只填空缺，且与本条规则在文件里的位置无关。 */
:where(.detail) { background: var(--c-bg, #F5F9FD); }
/* ⚠️ 2026-10-14 用户要求：「拖动滚动条时这里保持不动」→ 详情页顶栏（返回 / 面包屑 / 编辑）吸顶。
 *   吸附位 = 站点导航底部（--nav-h=72px，.nav 高度就是它）；层级 60 < #site-header(90)，
 *   避免顶栏压住导航；必须给**不透明**背景，否则下方正文会从顶栏里透出来。
 *   背景用 `inherit` —— 各 `detail--X` 详情页自己设了页面底色（#F7FAFD / #FBF9FF / #FDFBF5…），
 *   子元素直接继承父级 section 的背景色，20 多个详情类型一次全对，不用逐类维护颜色表。
 *   ⚠️ 关键改动：把原来的 `margin-bottom: 28px` 换成 **`padding-bottom: 28px`**，分隔线改由
 *   `::after` 画在 `bottom: 28px`（= 原来 margin 上沿，视觉位置一模一样）。
 *     为什么非改不可：吸顶时正文会滚过原来那 28px 的外边距，露出「被切一半的标题」；
 *     变成内边距后这 28px 属于顶栏自身 → 被不透明背景盖住，正文从下面滑过，干净。
 *   窄屏顶栏会换行变高，吸顶反而会遮住正文 → 退回静态，并把分隔线/内边距还原成原来的写法。 */
.detail__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0 28px;
  border-bottom: 0;
  margin-bottom: 0;
  position: sticky;
  top: var(--nav-h);
  z-index: 60;
  background: inherit;
}
.detail__bar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 28px; height: 1px;
  background: #EAEEF3;
}
@media (max-width: 1240px) {
  .detail__bar {
    position: static;
    padding-bottom: 0;
    margin-bottom: 28px;
    border-bottom: 1px solid #EAEEF3;
  }
  .detail__bar::after { display: none; }
}
.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-primary-dark);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: #EFF6F9;
  transition: background .2s;
}
.detail__back:hover { background: #DCEEF5; }
.detail__crumb { font-size: 14px; color: var(--c-gray); }

/* 角色详情：左侧大立绘 + 右侧信息区 */
.detail--char .detail__char {
  display: flex;
  gap: 0;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* 角色二级页立绘区：保持原尺寸、整体靠左，右侧文字区随之拓宽到绿框右边 */
.detail--char .detail__art {
  width: 420px;
}
/* 左侧：立绘大图（完整高清显示，点击放大预览） */
.detail__art {
  width: 560px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.detail__art-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
  display: block;
  cursor: zoom-in;
}
.detail__art-placeholder {
  font-size: 14px;
  color: var(--c-gray);
}
/* ⚠️ 2026-10-07：角色的 .detail__art 是 align-items:flex-start —— 新增/无立绘的角色
   会把「暂无立绘」顶在最上沿。占位状态给它一个撑满、居中的盒子（只影响占位，不影响真图）。 */
.detail__art:has(> .detail__art-placeholder) {
  align-items: center;
  border-radius: 18px;
  background: repeating-linear-gradient(45deg, #F3F7FB, #F3F7FB 12px, #EAF1F8 12px, #EAF1F8 24px);
  border: 1px dashed #D5E2EE;
}
.detail__art-placeholder::before {
  content: '🖼';
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-bottom: 10px;
}
.detail__art > .detail__art-placeholder { text-align: center; }
/* 武器详情：初始/突破 外观切换 */
.detail__art-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.detail__art-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid #E6E0D2;
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(180, 150, 90, .12);
}
.wa-tab {
  border: none;
  background: transparent;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 13px;
  color: #8a7d5e;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.wa-tab--active {
  background: linear-gradient(135deg, #C9A24B, #E0BB6A);
  color: #fff;
  font-weight: 600;
}
/* 武器详情：外观图取自观测枢「装备展示」，横向原图（约 600×490），容器需比图标宽 */
.detail__art--weapon {
  align-items: center;
  justify-content: center;
  width: 320px;
  min-height: 0;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 16px;
  background: linear-gradient(180deg, #F8F0E3, #EDE4D6);
}
.detail__art--weapon .detail__art-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-position: center;
}
/* 初始外观 / 突破外观：两张图都在 DOM 里，靠 data-state 切换显示（JS 不用换 src） */
.detail__art--weapon[data-state="initial"] [data-art-img="ascended"],
.detail__art--weapon[data-state="ascended"] [data-art-img="initial"] { display: none; }
.detail__art--weapon[data-state="initial"] .detail__art-img,
.detail__art--weapon[data-state="ascended"] .detail__art-img {
  filter: drop-shadow(0 6px 18px rgba(120, 90, 40, .18));
}
.detail__art-note {
  margin: 0;
  font-size: 11px;
  color: var(--c-gray);
  opacity: .8;
  text-align: center;
  max-width: 420px;
}
/* 武器外观：静态首帧 → 按需播放动图（动图 ≈1.2MB，不默认加载） */
.wa-play {
  border: 1px solid #E6E0D2;
  background: #fff;
  color: #8a7d5e;
  border-radius: 999px;
  padding: 5px 15px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.wa-play:hover { background: #FBF6EC; }
.wa-play:disabled { cursor: progress; opacity: .85; }
.wa-play[data-state="anim"] { color: #6B3D14; background: #FFF6E8; border-color: #E3D2AE; }
/* 外观图加载失败：不隐藏主视觉，给一个可点的重试入口 */
.art-retry {
  border: 1px dashed #C9A24B;
  background: #FFFBF2;
  color: #8a7d5e;
  border-radius: 10px;
  padding: 10px 16px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.art-retry:hover { background: #FFF4E0; color: #6B3D14; }
/* 右侧：信息区 */
.detail__info {
  flex: 1;
  min-width: 0;
  padding: 32px 36px 36px;
  overflow-y: auto;
  max-height: calc(100vh - var(--nav-h) - 120px);
}
.detail__title {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 标题行第一行：角色名 */
.detail__title-name {
  font-size: 34px;
  line-height: 1.2;
}
/* 标题行第二行：星级（继承 ccard__stars 样式） */
.detail__title .ccard__stars {
  font-size: 18px;
  letter-spacing: 2px;
}
/* 标题行第三行：副标题「称号」 */
.detail__title-sub {
  font-family: 'Noto Serif SC', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 18px;
  color: var(--c-primary-dark);
  letter-spacing: .02em;
}
.detail__char-full { font-size: 15px; color: var(--c-gray); margin-top: 6px; }
.detail__char-title { font-size: 16px; color: var(--c-primary-dark); font-style: italic; margin-top: 4px; }

/* 普通条目详情：封面 + 信息 */
.detail--item .detail__item {
  display: flex;
  gap: 44px;
  align-items: flex-start;
}
.detail__item-cover {
  width: 300px;
  height: 380px;
  flex-shrink: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.detail__item-initial {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 96px;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.detail__item-element {
  position: absolute;
  top: 16px; left: 16px;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .25);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  backdrop-filter: blur(2px);
}
.detail__item-info { flex: 1; min-width: 0; }
.detail__item-info .detail__title { font-size: 30px; }
.detail__sub { font-size: 15px; color: var(--c-gray); margin-top: 8px; }
.detail__desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-gray);
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #EEF2F6;
  white-space: pre-wrap;
}

/* 版本详情：标题横幅 */
/* 版本详情页「标题行」：一行写完「版本号 · 版本名 · 版本区域」，
 * **不要背景框、不要底色**（用户 2026-10-05 明确要求）。
 * 两种形态：
 *   · .detail__hero--onart  有立绘 → 浮在版本立绘图片的**底部右侧**（叠在图上）
 *   · 无 --onart            没有立绘 → 普通一行，跟在面包屑下方
 */
.detail__hero {
  display: flex;
  justify-content: flex-end;
  padding: 0 4px;
}
/* 一行：版本号 · 版本名 · 区域 */
.detail__hero-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
}
.detail__hero-ver { font-size: 15px; font-weight: 600; color: var(--c-ink); opacity: .72; letter-spacing: .05em; white-space: nowrap; }
.detail__hero-title {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--c-ink);
  line-height: 1.2;
}
.detail__hero-region { font-size: 15px; color: var(--c-ink); opacity: .72; white-space: nowrap; }
/* 分隔点（·）：版本号 / 版本名 / 区域 之间 */
.detail__hero-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .32;
  align-self: center; flex: 0 0 auto;
}
.detail__hero-tag {
  align-self: flex-start;
  margin-top: 8px;
  background: rgba(255, 255, 255, .2);
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

/* ── 版本详情：主图（65% 居中）+ 右侧缩略图轨 ──────────────────
 * 2026-10-20 用户要求：
 *   ① 图右下角那行「版本 x.x · 名称 · 地区」去掉 —— 不再往画面上叠字；
 *   ② 原来贴在图下方的缩略图条，挪到图片**右侧**竖排。
 * 主图宽度仍是内容宽的 65%（上一轮刚定的），缩略图轨绝对定位落在右侧留白里，
 * 所以图片尺寸一点没缩，只是把下方那条横带搬到了旁边。
 * ⚠️ 缩略图轨用 top/bottom 拉满 .detail__media（高度 = 图片高度）；图多时轨自己滚动，
 *    既不会把整块顶高，也不会跑出图片范围。 */
.detail__media { position: relative; margin: 0 0 28px; }
.detail__banner { position: relative; display: flex; flex-direction: column; align-items: center; width: 65%; margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); background: #0E2A3A; }
/* 模糊背景层：竖图/窄图时填充两侧，避免大片纯色空白 */
.detail__banner-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(28px) saturate(1.15); opacity: .5; transform: scale(1.08); }
.detail__banner-img { display: block; position: relative; z-index: 1; margin: 0 auto; width: auto; max-width: 100%; max-height: 460px; object-fit: contain; cursor: zoom-in; }
/* 横图（含 2560×1440 这类 Key Visual）：在 65% 宽的 stage 内铺满，按比例展开高度。
 * 原图 2560 宽 → 65% 下仍有 2.8x 余量，不会糊。 */
.detail__banner--wide .detail__banner-img { width: 100%; max-height: none; }
/* 竖图（版本立绘 380×712）：限高居中，背景层补满 */
.detail__banner--tall .detail__banner-img { max-height: 680px; }

/* 大图上的左右切换 + 张数（只在「版本图有多张」时出现）
 * ⚠️ 按钮必须挂在 .detail__banner-stage 里、并且**不能**带 data-zoom：
 *    全站灯箱是 document 级的 [data-zoom] 点击委托，箭头若在 data-zoom 元素内部会被一起接管。 */
.ver-nav {
  position: absolute; top: 50%; z-index: 4;
  width: 44px; height: 44px; padding: 0 0 3px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: rgba(8, 22, 34, .42);
  color: #fff; font-size: 26px; font-weight: 400; line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(4, 16, 26, .28);
  transform: translateY(-50%);
  transition: background .16s, border-color .16s, transform .16s;
}
.ver-nav:hover { background: rgba(8, 22, 34, .70); border-color: rgba(255, 255, 255, .62); }
.ver-nav:active { transform: translateY(-50%) scale(.94); }
.ver-nav--prev { left: 16px; }
.ver-nav--next { right: 16px; }
.ver-nav__count {
  position: absolute; right: 16px; top: 14px; z-index: 4;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(8, 22, 34, .45); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .03em; line-height: 1.6;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* 缩略图（大图 >1024px 时：右侧竖排；≤1024px 回到图下方横条，见媒体查询） */
.ver-thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 65%; margin: 0 auto 26px; padding: 10px 12px; background: var(--c-bg, #F5F9FD); border: 1px solid #E6EDF4; border-radius: 0 0 16px 16px; box-sizing: border-box; }
.ver-thumbs--rail {
  position: absolute; top: 0; bottom: 0;
  left: calc(50% + 32.5% + 14px);
  width: 108px;
  flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
}
.ver-thumbs--rail .ver-thumb { flex: 0 0 auto; }
.ver-thumbs--rail .ver-thumbs__count { margin: 0; text-align: center; font-size: 11.5px; }

.ver-thumb { position: relative; width: 108px; height: 62px; padding: 0; border: 2px solid #D8E3EE; border-radius: 9px; overflow: hidden; cursor: pointer; background: #F2F5F9; box-shadow: 0 1px 4px rgba(6, 20, 30, .10); transition: border-color .15s, transform .15s, box-shadow .15s; }
.ver-thumb:hover { transform: translateY(-2px); border-color: #9FBBD8; box-shadow: 0 3px 10px rgba(6, 20, 30, .16); }
.ver-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ver-thumb--active { border-color: #FFB300; box-shadow: 0 0 0 2px rgba(255, 179, 0, .30), 0 1px 4px rgba(6, 20, 30, .14); }
.ver-thumb__badge { position: absolute; left: 4px; top: 4px; z-index: 2; background: #FFD37E; color: #5a3d00; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 5px; }
.ver-thumbs__count { margin-left: 2px; color: var(--c-ink); opacity: .55; font-size: 12px; white-space: nowrap; }

/* 窄屏：65% 会把图压得太小 → 回到满宽；右侧没有留白放缩略图轨了，轨回到图下方横排。
 * ⚠️ 这段必须写在 .ver-thumbs 基础规则之后：媒体查询不提升特异性，
 *    写前面会被后面的基础规则覆盖（2026-10-20 就是这样漏过一次）。 */
@media (max-width: 1024px) {
  .detail__banner { width: 100%; }
  .detail__media--multi .detail__banner { border-radius: 20px 20px 0 0; }
  .ver-thumbs--rail {
    position: static; left: auto; width: 100%;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 16px; margin: 0 auto;
    background: var(--c-bg, #F5F9FD); border: 1px solid #E6EDF4; border-top: 0;
    border-radius: 0 0 16px 16px;
    overflow: visible;
  }
}
@media (max-width: 720px) {
  .ver-thumb { width: 96px; height: 55px; }
  .ver-thumbs--rail { gap: 8px; padding: 10px 12px; }
  .ver-nav { width: 36px; height: 36px; font-size: 22px; }
  .ver-nav--prev { left: 10px; }
  .ver-nav--next { right: 10px; }
  .ver-nav__count { right: 10px; top: 10px; font-size: 11px; padding: 2px 8px; }
}

/* 编辑弹窗：版本图集管理（多张） */
.gal-row { display: flex; flex-wrap: wrap; gap: 10px; }
.gal-item { position: relative; width: 132px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid #E2E9F1; background: #F2F5F9; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-item--cover { border-color: #5B86E5; box-shadow: 0 0 0 2px rgba(91, 134, 229, .18); }
.gal-item__badge { position: absolute; left: 4px; top: 4px; z-index: 2; background: #5B86E5; color: #fff; font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 5px; }
.gal-item__ops { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; justify-content: center; padding: 3px 0; background: rgba(10, 20, 30, .55); opacity: 0; transition: opacity .15s; }
.gal-item:hover .gal-item__ops { opacity: 1; }
.gal-btn { width: 24px; height: 20px; padding: 0; border: none; border-radius: 6px; background: rgba(255, 255, 255, .92); color: #22303f; font-size: 12px; line-height: 1; cursor: pointer; }
.gal-btn--del { background: #F7C9C9; color: #9B2C2C; }
.gal-add { width: 132px; height: 84px; border: 1.5px dashed #BFD6EC; border-radius: 10px; background: #F8FBFE; display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; color: #5B86E5; font-size: 13px; font-weight: 600; }
.gal-add small { display: block; margin-top: 2px; color: #8fa5bb; font-weight: 400; font-size: 11px; }
.gal-add:hover { background: #EFF7FE; border-color: #5B86E5; }

/* 版本详情：本版本实装内容 */
.vc-block { margin-top: 30px; }
.vc-block__title { font-family: 'Noto Serif SC', serif; font-size: 22px; font-weight: 700; color: var(--c-ink); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.vc-block__count { background: var(--c-primary); color: #fff; font-size: 13px; font-weight: 600; border-radius: 20px; padding: 2px 10px; }
.vc-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.vc-item { width: 132px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; }
.vc-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(20, 69, 107, .16); }
.vc-item__art { height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vc-item__art img { width: 100%; height: 100%; object-fit: cover; }
/* 「官方图标」型格子：与分类页的 .ccard__art--charicon / 敌人肖像 保持同一种观感 ——
 * 方形、透明底、图标完整不裁切、四周留白克制（旧版 padding 14px 会把 120px 图标压得很小，
 * 且外层还带着分类色底板，看起来和分类页里的「无底板图标」不是一套东西）。
 * ⚠️ 图标本身自带透明通道，所以这里**不要背景色**；底板色由调用方的 bg 参数决定（已在 JS 里传 transparent 之外的浅色）。*/
.vc-item__art--icon { height: 124px; padding: 6px; background: transparent !important; }
.vc-item__art--icon img { object-fit: contain; max-width: 100%; max-height: 100%; }
.vc-item__e { font-size: 28px; font-weight: 700; color: rgba(20, 69, 107, .5); }
.vc-item__name { font-size: 14px; font-weight: 600; color: var(--c-ink); padding: 8px 10px 2px; }
.vc-item__sub { font-size: 12px; color: var(--c-gray); padding: 0 10px 10px; }
.vc-item--text { padding: 16px; width: 168px; }
.vc-item--text .vc-item__name { padding: 0 0 4px; }
/* 版本详情：分类速览 + 分段展开 */
/* 本版本收录（2026-10-20 用户要求「参考生物志」）：
 * 直接沿用生物志那排板块 chip —— [全部 370][角色 28][武器 88]…，
 * 选中红底白字、未选粉底红字、条数用小号灰字，和生物志完全一致。
 * 行为也一致：点一下只看该类，点「全部」复原（原来是滚动跳转）。 */
.vc-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.vc-sum__total { font-size: 12.5px; color: #7A8794; letter-spacing: .02em; white-space: nowrap; }
.vc-sum__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-sum__chips .chip { padding: 7px 15px; font-size: 13px; }
.vc-sum__chips .chip__n { font-size: 10.5px; opacity: .7; margin-left: 5px; font-weight: 500; }
/* 筛选后其余板块靠 hidden 收起；.vc-block 无 display 声明，这里补一条兜底 */
.vc-block[hidden] { display: none; }
.vc-extra { display: none; margin-top: 16px; }
.vc-block--open .vc-extra { display: flex; }
.vc-more { margin-top: 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--c-primary); background: none; border: 1px dashed #BFD6EC; border-radius: 20px; padding: 6px 16px; cursor: pointer; }
.vc-more:hover { background: #F2F8FE; }
.vc-empty { margin-top: 26px; font-size: 15px; color: var(--c-gray); }

/* ===== 背包卡（背包图鉴） ===== */
.ccard--bag { width: 132px; padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; }
.ccard__art--bag { position: relative; height: 132px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #F6FAF0, #E9F2DF); }
.ccard__art--bag img { width: 76%; height: 76%; object-fit: contain; }
.ccard__bag-ph { font-size: 34px; opacity: .45; }
.ccard__stars--bag { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 11px; letter-spacing: 1px; color: #E8A33D; background: rgba(255, 255, 255, .78); padding: 1px 0; }
.ccard--bag .ccard__name { font-size: 13px; line-height: 1.35; }
.ccard--bag .ccard__info { font-size: 11px; }

/* 背包详情页（与敌人/NPC/地图文本一致的左图右文布局） */
.detail--bag .detail__item { display: flex; gap: 40px; align-items: flex-start; }
.detail--bag .detail__item-cover { width: 300px; height: 300px; flex-shrink: 0; border-radius: 20px; position: relative; overflow: hidden; box-shadow: var(--shadow-card); background: linear-gradient(160deg, #F7FBF2, #E6F0DA); display: flex; align-items: center; justify-content: center; }
.detail--bag .detail__title { font-size: 30px; }
@media (max-width: 900px) {
  .detail--bag .detail__item { flex-direction: column; }
  .detail--bag .detail__item-cover { width: 100%; max-width: 300px; height: 300px; }
}
.detail--bag .detail__item-cover--bag img { width: 74%; height: 74%; object-fit: contain; cursor: zoom-in; }
.detail__title-star { color: #E8A33D; font-size: 16px; letter-spacing: 2px; vertical-align: middle; }
.bag-text { font-size: 14px; line-height: 1.75; color: #33465c; }
.bag-text p { margin: 0 0 4px; }
.bag-text p:last-child { margin-bottom: 0; }

/* 未找到 */
.detail--empty { display: flex; flex-direction: column; gap: 24px; }
.detail__empty { font-size: 16px; color: var(--c-gray); padding: 60px 0; }
.detail__empty a { color: var(--c-primary); font-weight: 600; }

/* 图片预览灯箱 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8, 12, 18, .92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
  animation: lbIn .18s ease;
}
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 24px;
}
/* ⚠️ 这里刻意**不设** max-width / max-height。
 * 它们会盖掉 JS 设的 width/height（CSS 属性优先级高于行内 width），
 * 导致「点了放大镜、面板写着 100%，图片高度却纹丝不动」（旧版 max-height:82vh 就是这个坑：
 * 600×1520 的立绘在 900px 高的窗口里 100% 应显示 1520px 高，却被永远压在 738px）。
 * 尺寸完全交给 JS 按 naturalWidth×scale 计算；「适应屏幕」由 JS 算出 fitScale。
 * flex 居中下尺寸超出舞台时也不会被裁（flex 子项 min-width/height 为 auto）。 */
.lightbox__img {
  /* ⚠️ 全局 `img { max-width: 100% }`（见文件开头的 reset）会**单独**把宽度压回舞台宽，
   * 高度却照旧 → 放大后图被横向压扁。所以这里必须显式解除。 */
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  cursor: zoom-in;
}
.lightbox__bar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, .55);
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.lb-btn {
  border: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.lb-btn:hover { background: rgba(255, 255, 255, .26); }
.lb-btn--fit { width: auto; padding: 0 14px; font-size: 13px; border-radius: 999px; }
.lightbox__zoom {
  color: #fff;
  min-width: 52px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.lightbox__hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}
body.lb-open { overflow: hidden; }

@media (max-width: 900px) {
  .detail--char .detail__char,
  .detail--item .detail__item { flex-direction: column; }
  .detail--char .detail__art,
  .detail--weapon .detail__art { width: 100%; max-height: none; }
  .detail__info { max-height: none; padding: 24px 20px; }
  .detail__item-cover { width: 100%; max-width: 300px; height: 300px; }
  .detail__title { font-size: 28px; }
  .detail { padding: 0 16px 64px; }
}

/* ===== 编辑 / 新增 / 导入 ===== */
.detail__edit {
  margin-left: auto;
  border: 1px solid #5B86E5; background: #fff; color: #5B86E5;
  font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
  cursor: pointer; transition: .15s;
}
.detail__edit:hover { background: #5B86E5; color: #fff; }
.chip--new {
  margin-left: 8px; border: 1px dashed #5B86E5; color: #5B86E5; background: #fff; cursor: pointer;
}
.chip--new:hover { background: #5B86E5; color: #fff; }

/* 浮动工具条 */
#fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
#fab button {
  border: none; border-radius: 999px; padding: 10px 16px; font-size: 13px; font-weight: 600;
  background: linear-gradient(135deg, #5B86E5, #36D1DC); color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px rgba(40, 80, 160, .28); transition: .15s; white-space: nowrap;
}
#fab button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(40, 80, 160, .34); }

/* 2026-10-17：悬浮列里的「新增 / 导入 / 立绘 / 备份 / 还原」已去掉（入口统一在顶部 cattools），
   这里只剩窄屏兜底搜索按钮（宽屏 .fab__s 为 display:none）。 */
@media (max-width: 600px) {
  #fab { right: 10px; bottom: 10px; gap: 6px; }
  #fab button { padding: 8px 12px; font-size: 12px; }
}

/* 弹窗 */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(20, 30, 50, .45);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto;
}
.modal {
  width: min(720px, 100%); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; max-height: 90vh; animation: modalIn .18s ease;
}
@keyframes modalIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid #EEF2F7; border-bottom: 1px solid #EEF2F7; }
.modal__title { font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 18px; color: #1c2535; }
.modal__close { border: none; background: #F2F5F9; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #5a6b80; }
.modal__close:hover { background: #E6EBF2; }
.modal__body { padding: 18px 20px; overflow: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid #EEF2F7; }
.btn-ghost { border: 1px solid #D7DEE8; background: #fff; color: #5a6b80; padding: 9px 18px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.btn-primary { border: none; background: linear-gradient(135deg, #5B86E5, #36D1DC); color: #fff; padding: 9px 20px; border-radius: 10px; cursor: pointer; font-weight: 700; }
.btn-danger { border: 1px solid #F0C4C4; background: #fff; color: #D9534F; padding: 9px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.btn-danger:hover { background: #D9534F; color: #fff; border-color: #D9534F; }
.btn-mini { padding: 6px 12px; font-size: 13px; }
.modal__spacer { flex: 1; }
/* 分类页「批量导入」按钮 */
.chip--imp { margin-left: 8px; border: 1px dashed #2FA98C; color: #2FA98C; background: #fff; cursor: pointer; }
.chip--imp:hover { background: #2FA98C; color: #fff; }

/* 图鉴页顶部工具条（导航栏下方右上角）：新增 / 导出 / 导入 / 立绘管理 / 备份
   ⚠️ .chip--new / .chip--imp 自带 margin-left:8px（原先是接在筛选 chip 后面的），
      这里统一归零，不然整排会左移、右对齐会歪。 */
.cattools {
  display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  gap: 8px; margin: 10px 0 2px;
}
.cattools .chip { margin: 0; }
.cattools .chip--new { border-style: solid; }
.cattools__b { border: 1px solid #DDD3C0; color: #6B5B44; background: #FFFFFF; }
.cattools__b:hover { background: #F6EEDF; color: #3F3428; opacity: 1; }
@media (max-width: 600px) {
  .cattools { gap: 6px; margin: 8px 0 0; }
  .cattools .chip { padding: 3px 9px; font-size: 12px; }
}
/* 弹窗图片行 */
.img-row { display: flex; gap: 14px; align-items: flex-start; }
.img-prev { width: 92px; height: 92px; border-radius: 10px; background: #F2F5F9; border: 1px solid #E2E9F1; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.img-prev img { width: 100%; height: 100%; object-fit: cover; }
.img-prev span { font-size: 12px; color: #9AA7B6; }
.img-ops { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ef-hint { font-size: 13px; color: #6b7a90; line-height: 1.7; margin: 0 0 14px; }
/* 分类导入弹窗 */
.imp-ops { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 13px; }
.imp-text { width: 100%; min-height: 150px; border: 1px solid #DCE3EC; border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 13px; line-height: 1.5; resize: vertical; box-sizing: border-box; background: #FBFCFE; }
.imp-text:focus { outline: none; border-color: #5B86E5; background: #fff; }
.imp-result { margin-top: 12px; font-size: 13px; min-height: 18px; color: #5a6b80; }
.imp-result--ok { color: #1F8A5B; font-weight: 600; }
.imp-result--err { color: #D9534F; font-weight: 600; }

/* 表单 */
.ef-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ef { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.ef label { font-size: 12px; color: #6b7a90; font-weight: 600; }
.ef input, .ef textarea, .le-in, .kv-k, .kv-v {
  border: 1px solid #DCE3EC; border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; color: #1c2535; background: #FBFCFE; width: 100%; box-sizing: border-box;
}
.ef input:focus, .ef textarea:focus, .le-in:focus, .kv-k:focus, .kv-v:focus { outline: none; border-color: #5B86E5; background: #fff; }
.ef textarea, .le-in { resize: vertical; min-height: 64px; line-height: 1.5; }

/* 动态行（富文本列表 / 字段） */
.le-block { margin-top: 16px; border-top: 1px dashed #E4EAF1; padding-top: 12px; }
.le-label { font-size: 13px; font-weight: 700; color: #34465c; margin-bottom: 8px; }
.le-rows { display: flex; flex-direction: column; gap: 8px; }
.le-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.le-row .le-in { flex: 1 1 160px; min-width: 140px; min-height: 40px; }
.le-add { margin-top: 8px; border: 1px dashed #5B86E5; background: #fff; color: #5B86E5; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; }
.le-add:hover { background: #EAF1FF; }
.le-del { border: none; background: #FDECEC; color: #D9534F; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px; align-self: flex-start; flex: 0 0 auto; }
.le-del:hover { background: #FAD7D7; }
.kv-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: start; margin-bottom: 6px; }

/* ===== 详情页正文编辑器（任务类 sections，2026-10-17） =====
   每个小节一张米色卡：标题行（节序 / 可编辑标题 / 类型 / 删除）+ 内容。
   数据结构与详情页渲染一一对应，所以这里不做任何「看起来像」的样式，只求能改。 */
.le-sub { margin-left: 8px; font-size: 12px; font-weight: 400; color: #8494a8; }
.sec {
  border: 1px solid #E8E0D2; border-radius: 8px; background: #FCFAF5;
  padding: 10px 12px; margin: 0 0 10px;
}
.sec--dlg > summary.sech { cursor: pointer; list-style: none; }
.sec--dlg > summary.sech::-webkit-details-marker { display: none; }
.sec--dlg > summary.sech::before { content: '▸'; color: #9C8E78; font-size: 11px; }
.sec--dlg[open] > summary.sech::before { content: '▾'; }
.sec__body { margin-top: 8px; }
.sech { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.sech__t { flex: 0 0 auto; font-size: 12px; color: #9C8E78; white-space: nowrap; }
.sech__title {
  flex: 1 1 auto; min-width: 0; border: 1px solid #DCE3EC; border-radius: 7px;
  padding: 5px 9px; font-size: 13px; font-family: inherit; color: #1c2535; background: #fff;
}
.sech__title--ro { border: none; background: transparent; padding-left: 0; font-weight: 600; color: #34465c; }
.sech__k {
  flex: 0 0 auto; font-size: 11px; color: #8C7B60; background: #F3EBDC;
  border-radius: 10px; padding: 1px 8px; white-space: nowrap;
}
.sech__del { width: 26px; height: 26px; font-size: 11px; }
/* 「详情页不显示」的节（世界任务的 kv / 攻略推荐）：灰一档，仍可编辑 —— 不隐藏是为了保存时不丢数据 */
.sech__off { flex: 0 0 auto; font-size: 11px; color: #B0762B; background: #FBEFD9; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.sec--off { background: #F7F5F0; border-style: dashed; }
.sec--off .sec__body, .sec--off .kv-rows, .sec--off textarea { opacity: .8; }
.sec .kv-rows { margin-top: 2px; }
.sec textarea.le-in { min-height: 58px; margin-bottom: 6px; }
/* 剧情对话：类型 / 说话人 / 台词 / 删除 四列；窄屏把台词换到下一行 */
.dlg-row { display: grid; grid-template-columns: 92px 140px 1fr 32px; gap: 6px; align-items: start; margin-bottom: 8px; }
.dlg-row .dlg-k, .dlg-row .dlg-who {
  border: 1px solid #DCE3EC; border-radius: 7px; padding: 6px 8px; font-size: 13px;
  font-family: inherit; background: #fff; color: #1c2535; width: 100%; box-sizing: border-box;
}
.dlg-row .dlg-html {
  border: 1px solid #DCE3EC; border-radius: 7px; padding: 7px 9px; font-size: 13px;
  font-family: inherit; line-height: 1.5; background: #fff; color: #1c2535;
  min-height: 48px; resize: vertical; width: 100%; box-sizing: border-box;
}
@media (max-width: 900px) {
  .dlg-row { grid-template-columns: 84px 1fr 32px; }
  .dlg-row .dlg-html { grid-column: 1 / -1; }
}

/* ===== 结构型正文编辑器（第二批 2026-10-17）=====
   圣遗物故事 / 书籍各卷 / 秘境 blocks / 剧院 sections / 地理志表 / B站 阶段剧情。
   统一是「一块米色卡 + 标题行 + 若干字段」，与第一批 .sec 同一视觉语言。 */
.sideblk {
  border: 1px solid #E8E0D2; border-radius: 8px; background: #FCFAF5;
  padding: 10px 12px; margin-bottom: 10px;
}
.sideblk__h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sideblk__h b { font-size: 13px; color: #34465c; }
.sideblk__h .le-del { margin-left: auto; }
.sidesub { font-size: 12px; font-weight: 700; color: #9C8E78; margin: 10px 0 6px; }
.sides .ef { margin-bottom: 8px; }
.sides textarea { min-height: 76px; }
.sides textarea[data-relic-story], .sides textarea[data-vol-content] { min-height: 150px; }
.volblk .le-in { min-height: 110px; }
.domblk .le-in, .thsecblk .le-in { min-height: 90px; }

/* 阶段剧情：阶段 → 步骤 → 节点 三层缩进 */
.stageblk { padding: 8px 12px; }
.stageblk__s { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; margin-bottom: 6px; }
.stageblk__s::-webkit-details-marker { display: none; }
.stageblk__s::before { content: '▸'; color: #9C8E78; font-size: 11px; }
.stageblk[open] > .stageblk__s::before { content: '▾'; }
.stageblk__n { font-size: 13px; color: #34465c; }
.ssec { border-top: 1px dashed #E4EAF1; margin-top: 10px; padding-top: 8px; }
.ssec__h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ssec__h input { flex: 1 1 auto; }
.ssec__n { flex: 0 0 auto; font-size: 12px; color: #9C8E78; white-space: nowrap; }
.snodes { margin-top: 6px; border-left: 2px solid #E8E0D2; padding-left: 8px; }
.snode { margin-bottom: 6px; }
.snode__k {
  display: inline-block; min-width: 20px; text-align: center; font-size: 10px; font-weight: 700;
  color: #7A6A50; background: #F1EADB; border-radius: 4px; padding: 1px 4px; margin-right: 6px;
}
.snode__row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.snode__row input { flex: 1 1 140px; }
.snode__row select { flex: 0 0 92px; }
.snode textarea.snode__ta { width: 100%; min-height: 44px; box-sizing: border-box; }
.snode__sep { font-size: 12px; color: #9C8E78; }
.sopt { border-left: 2px dashed #E0D8C6; padding-left: 8px; margin: 6px 0 6px 12px; }
.sopt__n { flex: 0 0 auto; font-size: 11px; color: #9C8E78; white-space: nowrap; }
.stab { border-left: 2px solid #E6EDF7; padding-left: 8px; margin: 6px 0 6px 12px; }

/* 地理志：可编辑的分层地名表 */
.ga-editwrap { overflow-x: auto; }
.ga-edittable { width: 100%; border-collapse: collapse; font-size: 12px; }
.ga-edittable th { background: #F3EDE2; color: #6B5C44; font-weight: 700; padding: 5px 6px; white-space: nowrap; border: 1px solid #E4DCCB; }
.ga-edittable td { border: 1px solid #E4DCCB; padding: 2px; }
.ga-edittable td input { width: 100%; box-sizing: border-box; border: 1px solid transparent; background: #fff; padding: 5px 6px; font-size: 12px; border-radius: 4px; }
.ga-edittable td input:focus { outline: none; border-color: #5B86E5; }
.ga-edittable td:nth-child(1) input, .ga-edittable td:nth-child(2) input { min-width: 96px; }
.ga-edittable td:nth-child(3) input, .ga-edittable td:nth-child(4) input { min-width: 96px; }
.ga-edittable td:nth-child(5) input { min-width: 110px; }
.ga-edittable td:nth-child(6) input { min-width: 110px; }
.ga-edittable td:nth-child(7) input { min-width: 52px; }


/* ===== 敌人卡（生物志） =====
 * 2026-10-18 用户：「图标有点太大了，要和角色图鉴的大小一致」。
 * 角色卡实测值是 156×（图标 114×114，无底板、无边框、文字区在下方居中）——
 * 这里逐项对齐：删掉原来的 150 宽 + 米绿渐变 + 白底文字块 + 圆角投影，
 * 图标从「铺满整卡」改成 114 的方形透明图。 */
.ccard--enemy {
  width: 156px;
  padding: 0;
  overflow: visible;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.ccard--enemy:hover { transform: none; box-shadow: none; }
.ccard--enemy .ccard__art--enemy {
  position: relative;
  width: 114px;
  height: 114px;
  aspect-ratio: auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;   /* 图标本身是 160px RGBA 透明底方图，不需要衬底 */
}
.ccard--enemy .ccard__art--enemy img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transition: transform .28s ease;
  display: block;
}
.ccard--enemy:hover .ccard__art--enemy img { transform: translateY(-3px) scale(1.03); }
.ccard--enemy .ccard__enemy-ph { font-size: 40px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
/* 没有实装图的那 12 只（bwiki 图鉴页未收录、观感枢只给了地图截图）→ 统一用类型 tab 的怪物剪影占位，
   别再退回 emoji（岩石/爪印混在照片墙里一眼假） */
.ccard--enemy .ccard__enemy-phimg { width: 74px; height: 74px; object-fit: contain; opacity: .45; }
.ccard--enemy .ccard__badge { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
.ccard--enemy .ccard__main { padding: 0; background: transparent; align-items: center; text-align: center; gap: 3px; }
.ccard--enemy .ccard__name { font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
.ccard--enemy .ccard__info { font-size: 11.5px; color: var(--c-gray); margin-top: 2px; }

/* ===== 敌人详情页（2026-10-18 第八轮：照动物详情页改成「一张居中表」）=====
 * 结构 = 名称横条 → 图区（观测枢动图 320×400 ＋ B站 256 方图，并排且都在表内）
 *      → 怪物类型/分类/类别/元素属性/攻击属性/出现地点/刷新时间/实装版本/TAG
 *      → 掉落素材（横排 chip，可点进站内图鉴）→ 图鉴介绍。
 * ⚠️ 第四轮那套 .enemy-hero 三栏（动图｜基本信息｜掉落卡）已彻底下线，别再加回来。 */
.detail--enemy { background: #FBFCFD; }
.enemy-tbl {
  max-width: 1000px;
  margin: 26px auto 40px;
  border: 1px solid #DCD8CC;
  background: #fff;
  box-shadow: 0 1px 3px rgba(60, 50, 30, .05);
}
.enemy-tbl__name {
  background: #E9E6DC; color: #4B463A;
  font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 15px;
  text-align: center; padding: 9px 12px;
  border-bottom: 1px solid #DCD8CC;
}
/* 图区：动图（320×400 原尺寸）与静态方图并排居中，两张都在表格里 */
.enemy-tbl__media {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 32px; padding: 22px 18px; background: #F7F6F2;
  border-bottom: 1px solid #E2DDD0;
}
.enemy-tbl__fig { margin: 0; display: flex; align-items: center; justify-content: center; }
.enemy-tbl__fig--anim { width: 320px; height: 400px; border-radius: 8px; overflow: hidden; background: #E9F0F5; }
.enemy-tbl__fig--anim img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; cursor: zoom-in; }
.enemy-tbl__fig--still { width: 320px; height: 320px; border-radius: 8px; overflow: hidden; background: #F3F1EA; }
.enemy-tbl__fig--still img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.enemy-tbl__ph { font-size: 44px; opacity: .35; padding: 70px 0; }
.enemy-tbl__row { display: grid; grid-template-columns: 108px minmax(0, 1fr); border-bottom: 1px solid #E9E5DA; }
.enemy-tbl__row:last-child { border-bottom: 0; }
.enemy-tbl__k {
  background: #EFEDE4; color: #6E6A5E; font-size: 13px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 9px 8px; border-right: 1px solid #E2DDD0;
}
.enemy-tbl__v { padding: 10px 16px; font-size: 14px; line-height: 1.75; color: #3C4652; min-width: 0; }
.enemy-tbl__v p { margin: 0 0 9px; }
.enemy-tbl__v p:last-child { margin-bottom: 0; }
.enemy-tbl__none { color: #A8B4C0; }
/* ===== 物产详情页（2026-10-18）=====
 * 与敌人 / 动物详情页同一套「单表居中」：名称条 → 图标 → 信息行 → 介绍。
 * ⚠️ 图标列单独占一行（240×240 居中），不做左右并排 —— 物产只有一张图。 */
.detail--product { background: #FBFCFD; }
.product-tbl {
  max-width: 1000px;
  margin: 26px auto 40px;
  border: 1px solid #DCD8CC;
  background: #fff;
  box-shadow: 0 1px 3px rgba(60, 50, 30, .05);
}
.product-tbl__name {
  background: #E9E6DC; color: #4B463A;
  font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 15px;
  text-align: center; padding: 9px 12px;
  border-bottom: 1px solid #DCD8CC;
}
.product-tbl__stars { margin-left: 8px; color: #D9A441; font-size: 13px; letter-spacing: 1px; }
.product-tbl__media {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 18px; background: #F7F6F2;
  border-bottom: 1px solid #E2DDD0;
}
.product-tbl__fig { margin: 0; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; }
.product-tbl__fig img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.product-tbl__ph { font-size: 48px; color: #B9B3A5; padding: 80px 0; }
.product-tbl__row { display: grid; grid-template-columns: 108px minmax(0, 1fr); border-bottom: 1px solid #E9E5DA; }
.product-tbl__row:last-child { border-bottom: 0; }
.product-tbl__k {
  background: #EFEDE4; color: #6E6A5E; font-size: 13px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 9px 8px; border-right: 1px solid #E2DDD0;
}
.product-tbl__v { padding: 10px 16px; font-size: 14px; line-height: 1.75; color: #3C4652; min-width: 0; word-break: break-word; }
.product-tbl__v p { margin: 0 0 9px; }
.product-tbl__v p:last-child { margin-bottom: 0; }
/* 「全部」板块下的提示：套一层米黄面板，别贴着页面左边缘 */
.bfilters--hint { padding: 14px 16px; }
.bfilters--hint .filters__hint { padding: 0; }
@media (max-width: 720px) {
  .product-tbl { margin: 16px 0 28px; }
  .product-tbl__row { grid-template-columns: 82px minmax(0, 1fr); }
  .product-tbl__fig { width: 180px; height: 180px; }
}
/* 掉落素材：横排 chip（原来是右侧竖排列表，单表版式里会把表格撑到 1500px 高） */
.enemy-tbl__drops { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.enemy-tbl__drop {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 5px;
  border: 1px solid #E3E8EE; border-radius: 14px;
  background: #F7FAFC; color: #5A6B7A;
  font-size: 12.5px; line-height: 1.5; text-decoration: none;
}
.enemy-tbl__drop-ic { width: 20px; height: 20px; object-fit: contain; flex: 0 0 20px; display: block; }
.enemy-tbl__drop-dot { width: 7px; height: 7px; border-radius: 50%; background: #8FB8D6; margin: 0 4px 0 5px; flex: 0 0 7px; }
/* 能跳站内背包图鉴的素材：蓝色 + 悬停高亮（其余 chip 是灰字，免得误以为能点） */
.enemy-tbl__drop--link { color: #2E7FB8; }
.enemy-tbl__drop--link:hover { background: #EAF4FA; border-color: #B9DCEF; text-decoration: underline; text-underline-offset: 2px; }
.enemy-tbl__drop--link:focus-visible { outline: 2px solid #8CC0DE; outline-offset: 1px; }
.enemy-tbl__more { display: block; margin-top: 9px; font-size: 12px; color: #3B8FC6; }
/* ⚠️ 默认没有背景：元素标签靠 inline style="background:元素色" 上色。
   非元素标签（动物类型 / 可捕获 / 供奉地区 / 类型）不传 inline 背景 → 白字白底**完全看不见**（2026-09 修）。 */
.enemy-el { display: inline-block; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; margin: 2px 4px 0 0; background: #8496A6; }
.enemy-el--animal { background: #4E8C6A; }   /* 动物·类型 */
.enemy-el--catch { background: #C9843C; }    /* 动物·可捕获 */
.enemy-el--place { background: #6E86A8; }    /* 供奉·地区 */
.enemy-el--kind { background: #A0764E; }     /* 供奉·类型 */
.enemy-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; margin-top: 18px; }
.enemy-section { margin-top: 28px; }
.enemy-section__title { font-family: 'Noto Serif SC', serif; font-size: 20px; font-weight: 700; color: var(--c-ink); margin-bottom: 14px; padding-left: 12px; border-left: 4px solid var(--c-primary); }
.enemy-drops { display: flex; flex-wrap: wrap; gap: 8px; }
.enemy-drop { font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 12px; background: #EFF6F9; color: var(--c-primary-dark); }

/* ===== 怪物图鉴（生物志 · 敌人）· 照 B站 WIKI「怪物图鉴」排版（2026-10-18）=====
 * 结构：一排 24 个类型 tab（图标 + 名称 + 条数）→ 「怪物类别」chip 行 → 「实装版本」下拉。
 * 类型 tab 仍是全站的 .chip + data-filter 钩子（筛选逻辑一行都不用改），
 * 只是把「粉色胶囊」换成 WIKI 那种「白底小方块 + 图标」。 */
.filters--sub.filters--enemy { display: block; padding: 0; }   /* 覆盖 .filters 的 flex 布局 */
/* 2026-10-18 第七轮：类型 tab 从「图标上、文字下」的竖排方盒改成 B站「怪物筛选」那种横排小方块
   （图中每个按钮 = ✦ 图标 名称 ✦，自动换行）。57 个类型照样能一屏铺完，但高度比竖排矮一半。 */
.etypes {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  padding: 18px var(--pad-x) 0;
}
.etypes__i {
  position: relative;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 11px; border-radius: 4px;
  background: #fff; color: #4A5A68;
  border: 1px solid #E3EAF0;
  font-size: 12.5px; font-weight: 500;
  text-align: center;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
/* 两端的 ✦ = B站 筛选按钮的装饰标记（见用户给的怪物筛选截图） */
.etypes__i::before, .etypes__i::after {
  content: '✦'; font-size: 9px; line-height: 1; color: #D3C5A6; transition: color .15s;
}
.etypes__i:hover { opacity: 1; border-color: #F3B4B4; color: var(--c-red); }
.etypes__i:hover::before, .etypes__i:hover::after { color: #E7A9A9; }
.etypes__i.chip--active {
  background: #FFF6F6; border-color: var(--c-red); color: var(--c-red);
  font-weight: 700; box-shadow: 0 1px 4px rgba(198, 40, 40, .12);
}
.etypes__i.chip--active::before, .etypes__i.chip--active::after { color: #E7A9A9; }
.etypes__ic { width: 21px; height: 21px; object-fit: contain; flex-shrink: 0; }
/* B站只给 24 个类型族配了图标；其余类型（如「增殖生命体」）用统一的怪物剪影占位，
   保证每格高度一致、不出现「有的带图有的光秃秃」的参差感 */
.etypes__ic--ph { opacity: .85; }
.etypes__t { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.etypes__i .chip__n { font-size: 10px; opacity: .5; font-weight: 400; margin-left: 1px; }
.etypes__i.chip--active .chip__n { opacity: .7; }
.etypes__i.is-empty { opacity: .42; }
.etypes__i.is-empty:hover { opacity: .7; }

.efilters { padding: 14px var(--pad-x) 0; display: flex; flex-direction: column; gap: 10px; }
.efilters__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.efilters__lab { font-size: 12.5px; color: #7A8794; white-space: nowrap; letter-spacing: .02em; }
.efilters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.efilters__chips .chip { padding: 6px 14px; font-size: 12.5px; }
/* 实装版本：2026-10-18 用户要求把下拉换成 B站「怪物筛选」那种一格一格的版本块（1.0 … 7.1）。
   码表是官方全量（含「月之X」），本站没收录的版本置灰禁用 —— 点进去只有空列表更难受。
   （旧的 `.efilters__sel` 下拉样式随控件一起删除，别再照抄回来） */
.efilters__row--ver { align-items: flex-start; }
/* 2026-10-18 用户：「实装版本排版要占满一整行」。
   原来这里挂了 `max-width: 920px`，在 1440 宽下版本块只铺到 920 就停、右边留一大块空白，
   而且每行末尾参差不齐。去掉上限 → 由 auto-fill + 1fr 自己把整行撑满。 */
.ever {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px; flex: 1 1 auto; min-width: 0;
}
.ever__i {
  justify-content: center; padding: 7px 4px; min-width: 0;
  font-size: 12.5px; border-radius: 6px; line-height: 1.2;
  background: #fff; border: 1px solid #DCE5EC; color: #4A5A68;
  transition: border-color .15s, color .15s, background .15s;
}
.ever__i:hover:not(:disabled) { opacity: 1; border-color: #F3B4B4; color: var(--c-red); }
.ever__i.chip--active {
  background: #FFF6F6; border-color: var(--c-red); color: var(--c-red);
  font-weight: 700; box-shadow: 0 1px 4px rgba(198, 40, 40, .12);
}
.ever__i.is-empty { opacity: .35; cursor: not-allowed; }

/* ===== 生物志 · 动物筛选面板（2026-10-18 第七轮）=====
 * 照 B站「怪物筛选」的白底小方块（两端 ✦）+「生物图鉴2」的三行表：
 *   种类（大类 → 子类，每大类一行）/ 能否捕捉（能·不能）/ 实装版本（一格一版）。
 * 交互见 bindAnimalFilters()：选中再点一次 = 取消。 */
.filters--sub.filters--bf { display: block; padding: 0; }
.bfilters {
  margin: 16px var(--pad-x) 0;
  padding: 12px 16px;
  background: #FBF7EE;
  border: 1px solid #EFE6D2;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.bfilters__row { display: flex; align-items: flex-start; gap: 14px; }
.bfilters__lab {
  flex: 0 0 62px; padding-top: 7px;
  font-size: 12.5px; color: #8B8171; letter-spacing: .04em; white-space: nowrap;
}
.bfilters__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bfline { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.bchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px;
  border: 1px solid #E6DFCE;
  border-radius: 4px;
  background: #fff;
  color: #6B6153;
  font-family: inherit; font-size: 13px; line-height: 1.2;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s, box-shadow .14s;
}
/* 两端的 ✦ = B站 筛选按钮的装饰标记（图中每个按钮左右各一颗） */
.bchip::before, .bchip::after {
  content: '✦'; font-size: 10px; line-height: 1; color: #C9B78F; transition: color .14s;
}
.bchip__n { font-size: 10px; color: #A79C87; margin-left: 2px; font-weight: 400; }
.bchip:hover { border-color: #F3B4B4; color: var(--c-red); }
.bchip:hover::before, .bchip:hover::after { color: #E7A9A9; }
.bchip.chip--active {
  background: #FFF6F6; border-color: var(--c-red); color: var(--c-red);
  font-weight: 600; box-shadow: 0 1px 3px rgba(198, 40, 40, .1);
}
.bchip.chip--active::before, .bchip.chip--active::after { color: #E7A9A9; }
.bchip.chip--active .bchip__n { color: #C07A7A; }
/* 大类 = 米灰底、稍粗，和它的子类区分开（对应 B站 表格里灰底的「禽鸟 / 走兽…」） */
.bchip--cat { background: #F6F0E1; border-color: #E4D9BE; color: #6A5B3F; font-weight: 600; }
.bchip--cat:hover { color: #8C5B2E; border-color: #D9B48A; }
.bchip--all { background: #fff; }
.bfilters__body--ver { display: block; }
.bfilters__body--ver .ever { margin-top: 1px; }

@media (max-width: 600px) {
  /* 手机上 58 个类型若还按 4 列铺，光筛选区就要滚 15 行才见到卡片
     → 改成一条可横滑的 tab 带（每格 76px），竖向高度只占一行 */
  .etypes {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    padding: 14px var(--pad-x) 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .etypes::-webkit-scrollbar { height: 0; }
  .etypes__i { flex: 0 0 auto; gap: 4px; padding: 6px 9px; font-size: 11.5px; }
  .etypes__ic { width: 22px; height: 22px; }
  .etypes__i .chip__n { display: none; }   /* 窄屏优先保名称，条数就不挤了 */
  .efilters__row { gap: 8px; }
  .efilters__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .efilters__chips::-webkit-scrollbar { height: 0; }
  .efilters__chips .chip { flex: 0 0 auto; }
  /* 53 个版本块按 4 列铺要滚十几行 → 窄屏收成一条可横滑的带子 */
  .efilters__row--ver { flex-direction: column; align-items: stretch; gap: 6px; }
  .ever {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    width: 100%; min-width: 0; flex: 0 0 auto;
    max-width: none; scrollbar-width: none; padding-bottom: 2px;
  }
  .ever::-webkit-scrollbar { height: 0; }
  .ever__i { flex: 0 0 auto; padding: 6px 10px; }
  /* 动物筛选面板：标签移到每行上方，四条种类行各自横滑 */
  .bfilters { margin: 12px var(--pad-x) 0; padding: 10px 12px; gap: 8px; }
  .bfilters__row { flex-direction: column; gap: 4px; }
  .bfilters__lab { flex: none; padding-top: 0; }
  /* ⚠️ 基础样式里 row 是 align-items:flex-start；换成 column 后交叉轴不再 stretch，
     body 会被 nowrap 的按钮带撑到 1800px 宽（整页横向溢出）→ 这里显式给满宽 + 允许收缩。 */
  .bfilters__body { width: 100%; min-width: 0; }
  .bfline { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .bfline::-webkit-scrollbar { height: 0; }
  .bchip { flex: 0 0 auto; }
  .bfilters__body--ver { width: 100%; }
}

/* 窄屏：单表收窄，两张图等比缩（不再是三栏，只调尺寸） */
@media (max-width: 720px) {
  .enemy-tbl { margin: 16px 0 28px; }
  .enemy-tbl__media { gap: 14px; padding: 16px 12px; }
  .enemy-tbl__fig--anim { width: calc(50% - 8px); height: auto; aspect-ratio: 4 / 5; }
  .enemy-tbl__fig--still { width: calc(50% - 8px); height: auto; aspect-ratio: 1; }
  .enemy-tbl__row { grid-template-columns: 82px minmax(0, 1fr); }
  .enemy-tbl__v { padding: 9px 12px; font-size: 13.5px; }
  .enemy-tbl__drop { font-size: 12px; }
}

@media (max-width: 600px) {
  .ef-grid { grid-template-columns: 1fr; }
}

/* ===== NPC 卡 / NPC 详情页 =====
 * ⚠️ 2026-10-15 整体改版（照 B站 WIKI「NPC图鉴」排版）：卡片从「150 竖卡」换成
 *   「270×150 横卡」，详情页从「大头像 + 折叠对话」换成「信息表 + CV表 + 对话分支 + 商店 + 出现地点」。
 *   旧的 .ccard--npc / .detail--npc / .npc-dialogue 一整套已废弃并**从这里删除**（留着会和新的打架：
 *   同名选择器在文件里前后出现、靠顺序决胜，改一处忘一处就会出现「有的属性生效、有的不生效」）。
 *   新版样式统一放在文件末尾的覆盖块里（见「NPC 图鉴 · B站 WIKI 排版」那一节）。
 */

/* ===== 地图文本卡（地图文本） ===== */
.ccard--maptext {
  width: 150px; padding: 0; overflow: hidden; flex-direction: column; gap: 0;
  border-radius: 12px; border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 5px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ccard--maptext:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(140,105,35,.18); }
.ccard--maptext .ccard__art--maptext {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(145deg,#FBF6E9,#F1E7CE);
}
.ccard--maptext .ccard__art--maptext img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard--maptext .ccard__maptext-ph { font-size: 44px; }
.ccard--maptext .ccard__main { padding: 8px 10px 10px; background: rgba(255,255,255,.7); }
.ccard--maptext .ccard__name { font-size: 12.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard--maptext .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 地图文本详情页 ===== */
.detail--maptext { background: #FDFBF5; }
.detail--maptext .detail__item { display: flex; gap: 44px; align-items: flex-start; }
.detail--maptext .detail__item-cover {
  width: 320px; height: 400px; flex-shrink: 0; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-card); background: linear-gradient(145deg,#FBF6E9,#F1E7CE);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.detail--maptext .detail__item-cover img { width: 100%; height: 100%; object-fit: cover; }
.detail--maptext .detail__item-cover .detail__item-initial { font-size: 92px; }
.detail--maptext .detail__title { font-size: 26px; }
.mt-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mt-imgs img { width: 100%; max-width: 520px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.10); }
@media (max-width: 900px) {
  .detail--maptext .detail__item { flex-direction: column; }
  .detail--maptext .detail__item-cover { width: 100%; max-width: 320px; height: 260px; }
}

/* ===== 活动任务详情页 ===== */
.detail--event { background: #FBF9FF; }
.detail--event .detail__item { display: flex; gap: 44px; align-items: flex-start; }
.detail--event .detail__item-cover {
  width: 320px; height: 400px; flex-shrink: 0; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-card); background: linear-gradient(145deg,#F1EDFB,#E5DFF6);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.detail--event .detail__item-cover img { width: 100%; height: 100%; object-fit: cover; }
.detail--event .detail__item-cover .detail__item-initial { font-size: 92px; }
.detail--event .detail__title { font-size: 26px; }
.mt-pre { white-space: pre-line; font-size: 14.5px; line-height: 1.75; color: #333; }
@media (max-width: 900px) {
  .detail--event .detail__item { flex-direction: column; }
  .detail--event .detail__item-cover { width: 100%; max-width: 320px; height: 240px; }
}

/* ===== 魔神任务卡（立绘 380×712，尺寸对齐 BWiki 魔神任务页：150×281） ===== */
.ccard--archon {
  width: 150px; padding: 0; overflow: hidden; flex-direction: column; gap: 0;
  border-radius: 12px; box-sizing: content-box; border: none;   /* 无边框：立绘精确 150×281 */
  box-shadow: 0 1px 5px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ccard--archon:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(120,90,40,.18); }
.ccard--archon .ccard__art--archon {
  position: relative; width: 100%; aspect-ratio: 380 / 712;   /* 150 × 281 */
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(145deg,#F6F1E7,#EDE3D2);
}
.ccard--archon .ccard__art--archon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard--archon .ccard__archon-ph { font-size: 44px; }
.ccard--archon .ccard__main { padding: 8px 10px 10px; background: rgba(255,255,255,.7); }
.ccard--archon .ccard__name { font-size: 12.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard--archon .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 传说任务卡（对齐 B站原神WIKI「传说任务」页的立绘卡）=====
 * 参考图的结构（B站WIKI 的 .taskIcon）：
 *   · 角色立绘 380×712（竖版），**章节纹章已经合成在立绘中央**，不用再叠一层
 *   · 立绘底部压一条「章节名」标签（小兔之章 第一幕）
 *   · 卡片四角有细描边装饰
 * 本地实现：立绘直链 patchwiki（legendcover-data.js），外层加描边框 + 底部标签。
 * ⚠️ aspect-ratio 用 380/712 与 B站一致：改比例会把纹章裁掉（纹章在立绘中线附近）。 */
.ccard--legendcover {
  width: 176px; padding: 0; overflow: hidden; cursor: pointer;
  flex-direction: column; align-items: stretch; gap: 0;
  background: #FBF7F0;
  border: 1px solid #E3D8C6;
  box-shadow: 0 1px 5px rgba(90, 70, 40, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ccard--legendcover:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(90, 70, 40, .22); }
.ccard--legendcover .ccard__art--legendcover {
  position: relative; width: 100%; aspect-ratio: 380 / 712;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  /* ⚠️ 占位底纹：patchwiki 断网时 img 不显示，这层渐变兜底，别露白 */
  background: linear-gradient(160deg, #EFE6D6, #DDD0BA);
}
.ccard--legendcover .ccard__art--legendcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 立绘内的细描边（B站卡四角那种内框感） */
.ccard--legendcover .ccard__art--legendcover::after {
  content: ''; position: absolute; inset: 4px; border: 1px solid rgba(255, 255, 255, .38);
  pointer-events: none;
}
/* 底部标签的上沿：与 B站一样做一条压边，让立绘与文字区有层次 */
.ccard__lc-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background: linear-gradient(180deg, rgba(58, 44, 26, 0), rgba(58, 44, 26, .32));
  pointer-events: none;
}
/* ⚠️ 下面 4 条同时服务「立绘卡」与「兜底卡」——两张卡的下半区结构完全一致，
 *    用 :is() 合并选择器，避免改一处漏一处导致两种卡高度/字号不一致。 */
:is(.ccard--legendcover, .ccard--legendtext) .ccard__main--legend {
  padding: 8px 10px 10px; text-align: center;
  background: #FBF7F0; border-top: 1px solid #E3D8C6;
  /* ⚠️ 固定高度 + column：长任务名的卡不能比邻居高一截，否则整行卡片参差不齐 */
  height: 70px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; overflow: hidden;
}
.ccard__lc-chap {
  display: block; flex-shrink: 0; margin-bottom: 4px; line-height: 17px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
  color: #8A6A3C; background: #F3E9D8; border: 1px solid #E2D2B6;
  border-radius: 3px; padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
:is(.ccard--legendcover, .ccard--legendtext) .ccard__name {
  font-size: 12.5px; line-height: 1.32; font-weight: 600;
  color: var(--c-ink); margin: 0;
  /* ⚠️ 基础规则 .ccard__name 是 display:flex（给「名字 + 星级」横排用的），
     flex 容器上 -webkit-line-clamp 完全不生效 → 必须显式改回 -webkit-box，
     否则长任务名（如「绘夏！烈日？度假村！其二「畅玩！举目之处皆为画布！」」）会撑破卡片。 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; text-align: center;
}
:is(.ccard--legendcover, .ccard--legendtext) .ccard__info {
  font-size: 11px; color: var(--c-gray); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; flex-shrink: 0;
}
/* 兜底卡下区高度**必须与立绘卡一致**（都是 70px），否则两种卡混排时整体高度差 14px。
 * 邀约事件名偏长 → 靠 :is(...) .ccard__name 的 2 行 clamp + 省略号收敛，不靠加高。 */

/* 传说任务兜底卡（邀约事件 / B站WIKI 自己也没配图的活动系列）
 * ⚠️ 2026-09-27 改版：结构与 .ccard--legendcover **完全一致**（上 art 区 + 下 main 区），
 *    只是 art 区换成纹章底纹。这样两种卡混排时高度都是 398px，整行天然齐平。
 * ⚠️ 别再走 .ccard__badge--soft 那套（小圆徽 + 横排），176px 宽的卡里会挤成一块白板。 */
.ccard--legendtext {
  width: 176px; padding: 0; overflow: hidden; cursor: pointer;
  flex-direction: column; align-items: stretch; gap: 0;
  background: #FBF7F0; border: 1px solid #E3D8C6;
  box-shadow: 0 1px 5px rgba(90, 70, 40, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ccard--legendtext:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(90, 70, 40, .22); }
.ccard--legendtext .ccard__art--legendtext {
  position: relative; width: 100%; aspect-ratio: 380 / 712;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  /* 与立绘卡同宽同高；底纹用淡米色斜纹，一眼能看出「这张没配图」但不突兀 */
  background:
    repeating-linear-gradient(135deg, rgba(190, 168, 130, .10) 0 10px, rgba(190, 168, 130, 0) 10px 20px),
    linear-gradient(160deg, #F2EADC, #E3D6BF);
}
.ccard--legendtext .ccard__art--legendtext::after {
  content: ''; position: absolute; inset: 10px; border: 1px solid rgba(176, 150, 108, .35);
  border-radius: 8px; pointer-events: none;
}
.ccard__lt-emblem {
  position: relative; z-index: 1;
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: #9A7B4A; letter-spacing: 1px;
  background: radial-gradient(circle at 50% 38%, #FBF5E8, #EDE1CB);
  border: 1px solid #DCCBAE;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, .9), 0 2px 7px rgba(120, 96, 56, .16);
}

/* ===== 魔神任务详情页 ===== */
.detail--archon { background: #FBF9F4; }
.detail--archon .detail__item { display: flex; gap: 44px; align-items: flex-start; }
.detail--archon .detail__item-cover {
  width: 300px; height: 562px; flex-shrink: 0; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-card); background: linear-gradient(145deg,#F6F1E7,#EDE3D2);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.detail--archon .detail__item-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.detail--archon .detail__title { font-size: 28px; }
@media (max-width: 900px) {
  .detail--archon .detail__item { flex-direction: column; }
  .detail--archon .detail__item-cover { width: 100%; max-width: 300px; height: auto; aspect-ratio: 380 / 712; }
}

/* ===== 教程图鉴（miHoYo 观测枢 · 教程频道 189/227）===== */
.ccard--tutorial { width: 224px; padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; }
.ccard__art--tutorial { position: relative; height: 138px; overflow: hidden; background: linear-gradient(160deg, #EEF5FE, #DCE8F7); }
.ccard__art--tutorial img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ccard--tutorial:hover .ccard__art--tutorial img { transform: scale(1.045); }
.ccard__tut-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: .4; }
.ccard__cat { position: absolute; top: 8px; left: 8px; font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 999px; color: #fff; }
.ccard__cat--tutorial { background: rgba(44, 107, 179, .85); box-shadow: 0 2px 8px rgba(20, 69, 107, .22); }
.ccard--tutorial .ccard__main { padding: 10px 12px 12px; }
.ccard--tutorial .ccard__name { font-size: 13px; line-height: 1.4; }
.ccard--tutorial .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }

.detail--tutorial { background: #FBFCFE; }
.detail--tutorial .detail__item { display: flex; gap: 40px; align-items: flex-start; }
.detail--tutorial .detail__item-cover--tutorial {
  width: 440px; flex-shrink: 0; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-card); background: linear-gradient(160deg, #EEF5FE, #DCE8F7);
  display: flex; align-items: center; justify-content: center;
}
.detail--tutorial .detail__item-cover--tutorial img { width: 100%; display: block; cursor: zoom-in; }
.detail--tutorial .detail__item-cover--tutorial .detail__item-initial { font-size: 84px; }
.detail--tutorial .detail__title { font-size: 28px; }
.tut-extra { margin-top: 30px; }
.tut-imgs { display: flex; flex-wrap: wrap; gap: 14px; }
.tut-imgs img { flex: 1 1 240px; max-width: 480px; display: block; border-radius: 12px; cursor: zoom-in; box-shadow: var(--shadow-card); }
@media (max-width: 900px) {
  .detail--tutorial .detail__item { flex-direction: column; }
  .detail--tutorial .detail__item-cover--tutorial { width: 100%; }
}

/* ===== 导航宽度适配 =====
 * 18 个中文分类项平铺约需 792px。逐 13px 实测（769~1500）：>1383 放得下，再窄就陆续卡住。
 * 因此 1101~1440 分四档收紧；1100px 以下改用汉堡菜单（见文件末尾的折叠断点）。
 * ⚠️ 窄档一律带 min-width: 1101px，避免与末尾的折叠断点互相覆盖。
 * ⚠️ 真正的瓶颈是 .nav__links 自己的 max-width（基础档 58vw），不是 logo 或搜索框。 */
/* ≤1487：19 个中文分类项平铺需 ~891px，此宽度下必须整体收一档
 * （原 1440/1340/1240/1160 四档在 19 项时已不够用：实测 1474~1448 / 1383~1344 / 1292~1253 / 1162 均溢出） */
/* 紧凑导航档（≥1407 且 ≤1900）
 * ⚠️ 下面这套上下界是**实测**扫出来的，不是推算（数字是 2026-09-27「版本框搬进导航」时的 20 项记录，
 *    2026-10-13 加「首页」变 21 项后又重扫了一次，见本节末尾）：
 * ⚠️ 2026-09-27 版本框搬进导航后，右侧工具区从「只有搜索框」变成「版本 + 搜索」，
 *    links 的可用宽度凭空少了 ~178~210px。下面这套上下界是**实测**扫出来的，不是推算：
 *    实测（viewport 宽 → .nav__links 盒宽 vs 内容宽 1009/849/802）：
 *      w=1920/1800 → 1009/1009 ✅（默认档够）
 *      w=1701      →  919/1009 ❌ 溢出   ⇒ 默认档下界必须 ≥ 1821，取 1821
 *      w=1700 → 1650 → 849/849 ✅
 *      w=1366      →  825/ 849 ❌ 溢出   ⇒ 紧凑档下界必须 ≤ 1366*849/825 ≈ 1406，取 1150 起两档
 *      w=1257~1241 →  802/802 ✅（窄桌面档：只留版本框、搜索框让位）
 *      w≤1240      → 汉堡（.nav__tools 整体 display:none）
 * ⚠️ 所以默认档媒体查询写成 `max-width: 1820`（2026-10-13 加「首页」后再抬到 **1900**；原来是 1700），紧凑档到 1150 为止；
 *    1150 以下因为「只显示版本框」的那一档也算不出来，直接进汉堡。
 * ⚠️ 再加分类前先重算：13px 档每多 1 项约 +44px → 下界 ≈ (849 + 44n)/0.7。 */
/* ⚠️ 2026-10-13 加「首页」后 21 项，两处下界重算（实测扫出来的）：
 *    · 紧凑档上界 1820 → **1900**：21 项在 14.5px 档要 ~1115px，而基础档 max-width:60vw
 *      要到 1859px 才够 → 1821~1858 这段会横向溢出（实测 w=1821 溢出）。抬到 1900 后
 *      基础档从 1901 起生效（1140 > 1115，余量 25px）。
 *    · 窄桌面档（1241~1406）gap 5px → **4px**：21 项内容宽 897px，而 72vw@1241 = 894px
 *      → 刚好差 3px 溢出（实测 w=1241 溢出 897/894）。20 个间隙各减 1px = 省 20px。 */
@media (max-width: 1900px) and (min-width: 1500px) {
  .nav { padding: 0 32px; }
  .nav__logo { font-size: 20px; gap: 8px; }
  .nav__logo img { width: 30px; height: 30px; }
  /* ⚠️ 2026-10-14：21 项在 13px 档内容宽 947px；「版本框 + 搜索框」把 links 挤到 viewport-553，
     即 1500px 才刚好放得下（w=1440 时盒宽只剩 900 → 溢 47px）。故本档下界抬到 1500，
     gap 6px → 5px 再留 20px 余量（防不同机器字体回退导致 947 变宽）。 */
  .nav__links { gap: 5px; max-width: 70vw; }
  .nav__links a { font-size: 13px; }
  .nav__search { width: 168px; padding: 0 11px; }
  .nav__ver-sel { font-size: 12.5px; height: 36px; max-width: 170px; padding: 0 26px 0 12px; }
  .nav__ver { height: 36px; }
  .nav__ver-caret { right: 10px; }
}
/* ⚠️ 2026-10-26 扫描补出的窄带（scan_nav_breakpoints）：w=1901~1920 时分类页（#roles）
 *    的版本下拉比首页宽 ~6px，21 项内容宽 1125 而 links 可用宽只有 1119 → 溢 6px
 *    （实测 w=1901 links=1125/1119，首页同宽却是 1125/1125 ✅）。
 *    基础档 gap 10px × 20 间隙，这里收到 8px 直接省 40px，肉眼几乎无感。 */
@media (max-width: 1920px) and (min-width: 1901px) {
  .nav__links { gap: 8px; }
}

/* 窄桌面档（1241~1499）：再收一档；这一段「版本框 + 搜索框」并排放不下 947px 的 links，
 * 所以**只保留版本框、把搜索框让位**（版本筛选是这一段的核心诉求，改字体即可）。
 * ⚠️ 2026-10-14：上界 1406 → **1499**。21 项在 13px 档要 947px，而带搜索框时 links 可用宽
 *    = viewport-553 → 直到 1500px 才够；1407~1499 这段「版本框+搜索框」会横向溢出
 *    （实测 w=1440 溢 47px、w=1407 溢 80px）。把「藏搜索框」这一档上沿抬到 1499 即可（12.5px 档内容 877px 富余）。
 * ⚠️ gap 5px → 4px（2026-10-13，21 项后 1241px 处溢 3px，见上。再窄一点都会进汉堡，不必再抠）。 */
@media (max-width: 1499px) and (min-width: 1241px) {
  .nav { padding: 0 24px; }
  .nav__logo { font-size: 19px; gap: 7px; }
  .nav__logo img { width: 28px; height: 28px; }
  .nav__links { gap: 4px; max-width: 72vw; }
  .nav__links a { font-size: 12.5px; }
  .nav__search { display: none; }
  .nav__ver-sel { font-size: 12px; height: 34px; max-width: 150px; padding: 0 24px 0 11px; }
  .nav__ver { height: 34px; }
  .nav__ver-caret { right: 9px; }
}

/* 中档（1150~1240）：宽度还不够放 21 个分类项 → 也进汉堡；
 * 但导航栏还有位置，所以**版本框继续留在外面**（比藏进抽屉里实用）。 */
@media (max-width: 1240px) and (min-width: 1150px) {
  .nav { padding: 0 20px; }
  .nav__links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 16px; max-width: none; overflow: visible;
    background: var(--c-primary-dark); padding: 16px 20px;
  }
  .nav--open .nav__links { display: flex; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
  .nav--open .nav__links a { font-size: 15px; }
  .nav__search { display: none; }
  .nav__ver-sel { font-size: 12px; height: 34px; max-width: 150px; padding: 0 24px 0 11px; }
  .nav__ver { height: 34px; }
  .nav__ver-caret { right: 9px; }
  .nav__toggle { display: flex; }
}

/* ===== 装扮图鉴（miHoYo 观测枢 · 装扮频道 189/211）===== */
/* ⚠️ 必须显式声明 column：.ccard 基础布局是 row（给「图标+文字」的横排卡用的），
   不声明的话主图区会被压成 70px 窄条、文字挤在右侧。--char/--enemy/--npc 都声明了，这里漏了。 */
.ccard--dress { width: 224px; padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; }
.ccard__art--dress {
  position: relative; height: 152px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #FDF3F8, #F3E4EE); overflow: hidden;
}
.ccard__art--dress img { width: 84%; height: 84%; object-fit: contain; display: block; transition: transform .35s ease; }
.ccard--dress:hover .ccard__art--dress img { transform: scale(1.05); }
/* 衣装主图是 2.x:1 的宣传横幅（标题压在左上角）→ 把取景框改成同比例不裁切，徽标挪到右上角避让标题 */
.ccard__art--dress-wide { height: 106px; }
.ccard__art--dress-wide img { width: 100%; height: 100%; object-fit: contain; }
.ccard__art--dress-wide .ccard__cat { left: auto; right: 8px; }
.ccard__dress-ph { font-size: 36px; opacity: .45; }
.ccard__cat--dress { background: rgba(180, 74, 130, .86); box-shadow: 0 2px 8px rgba(120, 40, 80, .24); }
.ccard__dress-stars {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-size: 11px; letter-spacing: 1px; color: #E8A33D;
  background: rgba(255, 255, 255, .8); padding: 1px 0;
}
.ccard--dress .ccard__main { padding: 10px 12px 12px; }
.ccard--dress .ccard__name { font-size: 13px; line-height: 1.4; }
.ccard--dress .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 3px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.detail--dress { background: #FDFBFC; }
.detail__item--dress { display: flex; gap: 40px; align-items: flex-start; }
.detail__item-cover--dress {
  width: 320px; height: 320px; flex-shrink: 0; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-card); background: linear-gradient(160deg, #FDF3F8, #F3E4EE);
  display: flex; align-items: center; justify-content: center;
}
.detail__item-cover--dress img { max-width: 82%; max-height: 82%; display: block; cursor: zoom-in; }
.detail__item-cover--dress-avatar { border-radius: 50%; width: 240px; height: 240px; }
.detail__item-cover--dress-avatar img { max-width: 100%; max-height: 100%; border-radius: 50%; }
.detail--dress .detail__title { font-size: 28px; }

/* 衣装顶部宣传横幅 */
.dress-hero { margin: 0 0 34px; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); background: linear-gradient(160deg, #FDF3F8, #F3E4EE); }
.dress-hero img { width: 100%; display: block; cursor: zoom-in; }
.dress-hero__ph { height: 220px; display: flex; align-items: center; justify-content: center; font-size: 56px; opacity: .35; }

/* 图集（衣装展示长图 / 武器展示截图）：竖图与横图都靠 max-width 兜住 */
.dress-gallery .dress-imgs { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.dress-imgs img { max-width: min(100%, 660px); display: block; border-radius: 14px; cursor: zoom-in; box-shadow: var(--shadow-card); }

/* 动作展示（可折叠；缩略是静态首帧 webp，点开才是动画 webp） */
.dress-acts { margin-top: 26px; border: 1px solid #F0DFE9; border-radius: 16px; background: #fff; overflow: hidden; }
.dress-acts__sum { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--c-primary-dark); font-size: 15px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dress-acts__sum::-webkit-details-marker { display: none; }
.dress-acts__sum::after { content: '▾'; transition: transform .2s; }
.dress-acts[open] .dress-acts__sum::after { transform: rotate(180deg); }
.dress-acts__hint { font-weight: 400; font-size: 12px; color: var(--c-gray); }
.dress-acts__grid { padding: 4px 18px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dress-act { margin: 0; background: #FBF6F9; border-radius: 12px; overflow: hidden; }
.dress-act img { width: 100%; display: block; cursor: zoom-in; background: #fff; }
.dress-act figcaption { font-size: 11px; color: var(--c-gray); padding: 6px 8px; text-align: center; line-height: 1.4; }

/* 武器形态一览 */
.dress-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.dress-var { margin: 0; background: #fff; border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.dress-var img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; cursor: zoom-in; background: linear-gradient(160deg, #FDF3F8, #F3E4EE); }
.dress-var__ph { display: flex; aspect-ratio: 1 / 1; align-items: center; justify-content: center; font-size: 34px; opacity: .4; background: linear-gradient(160deg, #FDF3F8, #F3E4EE); }
.dress-var figcaption { padding: 8px 10px 10px; font-size: 12px; line-height: 1.45; }
.dress-var figcaption b { display: block; color: var(--c-primary-dark); }
.dress-var figcaption span { color: var(--c-gray); font-size: 11px; }

@media (max-width: 900px) {
  .detail__item--dress { flex-direction: column; }
  .detail__item-cover--dress, .detail__item-cover--dress-avatar { width: 100%; height: auto; max-height: 340px; }
}
/* 表单里的说明型提示占整行 */
.ef-grid .ef-hint { grid-column: 1 / -1; margin: 0; }

/* ===== 名片图鉴（miHoYo 观测枢 · 名片频道 189/109）===== */
/* 名片数据只有两张成品图：好友列表视角（约 15.5:1 超宽条带）+ 个人信息视角（约 0.73 竖版信息卡） */
.ccard--namecard { width: 224px; padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; }
/* 取景比例 8:5 = 信息卡里「标题 + 名片实机效果」那一段的高度占比，
   再往下就是描述文字区，裁掉才不会露出半句被切断的话 */
.ccard__art--namecard {
  position: relative; aspect-ratio: 8 / 5; overflow: hidden;
  background: linear-gradient(160deg, #F7F4EC, #EDE7DA);
}
.ccard__art--namecard img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; transition: transform .35s ease;
}
.ccard--namecard:hover .ccard__art--namecard img { transform: scale(1.04); }
.ccard__nc-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; opacity: .4; }
.ccard__cat--namecard { background: rgba(138, 109, 18, .86); box-shadow: 0 2px 8px rgba(90, 70, 10, .24); }
.ccard--namecard .ccard__main { padding: 10px 12px 12px; }
.ccard--namecard .ccard__name { font-size: 13px; line-height: 1.4; }
.ccard--namecard .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 3px; line-height: 1.5; }

.detail--namecard { background: #FCFBF7; }
.nc-hero { max-width: 860px; }
.nc-hero .detail__title { font-size: 28px; }
.nc-hero .enemy-fields { margin-top: 14px; }
.nc-fig { margin: 26px 0 0; background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); overflow: hidden; }
.nc-fig img { display: block; cursor: zoom-in; }
/* 条带：整幅铺满宽度即可（本身就是超宽比例，无需限高） */
.nc-fig--strip img { width: 100%; }
/* 信息卡：竖版，限制宽度居中，避免被拉成巨幅 */
.nc-fig--card { max-width: 440px; }
.nc-fig--card img { width: 100%; }
.nc-fig figcaption {
  padding: 10px 16px 12px; font-size: 12px; color: var(--c-gray);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid #F2EFE6;
}
.nc-fig figcaption span { font-size: 11px; color: #A89C7E; }
.nc-hint { margin: 22px 0 0; font-size: 12px; color: var(--c-gray); line-height: 1.7; }

@media (max-width: 900px) {
  .nc-fig--card { max-width: 100%; }
}

/* 导航的窄档适配统一放在文件末尾的「导航宽度适配」段（旧的两档已合并） */

/* ===== 家具图鉴（miHoYo 观测枢 · 洞天频道 189/130）===== */
/* 2026-10-20 用户要求「摆设的图标大小参考物产志其他图鉴」→ 尺寸整段对齐 .ccard--bag：
   卡片 132 宽 / 图标区 132 高 / 图 76%（≈100×100）。原先 200×200 铺满是全站最大的卡。
   ⚠️ 摆设图是 219×219 带底色的方形产品图，缩小后必须 contain（cover 会裁掉家具本体），
      且 76% 之外露出的底色用暖米色渐变托底，与「摆设」分区调性一致。 */
.ccard--furnishing { width: 132px; padding: 0; overflow: hidden;
  flex-direction: column; align-items: stretch; gap: 0; }
.ccard__art--furnishing { position: relative; height: 132px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; }
.ccard__art--furnishing img { width: 76%; height: 76%; object-fit: contain; display: block; transition: transform .35s ease; }
.ccard--furnishing:hover .ccard__art--furnishing img { transform: scale(1.05); }
.ccard__furn-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: .4; }
.ccard__cat--furn { background: rgba(140, 92, 46, .88); box-shadow: 0 2px 8px rgba(90, 58, 26, .24); }
/* 星级仍是「图标左下角」（全站角标撤下时刻意保留的那一类），
   但卡片缩到 132 后图标只占中间 100，16px 的下边带很窄 → 贴到 bottom 3px 免得压在图标底边上。 */
.ccard__furn-stars { position: absolute; left: 8px; bottom: 3px; font-size: 11px; color: #FFD75E; letter-spacing: -1px; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.ccard--furnishing .ccard__main { padding: 9px 6px 11px; }
.ccard--furnishing .ccard__name { font-size: 13px; line-height: 1.35; }
.ccard--furnishing .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 3px; }

.detail--furnishing { background: #FBF9F5; }
.furn-hero { max-width: 880px; }
.furn-hero__top { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.furn-icon { width: 172px; height: 172px; margin: 0; border-radius: 18px; overflow: hidden; background: #F3F1EC; box-shadow: var(--shadow-card); flex: none; }
.furn-icon img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.furn-icon__ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 44px; opacity: .35; }
.furn-hero__meta { flex: 1 1 360px; min-width: 0; }
.furn-stars { margin: 6px 0 2px; color: #E8A33D; font-size: 15px; letter-spacing: 1px; }
.furn-shot { margin: 12px 0 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.furn-shot img { display: block; width: 100%; cursor: zoom-in; }
.furn-shot figcaption { padding: 9px 14px 11px; font-size: 12px; color: var(--c-gray); display: flex; gap: 10px; border-top: 1px solid #F2EFE6; }
.furn-shot figcaption span { font-size: 11px; color: #A89C7E; }
.furn-hint { margin: 20px 0 0; font-size: 12px; color: var(--c-gray); line-height: 1.7; }

/* ===== 幻想真境剧诗（miHoYo 观测枢 · 频道 189/249）===== */
.ccard--theater { width: 200px; padding: 0; overflow: hidden;
  flex-direction: column; align-items: stretch; gap: 0; }
.ccard__art--theater { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(160deg, #241C3E, #3A2E5C); }
.ccard__art--theater img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ccard--theater:hover .ccard__art--theater img { transform: scale(1.04); }
.ccard__art--theater-guide { background: linear-gradient(160deg, #F2EEFA, #E4DCF4); }
.ccard__art--theater-guide img { object-fit: contain; padding: 30px; }
.ccard__th-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: .5; }
.ccard__cat--theater { background: rgba(94, 74, 152, .9); box-shadow: 0 2px 8px rgba(58, 44, 100, .3); }
.ccard__th-no { position: absolute; right: 8px; top: 8px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .42); padding: 1px 6px; border-radius: 999px; letter-spacing: .5px; }
.ccard--theater .ccard__main { padding: 9px 11px 11px; }
.ccard--theater .ccard__name { font-size: 12.5px; line-height: 1.4; }
.ccard--theater .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 3px; }

.detail--theater { background: #FAF8FD; }
.th-wrap { max-width: 1000px; display: flex; gap: 34px; align-items: flex-start; flex-wrap: wrap; }
.th-card-fig { flex: none; width: 320px; margin: 0; }
.th-card-fig img { width: 100%; display: block; border-radius: 16px; box-shadow: 0 14px 40px rgba(48, 32, 92, .22); cursor: zoom-in; }
.th-card-fig figcaption { margin-top: 10px; font-size: 12px; color: var(--c-gray); text-align: center; }
.th-card-fig__ph { display: flex; height: 420px; align-items: center; justify-content: center; font-size: 56px; background: #EDE7F8; border-radius: 16px; }
.th-card-body { flex: 1 1 400px; min-width: 0; }
.th-poem { margin: 16px 0 0; padding: 16px 20px; background: #fff; border-left: 3px solid #8E7CC3; border-radius: 0 14px 14px 0; box-shadow: var(--shadow-card); }
.th-poem p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.9; color: #4A4358; }
.th-poem p:last-child { margin-bottom: 0; }
.th-card-body .enemy-fields { margin-top: 18px; }

.th-guide { max-width: 940px; }
.th-guide__desc { margin: 10px 0 0; font-size: 13.5px; color: var(--c-gray); line-height: 1.8; }
.th-section { margin-top: 28px; }
.th-filters { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; }
.th-filter { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.th-filter__k { flex: none; width: 76px; color: var(--c-gray); }
.th-filter__v i { font-style: normal; display: inline-block; margin: 0 6px 6px 0; padding: 2px 9px; background: #F0ECFA; color: #5E4A98; border-radius: 999px; font-size: 12px; }
.th-table-wrap { margin: 14px 0 0; overflow-x: auto; }
.th-table__cap { font-size: 12px; color: var(--c-gray); margin-bottom: 6px; }
.th-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; box-shadow: var(--shadow-card); border-radius: 12px; overflow: hidden; }
.th-table th, .th-table td { padding: 8px 12px; border: 1px solid #EFEBF7; text-align: left; vertical-align: top; }
.th-table th { background: #F5F2FC; font-weight: 600; color: #4A4358; white-space: nowrap; }
.th-targets { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 0; }
.th-target { background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-card); }
.th-target__h { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.th-target__lv { font-weight: 700; color: #5E4A98; font-size: 14px; }
.th-target__desc { font-size: 12.5px; color: var(--c-gray); }
.th-target__req { margin-top: 8px; font-size: 12.5px; line-height: 1.85; color: #4A4358; }
.th-target__halves { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.th-half__t { font-size: 11.5px; color: #8A80A8; margin-bottom: 5px; }
.th-half__list { display: flex; flex-wrap: wrap; gap: 7px; }
.th-enemy { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; background: #F5F2FC; border-radius: 999px; font-size: 12px; }
.th-enemy img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* 观测枢富文本（th-rich）：表格 / details / 内联词条 / 说明图 */
.th-rich { margin: 12px 0 0; font-size: 13px; line-height: 1.9; color: #444; word-break: break-word; }
.th-rich h1, .th-rich h2, .th-rich h3 { font-size: 15px; margin: 16px 0 8px; color: #333; }
.th-rich p { margin: 0 0 9px; }
.th-rich hr { border: 0; border-top: 1px dashed #E2DCF0; margin: 14px 0; }
.th-rich ul, .th-rich ol { margin: 0 0 9px; padding-left: 20px; }
.th-rich details { margin: 10px 0; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow-card); }
.th-rich summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #5E4A98; }
.th-rich .rich-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 10px 0; background: #fff; }
.th-rich .rich-table td, .th-rich .rich-table th { padding: 7px 10px; border: 1px solid #EFEBF7; vertical-align: top; }
.th-rich .rich-table th { background: #F5F2FC; white-space: nowrap; }
.th-rich .rich-img { max-width: 100%; border-radius: 10px; display: block; margin: 8px 0; }
.th-rich .rich-fig { display: block; }
.th-rich .rich-entry { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 2px; background: #F1EDFB; border-radius: 999px; font-size: 12px; white-space: nowrap; vertical-align: middle; }
.th-rich .rich-entry img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.th-rich a { color: #5E4A98; text-decoration: none; border-bottom: 1px dotted #B9AEE0; }

/* ===== 秘境图鉴（观测枢 189/54）===== */
.ccard--domain { width: 200px; padding: 0; overflow: hidden;
  flex-direction: column; align-items: stretch; gap: 0; }   /* row 覆盖坑，必须显式声明 */
.ccard__art--domain { position: relative; width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #E8F1F8, #D6E6F2); }
.ccard__art--domain img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.ccard__dom-ph { font-size: 42px; opacity: .5; }
.ccard__cat--domain { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: #fff; background: rgba(45,72,110,.82); backdrop-filter: blur(2px); }
.ccard__dom-quest { position: absolute; right: 8px; top: 8px; padding: 2px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; color: #fff; background: #D89A3C; }
.ccard__dom-els { display: inline-flex; gap: 3px; align-items: center; margin-left: 6px; vertical-align: middle; }
.ccard__dom-el { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.detail--domain .dom-hero { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 8px; flex-wrap: wrap; }
.dom-hero__fig { position: relative; width: 260px; flex: 0 0 auto; margin: 0; }
.dom-hero__fig > img { width: 100%; border-radius: 16px; display: block; object-fit: cover; }
.dom-hero__icon { position: absolute; left: 12px; bottom: -18px; width: 64px; height: 64px; border-radius: 14px;
  background: #fff; box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dom-hero__icon img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.dom-hero__meta { flex: 1 1 380px; min-width: 0; padding-top: 4px; }
.dom-hero__meta .enemy-fields { margin-top: 12px; }
.dom-els { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.dom-el { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 4px;
  border-radius: 999px; background: #F1F5FA; font-size: 12.5px; font-weight: 600; color: #2D486E; }
.dom-el i { width: 19px; height: 19px; border-radius: 50%; font-style: normal; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center; }
.dom-els__label { font-size: 12px; color: var(--c-text-soft); margin-left: 2px; }
.dom-section { margin-top: 22px; }
.dom-section--level .enemy-section__title { color: #2D486E; }
.dom-shots { display: flex; gap: 14px; flex-wrap: wrap; }
.dom-shot { margin: 0; flex: 1 1 280px; max-width: 460px; }
.dom-shot img { width: 100%; border-radius: 14px; display: block; box-shadow: var(--shadow-card); cursor: zoom-in; }
.dom-shot figcaption { font-size: 12px; color: var(--c-text-soft); margin-top: 6px; text-align: center; }
.dom-regions { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.dom-regions i { font-style: normal; font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  background: #EAF1F8; color: #3E5A7E; }
.dom-monsters { display: flex; flex-direction: column; gap: 8px; }
.dom-mrow { background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow-card); }
.dom-rich { background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-card); }
/* 复用剧诗富文本排版（表格 / 词条 / 说明图） */
.dom-rich .rich-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 10px 0; }
.dom-rich .rich-table td, .dom-rich .rich-table th { padding: 7px 10px; border: 1px solid #E4EBF3; vertical-align: top; }
.dom-rich .rich-table th { background: #F1F6FB; }
.dom-rich .rich-entry { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 2px;
  background: #EAF1F8; border-radius: 999px; font-size: 12px; white-space: nowrap; vertical-align: middle; margin: 2px 2px 2px 0; }
.dom-rich .rich-entry img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.dom-rich .rich-img { max-width: 100%; border-radius: 10px; display: block; margin: 8px 0; }
.dom-rich p { margin: 0 0 9px; }

/* ===== 生物志 · 动物（与敌人同页双板块）=====
 * 2026-10-18 第六轮 用户：「动图图鉴没改过来，这块要按我说的改，类似我的敌人图鉴那样」。
 * ⇒ 整套对齐 .ccard--enemy：卡宽 156 / 图标 114×114 透明底方图 / 文字区居中无底板，
 *   列表图只用 B站 WIKI 图鉴的静态方图（ANIMAL_TAXONOMY[name].img），不再用观测枢 GIF 首帧截图。
 *   旧的 176 宽 + 米绿底板 + 右上「可捕获」角标 + 左上类型角标一并下线。 */
.ccard--animal {
  width: 156px;
  padding: 0;
  overflow: visible;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* ⚠️ 不加这句时，.grid-cards（flex-wrap, align-items:normal=stretch）会把卡片拉到整行最高，
       一旦某张卡的副标题多一行，整行卡片下面就是大片空白。 */
  align-self: flex-start;
}
.ccard--animal:hover { transform: none; box-shadow: none; }
.ccard--animal .ccard__art--animal {
  position: relative;
  width: 114px;
  height: 114px;
  aspect-ratio: auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;   /* bwiki 详图本身就是透明底 PNG */
}
.ccard--animal .ccard__art--animal img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transition: transform .28s ease;
  display: block;
}
.ccard--animal:hover .ccard__art--animal img { transform: translateY(-3px) scale(1.03); }
/* 没有 bwiki 图的那 20 只（7.0 至冬新动物等）→ 与敌人同样的统一剪影占位，别再退回 emoji */
.ccard--animal .ccard__animal-phimg { width: 74px; height: 74px; object-fit: contain; opacity: .45; }
.ccard--animal .ccard__main { padding: 0; background: transparent; align-items: center; text-align: center; gap: 3px; }
.ccard--animal .ccard__name { font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
.ccard--animal .ccard__info { font-size: 11.5px; color: var(--c-gray); margin-top: 2px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 已下线的旧元素：留着兜底隐藏，防止缓存里的旧 DOM 露出 */
.ccard__cat--animal, .ccard--animal .ccard__catch { display: none; }

/* ===== 动物详情页（2026-10-18 第五轮，照 B站 WIKI「野生生物」信息栏）=====
 * 整页只有一张居中表：名称横条 → 图区（动图 + 静态图并排）→ 类型/种类/出现地点/实装版本/能否捕捉/描述。
 * 旧的 .animal-hero / .animal-fig（静态主图 + 播放动图按钮）随版式下线。 */
.detail--animal { background: #FBFCFD; }
.animal-tbl {
  max-width: 1000px;
  margin: 26px auto 40px;
  border: 1px solid #DCD8CC;
  background: #fff;
  box-shadow: 0 1px 3px rgba(60, 50, 30, .05);
}
.animal-tbl__name {
  background: #E9E6DC; color: #4B463A;
  font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 15px;
  text-align: center; padding: 9px 12px;
  border-bottom: 1px solid #DCD8CC;
}
/* 图区：动图与静态图并排居中（两张都在表格里） */
.animal-tbl__media {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 22px; padding: 20px 18px; background: #F7F6F2;
  border-bottom: 1px solid #E2DDD0;
}
.animal-tbl__fig { margin: 0; display: flex; align-items: center; justify-content: center; }
/* 动图（观测枢 GIF）多为 499×239 这类横幅场景图 → 不要硬塞进正方形，按原比例限宽；
   静态图（B站 立绘）是竖图 → 给一个 240 高的框。两张并排，垂直居中对齐。 */
.animal-tbl__fig--anim img { max-width: 340px; max-height: 240px; width: auto; height: auto; }
.animal-tbl__fig--still { width: 240px; height: 240px; }
.animal-tbl__fig img { max-width: 100%; max-height: 240px; object-fit: contain; display: block; cursor: zoom-in; border-radius: 3px; }
.animal-tbl__ph { font-size: 44px; opacity: .3; padding: 70px 0; }
.animal-tbl__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); border-bottom: 1px solid #E9E5DA; }
.animal-tbl__row:last-child { border-bottom: 0; }
.animal-tbl__k {
  background: #EFEDE4; color: #6E6A5E; font-size: 13px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 9px 8px; border-right: 1px solid #E2DDD0;
}
.animal-tbl__v { padding: 10px 16px; font-size: 14px; line-height: 1.75; color: #3C4652; min-width: 0; }
.animal-tbl__v p { margin: 0 0 9px; }
.animal-tbl__v p:last-child { margin-bottom: 0; }
.animal-tbl__none { color: #A8B4C0; }
@media (max-width: 720px) {
  .animal-tbl { margin: 16px 0 28px; }
  .animal-tbl__fig { width: 46%; height: 150px; }
  .animal-tbl__fig img { max-height: 150px; }
  .animal-tbl__row { grid-template-columns: 78px minmax(0, 1fr); }
  .animal-tbl__v { padding: 9px 12px; font-size: 13.5px; }
}

/* ===== 地区供奉 & 聚所（观测枢 189/276）===== */
.ccard--offering { width: 200px; padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; }
.ccard__art--offering { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #F6F2E9; }
.ccard__art--offering img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s ease; }
.ccard--offering:hover .ccard__art--offering img { transform: scale(1.05); }
.ccard__offering-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: .4; }
.ccard__cat--off { background: rgba(122, 82, 50, .88); box-shadow: 0 2px 8px rgba(80, 52, 30, .24); }
.ccard--offering .ccard__main { padding: 9px 11px 11px; }
.ccard--offering .ccard__name { font-size: 12.5px; line-height: 1.4; }
.ccard--offering .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 3px; }

.detail--offering { background: #FBF9F4; }
.off-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; max-width: 880px; }
.off-icon { width: 148px; height: 148px; margin: 0; border-radius: 18px; overflow: hidden; background: #F6F2E9;
  box-shadow: var(--shadow-card); flex: none; display: flex; align-items: center; justify-content: center; }
.off-icon img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.off-icon__ph { font-size: 40px; opacity: .4; }
.off-head__meta { flex: 1 1 320px; min-width: 240px; }
.off-banner { margin: 18px 0 4px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); background: #EFE9DD; }
.off-banner img { width: 100%; display: block; cursor: zoom-in; }

/* 互动地图外链（观测枢把地图包成 iframe，离线站点改成外链卡片） */
.th-maps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.th-map { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px;
  background: #fff; box-shadow: var(--shadow-card); font-size: 13px; color: var(--c-text); text-decoration: none; transition: transform .2s ease; }
.th-map:hover { transform: translateY(-2px); }
.th-map__icon { font-size: 15px; }
.th-map__arrow { color: var(--c-text-soft); font-size: 12px; }

/* 富文本表格（供奉奖励表：单元格里有材料小标签） */
.th-table--rich td, .th-table--rich th { vertical-align: top; }
.th-table--rich td .rich-entry, .th-table--rich th .rich-entry { display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 9px 1px 2px; background: #F1ECE0; border-radius: 999px; font-size: 12px; white-space: nowrap; vertical-align: middle; margin: 2px 2px 2px 0; }
.th-table--rich td .rich-entry img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.th-table--rich td p { margin: 0 0 5px; }
.th-table--rich .rich-img { max-width: 100%; border-radius: 8px; display: block; margin: 6px 0; }

/* ===== 活动（观测枢 189/105）=====
   卡面横幅图宽高比实测 0.42~5.32（从 150x150 到 1314x1770 都有）→ 一律 contain，
   用 cover 会把活动标题图裁掉。 */
.ccard--event { width: 232px; padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; }
.ccard__art--event { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #FBF1EA; }
.ccard__art--event img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s ease; }
.ccard--event:hover .ccard__art--event img { transform: scale(1.04); }
.ccard__event-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; opacity: .38; }
.ccard__cat--event { background: rgba(176, 74, 38, .88); box-shadow: 0 2px 8px rgba(120, 48, 24, .24); }
/* ⚠️ .ccard__ver 的基础样式是写死在 .ccard--ach 下的，新分类复用它必须自己再声明一遍 */
.ccard__art--event .ccard__ver { position: absolute; top: 8px; right: 8px; left: auto; font-size: 10px; font-weight: 600;
  color: #fff; background: rgba(122, 106, 156, .82); padding: 2px 8px; border-radius: 9px; box-shadow: 0 2px 8px rgba(60, 50, 90, .22); }
.ccard--event .ccard__main { padding: 9px 11px 11px; }
.ccard--event .ccard__name { font-size: 12.5px; line-height: 1.4; }
.ccard--event .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 3px; }

.detail--event { background: #FFFBF7; }
/* ⚠️ 横幅图宽高比差异极大（实测 0.42~5.32），主视觉多为 16:9 左右：
 * 容器限宽 900px + img height:auto ⇒ 常见宽图正好铺满、**两侧不出灰边**；
 * max-height 只在极端竖图上生效，此时 object-fit:contain 保证不裁掉标题。 */
.ev-banner { max-width: 900px; margin: 16px 0 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); background: #F5EDE6; }
.ev-banner img { width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; cursor: zoom-in; }
.ev-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; max-width: 880px; margin-top: 18px; }
.ev-icon { width: 116px; height: 116px; margin: 0; border-radius: 18px; overflow: hidden; background: #FBF1EA;
  box-shadow: var(--shadow-card); flex: none; display: flex; align-items: center; justify-content: center; }
.ev-icon img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.ev-head__meta { flex: 1 1 320px; min-width: 240px; }
.ev-head__sum { margin-top: 10px; font-size: 13px; color: var(--c-text-soft); line-height: 1.7; }
.enemy-el--evtype { background: #B04A26; }
.enemy-el--evver { background: #7A6A9C; }

/* 键值节：键是「【活动简介】」这类标签，值是**真 HTML**（内联词条 / 配图） */
.ev-kv { display: flex; flex-direction: column; gap: 14px; }
.ev-kv__row { background: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-card); }
.ev-kv__k { font-size: 12.5px; font-weight: 700; color: #B04A26; margin-bottom: 6px; }
.ev-kv__v > :last-child { margin-bottom: 0; }
.ev-gallery { display: flex; flex-direction: column; gap: 14px; }
.ev-fig { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); }
.ev-fig img { width: 100%; display: block; cursor: zoom-in; }
/* ⚠️ 2026-10-14 用户要求：「地图说明下面的图片统一一行摆放，摆放不下了才另一行」。
 *   演进：原始 100% 竖排 → 40%（两张并列）→ 4 张一行的 10% 小图（2026-10-06）→ 现在。
 *   问题：2026-10-06 那版是 **JS 按每 4 张切行 + CSS 固定 4 列**，容器只占满宽的 40% ——
 *   5 张图变成「4 + 1」两行、10 张变「4 + 4 + 2」三行，右边一大片空白，观感很碎。
 *   现在改为 **CSS 栅格 10 列**（单图 ≈ 满宽的 1/10，与上一版尺寸基本一致），
 *   JS **不再切行**，所有图直接铺进同一个栅格 → 10 张以内永远一行铺满；
 *   超过 10 张才自动换行（正好对应「摆放不下了才另一行」）。
 *   窄屏降到 8 列 / 5 列，避免单图被压到看不清。
 *   ⚠️ .ev-gallery--s 只有任务详情页的「地图说明」在用，所以这里直接改基类，不再挂 .qd-mapsec 前缀。 */
.ev-gallery--s {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.ev-gallery--s > .ev-fig { width: auto; max-width: none; }
.ev-gallery--s > .ev-fig figcaption { font-size: 11px; padding: 4px 8px 6px; }
@media (max-width: 1240px) { .ev-gallery--s { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ev-gallery--s { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } }
/* ⚠️ 2026-10-14：地图块现在有两种形态 —— 未折叠时是 `.enemy-section.qd-mapsec`，
 *   折叠后（任务过程以下默认收起）是 `details.qd-fold > .qd-foldbody`。
 *   所以这里的样式一律挂在 **`.ev-gallery--s`** 上（它只有「地图说明」在用），
 *   不要再带 `.qd-mapsec` 前缀，否则折叠态会丢掉圆角、并重新冒出「点击看大图」小字。 */
.ev-gallery--s > .ev-fig { border-radius: 8px; }
.ev-gallery--s figcaption span { display: none; }

/* 「活动祈愿一览」有 ~100 个时段分组 → 折叠，否则一屏上千张图 */
.ev-tl { display: flex; flex-direction: column; gap: 10px; }
.ev-tl__grp { background: #fff; border-radius: 12px; box-shadow: var(--shadow-card); padding: 10px 16px; }
.ev-tl__grp > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.ev-tl__grp > summary::-webkit-details-marker { display: none; }
.ev-tl__grp > summary::before { content: '▸'; color: #B04A26; font-size: 12px; transition: transform .2s ease; }
.ev-tl__grp[open] > summary::before { transform: rotate(90deg); }
.ev-tl__n { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--c-text-soft); background: #F6EFE9; border-radius: 999px; padding: 2px 9px; }
.ev-tl__row { margin-top: 12px; border-top: 1px solid #F2EAE3; padding-top: 10px; }
.ev-tl__k { font-size: 12px; font-weight: 700; color: #7A6A9C; margin-bottom: 6px; }

/* 角色对话彩蛋 */
.ev-dlg { display: flex; flex-direction: column; gap: 12px; }
.ev-dlg__line { background: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-card); border-left: 3px solid #E4794A; }
.ev-dlg__who { font-size: 12.5px; font-weight: 700; color: #B04A26; margin-bottom: 6px; }
.ev-dlg__txt ul { margin: 0; padding-left: 20px; }
.ev-dlg__txt li { margin: 4px 0; }

/* 双板块筛选条（生物志：敌人 / 动物） */
.filters--blocks { margin-bottom: 6px; }
.filters--blocks .chip__n { font-size: 10.5px; opacity: .7; margin-left: 5px; }
.filters__row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.filters__hint { font-size: 12px; color: var(--c-text-soft); padding: 2px 0 8px; }

@media (max-width: 900px) {
  .furn-icon { width: 128px; height: 128px; }
  .th-card-fig { width: 100%; max-width: 320px; }
  .th-filter__k { width: 100%; }
  /* 动物卡已对齐敌人卡（156 固定宽 + 114 图标），不再跟这组一起吃 46vw；
     摆设卡 2026-10-20 起改为固定 132（与背包/食物卡同宽），也不再吃 46vw */
  .ccard--theater, .ccard--domain, .ccard--offering, .ccard--event { width: 46vw; }
  .off-icon { width: 108px; height: 108px; }
  .ev-icon { width: 92px; height: 92px; }
  .th-wrap { gap: 20px; }
}

/* ≤1149：宽度再也塞不下「汉堡 + 版本框 + 20 个分类」→ 整条折叠（.nav__tools 一起收走）
 * ⚠️ 1149~1240 那段单独在上面的中档里处理：分类进汉堡，但版本框继续留在导航栏。 */
@media (max-width: 1149px) and (min-width: 769px) {
  .nav { padding: 0 20px; }
  .nav__links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 16px; max-width: none; overflow: visible;
    background: var(--c-primary-dark); padding: 16px 20px;
  }
  .nav--open .nav__links { display: flex; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
  .nav--open .nav__links a { font-size: 15px; }
  .nav__search { display: none; }
  .nav__tools { display: none; }
  .nav__toggle { display: flex; }
}

/* ===== 分类懒加载占位（数据脚本按需注入期间的过渡态）===== */
.catload {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: calc(100vh - var(--nav-h, 56px) - 130px);
  padding: 60px 24px; text-align: center;
}
.catload__spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(58, 74, 105, .14); border-top-color: var(--c-primary, #3A4A69);
  animation: catspin .8s linear infinite;
}
@keyframes catspin { to { transform: rotate(360deg); } }
.catload__t { font-size: 17px; font-weight: 500; color: var(--c-text, #2C3A4B); }
.catload__d { font-size: 13px; color: var(--c-text-3, #8A93A3); max-width: 420px; line-height: 1.7; }
.catload--err .catload__t { color: #C0392B; }
.catload__d code { background: rgba(58, 74, 105, .08); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.catload__retry {
  margin-top: 4px; padding: 8px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--c-primary, #3A4A69); color: #fff; font-size: 14px; font-family: inherit;
}
.catload__retry:hover { filter: brightness(1.12); }

/* ===== 魔神任务：B站 wiki 版「任务信息表」（截图2 版式）=====
 * 左列灰底字段名（固定 ~104px），右列内容；行间细分隔线；整块浅灰描边。
 * 数据源 assets/archon-bwiki-data.js，渲染见 app.js::bwikiTableHTML()。 */
.bwt {
  margin-top: 18px; border: 1px solid #E3E9F0; border-radius: 10px;
  overflow: hidden; background: #fff; font-size: 13px;
}
.bwt__row { display: flex; align-items: stretch; border-top: 1px solid #EDF1F6; }
.bwt__row:first-child { border-top: 0; }
.bwt__k {
  flex: 0 0 104px; padding: 9px 12px; background: #F4F7FA; color: #5A6B7C;
  font-weight: 600; line-height: 1.6; display: flex; align-items: center;
}
.bwt__v { flex: 1 1 auto; min-width: 0; padding: 9px 14px; color: var(--c-ink, #1A1A2E); line-height: 1.7; }
.bwt__sub { font-size: 12px; color: #7A8A9A; margin-top: 2px; }
.bwt__a { display: block; color: var(--c-primary, #1491BB); text-decoration: none; line-height: 1.85; }
.bwt__a:hover { text-decoration: underline; }
/* ⚠️ 2026-10-06：用户要求这三行的链接**都跳站内图鉴明细页**，不要跳 B站 wiki。
 *   命中站内 → .bwt__a--in（主色，实心可点）；
 *   站内查无此条目 → .bwt__a--ext 退回 B站外链（降一级颜色 + 末尾 ↗，一眼能分辨）。 */
.bwt__a--in { color: var(--c-primary, #1491BB); }
.bwt__a--in::after { content: '›'; margin-left: 3px; opacity: .55; }
.bwt__a--ext { color: #7A8A9A; }
.bwt__a--ext::after { content: '↗'; margin-left: 3px; font-size: 11px; opacity: .7; }
.bwt__a--ext:hover { color: var(--c-primary, #1491BB); }
.bwt__list { display: flex; flex-direction: column; }
/* 相关活动一般是单个链接，行内展示更紧凑 */
.bwt__row:has(> .bwt__k) .bwt__v > .bwt__a:only-child { display: inline; }
/* 出场人物：头像 + 名字流式排列 */
.bwt__people { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.bwt__p {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px;
  border-radius: 999px; text-decoration: none; color: inherit; line-height: 1.5;
}
.bwt__p:hover { background: #F1F6FA; }
.bwt__p img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #EEF2F6; }
.bwt__pn { font-size: 12.5px; white-space: nowrap; }
/* 无头像人物（B站无页面的路人）：不加圆底、不可点，前缀 ✦ */
.bwt__pn--bare { color: #6B7A8A; cursor: default; padding: 2px 0; }
/* ⚠️ 2026-10-14：无头像人物现在也可能命中站内条目（NPC 索引补齐后）→ 命中时渲染成 <a>，
 *   必须把 cursor / 颜色改回来，否则「看着像链接却点不动」。 */
.bwt__pn--bare[href] { color: var(--c-primary, #1491BB); cursor: pointer; }
.bwt__pn--bare[href]:hover { text-decoration: underline; }
.bwt__p--nopage { cursor: default; }
/* 任务描述（2026-10-14 新增行，位于「出场人物」下面）：整段散文，行距放宽便于阅读 */
.bwt__desc { font-size: 13px; line-height: 1.85; color: var(--c-ink, #1A1A2E); }
@media (max-width: 900px) {
  .bwt__k { flex: 0 0 78px; padding: 8px 9px; font-size: 12px; }
  .bwt__v { padding: 8px 10px; }
  .bwt__p img, .bwt__ph { width: 26px; height: 26px; }
}

/* ===== 限时 / 其他任务详情（观测枢频道 189/43 增量）===== */
/* 详情正文是 sections[] 驱动：kv 走 .enemy-fields、rich 走 .mt-rich、map 走 .ev-gallery，
 * 这里只补对话块（.qd-*）与容器微调 */
.detail--quest43 .detail__item-info { display: flex; flex-direction: column; gap: 18px; }
/* ⚠️ 2026-10-06：flex 列容器的子项默认 min-width:auto —— 右侧对话区一旦出现
 *   nowrap 内容（章节导航 chip / 超长台词），整列会被撑宽到内容宽度，
 *   在窄屏直接把页面顶出屏幕（实测 5122px vs 视口 390px）。
 *   这里统一把该链路上的子项压到 min-width:0，让内部滚动容器真正生效。 */
.detail--quest43 .detail__item-info > *,
.detail--quest43 .qs-stage > *,
.detail--quest43 .qs-shared > * { min-width: 0; max-width: 100%; }
.detail--quest43 .enemy-section { margin-top: 0; }

/* ⚠️ 2026-10-06：用户要求「任务奖励下面的内容用一行展示，不要竖排展示」。
 *   safeRich 把奖励词条渲染成一串块级 <p>（每个词条一行）→ 这里把容器改横向 flex、
 *   并把内部块级标签**平化**，整条奖励就排成一行；空间不够时自然换行（wrap）。 */
.mt-rich--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mt-rich--inline > p, .mt-rich--inline > div { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.mt-rich--inline .rich-entry { display: inline-flex; align-items: center; gap: 6px; }
.mt-rich--inline img { max-height: 40px; width: auto; height: auto; }

/* 剧情对话：147 节、每节最多上百句 → 必须折叠，展开区内部再限高滚动 */
.qd-wrap { background: #fff; border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.qd-sum {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; margin: 0; background: #FBFDFF;
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.qd-sum::-webkit-details-marker { display: none; }
.qd-sum::before { content: '▸'; color: var(--c-primary); font-size: 12px; transition: transform .2s ease; }
.qd-wrap[open] .qd-sum::before { transform: rotate(90deg); }
.qd-wrap[open] .qd-sum { border-bottom-color: #EDF3F9; }
.qd-n {
  margin-left: auto; font-size: 11px; font-weight: 500; color: var(--c-gray, #718097);
  background: #EEF5FA; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
/* ⚠️ 2026-10-07：剧情对话改为**默认展开**（原先默认折叠、要手动点开）。
 *   状态反转后，标题上原来的 ▸ 箭头语义不再自明 → 补一句随 [open] 自动切换的提示，
 *   文案由 CSS 生成，不需要 JS 监听 toggle。 */
.qd-hint { font-size: 11px; font-weight: 400; color: var(--c-gray, #718097); white-space: nowrap; }
.qd-hint::after { content: '点击收起'; }
.qd-wrap:not([open]) .qd-hint::after { content: '点击展开'; }
.qd-body {
  padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 8px;
  max-height: 560px; overflow-y: auto;
}
/* ⚠️ 2026-10-14 用户要求：「任务过程下面的内容优先隐藏，要查看需要点击」。
 *   任务奖励 / 地图说明 / 剧情对话 三块统一折成 <details class="qd-wrap qd-fold">，默认收起。
 *   复用 .qd-wrap/.qd-sum/.qd-hint（箭头 + 「点击展开 / 点击收起」文案是 CSS 按 [open] 生成的），
 *   展开区用不带滚动条的 .qd-foldbody —— 地图说明是满宽栅格、奖励是一行词条，
 *   都不该再套 560px 的内部滚动（那一层留给剧情对话的 .qd-body）。 */
.qd-fold > .qd-foldbody { padding: 14px 18px 16px; }
.qd-fold > .qd-foldbody > .enemy-section:first-child { margin-top: 0; }
/* ⚠️ 2026-10-06：剧情对话新增**左侧导航栏**（用户要求）。
 *   从对话里抽「章节标题(kind=h2)」当锚点，点击滚动到对应位置。
 *   布局：[左导航 208px 吸顶] + [右对话流]；窄屏折叠成顶部横向 chip 条。 */
.qd-split { display: flex; align-items: stretch; gap: 0; min-width: 0; max-width: 100%; }
.qd-nav {
  flex: 0 0 208px; align-self: stretch; border-right: 1px solid #EDF3F9; background: #FBFDFF;
  max-height: 560px; overflow-y: auto; padding: 12px 8px 14px;
  scrollbar-width: thin;
}
.qd-nav__t {
  font-size: 11px; font-weight: 700; color: #8A9BA9; letter-spacing: .5px;
  padding: 0 8px 8px; margin: 0;
}
.qd-nav__list { display: flex; flex-direction: column; gap: 2px; }
.qd-nav__i {
  display: flex; align-items: flex-start; gap: 7px; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 12.5px; line-height: 1.5; color: #4A5670;
  padding: 6px 8px; border-radius: 7px; transition: background .15s ease, color .15s ease;
}
.qd-nav__i:hover { background: #EEF5FA; color: #0E6E8E; }
.qd-nav__i.is-active { background: #E4F0F7; color: #0E6E8E; font-weight: 700; }
.qd-nav__n {
  flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px;
  background: #E9F1F7; color: #6B8494; font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.qd-nav__i.is-active .qd-nav__n { background: var(--c-primary, #1491BB); color: #fff; }
.qd-nav__x { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-main { flex: 1 1 auto; min-width: 0; }
.qd-main.qd-body { max-height: 560px; }
/* —— 魔神任务「剧情对话分段导航」（2026-10-17 晚）——
 * 用户要求：「剧情对话的内容在左侧有剧情导航（1 继续前进 2 到派蒙附近 …），右侧则是具体的对话文本」。
 * 与传说任务的区别：这里**不套 560px 内滚动**（魔神一阶段动辄上百句，内部滚动条很难用），
 * 所以给 .qd-split 加 `--page` 修饰类：正文随页面滚动，导航吸顶，点击由 bindDialogueNav 滚整页。
 * 原先的 `.qs-split / .qs-nav`（阶段目录）已废弃 —— 阶段切换只保留顶部 #qsTabs chip。 */
.qd-split--page { align-items: flex-start; }
.qd-split--page .qd-nav {
  position: sticky; top: 12px; align-self: flex-start;
  max-height: calc(100vh - 32px); border-right: 0;
  border: 1px solid #EDF3F9; border-radius: 10px;
}
.qd-split--page .qd-body { max-height: none; overflow: visible; }
/* —— 传说任务 / 邀约 / 热点 的剧情块（2026-10-17）——
 * 与外层信息表同宽；左栏目录 + 右栏正文，交互完全复用 .qd-split / bindDialogueNav。
 * 头部用 .qd-stage__sum 而非 <summary>：这一块不是可折叠的 <details>，是常驻正文。 */
.qd-stage { margin: 14px 0 0; }
.qd-stage__sum {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; background: #FBFDFF; border-bottom: 1px solid #EDF3F9;
  font-size: 14px; font-weight: 700; color: #3E4C63;
}
.qd-stage .qd-body { max-height: 72vh; }
.lgsec + .lgsec { border-top: 1px dashed #E6EEF5; margin-top: 16px; padding-top: 14px; }
.lgsec__h {
  margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: #0E6E8E;
  padding-left: 9px; border-left: 3px solid var(--c-primary, #1491BB); line-height: 1.3;
}
.lgsub + .lgsub { margin-top: 10px; }
/* 锚点闪烁时别把整行染黄到标题 —— 只闪内容区 */
.lgsec.qd-sec-flash, .lgsub.qd-sec-flash { animation: qdFlash 1.1s ease; }
/* 滚动定位：锚点靠近容器顶部时留一点呼吸空间（配合 bindDialogueNav 的 offsetTop 计算） */
.qd-body [data-qd-sec] { scroll-margin-top: 12px; }
.qd-nav { scrollbar-width: thin; }
.qd-body { scrollbar-width: thin; }
/* 锚点高亮闪烁，帮助定位 */
.qd-sec-flash { animation: qdFlash 1.1s ease; }
@keyframes qdFlash {
  0% { background: #FFF3D6; }
  100% { background: transparent; }
}
.qd-line { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.75; margin: 0; }
.qd-who { flex: 0 0 auto; font-weight: 700; color: var(--c-primary-dark, #0E6E8E); white-space: nowrap; }
.qd-who::after { content: '：'; }
.qd-txt { color: var(--c-ink, #1A1A2E); min-width: 0; }
/* safeRich 产出的是块级 <p>，但这里是「说话人：内容」同一行 → 平化掉 */
.qd-txt > p { display: inline; margin: 0; }
.qd-txt > p + p { display: block; margin: 0; }
.qd-txt > span, .qd-txt > strong, .qd-txt > em { display: inline; }
/* 玩家选项：左侧描边 + 缩进，与 NPC 台词形成对话节奏 */
.qd-opt {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 0 6px 26px; padding: 7px 14px; font-size: 13px; line-height: 1.7;
  color: #4A5670; background: #F6FAFD; border-left: 3px solid var(--c-primary, #1491BB); border-radius: 0 10px 10px 0;
}
.qd-opt::before { content: ''; }
.qd-opt-ic {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff 0 22%, transparent 23%),
    linear-gradient(135deg, var(--c-primary, #1491BB), #0E6E8E);
  opacity: .8;
}
.qd-opt-t { flex: 1 1 auto; }

/* ⚠️⚠️ 2026-10-06：对齐米游社原页面的「居中行」——
 *   ① 章节标题（h2.custom-heading-cls）与场景描述（p[text-align:center]）
 *      都是**居中 + 加粗**，且有**独立于普通台词的背景条**（原页面是浅灰蓝条）。
 *   ② 普通台词保持左对齐、无背景。
 *   原实现把这两类行当普通文字左对齐渲染 → 这里补回来。 */
.qd-head, .qd-scene {
  margin: 8px 0; padding: 9px 16px; text-align: center; font-weight: 700;
  color: #33505F; background: #EEF3F8; border-radius: 8px;
  font-size: 13.5px; line-height: 1.7;
}
.qd-head { font-size: 14px; letter-spacing: .3px; color: #2A4553; background: #E7EEF5; }
.qd-body > .qd-head:first-child, .qd-body > .qd-scene:first-child { margin-top: 0; }

/* 剧情对话里的内联道具（custom-entry-wrapper → .rich-entry）：
 * 原页面是「图标 + 名称」且可点击跳转对应道具页，这里给对话区补上对应样式 */
.qd-body .rich-entry {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px 1px 2px;
  background: #F1EDFB; border-radius: 999px; font-size: 12px; white-space: nowrap; vertical-align: middle;
}
.qd-body .rich-entry a, .qd-body a.rich-entry { text-decoration: none; }
.qd-body .rich-entry img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.qd-body img.rich-img { max-width: 100%; border-radius: 10px; display: block; margin: 8px auto; }

@media (max-width: 900px) {
  .qd-body { padding: 12px 14px 14px; max-height: 420px; }
  /* 窄屏标题行放不下「点击收起 / 点击展开」→ 收掉（箭头 ▸/▾ 仍然表达状态） */
  .qd-hint { display: none; }
  .qd-line { gap: 8px; font-size: 13px; }
  .qd-opt { margin-left: 14px; }
  /* 窄屏：左导航变顶部横向 chip 条 */
  .qd-split { flex-direction: column; width: 100%; max-width: 100%; }
  .qd-nav {
    flex: 0 0 auto; align-self: stretch; width: 100%; max-width: 100%;
    box-sizing: border-box; overflow: hidden;
    border-right: 0; border-bottom: 1px solid #EDF3F9;
    max-height: none; padding: 10px 12px;
  }
  .qd-nav__t { padding: 0 0 6px; }
  /* ⚠️ 横向 chip 条：外层定宽 + 本层 min-width:0 + overflow-x:auto 三件套缺一不可，
   *    否则 flex 子项按 max-content 撑宽，整列被顶出屏幕（实测 nav/页面宽 5122px）。 */
  .qd-nav__list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; min-width: 0; width: 100%; max-width: 100%; }
  .qd-nav__i { width: auto; flex: 0 0 auto; white-space: nowrap; border: 1px solid #E4EDF3; border-radius: 999px; }
  .qd-nav__x { white-space: nowrap; }
  .qd-main.qd-body { max-height: 420px; min-width: 0; width: 100%; }
  /* 魔神阶段内是「整页滚动」模式：窄屏也不能退回 420px 内滚动，否则点击导航滚的是页面而正文不动 */
  .qd-split--page { display: block; }
  .qd-split--page .qd-nav { position: static; max-height: none; margin-bottom: 10px; }
  .qd-split--page .qd-main.qd-body { max-height: none; overflow: visible; padding: 0; }
}

/* 多阶段任务：阶段切换 tab（如「冒险协会的考验」的 冒险等阶突破·一/二/三） */
.qs-shared { margin-bottom: 18px; }
.qs-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  padding: 12px 14px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-card-sm);
}
.qs-tabs::before {
  content: '任务阶段'; font-size: 12px; font-weight: 700; color: var(--c-gray, #718097);
  align-self: center; margin-right: 4px; letter-spacing: .3px;
}
.qs-stage { display: flex; flex-direction: column; gap: 18px; }
.qs-stage[hidden] { display: none; }

/* ===== 委托任务（观测枢 189/55，292 条）+ 游逸旅闻（189/261，63 条）2026-09-27 ===== */
/* 卡片网格的空状态：筛选后 0 条时替代整片空白，避免看起来像「加载失败」 */
.grid-empty {
  margin: 0 var(--pad-x) 60px; padding: 46px 24px; text-align: center;
  font-size: 14px; line-height: 1.8; color: var(--c-text-soft, #718097);
  background: #fff; border-radius: var(--radius-card, 16px); box-shadow: var(--shadow-card);
  border: 1px dashed rgba(20, 105, 140, .22);
}
.grid-empty[hidden] { display: none; }

/* 委托任务卡：**紧凑横卡**（左 52×52 委托图标 + 右 名称/区域·类型）。
 * 为什么不用大图卡：292 条里 249 条「每日委托」共用同一张图标（官方只给分类图标，不是逐条配图），
 * 大图版会排出一整片一模一样的紫色方块，既占位置又不带信息量 → 改为密集横卡，一屏能扫 10+ 条。 */
.ccard--commission { width: 268px; padding: 12px 14px; gap: 12px; align-items: center; }
.ccard__badge--cm {
  position: relative; width: 52px; height: 52px; padding: 4px; overflow: hidden;
  background: #F1F5F9 !important; box-shadow: inset 0 0 0 1px rgba(20, 69, 107, .08);
}
.ccard__badge--cm img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ccard__badge--cm .ccard__cm-ph { font-size: 22px; line-height: 1; }
/* 委托类型的色条：同 type 的卡一眼能扫出来（值来自官方 6 类） */
.ccard__badge--cm::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cm-c, #8899AA);
}
.ccard--commission .ccard__main { flex: 1 1 auto; gap: 3px; }
.ccard--commission .ccard__name { font-size: 14px; line-height: 1.3; }
.ccard--commission .ccard__info { font-size: 11.5px; color: var(--c-gray); }
.ccard--commission .ccard__meta { font-size: 11px; color: var(--c-text-soft, #718097); }
.ccard__cm-ach {
  flex: 0 0 auto; font-size: 10px; line-height: 1; padding: 4px 6px; border-radius: 999px;
  color: #7A5A12; background: #FDF3DE; box-shadow: inset 0 0 0 1px rgba(190, 150, 60, .22);
}

/* 游逸旅闻卡：方形头像 + 元素点（同角色卡的无底板风格，但排在自己的一套尺寸里） */
.ccard--anecdote { width: 200px; padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; }
.ccard__art--anec { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(160deg, #F4F7FB, #E7EFF7); }
.ccard__art--anec img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ccard--anecdote:hover .ccard__art--anec img { transform: scale(1.04); }
.ccard__anec-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: #8FA6C0; }
.ccard__anec-el { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 2px 6px rgba(20, 50, 80, .22); }
.ccard--anecdote .ccard__main { padding: 9px 11px 11px; }
.ccard--anecdote .ccard__name { font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard--anecdote .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 游逸旅闻 / 委托任务详情页布局。
 * ⚠️ `.detail__item` 的 flex 是**逐页写在 `.detail--X` 作用域里**的（.detail--archon / .detail--bag …），
 *    没有全局默认值。`.detail--quest43` 一直没写 → 限时/其他/委托任务的详情页会退化成
 *    「竖排 + 300×380 空框里塞一张小图标」。这里一次补齐两个新页面。 */
.detail--quest43 .detail__item,
.detail--anecdote .detail__item { display: flex; gap: 44px; align-items: flex-start; }
.detail--quest43 .detail__item-cover,
.detail--anecdote .detail__item-cover {
  flex-shrink: 0; border-radius: 20px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: var(--shadow-card); background: linear-gradient(160deg, #F3F7FC, #E4ECF5);
}
.detail--quest43 .detail__item-cover { width: 260px; height: 260px; }
.detail--anecdote .detail__item-cover { width: 280px; height: 280px; }
/* 卡图有三种源分辨率：任务 256×256 / 委托任务 56×56 / 逸闻立绘 196×196（OSS 的 resize 不会放大）。
 * 用「固定百分比 + contain」让三种比例都居中铺满，不裁切也不拉伸；56px 那批会被放大，但那是源站上限。 */
.detail--quest43 .detail__item-cover img,
.detail--anecdote .detail__item-cover img { object-fit: contain; display: block; cursor: zoom-in; }
.detail--quest43 .detail__item-cover img { width: 84%; height: 84%; }
.detail--anecdote .detail__item-cover img { width: 74%; height: 74%; }
.detail--quest43 .detail__title,
.detail--anecdote .detail__title { font-size: 30px; }
.detail--quest43 .detail__item-info,
.detail--anecdote .detail__item-info { flex: 1 1 auto; min-width: 0; }
@media (max-width: 900px) {
  .detail--quest43 .detail__item,
  .detail--anecdote .detail__item { flex-direction: column; align-items: stretch; }
  /* ⚠️ 2026-10-06：桌面态是 `align-items: flex-start`（横排时正确），
   *    但窄屏改成竖排后 flex-start 会让每块按 **max-content** 定宽 ——
   *    右侧对话区里的横向章节导航条（nowrap chip）一带头，整列被撑到 5122px、
   *    页面横向溢出。这里显式 stretch + min-width:0 把宽度收进视口。 */
  .detail--quest43 .detail__item-info,
  .detail--anecdote .detail__item-info { width: 100%; min-width: 0; max-width: 100%; }
  .detail--quest43 .detail__item-cover { width: 180px; height: 180px; }
  .detail--anecdote .detail__item-cover { width: 100%; max-width: 240px; height: 240px; }
}

/* ⚠️ 2026-10-14 用户要求：「所有任务详情页的图标去掉，去掉以后把整个任务详情页的范围往左侧拓展」。
 *   任务详情页左侧那块 260×260 / 280×280 的封面框里，装的是卡面主图 / 魔神立绘 / 逸闻头像，
 *   源图缺失时退化成「大空框 + 中间一个小图标」（这就是用户说的「图标」）——
 *   现在**整块去掉**（display:none 而非删 DOM：封面同时是「点击看大图的立绘」入口，
 *   删掉 DOM 会连带失去 data-zoom 的锚点；display:none 后 lazy 图也不会再下载），
 *   右侧信息区由 flex 子项变成独占整行 → 内容自然往左铺到原来封面所在的位置。
 *   覆盖任务页下的全部 4 个渲染器：
 *     · .detail--quest43  魔神 / 传说 / 世界 / 限时·其他 / 全量明细 / 委托
 *     · .detail--event    传说任务兜底渲染器 + 活动任务（活动详情页本身用 .ev-banner/.ev-head，无 .detail__item，不受影响）
 *     · .detail--archon   魔神任务旧渲染器（无 sections 时的兜底）
 *     · .detail--anecdote 游逸旅闻（同在任务页下） */
.detail--quest43 .detail__item,
.detail--event .detail__item,
.detail--archon .detail__item,
.detail--anecdote .detail__item { display: block; }
.detail--quest43 .detail__item-cover,
.detail--event .detail__item-cover,
.detail--archon .detail__item-cover,
.detail--anecdote .detail__item-cover { display: none; }

/* 游逸旅闻详情页：属性小标签 */
.anec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.anec-chip {
  font-size: 11.5px; line-height: 1; padding: 5px 10px; border-radius: 999px;
  color: #2B4A6B; background: #E8F0F9; box-shadow: 0 1px 3px rgba(20, 60, 100, .10);
}
.anec-chip:first-child { color: #8A5A12; background: #FBF1DC; }
.detail--anecdote { background: #F7F9FC; }
.detail--quest43 { background: #F7FAFD; }

@media (max-width: 900px) {
  .ccard--commission, .ccard--anecdote { width: 46vw; }
  .grid-empty { margin-bottom: 40px; padding: 32px 18px; }
}

/* ==========================================================================
   ★ 全站卡片「无底板」化 · 2026-09-28
   --------------------------------------------------------------------------
   用户要求：「所有页面都要和角色图鉴、武器图鉴一样，图标和文字单独列」
   参照物 = `.ccard--char` / `.ccard--weapon`（观测枢同款）：
   **卡片本身没有底板** —— 无白底、无圆角、无阴影、无内距；
   图标独立成一块、文字独立排在下方，两者不共用一块底板。

   ⚠️ 这里只覆盖「底板 / 内距 / 图标容器底 / 文字块底 / hover」这几类属性，
      **绝不碰 width / height / aspect-ratio** —— 各页的响应式断点里已经写了宽度
      （如 .ccard--theater 在窄屏是 46vw），在这里重设会跟 @media 打架。
   ⚠️ 必须保持在样式表**最末尾**：靠「同等特异性 + 靠后覆盖」赢过前面 20 多个
      `.ccard--xxx` / `.ccard--xxx:hover` 规则，因此不需要 !important。
   ⚠️ 覆盖的 21 个变体：char/weapon/artifact/book/ach/bag/enemy/npc/maptext/archon/
      legendcover/legendtext/tutorial/dress/namecard/furnishing/theater/domain/
      animal/offering/event/anecdote/commission（后两个走同一条 .ccard 兜住）。
   ========================================================================== */

/* ① 卡片本体：去掉底板与内距，图标/文字直接落在页面底色上 */
.ccard {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
/* ② hover：不再「卡片浮起 + 投影」（无底板后位移看不见），改为图标轻微放大 */
.ccard:hover { transform: none; background: transparent; box-shadow: none; }
.ccard:hover :is(.ccard__art, .ccard__relic-icon) img { transform: scale(1.04); }

/* ③ 图标容器：清掉各自的底纹/渐变（背包米绿、剧诗深紫、轶闻浅蓝、图鉴米色…），
      统一成浅圆角图块 */
.ccard .ccard__art,
.ccard .ccard__relic-top,
.ccard .ccard__relic-icon {
  background: transparent;
  border-radius: 12px;
}
/* ④ 文字块：清掉半透明白底 / 分隔线 / 米色底（物产志、生物志、地图文本、NPC…都用过） */
.ccard .ccard__main,
.ccard .ccard__main--legend {
  background: transparent;
  border-color: transparent;
}

/* ⑤ 「图标在上、文字在下」那组：文字块整体居中，向角色/武器卡看齐。
      （圣遗物 407×146、成就、委托这类横向信息卡保留左对齐 —— 它们承载的是长文本） */
:is(.ccard--char, .ccard--weapon, .ccard--book, .ccard--bag, .ccard--enemy, .ccard--npc,
    .ccard--maptext, .ccard--archon, .ccard--legendcover, .ccard--legendtext, .ccard--tutorial,
    .ccard--dress, .ccard--namecard, .ccard--furnishing, .ccard--theater, .ccard--domain,
    .ccard--animal, .ccard--offering, .ccard--event, .ccard--anecdote) .ccard__main {
  align-items: center;
  text-align: center;
  padding: 8px 6px 0;
}
:is(.ccard--char, .ccard--weapon, .ccard--book, .ccard--bag, .ccard--enemy, .ccard--npc,
    .ccard--maptext, .ccard--archon, .ccard--legendcover, .ccard--legendtext, .ccard--tutorial,
    .ccard--dress, .ccard--namecard, .ccard--furnishing, .ccard--theater, .ccard--domain,
    .ccard--animal, .ccard--offering, .ccard--event, .ccard--anecdote) .ccard__name {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   ★ 竖卡化补充 · 2026-09-28
   用户确认：「图标在上、文字在下」+「只改图鉴列表卡（首页分类卡、任务类型入口卡保留白底）」
   ⇒ 把还留着「图标在左、文字在右」横排的 4 种卡改成竖排：
     成就(ccard--stack) / 区域(ccard--stack) / 委托(ccard--commission) / 圣遗物(ccard--artifact)
   ⚠️ 通用兜底卡（无修饰类的 .ccard）在 app.js 里补了 `ccard--stack` 类名，
      以后再加「找不到 kind」的新分类会自动落到竖卡形态。
   -------------------------------------------------------------------------- */

/* ① 通用竖卡：成就（徽章 + 名称 + 条数）、区域（标签 + 名称 + 地区） */
.ccard--stack {
  width: 220px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.ccard--stack .ccard__art--ach {
  width: 118px; height: 118px;
  display: flex; align-items: center; justify-content: center;
}
.ccard--stack .ccard__ach-icon { width: 100%; height: 100%; object-fit: contain; }
.ccard--stack .ccard__main { align-items: center; text-align: center; padding: 0; gap: 5px; }
.ccard--stack .ccard__name { justify-content: center; }
.ccard--stack .ccard__badge { width: 56px; height: 56px; font-size: 15px; }

/* ② 委托卡：徽章 + 名称 + 「地区 · 类型」（原为 268px 横卡） */
.ccard--commission {
  width: 220px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.ccard--commission .ccard__main { align-items: center; text-align: center; gap: 4px; }
.ccard--commission .ccard__name { justify-content: center; }
.ccard--commission .ccard__badge { width: 54px; height: 54px; font-size: 15px; }
@media (max-width: 900px) { .ccard--commission { width: 46vw; } }

/* ③ 圣遗物卡：图标 + 名称（上）/ 2件套 · 4件套（下）
    ⚠️ 原版是「观测枢 189/218 频道页同款」407×146 横卡（尺寸逐像素对齐官网）。
      用户要求全站统一成竖卡，这里改成 268px 竖排；套装效果文字仍保持左对齐
      （长文本居中会读不成句），只把图标与名称居中。 */
.ccard--artifact {
  width: 268px;
  flex: 0 1 268px;
  height: auto;
  align-items: center;
  text-align: center;
  gap: 0;
}
.ccard--artifact .ccard__relic-top {
  flex-direction: column;
  align-items: center;
  height: auto;
  gap: 6px;
  margin-bottom: 9px;
}
.ccard--artifact .ccard__relic-icon { width: 76px; height: 76px; margin-right: 0; border-radius: 12px; }
.ccard--artifact .ccard__name { justify-content: center; text-align: center; }
.ccard--artifact .ccard__relic-tag { margin-left: 0; }
.ccard--artifact .ccard__relic-foot { width: 100%; }

/* ④ 传说任务兜底卡（无立绘的邀约事件 / B站也没配图的活动系列）
      立绘卡去掉底板后，这里也不该再是一块米色「板子」——改成「一个圆形纹章 + 一圈柔光」，
      观感与立绘卡同级（无边框、无阴影、无内框线）。 */
.ccard--legendtext .ccard__art--legendtext {
  background: radial-gradient(circle at 50% 46%, rgba(243, 233, 216, .95) 0 30%, rgba(243, 233, 216, 0) 68%);
}
.ccard--legendtext .ccard__art--legendtext::after { display: none; }
.ccard--legendtext .ccard__lt-emblem { width: 116px; height: 116px; font-size: 34px; }

/* ==========================================================================
   ★ 全站「实装版本」标注 · 2026-10-07
   需求：「所有的图鉴都需要标注实装的版本」→ 二次修订为
        **只在图鉴明细页体现，一级图鉴卡片上不显示**（卡片角标已整体移除）。
   数据：assets/entry-version-data.js（window.ENTRY_VERSION，由 build_entry_versions.js 生成；
        BWiki 页面 |实装版本= + BWiki SMW 全量表 + genshin-db 三源合成），读取统一走 app.js 的 verOf()。
   明细页承载：verFieldHTML() → .modal__field 的「实装版本」行；生物志/地区供奉用 .enemy-el--ver 胶囊。
   ⚠️ .ccard__art 基础样式没声明 position，这里补一刀 —— 卡片上其它绝对定位角标
      （剧诗席次 th-no / 秘境 dom-quest / 生物志 catch / 轶闻 anec-el / 圣遗物 relic-tag）
      都靠它锚定，别删。
   ========================================================================== */
.ccard__art { position: relative; }

/* ==========================================================================
   ★ 详情页「实装版本」行 · 2026-10-07
   与已有的 .enemy-el（活动版本 / 地区 / 类型 小胶囊）同款，直接用它的样式，
   这里只补一个「实装版本」的专属配色（中性深灰，比元素色低调）。
   ========================================================================== */
.enemy-el--ver { background: rgba(46, 64, 90, .82); }

/* ==========================================================================
   ★ 全屏编辑页（#edit/<分类key>/new | <卡序>） · 2026-10-07
   需求：「新增功能和编辑功能点击后跳转到另一个新的页面进行编辑，编辑后可以预览。
         并且编辑的页面要把范围拓宽到整个浏览器的页面大小。」

   做法：
     · 一条独立路由 #edit/...（见 app.js 的 renderRoute / parseEditRoute），
       不再用 .modal（那个是 min(720px,100%) 的小窗，宽度被锁死）。
     · 本容器不用 fixed 定位，而是「占满可视高度」的正常流式区块：
       height = 100vh - 导航高度，内部两栏各自滚动 —— 页面本身不滚动，
       所以两侧内容再长也不会把顶栏挤走，看起来就是一个专业编辑器。
     · 宽度 100%（body 本身无 max-width，所以这就是整个浏览器宽度）；
       —— 不能写 width:100vw：100vw 含滚动条宽度，会产生横向溢出。
     ========================================================================== */
.editor {
  width: 100%;
  height: calc(100vh - var(--nav-h));
  min-height: 560px;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  overflow: hidden;
}
/* 顶栏：返回 / 面包屑 / 保存操作。吸在整个可视区顶部，不随内容滚动 */
.editor__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 13px 26px;
  background: #fff;
  border-bottom: 1px solid #E6EDF5;
  box-shadow: 0 2px 10px rgba(20, 69, 107, .05);
  position: relative; z-index: 5;
}
.editor__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  background: #F2F5F9; color: #4A5670;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.editor__back:hover { background: #E4EFF5; color: var(--c-primary-dark); }
.editor__arrow { font-size: 15px; line-height: 1; }
.editor__crumb { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.editor__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: var(--c-primary-dark); background: #E7F3F8;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.editor__who {
  font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 17px; color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.editor__ops { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.editor__kbd {
  margin-left: 7px; font-size: 10.5px; font-weight: 500;
  opacity: .75; letter-spacing: 0;
}

/* 两栏：左表单（自适应） + 右预览（定宽区间） */
.editor__grid { flex: 1 1 auto; display: flex; min-height: 0; }
.editor__pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.editor__pane--form { flex: 1 1 auto; background: #fff; }
.editor__pane--pv {
  flex: 0 0 clamp(380px, 44vw, 860px);
  background: #F7FAFD;
  border-left: 1px solid #E6EDF5;
}
.editor__phead {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 26px;
  font-size: 13px; font-weight: 700; color: #46566B;
  letter-spacing: .3px;
  border-bottom: 1px solid #EDF2F7;
  background: #FCFDFF;
}
.editor__phint { font-size: 11.5px; font-weight: 400; color: #97A6B5; letter-spacing: 0; }
.editor__scroll { flex: 1 1 auto; overflow-y: auto; padding: 22px 26px 60px; }
.editor__scroll--pv { padding: 20px 22px 60px; }
.editor__scroll::-webkit-scrollbar { width: 10px; }
.editor__scroll::-webkit-scrollbar-thumb { background: #D6E0EA; border-radius: 999px; border: 3px solid #fff; }

/* 预览页签 */
.editor__pvtab { margin-left: auto; display: inline-flex; gap: 4px; background: #EEF4F9; border-radius: 999px; padding: 3px; }
.editor__pvt {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; color: #6B7C90;
  padding: 5px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease;
}
.editor__pvt:hover { color: var(--c-primary-dark); }
.editor__pvt.is-on { background: #fff; color: var(--c-primary-dark); box-shadow: 0 1px 3px rgba(20,69,107,.12); }

/* 预览区：卡片 / 详情页两种视角 */
.epv__note { font-size: 11.5px; font-weight: 600; color: #93A2B2; letter-spacing: .3px; margin-bottom: 10px; }
.epv__empty { font-size: 13px; color: #93A2B2; padding: 20px 0; }
.epv__grid { display: block; max-width: 340px; }
.epv__detail .detail {
  /* ⚠️ .detail 原本是 min-height: calc(100vh - 导航高) —— 放进预览栏后会撑出巨大的空白 */
  min-height: 0;
  padding: 0 0 24px;
}
.epv__detail .detail__bar { padding: 10px 0; margin-bottom: 18px; }
/* 预览栏窄：目录 / 章节导航这类「导航件」占满一半宽度却不产生内容，隐藏掉更好读；
   正文、字段表、图片、折叠块全部保留，所以预览仍然是真实页面结构 */
.epv__detail .bk-toc, .epv__detail .qd-nav { display: none; }
/* 预览里的链接不可点：避免误跳转离开编辑页 */
.epv__grid a, .epv__detail a { pointer-events: none; }

/* 编辑页里不需要悬浮工具栏（＋新增 / 导入 / 备份…），避免压住右侧预览 */
body:has(#editor) #fab { display: none; }

@media (max-width: 1100px) {
  /* 窄屏：表单与预览上下排（各自仍可滚动） */
  .editor__grid { flex-direction: column; }
  .editor__pane--pv { flex: 0 0 42%; border-left: 0; border-top: 1px solid #E6EDF5; }
  .editor__bar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .editor__scroll { padding: 18px 16px 40px; }
  .epv__grid { max-width: none; }
}

/* ==========================================================================
 * 地理志（2026-10-07 新增）：区域 / 观景点
 * 数据来源 miHoYo 观测枢「观测」频道（190/253）的两个下拉页签 —— 区域(7) / 观景点(253)
 * ========================================================================== */

/* --- 入口页（#geo 一级页）的两张类型卡：复用 .catcard--quest 骨架，换成地理志配色 --- */
.catcard--geo { width: 248px; height: 168px; gap: 9px; position: relative; }
.catcard--geo:hover .catcard__icon--geo { background: #1491BB; color: #fff; }
.catcard__icon--geo {
  width: 44px; height: 44px; border-radius: 13px; font-size: 21px;
  background: #E2F1F6; color: #0E6E8E;
  transition: background .2s, color .2s;
}
.catcard--geo .catcard__name { font-size: 16.5px; font-weight: 600; }
.catcard--geo .catcard__desc { line-height: 1.5; }

/* --- 列表卡：沿用「方图 + 底部两行」的卡片形态（同 .ccard--maptext），换成地理志配色 --- */
.ccard--viewpoint, .ccard--geoarea {
  width: 152px; padding: 0; overflow: hidden; flex-direction: column; gap: 0;
  border-radius: 12px; border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 5px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ccard--viewpoint { width: 176px; }
.ccard--viewpoint:hover, .ccard--geoarea:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(14,110,142,.18); }
.ccard--viewpoint .ccard__art--vp, .ccard--geoarea .ccard__art--ga {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ccard--viewpoint .ccard__art--vp { background: linear-gradient(145deg,#EDF7FA,#D8ECF3); }
.ccard--geoarea .ccard__art--ga { background: linear-gradient(145deg,#EAF3F7,#DCE9F1); }
.ccard--viewpoint .ccard__art--vp img, .ccard--geoarea .ccard__art--ga img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard--viewpoint .ccard__vp-ph, .ccard--geoarea .ccard__ga-ph { font-size: 44px; }
.ccard--viewpoint .ccard__main, .ccard--geoarea .ccard__main { padding: 8px 10px 10px; background: rgba(255,255,255,.75); min-width: 0; }
.ccard--viewpoint .ccard__name, .ccard--geoarea .ccard__name { font-size: 12.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccard--viewpoint .ccard__info, .ccard--geoarea .ccard__info { font-size: 11px; color: var(--c-gray); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 地区角标（观景点 / 区域 卡片共用；颜色区分两块） */
.ccard__cata {
  position: absolute; top: 8px; left: 8px;
  font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 999px; color: #fff;
}
.ccard__cata--vp { background: rgba(14,110,142,.85); box-shadow: 0 2px 8px rgba(14,110,142,.25); }
.ccard__cata--ga { background: rgba(38,86,120,.85); box-shadow: 0 2px 8px rgba(38,86,120,.25); }

/* --- 观景点详情页：实景大图 + 地区/所属地点 + 地理志文本 + 位置地图 --- */
.detail--viewpoint { background: #FBFDFE; }
/* ⚠️ 2026-10-11 第四波：「观景点位置」(`.vp-map`) 与顶部实景大图 (`.vp-hero`) 已从观景点详情页下线，
   样式块**故意保留**（项目没有 git），恢复只需把模板串加回 viewpointDetailPageHTML。 */
.detail--viewpoint .vp-hero {
  border-radius: 18px; overflow: hidden; background: #EDF3F7;
  box-shadow: 0 4px 18px rgba(20,69,107,.10);
}
.detail--viewpoint .vp-hero__img { display: block; width: 100%; max-height: 460px; object-fit: cover; cursor: zoom-in; }
/* 「观景图」：展示尺寸对齐观测枢详情页 —— 实测固定 1105×553（原图 1228×614）。
   1920/1440/1280/1080 四个视口量下来都是 1105×553，说明是它内容列宽决定的固定值，不是流式图片。
   这里就写死 1105 宽；窄屏再靠 max-width:100% 收回来。 */
.detail--viewpoint .vp-view { width: 1105px; max-width: 100%; margin: 0 auto; }
.detail--viewpoint .vp-view__img {
  display: block; width: 100%; height: auto;
  border-radius: 8px; cursor: zoom-in;
  box-shadow: 0 2px 12px rgba(20,69,107,.10);
}
.detail--viewpoint .detail__body { max-width: 1160px; margin: 0 auto; padding: 26px 0 8px; }
.detail--viewpoint .vp-head { margin-bottom: 22px; }
.detail--viewpoint .vp-text__p { font-size: 15px; line-height: 1.95; color: #2C3A47; margin: 0 0 10px; }
.detail--viewpoint .vp-map {
  /* ⚠️ 2026-10-07 视觉核验修：原来是 `width:100%` + `object-fit:contain` + `max-height`，
     遇到**竖版**地图（观景点位置图基本都是）会在左右各留一大片浅色空带，看着像渲染坏了。
     改成「卡片贴着图走」——`fit-content` + `margin:auto` 居中，宽图仍会被 max-width 限制。 */
  width: fit-content; max-width: 100%; margin: 0 auto;
  border-radius: 14px; overflow: hidden; border: 1px solid #E3EBF1; background: #F4F8FB;
}
.detail--viewpoint .vp-map img { display: block; width: auto; height: auto; max-width: 100%; max-height: 520px; cursor: zoom-in; background: #F4F8FB; }

/* --- 区域详情页：一级地名 + 分层地名表（二级地点 / 三级地名 / 四级地名 / 观景点 / 地理志 / 备注） --- */
.detail--geoarea { background: #FBFCFD; }
.detail--geoarea .detail__body { max-width: 1560px; margin: 0 auto; padding: 22px 0 8px; }
.detail--geoarea .ga-head { margin-bottom: 20px; }
.detail--geoarea .ga-h1 { font-family: 'Noto Serif SC', serif; font-size: 34px; font-weight: 700; color: var(--c-ink); margin: 6px 0 8px; }
.detail--geoarea .ga-sub { font-size: 14px; line-height: 1.8; color: #5A6B7A; margin: 0; }
/* 「实装版本」行：列表里这个区域挂在哪个版本组，详情页也把版本写出来（站内既有约定） */
/* 「实装版本」小标：区域详情页与观景点详情页共用（两个详情页的标题区版式不同，但这一行要长得一样） */
.detail--geoarea .ga-ver, .detail--viewpoint .ga-ver { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.detail--geoarea .ga-ver__k, .detail--viewpoint .ga-ver__k { font-size: 12.5px; color: #8B98A4; }
.detail--geoarea .ga-ver__v, .detail--viewpoint .ga-ver__v { font-size: 13px; font-weight: 600; color: #0E6E8E; background: #EAF4F8; border: 1px solid #CFE4ED; border-radius: 8px; padding: 3px 9px; }
.detail--geoarea .ga-tablewrap { overflow-x: auto; border: 1px solid #E3EAF0; border-radius: 12px; background: #fff; }
.detail--geoarea .ga-table { width: 100%; border-collapse: collapse; min-width: 900px; font-size: 13.5px; }
.detail--geoarea .ga-table th {
  text-align: left; font-weight: 600; color: #3B4A57;
  background: #F5F8FA; padding: 12px 14px; border-bottom: 1px solid #E3EAF0; white-space: nowrap;
}
.detail--geoarea .ga-table td {
  padding: 12px 14px; border-bottom: 1px solid #EEF3F7; vertical-align: top; color: #2C3A47; line-height: 1.7;
}
.detail--geoarea .ga-table tr:last-child td { border-bottom: 0; }
.detail--geoarea .ga-c-l2 { font-weight: 600; white-space: nowrap; }
.detail--geoarea .ga-c-sm { color: #5A6B7A; }
.detail--geoarea .ga-c-spot { width: 260px; }
.detail--geoarea .ga-c-geo { width: 34%; color: #4A5A68; }
.detail--geoarea .ga-c-note { width: 110px; color: #6B7A88; font-size: 12.5px; }
.detail--geoarea .ga-spot { display: flex; flex-direction: column; gap: 8px; }
.detail--geoarea .ga-spot__name { font-size: 13px; color: #2C3A47; font-weight: 500; }
.detail--geoarea .ga-spot__miss {
  margin-left: 6px; font-size: 11px; font-weight: 400; color: #A9713D;
  background: #FBF1E4; border: 1px solid #F0DFC9; border-radius: 8px; padding: 1px 6px;
}
.detail--geoarea .ga-spot__img {
  width: 100%; max-width: 232px; border-radius: 10px; display: block; cursor: zoom-in;
  border: 1px solid #E7EEF3; background: #F4F8FB;
}
.detail--geoarea .ga-geo { white-space: pre-wrap; }
.detail--geoarea .ga-dash { color: #B9C4CD; }
/* 加了「五级地名」列后是 7 列 —— 固定列宽，横向滚动兜底 */
.detail--geoarea .ga-table--5 { min-width: 1180px; table-layout: fixed; }
.detail--geoarea .ga-table--5 th { white-space: normal; }
.detail--geoarea .ga-table--5 .ga-c-l2 { width: 118px; }
.detail--geoarea .ga-table--5 .ga-c-sm { width: 148px; }
.detail--geoarea .ga-table--5 .ga-c-l5 { width: 132px; }
.detail--geoarea .ga-table--5 .ga-c-spot { width: 212px; }
.detail--geoarea .ga-table--5 .ga-c-geo { width: 300px; }
.detail--geoarea .ga-table--5 .ga-c-note { width: 110px; }
/* 跨行合并的那个地名格（跟原表格一样：连续相同就合并成一格）垂到中间 */
.detail--geoarea .ga-table td.ga-merged { vertical-align: middle; }
/* 表格里的『隐 / 特 / 附』前缀（隐藏 / 特殊 / 附属地点） */
.detail--geoarea .ga-mk {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 11px; line-height: 1.5; color: #8A6A3B;
  background: #FBF3E6; border: 1px solid #EFDFC6; border-radius: 6px;
  padding: 0 5px; cursor: help;
}
.detail--geoarea .ga-map {
  /* 同 vp-map：竖版地图不铺满宽度，卡片贴着图走并居中 */
  width: fit-content; max-width: 100%; margin: 26px auto 0;
  border-radius: 14px; overflow: hidden; border: 1px solid #E3EBF1; background: #F4F8FB;
}
.detail--geoarea .ga-map img { display: block; width: auto; height: auto; max-width: 100%; max-height: 560px; cursor: zoom-in; background: #F4F8FB; }

@media (max-width: 900px) {
  .detail--viewpoint .detail__body, .detail--geoarea .detail__body { padding: 18px 0 4px; }
  .detail--geoarea .ga-h1 { font-size: 27px; }
  .detail--viewpoint .vp-hero__img { max-height: 300px; }
}

/* --- 地理志·区域：按实装版本分组铺开（2026-10-07 用户要求「版本一行，下面是该版本新增的区域」） ---
   ⚠️ 外层不能再用 .grid-cards（flex 网格）：那样每个 .geogroup 会变成网格里的一格。
   改成块级容器后页面左右留白由它自己出，组内网格的 padding 必须清零，否则每组都会多一层缩进。 */
.grid-groups { display: block; padding: 26px var(--pad-x) 60px; }
.geogroup + .geogroup { margin-top: 30px; }
.geogroup__head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 2px 18px; padding-bottom: 12px;
  border-bottom: 1px dashed #E1E9F0;
}
.geogroup__v {
  flex: none; font-family: 'Noto Serif SC', serif; font-size: 14px; font-weight: 700;
  color: #0E6E8E; background: #EAF4F8; border: 1px solid #CFE4ED; border-radius: 8px; padding: 4px 9px;
}
.geogroup__t { font-size: 14.5px; font-weight: 600; color: #2C3A47; }
.geogroup__n { margin-left: auto; font-size: 12.5px; color: #8B98A4; white-space: nowrap; }
.grid-cards.geogroup__grid { padding: 0; }
/* 「未标注版本」= 刚在编辑页新增、还没归到版本的条目，用暖色区别于正式版本 */
.geogroup--orphan .geogroup__v { color: #A9713D; background: #FBF1E4; border-color: #F0DFC9; }
.geogroup--orphan .geogroup__t { color: #A9713D; }

/* --- 地理志·一级「地区块」（2026-10-11 用户要求「观景点参考 bwiki 地理志」）---
   bwiki 的「地理志」就是一个地区一个子页、子页内按版本分段 —— 所以一级是地区、二级才是版本。
   地区头做成一条带左侧色条的实心标题：它比版本头高一级，视觉重量必须拉开，
   否则「蒙德」和「1.0 捕风的异乡人」看起来是同级的两行。 */
.georegion { margin-top: 46px; }
.georegion:first-child { margin-top: 6px; }
.georegion__head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 22px; padding: 0 0 12px;
  border-bottom: 2px solid #D8E5EE;
}
.georegion__b { flex: none; width: 5px; height: 20px; border-radius: 3px; background: linear-gradient(180deg,#0E6E8E,#4FA3C4); }
.georegion__name { font-family: 'Noto Serif SC', serif; font-size: 22px; font-weight: 700; color: #14364A; letter-spacing: .5px; }
.georegion__n { margin-left: auto; font-size: 12.5px; color: #8B98A4; white-space: nowrap; }
.georegion .geogroup + .geogroup { margin-top: 26px; }
.georegion .geogroup__head { border-bottom-style: dashed; }

/* --- 观景点卡片：改成 bwiki「图片放大」那种大图墙（2026-10-11）---
   ⚠️ 只在地理志列表里（.geo-grid）改形态，别影响其他图鉴 —— .ccard--viewpoint 是共用类。
   ⚠️ 观测枢的 image 与 thumb 其实是同一张 1442×720（2:1）横构图，题词在画面下缘：
      旧样式按 1:1 + object-fit:cover 摆，两侧各有约 1/4 被裁掉 —— 大图墙就是为了把整张铺出来。 */
.geo-grid .ccard--viewpoint {
  width: 372px; padding: 0; border: 0; box-shadow: none; background: transparent; border-radius: 0;
  overflow: visible; align-items: stretch;
}
.geo-grid .ccard--viewpoint:hover { transform: none; box-shadow: none; }
.geo-grid .ccard--viewpoint .ccard__art--vp {
  aspect-ratio: 2 / 1; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 1px 6px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.geo-grid .ccard--viewpoint .ccard__art--vp img { object-fit: cover; }
.geo-grid .ccard--viewpoint:hover .ccard__art--vp { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(14,110,142,.22); }
.geo-grid .ccard--viewpoint .ccard__main { padding: 9px 2px 0; background: transparent; text-align: center; }
.geo-grid .ccard--viewpoint .ccard__name { font-size: 14px; font-weight: 600; line-height: 1.35; white-space: normal; }
.geo-grid .ccard--viewpoint .ccard__info { font-size: 12px; margin-top: 3px; }
/* 点位角标（bwiki 点位表里的编号；比地区角标更"硬"一点，用实色） */
.ccard__cata--pt { background: rgba(169,113,61,.92); box-shadow: 0 2px 8px rgba(169,113,61,.28); }

/* --- 地理志首页：9 张地区大图入口（对照 bwiki 地理志索引页） --- */
.geobanners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 4px var(--pad-x) 8px; }
.geobanner {
  position: relative; display: block; padding: 0; border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px; overflow: hidden; background: #EDF3F7; cursor: pointer;
  box-shadow: 0 2px 10px rgba(20,69,107,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.geobanner:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(14,110,142,.22); }
.geobanner__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.geobanner__mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,30,44,0) 42%, rgba(6,30,44,.72) 100%);
  pointer-events: none;
}
.geobanner__nm {
  position: absolute; left: 16px; bottom: 30px; color: #fff;
  font-family: 'Noto Serif SC', serif; font-size: 21px; font-weight: 700; letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.geobanner__c { position: absolute; left: 16px; bottom: 12px; color: rgba(255,255,255,.8); font-size: 12px; }

/* --- 地理志列表页顶部的地区条（同一批图的缩小版，点一下就地筛选） --- */
.geobar {
  display: flex; gap: 10px; padding: 0 var(--pad-x) 4px; overflow-x: auto;
  scrollbar-width: thin;
}
.geobar__i {
  flex: none; position: relative; width: 118px; padding: 0; border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px; overflow: hidden; background: #EDF3F7; cursor: pointer;
  transition: border-color .16s, box-shadow .16s;
}
.geobar__i img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.geobar__nm {
  display: block; padding: 5px 0 6px; font-size: 12px; color: #3B4B58;
  background: rgba(255,255,255,.82); text-align: center;
}
.geobar__i:hover { border-color: #8FC4D8; }
.geobar__i--on { border-color: #0E6E8E; box-shadow: 0 0 0 2px rgba(14,110,142,.22); }
.geobar__i--on .geobar__nm { color: #0E6E8E; font-weight: 700; background: #EAF4F8; }
.geobar__i--all {
  width: auto; padding: 0 16px; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: #3B4B58; background: #F4F8FB;
}
.geobar__i--all.geobar__i--on { color: #0E6E8E; font-weight: 700; background: #EAF4F8; }

/* --- 观景点详情页的「获取地点」（bwiki 地理志页里折叠起来的那块） --- */
.detail--viewpoint .vpot__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.detail--viewpoint .vpot__tag {
  font-size: 12.5px; font-weight: 600; color: #0E6E8E;
  background: #EAF4F8; border: 1px solid #CFE4ED; border-radius: 8px; padding: 3px 9px;
}
.detail--viewpoint .vpot__self { font-size: 12.5px; color: #3B4B58; }
.detail--viewpoint .vpot__self--none { color: #A9713D; }
.detail--viewpoint .vpot__video {
  font-size: 12.5px; color: #0E6E8E; text-decoration: none;
  border: 1px solid #CFE4ED; background: #F4FAFC; border-radius: 8px; padding: 3px 10px;
}
.detail--viewpoint .vpot__video:hover { background: #EAF4F8; text-decoration: none; }
/* 点位表：与 bwiki 一致按 5 列铺开；当前条目所在的那格用暖色高亮 */
.detail--viewpoint .vpot__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  padding: 12px; border: 1px solid #E4EDF3; border-radius: 12px; background: #FBFDFE;
}
.detail--viewpoint .vpot__cell {
  display: flex; flex-direction: column; gap: 3px; padding: 8px 10px;
  border: 1px solid #E8EFF4; border-radius: 9px; background: #fff;
}
.detail--viewpoint .vpot__cell--cur { border-color: #E6C79A; background: #FDF6EA; }
.detail--viewpoint .vpot__no { font-size: 11.5px; color: #8B98A4; }
.detail--viewpoint .vpot__cell--cur .vpot__no { color: #A9713D; }
.detail--viewpoint .vpot__nm { font-size: 13px; color: #2C3A47; line-height: 1.35; }
.detail--viewpoint .vpot__cur {
  font-size: 10.5px; font-style: normal; color: #fff; background: #C08A4A;
  border-radius: 5px; padding: 1px 5px; margin-left: 5px; vertical-align: 1px;
}
.detail--viewpoint .vpot__maplabel { margin: 18px 0 8px; font-size: 12.5px; color: #8B98A4; }
/* 源站红链 → 没有点位图时照实说明，别留白让人以为漏了 */
.detail--viewpoint .vpot__nomap {
  margin: 0 0 4px; padding: 14px 18px; border-radius: 12px;
  background: #FFF9EE; border: 1px dashed #EBD9B4;
  font-size: 13px; line-height: 1.7; color: #8A6C3A;
}
.detail--viewpoint .vpot__nomap code { font-size: 12px; color: #A9713D; background: rgba(169,113,61,.10); padding: 1px 5px; border-radius: 4px; }
.detail--viewpoint .vpot__map {
  width: fit-content; max-width: 100%; margin: 0 auto;
  border-radius: 14px; overflow: hidden; border: 1px solid #E3EBF1; background: #F4F8FB;
}
.detail--viewpoint .vpot__map img { display: block; width: auto; height: auto; max-width: 100%; max-height: 620px; cursor: zoom-in; }

@media (max-width: 1280px) {
  .geo-grid .ccard--viewpoint { width: 300px; }
}
@media (max-width: 900px) {
  .geobanners { grid-template-columns: repeat(2, 1fr); }
  .georegion { margin-top: 34px; }
  .georegion__name { font-size: 19px; }
  .geo-grid .ccard--viewpoint { width: 100%; }
  .detail--viewpoint .vpot__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .grid-groups { padding: 20px var(--pad-x) 46px; }
  .geogroup__head { flex-wrap: wrap; }
  .geogroup__n { margin-left: 0; width: 100%; }
}

/* ===== 返回落点提示（2026-10-11）=====
   从详情页返回它所属的列表页时，把「刚才点进去的那张卡」柔和高亮一次。
   位置恢复得再准，满屏卡片长得都一样，不给个记号用户也不敢确定自己回来了。
   class 由 app.js 的 flashCard() 加，1.95s 后自动摘掉。 */
@keyframes cardBackFlash {
  0%   { outline-color: rgba(14, 110, 142, 0); }
  10%  { outline-color: rgba(14, 110, 142, .92); }
  100% { outline-color: rgba(14, 110, 142, 0); }
}
.ccard.card--back,
.vcard.card--back {
  outline: 3px solid rgba(14, 110, 142, 0);
  outline-offset: 3px;
  animation: cardBackFlash 1.9s ease-out 1;
}
/* 地理志大图墙模式下卡片自身没有圆角（圆角在图片上），给它补一个，别闪出个方框 */
.geo-grid .ccard--viewpoint.card--back { border-radius: 15px; }
@media (prefers-reduced-motion: reduce) {
  .ccard.card--back,
  .vcard.card--back { animation: none; outline-color: rgba(14, 110, 142, .8); }
}

/* ===== 立绘管理器（2026-10-11）=====
   全屏页 #art/<源名>：批量导入 / 批量删除任意图鉴的立绘，一级（列表卡）与二级（详情页）分开。
   版式沿用编辑页的语汇（白底卡片 + 顶部控制条 + 密集列表），保证两个全屏页看起来是一套。 */
.artmgr { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad-x) 80px; }
.artmgr__bar { display: flex; align-items: center; gap: 14px; padding: 18px 0 10px; }
.artmgr__back { font-size: 13.5px; color: #0E6E8E; text-decoration: none; }
.artmgr__back:hover { text-decoration: underline; }
.artmgr__crumb { font-size: 12.5px; color: #8B98A4; }
.artmgr__head { padding: 6px 0 18px; border-bottom: 2px solid #D8E5EE; }
.artmgr__title { margin: 0 0 8px; font-family: 'Noto Serif SC', serif; font-size: 26px; font-weight: 700; color: #14364A; }
.artmgr__sub { margin: 0; font-size: 13.5px; line-height: 1.8; color: #5B6B78; }
.artmgr__sub b { color: #0E6E8E; }

.artmgr__ctrl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  padding: 16px 18px; margin: 18px 0;
  background: #F5F9FC; border: 1px solid #E2EDF4; border-radius: 14px;
}
.artmgr__f { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5B6B78; }
.artmgr__f select { min-width: 220px; padding: 7px 10px; font-size: 13.5px; border: 1px solid #CDDCE6; border-radius: 9px; background: #fff; color: #14364A; }
.artmgr__f--q input { width: 180px; padding: 7px 10px; font-size: 13.5px; border: 1px solid #CDDCE6; border-radius: 9px; background: #fff; }
.artmgr__chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #5B6B78; cursor: pointer; }
.artmgr__lvl { display: flex; align-items: center; gap: 12px; padding-left: 14px; border-left: 1px solid #DCE7EE; }
.artmgr__lvlk { font-size: 12.5px; color: #8B98A4; }
.artmgr__lvl label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #3C4F5C; cursor: pointer; }
.artmgr__acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.artmgr__sel { font-size: 12.5px; color: #8B98A4; }
.artmgr__sel--on { color: #B4622A; font-weight: 600; }

.artmgr__cols, .artmgr__row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 34px 132px 132px 1fr 214px;
}
.artmgr__cols[data-merged], .artmgr__row[data-merged] { grid-template-columns: 34px 132px 1fr 214px; }
.artmgr__cols { padding: 0 12px 8px; font-size: 12px; color: #8B98A4; letter-spacing: .3px; }
.artmgr__th--nm { padding-left: 2px; }
.artmgr__th--ops { text-align: right; }
.artmgr__row {
  padding: 10px 12px; border-bottom: 1px solid #EDF3F7;
}
.artmgr__row:hover { background: #F8FBFD; }
.artmgr__ckcol { display: flex; justify-content: center; }
.artmgr__ckcol input { width: 16px; height: 16px; cursor: pointer; }
.artmgr__cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 74px; border: 1px solid #E2EDF4; border-radius: 9px;
  background: repeating-conic-gradient(#F7FAFC 0% 25%, #FFFFFF 0% 50%) 50% / 12px 12px;
  overflow: hidden;
}
.artmgr__cell img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.artmgr__ph { font-size: 12px; color: #C3CFD8; }
.artmgr__badge {
  position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 6px;
  font-size: 10.5px; color: #fff; background: rgba(180, 98, 42, .92);
}
/* 多图槽（版本 · 二级）：格子上挂「N 张」角标，整格可点 → 直接进多图面板 */
.artmgr__cell--multi { cursor: pointer; }
.artmgr__cell--multi:hover { border-color: #0E6E8E; }
.artmgr__cnt {
  position: absolute; bottom: 4px; right: 4px; padding: 1px 6px; border-radius: 6px;
  font-size: 10.5px; color: #fff; background: rgba(14, 110, 142, .9);
}
.artmgr__nm { font-size: 14px; color: #14364A; }
.artmgr__ops { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.artmgr__none { padding: 46px 0; text-align: center; font-size: 13.5px; color: #8B98A4; }
.artmgr__morebtn { padding: 22px 0; text-align: center; }

/* 导入确认表（可选导入：逐张改绑 / 取消勾选） */
/* ⚠️ 必须写 width（不是 max-width）—— .modal 的基础规则是 `width: min(720px,100%)`，
   只给 max-width 的话宽度仍由那条决定，弹窗不会变宽。 */
.modal--art { width: min(920px, 100%); }
.artimp { max-height: 46vh; overflow-y: auto; margin-top: 12px; border: 1px solid #E2EDF4; border-radius: 12px; padding: 6px 10px; }
.artimp__row { display: grid; grid-template-columns: 30px 54px 1fr 20px 240px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #F0F5F9; }
.artimp__row:last-child { border-bottom: 0; }
.artimp__ckc { display: flex; justify-content: center; }
.artimp__img { width: 54px; height: 54px; object-fit: contain; border-radius: 7px; background: #F5F9FC; }
.artimp__fn { font-size: 12.5px; color: #5B6B78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artimp__arrow { color: #B9C4CD; text-align: center; }
.artimp__sel { width: 100%; padding: 6px 9px; font-size: 13px; border: 1px solid #CDDCE6; border-radius: 8px; background: #fff; }
.artimp__sel--bad { border-color: #D0736A; background: #FDF4F3; }
.artimp__n { font-size: 12.5px; color: #8B98A4; margin-right: 12px; }

/* 删除语义选择（撤销替换 / 强制置空） */
.modal--artdel { width: min(600px, 100%); }
.artdel__opts { display: grid; gap: 12px; margin: 14px 0 6px; }
.artdel__opt {
  display: block; width: 100%; text-align: left; padding: 14px 16px;
  border: 1px solid #DCE7EE; border-radius: 12px; background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.artdel__opt:hover { border-color: #0E6E8E; background: #F5FAFC; }
/* ⚠️ 必须是 `> b` 直接子选择器 —— 下面的 <small> 里也嵌了 <b>（「官方原图自动回来」），
   写成后代选择器会把那句也变成块级、硬生生拆成单独一行。 */
.artdel__opt > b { display: block; font-size: 14.5px; color: #14364A; margin-bottom: 4px; }
.artdel__opt small { display: block; font-size: 12.5px; line-height: 1.7; color: #6C7A87; }
.artdel__opt small b { color: #B4622A; }

/* 多图面板（版本 · 二级 = 详情页横幅，可放多张） */
/* ⚠️ 同样必须写 width 而不是 max-width（见上面 .modal--art 的说明）。 */
.modal--artgal { width: min(880px, 100%); }
.artgal__official {
  margin: 14px 0 4px; padding: 12px 14px; border: 1px solid #E2EDF4; border-radius: 12px; background: #F7FAFC;
}
.artgal__olabel { font-size: 12.5px; color: #5B6B78; margin-bottom: 8px; }
.artgal__olabel b { color: #B4622A; }
.artgal__ogrid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.artgal__ogrid img { height: 62px; width: auto; max-width: 120px; object-fit: contain; border-radius: 7px; background: #fff; border: 1px solid #E2EDF4; }
.artgal__hrow { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 8px; }
.artgal__hlabel { font-size: 13px; font-weight: 600; color: #14364A; }
.artgal__n { font-size: 12.5px; color: #8B98A4; }
.artgal__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 12px;
  max-height: 40vh; overflow-y: auto; padding: 12px; border: 1px solid #E2EDF4; border-radius: 12px;
}
.artgal__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px; border: 1px solid #E2EDF4; border-radius: 10px; background: #fff;
}
.artgal__thumb {
  width: 100%; height: 92px; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(#F7FAFC 0% 25%, #FFFFFF 0% 50%) 50% / 12px 12px;
  border-radius: 7px; overflow: hidden;
}
.artgal__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.artgal__idx { font-size: 11.5px; color: #8B98A4; }
.artgal__ops { display: flex; gap: 4px; }
.artgal__ops button {
  width: 26px; height: 24px; line-height: 1; font-size: 12px; cursor: pointer;
  border: 1px solid #DCE7EE; border-radius: 7px; background: #fff; color: #3C4F5C;
}
.artgal__ops button:hover:not(:disabled) { border-color: #0E6E8E; color: #0E6E8E; }
.artgal__ops button:disabled { opacity: .35; cursor: default; }
.artgal__add { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* 内容不多时别把弹窗撑到 90vh 高（.modal__body 默认 flex:1 会顶满） */
.modal--art .modal__body, .modal--artdel .modal__body, .modal--artgal .modal__body { flex: 0 1 auto; }
/* ⚠️ 踩坑记录：assets/style.css 里有**两条 .modal 规则**，其中一条写的是
   `position: fixed; inset: 0; … background: rgba(...); backdrop-filter: blur(3px)` ——
   那本来是给遮罩层写的，但选择器撞到了面板元素上，于是所有弹窗都被拉成全视口大小
   （内容少时底部一大片空白，只是老弹窗内容多、看不出来）。
   这两个新弹窗内容都不多，显式退回文档流，高度贴合内容：
   水平仍由 .modal-backdrop 的 justify-content:center 居中，垂直落到它 40px 的 padding 内。 */
.modal--art, .modal--artdel, .modal--artgal { position: relative; inset: auto; padding: 0; backdrop-filter: none; }

@media (max-width: 900px) {
  .artmgr__cols, .artmgr__row { grid-template-columns: 30px 96px 96px 1fr; }
  .artmgr__ops { grid-column: 1 / -1; justify-content: flex-start; }
  .artmgr__acts { margin-left: 0; }
  .artimp__row { grid-template-columns: 28px 44px 1fr; }
  .artimp__arrow, .artimp__sel { grid-column: 1 / -1; }
  .artgal__grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* ===== 卡片「图标区四角角标」统一撤下（2026-10-13 用户要求）=====
 * 原话：「所有图鉴的图标的左上角、右上角的文字或者是符号都给去掉」。
 * 撤的是**图标（.ccard__art）四角**压在画面上的小徽标 / 符号，不是卡片信息本身
 * （名称、信息行都还在图标下方，一条没少）。
 *
 * 撤下清单（这些类名在各图鉴列表卡里出现，详见 app.js 的 cardInner()）：
 *   · 左上：类型 / 地区 / 分类徽标 —— `.ccard__cat`（教程 / 物产志 / 活动 / 秘境 / 动物 / 供奉）、
 *           `.ccard__cata`（观景点·区域·点位）
 *   · 右上：`.ccard__catch`（可捕获 / 聚所）、`.ccard__th-no`（剧诗编号）、`.ccard__dom-quest`（秘境任务）
 *   · （已摘出）左上符号：`.ccard--book .ccard__stars`（书籍封面上的 ★★…）
 *     ⚠️ 2026-10-26 因「书籍图鉴照 B站『书籍一览』排版」重新**恢复显示** ——
 *        B站 该页的卡片就是「封面铺满 + 星级叠左上角」，且本轮给书籍页加了「稀有度」筛选行，
 *        不显示星级的话筛完看不出几星。仅书籍卡例外，其余图鉴角标仍全部撤下。
 *        想再撤掉：把 `.ccard--book .ccard__stars` 加回下面那段选择器即可。
 *
 * ⚠️ 有意**保留**（不在此列，别顺手删）：
 *   · `.ccard__furn-stars`（家具星级，家具卡**左下角**，不在上缘）
 *   · `.ccard__stars--bag`（背包星级，图标**底部通栏**）
 *   · `.ccard--char/.ccard--weapon .ccard__stars`（星级写在**名称行**里，压根不在图标上）
 *   · `.ccard__badge`（横向「堆叠卡」左侧的 52×52 图标块 —— 它本身就是图标）
 *   · `.ccard__*-ph`（图标缺图时的**居中占位符**，不是角标）
 *
 * 恢复办法：删掉下面这一段即可 —— 各渲染模板**一行没动**，角标元素仍在 DOM 里
 * （与「无 git，下线实现保留代码」的既有约定一致）。
 * ⚠️ verify_geo.js 里有条「观景点卡片左上角带点位号角标」的断言，已同步改成「角标已撤下」。 */
.ccard__cat,
.ccard__cata,
.ccard__catch,
.ccard__th-no,
.ccard__dom-quest { display: none; }
/* ⚠️ 2026-10-26：`.ccard--book .ccard__stars` 已从上面这份撤下清单里**摘出**（书籍照 B站
   「书籍一览」排版，星级要在封面左上角）。详见 599–625 行的书籍卡规则与上方注释。 */
.grid-cards--books .ccard--book .ccard__stars,
.ccard--book .ccard__stars { display: block; }

/* ==========================================================================
 * 2026-10-14：全站图鉴「全局搜索」
 *   · 导航搜索框的下拉结果面板（.spanel）—— 输入即出，按图鉴分组
 *   · 独立搜索结果页 #search/<关键词>（.detail--search / .sres）
 * 数据来自 assets/search-index.js（构建期由 build_search_index.js 生成）。
 * 面板 absolute 定位在 .nav__search 内 → 给父级补 position: relative。
 * ========================================================================== */
.nav__search { position: relative; }
.spanel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(430px, calc(100vw - 40px));
  max-height: 72vh; overflow: auto;
  padding: 6px 0;
  background: #fff; border: 1px solid #E4ECF4; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(8, 40, 70, .28);
  color: #1F2E3D; text-align: left;
  z-index: 95;
}
.spanel[hidden] { display: none; }
.spanel__g { padding: 6px 0; }
.spanel__g + .spanel__g { border-top: 1px solid #EEF3F8; }
.spanel__gh {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px 6px; font-size: 12px; font-weight: 700; color: #5C7A93;
}
.spanel__gh b {
  font-size: 11px; font-weight: 700; color: #0F6F8F;
  background: #E8F4FA; border-radius: 9px; padding: 1px 7px;
}
.spanel__i { display: flex; align-items: baseline; gap: 10px; padding: 7px 14px; text-decoration: none; color: inherit; }
.spanel__i:hover { background: #F2F8FD; }
.spanel__n { font-size: 14px; font-weight: 600; color: #1F2E3D; }
.spanel__i:hover .spanel__n { color: var(--c-primary, #1491BB); }
.spanel__s { font-size: 12px; color: #7C8FA3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spanel__more { padding: 5px 14px 7px; font-size: 12px; color: #8AA0B4; }
.spanel__empty { padding: 14px; font-size: 13px; line-height: 1.7; color: #7C8FA3; }
.spanel__all {
  position: sticky; bottom: 0; display: block;
  margin-top: 4px; padding: 11px 14px; text-align: center;
  font-size: 13px; font-weight: 700; color: #fff;
  background: var(--c-primary, #1491BB); text-decoration: none;
  border-radius: 0 0 13px 13px;
}
.spanel__all:hover { filter: brightness(1.06); }

/* —— 搜索结果页 —— */
.detail--search { padding-bottom: 72px; }
.sres__hero { margin: 6px 0 22px; }
.sres__t { margin: 0 0 8px; font-size: 24px; font-weight: 800; color: #16324A; }
.sres__d { margin: 0; font-size: 13px; color: #6B8299; }
.sres__d b { color: #0F6F8F; }
.sres { margin-bottom: 16px; background: #fff; border: 1px solid #E7EFF6; border-radius: 16px; overflow: hidden; }
.sres__h {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 13px 18px;
  font-size: 15px; font-weight: 800; color: #16324A;
  background: #F7FBFE; border-bottom: 1px solid #EDF3F9;
}
.sres__h b { font-size: 12px; font-weight: 700; color: #0F6F8F; background: #E8F4FA; border-radius: 10px; padding: 2px 9px; }
.sres__cat { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--c-primary, #1491BB); text-decoration: none; }
.sres__cat:hover { text-decoration: underline; }
.sres__i { display: flex; align-items: baseline; gap: 10px; padding: 11px 18px; border-bottom: 1px solid #F3F7FB; text-decoration: none; color: inherit; }
.sres__i:last-child { border-bottom: 0; }
.sres__i:hover { background: #F5FAFE; }
.sres__n { font-size: 14px; font-weight: 600; color: #1F2E3D; }
.sres__i:hover .sres__n { color: var(--c-primary, #1491BB); }
.sres__s { flex: 1; min-width: 0; font-size: 12px; color: #8399AC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sres__go { font-size: 12px; color: #A9BDCE; opacity: 0; transition: opacity .15s; }
.sres__i:hover .sres__go { opacity: 1; color: var(--c-primary, #1491BB); }
.detail--search .grid-empty { margin: 0 0 40px; }

/* —— 全局搜索：结果页内的搜索框 + 窄屏汉堡抽屉入口 —— */
.sres__form { display: flex; gap: 10px; margin: 0 0 18px; }
.sres__form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px;
  font-size: 14px; font-family: inherit; color: #16324A;
  background: #fff; border: 1px solid #D8E5F0; border-radius: 12px; outline: none;
}
.sres__form input:focus { border-color: var(--c-primary, #1491BB); box-shadow: 0 0 0 3px rgba(20, 145, 187, .12); }
.sres__form button {
  height: 44px; padding: 0 22px; font-size: 14px; font-weight: 700; font-family: inherit;
  color: #fff; background: var(--c-primary, #1491BB); border: 0; border-radius: 12px; cursor: pointer;
}
.sres__form button:hover { filter: brightness(1.06); }
/* ⚠️ 窄屏搜索入口走悬浮按钮（#fab .fab__s），**不要**往 .nav__links 里塞元素：
 * verify_navorder 按子元素个数断言「21 个导航项」，隐藏元素也会被算进去（假红）。 */

/* 全站搜索悬浮入口：只在「导航搜索框被隐藏」的宽度出现（≤1499px），宽屏不重复占位 */
#fab .fab__s { display: none; }
@media (max-width: 1499px) { #fab .fab__s { display: block; } }

/* ==========================================================================
   NPC 图鉴 · B站 WIKI 排版（2026-10-15 用户要求「一级页面排版按照 bwiki 的排版，
   详情页排版内容照抄」）
   --------------------------------------------------------------------------
   数值来源：直接用真实浏览器打开 wiki.biligame.com 的 NPC 图鉴页，
   读 getComputedStyle 得到（不是照截图目测）——关键量：
     #frameNpc        1160 宽 · padding 10 · 2px solid #C4BFB9 · 圆角 6 · #F6F0E4 底
     .resp-tabs-list  li 高 44 · 右/下外边距 8
     .tab-panel       内距 10px 20px · 圆角 6 · 激活 #FFF + inset 0 1px 3px rgba(0,0,0,.25)；
                      未激活 #FCFBF7 + 外阴影 0 1px 3px #BFBFBF，文字 #949AA4（激活 #37475E）
     .resp-tabs-container  白底 · 圆角 5 · padding-top 10
     .resp-tab-case   flex · justify-content: space-evenly · flex-wrap: wrap
     .giconCard       270×150 · #FBF8EF 底 · 下外边距 10
     .giconCard > .t  120 高 · linear-gradient(rgba(177,88,247,.04), rgba(49,93,207,.2) 93.75%), #3B475D
                      · flex center space-evenly · 0 2px 1px rgba(0,0,0,.25)
     .l 100×100（2px #FBF8EF 边 · 圆角 5）   img 96×96
     .r 宽 140 高 100
       .y  行高 20 · 12px/700 · #FEC88A（「NPC」+ 右侧状态图标，图标 20px、右距 6）
       .n  18px/32/700 · #FBF8EF · 下距 10
       .a  14px/16/700 · #9DA5BB（📍13×16 + 位置文字）
     赠礼条 高 30 · flex center · 「赠礼已完成」#3B475D/700 + 20×20 方框（2px #3B475D 边、左距 12）
   覆盖块放文件末尾（旧 .ccard--npc / .detail--npc 已在上文删除），不用 !important。
   ========================================================================== */

/* —— ① 一级页面：米黄外框 + 地区 Tab + 卡片墙 —— */
.npcframe {
  margin: 0 var(--pad-x) 60px;
  padding: 10px;
  background: #F6F0E4;
  border: 2px solid #C4BFB9;
  border-radius: 6px;
  color: #66574A;
}
.npcframe__body {
  background: #fff;
  border-radius: 5px;
  padding: 10px 0 0;
}
/* 卡片墙：横向等距排布（= B站 WIKI 的 space-evenly），行距 10（卡自带下距）
   ⚠️ 只覆盖间距与排列，**不动** .grid-cards 的 display（它是全站共用的 flex 墙）。 */
.npcframe__body .grid-cards {
  padding: 0 0 10px;
  gap: 10px 0;
  justify-content: space-evenly;
}
.npcframe__body .grid-empty { margin: 0 20px 20px; }

/* 地区 Tab 栏。交互仍走全站的 .chip[data-filter] → data-tags（点一下就是给 activeFilter 赋值），
   所以按钮上必须保留 .chip 与 data-filter 两个钩子。
   ⚠️ 选择器限定 `.chip[data-filter]`（特异性 0,3,0）而不是 `.npctabs .chip`：
      这样「＋ 新增条目 / ⤒ 批量导入」两个功能按钮不会被改成 Tab 的样子。 */
.npctabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.npctabs__sp { flex: 1 1 auto; }
.npctabs .chip[data-filter] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 6px;
  background: #FCFBF7;
  color: #949AA4;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  box-shadow: 0 1px 3px rgba(191, 191, 191, .95);
  transition: background .15s, color .15s;
}
.npctabs .chip[data-filter]:hover { background: #fff; color: #37475E; }
.npctabs .chip[data-filter].chip--active {
  background: #fff;
  color: #37475E;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
}
.npctabs__ic { width: 24px; height: 24px; object-fit: contain; display: block; flex: 0 0 24px; }

/* —— ② NPC 卡：270×150 横卡 —— */
.ccard--npc {
  width: 270px;
  height: 150px;
  flex: 0 0 270px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #FBF8EF;
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
}
/* 无底板的全局 hover（图标放大 / 卡片浮起）在这里都不适用 → 用左侧头像轻微提亮代替 */
.ccard--npc:hover { transform: none; box-shadow: none; background: #FBF8EF; }
.ccard--npc:hover .t { filter: brightness(1.07); }

.ccard--npc .t {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: linear-gradient(180deg, rgba(177, 88, 247, .038) 0%, rgba(49, 93, 207, .2) 93.75%), #3B475D;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .25);
  transition: filter .16s;
}
.ccard--npc .l {
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #FBF8EF;
  border-radius: 5px;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 2px 1px rgba(0, 0, 0, .25);
}
.ccard--npc .l img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard--npc .l .ph { font-size: 40px; font-weight: 700; color: #FBF8EF; }

.ccard--npc .r {
  width: 140px;
  flex: 0 0 140px;
  height: 100px;
  display: block;
  padding: 0;
  text-align: left;
  align-items: initial;
}
.ccard--npc .y {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  color: #FEC88A;
}
.ccard--npc .y .is { display: flex; align-items: center; }
.ccard--npc .y .is img.i {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  display: block;
  object-fit: contain;
}
.ccard--npc .y .is img.i:last-child { margin-right: 0; }
.ccard--npc .n {
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  height: 33px;
  margin: 0 0 10px;
  color: #FBF8EF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: flex-start;
}
/* ⚠️ 位置文字长度差异极大（最长 43 字），必须夹在 2 行内 —— 否则会撑破 .r（100 高）盖到赠礼条上。
   B站 WIKI 也是最多两行，超出的部分被卡片裁掉。 */
.ccard--npc .a {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: #9DA5BB;
  word-break: break-all;
  max-height: 32px;
  overflow: hidden;
}
.ccard--npc .a img { width: 13px; height: 16px; flex: 0 0 13px; display: block; }

/* 赠礼条：只在「可赠礼」的 NPC 上出现内容（格子始终留着 30px，与 B站 WIKI 一致） */
.ccard--npc .gift {
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.ccard--npc .gift .b { font-size: 14px; font-weight: 700; line-height: 20px; color: #3B475D; }
.ccard--npc .gift .g {
  width: 20px;
  height: 20px;
  margin-left: 12px;
  flex: 0 0 20px;
  box-sizing: border-box;
  border: 2px solid #3B475D;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: #FBF8EF;
}
.ccard--npc .gift.is-on .g { background: #3B475D; }
.ccard--npc .gift.is-on .g::after { content: '✓'; }
.ccard--npc .gift .b[hidden], .ccard--npc .gift .g[hidden] { display: none; }

/* 窄屏：卡片铺满一行（270 在小屏上会溢出） */
@media (max-width: 760px) {
  .npcframe { padding: 6px; }
  .npctabs .chip[data-filter] { height: 38px; padding: 6px 14px; font-size: 13px; }
  .npctabs__ic { width: 20px; height: 20px; flex-basis: 20px; }
  .npcframe__body .grid-cards { justify-content: center; }
  .ccard--npc { flex: 0 0 100%; width: 100%; max-width: 320px; }
}

/* —— ③ NPC 详情页 —— */
.detail--npc { background: #FCFBFD; }
.detail__bwiki {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: #8A9AA8;
  padding: 6px 12px;
  border-radius: 999px;
  background: #F1F5F8;
}
.detail__bwiki:hover { background: #E6EEF4; color: #5B86E5; }
/* 有外链按钮时，编辑按钮不再需要 auto 边距（否则两个都往右挤） */
.detail__bwiki + .detail__edit { margin-left: 0; }

.npcd { padding: 4px var(--pad-x) 60px; }
.npcd-top { display: flex; align-items: flex-start; gap: 24px; }
.npcd-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 28px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid #E8EEF3;
  border-radius: 12px;
}
.npcd-l { flex: 0 0 auto; }
.npcd-ava {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #F3EBFA, #E6EEF8);
  box-shadow: 0 0 0 3px #EFE7DA, 0 0 0 5px #D9C9A6, 0 6px 18px rgba(76, 92, 120, .16);
}
.npcd-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.npcd-ava__ph { font-size: 60px; font-weight: 700; color: #B98BE8; }
.npcd-ava__src {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: rgba(59, 71, 93, .78);
  padding: 2px 0;
}
.npcd-r { flex: 1 1 auto; min-width: 0; }
.npcd-nick { font-size: 14px; font-weight: 700; color: #8FA0B8; margin-bottom: 2px; }
.npcd-name {
  font-size: 28px;
  font-weight: 700;
  color: #1A1A2E;
  margin: 0;
  font-family: 'Noto Serif SC', Georgia, serif;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.npcd-name small { font-size: 14px; font-weight: 500; color: #9AA9BC; font-family: inherit; }
/* 地址条（B站 WIKI .npcAddress）：檀木色渐变 + 白字 */
.npcd-addr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  margin: 10px 0 6px;
  padding: 0 24px 0 12px;
  border-radius: 5px;
  background: linear-gradient(90deg, #C6A97A 0%, rgba(211, 188, 142, .35) 70%, rgba(211, 188, 142, 0) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(90, 70, 40, .28);
}
.npcd-addr img { width: 13px; height: 16px; flex: 0 0 13px; }
/* 信息表（B站 WIKI table.npcInfor：td 内距 5、标签列 110、16px、#3B475D） */
.npcd-table { max-width: 560px; }
.npcd-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(59, 71, 93, .08);
  font-size: 15px;
  line-height: 1.7;
  color: #3B475D;
}
.npcd-row:last-child { border-bottom: 0; }
.npcd-row .k { flex: 0 0 110px; color: #7C8AA0; white-space: nowrap; }
.npcd-row .v { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.npcd-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.npcd-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 5px;
  border-radius: 999px;
  background: #F3F6FA;
  color: #5C6B80;
  font-size: 12px;
  font-weight: 700;
}
.npcd-flag img { width: 18px; height: 18px; display: block; }
.npcd-alias { margin: 12px 0 0; font-size: 12px; color: #9AA9BC; }
.npcd-none { font-size: 14px; color: #9AA9BC; margin: 8px 0 0; }

.npcd-side { flex: 0 0 300px; }
.npcd-sec {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #E8EEF3;
  border-radius: 12px;
}
.npcd-sec + .npcd-sec { margin-top: 20px; }
.npcd-h2 {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A2E;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #EAF0F6;
  font-family: 'Noto Serif SC', Georgia, serif;
}
.npcd-sec--store, .npcd-sec--spot { margin-top: 24px; background: #fff; border: 1px solid #E8EEF3; border-radius: 12px; padding: 20px 22px; }
.npcd-table--store { max-width: none; width: 100%; border-collapse: collapse; font-size: 14px; color: #3B475D; }
.npcd-table--store th {
  text-align: left;
  padding: 9px 12px;
  background: #F4F7FA;
  color: #5C6B80;
  font-weight: 700;
  white-space: nowrap;
}
.npcd-table--store th:first-child { border-radius: 8px 0 0 8px; }
.npcd-table--store th:last-child { border-radius: 0 8px 8px 0; }
.npcd-table--store td { padding: 9px 12px; border-bottom: 1px solid #EEF3F8; }
.npcd-table--store tr:last-child td { border-bottom: 0; }
.npcd-table--store td.nm { font-weight: 600; }
.npcd-spots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.npcd-spots li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #F4F7FA;
  font-size: 13px;
  color: #3B475D;
}
.npcd-spots .tm { font-weight: 700; color: #5B86E5; }
.npcd-spots .cd { color: #93A2B4; font-variant-numeric: tabular-nums; }

/* —— ④ 对话与待机语音（B站 WIKI #npcTalk：#FBF8EF 底 + 2px 边 · 圆角 5 · 内距 30）—— */
.npcd-talk {
  margin-top: 30px;
  padding: 24px 30px 30px;
  background: #FBF8EF;
  border: 2px solid rgba(0, 0, 0, .2);
  border-radius: 5px;
}
.npcd-h2--talk { border-bottom-color: #E6DCCB; color: #3B4255; }
.nbw-block + .nbw-block { margin-top: 24px; }
/* 对话块标题条（B站 WIKI .npcSmallTitle：#3E4556 底 · #9DA5BB 字 · 内距 5px 20px · 圆角 3） */
.nbw-title {
  display: block;
  margin: 15px 0 10px;
  padding: 5px 20px;
  background: #3E4556;
  color: #9DA5BB;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 3px;
}
.nbw-block:first-child .nbw-title { margin-top: 0; }
.nbw-body { display: block; }
.nbw-body--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px;
  align-items: start;
}
.nbw-main { min-width: 0; }

/* 台词：`*` 行 → 「• 内容」条目（构建期已把前缀拆成 .nbw-say--li） */
.nbw-say { margin: 0 0 2px; font-size: 15px; line-height: 1.85; color: #3B4255; word-break: break-word; }
.nbw-say--li { padding-left: 18px; position: relative; }
.nbw-say--li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #A9B4C4;
}
.nbw-say--li[data-lv="2"] { padding-left: 34px; }
.nbw-say--li[data-lv="2"]::before { left: 20px; }
.nbw-say--li[data-lv="3"] { padding-left: 50px; }
.nbw-say--li[data-lv="3"]::before { left: 36px; }
.nbw-say--li + .nbw-say--p { margin-top: 8px; }
.nbw-say--p + .nbw-say--li { margin-top: 8px; }
.nbw-say:last-child { margin-bottom: 0; }

/* 选项组（本站特有：B站 WIKI 是静态罗列全部分支，这里做成可点击切换） */
.nbw-sel { margin: 10px 0 12px; }
.nbw-opts { display: flex; flex-direction: column; gap: 2px; }
.nbw-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 10px 4px 25px;
  position: relative;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9DA5BB;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.nbw-opt::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 15px; height: 15px;
  margin-top: -7.5px;
  background: url("https://patchwiki.biligame.com/images/ys/thumb/9/9e/ow9c0oetotp207qal9lpnwzh338d8ab.png/20px-NPC%E5%9B%BE%E9%89%B4-%E5%AF%B9%E8%AF%9D%E6%98%AF.png") center/contain no-repeat;
  opacity: .75;
}
.nbw-opt:hover { background: rgba(59, 71, 93, .05); color: #5C6B80; }
.nbw-opt.is-on { color: #3B4255; font-weight: 700; background: rgba(59, 71, 93, .07); }
.nbw-opt.is-on::before { opacity: 1; }
.nbw-opt__ic {
  width: 18px; height: 18px; flex: 0 0 18px;
  background: center/contain no-repeat;
}
.nbw-opt__ic[data-k="Gift"] { background-image: url("https://patchwiki.biligame.com/images/ys/thumb/4/46/k3iglvhfofa11hv72k90e5sm18wnx9l.png/20px-NPC%E5%9B%BE%E9%89%B4-%E8%B5%A0%E7%A4%BC%E6%98%AF.png"); }
.nbw-opt__ic[data-k="Store"] { background-image: url("https://patchwiki.biligame.com/images/ys/thumb/9/95/rgy9wypbua31hdxqxeajpiwbdempyvf.png/20px-NPC%E5%9B%BE%E9%89%B4-%E5%95%86%E5%BA%97%E6%98%AF.png"); }
.nbw-panes { margin-top: 6px; }
.nbw-pane { display: none; padding-left: 12px; border-left: 2px solid #E8DFCC; }
.nbw-pane.is-on { display: block; }

/* 待机语音表（B站 WIKI 右列：两列表头 + 行） */
.nbw-voice { font-size: 13px; }
.nbw-vh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 0 0 6px;
  border-bottom: 1px solid #E8DFCC;
  color: #8A929F;
  font-weight: 700;
}
.nbw-vr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(232, 223, 204, .6);
  color: #5C6B80;
  line-height: 1.7;
}
.nbw-vr:last-child { border-bottom: 0; }
.nbw-vr .a { display: flex; align-items: flex-start; gap: 6px; }
.nbw-vr .b { color: #8A929F; }
.nbw-vic {
  width: 15px; height: 15px; flex: 0 0 15px; margin-top: 3px;
  background: url("https://patchwiki.biligame.com/images/ys/thumb/9/9e/ow9c0oetotp207qal9lpnwzh338d8ab.png/20px-NPC%E5%9B%BE%E9%89%B4-%E5%AF%B9%E8%AF%9D%E6%98%AF.png") center/contain no-repeat;
  opacity: .8;
}

/* 对话正文里的行内元素（构建期生成的富文本） */
.nbw-a { color: #4C7BD9; font-weight: 600; }
.nbw-a:hover { text-decoration: underline; }
.nbw-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 2px;
  margin: 0 2px;
  border-radius: 999px;
  background: #F1ECE0;
  font-size: 13px;
  color: #5C5240;
  vertical-align: middle;
}
.nbw-item__ic { width: 20px; height: 20px; display: block; }
.nbw-item__n { font-weight: 600; }
.nbw-item__q { font-style: normal; color: #8A7F6A; }
.nbw-hm { background: #3E4556; color: #3E4556; border-radius: 3px; padding: 0 4px; cursor: pointer; }
.nbw-hm:hover { color: #EDE3D0; }
.nbw-todo { color: #B9892F; border-bottom: 1px dashed #D8B96A; }

@media (max-width: 1100px) {
  .npcd { padding-left: 24px; padding-right: 24px; }
  .npcd-top { flex-direction: column; }
  .npcd-side { flex: 0 0 auto; width: 100%; }
  .nbw-body--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .npcd-main { flex-direction: column; gap: 18px; padding: 18px; }
  .npcd-ava { width: 120px; height: 120px; }
  .npcd-name { font-size: 22px; }
  .npcd-talk { padding: 16px; }
  .npcd-table--store { font-size: 12px; }
  .npcd-table--store th, .npcd-table--store td { padding: 7px 8px; }
}

/* ==========================================================================
   魔神任务 · B站 WIKI 排版（2026-10-15）
   用户要求：「魔神任务一级页面排版照抄 https://wiki.biligame.com/ys/魔神任务」，
   详情页统合观测枢 + B站 WIKI 两站内容。
   --------------------------------------------------------------------------
   数值来源：真实浏览器打开该页逐个读 getComputedStyle（不是照截图目测）：
     .map-dh             1160×58 · #F8F9FA · 圆角 4 · margin 10px 0
     .map-dh-left        100 宽 · #EEE · padding 10 · 16px/700 · #777 · 居中
     .map-dh-right       1060 宽 · padding 10
     .map-dh-an          120×30 · #E1E5EA · 圆角 4 · padding 3px 10px · 14px/700 · #848080 · float left · margin 4
     .ys-collapse-frame  1160 宽 · 2px solid #C1E9FD · 圆角 5
     .ys-collapse-name   padding 10px 15px · 底 rgba(193,233,253,.314) · 标题 14px/600 居中
     .ys-collapse-explain 36×24 · 2px 边 · 圆角 10 · 9px/600
     .ys-collapse-content padding 10px 15px
     h2                  1160×38 · margin 15px 0 20px · 底 #D9D1C8 · 18px/700 #685841 · line-height 38 · 居中
                         三张装饰图：左 61px（0 0）/ 右 61px（100% 0）/ 中 306px（50% 2px）
     .taskIcon           150×281 · inline-block · margin 15px 10px（+行内空白 ≈ pitch 174）
     .taskIconTitleCase  absolute · bottom 1.4 · 150×31 · flex
     .taskIconTitle      absolute · top 3.55 · padding 0 3px · 14px/700 · #876A51 · 居中
     .taskIconMarkImg img    显示 18×34（原图 43×82）· 左上 3.75
     .taskIconNumberImg img  显示 21×21（原图 52×52）· 左上 1.8
   三处**刻意不照抄**：
     ① B站的 .taskIconTitle / .taskIconSubhead **绝对定位到同一坐标互相压住**（实测 top 都是 3.55）
        → 幕名被幕次盖掉，卡上只看得到一行。站内排成两行：幕次在上、幕名在下。
     ② B站靠 inline-block + text-align:center 排卡，行内空白自带 ~4px 缝
        → 站内用 flex + gap 24px 精确复刻 pitch 174，且每行居中（= B站的对齐方式）。
     ③ 卡片尺寸站内做响应式（B站是死的 1160 版心）。
   ========================================================================== */

/* —— 一级页面容器 —— */
.aqbody { display: flex; flex-direction: column; padding: 0 var(--pad-x) 60px; }
/* 图标/名称卡里视觉隐藏但**仍在 DOM** 的全名：全站搜索与筛选靠读 .ccard__name 工作 */
.aq-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* —— ① 任务导航条 —— */
.aqnav {
  display: flex; align-items: stretch;
  margin: 10px var(--pad-x) 10px;
  background: #F8F9FA; border-radius: 4px; overflow: hidden;
}
.aqnav__l {
  flex: 0 0 100px; padding: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #EEE; color: #777; font-size: 16px; font-weight: 700; text-align: center;
}
.aqnav__r { flex: 1 1 auto; min-width: 0; padding: 10px; display: flex; flex-wrap: wrap; align-items: flex-start; }
.aqnav__i {
  display: block; margin: 4px; padding: 3px 10px; min-width: 120px;
  border-radius: 4px; background: #E1E5EA; color: #848080;
  font-size: 14px; font-weight: 700; line-height: 23.8px; text-align: center;
  text-decoration: none; transition: background .15s, color .15s;
}
.aqnav__i:hover { background: #D2D8DF; color: #5E5B5B; }
/* 当前所在类型：B站原页这里是不可点的纯文本、与别的胶囊同款 —— 站内给一档更深的底，
   让「我在哪」看得出来（只动颜色，不动尺寸/位置） */
.aqnav__i.is-on { background: #C6CDD6; color: #575757; }

/* —— ② 「关于魔神任务」折叠框 —— */
.aqintro { margin: 0 var(--pad-x) 10px; border: 2px solid #C1E9FD; border-radius: 5px; background: #fff; }
.aqintro__h {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 10px 15px; background: rgba(193, 233, 253, .314);
  color: #66574A; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none;
}
.aqintro__h::-webkit-details-marker { display: none; }
.aqintro__h::marker { content: ''; }
.aqintro__x {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: 2px solid #C1E9FD; border-radius: 10px;
  color: #66574A; font-size: 9px; font-weight: 600;
}
.aqintro__x::after { content: '折叠'; }
.aqintro:not([open]) .aqintro__x::after { content: '展开'; }
.aqintro__b { padding: 10px 15px; color: #66574A; font-size: 14px; line-height: 1.7; }
.aqintro__b p { margin: 0 0 8px; }
.aqintro__b img { max-width: 100%; height: auto; vertical-align: middle; }
.aqintro__b a { color: #3E7BB6; }
.aqintro__b center { text-align: center; }
/* B站说明里的「提示框」是内联样式的 div.tishi，safeRich 会保留 style → 这里只兜底一份 */
.aqintro__b .tishi {
  border-radius: 6px; padding: 10px; background: #E0EDFF;
  border: 1px solid #D0D0D0; border-left: 5px solid rgba(77, 120, 216, .78);
  margin-bottom: 5px; text-align: left;
}

/* —— ③ 章标题条（B站是 h2）：三张装饰图由 JS 内联成 background-image，这里只给定位/尺寸 —— */
.aqch { margin: 0; }
.aqch__h {
  margin: 15px 0 20px; height: 38px; line-height: 38px; overflow: hidden;
  background-color: #D9D1C8; background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 50% 2px;
  background-size: 61px auto, 61px auto, 306px auto;
  color: #685841; font-size: 18px; font-weight: 700; text-align: center;
}
.aqch__hl .pre { color: #3E7BB6; }
.aqch__note { margin: -12px 0 14px; color: #66574A; font-size: 14px; line-height: 1.7; text-align: center; }

/* —— ④ 卡片墙：B站每行都居中（inline-block + text-align:center），pitch 174 = 150 + 24 —— */
.aqch__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 0 0 6px; }

/* —— ⑤ 幕卡 150×281（立绘铺满 · 左上角标 · 底部标题条）—— */
.ccard--aq, .aqcard--ext {
  position: relative; display: block; overflow: hidden;
  width: 150px; height: 281px; flex: 0 0 150px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  cursor: pointer; text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.ccard--aq:hover, .aqcard--ext:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(90, 70, 40, .22); }
.aqcard__art { display: block; width: 150px; height: 281px; object-fit: cover; }
.aqcard__ph {
  display: flex; align-items: center; justify-content: center; width: 150px; height: 281px;
  background: linear-gradient(160deg, #EFE7D8, #DED2BC); font-size: 40px;
}
/* 角标：01 = 底纹带（全站同一张），02 = 幕次纹章（11 种，按幕次换） */
.aqcard__mark { position: absolute; top: 0; left: 3.75px; width: 18px; height: 34px; pointer-events: none; }
.aqcard__mark img { display: block; width: 18px; height: 34px; }
.aqcard__num { position: absolute; top: 2.8px; left: 1.8px; width: 21px; height: 21px; pointer-events: none; }
.aqcard__num img { display: block; width: 21px; height: 21px; }
/* 底部标题条：立在立绘自带的羊皮纸带上（B站实测 y 248.75~281，高 31）
   ⚠️ B站把「幕次」与「幕名」压在同一坐标（top 都是 3.55）→ 幕名被盖掉；站内排成两行 */
.aqcard__band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 31px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 3px; text-align: center; pointer-events: none;
}
.aqcard__t { max-width: 100%; font-size: 13px; font-weight: 700; line-height: 15px; color: #876A51; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aqcard__s { max-width: 100%; font-size: 11px; font-weight: 600; line-height: 14px; color: #9C8B72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 站内还没有的幕（退化成 B站外链卡）→ 右上角挂一个外链标记 */
.aqcard--ext::after {
  content: '↗'; position: absolute; top: 4px; right: 5px;
  width: 16px; height: 16px; line-height: 16px; text-align: center;
  border-radius: 50%; background: rgba(255, 255, 255, .82); color: #7A6A55; font-size: 11px;
}
/* 章注释紧贴标题条时上面那条负 margin 会把标题条压掉 —— 有注释时把间距还回来 */
.aqch__note + .aqch__grid { margin-top: 0; }

/* —— ⑥ 响应式 —— */
@media (max-width: 1160px) {
  .aqnav__i { min-width: 96px; font-size: 13px; }
  .aqch__h { background-size: 40px auto, 40px auto, 240px auto; }
}
@media (max-width: 760px) {
  .aqnav { flex-direction: column; }
  .aqnav__l { flex: 0 0 auto; }
  .aqch__grid { gap: 14px; }
  .ccard--aq, .aqcard--ext { width: 42vw; height: calc(42vw * 281 / 150); flex: 0 0 42vw; }
  .aqcard__art, .aqcard__ph { width: 100%; height: 100%; }
  .aqcard__band { height: 26px; }
  .aqcard__t { font-size: 12px; line-height: 13px; }
  .aqcard__s { font-size: 10px; line-height: 12px; }
}

/* ==========================================================================
   传说任务 · B站 WIKI 版式（2026-10-17）
   用户要求：传说任务一级页照 B站「传说任务」页排版 —— 取「传说任务和部族纪闻 / 邀约事件 /
   热点事件」三段；「版本活动」段搬到活动任务页。
   实测（B站 页面 getComputedStyle）：h3 地区条 1160×32（四重背景图）；传说卡 150×281（pitch 174）；
   邀约卡 150×312（立绘 495×495 从左上 -125%/-20% 处裁切）；h4 部族条 1160×25。
   ========================================================================== */
.lgbody { margin: 0; }
.lgch { margin: 0 0 4px; }

/* —— ① h3 地区条：左纹 19px + 右纹 19px + 中间纹样 278px + 横线 20px repeat-x —— */
.lgh {
  margin: 15px 0 10px; height: 32px; line-height: 32px; overflow: hidden;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
  background-position: 0 0, 100% 0, 50% 0, 0 0;
  background-size: 19px auto, 19px auto, 278px auto, 20px auto;
  color: #685841; font-size: 16px; font-weight: 700; text-align: center;
}
.lgh__t { display: inline-flex; align-items: center; gap: 6px; height: 32px; vertical-align: top; }
.lgh__t img { width: 30px; height: 30px; border-radius: 3px; margin: 0 2px; }

/* —— ② h4 部族条（纳塔 6 部族）：两侧虚线 —— */
.lgh__h4 {
  position: relative; margin: 10px 0 5px; height: 25px; line-height: 25px;
  color: #685841; font-size: 16px; font-weight: 700; text-align: center;
}
.lgh__h4::before, .lgh__h4::after {
  content: ''; position: absolute; top: 50%; width: 40%; height: 1px;
  background: repeating-linear-gradient(90deg, #D9D1C8 0 4px, transparent 4px 9px);
}
.lgh__h4::before { left: 0; }
.lgh__h4::after { right: 0; }

/* —— ③ 传说卡：底部只有幕次一行（B站 的幕名那层 color:transparent，站内不抄这个 bug）—— */
.ccard--lg .aqcard__band { justify-content: center; }

/* —— ④ 邀约卡 150×312：背景框 + 立绘 330%（对齐 B站 的 495×495）+ 26px 名字条 —— */
.ccard--inv {
  position: relative; display: block; overflow: hidden;
  width: 150px; height: 312px; flex: 0 0 150px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  cursor: pointer; transition: transform .18s, box-shadow .18s;
}
.ccard--inv:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(90, 70, 40, .22); }
.invc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* ⚠️ max-width:none 必须写：站内全局有 `img{max-width:100%}`，
      会把 330% 的立绘压回 150px，left:-125% 就把它整个推到卡片外面（表现为「只有星空背景、没有角色」）*/
.invc__art { position: absolute; left: -125%; top: -20%; width: 330%; height: auto; max-width: none; }
.invc__nb { position: absolute; left: 2px; right: 2px; bottom: 2px; width: calc(100% - 4px); height: 26px; background: rgba(32, 46, 68, .78); }
.invc__name {
  position: absolute; left: 0; right: 0; bottom: 2px; height: 26px; line-height: 26px;
  text-align: center; color: #FFFFFF; font-size: 14px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(20, 30, 50, .55);
}

/* —— ⑤ 「活动剧情分幕」说明句 —— */
.lgh__grp > .aqch__note { margin: -4px 0 10px; text-align: center; }

@media (max-width: 760px) {
  .ccard--inv { width: 42vw; height: calc(42vw * 312 / 150); flex: 0 0 42vw; }
  .lgh { background-size: 14px auto, 14px auto, 200px auto, 16px auto; font-size: 15px; }
}

/* ==========================================================================
   世界任务 · B站 WIKI 版式（2026-10-17）
   结构见 app.js「世界任务 · B站 WIKI 版式」一段：
     地区 tab（.wqtabs）→ 地区段（.wqch = .lgh 地区条 + .wqgrp 分类分组）
     → 紧凑条目（.ccard--wq：32px 圆图标 + 任务名 + 版本）
   设计口径：一屏要能扫 30+ 条（688 条世界任务），所以条目是「行」不是「牌」；
     但保留 .ccard 类名与 data-* 钩子 —— 筛选 / 搜索 / 阅读状态 / 点击进详情全部沿用原链路。
   ========================================================================== */
.wqtabs {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  margin: 4px 0 10px; padding: 9px 12px;
  border: 1px solid #E5DCCC; border-radius: 6px; background: #FBF7EF;
}
.wqtabs__l { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #8C7B60; line-height: 24px; letter-spacing: .5px; }
.wqtabs__r { display: flex; flex-wrap: wrap; gap: 6px; }
.wqt__i {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 11px; border: 1px solid #E0D5C2; border-radius: 14px;
  background: #FFFFFF; color: #6B5B44; font-size: 13px; line-height: 20px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.wqt__i:hover { border-color: #C9B794; color: #3F3428; }
.wqt__i.is-on { background: #6E5B3E; border-color: #6E5B3E; color: #FFFFFF; }
.wqt__n { font-size: 11px; opacity: .62; }
.wqt__i.is-on .wqt__n { opacity: .8; }

.wqbody { margin-top: 2px; }
.wqch { margin: 0 0 8px; }
.wqgrp { margin: 4px 0 12px; }
.wqcat {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 8px; font-size: 15px; font-weight: 700; color: #4A3D2C;
}
.wqcat__b { width: 3px; height: 15px; border-radius: 2px; background: #C0392B; }
.wqcat__n { font-size: 12px; font-weight: 400; color: #9C8E78; }
.wqgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 10px; }

/* 紧凑条目：覆盖 .ccard 的 240px 卡牌版式（2 个类名的优先级高于基础 .ccard） */
.ccard.ccard--wq {
  width: auto; height: auto; margin: 0; padding: 4px 8px; min-width: 0; /* 见下方窄屏注释：允许在网格里收缩 */
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  box-shadow: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ccard.ccard--wq:hover { background: #F6EEDF; border-color: #E4D6BE; transform: none; box-shadow: none; }
.wqe__ic {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #EFE6D6;
}
.wqe__ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wqe__ic b { font-size: 12px; font-weight: 700; color: #8C7B60; }
.wqe__n {
  flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 13px; font-weight: 400;
  color: #3F3428; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccard--wq:hover .wqe__n { color: #8E5B22; }
.wqe__v { flex: 0 0 auto; font-size: 11px; color: #A2917A; }

@media (max-width: 760px) {
  .wqtabs { padding: 8px; gap: 6px; }
  .wqtabs__l { line-height: 22px; }
  /* ⚠️ 必须是 minmax(0,1fr) 而不是 1fr：1fr 的下限是 auto = 卡片 min-content，
     而任务名是 white-space:nowrap，长名会把列撑宽（实测「雪山小叙」那格把第一列
     顶到 210px，第二列右缘 408 > 390 视口，整页被撑到 679）。minmax(0,1fr) 允许
     收缩，配合 .wqe__n 的 overflow:hidden + ellipsis 正常出省略号。 */
  .wqgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
  .wqe__n { font-size: 12px; }
  .wqe__v { display: none; }
}
/* 窄屏：地区 tab 改成「一条横向可滑的条子」——
   15 个地区在 390px 上折成 4 行会把首屏挤没（实测），横滑更接近 B站 的 tab 条。 */
@media (max-width: 900px) {
  .wqtabs { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  .wqtabs__l { line-height: 18px; }
  .wqtabs__r {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .wqtabs__r::-webkit-scrollbar { display: none; }
  .wqt__i { flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .wqgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; }
  .ccard.ccard--wq { padding: 4px 5px; gap: 6px; }
  .wqe__ic { flex: 0 0 26px; width: 26px; height: 26px; }
  .wqe__n { font-size: 11.5px; }
}

/* ==========================================================================
   魔神任务 · 详情页剧情（B站 wiki 小节页解析，2026-10-15）
   结构见 assets/archon-stage-data.js 顶部注释；节点 → HTML 见 aqNodesHTML()。
   ⚠️ 分支（选项 / tabber）**全部展开**，选项 chip 只做「跳到对应分支」的定位与高亮。
   ========================================================================== */

/* 来源说明行（统合两站的交代） */
.aq-src {
  margin: 0 0 14px; padding: 9px 12px;
  background: #F3F7FB; border-left: 4px solid #9FC4DE; border-radius: 0 8px 8px 0;
  color: #5A6B7A; font-size: 12.5px; line-height: 1.7;
}
.aq-src b { color: #37475E; }

/* —— 一个小节（= 详情页的一个「任务阶段」）—— */
.aq-stage__brief { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.aq-stage__brief b { font-family: 'Noto Serif SC', serif; font-size: 17px; color: var(--c-ink); }
.aq-stage__brief span { color: #8794A6; font-size: 12px; }

/* 小节的补充信息（任务地区 / 开放等级 / 编号 / 前置 / 后续 / 奖励） */
.aq-meta {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin: 0 0 12px; padding: 10px 12px;
  background: #FAFBFD; border: 1px solid #E6EDF3; border-radius: 10px;
  font-size: 12.5px; line-height: 1.9;
}
.aq-meta__r { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.aq-meta__k { flex: 0 0 auto; color: #8794A6; }
.aq-meta__v { color: #37475E; }
.aq-meta__v--rw, .aq-rw { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.aq-rw { margin-left: 2px; }

/* 道具图标（构建期 inline() 与运行期 aqItemChip() 用同一套类名） */
.aq-it { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.aq-it img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }
.aq-it i { font-style: normal; }
.aq-it b { font-weight: 600; color: #8794A6; }
.aq-it[data-noicon]::before {
  content: '◈'; color: #B9C6D2; font-size: 12px; line-height: 1;
}

/* 站内/站外条目链接 */
.aq-a { text-decoration: none; }
.aq-a--in { color: var(--c-primary-dark, #0E6E8E); border-bottom: 1px solid #BFDCE8; }
.aq-a--in:hover { color: #0A5570; border-bottom-color: #0A5570; }
.aq-a--ext { color: #8A7358; border-bottom: 1px dashed #D6C4A8; }
.aq-a--ext::after { content: '↗'; font-size: 10px; margin-left: 1px; }
.aq-sep { color: #C6D0DA; margin: 0 5px; }

/* —— 正文块 —— */
.aq-sec { margin: 0 0 20px; }
.aq-sec__t {
  margin: 18px 0 10px; padding: 0 0 0 10px;
  border-left: 4px solid var(--c-primary, #1491BB);
  font-size: 14.5px; font-weight: 700; color: #2A4553;
}
.aq-desc {
  margin: 0 0 10px; padding: 8px 12px;
  background: #F7F4EC; border-radius: 8px;
  color: #6A5D48; font-size: 13px; line-height: 1.8;
}
.aq-desc--lead { background: #F4F8FB; color: #4A5C6B; }
.aq-place { margin: 0 0 8px; color: #7E8C9C; font-size: 12px; }
.aq-nar { margin: 6px 0; color: #6B7B8C; font-size: 13.5px; line-height: 1.8; }
.aq-hr { border: 0; border-top: 1px dashed #DCE5EC; margin: 16px 0; }

/* 台词行（.aqc--xxx 是构建期 {{颜色}} 落下的行内着色） */
.aq-line { display: flex; gap: 10px; align-items: baseline; margin: 5px 0; font-size: 13.5px; line-height: 1.85; }
.aq-line[data-lv="1"] { margin-left: 22px; }
.aq-line[data-lv="2"] { margin-left: 44px; }
.aq-line[data-lv="3"] { margin-left: 66px; }
.aq-who { flex: 0 0 auto; font-weight: 700; color: var(--c-primary-dark, #0E6E8E); white-space: nowrap; }
.aq-who::after { content: '：'; }
.aq-txt { flex: 1 1 auto; min-width: 0; color: #2E3B45; }
.aq-txt img.aq-img { display: inline-block; max-height: 26px; vertical-align: middle; margin: 0 2px; }
.aqc--desc { color: #7E8C9C; }
.aqc--red { color: #D05B4E; }
.aqc--blue { color: #3E7BB6; }
.aqc--green { color: #4E9A6A; }
.aqc--yellow { color: #C08A2E; }
.aqc--gray, .aqc--plain { color: inherit; }
.aq-blur { background: #3E4556; color: #3E4556; border-radius: 3px; padding: 0 4px; cursor: pointer; }
.aq-blur:hover { color: #EDE3D0; }

/* —— 选项：chips 全列出 + 每个分支的对话**全部展开** —— */
.aq-opt { margin: 12px 0 16px; padding: 12px; background: #FBFAF6; border: 1px solid #EDE6D8; border-radius: 10px; }
.aq-opt__q { margin: 0 0 8px; color: #8A7358; font-size: 12.5px; }
.aq-opt__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.aq-opt__c {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid #D9CBB0; border-radius: 999px;
  background: #FFFDF8; color: #6A5D48; font-size: 12.5px; line-height: 1.5;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.aq-opt__c:hover { background: #F6EEDC; border-color: #C4A87A; }
.aq-opt__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #C4A87A; color: #fff; font-size: 10px; font-weight: 700;
}
.aq-opt__c .aq-ok { font-style: normal; color: #4E9A6A; font-weight: 700; }
.aq-opt__c .aq-bad { font-style: normal; color: #D05B4E; font-weight: 700; }
.aq-opt__b { margin: 0 0 10px; padding: 8px 0 8px 12px; border-left: 3px solid #E4D9C4; }
.aq-opt__b:last-child { margin-bottom: 0; }
.aq-opt__lb { display: block; margin: 0 0 6px; color: #8A7358; font-size: 12px; font-weight: 700; }
.aq-flash { animation: aqFlash 1.6s ease-out; }
@keyframes aqFlash {
  0% { background: #FFF3D6; }
  100% { background: transparent; }
}

/* —— 分支 tab（B站 tabber：空/荧 CG、未遇到/曾遇到 对话…）—— */
.aq-tab { margin: 10px 0 14px; padding: 10px 0 0 12px; border-left: 3px solid #D7E6F0; }
.aq-tab__n {
  margin: 0 0 8px; color: #0E6E8E; font-size: 12px; font-weight: 700;
  background: #EAF3F9; display: inline-block; padding: 3px 10px; border-radius: 999px;
}

/* —— 额外对话 / 过场动画（折叠块，默认展开）—— */
.aq-fold { margin: 10px 0 16px; border: 1px solid #E3EAF0; border-radius: 10px; background: #FCFDFE; }
.aq-fold__s {
  padding: 8px 12px; color: #4A5C6B; font-size: 12.5px; font-weight: 700;
  cursor: pointer; list-style: none;
}
.aq-fold__s::-webkit-details-marker { display: none; }
.aq-fold__s::before { content: '▸'; display: inline-block; margin-right: 6px; color: #9FB3C2; transition: transform .15s; }
.aq-fold[open] > .aq-fold__s::before { transform: rotate(90deg); }
.aq-fold__b { padding: 4px 14px 12px; border-top: 1px solid #EDF3F9; }

/* —— 剧情 CG 大图 —— */
.aq-cg { margin: 14px 0; text-align: center; }
.aq-cg img {
  max-width: 100%; height: auto; display: block; margin: 0 auto;
  border-radius: 10px; box-shadow: 0 4px 16px rgba(20, 69, 107, .12); cursor: zoom-in;
}
.aq-cg figcaption { margin-top: 6px; color: #8794A6; font-size: 12px; }

/* —— 观测枢补充分块（任务过程 / 任务奖励 / 地图说明）—— */
.aq-obs { margin-top: 26px; padding-top: 18px; border-top: 2px dashed #E3EAF0; }
/* 2026-10-17 晚：观测枢的「任务过程 / 任务奖励 / 地图说明」已挪到剧情对话**之前**（.aq-obs--pre），
 * 它是正文的第一块内容，不需要那条「与上文分隔」的虚线；补在后面的块（.aq-obs--post）才需要。 */
.aq-obs--pre { margin-top: 16px; padding-top: 0; border-top: 0; }
.aq-obs--pre .qd-wrap:last-child { margin-bottom: 0; }
/* 2026-10-17 晚：观测枢内容改成**跟着任务阶段走**（每个 .qs-stage 内先阶段标题/信息行，
 * 再过程/奖励/地图，最后剧情）。这一块没有「与上文分隔」的虚线，也不抢 26px 上边距。 */
.qs-stage .aq-obs--stage { margin: 12px 0 16px; padding-top: 0; border-top: 0; }
.qs-stage .aq-obs--stage .aq-obs__h { color: #5A6B7B; font-size: 13px; font-weight: 600; }
.qs-stage .aq-obs--stage .qd-wrap:last-child { margin-bottom: 0; }
/* 阶段内的剧情区接在观测枢折叠条之后 → 给一点呼吸，避免两个区块贴死 */
.qs-stage .aq-obs--stage + .aq-desc--lead,
.qs-stage .aq-obs--stage + .qd-split { margin-top: 18px; }
.aq-obs__g { margin: 0 0 14px; }
.aq-obs__h { margin: 0 0 8px; color: #8794A6; font-size: 12.5px; font-weight: 700; }
.aq-obs .qd-wrap { margin-bottom: 10px; }

@media (max-width: 760px) {
  .aq-meta { gap: 4px 14px; padding: 8px 10px; }
  .aq-line { font-size: 13px; }
  .aq-line[data-lv="1"] { margin-left: 14px; }
  .aq-line[data-lv="2"] { margin-left: 28px; }
  .aq-line[data-lv="3"] { margin-left: 42px; }
}

/* 魔神任务一级页的「＋ 新增条目 / ⤒ 批量导入」入口行（2026-10-16 补回：
   照 bwiki 改版时整行 chip 被换掉，verify_edit_page / verify_quest8 双双红掉） */
.aqcrud { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }
.aqcrud .chip { margin: 0; }

/* ===== 全站图鉴 · 筛选「整行」隐藏（2026-10-19 用户拍板）=====
   藏的是**一整条筛选维度**（如任务道具的「实装版本」整行），不是单个 chip。
   · 行末一颗「眼睛划掉」→ 这一整行消失（.is-rowhidden）
   · 面板右下 / 原筛选条位置出现一颗「睁眼」→ 点回恢复
   覆盖：.bfilters__row / .efilters__row（敌人·动物·物产）、.filters（单条筛选条） */
.rowhide {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 50%; background: none;
  color: #A2947C; opacity: .55; cursor: pointer;
  transition: opacity .14s, color .14s, background .14s, box-shadow .14s;
}
.rowhide svg { width: 15px; height: 15px; }
/* 多行面板：行内绝对定位在右端，不跟 chips 抢宽度。
   ⚠️ 不要写成 flex 末项：390px 下 .bfilters__body 会占满整行，按钮被挤到第二行去 */
.bfilters__row.has-rowhide, .efilters__row.has-rowhide { position: relative; padding-right: 30px; }
.bfilters__row.has-rowhide > .rowhide { position: absolute; right: -2px; top: 0; }
.efilters__row.has-rowhide > .rowhide { position: absolute; right: -2px; top: 2px; }
/* 单条筛选条：按钮是 flex 末项，margin-left:auto 顶到最右，align-self 跟着行高居中 */
.filters.has-rowhide > .rowhide { align-self: center; margin: 0 0 0 auto; }
.bfilters__row:hover > .rowhide, .efilters__row:hover > .rowhide, .filters:hover > .rowhide { opacity: 1; color: #7E7361; }
.rowhide:hover { opacity: 1; color: var(--c-red, #C0392B); background: #FCEDED; box-shadow: inset 0 0 0 1px #F0D2D2; }
.bfilters__row.is-rowhidden, .efilters__row.is-rowhidden,
.filters.is-rowhidden, .npctabs.is-rowhidden { display: none !important; }

/* 恢复入口（只有存在隐藏行时才出现）：一颗睁开的眼睛，样式与行末按钮同款 */
.fh-restore {
  align-self: flex-end;
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 50%; background: none;
  color: #A2947C; cursor: pointer;
  transition: color .14s, background .14s, box-shadow .14s;
}
.fh-restore svg { width: 15px; height: 15px; }
.fh-restore:hover { color: var(--c-red, #C0392B); background: #FCEDED; box-shadow: inset 0 0 0 1px #F0D2D2; }
/* 单条筛选条被收起后，恢复眼睛插在它原来的位置（上一行），与筛选条的右内边距对齐 */
.fh-solo { display: flex; justify-content: flex-end; margin: -4px var(--pad-x) 8px; }
/* 触屏没有 hover：这一档常显，否则手机上永远看不见按钮 */
@media (hover: none), (max-width: 760px) {
  .rowhide { opacity: .8; }
}

/* ===== 成就图鉴：B站 WIKI「成就系统」的称号挂饰排版（2026-10-22）=====
 * 用户要求：「成就页面按这个排版 https://wiki.biligame.com/ys/成就系统」。
 * 参考页 = 73 张 284×415 的纹章牌（深蓝底 + 金边），徽记压在上方、名称压在下部。
 * 站内按 150×219 排（与 B站 实测同尺寸），一行 8 张；底板本地化到 assets/ach-badge-bg.png，
 * 不 hotlink 图床 —— 73 张牌共用同一张底图，走外链会拖慢首屏。
 * ⚠️ B站 的名称是绝对定位、长名直接溢出牌面（「挪德卡莱·月与浪迹的乐园·其之一」会压到金边上）；
 *    这里限制两行 + 13.5px，最长 16 字正好两行，不溢出。 */
.grid-cards--ach { gap: 10px; padding-top: 20px; }
/* 书籍卡墙（B站「书籍一览」密度）：100px 方卡 + 12px 间距 */
.grid-cards--books { gap: 12px; padding-top: 20px; }
.ccard.ccard--achbadge {
  position: relative;
  width: 150px; height: 219px;
  flex: 0 0 auto; padding: 0;
  /* ⚠️ 显式改回纵向：全局 .ccard 是 `flex-direction: row`（图左文右的形态），
   *    牌面虽然全是绝对定位子元素、视觉上没差，但会触发「卡片横排」的版式校验，
   *    也容易在以后加内容时踩坑。 */
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform .18s;
}
.ccard--achbadge .achbadge__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 5px 12px rgba(6, 20, 30, .16));
  transition: filter .18s;
}
.ccard--achbadge .achbadge__icon {
  position: absolute; left: 10%; top: 14px;
  width: 80%; height: auto;
  transition: transform .18s, filter .18s;
}
.ccard--achbadge .achbadge__name {
  /* ⚠️ 名称用 top 定位、**不要用 bottom**：纹章底板在 87% 高度之后开始收窄
   *    （实测底图 y=87% 宽 252/284、92% 收成 212、96% 只剩 108）。
   *    文字若贴着最底下，就会跑到金边外面（手机 112px 宽时尤其明显）。
   *    这里定在 71% 起、最多两行 → 落幅 71%~87%，正好在还不收窄的那一段。
   *    宽度给 76%，两行放下最长的 16 字（挪德卡莱·月与浪迹的乐园·其之一）。 */
  position: absolute; left: 12%; right: 12%; top: 71%;
  font-size: 14px; line-height: 1.3; font-weight: 500;
  color: #F3EFE6; text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.ccard--achbadge:hover { transform: translateY(-3px); }
.ccard--achbadge:hover .achbadge__bg { filter: drop-shadow(0 9px 18px rgba(6, 20, 30, .26)) drop-shadow(0 0 10px rgba(228, 193, 120, .28)); }
.ccard--achbadge:hover .achbadge__icon { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(240, 205, 130, .5)); }

/* 窄屏：牌面整体等比缩小（150 → 132 → 112），名称字号跟着降，保持两行不溢出 */
@media (max-width: 1024px) {
  .ccard.ccard--achbadge { width: 132px; height: 193px; }
  .ccard--achbadge .achbadge__icon { top: 12px; }
  .ccard--achbadge .achbadge__name { font-size: 12.5px; left: 11%; right: 11%; }
}
@media (max-width: 720px) {
  .grid-cards--ach { gap: 8px; }
  .ccard.ccard--achbadge { width: 112px; height: 164px; }
  .ccard--achbadge .achbadge__icon { top: 10px; }
  .ccard--achbadge .achbadge__name { font-size: 11px; left: 10%; right: 10%; line-height: 1.26; }
}