:root { --game-accent: #b6a4ff; --game-mark-o: #f4d37b; }
.ttt-board {
  display: grid;
  width: min(100%, 470px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.45rem, 2.4vw, 0.85rem);
  margin-inline: auto;
}
.ttt-cell {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(182, 164, 255, 0.27);
  border-radius: clamp(14px, 4vw, 24px);
  background: linear-gradient(150deg, rgba(55, 47, 91, 0.88), rgba(20, 20, 42, 0.95));
  color: var(--game-accent);
  font-family: "Baloo 2", "Quicksand", ui-rounded, system-ui, sans-serif;
  font-size: clamp(3.1rem, 17vw, 6.2rem);
  font-weight: 700;
  line-height: 0.8;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.ttt-cell:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(182, 164, 255, 0.72);
  box-shadow: 0 12px 26px rgba(10, 6, 29, 0.3);
}
.ttt-cell[data-mark="O"] { color: var(--game-mark-o); }
.ttt-cell:disabled { cursor: default; }
.ttt-cell.is-winning {
  border-color: rgba(129, 230, 211, 0.88);
  background: linear-gradient(145deg, rgba(49, 120, 117, 0.62), rgba(25, 47, 68, 0.94));
  box-shadow: 0 0 28px rgba(129, 230, 211, 0.2);
  animation: ttt-win 520ms ease both;
}
@keyframes ttt-win { 50% { transform: scale(1.035); } }
@media (max-width: 360px) {
  .ttt-board { gap: 0.4rem; }
}