path: root/static/bs/bracket.js

class BracketCityRank {
  /**
   * @typedef {Object} RankConfig
   * @property {number} peekPenalty - Points deducted per peek
   * @property {number} megaPeekPenalty - Points deducted per mega peek
   * @property {number} wrongGuessPenalty - Points deducted per wrong guess
   * @property {Object.<string, number>} rankThresholds - Score thresholds for each rank
   */
  
  /**
   * @param {Partial<RankConfig>} config - Optional configuration overrides
   */
  constructor(config = {}) {
    // Define rank emojis with consistent Unicode escapes
    this.rankEmojis = {
      'Tourist': '\u{1F4F8}',      // Camera with flash
      'Commuter': '\u{1F682}',     // Steam locomotive
      'Resident': '\u{1F3E0}',     // House
      'Council Member': '\u{1F3DB}', // Classical building
      'Chief of Police': '\u{1F46E}', // Police officer
      'Mayor': '\u{1F396}',        // Military medal
      'Power Broker': '\u{1F4BC}', // Briefcase
      'Kingmaker': '\u{1F451}',    // Crown
      'Puppet Master': '\u{1F52E}'  // Crystal ball
    };
  
    // Default configuration
    const defaultConfig = {
      peekPenalty: 5,
      megaPeekPenalty: 15,
      wrongGuessPenalty: 2, // For regular mode
      rankThresholds: {
        'Tourist': 0,
        'Commuter': 11,
        'Resident': 21,
        'Council Member': 31,
        'Chief of Police': 51,
        'Mayor': 68,
        'Power Broker': 79,
        'Kingmaker': 91,
        'Puppet Master': 100
      },
      regularRankThresholds: {
        'Tourist': 0,
        'Commuter': 10,
        'Resident': 20,
        'Council Member': 45,
        'Chief of Police': 65,
        'Mayor': 80,
        'Power Broker': 90,
        'Kingmaker': 100,
        'Puppet Master': 100
      }
    };
  
    // Merge provided config with defaults
    this.config = {
      ...defaultConfig,
      ...config,
      // Ensure rankThresholds is fully merged
      rankThresholds: {
        ...defaultConfig.rankThresholds,
        ...(config.rankThresholds || {})
      },
      regularRankThresholds: {
        ...defaultConfig.regularRankThresholds,
        ...(config.regularRankThresholds || {})
      }
    };
  }
  
  /**
   * Modified calculateScore method to account for different scoring systems
   * @param {number} efficiency - Base efficiency score (0-100)
   * @param {number} peekCount - Number of peeks used
   * @param {number} megaPeekCount - Number of mega peeks used
   * @param {number} wrongGuessCount - Number of wrong guesses
   * @returns {Object} Detailed score breakdown
   */
  calculateScore(efficiency, peekCount = 0, megaPeekCount = 0, wrongGuessCount = 0) {
    // Always ensure inputs are numbers and non-negative
    const safepeekCount = Math.max(0, Number(peekCount) || 0);
    const safeMegaPeekCount = Math.max(0, Number(megaPeekCount) || 0);
    const safeWrongGuessCount = Math.max(0, Number(wrongGuessCount) || 0);
    
    // Calculate penalties
    const peekPenalty = safepeekCount * this.config.peekPenalty;
    const megaPeekPenalty = safeMegaPeekCount * this.config.megaPeekPenalty;
    
    // Different base score calculation based on mode
    let baseScore, wrongGuessPenalty, totalPenalty, finalScore;
    
    if (this.inputMode === 'classic') {
      // Classic mode: score based on keystroke efficiency
      baseScore = Math.max(0, Number(efficiency) || 0);
      wrongGuessPenalty = 0; // No wrong guess penalty in classic mode
      totalPenalty = peekPenalty + megaPeekPenalty;
    } else {
      // Submit mode: score starts at 100, penalty for wrong guesses
      baseScore = 100; // Start at max
      wrongGuessPenalty = safeWrongGuessCount * this.config.wrongGuessPenalty;
      totalPenalty = peekPenalty + megaPeekPenalty + wrongGuessPenalty;
    }
    
    // Calculate final score (capped at 100)
    finalScore = Math.min(100, Math.max(0, baseScore - totalPenalty));
    
    return {
      baseScore,
      peekPenalty,
      megaPeekPenalty,
      wrongGuessPenalty,
      totalPenalty,
      finalScore
    };
  }

  /**
   * Generates detailed stats including rank and scoring information
   * Accounts for different modes
   * @param {number} efficiency - Base efficiency score
   * @param {number} peekCount - Number of peeks used
   * @param {number} megaPeekCount - Number of mega peeks used
   * @param {number} wrongGuessCount - Number of wrong guesses
   * @returns {Object} Detailed stats object
   */
  getDetailedStats(efficiency, peekCount = 0, megaPeekCount = 0, wrongGuessCount = 0) {
    const scoreDetails = this.calculateScore(efficiency, peekCount, megaPeekCount, wrongGuessCount);
    const rank = this.calculateRank(efficiency, peekCount, megaPeekCount, wrongGuessCount);
    
    // Calculate points needed for next rank
    const thresholds = this.inputMode === 'classic' ? 
      this.config.rankThresholds : 
      this.config.regularRankThresholds;
    
    const ranks = Object.entries(thresholds)
      .sort((a, b) => a[1] - b[1]); // Sort ascending
    
    const currentRankIndex = ranks.findIndex(([r]) => r === rank);
    const nextRank = currentRankIndex < ranks.length - 1 ? 
      ranks[currentRankIndex + 1] : null;
    
    const pointsToNextRank = nextRank ? 
      Math.max(0, nextRank[1] - scoreDetails.finalScore) : 0;
    
    return {
      rank,
      rankEmoji: this.rankEmojis[rank] || this.rankEmojis['Tourist'],
      ...scoreDetails,
      nextRankName: nextRank ? nextRank[0] : null,
      pointsToNextRank: Math.ceil(pointsToNextRank), // Round up for user-friendly display
      config: this.config
    };
  }
  
