@font-face {
    font-family: "YS Display";
    src: url('fonts/YandexSansDisplay-Regular.eot') format('eot'),

        url('fonts/YandexSansDisplay-Regular.woff') format('woff'),

        url('fonts/YandexSansDisplay-Regular.ttf') format('truetype'),

        url('fonts/YandexSansDisplay-Regular.woff2') format('woff2');

}

@font-face {
    font-family: "YS Text";
    src: url('fonts/YandexSansText-Regular.eot') format('eot'),

        url('fonts/YandexSansText-Regular.woff') format('woff'),

        url('fonts/YandexSansText-Regular.ttf') format('truetype'),

        url('fonts/YandexSansText-Regular.woff2') format('woff2');
    font-weight: normal;

}

@font-face {
    font-family: "YS Text";
    src: url('fonts/YandexSansText-Bold.eot') format('eot'),

        url('fonts/YandexSansText-Bold.woff') format('woff'),

        url('fonts/YandexSansText-Bold.ttf') format('truetype'),

        url('fonts/YandexSansText-Bold.woff2') format('woff2');
    font-weight: bold;

}
@font-face {
    font-family: "Annie Use Your Telescope";
    src: url('fonts/AnnieUseYourTelescope-Regular.ttf') format('truetype');

}

.hidden {
    display: none !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow: hidden;

}

body {
    width: 100vw;
    overflow: hidden;
    /* touch-action: none; */
    background: #80808000;
    /* для проверки */

}
.screen.white_back::after {
    content: '';
    background-color: #ffffff;
    background-image: url("img/bg_whiteback.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -10%;
    right: -10%;
    z-index: -2;
}

.screen {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: 'YS Text', Arial, sans-serif;
}

.logo {
    position: fixed;
    width: 100px;
    top: 100px;
    left: calc(50% - 50px);
}

.loadPage {
    background-image: url("img/anim_bg.gif");
    background-position-x: 50%;
    background-color: #096aca;
    background-size: cover;
    position: relative;

    color: #ffffff;
    
}

.loadPage h1 {
    font-size: 42px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin-bottom: 21px;


}
.footer_load {
    width: 265px;
    text-align: center;
    left: calc(50% - (265px / 2));
    bottom: 10%;
    position: absolute;
}

.loadPage p {
    font-size: 16px;
    margin: 12px;
    
}

.loadPage .load {
    
    width: 100%;
    

    position: fixed;
    bottom: 50%;
    text-align: center;

}

.loadPage .load_head {
    width: 50px;
    height: 5px;
    border-radius: 30px;
    background: #F4F4F4;
    margin: 15px auto 27px;
}

.progressbar {
    margin: 0 auto 40px;
    max-width: 240px;
    width: 75%;
    height: 8px;

    border-radius: 20px;
    background: #ececec79;


}


.progressbar #progressLine {
    width: 50%;
    height: 100%;
    background-color: #FFF;;
    border-radius: 20px;
}

#percent {
    font-size: 18px;
    font-weight: 800;
    margin: 26px auto 14px;
}


.nav {
    position: relative;
    text-align: center;
    margin: 0px 0 4.9vh;
    padding-top: 84px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.nav h2 {
    font-size: 22px;
    font-weight: 800;
    

}

.btn-nav {
    height: 46px;
    width: 45px;
    position: absolute;
    
    background: #F8F8F8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 3px;
    padding-bottom: 3px;


    
}

.btn-nav.btn-back {
    left: 60px;
    background: url("img/btn_back.svg")  no-repeat;
}

.btn-nav.btn-menu {
    left: 0px;
    background: url("img/btn_back.svg") no-repeat;
}
#choose_team .btn-nav.btn-menu {
    left: 0;
}
.teamSelect {
    width: 90%;
    margin: 0 auto;
}

.teamSelect h1 {
    margin-bottom: 1.9vh;
    height: 10%;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 45px;
    text-transform: uppercase;
    text-align: center;
}



