/* 终末圣典子站 · 样式补充（只作用于本站，不影响其它子站）
   主要给「攻略页」用：截图排版、图注、本页目录、攻略首页的说明块。 */

/* ---- 正文里的截图 ---- */
.prose figure {
  margin: 22px 0;
  padding: 0;
}
.prose figure img {
  margin: 0;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.prose figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  padding-left: 2px;
}
/* 纯图（没有图注）时跟上一段文字贴紧一点，读起来是「图 + 说明」 */
.prose p + figure { margin-top: 14px; }
.prose figure + p { margin-top: 10px; }

/* ---- 本页目录 ---- */
.page-toc {
  margin: 6px 0 30px;
  padding: 14px 18px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.page-toc b {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
}
.page-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px,100%), 1fr));
  gap: 4px 18px;
}
.page-toc li { margin: 0; line-height: 1.7; }
.page-toc li.l1 { padding-left: 16px; }
.page-toc a {
  color: var(--accent-hi);
  text-decoration: none;
  font-size: 14px;
}
.page-toc a:hover { text-decoration: underline; }

/* ---- 攻略首页的说明块 ---- */
.guide-lead {
  margin: 4px 0 18px;
  padding: 14px 18px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.8;
}
.guide-lead p { margin: 0 0 6px; }
.guide-lead p:last-child { margin-bottom: 0; }

/* 长流程页在小屏上把截图做成整宽、圆角收一点 */
@media (max-width: 600px) {
  .prose figure { margin: 16px 0; }
  .prose figure img { border-radius: 8px; }
  .page-toc { padding: 12px 14px 14px; }
  .page-toc ul { grid-template-columns: 1fr; }
}

/* ---- 英雄详情头部：头像右边「称谓 名字」排成一行（和卡片同一个格式：名字深色、称谓灰色），
       「力量/敏捷/智力」小标签换行落在名字正下方——还在头部里，在分隔线上面 ---- */
.drawer-head > span:not(.entry-ic) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 9px; }
.drawer-head h2 { font-size: 20px; }
.drawer-head > span:not(.entry-ic) .small.muted { margin-top: 0; font-size: 17px; font-weight: 400; }
.drawer-head .tag-list.head-tags { flex: 0 0 100%; width: 100%; margin: 6px 0 0; }
.drawer-head .tag-list.head-tags .tag { font-size: 12.5px; padding: 3px 12px; }
/* 头像尺寸由 site.js 按「名字 + 标签」实测高度设定，这里只是没跑脚本时的兵底 */
.drawer.cat-heroes .drawer-head .entry-ic, .drawer.cat-items .drawer-head .entry-ic { width: 58px; height: 58px; }

/* ---- 英雄详情：描述往上抬——头部底线到正文只留头部自己的 20px 内边距 ---- */
.drawer.cat-heroes .drawer-body, .drawer.cat-items .drawer-body { padding-top: 0; }
.drawer.cat-heroes .drawer-body > .block:first-child, .drawer.cat-items .drawer-body > .block:first-child { margin-top: 0; }

/* ---- 英雄详情：基础属性（一行两组「名 + 值」；窄屏收成一列） ---- */
.stat-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  margin-top: 8px;
}
.stat-cell {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}
.stat-cell.empty { border-bottom: 0; }
.stat-cell span { color: var(--muted); white-space: nowrap; }
.stat-cell b { font-weight: 600; text-align: right; }
@media (max-width: 560px) {
  .stat-2col { grid-template-columns: 1fr; gap: 0; }
}

/* ---- 筛选标签分组的小标题 ---- */
.chips-label {
  align-self: center;
  font-size: 12.5px;
  color: var(--muted);
  margin-right: 2px;
  letter-spacing: .04em;
}
.chips + .chips { margin-top: 8px; }

