Enhance game UI and settings management

Updated README.md with new SDK versions and Python 3.12.8. Enhanced CSS for grid cells and incorrect guesses display. Added "Game Over" modal styling. Incremented version in __init__.py to 0.1.3. Introduced new parameters in game_storage.py for game settings serialization. Implemented settings loading from settings.json in gradio_ui.py, and updated UI logic to use a modal for game over and sharing. Corrected word count in cooking.txt and removed "BEVAP".

README.md

@@ -3,8 +3,8 @@ title: Wrdler
 emoji: 🎲
 colorFrom: blue
 colorTo: indigo
-sdk: streamlit
-sdk_version: 1.51.0
+sdk: gradio
+sdk_version: 5.50.0
 python_version: 3.12.8
 app_port: 8501
 app_file: app.py

style_wrdler.css

@@ -159,8 +159,10 @@ button[aria-disabled="true"] {
 }
 
 /* Empty revealed cells - solid dark grey fill */
+/* Target cells with non-breaking space (\u00A0) or empty content */
 .grid-cell-revealed button:has(span:empty),
-.grid-cell-revealed button[value="·"],
+.grid-cell-revealed button[value=" "],
+.grid-cell-revealed button[value="\00A0"],
 .grid-cell-revealed button[value=""] {
     background: #2d2d44 !important;
     border: 2px solid #3d3d5c !important;
@@ -173,7 +175,8 @@ button[aria-disabled="true"] {
 
 /* Ensure empty cells are completely filled with dark grey */
 .grid-cell-revealed button:has(span:empty)::before,
-.grid-cell-revealed button[value="·"]::before,
+.grid-cell-revealed button[value=" "]::before,
+.grid-cell-revealed button[value="\00A0"]::before,
 .grid-cell-revealed button[value=""]::before {
     content: '' !important;
     position: absolute !important;
@@ -544,11 +547,88 @@ button[aria-disabled="true"] {
     background-color: rgba(0, 191, 165, 0.75);
 }
 
+/* Incorrect Guesses - Show on Hover or Click (dropdown) */
+.wrdler-incorrect-guesses {
+    position: relative;
+}
+
+.wrdler-incorrect-guesses details {
+    position: relative;
+}
+
+.wrdler-incorrect-guesses summary {
+    cursor: pointer;
+    list-style: none;  /* Remove default arrow */
+    user-select: none;
+}
+
+.wrdler-incorrect-guesses summary::-webkit-details-marker {
+    display: none;  /* Remove arrow in Chrome/Safari */
+}
+
+.wrdler-incorrect-guesses summary::marker {
+    display: none;  /* Remove arrow in Firefox */
+}
+
+/* Add dropdown indicator */
+.wrdler-incorrect-guesses summary::after {
+    content: ' ▼';
+    font-size: 0.7em;
+    opacity: 0.7;
+}
+
+/* Show guess list on hover or click - drops DOWN */
+.wrdler-incorrect-guesses details:hover .guess-list,
+.wrdler-incorrect-guesses details[open] .guess-list {
+    display: block !important;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: linear-gradient(145deg, #1a1a2e, #16213e);
+    border: 1px solid rgba(255, 100, 100, 0.4);
+    border-radius: 8px;
+    padding: 12px 16px;
+    min-width: 150px;
+    max-width: 250px;
+    box-shadow: 0 4px 20px rgba(255, 100, 100, 0.2);
+    z-index: 100;
+    margin-top: 8px;
+}
+
+/* Hide by default (override inline display) */
+.wrdler-incorrect-guesses details:not(:hover):not([open]) .guess-list {
+    display: none !important;
+}
+
+/* Arrow pointing UP to summary */
+.wrdler-incorrect-guesses details:hover .guess-list::before,
+.wrdler-incorrect-guesses details[open] .guess-list::before {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid rgba(255, 100, 100, 0.4);
+}
+
 /* Accordion styling */
 .accordion {
     border-radius: 8px;
 }
 
+/* Hidden audio player - scripts still execute */
+.hidden-audio {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
 /* Hide bridge elements - keep functional but visually hidden */
 /* Using clip-rect to hide visually while maintaining DOM accessibility */
 .hidden-bridge {
@@ -980,3 +1060,99 @@ div#topic-display input::placeholder,
         letter-spacing: 0.5px !important;
     }
 }
+
+/* ============================================
+   Game Over Modal Styling
+   ============================================ */
+
+/* Game Over Modal Container */
+.modal-container {
+    background: linear-gradient(145deg, #1a1a2e, #16213e) !important;
+    border: 2px solid #00d2ff !important;
+    border-radius: 16px !important;
+    box-shadow:
+        0 0 30px rgba(0, 210, 255, 0.3),
+        0 0 60px rgba(0, 191, 165, 0.2),
+        inset 0 0 30px rgba(0, 0, 0, 0.3) !important;
+    max-width: 500px !important;
+    padding: 24px !important;
+}
+
+/* Game Over Container inside modal */
+#game-over-container {
+    text-align: center;
+    padding: 16px;
+}
+
+#game-over-container .wrdler-game-over {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+#game-over-container h2 {
+    color: #00d2ff !important;
+    font-size: 2rem !important;
+    margin-bottom: 16px !important;
+    text-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
+}
+
+#game-over-container .final-score {
+    font-size: 2.5rem !important;
+    color: #00bfa5 !important;
+    text-shadow: 0 0 15px rgba(0, 191, 165, 0.5);
+}
+
+#game-over-container .tier {
+    font-size: 1.5rem !important;
+    color: #ffd700 !important;
+    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+    animation: tier-glow 2s ease-in-out infinite;
+}
+
+@keyframes tier-glow {
+    0%, 100% {
+        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+    }
+    50% {
+        text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
+    }
+}
+
+#game-over-container .breakdown table {
+    background: rgba(0, 0, 0, 0.2) !important;
+    border-radius: 8px;
+}
+
+/* Share Challenge Section in Modal */
+.share-challenge-section {
+    margin-top: 20px !important;
+    padding-top: 20px !important;
+    border-top: 1px solid rgba(0, 210, 255, 0.3) !important;
+}
+
+.share-challenge-section h2 {
+    color: #00d2ff !important;
+    font-size: 1.3rem !important;
+    margin-bottom: 8px !important;
+}
+
+.share-challenge-section p {
+    color: #a8e6cf !important;
+    font-size: 0.9rem !important;
+    margin-bottom: 16px !important;
+}
+
+/* Modal close button */
+.modal-container button[variant="secondary"] {
+    margin-top: 16px !important;
+    background: rgba(0, 0, 0, 0.3) !important;
+    border: 1px solid rgba(0, 210, 255, 0.3) !important;
+    color: #a8e6cf !important;
+}
+
+.modal-container button[variant="secondary"]:hover {
+    background: rgba(0, 210, 255, 0.1) !important;
+    border-color: #00d2ff !important;
+}

