/*tiles.css*/

/*Piece that shows on the initialization form*/
.tile.demo{
	width: 50px;
	height: 50px;
	
	font-size: 45px;
	
	--pColor: #333;
	--sColor: #bbb;
}

.tile{
	background: #bbb;
	
	display: grid;
	place-items: center;
	z-index: -1;
	
	cursor: pointer;
}

.tile.clickable:hover{
	background: #bbba;
}

.tile > div{
	transition-duration: 0.2s;
}

/*Allows logos in center of tile to be hidden before game board transitions and during promotions or demotions*/
.tile.shrink > div{
	transform: scale(0);
}
/*
.landmark{
	display: grid;
	place-items: center;
	
	background: #e11;
	color: #fff;
	
	overflow: hidden;
}
*/
.landmark{
	background-image: url("images/landmark.jpg");
	background-color: #ffd;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.player#active{
	--pColor: #fff;
	--sColor: #000;
	
	--pColorFade: #fff;
	--sColorFade: #000;
}
/*
.player-1{
	--pColor: #00f;
	--sColor: #4ff;
	
	--pColorFade: #00f7;
	--sColorFade: #4ff7;
}
.game-state-4 .player-1:hover{
	--pColor: #00fa;
	--sColor: #4ffa;
	
	--pColorFade: #00f5;
	--sColorFade: #4ff5;
}
.player-2{
	--pColor: #f00;
	--sColor: #fa5;
	
	--pColorFade: #f007;
	--sColorFade: #fa57;
}
/*
.game-state-4 .player-2:hover{
	--pColor: #f00a;
	--sColor: #fa5a;
	
	--pColorFade: #f005;
	--sColorFade: #fa55;
}
*/

/*Meant to be applied to a game board; Shrinks all center logos for a certain player's pieces; used when transitioning between boards*/
.shrink-player-1 .player-1 > div{
	transform: scale(0);
}
.shrink-player-2 .player-2 > div{
	transform: scale(0);
}

.player{
	display: grid;
	position: relative;
	place-items: center;
	background: var(--pColor);
	color: var(--sColor);
	cursor: pointer;
}


.dep{
	background: var(--pColorFade);
	color: var(--sColorFade);
}
.dep.shrink, .shrink-player-1 .player-1.dep, .shrink-player-2 .player-2.dep{
	background: var(--pColor);
	color: var(--sColor);
}

.reg > div{
	position: relative;
	width: .55em;
	height: .55em;
}
.reg > div::after, .reg > div::before{
	content: "";
	position: absolute;
	border-style: solid;
	border-width: .25em;
	width: 0;
	height: 0;
}
.reg > div::after{
	top: 0em;
	left: 0em;
	border-color: var(--sColor) #0000 #0000 var(--sColor);
}
.reg > div::before{
	bottom: 0em;
	right: 0em;
	border-color: #0000 var(--sColor) var(--sColor) #0000;
}
.num > div{
	margin: -15vw 0;
}

/*Styles for the display tile that appears below each player's name in the player card*/
.sample-tile{
	--pColor: #555;
	--sColor: #bbb;
	
	border: 1px solid black;
	
	width: 1em;
	height: 1em;
	
	margin: 5px auto;
}
.player-card > .player-1:hover{
	--pColor: var(--pColor);
	--sColor: var(--sColor);
}

/*Lights will be yellow by default.*/
.light{
	--lightColorInner: #fff;
	--lightColorOuter: #ff0;
}
/*Set light to approximate active player's colors.*/
/*.game-state-4 .light{
	--lightColorInner: #fff;
	--lightColorOuter: #00f;
}
.game-state-5 .light{
	--lightColorInner: #fff;
	--lightColorOuter: #f00;
}*/
.lights-on .light-on{
	background-image: radial-gradient(var(--lightColorInner), var(--lightColorOuter));
}