/* ============================================================
   夜间模式：全局日/夜切换 + 日月转换动画 + 投影预览夜间模式
   ============================================================ */

/* ---------- 右上角切换按钮 ---------- */
.nm-toggle-btn {
	align-items: center;
	background: linear-gradient(135deg, #fff6f2 0%, #fffdf4 100%);
	border: 1.5px solid rgba(251, 205, 208, .85);
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 40px;
	justify-content: center;
	padding: 0;
	position: relative;
	transition: transform .3s ease, box-shadow .3s ease, background .4s ease;
	width: 40px;
}

.nm-toggle-btn:hover {
	box-shadow: 0 4px 16px rgba(251, 205, 208, .5);
	transform: translateY(-2px) rotate(12deg);
}

html .nav-button .nm-toggle-btn {
	padding: 0;
}

/* 按钮图标：SVG 月牙 / 太阳 */
.nm-toggle-btn .nm-ico {
	display: none;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .14));
	height: 20px;
	width: 20px;
}

.nm-toggle-btn:not(.night) .nm-ico-moon {
	display: block;
}

.nm-toggle-btn.night .nm-ico-sun {
	animation: nm-spin 16s linear infinite;
	display: block;
	filter: drop-shadow(0 0 5px rgba(255, 194, 60, .85));
}

html.night-mode .nm-toggle-btn {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 215, 94, .85);
	box-shadow: 0 0 14px rgba(255, 215, 94, .28);
}

/* ---------- 全屏转换动画（磨砂玻璃透出网页背景） ---------- */
#nm-overlay {
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	z-index: 99999;
}

/* 磨砂玻璃层：只做模糊+半透明着色，网页内容透过可见 */
#nm-overlay .nm-glass {
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	backdrop-filter: blur(18px) saturate(1.25);
	background: rgba(255, 253, 246, .58);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity .9s ease, background-color 1.6s ease;
	z-index: 2;
}

#nm-overlay.to-night .nm-glass {
	background: rgba(12, 16, 30, .58);
}

#nm-overlay .nm-glass.show {
	opacity: 1;
}

/* 星星（悬浮在模糊页面上方） */
#nm-overlay .nm-stars {
	inset: 0;
	position: absolute;
	z-index: 3;
}

#nm-overlay .nm-stars span.nm-star {
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(255, 255, 255, .9);
	height: 3px;
	opacity: 0;
	position: absolute;
	width: 3px;
}

#nm-overlay.to-night .nm-star {
	animation: nm-star-sweep 1.5s ease forwards;
}

#nm-overlay.to-day .nm-star {
	animation: nm-star-fade 1.2s ease forwards;
}

@keyframes nm-star-sweep {
	0% { opacity: 0; transform: translate(0, 0) scale(.5); }
	25% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx, 70px), var(--dy, -90px)) scale(1.3); }
}

@keyframes nm-star-fade {
	0% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx, -40px), var(--dy, 60px)); }
}

/* 流星 */
#nm-overlay .nm-meteor {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
	border-radius: 2px;
	height: 2px;
	opacity: 0;
	position: absolute;
	transform: rotate(-35deg);
	width: 90px;
	z-index: 3;
}

#nm-overlay.to-night .nm-meteor {
	animation: nm-meteor-sweep 1.6s ease forwards;
}

@keyframes nm-meteor-sweep {
	0% { opacity: 0; transform: translate(0, 0) rotate(-35deg); }
	15% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--mx, 220px), var(--my, -320px)) rotate(-35deg); }
}

/* 中央日月 */
#nm-overlay .nm-orb-wrap {
	animation: nm-orb-life 2.3s ease forwards;
	height: 180px;
	left: 50%;
	margin: -90px 0 0 -90px;
	position: absolute;
	top: 50%;
	width: 180px;
	z-index: 4;
}

@keyframes nm-orb-life {
	0% { opacity: 0; }
	12% { opacity: 1; }
	52% { opacity: 1; }
	100% { opacity: 0; }
}

#nm-overlay .nm-orb {
	animation: nm-orb-in .9s ease both;
	height: 170px;
	left: 50%;
	margin: -85px 0 0 -85px;
	position: absolute;
	top: 50%;
	width: 170px;
}

@keyframes nm-orb-in {
	from { opacity: 0; transform: scale(.45) rotate(-40deg); }
	to { opacity: 1; transform: scale(1) rotate(0deg); }
}

