/* =========== */
.card__wrap .main .card__img {
  width: 92vw;
}
@media screen and (min-width: 436px) {
  .card__wrap .main .card__img {
    width: 92%;
  }
}
.markup-interactive {
  position: relative;
}

.text-confirm-answer {
  font-size: 17px;
  text-align: center;
  font-weight: 400;
  color: grey;
  position: absolute;
  top: 40%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, 50%);
  opacity: 1;
  transition: all 250ms;
}
.text-confirm-answer.transparent {
  opacity: 0;
  transition: all 250ms;
}
@media screen and (min-width: 436px) {
  .text-confirm-answer {
    top: 37.2%;
  }
}
.for-float-wrapper .card__text {
  text-align: start;
  /* margin-top: 30px; */
  margin-bottom: 30px;
  transition: all 250ms;
  font-size: 18px;
}
@media screen and (min-width: 436px) {
  .for-float-wrapper .card__text {
    font-size: 17px;
  }
}
.card__text.card__text-explanations.show {
  margin-top: 7px;
}
@media screen and (min-width: 436px) {
  .card__text.card__text-explanations.show {
    margin-top: 30px;
  }
}

.starting-letter {
  display: flex;
  align-items: center;
  font-size: 34px;
  margin-right: 10px;
}
.drop-zone {
  color: var(--main-text-color);
  font-weight: 400;
  font-size: 17px;
  text-transform: capitalize;
  text-align: center;

  width: 29vw;
  height: 8vw;
  padding: 0px 5px 3px 5px;
  margin: 25px 0px 0 0;
  border-radius: 15px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  transition: font-size 250ms, background-color 250ms, color 250ms;
  cursor: pointer;
  user-select: none;
}

.drop-zone-1 {
  margin-top: 0;
  border: 2px solid var(--main-text-color);
  border-style: dashed;
}
.drop-zone-2 {
  margin-top: 0;
  border: 2px solid var(--main-text-color);
  border-style: dashed;
}
.drop-zone-3 {
  margin-top: 0;
  border: 2px solid var(--main-text-color);
  border-style: dashed;
}
.drop-zone-4 {
  height: 12vw;
  border: 2px solid var(--main-text-color);
  border-style: dashed;
}
.drop-zone-5 {
  height: 12vw;
  border: 2px solid var(--main-text-color);
  border-style: dashed;
}
.drop-zone-6 {
  height: 12vw;
  border: 2px solid var(--main-text-color);
  border-style: dashed;
}

@media screen and (min-width: 436px) {
  .drop-zone {
    width: 98px;
    height: 29px;
    padding: 0px 5px 1px 5px;
  }
  .drop-zone-4 {
    height: 47px;
  }
  .drop-zone-5 {
    height: 47px;
  }
  .drop-zone-6 {
    height: 47px;
  }
}

.plural {
  top: 32.2%;
  position: absolute;
  transform: translate(-50%, 0);
}

.plural {
  font-size: 18px;
}
@media screen and (min-width: 436px) {
  .plural {
    font-size: 17px;
  }
}
.arrow {
  top: 17.6%;
  left: 74%;
  font-size: 19px;
  width: 17px;
}

.plural-1 {
  left: 15%;
}
.plural-2 {
  left: 50%;
}
.plural-3 {
  left: 84.4%;
}

.tile {
  cursor: pointer;
}

.main .card__img svg {
  top: 0;
}

.card__wrap .main {
  position: relative;
}

.container-names {
  width: 100%;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 436px) {
  .container-names {
    width: 100%;
  }
}
.name {
  font-size: 17px;
  color: gray;
  text-transform: capitalize;
  text-align: center;
  width: 29vw;
  height: 8vw;
  border: 1px solid gray;
  border-radius: 15px;
  margin: 7px 0px 0 0;
  padding: 2px 3px 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  position: relative;
}
.name.spades,
.name.hearts,
.name.diamonds {
  height: 12vw;
  display: flex;
  align-items: flex-end;
  margin-top: 7px;
}
.name.spades::before,
.name.hearts::before,
.name.diamonds::before {
  content: "";
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 4vw;
  height: 5vw;
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translate(-50%, 0);
}
.name.spades::before {
  background-image: url(../img/1139/spades.svg);
}

.name.hearts::before {
  background-image: url(../img/1139/hearts.svg);
}

.name.diamonds::before {
  background-image: url(../img/1139/diamonds.svg);
}

@media screen and (min-width: 436px) {
  .name {
    width: 98px;
    height: 25px;
    margin-top: 14px;
  }
  .name.spades,
  .name.hearts,
  .name.diamonds {
    height: 47px;
    margin-top: 14px;
  }
  .name.spades::before,
  .name.hearts::before,
  .name.diamonds::before {
    width: 16px;
    height: 19px;
    top: 5px;
  }
}

.interactive-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
/* ================ */
.card-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.card {
  width: 28vw;
  height: 52vw;
  perspective: 1000px;
}
@media screen and (min-width: 436px) {
  .card {
    width: 100px;
    height: 181px;
  }
}
.card__img .card img {
  display: flex;
}
.card__item {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s; /* Плавное вращение */
}

.card__item-img {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Прячем заднюю сторону при вращении */
}

.front {
  z-index: 1; /* Передняя сторона */
}

.back {
  transform: rotateY(180deg); /* Задняя сторона повернута */
}

.card.flipped .card__item {
  transform: rotateY(180deg); /* Переворачиваем карту */
}
.click-path {
  cursor: pointer;
  width: 100%;
  height: 40%;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.card__wrap .restart {
  display: flex;
  width: 31px;
  position: absolute;
  top: 10px;
  right: 7px;
  cursor: pointer;
  z-index: 34;
  opacity: 1;
}
.card__wrap-blocked .restart {
  display: none;
}