/* ---- 英雄详情：英雄评价星级 ---- */
.star-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px,100%), 1fr));
  gap: 6px 16px;
  margin: 8px 0 4px;
}
.star-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  line-height: 1.7;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 3px;
}
.star-row span { color: var(--muted); }
.star-row b { color: var(--accent-hi); letter-spacing: .06em; font-weight: 600; }

/* ---- 装备详情头部：与英雄详情同一套排版（图标 + 名字，标签落在头部里） ---- */
.drawer.cat-items .drawer-head .entry-ic { width: 58px; height: 58px; }
/* ---- 「装备技能 / 专属效果」/ 英雄专属装备：不折叠，技能名一行、效果一行 ---- */
.fold-body .fold-sub {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
}
.fold-body .skill-row { margin: 8px 0 0; }
.fold-body .stat-2col { margin-top: 4px; }
.fold-list { margin: 8px 0 0; display: grid; gap: 8px; }
/* 技能行左侧的技能图标（在按键 Q/W/E/R/T 前面） */
.fold-ic {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}
.fold-ic:empty { display: none; }
.fold-ic img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fold {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  overflow: hidden;
}
.fold > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: '＋';
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}
.fold[open] > summary::after { content: '－'; }
.fold > summary:hover { background: var(--accent-soft); }
.fold > summary kbd {
  min-width: 26px;
  text-align: center;
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel);
  color: var(--accent-hi);
}
.fold-name { font-weight: 600; }
.fold-body {
  padding: 4px 14px 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.75;
  color: var(--body);
}
.fold-body p { margin: 8px 0 0; }
.fold-body .fold-talent { color: var(--accent-hi); }
.fold-body .fold-bonus { color: #b07b2e; }
html[data-theme="dark"] .fold-body .fold-bonus { color: #e0b463; }
/* 塞壬年轮加成（技能折叠「年轮≥10/20/30/40：…」；2026-09-17 接上展示） */
.fold-body .fold-year { color: #8a5cc4; }
html[data-theme="dark"] .fold-body .fold-year { color: #b8a0e6; }

/* 图标（英雄 / 技能 / 装备）：有图标就用图，没有就退回显示代号文字 */
.entry-ic.has-img {
  padding: 0;
  overflow: hidden;
  background: none;
  border: 1px solid var(--line);
}
.entry-ic.has-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: auto;
}

/* 首页精选英雄卡片：不再重复显示「力量」标签（属性已经在卡片下方/详情里） */
#home-heroes .tag-list { display: none; }
#home-heroes .foot .small.muted { display: none; }

/* 详情里的「条目代号」那行不展示（英雄/装备/技能都一样）；
   限定只吃 .drawer-body 的直接子元素，别误伤头部那一行称谓 */
.drawer-body > .small.muted:last-child { display: none; }

/* 子站的四项内容切换：内容概览 / 英雄图鉴 / 装备图鉴 / 地图攻略 / 版本更新
   （首页那排在 .hero-band > .quick 里，框架层已有样式；图鉴/攻略/更新页用同一排） */
.page-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 0; }

/* 子页面顶部：大标题 + 一句话介绍，规格与首页的地图名完全一致（clamp 28~42px），
   介绍在按钮标签上方，保证玩家点标签的位置不因页面不同而跳 */
.page-head { margin: 22px 0 0; }
.page-head .kicker, .hero-band .kicker { display: block; font: 800 11px/1 var(--font-b, inherit); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.page-head h1 { font-size: clamp(28px, 4.4vw, 42px); letter-spacing: .04em; line-height: 1.15; }
.page-head p { margin: 12px 0 0; max-width: 680px; color: var(--body); }

/* 英雄卡片右上角的属性标签（力量红 / 敏捷绿 / 智力蓝，色值由 site.js 的 tagColors 给） */
.entry { position: relative; }
.entry-tag { position: absolute; top: 10px; right: 10px; font-size: 11.5px; padding: 2px 10px; }

/* 首页 hero 里的导览（首页 › 圣典 › 终末圣典）：与次页对齐成同一套高度 ——
   hero 不再额外加上边距，面包屑自己带 18px（框架 .crumb 的默认值），
   下边距取 22px 与次页 .page-head 的 margin-top 一致；标题行高也对齐 .page-head h1 */
.hero-band { padding-top: 0; }
.hero-band .crumb { margin-bottom: 22px; }
.hero-band h1 { line-height: 1.15; }

/* ===== 2026-09-12 这批细节 ===== */
/* 基础属性：两列分别打包（手机端收成一列时顺序才是 力量/敏捷/智力 → 攻击距离/攻击间隔/移动速度） */
.stat-2col .stat-col { display: block; }

/* 英雄详情「专属装备」：自身专属 / 通用专属 两组标题，以及展开后的装备来源 */
.fold-group {
  margin: 14px 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
}
.fold-src { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }

/* 合成途径：图四那种一行写法（〈本装备〉= 材料×N + 材料×N）
   2026-09-12 用户要求：数量也展示出来、整体换个色调（浅主色底 + 主色描边，跟正文区块分开） */
.recipe-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
}
.recipe-line b { color: var(--muted); font-weight: 800; }
.recipe-line b.rc-eq, .recipe-line b.rc-plus { color: var(--accent-hi); font-size: 14px; }
.recipe-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.recipe-chip i { font-style: normal; font-size: 11.5px; letter-spacing: .04em; }
/* 本装备那一枚：主色描边 + 主色标题，材料那几枚是普通底色 */
.recipe-line .recipe-chip.is-self {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: 800;
}
.recipe-line .chip.rc { background: var(--panel); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.recipe-line .chip.rc:hover { border-color: var(--accent); color: var(--accent-hi); }
/* 数量徽标（材料 ×N） */
.rc-n {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent-hi);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* 详情抽屉头部的「返回上一件」（从合成素材点进去后出现，用户 2026-09-12） */
.drawer-head .drawer-back {
  margin-left: auto;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--body);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}
.drawer-head .drawer-back:hover { color: var(--ink); border-color: var(--accent-dim); }
.drawer-head .drawer-back[hidden] { display: none; }
.drawer-head > .drawer-close { margin-left: 8px; }
.drawer-head .drawer-back[hidden] + .drawer-close { margin-left: auto; }

/* 卡片名字：单行、限制宽度（不压到右上角彩色标签上）；装不下就整段来回无缝滚动（用户 2026-09-12） */
.entry-name { flex-wrap: nowrap; overflow: hidden; }
.entry-name .sub { flex: 0 0 auto; }
.entry-name .nm-scroll { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.entry-name .nm { display: inline-block; white-space: nowrap; }
.entry-name .nm-track { display: inline-flex; white-space: nowrap; animation: msrpg-nm 7s linear infinite; }
.entry-name .nm-track .nm { margin-right: 34px; }
@keyframes msrpg-nm { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .entry-name .nm-track { animation: none; } }

/* 英雄「专属装备」里的装备名字：做成能点的样子，点了就把抽屉换成这件装备的弹窗
   （用户 2026-09-12；返回逻辑跟合成素材一样，逐层往回退） */
.fold-name.link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fold-name.link:hover { color: var(--accent-hi); }

/* 跨页签搜索：本页签搜索框下方列出「同一张地图其它栏目」里的命中（用户 2026-09-12） */
.xsearch { margin-top: 14px; }
.xsearch-box {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}
.xsearch-head { font-size: 13px; color: var(--body); }
.xsearch-head b { color: var(--accent-hi); }
.xsearch-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.xsearch-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.xsearch-item:hover { border-color: var(--accent); color: var(--accent-hi); }
.xsearch-more { font-size: 12.5px; color: var(--muted); align-self: center; }

/* ==========================================================================
   版本日志（用户 2026-09-12 第三版：每条套上「地图小贴士」那种白底卡片框——
   原来是直接摊在页面浅灰底上，字和底一接近就糊；现在卡片 + --ink 正文，对比够了）
   —— 页头那条「当前版本 vX · 日期 · 共 N 条记录」已按用户要求删掉（2026-09-12，与第一条重复）
   ========================================================================== */
.timeline { padding-left: 30px; }
.timeline::before { left: 8px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; }
.tl-item {
  position: relative;
  margin-bottom: 18px;
  padding: 18px 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.tl-item::before { left: -28px; top: 24px; }
.tl-ver {
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.tl-ver strong { font: 800 22px var(--font-d); color: var(--ink); letter-spacing: .01em; }
.tl-ver time {
  font: 700 13px var(--font-b);
  color: var(--body);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 9px;
}
.tl-item.now .tl-ver strong { color: var(--accent-hi); }
.tl-sec { margin-top: 14px; }
.tl-sec-name {
  margin: 0 0 4px;
  padding-left: 9px;
  border-left: 3px solid var(--accent);
  font: 800 13px var(--font-b);
  color: var(--accent-hi);
  letter-spacing: .08em;
}
.tl-sec ul.plain { margin: 0; padding-left: 18px; }
.tl-sec ul.plain li { font-size: 14.5px; line-height: 1.8; color: var(--ink); margin: 7px 0; }
.tl-sec ul.plain li::marker { color: var(--accent); }
.tl-sec ul.plain li a { color: var(--accent-hi); }

/* 子行：这条改动在更新的版本里只剩前半句时，把旧版本那一句挂在下面
   现在版本（最新一条）里还算“生效中”→ 绿；已经过去的版本 → 深灰 + 删除线 */
.tl-void {
  display: block;
  margin: 4px 0 1px;
  padding-left: 2px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #6d7781;
  text-decoration: line-through;
}
.tl-void > i {
  margin-right: 6px;
  font-style: normal;
  font-weight: 800;
  font-size: 11.5px;
  color: var(--muted);
  text-decoration: none;
}
.tl-void.now { color: #1d7d5c; text-decoration: none; }
.tl-void.now > i { color: #1d7d5c; }
[data-theme="dark"] .tl-void { color: #8d97a2; }
[data-theme="dark"] .tl-void.now { color: #57d0a4; }
@media (max-width: 640px) {
  .tl-item { padding: 15px 16px 17px; }
  .tl-ver strong { font-size: 19px; }
  .tl-sec ul.plain li { font-size: 14px; }
}

/* 内容概览页：地图小贴士（福利 / 提示 / 崩溃处理 / 版本须知 / 难度说明）
   2026-09-12 二版：卡片等高不留大窟窿、条目用主色编号，条目最多的一条（福利）横跨整行内部两栏 */
.info-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  /* 固定两列：半宽的卡片宽度稳定，行内高度也好对齐 */
  .info-grid { grid-template-columns: 1fr 1fr; }
}
.info-card { padding: 20px 22px 18px; }
.info-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.info-head h3 { margin: 0; font: 800 15.5px var(--font-b); color: var(--ink); letter-spacing: .03em; }
.info-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.info-n {
  margin-left: auto;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  font: 700 11.5px var(--font-b);
  color: var(--muted);
}
.info-card ol { margin: 0; padding-left: 0; list-style: none; }
.info-card ol li {
  position: relative;
  padding-left: 17px;
  font-size: 14px;
  line-height: 1.78;
  color: var(--body);
  margin: 8px 0;
}
/* 标记用「小菱形」而不是数字（用户 2026-09-12：数字标取消、换其他形状） */
.info-card ol li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 8.5px;
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--accent);
  transform: rotate(45deg);
}
.info-card ol li a { color: var(--accent-hi); }
.info-card.is-wide { grid-column: 1 / -1; }
.info-card.is-wide ol, .info-card.two-col ol { columns: 2; column-gap: 30px; }
.info-card.is-wide ol li, .info-card.two-col ol li { break-inside: avoid; }
@media (max-width: 900px) {
  .info-card.is-wide ol, .info-card.two-col ol { columns: 1; }
}
@media (max-width: 560px) {
  .info-card { padding: 16px 16px 14px; }
  .info-card ol li { font-size: 13.5px; }
}

/* 子站各页头部：地图作者（用户 2026-09-12；数据由初始化脚本从 KK 地图详情接口拉） */
.byline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--body);
}
.byline .by-k {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--accent-soft);
  font: 800 11.5px var(--font-b);
  letter-spacing: .1em;
  color: var(--accent-hi);
}
.byline strong { font-size: 14.5px; font-weight: 800; color: var(--ink); }
/* 子站页签页：介绍那句（.page-head p）与首页 .sub 的间距差 1px，这里补上，保证五页导览块仍等高
   （实测 1280 宽：首页 byline top246 / tabs 296，其余四页 byline 247 / tabs 297，差 1px；不管它差 2px） */
.page-head .byline { margin-top: 15px; }

/* 英雄/装备卡片：小字（称谓）应该贴着名字，而不是被 flex 推到最右（用户 2026-09-12）
   .nm-scroll 原来 flex:1 1 auto 会把 .sub 顶到行尾 */
.entry-name .nm-scroll { flex: 0 1 auto; }

/* 合成关系里的素材按钮：原来长得像纯文本，现在做成看得出来的按钮（用户 2026-09-12） */
.chip.rc {
  padding: 3px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel-2);
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(16, 32, 44, .07);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s, color .15s;
}
.chip.rc::after { content: '›'; margin-left: 4px; font-weight: 800; opacity: .5; }
.chip.rc:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hi);
  box-shadow: 0 2px 7px rgba(16, 32, 44, .14);
  transform: translateY(-1px);
}
.chip.rc:hover::after { opacity: 1; }

