/* 
   全局样式定制，配合 Tailwind 用于高保真暗黑驾驶舱风格设计
*/

/* 修改全局滚动条 */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.6);
}

/* 渐变标题 */
.title-glow {
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

/* 毛玻璃面板基类 */
.glass-panel {
  background: rgba(10, 25, 47, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 240, 255, 0.15);
  box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.05),
              0 8px 32px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
}

/* 面板内部标题统一样式 */
.panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: #c0f9ff;
  border-left: 3px solid #00F0FF;
  padding-left: 8px;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.15) 0%, transparent 100%);
  display: inline-block;
  width: 100%;
}

/* 数据指标小卡片 */
.indicator-card {
  padding: 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 预警列表底部渐变透明遮罩，实现自动滚动列表的"消隐"效果 */
.mask-bottom {
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.auto-scroll-viewport {
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.auto-scroll-viewport::-webkit-scrollbar {
  display: none;
}

.auto-scroll-track {
  will-change: transform;
}

.auto-scroll-viewport::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  background: linear-gradient(180deg, rgba(5, 11, 20, 0) 0%, rgba(5, 11, 20, 0.92) 100%);
  pointer-events: none;
}

.auto-scroll-viewport.is-paused::after {
  background: linear-gradient(180deg, rgba(5, 11, 20, 0) 0%, rgba(5, 11, 20, 0.75) 100%);
}

/* ========== 地图视觉特效 ========== */
.map-bg {
  /* 制作一种网格底图效果模拟地图区域 */
  background-image: 
    linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: center center;
}

.map-container::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.8);
  pointer-events: none;
}

/* 地图上的打点样式与发光动画 */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(currentColor, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(currentColor, 0); }
  100% { box-shadow: 0 0 0 0 rgba(currentColor, 0); }
}

.map-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: 2px solid #050D1A;
  z-index: 20;
  transition: transform 0.2s;
}
.map-dot:hover {
  transform: translate(-50%, -50%) scale(1.3);
  z-index: 30;
}

/* 地图悬浮提示框 (Tooltip) DS-10 */
.map-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(5, 13, 26, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.4);
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.map-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 240, 255, 0.4) transparent transparent transparent;
}
.map-dot:hover .map-tooltip {
  visibility: visible;
  opacity: 1;
  bottom: 20px;
}

/* 阶段颜色配置 - 对应 11 个阶段规则 */
.phase-1 { background-color: #9ca3af; color: #9ca3af; } /* 潜在矿点 灰色 */
.phase-2 { background-color: #93c5fd; color: #93c5fd; } /* 探矿权出让 浅蓝 */
.phase-3 { background-color: #3b82f6; color: #3b82f6; } /* 探矿权设立 蓝色 */
.phase-4 { background-color: #00ffff; color: #00ffff; box-shadow: 0 0 10px #00ffff; } /* 储量备案 青色 */
.phase-5 { background-color: #facc15; color: #facc15; } /* 采矿权出让 橙黄 */
.phase-6 { background-color: #fb923c; color: #fb923c; } /* 前期手续 橙色 */
.phase-7 { background-color: #ea580c; color: #ea580c; } /* 开工建设 深橙 */
.phase-8 { background-color: #86efac; color: #86efac; } /* 环保验收 黄绿 */
.phase-9 { background-color: #22c55e; color: #22c55e; box-shadow: 0 0 10px #22c55e;} /* 正式生产 绿色 */
.phase-10 { background-color: #166534; color: #166534; } /* 技改 深绿 */
.phase-11 { background-color: #8b4513; color: #8b4513; } /* 闭坑 棕色 */

/* Header Background */
.header-bg {
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwIEwxMDAwMCAwIEwxMDAwMCA4MCBMMCA4MCBaIiBmaWxsPSJyZ2JhKDEwLCAyNSwgNDcsIDAuNykiLz48cGF0aCBkPSJNMCA4MCBMMTAwMDAgODAiIHN0cm9rZT0iIzAwRjBGRiIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+') bottom left repeat-x;
}

.animate-spin-slow {
  animation: spin 3s linear infinite;
}

#special-left {
  display: none;
}
 