/* ============================================================================
 * ui2.css —— 需求2 / 需求7 / 需求4 的增量样式（独立文件，绝不改 css/styles.css）
 *   ① 需求2：战斗页顶部状态条 → 5 等宽列（AC / 速度 / 先攻 / 熟练 / 视觉），
 *             列间细竖线 + 菱形小装饰，底部金色线性图标（内联 SVG，见 index.html）。
 *             口径：只改排列方式、不改原内容 —— 原 5 项全部保留（HP / 临时 HP 因与下方
 *             bt-vitals 重复而移出可见条，其节点仍在隐藏兼容层，供既有 E2E 读取）。
 *   ② 需求7：角色页「属性与技能」的技能区 → SKILLS 小标题 + 两列紧凑技能卡 + 加大属性名。
 *   ③ 需求4：角色总览头像 → 可点更换（本地压缩上传 / 图片 URL / 恢复默认 / 移除）。
 *   装载顺序：index.html 中位于 css/styles.css 之后 → 同名优先级时本文件覆盖。
 *   PWA：sw.js 的 ASSETS 需加入 './css/ui2.css'（父代理处理），否则离线会丢样式。
 * ========================================================================== */

:root {
  --u2-gold: #d9b26a;
  --u2-gold-dim: rgba(217, 178, 106, .42);
  --u2-gold-glow: rgba(217, 178, 106, .45);
}

/* ====== 需求2 · 顶部状态条（参考图1） ====== */
.u2-bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #08192b, #040d18);
  box-shadow: inset 0 0 18px rgba(79, 193, 255, .06);
  margin-bottom: 12px;
  overflow: hidden;
}
.u2-col {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 2px 7px;
  text-align: center;
}
.u2-lab {
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acc);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u2-val {
  font-size: 17px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--acc-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 文本型数值（如「黑暗视觉」）稍小一号，保证 430 宽不换行、不溢出 */
.u2-val-sm { font-size: 14px; }
.u2-ico {
  display: block;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--u2-gold);
}
.u2-ico path,
.u2-ico circle,
.u2-ico line,
.u2-ico polyline,
.u2-ico ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 列间细竖线 + 小菱形装饰（绝对定位 → 不参与 5 列网格布局；left = 各列边界 20/40/60/80%） */
.u2-sep {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--u2-gold-dim) 20%, var(--u2-gold-dim) 80%, transparent);
  pointer-events: none;
}
.u2-sep::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--u2-gold);
  box-shadow: 0 0 6px var(--u2-gold-glow);
}
.u2-sep1 { left: 20%; }
.u2-sep2 { left: 40%; }
.u2-sep3 { left: 60%; }
.u2-sep4 { left: 80%; }
/* 兼容层：既有 E2E 套件仍读取 #miniHp / #miniTemp 的文本语义（#miniProf 已回到可见第 4 列） */
.u2-legacy { display: none !important; }

@media (max-width: 380px) {
  /* 5 列后每列更窄：标签保持 9px（不再压到 8px，中文标签在 8px 下几乎不可读），
   * 数值缩到 15px / 文本型 12.5px —— 360 宽仍为一行、不溢出（e2e-ui2 有实测断言）。 */
  .u2-lab { font-size: 9px; letter-spacing: .10em; }
  .u2-val { font-size: 15px; }
  .u2-val-sm { font-size: 12.5px; }
  .u2-ico { width: 15px; height: 15px; }
}

/* ====== 需求7 · 技能检定区（参考图9） ====== */
.u2-sk-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--u2-gold);
  text-shadow: 0 0 8px var(--u2-gold-glow);
}
.u2-skgroups {
  display: flex;
  flex-direction: column;
  padding: 2px 10px 8px;
}
/* 豁免行的属性名同口径加大（与技能区的属性组标题一致 → 属性名成为清晰的分组标签） */
.u2-save-lab { font-size: 14px; font-weight: 700; color: var(--acc-light); }
.u2-sg { display: flex; flex-direction: column; }
.u2-sg + .u2-sg { margin-top: 4px; }
.u2-sg-t {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0 2px;
  border-bottom: 1px solid rgba(90, 180, 255, .14);
}
.u2-sg-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--acc-light);
  letter-spacing: .02em;
}
.u2-sg-en {
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--td-strong);
}
.u2-sg-mod {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.u2-skgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 3px 0 1px;
}
/* 技能卡：一行一张，高度 32px。
 * 豁免说明：本项目已把交互控件统一抬到 40px（移动端推荐值），但用户在需求7中明确要求
 * 「技能框缩短更紧凑」，且 tools/e2e-ui2.mjs 断言技能卡平均高度 < 34px 且 ≥ 28px
 * → 本卡是唯一不参与 40px 口径的交互控件，保留 32px。 */
