<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Crossword</title>
    <style>
        :root {
            --bg-color: #f8fafc; /* Light cool gray */
            --surface-color: #ffffff;
            --border-color: #cbd5e1; /* Medium cool gray */
            --cell-border-color: #94a3b8; /* Darker cool gray */
            --black-cell-color: #334155; /* Dark slate */
            --text-color: #1e293b; /* Very dark slate */
            --text-muted-color: #64748b; /* Medium slate */
            --highlight-bg-color: #ecfccb; /* Light lime */
            --highlight-border-color: #a3e635; /* Lime */
            --focus-bg-color: #dbeafe; /* Light blue */
            --focus-outline-color: #60a5fa; /* Blue */
            --clue-selected-bg-color: #e0f2fe; /* Lighter blue */
            --clue-selected-text-color: #0c4a6e; /* Darker blue */

--font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --font-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

--spacing-xs: 0.25rem; /* 4px */
            --spacing-sm: 0.5rem;  /* 8px */
            --spacing-md: 1rem;    /* 16px */
            --spacing-lg: 1.5rem;  /* 24px */

--cell-size: clamp(30px, 8vw, 50px); /* Responsive cell size */
            --border-radius: 0.5rem; /* 8px */
            --focus-ring-width: 3px;
        }

*, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
            font-family: var(--font-primary);
            background-color: var(--bg-color);
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: flex-start; /* Align top */
            min-height: 100vh;
            padding: var(--spacing-lg);
            line-height: 1.5;
            gap: var(--spacing-lg);
            flex-wrap: wrap; /* Allow wrapping on smaller screens */
        }

.crossword-container {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            background-color: var(--surface-color);
            padding: var(--spacing-md);
            border-radius: var(--border-radius);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border: 1px solid var(--border-color);
            max-width: 90vw; /* Prevent excessive width */
        }

.crossword-grid {
            display: grid;
            grid-template-columns: repeat(var(--grid-size, 3), var(--cell-size));
            grid-template-rows: repeat(var(--grid-size, 3), var(--cell-size));
            border: 1px solid var(--cell-border-color);
            position: relative; /* For focus outline */
            user-select: none; /* Prevent text selection during interaction */
            touch-action: manipulation; /* Improve touch responsiveness */
        }

.cell {
            border: 1px solid var(--border-color);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(var(--cell-size) * 0.5);
            font-weight: 600;
            text-transform: uppercase;
            background-color: var(--surface-color);
            transition: background-color 0.15s ease-out;
            cursor: pointer;
        }

.cell.black {
            background-color: var(--black-cell-color);
            border-color: var(--black-cell-color);
            cursor: default;
        }

.cell-number {
            position: absolute;
            top: 1px;
            left: 2px;
            font-size: calc(var(--cell-size) * 0.22);
            font-weight: normal;
            color: var(--text-muted-color);
            line-height: 1;
        }

.cell-content {
            position: relative;
            z-index: 1;
        }

/* Cell Highlighting */
        .cell.highlight {
            background-color: var(--highlight-bg-color);
        }

/* Cell Focus */
        .cell.focused {
            background-color: var(--focus-bg-color);
            outline: var(--focus-ring-width) solid var(--focus-outline-color);
            outline-offset: calc(-1 * var(--focus-ring-width) / 2); /* Inset outline slightly */
            z-index: 5; /* Bring focused cell above others */
        }

.clues-container {
            display: flex;
            gap: var(--spacing-lg);
            flex-wrap: wrap; /* Wrap clue lists if needed */
            justify-content: space-around; /* Distribute space */
            max-width: calc(var(--grid-size, 3) * var(--cell-size) * 1.5); /* Limit clue width relative to grid */
        }

.clue-list {
            flex: 1; /* Allow lists to grow */
            min-width: 150px; /* Minimum width before wrapping */
        }

.clue-list h3 {
            font-size: 1rem;
            margin-bottom: var(--spacing-sm);
            color: var(--text-muted-color);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: var(--spacing-xs);
        }

.clue-list ul {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 0.9rem;
            max-height: 250px; /* Limit height and allow scroll */
            overflow-y: auto;
        }

.clue-list li {
            padding: var(--spacing-xs) var(--spacing-sm);
            margin-bottom: var(--spacing-xs);
            cursor: pointer;
            border-radius: calc(var(--border-radius) / 2);
            transition: background-color 0.15s ease-out, color 0.15s ease-out;
        }

.clue-list li:hover {
            background-color: #e2e8f0; /* Cool gray hover */
        }

