/* Canvas chart replaces the naval compass and remains available while walking. */
.world-minimap { position: absolute; right: calc(30px + var(--safe-r)); top: calc(28px + var(--safe-t)); width: 126px; height: 126px; padding: 0; appearance: none; border: 3px solid #13282d; border-radius: 50%; background: #123f5d; box-shadow: 0 0 0 2px #b7b596, inset 0 0 0 1px #cdd5ac50, 0 3px 8px #0006; pointer-events: auto; cursor: pointer; color: #e3e1c9; }
.world-minimap canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.minimap-cardinals { position: absolute; inset: 0; pointer-events: none; }
.minimap-cardinals > span { position: absolute; transform: translate(-50%, -50%); font: italic 900 12px/1 'Arial Narrow', system-ui, sans-serif; text-shadow: 1px 1px 2px #071b24, -1px -1px 2px #071b24; }
.minimap-caption { position: absolute; left: -26px; right: -26px; top: calc(100% + 11px); font: 800 11px/1.1 'Arial Narrow', system-ui, sans-serif; text-shadow: 1px 2px 0 #071f28; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.world-minimap:focus-visible { outline: 2px solid #b5fff5; outline-offset: 6px; }
#hud .hud-top-right { right: calc(190px + var(--safe-r)); }
.live-navigation.is-reference .ln-touch-compass { display: none !important; }
.world-minimap.is-touch { width: 84px; height: 84px; right: calc(18px + var(--safe-r)); top: calc(12px + var(--safe-t)); }
.world-minimap.is-touch .minimap-cardinals > span { font-size: 10px; }
.world-minimap.is-touch .minimap-caption { font-size: 9px; top: calc(100% + 10px); left: -16px; right: -16px; }
body:has(.world-minimap.is-touch) #hud .hud-top-right { right: calc(120px + var(--safe-r)); }
/* Match the walking HUD's reserved map column, independently of input mode. */
@container stage (max-width: 720px) and (min-height: 481px) {
  body:not(.is-naval):has(.world-minimap) #hud .hud-top-right { right: calc(10px + var(--safe-r)); }
  body:not(.is-naval) .world-minimap {
    width: 84px; height: 84px; right: calc(18px + var(--safe-r)); top: calc(12px + var(--safe-t));
  }
  body:not(.is-naval) .world-minimap .minimap-caption {
    font-size: 10px; top: calc(100% + 10px); left: -12px; right: -12px;
  }
}
/* Leave the map caption clear above objectives; short stages use HUD's folded left column. */
@container stage (min-height: 481px) {
  #hud:has(.world-minimap.is-desktop) { --tracker-map-top: 194px; --tracker-bar-space: 90px; }
  #hud:has(.world-minimap.is-touch) { --tracker-map-top: 140px; --tracker-bar-space: 0px; }
  #ui:has(.personal-lantern:not([hidden])) #hud { --tracker-lantern-space: 204px; }
  #hud:has(.world-minimap) .tracker {
    top: calc(var(--tracker-map-top) + var(--safe-t));
    max-height: min(
      calc((100cqh - var(--tracker-map-top) - 16px - var(--safe-t) - var(--safe-b)) / var(--ui-scale) - var(--tracker-bar-space)),
      calc((100cqh - var(--tracker-map-top) - var(--tracker-lantern-space, 0px) - var(--safe-t) - var(--safe-b)) / var(--ui-scale))
    );
    overflow: auto; pointer-events: auto;
  }
}
.mapv-legend { flex-wrap: wrap; gap: 7px 14px; }
.mapv-legend .ship::before { background: #bd9671; }
.mapv-labels span { max-width: 38%; overflow: hidden; text-overflow: ellipsis; }
.mapv { width: min(680px, calc(100cqh - 90px), 100%); }
.mapv-head { gap: 8px; }
.mapv-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapv-head [data-close] { flex: none; }
#mapview { z-index: 29; }
body:has(#mapview:not([hidden])) .naval-touch { visibility: hidden; }
@container stage (max-height: 500px) { .mapv-labels span { font-size: 10px; } .mapv-legend { font-size: 10px; gap: 5px 9px; } }