#app {
  display: grid;
  place-items: center;
}

.board {
  display: grid;
  width: 100%;
  max-width: 400px;
  pointer-events: auto;
}

.cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--color-primary);
  margin-right: -1px;
  margin-bottom: -1px;
  background-color: #00000000;
  font-weight: bold;

  &:not([data-mark="0"])::before {
    content: attr(data-mark);
  }

  &[data-mark=""] {
    background-color: #00000011;
    cursor: pointer;
    &:hover {
      background-color: #00000044;
    }
  }

  &[data-mark="1"] {
    background-color: #0000FF11;
  }
  &[data-mark="2"] {
    background-color: #FFAA0011;
  }
  &[data-mark="3"] {
    background-color: #FF000011;
  }
}