# Tic-Tac-Toe Game — Build Specification

## Objective
Create a complete, runnable **single-file HTML document** implementing a professional-quality Tic-Tac-Toe game (human **X** vs. AI **O**). The file must be fully playable by opening it in a browser — no build step, no dependencies.

## Core Gameplay
- 3×3 grid of clickable cells; human clicks empty cells, AI responds automatically
- Human is **X**, AI is **O**
- Status label showing whose turn it is and the game result
- Detect and announce wins across rows, columns, and both diagonals, plus draws
- Highlight the winning three cells and disable further moves when the game ends

## Features
- **Difficulty selector:**
  - Easy → AI plays random moves
  - Hard → AI uses the **minimax algorithm** for unbeatable optimal play
- **New Game button** that clears the board only — **the scoreboard is preserved**
- **Scoreboard** tracking human wins, AI wins, and draws
  - Scores accumulate across rounds within the same browser session
  - Scores reset to zero **only when the page is first loaded/refreshed** (a fresh browser start)
  - Do **not** persist scores across page loads (no `localStorage`)

## Visual Design
- Dark slate/charcoal background (subtle deep navy-to-slate gradient — **no pink or pastel backgrounds**)
- Clean elevated card holding the board, with soft shadows and rounded corners
- Vibrant, high-contrast accents:
  - Distinct colors for X and O (e.g. bright cyan for X, warm amber for O)
  - Clear hover effects on cells
  - Generous, clean spacing
- Large readable fonts; fixed, nicely centered layout optimized for a desktop browser

## Grid Sizing (must be uniform)
- All grid cells must be **equal-sized perfect squares** — cell size must **not** change based on whether a cell is empty or filled
- Use a fixed grid structure: `grid-template-columns: repeat(3, 1fr)` with a fixed `max-width` on the board
- Force each cell to a square with `aspect-ratio: 1 / 1`
- Use a **fixed `font-size`** for X/O and center the mark with flexbox (`display: flex; align-items: center; justify-content: center`) so the letter never resizes its cell
- Apply `box-sizing: border-box` so borders/padding don't alter the cell footprint

## Control Buttons
Style the three bottom buttons with distinct, high-contrast backgrounds and bold, readable text:
- **Easy** → green
- **Hard** → red/orange
- **New Game** → blue
- All with white bold lettering
- Use standard CSS buttons (not platform widgets) so colored backgrounds render reliably in every browser

## Code Structure
- All logic in a **single JavaScript class** with separate methods for:
  - Building the UI
  - Handling clicks
  - AI move logic
  - Checking the winner
  - Resetting the board (New Game — does **not** touch the scoreboard)
- Semantic HTML, inline CSS in a `<style>` block, inline JS in a `<script>` block
- **No external files, frameworks, or CDN dependencies** — fully offline-capable
- Include concise comments

## Output
- Output **only** the complete HTML code in a single file
- Save the file as: 22_Gemini_4_Argon.html