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

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

.mobile .playfield_content {
  height: 100%;
}

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

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

.challenge-1 .playfield {
  top: 23%;
  aspect-ratio: 70 / 70;
}

.challenge-2 .playfield,
.challenge-3 .playfield {
  width: calc(100% / 2.5);
}

/*==========  playfields end  ==========*/

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

.challenge-1 .tiles {
  top: 23%;
}

.challenge-2 .tiles .tile,
.challenge-3 .tiles .tile {
  width: 25.8%;
  height: 25.8%;
}

.challenge-2 .tiles,
.challenge-3 .tiles {
  width: calc(100% / 2.5);
}

.tile {
  position: absolute;
  width: 12%;
  height: 12%;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  cursor: default;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center !important;
  /* border-radius: 3px;
  overflow: hidden; */
}

.tile_7 {
  width: 12.4%;
  height: 12.4%;
}

.tile_8 {
  width: 12.2%;
  height: 12.2%;
}

.tile_10 {
  width: 12.2%;
  height: 12.2%;
}

.tile_12 {
  /* width: 12.2%;
  height: 12.2%; */
}

.tile_13 {
  width: 12.2%;
  height: 12.2%;
}

.tile_14 {
  width: 12.2%;
  height: 12.2%;
}

.tile_15 {
  width: 12.2%;
  height: 12.2%;
}

.tile_18 {
  width: 12.2%;
  height: 12.2%;
}

.tile_19 {
  width: 12.2%;
  height: 12.2%;
}

.tile_21 {
  width: 12.2%;
  height: 12.2%;
}

.tile_22 {
  width: 12.2%;
  height: 12.2%;
}

.tile_16 {
  width: 12.4%;
  height: 12.4%;
}

.tile_23 {
  width: 12%;
  height: 12%;
}

/* =========================== */
.challenge-2 .tiles .tile_7,
.challenge-3 .tiles .tile_7 {
  width: 26%;
  height: 26%;
}

.challenge-2 .tiles .tile_8,
.challenge-3 .tiles .tile_8 {
  width: 25.6%;
  height: 25.6%;
}

.challenge-2 .tiles .tile_10,
.challenge-3 .tiles .tile_10 {
  width: 25.6%;
  height: 25.6%;
}

.challenge-2 .tiles .tile_13,
.challenge-3 .tiles .tile_13 {
  width: 25.6%;
  height: 25.6%;
}

.challenge-2 .tiles .tile_14,
.challenge-3 .tiles .tile_14 {
  width: 25.8%;
  height: 25.8%;
}

.challenge-2 .tiles .tile_15,
.challenge-3 .tiles .tile_15 {
  width: 26%;
  height: 26%;
}

.challenge-2 .tiles .tile_16,
.challenge-3 .tiles .tile_16 {
  width: 26%;
  height: 26%;
}

.challenge-2 .tiles .tile_18,
.challenge-3 .tiles .tile_18 {
  width: 25.6%;
  height: 25.6%;
}

.challenge-2 .tiles .tile_19,
.challenge-3 .tiles .tile_19 {
  width: 25.6%;
  height: 25.6%;
}

.tile_.challenge-2 .tiles .tile_21,
.challenge-3 .tiles .tile_21 {
  width: 25.8%;
  height: 25.8%;
}

.challenge-2 .tiles .tile_22,
.challenge-3 .tiles .tile_22 {
  width: 25.6%;
  height: 25.6%;
}

/* =========================== */
.tile_1,
.drop-zone_1 {
  top: 68%;
  left: 0%;
}

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

.tile_3,
.drop-zone_4 {
  top: 68%;
  left: 29%;
}

.tile_4,
.drop-zone_4 {
  top: 68%;
  left: 42%;
}

.tile_5,
.drop-zone_5 {
  top: 68%;
  left: 58.5%;
}

.tile_6,
.drop-zone_6 {
  top: 68%;
  left: 71.5%;
}

.tile_7,
.drop-zone_7 {
  top: 68%;
  left: 88%;
}

.tile_8,
.drop-zone_8 {
  top: 68%;
  left: 101%;
}

.tile_9,
.drop-zone_9 {
  top: 81%;
  left: 0%;
}

