#explore-globe {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #02060f;
  color: #eef5fa;
}
#explore-globe[hidden], .globe-feedback[hidden] { display: none !important; }
#explore-globe.is-globe-preparing { visibility: hidden; pointer-events: none; }
.map-workspace[data-map-view="globe"] #explore-map { visibility: hidden; pointer-events: none; }
.globe-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.globe-canvas.is-pointing { cursor: pointer; }
.globe-canvas.is-dragging { cursor: grabbing; }
#explore-globe canvas:focus-visible { outline: 3px solid #8ed7f6; outline-offset: -4px; }

/* Camera buttons: a column at the top right, where the flat map has its zoom buttons. */
.globe-tools {
  position: absolute;
  z-index: 2;
  right: calc(var(--updates-width, 280px) + var(--explore-control-gap, 12px));
  top: calc(var(--explore-tab-rise, 0px) + var(--explore-control-gap, 12px));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.updates-collapsed .globe-tools { right: 48px; }
.globe-tools button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #ffffff2e;
  border-radius: 8px;
  background: #0d1f30d9;
  color: #eaf4fb;
  box-shadow: 0 2px 10px #00000040;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.globe-tools button:nth-child(1) { border-radius: 8px 8px 2px 2px; }
.globe-tools button:nth-child(2) { margin-top: -5px; border-radius: 2px 2px 8px 8px; }
.globe-tools button:hover { background: #1d3a54; }
.globe-tools button:disabled { opacity: .45; cursor: not-allowed; }
.globe-tools button[aria-pressed="true"] { border-color: #8ed7f6; color: #8ed7f6; }
.globe-tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.globe-spin svg path { fill: currentColor; stroke-width: 1.5; }
.globe-compass svg { transition: transform .12s linear; }
.globe-compass .globe-needle-north { fill: #ff7a6b; stroke: none; }
.globe-compass .globe-needle-south { fill: #eaf4fb; stroke: none; opacity: .8; }
.globe-compass.is-turned { border-color: #8ed7f6; }
.globe-tools button:focus-visible, .globe-feedback button:focus-visible, .globe-credit a:focus-visible { outline: 3px solid #99dcfa; outline-offset: 2px; }

.globe-credit {
  position: absolute;
  z-index: 1;
  right: calc(var(--updates-width, 280px) + 12px);
  bottom: 8px;
  max-width: calc(100% - var(--updates-width, 280px) - 150px);
  overflow: hidden;
  padding: 1px 6px;
  border-radius: 3px;
  background: #0b1824b3;
  color: #dbe8f2;
  font: 9.5px/1.6 "Fira Sans", Arial, Helvetica, sans-serif;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.globe-credit a { color: #bfe6ff; text-decoration: underline; text-underline-offset: 2px; }
.updates-collapsed .globe-credit { right: 48px; max-width: calc(100% - 200px); }

/* Scale, bottom left like the flat map's. */
.globe-scale {
  position: absolute;
  z-index: 1;
  left: 12px;
  bottom: 12px;
  height: 18px;
  padding: 0 5px;
  border: 1.5px solid #e6f1f8;
  border-top: 0;
  color: #f2f8fc;
  font: 11px/16px "Fira Sans", Arial, Helvetica, sans-serif;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
  white-space: nowrap;
  pointer-events: none;
}
.globe-scale[hidden] { display: none; }

.globe-busy {
  position: absolute;
  z-index: 1;
  left: 12px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 14px;
  background: #0b1824cc;
  color: #e6f1f8;
  font: 12px/1.4 "Fira Sans", Arial, Helvetica, sans-serif;
  pointer-events: none;
}
.globe-busy[hidden] { display: none; }
.globe-busy .finding-spinner { border-color: #ffffff40; border-top-color: #8ed7f6; }

/* Gauge tooltip and the clicked channel's label, placed over the canvas. */
.globe-tip, .globe-channel-label {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  pointer-events: none;
  font: 12px/1.45 "Fira Sans", Arial, Helvetica, sans-serif;
}
.globe-tip {
  max-width: 260px;
  padding: 6px 9px;
  border-radius: 5px;
  background: #fff;
  color: #17354e;
  box-shadow: 0 3px 14px #00000059;
}
.globe-tip strong { color: #0f2c4d; }
.globe-channel-label {
  padding: 2px 7px;
  border-radius: 4px;
  background: #fff;
  color: #0f2c4d;
  font-weight: 600;
  box-shadow: 0 2px 8px #0000004d;
  white-space: nowrap;
}
.globe-tip[hidden], .globe-channel-label[hidden] { display: none; }

.globe-feedback {
  position: absolute;
  z-index: 1001;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  width: min(380px, calc(100% - 32px));
  padding: 14px 16px;
  border: 1px solid #b8cbdc;
  border-radius: 6px;
  background: #f5f9fe;
  color: #17354e;
  box-shadow: 0 4px 18px #102d4426;
  font: 13px/1.5 "Fira Sans", Arial, Helvetica, sans-serif;
}
.globe-feedback p { margin: 0; font-size: 13px; line-height: 1.5; color: #17354e; }
.globe-feedback button {
  min-height: 34px;
  margin: 10px 8px 0 0;
  padding: 6px 12px;
  border: 1px solid #294b73;
  border-radius: 4px;
  background: #294b73;
  color: #fff;
  font: 600 12px/1.25 "Fira Sans", Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.globe-feedback button[hidden] { display: none; }
.globe-feedback .globe-feedback-close { background: transparent; color: #294b73; }

/* The Details pane is see-through over the flat map; over the globe's dark space it gets the same light-to-navy
   gradient as a solid fill, so its dark text and the white legend both stay readable. */
.is-globe-view.explore-page .updates-pane {
  background: linear-gradient(to top, var(--footer-end) 0px, var(--footer-end) 10px, #9fb4c9 45%, #e3ecf4 80%, #eef4f9 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.is-globe-view.explore-page .updates-pane::before { display: none; }

@media (max-width: 1099px) {
  .globe-tools, .updates-collapsed .globe-tools { right: 6px; top: 60px; }
  .globe-tools button { width: 44px; height: 44px; border-radius: 10px; }
  .globe-credit, .updates-collapsed .globe-credit { right: 6px; max-width: calc(100% - 120px); }
}
@media (max-width: 759px) {
  .globe-tools, .updates-collapsed .globe-tools { top: calc(var(--explore-tab-rise, 0px) + 60px); }
  .globe-credit, .updates-collapsed .globe-credit { bottom: calc(var(--tools-peek, 0px) + 4px); max-width: calc(100% - 12px); font-size: 10px; }
  .globe-scale { bottom: calc(var(--tools-peek, 0px) + 30px); }
  .globe-busy { bottom: calc(var(--tools-peek, 0px) + 56px); }
  .globe-feedback { bottom: calc(var(--tools-peek, 0px) + 56px); }
}