#nm-overlay .nm-orb .nm-face {
	border-radius: 50%;
	inset: 0;
	position: absolute;
	transition: background .7s ease, box-shadow .7s ease;
}

#nm-overlay.to-day .nm-face {
	background: radial-gradient(circle at 50% 50%, #fff4b8 0%, #ffd75e 55%, #f5a623 100%);
	box-shadow: 0 0 64px 20px rgba(255, 215, 94, .55);
}

#nm-overlay.to-night .nm-face {
	background: radial-gradient(circle at 50% 50%, #f8fbff 0%, #dfe7f5 70%, #b9c6e0 100%);
	box-shadow: 0 0 44px 14px rgba(220, 230, 255, .38);
}

#nm-overlay .nm-orb .nm-face::after {
	border-radius: 50%;
	content: '';
	height: 72%;
	opacity: 0;
	position: absolute;
	right: -16%;
	top: -10%;
	transition: opacity .7s ease;
	width: 72%;
}

#nm-overlay.to-night .nm-face::after {
	background: rgba(16, 21, 38, .85);
	opacity: 1;
}

/* 太阳光芒 */
#nm-overlay .nm-orb .nm-rays {
	background: repeating-conic-gradient(from 0deg, rgba(255, 215, 94, .85) 0deg 9deg, transparent 9deg 24deg);
	border-radius: 50%;
	inset: -48px;
	opacity: 0;
	position: absolute;
	transition: opacity .7s ease;
}

#nm-overlay.to-day .nm-rays {
	animation: nm-spin 14s linear infinite;
	opacity: 1;
}

@keyframes nm-spin {
	to { transform: rotate(360deg); }
}

/* 主题切换期间：主要表面颜色平滑过渡（避免中间突然变） */
html.nm-theme-anim body,
html.nm-theme-anim .navbar,
html.nm-theme-anim .navbar.scrolled,
html.nm-theme-anim .town-card,
html.nm-theme-anim .content-item,
html.nm-theme-anim .album-item,
html.nm-theme-anim .proj-item,
html.nm-theme-anim .outpost-card,
html.nm-theme-anim .modal-box,
html.nm-theme-anim .site-stats-panel,
html.nm-theme-anim .section-header h2,
html.nm-theme-anim .content-title,
html.nm-theme-anim .proj-title,
html.nm-theme-anim .content-meta,
html.nm-theme-anim .proj-meta,
html.nm-theme-anim .proj-pos,
html.nm-theme-anim .form-group input,
html.nm-theme-anim .form-group textarea,
html.nm-theme-anim .hero-text h2 {
	transition: background-color 1.4s ease, color 1.4s ease, border-color 1.4s ease, box-shadow 1.4s ease !important;
}

/* ---------- 全局夜间主题覆盖 ---------- */
html.night-mode {
	color-scheme: dark;
}

html.night-mode body {
	background: #0e1424;
	color: #d6dae8;
}

html.night-mode ::selection {
	background: #3b4a78;
	color: #fff;
}

