.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);*/ /*}*/