/* ================================= 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%) rotateY(0deg);
  transition: transform 350ms ease;
  aspect-ratio: 70 / 70;
  width: calc(100% / 2.3);
  /* width: 100%; */
  display: flex;
}

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

/*==========  tiles start  ==========*/
.mobile .tiles {
  top: 65%;
}

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

.tile {
  position: absolute;
  /* width: 16.2%;
  width: 37.5%;
  aspect-ratio: 70 /70; */
  width: 37.18%;
  height: 37.18%;
  /* aspect-ratio: 70 /70; */
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  cursor: default;
  z-index: 5;
}

.tile_1,
.drop-zone_1 {
  top: 15%;
  left: -59%;
}

.tile_2,
.drop-zone_2 {
  top: 7%;
  left: -18%;
  width: 47%;
  height: 47%;
}

.tile_3,
.drop-zone_3 {
  top: 33%;
  left: -43%;
}

.tile_4,
.drop-zone_4 {
  top: 40%;
  left: -20%;
}

.tile_5,
.drop-zone_5 {
  top: 63%;
  left: -59%;
  width: 46.35%;
  height: 46.35%;
}

.tile_6,
.drop-zone_6 {
  top: 65%;
  left: -25%;
}

.tile_7,
.drop-zone_7 {
  top: 86%;
  left: -51%;
}

.tile_8,
.drop-zone_8 {
  top: 91%;
  left: -21%;
}

.tile_9,
.drop-zone_9 {
  top: 18%;
  left: 115%;
}

.tile_10,
.drop-zone_10 {
  top: 7%;
  left: 127%;
}

.tile_11,
.drop-zone_11 {
  top: 14%;
  left: 143%;
}

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

.tile_13,
.drop-zone_13 {
  top: 41%;
  left: 145%;
}

.tile_14,
.drop-zone_14 {
  top: 67%;
  left: 141%;
}

.tile_15,
.drop-zone_15 {
  top: 82%;
  left: 119%;
}

.tile_16,
.drop-zone_16 {
  top: 91%;
  left: 146%;
}

/*==========  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  ==========*/

/* The main thing is these two lines: */
/* .tile svg .g {
  pointer-events: none;
}
.tile svg .path {
  cursor: pointer;
  pointer-events: all;
} */
path,
polygon {
  pointer-events: all;
  cursor: pointer;
}

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

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

/* ============================== */
/* ====================== */
.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: 65%;
  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);
  }

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

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

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

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

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

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

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

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

.mobile .main {
  flex: unset;
}

.mobile .footer {
  display: none;
}

.mobile .tile {
  width: 43%;
  height: 43%;
}

.mobile .tile_1 {
  left: 50%;
  top: 12.325%;
}

.mobile .tile_2 {
  left: 22.832%;
  top: -3.142%;
  width: 55%;
  height: 55%;
}

.mobile .tile_3 {
  left: 38.698%;
  top: 29.028%;
}

.mobile .tile_4 {
  left: 51.836%;
  top: 47.779%;
}

.mobile .tile_5 {
  left: -9.084%;
  top: 49.8%;
  width: 55%;
  height: 55%;
}

.mobile .tile_6 {
  left: 19.307%;
  top: 51.286%;
}

.mobile .tile_7 {
  left: 2.585%;
  top: 18.229%;
}

.mobile .tile_8 {
  left: -1.477%;
  top: -9.848%;
}

.mobile .tile_9 {
  left: 19.718%;
  top: 29.763%;
}

.mobile .tile_10 {
  left: 29.652%;
  top: 13.771%;
}

.mobile .tile_11 {
  left: 71.291%;
  top: 3.146%;
}

.mobile .tile_12 {
  left: 100.82%;
  top: 22.499%;
}

.mobile .tile_13 {
  left: 100.884%;
  top: -4.242%;
}

.mobile .tile_14 {
  left: 71.337%;
  top: 21.796%;
}

.mobile .tile_15 {
  left: 101.749%;
  top: 46.661%;
}

.mobile .tile_16 {
  left: 73.164%;
  top: 51.291%;
}

#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 ====================== */
.svg-mobile {
  display: none;
}

.svg-desktop {
  display: flex;
}

@media (max-width: 767px) {
  .svg-mobile {
    display: flex;
  }

  .svg-desktop {
    display: none;
  }

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

  .wrapper .playfield {
    transform: translate(-50%, 0%);
  }

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

/*================================*/
/*=======================*/
#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 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(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: 42%;
    top: 45%;
    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: 63%;
    top: 43%;
    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(0deg);
  }

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

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

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

/*======================*/
.mobile .tile_1 {
  transform: translate(-50%, -50%) rotateY(0deg) rotate(60deg) translateY(0px);
  z-index: 342;
  left: 55.629%;
  top: 70.448%;
}

.mobile .tile_2 {
  left: 60.553%;
  top: 33.107%;
}

.mobile .tile_3 {
  transition: none;
  transform: translate(-50%, -50%) rotateY(0deg) rotate(60deg);
  left: 85.5%;
  top: -2.256%;
}

.mobile .tile_4 {
  transform: translate(-50%, -50%) rotateY(0deg) rotate(300deg) translateY(0px);
  z-index: 332;
  left: 29.984%;
  top: 60.673%;
}

.mobile .tile_5 {
  transform: translate(-50%, -50%) rotate(300deg);
  left: 50%;
  top: 14.762%;
}

.mobile .tile_6 {
  transform: translate(-50%, -50%) rotateY(0deg) rotate(60deg) translateY(0px);
  z-index: 308;
  left: 10.464%;
  top: 55.027%;
}

.mobile .tile_7 {
  left: 39.7%;
  top: 44.121%;
}

.mobile .tile_8 {
  transform: translate(-50%, -50%) rotateY(0deg) rotate(60deg);
  z-index: 304;
  left: 15.627%;
  top: 1.292%;
}

.mobile .tile_9 {
  transform: translate(-50%, -50%) rotateY(0deg) rotate(180deg) translateY(0px);
  z-index: 306;
  left: 15.59%;
  top: 30.004%;
}

.mobile .tile_10 {
  left: 50.058%;
  top: 49.643%;
}

.mobile .tile_11 {
  left: 60.542%;
  top: 21.23%;
}

.mobile .tile_12 {
  transform: translate(-50%, -50%) rotateY(0deg) rotate(240deg) translateY(0px);
  z-index: 340;
  left: 60.449%;
  top: 56.153%;
}

.mobile .tile_13 {
  transform: translate(-50%, -50%) rotate(120deg);
  left: 79.743%;
  top: 21.608%;
}

.mobile .tile_14 {
  left: 79.684%;
  top: 44.653%;
}

.mobile .tile_15 {
  transform: translate(-50%, -50%) rotate(180deg);
  left: 30.905%;
  top: 26.761%;
}

.mobile .tile_16 {
  left: 79.747%;
  top: 67.107%;
}

@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: 89dvh;
  }
}

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

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

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

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

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

.challenge-content.active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  height: 20%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

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

.mobile.wrapper .tiles {
  transform: translate(-50%, 0%);
  top: 50%;
}
.wrapper
  .pagination-link-wrapper:has(.pagination-btn.active[data-challenge="2"])
  .pagination-text {
  width: 40vw;
}