The door hangs on the HUD's own line, not the browser's

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/render.js

@@ -81,6 +81,11 @@ function measureSafe(scale) {
   const cs = getComputedStyle(el);
   SAFE.bottom = Math.round((parseFloat(cs.paddingBottom) || 0) / scale);
   SAFE.topCss = Math.round(parseFloat(cs.paddingTop) || 0); // CSS px — for the page background below
+  // THE HUD MARGIN, IN CSS PX. The canvas HUD is laid out in LOGICAL px (the scoreboard and the
+  // BLOOD panel both sit 6 logical px in from the top-right); the DOM chips on top of it are laid
+  // out in CSS px — and on a phone one logical px is ~1.4 CSS px, so the same "6" put the quit
+  // chip a visible notch above the panels it is meant to line up with. One variable, one grid.
+  document.documentElement.style.setProperty('--hud', 6 * scale + 'px');
 }
 
 // The page background behind the canvas. It shows in exactly two places: the strip above the canvas