.hybrid-map-surface {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: rgb(27, 49, 51);
  touch-action: none;
  user-select: none;
}

.hybrid-map-surface > canvas,
.hybrid-map-surface > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hybrid-map-surface > canvas { pointer-events: none; }
.hybrid-map-surface > svg { overflow: hidden; }
.hybrid-map-surface #raster-layer { z-index: 0; }
.hybrid-map-surface #vector-layer,
.hybrid-map-surface #current-layer { z-index: 1; }
.hybrid-map-surface #symbol-layer { z-index: 2; pointer-events: none; }
.hybrid-map-surface #debug-layer { z-index: 3; }

.hybrid-map-surface .world-edge { stroke: rgba(220, 235, 232, .58); stroke-width: 1.4; vector-effect: non-scaling-stroke; fill: none; }
.hybrid-map-surface .world-edge.active { stroke: var(--accent); stroke-width: 2.4; }
.hybrid-map-surface .symbol { cursor: pointer; outline: none; pointer-events: all; }
.hybrid-map-surface .symbol .interaction-hit-area { fill: transparent; stroke: none; pointer-events: all; }
.hybrid-map-surface .symbol .icon-image { pointer-events: auto; overflow: visible; }
.hybrid-map-surface .symbol .state-ring { pointer-events: none; stroke-width: 3px; vector-effect: non-scaling-stroke; }
.hybrid-map-surface .symbol .state-ring-added { stroke: #6cff9e; }
.hybrid-map-surface .symbol .state-ring-removed { stroke: #ff7272; stroke-dasharray: 5 3; }
.hybrid-map-surface .symbol[data-visual-state="removed"] { opacity: .76; }
.hybrid-map-surface .symbol text { paint-order: stroke; stroke: rgba(4, 10, 11, .95); stroke-width: 3px; stroke-linejoin: round; fill: #d9e6e4; font-size: 13px; pointer-events: none; }
.hybrid-map-surface .symbol.town text { fill: #ffe6a0; font-weight: 700; }
.hybrid-map-surface .symbol.town.non-city text { fill: #d9e6e4; font-weight: 400; }
.hybrid-map-surface .symbol.utility { opacity: .42; }
.hybrid-map-surface .symbol.selected .icon-image,
.hybrid-map-surface .symbol:hover .icon-image,
.hybrid-map-surface .symbol:focus .icon-image { filter: drop-shadow(0 0 3px rgba(142,255,235,.95)); }
.hybrid-map-surface .symbol:hover,
.hybrid-map-surface .symbol:focus { opacity: 1; }
.hybrid-map-surface .symbol.selected .state-ring { stroke-width: 5px; filter: drop-shadow(0 0 3px rgba(160,255,237,.8)); }
.hybrid-map-surface .symbol .focus-halo { fill:none; stroke:#a0ffed; stroke-width:3px; vector-effect:non-scaling-stroke; pointer-events:none; transform-box:fill-box; transform-origin:center; animation:map-focus-pulse .8s ease-out 2; }
@keyframes map-focus-pulse { from { opacity:1; transform:scale(.75); } to { opacity:0; transform:scale(1.7); } }
.hybrid-map-surface .symbol:hover .state-ring,
.hybrid-map-surface .symbol:focus .state-ring { stroke-width: 4px; }

.hybrid-map-surface .map-loading {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 12;
  border: 1px solid #35565a;
  border-radius: 7px;
  padding: 6px 9px;
  background: rgba(4, 10, 11, .82);
  color: var(--accent);
  font-size: 12px;
}
.hybrid-map-surface .map-loading[hidden] { display: none; }