0.2.5 - partial

README.md

@@ -105,10 +105,13 @@ docker run -p 8501:8501 battlewords
 
 ## Changelog
 
+- 0.2.5
+  - fix finale pop up issue
+  - make grid cells square on wider devices
+
 - 0.2.4
   - Add music files to repo
-  - disable music by default
-  - fix finale pop up issue
+  - disable music by default  
 
 - 0.2.3
   - Update version information display

battlewords/__init__.py

@@ -1,2 +1,2 @@
-__version__ = "0.2.4"
+__version__ = "0.2.5"
 __all__ = ["models", "generator", "logic", "ui"]

battlewords/ui.py

@@ -1,13 +1,13 @@
 from __future__ import annotations
 from . import __version__ as version
 from typing import Iterable, Tuple, Optional
+import streamlit as st
 
 import matplotlib.pyplot as plt
 from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
 from matplotlib import colors as mcolors
 import tempfile
 import os
-import streamlit as st
 from PIL import Image
 import numpy as np
 
@@ -24,6 +24,7 @@ from .audio import (
     _inject_audio_control_sync,
 )
 
+st.set_page_config(initial_sidebar_state="collapsed")
 
 CoordLike = Tuple[int, int]
 
@@ -122,9 +123,10 @@ def inject_styles() -> None:
             border-radius: 0;
             font-weight: 700;
             user-select: none;
-            padding: 0.25rem 0.75rem;
+            padding: 0.5rem 0.75rem;
             font-size: 1.4rem;
             min-height: 2.5rem;
+            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 */
@@ -144,170 +146,209 @@ def inject_styles() -> None:
             margin: 0 auto;
             text-align: center;
           }
-          div[data-testid="stButton"] button {
-            max-width: 100%;            
-            aspect-ratio: 1 / 1;
-            border-radius: 0;
-            #border: 1px solid #1d64c8;
-            background: #1d64c8;
-            color: #ffffff;
-            font-weight: 700;
-            padding: 0.25rem 0.75rem;
-            min-height: 2.5rem;
-          }
-          .st-key-new_game_btn, .st-key-sort_wordlist_btn {
-            margin: 0 auto;
-            aspect-ratio: unset;
-          }
-          .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_wordlist_btn > div[data-testid="stButton"] button {
-            aspect-ratio: unset;
-            text-align:center;
-            height: auto;
-          }
+          div[data-testid="stButton"] button { max-width: 100%; aspect-ratio: 1 / 1; border-radius: 0; background: #1d64c8; color: #ffffff; font-weight: 700; padding: 0.5rem 0.75rem; min-height: 2.5rem; min-width: 2.5rem;}
+          .st-key-new_game_btn, .st-key-sort_wordlist_btn { margin: 0 auto; aspect-ratio: unset; }
+          .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_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.1rem !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, #ffffff, #a1a1a1, #666666); gap: 0.1rem !important; color: white; border-radius:15px; padding: 10px 10px 10px 5px; }
+          .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; }
+
+          /* grid adjustments */
+          @media (min-width: 560px){
+           div[data-testid="stButton"] button { max-width: 100%; aspect-ratio: 1 / 1; min-height: calc(100% + 20px) !important;}           
+           .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_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: 1 / 1; width: auto !important;  flex: 1 1 auto !important;  min-width: 100% !important;  max-width: 100% !important;}
+           /*.st-emotion-cache-1n6tfoc { aspect-ratio: 1 / 1; min-height: calc(100% + 20px) !important;}*/
+           .st-emotion-cache-1n6tfoc::before { min-height: calc(100% + 20px) !important; }
 
-          /* Ensure grid cell columns expand equally for both buttons and revealed cells */
-          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.1rem !important;
-            min-height: 2.5rem;
           }
 
