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>

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", () => {

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"
+				fill="var(--color-border)"
-				stroke="currentColor"
+				fillOpacity={0.5}
-				strokeWidth={1.5}
+				stroke="none"
-				strokeLinecap="round"
+				className="absolute inset-0 h-full w-full"
-				strokeLinejoin="round"
-				className="absolute inset-0 h-full w-full opacity-40"
 				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" />

apps/web/src/components/combatant-row.tsx

@@ -536,13 +536,15 @@ export function CombatantRow({
 				</button>
 
 				{/* Initiative */}
-				<InitiativeDisplay
+				<div className="rounded-md bg-muted/30 px-1">
-					initiative={initiative}
+					<InitiativeDisplay
-					combatantId={id}
+						initiative={initiative}
-					dimmed={dimmed}
+						combatantId={id}
-					onSetInitiative={setInitiative}
+						dimmed={dimmed}
-					onRollInitiative={onRollInitiative}
+						onSetInitiative={setInitiative}
-				/>
+						onRollInitiative={onRollInitiative}
+					/>
+				</div>
 
 				{/* AC */}
 				<div className={cn(dimmed && "opacity-50")}>

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">
+				<span className="shrink-0 rounded-md bg-muted px-2 py-0.5 font-semibold text-foreground text-sm">
-					R{encounter.roundNumber}
+					<span className="-mt-[3px] inline-block">
+						R{encounter.roundNumber}
+					</span>
 				</span>
 				{activeCombatant ? (
 					<span className="truncate font-medium">{activeCombatant.name}</span>