diff --git a/src/mobile-hud.js b/src/mobile-hud.js
index f1b60ab..9dce501 100644
--- a/src/mobile-hud.js
+++ b/src/mobile-hud.js
@@ -2,7 +2,7 @@ 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 cannonActionSrc from './assets/controller/cannon-action.js';
+import cannonRoundelSrc from './assets/controller/cannon-roundel.js';
 import helmActionSrc from './assets/controller/helm-action.js';
 
 const isDesktopPointer = window.matchMedia('(hover: hover) and (pointer: fine)');
@@ -217,46 +217,44 @@ if (!isDesktopPointer.matches) {
 
       .steam-cannon-port,
       .steam-cannon-starboard {
-        right: -1%;
-        width: 45%;
-        aspect-ratio: 359 / 165;
-        overflow: hidden;
+        right: 3%;
+        width: min(22vw, 104px);
+        aspect-ratio: 1;
+        overflow: visible;
       }
 
       .steam-cannon-port {
-        bottom: max(clamp(88px, 11.8vh, 108px), calc(env(safe-area-inset-bottom) + 86px));
+        bottom: max(116px, calc(env(safe-area-inset-bottom) + 112px));
       }
 
       .steam-cannon-starboard {
-        bottom: max(2px, env(safe-area-inset-bottom));
+        bottom: max(8px, env(safe-area-inset-bottom));
       }
 
+      .steam-cannon-port > img,
       .steam-cannon-starboard > img {
-        transform: scaleX(-1);
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
       }
 
       .steam-action-label {
         position: absolute;
-        left: 62%;
-        top: 43%;
-        transform: translate(-50%, -50%);
-        width: 58%;
+        left: 50%;
+        bottom: 7%;
+        transform: translateX(-50%);
+        min-width: 48%;
+        padding: 2px 7px;
+        border: 1px solid rgba(232, 184, 91, .55);
+        border-radius: 999px;
+        background: rgba(8, 25, 31, .82);
         text-align: center;
         color: #ffe5a0;
-        font-size: clamp(10px, 3vw, 14px);
-        letter-spacing: .08em;
-      }
-
-      .steam-action-sub {
-        position: absolute;
-        left: 62%;
-        top: 62%;
-        transform: translate(-50%, -50%);
-        width: 58%;
-        text-align: center;
-        color: #ceb47b;
-        font-size: clamp(6px, 1.65vw, 8px);
-        letter-spacing: .06em;
+        font-size: clamp(8px, 2.3vw, 11px);
+        line-height: 1.1;
+        letter-spacing: .1em;
+        white-space: nowrap;
+        box-shadow: 0 1px 4px rgba(0,0,0,.5);
       }
 
       .steam-status {
@@ -328,19 +326,20 @@ if (!isDesktopPointer.matches) {
       #mobile-controls.controller-active .mobile-control.port,
       #mobile-controls.controller-active .mobile-control.starboard {
         left: auto;
-        right: 0;
-        width: 45%;
-        aspect-ratio: 359 / 165;
+        right: 3%;
+        width: min(22vw, 104px);
+        aspect-ratio: 1;
+        border-radius: 50%;
       }
 
       #mobile-controls.controller-active .mobile-control.port {
         top: auto;
-        bottom: max(clamp(88px, 11.8vh, 108px), calc(env(safe-area-inset-bottom) + 86px));
+        bottom: max(116px, calc(env(safe-area-inset-bottom) + 112px));
       }
 
       #mobile-controls.controller-active .mobile-control.starboard {
         top: auto;
-        bottom: max(2px, env(safe-area-inset-bottom));
+        bottom: max(8px, env(safe-area-inset-bottom));
       }
 
       #mobile-controls.controller-active .mobile-control.restart {
@@ -374,7 +373,12 @@ if (!isDesktopPointer.matches) {
         .steam-cannon-starboard,
         #mobile-controls.controller-active .mobile-control.port,
         #mobile-controls.controller-active .mobile-control.starboard {
-          width: 41%;
+          width: min(20vw, 90px);
+        }
+
+        .steam-cannon-port,
+        #mobile-controls.controller-active .mobile-control.port {
+          bottom: max(106px, calc(env(safe-area-inset-bottom) + 102px));
         }
       }
     `;
@@ -438,14 +442,12 @@ if (!isDesktopPointer.matches) {
     `);
     hud.appendChild(radarPiece);
 
-    addPiece('steam-cannon-port', cannonActionSrc, `
-      <span class="steam-action-label">PORT FIRE</span>
-      <span class="steam-action-sub">BROADSIDE</span>
+    addPiece('steam-cannon-port', cannonRoundelSrc, `
+      <span class="steam-action-label">PORT</span>
     `);
 
-    addPiece('steam-cannon-starboard', cannonActionSrc, `
-      <span class="steam-action-label">STBD FIRE</span>
-      <span class="steam-action-sub">BROADSIDE</span>
+    addPiece('steam-cannon-starboard', cannonRoundelSrc, `
+      <span class="steam-action-label">STBD</span>
     `);
 
     const status = document.createElement('div');