.covering-the-hole .card__img-wrapper {
  position: relative;
}
.covering-the-hole .card__img {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.covering-the-hole {
  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;
}

.covering-the-hole .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;
  grid-template-columns: repeat(6, 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: 54vw;
  height: 27vw;
  margin-top: 25%;
}
@media screen and (min-width: 436px) {
  .grid-draw-container {
    width: 180px;
    height: 90px;
    top: 10%;
  }
}

.hole-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 1.5fr 0;
  grid-template-columns: repeat(9, 1.5fr);
  gap: 0;
  position: absolute;
  top: -90%;
  left: 50%;
  margin-top: 20%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 89vw;
  height: 50vw;
  /* outline: 14px solid #f8c586; */
  background-repeat: no-repeat;
  background-image: url(../img/matchstick_background.svg);
  background-position: 11% 0%;
  background-size: cover;
  filter: saturate(18);
  border-radius: 5px;
}
@media screen and (min-width: 436px) {
  .hole-container {
    width: 310px;
    height: 188px;
  }
}
.hole-cell {
  width: 80.2vw;
  height: 17.2vw;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.draw-cell {
  border: 0.5px solid white;
  width: 9vw;
  height: 9vw;
  margin: 0;
  padding: 0;
  /* background-color: silver; */
}
@media screen and (min-width: 436px) {
  .hole-cell {
    width: 270px;
    height: 60px;
  }
  .draw-cell {
    width: 30px;
    height: 30px;
  }
}

.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: 25% auto 10px auto;
}
@media screen and (min-width: 436px) {
  .buttons {
    margin: 90px auto 10px auto;
    /* 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: 38px;
    height: 38px;
  }
}

.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;
}

.red-button {
  /* background-color: sandybrown; */
  background-image: url(../img/matchstick_background.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  filter: saturate(18);
}
.red-button.selected .button-border {
  border: 3px solid #f8c586;
}

.yellow-button {
  background-image: url(../img/matchstick_background.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.yellow-button.selected .button-border {
  border: 3px solid #f8c586;
}

.red {
  background-image: url(../img/matchstick_background.svg);
  filter: saturate(18);
}
.clickable {
  transition: background-color 0.1s ease;

  background-repeat: no-repeat;
  background-image: url(../img/matchstick_background.svg);
}

#drawCell1 {
  background-position: 16% 0%;
}
#drawCell2 {
  background-position: 27% 0%;
}
#drawCell3 {
  background-position: 38% 0%;
}
#drawCell4 {
  background-position: 49% 0%;
}
#drawCell5 {
  background-position: 60% 0%;
}
#drawCell6 {
  background-position: 71% 0%;
}
#drawCell7 {
  background-position: 16% 50%;
}
#drawCell8 {
  background-position: 27% 50%;
}
#drawCell9 {
  background-position: 38% 50%;
}
#drawCell10 {
  background-position: 49% 50%;
}
#drawCell11 {
  background-position: 60% 50%;
}
#drawCell12 {
  background-position: 71% 50%;
}
#drawCell13 {
  background-position: 16% 100%;
}
#drawCell14 {
  background-position: 27% 100%;
}
#drawCell15 {
  background-position: 38% 100%;
}
#drawCell16 {
  background-position: 49% 100%;
}
#drawCell17 {
  background-position: 60% 100%;
}
#drawCell18 {
  background-position: 71% 100%;
}

/* .red {
  background-color: #F8C586;
  transition: background-color 0.1s ease; 
} */

/* .yellow {
  background-color: silver;
  transition: background-color 0.1s ease; 
} */

