Little UI change: Difficulty -> Nation difficulty 👨‍💻 (#2762)

## Description:

- Renamed "Difficulty" -> "Nation difficulty" to make clear that the
"difficulty" only changes the nations
- If nations are disabled, the difficulty gets blurred now. And a
"not-allowed" cursor is shown on hover.

<img width="819" height="572" alt="Screenshot 2026-01-01 225108"
src="https://github.com/user-attachments/assets/365d0c9c-5983-44bd-887c-4ed2b8c08fd6"
/>

- Also did a small CSS fix to allow word breaks

Before:

<img width="134" height="76" alt="Screenshot 2026-01-01 231332"
src="https://github.com/user-attachments/assets/caf56bab-77e8-4453-800d-aece0840f6ad"
/>

After:

<img width="130" height="97" alt="Screenshot 2026-01-01 231306"
src="https://github.com/user-attachments/assets/bd9e0c1d-4ed7-4416-a292-ef1c7d240752"
/>


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

@@ -244,10 +244,14 @@ export class HostLobbyModal extends LitElement {
                     <div
                       class="option-card ${this.selectedDifficulty === value
                         ? "selected"
-                        : ""}"
-                      @click=${() => this.handleDifficultySelection(value)}
+                        : ""} ${this.disableNations ? "disabled" : ""}"
+                      aria-disabled="${this.disableNations}"
+                      @click=${() =>
+                        !this.disableNations &&
+                        this.handleDifficultySelection(value)}
                     >
                       <difficulty-display
+                        class="${this.disableNations ? "disabled-parent" : ""}"
                         .difficultyKey=${key}
                       ></difficulty-display>
                       <p class="option-card-title">

src/client/SinglePlayerModal.ts

@@ -147,10 +147,14 @@ export class SinglePlayerModal extends LitElement {
                     <div
                       class="option-card ${this.selectedDifficulty === value
                         ? "selected"
-                        : ""}"
-                      @click=${() => this.handleDifficultySelection(value)}
+                        : ""} ${this.disableNations ? "disabled" : ""}"
+                      aria-disabled="${this.disableNations}"
+                      @click=${() =>
+                        !this.disableNations &&
+                        this.handleDifficultySelection(value)}
                     >
                       <difficulty-display
+                        class="${this.disableNations ? "disabled-parent" : ""}"
                         .difficultyKey=${key}
                       ></difficulty-display>
                       <p class="option-card-title">

src/client/components/Difficulties.ts

@@ -38,6 +38,12 @@ export class DifficultyDisplay extends LitElement {
       filter: drop-shadow(0 0 6px rgba(255, 56, 56, 0.6));
       transform: translateY(-2px);
     }
+
+    :host(.disabled-parent) .difficulty-skull.active,
+    :host(.disabled-parent:hover) .difficulty-skull.active {
+      filter: drop-shadow(0 0 4px rgba(255, 56, 56, 0.4));
+      transform: translateY(-1px);
+    }
   `;
 
   private getDifficultyIcon(difficultyKey: string) {

src/client/styles.css

@@ -91,7 +91,7 @@
   transition: all 0.2s ease-in-out;
 }
 
-.option-card:hover {
+.option-card:hover:not(.disabled) {
   transform: translateY(-2px);
   border-color: rgba(255, 255, 255, 0.3);
   background: rgba(40, 40, 40, 0.95);
@@ -102,11 +102,18 @@
   background: rgba(74, 158, 255, 0.1);
 }
 
+.option-card.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
 .option-card-title {
   font-size: 14px;
   color: #aaa;
   text-align: center;
   margin: 0 0 4px 0;
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 .option-image {