/* --------------------------------------------------------------------------
   UGA EXTERIOR PRESENTATION

   The simulation HUD deliberately keeps its existing semantic controls. This
   final visual layer reduces the test-room chrome around them, gives the live
   scene a clear focal point, and collapses secondary telemetry on small
   screens. First-entry commissioning is cinematic: navigation remains alive
   behind KEEL, but unrelated contact and helm panels step out until the player
   has chosen Training or faction commissioning.
   -------------------------------------------------------------------------- */

:root {
  --uga-glass: rgba(3, 13, 22, .76);
  --uga-glass-strong: rgba(3, 13, 22, .9);
  --uga-edge: rgba(112, 216, 245, .22);
  --uga-radius: 14px;
}

.mf-ident,
.location-crumb,
.expedition-resources,
.top-actions,
.target-console,
.helm-dock {
  clip-path: none;
  border: 1px solid var(--uga-edge);
  border-radius: var(--uga-radius);
  background: linear-gradient(145deg, rgba(7, 24, 36, .9), var(--uga-glass));
  box-shadow: inset 0 1px rgba(218, 247, 255, .055), 0 14px 38px rgba(0, 0, 0, .28);
  backdrop-filter: blur(20px) saturate(125%);
}

.exploration-topbar { gap: 10px; }
.mf-ident { padding-inline: 14px 18px; }
.mf-mark { border-radius: 9px; }
.location-crumb strong { letter-spacing: .16em; }
.top-actions { overflow: hidden; padding: 4px; }
.icon-action:first-child { border-left: 0; }

.target-console {
  border-right-color: rgba(83, 220, 255, .58);
  padding: 16px;
  transition: opacity .3s ease, transform .3s ease;
}
.target-console h2 { letter-spacing: .035em; }
.target-actions { gap: 7px; }
.target-actions button,
.autopilot-actions button {
  border-radius: 9px;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}
.target-actions button:active,
.autopilot-actions button:active { transform: scale(.975); }
.target-actions button.primary {
  background: linear-gradient(135deg, rgba(7, 120, 153, .88), rgba(4, 52, 70, .92));
  box-shadow: inset 0 1px rgba(205, 248, 255, .12);
}

.helm-dock {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(7, 23, 34, .88), rgba(2, 10, 17, .92));
  transition: opacity .3s ease, transform .3s ease;
}
.helm-readout > span:first-child { border-left: 0; }

.test-reset[hidden],
.space-experience[data-runtime="massfront"] .test-reset { display: none !important; }

/* The opening is a story beat, not a dashboard. The system keeps rendering so
   the player still begins in real space, while nonessential controls yield to
   KEEL's UGA commissioning transmission. */
.space-experience:has(.story-rail[data-transmission-id^="first-entry"]) .target-console,
.space-experience:has(.story-rail[data-transmission-id^="first-entry"]) .helm-dock,
.space-experience:has(.story-rail[data-transmission-id^="first-entry"]) .space-callouts {
  opacity: 0;
  pointer-events: none;
}
.space-experience:has(.story-rail[data-transmission-id^="first-entry"]) .target-console { transform: translateY(20px); }
.space-experience:has(.story-rail[data-transmission-id^="first-entry"]) .helm-dock { transform: translate(-50%, 20px); }

@media (max-width: 640px), (orientation: portrait) and (max-width: 900px) {
  .exploration-topbar {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    grid-template-columns: minmax(132px, 1.08fr) minmax(64px, .62fr) auto;
    align-items: stretch;
    gap: 5px;
    min-height: 50px;
  }
  .mf-ident { min-width: 0; gap: 8px; padding: 5px 8px; border-radius: 11px; }
  .mf-mark { width: 30px; height: 30px; flex-basis: 30px; font-size: 10px; }
  .mf-ident b { overflow: hidden; font-size: 8px; letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap; }
  .mf-ident small { display: none; }
  .location-crumb {
    order: initial;
    grid-column: auto;
    min-width: 0;
    min-height: 48px;
    padding: 4px 6px;
    border-radius: 11px;
  }
  .location-crumb strong { overflow: hidden; font-size: 13px; letter-spacing: .11em; text-overflow: ellipsis; white-space: nowrap; }
  .location-crumb small,
  .location-crumb span { display: none; }
  .top-actions { border-radius: 11px; padding: 2px; }
  .top-actions .icon-action { min-width: 44px; min-height: 44px; padding: 5px; }
  .top-actions .icon-action svg { width: 16px; height: 16px; }

  /* This pins the rail from the top and loads after space_module.css, so it
     wins over the offsets there. The topbar gained a resource row below 1024px,
     and at 68px the rail slid underneath it - the directive title was clipped
     behind FUEL/PROBES. Same variable the module offsets use, so the row height
     is stated once and every rail offset follows it. */
  .story-rail,
  .story-rail.is-transmitting { top: calc(68px + var(--uga-res-row, 0px)); max-height: min(52vh, 455px); }
  .story-transmission-copy { padding: 12px 14px 13px; }
  .story-transmission h2 { font-size: 13px; }
  .story-transmission-copy > p { font-size: 10.5px; line-height: 1.48; }
  .story-transmission-actions { grid-template-columns: 1fr; gap: 7px; padding: 10px; }
  .story-transmission-actions button { min-height: 74px; grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 10px; padding: 9px 11px; border-radius: 9px; }
  .story-action-copy { gap: 4px; }
  .story-action-copy strong { font-size: 9px; }
  .story-action-copy small { font-size: 8px; line-height: 1.35; }
  .story-action-copy em { font-size: 7px; }
  .story-action-number { font-size: 7px; }

  .target-console {
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 55px);
    width: auto;
    padding: 10px;
    border-radius: 13px;
  }
  .target-heading { font-size: 7px; }
  .target-console h2 { margin: 4px 0 8px; font-size: 15px; }
  .target-console > p { display: none; }
  .target-actions { grid-template-columns: 58px 58px 58px minmax(0, 1fr); gap: 5px; }
  .target-actions .primary { grid-column: auto; }
  .target-actions button { min-width: 0; min-height: 44px; padding: 6px; border-radius: 8px; }
  .target-actions button:not(.primary) { flex-direction: column; gap: 2px; }
  .target-actions button:not(.primary) span { display: inline; font-size: 6px; line-height: 1; letter-spacing: .06em; }
  .target-actions button.primary span { font-size: 7px; line-height: 1.25; }

  .helm-dock {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    height: 54px;
    min-height: 54px;
    padding: 4px;
    border-radius: 13px;
  }
  .helm-readout { display: none; }
  .autopilot-actions { height: 100%; grid-template-columns: 1fr 1fr; gap: 5px; }
  .autopilot-actions button { min-height: 44px; border-radius: 8px; }
  .space-experience:has(.story-rail[data-transmission-id^="first-entry"]) .helm-dock { transform: translateY(20px); }
}

@media (max-height: 620px) and (orientation: landscape) and (max-width: 1024px) {
  .exploration-topbar { gap: 6px; }
  .target-console { border-radius: 12px; }
  .helm-dock { border-radius: 12px; }
}