#app{
    height: 100%;
    min-height: 480px;
    position: relative;
    margin: auto;
    overflow: hidden;
    background: url('/assets/app-bg.jpg') no-repeat center/cover;
}

p:last-child {
    margin-bottom: 0;
}

img, svg {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.game--stage {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    transition: opacity 0.4s ease-out, z-index 0s 0.4s, visibility 0s 0.4s;
}

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

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


.popup-transition-enter, .popup-transition-leave-to{
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.popup-transition-leave, .popup-transition-enter-to{
    opacity: 1;
    transition: opacity 0.4s ease-out;
}

.preloader-transition-enter, .preloader-transition-leave-to{
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.preloader-transition-leave, .preloader-transition-enter-to{
    opacity: 1;
    transition: opacity 0.4s ease-out;
}


.wrapper {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.container {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: center;
    align-items: center;
}

.bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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


.preloader ellipse:nth-child(even){
    stroke-dasharray: 52;
    stroke-dashoffset: 0;
    animation: preloader-1 2s linear infinite;
}

.preloader ellipse:nth-child(odd){
    stroke-dasharray: 42;
    stroke-dashoffset: 0;
    animation: preloader-2 1s linear infinite;
}

@keyframes preloader-1{
    0%{
        stroke-dashoffset: 104;
    }
    100%{
        stroke-dashoffset: 0;
    }
}

@keyframes preloader-2{
    0%{
        stroke-dashoffset: 0;
    }
    100%{
        stroke-dashoffset: 84;
    }
}


.btn {
    display: block;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: none;
    margin: auto;
    padding: 0 10px;
    width: 16rem;
    height: 3.6rem;

}

.btn.btn-fb,
.btn.btn-viber,
.btn.btn-telegram {
    display: block;
    width: 8rem;
    height: 4rem;
}

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

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

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

.btn.btn-small {
    width: 13rem;
    height: 4rem;
}

.btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2rem;
    white-space: nowrap;

    color: #FFFFFF;
}

.btn.btn-small-font span {
    font-size: 1.2rem;
    line-height: 1;
}

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

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

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

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

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

.swiper--navigation--button {
    display: block;
    background: no-repeat center/contain;
    width: 40px;
    height: 66px;
    top: 50%;
    margin-top: -33px;
    z-index: 3;
    position: absolute;

    transition: opacity 0.2s ease-out;
}

.swiper--navigation--button:before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;

}

.swiper--next {
    background-image: url(/assets/swiper-next-bg.svg);
    right: 0;
}

.swiper--next:before{
    background: url(/assets/swiper-next-arrow.svg) no-repeat center/contain;
    animation: arrow-left-right 1s ease-in-out infinite both;
}

.swiper--prev {
    background-image: url(/assets/swiper-prev-bg.svg);
    left: 0;
}

.swiper--prev:before{
    background: url(/assets/swiper-prev-arrow.svg) no-repeat center/contain;
    animation: arrow-right-left 1s ease-in-out infinite both;
}

.swiper--navigation--button.disabled {
    opacity: 0;
    pointer-events: none;
}

@keyframes arrow-left-right{
    0%{
        transform: translateX(-20%);
    }
    50%{
        transform: translateX(20%);
    }
    100%{
        transform: translateX(-20%);
    }
}

@keyframes arrow-right-left{
    0%{
        transform: translateX(20%);
    }
    50%{
        transform: translateX(-20%);
    }
    100%{
        transform: translateX(20%);
    }
}

/* home */
.logo {
    display: block;
    max-width: 250px;
    margin: auto;
    margin-bottom: 7rem;
}

/**/

/* intro */
#intro--swiper {
    height: 100%;
    width: 100%;
    position: relative;
}

.intro--slide {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px;
}

.intro--text {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    background: #0A085A;
    opacity: 0.8;
    border-radius: 14px;
    color: #fff;
    padding: 15px;

}

.intro--text:before,
.intro--text:after {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 3%;
}

.intro--text:before {
    background-image: url(/assets/frame-top.png);
}

.intro--text:after {
    background-image: url(/assets/frame-bottom.png);
}

.intro--text p {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2rem;
    text-align: center;
    margin-bottom: 20px;

    color: #FFFFFF;
}

.intro--text {
    opacity: 0;
    transform: translate(-50%, 50%);
}

.swiper-slide-active .intro--text {
    opacity: 1;
    transform: translate(-50%, 0);
    transition: transform 0.4s ease-out, opacity 0.4s;
}

/* hero select */

#hero-select--swiper {
    height: 100%;
    width: 100%;
    position: relative;
}