/* .red.winner {
  transform: translate(13.5vw, 0);
  transition: transform 0.5s ease; 
} */
#drawCell1.winner,
#drawCell2.winner,
#drawCell3.winner,
#drawCell4.winner,
#drawCell5.winner,
#drawCell6.winner,
#drawCell10.winner,
#drawCell11.winner,
#drawCell12.winner {
  transform: translate(13.2vw, 0);
  /* border: 0px solid #f8c586; */
  transition: transform 0.5s ease, border 0.5s ease;
  /* background-color: #fcd79c; */
}
@media screen and (min-width: 436px) {
  #drawCell1.winner,
  #drawCell2.winner,
  #drawCell3.winner,
  #drawCell4.winner,
  #drawCell5.winner,
  #drawCell6.winner,
  #drawCell10.winner,
  #drawCell11.winner,
  #drawCell12.winner {
    transform: translate(45px, 0);
  }
}
#drawCell7.winner,
#drawCell8.winner,
#drawCell9.winner,
#drawCell13.winner,
#drawCell14.winner,
#drawCell15.winner,
#drawCell16.winner,
#drawCell17.winner,
#drawCell18.winner {
  transform: translate(-13.2vw, 0);
  /* border: 0px solid #f8c586; */
  transition: transform 0.5s ease, border 0.5s ease;
  /* background-color: #fcd79c; */
}
@media screen and (min-width: 436px) {
  #drawCell7.winner,
  #drawCell8.winner,
  #drawCell9.winner,
  #drawCell13.winner,
  #drawCell14.winner,
  #drawCell15.winner,
  #drawCell16.winner,
  #drawCell17.winner,
  #drawCell18.winner {
    transform: translate(-45px, 0);
  }
}
/* Дополнительные трансформации для анимации */
#drawCell1.winner.move1,
#drawCell2.winner.move1,
#drawCell3.winner.move1,
#drawCell4.winner.move1,
#drawCell5.winner.move1,
#drawCell6.winner.move1,
#drawCell10.winner.move1,
#drawCell11.winner.move1,
#drawCell12.winner.move1 {
  transform: translate(13.2vw, 4.6vw);
}

#drawCell7.winner.move1,
#drawCell8.winner.move1,
#drawCell9.winner.move1,
#drawCell13.winner.move1,
#drawCell14.winner.move1,
#drawCell15.winner.move1,
#drawCell16.winner.move1,
#drawCell17.winner.move1,
#drawCell18.winner.move1 {
  transform: translate(-13.2vw, -4.2vw);
}
@media screen and (min-width: 436px) {
  #drawCell1.winner.move1,
  #drawCell2.winner.move1,
  #drawCell3.winner.move1,
  #drawCell4.winner.move1,
  #drawCell5.winner.move1,
  #drawCell6.winner.move1,
  #drawCell10.winner.move1,
  #drawCell11.winner.move1,
  #drawCell12.winner.move1 {
    transform: translate(44.6px, 14.8px);
  }
  #drawCell7.winner.move1,
  #drawCell8.winner.move1,
  #drawCell9.winner.move1,
  #drawCell13.winner.move1,
  #drawCell14.winner.move1,
  #drawCell15.winner.move1,
  #drawCell16.winner.move1,
  #drawCell17.winner.move1,
  #drawCell18.winner.move1 {
    transform: translate(-45px, -15px);
  }
}
/* Дополнительные трансформации для анимации */
#drawCell1.winner.move2,
#drawCell2.winner.move2,
#drawCell3.winner.move2,
#drawCell4.winner.move2,
#drawCell5.winner.move2,
#drawCell6.winner.move2,
#drawCell10.winner.move2,
#drawCell11.winner.move2,
#drawCell12.winner.move2 {
  transform: translate(13.6vw, -47vw);
}

#drawCell7.winner.move2,
#drawCell8.winner.move2,
#drawCell9.winner.move2,
#drawCell13.winner.move2,
#drawCell14.winner.move2,
#drawCell15.winner.move2,
#drawCell16.winner.move2,
#drawCell17.winner.move2,
#drawCell18.winner.move2 {
  transform: translate(-13.5vw, -56vw);
}
@media screen and (min-width: 436px) {
  #drawCell1.winner.move2,
  #drawCell2.winner.move2,
  #drawCell3.winner.move2,
  #drawCell4.winner.move2,
  #drawCell5.winner.move2,
  #drawCell6.winner.move2,
  #drawCell10.winner.move2,
  #drawCell11.winner.move2,
  #drawCell12.winner.move2 {
    transform: translate(44.6px, -175px);
  }
  #drawCell7.winner.move2,
  #drawCell8.winner.move2,
  #drawCell9.winner.move2,
  #drawCell13.winner.move2,
  #drawCell14.winner.move2,
  #drawCell15.winner.move2,
  #drawCell16.winner.move2,
  #drawCell17.winner.move2,
  #drawCell18.winner.move2 {
    transform: translate(-45px, -205px);
  }
}
.clickable.winner {
  background-image: url(../img/matchstick_background.svg);
}

