.render-map__footer {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  padding:
    .5rem
    max(.8rem, env(safe-area-inset-right, 0px))
    max(.75rem, env(safe-area-inset-bottom, 0px))
    max(.8rem, env(safe-area-inset-left, 0px));
  border: 0;
  background: transparent;
  pointer-events: none;
}

/* Target context floats at the edge of the instrument. It is deliberately a
   small HUD capsule, not a second card underneath the map. */
.render-map__selection {
  width: max-content;
  max-width: min(24rem, calc(100vw - 1.6rem));
  min-height: 2.8rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .34rem .34rem .34rem .8rem;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 80%);
  border-radius: 999px;
  background: rgba(3,6,18,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022), 0 .55rem 1.8rem rgba(0,0,0,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}

.render-map__selection > div {
  min-width: 0;
  display: grid;
  gap: .08rem;
}

.render-map__selection strong {
  overflow: hidden;
  color: rgba(238,242,255,.86);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .64rem;
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.render-map__selection > div > span:last-child {
  color: color-mix(in srgb, var(--muted), transparent 18%);
  font-size: .57rem;
  line-height: 1.1;
}

.render-map__selection--empty {
  min-height: 2.35rem;
  justify-content: center;
  padding-inline: .8rem;
  color: color-mix(in srgb, var(--muted), transparent 26%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .52rem;
  letter-spacing: .12em;
}

.render-map__travel {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 42%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent), rgba(4,7,20,.9) 89%);
  color: color-mix(in srgb, var(--text), white 4%);
  font: 600 1rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, opacity 150ms ease;
}

.render-map__travel:hover:not(:disabled),
.render-map__travel:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent), transparent 14%);
  background: color-mix(in srgb, var(--accent), rgba(5,8,24,.96) 80%);
  transform: translateY(-1px) scale(1.035);
}

.render-map__travel:active:not(:disabled) {
  transform: scale(.94);
}

.render-map__travel:disabled {
  opacity: .48;
  cursor: progress;
}

.render-map__arrival {
  padding: .38rem .48rem;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 78%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent), transparent 95%);
}

.renderer-surface--wasm:fullscreen .render-hud,
.renderer-surface--wasm[data-expanded="true"] .render-hud {
  top: calc(max(var(--nav-inset), env(safe-area-inset-top, 0px)) + var(--nav-control-size) + var(--nav-gap));
  right: max(var(--nav-inset), env(safe-area-inset-right, 0px));
}

@media (min-width: 40.001rem) {
  .render-navigation {
    --nav-inset: .85rem;
    --nav-gap: .5rem;
  }

  .render-hud {
    width: clamp(8rem, 13vw, 10rem);
  }

  .render-map-panel {
    right: 0;
    left: auto;
    width: 50vw;
    border-left: 1px solid color-mix(in srgb, var(--accent), transparent 91%);
  }

  .render-map__metric {
    width: min(calc(50vw - 1rem), calc(100dvh - 5.5rem));
  }

  .render-map__selection {
    max-width: min(22rem, calc(50vw - 1.6rem));
  }
}

@media (pointer: coarse) {
  .render-navigation {
    --nav-control-size: 2.75rem;
  }

  .render-map__icon,
  .render-map__travel {
    min-height: 2.75rem;
  }

  /* Visible bodies remain small like an instrument. A non-scaling transparent
     stroke is the actual finger target, so every System is at least 44 CSS px
     without distorting the spatial metric. */
  .render-map__marker-hit {
    r: .01px;
    fill: none;
    stroke: transparent;
    stroke-width: 44px;
    vector-effect: non-scaling-stroke;
    pointer-events: stroke;
  }
}

@media (max-height: 31rem) {
  .render-navigation {
    --nav-inset: .5rem;
    --nav-gap: .3rem;
  }

  .render-hud {
    width: clamp(6.8rem, 25vw, 8rem);
  }

  .render-map__body {
    padding-top: max(3.1rem, calc(env(safe-area-inset-top, 0px) + 2.6rem));
    padding-bottom: max(4.3rem, calc(env(safe-area-inset-bottom, 0px) + 3.8rem));
  }

  .render-map__metric {
    width: min(calc(100vw - .7rem), calc(100dvh - 4.9rem));
  }

  .render-map__selection {
    min-height: 2.55rem;
  }
}

@media (min-width: 40.001rem) and (max-height: 31rem) {
  .render-map__metric {
    width: min(calc(50vw - .8rem), calc(100dvh - 4.9rem));
  }
}

@media (hover: none) {
  .render-hud:hover:not(:focus-visible) {
    border-color: var(--nav-border);
    transform: none;
  }

  .render-map__system-marker:hover .render-map__marker-aura {
    fill: color-mix(in srgb, var(--accent), transparent 95%);
    stroke: color-mix(in srgb, var(--accent), transparent 88%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .render-hud,
  .render-map-panel,
  .render-map__icon,
  .render-map__travel,
  .render-map__marker-aura,
  .render-map__system-ring,
  .render-map__system-core {
    transition: none;
  }

  .render-hud::after,
  .render-hud__contact--current,
  .render-map__scan,
  .render-map__current-orbit,
  .render-map__selected-orbit,
  .render-map__pin-beacon,
  .render-map__portal-lens,
  .render-map__star-aura {
    animation: none;
  }

  .render-hud,
  .render-map-panel,
  .render-map__selection,
  .render-map__icon {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@keyframes nav-scan-compact {
  from { transform: translateY(-52%) rotate(8deg); }
  to { transform: translateY(52%) rotate(8deg); }
}

@keyframes nav-instrument-glint {
  0%, 16% { transform: translateX(-260%) skewX(-9deg); opacity: 0; }
  24% { opacity: .28; }
  48% { opacity: .38; }
  68%, 100% { transform: translateX(170%) skewX(-9deg); opacity: 0; }
}

@keyframes nav-orbit {
  to { transform: rotate(1turn); }
}

@keyframes nav-selected-breathe {
  0%, 100% { opacity: .52; transform: scale(.97); }
  50% { opacity: 1; transform: scale(1.055); }
}

@keyframes nav-pin-pulse {
  0%, 100% { opacity: .38; transform: scale(.82); }
  50% { opacity: .9; transform: scale(1.12); }
}

@keyframes nav-current-pulse {
  0%, 100% { opacity: .7; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes nav-star-breathe {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.07); }
}