.halo-preview { --hud-trigger-width: 154px; --hud-trigger-height: 48px; }
.halo-preview #navigation-ui.navigation { position: fixed; top: 163px; left: var(--edge, 22px); z-index: 5; color: #e5dfd0; }
.halo-preview #navigation-ui.navigation.is-open { z-index: 18; }
.navigation .navigation-trigger { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: var(--hud-trigger-width, 154px); height: var(--hud-trigger-height, 48px); min-height: var(--hud-trigger-height, 48px); padding: 5px 11px 5px 8px; border: 1px solid rgb(203 201 177 / 24%); border-radius: 4px; background: rgb(20 27 26 / 77%); color: #d7d6bd; text-align: left; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.navigation-trigger svg { flex: 0 0 32px; color: #9cc6bd; overflow: visible; }
.navigation .navigation-needle { transform-origin: 16px 17px; transition: transform 120ms linear; }
.navigation .navigation-north { transform-origin: 16px 2.5px; transition: transform 120ms linear; }
.navigation .navigation-trigger-label { flex: 1; min-width: 0; font-size: 11px; line-height: 1.35; letter-spacing: .2px; white-space: normal; }
.navigation .navigation-shortcut { flex: 0 0 auto; font-family: inherit; font-size: 9px; line-height: 1; color: #b5bdac; opacity: .7; }
.halo-preview:is(.backpack-open, .poi-open, .refuge-storage-open, .clean-view) .navigation-trigger, .navigation.is-open .navigation-trigger { visibility: hidden; opacity: 0; pointer-events: none; }
.navigation .navigation-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgb(4 11 12 / 36%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.navigation .navigation-panel { display: flex; flex-direction: column; width: min(780px, 100%); max-height: calc(100dvh - 36px); overflow: hidden; border: 1px solid rgb(154 200 191 / 32%); border-radius: 6px; background: rgb(16 25 26 / 94%); box-shadow: 0 20px 90px rgb(0 0 0 / 32%); }
.navigation .navigation-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 17px 13px 23px; }
.navigation .navigation-eyebrow { margin: 0 0 7px; color: #9dbab2; font-size: 9px; line-height: 1.2; letter-spacing: 1.6px; text-transform: uppercase; }
.navigation h2 { margin: 0; color: #ede6d4; font: 400 24px/1.15 Georgia, serif; }
.navigation .navigation-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #cddbd0; font-size: 25px; cursor: pointer; }
.navigation .navigation-info { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 23px 13px; color: #c2c5b7; font-size: 10px; line-height: 1.5; }
.navigation .navigation-sector { color: #ccbea0; font-variant-numeric: tabular-nums; }
.navigation .navigation-context { color: #8eaaa4; text-align: right; }
.navigation .navigation-surface { position: relative; min-height: 180px; height: min(470px, 59dvh); flex: 1 1 auto; overflow: hidden; border-top: 1px solid rgb(159 185 173 / 17%); border-bottom: 1px solid rgb(159 185 173 / 17%); background: #091012; }
.navigation .navigation-canvas { display: block; width: 100%; height: 100%; min-height: 180px; padding: 0; touch-action: none; cursor: grab; }
.navigation .navigation-canvas.is-dragging { cursor: grabbing; }
.navigation .navigation-canvas:focus-visible { outline-offset: -3px; }
.navigation .navigation-toolbar { position: absolute; right: 15px; bottom: 15px; display: flex; align-items: center; gap: 8px; }
.navigation .navigation-zoom { display: flex; gap: 1px; border: 1px solid rgb(170 205 195 / 23%); border-radius: 4px; overflow: hidden; background: rgb(9 20 22 / 93%); }
.navigation .navigation-tool, .navigation .navigation-reset { display: grid; place-items: center; height: 44px; min-width: 44px; padding: 0; border: 0; background: rgb(18 31 32 / 91%); color: #c6dfd5; cursor: pointer; }
.navigation .navigation-tool { font: 300 23px/1 sans-serif; }
.navigation .navigation-reset { min-width: 96px; padding: 0 14px; border: 1px solid rgb(170 205 195 / 23%); border-radius: 4px; font-size: 10px; }
.navigation .navigation-footer { flex: 0 0 auto; padding: 14px 23px 15px; }
.navigation .navigation-legend { display: flex; flex-wrap: wrap; gap: 11px 23px; margin: 0; padding: 0; list-style: none; color: #c4ccbf; font-size: 10px; }
.navigation .navigation-legend li { display: flex; align-items: center; gap: 7px; }
.navigation .navigation-symbol { display: inline-block; width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid #749a91; border-radius: 1px; }
.navigation .navigation-symbol-player { border: 0; background: #b5e8dc; clip-path: polygon(50% 0, 100% 100%, 50% 77%, 0 100%); }
.navigation .navigation-symbol-refuge { display: grid; place-items: center; width: 12px; height: 12px; flex-basis: 12px; border: 0; color: #dec68e; }
.navigation .navigation-symbol-known { border-color: #637575; background: #354747; }
.navigation .navigation-symbol-unknown { border-color: #333f40; background: #0a1214; }
.navigation .navigation-help { margin: 12px 0 0; color: #829992; font-size: 9px; line-height: 1.5; }
.navigation .navigation-teleport { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgb(159 185 173 / 18%); }
.navigation .navigation-teleport-copy { flex: 1 1 180px; min-width: 0; }
.navigation .navigation-teleport-label { margin: 0 0 5px; color: #abd8ca; font-size: 8px; line-height: 1.3; letter-spacing: 1.5px; text-transform: uppercase; }
.navigation .navigation-teleport-hint { margin: 0; color: #a3b7ad; font-size: 10px; line-height: 1.5; }
.navigation .navigation-teleport-actions { display: flex; align-items: center; gap: 6px; }
.navigation .navigation-teleport-confirm, .navigation .navigation-destination-clear { min-height: 40px; border: 1px solid rgb(157 215 195 / 34%); border-radius: 3px; background: rgb(108 167 150 / 10%); color: #c9e9dd; font: inherit; font-size: 10px; cursor: pointer; }
.navigation .navigation-teleport-confirm { padding: 0 15px; }
.navigation .navigation-destination-clear { width: 40px; padding: 0; border-color: transparent; background: transparent; color: #9eb5aa; font-size: 20px; }
.navigation .navigation-teleport-confirm:disabled, .navigation .navigation-destination-clear:disabled, .navigation .navigation-close:disabled { opacity: .42; cursor: default; }
.navigation .navigation-teleport-confirm[aria-busy="true"] { opacity: .8; cursor: progress; }
.navigation .navigation-teleport-status { flex: 0 0 100%; margin: 0; color: #e4c291; font-size: 10px; line-height: 1.5; }
.navigation [hidden] { display: none !important; }
.navigation :is(button, canvas):focus-visible { outline: 2px solid #a4cdc0; outline-offset: 2px; }
.halo-preview :is(.navigation-trigger, .backpack-trigger):focus-visible { outline: 2px solid #a4cdc0; outline-offset: 2px; background: rgb(43 63 60 / 92%); border-color: rgb(170 205 195 / 40%); }
@media (hover: hover) {
  .halo-preview :is(.navigation-trigger, .backpack-trigger):hover,
  .navigation :is(.navigation-close, .navigation-tool, .navigation-reset):hover { background: rgb(43 63 60 / 92%); border-color: rgb(170 205 195 / 40%); }
  .navigation :is(.navigation-teleport-confirm, .navigation-destination-clear):not(:disabled):hover { background: rgb(108 167 150 / 23%); border-color: rgb(170 222 203 / 58%); }
}
@media (max-width: 720px) {
  .halo-preview #navigation-ui.navigation { top: 191px; }
  .navigation .navigation-shortcut { display: none; }
  .navigation .navigation-overlay { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .navigation .navigation-panel { max-height: calc(100dvh - 24px); }
  .navigation .navigation-header { padding: 13px 12px 10px 17px; }
  .navigation h2 { font-size: 22px; }
  .navigation .navigation-info { padding: 0 17px 11px; gap: 8px; font-size: 9px; }
  .navigation .navigation-surface { height: min(470px, 57dvh); }
  .navigation .navigation-toolbar { right: 10px; bottom: 10px; gap: 6px; }
  .navigation .navigation-footer { padding: 13px 17px; }
  .navigation .navigation-legend { gap: 9px 16px; font-size: 9px; }
  .navigation .navigation-teleport { gap: 9px; margin-top: 10px; padding-top: 10px; }
  .navigation .navigation-teleport-copy { flex-basis: 130px; }
  .navigation .navigation-teleport-actions { flex: 1 0 auto; justify-content: flex-end; }
  .navigation .navigation-teleport-confirm, .navigation .navigation-destination-clear { min-height: 44px; }
}
@media (max-height: 560px) {
  .halo-preview #navigation-ui.navigation { top: 129px; }
  .navigation .navigation-header { padding-top: 8px; padding-bottom: 4px; }
  .navigation .navigation-eyebrow { margin-bottom: 3px; }
  .navigation h2 { font-size: 19px; }
  .navigation .navigation-info { padding-bottom: 7px; }
  .navigation .navigation-surface { height: calc(100dvh - 182px); min-height: 120px; }
  .navigation .navigation-canvas { min-height: 120px; }
  .navigation .navigation-footer { padding-top: 9px; padding-bottom: 9px; }
  .navigation .navigation-help { display: none; }
  .navigation .navigation-teleport { margin-top: 8px; padding-top: 8px; }
}
@media (max-height: 560px) and (max-width: 720px) { .halo-preview #navigation-ui.navigation { top: 181px; } }
@media (prefers-reduced-motion: reduce) { .navigation :is(.navigation-needle, .navigation-north) { transition: none; } }