/* Tingyu Style */

/* Global */
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

::selection {
	background: #f8e89b;
}

::-moz-selection {
	background: #f8e89b;
}

body,
input,
button,
select,
textarea,
.button {
	font-size: 100%;
	line-height: 1.5;
	color: #555;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "PingFang SC", "Heiti SC", sans-serif;
}

/*Main*/
.wrapper-0 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

/*404*/
.title-404 {
	font-size: 2em;
	color: #888;
}

.text-404 {
	font-size: 1.5em;
	color: #ccc;
}

/* Mobile */
@media (max-width: 767px) {

	/*mobile*/
	.wrapper-0 {
		height: 80vh;
	}

	.title-404 {
		font-size: 1.5em;
	}
}

@media (min-width: 768px) {
	/*screen*/

}

/* 以下为新增的左下角图片样式（修改点1） */
.video-overlay-img-left {
	position: fixed;
	bottom: 20px;
	/* 距底部20px */
	left: 20px;
	/* 距左侧20px */
	width: 180px;
	/* 基础尺寸 */
	height: auto;
	z-index: 95;
	/* 层级控制（在按钮下方） */
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
	cursor: pointer;
	transition: transform 0.3s;
}

/* 响应式适配 */
@media (max-width: 768px) {
	.video-overlay-img-left {
		width: 90px;
		/* 平板尺寸 */
	}
}

@media (max-width: 480px) {
	.video-overlay-img-left {
		width: 70px;
		/* 手机尺寸 */
	}
}

/* 悬停动画 */
.video-overlay-img-left:hover {
	transform: scale(1.05);
}

/* 以下为修改后的图片样式（修改点2） */
.video-overlay-img {
	position: fixed;
	top: 80px;
	right: 85px;
	width: 400px;
	/* 修改点2：增大宽度（原120px） */
	height: auto;
	z-index: 99;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));

	/* 新增响应式适配 */
	@media (max-width: 768px) {
		width: 140px;
		/* 平板尺寸 */
	}

	@media (max-width: 480px) {
		width: 160px;
		/* 手机尺寸 */
	}
}

/* 确保视频全屏并覆盖整个视口 */
#fullscreen-video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	/* 保持视频比例并覆盖整个区域 */
	z-index: -1;
	/* 放在内容下方 */
}

/* 可选：添加内容层样式 */
.content {
	position: relative;
	z-index: 1;
	color: white;
	padding: 20px;
	background: rgba(0, 0, 0, 0.5);
}

/* 基础样式重置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
	overflow: hidden;
	position: relative;
}

/* 图片按钮容器（固定右下角） */
.btn-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	max-width: 80vw;
	z-index: 100;
}

/* 图片按钮样式 */
.music-btn {
	width: 70px;
	height: 70px;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.05);
	border: none;
	border-radius: 12px;
	padding: 5px;
	backdrop-filter: blur(5px);
	transition: all 0.3s ease;

	/* 防止按钮内容溢出 */
	overflow: hidden;
}

/* 图片适配 */
.music-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.3s;
}

/* 悬停效果 */
.music-btn:hover img {
	transform: scale(1.05);
}

/* 播放中的视觉反馈 */
.music-btn.playing {
	background: rgba(0, 247, 255, 0.1);
	box-shadow: 0 0 15px rgba(0, 247, 255, 0.3);
}

/* 响应式适配 */
@media (max-width: 480px) {
	.btn-container {
		bottom: 10px;
		right: 10px;
		gap: 10px;
	}

	.music-btn {
		width: 60px;
		height: 60px;
	}
}

/* 优化后的备案logo样式 */
.icp-logo {
	width: 14px;
	/* 基础尺寸（原16px） */
	height: 14px;
	margin: 0 4px;
	/* 增加图文间距 */
	vertical-align: middle;
	flex-shrink: 0;
	transition: transform 0.3s;
}

