/* AIRSPACE STANDOFF: Flight HUD Holographic Tape with Obsidian Depth */

.radar-flight-hud {
  position: absolute;
  top: 8px;
  left: 16px;
  transform: none;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  z-index: 7;
  pointer-events: none;
  font-family: var(--font-dotdigital);
  width: auto;
  max-width: calc(100% - 110px);
}

html.safe-zone-on .radar-flight-hud,
body.safe-zone-on .radar-flight-hud {
  left: max(16px, var(--safe-left, 0px)) !important;
}

.rfh-panel {
  background: var(--liquid-glass-bg);
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--liquid-glass-border-top);
  border-radius: var(--radius-card);
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  overflow: hidden;
}

.rfh-label {
  font-size: 0.52rem;
  color: var(--color-moon-mist);
  font-weight: 700;
  letter-spacing: 0.6px;
}

.rfh-val-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.rfh-num {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--color-pure-white);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.rfh-arrow {
  font-size: 0.74rem;
  font-weight: 700;
}

.rfh-sub {
  font-size: 0.56rem;
  color: var(--theme-accent);
  font-weight: 700;
  text-shadow: 0 0 6px var(--theme-accent-glow);
}

.rfh-alt,
.rfh-speed {
  min-width: 78px;
  padding: 4px 10px;
}

.rfh-center,
.rfh-details {
  min-width: 215px;
  max-width: 265px;
  padding: 4px 12px;
  border-color: rgba(56, 189, 248, 0.35);
  border-top-color: #ffffff;
}

.rfh-center-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
}

.rfh-cs {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-pure-white);
  letter-spacing: 0.4px;
  text-shadow: 0 0 8px var(--theme-accent-glow);
}

.rfh-model {
  font-size: 0.54rem;
  color: var(--color-moon-mist);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

.rfh-compass-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}

.rfh-cardinal {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--stat-tier-2);
  text-shadow: 0 0 8px rgba(0, 245, 160, 0.5);
}

.rfh-deg {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-pure-white);
}

.rfh-sub-pills {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-left: 2px;
}

.rfh-pill {
  font-size: 0.52rem;
  padding: 1px 6px;
  border-radius: var(--radius-badge);
  background: var(--glass-3d-well-bg);
  border: 1px solid var(--glass-3d-well-border);
  color: var(--theme-accent);
  font-weight: 700;
  box-shadow: var(--glass-3d-well-shadow);
}

.rfh-pill.coffin-turn {
  background: rgba(2, 132, 199, 0.3) !important;
  border: 1px solid var(--theme-accent) !important;
  border-top-color: #ffffff !important;
  color: #bae6fd !important;
  box-shadow: 0 0 8px var(--theme-primary-glow);
}

@media (max-width: 1200px) and (orientation: landscape), (max-height: 600px) and (orientation: landscape) {
  .radar-flight-hud {
    top: 6px !important;
    left: 12px !important;
    gap: 5px !important;
  }
  .rfh-panel {
    padding: 3px 8px !important;
    min-height: 48px !important;
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .radar-flight-hud {
    top: 6px !important;
    left: 8px !important;
    gap: 3px !important;
    max-width: calc(100% - 80px) !important;
  }
  .rfh-panel { padding: 2px 5px !important; }
  .rfh-alt, .rfh-speed { min-width: 60px !important; padding: 2px 4px !important; }
  .rfh-center, .rfh-details { min-width: 120px !important; max-width: 148px !important; padding: 2px 4px !important; }
  .rfh-num { font-size: 0.80rem !important; }
  .rfh-cs { font-size: 0.64rem !important; }
}