Add Render Debug GUI toggle to settings modal

The lil-gui render-settings panel (createDebugGui) has been an orphaned
export since the WebGL renderer landed — no caller, no hotkey, no menu
entry. Wire it to a button in SettingsModal that toggles the panel on
and off, and group it with the existing Performance Overlay toggle
under a new "Development Only" section above the Exit Game block.

resources/lang/en.json

@@ -824,6 +824,9 @@
     "go_to_player_desc": "Toggle zooming in on the player in the beginning of a game.",
     "performance_overlay_label": "Performance Overlay",
     "performance_overlay_desc": "Toggle the performance overlay. When enabled, the performance overlay will be displayed. Press shift-D during game to toggle.",
+    "render_debug_gui": "Render Debug GUI",
+    "render_debug_gui_desc": "Toggle the renderer tuning panel",
+    "development_only": "Development Only",
     "easter_writing_speed_label": "Writing Speed Multiplier",
     "easter_writing_speed_desc": "Adjust how fast you pretend to code (x1–x100)",
     "easter_bug_count_label": "Bug Count",

src/client/ClientGameRunner.ts

@@ -47,6 +47,7 @@ import {
   MouseMoveEvent,
   MouseUpEvent,
   TickMetricsEvent,
+  ToggleRenderDebugGuiEvent,
 } from "./InputHandler";
 import { endGame, startGame, startTime } from "./LocalPersistantStats";
 import { terrainMapFileLoader } from "./TerrainMapFileLoader";
@@ -66,7 +67,7 @@ import {
 import { createCanvas } from "./Utils";
 import { WebGLFrameBuilder } from "./WebGLFrameBuilder";
 import { createRenderer, GameRenderer } from "./hud/GameRenderer";
-import { GameView as WebGLGameView } from "./render/gl";
+import { createDebugGui, GameView as WebGLGameView } from "./render/gl";
 import { ALL_UNIT_TYPES, UnitState } from "./render/types";
 import { SoundManager } from "./sound/SoundManager";
 
@@ -478,6 +479,17 @@ async function createClientGame(
       (e) => view.setShowPatterns((e as CustomEvent<string>).detail === "true"),
     );
 
+    let debugGui: ReturnType<typeof createDebugGui> | null = null;
+    eventBus.on(ToggleRenderDebugGuiEvent, () => {
+      if (debugGui === null) {
+        debugGui = createDebugGui(view.getSettings());
+        debugGui.open();
+      } else {
+        debugGui.destroy();
+        debugGui = null;
+      }
+    });
+
     const gameRenderer = createRenderer(
       inputOverlay,
       gameView,

src/client/InputHandler.ts

@@ -84,6 +84,8 @@ export class CloseViewEvent implements GameEvent {}
 
 export class RefreshGraphicsEvent implements GameEvent {}
 
+export class ToggleRenderDebugGuiEvent implements GameEvent {}
+
 export class TogglePerformanceOverlayEvent implements GameEvent {}
 
 export class ToggleStructureEvent implements GameEvent {

src/client/hud/layers/SettingsModal.ts

@@ -6,7 +6,11 @@ import { assetUrl } from "../../../core/AssetUrls";
 import { EventBus } from "../../../core/EventBus";
 import { UserSettings } from "../../../core/game/UserSettings";
 import { Controller } from "../../Controller";
-import { AlternateViewEvent, RefreshGraphicsEvent } from "../../InputHandler";
+import {
+  AlternateViewEvent,
+  RefreshGraphicsEvent,
+  ToggleRenderDebugGuiEvent,
+} from "../../InputHandler";
 import { translateText } from "../../Utils";
 import {
   SetBackgroundMusicVolumeEvent,
@@ -174,6 +178,11 @@ export class SettingsModal extends LitElement implements Controller {
     this.requestUpdate();
   }
 
+  private onRenderDebugGuiButtonClick() {
+    this.eventBus.emit(new ToggleRenderDebugGuiEvent());
+    this.closeModal();
+  }
+
   private onExitButtonClick() {
     // redirect to the home page
     window.location.href = "/";
@@ -501,30 +510,58 @@ export class SettingsModal extends LitElement implements Controller {
               </div>
             </button>
 
-            <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
-              @click="${this.onTogglePerformanceOverlayButtonClick}"
-            >
-              <img
-                src=${settingsIcon}
-                alt="performanceIcon"
-                width="20"
-                height="20"
-              />
-              <div class="flex-1">
-                <div class="font-medium">
-                  ${translateText("user_setting.performance_overlay_label")}
+            <div class="border-t border-slate-600 pt-3 mt-4">
+              <div
+                class="px-3 py-1 text-xs font-semibold text-slate-400 uppercase tracking-wider"
+              >
+                ${translateText("user_setting.development_only")}
+              </div>
+
+              <button
+                class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
+                @click="${this.onTogglePerformanceOverlayButtonClick}"
+              >
+                <img
+                  src=${settingsIcon}
+                  alt="performanceIcon"
+                  width="20"
+                  height="20"
+                />
+                <div class="flex-1">
+                  <div class="font-medium">
+                    ${translateText("user_setting.performance_overlay_label")}
+                  </div>
+                  <div class="text-sm text-slate-400">
+                    ${translateText("user_setting.performance_overlay_desc")}
+                  </div>
                 </div>
                 <div class="text-sm text-slate-400">
-                  ${translateText("user_setting.performance_overlay_desc")}
+                  ${this.userSettings.performanceOverlay()
+                    ? translateText("user_setting.on")
+                    : translateText("user_setting.off")}
                 </div>
-              </div>
-              <div class="text-sm text-slate-400">
-                ${this.userSettings.performanceOverlay()
-                  ? translateText("user_setting.on")
-                  : translateText("user_setting.off")}
-              </div>
-            </button>
+              </button>
+
+              <button
+                class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
+                @click="${this.onRenderDebugGuiButtonClick}"
+              >
+                <img
+                  src=${settingsIcon}
+                  alt="renderDebugGui"
+                  width="20"
+                  height="20"
+                />
+                <div class="flex-1">
+                  <div class="font-medium">
+                    ${translateText("user_setting.render_debug_gui")}
+                  </div>
+                  <div class="text-sm text-slate-400">
+                    ${translateText("user_setting.render_debug_gui_desc")}
+                  </div>
+                </div>
+              </button>
+            </div>
 
             <div class="border-t border-slate-600 pt-3 mt-4">
               <button