wrdler/__init__.py

@@ -8,5 +8,5 @@ Key differences from BattleWords:
 - 2 free letter guesses at game start
 """
 
-__version__ = "0.1.2"
+__version__ = "0.1.3"
 __all__ = ["models", "generator", "logic", "ui", "word_loader"]

wrdler/game_storage.py

@@ -66,7 +66,10 @@ def serialize_game_settings(
     spacer: int = 0,
     may_overlap: bool = False,
     wordlist_source: Optional[str] = None,
-    challenge_id: Optional[str] = None
+    challenge_id: Optional[str] = None,
+    game_title: Optional[str] = None,
+    show_incorrect_guesses: bool = True,
+    enable_free_letters: bool = True
 ) -> Dict[str, Any]:
     """
     Serialize game settings into a JSON-compatible dictionary.
@@ -90,6 +93,9 @@ def serialize_game_settings(
         may_overlap: Whether words can overlap (always False in Wrdler)
         wordlist_source: Source file name (e.g., "classic.txt")
         challenge_id: Optional challenge ID (generated if not provided)
+        game_title: Game title (e.g., "Wrdler Gradio AI")
+        show_incorrect_guesses: Whether to show incorrect guesses
+        enable_free_letters: Whether free letters feature is enabled
 
     Returns:
         dict: Serialized game settings with users array
@@ -132,12 +138,17 @@ def serialize_game_settings(
         },
         "users": [user_result],
         "created_at": datetime.now(timezone.utc).isoformat(),
-        "version": __version__
+        "version": __version__,
+        "show_incorrect_guesses": show_incorrect_guesses,
+        "enable_free_letters": enable_free_letters
     }
 
     if wordlist_source:
         settings["wordlist_source"] = wordlist_source
 
+    if game_title:
+        settings["game_title"] = game_title
+
     return settings
 
 