.footer_button {
    -webkit-box-shadow: 4px 4px 0px 1px rgba(34, 60, 80, 0.3);
-moz-box-shadow: 4px 4px 0px 1px rgba(34, 60, 80, 0.3);
box-shadow: 4px 4px 0px 1px rgba(34, 60, 80, 0.3);
    border: 2px solid #000000;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 59px;
    margin-bottom: 34px;
    border-radius: 16px;
    background-color: #1F69CA;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    padding: 20px 30px;

    color: #FFF;

    text-align: center;
    font-family: 'Annie Use Your Telescope';
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;

    background-image: url("img/Union.svg");
    background-size: cover;
    background-repeat: no-repeat;

}
.footer_button:active {
    background-color: #1955a3;
}


.players_choise {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 90%;
}

/* .players_choise .player {
    width: 165.796px;
    height: 165.796px;
    border-radius: 33.83px;
    background-color: #F8F8F8;
} */

.players_choise .player {
    width: 19vh;
    height: 19vh;
    max-width: 165.796px;
    max-height: 165.796px;
    border-radius: 33.83px;
    margin-bottom: 1vh;
}
.players_choise .player::before {
    content: '';
    position: relative;
    display: block;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url('img/player_rounded.png') 50% / contain no-repeat;
}


.players_choise .play_select::before {
    background: url('img/player_rounded_select.png') 50% / contain no-repeat;
}

.players_get_names input {
    width: 200px;
    height: 32px;
    border-radius: 100px;
    border: 2px solid #000000;

    background: #FFF;
    float: right;
    margin-right: 5%;

    color: #000;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    padding: 17px 21px;
}
.player_id .team_logo {
    width: 46px;
    height: 44px;
    background-size: 95%;
}
.player-info .team_logo {
    width: 78px;
    height: 76px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 95%;
}

.teamSelect.names .players_get_names .player_name {
    width:100%;
    min-height: 110px;
    background-position: 4% 50%;
    background-size: 25%;
    border-radius: 22.445px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    

}
.teamSelect.names .players_get_names .player_name.play_select {
    background-position: 4% 50%;
    background-size: 25%;
}
.players_get_names {
    height: 70vh;
    overflow: auto;
    padding-bottom: 80px;
}


.players_game {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    height: 80%;
}

.player_game {
    min-width: 105px;
    min-height: 105px;
    border-radius: 20%;
    background-color: #F8F8F8;
    margin-bottom: 10px;
}

.screen.game_go {
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.footer_player {
    width: 100%;
    height: 193.401px;
    position: absolute;
    bottom: 34px;
    width: 100%;
    background: #FFFFFFB2;
    padding: 5%;
    border-radius: 30px;
    color: #000000;

}

.footer_player .footer_button {
    width: 90%;
}

.footer_player .bear {
    width: 78px;
    height: 76px;
    background-image: url("img/animals/bear.png");
    background-size: 130%;

}

.footer_player h3 {
    margin: 1em 0 0.5em;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    /* 88.889% */
}

.footer_player p {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
}

.player-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
}

.game_score {
    background: url('img/score_point.svg') 50% / cover no-repeat;
    color: #FF825A;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;

    font-size: 16px;
    font-weight: 700;
    line-height: 16px;

}

.footer_player .game_score {
    width: 39px;
    height: 26px;
    background: url("img/footer_info_player_score.png") 50% / cover no-repeat;

}

.game_go.playing .game_score {

    width: 41px;
    height: 42px;
}
.game_go .nav {
    justify-content: start;
    height: 91.2px;
    
}

.game_go .btn-menu {
    position: static;
    left: 0;
}

.game_go.playing .game_nav .bear {
    width: 35px;
    height: 34px;
    margin-right: 5px;
    background-size: 150%;
}

.game_go.playing .game_nav {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    /* 88.889% */
}

.card {

    background: url("img/bg.png") no-repeat;
    background-size: cover;
    width: 38.8vh;
    height: 66.7vh;
    margin: 0 auto;
    transform: rotate(-1deg);
    border: 2px solid #000000;
    border-radius: 40px;
    animation: cardIn 1s;

}

@keyframes cardIn {
    from{
        transform: translateX(100%);
    }

}

.display {
    padding-top: 15%;
    top: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: #ffffff;

    border-radius: 28px;

    position: absolute;
}

.card .timer {
    color: #263238;

    font-size: 60px;
    font-weight: 700;
    line-height: 36px;
}

.card p {
    color: #263238;
    margin-top: 5%;



    font-size: 16px;

    font-weight: 500;
    line-height: 16px;
}



