battlewords/ui.py

from __future__ import annotations
from . import __version__ as version
from typing import Iterable, Tuple, Optional
import streamlit as st
import streamlit.components.v1 as components

import matplotlib.pyplot as plt
from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
from matplotlib import colors as mcolors
import tempfile
import os
from PIL import Image
import numpy as np
import time
from datetime import datetime

from .generator import generate_puzzle, sort_word_file
from .logic import build_letter_map, reveal_cell, guess_word, is_game_over, compute_tier, auto_mark_completed_words, hidden_word_display
from .models import Coord, GameState, Puzzle
from .word_loader import get_wordlist_files, load_word_list  # use loader directly
from .version_info import versions_html  # version info footer
from .audio import (
    _get_music_dir,
    get_audio_tracks,
    _load_audio_data_url,
    _mount_background_audio,
    _inject_audio_control_sync,
    play_sound_effect,
)

st.set_page_config(initial_sidebar_state="collapsed")

CoordLike = Tuple[int, int]

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"):
        return int(c.x), int(c.y)
    if isinstance(c, (tuple, list)) and len(c) == 2:
        return int(c[0]), int(c[1])
    raise TypeError(f"Unsupported Coord type: {type(c)!r}")


def _normalize_revealed(revealed: Iterable) -> set[CoordLike]:
    return {(_coord_to_xy(c) if not (isinstance(c, tuple) and len(c) == 2 and isinstance(c[0], int)) else c) for c in revealed}


def _build_letter_map(puzzle) -> dict[CoordLike, str]:
    letters: dict[CoordLike, str] = {}
    for w in getattr(puzzle, "words", []):
        text = getattr(w, "text", "")
        cells = getattr(w, "cells", [])
        for i, c in enumerate(cells):
            xy = _coord_to_xy(c)
            if 0 <= i < len(text):
                letters[xy] = text[i]
    return letters

