/* ==========================================================================
   3D 地图页专用模板（独立版面）—— map3d-page.css
   --------------------------------------------------------------------------
   适用：`html/sy/*.html`（塔科夫 3D 地图分类页），共 12 篇。
        3D 地图是独立分类，因此本版面**独立新建**：所有 class 一律 `m3d-`
        前缀，不覆盖、不复用、不依赖 `lsa-*` / `article-*` / `map-*` 任何
        既有选择器 → 对全站其他模板零影响。页面同时移出 `lsa-main` 容器，
        避免 article-lightsns-data.css 的 `html body.takefu-shell-ready
         .lsa-main …` 规则链命中新版面。

   ★ 解决的问题（2026-09-28）
     旧版沿用通用文章模板，左目录列宽 208px，条目用
     `overflow: visible` + 内层 flex 项 `white-space: nowrap`，
     遇到超长标题（H2 里混进了正文碎片）后 label 被压成 0 宽、
     文字又被 nowrap 顶出去 → 实测条目宽 436px，直接压到正文上。

   ★ 本版面的对策
     1. 目录列固定 212px，条目统一 `overflow: hidden`，文案走
        `-webkit-line-clamp: 2` 两行截断 + `title` 属性给完整内容；
        两行以内完整显示，超长则两行收尾，**绝不会溢出到正文**。
     2. 生成器（tools/apply_map3d_layout.js）在写入前先清洗目录文案：
        H2 内嵌的 `map-image-heading` span 标题会替换掉混进来的
        正文碎片，再用「该页 H1 + 章节名」兜底，目录文字本身也不再是脏的。
     3. 夸克网盘由一行普通链接升级为正文顶部的长条形下载卡，
        文案保留「茼蒿高清3D地图打包下载 / 夸克网盘」。

   ★ 设计变量对齐站壳 takefu-shell.css 的 :root（浅色主题）
        --tf-paper #f5f6f7   --tf-paper-2 #fff  --tf-line #e8e8ed
        --tf-ink   #222226   --tf-ink-2 #333    --tf-muted #555666
        --tf-plum  #c83a1d   --tf-plum-soft #fff3ef

   ★ 项目硬规则：卡片禁止用 border-left 竖色条做装饰；不用渐变、不用发光。
      本文件正文卡用「通栏 1px 边框 + 淡蓝蓝底下载条 + 紧凑徽章」建立层次，
      全文件不出现 border-left。

   版本随 tools/apply_map3d_layout.js 的 CSS_VERSION 一起 bump。
   ========================================================================== */

/* ---------- 版面骨架 ---------- */
.m3d-main {
  --m3d-ink: #222226;
  --m3d-ink-2: #333333;
  --m3d-muted: #555666;
  --m3d-subtle: #8b8f99;
  --m3d-line: #e8e8ed;
  --m3d-line-soft: #f1f2f4;
  --m3d-soft: #f8f8fa;
  --m3d-card: #ffffff;
  --m3d-link: #1d4ed8;
  --m3d-link-hover: #c83a1d;
  --m3d-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.04);
}

.m3d-wrap {
  width: min(1392px, calc(100% - 48px));
  margin: 0 auto;
  padding: 14px 0 40px;
}

/* sticky 前提：seo-ux.css 的 `html, body { overflow-x: hidden }` 会让 body
   变成自己的滚动容器 → 后代 position: sticky 永久失效。`clip` 同样横向裁切
   但不创建滚动容器。 */
html body.map3d-page { overflow-x: clip; }

/* ---------- 面包屑 ---------- */
.m3d-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--m3d-subtle);
  font-size: 13px;
  line-height: 1.6;
}
.m3d-crumb i { font-size: 11px; color: #cbd5e1; }
html body.takefu-shell-ready .m3d-main .m3d-crumb a { color: var(--m3d-muted) !important; }
html body.takefu-shell-ready .m3d-main .m3d-crumb a:hover { color: var(--m3d-link) !important; }

/* ---------- 三栏骨架 ---------- */
.m3d-layout {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr) 250px;
  gap: 18px;
  align-items: start;
}

/* ==========================================================================
   左栏 · 地图目录
   竖线 + 圆点轨道（属 AGENTS.md 允许的 active list selection state，
   非装饰性竖色条）。核心修复：条目恒 overflow: hidden，文案两行截断。
   ========================================================================== */
