/* homepage: https://www.160502.com
   公历：2016/05/02（农历 3/26）
   author: Long
   CSS3 + 现代布局：CSS 变量、Grid/Flex、clamp()、transition。
   自适应：手机 (≤767px) 上下堆叠；平板/电脑左右并排。心形按视口等比缩放。 */

:root {
	--bg: #ffe;
	--fg: #666;
	--fg-soft: #3f7f5f;
	--link: #8093F7;
	--hs: 1;
	--font-stack: "Play", "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei",
		"Source Sans Pro", "Open Sans", Arial, "Hiragino Sans GB", "STHeiti",
		"WenQuanYi Micro Hei", SimSun, sans-serif;
	--font-digit: "digit", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	font: 12px/1.5 var(--font-stack);
	overflow: auto;
	-webkit-text-size-adjust: 100%;
	color: var(--fg);
}

a { color: var(--link); font-size: 14px; text-decoration: none; }

/* ================= 主容器 ================= */
#mainDiv {
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 8px;
}

/* <main> 只是语义包装，不做居中（居中交给 #content 的 marginLeft） */
main { display: block; width: 100%; }

#content { position: relative; }

/* ================= 语义化主内容（视觉隐藏，供阅读模式识别）================= */
.page-head {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.page-title, .page-date { display: block; }

/* ================= 心形容器 ================= */
#loveHeart {
	position: relative;
	float: left;
	width: 670px;
	height: 625px;
	transition: none;
}

#garden {
	width: 100%;
	height: 100%;
	display: block;
}

/* ================= 心形内部文字 ================= */
#words {
	position: absolute;
	top: 31%;
	left: 10%;
	width: 76%;
	font-family: "sans-serif";
	font-size: min(24px, max(11px, calc(24px * var(--hs))));
	color: var(--fg);
	pointer-events: none;
}

/* 初始态：CSS3 transition 由 JS 添加 .show 后触发 */
#heart-dates,
#messages,
#loveu {
	opacity: 0;
	visibility: hidden;
	will-change: opacity, visibility;
}
#heart-dates.show,
#messages.show,
#loveu.show {
	opacity: 1;
	visibility: visible;
	transition: opacity 5s ease-in;
}

#heart-dates {
	display: flex;
	justify-content: space-between;
	color: var(--fg-soft);
	font-style: italic;
	font-size: min(18px, max(12px, calc(18px * var(--hs))));
	margin: 0 2% 8px;
	opacity: 0;
	text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}
#heart-dates .hd-left  { text-align: left; }
#heart-dates .hd-right { text-align: right; }

#messages { padding: 0; }

#elapseClock {
	text-align: center;
	font-size: min(18px, max(10px, calc(18px * var(--hs))));
	margin: 10px 0;
}
#elapseClock .digit {
	font-family: var(--font-digit);
	font-size: min(36px, max(14px, calc(36px * var(--hs))));
}

#loveu {
	padding: 5px;
	font-size: min(22px, max(11px, calc(22px * var(--hs))));
	margin-top: 12%;
	margin-right: 0;
	text-align: center;
}
#loveu .signature {
	margin-top: 10px;
	font-size: min(20px, max(10px, calc(20px * var(--hs))));
	font-style: italic;
}

#clickSound { display: none; }

/* ================= 版权 ================= */
#copyright {
	clear: both;
	width: 100%;
	padding: 10px 10px 18px;
	text-align: center;
	color: var(--fg);
	font-size: 12px;
}
#copyright a { color: var(--fg); }

#errorMsg {
	width: 90%;
	max-width: 600px;
	text-align: center;
	font-size: 24px;
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
}

/* ================= 移动端 (≤767px) 自适应 ================= */
@media (max-width: 767px) {
	#words       { font-size: min(18px, max(10px, calc(18px * var(--hs)))); }
	#heart-dates {
		flex-direction: column;
		align-items: center;
		gap: 2px;
		font-size: min(13px, max(10px, calc(13px * var(--hs))));
	}
	#loveu       { margin-top: 8%; font-size: min(18px, max(10px, calc(18px * var(--hs)))); }
	#elapseClock { font-size: min(15px, max(9px,  calc(15px * var(--hs)))); }
	#copyright   { padding-bottom: 22px; }
}

/* ================= 音频回退提示 ================= */
#audio-hint {
	position: fixed;
	top: 12px;
	right: 12px;
	padding: 6px 12px;
	font-size: 12px;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 14px;
	cursor: pointer;
	z-index: 9999;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
#audio-hint.show {
	display: inline-block;
	animation: hintPulse 1.8s ease-in-out infinite;
}
@keyframes hintPulse {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.04); }
}
@media (max-width: 767px) {
	#audio-hint { font-size: 11px; padding: 5px 10px; }
}

/* ================= 阅读模式专用正文（sr-only）================= */
.reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.reader-text * { all: unset; }
.reader-text h1, .reader-text p { display: block; }
.reader-text h1 { font-size: 1.5em; font-weight: 700; margin: 0 0 0.5em; }
.reader-text p  { margin: 0 0 0.8em; line-height: 1.6; }