diff --git a/src/mobile-hud.js b/src/mobile-hud.js
index a5912eb..5e86af3 100644
--- a/src/mobile-hud.js
+++ b/src/mobile-hud.js
@@ -78,9 +78,8 @@ if (!isDesktopPointer.matches) {
       .steam-player-card,
       .steam-enemy-card {
         top: clamp(80px, 10.3vh, 90px);
-        aspect-ratio: 300 / 108;
+        aspect-ratio: 360 / 130;
         background-repeat: no-repeat;
-        background-size: 400% 300%;
         background-position: 0 0;
         background-color: transparent;
         overflow: visible;
@@ -89,11 +88,40 @@ if (!isDesktopPointer.matches) {
       .steam-player-card {
         left: -1%;
         width: 53%;
+        background-size: 100% 100%;
       }
 
       .steam-enemy-card {
         right: -1%;
         width: 46%;
+        background-size: 400% 300%;
+      }
+
+      .steam-player-health-tint,
+      .steam-player-health-cover {
+        position: absolute;
+        pointer-events: none;
+        border-radius: 999px;
+      }
+
+      .steam-player-health-tint {
+        left: 39.5%;
+        top: 56.5%;
+        width: 49%;
+        height: 19%;
+        transform-origin: left center;
+        background: transparent;
+        mix-blend-mode: color;
+        z-index: 1;
+      }
+
+      .steam-player-health-cover {
+        right: 11.5%;
+        top: 56.5%;
+        width: 0;
+        height: 19%;
+        background: #111416;
+        z-index: 2;
       }
 
       .steam-card-name,
@@ -531,6 +559,8 @@ if (!isDesktopPointer.matches) {
     };
 
     const playerHealthPiece = addHealthPiece('steam-player-card', playerHealthSrc, `
+      <span class="steam-player-health-tint" data-steam="player-health-tint"></span>
+      <span class="steam-player-health-cover" data-steam="player-health-cover"></span>
       <span class="steam-card-name">SPARROW</span>
       <span class="steam-card-value" data-steam="player-hull">100/100</span>
     `);
@@ -692,7 +722,14 @@ if (!isDesktopPointer.matches) {
         fields.range.textContent = Number.isFinite(range) ? `${Math.round(range)}m` : '--';
         fields['player-hull'].textContent = `${playerHull}/100`;
         fields['enemy-hull'].textContent = pirate ? `${enemyHull}/120` : 'CLEAR';
-        setHealthFrame(playerHealthPiece, healthFrame(playerHull, 100));
+        const playerPct = clamp01(playerHull / 100);
+        fields['player-health-cover'].style.width = `${(1 - playerPct) * 49}%`;
+        fields['player-health-tint'].style.transform = `scaleX(${playerPct})`;
+        fields['player-health-tint'].style.background = playerPct > 0.66
+          ? 'transparent'
+          : playerPct > 0.33
+            ? 'rgba(255, 210, 0, .58)'
+            : 'rgba(255, 45, 18, .72)';
         setHealthFrame(enemyHealthPiece, pirate ? healthFrame(enemyHull, 120) : 11);
 
         const statusText = scene.status?.text?.trim?.() || '';