/* ===== ForgeGuard Network Map ===== */
.fg-map-section {
  margin: 40px 0 32px;
}

.fg-map-wrap {
  position: relative;
  width: 100%;
  max-height: 520px;
  min-height: 280px;
  background: linear-gradient(180deg, #0b0f1e 0%, #0d1224 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
}

.fg-map-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Background grid */
.fg-map-grid {
  stroke: rgba(255,255,255,0.03);
  stroke-width: 0.3;
}

/* World landmasses */
.fg-map-land {
  fill: rgba(255,255,255,0.025);
  stroke: rgba(255,255,255,0.10);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Connection lines between nodes */
.fg-map-link {
  fill: none;
  stroke: url(#fgMapLinkGrad);
  stroke-width: 0.5;
  stroke-dasharray: 2 5;
  opacity: 0.5;
  animation: fgMapDash 10s linear infinite;
}

@keyframes fgMapDash {
  to { stroke-dashoffset: -84; }
}

/* Server node dot */
.fg-map-node {
  cursor: pointer;
}

.fg-map-node-dot {
  fill: var(--node-color, #7ce87c);
}

/* Pulse animation — offset per node */
.fg-map-pulse {
  transform-origin: center;
  animation: fgMapPulse 2s ease-in-out infinite;
}

@keyframes fgMapPulse {
  0%   { opacity: 0.7; }
  50%  { opacity: 0.15; }
  100% { opacity: 0.7; }
}

/* Stagger pulse timing */
.fg-map-node:nth-child(2)  .fg-map-pulse { animation-delay: 0.2s; }
.fg-map-node:nth-child(3)  .fg-map-pulse { animation-delay: 0.5s; }
.fg-map-node:nth-child(4)  .fg-map-pulse { animation-delay: 0.1s; }
.fg-map-node:nth-child(5)  .fg-map-pulse { animation-delay: 0.7s; }
.fg-map-node:nth-child(6)  .fg-map-pulse { animation-delay: 0.3s; }
.fg-map-node:nth-child(7)  .fg-map-pulse { animation-delay: 0.9s; }
.fg-map-node:nth-child(8)  .fg-map-pulse { animation-delay: 0.4s; }
.fg-map-node:nth-child(9)  .fg-map-pulse { animation-delay: 0.6s; }
.fg-map-node:nth-child(10) .fg-map-pulse { animation-delay: 0.15s; }

/* Base node (São Paulo) — stronger */
.fg-map-node.base .fg-map-pulse {
  animation-duration: 1.4s;
  animation-name: fgMapPulseStrong;
}
@keyframes fgMapPulseStrong {
  0%   { opacity: 1; }
  50%  { opacity: 0.25; }
  100% { opacity: 1; }
}

/* Tooltip */
.fg-map-tip {
  position: absolute;
  pointer-events: none;
  background: rgba(10, 14, 26, 0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--mono, 'Geist Mono', monospace);
  font-size: 12px;
  color: var(--fg, #e6e8ec);
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.fg-map-tip.visible {
  opacity: 1;
  transform: translateY(0);
}
.fg-map-tip .tip-tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted, #8a8f99);
  margin-bottom: 2px;
}
.fg-map-tip .tip-city {
  font-weight: 600;
  font-size: 13px;
  color: var(--fg, #fff);
}
.fg-map-tip .tip-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
}
.fg-map-tip .tip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.fg-map-tip .tip-dot.live {
  background: #7ce87c;
  box-shadow: 0 0 6px #7ce87c;
}
.fg-map-tip .tip-dot.soon {
  background: #6b7280;
}

/* Stats ribbon below map */
.fg-map-stats {
  display: flex;
  gap: 1px;
  margin-top: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.fg-map-stat {
  flex: 1;
  background: var(--bg, #0a0e1a);
  padding: 20px 16px;
  text-align: center;
  font-family: var(--mono, 'Geist Mono', monospace);
}
.fg-map-stat .stat-num {
  font-size: 28px;
  font-weight: 600;
  color: var(--accent, #a78bfa);
  letter-spacing: -0.02em;
}
.fg-map-stat .stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted, #8a8f99);
  margin-top: 4px;
}

@media (max-width: 768px) {
  .fg-map-wrap { min-height: 200px; max-height: 340px; }
  .fg-map-stat { padding: 14px 8px; }
  .fg-map-stat .stat-num { font-size: 22px; }
}
