/* --- CSS 变量定义 --- */
:root {
  --color-bg-panel: rgba(10, 15, 25, 0.9); /* 左侧面板背景色 */
  --color-accent-map: #ff7300; /* 地图主题色 */
  --color-accent-resource: #5588cc; /* 资源主题色 */
  --color-accent-special: #00b386; /* 特殊点位主题色 */
  --color-text-white: #fff; /* 白色字体 */
  --color-text-light: #aaa; /* 浅色字体 */
  --color-border-dark: rgba(255, 255, 255, 0.1); /* 浅色边框 */
  --panel-width: 280px; /* 左侧面板宽度 */
}

/* 设置html和body高度、字体、颜色等基础样式 */
html,
body {
  height: 100%; /* 页面高度100% */
  margin: 0; /* 去除默认外边距 */
  overflow: hidden; /* 禁止滚动条 */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* 设置字体 */
  color: var(--color-text-white); /* 默认字体颜色 */
}

/* 地图容器样式 */
#map-container {
  position: relative; /* 相对定位用于内部绝对定位元素 */
  width: 100vw; /* 宽度100vw */
  height: 100vh; /* 高度100vh */
}

/* 地图本体样式 */
#map {
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
}

/* 坐标显示浮层样式 */
#coordinate-display {
  position: absolute; /* 绝对定位 */
  bottom: 10px; /* 距底部10px */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 水平居中修正 */
  z-index: 1000; /* 层级较高 */
  background: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
  padding: 5px 15px; /* 内边距 */
  border-radius: 20px; /* 圆角 */
  font-size: 14px; /* 字体大小 */
  pointer-events: none; /* 不响应鼠标事件 */
  backdrop-filter: blur(4px); /* 毛玻璃效果 */
}

/* 左侧抽屉面板整体样式 */
.drawer-panel {
  position: absolute; /* 绝对定位 */
  left: 0; /* 靠左 */
  top: 0; /* 顶部 */
  bottom: 0; /* 底部 */
  width: var(--panel-width); /* 宽度变量 */
  background: var(--color-bg-panel); /* 背景色 */
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.7); /* 阴影 */
  z-index: 1020; /* 层级 */
  transform: translateX(-100%); /* 默认隐藏 */
  transition: transform 0.3s ease-in-out; /* 动画过渡 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  padding: 20px; /* 内边距 */
  box-sizing: border-box; /* 包含内边距和边框 */
}

/* 面板展开时显示 */
.drawer-panel.open {
  transform: translateX(0); /* 显示面板 */
}

/* 面板头部样式 */
.panel-header {
  margin-bottom: 20px; /* 下外边距 */
  padding-bottom: 10px; /* 下内边距 */
  border-bottom: 1px solid var(--color-border-dark); /* 底部分割线 */
  text-align: center; /* 居中 */
}

/* 面板标题样式 */
.panel-header h2 {
  font-size: 1.5em; /* 字体大小 */
  margin: 0; /* 去除外边距 */
  color: var(--color-accent-map); /* 主题色 */
  text-shadow: 0 0 5px rgba(255, 115, 0, 0.5); /* 发光效果 */
}

/* Tab导航栏样式 */
.tab-nav {
  display: flex; /* 弹性布局 */
  margin-bottom: 15px; /* 下外边距 */
}

/* Tab按钮基础样式 */
.tab-nav button {
  flex-grow: 1; /* 平分宽度 */
  padding: 10px 0; /* 内边距 */
  border: none; /* 无边框 */
  background: rgba(255, 255, 255, 0.05); /* 浅色背景 */
  color: var(--color-text-light); /* 浅色字体 */
  cursor: pointer; /* 鼠标手型 */
  font-weight: bold; /* 加粗 */
  transition: all 0.2s; /* 动画 */
  border-bottom: 3px solid transparent; /* 底部边框 */
}

/* 地图Tab激活样式 */
.tab-nav button.active-tab-map {
  background: rgba(255, 115, 0, 0.15); /* 主题色背景 */
  color: var(--color-accent-map); /* 主题色字体 */
  border-bottom-color: var(--color-accent-map); /* 底部边框主题色 */
}

/* 资源Tab激活样式 */
.tab-nav button.active-tab-resource {
  background: rgba(85, 136, 204, 0.15); /* 资源色背景 */
  color: var(--color-accent-resource); /* 资源色字体 */
  border-bottom-color: var(--color-accent-resource); /* 底部边框资源色 */
}

/* 面板内容区样式 */
.panel-content {
  flex-grow: 1; /* 占满剩余空间 */
  overflow-y: auto; /* 垂直滚动 */
  padding-right: 5px; /* 右内边距 */
}