.m3d-toc {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-left: 10px;
}
.m3d-toc::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--m3d-line);
  content: "";
}
.m3d-toc__item {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;            /* 关键：允许 flex 子项收缩，否则 nowrap 文字会把整行顶宽 */
  min-height: 36px;
  padding: 6px 0 6px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.15s ease;
}
/* 两行截断：≤2 行完整显示，超长则两行收尾；恒不溢出列宽 */
.m3d-toc__item .m3d-toc__label {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}
.m3d-toc__item::before {
  position: absolute;
  top: 50%;
  left: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
  content: "";
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px #f5f6f7;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.m3d-toc__note {
  position: relative;
  margin: 6px 0 0;
  padding: 10px 0 2px 18px;
  border-top: 1px solid var(--m3d-line-soft);
  color: var(--m3d-subtle);
  font-size: 12px;
  line-height: 1.6;
}
html body.takefu-shell-ready .m3d-main .m3d-toc__item { color: var(--m3d-muted) !important; }
html body.takefu-shell-ready .m3d-main .m3d-toc__item:hover { color: var(--m3d-ink) !important; }
html body.takefu-shell-ready .m3d-main .m3d-toc__item:hover::before {
  background: #94a3b8;
  transform: translateY(-50%) scale(1.15);
}
html body.takefu-shell-ready .m3d-main .m3d-toc__item.is-current { color: var(--m3d-link) !important; font-weight: 700; }
html body.takefu-shell-ready .m3d-main .m3d-toc__item.is-current::before {
  background: #3b82f6;
  box-shadow: 0 0 0 3px #f5f6f7, 0 0 0 5px rgba(59, 130, 246, 0.18);
  transform: translateY(-50%) scale(1.12);
}
html body.takefu-shell-ready .m3d-main .m3d-toc__note a { color: var(--m3d-link) !important; }

/* ==========================================================================
   中栏 · 正文卡
   ========================================================================== */
.m3d-card {
  min-width: 0;
  padding: 22px 24px 28px;
  border: 1px solid #e3e9ef;
  border-radius: 8px;
  background: var(--m3d-card);
  box-shadow: var(--m3d-shadow);
}
.m3d-head { margin: 0 0 4px; }
.m3d-head h1 {
  margin: 0 0 12px;
  color: var(--m3d-ink) !important;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.35;
}

