From 63edc1326812c8dfbec2bd3abfbd4a6a5f2cdea9 Mon Sep 17 00:00:00 2001
From: Admin <dmparrow@gmail.com>
Date: Sat, 19 Sep 2026 01:05:41 +0000
Subject: [PATCH] Tidy top stats text overlays

---
 src/mobile-hud.js     | 62 +++++++++++++++++++++++++------------------
 tests/wiring.test.mjs | 24 ++++++++---------
 2 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/src/mobile-hud.js b/src/mobile-hud.js
index 4346402..acc0ae1 100644
--- a/src/mobile-hud.js
+++ b/src/mobile-hud.js
@@ -57,22 +57,31 @@ if (!isDesktopPointer.matches) {
 
       .steam-top-value {
         position: absolute;
-        top: 68%;
+        top: 69%;
         transform: translate(-50%, -50%);
-        min-width: 32px;
+        display: grid;
+        place-items: center;
+        min-width: 0;
+        height: 15%;
+        padding: 0 2px;
         text-align: center;
         white-space: nowrap;
-        color: #ffe6a1;
-        font-size: clamp(9px, 2.7vw, 13px);
+        overflow: hidden;
+        color: #f7dfa1;
+        font-size: clamp(9px, 2.45vw, 12px);
+        font-variant-numeric: tabular-nums;
+        font-feature-settings: 'tnum' 1;
+        letter-spacing: .015em;
         line-height: 1;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, .95), 0 0 3px rgba(42, 19, 2, .78);
       }
 
-      .steam-speed { left: 9.3%; }
-      .steam-heading { left: 21.2%; }
-      .steam-wave { left: 50%; top: 72%; }
-      .steam-hostiles { left: 65.4%; }
-      .steam-kills { left: 78.2%; }
-      .steam-range { left: 91.1%; }
+      .steam-speed { left: 9.3%; width: 7%; }
+      .steam-heading { left: 21.2%; width: 12%; }
+      .steam-wave { left: 50%; top: 73%; width: 8%; }
+      .steam-hostiles { left: 65.4%; width: 7%; }
+      .steam-kills { left: 78.2%; width: 7%; }
+      .steam-range { left: 91.1%; width: 12%; }
 
       .steam-player-card,
       .steam-enemy-card {
@@ -117,38 +126,39 @@ if (!isDesktopPointer.matches) {
       .steam-card-value {
         position: absolute;
         z-index: 2;
-        transform: translateY(-50%);
+        transform: translate(-50%, -50%);
         white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
         text-align: center;
         pointer-events: none;
-        line-height: 1;
       }
 
       .steam-card-name {
-        top: 31%;
+        top: 28%;
         color: #f6d58e;
-        font-size: clamp(8px, 2.05vw, 11px);
-        letter-spacing: .04em;
+        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%;
       }
 
       .steam-card-value {
-        top: 69%;
+        top: 67%;
         color: #fff0bd;
-        font-size: clamp(8px, 2.25vw, 12px);
+        font-size: clamp(8px, 2.4vw, 12px);
       }
 
-      .steam-player-card .steam-card-name,
       .steam-player-card .steam-card-value {
-        left: 29%;
-        right: 9%;
+        left: 61%;
       }
 
-      .steam-enemy-card .steam-card-name,
       .steam-enemy-card .steam-card-value {
-        left: 9%;
-        right: 29%;
+        left: 39%;
       }
 
       .steam-radar-wrap {
@@ -437,7 +447,7 @@ if (!isDesktopPointer.matches) {
         }
 
         .steam-top-value {
-          font-size: clamp(10px, 1.35vw, 14px);
+          font-size: clamp(9px, 1.15vw, 13px);
         }
 
         .steam-player-card,
diff --git a/tests/wiring.test.mjs b/tests/wiring.test.mjs
index 86085d2..e41820f 100644
--- a/tests/wiring.test.mjs
+++ b/tests/wiring.test.mjs
@@ -138,18 +138,6 @@ 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');
 
@@ -157,6 +145,18 @@ test('uploaded top HUD uses its new aspect ratio', async () => {
   assert.match(source, /@media \(min-width: 700px\)[\s\S]*?\.steam-top \{[\s\S]*?aspect-ratio: 960 \/ 246/);
 });
 
+test('top HUD stat overlays use bounded tabular value slots', async () => {
+  const source = await read('src/mobile-hud.js');
+
+  assert.match(source, /\.steam-top-value \{[\s\S]*?font-variant-numeric: tabular-nums/);
+  assert.match(source, /\.steam-top-value \{[\s\S]*?font-feature-settings: 'tnum' 1/);
+  assert.match(source, /\.steam-speed \{ left: 9\.3%; width: 7%; \}/);
+  assert.match(source, /\.steam-heading \{ left: 21\.2%; width: 12%; \}/);
+  assert.match(source, /\.steam-range \{ left: 91\.1%; width: 12%; \}/);
+  assert.match(source, /\.steam-wave \{ left: 50%; top: 73%; width: 8%; \}/);
+  assert.match(source, /@media \(min-width: 700px\)[\s\S]*?\.steam-top-value \{[\s\S]*?font-size: clamp\(9px, 1\.15vw, 13px\)/);
+});
+
 
 test('game consumes analog helm vector and keeps broadside cooldowns independent', async () => {
   const source = await read('src/game-v4.js');