/* ===== MAP ===== */
#map-wrap { position: fixed; top: 50px; left: 220px; bottom: 0; overflow: hidden; transition: right .3s ease, left .3s ease; }
#map-wrap.po { right: 380px; }
#map-wrap:not(.po) { right: 0; }
#map-wrap.sidebar-collapsed { left: 0; }
svg.map { width: 100%; height: 100%; cursor: grab; }
svg.map:active { cursor: grabbing; }
svg.map path { transition: opacity .15s; }
.water { fill: #080e1a; }
.border { fill: none; stroke: var(--border); stroke-width: 0.3; pointer-events: none; }
.graticule { fill: none; stroke: #0d1525; stroke-width: 0.3; }
.india-soi { pointer-events: all; }

/* User country highlight pulse */
@keyframes user-pulse {
  0%, 100% { opacity: 0.5; stroke-width: 1; }
  50% { opacity: 1; stroke-width: 2; }
}

/* ===== TOOLTIP ===== */
#tt { position: fixed; pointer-events: none; z-index: 2000; background: rgba(12,18,33,0.95);
  border: 1px solid var(--border); border-radius: 5px; padding: 7px 10px; font-size: 11px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4); display: none; max-width: 220px; }
#tt.show { display: block; }
.tt-t { font-weight: 600; margin-bottom: 2px; }
.tt-v { font-family: 'Space Mono', monospace; color: var(--gold); }
.tt-s { font-size: 9px; color: var(--t3); margin-top: 1px; }

/* ===== LEGEND ===== */
#legend { position: fixed; bottom: 16px; left: 14px; z-index: 800; background: rgba(12,18,33,0.9);
  border: 1px solid var(--border); border-radius: 5px; padding: 8px 12px; backdrop-filter: blur(8px); }
.lg-t { font-size: 8px; color: var(--t3); font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.lg-bar { width: 160px; height: 6px; border-radius: 3px; }
.lg-lb { display: flex; justify-content: space-between; margin-top: 2px; font-size: 8px; color: var(--t3); font-family: 'Space Mono', monospace; }
.lg-ex { font-size: 8px; color: var(--t3); margin-top: 4px; max-width: 160px; line-height: 1.3; font-family: 'Space Mono', monospace; }

/* ===== SCOPE TOGGLE (bottom center) ===== */
#scope-toggle {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 800;
  display: flex; gap: 2px; background: rgba(12,18,33,0.85); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 20px; padding: 3px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.st-btn {
  padding: 5px 16px; font-size: 10px; font-family: 'Space Mono', monospace;
  background: transparent; border: none; border-radius: 18px;
  color: var(--t3); cursor: pointer; transition: all 0.15s; letter-spacing: 0.5px;
}
.st-btn:hover { color: var(--t1); }
.st-btn.on { background: var(--gold); color: var(--bg); }

#info { position: fixed; bottom: 16px; right: 14px; z-index: 800; font-size: 8px; color: var(--t3); font-family: 'Space Mono', monospace; }