.ttt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 280px; margin: 16px auto; }
.ttt-cell {
  aspect-ratio: 1; border-radius: 12px; background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 800; cursor: pointer; user-select: none;
  transition: background 0.12s;
}
.ttt-cell:hover { background: #d7ede9; }
.ttt-cell.x { color: var(--primary); }
.ttt-cell.o { color: var(--warn); }
.ttt-cell.win { background: var(--primary); color: #fff; }
.msg { min-height: 1.4em; font-weight: 700; color: var(--primary); margin-bottom: 10px; }