Mobile UI polish ✨ (#3401)

## Description:

### Fix attack percentage label causing slider width jitter on mobile by
setting a fixed width on the container


https://github.com/user-attachments/assets/41ea3b98-48fa-49f3-b22e-2a567f208dfb

### Reduce event panel max-height from 30vh to 15vh on mobile

Previous:

<img width="406" height="781" alt="Screenshot 2026-03-10 231050"
src="https://github.com/user-attachments/assets/ea83a75d-a0cb-4ce2-8714-99e822b028e9"
/>

After:

<img width="397" height="781" alt="Screenshot 2026-03-10 231414"
src="https://github.com/user-attachments/assets/153a4291-a3dc-4255-8a19-725bfdf6ff8b"
/>

### Change lobby buttons (Create/Ranked/Join) from `slate-700` to
`slate-600` for better contrast against the background

Previous:

<img width="411" height="387" alt="Screenshot 2026-03-10 232720"
src="https://github.com/user-attachments/assets/1fd8bc7a-dbaa-414a-8e74-a070c66c40c6"
/>

After:

<img width="408" height="495" alt="Screenshot 2026-03-10 232704"
src="https://github.com/user-attachments/assets/e7693a28-6560-4440-8581-91b1fd7a5cf5"
/>

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

FloPinguin

src/client/GameModeSelector.ts

@@ -133,17 +133,17 @@ export class GameModeSelector extends LitElement {
           ${this.renderSmallActionCard(
             translateText("main.create"),
             this.openHostLobby,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
           ${this.renderSmallActionCard(
             translateText("mode_selector.ranked_title"),
             this.openRankedMenu,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
           ${this.renderSmallActionCard(
             translateText("main.join"),
             this.openJoinLobby,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
         </div>
         <!-- Game cards grid -->
@@ -204,17 +204,17 @@ export class GameModeSelector extends LitElement {
           ${this.renderSmallActionCard(
             translateText("main.create"),
             this.openHostLobby,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
           ${this.renderSmallActionCard(
             translateText("mode_selector.ranked_title"),
             this.openRankedMenu,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
           ${this.renderSmallActionCard(
             translateText("main.join"),
             this.openJoinLobby,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
         </div>
       </div>

src/client/graphics/layers/ControlPanel.ts

@@ -348,7 +348,10 @@ export class ControlPanel extends LitElement implements Layer {
           ${this.renderMobileTroopBar()}
         </div>
         <!-- Sword + % label -->
-        <div class="flex flex-col items-center shrink-0 gap-0.5" translate="no">
+        <div
+          class="flex flex-col items-center shrink-0 gap-0.5 w-8"
+          translate="no"
+        >
           <img
             src=${swordIcon}
             alt=""

src/client/graphics/layers/EventsDisplay.ts

@@ -864,7 +864,7 @@ export class EventsDisplay extends LitElement implements Layer {
 
               <!-- Content Area -->
               <div
-                class="bg-gray-800/70 max-h-[30vh] overflow-y-auto w-full h-full min-[1200px]:rounded-b-xl events-container"
+                class="bg-gray-800/70 max-h-[15vh] lg:max-h-[30vh] overflow-y-auto w-full h-full min-[1200px]:rounded-b-xl events-container"
               >
                 <div>
                   <table

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -320,7 +320,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     return html`
       <div class="flex items-start gap-1 lg:gap-2 p-1.5 lg:p-2">
         <!-- Left: Gold & Troop bar -->
-        <div class="flex flex-col gap-1 shrink-0 w-36">
+        <div class="flex flex-col gap-1 shrink-0 w-28 md:w-36">
           <div class="flex items-center gap-1">
             <div
               class="flex flex-1 items-center justify-center p-1 border rounded-md border-yellow-400 font-bold text-yellow-400 text-sm lg:gap-1"
@@ -350,7 +350,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
               >
             </div>
           </div>
-          <div class="w-36" translate="no">
+          <div class="w-28 md:w-36" translate="no">
             ${this.renderTroopBar(totalTroops, attackingTroops, maxTroops)}
           </div>
         </div>