From a4285fc4159b1f66ef0c861345e90bbed6713778 Mon Sep 17 00:00:00 2001
From: Lukas <lukas.richter@maibornwolff.de>
Date: Mon, 23 Mar 2026 14:23:22 +0100
Subject: [PATCH] Polish stat containers and optical alignment

Refine AC shield to use filled shape with border color instead of
stroke outline. Add subtle muted background to initiative container.
Apply optical vertical centering to round badge text (-3px) and
AC shield number (-2px). Unify round badge corners to rounded-md.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../__tests__/turn-navigation.test.tsx           |  3 ++-
 apps/web/src/components/ac-shield.tsx            | 10 ++++------
 apps/web/src/components/combatant-row.tsx        | 16 +++++++++-------
 apps/web/src/components/turn-navigation.tsx      |  6 ++++--
 4 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/__tests__/turn-navigation.test.tsx b/apps/web/src/components/__tests__/turn-navigation.test.tsx
index 52fd548..16a8720 100644
--- a/apps/web/src/components/__tests__/turn-navigation.test.tsx
+++ b/apps/web/src/components/__tests__/turn-navigation.test.tsx
@@ -94,7 +94,8 @@ describe("TurnNavigation", () => {
 			renderNav();
 			const badge = screen.getByText("R1");
 			const name = screen.getByText("Goblin");
-			expect(badge.parentElement).toBe(name.parentElement);
+			// badge text is inside inner span > outer span, name is a direct child
+			expect(badge.closest(".flex")).toBe(name.parentElement);
 		});
 
 		it("updates the round badge when round changes", () => {
diff --git a/apps/web/src/components/ac-shield.tsx b/apps/web/src/components/ac-shield.tsx
index 2b81b24..725afef 100644
--- a/apps/web/src/components/ac-shield.tsx
+++ b/apps/web/src/components/ac-shield.tsx
@@ -19,12 +19,10 @@ export function AcShield({ value, onClick, className }: AcShieldProps) {
 		>
 			<svg
 				viewBox="0 0 28 32"
-				fill="none"
-				stroke="currentColor"
-				strokeWidth={1.5}
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				className="absolute inset-0 h-full w-full opacity-40"
+				fill="var(--color-border)"
+				fillOpacity={0.5}
+				stroke="none"
+				className="absolute inset-0 h-full w-full"
 				aria-hidden="true"
 			>
 				<path d="M14 1.5 L2.5 6.5 L2.5 15 Q2.5 25 14 30.5 Q25.5 25 25.5 15 L25.5 6.5 Z" />
diff --git a/apps/web/src/components/combatant-row.tsx b/apps/web/src/components/combatant-row.tsx
index 8380868..1331529 100644
--- a/apps/web/src/components/combatant-row.tsx
+++ b/apps/web/src/components/combatant-row.tsx
@@ -536,13 +536,15 @@ export function CombatantRow({
 				</button>
 
 				{/* Initiative */}
-				<InitiativeDisplay
-					initiative={initiative}
-					combatantId={id}
-					dimmed={dimmed}
-					onSetInitiative={setInitiative}
-					onRollInitiative={onRollInitiative}
-				/>
+				<div className="rounded-md bg-muted/30 px-1">
+					<InitiativeDisplay
+						initiative={initiative}
+						combatantId={id}
+						dimmed={dimmed}
+						onSetInitiative={setInitiative}
+						onRollInitiative={onRollInitiative}
+					/>
+				</div>
 
 				{/* AC */}
 				<div className={cn(dimmed && "opacity-50")}>
diff --git a/apps/web/src/components/turn-navigation.tsx b/apps/web/src/components/turn-navigation.tsx
index a14dc7c..ec544b1 100644
--- a/apps/web/src/components/turn-navigation.tsx
+++ b/apps/web/src/components/turn-navigation.tsx
@@ -25,8 +25,10 @@ export function TurnNavigation() {
 			</Button>
 
 			<div className="flex min-w-0 flex-1 items-center justify-center gap-2 text-sm">
-				<span className="shrink-0 rounded-full bg-muted px-2 py-0.5 font-semibold text-foreground text-sm">
-					R{encounter.roundNumber}
+				<span className="shrink-0 rounded-md bg-muted px-2 py-0.5 font-semibold text-foreground text-sm">
+					<span className="-mt-[3px] inline-block">
+						R{encounter.roundNumber}
+					</span>
 				</span>
 				{activeCombatant ? (
 					<span className="truncate font-medium">{activeCombatant.name}</span>