* {margin: 0; padding: 0; box-sizing: border-box; font-family: "Lato", sans-serif; font-size: 16px;}
::after, ::before {box-sizing: border-box;}
ul, ol {list-style: none;}
a {text-decoration: none;}
img {width: 100%; vertical-align: bottom;}
button {border: none; cursor: pointer;}

body {min-height: 100vh; background-color: #1E201D; background-image: url(/images/bg-01.png); background-size: cover;} 
h3 {color: #fff; font-size: 18px; line-height: 28px; margin-bottom: 20px;}
h3 span {display: inline-block; color: #BECE5C; font-size: 18px;}

.container {width: 100%; max-width: 1224px; margin: 0 auto;display: flex; align-items: center; min-height: 100vh;}
.desc-text p {font-size: 14px; line-height: 23px; color: rgba(255, 255, 255, 0.4)}
.desc-text p + p {margin-top: 12px;}

/* Header */
header {position: fixed; top: 0; left: 0; right: 0; display: none}
.navbar {display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 60px;}
.navbar a {color: #fff}
.logotype {width: 203px;}
ul.navbar-center {display: flex; gap: 60px}
ul.navbar-center a {text-transform: uppercase; font-weight: 700; letter-spacing: 1px;}
ul.navbar-right {display: flex; align-items: center; gap: 15px; flex-shrink: 0;}
img.invite {width: 125px;}
a.login {display: block; height: 45px; text-transform: uppercase; letter-spacing: 1px; padding: 12px 30px; border: 1px solid #fff; font-weight: 700;}

/*  Game */
.game-wrap {display: block; border: 1px solid rgba(255,255,255,0.5); background-color: rgba(255, 255, 255, 0.05); filter: backdrop-filter(2px); border-radius: 50px; padding: 74px 100px 40px; margin: 50px auto ; position: relative;}

/* Progressbar */
.game-header {height: 2px; margin-bottom: 80px; position: relative; z-index: 1;}
#progress {display: block; width: 0; height: 100%; position: absolute; left: 0; top: 0; background-color: #fff; border-radius: 1px; transition: 0.3s;}
ul.progressbar {display: flex; height: 2px; background-color: rgba(255,255,255,0);  position: relative;}
ul.progressbar li {flex: 100% 1 1; position: relative; background: linear-gradient(to right, transparent 3px, rgba(255,255,255,0.2) 3px, rgba(255,255,255,0.2) calc(100% - 3px), transparent calc(100% - 3px));}
ul.progressbar li:last-child {flex: 1px 0 0;} 
ul.progressbar li:before {content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background-color:rgba(255,255,255,0.2); position: absolute; left: -3px; top: -2px;}
ul.progressbar li.active:before {background-color: rgba(255,255,255,1); transition: 0s ease-in-out 0.2s;}
p.step-desc {font-size: 13px; color: rgba(255,255,255,0.5); text-wrap: nowrap; position: absolute; left: 0; top: 20px;}
.step-btn {display: block; width: 48px; height: 48px; position: absolute; bottom: 8px; left: -18px; font-size: 0; background-color: transparent; background-image: url(/images/gift.svg); background-repeat: no-repeat; background-position: center; background-size: auto 24px;}
ul.progressbar li.active .step-btn {background-image: url(/images/gift-active.svg);}
.step-btn:hover ~ .step-modal {visibility: visible; opacity: 1;}
ul.progressbar li.active .step-btn::before { content: ''; display: block; width: 0px; height: 0px; border-radius: 50%; background-color: #BACA1B; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; animation: gift 0.5s 1 ease-in-out;}
.step-modal {display: block; width: 200px; padding: 20px; border-radius: 30px; background-color: #fff; position: absolute; top: -8px; left: -100px; visibility: hidden; opacity: 0; transition: 0.3s ease; z-index: 1;}
.step-modal::after {content: ''; display: block; width: 8px; height: 8px; background-color: #fff; position: absolute; top: -4px; left: calc(50% - 4px); transform: rotateZ(45deg);}
.step-modal img {margin-bottom: 16px;}
.step-modal p {font-size: 13px; line-height: 18px; text-align: center; color: #1E201D}
.currentLevel {display: block; padding: 5px 10px; border-radius: 15px; background-color: rgba(255, 255, 255, 0.1); position: absolute; bottom: 20px; left: -10px; font-size: 13px; color: #fff;    text-wrap: nowrap;}
.currentLevel span {font-size: 13px;}
@keyframes gift {
  from { width: 0; height: 0; opacity: 1;}
  to {width: 120px; height: 120px; opacity: 0;}
}

/* Game body */
.game-body {display: flex; justify-content: space-between}
.game-task, .game-info {display: block; width: calc(30% - 14px); background-color: #1E201D; border-radius: 50px; padding: 32px; min-height: 500px;}
.game-action {display: block; width: calc(40% - 14px);
border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50px; padding: 20px;}

.game-task {display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.game-task::before, .game-task::after {content: ''; display: block; width: 24px; height: 24px; border-radius: 50%; background-image: url(/images/coin.png); background-size: cover; position: absolute; left: 44px; top: 44px; animation: shake 2s ease-in-out infinite; opacity: 0; transition: 0.6s;}
.game-task.bonus::before {left: calc(100% - 66px); top: calc(100% - 68px); opacity: 1; transition: 0s;}
.game-task.bonus::after {left: 42px; top: calc(100% - 68px); opacity: 1; transition: 0s;}
@keyframes shake {
  0%, 40%, 60%, 100% { transform: translate(0, 0); }
  45% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  55% { transform: translate(-1px, 1px); }
}
.game-task-header {display: flex; gap: 12px; align-items: center; padding-right: 32px; margin-bottom: 32px; position: relative;}
.game-task-header img {width: 48px;}
p.coins {font-size: 24px; line-height: 1; color: #fff; font-weight: 600; margin-bottom: 8px;}
p.coins-desc {font-size: 12px; line-height: 1; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); font-weight: 600;}
a.inform {display: block; width: 48px; height: 48px; padding: 12px; border-radius: 50%; position: absolute; right: -12px; top: -12px; opacity: 0.3; transition: 0.2s;}
a.inform:hover {background-color: rgba(255, 255, 255, 0.05); opacity: 1;}

button.game-start {width: 100%; height: 48px; border-radius: 24px; flex-shrink: 0; background: radial-gradient(100% 400% at 0% 0%, #9DA716 0%, #6E8539 100%); box-shadow: inset 0px 1px 2px #BACA1B; font-size: 16px; line-height: 24px; text-align: center; color: #FFFFFF; text-shadow: -1px -1px 1px #708638, 1px 1px 1px #A6B01A; transition: 0.3s;}
button.game-start.disable {background: rgba(255,255,255, 0.05); box-shadow: none; text-shadow: none}
button.game-start:hover {box-shadow: inset 0px 1px 80px #BACA1B;}
button.game-start.disable:hover {box-shadow: none; pointer-events: none}

.game-info img {border-radius: 26px; margin: -8px -8px 16px; width: calc(100% + 16px);}

/* Game nav */
.game-nav button {font-size: 0; background-color: rgba(255, 255, 255, 0); width: 48px; height: 48px; border-radius: 50px; position: relative; position: absolute; top: 50%;}
.game-nav button.prev-level {left: 24px;}
.game-nav button.next-level {right: 24px;}
.game-nav button:hover {background-color: rgba(255, 255, 255, 0.05);}
.game-nav button::before {content: ''; display: block; width: 12px; height: 12px; border-width: 1px 1px 0 0; border-color: rgba(255, 255, 255, 0.4); border-style: solid; position: absolute; top: 18px; left: 15px; transform: rotateZ(45deg);}
.game-nav button.prev-level::before {transform: rotateZ(-135deg); left: 20px;}

/* Game 01 */
.action-wrap {background-color: rgba(30, 32, 29, 0.25); border-radius: 40px;}
.game-one {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.game-one-count {display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 32px;}
.game-one-count img {display: block; width: 23px;}
.game-one-count p {font-size: 24px; line-height: 1; color: #fff; font-weight: 600;padding-right: 30px;}
.game-one-area {display: flex; justify-content: center; align-items: center; flex: 100% 1 1; position: relative; user-select: none;}
.game-one-area img {display: block; width: 186px; transition: transform 0.3s ease, filter 0.3s ease;}
.game-one-area img.clicked {animation: plant-click 0.2s ease;}
.game-one-area span {pointer-events: none; color: #fff}
p.game-one-timer {text-align: center; font-size: 16px; line-height: 1; color: #fff; padding: 32px;}
@keyframes plant-click {
  0% {
    transform: scale(1);
    filter: brightness(100%);
  }
  30% {
    transform: scale(1.05) rotate(-2deg);
    filter: brightness(120%);
  }
  60% {
    transform: scale(1.05) rotate(2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(100%);
  }
}

/* Game 02 */
.game-two {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.game-two-count {display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 32px;}
.game-two-count img {display: block; width: 23px;}
.game-two-count p {font-size: 24px; line-height: 1; color: #fff; font-weight: 600;padding-right: 30px;}
.game-two-area {display: flex; justify-content: center; align-items: center; flex: 100% 1 1; position: relative; user-select: none;}
.game-two-area span {position: absolute; text-align: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.05); color: #fff; user-select: none; cursor: pointer;}
p.game-two-timer {text-align: center; font-size: 16px; line-height: 1; color: #fff; padding: 32px;}


/* Game 03 */
.game-three {display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 32px 32px 16px;}
.game-three-head {display: flex; justify-content: space-between;}
p.game-three-count {font-size: 36px; line-height: 1; color: #fff; font-weight: 500;padding-right: 30px;}
p.game-three-timer {text-align: right; padding-right: 8px; font-size: 16px; line-height: 1; color: #fff;}
.game-three-area {display: flex; justify-content: center; align-items: center; flex: 260px 0 0; margin-bottom: 60px; position: relative;}
.maze-wrap {display: block; width: 260px; height: 260px; border-radius: 50%; position: relative;
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 70%);
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 70%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.maze-wrap img {display: block; width: 600px; height: 600px; position: absolute; top: 50%; left: 50%;}
.maze-wrap::before {content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);} 
.btn-arrow {display: block; width: 48px; height: 48px; border-radius: 16px; background-color: rgba(255, 255, 255, 0.05); background-image: url(/images/arrow.svg); background-position: center; background-repeat: no-repeat; font-size: 0; color: transparent}
.btn-arrow:hover {background-color: rgba(255, 255, 255, 0.1);}
.game-three-area .btn-arrow {position: absolute;}
.game-three-area .btn-arrow.top {top: -40px; left: 50%; transform: translateX(-50%) rotateZ(180deg);}
.game-three-area .btn-arrow.bottom {bottom: -40px; left: 50%; transform: translateX(-50%);}
.game-three-area .btn-arrow.left {top: 50%; left: -16px; transform: translateY(-50%) rotateZ(90deg);}
.game-three-area .btn-arrow.right {top: 50%; right: -16px; transform: translateY(-50%) rotateZ(-90deg);}
.game-three-lower {display: flex; align-items: center; justify-content: center; gap: 12px;}
.game-three-lower span {color: rgba(255, 255, 255, 0.5)}
.game-three-lower span.dot {display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #000; position: relative;}
.game-three-lower span.dot.red {background-color: crimson;}
.game-three-lower span.dot.blue {background-color: dodgerblue;}
.game-three-lower span.dot.green {background-color: forestgreen;}
.game-three-lower span.dot.active::before {content: ''; display: block; width: 5px; height: 9px; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; transform: rotateZ(45deg); position: absolute; top: 4px; left: 7px;}