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

/*==========  playfields start  ==========*/
.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% / 2.8);
  /* width: calc(100% /3); */
  display: flex;
}

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

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

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

.tile {
  position: absolute;
  width: 46.06%;
  height: 46.06%;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  cursor: default;
  z-index: 5;
}

.tile_1,
.drop-zone_1 {
  top: 76%;
  left: 171%;
}

.tile_2,
.drop-zone_2 {
  top: 90%;
  left: -26%;
}

.tile_3,
.drop-zone_3 {
  top: 4%;
  left: -75%;
}

.tile_4,
.drop-zone_4 {
  top: -4%;
  left: -25%;
}

.tile_5,
.drop-zone_5 {
  top: 61%;
  left: 131%;
}

.tile_6,
.drop-zone_6 {
  top: 4%;
  left: 134%;
  width: 54.24%;
  height: 54.24%;
}

.tile_7,
.drop-zone_7 {
  top: 52%;
  left: -38%;
}

.tile_8,
.drop-zone_8 {
  top: 0%;
  left: 184%;
}

.tile_9,
.drop-zone_9 {
  top: 85%;
  left: -73%;
}

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

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

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

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

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

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

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

.challenge-3 .tile_7 path,
polygon {
  pointer-events: none;
  cursor: auto;
}

.tile-label {
  position: absolute;
  background-color: transparent;
  color: transparent;
  padding: 0;
  font-size: 0px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  white-space: nowrap;
  top: 0;
  left: 0;
  /*position: absolute;
  background-color: transparent;
  color: #4c4c4c;
  text-align: center;
  padding: 6px 12px;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 500;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  top: 92%;
  left: 50%;*/
}

/*.tile_3 .tile-label {
  top: 109%;
}

.tile_6 .tile-label {
  top: 73%;
}*/

.tile-label.unvisible {
  opacity: 0;
}

.challenge-3 .tile_7 .tile-label {
  opacity: 0;
}

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

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

.mobile.challenge-2 .tiles {
  transform: translate(-50%, 0%);
}

.challenge-2 .tile {
  position: absolute;
  width: 36.4%;
  height: 36.4%;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  cursor: default;
  z-index: 5;
}

.challenge-2 .tile_1,
.challenge-2 .drop-zone_1 {
  top: 72%;
  left: 114%;
}

.challenge-2 .tile_2,
.challenge-2 .drop-zone_2 {
  top: 74%;
  left: -11%;
}

.challenge-2 .tile_3,
.challenge-2 .drop-zone_3 {
  top: 9%;
  left: -65%;
}

.challenge-2 .tile_4,
.challenge-2 .drop-zone_4 {
  top: 1%;
  left: -21%;
}

.challenge-2 .tile_5,
.challenge-2 .drop-zone_5 {
  top: 30%;
  left: 129%;
}

.challenge-2 .tile_6,
.challenge-2 .drop-zone_6 {
  top: 51%;
  left: 155%;
  width: 43%;
  height: 43%;
}

.challenge-2 .tile_7,
.challenge-2 .drop-zone_7 {
  top: 43%;
  left: -39%;
}

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

.challenge-2 .tile_9,
.challenge-2 .drop-zone_9 {
  top: 79%;
  left: -50%;
}

/* ============== */
.mobile .tile_1 {
  left: 50.132%;
  top: 16%;
}

.mobile .tile_2 {
  left: 21.267%;
  top: 64%;
}

.mobile .tile_3 {
  left: 27%;
  top: 23.51%;
}

.mobile .tile_4 {
  left: 17%;
  top: 33%;
}

.mobile .tile_5 {
  left: 78%;
  top: 15.707%;
}

.mobile .tile_6 {
  left: 58.904%;
  top: 40%;
}

.mobile .tile_7 {
  left: 88.5%;
  top: 32.5%;
}

.mobile .tile_8 {
  left: 74.599%;
  top: 64%;
}

.mobile .tile_9 {
  left: 50.303%;
  top: 64%;
}

/* ============== */
.mobile.challenge-2 .tile_1 {
  left: 44.162%;
  top: 39.015%;
}

.mobile.challenge-2 .tile_2 {
  left: 43.928%;
  top: 62.508%;
}

.mobile.challenge-2 .tile_3 {
  left: 12.68%;
  top: 17.808%;
}

.mobile.challenge-2 .tile_4 {
  left: 15.171%;
  top: 59.503%;
}

.mobile.challenge-2 .tile_5 {
  left: 76.147%;
  top: 41.337%;
}

.mobile.challenge-2 .tile_6 {
  left: 72.566%;
  top: 12.87%;
}

.mobile.challenge-2 .tile_7 {
  left: 40.793%;
  top: 10.965%;
}

.mobile.challenge-2 .tile_8 {
  left: 79.09%;
  top: 64.19%;
}

.mobile.challenge-2 .tile_9 {
  left: 24.394%;
  top: 35.768%;
}

.mobile.challenge-3 .tile_7 {
  left: 49.966%;
  top: -48.058%;
}

.challenge-3 .tile_7 {
  left: 50%;
  top: 55%;
}

.mobile .tile-label {
  display: none;
}

.tile .tile-label {
  user-select: none;
}

.challenge-2 .tile-label {
  transform: translate(-50%, -50%) rotate(-30deg);
  top: 90%;
  left: 75%;
}

.challenge-2 .tile_1 .tile-label {
  top: 92%;
  left: 75%;
}

.challenge-2 .tile_2 .tile-label {
  top: 90%;
  left: 75%;
}

.challenge-2 .tile_3 .tile-label {
  top: 100%;
  left: 77%;
}

