Disable game buttons (clan tag + username) (#4170)

## Description:

disables buttons, instead of emitting a warning 
<img width="1017" height="677" alt="image"
src="https://github.com/user-attachments/assets/7af4e0e1-df22-4cfe-bc8b-6fae5e62f9b6"
/>


<img width="1006" height="668" alt="image"
src="https://github.com/user-attachments/assets/d8e5291c-4ecd-4f8d-8471-e5a547c30eda"
/>


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

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

w.o.n

src/client/GameModeSelector.ts

@@ -34,6 +34,7 @@ const CARD_BG = "bg-surface";
 export class GameModeSelector extends LitElement {
   @state() private lobbies: PublicGames | null = null;
   @state() private mapAspectRatios: Map<GameMapType, number> = new Map();
+  @state() private inputValid: boolean = true;
   private serverTimeOffset: number = 0;
   private defaultLobbyTime: number = 0;
 
@@ -45,28 +46,44 @@ export class GameModeSelector extends LitElement {
     return this;
   }
 
-  /**
-   * Validates username input and shows error message if invalid.
-   * Returns true if valid, false otherwise.
-   */
+  // Silent backstop; the buttons are already disabled while input is invalid.
   private validateUsername(): boolean {
     const usernameInput = document.querySelector(
       "username-input",
     ) as UsernameInput | null;
-    return usernameInput ? usernameInput.validateOrShowError() : true;
+    return usernameInput ? usernameInput.canPlay() : true;
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.lobbySocket.start();
     this.defaultLobbyTime = ClientEnv.gameCreationRate() / 1000;
+    window.addEventListener(
+      "username-validity-change",
+      this.handleValidityChange,
+    );
+    // Pick up the current value in case username-input validated before us.
+    const usernameInput = document.querySelector(
+      "username-input",
+    ) as UsernameInput | null;
+    if (usernameInput) {
+      this.inputValid = usernameInput.canPlay();
+    }
   }
 
   disconnectedCallback() {
     this.stop();
+    window.removeEventListener(
+      "username-validity-change",
+      this.handleValidityChange,
+    );
     super.disconnectedCallback();
   }
 
+  private handleValidityChange = (e: Event) => {
+    this.inputValid = (e as CustomEvent).detail?.isValid ?? true;
+  };
+
   public stop() {
     this.lobbySocket.stop();
   }
@@ -259,7 +276,11 @@ export class GameModeSelector extends LitElement {
     return html`
       <button
         @click=${onClick}
-        class="flex items-center justify-center w-full h-full rounded-lg ${bgClass} transition-all duration-200 text-sm lg:text-base font-medium text-white uppercase tracking-wider text-center"
+        ?disabled=${!this.inputValid}
+        class="flex items-center justify-center w-full h-full rounded-lg ${bgClass} transition-all duration-200 text-sm lg:text-base font-medium text-white uppercase tracking-wider text-center ${!this
+          .inputValid
+          ? "opacity-50 cursor-not-allowed pointer-events-none"
+          : ""}"
       >
         ${title}
       </button>
@@ -305,7 +326,11 @@ export class GameModeSelector extends LitElement {
     return html`
       <button
         @click=${() => this.validateAndJoin(lobby)}
-        class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] bg-surface hover:shadow-[var(--shadow-lobby-card-hover)]"
+        ?disabled=${!this.inputValid}
+        class="group relative w-full h-44 sm:h-full text-white uppercase rounded-2xl transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] bg-surface hover:shadow-[var(--shadow-lobby-card-hover)] ${!this
+          .inputValid
+          ? "opacity-50 cursor-not-allowed pointer-events-none"
+          : ""}"
       >
         <!-- Image clipped separately so overflow-hidden doesn't block absolute children -->
         <div