/* 
Extrabold 800
Italic 700
Bold 700
SemiBold 600
*/


/* -----------
Общие стили
------------*/

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(montserrat-700-latin.woff2) format('woff2');
}

html {
    overflow: hidden;
}

body {
    background-image: url(bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    margin: 0;
    height: 100vh;
    overflow: hidden;
    position: relative;

    font-family: 'Montserrat';
    font-weight: 700;
    color: #FFFFFF;
}

@media (max-width: 768px) {
    body {
        background-position: 31.6% center;
    }
}

/* -----------
Main
------------*/

.logo {
    position: absolute;
    z-index: 5;

    width: 11%;
    left: 4.4%;
    top: 3%;
}

@media (max-width: 768px) {
    .logo {
       width: 30.6%;
       left: 34.8%;
       top: 2.9%;
    }
}
.coins_1 {
    position: absolute;

    width: 100%;
    left: 0%;
    top: 0%;
}

@media (max-width: 768px) {
    .coins_1 {
        display: none;
    }
}

.coins_2 {
    display: none;
    position: absolute;
    left: -20%;
}

@media (max-width: 768px) {
    .coins_2 {
        display: block;
    }
}


@keyframes float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.coins_1, .coins_2 {
    animation: float 2.5s ease-in-out infinite;
}

.girl {
    position: absolute;
    z-index: 3;

    width: 55.5%;
    left: 44%;
    top: 25%;

    animation: girl-float 4s ease-in-out infinite;
}

@media (max-width: 768px) {
    .girl {
        width: 142%;
        z-index: -1;
        left: -3%;
        top: 15.3%;
    }
}

@keyframes girl-float {
    0%   { transform: translateX(0) rotate(0deg); }
    50%  { transform: translateX(-12px) rotate(-1deg); }
    100% { transform: translateX(0) rotate(0deg); }
}


/* -----------
Text 1
------------*/

.text_1 {
    position: absolute;

    width: 38.75%;
    left: 30.6%;
    top: 6.4%;
}

@media (max-width: 768px) {
    .text_1 {
        width: 90.4%;
        left: 4.9%;
        top: 8.6%;
    }
}

/* -----------
Wheel
------------*/

.wheel-wrapper {
    position: absolute;

    width: 46.5%;
    height: auto;
    aspect-ratio: 893/1108;
    left: 15.6%;
    top: 21%;
}

@media (max-width: 768px) {
    .wheel-wrapper {
        width: 120%;
        top: 36%;
        left: 50%;
        transform: translateX(-50%);
    }
}

.wheel_border {
    position: absolute;
    z-index: 2;

    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
}

.wheel_inside {
    position: absolute;
    z-index: 1;

    aspect-ratio: 1/1;


    width: 66%;
    left: 50%;
    transform: translateX(-50%);
    top: 4%;
}

.spin {
    position: absolute;
    z-index: 3;
    width: 34%;
    left: 50%;
    transform: translateX(-50%);
    top: 17.5%;
    animation: spin-anim 3s ease-in-out infinite;
}

.spin.is-spinning {
    animation: none;
    transform: translateX(-50%);
}

@keyframes spin-anim {
    0%   { transform: translateX(-50%) scale(0.96) rotate(-4deg); }
    50%  { transform: translateX(-50%) scale(1.04) rotate(4deg); }
    100% { transform: translateX(-50%) scale(0.96) rotate(-4deg); }
}

/* -----------
Attempts
------------*/

.attempts-wrapper {
    position: absolute;
    box-sizing: border-box;
    z-index: 3;

    width: 11.6%;
    height: 12.7%;
    left: 18.3%;
    top: 23%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 207, 9, 0.4) 62.5%, rgba(255, 207, 9, 0.32) 100%);
    border: 2px solid #FFCF09;
    box-shadow: -9.76821px -9.76821px 29.3046px rgba(0, 0, 0, 0.5), 9.76821px 9.76821px 29.3046px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3.9px);
    border-radius: 14px;
}

.attempt_1 {
    display: block;
    width: 70%;
}
@media (max-width: 768px) {
    .attempts-wrapper {
        width: 30.1%;
        height: auto;
        aspect-ratio: 129 / 79;
        left: 5.6%;
        top: 36.2%;

        border: 1.16px solid #FFCF09;
        border-radius: 8.14px;
        box-shadow: -5.68px -5.68px 17px rgba(0, 0, 0, 0.5), 5.68px 5.68px 17px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2.27px);
    }

    .attempt_1 {
        width: 65%;
    }

    .attempt_2{
        width: 65%;
    }
}



.attempt_2 {
    display: none;
    width: 93%;
}

/* -----------
Buttons
------------*/

.button_1 {
    position: absolute;
    z-index: 3;

    width: 24.2%;
    left: 50%;
    transform: translateX(-50%);
    top: 82.5%;

    cursor: pointer;
}

.pop-up_btn_1,
.pop-up_btn_2,
.pop-up_btn_2m,
.pop-up_btn_3,
.spin {
    cursor: pointer;
}

@media (max-width: 768px) {
    .button_1 {
        width: 72%;
        left: 50%;
        transform: translateX(-50%);
        top: 86%;
    }
}

.button_2 {
    position: absolute;
    z-index: 3;

    width: 24.2%;
    left: 50%;
    transform: translateX(-50%);
    top: 82.5%;

    cursor: pointer;
}

@media (max-width: 768px) {
    .button_2 {
        width: 72%;
        left: 50%;
        transform: translateX(-50%);
        top: 86%;
    }
}


/* -----------
Modals
------------*/

.modal_bg {
    position: fixed;
    z-index: 4;
    
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4;
}

/* 1 */

.pop-up_1 {
    position: absolute;
    z-index: 4;

    width: 38%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    .pop-up_1 {
        width: 110%;
        top: 43%;
    }
}

.pop-up_btn_3 {
    display: none;
}

@media (max-width: 768px) {
    .pop-up_btn_3 {
        display: block;
        position: absolute;
        z-index: 4;

        left: 12%;
        top: 53.5%;
    }

    .pop-up_btn_1 {
        display: none;
    }
}

.pop-up_btn_1{
    position: absolute;
    z-index: 4;

    width: 20.8%;
    left: 39.8%;
    top: 61%;
}



/* 2 */

.pop-up_2 {
    position: absolute;
    z-index: 4;

    width: 55.3%;
    left: 22.2%;
    top: 20.5%;
}

.pop-up_3 {
    display: none;
}

@media (max-width: 768px) {
    .pop-up_2 {
        display: none;
    }

    .pop-up_3 {
        display: block;
        position: absolute;
        z-index: 4;

        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 15.5%;
    }
}

.pop-up_btn_2 {
    position: absolute;
    z-index: 4;

    width: 27.6%;
    left: 36%;
    top: 63%;
}

.pop-up_btn_2m {
    display: none;
}

@media (max-width: 768px) {
    .pop-up_btn_2 {
        display: none;
    }

    .pop-up_btn_2m {
        display: block;
        position: absolute;
        z-index: 4;

        width: 61%;
        left: 50%;
        transform: translateX(-50%);
        top: 64.5%;
    }
}