feat(highlight): replace the small-player highlight toggle with a strength slider (#4588)

## Description:

Replaces the "Highlight small players" on/off toggle with a **0-500%
Strength slider** controlling the glow's **width** (0 = off, 100% = the
previous default).

- `UserSettings`: `highlightSmallPlayers()`/toggle →
`highlightGlowStrength()`/set, float-backed, clamped to [0, 5].
- `SmallPlayerGlowPass` takes the strength via a setter (pushed by
`ClientGameRunner` on the settings-changed event), so it stays a pure
consumer and the slider still updates live while the settings modal has
the sim paused. Width = a non-linear blur-iteration count; intensity
compensated so wider stays about as bright.
- `MapRenderer` persists the strength across a WebGL context restore.
- `SettingsModal`: the toggle row becomes a range input.

Behavior note: with the toggle gone the glow **defaults ON at 100%**
(old toggle defaulted OFF); can default to 0 (opt-in) if preferred.

## 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

src/client/hud/layers/SettingsModal.ts

@@ -135,11 +135,6 @@ export class SettingsModal extends LitElement implements Controller {
     this.requestUpdate();
   }
 
-  private onToggleHighlightSmallPlayersButtonClick() {
-    this.userSettings.toggleHighlightSmallPlayers();
-    this.requestUpdate();
-  }
-
   private onToggleAlertFrameButtonClick() {
     this.userSettings.toggleAlertFrame();
     this.requestUpdate();
@@ -210,6 +205,12 @@ export class SettingsModal extends LitElement implements Controller {
     this.requestUpdate();
   }
 
+  private onHighlightGlowStrengthChange(event: Event) {
+    const strength = parseFloat((event.target as HTMLInputElement).value) / 100;
+    this.userSettings.setHighlightGlowStrength(strength);
+    this.requestUpdate();
+  }
+
   render() {
     if (!this.isVisible) {
       return null;
@@ -356,30 +357,35 @@ export class SettingsModal extends LitElement implements Controller {
               </div>
             </button>
 
-            <button
+            <div
               class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
-              @click="${this.onToggleHighlightSmallPlayersButtonClick}"
             >
               <img
                 src=${highlightIcon}
-                alt="highlightSmallPlayers"
+                alt="highlightGlowStrength"
                 width="20"
                 height="20"
               />
               <div class="flex-1">
                 <div class="font-medium">
-                  ${translateText("user_setting.highlight_small_players_label")}
+                  ${translateText("user_setting.highlight_glow_strength_label")}
                 </div>
                 <div class="text-sm text-slate-400">
                   ${translateText("user_setting.highlight_small_players_desc")}
                 </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="500"
+                  .value=${this.userSettings.highlightGlowStrength() * 100}
+                  @input=${this.onHighlightGlowStrengthChange}
+                  class="w-full border border-slate-500 rounded-lg"
+                />
               </div>
               <div class="text-sm text-slate-400">
-                ${this.userSettings.highlightSmallPlayers()
-                  ? translateText("user_setting.on")
-                  : translateText("user_setting.off")}
+                ${Math.round(this.userSettings.highlightGlowStrength() * 100)}%
               </div>
-            </button>
+            </div>
 
             <button
               class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"