strong {
    font-weight: 700;
}

img, svg {
    display: block;
    margin: 0;
    outline: none;
    width: 100%;
    height: auto;
    position: relative;
}

/* typo */
.neon-h1 {
    display: block;
    margin: 0;
    padding: 0;
    letter-spacing: 0.05em;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;

    color: #1DD0F9;

    text-shadow: 0 0 10px rgba(162, 89, 255, 0.7);
}

/**/

/* layout */
#landscape-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

html[data-orientation="landscape"] #app {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

html[data-orientation="landscape"] #landscape-warning {
    display: block;
}

#app {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: auto;
    position: relative;
}

.game--stage {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 1;
    transition: opacity 0.8s ease-out;
    z-index: 1;
}

.wrapper {
    z-index: 2;
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 60px 30px 30px;
}

.safe-area {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 50px 30px 30px;
    max-width: 1024px;
    margin: auto;
    /*border: 2px dotted white;*/
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    max-width: 580px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/**/

#playground--timer,
#playground--help {
    visibility: visible;
    z-index: 9;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.3s ease-out, visibility 0s, z-index 0s;
}

.help-popup,
.timer-popup,
.about-popup {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 5;
    transition: opacity 0.4s ease-in-out;
}

.menu-drawer,
.missions-drawer {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    transition: transform 0.4s ease-in-out;
    transform: translateX(0) skewX(0);
    z-index: 5;
}

.missions--items {
    display: flex;
    margin: auto;
    max-width: 280px;
    align-items: center;
    flex-wrap: wrap;
}

.mission--item--col {
    width: 50%;
    padding: 5px;
}

.mission--item {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    border-radius: 8px;
}

.mission--item[data-rel-mission="plastic"] {
    background-color: rgba(0, 163, 255, 0.3);
}

.mission--item[data-rel-mission="paper"] {
    background-color: rgba(0, 255, 148, 0.3);
}

.mission--item[data-rel-mission="metal_glass"] {
    background-color: rgba(211, 242, 255, 0.3);
}

.mission--item[data-rel-mission="compost"] {
    background-color: rgba(226, 255, 47, 0.3);
}

.mission--item[data-rel-mission="dangerous"] {
    background-color: rgba(255, 109, 63, 0.3);
}

.mission--item[data-rel-mission="big"] {
    background-color: rgba(255, 37, 233, 0.3);
}

.mission--item[data-state="processing"] {
    background-color: rgba(255, 255, 255, 0.16);
}

.mission--item[data-state="locked"] {
    background-color: rgba(255, 255, 255, 0.08);
}

.mission--item--image {
    display: block;
    position: absolute;
    width: 100%;
    height: 70px;
    top: 40%;
    margin-top: -35px;
}

.mission--item--image img {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: contain;
}

.mission--item--lock {
    display: none;
    width: 9%;
    position: absolute;
    top: 10%;
    left: 10%;
}

.mission--item[data-state="locked"] .mission--item--image--processing{
    display: block;
}

.mission--item[data-state="processing"] .mission--item--image--done,
.mission--item[data-state="done"] .mission--item--image--done {
    display: block;
}

.mission--item[data-state="locked"] .mission--item--lock {
    display: block;
}

.mission--item[data-rel-mission="big"][data-state="processing"] {
    background-color: rgba(255, 255, 255, 0.16);
}


.mission--item[data-rel-mission="big"][data-state="processing"] .mission--item--image--done{
    display: block;
}

.mission--item--title {
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: block;
    color: #FFFFFF;
}

.missions--progress {
    display: block;
    width: 100%;
    max-width: 250px;
    margin: auto;
    margin-top: 30px;
    position: relative;
}

.mission--progress--bar {
    transform: translateX(-100%);
}

.mission--progress--bar {
    transition: transform 1s ease-in-out 2s;
}

.missions--progress--score {
    display: block;
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 20px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.missions--progress--title {
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 1;
    text-align: right;
    text-transform: uppercase;
    color: #FFFFFF;
    display: block;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}

.playground--help {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    overflow: hidden;
    opacity: 1;
    top: 0;
    left: 0;
}

.playground--help.active {
    visibility: visible;
    z-index: 3;
    pointer-events: auto;
    opacity: 1;
}

.about--wrapper {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    top: 0;
    left: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #006DD2 0%, #140E4F 100%);
}

/* home */

.preloader {
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.2s;
}

.preloader--bar {
    display: block;
    width: 100px;
    margin: auto;
}

.preloader--filler,
#preloader--filler {
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 22px;
    stroke-dasharray: 250;
    /*stroke-dashoffset: 250;*/
    /*transition: stroke-dashoffset 0.4s;*/
}

