/* ============================================================================
 * 角色评分卡 —— miao-plugin 的 profile-detail 移植版
 *
 * 来源（照抄，不是凭印象）：
 *   resources/character/profile-detail.css
 *   resources/common/common.css   （.container/.cont/.elem-bg）
 *   resources/common/layout/elem.html （元素背景的挂法）
 *
 * 设计前提：miao 的这张结果图是**一张固定 600px 宽的画布**。要长得像，
 * 就不能把它拆成流式响应式布局 —— 我们照搬 600px 画布，再由 detail.js 用 zoom
 * 把整张画布等比缩到屏幕宽度。这样万像素缩小版，构图和 miao 出图完全一致。
 *
 * 立绘是「左溢出、信息浮右侧」：.main-pic 宽 1400px、margin-left -545px，
 * 所以角色图占左三分之二，数值列绝对定位在右上角，不会挡脸。
 * ========================================================================== */

/* 缩放外壳：zoom 由 detail.js 按视口宽度直接写内联样式，PC 上恒为 1（原尺寸） */
.pd-frame {
  width: 600px;
  margin: 0 auto;
}

/* 画布本体：元素背景图由 JS 内联上去（对应 miao 的 <div class="container elem-bg">） */
.pd-canvas {
  position: relative;
  width: 600px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #233;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  font-family: Number, "PingFang SC", "Microsoft YaHei", sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.profile-cont { padding: 0 10px; margin-right: 5px; }

/* ───────────────────────── .basic：立绘 + 角色信息 ───────────────────────── */

.basic { position: relative; margin: 0 -15px 15px -10px; }
/*
 * 面板 9 行时的底部补偿（detail.js 给 .char-attr 加 `attr-tall` 时生效）。
 *
 * 面板的 7 个固定项之外，dmg/phy/heal 是**按需出行**的（见 shape.js 的 DMG_ATTRS），
 * 所以行数在 8~9 之间浮动。`.main-pic`（立绘）固定 500px，而右侧信息列
 * （`.detail`，绝对定位）是内容撑高的 → 9 行时会顶进下方评分卡（实测压 1px）。
 *
 * ⚠️ 别改回 min-height / 无条件 padding：那会给只有 8 行的角色凭空多留 30~96px 空白
 * （8 行内容只到 546px，而 basic 被撑到 596）。按需补偿，8 行的角色一点空白都不多。
 */
.basic:has(.char-attr.attr-tall) { padding-bottom: 34px; }
/* 立绘下方那圈白色描边圆角框（miao 用它把上下两块视觉断开） */
.basic::after {
  content: "";
  display: block;
  position: absolute;
  left: 8px; top: 115px; bottom: 0; right: 8px;
  box-shadow: 0 0 2px 0 #fff;
  border-radius: 5px;
  z-index: 1;
}

/* 立绘：1400×500 的图居中放，靠负 margin 让角色落在画布左侧 */
.main-pic {
  width: 1400px;
  height: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -545px;
  position: relative;
  z-index: 2;
}

/* 信息列：绝对定位在右上角 —— 这就是「不挡脸」的关键 */
.detail {
  position: absolute;
  right: 20px;
  top: 20px;
  color: #fff;
  z-index: 3;
}
.char-name {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
}
.char-lv {
  margin-bottom: 20px;
  font-size: 16px;
  text-align: right;
  text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
}
.char-lv .cons { margin-left: 5px; vertical-align: bottom; }

/* 命座小徽章（miao 的 cons-N 用背景图，这里退化成文字胶囊） */
.cons-badge {
  display: inline-block;
  padding: 0 8px;
  height: 22px;
  line-height: 22px;
  border-radius: 11px;
  font-size: 13px;
  background: rgba(0, 0, 0, .55);
  color: #ffd479;
  box-shadow: 0 0 1px 0 rgba(255, 255, 255, .5) inset;
}

/* ── 天赋 a/e/q ── */
.char-talents { display: flex; width: 300px; margin: 0 0 10px 0; }
.char-talents .talent-item { flex: 1; }
.talent-icon {
  width: 100px; height: 100px;
  padding: 5px;
  position: relative;
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 90;
}
/*
 * 天赋图标的底座是一张按元素分的 100px 圆环图（miao common.css: `.elem-x .talent-icon`）。
 * 少了它，图标就是几个悬空的小图 —— 看着「简易」。
 */
.elem-pyro .talent-icon { background-image: url("assets/common/bg/talent-pyro.webp"); }
.elem-hydro .talent-icon { background-image: url("assets/common/bg/talent-hydro.webp"); }
.elem-anemo .talent-icon { background-image: url("assets/common/bg/talent-anemo.webp"); }
.elem-electro .talent-icon { background-image: url("assets/common/bg/talent-electro.webp"); }
.elem-dendro .talent-icon { background-image: url("assets/common/bg/talent-dendro.webp"); }
.elem-cryo .talent-icon { background-image: url("assets/common/bg/talent-cryo.webp"); }
.elem-geo .talent-icon { background-image: url("assets/common/bg/talent-geo.webp"); }
.talent-icon img,
.talent-icon .talent-icon-img {
  width: 46%; height: 46%;
  position: absolute;
  top: 50%; left: 50%;
  margin: -22% 0 0 -23%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.talent-icon img { object-fit: contain; margin: 0; top: 27%; left: 27%; }
.talent-icon strong {
  position: absolute;
  bottom: 2px; left: 50%;
  margin-left: -15px;
  width: 34px; height: 26px;
  line-height: 26px;
  font-size: 17px;
  text-align: center;
  border-radius: 5px;
  background: #fff;
  color: #000;
  box-shadow: 0 0 5px 0 #000;
}
/* 天赋超过固有等级（吃了命座/皇冠加成）→ 深底金字 */
.talent-icon.talent-plus strong {
  background: #2e353e;
  color: #ffdfa0;
  font-weight: bold;
  box-shadow: 0 0 1px 0 #d3bc8e, 1px 1px 2px 0 rgba(0, 0, 0, .5);
}
/* 满级（固有 10 级）→ 右上角皇冠 */
.talent-icon.talent-crown::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 28px; height: 28px;
  margin-left: -14px;
  background: url("assets/character/imgs/crown.png") no-repeat;
  background-size: contain;
  z-index: 2;
}

/* ── 面板属性表（8 行，斑马纹 + 权重胶囊 + 基础值/绿字） ── */
.char-attr {
  list-style: none;
  margin: 0; padding: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, .2);
  backdrop-filter: blur(2px);
}
.char-attr li {
  width: 300px;
  height: 32px;
  line-height: 32px;
  font-size: 17px;
  display: flex;
  padding-left: 3px;
  text-shadow: 0 0 1px rgba(0, 0, 0, .5);
}
.char-attr li:nth-child(even) { background: rgba(0, 0, 0, .4); }
.char-attr li:nth-child(odd) { background: rgba(50, 50, 50, .4); }

