.sudoku-grid {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.sudoku-grid .cell {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  line-height: 1;
  overflow: hidden;
}

.sudoku-daily-set {
  display: block;
}

.sudoku-daily-set .daily-set-head,
.daily-puzzle-list {
  position: relative;
}

.daily-puzzle-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.daily-puzzle-list button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid #a9d8d8;
  border-radius: 13px;
  background: #fff;
  color: #102638;
  text-align: left;
  cursor: pointer;
}

.daily-puzzle-list button:hover,
.daily-puzzle-list button:focus-visible {
  border-color: #087f8c;
  background: #f4ffff;
  outline: 2px solid #69d2e766;
}

.daily-puzzle-list small,
.daily-puzzle-list strong,
.daily-puzzle-list span {
  display: block;
  min-width: 0;
}

.daily-puzzle-list small {
  grid-column: 1;
  color: #188ca0;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.daily-puzzle-list strong {
  grid-column: 1;
  font-size: 14px;
}

.daily-puzzle-list span {
  grid-column: 1;
  color: #607b80;
  font-size: 9px;
}

.daily-puzzle-list b {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  padding: 6px 8px;
  border-radius: 999px;
  background: #071f2f;
  color: #fff;
  font-size: 8px;
}

.daily-puzzle-list button.done {
  border-color: #9ecb48;
  background: #f2fbdc;
}

.daily-puzzle-list button.done b {
  background: #639322;
}

.sudoku-daily-set > #sudokuDailyStatus {
  position: relative;
  display: block;
  margin-top: 10px;
  color: #58777b;
  font-size: 9px;
  text-align: left;
}

@media (max-width: 760px) {
  .daily-puzzle-list {
    grid-template-columns: 1fr;
  }

  .daily-puzzle-list button {
    width: 100%;
    min-height: 66px;
  }
}