/* clock.css - 中秋主题实时时钟样式 */
.real-time-clock {
	/* 核心：固定定位，脱离页面流，始终相对于浏览器视口 */
	position: fixed;
	bottom: 20px;
	/* 距离视口底部20px */
	right: 20px;
	/* 距离视口右侧20px */
	z-index: 99999;
	/* 超高层级，确保不被任何元素遮挡（数值越大越靠前） */
	
	/* 中秋主题样式 */
	background: linear-gradient(135deg, rgba(255, 248, 240, 0.95) 0%, rgba(255, 255, 240, 0.95) 100%);
	border-radius: 12px;
	padding: 16px 20px;
	box-shadow: 0 4px 12px rgba(139, 69, 19, 0.15);
	font-family: "Microsoft Yahei", "微软雅黑", sans-serif;
	border-left: 4px solid #DAA520; /* 金色左边框 */
	/* 新增：防止被滚动条遮挡（可选） */
	box-sizing: border-box;
	max-width: 200px;
	/* 限制宽度，避免文字溢出 */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.real-time-clock:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(139, 69, 19, 0.2);
}

.clock-time {
	font-size: 19px;
	font-weight: bold;
	color: #8B4513; /* 棕色文字 */
	margin-bottom: 6px;
	text-align: center;
	/* 文字居中，更美观 */
	letter-spacing: 2px;
}

.clock-date {
	font-size: 14px;
	color: #A0522D; /* 稍浅的棕色 */
	text-align: center;
}