/* ============ GLOBE ============ */
.globe-wrap {
  position: relative;
  height: 620px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border-2);
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(60% 50% at 80% 80%, rgba(139,92,246,.12), transparent 60%),
    #060810;
}
@media (max-width: 720px) { .globe-wrap { height: 460px; } }

.globe-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab; display: block;
}
.globe-canvas.grabbing { cursor: grabbing; }

.globe-legend {
  position: absolute; left: 18px; bottom: 18px; z-index: 5;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(12,17,32,0.7); border: 1px solid var(--border-2);
  backdrop-filter: blur(16px);
  font-family: var(--font-mono); font-size: 11px;
  display: flex; flex-direction: column; gap: 8px;
}
.globe-legend .row { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.globe-legend .swatch { width: 9px; height: 9px; border-radius: 50%; }
.globe-legend .swatch.base    { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.globe-legend .swatch.network { background: var(--violet); box-shadow: 0 0 8px var(--violet); }

.globe-hint {
  position: absolute; right: 18px; bottom: 18px; z-index: 5;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(12,17,32,0.7); border: 1px solid var(--border-2);
  backdrop-filter: blur(16px);
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  letter-spacing: .04em;
}

.globe-tip {
  position: absolute; pointer-events: none; z-index: 6;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(12,17,32,0.92); border: 1px solid var(--border-2);
  backdrop-filter: blur(14px);
  max-width: 280px;
  transform: translate(-50%, -100%) translateY(-14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  animation: tipIn .15s cubic-bezier(.2,.8,.2,1);
}
@keyframes tipIn { from { opacity: 0; transform: translate(-50%, -100%) translateY(-6px); } }
.globe-tip .tip-label {
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.globe-tip .tip-label .swatch { width: 8px; height: 8px; border-radius: 50%; }
.globe-tip .tip-desc {
  font-family: var(--font-sans); font-size: 12px; color: var(--muted);
  margin-top: 6px; line-height: 1.45; text-wrap: pretty;
}
.globe-tip .tip-arrow {
  position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px;
  background: rgba(12,17,32,0.92);
  border-right: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
  transform: translateX(-50%) rotate(45deg);
}

.globe-counter {
  position: absolute; left: 18px; top: 18px; z-index: 5;
  padding: 10px 14px; border-radius: 14px;
  background: rgba(12,17,32,0.7); border: 1px solid var(--border-2);
  backdrop-filter: blur(16px);
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  display: flex; flex-direction: column; gap: 2px;
}
.globe-counter .big {
  font-family: var(--font-sans); font-size: 22px; color: var(--text); font-weight: 600;
  letter-spacing: -.01em;
}