@@ -267,7 +278,10 @@ def save_game_to_hf(
     spacer: int = 0,
     may_overlap: bool = False,
     repo_id: Optional[str] = None,
-    wordlist_source: Optional[str] = None
+    wordlist_source: Optional[str] = None,
+    game_title: Optional[str] = None,
+    show_incorrect_guesses: bool = True,
+    enable_free_letters: bool = True
 ) -> Tuple[str, Optional[str], Optional[str]]:
     """
     Save game settings to HuggingFace repository and generate shareable URL.
@@ -297,6 +311,9 @@ def save_game_to_hf(
         may_overlap: Whether words can overlap (always False in Wrdler)
         repo_id: HF repository ID (uses HF_REPO_ID from env if None)
         wordlist_source: Source wordlist file name (e.g., "classic.txt")
+        game_title: Game title (e.g., "Wrdler Gradio AI")
+        show_incorrect_guesses: Whether to show incorrect guesses
+        enable_free_letters: Whether free letters feature is enabled
 
     Returns:
         tuple: (challenge_id, full_url, sid) where:
@@ -335,7 +352,10 @@ def save_game_to_hf(
         spacer=spacer,
         may_overlap=may_overlap,
         challenge_id=challenge_id,
-        wordlist_source=wordlist_source
+        wordlist_source=wordlist_source,
+        game_title=game_title,
+        show_incorrect_guesses=show_incorrect_guesses,
+        enable_free_letters=enable_free_letters
     )
 
     logger.debug(f"🆔 Generated Challenge ID: {challenge_id}")

wrdler/gradio_ui.py

@@ -46,6 +46,40 @@ GRID_ROWS = 6
 GRID_COLS = 8
 MAX_FREE_LETTERS = 2
 
+# ---------------------------------------------------------------------------
+# Settings Loading
+# ---------------------------------------------------------------------------
+
+def load_settings() -> Dict[str, Any]:
+    """Load settings from settings.json file."""
+    settings_path = os.path.join(os.path.dirname(os.path.dirname(__file__)), "settings.json")
+    default_settings = {
+        "game_title": "Wrdler Gradio AI",
+        "show_incorrect_guesses": True,
+        "enable_free_letters": True,
+        "show_challenge_links": True,
+        "sound_effects_enabled": True,
+        "sound_effects_volume": 50,
+        "music_enabled": False,
+        "music_volume": 30,
+        "default_wordlist": "classic.txt",
+        "default_game_mode": "classic"
+    }
+
+    try:
+        if os.path.exists(settings_path):
+            with open(settings_path, "r", encoding="utf-8") as f:
+                loaded = json.load(f)
+                # Merge with defaults (loaded settings override defaults)
+                return {**default_settings, **loaded}
+    except Exception:
+        pass
+
+    return default_settings
+
+# Load settings at module level
+APP_SETTINGS = load_settings()
+
 
 # ---------------------------------------------------------------------------
 # Word Loading (Gradio-compatible, no Streamlit dependencies)
@@ -303,16 +337,16 @@ def create_new_game_state(
         "wordlist": wordlist,
         "incorrect_guesses": [],
         "game_over": False,
-        # Audio settings
-        "sound_effects_enabled": True,
-        "sound_effects_volume": 50,
-        "music_enabled": False,
-        "music_volume": 30,
+        # Audio settings (from APP_SETTINGS)
+        "sound_effects_enabled": APP_SETTINGS.get("sound_effects_enabled", True),
+        "sound_effects_volume": APP_SETTINGS.get("sound_effects_volume", 50),
+        "music_enabled": APP_SETTINGS.get("music_enabled", False),
+        "music_volume": APP_SETTINGS.get("music_volume", 30),
         "pending_sound": None,  # Sound effect to play on next render
-        # Display settings
-        "show_incorrect_guesses": True,
-        "enable_free_letters": True,
-        "show_challenge_links": True,
+        # Display settings (from APP_SETTINGS)
+        "show_incorrect_guesses": APP_SETTINGS.get("show_incorrect_guesses", True),
+        "enable_free_letters": APP_SETTINGS.get("enable_free_letters", True),
+        "show_challenge_links": APP_SETTINGS.get("show_challenge_links", True),
         # Challenge mode
         "challenge_mode": False,
         "challenge_sid": None,
@@ -399,7 +433,7 @@ def get_cell_label(state: Dict[str, Any], row: int, col: int) -> str:
 
     if coord_str in revealed_set:
         letter = letter_map.get(coord_str, "")
-        return letter if letter else "·"  # Middle dot for empty revealed cells
+        return letter if letter else "\u00A0"  # Non-breaking space for empty revealed cells
     else:
         return "?"
 
@@ -530,11 +564,14 @@ def render_score_panel_html(state: Dict[str, Any]) -> str:
     seconds = int(elapsed % 60)
     time_str = f"{minutes:02d}:{seconds:02d}"
 
-    # Build table rows
+    # Build table rows - sort words by length
     table_rows = []
     table_rows.append('<tr><th>Word</th><th>Len</th><th>Bonus</th></tr>')
 
-    for text, x, y, direction in state["puzzle_words"]:
+    # Sort puzzle words by length (shortest first)
+    sorted_words = sorted(state["puzzle_words"], key=lambda w: len(w[0]))
+
+    for text, x, y, direction in sorted_words:
         if text in guessed:
             total_points = points_by_word.get(text, len(text))
             base_points = len(text)
@@ -614,12 +651,12 @@ def render_score_panel_html(state: Dict[str, Any]) -> str:
         .wrdler-incorrect-guesses .guess-list {{ color: #ff9999; font-size: 0.8rem; margin-top: 6px; padding-left: 8px; }}
         .wrdler-incorrect-guesses .guess-item {{ margin: 2px 0; }}
       </style>
+      {incorrect_html}
       <div class="score-header">Score: <span class="score-value">{score}</span></div>
       {timer_html}
       <table class='shiny-border' style=\"border-radius:0.75rem; overflow:hidden; width:100%; margin:0 auto; border-collapse:separate; border-spacing: 0;\">
         {table_inner}
-      </table>
-      {incorrect_html}
+      </table>      
     </div>
     '''
 
@@ -708,7 +745,10 @@ def render_game_over_html(state: Dict[str, Any]) -> str:
         '<tr><th>Word</th><th>Length</th><th>Bonus</th><th>Total</th></tr>'
     ]
 
-    for text, x, y, direction in state["puzzle_words"]:
+    # Sort puzzle words by length (shortest first)
+    sorted_words = sorted(state["puzzle_words"], key=lambda w: len(w[0]))
+
+    for text, x, y, direction in sorted_words:
         points = points_by_word.get(text, len(text))
         base = len(text)
         bonus = points - base
@@ -785,14 +825,18 @@ def get_letter_button_updates(state: Dict[str, Any]) -> List[gr.Button]:
 def build_ui_outputs(state: Dict[str, Any], audio_html: str = "") -> tuple:
     """Build the complete UI output tuple for all handlers.
 
