:root {
  --main-bg-color: #0F0F10;
  --collection-bg-color: #1F2022;
  --main-text-color: #ffffff;
  --highlight-color: #3A3B3A;
  --leftpanel-bg-color: #5A2727;

  --main-title-color: #F5E8D3;
  --search-bg-color: #3a1a1a;
  --scratch-color: #7e7e7e;
  --btn-bg-color: #D4B68A;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  font-family:'Source Han Serif CN VF';
  font-weight: 900;
  scroll-behavior: smooth;
}

h1,h2,h3,h4,h5,h6,p,ul,li {
  margin: 0;
  padding: 0;
}

.main {
  margin: 0 350px 0 300px;
  padding: 20px 50px;
}

.completion-title {
  text-align: center;
  font-size: 46px;
}

/* 进度条容器 */
.progress-container {
  padding: 10px 40px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 进度条轨道 */
.progress-track {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.1); /* 半透明白色轨道 */
  border-radius: 6px;
  position: relative;
}

/* 进度条本体（白色+发光效果） */
.progress-bar {
  position: relative;
  height: 100%;
  width: 0%; /* 初始进度0% */
  background: #fff; /* 白色进度条 */
  border-radius: 6px;
  transition: width 0.3s ease; /* 平滑过渡动画 */
  /* 发光效果：白色阴影扩散 */
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8),
              0 0 20px 4px rgba(255, 255, 255, 0.4);
}

/* 进度百分比文本 */
.progress-text {
  color: #fff;
  font-family: Arial, sans-serif;
  margin-top: 15px;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* 文本也带轻微发光 */
}



.type-container {
  margin-top: 20px;
}

.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.type-title {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--highlight-color);
  text-align: center;
  font-size: 30px;
}

.select-all-btn {
  width: 24px;
  height: 24px;
  border: 2px solid #888; /* 深灰色边框，更有质感 */
  border-radius: 6px; /* 圆角，避免生硬 */
  cursor: pointer;
  transition: all .2s ease; /* 所有属性过渡，更丝滑 */
  background-color: #0F0F10;
  margin-right: 10px;
}

.select-all-btn.selected {
  background: #71D371;
  border-color: #71D371
}

.type-count {
  padding-left: 10px;
  color: #D4B68A;
  font-size: 20px;
}

.type-desc {
  margin-top: 10px;
  text-align: center;
}

.collection-container {
  display: flex;
  justify-content: left;
  flex-wrap: wrap; /* 宽度不足时自动换行 */
  margin-top: 20px;
}

.collection-item {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 10px;
  padding: 20px 10px;
  border: 2px solid var(--highlight-color);
  border-radius: 10px;
  background-color: var(--collection-bg-color);
  cursor: pointer;
  transition: .3s;
}

.collection-item.founded {
  border: 2px solid #71D371;
}

.collection-item:hover {
  background-color: #303235;
}

.collection-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  filter: blur(3px);
}

.collection-item.founded .collection-icon {
  filter: blur(0);
}

.collection-icon img {
  width: 100px;
  height: 100px;
}

.collection-name {
  text-align: center;
  margin-top: 5px;
  font-size: 18px;
  filter: blur(3px); /* 5px 模糊度 */
}

.collection-item.founded .collection-name {
  filter: blur(0);
}

.collection-item:hover .collection-icon,
.collection-item:hover .collection-name {
  filter: blur(0);
}

.collection-chapter {
  position: absolute;
  top: -10px;
  left: 55px;
  width: 60px;
  height: 18px;
  border: 1px solid var(--highlight-color);
  border-radius: 5px;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  color: var(--main-text-color);
  background-color: var(--main-bg-color);
}

.collection-chapter.chapter3 {
  color: rgb(243, 50, 50);
}

