body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  padding-right: 10vw; /* 预留右侧空间 */
}
/*-----------------------------------加载动画样式-----------------------------------*/
/* 全屏遮罩层 */
#splash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* 纯白背景遮挡其他内容 */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 图片容器初始状态（放大） */
#splash-image-container {
  width: 100%;
  max-width: 800px; /* 放大后的最大宽度 */
  text-align: center;
  animation: shrink 0.5s ease-out 3s forwards; /* 3秒后执行缩小动画 */
}

/* 初始放大图片 */
#splash-image {
  width: 100%;
  transform: scale(1.2);
  transform-origin: center center; /* 关键修改：从图片中心放大 */
  margin: 0 auto; /* 确保水平居中 */
  display: block; /* 消除图片底部间隙 */
}

/* 进度条容器 */
#splash-progress-container {
  width: 70%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto;
}

/* 进度条动画 */
#splash-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #a30000, #e60000);
  border-radius: 3px;
  animation: progress 3s linear forwards;
}

/* 关键帧动画 */
@keyframes progress {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes shrink {
  to {
    width: 50%; /* 最终宽度与页面标题一致 */
  }
}

/* -----------------------------------标题样式----------------------------------- */
/*标题图片样式*/
#page-header {
  text-align: center;
  margin-bottom: 20px;
}

#page-header img {
  max-width: 500px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  box-shadow: none;
}

/* 文本框样式 */
.text-box {
  width: 40%;
  margin: 0 auto 30px;
  padding: 15px 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
  text-align: center;
  font-size: 20px;
  /* 文字颜色设置 */
  color: #a30000; /* 默认深灰色 */
  /* 文字底影效果 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 淡淡阴影 */
  /* 可选：增加过渡效果 */
  transition: all 0.3s ease;
  font-weight: bold;
  position: relative; /* 定位基准 */
}

/* 装饰图片样式 */
.decor-bottom-left {
  position: absolute;
  width: 60px; /* 按需调整 */
  height: auto;
  left: 10px;
  bottom: 10px;
  opacity: 0.7;
  z-index: 1; /* 确保在背景上方 */
  pointer-events: none; /* 防止干扰点击 */
}

/* 分类标题样式 */
.category h2 {
  margin-top: 0;
  font-size: 15px;
  color: #333;
}

/* 分类容器 */
.category {
  width: 50%;
  margin: 30px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05); /* 柔和阴影代替边框 */
  box-sizing: border-box;
}

/* 按钮样式 */
.category button {
  margin: 8px;
  padding: 10px 15px;
  font-size: 15px;
  background-color: #a30000;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 柔和立体感 */
}

.category button:hover {
  background-color: #e60000;
}

.category button:active {
  transform: scale(0.96);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

/* -----------------------------------底板样式----------------------------------- */
#footer-image {
  width: 100%;
  line-height: 0; 
  position: relative;
  margin: 0;
  padding: 0;
}

#footer-image img {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

#footer-note {
  position: fixed;
  bottom: 0;
  left: 8px;
  font-size: 12px;
  color: #888;
  z-index: 10000;
  pointer-events: none;
  user-select: none;
}

#footer-note a {
  pointer-events: auto; /* 允许点击链接 */
  color: inherit; /* 继承父元素颜色 */
  text-decoration: none;
}

#footer-note a:hover {
  text-decoration: underline;
}

#secret-button {
  position: absolute;
  left: 61%;
  top: 55%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: default;         /* ✅ 不显示手型 */
  pointer-events: auto;    /* ✅ 仍可点击 */
  z-index: 10;
  user-select: none;
}

/* -----------------------------------右边歌单-----------------------------------*/
/* 固定右侧容器 */
#side-panel {
  position: fixed;
  top: 0;
  right: 8;
  width: 13vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #000;
  z-index: 9998;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05);
}

/* 背景图淡化叠层 */
#side-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('image/idol.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: 0.25;
  pointer-events: none;
  z-index: -1;
}

/* 标题栏和搜索框区域（固定） */
#panel-header {
  flex-shrink: 0;
  padding: 10px;
}

/* 歌曲列表滚动区域 */
#panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px;
}

/* 歌曲列表内容样式 */
#song-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  padding-bottom: 10px; /* 保留底部空间，防止遮挡 */
}

#song-list li {
  margin-bottom: 10px;
}

#song-list a {
  text-decoration: none;
  color: #a30000;
}

#song-list a:hover {
  text-decoration: underline;
  color: #e60000;
}

/* 可选：搜索栏横向对齐 */
.search-group {
  display: flex;
  gap: 5px;
}

/*-----------------------------------左下角固定GIF-----------------------------------*/
#corner-gif {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1000; /* 确保在最上层 */
  opacity: 0.8; /* 可选透明度 */
  transition: opacity 0.3s;
}

#corner-gif:hover {
  opacity: 1; /* 悬停时完全显示 */
}

#corner-gif img {
  width: 120px; /* 根据实际尺寸调整 */
  height: auto;
  pointer-events: none; /* 防止遮挡点击 */
}