:root {
	--index: 3vh + 3vw;
	--siseSide: 1vh - 1vw;
}


* {margin: 0; padding: 0;  user-select: none; -webkit-user-select: none; -moz-user-select: none;-ms-user-select: none; touch-action: manipulation;}
body {
    background-color: rgb(7,41,63);
    overflow: hidden;
    /* background: url('lvl1/sprite2.1-fongame.png') no-repeat;
    background-size: 100%;
    width: 130%;
    height: 130%; */
}

button {
    -webkit-tap-highlight-color: transparent;
}

.manual {
    opacity: 0;
    position: absolute;
    left: 20px;
    bottom: 15px;
    z-index: 9999;
    display: none;
    transition: opacity 0.4s linear;

    font-size: 10px;
    font-family: "Inter", sans-serif;
    font-weight: 400;

    padding: 5px 16px;
    border-radius: 15px;
    background-color: black;

    white-space: nowrap;

    & a {
        color: white;
    }

    & .close {
        display: flex;
        padding: 4px 5px;
        position: absolute;
        right: -4px;
        top: -4px;
        background-color: white;
        border-radius: 100px;
        cursor: pointer;

        & .fas {
            color: black;
            font-size: 10px;
        }

    }

    &:hover {
        opacity: 1;
        transition: .5;
        z-index: 999999;
    }


}

.center-content .konfirmRe .tg {

}

.fa-angle-down {
    top: 0;
    right: 0;
    position: absolute;
    padding: 10px;
}

.musicOn {
    display: none;
}
.pauseOn {
    display: none;
}
.modalEndGame_twoDis {
    display: none;
}
.modalEndGame_oneDis {
    & .modalWin {
        position: relative;
        & .blurWin {
            position: absolute;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(7px);
            z-index: -1;
        }
    }
}

.fakeGamePole {
    display: none;
    position: absolute;
    z-index: 2;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -45%);
    background-color: #01538D;

    width: 64vw;
    height: 67vh;
    max-width: 760px;
    max-height: 476px;

    /* max-width: 760px;
    max-height: 476px;
    width: 100%;
    height: 100%;
    aspect-ratio: 760 / 476; */

    border: 2px solid #3693FF;
    border-radius: 10px;
}

.block-btn {
    position: relative;
    display: grid;
    justify-items: center;
}

.stars_no-light_one {
    z-index: 9;
    top: 30px;
    width: 100%;
    height: 179px;
    position: absolute;
    background-image: url(imgButtons/stars-noLight.png);
    background-size: 26px;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0);
    background-position: center;
}
.stars_no-light_one.click {
    top: 30px;
    width: 100%;
    height: 185px;
    position: absolute;
    background-image: url(imgButtons/stars-Light.png);
    background-size: 60px;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0);
    background-position: center;
}


.stars_no-light_two {
    z-index: 9;
    top: 52vh;
    width: 100%;
    height: 179px;
    position: absolute;
    background-image: url(imgButtons/stars-noLight.png);
    background-size: 26px;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0);
    background-position: center;
}
.stars_no-light_two.click {
    top: 52vh;
    width: 100%;
    height: 185px;
    position: absolute;
    background-image: url(imgButtons/stars-Light.png);
    background-size: 60px;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0);
    background-position: center;
}
    

.graph-1 {
    position: absolute;
    width: 230px;
    left: -159px;
    top: 350px;
    z-index: -1;
}
.graph-2 {
    position: absolute;
    width: 230px;
    z-index: -1;
    right: -135px;
    top: 480px;
    
}


.limiter {
    position: relative;
    gap: 20px;
    display: grid;
    height: 100%;
    align-content: start;
}


.modal-about {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    z-index: 999999;
    background-color: white;
    color: black;
    border-radius: 13px;
    padding: 20px;
    font-family: "Inter", sans-serif;
    display: none;
    opacity: 0;
    height: 400px;
    transition: opacity 0.3s linear;

    max-height: 400px;
    max-width: 648.5px;
    width: 50%;
    height: 60%;

    & .btnClose {
        position: fixed;
        top: 20px;
        right: 20px;
        border-radius: 100px;
        /* padding: 7px 11px 7px 11px; */
        cursor: pointer;
        height: 41px;
        width: 41px;

        background-image: url(imgButtons/btnClose.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);

        &:hover {
            opacity: 0.8;
        }

        &:active {
            opacity: 0.7;
        }
    
    }

    & .block-firste {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        height: 100%;

        & .block {
            padding: 20px 23px;
            background-color: rgb(246, 246, 246);
            border-radius: 20px;
            
        }
    }

    & .user-guide {
        /* height: 100%; */
        position: relative;
        padding: 20px;
        background-color: rgb(246, 246, 246);
        border-radius: 20px;
        margin-top: -10px;
     

        & .blockZag {
            display: flex;
            justify-content: space-between;

            & .text {
                font-weight: 600;
            }

        }

        & .blockInfo {
            overflow: auto;
            /* width: 100%; */
            height: 100%;
            display: none;
            opacity: 0.7;
            margin-top: 10px;
            height: 100px;
            transition: .2s;
            font-size: 14px;

            &::-webkit-scrollbar {
                width: 0;
            }

        }

        & .fas {
            font-size: 20px;
        }

    }

}