.card__img-wrapper {
  width: 88vw;
  height: 37vw;
  position: relative;
  margin-top: 27%;
}
@media screen and (min-width: 436px) {
  .card__img-wrapper {
    width: 100%;
    height: 130px;
  }
}
.card__img .restart {
  display: flex;
  width: 35px;
  position: absolute;
  top: 20px;
  left: 90%;
  cursor: pointer;
}
@media screen and (min-width: 436px) {
  .card__img .restart {
  }
}
.card__wrap-blocked .buttons,
.card__wrap-blocked .restart {
  display: none;
}
.card__wrap .card__text {
  font-size: 18px;
  margin-bottom: 30px;
  text-align: left;
  margin-top: -18%;
}
@media screen and (min-width: 436px) {
  .card__wrap .card__text {
    font-size: 17px;
  }
}

.ft {
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  filter: saturate(0);
}
.ft-width {
  top: 39.2%;
  left: 50%;
}
.ft-height {
  top: 50%;
  left: 11.8%;
}

.ft-width-playground {
  top: 29%;
  left: 50%;
  margin-top: 15%;
}
.ft-height-playground {
  top: 50%;
  left: 13.4%;
  margin-top: 10%;
}
@media screen and (min-width: 436px) {
  .ft-width-playground {
    margin-top: 17%;
  }
}
.card__wrap-blocked .ft {
  display: none;
}
/* ========== winner-2 ========== */
#drawCell1.winner-2,
#drawCell2.winner-2,
#drawCell3.winner-2,
#drawCell4.winner-2,
#drawCell5.winner-2,
#drawCell6.winner-2,
#drawCell10.winner-2,
#drawCell11.winner-2,
#drawCell12.winner-2 {
  transform: translate(13.6vw, 0vw);
  transition: transform 0.5s ease, border 0.5s ease;
}
@media screen and (min-width: 436px) {
  #drawCell1.winner-2,
  #drawCell2.winner-2,
  #drawCell3.winner-2,
  #drawCell4.winner-2,
  #drawCell5.winner-2,
  #drawCell6.winner-2,
  #drawCell10.winner-2,
  #drawCell11.winner-2,
  #drawCell12.winner-2 {
    transform: translate(45px, 0);
  }
}
#drawCell7.winner-2,
#drawCell8.winner-2,
#drawCell9.winner-2,
#drawCell13.winner-2,
#drawCell14.winner-2,
#drawCell15.winner-2,
#drawCell16.winner-2,
#drawCell17.winner-2,
#drawCell18.winner-2 {
  transform: translate(-13.6vw, 0vw);
  transition: transform 0.5s ease, border 0.5s ease;
}
@media screen and (min-width: 436px) {
  #drawCell7.winner-2,
  #drawCell8.winner-2,
  #drawCell9.winner-2,
  #drawCell13.winner-2,
  #drawCell14.winner-2,
  #drawCell15.winner-2,
  #drawCell16.winner-2,
  #drawCell17.winner-2,
  #drawCell18.winner-2 {
    transform: translate(-45px, 0);
  }
}
/* Дополнительные трансформации для анимации */
#drawCell1.winner-2.move1-2,
#drawCell2.winner-2.move1-2,
#drawCell3.winner-2.move1-2,
#drawCell4.winner-2.move1-2,
#drawCell5.winner-2.move1-2,
#drawCell6.winner-2.move1-2,
#drawCell10.winner-2.move1-2,
#drawCell11.winner-2.move1-2,
#drawCell12.winner-2.move1-2 {
  transform: translate(13.6vw, 4.6vw);
}

#drawCell7.winner-2.move1-2,
#drawCell8.winner-2.move1-2,
#drawCell9.winner-2.move1-2,
#drawCell13.winner-2.move1-2,
#drawCell14.winner-2.move1-2,
#drawCell15.winner-2.move1-2,
#drawCell16.winner-2.move1-2,
#drawCell17.winner-2.move1-2,
#drawCell18.winner-2.move1-2 {
  transform: translate(-13.6vw, -4.4vw);
}
@media screen and (min-width: 436px) {
  #drawCell1.winner-2.move1-2,
  #drawCell2.winner-2.move1-2,
  #drawCell3.winner-2.move1-2,
  #drawCell4.winner-2.move1-2,
  #drawCell5.winner-2.move1-2,
  #drawCell6.winner-2.move1-2,
  #drawCell10.winner-2.move1-2,
  #drawCell11.winner-2.move1-2,
  #drawCell12.winner-2.move1-2 {
    transform: translate(45px, 14.8px);
  }
  #drawCell7.winner-2.move1-2,
  #drawCell8.winner-2.move1-2,
  #drawCell9.winner-2.move1-2,
  #drawCell13.winner-2.move1-2,
  #drawCell14.winner-2.move1-2,
  #drawCell15.winner-2.move1-2,
  #drawCell16.winner-2.move1-2,
  #drawCell17.winner-2.move1-2,
  #drawCell18.winner-2.move1-2 {
    transform: translate(-45px, -15px);
  }
}
/* Дополнительные трансформации для анимации */
#drawCell1.winner-2.move2-2,
#drawCell2.winner-2.move2-2,
#drawCell3.winner-2.move2-2,
#drawCell4.winner-2.move2-2,
#drawCell5.winner-2.move2-2,
#drawCell6.winner-2.move2-2,
#drawCell10.winner-2.move2-2,
#drawCell11.winner-2.move2-2,
#drawCell12.winner-2.move2-2 {
  transform: translate(13.6vw, -47vw);
}

