/*  Display , Size , Rules , Decoration, Spacing */
/*  ---------------------------------------------------------------  //  Game  ------------------- */
/*  ---------------------------------------------------------------  //  Score  ------------------- */

/*  Display , Size , Rules , Decoration, Spacing */
/*  ---------------------------------------------------------------  //  Board  ------------------- */

.game-board {
  display: grid;

  width: 90%;
  max-width: 50rem;

  grid-template-columns: repeat(3, 10rem);
  grid-template-rows: repeat(3, 10rem);
  
  align-items: center;
  justify-content: center;

  list-style: none;
  font-size: 2rem;
  color: var(--fontMainSub);

  margin: auto;
}

.grid ol {
  display: grid;
  grid-template-columns: repeat(3, 3rem);
  grid-template-rows: repeat(3, 3rem);
  text-align: center;
  align-items: center;
  list-style: none;
  padding: 0.5rem;
}

.grid li {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  padding: 0.5rem;
}

.list-bottom-border {
  border-bottom: 1px solid var(--primaryAlphaTwo);
}

.list-right-border {
  border-right: 1px solid var(--primaryAlphaTwo);
}

.game-board-bottom-border {
  border-bottom: 1px solid var(--primaryAlpha);
}

.game-board-right-border {
  border-right: 1px solid var(--primaryAlpha);
}

.fixed {
  color: var(--fontMain);
  font-weight: 300;
}

.selected,
.highlighted {
  background-color: var(--primaryAlphaTwo);
}

/*  Display , Size , Rules , Decoration, Spacing */
/*  ---------------------------------------------------------------  //  Selection  --------------- */

.selection-pad {
  display: none;
  width: 80%;
  max-width: 30rem;
  margin: 4rem auto;
}

.select {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  margin: auto;
}

.select li {
  width: 1.8rem;
  height: 1.8rem;

  color: var(--fontMainSub);
  font-size: 1.4rem;
  text-align: center;
  align-items: center;

  border: 1px solid var(--primaryAlphaTwo);

  margin: 0.25rem;
  padding: 0.5rem;
  padding-bottom: 0.25rem;

  transition: 0.2s;
}

.select li:hover,
.eraser-selected {
  width: 2rem;
  height: 2rem;
  font-size: 1.75rem;
  color: var(--fontMain);
  border: 1px solid var(--primaryAlpha);
  background-color: var(--primaryAlphaTwo);
}

/*  ---------------------------------------------------------------  //  MEDIA  ------------------- */

@media (max-width: 42rem) {
  .game-board {
    grid-template-columns: repeat(3, 7rem);
    grid-template-rows: repeat(3, 7rem);
    font-size: 1.2rem;
  }

  .selection-pad {
    margin: 1rem auto;
  }

  .grid ol {
    grid-template-columns: repeat(3, 2rem);
    grid-template-rows: repeat(3, 2rem);
    padding: 0.5rem;
  }

  .grid li {
    padding: 0.5rem;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
  }

  #button-start {
    font-size: 1.5rem;
    padding: 0.5rem 3rem;
  }

  .select {
    display: grid;
    grid-template-columns: repeat(3, 2rem);
    grid-template-rows: repeat(3, 2rem);
    gap: 1rem;
    text-align: center;
    justify-content: center;
    padding-right: 1.5rem;
    margin: 10%;
  }

  .select li:nth-last-child(1) {
    grid-column-end: 3;
  }
}