.modal-mesForEr {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    z-index: 999999;
    background-color: white;
    color: black;
    border-radius: 13px;
    padding: 50px;
    font-family: "Inter", sans-serif;
    display: none;
    opacity: 0;
    max-height: 400px;
    max-width: 648.5px;
    width: 50%;
    height: 60%;
    transition: opacity 0.3s linear;

    & .form {
        display: grid;
        margin-top: 40px;
        justify-items: end;

        & .input {
            width: 100%;
            border: none;
            background-color: #f6f6f6;
            padding: 10px;
            border-radius: 10px;

            
        }
        & .input::placeholder {
            font-family: "Inter", sans-serif;
        }

        & button {
            font-weight: 400px;
            border-radius: 20px;
            background-color: rgb(11,53,94);
            color: white;
            margin-top: 25px;
            border: none;
            padding: 13px 28px;
            font-size: 14px;
            transition: .2s;
            cursor: pointer;

            &:hover {
                transition: .2s;
                background-color: rgb(8, 37, 67);
            }
        }

    }

    & .blockThank {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        & button {
            font-weight: 400px;
            border-radius: 20px;
            background-color: rgb(11,53,94);
            color: white;
            margin-top: 25px;
            border: none;
            padding: 13px 28px;
            font-size: 14px;
            transition: .2s;
            cursor: pointer;

            &:hover {
                transition: .2s;
                background-color: rgb(8, 37, 67);
            }
        }

    }

    & .zag-messageForError {
        font-size: 24px;
        font-weight: 500;
    }

    & .btnClose {
        position: fixed;
        top: 20px;
        right: 20px;
        border-radius: 100px;
        /* padding: 7px 11px 7px 11px; */
        cursor: pointer;
        height: 41px;
        width: 41px;

        background-image: url(imgButtons/btnClose.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        
        &:hover {
            opacity: 0.8;
        }

        &:active {
            background-color: #e1e1e1;
        }
    }


}

.imgCenterLightTwoDisplay {
    position: absolute;
    width: 500px;
    top: 17%;
    left: -90px;
    transform: translate(-17%, 0);
}

.timers {
    font-family: "Inter", sans-serif;
    position: fixed;
    z-index: 99999;
    border-radius: 100px;
    right: 121px;
    top: 13px;
    box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 1);
    /* padding: 8px 10px 8px 10px; */
    border: 1px solid white;
    background-color: white;
    color: black;
    box-shadow: 0px 0px 3px 2px rgba(34, 60, 80, 0.2) inset;
    margin-right: 10px;
    margin-left: 30px;
    display: flex;
    overflow: hidden;

    display: none;

    & .text {
        margin: 0px 15px 0px 13px;
    }

    & .timer {
        width: 118px;
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 400;
        justify-content: flex-end;
    }

    & .btnPa {
        height: 40px;
    }

    & .btnPa button {
        cursor: pointer;
        /* padding: 11px 13px 10px 14px; */
        border-radius: 100px;
        border: none;
        /* box-shadow: inset -1px -1px 0px 0px rgba(255,201,72,0.8),inset 1px 1px 0px 0px rgba(255,201,72,0.84),inset 1px -0px 0px 2px rgba(0,0,0,0.1),inset -0px 0px 0px 2px rgba(0,0,0,0.6),inset 0px 0px 4px 5px rgba(0,0,0,0.1); */
        height: 40px;

        &:active {
            opacity: 0.5;
            transition: .2s;
        } 
    
    }

}


.btn-pause {
    & i {
        font-size: 20px;
        padding: 10px;
    }

    & button:hover {
        transition: .2s;
        cursor: pointer;
       
    }
    
    & button {
        border: none;
        border-radius: 100%;
        opacity: 1;
        transition: .1s;

        height: 41px;
        width: 41px;
    
        background-image: url(imgButtons/btnPause.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);

        &:active {
            opacity: 0.6;
            transition: .2s;
        }
    }
}

.btn-opacityMenu {
    position: fixed;
    z-index: 9999;
    margin: 10px;
    cursor: pointer;
    right: 5px;
    top: 3px;

    height: 39px;
    border-radius: 100%;
    z-index: 9;
    background-color: black;

    & i {
        font-size: 20px;
        padding: 10px;
    }

    & button:hover {
        transition: .2s;
        cursor: pointer;
       
    }
    
    & button {
        border: none;
        border-radius: 100%;
        opacity: 1;
        transition: .1s;

        height: 41px;
        width: 41px;
    
        background-image: url(imgButtons/btnMenu.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);

        &:active {
            opacity: 0.6;
            transition: .2s;
        }
    }
}

.btn-openimage {
    & i {
        font-size: 20px;
        padding: 10px;
    }

    & button:hover {
        transition: .2s;
        cursor: pointer;
       
    }
    
    & button {
        border: none;
        border-radius: 100%;
        opacity: 1;
        transition: .1s;

        height: 41px;
        width: 41px;
    
        background-image: url(imgButtons/btnOpenImage.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);

        &:active {
            opacity: 0.6;
            transition: .2s;
        }
    }
}

.btn-music {
    & i {
        font-size: 20px;
        padding: 10px;
    }

    & button:hover {
        transition: .2s;
        cursor: pointer;
    }
    
    & button {
        border: none;
        border-radius: 100%;
        opacity: 1;
        transition: .1s;

        height: 41px;
        width: 41px;
    
        background-image: url(imgButtons/btnMusicOff.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);

        &:active {
            opacity: 0.6;
            transition: .2s;
        }
    }
}

.btn-restartlevel {
    & i {
        font-size: 20px;
        padding: 10px;
    }

    & button:hover {
        transition: .2s;
        cursor: pointer;
    }
    
    & button {
        border: none;
        border-radius: 100%;
        opacity: 1;
        transition: .1s;

        height: 41px;
        width: 41px;
    
        background-image: url(imgButtons/btnClose.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);

        &:active {
            opacity: 0.6;
            transition: .2s;
        }
    }
}

