update radial menu styling (#3404)

## Description:

Before:

<img width="215" height="239" alt="Screenshot 2026-03-10 at 10 29 12 PM"
src="https://github.com/user-attachments/assets/bb044425-eb2f-427c-afd6-6c9dd5d075aa"
/>

After:

<img width="240" height="207" alt="Screenshot 2026-03-10 at 10 27 33 PM"
src="https://github.com/user-attachments/assets/21ce4c3b-ab24-4af0-b608-6be5603320fb"
/>

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

evan

src/client/graphics/layers/MainRadialMenu.ts

@@ -144,7 +144,7 @@ export class MainRadialMenu extends LitElement implements Layer {
 
     this.radialMenu.setCenterButtonAppearance(
       isFriendlyTarget ? donateTroopIcon : swordIcon,
-      isFriendlyTarget ? "#34D399" : "#2c3e50",
+      isFriendlyTarget ? "#22d3ee" : "#0f2744",
       isFriendlyTarget
         ? this.radialMenu.getDefaultCenterIconSize() * 0.75
         : this.radialMenu.getDefaultCenterIconSize(),

src/client/graphics/layers/RadialMenu.ts

@@ -88,7 +88,7 @@ export class RadialMenu implements Layer {
   private backButtonHoverTimeout: number | null = null;
   private navigationInProgress: boolean = false;
   private originalCenterButtonIcon: string = "";
-  private readonly defaultCenterButtonColor = "#2c3e50";
+  private readonly defaultCenterButtonColor = "#0f2744";
   private centerButtonColor: string;
   private centerButtonIconSize: number;
 
@@ -227,7 +227,7 @@ export class RadialMenu implements Layer {
     this.tooltipElement.className = "radial-tooltip";
     this.tooltipElement.style.position = "absolute";
     this.tooltipElement.style.pointerEvents = "none";
-    this.tooltipElement.style.background = "rgba(0, 0, 0, 0.7)";
+    this.tooltipElement.style.background = "rgba(12, 35, 64, 0.88)";
     this.tooltipElement.style.color = "white";
     this.tooltipElement.style.padding = "6px 10px";
     this.tooltipElement.style.borderRadius = "6px";
@@ -332,8 +332,8 @@ export class RadialMenu implements Layer {
         const disabled = this.params === null || d.data.disabled(this.params);
         const color = disabled
           ? this.config.disabledColor
-          : (resolveColor(d.data, this.params) ?? "#333333");
-        const opacity = disabled ? 0.5 : 0.7;
+          : (resolveColor(d.data, this.params) ?? "#1e3a5f");
+        const opacity = disabled ? 0.4 : 0.82;
 
         if (d.data.id === this.selectedItemId && this.currentLevel > level) {
           return color;
@@ -341,8 +341,7 @@ export class RadialMenu implements Layer {
 
         return d3.color(color)?.copy({ opacity: opacity })?.toString() ?? color;
       })
-      .attr("stroke", "#ffffff")
-      .attr("stroke-width", "2")
+      .attr("stroke", "none")
       .style("cursor", (d) =>
         this.params === null || d.data.disabled(this.params)
           ? "not-allowed"
@@ -353,9 +352,7 @@ export class RadialMenu implements Layer {
       )
       .style(
         "transition",
-        `filter ${this.config.menuTransitionDuration / 2}ms, stroke-width ${
-          this.config.menuTransitionDuration / 2
-        }ms, fill ${this.config.menuTransitionDuration / 2}ms`,
+        `filter ${this.config.menuTransitionDuration / 2}ms, fill ${this.config.menuTransitionDuration / 2}ms`,
       )
       .attr("data-id", (d) => d.data.id);
 
@@ -366,8 +363,8 @@ export class RadialMenu implements Layer {
         const disabled = this.params === null || d.data.disabled(this.params);
         const baseColor = disabled
           ? this.config.disabledColor
-          : (resolveColor(d.data, this.params) ?? "#333333");
-        const opacity = disabled ? 0.5 : 0.7;
+          : (resolveColor(d.data, this.params) ?? "#1e3a5f");
+        const opacity = disabled ? 0.4 : 0.82;
 
         const normalColor =
           d3.color(baseColor)?.copy({ opacity: opacity })?.toString() ??
@@ -419,12 +416,11 @@ export class RadialMenu implements Layer {
         this.currentLevel > 0
       ) {
         path.attr("filter", "url(#glow)");
-        path.attr("stroke-width", "3");
 
         const color =
           this.params === null || d.data.disabled(this.params)
             ? this.config.disabledColor
-            : (resolveColor(d.data, this.params) ?? "#333333");
+            : (resolveColor(d.data, this.params) ?? "#1e3a5f");
         path.attr("fill", color);
       }
     });
@@ -467,7 +463,6 @@ export class RadialMenu implements Layer {
       }
 
       path.attr("filter", "url(#glow)");
-      path.attr("stroke-width", "3");
     };
 
     const onMouseOut = (d: d3.PieArcDatum<MenuElement>, path: any) => {
@@ -487,11 +482,10 @@ export class RadialMenu implements Layer {
       )
         return;
       path.attr("filter", null);
-      path.attr("stroke-width", "2");
       const color = disabled
         ? this.config.disabledColor
         : (resolveColor(d.data, this.params) ?? "#333333");
-      const opacity = disabled ? 0.5 : 0.7;
+      const opacity = disabled ? 0.4 : 0.82;
 
       if (d.data.timerFraction) {
         path.attr("fill", `url(#timer-gradient-${d.data.id})`);
@@ -811,7 +805,6 @@ export class RadialMenu implements Layer {
       const selectedPath = this.menuPaths.get(this.selectedItemId);
       if (selectedPath) {
         selectedPath.attr("filter", null);
-        selectedPath.attr("stroke-width", "2");
       }
     }
     // Use refresh() to update all item appearances consistently
@@ -1127,7 +1120,7 @@ export class RadialMenu implements Layer {
         const color = disabled
           ? this.config.disabledColor
           : (resolveColor(item, this.params) ?? "#333333");
-        const opacity = disabled ? 0.5 : 0.7;
+        const opacity = disabled ? 0.4 : 0.82;
 
         // Update path appearance (skip fill for timer items — gradient handles it)
         if (!item.timerFraction) {

src/client/graphics/layers/RadialMenuElements.ts

@@ -82,32 +82,32 @@ export interface CenterButtonElement {
 }
 
 export const COLORS = {
-  build: "#ebe250",
-  building: "#2c2c2c",
-  boat: "#3f6ab1",
-  ally: "#53ac75",
-  breakAlly: "#c74848",
-  breakAllyNoDebuff: "#d4882b",
-  delete: "#ff0000",
-  info: "#64748B",
-  target: "#ff0000",
-  attack: "#ff0000",
+  build: "#e6c74a",
+  building: "#1e3a5f",
+  boat: "#2a82c9",
+  ally: "#4ade80",
+  breakAlly: "#dc2626",
+  breakAllyNoDebuff: "#d97706",
+  delete: "#ef4444",
+  info: "#475569",
+  target: "#ef4444",
+  attack: "#ef4444",
   infoDetails: "#7f8c8d",
-  infoEmoji: "#f1c40f",
-  trade: "#008080",
-  embargo: "#6600cc",
+  infoEmoji: "#fbbf24",
+  trade: "#0891b2",
+  embargo: "#7c3aed",
   tooltip: {
-    cost: "#ffd700",
-    count: "#aaa",
+    cost: "#f59e0b",
+    count: "#94a3b8",
   },
   chat: {
-    default: "#66c",
-    help: "#4caf50",
-    attack: "#f44336",
-    defend: "#2196f3",
-    greet: "#ff9800",
-    misc: "#9c27b0",
-    warnings: "#e3c532",
+    default: "#6366f1",
+    help: "#22c55e",
+    attack: "#ef4444",
+    defend: "#3b82f6",
+    greet: "#f97316",
+    misc: "#a855f7",
+    warnings: "#fbbf24",
   },
 };
 
@@ -484,7 +484,7 @@ const donateGoldRadialElement: MenuElement = {
     params.game.inSpawnPhase() ||
     !params.playerActions?.interaction?.canDonateGold,
   icon: donateGoldIcon,
-  color: "#EAB308",
+  color: "#f59e0b",
   action: (params: MenuElementParams) => {
     if (!params.selected) return;
     params.playerPanel.openSendGoldModal(