.bg.hero-select-bg {
    width: 150%;
    transform: translateX(0);
    transition: transform 800ms ease-out;
}

[data-step="1"] .bg.hero-select-bg {
    transform: translateX(-8%);
}

[data-step="2"] .bg.hero-select-bg {
    transform: translateX(-16%);
}

[data-step="3"] .bg.hero-select-bg {
    transform: translateX(-24%);
}

[data-step="4"] .bg.hero-select-bg {
    transform: translateX(-32%);
}

.hero-select--slide {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 35px;
}

.hero-select--title {
    font-family: 'Zen Dots', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;

    display: block;
    text-transform: uppercase;

    color: #FFFFFF;

}

.hero-select--title span {
    display: inline-block;
    position: relative;
    padding: 1.2rem 6rem;

    background: url('/assets/title-bg.svg') no-repeat center;
    background-size: 100% 100%;
}

.hero-select--text {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.8rem;
    text-align: center;
    margin: auto;

    color: #FFFFFF;
}

.hero-select--image {
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
}

.hero-select--image img {
    transform-origin: 50% 100%;
    animation: hero--select 3s ease-in-out infinite forwards;
    position: absolute;
}

@keyframes hero--select {
    0% {
        transform: scaleY(1);
    }
    40% {
        transform: scaleY(1.02);
    }
    100% {
        transform: scaleY(1);
    }
}

.hero--profile {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.hero--profile--image{
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 60%;
}
/**/

/*training*/
#training--swiper {
    display: block;
    width: 100%;
    height: 100%;
}

.training--slide {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 35px;
    opacity: 0 !important;
}

.training--slide.swiper-slide-active {
    opacity: 1 !important;
}

.training--step {
    font-family: 'Zen Dots', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.2rem;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;

    color: #FFFFFF;
}

.training--title {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 25px;
    line-height: 26px;
    display: block;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 3rem;
    color: #FFFFFF;
}

.training--title span {
    display: inline-block;
    position: relative;
    padding: 1.2rem 6rem;

    background: url('/assets/title-bg.svg') no-repeat center;
    background-size: 100% 100%;
}

.training--description {
    display: block;
    background: #0A085A;
    opacity: 0.8;
    border-radius: 1.5rem;
    padding: 2rem;
    /*height: 100%;*/
    position: relative;
    width: 100%;
    /*max-height: 420px;*/
}

.frame--top,
.frame--bottom {
    display: block;
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 4%;
}

.frame--top {
    background-image: url(/assets/frame-top.png);
}

.frame--bottom {
    background-image: url(/assets/frame-bottom.png);
}

.training--text {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.8rem;
    text-align: center;

    color: #FFFFFF;
}

.bg.myst-2,
.bg.myst-1 {
    display: block;
    width: 130vh;
    height: 130vh;
    transform-origin: 50% 50%;
    top: 50%;
    left: 50%;
    opacity: 1;
    transition: opacity 600ms ease-out, transform 1s ease-out;
    transform: translate(-50%, -50%) rotate(0);
}

.bg.training-bg {
    transform: scale(2);
    transform-origin: 50% 50%;
    transition: transform 1s ease-out;
}

[data-step="1"] .bg.training-bg {
    transform: scale(2);
}

[data-step="2"] .bg.training-bg {
    transform: scale(1.85);
}

[data-step="3"] .bg.training-bg {
    transform: scale(1.70);
}

[data-step="4"] .bg.training-bg {
    transform: scale(1.55);
}

[data-step="5"] .bg.training-bg {
    transform: scale(1.4);
}

[data-step="6"] .bg.training-bg {
    transform: scale(1.25);
}

[data-step="7"] .bg.training-bg {
    transform: scale(1);
}

[data-step="1"] .bg.myst-1 {
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 0.85;
}

[data-step="1"] .bg.myst-2 {
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0.85;
}

[data-step="2"] .bg.myst-1 {
    transform: translate(-50%, -50%) rotate(-90deg);
    opacity: 0.70;
}

[data-step="2"] .bg.myst-2 {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0.70;
}