-          /* Ensure grid rows generated via st.columns do not wrap and can scroll horizontally. */
-          .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] {
-            flex-wrap: nowrap !important;
-            overflow-x: auto !important;
-            margin: 2px 0 !important;      /* Reduce gap between rows */
+          /* Mobile styles */
+          @media (max-width: 640px) {
+            .bw-cell, div[data-testid="stButton"] button, .st-emotion-cache-1permvm {min-width: 1.5rem; min-height:40px;}
+            #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-17i4tbh { min-width: calc(8.33333% - 1rem); }
           }
-          .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] > div[data-testid="column"] {
-            flex: 0 0 auto !important;
+
+          .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, #a1a1a1, #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; }
+          .shiny-border:hover::before { left: 100%; }
+
+          .bw-radio-group { display:flex; align-items:flex-start; gap: 10px; flex-flow: row; }
+          @media (max-width:1000px) and (min-width:641px) {
+            .bw-radio-group { flex-wrap:wrap; gap: 5px; }
           }
-          .bw-grid-row-anchor { height: 0; margin: 0; padding: 0; }
-          .st-emotion-cache-1n6tfoc {  
-            background: linear-gradient(-45deg, #a1a1a1, #ffffff, #a1a1a1, #666666);
-            gap: 0.1rem !important;
-            color: white;
-            # border: 10px solid;
-            # border-image: linear-gradient(-45deg, #a1a1a1, #ffffff, #a1a1a1, #666666) 1;
-            border-radius:15px; 
-            padding: 10px;
+          .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; }
+
+          /* Make the sidebar scrollable */
+          section[data-testid="stSidebar"] {
+              max-height: 100vh;
+              overflow-y: auto;
+              overflow-x: hidden;
+              scrollbar-width: thin;
+              scrollbar-color: transparent transparent;
           }
-          .st-emotion-cache-1n6tfoc::before {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; right: 0; bottom: 0;
-            border-radius: 10px;            
-            margin: 5px; /* Border thickness */
+
+          .st-emotion-cache-wp60of {
+             width: 720px;
+             position: absolute;     
+             max-width:100%;
           }
-          .st-key-guess_input, .st-key-guess_submit {
-            flex-direction: row;
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: flex-start;
-            align-items: flex-end;
+
+         @media (min-width:720px) {
+          .st-emotion-cache-wp60of {
+            left: calc(calc(100% - 720px) / 2);
           }
+         }
 
-          /* Mobile styles */
-          @media (max-width: 640px) {
-            /* Reverse the main two-column layout (radar above grid) and force full width */
-            #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;              
-            }
+          /* 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,
+    )
 
-            /* Keep grid rows on one line on small screens too */
-            .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] {
-              flex-wrap: nowrap !important;
-              overflow-x: auto !important;
-              margin: 2px 0 !important;    /* Keep tighter row gap on mobile */
-            }
-           .st-emotion-cache-17i4tbh {
-                min-width: calc(8.33333% - 1rem);
-            }
+# Bridge to control the wrapper around the iframe component from the parent page
+def _inject_parent_modal_bridge() -> None:
+    if st.session_state.get("_bw_parent_bridge", False):
+        return
+    st.session_state["_bw_parent_bridge"] = True
+    st.markdown(
+        """
+        <script>
+        (function(){
+          // Debug: script injection confirmation
+          alert('Parent modal bridge script loaded');
+
+          // Find the Streamlit wrapper around the iframe that renders the modal (components.html wrapper)
+          function findWrapper(iframe) {
+            if (!iframe) return null;
+            // Try Streamlit's typical element wrapper first, then fallback to parentElement
+            var el = iframe.closest('.st-emotion-cache-wp60of') || iframe.parentElement;
+            // Debug: which wrapper did we find
+            alert('findWrapper called, found: ' + (el ? el.className : 'null'));
+            return el;
           }
 
-        .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, #a1a1a1, #666666) 1;
-          border-radius: 8px;
-        }
+          // Listen for messages from the iframe (modal page) to toggle visibility/positioning
+          window.addEventListener('message', function(e) {
+            alert('Message event received');
 
-        .shiny-border {
-          position: relative;
-          padding: 12px;
-          background: #333;
-          color: white;
-          border-radius: 1.25rem;
-          overflow: hidden;
-        }
+            var data = e.data || {};
+            var isVisibility = data && data.type === 'bw-bootstrap-modal-visibility';
+            var isStreamlitSet = data && data.type === 'streamlit:setComponentValue' && data.key === 'show_gameover_overlay';
 
-        .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;
-        }
+            // Only handle our two message types
+            if (!(isVisibility || isStreamlitSet)) return;
+            alert('Visibility or StreamlitSet message detected');
 
-        .bw-score-panel-container {
-            height: 100%;
-            overflow: hidden;
-        }
+            // Decide if the modal should be visible based on message type
+            var shouldBeVisible = isVisibility ? !!data.visible : !!data.value;
+            alert('shouldBeVisible: ' + shouldBeVisible);
 
-        .shiny-border:hover::before {
-          left: 100%;
-        }
+            // Try to get the iframe element directly from the message source
+            var iframeEl = null;
+            try {
+              iframeEl = (e.source && e.source.frameElement) ? e.source.frameElement : null;
+            } catch(_) {
+              iframeEl = null;
+            }
+            alert('iframeEl direct: ' + (iframeEl ? iframeEl.tagName : 'null'));
+
+            // Fallback: scan iframes and match by contentWindow reference
+            if (!iframeEl) {
+              var frames = document.querySelectorAll('iframe');
+              for (var i = 0; i < frames.length; i++) {
+                var f = frames[i];
+                try {
+                  if (f.contentWindow !== e.source) continue;
+                } catch(_) {
+                  continue;
+                }
+                iframeEl = f;
+                break;
+              }
+            }
+            alert('iframeEl after fallback: ' + (iframeEl ? iframeEl.tagName : 'null'));
+            if (!iframeEl) return;
+
+            // Find the wrapper that we will show/hide and absolutely position
+            var wrap = findWrapper(iframeEl);
+            alert('Wrapper found: ' + (wrap ? wrap.className : 'null'));
+
+            if (wrap) {
+              wrap.classList.add('bw-modal-wrapper');
+              if (shouldBeVisible) {
+                alert('Setting wrapper to visible');
+                wrap.style.display = 'block';
+                wrap.style.position = 'fixed';
+                wrap.style.inset = '0';
+                wrap.style.zIndex = '99999';
+                wrap.style.width = '100vw';
+                wrap.style.height = '100vh';
+                wrap.style.margin = '0';
+                wrap.style.padding = '0';
+              } else {
+                alert('Setting wrapper to hidden');
+                wrap.style.display = 'none';
+                wrap.style.position = 'relative';
+              }
+            }
 
-        /* Hit/Miss radio indicators - circular group */
-        .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: 46px; height: 46px; border-radius: 50%;
-          border: 4px solid; /* border-image: linear-gradient(45deg, #a1a1a1, #ffffff, #a1a1a1, #666666) 1; */
-          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; }
-
-        /* Make the sidebar scrollable */
-        section[data-testid="stSidebar"] {
-            max-height: 100vh;
-            overflow-y: auto;
-            overflow-x: hidden;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-        }
-        </style>
+            // Always toggle the iframe element itself for robustness
+            try {
+              if (shouldBeVisible) {
+                alert('Setting iframe to visible');
+                iframeEl.style.display = 'block';
+                iframeEl.style.width = '100vw';
+                iframeEl.style.height = '100vh';
+                iframeEl.style.borderRadius = '15px';
+                iframeEl.style.background = 'rgba(29, 100, 200, 0.5)';
+                iframeEl.style.pointerEvents = 'auto';
+                iframeEl.style.zIndex = '1000';
+                iframeEl.style.position = 'fixed';
+                iframeEl.style.inset = '0';
+              } else {
+                alert('Setting iframe to hidden');
+                iframeEl.style.display = 'none';
+                iframeEl.style.width = '0px';
+                iframeEl.style.height = '0px';
+                iframeEl.style.pointerEvents = 'none';
+                iframeEl.style.zIndex = '-1';
+                iframeEl.style.position = '';
+                iframeEl.style.inset = '';
+              }
+            } catch(_) {
+              alert('Error toggling iframe style');
+            }
+          }, false);
+
+          // Note: Streamlit's components.html uses an iframe sandbox that includes allow-scripts and allow-same-origin.
+          // That combination raises a general warning, but is required here for messaging and proper behavior.
+        })();
+        </script>
         """,
         unsafe_allow_html=True,
     )
@@ -316,6 +357,7 @@ def inject_styles() -> None:
 def _init_session() -> None:
     if "initialized" in st.session_state and st.session_state.initialized:
         return
+    # --- Preserve music settings ---
 
     # Ensure a default selection exists before creating the puzzle
     files = get_wordlist_files()
@@ -351,7 +393,7 @@ def _new_game() -> None:
     # --- Preserve music settings ---
     music_enabled = st.session_state.get("music_enabled", False)
     music_track_path = st.session_state.get("music_track_path")
-    music_volume = st.session_state.get("music_volume", 20)
+    music_volume = st.session_state.get("music_volume", 15)
     st.session_state.clear()
     if selected:
         st.session_state.selected_wordlist = selected
@@ -472,7 +514,7 @@ def _render_sidebar():
             # disabled by default
             st.session_state.music_enabled = False #if tracks else True
         if "music_volume" not in st.session_state:
-            st.session_state.music_volume = 20
+            st.session_state.music_volume = 15
 
         enabled = st.checkbox("Enable music", value=st.session_state.music_enabled, key="music_enabled")
 
@@ -741,7 +783,7 @@ def _render_grid(state: GameState, letter_map, show_grid_ticks: bool = True):
             font-size: 1.4rem;
         }
         /* Further tighten vertical spacing between rows inside the grid container */
-        .bw-grid-row-anchor + div[data-testid=\"stHorizontalBlock\"] {
+        .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] {
             margin: 2px 0 !important;
         }
         .st-emotion-cache-14d5v98 {
@@ -835,6 +877,24 @@ def _render_grid(state: GameState, letter_map, show_grid_ticks: bool = True):
         _sync_back(state)
         st.rerun()
 
+def _sort_wordlist(filename):
+    import os
+    import time  # Add this import
+
+    WORDS_DIR = os.path.join(os.path.dirname(__file__), "words")
+    filepath = os.path.join(WORDS_DIR, filename)
+    sorted_words = sort_word_file(filepath)
+    # Optionally, write sorted words back to file
+    with open(filepath, "w", encoding="utf-8") as f:
+        # Re-add header if needed
+        f.write("# Optional: place a large A–Z word list here (one word per line).\n")
+        f.write("# The app falls back to built-in pools if fewer than 500 words per length are found.\n")
+        for word in sorted_words:
+            f.write(f"{word}\n")
+    # Show a message in Streamlit
+    st.success(f"{filename} sorted by length and alphabetically. Starting new game in 5 seconds...")
+    time.sleep(5)  # 5 second delay before starting new game
+    _new_game()
 
 def _render_hit_miss(state: GameState):
     # Determine last reveal outcome from last_action string
@@ -917,93 +977,234 @@ def _render_guess_form(state: GameState):
             st.rerun()
 
 
+# -------------------- Score Panel --------------------
 def _render_score_panel(state: GameState):
-    # Only show modal from here if game is over AND overlay wasn't dismissed
-    if is_game_over(state) and not st.session_state.get("hide_gameover_overlay", False):
-        _render_game_over(state)
-    else:
-        # Build a simple table with independent column backgrounds and visible gaps
-        rows_html = []
-        # Header row
-        header_html = (
-            "<tr>"
-            "<th class=\"blue-background bold-text\">Word</th>"
-            "<th class=\"blue-background bold-text\">Letters</th>"
-            "<th class=\"blue-background bold-text\">Extra</th>"
-            "</tr>"
-        )
-        rows_html.append(header_html)
+    # Always render the score table (overlay handled separately)
+    rows_html = []
+    header_html = (
+        "<tr>"
+        "<th class=\"blue-background bold-text\">Word</th>"
+        "<th class=\"blue-background bold-text\">Letters</th>"
+        "<th class=\"blue-background bold-text\">Extra</th>"
+        "</tr>"
+    )
+    rows_html.append(header_html)
 
-        for w in state.puzzle.words:
-            pts = state.points_by_word.get(w.text, 0)
-            if pts > 0 or state.game_mode == "too easy":
-                word_display = w.text
-                letters_display = len(w.text)
+    for w in state.puzzle.words:
+        pts = state.points_by_word.get(w.text, 0)
+        if pts > 0 or state.game_mode == "too easy":
+            letters_display = len(w.text)
                 # Extra = total points for the word minus its length (bonus earned)
-                extra_pts = max(0, pts - letters_display)
-                row_html = (
-                    "<tr>"
-                    f"<td class=\"blue-background \"'>{word_display}</td>"
-                    f"<td class=\"blue-background \"'>{letters_display}</td>"
-                    f"<td class=\"blue-background \"'>{extra_pts}</td>"
-                    "</tr>"
-                )
-                rows_html.append(row_html)
-        total_row_html = (f"<tr class=\"blue-background\"><td colspan='3'><h3 class=\"bold-text\">Total: {state.score}</h3></td></tr>")
-        rows_html.append(total_row_html)
-        table_html = (
-            "<table class='shiny-border' style=\"background: linear-gradient(-45deg, #a1a1a1, #ffffff, #a1a1a1, #666666); width:100%; margin: 0 auto;border-collapse:separate; border-spacing:0;\">"
-            f"{''.join(rows_html)}"
-            "</table>"
-        )
-        st.markdown(f"<div class='bw-score-panel-container'>{table_html}</div>", unsafe_allow_html=True)
-        
-
+            extra_pts = max(0, pts - letters_display)
+            row_html = (
+                "<tr>"
+                f"<td class=\"blue-background \">{w.text}</td>"
+                f"<td class=\"blue-background \">{letters_display}</td>"
+                f"<td class=\"blue-background \">{extra_pts}</td>"
+                "</tr>"
+            )
+            rows_html.append(row_html)
+    total_row_html = (f"<tr class=\"blue-background\"><td colspan='3'><h3 class=\"bold-text\">Total: {state.score}</h3></td></tr>")
+    rows_html.append(total_row_html)
+    table_html = (
+        "<table class='shiny-border' style=\"background: linear-gradient(-45deg, #a1a1a1, #ffffff, #a1a1a1, #666666); width:100%; margin: 0 auto;border-collapse:separate; border-spacing:0;\">"
+        f"{''.join(rows_html)}"
+        "</table>"
+    )
+    st.markdown(f"<div class='bw-score-panel-container'>{table_html}</div>", unsafe_allow_html=True)
 
+# -------------------- Game Over Modal --------------------
 def _render_game_over(state: GameState):
-    # Prepare table rows for words
+    import streamlit.components.v1 as components
+
+    # Determine visibility
+    visible = bool(st.session_state.get("show_gameover_overlay", True)) and is_game_over(state)
+
+    # Build table body HTML for modal content
     word_rows = []
     for w in state.puzzle.words:
-        pts = state.points_by_word.get(w.text, 0)
+        pts = st.session_state.points_by_word.get(w.text, 0)
         extra_pts = max(0, pts - len(w.text))
         word_rows.append(
-            f"<tr><td class='blue-background'>{w.text}</td><td class='blue-background'>{len(w.text)}</td><td class='blue-background'>{extra_pts}</td></tr>"
+            f"<tr><td class=\"blue-background\">{w.text}</td><td class=\"blue-background\">{len(w.text)}</td><td class=\"blue-background\">{extra_pts}</td></tr>"
         )
     table_html = (
-        "<table class='shiny-border' style=\"background: linear-gradient(-45deg, #1d64c8, #ffffff, #1d64c8, #666666); width:100%; margin: 0 auto;border-collapse:separate; border-spacing:0;\">"
-        "<tr>"
-        "<th class='blue-background bold-text'>Word</th>"
-        "<th class='blue-background bold-text'>Letters</th>"
-        "<th class='blue-background bold-text'>Extra</th>"
-        "</tr>"
-        f"{''.join(word_rows)}"
-        f"<tr class='blue-background'><td colspan='3'><h3 class='bold-text'>Total: {state.score}</h3></td></tr>"
+        "<table class=\"table table-sm table-dark table-striped mb-0 shiny-border\" style=\"border-radius:0.75rem; overflow:hidden;\">"
+        "<thead><tr>"
+        "<th scope=\"col\">Word</th>"
+        "<th scope=\"col\">Letters</th>"
+        "<th scope=\"col\">Extra</th>"
+        "</tr></thead>"
+        f"<tbody>{''.join(word_rows)}"
+        f"<tr><td colspan=\"3\"><h5 class=\"m-2\">Total: {state.score}</h5></td></tr>"
+        "</tbody>"
         "</table>"
     )
-    # Overlay HTML with close link (forces navigation in same tab)
-    st.markdown(
-        f'''
-        <div id="bw-modal-overlay" style="position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:rgba(20,80,180,0.95);display:flex;flex-direction:column;justify-content:center;align-items:center;">
-            <div class="shiny-border" style="position:relative;background: linear-gradient(-45deg, #1d64c8, #ffffff, #1d64c8, #666666);padding:2rem 3rem;box-shadow:0 0 32px #1d64c8;min-width:340px;max-width:90vw; margin:8vh auto 5vh;">
-                <a href="?overlay=0" target="_self" title="Close" style="position:absolute;top:12px;right:12px;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.25);color:#fff;text-decoration:none;font-size:1.6rem;font-weight:700;">&times;</a>
-                <h1 style="color:#fff;font-size:2.5rem;margin-bottom:0.5rem;">Congratulations!</h1>
-                <h2 style="color:#fff;font-size:2rem;margin-bottom:1rem;">Game Over</h2>
-                <div style="font-size:1.5rem;color:#fff;margin-bottom:1rem;">Final score: <span style="color:#1ca41c;font-weight:800;">{state.score}</span></div>
-                <div style="font-size:1.2rem;color:#fff;margin-bottom:2rem;">Tier: <strong>{compute_tier(state.score)}</strong></div>
-                <div style="margin-bottom:2rem;">{table_html}</div>
-                <div style="color:#fff;opacity:0.7;font-size:1rem;margin-bottom:2rem;background:#1d64c8;text-align:center;">Thank you for playing BattleWords!</div>
-            </div>
-        </div>
-        ''', unsafe_allow_html=True)
-    st.markdown("<div style='height:32px'></div>", unsafe_allow_html=True)
-    if st.button("New Game", key="modal_new_game_btn", help="Start a new game", type="primary"):
-        _new_game()
-    st.markdown(versions_html(), unsafe_allow_html=True)
-    st.stop()
 
-
-def _sort_wordlist(filename):
-    import os
+    # Server-driven initial modal state for CSS class/style
+    modal_initial_class = "modal fade show" if visible else "modal fade"
+    modal_initial_style = "display:block;" if visible else ""
+
+    # Modal markup inside iframe with wrapper div for scoping
+    bootstrap_html = f"""
+    <style>
+    body {{
+        background-color: transparent !important;
+    }}
+      /* Ensure shiny-border is available inside iframe scope */
+      .shiny-border {{ position: relative; padding: 12px; 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-modal-iframe-root {{ position: fixed; inset: 0; background: rgba(29, 100, 200, 0.5); /* iframe page bg */ }}
+      /* Make modal background transparent */
+      .modal-content {{ background-color: transparent !important; box-shadow: none !important; width: calc(100% - 16px) !important;}}
+      .modal-backdrop{{ background-color: transparent !important; z-index:999 !important;}}
+      .bw-modal-iframe-root{{ z-index: 1000; }}
+      .hide {{ display: none !important; z-index: -1000 !important;}}
+
+      /* Center the modal content */
+      .modal-dialog {{
+        display: flex;
+        align-items: center;
+        min-height: calc(100% - 1rem);
+        margin: 0.5rem auto;
+        border-radius: 0.75rem;
+        max-width: 100%;
+      }}
+      .modal-title, .text-success {{
+        font-weight: bold;
+        font-size: 1.5rem;
+        text-align: center;
+        flex: auto;
+        filter:drop-shadow(1px 1px 2px #003);
+      }}
+      .modal-content {{
+        width: 100%;
+        max-width: 640px;
+        margin: 0 auto;
+        border-radius: 0.75rem;
+        overflow: hidden;
+      }}
+    </style>
+    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\">\n
+    <div class=\"bw-modal-iframe-root bw-bootstrap-scope\">\n
+      <!-- Remove static aria-hidden to avoid focus conflicts; let Bootstrap manage it -->
+      <div class=\"{modal_initial_class}\" id=\"bwGameOverModal\" tabindex=\"-1\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"bwGameOverTitle\" data-bs-backdrop=\"true\" style=\"{modal_initial_style}\">\n
+        <div class=\"modal-dialog modal-dialog-centered modal-lg\">\n          <div class=\"modal-content\">\n
+            <div class=\"modal-body p-0\">\n              <div class=\"shiny-border\" style=\"border-radius:1rem; box-shadow:0 0 32px #1d64c8; background: linear-gradient(-45deg, #1d64c8, #ffffff, #1d64c8, #666666); color:#fff;\">\n                <div class=\"d-flex justify-content-between align-items-center px-3 pt-3\">\n                  <h5 class=\"modal-title m-0\" id=\"bwGameOverTitle\">Game Over</h5>\n                  <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><span class=\"visually-hidden\">Close</span></button>\n                </div>\n                <div class=\"p-3 pt-2\">\n                  <div class=\"mb-2\">Congratulations!</div>\n                  <div class=\"mb-2\">Final score: <strong class=\"text-success\">{state.score}</strong></div>\n                  <div class=\"mb-2\">Tier: <strong>{compute_tier(state.score)}</strong></div>\n                  <div class=\"mb-2\">Game Mode: <strong>{state.game_mode}</strong></div>\n                  <div class=\"mb-2\">Wordlist: <strong>{st.session_state.get('selected_wordlist', '')}</strong></div>\n                  <div class=\"mb-0\">{table_html}</div>\n                </div>\n              </div>\n            </div>\n
+          </div>\n        </div>\n
+      </div>\n
+    </div>\n
+    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js\"></script>\n
+    <script>
+    // Human-readable, commented JavaScript to control the Bootstrap modal inside the iframe
+    (function() {{
+      // Acquire the modal element by id within this iframe
+      var modalEl = document.getElementById('bwGameOverModal');
+      if (!modalEl) {{
+        console.warn('[BW Modal] #bwGameOverModal not found');
+        return;
+      }}
+
+      // Create or get a Bootstrap Modal controller for this element
+      var m = bootstrap.Modal.getOrCreateInstance(modalEl, {{
+        backdrop: true,
+        keyboard: true
+      }});
+
+      // Server-driven visibility state (computed in Python)
+      var shouldShow = {str(visible).lower()};
+
+      // Show or hide based on server state
+      if (shouldShow) {{
+        // Ensure visible and let Bootstrap handle classes/backdrop
+        modalEl.style.display = 'block';
+        console.debug('[BW Modal] Showing modal');
+        try {{ m.show(); }} catch(e) {{ console.warn('[BW Modal] show() failed', e); }}
+      }} else {{
+        // Hide if currently shown
+        if (modalEl.classList.contains('show')) {{
+          console.debug('[BW Modal] Hiding modal');
+          try {{ m.hide(); }} catch(e) {{ console.warn('[BW Modal] hide() failed', e); }}
+        }}
+        // Reset styles after hide
+        modalEl.classList.remove('show');
+        modalEl.style.display = '';
+      }}
+
+      // Helper to notify the parent page (Streamlit) to toggle wrapper around this iframe
+      function notifyParent(visible) {{
+        try {{
+          window.parent.postMessage({{
+            type: 'bw-bootstrap-modal-visibility',
+            visible: visible
+          }}, '*');
+        }} catch (e) {{
+          console.warn('[BW Modal] notifyParent failed', e);
+        }}
+      }}
+
+      // Send initial visibility to parent
+      notifyParent(shouldShow);
+
+      // On show, remove any aria-hidden that might conflict and set focus to close button
+      modalEl.addEventListener('show.bs.modal', function() {{
+        try {{ modalEl.removeAttribute('aria-hidden'); }} catch (e) {{}}
+      }});
+
+      modalEl.addEventListener('shown.bs.modal', function() {{
+        try {{
+          var btn = modalEl.querySelector('.btn-close');
+          if (btn) btn.focus();
+        }} catch (e) {{}}
+        notifyParent(true);
+      }});
+
+      // Utility to clear focus to avoid aria-hidden focus conflicts
+      function blurActive() {{
+        try {{
+          if (document.activeElement) document.activeElement.blur();
+        }} catch (e) {{}}
+      }}
+
+      // On hide start, clear focus
+      modalEl.addEventListener('hide.bs.modal', function() {{
+        blurActive();
+      }});
+
+      // On fully hidden, let Streamlit know and parent wrapper update
+      function closeActions() {{
+        try {{
+          blurActive();
+          window.parent.postMessage({{
+            type: 'streamlit:setComponentValue',
+            key: 'show_gameover_overlay',
+            value: false
+          }}, '*');
+        }} catch (e) {{}}
+        notifyParent(false);
+      }}
+      modalEl.addEventListener('hidden.bs.modal', closeActions);
+
+      // Close if backdrop clicked (click outside modal content)
+      modalEl.addEventListener('click', function(ev) {{
+        if (ev.target === modalEl) {{
+          try {{ m.hide(); }} catch (e) {{}}
+        }}
+      }});
+
+      // Note: Streamlit components use an iframe sandbox that may include allow-scripts and allow-same-origin.
+      // Browsers may warn that this combination allows escape of sandboxing; this is expected for Streamlit components.
+    }})();
+    </script>\n
+    """
+
+    # Mount the iframe; keep zero height when hidden, parent bridge will hide wrapper too
+    components.html(bootstrap_html, height=(720 if visible else 0), scrolling=False, width=720)
+
+    # Ensure parent bridge exists to control wrapper visibility/position
+    _inject_parent_modal_bridge()
+
+def _sort_wordlist(filename):    
     import time  # Add this import
 
     WORDS_DIR = os.path.join(os.path.dirname(__file__), "words")
@@ -1045,7 +1246,7 @@ def run_app():
 
     # Anchor to target the main two-column layout for mobile reversal
     st.markdown('<div id="bw-main-anchor"></div>', unsafe_allow_html=True)
-    left, right = st.columns([2, 2], gap="medium")
+    left, right = st.columns([3, 2], gap="medium")
     with right:
         _render_radar(state.puzzle, size=state.grid_size, r_max=0.8, max_frames=25, sinusoid_expand=True, stagger_radar=False, show_ticks=st.session_state.get("show_grid_ticks", False))    
         one, two = st.columns([1, 3], gap="medium")