/* Black, not the arena's gray clear color, so the play-field edge stays visible. */
body { margin: 0; background: black; }
/* resizeCanvas owns the size and the centering margin (device-pixel snapped). */
canvas { display: block; }
#hud {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: white;
  font-family: monospace;
  /* rem so the HUD scales with the browser's text-size setting (px would not);
     em stroke scales with it too. pre keeps the padding spaces and the line break. */
  font-size: 1.5rem;
  /* The stroke straddles the glyph edge, so paint it under the fill — on top,
     its inner half eats the fill and shreds the glyphs. Only the outer half
     shows, so the width is 2x the visible outline. */
  -webkit-text-stroke: 0.1875em black;
  paint-order: stroke fill;
  white-space: pre;
  text-align: right;
  z-index: 1000;
}
#hud.critical { color: #ff4444; }