/* =====================================================================
   hud.css — All heads-up display elements: corners, top bar, right
   panel, compass, reticle, id-card, auto-drift pill,
   mobile FAB navigation buttons.
   ===================================================================== */

/* ---------- HUD container ---------- */
#hud {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

#hud > * {
  pointer-events: auto;
}

/* ---------- Corner ticks ---------- */
.corner {
  position: fixed;
  width: 22px;
  height: 22px;
  border-color: var(--stroke-hot);
  opacity: 0.7;
}
.corner.tl { top: calc(14px + var(--safe-t)); left: 14px;  border-top: 1px solid; border-left: 1px solid; }
.corner.tr { top: calc(14px + var(--safe-t)); right: 14px; border-top: 1px solid; border-right: 1px solid; }
.corner.bl { bottom: calc(14px + var(--safe-b)); left: 14px;  border-bottom: 1px solid; border-left: 1px solid; }
.corner.br { bottom: calc(14px + var(--safe-b)); right: 14px; border-bottom: 1px solid; border-right: 1px solid; }

/* ---------- Top HUD bar ---------- */
.hud-top {
  position: fixed;
  top: calc(18px + var(--safe-t));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--panel);
  backdrop-filter: blur(14px);
  border: 1px solid var(--stroke);
  padding: 8px 14px;
}

.hud-top .dot {
  width: 5px;
  height: 5px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan);
  animation: pulse 2s infinite;
}

/* ---------- Right HUD stats ---------- */
.hud-right {
  position: fixed;
  top: calc(18px + var(--safe-t));
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.hud-right .big {
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
}

@media (max-width: 720px) { .hud-right { display: none; } }

@media (max-width: 720px) {
  .hud-top {
    width: 80%;
    left: 50%;
    margin-left:auto;
    margin-right: auto;
 
  }
}

/* ---------- Bottom compass timeline ---------- */
.compass {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 20px);
  transform: translateX(-50%);
  width: min(560px, 88vw);
  height: 64px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--ink-dim);
  user-select: none;
}

.compass .bar {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stroke) 15%, var(--stroke) 85%, transparent);
}

.compass .node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border: 1px solid var(--stroke-hot);
  background: var(--void);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.compass .node:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.compass .node.active {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
  width: 14px;
  height: 14px;
}

/* Station node — gold accent */
.compass .node.station {
  border-color: oklch(0.86 0.18 82);
}
.compass .node.station.active {
  background: oklch(0.86 0.18 82);
  border-color: oklch(0.86 0.18 82);
  box-shadow: 0 0 18px oklch(0.86 0.18 82);
}

.compass .label {
  position: absolute;
  top: calc(50% + 12px);
  transform: translateX(-50%);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  font-size: 9px;
  transition: color 0.3s;
}

.compass .label--above {
  top: auto;
  bottom: calc(50% + 12px);
}

/* ---------- Targeting reticle ---------- */
#reticle {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 64px;
  height: 64px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

#reticle.on {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1);
}

#reticle svg {
  width: 100%;
  height: 100%;
}

#reticle .label {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}

@media (max-width: 720px) {
  #reticle { width: 52px; height: 52px; }
  #reticle .label { display: none; }
}

/* ---------- Identity card (bottom-left) ---------- */
.id-card {
  position: fixed;
  left: 24px;
  bottom: calc(90px + var(--safe-b));
  z-index: 4;
  max-width: 220px;
  border-left: 1px solid var(--stroke-hot);
  padding: 6px 0 6px 12px;
}

.id-card .nm { font-size: 14px; font-weight: 500; }
.id-card .rl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}

@media (max-width: 720px) { .id-card { display: none; } }




/* ---------- Auto-drift toggle pill ---------- */
.pill {
  position: fixed;
  left: 24px;
  top: calc(80px + var(--safe-t));
  z-index: 4;
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--panel);
  backdrop-filter: blur(14px);
  border: 1px solid var(--stroke);
  padding: 8px 12px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.pill .tog {
  width: 22px;
  height: 10px;
  border: 1px solid var(--stroke);
  position: relative;
}

.pill .tog::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 6px;
  height: 6px;
  background: var(--ink-dim);
  transition: all 0.2s;
}

.pill.on { color: var(--cyan); border-color: var(--stroke-hot); }
.pill.on .tog { border-color: var(--cyan); }
.pill.on .tog::after { left: 13px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

@media (max-width: 720px) {
  .pill {
    top: auto;
    bottom: calc(90px + var(--safe-b));
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------- Hints overlay ---------- */
#hints {
  position: fixed;
  left: 50%;
  bottom: calc(120px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--panel);
  backdrop-filter: blur(12px);
  border: 1px solid var(--stroke);
  padding: 10px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: opacity 1s ease;
}

#hints.gone {
  opacity: 0;
  pointer-events: none;
}

#hints .kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--stroke);
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: 0.1em;
}

/* ---------- Mobile FAB prev/next ---------- */
.fab {
  position: fixed;
  bottom: calc(78px + var(--safe-b));
  width: 48px;
  height: 48px;
  border: 1px solid var(--stroke-hot);
  background: var(--panel);
  backdrop-filter: blur(12px);
  display: none;
  place-items: center;
  cursor: pointer;
  z-index: 7;
  color: var(--ink);
}

.fab.prev { left: 16px; }
.fab.next { right: 16px; }
.fab svg  { width: 18px; height: 18px; }

@media (max-width: 720px) { .fab { display: grid; } }

@media (max-width: 720px) { .compass .label-year { display: none; } }