/* ============================================================================
   卡片详情层（.dtl）—— 点「区域 / 地下城 / 团队副本」卡片弹出的详情
   ---------------------------------------------------------------------------
   ★ 为什么先做「一层」，而不是一个正式的详情页：
     官方目前只公布了名字、等级区间、位置与概念图 —— 首领、掉落、机制都还没放出来。
     这一层就把**已公布的原样呈现**，没公布的明确写「待公布」。
     按本站的硬规矩：估算值宁可不写，也不能编数字给粉丝埋雷。
     Beta（9-17）之后官方陆续放情报，往这一层里填就行，不用重做页面。
   ★ 它同时是「卡片可点」的落点：卡片长得像按钮却点不动，用户会以为网站坏了 ——
     那比「还没做」更伤。
   ★ 样式独立成文件（不掺进 wow.css）：万一主题要回滚，wow.css 会被整份还原，
     掺进去的功能样式会被顺手抹掉（stats.css / live.css 也是这个原因）。
   ========================================================================== */

.dtl{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:26px}
.dtl[hidden]{display:none}
.dtl-mask{
  position:absolute;inset:0;background:rgba(2,5,12,.84);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.dtl-box{
  position:relative;z-index:2;width:min(900px,100%);max-height:100%;overflow:auto;padding:0;
  animation:dtlIn .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes dtlIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.dtl-x{
  position:absolute;top:10px;right:10px;z-index:6;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--frame);background:rgba(6,10,20,.78);color:var(--gold-hi);
  font-size:14px;line-height:1;cursor:pointer;font-family:inherit;
}
.dtl-x:hover{border-color:rgba(216,180,90,.78);background:rgba(28,22,10,.9)}
.dtl-shot{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#04060e;
  border-bottom:1px solid rgba(216,180,90,.35);
}
.dtl-shot img{width:100%;height:100%;object-fit:cover;display:block}
.dtl-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgba(2,6,15,.92) 100%);
}
.dtl-shot .badge{
  position:absolute;left:0;bottom:0;z-index:2;padding:5px 13px;
  font-family:var(--f-title);font-size:12.5px;letter-spacing:1.4px;color:#2a1c08;
  background:linear-gradient(180deg,#e8c874,#a8832a);box-shadow:0 -2px 10px rgba(0,0,0,.6);
}
/* ============================================================================
   ★★ v104e（2026-09-19 傍晚，血染第二次提同一件事）：
      「加大加亮  领主大厅和 洛丹伦废墟 点开的详情页内的字  太小了 太暗了」
   ---------------------------------------------------------------------------
   上一轮（v104）我只把「实测内容块」提到 14.6px 正文，**这一层其余部分没动**，
   他一打开还是觉得小/暗 —— 因为真正的病灶在**两处**，我当时只治了一处：
     ① 字号：这一层最小的一档只有 **11px**（英文名 / 图注小字 / 来源行 12.2px），
        而正文上限也才 14.6px；
     ② 字色：大量说明文字用的是 `--parch-3` = **rgb(134,141,153)**，
        黑底上就是「看着费劲」的灰 —— 他说的「暗」是字色，不是没放大。
   ⇒ 这次按**量出来的真值**（`_tmp/_type_dump.py`，别靠肉眼估）整层提一档：
      正文 14.6 → **15.8px** · 列表 13.2/13.6/14 → **14.2~14.6px** ·
      小字 11/11.5/12.2 → **12.5~13.4px**；
      灰字从 rgb(134,141,153) 提到 **rgb(169,177,189)** 上下，正文提到 **#dde2ea**。
   ⚠️⚠️ 只改 `font-size` 不改行高会把 `.dq-t` / `.dtl-wait` 的金菱形甩到字外面
      （菱形是 `top:8px` 绝对定位的）⇒ **字号与行高、菱形 top 必须一起动**。
   ⚠️ `--parch-3` 是**全站变量**，⛔ 别去 wow.css 改它 —— 那会连导航、页脚一起动。
      这一层一律写**显式色值**。
   ========================================================================== */
.dtl-bd{padding:24px 26px 26px}
.dtl-bd h3{
  font-family:var(--f-title);font-size:24.5px;letter-spacing:1.4px;color:var(--gold-hi);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.dtl-bd h3 em{
  font-style:normal;font-family:var(--f-body);font-size:12.5px;letter-spacing:1.8px;
  color:#a6aeb9;text-transform:uppercase;
}
.dtl-bd .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
/* ★ v104e：「部落倾向 / 15–20 级」这两颗标签也提一档（12 → 13px）。
   ⚠️ 只在**这一层**加规则 —— `.tag` 是全站样式，⛔ 别去 wow.css 改它，
      否则首页 / 世界内容页所有卡片的标签会跟着一起变。 */
.dtl-bd .tags .tag{font-size:13px;padding:3px 11px}
.dtl-p{margin-top:14px;font-size:15.2px;color:#c9cfd9;line-height:1.85}
.dtl-wait{margin-top:20px;padding:16px 18px;border:1px solid var(--hair-2);background:rgba(4,9,20,.55)}
.dtl-wait .w-t{font-family:var(--f-title);font-size:14.6px;letter-spacing:1.3px;color:var(--gold-hi)}
.dtl-wait ul{margin-top:10px;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px 22px}
.dtl-wait li{position:relative;padding-left:16px;font-size:14.2px;color:#bec4ce;line-height:1.75}
.dtl-wait li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  background:var(--gold);opacity:.65;transform:rotate(45deg);
}
.dtl-wait .w-n{
  margin-top:12px;font-size:13.8px;color:#a8b0bc;line-height:1.85;
  border-left:2px solid rgba(216,180,90,.45);padding-left:10px;
}

/* ★★ v103：首领名单 —— 取自官方 Beta 客户端数据表，是这一层里**唯一的硬数据**，
   所以视觉上要比下面那块「待补」更实：金色描边 + 略亮的底 + 金色序号。
   ⚠️ 整块隐藏走 [hidden]；.dtl-boss 自己会变成 block，不给它配 [hidden] 规则就会「隐藏了还占位」。 */
.dtl-boss{
  margin-top:18px;padding:16px 18px;
  border:1px solid rgba(216,180,90,.42);background:rgba(10,14,26,.72);
}
.dtl-boss[hidden]{display:none}
.dtl-boss .bs-h{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--f-title);font-size:14.6px;letter-spacing:1.3px;color:var(--gold-hi);
}
.dtl-boss .bs-h em{
  font-style:normal;font-family:var(--f-body);font-size:12.6px;letter-spacing:.6px;color:#a6aeb9;
}
.dtl-boss .bs-l{margin-top:12px;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.dtl-boss .bs-l li{display:flex;align-items:center;gap:9px;font-size:14.4px;line-height:1.72;min-width:0}
.dtl-boss .bs-l i{
  flex:none;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:11.2px;line-height:1;color:#2a1c08;
  background:linear-gradient(180deg,#e0bf6a,#a8832a);
}
.dtl-boss .bs-l b{font-weight:500;font-family:var(--f-body);color:#e9e5d9;min-width:0;overflow-wrap:anywhere}
.dtl-boss .bs-s{
  margin-top:13px;font-size:13.4px;color:#bec4ce;line-height:1.85;
  border-left:2px solid rgba(216,180,90,.45);padding-left:10px;
}
/* ★ v104：实测译名 / 序号差异之类的补充说明（当前只有洛丹伦废墟用得到）。
   金线比上面那条「来源」更亮、字色偏暖 —— 它要说的正是「两份名单对不齐，
   ⛔ 别按序号互换着读」。
   ★ v104e：字号 12.2 → 13.4，暖金从 #c3b189 提到 #d8c69e（原文案在暗底上发灰）。 */
.dtl-boss .bs-n{
  margin-top:10px;font-size:13.4px;color:#d8c69e;line-height:1.85;
  border-left:2px solid rgba(216,180,90,.75);padding-left:10px;
}

/* ============================================================================
   ★★ v104（2026-09-19）：副本的「实测内容」块
   ---------------------------------------------------------------------------
   血染给了两份实测资料（玩家社区实测帖 + 实拍视频口述），要求把
   「掉落图 / 副本图 / 任务哪里接」补进**领主大厅**与**洛丹伦废墟**的详情浮层。
   这一块就是落点，由 `js/detail.js` 按 `o.info` 渲染 ——
   ⚠️ 只有真带这些字段的副本才有；其余卡片（区域 / 团本 / 战场 / 另外五座本）
      连同容器一起 hidden，不留一个空框占位。
   小节顺序 = 副本图 → 怎么进本 → 任务与接取地点 → 掉落 → 实测要点 → 来源。
   ★★ 字号与亮度（血染 2026-09-19 看完成品当场提的：「这个字体太小看了 看不清
      能否放大 加亮」）⇒ 这一块**整体比站上浮层正文再提一档**：
      正文 14.6px / 列表 14px / 来源行 13.2px，字色从 #9fa3aa 那档提到
      `--parch-2`（#b6bcc6）以上。⚠️ 收紧字号时**记得连行高与菱形定位一起调**，
      只改 font-size 会让 `.dq-t` 的金菱形浮到字外面去。
   ========================================================================== */
.dtl-info[hidden]{display:none}
.dtl-info{margin-top:19px}
/* 第一块紧贴上面「首领名单」的边框，别再压一条上线（双线很脏） */
.dtl-info > .dq-h:first-child,
.dtl-info > .dq-shot:first-child{margin-top:0;padding-top:0;border-top:0}

/* 官方读条画面 —— ⚠️⚠️ 这是 2992×1684 **裁掉上下灰边**后的超宽图（≈2.6:1），
   绝不能套 `.dtl-shot` 那套 `aspect-ratio:16/9` + `object-fit:cover`，
   否则左右两侧会被切掉一大块（这张图的信息恰恰在两侧）。 */
.dq-shot{
  margin:0;position:relative;overflow:hidden;
  border:1px solid rgba(216,180,90,.42);background:#04060e;
}
.dq-shot img{width:100%;height:auto;display:block}
.dq-shot figcaption{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding:10px 12px;border-top:1px solid rgba(216,180,90,.28);
  background:rgba(10,14,26,.72);
  font-family:var(--f-title);font-size:14.2px;letter-spacing:1.1px;color:var(--gold-hi);
}
.dq-shot figcaption em{
  font-style:normal;font-family:var(--f-body);font-size:13px;letter-spacing:.3px;
  color:#b0b8c4;
}

/* 小节标题（怎么进本 / 任务与接取地点 / 掉落 / 实测要点） */
.dq-h{
  margin-top:20px;padding-top:11px;border-top:1px solid var(--hair);
  font-family:var(--f-title);font-size:15.8px;letter-spacing:1.3px;color:var(--gold-hi);
}
.dq-p{margin-top:9px;font-size:15.8px;color:#dde2ea;line-height:1.85}

/* 任务清单：一个任务一张小卡，卡内「接取 / 目标 / 奖励」三行对齐 */
.dq-q{margin-top:11px;list-style:none;display:flex;flex-direction:column;gap:9px}
.dq-q > li{
  padding:12px 14px;border:1px solid var(--hair);background:rgba(4,9,20,.5);
  font-size:15.2px;color:#d5dbe4;line-height:1.78;
}
.dq-q > li > b{
  display:block;margin-bottom:5px;font-weight:500;font-family:var(--f-title);
  font-size:15.8px;letter-spacing:.5px;color:var(--parch);
}
.dq-q .q-r{display:flex;gap:9px;align-items:baseline;font-size:14.6px;line-height:1.75}
/* ⚠️ `i` 是「接取 / 目标 / 奖励」三个二字标签，给个固定宽度才能上下对齐。
   ★ v104e：字号 12 → 13，`min-width` 必须跟着 32 → 34 —— 不然「接取」两个字
     会顶出固定宽度，下面几行的冒号就对不齐了。 */
.dq-q .q-r i{
  flex:none;min-width:34px;font-style:normal;font-family:var(--f-title);
  font-size:13px;letter-spacing:1px;color:var(--gold);
}

/* 实测要点：跟「这一页接下来会补什么」清单同一款金菱形 ⇒ 视觉上归为同一族 */
.dq-t{margin-top:11px;list-style:none;display:flex;flex-direction:column;gap:8px}
.dq-t > li{position:relative;padding-left:17px;font-size:15.2px;color:#d5dbe4;line-height:1.8}
/* ★ v104e：`top` 必须跟着字号走 —— 15.2px × 1.8 = 27.4px 行高，菱形（5px）
   落在 (27.4 − 5) / 2 ≈ 11px 处才是视觉中线；留在 9px 会明显偏上。 */
.dq-t > li::before{
  content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
  background:var(--gold);opacity:.65;transform:rotate(45deg);
}

/* ★★ v104d 掉落图墙 —— 网友实拍的「需求 / 贪欲」拾取窗口（当前只有洛丹伦废墟有）。
   ⚠️⚠️ 为什么是**三列**而不是两列：源图只有 311–430px 宽，浮层正文宽 ≈848px
       ⇒ 两列会到 ≈418px，是**放大**（发虚）；三列 ≈275px 是**降采样**（最清晰）。
       ⛔ 别为了「图大点」改回两列 —— 那是拿清晰度换尺寸，越换越糊。
   ⚠️ `aspect-ratio:4/3` + `object-fit:contain`：**绝不裁**拾取窗（裁了就丢物品名，
       这正是这类图唯一的用处），差出来的边用深底补，整墙还是齐的。
   ⚠️ `align-items:start` + 每个 figure 自带 figcaption：行内高度差由 contain 抹平，
       不用 `stretch`（那会把图拉变形或让说明飘到半空）。 */
.dq-up{
  margin-top:13px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;align-items:start;
}
.dq-up-i{
  margin:0;min-width:0;overflow:hidden;
  border:1px solid rgba(216,180,90,.3);background:#05080f;
}
.dq-up-i img{
  width:100%;aspect-ratio:4/3;object-fit:contain;display:block;background:#05080f;
}
.dq-up-i figcaption{
  display:flex;flex-direction:column;gap:2px;
  padding:7px 9px;border-top:1px solid rgba(216,180,90,.24);
  background:rgba(10,14,26,.72);
}
.dq-up-i figcaption b{
  font-weight:500;font-family:var(--f-title);font-size:13.8px;
  letter-spacing:.5px;color:var(--gold-hi);line-height:1.5;
}
/* 出处（老一 · 枯牙 / 隐藏 BOSS …）比装备名弱一档，且**照抄实拍帖的分块名**
   ★ v104e：11.8 → 12.8，色从 #98a1ad 提到 #aab3bf（原来那档在黑底上几乎读不出来） */
.dq-up-i figcaption em{
  font-style:normal;font-size:12.8px;letter-spacing:.4px;color:#aab3bf;line-height:1.55;
}
/* ⚠️ 窄屏两列：三列在手机上会把 12.8px 的装备名挤成豆腐块 */
@media (max-width:720px){.dq-up{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ★★ v104d 逐件清单 —— 一件一张小卡；**属性行照抄拾取窗工具提示原文**，不做改写。
   ⚠️ 颜色只由 `q`（品质）驱动：3 = 蓝装（同官方「首领独有掉落统一为蓝」口径）。
      其余档位先留着，将来补别的本直接用。 */
.dq-ul{margin-top:13px;display:flex;flex-direction:column;gap:8px}
.dq-ui{
  min-width:0;padding:11px 14px;
  border:1px solid var(--hair);border-left:3px solid var(--hair);
  background:rgba(4,9,20,.5);
}
.dq-q1{border-left-color:#e6e6e6}
.dq-q2{border-left-color:#1eff00}
.dq-q3{border-left-color:#0070dd}
.dq-q4{border-left-color:#a335ee}
.dq-ui-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.dq-ui-h > b{
  font-weight:500;font-family:var(--f-title);font-size:15.4px;
  letter-spacing:.5px;line-height:1.5;color:#8ab4f8;
}
/* ⛔ 只动**字色**，别碰上面 `.dq-q3` 的 `border-left-color` —— 左边线是「品质」的
   唯一凭据，验收脚本按 `rgb(0, 112, 221)` 取色自证（改了那条就报红）。 */
.dq-q3 .dq-ui-h > b{color:#6cb6ff}
.dq-q4 .dq-ui-h > b{color:#c07df5}
.dq-ui-h > em{font-style:normal;font-size:13.6px;letter-spacing:.4px;color:#b0b8c4}
.dq-ui-r{margin-left:auto;flex:none;font-size:13.2px;letter-spacing:.5px;color:#adb5c1}
.dq-ui-l{margin-top:6px;list-style:none;display:flex;flex-direction:column;gap:3px}
.dq-ui-l > li{
  min-width:0;font-size:14.6px;color:#ccd3dd;line-height:1.7;
}

/* ★★ v104d 「补充说明」段（任务条数的实拍补充 / 掉落清单的口径声明）。
   ⚠️ 刻意**不**用 `.dq-src` 那款左金线（那是「来源」的专属长相），改用**上细线 + 淡金底**，
      两者挨着出现时不会看成同一种东西。 */
.dq-note{
  margin-top:12px;padding:11px 14px;
  border-top:1px solid rgba(216,180,90,.28);
  background:rgba(216,180,90,.05);
  font-size:14.6px;color:#ccd3dd;line-height:1.85;
}
.dq-note code{
  padding:1px 5px;font-family:ui-monospace,Consolas,monospace;font-size:13.4px;
  color:var(--gold-hi);background:rgba(216,180,90,.1);border:1px solid rgba(216,180,90,.22);
}
.dq-note b{color:var(--parch)}

/* ★★★ v106（2026-09-20）逐件掉落 · 按首领分块。
   ⚠️ 它内部复用 `.dq-ui`（一件一张小卡、左线由品质决定）—— **刻意不另造一套卡片**：
      同一个浮层里两套「物品卡」长相不同，访客会以为它们是两类东西。
      本层只负责「怎么分组」：块头（首领名 + N 件）与块间距。
   ⚠️ 块头用**左侧金线 + 淡底**，与 `.dq-note` 的「上细线」区分开 —— 一个是分组标题，
      一个是脚注，长得像就白写了。 */
.dq-db{margin-top:13px;display:flex;flex-direction:column;gap:16px}
.db-g{min-width:0}
.db-h{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin-bottom:9px;padding:7px 12px 7px 11px;
  border-left:2px solid rgba(216,180,90,.5);
  background:rgba(216,180,90,.045);
}
.db-h > b{
  font-weight:500;font-family:var(--f-title);font-size:15.6px;
  letter-spacing:.5px;color:var(--parch);
}
.db-h > em{
  margin-left:auto;font-style:normal;font-size:13.2px;
  letter-spacing:.5px;color:#adb5c1;
}
.db-i{display:flex;flex-direction:column;gap:8px;padding-left:11px}
/* ★★ v106：本块的三格各有各的类名，**不复用** `.dq-ui-h` —— 那个选择器在全站
   含义是「英文件名 + 部位材质」，而本块是「中文名 + 英文原名」。
   复用会让 `.dq-ui-h > em` 取到件名而不是部位（判据跟着读错）。
   下面两条把样式对齐到与扁平清单一模一样，视觉上看不出差别，语义上各归各。 */
.db-i-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.db-i-h > .db-n{
  font-weight:500;font-family:var(--f-title);font-size:15.4px;
  letter-spacing:.5px;line-height:1.5;color:#8ab4f8;
}
/* ⛔ 只动**字色**，别碰 `.dq-q3` 的 `border-left-color`（左边线是品质的唯一凭据） */
.dq-q3 .db-i-h > .db-n{color:#6cb6ff}
.dq-q4 .db-i-h > .db-n{color:#c07df5}
.db-i-h > .db-en{font-style:normal;font-size:13.6px;letter-spacing:.4px;color:#b0b8c4}
/* 实拍原文的英文名 —— 比「部位」再弱一档（**它是出处凭据，不是标题**）。
   三档层级：中文件名（亮蓝，主） > 部位材质（灰） > 英文原文（更暗，最小）。
   ⚠️ 别把它做成和部位同色 —— 那一格就分不清「这是部位」还是「这是原文」。 */
.db-i-h > .db-orig{
  font-size:12.6px;letter-spacing:.3px;color:#8c94a1;
  font-family:ui-monospace,Consolas,monospace;
}

/* ★★★ v106 首领机制 —— 一只首领一条。
   ⚠️ 「实测队伍规模」（`.bt-tm`）用**描边小签**，不是实心金块 ——
      它跟封面左下那颗等级徽章、左上那颗「已更新」都不是一回事，
      实心块放多了会互相抢。这里只是一个附注。
   ⚠️ `min-width:0` 必须给到 `<li>`：里面是 flex + 长文案，缺了会在窄屏把浮层撑破
      （同 `.dq-y` 那条教训）。 */
.dq-bt{margin-top:13px;list-style:none;display:flex;flex-direction:column;gap:11px}
.dq-bt > li{
  min-width:0;padding:11px 14px;
  border:1px solid var(--hair);border-left:3px solid rgba(216,180,90,.42);
  background:rgba(4,9,20,.5);
}
.bt-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bt-h > b{
  font-weight:500;font-family:var(--f-title);font-size:15.4px;
  letter-spacing:.5px;color:var(--gold-hi);
}
.bt-tm{
  margin-left:auto;flex:none;padding:1px 8px;
  border:1px solid rgba(216,180,90,.34);
  font-size:13px;letter-spacing:.5px;color:#d9c48b;
}
.dq-bt p{
  margin-top:6px;min-width:0;
  font-size:14.8px;color:#ccd3dd;line-height:1.8;
}
.dq-bt p b{color:var(--parch)}

/* 来源行 —— 与「首领名单」的来源同款（左侧金线 + 小字）：全站来源长一个样
   ★ v104e：13.2 → 14.4，色 #a8b0ba → #c4cbd6。
   ⚠️ 它仍然要比正文（15.8px / #dde2ea）**弱一档** —— 来源是注解不是内容，
      但「弱一档」不等于「灰到看不清」，这就是血染说「暗」的那一处。 */
.dq-src{
  margin-top:19px;padding-left:10px;border-left:2px solid rgba(216,180,90,.45);
  font-size:14.4px;color:#c4cbd6;line-height:1.85;
}

/* ★★ v104 封面角标：「资料已更新」的副本才挂（`world.html` 按 `o.upd` 渲染）。
   ⚠️ 刻意用**描边式**而不是照抄左下角那颗实心金底徽章 —— 两颗实心金块挨在一张图上
      会打架，也分不清哪颗是「等级」哪颗是「已更新」。深底 + 金字 + 金边，
      一眼就是「状态标记」而不是「字段」。
   ⚠️ 必须 `z-index:2` 才盖得住 `.icard .shot::after` 那层暗角渐变（`.badge` 同款原因）。 */
.shot .upd{
  position:absolute;right:0;top:0;z-index:2;padding:5px 12px;
  font-family:var(--f-title);font-size:11.5px;letter-spacing:1.1px;color:var(--gold-hi);
  background:linear-gradient(180deg,rgba(12,16,26,.93),rgba(3,7,16,.95));
  border-left:1px solid rgba(216,180,90,.55);border-bottom:1px solid rgba(216,180,90,.55);
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* 卡片上的「查看详情 →」提示（由 detail.js 追加，页面脚本不用管） */
.icard-go{display:block;margin-top:13px;font-size:12.2px;letter-spacing:.8px;color:var(--gold);opacity:.85}
/* 只有带 data-id 的卡片才可点 —— 首页「首发系统」那些卡没有详情，别给错暗示 */
.icard[data-id]{cursor:pointer}
.icard[data-id]:focus-visible{outline:2px solid rgba(216,180,90,.7);outline-offset:2px}

/* 全职业攻略页的职业卡：整卡是一个链接，直达天赋页那一系 */
a.gcard{text-decoration:none;color:inherit}
a.gcard:focus-visible{outline:2px solid rgba(216,180,90,.7);outline-offset:2px}
.gcard-go{display:block;margin-top:11px;font-size:12.2px;letter-spacing:.8px;color:var(--gold);opacity:.85}

@media(max-width:680px){
  .dtl{padding:0}
  .dtl-box{width:100%;max-height:100%;height:100%;display:flex;flex-direction:column}
  .dtl-shot{aspect-ratio:16/10;flex:none}
  .dtl-bd{flex:1;overflow:auto;padding:20px 18px 24px}
  .dtl-wait ul{grid-template-columns:1fr}
  .dtl-boss .bs-l{grid-template-columns:1fr}
  .dtl-bd h3{font-size:21.5px}
  /* v104：实测内容块在窄屏收一档内距（字号**不收** —— 血染刚说过看不清）；
     「实测要点」本来就是单栏，不用改。
     ★ v104e：图注跟着桌面一起提档（12.4 → 13.4）；⛔ 别再往下收字号。 */
  .dq-shot figcaption{padding:9px 11px;font-size:13.4px}
  .dq-q > li{padding:11px 12px}
  .shot .upd{padding:4px 9px;font-size:10.8px;letter-spacing:.8px}
}
/* ★ v104e：手机上图墙收成**单列**。
   ⚠️ 为什么：390px 宽下两列每格只有 ~171px，而源图是 374~430px 的拾取窗 ——
      缩到 0.46x 之后窗口里的物品名彻底不可读，那这张图就白放了（它的全部价值
      就是「实拍证据」）。单列 ≈354px，几乎 1:1，还能读。
   ⚠️ 480~720px 保持两列：那一档每格 200~330px，仍在**降采样**（>430 才发虚）。 */
@media(max-width:480px){
  .dq-up{grid-template-columns:1fr}
}