/* ============ 顶部 HUD ============ */
#hud {
  height: calc(var(--hud-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 10px 0;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #050403, var(--ink-1));
  border-bottom: 1px solid var(--ink-4);
  position: relative; z-index: 20;
  gap: 8px;
}
#hud-left { flex: 1; min-width: 0; }
#puppet-name {
  font-family: var(--font-kai);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar {
  position: relative;
  height: 12px;
  background: #0a0806;
  border: 1px solid var(--ink-4);
  border-radius: 3px;
  margin-top: 3px;
  overflow: hidden;
}
.bar.energy { height: 8px; }
.bar-fill {
  height: 100%; width: 100%;
  transition: width .25s;
  border-radius: 2px;
}
.bar.hp .bar-fill { background: linear-gradient(90deg, #6e1f1f, var(--hp-c)); }
.bar.energy .bar-fill { background: linear-gradient(90deg, #1e4a66, var(--energy-c)); }
.bar-text {
  position: absolute; inset: 0;
  font-size: 9px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px #000;
  font-family: var(--font-body);
}
.bar.energy .bar-text { display: none; }
#hud-right { display: flex; align-items: center; gap: 7px; }
.cur {
  display: flex; align-items: center; gap: 3px;
  font-size: 12px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.cur-ico {
  width: 13px; height: 13px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.cur-ico.lingshi { background: radial-gradient(circle at 35% 30%, #9fe8b0, #2e8f57 65%, #1a5c38); box-shadow: 0 0 4px rgba(80,220,130,.4); }
.cur-ico.tongbao { background: radial-gradient(circle at 35% 30%, #e8d9a0, #8a7433 60%, #574716); box-shadow: 0 0 4px rgba(220,200,120,.4); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.cur-ico.taigu { background: radial-gradient(circle at 35% 30%, #d8b9e8, #7c4a9e 60%, #4a2a63); box-shadow: 0 0 5px rgba(190,140,230,.5); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.icon-btn {
  font-size: 19px;
  color: var(--paper-dim);
  padding: 4px 6px;
}
.icon-btn:active { color: var(--gold); }
.acc-chip {
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-family: var(--font-kai);
  color: var(--paper-dim);
  border: 1px solid var(--ink-4);
  border-radius: 10px;
  padding: 2px 8px;
  letter-spacing: 1px;
}
.acc-chip.logged { color: var(--gold); border-color: rgba(212,175,55,.45); }