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

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

index.html

@@ -88,7 +88,11 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
      render.js reserves this chip's width). Same recessed-panel language as the canvas HUD:
      dark green field, a hairline of the board's own highlight, a 1px inner bevel — and it goes
      crimson while pressed, because red is reserved for the thing you actually came to press. */
-  #quit { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); right: 6px; z-index: 5; }
+  /* --hud is the canvas HUD's own 6-logical-px margin, converted to CSS px by render.js, so the
+     chip's top edge lands on the same line as the scoreboard's and the BLOOD panel's. */
+  #quit { position: fixed; z-index: 5;
+          top: calc(env(safe-area-inset-top, 0px) + var(--hud, 8px));
+          right: calc(env(safe-area-inset-right, 0px) + var(--hud, 8px)); }
   #quit button { width: 32px; height: 32px; border-radius: 3px; display: grid; place-items: center;
                  background: rgba(8,26,18,0.82); border: 1px solid rgba(63,149,96,0.35);
                  box-shadow: inset 0 1px 0 rgba(242,234,214,0.10), 0 1px 2px rgba(0,0,0,0.45);
@@ -653,6 +657,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
     </div>
   </div>
 </div>
-<script type="module" src="src/main.js?v=271"></script>
+<script type="module" src="src/main.js?v=272"></script>
 </body>
 </html>

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