/* === Hole Cards Layout === */
.card {
	width: 80px;
	height: 112px;
	background: white;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
	position: relative;
	overflow: hidden;
	
	/* 3D effect - dramatic tilt for first-person view */
	transform: perspective(600px) rotateX(-65deg);
	transform-style: preserve-3d;
	transform-origin: center bottom;
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

.card::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 18px;
}

.card.red {
	color: #d32f2f;
}

.card.black {
	color: #212121;
}
.hole-cards {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 64px 0 32px;
	perspective: 800px;
}

/* === Individual Cards === */
.hole-cards .card {
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

/* Fan out the cards */
.hole-cards .card:first-child {
	transform: perspective(600px) rotateX(-65deg) rotate(-6deg) translateX(4px);
	transform-origin: center bottom;
	margin-right: -12px;
}

.hole-cards .card:last-child {
	transform: perspective(600px) rotateX(-65deg) rotate(6deg) translateX(-4px);
	transform-origin: center bottom;
	margin-left: -12px;
}

/* Hover lift effect - cards pop up from table */
.hole-cards .card:hover {
	transform: perspective(600px) rotateX(-65deg) translateY(-8px) translateZ(20px) scale(1.03) rotate(0deg);
	transform-origin: center bottom;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
}

/* === Mobile Tweaks === */
@media (max-width: 768px) {
	.hole-cards {
		margin: 18px 0 10px;
		gap: 10px;
	}

	.hole-cards .card {
		width: 60px;
		height: 84px;
	}
}