.clue-list li.selected {
            background-color: var(--clue-selected-bg-color);
            color: var(--clue-selected-text-color);
            font-weight: 600;
        }

.clue-list li span {
            font-weight: bold;
            margin-right: var(--spacing-sm);
        }

/* Hidden Input for Keyboard Handling */
        #hidden-input {
            position: absolute;
            left: -9999px;
            top: -9999px;
            opacity: 0;
            width: 1px;
            height: 1px;
            border: none;
            padding: 0;
        }

/* Accessibility focus styles */
        .cell:focus, .clue-list li:focus {
            outline: none; /* Remove default */
        }
        .cell:focus-visible {
             outline: var(--focus-ring-width) solid var(--focus-outline-color);
             outline-offset: 1px;
             z-index: 6;
        }
         .clue-list li:focus-visible {
             outline: var(--focus-ring-width) solid var(--focus-outline-color);
             outline-offset: 1px;
             background-color: var(--clue-selected-bg-color); /* Match selected style on focus */
             color: var(--clue-selected-text-color);
        }

/* Responsive Adjustments */
        @media (max-width: 600px) {
            body {
                flex-direction: column; /* Stack elements vertically */
                align-items: center;
                padding: var(--spacing-md);
            }
            .crossword-container {
                padding: var(--spacing-sm);
                max-width: 100%;
            }
            .clues-container {
                flex-direction: column; /* Stack clue lists */
                gap: var(--spacing-md);
                width: 100%;
                max-width: 100%;
            }
             .clue-list ul {
                 max-height: 150px; /* Shorter scroll area on mobile */
             }
        }

</style>
</head>
<body>

<div class="crossword-container" id="crossword-container">
        <h2 id="puzzle-title">Crossword Puzzle</h2>
        <div class="crossword-grid" id="crossword-grid" role="grid" aria-labelledby="puzzle-title">
            
        </div>
        
        <input type="text" id="hidden-input" aria-hidden="true" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
    </div>

<div class="clues-container">
        <div class="clue-list">
            <h3 id="across-title">Across</h3>
            <ul id="across-clues" role="list" aria-labelledby="across-title">
                
            </ul>
        </div>
        <div class="clue-list">
            <h3 id="down-title">Down</h3>
            <ul id="down-clues" role="list" aria-labelledby="down-title">
                
            </ul>
        </div>
    </div>

// --- DOM Elements ---
            const gridElement = document.getElementById('crossword-grid');
            const acrossCluesElement = document.getElementById('across-clues');
            const downCluesElement = document.getElementById('down-clues');
            const titleElement = document.getElementById('puzzle-title');
            const hiddenInputElement = document.getElementById('hidden-input');
            const containerElement = document.getElementById('crossword-container');

// --- State ---
            let currentFocus = { row: -1, col: -1 };
            let currentDirection = 'across'; // 'across' or 'down'
            let currentClue = null; // { num: 1, dir: 'across' }
            let gridCells = []; // 2D array of cell elements

// --- Initialization ---
            function initialize() {
                titleElement.textContent = puzzleData.title;
                gridElement.style.setProperty('--grid-size', puzzleData.size);
                buildGrid();
                buildClueLists();
                addEventListeners();
                // Initially focus the first cell of the first across clue
                selectClue(puzzleData.clues.across[0].num, 'across');
            }

function buildGrid() {
                gridElement.innerHTML = ''; // Clear previous grid
                gridCells = [];
                for (let r = 0; r < puzzleData.size; r++) {
                    const rowCells = [];
                    for (let c = 0; c < puzzleData.size; c++) {
                        const cell = document.createElement('div');
                        cell.classList.add('cell');
                        cell.dataset.row = r;
                        cell.dataset.col = c;
                        cell.setAttribute('role', 'gridcell');
                        cell.setAttribute('tabindex', '-1'); // Make focusable via script

if (puzzleData.layout[r][c] === 0) {
                            cell.classList.add('black');
                            cell.setAttribute('aria-disabled', 'true');
                        } else {
                            const num = puzzleData.gridnums[r][c];
                            if (num > 0) {
                                const numSpan = document.createElement('span');
                                numSpan.classList.add('cell-number');
                                numSpan.textContent = num;
                                cell.appendChild(numSpan);
                            }
                            const contentSpan = document.createElement('span');
                            contentSpan.classList.add('cell-content');
                            contentSpan.textContent = ''; // Start empty
                             cell.appendChild(contentSpan);
                            cell.setAttribute('aria-label', `Cell ${r + 1}, ${c + 1}`);
                        }
                        gridElement.appendChild(cell);
                        rowCells.push(cell);
                    }
                    gridCells.push(rowCells);
                }
            }

