From b88c57f35016ce53fac55e3b667b9e73fc5ad27d Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Tue, 27 Oct 2026 21:10:13 -0400
Subject: [PATCH] The told game on a phone leaves room beneath the boards for
 the Back and Next bar, measured, plus the screen's safe-area inset; the
 underworld's file letters were under it

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CCLa2PaEeCj8njQZSWGqHx
---
 src/routes/learn/game/+page.svelte | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/routes/learn/game/+page.svelte b/src/routes/learn/game/+page.svelte
index 9a34fc0..19adfb1 100644
--- a/src/routes/learn/game/+page.svelte
+++ b/src/routes/learn/game/+page.svelte
@@ -38,6 +38,8 @@
 	const calm = $derived(reducedMotion());
 	const showCoords = $derived(prefs.coordinates !== false);
 	const marks = Object.keys(CALLOUTS).map(Number).filter((n) => n > 0);
+	/** The height of the Back and Next bar, which on a phone is fixed at the foot of the screen and must leave room beneath the boards. */
+	let barHeight = $state(0);
 
 	/** A piece tapped to read about it and to see where it could go from here, before the game shows what it did. */
 	let inspected = $state<number | null>(null);
@@ -80,7 +82,7 @@
 
 <svelte:window onkeydown={key} />
 
-<main class="reading wide">
+<main class="reading wide" style:--bar="{barHeight}px">
 	<header>
 		<a class="back" href="/">Back to the hall</a> · <a class="back" href="/learn">Learn the pieces</a> · <a class="back" href="/guide">How to play</a> · <a class="back" href="/rules">The rules</a>
 		<h1>A game told</h1>
@@ -104,7 +106,7 @@
 				</ul>
 			{/if}
 			{#if callout}<p class="callout">{callout}</p>{/if}
-			<div class="ways">
+			<div class="ways" bind:clientHeight={barHeight}>
 				<button type="button" class="quiet" disabled={ply === 0} onclick={() => go(ply - 1)}>Back</button>
 				<button type="button" class="commit small" disabled={ply === TOLD_MOVES.length} onclick={() => go(ply + 1)}>Next move</button>
 				{#if ply === TOLD_MOVES.length}<a class="quiet" href="/">Play a drake</a>{/if}
@@ -160,7 +162,7 @@
 			bottom: 0;
 			z-index: 4;
 			margin: 0;
-			padding: 0.55rem var(--gutter);
+			padding: 0.55rem var(--gutter) calc(0.55rem + env(safe-area-inset-bottom, 0px));
 			background: var(--slate-deep);
 			border-top: 1px solid var(--rule);
 		}
@@ -175,7 +177,7 @@
 		}
 
 		main {
-			padding-bottom: 4.5rem;
+			padding-bottom: calc(var(--bar, 6rem) + 1.5rem);
 		}
 	}