.tile_10,
.drop-zone_10 {
  top: 81%;
  left: 13%;
}

.tile_11,
.drop-zone_11 {
  top: 81%;
  left: 29%;
}

.tile_12,
.drop-zone_12 {
  top: 81%;
  left: 42%;
}

.tile_13,
.drop-zone_13 {
  top: 81%;
  left: 58.5%;
}

.tile_14,
.drop-zone_14 {
  top: 81%;
  left: 71.5%;
}

.tile_15,
.drop-zone_15 {
  top: 81%;
  left: 88%;
}

.tile_16,
.drop-zone_16 {
  top: 81%;
  left: 101%;
}

.tile_17,
.drop-zone_17 {
  top: 94%;
  left: 0%;
}

.tile_18,
.drop-zone_18 {
  top: 94%;
  left: 13%;
}

.tile_19,
.drop-zone_19 {
  top: 94%;
  left: 29%;
}

.tile_20,
.drop-zone_20 {
  top: 94%;
  left: 42%;
}

.tile_21,
.drop-zone_21 {
  top: 94%;
  left: 58.5%;
}

.tile_22,
.drop-zone_22 {
  top: 94%;
  left: 71.5%;
}

.tile_23,
.drop-zone_23 {
  top: 94%;
  left: 88%;
}

.tile_24,
.drop-zone_24 {
  top: 94%;
  left: 101%;
}

.challenge-2 .tile_1 {
  left: -68%;
  top: -6%;
}

.challenge-2 .tile_2 {
  left: -35%;
  top: -6%;
}

.challenge-2 .tile_3 {
  left: -51%;
  top: 60%;
}

.challenge-2 .tile_4 {
  left: -18%;
  top: 60%;
}

.challenge-2 .tile_5 {
  left: 135%;
  top: -6%;
}

.challenge-2 .tile_6 {
  left: 166%;
  top: -6%;
}

.challenge-2 .tile_7 {
  left: 120%;
  top: 60%;
}

.challenge-2 .tile_8 {
  left: 151%;
  top: 60%;
}

.challenge-2 .tile_9 {
  left: -51%;
  top: 16%;
}

.challenge-2 .tile_10 {
  left: -20%;
  top: 16%;
}

.challenge-2 .tile_11 {
  left: -68%;
  top: 80%;
}

.challenge-2 .tile_12 {
  left: -35%;
  top: 80%;
}

.challenge-2 .tile_13 {
  left: 120%;
  top: 16%;
}

.challenge-2 .tile_14 {
  left: 151%;
  top: 16%;
}

.challenge-2 .tile_15 {
  left: 135%;
  top: 80%;
}

.challenge-2 .tile_16 {
  left: 166%;
  top: 80%;
}

.challenge-2 .tile_17 {
  left: -68%;
  top: 38%;
}

.challenge-2 .tile_18 {
  left: -35%;
  top: 38%;
}

.challenge-2 .tile_19 {
  left: -51%;
  top: 99%;
}

.challenge-2 .tile_20 {
  left: -18%;
  top: 99%;
}

.challenge-2 .tile_21 {
  left: 135%;
  top: 38%;
}

.challenge-2 .tile_22 {
  left: 166%;
  top: 38%;
}

.challenge-2 .tile_23 {
  left: 119%;
  top: 99%;
}

.challenge-2 .tile_24 {
  left: 151%;
  top: 99%;
}

/* =========== */
.challenge-3 .tile_1 {
  left: -68%;
  top: -6%;
}

.challenge-3 .tile_2 {
  left: -35%;
  top: -6%;
}

.challenge-3 .tile_3 {
  left: -51%;
  top: 60%;
}

.challenge-3 .tile_4 {
  left: -18%;
  top: 60%;
}

.challenge-3 .tile_5 {
  left: 135%;
  top: -6%;
}

.challenge-3 .tile_6 {
  left: 166%;
  top: -6%;
}

.challenge-3 .tile_7 {
  left: 120%;
  top: 60%;
}

.challenge-3 .tile_8 {
  left: 151%;
  top: 60%;
}

.challenge-3 .tile_9 {
  left: -51%;
  top: 16%;
}

.challenge-3 .tile_10 {
  left: -20%;
  top: 16%;
}