.btn-eyeket {
    & i {
        font-size: 20px;
        padding: 10px;
    }

    & button:hover {
        transition: .2s;
        cursor: pointer;
    }
    
    & button {
        border: none;
        border-radius: 100%;
        opacity: 1;
        transition: .1s;

        height: 41px;
        width: 41px;
    
        background-image: url(imgButtons/btnEyeket.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);

        &:active {
            opacity: 0.6;
            transition: .2s;
        }
    }
}

.btn-fullscreen {
    position: fixed;
    z-index: 9999;
    margin: 10px;
    cursor: pointer;
    right: 70px;
    top: 3px;

    height: 39px;
    border-radius: 100%;
    z-index: 9;
    background-color: black;

    & i {
        font-size: 20px;
        padding: 10px;
    }

    & button:hover {
        transition: .2s;
        cursor: pointer;
       
    }
    
    & button {
        border: none;
        border-radius: 100%;
        opacity: 1;
        transition: .1s;

        height: 41px;
        width: 41px;
    
        background-image: url(imgButtons/btnFullScreen.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);

        &:active {
            opacity: 0.6;
            transition: .2s;
        }
    }
}


.btn-Info {
    display: grid;
    margin: 10px 10px 40px 10px;
    cursor: pointer;
    height: 40px;
    & i {
        font-size: 20px;
        padding: 10px;
    }

    & button:hover {
        transition: .2s;
        cursor: pointer;
        
    }
    
    & button {
        border: none;
        border-radius: 100%;
        opacity: 1;
        transition: .1s;

        &:active {
            opacity: 0.6;
            transition: .2s;
        }
    }

}

.btns-info {
    position: fixed;
    z-index: 99999;
    bottom: 40px;
    right: 70px;
    display: none;
    opacity: 0;
    transition: opacity 0.3s linear;

    & .btn-Info_btn {
        cursor: pointer;
        margin-right: 10px;
        border: none;
        font-size: 13px;
        border-radius: 23px;
        padding: 10px 28px 10px 28px;
        color: black;
        background-color: white;
        box-shadow: 1px 1px 5.5px 0px rgba(0, 0, 0, 0.6) inset;
        transition: .2s;
        border: 1px solid white;

        &:hover {
            background-color: rgb(228, 228, 228);
            transition: .2s;
        }
        &:active {
            background-color: rgb(202, 202, 202);
            transition: .2s;
        }

    }

}

.info-block-leaf {
    position: fixed;
    font-size: 14px;
    top: -1000px;
    right: 80px;
    border: none;
    border-radius: 23px;
    padding: 6px 18px 6px 18px;
    color: black;
    background-color: white;
    box-shadow: 4px 4px 0px -1px rgba(34, 60, 80, 0.09) inset;
    z-index: 999;

    &.changed-1 {
        /* top: 19px; */
        font-weight: 500;
        font-family: "Inter", sans-serif;
        font-size: 14px;
        &::before {
            content: 'Свернуть меню';
        }
    }

    &.changed-2 {
        /* top: 281px; */
        font-weight: 500;
        font-family: "Inter", sans-serif;
        font-size: 14px;  
        &::before {
            content: 'Показать картинку';
        }
    }

    &.changed-3 {
        /* top: 341px; */
        font-weight: 500;
        font-family: "Inter", sans-serif;
        font-size: 14px;  
        &::before {
            content: 'Включить музыку';
        }
    }

    &.changed-4 {
        /* top: 404px; */
        font-weight: 500;
        font-family: "Inter", sans-serif;
        font-size: 14px;  
        &::before {
            content: 'Выйти из игры';
        }
    }

    &.changed-5 {
        /* top: 729px; */
        font-weight: 500;
        font-family: "Inter", sans-serif;
        font-size: 14px;  
        &::before {
            content: 'Дополнительная информация';
        }
    }

    &.changed-6 {
        top: 20px !important;
        right: 270px;
        font-weight: 500;
        font-family: "Inter", sans-serif;
        font-size: 14px;  
        &::before {
            content: 'Таймер';
        }
    }

    &.changed-7 {
        width: fit-content;
        right: 0;
        top: 38% !important;
        left: 50% !important;
        transform: translate(-50%, -38%);
        font-weight: 500;
        font-family: "Inter", sans-serif;
        font-size: 14px;  
        &::before {
            content: 'Поле, в котором нужно собрать пазл';
        }
    }
    

}

.btn-leaf {
    display: none;
}

.menbtn {
    height: 40px;

}


.btn-leaf button {
    position: fixed;
    transform: translate(-50%, -48%);
    top: 50%;
    left: 50%;
    font-size: 14px;
    border: none;
    border-radius: 23px;
    padding: 12px 10px 12px 10px;
    color: black;
    background-color: white;
    border: 1px solid white;
    box-shadow: 1px 1px 5.5px 0px rgba(0, 0, 0, 0.6) inset;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    width: 127px;

    &:hover {
        background-color: rgb(244, 244, 244);
    }

    &:active {
        background-color: rgb(226, 226, 226);
    }

}



