/* ================================= main start ================================= */
.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .mobile.wrapper .main {
    height: 88dvh;
  }
}

/*==========  playfields start  ==========*/
.playfields {
  display: flex;
  justify-content: center;
  flex: 1;
  position: relative;
  height: -webkit-fill-available;
  align-items: center;
  max-width: 70rem;
  width: 100%;
}

.mobile.challenge-3 .playfield,
.mobile.challenge-3 .tiles {
  width: 96%;
}

.mobile .challenge-content.active {
  position: absolute;
  top: 1%;
  transform: translate(-50%, 0%);
  width: 100%;
  display: flex;
  height: 50%;
  aspect-ratio: unset;
  justify-content: center;
  left: 50%;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
}

.wrapper-playfield {
  width: 100%;
  display: flex;
  height: auto;
  flex-wrap: wrap;
}

.playfield {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 73 / 70;
  width: calc(100% / 5);
  display: flex;
}

.playfield.playfield_0 {
  left: calc(100% / 5 * 1);
}

.playfield.playfield_1 {
  left: calc(100% / 5 * 2);
}

.playfield.playfield_2 {
  left: calc(100% / 5 * 3);
}

.playfield.playfield_3 {
  left: calc(100% / 5 * 4);
}

/*==========  tiles start  ==========*/
.tiles {
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 73 / 70;
  width: calc(100% / 1.72);
  z-index: 3;
}

.tile {
  position: absolute;
  width: 11.2%;
  cursor: pointer;
  transform: translate(-50%, -50%) scale(1);
  z-index: 1;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  pointer-events: auto;
}

.tile_1,
.drop-zone_1 {
  top: 77.4%;
  left: -16.3%;
}

.tile_2,
.drop-zone_2 {
  top: 79%;
  left: 1%;
}

.tile_3,
.drop-zone_3 {
  top: 76%;
  left: 20%;
}

.tile_4,
.drop-zone_4 {
  top: 77%;
  left: 38%;
}

.tile_5,
.drop-zone_5 {
  top: 80.4%;
  left: 55.7%;
}

.tile_6,
.drop-zone_6 {
  top: 80.4%;
  left: 74.7%;
}

.tile_7,
.drop-zone_7 {
  top: 77.4%;
  left: 90.7%;
}

.tile_8,
.drop-zone_8 {
  top: 77.4%;
  left: 108.7%;
}

.tile_9,
.drop-zone_9 {
  top: 63.4%;
  left: 118.7%;
}

.tile_10,
.drop-zone_10 {
  top: 28.4%;
  left: 123.7%;
}

.tile_11,
.drop-zone_11 {
  top: 14.4%;
  left: 118.7%;
}

.tile_12,
.drop-zone_12 {
  top: 22.4%;
  left: 106.7%;
}

.tile_13,
.drop-zone_13 {
  top: 13.4%;
  left: 94.7%;
}

.tile_14,
.drop-zone_14 {
  top: 22.4%;
  left: 80.7%;
}

.tile_15,
.drop-zone_15 {
  top: 18.4%;
  left: 65.7%;
}

.tile_16,
.drop-zone_16 {
  top: 23.4%;
  left: 51.7%;
}

.tile_17,
.drop-zone_17 {
  top: 17.4%;
  left: 37.7%;
}

.tile_18,
.drop-zone_18 {
  top: 20.4%;
  left: 23.7%;
}

.tile_19,
.drop-zone_19 {
  top: 26.4%;
  left: 9.7%;
}

.tile_20,
.drop-zone_20 {
  top: 12.4%;
  left: 5.7%;
}

.tile_21,
.drop-zone_21 {
  top: 20.4%;
  left: -7.3%;
}

.tile_22,
.drop-zone_22 {
  top: 19.4%;
  left: -22.3%;
}

.tile_23,
.drop-zone_23 {
  top: 35.4%;
  left: -18.3%;
}

.tile_24,
.drop-zone_24 {
  top: 50.4%;
  left: -27.3%;
}

