diff --git a/src/mobile-hud.js b/src/mobile-hud.js
index cb098c5..9525d79 100644
--- a/src/mobile-hud.js
+++ b/src/mobile-hud.js
@@ -1,9 +1,10 @@
 import Phaser from 'phaser';
-import topHudSrc from './assets/controller/top-hud.js';
 import leftStatusSrc from './assets/controller/left-status.js';
 import rightControlsSrc from './assets/controller/right-controls.js';
-import cannonRoundelBase64 from './assets/controller/cannon-roundel.js';
-import helmSpriteSheetSrc from './assets/controller/helm-action.js';
+
+const topHudSrc = '/assets/controller/top-hud.webp';
+const helmSpriteSheetSrc = '/assets/controller/helm-sheet.webp';
+const cannonRoundelSrc = '/assets/controller/cannon-roundel.jpg';
 
 const isDesktopPointer = window.matchMedia('(hover: hover) and (pointer: fine)');
 
@@ -161,15 +162,24 @@ if (!isDesktopPointer.matches) {
         aspect-ratio: 1;
       }
 
-      .steam-helm-sprite {
+      .steam-helm-frame,
+      .steam-helm-inner {
         position: absolute;
         inset: 0;
         background-repeat: no-repeat;
         background-size: 300% 300%;
-        background-position: 50% 50%;
         pointer-events: none;
       }
 
+      .steam-helm-frame {
+        background-position: 50% 50%;
+      }
+
+      .steam-helm-inner {
+        background-position: 50% 50%;
+        clip-path: circle(36% at 50% 48%);
+      }
+
       .steam-helm-label {
         position: absolute;
         left: 50%;
@@ -392,8 +402,6 @@ if (!isDesktopPointer.matches) {
     hud.id = 'controller-hud';
     root.prepend(hud);
 
-    const cannonBytes = Uint8Array.from(atob(cannonRoundelBase64), (char) => char.charCodeAt(0));
-    const cannonRoundelSrc = URL.createObjectURL(new Blob([cannonBytes], { type: 'image/jpeg' }));
 
     const addPiece = (className, src, inner = '') => {
       const piece = document.createElement('div');
@@ -434,10 +442,15 @@ if (!isDesktopPointer.matches) {
     const radarPiece = document.createElement('div');
     radarPiece.className = 'steam-piece steam-radar-wrap';
 
-    const helmSprite = document.createElement('div');
-    helmSprite.className = 'steam-helm-sprite';
-    helmSprite.style.backgroundImage = `url("${helmSpriteSheetSrc}")`;
-    radarPiece.appendChild(helmSprite);
+    const helmFrame = document.createElement('div');
+    helmFrame.className = 'steam-helm-frame';
+    helmFrame.style.backgroundImage = `url("${helmSpriteSheetSrc}")`;
+    radarPiece.appendChild(helmFrame);
+
+    const helmInner = document.createElement('div');
+    helmInner.className = 'steam-helm-inner';
+    helmInner.style.backgroundImage = `url("${helmSpriteSheetSrc}")`;
+    radarPiece.appendChild(helmInner);
 
     radarPiece.insertAdjacentHTML('beforeend', `
       <div id="steam-radar-contacts">
@@ -470,13 +483,13 @@ if (!isDesktopPointer.matches) {
     // mobile drag control. This keeps the visual frame exactly in sync with
     // movement and avoids a second, jitter-prone pointer-direction calculation.
     const helmKeys = new Set();
-    let helmFrame = '1:1';
+    let activeHelmFrame = '1:1';
 
     const applyHelmFrame = (column, row) => {
       const key = `${column}:${row}`;
-      if (key === helmFrame) return;
-      helmFrame = key;
-      helmSprite.style.backgroundPosition = `${column * 50}% ${row * 50}%`;
+      if (key === activeHelmFrame) return;
+      activeHelmFrame = key;
+      helmInner.style.backgroundPosition = `${column * 50}% ${row * 50}%`;
     };
 
     const updateHelmFromKeys = () => {