/* tictactoe: rules used only by the tictactoe pages (loaded after base.css). */
/* Tic-Tac-Toe board: nine buttons placed by percentage in a square box
   (height set from the width by tictactoe-app.js). Marks are inline SVG:
   a cross for Player 1, a circle for Player 2. The winning line turns
   solid black with white marks - told apart by fill, not colour. */
.ttt-board {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border: 3px solid var(--border);
  box-sizing: border-box;
}

.ttt-cell {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 2px solid var(--border);
  border-radius: 0;
  background: #fff;
  cursor: pointer;
}

.ttt-mark {
  display: block;
  width: 100%;
  height: 100%;
}

.ttt-mark line,
.ttt-mark circle {
  stroke: var(--text);
  stroke-width: 9;
  stroke-linecap: round;
  fill: none;
}

.ttt-cell.ttt-cell-win {
  background: var(--text);
}

.ttt-cell-win .ttt-mark line,
.ttt-cell-win .ttt-mark circle {
  stroke: #fff;
}

.ttt-icon-swatch {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  box-sizing: border-box;
  vertical-align: middle;
  border: 2px solid var(--border);
}

.ttt-term-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}