/* Rotate some tiles */
.tile_5,
.tile_6,
.tile_8,
.tile_9,
.tile_11,
.tile_15,
.tile_16,
.tile_18,
.tile_19,
.tile_21,
.tile_23,
.tile_24 {
  transform: translate(-50%, -50%) rotate(60deg);
}

/*==========  drop-zones  ==========*/
.drop-zones {
  flex: 1;
  position: absolute;
  height: -webkit-fill-available;
  align-items: center;
  width: 100%;
}

.drop-zone {
  position: absolute;
  width: 6.5%;
  aspect-ratio: 73 / 70;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

/* ============= CHALLENGE 2 ============= */
.challenge-2 .playfield {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% / 2.56);
}

.challenge-2 .tile_1,
.challenge-2 .drop-zone_1 {
  top: 79.4%;
  left: -18.3%;
}

.challenge-2 .tile_2,
.challenge-2 .drop-zone_2 {
  top: 82%;
  left: 1%;
}

.challenge-2 .tile_3,
.challenge-2 .drop-zone_3 {
  top: 87%;
  left: 15%;
}

.challenge-2 .tile_4,
.challenge-2 .drop-zone_4 {
  top: 11%;
  left: 16%;
}

.challenge-2 .tile_5,
.challenge-2 .drop-zone_5 {
  top: 62.4%;
  left: 96.7%;
}

.challenge-2 .tile_6,
.challenge-2 .drop-zone_6 {
  top: 81.4%;
  left: 90.7%;
}

.challenge-2 .tile_7,
.challenge-2 .drop-zone_7 {
  top: 31.4%;
  left: 100.7%;
}

.challenge-2 .tile_8,
.challenge-2 .drop-zone_8 {
  top: 72.4%;
  left: 109.7%;
}

.challenge-2 .tile_9,
.challenge-2 .drop-zone_9 {
  top: 14.4%;
  left: 92.7%;
}

.challenge-2 .tile_10,
.challenge-2 .drop-zone_10 {
  top: 47.4%;
  left: 108.7%;
}

.challenge-2 .tile_11,
.challenge-2 .drop-zone_11 {
  top: 59.4%;
  left: 119.7%;
}

.challenge-2 .tile_12,
.challenge-2 .drop-zone_12 {
  top: 42.4%;
  left: 89.7%;
}

.challenge-2 .tile_13,
.challenge-2 .drop-zone_13 {
  top: 31.4%;
  left: 115.7%;
}

.challenge-2 .tile_14,
.challenge-2 .drop-zone_14 {
  top: 27.4%;
  left: 81.7%;
}

.challenge-2 .tile_15,
.challenge-2 .drop-zone_15 {
  top: 13.4%;
  left: 69.7%;
}

.challenge-2 .tile_16,
.challenge-2 .drop-zone_16 {
  top: 10.4%;
  left: 50.7%;
}

.challenge-2 .tile_17,
.challenge-2 .drop-zone_17 {
  top: 12.4%;
  left: 31.7%;
}

.challenge-2 .tile_18,
.challenge-2 .drop-zone_18 {
  top: 26.4%;
  left: 21.7%;
}

.challenge-2 .tile_19,
.challenge-2 .drop-zone_19 {
  top: 36.4%;
  left: -6.3%;
}

.challenge-2 .tile_20,
.challenge-2 .drop-zone_20 {
  top: 22.4%;
  left: 4.7%;
}

.challenge-2 .tile_21,
.challenge-2 .drop-zone_21 {
  top: 39.4%;
  left: 11.7%;
}

.challenge-2 .tile_22,
.challenge-2 .drop-zone_22 {
  top: 51.4%;
  left: -18.3%;
}

.challenge-2 .tile_23,
.challenge-2 .drop-zone_23 {
  top: 55.4%;
  left: 3.7%;
}

.challenge-2 .tile_24,
.challenge-2 .drop-zone_24 {
  top: 66.4%;
  left: -8.3%;
}

/* ============= CHALLENGE 3 ============= */
.challenge-3 .playfield {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% / 1.72);
}

