/* TTT-specific styles. The shared shell (score, status line, connect bar,
   below-game controls, a11y primitives, their breakpoints) comes from
   /lib/core.css, linked before this file. core.css defines the shared token
   defaults (--ink --paper --line --wash --wash-hover --muted --focus); this
   file may override any of them, and adds the game-only tokens below. */

:root {
    --grid: #1a1a2e;    /* board lines */
    --accent: #0b57d0;  /* O mark; >=4.5:1 on white */
}

/* The board: a 3×3 grid drawn with only the two inner horizontal and two
   inner vertical lines — no outer border. Right border on every cell that
   isn't in the last column, bottom border on every cell not in the last row. */
.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: min(78vw, 340px);
    aspect-ratio: 1;
    margin: 0 auto;
}

.cell {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
    font-size: clamp(44px, 17vw, 92px);
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
}

.cell:not(:nth-child(3n)) { border-right: 4px solid var(--grid); }
.cell:nth-child(-n + 6)   { border-bottom: 4px solid var(--grid); }

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

.cell:disabled { cursor: default; }

/* Only real pointers hover; on touch :hover sticks after a tap. */
@media (hover: hover) {
    .cell:not(:disabled):hover {
        background: var(--wash);
    }
}

.cell.win {
    background: var(--wash-hover);
}

@media (min-width: 576px) {
    .board { width: 380px; }
    .cell { font-size: 96px; }
}

@media (min-width: 768px) {
    .board { width: 420px; }
    .cell { font-size: 108px; }
}

@media (min-width: 992px) {
    .board { width: 460px; }
    .cell { font-size: 120px; }
}