.container_btns {
    display: flex;
    justify-content: space-between;
    width: 84%;
    height: 8%;
    position: fixed;
    bottom: 40px;
    left: 8%;
    right: 8%;
}

.btn_no {
    border-radius: 10px;
    background-color: #FFEACB;
    width: 48%;
    background-image: url('img/cancel.svg');
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #000000;
    -webkit-box-shadow: 4px 4px 0px 1px rgba(34, 60, 80, 0.3);
-moz-box-shadow: 4px 4px 0px 1px rgba(34, 60, 80, 0.3);
box-shadow: 4px 4px 0px 1px rgba(34, 60, 80, 0.3);
}

.btn_yes {
    border-radius: 10px;
    background-color: #1A54A0;
    width: 48%;
    background-image: url('img/done.svg');
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #000000;
    -webkit-box-shadow: 4px 4px 0px 1px rgba(34, 60, 80, 0.3);
-moz-box-shadow: 4px 4px 0px 1px rgba(34, 60, 80, 0.3);
box-shadow: 4px 4px 0px 1px rgba(34, 60, 80, 0.3);
}

.btn_no:active {
    background-color: #beae95;
}
.btn_yes:active {
    background-color: #12407a;
}



.footer_game {
    position: absolute;
    bottom: 52px;
    left: 0;
    right: 0;
    width: 100%;
 height: 62px;
    margin: 0 auto;
    background-image: url("img/shot.svg");
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;

    color: #FFF;

text-align: center;
font-family: "Annie Use Your Telescope";
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;

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

}
.footer_game.video {
    background-image: url("img/shot2.svg");
}

.share_container {
    position: relative;
    width: 35.3vh;
    height: 57.3vh;
    top: calc(35% - (57.3vh / 2));
    left: calc(50% - (35.3vh / 2));
    /* padding-top: 0.6vh; */
    
    border-radius: 30px;
    /* background: rgba(0, 0, 0, 0.60); */
    z-index: 1;
    outline: 100vh solid rgba(0, 0, 0, 0.60);

}
/* .share_container::after {
 content: '';
 position: absolute;
 top: -100%;
 bottom: -100%;
 right: -100%;
 left: -100%;
 background: rgba(0, 0, 0, 0.60);
 z-index: -1;
} */

.animal_image {

    background-repeat: no-repeat;
    background-size: contain;
    height: 80%;
    background-position: center;
}

.share_container .animal_image {
    position: relative;
    /* width: 34.1vh;
    height: 48.6vh; */
    height: 47vh;
    margin: 0 auto;
    border-radius: 30px 30px 0 0;
    background-color: #d9d9d900;
    border: 5px solid rgba(0, 0, 0, 0.80);

}

.share_container .animal_image .close {
    position: absolute;
    right: 5%;
    top: 3%;
    background-image: url("img/cancel\(x\).svg");
    width: 16px;
    height: 16px;

}

.share_container h2 {
    color: #FFF;

text-align: center;
font-family: "Annie Use Your Telescope";
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
    background: rgba(0, 0, 0, 0.80);
    padding-top: 2vh;
    border-radius: 0 0 30px 30px;
    
    height: 10.3vh;


}