.challenge-3 .tile_15,
.challenge-3 .drop-zone_15 {
  top: 79.4%;
  left: -34.3%;
}

.challenge-3 .tile_24,
.challenge-3 .drop-zone_24 {
  top: 83%;
  left: -11%;
}

.challenge-3 .tile_3,
.challenge-3 .drop-zone_3 {
  top: 81%;
  left: 11%;
}

.challenge-3 .tile_4,
.challenge-3 .drop-zone_4 {
  top: 81%;
  left: 35%;
}

.challenge-3 .tile_5,
.challenge-3 .drop-zone_5 {
  top: 82.4%;
  left: 56.7%;
}

.challenge-3 .tile_6,
.challenge-3 .drop-zone_6 {
  top: 65.4%;
  left: -24.3%;
}

.challenge-3 .tile_20,
.challenge-3 .drop-zone_20 {
  top: 81.4%;
  left: 80.7%;
}

.challenge-3 .tile_8,
.challenge-3 .drop-zone_8 {
  top: 78.4%;
  left: 104.7%;
}

.challenge-3 .tile_9,
.challenge-3 .drop-zone_9 {
  top: 38.4%;
  left: 108.7%;
}

.challenge-3 .tile_10,
.challenge-3 .drop-zone_10 {
  top: 62.4%;
  left: 116.7%;
}

.challenge-3 .tile_11,
.challenge-3 .drop-zone_11 {
  top: 29.4%;
  left: 124.7%;
}

.challenge-3 .tile_12,
.challenge-3 .drop-zone_12 {
  top: 47.4%;
  left: -33.3%;
}

.challenge-3 .tile_23,
.challenge-3 .drop-zone_23 {
  top: 12.4%;
  left: 116.7%;
}

.challenge-3 .tile_18,
.challenge-3 .drop-zone_18 {
  top: 20.4%;
  left: 82.7%;
}

.challenge-3 .tile_1,
.challenge-3 .drop-zone_1 {
  top: 19.4%;
  left: 100.7%;
}

.challenge-3 .tile_16,
.challenge-3 .drop-zone_16 {
  top: 49.4%;
  left: 126.7%;
}

.challenge-3 .tile_17,
.challenge-3 .drop-zone_17 {
  top: 20.4%;
  left: 63.7%;
}

.challenge-3 .tile_14,
.challenge-3 .drop-zone_14 {
  top: 18.4%;
  left: 44.7%;
}

.challenge-3 .tile_19,
.challenge-3 .drop-zone_19 {
  top: 21.4%;
  left: 27.7%;
}

.challenge-3 .tile_7,
.challenge-3 .drop-zone_7 {
  top: 19.4%;
  left: 9.7%;
}

.challenge-3 .tile_21,
.challenge-3 .drop-zone_21 {
  top: 32.4%;
  left: -20.3%;
}

.challenge-3 .tile_22,
.challenge-3 .drop-zone_22 {
  top: 34.4%;
  left: -2.3%;
}

.challenge-3 .tile_13,
.challenge-3 .drop-zone_13 {
  top: 52.4%;
  left: -13.3%;
}

.challenge-3 .tile_2,
.challenge-3 .drop-zone_2 {
  top: 14.4%;
  left: -13.3%;
}

/* ====================== */
.burger-menu {
  display: none;
}

.modal-mobile {
  display: none;
}

/* ====================== ANIMATION ====================== */
@keyframes modalClose {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    /* height: auto; */
    z-index: 9999;
  }

  100% {
    top: 1%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.05);
    opacity: 0;
    /* height: 0; */
  }
}

@keyframes modalOpen {
  0% {
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.05);
    opacity: 0;

    z-index: -1;
  }

  100% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    height: auto;
    z-index: 9999;
  }
}

/* ====================== MOBILE ====================== */
.mobile .plug,
.mobile .order-me-btn,
.mobile .prompt-wrapper,
.mobile .btn-to-index,
.mobile .footer-inner .footer {
  /* if you need to hide the entire footer */
  display: none;
}