.top-content {
    font-family: "Inter", sans-serif;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    top: 15px;
    color: black;
    font-size: 6px;
    z-index: 2;       
}
.right-content {
    font-family: "Inter", sans-serif;
    position: fixed;
    right: 0px;
    top: -2px;
    height: 100%;
    font-size: 13px;
    z-index: 2;   
    
    align-items: baseline;
    display: flex;

    & .btn {   
        display: grid;
        margin: 10px;
        cursor: pointer;
        height: 40px;

        border-radius: 100%;
        z-index: 9;
        background-color: black;
    
        & i {
            font-size: 20px;
            padding: 10px;
        }

        & button:hover {
            transition: .2s;
            cursor: pointer;
           
        }
        
        & button {
            border: none;
            border-radius: 100%;
            opacity: 1;
            transition: .1s;
            
            &:active {
                opacity: 0.6;
                transition: .2s;
            }
        }
    }

    & .btns {
        height: 100%;
        display: grid;
        justify-content: space-between;
        background-color: rgb(3,15,24);
        padding: 5px 5px 5px 5px;
    }

    & .block-btn {
        display: grid;

        &:nth-child(1) {
            align-content: flex-start;
        }
        &:nth-child(2) {
            align-content: center;
        }
        &:nth-child(3) {
            align-content: flex-end;
        }

    }

}
.left-content {
    font-family: "Inter", sans-serif;
    position: fixed;
    top: 50%;
    left: 12px;

    font-size: 13px;
    z-index: 2;   
    transform: translate(0, -50%);
    

    & .btn {   
        display: grid;
        margin: 10px;
    
        & i {
            font-size: 20px;
            padding: 10px;
        }

        & button:hover {
            transition: .2s;
            cursor: pointer;
            background-color: rgba(251,243,242,0.3);
        }
        
        & button {
            border: none;
            border-radius: 100%;
            transition: .1s;
            background-color: rgba(251,243,242,0);
            box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 1);
            
            &:active {
                opacity: 0.6;
                transition: .2s;
            }
        }
    }
}

.tableNaz .two {
    width: 50% !important;
}

.tableNaz .one {
    width: 20% !important;
}

.two.buttonsBotom {
    margin-top: 130px !important;
}


.modalEndGame_oneDis .placeInTable {
    transition: .2s;
    opacity: 0;
}


