fix(wasm): enable take-from-foundation in web game client

GameState::new_with_mode defaults take_from_foundation=false (non-
standard; the flag exists so the desktop can offer it as a setting).
The WASM web client has no settings layer, so this flag was never
flipped on — every drag or double-click from a foundation pile was
silently rejected by the rules engine.

Set take_from_foundation=true in both SolitaireGame::new (fresh games)
and SolitaireGame::from_saved (restored games, which may have the old
default serialised).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -355,7 +355,7 @@ Must always be handled explicitly:
 * The gesture/navigation bar at the bottom (≈132px physical on common
   devices) is inside the Bevy viewport; use `SafeAreaInsets.bottom` to
   avoid placing interactive elements in that zone
-* `HUD_BAND_HEIGHT` is 128px on Android (two-row wrap) vs 64px on desktop;
+* `HUD_BAND_HEIGHT` is 112px on Android vs 64px on desktop;
   layout constants are `#[cfg(target_os = "android")]` gated
 * JNI calls must use `attach_current_thread_permanently` — not
   `attach_current_thread` — to avoid detach-on-drop panics

solitaire_engine/src/card_plugin.rs

@@ -1147,11 +1147,13 @@ fn add_android_corner_label(
     let bg_w = font_size * 2.0;
     let bg_h = font_size * 1.25;
 
-    // Solid background that hides the card art's small corner label.
+    // Background covers the PNG's baked-in small corner text (top-left).
+    // Classic PNG cards have a white face, so the background must be white too.
+    // (CARD_FACE_COLOUR is the Terminal theme's dark face colour — wrong here.)
     parent.spawn((
         AndroidCornerBg,
         Sprite {
-            color: CARD_FACE_COLOUR,
+            color: Color::WHITE,
             custom_size: Some(Vec2::new(bg_w, bg_h)),
             ..default()
         },
@@ -1161,10 +1163,40 @@ fn add_android_corner_label(
             0.015,
         ),
     ));
+    // Cover the matching rotated baked-in text at the bottom-right corner.
+    parent.spawn((
+        AndroidCornerBg,
+        Sprite {
+            color: Color::WHITE,
+            custom_size: Some(Vec2::new(bg_w, bg_h)),
+            ..default()
+        },
+        Transform::from_xyz(
+            card_size.x / 2.0 - inset - bg_w / 2.0,
+            -card_size.y / 2.0 + inset + bg_h / 2.0,
+            0.015,
+        ),
+    ));
 
     // Large rank+suit text drawn on top of the background. FiraMono must be
     // wired here explicitly — the suit glyphs (U+2660–U+2666) are not in
     // Bevy's built-in font and render as a coloured rectangle without it.
+    //
+    // Classic PNG cards have a white face: red suits stay the same saturated
+    // red, but black suits must use a dark colour (CARD_FACE_COLOUR ≈ #1a1a1a)
+    // rather than the near-white BLACK_SUIT_COLOUR designed for the dark
+    // Terminal theme background.
+    let text_col = if card.suit.is_red() {
+        if color_blind {
+            RED_SUIT_COLOUR_CBM
+        } else if high_contrast {
+            RED_SUIT_COLOUR_HC
+        } else {
+            RED_SUIT_COLOUR
+        }
+    } else {
+        CARD_FACE_COLOUR
+    };
     let label_text = mobile_label_for(card);
     parent.spawn((
         AndroidCornerLabel(label_text.clone()),
@@ -1175,7 +1207,7 @@ fn add_android_corner_label(
             font_size,
             ..default()
         },
-        TextColor(text_colour(card, color_blind, high_contrast)),
+        TextColor(text_col),
         Anchor::TOP_LEFT,
         Transform::from_xyz(
             -card_size.x / 2.0 + inset,

solitaire_engine/src/game_plugin.rs

@@ -202,6 +202,8 @@ impl Plugin for GamePlugin {
             .add_message::<FoundationCompletedEvent>()
             .add_message::<InfoToastEvent>()
             .add_message::<AppLifecycle>()
+            // add_message is idempotent; SettingsPlugin also registers this.
+            .add_message::<crate::settings_plugin::SettingsChangedEvent>()
             .add_systems(
                 Update,
                 poll_pending_new_game_seed.before(GameMutation),
@@ -228,6 +230,7 @@ impl Plugin for GamePlugin {
             // GameMutation flow.
             .add_systems(Update, spawn_restore_prompt_if_pending)
             .add_systems(Update, handle_restore_prompt.before(GameMutation))
+            .add_systems(Update, sync_settings_to_game.before(GameMutation))
             .init_resource::<AutoSaveTimer>()
             .add_systems(Update, tick_elapsed_time)
             .add_systems(Update, auto_save_game_state)
@@ -235,6 +238,23 @@ impl Plugin for GamePlugin {
     }
 }
 
+/// Forwards `take_from_foundation` from [`SettingsResource`] to the live
+/// [`GameStateResource`] every time [`SettingsChangedEvent`] fires.
+///
+/// This covers two cases that the new-game path misses:
+/// 1. The initial settings load at startup: saves on disk default to `false`
+///    but `Settings` defaults to `true`; the event fires once when the
+///    settings file is first read.
+/// 2. A user toggling the setting mid-session in the Settings panel.
+fn sync_settings_to_game(
+    mut events: MessageReader<crate::settings_plugin::SettingsChangedEvent>,
+    mut game: ResMut<GameStateResource>,
+) {
+    for ev in events.read() {
+        game.0.take_from_foundation = ev.0.take_from_foundation;
+    }
+}
+
 /// Pure, testable helper. Updates `elapsed_seconds` and drains the
 /// fractional accumulator into whole-second ticks. No-op when `is_won`.
 pub fn advance_elapsed(
@@ -614,6 +634,7 @@ fn handle_restore_prompt(
     new_game_buttons: Query<&Interaction, (With<RestoreNewGameButton>, Changed<Interaction>)>,
     mut pending: ResMut<PendingRestoredGame>,
     mut game: ResMut<GameStateResource>,
+    settings: Option<Res<crate::settings_plugin::SettingsResource>>,
     mut changed: MessageWriter<StateChangedEvent>,
     mut new_game: MessageWriter<NewGameRequestEvent>,
     mut launch_home_shown: Option<ResMut<crate::home_plugin::LaunchHomeShown>>,
@@ -639,6 +660,10 @@ fn handle_restore_prompt(
     let resolved = if key_continue || click_continue {
         if let Some(restored) = pending.0.take() {
             game.0 = restored;
+            // Patch setting that serialized with the old core default of `false`.
+            if let Some(s) = settings.as_ref() {
+                game.0.take_from_foundation = s.0.take_from_foundation;
+            }
             changed.write(StateChangedEvent);
         }
         for entity in &screens {

solitaire_engine/src/hud_plugin.rs

@@ -140,6 +140,12 @@ pub struct HudColumn;
 #[derive(Component, Debug)]
 pub struct HudActionBar;
 
+/// Marker on the text node inside each action-bar button (Android only).
+/// Used by `resize_action_bar_labels` to update font size on window resize.
+#[cfg(target_os = "android")]
+#[derive(Component, Debug)]
+struct ActionButtonLabel;
+
 /// Marker on the circular profile-picture button anchored to the
 /// top-right of the HUD band. Pressing it opens the Profile overlay.
 /// Shows the server avatar image when loaded; falls back to the player's
@@ -489,6 +495,11 @@ impl Plugin for HudPlugin {
                         .after(TouchDragSet::AfterStartDrag)
                         .in_set(TouchDragSet::BeforeEndDrag),
                 );
+            app.add_systems(
+                Update,
+                resize_action_bar_labels
+                    .run_if(resource_exists_and_changed::<crate::layout::LayoutResource>),
+            );
         }
     }
 }
@@ -843,11 +854,25 @@ fn handle_avatar_button(
 /// on its own visual edge.
 fn spawn_action_buttons(
     font_res: Option<Res<FontResource>>,
+    windows: Query<&Window>,
     mut commands: Commands,
 ) {
+    // On Android the glyph labels must scale with the viewport so they remain
+    // legible on any screen density. Use the window width at startup; the
+    // resize_action_bar_labels system keeps this current on window changes.
+    #[cfg(target_os = "android")]
+    let action_font_size = {
+        let w = windows.iter().next().map_or(900.0, |win| win.width());
+        action_bar_font_size(w)
+    };
+    #[cfg(not(target_os = "android"))]
+    let action_font_size = TYPE_BODY;
+    #[cfg(not(target_os = "android"))]
+    let _windows = windows;
+
     let font = TextFont {
         font: font_res.as_ref().map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_BODY,
+        font_size: action_font_size,
         ..default()
     };
 
@@ -964,7 +989,7 @@ fn spawn_action_button<M: Component>(
     // centred with room to breathe. On desktop, keep the comfortable 48 dp
     // floor and 8 dp side padding.
     #[cfg(target_os = "android")]
-    let (pad, min_w, min_h) = (UiRect::axes(Val::Px(4.0), Val::Px(4.0)), Val::Px(44.0), Val::Px(44.0));
+    let (pad, min_w, min_h) = (UiRect::axes(Val::Px(4.0), Val::Px(4.0)), Val::Px(52.0), Val::Px(44.0));
     #[cfg(not(target_os = "android"))]
     let (pad, min_w, min_h) = (UiRect::axes(VAL_SPACE_2, VAL_SPACE_2), Val::Px(48.0), Val::Px(48.0));
 
@@ -992,6 +1017,9 @@ fn spawn_action_button<M: Component>(
         HighContrastBorder::with_default(BORDER_SUBTLE),
     ))
     .with_children(|b| {
+        #[cfg(target_os = "android")]
+        b.spawn((ActionButtonLabel, Text::new(label), font.clone(), TextColor(text_color)));
+        #[cfg(not(target_os = "android"))]
         b.spawn((Text::new(label), font.clone(), TextColor(text_color)));
         if let Some(key) = hotkey {
             // Hotkey hint rendered as a dim caption next to the label —
@@ -2483,6 +2511,32 @@ fn restore_hud_on_modal(
     }
 }
 
+/// Returns the action-bar glyph font size for a given logical window width.
+/// Scales linearly so glyphs remain legible at any phone density.
+#[cfg(target_os = "android")]
+fn action_bar_font_size(window_width: f32) -> f32 {
+    // ~1/40 of the window width gives ~22 px on a 900 logical-px phone.
+    // Clamped so it never goes too tiny on narrow viewports or too large
+    // on landscape tablets.
+    (window_width / 40.0).clamp(16.0, 30.0)
+}
+
+/// Resizes the glyph text inside every [`ActionButtonLabel`] to match the
+/// current viewport width whenever [`LayoutResource`] changes (orientation
+/// change or window resize).
+#[cfg(target_os = "android")]
+fn resize_action_bar_labels(
+    layout: Res<crate::layout::LayoutResource>,
+    windows: Query<&Window>,
+    mut labels: Query<&mut TextFont, With<ActionButtonLabel>>,
+) {
+    let w = windows.iter().next().map_or(layout.0.card_size.x * 7.25, |win| win.width());
+    let new_size = action_bar_font_size(w);
+    for mut font in &mut labels {
+        font.font_size = new_size;
+    }
+}
+
 #[cfg(target_os = "android")]
 fn toggle_hud_on_tap(
     mut touch_events: MessageReader<bevy::input::touch::TouchInput>,

solitaire_engine/src/layout.rs

@@ -96,13 +96,33 @@ const MAX_TABLEAU_CARDS: f32 = 13.0;
 /// below this band so the HUD doesn't bleed into the play surface.
 ///
 /// Desktop: 64 px fits the score/moves/time + mode badge rows.
-/// Android: 80 px gives the same content rows comfortable clearance.
-/// (Previously 128 px when action buttons lived in the top band; those are
-/// now in the bottom bar so the larger reserve is no longer needed.)
+/// Android: 112 px — the HUD column has 4 flex tiers with 3 inter-tier
+/// gaps (4 px each) plus a SPACE_2 = 8 px top offset. With empty tiers
+/// still contributing gap height in Bevy's flex layout, the actual HUD
+/// height can reach ~80 px before the grid starts; 112 px gives ~28 px
+/// of clearance between the HUD bottom and the top card edge, preventing
+/// the overlap seen with the previous 80 px value.
 #[cfg(not(target_os = "android"))]
 pub const HUD_BAND_HEIGHT: f32 = 64.0;
 #[cfg(target_os = "android")]
-pub const HUD_BAND_HEIGHT: f32 = 80.0;
+pub const HUD_BAND_HEIGHT: f32 = 112.0;
+
+/// Height of the bottom action-bar (the row of ≡ ← || ? ! M + buttons).
+///
+/// The action bar sits *above* the OS gesture/navigation zone, so it is NOT
+/// covered by `safe_area_bottom`. `compute_layout` adds this constant to
+/// `safe_area_bottom` before computing the height-based card-size candidate
+/// and the available tableau height, ensuring the deepest fanned column
+/// never scrolls behind the button row.
+///
+/// Derivation (Android): `min_height 44 px` buttons
+///   + `padding.top 8 px` + `padding.bottom 8 px` outer bar padding = **60 px**.
+///
+/// Desktop: no persistent bottom bar, so 0.
+#[cfg(not(target_os = "android"))]
+const BOTTOM_BAR_HEIGHT: f32 = 0.0;
+#[cfg(target_os = "android")]
+const BOTTOM_BAR_HEIGHT: f32 = 60.0;
 
 /// Table background colour (dark green felt).
 pub const TABLE_COLOUR: [f32; 3] = [0.059, 0.322, 0.196];
@@ -187,9 +207,13 @@ pub fn compute_layout(window: Vec2, safe_area_top: f32, safe_area_bottom: f32, h
     // Substituting h_gap = w/4 and h = CARD_ASPECT * w and solving for the
     // largest w that fits gives:
     //   (window.y - HUD_BAND_HEIGHT) = w * (0.5 + (1 + fan_factor + VERTICAL_GAP_FRAC) * CARD_ASPECT)
+    // Reserve space for both the OS gesture/nav bar and the app's own action
+    // bar, which sits above it and is invisible to safe_area_bottom.
+    let effective_safe_bottom = safe_area_bottom + BOTTOM_BAR_HEIGHT;
+
     let fan_factor = 1.0 + (MAX_TABLEAU_CARDS - 1.0) * TABLEAU_FAN_FRAC;
     let height_denom = 0.5 + (1.0 + fan_factor + VERTICAL_GAP_FRAC) * CARD_ASPECT;
-    let card_width_height_based = (window.y - safe_area_top - safe_area_bottom - band_h).max(0.0) / height_denom;
+    let card_width_height_based = (window.y - safe_area_top - effective_safe_bottom - band_h).max(0.0) / height_denom;
 
     let card_width = card_width_width_based.min(card_width_height_based);
     let card_height = card_width * CARD_ASPECT;
@@ -238,7 +262,7 @@ pub fn compute_layout(window: Vec2, safe_area_top: f32, safe_area_bottom: f32, h
     //
     // avail = distance from the top of the first tableau card to the bottom
     //         margin — i.e. the space available for 12 fan steps.
-    let avail = (tableau_y - (-window.y / 2.0 + safe_area_bottom + h_gap) - card_height / 2.0).max(0.0);
+    let avail = (tableau_y - (-window.y / 2.0 + effective_safe_bottom + h_gap) - card_height / 2.0).max(0.0);
     let ideal_fan_frac = if card_height > 0.0 {
         avail / ((MAX_TABLEAU_CARDS - 1.0) * card_height)
     } else {

solitaire_engine/src/radial_menu.rs

@@ -473,8 +473,11 @@ fn radial_open_on_long_press(
     mut state: ResMut<RightClickRadialState>,
 ) {
     // Guard: only count while a touch is down, uncommitted, and radial is idle.
-    let active_id = drag.active_touch_id;
-    if active_id.is_none() || drag.committed || state.is_active() || paused.is_some_and(|p| p.0) {
+    let Some(active_id) = drag.active_touch_id else {
+        *hold_timer = 0.0;
+        return;
+    };
+    if drag.committed || state.is_active() || paused.is_some_and(|p| p.0) {
         *hold_timer = 0.0;
         return;
     }
@@ -487,7 +490,7 @@ fn radial_open_on_long_press(
 
     // Resolve current touch world position.
     let Some(touches) = touches else { return };
-    let Some(touch) = touches.iter().find(|t| t.id() == active_id.unwrap()) else {
+    let Some(touch) = touches.iter().find(|t| t.id() == active_id) else {
         return;
     };
     let Some((camera, cam_xf)) = cameras.single().ok() else { return };

solitaire_engine/src/settings_plugin.rs

@@ -94,7 +94,7 @@ pub struct SettingsChangedEvent(pub Settings);
 
 /// Marker on the root Settings panel entity.
 #[derive(Component, Debug)]
-struct SettingsPanel;
+pub struct SettingsPanel;
 
 /// Marks the `Text` node showing the live SFX volume value.
 #[derive(Component, Debug)]
@@ -1137,6 +1137,7 @@ fn handle_sync_buttons(
     mut configure_sync: MessageWriter<SyncConfigureRequestEvent>,
     mut logout_sync: MessageWriter<SyncLogoutRequestEvent>,
     mut delete_account: MessageWriter<DeleteAccountRequestEvent>,
+    mut screen: ResMut<SettingsScreen>,
 ) {
     for (interaction, button) in &interaction_query {
         if *interaction != Interaction::Pressed {
@@ -1144,7 +1145,12 @@ fn handle_sync_buttons(
         }
         match button {
             SettingsButton::SyncNow => { manual_sync.write(ManualSyncRequestEvent); }
-            SettingsButton::ConnectSync => { configure_sync.write(SyncConfigureRequestEvent); }
+            SettingsButton::ConnectSync => {
+                // Close settings before the sync-setup modal opens so the
+                // guard in open_sync_setup_modal doesn't block on our own scrim.
+                screen.0 = false;
+                configure_sync.write(SyncConfigureRequestEvent);
+            }
             SettingsButton::DisconnectSync => { logout_sync.write(SyncLogoutRequestEvent); }
             SettingsButton::DeleteAccount => { delete_account.write(DeleteAccountRequestEvent); }
             _ => {}

solitaire_engine/src/sync_setup_plugin.rs

@@ -52,7 +52,7 @@ use crate::events::{
     SyncLogoutRequestEvent,
 };
 use crate::font_plugin::FontResource;
-use crate::settings_plugin::{SettingsResource, SettingsScreen, SettingsStoragePath};
+use crate::settings_plugin::{SettingsPanel, SettingsResource, SettingsScreen, SettingsStoragePath};
 use crate::resources::TokioRuntimeResource;
 use crate::sync_plugin::SyncProviderResource;
 use crate::ui_modal::{spawn_modal, ModalScrim};
@@ -205,10 +205,14 @@ impl Plugin for SyncSetupPlugin {
 // ---------------------------------------------------------------------------
 
 /// Opens the sync-setup modal when `SyncConfigureRequestEvent` is received.
+#[allow(clippy::type_complexity)]
 fn open_sync_setup_modal(
     mut events: MessageReader<SyncConfigureRequestEvent>,
     existing: Query<(), With<SyncSetupScreen>>,
-    other_modal_scrims: Query<(), (With<ModalScrim>, Without<SyncSetupScreen>)>,
+    // Exclude SettingsPanel: the Connect button closes settings in the same
+    // frame it fires SyncConfigureRequestEvent, but Bevy despawns are deferred
+    // so the settings scrim still exists in the world during this system.
+    other_modal_scrims: Query<(), (With<ModalScrim>, Without<SyncSetupScreen>, Without<SettingsPanel>)>,
     mut commands: Commands,
     mut focused: ResMut<SyncFocusedField>,
     font_res: Option<Res<FontResource>>,

solitaire_server/web/game.css

@@ -230,6 +230,68 @@ main {
     pointer-events: none;
 }
 
+/* ── Resume overlay ──────────────────────────────────────────────────── */
+
+#resume-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(21, 21, 21, 0.92);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+#resume-overlay.hidden { display: none; }
+
+.resume-card {
+    background: var(--panel);
+    border: 1px solid rgba(255,255,255,0.12);
+    border-radius: 16px;
+    padding: 40px 48px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
+    max-width: 360px;
+}
+
+.resume-title {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--accent);
+}
+
+.resume-detail {
+    font-size: 14px;
+    color: var(--text-muted);
+    margin: 0;
+    line-height: 1.5;
+}
+
+.resume-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    margin-top: 8px;
+}
+
+.resume-actions button {
+    padding: 12px 24px;
+    font-size: 15px;
+}
+
+.resume-actions button.secondary {
+    background: transparent;
+    border: 1px solid rgba(255,255,255,0.2);
+    color: var(--text-muted);
+}
+
+.resume-actions button.secondary:hover {
+    background: rgba(255,255,255,0.05);
+}
+
 /* ── Win overlay ─────────────────────────────────────────────────────── */
 
 #win-overlay {

solitaire_server/web/game.html

@@ -56,6 +56,17 @@
         </section>
     </main>
 
+    <div id="resume-overlay" class="hidden">
+        <div class="resume-card">
+            <div class="resume-title">Resume Game?</div>
+            <p class="resume-detail">You have an unfinished game saved. Would you like to continue where you left off?</p>
+            <div class="resume-actions">
+                <button id="btn-resume">↩ Resume</button>
+                <button id="btn-resume-new" class="secondary">↺ New Game</button>
+            </div>
+        </div>
+    </div>
+
     <div id="win-overlay" class="hidden">
         <div class="win-card">
             <div class="win-title">You Won!</div>

solitaire_server/web/game.js

@@ -69,6 +69,34 @@ function preloadTheme(theme) {
 preloadTheme("classic");
 preloadTheme("dark");
 
+// ── Persistence ──────────────────────────────────────────────────────────────
+const LS_SAVE_KEY = "fs_game_save";
+
+function saveState() {
+    if (!game) return;
+    try {
+        const gameState = game.serialize();
+        if (typeof gameState !== "string") return;
+        localStorage.setItem(LS_SAVE_KEY, JSON.stringify({ gameState, elapsedSecs, drawThree }));
+    } catch (e) {
+        // localStorage may be unavailable (private browsing quota, etc.) — never block gameplay.
+        console.warn("fs: save failed", e);
+    }
+}
+
+function clearSave() {
+    try { localStorage.removeItem(LS_SAVE_KEY); } catch { /* ignore */ }
+}
+
+function loadSave() {
+    try {
+        const raw = localStorage.getItem(LS_SAVE_KEY);
+        if (!raw) return null;
+        const save = JSON.parse(raw);
+        return save?.gameState ? save : null;
+    } catch { return null; }
+}
+
 // ── State ────────────────────────────────────────────────────────────────────
 let game      = null;
 let snap      = null;   // last rendered GameSnapshot
@@ -138,16 +166,72 @@ async function bootstrap() {
     await init();
     syncThemeButton();
 
-    const params  = new URLSearchParams(window.location.search);
-    const urlSeed = params.has("seed") ? Number(params.get("seed")) : randomSeed();
-    drawThree     = params.has("draw3");
-    chkDraw3.checked = drawThree;
-
     buildSlots();
     scaleBoard();
     window.addEventListener("resize", scaleBoard);
-    startGame(urlSeed);
     attachHandlers();
+
+    const saved = loadSave();
+    if (saved) {
+        showResumeDialog(saved);
+    } else {
+        const params  = new URLSearchParams(window.location.search);
+        const urlSeed = params.has("seed") ? Number(params.get("seed")) : randomSeed();
+        drawThree     = params.has("draw3");
+        chkDraw3.checked = drawThree;
+        startGame(urlSeed);
+    }
+}
+
+function showResumeDialog(saved) {
+    const overlay = document.getElementById("resume-overlay");
+    if (overlay) overlay.classList.remove("hidden");
+
+    document.getElementById("btn-resume").onclick = () => {
+        if (overlay) overlay.classList.add("hidden");
+        resumeGame(saved);
+    };
+    document.getElementById("btn-resume-new").onclick = () => {
+        clearSave();
+        if (overlay) overlay.classList.add("hidden");
+        drawThree = false;
+        chkDraw3.checked = false;
+        startGame(randomSeed());
+    };
+}
+
+function resumeGame(saved) {
+    let restored;
+    try {
+        restored = SolitaireGame.from_saved(saved.gameState);
+    } catch (e) {
+        console.warn("fs: restore failed, starting new game", e);
+        clearSave();
+        startGame(randomSeed());
+        return;
+    }
+
+    game = restored;
+    drawThree = !!saved.drawThree;
+    elapsedSecs = saved.elapsedSecs || 0;
+    chkDraw3.checked = drawThree;
+
+    const displaySeed = Math.round(game.seed());
+    hudSeed.textContent = `seed ${displaySeed}`;
+    winOverlay.classList.add("hidden");
+    cardEls.clear();
+    board.querySelectorAll(".card, .recycle-label").forEach(el => el.remove());
+
+    const url = new URL(window.location);
+    url.searchParams.set("seed", displaySeed);
+    if (drawThree) url.searchParams.set("draw3", "");
+    else           url.searchParams.delete("draw3");
+    history.replaceState(null, "", url);
+
+    const s = game.state();
+    snap = s;
+    render(s);
+    if (!s.is_won) startTimer();
 }
 
 function randomSeed() {
@@ -304,9 +388,12 @@ function render(s) {
         acTimer = setInterval(doAutoCompleteStep, 380);
     }
     if (s.is_won) {
+        clearSave();
         stopTimer();
         if (acTimer) { clearInterval(acTimer); acTimer = null; }
         showWin(s);
+    } else {
+        saveState();
     }
 }
 

solitaire_wasm/src/lib.rs

@@ -366,9 +366,10 @@ impl SolitaireGame {
         } else {
             DrawMode::DrawOne
         };
-        SolitaireGame {
-            game: GameState::new_with_mode(seed as u64, dm, GameMode::Classic),
-        }
+        let mut game = GameState::new_with_mode(seed as u64, dm, GameMode::Classic);
+        // The web client has no settings layer; enable standard Klondike rule unconditionally.
+        game.take_from_foundation = true;
+        SolitaireGame { game }
     }
 
     /// Full pile snapshot as a JS object.
@@ -422,6 +423,30 @@ impl SolitaireGame {
         }
     }
 
+    /// Serialise the full game state as a JSON string for `localStorage`.
+    ///
+    /// Use [`SolitaireGame::from_saved`] to restore it. The returned string is
+    /// opaque — callers should treat it as a blob and store/restore it verbatim.
+    pub fn serialize(&self) -> Result<String, JsValue> {
+        serde_json::to_string(&self.game)
+            .map_err(|e| JsValue::from_str(&e.to_string()))
+    }
+
+    /// Restore a game from a JSON string previously produced by [`SolitaireGame::serialize`].
+    ///
+    /// Returns an error string if the JSON is malformed or describes a state
+    /// that can't be deserialised (e.g. from a future schema version).
+    pub fn from_saved(json: &str) -> Result<SolitaireGame, JsValue> {
+        serde_json::from_str::<GameState>(json)
+            .map(|mut game| {
+                // Older saves serialised with take_from_foundation=false (the core default).
+                // The web client has no settings layer, so enforce the standard rule here.
+                game.take_from_foundation = true;
+                SolitaireGame { game }
+            })
+            .map_err(|e| JsValue::from_str(&e.to_string()))
+    }
+
     /// Apply one auto-complete move (only valid when `is_auto_completable`).
     ///
     /// If no card can go directly to a foundation this step, advances the