/* =========================================================
   style.css —— 常丽珺.love 表白页面样式
   清理说明：移除了失效的微博/QQ分享、ContactForm、submenu、
   blog轮播、自定义滚动条轨道等不再使用的规则；新增了留言板、
   灯箱、音乐开关、心形画布、移动端导航等样式，并补充响应式适配。
   ========================================================= */

/* ---------- 布局辅助 ---------- */
.left{ float:left;}
.right{ float:right;}
.wrapper{ width:100%; overflow:hidden;}
.relative{ position:relative;}

/* ---------- 全局 ---------- */
html, body{ height:100%;}
body{
	background:#fdf3f6 url(../images/bg.jpg) no-repeat top center;
	font:14px/1.8 'Microsoft YaHei','微软雅黑','PingFang SC','Droid Sans',sans-serif;
	color:#6b5a5e;
	min-width:946px;
	overflow:hidden;
}

a{ color:#939090; text-decoration:none; outline:none;}
a:hover{ color:#c2546f;}

h1{ position:absolute; top:184px; left:329px; z-index:10;}
h2{
	font:700 30px 'Microsoft YaHei','微软雅黑',cursive;
	line-height:1.2; padding:0 0 20px 0;
	color:#3e3434; text-align:center; letter-spacing:-1px;
}
h2 span{ display:block; font-size:24px; color:#766f6f; line-height:1.2; padding-bottom:4px;}
p{ padding-bottom:14px;}

/* 加载遮罩（原引用不存在的 bg.gif / loader.gif，改为 CSS 转圈动画） */
.page_spinner{
	position:fixed; top:0; left:0; width:100%; height:100%;
	z-index:999; background:#fdf3f6;
	display:flex; align-items:center; justify-content:center;
}
.page_spinner div{
	width:42px; height:42px;
	border:3px solid #f0dbe0; border-top-color:#c2546f;
	border-radius:50%;
	animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ---------- 主体结构 ---------- */
.main{ margin:0 auto; width:946px; position:relative;}
.centre{ margin-top:0; position:relative;}
.over{ position:relative; width:100%; overflow:hidden; min-height:100%; height:auto !important;}

/* ---------- 页头 / 导航 ---------- */
#logo{ display:block;}
#logo img{ position:relative; top:25px; left:25px;}

#menu{ list-style:none;}
#menu > li{ position:absolute;}
#menu > li > img{ position:relative; z-index:6; top:15px; left:15px;}
#menu > li > span{
	position:absolute; width:145px; top:82px; color:#fff;
	text-align:center; left:15px; text-shadow:1px 1px rgba(0,0,0,.2); z-index:9;
}
#nav1{ top:105px; left:304px;}
#nav2{ top:239px; left:230px;}
#nav3{ top:372px; left:304px;}
#nav4{ top:372px; left:458px;}
#nav5{ top:239px; left:536px;}
#nav6{ top:105px; left:458px;}

#navigation{ position:absolute; z-index:12; top:120px; left:245px; height:424px; width:451px;}

/* 移动端导航栏（桌面隐藏，≤1000px 显示） */
.m-nav{ display:none;}

/* ---------- 内容区 ---------- */
#content{ height:636px; padding-bottom:64px;}
#content > ul > li{ position:relative; left:225px; top:27px; width:100%;}

.bg_cont{ position:absolute; top:0; left:0; z-index:1;}

.pad{
	position:relative; z-index:2; left:94px; top:110px;
	width:388px; height:430px; font-size:16px; line-height:32px;
}

.back{ position:absolute; top:212px; left:163px; z-index:6;}
.back img{ position:relative; top:15px; left:15px;}
.back a{
	position:absolute; top:85px; left:15px; color:#fff;
	text-align:center; width:145px; text-shadow:1px 1px rgba(0,0,0,.4);
}

/* 记事 / 絮叨 的条目 */
.note{ border-bottom:1px solid #eadbe0; padding:4px 2px 10px; margin-bottom:12px; color:#5a5052;}
.date-right{ float:right; font-size:13px; color:#b09098; padding-left:12px;}

/* 滚动区：改为原生滚动条（原自定义滚动条依赖 jQuery UI / cScroll） */
.scroll{
	height:308px; width:362px;
	overflow-y:auto; overflow-x:hidden;
	padding-right:8px;
	scrollbar-width:thin; scrollbar-color:#d8a0b0 #f6eaee;
}
.scroll::-webkit-scrollbar{ width:8px;}
.scroll::-webkit-scrollbar-track{ background:#f6eaee; border-radius:4px;}
.scroll::-webkit-scrollbar-thumb{ background:#d8a0b0; border-radius:4px;}
.scroll::-webkit-scrollbar-thumb:hover{ background:#c98a9c;}

/* ---------- 相册 ---------- */
.gallery{ overflow:hidden;}
/* 双列布局：两列(160+14)*2=348px，在 362px 滚动区内（含滚动条留白）可放下 */
.gallery li{ float:left; width:160px; margin:0 14px 14px 0; position:relative;}
.gallery a{
	display:block; position:relative; overflow:hidden;
	border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.gallery img{
	width:100%; height:130px; object-fit:cover;
	transition:transform .45s ease;
}
.gallery a:hover img{ transform:scale(1.1);}
/* 视频条目角标 */
.gallery li.video::after{
	content:'▶'; position:absolute; right:8px; bottom:8px;
	width:24px; height:24px; border-radius:50%;
	background:rgba(0,0,0,.5); color:#fff;
	font-size:11px; line-height:24px; text-align:center;
}

/* ---------- 留言板 ---------- */
.msg-list{ margin-bottom:14px;}
.msg-list li{
	padding:8px 12px; margin-bottom:8px;
	background:rgba(255,255,255,.6); border:1px solid #f0dbe0;
	border-radius:8px; font-size:14px; line-height:1.6;
}
.msg-list .msg-name{ font-weight:bold; color:#c2546f;}
.msg-list .msg-time{ float:right; font-size:12px; color:#b8a0a8;}
.msg-list .msg-text{ margin-top:4px; color:#5a5052; white-space:pre-wrap; word-break:break-word;}

.msg-form input, .msg-form textarea{
	width:100%; box-sizing:border-box;
	border:1px solid #e6cfd6; border-radius:8px;
	padding:8px 10px; margin-bottom:8px;
	font:14px/1.6 'Microsoft YaHei',sans-serif; color:#5a5052;
	background:rgba(255,255,255,.7);
}
.msg-form input:focus, .msg-form textarea:focus{ outline:none; border-color:#d8a0b0; background:#fff;}
.msg-form textarea{ resize:vertical;}
.msg-form button{
	border:none; border-radius:16px; padding:7px 22px; cursor:pointer;
	background:linear-gradient(135deg,#e8a0b0,#c2546f); color:#fff;
	font-size:14px; letter-spacing:2px; box-shadow:0 2px 8px rgba(194,84,111,.35);
	transition:opacity .25s;
}
.msg-form button:hover{ opacity:.85;}
.msg-tip{ font-size:12px; color:#b8a0a8; text-align:center; padding-top:4px;}

/* ---------- 沙漏 ---------- */
#loveHeart{
	position:relative; margin-top:16px; padding-top:150px;
	font-size:22px; color:#c2546f; text-align:center;
}
#heartCanvas{
	position:absolute; top:0; left:50%; transform:translateX(-50%);
	z-index:0; pointer-events:none;
}
#loveHeart .love-ask,
#loveHeart > div{ position:relative; z-index:1;}
#elapseClock{ margin:10px 0 12px; font-size:18px; color:#9a5a6a; letter-spacing:1px;}
#elapseClock .digit{
	display:inline-block; min-width:26px; font-weight:bold; color:#c2546f;
}
.love-gif{ margin:6px 0;}
.love-gif img{ margin:0 6px;}
#loveu{ margin-top:8px; font-size:16px; color:#9a5a6a;}
.signature{ margin-top:10px; font-size:15px; font-style:italic; color:#b08090; text-align:right; padding-right:10px;}

/* ---------- 灯箱 ---------- */
.lb-overlay{
	position:fixed; top:0; left:0; width:100%; height:100%;
	background:rgba(20,10,14,.88); z-index:1000;
	display:none; align-items:center; justify-content:center;
}
.lb-overlay.show{ display:flex;}
.lb-box{ position:relative; max-width:94vw; max-height:92vh; text-align:center;}
.lb-box img, .lb-box video{
	max-width:94vw; max-height:86vh; display:block;
	border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,.6);
	background:#000;
}
.lb-counter{
	color:#fff; font-size:13px; letter-spacing:1px;
	margin-top:10px; opacity:.8;
}
.lb-btn{
	position:absolute; top:50%; transform:translateY(-50%);
	width:44px; height:44px; border:none; border-radius:50%;
	background:rgba(255,255,255,.14); color:#fff; font-size:22px;
	cursor:pointer; line-height:1; transition:background .25s;
}
.lb-btn:hover{ background:rgba(255,255,255,.3);}
.lb-prev{ left:14px;}
.lb-next{ right:14px;}
.lb-close{
	position:absolute; top:12px; right:14px;
	width:38px; height:38px; border:none; border-radius:50%;
	background:rgba(255,255,255,.14); color:#fff; font-size:18px;
	cursor:pointer; transition:background .25s;
}
.lb-close:hover{ background:rgba(255,255,255,.3);}

/* ---------- 背景音乐开关 ---------- */
#musicToggle{
	position:fixed; right:18px; bottom:18px; z-index:600;
	width:46px; height:46px; border-radius:50%;
	border:1px solid rgba(255,255,255,.4);
	background:rgba(60,40,50,.6); color:#fff;
	font-size:20px; line-height:1; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 3px 12px rgba(0,0,0,.3);
	transition:background .3s, opacity .3s;
}
#musicToggle:hover{ background:rgba(60,40,50,.8);}
#musicToggle.off{ opacity:.5;}
#musicToggle.off::after{
	content:''; position:absolute; width:26px; height:2px;
	background:#fff; border-radius:1px; transform:rotate(-45deg);
}

/* =========================================================
   响应式适配
   ========================================================= */
@media (max-width: 1000px){
	body{ min-width:0; font-size:13px; overflow-y:auto;}
	.centre{ padding-top:62px !important;}

	/* 移动端顶部导航 */
	.m-nav{
		display:flex; position:fixed; top:0; left:0; right:0; z-index:500;
		justify-content:center; flex-wrap:wrap;
		background:linear-gradient(180deg, rgba(40,25,35,.78), rgba(40,25,35,.5));
		backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
		padding:7px 4px; box-shadow:0 2px 10px rgba(0,0,0,.25);
	}
	.m-nav a{
		color:#fff; font-size:14px; padding:7px 13px; opacity:.82;
		transition:opacity .2s;
	}
	.m-nav a:hover{ opacity:1;}
	.m-nav a.active{ opacity:1; font-weight:bold; color:#ffd9e3;}

	/* 隐藏桌面六边形图标导航（保留 DOM，JS 动画不受影响） */
	.menu{ visibility:hidden;}
	#navigation{ display:none !important;}
	.bg_cont{ display:none;}

	.main{ width:auto; margin:0 8px;}
	h1{ top:74px; left:0; width:100%; text-align:center;}
	#logo img{ width:132px; height:auto; left:0; top:0;}

	#content{ height:auto; min-height:60vh; padding-bottom:40px;}
	#content > ul > li{ left:0; top:6px; width:100%;}
	.pad{
		left:0; top:70px; width:100%; height:auto;
		box-sizing:border-box; padding:0 10px;
		font-size:15px; line-height:1.9;
	}
	.scroll{ width:100%; height:auto; max-height:58vh; padding-right:6px;}

	/* 返回按钮：隐藏图标，仅保留文字 */
	.back{ top:auto; left:auto; right:8px; bottom:8px;}
	.back img{ display:none;}
	.back a{
		position:static; display:inline-block; color:#c2546f;
		width:auto; padding:3px 14px; text-shadow:none;
		background:rgba(255,255,255,.75); border-radius:14px; font-size:13px;
	}

	/* 相册两列 */
	.gallery li{ width:47%; margin:0 4% 10px 0;}
	.gallery li:nth-child(2n){ margin-right:0;}
	.gallery img{ width:100%; height:auto;}

	/* 沙漏 */
	#loveHeart{ padding-top:104px; font-size:18px;}
	#elapseClock{ font-size:15px;}
	#loveu{ font-size:14px;}
}

@media (max-width: 480px){
	.m-nav a{ padding:7px 8px; font-size:13px;}
	.pad{ font-size:14px;}
	.love-gif img{ width:120px; height:auto;}
	#heartCanvas{ transform:translateX(-50%) scale(.85);}
}