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/baseComponents/Modal.ts

@@ -67,7 +67,7 @@ export class OModal extends LitElement {
 
     const wrapperClass = this.inline
       ? "relative flex flex-col w-full h-full m-0 max-w-full max-h-none shadow-none"
-      : `relative flex flex-col w-[90%] min-w-[400px] max-w-[900px] m-8 rounded-lg shadow-[0_20px_60px_rgba(0,0,0,0.8)] max-h-[calc(100vh-4rem)] ${
+      : `relative flex flex-col w-full h-full lg:w-[90%] lg:h-auto lg:min-w-[400px] lg:max-w-[900px] lg:m-8 lg:rounded-lg shadow-[0_20px_60px_rgba(0,0,0,0.8)] lg:max-h-[calc(100vh-4rem)] ${
           this.alwaysMaximized ? "h-auto" : ""
         }`;
     const wrapperStyle =
@@ -101,7 +101,7 @@ export class OModal extends LitElement {
                     </div>`
                   : html``}
                 <section
-                  class="relative flex-1 min-h-0 p-[1.4rem] text-white bg-[#23232382] backdrop-blur-md rounded-lg overflow-y-auto"
+                  class="relative flex-1 min-h-0 p-0 lg:p-[1.4rem] text-white bg-[#23232382] backdrop-blur-md lg:rounded-lg overflow-y-auto"
                 >
                   <slot></slot>
                 </section>

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

@@ -48,9 +48,9 @@ export class SettingSlider extends LitElement {
 
     return html`
       <div
-        class="flex flex-row items-center justify-between w-full p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all gap-4 ${rainbowClass}"
+        class="flex flex-col sm:flex-row sm:items-center sm:justify-between w-full p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 transition-all gap-3 sm:gap-4 ${rainbowClass}"
       >
-        <div class="flex flex-col flex-1 min-w-0 mr-4">
+        <div class="flex flex-col flex-1 min-w-0 sm:mr-4">
           <label class="text-white font-bold text-base block mb-1"
             >${this.label}</label
           >
@@ -59,21 +59,28 @@ export class SettingSlider extends LitElement {
           </div>
         </div>
 
-        <div class="flex flex-col items-end gap-2 shrink-0 w-[200px]">
-          <span class="text-white font-bold text-sm">${this.value}%</span>
-          <input
-            type="range"
-            class="w-full appearance-none h-2 bg-transparent rounded outline-none 
+        <div
+          class="flex flex-col items-start sm:items-end gap-2 shrink-0 w-full sm:w-[200px]"
+        >
+          <div class="flex items-center gap-2 w-full">
+            <input
+              type="range"
+              class="flex-1 w-auto appearance-none h-2 bg-transparent rounded outline-none 
               [&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded [&::-webkit-slider-runnable-track]:bg-[image:linear-gradient(to_right,#3b82f6_0%,#3b82f6_var(--fill),rgba(255,255,255,0.1)_var(--fill),rgba(255,255,255,0.1)_100%)]
               [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-500 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_rgba(59,130,246,0.2)] [&::-webkit-slider-thumb]:transition-all active:[&::-webkit-slider-thumb]:scale-110 active:[&::-webkit-slider-thumb]:shadow-[0_0_0_6px_rgba(59,130,246,0.3)]
               [&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded [&::-moz-range-track]:bg-white/10
               [&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded [&::-moz-range-progress]:bg-blue-500
               [&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-blue-500 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:shadow-[0_0_0_4px_rgba(59,130,246,0.2)] [&::-moz-range-thumb]:transition-all active:[&::-moz-range-thumb]:scale-110 active:[&::-moz-range-thumb]:shadow-[0_0_0_6px_rgba(59,130,246,0.3)]"
-            min=${this.min}
-            max=${this.max}
-            .value=${String(this.value)}
-            @input=${this.handleInput}
-          />
+              min=${this.min}
+              max=${this.max}
+              .value=${String(this.value)}
+              @input=${this.handleInput}
+            />
+            <span
+              class="text-white font-bold text-sm shrink-0 text-right min-w-[3ch]"
+              >${this.value}%</span
+            >
+          </div>
         </div>
       </div>
     `;

src/client/components/baseComponents/stats/GameList.ts

@@ -72,8 +72,8 @@ export class GameList extends LitElement {
                     >
                       ${translateText("game_list.mode")}:
                       ${game.mode === GameMode.FFA
-                        ? translateText("game_list.mode_ffa")
-                        : html`${translateText("game_list.mode_team")}`}
+                        ? translateText("game_mode.ffa")
+                        : html`${translateText("game_mode.teams")}`}
                     </div>
                   </div>
                 </div>

src/client/components/baseComponents/stats/PlayerStatsTree.ts

@@ -50,8 +50,8 @@ export class PlayerStatsTreeView extends LitElement {
 
   private labelForMode(m: GameMode) {
     return m === GameMode.FFA
-      ? translateText("player_stats_tree.mode_ffa")
-      : translateText("player_stats_tree.mode_team");
+      ? translateText("game_mode.ffa")
+      : translateText("game_mode.teams");
   }
 
   createRenderRoot() {