diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts
index eeee308a2..49622d812 100644
--- a/src/client/FlagInput.ts
+++ b/src/client/FlagInput.ts
@@ -1128,3 +1128,60 @@ export class FlagInput extends LitElement {
     `;
   }
 }
+
+export function renderPlayerFlag(flagCode: string, target: HTMLElement) {
+  const reverseNameMap = Object.fromEntries(
+    Object.entries(LayerShortNames).map(([k, v]) => [v, k]),
+  );
+
+  const reverseColorMap = Object.fromEntries(
+    Object.entries(ColorShortNames).map(([k, v]) => [v, k]),
+  );
+
+  if (!flagCode.startsWith("ctmfg")) return;
+
+  const code = flagCode.replace("ctmfg", "");
+  const layers = code.split("_").map((segment) => {
+    const [shortName, shortColor] = segment.split("-");
+    const name = reverseNameMap[shortName] || shortName;
+    const color = reverseColorMap[shortColor] || shortColor;
+    return { name, color };
+  });
+
+  target.innerHTML = "";
+  target.style.overflow = "hidden";
+  target.style.position = "relative";
+  target.style.aspectRatio = "3/4";
+
+  for (const { name, color } of layers) {
+    const mask = `/flags/custom/${name}.svg`;
+    if (!mask) continue;
+
+    const layer = document.createElement("div");
+    layer.style.position = "absolute";
+    layer.style.top = "0";
+    layer.style.left = "0";
+    layer.style.width = "100%";
+    layer.style.height = "100%";
+
+    const isSpecial = !color.startsWith("#");
+
+    if (isSpecial) {
+      layer.classList.add(`flag-color-${color}`);
+    } else {
+      layer.style.backgroundColor = color;
+    }
+
+    layer.style.maskImage = `url(${mask})`;
+    layer.style.maskRepeat = "no-repeat";
+    layer.style.maskPosition = "center";
+    layer.style.maskSize = "contain";
+
+    layer.style.webkitMaskImage = `url(${mask})`;
+    layer.style.webkitMaskRepeat = "no-repeat";
+    layer.style.webkitMaskPosition = "center";
+    layer.style.webkitMaskSize = "contain";
+
+    target.appendChild(layer);
+  }
+}
diff --git a/src/client/Utils.ts b/src/client/Utils.ts
index 46ee5a2b0..a0d3ff912 100644
--- a/src/client/Utils.ts
+++ b/src/client/Utils.ts
@@ -1,4 +1,3 @@
-import { ColorShortNames, LayerShortNames } from "./FlagInput";
 import { LangSelector } from "./LangSelector";
 
 export function renderTroops(troops: number): string {
@@ -95,60 +94,3 @@ export const translateText = (
 
   return langSelector.translateText(key, params);
 };
-
-export function renderPlayerFlag(flagCode: string, target: HTMLElement) {
-  const reverseNameMap = Object.fromEntries(
-    Object.entries(LayerShortNames).map(([k, v]) => [v, k]),
-  );
-
-  const reverseColorMap = Object.fromEntries(
-    Object.entries(ColorShortNames).map(([k, v]) => [v, k]),
-  );
-
-  if (!flagCode.startsWith("ctmfg")) return;
-
-  const code = flagCode.replace("ctmfg", "");
-  const layers = code.split("_").map((segment) => {
-    const [shortName, shortColor] = segment.split("-");
-    const name = reverseNameMap[shortName] || shortName;
-    const color = reverseColorMap[shortColor] || shortColor;
-    return { name, color };
-  });
-
-  target.innerHTML = "";
-  target.style.overflow = "hidden";
-  target.style.position = "relative";
-  target.style.aspectRatio = "3/4";
-
-  for (const { name, color } of layers) {
-    const mask = `/flags/custom/${name}.svg`;
-    if (!mask) continue;
-
-    const layer = document.createElement("div");
-    layer.style.position = "absolute";
-    layer.style.top = "0";
-    layer.style.left = "0";
-    layer.style.width = "100%";
-    layer.style.height = "100%";
-
-    const isSpecial = !color.startsWith("#");
-
-    if (isSpecial) {
-      layer.classList.add(`flag-color-${color}`);
-    } else {
-      layer.style.backgroundColor = color;
-    }
-
-    layer.style.maskImage = `url(${mask})`;
-    layer.style.maskRepeat = "no-repeat";
-    layer.style.maskPosition = "center";
-    layer.style.maskSize = "contain";
-
-    layer.style.webkitMaskImage = `url(${mask})`;
-    layer.style.webkitMaskRepeat = "no-repeat";
-    layer.style.webkitMaskPosition = "center";
-    layer.style.webkitMaskSize = "contain";
-
-    target.appendChild(layer);
-  }
-}
diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts
index c694b01c8..609818098 100644
--- a/src/client/graphics/layers/NameLayer.ts
+++ b/src/client/graphics/layers/NameLayer.ts
@@ -11,7 +11,8 @@ import { ClientID } from "../../../core/Schemas";
 import { Theme } from "../../../core/configuration/Config";
 import { AllPlayers, Cell, nukeTypes } from "../../../core/game/Game";
 import { GameView, PlayerView } from "../../../core/game/GameView";
-import { createCanvas, renderPlayerFlag, renderTroops } from "../../Utils";
+import { renderPlayerFlag } from "../../FlagInput";
+import { createCanvas, renderTroops } from "../../Utils";
 import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
 
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index 91a8646b6..c579012b9 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -12,8 +12,9 @@ import {
 import { TileRef } from "../../../core/game/GameMap";
 import { GameView, PlayerView, UnitView } from "../../../core/game/GameView";
 import { ClientID } from "../../../core/Schemas";
+import { renderPlayerFlag } from "../../FlagInput";
 import { MouseMoveEvent } from "../../InputHandler";
-import { renderNumber, renderPlayerFlag, renderTroops } from "../../Utils";
+import { renderNumber, renderTroops } from "../../Utils";
 import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";