function buildClueLists() {
                 acrossCluesElement.innerHTML = '';
                 downCluesElement.innerHTML = '';
                 puzzleData.clueMap = {}; // Reset map

puzzleData.clues.across.forEach(clue => {
                     const li = document.createElement('li');
                     li.dataset.num = clue.num;
                     li.dataset.dir = 'across';
                     li.setAttribute('role', 'listitem');
                     li.setAttribute('tabindex', '0'); // Make clues focusable
                     li.innerHTML = `<span>${clue.num}.</span> ${clue.clue}`;
                     acrossCluesElement.appendChild(li);
                     puzzleData.clueMap[`${clue.num}-across`] = clue;
                 });

puzzleData.clues.down.forEach(clue => {
                     const li = document.createElement('li');
                     li.dataset.num = clue.num;
                     li.dataset.dir = 'down';
                     li.setAttribute('role', 'listitem');
                     li.setAttribute('tabindex', '0');
                     li.innerHTML = `<span>${clue.num}.</span> ${clue.clue}`;
                     downCluesElement.appendChild(li);
                     puzzleData.clueMap[`${clue.num}-down`] = clue;
                 });
            }

// --- Event Handling ---
            function addEventListeners() {
                // Grid clicks
                gridElement.addEventListener('click', handleGridClick);

// Clue clicks
                acrossCluesElement.addEventListener('click', handleClueClick);
                downCluesElement.addEventListener('click', handleClueClick);

// Clue keyboard navigation (Enter/Space to select)
                 acrossCluesElement.addEventListener('keydown', handleClueKeydown);
                 downCluesElement.addEventListener('keydown', handleClueKeydown);

// Keyboard input via hidden input (focused programmatically)
                 hiddenInputElement.addEventListener('input', handleTextInput);
                 // Need keydown for backspace, delete, arrows etc.
                 containerElement.addEventListener('keydown', handleGridKeydown);
            }

function handleGridClick(event) {
                const cell = event.target.closest('.cell');
                if (!cell || cell.classList.contains('black')) return;

const row = parseInt(cell.dataset.row);
                const col = parseInt(cell.dataset.col);

if (currentFocus.row === row && currentFocus.col === col) {
                    // Toggle direction on second click
                    currentDirection = (currentDirection === 'across') ? 'down' : 'across';
                } else {
                    // Determine initial direction preference (Across if possible)
                    currentDirection = findWordAt(row, col, 'across') ? 'across' : 'down';
                }

focusCell(row, col);
                // Ensure hidden input is focused to capture typing
                // Delay slightly needed sometimes for focus to register
                // setTimeout(() => hiddenInputElement.focus(), 0);
                // Alternative: focus the cell itself and handle keys on container
                cell.focus();
            }

function handleClueClick(event) {
                 const clueItem = event.target.closest('li');
                 if (!clueItem) return;

const num = parseInt(clueItem.dataset.num);
                 const dir = clueItem.dataset.dir;
                 selectClue(num, dir);
             }

function handleClueKeydown(event) {
                 const clueItem = event.target.closest('li');
                  if (!clueItem) return;

if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    const num = parseInt(clueItem.dataset.num);
                    const dir = clueItem.dataset.dir;
                    selectClue(num, dir);
                 }
                 // Allow arrow key navigation between clues (handled by browser/list structure)
             }

function handleGridKeydown(event) {
                 // Only handle keys if focus is within the grid or its container implicitly
                 if (!gridElement.contains(document.activeElement) && document.activeElement !== containerElement && !document.activeElement.closest('.cell')) {
                     // Also check if focus is on clues, if so, don't interfere unless it's tab?
                      if (acrossCluesElement.contains(document.activeElement) || downCluesElement.contains(document.activeElement)) {
                          // Allow arrow keys etc for clue list navigation
                          return;
                      }
                       // If focus isn't explicitly handled, maybe exit? Or redirect focus?
                       // For now, assume keydown on container means grid interaction intended if no cell focused.
                       if(currentFocus.row === -1 && currentFocus.col === -1) return; // No active cell
                 }

const { row, col } = currentFocus;
                if (row === -1 || col === -1) return; // No cell focused

const key = event.key;

if (key.length === 1 && key.match(/[a-z]/i)) {
                    event.preventDefault();
                    setCellContent(row, col, key.toUpperCase());
                    advanceFocus();
                } else if (key === 'Backspace') {
                     event.preventDefault();
                     // Clear current cell *then* move back.
                     const currentContent = getCellContent(row, col);
                     setCellContent(row, col, '');
                     if (currentContent === '') { // If cell was already empty, just move back
                          retreatFocus();
                     }
                } else if (key === 'Delete') {
                    event.preventDefault();
                    setCellContent(row, col, ''); // Clear current cell, don't move
                } else if (key === 'ArrowUp') {
                    event.preventDefault();
                    moveFocus(row - 1, col);
                } else if (key === 'ArrowDown') {
                    event.preventDefault();
                    moveFocus(row + 1, col);
                } else if (key === 'ArrowLeft') {
                    event.preventDefault();
                    moveFocus(row, col - 1);
                } else if (key === 'ArrowRight') {
                    event.preventDefault();
                    moveFocus(row, col + 1);
                } else if (key === ' ' || key === 'Enter') { // Toggle direction with Space or Enter
                    event.preventDefault();
                    currentDirection = (currentDirection === 'across') ? 'down' : 'across';
                    updateHighlights();
                } else if (key === 'Tab') {
                    // Allow tabbing out of the grid to the clue lists
                    // Potentially could implement custom tab wrapping within grid/clues
                    return; // Let browser handle default tab
                }
            }

