From 0036eaf6256679c43c4c40458115ce091f2622ff Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Tue, 22 Sep 2026 16:02:26 -0400
Subject: [PATCH] On a phone, a reveal scrolls to what happened

The result strip comes into view with the last two ledger rows above it,
so the revealed gestures and their outcome are the first thing seen.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 src/lib/components/TurnSummary.svelte | 10 +++++++++-
 src/lib/game/duel.svelte.ts           |  9 +++++++++
 src/routes/+page.svelte               |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/TurnSummary.svelte b/src/lib/components/TurnSummary.svelte
index b4ab4c9..ed8f0b8 100644
--- a/src/lib/components/TurnSummary.svelte
+++ b/src/lib/components/TurnSummary.svelte
@@ -11,7 +11,7 @@
 </script>
 
 {#if summary}
-	<section class="result" aria-label="What the last reveal did">
+	<section class="result" id="turn-result" aria-label="What the last reveal did">
 		<h2>{summary.phase === 'timestop' ? 'In the stopped moment' : `Turn ${summary.turn + 1}`}</h2>
 		<dl>
 			{#each [YOU, FOE] as const as who (who)}
@@ -50,6 +50,7 @@
 
 <style>
 	.result {
+		scroll-margin-top: 0.5rem;
 		margin: 0.5rem 0 0;
 		padding: 0.4rem 0.8rem;
 		background: var(--slate);
@@ -57,6 +58,13 @@
 		font-size: 0.9rem;
 	}
 
+	/* On a phone, leave the last two ledger rows in view above the result. */
+	@media (max-width: 860px) {
+		.result {
+			scroll-margin-top: 9.5rem;
+		}
+	}
+
 	h2 {
 		font-size: 0.8rem;
 		color: var(--bone-faint);
diff --git a/src/lib/game/duel.svelte.ts b/src/lib/game/duel.svelte.ts
index 833d020..32ed704 100644
--- a/src/lib/game/duel.svelte.ts
+++ b/src/lib/game/duel.svelte.ts
@@ -1,5 +1,6 @@
 // Reactive wrapper around the engine for a duel of one person against the bot.
 
+import { tick } from 'svelte';
 import { chooseBotTurn } from './bot';
 import {
 	completableIn,
@@ -618,6 +619,14 @@ export class Duel {
 			if (pinned && this.planned.some((p) => p.hand === h && p.completion.spell.id === pinned)) this.pins[h] = null;
 		}
 		this.resetDrafts();
+		// On a phone the hands sit far below the ledger; bring the result into view.
+		if (this.compact) {
+			void tick().then(() => {
+				const target = document.getElementById(this.state.over ? 'verdict' : 'turn-result');
+				const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+				target?.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
+			});
+		}
 	}
 
 	private resetDrafts(): void {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4550d93..c2aa6b1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -97,7 +97,7 @@
 		<TurnSummary {duel} />
 
 		{#if outcome}
-			<div class="verdict" class:won>
+			<div class="verdict" id="verdict" class:won>
 				<h2>{won ? 'You win.' : outcome.winner === null ? 'A draw.' : 'You lose.'}</h2>
 				<p>{outcome.reason}</p>
 				<button type="button" class="reveal" onclick={() => duel.newGame()}>Duel again</button>