.animal_image .end_game_img {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.next_game .footer_button {
    background: #FFEACB;
    color: #FF825A;
}

.player_game.score {
    /* background-color: #FFEED4; */
    position: relative;
}

.player_game.score span {
    padding: 0.6em;
    position: absolute;
    right: -0.6em;
    top: -0.6em;
    background-image: url("img/score_player.svg");
    background-size: contain;
    background-repeat: no-repeat;

    color: #FFF;
    display: flex;
    justify-content: center;
    width: 34px;
    height: 34px;

    font-family: Montserrat, "Arial";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}

.game_score_menu .main_game h1 {
    margin-top: 16.6vh;
    text-align: left;

    font-size: 26px;
    font-weight: 400;
    line-height: 44px;
    text-transform: uppercase;
}

.game_score_menu .main_game h1 span {
    font-size: 36px;
    font-weight: 700;
}

.game_score_menu .player_score_menu {
    position: relative;
    background-size: 25%;
    min-height: 110px;
    border-radius: 22.445px;
    background-position: 5% 50%;
    margin-bottom: 10px;
    width: 100%;
}

.game_score_menu .player_score_menu p {
    font-family: Montserrat, "Arial";
    font-size: 16px;
    font-weight: 500;
    position: absolute;
    top: calc(50% - (1em / 2));
    left: 125px;
}

.game_score_menu .player_score_menu .score_menu {
    border-radius: 10px;
    border: 1px solid #EDE6E6;
    width: 101px;
    height: 50px;
    background: #FFF;
    color: #000;

    font-family: Montserrat, "Arial";
    font-size: 16px;

    font-weight: 700;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    right: 39px;
    top: calc(50% - (50px / 2));
}

.menu_nav_list {
    position: fixed;
    
    z-index: 2;
    top: 102px;
    right: 0;
    width: 310px;
    height: 231px;
    border-radius: 30px 0px 0px 30px;
    background: #fffffffa;
    backdrop-filter: blur(50px);
    border: 2px solid #000;
    border-right: 0;
    padding: 30px 22px 0 25px;
}

.menu_nav_list p {
    margin-top: 10px;
    color: #000000;

    font-family: "Annie Use Your Telescope";
    font-size: 28px;
    font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}

.menu_nav_list h2 {
    color: #000000;

    font-family: "Annie Use Your Telescope";
    font-size: 28px;
    font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
    
}

.menu_nav_close {
    position: absolute;
    top: 35px;
    right: 22px;
}

.screen.game_score_menu::before {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.60);
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    z-index: 1;
}

.screen.game_score_menu.end_game::before {
    display: none;
}

.screen.game_score_menu.end_game h1 {
    margin-top: 33px;
    text-align: center;

    font-family: YS Text;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 45px;
    text-transform: uppercase;
}
.end_game h1 {
    margin-bottom: 5.5vh;
}


.game_score_menu.end_game .player_score_menu .score_menu {
    padding: 0;
    background: none;
    border: 0;
    color: #000;
    right: 40px;
    width: 2em;
    height: 1em;
    top: calc(50% - (1em / 2));

    font-family: Montserrat, "Arial";
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
}




.game_score_menu.end_game .winner .score_menu::after {
    content: "WINNER";
    position: absolute;
    bottom: -1rem;
    color: #000;

    font-family: Montserrat, "Arial";
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 16px;
}