// Deprecated: Handling via hidden input was less reliable for arrows/backspace
            function handleTextInput(event) {
                // This handles typing, pasting etc.
                // const input = event.target.value.toUpperCase();
                // event.target.value = ''; // Clear input immediately
                // if (!input || currentFocus.row === -1) return;
                // setCellContent(currentFocus.row, currentFocus.col, input.slice(-1)); // Use last char typed/pasted
                // advanceFocus();
            }

// --- Focus & Selection Logic ---

/** Finds the clue definition associated with a cell in a given direction */
            function findWordAt(row, col, direction) {
                let currentClueNum = 0;
                let startRow = row, startCol = col;

if (direction === 'across') {
                    while (startCol >= 0 && puzzleData.layout[startRow][startCol] === 1) {
                         if (puzzleData.gridnums[startRow][startCol] > 0) {
                             // Check if this number corresponds to an 'across' clue starting here
                             const potentialClue = puzzleData.clueMap[`${puzzleData.gridnums[startRow][startCol]}-across`];
                              if (potentialClue && potentialClue.row === startRow && potentialClue.col === startCol) {
                                  currentClueNum = puzzleData.gridnums[startRow][startCol];
                                  break; // Found the start
                              }
                         }
                         if (startCol === 0) break; // Reached edge
                         startCol--;
                    }
                } else { // direction === 'down'
                     while (startRow >= 0 && puzzleData.layout[startRow][startCol] === 1) {
                         if (puzzleData.gridnums[startRow][startCol] > 0) {
                             // Check if this number corresponds to a 'down' clue starting here
                             const potentialClue = puzzleData.clueMap[`${puzzleData.gridnums[startRow][startCol]}-down`];
                              if (potentialClue && potentialClue.row === startRow && potentialClue.col === startCol) {
                                  currentClueNum = puzzleData.gridnums[startRow][startCol];
                                  break; // Found the start
                              }
                         }
                         if (startRow === 0) break; // Reached edge
                         startRow--;
                    }
                }

return currentClueNum > 0 ? { num: currentClueNum, dir: direction } : null;
            }

function focusCell(row, col) {
                if (row < 0 || row >= puzzleData.size || col < 0 || col >= puzzleData.size || puzzleData.layout[row][col] === 0) {
                    return; // Invalid or black cell
                }

// Remove previous focus class
                if (currentFocus.row !== -1) {
                    gridCells[currentFocus.row][currentFocus.col]?.classList.remove('focused');
                }

currentFocus = { row, col };
                const cell = gridCells[row][col];
                cell.classList.add('focused');
                cell.focus(); // Set actual browser focus

// Determine the word/clue associated with this cell and direction
                const clueInfo = findWordAt(row, col, currentDirection) || findWordAt(row, col, currentDirection === 'across' ? 'down' : 'across');

if (clueInfo) {
                    currentClue = clueInfo;
                    // If switching direction implicitly, update state
                    if(clueInfo.dir !== currentDirection && findWordAt(row, col, clueInfo.dir)) {
                       currentDirection = clueInfo.dir;
                    }
                } else {
                     currentClue = null; // Cell might not be part of a known clue start
                }
                 updateHighlights();
            }