/* 移动端适配 */
@media (max-width: 480px) {
	.icp-logo {
		width: 12px;
		/* 移动端进一步缩小 */
		height: 12px;
		margin: 0 3px;
	}
}

/* 优化后的备案容器样式 */
.icp-footer {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
	background: transparent;
	/* 移除背景色 */
	backdrop-filter: none;
	/* 移除毛玻璃效果 */
	-webkit-backdrop-filter: none;
	padding: 4px 14px;
	/* 调整内边距 */
	border-radius: 999px;
	box-shadow: none;
	/* 移除阴影 */
	white-space: nowrap;
	transition: all 0.3s ease;
}

/* 优化后的备案链接样式 */
.icp-link {
	color: rgba(255, 255, 255, 0.9);
	/* 提升文字亮度 */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	text-decoration: none;
	letter-spacing: 0.5px;
	transition: color 0.3s;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0.1) 0%,
			rgba(255, 255, 255, 0) 100%);
	padding: 2px 8px;
	border-radius: 999px;
	backdrop-filter: blur(5px);
	/* 保留轻微模糊效果 */
}

/* 新增图标清晰度保障方案（修改点16） */
.icp-logo {
	image-rendering: -webkit-optimize-contrast;
	/* 优化图标渲染 */
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
}

/* 悬停状态增强 */
.icp-link:hover {
	color: rgba(0, 247, 255, 0.95);
	background: linear-gradient(90deg,
			rgba(0, 247, 255, 0.1) 0%,
			rgba(0, 247, 255, 0.05) 100%);
}

/* 移动端适配 */
@media (max-width: 480px) {
	.icp-footer {
		bottom: 10px;
		padding: 2px 10px;
	}

	.icp-link {
		font-size: 10px;
		gap: 3px;
		padding: 1px 6px;
	}

	.icp-logo {
		width: 12px;
		height: 12px;
	}
}

/* 推荐使用CSS类控制样式 */
.icp-footer.hidden {
	display: none !important;
}

/* 强化定位逻辑（修改点11） */
.video-overlay-img-left {
	position: fixed;
	bottom: 20px;
	left: 20px;

	/* 新增移动端强制定位 */
	@media (max-width: 768px) {
		top: 20px !important;
		/* 强制覆盖底部定位 */
		left: 15px !important;
		/* 增加左侧安全距离 */
		bottom: auto !important;
		/* 取消底部定位 */
		margin: 0 !important;
		/* 清除潜在外边距 */
		z-index: 101 !important;
		/* 确保最高层级 */
	}
}

/* 新增移动端定位保障方案（修改点12） */
@media (max-width: 768px) {

	/* 创建定位基准层 */
	body::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 90;
	}

	/* 强化图片定位 */
	.video-overlay-img-left {
		position: absolute !important;
		/* 双重定位保障 */
		transform: none !important;
		/* 禁用可能干扰的变换 */
	}
}

/* 新增移动端适配样式（修改点6） */
@media (max-width: 768px) {

	/* 按钮容器改为固定定位 + 精准居中方案 */
	.btn-container {
		position: fixed;
		/* 改为固定定位 */
		bottom: 80px;
		/* 距离底部80px */
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		/* 强制水平居中 */
		gap: 10px;
		width: 100%;
		/* 占满视口宽度 */
		max-width: 90vw;
		/* 限制最大宽度 */
		padding: 0 15px;
		/* 添加水平内边距 */
		box-sizing: border-box;
		z-index: 100;
	}

	/* 按钮样式调整 */
	.music-btn {
		flex: 0 0 auto;
		/* 禁止弹性伸缩 */
		width: 50px;
		height: 50px;
	}

	/* 备案信息位置微调 */
	.icp-footer {
		bottom: 15px;
		gap: 8px;
		padding: 3px 12px;
	}
}

/* 新增超小屏幕适配（修改点10） */
@media (max-width: 360px) {
	.btn-container {
		bottom: 70px;
		gap: 8px;
		padding: 0 10px;
	}

	.icp-footer {
		bottom: 10px;
	}
}