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/SettingToggle.ts

@@ -0,0 +1,47 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("setting-toggle")
+export class SettingToggle extends LitElement {
+  @property() label = "Setting";
+  @property() description = "";
+  @property() id = "";
+  @property({ type: Boolean, reflect: true }) checked = false;
+  @property({ type: Boolean }) easter = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  private handleChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.checked = input.checked;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { checked: this.checked },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div class="setting-item vertical${this.easter ? " easter-egg" : ""}">
+        <div class="toggle-row">
+          <label class="setting-label" for=${this.id}>${this.label}</label>
+          <label class="switch">
+            <input
+              type="checkbox"
+              id=${this.id}
+              ?checked=${this.checked}
+              @change=${this.handleChange}
+            />
+            <span class="slider-round"></span>
+          </label>
+        </div>
+        <div class="setting-description">${this.description}</div>
+      </div>
+    `;
+  }
+}