better looking transparency

app/globals.css

@@ -40,3 +40,16 @@ body {
 .rotate-y-180 {
 	transform: rotateY(180deg);
 }
+
+.see-through {
+	mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 100%);
+	mask-size: cover;
+	mask-repeat: no-repeat;
+	-webkit-mask-image: radial-gradient(
+		circle at center,
+		rgba(0, 0, 0, 0) 25%,
+		rgba(0, 0, 0, 1) 100%
+	);
+	-webkit-mask-size: cover;
+	-webkit-mask-repeat: no-repeat;
+}

components/Card.tsx

@@ -52,11 +52,20 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
 					className={`absolute inset-0 transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
 				>
 					<div className="absolute inset-0 group backface-hidden">
-						{dm && <img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" />}
+						{dm && (
+							<>
+								<img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" />
+								<img
+									src={getURL(cardBack as TarokkaGameCard, settings)}
+									alt=""
+									className={`absolute rounded-lg see-through`}
+								/>
+							</>
+						)}
 						<img
 							src={getURL(cardBack as TarokkaGameCard, settings)}
 							alt="Card Back"
-							className={`absolute rounded-lg ${dm ? 'transition duration-500 group-hover:opacity-30' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
+							className={`absolute rounded-lg ${dm ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
 						/>
 						{dm && !flipped && (
 							<StackTheDeck onRedo={() => console.log('Redo')} onPick={() => console.log('Pick')} />