[data-step="3"] .bg.myst-1 {
    transform: translate(-50%, -50%) rotate(-135deg);
    opacity: 0.55;
}

[data-step="3"] .bg.myst-2 {
    transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0.55;
}

[data-step="4"] .bg.myst-1 {
    transform: translate(-50%, -50%) rotate(-180deg);
    opacity: 0.40;
}

[data-step="4"] .bg.myst-2 {
    transform: translate(-50%, -50%) rotate(180deg);
    opacity: 0.40;
}

[data-step="5"] .bg.myst-1 {
    transform: translate(-50%, -50%) rotate(-225deg);
    opacity: 0.25;
}

[data-step="5"] .bg.myst-2 {
    transform: translate(-50%, -50%) rotate(225deg);
    opacity: 0.25;
}

[data-step="6"] .bg.myst-1 {
    transform: translate(-50%, -50%) rotate(-270deg);
    opacity: 0.10;
}

[data-step="6"] .bg.myst-2 {
    transform: translate(-50%, -50%) rotate(270deg);
    opacity: 0.10;
}

[data-step="7"] .bg.myst-1 {
    transform: translate(-50%, -50%) rotate(-360deg);
    opacity: 0;
}

[data-step="7"] .bg.myst-2 {
    transform: translate(-50%, -50%) rotate(360deg);
    opacity: 0;
}

/**/

/*fight*/
/*.fight--enemy,*/
/*.fight--hero {*/
/*    display: block;*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 0;*/
/*    padding-bottom: 100%;*/
/*}*/

.fight--enemy, .fight--hero {
    display: block;
    position: absolute;
    width: 100%;
    height: 60%;
}

.fight--enemy img,
.fight--hero img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

.fight--hero img {
    object-fit: contain;
    object-position: left bottom;
}

.fight--enemy img {
    object-fit: cover;
    object-position: top center;
}


.fight--enemy {
    top: 0;
    right: -6rem;
    /*padding-bottom: 85%;*/

    transform: translateX(100%);
}

.fight--hero {
    bottom: 0;
    left: 0;

    transform: translateX(-100%);
}

.fight--vs {
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
    transform: translate(-50%, -50%);
    z-index: 2;
}

[data-state="intro"] .fight--vs{
    transform: translate(0, -50%);
    opacity: 1;
    transition: opacity 0.4s 0.6s, transform 0.4s 0.6s;
}

.fight--flash {
    display: block;
    width: 150%;
    height: 40%;
    top: 50%;
    left: 50%;
    position: absolute;

}

.fight--flash.fight--flash-1{
    transform: translate(-50%, -50%) rotate(-150deg);
    margin-top: 20px;
}

.fight--flash.fight--flash-2{
    transform: translate(-50%, -50%) rotate(-330deg);
    margin-top: -20px;
}


.fight--flash img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;

}

.fight--flash img:nth-child(1){ animation: fight--flash 0.6s ease-out infinite forwards; }
.fight--flash img:nth-child(2){ animation: fight--flash 0.9s 0.15s ease-out infinite forwards; }
.fight--flash img:nth-child(3){ animation: fight--flash 0.8s 0.3s ease-out infinite forwards; }
.fight--flash img:nth-child(4){ animation: fight--flash 1s 0.45s ease-out infinite forwards; }


@keyframes fight--flash {
    0%, 10%, 50% {
        opacity: 1;
    }
    20%, 60% {
        opacity: 0.5;
    }
}

/*@keyframes fight--flash-1 {*/
/*    0%, 10%, 50% {*/
/*        opacity: 1;*/
/*    }*/
/*    20%, 60% {*/
/*        opacity: 0.8;*/
/*    }*/
/*}*/


/*@keyframes fight--flash-2 {*/
/*    0%, 10%, 50% {*/
/*        opacity: 1;*/
/*    }*/
/*    20%, 60% {*/
/*        opacity: 0.8;*/
/*    }*/
/*}*/


/*@keyframes fight--flash-3 {*/
/*    0%, 10%, 50% {*/
/*        opacity: 1;*/
/*    }*/
/*    20%, 60% {*/
/*        opacity: 0.7;*/
/*    }*/
/*}*/
/*@keyframes fight--flash-4 {*/
/*    0%, 10%, 50% {*/
/*        opacity: 1;*/
/*    }*/
/*    20%, 60% {*/
/*        opacity: 0.7;*/
/*    }*/
/*}*/