#drawCell7.winner-2.move2-2,
#drawCell8.winner-2.move2-2,
#drawCell9.winner-2.move2-2,
#drawCell13.winner-2.move2-2,
#drawCell14.winner-2.move2-2,
#drawCell15.winner-2.move2-2,
#drawCell16.winner-2.move2-2,
#drawCell17.winner-2.move2-2,
#drawCell18.winner-2.move2-2 {
  transform: translate(-13.4vw, -56vw);
}
@media screen and (min-width: 436px) {
  #drawCell1.winner-2.move2-2,
  #drawCell2.winner-2.move2-2,
  #drawCell3.winner-2.move2-2,
  #drawCell4.winner-2.move2-2,
  #drawCell5.winner-2.move2-2,
  #drawCell6.winner-2.move2-2,
  #drawCell10.winner-2.move2-2,
  #drawCell11.winner-2.move2-2,
  #drawCell12.winner-2.move2-2 {
    transform: translate(44.6px, -175px);
  }
  #drawCell7.winner-2.move2-2,
  #drawCell8.winner-2.move2-2,
  #drawCell9.winner-2.move2-2,
  #drawCell13.winner-2.move2-2,
  #drawCell14.winner-2.move2-2,
  #drawCell15.winner-2.move2-2,
  #drawCell16.winner-2.move2-2,
  #drawCell17.winner-2.move2-2,
  #drawCell18.winner-2.move2-2 {
    transform: translate(-45px, -205px);
  }
}
/* ========== winner-3 ========== */
#drawCell1.winner-3,
#drawCell2.winner-3,
#drawCell3.winner-3,
#drawCell4.winner-3,
#drawCell5.winner-3,
#drawCell6.winner-3,
#drawCell7.winner-3,
#drawCell8.winner-3,
#drawCell9.winner-3 {
  transform: translate(-13.6vw, 0vw);
  transition: transform 0.5s ease, border 0.5s ease;
}
@media screen and (min-width: 436px) {
  #drawCell1.winner-3,
  #drawCell2.winner-3,
  #drawCell3.winner-3,
  #drawCell4.winner-3,
  #drawCell5.winner-3,
  #drawCell6.winner-3,
  #drawCell7.winner-3,
  #drawCell8.winner-3,
  #drawCell9.winner-3 {
    transform: translate(-45px, 0);
  }
}
#drawCell10.winner-3,
#drawCell11.winner-3,
#drawCell12.winner-3,
#drawCell13.winner-3,
#drawCell14.winner-3,
#drawCell15.winner-3,
#drawCell16.winner-3,
#drawCell17.winner-3,
#drawCell18.winner-3 {
  transform: translate(13.6vw, 0vw);
  transition: transform 0.5s ease, border 0.5s ease;
}
@media screen and (min-width: 436px) {
  #drawCell10.winner-3,
  #drawCell11.winner-3,
  #drawCell12.winner-3,
  #drawCell13.winner-3,
  #drawCell14.winner-3,
  #drawCell15.winner-3,
  #drawCell16.winner-3,
  #drawCell17.winner-3,
  #drawCell18.winner-3 {
    transform: translate(45px, 0);
  }
}
/* Дополнительные трансформации для анимации */
#drawCell1.winner-3.move1-3,
#drawCell2.winner-3.move1-3,
#drawCell3.winner-3.move1-3,
#drawCell4.winner-3.move1-3,
#drawCell5.winner-3.move1-3,
#drawCell6.winner-3.move1-3,
#drawCell7.winner-3.move1-3,
#drawCell8.winner-3.move1-3,
#drawCell9.winner-3.move1-3 {
  transform: translate(-13.6vw, 4.6vw);
}