/* 属性图标：每个属性一张独立 SVG（assets/character/svgs/），用 **mask** 上色，不是 background-image。
   ⚠️ 为什么必须是 mask：这批 SVG 全部走 `fill="currentColor"`，另有几层半透明叠色
     （hp 的第二层 fill-opacity .497、暴击伤害的 opacity .5、充能的 fill-opacity .5）。
     当 SVG 被当作**外部图片**（background-image / <img>）加载时，它是独立文档、
     拿不到页面的 CSS 继承上下文 —— `currentColor` 会解析成初始值黑，深色面板上等于隐形。
     mask 只取 alpha 通道：形状来自 SVG，颜色来自下面的 background-color，
     半透明层次也照样保留（fill-opacity / opacity 就是 alpha）。
   ⚠️ 旧方案是一张横图 icon-new.png（680×40，17 格 × 40px）靠 background-position 切 ——
     已于 2026-10-07 换成独立 SVG，那两张 png（icon.png / icon-new.png）与生成脚本一并删掉。
   ⚠️ 十六张图**一律白色**（2026-10-07）。原先七张元素图标带自己的彩色 fill，
     在 CSS 里另配了一组 .i-pyro{background-color:#f95} 之类 —— 一行属性换一种颜色，
     和其余九个（跟文字同色）不是一套语言，看着像「这几个是另一类数据」。删掉更一致。 */
