#health-hud {
  position: fixed; top: 72px; right: 12px; z-index: 15;
  width: min(340px, calc(100vw - 24px)); max-height: calc(100dvh - 150px);
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  color: #f3eed9; font: 14px/1.4 system-ui, sans-serif;
  text-align: left; pointer-events: auto;
}
#health-hud[hidden] { display: none; }
#health-hud details { margin: 0 0 5px; background: #191910f2; border-left: 3px solid #e8b64a; border-radius: 3px; }
#health-hud details[data-severity="severe"] { border-color: #e25a3c; }
#health-hud summary { display: flex; align-items: center; gap: 8px; padding: 7px 9px; cursor: pointer; color: #e8b64a; }
#health-hud [data-severity="severe"] summary { color: #e25a3c; }
#health-hud summary:focus-visible { outline: 2px solid #fff9e5; outline-offset: -2px; }
#health-hud details p { margin: 0; padding: 0 10px 10px; }
#health-hud .health-icon { display: inline-block; flex: 0 0 20px; height: 20px; background: currentColor; mask: var(--health-icon) center / contain no-repeat; }
#health-hud .health-help { margin: 0; padding: 5px 8px; background: #191910f2; color: #d9ceab; font-size: 12px; }
#health-hud .health-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 480px) { #health-hud { top: 64px; right: 8px; width: min(310px, calc(100vw - 16px)); font-size: 13px; } }
/* On a phone the warnings lie over the touch controls' right column during a match: taps go
   through to the controls, the warnings dim, and the line that says to tap one hides. Their
   details open again in the menu. */
@media (pointer: coarse) {
  html[data-in-match] #health-hud { pointer-events: none; opacity: 0.6; }
  html[data-in-match] #health-hud .health-help { display: none; }
}