/* 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;
    }
}