.mobile .footer-inner {
  width: 50%;
}

.mobile .burger-menu {
  width: 3px;
  height: 18px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  transform: translate(-200%, -36%);
}

.mobile .burger-line {
  width: 100%;
  background-color: black;
  height: 3px;
  border-radius: 2px;
}

.mobile .header {
  padding: 0.1rem 0.5rem 0rem;
  margin-bottom: 45px;
  position: relative;
}

.header .logo-header {
  display: none;
}

.mobile .header .logo-header {
  display: flex;
  width: auto;
  height: 110%;
  position: absolute;
}

.mobile .title {
  font-weight: 700;
  color: var(--title-color);
  font-size: 23px;
  width: max-content;
  margin: 0 auto;
  position: relative;
  padding-top: 3px;
}

.mobile .mobile-title::before {
  content: "";
  width: 2px;
  height: 65%;
  position: absolute;
  background-color: #898989;
  top: 50%;
  left: 111%;
  transform: translate(0, -50%);
}

.mobile .btn-wrap {
  gap: 15px;
  display: flex;
  margin-top: 0;
  position: absolute;
  top: 7px;
  right: 5px;
  z-index: 999;
}

.mobile.wrapper .buttons-block {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: center;
  margin-bottom: 0;
  gap: 4px;
}

.mobile.wrapper .btn {
  font-family: "arial";
  padding: 3px;
  font-size: 1.6rem;
  font-weight: 600;
  color: white;
  line-height: 1.2;
  background-color: #868686;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: none;
  transition: all 200ms ease;
  width: 30px;
  height: 30px;
  transform: translate(0, -3px);
  user-select: none;
  text-transform: lowercase;
}

.mobile.wrapper .how-to-play-btn {
  display: none;
}

.mobile.wrapper .btn.restart {
  background-color: transparent;
  background-image: url(../img/refresh_icon.svg);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}

.mobile .pagination {
  position: fixed;
  display: flex;
  gap: 12px;
  align-items: center;
  top: 40px;
  left: 10px;
  bottom: unset;
  transform: translate(0%, 0%);
  flex-direction: column;
  z-index: 10;
}

.mobile .pagination-text {
  pointer-events: none;
  top: -4px;
  left: 32px;
  right: unset;
  text-align: left;
  font-size: 16px;
  width: 88vw;
  transform: translate(-150%, 0%);
}

.mobile .pagination-btn {
  width: clamp(1.5rem, 3vw, 2rem);
  height: clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(1.1rem, 1.5vw, 1.1rem);
  background: #cccccc;
  box-shadow:
    0 0 0 2px #cccccc,
    0 0 0 3px #898989;
  border: 1px solid #898989;
  z-index: 2;
  position: relative;
}

.mobile .pagination-btn:hover {
  transform: translate(0, 0);
  box-shadow:
    0 0 0 2px #cccccc,
    0 0 0 3px #898989;
  transition: all 200ms ease;
}

.mobile .pagination-btn.active {
  box-shadow:
    0px 0px 0px 3px #868686,
    0px 0px 0px #545454;

  transform: translate(0, 0);
  background: #868686;
  color: #cccccc;
}

.mobile .pagination-text {
  pointer-events: none;
  top: -4px;
  left: 32px;
  text-align: left;
  font-size: 16px;
  width: 88vw;

  opacity: 1;
  transform: translate(0%, 0%);
}

/* ==================== ANIMATION FOR INACTIVE ==================== */
.mobile .pagination-link-wrapper .pagination-text {
  animation: hideText 2.1s forwards;
}

/* ==================== ANIMATION FOR ACTIVE ==================== */
.mobile
  .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="1"])
  .pagination-text,
.mobile
  .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="2"])
  .pagination-text,
.mobile
  .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="3"])
  .pagination-text {
  animation: showText 2.2s forwards;
  width: 88vw;
}

/* ====================== KEYFRAMES ====================== */