.center-content {
    font-family: "Inter", sans-serif;
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    z-index: 2;  


    & .text-pause {
        position: absolute;
        transform: translate(-50%, -48%);
        font-size: 20px;
        display: none;
        /* border: 1px solid red; */
        border-radius: 23px;
        padding: 12px 30px 12px 30px;
        color: black;
        background-color: white;
        box-shadow: 1px 1px 5.5px 0px rgba(0, 0, 0, 0.6) inset;
        border: 1px solid white;
    }

    & .open-img {
        display: none;

        & img {
            box-shadow: 3px 2px 65px 29px rgba(135, 135, 135, 0.45);
            position: absolute;
            transform: translate(-50%, -50%);
            z-index: 99999;
            border: 5px solid white;
        }
    }

    & .konfirmRe {
        position: absolute;
        transform: translate(-50%, -50%);
        font-size: 48px;
        justify-content: center;
        text-align: center;
        display: none;
        color: white;
        width: max-content;

        & .tg {
            /* font-size: 48px; */
            font-size: calc(var(--index) + 30px);
            font-weight: 600;
        }

        & .yesORno {
            margin-top: 20px;
            display: flex;
            justify-content: center;

            & span button {
                cursor: pointer;
                margin-right: 10px;
                font-size: 13px;
                border-radius: 23px;
                padding: 10px 28px 10px 28px;
                color: black;
                background-color: white;
                box-shadow: 1px 1px 5.5px 0px rgba(0, 0, 0, 0.6) inset;
                transition: .2s;
                border: 1px solid white;



                &:hover {
                    background-color: #E3E3E3;
                    transition: .2s;
                }

                &:active {
                    background-color: whitesmoke;
                    transition: .2s;
                }

            }

        }

    }

    & .modalEndGame {
        top: -60px;
        align-items: center;
        opacity: 0;
        display: none;
        height: 100vh;
        margin-top: 25px;
        position: fixed;
        transform: translate(-50%, -50%);
        text-align: center;

        & .text {
            font-size: 80px;
            color: white;
            text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, 
            #ffca2d 0px 0px 20px, #ffd12d 0px 0px 30px, #ffca2d 0px 0px 40px, #ffdc2d 0px 0px 50px, #ffe32d 0px 0px 75px;
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            margin-top: 30px;
        }

        & .placeInTable {
            font-size: 20px;
            color: white;
            margin-top: -10px;
            margin-bottom: 55px;
        }

        & .generate-name {
            display: flex;
            text-align: start;
            margin-top: 30px;
            background-color: white;
            border-radius: 40px;
            align-items: center;
            padding: 0px 0px 0px 30px;

            & .genblock {
                font-size: 16px;
                width: 65%;
            }

            & .buttons {
                display: flex;
                justify-content: flex-end;
                color: white;
                width: 100%;

                & button {
                    /* padding: 11px 20px 11px 20px; */
                    margin: 3px;
                    /* border-radius: 30px; */
                }

                & .btnGenerateName {
                    /* background-color: rgb(14,58,93);
                    color: white; */
                    cursor: pointer;
                    transition: .2s;
                    border: none;
                    font-size: 16px;

                    background-image: url(imgButtons/btnGenName.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-color: rgba(255, 255, 255, 0);

                    width: 169px;
                    height: 41px;

                    &:hover {
                        /* transition: .2s;
                        background-color: rgb(14, 58, 93); */
                    }
                    &:active {
                        /* background-color: rgba(11, 44, 71, 0.881); */
                        
                    }
                    
                }

                & .btnSaveGame {
                    /* background-color: white; */
                    /* color: black; */
                    border: none;
                    cursor: pointer;
                    transition: .2s;
                    font-size: 16px;

                    background-image: url(imgButtons/btnSave.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-color: rgba(255, 255, 255, 0);

                    width: 115px;
                    height: 41px;

                    &:hover {
                        /* transition: .2s;
                        background-color: rgb(230, 230, 230); */
                    }
                    &:active {
                        /* background-color: rgb(205, 205, 205); */
                    }
                }

            }

        }

        & .buttonsBotom {
            margin-top: 40px;

            & button {
                padding: 12px 20px 12px 20px;
                border-radius: 30px;
                cursor: pointer;
                transition: .2s;
            }

            & .btnAgainGame {
                background-color: rgba(14, 58, 93, 0.477);
                border: 1px solid white;
                color: white;
                margin-right: 5px;
                font-size: 16px;
                &:hover {
                    transition: .2s;
                    background-color: rgba(14, 58, 93, 0.881);
                }
                &:active {
                    background-color: rgba(11, 44, 71, 0.881);
                }
            }

            & .btnNext {
                /* border: 1px solid rgba(14, 58, 93, 0.477); */
                color: black;
                font-size: 16px;
                border: 1px solid white;
                box-shadow: 1px 1px 5.5px 0px rgba(0, 0, 0, 0.6) inset;
                &:hover {
                    transition: .2s;
                    background-color: rgb(230, 230, 230);
                }
                &:active {
                    background-color: rgb(205, 205, 205);
                }
            }

            & .btnToReturnGame {
                border: 1px solid white;
                background-color: rgba(14, 58, 93, 0.477);
                color: white;
                transition: .2s;
                &:hover {
                    transition: .2s;
                    background-color: rgba(14, 58, 93, 0.737);
                }
                &:active {
                    transition: .2s;
                    background-color: rgba(9, 37, 59, 0.422);
                }
            }

            & .btnNextLvl {
                border: none;
                border: 1px solid white;
                box-shadow: 1px 1px 5.5px 0px rgba(0, 0, 0, 0.502) inset;
                margin-left: 10px;
                margin-right: 10px;
                transition: .2s;
                color: #ffffff36;
                &:hover {
                    transition: .2s;
                    background-color: rgba(129, 129, 129, 0.233);
                }
                &:active {
                    transition: .2s;
                    background-color: rgba(72, 72, 72, 0.611);
                }
            }

            & .btnExitGame {
                border: 1px solid white;
                background-color: rgba(14, 58, 93, 0.477);
                color: white;
                &:hover {
                    transition: .2s;
                    background-color: rgba(14, 58, 93, 0.737);
                }
                &:active {
                    transition: .2s;
                    background-color: rgba(9, 37, 59, 0.422);
                }
            }

        }
        
    }

    & .modalWin {
        transition: visibility 0.6s linear, opacity 0.6s linear; 
        background-color: rgba(8, 22, 34, 0.6);
        border: 10px solid white;
        border-radius: 30px;
        display: grid;
        text-align: center;
        box-shadow: -1px 3px 71px 20px rgba(34, 60, 80, 0.2);
        width: 512px;
        color: white;
        padding-top: 7px;
        


        & .active,
        & .client-entry {
            background-color: rgb(18, 63, 110, 0.7);
        }




        & .tableNaz {
            text-align: start;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            padding: 10px 40px 10px 40px;
            /* margin: 10px 0px 10px 0px; */
            border-bottom: 1px solid rgba(255, 255, 255, 0.313);

            & div {
                width: 15%;
            }

        }
        

        & .timerText {
            font-size: 16px;
        }

        & .textWin {     
            & .yo {
                font-size: 60px;
            }
            & .second-text {
                font-size: 20px;
            }

            & .openPazl {
                margin-top: 10px;
                margin-bottom: 60px;
                border: 1px solid white;
                padding: 7px 14px 7px 14px;
                font-size: 10px;
                border-radius: 10px;
                background-color: black;
                color: white;
                transition: .2s;
                

                &:hover {
                    transition: .2s;
                    color: black;
                    background-color: white;
                    border: 1px solid black;
                }
                
            }

        }

        & .codNextLvl {
        
            & .kod {
                font-size: 45px;
                margin-bottom: 10px;
                display: flex;
                justify-content: center;
                align-items: center;

                & a {
                    color: black;
                }

            }

            & .kod-text {
                font-size: 10px;
            }

        }

    }

}


.bottom-content {
    font-family: "Inter", sans-serif;
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 13px;
    z-index: 2;  
    /* display: none; */
    opacity: 0.4;

    & .btn {   
        margin: 10px;
    
        & i {
            font-size: 20px;
            padding: 10px;
        }

        & button:hover {
            transition: .2s;
            cursor: pointer;
        }
        
        & button {
            
            border-radius: 100%;
            opacity: 1;
            transition: .1s;
            background-color: white;
            box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.2);
            
            &:active {
                opacity: 0.6;
                transition: .2s;
            }
        }
    }

}

.noTopFive {
    border-radius: 0px 0px 20px 20px;
}

.btn-rotateRight {   
    display: none;
    position: absolute;
    z-index: 2;

    & svg {
        padding: 6px 10px 6px 10px;
    }

    & button:hover {
        transition: .2s;
        cursor: pointer;
    }
    
    & button {
        border-radius: 100px;
        opacity: 1;
        transition: .1s;
        background-color: white;
        border: none;
        
        &:active {
            opacity: 0.6;
            transition: .2s;
        }
    }
}




.starsGraphix-one {
    position: absolute;
    width: 30px;
    top: 55px;
    left: 21px;
}
.starsGraphix-one_one {
    position: absolute;
    width: 60px;
    top: 35px;
    left: 6px;
    display: none;
}

.starsGraphix-two {
    position: absolute;
    /* width: 60px; */
    top: 54vh;
    left: 20px;
}
.starsGraphix-two_one {
    position: absolute;
    top: 54vh;
    display: none;
}

.starsGraphix-four {
    position: absolute;
    width: 60px;
    top: 36px;
    left: 7px;
    display: none;
}

.starsGraphix-three {
    position: absolute;
    width: 60px;
    top: 52vh;
    left: 5px;
}

.starsGraphix-one_one {
    display: none;
}

.light {
    display: none;
}

.right-light {
    width: 300px;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}


#game-container {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 1;

    /* background-image: url('lvl1/right-light.png'); */
}

