/* =========== */
.card__wrap .main .card__img {
  width: 87%;
}

.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;
  transition: all 250ms;
  font-size: 18px;
  margin-bottom: 30px;
}

.drop-zone-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tile-zone-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
}
.drop-zone {
  font-size: 7vw;
  color: transparent;
  height: 11vw;
  width: 11vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  margin: 0;
  border-radius: 50%;
  pointer-events: none;
  position: absolute;
}
.tile {
  font-size: 7vw;
  font-weight: bold;
  color: white;
  height: 11vw;
  width: 11vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  margin: 0;
  padding-bottom: 2px;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  line-height: 1;
}
@media screen and (min-width: 436px) {
  .drop-zone {
    font-size: 32px;
    height: 48px;
    width: 48px;
  }
}
@media screen and (min-width: 436px) {
  .drop-zone {
    font-size: 24px;
    font-weight: bold;
    color: white;
    height: 38px;
    width: 38px;
  }
  .tile {
    font-size: 24px;
    font-weight: bold;
    color: white;
    height: 38px;
    width: 38px;
  }
}
.drop-zone-1,
.tile-1 {
  top: 4%;
  left: 24.4%;
}
.drop-zone-2,
.tile-2 {
  top: 4%;
  left: 43.8%;
}
.drop-zone-3,
.tile-3 {
  top: 4%;
  left: 63%;
}

.drop-zone-4,
.tile-4 {
  top: 23.2%;
  left: 72.6%;
}

.drop-zone-5,
.tile-5 {
  top: 42.8%;
  left: 82.4%;
}

.drop-zone-6,
.tile-6 {
  top: 61.8%;
  left: 72.8%;
}

.drop-zone-7,
.tile-7 {
  top: 81.2%;
  left: 63%;
}
.drop-zone-8,
.tile-8 {
  top: 81.2%;
  left: 43.8%;
}
.drop-zone-9,
.tile-9 {
  top: 81.2%;
  left: 24.4%;
}
.drop-zone-10,
.tile-10 {
  top: 61.8%;
  left: 14.6%;
}
.drop-zone-11,
.tile-11 {
  top: 42.8%;
  left: 5%;
}
.drop-zone-12,
.tile-12 {
  top: 23.2%;
  left: 14.6%;
}
.tile.blocked {
  pointer-events: none;
  background-color: rgb(187, 1, 1);
  cursor: default;
}

.tile {
  transition: all 100ms;
}
.tile.active {
  transition: none;
  z-index: 10;
  transform: translate(-10px, -10px) scale(2);
}
@media screen and (min-width: 436px) {
  .tile.active {
    transition: none;
    z-index: 10;
    transform: translate(-10px, -10px) scale(1.6);
  }
}
.arrows-img.show {
  position: absolute;
  width: 14%;
  transform: translate(-50%, -50%);
  /* top: 45.6%; */
  top: 47%;
  left: 55%;
}
.center-zone {
  font-size: 7vw;
  font-weight: bold;
  color: white;
  height: 12vw;
  width: 12vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--main-text-color);
  margin: 0;
  padding-bottom: 2px;
  border-radius: 50%;
  position: absolute;
  line-height: 1;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 436px) {
  .center-zone {
    font-size: 24px;
    font-weight: bold;
    color: white;
    height: 44px;
    width: 44px;
  }
}
.card__wrap .main {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  height: 100%;
}

.card__wrap .restart {
  display: flex;
  width: 35px;
  position: absolute;
  top: 60px;
  left: 84%;
  cursor: pointer;
  z-index: 35;
}

.card__wrap-blocked .restart {
  display: none;
}
.answer-number {
  position: absolute;
  color: silver;
  font-weight: 600;
  font-size: 21px;
  padding: 0px;
  letter-spacing: 0px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  opacity: 0;
}
.answer-number span {
  line-height: 1;
}
@media screen and (min-width: 436px) {
  .answer-number {
    font-size: 18px;
    width: 24px;
    height: 24px;
  }
}

.answer-number-arrow {
  width: 0;
  height: 0;
  border-top: 1.5vw solid transparent;
  border-left: 2vw solid silver;
  border-bottom: 1.5vw 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: 8px solid silver;
    border-bottom: 6px solid transparent;
  }
}
.answer-one {
  top: -13%;
  left: 46%;
  transform: rotate(90deg);
}

.answer-one span {
  transform: rotate(-90deg);
}
.answer-two {
  top: 15%;
  left: 89%;
  transform: rotate(145deg);
}
.answer-two span {
  transform: rotate(215deg);
}
.answer-three {
  top: 75%;
  left: 89%;
  transform: rotate(215deg);
}
.answer-three span {
  transform: rotate(145deg);
}
.answer-four {
  top: 103%;
  left: 46%;
  transform: rotate(270deg);
}
.answer-four span {
  transform: rotate(90deg);
}
.answer-five {
  top: 75%;
  left: 2.6%;
  transform: rotate(325deg);
}
.answer-five span {
  transform: rotate(35deg);
}
.answer-six {
  top: 15%;
  left: 2.6%;
  transform: rotate(35deg);
}
.answer-six span {
  transform: rotate(-35deg);
}