Added User Settings Modal (#379)

## Description:

This PR adds a **User Settings** modal accessible from the main UI.

Currently available settings include:
- Toggle for Dark Mode
- Writing Speed Multiplier (slider)
- Bug Count (number input)
-  Troop and Worker Ratio (slider)
-  Left Click to Open Menu
-  Emoji toggle

Settings are saved via `localStorage` and persist across sessions.
There's also a hidden Easter Egg...

https://discord.com/channels/1284581928254701718/1286741605310533653/1355900228712009908
<img width="787" alt="スクリーンショット 2025-03-31 8 40 08"
src="https://github.com/user-attachments/assets/a9943834-cf40-4fa6-b828-06a8476172da"
/>

Fixes #482 

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

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

<DISCORD USERNAME>
aotumuri

src/client/components/baseComponents/setting/SettingNumber.ts

@@ -0,0 +1,52 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("setting-number")
+export class SettingNumber extends LitElement {
+  @property() label = "Setting";
+  @property() description = "";
+  @property({ type: Number }) value = 0;
+  @property({ type: Number }) min = 0;
+  @property({ type: Number }) max = 100;
+  @property({ type: Boolean }) easter = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  private handleInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const newValue = Number(input.value);
+    this.value = newValue;
+
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: newValue },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div class="setting-item${this.easter ? " easter-egg" : ""}">
+        <div class="setting-label-group">
+          <label class="setting-label" for="setting-number-input"
+            >${this.label}</label
+          >
+          <div class="setting-description">${this.description}</div>
+        </div>
+        <input
+          type="number"
+          id="setting-number-input"
+          class="setting-input number"
+          .value=${String(this.value ?? 0)}
+          min=${this.min}
+          max=${this.max}
+          @input=${this.handleInput}
+        />
+      </div>
+    `;
+  }
+}