/* ---------- ★ 夸克网盘 · 长条形下载卡 ---------- */
.m3d-dl {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 22px;
  padding: 11px 13px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f2f6fd;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.m3d-dl__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--m3d-link);
  color: #fff;
  font-size: 17px;
}
.m3d-dl__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.m3d-dl__title {
  color: var(--m3d-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
.m3d-dl__meta {
  color: var(--m3d-muted);
  font-size: 12px;
  line-height: 1.5;
}
.m3d-dl__meta i { color: #c0c8d4; font-size: 10px; }
.m3d-dl__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 6px 13px;
  border: 1px solid var(--m3d-link);
  border-radius: 6px;
  background: #fff;
  color: var(--m3d-link);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
html body.takefu-shell-ready .m3d-main .m3d-dl:hover { border-color: #b9cdf0; background: #e8f0fd; }
html body.takefu-shell-ready .m3d-main .m3d-dl:hover .m3d-dl__title { color: var(--m3d-link-hover) !important; }
html body.takefu-shell-ready .m3d-main .m3d-dl:hover .m3d-dl__cta {
  background: var(--m3d-link);
  color: #fff !important;
}
.m3d-dl:focus-visible { outline: 2px solid rgba(29, 78, 216, 0.42); outline-offset: 2px; }

/* ---------- 正文排版 ---------- */
.m3d-content { color: var(--m3d-ink-2); font-size: 14px; line-height: 1.85; }
.m3d-content > *:first-child { margin-top: 0; }
.m3d-content h2 {
  margin: 30px 0 12px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--m3d-line-soft);
  color: var(--m3d-ink) !important;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  scroll-margin-top: 84px;
}
.m3d-content h3 {
  margin: 22px 0 10px;
  color: var(--m3d-ink) !important;
  font-size: 15px;
  font-weight: 500;
  scroll-margin-top: 84px;
}
.m3d-content p { margin: 0 0 16px; }
.m3d-content strong { color: var(--m3d-ink); font-weight: 500; }
html body.takefu-shell-ready .m3d-main .m3d-content a { color: var(--m3d-link) !important; }
html body.takefu-shell-ready .m3d-main .m3d-content a:hover { text-decoration: underline; }

.m3d-content ul,
.m3d-content ol { margin: 0 0 18px; padding: 0; list-style: none; }
.m3d-content ul li,
.m3d-content ol li { position: relative; margin: 0 0 8px; padding-left: 17px; line-height: 1.8; }
.m3d-content ul li::before {
  position: absolute;
  top: 10px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #93c5fd;
  content: "";
}
.m3d-content ol { counter-reset: m3d-ol; }
.m3d-content ol li { padding-left: 24px; }
.m3d-content ol li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #eff6ff;
  color: var(--m3d-link) !important;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  content: counter(m3d-ol);
  counter-increment: m3d-ol;
}

/* 图片：正文大图统一圆角描边；地图页图片本身很宽，不额外限制宽度 */
.m3d-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px auto;
  border: 1px solid var(--m3d-line);
  border-radius: 8px;
  background: var(--m3d-soft);
}
/* 生成器把 map-image-heading 的 span 转成了 h3，去掉多余的顶部间距 */
.m3d-content h3.m3d-figure-title {
  margin: 18px 0 8px;
  color: var(--m3d-ink-2) !important;
  font-size: 14px;
  font-weight: 500;
}

.m3d-content table {
  width: 100%;
  margin: 0 0 18px;
  border: 1px solid var(--m3d-line);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 13.5px;
}
.m3d-content th,
.m3d-content td {
  padding: 10px 13px;
  border-bottom: 1px solid var(--m3d-line-soft);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.m3d-content th { width: 104px; background: var(--m3d-soft); color: var(--m3d-ink-2) !important; font-weight: 500; }
.m3d-content td { color: var(--m3d-ink); }
.m3d-content tr:last-child th,
.m3d-content tr:last-child td { border-bottom: 0; }
.m3d-content blockquote {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--m3d-line-soft);
  border-radius: 8px;
  background: var(--m3d-soft);
  color: var(--m3d-ink-2) !important;
}

/* ---------- 核心数据卡（原 map-guide-grid，收进本命名空间） ---------- */
.m3d-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 20px;
}
.m3d-facts__item {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--m3d-line-soft);
  border-radius: 8px;
  background: var(--m3d-soft);
}
.m3d-facts__item b {
  display: block;
  margin: 0 0 3px;
  color: var(--m3d-subtle);
  font-size: 11.5px;
  font-weight: 500;
}
.m3d-facts__item span { display: block; color: var(--m3d-ink); font-size: 13px; line-height: 1.6; }

.m3d-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--m3d-line-soft);
}
.m3d-tags span {
  padding: 4px 10px;
  border: 1px solid var(--m3d-line);
  border-radius: 999px;
  background: var(--m3d-soft);
  color: var(--m3d-muted);
  font-size: 12px;
}

/* ==========================================================================
   右栏 · 3D地图 / 互动地图 小卡片
   ========================================================================== */