.u2-sk {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  padding: 0 7px;
  border: 1px solid rgba(90, 180, 255, .22);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(79, 193, 255, .06), rgba(79, 193, 255, .02));
  color: var(--parchment);
  text-align: left;
  overflow: hidden;
}
.u2-sk:active { background: rgba(79, 193, 255, .18); }
.u2-sk.is-prof {
  border-color: var(--u2-gold-dim);
  background: linear-gradient(180deg, rgba(217, 178, 106, .10), rgba(217, 178, 106, .03));
}
.u2-sk-ico {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: var(--u2-gold);
  opacity: .92;
}
.u2-sk-ico svg { display: block; width: 15px; height: 15px; }
.u2-sk-ico path,
.u2-sk-ico circle,
.u2-sk-ico line,
.u2-sk-ico polyline,
.u2-sk-ico ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.u2-sk-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.u2-sk-cn {
  font-size: 12px;
  font-weight: 400;
  color: var(--parchment);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u2-sk-en {
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--td-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u2-sk-val {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  color: var(--acc-light);
  font-variant-numeric: tabular-nums;
}
.u2-sk.is-prof .u2-sk-val { color: var(--u2-gold); }
.u2-sk-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
}

/* ====== 需求4 · 头像自定义上传 ====== */
.u2-ava { position: relative; padding: 0; }
.u2-ava-badge {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  line-height: 1;
  color: #02111f;
  background: linear-gradient(145deg, var(--acc-light), var(--acc-dark));
  border: 1px solid #01050b;
  pointer-events: none;
}
.u2-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 4px 10px;
  margin-top: 5px;
  border: 1px solid var(--u2-gold-dim);
  border-radius: 14px;
  background: rgba(217, 178, 106, .10);
  color: var(--u2-gold);
  font-size: 11px;
  font-weight: 700;
}
.u2-btn:active { background: rgba(217, 178, 106, .22); }
.u2-pot-prev {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 0;
}
.u2-pot-box {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--acc-light);
  background: linear-gradient(135deg, #12314f, #0a2238);
}
.u2-pot-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u2-pot-note { flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--td-strong); line-height: 1.6; }
.u2-upbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: rgba(79, 193, 255, .06);
  color: var(--acc-light);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.u2-upbtn:active { background: rgba(79, 193, 255, .18); }
.u2-pop-note { padding: 0 12px 12px; }
.u2-pot-src { font-size: 10px; color: var(--td-strong); margin-top: 3px; line-height: 1.5; }

/* ====== 浅色主题（与 styles.css 的 light 覆盖同口径） ====== */
html[data-theme="light"] .u2-bar {
  background: linear-gradient(180deg, #eef4fb, #e3edf8);
  box-shadow: inset 0 0 18px rgba(79, 193, 255, .10);
}
html[data-theme="light"] .u2-val { color: #12456e; }
html[data-theme="light"] .u2-lab { color: #2e6f9e; }
html[data-theme="light"] .u2-ico { color: #a8802f; }
html[data-theme="light"] .u2-sk { background: linear-gradient(180deg, rgba(79, 193, 255, .10), rgba(79, 193, 255, .03)); }
html[data-theme="light"] .u2-sk-cn { color: #12314f; }
html[data-theme="light"] .u2-sk.is-prof { background: linear-gradient(180deg, rgba(200, 160, 70, .16), rgba(200, 160, 70, .05)); }
html[data-theme="light"] .u2-sk-title { color: #9a7420; text-shadow: none; }
html[data-theme="light"] .u2-sg-name { color: #12456e; }
html[data-theme="light"] .u2-pot-box { background: linear-gradient(135deg, #dbe8f6, #cfe0f2); color: #12456e; }