/* =========== */
.card__wrap .main .card__img {
  width: 92vw;
  height: auto;
  margin-top: 18px;
}

@media screen and (min-width: 436px) {
  .card__wrap .main .card__img {
    width: 305px;
    /* height: 305px; */
  }
}

.markup-interactive {
  position: relative;
}

.text-confirm-answer {
  font-size: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.text-confirm-answer.transparent {
  opacity: 0;
  transition: all 250ms;
}
.for-float-wrapper .card__text {
  text-align: start;
  margin-top: 30%;
  margin-bottom: 25px;
  transition: all 250ms;
  font-size: 17px;
}
@media screen and (min-width: 436px) {
  .for-float-wrapper .card__text {
    font-size: 16px;
    margin-top: 45%;
  }
}
.card__wrap-blocked .card__text {
  margin-top: 0%;
}
.card__wrap-blocked .tiles-plug {
  display: none;
}
.card__wrap .card__text {
  font-size: 18px;
  text-align: left;
  margin-top: 17px;
  margin-bottom: 30px;
}
.drop-zone {
  color: transparent;
  height: 18.8%;
  width: 31.6%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  /* opacity: 0; */
}

.drop-zone-1 {
  top: 9.6%;
  left: 16.4%;
}
.drop-zone-2 {
  top: 9.6%;
  left: 50%;
}
.drop-zone-3 {
  top: 9.6%;
  left: 83.6%;
}
.drop-zone-4 {
  top: 25%;
  left: 73.2%;
  transform: rotate(90deg);
}

.drop-zone-5 {
  top: 55.2%;
  left: 73.2%;
  transform: rotate(90deg);
}

.drop-zone-6 {
  top: 90%;
  left: 83.6%;
}

.drop-zone-7 {
  top: 90%;
  left: 50%;
}
.drop-zone-8 {
  top: 90%;
  left: 16.4%;
}

.drop-zone-9 {
  top: 55.2%;
  left: -5%;
  transform: rotate(90deg);
}
.drop-zone-10 {
  top: 25%;
  left: -5%;
  transform: rotate(90deg);
}
.drop-zone.spot {
  background-color: #296bde78;
}
.tiles {
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
}
/* @media screen and (min-width: 436px) {
  .tiles {
    width: 342px;
    max-width: unset;
    height: 108px;
  }
} */
.tile {
  position: absolute;
  width: 24%;
  border-radius: 6px;
  cursor: pointer;
}

.tile.in-drop-zone {
  width: 21.6%;
  box-shadow: 0px 0px 5px 1px;
  /* transform: rotate(90deg); */
}
.tile.rotate {
  transition: transform 500ms;
  transform: rotate(90deg);
}
.tile-1 {
  top: 20.8%;
  left: 23.2%;
  z-index: 0;
}
.tile-2 {
  top: 23.8%;
  left: 26.4%;
  z-index: 1;
}
.tile-3 {
  top: 26.6%;
  left: 29.8%;
  z-index: 2;
}
.tile-4 {
  top: 29.6%;
  left: 33.4%;
  z-index: 3;
}
.tile-5 {
  top: 32.6%;
  left: 36.8%;
  z-index: 4;
}
.tile-6 {
  top: 35.6%;
  left: 40%;
  z-index: 5;
}
.tile-7 {
  top: 38.6%;
  left: 43.2%;
  z-index: 6;
}
.tile-8 {
  top: 41.6%;
  left: 46.4%;
  z-index: 7;
}
.tile-9 {
  top: 44.6%;
  left: 49.4%;
  z-index: 8;
}
.tile-10 {
  top: 47.4%;
  left: 52.6%;
  z-index: 9;
}

.answer-number {
  position: absolute;
  color: #8f8e8e;
  font-weight: 600;
  font-size: 18px;
  padding: 0px;
  letter-spacing: 0px;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  opacity: 0;
}
/* @media screen and (min-width: 436px) {
  .answer-number {
    font-size: 16px;
    width: 18px;
    height: 18px;
  }
} */
.answer-number-arrow {
  width: 0;
  height: 0;
  border-top: 1.8vw solid transparent;
  border-left: 2.4vw solid #ff000061;
  border-bottom: 1.8vw solid transparent;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}
@media screen and (min-width: 436px) {
  .answer-number-arrow {
    border-top: 6px solid transparent;
    border-left: 10px solid #ff000061;
    border-bottom: 6px solid transparent;
  }
}

.answer-one {
  top: 23%;
  left: 58%;
  transform: rotate(270deg);
}
.answer-one span {
  transform: rotate(90deg);
}
.answer-two {
  top: 30%;
  left: 69%;
  transform: rotate(0deg);
}
.answer-two span {
  transform: rotate(0deg);
  margin-right: 6px;
}
.answer-three {
  top: 72%;
  left: 37%;
  transform: rotate(90deg);
}
.answer-three span {
  transform: rotate(270deg);
}
.answer-four {
  top: 65%;
  left: 25.4%;
  transform: rotate(180deg);
}
.answer-four span {
  transform: rotate(180deg);
  margin-left: -4px;
}

.active {
  z-index: 11;
}
.card__wrap .main {
  position: relative;
  user-select: none;
  -webkit-user-select: none; /* Для iOS */
  -ms-user-select: none; /* Для IE/Edge */
}
.interactive-container {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  z-index: 2;
}
@media screen and (min-width: 436px) {
  .interactive-container {
    width: 100%;
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: center;
  }
}
.drop-zone-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.card__wrap .restart {
  display: flex;
  width: 35px;
  position: absolute;
  top: 6px;
  left: 85%;
  cursor: pointer;
  z-index: 34;
}
@media screen and (min-width: 436px) {
  .card__wrap .restart {
    width: 32px;
    top: 9px;
    left: 87%;
  }
}

.card__wrap-blocked .restart,
.card__wrap-blocked .answer-number {
  display: none;
}

.card__wrap-blocked .playing-cards-magic-square.winner .tiles {
  display: none;
}
.card__img .goal-img.show {
  display: flex;
}
.card__img .goal-img {
  display: none;
}

.goal-img ~ .drop-zone-wrap {
  display: none;
}
.goal-img.show ~ .drop-zone-wrap {
  display: block;
}
.card__wrap .bookmark-switch-text {
  top: 85%;
}