﻿
.copyButton {
    cursor: pointer;
}

    .copyButton:hover {
        color: green;
    }


.CodeGame {
    color: forestgreen;
    /*font-size: 24px;*/
    background-color: PaleGoldenrod;
    width: 90%;
    /*max-width: 90%;*/
    /*margin-bottom: 5px;*/
    text-align: center;
   /* font-size: 5.0vh;*/
}


.InputPlayerName {
    background-color: PaleGoldenrod;
}


.EditLabel {
    font-size: 3vh;
    font-style: italic;
}

.ServiceMess {
    font-size: 4.5vh;
}



.btn {
    background-color: #ddd;
    border: none;
    color: black;
    /*padding: 16px 32px;*/


    text-align: center;
    /*margin: 4px 2px;*/



    transition: 0.3s;
    max-width: 95%;
    opacity: 0.8;
    cursor: pointer;
}

    .btn:hover {
        background-color: #3e8e41;
        color: white;
       
    }






#fname {
   max-width: 90%;
    font-size: 2em;
    margin-bottom: 0.5em;
    text-align: center;
}





.ManagePanel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}


/* Разрешаем клики по нужным объектам */
.SouthWraper .Domino,
.SouthWraper .bMamage {
    pointer-events: auto; /* возвращаем кликабельность */
    cursor: pointer;
}







.bManagerGame {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
}



    .bManagerGame:hover {
        color: LimeGreen;
  
    }









.bFlag {
    background: no-repeat url('../images/bFlag.png');
    background-size: cover;
    cursor: pointer;
    
}




.bDisk {
    background: no-repeat url('../images/diskoff.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}








.bProm {
    cursor: pointer;
}






.bDraw {
    background: no-repeat url('../images/bDraw.png');
    /*background-size: cover;*/

    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
   

    cursor: pointer;
}





.bDrawAccept {
    background: no-repeat url('../images/bDrawAccept.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;



    animation-duration: 1.0s;
    animation-name: alarm;
    animation-iteration-count: infinite;
    cursor: pointer;
}



.bCombination {
    background: no-repeat url('../images/cardComb2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}












/*Отзывчивый размер шрифта*/


@media screen and (orientation: portrait) 
{

    .bDraw, .bDrawAccept {
        width: 5.34vw;
        height: 5vw;
       /* margin-left: 1vw;*/
    }

    .bFlag {
        width: 5.4vw;
        height: 5.0vw;
       /* margin-left: 1vw;*/
    }

    .bProm {
        font-size: 5vw;
        /*margin-left: 1vw;*/
    }

    .bDisk {
        width: 5.34vw;
        height: 5vw;
    }







    .bManagerGame {
        font-size: 4vw;
        margin: 1.5vw;
    }


    .DicsribeButton 
    {
         margin-left: 1vw;
    }



    .btn {
        font-size: 3vw;
        padding: 1vw 2vw;
        margin: 1vw 1vw;
    }


    #regulations {
        font-size: 3.0vw; 
    }

   




}


@media screen and (orientation: landscape) {



    .bDraw, .bDrawAccept {
        width: 2.34vh;
        height: 2vh;
       /* margin-left: 1vh;*/
    }

    .bFlag {
        width: 2.4vh;
        height: 2.0vh;
        /*margin-left: 1vh;*/
    }

    .bProm {
        font-size: 2vh;
        /*margin-left: 1vh;*/
    }


    .bDisk {
        width: 2.34vh;
        height: 2vh;
    }







    .bManagerGame {
        font-size: 2vh;
        margin: 1vh;
    }


    .DicsribeButton {
        margin-left: 0.5vh;
    }



    .btn {
        font-size: 3vh;
        padding: 1vh 2vh;
        margin: 1vh 1vh;
    }



    #regulations {
        font-size: 3.0vh;   
    }



    .CodeGame {
        font-size: 2.0vh;
    }



}

















@keyframes alarm {
    0% {
        /*width: 2.5em;
        height: 2.5em;*/
        opacity: 1.0;
        border-color: red;
    }

    100% {
        /*width: 3.0em;
        height: 3.0em;*/
        opacity: 0.5;
        border-color: Aqua;
    }
}











#bStartGame{
    display:none;
}





















#SoundBox {
    position: absolute;
    display: block;
    top: 5%;
    right: 2%;
    width: 50px;
    height: 50px;
    background-size: cover;
    font-family: arial;
    font-size: 50px;
    color: #ffff00;
    z-index: 100;
    cursor: pointer;
    border: solid red;
    /* background: no-repeat url('/images/iconsOff.png');*/
    /* background: no-repeat;*/
}



.SoundOff {
    background: no-repeat url('../images/iconsOff.png');
}

.SoundOn {
    /*background: no-repeat url('/images/iconsOn.png');*/

    background: url('../images/iconsOn.png');
}





.bMamage {
    width: 3vw;
    height: 3vw;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    margin:1vh;
}


    .bMamage:hover {
        border: 4px solid white;
    }





.bScore {
    background: no-repeat url('../images/Background/Pen/Pen.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}



.bResigh {
    background: no-repeat url('../images/Background/Flag/White_flag_waving.svg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
   
}


.bBullet {
    background: no-repeat url('../images/Background/Bullet.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}





.bHelp {
    background: no-repeat url('../images/Background/Help/Help.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}



.bVist {
    background: url('../images/Background/reward.png') no-repeat center center;
    background-size: 100% 100%;
    border-radius: 50%;
    cursor: pointer;
    position: relative; /* 🔑 чтобы ::after сидел на кнопке */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    /* эффект наведения */
    .bVist:hover {
        transform: scale(1.1);
        box-shadow: 0 0 1vw gold;
    }

/* мигающая анимация */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0.5vw gold;
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 1.5vw gold;
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0.5vw gold;
    }
}

.bVist.pulse {
    animation: pulse 1.5s infinite;
}

/* бейдж с "+2" */
.bVist::after {
    content: "+5";
    position: absolute;
    top: -1vw;
    right: -1vw;
    background: gold;
    color: black;
    font-weight: bold;
    font-size: 1vw;
    padding: 0.2vw 0.6vw;
    border-radius: 1vw;
    border: 0.1vw solid #333;
    box-shadow: 0 0 0.5vw rgba(0,0,0,0.4);
}















.ManageGame {
    position: absolute;
    right: 1%;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: space-around;*/
    justify-content: center;
    /*background-color: antiquewhite;*/
    /* border-style: solid;*/
    height: 100%;
    width: 14vw;
}



.ManageBullet {
    position: absolute;

    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;

    left: calc(1% + 10vw);
   /* background-color: palegoldenrod;*/
    height: 100%;
    width: 10vw;
}