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/Roster.svelte

@@ -26,7 +26,7 @@
 	}
 </script>
 
-<section class="roster" aria-label="The other wizards">
+<section class="roster" id="roster" aria-label="The other wizards">
 	<h2>At the table</h2>
 	<ul>
 		{#each duel.others as id (id)}
@@ -53,6 +53,7 @@
 
 <style>
 	.roster {
+		scroll-margin-top: 0.5rem;
 		padding: 0.75rem 0 0.4rem;
 		border-bottom: 1px solid var(--rule);
 	}