The masthead, the scrim, the quiet button and the colophon are styled once in app.css instead of pasted into each page and slip with drifting paddings; the style blocks of the play page and the board are indented like the rest of the files; and comments in script and CSS say what the code does or guards, in plain words, where they had been written in the game's own voice

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

src/routes/play/+page.svelte

@@ -90,116 +90,37 @@
 </footer>
 
 <style>
-	.masthead {
-			display: flex;
-			align-items: flex-start;
-			justify-content: space-between;
-			gap: 1rem;
-			padding: 1rem var(--gutter) 0.6rem;
-			max-width: 1280px;
-			margin: 0 auto;
-		}
-
-	h1 {
-			font-size: clamp(2rem, 4vw, 2.7rem);
-			font-weight: 300;
-			font-variation-settings: 'opsz' 144;
-			letter-spacing: -0.01em;
-		}
-
-	.standfirst {
-			max-width: 38em;
-			color: var(--bone-dim);
-			margin-top: 0.4rem;
-		}
-
-	.standfirst em {
-			color: var(--bone);
-		}
-
 	.standfirst .link {
-			margin-left: 0.5em;
-			font-size: 0.8rem;
-		}
+		margin-left: 0.5em;
+		font-size: 0.8rem;
+	}
 
 	.rename {
-			display: flex;
-			flex-wrap: wrap;
-			align-items: center;
-			gap: 0.5rem 0.75rem;
-			margin-top: 0.4rem;
-		}
-
-	.rename input {
-			width: 14em;
-		}
-
-	.actions {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.5rem;
-		flex-shrink: 0;
-		min-width: 0;
-		max-width: 100%;
+		align-items: center;
+		gap: 0.5rem 0.75rem;
+		margin-top: 0.4rem;
 	}
 
-	.quiet {
-			background: none;
-			border: 1px solid var(--rule-strong);
-			border-radius: 4px;
-			padding: 0.4rem 0.9rem;
-			white-space: nowrap;
-			color: var(--bone);
-			text-decoration: none;
-			line-height: 1.55;
-		}
-
-	.quiet:hover {
-			border-color: var(--bone);
-		}
+	.rename input {
+		width: 14em;
+	}
 
 	.confirm {
-			max-width: 1280px;
-			margin: 0 auto 0.75rem;
-			padding: 0.75rem var(--gutter);
-		}
+		max-width: 1280px;
+		margin: 0 auto 0.75rem;
+		padding: 0.75rem var(--gutter);
+	}
 
 	.confirm p {
-			color: var(--blood);
-			margin-bottom: 0.5rem;
-		}
+		color: var(--blood);
+		margin-bottom: 0.5rem;
+	}
 
 	.choices {
-			display: flex;
-			gap: 0.6rem;
-			flex-wrap: wrap;
-		}
-
-	.reveal.small {
-			padding: 0.4rem 0.9rem;
-			font-size: 1rem;
-		}
-
-	.colophon {
-			max-width: 1280px;
-			margin: 0 auto;
-			padding: 2rem var(--gutter) 3rem;
-			color: var(--bone-faint);
-			font-size: 0.85rem;
-		}
-
-	.colophon a {
-			color: var(--frost);
-		}
-
-	/* Must match COMPACT_QUERY in duel.svelte.ts. */
-	@media (max-width: 860px) {
-		.colophon {
-					padding-bottom: 6rem;
-				}
-	
-		.masthead {
-					flex-direction: column;
-				}
+		display: flex;
+		gap: 0.6rem;
+		flex-wrap: wrap;
 	}
 </style>