/* 基础重置与主题色 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Microsoft YaHei', sans-serif;
}

:root {
	--theme-gold: #FFD700;
	--theme-dark: #0A0A12;
	--theme-red: #C41E3A;
}

body {
	background: var(--theme-dark);
	color: white;
	line-height: 1.6;
}

/* 链接文字样式 */
a {
	color: #ffffff; /* 将链接文字颜色设置为红色 */
	text-decoration: none; /* 可选：去除下划线 */
}

	a:hover {
		color: #6B44FF; /* 鼠标悬停时的链接文字颜色设置为蓝色 */
	}

.floating-window h2 {
	margin-top: 0;
}

/* 沉浸式全屏首屏 */
.hero-section {
	height: 100vh;
	background: linear-gradient(rgba(10,10,18,0.7), rgba(10,10,18,0.7)), url('img/BG.jpg') center/cover fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}
/* 假设我们有多个区域，但这里为了简化只展示一个main区域 */
.region {
	display: none;
}

	.region.active {
		display: block;
	}

/*区域*/
.section-page {
	position: absolute;
	left: 5vh; /* 初始左上角位置 */
	top: 10%;
	/* 初始尺寸 */
	width: 95%;
	height: 60%;
	border-radius: 12px;
	/* 动态缩放设置 */
	transform-origin: left top; /* 设置缩放基点 */
	transition: all 0.3s ease;
	/* 响应式缩放 */
	transform: scale(calc(0.8 + 0.2 * (100vw - 320px) / (1920 - 320))) translate( calc(50% * (100vw - 320px) / (1920 - 320)), calc(50% * (100vh - 480px) / (1080 - 480)) );
	/*border: 1px solid rgba(230, 200, 145, 0.2);*/
}

.section-page-L {
	position: absolute;
	left: 0%;
	top: -500%;
	/* 初始尺寸 */
	height: 2000%; /* 或你需要的任何高度 */
	width: 0%;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.3);
	/* 动态缩放设置 */
	transform-origin: left top; /* 设置缩放基点 */
	transition: all 0.3s ease;
	/* 响应式缩放 */
	transform: scale(calc(0.8 + 0.2 * (100vw - 320px) / (1920 - 320))) translate( calc(50% * (100vw - 320px) / (1920 - 320)), calc(50% * (100vh - 480px) / (1080 - 480)) );
	border-left: 1px solid rgba(230, 200, 145, 0.2);
	border-image: linear-gradient(to top right, #000000 35%, #e6c891, #000000 65%) 0.5;
}
/* 桌面大屏优化 */
@media (min-width: 1200px) {
	.dynamic-element {
		transform: scale(1) translate(30%, 30%);
		width: 300px;
		height: 300px;
	}
}

/* 移动端优化 */
@media (max-width: 768px) {
	.dynamic-element {
		transform: scale(0.7) translate(10%, 10%);
		width: 180px;
		height: 180px;
	}
}

/* 辅助视觉样式 */
.coordinates {
	position: fixed;
	padding: 10px;
	background: rgba(0,0,0,0.7);
	color: white;
	z-index: 100;
}

