.ttt-status {
  width: min(520px, 100%);
  margin: 0 auto 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
  background: rgba(255,255,255,.025);
  font-weight: 800;
}

.ttt-board {
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, #0b222b, #08161d);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 20px 50px rgba(0,0,0,.24);
}

.ttt-board button {
  aspect-ratio: 1;
  border: 1px solid rgba(145,190,202,.18);
  border-radius: 17px;
  color: var(--text);
  background: rgba(255,255,255,.035);
  cursor: pointer;
  font-size: clamp(3.1rem, 10vw, 5.7rem);
  font-weight: 800;
  line-height: 1;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.ttt-board button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: rgba(104,208,223,.075);
}

.ttt-board button.x { color: var(--cyan); text-shadow: 0 8px 24px rgba(104,208,223,.22); }
.ttt-board button.o { color: var(--gold); text-shadow: 0 8px 24px rgba(242,199,92,.22); }
.ttt-board button.win {
  border-color: rgba(139,207,155,.62);
  background: rgba(139,207,155,.13);
  box-shadow: 0 0 24px rgba(139,207,155,.11);
}

@media (max-width: 560px) {
  .ttt-board { gap: 8px; padding: 10px; }
  .ttt-board button { border-radius: 13px; }
}