@keyframes hideText {
  0% {
    opacity: 0;
    transform: translate(0%, 0%);
  }

  1% {
    opacity: 0;
    transform: translate(0%, 0%);
  }

  40% {
    opacity: 0;
    transform: translate(0%, 0%);
    /* first turn off the opacity */
  }

  100% {
    opacity: 0;
    transform: translate(-150%, 0%);
    /* then we go left */
  }
}

@keyframes showText {
  0% {
    opacity: 0;
    transform: translate(-150%, 0%);
  }

  100% {
    opacity: 1;
    transform: translate(0%, 0%);
    /* we leave smoothly */
  }
}

/* playfields on mobile */

.mobile .playfield {
  position: relative;
  top: unset;
  transform: unset;
  aspect-ratio: 70 / 70;
  width: 100%;
  display: flex;
  left: unset;
}

.mobile.wrapper .playfield {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  /* height: 70%; */
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: unset;
}

.challenge-1.mobile.wrapper .playfield {
  top: unset;
  transform: unset;
  width: calc(100% / 2);
  display: flex;
  height: unset;
  aspect-ratio: 1 / 1;
  justify-content: center;
  left: unset;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  display: block;
}

.mobile.wrapper .playfield.playfield_0 {
  left: 0%;
  top: 0;
}

.mobile.wrapper .playfield.playfield_1 {
  left: 50%;
  top: 0;
}

.mobile.wrapper .playfield.playfield_2 {
  left: 50%;
  top: 50%;
}

.mobile.wrapper .playfield.playfield_3 {
  left: 0;
  top: 50%;
}

.mobile .tiles {
  width: 100%;
  height: 100%;
}

.mobile .playfields {
  position: relative;
  height: unset;
  min-height: unset;
  flex: unset;
  width: 100%;
}

.mobile .main {
  flex: unset;
}

.mobile .footer {
  display: none;
}

.mobile .tile {
  width: 17%;
}

.mobile.challenge-3 .playfield {
  /*width: calc(100% /1);*/
}

.challenge-3 .tile {
  width: 11.4%;
}

/* Overriding tile positions for mobile */
.mobile .tile_1,
.mobile .drop-zone_1 {
  top: 13%;
  left: 2%;
}

.mobile .tile_2,
.mobile .drop-zone_2 {
  top: 13%;
  left: 21%;
}

.mobile .tile_3,
.mobile .drop-zone_3 {
  top: 13%;
  left: 40.5%;
}

.mobile .tile_4,
.mobile .drop-zone_4 {
  top: 13%;
  left: 79%;
}

.mobile .tile_5,
.mobile .drop-zone_5 {
  top: 13%;
  left: 98%;
}

.mobile .tile_6,
.mobile .drop-zone_6 {
  top: 33%;
  left: 2%;
}

.mobile .tile_7,
.mobile .drop-zone_7 {
  top: 33%;
  left: 21%;
}

.mobile .tile_8,
.mobile .drop-zone_8 {
  top: 33%;
  left: 40.5%;
}

.mobile .tile_9,
.mobile .drop-zone_9 {
  top: 33%;
  left: 60%;
}

.mobile .tile_10,
.mobile .drop-zone_10 {
  top: 33%;
  left: 79%;
}

.mobile .tile_11,
.mobile .drop-zone_11 {
  top: 33%;
  left: 98%;
}

.mobile .tile_12,
.mobile .drop-zone_12 {
  top: 53%;
  left: 2%;
}

.mobile .tile_13,
.mobile .drop-zone_13 {
  top: 13%;
  left: 60%;
}

.mobile .tile_14,
.mobile .drop-zone_14 {
  top: 53%;
  left: 21%;
}

.mobile .tile_15,
.mobile .drop-zone_15 {
  top: 53%;
  left: 40.5%;
}

.mobile .tile_16,
.mobile .drop-zone_16 {
  top: 53%;
  left: 60%;
}

.mobile .tile_17,
.mobile .drop-zone_17 {
  top: 53%;
  left: 79%;
}

.mobile .tile_18,
.mobile .drop-zone_18 {
  top: 53%;
  left: 98%;
}

