The credibility pass on Hnefatafl, ported to the template: the ops scripts count traffic through one parser, the reports digest is one program, the plaintext-token fallback and its migration are gone, and the stylesheet holds each shared rule once

From the hnefatafl repo's pass of the same day, everything that touched a
kit-shared file. The visitors digest and the nightly rollup share
deploy/traffic.py, installed to /usr/local/lib/<slug>; the rollup writes
the finished-games count it computed behind "and False". pull-reports.sh
and the reports skill both use deploy/report-digest.ts. The seat line
requires its token hash and the start line its rules revision; the
migration for ledgers written before hashing goes with them. The route
table in server/src/index.ts lists every route; Report, ReportLine and
Tally are declared once in view.ts for both sides; exports nobody
imported are exports no more.

In the client: .small, the × that dismisses, and the frame of the
reading pages are in app.css once; the preferences panel shares the
report slip's modal shape; the room store gains seatEmpty and
seatUnheld, and the lobby and the join page read those instead of
three spellings of their own. The room's moved and awaiting fields
stay: the demo board reads them, and simultaneous rounds are the
contract.

The deploy README no longer describes a browser-only game; the visitors
skill no longer names a /play route; the reports skill's replay call
carries the room's options. The Slack channel id is passed in the
environment rather than filled in as a placeholder.

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

template/src/lib/components/Preferences.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	// The preferences panel: every declared setting, kit and game, as a
-	// control. Opened from the masthead; closes with its button or Escape.
+	// control. Opened from the masthead; closes with its button, a click
+	// outside it, or Escape.
 	import { PREFERENCES, prefs, setPref } from '$lib/prefs.svelte';
 
 	let { open = $bindable(false) }: { open?: boolean } = $props();
@@ -13,29 +14,30 @@
 <svelte:window onkeydown={onKey} />
 
 {#if open}
-	<div class="scrim" role="presentation" onclick={() => (open = false)}></div>
-	<div class="panel" role="dialog" aria-modal="true" aria-labelledby="prefs-title">
-		<h2 id="prefs-title">Preferences</h2>
-		<p class="muted small">Kept in this browser, and nowhere else.</p>
-		{#each PREFERENCES as p (p.key)}
-			<div class="pref">
-				{#if p.kind === 'toggle'}
-					<label class="row">
-						<input type="checkbox" checked={prefs[p.key] === true} onchange={(e) => setPref(p.key, e.currentTarget.checked)} />
-						<span>{p.label}</span>
-					</label>
-				{:else}
-					<label class="row">
-						<span>{p.label}</span>
-						<select value={prefs[p.key]} onchange={(e) => setPref(p.key, e.currentTarget.value)}>
-							{#each p.choices ?? [] as c (c.value)}<option value={c.value}>{c.label}</option>{/each}
-						</select>
-					</label>
-				{/if}
-				{#if p.note}<p class="muted small note">{p.note}</p>{/if}
-			</div>
-		{/each}
-		<button type="button" class="quiet" onclick={() => (open = false)}>Done</button>
+	<div class="scrim" role="presentation" onclick={(ev) => ev.target === ev.currentTarget && (open = false)}>
+		<div class="panel" role="dialog" aria-modal="true" aria-labelledby="prefs-title">
+			<h2 id="prefs-title">Preferences</h2>
+			<p class="muted small">Kept in this browser, and nowhere else.</p>
+			{#each PREFERENCES as p (p.key)}
+				<div class="pref">
+					{#if p.kind === 'toggle'}
+						<label class="row">
+							<input type="checkbox" checked={prefs[p.key] === true} onchange={(e) => setPref(p.key, e.currentTarget.checked)} />
+							<span>{p.label}</span>
+						</label>
+					{:else}
+						<label class="row">
+							<span>{p.label}</span>
+							<select value={prefs[p.key]} onchange={(e) => setPref(p.key, e.currentTarget.value)}>
+								{#each p.choices ?? [] as c (c.value)}<option value={c.value}>{c.label}</option>{/each}
+							</select>
+						</label>
+					{/if}
+					{#if p.note}<p class="muted small note">{p.note}</p>{/if}
+				</div>
+			{/each}
+			<button type="button" class="quiet" onclick={() => (open = false)}>Done</button>
+		</div>
 	</div>
 {/if}
 
@@ -43,22 +45,20 @@
 	.scrim {
 		position: fixed;
 		inset: 0;
-		background: rgba(0, 0, 0, 0.45);
 		z-index: 20;
+		background: rgba(0, 0, 0, 0.55);
+		display: grid;
+		place-items: center;
+		padding: 16px;
 	}
 
 	.panel {
-		position: fixed;
-		z-index: 21;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		width: min(92vw, 26rem);
-		max-height: 90vh;
+		width: min(100%, 26rem);
+		max-height: 100%;
 		overflow: auto;
 		background: var(--slate);
 		border: 1px solid var(--rule-strong);
-		border-radius: 8px;
+		border-radius: 6px;
 		padding: 1.2rem 1.4rem 1.4rem;
 	}
 
@@ -87,10 +87,6 @@
 		margin-top: 0.3rem;
 	}
 
-	.small {
-		font-size: 0.85rem;
-	}
-
 	.quiet {
 		margin-top: 0.8rem;
 	}