diff --git a/solitaire_engine/src/settings_plugin/input.rs b/solitaire_engine/src/settings_plugin/input.rs
new file mode 100644
index 0000000..c0c67e4
--- /dev/null
+++ b/solitaire_engine/src/settings_plugin/input.rs
@@ -0,0 +1,627 @@
+//! Input handling for the Settings panel: button presses, keyboard
+//! accelerators, focus attachment, and scrolling.
+
+use super::*;
+
+use bevy::input::mouse::{MouseScrollUnit, MouseWheel};
+use bevy::ui::{ComputedNode, UiGlobalTransform};
+use solitaire_core::DrawStockConfig;
+use solitaire_data::{
+    AnimSpeed, REPLAY_MOVE_INTERVAL_STEP_SECS, TIME_BONUS_MULTIPLIER_STEP, TOOLTIP_DELAY_STEP_SECS,
+    settings::Theme,
+};
+
+use crate::events::{
+    DeleteAccountRequestEvent, InfoToastEvent, ManualSyncRequestEvent, SyncConfigureRequestEvent,
+    SyncLogoutRequestEvent, ToggleSettingsRequestEvent,
+};
+use crate::ui_focus::{FocusGroup, Focusable, FocusedButton};
+use crate::ui_modal::{ModalButton, ModalScrim};
+use crate::ui_theme::SPACE_2;
+
+pub(super) fn handle_volume_keys(
+    keys: Res<ButtonInput<KeyCode>>,
+    mut settings: ResMut<SettingsResource>,
+    path: Res<SettingsStoragePath>,
+    mut changed: MessageWriter<SettingsChangedEvent>,
+    mut toast: MessageWriter<InfoToastEvent>,
+) {
+    let mut delta = 0.0_f32;
+    if keys.just_pressed(KeyCode::BracketLeft) {
+        delta -= SFX_STEP;
+    }
+    if keys.just_pressed(KeyCode::BracketRight) {
+        delta += SFX_STEP;
+    }
+    if delta == 0.0 {
+        return;
+    }
+    let before = settings.0.sfx_volume;
+    let after = settings.0.adjust_sfx_volume(delta);
+    if (before - after).abs() < f32::EPSILON {
+        return;
+    }
+    persist(&path, &settings.0);
+    changed.write(SettingsChangedEvent(settings.0.clone()));
+    toast.write(InfoToastEvent(format!(
+        "SFX volume: {}%",
+        (after * 100.0).round() as i32
+    )));
+}
+
+/// Opens or closes the Settings panel — `O` keyboard accelerator or
+/// `ToggleSettingsRequestEvent` from the HUD Menu popover.
+pub(super) fn toggle_settings_screen(
+    keys: Res<ButtonInput<KeyCode>>,
+    mut requests: MessageReader<ToggleSettingsRequestEvent>,
+    mut screen: ResMut<SettingsScreen>,
+) {
+    let button_clicked = requests.read().count() > 0;
+    if keys.just_pressed(KeyCode::KeyO) || button_clicked {
+        screen.0 = !screen.0;
+    }
+}
+
+/// Reacts to button presses inside the Settings panel.
+#[allow(clippy::too_many_arguments, clippy::type_complexity)]
+pub(super) fn handle_settings_buttons(
+    interaction_query: Query<(&Interaction, &SettingsButton), Changed<Interaction>>,
+    mut settings: ResMut<SettingsResource>,
+    mut screen: ResMut<SettingsScreen>,
+    path: Res<SettingsStoragePath>,
+    mut changed: MessageWriter<SettingsChangedEvent>,
+    mut sfx_text: Query<
+        &mut Text,
+        (
+            With<SfxVolumeText>,
+            Without<MusicVolumeText>,
+            Without<DrawModeText>,
+            Without<ThemeText>,
+            Without<AnimSpeedText>,
+            Without<ColorBlindText>,
+            Without<HighContrastText>,
+            Without<ReduceMotionText>,
+        ),
+    >,
+    mut music_text: Query<
+        &mut Text,
+        (
+            With<MusicVolumeText>,
+            Without<SfxVolumeText>,
+            Without<DrawModeText>,
+            Without<ThemeText>,
+            Without<AnimSpeedText>,
+            Without<ColorBlindText>,
+            Without<HighContrastText>,
+            Without<ReduceMotionText>,
+        ),
+    >,
+    mut draw_text: Query<
+        &mut Text,
+        (
+            With<DrawModeText>,
+            Without<SfxVolumeText>,
+            Without<MusicVolumeText>,
+            Without<ThemeText>,
+            Without<AnimSpeedText>,
+            Without<ColorBlindText>,
+            Without<HighContrastText>,
+            Without<ReduceMotionText>,
+        ),
+    >,
+    mut theme_text: Query<
+        &mut Text,
+        (
+            With<ThemeText>,
+            Without<SfxVolumeText>,
+            Without<MusicVolumeText>,
+            Without<DrawModeText>,
+            Without<AnimSpeedText>,
+            Without<ColorBlindText>,
+            Without<HighContrastText>,
+            Without<ReduceMotionText>,
+        ),
+    >,
+    mut anim_speed_text: Query<
+        &mut Text,
+        (
+            With<AnimSpeedText>,
+            Without<SfxVolumeText>,
+            Without<MusicVolumeText>,
+            Without<DrawModeText>,
+            Without<ThemeText>,
+            Without<ColorBlindText>,
+            Without<HighContrastText>,
+            Without<ReduceMotionText>,
+        ),
+    >,
+    mut color_blind_text: Query<
+        &mut Text,
+        (
+            With<ColorBlindText>,
+            Without<SfxVolumeText>,
+            Without<MusicVolumeText>,
+            Without<DrawModeText>,
+            Without<ThemeText>,
+            Without<AnimSpeedText>,
+            Without<HighContrastText>,
+            Without<ReduceMotionText>,
+        ),
+    >,
+    mut high_contrast_text: Query<
+        &mut Text,
+        (
+            With<HighContrastText>,
+            Without<SfxVolumeText>,
+            Without<MusicVolumeText>,
+            Without<DrawModeText>,
+            Without<ThemeText>,
+            Without<AnimSpeedText>,
+            Without<ColorBlindText>,
+            Without<ReduceMotionText>,
+        ),
+    >,
+    mut reduce_motion_text: Query<
+        &mut Text,
+        (
+            With<ReduceMotionText>,
+            Without<SfxVolumeText>,
+            Without<MusicVolumeText>,
+            Without<DrawModeText>,
+            Without<ThemeText>,
+            Without<AnimSpeedText>,
+            Without<ColorBlindText>,
+            Without<HighContrastText>,
+        ),
+    >,
+) {
+    for (interaction, button) in &interaction_query {
+        if *interaction != Interaction::Pressed {
+            continue;
+        }
+        match button {
+            SettingsButton::SfxDown => {
+                let before = settings.0.sfx_volume;
+                let after = settings.0.adjust_sfx_volume(-SFX_STEP);
+                if (before - after).abs() > f32::EPSILON {
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                    if let Ok(mut t) = sfx_text.single_mut() {
+                        **t = format!("{after:.2}");
+                    }
+                }
+            }
+            SettingsButton::SfxUp => {
+                let before = settings.0.sfx_volume;
+                let after = settings.0.adjust_sfx_volume(SFX_STEP);
+                if (before - after).abs() > f32::EPSILON {
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                    if let Ok(mut t) = sfx_text.single_mut() {
+                        **t = format!("{after:.2}");
+                    }
+                }
+            }
+            SettingsButton::MusicDown => {
+                let before = settings.0.music_volume;
+                let after = settings.0.adjust_music_volume(-SFX_STEP);
+                if (before - after).abs() > f32::EPSILON {
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                    if let Ok(mut t) = music_text.single_mut() {
+                        **t = format!("{after:.2}");
+                    }
+                }
+            }
+            SettingsButton::MusicUp => {
+                let before = settings.0.music_volume;
+                let after = settings.0.adjust_music_volume(SFX_STEP);
+                if (before - after).abs() > f32::EPSILON {
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                    if let Ok(mut t) = music_text.single_mut() {
+                        **t = format!("{after:.2}");
+                    }
+                }
+            }
+            SettingsButton::ToggleDrawMode => {
+                settings.0.draw_mode = match settings.0.draw_mode {
+                    DrawStockConfig::DrawOne => DrawStockConfig::DrawThree,
+                    DrawStockConfig::DrawThree => DrawStockConfig::DrawOne,
+                };
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+                if let Ok(mut t) = draw_text.single_mut() {
+                    **t = draw_mode_label(&settings.0.draw_mode);
+                }
+            }
+            SettingsButton::CycleAnimSpeed => {
+                settings.0.animation_speed = match settings.0.animation_speed {
+                    AnimSpeed::Normal => AnimSpeed::Fast,
+                    AnimSpeed::Fast => AnimSpeed::Instant,
+                    AnimSpeed::Instant => AnimSpeed::Normal,
+                };
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+                if let Ok(mut t) = anim_speed_text.single_mut() {
+                    **t = anim_speed_label(&settings.0.animation_speed);
+                }
+            }
+            SettingsButton::TooltipDelayDown => {
+                let before = settings.0.tooltip_delay_secs;
+                let after = settings.0.adjust_tooltip_delay(-TOOLTIP_DELAY_STEP_SECS);
+                if (before - after).abs() > f32::EPSILON {
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                    // The Text node is refreshed by `update_tooltip_delay_text`
+                    // on the next frame via `settings.is_changed()`.
+                }
+            }
+            SettingsButton::TooltipDelayUp => {
+                let before = settings.0.tooltip_delay_secs;
+                let after = settings.0.adjust_tooltip_delay(TOOLTIP_DELAY_STEP_SECS);
+                if (before - after).abs() > f32::EPSILON {
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                }
+            }
+            SettingsButton::TimeBonusDown => {
+                let before = settings.0.time_bonus_multiplier;
+                let after = settings
+                    .0
+                    .adjust_time_bonus_multiplier(-TIME_BONUS_MULTIPLIER_STEP);
+                if (before - after).abs() > f32::EPSILON {
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                    // The Text node is refreshed by
+                    // `update_time_bonus_multiplier_text` on the next
+                    // frame via `settings.is_changed()`.
+                }
+            }
+            SettingsButton::TimeBonusUp => {
+                let before = settings.0.time_bonus_multiplier;
+                let after = settings
+                    .0
+                    .adjust_time_bonus_multiplier(TIME_BONUS_MULTIPLIER_STEP);
+                if (before - after).abs() > f32::EPSILON {
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                }
+            }
+            SettingsButton::ReplayMoveIntervalDown => {
+                let before = settings.0.replay_move_interval_secs;
+                let after = settings
+                    .0
+                    .adjust_replay_move_interval(-REPLAY_MOVE_INTERVAL_STEP_SECS);
+                if (before - after).abs() > f32::EPSILON {
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                    // The Text node is refreshed by
+                    // `update_replay_move_interval_text` on the next
+                    // frame via `settings.is_changed()`.
+                }
+            }
+            SettingsButton::ReplayMoveIntervalUp => {
+                let before = settings.0.replay_move_interval_secs;
+                let after = settings
+                    .0
+                    .adjust_replay_move_interval(REPLAY_MOVE_INTERVAL_STEP_SECS);
+                if (before - after).abs() > f32::EPSILON {
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                }
+            }
+            SettingsButton::ToggleTheme => {
+                settings.0.theme = match settings.0.theme {
+                    Theme::Green => Theme::Blue,
+                    Theme::Blue => Theme::Dark,
+                    Theme::Dark => Theme::Green,
+                };
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+                if let Ok(mut t) = theme_text.single_mut() {
+                    **t = theme_label(&settings.0.theme);
+                }
+            }
+            SettingsButton::ToggleColorBlind => {
+                settings.0.color_blind_mode = !settings.0.color_blind_mode;
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+                if let Ok(mut t) = color_blind_text.single_mut() {
+                    **t = color_blind_label(settings.0.color_blind_mode);
+                }
+            }
+            SettingsButton::ToggleHighContrast => {
+                settings.0.high_contrast_mode = !settings.0.high_contrast_mode;
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+                if let Ok(mut t) = high_contrast_text.single_mut() {
+                    **t = on_off_label(settings.0.high_contrast_mode);
+                }
+            }
+            SettingsButton::ToggleReduceMotion => {
+                settings.0.reduce_motion_mode = !settings.0.reduce_motion_mode;
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+                if let Ok(mut t) = reduce_motion_text.single_mut() {
+                    **t = on_off_label(settings.0.reduce_motion_mode);
+                }
+            }
+            SettingsButton::ToggleTouchInputMode => {
+                use solitaire_data::settings::TouchInputMode;
+                settings.0.touch_input_mode = match settings.0.touch_input_mode {
+                    TouchInputMode::OneTap => TouchInputMode::TapToSelect,
+                    TouchInputMode::TapToSelect => TouchInputMode::OneTap,
+                };
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+                // Text refreshed by `update_touch_input_mode_text` next frame.
+            }
+            SettingsButton::ToggleWinnableDealsOnly => {
+                settings.0.winnable_deals_only = !settings.0.winnable_deals_only;
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+                // The Text node is refreshed by `update_winnable_deals_only_text`
+                // on the next frame via `settings.is_changed()`.
+            }
+            SettingsButton::ToggleAnalytics => {
+                settings.0.analytics_enabled = !settings.0.analytics_enabled;
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+                // Text refreshed by `update_analytics_enabled_text` next frame.
+            }
+            SettingsButton::ToggleSmartDefaultSize => {
+                settings.0.disable_smart_default_size = !settings.0.disable_smart_default_size;
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+                // The Text node is refreshed by
+                // `update_smart_default_size_text` next frame. The
+                // sizer system is gated only at startup, so flipping
+                // this mid-session takes effect on the next launch —
+                // documented on the field in `solitaire_data::Settings`.
+            }
+            SettingsButton::SelectCardBack(idx) => {
+                settings.0.selected_card_back = *idx;
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+            }
+            SettingsButton::SelectBackground(idx) => {
+                settings.0.selected_background = *idx;
+                persist(&path, &settings.0);
+                changed.write(SettingsChangedEvent(settings.0.clone()));
+            }
+            SettingsButton::SelectTheme(theme_id) => {
+                if settings.0.selected_theme_id != *theme_id {
+                    settings.0.selected_theme_id = theme_id.clone();
+                    persist(&path, &settings.0);
+                    changed.write(SettingsChangedEvent(settings.0.clone()));
+                }
+            }
+            #[cfg(not(target_arch = "wasm32"))]
+            SettingsButton::ScanThemes => {
+                // Handled by `handle_scan_themes`.
+            }
+            SettingsButton::SyncNow
+            | SettingsButton::ConnectSync
+            | SettingsButton::DisconnectSync
+            | SettingsButton::DeleteAccount => {
+                // Handled by `handle_sync_buttons`.
+            }
+            SettingsButton::Done => {
+                screen.0 = false;
+            }
+        }
+    }
+}
+
+/// Handles sync-related settings buttons: Sync Now, Connect, Disconnect,
+/// and Delete Account. Split from `handle_settings_buttons` to stay within
+/// Bevy's 16-parameter system limit.
+pub(super) fn handle_sync_buttons(
+    interaction_query: Query<(&Interaction, &SettingsButton), Changed<Interaction>>,
+    mut manual_sync: MessageWriter<ManualSyncRequestEvent>,
+    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 {
+            continue;
+        }
+        match button {
+            SettingsButton::SyncNow => {
+                manual_sync.write(ManualSyncRequestEvent);
+            }
+            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);
+            }
+            _ => {}
+        }
+    }
+}
+
+/// Auto-attaches [`Focusable`] to every bespoke Settings button — icon
+/// buttons (volume +/−, toggle, cycle), swatch buttons (card-back,
+/// background pickers), and the "Sync Now" button. The "Done" button is
+/// already tagged by `attach_focusable_to_modal_buttons` (it carries
+/// [`ModalButton`]) and is filtered out here.
+///
+/// Walks ancestors via [`ChildOf`] to find the [`ModalScrim`] that owns
+/// the panel so the new [`Focusable`]'s group is bound to that scrim —
+/// same defensive shape as the Phase 1 / 2 attach systems.
+#[allow(clippy::type_complexity)]
+pub(super) fn attach_focusable_to_settings_buttons(
+    mut commands: Commands,
+    new_buttons: Query<
+        (Entity, &SettingsButton),
+        (With<Button>, Without<Focusable>, Without<ModalButton>),
+    >,
+    parents: Query<&ChildOf>,
+    scrims: Query<(), With<ModalScrim>>,
+) {
+    for (button, settings_button) in &new_buttons {
+        let mut current = button;
+        let mut scrim_entity: Option<Entity> = None;
+        for _ in 0..32 {
+            if scrims.get(current).is_ok() {
+                scrim_entity = Some(current);
+                break;
+            }
+            match parents.get(current) {
+                Ok(parent) => current = parent.parent(),
+                Err(_) => break,
+            }
+        }
+        if let Some(scrim) = scrim_entity {
+            commands.entity(button).insert(Focusable {
+                group: FocusGroup::Modal(scrim),
+                order: settings_button.focus_order(),
+            });
+        }
+    }
+}
+
+/// Vertical padding (logical px) added around the focused button when
+/// scrolling it into view. Keeps the focus ring's halo visible above /
+/// below the viewport edge.
+const FOCUS_SCROLL_PADDING: f32 = SPACE_2;
+
+/// When the focused entity sits outside the visible Settings scroll
+/// viewport, adjust the viewport's [`ScrollPosition`] so the button is
+/// fully visible. No-op when:
+///
+/// - `FocusedButton` is `None`
+/// - the focused entity has no [`UiGlobalTransform`] / [`ComputedNode`]
+///   (e.g. a freshly-spawned modal hasn't laid out yet)
+/// - the focused entity is not a descendant of the
+///   [`SettingsPanelScrollable`] container
+///
+/// The viewport's visible Y range is `[scroll_y, scroll_y +
+/// viewport_height]` in physical pixels (matching `ComputedNode.size`).
+/// The focused button's vertical extent is computed from its
+/// `UiGlobalTransform.translation.y` (centre, physical) ± half its
+/// `ComputedNode.size.y`. Because the scroll container's local
+/// coordinates run [0, content_height] and the visible window is
+/// [scroll_y, scroll_y + viewport], we convert the button's window-
+/// space Y to container-local Y by subtracting the container's window-
+/// space top and adding the current scroll offset.
+#[allow(clippy::type_complexity)]
+pub(super) fn scroll_focus_into_view(
+    focused: Res<FocusedButton>,
+    parents: Query<&ChildOf>,
+    nodes: Query<(&UiGlobalTransform, &ComputedNode)>,
+    mut containers: Query<
+        (&mut ScrollPosition, &UiGlobalTransform, &ComputedNode),
+        With<SettingsPanelScrollable>,
+    >,
+) {
+    let Some(target) = focused.0 else { return };
+    // Gather button geometry.
+    let Ok((target_transform, target_node)) = nodes.get(target) else {
+        return;
+    };
+
+    // Walk ancestors looking for the scroll container. Bounded to keep
+    // a malformed hierarchy from hanging the system.
+    let mut current = target;
+    let mut container_entity: Option<Entity> = None;
+    for _ in 0..32 {
+        if containers.get(current).is_ok() {
+            container_entity = Some(current);
+            break;
+        }
+        match parents.get(current) {
+            Ok(parent) => current = parent.parent(),
+            Err(_) => break,
+        }
+    }
+    let Some(container) = container_entity else {
+        return;
+    };
+
+    let Ok((mut scroll, container_transform, container_node)) = containers.get_mut(container)
+    else {
+        return;
+    };
+
+    // Geometry is reported in physical pixels by `ComputedNode.size` and
+    // `UiGlobalTransform.translation`. `ScrollPosition` is in logical px,
+    // so convert via `inverse_scale_factor` before we write.
+    let inv = target_node.inverse_scale_factor;
+    let target_height = target_node.size().y;
+    let target_centre_y = target_transform.translation.y;
+    let target_top = target_centre_y - target_height * 0.5;
+    let target_bottom = target_centre_y + target_height * 0.5;
+
+    let container_height = container_node.size().y;
+    let container_top = container_transform.translation.y - container_height * 0.5;
+
+    // Convert button window-space Y to container-local Y. The container
+    // is currently scrolled by `scroll.0.y` *logical* pixels — multiply
+    // by physical-per-logical to compare with physical pixel extents.
+    let scroll_phys = scroll.0.y / inv.max(f32::EPSILON);
+    let viewport_top = container_top + scroll_phys;
+    let viewport_bottom = viewport_top + container_height;
+
+    // Layout may not have run yet (zero size on first frame) — no
+    // sensible scroll target until the container has dimensions.
+    if container_height <= 0.0 {
+        return;
+    }
+
+    let pad_phys = FOCUS_SCROLL_PADDING / inv.max(f32::EPSILON);
+    if target_top < viewport_top {
+        // Button extends above the viewport — scroll up.
+        let new_top = target_top - pad_phys;
+        let delta = new_top - viewport_top;
+        scroll.0.y = ((scroll_phys + delta) * inv).max(0.0);
+    } else if target_bottom > viewport_bottom {
+        // Button extends below the viewport — scroll down.
+        let new_bottom = target_bottom + pad_phys;
+        let delta = new_bottom - viewport_bottom;
+        scroll.0.y = ((scroll_phys + delta) * inv).max(0.0);
+    }
+}
+
+/// Scrolls the settings panel inner card in response to mouse-wheel events.
+///
+/// `offset_y` increases downward (0 = top of content). Scrolling down (ev.y < 0)
+/// adds to the offset; scrolling up subtracts. Clamped to >= 0 so it never
+/// scrolls past the top.
+pub(super) fn scroll_settings_panel(
+    mut scroll_evr: MessageReader<MouseWheel>,
+    screen: Res<SettingsScreen>,
+    mut scrollables: Query<&mut ScrollPosition, With<SettingsPanelScrollable>>,
+) {
+    if !screen.0 {
+        scroll_evr.clear();
+        return;
+    }
+    let delta_y: f32 = scroll_evr
+        .read()
+        .map(|ev| match ev.unit {
+            MouseScrollUnit::Line => ev.y * 50.0,
+            MouseScrollUnit::Pixel => ev.y,
+        })
+        .sum();
+    if delta_y == 0.0 {
+        return;
+    }
+    for mut sp in scrollables.iter_mut() {
+        sp.0.y = (sp.0.y - delta_y).max(0.0);
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Window geometry persistence
+// ---------------------------------------------------------------------------
diff --git a/solitaire_engine/src/settings_plugin/mod.rs b/solitaire_engine/src/settings_plugin/mod.rs
index 40c3bf3..cee3276 100644
--- a/solitaire_engine/src/settings_plugin/mod.rs
+++ b/solitaire_engine/src/settings_plugin/mod.rs
@@ -11,42 +11,27 @@
 
 use std::path::PathBuf;
 
-use bevy::input::mouse::{MouseScrollUnit, MouseWheel};
+use bevy::input::mouse::MouseWheel;
 use bevy::prelude::*;
-use bevy::ui::{ComputedNode, UiGlobalTransform};
 use bevy::window::{WindowMoved, WindowResized};
-use solitaire_core::DrawStockConfig;
 use solitaire_data::{
-    AnimSpeed, REPLAY_MOVE_INTERVAL_STEP_SECS, Settings, TIME_BONUS_MULTIPLIER_STEP,
-    TOOLTIP_DELAY_STEP_SECS, WindowGeometry, load_settings_from, save_settings_to, settings::Theme,
-    settings_file_path,
+    Settings, WindowGeometry, load_settings_from, save_settings_to, settings_file_path,
 };
 
-use solitaire_data::settings::SyncBackend;
-
-#[cfg(not(target_arch = "wasm32"))]
-use crate::assets::user_theme_dir;
 use crate::events::{
     DeleteAccountRequestEvent, InfoToastEvent, ManualSyncRequestEvent, SyncConfigureRequestEvent,
     SyncLogoutRequestEvent, ToggleSettingsRequestEvent,
 };
-use crate::font_plugin::FontResource;
-use crate::progress_plugin::ProgressResource;
-use crate::resources::{SettingsScrollPos, SyncStatus, SyncStatusResource};
-#[cfg(not(target_arch = "wasm32"))]
-use crate::theme::{ImportError, import_theme, refresh_registry};
-use crate::theme::{ThemeThumbnailCache, ThemeThumbnailPair};
-use crate::ui_focus::{FocusGroup, FocusRow, Focusable, FocusedButton};
-use crate::ui_modal::{
-    ButtonVariant, ModalButton, ModalScrim, spawn_modal, spawn_modal_actions, spawn_modal_button,
-    spawn_modal_header,
-};
-use crate::ui_theme::{
-    BG_BASE, BG_ELEVATED, BG_ELEVATED_HI, BORDER_SUBTLE, BORDER_SUBTLE_HC, HighContrastBackground,
-    HighContrastBorder, RADIUS_SM, SPACE_2, STATE_SUCCESS, TEXT_PRIMARY, TEXT_SECONDARY, TYPE_BODY,
-    TYPE_BODY_LG, TYPE_CAPTION, VAL_SPACE_2, VAL_SPACE_3, Z_MODAL_PANEL,
-};
-use crate::ui_tooltip::Tooltip;
+use crate::resources::SettingsScrollPos;
+use crate::theme::ThemeThumbnailPair;
+
+mod input;
+mod ui;
+mod updates;
+
+use input::*;
+use ui::*;
+use updates::*;
 
 /// Side length of a swatch button in the card-back / background pickers.
 /// Smaller than the smallest spacing rung so it stays a literal.
@@ -483,139 +468,6 @@ fn merge_geometry(
 // Systems
 // ---------------------------------------------------------------------------
 
-fn handle_volume_keys(
-    keys: Res<ButtonInput<KeyCode>>,
-    mut settings: ResMut<SettingsResource>,
-    path: Res<SettingsStoragePath>,
-    mut changed: MessageWriter<SettingsChangedEvent>,
-    mut toast: MessageWriter<InfoToastEvent>,
-) {
-    let mut delta = 0.0_f32;
-    if keys.just_pressed(KeyCode::BracketLeft) {
-        delta -= SFX_STEP;
-    }
-    if keys.just_pressed(KeyCode::BracketRight) {
-        delta += SFX_STEP;
-    }
-    if delta == 0.0 {
-        return;
-    }
-    let before = settings.0.sfx_volume;
-    let after = settings.0.adjust_sfx_volume(delta);
-    if (before - after).abs() < f32::EPSILON {
-        return;
-    }
-    persist(&path, &settings.0);
-    changed.write(SettingsChangedEvent(settings.0.clone()));
-    toast.write(InfoToastEvent(format!(
-        "SFX volume: {}%",
-        (after * 100.0).round() as i32
-    )));
-}
-
-/// Opens or closes the Settings panel — `O` keyboard accelerator or
-/// `ToggleSettingsRequestEvent` from the HUD Menu popover.
-fn toggle_settings_screen(
-    keys: Res<ButtonInput<KeyCode>>,
-    mut requests: MessageReader<ToggleSettingsRequestEvent>,
-    mut screen: ResMut<SettingsScreen>,
-) {
-    let button_clicked = requests.read().count() > 0;
-    if keys.just_pressed(KeyCode::KeyO) || button_clicked {
-        screen.0 = !screen.0;
-    }
-}
-
-/// Spawns the Settings panel when `SettingsScreen` becomes `true`;
-/// despawns it when it becomes `false`.
-#[allow(clippy::too_many_arguments)]
-fn sync_settings_panel_visibility(
-    screen: Res<SettingsScreen>,
-    panels: Query<Entity, With<SettingsPanel>>,
-    other_modal_scrims: Query<(), (With<ModalScrim>, Without<SettingsPanel>)>,
-    scroll_nodes: Query<&ScrollPosition, With<SettingsScrollNode>>,
-    mut scroll_pos: ResMut<SettingsScrollPos>,
-    mut commands: Commands,
-    settings: Res<SettingsResource>,
-    sync_status: Option<Res<SyncStatusResource>>,
-    progress: Option<Res<ProgressResource>>,
-    font_res: Option<Res<FontResource>>,
-    theme_registry: Option<Res<crate::theme::ThemeRegistry>>,
-    theme_thumbs: Option<Res<ThemeThumbnailCache>>,
-    card_images: Option<Res<crate::card_plugin::CardImageSet>>,
-) {
-    if !screen.is_changed() {
-        return;
-    }
-    if screen.0 {
-        if panels.is_empty() && other_modal_scrims.is_empty() {
-            let status_label = sync_status.map_or_else(
-                || "Status: local only".to_string(),
-                |s| sync_status_label(&s.0),
-            );
-            let unlocked_backs = progress
-                .as_ref()
-                .map_or(&[0][..], |p| p.0.unlocked_card_backs.as_slice());
-            let unlocked_bgs = progress
-                .as_ref()
-                .map_or(&[0][..], |p| p.0.unlocked_backgrounds.as_slice());
-            // Snapshot themes by id, display_name and (optional)
-            // thumbnail pair so spawn_settings_panel doesn't have to
-            // know about the registry / cache shapes. Empty when
-            // ThemeRegistryPlugin isn't installed (tests under
-            // MinimalPlugins) — the picker row simply won't render.
-            // Missing thumbnails (cache not ready, or partial user
-            // theme) leave `thumbnails: None` so the chip renders its
-            // plain-text fallback instead of a broken sprite.
-            let themes: Vec<ThemePickerEntry> = theme_registry
-                .as_deref()
-                .map(|r| {
-                    r.iter()
-                        .map(|e| ThemePickerEntry {
-                            id: e.id.clone(),
-                            display_name: e.display_name.clone(),
-                            thumbnails: theme_thumbs
-                                .as_deref()
-                                .and_then(|c| c.get(&e.id))
-                                .filter(|p| p.is_fully_populated())
-                                .cloned(),
-                        })
-                        .collect()
-                })
-                .unwrap_or_default();
-            // The active card-art theme can supply its own back image —
-            // see `card_plugin::CardImageSet::theme_back`. When that is
-            // populated the legacy "Card Back" picker has no visible
-            // effect, so we render it muted with an explanatory caption
-            // rather than letting the player click swatches that do
-            // nothing. Absent under `MinimalPlugins`; treated as
-            // "no override" in that case.
-            let theme_overrides_back = card_images
-                .as_ref()
-                .is_some_and(|cs| cs.theme_back.is_some());
-            spawn_settings_panel(
-                &mut commands,
-                &settings.0,
-                &status_label,
-                unlocked_backs,
-                unlocked_bgs,
-                &themes,
-                scroll_pos.0,
-                font_res.as_deref(),
-                theme_overrides_back,
-            );
-        }
-    } else {
-        // Save the current scroll offset before despawning the panel.
-        if let Ok(sp) = scroll_nodes.single() {
-            scroll_pos.0 = sp.0.y;
-        }
-        for entity in &panels {
-            commands.entity(entity).despawn();
-        }
-    }
-}
-
 /// Returns the next unlocked index after `current` in the sorted `unlocked` list.
 /// Wraps around. Falls back to `unlocked[0]` if `current` is not found.
 #[cfg(test)]
@@ -627,954 +479,6 @@ fn cycle_unlocked(unlocked: &[usize], current: usize) -> usize {
     unlocked[(pos + 1) % unlocked.len()]
 }
 
-/// Keeps the sync-status text node current while the panel is open.
-fn update_sync_status_text(
-    sync_status: Option<Res<SyncStatusResource>>,
-    mut text_nodes: Query<&mut Text, With<SyncStatusText>>,
-) {
-    let Some(status) = sync_status else {
-        return;
-    };
-    if !status.is_changed() {
-        return;
-    }
-    let label = sync_status_label(&status.0);
-    for mut text in &mut text_nodes {
-        **text = label.clone();
-    }
-}
-
-fn update_card_back_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<CardBackText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = card_back_label(settings.0.selected_card_back);
-    }
-}
-
-fn update_background_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<BackgroundText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = background_label(settings.0.selected_background);
-    }
-}
-
-fn update_anim_speed_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<AnimSpeedText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = anim_speed_label(&settings.0.animation_speed);
-    }
-}
-
-fn update_color_blind_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<ColorBlindText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = color_blind_label(settings.0.color_blind_mode);
-    }
-}
-
-fn update_high_contrast_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<HighContrastText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = on_off_label(settings.0.high_contrast_mode);
-    }
-}
-
-/// Repaints `BorderColor` on every entity tagged with
-/// [`HighContrastBorder`] based on `Settings::high_contrast_mode`.
-/// Off → the marker's `default_color`; on → `BORDER_SUBTLE_HC`
-/// (`#a0a0a0`). Compares against the current border colour and
-/// only mutates when different so Bevy's change-detection
-/// doesn't trigger repaints every frame.
-///
-/// Spec at `design-system.md` §Accessibility (#2): under HC,
-/// outlines boost from `#505050` (BORDER_STRONG) to `#a0a0a0` so
-/// modal panels, popover edges, and focus-ring carriers stay
-/// legible on low-quality displays / for low-vision users.
-///
-/// Tagged sites in v0.21.x: the modal scaffold's card border
-/// (`ui_modal::spawn_modal`). More sites can be tagged in
-/// follow-ups by adding `HighContrastBorder::with_default(...)`
-/// to their spawn tuple.
-fn update_high_contrast_borders(
-    settings: Res<SettingsResource>,
-    mut borders: Query<(&HighContrastBorder, &mut BorderColor)>,
-) {
-    let high_contrast = settings.0.high_contrast_mode;
-    for (marker, mut border) in borders.iter_mut() {
-        let target = if high_contrast {
-            BORDER_SUBTLE_HC
-        } else {
-            marker.default_color
-        };
-        // Only mutate when actually different — avoids per-frame
-        // change-detection churn. `border.left` is representative
-        // because every tagged site uses `BorderColor::all(...)`.
-        if border.left != target {
-            *border = BorderColor::all(target);
-        }
-    }
-}
-
-/// Repaints `BackgroundColor` on every entity tagged with
-/// [`HighContrastBackground`] based on `Settings::high_contrast_mode`.
-/// Off → the marker's `default_color`; on → `BORDER_SUBTLE_HC`
-/// (`#a0a0a0`). Compares against the current background and only
-/// mutates when different so Bevy's change-detection doesn't trigger
-/// repaints every frame.
-///
-/// Parallel to [`update_high_contrast_borders`]. Same on/off rule,
-/// same change-suppression idiom, different colour channel —
-/// `BackgroundColor` for tick marks, decorative strips, fine
-/// separators that paint their shape directly rather than via a
-/// `BorderColor` on a wider Node.
-///
-/// Tagged sites in v0.21.x: the replay overlay's 1 px scrub track
-/// + 5 quarter-mark notch ticks (`replay_overlay::spawn_overlay`).
-///
-/// More sites can be tagged in follow-ups by adding
-/// `HighContrastBackground::with_default(...)` to their spawn tuple.
-pub(crate) fn update_high_contrast_backgrounds(
-    settings: Res<SettingsResource>,
-    mut backgrounds: Query<(&HighContrastBackground, &mut BackgroundColor)>,
-) {
-    let high_contrast = settings.0.high_contrast_mode;
-    for (marker, mut bg) in backgrounds.iter_mut() {
-        let target = if high_contrast {
-            marker.hc_color
-        } else {
-            marker.default_color
-        };
-        if bg.0 != target {
-            *bg = BackgroundColor(target);
-        }
-    }
-}
-
-fn update_reduce_motion_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<ReduceMotionText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = on_off_label(settings.0.reduce_motion_mode);
-    }
-}
-
-fn update_touch_input_mode_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<TouchInputModeText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = touch_input_mode_label(&settings.0.touch_input_mode);
-    }
-}
-
-/// Refreshes the live "Winnable deals only" toggle value in the
-/// Gameplay section whenever `SettingsResource` changes (button click,
-/// hand-edited `settings.json` reload, etc.).
-fn update_winnable_deals_only_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<WinnableDealsOnlyText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = winnable_deals_only_label(settings.0.winnable_deals_only);
-    }
-}
-
-/// Refreshes the live "Share usage data" toggle value in the Privacy section
-/// whenever `SettingsResource` changes.
-fn update_analytics_enabled_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<AnalyticsEnabledText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = on_off_label(settings.0.analytics_enabled);
-    }
-}
-
-/// Refreshes the live "Smart window size" toggle value whenever
-/// `SettingsResource` changes. The flag is stored negatively as
-/// `disable_smart_default_size`, so the label inverts.
-fn update_smart_default_size_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<SmartDefaultSizeText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = smart_default_size_label(!settings.0.disable_smart_default_size);
-    }
-}
-
-/// Refreshes the live tooltip-delay value in the Gameplay section
-/// whenever `SettingsResource` changes (slider buttons, hand-edited
-/// settings.json reload, etc.).
-fn update_tooltip_delay_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<TooltipDelayText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = tooltip_delay_label(settings.0.tooltip_delay_secs);
-    }
-}
-
-/// Refreshes the live time-bonus-multiplier value in the Gameplay
-/// section whenever `SettingsResource` changes.
-fn update_time_bonus_multiplier_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<TimeBonusMultiplierText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = time_bonus_label(settings.0.time_bonus_multiplier);
-    }
-}
-
-/// Refreshes the live replay-playback per-move-interval value in the
-/// Gameplay section whenever `SettingsResource` changes (slider buttons,
-/// hand-edited settings.json reload, etc.).
-fn update_replay_move_interval_text(
-    settings: Res<SettingsResource>,
-    mut text_nodes: Query<&mut Text, With<ReplayMoveIntervalText>>,
-) {
-    if !settings.is_changed() {
-        return;
-    }
-    for mut text in &mut text_nodes {
-        **text = replay_move_interval_label(settings.0.replay_move_interval_secs);
-    }
-}
-
-fn card_back_label(idx: usize) -> String {
-    if idx == 0 {
-        "Default".to_string()
-    } else {
-        format!("Style {idx}")
-    }
-}
-
-fn background_label(idx: usize) -> String {
-    if idx == 0 {
-        "Default".to_string()
-    } else {
-        format!("Style {idx}")
-    }
-}
-
-fn sync_status_label(status: &SyncStatus) -> String {
-    match status {
-        SyncStatus::Idle => "Status: idle".to_string(),
-        SyncStatus::Syncing => "Status: syncing…".to_string(),
-        SyncStatus::LastSynced(t) => {
-            let secs = chrono::Utc::now()
-                .signed_duration_since(*t)
-                .num_seconds()
-                .max(0);
-            if secs < 60 {
-                format!("Last synced: {secs}s ago")
-            } else {
-                format!("Last synced: {}m ago", secs / 60)
-            }
-        }
-        SyncStatus::Error(e) => format!("Sync error: {e}"),
-    }
-}
-
-/// Reacts to button presses inside the Settings panel.
-#[allow(clippy::too_many_arguments, clippy::type_complexity)]
-fn handle_settings_buttons(
-    interaction_query: Query<(&Interaction, &SettingsButton), Changed<Interaction>>,
-    mut settings: ResMut<SettingsResource>,
-    mut screen: ResMut<SettingsScreen>,
-    path: Res<SettingsStoragePath>,
-    mut changed: MessageWriter<SettingsChangedEvent>,
-    mut sfx_text: Query<
-        &mut Text,
-        (
-            With<SfxVolumeText>,
-            Without<MusicVolumeText>,
-            Without<DrawModeText>,
-            Without<ThemeText>,
-            Without<AnimSpeedText>,
-            Without<ColorBlindText>,
-            Without<HighContrastText>,
-            Without<ReduceMotionText>,
-        ),
-    >,
-    mut music_text: Query<
-        &mut Text,
-        (
-            With<MusicVolumeText>,
-            Without<SfxVolumeText>,
-            Without<DrawModeText>,
-            Without<ThemeText>,
-            Without<AnimSpeedText>,
-            Without<ColorBlindText>,
-            Without<HighContrastText>,
-            Without<ReduceMotionText>,
-        ),
-    >,
-    mut draw_text: Query<
-        &mut Text,
-        (
-            With<DrawModeText>,
-            Without<SfxVolumeText>,
-            Without<MusicVolumeText>,
-            Without<ThemeText>,
-            Without<AnimSpeedText>,
-            Without<ColorBlindText>,
-            Without<HighContrastText>,
-            Without<ReduceMotionText>,
-        ),
-    >,
-    mut theme_text: Query<
-        &mut Text,
-        (
-            With<ThemeText>,
-            Without<SfxVolumeText>,
-            Without<MusicVolumeText>,
-            Without<DrawModeText>,
-            Without<AnimSpeedText>,
-            Without<ColorBlindText>,
-            Without<HighContrastText>,
-            Without<ReduceMotionText>,
-        ),
-    >,
-    mut anim_speed_text: Query<
-        &mut Text,
-        (
-            With<AnimSpeedText>,
-            Without<SfxVolumeText>,
-            Without<MusicVolumeText>,
-            Without<DrawModeText>,
-            Without<ThemeText>,
-            Without<ColorBlindText>,
-            Without<HighContrastText>,
-            Without<ReduceMotionText>,
-        ),
-    >,
-    mut color_blind_text: Query<
-        &mut Text,
-        (
-            With<ColorBlindText>,
-            Without<SfxVolumeText>,
-            Without<MusicVolumeText>,
-            Without<DrawModeText>,
-            Without<ThemeText>,
-            Without<AnimSpeedText>,
-            Without<HighContrastText>,
-            Without<ReduceMotionText>,
-        ),
-    >,
-    mut high_contrast_text: Query<
-        &mut Text,
-        (
-            With<HighContrastText>,
-            Without<SfxVolumeText>,
-            Without<MusicVolumeText>,
-            Without<DrawModeText>,
-            Without<ThemeText>,
-            Without<AnimSpeedText>,
-            Without<ColorBlindText>,
-            Without<ReduceMotionText>,
-        ),
-    >,
-    mut reduce_motion_text: Query<
-        &mut Text,
-        (
-            With<ReduceMotionText>,
-            Without<SfxVolumeText>,
-            Without<MusicVolumeText>,
-            Without<DrawModeText>,
-            Without<ThemeText>,
-            Without<AnimSpeedText>,
-            Without<ColorBlindText>,
-            Without<HighContrastText>,
-        ),
-    >,
-) {
-    for (interaction, button) in &interaction_query {
-        if *interaction != Interaction::Pressed {
-            continue;
-        }
-        match button {
-            SettingsButton::SfxDown => {
-                let before = settings.0.sfx_volume;
-                let after = settings.0.adjust_sfx_volume(-SFX_STEP);
-                if (before - after).abs() > f32::EPSILON {
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                    if let Ok(mut t) = sfx_text.single_mut() {
-                        **t = format!("{after:.2}");
-                    }
-                }
-            }
-            SettingsButton::SfxUp => {
-                let before = settings.0.sfx_volume;
-                let after = settings.0.adjust_sfx_volume(SFX_STEP);
-                if (before - after).abs() > f32::EPSILON {
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                    if let Ok(mut t) = sfx_text.single_mut() {
-                        **t = format!("{after:.2}");
-                    }
-                }
-            }
-            SettingsButton::MusicDown => {
-                let before = settings.0.music_volume;
-                let after = settings.0.adjust_music_volume(-SFX_STEP);
-                if (before - after).abs() > f32::EPSILON {
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                    if let Ok(mut t) = music_text.single_mut() {
-                        **t = format!("{after:.2}");
-                    }
-                }
-            }
-            SettingsButton::MusicUp => {
-                let before = settings.0.music_volume;
-                let after = settings.0.adjust_music_volume(SFX_STEP);
-                if (before - after).abs() > f32::EPSILON {
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                    if let Ok(mut t) = music_text.single_mut() {
-                        **t = format!("{after:.2}");
-                    }
-                }
-            }
-            SettingsButton::ToggleDrawMode => {
-                settings.0.draw_mode = match settings.0.draw_mode {
-                    DrawStockConfig::DrawOne => DrawStockConfig::DrawThree,
-                    DrawStockConfig::DrawThree => DrawStockConfig::DrawOne,
-                };
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-                if let Ok(mut t) = draw_text.single_mut() {
-                    **t = draw_mode_label(&settings.0.draw_mode);
-                }
-            }
-            SettingsButton::CycleAnimSpeed => {
-                settings.0.animation_speed = match settings.0.animation_speed {
-                    AnimSpeed::Normal => AnimSpeed::Fast,
-                    AnimSpeed::Fast => AnimSpeed::Instant,
-                    AnimSpeed::Instant => AnimSpeed::Normal,
-                };
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-                if let Ok(mut t) = anim_speed_text.single_mut() {
-                    **t = anim_speed_label(&settings.0.animation_speed);
-                }
-            }
-            SettingsButton::TooltipDelayDown => {
-                let before = settings.0.tooltip_delay_secs;
-                let after = settings.0.adjust_tooltip_delay(-TOOLTIP_DELAY_STEP_SECS);
-                if (before - after).abs() > f32::EPSILON {
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                    // The Text node is refreshed by `update_tooltip_delay_text`
-                    // on the next frame via `settings.is_changed()`.
-                }
-            }
-            SettingsButton::TooltipDelayUp => {
-                let before = settings.0.tooltip_delay_secs;
-                let after = settings.0.adjust_tooltip_delay(TOOLTIP_DELAY_STEP_SECS);
-                if (before - after).abs() > f32::EPSILON {
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                }
-            }
-            SettingsButton::TimeBonusDown => {
-                let before = settings.0.time_bonus_multiplier;
-                let after = settings
-                    .0
-                    .adjust_time_bonus_multiplier(-TIME_BONUS_MULTIPLIER_STEP);
-                if (before - after).abs() > f32::EPSILON {
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                    // The Text node is refreshed by
-                    // `update_time_bonus_multiplier_text` on the next
-                    // frame via `settings.is_changed()`.
-                }
-            }
-            SettingsButton::TimeBonusUp => {
-                let before = settings.0.time_bonus_multiplier;
-                let after = settings
-                    .0
-                    .adjust_time_bonus_multiplier(TIME_BONUS_MULTIPLIER_STEP);
-                if (before - after).abs() > f32::EPSILON {
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                }
-            }
-            SettingsButton::ReplayMoveIntervalDown => {
-                let before = settings.0.replay_move_interval_secs;
-                let after = settings
-                    .0
-                    .adjust_replay_move_interval(-REPLAY_MOVE_INTERVAL_STEP_SECS);
-                if (before - after).abs() > f32::EPSILON {
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                    // The Text node is refreshed by
-                    // `update_replay_move_interval_text` on the next
-                    // frame via `settings.is_changed()`.
-                }
-            }
-            SettingsButton::ReplayMoveIntervalUp => {
-                let before = settings.0.replay_move_interval_secs;
-                let after = settings
-                    .0
-                    .adjust_replay_move_interval(REPLAY_MOVE_INTERVAL_STEP_SECS);
-                if (before - after).abs() > f32::EPSILON {
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                }
-            }
-            SettingsButton::ToggleTheme => {
-                settings.0.theme = match settings.0.theme {
-                    Theme::Green => Theme::Blue,
-                    Theme::Blue => Theme::Dark,
-                    Theme::Dark => Theme::Green,
-                };
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-                if let Ok(mut t) = theme_text.single_mut() {
-                    **t = theme_label(&settings.0.theme);
-                }
-            }
-            SettingsButton::ToggleColorBlind => {
-                settings.0.color_blind_mode = !settings.0.color_blind_mode;
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-                if let Ok(mut t) = color_blind_text.single_mut() {
-                    **t = color_blind_label(settings.0.color_blind_mode);
-                }
-            }
-            SettingsButton::ToggleHighContrast => {
-                settings.0.high_contrast_mode = !settings.0.high_contrast_mode;
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-                if let Ok(mut t) = high_contrast_text.single_mut() {
-                    **t = on_off_label(settings.0.high_contrast_mode);
-                }
-            }
-            SettingsButton::ToggleReduceMotion => {
-                settings.0.reduce_motion_mode = !settings.0.reduce_motion_mode;
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-                if let Ok(mut t) = reduce_motion_text.single_mut() {
-                    **t = on_off_label(settings.0.reduce_motion_mode);
-                }
-            }
-            SettingsButton::ToggleTouchInputMode => {
-                use solitaire_data::settings::TouchInputMode;
-                settings.0.touch_input_mode = match settings.0.touch_input_mode {
-                    TouchInputMode::OneTap => TouchInputMode::TapToSelect,
-                    TouchInputMode::TapToSelect => TouchInputMode::OneTap,
-                };
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-                // Text refreshed by `update_touch_input_mode_text` next frame.
-            }
-            SettingsButton::ToggleWinnableDealsOnly => {
-                settings.0.winnable_deals_only = !settings.0.winnable_deals_only;
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-                // The Text node is refreshed by `update_winnable_deals_only_text`
-                // on the next frame via `settings.is_changed()`.
-            }
-            SettingsButton::ToggleAnalytics => {
-                settings.0.analytics_enabled = !settings.0.analytics_enabled;
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-                // Text refreshed by `update_analytics_enabled_text` next frame.
-            }
-            SettingsButton::ToggleSmartDefaultSize => {
-                settings.0.disable_smart_default_size = !settings.0.disable_smart_default_size;
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-                // The Text node is refreshed by
-                // `update_smart_default_size_text` next frame. The
-                // sizer system is gated only at startup, so flipping
-                // this mid-session takes effect on the next launch —
-                // documented on the field in `solitaire_data::Settings`.
-            }
-            SettingsButton::SelectCardBack(idx) => {
-                settings.0.selected_card_back = *idx;
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-            }
-            SettingsButton::SelectBackground(idx) => {
-                settings.0.selected_background = *idx;
-                persist(&path, &settings.0);
-                changed.write(SettingsChangedEvent(settings.0.clone()));
-            }
-            SettingsButton::SelectTheme(theme_id) => {
-                if settings.0.selected_theme_id != *theme_id {
-                    settings.0.selected_theme_id = theme_id.clone();
-                    persist(&path, &settings.0);
-                    changed.write(SettingsChangedEvent(settings.0.clone()));
-                }
-            }
-            #[cfg(not(target_arch = "wasm32"))]
-            SettingsButton::ScanThemes => {
-                // Handled by `handle_scan_themes`.
-            }
-            SettingsButton::SyncNow
-            | SettingsButton::ConnectSync
-            | SettingsButton::DisconnectSync
-            | SettingsButton::DeleteAccount => {
-                // Handled by `handle_sync_buttons`.
-            }
-            SettingsButton::Done => {
-                screen.0 = false;
-            }
-        }
-    }
-}
-
-/// Handles sync-related settings buttons: Sync Now, Connect, Disconnect,
-/// and Delete Account. Split from `handle_settings_buttons` to stay within
-/// Bevy's 16-parameter system limit.
-fn handle_sync_buttons(
-    interaction_query: Query<(&Interaction, &SettingsButton), Changed<Interaction>>,
-    mut manual_sync: MessageWriter<ManualSyncRequestEvent>,
-    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 {
-            continue;
-        }
-        match button {
-            SettingsButton::SyncNow => {
-                manual_sync.write(ManualSyncRequestEvent);
-            }
-            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);
-            }
-            _ => {}
-        }
-    }
-}
-
-fn draw_mode_label(mode: &DrawStockConfig) -> String {
-    match mode {
-        DrawStockConfig::DrawOne => "Draw 1".into(),
-        DrawStockConfig::DrawThree => "Draw 3".into(),
-    }
-}
-
-fn anim_speed_label(speed: &AnimSpeed) -> String {
-    match speed {
-        AnimSpeed::Normal => "Normal".into(),
-        AnimSpeed::Fast => "Fast".into(),
-        AnimSpeed::Instant => "Instant".into(),
-    }
-}
-
-fn theme_label(theme: &Theme) -> String {
-    match theme {
-        Theme::Green => "Green".into(),
-        Theme::Blue => "Blue".into(),
-        Theme::Dark => "Dark".into(),
-    }
-}
-
-fn color_blind_label(enabled: bool) -> String {
-    if enabled { "ON".into() } else { "OFF".into() }
-}
-
-/// Generic ON/OFF label shared by the high-contrast and reduce-
-/// motion accessibility toggles. Same format as
-/// [`color_blind_label`] / [`winnable_deals_only_label`] —
-/// keeping all simple boolean toggle rows visually uniform.
-fn on_off_label(enabled: bool) -> String {
-    if enabled { "ON".into() } else { "OFF".into() }
-}
-
-/// Display string for the "Winnable deals only" toggle. Mirrors
-/// [`color_blind_label`] — "ON" / "OFF" — so the layout is uniform
-/// with the rest of the Gameplay-section toggles.
-fn winnable_deals_only_label(enabled: bool) -> String {
-    if enabled { "ON".into() } else { "OFF".into() }
-}
-
-fn touch_input_mode_label(mode: &solitaire_data::settings::TouchInputMode) -> String {
-    use solitaire_data::settings::TouchInputMode;
-    match mode {
-        TouchInputMode::OneTap => "One-tap".into(),
-        TouchInputMode::TapToSelect => "Tap to select".into(),
-    }
-}
-
-/// Display string for the "Smart window size" toggle. The argument
-/// is the *enabled* state (i.e. the inverse of the underlying
-/// `disable_smart_default_size` field) so reading the label gives
-/// the player intuitive ON/OFF semantics.
-fn smart_default_size_label(enabled: bool) -> String {
-    if enabled { "ON".into() } else { "OFF".into() }
-}
-
-/// Formats the tooltip-hover delay for display in the Settings panel.
-/// `0.0` reads as `"Instant"` so the zero-delay case has a name; any
-/// other value prints as `"{n:.1} s"` (e.g. `"0.5 s"`, `"1.2 s"`).
-fn tooltip_delay_label(secs: f32) -> String {
-    if secs <= 0.0 {
-        "Instant".into()
-    } else {
-        format!("{secs:.1} s")
-    }
-}
-
-/// Formats the cosmetic time-bonus multiplier for display in the
-/// Settings panel. `0.0` reads as `"Off"` so the player understands the
-/// time-bonus row will be hidden; any other value prints as
-/// `"{n:.1}×"` (e.g. `"1.0×"`, `"1.5×"`).
-fn time_bonus_label(value: f32) -> String {
-    if value <= 0.0 {
-        "Off".into()
-    } else {
-        format!("{value:.1}×")
-    }
-}
-
-/// Formats the replay-playback per-move interval for display in the
-/// Settings panel. Mirrors [`tooltip_delay_label`] for parity — the
-/// readout is `"{n:.2} s/move"` (e.g. `"0.45 s/move"`, `"0.10 s/move"`),
-/// using two decimal places because the step is 0.05 s.
-fn replay_move_interval_label(secs: f32) -> String {
-    format!("{secs:.2} s/move")
-}
-
-/// Auto-attaches [`Focusable`] to every bespoke Settings button — icon
-/// buttons (volume +/−, toggle, cycle), swatch buttons (card-back,
-/// background pickers), and the "Sync Now" button. The "Done" button is
-/// already tagged by `attach_focusable_to_modal_buttons` (it carries
-/// [`ModalButton`]) and is filtered out here.
-///
-/// Walks ancestors via [`ChildOf`] to find the [`ModalScrim`] that owns
-/// the panel so the new [`Focusable`]'s group is bound to that scrim —
-/// same defensive shape as the Phase 1 / 2 attach systems.
-#[allow(clippy::type_complexity)]
-fn attach_focusable_to_settings_buttons(
-    mut commands: Commands,
-    new_buttons: Query<
-        (Entity, &SettingsButton),
-        (With<Button>, Without<Focusable>, Without<ModalButton>),
-    >,
-    parents: Query<&ChildOf>,
-    scrims: Query<(), With<ModalScrim>>,
-) {
-    for (button, settings_button) in &new_buttons {
-        let mut current = button;
-        let mut scrim_entity: Option<Entity> = None;
-        for _ in 0..32 {
-            if scrims.get(current).is_ok() {
-                scrim_entity = Some(current);
-                break;
-            }
-            match parents.get(current) {
-                Ok(parent) => current = parent.parent(),
-                Err(_) => break,
-            }
-        }
-        if let Some(scrim) = scrim_entity {
-            commands.entity(button).insert(Focusable {
-                group: FocusGroup::Modal(scrim),
-                order: settings_button.focus_order(),
-            });
-        }
-    }
-}
-
-/// Vertical padding (logical px) added around the focused button when
-/// scrolling it into view. Keeps the focus ring's halo visible above /
-/// below the viewport edge.
-const FOCUS_SCROLL_PADDING: f32 = SPACE_2;
-
-/// When the focused entity sits outside the visible Settings scroll
-/// viewport, adjust the viewport's [`ScrollPosition`] so the button is
-/// fully visible. No-op when:
-///
-/// - `FocusedButton` is `None`
-/// - the focused entity has no [`UiGlobalTransform`] / [`ComputedNode`]
-///   (e.g. a freshly-spawned modal hasn't laid out yet)
-/// - the focused entity is not a descendant of the
-///   [`SettingsPanelScrollable`] container
-///
-/// The viewport's visible Y range is `[scroll_y, scroll_y +
-/// viewport_height]` in physical pixels (matching `ComputedNode.size`).
-/// The focused button's vertical extent is computed from its
-/// `UiGlobalTransform.translation.y` (centre, physical) ± half its
-/// `ComputedNode.size.y`. Because the scroll container's local
-/// coordinates run [0, content_height] and the visible window is
-/// [scroll_y, scroll_y + viewport], we convert the button's window-
-/// space Y to container-local Y by subtracting the container's window-
-/// space top and adding the current scroll offset.
-#[allow(clippy::type_complexity)]
-fn scroll_focus_into_view(
-    focused: Res<FocusedButton>,
-    parents: Query<&ChildOf>,
-    nodes: Query<(&UiGlobalTransform, &ComputedNode)>,
-    mut containers: Query<
-        (&mut ScrollPosition, &UiGlobalTransform, &ComputedNode),
-        With<SettingsPanelScrollable>,
-    >,
-) {
-    let Some(target) = focused.0 else { return };
-    // Gather button geometry.
-    let Ok((target_transform, target_node)) = nodes.get(target) else {
-        return;
-    };
-
-    // Walk ancestors looking for the scroll container. Bounded to keep
-    // a malformed hierarchy from hanging the system.
-    let mut current = target;
-    let mut container_entity: Option<Entity> = None;
-    for _ in 0..32 {
-        if containers.get(current).is_ok() {
-            container_entity = Some(current);
-            break;
-        }
-        match parents.get(current) {
-            Ok(parent) => current = parent.parent(),
-            Err(_) => break,
-        }
-    }
-    let Some(container) = container_entity else {
-        return;
-    };
-
-    let Ok((mut scroll, container_transform, container_node)) = containers.get_mut(container)
-    else {
-        return;
-    };
-
-    // Geometry is reported in physical pixels by `ComputedNode.size` and
-    // `UiGlobalTransform.translation`. `ScrollPosition` is in logical px,
-    // so convert via `inverse_scale_factor` before we write.
-    let inv = target_node.inverse_scale_factor;
-    let target_height = target_node.size().y;
-    let target_centre_y = target_transform.translation.y;
-    let target_top = target_centre_y - target_height * 0.5;
-    let target_bottom = target_centre_y + target_height * 0.5;
-
-    let container_height = container_node.size().y;
-    let container_top = container_transform.translation.y - container_height * 0.5;
-
-    // Convert button window-space Y to container-local Y. The container
-    // is currently scrolled by `scroll.0.y` *logical* pixels — multiply
-    // by physical-per-logical to compare with physical pixel extents.
-    let scroll_phys = scroll.0.y / inv.max(f32::EPSILON);
-    let viewport_top = container_top + scroll_phys;
-    let viewport_bottom = viewport_top + container_height;
-
-    // Layout may not have run yet (zero size on first frame) — no
-    // sensible scroll target until the container has dimensions.
-    if container_height <= 0.0 {
-        return;
-    }
-
-    let pad_phys = FOCUS_SCROLL_PADDING / inv.max(f32::EPSILON);
-    if target_top < viewport_top {
-        // Button extends above the viewport — scroll up.
-        let new_top = target_top - pad_phys;
-        let delta = new_top - viewport_top;
-        scroll.0.y = ((scroll_phys + delta) * inv).max(0.0);
-    } else if target_bottom > viewport_bottom {
-        // Button extends below the viewport — scroll down.
-        let new_bottom = target_bottom + pad_phys;
-        let delta = new_bottom - viewport_bottom;
-        scroll.0.y = ((scroll_phys + delta) * inv).max(0.0);
-    }
-}
-
-/// Scrolls the settings panel inner card in response to mouse-wheel events.
-///
-/// `offset_y` increases downward (0 = top of content). Scrolling down (ev.y < 0)
-/// adds to the offset; scrolling up subtracts. Clamped to >= 0 so it never
-/// scrolls past the top.
-fn scroll_settings_panel(
-    mut scroll_evr: MessageReader<MouseWheel>,
-    screen: Res<SettingsScreen>,
-    mut scrollables: Query<&mut ScrollPosition, With<SettingsPanelScrollable>>,
-) {
-    if !screen.0 {
-        scroll_evr.clear();
-        return;
-    }
-    let delta_y: f32 = scroll_evr
-        .read()
-        .map(|ev| match ev.unit {
-            MouseScrollUnit::Line => ev.y * 50.0,
-            MouseScrollUnit::Pixel => ev.y,
-        })
-        .sum();
-    if delta_y == 0.0 {
-        return;
-    }
-    for mut sp in scrollables.iter_mut() {
-        sp.0.y = (sp.0.y - delta_y).max(0.0);
-    }
-}
-
-// ---------------------------------------------------------------------------
-// Window geometry persistence
-// ---------------------------------------------------------------------------
-
 /// Records `WindowResized` and `WindowMoved` events into
 /// [`PendingWindowGeometry`], coalescing every event arriving this frame
 /// into the latest pending geometry.
