The door out takes the corner, and the blood steps aside for it

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

index.html

@@ -83,12 +83,20 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
           font: 400 10px Silkscreen, monospace; color: #6b7688; }
   /* THE DOOR OUT (Oliver: every tennis screen lacked an exit — force-closing the app was the only
      way back to the menu). A quiet chip during play; tapping it freezes the world and asks. */
-  /* below the BLOOD panel's strip (top ~30 logical px on the right in the splatter modes), so the
-     door never sits on the pips — one position, one meaning, every mode */
-  #quit { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 40px); right: 8px; z-index: 5; }
-  #quit button { width: 34px; height: 34px; background: rgba(14,23,20,0.72); border: 2px solid var(--line);
-                 color: var(--dim); font: 400 15px Silkscreen, monospace; cursor: pointer;
-                 -webkit-tap-highlight-color: transparent; }
+  /* THE CORNER IS THE DOOR. It used to hang a row below, under the BLOOD strip, which is where a
+     thumb never looks for an exit — the BLOOD panel steps aside for it instead (drawBlood in
+     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; }
+  #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);
+                 /* a plain X, not ✕: Silkscreen has no U+2715, so the dingbat fell back to the
+                    system font and drew a smooth glyph inside a pixel HUD */
+                 color: var(--cream); font: 700 14px Silkscreen, monospace; line-height: 1;
+                 cursor: pointer; -webkit-tap-highlight-color: transparent; }
+  #quit button:active { background: var(--red); border-color: var(--bad); color: #f2ead6; }
   #qAsk { position: fixed; inset: 0; z-index: 6; background: rgba(0,0,0,0.55);
           display: flex; align-items: center; justify-content: center; }
   #quit[hidden], #qAsk[hidden] { display: none; }
@@ -454,7 +462,7 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
 <canvas id="c" width="480" height="270"></canvas>
 <div id="safe"></div>
 <div id="hint">move: WASD/arrows &nbsp;·&nbsp; serve/swing: SPACE &nbsp;·&nbsp; aim: hold a direction while swinging &nbsp;·&nbsp; T: tuning panel</div>
-<div id="quit" hidden><button id="qChip">&#10005;</button></div>
+<div id="quit" hidden><button id="qChip">X</button></div>
 <div id="qAsk" hidden>
   <div class="qBox">
     <p>LEAVE THE MATCH?</p>
@@ -645,6 +653,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
     </div>
   </div>
 </div>
-<script type="module" src="src/main.js?v=269"></script>
+<script type="module" src="src/main.js?v=271"></script>
 </body>
 </html>

src/render.js

@@ -1095,7 +1095,11 @@ function drawBlood() {
   if (G.mode !== 'splatter' || !G.hpMax) return;
   const n = G.hpMax, hp = Math.max(0, Math.min(n, G.hp));
   const r = 2.6, gap = n > 6 ? 7 : 9, pw = (n - 1) * gap + r * 2;
-  const w = Math.max(46, pw + 10), h = 24, x = W - 6 - w, y = 6;
+  // The quit chip owns the corner (index.html #quit), so the pips move in to clear it: 32 CSS px of
+  // button plus its 6px margin plus 6px of air, converted to logical px, because the two live in
+  // different coordinate systems and only the CSS one is fixed.
+  const chip = Math.round(44 * W / (cv.clientWidth || innerWidth));
+  const w = Math.max(46, pw + 10), h = 24, x = W - 6 - chip - w, y = 6;
   panel(x + 0.5, y + 0.5, w - 1, h - 1, 3, 'rgba(26,6,8,0.82)', 'rgba(163,74,66,0.45)');
   ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
   ctx.font = F(7, 0); ctx.fillStyle = hp <= 2 ? UI.bad : '#89a08f';