ocean_background_css = """
<style>
.stApp {
    margin: 0;
    height: 100vh;
    background: linear-gradient(
        45deg,
        rgba(29, 100, 200, 0.6) 0%,
        rgba(50, 120, 220, 0.8) 25%,
        rgba(20, 80, 180, 0.95) 50%,
        rgba(50, 120, 220, 0.8) 75%,
        rgba(29, 100, 200, 0.6) 100%
    );
    background-size: 200% 200%;
    animation: oceanFlow 12s ease-in-out infinite;
    overflow: hidden;
}

/* Animation for rolling water effect */
@keyframes oceanFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Ensure Streamlit content is visible above the background */
.stApp > div {
    position: relative;
    z-index: 1;
}
</style>
"""

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: 0rem !important;
                margin-top: 0rem !important;
                font-size: 2rem !important; /* Title */
                line-height: 1.1 !important;
           }
          /* 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: 1 / 1;
            line-height: 1.6;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #3a3a3a;
            border-radius: 0;
            font-weight: 700;
            user-select: none;
            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 */
          }
          /* 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; }

          /* Final score style */
          .bw-final-score { color: #1ca41c !important; font-weight: 800; }

          /* 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: 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.15rem !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; }

          }
          div[data-testid="stElementToolbarButtonContainer"], button[data-testid="stBaseButton-elementToolbar"], button[data-testid="stBaseButton-elementToolbar"]:hover {
               display: none;
          }

          /* 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); }
          }

          .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; }
          .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"] {
              max-height: 100vh;
              overflow-y: auto;
              overflow-x: hidden;
              scrollbar-width: thin;
              scrollbar-color: transparent transparent;
          }

         .st-emotion-cache-wp60of {
             width: 720px;
             position: absolute;     
             max-width:100%;
          }
         .stImage { max-width:300px;}
         #text_input_3,#text_input_1 {
          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
    # --- Preserve music settings ---

    # Ensure a default selection exists before creating the puzzle
    files = get_wordlist_files()
    if "selected_wordlist" not in st.session_state and files:
        st.session_state.selected_wordlist = "classic.txt"
    if "game_mode" not in st.session_state:
        st.session_state.game_mode = "classic"

    words = load_word_list(st.session_state.get("selected_wordlist"))
    puzzle = generate_puzzle(grid_size=12, words_by_len=words)

    st.session_state.puzzle = puzzle
    st.session_state.grid_size = 12
    st.session_state.revealed = set()
    st.session_state.guessed = set()
    st.session_state.score = 0
    st.session_state.last_action = "Welcome to Battlewords! Reveal a cell to begin."
    st.session_state.can_guess = False
    st.session_state.points_by_word = {}
    st.session_state.letter_map = build_letter_map(puzzle)
    st.session_state.initialized = True
    st.session_state.radar_gif_path = None
    st.session_state.start_time = datetime.now()  # Set timer on first game
    st.session_state.end_time = None
    # Ensure game_mode is set
    if "game_mode" not in st.session_state:
        st.session_state.game_mode = "classic"
    # Initialize incorrect guesses tracking
    if "incorrect_guesses" not in st.session_state:
        st.session_state.incorrect_guesses = []
    # Initialize show_incorrect_guesses to True by default
    if "show_incorrect_guesses" not in st.session_state:
        st.session_state.show_incorrect_guesses = True


def _new_game() -> None:
    selected = st.session_state.get("selected_wordlist")
    mode = st.session_state.get("game_mode")
    show_grid_ticks = st.session_state.get("show_grid_ticks", False)
    spacer = st.session_state.get("spacer", 1)
    show_incorrect_guesses = st.session_state.get("show_incorrect_guesses", False)
    # --- 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", 15)
    st.session_state.clear()
    if selected:
        st.session_state.selected_wordlist = selected
    if mode:
        st.session_state.game_mode = mode
    st.session_state.show_grid_ticks = show_grid_ticks
    st.session_state.spacer = spacer
    st.session_state.show_incorrect_guesses = show_incorrect_guesses
    # --- Restore music settings ---
    st.session_state.music_enabled = music_enabled
    if music_track_path:
        st.session_state.music_track_path = music_track_path
    st.session_state.music_volume = music_volume
    st.session_state.radar_gif_path = None
    st.session_state.radar_gif_signature = None
    st.session_state.start_time = datetime.now()  # Reset timer on new game
    st.session_state.end_time = None
    st.session_state.incorrect_guesses = []  # Clear incorrect guesses for new game
    _init_session()


def _to_state() -> GameState:
    return GameState(
        grid_size=st.session_state.grid_size,
        puzzle=st.session_state.puzzle,
        revealed=st.session_state.revealed,
        guessed=st.session_state.guessed,
        score=st.session_state.score,
        last_action=st.session_state.last_action,
        can_guess=st.session_state.can_guess,
        game_mode=st.session_state.get("game_mode", "classic"),
        points_by_word=st.session_state.points_by_word,
        start_time=st.session_state.get("start_time"),
        end_time=st.session_state.get("end_time"),
    )


def _sync_back(state: GameState) -> None:
    st.session_state.revealed = state.revealed
    st.session_state.guessed = state.guessed
    st.session_state.score = state.score
    st.session_state.last_action = state.last_action
    st.session_state.can_guess = state.can_guess
    st.session_state.points_by_word = state.points_by_word


def _render_header():
    st.title(f"Battlewords v{version}")
    st.subheader("Reveal letters in cells, then guess the words!")
    # st.markdown(
    #     "- Grid is 12×12 with 6 words (two 4-letter, two 5-letter, two 6-letter).\n"
    #     "- After each reveal, you may submit one word guess below.\n"
    #     "- Scoring: length + unrevealed letters of that word at guess time.\n"
    #     "- Score Board: radar of last letter of word, score and status.\n"
    #     "- Words do not overlap, but may be touching.")
    inject_styles()

    st.markdown(
    """
    <style>
    /* Compact title and subheader */

    </style>
    """,
    unsafe_allow_html=True,
)
def _render_sidebar():
    with st.sidebar:
        st.header("SETTINGS")        

        st.header("Game Mode")
        game_modes = ["classic", "too easy"]
        default_mode = "classic"
        if "game_mode" not in st.session_state:
            st.session_state.game_mode = default_mode
        current_mode = st.session_state.game_mode
        st.selectbox(
            "Select game mode",
            options=game_modes,
            index=game_modes.index(current_mode) if current_mode in game_modes else 0,
            key="game_mode",
            on_change=_new_game,
        )

        st.header("Wordlist Controls")
        wordlist_files = get_wordlist_files()

        if wordlist_files:
            # Ensure current selection is valid
            if st.session_state.get("selected_wordlist") not in wordlist_files:
                st.session_state.selected_wordlist = wordlist_files[0]

            # Use filenames as options, show without extension
            current_index = wordlist_files.index(st.session_state.selected_wordlist)
            st.selectbox(
                "Select list",
                options=wordlist_files,
                index=current_index,
                format_func=lambda f: f.rsplit(".", 1)[0],
                key="selected_wordlist",
                on_change=_new_game,  # immediately start a new game with the selected list
            )

            if st.button("Sort Wordlist", width=125, key="sort_wordlist_btn"):
                _sort_wordlist(st.session_state.selected_wordlist)
        else:
            st.info("No word lists found in words/ directory. Using built-in fallback.")
        
        # Add Show Grid ticks option
        if "show_grid_ticks" not in st.session_state:
            st.session_state.show_grid_ticks = False
        st.checkbox("Show Grid ticks", value=st.session_state.show_grid_ticks, key="show_grid_ticks")
        
        # Add Spacer option
        spacer_options = [0, 1, 2]
        if "spacer" not in st.session_state:
            st.session_state.spacer = 1
        st.selectbox(
            "Spacer (space between words)",
            options=spacer_options,
            index=spacer_options.index(st.session_state.spacer),
            key="spacer"
        )

        # Add Show Incorrect Guesses option - now enabled by default
        if "show_incorrect_guesses" not in st.session_state:
            st.session_state.show_incorrect_guesses = True
        st.checkbox("Show incorrect guesses", value=st.session_state.show_incorrect_guesses, key="show_incorrect_guesses")

        # Audio settings
        st.header("Audio")
        tracks = get_audio_tracks()
        # Show how many audio files were found
        st.caption(f"{len(tracks)} audio file{'s' if len(tracks) != 1 else ''} found in battlewords/assets/audio/music")

        if "music_enabled" not in st.session_state:
            st.session_state.music_enabled = False
        if "music_volume" not in st.session_state:
            st.session_state.music_volume = 15

        enabled = st.checkbox("Enable music", value=st.session_state.music_enabled, key="music_enabled")

        # Always show volume slider; disable when music disabled or no tracks
        st.slider(
            "Volume",
            0,
            100,
            value=int(st.session_state.music_volume),
            step=1,
            key="music_volume",
            disabled=not (enabled and bool(tracks)),
        )

        selected_path = None
        if tracks:
            options = [p for _, p in tracks]
            # Default to first track if none chosen yet
            if "music_track_path" not in st.session_state or st.session_state.music_track_path not in options:
                st.session_state.music_track_path = options[0]

            def _fmt(p: str) -> str:
                # Find friendly label for path
                for name, path in tracks:
                    if path == p:
                        return name
                return os.path.splitext(os.path.basename(p))[0]

            selected_path = st.selectbox(
                "Track",
                options=options,
                index=options.index(st.session_state.music_track_path),
                format_func=_fmt,
                key="music_track_path",
                disabled=not enabled,
            )
            src_url = _load_audio_data_url(selected_path) if enabled else None
            _mount_background_audio(enabled, src_url, (st.session_state.music_volume or 0) / 100)
        else:
            st.caption("Place .mp3 files in battlewords/assets/audio/music to enable music.")
            _mount_background_audio(False, None, 0.0)

        _inject_audio_control_sync()
        st.markdown(versions_html(), unsafe_allow_html=True)

def get_scope_image(uid: str, size=4, bgcolor="none", scope_color="green", img_name="scope_blue.png"):
    """
    Return a per-puzzle pre-rendered scope image by UID.
    1. Check for cached/generated image in temp dir.
    2. If not found, use assets/scope.gif.
    3. If neither exists, generate and save a new image.
    """
    base_dir = os.path.join(tempfile.gettempdir(), "battlewords_scopes")
    os.makedirs(base_dir, exist_ok=True)
    scope_path = os.path.join(base_dir, f"scope_{uid}.png")

    # 1. Use cached/generated image if it exists
    if os.path.exists(scope_path):
        return Image.open(scope_path)

    # 2. Fallback to assets/scope.gif if available
    assets_scope_path = os.path.join(os.path.dirname(__file__), "assets", img_name)
    if os.path.exists(assets_scope_path):
        return Image.open(assets_scope_path)

    # 3. Otherwise, generate and save a new image
    fig, ax = _create_radar_scope(size=size, bgcolor=bgcolor, scope_color=scope_color)
    imgscope = fig_to_pil_rgba(fig)
    imgscope.save(scope_path)
    plt.close(fig)
    return imgscope

def _create_radar_scope(size=4, bgcolor="none", scope_color="green"):
    fig, ax = plt.subplots(figsize=(size, size), dpi=144)
    ax.set_facecolor(bgcolor)
    fig.patch.set_alpha(0.5)
    ax.set_zorder(0)
    
    
    # Hide decorations but keep patch/frame on
    for spine in ax.spines.values():
        spine.set_visible(False)
    ax.set_xticks([])
    ax.set_yticks([])
    
    # Center lines
    ax.axhline(0, color=scope_color, alpha=0.8, zorder=1)
    ax.axvline(0, color=scope_color, alpha=0.8, zorder=1)
    # ax.set_xticks(range(1, size + 1))
    # ax.set_yticks(range(1, size + 1))
    
    # Circles at 25% and 50% radius
    for radius in [0.33, 0.66, 1.0]:
        circle = plt.Circle((0, 0), radius, fill=False, color=scope_color, alpha=0.8, zorder=1)
        ax.add_patch(circle)
    
    # Radial lines at 0, 30, 45, 90 degrees
    angles = [0, 30, 60, 120, 150, 210, 240, 300, 330]
    for angle in angles:
        rad = np.deg2rad(angle)
        x = np.cos(rad)
        y = np.sin(rad)
        ax.plot([0, x], [0, y], color=scope_color, alpha=0.5, zorder=1)
    
    # Set limits and remove axes
    ax.set_xlim(-0.5, 0.5)
    ax.set_ylim(-0.5, 0.5)
    ax.set_aspect('equal', adjustable='box')
    ax.axis('off')
    
    return fig, ax

def _render_radar(puzzle: Puzzle, size: int, r_max: float = 0.8, max_frames: int = 30, sinusoid_expand: bool = True, stagger_radar: bool = False, show_ticks: bool = True):
    import numpy as np
    import matplotlib.pyplot as plt
    from matplotlib.animation import FuncAnimation, PillowWriter
    from matplotlib.patches import Circle
    from matplotlib import colors as mcolors
    import tempfile
    import os

    xs = np.array([c.y + 1 for c in puzzle.radar])
    ys = np.array([c.x + 1 for c in puzzle.radar])
    n_points = len(xs)

    r_min = 0.15
    min_x = min(xs - 0.5) - r_max
    max_x = max(xs - 0.5) + r_max
    min_y = min(ys - 0.5) - r_max  # Note: ys are inverted in plot
    max_y = max(ys - 0.5) + r_max
    ring_linewidth = 3

    rgba_labels = mcolors.to_rgba("#FFFFFF", 0.7)
    rgba_ticks  = mcolors.to_rgba("#FFFFFF", 0.66) 
    bgcolor="#4b7bc4"
    scope_size=3
    scope_color="#ffffff"

    # Determine which rings correspond to already-guessed words (hide them)
    guessed_words = set(st.session_state.get("guessed", set()))
    guessed_by_index = [w.text in guessed_words for w in puzzle.words]

    # GIF cache signature: puzzle uid + guessed words snapshot
    gif_signature = (getattr(puzzle, "uid", None), tuple(sorted(guessed_words)))

    # Use per-puzzle scope image keyed by puzzle.uid
    imgscope = get_scope_image(uid=puzzle.uid, size=scope_size, bgcolor=bgcolor, scope_color=scope_color)

    # Build figure with explicit axes occupying full canvas to avoid browser-specific padding
    fig = plt.figure(figsize=(scope_size, scope_size), dpi=144)
    # Background gradient covering full figure
    bg_ax = fig.add_axes([0, 0, 1, 1], zorder=0)
    fig.canvas.draw()  # ensure size
    fig_w, fig_h = [int(v) for v in fig.canvas.get_width_height()]

    def _make_linear_gradient(width: int, height: int, angle_deg: float,
                              colors_hex: list[str], stops: list[float]) -> np.ndarray:
        yy, xx = np.meshgrid(np.linspace(0, 1, height), np.linspace(0, 1, width), indexing='ij')
        theta = np.deg2rad(angle_deg)
        proj = np.cos(theta) * xx + np.sin(theta) * yy
        corners = np.array([[0, 0], [1, 0], [0, 1], [1, 1]], dtype=float)
        pc = np.cos(theta) * corners[:, 0] + np.sin(theta) * corners[:, 1]
        proj = (proj - pc.min()) / (pc.max() - pc.min() + 1e-12)
        proj = np.clip(proj, 0.0, 1.0)

        stop_arr = np.asarray(stops, dtype=float)
        cols = np.asarray([mcolors.to_rgb(c) for c in colors_hex], dtype=float)

        j = np.clip(np.searchsorted(stop_arr, proj, side='right') - 1, 0, len(stop_arr) - 2)
        a = stop_arr[j]
        b = stop_arr[j + 1]
        w = ((proj - a) / (b - a + 1e-12))[..., None]
        c0 = cols[j]
        c1 = cols[j + 1]
        img = (1.0 - w) * c0 + w * c1
        return img

    grad_img = _make_linear_gradient(
        width=fig_w,
        height=fig_h,
        angle_deg=-45.0,
        colors_hex=['#a1a1a1', '#ffffff', '#a1a1a1', '#666666'],
        stops=[0.0, 1.0 / 3.0, 2.0 / 3.0, 1.0],
    )
    bg_ax.imshow(grad_img, aspect='auto', interpolation='bilinear')
    bg_ax.axis('off')

    # Decorative scope image as overlay (does not affect coordinates)
    scope_ax = fig.add_axes([0, 0, 1, 1], zorder=1)
    scope_ax.imshow(imgscope, aspect='auto', interpolation='lanczos')
    scope_ax.axis('off')

    # Main axes for rings and ticks with fixed limits to stabilize layout across browsers
    ax = fig.add_axes([0, 0, 1, 1], zorder=2)
    ax.set_facecolor('none')
    ax.set_xlim(0.5, size + 0.5)
    ax.set_ylim(size + 0.5, 0.5)  # Inverted for grid coordinates

    if show_ticks:
        ax.set_xticks(range(1, size + 1))
        ax.set_yticks(range(1, size + 1))
        ax.tick_params(axis="both", which="both", labelcolor=rgba_labels)
        ax.tick_params(axis="both", which="both", colors=rgba_ticks)
    else:
        ax.set_xticks([])
        ax.set_yticks([])

    ax.set_aspect('equal', adjustable='box')
    for spine in ax.spines.values():
        spine.set_visible(False)

    # Build rings centered on exact cell centers (integer coords)
    rings: list[Circle] = []
    for x, y in zip(xs, ys):
        ring = Circle((x, y), radius=r_min, fill=False, edgecolor='#9ceffe', linewidth=ring_linewidth, alpha=1.0, zorder=3)
        ax.add_patch(ring)
        rings.append(ring)

    def update(frame):
        # Hide rings for guessed words
        for idx, ring in enumerate(rings):
            ring.set_visible(not guessed_by_index[idx])
        if sinusoid_expand:
            phase = 2 * np.pi * frame / max_frames
            r = r_min + (r_max - r_min) * (0.5 + 0.5 * np.sin(phase))
            alpha = 0.5 + 0.5 * np.cos(phase)
            for idx, ring in enumerate(rings):
                if not guessed_by_index[idx]:
                    ring.set_radius(r)
                    ring.set_alpha(alpha)
        else:
            base_t = (frame % max_frames) / max_frames
            offset = max(1, max_frames // max(1, n_points)) if stagger_radar else 0
            for idx, ring in enumerate(rings):
                if guessed_by_index[idx]:
                    continue
                t_i = ((frame + idx * offset) % max_frames) / max_frames if stagger_radar else base_t
                r_i = r_min + (r_max - r_min) * t_i
                alpha_i = 1.0 - t_i
                ring.set_radius(r_i)
                ring.set_alpha(alpha_i)
        return rings

    # Use persistent GIF if available and matches current signature
    cached_path = st.session_state.get("radar_gif_path")
    cached_sig = st.session_state.get("radar_gif_signature")
    if cached_path and os.path.exists(cached_path) and cached_sig == gif_signature:
        with open(cached_path, "rb") as f:
            gif_bytes = f.read()
        st.image(gif_bytes, width='stretch',)
        plt.close(fig)
        return

    # Otherwise, generate and persist
    with tempfile.NamedTemporaryFile(suffix=".gif", delete=False) as tmpfile:
        ani = FuncAnimation(fig, update, frames=max_frames, interval=50, blit=True)
        ani.save(tmpfile.name, writer=PillowWriter(fps=20))
        plt.close(fig)
        tmpfile.seek(0)
        gif_bytes = tmpfile.read()
        st.session_state.radar_gif_path = tmpfile.name  # Save path for reuse
        st.session_state.radar_gif_signature = gif_signature  # Save signature to detect changes
    st.image(gif_bytes, width='stretch')

def _render_grid(state: GameState, letter_map, show_grid_ticks: bool = True):
    size = state.grid_size
    clicked: Optional[Coord] = None

    # Determine if the game is over to reveal all remaining tiles as blanks
    game_over = is_game_over(state)

    # Inject CSS for grid lines
    st.markdown(
        """
        <style>
        div[data-testid="column"] {
            padding: 0 !important;
        }
        button[data-testid="stButton"] {
            width: 32px !important;
            height: 32px !important;
            min-width: 32px !important;
            min-height: 32px !important;
            padding: 0 !important;
            margin: 0 !important;
            border: 1px solid #1d64c8 !important;
            border-radius: 0 !important;
            background: #1d64c8 !important;
            color: #ffffff !important;
            font-weight: bold;
            font-size: 1.4rem;
        }
        /* Further tighten vertical spacing between rows inside the grid container */
        .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] {
            margin: 2px 0 !important;
        }
        .st-emotion-cache-14d5v98 {
            position:relative;
        }
        .st-emotion-cache-7czcpc > img {
            border-radius: 1.25rem;
            max-width:300px !important;
            margin: 0 auto !important;
        }
        .st-emotion-cache-ig7yu6 {
            width: calc(30% - 1rem);
            flex: 1 1 calc(20% - 1rem);
        }
        @media (max-width: 640px) {
            .st-emotion-cache-1s1xxaz {
                min-width: calc(33% - 1.5rem);
            }
            .st-emotion-cache-ig7yu6 {
                min-width: calc(30% - 1.5rem);
            }
            .st-emotion-cache-15oaysa {
                min-width: calc(8.33333% - 1rem);
            }
        }
        </style>
        """,
        unsafe_allow_html=True,
    )

    grid_container = st.container()
    with grid_container:        
        for r in range(size):
            st.markdown('<div class="bw-grid-row-anchor"></div>', unsafe_allow_html=True)
            cols = st.columns(size, gap="small")
            for c in range(size):
                coord = Coord(r, c)
                # Treat all cells as revealed once the game is over
                revealed = (coord in state.revealed) or game_over
                label = letter_map.get(coord, " ") if revealed else " "

                is_completed_cell = False
                if revealed:
                    for w in state.puzzle.words:
                        if w.text in state.guessed and coord in w.cells:
                            is_completed_cell = True
                            break

                key = f"cell_{r}_{c}"
                tooltip = f"({r+1},{c+1})" if show_grid_ticks else ""

                if is_completed_cell:
                    safe_label = (label or " ")
                    if show_grid_ticks:
                        cols[c].markdown(
                            f'<div class="bw-cell bw-cell-complete" title="{tooltip}">{safe_label}</div>',
                            unsafe_allow_html=True,
                        )
                    else:
                        cols[c].markdown(
                            f'<div class="bw-cell bw-cell-complete">{safe_label}</div>',
                            unsafe_allow_html=True,
                        )
                elif revealed:
                    safe_label = (label or " ")
                    has_letter = safe_label.strip() != ""
                    cell_class = "letter" if has_letter else "empty"
                    display = safe_label if has_letter else "&nbsp;"
                    if show_grid_ticks:
                        cols[c].markdown(
                            f'<div class="bw-cell {cell_class}" title="{tooltip}">{display}</div>',
                            unsafe_allow_html=True,
                        )
                    else:
                        cols[c].markdown(
                            f'<div class="bw-cell {cell_class}">{display}</div>',
                            unsafe_allow_html=True,
                        )
                else:
                    # Unrevealed: render a button to allow click/reveal with tooltip
                    if show_grid_ticks:
                        if cols[c].button(" ", key=key, help=tooltip):
                            clicked = coord
                    else:
                        if cols[c].button(" ", key=key):
                            clicked = coord
        
    if clicked is not None:
        reveal_cell(state, letter_map, clicked)
        # Auto-mark and award base points for any fully revealed words
        if auto_mark_completed_words(state):
            # Invalidate radar GIF cache to hide completed rings
            st.session_state.radar_gif_path = None
            st.session_state.radar_gif_signature = None
        st.session_state.letter_map = build_letter_map(st.session_state.puzzle)
        _sync_back(state)

        # Play sound effect based on hit or miss
        action = (state.last_action or "").strip()
        if action.startswith("Revealed '"):
            play_sound_effect("hit", volume=0.5)
        elif action.startswith("Revealed empty"):
            play_sound_effect("miss", volume=0.5)

        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
    action = (state.last_action or "").strip()
    is_hit = action.startswith("Revealed '")
    is_miss = action.startswith("Revealed empty")

    # Render as a circular radio group, side-by-side
    st.markdown(
        f"""
        <div class=\"bw-radio-group\" role=\"radiogroup\" aria-label=\"Hit or Miss\">\n          <div class=\"bw-radio-item\">\n            <div class=\"bw-radio-circle {'active hit' if is_hit else ''}\" role=\"radio\" aria-checked=\"{'true' if is_hit else 'false'}\" aria-label=\"Hit\">\n              <span class=\"dot\"></span>\n            </div>\n            <div class=\"bw-radio-caption\">HIT</div>\n          </div>\n          <div class=\"bw-radio-item\">\n            <div class=\"bw-radio-circle {'active miss' if is_miss else ''}\" role=\"radio\" aria-checked=\"{'true' if is_miss else 'false'}\" aria-label=\"Miss\">\n              <span class=\"dot\"></span>\n            </div>\n            <div class=\"bw-radio-caption\">MISS</div>\n          </div>\n        </div>
        """,
        unsafe_allow_html=True,
    )


def _render_correct_try_again(state: GameState):
    # Determine last guess outcome from last_action string
    action = (state.last_action or "").strip()
    is_correct = action.startswith("Correct!")
    is_try_again = action.startswith("Try Again!")

    st.markdown(
        """
        <style>
        .bw-radio-caption.inactive { display: none !important; }
        </style>
        """,
        unsafe_allow_html=True,
    )

    st.markdown(
        f"""
        <div class=\"bw-radio-group\" role=\"radiogroup\" aria-label=\"Correct or Try Again\">\n          <div class=\"bw-radio-item\">\n            <div class=\"bw-radio-circle {'active hit' if is_correct else ''}\" role=\"radio\" aria-checked=\"{'true' if is_correct else 'false'}\" aria-label=\"Correct\">\n              <span class=\"dot\"></span>\n            </div>\n            <div class=\"bw-radio-caption{' inactive' if not is_correct else ''}\">CORRECT!</div>\n          </div>\n          <div class=\"bw-radio-item\">\n            <div class=\"bw-radio-circle {'active miss' if is_try_again else ''}\" role=\"radio\" aria-checked=\"{'true' if is_try_again else 'false'}\" aria-label=\"Try Again\">\n              <span class=\"dot\"></span>\n            </div>\n            <div class=\"bw-radio-caption{' inactive' if not is_try_again else ''}\">TRY AGAIN</div>\n          </div>\n        </div>
        """,
        unsafe_allow_html=True,
    )


def _render_guess_form(state: GameState):    
    # Initialize incorrect guesses list in session state (safety check)
    if "incorrect_guesses" not in st.session_state:
        st.session_state.incorrect_guesses = []

    # Prepare tooltip text for native browser tooltip
    recent_incorrect = st.session_state.incorrect_guesses[-10:]
    if recent_incorrect:
        tooltip_text = "Recent incorrect guesses:\n" + "\n".join(recent_incorrect)
    else:
        tooltip_text = "No incorrect guesses yet"
    
    # Add CSS for the incorrect guesses display
    st.markdown(
        """
        <style>
        .bw-incorrect-guesses {
            font-size: 0.7rem;
            color: #fff;
            margin-top: -10px;
            # padding: 2px 4px;
            # background: rgba(255, 255, 255, 0.05);
            # border-radius: 10px;
            # font-style: italic;
        }
        </style>
        """,
        unsafe_allow_html=True,
    )
    
    with st.form("guess_form", width=300, clear_on_submit=True):
        col1, col2 = st.columns([2, 1], vertical_alignment="bottom")
        with col1:
            guess_text = st.text_input(
                "Your Guess", 
                value="", 
                max_chars=10, 
                width=200, 
                key="guess_input"                
            )
        with col2:
            submitted = st.form_submit_button("OK", disabled=not state.can_guess, width=100, key="guess_submit")
        
        # Show compact list below input if setting is enabled
        if st.session_state.get("show_incorrect_guesses", False) and recent_incorrect:
            st.markdown(
                f'<div class="bw-incorrect-guesses" title="{tooltip_text}">Recent incorrect guesses:</div>',
                unsafe_allow_html=True,
            )
        
        if submitted:
            correct, _ = guess_word(state, guess_text)
            _sync_back(state)
            # Invalidate radar GIF cache if guess changed the set of guessed words
            if correct:
                st.session_state.radar_gif_path = None
                st.session_state.radar_gif_signature = None
                play_sound_effect("correct_guess", volume=0.6)
            else:
                # Update incorrect guesses list - keep only last 10
                st.session_state.incorrect_guesses.append(guess_text)
                st.session_state.incorrect_guesses = st.session_state.incorrect_guesses[-10:]
                play_sound_effect("incorrect_guess", volume=0.5)
            st.rerun()


# -------------------- Score Panel --------------------
def _render_score_panel(state: GameState):
    # 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)
        letters_display = len(w.text)
        if pts > 0 or state.game_mode == "too easy":            
            # 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 \">{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)
        else:
            # Hide unguessed words in classic mode
            row_html = (
                "<tr>"
                f"<td class=\"blue-background \">{hidden_word_display(letters_display)}</td>"
                f"<td class=\"blue-background \">{letters_display}</td>"
                f"<td class=\"blue-background \">?</td>"
                "</tr>"
            )
            rows_html.append(row_html)

    # Initial time shown from server; JS will tick client-side
    now = datetime.now()
    start = state.start_time or now
    end = state.end_time or (now if is_game_over(state) else None)
    elapsed = (end or now) - start
    mins, secs = divmod(int(elapsed.total_seconds()), 60)
    timer_str = f"{mins:02d}:{secs:02d}"

    span_id = f"bw-timer-{getattr(state.puzzle, 'uid', 'default')}"
    timer_span_html = f"<span id=\"{span_id}\" style='font-size:1rem; color:#ffffff;'>&nbsp;⏱ {timer_str}</span>"

    total_row_html = (
        f"<tr class=\"blue-background\"><td colspan='3'>"
        f"<h3 class=\"bold-text\">Total: {state.score} {timer_span_html}</h3>"
        f"</td></tr>"
    )
    rows_html.append(total_row_html)

    # Build a self-contained HTML document so JS runs inside the component iframe
    start_ms = int(start.timestamp() * 1000)
    end_ms = int(end.timestamp() * 1000) if end else None

    table_inner = "".join(rows_html)
    html_doc = f"""
    <div class='bw-score-panel-container'>
      <style>
        .bold-text {{ font-weight: 700; }}
        .blue-background {{ background:#1d64c8; opacity:0.9; color:#fff; }}
        .shiny-border {{ position: relative; padding: 12px; background: #333; color: white; border-radius: 1.25rem; overflow: hidden; }}
        table {{ width: 100%; margin: 0 auto; border-collapse: separate; border-spacing: 0; }}
        th, td {{ padding: 6px 8px; }}
      </style>
      <table class='shiny-border' style="background: linear-gradient(-45deg, #a1a1a1, #ffffff, #a1a1a1, #666666);">
        {table_inner}
      </table>
      <script>
        (function() {{
          try {{
            var span = document.getElementById("{span_id}");
            if (!span) return;
            var startMs = {start_ms};
            var endMs = {"null" if end_ms is None else end_ms};

            function fmt(ms) {{
              var total = Math.max(0, Math.floor(ms / 1000));
              var m = Math.floor(total / 60);
              var s = total % 60;
              return (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
            }}

            function render(ms) {{
              if (endMs !== null) {{
                span.textContent = "⏱ " + fmt(endMs - startMs);
                return;
              }}
              var now = Date.now();
              span.textContent = "⏱ " + fmt(Math.max(0, now - startMs));
            }}

            function tick() {{
              if (endMs !== null) {{
                render(endMs - startMs);
                return;
              }}
              var now = Date.now();
              render(Math.max(0, now - startMs));
            }}

            tick();
            if (endMs === null) {{
              setInterval(tick, 1000);
            }}
          }} catch (e) {{
            // no-op
          }}
        }})();
      </script>
    </div>
    """

    # Height heuristic to avoid layout jumps
    num_rows = len(rows_html)
    height = 40 + (num_rows * 36)
    components.html(html_doc, height=height, scrolling=False)

# -------------------- Game Over Dialog --------------------

def _game_over_content(state: GameState) -> None:
    # Play congratulations music (not sound effect) as background
    music_dir = _get_music_dir()
    congrats_music_path = os.path.join(music_dir, "congratulations.mp3")
    if os.path.exists(congrats_music_path):
        src_url = _load_audio_data_url(congrats_music_path)
        # Play at full volume (or use previous music_volume setting)
        _mount_background_audio(True, src_url, (st.session_state.get("music_volume", 100)) / 100)
    else:
        # Fallback: keep previous music or silence
        _mount_background_audio(False, None, 0.0)

    # Set end_time if not already set
    if state.end_time is None:
        st.session_state.end_time = datetime.now()
        state.end_time = st.session_state.end_time

    # Timer calculation
    start = state.start_time or state.end_time or datetime.now()
    end = state.end_time or datetime.now()
    elapsed = end - start
    elapsed_seconds = int(elapsed.total_seconds())
    mins, secs = divmod(elapsed_seconds, 60)
    timer_str = f"{mins:02d}:{secs:02d}"

    # Build table body HTML for dialog content
    word_rows = []
    for w in state.puzzle.words:
        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>"
        )

    table_html = (
        "<table class=\"shiny-border\" style=\"border-radius:0.75rem; overflow:hidden; width:100%; margin:0 auto; border-collapse:separate; border-spacing:0;\">"
        "<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} <span style='font-size:1rem; color:#1d64c8;'>&nbsp;⏱ {timer_str}</span></h5></td></tr>"
        "</tbody>"
        "</table>"
    )

    # Optional extra styles for this dialog content
    st.markdown(
        """
        <style>
          .bw-dialog-container {
            border-radius: 1rem;
            box-shadow: 0 0 32px #1d64c8;
            background: linear-gradient(-45deg, #1d64c8, #ffffff, #1d64c8, #666666);
            color: #fff;
            padding: 16px;
          }
          .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);} 
          .text-success { color: #20d46c;font-weight: bold;font-size: 1.5rem;text-align: center;flex: auto;filter:drop-shadow(1px 1px 2px #003); }
          .st-key-new_game_btn_dialog, .st-key-close_game_over { width: 50% !important;
              height: auto;
              min-width: unset !important;
              margin: 25px auto 0;
           }
           .st-key-new_game_btn_dialog button, .st-key-close_game_over button {
            height: 50px !important;
           }
           .st-key-new_game_btn_dialog:hover, .st-key-close_game_over:hover{
              /*background: linear-gradient(-45deg, #1d64c8, #ffffff, #1d64c8, #666666);*/
              background: #1d64c8 !important;
              /*filter:drop-shadow(1px 1px 2px #003);*/
              /*filter: invert(1);*/
           }
           .st-bb {background-color: rgba(29, 100, 200, 0.5);} 
        </style>
        """,
        unsafe_allow_html=True,
    )

    st.markdown(
        f"""
        <div class=\"bw-dialog-container shiny-border\">\n          <div class=\"p-3 pt-2\">\n            <div class=\"mb-2\">Congratulations!</div>
            <div class=\"mb-2\">Final score: <strong class=\"text-success\">{state.score}</strong></div>
            <div class=\"mb-2\">Time: <strong>{timer_str}</strong></div>
            <div class=\"mb-2\">Tier: <strong>{compute_tier(state.score)}</strong></div>
            <div class=\"mb-2\">Game Mode: <strong>{state.game_mode}</strong></div>
            <div class=\"mb-2\">Wordlist: <strong>{st.session_state.get('selected_wordlist', '')}</strong></div>
            <div class=\"mb-0\">{table_html}</div>
          </div>
        </div>
        """,
        unsafe_allow_html=True,
    )

    # Dialog actions
    if st.button("Close", key="close_game_over"):
        st.session_state["show_gameover_overlay"] = False
        st.session_state["remount_background_audio"] = True  # <-- set flag
        st.rerun()

# Prefer st.dialog/experimental_dialog; fallback to st.modal if unavailable
_Dialog = getattr(st, "dialog", getattr(st, "experimental_dialog", None))
if _Dialog:
    @_Dialog("Game Over")
    def _game_over_dialog(state: GameState):
        _game_over_content(state)
else:
    def _game_over_dialog(state: GameState):
        modal_ctx = getattr(st, "modal", None)
        if callable(modal_ctx):
            with modal_ctx("Game Over"):
                _game_over_content(state)
        else:
            # Last-resort inline render
            st.subheader("Game Over")
            _game_over_content(state)

def _render_game_over(state: GameState):
    # Determine visibility
    visible = bool(st.session_state.get("show_gameover_overlay", True)) and is_game_over(state)
    if not visible and st.session_state.get("remount_background_audio", False):
        # Remount background audio when modal is dismissed (X or button)
        music_dir = _get_music_dir()
        background_path = os.path.join(music_dir, "background.mp3")
        if os.path.exists(background_path):
            src_url = _load_audio_data_url(background_path)
            _mount_background_audio(True, src_url, (st.session_state.get("music_volume", 100)) / 100)
        else:
            _mount_background_audio(False, None, 0.0)
        st.session_state["remount_background_audio"] = False  # reset flag
    if visible:
        _game_over_dialog(state)

def _sort_wordlist(filename):    
    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 run_app():
    # Handle overlay dismissal via query params using new API
    try:
        params = st.query_params
    except Exception:
        params = {}
    if params.get("overlay") == "0":
        # Clear param and remember to hide overlay this session
        try:
            st.query_params.clear()
        except Exception:
            pass
        st.session_state["hide_gameover_overlay"] = True

    _init_session()
    st.markdown(ocean_background_css, unsafe_allow_html=True)
    _render_header()
    _render_sidebar()

    state = _to_state()

    # 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([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, 2], gap="medium")
        with one:
            _render_correct_try_again(state)
            #_render_hit_miss(state)
        with two:              
            _render_guess_form(state)
        #st.divider()        
        _render_score_panel(state)
    with left:
        _render_grid(state, st.session_state.letter_map, show_grid_ticks=st.session_state.get("show_grid_ticks", True))
        st.button("New Game", width=125, on_click=_new_game, key="new_game_btn")

    # 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)