@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg:       #111111;
  --surface:  #1a1a1a;
  --border:   #333333;
  --text:     #e8e8e8;
  --muted:    #666666;
  --player:   #e8e8e8;
  --ai:       #666666;
  --hover:    #222222;
  --win:      #1f2a1f;
  --win-text: #6fcf6f;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'DM Mono', monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

h1 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

#status {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text);
  height: 1.4em;
}

/* The board uses a grid but relies on cell borders for the lines */
#board {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-template-rows: repeat(3, 120px);
}

.cell {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);

  /* Draw grid lines using borders only on right and bottom,
     so we get inner lines without an outer border on the board */
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);

  transition: background-color 0.1s;
}

/* Remove the right border on every 3rd cell (last column) */
.cell:nth-child(3n) {
  border-right: none;
}

/* Remove the bottom border on the last 3 cells (last row) */
.cell:nth-child(n+7) {
  border-bottom: none;
}

.cell:hover:not(.taken) {
  background-color: var(--hover);
}

.cell.taken {
  cursor: default;
}

/* O is bright, X is muted — visually separates player from AI */
.cell.player {
  color: var(--player);
}

.cell.ai {
  color: var(--ai);
}

/* Winning cells get a subtle green tint */
.cell.win-cell {
  background-color: var(--win);
  color: var(--win-text);
}

#reset-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 10px 28px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

#reset-btn:hover {
  border-color: var(--text);
  color: var(--text);
}