.preloader-enter, .preloader-leave-to {
    opacity: 0;
}

.preloader-leave, .preloader-enter-to {
    opacity: 1;
}

.home--logo--wrapper {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.home--logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
}

.home--logo--swirl {
    width: 100%;
    top: 0;
    object-fit: cover;
    position: absolute;
    left: 0;
    transform-origin: 50% 50%;
    animation: swirl 10s linear infinite both;
}

.home--logo img, .home--logo--swirl img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes swirl {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(90deg) scale(0.9);
    }
    50% {
        transform: rotate(180deg) scale(1);
    }
    75% {
        transform: rotate(270deg) scale(0.9);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/**/

.finish--spaceman {
    display: block;
    width: 80px;
    height: auto;
    position: absolute;
    top: -3%;
    left: 60%;
    animation: result--spaceman 4s ease-in-out infinite both;
    z-index: 0;
}

@keyframes result--spaceman {

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

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

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

.assets--preloader {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .5s;
    position: absolute;
    z-index: 5;
}

.assets--preloader.active {
    opacity: 1;
    transition: none;
}

.outro--slide,
.intro--slide {
    height: 100%;
    position: relative;
    /*padding: 0 30px;*/
    display: flex;
    align-items: center;
}

.intro--slide--image img {
    object-fit: cover;
    object-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
}

#intro--slides:after {
    content: '';
    display: block;
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    z-index: 1;
    position: absolute;
    background: linear-gradient(180deg, rgba(16, 20, 83, 0) 0%, rgba(0, 17, 107, 0.8) 100%, rgba(27, 57, 129, 0.8) 100%);
}

.intro--slide--image[data-rel-slide] {
    transition: opacity 0.4s ease-out;
    opacity: 0;
}

#intro--slides[data-slide="0"] [data-rel-slide="0"],
#intro--slides[data-slide="1"] [data-rel-slide="1"],
#intro--slides[data-slide="2"] [data-rel-slide="2"],
#intro--slides[data-slide="3"] [data-rel-slide="3"] {
    opacity: 1;
}

.outro--slide--image,
.intro--slide--image {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: no-repeat center/cover;
}

.outro--slide--text,
.intro--slide--text {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 15%;
    /*left: 50%;*/
    transform: translateY(50%);
    text-align: center;
    z-index: 2;
    left: 0;
    /*padding: 0 30px;*/
    /*max-width: 500px;*/
}

