The about panel is a dialog of tabs, as Wiz-War's is, not a wall of text

"About this game — a labor of love" opens a dialog with the game, the
tally, more games and a way to send word each on a tab of its own
(About.svelte, shared through the kit), instead of one long fold at the
foot of the hall. Arrow keys walk the tabs; Escape or a click outside
closes it; a link to #about opens it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

src/lib/components/Hall.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import About from './About.svelte';
 	import { goto } from '$app/navigation';
 	import { loadFamily, type FamilyGame } from '$lib/family';
 	import { allSeats, api, doubtSeat, forgetSeat, rememberSeat, ServerError, trustSeat, type Report, type Tally } from '$lib/game/client';
@@ -13,6 +14,9 @@
 	let seats = $state(allSeats());
 	let games = $state<Record<string, RoomView | null>>({});
 	let aboutOpen = $state(false);
+	$effect(() => {
+		if (location.hash === '#about') aboutOpen = true;
+	});
 	/** The ledgers' tally, fetched when the about panel opens. */
 	let tally = $state<Tally | null>(null);
 	$effect(() => {
@@ -292,16 +296,18 @@
 		</div>
 	{/if}
 
-	<details class="about" id="about" bind:open={aboutOpen}>
-		<summary>about this game</summary>
+	<!-- The about panel, a tab at a time: its sections are written here, in the game's own words. -->
+	{#snippet aboutGame()}
 		<div class="about-body">
 			<p>Waving Hands is Richard Bartle's game from 1977, played with pencil, paper and two hands. It was later known as Spellbinder and Spellcaster, and Andrew Plotkin's <em>Spellcast</em> brought it to university X terminals in 1993, which is where the maker of this page first met it.</p>
 			<p>This version keeps the game as written: all forty spells, the same simultaneous resolution, the same ledger of letters. The rules text it follows is the fanzine transcription, kept in full on the <a href="/rules">rules page</a>. The bot reads your gestures as you would read its; the hand silhouettes on the buttons are adapted from Plotkin's bitmaps, with his notice retained.</p>
 			<p>It is free and keeps no accounts. A duel against the bot lives in your own browser. A duel between people lives on a small server as an append-only ledger of moves, so it can be replayed from its first gesture, and each wizard is shown only what the rules let them see.</p>
-			<h3>Send word</h3>
-			<p>A rule read wrong, a bug, a duel you would like to tell of: write to <a href="mailto:eric@ericwagoner.com">eric@ericwagoner.com</a>, <a href="https://bsky.app/profile/kestrelsnest.social" target="_blank" rel="noreferrer">@kestrelsnest.social</a> on Bluesky, or <a href="https://toots.kestrelsnest.social/@eric" target="_blank" rel="noreferrer">@eric@toots.kestrelsnest.social</a> on Mastodon. The keeper of this hall roosts at <a href="https://kestrelsnest.social" target="_blank" rel="noreferrer">kestrelsnest.social</a>.</p>
+		</div>
+	{/snippet}
+	{#snippet aboutTally()}
+		<div class="about-body">
 			{#if tally}
-				<h3>The tally</h3>
+				
 				<dl class="tally">
 					<dt>{tally.gamesFinished}</dt><dd>{tally.gamesFinished === 1 ? 'duel' : 'duels'} fought to a finish, of {tally.gamesBegun} begun at {tally.tablesOpened} {tally.tablesOpened === 1 ? 'table' : 'tables'}</dd>
 					<dt>{tally.namesSeated}</dt><dd>{tally.namesSeated === 1 ? 'name has' : 'names have'} taken a seat</dd>
@@ -316,8 +322,13 @@
 					{#if tally.firstGameAt}The first duel began {new Date(tally.firstGameAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}.{/if}
 					Names are counted, not people: one wizard under two names is two here. Table time counts only the minutes between reveals, so a duel left open overnight adds nothing for the night.
 				</p>
+			{:else}
+				<p class="muted">Counting…</p>
 			{/if}
-			{#if family.length}
+		</div>
+	{/snippet}
+	{#snippet aboutFamily()}
+		<div class="about-body">{#if family.length}
 				<h3>More games in {#if hall}<a href={hall}>Kestrel's Hall</a>{:else}Kestrel's Hall{/if}</h3>
 				<ul class="family">
 					{#each family as g (g.slug)}
@@ -331,7 +342,13 @@
 			</p>
 			<p class="made">Waving Hands is Richard Bartle's, 1977. This page was made by Eric and a very enthusiastic AI, 2026.</p>
 		</div>
-	</details>
+	{/snippet}
+	{#snippet aboutWord()}
+		<div class="about-body">
+			<p>A rule read wrong, a bug, a duel you would like to tell of: write to <a href="mailto:eric@ericwagoner.com">eric@ericwagoner.com</a>, <a href="https://bsky.app/profile/kestrelsnest.social" target="_blank" rel="noreferrer">@kestrelsnest.social</a> on Bluesky, or <a href="https://toots.kestrelsnest.social/@eric" target="_blank" rel="noreferrer">@eric@toots.kestrelsnest.social</a> on Mastodon. The keeper of this hall roosts at <a href="https://kestrelsnest.social" target="_blank" rel="noreferrer">kestrelsnest.social</a>.</p>
+		</div>
+	{/snippet}
+	<About bind:open={aboutOpen} title="About Waving Hands" tabs={[{ id: 'game', label: 'The game', body: aboutGame }, { id: 'tally', label: 'The tally', body: aboutTally }, { id: 'family', label: 'More games', body: aboutFamily }, { id: 'word', label: 'Send word', body: aboutWord }]} />
 </section>
 
 <style>
@@ -344,14 +361,14 @@
 		padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.6rem) 1.8rem;
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
-		grid-template-areas: 'head' 'play' 'look' 'ledger' 'about';
+		grid-template-areas: 'head' 'play' 'look' 'ledger';
 		gap: 1.2rem 2.2rem;
 	}
 
 	@media (min-width: 901px) {
 		.lid {
 			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-			grid-template-areas: 'head head' 'play look' 'ledger ledger' 'about about';
+			grid-template-areas: 'head head' 'play look' 'ledger ledger';
 		}
 	}
 
@@ -661,18 +678,6 @@
 		color: var(--blood);
 	}
 
-	.about {
-		grid-area: about;
-		border-top: 1px solid var(--rule);
-		padding-top: 0.6rem;
-	}
-
-	.about summary {
-		cursor: pointer;
-		font-style: italic;
-		color: var(--frost);
-	}
-
 	.about-body h3 {
 		font-size: 1rem;
 		font-style: italic;