From 7c2b81d4fc5e33497c5306e986c23d8e6d0c6f31 Mon Sep 17 00:00:00 2001
From: Admin <dmparrow@gmail.com>
Date: Sat, 19 Sep 2026 00:12:09 +0000
Subject: [PATCH] Tidy health card text overlays

---
 src/mobile-hud.js     | 31 +++++++++++++++----------------
 tests/wiring.test.mjs | 12 ++++++++++++
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/mobile-hud.js b/src/mobile-hud.js
index 19575c6..4346402 100644
--- a/src/mobile-hud.js
+++ b/src/mobile-hud.js
@@ -117,39 +117,38 @@ if (!isDesktopPointer.matches) {
       .steam-card-value {
         position: absolute;
         z-index: 2;
-        transform: translate(-50%, -50%);
+        transform: translateY(-50%);
         white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         text-align: center;
         pointer-events: none;
+        line-height: 1;
       }
 
       .steam-card-name {
-        top: 28%;
+        top: 31%;
         color: #f6d58e;
-        font-size: clamp(8px, 2.2vw, 11px);
-        letter-spacing: .06em;
-      }
-
-      .steam-player-card .steam-card-name {
-        left: 61%;
-      }
-
-      .steam-enemy-card .steam-card-name {
-        left: 39%;
+        font-size: clamp(8px, 2.05vw, 11px);
+        letter-spacing: .04em;
       }
 
       .steam-card-value {
-        top: 67%;
+        top: 69%;
         color: #fff0bd;
-        font-size: clamp(8px, 2.4vw, 12px);
+        font-size: clamp(8px, 2.25vw, 12px);
       }
 
+      .steam-player-card .steam-card-name,
       .steam-player-card .steam-card-value {
-        left: 61%;
+        left: 29%;
+        right: 9%;
       }
 
+      .steam-enemy-card .steam-card-name,
       .steam-enemy-card .steam-card-value {
-        left: 39%;
+        left: 9%;
+        right: 29%;
       }
 
       .steam-radar-wrap {
diff --git a/tests/wiring.test.mjs b/tests/wiring.test.mjs
index 8644b1f..86085d2 100644
--- a/tests/wiring.test.mjs
+++ b/tests/wiring.test.mjs
@@ -138,6 +138,18 @@ test('player health card uses the fresh high-resolution sprite sheet', async ()
   assert.doesNotMatch(source, /scaleX\(-1\)/);
 });
 
+test('health card text overlays stay inside their plaque and bar bounds', async () => {
+  const source = await read('src/mobile-hud.js');
+
+  assert.match(source, /\.steam-card-name,[\s\S]*?\.steam-card-value \{[\s\S]*?transform: translateY\(-50%\)/);
+  assert.match(source, /overflow: hidden/);
+  assert.match(source, /text-overflow: ellipsis/);
+  assert.match(source, /\.steam-player-card \.steam-card-name,[\s\S]*?\.steam-player-card \.steam-card-value \{[\s\S]*?left: 29%;[\s\S]*?right: 9%/);
+  assert.match(source, /\.steam-enemy-card \.steam-card-name,[\s\S]*?\.steam-enemy-card \.steam-card-value \{[\s\S]*?left: 9%;[\s\S]*?right: 29%/);
+  assert.match(source, /\.steam-card-name \{[\s\S]*?top: 31%/);
+  assert.match(source, /\.steam-card-value \{[\s\S]*?top: 69%/);
+});
+
 test('uploaded top HUD uses its new aspect ratio', async () => {
   const source = await read('src/mobile-hud.js');