/* 状态方框基础样式 */
.status-box {
  position: absolute;
  bottom: -10px;
  left: 72px;
  width: 24px;
  height: 24px;
  border: 2px solid #888; /* 深灰色边框，更有质感 */
  border-radius: 6px; /* 圆角，避免生硬 */
  cursor: pointer;
  transition: all .2s ease; /* 所有属性过渡，更丝滑 */
  background-color: #0F0F10;
}

.status-box:hover {
  border-color: #4cd964; /* hover时边框变绿色，提示可点击 */
  box-shadow: 0 2px 5px rgba(76, 217, 100, 0.3); /* 绿色阴影，呼应选中色 */
}

.status-box.founded {
  background: #71D371;
  border-color: #71D371
}

.left-panel {
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 20px;
  width: 300px;
  height: 100%;
  background-color: var(--leftpanel-bg-color);
}

.title {
  font-size: 20px;
  text-align: center;
  color: #F5E8D3;
  text-shadow: 0 0 3px #000,0 0 3px #000;
}

.logo > img {
  width: 100%;
}

.btns-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.btns-item {
  padding: 5px 10px;
  text-align: center;
  width: 60px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 10px;
  text-decoration: none;
  transition: .3s;
}

.btns-item .iconfont {
  font-size: 24px !important;
}

.btns-item:hover {
  background-color: #0F0F10;
}

.btns-upload {
  margin-top: 20px;
  height: 60px;
  line-height: 60px;
  color: #F5E8D3;
  border: 2px dashed #fff;
  border-radius: 10px;
  text-align: center;
  font-size: 26px;
  cursor: pointer;
  background-color: #0F0F10;
}

.btns-map {
  display: block;
  margin-top: 20px;
  padding: 5px 10px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 10px;
  text-decoration: none;
  transition: .3s;
}

.btns-map:hover {
  background-color: #0F0F10;
}

.btns-input {
  display: none;
}



.info {
  position: relative;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  font-size: 18px;
}

.info p {
  margin: 0;
}

/* 默认状态下隐藏路径 */
.saveLocation {
  display: none;
}

/* 当鼠标悬浮在 .info 区域时，显示路径 */
.info:hover .saveLocation {
  display: inline-block; /* 使用 inline-block 使其可以被定位 */
  position: absolute;
  top: 50%;
  left: 100%; /* 将浮框的右边对齐到父容器 .info 的右边 */
  transform: translateY(-50%); /* 垂直居中 */
  
  /* 样式优化，使其更像一个浮框 */
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 5px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #212529;
  white-space: nowrap; /* 防止路径被换行 */
  z-index: 10; /* 确保浮框在最上层 */
}

/* 可选：在浮框左侧添加一个小箭头，指向提示文字 */
.info:hover .saveLocation::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px; /* 箭头宽度的负数 */
  transform: translateY(-50%);
  
  border-width: 5px;
  border-style: solid;
  border-color: transparent #dee2e6 transparent transparent; /* 只显示右边框，形成指向左的箭头 */
}







.right-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100%;
  background-color: #0F0F10;
}

.right-panel ul {
  display: flex;
  flex-direction: column;
  margin: 100px 20px 10px;
}

.right-panel li {
  list-style: none
}

.menu-item {
  margin: 5px 0;
}

.menu-item > a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.menu-item > a.active {
  color: #D4B68A;
}






.mask {
  display: flex;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  align-items: center; /* 垂直居中弹窗 */
  justify-content: center; /* 水平居中弹窗 */
}

.popup {
  position: relative; /* 关闭按钮基于弹窗定位 */
  width: 1000px;
  height: 1000px;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  background-color: var(--collection-bg-color);
  border: 1px solid var(--highlight-color);
}

.popup-icon {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-icon img {
  height: 100%;
}

.popup-name {
  margin-top: 30px;
  font-size: 24px;
}

.popup-desc {
  margin-top: 10px;
  color: #afafaf;
}

.popup-obtain {
  margin-top: 10px;
  font-size: 18px;
}

.popup-iframe {
  width: 100%;
  height: 650px;
  margin-top: 30px;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}


.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}