Refreshed images for the help modal and other little optimizations ✨ (#2897)

## Description:

1. Changed default difficulty in singleplayer / host lobby to Easy (to
synchronize the settings with the public lobby settings)
2. Switch bot count in singleplayer / host lobby to 100 after selecting
"compact map" (to synchronize the settings with the public lobby
settings) (and back to 400 after deselcting)
3. Some little padding optimizations, for example for the modal title:

<img width="961" height="190" alt="Screenshot 2026-01-14 163837"
src="https://github.com/user-attachments/assets/1ecca3e9-8daf-4bed-a75a-c8e840051601"
/>

4. Refreshed images for the help page:


![infoMenu2](https://github.com/user-attachments/assets/dc0c49c1-b970-47e5-a188-56fefc2e1c90)

![infoMenu2Ally](https://github.com/user-attachments/assets/c6c49a2c-eec6-44ae-877e-b8bdd2ab8caf)

![playerInfoOverlay](https://github.com/user-attachments/assets/1c6c2fc0-ecc5-4946-a7a7-35b90c13790a)

![controlPanel](https://github.com/user-attachments/assets/3d10fbf7-fbff-46af-b02a-9bb390dd9955)

![eventsPanelAttack](https://github.com/user-attachments/assets/04af2c91-6be1-458f-bf13-f4ddaf247d8a)

![eventsPanel](https://github.com/user-attachments/assets/517ad982-b001-4a36-9dfd-84a7ca1e0162)

![leaderboard2](https://github.com/user-attachments/assets/8956d053-682f-4055-9fe9-a36b066b1ce3)


## 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/HelpModal.ts

@@ -110,7 +110,7 @@ export class HelpModal extends BaseModal {
         })}
 
         <div
-          class="prose prose-invert prose-sm max-w-none overflow-y-auto px-6 pb-6 mr-1
+          class="prose prose-invert prose-sm max-w-none overflow-y-auto px-6 py-3 mr-1
             [&_a]:text-blue-400 [&_a:hover]:text-blue-300 transition-colors
             [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mb-4 [&_h1]:text-white [&_h1]:border-b [&_h1]:border-white/10 [&_h1]:pb-2
             [&_h2]:text-xl [&_h2]:font-bold [&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:text-blue-200

src/client/HostLobbyModal.ts

@@ -39,7 +39,7 @@ import randomMap from "/images/RandomMap.webp?url";
 @customElement("host-lobby-modal")
 export class HostLobbyModal extends BaseModal {
   @state() private selectedMap: GameMapType = GameMapType.World;
-  @state() private selectedDifficulty: Difficulty = Difficulty.Medium;
+  @state() private selectedDifficulty: Difficulty = Difficulty.Easy;
   @state() private disableNations = false;
   @state() private gameMode: GameMode = GameMode.FFA;
   @state() private teamCount: TeamCountConfig = 2;
@@ -944,7 +944,7 @@ export class HostLobbyModal extends BaseModal {
 
     // Reset all transient form state to ensure clean slate
     this.selectedMap = GameMapType.World;
-    this.selectedDifficulty = Difficulty.Medium;
+    this.selectedDifficulty = Difficulty.Easy;
     this.disableNations = false;
     this.gameMode = GameMode.FFA;
     this.teamCount = 2;
@@ -1058,6 +1058,11 @@ export class HostLobbyModal extends BaseModal {
 
   private handleCompactMapChange = (val: boolean) => {
     this.compactMap = val;
+    if (val && this.bots === 400) {
+      this.bots = 100;
+    } else if (!val && this.bots === 100) {
+      this.bots = 400;
+    }
     this.putGameConfig();
   };
 

src/client/NewsModal.ts

@@ -28,7 +28,7 @@ export class NewsModal extends BaseModal {
           ariaLabel: translateText("common.back"),
         })}
         <div
-          class="pt-2 prose prose-invert prose-sm max-w-none overflow-y-auto px-6 pb-6 mr-1
+          class="prose prose-invert prose-sm max-w-none overflow-y-auto px-6 py-3 mr-1
             [&_a]:text-blue-400 [&_a:hover]:text-blue-300 transition-colors
             [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mb-4 [&_h1]:text-white [&_h1]:border-b [&_h1]:border-white/10 [&_h1]:pb-2
             [&_h2]:text-xl [&_h2]:font-bold [&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:text-blue-200

src/client/SinglePlayerModal.ts

@@ -36,7 +36,7 @@ import randomMap from "/images/RandomMap.webp?url";
 @customElement("single-player-modal")
 export class SinglePlayerModal extends BaseModal {
   @state() private selectedMap: GameMapType = GameMapType.World;
-  @state() private selectedDifficulty: Difficulty = Difficulty.Medium;
+  @state() private selectedDifficulty: Difficulty = Difficulty.Easy;
   @state() private disableNations: boolean = false;
   @state() private bots: number = 400;
   @state() private infiniteGold: boolean = false;
@@ -509,7 +509,14 @@ export class SinglePlayerModal extends BaseModal {
                 ${this.renderOptionToggle(
                   "single_modal.compact_map",
                   this.compactMap,
-                  (val) => (this.compactMap = val),
+                  (val) => {
+                    this.compactMap = val;
+                    if (val && this.bots === 400) {
+                      this.bots = 100;
+                    } else if (!val && this.bots === 100) {
+                      this.bots = 400;
+                    }
+                  },
                 )}
 
                 <!-- Toggle with input support for Max Timer -->
@@ -693,7 +700,7 @@ export class SinglePlayerModal extends BaseModal {
   protected onClose(): void {
     // Reset all transient form state to ensure clean slate
     this.selectedMap = GameMapType.World;
-    this.selectedDifficulty = Difficulty.Medium;
+    this.selectedDifficulty = Difficulty.Easy;
     this.gameMode = GameMode.FFA;
     this.useRandomMap = false;
     this.disableNations = false;

src/client/StatsModal.ts

@@ -196,7 +196,7 @@ export class StatsModal extends BaseModal {
     const maxGames = Math.max(...clans.map((c) => c.games), 1);
 
     return html`
-      <div class="w-full pt-2">
+      <div class="w-full pt-6">
         <div
           class="overflow-x-auto rounded-xl border border-white/5 bg-black/20"
         >

src/client/UserSettingModal.ts

@@ -430,7 +430,7 @@ export class UserSettingModal extends BaseModal {
         </div>
 
         <div
-          class="pt-2 flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent px-6 pb-6 mr-1"
+          class="pt-6 flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-white/20 scrollbar-track-transparent px-6 pb-6 mr-1"
         >
           <div class="flex flex-col gap-2">${activeContent}</div>
         </div>

src/client/components/baseComponents/Modal.ts

@@ -82,14 +82,14 @@ export class OModal extends LitElement {
                 ${this.inline || this.hideCloseButton
                   ? html``
                   : html`<div
-                      class="absolute top-4 right-4 z-10 text-white cursor-pointer"
+                      class="absolute top-5 right-5 z-10 text-white cursor-pointer"
                       @click=${() => this.close()}
                     >
                       ✕
                     </div>`}
                 ${!this.hideHeader && this.title
                   ? html`<div
-                      class="p-[1.4rem] pb-0 text-2xl font-bold text-white"
+                      class="px-[1.4rem] py-[1rem] pt-0 text-2xl font-bold text-white"
                     >
                       ${this.title}
                     </div>`