jaipur-score/css/style.css

.group.inactive {
    opacity: 0.4;
}

.group {
    clear: both;
}

.group .coin:first-child {
    margin: 5px 0vh 5px 0vh;
}

.group .coin.blank {
    opacity: 0.7;
}

.group .coin.blank.selected {
    opacity: 1;
}

.group .coin.selected:first-child {
    margin: 5px 0vh 5px -4vh;
}

.group .coin.selected {
    float: right;
}

.group .coin {
    border-radius: 90px;
    display: inline-block;
    height: 9vh;
    width: 9vh;
    text-align: center;
    border: 1px solid transparent;
    margin: 5px 0vh 5px -4vh;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    color: #d8d8d8;
    background-position: center 72%;
    background-repeat: no-repeat;
    color: black;
    cursor: pointer;
    text-shadow: 0 0 2px #fff;
    font-size: 3vh;
}

.group .coin.leather {
    border-color: saddlebrown;
    background-image: url(../leather.svg);
    background-color: burlywood;
    background-size: 45%
}

.group .coin.spice {
    border-color: forestgreen;
    background-color: #dff9b6;
    background-image: url(../spice.svg);
    background-size: 60%
}

.group .coin.gold {
    border-color: goldenrod;
    background-color: #fcf4ca;
    background-image: url(../gold.svg);
    background-size: 40%;
}

.group .coin.diamond {
    border-color: darkred;
    background-color: #f66282;
    background-image: url(../diamond.svg);
    background-size: 48%;
}

.group .coin.fabric {
    border-color: purple;
    background-color: #f5d6f5;
    background-image: url(../fabric.svg);
    background-size: 71%;
}

.group .coin.silver {
    border-color: silver;
    background-color: #879fc6;
    background-image: url(../silver.svg);
    background-size: 44%;
}

/* PLAYERS START */

.player {
    border: 2px solid dodgerblue;
    padding: 0.5vh 4vh;
    margin: 1.5vh auto;
    width: 10vw;
    color: #444;
    cursor: pointer;
    border-radius: 2px;
    font-weight: bold;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    height: 5vh;
    width: 10vw;
    line-height: 5vh;
    text-align: center;
}

.player.selected {
    background: #6f9cc9;
    color: #f2eeee;
}

.accept {
    grid-area: acceptcontainer;
    visibility: hidden;
    border: 2px solid dodgerblue;
    margin: 1.5vh auto;
    max-width: 100%;
    height: 5vh;
    padding: 0.5vh 0vw;
    font-weight: bold;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    background-color: #bedfff;
    cursor: pointer;
    line-height: 5vh;
    text-align: center;
    display: flex;
    justify-items: center;
    flex-direction: row;
    justify-content: space-around;
}

.acceptcontainer .bonus {
    height: 5vh;
    width: 5vh;
    display: inline-block;
    margin: 0;
    border-radius: 50%;
    border: 1px solid dodgerblue;
    background: no-repeat #fff center center / 60% 60%;
    display: none;
}

.acceptcontainer .bonus.bonus5 {
    background-image: url(../bonus5.svg);
}

.acceptcontainer .bonus.bonus4 {
    background-image: url(../bonus4.svg);
}

.acceptcontainer .bonus.bonus3 {
    background-image: url(../bonus3.svg);
}

.accept.on {
    visibility: visible;
}

.accept.label {

}

.player1container {
    grid-area: player1container;
}

.player2container {
    grid-area: player2container;
}

.player.player1 {
}

.player.player2 {
}

.player .score {
    height: 50px;
    width: 23px;
    display: inline-block;
    background-image: none;
    background-size: auto auto;
    margin: 0 5px;
    background-image: url(../maharaja.svg);
    background-size: 100%;
    background-repeat: no-repeat;

}

.player .score:first-child {
    margin-left: 15px;
}

.scoreTable {
    width: 90vw;
    background: #fff;
    content: "";
    height: 70vh;
    position: absolute;
    top: 15vh;
    left: 5vw;
    box-shadow: 0 0 207px #0000027F;
    border: 3px solid #ccc;
    /*display: none;*/
}

/* PLAYERS END */

/* SCORE TABLE START */

.scoreTable.visible {
    display: block;
}

.scoreTable h1 {
    text-align: center;
    font-size: 10vh;

}

* {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}

.players_section, .camel_section {
    display: flex;
    justify-content: space-around;
    font-size: 45px;
}

.camel_section .player1_camel, .camel_section .player2_camel {
    background: url('../camel.svg') no-repeat 0 0 / 10vh 10vh;
    height: 10vh;
    width: 10vh;
    cursor: pointer;
    opacity: 0.1;
}

.camel_section .nobody {
    opacity: 0.1;
}

.camel_section .player1_camel.selected, .camel_section .player2_camel.selected, .camel_section .nobody.selected {
    opacity: 1;
}

.score_section {
    display: none;
    font-size: 35px;
    justify-content: space-around;
}

.score_section.show {
    display: flex;
}

.bonus_section {
    display: flex;
    justify-content: center;
}

.player1_bonus {
    text-align: right;
}

.player2_bonus {

}

.bonus_section span:first-child {
    margin: 1vh 0 1vh 1vw;
}

.bonus_section span {
    height: 5vh;
    width: 5vh;
    display: inline-block;
    margin: 1vh 0 1vh -3vw;
    border-radius: 50%;
    border: 1px solid dodgerblue;
    background: no-repeat #fff center center / 60% 60%;
    /*display: none;*/
}

.bonus_section .bonus3 span {
    background-image: url(../bonus3.svg);
}

.bonus_section .bonus4 span {
    background-image: url(../bonus4.svg);
}

.bonus_section .bonus5 span {
    background-image: url(../bonus5.svg);
}

/* SCORE TABLE END */

/*.acceptcontainer .bonus {*/
/*height: 5vh;*/
/*width: 5vh;*/
/*display: inline-block;*/
/*margin: 0;*/
/*border-radius: 50%;*/
/*border: 1px solid dodgerblue;*/
/*background: no-repeat #fff center center / 60% 60%;*/
/*display: none;*/
/*}*/

/*.acceptcontainer .bonus.bonus5 {*/
/*background-image: url(../bonus5.svg);*/
/*}*/
/*.acceptcontainer .bonus.bonus4 {*/
/*background-image: url(../bonus4.svg);*/
/*}*/
/*.acceptcontainer .bonus.bonus3 {*/
/*background-image: url(../bonus3.svg);*/
/*}*/