v0.2.10 Refactor spinner handling with CustomSpinner

Replaced `_set_spinner` with a `CustomSpinner` context manager to improve readability, ensure proper cleanup, and enhance user experience during loading states. Updated `_init_session`, `_game_over_content`, and `run_app` to use `CustomSpinner` for better integration with Streamlit's UI components.

Introduced a base64-encoded `wrdler.gif` in
`show_spinner` for improved portability and added fallback visuals for robustness. Refactored spinner overlay styles for better appearance and transitions.

Modularized code by adding `_render_game_tab` and consolidating spinner logic into `CustomSpinner`. Removed redundant code, improved error handling, and refined CSS for a polished UI.
v0.2.10 Failed Spinner
move some functions to ui_helper

.gitattributes

@@ -35,4 +35,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 *.mp3 filter=lfs diff=lfs merge=lfs -text
 *.wav filter=lfs diff=lfs merge=lfs -text
-*.ico filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text

CLAUDE.md

@@ -1,6 +1,6 @@
 # CLAUDE
 
-Wrdler v0.2.9
+Wrdler v0.2.10
 
 # Wrdler - Project Context
 
@@ -12,11 +12,12 @@ Wrdler is a simplified vocabulary puzzle game based on BattleWords:
 - **2 free letter guesses at game start** (all instances revealed)
 - **Word composition:** 2 four-letter, 2 five-letter, 2 six-letter words per puzzle
 
-**Current Version:** 0.2.9
+**Current Version:** 0.2.10
+**Last Updated:** 2025-12-18
 **Repository:** https://github.com/Oncorporation/Wrdler.git
 **Branch:** AI (working branch)
 
-## Current Features (v0.2.9)
+## Current Features (v0.2.10)
 
 ### Core Gameplay
 - 8x6 grid with 6 hidden words (one per row, horizontal only)
@@ -26,6 +27,7 @@ Wrdler is a simplified vocabulary puzzle game based on BattleWords:
 - Game ends when all words guessed or all word letters are revealed
 - Incorrect guess history display (toggleable, default enabled)
 - 10 incorrect guess limit per game
+- **All leaderboard and challenge submissions use the latest st.session_state, including challenge overrides.**
 
 ### Game Modes
 1. **Classic Mode:** Allows consecutive guessing after correct answers
@@ -49,11 +51,9 @@ Wrdler is a simplified vocabulary puzzle game based on BattleWords:
 - Default sound effects enabled in settings
 - New default configuration: `classic-classic-full_sound_free_letters.json`
 - Deprecated configuration removed: `classic-classic-2.json`
-- Sidebar now focused on lightweight controls (if any) and navigation
 
 ### Word List Management
-- Sidebar controls for sorting and filtering word lists
-- Filter capability using `assets/filter.txt` blocklist to remove unwanted words
+- Sort and filter word lists (filter using `assets/filter.txt` blocklist)
 - Dialog display of removed words after filtering
 
 ### Challenge Mode & Remote Storage
@@ -68,6 +68,7 @@ Wrdler is a simplified vocabulary puzzle game based on BattleWords:
   - Challenge scores also contribute to daily/weekly leaderboards
   - Source tracking via `source_challenge_id` field
   - Unified JSON format with `entry_type` field (daily/weekly/challenge)
+- **Challenge settings override defaults on load, and all submissions use the current session state.**
 
 **Access:** 'Leaderboard' link in the footer navigation at the bottom of the page
 
@@ -77,7 +78,7 @@ Wrdler is a simplified vocabulary puzzle game based on BattleWords:
 - **Auto Score Submission:** Checks qualification for top 25 after game completion
 - **Storage:** Folder-based discovery at `games/leaderboards/{daily|weekly}/{period}/{file_id}/settings.json`
 - **File ID Format:** `{wordlist_source}-{game_mode}-{sequence}` (e.g., `classic-classic-0`)
-- **Leaderboard Page:** Four tabs (Today, Daily, Weekly, History) accessible via `?page=today|daily|weekly|history`
+- **Leaderboard Page:** Four tabs (Today, Daily, Weekly, History) accessible via `?page=today|daily|weekly|history` using query parameter routing and custom navigation links (not Streamlit native tabs)
 - Leaderboard files use UTC for all period boundaries.
 - When displaying daily leaderboards, show the UTC period as a PST date range.
 - Example: For UTC file date 2025-12-08, display:
@@ -86,6 +87,10 @@ Wrdler is a simplified vocabulary puzzle game based on BattleWords:
   2025-12-07 16:00:00 PST to 2025-12-08 15:59:59 PST
   The leaderboard expander label should show: `Mon, Dec 08, 2025 4:00 PM PST – Tue, Dec 09, 2025 3:59:59 PM PST [settings badge]`
 
+### Game Over Dialog & Leaderboard Integration
+- Game over dialog now integrates leaderboard submission and displays qualification results (rankings)
+- After submitting your score, the dialog will show if you qualified for the daily or weekly leaderboard and your rank
+
 ### AI Word Generation
 - Topic-based word list generation via HuggingFace Spaces or local transformers
 - Automatic word saving (max 1000 words per file)
@@ -103,7 +108,8 @@ Wrdler is a simplified vocabulary puzzle game based on BattleWords:
 - Works offline for basic functionality
 
 ### Footer Navigation
-- Updated to prevent reloading active pages
+- Navigation links to Leaderboard, Play, and Settings pages are in the footer (not the sidebar)
+- Footer navigation prevents reloading active pages
 
 ## Technical Architecture
 
@@ -120,7 +126,7 @@ Wrdler is a simplified vocabulary puzzle game based on BattleWords:
 wrdler/
 ├── app.py                    # Streamlit entry point
 ├── wrdler/                   # Main package
-│   ├── __init__.py          # Version: 0.2.9
+│   ├── __init__.py          # Version: 0.2.10
 │   ├── models.py            # Data models (Coord, Word, Puzzle, GameState)
 │   ├── generator.py         # Puzzle generation with deterministic seeding
 │   ├── logic.py             # Game mechanics (reveal, guess, scoring)
@@ -245,80 +251,16 @@ streamlit run app.py
 pytest tests/
 ```
 
-## Next Step: OAuth-Protected Settings Page
-
-### Goal
-Move all game settings from sidebar to a dedicated settings page at `?page=settings`, protected by HuggingFace OAuth (admin-only access).
-
-### Implementation Approach
-1. **Use existing query parameter routing** (like leaderboard pages)
-2. **HuggingFace OAuth integration:**
-   - Add `hf_oauth: true` to README.md YAML header ✅ DONE
-   - Create `wrdler/oauth.py` with utility functions ✅ DONE
-   - OAuth user info available at `st.session_state["oauth_user"]`
-   - Check admin access via `ADMIN_USERS` environment variable
-3. **Create `wrdler/settings_page.py`:**
-   - Check authentication with `require_admin()` from oauth.py
-   - Move settings UI from sidebar (word list, game mode, audio, etc.)
-   - Persist settings to session state
-   - Accessible via `?page=settings`
-4. **Modify `wrdler/ui.py`:**
-   - Add settings page route handler (similar to leaderboard routing)
-   - Remove settings from sidebar (keep minimal controls only)
-   - Add "⚙️ Settings" link in footer navigation
-5. **Keep sidebar minimal:**
-   - Version info
-   - User info (if logged in)
-   - Link to settings page
-
-### HuggingFace OAuth Flow
-1. User clicks login button (HF Spaces provides this automatically)
-2. User authorizes with HF account
-3. HF redirects back with OAuth token
-4. User info stored in `st.session_state["oauth_user"]`
-5. Check `username` against `ADMIN_USERS` env var
-6. Grant/deny access to settings page
-
-### Files to Modify
-- `wrdler/ui.py` - Add settings page routing, remove sidebar settings
-- `wrdler/settings_page.py` - Settings UI with OAuth protection (enhanced)
-- `wrdler/oauth.py` - Already created
-
-### Key OAuth Functions (wrdler/oauth.py)
-```python
-get_user_info() → Dict | None           # Get authenticated user info
-get_username() → str | None             # Get username (preferred_username)
-is_authenticated() → bool               # Check if user is logged in
-is_admin(allowed_users) → bool          # Check if user is admin
-require_admin(page_name) → bool         # Validate admin access or show error
-```
+## OAuth-Protected Settings Page
+- Settings page at `?page=settings`, protected by HuggingFace OAuth (admin-only access)
+- Uses query parameter routing and checks admin access via `ADMIN_USERS` env var
 
 ## Technical Notes
-
-### Important Implementation Details
-- **Python syntax only** - Use colons `:` not braces `{}`
 - **8×6 grid:** `grid_rows=6`, `grid_cols=8`
 - **Horizontal-only placement:** One word per row
 - **Query param routing:** All pages use `?page=<name>` system
 - **Session state management:** Heavy use of `st.session_state`
-- **OAuth detection:** Check `st.session_state.get("oauth_user")`
-
-### Current Routing Pattern (ui.py)
-```python
-params = st.query_params
-page = params.get("page", "")
-
-if page in {"today", "daily", "weekly", "history"}:
-    render_leaderboard_page(default_tab=page)
-    return
-
-if page == "settings":
-    render_settings_page()
-    return
-
-# Default: main game page
-run_app()
-```
+- **All leaderboard and challenge submissions use the latest st.session_state, including challenge overrides.**
 
 ## Deployment Platforms
 1. **HuggingFace Spaces** (Primary) - Dockerfile deployment with OAuth support

README.md

@@ -21,7 +21,7 @@ thumbnail: >-
 
 # Wrdler
 
-Version 0.2.9
+Version 0.2.10
 
 Wrdler is a vocabulary puzzle game with daily and weekly leaderboards, 8x6 grid, and two free letter guesses at the start. See CHANGELOG or specs for details on the latest updates.
 
@@ -29,7 +29,8 @@ Wrdler is a vocabulary puzzle game with daily and weekly leaderboards, 8x6 grid,
 
 Wrdler is a vocabulary learning game with a simplified grid and strategic letter guessing. The objective is to discover hidden words on a grid by making smart guesses before all letters are revealed.
 
-**Current Version:** v0.2.9
+**Current Version:** v0.2.10
+**Last Updated:** 2025-12-18
 
 ## Key Differences from BattleWords
 
@@ -50,6 +51,7 @@ Wrdler is a vocabulary learning game with a simplified grid and strategic letter
 - Incorrect guess history with tooltip and optional display (enabled by default)
 - 10 incorrect guess limit per game
 - Two game modes: Classic (chain guesses) and Too Easy (single guess per reveal)
+- **All leaderboard and challenge submissions use the latest st.session_state, including challenge overrides.**
 
 ### Audio & Visuals
 - Ocean-themed gradient background with wave animations
@@ -91,6 +93,7 @@ Wrdler is a vocabulary learning game with a simplified grid and strategic letter
 - **Top 5 leaderboard** display in Challenge Mode banner
 - **"Show Challenge Share Links" toggle** (default OFF) to control URL visibility
 - Each player gets different random words from the same wordlist
+- **Challenge settings override defaults on load, and all submissions use the current session state.**
 
 ### 🏆 Daily & Weekly Leaderboards (v0.2.1) ✅
 **Comprehensive Leaderboard System:**
@@ -117,12 +120,16 @@ Wrdler is a vocabulary learning game with a simplified grid and strategic letter
 - **Daily Tab:** Last 7 days of daily leaderboards with expandable date groups
 - **Weekly Tab:** Last 5 weeks, each rendered as its own expander (current or `week=YYYY-Www` query selection opens by default)
 - **History Tab:** Historical leaderboard browser with dropdown selectors
+- **Navigation:** Access leaderboards via the footer navigation at the bottom of the page (not the sidebar)
+- **Routing:** Leaderboard page uses query parameters and custom navigation links for tab selection
 
 **Integration:**
 - Automatic submission after game completion (opt-in via game over popup)
+- Game over dialog now integrates leaderboard submission and displays qualification results (rankings)
 - Challenge scores also contribute to daily/weekly leaderboards
 - Source tracking via `source_challenge_id` field
 - Unified JSON format with `entry_type` field (daily/weekly/challenge)
+- **All leaderboard and challenge submissions use the latest st.session_state, including challenge overrides.**
 
 **Access:** 'Leaderboard' link in the footer navigation at the bottom of the page
 

specs/leaderboard_spec.md

@@ -1,9 +1,9 @@
 # Wrdler Leaderboard System Specification
 
-**Document Version:** 1.4.1
-**Project Version:** 0.2.8
+**Document Version:** 1.4.3
+**Project Version:** 0.2.10
 **Author:** GitHub Copilot
-**Last Updated:** 2025-12-08
+**Last Updated:** 2025-12-18
 **Status:** ✅ Implemented and Documented
 
 ---
@@ -38,6 +38,7 @@ This specification documents the implemented **Daily and Weekly Leaderboard Syst
 - ✅ Stores leaderboard data in HuggingFace repository using existing storage infrastructure
 - ✅ Uses folder-based discovery (no index.json) with descriptive folder names
 - ✅ Uses a unified JSON format consistent with existing challenge settings.json files
+- **All leaderboard and challenge submissions use the latest st.session_state, including challenge overrides.**
 
 **Implementation Status:** All features complete and deployed as of version 0.2.0
 
@@ -155,6 +156,8 @@ Instead of maintaining an `index.json` file, leaderboards are discovered by:
 
 ### 3.4 Data Flow
 
+- All leaderboard and challenge submissions use the latest st.session_state, including challenge overrides.
+
 ```
 ┌────────────────────┐
 │  Game Completion   │
