feat: redesign match play and add broadcast tooling

src/lib/components/broadcast/Winner.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { scale } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
+	import { SIDE_COLORS, initials } from '$lib/components/match/theme';
+	import type { OverlayProps } from './context';
+
+	const { data, props, h, accent }: OverlayProps = $props();
+	const view = $derived(data.view);
+	const winner = $derived(view?.sides.find((side) => side.id === view.winner) ?? null);
+	const loser = $derived(view?.sides.find((side) => side.id !== view?.winner) ?? null);
+</script>
+
+{#if view && winner && loser}
+	{@const colors = SIDE_COLORS[winner.color]}
+	{@const avatar = winner.avatarUrl ?? (winner.isPersonal ? winner.players[0]?.avatarUrl : null)}
+	<div class="flex size-full flex-col items-center justify-center gap-4 text-center">
+		<div class="text-2xl font-black tracking-[0.5em]" style="color:{accent}">
+			{props.headline || 'WINNER'}
+		</div>
+		{#key winner.id}
+			<div
+				in:scale={{ start: 0.4, duration: 1200, easing: elasticOut }}
+				class="flex items-center gap-8"
+			>
+				{#if avatar}
+					<img
+						src={avatar}
+						alt=""
+						class="rounded-3xl object-cover ring-8"
+						style="width:{h * 0.4}px;height:{h *
+							0.4}px;--tw-ring-color:{colors.ring};box-shadow:0 0 80px {colors.solid}"
+					/>
+				{:else}
+					<div
+						class="grid place-items-center rounded-3xl font-black"
+						style="width:{h * 0.4}px;height:{h *
+							0.4}px;background:{colors.soft};color:{colors.text};font-size:{h * 0.15}px"
+					>
+						{initials(winner.name)}
+					</div>
+				{/if}
+				<div
+					class="font-black tracking-tight"
+					style="font-size:{Math.min(
+						140,
+						h * 0.28
+					)}px;line-height:1;color:{colors.text};text-shadow:0 0 50px {colors.solid}"
+				>
+					{winner.name}
+				</div>
+			</div>
+		{/key}
+		<div class="text-4xl font-bold text-zinc-300 tabular-nums">
+			{winner.points} – {loser.points} <span class="text-zinc-500">vs {loser.name}</span>
+		</div>
+	</div>
+{/if}