  /**
   * Determines rank based on final score
   * @param {number} efficiency - Base efficiency score
   * @param {number} peekCount - Number of peeks used
   * @param {number} megaPeekCount - Number of mega peeks used
   * @param {number} wrongGuessCount - Number of wrong guesses
   * @returns {string} Rank title
   */
  calculateRank(efficiency, peekCount = 0, megaPeekCount = 0, wrongGuessCount = 0) {
    const { finalScore } = this.calculateScore(efficiency, peekCount, megaPeekCount, wrongGuessCount);
    
    // Only keep the Puppet Master special case
    // Puppet Master: 100% keystroke-efficient (no excess keystrokes) AND no peeks/wrong guesses
    const isPerfect = efficiency === 100;
    const isNoHelp = peekCount === 0 && megaPeekCount === 0 && wrongGuessCount === 0;
    
    if (isPerfect && isNoHelp) {
      return 'Puppet Master';
    }
    
    // For all other cases, follow normal threshold logic
    const thresholds = this.inputMode === 'classic' ? 
      this.config.rankThresholds : 
      this.config.regularRankThresholds;
    
    const ranks = Object.entries(thresholds)
      .sort((a, b) => b[1] - a[1]);
    
    // Find highest rank threshold that score exceeds
    const rank = ranks.find(([_, threshold]) => finalScore >= threshold);
    return rank ? rank[0] : 'Tourist';
  }
}
  
  /**
   * @typedef {Object} GameState
   * @property {string} displayState - Current puzzle display with HTML markup
   * @property {Set<string>} solvedExpressions - Set of solved expression strings
   * @property {string} message - Current user message
   * @property {number} totalKeystrokes - Total keystrokes used
   * @property {number} minimumKeystrokes - Minimum keystrokes needed
   * @property {Array<{start: number, end: number, text: string, expression: string}>} activeClues
   * @property {Set<string>} hintModeClues - Clues that have been peeked
   * @property {Set<string>} peekedClues - Tracking for peek penalties
   * @property {Set<string>} megaPeekedClues - Clues that were fully revealed
   */
  
  
  class BracketPuzzle {

  /****************************
   Core initilization methods
  ****************************/

  /**
   * Constructor and Initialization
   */

  constructor(rootElement) {
    this.root = rootElement;
    this.API_ENDPOINT = 'https://user.4574.co.uk/bracket-api';
    this.PUZZLE_DATA = null;
    
    this.MODE_STORAGE_KEY = 'bracketCityInputMode';
    this.inputMode = this.getInputMode();

    // Detect device type
    this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    // Add new property specifically for input method decision
    this.useCustomKeyboard = this.isMobile && !this.isTablet();

    // Track keyboard layout
    this.isAltKeyboard = false;

    // Initialize user ID
    this.userId = this.initializeUserId();

    // Initialize empty state immediately
    this.state = {
      displayState: '',
      solvedExpressions: new Set(),
      message: '',
      totalKeystrokes: 0,
      minimumKeystrokes: 0,
      activeClues: [],
      hintModeClues: new Set(),
      peekedClues: new Set(),
      megaPeekedClues: new Set(),
      wrongGuesses: 0
    };
    
    // Initialize rank calculator
    this.rankCalculator = new BracketCityRank();
    this.rankCalculator.inputMode = this.inputMode;

    // Start initialization
    this.initializeGame();
  }

  /**
   * Initializes the game
   */
  async initializeGame() {
    try {
        console.log('Starting game initialization');
        
        // Show loading state immediately
        this.root.innerHTML = this.generateLoadingHTML();
        
        // Get initial puzzle date, checking encoded puzzles first
        const urlParams = new URLSearchParams(window.location.search);
        const encoded = urlParams.get('d');
        
        if (encoded) {
            const decoded = PuzzleEncoder.decodePuzzle(encoded);
            if (decoded) {
                this.currentPuzzleDate = decoded.puzzleDate;
            } else {
                this.currentPuzzleDate = this.getPuzzleDateFromURL();
            }
        } else {
            this.currentPuzzleDate = this.getPuzzleDateFromURL();
        }
        
        console.log('Current puzzle date set to:', this.currentPuzzleDate);

        // Load saved input mode preference
        this.inputMode = this.getInputMode();
        
        // Update rankCalculator with the input mode
        this.rankCalculator = new BracketCityRank();
        this.rankCalculator.inputMode = this.inputMode;

        // Start showing basic UI elements
        this.root.innerHTML = this.generateInitialHTML();
        this.setupInputHandlers();

        // Load puzzle data
        console.log('Loading puzzle data');
        await this.initializePuzzleData();
        
        if (!this.PUZZLE_DATA) {
            throw new Error('Failed to initialize puzzle data');
        }

        // Load or initialize game state
        console.log('Loading saved state');
        const savedState = await this.loadSavedState(this.currentPuzzleDate);
        console.log('Saved state loaded:', savedState ? 'found' : 'not found');

        // Initialize game state
        if (savedState && savedState.initialPuzzle === this.PUZZLE_DATA.initialPuzzle) {
            console.log('Using saved state');
            this.updateGameState({
                displayState: savedState.displayState,
                solvedExpressions: new Set(savedState.solvedExpressions),
                message: savedState.message || '',
                totalKeystrokes: savedState.totalKeystrokes,
                minimumKeystrokes: savedState.minimumKeystrokes,
                activeClues: this.findActiveClues(savedState.displayState),
                hintModeClues: new Set(savedState.hintModeClues || []),
                peekedClues: new Set(savedState.peekedClues || []),
                megaPeekedClues: new Set(savedState.megaPeekedClues || []),
                wrongGuesses: savedState.wrongGuesses || 0 
            });
        } else {
            console.log('Initializing fresh state');
            this.updateGameState({
                displayState: this.PUZZLE_DATA.initialPuzzle,
                solvedExpressions: new Set(),
                message: '',
                totalKeystrokes: 0,
                minimumKeystrokes: this.calculateMinimumKeystrokes(),
                activeClues: this.findActiveClues(this.PUZZLE_DATA.initialPuzzle),
                hintModeClues: new Set(),
                peekedClues: new Set(),
                megaPeekedClues: new Set(),
                wrongGuesses: 0
            });
        }

        this.setupDatePicker();

        // Update URL to match current puzzle
        if (!encoded) {  // Only update URL if not an encoded puzzle
            this.updateURL(this.currentPuzzleDate);
        }

        // Do the initial render
        console.log('Performing initial render');
        this.render();

        // Load non-critical features
        requestAnimationFrame(() => {
            console.log('Setting up auxiliary features');
            this.setupShareButtons();
            this.setupPuzzleDisplay();
            
            this.checkAdjacentPuzzles(this.currentPuzzleDate).then(() => {
                this.setupNavigationHandlers();
                console.log('Navigation setup complete');
            });
        });
        // Show important announcement after UI is fully rendered
        // Change the id parameter for each new announcement to ensure it shows
        this.showImportantAnnouncement({
          title: '\u{1F6A8} Welcome to [Bracket Shitty] \u{1F6A8}',
          message: `
            <ul style="text-align: left; margin: 1rem 0; padding-left: 1.5rem;">
              <li>Click <span class='help-icon'>?</span> to access the <mark style="background-color:rgba(255, 255, 0, 0.2);">tutorial</mark></li>
              <li>Click <span class='help-icon'>!</span> to access <mark style="background-color:rgba(255, 255, 0, 0.2);">news and settings</mark></li>
              <li>Click the date header to access the <mark style="background-color:rgba(255, 255, 0, 0.2);">date picker</mark> and browse the archive</li>
            </ul>
            <p><strong>Thank you for playing Bracket Shitty!</strong></p>
          `,
          buttonText: 'ok great thanks',
          id: 'update-2025-3-11' // Change this ID for a new announcement
        });
        

    } catch (error) {
        console.error('Failed to initialize game:', error);
        this.showErrorMessage('Failed to load the game. Please refresh the page to try again.');
    }
  }

  /**
   * Initializes or retrieves the user ID
   * @returns {string} User ID
   */
  initializeUserId() {
    const storageKey = 'bracketCityUserId';
    let userId = localStorage.getItem(storageKey);
    
    if (!userId) {
      userId = crypto.randomUUID();
      localStorage.setItem(storageKey, userId);
    }
    
    return userId;
  }

  async initializePuzzleData() {
    const urlParams = new URLSearchParams(window.location.search);
    const encoded = urlParams.get('d');
    
    if (encoded) {
      // Try PuzzleEncoder format first
      const decodedPuzzle = PuzzleEncoder.decodePuzzle(encoded);
      if (decodedPuzzle) {
        this.PUZZLE_DATA = decodedPuzzle;
      } else {
        // Try direct base64 JSON format
        try {
          const jsonStr = atob(encoded);
          const puzzleData = JSON.parse(jsonStr);
          
          // Validate required fields
          if (puzzleData.initialPuzzle && puzzleData.solutions) {
            this.PUZZLE_DATA = {
              initialPuzzle: puzzleData.initialPuzzle,
              solutions: puzzleData.solutions
            };
          } else {
            console.error('Invalid puzzle data structure in URL');
            await this.fetchPuzzleForDate(this.currentPuzzleDate);
          }
        } catch (e) {
          console.error('Failed to decode puzzle data:', e);
          await this.fetchPuzzleForDate(this.currentPuzzleDate);
        }
      }
    } else {
      // No encoded puzzle, fetch for specific date or today
      await this.fetchPuzzleForDate(this.currentPuzzleDate);
    }
    
    if (!this.PUZZLE_DATA) {
      throw new Error('Failed to initialize puzzle data');
    }
  }

  /**
     * Checks if running in development environment
     */
  isDevelopmentEnvironment() {
    const hostname = window.location.hostname;
    return hostname === 'localhost' || 
           hostname === '127.0.0.1' ||
           hostname === 'staging.bracket.city' ||  
           hostname === 'dev.bracket.city';
  }


  /**
   * Gets the current input mode from localStorage or defaults to 'classic'
   * @returns {string} The input mode ('classic' or 'submit')
   */
  getInputMode() {
    return localStorage.getItem(this.MODE_STORAGE_KEY) || 'submit';
  }

  /**
   * Determines if a puzzle has been meaningfully started based on consistent criteria
   * @param {Object} puzzleData - The puzzle state to check
   * @returns {boolean} Whether the puzzle is considered started
   */
  isPuzzleStarted(puzzleData = this.state) {
    // If no data provided or using current state, check directly
    if (puzzleData === this.state) {
      return (this.state.totalKeystrokes > 5) || 
            (this.state.peekedClues && this.state.peekedClues.size > 0) ||
            (this.state.megaPeekedClues && this.state.megaPeekedClues.size > 0) ||
            (this.state.wrongGuesses > 0) ||
            (this.state.solvedExpressions && this.state.solvedExpressions.size > 0);
    }
    
    // For saved state data from localStorage (which has arrays instead of Sets)
    return (puzzleData.totalKeystrokes > 5) || 
          (puzzleData.peekedClues && puzzleData.peekedClues.length > 0) ||
          (puzzleData.megaPeekedClues && puzzleData.megaPeekedClues.length > 0) ||
          (puzzleData.wrongGuesses > 0) ||
          (puzzleData.solvedExpressions && puzzleData.solvedExpressions.length > 0);
  }

  /**
   * Sets the input mode and updates the UI
   * @param {string} mode - The input mode to set ('classic' or 'submit')
   */
  setInputMode(mode) {
    if (mode !== 'classic' && mode !== 'submit') {
      console.error('Invalid input mode:', mode);
      return;
    }
    
    // Check if the puzzle has been started
    const hasPuzzleStarted = this.isPuzzleStarted();
    
    // Only allow mode changes if the puzzle hasn't been started
    if (hasPuzzleStarted) {
      // Don't show a message - the disabled toggle with explanatory text is sufficient
      console.log('Mode change prevented: puzzle already started');
      return;
    }
    
    this.inputMode = mode;
    localStorage.setItem(this.MODE_STORAGE_KEY, mode);
    
    // Update rankCalculator's input mode
    this.rankCalculator.inputMode = mode;
    
    // Update the UI to reflect the new mode
    this.updateInputModeUI();
    
    // If help/info is currently visible, ensure inputs stay disabled
    if (this.state.helpVisible) {
      this.disableInputsForHelp();
    }
  }

  /**
   * New helper method to ensure inputs are disabled when help is visible
   */
  disableInputsForHelp() {
    // Get the input elements
    const desktopInput = this.root.querySelector('.answer-input');
    
    // Disable input while help is visible
    if (desktopInput) {
      desktopInput.disabled = true;
    }
    
    // Disable submit button (desktop)
    const submitButton = this.root.querySelector('.submit-answer');
    if (submitButton) {
      submitButton.disabled = true;
      submitButton.style.opacity = '0.5';
      submitButton.style.pointerEvents = 'none';
    }
    
    // For mobile, disable keyboard and input without hiding
    if (this.isMobile) {
      // Make custom input appear disabled
      const customInput = this.root.querySelector('.custom-input');
      if (customInput) {
        customInput.style.opacity = '0.5';
        customInput.style.pointerEvents = 'none';
      }
      
      // Disable all keyboard keys
      const keyboardKeys = this.root.querySelectorAll('.keyboard-key');
      keyboardKeys.forEach(key => {
        key.disabled = true;
        key.style.opacity = '0.5';
        key.style.pointerEvents = 'none';
      });
      
      // Disable mobile submit button
      const mobileSubmitButton = this.root.querySelector('.mobile-submit-button');
      if (mobileSubmitButton) {
        mobileSubmitButton.disabled = true;
        mobileSubmitButton.style.opacity = '0.5';
        mobileSubmitButton.style.pointerEvents = 'none';
      }
    }
  }

  /**
   * Updates the UI to match the current input mode
   */
  updateInputModeUI() {
    // Replace the input container HTML
    const inputContainer = this.root.querySelector('.input-container');
    if (!inputContainer) return;
    
    // Store current input value before replacing the container
    let currentInputValue = '';
    if (this.isMobile) {
      currentInputValue = this.customInputValue || '';
    } else {
      const inputEl = this.root.querySelector('.answer-input');
      currentInputValue = inputEl ? inputEl.value : '';
    }
    
    // Generate fresh input container HTML based on current mode
    inputContainer.innerHTML = this.generateInputContainerHTML();
    
    // Re-setup input handlers
    this.setupInputHandlers();
    
    // Restore input value
    if (this.isMobile) {
      this.customInputValue = currentInputValue;
      this.updateCustomInputDisplay();
    } else {
      const inputEl = this.root.querySelector('.answer-input');
      if (inputEl) inputEl.value = currentInputValue;
    }
    
    // Re-render to show updated stats if the puzzle is complete
    if (this.isPuzzleComplete()) {
      const keystrokeStats = this.root.querySelector('.keystroke-stats');
      if (keystrokeStats) {
        this.renderCompletionStats(keystrokeStats);
      }
    }
  }
  /****************
   State Management
  *****************/
  
    /**
     * Updates game state while maintaining consistency
     * @param {Partial<GameState>} updates - State properties to update
     */
    updateGameState(updates) {
      // Create new state with updates
      const newState = {
        ...this.state,
        ...updates
      };
  
      // Ensure Sets remain Sets
      if (updates.solvedExpressions) {
        newState.solvedExpressions = new Set(updates.solvedExpressions);
      }
      if (updates.hintModeClues) {
        newState.hintModeClues = new Set(updates.hintModeClues);
      }
      if (updates.peekedClues) {
        newState.peekedClues = new Set(updates.peekedClues);
      }
      if (updates.megaPeekedClues) {
        newState.megaPeekedClues = new Set(updates.megaPeekedClues);
      }
  
      // Update active clues if display state changes
      if (updates.displayState) {
        newState.activeClues = this.findActiveClues(updates.displayState);
      }
  
      // Update state and persist
      this.state = newState;
      this.saveState();
    }
    
    /**
     * Gets the storage key for the current puzzle - enhanced version with explicit date parameter
     * @param {string} puzzleDate - Optional specific puzzle date
     * @returns {string} Storage key
     */
    getStorageKey(puzzleDate) {
      const dateToUse = puzzleDate || this.currentPuzzleDate;
      if (!dateToUse) {
        console.error('No puzzle date available when getting storage key!');
        return null;
      }
      return `bracketPuzzle_${dateToUse}`;
    }
  
    /**
     * Enhanced loadSavedState method with input mode handling
     * @param {string} targetDate - The puzzle date to load state for
     * @returns {Object|null} Saved state or null if none exists or validation fails
     */
    async loadSavedState(targetDate) {
      try {
        // Ensure we're loading state for the correct puzzle date
        const puzzleDate = targetDate || this.currentPuzzleDate;
        
        if (!puzzleDate) {
          console.warn('Cannot load state: missing puzzle date');
          return null;
        }
        
        const storageKey = `bracketPuzzle_${puzzleDate}`;
        
        if (!this.PUZZLE_DATA) {
          console.warn('Cannot load state: missing puzzle data');
          return null;
        }

        const savedData = localStorage.getItem(storageKey);
        if (!savedData) {
          console.log('No saved state found for key:', storageKey);
          return null;
        }

        const parsed = JSON.parse(savedData);
        
        // Enhanced validation: verify the puzzle date in the saved state matches the requested date
        if (parsed.puzzleDate !== puzzleDate) {
          console.warn(`Saved state puzzle date (${parsed.puzzleDate}) doesn't match requested date (${puzzleDate})`);
          return null;
        }
        
        // Additional validation: verify the initialPuzzle matches
        if (parsed.initialPuzzle !== this.PUZZLE_DATA.initialPuzzle) {
          console.warn('Saved state initialPuzzle doesn\'t match current puzzle data');
          return null;
        }

        return {
          displayState: parsed.displayState,
          solvedExpressions: parsed.solvedExpressions || [],
          message: '', // Always start with empty message
          messageType: null,
          totalKeystrokes: parsed.totalKeystrokes || 0,
          minimumKeystrokes: parsed.minimumKeystrokes || this.calculateMinimumKeystrokes(),
          hintModeClues: parsed.hintModeClues || [],
          peekedClues: parsed.peekedClues || [],
          megaPeekedClues: parsed.megaPeekedClues || [],
          initialPuzzle: parsed.initialPuzzle,
          puzzleDate: parsed.puzzleDate,
          wrongGuesses: parsed.wrongGuesses || 0,
          // Include the saved input mode if it exists
          inputMode: parsed.inputMode || this.getInputMode(), 
          // Preserve help system state properties if they exist
          helpVisible: parsed.helpVisible || false,
          previousDisplay: parsed.previousDisplay || null
        };

      } catch (error) {
        console.error('Error loading saved state:', error);
        return null;
      }
    }
    
    saveState() {
      try {
        const storageKey = this.getStorageKey();
        if (!storageKey) {
          console.error('Cannot save state: missing storage key');
          return false;
        }
    
        const stateToSave = {
          displayState: this.state.displayState,
          solvedExpressions: Array.from(this.state.solvedExpressions),
          totalKeystrokes: this.state.totalKeystrokes,
          minimumKeystrokes: this.state.minimumKeystrokes,
          hintModeClues: Array.from(this.state.hintModeClues),
          peekedClues: Array.from(this.state.peekedClues),
          megaPeekedClues: Array.from(this.state.megaPeekedClues),
          initialPuzzle: this.PUZZLE_DATA.initialPuzzle,
          puzzleDate: this.currentPuzzleDate,
          isComplete: this.state.isComplete || false,
          completionStats: this.state.completionStats || null,
          wrongGuesses: this.state.wrongGuesses || 0,
          inputMode: this.inputMode // Save the input mode with puzzle state
        };
    
        localStorage.setItem(storageKey, JSON.stringify(stateToSave));
        return true;
    
      } catch (error) {
        console.error('Error saving state:', error);
        return false;
      }
    }

  
    /**
     * Resets puzzle state and storage
     */
    resetPuzzle() {
      if (!confirm('Are you sure you want to reset the puzzle? All progress will be lost.')) {
        return;
      }

      // Clear saved state.
      const storageKey = this.getStorageKey();
      if (storageKey) {
        localStorage.removeItem(storageKey);
      }
      
      // Get the user's preferred input mode
      const preferredInputMode = this.getInputMode();
      
      // Update the current input mode to the preferred mode
      this.inputMode = preferredInputMode;
      
      // Update the rankCalculator's input mode
      this.rankCalculator.inputMode = this.inputMode;

      // Reset game state
      this.updateGameState({
        displayState: this.PUZZLE_DATA.initialPuzzle,
        solvedExpressions: new Set(),
        message: '',
        totalKeystrokes: 0,
        minimumKeystrokes: this.calculateMinimumKeystrokes(),
        activeClues: this.findActiveClues(this.PUZZLE_DATA.initialPuzzle),
        hintModeClues: new Set(),
        peekedClues: new Set(),
        megaPeekedClues: new Set(),
        helpVisible: false,
        previousDisplay: null,
        wrongGuesses: 0 // Reset wrong guesses
      });

      // Remove any existing completion message and "completed" classes.
      const completionMessage = this.root.querySelector('.completion-message');
      if (completionMessage) {
        completionMessage.remove();
      }
      const container = this.root.querySelector('.puzzle-container');
      if (container) {
        container.classList.remove('completed');
      }
      const puzzleDisplay = this.root.querySelector('.puzzle-display');
      if (puzzleDisplay) {
        puzzleDisplay.classList.remove('completed');
      }

      // Rebuild the UI within your dedicated container.
      this.root.innerHTML = this.generateInitialHTML();

      // Re‑attach event handlers.
      this.setupInputHandlers();
      this.setupShareButtons();
      this.setupPuzzleDisplay();
      this.setupDatePicker();
      // Re‑attach navigation handlers. Use a timeout to allow the new DOM to settle.
      setTimeout(() => {
        this.setupNavigationHandlers();
        this.checkAdjacentPuzzles(this.currentPuzzleDate);
      }, 0);

      // Make sure the input container is visible.
      const inputContainer = this.root.querySelector('.input-container');
      if (inputContainer) {
        inputContainer.style.display = 'block';
      }
      if (!this.isMobile && this.root.querySelector('.answer-input')) {
        this.root.querySelector('.answer-input').focus();
      }

      this.render();
      this.showMessage('Puzzle reset successfully!');
    }
  
    calculateMinimumKeystrokes() {
      return Object.values(this.PUZZLE_DATA.solutions)
        .reduce((total, solution) => total + solution.length, 0);
    }

    /*************
     Data and API
    **************/

    /**
     * Fetches and processes puzzle data for a date
     */
    async fetchPuzzleForDate(targetDate) {
      try {
          // Try to get puzzle for specified date
          let response = await fetch(`${this.API_ENDPOINT}/${targetDate}`, {
              cache: 'no-store',
              headers: {
                  'Cache-Control': 'no-cache',
                  'Pragma': 'no-cache'
              }
          });
          
          // If that date's puzzle doesn't exist, get latest puzzle
          if (!response.ok) {
              // Get base list of puzzles
              response = await fetch(this.API_ENDPOINT, {
                  cache: 'no-store',
                  headers: {
                      'Cache-Control': 'no-cache',
                      'Pragma': 'no-cache'
                  }
              });
              if (!response.ok) {
                  throw new Error('Unable to fetch puzzle list');
              }
              
              const puzzles = await response.json();
              if (!puzzles || puzzles.length === 0) {
                  throw new Error('No puzzles available');
              }
              
              // Find the most recent puzzle date
              const latestPuzzleDate = puzzles.reduce((latest, current) => {
                  return latest > current ? latest : current;
              });
              
              // Fetch the latest puzzle
              response = await fetch(`${this.API_ENDPOINT}/${latestPuzzleDate}`, {
                  cache: 'no-store',
                  headers: {
                      'Cache-Control': 'no-cache',
                      'Pragma': 'no-cache'
                  }
              });
              if (!response.ok) {
                  throw new Error('Failed to fetch latest puzzle');
              }
          }
          
          const puzzleData = await response.json();
          
          /*console.log('Raw puzzle data received:', {
              date: targetDate,
              puzzleData,
              timestamp: new Date().toISOString()
          });*/

          // Clean up escaped quotes and store in PUZZLE_DATA
          this.PUZZLE_DATA = {
              ...puzzleData,
              initialPuzzle: this.unescapeString(puzzleData.initialPuzzle),
              solutions: Object.fromEntries(
                  Object.entries(puzzleData.solutions).map(([key, value]) => [
                      this.unescapeString(key),
                      this.unescapeString(value)
                  ])
              )
          };

          return true;

      } catch (error) {
          console.error('Error fetching puzzle:', error);
          return false;
      }
    }
    
    unescapeString(str) {
      if (typeof str !== 'string') return str;
      return str.replace(/\\"/g, '"')
                .replace(/\\'/g, "'")
                .replace(/\\\\/g, "\\");
    }
    
    /***********************
     Date and URL management
    ************************/
    
    getNYCDate() {
      // Create a date object
      const date = new Date();
      
      // Get the NY time options
      const nyOptions = {
        timeZone: 'America/New_York',
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      };
      
      // Format date in NY timezone
      const nyDateStr = date.toLocaleString('en-US', nyOptions);
      
      // Split into components and rearrange into YYYY-MM-DD
      const [month, day, year] = nyDateStr.split('/');
      return `${year}-${month}-${day}`;
    }
  
    formatNYCDate(date = this.getNYCDate()) {
      // Split the YYYY-MM-DD format
      const [year, month, day] = date.split('-');
      
      // Create a Date object in the NYC timezone
      // First create a date string with the format that ensures it's interpreted as NYC time
      const nycDateString = `${year}-${month}-${day}T12:00:00-05:00`; // Noon in NYC to avoid DST issues
      const dateObj = new Date(nycDateString);
      
      // Format it for display using the NYC timezone
      return dateObj.toLocaleDateString('en-US', { 
        month: 'long', 
        day: 'numeric', 
        year: 'numeric',
        timeZone: 'America/New_York'
      });
    }
  
    /**
     * Updates URL with the current puzzle date
     * @param {string} puzzleDate - Date in YYYY-MM-DD format
     */
    updateURL(puzzleDate) {
      const url = new URL(window.location.href);
      
      // If we have an encoded puzzle, don't modify URL
      if (url.searchParams.has('d')) {
        return;
      }
      
      // Get today's date in NYC time zone
      const todayPuzzleDate = this.getNYCDate();
      
      // Check if we're using path format or query parameter format
      const isPathFormat = window.location.pathname.match(/\/puzzles\/\d{4}\/\d+\/\d+/);
      
      if (isPathFormat) {
        // If using path format, keep using path format
        if (puzzleDate !== todayPuzzleDate) {
          // Format the date components for the path
          const [year, month, day] = puzzleDate.split('-');
          const newPath = `/puzzles/${year}/${parseInt(month)}/${parseInt(day)}`;
          window.history.pushState({}, '', newPath);
        } else {
          // If it's today's puzzle, go to home
          window.history.pushState({}, '', '/');
        }
      } else {
        // Using query parameter format, stick with that
        url.searchParams.delete('date');
        if (puzzleDate !== todayPuzzleDate) {
          url.searchParams.set('date', puzzleDate);
        }
        window.history.pushState({}, '', url.toString());
      }
    }
  
    /**
     * Gets puzzle date from URL or defaults to current NYC date
     * @returns {string} Puzzle date in YYYY-MM-DD format
     */
    getPuzzleDateFromURL() {
      // NEW: First check path for /puzzles/YYYY/M/D pattern
      const pathMatch = window.location.pathname.match(/\/puzzles\/(\d{4})\/(\d{1,2})\/(\d{1,2})/);
      if (pathMatch) {
        const year = pathMatch[1];
        const month = pathMatch[2].padStart(2, '0');
        const day = pathMatch[3].padStart(2, '0');
        const dateStr = `${year}-${month}-${day}`;
        
        if (this.isValidPuzzleDate(dateStr)) {
          return dateStr;
        }
      }
      
      // UNCHANGED: Your existing query parameter logic stays exactly the same
      const urlParams = new URLSearchParams(window.location.search);
      
      if (urlParams.has('d')) {
        const decoded = PuzzleEncoder.decodePuzzle(urlParams.get('d'));
        return decoded?.puzzleDate || this.getNYCDate();
      }
      
      const dateParam = urlParams.get('date');
      if (dateParam && this.isValidPuzzleDate(dateParam)) {
        return dateParam;
      }
      
      return this.getNYCDate();
    }
  
    /**
     * Validates a puzzle date string
     * @param {string} dateStr - Date string to validate
     * @returns {boolean} Whether the date is valid
     */
    isValidPuzzleDate(dateStr) {
      // Check format (YYYY-MM-DD)
      if (!/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
        return false;
      }
      
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) {
        return false;
      }
      
      // On dev servers, allow any valid date
      if (this.isDevelopmentEnvironment()) {
        return true;
      }
      
      // On production, don't allow future dates
      const nycDate = new Date(this.getNYCDate());
      return date <= nycDate;
    }
    
    
    /**********
     Game logic
    ***********/

    /**
     * Finds all active clues in the current puzzle state
     * @param {string} puzzleText - Current puzzle text
     * @returns {Array<{start: number, end: number, text: string, expression: string}>}
     */
    findActiveClues(puzzleText) {
      const activeClues = [];
      
      function findClues(str, startOffset = 0) {
        let i = 0;
        while (i < str.length) {
          if (str[i] === '[') {
            const startIndex = i;
            let bracketCount = 1;
            let hasNestedBrackets = false;
            i++;
            
            let innerContent = '';
            while (i < str.length && bracketCount > 0) {
              if (str[i] === '[') {
                bracketCount++;
                hasNestedBrackets = true;
              } else if (str[i] === ']') {
                bracketCount--;
              }
              innerContent += str[i];
              i++;
            }
            
            innerContent = innerContent.slice(0, -1);
            
            if (!hasNestedBrackets) {
              // Clean expression text of HTML markup
              const cleanExpression = innerContent.replace(/<\/?[^>]+(>|$)/g, '');
              activeClues.push({
                start: startOffset + startIndex,
                end: startOffset + i,
                text: str.substring(startIndex, i),
                expression: cleanExpression
              });
            }
            
            if (hasNestedBrackets) {
              findClues(innerContent, startOffset + startIndex + 1);
            }
          } else {
            i++;
          }
        }
      }
      
      const cleanText = puzzleText.replace(/<\/?span[^>]*(>|$)/g, '');
      findClues(cleanText);
      return activeClues;
    }
  
    /**
     * Finds available expressions that can be solved
     * @param {string} text - Current puzzle text
     * @returns {Array<{expression: string, startIndex: number, endIndex: number}>}
     */
    findAvailableExpressions(text) {
      const cleanText = text.replace(/<\/?span[^>]*(>|$)/g, '');
      const results = [];
      const regex = /\[([^\[\]]+?)\]/g;
      const matchedPositions = new Set();
      let match;
      
      while ((match = regex.exec(cleanText)) !== null) {
        const startIdx = match.index;
        const endIdx = startIdx + match[0].length;
        
        if (!matchedPositions.has(startIdx)) {
          matchedPositions.add(startIdx);
          results.push({
            expression: match[1],
            startIndex: startIdx,
            endIndex: endIdx
          });
        }
      }
      
      return results;
    }

    /**
     * Generates new state after solving a clue
     * @param {Object} clue - Clue object
     * @param {string} solution - Solution text
     * @returns {string} New display state
     */
    generateSolvedClueState(clue, solution) {
      const cleanState = this.state.displayState.replace(/<\/?[^>]+(>|$)/g, '');
      const escapedSolution = solution
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
      
      return (
        cleanState.slice(0, clue.startIndex) + 
        `<mark class="solved">${escapedSolution}</mark>` + 
        cleanState.slice(clue.endIndex)
      );
    }
  
    /**
     * Handles user input for solving expressions
     * @param {string} input - User input string
     */
    handleInput(input) {
      const normalizedInput = this.normalizeInput(input);
      if (!normalizedInput) {
        return;
      }
    
      const match = this.findMatchingExpression(normalizedInput);
      if (!match) {
        return;
      }
    
      this.solveExpression(match);
    }
  
    /**
     * Normalizes and validates user input
     * @param {string} input - Raw user input
     * @returns {string|null} Normalized input or null if invalid
     */
    normalizeInput(input) {
      if (!input?.trim()) {
        return null;
      }
      return input.trim().toLowerCase();
    }

    /**
     * Handles submission in submit mode
     */
    handleSubmission() {
      const input = this.isMobile ? this.customInputValue : this.answerInput.value;
      if (!input || !input.trim()) return;

      const normalizedInput = this.normalizeInput(input);
      const match = this.findMatchingExpression(normalizedInput);
      
      if (match) {
        this.solveExpression(match);
        
        // Check if puzzle is complete after solving
        if (this.isPuzzleComplete()) {
          this.renderCompletedPuzzle(
            this.root.querySelector('.puzzle-display'),
            this.root.querySelector('.input-container'),
            this.root.querySelector('.keystroke-stats')
          );
        }
      } else {
        // Increment wrong guesses counter and show error message
        this.updateGameState({
          wrongGuesses: (this.state.wrongGuesses || 0) + 1
        });
        
        this.showMessage('Incorrect!', 'error');
      }

      // Clear input
      if (this.isMobile) {
        this.customInputValue = '';
        this.updateCustomInputDisplay();
      } else {
        this.answerInput.value = '';
        this.answerInput.focus();
      }
    }
  
    /**
     * Finds an unsolved expression matching the input
     * @param {string} normalizedInput - Normalized user input
     * @returns {Object|null} Matching expression info or null if not found
     */
    findMatchingExpression(normalizedInput) {
      const cleanState = this.state.displayState.replace(/<\/?[^>]+(>|$)/g, '');
      const availableExpressions = this.findAvailableExpressions(cleanState);
    
      for (const {expression, startIndex, endIndex} of availableExpressions) {
        const solution = this.PUZZLE_DATA.solutions[expression];
        
        if (solution?.toLowerCase() === normalizedInput && 
            !this.state.solvedExpressions.has(expression)) {
          return {
            expression,
            solution,
            startIndex,
            endIndex
          };
        }
      }
    
      return null;
    }
  
    /**
     * Processes a correct solution and updates game state
     * @param {Object} match - Expression match information
     */
    solveExpression(match) {
      const { expression, solution, startIndex, endIndex } = match;
      
      const isFirstSolve = this.state.solvedExpressions.size === 0;
      
      // Generate the new puzzle display state by replacing the solved expression
      const cleanState = this.state.displayState.replace(/<\/?[^>]+(>|$)/g, '');
      const escapedSolution = solution
          .replace(/"/g, '&quot;')
          .replace(/'/g, '&#39;');
      
      const newDisplayState = 
          cleanState.slice(0, startIndex) + 
          `<mark class="solved">${escapedSolution}</mark>` + 
          cleanState.slice(endIndex);
      
      // Add new expression at the beginning of the Set to maintain reverse chronological order
      const updatedExpressions = new Set([expression, ...Array.from(this.state.solvedExpressions)]);

      // turn off tutorial prompt
      this.turnOffTutorialPulse();

      // Update game state with the new display and mark the expression as solved
      this.updateGameState({
          displayState: newDisplayState,
          solvedExpressions: updatedExpressions
      });
      
      // Show a success message (auto-clears later)
      this.showMessage('Correct!', 'success');
      
      // Clear the input based on device type:
      if (this.isMobile) {
          this.customInputValue = '';
          if (this.customInputEl) {
              this.updateCustomInputDisplay();
          }
      } else {
          if (this.answerInput) {
              this.answerInput.value = '';
          }
      }

      // Re-render the puzzle display
      requestAnimationFrame(() => {
          this.render();
      });
    }

    /**
     * Processes a solution reveal for megapeek
     * @param {Object} match - Expression match information
     */
    processSolutionReveal(expression, solution) {
      // Clean the display state first
      const cleanState = this.state.displayState.replace(/<\/?[^>]+(>|$)/g, '');
      const availableExpressions = this.findAvailableExpressions(cleanState);
      
      for (const {startIndex, endIndex} of availableExpressions) {
        const currentExpression = this.unescapeString(
          cleanState.slice(startIndex + 1, endIndex - 1).trim()
        );
        
        if (this.unescapeString(expression) === currentExpression) {
          const escapedSolution = solution
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
          
          const newDisplayState = 
            cleanState.slice(0, startIndex) + 
            `<mark class="solved">${escapedSolution}</mark>` + 
            cleanState.slice(endIndex);
    
          return newDisplayState;
        }
      }
      return null;
    }

    /************
     Hint system
    *************/
    
    /**
     * Toggles hint mode for an expression between peek (show length) and mega peek (reveal answer)
     * @param {string} expression - The expression to toggle hints for
     */
    toggleHintMode(expression) {
      // Early validation
      if (!expression || this.state.megaPeekedClues.has(expression)) {
        return;
      }
    
      // Handle mega peek (second click)
      if (this.state.hintModeClues.has(expression)) {
        this.handleMegaPeek(expression);
        return;
      }
    
      // Handle first peek
      this.handleFirstPeek(expression);
    }
  
    /**
     * Handles the first peek at an expression (shows length)
     * @param {string} expression - The expression to peek at
     */
    handleFirstPeek(expression) {
      // Add confirmation dialog for regular peek
      if (!confirm('You sure you want to peek at the first letter of this answer?')) {
        return;
      }

      this.updateGameState({
        hintModeClues: new Set([...this.state.hintModeClues, expression]),
        peekedClues: new Set([...this.state.peekedClues, expression])
      });

      this.render();
    }
  
    /**
     * Handles the mega peek action (reveals answer)
     * @param {string} expression - The expression to reveal
     */
    handleMegaPeek(expression) {
      if (!confirm('You sure you want to reveal this answer?')) {
        return;
      }

      const solution = this.PUZZLE_DATA.solutions[expression];
      if (!solution) {
        console.error('No solution found for expression:', expression);
        return;
      }

      const newDisplayState = this.processSolutionReveal(expression, solution);
      if (!newDisplayState) {
        console.error('Could not find expression in puzzle state');
        return;
      }

      this.updateGameState({
        displayState: newDisplayState,
        totalKeystrokes: this.state.totalKeystrokes + solution.length,
        megaPeekedClues: new Set([...this.state.megaPeekedClues, expression]),
        solvedExpressions: new Set([expression, ...Array.from(this.state.solvedExpressions)]),
        hintModeClues: new Set([...this.state.hintModeClues].filter(e => e !== expression))
      });

      this.render();
    }

    /***************
     Input Handling
    ****************/
    
     /**
     * Conservatively detects if the current device is a tablet (iPad or Android)
     * @returns {boolean} True if the device is confidently identified as a tablet
     */
    isTablet() {
      // IPAD DETECTION
      const isLegacyIPad = /iPad/i.test(navigator.userAgent);
      const isModernIPad = !(/iPhone|iPod/.test(navigator.userAgent)) && 
                          navigator.platform === 'MacIntel' && 
                          navigator.maxTouchPoints > 1 && 
                          !window.MSStream;
      
      // Any iPad detection is sufficient
      const isIPad = isLegacyIPad || isModernIPad;
      
      // ANDROID TABLET DETECTION
      // Standard way: Android without "Mobile" in UA string typically means tablet
      const isAndroidTablet = /Android/i.test(navigator.userAgent) && 
                            !/Mobile/i.test(navigator.userAgent);
      
      // Alternative Android tablet signals                     
      const hasExplicitTabletIdentifier = /Tablet|Tab/i.test(navigator.userAgent) ||
                                        /SM-T[0-9]{3}/i.test(navigator.userAgent); // Samsung Galaxy Tab model numbers
      
      // GENERIC TABLET SIZE CHECK (as backup, not primary signal)
      // Most tablets have at least one dimension ≥ 768px
      const hasTabletDimensions = Math.max(
        screen.width, 
        screen.height, 
        window.innerWidth, 
        window.innerHeight
      ) >= 768;
      
      // EXPLICIT PHONE DETECTION (to avoid false positives)
      const isExplicitlyPhone = /iPhone|iPod|Android.*Mobile|Mobile.*Android|BlackBerry|IEMobile|Opera Mini|Windows Phone/i.test(navigator.userAgent);
      
      // Combined tablet detection:
      return isIPad || ((isAndroidTablet || hasExplicitTabletIdentifier) && 
                        hasTabletDimensions && 
                        !isExplicitlyPhone);
    }

    /**
     * Sets up input handlers based on current mode
     */
    setupInputHandlers() {
      if (this.useCustomKeyboard) {
        // Use custom keyboard for phones
        this.setupMobileInput();
      } else {
        // Use native keyboard for tablets and desktops
        this.setupDesktopInput();
      }
    }    
  
    /**
     * Sets up desktop input handlers
     */
    setupDesktopInput() {
      this.answerInput = this.root.querySelector('.answer-input');
      const submitButton = this.root.querySelector('.submit-answer');
      
      if (!this.answerInput) {
        console.error('Answer input element not found');
        return;
      }
      
      if (this.inputMode === 'submit') {
        // Submit mode - only handle input on submit button click
        if (submitButton) {
          submitButton.addEventListener('click', () => {
            this.handleSubmission();
          });
        }
        
        // Handle Enter key press
        this.answerInput.addEventListener('keypress', (e) => {
          if (e.key === 'Enter') {
            e.preventDefault();
            
            // Apply visual feedback if submit button exists
            if (submitButton) {
              submitButton.style.transform = 'scale(0.95)';
              submitButton.style.backgroundColor = '#1e40af';
              
              // Remove the styles after a short delay
              setTimeout(() => {
                submitButton.style.transform = '';
                submitButton.style.backgroundColor = '';
              }, 85);
            }
            
            this.handleSubmission();
          }
        });
      } else {
        // Classic mode - auto-snap answers as typed
        this.answerInput.addEventListener('input', (e) => {
          this.handleInput(e.target.value);
        });
      }
      
      this.answerInput.addEventListener('keydown', (e) => {
        this.handleKeyDown(e);
      });

      this.answerInput.addEventListener('paste', (e) => {
        e.preventDefault();
      });

      this.answerInput.focus();
    }

    /**
     * Sets up mobile input handlers
     */
    setupMobileInput() {
      this.customInputValue = this.customInputValue || '';
      this.customInputEl = this.root.querySelector('.custom-input');
      
      if (!this.customInputEl) {
        console.error('Custom input display element not found');
        return;
      }
      
      // Clean up old placeholder if it exists
      const oldPlaceholder = this.customInputEl.querySelector('.placeholder');
      if (oldPlaceholder) {
        oldPlaceholder.remove();
      }
      
      // Create fresh placeholder
      const placeholderEl = document.createElement('span');
      placeholderEl.className = 'placeholder';
      placeholderEl.style.color = '#9ca3af';
      placeholderEl.textContent = this.inputMode === 'classic' ? 'start typing answers...' : 'type any answer...';
      this.customInputEl.appendChild(placeholderEl);

      // Set up the mobile submit button (if in submit mode)
      if (this.inputMode === 'submit') {
        const mobileSubmitButton = this.root.querySelector('.mobile-submit-button');
        if (mobileSubmitButton) {
          mobileSubmitButton.addEventListener('click', () => {
            this.handleSubmission();
          });
        }
      }

      // Clean up any existing listeners first
      const oldKeyboardKeys = this.root.querySelectorAll('.keyboard-key');
      oldKeyboardKeys.forEach(keyEl => {
        const newKeyEl = keyEl.cloneNode(true);
        keyEl.parentNode.replaceChild(newKeyEl, keyEl);
      });

      // Attach fresh click listeners to keyboard keys
      const keyboardKeys = this.root.querySelectorAll('.keyboard-key');
      keyboardKeys.forEach(keyEl => {
        keyEl.addEventListener('click', () => {
          const key = keyEl.getAttribute('data-key');
          
          if (key === 'backspace') {
            this.customInputValue = this.customInputValue.slice(0, -1);
          } else if (key === '123' || key === 'ABC') {
            this.isAltKeyboard = !this.isAltKeyboard;
            // Re-render the keyboard
            const keyboardContainer = this.root.querySelector('.custom-keyboard');
            if (keyboardContainer) {
              keyboardContainer.innerHTML = this.generateKeyboardButtonsHTML();
            }
            // Re-attach event listeners while preserving input
            this.setupMobileInput();
            return;
          } else {
            this.customInputValue += key;
            
            this.updateGameState({ totalKeystrokes: this.state.totalKeystrokes + 1 });
            
          }
          
          this.updateCustomInputDisplay();
          
          // In classic mode, check for solution match after each key
          if (this.inputMode === 'classic') {
            this.handleInput(this.customInputValue);
          }
        });

        // Prevent dragging/swiping on the key
        keyEl.addEventListener('touchmove', (e) => {
          e.preventDefault();
        }, { passive: false });
      });

      // Enable :active states on iOS
      document.addEventListener('touchstart', () => {}, false);
      
      // Update display to show current input value
      this.updateCustomInputDisplay();
    }

    updateCustomInputDisplay() {
      if (!this.customInputEl) return;
    
      // Find or create placeholder
      let placeholderEl = this.customInputEl.querySelector('.placeholder');
      if (!placeholderEl) {
          placeholderEl = document.createElement('span');
          placeholderEl.className = 'placeholder';
          placeholderEl.style.color = '#9ca3af';
          placeholderEl.textContent = 'type any answer...';
      }
    
      // Clear the input
      this.customInputEl.innerHTML = '';
    
      // Show either placeholder or input value
      if (this.customInputValue.length > 0) {
          this.customInputEl.textContent = this.customInputValue;
      } else {
          this.customInputEl.appendChild(placeholderEl);
      }
    }

    /**
     * Handles keydown events for keystroke tracking
     * @param {KeyboardEvent} event - The keyboard event
     */
    handleKeyDown(event) {
       // turn off tutorial pulse
      // Only count meaningful keystrokes (not control keys)
      if (this.isCountableKeystroke(event)) {
        this.updateGameState({
          totalKeystrokes: this.state.totalKeystrokes + 1
        });
    
      }
    }
  
    /**
     * Determines if a keystroke should be counted
     * @param {KeyboardEvent} event - The keyboard event
     * @returns {boolean} Whether the keystroke should be counted
     */
    isCountableKeystroke(event) {
      // Only count single printable characters
      return event.key.length === 1 && 
             /^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/? ]$/.test(event.key);
    }

    /***********
     Navigation
    ************/
    
    /**
     * Creates and attaches the date picker functionality
     */
    setupDatePicker() {
      // Find the date element to attach the picker to
      const dateElement = this.root.querySelector('.puzzle-date');
      if (!dateElement) return;
      
      // Remove any existing date picker containers to prevent duplicates
      const existingContainers = this.root.querySelectorAll('.date-picker-container');
      existingContainers.forEach(container => container.remove());
      
      // Clean up any existing event listeners by cloning the element
      const dateParent = dateElement.parentNode;
      const newDateElement = dateElement.cloneNode(true);
      dateParent.replaceChild(newDateElement, dateElement);
      
      // Make it look clickable
      newDateElement.style.cursor = 'pointer';
      newDateElement.title = 'Tap to open puzzle calendar';
      
      // Add visual indication for mobile users
      const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
      if (isMobile) {
        // Add a calendar icon or more visible indicator for mobile
        dateParent.style.position = 'relative';
        
        // Enhance tap target size for mobile
        newDateElement.style.padding = '8px 4px';
        newDateElement.style.position = 'relative';
        newDateElement.style.zIndex = '1';
      }
      
      // Create a container for the date picker (initially hidden)
      const datePickerContainer = document.createElement('div');
      datePickerContainer.className = 'date-picker-container';
      datePickerContainer.style.display = 'none';
      datePickerContainer.style.position = 'absolute';
      datePickerContainer.style.top = '100%';
      datePickerContainer.style.left = '50%';
      datePickerContainer.style.transform = 'translateX(-50%)';
      datePickerContainer.style.zIndex = '1500'; // Increased z-index to ensure visibility
      datePickerContainer.style.backgroundColor = 'white';
      datePickerContainer.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
      datePickerContainer.style.borderRadius = '0.5rem';
      datePickerContainer.style.padding = '1rem';
      datePickerContainer.style.marginTop = '0.5rem';
      datePickerContainer.style.maxWidth = isMobile ? '300px' : '340px';
      datePickerContainer.style.width = isMobile ? '90vw' : '100%';
      datePickerContainer.style.boxSizing = 'border-box'; // Ensure padding is included in width
      
      // Insert the container after the date element
      dateParent.style.position = 'relative';
      dateParent.style.zIndex = '100'; // Ensure parent has reasonable z-index
      dateParent.appendChild(datePickerContainer);
      
      // Toggle function to open/close the date picker
      const toggleDatePicker = (e) => {
        // Prevent default to avoid any browser handling
        e.preventDefault();
        e.stopPropagation();
        
        // Add log for debugging
        console.log('Date picker toggle clicked', {
          containerDisplay: datePickerContainer.style.display,
          isCompletionState: this.isPuzzleComplete()
        });
        
        if (datePickerContainer.style.display === 'none') {
          this.renderDatePicker(datePickerContainer);
          datePickerContainer.style.display = 'block';
          
          // Create a close handler that works for both mouse and touch
          const closeCalendar = (event) => {
            // Don't close if clicked on the date element or within the picker
            if (!datePickerContainer.contains(event.target) && event.target !== newDateElement) {
              datePickerContainer.style.display = 'none';
              document.removeEventListener('click', closeCalendar);
              document.removeEventListener('touchend', closeCalendar);
            }
          };
          
          // Add both mouse and touch event listeners to handle closing
          document.addEventListener('click', closeCalendar);
          document.addEventListener('touchend', closeCalendar);
        } else {
          datePickerContainer.style.display = 'none';
        }
      };
      
      // Add event listeners for both click and touch events with preventTouchFocus fix
      const preventTouchFocus = (e) => {
        e.preventDefault(); // Prevent focus/highlight issues on some mobile browsers
        toggleDatePicker(e);
      };
      
      newDateElement.addEventListener('click', toggleDatePicker);
      newDateElement.addEventListener('touchend', preventTouchFocus);
      
      // Add visible debug helper in development environments
      if (this.isDevelopmentEnvironment()) {
        newDateElement.setAttribute('data-debug', 'date-picker-trigger');
      }
    }

    /**
     * Renders the date picker with available puzzles
     * @param {HTMLElement} container - The container to render the date picker in
     */
    async renderDatePicker(container) {
      // Show loading state
      container.innerHTML = '<div class="loading-calendar">Loading calendar...</div>';
      
      try {
        // Fetch available puzzles
        const availableDates = await this.fetchAvailablePuzzleDates();
        if (!availableDates || availableDates.length === 0) {
          container.innerHTML = '<div class="error">No puzzles available</div>';
          return;
        }
        
        // Get completion status for all puzzles
        const puzzleStatuses = this.getPuzzleCompletionStatuses(availableDates);
        
        // Determine the current month and year (in NYC timezone)
        const currentDateNYC = new Date(this.getNYCDate());
        let currentViewMonth = currentDateNYC.getMonth();
        let currentViewYear = currentDateNYC.getFullYear();
        
        // Render initial calendar
        this.renderMonthCalendar(container, currentViewMonth, currentViewYear, availableDates, puzzleStatuses);
        
      } catch (error) {
        console.error('Error rendering date picker:', error);
        container.innerHTML = '<div class="error">Failed to load calendar</div>';
      }
    }

    /**
     * Renders a specific month's calendar
     * @param {HTMLElement} container - The container element
     * @param {number} month - Month to render (0-11)
     * @param {number} year - Year to render
     * @param {string[]} availableDates - Array of available puzzle dates
     * @param {Object} puzzleStatuses - Map of dates to completion status
     */
    renderMonthCalendar(container, month, year, availableDates, puzzleStatuses) {
      // Calculate NYC date strings correctly
      const getConsistentDateStr = (year, month, day) => {
        // This ensures we're constructing dates consistently as YYYY-MM-DD
        return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
      };
      
      // Get month info - using local date objects for display purposes only
      const monthStart = new Date(year, month, 1);
      const monthName = monthStart.toLocaleString('en-US', { month: 'long', year: 'numeric' });
      
      // Get days in month
      const daysInMonth = new Date(year, month + 1, 0).getDate();
      
      // Get the day of week the month starts on (0 = Sunday, 6 = Saturday)
      const startDay = monthStart.getDay();
      
      // Get today's date in NYC
      const todayNYC = this.getNYCDate();
      
      // Create calendar HTML
      let calendarHTML = `
        <div class="date-picker-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
          <button class="month-nav prev" style="background: none; border: none; cursor: pointer; font-size: 1.2rem;">&lsaquo;</button>
          <h3 style="margin: 0; text-align: center; font-size: 1.2rem;">${monthName}</h3>
          <button class="month-nav next" style="background: none; border: none; cursor: pointer; font-size: 1.2rem;">&rsaquo;</button>
        </div>
        
        <div class="weekdays" style="display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: bold; margin-bottom: 0.5rem;">
          <div>Su</div>
          <div>Mo</div>
          <div>Tu</div>
          <div>We</div>
          <div>Th</div>
          <div>Fr</div>
          <div>Sa</div>
        </div>
        
        <div class="calendar-grid" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: 100%;">
      `;
      
      // Add empty cells for days before the month starts
      for (let i = 0; i < startDay; i++) {
        calendarHTML += `<div class="empty-day"></div>`;
      }
      
      // Add cells for each day in the month
      for (let day = 1; day <= daysInMonth; day++) {
        // Format date string consistently
        const dateStr = getConsistentDateStr(year, month, day);
        
        // Check if this date has a puzzle available
        const isPuzzleAvailable = availableDates.includes(dateStr);
        
        // Get puzzle status for this date
        const puzzleStatus = puzzleStatuses[dateStr] || 'unsolved';
        
        // Determine if this is today's date
        const isToday = dateStr === todayNYC;
        
        // Determine if this is the current puzzle date
        const isCurrentPuzzle = dateStr === this.currentPuzzleDate;
        
        // Determine future dates (not yet available)
        const isFutureDate = dateStr > todayNYC && !this.isDevelopmentEnvironment();
        
      // Status-specific styles
        let statusStyle = '';
        if (isPuzzleAvailable) {
          switch (puzzleStatus) {
            case 'complete':
              statusStyle = 'background-color: #c6f6d5; color: #22543d; border: 1px solid #9ae6b4;';
              break;
            case 'started':
              statusStyle = 'background-color: #fefcbf; color: #744210; border: 1px solid #f6e05e;';
              break;
            case 'unsolved':
              statusStyle = 'background-color: #e9f5f9; color: #2c5282; border: 1px solid #bee3f8;';
              break;
            default:
              statusStyle = 'background-color: #fff; color: #1a202c; border: 1px solid #e2e8f0;';
          }
        } else {
          // No puzzle available
          statusStyle = 'background-color: #f9f9f9; color: #a0aec0; border: 1px solid #edf2f7;';
        }
        
        // Today and current puzzle styles
        const todayStyle = isToday ? 'font-weight: bold; border: 2px solid #4a5568;' : '';
        const currentStyle = isCurrentPuzzle ? 'box-shadow: 0 0 0 2px #4299e1;' : '';
        
        // Cell classes and attributes
        const cellClass = isPuzzleAvailable ? 'date-cell has-puzzle' : 'date-cell no-puzzle';
        const disabledAttr = (isFutureDate || !isPuzzleAvailable) ? 'disabled="true"' : '';
        const dataAttr = isPuzzleAvailable ? `data-date="${dateStr}" data-status="${puzzleStatus}"` : '';
        
        // Add cell to calendar
        calendarHTML += `
          <div 
            class="${cellClass}" 
            ${dataAttr}
            ${disabledAttr}
            style="
              padding: 0.4rem 0; 
              border-radius: 0.375rem; 
              text-align: center;
              ${isFutureDate || !isPuzzleAvailable ? 'cursor: default; opacity: 0.5;' : 'cursor: pointer;'}
              ${statusStyle}
              ${todayStyle}
              ${currentStyle}
            "
            title="${this.formatDateMonthDay(dateStr)}${isPuzzleAvailable ? ` (${puzzleStatus})` : ' (no puzzle)'}"
          >
            ${day}
          </div>
        `;
      }
      
      calendarHTML += `
        </div>
        <div class="calendar-footer" style="margin-top: 1rem; font-size: 0.8rem; display: flex; justify-content: center; gap: 1rem;">
          <span style="display: flex; align-items: center;">
            <span style="display: inline-block; width: 12px; height: 12px; margin-right: 4px; background-color: #c6f6d5; border: 1px solid #9ae6b4; border-radius: 2px;"></span> Complete
          </span>
          <span style="display: flex; align-items: center;">
            <span style="display: inline-block; width: 12px; height: 12px; margin-right: 4px; background-color: #fefcbf; border: 1px solid #f6e05e; border-radius: 2px;"></span> Started
          </span>
          <span style="display: flex; align-items: center;">
            <span style="display: inline-block; width: 12px; height: 12px; margin-right: 4px; background-color: #e9f5f9; border: 1px solid #bee3f8; border-radius: 2px;"></span> Available
          </span>
        </div>
      `;
      
      // Set the calendar HTML
      container.innerHTML = calendarHTML;
      
      // Add navigation handlers
      this.setupMonthNavigation(container, month, year, availableDates, puzzleStatuses);
      
      // Add date selection handlers
      this.setupDateSelectionHandlers(container);
    }

    /**
     * Format date as "Month Day" (e.g. "March 15")
     * @param {string} dateStr - Date string in YYYY-MM-DD format
     * @returns {string} Formatted date
     */
    formatDateMonthDay(dateStr) {
      // Parse the YYYY-MM-DD string directly
      const [year, month, day] = dateStr.split('-');
      
      // Create a date string that displays as intended
      return `${new Date(Number(year), Number(month) - 1, Number(day)).toLocaleDateString('en-US', { 
        month: 'long', 
        day: 'numeric' 
      })}`;
    }

    /**
     * Sets up month navigation buttons
     * @param {HTMLElement} container - Container element
     * @param {number} currentMonth - Current month view (0-11)
     * @param {number} currentYear - Current year view
     * @param {string[]} availableDates - Available puzzle dates
     * @param {Object} puzzleStatuses - Puzzle completion statuses
     */
    setupMonthNavigation(container, currentMonth, currentYear, availableDates, puzzleStatuses) {
      const prevButton = container.querySelector('.month-nav.prev');
      const nextButton = container.querySelector('.month-nav.next');
      
      // Make buttons more touch-friendly
      const enhanceButton = (button) => {
        button.style.width = '36px';
        button.style.height = '36px';
        button.style.fontSize = '1.5rem';
        button.style.cursor = 'pointer';
        button.style.userSelect = 'none';
        button.style.touchAction = 'manipulation';
      };
      
      enhanceButton(prevButton);
      enhanceButton(nextButton);
      
      // Handler for previous month - Works with both mouse and touch
      const handlePrevMonth = (e) => {
        e.preventDefault();
        e.stopPropagation();
        
        let newMonth = currentMonth - 1;
        let newYear = currentYear;
        
        if (newMonth < 0) {
          newMonth = 11;
          newYear--;
        }
        
        this.renderMonthCalendar(container, newMonth, newYear, availableDates, puzzleStatuses);
      };
      
      // Handler for next month - Works with both mouse and touch
      const handleNextMonth = (e) => {
        e.preventDefault();
        e.stopPropagation();
        
        let newMonth = currentMonth + 1;
        let newYear = currentYear;
        
        if (newMonth > 11) {
          newMonth = 0;
          newYear++;
        }
        
        this.renderMonthCalendar(container, newMonth, newYear, availableDates, puzzleStatuses);
      };
      
      // Add event listeners for both mouse and touch events
      prevButton.addEventListener('click', handlePrevMonth);
      prevButton.addEventListener('touchend', handlePrevMonth);
      
      nextButton.addEventListener('click', handleNextMonth);
      nextButton.addEventListener('touchend', handleNextMonth);
    }

    /**
     * Sets up event handlers for date selection
     * @param {HTMLElement} container - Calendar container
     */
    setupDateSelectionHandlers(container) {
      // Find all date cells with puzzles
      const dateCells = container.querySelectorAll('.date-cell.has-puzzle:not([disabled])');
      
      dateCells.forEach(cell => {
        // Create a visual feedback effect for touch
        cell.style.transition = 'transform 0.1s ease, opacity 0.1s ease';
        
        // Enhanced tap/click area
        cell.style.margin = '1px';
        cell.style.position = 'relative';
        
        // Handler function that works for both click and touch
        const handleDateSelection = async (e) => {
          e.preventDefault();
          e.stopPropagation(); // Prevent closing the calendar immediately
          
          // Visual feedback
          cell.style.transform = 'scale(0.95)';
          cell.style.opacity = '0.8';
          
          // Reset visual feedback after a short delay
          setTimeout(() => {
            cell.style.transform = 'scale(1)';
            cell.style.opacity = '1';
          }, 150);
          
          const targetDate = cell.dataset.date;
          if (!targetDate || targetDate === this.currentPuzzleDate) {
            // Already on this puzzle or invalid date, just close the picker
            container.style.display = 'none';
            return;
          }
          
          // Navigate to selected puzzle
          container.style.display = 'none';
          
          await this.navigateToPuzzle(targetDate);
        };
        
        // Add both mouse and touch event listeners
        cell.addEventListener('click', handleDateSelection);
        cell.addEventListener('touchend', handleDateSelection);
      });
    }

    /**
     * Fetches all available puzzle dates from the API
     * @returns {Promise<string[]>} Array of available dates in YYYY-MM-DD format
     */
    async fetchAvailablePuzzleDates() {
      try {
        const response = await fetch(this.API_ENDPOINT, {
          cache: 'no-store',
          headers: {
            'Cache-Control': 'no-cache',
            'Pragma': 'no-cache'
          }
        });
        
        if (!response.ok) {
          throw new Error('Failed to fetch available puzzles');
        }
        
        const puzzles = await response.json();
        
        // Filter out future puzzles if not in dev environment
        const today = this.getNYCDate();
        const isDevEnvironment = this.isDevelopmentEnvironment();
        
        return puzzles
          .map(puzzle => typeof puzzle === 'string' ? puzzle : (puzzle.puzzleDate || puzzle))
          .filter(date => isDevEnvironment || date <= today)
          .sort();
          
      } catch (error) {
        console.error('Error fetching available puzzles:', error);
        return [];
      }
    }

    /**
     * Scans localStorage to determine completion status for all puzzles
     * @param {string[]} dates - Array of puzzle dates to check
     * @returns {Object} Map of dates to completion status
     */
    getPuzzleCompletionStatuses(dates) {
      const statusMap = {};
      
      dates.forEach(date => {
        const storageKey = `bracketPuzzle_${date}`;
        const savedData = localStorage.getItem(storageKey);
        
        if (!savedData) {
          // No saved data - puzzle exists but not started
          statusMap[date] = 'unsolved';
        } else {
          try {
            const puzzleData = JSON.parse(savedData);
            
            // Check if puzzle is complete
            if (puzzleData.isComplete || !puzzleData.displayState.includes('[')) {
              statusMap[date] = 'complete';
            } else if (this.isPuzzleStarted(puzzleData)) {
              statusMap[date] = 'started';
            } else {
              statusMap[date] = 'unsolved';
            }
          } catch (e) {
            console.error('Error parsing saved puzzle data:', e);
            statusMap[date] = 'unsolved';
          }
        }
      });
      
      return statusMap;
    }

    /**
     * Checks for available puzzles before and after current date
     * @param {string} currentDate - Current puzzle date in YYYY-MM-DD format
     */
    async checkAdjacentPuzzles(currentDate) {
      try {
        // Get current NYC date for availability check
        const nycDate = this.getNYCDate();
        const isDevEnvironment = this.isDevelopmentEnvironment();
        
        // 1. Fetch available puzzles
        const response = await fetch(this.API_ENDPOINT, {
          cache: 'no-store',
          headers: {
            'Cache-Control': 'no-cache',
            'Pragma': 'no-cache'
          }
        });
        
        if (!response.ok) {
          throw new Error('Unable to fetch puzzle list');
        }
        
        const puzzles = await response.json();
        if (!puzzles?.length) {
          console.log('No puzzles available');
          return this.updateAdjacentPuzzles(null, null);
        }
  
        // 2. Extract and normalize dates
        const puzzleDates = puzzles
          .map(puzzle => puzzle.puzzleDate || puzzle.date)
          .filter(Boolean)
          .sort();  // Sort chronologically
        
        // 3. Find current puzzle's position
        const currentIndex = puzzleDates.indexOf(currentDate);
        if (currentIndex === -1) {
          console.warn('Current puzzle not found in available puzzles');
          return this.updateAdjacentPuzzles(null, null);
        }
        
        // 4. Determine previous puzzle (always available)
        const previousPuzzle = currentIndex > 0 ? puzzleDates[currentIndex - 1] : null;
        
        // 5. Determine next puzzle (with availability check)
        let nextPuzzle = null;
        if (currentIndex < puzzleDates.length - 1) {
          const potentialNext = puzzleDates[currentIndex + 1];
          // Allow future puzzles in dev, restrict in production
          if (isDevEnvironment || potentialNext <= nycDate) {
            nextPuzzle = potentialNext;
          }
        }
        
        // 6. Update navigation state
        this.updateAdjacentPuzzles(previousPuzzle, nextPuzzle);
        
      } catch (error) {
        console.error('Error checking adjacent puzzles:', error);
        // Fail gracefully - disable navigation if we can't determine availability
        this.updateAdjacentPuzzles(null, null);
      }
    }
  
    /**
     * Updates navigation state and UI for adjacent puzzles
     * @param {string|null} previous - Previous puzzle date
     * @param {string|null} next - Next puzzle date
     */
    updateAdjacentPuzzles(previous, next) {
      // Update state
      this.adjacentPuzzleDates = { previous, next };
      
      // Update UI
      const prevButton = this.root.querySelector('.nav-button.prev');
      const nextButton = this.root.querySelector('.nav-button.next');
      
      if (prevButton) {
        prevButton.disabled = !previous;
        prevButton.style.opacity = previous ? '1' : '0.3';
        prevButton.style.cursor = previous ? 'pointer' : 'default';
      }
      
      if (nextButton) {
        nextButton.disabled = !next;
        nextButton.style.opacity = next ? '1' : '0.3';
        nextButton.style.cursor = next ? 'pointer' : 'default';
      }
    }
    
    /**
     * Improved navigateToPuzzle method to handle input mode properly
     * @param {string} targetDate - Date to navigate to
     */
    async navigateToPuzzle(targetDate) {
      try {
        console.log('Starting navigation to date:', targetDate);
        this.setNavigationLoading(true);
        
        // Store the previous date before changing
        const previousDate = this.currentPuzzleDate;
        
        // Store the current preferred input mode (from localStorage)
        const preferredInputMode = this.getInputMode();
        
        // Reset mobile input state before navigation
        if (this.isMobile) {
          this.customInputValue = '';
          this.customInputEl = null;
        }

        // Fetch and process new puzzle data
        await this.fetchPuzzleForDate(targetDate);
        
        if (!this.PUZZLE_DATA) {
          throw new Error(`Failed to fetch puzzle for ${targetDate}`);
        }
        
        // Important: Update current puzzle date AFTER successful fetch but BEFORE loading state
        this.currentPuzzleDate = targetDate;
        this.updateURL(targetDate);

        // Check for available adjacent puzzles
        await this.checkAdjacentPuzzles(targetDate);

        // Reset state to prevent leakage
        this.state = {
          displayState: '',
          solvedExpressions: new Set(),
          message: '',
          messageType: null,
          totalKeystrokes: 0,
          minimumKeystrokes: 0,
          activeClues: [],
          hintModeClues: new Set(),
          peekedClues: new Set(),
          megaPeekedClues: new Set(),
          wrongGuesses: 0,
          helpVisible: false,
          previousDisplay: null
        };

        // Try to load saved state for this puzzle with explicit date parameter
        const savedState = await this.loadSavedState(targetDate);
        
        // Initialize game state
        if (savedState && savedState.puzzleDate === targetDate) { // Extra validation
          console.log(`Loading saved state for ${targetDate}`);
          
          // Check if the saved state has an input mode
          const savedInputMode = savedState.inputMode;
          
          // If the puzzle has been started (has progress), respect its saved mode
          // Otherwise use the preferred mode
          const hasPuzzleProgress = this.isPuzzleStarted(savedState);
          
          // Set the input mode based on progress status
          if (hasPuzzleProgress && savedInputMode) {
            this.inputMode = savedInputMode;
          } else {
            this.inputMode = preferredInputMode;
          }
          
          // Update rankCalculator with the correct input mode
          this.rankCalculator.inputMode = this.inputMode;
          
          this.updateGameState({
            displayState: savedState.displayState,
            solvedExpressions: new Set(savedState.solvedExpressions || []),
            totalKeystrokes: savedState.totalKeystrokes || 0,
            minimumKeystrokes: savedState.minimumKeystrokes || this.calculateMinimumKeystrokes(),
            activeClues: this.findActiveClues(savedState.displayState),
            hintModeClues: new Set(savedState.hintModeClues || []),
            peekedClues: new Set(savedState.peekedClues || []),
            megaPeekedClues: new Set(savedState.megaPeekedClues || []),
            wrongGuesses: savedState.wrongGuesses || 0,
            helpVisible: savedState.helpVisible || false,
            previousDisplay: savedState.previousDisplay || null
          });
        } else {
          console.log(`Initializing fresh state for ${targetDate}`);
          
          // For a fresh puzzle, use the preferred input mode
          this.inputMode = preferredInputMode;
          
          // Update rankCalculator with the correct input mode
          this.rankCalculator.inputMode = this.inputMode;
          
          this.updateGameState({
            displayState: this.PUZZLE_DATA.initialPuzzle,
            solvedExpressions: new Set(),
            message: '',
            totalKeystrokes: 0,
            minimumKeystrokes: this.calculateMinimumKeystrokes(),
            activeClues: this.findActiveClues(this.PUZZLE_DATA.initialPuzzle),
            hintModeClues: new Set(),
            peekedClues: new Set(),
            megaPeekedClues: new Set(),
            wrongGuesses: 0,
            helpVisible: false,
            previousDisplay: null
          });
        }
        
        // Reset UI and reattach handlers
        this.root.innerHTML = this.generateInitialHTML();
        this.setupInputHandlers();
        this.setupShareButtons();
        this.setupPuzzleDisplay();
        this.setupNavigationHandlers();
        
        // Render with new state
        this.render();

        this.setupDatePicker();
      } catch (error) {
        console.error('Navigation failed:', error);
        this.showErrorMessage('Failed to load puzzle. Please try again.');
      } finally {
        this.setNavigationLoading(false);
      }
    }
  
    /**
     * Sets the loading state for navigation buttons
     */
    setNavigationLoading(isLoading) {
      const prevButton = this.root.querySelector('.nav-button.prev');
      const nextButton = this.root.querySelector('.nav-button.next');
      
      if (prevButton) {
        prevButton.disabled = isLoading || !this.adjacentPuzzleDates.previous;
        prevButton.style.cursor = isLoading ? 'wait' : 'pointer';
        prevButton.style.opacity = prevButton.disabled ? '0.5' : '1';
      }
      if (nextButton) {
        nextButton.disabled = isLoading || !this.adjacentPuzzleDates.next;
        nextButton.style.cursor = isLoading ? 'wait' : 'pointer';
        nextButton.style.opacity = nextButton.disabled ? '0.5' : '1';
      }
    }
    
    /**
     * Sets up navigation button event handlers
     */
    setupNavigationHandlers() {
      // First remove any existing handlers to prevent duplicates
      this.cleanupEventListeners();
      
      const prevButton = this.root.querySelector('.nav-button.prev');
      const nextButton = this.root.querySelector('.nav-button.next');
      
      // Track if navigation is in progress to prevent double-clicks
      let isNavigating = false;
      
      // Previous puzzle handler
      if (prevButton) {
        prevButton.addEventListener('click', async () => {
          if (isNavigating || !this.adjacentPuzzleDates.previous) return;
          
          try {
            isNavigating = true;
            prevButton.style.cursor = 'wait';
            await this.navigateToPuzzle(this.adjacentPuzzleDates.previous);
          } catch (error) {
            console.error('Navigation failed:', error);
            this.showErrorMessage('Failed to load previous puzzle. Please try again.');
          } finally {
            isNavigating = false;
            prevButton.style.cursor = this.adjacentPuzzleDates.previous ? 'pointer' : 'default';
          }
        });
      }
      
      // Next puzzle handler
      if (nextButton) {
        nextButton.addEventListener('click', async () => {
          if (isNavigating || !this.adjacentPuzzleDates.next) return;
          
          try {
            isNavigating = true;
            nextButton.style.cursor = 'wait';
            await this.navigateToPuzzle(this.adjacentPuzzleDates.next);
          } catch (error) {
            console.error('Navigation failed:', error);
            this.showErrorMessage('Failed to load next puzzle. Please try again.');
          } finally {
            isNavigating = false;
            nextButton.style.cursor = this.adjacentPuzzleDates.next ? 'pointer' : 'default';
          }
        });
      }
    }
  
    /**
     * Removes existing event listeners to prevent duplicates
     */
    cleanupEventListeners() {
      const prevButton = this.root.querySelector('.nav-button.prev');
      const nextButton = this.root.querySelector('.nav-button.next');
      
      if (prevButton) {
        const newPrevButton = prevButton.cloneNode(true);
        prevButton.parentNode.replaceChild(newPrevButton, prevButton);
      }
      
      if (nextButton) {
        const newNextButton = nextButton.cloneNode(true);
        nextButton.parentNode.replaceChild(newNextButton, nextButton);
      }
    }

    /*************
     UI rendering
    **************/
    
    /*
    * Main render method - updates all UI elements based on current state
    */
    render() {
      const elements = this.getDOMElements();
      
      // Early return if required elements aren't found
      if (!this.validateElements(elements)) {
          console.error('Required DOM elements not found');
          return;
      }

      this.renderPuzzleDisplay(elements.puzzleDisplay);
      this.renderSolvedExpressions(elements.expressionsList);
      this.renderMessage(elements.message);
      
      // Handle completion state
      if (this.isPuzzleComplete()) {
          this.renderCompletedPuzzle(elements.puzzleDisplay, elements.inputContainer, elements.keystrokeStats);
      } else {
          this.renderInProgressState(elements.keystrokeStats);
      }
    }

    /**
     * Renders the main puzzle display
     * @param {HTMLElement} displayElement - Puzzle display element
     */
    renderPuzzleDisplay(displayElement) {
      let highlightedState = this.applyActiveClueHighlights(this.state.displayState);
      highlightedState = this.replaceUnderscoreSequences(highlightedState);
      displayElement.innerHTML = highlightedState;
    }

    replaceUnderscoreSequences(text) {
      // Regular expression to match sequences of 2 or more underscores
      return text.replace(/_{2,}/g, (match) => {
        // Calculate width based on number of underscores (em units work well here)
        const width = (match.length * 0.6) + 'em';
        return `<span class="blank-line" style="width: ${width};"></span>`;
      });
    }
  
    /**
     * Renders the solved expressions list
     * @param {HTMLElement} listElement - Expressions list element
     */
    renderSolvedExpressions(listElement) {
      if (!listElement) return;
      
      const solvedHTML = Array.from(this.state.solvedExpressions)
          .map(expression => this._generateSolvedExpressionItemHTML(
              expression, 
              this.PUZZLE_DATA.solutions[expression]
          ))
          .join('');
      
      listElement.innerHTML = solvedHTML;
    }
  
    /**
     * Renders the current message
     * @param {HTMLElement} messageElement - Message element
     */
    renderMessage(messageElement) {
      if (!messageElement) return;
    
      if (this.state.message) {
        messageElement.textContent = this.state.message;
        messageElement.className = `message ${this.state.messageType || 'success'}`;
        
        // Apply error styling if needed
        if (this.state.messageType === 'error') {
          messageElement.style.cssText = `
            padding: 1rem;
            margin: 1rem;
            background-color: #fee2e2;
            color: #ef4444;
            border-radius: 0.375rem;
          `;
        } else {
          messageElement.style.cssText = ''; // Reset styles for non-error messages
        }
      } else {
        messageElement.textContent = '';
        messageElement.className = 'message';
        messageElement.style.cssText = '';
      }
    }
  
    /**
     * Renders the in-progress state
     * @param {HTMLElement} statsElement - Stats element
     */
    renderInProgressState(statsElement) {
      // Hide stats during gameplay
      statsElement.style.display = 'none';
    }

    renderCompletedPuzzle(puzzleDisplay, inputContainer, keystrokeStats) {
      // Validate required elements
      if (!puzzleDisplay || !inputContainer || !keystrokeStats) {
          console.error('Missing required elements for completion rendering');
          return;
      }
    
      // Hide the input container (for both desktop and mobile)
      inputContainer.style.display = 'none';
      
      // Set up the completed state
      this.setupCompletionState(puzzleDisplay);
    
      // Use the puzzle display state; if the completion text isn't already present, prepend it
      const hasCompletionText = this.state.displayState.includes(this.PUZZLE_DATA.completionText);
      const finalDisplayText = hasCompletionText 
          ? this.state.displayState 
          : `<strong>${this.PUZZLE_DATA.completionText}</strong>\n\n${this.state.displayState}`;
      puzzleDisplay.innerHTML = finalDisplayText;
    
      // Remove any existing completion message to avoid duplicates
      const existingCompletionMessage = this.root.querySelector('.completion-message');
      if (existingCompletionMessage) {
          existingCompletionMessage.remove();
      }
      
      // Find the puzzle-content container
      const puzzleContent = this.root.querySelector('.puzzle-content');
      if (!puzzleContent) {
          console.error('Could not find puzzle-content container');
          return;
      }
    
      // Create the completion message
      const completionMessageWrapper = document.createElement('div');
      completionMessageWrapper.className = 'completion-message';
      completionMessageWrapper.innerHTML = this.generateCompletionMessage();
    
      // Insert after puzzle display
      const insertAfterElement = puzzleDisplay;
      if (insertAfterElement && insertAfterElement.nextSibling) {
          puzzleContent.insertBefore(completionMessageWrapper, insertAfterElement.nextSibling);
      } else {
          puzzleContent.appendChild(completionMessageWrapper);
      }
    
      // Show stats container and render completion stats UI
      keystrokeStats.style.display = 'block';
      
      // Calculate stats with wrong guesses
      const efficiency = ((this.state.minimumKeystrokes / this.state.totalKeystrokes) * 100);
      const stats = this.rankCalculator.getDetailedStats(
          efficiency, 
          this.state.peekedClues.size, 
          this.state.megaPeekedClues.size,
          this.state.wrongGuesses  // Include wrong guesses
      );
    
      // Render stats
      keystrokeStats.querySelector('.stats-content').innerHTML = `
          ${this.generateRankDisplay(stats)}
          ${this.generateStatItems(stats)}
      `;
    
      this.attachCompletionHandlers(keystrokeStats);
      
      // Scroll to top
      setTimeout(() => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
        this.setupDatePicker();
      }, 100);
    }
  
    renderCompletionStats(keystrokeStats) {
      const efficiency = ((this.state.minimumKeystrokes / this.state.totalKeystrokes) * 100);
      const stats = this.rankCalculator.getDetailedStats(
          efficiency, 
          this.state.peekedClues.size, 
          this.state.megaPeekedClues.size
      );
  
      keystrokeStats.style.display = 'block';
      keystrokeStats.querySelector('.stats-content').innerHTML = `
          ${this.generateRankDisplay(stats)}
          ${this.generateStatItems(stats)}
      `;
  
      this.attachCompletionHandlers(keystrokeStats);
    }

    /**
     * Apply highlighting to active clues with first letter peek
     * @param {string} text - Current puzzle text
     * @returns {string} HTML with highlights applied
     */
    applyActiveClueHighlights(text) {
      const cleanText = text.replace(/<\/?span[^>]*(>|$)/g, '');
      const activeClues = this.findActiveClues(cleanText);
      
      // Sort clues by start position in reverse order to process them from end to beginning
      activeClues.sort((a, b) => b.start - a.start);
      
      let highlightedText = cleanText;
      
      activeClues.forEach(clue => {
        const expressionText = clue.expression.trim();
        
        // Create a precise slice by using the exact indices
        const before = highlightedText.slice(0, clue.start);
        let clueText = highlightedText.slice(clue.start, clue.end);
        const after = highlightedText.slice(clue.end);
    
        // Handle different clue states
        if (!clueText.includes('[') && !this.state.hintModeClues.has(expressionText)) {
          // Already solved clue - leave as is
          highlightedText = before + clueText + after;
        } else {
          // Active or hint mode clue
          if (this.state.hintModeClues.has(expressionText)) {
            const solution = this.PUZZLE_DATA.solutions[expressionText];
            // Show the first letter hint
            if (solution) {
              const firstLetter = solution.charAt(0).toUpperCase();
              // Use exact position for end bracket to avoid issues with special characters
              const lastBracketPos = clueText.lastIndexOf(']');
              if (lastBracketPos !== -1) {
                clueText = clueText.substring(0, lastBracketPos) + ` (${firstLetter})]`;
              }
            }
          }
          
          // Use more robust string manipulation to ensure the entire expression is highlighted
          highlightedText = before + `<span class="active-clue">${clueText}</span>` + after;
        }
      });
    
      return highlightedText;
    }

    /***************
     HTML generation
    ****************/

     generateLoadingHTML() {
      return `
        <div class="loading">
          Loading today's puzzle...
        </div>
      `;
    }    
  
    /**
     * Generates HTML for the input container based on current mode
     * @returns {string} HTML markup
     */
    generateInputContainerHTML() {
      if (this.useCustomKeyboard) {
        if (this.inputMode === 'submit') {
          return `
            <div class="input-container">
              <div class="message"></div>
              <div class="input-submit-wrapper" style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem;">
                <div class="custom-input" style="flex-grow: 1; height: 44px; display: flex; align-items: center;">
                  <span class="placeholder">type any answer...</span>
                </div>
                <button 
                  class="mobile-submit-button" 
                  style="height: 44px; background-color: #2563eb; color: white; padding: 0 1rem; border-radius: 6px; font-weight: 500; border: none;"
                >
                  [enter]
                </button>
              </div>
              <div class="custom-keyboard">
                ${this.generateKeyboardButtonsHTML()}
              </div>
            </div>
          `;
        } else {
          // Classic mode (auto-snap)
          return `
            <div class="input-container">
              <div class="message"></div>
              <div class="custom-input">
                <span class="placeholder">start typing answers...</span>
              </div>
              <div class="custom-keyboard">
                ${this.generateKeyboardButtonsHTML()}
              </div>
            </div>
          `;
        }
      } else {
        // Desktop
        if (this.inputMode === 'submit') {
          return `
            <div class="input-container">
              <div class="input-submit-wrapper" style="display: flex; gap: 0.5rem;">
                <input 
                  type="text" 
                  placeholder="type any answer..." 
                  name="silly-joke" 
                  class="answer-input" 
                  autocomplete="off" 
                  autocapitalize="off"
                >
                <button 
                  class="submit-answer"
                >
                  [enter]
                </button>
              </div>
              <div class="message"></div>
            </div>
          `;
        } else {
          // Classic mode (auto-snap)
          return `
            <div class="input-container">
              <input type="text" placeholder="Start typing answers..." name="silly-joke" class="answer-input" autocomplete="off" autocapitalize="off">
              <div class="message"></div>
            </div>
          `;
        }
      }
    }
    
// Modified generateKeyboardButtonsHTML method
// Modified generateKeyboardButtonsHTML method
generateKeyboardButtonsHTML() {
  const mainLayout = [
    { keys: 'qwertyuiop', columns: 10 },
    { keys: 'asdfghjkl', columns: 10 },
    { keys: [
      { key: '123', display: '123', small: true },
      'z', 'x', 'c', 'v', 'b', 'n', 'm',
      { key: 'backspace', display: '\u{232B}', wide: true }
    ], columns: 10 }
  ];
  
  const altLayout = [
    { keys: '1234567890', columns: 10 },
    { keys: '-/:;()$&@"', columns: 10 },
    { keys: [
      { key: 'ABC', display: 'ABC', small: true },
      '.', ',', '?', '!', "'", "=", "+",
      { key: 'backspace', display: '\u{232B}', wide: true }
    ], columns: 10 }
  ];
  
  const rows = this.isAltKeyboard ? altLayout : mainLayout;
  let html = ``;
  
  rows.forEach((row, rowIndex) => {
    // adding margin for middle row on default layout since it's only 9 keys vs, 10
    const leftPadding = (rowIndex === 1 && !this.isAltKeyboard) ? 'margin-left: 5%' : '';
    html += `<div class="keyboard-row" style="${leftPadding}">`;
    
    const keys = Array.isArray(row.keys) ? row.keys : row.keys.split('');
    keys.forEach(keyItem => {
      if (typeof keyItem === 'string') {
        html += this.generateKeyboardKeyHTML(keyItem);
      } else {
        html += this.generateSpecialKeyHTML(keyItem);
      }
    });
    
    html += '</div>';
  });
  
  html += '</div>';
  return html;
}

generateSpecialKeyHTML(keyItem) {
  const fontSize = keyItem.small ? '0.875rem' : '1.125rem';
  return `
    <button class="keyboard-key" data-key="${keyItem.key}" style="
      grid-column: ${keyItem.wide ? 'span 2' : 'span 1'};
      font-size: ${fontSize};
    ">
      ${keyItem.display}
    </button>
  `;
}
  
  generateKeyboardKeyHTML(key) {
      return `
          <button class="keyboard-key" data-key="${key}">
              ${key}
          </button>
      `;
  }
  
    /**
      * Generates initial HTML structure for the game
      * @returns {string} HTML markup
      */
    generateInitialHTML() {
        const displayDate = this.currentPuzzleDate || this.getNYCDate();
        
        return `
          <div class="puzzle-container">
            ${this.generateHeaderHTML(displayDate)}
            <div class="puzzle-content">
              ${this.generatePuzzleDisplayHTML()}
              ${this.generateInputContainerHTML()}
              ${this.generateStatsContainerHTML()}
              ${this.generateSolvedExpressionsHTML()}
            </div>
          </div>
        `;
    }

    generateHeaderHTML(displayDate) {
      return `
          <div class="puzzle-header">
              <button class="info-button">!</button>
              <h1>[Bracket Shitty]</h1>
              <button class="help-button">?</button>
              <div class="nav-container">
                  <button class="nav-button prev" ${!this.isMobile && 'disabled'}>&larr;</button>
                  <div class="puzzle-date">${this.formatNYCDate(displayDate)}</div>
                  <button class="nav-button next" ${!this.isMobile && 'disabled'}>&rarr;</button>
              </div>
          </div>
      `;
    }

    generatePuzzleDisplayHTML() {
        return `<div class="puzzle-display"></div>`;
    }

    generateStatsContainerHTML() {
        return `
            <div class="keystroke-stats" style="display: none;">
                <div class="stats-content"></div>
                <div class="share-buttons">
                    <button class="share-button copy">Copy Results</button>
                    <button class="share-button sms">Share via Text</button>
                    <button class="share-button reset">Reset Puzzle</button>
                </div>
                <div class="share-message" style="display: none;">Results copied to clipboard!</div>
            </div>
        `;
    }

    _generateSolvedExpressionItemHTML(expression, solution) {
      return `
          <div class="expression-item">
              <span class="expression">[${expression}]</span> = 
              <span class="solution">${solution}</span>
          </div>
      `;
    }

    generateSolvedExpressionsHTML() {
      // Convert Set to Array and reverse it to get most recent first
      const expressionsList = Array.from(this.state.solvedExpressions)
          .reverse()
          .map(expression => this._generateSolvedExpressionItemHTML(
              expression, 
              this.PUZZLE_DATA.solutions[expression]
          ))
          .join('');
    
      return `
          <div class="solved-expressions">
              <h3></h3>
              <div class="expressions-list">
                  ${expressionsList}
              </div>
          </div>
      `;
    }

    generateCompletionMessage() {
      return `
        <div class="message success completion-message">
          <span><strong>** Puzzle Solved! **</strong></span><br>
          <a href="${this.PUZZLE_DATA.completionURL}" 
            target="_blank" 
            rel="noopener noreferrer"
            class="completion-url">
            ${this.PUZZLE_DATA.completionURL}
          </a>
        </div>
      `;
    }

    generateRankDisplay(stats) {
      const margin = this.isMobile ? '0.5rem 0' : '1rem 0';
      const padding = this.isMobile ? '1rem' : '1.5rem';
      
      // Custom messages for certain ranks
      let nextRankMessage = '';
      
      if (stats.rank === 'Puppet Master') {
        nextRankMessage = '<br><span class="next-rank">now I am become Death, the destroyer of worlds</span>';
      } else if (stats.rank === 'Kingmaker') {
        nextRankMessage = '<br><span class="next-rank">ah finally the very top</span>';
      } else if (stats.rank === 'Mayor') {
        nextRankMessage = '<br><span class="next-rank">nobody\'s my boss, right?</span>';
      } else if (stats.rank === 'Power Broker') {
        nextRankMessage = '<br><span class="next-rank">this has got to be it...</span>';
      } else if (stats.nextRankName) {
        nextRankMessage = `<br><span class="next-rank">Almost: ${stats.nextRankName} (${Math.ceil(stats.pointsToNextRank)} points needed)</span>`;
      }
      
      return `
        <div class="rank-display" data-rank="${stats.rank}">
          You are ${(stats.rank === 'Chief of Police' || stats.rank === 'Mayor') ? 'the' : 'a'} Bracket Shitty<br>
          ${stats.rankEmoji} <b>${stats.rank}</b> ${stats.rankEmoji}
          ${nextRankMessage}
          <div class="share-hint">
            ${this.isMobile ? '(tap to share via text)' : '(click to copy results)'}
          </div>
        </div>
      `;
    }
  

    /**
     * Updated generateStatItems method to show different stats based on mode
     */
    generateStatItems(stats) {
      // Generate progress bar for score
      const segments = 10;
      const filledSegments = Math.round((stats.finalScore / 100) * segments);
      const emptySegments = segments - filledSegments;
      
      // Use purple squares for Puppet Master, otherwise use color based on score
      let segmentEmoji;
      if (stats.rank === 'Puppet Master') {
        segmentEmoji = '\u{1F7EA}'; // Purple Square emoji
      } else {
        segmentEmoji = stats.finalScore < 25 ? '\u{1F7E5}' :  // Red
                      stats.finalScore < 75 ? '\u{1F7E8}' :  // Yellow
                                            '\u{1F7E9}';     // Green
      }
      
      const progressBar = segmentEmoji.repeat(filledSegments) + '\u{2B1C}'.repeat(emptySegments);
      
      // Score bar HTML
      const scoreBarHTML = `
        <div class="score-bar">
          <div class="score-value">Score: ${stats.finalScore.toFixed(1)}</div>
          <div class="progress-bar">${progressBar}</div>
          ${this.inputMode === 'classic' ? '<div class="hard-mode-indicator" style="font-size: 1rem; text-align: center; margin-top: 5px; font-weight: bold;">\u{2620}\u{FE0F} hard mode!</div>' : ''}
        </div>
      `;
      
      // For classic mode (keystroke-based)
      if (this.inputMode === 'classic') {
        return `
          ${scoreBarHTML}
          <div class="stat-items">
            <div class="stat-item">Total keystrokes: ${this.state.totalKeystrokes}</div>
            <div class="stat-item">Minimum keystrokes needed: ${this.state.minimumKeystrokes}</div>
            <div class="stat-item">Excess keystrokes: ${this.state.totalKeystrokes - this.state.minimumKeystrokes}</div>
            <div class="stat-item">\u{1F440} Clues peeked: ${this.state.peekedClues.size}</div>
            <div class="stat-item">\u{1F6DF} Answers revealed: ${this.state.megaPeekedClues.size}</div>
            <div class="stat-item"><b>Score breakdown</b>
              <br>Base score (efficiency): ${stats.baseScore.toFixed(1)}
              <br>Peek penalty: -${stats.peekPenalty.toFixed(1)}
              ${stats.megaPeekPenalty > 0 ? `<br>Reveal penalty: -${stats.megaPeekPenalty.toFixed(1)}` : ''}
              <br>Final score: ${stats.finalScore.toFixed(1)}
            </div>
          </div>
        `;
      } 
      // For submit mode (wrong-guess-based)
      else {
        return `
          ${scoreBarHTML}
          <div class="stat-items">
            <div class="stat-item">\u{274C} Wrong guesses: ${this.state.wrongGuesses || 0}</div>
            <div class="stat-item">\u{1F440} Clues peeked: ${this.state.peekedClues.size}</div>
            <div class="stat-item">\u{1F6DF} Answers revealed: ${this.state.megaPeekedClues.size}</div>
            <div class="stat-item"><b>Score breakdown</b>
              <br>Base score: ${stats.baseScore.toFixed(1)}
              ${stats.wrongGuessPenalty > 0 ? `<br>Wrong guess penalty: -${stats.wrongGuessPenalty.toFixed(1)}` : ''}
              <br>Peek penalty: -${stats.peekPenalty.toFixed(1)}
              ${stats.megaPeekPenalty > 0 ? `<br>Reveal penalty: -${stats.megaPeekPenalty.toFixed(1)}` : ''}
              <br>Final score: ${stats.finalScore.toFixed(1)}
            </div>
            <div class="stat-item">Total keystrokes: ${this.state.totalKeystrokes}</div>
            <div class="stat-item">Minimum keystrokes needed: ${this.state.minimumKeystrokes}</div>
            <div class="stat-item">Excess keystrokes: ${this.state.totalKeystrokes - this.state.minimumKeystrokes}</div>
          </div>
        `;
      }
    }

    /**************************
     UI setup and configuration
    ***************************/

    /**
     * Sets up puzzle display and help system
     */
    setupPuzzleDisplay() {

        const puzzleDisplay = this.root.querySelector('.puzzle-display');
      if (!puzzleDisplay) {
        console.error('Puzzle display element not found');
        return;
      }

      this.configurePuzzleDisplayLayout(puzzleDisplay);
      this.setupHelpSystem();
      this.setupInfoSystem();
      this.setupClueClickHandlers(puzzleDisplay);

      // Add header click handler
      const header = this.root.querySelector('.puzzle-header h1');
      if (header) {
        header.addEventListener('click', async () => {
          const todayDate = this.getNYCDate();
          if (this.currentPuzzleDate !== todayDate) {
            await this.navigateToPuzzle(todayDate);
          }
        });
      }
    }
  
    /**
     * Configures puzzle display layout based on device
     * @param {HTMLElement} puzzleDisplay - The puzzle display element
     */
    configurePuzzleDisplayLayout(puzzleDisplay) {
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      puzzleDisplay.classList.add(isMobile ? 'puzzle-display-mobile' : 'puzzle-display-desktop');
    }
    

    /**
     * Checks if the user has seen the current info version
     * @returns {boolean} Whether the user has seen the current info
     */
    hasSeenInfo() {
      // Check if the user has seen the current version of the info
      return localStorage.getItem('bracketCityInfoSeen') === this.INFO_VERSION;
    }

    /**
     * Marks the current info version as seen
     */
    markInfoAsSeen() {
      // Store the current version instead of just 'true'
      localStorage.setItem('bracketCityInfoSeen', this.INFO_VERSION);
    }

    /**
     * Sets up the info system with an inline toggle switch
     */
    setupInfoSystem() {
      // Define the current info version - increment this to reset for all users
      this.INFO_VERSION = '4'; // Increment version for the new layout
      
      const infoButton = this.root.querySelector('.info-button');
      if (!infoButton) return;

      // Check and apply the initial button state
      if (!this.hasSeenInfo()) {
        infoButton.classList.add('unseen-info');
      }
      
      // CSS for the iOS-style toggle
      const toggleStyle = `
        <style>
          /* iOS Toggle Switch */
          .inline-toggle {
            position: relative;
            display: inline-block;
            width: 36px;
            height: 20px;
            vertical-align: middle;
            margin: 0 6px;
          }
          
          .inline-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
          }
          
          .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .3s;
            border-radius: 34px;
          }
          
          .toggle-slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .2s;
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
          }
          
          input:checked + .toggle-slider {
            background-color: #2563eb;
          }
          
          input:disabled + .toggle-slider {
            background-color: #d1d5db;
            cursor: not-allowed;
          }
          
          input:checked:disabled + .toggle-slider {
            background-color: #93c5fd;
          }
          
          input:checked + .toggle-slider:before {
            transform: translateX(16px);
          }
          
          .mode-disabled-message {
            display: none;
          }
          
          .toggle-disabled .mode-disabled-message {
            display: inline;
          }
        </style>
      `;
      
      // Build the info content with the toggle at the top

      // old news
      //<div style="margin: 0.9em 0; font-size: 0.85em;">* clicking a <mark style="background-color: #fff9c4;">clue</mark> lets you peek at the answer's first letter</div>
      //<div style="margin: 0.9em 0; font-size: 0.85em;">* clicking <span class='help-icon'>?</span> takes you to an interactive tutorial</div>
        
      const infoContent = `
        ${toggleStyle}
        <div id="toggle-container" style="text-align: center; margin: 0.4em 0 1em 0;">
          <div style="display: flex; flex-direction: column; align-items: center; gap: 0;">
            <div style="display: flex; align-items: center; justify-content: center; gap: 6px;">
              <span style="font-weight: 500; font-size: 0.95em;">hard mode</span>
              <label class="inline-toggle" onclick="event.stopPropagation();" style="margin: 0 0 0 2px;">
                <input type="checkbox" id="mode-toggle" onclick="event.stopPropagation();">
                <span class="toggle-slider"></span>
              </label>
            </div>
            <div style="font-size: 0.7em; line-height: 1; margin-top: 1px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px;">
              <span style="font-style: italic; color: #6b7280;">no submit button & every keystroke counts!</span>
              <span class="mode-disabled-message" style="color: #ef4444; font-weight: 500;">
                (can't change once a puzzle started)
              </span>
            </div>
          </div>
        </div>
        
        <div style="margin: 0.9em 0; font-size: 0.85em;">* there is now a <mark style="background-color:rgba(255,255,0,0.2)">date picker</mark> - just click the date in the header and browse the archive</div>
      `;

      infoButton.addEventListener('click', (e) => {
        e.stopPropagation();
        
        // Mark as seen when clicked
        if (!this.hasSeenInfo()) {
          this.markInfoAsSeen();
          infoButton.classList.remove('unseen-info');
        }
        
        this.toggleHelp(infoContent);
        
        // Add event listener to the toggle switch
        setTimeout(() => {
          const modeToggle = document.getElementById('mode-toggle');
          const toggleContainer = document.getElementById('toggle-container');
          
          if (!modeToggle || !toggleContainer) return;
          
          // Always evaluate current puzzle state
          const hasPuzzleStarted = this.isPuzzleStarted();
          
          // Set the checked state to match the current inputMode
          modeToggle.checked = this.inputMode === 'classic';
          
          // Update the disabled state and container class based on current puzzle state
          modeToggle.disabled = hasPuzzleStarted;
          toggleContainer.className = hasPuzzleStarted ? 'toggle-disabled' : '';
          
          if (!modeToggle.disabled) {
            modeToggle.addEventListener('change', (e) => {
              e.stopPropagation();
              
              // Double-check puzzle state before changing mode
              if (this.isPuzzleStarted()) {
                // If puzzle has been started since info panel opened, disable toggle and show message
                modeToggle.disabled = true;
                toggleContainer.className = 'toggle-disabled';
                // Reset toggle to match current mode
                modeToggle.checked = this.inputMode === 'classic';
                return;
              }
              
              // Update mode based on toggle state
              // ON (checked) = classic mode, OFF (unchecked) = submit mode
              const newMode = modeToggle.checked ? 'classic' : 'submit';
              this.setInputMode(newMode);
            });
          }
          
          // Make sure all interactive elements stop propagation
          toggleContainer.addEventListener('click', (e) => {
            // Only stop propagation if clicking on the toggle itself
            if (e.target === modeToggle || e.target.closest('.inline-toggle')) {
              e.stopPropagation();
            }
          });
          
          // Add MutationObserver to update toggle state when puzzle state changes
          this.setupToggleStateObserver(modeToggle, toggleContainer, isPuzzleStarted);
        }, 100);
      });
    }

    /**
     * Checks if the user is a new player by examining localStorage
     * @returns {boolean} True if this appears to be a new player
     */
    isNewPlayer() {
      let count = 0;
    
      // Count the number of localStorage keys that start with 'bracketCity'
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key && key.startsWith('bracketPuzzle')) {
          count++;
        }
      }
      
      // If more than one key is found, the player is not new
      if (count > 1 || localStorage.getItem('tutorialSeen')) {
        return false;
      }      
      
      // Otherwise, the player is considered new
      return true;
    }

    /**
     * Sets up the help/tutorial system with special highlighting for new players
     */
    setupHelpSystem() {
      const helpButton = this.root.querySelector('.help-button');
      if (!helpButton) return;

      // Check if this is a new player to determine if we should highlight the tutorial button
      if (this.isNewPlayer()) {
        helpButton.classList.add('new-player-highlight');
      }

      helpButton.addEventListener('click', (e) => {
        e.stopPropagation();
        
        // Remove the highlighting when clicked
        helpButton.classList.remove('new-player-highlight');
        
        if (confirm('Would you like to start the tutorial?')) {
          localStorage.setItem('tutorialSeen', 'true');
          this.saveState();
          window.location.href = 'tutorial';
        }
      });
    }

    turnOffTutorialPulse() {
      const helpButton = this.root.querySelector('.help-button');
      if (helpButton) {
        helpButton.classList.remove('new-player-highlight');
      }
      localStorage.setItem('tutorialSeen', 'true');   
    }
    
    /**
     * Toggles the help display with special handling for interactive elements
     * @param {string} helpContent - The help content to display
     */
    toggleHelp(helpContent) {
      const puzzleDisplay = this.root.querySelector('.puzzle-display');
      if (!puzzleDisplay) return;

      // Check if the puzzle is completed
      const isPuzzleCompleted = puzzleDisplay.classList.contains('completed');

      // Get the info button
      const infoButton = this.root.querySelector('.info-button');

      // Store current puzzle state when help is shown
      if (!this.state.helpVisible) {
        // Opening help
        this.updateGameState({
          helpVisible: true,
          previousDisplay: puzzleDisplay.innerHTML
        });
        
        if (isPuzzleCompleted) {
          // In completed state, just set content without scroll anchor
          puzzleDisplay.innerHTML = helpContent;
          // Don't auto-scroll in completed state
        } else {
          // Normal in-progress behavior with scroll anchor
          puzzleDisplay.innerHTML = '<div id="help-scroll-anchor"></div>' + helpContent;
          
          // Scroll to anchor - works reliably on iOS Safari
          const scrollAnchor = document.getElementById('help-scroll-anchor');
          if (scrollAnchor) {
            scrollAnchor.scrollIntoView({block: 'start', behavior: 'auto'});
          }
        }

        // Change the info button text from "!" to "X"
        if (infoButton) {
          infoButton.textContent = "X";
        }

        // Disable all inputs including submit button
        this.disableInputsForHelp();
        
        // Setup click handler for the puzzle display that closes help
        // But don't close when clicking on interactive elements
        puzzleDisplay.addEventListener('click', this.handleHelpClick = (event) => {
          // Check if the click was on an interactive element
          const isInteractiveElement = 
            event.target.tagName === 'INPUT' || 
            event.target.tagName === 'BUTTON' || 
            event.target.tagName === 'LABEL' || 
            event.target.tagName === 'A' ||
            event.target.classList.contains('toggle-container') ||
            event.target.classList.contains('toggle-labels') ||
            event.target.classList.contains('toggle-slider') ||
            event.target.closest('label') || 
            event.target.closest('a') ||
            event.target.closest('.toggle-container');
          
          // Only close help if it wasn't an interactive element
          if (!isInteractiveElement) {
            this.closeHelp();
          }
        });
        
      } else {
        this.closeHelp();
      }
    }

    /**
     * Closes the help panel and restores previous state
     */
    closeHelp() {
      const puzzleDisplay = this.root.querySelector('.puzzle-display');
      if (!puzzleDisplay) return;
      
      // Change the info button text back from "X" to "!"
      const infoButton = this.root.querySelector('.info-button');
      if (infoButton) {
        infoButton.textContent = "!";
      }
      
      // Remove the click handler to prevent memory leaks
      if (this.handleHelpClick) {
        puzzleDisplay.removeEventListener('click', this.handleHelpClick);
        this.handleHelpClick = null;
      }
      
      // Closing help - restore previous state and re-render
      this.updateGameState({
        helpVisible: false,
        previousDisplay: null
      });
      
      // Re-render the entire puzzle state
      this.render();

      // Re-enable input
      const desktopInput = this.root.querySelector('.answer-input');
      if (desktopInput) {
        desktopInput.disabled = false;
      }
      
      // Re-enable submit button (desktop)
      const submitButton = this.root.querySelector('.submit-answer');
      if (submitButton) {
        submitButton.disabled = false;
        submitButton.style.opacity = '1';
        submitButton.style.pointerEvents = 'auto';
      }
      
      // For mobile, re-enable keyboard and input
      if (this.isMobile) {
        // Restore custom input appearance
        const customInput = this.root.querySelector('.custom-input');
        if (customInput) {
          customInput.style.opacity = '1';
          customInput.style.pointerEvents = 'auto';
        }
        
        // Re-enable all keyboard keys
        const keyboardKeys = this.root.querySelectorAll('.keyboard-key');
        keyboardKeys.forEach(key => {
          key.disabled = false;
          key.style.opacity = '1';
          key.style.pointerEvents = 'auto';
        });
        
        // Re-enable mobile submit button
        const mobileSubmitButton = this.root.querySelector('.mobile-submit-button');
        if (mobileSubmitButton) {
          mobileSubmitButton.disabled = false;
          mobileSubmitButton.style.opacity = '1';
          mobileSubmitButton.style.pointerEvents = 'auto';
        }
      }
      
      // Restore focus when closing help (but only if not disabled)
      if (desktopInput && !desktopInput.disabled) {
        desktopInput.focus();
      }
    }

    /**
     * Sets up click handlers for puzzle clues
     * @param {HTMLElement} puzzleDisplay - The puzzle display element
     */
    setupClueClickHandlers(puzzleDisplay) {
      puzzleDisplay.addEventListener('click', (event) => {
        // If help is showing, check if we clicked on a link before closing
        if (this.state.helpVisible) {
          // Check if the click was on a link (or its descendants)
          const isLinkClick = event.target.tagName === 'A' || 
                              event.target.closest('a');
          
          // Only close help if it wasn't a link click
          if (!isLinkClick) {
            this.toggleHelp();
          }
          return;
        }
    
        const clueElement = event.target.closest('.active-clue');
        if (!clueElement) return;
    
        // Find the clicked expression
        const cleanText = this.state.displayState.replace(/<\/?[^>]+(>|$)/g, '');
        const activeClues = this.findActiveClues(cleanText);
        const cluePosition = Array.from(puzzleDisplay.querySelectorAll('.active-clue')).indexOf(clueElement);
        
        if (cluePosition >= 0 && cluePosition < activeClues.length) {
          const expression = activeClues[cluePosition].expression.trim();
          this.toggleHintMode(expression);
    
          // Return focus to input on desktop
          if (!this.isMobile && this.answerInput) {
            this.answerInput.focus();
          }
        }
      });
    }

    setupCompletionState(puzzleDisplay) {
      puzzleDisplay.classList.add('completed');

      // scroll to bottom fix
      document.body.style.overflow = 'auto';

      if (this.isMobile) {
          // Reduce bottom padding of puzzle display
          puzzleDisplay.style.paddingBottom = '0.5rem';
          
          // Adjust puzzle container styles for mobile
          const container = this.root.querySelector('.puzzle-container');
          if (container) {
              Object.assign(container.style, {
                  position: 'relative',
                  height: '100vh',
                  overflowY: 'auto',
                  display: 'block'
              });
          }
          
          // Reduce top margin and padding in the content area to decrease vertical space
          const content = this.root.querySelector('.puzzle-content');
          if (content) {
              Object.assign(content.style, {
                  position: 'relative',
                  top: '1.3rem',    
                  height: 'auto',
                  marginTop: '60px', // reduced from 85px
                  padding: '0.5rem',
                  paddingBottom: '1rem',
                  overflowY: 'visible'
              });
          }
      }
    }

    attachCompletionHandlers(keystrokeStats) {
      // Rank display click handler
      const rankDisplay = keystrokeStats.querySelector('.rank-display');
      if (rankDisplay) {
          rankDisplay.addEventListener('click', () => {
              if (this.isMobile) {
                  this.shareSMS();
              } else {
                  this.shareResults();
              }
          });
      }
    }

    setupShareButtons() {
      const copyButton = this.root.querySelector('.share-button.copy');
      const smsButton = this.root.querySelector('.share-button.sms');
      const resetButton = this.root.querySelector('.share-button.reset');
      
      copyButton.addEventListener('click', () => this.shareResults());
      
      if (!/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) {
        smsButton.style.display = 'none';
      }
      smsButton.addEventListener('click', () => this.shareSMS());
      resetButton.addEventListener('click', () => this.resetPuzzle());
      
    }

    /**************************
     Message system
    ***************************/

    /**
     * Updates the game message with proper state management
     * @param {string} text - Message text to display
     * @param {string} type - Message type ('success' or 'error')
     */
    showMessage(text, type = 'success') {
      const messageEl = this.root.querySelector('.message');
      if (!messageEl) return;
    
      // Update state
      this.updateGameState({
        message: text,
        messageType: type
      });
    
      // Update message element
      messageEl.textContent = text;
      messageEl.className = `message ${type}`;
      messageEl.style.display = 'block'; // Ensure message is visible
    
      // Auto-clear ALL messages (both success and error)
      setTimeout(() => {
        // Only clear if this message is still showing
        if (this.state.message === text) {
          this.updateGameState({
            message: '',
            messageType: null
          });
          messageEl.textContent = '';
          messageEl.className = 'message';
          messageEl.style.display = 'none';
        }
      }, 1500);
    }

    /**
     * Shows an error message with special handling
     * @param {string} message - Error message to display
     */
    showErrorMessage(message) {
      const messageEl = this.root.querySelector('.message') || document.createElement('div');
      
      // If we need to create a new message element
      if (!messageEl.parentNode) {
        messageEl.className = 'message';
        this.root.prepend(messageEl);
      }

      // Update state to track error
      this.updateGameState({
        message,
        messageType: 'error',
        lastError: {
          message,
          timestamp: Date.now()
        }
      });
    }

    
    /**************************
     Share system
    ***************************/

    /**
     * Modified generateShareText to only display mode when in classic/hard mode
     */
    generateShareText() {
      const puzzleDate = this.formatNYCDate(this.currentPuzzleDate);
      const efficiency = ((this.state.minimumKeystrokes / this.state.totalKeystrokes) * 100);
      
      // Calculate rank and stats
      const stats = this.rankCalculator.getDetailedStats(
        efficiency,
        this.state.peekedClues.size,
        this.state.megaPeekedClues.size,
        this.state.wrongGuesses || 0
      );
      
      // Generate progress bar
      const segments = 10;
      const filledSegments = Math.round((stats.finalScore / 100) * segments);
      const emptySegments = segments - filledSegments;
      
      // Use purple squares for Puppet Master, otherwise use color based on score
      let segmentEmoji;
      if (stats.rank === "Puppet Master") {
        segmentEmoji = '\u{1F7EA}'; // Purple Square emoji
      } else {
        segmentEmoji = stats.finalScore < 25 ? '\u{1F7E5}' :  // Red
                      stats.finalScore < 75 ? '\u{1F7E8}' :  // Yellow
                                            '\u{1F7E9}';     // Green
      }
      
      const progressBar = segmentEmoji.repeat(filledSegments) + '\u{2B1C}'.repeat(emptySegments);
      
      // Build share text with specific line breaks to match desired layout
      const shareItems = [
        '[Bracket Shitty]',
        puzzleDate,
        '',
        'https://user.4574.co.uk/bs',
        ''
      ];
      
      // Only show "hard mode" message if in classic mode
      if (this.inputMode === 'classic') {
        shareItems.push('\u{2620}\u{FE0F} hard mode!');
        shareItems.push(''); // Add a line break between mode and rank
      }
      
      // Add rank
      shareItems.push(`Rank: ${stats.rankEmoji} (${stats.rank})`);
      
      // Only include mode-specific stats
      // Replace it with this updated logic:
      if (this.inputMode === 'classic' || stats.rank === 'Puppet Master') {
        // Show keystroke stats in classic mode or for any Puppet Master
        shareItems.push(`\u{1F3B9} Total Keystrokes: ${this.state.totalKeystrokes}`);
        shareItems.push(`\u{1F3AF} Minimum Required: ${this.state.minimumKeystrokes}`);
      } else {
        // Submit mode stats
        shareItems.push(`\u{274C} Wrong guesses: ${this.state.wrongGuesses || 0}`);
      }
      
      // Add peek and reveal counts only if they exist
      if (this.state.peekedClues.size > 0) {
        shareItems.push(`\u{1F440} Peeks: ${this.state.peekedClues.size}`);
      }
      
      if (this.state.megaPeekedClues.size > 0) {
        shareItems.push(`\u{1F6DF} Answers Revealed: ${this.state.megaPeekedClues.size}`);
      }
      
      // Remove the input mode indicator - we now only show it for classic mode above the rank
      
      // Add score and progress bar with an empty line before score
      shareItems.push('');
      shareItems.push(`Total Score: ${stats.finalScore.toFixed(1)}`);
      shareItems.push(progressBar);
      
      return shareItems.join('\n');
    }
  
    /**
     * Handles sharing results via the user's preferred app using Web Share API
     * Falls back to SMS URL scheme if Web Share API is not available
     */
    shareSMS() {
      const shareText = this.generateShareText();
      
      // Check if Web Share API is available
      if (navigator.share) {
        navigator.share({
          title: 'Bracket Shitty Results',
          text: shareText
        })
        .then(() => {
          console.log('Successfully shared results');
        })
        .catch((error) => {
          console.error('Error sharing results:', error);
          // Fall back to SMS URL scheme if sharing fails
          this.fallbackToSMS(shareText);
        });
      } else {
        // Fall back to SMS URL scheme for older browsers
        this.fallbackToSMS(shareText);
      }
    }

    /**
     * Fallback method to use SMS URL scheme when Web Share API is not available
     * @param {string} shareText - The text to share
     */
    fallbackToSMS(shareText) {
      const encodedText = encodeURIComponent(shareText);
      
      // Use correct SMS URL scheme format
      window.location.href = `sms:?&body=${encodedText}`;
    }

    /**
 * Copies results to clipboard for desktop sharing
 */
