/* 下为蛋糕场景样式 */
 .dgcj {
 	height: 100vh;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
 	background: linear-gradient(to top, #ffdede 0%, #fff5f5 100%);
 }

 .bd {
 	position: relative;
 	display: inline-block;
 }

 /* 下为蛋糕样式 */
 .dgcj .dg {
 	font-size: 20rem;
 }

 /* 下为火焰样式 */
 .dgcj .hy {
 	position: absolute;
 	font-size: 3.3rem;
 	/* 火焰比蛋糕小一点，更真实 */

 	/* ---------- 核心坐标（调整这两行，让火落在蜡烛尖上） ---------- */
 	top: 15%;
 	/* 向上偏移，让火焰底部对准蜡烛顶部 */
 	left: 50%;
 	/* 水平居中 */
 	transform: translateX(-50%);
 	/* 让火焰自身的中心点对齐蛋糕的中心 */
 	/* ----------------------------------------------------------------- */

 	/* 默认亮着，点击后会变透明 */
 	transition: opacity 0.3s;
 }

 /* 4. 熄灭类（给 JS 用的） */
 #hy.extinct {
 	opacity: 0;
 	transition: opacity 0.5s;
 }

 /* 下为正文场景样式 */
 .zwcj {
 	background-color: #fff0e8;
 	display: none;
 	min-height: 100vh;
 	text-align: center;
 	padding: 50px;
 }

 /* 每个小彩带的默认样式 */
 .confetti {
 	position: fixed;
 	/* 固定在屏幕上，不随滚动移动 */
 	top: -20px;
 	/* 从屏幕顶部外面开始掉 */
 	width: 12px;
 	height: 12px;
 	opacity: 0;
 	/* 默认透明，动画开始后才显示 */
 	z-index: 9999;
 	/* 保证在所有内容的最上层 */
 	pointer-events: none;
 	/* 鼠标点不到彩带，不影响点按钮 */
 	animation: confettiFall 2s linear;

 }

 /* 彩带的飘落动画（掉下来 + 旋转） */
 @keyframes confettiFall {
 	0% {
 		transform: translateY(0) rotate(0deg) scale(0.5);
 		opacity: 1;
 	}

 	100% {
 		transform: translateY(110vh) rotate(720deg) scale(1.2);
 		opacity: 0;
 		/* 掉到最底下时淡出消失 */

 	}
 }

 .decor {
 	position: fixed;
 	opacity: 0.25;
 	/* 低透明度！重点，不会抢视线 */
 	font-size: 24px;
 	animation: slowFloat 8s ease-in-out infinite;
 }

 .star1 {
 	top: 12%;
 	left: 8%;
 }

 .star2 {
 	bottom: 15%;
 	right: 10%;
 }

 .heart1 {
 	top: 20%;
 	right: 12%;
 }

 @keyframes slowFloat {

 	0%,
 	100% {
 		transform: translateY(0px);
 	}

 	50% {
 		transform: translateY(-8px);
 	}
 }

 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }

 .carousel {
 	width: 100%;
 	height: 200px;
 	margin: 20px auto;
 	overflow: hidden;
 	position: relative;
 	border-radius: 8px;
 	transition: height 0.5s ease;
 	position: relative !important;
 }

 .carousel-inner {
 	width: 100%;
 	height: 100%;
 	display: flex;
 	transition: transform 0.6s ease;
 }

 .carousel-item {
 	flex: 0 0 100%;
 	height: 100%;
 }

 .carousel-item img,
 .carousel-item video {
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
 	display: block;
 }

 /* 小圆点指示器 */
 .dots {
 	position: absolute;
 	bottom: 12px;
 	left: 50%;
 	transform: translateX(-50%);
 	display: flex;
 	gap: 8px;
 }

 .dot {
 	width: 12px;
 	height: 12px;
 	border-radius: 50%;
 	background: rgba(255, 255, 255, 0.4);
 	cursor: pointer;
 }

 .dot.active {
 	background: #fff;
 }

 /* 模态框背景（半透明遮罩） */
 .modal {
 	display: none;
 	/* 默认隐藏 */
 	position: fixed;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background: rgba(0, 0, 0, 0.85);
 	z-index: 99999;
 	justify-content: center;
 	align-items: center;
 	animation: fadeIn 0.3s;
 }

 /* 模态框内容容器（居中，自适应大小） */
 .modal-content {
 	max-width: 90%;
 	max-height: 90%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }

 .modal-content img,
 .modal-content video {
 	max-width: 100%;
 	max-height: 90vh;
 	border-radius: 12px;
 	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
 	object-fit: contain;
 }

 /* 关闭按钮 */
 .modal-close {
 	position: absolute;
 	top: 30px;
 	right: 40px;
 	font-size: 40px;
 	font-weight: bold;
 	color: white;
 	cursor: pointer;
 	transition: 0.3s;
 	z-index: 100000;
 }

 .modal-close:hover {
 	color: #e84393;
 	transform: rotate(90deg);
 }

 /* 淡入动画 */
 @keyframes fadeIn {
 	from {
 		opacity: 0;
 		transform: scale(0.95);
 	}

 	to {
 		opacity: 1;
 		transform: scale(1);
 	}
 }

 .memory-block {
 	display: flex;
 	flex-direction: column;
 	margin-bottom: 60px;
 	padding: 10px 0;
 	border-bottom: 2px dashed rgba(232, 67, 147, 0.15);
 }

 .memory-block:last-child {
 	border-bottom: none;
 }

 .memory-block .carousel {
 	float: none;
 	display: block;
 }

 .memory-block .text {
 	font-size: 1.5rem;
 	color: #555;
 	float: none;
 	display: block;
 	clear: both;
 	margin-top: 10px;
 }

 /* =============================================
     右下角音乐播放器
 ============================================= */
 #music-player {
 	position: fixed;
 	bottom: 30px;
 	right: 30px;
 	background: rgba(255, 255, 255, 0.9);
 	backdrop-filter: blur(10px);
 	padding: 12px 22px;
 	border-radius: 60px;
 	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	z-index: 999;
 	font-size: 1rem;
 	border: 1px solid rgba(232, 67, 147, 0.15);
 }

 #music-player .song-name {
 	font-weight: bold;
 	color: #2d3436;
 	max-width: 130px;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	font-size: 0.95rem;
 }

 #music-player button {
 	background: #e84393;
 	color: white;
 	border: none;
 	border-radius: 50%;
 	width: 36px;
 	height: 36px;
 	font-size: 1rem;
 	cursor: pointer;
 	transition: 0.2s;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }

 #music-player button:hover {
 	background: #fd79a8;
 	transform: scale(1.05);
 }

 /* =============================================
     底部录音祝福区
 ============================================= */
 #recording-section {
 	background: linear-gradient(145deg, #fce4ec, #f3e5f5);
 	border-radius: 30px;
 	padding: 50px 30px;
 	margin-top: 60px;
 	text-align: center;
 	max-width: 700px;
 	margin-left: auto;
 	margin-right: auto;
 	border: 2px dashed rgba(232, 67, 147, 0.2);
 }

 #recording-section .voice-icon {
 	font-size: 4rem;
 	animation: pulse 2s infinite;
 }

 @keyframes pulse {

 	0%,
 	100% {
 		transform: scale(1);
 	}

 	50% {
 		transform: scale(1.15);
 	}
 }

 #recording-section h2 {
 	color: #e84393;
 	margin: 15px 0 10px;
 }

 #recording-section audio {
 	border-radius: 30px;
 	outline: none;
 }

 /* 手机适配 */
 @media (max-width: 600px) {
 	#music-player {
 		bottom: 15px;
 		right: 15px;
 		padding: 10px 16px;
 		gap: 8px;
 	}

 	#music-player .song-name {
 		max-width: 80px;
 		font-size: 0.85rem;
 	}

 	#music-player button {
 		width: 32px;
 		height: 32px;
 		font-size: 0.85rem;
 	}

 	#recording-section {
 		padding: 30px 20px;
 		margin-top: 40px;
 	}
 }

 /* 底部提示文字 */
 #recordingHint {
 	font-family: 'Georgia', serif;
 	letter-spacing: 1px;
 	animation: fadeIn 0.8s ease;
 }

 @keyframes fadeIn {
 	0% {
 		opacity: 0;
 		transform: translateY(10px);
 	}

 	100% {
 		opacity: 1;
 		transform: translateY(0);
 	}
 }

 .dg,
 .hy {
 	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", sans-serif;
 }