Rearrange homepage game boxes & tune special modifier probabilities 🎲 (#3420)

## Description:

**Homepage layout:** Reorder the game mode cards so FFA is the left
(large) box, Teams is the upper-right box, and Special Games is the
lower-right box. Mobile order updated to match (FFA → Teams → Special).

**Special game modifiers:**
- Adjusted modifier count roll to 40%/40%/15%/5% for 1/2/3/4 modifiers
(was 30%/40%/20%/10%) because having so many special games with 3/4
modifiers while we only have 8 modifiers in the pool is a bit dumb (from
the 8 modifiers two are mutually exclusive and 4 should be quite rare).
- Changed ticket counts in `SPECIAL_MODIFIER_POOL` so
isAlliancesDisabled and isHardNations are more rare.

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

@@ -150,35 +150,30 @@ export class GameModeSelector extends LitElement {
         <div
           class="grid grid-cols-1 sm:grid-cols-[2fr_1fr] gap-4 sm:h-[min(24rem,40vh)]"
         >
-          <!-- Left col: main card (desktop only) -->
-          ${special
+          <!-- Left col: FFA (desktop only) -->
+          ${ffa
             ? html`<div class="hidden sm:block">
-                ${this.renderSpecialLobbyCard(special)}
+                ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
               </div>`
-            : ffa
-              ? html`<div class="hidden sm:block">
-                  ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
-                </div>`
-              : nothing}
+            : nothing}
 
-          <!-- Right col: FFA + teams (desktop only) -->
-          <div class="hidden sm:flex sm:flex-col sm:gap-4">
-            ${special && ffa
-              ? html`<div class="flex-1 min-h-0">
-                  ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
-                </div>`
-              : nothing}
-            ${teams
-              ? html`<div class="flex-1 min-h-0">
-                  ${this.renderLobbyCard(teams, this.getLobbyTitle(teams))}
-                </div>`
-              : nothing}
-          </div>
+          <!-- Right col: Teams + Special (desktop only) -->
+          ${teams || special
+            ? html`<div class="hidden sm:flex sm:flex-col sm:gap-4">
+                ${teams
+                  ? html`<div class="flex-1 min-h-0">
+                      ${this.renderLobbyCard(teams, this.getLobbyTitle(teams))}
+                    </div>`
+                  : nothing}
+                ${special
+                  ? html`<div class="flex-1 min-h-0">
+                      ${this.renderSpecialLobbyCard(special)}
+                    </div>`
+                  : nothing}
+              </div>`
+            : nothing}
 
-          <!-- Mobile: special, ffa, teams inline -->
-          <div class="sm:hidden">
-            ${special ? this.renderSpecialLobbyCard(special) : nothing}
-          </div>
+          <!-- Mobile: ffa, teams, special inline -->
           <div class="sm:hidden">
             ${ffa
               ? this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))
@@ -189,6 +184,9 @@ export class GameModeSelector extends LitElement {
               ? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
               : nothing}
           </div>
+          <div class="sm:hidden">
+            ${special ? this.renderSpecialLobbyCard(special) : nothing}
+          </div>
         </div>
 
         <!-- Solo: full width, desktop only -->