#wrapper {
  text-align: center;

  & #board {
    display: grid;
    grid-template-columns: repeat(9, 4rem);
    grid-template-rows: repeat(9, 4rem);
    gap: 0;
    border: 3px solid #000;
    margin: 2rem auto;
    width: fit-content;

    & > input {
      width: 4rem;
      height: 4rem;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      text-align: center;
      vertical-align: middle;
    }

    & > input:nth-child(9n+3), & > input:nth-child(9n+6) {
      border-right: 3px solid #000;
    }

    & > input:nth-child(n+19):nth-child(-n+27), & > input:nth-child(n+46):nth-child(-n+54) {
      border-bottom: 3px solid #000;
    }

    & > input.starter {
      background-color: #eee;
    }
  }

  & p#status {
    font-size: 2.5rem;
    color: #653577;
    border: 2px dotted #ccc;
    padding: 1rem;
    margin: 2rem auto;
    width: fit-content;
  }

  & p#status:empty {
    display: none;
  }
}