body {
	background-color: #ececec;
	transform-style: preserve-3d;
	perspective: 2000px;
	display: flex;
	justify-content: center;
}

label .cardWrapper {
	position: relative;
	height: 120vmin;
	width: calc(120vmin / 1.4);
	background: linear-gradient(135deg, #FF69B4 0%, #FF1493 25%, #DC143C 50%, #FF1493 75%, #FF69B4 100%);
	margin: calc(120vmin / 10);
	border-radius: calc(75vmin / 20);
	box-shadow: 
		0 10px 30px rgba(255, 105, 180, 0.5),
		0 0 20px rgba(255, 20, 147, 0.3),
		inset 0 0 20px rgba(255, 255, 255, 0.2);
	overflow: hidden;
	float: left;
	transition: transform 200ms linear, box-shadow 100ms linear;
	transform: rotateY(0deg);
	padding: 10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
}

input:checked+label .cardWrapper {
	transform: rotateY(180deg);
}

.cardRandom {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #FFB6C1 0%, #FFC0CB 25%, #FFB6C1 50%, #FF69B4 75%, #FF1493 100%);
	opacity: 1;
	cursor: pointer;
	transition: opacity 1ms linear 100ms;
	border-radius: 15px;
	box-shadow: 
		0 8px 25px rgba(255, 105, 180, 0.4),
		inset 0 0 20px rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
}

.cardRandom::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
	0%, 100% {
		transform: rotate(0deg) translate(-50%, -50%);
	}
	50% {
		transform: rotate(180deg) translate(-50%, -50%);
	}
}

.cardWrapper:hover {
	filter: brightness(1.1) saturate(1.2);
	transform: scale(1.05);
	box-shadow: 
		0 15px 40px rgba(255, 105, 180, 0.6),
		0 0 30px rgba(255, 20, 147, 0.4),
		inset 0 0 30px rgba(255, 255, 255, 0.4);
}

input:checked+label .cardWrapper:hover {
	transform: rotateY(180deg) scale(1.08);
	filter: brightness(1.15) saturate(1.3);
}

input:focus+label .cardWrapper {
	// box-shadow: 0 0 calc(40vmin / 100) 0 rgba(0, 0, 0, 0.5);
}

input:checked+label .cardRandom {
	opacity: 0;
}

.cardRandom::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	animation: randomCard 1000ms steps(51, end) infinite;
	animation-play-state: paused;
	transform: rotate(180deg);
}

input:checked+label .cardRandom::before {
	animation-play-state: running;
}

input {
	height: 0;
	width: 0;
	border: none;
	outline: none;
	display: none;
}

@keyframes randomCard {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 100% 0;
	}
}

/* 3D翻转动画增强 */
.cardWrapper {
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
}

input:checked+label .cardWrapper {
	transform: rotateY(180deg) scale(1.05);
	animation: none;
}

/* 悬停效果增强 */
.cardWrapper:hover {
	filter: brightness(1.05);
	transform: scale(1.02);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

input:checked+label .cardWrapper:hover {
	transform: rotateY(180deg) scale(1.07);
}

/* 卡牌内容样式增强 - 情趣色色风格 */
#content {
	color: #FFFFFF;
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 1.2;
	word-break: break-word;
	text-align: center;
	text-shadow: 
		0 0 3px rgba(255, 255, 255, 0.95),
		0 0 6px rgba(255, 182, 193, 0.8),
		1px 1px 1px rgba(0, 0, 0, 0.9),
		2px 2px 3px rgba(0, 0, 0, 0.7);
	font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'SimHei', 'Arial', sans-serif;
	letter-spacing: 0.5px;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	background: linear-gradient(45deg, #FF69B4, #FFB6C1, #FFC0CB, #FFB6C1, #FF69B4);
	background-size: 400% 400%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradientShift 3s ease-in-out infinite;
	filter: drop-shadow(0 0 4px rgba(255, 105, 180, 0.95));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@keyframes gradientShift {
	0%, 100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}