.mobile .tile_19,
.mobile .drop-zone_19 {
  top: 73%;
  left: 2%;
}

.mobile .tile_20,
.mobile .drop-zone_20 {
  top: 73%;
  left: 21%;
}

.mobile .tile_21,
.mobile .drop-zone_21 {
  top: 73%;
  left: 40.5%;
}

.mobile .tile_22,
.mobile .drop-zone_22 {
  top: 73%;
  left: 60%;
}

.mobile .tile_23,
.mobile .drop-zone_23 {
  top: 73%;
  left: 79%;
}

.mobile .tile_24,
.mobile .drop-zone_24 {
  top: 73%;
  left: 98%;
}

.mobile .tiles {
  position: absolute;
  display: flex;
  top: 52%;
  left: 50%;
  transform: translate(-50%, 0%);
  aspect-ratio: 1/1;
}

.mobile.challenge-3 .tiles {
  top: 41%;
}

.mobile.wrapper .playfield {
  display: block;
}

/* ============ */

.mobile.challenge-3 .tile_1 {
  top: 13%;
  left: 11%;
}

.mobile.challenge-3 .tile_2 {
  top: 13%;
  left: 27%;
}

.mobile.challenge-3 .tile_3 {
  top: 13%;
  left: 42.5%;
}

.mobile.challenge-3 .tile_4 {
  top: 13%;
  left: 74%;
}

.mobile.challenge-3 .tile_5 {
  top: 13%;
  left: 90%;
}

.mobile.challenge-3 .tile_6 {
  top: 30%;
  left: 11%;
}

.mobile.challenge-3 .tile_7 {
  top: 30%;
  left: 27%;
}

.mobile.challenge-3 .tile_8 {
  top: 30%;
  left: 42.5%;
}

.mobile.challenge-3 .tile_9 {
  top: 30%;
  left: 58%;
}

.mobile.challenge-3 .tile_10 {
  top: 30%;
  left: 74%;
}

.mobile.challenge-3 .tile_11 {
  top: 30%;
  left: 90%;
}

.mobile.challenge-3 .tile_12 {
  top: 47%;
  left: 11%;
}

.mobile.challenge-3 .tile_13 {
  top: 13%;
  left: 58%;
}

.mobile.challenge-3 .tile_14 {
  top: 47%;
  left: 27%;
}

.mobile.challenge-3 .tile_15 {
  top: 47%;
  left: 42.5%;
}

.mobile.challenge-3 .tile_16 {
  top: 47%;
  left: 58%;
}

.mobile.challenge-3 .tile_17 {
  top: 47%;
  left: 74%;
}

.mobile.challenge-3 .tile_18 {
  top: 47%;
  left: 90%;
}

.mobile.challenge-3 .tile_19 {
  top: 64%;
  left: 11%;
}

.mobile.challenge-3 .tile_20 {
  top: 64%;
  left: 27%;
}

.mobile.challenge-3 .tile_21 {
  top: 64%;
  left: 42.5%;
}

.mobile.challenge-3 .tile_22 {
  top: 64%;
  left: 58%;
}

.mobile.challenge-3 .tile_23 {
  top: 64%;
  left: 74%;
}

.mobile.challenge-3 .tile_24 {
  top: 64%;
  left: 90%;
}

#how-to-play-modal {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: bottom center;
  width: 40px;
  height: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 150ms ease,
    width 350ms cubic-bezier(0.25, 0.8, 0.25, 1) 150ms,
    height 400ms cubic-bezier(0.25, 0.8, 0.25, 1) 500ms;
}

#how-to-play-modal.show,
#order-me-modal.show {
  opacity: 1;
  pointer-events: auto;
  width: 80vw;
  height: 100px;
}