.first-embed {
    transition: opacity 0.6s linear;
    opacity: 0;
    display: none;
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 99999;
    padding: 2vh;
    font-size: 2vh;
    background-color: white;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    border-radius: 50px;
    text-align: center;
}

@media only screen and (max-width: 656px) {
    .first-embed {
        font-size: 12px;
    }
}


.rotate-phone .text {
    font-size: 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;

    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
    bottom: 25px;
    color: white;
}


.copyrate {
    opacity: 0.4;
    padding: 2px 7px 2px 7px;
    /* background-color: white; */
    border-radius: 8px;
    position: absolute;
    z-index: 9999;
    bottom: 10px;
    right: 80px;
    font-size: 13.98px;
    /* font-size: calc(var(--siseSide) + 19px); */
    font-family: "Inter", sans-serif;
    color: rgba(255, 255, 255, 0.679);
    position: fixed;

    & .far {
        font-size: 12px;
        margin-right: 5px;
    }

    & a {
       color: rgb(51, 97, 32);
    }

}

.openCod {
    position: absolute;
    bottom: 30px;
    left: 20px;
    font-size: 20px;
    border: 1px solid black;
    z-index: 9999;
    font-family: "Inter", sans-serif;
    background-color: black;
    color: white;
    padding: 7px 15px 7px 15px;
    border-radius: 10px;
    transition: .2s;
    display: none;
    position: fixed;

    &:hover {
        transition: .2s;
        color: black;
        background-color: white;
        border: 1px solid black;

    }

}

.blur {
    -webkit-filter: blur(4px);
}

.postcard {
    overflow: hidden;
    width: 480px;
    height: 300px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    padding: 10px;

    & .block-button {
        position: absolute;
        bottom: 6px;
        right: 12px;
        padding: 10px 3px 0px 10px;
        display: flex;
        justify-content: space-between;
        gap: 10px;

        & button {
            border: none;
            background-color: #ffffff00;
            transition: .2s;
            cursor: pointer;

            & svg {
                width: 41px;
            }

            &:hover {
                opacity: 0.8;
                transition: .2s;
            }
            &:active {
                opacity: 0.7;
                transition: .2s;
            }
        }

        & .send {
            font-size: 14px;
            color: white;
            border-radius: 20px;
            width: 104px;
            height: 41px;
            background-color: rgba(44, 67, 89, 1);

            &:active {
                opacity: 0.7;
                background-color: rgb(29, 43, 57);
                transition: .2s;
            }

        }

    }
 
    & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        mask-image: url('lvl1/cart-mask.png');
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100%;
    }

}


@media only screen and (max-width: 498px) {
    .modalWin .textWin .yo {
        font-size: 30px !important;
    }
    .modalWin .textWin .second-text {
        font-size: 15px !important;
    }
    .openCod {
        font-size: 15px;
    }
    .copyrate {
        font-size: 7px;

        & .far {
            font-size: 7px;
        }

    }
}

@media only screen and (max-width: 300px) {
    .modalWin .textWin .yo {
        font-size: 25px !important;
    }
    .modalWin .textWin .second-text {
        font-size: 12px !important;
    }

    .openCod {
        font-size: 15px;
    }
}

@media only screen and (max-height: 660px) {
    .starsGraphix-one_one {
        display: block;
    }
    .starsGraphix-two_one {
        display: block;
    }
    .starsGraphix-one {
        display: none;
    }
    .starsGraphix-two {
        display: none;
    }
}

@media only screen and (max-height: 663px) {
    .block-btn:nth-child(2) {
        margin-top: 80px;
    }
    .starsGraphix-two_one {
        top: 62vh;
    } 

    .stars_no-light_one {
        background-image: url(imgButtons/litle_stars-Light.png);

        top: -15px;
        width: 100%;
        height: 149px;
        position: absolute;
        background-size: 70px;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        background-position: center;

    }

    .stars_no-light_two {
        background-image: url(imgButtons/litle_stars-Light.png);

        top: 52vh;
        /* top: 46vh; */
        width: 100%;
        height: 149px;
        position: absolute;
        background-size: 70px;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        background-position: center;
    }



}

@media only screen and (max-height: 394px) {
    .stars_no-light_one {
        background-image: url(imgButtons/litle_stars-Light.png);

        top: -20px;
        width: 100%;
        height: 149px;
        position: absolute;
        background-size: 70px;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        background-position: center;

    }

    .stars_no-light_two {
        background-image: url(imgButtons/litle_stars-Light.png);

        top: 45vh;
        width: 100%;
        height: 149px;
        position: absolute;
        background-size: 70px;
        background-repeat: no-repeat;
        background-color: rgba(255, 255, 255, 0);
        background-position: center;
    }

    .block-btn:nth-child(2) {
        margin-top: 50px;
    }

    .right-content {
        & .btn {    
            margin: 5px;
        }
    }

}

@media only screen and (max-height: 397px) {
    .starsGraphix-one_one {
        height: 60px;
    }
    .starsGraphix-two_one {
        height: 70px;
        left: 6px;
    }
}