shareResults() {
  const shareText = this.generateShareText();
  
  // Use navigator.clipboard API for modern browsers
  if (navigator.clipboard) {
    navigator.clipboard.writeText(shareText)
      .then(() => {
        // Show success message
        const shareMessage = this.root.querySelector('.share-message');
        if (shareMessage) {
          shareMessage.style.display = 'block';
          setTimeout(() => {
            shareMessage.style.display = 'none';
          }, 2000);
        }
      })
      .catch(err => {
        console.error('Failed to copy results: ', err);
        // Show error or fallback to execCommand
        this.fallbackCopyToClipboard(shareText);
      });
  } else {
    // Fallback for older browsers
    this.fallbackCopyToClipboard(shareText);
  }
}

/**
 * Fallback method to copy text to clipboard using execCommand
 * @param {string} text - Text to copy
 */
fallbackCopyToClipboard(text) {
  try {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';  // Avoid scrolling to bottom
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    const successful = document.execCommand('copy');
    if (successful) {
      // Show success message
      const shareMessage = this.root.querySelector('.share-message');
      if (shareMessage) {
        shareMessage.style.display = 'block';
        setTimeout(() => {
          shareMessage.style.display = 'none';
        }, 2000);
      }
    } else {
      console.error('execCommand failed');
    }
    
    document.body.removeChild(textArea);
  } catch (err) {
    console.error('Fallback copy method failed: ', err);
  }
}

    /**************************
     Utility methods
    ***************************/
      
    /**
     * Resets the input container to initial state
     * @param {HTMLElement} inputContainer - The input container element
     */
    resetInputContainer(inputContainer) {
      inputContainer.innerHTML = `
        <input type="text" placeholder="type any answer..." class="answer-input" autocomplete="off" autocapitalize="off">
        <div class="message"></div>
      `;
      // Re-setup input handlers for the new input element
      this.setupInputHandlers();
    }
  
    /**
     * Gets all required DOM elements
     * @returns {Object} Object containing DOM elements
     */
    getDOMElements() {
      return {
        puzzleDisplay: this.root.querySelector('.puzzle-display'),
        expressionsList: this.root.querySelector('.expressions-list'),
        inputContainer: this.root.querySelector('.input-container'),
        keystrokeStats: this.root.querySelector('.keystroke-stats'),
        message: this.root.querySelector('.message')
      };
    }
  
    /**
     * Validates that all required elements exist
     * @param {Object} elements - DOM elements object
     * @returns {boolean} Whether all required elements exist
     */
    validateElements(elements) {
      return Object.values(elements).every(element => element !== null);
    }
  
    /**
     * Checks if the puzzle is complete
     * @returns {boolean} Whether the puzzle is complete
     */

    isPuzzleComplete() {
      return !this.state.displayState.includes('[');
    } 

    cleanupEventListeners() {
      const prevButton = this.root.querySelector('.nav-button.prev');
      const nextButton = this.root.querySelector('.nav-button.next');
      if (prevButton) prevButton.replaceWith(prevButton.cloneNode(true));
      if (nextButton) nextButton.replaceWith(nextButton.cloneNode(true));
    }

    /**
     * Creates and displays an announcement modal
     * @param {string} title - The title of the announcement
     * @param {string} message - The message content (can include HTML)
     * @param {string} buttonText - The text for the dismiss button
     * @param {string} modalId - Unique identifier for the modal
     * @returns {boolean} Whether the modal was shown
     */
    showAnnouncementModal(title, message, buttonText = 'Got it', modalId) {
      // Check if we should show this modal
      if (!modalId || this.hasSeenAnnouncement(modalId)) {
        return false;
      }
      
      // Create modal HTML
      const modalHTML = `
        <div class="announcement-modal-overlay" id="announcement-overlay">
          <div class="announcement-modal">
            <div class="announcement-modal-title">${title}</div>
            <div class="announcement-modal-content">${message}</div>
            <button class="announcement-modal-button" id="announcement-dismiss">${buttonText}</button>
          </div>
        </div>
      `;
      
      // Append to the body
      document.body.insertAdjacentHTML('beforeend', modalHTML);
      
      // Get DOM references
      const overlay = document.getElementById('announcement-overlay');
      const dismissButton = document.getElementById('announcement-dismiss');
      
      // Add event listeners
      dismissButton.addEventListener('click', () => {
        this.dismissAnnouncementModal(modalId);
      });
      
      // Close on outside click too
      overlay.addEventListener('click', (e) => {
        if (e.target === overlay) {
          this.dismissAnnouncementModal(modalId);
        }
      });
      
      // Show the modal with a small delay
      setTimeout(() => {
        overlay.classList.add('visible');
      }, 100);
      
      return true;
    }

    /**
     * Dismisses the announcement modal and marks it as seen
     * @param {string} modalId - Unique identifier for the modal
     */
    dismissAnnouncementModal(modalId) {
      const overlay = document.getElementById('announcement-overlay');
      
      if (!overlay) return;
      
      // Add fade-out animation
      overlay.classList.remove('visible');
      
      // Remove from DOM after animation completes
      setTimeout(() => {
        overlay.remove();

        if (!this.isMobile) {
          const inputElement = this.root.querySelector('.answer-input');
          if (inputElement && !inputElement.disabled) {
            inputElement.focus();
          }
        }
        
      }, 300);
      
      // Mark as seen
      if (modalId) {
        this.markAnnouncementAsSeen(modalId);
      }
    }

    /**
     * Checks if the user has seen a specific announcement
     * @param {string} modalId - Unique identifier for the modal
     * @returns {boolean} Whether the announcement has been seen
     */
    hasSeenAnnouncement(modalId) {
      const storageKey = `bracketCityAnnouncement_${modalId}`;
      return localStorage.getItem(storageKey) === 'seen';
    }

    /**
     * Marks an announcement as seen in localStorage
     * @param {string} modalId - Unique identifier for the modal
     */
    markAnnouncementAsSeen(modalId) {
      const storageKey = `bracketCityAnnouncement_${modalId}`;
      localStorage.setItem(storageKey, 'seen');
    }

    /**
     * Helper method to display an important announcement
     * @param {Object} options - Announcement options
     * @param {string} options.title - The title of the announcement
     * @param {string} options.message - The announcement message
     * @param {string} options.buttonText - Text for the dismiss button
     * @param {string} options.id - Unique identifier for this announcement
     * @returns {boolean} Whether the announcement was shown
     */
    showImportantAnnouncement(options) {
      const {
        title = 'Important Announcement',
        message = '',
        buttonText = 'Got it',
        id = 'default-announcement'
      } = options;
      
      return this.showAnnouncementModal(title, message, buttonText, id);
    }
}