Homepage update & add 3 public lobbies (#3191)

## Description:

Update UI 
check https://homepageupdate.openfront.dev/ 

Improved mobile UI (now fills whole screen for all modals) e.g.:
<img width="432" height="852" alt="image"
src="https://github.com/user-attachments/assets/56de40af-4137-4c57-96b7-3910c9a665b8"
/>

Converted PublicLobby to be "GameModeSelector" to get a nicer 4x4 grid
div, where <GameModeSelector> now handles all the username validation
now (removed redundant code from modals such as matchmaking) also fixed
a bug where someone could have "[XX] X" as thier username (when the
minimum should be 3 chars for their name)

Now visually displays the 3 lobbies ffa/team/special (which is a
continuation from the work done in: #3196 )
<img width="818" height="563" alt="image"
src="https://github.com/user-attachments/assets/a15cd31b-6061-4fb8-83ee-ffde6225cfa7"
/>

updated the background:
<img width="1919" height="807" alt="image"
src="https://github.com/user-attachments/assets/358a7434-51b8-4540-baf2-d1be05053c44"
/>



slightly updated the glassy-look to be less glassy:
<img width="825" height="729" alt="image"
src="https://github.com/user-attachments/assets/1801871b-bbf8-43db-ac53-489337ae80a5"
/>



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

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

w.o.n

src/client/components/BaseModal.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { property, query, state } from "lit/decorators.js";
 
 /**
@@ -10,11 +10,21 @@ import { property, query, state } from "lit/decorators.js";
  * - Automatic listener lifecycle management
  * - Common inline/modal element handling
  * - Shared open/close logic with hooks for custom behavior
+ * - Standardized loading spinner UI
+ * - Consistent modal container styling
  */
 export abstract class BaseModal extends LitElement {
   @state() protected isModalOpen = false;
   @property({ type: Boolean }) inline = false;
 
+  /**
+   * Standard modal container class string.
+   * Provides consistent dark glassmorphic styling across all modals.
+   * No rounding on mobile for full-screen appearance.
+   */
+  protected readonly modalContainerClass =
+    "h-full flex flex-col overflow-hidden bg-black/70 backdrop-blur-xl lg:rounded-2xl lg:border border-white/10";
+
   @query("o-modal") protected modalEl?: HTMLElement & {
     open: () => void;
     close: () => void;
@@ -121,4 +131,43 @@ export abstract class BaseModal extends LitElement {
       this.modalEl?.close();
     }
   }
+
+  /**
+   * Renders a standardized loading spinner with optional custom message.
+   * Use this for consistent loading states across all modals.
+   *
+   * @param message - Optional loading message text. Defaults to no message.
+   * @param spinnerColor - Optional spinner color. Defaults to 'blue'.
+   * @returns TemplateResult of the loading UI
+   */
+  protected renderLoadingSpinner(
+    message?: string,
+    spinnerColor: "blue" | "green" | "yellow" | "white" = "blue",
+  ): TemplateResult {
+    const colorClasses = {
+      blue: "border-blue-500/30 border-t-blue-500",
+      green: "border-green-500/30 border-t-green-500",
+      yellow: "border-yellow-500/30 border-t-yellow-500",
+      white: "border-white/20 border-t-white",
+    };
+
+    return html`
+      <div
+        class="flex flex-col items-center justify-center p-12 text-white h-full min-h-[400px]"
+      >
+        <div
+          class="w-12 h-12 border-4 ${colorClasses[
+            spinnerColor
+          ]} rounded-full animate-spin mb-4"
+        ></div>
+        ${message
+          ? html`<p
+              class="text-white/60 font-medium tracking-wide animate-pulse"
+            >
+              ${message}
+            </p>`
+          : ""}
+      </div>
+    `;
+  }
 }