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

@@ -1,6 +1,23 @@
 export function initNavigation() {
+  const closeMobileSidebar = () => {
+    const sidebar = document.getElementById("sidebar-menu");
+    const backdrop = document.getElementById("mobile-menu-backdrop");
+    if (sidebar?.classList.contains("open")) {
+      sidebar.classList.remove("open");
+      backdrop?.classList.remove("open");
+      document.documentElement.classList.remove("overflow-hidden");
+      sidebar.setAttribute("aria-hidden", "true");
+      backdrop?.setAttribute("aria-hidden", "true");
+      const hb = document.getElementById("hamburger-btn");
+      if (hb) hb.setAttribute("aria-expanded", "false");
+    }
+  };
+
   const showPage = (pageId: string) => {
-    (window as any).currentPageId = pageId;
+    window.currentPageId = pageId;
+
+    // Close mobile sidebar if a nav item was clicked
+    closeMobileSidebar();
 
     // Hide only the currently visible modal
     const visibleModal = document.querySelector(".page-content:not(.hidden)");
@@ -106,9 +123,6 @@ export function initNavigation() {
     }
   });
 
-  // Set default page to play if no menu item is active
-  const anyActive = document.querySelector(".nav-menu-item.active");
-  if (!anyActive) {
-    showPage("page-play");
-  }
+  // Ensure Play is the default visible/active page on load.
+  showPage("page-play");
 }