.ttt-grid {
  width: min(340px, 88vw);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.cell {
  background: var(--bg-alt);
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display-font);
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.cell:hover:empty {
  border-color: var(--gold);
}

.cell.x { color: var(--teal); }
.cell.o { color: var(--coral); }
.cell.win { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }