Minesweeper

Build a deterministic 9×9 Minesweeper board in React. Ten mines are fixed so every run is reproducible. The starter supplies the board builder and finished presentation; add immutable state updates, flood-fill reveal, flagging, outcome detection, and keyboard navigation.

Behavior contract

• A hidden safe cell reveals on click or Enter/Space. A numbered cell stops there; a zero cell reveals its connected zero region and the numbered boundary.
• A hidden mine reveals all mines and ends the game. Once won or lost, board actions do nothing until New game.
• Right-click or F toggles a flag only on an unrevealed cell. A flagged cell cannot be revealed. The counter is 10 - flagged cells and may be negative.
• Win when all 71 safe cells are revealed; flags do not determine the win. Reset restores the same hidden board, counter 10, status Game ready, and focus index 0.
• Arrow keys move the single roving tab stop within board bounds: Left/Right by one column, Up/Down by one row. Moving focus must not reveal a cell.

Accessibility contract

• Keep role="grid" and the 9×9 label on the board, role="gridcell" on each native button, and exactly one cell at tabIndex={0}.
• Each cell label includes its 1-based row, column, and current state: hidden, flagged, clear, N adjacent mines, or mine.
• Keep the visible result in the polite live region and preserve the visible focus ring. Mouse-only context menus are not the only way to flag.

React requirements

Keep board, status, and focusIndex in state. Never mutate the current board then pass the same array back to setBoard; clone the cells, run the breadth-first fill on that draft, and commit one new array. Use button refs to move DOM focus after an arrow-key state update.

Do not edit styles.css: it is the persistent visual contract used when the solution is loaded.