feat: redesign match play and add broadcast tooling

src/lib/components/broadcast/Panel.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/** The glassy card most overlay components sit on. */
+	const {
+		accent,
+		children,
+		class: className = '',
+		edge = 'none'
+	}: {
+		accent: string;
+		children: Snippet;
+		class?: string;
+		edge?: 'top' | 'bottom' | 'left' | 'none';
+	} = $props();
+</script>
+
+<div
+	class="relative size-full overflow-hidden border border-white/10 bg-zinc-950/80 backdrop-blur-md {className}"
+	style="border-radius:var(--radius)"
+>
+	{#if edge !== 'none'}
+		<div
+			class="absolute {edge === 'top'
+				? 'inset-x-0 top-0 h-1'
+				: edge === 'bottom'
+					? 'inset-x-0 bottom-0 h-1'
+					: 'inset-y-0 left-0 w-1'}"
+			style="background:{accent}"
+		></div>
+	{/if}
+	{@render children()}
+</div>