Spaces:
Running
Running
| /* -------------------------------------------------------------------------- | |
| 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 ; } | |
| /* 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; } | |
| } | |