#drawCell10.winner-3.move1-3,
#drawCell11.winner-3.move1-3,
#drawCell12.winner-3.move1-3,
#drawCell13.winner-3.move1-3,
#drawCell14.winner-3.move1-3,
#drawCell15.winner-3.move1-3,
#drawCell16.winner-3.move1-3,
#drawCell17.winner-3.move1-3,
#drawCell18.winner-3.move1-3 {
  transform: translate(13.6vw, -4.4vw);
}
@media screen and (min-width: 436px) {
  #drawCell1.winner-3.move1-3,
  #drawCell2.winner-3.move1-3,
  #drawCell3.winner-3.move1-3,
  #drawCell4.winner-3.move1-3,
  #drawCell5.winner-3.move1-3,
  #drawCell6.winner-3.move1-3,
  #drawCell7.winner-3.move1-3,
  #drawCell8.winner-3.move1-3,
  #drawCell9.winner-3.move1-3 {
    transform: translate(-45px, 14.8px);
  }
  #drawCell10.winner-3.move1-3,
  #drawCell11.winner-3.move1-3,
  #drawCell12.winner-3.move1-3,
  #drawCell13.winner-3.move1-3,
  #drawCell14.winner-3.move1-3,
  #drawCell15.winner-3.move1-3,
  #drawCell16.winner-3.move1-3,
  #drawCell17.winner-3.move1-3,
  #drawCell18.winner-3.move1-3 {
    transform: translate(45px, -15px);
  }
}
/* Дополнительные трансформации для анимации */
#drawCell1.winner-3.move2-3,
#drawCell2.winner-3.move2-3,
#drawCell3.winner-3.move2-3,
#drawCell4.winner-3.move2-3,
#drawCell5.winner-3.move2-3,
#drawCell6.winner-3.move2-3,
#drawCell7.winner-3.move2-3,
#drawCell8.winner-3.move2-3,
#drawCell9.winner-3.move2-3 {
  transform: translate(-13.6vw, -47vw);
}

#drawCell10.winner-3.move2-3,
#drawCell11.winner-3.move2-3,
#drawCell12.winner-3.move2-3,
#drawCell13.winner-3.move2-3,
#drawCell14.winner-3.move2-3,
#drawCell15.winner-3.move2-3,
#drawCell16.winner-3.move2-3,
#drawCell17.winner-3.move2-3,
#drawCell18.winner-3.move2-3 {
  transform: translate(13.4vw, -56vw);
}
@media screen and (min-width: 436px) {
  #drawCell1.winner-3.move2-3,
  #drawCell2.winner-3.move2-3,
  #drawCell3.winner-3.move2-3,
  #drawCell4.winner-3.move2-3,
  #drawCell5.winner-3.move2-3,
  #drawCell6.winner-3.move2-3,
  #drawCell7.winner-3.move2-3,
  #drawCell8.winner-3.move2-3,
  #drawCell9.winner-3.move2-3 {
    transform: translate(-44.6px, -175px);
  }
  #drawCell10.winner-3.move2-3,
  #drawCell11.winner-3.move2-3,
  #drawCell12.winner-3.move2-3,
  #drawCell13.winner-3.move2-3,
  #drawCell14.winner-3.move2-3,
  #drawCell15.winner-3.move2-3,
  #drawCell16.winner-3.move2-3,
  #drawCell17.winner-3.move2-3,
  #drawCell18.winner-3.move2-3 {
    transform: translate(45px, -205px);
  }
}

/* ========== winner-4 ========== */
#drawCell1.winner-4,
#drawCell2.winner-4,
#drawCell3.winner-4,
#drawCell4.winner-4,
#drawCell5.winner-4,
#drawCell6.winner-4,
#drawCell7.winner-4,
#drawCell8.winner-4,
#drawCell9.winner-4 {
  transform: translate(-13.6vw, 0vw);
  transition: transform 0.5s ease, border 0.5s ease;
}
@media screen and (min-width: 436px) {
  #drawCell1.winner-4,
  #drawCell2.winner-4,
  #drawCell3.winner-4,
  #drawCell4.winner-4,
  #drawCell5.winner-4,
  #drawCell6.winner-4,
  #drawCell7.winner-4,
  #drawCell8.winner-4,
  #drawCell9.winner-4 {
    transform: translate(-45px, 0);
  }
}
#drawCell10.winner-4,
#drawCell11.winner-4,
#drawCell12.winner-4,
#drawCell13.winner-4,
#drawCell14.winner-4,
#drawCell15.winner-4,
#drawCell16.winner-4,
#drawCell17.winner-4,
#drawCell18.winner-4 {
  transform: translate(13.6vw, 0vw);
  transition: transform 0.5s ease, border 0.5s ease;
}
@media screen and (min-width: 436px) {
  #drawCell10.winner-4,
  #drawCell11.winner-4,
  #drawCell12.winner-4,
  #drawCell13.winner-4,
  #drawCell14.winner-4,
  #drawCell15.winner-4,
  #drawCell16.winner-4,
  #drawCell17.winner-4,
  #drawCell18.winner-4 {
    transform: translate(45px, 0);
  }
}
/* Дополнительные трансформации для анимации */
#drawCell1.winner-4.move1-4,
#drawCell2.winner-4.move1-4,
#drawCell3.winner-4.move1-4,
#drawCell4.winner-4.move1-4,
#drawCell5.winner-4.move1-4,
#drawCell6.winner-4.move1-4,
#drawCell7.winner-4.move1-4,
#drawCell8.winner-4.move1-4,
#drawCell9.winner-4.move1-4 {
  transform: translate(-13.6vw, 4.6vw);
}

