/* ===== CSS Variables ===== */
:root {
--color-bg: #1a1a2e;
--color-surface: #16213e;
--color-cell: #0f3460;
--color-cell-hover: #145091;
--color-x: #e94560;
--color-o: #53d8fb;
--color-text: #eaeaea;
--color-border: #2c3e6b;

--radius-md: 8px;
--transition-fast: 150ms ease-in-out;
}

/* ===== Reset ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--color-bg);
color: var(--color-text);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
gap: 1.5rem;
padding: 2rem 1rem;
}

.game-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}

/* ===== Header & Status ===== */
.site-header h1 {
font-size: clamp(1.75rem, 5vw, 2.5rem);
text-align: center;
}

.status {
font-size: 1.1rem;
font-weight: 600;
min-height: 1.5em; /* prevents layout shift when text changes */
}

/* ===== Board ===== */
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
width: min(90vw, 360px);
aspect-ratio: 1 / 1;
}

.cell {
background-color: var(--color-cell);
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
font-size: clamp(2rem, 8vw, 3rem);
font-weight: 700;
color: var(--color-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.cell:hover:not(:disabled) {
background-color: var(--color-cell-hover);
transform: scale(1.03);
}

.cell:disabled {
cursor: not-allowed;
}

.cell.x { color: var(--color-x); }
.cell.o { color: var(--color-o); }

/* ===== Reset Button ===== */
.reset-btn {
padding: .6rem .4rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
background-color: var(--color-surface);
border: 2px solid var(--color-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.reset-btn:hover {
background-color: var(--color-cell-hover);
border-color: var(--color-cell-hover);
}

.reset-btn:focus-visible,
.cell:focus-visible {
outline: 3px solid var(--color-o);
outline-offset: 2px;
}

/* ===== Footer ===== */
.site-footer {
font-size: 0.85rem;
color: #8a8fa3;
text-align: center;
}

/* ===== Winning Cell Highlight ===== */
.cell.winning-cell-x {
background-color: var(--color-x);
color: var(--color-bg);
animation: pulse 0.6s ease-in-out;
}

.cell.winning-cell-o {
background-color: var(--color-o);
color: var(--color-bg);
animation: pulse 0.6s ease-in-out;
}

.board.draw .cell {
background-color: #f4a259;
transition: background-color 0.4s ease-in-out;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}