.challenge-2 .tile_4 .tile-label {
  top: 100%;
  left: 69%;
}

.challenge-2 .tile_5 .tile-label {
  top: 85%;
  left: 70%;
}

.tile_5 .tile-label {
  top: 92%;
  left: 32%;
}

.challenge-2 .tile_6 .tile-label {
  transform: translate(-50%, -50%) rotate(30deg);
  top: 81%;
  left: 45%;
}

.challenge-2 .tile_7 .tile-label {
  top: 85%;
  left: 70%;
}

.challenge-2 .tile_8 .tile-label {
  transform: translate(-50%, -50%) rotate(30deg);
  top: 92%;
  left: 35%;
}

.tile_8 .tile-label {
  top: 92%;
  left: 59%;
}

.challenge-2 .tile_9 .tile-label {
  top: 103%;
  left: 67%;
}

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

.mobile.wrapper .pagination-link-wrapper-1,
.mobile.wrapper .pagination-link-wrapper-2,
.mobile.wrapper .pagination-link-wrapper-3 {
  z-index: 2;
}

.mobile.challenge-1 .pagination-link-wrapper-1 {
  z-index: 3;
}

.mobile.challenge-2 .pagination-link-wrapper-2 {
  z-index: 3;
}

.mobile.challenge-3 .pagination-link-wrapper-3 {
  z-index: 3;
}

/* ====================== 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: absolute;
  top: 0;
  left: 50%;
  /* important for translate(-50%, 0) */
  transform: translate(-50%, 0%);
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* added for better centering */
  aspect-ratio: unset;
}

/* Animation of "shaking leaves" -left-right with a small scale */
@keyframes shakeRotate {
  0% {
    transform: translate(-50%, 0%) rotate(0deg) scale(1);
  }

  15% {
    transform: translate(-50%, 0%) rotate(-14deg) scale(1.04);
  }

  35% {
    transform: translate(-50%, 0%) rotate(11deg) scale(1.02);
  }

  50% {
    transform: translate(-50%, 0%) rotate(-8deg) scale(1.03);
  }

  65% {
    transform: translate(-50%, 0%) rotate(7deg) scale(1.02);
  }

  80% {
    transform: translate(-50%, 0%) rotate(-5deg) scale(1.01);
  }

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

.mobile .playfields {
  position: relative;
  height: 82vh;
  /* min-height: 400px; */
  flex: unset;
  width: 100%;
}

.mobile .main {
  flex: unset;
}

.mobile .footer {
  display: none;
}

#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;
  }

  .modal-text-none {
    display: none;
  }

  /* 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-link-wrapper {
    width: 24px;
    height: 24px;
  }

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

  .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;
}

.mobile .plug,
.mobile .order-me-btn,
.mobile .prompt-wrapper,
.mobile .btn-to-index,
.mobile .footer-inner .footer {
  display: none;
}

.tile {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

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

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

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

.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;
}

/*=======================*/
#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%;
  transform: translate(-50%, -50%) rotate(30deg);
}

.piece-b {
  left: 9%;
  top: 0%;
  transform: translate(-50%, -50%) rotate(330deg);
}

.piece-c {
  left: 91%;
  top: 0%;
  transform: translate(-50%, -50%) rotate(30deg);
}

.piece-d {
  left: 50%;
  top: 105%;
  transform: translate(-50%, -50%) rotate(30deg);
}

/* 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 2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

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

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

/* A -rotation only */
@keyframes roundo-piece-a {
  0%,
  20% {
    transform: translate(-50%, -50%) rotate(30deg);
  }

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

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

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

/* B */
@keyframes roundo-piece-b {
  0%,
  20% {
    left: 9%;
    top: 0%;
    transform: translate(-50%, -50%) rotate(330deg);
  }

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

  /* Movement */
  70% {
    left: 34%;
    top: 29%;
    transform: translate(-50%, -50%) rotate(330deg);
  }

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

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

/* C */
@keyframes roundo-piece-c {
  0%,
  20% {
    left: 91%;
    top: 0%;
    transform: translate(-50%, -50%) rotate(30deg);
  }

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

  70% {
    left: 57%;
    top: 38%;
    transform: translate(-50%, -50%) rotate(30deg);
  }

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

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

/* D */
@keyframes roundo-piece-d {
  0%,
  20% {
    left: 50%;
    top: 105%;
    transform: translate(-50%, -50%) rotate(30deg);
  }

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

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

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

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

@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;
  }
}

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

.mobile.wrapper .playfield {
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  display: block;
}

.mobile .tiles {
  transform: translate(-50%, 0%);
  top: 54%;
}

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

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

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

.mobile.challenge-2 .header {
  margin-bottom: 70px;
}

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

.mobile.challenge-2 .tiles {
  transform: translate(-50%, 0%);
  top: 47%;
}
.wrapper
  .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="2"])
  .pagination-text.pagination-text-desktop-three-lines {
  display: none;
}
@media (min-width: 768px) {
  .wrapper
    .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="2"])
    .pagination-text.pagination-text-desktop {
    display: none;
  }
  .wrapper
    .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="2"])
    .pagination-text.pagination-text-desktop-three-lines {
    display: block;
  }
}
.wrapper
  .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="2"])
  .pagination-text {
  width: 38vw;
}
@media (min-width: 840px) {
  .wrapper
    .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="2"])
    .pagination-text.pagination-text-desktop {
    display: block;
  }
  .wrapper
    .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="2"])
    .pagination-text.pagination-text-desktop-three-lines {
    display: none;
  }
  .wrapper
    .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="2"])
    .pagination-text {
    width: 39vw;
  }
}