#drawCell10.winner-4.move1-4,
#drawCell11.winner-4.move1-4,
#drawCell12.winner-4.move1-4,
#drawCell13.winner-4.move1-4,
#drawCell14.winner-4.move1-4,
#drawCell15.winner-4.move1-4,
#drawCell16.winner-4.move1-4,
#drawCell17.winner-4.move1-4,
#drawCell18.winner-4.move1-4 {
  transform: translate(13.6vw, -4.4vw);
}
@media screen and (min-width: 436px) {
  #drawCell1.winner-4.move1-4,
  #drawCell2.winner-4.move1-4,
  #drawCell3.winner-4.move1-4,
  #drawCell4.winner-4.move1-4,
  #drawCell5.winner-4.move1-4,
  #drawCell6.winner-4.move1-4,
  #drawCell7.winner-4.move1-4,
  #drawCell8.winner-4.move1-4,
  #drawCell9.winner-4.move1-4 {
    transform: translate(-45px, 14.8px);
  }
  #drawCell10.winner-4.move1-4,
  #drawCell11.winner-4.move1-4,
  #drawCell12.winner-4.move1-4,
  #drawCell13.winner-4.move1-4,
  #drawCell14.winner-4.move1-4,
  #drawCell15.winner-4.move1-4,
  #drawCell16.winner-4.move1-4,
  #drawCell17.winner-4.move1-4,
  #drawCell18.winner-4.move1-4 {
    transform: translate(45px, -15px);
  }
}
/* Дополнительные трансформации для анимации */
#drawCell1.winner-4.move2-4,
#drawCell2.winner-4.move2-4,
#drawCell3.winner-4.move2-4,
#drawCell4.winner-4.move2-4,
#drawCell5.winner-4.move2-4,
#drawCell6.winner-4.move2-4,
#drawCell7.winner-4.move2-4,
#drawCell8.winner-4.move2-4,
#drawCell9.winner-4.move2-4 {
  transform: translate(-13.6vw, -47vw);
}

#drawCell10.winner-4.move2-4,
#drawCell11.winner-4.move2-4,
#drawCell12.winner-4.move2-4,
#drawCell13.winner-4.move2-4,
#drawCell14.winner-4.move2-4,
#drawCell15.winner-4.move2-4,
#drawCell16.winner-4.move2-4,
#drawCell17.winner-4.move2-4,
#drawCell18.winner-4.move2-4 {
  transform: translate(13.4vw, -56vw);
}
@media screen and (min-width: 436px) {
  #drawCell1.winner-4.move2-4,
  #drawCell2.winner-4.move2-4,
  #drawCell3.winner-4.move2-4,
  #drawCell4.winner-4.move2-4,
  #drawCell5.winner-4.move2-4,
  #drawCell6.winner-4.move2-4,
  #drawCell7.winner-4.move2-4,
  #drawCell8.winner-4.move2-4,
  #drawCell9.winner-4.move2-4 {
    transform: translate(-44.6px, -175px);
  }
  #drawCell10.winner-4.move2-4,
  #drawCell11.winner-4.move2-4,
  #drawCell12.winner-4.move2-4,
  #drawCell13.winner-4.move2-4,
  #drawCell14.winner-4.move2-4,
  #drawCell15.winner-4.move2-4,
  #drawCell16.winner-4.move2-4,
  #drawCell17.winner-4.move2-4,
  #drawCell18.winner-4.move2-4 {
    transform: translate(45px, -205px);
  }
}