Restyle HP display as compact rounded pill

Group current HP, temp HP, and max HP into a single bordered
pill container with a subtle slash separator. Removes the
scattered layout with separate elements and gaps. Temp HP +N
only renders when present (no invisible spacer).

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

apps/web/src/__tests__/app-integration.test.tsx

@@ -143,7 +143,6 @@ describe("App integration", () => {
 		await addCombatant(user, "Ogre", { maxHp: "59" });
 
 		// Verify HP displays — currentHp and maxHp both show "59"
-		expect(screen.getByText("/")).toBeInTheDocument();
 		const hpButton = screen.getByRole("button", {
 			name: "Current HP: 59 (healthy)",
 		});