html.night-mode .navbar {
	background: rgba(15, 21, 38, .92);
	box-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

html.night-mode .navbar.scrolled {
	background: rgba(13, 18, 33, .96);
}

html.night-mode .logo-box h1 {
	color: #ffd9d0;
}

html.night-mode .logo-box span {
	color: #8b94ad;
}

html.night-mode .navbar nav a {
	color: #b9c1d8;
}

html.night-mode .navbar nav a:hover,
html.night-mode .navbar nav a.active {
	color: #ffd9d0;
}

html.night-mode .nav-button button {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(251, 205, 208, .4);
	color: #ffd9d0;
}

html.night-mode .nav-button button:hover {
	background: rgba(251, 205, 208, .18);
}

html.night-mode .nav-button .join-btn {
	background: linear-gradient(135deg, #8a4a52 0%, #7a5c3a 100%);
	border: none;
	color: #fff0e6;
}

html.night-mode .nav-button [data-login-btn].logged-in {
	background: rgba(30, 38, 60, .95);
	border-color: rgba(251, 205, 208, .4);
}

html.night-mode .nav-button [data-login-btn].logged-in .nav-uname {
	color: #ffd9d0;
}

html.night-mode .nav-avatar {
	border-color: #3a4563;
}

/* 卡片 / 板块 / 弹窗 */
html.night-mode .town-card,
html.night-mode .content-item,
html.night-mode .album-item,
html.night-mode .proj-item,
html.night-mode .outpost-card,
html.night-mode .member-chip,
html.night-mode .town-hero-inner,
html.night-mode .mayor-panel {
	background: rgba(24, 32, 54, .9);
	border-color: #2c3a5e;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
}

html.night-mode .town-hero,
html.night-mode .town-section-head h2,
html.night-mode h1,
html.night-mode h2,
html.night-mode h3,
html.night-mode .content-title,
html.night-mode .proj-title,
html.night-mode .album-title,
html.night-mode .outpost-name,
html.night-mode .member-group-title,
html.night-mode .proj-preview-info {
	color: #ffe0d8;
}

html.night-mode .content-body,
html.night-mode .proj-desc,
html.night-mode .board,
html.night-mode .town-recruit {
	color: #c7cede;
}

html.night-mode .content-meta,
html.night-mode .proj-meta,
html.night-mode .album-meta,
html.night-mode .op-meta,
html.night-mode .proj-pos,
html.night-mode .town-hero-stat,
html.night-mode .empty-tip {
	color: #9aa3bd;
}

html.night-mode .proj-pos {
	background: rgba(255, 255, 255, .05);
	border-color: #3a4a74;
}

html.night-mode .modal-mask {
	background: rgba(7, 10, 20, .72);
}

html.night-mode .modal-box {
	background: linear-gradient(160deg, #1b2340 0%, #232c4e 100%);
	border-color: #34436e;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}

html.night-mode .modal-box h3 {
	color: #ffe0d8;
}

html.night-mode .form-group label,
html.night-mode .vis-row {
	color: #b9c1d8;
}

html.night-mode .form-group input,
html.night-mode .form-group textarea {
	background: rgba(255, 255, 255, .06);
	border-color: #3a4a74;
	color: #e6e9f4;
}

html.night-mode .town-btn.ghost,
html.night-mode .vs-btn {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(251, 205, 208, .35);
	color: #e6d9d2;
}

html.night-mode .changelog-box {
	background: rgba(24, 32, 54, .75);
	border-color: #2c3a5e;
}

html.night-mode .cmd-code {
	background: #2c3a5e;
	color: #ffd9d0;
}

/* ---------- 首页各区块 ---------- */
html.night-mode .hero {
	background: linear-gradient(180deg, #0b1020 0%, #141d38 45%, #232a4a 80%, #0e1424 100%);
}

html.night-mode .hero::before,
html.night-mode .hero::after {
	opacity: .22;
}

html.night-mode .hero-text .small-title {
	color: #ffb7ad;
}

html.night-mode .hero-text h2,
html.night-mode .hero-text h3,
html.night-mode .hero-logo h1 {
	color: #ffe0d8;
}

html.night-mode .hero-text p,
html.night-mode .hero-quick-info span {
	color: #b9c1d8;
}

html.night-mode .hero-quick-info span {
	background: rgba(30, 38, 60, .85);
	border-color: rgba(251, 205, 208, .3);
}

html.night-mode .hero-buttons .main-btn {
	background: linear-gradient(135deg, #8a4a52 0%, #7a5c3a 100%);
	color: #fff0e6;
}

html.night-mode .hero-buttons .second-btn {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(251, 205, 208, .4);
	color: #ffd9d0;
}

html.night-mode .info-card,
html.night-mode .feature-card {
	background: rgba(24, 32, 54, .92);
	border-color: #2c3a5e;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
}

html.night-mode .info-card h3,
html.night-mode .feature-card h3 {
	color: #ffe0d8;
}

html.night-mode .info-card p,
html.night-mode .feature-card p,
html.night-mode .about-content p {
	color: #c7cede;
}

html.night-mode .site-stats-panel {
	background: linear-gradient(135deg, #1b2340 0%, #20294a 100%);
	border-color: #34436e;
}

html.night-mode .site-stats-panel .site-stats-value,
html.night-mode .site-stats-panel b {
	color: #ffe0d8;
}

html.night-mode .section-alt {
	background: #0b101d;
}

html.night-mode .section-header h2 {
	color: #ffe0d8;
}

html.night-mode .server-info,
html.night-mode .section.about-section,
html.night-mode .section.gameplay-section,
html.night-mode .section.town-preview-section {
	background: #0d1222 !important;
}

html.night-mode .server-info p,
html.night-mode .server-info span,
html.night-mode .server-info .label,
html.night-mode .about-section p,
html.night-mode .gameplay-section p,
html.night-mode .town-preview-section p {
	color: #c7cede;
}

html.night-mode .main-btn {
	background: linear-gradient(135deg, #8a4a52 0%, #7a5c3a 100%) !important;
	color: #fff0e6 !important;
}

html.night-mode .gameplay-item,
html.night-mode .news-card,
html.night-mode .home-town-card,
html.night-mode .step,
html.night-mode .footer,
html.night-mode .cta-ip {
	background: rgba(24, 32, 54, .92) !important;
	border-color: #2c3a5e;
	color: #d6dae8;
}

html.night-mode .gameplay-item h3,
html.night-mode .news-card h3,
html.night-mode .home-town-card h3,
html.night-mode .cta-content h2,
html.night-mode .step-content b,
html.night-mode .step-number,
html.night-mode .about-stats,
html.night-mode .stat-item {
	color: #ffe0d8;
}

html.night-mode .gameplay-item p,
html.night-mode .news-card p,
html.night-mode .step-content,
html.night-mode .cta-content p,
html.night-mode .footer-content,
html.night-mode .footer-bottom,
html.night-mode .news-date,
html.night-mode .home-town-card .info {
	color: #b9c1d8;
}

html.night-mode .news-link {
	color: #ffb7ad;
}

html.night-mode .join-section {
	background: linear-gradient(180deg, #0d1222 0%, #131a30 100%);
}

html.night-mode .cta-section {
	background: linear-gradient(135deg, #3a2a4a 0%, #5a3a52 100%);
}

html.night-mode .cta-ip {
	color: #ffe0d8 !important;
}

html.night-mode .footer {
	border-top-color: #2c3a5e;
}

html.night-mode .step-arrow {
	color: #8b94ad;
}

/* 史蒂夫底部名字胶囊也随夜间变深 */
html.night-mode #steve-widget .sw-name {
	background: rgba(30, 38, 60, .9);
	border: 1px solid rgba(251, 205, 208, .35);
	color: #ffe0d8;
	-webkit-background-clip: initial;
	background-clip: initial;
	text-shadow: none;
}

/* 看板娘 / 史蒂夫提示气泡也随夜间变深 */
html.night-mode #waifu-tips {
	background: linear-gradient(160deg, rgba(28, 36, 60, .96) 0%, rgba(24, 31, 52, .96) 100%);
	border-color: rgba(251, 205, 208, .45);
	color: #d6dae8;
}

html.night-mode #steve-widget .sw-bubble {
	background: linear-gradient(160deg, rgba(28, 36, 60, .97) 0%, rgba(24, 31, 52, .97) 100%);
	border-color: rgba(251, 205, 208, .45);
	color: #d6dae8;
}

/* ---------- 投影预览夜间模式 ---------- */
.proj-canvas-box {
	transition: background .4s ease, border-color .4s ease;
}

.proj-canvas-box.night {
	background: linear-gradient(180deg, #070c1c 0%, #141c36 100%);
	border-color: #2c3a5e;
}

.proj-canvas-box.night::before {
	background-image:
		radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, .95), transparent 55%),
		radial-gradient(1px 1px at 28% 62%, rgba(255, 255, 255, .8), transparent 55%),
		radial-gradient(1.5px 1.5px at 42% 26%, rgba(255, 255, 255, .7), transparent 55%),
		radial-gradient(1px 1px at 58% 74%, rgba(255, 255, 255, .85), transparent 55%),
		radial-gradient(1.5px 1.5px at 71% 34%, rgba(255, 255, 255, .75), transparent 55%),
		radial-gradient(1px 1px at 84% 58%, rgba(255, 255, 255, .9), transparent 55%),
		radial-gradient(1.5px 1.5px at 90% 14%, rgba(255, 255, 255, .7), transparent 55%),
		radial-gradient(1px 1px at 20% 86%, rgba(255, 255, 255, .75), transparent 55%),
		radial-gradient(1px 1px at 66% 8%, rgba(255, 255, 255, .6), transparent 55%),
		radial-gradient(1.5px 1.5px at 8% 48%, rgba(255, 255, 255, .65), transparent 55%);
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.nm-preview-toggle {
	align-items: center;
	background: rgba(255, 255, 255, .75);
	border: 1px solid rgba(251, 205, 208, .8);
	border-radius: 999px;
	color: #8b5e3c;
	cursor: pointer;
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	gap: 6px;
	padding: 5px 12px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.nm-preview-toggle:hover {
	box-shadow: 0 3px 10px rgba(251, 205, 208, .7);
	transform: translateY(-1px);
}

html.night-mode .nm-preview-toggle {
	background: rgba(255, 255, 255, .08);
	color: #ffd9d0;
}