/* ====================== MEDIA QUERY ====================== */
@media (max-width: 767px) {
  .modal-mobile {
    display: flex;
    width: 100%;
    height: auto;
    position: absolute;
    background-color: #000000c7;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 9999;
    color: #c7c7c7;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 15px;
  }

  .modal-mobile.hide {
    animation: modalClose 1.1s forwards;
    pointer-events: none;
  }

  .modal-mobile:not(.hide) {
    animation: modalOpen 1.1s forwards;
  }

  .btn-pp,
  .btn-play,
  .btn-cart {
    border: 2px solid #c7c7c7;
    border-radius: 50px;
    padding: 10px;
    background-color: #00000087;
    text-align: center;
    display: flex;
    align-items: center;
  }

  .cart-img {
    width: 30px;
    height: 30px;
  }

  .btn-play {
    padding: 10px 20px;
  }

  .modal-mobile-buttons {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
  }

  .mobile.wrapper,
  .wrapper {
    height: 100dvh;
    padding: 0;
  }

  html,
  body {
    height: 100dvh;
  }

  /* pagination on mobile */
  .challenge-2.wrapper.mobile .pagination-link-wrapper-1 {
    transform: translate(0%, 150%);
  }

  .challenge-2.wrapper.mobile .pagination-link-wrapper-2 {
    transform: translate(0%, -150%);
  }

  .challenge-2.wrapper.mobile .pagination-link-wrapper-3 {
    transform: translate(0%, 0%);
  }

  .challenge-3.wrapper.mobile .pagination-link-wrapper-1 {
    transform: translate(0%, 150%);
  }

  .challenge-3.wrapper.mobile .pagination-link-wrapper-2 {
    transform: translate(0%, 150%);
  }

  .challenge-3.wrapper.mobile .pagination-link-wrapper-3 {
    transform: translate(0%, -300%);
  }

  .challenge-1.wrapper.mobile .pagination-link-wrapper-1,
  .challenge-1.wrapper.mobile .pagination-link-wrapper-2,
  .challenge-1.wrapper.mobile .pagination-link-wrapper-3 {
    transform: translate(0, 0%);
  }

  .wrapper.mobile .pagination-link-wrapper,
  .wrapper .pagination-link-wrapper {
    transition: all 550ms ease;
  }

  .wrapper.mobile .pagination-btn .pagination-text {
    transition: opacity 550ms ease 500ms;
  }

  .wrapper.mobile .pagination-link-wrapper {
    width: 24px;
    height: 24px;
  }

  .challenge-1.mobile .pagination-link-wrapper-2 .pagination-text,
  .challenge-1.mobile .pagination-link-wrapper-3 .pagination-text,
  .challenge-2.mobile .pagination-link-wrapper-1 .pagination-text,
  .challenge-2.mobile .pagination-link-wrapper-3 .pagination-text,
  .challenge-3.mobile .pagination-link-wrapper-2 .pagination-text,
  .challenge-3.mobile .pagination-link-wrapper-3 .pagination-text {
    transition: opacity 0ms ease 0ms;
  }
}

.tile {
  -webkit-tap-highlight-color: transparent;
  /* removes gray backlight on iOS */
}

.playfield {
  -webkit-tap-highlight-color: transparent;
  /* removes gray backlight on iOS */
}

.wrapper.mobile .header .you-win {
  top: 35px;
  z-index: 9999;
}

/*================================*/
#resize-preloader {
  position: fixed;
  top: 0;
  left: -101%;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  /* Dark background in QuintaPaths style */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
}

#resize-preloader.show {
  left: 0%;
  opacity: 1;
}

.puzzle-container {
  display: flex;
  gap: 15px;
}

.puzzle-piece {
  width: 45px;
  height: 45px;
  background: transparent;
  animation: assemble 1.5s infinite ease-in-out;
}

/* Delay for each of the 5 elements */
.puzzle-piece:nth-child(1) {
  animation-delay: 0.1s;
}

.puzzle-piece:nth-child(2) {
  animation-delay: 0.2s;
}

.puzzle-piece:nth-child(3) {
  animation-delay: 0.3s;
}

.puzzle-piece:nth-child(4) {
  animation-delay: 0.4s;
}

.puzzle-piece:nth-child(5) {
  animation-delay: 0.5s;
}

@keyframes assemble {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(90deg);
    opacity: 1;
  }
}