/* Overclocked — HUD globe (js/hud/globe.js). Class prefix: gl-
 * #hud-globe (.hud-globe, from base.css) is absolutely positioned over #hud-chart with
 * pointer-events:none; hover is handled by listening on #hud-chart, so it stays that way. */

/* sit above the chart's own layers while visible; the chart's date pill may use z-index > 2 */
.hud-chart > .hud-globe { z-index: 2; }

.gl-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;               /* driven per frame by globe.js (fade in/out) */
  pointer-events: none;
}

/* bottom strip: centre coordinates (left) + legend (right) */
.gl-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
  font-family: var(--mono); font-size: 10px; line-height: 1; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  pointer-events: none;
  opacity: 0; transform: translateY(3px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.hud-globe.gl-on .gl-foot { opacity: 1; transform: none; transition-delay: .18s; }

.gl-coord,
.gl-legend {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-radius: 4px;
  padding: 3px 6px;
  white-space: nowrap;
}
.gl-coord { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
/* tiny crosshair glyph */
.gl-coord::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  border: 1.2px solid var(--ink-2);
  background: radial-gradient(circle, var(--ink-2) 0 1.1px, transparent 1.4px);
}
.gl-legend { display: inline-flex; align-items: center; gap: 9px; }
.gl-foot.gl-empty .gl-legend { visibility: hidden; }
.gl-count { color: var(--ink); font-weight: 700; }
.gl-key { display: inline-flex; align-items: center; gap: 4px; }
.gl-key i {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.gl-key--cn i { background: var(--ink); }
.gl-key--zone i { border-radius: 1px; background: transparent; border: 1.3px solid var(--ink); width: 7px; height: 7px; }

/* narrower HUD (≤1100px): keep the strip compact */
@media (max-width: 1100px) {
  .gl-legend { gap: 7px; }
  .gl-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gl-foot { transform: none; }
}