.m3d-side {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 14px;
  min-width: 0;
}
.m3d-mapcard {
  padding: 12px;
  border: 1px solid #e3e9ef;
  border-radius: 8px;
  background: var(--m3d-card);
  box-shadow: var(--m3d-shadow);
}
.m3d-mapcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 11px;
}
.m3d-mapcard__head h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--m3d-ink) !important;
  font-size: 14px;
  font-weight: 500;
}
.m3d-mapcard__head h2 i { color: var(--m3d-link); font-size: 14px; }
.m3d-mapcard__head a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  text-decoration: none;
}
.m3d-mapcard__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.m3d-mapcard__grid a {
  display: block;
  padding: 7px 5px;
  overflow: hidden;
  border: 1px solid var(--m3d-line-soft);
  border-radius: 6px;
  background: var(--m3d-soft);
  font-size: 12px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
html body.takefu-shell-ready .m3d-main .m3d-mapcard__head a { color: var(--m3d-link) !important; }
html body.takefu-shell-ready .m3d-main .m3d-mapcard__head a:hover { text-decoration: underline; }
html body.takefu-shell-ready .m3d-main .m3d-mapcard__grid a { color: var(--m3d-ink-2) !important; }
html body.takefu-shell-ready .m3d-main .m3d-mapcard__grid a:hover,
html body.takefu-shell-ready .m3d-main .m3d-mapcard__grid a:focus-visible {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: var(--m3d-link) !important;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .m3d-layout { grid-template-columns: 192px minmax(0, 1fr) 250px; gap: 16px; }
  .m3d-card { padding: 20px 20px 24px; }
}
@media (max-width: 980px) {
  .m3d-wrap { width: calc(100% - 24px); }
  .m3d-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .m3d-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 目录：移动端换成横向粘性条（容器回来了，竖线轨道只在桌面用） */
  .m3d-toc {
    position: sticky;
    top: 72px;
    z-index: 30;
    display: flex;
    gap: 6px;
    margin-left: 0;
    padding: 6px 8px;
    overflow-x: auto;
    border: 1px solid var(--m3d-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    scrollbar-width: thin;
  }
  .m3d-toc::before { display: none; }
  .m3d-toc::-webkit-scrollbar { height: 6px; }
  .m3d-toc__note { display: none; }
  .m3d-toc__item {
    flex: 0 0 auto;
    min-height: 36px;
    max-width: 60vw;      /* 横向条里单条不占满，留出下一项的可见性 */
    padding: 0 14px;
    border: 1px solid var(--m3d-line);
    border-radius: 999px;
    background: var(--m3d-soft);
  }
  .m3d-toc__item .m3d-toc__label { -webkit-line-clamp: 1; line-clamp: 1; }
  .m3d-toc__item::before { display: none; }
  html body.takefu-shell-ready .m3d-main .m3d-toc__item.is-current {
    border-color: #3b82f6;
    background: #3b82f6;
    color: #fff !important;
  }
}
@media (max-width: 620px) {
  .m3d-card { padding: 18px 16px 20px; }
  .m3d-head h1 { font-size: 21px; }
  .m3d-content h2 { font-size: 16px; }
  .m3d-side { grid-template-columns: minmax(0, 1fr); }
  .m3d-facts { grid-template-columns: minmax(0, 1fr); }
  .m3d-dl { gap: 10px; padding: 10px 11px; }
  .m3d-dl__icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 15px; }
  .m3d-dl__title { font-size: 13px; }
  .m3d-dl__cta { padding: 5px 10px; font-size: 12px; }
}

/* ---------- 放大弹层的加载提示（与原文章模板一致的大图解码提示） ---------- */
.m3d-lightbox-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(9, 12, 15, 0.55);
  transition: opacity 0.22s ease;
}
.m3d-lightbox-loading.is-done { opacity: 0; pointer-events: none; }
.m3d-lightbox-loading__spin {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: m3d-spin 0.8s linear infinite;
}
.m3d-lightbox-loading__text { color: #e5e7eb; font-size: 13px; }
@keyframes m3d-spin { to { transform: rotate(360deg); } }

/* ---------- 正文旧选择器兜底（正文容器仍挂 art-main / article-modern-content，
     用于复用既有 Fancybox 点图放大；下面把旧排版拉回本版面口径） ---------- */
html body.takefu-shell-ready .m3d-main .m3d-content.article-modern-content {
  max-width: none;
  color: var(--m3d-ink-2) !important;
  font-size: 14px;
  line-height: 1.85;
}
html body.takefu-shell-ready .m3d-main .m3d-content.article-modern-content h2,
html body.takefu-shell-ready .m3d-main .m3d-content.article-modern-content h3 { color: var(--m3d-ink) !important; }
html body.takefu-shell-ready .m3d-main .m3d-content.article-modern-content p,
html body.takefu-shell-ready .m3d-main .m3d-content.article-modern-content li,
html body.takefu-shell-ready .m3d-main .m3d-content.article-modern-content strong { color: var(--m3d-ink-2) !important; }
html body.takefu-shell-ready .m3d-main .m3d-content.article-modern-content a { color: var(--m3d-link) !important; }
html body.takefu-shell-ready .m3d-main .m3d-content.article-modern-content .article-image-frame {
  border: 1px solid var(--m3d-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--m3d-soft);
}
html body.takefu-shell-ready .m3d-main .m3d-content.article-modern-content .article-image-frame__hint,
html body.takefu-shell-ready .m3d-main .m3d-content.article-modern-content .article-image-frame__caption {
  color: var(--m3d-subtle) !important;
  background: transparent;
}

/* ==========================================================================
   2026-10-17 第五轮：3D 地图页左右两侧统一成「物品内页同款」
   --------------------------------------------------------------------------
   1) 左：目录轨道与物品页同一套（2px 竖线 + 15px 圆点 + 蓝点光圈，sticky 76）
   2) 右：地图分区去卡片化（顶部 1px 线 + 双列胶囊）、互动地图换分段切换控件、
      最下方补「相关任务」白卡；信息栏 sticky + 内部滚动但隐藏滚动条
   3) 栅格与物品页对齐：180px / 1fr / 240px，gap 22
   ========================================================================== */
@media (min-width: 1181px) {
  .m3d-wrap { width: min(1444px, calc(100% - 48px)); }
  .m3d-layout { grid-template-columns: 180px minmax(0, 1fr) 240px; gap: 22px; }

  /* ---- 左：目录 ---- */
  .m3d-toc {
    top: 76px;
    margin-left: 0;
    padding: 1px 0;
    gap: 2px;
  }

  .m3d-toc::before {
    top: 22px;
    bottom: 22px;
    left: 7px;
    width: 2px;
    border-radius: 999px;
    background: #cbd8e6;
  }

  .m3d-toc__item {
    min-height: 44px;
    padding: 0 0 0 26px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
  }

  .m3d-toc__item::before {
    left: 0;
    width: 15px;
    height: 15px;
    border: 3px solid #fff;
    background: #9aabba;
    box-shadow: 0 0 0 1px #9aabba;
  }

  html body.takefu-shell-ready .m3d-main .m3d-toc__item { color: #425466 !important; }
  html body.takefu-shell-ready .m3d-main .m3d-toc__item:hover { color: #1d4ed8 !important; }

  html body.takefu-shell-ready .m3d-main .m3d-toc__item:hover::before {
    background: #60a5fa;
    box-shadow: 0 0 0 1px #60a5fa;
    transform: translateY(-50%) scale(1.08);
  }

  html body.takefu-shell-ready .m3d-main .m3d-toc__item.is-current { color: #1d4ed8 !important; }

  html body.takefu-shell-ready .m3d-main .m3d-toc__item.is-current::before {
    background: #2563eb;
    box-shadow: 0 0 0 1px #2563eb, 0 0 0 5px rgba(37, 99, 235, 0.14);
    transform: translateY(-50%);
  }

  /* ---- 右：信息栏悬浮 + 内部滚动（隐藏滚动条）---- */
  .m3d-side {
    top: 76px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 14px;
    padding-right: 2px;
  }

  .m3d-side::-webkit-scrollbar { width: 0; height: 0; }

  /* 地图分区：与物品页一致，不做整卡容器 */
  .m3d-mapcard {
    padding: 13px 0 0;
    border: 0;
    border-top: 1px solid #dce5ee;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .m3d-mapcard__head { margin: 0 0 9px; }

  .m3d-mapcard__head h2 {
    color: #17202c !important;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
  }

  .m3d-mapcard__head h2 i { margin-right: 5px; color: #2563eb; font-size: 14px; }

  html body.takefu-shell-ready .m3d-main .m3d-mapcard__head a {
    min-height: 32px;
    color: #2563eb !important;
    font-size: 12px;
    font-weight: 800;
  }

  .m3d-mapcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

  .m3d-mapcard__grid a {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px 6px;
    border: 1px solid #dfe7ef;
    border-radius: 7px;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
  }

  html body.takefu-shell-ready .m3d-main .m3d-mapcard__grid a { color: #315f9d !important; }

  html body.takefu-shell-ready .m3d-main .m3d-mapcard__grid a:hover,
  html body.takefu-shell-ready .m3d-main .m3d-mapcard__grid a:focus-visible {
    border-color: #9fc5f8;
    background: #eef5ff;
    color: #1d4ed8 !important;
  }

  /* 相关任务：唯一保留的白卡 */
  .m3d-mapcard--tasks {
    padding: 14px;
    border: 1px solid #e3e5f1;
    border-top: 1px solid #e3e5f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.02), 0 2px 5px rgba(15, 23, 42, 0.04), 0 14px 30px rgba(73, 66, 137, 0.06);
  }

  .m3d-mapcard--tasks .m3d-mapcard__head { margin: 0 0 10px; }
}

@media (min-width: 1560px) {
  .m3d-wrap { width: min(1540px, calc(100% - 340px)); }
}

/* ---- 地图集切换控件（与物品页 item-guide-map-switch 同一套视觉）---- */
.m3d-map-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
  margin-bottom: 7px;
  padding: 3px;
  border: 1px solid #e3e9ef;
  border-radius: 10px;
  background: #eef2f8;
}

.m3d-map-switch::before {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 8px) / 2);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 37, 31, 0.14);
  content: "";
  transition: transform 0.22s ease;
  transform: translateX(calc(var(--item-map-index, 0) * (100% + 2px)));
}

.m3d-map-switch__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #5d6b7a;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s ease;
}

.m3d-map-switch__tab:hover,
.m3d-map-switch__tab.is-active { color: #17202c; }

.m3d-map-switch__tab:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.42); outline-offset: 2px; }

.m3d-map-switch__tab em {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #7b8796;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.4;
}

.m3d-map-switch__tab.is-active em { background: rgba(37, 99, 235, 0.12); color: #2563eb; }

.m3d-mapcard__grid[hidden] { display: none; }

/* ---- 相关任务列表 ---- */
.m3d-mapcard__badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2f8;
  color: #5d6b7a;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
}

.m3d-tasklist { margin: 0; padding: 0; list-style: none; }
.m3d-tasklist li { margin: 0 0 4px; }

.m3d-tasklist a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid #e8edf4;
  border-radius: 8px;
  background: #fbfcfe;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.m3d-tasklist a:hover,
.m3d-tasklist a:focus-visible {
  border-color: #bfd4f7;
  background: #eef5ff;
  outline: none;
}

.m3d-tasklist__copy { display: grid; min-width: 0; gap: 1px; }

.m3d-tasklist__copy strong {
  overflow: hidden;
  color: #18233f;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m3d-tasklist__copy small {
  color: #7b8796;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
}

.m3d-tasklist a > i { flex: 0 0 auto; margin-left: auto; color: #9aa7b6; font-size: 12px; }

/* ==========================================================================
   2026-10-18 互动地图切换：第二套地图（互动地图2）改用橙色身份色
   与物品页 / 资讯页同一套规则：只给第二颗按钮暖橙身份 —— 未选中时橙色数量徽标
   透出身份，选中后整颗按钮填充深橙 + 白字，下方地图格同步换暖橙描边。
   取色：主橙 #c2410c（白字对比 5.18:1）、描边 #f1d3b6、浅底 #fff6ee。
   ========================================================================== */

.m3d-map-switch__tab[data-item-map-tab="map2"] {
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.m3d-map-switch__tab[data-item-map-tab="map2"] em {
  background: #fff1e6;
  box-shadow: inset 0 0 0 1px rgb(194 65 12 / 14%);
  color: #c2410c;
}

.m3d-map-switch__tab[data-item-map-tab="map2"]:hover { color: #c2410c; }

.m3d-map-switch__tab[data-item-map-tab="map2"].is-active,
.m3d-map-switch__tab[data-item-map-tab="map2"].is-active:hover {
  background: #c2410c;
  box-shadow: 0 2px 8px rgb(194 65 12 / 30%);
  color: #fff;
}

.m3d-map-switch:has([data-item-map-tab="map2"].is-active)::before {
  background: #c2410c;
  box-shadow: 0 2px 8px rgb(194 65 12 / 26%);
}

.m3d-map-switch__tab[data-item-map-tab="map2"].is-active em {
  background: #fff;
  color: #b23c08;
}

.m3d-map-switch__tab[data-item-map-tab="map2"]:focus-visible { outline-color: rgb(194 65 12 / 48%); }

html body .m3d-mapcard--switch [data-item-map-panel="map2"] a,
html body.takefu-shell-ready .m3d-main .m3d-mapcard--switch [data-item-map-panel="map2"] a {
  border-color: #f1d3b6;
  color: #c2410c !important;
}

html body .m3d-mapcard--switch [data-item-map-panel="map2"] a:hover,
html body .m3d-mapcard--switch [data-item-map-panel="map2"] a:focus-visible,
html body.takefu-shell-ready .m3d-main .m3d-mapcard--switch [data-item-map-panel="map2"] a:hover,
html body.takefu-shell-ready .m3d-main .m3d-mapcard--switch [data-item-map-panel="map2"] a:focus-visible {
  border-color: #e79a5c;
  background: #fff6ee;
  color: #9a3412 !important;
}