Phone fixes at a crowded table: focus scroll in viewport coordinates, a wrapping masthead, a slimmer bar

Turning the ledger toward a wizard summed a sticky cell's offset, which
moves with the scroll; it now uses viewport rectangles and the width the
pinned columns cover, so repeated and switched taps land the same. The
masthead's actions wrap instead of running off a phone. The phone bar
names you, the wizard in focus and the count, with the roster a tap away.
The hands row's first cell is pinned with the rest of the turn column.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0141G6xqLeNRYEtviLWSB5Up

src/lib/components/MobileBar.svelte

@@ -4,16 +4,28 @@
 	import { MAX_HP } from '$lib/game/state';
 
 	let { duel }: { duel: Duel } = $props();
+
+	/** Past three wizards the bar names you, the wizard in focus, and the count; the roster is a tap away. */
+	const crowded = $derived(duel.others.length >= 3);
+	const shown = $derived(crowded ? [duel.focus ?? duel.foeId].filter((id) => id !== duel.me) : duel.others);
+
+	function toRoster() {
+		const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		document.getElementById('roster')?.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
+	}
 </script>
 
 {#if !duel.state.over}
 	<div class="bar" class:watching={duel.spectating}>
 		<div class="health" class:many={duel.others.length > 1}>
 			{#if !duel.spectating}<span><em>{duel.you.name}</em> {duel.you.hp}/{MAX_HP}</span>{/if}
-			{#each duel.others as id (id)}
+			{#each shown as id (id)}
 				{@const w = duel.state.wizards[id]}
 				<span class:gone={!w.alive || w.surrendered}><em>{w.name}</em> {w.hp}/{MAX_HP}</span>
 			{/each}
+			{#if crowded}
+				<button type="button" class="count" onclick={toRoster}>{duel.state.seats.length} wizards</button>
+			{/if}
 		</div>
 		{#if duel.spectating}
 			<span class="gallery">the gallery</span>
@@ -88,6 +100,15 @@
 		opacity: 0.6;
 	}
 
+	.count {
+		background: none;
+		border: 0;
+		padding: 0;
+		font: inherit;
+		color: var(--frost);
+		text-decoration: underline dotted;
+	}
+
 	.gestures {
 		display: flex;
 		gap: 0.5rem;