@@ -521,46 +524,17 @@ def get_current_weekly_id() -> str:
 
 ## 10. UI Components
 
-### 10.1 Sidebar Navigation
-
-Add to `_render_sidebar()` in `ui.py`:
+### 10.1 Footer Navigation (Updated)
 
-```python
-st.header("Navigation")
-if st.button("🏆 Leaderboards", width="stretch"):
-    st.session_state["show_leaderboard_page"] = True
-    st.rerun()
-```
+Leaderboard navigation is now accessed via the footer menu at the bottom of the page, not the sidebar. The footer contains links to Leaderboard, Play, and Settings pages. This replaces the previous sidebar navigation.
 
-### 10.2 Game Over Integration
+### 10.2 Game Over Integration (Updated)
 
-Modify `_game_over_content()` in `ui.py` to:
+The game over dialog now integrates leaderboard submission and displays qualification results (rankings). After submitting your score, the dialog will show if you qualified for the daily or weekly leaderboard and your rank.
 
-1. Call `submit_score_to_all_leaderboards()` after generating share link
-2. Display qualification results:
+### 10.3 Leaderboard Page Routing (Updated)
 
-```python
-# After score submission
-if results["daily"]["qualified"]:
-    st.success(f"🏆 You ranked #{results['daily']['rank']} on today's leaderboard!")
-if results["weekly"]["qualified"]:
-    st.success(f"🏆 You ranked #{results['weekly']['rank']} on this week's leaderboard!")
-```
-
-### 10.3 Leaderboard Page Routing
-
-In `run_app()`:
-
-```python
-# Check if leaderboard page should be shown
-if st.session_state.get("show_leaderboard_page", False):
-    from wrdler.leaderboard_page import render_leaderboard_page
-    render_leaderboard_page()
-    if st.button("← Back to Game"):
-        st.session_state["show_leaderboard_page"] = False
-        st.rerun()
-    return  # Don't render game UI
-```
+Leaderboard page routing uses query parameters and custom navigation links for tab selection (e.g., `?page=today`, `?page=weekly`). Tabs are not implemented with Streamlit's native tabs but with custom links for better URL support.
 
 ---
 
@@ -863,6 +837,9 @@ HF_REPO_ID/games/
   - Always store full `users` list; apply `max_display_entries` at render time only.
 - Rank reporting:
   - Return rank based on full sorted list even if not displayed; if outside display limit, mark `qualified=False`.
+- **Duplicate removal:**
+  - If multiple entries exist with identical `username`, `word_list`, `score`, `time`, `timestamp`, and `word_list_difficulty`, only keep one entry.
+  - Prefer the entry with a non-null `source_challenge_id` if duplicates are found.
 
 ### 14.9 Commit and Retry Strategy (HF)
 

specs/requirements.md

@@ -1,8 +1,8 @@
 # Wrdler Requirements
 
-**Version:** 0.2.8
+**Version:** 0.2.10
 **Status:** Production Ready - Leaderboards Implemented
-**Last Updated:** 2025-12-09
+**Last Updated:** 2025-12-18
 
 This document breaks down the implementation tasks for Wrdler using the game rules described in `specs.md`. Wrdler is a Python/Streamlit project based on BattleWords but with a simplified 8x6 grid, horizontal-only words, and free letter guesses at the start.
 
@@ -15,6 +15,7 @@ This document breaks down the implementation tasks for Wrdler using the game rul
 - Horizontal words only (no vertical)
 - No radar/scope visualization
 - 2 free letter guesses at game start
+- **All leaderboard and challenge submissions use the latest st.session_state, including challenge overrides.**
 
 ## Implementation Details (v0.2.1)
 - **Tech Stack:** Python 3.12.8, Streamlit 1.51.0, numpy, matplotlib, transformers, gradio_client

specs/specs.md

@@ -1,9 +1,9 @@
 # Wrdler Specifications
 
-**Version:** 0.2.9
+**Version:** 0.2.10
+**Last Updated:** 2025-12-18
 
 **Status:** Production Ready - Leaderboards & Enhanced Settings Page Implemented
-**Last Updated:** 2025-12-09
 
 ## Overview
 Wrdler is a Python/Streamlit vocabulary puzzle game based on BattleWords, but with key differences. The objective is to discover hidden words on a grid by making strategic guesses and using free letter reveals at the game start.
@@ -17,6 +17,7 @@ Wrdler is a Python/Streamlit vocabulary puzzle game based on BattleWords, but wi
 - **Horizontal words only** (no vertical placement)
 - **No scope/radar visualization**
 - **2 free letter guesses at game start** (all instances of chosen letters are revealed)
+- **All leaderboard and challenge submissions use the latest st.session_state, including challenge overrides.**
 
 ## Game Board
 - 8 x 6 grid
@@ -142,26 +143,16 @@ HF_REPO_ID/games/
 - **History Tab:** Historical leaderboard browser
   - Dropdown selectors for period and settings
   - Separate daily and weekly columns
+- **Navigation:** Access leaderboards via the footer navigation at the bottom of the page (not the sidebar)
+- **Routing:** Leaderboard page uses query parameters and custom navigation links for tab selection
 
 **Integration:**
 - Automatic submission after game completion (opt-in)
+- Game over dialog now integrates leaderboard submission and displays qualification results (rankings)
 - Challenge scores also contribute to daily/weekly leaderboards
 - Source tracking via `source_challenge_id` field
 - Unified JSON format with `entry_type` field (daily/weekly/challenge)
-
-**Discovery:** Folder-based (no index.json)
-- Scans period folders for date/week IDs
-- Filters by file_id prefix for matching settings
-- Loads and verifies full settings match
-
-**Date Display Updates:**
-- All leaderboard files use UTC for period boundaries.
-- When displaying daily leaderboards, show the UTC period as a PST date range.
-- Example: For UTC file date 2025-12-08, display:
-  2025-12-08 00:00:00 UTC to 2025-12-08 23:59:59 UTC
-  and
-  2025-12-07 16:00:00 PST to 2025-12-08 15:59:59 PST
-  The leaderboard expander label should show: `Mon, Dec 08, 2025 4:00 PM PST – Tue, Dec 09, 2025 3:59:59 PM PST [settings badge]`
+- **All leaderboard and challenge submissions use the latest st.session_state, including challenge overrides.**
 
 **Access:** 'Leaderboard' link in the footer navigation at the bottom of the page
 

wrdler/__init__.py

