[v-cloak] {
	display: none
}
.gold {
	color: #D5AD6D;
	/*if no support for background-clip*/
	background: linear-gradient(transparent, transparent),
		linear-gradient(to bottom, rgba(213, 173, 109, 1) 0%, rgba(213, 173, 109, 1) 26%, rgba(226, 186, 120, 1) 35%, rgba(163, 126, 67, 1) 45%, rgba(145, 112, 59, 1) 61%, rgba(213, 173, 109, 1) 100%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px rgba(163, 126, 67, 1);
}
.game-header {
	display:flex;
	justify-content: space-between;

	.deal {
		width: 5rem;
	}
	.bet-buttons {
		display:flex;
		gap:0.124rem;

		button {
			width:3.25rem;
		}
	}
	.bet-amt {
		font-weight:bold;
		text-align: center;
	}
	.cash {
		font-size:2rem;
		font-weight:bold;
		align-self:center;
	}
	.deal {
		width:100%;
	}
}
.board {
	background: #ADA;
	border: 2px solid #585;
	margin: 1rem 0;
	padding: 0.5rem;
	border-radius: 1rem;
	display:flex;
	flex-direction: column;
	gap:0.5rem;
	
	.hand {
		border:1px dotted #585;
		padding:0.5rem;
		border-radius:0.5rem;
		height:9.5rem;
		display:flex;
		position: relative;
		justify-content: space-between;

		/* &.lose {
			background-color:#DAA;
		} */
	}

	.buttons {
		align-self:end;
		display:flex;
		flex-direction: column;
	}

	.value {
		position: absolute;
		right: 1rem;
		top: 0.5rem;
		font-size: 1.5rem;
		font-style: italic;
		color: #777;
		font-weight: bold;
	}

	&.dealer {
		> div::after {
			content: 'DEALER';
			position: absolute;
			font-weight: bold;
			font-size: 2rem;
			right: 1rem;
			bottom: 0.5rem;
			color: #AAA;
		}	
	}
	
	.cards {
		display:flex;
		height:9rem;
		position: relative;
	}

	/* .card {
		position:absolute;
		left:calc(var(--index) * 7rem * ((8 - var(--cards)) * 0.175))
	} */
	.card {
		font-family: Lora, serif;
		font-weight: 700;
		float: left;
		margin: 0 10px 10px 0;
		width: 5rem;
		height: 7rem;
		background: linear-gradient(left top, white, #f0f0f0);
		border-radius: 0.25rem;
		box-shadow: 2px 2px 6px rgba(black, 0.2),
		  inset 0 0 0 1px rgba(black, 0.2);
		position: relative;
		&.red {
		  color: crimson;
		}
		.corner {
		  position: absolute;
		  text-align: center;
		  &.top { top: 10px; }
		  &.left { left: 10px; }
		  &.bottom { bottom: 10px; }
		  &.right { right: 10px; }
		  h1 {
			font-size: 1.5em;
		  }
		  pip {
			font-size: 1.3em;
		  }
		  &:last-of-type {
			transform: rotate(180deg);
		  }
		}
		.pip {
		  font-family: serif;
		  &.clubs:before { content: '\02663'; }
		  &.hearts:before { content: '\02665'; }
		  &.spades:before { content: '\02660'; }
		  &.diamonds:before { content: '\02666'; }
		}
		.pips {
		  .pip {
			position: absolute;
			transform: translate(-50%, -50%);
			font-size: 2.3em;
			&.flip {
			  transform: translate(-50%, -50%) rotate(180deg);
			}
		  }
		  h1 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 4em;
			border-width: 1px;
			border-style: solid;
			text-align: center;
			line-height: 1rem;
			width: 1.5rem;
		  }
		}
	  }
}

/* .deal {
	width: 8rem;
	height: 4rem;
} */

@media (pointer:none), (pointer:coarse) {
	.game-header {
		.cash { 
			font-size: 1.5rem;
		}
	}
	.board {
		.card {
			left:calc(var(--index) * 7rem * ((8 - var(--cards)) * 0.05))
		}
	}
}