/* Tab内容隐藏 */
.tab-pane {
  display: none; /* 默认隐藏 */
}

/* Tab内容激活显示 */
.tab-pane.active {
  display: block; /* 显示 */
}

/* 地图选择区块标题样式 */
.map-section h4 {
  font-size: 1.1em; /* 字体大小 */
  margin: 10px 0 8px; /* 上下外边距 */
  color: var(--color-text-white); /* 白色字体 */
  border-left: 3px solid var(--color-accent-map); /* 左侧主题色条 */
  padding-left: 8px; /* 左内边距 */
}

/* 地图选择列表样式 */
.map-grid-list {
  display: flex; /* 弹性布局 */
  flex-wrap: wrap; /* 换行 */
  gap: 8px; /* 间距 */
}

/* 单个地图项样式 */
.map-item {
  padding: 8px 12px; /* 内边距 */
  background: rgba(40, 45, 60, 0.8); /* 深色背景 */
  border-radius: 4px; /* 圆角 */
  font-size: 14px; /* 字体大小 */
  cursor: pointer; /* 鼠标手型 */
  transition: all 0.2s; /* 动画 */
}

/* 激活地图项样式 */
.map-item.active {
  background: var(--color-accent-map); /* 主题色背景 */
  box-shadow: 0 0 10px rgba(255, 115, 0, 0.5); /* 发光 */
  font-weight: bold; /* 加粗 */
}

/* 点位筛选区块样式 */
.resource-section {
  margin-bottom: 20px; /* 下外边距 */
  padding-bottom: 10px; /* 下内边距 */
  border-bottom: 1px dashed var(--color-border-dark); /* 虚线分割 */
}

/* 最后一个点位筛选区块去除分割线 */
.resource-section:last-child {
  border-bottom: none; /* 无分割线 */
}

/* 点位筛选区块标题样式 */
.resource-section h4 {
  font-size: 1em; /* 字体大小 */
  margin: 0 0 10px 0; /* 下外边距 */
  color: var(--color-text-white); /* 白色字体 */
  border-left: 3px solid var(--color-accent-resource); /* 左侧资源色条 */
  padding-left: 8px; /* 左内边距 */
  line-height: 1.2; /* 行高 */
}

/* 资源容器网格布局 */
.resource-grid {
  display: grid; /* 网格布局 */
  grid-template-columns: repeat(3, 1fr); /* 三列 */
  gap: 10px; /* 间距 */
}

/* 搜索输入框样式 */
.search-input {
  width: 100%; /* 宽度100% */
  padding: 10px; /* 内边距 */
  margin-bottom: 10px; /* 下外边距 */
  box-sizing: border-box; /* 包含内边距和边框 */
  border: 1px solid var(--color-border-dark); /* 边框 */
  border-radius: 4px; /* 圆角 */
  background: rgba(30, 36, 56, 0.8); /* 深色背景 */
  color: var(--color-text-white); /* 白色字体 */
  font-size: 14px; /* 字体大小 */
  outline: none; /* 去除选中边框 */
}

/* 单个资源项样式 */
.resource-item {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 居中 */
  justify-content: center; /* 居中 */
  padding: 8px; /* 内边距 */
  background: rgba(30, 36, 56, 0.8); /* 深色背景 */
  border-radius: 6px; /* 圆角 */
  cursor: pointer; /* 鼠标手型 */
  transition: all 0.2s; /* 动画 */
  aspect-ratio: 1/1; /* 正方形 */
}

/* 激活资源项样式 */
.resource-item.active {
  background: var(--color-accent-resource); /* 资源色背景 */
  box-shadow: 0 0 10px rgba(85, 136, 204, 0.7); /* 发光 */
}

/* 资源名称样式 */
.resource-name {
  font-size: 12px; /* 字体大小 */
  text-align: center; /* 居中 */
  line-height: 1.2; /* 行高 */
}

/* 特殊点位按钮容器样式 */
.special-buttons {
  display: flex; /* 弹性布局 */
  gap: 10px; /* 间距 */
}

/* 单个特殊点位按钮样式 */
.special-btn {
  flex: 1; /* 平分宽度 */
  padding: 10px; /* 内边距 */
  border: none; /* 无边框 */
  border-radius: 4px; /* 圆角 */
  background: rgba(0, 179, 134, 0.2); /* 特殊色背景 */
  color: var(--color-accent-special); /* 特殊色字体 */
  font-weight: bold; /* 加粗 */
  cursor: pointer; /* 鼠标手型 */
  transition: background 0.2s, box-shadow 0.2s; /* 动画 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 居中 */
  justify-content: center; /* 居中 */
  user-select: none; /* 禁止选中 */
}

