Improve Ingame UI ✨ (#3212)

## Description:

- **Dynamic sidebar offset for top bars** - GameLeftSidebar,
GameRightSidebar, and PlayerInfoOverlay now shift down when SpawnTimer
and/or ImmunityTimer bars are visible (7px per bar). Implemented via
events.
- **Fixed text overflow** in HeadsUpMessage.ts (Random spawn message is
long)
- **Fixed inconsistent text sizing** in EventsDisplay 
- **Alliance icon horizontal** in PlayerInfoOverlay so the size of the
overlay doesn't change if there is an alliance
- **Nation relation coloring** - Nation player names are now colored
based on their relation
- **Background & Blur Unification**
- **Border Radius & Page Edge Gap Standardization**
- **EventsDisplay collapsed button:** Fixed badge hidden / inline-block
CSS conflict (conditional rendering), added gap-2 between text and badge
- **Right panel spacing:** Changed right container from sm:w-1/2 to
sm:flex-1 to fill remaining space
- **Leaderboard**: Rounded grid corners (rounded-lg overflow-hidden),
removed last-row border, added `willUpdate` for auto-refresh on
hide/show click, plus button styled to match toggle buttons
- Other little CSS fixes (margins etc)

Showcase:
(Note the red mexico name on betrayal)


https://github.com/user-attachments/assets/f0ed91de-3a07-4564-a209-3d7723edee55

Two progress bars at the top, mobile UI not cut off:


https://github.com/user-attachments/assets/83f1fd64-ceab-4a74-8d16-6e1eeea1709d

HeadsUpMessage text overflow fixed, SpawnTimer does not cut off the
PlayerInfoOverlay:

<img width="516" height="929" alt="Screenshot 2026-02-14 214410"
src="https://github.com/user-attachments/assets/74f0edea-8c01-4394-a3d0-a3245922e0da"
/>

Previous:

<img width="306" height="118" alt="Screenshot 2026-02-14 213705"
src="https://github.com/user-attachments/assets/a7c7e8f3-f0e8-4213-8a8f-4f3677e9fc98"
/>

Smaller event panel text:

<img width="594" height="975" alt="Screenshot 2026-02-14 215738"
src="https://github.com/user-attachments/assets/33e80570-9260-40b0-b810-c71eda4861fc"
/>

## 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/graphics/layers/AttacksDisplay.ts

@@ -221,7 +221,7 @@ export class AttacksDisplay extends LitElement implements Layer {
     return this.incomingAttacks.map(
       (attack) => html`
         <div
-          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded px-1.5 py-0.5 overflow-hidden"
+          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs min-[1200px]:rounded-lg sm:rounded-r-lg px-1.5 py-0.5 overflow-hidden"
         >
           ${this.renderButton({
             content: html`<img
@@ -232,7 +232,7 @@ export class AttacksDisplay extends LitElement implements Layer {
               <span class="inline-block min-w-[3rem] text-right"
                 >${renderTroops(attack.troops)}</span
               >
-              <span class="truncate"
+              <span class="truncate ml-1"
                 >${(
                   this.game.playerBySmallID(attack.attackerID) as PlayerView
                 )?.name()}</span
@@ -254,7 +254,7 @@ export class AttacksDisplay extends LitElement implements Layer {
                 />`,
                 onClick: () => this.handleRetaliate(attack),
                 className:
-                  "ml-auto inline-flex items-center justify-center cursor-pointer bg-red-900/50 hover:bg-red-800/70 rounded px-1.5 py-1 border border-red-700/50",
+                  "ml-auto inline-flex items-center justify-center cursor-pointer bg-red-900/50 hover:bg-red-800/70 rounded-lg px-1.5 py-1 border border-red-700/50",
                 translate: false,
               })
             : ""}
@@ -269,7 +269,7 @@ export class AttacksDisplay extends LitElement implements Layer {
     return this.outgoingAttacks.map(
       (attack) => html`
         <div
-          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded px-1.5 py-0.5 overflow-hidden"
+          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs min-[1200px]:rounded-lg sm:rounded-r-lg px-1.5 py-0.5 overflow-hidden"
         >
           ${this.renderButton({
             content: html`<img
@@ -280,7 +280,7 @@ export class AttacksDisplay extends LitElement implements Layer {
               <span class="inline-block min-w-[3rem] text-right"
                 >${renderTroops(attack.troops)}</span
               >
-              <span class="truncate"
+              <span class="truncate ml-1"
                 >${(
                   this.game.playerBySmallID(attack.targetID) as PlayerView
                 )?.name()}</span
@@ -311,7 +311,7 @@ export class AttacksDisplay extends LitElement implements Layer {
     return this.outgoingLandAttacks.map(
       (landAttack) => html`
         <div
-          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded px-1.5 py-0.5 overflow-hidden"
+          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs min-[1200px]:rounded-lg sm:rounded-r-lg px-1.5 py-0.5 overflow-hidden"
         >
           ${this.renderButton({
             content: html`<img
@@ -367,14 +367,14 @@ export class AttacksDisplay extends LitElement implements Layer {
     return this.outgoingBoats.map(
       (boat) => html`
         <div
-          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded px-1.5 py-0.5 overflow-hidden"
+          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs min-[1200px]:rounded-lg sm:rounded-r-lg px-1.5 py-0.5 overflow-hidden"
         >
           ${this.renderButton({
             content: html`${this.renderBoatIcon(boat)}
               <span class="inline-block min-w-[3rem] text-right"
                 >${renderTroops(boat.troops())}</span
               >
-              <span class="truncate text-xs"
+              <span class="truncate text-xs ml-1"
                 >${this.getBoatTargetName(boat)}</span
               >`,
             onClick: () => this.eventBus.emit(new GoToUnitEvent(boat)),
@@ -403,14 +403,16 @@ export class AttacksDisplay extends LitElement implements Layer {
     return this.incomingBoats.map(
       (boat) => html`
         <div
-          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs rounded px-1.5 py-0.5 overflow-hidden"
+          class="flex items-center gap-0.5 w-full bg-gray-800/70 backdrop-blur-xs min-[1200px]:rounded-lg sm:rounded-r-lg px-1.5 py-0.5 overflow-hidden"
         >
           ${this.renderButton({
             content: html`${this.renderBoatIcon(boat)}
               <span class="inline-block min-w-[3rem] text-right"
                 >${renderTroops(boat.troops())}</span
               >
-              <span class="truncate text-xs">${boat.owner()?.name()}</span>`,
+              <span class="truncate text-xs ml-1"
+                >${boat.owner()?.name()}</span
+              >`,
             onClick: () => this.eventBus.emit(new GoToUnitEvent(boat)),
             className:
               "text-left text-red-400 inline-flex items-center gap-0.5 lg:gap-1 min-w-0",
@@ -439,7 +441,7 @@ export class AttacksDisplay extends LitElement implements Layer {
 
     return html`
       <div
-        class="w-full mb-1 pointer-events-auto grid grid-cols-2 lg:grid-cols-1 gap-1 text-white text-sm lg:text-base"
+        class="w-full mb-1 mt-1 sm:mt-0 pointer-events-auto grid grid-cols-2 lg:grid-cols-1 gap-1 text-white text-sm lg:text-base"
       >
         ${this.renderOutgoingAttacks()} ${this.renderOutgoingLandAttacks()}
         ${this.renderBoats()} ${this.renderIncomingAttacks()}