.char-attr li .icon {
  width: 26px; padding: 2px 5px;
  /* 图标在 32px 高的行里**居中**，不用 vertical-align 去凑基线。
     原来那条 vertical-align:-3px 是按「16px 图标 + 17px 文字」估的，
     实测图标中线在行内 +20px、文字 +16px —— 整整低 4px，一眼能看出图标坠着。
     改成 flex 居中后与行高解耦：以后改字号或行高都不会再飘。 */
  display: flex; align-items: center; justify-content: center;
}
.char-attr li .icon i {
  display: block;
  width: 16px; height: 16px;
  /* 十六张全部跟文字同色（.pd-canvas 是 color:#fff） */
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

.char-attr li .title {
  /* 90px：最长的名字是 5 个字 × 17px = 85px —— 元素伤加成那行在有元素时写「火伤加成」（4 字），
     但拿不到元素（旅行者）时退回通名「元素伤加成」，仍是 5 字，所以这条宽度没变。
     旧值 75px 只装得下 4 个字，「害」会被裁掉。多出的 15px 从 .value（100→85）挪来，
     总宽 300 不变 —— 数值列最长「158.0%」≈70px，85 装得下。 */
  width: 90px;
  text-shadow: 0 0 1px rgba(0, 0, 0, .8), 1px 1px 3px rgba(0, 0, 0, .5);
}
/* 权重：黑底小胶囊，≥80 金色 */
.char-attr li .weight { width: 36px; }
.char-attr li .weight span {
  display: block;
  width: 30px; height: 18px;
  line-height: 18px;
  margin: 7px auto 0;
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, .5);
  color: #fff;
}
.char-attr li .weight span.gold { color: #ffe699; }
.char-attr li .value {
  width: 85px;   /* 100 → 85：让 15px 给 .title 放五个字的属性名，总宽不变 */
  padding-right: 10px;
  text-align: right;
  font-weight: normal;
  text-shadow: 0 0 1px rgba(0, 0, 0, .8), 1px 1px 3px rgba(0, 0, 0, .5);
}
/* 基础值 / 绿字：上下两行小字 */
.char-attr li .value2 {
  width: 70px;
  padding: 4px 10px 0 0;
  font-size: 12px;
  font-weight: normal;
  text-align: right;
  background: rgba(0, 0, 0, .2);
}
.char-attr li .value2 span {
  display: block;
  height: 13px;
  line-height: 13px;
}
.char-attr li .value2 .base { color: #eee; }
.char-attr li .value2 .base.zero { color: #aaa; }
.char-attr li .value2 .plus { color: #90e800; }

/* 格位表：类名 = 后端给的 iconKey（多数与属性 key 同名），值 = 对应那张 SVG。
   九个 currentColor 图标走 background-color: currentColor（继承 .pd-canvas 的白）；
   七个元素图标另给元素色 —— mask 只取 alpha，SVG 自带的 fill 在这里看不到，
   颜色得由 CSS 声明（这些值与 SVG 里的 fill 一致，火 #f95 / 雷 #b380ff / 冰 #5df …）。
   ⚠️ **没有「通用元素伤害」这张图**：所以元素伤害那行由后端按角色元素换 iconKey
     （shape.js 的 ELEM_DMG_ZH），这里只有七个 `.i-<元素>`，没有 `.i-dmg` 的图。
   ⚠️ `.i-dmg` 是「拿不到元素」时的兜底（旅行者 elem=multi）：**故意不画图**，
     不指向任何一张 —— 随便指一张等于替玩家编了一个元素。
   ⚠️ 旧的 `.i-res`（元素抗性）已删：面板固定七项 + 按权重出的三种加成都没有 res，
     那条规则从来没被命中过（雪碧图时代留的）。 */
.i-hp { --icon: url("assets/character/svgs/icon_hp.svg"); }
.i-atk { --icon: url("assets/character/svgs/icon_attack.svg"); }
.i-def { --icon: url("assets/character/svgs/icon_defence.svg"); }
.i-mastery { --icon: url("assets/character/svgs/icon_element_mastery.svg"); }
.i-cpct { --icon: url("assets/character/svgs/icon_critical.svg"); }
.i-cdmg { --icon: url("assets/character/svgs/icon_critical_hurt.svg"); }
.i-recharge { --icon: url("assets/character/svgs/icon_charge_efficiency.svg"); }
.i-phy { --icon: url("assets/character/svgs/icon_physical_add_hurt.svg"); }
.i-heal { --icon: url("assets/character/svgs/icon_heal_add.svg"); }

/* 元素图标：只给 --icon（mask 图），不给颜色 —— 十六张一律跟文字同色。
   曾经这里还有一组 .char-attr li .icon .i-pyro { background-color:#f95 } 之类，
   已删（2026-10-07）：一行属性一种颜色，和其余九个不是一套语言。 */
.i-pyro { --icon: url("assets/character/svgs/icon_fire_add_hurt.svg"); }
.i-electro { --icon: url("assets/character/svgs/icon_elec_add_hurt.svg"); }
.i-cryo { --icon: url("assets/character/svgs/icon_ice_add_hurt.svg"); }
.i-hydro { --icon: url("assets/character/svgs/icon_water_add_hurt.svg"); }
.i-anemo { --icon: url("assets/character/svgs/icon_wind_add_hurt.svg"); }
.i-geo { --icon: url("assets/character/svgs/icon_rock_add_hurt.svg"); }
.i-dendro { --icon: url("assets/character/svgs/icon_grass_add_hurt.svg"); }

/* 兜底：拿不到元素（旅行者）时 --icon 没被定义，上面那条 mask 声明整条失效，
   mask 回到初始值 none → 不画图。这里显式写一遍，把「故意留空」这件事钉在样式里。 */
.i-dmg { -webkit-mask: none; mask: none; }

/* ── 命座 6 格（左下角一排） ── */
.char-cons {
  display: flex;
  width: 250px;
  position: absolute;
  bottom: 5px; left: 20px;
  z-index: 3;
}
.char-cons .cons-item { flex: 1; }
/*
 * 命座图标本身是**透明的浅色线条图**（cons-N.webp），必须压在元素圆盘上才看得清 ——
 * 所以这里不能清掉背景，底图由上面的 .elem-x .talent-icon 规则给。
 * 尺寸也照 miao：50px 圆盘 + 居中 46% 的图标。
 */
.char-cons .talent-icon {
  width: 50px; height: 50px;
  margin: 0 -5px;
}
.char-cons .talent-icon.off { filter: grayscale(100%); opacity: .4; }

/* ── 数据源 / 时间（右下角小字） ── */
.data-info {
  position: absolute;
  bottom: -10px; right: 15px;
  padding-right: 5px;
  font-size: 12px;
  line-height: 20px;
  color: rgba(255, 255, 255, .85);
  text-align: right;
  text-shadow: 1px 1px 1px #000;
  z-index: 2;
}
.data-info .time { margin-left: 5px; }

/* ───────────────────────── 通用卡片底 (.cont) ───────────────────────── */

.cont {
  position: relative;
  margin: 5px 0;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  overflow: hidden;
  background: url("assets/common/cont/card-bg.png") top left repeat-x;
  background-size: auto 100%;
  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
}

/* ───────────────────────── 圣遗物总分卡 (.arti-mark-cont) ───────────────────────── */

.arti-mark-cont { display: flex; }
.arti-stat {
  width: 185px;
  flex: none;
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
}
.arti-stat-ret {
  width: 100%;
  height: 78px;
  padding: 12px 10px 2px;
  display: table;
}
.arti-stat-ret > div {
  display: table-cell;
  text-align: center;
  color: #fff;
}
.arti-stat-ret strong {
  display: block;
  height: 35px;
  font-size: 30px;
  line-height: 32px;
  font-weight: bold;
}
.arti-stat span { font-size: 12px; line-height: 20px; color: #bbb; }
.arti-class-title {
  height: 25px; line-height: 25px;
  font-size: 12px;
  color: rgba(255, 255, 255, .9);
  text-align: center;
  text-shadow: 0 0 2px #000;
  background: rgba(0, 0, 0, .5);
}

/* 右侧：有效词条汇总（每列 3 条 × 26px，三列排满） */
.arti-info { width: 390px; }
.arti-info .arti-all-attr { height: 78px; overflow: hidden; }
.arti-info .arti-all-attr .arti-attr {
  position: relative;
  /* 这个 ul 身上还挂着 .detail，会被上面 `.detail { position:absolute; right:20px }`
     命中 —— 相对定位下 right:20px 等于整体左移 20px，第一列的词条角标就被
     分数卡盖掉一截。上游同样用 right/top 归零来解，照抄。 */
  right: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  /* 3 条 × 26px —— 和后一条（评分规则那行）严丝合缝，多了会压到它上面 */
  height: 78px;
  width: 100%;
  margin: 0; padding: 0;
  list-style: none;
}
/*
 * 有效词条那一行沿用「 .artis / .arti-info 」成对选择器 —— 上游每一条都是成对的，
 * 我们之前只搬了 .artis 那一半，结果右边这块既没有黄/灰配色，也没有斑马纹。
 */
.arti-info ul.detail li {
  position: relative;
  padding: 0 3px;
  font-size: 14px;
  width: 100%;
  display: table-row;
  line-height: 26px;
  height: 26px;
  white-space: nowrap;
}
.arti-info ul.detail li:nth-child(even) { background: rgba(0, 0, 0, .4); }
.arti-info ul.detail li:nth-child(odd) { background: rgba(50, 50, 50, .4); }
.arti-info ul.detail li span { color: #fff; }
.arti-info ul.detail li.great span.title { color: #ffe699; }
.arti-info ul.detail li.nouse span { color: #888; }
.arti-info .arti-all-attr .arti-attr li {
  width: 33.33%;
  display: flex;
  line-height: 26px;
  height: 26px;
  font-size: 14px;
  padding: 0 3px;
  white-space: nowrap;
}
/* .title 不设定位：角标按上游口径锚在 li 上（li 才是 relative） */
.arti-info .arti-all-attr .arti-attr li span.title {
  padding-left: 36px;
  width: 60%;
  text-align: left;
}
.arti-info .arti-all-attr .arti-attr li span.title i.eff {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 28px; height: 18px;
  line-height: 18px;
  font-size: 12px;
  font-style: normal;
  text-align: center;
  border-radius: 5px;
  background: rgba(0, 0, 0, .5);
}
.arti-info .arti-all-attr .arti-attr li span.val {
  padding-right: 5px;
  width: 40%;
  font-size: 13px;
  text-align: right;
  color: #fff;
}
.arti-info .arti-notice {
  height: 25px;
  line-height: 25px;
  margin-left: 1px;
  /* 照 miao 只留左边距 —— 文案（带 #角色圣遗物 那句）本来就贴着宽度上限，
     两边都塞 10px 就会挤掉最后一截 */
  padding: 0 0 0 10px;
  font-size: 10px;
  text-align: center;
  color: #aaa;
  background: rgba(0, 0, 0, .7);
  /* 兜底：真放不下时截断，而不是溢到左边的总分卡上 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.arti-info .arti-notice strong { color: #d3bc8e; font-weight: normal; padding: 0 3px; }

/* ───────────────────────── 武器 + 5 件圣遗物 (.artis) ───────────────────────── */

.artis {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  margin: 10px -5px 5px;
}
.artis .item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: url("assets/common/cont/card-bg.png") top left repeat-x;
  background-size: auto 100%;
  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
}
/* 每张卡 185px，600px 画布下正好放 3 列 */
.artis .item.arti { width: 185px; margin: 5px; overflow: visible; }
.artis .item.weapon { width: 185px; height: 190px; margin: 5px; overflow: visible; }

/* ── 武器卡 ── */
.artis .weapon .img {
  position: absolute;
  top: -10px; right: -10px;
  width: 100px; height: 100px;
  z-index: 2;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.artis .weapon .head {
  position: relative;
  height: 90px;
  padding: 15px 0 10px 15px;
  z-index: 3;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7), rgba(25, 25, 25, .5), rgba(25, 25, 25, 0), rgba(25, 25, 25, 0));
}
.artis .weapon .head strong { display: block; font-size: 15px; margin-bottom: 3px; }
.artis .weapon .head > span { display: block; }
.artis .weapon span.info { font-size: 14px; margin-bottom: 8px; }
.artis .weapon .weapon-attr {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  width: 100%;
  height: 26px;
  line-height: 26px;
  padding: 0 5px 0 10px;
  font-size: 14px;
  text-align: center;
  background: rgba(0, 0, 0, .3);
  text-shadow: 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, .7);
}
.artis .weapon .weapon-attr div { width: 50%; text-align: left; }
.artis .weapon .weapon-attr div span { color: #ffe699; font-weight: bold; }
.artis .weapon .weapon-desc-cont {
  height: 100px;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  background: rgba(0, 0, 0, .4);
}
.artis .weapon .weapon-desc {
  height: 100px;
  padding: 6px 5px 7px 10px;
  color: #bbb;
  font-size: 12px;
  font-weight: normal;
  display: table-cell;
  vertical-align: middle;
  word-break: break-all;
}
.artis .weapon .weapon-desc nobr {
  display: inline-block;
  height: 16px; line-height: 16px;
  padding: 0 3px;
  margin: 0 2px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  color: #ffe699;
  background: rgba(0, 0, 0, .5);
}
/* 精炼徽章：1~5 阶各一色（照 miao） */
.artis .weapon .affix {
  display: inline-block;
  width: 40px;
  margin-right: 5px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 14px;
  color: #000;
}
.affix-1 { background: #ebebebaa; box-shadow: 0 0 4px 0 #a3a3a3 inset; }
.affix-2 { background: #ddffdeaa; box-shadow: 0 0 4px 0 #51b72fbd inset; }
.affix-3 { background: #ddebffaa; box-shadow: 0 0 4px 0 #396cdecf inset; }
.affix-4 { background: #ffddf0aa; box-shadow: 0 0 4px 0 #c539debf inset; }
.affix-5 { background: #fff6dd; box-shadow: 0 0 4px 0 #deaf39 inset; }

/* 武器星级：一张竖排 5 星的图，按星级切。
   ⚠️ 我们的模板**不渲染**这个元素，两条理由：
   ① 参考图里武器名下面直接就是「精1 Lv.90」，没有星级行 —— 拿金色像素扫过参考图那一带，是 0；
   ② .head 只有 90px 预算（名字 21 + 等级行 20 + 属性条 26 + 上下内边距 25），塞不下这 20px，
      硬塞就把等级行顶到 64px 以下，整行压进属性条里。
   规则原样留着：本文件是上游 profile-detail.css 的照抄，删掉下次对照就看不出差异了。 */
.artis .weapon .star {
  display: inline-block;
  width: 100px; height: 20px;
  background: url("assets/common/item/star.png") no-repeat;
  background-size: 100px 100px;
  transform: scale(.8);
  transform-origin: 0 10px;
}
.star-1 { background-position: 0 0; }
.star-2 { background-position: 0 -20px; }
.star-3 { background-position: 0 -40px; }
.star-4 { background-position: 0 -60px; }
.star-5 { background-position: 0 -80px; }

/* ── 圣遗物卡 ── */
.artis .item.arti .arti-icon {
  position: absolute;
  top: -12px; right: 0;
  width: 90px; height: 90px;
  z-index: 2;
}
/* 名字和分数要压在图标之上 —— 参考图就是「字盖图」：图标自带 45° 淡出遮罩，
   白字连描边压上去照样清晰；反过来图标盖字，名字后半截就成了一道糊影子
   （实测 6 字名重叠 10px、7 字名重叠 25px，命中测试在最上层拿到的都是图标）。
   只抬这两个文字元素、不抬 .head：.head 自己带一条从黑到透明的渐变底，
   整体抬到图标之上会把图标左半压暗，而参考图里图标是亮的。 */
.artis .item.arti .head strong,
.artis .item.arti .head span.mark { position: relative; z-index: 3; }
/* 图标没同步到时的兜底：露一个淡部位字（花/羽/沙/杯/冠） */
.artis .item.arti .arti-icon::before {
  content: attr(data-slot);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: rgba(255, 255, 255, .22);
}
.artis .item.arti .arti-icon .img {
  width: 100%; height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* 斜切淡出，跟卡面融在一起（miao 用 -webkit-mask 的等价写法） */
  -webkit-mask: linear-gradient(45deg, #0000 0, #0005 30%, #000 50%);
  mask: linear-gradient(45deg, #0000 0, #0005 30%, #000 50%);
}
.artis .item.arti .arti-icon span {
  position: absolute;
  top: 50px; right: 8px;
  height: 18px; line-height: 18px;
  padding: 0 3px;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, .8);
}
.artis .head {
  position: relative;
  color: #fff;
  padding: 15px 10px 5px 15px;
  border-radius: 10px 10px 0 0;
  text-shadow: 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, .7);
  background: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7), rgba(25, 25, 25, .3), rgba(25, 25, 25, 0), rgba(25, 25, 25, 0));
}
.artis .head strong {
  display: block;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}
/* 分项得分与评级（「35.3分 - SS」）。上游是 14px，这里放到 16px。
   为什么停在 16 不多要一点 —— 拿真实页面扫过 14/15/16/17/18/20 六个值：
   14~16 的 head 高（63.4）、卡片高（193.4）、mark 底 → 词条表顶的空档（6.4）**三个数一模一样**，
   也就是这两行文字的**行盒高度没被字体顶开**（这一行的高度由继承来的 line-height 兜着），
   16px 是「一点不花版式预算就能拿到的最大字号」；到 17px 行盒才开始撑开，
   head 63.4→64.8、卡片 193.4→194.8，整页会跟着长高。所以 16 是白捡的上限。
   宽度也不是约束：16px 下最宽的「42.9分 - SSS」墨迹 95.6px，
   而 .head 内宽 160px（卡 185 − padding 15/10），还差 64px 才碰到右边界。
   ⚠️ 别把这条和上面的 span.mark 的 z-index 规则合并：那条管「字盖图」的层级，
   这条管字号，合并后调字号会连带动层级（踩过一次就分着放）。 */
.artis .head span.mark { font-size: 16px; font-weight: bold; }

/*
 * 档位配色：灰(D) → 白(C) → 冰蓝(B) → 天蓝(A) → 绿(S) → 紫(SS) → 金(SSS) → 橙(ACE) → 正红(MAX)。
 *
 * 九档要九个色，一个都不许重。
 *
 * 档位从哪来：miao 的 `ArtisMark.getMarkClass`，D<7 / C<14 / B<21 / A<28 / S<35 / SS<42 /
 * SSS<49 / ACE<56 / MAX<70。
 *
 * 三处都吃这一套，色只有这一份：明细页「评级」行（.arti-stat-ret 里的 strong）、圣遗物卡角标
 * （.artis .head span.mark）、首页角色卡角标（.cc-rank，roster.js 挂上档位类）。
 *
 * ⚠️ 这里**只管颜色、不写 font-weight**：三处的粗细各由自己那条规则给（strong 默认就是粗的、
 *    .artis .head span.mark 是 bold、.cc-rank 要 800）。本文件在 style.css **之后**加载，
 *    在这儿写 bold 会把首页角标的 800 压成 700。
 *
 * ⚠️ SS 的紫**不能是普通紫**：四星角色卡底色（common/item/bg4.png 主色 #8a6ab0）就是紫，
 * 首页角标压在那张图上（再垫 50% 黑 = #453558）。最早用的 #b07ae8 和它**色相只差 2°**，
 * 字直接融进底里。现在的 #ef8ce0 是**偏粉的梅紫**：色相差拉到 42°，同底对比度 3.57 → 4.99。
 */
.mark-MAX { color: #ec2b2b; }
.mark-ACE { color: #ff9f2e; }
.mark-SSS { color: #ffe066; }
.mark-SS { color: #ef8ce0; }
.mark-S { color: #5fd48f; }
.mark-A { color: #4fb0ee; }
.mark-B { color: #a9d8ff; }
.mark-C { color: #ffffff; }
.mark-D { color: #6b7280; }

/* 词条表：主词条一行 + 副词条若干行 */
.artis ul.detail {
  position: initial;
  display: table;
  width: 100%;
  margin: 0; padding: 0;
  list-style: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  backdrop-filter: blur(2px);
}
.artis ul.detail li {
  display: table-row;
  width: 100%;
  height: 26px;
  line-height: 26px;
  padding: 0 3px;
  font-size: 14px;
  white-space: nowrap;
}
.artis ul.detail li:nth-child(even) { background: rgba(0, 0, 0, .4); }
.artis ul.detail li:nth-child(odd) { background: rgba(50, 50, 50, .4); }
.artis ul.detail li span {
  display: table-cell;
  color: #fff;
}
.artis ul.detail li span.title {
  position: relative;
  padding-left: 30px;
  text-align: left;
  font-size: 14px;
}
/* 词条名（detail.js 里多包的一层）—— 存在的唯一理由是「能裁」。
   必须裁：display:table 的列宽由「所有行里最宽的那个单元格」决定，
   英文标签最长 18 字（Physical DMG Bonus / Elemental Mastery / Electro DMG Bonus），
   只要有一行这么长，整张表就被撑到 222px（卡只有 185），
   于是**每一行**的数值都右移到 185 之外，压在隔壁卡的字上（实测溢出 21~37px）。
   裁在这一层、不裁 .title：同一个 .title 里还有绝对定位的有效率角标 i.eff
   （left:3）和强化命中圈号 i.up-num（left:91），
   它们比标签列还宽，加在 .title 上的 overflow:hidden 会把它们整块裁掉。
   80px 够中文最长的 4 字标签（充能效率/元素精通/暴击伤害/治疗加成/雷伤加成，
   56px），英文放不下就省略号 —— 宁可自己短，也不许溢出去压别人。
   必须是 display:block，不能用 inline-block：带 overflow 的 inline-block，
   基线按 CSS 规定取「底边」而不是文字基线，会把整行从 26px 顶到 34px
   （5 行下来卡片从 193px 涨到 233px）。块级子元素就老老实实占一行 26px。 */
.artis ul.detail li span.title > span.label {
  display: block;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 必须显式继承：上面那条通用的 .artis ul.detail li span { color:#fff } 会直接命中
     这一层（它是 span），直接声明胜过继承 —— 不写这句，.great 档的黄色标签
     就全变白字了（像素对拍逮到的）。 */
  color: inherit;
}
/* 紧跟在强化命中圈号后面的那条标签，要让出圈号那条带子。
   圈号是绝对定位、left:91（上游 » 角标的位置，照搬没动），标签从 30（.title 的 padding-left）起，
   所以这一行的标签只有 61px。中文最长 56px，本来就够、仍然留 5px 空档（和上游一致）；
   「CRIT Rate」(64.7px) / 「Elemental Mastery」(124px) 这类超出的才被收成省略号，
   省略号正好停在 91 —— 圈号左边。
   为什么不干脆全局收到 61：没有圈号的行（命中 0 次）本来就有 80px 可用，
   把 CRIT Rate/CRIT DMG 一起砍掉纯属白砍；圈号才是抢地方的那个，让它赢在它出现的行。
   用相邻兄弟选择器而不是给 .title 加类：DOM 里 .label 就是 i.up-num 的下一个兄弟，
   这条规则自己就能表达「跟在圈号后面」，JS 不用承担版式知识。 */
.artis ul.detail li span.title > i.up-num + span.label {
  max-width: 61px;
}
.artis ul.detail li span.val {
  padding-right: 10px;
  text-align: right;
  font-size: 14px;
}
/* 词条有效率角标 */
.artis ul.detail li span.title i.eff {
  position: absolute;
  left: 3px; top: 4px;
  display: block;
  width: 23px; height: 18px;
  line-height: 18px;
  font-size: 12px;
  font-style: normal;
  text-align: center;
  border-radius: 5px;
  background: rgba(0, 0, 0, .5);
}
/* 强化命中次数 —— 实心圆 + 镂空数字（数字从圆里抠掉，露出词条行的底色）。
   为什么不是上游那套箭头：miao 画的是 up-num-icon0/1/2 三张雪碧图，
   一行 » 的个数就是命中次数，看的人得先数箭头；游戏 5.3 起给圣遗物加了
   「强化次数标记」，就是「实心圆里一个镂空的数字」—— 一个数字，一眼看清。
   位置沿用原来那条带子：left:91 是「标签起点 30 + 标签带宽 61」，所以版式一点没动。
   圆和数字都在 detail.js 的 hitMark() 造的那只 <svg> 里：
     圆走 fill="currentColor" —— 三档配色（great 金 / useful 白 / nouse 灰）都落在 span.title 上，
     这样下面那两条配色规则不用为它再写一遍；
     color:inherit 就是给这个 currentColor 兜底的（i 本来就能继承到，写出来是让这份依赖看得见）。
     数字必须镂空而不是填色：行的底色是「模糊的圣遗物图 + 半透明黑」叠出来的，
     填哪个固定颜色都会露馅；所以只能走 SVG 的 mask，理由写在 detail.js 那段注释里。
   这里只给字体和尺寸 —— CSS 管不了字形做蒙版这件事。 */
.artis ul.detail li span.title i.up-num {
  position: absolute;
  left: 91px; top: 6px;
  display: block;
  width: 14px; height: 14px;
  color: inherit;
  /* 必须显式关掉斜体：<i> 天生 italic，而 SVG 的 <text> 照样吃 CSS 继承 ——
     今天这套字体（Number/PingFang SC）没有斜体字面、浏览器也没给它做倾斜补偿，
     所以看着是正的；换台机器换个字体就会歪着抠出来。原来的 » 角标是位图，没这个问题。 */
  font-style: normal;
}
.artis ul.detail li span.title i.up-num svg {
  display: block;
  width: 100%; height: 100%;
}
/* 14px 的圆里放 10px 粗体：数字的笔画约 1.4px，抠出来是一条清楚的缝；
   再小（9px 常规体）镂空就只剩断续的点，看不出是什么数。 */
.artis ul.detail li span.title i.up-num text {
  font-size: 10px;
  font-weight: 700;
}

/* 三档配色：黄=有效且权重大(≥80)、白=有用、灰=无效。
   圈号跟着走 span.title 的颜色，所以这两条不用再为它单独配一份。 */
.artis ul.detail li.great span.title { color: #ffe699; }
.artis ul.detail li.nouse span { color: #888; }

/* 主词条行：加粗、深底 */
.artis ul.detail li.arti-main {
  font-size: 16px;
  font-weight: bold;
  padding: 3px 3px;
  background: rgba(25, 25, 25, .5);
  color: #fff;
}
.artis ul.detail li.arti-main .title { padding-left: 15px; }

/* 空位（没装圣遗物） */
.artis .item.arti.empty { opacity: .5; min-height: 120px; }
.artis .item.arti.empty .arti-empty {
  padding: 30px 15px;
  font-size: 13px;
  color: #aaa;
  text-align: center;
}

/* 底部数据时间行（原来是 miao-plugin 出处那半句） */
.pd-scored-at {
  padding: 6px 5px 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  text-align: right;
}

/* ───────────────────────── 伤害计算（明细页下侧，miao 的 dmg-cont） ─────────────────────────
 * 结构照 miao 的 profile-detail.html「伤害表格」块：标题条 + 表头 / 斑马纹数据行 + 页脚。
 * 版式从上游 profile-detail.css 搬过来，但**表格没用上游那套 display:table**：
 *   上游让「不吃暴击」的行把期望值单元格设成 width:200% 来冒充跨两列。display:table 的
 *   自动布局下，这个 200% 会当成整列的宽度需求 —— 有这种行的角色（迪奥娜护盾/治疗），
 *   暴击列被撑到 311px、期望列只剩 56px，「期望伤害」四个字直接折成两行（实测截图）。
 *   这里换成 grid：每行一个同模板 grid（minmax(0,42%) 1fr 1fr），跨列就是
 *   grid-column: 2 / span 2，列宽稳不受行内容影响。
 * 另两处网页版适配：标题列允许换行（上游 nowrap，600px 画布里长标题会溢出）；
 * 数值列右对齐（上游没定对齐，一列数字左对齐没法比大小）。 */
.dmg-cont {
  margin: 10px 0;
  border-radius: 10px;
  background: url("assets/common/cont/card-bg.png") top left repeat-x;
  background-size: auto 100%;
  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
  overflow: hidden;
  color: #fff;
  font-size: 16px;
}
.dmg-cont .cont-title {
  background: rgba(0, 0, 0, 0.4);
  color: #d3bc8e;
  padding: 10px 20px;
  text-align: left;
}
.dmg-cont .cont-title span {
  font-size: 12px;
  color: #aaa;
  margin-left: 10px;
  font-weight: normal;
}
.dmg-cont .cont-footer {
  padding: 10px 15px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  color: #ddd;
}
/* 每行自成一套同模板 grid —— 行与行之间列宽严格对齐（fraction 分量相同） */
.dmg-cont .cont-table { display: grid; }
.dmg-cont .tr {
  display: grid;
  grid-template-columns: minmax(0, 42%) 1fr 1fr;
  align-items: stretch;
}
.dmg-cont .tr:nth-child(even) { background: rgba(0, 0, 0, 0.4); }
.dmg-cont .tr:nth-child(odd) { background: rgba(50, 50, 50, 0.4); }
.dmg-cont .tr > div {
  box-shadow: 0 0 1px 0 #fff;
  padding: 6px 0;
  min-width: 0;
}
.dmg-cont .tr.thead { text-align: center; }
.dmg-cont .tr.thead > div {
  color: #d3bc8e;
  background: rgba(0, 0, 0, 0.4);
  height: 40px;
  font-size: 15px;
}
.dmg-cont .tr .title,
.dmg-cont .tr .th {
  color: #d3bc8e;
  padding: 6px 15px 6px 5px;
  text-align: right;
  background: rgba(0, 0, 0, 0.4);
  font-size: 15px;
}
/* 标题列：左对齐、可换行（上游出图里是 nowrap + width:40%，见块首注释） */
.dmg-cont .tr .title.dmg-title {
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
  white-space: normal;
}
/* 数值列右对齐，留 15px 呼吸（上游没定对齐，见块首注释） */
.dmg-cont .tr > div.value { text-align: right; padding-right: 15px; }
/* 不吃暴击的条目：期望值跨「暴击伤害 + 期望伤害」两列，行里只发两个单元格 */
.dmg-cont .tr > div.value-full { grid-column: 2 / span 2; }
/* Buff 列表是两列（来源 / 描述），与伤害表不同模板 —— 单独一套 */
.dmg-cont.dmg-msg .tr { grid-template-columns: minmax(0, 130px) 1fr; }
.dmg-cont.dmg-msg .tr .th { padding-right: 15px; }
.dmg-cont.dmg-msg .tr .td { padding: 6px 15px 6px 10px; text-align: left; }
/* loading / 失败 / 无数据：表格位置里的一行小字 */
.dmg-status {
  padding: 14px 20px;
  font-size: 13px;
  color: #aaa;
}
.dmg-status.err { color: #e8a0a0; }
.dmg-cont .dmg-created-by { float: right; padding-left: 5px; }