.board-layout {
  display: block;
  max-width: 760px;
  margin: 0 auto;
}

.board-layout-6 {
  max-width: 480px;
}

.board-layout-9 {
  max-width: 620px;
}

.board-panel {
  width: 100%;
}

.progress-track {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.game-heading-6 {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.game-heading-9 {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.grid-cell:not(.is-target) {
  background: #f0f2f1;
  color: #82908b;
}

.grid-cell.is-target {
  background: #eaf4ee;
}

.grid-cell.is-target,
.grid-cell.is-target.is-given,
.grid-cell.is-target.is-error {
  color: #c62828;
  font-size: 22px;
  font-weight: 700;
}

.grid-cell.is-target.is-given {
  color: #c62828;
}

.grid-cell.is-target.is-error {
  color: #c62828;
}

.number-key {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.number-key:hover:not(:disabled) {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
}

.number-key.key-correct {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
}

.number-key.key-correct .key-feedback {
  color: #fff;
}

.number-key.key-wrong {
  background: var(--coral-soft);
  border-color: #edc6bb;
  color: #a95340;
}

.puzzle-grid.grid-6 {
  --cell: 68px;
}

.grid-6 .grid-cell.is-target {
  font-size: 25px;
}

@media (max-width: 680px) {
  .board-layout {
    max-width: 100%;
  }

  .puzzle-grid.grid-6 {
    --cell: min(68px, calc((100vw - 56px) / 6));
  }

  .grid-6 .grid-cell.is-target {
    font-size: 22px;
  }
}

@media (max-width: 380px) {
  .puzzle-grid.grid-6 {
    --cell: min(68px, calc((100vw - 42px) / 6));
  }
}