/* ===== 右上角 HUD 重排（云境 + 护心 / 灵息）=====
   实测现状（393x852）：
     .panel.realm    90 x 31 px，塞了 4 条信息
     #realmBar        6 x 3 px   —— 填充条只有 6px，进度完全看不出来
     字号           6 / 8 / 10 px —— 远低于手机可读下限
     #realmName      40 x 15     —— 4 个字正好占满 40px，换个 4 字云境名就折行

   两个坑（已踩过，写在这里备忘）：
     a) 原规则是 `.hud.left .vitals`（3 个类），`.panel.vitals`（2 个类）即使加了
        !important 也会输 —— !important 之间仍然比特异性。所以这里必须用 3 个类。
     b) `#realmBar` 的父级 .progress 被 v24 设成 `grid-column:1;grid-row:2`，
        只占网格的一列，轨道只有半宽 → 填充条自然只有 6px。要改成 `grid-column:1/-1`。

   布局思路：
     ① 两块面板统一 132px 宽（原 90），形成一整块干净的信息区
     ② 字号下限提到 10px：云境名 13 / 进度 10 / 护心 12 / 灵息 11
     ③ 云境名 nowrap + 省略号，绝不折行（你截图里最主要的问题）
     ④ 进度条通栏 3px，修掉网格只占一列的 bug
     ⑤ 隐掉 6px 的「所在云境」标签（读不了，下面的名字已表意）
     ⑥ 数字统一等宽（tabular-nums），数值跳动时不会左右抖 */

/* ---------- 云境面板 ---------- */
.hud.right .realm{
  width:132px !important;
  padding:7px 9px !important;
  border-radius:10px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:2px !important;
  justify-self:end !important;
}
.hud.right .realm .micro{ display:none !important }

.hud.right .realm strong{
  margin:0 !important;
  font-size:13px !important;
  line-height:1.15 !important;
  letter-spacing:.06em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.hud.right .realm small{
  margin:0 !important;
  font-size:10px !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  font-variant-numeric:tabular-nums;
}

/* 进度条：收短到 72px（原来通栏 114px，两条长横线把信息切碎） */
.hud.right .realm strong,
.hud.right .realm small,
.hud.right .realm .progress{
  grid-column:1 !important;
  grid-row:auto !important;
}
/* ★ 内容全部贴右：原来云境这块是左对齐，文字右边空 57~59px，
   而下面「护心 / 灵息」那块的数值是贴右的 → 两块右边缘看着不齐。
   这里把名字、数值、进度条统一改成靠右对齐。 */
.hud.right .realm strong,
.hud.right .realm small{
  text-align:right !important;
}
.hud.right .realm .progress{
  width:72px !important;
  height:3px !important;
  margin:3px 0 0 auto !important;   /* auto = 靠右 */
  border-radius:2px !important;
  overflow:hidden !important;
  justify-self:end !important;
}
.hud.right .realm .progress i{ height:100% !important; border-radius:2px !important }

/* ---------- 护心 / 灵息面板（必须用 3 个类才能赢原来的 .hud.left .vitals） ---------- */
.hud.left .panel.vitals{
  width:132px !important;
  padding:7px 9px !important;
  border-radius:10px !important;
}
.hud.left .panel.vitals .label-row{ justify-content:space-between !important; gap:6px !important; margin-bottom:2px !important }
.hud.left .panel.vitals .label-row span{ font-size:10px !important; letter-spacing:.1em !important }
.hud.left .panel.vitals .label-row b{ font-size:12px !important }
.hud.left .panel.vitals .hint-row{ justify-content:space-between !important; gap:6px !important; font-size:10px !important; margin-top:2px !important }
.hud.left .panel.vitals .hint-row span{ font-size:10px !important }
.hud.left .panel.vitals .hint-row strong{ font-size:11px !important }
/* 护心条 + 灵息条：同样收短到 72px、并且★靠右★（上次漏改，还是左对齐的）
   原来：护心条通栏、灵息条固定 58px 且靠右，两条宽度还不统一 */
.hud.left .panel.vitals .bar,
.hud.left .panel.vitals .bar.gold{
  width:72px !important;
  height:3px !important;
  margin:3px 0 0 auto !important;   /* auto = 贴右 */
  border-radius:2px !important;
  overflow:hidden !important;
}
.hud.left .panel.vitals .bar i{ height:100% !important; border-radius:2px !important }
/* 两条之间多留一点缝：护心条下面到「灵息」那一行 */
.hud.left .panel.vitals .bar{ margin-bottom:9px !important }
/* ★ 标签行也贴右：原来「护心」在面板最左侧、「2 / 2」在最右侧，中间空一大片，
   和右对齐的「初入云门」对不上。改成整行靠右，标签和数值挨在一起。 */
.hud.left .panel.vitals .label-row,
.hud.left .panel.vitals .hint-row{
  justify-content:flex-end !important;
  gap:8px !important;
}

/* ★ 两块面板原本重叠 12px（realm 占 53~103，而 vitals 是写死的 top:91px）。
   这里把 vitals 下移，留出 14px 间隔。云境名已 nowrap，realm 高度稳定为 50px，
   所以这个值不会因为云境名长短而失效。 */
.hud.left .panel.vitals{ top:117px !important }

.panel.vitals b,.panel.vitals strong,
#guardText,#qiText,#jadeText,#powerText{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" }
#guardText{ font-size:12px !important }
#qiText{ font-size:11px !important }

/* ---------- 两块面板整体靠右、留呼吸 ---------- */
.hud.right{ width:132px !important; justify-items:end !important; gap:5px !important }

/* 返回游戏大厅的入口：让它和旁边的方形按钮完全一致（原来是 <button>，这个是 <a>） */
#backLobby{
  text-decoration:none;
  display:grid;place-items:center;
  font-size:15px;line-height:1;
  color:inherit;
}
#backLobby:active{transform:scale(.94)}