:root {
	--dimension: 40px;
	--couleurGrille: darkblue;
	--couleur1: crimson;
	--couleur2: gold;
}
.block .joueur1, .block .joueur2 {
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
}
.block .joueur1 {
	background-color: var(--couleur1);
}
.block .joueur2 {
	background-color: var(--couleur2);
}
#cadre {
	display: inline-block;
}
#choix {
	visibility: hidden;
	width: 100%;
	height: var(--dimension);
}
#choix table {
	margin: auto;
	border-spacing: calc(var(--dimension) / 10) 0;
}
#choix table tr td {
	cursor: not-allowed;
	width: var(--dimension);
	height: var(--dimension);
	border-radius: 50%;
}
#choix .joueur1, #choix .joueur2 {
	cursor: pointer;
}
#choix .joueur1:hover, .pion1 {
	background-color: var(--couleur1);
	box-shadow: 0 0 2px grey;
}
#choix .joueur2:hover, .pion2 {
	background-color: var(--couleur2);
	box-shadow: 0 0 2px grey;
}
.pion1, .pion2 {
	position: absolute;
	width: var(--dimension);
	height: var(--dimension);
	border-radius: 50%;
	z-index: -1;
}
#grille {
	border-top: solid calc(var(--dimension) / 10) var(--couleurGrille);
	border-bottom: solid calc(var(--dimension) / 10) var(--couleurGrille);
	border-left: solid calc(var(--dimension) / 5) var(--couleurGrille);
	border-right: solid calc(var(--dimension) / 5) var(--couleurGrille);
	box-shadow: 0 0 4px grey;
}
#grille table {
	margin: auto;
	border-collapse: collapse;
}
#grille table tr td {
	width: var(--dimension);
	height: var(--dimension);
	border: solid calc(var(--dimension) / 10) var(--couleurGrille);
	background: radial-gradient(transparent calc(67% - 1px), black, var(--couleurGrille) calc(67% + 1px));
}
#grille .joueur1 {
	background-color: var(--couleur1);
}
#grille .joueur2 {
	background-color: var(--couleur2);
}