The game kit: the shared infrastructure of Wiz-War and Waving Hands as a template

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

template/src/routes/rules/+page.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	// The rules page: the game's own text, structured for reading mid-game.
+	// Keep the original rules text verbatim in docs/ and render from it
+	// where you can, so the page and the engine follow one source.
+</script>
+
+<svelte:head>
+	<title>__NAME__: the rules</title>
+</svelte:head>
+
+<main class="rules">
+	<header>
+		<a class="back" href="/">Back to the hall</a> · <a class="back" href="/guide">How to play</a>
+		<h1>The rules</h1>
+		<p class="lede">One paragraph on where these rules come from and which edition or text this page follows.</p>
+	</header>
+
+	<section id="turn">
+		<h2>A turn</h2>
+		<p>What each player does on a turn, in order, in short paragraphs. Put the thing a player checks mid-game first.</p>
+	</section>
+
+	<section id="winning">
+		<h2>Winning</h2>
+		<p>How the game ends and who wins, including draws.</p>
+	</section>
+
+	<section id="source">
+		<h2>The original text</h2>
+		<p>The full source text, in collapsible sections, so a rules question can be settled by the words the engine follows.</p>
+	</section>
+
+	<p class="word">If this page reads a rule differently from the original text, that is a bug: <a href="mailto:eric@ericwagoner.com">send word</a>.</p>
+</main>
+
+<style>
+	.rules {
+		max-width: 46rem;
+		margin: 0 auto;
+		padding: 1.5rem var(--gutter) 4rem;
+	}
+
+	a {
+		color: var(--frost);
+	}
+
+	.back {
+		font-size: 0.95rem;
+	}
+
+	h1 {
+		font-size: 2.4rem;
+		font-weight: 300;
+		margin: 0.5rem 0 0.3rem;
+	}
+
+	.lede {
+		color: var(--bone-dim);
+		max-width: 40em;
+	}
+
+	section {
+		padding: 1.25rem 0 0.5rem;
+		border-top: 1px solid var(--rule);
+		margin-top: 1rem;
+	}
+
+	h2 {
+		font-size: 1.5rem;
+		margin-bottom: 0.7rem;
+	}
+
+	.word {
+		margin-top: 2rem;
+		color: var(--bone-faint);
+		font-size: 0.9rem;
+	}
+</style>