.ttt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(18rem, 100%); }
.ttt-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; line-height: 1; background: var(--card); border: 1px solid var(--edge);
  border-radius: var(--radius); box-shadow: var(--shadow); user-select: none;
}
.ttt-cell.open { cursor: pointer; border-color: var(--accent); }
.ttt-cell.open:hover { background: var(--paper-2); }
.ttt-cell.mark-x { color: var(--x); }
.ttt-cell.mark-o { color: var(--o); }
/* The winning line. A ring and a tint, so it shows in either mark's colour. */
.ttt-cell.win { background: #fbefc2; border-color: #d9a520; box-shadow: 0 0 0 3px #f2c94c; }