.fight--enemy--title,
.fight--hero--title {
    display: block;
    text-align: center;
}

.fight--enemy--title span,
.fight--hero--title span {
    display: inline-block;
    position: relative;
    padding: 1.2rem 6rem;
    text-transform: uppercase;
    white-space: nowrap;

    color: #FFFFFF;
    font-family: 'Zen Dots', sans-serif;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1;

    background: url('/assets/title-bg.svg') no-repeat center;
    background-size: 100% 100%;
}

.fight--enemy--title {
    position: absolute;
    top: 25%;
    left: -4rem;
    z-index: 3;

    transform: translateX(-100%);
}

.fight--hero--title {
    position: absolute;
    bottom: 25%;
    right: -4rem;
    z-index: 3;
    transform: translateX(100%);
}

[data-state="intro"] .fight--enemy--title,
[data-state="intro"] .fight--enemy{
    transform: translateX(0);
    transition: transform 0.4s ease-out 1s;
}

[data-state="intro"] .fight--hero--title,
[data-state="intro"] .fight--hero{
    transform: translateX(0);
    transition: transform 0.4s ease-out 1s;
}

.fight--question {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60%;
    width: 100%;
    opacity: 1;
    background: linear-gradient(180deg, rgba(10, 10, 85, 0) 0%, #0A0A55 18.75%, #5A00B4 100%);
    transition: opacity 0.6s ease-out;
    padding: 60px 30px 30px;
}

.fight--answer {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60%;
    width: 100%;
    opacity: 1;
    transition: opacity 0.6s ease-out;
    padding: 60px 30px 30px;
}

[data-state="correct"] .fight--answer {
    background: linear-gradient(180deg, rgba(10, 10, 85, 0) 0%, #0A0A55 18.75%, #00977C 100%);
}

[data-state="incorrect"] .fight--answer {
    background: linear-gradient(180deg, rgba(10, 10, 85, 0) 0%, #0A0A55 18.75%, #9E007B 100%);
}

[data-state="intro"] .fight--question,
[data-state="intro"] .fight--answer,
[data-state="intro"] .fight--result,
[data-state="question"] .fight--hero,
[data-state="question"] .fight--flash,
[data-state="question"] .fight--vs,
[data-state="question"] .fight--hero--title,
[data-state="question"] .fight--answer,
[data-state="question"] .fight--result,
[data-state="correct"] .fight--hero,
[data-state="correct"] .fight--flash,
[data-state="correct"] .fight--vs,
[data-state="correct"] .fight--hero--title,
[data-state="correct"] .fight--question,
[data-state="correct"] .fight--result,
[data-state="incorrect"] .fight--hero,
[data-state="incorrect"] .fight--flash,
[data-state="incorrect"] .fight--vs,
[data-state="incorrect"] .fight--hero--title,
[data-state="incorrect"] .fight--question,
[data-state="incorrect"] .fight--result{
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0s 0.3s;
}

[data-state="question"] .fight--vs{
    transform: translateY(-50%);
}

[data-state="question"] .fight--enemy,
[data-state="correct"] .fight--enemy,
[data-state="incorrect"] .fight--enemy {
    right: 0;
    transition: right 0.6s ease-out;
    transform: none;
}

[data-state="question"] .fight--enemy img,
[data-state="correct"] .fight--enemy img,
[data-state="incorrect"] .fight--enemy img {
    transform-origin: 50% 100%;
    /*animation: fight--enemy 3s linear forwards infinite;*/
}

@keyframes fight--enemy {

    0% {
        transform: scaleY(1) skewX(0deg);
    }

    25% {
        transform: scaleY(1) skewX(2deg);
    }

    50% {
        transform: scaleY(1) skewX(0deg);
    }

    75% {
        transform: scaleY(1) skewX(-2deg);
    }

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

#correct-button,
#incorrect-button {
    display: none;
}

[data-state="correct"] #correct-button {
    display: block;
}

[data-state="incorrect"] #incorrect-button {
    display: block;
}

[data-state="question"] .fight--enemy--title,
[data-state="correct"] .fight--enemy--title,
[data-state="incorrect"] .fight--enemy--title {
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.6s ease-out;
}

.fight--question--step {
    font-family: 'Zen Dots', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: #FFFFFF;
}

.fight--question--text,
.fight--answer--text {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2rem;
    display: block;
    text-align: center;

    color: #FFFFFF;
}

.fight--question--text {
    font-size: 2rem;
    line-height: 2.4rem;
}

.fight--answer--text {
    font-size: 1.6rem;
    line-height: 1.8rem;
}

.fight--answer--title {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 2rem;
    line-height: 2rem;
    display: block;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 2rem;

    color: #FFFFFF;
}

.fight--result--title {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 2.4rem;
    line-height: 2.4rem;
    display: block;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 2rem;

    color: #FFFFFF;
}

.fight--result--text {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.8rem;
    display: block;
    align-items: center;
    text-align: center;
    margin-bottom: 4rem;

    color: #FFFFFF;
}

/**/

/* outro */

.outro--arc {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 3;
    transform-origin: 50% 100%;
}

.outro--arc--icon {
    display: block;
    position: absolute;
    width: 9.375%;
    background: no-repeat center/contain;
}

.outro--arc--icon--image {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    opacity: 0;
}

.outro--arc--icon.active .outro--arc--icon--image{
    opacity: 1;
}

.outro--arc--icon--image img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: contain;
}

