moved all of the css to global because why not

src/routes/event/[eventId]/+page.svelte

@@ -3,6 +3,30 @@
 	import type { PageProps } from './$types';
 	let { params }: PageProps = $props();
 
+	function ordinal(n: number) {
+		const s = ['th', 'st', 'nd', 'rd'];
+		const v = n % 100;
+		return n + (s[(v - 20) % 10] ?? s[v] ?? s[0]);
+	}
+
+	function marquee(node: HTMLElement) {
+		function measure() {
+			const inner = node.querySelector<HTMLElement>('.marquee-inner');
+			if (!inner) return;
+			const overflow = inner.scrollWidth - node.clientWidth;
+			if (overflow > 2) {
+				node.style.setProperty('--scroll-dist', `-${overflow + 6}px`);
+				inner.classList.add('scrolling');
+			} else {
+				inner.classList.remove('scrolling');
+			}
+		}
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(node);
+		return { destroy: () => ro.disconnect() };
+	}
+
 	let eventId = params.eventId;
 
 	let eventEndpoint: EventSource;
@@ -40,8 +64,45 @@
 		<div class="w-full flex-col px-[5vw] text-center">
 			{console.log(event)}
 			<div class="align-text-middle h-10 w-full bg-red-500">{event.name} - {event.division}</div>
-			{#each event.registeredPlayers as division}
-				<div>{division.name}</div>
+			div
+			{#each event.registeredPlayers as bracket, bi}
+				{#if bi > 0}
+					<div class="bracket-sep" aria-hidden="true"></div>
+				{/if}
+				<div class="bracket-row">
+					<div class="brackets-name flex items-center">
+						<span class="brackets-name-text align-text-middle">{bracket.name}</span>
+						<div class="bracket-vertical-sep"></div>
+					</div>
+					{#each bracket.items as player}
+						<div class="player-box" style="--c:{player.teamColor}">
+							<div class="player-ghost" aria-hidden="true">
+								<svg viewBox="0 0.1 100 0.6" preserveAspectRatio="none" class="ghost-svg">
+									<text
+										x="0"
+										y="0.7"
+										font-size="1"
+										dominant-baseline="auto"
+										textLength="100"
+										lengthAdjust="spacingAndGlyphs"
+										font-family="'Black Ops One',system-ui">{player.firstName}</text
+									>
+								</svg>
+							</div>
+							<div class="player-name-wrap" use:marquee>
+								<span class="marquee-inner">
+									{player.firstName}
+									{player.lastName}
+								</span>
+							</div>
+							{#if player.placement !== 0}
+								<div class="player-placement goldman">{ordinal(player.placement)}</div>
+							{:else}
+								<div class="player-placement-gap"></div>
+							{/if}
+						</div>
+					{/each}
+				</div>
 			{/each}
 		</div>
 	</div>