.intro--slide--text,
.outro--slide--text {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.swiper-slide-active .intro--slide--text,
.swiper-slide-active .outro--slide--text {
    opacity: 1;
}

.swiper--navigation {
    display: block;
    width: 100%;
    max-width: 950px;
    height: 1px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 2;
}

.swiper-wrapper {
    transition-timing-function: linear;
}

.tutorial--slide {
    display: flex;
    align-items: center;
}

.tutorial--slide:not(.swiper-slide-active) {
    opacity: 0 !important;
    z-index: -1;
}

.tutorial--gameplay--image {
    width: 100px;
    display: block;
    margin: auto;
    opacity: 0.7;
}

.swiper-slide-active .tip--animation-1 {
    animation: tip--animation-1 10s infinite both;
}

.swiper-slide-active .tip--animation-2 {
    animation: tip--animation-2 10s infinite both 2.5s;
}

.swiper-slide-active .tip--animation-3 {
    animation: tip--animation-3 10s infinite both 5s;
}

.swiper-slide-active .tip--animation-4 {
    animation: tip--animation-4 10s infinite both 7.5s;
}

.swiper-slide-active .tip--animation-5 {
    animation: tip--animation-5 6s infinite both;
}

@keyframes tip--animation-1 {

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

    15% {
        transform: translate(-27%, -58%);
    }

    25% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes tip--animation-2 {

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

    15% {
        transform: translate(32%, -56%);
    }

    25% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes tip--animation-3 {

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

    15% {
        transform: translate(10%, -64%);
    }

    25% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes tip--animation-4 {

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

    15% {
        transform: translate(0%, -52%);
    }

    25% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes tip--animation-5 {

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

    20% {
        transform: translate(-6%, -35%);
    }

    30% {
        transform: translate(0%, 0);
    }

    50% {
        transform: translate(0%, 0);
    }

    70% {
        transform: translate(6%, 35%);
    }

    80% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}


.swiper--navigation--button {
    display: block;
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    background: no-repeat center/contain;
}

.swiper--next {
    right: 10px;
    background-image: url(/assets/arrow-right.png);
    animation: swiper--next 1s infinite ease-in-out both;
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

.swiper--prev {
    left: 10px;
    background-image: url(/assets/arrow-left.png);
    animation: swiper--prev 1s infinite ease-in-out both;
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

.swiper--next.disabled,
.swiper--prev.disabled {
    opacity: 0;
}


@keyframes swiper--next {
    0% {
        transform: translate(0, -50%);
    }
    50% {
        transform: translate(10px, -50%);
    }
    100% {
        transform: translate(0, -50%);
    }
}

@keyframes swiper--prev {
    0% {
        transform: translate(0, -50%);
    }
    50% {
        transform: translate(-10px, -50%);
    }
    100% {
        transform: translate(0, -50%);
    }
}

.outro--monsters {
    display: block;
    position: relative;
    width: 230px;
    height: 230px;
    margin-top: -115px;
    margin-left: -115px;
    transform-origin: 50% 50%;
    border-radius: 50%;
    animation: outro--monsters 60s linear infinite both;
}

@keyframes outro--monsters {

    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.outro--monster {
    display: block;
    width: 120px;
    height: 120px;
    position: absolute;
    transform: translate(-50%, -50%);
    animation: outro--monster 60s linear infinite both;
    transform-origin: 50% 50%;
}

@keyframes outro--monster {

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

.outro--monster--wrapper {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleY(1);
    transform-origin: 50% 90%;
    animation: monster--breathe 3s ease-in-out infinite both;
}

.final--title {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    margin-bottom: 50px;

    color: #B370FF;
}

.outro--slide.swiper-slide-active .outro--slide--text {
    opacity: 1;
}

.outro--monster img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(0.25);
    transition: transform 0.3s ease-in, opacity 0.2s ease-in;
}

#outro--monsters[data-state="0"] .outro--monster--img {
    opacity: 1;
    transform: scale(1);
}

#outro--monsters[data-state="1"] .outro--egg--img {
    opacity: 1;
    transform: scale(1);
}

#outro--monsters[data-state="2"] .outro--new--img {
    opacity: 1;
    transform: scale(1);
}

.mission--background {
    z-index: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

[data-mission="plastic"] .mission--background {
    background: linear-gradient(180deg, #00B5C0 0%, #001738 100%);
}

[data-mission="paper"] .mission--background {
    background: linear-gradient(180deg, #00B172 0%, #01153A 100%);
}

[data-mission="metal_glass"] .mission--background {
    background: linear-gradient(180deg, #6A92A4 0%, #000C35 100%);
}

[data-mission="compost"] .mission--background {
    background: linear-gradient(180deg, #8E9C3A 0%, #2D002E 100%);
}

[data-mission="dangerous"] .mission--background {
    background: linear-gradient(180deg, #BD2D2D 0%, #1A1344 100%);
}

[data-mission="big"] .mission--background {
    background: linear-gradient(180deg, #D845B7 0%, #2B0974 100%);
}

/*.mission--tutorial {*/
/*    display: block;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    visibility: hidden;*/
/*    z-index: -1;*/
/*    pointer-events: none;*/
/*}*/

/*[data-mission="plastic"] [data-tutorial="plastic"],*/
/*[data-mission="paper"] [data-tutorial="paper"],*/
/*[data-mission="metal_glass"] [data-tutorial="metal_glass"],*/
/*[data-mission="compost"] [data-tutorial="compost"],*/
/*[data-mission="dangerous"] [data-tutorial="dangerous"],*/
/*[data-mission="big"] [data-tutorial="big"] {*/
/*    visibility: visible;*/
/*    z-index: 1;*/
/*    pointer-events: auto;*/
/*}*/

.tutorial--monster--image {
    display: block;
    position: relative;
    margin: auto;
    padding-bottom: 80%;
    width: 100%;
}

.tutorial--monster--image img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    object-position: center;
    object-fit: contain;
    transform-origin: 50% 100%;
    animation: tutorial--monster 1s ease-in-out alternate infinite;
}

@keyframes tutorial--monster {
    0% {
        transform: skewX(-1deg);
    }

    100% {
        transform: skewX(1deg);
    }
}

.tutorial--monster--image:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%) scale(0.2);
    z-index: 0;
}

.swiper-slide-active .tutorial--monster--image:before {
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.4s ease-out;
}

.tutorial--monster--image img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
    object-position: center;
}

.tutorial--text {
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
}

.tutorial--text p {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    text-align: center;

    color: #FFFFFF;
}

.timer--block {
    position: relative;
    overflow: hidden;
    margin: 0;
    text-align: center;
    padding: 40px 20px 20px 20px;
}

.timer--block--img {
    display: block;
    max-width: 100px;
    margin: 0 auto 30px;
}

.timer--block p {
    /* Text */
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;

}

.timer--block p:last-child {
    margin-bottom: 0;
}

.details--block {
    height: 100%;
    position: relative;
    overflow: hidden;
}


.details--block:before,
.details--block:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    z-index: 2;
}

.details--block:before {
    top: 0;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #006CD1 0%, rgba(2, 99, 196, 0) 100%);
}

.details--block:after {
    bottom: 0;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, rgba(18, 24, 93, 0) 0%, #130E4F 100%);
}

.scroller--bar {
    position: absolute;
    display: block;
    width: 3px;
    background-color: rgba(255, 255, 255, 0.2);
    top: 10%;
    right: 10px;
    height: 80%;
}

.scroller--bar span {
    display: block;
    width: 100%;
    height: 30px;
    border-radius: 3px;
    background-color: #fff;
}

[data-mission="plastic"] .details--block,
[data-mission="plastic"] .timer--block {
    background: linear-gradient(180deg, #00B4BF 0%, #006B81 100%);
}

[data-mission="plastic"] .details--block:before {
    background: linear-gradient(180deg, #00B4BF 0%, rgba(0, 172, 184, 0) 100%);
}

[data-mission="plastic"] .details--block:after {
    background: linear-gradient(180deg, rgba(0, 114, 135, 0) 0%, #006B81 100%);
}

[data-mission="paper"] .details--block,
[data-mission="paper"] .timer--block {
    background: linear-gradient(180deg, #00B172 0%, #005F7D 100%);
}

[data-mission="paper"] .details--block:before {
    background: linear-gradient(180deg, #00B072 0%, rgba(0, 168, 115, 0) 100%);
}

[data-mission="paper"] .details--block:after {
    background: linear-gradient(180deg, rgba(0, 103, 124, 0) 0%, #005F7D 100%);
}

[data-mission="metal_glass"] .details--block,
[data-mission="metal_glass"] .timer--block {
    background: linear-gradient(180deg, #6A92A4 0%, #2F4867 100%);
}

[data-mission="metal_glass"] .details--block:before {
    background: linear-gradient(180deg, #6991A3 0%, rgba(100, 138, 157, 0) 100%);
}

[data-mission="metal_glass"] .details--block:after {
    background: linear-gradient(180deg, rgba(53, 80, 109, 0) 0%, #304867 100%);
}

[data-mission="compost"] .details--block,
[data-mission="compost"] .timer--block {
    background: linear-gradient(180deg, #8E9C3A 0%, #5C4B34 100%);
}

[data-mission="compost"] .details--block:before {
    background: linear-gradient(180deg, #8E9B3A 0%, rgba(136, 147, 57, 0) 100%);
}

[data-mission="compost"] .details--block:after {
    background: linear-gradient(180deg, rgba(97, 83, 52, 0) 0%, #5C4B33 100%);
}

[data-mission="dangerous"] .details--block,
[data-mission="dangerous"] .timer--block {
    background: linear-gradient(180deg, #D32B2B 0%, #681F39 100%);
}

[data-mission="dangerous"] .details--block:before {
    background: linear-gradient(180deg, #D32B2B 0%, rgba(200, 42, 44, 0) 100%);
}

[data-mission="dangerous"] .details--block:after {
    background: linear-gradient(180deg, rgba(112, 32, 55, 0) 0%, #681F39 100%);
}

[data-mission="big"] .details--block,
[data-mission="big"] .timer--block {
    background: linear-gradient(180deg, #EE45C8 0%, #7E2398 100%);
}

[data-mission="big"] .details--block:before {
    background: linear-gradient(180deg, #ED45C8 0%, rgba(226, 65, 195, 0) 100%);
}

[data-mission="big"] .details--block:after {
    background: linear-gradient(180deg, rgba(137, 38, 157, 0) 0%, #7E2398 100%);
}


.details--block p {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    text-align: center;

    color: #FFFFFF;
}

.details--block .h2 {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    margin-top: 40px;

    text-align: center;
    text-transform: uppercase;

    color: #FFFFFF;
}

.details--block img {
    display: block;
    margin: 15px auto;
}

.game--stage--footer {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 0 25px 15px;
    z-index: 3;
}

.--hide-on-last-slide,
.--show-on-last-slide {
    display: none;
}

.--hide-on-last-slide.active,
.--show-on-last-slide.active {
    display: block;
}

.playground {
    position: relative;
    height: 100%;
    width: 100%;
}

.playground.changing-out,
.playground.changing-in{
    pointer-events: none;
}

.playground.changing-out .monster--slot {
    transform: scale(0.25);
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.2s 0.1s;
}

.playground.changing-out .trash--slot {
    opacity: 0;
    transition: opacity 0.2s 0.1s;
}

.playground.changing-in .monster--slot {
    transform: scale(1);
    opacity: 1;
    transition: transform 0.3s ease-in-out, opacity 0.2s 0.1s;
}

.playground.changing-in .trash--slot {
    opacity: 1;
    transition: opacity 0.2s 0.1s;
}

.monster--slot {
    display: block;
    position: absolute;
    transition: transform 0.1s ease-out;
}

.monster--slot img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
    transform-origin: 50% 90%;
    animation: monster--breathe 3s ease-in-out infinite both;
}

@keyframes monster--breathe {
    0% {
        transform: scaleY(1);
    }
    40% {
        transform: scaleY(1.1);
    }
    80% {
        transform: scaleY(1);
    }
}

.monster--slot:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1%;
    height: 1%;
    border-radius: 50%;
    z-index: 0;
    /* RED shadow */

    opacity: 0;
    transform: scale(1);
}

.monster--slot.correct:before {
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

.monster--slot.incorrect:before {
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

#find--mission .monster--slot {
    top: 5%;
    left: 50%;
}

#big--mission .monster--slot {
    margin: 0;
}

#big--mission .monster--slot.monster--top {
    top: 0;
    right: 0;

    animation: monster--right--left 10s linear infinite both;
    animation-play-state: running;
}

#big--mission .monster--slot.monster--bottom {
    bottom: 0;
    left: 0;

    animation: monster--left--right 10s infinite both;
    animation-play-state: running;
}

#big--mission .trash--slot {
    top: 50%;
    left: 50%;
    margin-left: -38px;
    margin-top: -38px;
}

@keyframes monster--right--left {

    0% {
        right: 0;
        transform: translateX(0);
        animation-timing-function: ease-in-out;
    }

    50% {
        right: 100%;
        transform: translateX(100%);
        animation-timing-function: ease-in-out;
    }

    100% {
        right: 0;
        transform: translateX(0px);
        animation-timing-function: ease-in-out;
    }
}

@keyframes monster--left--right {

    0% {
        left: 0;
        transform: translateX(0);
        animation-timing-function: ease-in-out;
    }

    50% {
        left: 100%;
        transform: translateX(-100%);
        animation-timing-function: ease-in-out;
    }

    100% {
        left: 0;
        transform: translateX(0px);
        animation-timing-function: ease-in-out;
    }
}

.trash--slot {
    display: block;
    position: absolute;
    width: 76px;
    height: 76px;
    z-index: 1;
}

.trash--slot.transition {
    transition: transform 0.2s ease-out;
}

/*.trash--slot.active {*/
/*    transition: none;*/
/*    z-index: 3;*/
/*}*/

.trash--slot.moving {
    transition: none;
    z-index: 3;
}

.trash--slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
    z-index: 1;
    position: relative;
    /*transform: scale(0.25);*/
}

.trash--slot.active img {
    /*transform: scale(1);*/
    /*transition: transform 0.2s ease-out;*/
}

.trash--slot:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1%;
    height: 1%;
    background: #FF005C;
    border-radius: 50%;
    z-index: 0;
    /* RED shadow */

    box-shadow: 0 0 50px 40px #FF005C;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.trash--slot.incorrect:after {
    opacity: 1;
}


.placement--1 .trash--slot.slot-1 {
    left: 24%;
    top: 62.73%;
}

.placement--1 .trash--slot.slot-2 {
    left: 50.73%;
    bottom: 33%;
}

.placement--1 .trash--slot.slot-3 {
    left: 80.32%;
    bottom: 25.73%;
}

.placement--1 .trash--slot.slot-4 {
    left: 29%;
    bottom: 4%;
}

.placement--1 .trash--slot.slot-5 {
    left: 50.75%;
    bottom: 6%;
}

.placement--1 .trash--slot.slot-6 {
    left: 76.75%;
    bottom: 8.45%;
}

.placement--2 .trash--slot.slot-1 {
    left: 25%;
    top: 54.73%;
}

.placement--2 .trash--slot.slot-2 {
    left: 55%;
    bottom: 33%;
}

.placement--2 .trash--slot.slot-3 {
    left: 71.32%;
    bottom: 26%;
}

.placement--2 .trash--slot.slot-4 {
    left: 32%;
    bottom: 13%;
}

.placement--2 .trash--slot.slot-5 {
    left: 50.75%;
    bottom: 3%;
}

.placement--2 .trash--slot.slot-6 {
    left: 72.75%;
    bottom: 11%;
}

.placement--3 .trash--slot.slot-1 {
    left: 26%;
    top: 52.73%;
}

.placement--3 .trash--slot.slot-2 {
    left: 62%;
    bottom: 33%;
}

.placement--3 .trash--slot.slot-3 {
    left: 80.32%;
    bottom: 17.73%;
}

.placement--3 .trash--slot.slot-4 {
    left: 22%;
    bottom: 16%;
}

.placement--3 .trash--slot.slot-5 {
    left: 40.75%;
    bottom: 3%;
}

.placement--3 .trash--slot.slot-6 {
    left: 64.75%;
    bottom: 4%;
}

.placement--1 .trash--slot.slot-1 img {
    transform: rotate(10deg);
}

.placement--1 .trash--slot.slot-2 img {
    transform: rotate(-12deg);
}

.placement--1 .trash--slot.slot-3 img {
    transform: rotate(-8deg);
}

.placement--1 .trash--slot.slot-4 img {
    transform: rotate(8deg);
}

.placement--1 .trash--slot.slot-5 img {
    transform: rotate(-10deg);
}

.placement--1 .trash--slot.slot-6 img {
    transform: rotate(12deg);
}

.placement--2 .trash--slot.slot-1 img {
    transform: rotate(-10deg);
}

.placement--2 .trash--slot.slot-2 img {
    transform: rotate(12deg);
}

.placement--2 .trash--slot.slot-3 img {
    transform: rotate(8deg);
}

.placement--2 .trash--slot.slot-4 img {
    transform: rotate(-8deg);
}

.placement--2 .trash--slot.slot-5 img {
    transform: rotate(10deg);
}

.placement--2 .trash--slot.slot-6 img {
    transform: rotate(-12deg);
}

.placement--3 .trash--slot.slot-1 img {
    transform: rotate(8deg);
}

.placement--3 .trash--slot.slot-2 img {
    transform: rotate(-10deg);
}

.placement--3 .trash--slot.slot-3 img {
    transform: rotate(12deg);
}

.placement--3 .trash--slot.slot-4 img {
    transform: rotate(-12deg);
}

.placement--3 .trash--slot.slot-5 img {
    transform: rotate(10deg);
}

.placement--3 .trash--slot.slot-6 img {
    transform: rotate(-8deg);
}

.playground--tip--button {
    display: block;
    height: auto;
    position: absolute;
    z-index: 2;
}

#playground--tip--button--bg {
    fill: #7876FF;
    transition: fill 0.2s ease-out;
}

.playground--tip--button.incorrect #playground--tip--button--bg {
    fill: #FF006B;
}

.close--button {
    display: block;
    background: url(/assets/close-button.svg) no-repeat center top/contain;
    position: absolute;
    z-index: 2;
}

.mission--result .mission--score {
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 80px;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1DD0F9;
    text-shadow: 0 0 15px #A259FF;
    position: relative;
}

.mission--result .h2 {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    margin-top: 30px;

    text-align: center;
    text-transform: uppercase;

    color: #FFFFFF;
}

.mission--result .text {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    margin-top: 30px;
    text-align: center;

    color: #FFFFFF;
    display: block;
}

.mission--result--footer {
    display: block;
    margin-top: 50px;
}

.bg {
    background: no-repeat center bottom/cover;
    z-index: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bg img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.swipe-gesture {
    display: block;
    width: 100%;
    margin-top: 70px;
}

.swipe-gesture--icon {
    display: block;
    width: 50px;
    height: auto;
    margin: auto;
    margin-bottom: 15px;
}

.swiper-slide-active .swipe-gesture--icon {
    animation: swipe-gesture 2s infinite both ease-out;
}

.swipe-gesture--text {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 15px;
    text-align: center;

    color: #FFFFFF;
}

@keyframes swipe-gesture {
    0% {
        transform: translateX(20px);
    }
    30% {
        transform: translateX(-20px);
    }
    100% {
        transform: translateX(20px);
    }
}

.scroll--wrapper {
    width: 50%;
    padding: 30px 25px 30px 20px;
    position: relative;
    z-index: 1;
}

.scroll--container {
    height: 100%;
    width: 200%;
    overflow: auto;
    /*scroll-behavior: smooth;*/
}

.outro--slide--text p,
.intro--slide--text p {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}

.btn {
    display: flex;
    position: relative;
    border: none;
    background-color: transparent;
    outline: none;
    box-shadow: none;
    margin: 2px auto;
    align-items: center;
}

.btn span {
    display: inline-block;
    width: 100%;
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #FFFFFF;
    z-index: 2;
    position: relative;
    border: none;
    outline: none;
}

.btn:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: no-repeat center/contain;
    z-index: 1;
}

.btn-5 {
    position: relative;
    border: none;
    background-color: transparent;
    outline: none;
    box-shadow: none;
    margin: 2px auto;
    align-items: center;
}

.btn-1:before {
    background-image: url('/assets/button-1.png');
}


.btn-2:before {
    background-image: url('/assets/button-2.png');
}


.btn-3:before {
    background-image: url('/assets/button-3.png');
}


.btn-4:before {
    background-image: url('/assets/button-4.png');
}

.btn-5:before {
    background-image: url('/assets/button-2.png');
}

.btn-6:before {
    background-image: url('/assets/button-5.png');
}

.header--menu--button {
    display: block;
    position: absolute;
    height: auto;
    z-index: 5;
}

[data-stage="game-over"] .header--menu--button {
    display: none;
}

.popup--close {
    display: block;
    position: absolute;
    height: auto;
    z-index: 2;
}

.share-btn {
    display: block;
    width: 65px;
    height: 45px;
    outline: none;
    box-shadow: none;
    border: none;
    background: no-repeat center/contain;
}

.fb-btn {
    background-image: url(/assets/fb-btn.svg);
}

.viber-btn {
    background-image: url(/assets/viber-btn.svg);
}

.telegram-btn {
    background-image: url(/assets/telegram-btn.svg);
}

.game-over--title {
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 34px;
    line-height: 36px;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: #1DD0F9;

    text-shadow: 0px 0px 10px rgba(162, 89, 255, 0.7);
}

.game-over--result-description {
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 17px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-top: 30px;
}

.share--title {
    font-family: 'Russo One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: #FFFFFF;
    margin-top: 30px;
    margin-bottom: 30px;
}

.game-over--title,
.game-over--result-description {
    display: none;
}

[data-game-result="1"] [data-rel-game-result="1"],
[data-game-result="2"] [data-rel-game-result="2"],
[data-game-result="3"] [data-rel-game-result="3"] {
    display: block;
}

/* transitions */
.stage-change-enter, .stage-change-leave-to {
    opacity: 0;
}

.stage-change-leave, .stage-change-enter-to {
    opacity: 1;
}

.missions-enter, .missions-leave-to {
    transform: translateX(130%) skewX(15deg);
}

.missions-enter-to, .missions-leave {
    transform: translateX(0) skewX(0deg);
}

.menu-enter, .menu-leave-to {
    transform: translateX(-130%) skewX(-15deg);
}

.menu-enter-to, .menu-leave {
    transform: translateX(0) skewX(0deg);
}

.popup-enter, .popup-leave-to {
    opacity: 0;
}

.popup-enter-to, .popup-leave {
    opacity: 1;
}

/* */