.game_score_menu.end_game .winner .score_menu::before {
    content: "";
    position: absolute;
    background-image: url("img/crown.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    top: -30px;
    width: 42px;
height: 28px;
}
.again_play::after {
    content: '';
 position: absolute;
 top: -500%;
 bottom: -500%;
 right: -500%;
 left: -500%;
 background: rgba(0, 0, 0, 0.60);
 z-index: -2;
}

.again_play {
    width: 298px;
height: 205px;
border-radius: 30px;
background: rgba(0, 0, 0, 0.60);

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;


color: #FFF;
font-family: Inter, YS Text;

font-style: normal;
font-weight: 600;
line-height: 16px; /* 66.667% */
text-transform: uppercase;

position: absolute;
z-index: 1;
top: calc(50% - (205px / 2));
left: calc(50% - (298px / 2));
}
.again_play h1 {
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 25px;
    font-family: "Annie Use Your Telescope";
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}

.again_play h2 {
    width: 90%;
    border-top: 1px solid #ffffff70;
    color: #FFF;

font-family: YS Text;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 16px; /* 88.889% */
padding: 20px 0;
}



/* player icons*/
.team1 {
    background-image: url("img/animals/team1.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.team1.play_select {
    background-image: url("animation/anim_avatars/pink_dithered_0.2.gif");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.team1.winner {
    background-image: url("animation/anim_avatars/pink_dithered_0.2.gif");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 5% 50%;
}

.team2 {
    background-image: url("img/animals/team2.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    
}
.team2.play_select {
    background-image: url("animation/anim_avatars/pinkorange_dithered_0.2.gif");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.team2.winner {
    background-image: url("animation/anim_avatars/pinkorange_dithered_0.2.gif");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 5% 50%;
}

.team3 {
    background-image: url("img/animals/team3.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.team3.play_select {
    background-image: url("animation/anim_avatars/violet_dithered_0.2.gif");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.team3.winner {
    background-image: url("animation/anim_avatars/violet_dithered_0.2.gif");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 5% 50%;
}

.team4 {
    background-image: url("img/animals/team4.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: 50% 45%;
}
.team4.play_select {
    background-image: url("animation/anim_avatars/yellow_dithered_0.2.gif");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.team4.winner {
    background-image: url("animation/anim_avatars/yellow_dithered_0.2.gif");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 5% 50%;
}

.team5 {
    background-image: url("img/animals/team5.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.team5.play_select {
    background-image: url("animation/anim_avatars/teal_dithered_0.2.gif");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.team5.winner {
    background-image: url("animation/anim_avatars/teal_dithered_0.2.gif");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 5% 50%;
}

.team6 {
    background-image: url("img/animals/team6.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.team6.play_select {
    background-image: url("animation/anim_avatars/blue_dithered_0.2.gif");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
.team6.winner {
    background-image: url("animation/anim_avatars/blue_dithered_0.2.gif");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 5% 50%;
}

/* cards */
.card_img {
    background-position: 50% 80%;
    background-repeat: no-repeat;
    background-size: 70%;

}

.king_kong {
    background-image: url("img/animals/king_kong.png");
    background-position: 50% 80%;
    background-repeat: no-repeat;
    background-size: 70%;

}

/* animals */


.dino_rex_img {
    background-image: url("img/animals/dinoRexReal.png");
}

.king_kong_img {
    background-image: url("img/animals/king_kong_real.png");
}

.tree_img {
    background-image: url("img/animals/tree.png");
}

.dwarf_img {
    background-image: url("img/animals/dwarf.png");
}

.dragon_img {
    background-image: url("img/animals/dragon.png");
}


.end_game_img.dino_rex_img {
    width: 353px;
    height: 365px;
    bottom: 14vh;
    left: 40%;
    transform: scaleX(-1);
    z-index: -2;

}

.end_game_img.king_kong_img {
    width: 162px;
    height: 230px;
    bottom: 25vh;
    left: -5%;
    z-index: -2;
}

.end_game_img.tree_img {
    
    width: 538px;
    height: 538px;
    left: calc(50% - (538px / 2));
    bottom: 12vh;
    z-index: -3;
}

.end_game_img.dwarf_img {
    width: 95px;
    height: 108px;
    bottom: 15vh;
    z-index: -2;
    left: 15%;
}

.end_game_img.dragon_img {
    width: 114px;
    height: 66px;
    left: 57%;
    top: 15vh;
}
.disabled {
    pointer-events:none;
    opacity:0.5;
}
.instruction {
    width: 100%;
    max-width: 400px;
    position:fixed;
    top: 20vh;
    left: 0;
    z-index:-1
}
.instruction p {
    color: #FFF;

text-align: center;
font-family: "YS Display";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
width: 300px;
margin: 0 auto;

}
.photo_button {
    height: 100%;
    aspect-ratio: 1;
    position: absolute;
    left: calc(50% - 30px);
}
#next_game .next_button {
    bottom: 80px;
}
#results {
    z-index: 9;
    position: fixed;
    left: 4%;
    top: 0;
}
#menu {
    position: fixed;
    left: 4%;
    top: 0;
    z-index: 10;
}

#whoms_first .players_score {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#whoms_first .players_score .player_score_menu {
    width: 30%;
    background-position: center;
    background-color: #ffffff00;
    border: 0;
    box-shadow: none;
    background-size: 90%;

}
#whoms_first .players_score .player_score_menu::before {
    content: '';
    position: relative;
    display: block;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url('img/player_rounded.png') 50% / contain no-repeat;
}
#whoms_first .players_score .player_score_menu.play_select::before {
    content: '';
    position: relative;
    display: block;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url('img/player_rounded_select.png') 50% / contain no-repeat;
}

#next_game .player_game {
    background-color: #ffffff00;
    min-height: 106.14px;
}
#next_game .player_game::before {
    content: '';
    position: relative;
    display: block;
    z-index: -1;
    width: 100%;
    min-height: 106.14px;
    background: url('img/player_rounded.png') 50% / contain no-repeat;
}
#next_game .player_game.play_select::before {
    content: '';
    position: relative;
    display: block;
    z-index: -1;
    width: 100%;
    min-height: 106.14px;
    background: url('img/player_rounded_select.png') 50% / contain no-repeat;
}
#results .main_game {
    overflow: auto;
    height: 56vh;
}
.results .main_game {
    overflow: auto;
    height: 54vh;
}
#name_card {
    margin-top: 30px;
    color: #000;
    line-height: 38px;

text-align: center;
font-family: "Annie Use Your Telescope";
font-size: 46px;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
}
.player_wrapper {
    position: relative;
    width: 97%;
    background: url('img/player_bg_maxwidth.png') 50% / 100% 100% no-repeat;
}
.player_wrapper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 4px;
    left: 2px;
    background: url("img/bg_shadow.png") 50% / 100% 100% no-repeat;
}

.player_wrapper_score {
    position: relative;
    width: 97%;
    background: url('img/player_bg_maxwidth_white.png') 50% / 100% 100% no-repeat;
}
.player_wrapper_score::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 4px;
    left: 2px;
    background: url("img/bg_shadow.png") 50% / 100% 100% no-repeat;
}
.player_wrapper_score.winner {
    width: 97%;
    background: url('img/player_bg_maxwidth.png') 50% / 100% 100% no-repeat;
    
}

