html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#map {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #102b2f;
}

.map-icon {
  image-rendering: auto;
}

/* 清除 Leaflet 弹窗样式 */
.leaflet-popup.map-popup,
.leaflet-popup.map-popup .leaflet-popup-content-wrapper {
  margin: 0;
  padding: 0;
  box-shadow: none;
}

.leaflet-popup.map-popup .leaflet-popup-content {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.leaflet-popup.map-popup .leaflet-popup-content-wrapper {
  background-color: transparent;
  color: transparent;
}

.leaflet-popup.map-popup .leaflet-popup-tip {
  display: none;
}

/* 弹窗关闭按钮 */
.leaflet-popup.map-point a.leaflet-popup-close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  color: transparent;
  width: 1.2rem;
  height: 1.2rem;
  background-image: url("../data/icons/关闭.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.map-popup-content {
  background-color: #364551;
  color: white;
  border-radius: 1rem;
}

.map-popup-content img {
  max-width: 100%;
  cursor: zoom-in;
}

.map-popup-content p {
  margin: 0.5rem;
}

.map-popup-content .title {
  background-color: #1d5153;
  padding: 0.6rem 0.5rem 0.5rem 0.5rem;
  border-radius: 1rem 1rem 0 0;
}

.map-popup-content .title img.icon {
  height: 1.6rem;
  width: initial;
  vertical-align: middle;
}

.map-popup-content .title .area {
  margin-left: 0.5rem;
  color: #c4cccb;
}

.map-popup-content .title img.icon-small {
  height: 1rem;
  width: initial;
  vertical-align: middle;
}

.map-popup-content .intro {
  padding: 0.5rem 0.5rem 0 0.5rem;
  margin: 0;
}

.map-popup-content .note {
  padding: 0.5rem 0.5rem 0 0.5rem;
}

.map-popup-content .note p {
  margin: 0.2rem 0;
}

.map-popup-content img.fullscreen {
  cursor: zoom-out;
}

.map-popup-content .type-image {
  max-height: 200px;
  display: block;
  margin: 0 auto;
}

.map-popup-content .position {
  padding: 0 0.5rem 0.5rem 0.5rem;
  margin: 0 auto;
  width: fit-content;
  white-space: pre-wrap;
}

/* 选中提示 */
img.selected-marker {
  border-radius: 4px;
  box-shadow:
    0 0 0 2px rgba(0, 255, 0, 1);
}

/* 标记提示 */
/*img.selected-marker {
  border-radius: 4px;
  box-shadow:
    0 0 0 2px rgba(0, 255, 0, 1);
}*/

/* 筛选按钮 */
#toggle-layer-filter-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 22.5px;
  border-radius: 50%;
  background-color: black;
  border: 2px solid white;
  padding: 5px;
  cursor: pointer;
  z-index: 99999;
}

/* 掉落物 */
.drop-item {
  position: relative;
  display: inline-block;
  padding: 1px 0;
  background: #3f3f3f;
  border: 1px solid #ddd;
  padding: 8px 4px;
  margin: 1px 2px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
  color: white;
}

/* 中心内容（可替换为图片） */
.drop-item-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* 角标通用样式 */
.badge {
  position: absolute;
  padding: 0;
  margin: 0;
  font-size: 10px;
  font-weight: bold;
  color: white;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px  1px 0 #000,
    1px  1px 0 #000;
  white-space: nowrap;
  pointer-events: none; /* 防止遮挡点击事件 */
}

/* 各个角的位置 */
.badge.tl { top: 0px; left: 0px; }    /* 左上 */
.badge.tr { top: -2px; right: -1px; }   /* 右上 */
.badge.bl { bottom: 0px; left: 0px; } /* 左下 */
.badge.br { bottom: 0px; right: 1px; }/* 右下 */

/* 可选：不同角标不同颜色（示例） */
.badge.tl { color: #e5cf6c; font-style: italic; font-size: 8px; } /* 绑橙色斜体 */
.badge.tr { color: #fffa92; font-style: italic; } /* 首通、概率 */
/* 首通黄色 */
.badge.tr.badge-first-pass { color: #fffa92;}
.badge.tr.badge-first-pass::before {
  display: inline-block;
  content: "✨";
  transform: scale(0.6);
  transform-origin: 100% 0%;
  font-weight: normal;
}
.badge.tr.badge-probability { color: #c5f794; } /* 概率绿色 */
/* .badge.bl {  }  无 */
.badge.br { color: white; } /* 右下数量红色 */