New map! "Amazon River" 🏞️ (#2798)

## Description:

We didn't have a river map and we didn't have a map with a crazy size.
So I made a "Amazon River" map with a crazy size.
280 x 5536!
21 nations based on real locations.
Should be interesting gameplay because you don't have many attack
options, your only escape is the river.
The land tiles size is similar to the achiran and iceland map.

<img width="2442" height="147" alt="Screenshot 2026-01-06 150831"
src="https://github.com/user-attachments/assets/91c4142d-c1e3-4aee-ac49-529b8d9f60c4"
/>

<img width="2324" height="139" alt="Screenshot 2026-01-06 150957"
src="https://github.com/user-attachments/assets/5e049ae5-f32a-495f-afde-9e20257b3676"
/>

Because the map is so wide, it looked really ugly stretched in the
thumbnails. So I added some CSS which removes the thumbnail stretching
of the Amazon River map. We can also use this logic for other thumbnails
which shouldn't get stretched.

In `Maps.ts`, `PublicLobby.ts` and `GameInfoModal.ts`.

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

@@ -1,7 +1,7 @@
 import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { GameEndInfo } from "../core/Schemas";
-import { GameMapType } from "../core/game/Game";
+import { GameMapType, hasUnusualThumbnailSize } from "../core/game/Game";
 import { fetchGameById } from "./Api";
 import { terrainMapFileLoader } from "./TerrainMapFileLoader";
 import { UsernameInput } from "./UsernameInput";
@@ -105,6 +105,7 @@ export class GameInfoModal extends LitElement {
     if (!info) {
       return html``;
     }
+    const isUnusualThumbnailSize = hasUnusualThumbnailSize(info.config.gameMap);
     return html`
       <div
         class="h-37.5 flex relative justify-between rounded-xl bg-blue-600 items-center"
@@ -112,7 +113,9 @@ export class GameInfoModal extends LitElement {
         ${this.mapImage
           ? html`<img
               src="${this.mapImage}"
-              class="absolute place-self-start col-span-full row-span-full h-full rounded-xl mask-[linear-gradient(to_left,transparent,#fff)]"
+              class="absolute place-self-start col-span-full row-span-full h-full rounded-xl mask-[linear-gradient(to_left,transparent,#fff)] ${isUnusualThumbnailSize
+                ? "object-cover object-center"
+                : ""}"
             />`
           : html`<div
               class="place-self-start col-span-full row-span-full h-full rounded-xl bg-gray-300"

src/client/PublicLobby.ts

@@ -1,10 +1,11 @@
-import { LitElement, html } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { renderDuration, translateText } from "../client/Utils";
 import {
   Duos,
   GameMapType,
   GameMode,
+  hasUnusualThumbnailSize,
   HumansVsNations,
   Quads,
   Trios,
@@ -114,6 +115,9 @@ export class PublicLobby extends LitElement {
     }
 
     const mapImageSrc = this.mapImages.get(lobby.gameID);
+    const isUnusualThumbnailSize = hasUnusualThumbnailSize(
+      lobby.gameConfig.gameMap,
+    );
 
     return html`
       <button
@@ -131,7 +135,9 @@ export class PublicLobby extends LitElement {
           ? html`<img
               src="${mapImageSrc}"
               alt="${lobby.gameConfig.gameMap}"
-              class="place-self-start col-span-full row-span-full h-full -z-10 mask-[linear-gradient(to_left,transparent,#fff)]"
+              class="place-self-start col-span-full row-span-full h-full -z-10 mask-[linear-gradient(to_left,transparent,#fff)] ${isUnusualThumbnailSize
+                ? "object-cover object-center"
+                : ""}"
             />`
           : html`<div
               class="place-self-start col-span-full row-span-full h-full -z-10 bg-gray-300"

src/client/components/Maps.ts

@@ -1,6 +1,10 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { Difficulty, GameMapType } from "../../core/game/Game";
+import {
+  Difficulty,
+  GameMapType,
+  hasUnusualThumbnailSize,
+} from "../../core/game/Game";
 import { terrainMapFileLoader } from "../TerrainMapFileLoader";
 import { translateText } from "../Utils";
 
@@ -48,6 +52,7 @@ export const MapDescription: Record<keyof typeof GameMapType, string> = {
   StraitOfHormuz: "Strait of Hormuz",
   Surrounded: "Surrounded",
   Didier: "Didier",
+  AmazonRiver: "Amazon River",
 };
 
 @customElement("map-display")
@@ -153,6 +158,14 @@ export class MapDisplay extends LitElement {
   }
 
   render() {
+    const mapType = GameMapType[this.mapKey as keyof typeof GameMapType];
+    const isUnusualThumbnailSize = mapType
+      ? hasUnusualThumbnailSize(mapType)
+      : false;
+    const objectFitStyle = isUnusualThumbnailSize
+      ? "object-fit: cover; object-position: center;"
+      : "";
+
     return html`
       <div class="option-card ${this.selected ? "selected" : ""}">
         ${this.isLoading
@@ -164,6 +177,7 @@ export class MapDisplay extends LitElement {
                 src="${this.mapWebpPath}"
                 alt="${this.mapKey}"
                 class="option-image"
+                style="${objectFitStyle}"
               />`
             : html`<div class="option-image">Error</div>`}
         ${this.showMedals