@media only screen and (max-height: 403px) {
    .stars_no-light_two {
        /* background-image: none; */
    }
}

@media only screen and (max-height: 743px) {
    .modalEndGame_oneDis .text img,
    .modalEndGame_twoDis .text img {
        width: 400px;
    }

    .modalEndGame_oneDis .modalWin .tableNaz,
    .modalEndGame_twoDis .modalWin .tableNaz {
        font-size: 14px;
    }

    .modalEndGame_twoDis .postcard{
        width: 380px;
        height: 245px;
    }

    .modalEndGame_twoDis .block-button {
        gap: 5px;
    }

    .modalEndGame_twoDis .block-button button.send{
        height: 35px !important;
        width: 80px !important;
        margin-top: 3px !important;
        font-size: 11px !important;
    }

    .modalEndGame_twoDis .block-button button svg{
        width: 35px !important;
    }

    .imgCenterLightTwoDisplay {
        width: 400px !important;
    }

    .modalEndGame_twoDis .buttonsBotom button {
        font-size: 10px;
    }

    .modalEndGame_twoDis .buttonsBotom {
       margin-top: 90px !important;
    }


}

@media only screen and (max-height: 697px) {
    .modalEndGame_oneDis .text img, 
    .modalEndGame_twoDis .text img {
        width: 350px;
    }

    .modalEndGame_oneDis .modalWin .tableNaz,
    .modalEndGame_twoDis .modalWin .tableNaz {
        font-size: 12px !important;
    }

    .modalEndGame_oneDis .modalWin, 
    .modalEndGame_twoDis .modalWin {
        width: 400px;
    }

    .center-content .modalEndGame .generate-name .genblock,
    .center-content .modalEndGame .btnGenerateName,
    .center-content .modalEndGame .btnSaveGame {
        font-size: 12px !important;
    }

    .center-content .modalEndGame .btnAgainGame,
    .center-content .modalEndGame .btnNext {
        font-size: 12px !important;
    }

    .modalEndGame_oneDis .graph-1,
    .modalEndGame_twoDis .graph-1 {
        width: 190px;
        left: -129px;
        top: 245px;
    }

    .modalEndGame_oneDis .graph-2,
    .modalEndGame_twoDis .graph-2 {
        width: 190px;
        right: -135px;
        top: 300px;
    }
}

@media only screen and (max-height: 661px) {
    .btnGenerateName {
        height: 28px !important;
        width: 120px !important;
    }

    .btnSaveGame {
        height: 28px !important;
        width: 80px !important;
    }

    .modalEndGame_oneDis .text img,
    .modalEndGame_twoDis .text img {
        width: 300px;
    }

    .modalEndGame_oneDis .modalWin .tableNaz, 
    .modalEndGame_twoDis .modalWin .tableNaz {
        font-size: 10px !important;
    }

    .modalEndGame_oneDis .modalWin,
    .modalEndGame_twoDis .modalWin {
        width: 390px;
        border: 7px solid white;
    }

    .center-content .modalEndGame .generate-name .genblock,
    .center-content .modalEndGame .btnGenerateName,
    .center-content .modalEndGame .btnSaveGame {
        font-size: 10px !important;
    }

    .center-content .modalEndGame .btnAgainGame,
    .center-content .modalEndGame .btnNext {
        font-size: 10px !important;
    }

    .modalEndGame_oneDis .graph-1,
    .modalEndGame_twoDis .graph-1 {
        width: 160px;
        left: -105px;
        top: 175px;
    }

    .modalEndGame_oneDis .graph-2,
    .modalEndGame_twoDis .graph-2 {
        width: 150px;
        right: -105px;
        top: 260px;
    }

    .modalEndGame_oneDis .placeInTable,
    .modalEndGame_twoDis .placeInTable {
        margin-bottom: 30px !important;
    }

    .center-content .modalEndGame .generate-name {
        margin-top: 25px;
    }
    .center-content .modalEndGame .buttonsBotom {
        margin-top: 25px;
    }
}

@media only screen and (max-height: 580px) {
    .modalEndGame_twoDis .buttonsBotom {
        margin-top: 50px !important;
     }

     .modalEndGame_twoDis .postcard{
        width: 330px;
        height: 210px;
    }

    .modalEndGame_twoDis .block-button {
        gap: 5px;
        bottom: 2px;
    }

    .modalEndGame_twoDis .block-button button {
        margin-top: 5px !important;
    }

    .modalEndGame_twoDis .block-button button.send{
        height: 30px !important;
        width: 70px !important;
        margin-top: 10px !important;
        font-size: 10px !important;
    }

    .modalEndGame_twoDis .block-button button svg{
        width: 30px !important;
    }

    .imgCenterLightTwoDisplay {
        width: 300px !important;
    }

    .modalEndGame_twoDis .buttonsBotom button {
        font-size: 8px !important;
        padding: 10px 17px 10px 17px !important;
    }


}

