* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 600px at 20% 0%, #1b2a4a 0%, #0d1426 60%);
  color: #e8ecf5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { text-align: center; padding: 24px; }

h1 {
  margin: 0;
  font-size: 3rem;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  background: linear-gradient(90deg, #7f9cf5, #b78bd2, #7f9cf5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline { margin: 4px 0 20px; color: #93a1bd; font-size: 0.95rem; }

.scoreboard { display: flex; gap: 20px; justify-content: center; font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.scoreboard span { padding: 6px 14px; border-radius: 999px; background: #16203a; font-size: 0.9rem; }

#board {
  display: grid;
  grid-template-columns: repeat(3, 96px);
  grid-template-rows: repeat(3, 96px);
  gap: 8px;
  width: fit-content;
  margin: 0 auto;
}

.cell {
  width: 96px;
  height: 96px;
  font-size: 2.4rem;
  font-weight: 700;
  background: #16203a;
  border: 2px solid #243049;
  border-radius: 14px;
  color: #e8ecf5;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.cell:hover:not(:disabled) { background: #1e2b4d; border-color: #4a5b86; transform: translateY(-2px); }

.cell.x { color: #7f9cf5; }
.cell.o { color: #b78bd2; }
.cell.win { background: #26375f; border-color: #7f9cf5; animation: pop 0.35s ease; }
.cell:disabled { cursor: default; }

@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }

#status { font-size: 1.1rem; min-height: 1.6em; margin: 18px 0 10px; }

.controls { display: flex; gap: 12px; justify-content: center; align-items: center; }
.controls select, .controls button {
  padding: 9px 16px;
  font-size: 0.95rem;
  border-radius: 10px;
  border: 2px solid #2c3a5e;
  background: #16203a;
  color: #e8ecf5;
  cursor: pointer;
}
.controls button { background: #2c4a8c; border-color: #3d5dac; font-weight: 600; }
.controls button:hover { background: #3558a3; }

.about { margin: 28px auto 0; max-width: 480px; color: #93a1bd; font-size: 0.85rem; text-align: left; }
.about summary { cursor: pointer; }
.about a { color: #93a1bd; }