/* 激活特殊点位按钮样式 */
.special-btn.active {
  background: var(--color-accent-special); /* 特殊色背景 */
  color: var(--color-text-white); /* 白色字体 */
  box-shadow: 0 0 10px rgba(0, 179, 134, 0.7); /* 发光 */
}

/* 抽屉开关按钮样式 */
#toggleDrawer {
  position: absolute; /* 绝对定位 */
  left: 0; /* 靠左 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%) translateX(0); /* 居中修正 */
  z-index: 1021; /* 层级 */
  padding: 12px 10px; /* 内边距 */
  background: var(--color-bg-panel); /* 背景色 */
  color: var(--color-accent-map); /* 主题色字体 */
  border: none; /* 无边框 */
  border-radius: 0 8px 8px 0; /* 右侧圆角 */
  cursor: pointer; /* 鼠标手型 */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5); /* 阴影 */
  transition: left 0.3s ease-in-out, background 0.2s; /* 动画 */
}

/* 面板展开时开关按钮位置变化 */
.drawer-panel.open + #toggleDrawer {
  left: var(--panel-width); /* 移动到面板右侧 */
  color: var(--color-accent-resource); /* 资源色字体 */
}

/* 地图资源标记样式 */
.leaflet-marker-icon-resource {
  display: flex; /* 弹性布局 */
  align-items: center; /* 居中 */
  justify-content: center; /* 居中 */
  width: 36px; /* 宽度 */
  height: 36px; /* 高度 */
  background: rgba(30, 30, 30, 0.9); /* 深色背景 */
  border-radius: 50%; /* 圆形 */
  box-shadow: 0 0 8px var(--color-accent-resource); /* 发光 */
  color: var(--color-text-white); /* 白色字体 */
  font-size: 18px; /* 字体大小 */
  border: 2px solid var(--color-accent-resource); /* 资源色边框 */
  line-height: 1; /* 行高 */
}

/* 地图出生点标记样式 */
.leaflet-marker-icon-spawn {
  display: flex; /* 弹性布局 */
  align-items: center; /* 居中 */
  justify-content: center; /* 居中 */
  width: 40px; /* 宽度 */
  height: 40px; /* 高度 */
  background: rgba(0, 179, 134, 0.8); /* 特殊色背景 */
  border-radius: 50%; /* 圆形 */
  box-shadow: 0 0 15px var(--color-accent-special); /* 发光 */
  color: var(--color-text-white); /* 白色字体 */
  font-size: 20px; /* 字体大小 */
  border: 3px solid #fff; /* 白色边框 */
  line-height: 1; /* 行高 */
  font-weight: bold; /* 加粗 */
}

/* 地图撤离点标记样式 */
.leaflet-marker-icon-exit {
  display: flex; /* 弹性布局 */
  align-items: center; /* 居中 */
  justify-content: center; /* 居中 */
  width: 40px; /* 宽度 */
  height: 40px; /* 高度 */
  background: rgba(255, 100, 100, 0.8); /* 红色背景 */
  border-radius: 50%; /* 圆形 */
  box-shadow: 0 0 15px #ff6464; /* 发光 */
  color: var(--color-text-white); /* 白色字体 */
  font-size: 20px; /* 字体大小 */
  border: 3px solid #fff; /* 白色边框 */
  line-height: 1; /* 行高 */
  font-weight: bold; /* 加粗 */
}

/* 反馈按钮样式 */
#feedbackBtn {
  margin-top: 20px; /* 上外边距 */
  padding: 12px; /* 内边距 */
  border: none; /* 无边框 */
  border-radius: 6px; /* 圆角 */
  background: #333; /* 深色背景 */
  color: var(--color-accent-map); /* 主题色字体 */
  font-weight: bold; /* 加粗 */
  cursor: pointer; /* 鼠标手型 */
  transition: background 0.2s, color 0.2s; /* 动画 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 居中 */
  justify-content: center; /* 居中 */
  gap: 8px; /* 间距 */
  border: 1px solid var(--color-accent-map); /* 主题色边框 */
  user-select: none; /* 禁止选中 */
  flex-shrink: 0; /* 不收缩 */
}

/* 反馈按钮悬停样式 */
#feedbackBtn:hover {
  background: var(--color-accent-map); /* 主题色背景 */
  color: var(--color-text-white); /* 白色字体 */
  box-shadow: 0 0 8px rgba(255, 115, 0, 0.5); /* 发光 */
}

/* 通用小按钮样式 */
.small-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #23272b 80%, #3a3f44 100%);
  color: #ffb400;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.2s, color 0.2s;
}

/* 小按钮内图标样式 */
.small-btn .resource-icon {
  font-size: 18px;
}