@@ -1650,1208 +554,5 @@ fn persist_window_geometry_after_debounce(
 // UI construction
 // ---------------------------------------------------------------------------
 
-/// Spawns the Settings modal.
-///
-/// `theme_overrides_back` is `true` when the active card-art theme
-/// supplies its own back (`CardImageSet::theme_back == Some(_)`). The
-/// "Card Back" picker is rendered with a small caption and the
-/// swatches are hidden in this state — the theme's back wins
-/// regardless of which legacy back is selected, so the picker would
-/// be inert otherwise.
-#[allow(clippy::too_many_arguments)]
-fn spawn_settings_panel(
-    commands: &mut Commands,
-    settings: &Settings,
-    sync_status: &str,
-    unlocked_card_backs: &[usize],
-    unlocked_backgrounds: &[usize],
-    themes: &[ThemePickerEntry],
-    scroll_offset: f32,
-    font_res: Option<&FontResource>,
-    theme_overrides_back: bool,
-) {
-    spawn_modal(commands, SettingsPanel, Z_MODAL_PANEL, |card| {
-        spawn_modal_header(card, "Settings", font_res);
-
-        // Scrollable body — contains every section so tall content stays
-        // reachable on short windows. The Done button below stays fixed
-        // outside the scroll so it's always one click away.
-        card.spawn((
-            SettingsPanelScrollable,
-            SettingsScrollNode,
-            ScrollPosition(Vec2::new(0.0, scroll_offset)),
-            Node {
-                flex_direction: FlexDirection::Column,
-                row_gap: VAL_SPACE_3,
-                max_height: Val::Vh(60.0),
-                overflow: Overflow::scroll_y(),
-                padding: UiRect::bottom(Val::Px(96.0)),
-                ..default()
-            },
-        ))
-        .with_children(|body| {
-            // --- Audio ---
-            section_label(body, "Audio", font_res);
-            volume_row(
-                body,
-                "SFX Volume",
-                settings.sfx_volume,
-                SfxVolumeText,
-                SettingsButton::SfxDown,
-                SettingsButton::SfxUp,
-                "Lower sound effects volume.",
-                "Raise sound effects volume.",
-                font_res,
-            );
-            volume_row(
-                body,
-                "Music Volume",
-                settings.music_volume,
-                MusicVolumeText,
-                SettingsButton::MusicDown,
-                SettingsButton::MusicUp,
-                "Lower music and ambience volume.",
-                "Raise music and ambience volume.",
-                font_res,
-            );
-
-            // --- Gameplay ---
-            section_label(body, "Gameplay", font_res);
-            toggle_row(
-                body,
-                "Draw Mode",
-                DrawModeText,
-                draw_mode_label(&settings.draw_mode),
-                SettingsButton::ToggleDrawMode,
-                "Switch between Draw 1 and Draw 3. Takes effect next deal.",
-                font_res,
-            );
-            toggle_row(
-                body,
-                "Winnable deals only",
-                WinnableDealsOnlyText,
-                winnable_deals_only_label(settings.winnable_deals_only),
-                SettingsButton::ToggleWinnableDealsOnly,
-                "When on, fresh Classic deals are filtered through a solver \
-                 (may take a moment when on).",
-                font_res,
-            );
-            toggle_row(
-                body,
-                "Anim Speed",
-                AnimSpeedText,
-                anim_speed_label(&settings.animation_speed),
-                SettingsButton::CycleAnimSpeed,
-                "Cycle animation speed: Normal, Fast, Instant.",
-                font_res,
-            );
-            tooltip_delay_row(
-                body,
-                settings.tooltip_delay_secs,
-                font_res,
-            );
-            time_bonus_multiplier_row(
-                body,
-                settings.time_bonus_multiplier,
-                font_res,
-            );
-            replay_move_interval_row(
-                body,
-                settings.replay_move_interval_secs,
-                font_res,
-            );
-            toggle_row(
-                body,
-                "Smart window size",
-                SmartDefaultSizeText,
-                smart_default_size_label(!settings.disable_smart_default_size),
-                SettingsButton::ToggleSmartDefaultSize,
-                "When ON, fresh launches resize the window to ~70 % of the \
-                 monitor. OFF pins the 1280\u{00D7}800 baseline. Saved \
-                 window size always wins.",
-                font_res,
-            );
-
-            // --- Cosmetic ---
-            section_label(body, "Cosmetic", font_res);
-            toggle_row(
-                body,
-                "Theme",
-                ThemeText,
-                theme_label(&settings.theme),
-                SettingsButton::ToggleTheme,
-                "Cycle felt color: Green, Blue, Dark.",
-                font_res,
-            );
-            toggle_row(
-                body,
-                "Color-blind Mode",
-                ColorBlindText,
-                color_blind_label(settings.color_blind_mode),
-                SettingsButton::ToggleColorBlind,
-                "Show shape glyphs alongside suit colors. Suit-blind friendly.",
-                font_res,
-            );
-            toggle_row(
-                body,
-                "High Contrast",
-                HighContrastText,
-                on_off_label(settings.high_contrast_mode),
-                SettingsButton::ToggleHighContrast,
-                "Boosts foreground + suit-red glyphs to higher-luminance variants for low-vision readers and low-quality displays.",
-                font_res,
-            );
-            toggle_row(
-                body,
-                "Reduce Motion",
-                ReduceMotionText,
-                on_off_label(settings.reduce_motion_mode),
-                SettingsButton::ToggleReduceMotion,
-                "Skips card-slide animations and other non-essential motion. Cards snap instantly to their target.",
-                font_res,
-            );
-            toggle_row(
-                body,
-                "Touch Input Mode",
-                TouchInputModeText,
-                touch_input_mode_label(&settings.touch_input_mode),
-                SettingsButton::ToggleTouchInputMode,
-                "One-tap: tap a card to auto-move it. Tap to select: first tap selects a card, second tap on a pile moves it.",
-                font_res,
-            );
-            if theme_overrides_back {
-                // The active theme provides its own back; the legacy
-                // picker has no visible effect, so we replace its
-                // swatch row with an informational caption. The
-                // player's `selected_card_back` value still
-                // round-trips through `settings.json` — the moment
-                // they switch to a theme without a back, the picker
-                // re-appears with their previous choice intact.
-                picker_row_overridden_by_theme(body, "Card Back", font_res);
-            } else {
-                picker_row(
-                    body,
-                    "Card Back",
-                    unlocked_card_backs,
-                    settings.selected_card_back,
-                    SettingsButton::SelectCardBack,
-                    "Choose your deck art. New backs unlock at higher levels.",
-                    font_res,
-                );
-            }
-            picker_row(
-                body,
-                "Background",
-                unlocked_backgrounds,
-                settings.selected_background,
-                SettingsButton::SelectBackground,
-                "Choose your felt art. New felts unlock at higher levels.",
-                font_res,
-            );
-            // Card-art theme picker — only renders when the registry has
-            // entries (production: always; tests: only when
-            // ThemeRegistryPlugin is installed).
-            if !themes.is_empty() {
-                theme_picker_row(
-                    body,
-                    "Card Theme",
-                    themes,
-                    &settings.selected_theme_id,
-                    "Choose card-face artwork. Imported themes appear here.",
-                    font_res,
-                );
-            }
-            #[cfg(not(target_arch = "wasm32"))]
-            import_themes_row(body, font_res);
-
-            // --- Privacy (only shown when a Matomo URL is configured) ---
-            if settings.matomo_url.is_some() {
-                section_label(body, "Privacy", font_res);
-                toggle_row(
-                    body,
-                    "Share usage data",
-                    AnalyticsEnabledText,
-                    on_off_label(settings.analytics_enabled),
-                    SettingsButton::ToggleAnalytics,
-                    "Sends anonymous game events to Matomo for aggregate analytics.",
-                    font_res,
-                );
-            }
-
-            // --- Sync ---
-            section_label(body, "Sync", font_res);
-            sync_row(body, sync_status, &settings.sync_backend, font_res);
-        });
-
-        // Done is the only action — primary so the player always knows
-        // how to leave the modal. `O` toggles it the same way.
-        spawn_modal_actions(card, |actions| {
-            spawn_modal_button(
-                actions,
-                SettingsButton::Done,
-                "Done",
-                Some("O"),
-                ButtonVariant::Primary,
-                font_res,
-            );
-        });
-    });
-}
-
-/// Section divider — small lavender label inside the scrollable body.
-fn section_label(parent: &mut ChildSpawnerCommands, title: &str, font_res: Option<&FontResource>) {
-    let font = TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_BODY,
-        ..default()
-    };
-    parent.spawn((Text::new(title), font, TextColor(TEXT_SECONDARY)));
-}
-
-/// `Label  0.80  [−]  [+]` — used for SFX and Music volume rows.
-///
-/// `tooltip_down` / `tooltip_up` are attached to the `−` / `+` buttons
-/// respectively so each glyph carries a one-line reminder of which channel
-/// it adjusts.
-#[allow(clippy::too_many_arguments)]
-fn volume_row<Marker: Component>(
-    parent: &mut ChildSpawnerCommands,
-    label: &str,
-    value: f32,
-    marker: Marker,
-    btn_down: SettingsButton,
-    btn_up: SettingsButton,
-    tooltip_down: &'static str,
-    tooltip_up: &'static str,
-    font_res: Option<&FontResource>,
-) {
-    let label_font = label_text_font(font_res);
-    let value_font = value_text_font(font_res);
-    // Row spans the full body width with a flex-grow spacer between
-    // the left-aligned label and the right-aligned controls cluster.
-    // Without `width: 100%` + the spacer, the label / value / buttons
-    // bunch against the left edge and a varying-length value (e.g.
-    // "0.80" → "1.00") shifts the +/− buttons sideways frame to
-    // frame, visually overlapping with adjacent UI on small windows.
-    parent
-        .spawn(Node {
-            flex_direction: FlexDirection::Row,
-            align_items: AlignItems::Center,
-            column_gap: VAL_SPACE_2,
-            width: Val::Percent(100.0),
-            ..default()
-        })
-        .with_children(|row| {
-            row.spawn((
-                Text::new(label.to_string()),
-                label_font,
-                TextColor(TEXT_SECONDARY),
-            ));
-            // Spacer: takes up all remaining horizontal space so the
-            // controls cluster sits flush against the right edge.
-            row.spawn(Node {
-                flex_grow: 1.0,
-                ..default()
-            });
-            // Controls cluster — value + decrement + increment held
-            // together so the buttons stay in fixed positions even
-            // as the value text width varies.
-            row.spawn(Node {
-                flex_direction: FlexDirection::Row,
-                align_items: AlignItems::Center,
-                column_gap: VAL_SPACE_2,
-                ..default()
-            })
-            .with_children(|cluster| {
-                cluster.spawn((
-                    marker,
-                    Text::new(format!("{value:.2}")),
-                    value_font,
-                    TextColor(TEXT_PRIMARY),
-                ));
-                icon_button(cluster, "−", btn_down, tooltip_down, font_res);
-                icon_button(cluster, "+", btn_up, tooltip_up, font_res);
-            });
-        });
-}
-
-/// `Tooltip Delay  0.5 s  [−]  [+]` — slider row for the player-tunable
-/// tooltip-hover dwell. Mirrors [`volume_row`] (label, current value,
-/// decrement, increment) but formats the value via [`tooltip_delay_label`]
-/// so `0.0` reads as `"Instant"` and other values as `"{n:.1} s"`.
-fn tooltip_delay_row(
-    parent: &mut ChildSpawnerCommands,
-    value_secs: f32,
-    font_res: Option<&FontResource>,
-) {
-    let label_font = label_text_font(font_res);
-    let value_font = value_text_font(font_res);
-    parent
-        .spawn(Node {
-            flex_direction: FlexDirection::Row,
-            align_items: AlignItems::Center,
-            column_gap: VAL_SPACE_2,
-            width: Val::Percent(100.0),
-            ..default()
-        })
-        .with_children(|row| {
-            row.spawn((
-                Text::new("Tooltip Delay".to_string()),
-                label_font,
-                TextColor(TEXT_SECONDARY),
-            ));
-            row.spawn(Node {
-                flex_grow: 1.0,
-                ..default()
-            });
-            row.spawn(Node {
-                flex_direction: FlexDirection::Row,
-                align_items: AlignItems::Center,
-                column_gap: VAL_SPACE_2,
-                ..default()
-            })
-            .with_children(|cluster| {
-                cluster.spawn((
-                    TooltipDelayText,
-                    Text::new(tooltip_delay_label(value_secs)),
-                    value_font,
-                    TextColor(TEXT_PRIMARY),
-                ));
-                icon_button(
-                    cluster,
-                    "−",
-                    SettingsButton::TooltipDelayDown,
-                    "Shorten the hover delay before tooltips appear.",
-                    font_res,
-                );
-                icon_button(
-                    cluster,
-                    "+",
-                    SettingsButton::TooltipDelayUp,
-                    "Lengthen the hover delay before tooltips appear.",
-                    font_res,
-                );
-            });
-        });
-}
-
-/// `Time bonus  1.0×  [−]  [+]` — slider row for the cosmetic
-/// `Settings::time_bonus_multiplier`. Mirrors [`tooltip_delay_row`]
-/// (label, current value, decrement, increment) but formats the value
-/// via [`time_bonus_label`] so `0.0` reads as `"Off"` and other values
-/// as `"{n:.1}×"`. The multiplier is **cosmetic** — adjusting it
-/// changes only the win-modal score breakdown, not the canonical
-/// scores recorded in stats / achievements / leaderboards.
-fn time_bonus_multiplier_row(
-    parent: &mut ChildSpawnerCommands,
-    value: f32,
-    font_res: Option<&FontResource>,
-) {
-    let label_font = label_text_font(font_res);
-    let value_font = value_text_font(font_res);
-    parent
-        .spawn(Node {
-            flex_direction: FlexDirection::Row,
-            align_items: AlignItems::Center,
-            column_gap: VAL_SPACE_2,
-            width: Val::Percent(100.0),
-            ..default()
-        })
-        .with_children(|row| {
-            row.spawn((
-                Text::new("Time bonus".to_string()),
-                label_font,
-                TextColor(TEXT_SECONDARY),
-            ));
-            row.spawn(Node {
-                flex_grow: 1.0,
-                ..default()
-            });
-            row.spawn(Node {
-                flex_direction: FlexDirection::Row,
-                align_items: AlignItems::Center,
-                column_gap: VAL_SPACE_2,
-                ..default()
-            })
-            .with_children(|cluster| {
-                cluster.spawn((
-                    TimeBonusMultiplierText,
-                    Text::new(time_bonus_label(value)),
-                    value_font,
-                    TextColor(TEXT_PRIMARY),
-                ));
-                icon_button(
-                    cluster,
-                    "−",
-                    SettingsButton::TimeBonusDown,
-                    "Shrink the time-bonus shown in the win modal. Cosmetic only.",
-                    font_res,
-                );
-                icon_button(
-                    cluster,
-                    "+",
-                    SettingsButton::TimeBonusUp,
-                    "Boost the time-bonus shown in the win modal. Cosmetic only.",
-                    font_res,
-                );
-            });
-        });
-}
-
-/// `Replay speed  0.45 s/move  [−]  [+]` — slider row for the
-/// player-tunable replay-playback per-move interval. Mirrors
-/// [`tooltip_delay_row`] (label, current value, decrement, increment)
-/// but formats the value via [`replay_move_interval_label`] as
-/// `"{n:.2} s/move"`. The decrement button speeds playback up
-/// (smaller interval); the increment slows it down — same direction
-/// convention as the tooltip-delay slider.
-fn replay_move_interval_row(
-    parent: &mut ChildSpawnerCommands,
-    value_secs: f32,
-    font_res: Option<&FontResource>,
-) {
-    let label_font = label_text_font(font_res);
-    let value_font = value_text_font(font_res);
-    parent
-        .spawn(Node {
-            flex_direction: FlexDirection::Row,
-            align_items: AlignItems::Center,
-            column_gap: VAL_SPACE_2,
-            width: Val::Percent(100.0),
-            ..default()
-        })
-        .with_children(|row| {
-            row.spawn((
-                Text::new("Replay speed".to_string()),
-                label_font,
-                TextColor(TEXT_SECONDARY),
-            ));
-            row.spawn(Node {
-                flex_grow: 1.0,
-                ..default()
-            });
-            row.spawn(Node {
-                flex_direction: FlexDirection::Row,
-                align_items: AlignItems::Center,
-                column_gap: VAL_SPACE_2,
-                ..default()
-            })
-            .with_children(|cluster| {
-                cluster.spawn((
-                    ReplayMoveIntervalText,
-                    Text::new(replay_move_interval_label(value_secs)),
-                    value_font,
-                    TextColor(TEXT_PRIMARY),
-                ));
-                icon_button(
-                    cluster,
-                    "−",
-                    SettingsButton::ReplayMoveIntervalDown,
-                    "Speed up replay playback (shorter per-move interval).",
-                    font_res,
-                );
-                icon_button(
-                    cluster,
-                    "+",
-                    SettingsButton::ReplayMoveIntervalUp,
-                    "Slow down replay playback (longer per-move interval).",
-                    font_res,
-                );
-            });
-        });
-}
-
-/// `Label  Value  [⇄]` — used for cycle/toggle rows (draw mode, theme,
-/// anim speed, colour-blind).
-///
-/// `tooltip` is attached to the `⇄` button so the cycle glyph carries a
-/// one-line reminder of what it iterates through.
-#[allow(clippy::too_many_arguments)]
-fn toggle_row<Marker: Component>(
-    parent: &mut ChildSpawnerCommands,
-    label: &str,
-    marker: Marker,
-    value: String,
-    action: SettingsButton,
-    tooltip: &'static str,
-    font_res: Option<&FontResource>,
-) {
-    let label_font = label_text_font(font_res);
-    let value_font = value_text_font(font_res);
-    parent
-        .spawn(Node {
-            flex_direction: FlexDirection::Row,
-            align_items: AlignItems::Center,
-            column_gap: VAL_SPACE_2,
-            width: Val::Percent(100.0),
-            ..default()
-        })
-        .with_children(|row| {
-            row.spawn((
-                Text::new(label.to_string()),
-                label_font,
-                TextColor(TEXT_SECONDARY),
-            ));
-            row.spawn(Node {
-                flex_grow: 1.0,
-                ..default()
-            });
-            row.spawn(Node {
-                flex_direction: FlexDirection::Row,
-                align_items: AlignItems::Center,
-                column_gap: VAL_SPACE_2,
-                ..default()
-            })
-            .with_children(|cluster| {
-                cluster.spawn((
-                    marker,
-                    Text::new(value),
-                    value_font,
-                    TextColor(TEXT_PRIMARY),
-                ));
-                icon_button(cluster, "⇄", action, tooltip, font_res);
-            });
-        });
-}
-
-/// Wrapping row of indexed swatch buttons — used for card-back and
-/// background pickers. The currently-selected swatch is tinted with
-/// `STATE_SUCCESS` so the user can see it without reading a label.
-///
-/// `tooltip` is attached to every swatch in the row so hovering any chip
-/// reveals what the picker controls and how new entries unlock.
-#[allow(clippy::too_many_arguments)]
-fn picker_row(
-    parent: &mut ChildSpawnerCommands,
-    label: &str,
-    unlocked: &[usize],
-    selected: usize,
-    make_button: impl Fn(usize) -> SettingsButton,
-    tooltip: &'static str,
-    font_res: Option<&FontResource>,
-) {
-    let label_font = label_text_font(font_res);
-    let chip_font = TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_BODY,
-        ..default()
-    };
-    parent
-        .spawn((
-            // The row container is a `FocusRow` so Left / Right arrow
-            // keys cycle within its swatch children. Tab still escapes
-            // the row to the next focusable in the modal.
-            FocusRow,
-            Node {
-                flex_direction: FlexDirection::Row,
-                align_items: AlignItems::Center,
-                column_gap: VAL_SPACE_2,
-                flex_wrap: FlexWrap::Wrap,
-                ..default()
-            },
-        ))
-        .with_children(|row| {
-            row.spawn((
-                Text::new(label.to_string()),
-                label_font,
-                TextColor(TEXT_SECONDARY),
-            ));
-            // Always show at least swatch 0 (default).
-            let entries: &[usize] = if unlocked.is_empty() { &[0] } else { unlocked };
-            for &idx in entries {
-                let is_selected = idx == selected;
-                let bg = if is_selected {
-                    STATE_SUCCESS
-                } else {
-                    BG_ELEVATED_HI
-                };
-                row.spawn((
-                    make_button(idx),
-                    Button,
-                    Tooltip::new(tooltip),
-                    Node {
-                        width: Val::Px(SWATCH_PX),
-                        height: Val::Px(SWATCH_PX),
-                        justify_content: JustifyContent::Center,
-                        align_items: AlignItems::Center,
-                        border: UiRect::all(Val::Px(1.0)),
-                        border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
-                        ..default()
-                    },
-                    BackgroundColor(bg),
-                    BorderColor::all(BORDER_SUBTLE),
-                    HighContrastBorder::with_default(BORDER_SUBTLE),
-                ))
-                .with_children(|b| {
-                    let text_color = if is_selected { BG_BASE } else { TEXT_PRIMARY };
-                    b.spawn((
-                        Text::new(format!("{}", idx + 1)),
-                        chip_font.clone(),
-                        TextColor(text_color),
-                    ));
-                });
-            }
-        });
-}
-
-/// Marker on the row spawned by [`picker_row_overridden_by_theme`] so
-/// tests can find the caption without depending on text-content
-/// matching.
-#[derive(Component, Debug)]
-pub(crate) struct CardBackPickerOverriddenByTheme;
-
-/// Marker placed on every preview-thumbnail [`ImageNode`] inside a
-/// theme picker chip. Lets tests assert that a chip's children include
-/// the rasterised preview pair, and lets a future system update or
-/// hot-swap thumbnails without scanning the whole UI tree.
-#[derive(Component, Debug)]
-pub(crate) struct ThemeThumbnailMarker;
-
-/// Renders the "Card Back" row in its overridden-by-theme state: a
-/// labelled caption explaining why the swatches are hidden, with no
-/// interactive children. This is what the player sees when the active
-/// card-art theme supplies its own `back.svg` — the theme's back wins
-/// over the legacy `selected_card_back` choice, so showing the
-/// swatches would only confuse the player into thinking they were
-/// changing something when they weren't.
-fn picker_row_overridden_by_theme(
-    parent: &mut ChildSpawnerCommands,
-    label: &str,
-    font_res: Option<&FontResource>,
-) {
-    let label_font = label_text_font(font_res);
-    let caption_font = TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_CAPTION,
-        ..default()
-    };
-    parent
-        .spawn((
-            CardBackPickerOverriddenByTheme,
-            Node {
-                flex_direction: FlexDirection::Row,
-                align_items: AlignItems::Center,
-                column_gap: VAL_SPACE_2,
-                ..default()
-            },
-        ))
-        .with_children(|row| {
-            row.spawn((
-                Text::new(label.to_string()),
-                label_font,
-                TextColor(TEXT_SECONDARY),
-            ));
-            row.spawn((
-                Text::new("Active theme provides its own back"),
-                caption_font,
-                TextColor(TEXT_SECONDARY),
-            ));
-        });
-}
-
-/// Logical width (px) of one preview thumbnail inside a picker chip.
-/// Mirrors [`crate::theme::THEME_THUMBNAIL_WIDTH_PX`] but at the UI
-/// scale used by Bevy's flex layout. The rasterised image itself is
-/// 100×140 px; the chip displays it at the same logical size so
-/// scaling artifacts stay minimal.
-const THUMBNAIL_LOGICAL_WIDTH_PX: f32 = 50.0;
-/// Logical height counterpart to [`THUMBNAIL_LOGICAL_WIDTH_PX`] —
-/// preserves the 2:3 card aspect.
-const THUMBNAIL_LOGICAL_HEIGHT_PX: f32 = 70.0;
-
-/// Picker row for card-art themes. Distinct from [`picker_row`]
-/// because themes are identified by `String` ids (matching
-/// `ThemeMeta::id`) instead of dense indices, and each chip carries
-/// the theme's display name plus a small Ace + back preview pair
-/// (when available in [`ThemeThumbnailCache`]).
-fn theme_picker_row(
-    parent: &mut ChildSpawnerCommands,
-    label: &str,
-    themes: &[ThemePickerEntry],
-    selected_id: &str,
-    tooltip: &'static str,
-    font_res: Option<&FontResource>,
-) {
-    let label_font = label_text_font(font_res);
-    let chip_font = TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_BODY,
-        ..default()
-    };
-    parent
-        .spawn((
-            FocusRow,
-            Node {
-                flex_direction: FlexDirection::Row,
-                align_items: AlignItems::Center,
-                column_gap: VAL_SPACE_2,
-                flex_wrap: FlexWrap::Wrap,
-                ..default()
-            },
-        ))
-        .with_children(|row| {
-            row.spawn((
-                Text::new(label.to_string()),
-                label_font,
-                TextColor(TEXT_SECONDARY),
-            ));
-            for entry in themes {
-                let is_selected = entry.id == selected_id;
-                let bg = if is_selected {
-                    STATE_SUCCESS
-                } else {
-                    BG_ELEVATED_HI
-                };
-                row.spawn((
-                    SettingsButton::SelectTheme(entry.id.clone()),
-                    Button,
-                    Tooltip::new(tooltip),
-                    Node {
-                        // Chips with thumbnails stack the preview pair
-                        // above the label so a glance reveals the
-                        // theme's art without hovering for the
-                        // tooltip.
-                        flex_direction: FlexDirection::Column,
-                        // Theme names are wider than numeric chips —
-                        // pad horizontally instead of using a fixed
-                        // square swatch.
-                        padding: UiRect::axes(VAL_SPACE_2, VAL_SPACE_2),
-                        min_height: Val::Px(SWATCH_PX),
-                        row_gap: VAL_SPACE_2,
-                        justify_content: JustifyContent::Center,
-                        align_items: AlignItems::Center,
-                        border: UiRect::all(Val::Px(1.0)),
-                        border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
-                        ..default()
-                    },
-                    BackgroundColor(bg),
-                    BorderColor::all(BORDER_SUBTLE),
-                    HighContrastBorder::with_default(BORDER_SUBTLE),
-                ))
-                .with_children(|b| {
-                    spawn_thumbnail_pair(b, entry.thumbnails.as_ref());
-                    let text_color = if is_selected { BG_BASE } else { TEXT_PRIMARY };
-                    b.spawn((
-                        Text::new(entry.display_name.clone()),
-                        chip_font.clone(),
-                        TextColor(text_color),
-                    ));
-                });
-            }
-        });
-}
-
-/// Spawns the Ace + back preview pair for a theme picker chip.
-///
-/// When `thumbnails` is `Some(_)` and both handles are non-default,
-/// renders two `ImageNode` siblings (Ace on the left, back on the
-/// right). When the thumbnails are missing or only partially loaded,
-/// renders two muted `BG_ELEVATED` placeholder rectangles at the same
-/// logical size — keeping the chip's overall footprint stable so the
-/// picker row layout doesn't reflow as the cache fills in.
-fn spawn_thumbnail_pair(
-    parent: &mut ChildSpawnerCommands,
-    thumbnails: Option<&ThemeThumbnailPair>,
-) {
-    parent
-        .spawn(Node {
-            flex_direction: FlexDirection::Row,
-            column_gap: VAL_SPACE_2,
-            align_items: AlignItems::Center,
-            ..default()
-        })
-        .with_children(|pair| match thumbnails {
-            Some(t) if t.is_fully_populated() => {
-                spawn_thumbnail_image(pair, t.ace.clone());
-                spawn_thumbnail_image(pair, t.back.clone());
-            }
-            _ => {
-                spawn_thumbnail_placeholder(pair);
-                spawn_thumbnail_placeholder(pair);
-            }
-        });
-}
-
-/// Spawns one `ImageNode` thumbnail at the canonical preview size.
-/// Tagged with [`ThemeThumbnailMarker`] so tests can scan a chip's
-/// children for the rendered preview without crawling the whole UI.
-fn spawn_thumbnail_image(parent: &mut ChildSpawnerCommands, image: Handle<Image>) {
-    parent.spawn((
-        ThemeThumbnailMarker,
-        ImageNode::new(image),
-        Node {
-            width: Val::Px(THUMBNAIL_LOGICAL_WIDTH_PX),
-            height: Val::Px(THUMBNAIL_LOGICAL_HEIGHT_PX),
-            ..default()
-        },
-    ));
-}
-
-/// Spawns a muted placeholder rectangle for the case where the cache
-/// has not yet generated thumbnails for a theme — or when a user theme
-/// is missing one of its preview SVGs. Same logical size as
-/// [`spawn_thumbnail_image`] so chip layout stays stable.
-fn spawn_thumbnail_placeholder(parent: &mut ChildSpawnerCommands) {
-    parent.spawn((
-        Node {
-            width: Val::Px(THUMBNAIL_LOGICAL_WIDTH_PX),
-            height: Val::Px(THUMBNAIL_LOGICAL_HEIGHT_PX),
-            border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
-            ..default()
-        },
-        BackgroundColor(BG_ELEVATED),
-    ));
-}
-
-/// Sync section row — shows different controls depending on whether a server
-/// backend is configured.
-fn sync_row(
-    parent: &mut ChildSpawnerCommands,
-    status_text: &str,
-    backend: &SyncBackend,
-    font_res: Option<&FontResource>,
-) {
-    let status_font = TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_BODY,
-        ..default()
-    };
-    let button_font = TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_CAPTION,
-        ..default()
-    };
-
-    // Helper closure to spawn a small settings-style pill button.
-    let small_button = |row: &mut ChildSpawnerCommands,
-                        marker: SettingsButton,
-                        label: &str,
-                        tooltip: String,
-                        font: TextFont| {
-        row.spawn((
-            marker,
-            Button,
-            Tooltip::new(tooltip),
-            Node {
-                padding: UiRect::axes(VAL_SPACE_3, VAL_SPACE_2),
-                justify_content: JustifyContent::Center,
-                border: UiRect::all(Val::Px(1.0)),
-                border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
-                ..default()
-            },
-            BackgroundColor(BG_ELEVATED_HI),
-            BorderColor::all(BORDER_SUBTLE),
-            HighContrastBorder::with_default(BORDER_SUBTLE),
-        ))
-        .with_children(|b| {
-            b.spawn((Text::new(label.to_string()), font, TextColor(TEXT_PRIMARY)));
-        });
-    };
-
-    parent
-        .spawn(Node {
-            flex_direction: FlexDirection::Column,
-            row_gap: VAL_SPACE_2,
-            ..default()
-        })
-        .with_children(|col| {
-            // Status line + inline action buttons.
-            col.spawn(Node {
-                flex_direction: FlexDirection::Row,
-                align_items: AlignItems::Center,
-                column_gap: VAL_SPACE_3,
-                flex_wrap: FlexWrap::Wrap,
-                row_gap: VAL_SPACE_2,
-                ..default()
-            })
-            .with_children(|row| {
-                row.spawn((
-                    SyncStatusText,
-                    Text::new(status_text.to_string()),
-                    status_font,
-                    TextColor(TEXT_SECONDARY),
-                ));
-
-                match backend {
-                    SyncBackend::Local => {
-                        small_button(
-                            row,
-                            SettingsButton::ConnectSync,
-                            "Connect",
-                            "Connect to a self-hosted Ferrous Solitaire sync server.".to_string(),
-                            button_font,
-                        );
-                    }
-                    SyncBackend::SolitaireServer { username, .. } => {
-                        // Show the logged-in username as a secondary label.
-                        row.spawn((
-                            Text::new(format!("({username})")),
-                            TextFont {
-                                font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-                                font_size: TYPE_CAPTION,
-                                ..default()
-                            },
-                            TextColor(TEXT_SECONDARY),
-                        ));
-                        small_button(
-                            row,
-                            SettingsButton::SyncNow,
-                            "Sync Now",
-                            "Push and pull stats now. Runs automatically on launch and exit.".to_string(),
-                            button_font.clone(),
-                        );
-                        small_button(
-                            row,
-                            SettingsButton::DisconnectSync,
-                            "Disconnect",
-                            "Unlink this device from the sync server.".to_string(),
-                            button_font.clone(),
-                        );
-                        small_button(
-                            row,
-                            SettingsButton::DeleteAccount,
-                            "Delete Account",
-                            "Permanently delete your account and all server data. Cannot be undone.".to_string(),
-                            button_font,
-                        );
-                    }
-                }
-            });
-        });
-}
-
-fn label_text_font(font_res: Option<&FontResource>) -> TextFont {
-    TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_BODY_LG,
-        ..default()
-    }
-}
-
-fn value_text_font(font_res: Option<&FontResource>) -> TextFont {
-    TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_BODY_LG,
-        ..default()
-    }
-}
-
-/// Spawns a small square icon button (volume +/−, toggle, cycle).
-///
-/// `tooltip` is the hover-reveal caption attached via [`Tooltip`]. Every
-/// Settings icon button ships with one because the glyph alone (`+`, `−`,
-/// `⇄`) does not name what it adjusts; the tooltip carries that meaning.
-/// Scans `user_theme_dir()` for `.zip` files and calls [`import_theme`] on
-/// each one. On success, [`ThemeRegistry`] is refreshed in place and an
-/// [`InfoToastEvent`] is fired per imported theme. `IdCollision` errors (theme
-/// already installed) are silently skipped; all other errors produce a warning
-/// toast. A final toast tells the player to reopen Settings to see new themes.
-#[cfg(not(target_arch = "wasm32"))]
-fn handle_scan_themes(
-    interaction_query: Query<(&Interaction, &SettingsButton), Changed<Interaction>>,
-    mut toast: MessageWriter<InfoToastEvent>,
-    mut registry: Option<ResMut<crate::theme::ThemeRegistry>>,
-) {
-    for (interaction, button) in &interaction_query {
-        if *interaction != Interaction::Pressed {
-            continue;
-        }
-        if !matches!(button, SettingsButton::ScanThemes) {
-            continue;
-        }
-
-        let themes_dir = user_theme_dir();
-
-        let zips: Vec<PathBuf> = match std::fs::read_dir(&themes_dir) {
-            Ok(entries) => entries
-                .flatten()
-                .map(|e| e.path())
-                .filter(|p| p.extension().is_some_and(|ext| ext == "zip"))
-                .collect(),
-            Err(_) => {
-                toast.write(InfoToastEvent(
-                    "Themes folder not found — drop .zip files there first.".to_string(),
-                ));
-                return;
-            }
-        };
-
-        if zips.is_empty() {
-            toast.write(InfoToastEvent(
-                "No .zip files found in themes folder.".to_string(),
-            ));
-            return;
-        }
-
-        let mut imported = 0u32;
-        let mut errors = 0u32;
-
-        for zip_path in &zips {
-            match import_theme(zip_path) {
-                Ok(theme_id) => {
-                    toast.write(InfoToastEvent(format!(
-                        "Imported theme '{}'.",
-                        theme_id.as_str()
-                    )));
-                    imported += 1;
-                }
-                Err(ImportError::IdCollision { .. }) => {
-                    // Already installed — silent skip.
-                }
-                Err(e) => {
-                    let name = zip_path
-                        .file_name()
-                        .map(|n| n.to_string_lossy().into_owned())
-                        .unwrap_or_default();
-                    toast.write(InfoToastEvent(format!("Import failed ({name}): {e}")));
-                    errors += 1;
-                }
-            }
-        }
-
-        if imported == 0 && errors == 0 {
-            toast.write(InfoToastEvent("All themes already installed.".to_string()));
-            return;
-        }
-
-        if imported > 0 {
-            if let Some(reg) = &mut registry {
-                refresh_registry(reg, &themes_dir);
-            }
-            toast.write(InfoToastEvent(
-                "Reopen Settings to see new themes in the picker.".to_string(),
-            ));
-        }
-    }
-}
-
-#[cfg(not(target_arch = "wasm32"))]
-/// A small pill-shaped settings button, matching the style used in `sync_row`.
-fn pill_button(
-    parent: &mut ChildSpawnerCommands,
-    marker: SettingsButton,
-    label: &str,
-    tooltip: &'static str,
-    font_res: Option<&FontResource>,
-) {
-    let font = TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_CAPTION,
-        ..default()
-    };
-    parent
-        .spawn((
-            marker,
-            Button,
-            Tooltip::new(tooltip),
-            Node {
-                padding: UiRect::axes(VAL_SPACE_3, VAL_SPACE_2),
-                justify_content: JustifyContent::Center,
-                border: UiRect::all(Val::Px(1.0)),
-                border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
-                ..default()
-            },
-            BackgroundColor(BG_ELEVATED_HI),
-            BorderColor::all(BORDER_SUBTLE),
-            HighContrastBorder::with_default(BORDER_SUBTLE),
-        ))
-        .with_children(|b| {
-            b.spawn((Text::new(label.to_string()), font, TextColor(TEXT_PRIMARY)));
-        });
-}
-
-/// "Import Theme" row: folder-path label + "Scan for new themes" button.
-///
-/// The player drops `.zip` theme archives into the themes folder shown here,
-/// then presses the button. [`handle_scan_themes`] picks them up, validates,
-/// and installs them. Reopen Settings to see newly imported themes in the
-/// card-theme picker.
-#[cfg(not(target_arch = "wasm32"))]
-fn import_themes_row(parent: &mut ChildSpawnerCommands, font_res: Option<&FontResource>) {
-    let caption_font = TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_CAPTION,
-        ..default()
-    };
-
-    parent
-        .spawn((
-            FocusRow,
-            Node {
-                flex_direction: FlexDirection::Column,
-                row_gap: VAL_SPACE_2,
-                ..default()
-            },
-        ))
-        .with_children(|col| {
-            // Folder path hint.
-            let path_str = user_theme_dir().to_string_lossy().into_owned();
-            col.spawn((
-                Text::new(format!("Drop .zip files into: {path_str}")),
-                caption_font,
-                TextColor(TEXT_SECONDARY),
-            ));
-
-            // Scan button.
-            col.spawn(Node {
-                flex_direction: FlexDirection::Row,
-                align_items: AlignItems::Center,
-                ..default()
-            })
-            .with_children(|row| {
-                pill_button(
-                    row,
-                    SettingsButton::ScanThemes,
-                    "Scan for new themes",
-                    "Scan the themes folder for .zip archives and install any that are new.",
-                    font_res,
-                );
-            });
-        });
-}
-
-fn icon_button(
-    parent: &mut ChildSpawnerCommands,
-    label: &str,
-    action: SettingsButton,
-    tooltip: &'static str,
-    font_res: Option<&FontResource>,
-) {
-    let glyph_font = TextFont {
-        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
-        font_size: TYPE_BODY_LG,
-        ..default()
-    };
-    parent
-        .spawn((
-            action,
-            Button,
-            Tooltip::new(tooltip),
-            Node {
-                width: Val::Px(ICON_BUTTON_PX),
-                height: Val::Px(ICON_BUTTON_PX),
-                justify_content: JustifyContent::Center,
-                align_items: AlignItems::Center,
-                border: UiRect::all(Val::Px(1.0)),
-                border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
-                ..default()
-            },
-            BackgroundColor(BG_ELEVATED_HI),
-            BorderColor::all(BORDER_SUBTLE),
-            HighContrastBorder::with_default(BORDER_SUBTLE),
-        ))
-        .with_children(|b| {
-            b.spawn((
-                Text::new(label.to_string()),
-                glyph_font,
-                TextColor(TEXT_PRIMARY),
-            ));
-        });
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
 #[cfg(test)]
 mod tests;
diff --git a/solitaire_engine/src/settings_plugin/tests.rs b/solitaire_engine/src/settings_plugin/tests.rs
index 8d2f7c7..e9543dc 100644
--- a/solitaire_engine/src/settings_plugin/tests.rs
+++ b/solitaire_engine/src/settings_plugin/tests.rs
@@ -1,4 +1,7 @@
 use super::*;
+use crate::ui_focus::{FocusRow, Focusable};
+use crate::ui_modal::ModalButton;
+use crate::ui_tooltip::Tooltip;
 
 fn headless_app() -> App {
     let mut app = App::new();
@@ -326,9 +329,7 @@ fn settings_buttons_carry_tooltip() {
         .world_mut()
         .query::<(&SettingsButton, &Tooltip)>()
         .iter(app.world())
-        .find_map(|(btn, tip)| {
-            matches!(btn, SettingsButton::ConnectSync).then(|| tip.0.clone())
-        })
+        .find_map(|(btn, tip)| matches!(btn, SettingsButton::ConnectSync).then(|| tip.0.clone()))
         .expect("Connect button should spawn with a Tooltip when backend is Local");
     assert_eq!(
         connect_tip.as_ref(),
diff --git a/solitaire_engine/src/settings_plugin/ui.rs b/solitaire_engine/src/settings_plugin/ui.rs
new file mode 100644
index 0000000..7ea6966
--- /dev/null
+++ b/solitaire_engine/src/settings_plugin/ui.rs
@@ -0,0 +1,1237 @@
+//! Settings panel construction: the spawn function and row builders.
+
+use super::*;
+
+use std::path::PathBuf;
+
+use solitaire_data::Settings;
+
+use solitaire_data::settings::SyncBackend;
+
+#[cfg(not(target_arch = "wasm32"))]
+use crate::assets::user_theme_dir;
+use crate::events::InfoToastEvent;
+use crate::font_plugin::FontResource;
+use crate::theme::ThemeThumbnailPair;
+#[cfg(not(target_arch = "wasm32"))]
+use crate::theme::{ImportError, import_theme, refresh_registry};
+use crate::ui_focus::FocusRow;
+use crate::ui_modal::{
+    ButtonVariant, spawn_modal, spawn_modal_actions, spawn_modal_button, spawn_modal_header,
+};
+use crate::ui_theme::{
+    BG_BASE, BG_ELEVATED, BG_ELEVATED_HI, BORDER_SUBTLE, HighContrastBorder, RADIUS_SM,
+    STATE_SUCCESS, TEXT_PRIMARY, TEXT_SECONDARY, TYPE_BODY, TYPE_BODY_LG, TYPE_CAPTION,
+    VAL_SPACE_2, VAL_SPACE_3, Z_MODAL_PANEL,
+};
+use crate::ui_tooltip::Tooltip;
+
+/// Spawns the Settings modal.
+///
+/// `theme_overrides_back` is `true` when the active card-art theme
+/// supplies its own back (`CardImageSet::theme_back == Some(_)`). The
+/// "Card Back" picker is rendered with a small caption and the
+/// swatches are hidden in this state — the theme's back wins
+/// regardless of which legacy back is selected, so the picker would
+/// be inert otherwise.
+#[allow(clippy::too_many_arguments)]
+pub(super) fn spawn_settings_panel(
+    commands: &mut Commands,
+    settings: &Settings,
+    sync_status: &str,
+    unlocked_card_backs: &[usize],
+    unlocked_backgrounds: &[usize],
+    themes: &[ThemePickerEntry],
+    scroll_offset: f32,
+    font_res: Option<&FontResource>,
+    theme_overrides_back: bool,
+) {
+    spawn_modal(commands, SettingsPanel, Z_MODAL_PANEL, |card| {
+        spawn_modal_header(card, "Settings", font_res);
+
+        // Scrollable body — contains every section so tall content stays
+        // reachable on short windows. The Done button below stays fixed
+        // outside the scroll so it's always one click away.
+        card.spawn((
+            SettingsPanelScrollable,
+            SettingsScrollNode,
+            ScrollPosition(Vec2::new(0.0, scroll_offset)),
+            Node {
+                flex_direction: FlexDirection::Column,
+                row_gap: VAL_SPACE_3,
+                max_height: Val::Vh(60.0),
+                overflow: Overflow::scroll_y(),
+                padding: UiRect::bottom(Val::Px(96.0)),
+                ..default()
+            },
+        ))
+        .with_children(|body| {
+            // --- Audio ---
+            section_label(body, "Audio", font_res);
+            volume_row(
+                body,
+                "SFX Volume",
+                settings.sfx_volume,
+                SfxVolumeText,
+                SettingsButton::SfxDown,
+                SettingsButton::SfxUp,
+                "Lower sound effects volume.",
+                "Raise sound effects volume.",
+                font_res,
+            );
+            volume_row(
+                body,
+                "Music Volume",
+                settings.music_volume,
+                MusicVolumeText,
+                SettingsButton::MusicDown,
+                SettingsButton::MusicUp,
+                "Lower music and ambience volume.",
+                "Raise music and ambience volume.",
+                font_res,
+            );
+
+            // --- Gameplay ---
+            section_label(body, "Gameplay", font_res);
+            toggle_row(
+                body,
+                "Draw Mode",
+                DrawModeText,
+                draw_mode_label(&settings.draw_mode),
+                SettingsButton::ToggleDrawMode,
+                "Switch between Draw 1 and Draw 3. Takes effect next deal.",
+                font_res,
+            );
+            toggle_row(
+                body,
+                "Winnable deals only",
+                WinnableDealsOnlyText,
+                winnable_deals_only_label(settings.winnable_deals_only),
+                SettingsButton::ToggleWinnableDealsOnly,
+                "When on, fresh Classic deals are filtered through a solver \
+                 (may take a moment when on).",
+                font_res,
+            );
+            toggle_row(
+                body,
+                "Anim Speed",
+                AnimSpeedText,
+                anim_speed_label(&settings.animation_speed),
+                SettingsButton::CycleAnimSpeed,
+                "Cycle animation speed: Normal, Fast, Instant.",
+                font_res,
+            );
+            tooltip_delay_row(
+                body,
+                settings.tooltip_delay_secs,
+                font_res,
+            );
+            time_bonus_multiplier_row(
+                body,
+                settings.time_bonus_multiplier,
+                font_res,
+            );
+            replay_move_interval_row(
+                body,
+                settings.replay_move_interval_secs,
+                font_res,
+            );
+            toggle_row(
+                body,
+                "Smart window size",
+                SmartDefaultSizeText,
+                smart_default_size_label(!settings.disable_smart_default_size),
+                SettingsButton::ToggleSmartDefaultSize,
+                "When ON, fresh launches resize the window to ~70 % of the \
+                 monitor. OFF pins the 1280\u{00D7}800 baseline. Saved \
+                 window size always wins.",
+                font_res,
+            );
+
+            // --- Cosmetic ---
+            section_label(body, "Cosmetic", font_res);
+            toggle_row(
+                body,
+                "Theme",
+                ThemeText,
+                theme_label(&settings.theme),
+                SettingsButton::ToggleTheme,
+                "Cycle felt color: Green, Blue, Dark.",
+                font_res,
+            );
+            toggle_row(
+                body,
+                "Color-blind Mode",
+                ColorBlindText,
+                color_blind_label(settings.color_blind_mode),
+                SettingsButton::ToggleColorBlind,
+                "Show shape glyphs alongside suit colors. Suit-blind friendly.",
+                font_res,
+            );
+            toggle_row(
+                body,
+                "High Contrast",
+                HighContrastText,
+                on_off_label(settings.high_contrast_mode),
+                SettingsButton::ToggleHighContrast,
+                "Boosts foreground + suit-red glyphs to higher-luminance variants for low-vision readers and low-quality displays.",
+                font_res,
+            );
+            toggle_row(
+                body,
+                "Reduce Motion",
+                ReduceMotionText,
+                on_off_label(settings.reduce_motion_mode),
+                SettingsButton::ToggleReduceMotion,
+                "Skips card-slide animations and other non-essential motion. Cards snap instantly to their target.",
+                font_res,
+            );
+            toggle_row(
+                body,
+                "Touch Input Mode",
+                TouchInputModeText,
+                touch_input_mode_label(&settings.touch_input_mode),
+                SettingsButton::ToggleTouchInputMode,
+                "One-tap: tap a card to auto-move it. Tap to select: first tap selects a card, second tap on a pile moves it.",
+                font_res,
+            );
+            if theme_overrides_back {
+                // The active theme provides its own back; the legacy
+                // picker has no visible effect, so we replace its
+                // swatch row with an informational caption. The
+                // player's `selected_card_back` value still
+                // round-trips through `settings.json` — the moment
+                // they switch to a theme without a back, the picker
+                // re-appears with their previous choice intact.
+                picker_row_overridden_by_theme(body, "Card Back", font_res);
+            } else {
+                picker_row(
+                    body,
+                    "Card Back",
+                    unlocked_card_backs,
+                    settings.selected_card_back,
+                    SettingsButton::SelectCardBack,
+                    "Choose your deck art. New backs unlock at higher levels.",
+                    font_res,
+                );
+            }
+            picker_row(
+                body,
+                "Background",
+                unlocked_backgrounds,
+                settings.selected_background,
+                SettingsButton::SelectBackground,
+                "Choose your felt art. New felts unlock at higher levels.",
+                font_res,
+            );
+            // Card-art theme picker — only renders when the registry has
+            // entries (production: always; tests: only when
+            // ThemeRegistryPlugin is installed).
+            if !themes.is_empty() {
+                theme_picker_row(
+                    body,
+                    "Card Theme",
+                    themes,
+                    &settings.selected_theme_id,
+                    "Choose card-face artwork. Imported themes appear here.",
+                    font_res,
+                );
+            }
+            #[cfg(not(target_arch = "wasm32"))]
+            import_themes_row(body, font_res);
+
+            // --- Privacy (only shown when a Matomo URL is configured) ---
+            if settings.matomo_url.is_some() {
+                section_label(body, "Privacy", font_res);
+                toggle_row(
+                    body,
+                    "Share usage data",
+                    AnalyticsEnabledText,
+                    on_off_label(settings.analytics_enabled),
+                    SettingsButton::ToggleAnalytics,
+                    "Sends anonymous game events to Matomo for aggregate analytics.",
+                    font_res,
+                );
+            }
+
+            // --- Sync ---
+            section_label(body, "Sync", font_res);
+            sync_row(body, sync_status, &settings.sync_backend, font_res);
+        });
+
+        // Done is the only action — primary so the player always knows
+        // how to leave the modal. `O` toggles it the same way.
+        spawn_modal_actions(card, |actions| {
+            spawn_modal_button(
+                actions,
+                SettingsButton::Done,
+                "Done",
+                Some("O"),
+                ButtonVariant::Primary,
+                font_res,
+            );
+        });
+    });
+}
+
+/// Section divider — small lavender label inside the scrollable body.
+pub(super) fn section_label(
+    parent: &mut ChildSpawnerCommands,
+    title: &str,
+    font_res: Option<&FontResource>,
+) {
+    let font = TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_BODY,
+        ..default()
+    };
+    parent.spawn((Text::new(title), font, TextColor(TEXT_SECONDARY)));
+}
+
+/// `Label  0.80  [−]  [+]` — used for SFX and Music volume rows.
+///
+/// `tooltip_down` / `tooltip_up` are attached to the `−` / `+` buttons
+/// respectively so each glyph carries a one-line reminder of which channel
+/// it adjusts.
+#[allow(clippy::too_many_arguments)]
+pub(super) fn volume_row<Marker: Component>(
+    parent: &mut ChildSpawnerCommands,
+    label: &str,
+    value: f32,
+    marker: Marker,
+    btn_down: SettingsButton,
+    btn_up: SettingsButton,
+    tooltip_down: &'static str,
+    tooltip_up: &'static str,
+    font_res: Option<&FontResource>,
+) {
+    let label_font = label_text_font(font_res);
+    let value_font = value_text_font(font_res);
+    // Row spans the full body width with a flex-grow spacer between
+    // the left-aligned label and the right-aligned controls cluster.
+    // Without `width: 100%` + the spacer, the label / value / buttons
+    // bunch against the left edge and a varying-length value (e.g.
+    // "0.80" → "1.00") shifts the +/− buttons sideways frame to
+    // frame, visually overlapping with adjacent UI on small windows.
+    parent
+        .spawn(Node {
+            flex_direction: FlexDirection::Row,
+            align_items: AlignItems::Center,
+            column_gap: VAL_SPACE_2,
+            width: Val::Percent(100.0),
+            ..default()
+        })
+        .with_children(|row| {
+            row.spawn((
+                Text::new(label.to_string()),
+                label_font,
+                TextColor(TEXT_SECONDARY),
+            ));
+            // Spacer: takes up all remaining horizontal space so the
+            // controls cluster sits flush against the right edge.
+            row.spawn(Node {
+                flex_grow: 1.0,
+                ..default()
+            });
+            // Controls cluster — value + decrement + increment held
+            // together so the buttons stay in fixed positions even
+            // as the value text width varies.
+            row.spawn(Node {
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                column_gap: VAL_SPACE_2,
+                ..default()
+            })
+            .with_children(|cluster| {
+                cluster.spawn((
+                    marker,
+                    Text::new(format!("{value:.2}")),
+                    value_font,
+                    TextColor(TEXT_PRIMARY),
+                ));
+                icon_button(cluster, "−", btn_down, tooltip_down, font_res);
+                icon_button(cluster, "+", btn_up, tooltip_up, font_res);
+            });
+        });
+}
+
+/// `Tooltip Delay  0.5 s  [−]  [+]` — slider row for the player-tunable
+/// tooltip-hover dwell. Mirrors [`volume_row`] (label, current value,
+/// decrement, increment) but formats the value via [`tooltip_delay_label`]
+/// so `0.0` reads as `"Instant"` and other values as `"{n:.1} s"`.
+pub(super) fn tooltip_delay_row(
+    parent: &mut ChildSpawnerCommands,
+    value_secs: f32,
+    font_res: Option<&FontResource>,
+) {
+    let label_font = label_text_font(font_res);
+    let value_font = value_text_font(font_res);
+    parent
+        .spawn(Node {
+            flex_direction: FlexDirection::Row,
+            align_items: AlignItems::Center,
+            column_gap: VAL_SPACE_2,
+            width: Val::Percent(100.0),
+            ..default()
+        })
+        .with_children(|row| {
+            row.spawn((
+                Text::new("Tooltip Delay".to_string()),
+                label_font,
+                TextColor(TEXT_SECONDARY),
+            ));
+            row.spawn(Node {
+                flex_grow: 1.0,
+                ..default()
+            });
+            row.spawn(Node {
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                column_gap: VAL_SPACE_2,
+                ..default()
+            })
+            .with_children(|cluster| {
+                cluster.spawn((
+                    TooltipDelayText,
+                    Text::new(tooltip_delay_label(value_secs)),
+                    value_font,
+                    TextColor(TEXT_PRIMARY),
+                ));
+                icon_button(
+                    cluster,
+                    "−",
+                    SettingsButton::TooltipDelayDown,
+                    "Shorten the hover delay before tooltips appear.",
+                    font_res,
+                );
+                icon_button(
+                    cluster,
+                    "+",
+                    SettingsButton::TooltipDelayUp,
+                    "Lengthen the hover delay before tooltips appear.",
+                    font_res,
+                );
+            });
+        });
+}
+
+/// `Time bonus  1.0×  [−]  [+]` — slider row for the cosmetic
+/// `Settings::time_bonus_multiplier`. Mirrors [`tooltip_delay_row`]
+/// (label, current value, decrement, increment) but formats the value
+/// via [`time_bonus_label`] so `0.0` reads as `"Off"` and other values
+/// as `"{n:.1}×"`. The multiplier is **cosmetic** — adjusting it
+/// changes only the win-modal score breakdown, not the canonical
+/// scores recorded in stats / achievements / leaderboards.
+pub(super) fn time_bonus_multiplier_row(
+    parent: &mut ChildSpawnerCommands,
+    value: f32,
+    font_res: Option<&FontResource>,
+) {
+    let label_font = label_text_font(font_res);
+    let value_font = value_text_font(font_res);
+    parent
+        .spawn(Node {
+            flex_direction: FlexDirection::Row,
+            align_items: AlignItems::Center,
+            column_gap: VAL_SPACE_2,
+            width: Val::Percent(100.0),
+            ..default()
+        })
+        .with_children(|row| {
+            row.spawn((
+                Text::new("Time bonus".to_string()),
+                label_font,
+                TextColor(TEXT_SECONDARY),
+            ));
+            row.spawn(Node {
+                flex_grow: 1.0,
+                ..default()
+            });
+            row.spawn(Node {
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                column_gap: VAL_SPACE_2,
+                ..default()
+            })
+            .with_children(|cluster| {
+                cluster.spawn((
+                    TimeBonusMultiplierText,
+                    Text::new(time_bonus_label(value)),
+                    value_font,
+                    TextColor(TEXT_PRIMARY),
+                ));
+                icon_button(
+                    cluster,
+                    "−",
+                    SettingsButton::TimeBonusDown,
+                    "Shrink the time-bonus shown in the win modal. Cosmetic only.",
+                    font_res,
+                );
+                icon_button(
+                    cluster,
+                    "+",
+                    SettingsButton::TimeBonusUp,
+                    "Boost the time-bonus shown in the win modal. Cosmetic only.",
+                    font_res,
+                );
+            });
+        });
+}
+
+/// `Replay speed  0.45 s/move  [−]  [+]` — slider row for the
+/// player-tunable replay-playback per-move interval. Mirrors
+/// [`tooltip_delay_row`] (label, current value, decrement, increment)
+/// but formats the value via [`replay_move_interval_label`] as
+/// `"{n:.2} s/move"`. The decrement button speeds playback up
+/// (smaller interval); the increment slows it down — same direction
+/// convention as the tooltip-delay slider.
+pub(super) fn replay_move_interval_row(
+    parent: &mut ChildSpawnerCommands,
+    value_secs: f32,
+    font_res: Option<&FontResource>,
+) {
+    let label_font = label_text_font(font_res);
+    let value_font = value_text_font(font_res);
+    parent
+        .spawn(Node {
+            flex_direction: FlexDirection::Row,
+            align_items: AlignItems::Center,
+            column_gap: VAL_SPACE_2,
+            width: Val::Percent(100.0),
+            ..default()
+        })
+        .with_children(|row| {
+            row.spawn((
+                Text::new("Replay speed".to_string()),
+                label_font,
+                TextColor(TEXT_SECONDARY),
+            ));
+            row.spawn(Node {
+                flex_grow: 1.0,
+                ..default()
+            });
+            row.spawn(Node {
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                column_gap: VAL_SPACE_2,
+                ..default()
+            })
+            .with_children(|cluster| {
+                cluster.spawn((
+                    ReplayMoveIntervalText,
+                    Text::new(replay_move_interval_label(value_secs)),
+                    value_font,
+                    TextColor(TEXT_PRIMARY),
+                ));
+                icon_button(
+                    cluster,
+                    "−",
+                    SettingsButton::ReplayMoveIntervalDown,
+                    "Speed up replay playback (shorter per-move interval).",
+                    font_res,
+                );
+                icon_button(
+                    cluster,
+                    "+",
+                    SettingsButton::ReplayMoveIntervalUp,
+                    "Slow down replay playback (longer per-move interval).",
+                    font_res,
+                );
+            });
+        });
+}
+
+/// `Label  Value  [⇄]` — used for cycle/toggle rows (draw mode, theme,
+/// anim speed, colour-blind).
+///
+/// `tooltip` is attached to the `⇄` button so the cycle glyph carries a
+/// one-line reminder of what it iterates through.
+#[allow(clippy::too_many_arguments)]
+pub(super) fn toggle_row<Marker: Component>(
+    parent: &mut ChildSpawnerCommands,
+    label: &str,
+    marker: Marker,
+    value: String,
+    action: SettingsButton,
+    tooltip: &'static str,
+    font_res: Option<&FontResource>,
+) {
+    let label_font = label_text_font(font_res);
+    let value_font = value_text_font(font_res);
+    parent
+        .spawn(Node {
+            flex_direction: FlexDirection::Row,
+            align_items: AlignItems::Center,
+            column_gap: VAL_SPACE_2,
+            width: Val::Percent(100.0),
+            ..default()
+        })
+        .with_children(|row| {
+            row.spawn((
+                Text::new(label.to_string()),
+                label_font,
+                TextColor(TEXT_SECONDARY),
+            ));
+            row.spawn(Node {
+                flex_grow: 1.0,
+                ..default()
+            });
+            row.spawn(Node {
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                column_gap: VAL_SPACE_2,
+                ..default()
+            })
+            .with_children(|cluster| {
+                cluster.spawn((
+                    marker,
+                    Text::new(value),
+                    value_font,
+                    TextColor(TEXT_PRIMARY),
+                ));
+                icon_button(cluster, "⇄", action, tooltip, font_res);
+            });
+        });
+}
+
+/// Wrapping row of indexed swatch buttons — used for card-back and
+/// background pickers. The currently-selected swatch is tinted with
+/// `STATE_SUCCESS` so the user can see it without reading a label.
+///
+/// `tooltip` is attached to every swatch in the row so hovering any chip
+/// reveals what the picker controls and how new entries unlock.
+#[allow(clippy::too_many_arguments)]
+pub(super) fn picker_row(
+    parent: &mut ChildSpawnerCommands,
+    label: &str,
+    unlocked: &[usize],
+    selected: usize,
+    make_button: impl Fn(usize) -> SettingsButton,
+    tooltip: &'static str,
+    font_res: Option<&FontResource>,
+) {
+    let label_font = label_text_font(font_res);
+    let chip_font = TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_BODY,
+        ..default()
+    };
+    parent
+        .spawn((
+            // The row container is a `FocusRow` so Left / Right arrow
+            // keys cycle within its swatch children. Tab still escapes
+            // the row to the next focusable in the modal.
+            FocusRow,
+            Node {
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                column_gap: VAL_SPACE_2,
+                flex_wrap: FlexWrap::Wrap,
+                ..default()
+            },
+        ))
+        .with_children(|row| {
+            row.spawn((
+                Text::new(label.to_string()),
+                label_font,
+                TextColor(TEXT_SECONDARY),
+            ));
+            // Always show at least swatch 0 (default).
+            let entries: &[usize] = if unlocked.is_empty() { &[0] } else { unlocked };
+            for &idx in entries {
+                let is_selected = idx == selected;
+                let bg = if is_selected {
+                    STATE_SUCCESS
+                } else {
+                    BG_ELEVATED_HI
+                };
+                row.spawn((
+                    make_button(idx),
+                    Button,
+                    Tooltip::new(tooltip),
+                    Node {
+                        width: Val::Px(SWATCH_PX),
+                        height: Val::Px(SWATCH_PX),
+                        justify_content: JustifyContent::Center,
+                        align_items: AlignItems::Center,
+                        border: UiRect::all(Val::Px(1.0)),
+                        border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
+                        ..default()
+                    },
+                    BackgroundColor(bg),
+                    BorderColor::all(BORDER_SUBTLE),
+                    HighContrastBorder::with_default(BORDER_SUBTLE),
+                ))
+                .with_children(|b| {
+                    let text_color = if is_selected { BG_BASE } else { TEXT_PRIMARY };
+                    b.spawn((
+                        Text::new(format!("{}", idx + 1)),
+                        chip_font.clone(),
+                        TextColor(text_color),
+                    ));
+                });
+            }
+        });
+}
+
+/// Marker on the row spawned by [`picker_row_overridden_by_theme`] so
+/// tests can find the caption without depending on text-content
+/// matching.
+#[derive(Component, Debug)]
+pub(crate) struct CardBackPickerOverriddenByTheme;
+
+/// Marker placed on every preview-thumbnail [`ImageNode`] inside a
+/// theme picker chip. Lets tests assert that a chip's children include
+/// the rasterised preview pair, and lets a future system update or
+/// hot-swap thumbnails without scanning the whole UI tree.
+#[derive(Component, Debug)]
+pub(crate) struct ThemeThumbnailMarker;
+
+/// Renders the "Card Back" row in its overridden-by-theme state: a
+/// labelled caption explaining why the swatches are hidden, with no
+/// interactive children. This is what the player sees when the active
+/// card-art theme supplies its own `back.svg` — the theme's back wins
+/// over the legacy `selected_card_back` choice, so showing the
+/// swatches would only confuse the player into thinking they were
+/// changing something when they weren't.
+pub(super) fn picker_row_overridden_by_theme(
+    parent: &mut ChildSpawnerCommands,
+    label: &str,
+    font_res: Option<&FontResource>,
+) {
+    let label_font = label_text_font(font_res);
+    let caption_font = TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_CAPTION,
+        ..default()
+    };
+    parent
+        .spawn((
+            CardBackPickerOverriddenByTheme,
+            Node {
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                column_gap: VAL_SPACE_2,
+                ..default()
+            },
+        ))
+        .with_children(|row| {
+            row.spawn((
+                Text::new(label.to_string()),
+                label_font,
+                TextColor(TEXT_SECONDARY),
+            ));
+            row.spawn((
+                Text::new("Active theme provides its own back"),
+                caption_font,
+                TextColor(TEXT_SECONDARY),
+            ));
+        });
+}
+
+/// Logical width (px) of one preview thumbnail inside a picker chip.
+/// Mirrors [`crate::theme::THEME_THUMBNAIL_WIDTH_PX`] but at the UI
+/// scale used by Bevy's flex layout. The rasterised image itself is
+/// 100×140 px; the chip displays it at the same logical size so
+/// scaling artifacts stay minimal.
+const THUMBNAIL_LOGICAL_WIDTH_PX: f32 = 50.0;
+/// Logical height counterpart to [`THUMBNAIL_LOGICAL_WIDTH_PX`] —
+/// preserves the 2:3 card aspect.
+const THUMBNAIL_LOGICAL_HEIGHT_PX: f32 = 70.0;
+
+/// Picker row for card-art themes. Distinct from [`picker_row`]
+/// because themes are identified by `String` ids (matching
+/// `ThemeMeta::id`) instead of dense indices, and each chip carries
+/// the theme's display name plus a small Ace + back preview pair
+/// (when available in [`ThemeThumbnailCache`]).
+pub(super) fn theme_picker_row(
+    parent: &mut ChildSpawnerCommands,
+    label: &str,
+    themes: &[ThemePickerEntry],
+    selected_id: &str,
+    tooltip: &'static str,
+    font_res: Option<&FontResource>,
+) {
+    let label_font = label_text_font(font_res);
+    let chip_font = TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_BODY,
+        ..default()
+    };
+    parent
+        .spawn((
+            FocusRow,
+            Node {
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                column_gap: VAL_SPACE_2,
+                flex_wrap: FlexWrap::Wrap,
+                ..default()
+            },
+        ))
+        .with_children(|row| {
+            row.spawn((
+                Text::new(label.to_string()),
+                label_font,
+                TextColor(TEXT_SECONDARY),
+            ));
+            for entry in themes {
+                let is_selected = entry.id == selected_id;
+                let bg = if is_selected {
+                    STATE_SUCCESS
+                } else {
+                    BG_ELEVATED_HI
+                };
+                row.spawn((
+                    SettingsButton::SelectTheme(entry.id.clone()),
+                    Button,
+                    Tooltip::new(tooltip),
+                    Node {
+                        // Chips with thumbnails stack the preview pair
+                        // above the label so a glance reveals the
+                        // theme's art without hovering for the
+                        // tooltip.
+                        flex_direction: FlexDirection::Column,
+                        // Theme names are wider than numeric chips —
+                        // pad horizontally instead of using a fixed
+                        // square swatch.
+                        padding: UiRect::axes(VAL_SPACE_2, VAL_SPACE_2),
+                        min_height: Val::Px(SWATCH_PX),
+                        row_gap: VAL_SPACE_2,
+                        justify_content: JustifyContent::Center,
+                        align_items: AlignItems::Center,
+                        border: UiRect::all(Val::Px(1.0)),
+                        border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
+                        ..default()
+                    },
+                    BackgroundColor(bg),
+                    BorderColor::all(BORDER_SUBTLE),
+                    HighContrastBorder::with_default(BORDER_SUBTLE),
+                ))
+                .with_children(|b| {
+                    spawn_thumbnail_pair(b, entry.thumbnails.as_ref());
+                    let text_color = if is_selected { BG_BASE } else { TEXT_PRIMARY };
+                    b.spawn((
+                        Text::new(entry.display_name.clone()),
+                        chip_font.clone(),
+                        TextColor(text_color),
+                    ));
+                });
+            }
+        });
+}
+
+/// Spawns the Ace + back preview pair for a theme picker chip.
+///
+/// When `thumbnails` is `Some(_)` and both handles are non-default,
+/// renders two `ImageNode` siblings (Ace on the left, back on the
+/// right). When the thumbnails are missing or only partially loaded,
+/// renders two muted `BG_ELEVATED` placeholder rectangles at the same
+/// logical size — keeping the chip's overall footprint stable so the
+/// picker row layout doesn't reflow as the cache fills in.
+pub(super) fn spawn_thumbnail_pair(
+    parent: &mut ChildSpawnerCommands,
+    thumbnails: Option<&ThemeThumbnailPair>,
+) {
+    parent
+        .spawn(Node {
+            flex_direction: FlexDirection::Row,
+            column_gap: VAL_SPACE_2,
+            align_items: AlignItems::Center,
+            ..default()
+        })
+        .with_children(|pair| match thumbnails {
+            Some(t) if t.is_fully_populated() => {
+                spawn_thumbnail_image(pair, t.ace.clone());
+                spawn_thumbnail_image(pair, t.back.clone());
+            }
+            _ => {
+                spawn_thumbnail_placeholder(pair);
+                spawn_thumbnail_placeholder(pair);
+            }
+        });
+}
+
+/// Spawns one `ImageNode` thumbnail at the canonical preview size.
+/// Tagged with [`ThemeThumbnailMarker`] so tests can scan a chip's
+/// children for the rendered preview without crawling the whole UI.
+pub(super) fn spawn_thumbnail_image(parent: &mut ChildSpawnerCommands, image: Handle<Image>) {
+    parent.spawn((
+        ThemeThumbnailMarker,
+        ImageNode::new(image),
+        Node {
+            width: Val::Px(THUMBNAIL_LOGICAL_WIDTH_PX),
+            height: Val::Px(THUMBNAIL_LOGICAL_HEIGHT_PX),
+            ..default()
+        },
+    ));
+}
+
+/// Spawns a muted placeholder rectangle for the case where the cache
+/// has not yet generated thumbnails for a theme — or when a user theme
+/// is missing one of its preview SVGs. Same logical size as
+/// [`spawn_thumbnail_image`] so chip layout stays stable.
+pub(super) fn spawn_thumbnail_placeholder(parent: &mut ChildSpawnerCommands) {
+    parent.spawn((
+        Node {
+            width: Val::Px(THUMBNAIL_LOGICAL_WIDTH_PX),
+            height: Val::Px(THUMBNAIL_LOGICAL_HEIGHT_PX),
+            border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
+            ..default()
+        },
+        BackgroundColor(BG_ELEVATED),
+    ));
+}
+
+/// Sync section row — shows different controls depending on whether a server
+/// backend is configured.
+pub(super) fn sync_row(
+    parent: &mut ChildSpawnerCommands,
+    status_text: &str,
+    backend: &SyncBackend,
+    font_res: Option<&FontResource>,
+) {
+    let status_font = TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_BODY,
+        ..default()
+    };
+    let button_font = TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_CAPTION,
+        ..default()
+    };
+
+    // Helper closure to spawn a small settings-style pill button.
+    let small_button = |row: &mut ChildSpawnerCommands,
+                        marker: SettingsButton,
+                        label: &str,
+                        tooltip: String,
+                        font: TextFont| {
+        row.spawn((
+            marker,
+            Button,
+            Tooltip::new(tooltip),
+            Node {
+                padding: UiRect::axes(VAL_SPACE_3, VAL_SPACE_2),
+                justify_content: JustifyContent::Center,
+                border: UiRect::all(Val::Px(1.0)),
+                border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
+                ..default()
+            },
+            BackgroundColor(BG_ELEVATED_HI),
+            BorderColor::all(BORDER_SUBTLE),
+            HighContrastBorder::with_default(BORDER_SUBTLE),
+        ))
+        .with_children(|b| {
+            b.spawn((Text::new(label.to_string()), font, TextColor(TEXT_PRIMARY)));
+        });
+    };
+
+    parent
+        .spawn(Node {
+            flex_direction: FlexDirection::Column,
+            row_gap: VAL_SPACE_2,
+            ..default()
+        })
+        .with_children(|col| {
+            // Status line + inline action buttons.
+            col.spawn(Node {
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                column_gap: VAL_SPACE_3,
+                flex_wrap: FlexWrap::Wrap,
+                row_gap: VAL_SPACE_2,
+                ..default()
+            })
+            .with_children(|row| {
+                row.spawn((
+                    SyncStatusText,
+                    Text::new(status_text.to_string()),
+                    status_font,
+                    TextColor(TEXT_SECONDARY),
+                ));
+
+                match backend {
+                    SyncBackend::Local => {
+                        small_button(
+                            row,
+                            SettingsButton::ConnectSync,
+                            "Connect",
+                            "Connect to a self-hosted Ferrous Solitaire sync server.".to_string(),
+                            button_font,
+                        );
+                    }
+                    SyncBackend::SolitaireServer { username, .. } => {
+                        // Show the logged-in username as a secondary label.
+                        row.spawn((
+                            Text::new(format!("({username})")),
+                            TextFont {
+                                font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+                                font_size: TYPE_CAPTION,
+                                ..default()
+                            },
+                            TextColor(TEXT_SECONDARY),
+                        ));
+                        small_button(
+                            row,
+                            SettingsButton::SyncNow,
+                            "Sync Now",
+                            "Push and pull stats now. Runs automatically on launch and exit.".to_string(),
+                            button_font.clone(),
+                        );
+                        small_button(
+                            row,
+                            SettingsButton::DisconnectSync,
+                            "Disconnect",
+                            "Unlink this device from the sync server.".to_string(),
+                            button_font.clone(),
+                        );
+                        small_button(
+                            row,
+                            SettingsButton::DeleteAccount,
+                            "Delete Account",
+                            "Permanently delete your account and all server data. Cannot be undone.".to_string(),
+                            button_font,
+                        );
+                    }
+                }
+            });
+        });
+}
+
+pub(super) fn label_text_font(font_res: Option<&FontResource>) -> TextFont {
+    TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_BODY_LG,
+        ..default()
+    }
+}
+
+pub(super) fn value_text_font(font_res: Option<&FontResource>) -> TextFont {
+    TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_BODY_LG,
+        ..default()
+    }
+}
+
+/// Spawns a small square icon button (volume +/−, toggle, cycle).
+///
+/// `tooltip` is the hover-reveal caption attached via [`Tooltip`]. Every
+/// Settings icon button ships with one because the glyph alone (`+`, `−`,
+/// `⇄`) does not name what it adjusts; the tooltip carries that meaning.
+/// Scans `user_theme_dir()` for `.zip` files and calls [`import_theme`] on
+/// each one. On success, [`ThemeRegistry`] is refreshed in place and an
+/// [`InfoToastEvent`] is fired per imported theme. `IdCollision` errors (theme
+/// already installed) are silently skipped; all other errors produce a warning
+/// toast. A final toast tells the player to reopen Settings to see new themes.
+#[cfg(not(target_arch = "wasm32"))]
+pub(super) fn handle_scan_themes(
+    interaction_query: Query<(&Interaction, &SettingsButton), Changed<Interaction>>,
+    mut toast: MessageWriter<InfoToastEvent>,
+    mut registry: Option<ResMut<crate::theme::ThemeRegistry>>,
+) {
+    for (interaction, button) in &interaction_query {
+        if *interaction != Interaction::Pressed {
+            continue;
+        }
+        if !matches!(button, SettingsButton::ScanThemes) {
+            continue;
+        }
+
+        let themes_dir = user_theme_dir();
+
+        let zips: Vec<PathBuf> = match std::fs::read_dir(&themes_dir) {
+            Ok(entries) => entries
+                .flatten()
+                .map(|e| e.path())
+                .filter(|p| p.extension().is_some_and(|ext| ext == "zip"))
+                .collect(),
+            Err(_) => {
+                toast.write(InfoToastEvent(
+                    "Themes folder not found — drop .zip files there first.".to_string(),
+                ));
+                return;
+            }
+        };
+
+        if zips.is_empty() {
+            toast.write(InfoToastEvent(
+                "No .zip files found in themes folder.".to_string(),
+            ));
+            return;
+        }
+
+        let mut imported = 0u32;
+        let mut errors = 0u32;
+
+        for zip_path in &zips {
+            match import_theme(zip_path) {
+                Ok(theme_id) => {
+                    toast.write(InfoToastEvent(format!(
+                        "Imported theme '{}'.",
+                        theme_id.as_str()
+                    )));
+                    imported += 1;
+                }
+                Err(ImportError::IdCollision { .. }) => {
+                    // Already installed — silent skip.
+                }
+                Err(e) => {
+                    let name = zip_path
+                        .file_name()
+                        .map(|n| n.to_string_lossy().into_owned())
+                        .unwrap_or_default();
+                    toast.write(InfoToastEvent(format!("Import failed ({name}): {e}")));
+                    errors += 1;
+                }
+            }
+        }
+
+        if imported == 0 && errors == 0 {
+            toast.write(InfoToastEvent("All themes already installed.".to_string()));
+            return;
+        }
+
+        if imported > 0 {
+            if let Some(reg) = &mut registry {
+                refresh_registry(reg, &themes_dir);
+            }
+            toast.write(InfoToastEvent(
+                "Reopen Settings to see new themes in the picker.".to_string(),
+            ));
+        }
+    }
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+/// A small pill-shaped settings button, matching the style used in `sync_row`.
+pub(super) fn pill_button(
+    parent: &mut ChildSpawnerCommands,
+    marker: SettingsButton,
+    label: &str,
+    tooltip: &'static str,
+    font_res: Option<&FontResource>,
+) {
+    let font = TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_CAPTION,
+        ..default()
+    };
+    parent
+        .spawn((
+            marker,
+            Button,
+            Tooltip::new(tooltip),
+            Node {
+                padding: UiRect::axes(VAL_SPACE_3, VAL_SPACE_2),
+                justify_content: JustifyContent::Center,
+                border: UiRect::all(Val::Px(1.0)),
+                border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
+                ..default()
+            },
+            BackgroundColor(BG_ELEVATED_HI),
+            BorderColor::all(BORDER_SUBTLE),
+            HighContrastBorder::with_default(BORDER_SUBTLE),
+        ))
+        .with_children(|b| {
+            b.spawn((Text::new(label.to_string()), font, TextColor(TEXT_PRIMARY)));
+        });
+}
+
+/// "Import Theme" row: folder-path label + "Scan for new themes" button.
+///
+/// The player drops `.zip` theme archives into the themes folder shown here,
+/// then presses the button. [`handle_scan_themes`] picks them up, validates,
+/// and installs them. Reopen Settings to see newly imported themes in the
+/// card-theme picker.
+#[cfg(not(target_arch = "wasm32"))]
+pub(super) fn import_themes_row(
+    parent: &mut ChildSpawnerCommands,
+    font_res: Option<&FontResource>,
+) {
+    let caption_font = TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_CAPTION,
+        ..default()
+    };
+
+    parent
+        .spawn((
+            FocusRow,
+            Node {
+                flex_direction: FlexDirection::Column,
+                row_gap: VAL_SPACE_2,
+                ..default()
+            },
+        ))
+        .with_children(|col| {
+            // Folder path hint.
+            let path_str = user_theme_dir().to_string_lossy().into_owned();
+            col.spawn((
+                Text::new(format!("Drop .zip files into: {path_str}")),
+                caption_font,
+                TextColor(TEXT_SECONDARY),
+            ));
+
+            // Scan button.
+            col.spawn(Node {
+                flex_direction: FlexDirection::Row,
+                align_items: AlignItems::Center,
+                ..default()
+            })
+            .with_children(|row| {
+                pill_button(
+                    row,
+                    SettingsButton::ScanThemes,
+                    "Scan for new themes",
+                    "Scan the themes folder for .zip archives and install any that are new.",
+                    font_res,
+                );
+            });
+        });
+}
+
+pub(super) fn icon_button(
+    parent: &mut ChildSpawnerCommands,
+    label: &str,
+    action: SettingsButton,
+    tooltip: &'static str,
+    font_res: Option<&FontResource>,
+) {
+    let glyph_font = TextFont {
+        font: font_res.map(|f| f.0.clone()).unwrap_or_default(),
+        font_size: TYPE_BODY_LG,
+        ..default()
+    };
+    parent
+        .spawn((
+            action,
+            Button,
+            Tooltip::new(tooltip),
+            Node {
+                width: Val::Px(ICON_BUTTON_PX),
+                height: Val::Px(ICON_BUTTON_PX),
+                justify_content: JustifyContent::Center,
+                align_items: AlignItems::Center,
+                border: UiRect::all(Val::Px(1.0)),
+                border_radius: BorderRadius::all(Val::Px(RADIUS_SM)),
+                ..default()
+            },
+            BackgroundColor(BG_ELEVATED_HI),
+            BorderColor::all(BORDER_SUBTLE),
+            HighContrastBorder::with_default(BORDER_SUBTLE),
+        ))
+        .with_children(|b| {
+            b.spawn((
+                Text::new(label.to_string()),
+                glyph_font,
+                TextColor(TEXT_PRIMARY),
+            ));
+        });
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
diff --git a/solitaire_engine/src/settings_plugin/updates.rs b/solitaire_engine/src/settings_plugin/updates.rs
new file mode 100644
index 0000000..06113f0
--- /dev/null
+++ b/solitaire_engine/src/settings_plugin/updates.rs
@@ -0,0 +1,487 @@
+//! Per-frame value-text updater systems and their label helpers.
+
+use super::*;
+
+use solitaire_core::DrawStockConfig;
+use solitaire_data::{AnimSpeed, settings::Theme};
+
+use crate::font_plugin::FontResource;
+use crate::progress_plugin::ProgressResource;
+use crate::resources::{SettingsScrollPos, SyncStatus, SyncStatusResource};
+use crate::theme::ThemeThumbnailCache;
+use crate::ui_modal::ModalScrim;
+use crate::ui_theme::{BORDER_SUBTLE_HC, HighContrastBackground, HighContrastBorder};
+
+/// Spawns the Settings panel when `SettingsScreen` becomes `true`;
+/// despawns it when it becomes `false`.
+#[allow(clippy::too_many_arguments)]
+pub(super) fn sync_settings_panel_visibility(
+    screen: Res<SettingsScreen>,
+    panels: Query<Entity, With<SettingsPanel>>,
+    other_modal_scrims: Query<(), (With<ModalScrim>, Without<SettingsPanel>)>,
+    scroll_nodes: Query<&ScrollPosition, With<SettingsScrollNode>>,
+    mut scroll_pos: ResMut<SettingsScrollPos>,
+    mut commands: Commands,
+    settings: Res<SettingsResource>,
+    sync_status: Option<Res<SyncStatusResource>>,
+    progress: Option<Res<ProgressResource>>,
+    font_res: Option<Res<FontResource>>,
+    theme_registry: Option<Res<crate::theme::ThemeRegistry>>,
+    theme_thumbs: Option<Res<ThemeThumbnailCache>>,
+    card_images: Option<Res<crate::card_plugin::CardImageSet>>,
+) {
+    if !screen.is_changed() {
+        return;
+    }
+    if screen.0 {
+        if panels.is_empty() && other_modal_scrims.is_empty() {
+            let status_label = sync_status.map_or_else(
+                || "Status: local only".to_string(),
+                |s| sync_status_label(&s.0),
+            );
+            let unlocked_backs = progress
+                .as_ref()
+                .map_or(&[0][..], |p| p.0.unlocked_card_backs.as_slice());
+            let unlocked_bgs = progress
+                .as_ref()
+                .map_or(&[0][..], |p| p.0.unlocked_backgrounds.as_slice());
+            // Snapshot themes by id, display_name and (optional)
+            // thumbnail pair so spawn_settings_panel doesn't have to
+            // know about the registry / cache shapes. Empty when
+            // ThemeRegistryPlugin isn't installed (tests under
+            // MinimalPlugins) — the picker row simply won't render.
+            // Missing thumbnails (cache not ready, or partial user
+            // theme) leave `thumbnails: None` so the chip renders its
+            // plain-text fallback instead of a broken sprite.
+            let themes: Vec<ThemePickerEntry> = theme_registry
+                .as_deref()
+                .map(|r| {
+                    r.iter()
+                        .map(|e| ThemePickerEntry {
+                            id: e.id.clone(),
+                            display_name: e.display_name.clone(),
+                            thumbnails: theme_thumbs
+                                .as_deref()
+                                .and_then(|c| c.get(&e.id))
+                                .filter(|p| p.is_fully_populated())
+                                .cloned(),
+                        })
+                        .collect()
+                })
+                .unwrap_or_default();
+            // The active card-art theme can supply its own back image —
+            // see `card_plugin::CardImageSet::theme_back`. When that is
+            // populated the legacy "Card Back" picker has no visible
+            // effect, so we render it muted with an explanatory caption
+            // rather than letting the player click swatches that do
+            // nothing. Absent under `MinimalPlugins`; treated as
+            // "no override" in that case.
+            let theme_overrides_back = card_images
+                .as_ref()
+                .is_some_and(|cs| cs.theme_back.is_some());
+            spawn_settings_panel(
+                &mut commands,
+                &settings.0,
+                &status_label,
+                unlocked_backs,
+                unlocked_bgs,
+                &themes,
+                scroll_pos.0,
+                font_res.as_deref(),
+                theme_overrides_back,
+            );
+        }
+    } else {
+        // Save the current scroll offset before despawning the panel.
+        if let Ok(sp) = scroll_nodes.single() {
+            scroll_pos.0 = sp.0.y;
+        }
+        for entity in &panels {
+            commands.entity(entity).despawn();
+        }
+    }
+}
+
+/// Keeps the sync-status text node current while the panel is open.
+pub(super) fn update_sync_status_text(
+    sync_status: Option<Res<SyncStatusResource>>,
+    mut text_nodes: Query<&mut Text, With<SyncStatusText>>,
+) {
+    let Some(status) = sync_status else {
+        return;
+    };
+    if !status.is_changed() {
+        return;
+    }
+    let label = sync_status_label(&status.0);
+    for mut text in &mut text_nodes {
+        **text = label.clone();
+    }
+}
+
+pub(super) fn update_card_back_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<CardBackText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = card_back_label(settings.0.selected_card_back);
+    }
+}
+
+pub(super) fn update_background_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<BackgroundText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = background_label(settings.0.selected_background);
+    }
+}
+
+pub(super) fn update_anim_speed_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<AnimSpeedText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = anim_speed_label(&settings.0.animation_speed);
+    }
+}
+
+pub(super) fn update_color_blind_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<ColorBlindText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = color_blind_label(settings.0.color_blind_mode);
+    }
+}
+
+pub(super) fn update_high_contrast_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<HighContrastText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = on_off_label(settings.0.high_contrast_mode);
+    }
+}
+
+/// Repaints `BorderColor` on every entity tagged with
+/// [`HighContrastBorder`] based on `Settings::high_contrast_mode`.
+/// Off → the marker's `default_color`; on → `BORDER_SUBTLE_HC`
+/// (`#a0a0a0`). Compares against the current border colour and
+/// only mutates when different so Bevy's change-detection
+/// doesn't trigger repaints every frame.
+///
+/// Spec at `design-system.md` §Accessibility (#2): under HC,
+/// outlines boost from `#505050` (BORDER_STRONG) to `#a0a0a0` so
+/// modal panels, popover edges, and focus-ring carriers stay
+/// legible on low-quality displays / for low-vision users.
+///
+/// Tagged sites in v0.21.x: the modal scaffold's card border
+/// (`ui_modal::spawn_modal`). More sites can be tagged in
+/// follow-ups by adding `HighContrastBorder::with_default(...)`
+/// to their spawn tuple.
+pub(super) fn update_high_contrast_borders(
+    settings: Res<SettingsResource>,
+    mut borders: Query<(&HighContrastBorder, &mut BorderColor)>,
+) {
+    let high_contrast = settings.0.high_contrast_mode;
+    for (marker, mut border) in borders.iter_mut() {
+        let target = if high_contrast {
+            BORDER_SUBTLE_HC
+        } else {
+            marker.default_color
+        };
+        // Only mutate when actually different — avoids per-frame
+        // change-detection churn. `border.left` is representative
+        // because every tagged site uses `BorderColor::all(...)`.
+        if border.left != target {
+            *border = BorderColor::all(target);
+        }
+    }
+}
+
+/// Repaints `BackgroundColor` on every entity tagged with
+/// [`HighContrastBackground`] based on `Settings::high_contrast_mode`.
+/// Off → the marker's `default_color`; on → `BORDER_SUBTLE_HC`
+/// (`#a0a0a0`). Compares against the current background and only
+/// mutates when different so Bevy's change-detection doesn't trigger
+/// repaints every frame.
+///
+/// Parallel to [`update_high_contrast_borders`]. Same on/off rule,
+/// same change-suppression idiom, different colour channel —
+/// `BackgroundColor` for tick marks, decorative strips, fine
+/// separators that paint their shape directly rather than via a
+/// `BorderColor` on a wider Node.
+///
+/// Tagged sites in v0.21.x: the replay overlay's 1 px scrub track
+/// + 5 quarter-mark notch ticks (`replay_overlay::spawn_overlay`).
+///
+/// More sites can be tagged in follow-ups by adding
+/// `HighContrastBackground::with_default(...)` to their spawn tuple.
+pub(super) fn update_high_contrast_backgrounds(
+    settings: Res<SettingsResource>,
+    mut backgrounds: Query<(&HighContrastBackground, &mut BackgroundColor)>,
+) {
+    let high_contrast = settings.0.high_contrast_mode;
+    for (marker, mut bg) in backgrounds.iter_mut() {
+        let target = if high_contrast {
+            marker.hc_color
+        } else {
+            marker.default_color
+        };
+        if bg.0 != target {
+            *bg = BackgroundColor(target);
+        }
+    }
+}
+
+pub(super) fn update_reduce_motion_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<ReduceMotionText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = on_off_label(settings.0.reduce_motion_mode);
+    }
+}
+
+pub(super) fn update_touch_input_mode_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<TouchInputModeText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = touch_input_mode_label(&settings.0.touch_input_mode);
+    }
+}
+
+/// Refreshes the live "Winnable deals only" toggle value in the
+/// Gameplay section whenever `SettingsResource` changes (button click,
+/// hand-edited `settings.json` reload, etc.).
+pub(super) fn update_winnable_deals_only_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<WinnableDealsOnlyText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = winnable_deals_only_label(settings.0.winnable_deals_only);
+    }
+}
+
+/// Refreshes the live "Share usage data" toggle value in the Privacy section
+/// whenever `SettingsResource` changes.
+pub(super) fn update_analytics_enabled_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<AnalyticsEnabledText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = on_off_label(settings.0.analytics_enabled);
+    }
+}
+
+/// Refreshes the live "Smart window size" toggle value whenever
+/// `SettingsResource` changes. The flag is stored negatively as
+/// `disable_smart_default_size`, so the label inverts.
+pub(super) fn update_smart_default_size_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<SmartDefaultSizeText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = smart_default_size_label(!settings.0.disable_smart_default_size);
+    }
+}
+
+/// Refreshes the live tooltip-delay value in the Gameplay section
+/// whenever `SettingsResource` changes (slider buttons, hand-edited
+/// settings.json reload, etc.).
+pub(super) fn update_tooltip_delay_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<TooltipDelayText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = tooltip_delay_label(settings.0.tooltip_delay_secs);
+    }
+}
+
+/// Refreshes the live time-bonus-multiplier value in the Gameplay
+/// section whenever `SettingsResource` changes.
+pub(super) fn update_time_bonus_multiplier_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<TimeBonusMultiplierText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = time_bonus_label(settings.0.time_bonus_multiplier);
+    }
+}
+
+/// Refreshes the live replay-playback per-move-interval value in the
+/// Gameplay section whenever `SettingsResource` changes (slider buttons,
+/// hand-edited settings.json reload, etc.).
+pub(super) fn update_replay_move_interval_text(
+    settings: Res<SettingsResource>,
+    mut text_nodes: Query<&mut Text, With<ReplayMoveIntervalText>>,
+) {
+    if !settings.is_changed() {
+        return;
+    }
+    for mut text in &mut text_nodes {
+        **text = replay_move_interval_label(settings.0.replay_move_interval_secs);
+    }
+}
+
+pub(super) fn card_back_label(idx: usize) -> String {
+    if idx == 0 {
+        "Default".to_string()
+    } else {
+        format!("Style {idx}")
+    }
+}
+
+pub(super) fn background_label(idx: usize) -> String {
+    if idx == 0 {
+        "Default".to_string()
+    } else {
+        format!("Style {idx}")
+    }
+}
+
+pub(super) fn sync_status_label(status: &SyncStatus) -> String {
+    match status {
+        SyncStatus::Idle => "Status: idle".to_string(),
+        SyncStatus::Syncing => "Status: syncing…".to_string(),
+        SyncStatus::LastSynced(t) => {
+            let secs = chrono::Utc::now()
+                .signed_duration_since(*t)
+                .num_seconds()
+                .max(0);
+            if secs < 60 {
+                format!("Last synced: {secs}s ago")
+            } else {
+                format!("Last synced: {}m ago", secs / 60)
+            }
+        }
+        SyncStatus::Error(e) => format!("Sync error: {e}"),
+    }
+}
+
+pub(super) fn draw_mode_label(mode: &DrawStockConfig) -> String {
+    match mode {
+        DrawStockConfig::DrawOne => "Draw 1".into(),
+        DrawStockConfig::DrawThree => "Draw 3".into(),
+    }
+}
+
+pub(super) fn anim_speed_label(speed: &AnimSpeed) -> String {
+    match speed {
+        AnimSpeed::Normal => "Normal".into(),
+        AnimSpeed::Fast => "Fast".into(),
+        AnimSpeed::Instant => "Instant".into(),
+    }
+}
+
+pub(super) fn theme_label(theme: &Theme) -> String {
+    match theme {
+        Theme::Green => "Green".into(),
+        Theme::Blue => "Blue".into(),
+        Theme::Dark => "Dark".into(),
+    }
+}
+
+pub(super) fn color_blind_label(enabled: bool) -> String {
+    if enabled { "ON".into() } else { "OFF".into() }
+}
+
+/// Generic ON/OFF label shared by the high-contrast and reduce-
+/// motion accessibility toggles. Same format as
+/// [`color_blind_label`] / [`winnable_deals_only_label`] —
+/// keeping all simple boolean toggle rows visually uniform.
+pub(super) fn on_off_label(enabled: bool) -> String {
+    if enabled { "ON".into() } else { "OFF".into() }
+}
+
+/// Display string for the "Winnable deals only" toggle. Mirrors
+/// [`color_blind_label`] — "ON" / "OFF" — so the layout is uniform
+/// with the rest of the Gameplay-section toggles.
+pub(super) fn winnable_deals_only_label(enabled: bool) -> String {
+    if enabled { "ON".into() } else { "OFF".into() }
+}
+
+pub(super) fn touch_input_mode_label(mode: &solitaire_data::settings::TouchInputMode) -> String {
+    use solitaire_data::settings::TouchInputMode;
+    match mode {
+        TouchInputMode::OneTap => "One-tap".into(),
+        TouchInputMode::TapToSelect => "Tap to select".into(),
+    }
+}
+
+/// Display string for the "Smart window size" toggle. The argument
+/// is the *enabled* state (i.e. the inverse of the underlying
+/// `disable_smart_default_size` field) so reading the label gives
+/// the player intuitive ON/OFF semantics.
+pub(super) fn smart_default_size_label(enabled: bool) -> String {
+    if enabled { "ON".into() } else { "OFF".into() }
+}
+
+/// Formats the tooltip-hover delay for display in the Settings panel.
+/// `0.0` reads as `"Instant"` so the zero-delay case has a name; any
+/// other value prints as `"{n:.1} s"` (e.g. `"0.5 s"`, `"1.2 s"`).
+pub(super) fn tooltip_delay_label(secs: f32) -> String {
+    if secs <= 0.0 {
+        "Instant".into()
+    } else {
+        format!("{secs:.1} s")
+    }
+}
+
+/// Formats the cosmetic time-bonus multiplier for display in the
+/// Settings panel. `0.0` reads as `"Off"` so the player understands the
+/// time-bonus row will be hidden; any other value prints as
+/// `"{n:.1}×"` (e.g. `"1.0×"`, `"1.5×"`).
+pub(super) fn time_bonus_label(value: f32) -> String {
+    if value <= 0.0 {
+        "Off".into()
+    } else {
+        format!("{value:.1}×")
+    }
+}
+
+/// Formats the replay-playback per-move interval for display in the
+/// Settings panel. Mirrors [`tooltip_delay_label`] for parity — the
+/// readout is `"{n:.2} s/move"` (e.g. `"0.45 s/move"`, `"0.10 s/move"`),
+/// using two decimal places because the step is 0.05 s.
+pub(super) fn replay_move_interval_label(secs: f32) -> String {
+    format!("{secs:.2} s/move")
+}