/* ================= 主页：城关镇核心城区街道图（全幅、无侧栏、无底板） =================
   背景是一张离线重绘的 GTA 风格街道图（2048×2048），前景用百分比定位，
   所以任何屏幕尺寸、任何裁切方式下标记都跟底图对得上。 */

/* 切到主页时：隐藏侧栏、去掉分栏间隙与内容区底板 */
.app.is-home .sidebar { display: none; }
.app.is-home .app-body { padding: 0; gap: 0; }
.app.is-home .content-stage { border-radius: 0; }
.app.is-home .content,
body.app-mode .app.is-home .content {
  padding: 0;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.content:has(.home-map) { padding: 0; overflow: hidden; }

.home-map {
  position: relative;
  width: 100%; height: 100%;
  background: #1a2124;
  overflow: hidden;
  user-select: none;
}
.home-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(203, 229, 232, .6); }

/* 街道底图 */
.home-street {
  position: absolute; inset: 0;
  background: #1a2124 url(/chengguan-map.png) center / cover no-repeat;
}
/* 四周压暗，突出中间，接近游戏地图的观感 */
.home-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(125% 105% at 50% 46%, rgba(4, 18, 23, 0) 42%, rgba(3, 13, 17, .5) 100%),
    linear-gradient(180deg, rgba(5, 22, 28, .42), rgba(5, 22, 28, 0) 20%, rgba(5, 22, 28, 0) 80%, rgba(5, 22, 28, .5));
}

/* 连线层 */
.home-lines { position: absolute; inset: 0; pointer-events: none; }
.home-line {
  stroke: rgba(127, 231, 223, .72);
  stroke-width: 1.4;
  stroke-dasharray: 6 5;
  animation: hqFlow 2.6s linear infinite;
}
.home-line.is-far { stroke: rgba(214, 160, 66, .78); }
@keyframes hqFlow { to { stroke-dashoffset: -44; } }
@media (prefers-reduced-motion: reduce) { .home-line { animation: none; } }

/* 标记层 */
.home-marks { position: absolute; inset: 0; pointer-events: none; }

/* 公司 */
.hm-hub { position: absolute; transform: translate(-50%, -50%); width: 0; height: 0; }
.hm-hub-core {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: #5fe7d8; border: 2px solid rgba(4, 26, 32, .85);
  box-shadow: 0 0 12px rgba(95, 231, 216, .85);
}
.hm-hub-ring {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(95, 231, 216, .65);
  animation: hmPulse 2.4s ease-out infinite;
}
@keyframes hmPulse {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hm-hub-ring { animation: none; opacity: .4; } }
.hm-hub-name {
  position: absolute; left: 0; bottom: 16px; transform: translateX(-50%);
  white-space: nowrap; font-size: 12px; font-weight: 700; color: #b8fff7;
  text-shadow: 0 1px 3px rgba(0, 12, 16, .95), 0 0 8px rgba(0, 20, 26, .8);
}

/* 项目点 */
.hm-mk {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px;
  pointer-events: auto; cursor: pointer;
}
.hm-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: #ffc46b; border: 2px solid rgba(8, 26, 30, .9);
  box-shadow: 0 0 0 3px rgba(255, 196, 107, .18), 0 0 10px rgba(255, 196, 107, .55);
  transition: transform .15s, box-shadow .15s;
}
.hm-mk:hover .hm-dot { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(255, 196, 107, .26), 0 0 14px rgba(255, 196, 107, .8); }
.hm-name {
  white-space: nowrap; font-size: 11px; font-weight: 600; color: rgba(240, 252, 252, .94);
  text-shadow: 0 1px 3px rgba(0, 12, 16, .95), 0 0 6px rgba(0, 20, 26, .85);
}
.hm-mk.is-done .hm-dot { background: rgba(203, 229, 232, .5); box-shadow: none; }
.hm-mk.is-done .hm-name { color: rgba(203, 229, 232, .55); font-weight: 500; }

/* 镇外项目（贴边） */
.hm-out {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  pointer-events: none; text-align: center;
}
.hm-out-name {
  font-size: 11.5px; font-weight: 700; color: #ffd894;
  text-shadow: 0 1px 3px rgba(0, 12, 16, .95), 0 0 6px rgba(0, 20, 26, .85);
}
.hm-out-n { font-size: 10px; color: rgba(255, 216, 148, .72); text-shadow: 0 1px 2px rgba(0, 12, 16, .9); }

/* 左上角行政区划 / 左下角图例 / 右下角提示 */
.home-caption {
  position: absolute; left: 22px; top: 16px;
  font-size: 12px; letter-spacing: .02em;
  color: rgba(232, 250, 251, .72);
  text-shadow: 0 1px 3px rgba(0, 16, 24, .85);
  pointer-events: none;
}
.home-caption b { color: #ffd894; font-weight: 700; }

.home-legend {
  position: absolute; left: 22px; bottom: 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: rgba(232, 250, 251, .78);
  text-shadow: 0 1px 3px rgba(0, 16, 24, .85);
  pointer-events: none;
}
.home-credit { margin-left: 4px; color: rgba(232, 250, 251, .4); }
.home-hint {
  position: absolute; right: 22px; bottom: 16px;
  font-size: 11px; color: rgba(255, 211, 140, .82);
  text-shadow: 0 1px 3px rgba(0, 16, 24, .85);
  pointer-events: none;
}

@media (max-width: 860px) {
  .home-legend { left: 12px; bottom: 10px; gap: 10px; font-size: 10px; }
  .home-hint { display: none; }
  .hm-name { display: none; }          /* 窄屏只留点，避免文字糊一片 */
  .hm-mk:hover .hm-name { display: inline; }
}