/* 功能按钮容器样式 */
.feature-buttons {
  display: flex; /* 弹性布局 */
  gap: 8px; /* 间距 */
  flex-wrap: wrap; /* 换行 */
}

/* 坐标显示按钮样式（与反馈按钮一致） */
#toggleCoordinateBtn {
  margin-top: 20px; /* 上外边距 */
  padding: 12px; /* 内边距 */
  border: none; /* 无边框 */
  border-radius: 6px; /* 圆角 */
  background: #333; /* 深色背景 */
  color: var(--color-accent-map); /* 主题色字体 */
  font-weight: bold; /* 加粗 */
  cursor: pointer; /* 鼠标手型 */
  transition: background 0.2s, color 0.2s; /* 动画 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 居中 */
  justify-content: center; /* 居中 */
  gap: 8px; /* 间距 */
  border: 1px solid var(--color-accent-map); /* 主题色边框 */
  user-select: none; /* 禁止选中 */
  flex-shrink: 0; /* 不收缩 */
  font-size: 15px; /* 字体大小 */
}

/* 坐标显示按钮悬停和激活样式 */
#toggleCoordinateBtn:hover,
#toggleCoordinateBtn.active {
  background: var(--color-accent-map); /* 主题色背景 */
  color: var(--color-text-white); /* 白色字体 */
  box-shadow: 0 0 8px rgba(255, 115, 0, 0.5); /* 发光 */
}

/* 坐标显示按钮内标签样式 */
#toggleCoordinateBtn .toggle-label {
  font-size: 15px; /* 字体大小 */
  margin-right: 0; /* 无右外边距 */
}

/* 坐标显示按钮隐藏滑块 */
#toggleCoordinateBtn .toggle-switch {
  display: none; /* 隐藏 */
}

/* 要塞状态按钮面板样式（右侧竖排，风格与左侧面板一致） */
#fortress-status-panel {
  position: absolute;
  right: 24px;
  top: 120px;
  z-index: 999;
  background: rgba(40, 44, 52, 0.98);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: 20px 12px;
  width: 128px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#fortress-status-panel .status-btn {
  display: block;
  width: 100%;
  padding: 10px 0;
  font-size: 15px;
  color: #e6e6e6;
  background: linear-gradient(90deg, #23272b 80%, #3a3f44 100%);
  border: none;
  border-radius: 8px;
  margin: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  letter-spacing: 2px;
}

#fortress-status-panel .status-btn.active {
  background: linear-gradient(90deg, #ffb400 80%, #ffe066 100%);
  color: #23272b;
  font-weight: bold;
  box-shadow: 0 4px 16px rgba(255, 180, 0, 0.15);
}

#fortress-status-panel .status-btn:hover:not(.active) {
  background: linear-gradient(90deg, #3a3f44 80%, #23272b 100%);
  color: #ffd700;
}

/* 右侧地图状态切换面板美化 */
#map-status-panel {
  position: absolute;
  right: 24px;
  top: 120px;
  z-index: 999;
  background: rgba(30, 32, 36, 0.98);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  padding: 24px 16px;
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  border: 2px solid #23272b;
}

#map-status-panel .status-btn {
  display: block;
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  color: #f5f5f5;
  background: linear-gradient(90deg, #23272b 80%, #3a3f44 100%);
  border: none;
  border-radius: 8px;
  margin: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  letter-spacing: 2px;
  font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
}

#map-status-panel .status-btn.active {
  background: linear-gradient(90deg, #ffb400 80%, #ffe066 100%);
  color: #23272b;
  font-weight: bold;
  box-shadow: 0 4px 16px rgba(255, 180, 0, 0.18);
  border: 2px solid #ffb400;
}

#map-status-panel .status-btn:hover:not(.active) {
  background: linear-gradient(90deg, #3a3f44 80%, #23272b 100%);
  color: #ffd700;
}

/* 缩放条样式 */
#map-zoom-bar {
  background: rgba(30, 32, 36, 0.95);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  border: 2px solid #23272b;
}

#zoomRange {
  accent-color: #ffb400;
  height: 24px;
}

/* 缩放条控制按钮样式，和坐标显示按钮完全一致 */
#toggleZoomBarBtn {
  margin-top: 20px;
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: #333;
  color: var(--color-accent-map);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--color-accent-map);
  user-select: none;
  flex-shrink: 0;
  font-size: 15px;
}

#toggleZoomBarBtn:hover,
#toggleZoomBarBtn.active {
  background: var(--color-accent-map);
  color: var(--color-text-white);
  box-shadow: 0 0 8px rgba(255, 115, 0, 0.5);
}

#toggleZoomBarBtn .toggle-label {
  font-size: 15px;
  margin-right: 0;
}