/*animation*/
.players_choise .player.anim_in_player_quantity {
    animation: inPlayerBottom 2s;   
     
}


.players_get_names .player_wrapper.anim_player_letsname {
    animation: inPlayerLeft 1s;
}
.players_get_names .player_name.anim_first_player {
    animation: bounceName 2s 3;
}

.player_id .team_logo.anim {
    animation: bounce 2.5s 1;
}
.game_score.anim {
    animation: rotateScore 2s ;
}

.btn_sound_off {
    position: relative;
}
.btn_sound_on {
    position: relative;
}
.btn_sound_on::after{
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    background: url('img/Volume\ high.svg');
    top: calc(50% - 14px);
    right: -55px;
}
.btn_sound_off::after{
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    background: url('img/volumeX.svg');
    top: calc(50% - 14px);
    right: -45px;
}
.team_logo.play_select{
    background-size: 125%;
}
#whoms_first .player_score_menu.play_select {
    background-size: 90%;
}

@keyframes rotateScore {
    0% {
        transform: rotate(0deg);
    }
    2% {
        transform: rotate(-7deg) translateY(-5px);
    }
    4% {
        transform: rotate(-7deg) translateY(-15px);
    }
    8% {
        transform: rotate(-7deg) translateY(15px);
    }
    40% {
        transform: rotate(0deg);
    }
    
    100% {
        transform: rotate(0deg);
    }
}

@keyframes inPlayerBottom {
    from{
        margin-top: 200%;
    }
    70% {
        margin-top: 200%;
    }
    
}

@keyframes inPlayerLeft {
    from{
        margin-left: -100%;
    }
    
    
}

@keyframes bounceName {
    10%{background-position:7% 35%;}
    20%{background-position:7% 50%;}
    30%{background-position:7% 35%;}
    40%{background-position:7% 50%;}
    50%{background-position:7% 35%;}
    60%{background-position:7% 50%;}
    70%{background-position:7% 35%;}
    80%{background-position:7% 50%;}
    90%{background-position:7% 35%;}
    
}
@keyframes bounceWin {
    10%{background-position:10% 35%;}
    20%{background-position:10% 50%;}
    30%{background-position:10% 35%;}
    40%{background-position:10% 50%;}
    50%{background-position:10% 35%;}
    60%{background-position:10% 50%;}
    70%{background-position:10% 35%;}
    80%{background-position:10% 50%;}
    90%{background-position:10% 35%;}
    
}
@keyframes inPlayer {
    from{
        margin-top: 200%;
    }
    70% {
        margin-top: 200%;
    }
    
}
#whoms_first .player_score_menu {
    position: relative;
    text-align: center;
    margin-bottom: 2em;
}
#whoms_first .player_score_menu p {
    position: absolute;
    top:  100%;
    width: 100%;
    left: 0;
    
}
.reset_button {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 65px;
    background: url('img/btn_reset.svg') 50% 60% / 26px 30px  no-repeat, 
    url('img/Group\ 2087325650.svg') 50% / cover no-repeat;
}