.card__img {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.card__img-wrapper {
  width: 80vw;
  height: 100vw;
  position: relative;
  margin-top: 2vw;
}
@media screen and (min-width: 436px) {
  .card__img-wrapper {
    width: 296px;
    height: 370px;
    margin-top: 8px;
  }
}
.z-board-to-square {
  position: relative;
}
.text-confirm-answer {
  font-size: 15px;
  font-weight: 400;
  color: grey;
  position: absolute;
  top: 0;
  left: 19%;
  width: auto;
  transform: translate(0, 100%);
  opacity: 1;
  transition: all 250ms ease 0s;
  z-index: 9;
}

.text-confirm-answer.transparent {
  opacity: 0;
  transition: all 250ms;
}

.z-board-to-square .card__text {
  font-size: 18px;
  margin-bottom: 30px;
  text-align: start;
  width: 88%;
}

.grid-draw-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.5fr 0 1.5fr 0 1.5fr 0 1.5fr 0 1.5fr 0 1.5fr 0 1.5fr 0
    1.5fr 0;
  grid-template-columns: repeat(8, 1.5fr);
  gap: 0;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  width: 80vw;
  height: 100vw;
}
@media screen and (min-width: 436px) {
  .grid-draw-container {
    width: 296px;
    height: 370px;
  }
}

.draw-cell {
  border: 0.5px solid white;
  width: 10vw;
  height: 10vw;
  margin: 0;
  padding: 0;
  background-color: silver;
}
@media screen and (min-width: 436px) {
  .draw-cell {
    width: 37px;
    height: 37px;
  }
}

.clickable {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 15px auto 10px 27%;
}
@media screen and (min-width: 436px) {
  .buttons {
    margin: 40px auto 10px 27%;
    /* margin-top: 30px; */
  }
}

.button {
  position: relative;
  width: 10vw;
  height: 10vw;
  margin: 10px;
  display: inline-block;
  cursor: pointer;
}

@media screen and (min-width: 436px) {
  .button {
    width: 37px;
    height: 37px;
  }
}

.button-border {
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  position: absolute;
  top: -9px;
  left: -9px;
  border-radius: 5px;
  pointer-events: none;
  display: none;
}

.button.selected .button-border {
  display: block;
}

.item__clear-line-first,
.item__clear-line-second {
  width: 147%;
  height: 1.5px;
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 9;
  background-color: silver;
}
.item__clear-line-first {
  -webkit-transform: translate(-50%, 0) rotate(-45deg);
  -ms-transform: translate(-50%, 0) rotate(-45deg);
  transform: translate(-50%, 0) rotate(-45deg);
}
.item__clear-line-second {
  -webkit-transform: translate(-50%, 0) rotate(45deg);
  -ms-transform: translate(-50%, 0) rotate(45deg);
  transform: translate(-50%, 0) rotate(45deg);
}

.purple-button {
  background-color: #df0bdf;
}
.purple-button.selected .button-border {
  border: 3px solid #df0bdf;
}
.red-button {
  background-color: #e60000;
}
.red-button.selected .button-border {
  border: 3px solid #e60000;
}
.green-button {
  background-color: #34cc34;
}
.green-button.selected .button-border {
  border: 3px solid #34cc34;
}
.blue-button {
  background-color: #648dd4;
}
.blue-button.selected .button-border {
  border: 3px solid #648dd4;
}
.silver-button {
  border: 2px solid silver;
}
.silver-button.selected .button-border {
  border: 3px solid silver;
}

.yellow-button {
  background-color: #ffc00c;
}
.yellow-button.selected .button-border {
  border: 3px solid #ffc00c;
}

.purple {
  background-color: #df0bdf;
}

.red {
  background-color: #e60000;
}

.green {
  background-color: #34cc34;
}

.blue {
  background-color: #648dd4;
}

.yellow {
  background-color: #ffc00c;
}
.silver {
  background-color: silver;
}