.outro--arc--icon:first-child {
    left: 2%;
    top: 53%;
    background-image: url(/assets/arc-empty-5.png);
}
.outro--arc--icon:nth-child(2) {
    left: 8.5%;
    top: 37%;
    background-image: url(/assets/arc-empty-10.png);
}
.outro--arc--icon:nth-child(3) {
    left: 16.5%;
    top: 33.5%;
    background-image: url(/assets/arc-empty-4.png);
}
.outro--arc--icon:nth-child(4) {
    left: 23.5%;
    top: 34%;
    background-image: url(/assets/arc-empty-6.png);
}
.outro--arc--icon:nth-child(5) {
    left: 32%;
    top: 33%;
    background-image: url(/assets/arc-empty-8.png);
}
.outro--arc--icon:nth-child(6) {
    right: 32%;
    top: 33%;
    background-image: url(/assets/arc-empty-1.png);
}
.outro--arc--icon:nth-child(7) {
    right: 24%;
    top: 34%;
    background-image: url(/assets/arc-empty-9.png);
}
.outro--arc--icon:nth-child(8) {
    right: 16.5%;
    top: 33%;
    background-image: url(/assets/arc-empty-2.png);
}
.outro--arc--icon:nth-child(9) {
    right: 8.5%;
    top: 38%;
    background-image: url(/assets/arc-empty-7.png);
}
.outro--arc--icon:nth-child(10) {
    right: 2%;
    top: 53%;
    background-image: url(/assets/arc-empty-3.png);
}
.outro--arc--icon:nth-child(11) {
    left: 45%;
    top: 30%;
    background-image: url(/assets/arc-empty-11.png);
}

.outro--doors {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.outro--door--left,
.outro--door--right {
    display: block;
    position: absolute;
    top: 0;
    width: 60%;
    height: 100%;
}

.outro--door--left img,
.outro--door--right img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.outro--light {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    transform: translateX(-50%) scale(0, 2);
    z-index: 1;
    transform-origin: 50% 50%;
    opacity: 0;
}

.outro--light img {
    display: block;
    object-fit: fill;
}

.outro--door--left {
    object-position: center right;
    right: 46%
}

.outro--door--right {
    left: 46%;
    object-position: center left;
}

.outro--footer {
    display: block;
    position: absolute;
    bottom: 0;
    padding: 30px;
    width: 100%;
    opacity: 0;
    transition: opacity 0.2s;
}

.outro--stone {
    position: relative;
}

.outro--stone--icon {
    width: 14%;
    position: absolute;
    background: url(/assets/stone-empty-icon.png) no-repeat center/contain;
}

.outro--stone--icon.active {
    display: block;
    opacity: 1;
}

.outro--stone--icon--image {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    opacity: 0;
    padding-bottom: 100%;
    visibility: hidden;
}

.outro--stone--icon.active .outro--stone--icon--image {
    opacity: 1;
    visibility: visible;
}

.outro--stone--icon--image img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: contain;
}

.outro--stone--icon:first-child {
    top: 20.5%;
    left: 6%;
}

.outro--stone--icon:nth-child(2) {
    top: 20.5%;
    left: 20.5%;
}