function selectClue(num, dir) {
                const clue = puzzleData.clueMap[`${num}-${dir}`];
                if (!clue) return;

currentClue = { num, dir };
                currentDirection = dir;
                focusCell(clue.row, clue.col); // Move focus to the start of the word

// Also scroll the clue into view in the list
                 const clueListElement = dir === 'across' ? acrossCluesElement : downCluesElement;
                 const clueItem = clueListElement.querySelector(`li[data-num="${num}"][data-dir="${dir}"]`);
                 if (clueItem) {
                     clueItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 }
            }

function updateHighlights() {
                // Clear all previous highlights
                gridCells.flat().forEach(cell => cell?.classList.remove('highlight'));
                document.querySelectorAll('.clue-list li').forEach(li => li.classList.remove('selected'));

if (!currentClue) return;

const { num, dir } = currentClue;
                const clueData = puzzleData.clueMap[`${num}-${dir}`];
                if (!clueData) return;

// Highlight cells in the grid
                for (let i = 0; i < clueData.len; i++) {
                    let r = clueData.row;
                    let c = clueData.col;
                    if (dir === 'across') {
                        c += i;
                    } else {
                        r += i;
                    }
                    if (r < puzzleData.size && c < puzzleData.size && gridCells[r][c]) {
                         gridCells[r][c].classList.add('highlight');
                    }
                }

// Ensure focused cell style overrides highlight
                 if (currentFocus.row !== -1) {
                    gridCells[currentFocus.row][currentFocus.col]?.classList.add('focused');
                 }

// Highlight clue in the list
                const clueListElement = dir === 'across' ? acrossCluesElement : downCluesElement;
                const clueItem = clueListElement.querySelector(`li[data-num="${num}"][data-dir="${dir}"]`);
                clueItem?.classList.add('selected');
            }

function advanceFocus() {
                 let { row, col } = currentFocus;
                 if (row === -1) return;

if (puzzleData.layout[nextRow][nextCol] === 1) {
                         focusCell(nextRow, nextCol);
                         moved = true;
                         break; // Found next valid cell
                     }
                     // If next cell is black, continue loop to check the one after
                 } while(true); // Loop until break: found valid cell or hit boundary
            }

function retreatFocus() {
                 let { row, col } = currentFocus;
                 if (row === -1) return;

if (puzzleData.layout[prevRow][prevCol] === 1) {
                         focusCell(prevRow, prevCol);
                         moved = true;
                         break; // Found previous valid cell
                     }
                      // If previous cell is black, continue loop
                 } while(true);
            }

// Smart direction switching: If arrow moves outside current word, switch direction if possible.
                        let stayInDirection = false;
                        if (currentWordClue) {
                            if(currentDirection === 'across' && targetRow === currentWordClue.row && targetCol >= currentWordClue.col && targetCol < currentWordClue.col + currentWordClue.len) stayInDirection = true;
                            if(currentDirection === 'down' && targetCol === currentWordClue.col && targetRow >= currentWordClue.row && targetRow < currentWordClue.row + currentWordClue.len) stayInDirection = true;
                        }

if (!stayInDirection) {
                             // Prefer to switch to the direction orthogonal to the arrow movement if a word exists there
                            const arrowVertical = targetRow !== currentFocus.row;
                            if(arrowVertical && targetClueDown) currentDirection = 'down';
                            else if (!arrowVertical && targetClueAcross) currentDirection = 'across';
                            // Fallback: keep current direction if target is valid in that dir, else switch
                            else if (!findWordAt(targetRow, targetCol, currentDirection)) {
                                currentDirection = (currentDirection === 'across' ? 'down' : 'across');
                            }
                        }

focusCell(targetRow, targetCol);
                 }
                 // If target is black, don't move focus. (Could implement skip-over later)
             }

// --- Cell Content ---
            function setCellContent(row, col, char) {
                if (row < 0 || row >= puzzleData.size || col < 0 || col >= puzzleData.size || puzzleData.layout[row][col] === 0) {
                    return;
                }
                const cell = gridCells[row][col];
                const contentSpan = cell.querySelector('.cell-content');
                if (contentSpan) {
                    contentSpan.textContent = char.toUpperCase();
                    cell.setAttribute('aria-label', `Cell ${row + 1}, ${col + 1}, ${char ? 'contains ' + char : 'empty'}`);
                    // Add check logic here later if needed
                }
            }

function getCellContent(row, col) {
                if (row < 0 || row >= puzzleData.size || col < 0 || col >= puzzleData.size || puzzleData.layout[row][col] === 0) {
                    return '';
                }
                 const cell = gridCells[row][col];
                 const contentSpan = cell.querySelector('.cell-content');
                 return contentSpan ? contentSpan.textContent : '';
            }

// --- Start ---
            initialize();

})(); // End IIFE
    </script>

</body>
</html>

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground