Display FPS monitor overview (#1573)

## Description:

Display an FPS monitor to track performance on each new feature.
It only appears in the development environment, positioned at the top
center to remain visible—especially on mobile.
The display can be closed via a close button.

I already use it to evaluate my other PR on low end device.

<img width="1126" height="845" alt="image"
src="https://github.com/user-attachments/assets/a7197572-6aea-47df-9dd2-e84947c7aee0"
/>


## 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
- [x] I have read and accepted the CLA aggreement (only required once).

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

devalnor

src/client/UserSettingModal.ts

@@ -176,6 +176,13 @@ export class UserSettingModal extends LitElement {
     console.log("🏳️ Territory Patterns:", enabled ? "ON" : "OFF");
   }
 
+  private togglePerformanceOverlay(e: CustomEvent<{ checked: boolean }>) {
+    const enabled = e.detail?.checked;
+    if (typeof enabled !== "boolean") return;
+
+    this.userSettings.set("settings.performanceOverlay", enabled);
+  }
+
   private handleKeybindChange(
     e: CustomEvent<{ action: string; value: string }>,
   ) {
@@ -315,6 +322,15 @@ export class UserSettingModal extends LitElement {
         @change=${this.toggleTerritoryPatterns}
       ></setting-toggle>
 
+      <!-- 📱 Performance Overlay -->
+      <setting-toggle
+        label="${translateText("user_setting.performance_overlay_label")}"
+        description="${translateText("user_setting.performance_overlay_desc")}"
+        id="performance-overlay-toggle"
+        .checked=${this.userSettings.performanceOverlay()}
+        @change=${this.togglePerformanceOverlay}
+      ></setting-toggle>
+
       <!-- ⚔️ Attack Ratio -->
       <setting-slider
         label="${translateText("user_setting.attack_ratio_label")}"