.outro--stone--icon:nth-child(3) {
    top: 20.5%;
    left: 35%;
}

.outro--stone--icon:nth-child(4) {
    top: 20.5%;
    left: 50.5%;
}

.outro--stone--icon:nth-child(5) {
    top: 20.5%;
    left: 65.5%;
}

.outro--stone--icon:nth-child(6) {
    top: 20.5%;
    left: 80.5%;
}

.outro--stone--icon:nth-child(7) {
    top: 53.5%;
    left: 13%;
}

.outro--stone--icon:nth-child(8) {
    top: 53.5%;
    left: 28.5%;
}

.outro--stone--icon:nth-child(9) {
    top: 53.5%;
    left: 43.5%;
}

.outro--stone--icon:nth-child(10) {
    top: 53.5%;
    left: 58.5%;
}

.outro--stone--icon:nth-child(11) {
    top: 53.5%;
    left: 73%;
}

[data-state="closed"] .outro--footer {
    opacity: 1;
}

[data-state="preopened"] .outro--door--left {
    animation: preopen--left 1s 0.3s ease-out forwards;
}

[data-state="preopened"] .outro--door--right {
    animation: preopen--right 1s 0.3s ease-out forwards;
}

[data-state="preopened"] .outro--light {
    transition: opacity 0.4s ease-out 0.3s, transform 1s ease-out 0.3s;
    opacity: 1;
    transform: translateX(-50%) scale(2, 2);
}

[data-state="opened"] .outro--arc {
    transform: translateY(-100%) scale(1.2);
    transition: transform 2s ease-in 0.3s;
}

[data-state="opened"] .outro--door--left {
    animation: open--left 2s 0.3s ease-in forwards;
}

[data-state="opened"] .outro--door--right {
    animation: open--right 2s 0.3s ease-in forwards;
}

@keyframes preopen--left {
    0% {
        transform: translateX(0);
    }
    95% {
        transform: translateX(-12%);
    }
    100% {
        transform: translateX(-10%);
    }
}

@keyframes preopen--right {
    0% {
        transform: translateX(0);
    }
    95% {
        transform: translateX(12%);
    }
    100% {
        transform: translateX(10%);
    }
}

@keyframes open--left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes open--right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes open--light {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0, 2);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(60, 2);
    }
}

.outro--result {
    display: block;
    position: absolute;
    bottom: 0;
    padding: 30px;
    width: 100%;

    opacity: 0;
    z-index: -1;
}

#outro[data-state="preopened"] .outro--result {
    opacity: 1;
    transition: opacity 0.6s ease-out 1s;
    z-index: 5;
}

#outro[data-state="opened"] .outro--result {
    opacity: 1;
    transition: opacity 0.4s ease-out 2s;
    z-index: 5;
}
/**/

/* boss */


#boss[data-state="correct"] .fight--enemy,
#boss[data-state="incorrect"] .fight--enemy{
    transform: scale(1.5);
    transform-origin: 50% 50%;
    opacity: 0;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in;
}

.bg.zeus-bg{
    animation: zeus--bg 1s linear infinite;
}

.bg.zeus-bg img{
    opacity: 0.9;
}

@keyframes zeus--bg{
    0%{
        background-color: rgb(0,0,0);
    }
    10%{
        background-color: rgb(255,255,255);
    }
    20%{
        background-color: rgb(100,100,100);
    }
    30%{
        background-color: rgb(50,50,50);
    }
    40%{
        background-color: rgb(255,255,255);
    }
    50%{
        background-color: rgb(255,255,255);
    }
    60%{
        background-color: rgb(100,100,100);
    }
    70%{
        background-color: rgb(50,50,50);
    }
    80%{
        background-color: rgb(255,255,255);
    }
    90%{
        background-color: rgb(100,100,100);
    }
    100%{
        background-color: rgb(0,0,0);
    }
}

.olimp-bg img{
    top: -100%
}

.olimp-bg img {
    width: 100%;
    height: 200%;
    object-fit: cover;
    transition: top 1s ease-in-out;
    position: absolute;
    top: -100%;
}
/**/

.boss-intro-transition-enter, .boss-intro-transition-leave-to{
    opacity: 0;
}

.boss-intro-transition-leave, .boss-intro-transition-enter-to{
    opacity: 1;
}