/* 弹窗底部「近期改动」（用户 2026-09-12）：近 10 条日志里被判为增强/削弱的提及，默认折叠 */
.rec-block { margin-top: 22px; }
.rec-block .rec-n { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.rec-list { display: flex; flex-direction: column; gap: 9px; }
.rec-row { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 1.7; color: var(--body); }
.rec-ver {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
}
.rec-dir { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 800; }
.rec-dir.up { background: rgba(244, 111, 96, .16); color: #cf3f2b; box-shadow: inset 0 0 0 1px rgba(244, 111, 96, .5); }
.rec-dir.down { background: #5b6672; color: #f2f5f7; box-shadow: inset 0 0 0 1px #4b5560; }
.rec-txt { flex: 1 1 auto; }
[data-theme="dark"] .rec-dir.up { background: rgba(244, 111, 96, .22); color: #ff9b8c; }
[data-theme="dark"] .rec-dir.down { background: #55606c; color: #e8edf1; }

/* ==========================================================================
   子站首页：【点击加群】按钮（用户 2026-09-12）——放在页签旁边，
   要一眼看出它和页签（.btn 描边药丸）不是一类东西：实心 QQ 蓝 + 内层虚线 + 图标。
   ========================================================================== */
.join-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid #12b7f5;
  border-radius: 999px;
  background: #12b7f5;
  color: #fff;
  font: 800 13.5px var(--font-b);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(18, 183, 245, .28);
  outline: 1px dashed rgba(255, 255, 255, .85);
  outline-offset: -5px;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.join-badge:hover {
  background: #0da2da;
  border-color: #0da2da;
  box-shadow: 0 10px 24px rgba(18, 183, 245, .34);
  transform: translateY(-1px);
}
.join-badge svg { flex: 0 0 auto; }
@media (max-width: 560px) {
  .join-badge { height: 38px; padding: 0 15px; font-size: 13px; }
}
@media (max-width: 560px) {
  .cl-now strong { font-size: 22px; }
  .tl-ver strong { font-size: 19px; }
  .tl-sec ul.plain li { font-size: 14px; }
}

/* ================= 任务弹窗（更新日志里点「主线章节 / 支线任务」的绿按钮）=================
   上：任务图标 + 名字；中：这条任务的攻略文章卡片；下：这篇里出现过的装备。
   数据来自 /data/zmsd120100/guides.js 里的 window.MSRPG_DATA.quests（由 资料库\生成攻略页.py 生成） */
.qd-head { align-items: center; gap: 14px; }
.qd-head .qd-ic {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--panel-2); object-fit: cover;
}
.qd-t { flex: 1 1 auto; min-width: 0; }
.qd-t h2 { margin: 3px 0 0; }
.qd-k {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent-hi); background: var(--accent-soft);
}
.qd-card {
  display: flex; align-items: center; gap: 14px; margin-top: 10px;
  padding: 14px 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: inherit;
}
.qd-card:hover { border-color: var(--accent); }
.qd-card-ic {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 8px;
  border: 1px solid var(--line-2); object-fit: cover;
}
.qd-card-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qd-card-b b { color: var(--ink); font-size: 15.5px; }
.qd-card-d { color: var(--body); font-size: 13px; line-height: 1.7; }
.qd-card-m { color: var(--muted); font-size: 12.5px; }
.qd-card-go { flex: 0 0 auto; color: var(--accent-hi); font-size: 13px; }
.qd-n { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.qd-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.qd-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; color: var(--body); font-size: 13px; cursor: pointer;
}
.qd-item:hover { border-color: var(--accent); color: var(--accent-hi); }
.qd-item img {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--line-2); object-fit: cover;
}
.qd-tier {
  font-style: normal; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 0 4px;
}
.qd-none { color: var(--muted); font-size: 13px; }

/* ================= 装备「分组浏览」与「炼化关系」（2026-09-13） =================
   分组浏览：`.grid.is-grouped` 由 Grid 变纵向容器，每组 = 标题 + 一个内层网格；
   炼化关系：`.rf-line` 复用合成关系那行样式，末尾补一个「100% / 与某件各 50%」说明。 */
.grid.is-grouped { display: block; }
.grid.is-grouped .grp + .grp { margin-top: 34px; }
.grid.is-grouped .grp-h {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 14px; padding: 0 0 10px;
  font-size: 16px; font-weight: 800; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.grid.is-grouped .grp-h::before {
  content: ''; width: 4px; height: 15px; border-radius: 2px;
  background: var(--accent); transform: translateY(1px);
}
.grid.is-grouped .grp-h span { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.rf-block .rf-line { margin-top: 10px; }
.rf-block .rf-line:first-of-type { margin-top: 0; }
.rf-alt {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.rf-alt .chip.rc { height: 24px; padding: 0 9px; font-size: 12px; }
@media (max-width: 560px) {
  .rf-alt { margin-left: 0; }
}

/* 解锁条件里「英雄 / 天赋 / 史诗皮肤 / 传说皮肤」这四类标签（对齐终末圣典，2026-09-13） */
ul.plain .ul-k { color: var(--accent-hi); font-weight: 600; margin-right: 3px; }

/* ---- 英雄弹窗的「专属剧情 / 专属任务」（用户 2026-09-13）----
   数据 = heroStories.js；一行一条，点了开剧情抽屉（app.js 的 openStory）。 */
.story-list { display: flex; flex-direction: column; gap: 8px; }
.story-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 4px 10px; width: 100%; text-align: left;
  padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; font: inherit; color: inherit;
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.story-row:hover {
  border-color: var(--accent-dim); background: var(--panel);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.story-k {
  grid-row: 1; grid-column: 1; font-size: 11.5px; line-height: 1.5;
  color: var(--accent-hi); background: var(--accent-soft);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.story-t { grid-row: 1; grid-column: 2; font-weight: 600; font-size: 14px; line-height: 1.5; }
.story-go { grid-row: 1 / span 2; grid-column: 3; color: var(--muted); font-size: 17px; line-height: 1; }
.story-s {
  grid-row: 2; grid-column: 1 / span 2; margin: 0; font-size: 12.5px;
  color: var(--muted); line-height: 1.55; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.story-guide {
  font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px; margin-left: 6px;
}
/* 英雄弹窗里的【专属剧情】入口按钮 */
.story-entry {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 12px 14px; font: inherit; color: inherit; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.story-entry:hover {
  border-color: var(--accent-dim); background: var(--panel);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.story-entry-t { flex: 1 1 auto; font-weight: 600; font-size: 14px; }
.story-entry-n { font-size: 12px; color: var(--accent-hi); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; }
.story-entry-go { color: var(--muted); font-size: 17px; line-height: 1; }
/* 剧情抽屉：子站层原本有一条 `.drawer.cat-heroes .drawer-body{padding-top:0}`（英雄详情要「描述往上抬」），
   剧情抽屉也带 cat-heroes 就会被它一起压掉顶部留白 → 用 story-drawer 这个标记专门给回呼吸感。 */
.drawer.story-drawer .drawer-body { padding-top: 24px; }
.drawer.story-drawer .block { margin-top: 30px; }
.drawer.story-drawer .block h4 { margin-bottom: 12px; }
.drawer.story-drawer .story-lines { gap: 11px; }
/* 剧情详情里的「上一段 / 下一段」——放在内容最下面，版式 = 剧情列表行的缩小版
   （顶是分类标签、底是名称，不写描述） */
.story-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px;
  margin-top: 30px;
}
.story-nav-b {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 0; max-width: 100%; padding: 11px 13px;
  font: inherit; cursor: pointer; color: inherit; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.story-nav-b:hover {
  border-color: var(--accent-dim); background: var(--panel);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.story-nav-b.next { align-items: flex-end; text-align: right; }
.story-nav-k {
  font-size: 11.5px; line-height: 1.5; color: var(--accent-hi);
  background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.story-nav-t {
  display: flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: 13px; font-weight: 600; line-height: 1.5;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.story-nav-b.is-off { visibility: hidden; }
.story-nav-i { align-self: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.story-skl { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 6px; }
/* 加强里的「专属技能」那一条：说明单独一行 */
.gain-skill .gain-desc { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 620px) {
  .story-nav-k { font-size: 11px; padding: 1px 6px; }
  .story-nav-t { font-size: 12.5px; }
  .story-nav-b { padding: 9px 10px; }
}
/* 剧情抽屉 */
.story-howto { line-height: 1.75; }
.story-place {
  color: var(--accent-hi); margin-right: 8px; padding: 1px 7px;
  border: 1px solid var(--accent-dim); border-radius: 999px; font-size: 12px; white-space: nowrap;
}
.story-lines { display: flex; flex-direction: column; gap: 9px; }
.story-line { margin: 0; font-size: 13.5px; line-height: 1.65; }
.story-line b { color: var(--accent-hi); margin-right: 8px; font-weight: 600; white-space: nowrap; }

/* 任务列表页（2026-09-13）：app.js 的 initQuests 把每一条渲染成 <button class="card">，
   这里把按钮的原生样式抹掉，让它长得跟攻略卡片一样。 */
button.card { display: block; width: 100%; text-align: left; font-family: inherit; color: inherit; cursor: pointer; }

/* 贴吧攻略搬运（2026-09-13）：文章页正文与配图 */
.tb-doc { max-width: 860px; }
.tb-doc p { margin: 0 0 12px; line-height: 1.85; }
.tb-doc .tb-h { margin: 30px 0 12px; font-size: 19px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tb-img { display: block; max-width: 100%; margin: 14px 0; border-radius: 10px; border: 1px solid var(--line); }

/* 攻略页（zmsd 那套 guides-page.css）的小补：隐藏部分的卡片图标用的是正文截图（非正方形），
   按正方形裁切，和门户大图标一致（zmsd 那边卡片只用正方形任务图标，所以没写这条）。 */
.gd-qcard-ic { object-fit: cover; }