/* Shared styles for both card main and cover */
.card-cover,
.card-main {
	width: 120px;
	height: 180px;
	border-radius: 10px;
	backface-visibility: hidden;
	position: absolute;
	transition: transform 0.6s, box-shadow 0.6s;
	transform-origin: center center;
	border: 6px solid #d4af37;
	box-shadow: 0px 0px 20px 10px rgba(216, 155, 7, 0.05);
}

.card-cover {
	cursor: pointer; /* Show hand symbol on hover */
}

/* Semi-transparent background for both front and back */
.card-cover::before,
.card-main::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.8); /* 50% transparency on the card background */
	z-index: -1; /* Ensures it stays behind all content */
}

/* Back of the card */
.card-cover {
	background: none; /* Background handled by ::before pseudo-element */
}

.night-sky {
	position: relative;
	width: 120px;
	height: 180px;
}

.sunglow {
	position: absolute;
    width: 26px;
    height: 26px;
    background: radial-gradient(circle, #f0e6d6 20%, #f8eac5 60%, #d4af37 100%);
    border-radius: 50%;
    top: 52px;
    left: 47px;
    box-shadow: 0px 0px 15px 8px rgba(255, 255, 255, 0.04), 0px 0px 30px 6px rgba(255, 223, 0, 0.003);
  
}

/* Hover effect for the card */
.card:hover .card-cover {
	transform: rotateY(180deg); /* Rotate the card on hover */
	transition: transform 0.6s ease; /* Smooth transition */
}

.card:hover .card-main {
	transform: rotateY(0deg);
	transition: transform 0.6s ease;
}


.moon {
	position: absolute;
	width: 50px;
	height: 50px;
	background: radial-gradient(circle, #f0e6d6 20%, #f8eac5 60%, #d4af37 100%);
	border-radius: 50%;
	top: 40px;
	left: 35px;
	box-shadow: 0px 0px 15px 8px rgba(255, 255, 255, 0.4), 0px 0px 30px 10px rgba(255, 223, 0, 0.3);
}
.crater {
	position: absolute;
	background-color: rgba(212, 175, 55, 0.8);
	border-radius: 50%;
	box-shadow: inset 0px 0px 4px rgba(212, 175, 55, 0.8);
}

.crater-1 {
	width: 6px;
	height: 6px;
	top: 18px;
	left: 15px;
}
.crater-2 {
	width: 8px;
	height: 8px;
	top: 23px;
	left: 22px;
}
.crater-3 {
	width: 5px;
	height: 5px;
	top: 25px;
	left: 10px;
}

.star {
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: #f5bd02;
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	box-shadow: 0 0 12px 5px rgba(245, 189, 2, 0.8);
	animation: twinkle 2s infinite ease-in-out;
}

.star-1 {
	top: 5px; /* Close to the top-left corner */
	left: 5px; /* Close to the top-left corner */
}

.star-2 {
	top: 5px; /* Close to the top-right corner */
	left: 110px; /* Since the card is 120px wide, 105px brings it near the right edge */
}

.star-3 {
	top: 170px;
	left: 5px;
}

.star-4 {
	top: 170px; /* Close to the bottom-right corner */
	left: 110px; /* Close to the bottom-right corner */
}

/*.star-5  {
  top: 170px;
  left: 55px;
} */

.tarot-text {
	position: absolute;
	bottom: 30px;
	width: 100%;
	align-content: center;
	text-align: center;
	font-size: clamp(9px, 1.5vw, 18px); /* Dynamically adjust font size */
	color: #d4af37;
	/*text-shadow: 0px 0px 5px rgba(212, 175, 55, 0.8);*/
}

/* Front of the card */
.card-main {
	background: none; /* Handled by ::before pseudo-element */
	/* border: 1px solid #d4af37;
  box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.7); */
	transform-origin: center center;
	border: 6px solid #d4af37;
	box-shadow: 0px 0px 20px 10px rgba(216, 155, 7, 0.05);
}

.card-name {
	position: absolute;
	top: 80px;
	width: 100%;
	text-align: center;
	font-size: 1rem;
	font-size: clamp(9px, 1vw, 38px); /* Dynamically adjust font size */
	color: #f5bd02;
	text-shadow: 0px 0px 10px rgba(245, 189, 2, 0.04);
}

.card-number {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	font-size: 12px;
	color: #d4af37;
}

.details {
	position: absolute;
	bottom: 10px; /* Keeps the details section at the bottom */
	width: 90%;
	text-align: center;
	background-color: rgba(245, 189, 2, 0.05);
	font-size: 8px;
	color: rgba(245, 189, 2, 0.8);
	font-family: 'Arial', sans-serif;
	padding: 5px;
	border-radius: 4px;
	box-shadow: inset 0px 0px 5px rgba(245, 189, 2, 0.15);
	text-shadow: 0px 0px 5px rgba(245, 189, 2, 0.4);
	overflow: hidden; /* Prevents text overflow */
	white-space: nowrap; /* Prevents text from wrapping to a new line */
	text-overflow: ellipsis; /* Adds ellipsis (...) if text overflows */
}

.moon .star .tarot-text {
	opacity: 1; /* Ensure stars and text are fully opaque */
}

.night-sky img {
	width: 90px;
    height: 90px;
    position: relative;
    z-index: 1;
    top: 20px;
    left: 15px;
  }


  /* Blurred and reduced opacity for background cards */
.blurred-card {
   filter: blur(3px);    /* Apply blur */
    opacity: 0.4;         /* Reduce opacity */
  /*  transition: filter 0.3s ease, opacity 0.3s ease;  /* Smooth transition */
	pointer-events: none;
}