Phase 28 (Steps 7+8): header unread badge + push/init wiring

Step 7 — header view-menu badge.

`view-menu.svelte` reads `mailStore.unreadCount` and renders an
inline pill next to the "diplomatic mail" entry whenever the
counter is non-zero. The badge styling matches the per-row dot in
`thread-list.svelte` so the two surfaces feel consistent.

Step 8 — push event handler + MailStore init in the in-game layout.

`routes/games/[id]/+layout.svelte`:

- registers a `diplomail.message.received` handler alongside the
  existing `game.turn.ready` / `game.paused` ones, parses the
  signed payload, calls `mailStore.applyPushEvent` to refresh the
  inbox for the matching game, and raises a toast with a "view"
  deep-link that navigates to `/games/:id/mail`;
- adds `mailStore.init({ client, cache, gameId })` to the boot
  `Promise.all` so the inbox + sent lists are warm by the time the
  view mounts, and the badge counter is populated before any user
  interaction;
- disposes the new subscription in the `onDestroy` block so a game
  switch does not leak handlers across navigations.

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

ui/frontend/src/lib/header/view-menu.svelte

@@ -15,10 +15,13 @@ polishes microcopy.
 	import { onMount } from "svelte";
 	import { goto } from "$app/navigation";
 	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
+	import { mailStore } from "$lib/mail-store.svelte";
 
 	type Props = { gameId: string };
 	let { gameId }: Props = $props();
 
+	const mailUnread = $derived(mailStore.unreadCount);
+
 	let open = $state(false);
 	let rootEl: HTMLDivElement | null = $state(null);
 
@@ -122,9 +125,15 @@ polishes microcopy.
 				type="button"
 				role="menuitem"
 				data-testid="view-menu-item-mail"
+				class="with-badge"
 				onclick={() => go(`/games/${gameId}/mail`)}
 			>
-				{i18n.t("game.view.mail")}
+				<span>{i18n.t("game.view.mail")}</span>
+				{#if mailUnread > 0}
+					<span class="badge" data-testid="view-menu-item-mail-badge">
+						{i18n.t("game.view.mail.badge", { count: String(mailUnread) })}
+					</span>
+				{/if}
 			</button>
 			<button
 				type="button"
@@ -200,6 +209,21 @@ polishes microcopy.
 		border: 0;
 		cursor: pointer;
 	}
+	.surface > button.with-badge {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+	.surface > button.with-badge .badge {
+		min-width: 1.5rem;
+		padding: 0 0.4rem;
+		text-align: center;
+		font-size: 0.75rem;
+		border-radius: 999px;
+		background: #2a4d7d;
+		color: #fff;
+	}
 	.surface > button:hover,
 	.surface > details > summary:hover {
 		background: #1c2238;