/* Semantic navigation instrument.
 *
 * Compact and expanded states share one canonical 2.5D projection. The compact
 * state is a small spatial instrument, not a miniature web card; expanding it
 * reveals the same world geometry with richer navigation affordances.
 */

.render-navigation {
  --nav-inset: .6rem;
  --nav-control-size: 2.25rem;
  --nav-gap: .4rem;
  --nav-surface: rgba(2, 4, 15, .64);
  --nav-surface-strong: rgba(3, 6, 20, .9);
  --nav-border: color-mix(in srgb, var(--accent), transparent 76%);
  --nav-ink: color-mix(in srgb, var(--accent), white 24%);

  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

/* Compact HUD ------------------------------------------------------------ */
.render-hud {
  position: absolute;
  top: calc(var(--nav-inset) + var(--nav-control-size) + var(--nav-gap));
  right: var(--nav-inset);
  width: clamp(7.35rem, 32vw, 9.1rem);
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--nav-border);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent), transparent 86%), transparent 54%),
    radial-gradient(circle at 50% 50%, rgba(4,7,22,.74), rgba(2,4,15,.58) 72%, rgba(1,2,9,.34));
  box-shadow:
    0 .6rem 2rem rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.015),
    inset 0 0 2.2rem rgba(0,0,0,.26);
  backdrop-filter: blur(10px) saturate(108%);
  -webkit-backdrop-filter: blur(10px) saturate(108%);
  color: var(--accent);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms cubic-bezier(.2,.8,.2,1),
    opacity 160ms ease;
}

.render-hud::before,
.render-hud::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* A sparse bearing rim replaces the old square crosshair/card treatment. */
.render-hud::before {
  inset: 6%;
  border: 1px dotted color-mix(in srgb, var(--text), transparent 88%);
  border-radius: 50%;
  opacity: .58;
}

.render-hud::after {
  top: 13%;
  bottom: 13%;
  left: 50%;
  width: 12%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent), transparent 90%), transparent);
  filter: blur(3px);
  transform: translateX(-225%) skewX(-8deg);
  animation: nav-scan-compact 6.8s ease-in-out infinite;
  opacity: .34;
}

.render-hud:hover,
.render-hud:focus-visible {
  border-color: color-mix(in srgb, var(--accent), transparent 43%);
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent), transparent 82%), transparent 56%),
    rgba(4,7,22,.82);
  box-shadow:
    0 .8rem 2.4rem rgba(0,0,0,.32),
    0 0 1.25rem color-mix(in srgb, var(--accent), transparent 91%),
    inset 0 0 2.2rem rgba(0,0,0,.22);
  transform: translateY(-1px) scale(1.018);
}

.render-hud:active {
  transform: scale(.978);
}

.render-hud:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent), transparent 22%);
  outline-offset: 3px;
}

.render-navigation[data-expanded="true"] .render-hud {
  opacity: 0;
  transform: translateX(.75rem) scale(.92);
  pointer-events: none;
}

.render-hud__scope {
  display: block;
  width: 100%;
  height: 100%;
}

.render-hud__ring,
.render-hud__axis,
.render-map__grid-ring,
.render-map__grid-axis,
.render-map__grid-diagonal,
.render-map__stalk {
  vector-effect: non-scaling-stroke;
  fill: none;
}

.render-hud__ring {
  stroke: color-mix(in srgb, var(--accent), transparent 80%);
  stroke-width: .72;
}

.render-hud__ring--outer {
  stroke: color-mix(in srgb, var(--accent), transparent 57%);
  stroke-width: .92;
}

.render-hud__axis {
  stroke: color-mix(in srgb, var(--accent), transparent 92%);
  stroke-width: .56;
  stroke-dasharray: 1.25 2.7;
}

.render-hud__foot,
.render-map__foot {
  fill: color-mix(in srgb, var(--accent), transparent 57%);
}

.render-hud__contact {
  vector-effect: non-scaling-stroke;
  fill: var(--accent);
  stroke: rgba(2,4,15,.9);
  stroke-width: .66;
  transform-box: fill-box;
  transform-origin: center;
}

.render-hud__contact--system {
  fill: #f4f6ff;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--accent), transparent 44%));
}

.render-hud__contact--portal {
  fill: rgba(2,4,15,.94);
  stroke: color-mix(in srgb, var(--accent), transparent 14%);
  stroke-width: .86;
  stroke-dasharray: 1.05 .85;
}

.render-hud__contact--current {
  stroke: #fff;
  stroke-width: 1.15;
  animation: nav-current-pulse 2.8s ease-in-out infinite;
}

.render-hud__contact--selected:not(.render-hud__contact--current) {
  stroke: var(--accent);
  stroke-width: 1.12;
}

.render-hud__origin {
  fill: rgba(2,4,15,.98);
  stroke: color-mix(in srgb, var(--text), transparent 24%);
  stroke-width: .78;
  vector-effect: non-scaling-stroke;
}

.render-hud__readout {
  position: absolute;
  right: 1.05rem;
  bottom: .7rem;
  left: 1.05rem;
  display: flex;
  justify-content: center;
  gap: .55rem;
  color: color-mix(in srgb, var(--accent), transparent 34%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .43rem;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  pointer-events: none;
}