GameBoard{
	--cardWidth: 300px;
	--cardHeight: 420px;
	display: block;
	line-height: 0;
	position: relative;
	box-sizing: border-box;
	/*temp*/
	width: 500px;
	height: 500px;
	font-size: calc(1em * var(--size) / 200);
}



GameBoard .cardStack{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: scale(calc(var(--size) / 900)) translate(calc(var(--cardWidth) / -2), calc(var(--cardHeight) / -2));
}
GameBoard .cardStack.perspective{
	perspective: 1000px;
	perspective-origin: calc(var(--cardWidth) / 2) calc(var(--cardHeight) / 2);
}

GameBoard .playingCard{
	--number: 0;
	--color: 0;
	--x: 0px;
	--y: 0px;
	--rotation: 0deg;
	--duration: 1s;
	--motion: linear;
	position: absolute;
	box-shadow: 0 0 5px 2px #0005;
	background-image:url("/img/deck.png");
	background-position: calc(var(--number) * -1 * var(--cardWidth)) calc(var(--color) * -1 * var(--cardHeight));
	width: var(--cardWidth);
	height: var(--cardHeight);
	transform: translate(var(--x), var(--y)) rotate(var(--rotation));
	border-radius: 14px;
	transition: opacity var(--duration) linear,
				transform var(--duration) var(--motion);
}

GameBoard .playingCard:only-child{transform-style: preserve-3d}
GameBoard .playingCard.fading{opacity: 0}

GameBoard .players{
	--players: 3;
	position: absolute;
	left: 50%;
	top: 50%;
}

GameBoard .player-indicator{
	--direction: 90deg;
	position: absolute;
	width:  calc(var(--size) * 0.2px);
	height: calc(var(--size) * 0.2px);
	background-image: url("/img/frames/KeystoneFrame0.png"), url("/img/deckBack.png");
	background-size: cover, 65%;
	transform: translate(-50%, -50%) rotate(var(--direction)) translate(calc(var(--size) * 0.39px)) rotate(calc(-1 * var(--direction)));
	transition: transform 1s linear;
	text-align: center;
	line-height: calc(var(--size) * 0.2px);
	font-weight: bold;
	color: white;
	border-radius: 50%;
	background-position: top, center;
}

GameBoard .player-indicator::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 10;
	background-image: url("/img/frames/KeystoneFrame2.png");
	background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 0.2s linear;

}

GameBoard .player-indicator.active::after{opacity: 1}


GameBoard svg{position: relative}
GameBoard svg path{fill:transparent}

GameBoard svg textPath{
	font-size: 0.4%;
}