/* === 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: visible;
	cursor: pointer;
	transform-style: preserve-3d;

	/* Peel progress: 0..10 (set via inline style or class) */
	--peel: 0;
	--peelR: calc(var(--peel) / 10);

	/* Add animation */
	animation: dealCard 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    
	/* First-person perspective – 3D tilt toward player.
	   As peel increases, card flattens and rotates slightly to reveal bottom-left. */
	transform: perspective(600px)
			   rotateX(calc(65deg - (65deg * var(--peelR))))
			   rotateY(calc(-8deg * var(--peelR)));
	transform-origin: 15% 100%;
}

/* Card back - ornate poker card design */
.card-back {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #2c1810 0%, #4a2820 100%);
	border: 3px solid #d4af37;
	border-radius: 8px;
	backface-visibility: hidden;
	z-index: 2;
	/* Rotate away as peel increases to expose the front */
	transform: rotateY(calc(-12deg * var(--peelR)));
	transform-origin: 15% 100%;
}

.card-back::before {
	content: '';
	position: absolute;
	inset: 8px;
	background-image: 
		repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(212, 175, 55, 0.1) 2px, rgba(212, 175, 55, 0.1) 4px),
		repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(212, 175, 55, 0.1) 2px, rgba(212, 175, 55, 0.1) 4px);
	border: 2px solid #d4af37;
	border-radius: 4px;
	opacity: 0.8;
}

.card-back::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	background: #d4af37;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.6;
}

/* Card front */
.card-front {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	border-radius: 8px;
	backface-visibility: hidden;
	z-index: 1;
	/* Always opaque; reveal happens by rotating the back away */
	opacity: 1;
	pointer-events: none;
}

/* Face-down state */
.card.face-down .card-back {
	opacity: 1;
	transform: rotateY(0deg);
}

/* Front stays opaque; back hides it until peeled */

/* Peeking state - partial reveal */
/* Legacy peeking class maps to a small peel */
.card.peeking { --peel: 2; }

/* Revealed state */
.card.revealed .card-back {
	transition: transform 0.4s ease-out, opacity 0.4s ease-out;
	transform: rotateY(-120deg);
	opacity: 0;
	pointer-events: none;
}

.card.revealed .card-front {
	transition: opacity 0.4s ease-out;
	opacity: 1;
	pointer-events: auto;
}

.card.revealed {
	cursor: default;
	/* Fully revealed, flat */
	--peel: 10;
}

/* Discrete peel states (optional class mapping) */
.card.peel-0 { --peel: 0; }
.card.peel-1 { --peel: 1; }
.card.peel-2 { --peel: 2; }
.card.peel-3 { --peel: 3; }
.card.peel-4 { --peel: 4; }
.card.peel-5 { --peel: 5; }
.card.peel-6 { --peel: 6; }
.card.peel-7 { --peel: 7; }
.card.peel-8 { --peel: 8; }
.card.peel-9 { --peel: 9; }
.card.peel-10 { --peel: 10; }

.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: 32px 0;
	perspective: 800px;
	perspective-origin: 50% 0%;
}

/* === 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(calc(65deg - (65deg * var(--peelR))))
			   rotateY(calc(-8deg * var(--peelR)))
			   rotate(-6deg) translateX(4px);
	margin-right: -12px;
}

.hole-cards .card:last-child {
	transform: perspective(600px)
			   rotateX(calc(65deg - (65deg * var(--peelR))))
			   rotateY(calc(-8deg * var(--peelR)))
			   rotate(6deg) translateX(-4px);
	margin-left: -12px;
}

/* Hover lift effect */
.hole-cards .card:hover {
	transform: perspective(600px)
			   rotateX(calc(65deg - (65deg * var(--peelR))))
			   rotateY(calc(-8deg * var(--peelR)))
			   translateY(-4px) scale(1.03) rotate(0deg);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

/* Deal animation - card thrown from table center, spinning and growing */
@keyframes dealCard {
	from {
		transform: perspective(600px) translateY(-200px) translateZ(-100px) rotateY(720deg) rotateX(-295deg) scale(0.3);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	to {
		transform: perspective(600px) translateY(0) translateZ(0) rotateY(0deg) rotateX(calc(65deg - (65deg * var(--peelR)))) scale(1);
		opacity: 1;
	}
}

/* Fold animation */
.card.folding {
	animation: foldCard 0.4s ease-out forwards;
}

@keyframes foldCard {
	to {
		transform: translateY(30px) rotateZ(15deg) scale(0.9);
		opacity: 0;
	}
}

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

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