.challenge-3 .tile_11 {
  left: -68%;
  top: 80%;
}

.challenge-3 .tile_12 {
  left: -35%;
  top: 80%;
}

.challenge-3 .tile_13 {
  left: 120%;
  top: 16%;
}

.challenge-3 .tile_14 {
  left: 151%;
  top: 16%;
}

.challenge-3 .tile_15 {
  left: 135%;
  top: 80%;
}

.challenge-3 .tile_16 {
  left: 166%;
  top: 80%;
}

.challenge-3 .tile_17 {
  left: -68%;
  top: 38%;
}

.challenge-3 .tile_18 {
  left: -35%;
  top: 38%;
}

.challenge-3 .tile_19 {
  left: -51%;
  top: 99%;
}

.challenge-3 .tile_20 {
  left: -18%;
  top: 99%;
}

.challenge-3 .tile_21 {
  left: 135%;
  top: 38%;
}

.challenge-3 .tile_22 {
  left: 166%;
  top: 38%;
}

.challenge-3 .tile_23 {
  left: 119%;
  top: 99%;
}

.challenge-3 .tile_24 {
  left: 151%;
  top: 99%;
}

/*==========  tiles end  ==========*/

/*==========  tiles start  ==========*/
.drop-zones {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 70 / 70;
  width: calc(100% / 3.3);
  display: flex;
  pointer-events: none;
}

.drop-zone {
  position: absolute;
  width: 27.14%;
  height: 27.14%;
  transform: translate(-50%, -50%) scale(1);
  cursor: pointer;
}

/*==========  tiles end  ==========*/

path,
polygon {
  pointer-events: all;
  cursor: pointer;
}

path[fill="transparent"][stroke="transparent"] {
  pointer-events: none;
}

path[fill="transparent"],
path[stroke="transparent"] {
  pointer-events: none;
}

.challenge-2 .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="2"]) .pagination-text {
  width: 45vw;
}

.header .you-win {
  top: 52px;
}

/*=======================*/
#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;
}

