Fix cross-browser CSS-mask CORS failures for OpenFrontLogo and SoldierIcon (#3792)

## Description:

Cross-origin CSS-mask icons were failing on Chrome and Safari because
mask: url(...) triggers a CORS-mode fetch (unlike plain <img>), and
stale browser caches without ACAO break per-user. Instead change the
svgs with the appropriate colors so we don't need to mask them

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

src/client/components/DesktopNavBar.ts

@@ -54,16 +54,11 @@ export class DesktopNavBar extends LitElement {
       >
         <div class="flex flex-col items-center justify-center">
           <div class="h-8">
-            <span
-              class="block h-full aspect-[1364/259] bg-malibu-blue"
-              style="-webkit-mask: url(${assetUrl(
-                "images/OpenFrontLogo.svg",
-              )}) no-repeat center / contain; mask: url(${assetUrl(
-                "images/OpenFrontLogo.svg",
-              )}) no-repeat center / contain;"
-              role="img"
-              aria-label="OpenFront"
-            ></span>
+            <img
+              class="block h-full aspect-[1364/259]"
+              src=${assetUrl("images/OpenFrontLogo.svg")}
+              alt="OpenFront"
+            />
           </div>
           <div
             id="game-version"

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -36,6 +36,7 @@ import { Layer } from "./Layer";
 import { CloseRadialMenuEvent } from "./RadialMenu";
 import "./RelationSmiley";
 import { SpawnBarVisibleEvent } from "./SpawnTimer";
+const soldierIconAquarius = assetUrl("images/SoldierIconAquarius.svg");
 const allianceIcon = assetUrl("images/AllianceIcon.svg");
 const warshipIcon = assetUrl("images/BattleshipIconWhite.svg");
 const cityIcon = assetUrl("images/CityIconWhite.svg");
@@ -327,13 +328,14 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
               translate="no"
             >
               <span class="flex items-center gap-px leading-none text-xs"
-                ><span
-                  class="w-2.5 h-2.5 inline-block"
-                  style="background-color: ${attackingTroops > 0
-                    ? "var(--color-aquarius)"
-                    : "rgba(255,255,255,0.4)"}; -webkit-mask: url(${soldierIcon}) no-repeat center / contain; mask: url(${soldierIcon}) no-repeat center / contain;"
-                ></span
-                >↑</span
+                ><img
+                  class="w-2.5 h-2.5 inline-block ${attackingTroops > 0
+                    ? ""
+                    : "brightness-0 invert opacity-40"}"
+                  src=${attackingTroops > 0 ? soldierIconAquarius : soldierIcon}
+                  alt=""
+                  aria-hidden="true"
+                />↑</span
               >
               <span class="tabular-nums leading-none text-sm mt-0.5"
                 >${renderTroops(attackingTroops)}</span