Confirm alliance break ⚠️ (#3033)

## Description:

People accidentally clicked the betray button because it's at the same
position as the ally button.
So let's add a small confirmation step.


https://github.com/user-attachments/assets/754f2d33-7419-42fc-a732-197c3107236e

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

@@ -907,9 +907,12 @@ export class RadialMenu implements Layer {
       .select(".center-button-hitbox")
       .style("cursor", enabled ? "pointer" : "not-allowed");
 
+    // Use default color for back button, otherwise use the current center button color
+    const buttonColor =
+      state === "back" ? this.defaultCenterButtonColor : this.centerButtonColor;
     centerButton
       .select(".center-button-visible")
-      .attr("fill", enabled ? this.centerButtonColor : "#999999");
+      .attr("fill", enabled ? buttonColor : "#999999");
 
     centerButton
       .select(".center-button-icon")

src/client/graphics/layers/RadialMenuElements.ts

@@ -17,6 +17,7 @@ import allianceIcon from "/images/AllianceIconWhite.svg?url";
 import boatIcon from "/images/BoatIconWhite.svg?url";
 import buildIcon from "/images/BuildIconWhite.svg?url";
 import chatIcon from "/images/ChatIconWhite.svg?url";
+import checkmarkIcon from "/images/CheckmarkIconWhite.svg?url";
 import donateGoldIcon from "/images/DonateGoldIconWhite.svg?url";
 import donateTroopIcon from "/images/DonateTroopIconWhite.svg?url";
 import emojiIcon from "/images/EmojiIconWhite.svg?url";
@@ -218,6 +219,15 @@ const allyBreakElement: MenuElement = {
     !!params.playerActions?.interaction?.canBreakAlliance,
   color: COLORS.breakAlly,
   icon: traitorIcon,
+  subMenu: () => [allyBreakCancelElement, allyBreakConfirmElement],
+};
+
+const allyBreakConfirmElement: MenuElement = {
+  id: "ally_break_confirm",
+  name: "confirm",
+  disabled: () => false,
+  color: COLORS.breakAlly,
+  icon: checkmarkIcon,
   action: (params: MenuElementParams) => {
     params.playerActionHandler.handleBreakAlliance(
       params.myPlayer,
@@ -227,6 +237,17 @@ const allyBreakElement: MenuElement = {
   },
 };
 
+const allyBreakCancelElement: MenuElement = {
+  id: "ally_break_cancel",
+  name: "cancel",
+  disabled: () => false,
+  color: COLORS.info,
+  icon: xIcon,
+  action: (params: MenuElementParams) => {
+    params.closeMenu();
+  },
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const allyDonateGoldElement: MenuElement = {
   id: "ally_donate_gold",