.halo-preview {
  --vitals-top: max(83px, calc(env(safe-area-inset-top) + 60px));
  --vitals-height: 48px;
  --left-hud-width: min(340px, calc(100vw - 2 * var(--edge) - 54px));
}
.halo-preview .player-vitals {
  position: fixed;
  z-index: 8;
  top: var(--vitals-top);
  left: var(--edge);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  width: var(--left-hud-width);
  height: var(--vitals-height);
  padding: 9px 11px 10px;
  border: 1px solid var(--ui-glass-line, rgb(196 222 207 / 30%));
  border-radius: 5px;
  background: var(--ui-glass-soft, rgb(19 35 33 / 28%));
  box-shadow: inset 0 1px var(--ui-glass-highlight, rgb(232 244 226 / 11%));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: var(--ui-text, #e2ebe2);
  text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
}
.player-vitals::after { content: ''; position: absolute; top: 11px; bottom: 11px; left: 50%; width: 1px; background: var(--ui-glass-highlight, rgb(232 244 226 / 11%)); }
.vital { --vital-ratio: 0; --vital-color: #d7a09a; min-width: 0; }
.vital[data-vital="energy"] { --vital-color: #d8c38f; }
.vital-heading { display: flex; align-items: center; gap: 5px; min-width: 0; height: 14px; margin-bottom: 7px; }
.vital-icon { width: 12px; height: 12px; fill: none; stroke: var(--vital-color); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.vital-name { color: #c3cec4; font-size: 8px; line-height: 1; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.vital-numbers { margin-left: auto; color: #edf0e5; font-size: 11px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vital-maximum { margin-left: 2px; color: #a8b5aa; font-size: 8px; }
.vital-track { position: relative; overflow: hidden; height: 3px; border-radius: 2px; background: rgb(213 225 208 / 12%); box-shadow: 0 1px rgb(0 0 0 / 20%); }
.vital-fill { display: block; width: 100%; height: 100%; transform: scaleX(var(--vital-ratio)); transform-origin: left; background-color: var(--vital-color); background-image: linear-gradient(90deg, color-mix(in srgb, var(--vital-color) 65%, #36423c), var(--vital-color)); transition: transform 350ms cubic-bezier(.2,.7,.2,1); }
.vital[data-level="critical"] .vital-numbers { color: #f0b6a3; }
.vital[data-level="critical"] .vital-track { background: rgb(215 160 154 / 16%); }
.vital[data-level="unknown"] .vital-numbers { color: #8b9e93; }
@media (max-width: 720px) {
  .halo-preview { --vitals-top: max(72px, calc(env(safe-area-inset-top) + 54px)); --left-hud-width: min(300px, calc(100vw - 2 * var(--edge) - 54px)); }
  .halo-preview .player-vitals { gap: 16px; padding-left: 9px; padding-right: 9px; }
  .vital-name { font-size: 7px; letter-spacing: .6px; }
}
@media (max-width: 360px) {
  .halo-preview .player-vitals { gap: 12px; padding-left: 7px; padding-right: 7px; }
  .vital-heading { gap: 3px; }
  .vital-name { letter-spacing: .3px; }
  .vital-numbers { font-size: 10px; }
  .vital-maximum { font-size: 7px; }
  .vital-icon { width: 10px; height: 10px; }
}
@media (max-height: 560px) {
  .halo-preview { --vitals-top: 63px; --vitals-height: 44px; }
  .halo-preview .player-vitals { padding-top: 7px; padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .vital-fill { transition: none; } }