.card__wrap .restart {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 10%;
  left: 86%;
  cursor: pointer;
  z-index: 2;
}
.card__wrap-blocked .buttons,
.card__wrap-blocked .restart {
  display: none;
}
.card__wrap .card__text {
  font-size: 18px;
  margin-bottom: 30px;
  text-align: left;
}
@media screen and (min-width: 436px) {
  .card__wrap .card__text {
    font-size: 17px;
  }
}
/* =========== animate ========= */
.grid-draw-container.winner #drawCell1,
.grid-draw-container.winner #drawCell2,
.grid-draw-container.winner #drawCell3,
.grid-draw-container.winner #drawCell4,
.grid-draw-container.winner #drawCell5,
.grid-draw-container.winner #drawCell6,
.grid-draw-container.winner #drawCell7,
.grid-draw-container.winner #drawCell9,
.grid-draw-container.winner #drawCell10,
.grid-draw-container.winner #drawCell11,
.grid-draw-container.winner #drawCell12,
.grid-draw-container.winner #drawCell13,
.grid-draw-container.winner #drawCell14,
.grid-draw-container.winner #drawCell15,
.grid-draw-container.winner #drawCell19,
.grid-draw-container.winner #drawCell20,
.grid-draw-container.winner #drawCell21,
.grid-draw-container.winner #drawCell22,
.grid-draw-container.winner #drawCell23,
.grid-draw-container.winner #drawCell27,
.grid-draw-container.winner #drawCell28,
.grid-draw-container.winner #drawCell29,
.grid-draw-container.winner #drawCell30,
.grid-draw-container.winner #drawCell31,
.grid-draw-container.winner #drawCell37,
.grid-draw-container.winner #drawCell38,
.grid-draw-container.winner #drawCell39,
.grid-draw-container.winner #drawCell45,
.grid-draw-container.winner #drawCell46,
.grid-draw-container.winner #drawCell47,
.grid-draw-container.winner #drawCell55,
.grid-draw-container.winner #drawCell63 {
  transform: translate(10vw, 0);
  transition: all 550ms;
}

.grid-draw-container.winner #drawCell18,
.grid-draw-container.winner #drawCell26,
.grid-draw-container.winner #drawCell34,
.grid-draw-container.winner #drawCell35,
.grid-draw-container.winner #drawCell36,
.grid-draw-container.winner #drawCell42,
.grid-draw-container.winner #drawCell43,
.grid-draw-container.winner #drawCell44,
.grid-draw-container.winner #drawCell50,
.grid-draw-container.winner #drawCell51,
.grid-draw-container.winner #drawCell52,
.grid-draw-container.winner #drawCell53,
.grid-draw-container.winner #drawCell54,
.grid-draw-container.winner #drawCell58,
.grid-draw-container.winner #drawCell59,
.grid-draw-container.winner #drawCell60,
.grid-draw-container.winner #drawCell61,
.grid-draw-container.winner #drawCell62,
.grid-draw-container.winner #drawCell66,
.grid-draw-container.winner #drawCell67,
.grid-draw-container.winner #drawCell68,
.grid-draw-container.winner #drawCell69,
.grid-draw-container.winner #drawCell70,
.grid-draw-container.winner #drawCell71,
.grid-draw-container.winner #drawCell72,
.grid-draw-container.winner #drawCell74,
.grid-draw-container.winner #drawCell75,
.grid-draw-container.winner #drawCell76,
.grid-draw-container.winner #drawCell77,
.grid-draw-container.winner #drawCell78,
.grid-draw-container.winner #drawCell79,
.grid-draw-container.winner #drawCell80 {
  transform: translate(-10vw, 0);
  transition: all 550ms;
}
.grid-draw-container.winner.move-1 #drawCell1,
.grid-draw-container.winner.move-1 #drawCell2,
.grid-draw-container.winner.move-1 #drawCell3,
.grid-draw-container.winner.move-1 #drawCell4,
.grid-draw-container.winner.move-1 #drawCell5,
.grid-draw-container.winner.move-1 #drawCell6,
.grid-draw-container.winner.move-1 #drawCell7,
.grid-draw-container.winner.move-1 #drawCell9,
.grid-draw-container.winner.move-1 #drawCell10,
.grid-draw-container.winner.move-1 #drawCell11,
.grid-draw-container.winner.move-1 #drawCell12,
.grid-draw-container.winner.move-1 #drawCell13,
.grid-draw-container.winner.move-1 #drawCell14,
.grid-draw-container.winner.move-1 #drawCell15,
.grid-draw-container.winner.move-1 #drawCell19,
.grid-draw-container.winner.move-1 #drawCell20,
.grid-draw-container.winner.move-1 #drawCell21,
.grid-draw-container.winner.move-1 #drawCell22,
.grid-draw-container.winner.move-1 #drawCell23,
.grid-draw-container.winner.move-1 #drawCell27,
.grid-draw-container.winner.move-1 #drawCell28,
.grid-draw-container.winner.move-1 #drawCell29,
.grid-draw-container.winner.move-1 #drawCell30,
.grid-draw-container.winner.move-1 #drawCell31,
.grid-draw-container.winner.move-1 #drawCell37,
.grid-draw-container.winner.move-1 #drawCell38,
.grid-draw-container.winner.move-1 #drawCell39,
.grid-draw-container.winner.move-1 #drawCell45,
.grid-draw-container.winner.move-1 #drawCell46,
.grid-draw-container.winner.move-1 #drawCell47,
.grid-draw-container.winner.move-1 #drawCell55,
.grid-draw-container.winner.move-1 #drawCell63 {
  transform: translate(10vw, 10vw);
  transition: all 550ms;
}