@media only screen and (max-height: 574px) {
    .modalEndGame_oneDis .text,
    .modalEndGame_twoDis .text {
        margin-top: -20px;
    }

    .modalEndGame_oneDis .text img,
    .modalEndGame_twoDis .text img {
        width: 250px;
    }

    .modalEndGame_oneDis .modalWin .tableNaz,
    .modalEndGame_twoDis .modalWin .tableNaz {
        font-size: 8px !important;
        padding: 5px 40px 6px 40px !important;
    }

    .modalEndGame_oneDis .modalWin,
    .modalEndGame_twoDis .modalWin {
        width: 340px;
        border: 7px solid white;
    }

    .center-content .modalEndGame .generate-name .genblock,
    .center-content .modalEndGame .btnGenerateName,
    .center-content .modalEndGame .btnSaveGame {
        font-size: 8px !important;
    }

    .center-content .modalEndGame .btnGenerateName,
    .center-content .modalEndGame .btnSaveGame {
        padding: 8px 18px 8px 18px !important;  
    }

    .center-content .modalEndGame .btnAgainGame,
    .center-content .modalEndGame .btnNext {
        font-size: 8px !important;
        padding: 8px 20px 8px 20px !important;
    }

    .modalEndGame_oneDis .graph-1,
    .modalEndGame_twoDis .graph-1 {
        width: 130px;
        left: -80px;
        top: 115px;
    }

    .modalEndGame_oneDis .graph-2,
    .modalEndGame_twoDis .graph-2 {
        width: 120px;
        right: -80px;
        top: 200px;
    }

    .modalEndGame_oneDis .placeInTable,
    .modalEndGame_twoDis .placeInTable {
        margin-bottom: 30px !important;
        font-size: 12px !important;
    }

    .center-content .modalEndGame .generate-name {
        margin-top: 25px;
    }
    .center-content .modalEndGame .buttonsBotom {
        margin-top: 25px;
    }
}

@media only screen and (max-height: 469px) {
    .center-content .modalEndGame {
        margin-top: 60px !important;
    }

    .modalEndGame_oneDis .text,
    .modalEndGame_twoDis .text {
        margin-top: -20px !important;
    }

    .modalEndGame_oneDis .text img,
    .modalEndGame_twoDis .text img {
        width: 200px;
    }

    .modalEndGame_oneDis .modalWin .tableNaz,
    .modalEndGame_twoDis .modalWin .tableNaz {
        font-size: 8px !important;
        padding: 4px 40px 4px 40px !important;
    }

    .modalEndGame_oneDis .modalWin,
    .modalEndGame_twoDis .modalWin {
        width: 290px;
        border: 7px solid white;
    }

    .center-content .modalEndGame .generate-name .genblock,
    .center-content .modalEndGame .btnGenerateName,
    .center-content .modalEndGame .btnSaveGame {
        font-size: 8px !important;
    }

    .center-content .modalEndGame .btnGenerateName,
    .center-content .modalEndGame .btnSaveGame {
        padding: 8px 18px 8px 18px !important;  
    }

    .center-content .modalEndGame .btnAgainGame,
    .center-content .modalEndGame .btnNext {
        font-size: 8px !important;
        padding: 8px 20px 8px 20px !important;
    }

    .modalEndGame_oneDis .graph-1 {
        width: 130px;
        left: -80px;
        top: 115px;
    }


    .modalEndGame_oneDis .graph-2 {
        width: 120px;
        right: -80px;
        top: 160px;
    }

    .modalEndGame_oneDis .placeInTable,
    .modalEndGame_twoDis .placeInTable {
        margin-bottom: 20px !important;
    }

    .center-content .modalEndGame .generate-name {
        margin-top: 25px;
    }
    .center-content .modalEndGame .buttonsBotom {
        margin-top: 25px;
    }
}

@media only screen and (max-height: 413px) {
    .modalEndGame_twoDis .buttonsBotom {
        margin-top: 30px !important;
    }
}

@media only screen and (max-height: 551px) {
    .timers {
        right: initial;
    }

    .changed-6 {
        top: 20px;
        width: fit-content;
        left: 160px;
    }

}

@media only screen and (max-height: 500px) {
    .info-block-leaf.changed-7 {
        top: 33vh !important;
    }
}

@media only screen and (max-width: 1398px) {
    .yesORno .span button {
        cursor: pointer;
        margin-right: 10px;
        font-size: 2vh;
        border-radius: 5vh;
        padding: 1.2vh 1.4vw 1.2vh 1.4vw;
        color: black;
        background-color: white;
        box-shadow: 1px 1px 5.5px 0px rgba(0, 0, 0, 0.6) inset;
        transition: .2s;
        border: 1px solid white;
    }
}

@media only screen and (max-height: 500px) {
    /* .modal-about {
        height: 80%;
    } */

    .modal-about img {
        width: 200px;
    }

    .block-firste .mail {
        font-size: 10px;
    }

    .block-firste .tel {
        font-size: 14px;
    }

    .block-firste .date-create {
        font-size: 12px;
    }

    .user-guide .text {
        font-size: 12px;
    }

    .user-guide .fa-angle-down {
        font-size: 15px;
    }
}

@media only screen and (max-height: 982px) {

    .two.buttonsBotom {
        color: wheat;
    }

    .modalEndGame_twoDis .postcard {
        width: 270px;
        height: 170px;
        border-radius: 20px;
    }

    .block-button  {
        gap: 5px;
        bottom: -2px;
        left: 120px;

        & button.send {
            height: 25px !important;
            width: 60px !important;
            margin-top: 14px !important;
            font-size: 10px !important;
        }

        & button{
            & svg {
                width: 24px !important;
            }
        }
    }




}



@media only screen and (max-height: 421px) {

    .limiter .btnClose {
        height: 35px !important;
        width: 35px !important;
    }

    .block-firste .mail,
    .block-firste .tel {
        font-size: 10px !important;
    }

    .block-firste .date-create {
        white-space: nowrap;
        font-size: 10px !important;
    }

    .block-firste .block {
        padding: 10px 23px !important;
        border-radius: 16px !important;
    }

    .user-guide {
        border-radius: 16px !important;
        padding: 13px !important;
    }

}