/* ============================================================================
   物品浮层共用样式（.wtip-，2026-10-07 从 database.css 抽出成独立文件）
   ----------------------------------------------------------------------------
   谁在用：database.html（物品查询 / 商人青睐兑换库）+ tips.html（商人青睐指南）。
   渲染器是 js/itemtip.js（一处渲染，多页共用）。改这里 = 改所有页的浮层。
   ⛔ 别把这段抄回 database.css —— 那就是两份样式打架的老账重演。
   ============================================================================ */

/* ============================================================================
   共用「物品浮层」（2026-09-22 v136 血染新增）—— 独立一套 wtip- 命名空间
   ----------------------------------------------------------------------------
   ⚠️ 本页已有 it- / pf- / cw- / db- / kov- / ach- / tset 七套命名空间，
      再共用类名一定重演 css/wow.css 那条 .slot 的老账（别人的声明照旧生效，
      肉眼看只觉得"多了条横线"）。所以浮层自己一套 wtip-。
   ⚠️ 行序照**游戏内**（使用 → 部位 → 物品等级 → 伤害 → 护甲 → 属性 → …），
      颜色也照游戏语义：能用的一次性效果是绿字、物品等级是金字、ID 是灰字。
      ⛔ 别为了"统一好看"把绿字改成正文色 —— 那不是装饰，是游戏里的信息分层。
   ⚠️ 浮层**必须** pointer-events:auto：它内部还有材料图标可以继续悬停看
      （设成 none 的话鼠标一碰它就穿过去、浮层当场消失，材料永远点不开）。
   ============================================================================ */

.wtip{
  position:fixed;left:0;top:0;z-index:920;
  max-width:346px;min-width:212px;
  padding:11px 13px 9px;
  background:linear-gradient(180deg,rgba(16,18,23,.985),rgba(9,10,14,.992));
  border:1px solid rgba(216,180,90,.46);
  box-shadow:0 16px 40px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,235,180,.07);
  font-family:var(--f-body);font-size:12.8px;line-height:1.6;color:#d7dbe2;
  visibility:hidden;opacity:0;
  transition:opacity .1s linear;
  pointer-events:auto;
}
.wtip.on{visibility:visible;opacity:1}
.wtip-in{display:block}

.wtip-nm{
  font-family:var(--f-title);font-size:14.6px;letter-spacing:.6px;line-height:1.36;
  word-break:break-word;margin-bottom:1px;
}
.wtip-tp{color:#c6cbd4;letter-spacing:.3px}
.wtip-il{color:#e8c86a}
.wtip-il b{font-weight:400}

/* 「暂译」标（2026-09-23 v142）：浮层里凡是**我们译的**（客户端确实没给中文）都要挂这枚。
   暖黄，与列表行的 .it-mt、商人青睐的 .kov-mtz **同色同形**（三处一枚标记一个意思，
   ⛔ 别在这儿换颜色：颜色一变就成了"另一种标记"）。
   这是**免责标记，不是装饰** —— 摘了就等于我们在冒充官方译名。 */
.wtip-mt{
  display:inline-block;margin-left:5px;padding:0 5px;border-radius:3px;
  font-family:var(--f-body,inherit);font-size:10.6px;letter-spacing:.5px;
  vertical-align:1px;white-space:nowrap;
  color:#e2c98a;border:1px solid rgba(216,180,90,.30);background:rgba(216,180,90,.09);
}

/* 伤害行：左边区间、右边速度（游戏里就是这么分两头的，用 flex 而不是空格怼） */
.wtip-dmg{display:flex;justify-content:space-between;gap:14px;color:#eceff4}
.wtip-dmg span{color:#a8aeb8}
.wtip-dps{color:#8f97a2;font-size:12px}
.wtip-dt{color:#8f97a2;font-size:12px}
.wtip-arm{color:#eceff4}
.wtip-res{color:#c6cbd4}
.wtip-st{color:#eceff4}
/* 「使用：/装备：/击中时可能：」= 游戏里的绿字效果 */
.wtip-use,.wtip-fx{color:#1eff00}
.wtip-set{color:#e8c86a}
/* 套装加成行（2026-10-08 PvP 套装悬浮新增）：绿字同「装备：」效果行，紧贴套装名 */
.wtip-setbn{margin-top:1px}
.wtip-drop{margin-top:3px;color:#b9bfc8;font-size:12.2px}
.wtip-drop span{color:#8f97a2;margin-right:6px}
.wtip-drop em{
  font-style:normal;margin-left:6px;padding:0 5px;font-size:10.6px;letter-spacing:.4px;
  color:#8f97a2;border:1px solid rgba(255,255,255,.13);
}
.wtip-req{color:#eceff4;margin-top:3px}
.wtip-req b{font-weight:400}
.wtip-bind{color:#c6cbd4}

/* 底部：物品 id + 数值来源角标 + 页内说明 */
.wtip-id{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:8px;padding-top:7px;
  border-top:1px solid rgba(216,180,90,.2);
  font-size:11.4px;letter-spacing:.4px;color:#8f97a2;
}
.wtip-id em{
  font-style:normal;padding:0 5px;
  color:#c9a86a;border:1px solid rgba(216,180,90,.32);background:rgba(216,180,90,.07);
}
.wtip-id i{font-style:normal;color:#8f97a2}

/* 未收录 / 无值的说明：虚线框，一眼看出是"讲清楚"不是"数据行" */
.wtip-none{
  margin-top:5px;padding:5px 8px;font-size:11.8px;line-height:1.66;color:#98a0ab;
  border:1px dashed rgba(255,255,255,.16);
}
.wtip-none b{font-weight:400;color:#c6cbd4}

/* 小节标签（材料 / 制造）—— 与 .kov-bh 同一套语义，但**故意不复用**：
   浮层会出现在好几种底色上，共用会让"只改浮层"变成"连专业配方一起改" */
.wtip-lab{
  position:relative;margin:9px 0 6px;font-size:11.4px;letter-spacing:1.4px;color:#c9a86a;
}
.wtip-lab::after{
  content:"";position:absolute;left:34px;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,rgba(216,180,90,.28),transparent);
}

.wtip-mats{display:flex;flex-wrap:wrap;gap:6px}
.wtip-mat{
  display:inline-flex;align-items:center;gap:6px;padding:2px 7px 2px 3px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  font-size:11.8px;color:#c8ced7;max-width:100%;
}
.wtip-mat img,.wtip-mico{
  flex:none;width:22px;height:22px;display:block;
  border:1px solid rgba(216,180,90,.3);background:#0a0b0e;
}
.wtip-mico{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 4px,transparent 4px,transparent 8px);
  border-style:dashed;border-color:rgba(255,255,255,.14);
}
.wtip-mat b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.wtip-mat i{font-style:normal;color:#e8c86a}

/* 「制造」后面嵌的成品整块：左侧一道金线表示从属关系，⛔ 别用缩进 0 的方式平铺 */
.wtip-prod{
  margin-top:2px;padding:7px 0 2px 10px;
  border-left:2px solid rgba(216,180,90,.34);
}
.wtip-inner{padding:0}

/* 物品查询展开卡：伤害 / 护甲 / 抗性 / 数值来源（2026-09-22 v136）
   ⚠️ 与属性行（.it-st li）同一条左对齐线，**只靠 `.k` 那一段的宽度对齐** ——
      ⛔ 别给这几行单独加缩进或边框，一扫列表就会觉得"这几行是另一块东西"。 */