.grid-draw-container.winner.move-1 #drawCell18,
.grid-draw-container.winner.move-1 #drawCell26,
.grid-draw-container.winner.move-1 #drawCell34,
.grid-draw-container.winner.move-1 #drawCell35,
.grid-draw-container.winner.move-1 #drawCell36,
.grid-draw-container.winner.move-1 #drawCell42,
.grid-draw-container.winner.move-1 #drawCell43,
.grid-draw-container.winner.move-1 #drawCell44,
.grid-draw-container.winner.move-1 #drawCell50,
.grid-draw-container.winner.move-1 #drawCell51,
.grid-draw-container.winner.move-1 #drawCell52,
.grid-draw-container.winner.move-1 #drawCell53,
.grid-draw-container.winner.move-1 #drawCell54,
.grid-draw-container.winner.move-1 #drawCell58,
.grid-draw-container.winner.move-1 #drawCell59,
.grid-draw-container.winner.move-1 #drawCell60,
.grid-draw-container.winner.move-1 #drawCell61,
.grid-draw-container.winner.move-1 #drawCell62,
.grid-draw-container.winner.move-1 #drawCell66,
.grid-draw-container.winner.move-1 #drawCell67,
.grid-draw-container.winner.move-1 #drawCell68,
.grid-draw-container.winner.move-1 #drawCell69,
.grid-draw-container.winner.move-1 #drawCell70,
.grid-draw-container.winner.move-1 #drawCell71,
.grid-draw-container.winner.move-1 #drawCell72,
.grid-draw-container.winner.move-1 #drawCell74,
.grid-draw-container.winner.move-1 #drawCell75,
.grid-draw-container.winner.move-1 #drawCell76,
.grid-draw-container.winner.move-1 #drawCell77,
.grid-draw-container.winner.move-1 #drawCell78,
.grid-draw-container.winner.move-1 #drawCell79,
.grid-draw-container.winner.move-1 #drawCell80 {
  transform: translate(-10vw, -10vw);
  transition: all 550ms;
}

