/* Decorative perspective globe. Its canvas never intercepts navigation or taps. */
.orbit-stage {
  position: relative;
  width: 100%;
  max-width: 650px;
  aspect-ratio: 1.04;
  margin-inline: auto;
  isolation: isolate;
}
.orbit-stage::before,
.orbit-stage::after {
  content: "+";
  position: absolute;
  color: rgba(220, 215, 204, 0.3);
  font: 300 18px/1 monospace;
  pointer-events: none;
}
.orbit-stage::before { left: 8%; top: 14%; }
.orbit-stage::after { right: 8%; bottom: 17%; }
.orbit-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.orbit-label {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid rgba(211, 194, 160, 0.2);
  border-radius: 6px;
  background: rgba(24, 25, 27, 0.83);
  color: #d8d6d0;
  font: 500 12px/1.3 var(--font-primary, sans-serif);
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.orbit-label::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fca311;
  box-shadow: 0 0 11px rgba(252, 163, 17, 0.4);
}
.orbit-label-top { right: 5%; top: 21%; }
.orbit-label-bottom { left: 1%; bottom: 23%; }
.orbit-coordinate {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  color: #8c8c87;
  white-space: nowrap;
  font: 500 9px/1.5 var(--font-primary, sans-serif);
  letter-spacing: 0.25em;
}
@media (max-width: 600px) {
  .orbit-stage { max-width: 470px; }
  .orbit-label { font-size: 10px; padding: 9px 11px; }
  .orbit-label-top { top: 18%; right: 0; }
  .orbit-label-bottom { left: 0; bottom: 21%; }
  .orbit-coordinate { font-size: 8px; }
}