@@ -9,5 +9,5 @@ Key differences from BattleWords:
 - Daily and weekly leaderboards
 """
 
-__version__ = "0.2.9"
+__version__ = "0.2.10"
 __all__ = ["models", "generator", "logic", "ui", "word_loader", "leaderboard", "leaderboard_page"]

wrdler/settings/settings.json

@@ -11,7 +11,7 @@
   "music_enabled": false,
   "music_volume": 15,
   "effects_volume": 25,
-  "enable_sound_effects": true,
+  "enable_sound_effects": false,
   "music_track_path": "background.mp3",
   "wordlist_source": "classic.txt",
   "puzzle_options": {

wrdler/ui.py

@@ -33,156 +33,38 @@ from .leaderboard import submit_score_to_all_leaderboards
 from .settings_page import render_settings_page
 from .local_storage import load_latest_settings
 
-st.set_page_config(initial_sidebar_state="collapsed")
+from .ui_helpers import (
+    fig_to_pil_rgba,
+    pwa_service_worker,
+    ocean_background_css,
+    inject_ocean_layers,
+    inject_styles,
+    _render_footer,
+    show_spinner,
+    _get_effective_game_title
+)
 
-# PWA (Progressive Web App) Support
-# Enables installing Wrdler as a native-feeling mobile app
-# Note: PWA meta tags are injected into <head> via Docker build (inject-pwa-head.sh)
-# This ensures proper PWA detection by browsers
-pwa_service_worker = """
-<script>
-// Register service worker for offline functionality
-// Note: Using inline Blob URL to bypass Streamlit's text/plain content-type for .js files
-if ('serviceWorker' in navigator) {
-  window.addEventListener('load', () => {
-    // Service worker code as string (inline to avoid MIME type issues)
-    const swCode = `
-const CACHE_NAME = 'wrdler-v0.0.1';
-const RUNTIME_CACHE = 'wrdler-runtime';
-
-const PRECACHE_URLS = [
-  '/',
-  '/app/static/manifest.json',
-  '/app/static/icon-192.png',
-  '/app/static/icon-512.png'
-];
-
-self.addEventListener('install', event => {
-  console.log('[ServiceWorker] Installing...');
-  event.waitUntil(
-    caches.open(CACHE_NAME)
-      .then(cache => {
-        console.log('[ServiceWorker] Precaching app shell');
-        return cache.addAll(PRECACHE_URLS);
-      })
-      .then(() => self.skipWaiting())
-  );
-});
-
-self.addEventListener('activate', event => {
-  console.log('[ServiceWorker] Activating...');
-  event.waitUntil(
-    caches.keys().then(cacheNames => {
-      return Promise.all(
-        cacheNames.map(cacheName => {
-          if (cacheName !== CACHE_NAME && cacheName !== RUNTIME_CACHE) {
-            console.log('[ServiceWorker] Deleting old cache:', cacheName);
-            return caches.delete(cacheName);
-          }
-        })
-      );
-    }).then(() => self.clients.claim())
-  );
-});
-
-self.addEventListener('fetch', event => {
-  if (event.request.method !== 'GET') return;
-  if (!event.request.url.startsWith('http')) return;
-
-  event.respondWith(
-    caches.open(RUNTIME_CACHE).then(cache => {
-      return fetch(event.request)
-        .then(response => {
-          if (response.status === 200) {
-            cache.put(event.request, response.clone());
-          }
-          return response;
-        })
-        .catch(() => {
-          return caches.match(event.request).then(cachedResponse => {
-            if (cachedResponse) {
-              console.log('[ServiceWorker] Serving from cache:', event.request.url);
-              return cachedResponse;
-            }
-            return new Response('Offline - Please check your connection', {
-              status: 503,
-              statusText: 'Service Unavailable',
-              headers: new Headers({'Content-Type': 'text/plain'})
-            });
-          });
-        });
-    })
-  );
-});
-
-self.addEventListener('message', event => {
-  if (event.data.action === 'skipWaiting') {
-    self.skipWaiting();
-  }
-});
-`;
-
-    // Create Blob URL for service worker
-    const blob = new Blob([swCode], { type: 'application/javascript' });
-    const swUrl = URL.createObjectURL(blob);
-
-    navigator.serviceWorker.register(swUrl)
-      .then(registration => {
-        console.log('[PWA] Service Worker registered successfully:', registration.scope);
-
-        registration.addEventListener('updatefound', () => {
-          const newWorker = registration.installing;
-          newWorker.addEventListener('statechange', () => {
-            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
-              console.log('[PWA] New version available! Refresh to update.');
-            }
-          });
-        });
-      })
-      .catch(error => {
-        console.log('[PWA] Service Worker registration failed:', error);
-      });
-  });
-}
-
-// Prompt user to install PWA (for browsers that support it)
-let deferredPrompt;
-window.addEventListener('beforeinstallprompt', (e) => {
-  console.log('[PWA] Install prompt available');
-  e.preventDefault();
-  deferredPrompt = e;
-  // Could show custom install button here if desired
-});
-
-// Track when user installs the app
-window.addEventListener('appinstalled', () => {
-  console.log('[PWA] Wrdler installed successfully!');
-  deferredPrompt = null;
-});
-</script>
-"""
+# --- Spinner context manager for custom spinner ---
+class CustomSpinner:
+    """Context manager for showing custom spinner with wrdler.gif"""
+    def __init__(self, placeholder, message: str = "Loading..."):
+        self.placeholder = placeholder
+        self.message = message
 
-CoordLike = Tuple[int, int]
+    def __enter__(self):
+        with self.placeholder.container():
+            show_spinner(self.message)
+        #wait 1 sec to ensure spinner is visible
+        time.sleep(0.2)
 
-def _get_effective_game_title() -> str:
-    """
-    Get the effective game title, prioritizing:
-    1. Challenge-specific game_title from shared_game_settings
-    2. Session state game_title (if set)
-    3. APP_SETTINGS default
-    4. Fallback to "Wrdler"
-    """
-    # First check shared game settings (challenge mode)
-    shared_settings = st.session_state.get("shared_game_settings")
-    if shared_settings and shared_settings.get("game_title"):
-        return shared_settings["game_title"]
-    
-    # Then check session state
-    if st.session_state.get("game_title"):
-        return st.session_state["game_title"]
-    
-    # Fall back to APP_SETTINGS
-    return APP_SETTINGS.get("game_title", "Wrdler")
+        return self
+
+    def __exit__(self, *args):
+        self.placeholder.empty()
+
+st.set_page_config(initial_sidebar_state="collapsed")
+
+CoordLike = Tuple[int, int]
 
 
 def _apply_challenge_settings(settings: dict) -> None:
@@ -207,13 +89,6 @@ def _apply_challenge_settings(settings: dict) -> None:
         st.session_state.game_title = settings["game_title"]
 
 
-def fig_to_pil_rgba(fig):
-    canvas = FigureCanvas(fig)
-    canvas.draw()
-    w, h = fig.canvas.get_width_height()
-    img = np.frombuffer(canvas.buffer_rgba(), dtype=np.uint8).reshape(h, w, 4)
-    return Image.fromarray(img, mode="RGBA")
-
 def _coord_to_xy(c) -> CoordLike:
     # Supports dataclass Coord(x, y) or a 2-tuple/list.
     if hasattr(c, "x") and hasattr(c, "y"):
@@ -238,420 +113,15 @@ def _build_letter_map(puzzle) -> dict[CoordLike, str]:
                 letters[xy] = text[i]
     return letters
 
-ocean_background_css = """
-<style>
-:root {
-  --water-deep: #0b2a4a;
-  --water-mid:  #0f3968;
-  --water-lite: #165ba8;
-  --water-sky:  #1d64c8;
-  --foam:       rgba(255,255,255,0.18);
-}
-
-.stAppHeader{
-    opacity:0.6;
-}
-
-.stApp {
-  margin: 0;
-  min-height: 100vh;
-  overflow: hidden;  /* prevent scrollbars from animated layers */
-  background-attachment: scroll;
-  position: relative;
-
-  /* Static base gradient */
-  background-image:
-    linear-gradient(180deg, var(--water-sky) 0%, var(--water-lite) 35%, var(--water-mid) 70%, var(--water-deep) 100%);
-  background-size: 100% 100%;
-  background-position: 50% 50%;
-
-  animation: none !important;
-  will-change: background-position;
-}
-
-/* Animated overlay waves (under bg layers) */
-.stApp::before {
-  content: "";
-  position: absolute;
-  inset: -10% -10%;
-  z-index: 0;
-  pointer-events: none;
-  background:
-    repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 22px),
-    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 18px);
-  mix-blend-mode: screen;
-  opacity: 0.10;
-  /* animation: waveOverlayScroll 16s linear infinite; */
-}
-.stIFrame {
-    margin-bottom:25px;
-}
-
-@keyframes waveOverlayScroll {
-  0%   { background-position:   0px   0px,   0px   0px; }
-  100% { background-position: -800px   0px,   0px -600px; }
-}
-
-/* Keep Streamlit content above background/overlay */
-.stApp > div { position: relative; z-index: 5; }
-
-/* Slower, more subtle animations */
-@keyframes oceanHighlight {
-  0%   { background-position: 50% 0%; }
-  50%  { background-position: 60% 8%; }
-  100% { background-position: 50% 0%; }
-}
-
-@keyframes oceanLong {
-  0%   { background-position: 0% 50%; }
-  100% { background-position: -100% 50%; }
-}
-
-@keyframes oceanMid {
-  0%   { background-position: 100% 50%; }
-  100% { background-position: 200% 50%; }
-}
-
-@keyframes oceanFine {
-  0%   { background-position: 0% 50%; }
-  100% { background-position: 100% 50%; }
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .stApp, .stApp::before { animation: none; }
-}
-</style>
-"""
-
-def inject_ocean_layers() -> None:
-    st.markdown(
-        """
-        <style>
-          .bw-bg-container {
-            position: fixed;     /* fixed to viewport, not stApp */
-            inset: 0;
-            z-index: 1;          /* below content (z=5) but above ::before (z=0) */
-            pointer-events: none;
-            overflow: hidden;    /* clip children */
-          }
-          .bw-bg-layer {
-            position: absolute;
-            inset: 0;
-            width: 100vw;
-            height: 100vh;
-            pointer-events: none;
-          }
-          /* Explicit stacking order with slower animations */
-          .bw-bg-highlight { 
-            z-index: 11; 
-            background: radial-gradient(150% 100% at 50% -20%, rgba(255,255,255,0.10) 0%, transparent 60%); 
-            background-size: 150% 150%;  /* reduced from 300% */
-            /* animation: oceanHighlight 12s ease-in-out infinite; */  /* doubled from 6s */ 
-          }
-          .bw-bg-long { 
-            z-index: 12; 
-            background: repeating-linear-gradient(-6deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 18px, rgba(0,0,0,0.04) 18px, rgba(0,0,0,0.04) 48px); 
-            background-size: 150% 150%;  /* reduced from 320% */
-            /* animation: oceanLong 36s linear infinite; */ /* doubled from 18s */
-            opacity: 0.2; 
-          }
-          .bw-bg-mid { 
-            z-index: 13; 
-            background: repeating-linear-gradient(-12deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 26px); 
-            background-size: 150% 150%;  /* reduced from 260% */
-            /* animation: oceanMid 24s linear infinite; */ /* doubled from 12s */
-            opacity: 0.2; 
-          }
-          .bw-bg-fine { 
-            z-index: 14; 
-            background: repeating-linear-gradient(-18deg, var(--foam) 0px, var(--foam) 4px, transparent 4px, transparent 12px); 
-            background-size: 120% 120%;  /* reduced from 200% */
-            /* animation: oceanFine 14s linear infinite; */  /* doubled from 7s */
-            opacity: 0.15; 
-          }
-        </style>
-        <div class="bw-bg-container">
-          <div class="bw-bg-layer bw-bg-highlight"></div>
-          <div class="bw-bg-layer bw-bg-long"></div>
-          <div class="bw-bg-layer bw-bg-mid"></div>
-          <div class="bw-bg-layer bw-bg-fine"></div>
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
-
-def inject_styles() -> None:
-    st.markdown(
-        """
-        <style>
-            /* Center main content and limit width */
-            # .stApp, body {
-            #     background: rgba(29, 100, 200, 0.5);
-            # }
-           .stMainBlockContainer {
-            max-width: 1100px;
-           }
-           .stHeading {
-                margin-bottom: -1.5rem !important;
-                margin-top: -1.5rem !important;
-                # font-size: 1.75rem !important; /* Title */
-                line-height: 1.1 !important;
-           }
-           .stHeading h3 {font-size: 1.35rem;}
-          /* Base grid cell visuals */
-          .bw-row { display: flex; gap: 0.1rem; flex-wrap: nowrap; min-height: 48px;}
-          .bw-cell {
-            width: 100%;
-            gap: 0.1rem;
-            aspect-ratio: 16 / 11;
-            line-height: 1.6;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: 1px solid #1d64c8;
-            border-radius: 0;
-            font-weight: 700;
-            user-select: none;
-            padding: 0.5rem 0.75rem;
-            font-size: 1.4rem;
-            min-height: 1.75rem;
-            min-width: 1.25em;
-            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
-            background: #1d64c8;   /* Base cell color */
-            color: #FFFFFF;         /* Base text color for contrast */
-          }
-          /* Found letter cells */
-          .bw-cell.letter { background: #d7faff; color: #050057; }
-          /* Optional empty state if ever used */
-          .bw-cell.empty  { background: #3a3a3a; color: #ffffff;}
-          /* Completed word cells */
-          .bw-cell.bw-cell-complete { background: #050057 !important; color: #d7faff !important; }
-
-          /* Free letter buttons */
-          .bw-free-letter-btn {
-            min-width: 60px !important;
-            height: 60px !important;
-            font-size: 1.5rem !important;
-            font-weight: 700 !important;
-            border-radius: 50% !important;
-            background: linear-gradient(135deg, #20d46c 0%, #1ca41c 100%) !important;
-            color: #ffffff !important;
-            border: 3px solid #1ca41c !important;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
-            transition: all 0.2s ease !important;
-          }
-          .bw-free-letter-btn:hover {
-            background: linear-gradient(135deg, #1ca41c 0%, #20d46c 100%) !important;
-            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3) !important;
-            transform: translateY(-2px) !important;
-          }
-          .bw-free-letter-btn:disabled {
-            background: #888 !important;
-            border-color: #666 !important;
-            opacity: 0.5 !important;
-            cursor: not-allowed !important;
-          }
-          .bw-free-letter-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 1rem;
-            padding: 1rem;
-            background: linear-gradient(135deg, rgba(29, 100, 200, 0.15), rgba(11, 42, 74, 0.15));
-            border-radius: 1rem;
-            border: 2px solid rgba(29, 100, 200, 0.3);
-            margin-bottom: 1rem;
-          }
-
-          .bw-free-letter-grid {
-            display: grid;
-            aspect-ratio: auto;
-            grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
-            gap: 0.5rem;
-            width: 100%;
-          max-width: 400px;    
-         z-index: 1000;
-            position: relative;
-          }
-          /* Apply bw-free-letter-btn styles to buttons inside bw-free-letter-grid */
-          .bw-free-letter-grid button,
-    .bw-free-letter-grid div[data-testid="stButton"] button {
-            min-width: 60px !important;
-        height: 60px !important;
-   font-size: 1.5rem !important;
-     font-weight: 700 !important;
-border-radius: 50% !important;
-            background: linear-gradient(135deg, #20d46c 0%, #1ca41c 100%) !important;
-       color: #ffffff !important;
-        border: 3px solid #1ca41c !important;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
-      transition: all 0.2s ease !important;
-    aspect-ratio: unset !important;
-          }
-          .bw-free-letter-grid button:hover,
-          .bw-free-letter-grid div[data-testid="stButton"] button:hover {
-            background: linear-gradient(135deg, #1ca41c 0%, #20d46c 100%) !important;
-          box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3) !important;
-    transform: translateY(-2px) !important;
-     }
-    .bw-free-letter-grid button:disabled,
-    .bw-free-letter-grid div[data-testid="stButton"] button:disabled {
-            background: #888 !important;
-            border-color: #666 !important;
-         opacity: 0.5 !important;
-            cursor: not-allowed !important;
-          }
-
-          .bw-free-letter-title {
-            font-size: 1.1rem;
-            font-weight: 700;
-            color: #ffffff;
-            text-align: center;
-            margin: 0;
-          }
-          .bw-free-letter-status {
-            font-size: 0.9rem;
-            color: #d7faff;
-            text-align: center;
-          }
-
-          /* Final score style */
-          .bw-final-score { color: #1ca41c !important; font-weight: 800; }
-          .stExpander {z-index: 10;width: 50%;}
-          div[data-testid="stToastContainer"], div[data-testid="stToast"] {
-            margin: 0 auto;
-          }
-
-          /* Make grid buttons square and fill their column */
-          div[data-testid="stButton"]{
-            margin: 0 auto;
-            text-align: center;
-          }
-          div[data-testid="stButton"] button { max-width: 100%; aspect-ratio: 16 / 11; border-radius: 0; background: #1d64c8; color: #ffffff; font-weight: 700; padding: 0.5rem 0.75rem; min-height: 2.5rem; min-width: 1.75rem;}
-          .st-key-new_game_btn, .st-key-sort_wordlist_btn, .st-key-filter_wordlist_btn { margin: 0 auto; aspect-ratio: unset; z-index:9999;}
-          .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_wordlist_btn > div[data-testid="stButton"] button, .st-key-filter_wordlist_btn > div[data-testid="stButton"] button { aspect-ratio: unset; text-align:center; height: auto;}
-
-          div[data-testid="column"], .st-emotion-cache-zh2fnc { width: auto !important; flex: 1 1 auto !important; min-width: 100% !important; max-width: 100% !important; }
-          .st-emotion-cache-1permvm, .st-emotion-cache-1n6tfoc { gap:0.25rem !important; min-height: 2.5rem; min-width: 2.5rem;}          
-
-          .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] { flex-wrap: nowrap !important; overflow-x: auto !important; margin: 2px 0 !important; }
-          .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] > div[data-testid="column"] { flex: 0 0 auto !important; }
-          .bw-grid-row-anchor { height: 0; margin: 0; padding: 0; }
-          .st-emotion-cache-1n6tfoc { background: linear-gradient(-45deg, #a1a1a1, #c0c0c0, #a1a1a1, #666666) !important; gap: 0.1rem !important; color: white; border-radius:15px; padding: 10px 10px 10px 10px; }
-          .st-emotion-cache-1n6tfoc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; margin: 5px;}
-          .st-key-guess_input, .st-key-guess_submit { flex-direction: row; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; }
-          .st-key-guess_input [id^="text_input"] {max-width: 80px;}
-          .st-emotion-cache-18kf3ut [class^="st-key-free_letter_"] [data-testid="stButton"] > button, button.st-emotion-cache-1ojn1jd {
-            aspect-ratio: auto !important;
-            position:relative;
-            z-index: 1200;
-            }
-          .username_input [id^="text_input"], .st-key-username_input [id^="text_input"] { color: #666;}
-          .st-emotion-cache-18kf3ut, .stColumn.st-emotion-cache-116javk {padding-bottom:3px;}
-
-          /* grid adjustments */
-          # @media (max-width: 705px){
-          #   .bw-cell {
-          #       min-height: 2.5rem;
-          #       min-width: 1.75rem;
-          #   }
-          # }
-          @media (min-width: 560px){
-           div[data-testid="stButton"] button { max-width: 100%; aspect-ratio: 16 / 11; min-height: 1.75rem; display: flex;}           
-           .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_wordlist_btn > div[data-testid="stButton"] button, .st-key-filter_wordlist_btn > div[data-testid="stButton"] button { min-height: calc(100% + 20px) !important;}
-           .st-emotion-cache-ckafi0 { gap:0.1rem !important; min-height: calc(100% + 20px) !important; aspect-ratio: 16 / 11; width: auto !important;  flex: 1 1 auto !important;  min-width: 100% !important;  max-width: 100% !important;}
-           /*.st-emotion-cache-1n6tfoc { aspect-ratio: 16 / 11; min-height: calc(100% + 20px) !important;}*/
-           .st-emotion-cache-1n6tfoc::before { min-height: calc(100% + 20px) !important; }
-           .st-emotion-cache-18kf3ut [class^="st-key-free_letter_"] [data-testid="stButton"] > button, button.st-emotion-cache-1ojn1jd {
-                aspect-ratio: auto !important;
-                position:relative;
-                z-index: 1200;
-              }
-          }
-
-          div[data-testid="stElementToolbarButtonContainer"], button[data-testid="stBaseButton-elementToolbar"], button[data-testid="stBaseButton-elementToolbar"]:hover {
-               display: none;
-          }
-          @media (max-width: 991px) and (min-width: 640px){
-              .st-emotion-cache-18kf3ut, .stColumn.st-emotion-cache-116javk {padding-bottom:0;}
-          }
-          /* Mobile styles */
-          @media (max-width: 640px) {
-            .bw-cell, div[data-testid="stButton"] button, .st-emotion-cache-1permvm {min-width: 1.5rem; min-height:60px;}
-            #bw-main-anchor + div[data-testid="stHorizontalBlock"] { flex-direction: column-reverse !important; width: 100% !important; max-width: 100vw !important; }
-            #bw-main-anchor + div[data-testid="stHorizontalBlock"] > div[data-testid="column"] { width: 100% !important; min-width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
-            .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] { flex-wrap: nowrap !important; overflow-x: auto !important; margin: 2px 0 !important; }
-            .st-emotion-cache-1tj828o { min-width: calc(8.33333% - 1rem); }
-            # .bw-free-letter-grid {
-            #   grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
-            # }            
-            .st-emotion-cache-1hxuzh3 {min-width: unset;}            
-          }
-
-          .bold-text { font-weight: 700; }
-          .blue-background { background:#1d64c8; opacity:0.9; }
-          .metal-border { position: relative; padding: 20px; background: #333; color: white; border: 4px solid; border-image: linear-gradient(45deg, #a1a1a1, #ffffff, #a1a1c1, #666666) 1; border-radius: 8px; }
-          .shiny-border { position: relative; padding: 12px; background: #333; color: white; border-radius: 1.25rem; overflow: hidden; }
-          .shiny-border::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.5s; }
-          .bw-score-panel-container { height: 100%; overflow: hidden; text-align:center;}
-          .bw-score-panel-container table tbody tr h3 {display: flex;flex-direction: row;justify-content: space-evenly;flex-wrap: wrap;}
-          .shiny-border:hover::before { left: 100%; }
-
-          .bw-radio-group { display:flex; align-items:flex-start; gap: 10px; flex-flow: row; }
-          .bw-radio-item { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
-          .bw-radio-circle { width: 45px; height: 45px; border-radius: 50%; border: 4px solid; background: rgba(255,255,255,0.06); display: grid; place-items: center; color:#fff; font-weight:700; }
-          .bw-radio-circle .dot { width: 14px; height: 14px; border-radius: 50%; background:#777; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); }
-          .bw-radio-circle.active.hit { background: linear-gradient(135deg, rgba(0,255,127,0.18), rgba(0,128,64,0.38)); }
-          .bw-radio-circle.active.hit .dot { background:#20d46c; box-shadow: 0 0 10px rgba(32,212,108,0.85); }
-          .bw-radio-circle.active.miss { background: linear-gradient(135deg, rgba(255,0,0,0.18), rgba(128,0,0,0.38)); }
-          .bw-radio-circle.active.miss .dot { background:#ff4b4b; box-shadow: 0 0 10px rgba(255,75,75,0.85); }
-          .bw-radio-caption { font-size: 0.8rem; color:#fff; opacity:0.85; letter-spacing:0.5px; }
-          @media (max-width:1000px) and (min-width: 641px) {
-            .bw-radio-group { flex-wrap:wrap; gap: 5px; margin-bottom: 5px;}
-            .bw-radio-item {margin: 0 auto;}
-          }
-          @media (max-width:640px) {
-            .bw-radio-item { margin:unset;}
-          }
-
-          /* Make the sidebar scrollable */
-          section[data-testid="stSidebar"] {
-              display: none;
-          }
-
-         .st-emotion-cache-wp60of {
-             width: 720px;
-             position: absolute;     
-             max-width:100%;
-          }
-         .stImage {max-width:300px;}
-         [id^="text_input"], .st-bb [id^="text_input"] {
-          background-color:#fff;
-          color:#000;
-          caret-color:#333;}
-        
-         @media (min-width:720px) {         
-          .st-emotion-cache-wp60of {
-            left: calc(calc(100% - 720px) / 2);
-          }
-         }
-
-          /* Helper to absolutely/fixed position Streamlit component wrapper when showing modal */
-          .bw-component-abs { position: fixed !important; inset: 0 !important; z-index: 99999 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; }
-          /* Generic hide utility */
-          .hide { display: none !important; pointer-events: none !important; }
-        </style>
-        """,
-        unsafe_allow_html=True,
-    )
 
 def _init_session() -> None:
     if "initialized" in st.session_state and st.session_state.initialized:
         return
 
     # --- Load most recent settings from settings/settings.json ---