@media screen and (min-width: 436px) {
  .grid-draw-container.winner #drawCell1,
  .grid-draw-container.winner #drawCell2,
  .grid-draw-container.winner #drawCell3,
  .grid-draw-container.winner #drawCell4,
  .grid-draw-container.winner #drawCell5,
  .grid-draw-container.winner #drawCell6,
  .grid-draw-container.winner #drawCell7,
  .grid-draw-container.winner #drawCell9,
  .grid-draw-container.winner #drawCell10,
  .grid-draw-container.winner #drawCell11,
  .grid-draw-container.winner #drawCell12,
  .grid-draw-container.winner #drawCell13,
  .grid-draw-container.winner #drawCell14,
  .grid-draw-container.winner #drawCell15,
  .grid-draw-container.winner #drawCell19,
  .grid-draw-container.winner #drawCell20,
  .grid-draw-container.winner #drawCell21,
  .grid-draw-container.winner #drawCell22,
  .grid-draw-container.winner #drawCell23,
  .grid-draw-container.winner #drawCell27,
  .grid-draw-container.winner #drawCell28,
  .grid-draw-container.winner #drawCell29,
  .grid-draw-container.winner #drawCell30,
  .grid-draw-container.winner #drawCell31,
  .grid-draw-container.winner #drawCell37,
  .grid-draw-container.winner #drawCell38,
  .grid-draw-container.winner #drawCell39,
  .grid-draw-container.winner #drawCell45,
  .grid-draw-container.winner #drawCell46,
  .grid-draw-container.winner #drawCell47,
  .grid-draw-container.winner #drawCell55,
  .grid-draw-container.winner #drawCell63 {
    transform: translate(37px, 0);
    transition: all 550ms;
  }

  .grid-draw-container.winner #drawCell18,
  .grid-draw-container.winner #drawCell26,
  .grid-draw-container.winner #drawCell34,
  .grid-draw-container.winner #drawCell35,
  .grid-draw-container.winner #drawCell36,
  .grid-draw-container.winner #drawCell42,
  .grid-draw-container.winner #drawCell43,
  .grid-draw-container.winner #drawCell44,
  .grid-draw-container.winner #drawCell50,
  .grid-draw-container.winner #drawCell51,
  .grid-draw-container.winner #drawCell52,
  .grid-draw-container.winner #drawCell53,
  .grid-draw-container.winner #drawCell54,
  .grid-draw-container.winner #drawCell58,
  .grid-draw-container.winner #drawCell59,
  .grid-draw-container.winner #drawCell60,
  .grid-draw-container.winner #drawCell61,
  .grid-draw-container.winner #drawCell62,
  .grid-draw-container.winner #drawCell66,
  .grid-draw-container.winner #drawCell67,
  .grid-draw-container.winner #drawCell68,
  .grid-draw-container.winner #drawCell69,
  .grid-draw-container.winner #drawCell70,
  .grid-draw-container.winner #drawCell71,
  .grid-draw-container.winner #drawCell72,
  .grid-draw-container.winner #drawCell74,
  .grid-draw-container.winner #drawCell75,
  .grid-draw-container.winner #drawCell76,
  .grid-draw-container.winner #drawCell77,
  .grid-draw-container.winner #drawCell78,
  .grid-draw-container.winner #drawCell79,
  .grid-draw-container.winner #drawCell80 {
    transform: translate(-37px, 0);
    transition: all 550ms;
  }
  .grid-draw-container.winner.move-1 #drawCell1,
  .grid-draw-container.winner.move-1 #drawCell2,
  .grid-draw-container.winner.move-1 #drawCell3,
  .grid-draw-container.winner.move-1 #drawCell4,
  .grid-draw-container.winner.move-1 #drawCell5,
  .grid-draw-container.winner.move-1 #drawCell6,
  .grid-draw-container.winner.move-1 #drawCell7,
  .grid-draw-container.winner.move-1 #drawCell9,
  .grid-draw-container.winner.move-1 #drawCell10,
  .grid-draw-container.winner.move-1 #drawCell11,
  .grid-draw-container.winner.move-1 #drawCell12,
  .grid-draw-container.winner.move-1 #drawCell13,
  .grid-draw-container.winner.move-1 #drawCell14,
  .grid-draw-container.winner.move-1 #drawCell15,
  .grid-draw-container.winner.move-1 #drawCell19,
  .grid-draw-container.winner.move-1 #drawCell20,
  .grid-draw-container.winner.move-1 #drawCell21,
  .grid-draw-container.winner.move-1 #drawCell22,
  .grid-draw-container.winner.move-1 #drawCell23,
  .grid-draw-container.winner.move-1 #drawCell27,
  .grid-draw-container.winner.move-1 #drawCell28,
  .grid-draw-container.winner.move-1 #drawCell29,
  .grid-draw-container.winner.move-1 #drawCell30,
  .grid-draw-container.winner.move-1 #drawCell31,
  .grid-draw-container.winner.move-1 #drawCell37,
  .grid-draw-container.winner.move-1 #drawCell38,
  .grid-draw-container.winner.move-1 #drawCell39,
  .grid-draw-container.winner.move-1 #drawCell45,
  .grid-draw-container.winner.move-1 #drawCell46,
  .grid-draw-container.winner.move-1 #drawCell47,
  .grid-draw-container.winner.move-1 #drawCell55,
  .grid-draw-container.winner.move-1 #drawCell63 {
    transform: translate(37px, 37px);
    transition: all 550ms;
  }

  .grid-draw-container.winner.move-1 #drawCell18,
  .grid-draw-container.winner.move-1 #drawCell26,
  .grid-draw-container.winner.move-1 #drawCell34,
  .grid-draw-container.winner.move-1 #drawCell35,
  .grid-draw-container.winner.move-1 #drawCell36,
  .grid-draw-container.winner.move-1 #drawCell42,
  .grid-draw-container.winner.move-1 #drawCell43,
  .grid-draw-container.winner.move-1 #drawCell44,
  .grid-draw-container.winner.move-1 #drawCell50,
  .grid-draw-container.winner.move-1 #drawCell51,
  .grid-draw-container.winner.move-1 #drawCell52,
  .grid-draw-container.winner.move-1 #drawCell53,
  .grid-draw-container.winner.move-1 #drawCell54,
  .grid-draw-container.winner.move-1 #drawCell58,
  .grid-draw-container.winner.move-1 #drawCell59,
  .grid-draw-container.winner.move-1 #drawCell60,
  .grid-draw-container.winner.move-1 #drawCell61,
  .grid-draw-container.winner.move-1 #drawCell62,
  .grid-draw-container.winner.move-1 #drawCell66,
  .grid-draw-container.winner.move-1 #drawCell67,
  .grid-draw-container.winner.move-1 #drawCell68,
  .grid-draw-container.winner.move-1 #drawCell69,
  .grid-draw-container.winner.move-1 #drawCell70,
  .grid-draw-container.winner.move-1 #drawCell71,
  .grid-draw-container.winner.move-1 #drawCell72,
  .grid-draw-container.winner.move-1 #drawCell74,
  .grid-draw-container.winner.move-1 #drawCell75,
  .grid-draw-container.winner.move-1 #drawCell76,
  .grid-draw-container.winner.move-1 #drawCell77,
  .grid-draw-container.winner.move-1 #drawCell78,
  .grid-draw-container.winner.move-1 #drawCell79,
  .grid-draw-container.winner.move-1 #drawCell80 {
    transform: translate(-37px, -37px);
    transition: all 550ms;
  }
}