.roundo-loader-piece {
  position: absolute;
  width: 40%;
  height: 40%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.puzzle-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.roundo-loader {
  position: relative;
  width: 250px;
  height: 250px;
}

.roundo-loader-piece svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* starting positions */
.piece-a {
  left: 50%;
  top: 50%;
}

.piece-b {
  left: 9%;
  top: 0%;
}

.piece-c {
  left: 91%;
  top: 0%;
}

.piece-d {
  left: 50%;
  top: 105%;
}

/* Animations */
.roundo-loader .piece-a {
  animation: roundo-piece-a 1.2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.roundo-loader .piece-b {
  animation: roundo-piece-b 1.2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.roundo-loader .piece-c {
  animation: roundo-piece-c 1.2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.roundo-loader .piece-d {
  animation: roundo-piece-d 1.2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

/* A -rotation only */
@keyframes roundo-piece-a {

  0%,
  20% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  40% {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  70% {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

/* B */
@keyframes roundo-piece-b {

  0%,
  20% {
    left: 9%;
    top: 0%;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  /* Turn */
  40% {
    left: 9%;
    top: 0%;
    transform: translate(-50%, -50%) rotate(-60deg);
  }

  /* Movement */
  70% {
    left: 28%;
    top: 42%;
    transform: translate(-50%, -50%) rotate(-60deg);
  }

  /* Return */
  85% {
    left: 9%;
    top: 0%;
    transform: translate(-50%, -50%) rotate(-60deg);
  }

  /* reverse turn */
  100% {
    left: 9%;
    top: 0%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

/* C */
@keyframes roundo-piece-c {

  0%,
  20% {
    left: 91%;
    top: 0%;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  40% {
    left: 91%;
    top: 0%;
    transform: translate(-50%, -50%) rotate(60deg);
  }

  70% {
    left: 72%;
    top: 42%;
    transform: translate(-50%, -50%) rotate(60deg);
  }

  85% {
    left: 91%;
    top: 0%;
    transform: translate(-50%, -50%) rotate(60deg);
  }

  100% {
    left: 91%;
    top: 0%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

/* D */
@keyframes roundo-piece-d {

  0%,
  20% {
    left: 50%;
    top: 105%;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  40% {
    left: 50%;
    top: 105%;
    transform: translate(-50%, -50%) rotate(180deg);
  }

  70% {
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%) rotate(180deg);
  }

  85% {
    left: 50%;
    top: 105%;
    transform: translate(-50%, -50%) rotate(180deg);
  }

  100% {
    left: 50%;
    top: 105%;
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

/*======================*/
.mobile.wrapper .playfield {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mobile .tiles {
  position: absolute;
  top: 51%;
  left: 50%;
  transform: translate(-50%, 0%);
  aspect-ratio: 70 / 70;

}

.mobile .challenge-content.active {
  position: absolute;
  top: 0%;
  transform: translate(-50%, 0%);
  width: 100%;
  display: block;
  height: 50%;
  left: 50%;
}

.mobile.challenge-2 .tiles,
.mobile.challenge-3 .tiles {
  top: 50%;

}

.mobile .tile {
  display: block;

}

.mobile.wrapper .playfield {

  display: block;

}

/*======================*/
.mobile .tile_1 {
  z-index: 1;
  left: 5.711%;
  top: 11.201%;
}

.mobile .tile_2 {
  z-index: 2;
  left: 22.942%;
  top: 11.852%;
}

.mobile .tile_3 {
  z-index: 13;
  left: 5.685%;
  top: 56.005%;
}

.mobile .tile_4 {
  z-index: 8;
  left: 22.122%;
  top: 34.279%;
}

.mobile .tile_5 {
  z-index: 17;
  left: 76.277%;
  top: 56.278%;
}

.mobile .tile_6 {
  z-index: 14;
  left: 22.171%;
  top: 55.423%;
}

.mobile .tile_7 {
  z-index: 20;
  left: 21.686%;
  top: 77.092%;
}

.mobile .tile_8 {
  z-index: 22;
  left: 59.596%;
  top: 76.947%;
}

.mobile .tile_9 {
  z-index: 3;
  left: 40.032%;
  top: 12.006%;
}

.mobile .tile_10 {
  z-index: 4;
  left: 59.077%;
  top: 13.036%;
}

.mobile .tile_11 {
  z-index: 10;
  left: 58.166%;
  top: 34.474%;
}

.mobile .tile_12 {
  z-index: 9;
  left: 39.762%;
  top: 33.558%;
}

.mobile .tile_13 {
  z-index: 16;
  left: 57.938%;
  top: 55.522%;
}

.mobile .tile_14 {
  z-index: 18;
  left: 95.036%;
  top: 57.047%;
}

.mobile .tile_15 {
  z-index: 19;
  left: 5.381%;
  top: 77.651%;
}

.mobile .tile_16 {
  z-index: 24;
  left: 95.523%;
  top: 77.627%;
}

.mobile .tile_17 {
  z-index: 5;
  left: 75.16%;
  top: 12.716%;
}

.mobile .tile_18 {
  z-index: 6;
  left: 94.102%;
  top: 12.708%;
}

.mobile .tile_19 {
  z-index: 11;
  left: 75.521%;
  top: 35.166%;
}

.mobile .tile_20 {
  z-index: 12;
  left: 94.644%;
  top: 34.575%;
}

.mobile .tile_21 {
  z-index: 15;
  left: 39.819%;
  top: 55.353%;
}

.mobile .tile_22 {
  z-index: 7;
  left: 5.384%;
  top: 33.293%;
}

.mobile .tile_23 {
  z-index: 21;
  left: 39.746%;
  top: 77.366%;
}

.mobile .tile_24 {
  z-index: 23;
  left: 76.884%;
  top: 77.655%;
}

@media (max-width: 767px) {

  .mobile.wrapper.challenge-1,
  .mobile.wrapper.challenge-2,
  .mobile.wrapper.challenge-3 {
    height: 80dvh;
    padding: 0;
  }

  .mobile.wrapper .main {
    height: 88dvh;
  }
}

.mobile.wrapper .tile {
  width: 26%;
  height: 26%;
}

.mobile.challenge-1 .header,
.mobile.challenge-2 .header {
  margin-bottom: 40px;

}

.mobile.challenge-3 .header {
  margin-bottom: 42px;

}