+
     latest_settings = load_latest_settings()
+
     if latest_settings:
         # Apply all keys from settings file into session_state before any defaults
         for key, value in latest_settings.items():
@@ -754,6 +224,7 @@ def _init_session() -> None:
     # --- Add enable sound effects ---
     if "enable_sound_effects" not in st.session_state:
         st.session_state.enable_sound_effects = False
+   
 
 def _new_game() -> None:
     """
@@ -1127,7 +598,7 @@ def _render_grid(state: GameState, letter_map, show_grid_ticks: bool = True):
         """
         <style>
         div[data-testid="column"] {
-            padding: 0 !important;
+            padding: 0 !important;            
         }
         button[data-testid="stButton"] {
             width: 60px !important;
@@ -1628,6 +1099,26 @@ def _render_score_panel(state: GameState):
     components.html(html_doc, height=height, scrolling=False)
 
 def _game_over_content(state: GameState) -> None:
+    """
+    Handle game over UI and logic. Collect all current game settings at the top.
+    """
+    # --- Collect all current game settings (must match settings/settings.json) ---
+    current_settings = {
+        "game_mode": st.session_state.get("game_mode", "classic"),
+        "selected_wordlist": st.session_state.get("selected_wordlist", "classic.txt"),
+        "spacer": st.session_state.get("spacer", 1),
+        "may_overlap": st.session_state.get("may_overlap", False),
+        "show_incorrect_guesses": st.session_state.get("show_incorrect_guesses", True),
+        "enable_free_letters": st.session_state.get("enable_free_letters", False),                            
+        "show_grid_ticks": st.session_state.get("show_grid_ticks", False),
+        "show_challenge_share_links": st.session_state.get("show_challenge_share_links", True),
+        "enable_sound_effects": st.session_state.get("enable_sound_effects", False),
+        "music_enabled": st.session_state.get("music_enabled", False),
+        "music_volume": st.session_state.get("music_volume", 15),
+        "effects_volume": st.session_state.get("effects_volume", 25),
+        "game_title": st.session_state.get("game_title", None),
+    }
+
     # Play congratulations music (not sound effect) as background if enabled
     music_dir = _get_music_dir()
     congrats_music_path = os.path.join(music_dir, "congratulations.mp3")
@@ -1703,7 +1194,7 @@ def _game_over_content(state: GameState) -> None:
             box-shadow: 0 0 32px #1d64c8;
             background: linear-gradient(-45deg, #1d64c8, #ffffff, #1d64c8, #666666);
             color: #fff;
-            padding: 16px;
+            padding: 6px;
           }
           .bw-dialog-header { display:flex; justify-content: space-between; align-items: center; }
           .bw-dialog-title, .st-emotion-cache-11elpad p { margin: 0; font-weight: bold;font-size: 1.5rem;text-align: center;flex: auto;filter:drop-shadow(1px 1px 2px #003);} 
@@ -1728,7 +1219,10 @@ def _game_over_content(state: GameState) -> None:
            }
            .st-bb {background-color: rgba(29, 100, 200, 0.5);} 
            .st-key-generate_share_link div[data-testid="stButton"] button, .st-key-submit_leaderboard_only div[data-testid="stButton"] button { aspect-ratio: auto;} 
-           .st-key-generate_share_link div[data-testid="stButton"] button:hover { color: #1d64c8;}
+           .st-key-generate_share_link div[data-testid="stButton"] button:hover, .st-key-submit_leaderboard_only div[data-testid="stButton"] button:hover {background-color: rgb(61, 157, 243);}
+           .st-key-generate_share_link div[data-testid="stButton"] button:active, .st-key-submit_leaderboard_only div[data-testid="stButton"] button:active {background-color: rgb(61, 157, 243);}
+            .st-key-generate_share_link div[data-testid="stButton"] button:focus-visible, .st-key-submit_leaderboard_only div[data-testid="stButton"] button:focus-visible {background-color: rgb(61, 157, 243);}
+           .st-key-generate_share_link div[data-testid="stButton"] button:hover { color: rgb(61, 157, 243);}
         </style>
         """,
         unsafe_allow_html=True,
@@ -1787,7 +1281,7 @@ def _game_over_content(state: GameState) -> None:
                 box-shadow: 0 0 32px #1d64c8;
                 background: linear-gradient(-45deg, #1d64c8, #ffffff, #1d64c8, #666666);
                 color: #fff;
-                padding: 16px;
+                padding: 6px;
               }
               /* Improve inner text contrast inside the styled block */
               div[data-testid="stVerticalBlock"]:has(#bw-share-anchor) h3,
@@ -1811,7 +1305,7 @@ def _game_over_content(state: GameState) -> None:
             unsafe_allow_html=True,
         )
 
-        st.markdown("### 🎮 Enter Name to submit to leaderboard")
+        st.markdown("## 🎮 Join Leaderboard?")
 
         # Check if this is a shared game being completed
         is_shared_game = st.session_state.get("loaded_game_sid") is not None
@@ -1822,16 +1316,19 @@ def _game_over_content(state: GameState) -> None:
             st.session_state["player_username"] = ""
 
         username = st.text_input(
-            "Enter your name (required)",
+            "Enter Username (required)",
             value=st.session_state.get("player_username", ""),
             key="username_input",
-            placeholder="Your Name"
+            placeholder="Username (Enter/Return/Tab to continue)"
         )
         if username:
             st.session_state["player_username"] = username
         
         can_submit = bool(username and username.strip())
 
+        # Track which button was pressed to hide the other
+        btn_flag = st.session_state.get("gameover_button_pressed", None)
+
         # Helper function to submit to leaderboards
         def _submit_to_leaderboards(username: str, score: int, time_secs: int, word_list: list, challenge_id: str = None):
             """Submit score to daily and weekly leaderboards (with fallback verification).
@@ -1850,158 +1347,159 @@ def _game_over_content(state: GameState) -> None:
                     "may_overlap": getattr(state.puzzle, "may_overlap", False)
                 }
             )
-
             # Primary submission (attempt both daily and weekly)
-            try:
-                results = submit_score_to_all_leaderboards(
-                    username=username,
-                    score=score,
-                    time_seconds=time_secs,
-                    word_list=word_list,
-                    settings=settings,
-                    word_list_difficulty=difficulty_value,
-                    source_challenge_id=challenge_id,
-                )
-            except Exception:
-                # If the unified submit fails, try a best-effort weekly submit below
-                results = {"daily": {"qualified": False, "rank": None, "id": None}, "weekly": {"qualified": False, "rank": None, "id": None}}
-
-                # Check weekly result and attempt a fallback single-weekly submission if missing
-                weekly_info = results.get("weekly") or {}
-                if weekly_info.get("id") is None or (weekly_info.get("qualified") is False and weekly_info.get("rank") is None):
-                    try:
-                        weekly_id = get_current_weekly_id()
-                        # Build a lightweight UserEntry via submit_to_leaderboard (it returns (success, rank))
-                        submit_to_leaderboard(
-                            "weekly",
-                            weekly_id,
-                            None,  # user_entry will be constructed inside submit_to_leaderboard if used directly; instead construct minimal entry below
-                            settings,
-                        )
-                    except Exception:
-                        # swallow fallback errors - main attempt already logged by leaderboard module
-                        pass        
-
+            with st.spinner("Submitting to leaderboards..."):
+                try:
+                    results = submit_score_to_all_leaderboards(
+                        username=username,
+                        score=score,
+                        time_seconds=time_secs,
+                        word_list=word_list,
+                        settings=settings,
+                        word_list_difficulty=difficulty_value,
+                        source_challenge_id=challenge_id,
+                    )
+                except Exception:
+                    # If the unified submit fails, try a best-effort weekly submit below
+                    results = {"daily": {"qualified": False, "rank": None, "id": None}, "weekly": {"qualified": False, "rank": None, "id": None}}
+
+                    # Check weekly result and attempt a fallback single-weekly submission if missing
+                    weekly_info = results.get("weekly") or {}
+                    if weekly_info.get("id") is None or (weekly_info.get("qualified") is False and weekly_info.get("rank") is None):
+                        try:
+                            weekly_id = get_current_weekly_id()
+                            # Build a lightweight UserEntry via submit_to_leaderboard (it returns (success, rank))
+                            submit_to_leaderboard(
+                                "weekly",
+                                weekly_id,
+                                None,  # user_entry will be constructed inside submit_to_leaderboard if used directly; instead construct minimal entry below
+                                settings,
+                            )
+                        except Exception:
+                            # swallow fallback errors - main attempt already logged by leaderboard module
+                            pass
             return results
             
 
         # Check if share URL already generated
         if "share_url" not in st.session_state or st.session_state.get("share_url") is None:
-
             
             # Show separate "Submit to Leaderboard" button when NOT in a challenge
             if not is_shared_game and not st.session_state.get("leaderboard_submitted", False):
-                
-                #st.markdown("##### 🏆 Or just submit to leaderboards")
-                if st.button("🏆 Submit to Leaderboards", key="submit_leaderboard_only", width="stretch", disabled=not can_submit):
-                    try:
-                        word_list = [w.text for w in state.puzzle.words]
-                        lb_results = _submit_to_leaderboards(
-                            username, state.score, elapsed_seconds, word_list
-                        )
-                        st.session_state["leaderboard_submitted"] = True
-                        st.session_state["leaderboard_results"] = lb_results
-                        
-                        # Show results
-                        daily_info = lb_results.get("daily", {})
-                        weekly_info = lb_results.get("weekly", {})
-                        
-                        if daily_info.get("qualified") or weekly_info.get("qualified"):
-                            msg_parts = []
-                            if daily_info.get("qualified"):
-                                msg_parts.append(f"Daily #{daily_info['rank']}")
-                            if weekly_info.get("qualified"):
-                                msg_parts.append(f"Weekly #{weekly_info['rank']}")
-                            st.success(f"✅ Submitted! Ranked: {', '.join(msg_parts)}")
-                        else:
-                            st.info("✅ Score submitted (not in top 20)")
-                        st.rerun()
-                    except Exception as e:
-                        st.error(f"Failed to submit to leaderboards: {e}")
-
+                if btn_flag != "generate_share_link":
+                    if st.button("🏆 Submit to Leaderboards", key="submit_leaderboard_only", width="stretch", disabled=not can_submit):
+                        st.session_state["gameover_button_pressed"] = "submit_leaderboard_only"
+                        try:
+                            word_list = [w.text for w in state.puzzle.words]
+                            lb_results = _submit_to_leaderboards(
+                                username, state.score, elapsed_seconds, word_list
+                            )
+                            st.session_state["leaderboard_submitted"] = True
+                            st.session_state["leaderboard_results"] = lb_results
+                            
+                            # Show results
+                            daily_info = lb_results.get("daily", {})
+                            weekly_info = lb_results.get("weekly", {})
+                            
+                            if daily_info.get("qualified") or weekly_info.get("qualified"):
+                                msg_parts = []
+                                if daily_info.get("qualified"):
+                                    msg_parts.append(f"Daily #{daily_info['rank']}")
+                                if weekly_info.get("qualified"):
+                                    msg_parts.append(f"Weekly #{weekly_info['rank']}")
+                                st.success(f"✅ Submitted! Ranked: {', '.join(msg_parts)}")
+                            else:
+                                st.info("✅ Score submitted (not in top 20)")
+                            st.rerun()
+                        except Exception as e:
+                            st.error(f"Failed to submit to leaderboards: {e}")
 
             button_text = "📊 Submit Your Result" if is_shared_game else "🔗 Generate Share Link"
 
-            if not can_submit:
-                st.warning("⚠️ Please enter your name to submit.")
-
-            if st.button(button_text, key="generate_share_link", width="stretch", disabled=not can_submit):
-                try:
-                    st.markdown("---")
-                    # Extract game data
-                    word_list = [w.text for w in state.puzzle.words]
-                    spacer = state.puzzle.spacer
-                    may_overlap = state.puzzle.may_overlap
-                    wordlist_source = st.session_state.get("selected_wordlist", "classic.txt")
-
-                    if is_shared_game and existing_sid:
-                        # Add result to existing game
-                        success = add_user_result_to_game(
-                            sid=existing_sid,
-                            username=username,
-                            word_list=word_list,  # Each user gets different words
-                            score=state.score,
-                            time_seconds=elapsed_seconds
-                        )
-
-                        if success:
-                            share_url = get_shareable_url(existing_sid)
-                            st.session_state["share_url"] = share_url
-                            st.session_state["share_sid"] = existing_sid
-                            st.session_state["show_challenge_share_links"] = True
-                            
-                            # Also submit to daily/weekly leaderboards
-                            try:
-                                lb_results = _submit_to_leaderboards(
-                                    username, state.score, elapsed_seconds, word_list, existing_sid
+            if btn_flag != "submit_leaderboard_only":
+                if st.button(button_text, key="generate_share_link", width="stretch", disabled=not can_submit):
+                    with st.spinner("Saving result..."):
+                        try:
+                            st.session_state["gameover_button_pressed"] = "generate_share_link"
+                            st.markdown("---")
+                            # Extract game data
+                            word_list = [w.text for w in state.puzzle.words]
+                            spacer = state.puzzle.spacer
+                            may_overlap = state.puzzle.may_overlap
+                            wordlist_source = st.session_state.get("selected_wordlist", "classic.txt")
+
+                            if is_shared_game and existing_sid:
+                                # Add result to existing game
+                                success = add_user_result_to_game(
+                                    sid=existing_sid,
+                                    username=username,
+                                    word_list=word_list,  # Each user gets different words
+                                    score=state.score,
+                                    time_seconds=elapsed_seconds
                                 )
-                                st.session_state["leaderboard_submitted"] = True
-                                st.session_state["leaderboard_results"] = lb_results
-                            except Exception as lb_err:
-                                st.warning(f"Challenge submitted but leaderboard update failed: {lb_err}")
-                            
-                            st.success(f"✅ Result submitted for {username}!")
-                            st.rerun()
-                        else:
-                            st.error("Failed to submit result")
-                    else:
-                        # Create new game
-                        # Note: save_game_to_hf still uses grid_size for backward compatibility
-                        # For Wrdler 8x6 grid, we pass 6 (number of rows/words)
-                        challenge_id, full_url, sid = save_game_to_hf(
-                            word_list=word_list,
-                            username=username,
-                            score=state.score,
-                            time_seconds=elapsed_seconds,
-                            game_mode=state.game_mode,
-                            grid_size=6,  # Wrdler: 6 rows (8 columns)
-                            spacer=spacer,
-                            may_overlap=may_overlap,
-                            wordlist_source=wordlist_source
-                        )
 
-                        if sid:
-                            share_url = get_shareable_url(sid)
-                            st.session_state["share_url"] = share_url
-                            st.session_state["share_sid"] = sid
-                            st.session_state["show_challenge_share_links"] = True
-                            
-                            # Also submit to daily/weekly leaderboards
-                            try:
-                                lb_results = _submit_to_leaderboards(
-                                    username, state.score, elapsed_seconds, word_list, sid
+                                if success:
+                                    share_url = get_shareable_url(existing_sid)
+                                    st.session_state["share_url"] = share_url
+                                    st.session_state["share_sid"] = existing_sid
+                                    st.session_state["show_challenge_share_links"] = True
+
+                                    # Also submit to daily/weekly leaderboards
+                                    try:
+                                            lb_results = _submit_to_leaderboards(
+                                                username, state.score, elapsed_seconds, word_list, existing_sid
+                                            )
+                                            st.session_state["leaderboard_submitted"] = True
+                                            st.session_state["leaderboard_results"] = lb_results
+                                    except Exception as lb_err:
+                                            st.warning(f"Challenge submitted but leaderboard update failed: {lb_err}")
+
+
+                                    st.success(f"✅ Result submitted for {username}!")
+                                    st.rerun()
+                                else:
+                                        st.error("Failed to submit result")
+                            else:
+                                # Create new game
+                                # Note: save_game_to_hf still uses grid_size for backward compatibility
+                                # For Wrdler 8x6 grid, we pass 6 (number of rows/words)
+                                challenge_id, full_url, sid = save_game_to_hf(
+                                    word_list=word_list,
+                                    username=username,
+                                    score=state.score,
+                                    time_seconds=elapsed_seconds,
+                                    game_mode=current_settings["game_mode"],
+                                    grid_size=6,  # Wrdler: 6 rows (8 columns)
+                                    spacer=current_settings["spacer"],
+                                    may_overlap=current_settings["may_overlap"],
+                                    wordlist_source=current_settings["selected_wordlist"],
+                                    game_title=current_settings["game_title"],
+                                    show_incorrect_guesses=current_settings["show_incorrect_guesses"],
+                                    enable_free_letters=current_settings["enable_free_letters"]
                                 )
-                                st.session_state["leaderboard_submitted"] = True
-                                st.session_state["leaderboard_results"] = lb_results
-                            except Exception as lb_err:
-                                st.warning(f"Challenge created but leaderboard update failed: {lb_err}")
-                            
-                            st.rerun()
-                        else:
-                            st.error("Failed to generate short URL")
 
-                except Exception as e:
-                    st.error(f"Failed to save game: {e}")
+                                if sid:
+                                    share_url = get_shareable_url(sid)
+                                    st.session_state["share_url"] = share_url
+                                    st.session_state["share_sid"] = sid
+                                    st.session_state["show_challenge_share_links"] = True
+
+                                    # Also submit to daily/weekly leaderboards
+                                    try:
+                                            lb_results = _submit_to_leaderboards(
+                                                username, state.score, elapsed_seconds, word_list, sid
+                                            )
+                                            st.session_state["leaderboard_submitted"] = True
+                                            st.session_state["leaderboard_results"] = lb_results
+                                    except Exception as lb_err:
+                                            st.warning(f"Challenge created but leaderboard update failed: {lb_err}")
+
+                                    st.rerun()
+                                else:
+                                    st.error("Failed to generate short URL")
+
+                        except Exception as e:
+                            st.error(f"Failed to save game: {e}")
         else:
             # Conditionally display the generated share URL
             if st.session_state.get("show_challenge_share_links", False):
@@ -2187,112 +1685,20 @@ def _on_game_option_change() -> None:
     # Start a fresh game with updated options
     _new_game()
 
-def _render_footer(current_page: str = "play"):
-    """Render footer with navigation links to leaderboards and main game.
-    
-    Args:
-        current_page: Which page is currently active ("play", "today", "daily", "weekly", "history", "settings")
-    """
-    # Determine which link should be highlighted as active
-    play_active = "active" if current_page == "play" else ""
-    leaderboard_active = "active" if current_page in {"today", "daily", "weekly", "history"} else ""
-    settings_active = "active" if current_page == "settings" else ""
-    
-    # Check if we're in challenge mode and need to preserve game_id
-    game_id = None
-    try:
-        params = st.query_params
-        if "game_id" in params:
-            game_id = params.get("game_id")
-    except Exception:
-        pass
-    
-    # Also check session state for loaded challenge
-    if not game_id and st.session_state.get("loaded_game_sid"):
-        game_id = st.session_state.get("loaded_game_sid")
-    
-    # Build URLs with game_id if in challenge mode
-    if game_id:
-        today_url = f"?page=today&game_id={game_id}"
-        leaderboard_url = f"?page=today&game_id={game_id}"
-        play_url = f"?game_id={game_id}"
-        settings_url = f"?page=settings&game_id={game_id}"
-    else:
-        today_url = "?page=today"
-        leaderboard_url = "?page=today"
-        play_url = "/"
-        settings_url = "?page=settings"
-    
-    st.markdown(
-        f"""
-        <style>
-        .bw-footer {{
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: linear-gradient(180deg, transparent 0%, rgba(11, 42, 74, 0.95) 30%, rgba(11, 42, 74, 0.98) 100%);
-            padding: 0.75rem 1rem 0.5rem;
-            z-index: 9998;
-            text-align: center;
-        }}
-        .bw-footer-nav {{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 1rem;
-            flex-wrap: wrap;
-        }}
-        .bw-footer-nav a {{
-            color: #d7faff;
-            text-decoration: none;
-            font-weight: 600;
-            font-size: 0.85rem;
-            padding: 0.4rem 0.8rem;
-            border-radius: 0.5rem;
-            background: rgba(29, 100, 200, 0.3);
-            border: 1px solid rgba(215, 250, 255, 0.3);
-            transition: all 0.2s ease;
-        }}
-        .bw-footer-nav a:hover {{
-            background: rgba(29, 100, 200, 0.6);
-            border-color: rgba(215, 250, 255, 0.6);
-            color: #ffffff;
-            text-decoration: none;
-        }}
-        .bw-footer-nav a.active {{
-            background: rgba(32, 212, 108, 0.3);
-            border-color: rgba(32, 212, 108, 0.5);
-        }}
-        /* Add padding to main content to prevent footer overlap */
-        .stMainBlockContainer {{
-            padding-bottom: 70px !important;
-        }}
-        @media (max-width: 640px) {{
-            .bw-footer-nav {{
-                gap: 0.5rem;
-            }}
-            .bw-footer-nav a {{
-                font-size: 0.75rem;
-                padding: 0.35rem 0.6rem;
-            }}
-        }}
-        </style>
-    <div class="bw-footer">
-        <nav class="bw-footer-nav">
-            <a href="{leaderboard_url if not leaderboard_active else '#'}" title="View Leaderboards" target="_self" class="{leaderboard_active}">🏆 Leaderboard</a>
-            <a href="{play_url if not play_active else '#'}" title="Play Wrdler" target="_self" class="{play_active}">🎮 Play</a>
-            <a href="{settings_url if not settings_active else '#'}" title="Settings" target="_self" class="{settings_active}">⚙️ Settings</a>
-        </nav>
-    </div>
-        """,
-        unsafe_allow_html=True,
-    )
-
 def run_app():
     # Render PWA service worker registration (meta tags in <head> via Docker)
     st.markdown(pwa_service_worker, unsafe_allow_html=True)
 
+    # --- Game Init/Load Spinner (Two-phase approach) ---
+
+    # Show spinner during new game creation
+    if st.session_state.get("needs_new_game", False):
+        spinner_placeholder = st.empty()
+        with CustomSpinner(spinner_placeholder, "Creating new game..."):
+            st.session_state.needs_new_game = False
+        st.rerun()
+        return
+
     # Handle query params using new API
     try:
         params = st.query_params
@@ -2316,56 +1722,83 @@ def run_app():
     page = params.get("page", "")
     
     if page == "settings":
-        st.markdown(ocean_background_css, unsafe_allow_html=True)
-        inject_ocean_layers()
-        render_settings_page(_on_game_option_change)
-        _render_footer(current_page="settings")
+        spinner_placeholder = st.empty()
+        with CustomSpinner(spinner_placeholder, "Loading Settings..."):
+            st.markdown(ocean_background_css, unsafe_allow_html=True)
+            inject_ocean_layers()
+            render_settings_page(_on_game_option_change)
+            _render_footer(current_page="settings")
         return
 
     if page in {"today", "daily", "weekly", "history"}:
         from .leaderboard_page import render_leaderboard_page
-        st.markdown(ocean_background_css, unsafe_allow_html=True)
-        inject_ocean_layers()
-        default = page if page in {"daily", "weekly", "history"} else "today"
-        render_leaderboard_page(default_tab=default)
-        _render_footer(current_page=page if page else "play")
+        spinner_placeholder = st.empty()
+        with CustomSpinner(spinner_placeholder, "Loading Leaderboard..."):
+            st.markdown(ocean_background_css, unsafe_allow_html=True)
+            inject_ocean_layers()
+            default = page if page in {"daily", "weekly", "history"} else "today"
+            render_leaderboard_page(default_tab=default)
+            _render_footer(current_page=page if page else "play")
         return
 
     # Handle game_id for loading shared games
     if "game_id" in params and "shared_game_loaded" not in st.session_state:
         sid = params.get("game_id")
-        try:
-            settings = load_game_from_sid(sid)
-            if settings:
-                # Store loaded settings and sid for initialization
-                st.session_state["shared_game_settings"] = settings
-                st.session_state["loaded_game_sid"] = sid  # Store sid for adding results later
-                st.session_state["shared_game_loaded"] = True
-
-                # Apply challenge-specific settings (show_incorrect_guesses, enable_free_letters, game_title)
-                _apply_challenge_settings(settings)
-
-                # Get best score and time from users array
-                users = settings.get("users", [])
-                if users:
-                    best_score = max(u["score"] for u in users)
-                    best_time = min(u["time"] for u in users)
-                    st.toast(
-                        f"🎯 Loading shared challenge (Best: {best_score} pts in {best_time}s by {len(users)} player(s))",
-                        icon="ℹ️"
-                    )
+        spinner_placeholder = st.empty()
+        with CustomSpinner(spinner_placeholder, "Loading challenge..."):
+            try:
+                settings = load_game_from_sid(sid)
+                if settings:
+                    # Store loaded settings and sid for initialization
+                    st.session_state["shared_game_settings"] = settings
+                    st.session_state["loaded_game_sid"] = sid  # Store sid for adding results later
+                    st.session_state["shared_game_loaded"] = True
+
+                    # Apply challenge-specific settings (show_incorrect_guesses, enable_free_letters, game_title)
+                    _apply_challenge_settings(settings)
+
+                    # Get best score and time from users array
+                    users = settings.get("users", [])
+                    if users:
+                        best_score = max(u["score"] for u in users)
+                        best_time = min(u["time"] for u in users)
+                        st.toast(
+                            f"🎯 Loading shared challenge (Best: {best_score} pts in {best_time}s by {len(users)} player(s))",
+                            icon="🎯"
+                        )
+                    else:
+                        st.toast("🎯 Loading shared challenge", icon="🎯")
                 else:
-                    st.toast("🎯 Loading shared challenge", icon="℉")
-            else:
-                st.warning(f"No shared game found for ID: {sid}. Starting a normal game.")
-                st.session_state["shared_game_loaded"] = True  # Prevent repeated attempts
-        except Exception as e:
-            st.error(f"❌ Error loading shared game: {e}")
-            st.session_state["shared_game_loaded"] = True  # Prevent repeated attempts        
+                    st.warning(f"No shared game found for ID: {sid}. Starting a normal game.")
+                    st.session_state["shared_game_loaded"] = True  # Prevent repeated attempts
+            except Exception as e:
+                st.error(f"❌ Error loading shared game: {e}")
+                st.session_state["shared_game_loaded"] = True  # Prevent repeated attempts    
+
+    # Show spinner during game initialization
+    if st.session_state.get("needs_initialization", True):
+        spinner_placeholder = st.empty()
+        with CustomSpinner(spinner_placeholder, "Initializing Game..."):
+            st.session_state.needs_initialization = False
+            _render_game_tab()
+            st.rerun()
+        return
+    else:
+        _render_game_tab()        
 
+    # End condition (only show overlay if dismissed)
+    state = _to_state()
+    if is_game_over(state) and not st.session_state.get("hide_gameover_overlay", False):
+        _render_game_over(state)
+    _render_footer(current_page="play")
+
+def _render_game_tab():
+    """
+        Render the main game tab layout.
+    """
     _init_session()
     st.markdown(ocean_background_css, unsafe_allow_html=True)
-    inject_ocean_layers()  # <-- add the animated layers
+    inject_ocean_layers  # <-- add the animated layers
     _render_header()
 
     state = _to_state()
@@ -2387,15 +1820,9 @@ def run_app():
         # New Game button moved above grid to prevent unnecessary rerenders on grid clicks
         # Using on_click callback ensures _new_game runs before widgets are instantiated
         st.button("New Game", width=125, on_click=_new_game, key="new_game_btn")
-        
+    
         # Show free letter selection if enabled and not complete
         if st.session_state.get("enable_free_letters", False) and state.free_letters_used < 2:
             _render_free_letters(state)
-        
-        _render_grid(state, st.session_state.letter_map, show_grid_ticks=st.session_state.get("show_grid_ticks", True))
-
-    # End condition (only show overlay if dismissed)
-    state = _to_state()
-    if is_game_over(state) and not st.session_state.get("hide_gameover_overlay", False):
-        _render_game_over(state)
-    _render_footer(current_page="play")
+    
+        _render_grid(state, st.session_state.letter_map, show_grid_ticks=st.session_state.get("show_grid_ticks", True))

wrdler/ui_helpers.py

@@ -0,0 +1,678 @@
+import streamlit as st
+import numpy as np
+from PIL import Image
+from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
+from . import __version__ as version
+from .modules.constants import APP_SETTINGS
+import base64
+import os
+
+# --- Utility: Convert Matplotlib Figure to PIL RGBA Image ---
+def fig_to_pil_rgba(fig):
+    canvas = FigureCanvas(fig)
+    canvas.draw()
+    w, h = fig.canvas.get_width_height()
+    img = np.frombuffer(canvas.buffer_rgba(), dtype=np.uint8).reshape(h, w, 4)
+    return Image.fromarray(img, mode="RGBA")
+
+def _get_effective_game_title() -> str:
+    """
+    Get the effective game title, prioritizing:
+    1. Challenge-specific game_title from shared_game_settings
+    2. Session state game_title (if set)
+    3. APP_SETTINGS default
+    4. Fallback to "Wrdler"
+    """
+    # First check shared game settings (challenge mode)
+    shared_settings = st.session_state.get("shared_game_settings")
+    if shared_settings and shared_settings.get("game_title"):
+        return shared_settings["game_title"]
+    
+    # Then check session state
+    if st.session_state.get("game_title"):
+        return st.session_state["game_title"]
+    
+    # Fall back to APP_SETTINGS
+    return APP_SETTINGS.get("game_title", "Wrdler")
+
+
+# --- PWA Service Worker JS (for Streamlit head injection) ---
+pwa_service_worker = """
+<script>
+// Register service worker for offline functionality
+// Note: Using inline Blob URL to bypass Streamlit's text/plain content-type for .js files
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    // Service worker code as string (inline to avoid MIME type issues)
+    const swCode = `
+const CACHE_NAME = 'wrdler-v0.0.1';
+const RUNTIME_CACHE = 'wrdler-runtime';
+
+const PRECACHE_URLS = [
+  '/',
+  '/app/static/manifest.json',
+  '/app/static/icon-192.png',
+  '/app/static/icon-512.png'
+];
+
+self.addEventListener('install', event => {
+  console.log('[ServiceWorker] Installing...');
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('[ServiceWorker] Precaching app shell');
+        return cache.addAll(PRECACHE_URLS);
+      })
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener('activate', event => {
+  console.log('[ServiceWorker] Activating...');
+  event.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          if (cacheName !== CACHE_NAME && cacheName !== RUNTIME_CACHE) {
+            console.log('[ServiceWorker] Deleting old cache:', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    }).then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener('fetch', event => {
+  if (event.request.method !== 'GET') return;
+  if (!event.request.url.startsWith('http')) return;
+
+  event.respondWith(
+    caches.open(RUNTIME_CACHE).then(cache => {
+      return fetch(event.request)
+        .then(response => {
+          if (response.status === 200) {
+            cache.put(event.request, response.clone());
+          }
+          return response;
+        })
+        .catch(() => {
+          return caches.match(event.request).then(cachedResponse => {
+            if (cachedResponse) {
+              console.log('[ServiceWorker] Serving from cache:', event.request.url);
+              return cachedResponse;
+            }
+            return new Response('Offline - Please check your connection', {
+              status: 503,
+              statusText: 'Service Unavailable',
+              headers: new Headers({'Content-Type': 'text/plain'})
+            });
+          });
+        });
+    })
+  );
+});
+
+self.addEventListener('message', event => {
+  if (event.data.action === 'skipWaiting') {
+    self.skipWaiting();
+  }
+});
+`;
+
+    // Create Blob URL for service worker
+    const blob = new Blob([swCode], { type: 'application/javascript' });
+    const swUrl = URL.createObjectURL(blob);
+
+    navigator.serviceWorker.register(swUrl)
+      .then(registration => {
+        console.log('[PWA] Service Worker registered successfully:', registration.scope);
+
+        registration.addEventListener('updatefound', () => {
+          const newWorker = registration.installing;
+          newWorker.addEventListener('statechange', () => {
+            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+              console.log('[PWA] New version available! Refresh to update.');
+            }
+          });
+        });
+      })
+      .catch(error => {
+        console.log('[PWA] Service Worker registration failed:', error);
+      });
+  });
+}
+
+// Prompt user to install PWA (for browsers that support it)
+let deferredPrompt;
+window.addEventListener('beforeinstallprompt', (e) => {
+  console.log('[PWA] Install prompt available');
+  e.preventDefault();
+  deferredPrompt = e;
+  // Could show custom install button here if desired
+});
+
+// Track when user installs the app
+window.addEventListener('appinstalled', () => {
+  console.log('[PWA] Wrdler installed successfully!');
+  deferredPrompt = null;
+});
+</script>
+"""
+
+# --- Ocean Background CSS ---
+ocean_background_css = """
+<style>
+:root {
+  --water-deep: #0b2a4a;
+  --water-mid:  #0f3968;
+  --water-lite: #165ba8;
+  --water-sky:  #1d64c8;
+  --foam:       rgba(255,255,255,0.18);
+}
+.stAppHeader{ opacity:0.6; }
+.stApp {
+  margin: 0;
+  min-height: 100vh;
+  overflow: hidden;
+  background-attachment: scroll;
+  position: relative;
+  background-image:
+    linear-gradient(180deg, var(--water-sky) 0%, var(--water-lite) 35%, var(--water-mid) 70%, var(--water-deep) 100%);
+  background-size: 100% 100%;
+  background-position: 50% 50%;
+  animation: none !important;
+  will-change: background-position;
+}
+.stApp::before {
+  content: "";
+  position: absolute;
+  inset: -10% -10%;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 22px),
+    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 18px);
+  mix-blend-mode: screen;
+  opacity: 0.10;
+}
+</style>
+"""
+
+# --- Ocean Layers Injection ---
+def inject_ocean_layers() -> None:
+    st.markdown(
+        """
+        <style>
+          .bw-bg-container {
+            position: fixed;
+            inset: 0;
+            z-index: 1;
+            pointer-events: none;
+            overflow: hidden;
+          }
+          .bw-bg-layer {
+            position: absolute;
+            inset: 0;
+            width: 100vw;
+            height: 100vh;
+            pointer-events: none;
+          }
+          .bw-bg-highlight {
+            z-index: 11;
+            background: radial-gradient(150% 100% at 50% -20%, rgba(255,255,255,0.10) 0%, transparent 60%);
+            background-size: 150% 150%;
+          }
+          .bw-bg-long {
+            z-index: 12;
+            background: repeating-linear-gradient(-6deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 18px, rgba(0,0,0,0.04) 18px, rgba(0,0,0,0.04) 48px);
+            background-size: 150% 150%;
+            opacity: 0.2;
+          }
+          .bw-bg-mid {
+            z-index: 13;
+            background: repeating-linear-gradient(-12deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 26px);
+            background-size: 150% 150%;
+            opacity: 0.2;
+          }
+          .bw-bg-fine {
+            z-index: 14;
+            background: repeating-linear-gradient(-18deg, var(--foam) 0px, var(--foam) 4px, transparent 4px, transparent 12px);
+            background-size: 120% 120%;
+            opacity: 0.15;
+          }
+        </style>
+        <div class="bw-bg-container">
+          <div class="bw-bg-layer bw-bg-highlight"></div>
+          <div class="bw-bg-layer bw-bg-long"></div>
+          <div class="bw-bg-layer bw-bg-mid"></div>
+          <div class="bw-bg-layer bw-bg-fine"></div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+# --- General UI Styles Injection ---
+def inject_styles() -> None:
+    st.markdown(
+        """
+        <style>
+            /* Center main content and limit width */
+            # .stApp, body {
+            #     background: rgba(29, 100, 200, 0.5);
+            # }
+           .stMainBlockContainer {
+                max-width: 1100px;
+                transition-timing-function: step-end;
+                transition-timing-function: steps(1, end);
+           }
+           .stHeading {
+                margin-bottom: -1.5rem !important;
+                margin-top: -1.5rem !important;
+                # font-size: 1.75rem !important; /* Title */
+                line-height: 1.1 !important;
+           }
+           .stHeading h3 {font-size: 1.35rem;}
+          /* Base grid cell visuals */
+          .bw-row { display: flex; gap: 0.1rem; flex-wrap: nowrap; min-height: 48px;}
+          .bw-cell {
+            width: 100%;
+            gap: 0.1rem;
+            aspect-ratio: 16 / 11;
+            line-height: 1.6;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #1d64c8;
+            border-radius: 0;
+            font-weight: 700;
+            user-select: none;
+            padding: 0.5rem 0.75rem;
+            font-size: 1.4rem;
+            min-height: 1.75rem;
+            min-width: 1.25em;
+            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+            background: #1d64c8;   /* Base cell color */
+            color: #FFFFFF;         /* Base text color for contrast */
+          }
+          /* Found letter cells */
+          .bw-cell.letter { background: #d7faff; color: #050057; }
+          /* Optional empty state if ever used */
+          .bw-cell.empty  { background: #3a3a3a; color: #ffffff;}
+          /* Completed word cells */
+          .bw-cell.bw-cell-complete { background: #050057 !important; color: #d7faff !important; }
+
+          /* Free letter buttons */
+          .bw-free-letter-btn {
+            min-width: 60px !important;
+            height: 60px !important;
+            font-size: 1.5rem !important;
+            font-weight: 700 !important;
+            border-radius: 50% !important;
+            background: linear-gradient(135deg, #20d46c 0%, #1ca41c 100%) !important;
+            color: #ffffff !important;
+            border: 3px solid #1ca41c !important;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
+            transition: all 0.2s ease !important;
+          }
+          .bw-free-letter-btn:hover {
+            background: linear-gradient(135deg, #1ca41c 0%, #20d46c 100%) !important;
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3) !important;
+            transform: translateY(-2px) !important;
+          }
+          .bw-free-letter-btn:disabled {
+            background: #888 !important;
+            border-color: #666 !important;
+            opacity: 0.5 !important;
+            cursor: not-allowed !important;
+          }
+          .bw-free-letter-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+            padding: 1rem;
+            background: linear-gradient(135deg, rgba(29, 100, 200, 0.15), rgba(11, 42, 74, 0.15));
+            border-radius: 1rem;
+            border: 2px solid rgba(29, 100, 200, 0.3);
+            margin-bottom: 1rem;
+          }
+
+          .bw-free-letter-grid {
+            display: grid;
+            aspect-ratio: auto;
+            grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+            gap: 0.5rem;
+            width: 100%;
+          max-width: 400px;    
+         z-index: 1000;
+            position: relative;
+          }
+          /* Apply bw-free-letter-btn styles to buttons inside bw-free-letter-grid */
+          .bw-free-letter-grid button,
+    .bw-free-letter-grid div[data-testid="stButton"] button {
+            min-width: 60px !important;
+        height: 60px !important;
+   font-size: 1.5rem !important;
+     font-weight: 700 !important;
+border-radius: 50% !important;
+            background: linear-gradient(135deg, #20d46c 0%, #1ca41c 100%) !important;
+       color: #ffffff !important;
+        border: 3px solid #1ca41c !important;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
+      transition: all 0.2s ease !important;
+    aspect-ratio: unset !important;
+          }
+          .bw-free-letter-grid button:hover,
+          .bw-free-letter-grid div[data-testid="stButton"] button:hover {
+            background: linear-gradient(135deg, #1ca41c 0%, #20d46c 100%) !important;
+          box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3) !important;
+    transform: translateY(-2px) !important;
+     }
+    .bw-free-letter-grid button:disabled,
+    .bw-free-letter-grid div[data-testid="stButton"] button:disabled {
+            background: #888 !important;
+            border-color: #666 !important;
+         opacity: 0.5 !important;
+            cursor: not-allowed !important;
+          }
+
+          .bw-free-letter-title {
+            font-size: 1.1rem;
+            font-weight: 700;
+            color: #ffffff;
+            text-align: center;
+            margin: 0;
+          }
+          .bw-free-letter-status {
+            font-size: 0.9rem;
+            color: #d7faff;
+            text-align: center;
+          }
+
+          /* Final score style */
+          .bw-final-score { color: #1ca41c !important; font-weight: 800; }
+          .stExpander {z-index: 10;width: 50%;}
+          div[data-testid="stToastContainer"], div[data-testid="stToast"] {
+            margin: 0 auto;
+          }
+
+          /* Make grid buttons square and fill their column */
+          div[data-testid="stButton"]{
+            margin: 0 auto;
+            text-align: center;
+          }
+          div[data-testid="stButton"] button { max-width: 100%; aspect-ratio: 16 / 11; border-radius: 0; background: #1d64c8; color: #ffffff; font-weight: 700; padding: 0.5rem 0.75rem; min-height: 2.5rem; min-width: 1.75rem;}
+          .st-key-new_game_btn, .st-key-sort_wordlist_btn, .st-key-filter_wordlist_btn { margin: 0 auto; aspect-ratio: unset; z-index:9999;}
+          .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_wordlist_btn > div[data-testid="stButton"] button, .st-key-filter_wordlist_btn > div[data-testid="stButton"] button { aspect-ratio: unset; text-align:center; height: auto;}
+
+          div[data-testid="column"], .st-emotion-cache-zh2fnc { width: auto !important; flex: 1 1 auto !important; min-width: 100% !important; max-width: 100% !important; }
+          .st-emotion-cache-1permvm, .st-emotion-cache-1n6tfoc { gap:0.25rem !important; min-height: 2.5rem; min-width: 2.5rem;}          
+
+          .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] { flex-wrap: nowrap !important; overflow-x: auto !important; margin: 2px 0 !important; }
+          .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] > div[data-testid="column"] { flex: 0 0 auto !important; }
+          .bw-grid-row-anchor { height: 0; margin: 0; padding: 0; }
+          .st-emotion-cache-1n6tfoc { background: linear-gradient(-45deg, #a1a1a1, #c0c0c0, #a1a1c1, #666666) !important; gap: 0.1rem !important; color: white; border-radius:15px; padding: 10px 10px 10px 10px; }
+          .st-emotion-cache-1n6tfoc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; margin: 5px;}
+          .st-key-guess_input, .st-key-guess_submit { flex-direction: row; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; }
+          .st-key-guess_input [id^="text_input"] {max-width: 80px;}
+          .st-emotion-cache-18kf3ut [class^="st-key-free_letter_"] [data-testid="stButton"] > button, button.st-emotion-cache-1ojn1jd {
+            aspect-ratio: auto !important;
+            position:relative;
+            z-index: 1200;
+            }
+          .username_input [id^="text_input"], .st-key-username_input [id^="text_input"] { color: #666;}
+          .st-key-username_input [id^="text_input"]::-webkit-input-placeholder { color: rgb(61, 157, 243); }
+          .st-key-username_input [id^="text_input"]::-moz-placeholder { color: rgb(61, 157, 243); }
+          .st-key-username_input [id^="text_input"]:-ms-input-placeholder { color: rgb(61, 157, 243); }
+          .st-key-username_input [id^="text_input"]::-ms-input-placeholder { color: rgb(61, 157, 243); }
+          .st-key-username_input [id^="text_input"]::placeholder { color: rgb(61, 157, 243); }
+          .st-emotion-cache-18kf3ut, .stColumn.st-emotion-cache-116javk {padding-bottom: 4px;}
+
+          /* grid adjustments */
+          # @media (max-width: 705px){
+          #   .bw-cell {
+          #       min-height: 2.5rem;
+          #       min-width: 1.75rem;
+          #   }
+          # }
+          @media (min-width: 560px){
+           div[data-testid="stButton"] button { max-width: 100%; aspect-ratio: 16 / 11; min-height: 1.75rem; display: flex;}           
+           .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_wordlist_btn > div[data-testid="stButton"] button, .st-key-filter_wordlist_btn > div[data-testid="stButton"] button { min-height: calc(100% + 20px) !important;}
+           .st-emotion-cache-ckafi0 { gap:0.1rem !important; min-height: calc(100% + 20px) !important; aspect-ratio: 16 / 11; width: auto !important;  flex: 1 1 auto !important;  min-width: 100% !important;  max-width: 100% !important;}
+           /*.st-emotion-cache-1n6tfoc { aspect-ratio: 16 / 11; min-height: calc(100% + 20px) !important;}*/
+           .st-emotion-cache-1n6tfoc::before { min-height: calc(100% + 20px) !important; }
+           .st-emotion-cache-18kf3ut [class^="st-key-free_letter_"] [data-testid="stButton"] > button, button.st-emotion-cache-1ojn1jd {
+                aspect-ratio: auto !important;
+                position:relative;
+                z-index: 1200;
+              }
+          }
+
+          div[data-testid="stElementToolbarButtonContainer"], button[data-testid="stBaseButton-elementToolbar"], button[data-testid="stBaseButton-elementToolbar"]:hover {
+               display: none;
+          }
+          @media (max-width: 991px) and (min-width: 640px){
+              .st-emotion-cache-18kf3ut, .stColumn.st-emotion-cache-116javk {padding-bottom:0;}
+          }
+          /* Mobile styles */
+          @media (max-width: 640px) {
+            .bw-cell, div[data-testid="stButton"] button, .st-emotion-cache-1permvm {min-width: 1.5rem; min-height:50px;}
+            #bw-main-anchor + div[data-testid="stHorizontalBlock"] { flex-direction: column-reverse !important; width: 100% !important; max-width: 100vw !important; }
+            #bw-main-anchor + div[data-testid="stHorizontalBlock"] > div[data-testid="column"] { width: 100% !important; min-width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
+            .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] { flex-wrap: nowrap !important; overflow-x: auto !important; margin: 2px 0 !important; }
+            .st-emotion-cache-1tj828o { min-width: calc(8.33333% - 1rem); }
+            # .bw-free-letter-grid {
+            #   grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
+            # }            
+            .st-emotion-cache-1hxuzh3 {min-width: unset;}            
+          }
+
+          .bold-text { font-weight: 700; }
+          .blue-background { background:#1d64c8; opacity:0.9; }
+          .metal-border { position: relative; padding: 20px; background: #333; color: white; border: 4px solid; border-image: linear-gradient(45deg, #a1a1a1, #ffffff, #a1a1c1, #666666) 1; border-radius: 8px; }
+          .shiny-border { position: relative; padding: 12px; background: #333; color: white; border-radius: 1.25rem; overflow: hidden; }
+          .shiny-border::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.5s; }
+          .bw-score-panel-container { height: 100%; overflow: hidden; text-align:center;}
+          .bw-score-panel-container table tbody tr h3 {display: flex;flex-direction: row;justify-content: space-evenly;flex-wrap: wrap;}
+          .shiny-border:hover::before { left: 100%; }
+
+          .bw-radio-group { display:flex; align-items:flex-start; gap: 10px; flex-flow: row; }
+          .bw-radio-item { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
+          .bw-radio-circle { width: 45px; height: 45px; border-radius: 50%; border: 4px solid; background: rgba(255,255,255,0.06); display: grid; place-items: center; color:#fff; font-weight:700; }
+          .bw-radio-circle .dot { width: 14px; height: 14px; border-radius: 50%; background:#777; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25); }
+          .bw-radio-circle.active.hit { background: linear-gradient(135deg, rgba(0,255,127,0.18), rgba(0,128,64,0.38)); }
+          .bw-radio-circle.active.hit .dot { background:#20d46c; box-shadow: 0 0 10px rgba(32,212,108,0.85); }
+          .bw-radio-circle.active.miss { background: linear-gradient(135deg, rgba(255,0,0,0.18), rgba(128,0,0,0.38)); }
+          .bw-radio-circle.active.miss .dot { background:#ff4b4b; box-shadow: 0 0 10px rgba(255,75,75,0.85); }
+          .bw-radio-caption { font-size: 0.8rem; color:#fff; opacity:0.85; letter-spacing:0.5px; }
+          @media (max-width:1000px) and (min-width: 641px) {
+            .bw-radio-group { flex-wrap:wrap; gap: 5px; margin-bottom: 5px;}
+            .bw-radio-item {margin: 0 auto;}
+          }
+          @media (max-width:640px) {
+            .bw-radio-item { margin:unset;}
+          }
+
+          /* Make the sidebar scrollable */
+          section[data-testid="stSidebar"] {
+              display: none;
+          }
+
+         .st-emotion-cache-wp60of {
+             width: 720px;
+             position: absolute;     
+             max-width:100%;
+          }
+         .stImage {max-width:300px;}
+         [id^="text_input"], .st-bb [id^="text_input"] {
+          background-color:#fff;
+          color:#000;
+          caret-color:#333;}
+        
+         @media (min-width:720px) {         
+          .st-emotion-cache-wp60of {
+            left: calc(calc(100% - 720px) / 2);
+          }
+         }
+
+          /* Helper to absolutely/fixed position Streamlit component wrapper when showing modal */
+          .bw-component-abs { position: fixed !important; inset: 0 !important; z-index: 99999 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; }
+          /* Generic hide utility */
+          .hide { display: none !important; pointer-events: none !important; }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+# --- Footer Navigation ---
+def _render_footer(current_page: str = "play"):
+    """Render footer with navigation links to leaderboards and main game.
+    
+    Args:
+        current_page: Which page is currently active ("play", "today", "daily", "weekly", "history", "settings")
+    """
+    # Determine which link should be highlighted as active
+    play_active = "active" if current_page == "play" else ""
+    leaderboard_active = "active" if current_page in {"today", "daily", "weekly", "history"} else ""
+    settings_active = "active" if current_page == "settings" else ""
+    game_title = _get_effective_game_title()
+    game_version = f"{game_title.lower()}-v{version.replace('.','-')}"
+    
+    # Check if we're in challenge mode and need to preserve game_id
+    game_id = None
+    try:
+        params = st.query_params
+        if "game_id" in params:
+            game_id = params.get("game_id")
+    except Exception:
+        pass
+    
+    # Also check session state for loaded challenge
+    if not game_id and st.session_state.get("loaded_game_sid"):
+        game_id = st.session_state.get("loaded_game_sid")
+    
+    # Build URLs with game_id if in challenge mode
+    if game_id:
+        today_url = f"?page=today&game_id={game_id}#wrdler-leaderboards"
+        leaderboard_url = f"?page=today&game_id={game_id}#wrdler-leaderboards"
+        play_url = f"?game_id={game_id}#{game_version}"
+        settings_url = f"?page=settings&game_id={game_id}#settings"
+    else:
+        today_url = "?page=today#wrdler-leaderboards"
+        leaderboard_url = "?page=today#wrdler-leaderboards"
+        play_url = f"/#{game_version}"
+        settings_url = "?page=settings#settings"
+    
+    st.markdown(
+        f"""
+        <style>
+        .bw-footer {{
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(180deg, transparent 0%, rgba(11, 42, 74, 0.95) 30%, rgba(11, 42, 74, 0.98) 100%);
+            padding: 0.75rem 1rem 0.5rem;
+            z-index: 9998;
+            text-align: center;
+        }}
+        .bw-footer-nav {{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }}
+        .bw-footer-nav a {{
+            color: #d7faff;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 0.85rem;
+            padding: 0.4rem 0.8rem;
+            border-radius: 0.5rem;
+            background: rgba(29, 100, 200, 0.3);
+            border: 1px solid rgba(215, 250, 255, 0.3);
+            transition: all 0.2s ease;
+        }}
+        .bw-footer-nav a:hover {{
+            background: rgba(29, 100, 200, 0.6);
+            border-color: rgba(215, 250, 255, 0.6);
+            color: #ffffff;
+            text-decoration: none;
+        }}
+        .bw-footer-nav a.active {{
+            background: rgba(32, 212, 108, 0.3);
+            border-color: rgba(32, 212, 108, 0.5);
+        }}
+        /* Add padding to main content to prevent footer overlap */
+        .stMainBlockContainer {{
+            padding-bottom: 70px !important;
+        }}
+        @media (max-width: 640px) {{
+            .bw-footer-nav {{
+                gap: 0.5rem;
+            }}
+            .bw-footer-nav a {{
+                font-size: 0.75rem;
+                padding: 0.35rem 0.6rem;
+            }}
+        }}
+        </style>
+    <div class="bw-footer">
+        <nav class="bw-footer-nav">
+            <a href="{leaderboard_url if not leaderboard_active else '#wrdler-leaderboards'}" title="View Leaderboards" target="_self" class="{leaderboard_active}">🏆 Leaderboard</a>
+            <a href="{play_url if not play_active else f'#{game_version}'}" title="Play Wrdler" target="_self" class="{play_active}">🎮 Play</a>
+            <a href="{settings_url if not settings_active else '#settings'}" title="Settings" target="_self" class="{settings_active}">⚙️ Settings</a>
+        </nav>
+    </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+# --- Spinner Overlay ---
+def show_spinner(message: str = "Loading..."):
+    """
+    Show a full-page overlay with a wrdler.gif spinner and optional message.
+    Expects wrdler/assets/wrdler.gif to exist.
+    """
+    gif_path = os.path.join(os.path.dirname(__file__), "assets", "wrdler.gif")
+    gif_data = None
+    if os.path.exists(gif_path):
+        with open(gif_path, "rb") as f:
+            gif_data = base64.b64encode(f.read()).decode("utf-8")
+        img_tag = f'<img src="data:image/gif;base64,{gif_data}" alt="Loading..." width="80" height="80" />'
+    else:
+        img_tag = '<div style="width:80px;height:80px;background:#eee;border-radius:16px;"></div>'
+
+    st.markdown(
+        f'''
+        <style>
+        .bw-spinner-overlay {{
+            position: fixed; z-index: 99999; top: 0; left: 0; width: 100vw; height: 100vh;
+            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+            background: rgba(11,42,74,0.99); display: flex; align-items: center; justify-content: center;            
+        }}
+        .bw-spinner-img {{
+            width: 150px; height: 150px; border-radius: 16px; box-shadow: 0 0 8px #1d64c8;
+            background: #fff; display: flex; align-items: center; justify-content: center;
+        }}
+        .modal-spinner-inner {{
+            background: rgba(255,255,255,0.75); padding: 1rem 2rem; border-radius: 1rem;
+            box-shadow: 0 0 16px #1d64c8;
+            font-size: 1.5rem; color: #1d64c8;
+        }}
+        .bw-spinner-msg {{
+            color: #1d64c8; font-size: 1.2rem; margin-top: 1.5rem; text-align: center; font-weight: 600;
+        }}
+        </style>
+        <div class="bw-spinner-overlay">
+            <div class="modal-spinner-inner" style="display:flex; flex-direction:column; align-items:center;">
+                <div class="bw-spinner-img stImage">{img_tag}</div>
+                <div class="bw-spinner-msg">{message}</div>
+            </div>
+        </div>
+        ''',
+        unsafe_allow_html=True
+    )