* {box-sizing:border-box}
html {min-height: 100%;}
body {height:100vh;margin: 0;padding:0;background:url(wood-bg.jpg);box-shadow:inset 0 0 100px rgba(0, 0, 0, 0.5);font-family: 'Lexend', sans-serif;line-height:1.5;font-size:1rem;}
input[type="text"] {width:5rem}
h2 {text-align:center;color:#fff;margin:0 0 1rem 0;font-size:2rem}

.content {width:100%;max-width:1300px;margin:0 auto;padding:0;height:100%;position:relative}
.strate {margin:0;padding:0}
.tuiles {display: grid;}
.tuiles-2 {grid-template-columns:65% 35%;  grid-gap: 10px;}

.tuile {background:#eeeeee;padding:1rem;border:1px solid #ccc;border-radius:5px}
.tuile-etage {margin-bottom:0;padding:1rem;border-radius:5px}
.tuile-transparente {background:transparent;padding:0;border:0}

.mydice {width:96px;height:96px;display:inline-block;padding:8px;background:#eee;border-radius:5px;cursor:pointer;box-shadow: inset 0 0 20px #636363;margin: 0 2rem 0 0;box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.4), 0px 0px 45px 0px rgba(0, 0, 0, 0.4) inset;}
.mydice:last-child {margin:0}
.myselected {/*background:#999*/}
.noclick {pointer-events:none;opacity:0.2}
.crooked:nth-child(odd) { transform:rotate(5deg)}
.crooked:nth-child(even) { transform:rotate(-5deg)}

#monPlateau {width: 100%;height: 220px;display: block;	text-align:center;background-color: lightgray;padding:70px 0;margin:0;background-image: url(table-logo.png), url(black-felt.png), url(velvet-bg.jpg);background-position: center;background-repeat: no-repeat, repeat, repeat;background-size: 220px, auto, auto;box-shadow: 10px 30px 60px -10px rgba(0, 0, 0, 0.4) inset, 5px 5px 10px -5px rgba(0, 0, 0, 0.2) inset, 0 70px 120px rgba(0, 0, 0, 0.3) inset;position: relative;border-top: 1px solid rgba(0, 0, 0, 0.75);border-bottom: 1px solid #f3e6d6;}  
#monPlateauReserve {height:120px;display:block;box-shadow: 10px 30px 40px -10px rgba(0, 0, 0, 0.4) inset, 5px 5px 10px -5px rgba(0, 0, 0, 0.2) inset;border-radius: 20px;border-bottom: 1px solid #EFDEC9;border-right: 1px solid #E2CBAF;margin:1rem 0 0 0;background: url(wood-bg.jpg);	background-position:-20px 0;	padding:10px 45px;}
#roll {text-align:center}
#NewGameExpando {display: none;	position: absolute;	bottom: 0.5rem;	left: -1rem;	height: 2rem;	width: 2rem;	line-height: 0.8;cursor:pointer}
#ButtonClose {	display: block;	position: absolute;	top: 4px;	right: 11px;	color: #ccc;cursor:pointer}
#RollValue {margin:0;padding:0;color:#999;text-align:center}
#player3, #player4 {display:none}

.button {background: #00992B;font-size: 2rem;color: white;width: 4rem;	height: 4rem;	padding: 0;	text-align: center;border-radius: 50%;	cursor: pointer;	display: inline-block;	font-weight: 700;	line-height: 2;	margin:0 1rem 0 0; 	box-shadow: inset 0 0 20px #636363;}
.button:last-child {margin:0;}
.player-group {	background: #444;	padding: 2rem;	position: absolute;	bottom: 2rem;	left: 0;}
.player-group input, .player-group button, .player-group select  {padding:0 1rem;border:0;display:inline-block;line-height:2;font-size:1rem;height:2rem}

.scorecard {border-collapse: collapse;margin:1rem 0 0 0;background:white;font-size:1.2rem;font-weight:700}
.scorecard td {border:1px dotted #000;padding:0.1rem 1rem;text-align:right;cursor:pointer;width:auto}
.scorecard td.figure-label {width:5rem}
.disabled {background:#ccc}
.figure-sub td {background:#ddd;font-weight:700}
.noselect {		-webkit-touch-callout: none;		-webkit-user-select: none; 	-khtml-user-select: none; 	-moz-user-select: none; -ms-user-select: none; 		user-select: none; }