Stabilize turn navigation bar layout with CSS grid

Use a three-column grid (1fr / auto / 1fr) so the active combatant
name stays centered while round badge and difficulty indicator are
anchored in the left and right zones. Prevents layout jumps when
the name changes between turns.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/components/__tests__/turn-navigation.test.tsx

@@ -80,7 +80,7 @@ describe("TurnNavigation", () => {
 			expect(container.textContent).not.toContain("\u2014");
 		});
 
-		it("round badge and combatant name are siblings in the center area", () => {
+		it("round badge is in the left zone and name is in the center zone", () => {
 			renderNav(
 				buildEncounter({
 					combatants: [buildCombatant({ name: "Goblin" })],
@@ -88,7 +88,8 @@ describe("TurnNavigation", () => {
 			);
 			const badge = screen.getByText("R1");
 			const name = screen.getByText("Goblin");
-			expect(badge.closest(".flex")).toBe(name.parentElement);
+			// Badge and name are in separate grid cells to prevent layout shifts
+			expect(badge.parentElement).not.toBe(name.parentElement);
 		});
 	});