.game {
  width: 100%;
  max-width: 380px;
  margin: 20px auto;
}

.select-div {
  text-align: center;
}

.selectLevel {
  cursor: pointer;
  margin: 10px auto;
  width: 200px;
  padding: 0 0 0 8px;
  overflow: hidden;
  font-size: 1.2em;
}

.selectLevel option {
  font-size: 1em !important;
}

.btn-div {
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
}

#solveButton,
#newGameButton,
#showButton {
  cursor: pointer;
  border: 1px rgb(133, 133, 133) solid;
  padding: 5px;
  background-color: #702d2d;
  color: #fff;
  outline: 0;
  border-radius: 8px;
}

#wordlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 5px auto;
  text-align: center;
  font-size: 1.2em;
}

.listWord.found {
  color: rgb(169, 166, 160);
}

#images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.imgDiv {
  margin: 5px 0;
  border: 1px solid #ccc;
  width: 26%;
  height: auto;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.539);
}

#wordboard {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.539);
  background-color: #fff;
  user-select: none;
}

.boardRow {
  display: flex;
}

.cell {
  width: calc(99% / 9);
  height: 36px;
  border-radius: 5px;
  padding: 0;
  font-size: 28px;
  font-weight: 600;
  color: #702d2d;
  border: none;
  cursor: pointer;
  background-color: #fff;
  text-align: center;
  line-height: 36px;
  transition: background-color 0.1s;
  user-select: none;
}
.cell.selected {
  background-color: rgb(158, 149, 149);
}

.cell.found {
  color: #ddd;
  background-color: rgb(82, 166, 86);
}

.found0 {
  color: #ddd;
  background-color: rgb(188, 70, 57);
}
.found1 {
  color: #ddd;
  background-color: rgb(99, 157, 77);
}
.found2 {
  color: #ddd;
  background-color: rgb(205, 151, 43);
}
.found3 {
  color: #ddd;
  background-color: rgb(150, 95, 216);
}
.found4 {
  color: #ddd;
  background-color: rgb(192, 58, 132);
}
.found5 {
  color: #ddd;
  background-color: rgb(84, 108, 216);
}

.border {
  border: none;
}

.game-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 0 10px;
}
.game-modal.show {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s 0.4s ease;
}
.game-modal .content {
  padding: 30px;
  max-width: 420px;
  width: 100%;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.game-modal img {
  max-width: 130px;
  margin-bottom: 20px;
}
.game-modal img[src="images/victory.gif"] {
  margin-left: -10px;
}
.game-modal h4 {
  font-size: 1.53rem;
}
.game-modal p {
  font-size: 1.15rem;
  margin: 15px 0 30px;
  font-weight: 500;
}

.game-modal button {
  padding: 12px 23px;
}

@media screen and (min-width: 420px) {
  .game {
    width: 400px;
  }
  .cell {
    aspect-ratio: 1;
  }
}

@media screen and (min-width: 550px) {
}