.section-type-R {
	height: 12vh; /* 或你需要的任何高度 */
	width: 50vh;
	position: fixed; /* 确保父元素有定位上下文，以便子元素可以相对定位 */
	justify-content: center;
	align-items: center;
	left: 5vh;
	bottom: 13vh;
	border-bottom: 1px solid rgba(230, 200, 145, 0.2);
	border-left: 1px solid rgba(230, 200, 145, 0.2);
	border-image: linear-gradient(to top right, #e6c891, #000000 35%) 0.5;
	padding-top: 6.5vh;
	padding-left: 4vh;
	text-align: left;
	font-weight: bold; /* 加粗文本 */
	color: #e6c891;
	font-size: 4vh;
	line-height: 5vh;
}

.section-type-L {
	height: 5vh; /* 或你需要的任何高度 */
	width: 5vh;
	position: fixed; /* 确保父元素有定位上下文，以便子元素可以相对定位 */
	justify-content: center;
	align-items: center;
	left: 1vh;
	bottom: 9vh;
	border-top: 1px solid rgba(230, 200, 145, 0.2);
	border-right: 1px solid rgba(230, 200, 145, 0.2);
	border-image: linear-gradient(to left bottom, #e6c891, #000000 35%) 0.5;
}

.section-type-M {
	height: 2vh; /* 或你需要的任何高度 */
	width: 50vh;
	position: fixed; /* 确保父元素有定位上下文，以便子元素可以相对定位 */
	justify-content: center;
	align-items: center;
	left: 9.5vh;
	bottom: 10vh;
	text-align: left;
	color: #e6c891;
	font-size: 0.8vh;
}

.container-msg-1 {
	position: relative; /* 相对于父元素定位 */
	left: 0%; /* 设置一个固定的右侧外边距，使元素偏左 */
	top: 0%; /* 垂直居中 */
	width: 650px;
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.4);
	/*border: 1px solid rgba(230, 200, 145, 0.2);*/
	border-radius: 10px;
	text-align: left;
	/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
}

.container-msg-2 {
	position: relative; /* 相对于父元素定位 */
	width: 100%;
	height: 0%;
	padding: 20px;
	/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
	top: 0%;
	left: 0%;
	border-top: 0.1px solid rgba(230, 200, 145, 0.2);
	text-align: center;
	border-image: linear-gradient(to right, #000000 0%, #e6c891 30%, #e6c891 70%, #000000 100%) 0.5;
	line-height: 1.5vh;
}

.container-mov {
	position: relative; /* 相对于父元素定位 */
	margin-left: auto; /* 自动填充左侧外边距 */
	width: 100%;
	height: 100%;
	padding: 20px;
	/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
	top: 0%;
	left: 0%;
}

.container-msg-3 {
	position: relative; /* 相对于父元素定位 */
	width: 100%;
	height: 100%;
	padding: 20px;
	border-radius: 10px;
	/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
	text-align: left;
}

.container-msg-4 {
	position: absolute;
	left: 0%; /* 初始左上角位置 */
	top: 0%;
	/* 初始尺寸 */
	width: 100vh;
	height: 5vh;
	/* 动态缩放设置 */
	transform-origin: left top; /* 设置缩放基点 */
	transition: all 0.3s ease;
	/* 响应式缩放 */
	transform: scale(calc(0.8 + 0.2 * (100vw - 320px) / (1920 - 320))) translate( calc(50% * (100vw - 320px) / (1920 - 320)), calc(50% * (100vh - 480px) / (1080 - 480)) );
	line-height: 1.8vh;
	text-align: left;
	display: flex;
	align-items: center; /* 垂直居中 */
	border-top: 0.3px solid rgba(230, 200, 145, 0.2);
	border-image: linear-gradient(to left, #e6c891, #000000) 0.5;
}

.container-announcement {
	position: relative; /* 相对于父元素定位 */
	width: 100vh;
	height: 80%;
	/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
	top: 12%;
	left: 0%;
	border-left: 0.3px solid rgba(230, 200, 145, 0.2);
	text-align: left;
	border-image: linear-gradient(to bottom, #e6c891, #000000) 0.5;
}

.container-page {
	position: relative; /* 相对于父元素定位 */
	width: 100vh;
	height: 10%;
	padding: 11px;
	border-radius: 15px;
	/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); */
	/* border: 1px solid rgba(230, 200, 145, 0.2); */
	top: 0%;
	left: 5%;
	text-align: left;
	line-height: 1.5vh;
}

.column-category {
	width: 100px;
	font-weight: bold; /* 加粗文本 */
	color: #e6c891;
	text-align: center;
	font-size: 13px;
}
/* 新增路径单元格样式 */
.column-path {
	color: #e6c891;
	/*font-style: italic;*/
	width: 100px;
	text-align: left;
	font-size: 13px;
}
/* 调整内容列宽度 */
.column-content {
	width: 450px;
	color: #9f9ec3;
	text-align: left; /* 这通常是默认值，但明确设置可以避免意外 */
	font-size: 13px;
}

/* 页脚样式 */
footer {
	position: fixed;
	width: 100%;
	height: 7vh;
	bottom: 0;
	border-top: 1px solid rgba(230, 200, 145, 0.2);
	background: rgba(10, 10, 18, 0.35);
	backdrop-filter: blur(10px);
	padding: 3rem 0rem;
	justify-content: center;
	align-items: center;
	display: flex;
	text-align: center;
	font-size: 10px;
	z-index: 1000;
}

/*Bilibili相关*/
iframe {
	border: none !important; /* 移除边框 */
}

.bilibili-player-video-container {
	width: 100% !important; /* 或者你想要的宽度 */
	height: auto !important; /* 自动高度以保持比例 */
}

/* 隐藏播放器头部（标题、用户信息等） */
.bilibili-player-video-header,
.bilibili-player-video-footer,
.bilibili-player-video-danmaku-btn,
.bilibili-player-video-sendbar,
.bilibili-player-video-control-bar {
	display: none !important;
}

/* 筛选器样式 */
.filters {
	display: flex;
	justify-content: center;
	margin-bottom: 25px;
	flex-wrap: wrap;
	gap: 10px;
}

.filter-btn {
	background: rgba(20, 20, 35, 0.7);
	border: 1px solid rgba(230, 200, 145, 0.2);
	color: #9f9ec3;
	padding: 8px 16px;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s;
}

	.filter-btn:hover, .filter-btn.active {
		background: rgba(230, 200, 145, 0.2);
		color: #e6c891;
	}

.no-results {
	text-align: center;
	color: #9f9ec3;
	padding: 40px;
	font-size: 1.2rem;
}

@media (max-width: 768px) {
	.news h1 {
		font-size: 2rem;
	}

	.day-news {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.update-item {
		flex-direction: column;
		gap: 10px;
	}

	.pagination {
		flex-wrap: wrap;
	}
}