:root {
  --main-bg-color: #5a2727;
  --main-title-color: #F5E8D3;
  --main-text-color: #ffffff;
  --scratch-color: #7e7e7e;
  --link-highlight-color: #ff8787;
  --btn-bg-color: #D4B68A;
  --btn-text-color: #5A2727;
}

body {
  margin: 0;
  padding: 0;
  user-select:none;
}

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

ul, ol {
  padding-left: 1rem;   /* 左侧预留空间，避免圆点被隐藏 */
  margin: 1rem 0;       /* 添加上下外边距，优化排版 */
}

ul {
  list-style-type: disc; /* 小圆点样式 */
}

a:-webkit-any-link {
  text-decoration: none;
}

/* ****************** 地图区域 ******************* */
#map {
  position: fixed;
  width: 100%;
  height: 100%;
}

/* 地图标记*/
.leaflet-marker-icon.founded {
  opacity: .2;
}

/* 地图标记弹窗 */
.leaflet-popup-content-wrapper {
  padding: 0;
}

.leaflet-popup-content {
  position: relative;
  margin: 0 !important;
  border-radius: 10px;
  overflow: hidden;
}

.img-container {
  position: relative;
}

.img-container img {
  display: block;
  width: 100%;
}

/* 鼠标悬停时改变伪元素的背景颜色以实现发光效果 */
.img-container::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  content: '';
  pointer-events: none; /* 防止发光层阻碍图片点击放大 */
  transition: .3s;
}

.img-container:hover::after {
  opacity: .2;
}

.content-container {
  padding: 15px 10px 10px;
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  /* 单独允许文本选择和复制 */
  user-select: text;
  -webkit-user-select: text; /* 兼容 Safari/Chrome */
  -moz-user-select: text; /* 兼容 Firefox */
  -ms-user-select: text; /* 兼容 IE/Edge */
}

.marker-title {
  color: var(--main-title-color);
  font-size: 24px;
}

.marker-type {
  margin-top: 3px;
  font-weight: normal;
  font-style: italic;
  font-size: 14px;
}

.marker-content {
  margin: 0;
  font-size: 14px;
}

.marker-content p {
  margin: 5px 0 !important;
}

.marker-content a {
  color: #fff9ac;
  border-bottom: #fff9ac 1px dashed;
}

.marker-content strong {
  color: #4DEEEA;
}

.marker-content blockquote {
  color: #a7a7a7;
  margin: 0;
  padding: 0 0 0 10px;
  border-left: 3px solid #a7a7a7;
}

.marker-btn {
  display: block;
  width: 100%;
  height: 30px;
  border: none;
  cursor: pointer;
  color: var(--btn-text-color);
  background-color: var(--btn-bg-color);
}

/* 已收集状态的文字样式 */
.collected-text {
  color: #888888; /* 灰色文字 */
  text-decoration: line-through; /* 删除线 */
}

/* popup 下面的小箭头 */
.leaflet-popup-tip {
  background-color: var(--btn-bg-color);
}

/* 地图缩放按钮 */
.leaflet-control-container{
  display: none;
}

.simplebar-scrollbar::before {
  background-color: var(--main-text-color);
}


/* ****************** 左侧折叠面板 ******************* */
.left-panel {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 20px;
  width: 400px;
  height: 100vh;
  background: var(--main-bg-color);
  color: var(--main-text-color);
  box-shadow: 0 0 4px #222;
  transition: left .3s;
}

.left-panel-top {
  height: 350px;
}

.left-panel-main {
  margin: 10px 0; /* 与上下区域分隔 */
  font-size: 14px;
  height: calc(100vh - 370px);
  /* overflow: auto; */
}

.left-panel.close { /* 关闭左侧面板 */
  left: -440px;
}

.game-logo {
  display: flex;
  align-items: center;
}

.game-logo img {
  width: 100%;
}

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

/* 主页等按钮 */
.btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.btns .iconfont {
  position: relative;
  top: 0;
  left: -5px;
  font-size: 26px;
  font-weight: normal;
}

.btns-item {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  margin: 10px 10px 0 0;
  padding: 7px 10px;
  height: 25px;
  line-height: 25px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  border: 2px solid #222;
  border-radius: 10px;
  cursor: pointer;
  transition: .3s;
}

.btns-item:hover {
  color: #232423;
}

.btns-home {
  background-color: #f39e4e;
}

.btns-home:hover {
  background-color: #f0c370;
}

.btns-bilibili {
  background-color: #ff7b91;
}

.btns-bilibili:hover {
  background-color: #ffafbc;
}

.btns-pay {
  background-color: #009fe9;
}

.btns-pay:hover {
  background-color: #79d5ff;
}

.btns-update {
  background-color: #a736a7;
}

.btns-update:hover {
  background-color: #e7a3e7;
}

/* 全选按钮 */
.filter-btns {
  display: flex;
  margin-top: 10px;
  font-size: 14px;
}

/* 分类面板 */
.group-item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  align-items: center;
  width: 50%;
  height: 40px;
  text-align: left;
  cursor: pointer;
  transition: .3s;
  padding: 0px 20px 0px 3px;
  box-sizing: border-box;
}

.filter-item:hover {
  color: var(--link-highlight-color);
}

.filter-item.scratch {
  color: var(--scratch-color);
  text-decoration: line-through;
}

.filter-count {
  flex-grow: 1;
  text-align: right;
}

.filter-img {
  width: 30px;
  margin-right: 10px;
}

.filter-img.scratch {
  filter: brightness(0.4);
  /* filter: grayscale(0%); */
}

/* 信息面板 */
.info {
  margin-top: 10px;
  height: 50px;
  font-size: 12px;
  color: var(--main-text-color);
}

.info p {
  margin: 5px 0;
}

/* 折叠箭头 */
.left-panel-close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0px;
  right: -25px;
  width: 25px;
  height: 50px;
  background-color: var(--main-bg-color);
  cursor: pointer;
  border-radius: 0 0 15px 0;
}

/* ****************** 右侧地图导航（多地图切换） ******************* */
.map-list {
  position: fixed;
  top: 30%;
  right: 10px;
  display: flex;
  flex-direction: column;
}

.map-list-item {
  width: 80px;
  height: 80px;
  margin: 5px 0;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
}


/* ****************** 添加标点的表单 ******************* */
.marker-form-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.marker-form-modal.active {
  opacity: 1;
  visibility: visible;
}

.marker-form {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.marker-form h3 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-group textarea {
  height: 100px;
  resize: vertical;
}

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

.form-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn {
  background: #4CAF50;
  color: white;
}

.cancel-btn {
  background: #f44336;
  color: white;
}

.form-message {
  text-align: center;
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  display: none;
}

.form-message.success {
  background: #dff0d8;
  color: #3c763d;
  display: block;
}

.form-message.error {
  background: #f2dede;
  color: #a94442;
  display: block;
}

/* 坐标输入框 */
.coords-inputs {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.coords-inputs input {
  flex: 1;
}

.coord-label {
  font-size: 12px;
  color: #666;
  margin-right: 5px;
}

/* 弹窗外部删除按钮样式 */
.popup-actions {
  position: absolute;
  display: flex;
  left: 0px;
  top: 0px;
  z-index: 1000; /* 确保在弹窗上方 */
}

.popup-btn {
  height: 20px;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  width: 50px;
  padding: 0;
  margin: 0;
  text-align: center;
  background: #f44336;
  color: white;
}