-    Returns: (48 grid buttons, 26 letter buttons, score_panel, status_msg, audio, game_over, free_letter_status, free_letter_row, share_btn, state)
+    Returns: (48 grid buttons, 26 letter buttons, score_panel, status_msg, audio, game_over, free_letter_status, free_letter_row, game_over_modal, share_section, state)
     """
     grid_button_updates = get_all_button_updates(state)
     letter_button_updates = get_letter_button_updates(state)
 
-    # Show share button only when game is over AND show_challenge_links is enabled
-    show_share = state.get("game_over", False) and state.get("show_challenge_links", True)
-    share_btn_visible = gr.Button(visible=show_share)
+    # Show modal when game is over
+    is_game_over = state.get("game_over", False)
+    game_over_modal_visible = Modal(visible=is_game_over)
+
+    # Show share section only when show_challenge_links is enabled
+    show_share = state.get("show_challenge_links", True)
+    share_section_visible = gr.Column(visible=show_share)
 
     # Show free letter section only if enabled
     show_free_letters = state.get("enable_free_letters", True)
@@ -807,7 +851,8 @@ def build_ui_outputs(state: Dict[str, Any], audio_html: str = "") -> tuple:
         render_game_over_html(state),
         render_free_letters_status(state) if show_free_letters else "",
         free_letter_row_visible,
-        share_btn_visible,
+        game_over_modal_visible,
+        share_section_visible,
         state
     )
 
@@ -898,9 +943,13 @@ def build_guess_outputs(state: Dict[str, Any], audio_html: str = "", clear_input
     grid_button_updates = get_all_button_updates(state)
     letter_button_updates = get_letter_button_updates(state)
 
-    # Show share button only when game is over AND show_challenge_links is enabled
-    show_share = state.get("game_over", False) and state.get("show_challenge_links", True)
-    share_btn_visible = gr.Button(visible=show_share)
+    # Show modal when game is over
+    is_game_over = state.get("game_over", False)
+    game_over_modal_visible = Modal(visible=is_game_over)
+
+    # Show share section only when show_challenge_links is enabled
+    show_share = state.get("show_challenge_links", True)
+    share_section_visible = gr.Column(visible=show_share)
 
     # Show free letter section only if enabled
     show_free_letters = state.get("enable_free_letters", True)
@@ -916,7 +965,8 @@ def build_guess_outputs(state: Dict[str, Any], audio_html: str = "", clear_input
         render_game_over_html(state),
         render_free_letters_status(state) if show_free_letters else "",
         free_letter_row_visible,
-        share_btn_visible,
+        game_over_modal_visible,
+        share_section_visible,
         state
     )
 
@@ -1080,7 +1130,10 @@ def handle_share_challenge(
                 grid_size=6,  # Wrdler: 6 rows
                 spacer=0,
                 may_overlap=False,
-                wordlist_source=wordlist_source
+                wordlist_source=wordlist_source,
+                game_title=APP_SETTINGS.get("game_title", "Wrdler Gradio AI"),
+                show_incorrect_guesses=state.get("show_incorrect_guesses", True),
+                enable_free_letters=state.get("enable_free_letters", True)
             )
 
             if sid:
@@ -1118,17 +1171,20 @@ def create_app() -> gr.Blocks:
         except Exception:
             css_content = None
 
+    # Get game title from settings
+    game_title = APP_SETTINGS.get("game_title", "Wrdler Gradio AI")
+
     with gr.Blocks(
         css=css_content,
         theme="Surn/beeuty",
-        title=f"Wrdler v{__version__}"
+        title=f"{game_title} v{__version__}"
     ) as demo:
 
         # Game state
         game_state = gr.State(value=create_new_game_state)
 
         # Header
-        gr.Markdown(f"# Wrdler v{__version__}")
+        gr.Markdown(f"# {game_title} v{__version__}")
         gr.Markdown("Find all 6 hidden words in the 8×6 grid!")
 
         # Tab layout
@@ -1207,18 +1263,6 @@ def create_app() -> gr.Blocks:
                         # Status message
                         status_msg = gr.Markdown(value="Welcome!")
 
-                        # Game over display
-                        game_over_html = gr.HTML(value="", elem_id="game-over-container")
-
-                        # Share Challenge Button (visible after game over)
-                        share_challenge_btn = gr.Button(
-                            "🎮 Share Your Challenge",
-                            variant="primary",
-                            visible=False,
-                            elem_id="share-challenge-btn",
-                            elem_classes=["share-challenge-trigger"]
-                        )
-
                     # Right column - Score panel and New Game
                     with gr.Column(scale=3):
                         guess_input = gr.Textbox(
@@ -1269,72 +1313,81 @@ def create_app() -> gr.Blocks:
                             label="Game Mode"
                         )
                         show_incorrect_guesses = gr.Checkbox(
-                            value=True,
+                            value=APP_SETTINGS.get("show_incorrect_guesses", True),
                             label="Show Incorrect Guesses"
                         )
                         enable_free_letters = gr.Checkbox(
-                            value=True,
+                            value=APP_SETTINGS.get("enable_free_letters", True),
                             label="Enable Free Letters"
                         )
                         show_challenge_links = gr.Checkbox(
-                            value=True,
+                            value=APP_SETTINGS.get("show_challenge_links", True),
                             label="Show Challenge Share Links"
                         )
 
                     with gr.Column():
                         gr.Markdown("### Audio Settings")
                         sfx_enabled = gr.Checkbox(
-                            value=True,
+                            value=APP_SETTINGS.get("sound_effects_enabled", True),
                             label="Enable Sound Effects"
                         )
                         sfx_volume = gr.Slider(
                             minimum=0,
                             maximum=100,
-                            value=50,
+                            value=APP_SETTINGS.get("sound_effects_volume", 50),
                             step=1,
                             label="Sound Effects Volume"
                         )
                         music_enabled = gr.Checkbox(
-                            value=False,
+                            value=APP_SETTINGS.get("music_enabled", False),
                             label="Enable Background Music"
                         )
                         music_volume = gr.Slider(
                             minimum=0,
                             maximum=100,
-                            value=30,
+                            value=APP_SETTINGS.get("music_volume", 30),
                             step=1,
                             label="Music Volume"
                         )
 
-        # Hidden audio player for sound effects
-        audio_player_html = gr.HTML(value="", elem_id="audio-player", visible=False)
+        # Audio player for sound effects (hidden via CSS but still executes)
+        audio_player_html = gr.HTML(value="", elem_id="audio-player", elem_classes=["hidden-audio"])
 
         # Timer for updating elapsed time (ticks every second)
         game_timer = gr.Timer(value=1, active=True)
 
-        # Share Challenge Modal Dialog (outside tabs)
-        with Modal(visible=False) as share_modal:
-            gr.Markdown("## 🎮 Share Your Challenge")
-            gr.Markdown("Challenge your friends to beat your score!")
-            username_input = gr.Textbox(
-                label="Your Name (optional)",
-                placeholder="Anonymous",
-                max_lines=1,
-                elem_id="username-input"
-            )
-            share_btn = gr.Button("Generate Share Link", variant="primary", size="lg")
-            share_status = gr.Markdown(value="", elem_id="share-status")
-            share_url_display = gr.Textbox(
-                label="Share URL (click to copy)",
+        # Game Over Modal Dialog (outside tabs) - contains game over display and share challenge section
+        with Modal(visible=False) as game_over_modal:
+            # Game Over Content
+            game_over_html = gr.HTML(
                 value="",
-                interactive=False,
-                visible=False,
-                elem_id="share-url-display"
+                elem_id="game-over-container"
             )
-            close_modal_btn = gr.Button("Close", variant="secondary")
+
+            # Share Challenge Section (conditionally visible based on show_challenge_links)
+            with gr.Column(visible=True, elem_classes=["share-challenge-section"]) as share_section:
+                gr.Markdown("## 🎮 Share Your Challenge")
+                gr.Markdown("Challenge your friends to beat your score!")
+                username_input = gr.Textbox(
+                    label="Your Name (optional)",
+                    placeholder="Anonymous",
+                    max_lines=1,
+                    elem_id="username-input"
+                )
+                share_challenge_btn = gr.Button("Generate Share Link", variant="primary", size="lg")
+                share_status = gr.Markdown(value="", elem_id="share-status")
+                share_url_display = gr.Textbox(
+                    label="Share URL (click to copy)",
+                    value="",
+                    interactive=False,
+                    visible=False,
+                    elem_id="share-url-display"
+                )
+
+            close_modal_btn = gr.Button("Close", variant="secondary", size="lg")
 
         # Define common outputs for handlers
-        # Order: 48 grid buttons, 26 letter buttons, score_panel, status_msg, audio, game_over, free_letter_status, free_letter_row, share_btn_visible, state
+        # Order: 48 grid buttons, 26 letter buttons, score_panel, status_msg, audio, game_over, free_letter_status, free_letter_row, game_over_modal, share_section, state
         common_outputs = [
             *grid_buttons,
             *letter_buttons,
@@ -1344,7 +1397,8 @@ def create_app() -> gr.Blocks:
             game_over_html,
             free_letter_status,
             free_letter_row,
-            share_challenge_btn,
+            game_over_modal,
+            share_section,
             game_state
         ]
 
@@ -1359,7 +1413,8 @@ def create_app() -> gr.Blocks:
             game_over_html,
             free_letter_status,
             free_letter_row,
-            share_challenge_btn,
+            game_over_modal,
+            share_section,
             game_state
         ]
 
@@ -1418,17 +1473,63 @@ def create_app() -> gr.Blocks:
             outputs=topic_display
         )
 
-        # Wordlist dropdown change handler - show/hide AI topic input row and update topic display
-        def handle_wordlist_change(wordlist, ai_topic):
-            """Show AI topic input when AI Generated is selected and update topic display."""
+        # Wordlist dropdown change handler - starts new game, show/hide AI topic input
+        def handle_wordlist_change(wordlist, ai_topic, game_mode, sfx_en, sfx_vol, music_en, music_vol, show_inc, enable_fl, show_chal, state):
+            """Start new game when wordlist changes, show AI topic input when AI Generated is selected."""
+            state = ensure_state(state)
             is_ai = wordlist == "AI Generated"
             topic_value = ai_topic.strip() if is_ai and ai_topic.strip() else wordlist.replace(".txt", "")
-            return gr.Row(visible=is_ai), gr.Textbox(value=topic_value)
+
+            # Start new game with selected wordlist
+            new_state = create_new_game_state(wordlist=wordlist, game_mode=game_mode, ai_topic=ai_topic if is_ai else "")
+            # Apply all settings
+            new_state["sound_effects_enabled"] = sfx_en
+            new_state["sound_effects_volume"] = sfx_vol
+            new_state["music_enabled"] = music_en
+            new_state["music_volume"] = music_vol
+            new_state["show_incorrect_guesses"] = show_inc
+            new_state["enable_free_letters"] = enable_fl
+            new_state["show_challenge_links"] = show_chal
+            if not enable_fl:
+                new_state["last_action"] = "Free letters disabled. Click grid cells to reveal letters!"
+
+            base_outputs = build_ui_outputs(new_state)
+            return (
+                *base_outputs,
+                gr.Row(visible=is_ai),  # ai_topic_row
+                gr.Textbox(value=topic_value)  # topic_display
+            )
+
+        # Extended outputs for wordlist change
+        wordlist_change_outputs = common_outputs + [ai_topic_row, topic_display]
 
         wordlist_dropdown.change(
             fn=handle_wordlist_change,
-            inputs=[wordlist_dropdown, ai_topic_input],
-            outputs=[ai_topic_row, topic_display]
+            inputs=[wordlist_dropdown, ai_topic_input, game_mode_dropdown, sfx_enabled, sfx_volume, music_enabled, music_volume, show_incorrect_guesses, enable_free_letters, show_challenge_links, game_state],
+            outputs=wordlist_change_outputs
+        )
+
+        # Game mode dropdown change handler - starts new game
+        def handle_game_mode_change(game_mode, wordlist, ai_topic, sfx_en, sfx_vol, music_en, music_vol, show_inc, enable_fl, show_chal, state):
+            """Start new game when game mode changes."""
+            state = ensure_state(state)
+            new_state = create_new_game_state(wordlist=wordlist, game_mode=game_mode, ai_topic=ai_topic)
+            # Apply all settings
+            new_state["sound_effects_enabled"] = sfx_en
+            new_state["sound_effects_volume"] = sfx_vol
+            new_state["music_enabled"] = music_en
+            new_state["music_volume"] = music_vol
+            new_state["show_incorrect_guesses"] = show_inc
+            new_state["enable_free_letters"] = enable_fl
+            new_state["show_challenge_links"] = show_chal
+            if not enable_fl:
+                new_state["last_action"] = "Free letters disabled. Click grid cells to reveal letters!"
+            return build_ui_outputs(new_state)
+
+        game_mode_dropdown.change(
+            fn=handle_game_mode_change,
+            inputs=[game_mode_dropdown, wordlist_dropdown, ai_topic_input, sfx_enabled, sfx_volume, music_enabled, music_volume, show_incorrect_guesses, enable_free_letters, show_challenge_links, game_state],
+            outputs=common_outputs
         )
 
         # AI Topic submit button - generates new game with AI words
@@ -1544,52 +1645,73 @@ def create_app() -> gr.Blocks:
             outputs=[game_state]
         )
 
-        # Show incorrect guesses toggle handler
-        def handle_show_incorrect_change(show_incorrect, state):
+        # Show incorrect guesses toggle handler - starts new game
+        def handle_show_incorrect_change(show_incorrect, wordlist, ai_topic, game_mode, sfx_en, sfx_vol, music_en, music_vol, enable_fl, show_chal, state):
             state = ensure_state(state)
-            new_state = copy.deepcopy(state)
+            new_state = create_new_game_state(wordlist=wordlist, game_mode=game_mode, ai_topic=ai_topic)
+            # Apply all settings
+            new_state["sound_effects_enabled"] = sfx_en
+            new_state["sound_effects_volume"] = sfx_vol
+            new_state["music_enabled"] = music_en
+            new_state["music_volume"] = music_vol
             new_state["show_incorrect_guesses"] = show_incorrect
-            return new_state
+            new_state["enable_free_letters"] = enable_fl
+            new_state["show_challenge_links"] = show_chal
+            if not enable_fl:
+                new_state["last_action"] = "Free letters disabled. Click grid cells to reveal letters!"
+            return build_ui_outputs(new_state)
 
         show_incorrect_guesses.change(
             fn=handle_show_incorrect_change,
-            inputs=[show_incorrect_guesses, game_state],
-            outputs=[game_state]
+            inputs=[show_incorrect_guesses, wordlist_dropdown, ai_topic_input, game_mode_dropdown, sfx_enabled, sfx_volume, music_enabled, music_volume, enable_free_letters, show_challenge_links, game_state],
+            outputs=common_outputs
         )
 
-        # Enable free letters toggle handler
-        def handle_enable_free_letters_change(enabled, state):
+        # Enable free letters toggle handler - starts new game
+        def handle_enable_free_letters_change(enabled, wordlist, ai_topic, game_mode, sfx_en, sfx_vol, music_en, music_vol, show_inc, show_chal, state):
             state = ensure_state(state)
-            new_state = copy.deepcopy(state)
+            new_state = create_new_game_state(wordlist=wordlist, game_mode=game_mode, ai_topic=ai_topic)
+            # Apply all settings
+            new_state["sound_effects_enabled"] = sfx_en
+            new_state["sound_effects_volume"] = sfx_vol
+            new_state["music_enabled"] = music_en
+            new_state["music_volume"] = music_vol
+            new_state["show_incorrect_guesses"] = show_inc
             new_state["enable_free_letters"] = enabled
-            # Update message based on setting
+            new_state["show_challenge_links"] = show_chal
             if not enabled:
                 new_state["last_action"] = "Free letters disabled. Click grid cells to reveal letters!"
-            elif new_state.get("free_letters_used", 0) < MAX_FREE_LETTERS:
-                remaining = MAX_FREE_LETTERS - new_state.get("free_letters_used", 0)
-                new_state["last_action"] = f"Choose {remaining} free letter{'s' if remaining > 1 else ''} to start."
             return build_ui_outputs(new_state)
 
         enable_free_letters.change(
             fn=handle_enable_free_letters_change,
-            inputs=[enable_free_letters, game_state],
+            inputs=[enable_free_letters, wordlist_dropdown, ai_topic_input, game_mode_dropdown, sfx_enabled, sfx_volume, music_enabled, music_volume, show_incorrect_guesses, show_challenge_links, game_state],
             outputs=common_outputs
         )
 
-        # Show challenge links toggle handler
-        def handle_show_challenge_links_change(enabled, state):
+        # Show challenge links toggle handler - starts new game
+        def handle_show_challenge_links_change(enabled, wordlist, ai_topic, game_mode, sfx_en, sfx_vol, music_en, music_vol, show_inc, enable_fl, state):
             state = ensure_state(state)
-            new_state = copy.deepcopy(state)
+            new_state = create_new_game_state(wordlist=wordlist, game_mode=game_mode, ai_topic=ai_topic)
+            # Apply all settings
+            new_state["sound_effects_enabled"] = sfx_en
+            new_state["sound_effects_volume"] = sfx_vol
+            new_state["music_enabled"] = music_en
+            new_state["music_volume"] = music_vol
+            new_state["show_incorrect_guesses"] = show_inc
+            new_state["enable_free_letters"] = enable_fl
             new_state["show_challenge_links"] = enabled
+            if not enable_fl:
+                new_state["last_action"] = "Free letters disabled. Click grid cells to reveal letters!"
             return build_ui_outputs(new_state)
 
         show_challenge_links.change(
             fn=handle_show_challenge_links_change,
-            inputs=[show_challenge_links, game_state],
+            inputs=[show_challenge_links, wordlist_dropdown, ai_topic_input, game_mode_dropdown, sfx_enabled, sfx_volume, music_enabled, music_volume, show_incorrect_guesses, enable_free_letters, game_state],
             outputs=common_outputs
         )
 
-        # Share challenge button handler
+        # Share challenge button handler (inside game over modal)
         def on_share_click(username, state):
             """Handle share button click."""
             status_text, url, new_state = handle_share_challenge(username, state)
@@ -1600,23 +1722,17 @@ def create_app() -> gr.Blocks:
                 new_state
             )
 
-        share_btn.click(
+        share_challenge_btn.click(
             fn=on_share_click,
             inputs=[username_input, game_state],
             outputs=[share_status, share_url_display, game_state]
         )
 
-        # Modal open/close handlers
-        share_challenge_btn.click(
-            fn=lambda: Modal(visible=True),
-            inputs=None,
-            outputs=share_modal
-        )
-
+        # Modal close handler
         close_modal_btn.click(
             fn=lambda: Modal(visible=False),
             inputs=None,
-            outputs=share_modal
+            outputs=game_over_modal
         )
 
         # Timer tick handler - updates score panel with current elapsed time

wrdler/words/cooking.txt

@@ -1,7 +1,7 @@
 # AI-generated word list
 # Topic: Cooking
 # Last updated: 2025-11-29 15:33:26
-# Total words: 270
+# Total words: 269
 # Format: one word per line, sorted by length then alphabetically
 #
 BAKE
@@ -98,7 +98,6 @@ BASTE
 BATCH
 BERRY
 BESTE
-BEVAP
 BITCH
 BLACK
 BLANK