Spaces:

CREATORJD
/

massfront-playtest

Running

File size: 78,231 Bytes

:root {
  color-scheme: dark;
  --cyan: #55dfff;
  --cyan-soft: #8ceaff;
  --cyan-deep: #08779b;
  --amber: #ffb44a;
  --amber-deep: #9d5a0b;
  --red: #ff4963;
  --green: #79f3b0;
  --ink: #02070d;
  --panel: rgba(4, 15, 25, .86);
  --panel-strong: rgba(3, 11, 19, .96);
  --line: rgba(107, 208, 238, .28);
  --line-hot: rgba(112, 225, 255, .72);
  --font: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
  --mf-gui-primary: image-set(url("../../assets/runtime/ui/gui-material-v1/1x/menu/primary_frame.png") 1x, url("../../assets/runtime/ui/gui-material-v1/2x/menu/primary_frame.png") 2x);
  --mf-gui-tab: image-set(url("../../assets/runtime/ui/gui-material-v1/1x/menu/tab_frame.png") 1x, url("../../assets/runtime/ui/gui-material-v1/2x/menu/tab_frame.png") 2x);
  --mf-gui-entry: image-set(url("../../assets/runtime/ui/gui-material-v1/1x/menu/entry_frame.png") 1x, url("../../assets/runtime/ui/gui-material-v1/2x/menu/entry_frame.png") 2x);
  --mf-gui-submenu: image-set(url("../../assets/runtime/ui/gui-material-v1/1x/menu/submenu_frame.png") 1x, url("../../assets/runtime/ui/gui-material-v1/2x/menu/submenu_frame.png") 2x);
  --mf-gui-action: image-set(url("../../assets/runtime/ui/gui-material-v1/1x/controls/action_frame.png") 1x, url("../../assets/runtime/ui/gui-material-v1/2x/controls/action_frame.png") 2x);
  --mf-gui-resource: image-set(url("../../assets/runtime/ui/gui-material-v1/1x/hud/resource_rail_frame.png") 1x, url("../../assets/runtime/ui/gui-material-v1/2x/hud/resource_rail_frame.png") 2x);
  --mf-gui-context: image-set(url("../../assets/runtime/ui/gui-material-v1/1x/hud/context_frame.png") 1x, url("../../assets/runtime/ui/gui-material-v1/2x/hud/context_frame.png") 2x);
  --mf-gui-production: image-set(url("../../assets/runtime/ui/gui-material-v1/1x/hud/production_card_frame.png") 1x, url("../../assets/runtime/ui/gui-material-v1/2x/hud/production_card_frame.png") 2x);
  --mf-gui-feed: image-set(url("../../assets/runtime/ui/gui-material-v1/1x/hud/feed_row_frame.png") 1x, url("../../assets/runtime/ui/gui-material-v1/2x/hud/feed_row_frame.png") 2x);
  --mf-gui-feed-container: image-set(url("../../assets/runtime/ui/gui-material-v1/1x/hud/feed_container_frame.png") 1x, url("../../assets/runtime/ui/gui-material-v1/2x/hud/feed_container_frame.png") 2x);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { width: 100%; height: 100%; height: 100dvh; min-height: 100%; min-height: 100dvh; margin: 0; overflow: hidden; background: #010409; }
body { color: #d9f6ff; font-family: var(--font); font-size: 14px; letter-spacing: .035em; }
button { font: inherit; color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
.mf-symbols { position: fixed; width: 0; height: 0; pointer-events: none; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }

.space-experience {
  position: relative; width: 100%; height: 100%; height: 100dvh; min-height: 100%; min-height: 100dvh; overflow: hidden;
  isolation: isolate; background: #01040a;
}
.space-render-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; touch-action: none; }
.space-render-stage > canvas { pointer-events: auto; touch-action: none; }
.space-callouts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cinematic-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 5, 10, .88) 0, transparent 18%, transparent 70%, rgba(0, 3, 7, .8) 100%),
    radial-gradient(ellipse at 50% 44%, transparent 34%, rgba(0, 3, 8, .46) 100%);
}

.exploration-topbar {
  position: absolute; z-index: 20; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top));
  min-height: 76px; display: grid; grid-template-columns: minmax(230px, 1fr) auto auto auto; align-items: stretch; gap: 8px;
}
.mf-ident, .location-crumb, .expedition-resources, .top-actions {
  border: 1px solid var(--line); background: linear-gradient(135deg, rgba(4, 18, 29, .94), rgba(2, 9, 16, .68));
  box-shadow: inset 0 1px rgba(173, 235, 255, .08), 0 12px 35px rgba(0, 0, 0, .24); backdrop-filter: blur(16px);
}
.mf-ident { display: flex; align-items: center; gap: 12px; padding: 10px 16px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.mf-mark {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line-hot); color: var(--cyan);
  font-weight: 900; letter-spacing: -.08em; background: radial-gradient(circle, rgba(80, 222, 255, .18), transparent 68%); transform: rotate(45deg);
}
.mf-mark::first-letter { transform: rotate(-45deg); }
.mf-ident > span:last-child { display: grid; gap: 3px; }
.mf-ident b { font-size: 14px; letter-spacing: .13em; }
.mf-ident small { color: #7292a2; font-size: 9px; letter-spacing: .16em; }
.location-crumb { min-width: 235px; display: grid; place-content: center; padding: 8px 18px; text-align: center; }
.location-crumb small { color: #718e9d; font-size: 9px; }
.location-crumb strong { font-size: 22px; letter-spacing: .22em; color: #ecfbff; line-height: 1.1; }
.location-crumb span { color: var(--green); font-size: 8px; letter-spacing: .13em; }
:root { --uga-res-row: 0px; }
.expedition-resources { display: flex; align-items: stretch; }
.expedition-resources > span { min-width: 72px; display: grid; place-content: center; padding: 8px 12px; border-left: 1px solid rgba(95, 194, 222, .14); }
.expedition-resources small { color: #668899; font-size: 8px; letter-spacing: .14em; }
.expedition-resources b { color: var(--cyan-soft); font-size: 14px; }
.top-actions { display: flex; padding: 5px; }
.icon-action {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 88px; min-height: 44px; padding: 7px 10px; border: 0; border-left: 1px solid rgba(91, 193, 224, .16);
  background: transparent; color: #90afbd; cursor: pointer; font-size: 9px; letter-spacing: .12em;
}
.icon-action:hover, .icon-action:focus-visible { color: white; background: rgba(71, 206, 245, .11); outline: 1px solid var(--line-hot); }
.icon-action.command-action { color: var(--amber); }
.icon-action.compact { min-width: 44px; }

.story-rail {
  position: absolute; z-index: 10; left: max(22px, env(safe-area-inset-left)); top: 118px; width: min(410px, 34vw); padding: 0;
  max-height: calc(100% - 250px); overflow-x: hidden; overflow-y: auto; isolation: isolate; scrollbar-width: thin; scrollbar-color: rgba(78, 209, 242, .4) transparent;
  background: linear-gradient(120deg, rgba(2, 11, 19, .97), rgba(4, 18, 29, .82)); border: 1px solid rgba(83, 196, 226, .28); border-left: 2px solid var(--cyan);
  clip-path: polygon(0 0, calc(100% - 27px) 0, 100% 27px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); box-shadow: 0 24px 60px rgba(0, 0, 0, .42); backdrop-filter: blur(15px);
}
.story-rail::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: 72%; height: 1px; pointer-events: none; background: linear-gradient(90deg, var(--cyan), rgba(75, 216, 250, 0)); box-shadow: 0 0 14px rgba(67, 215, 255, .32); }
.story-rail::after { content: ""; position: absolute; z-index: 2; top: 8px; right: 8px; width: 18px; height: 18px; pointer-events: none; border-top: 1px solid rgba(115, 229, 255, .45); border-right: 1px solid rgba(115, 229, 255, .45); }
.story-rail.is-transmitting { width: min(440px, 36vw); border-color: rgba(239, 182, 72, .28); border-left-color: var(--amber); background: linear-gradient(120deg, rgba(2, 10, 17, .98), rgba(4, 18, 29, .88)); }
.story-rail.is-transmitting::before { background: linear-gradient(90deg, var(--amber), rgba(239, 182, 72, 0)); box-shadow: 0 0 15px rgba(239, 182, 72, .28); }
.story-rail-default { padding: 20px 22px 18px; }
.eyebrow { color: var(--cyan); font-size: 9px; letter-spacing: .2em; font-weight: 800; }
.story-rail h1 { margin: 5px 0 8px; color: #f2fbff; font-size: clamp(21px, 2vw, 30px); font-weight: 560; letter-spacing: .04em; }
.story-rail-default > p { margin: 0; color: #8aa6b4; line-height: 1.55; font-size: 11px; }
.story-steps { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 7px; }
.story-steps li { display: flex; align-items: center; gap: 10px; min-height: 28px; color: #607b88; font-size: 10px; }
.story-steps span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #294958; color: #5e899c; font-size: 8px; }
.story-steps li.active { color: #dffaff; }
.story-steps li.active span { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 14px rgba(71, 217, 255, .2); }
.system-tone { border-top: 1px solid rgba(94, 194, 222, .18); padding-top: 11px; display: grid; grid-template-columns: 8px 1fr; column-gap: 8px; }
.system-tone .pulse { grid-row: 1 / 3; align-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px var(--green); animation: pulse 1.8s infinite; }
.system-tone b { font-size: 8px; letter-spacing: .14em; }.system-tone small { color: #627e8b; font-size: 8px; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }

.story-transmission { display: grid; }
.story-transmission[hidden] { display: none; }
.story-transmission-signal { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 15px; border-bottom: 1px solid rgba(90, 190, 219, .16); background: linear-gradient(90deg, rgba(238, 177, 58, .1), rgba(2, 10, 17, .18)); }
.story-transmission-signal span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.story-transmission-signal i { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 9px rgba(239, 182, 72, .9); animation: pulse 1.8s infinite; }
.story-transmission-signal b { overflow: hidden; color: #eab84f; font-size: 7px; letter-spacing: .18em; text-overflow: ellipsis; white-space: nowrap; }
.story-transmission-signal small { flex: 0 0 auto; color: #557480; font-size: 7px; letter-spacing: .14em; }
.story-transmission-main { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.story-transmission-copy { min-width: 0; padding: 12px 15px 13px; }
.story-transmission-identity { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.story-transmission-identity > span { min-width: 0; display: grid; gap: 2px; }
.story-transmission-identity small { color: #6e98a9; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.story-transmission-identity strong { overflow: hidden; color: #effbff; font-size: 20px; font-weight: 620; letter-spacing: .13em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.story-transmission-identity > b { flex: 0 0 auto; padding: 4px 6px 3px; border: 1px solid rgba(82, 195, 226, .25); color: #75b7c9; font-size: 6px; letter-spacing: .12em; }
.story-transmission h2 { margin: 10px 0 5px; color: #d9f4fb; font-size: 13px; font-weight: 700; letter-spacing: .1em; line-height: 1.25; }
.story-transmission h2[hidden] { display: none; }
.story-transmission-copy > p { margin: 0; color: #91adb8; font-size: 10px; line-height: 1.5; }
.story-transmission-media { align-self: stretch; width: 86px; min-height: 112px; margin: 0; overflow: hidden; border-right: 1px solid rgba(83, 213, 246, .24); background: rgba(2, 9, 15, .8); }
.story-transmission-media[hidden] { display: none; }
.story-transmission-media video, .story-transmission-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.story-transmission-media video[hidden], .story-transmission-media img[hidden] { display: none; }
.story-transmission-progress { height: 3px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 15px; }
.story-transmission-progress[hidden] { display: none; }
.story-transmission-progress i { background: rgba(74, 130, 148, .18); }
.story-transmission-progress i.complete { background: rgba(73, 205, 238, .45); }
.story-transmission-progress i.active { background: var(--amber); box-shadow: 0 0 8px rgba(239, 182, 72, .45); }
.story-transmission-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 9px 10px 10px; border-top: 1px solid rgba(87, 183, 211, .12); background: rgba(1, 7, 12, .42); }
.story-transmission-actions:empty { display: none; }
.story-transmission-actions button {
  min-width: 0; min-height: 76px; display: grid; grid-template-columns: 23px minmax(0, 1fr) 10px; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid rgba(91, 185, 214, .25); background: linear-gradient(135deg, rgba(5, 27, 40, .9), rgba(3, 15, 24, .92)); color: #a8c4cf; cursor: pointer;
  font-family: Inter, "SF Pro Display", system-ui, sans-serif; text-align: left; transition: border-color .18s, background .18s, transform .18s;
}
.story-transmission-actions button.primary { border-color: rgba(76, 221, 255, .55); background: linear-gradient(135deg, rgba(4, 66, 87, .86), rgba(4, 27, 39, .94)); color: #d8f8ff; }
.story-transmission-actions button:hover, .story-transmission-actions button:focus-visible { border-color: var(--cyan); color: #fff; outline: 1px solid rgba(74, 220, 255, .3); transform: translateY(-1px); }
.story-transmission-actions button:disabled { opacity: .48; pointer-events: none; }
.story-action-number { align-self: stretch; display: grid; place-items: center; border-right: 1px solid rgba(95, 187, 212, .18); color: #54d5f4; font: 700 8px/1 Consolas, monospace; }
.story-action-copy { min-width: 0; display: grid; align-content: center; gap: 3px; }
.story-action-copy strong { color: inherit; font-size: 8px; font-weight: 850; letter-spacing: .08em; line-height: 1.25; }
.story-action-copy small { color: #73909c; font-size: 7px; line-height: 1.3; }
.story-action-copy em { color: #d7ac58; font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.story-action-chevron { color: #50d4f3; font-size: 17px; font-weight: 300; }

.target-console {
  position: absolute; z-index: 12; right: max(22px, env(safe-area-inset-right)); bottom: 112px; width: min(470px, 38vw); padding: 17px 18px 14px;
  background: linear-gradient(120deg, rgba(3, 14, 23, .96), rgba(5, 20, 31, .75)); border: 1px solid var(--line); border-right: 2px solid var(--cyan);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px); backdrop-filter: blur(15px);
}
.target-heading { display: flex; justify-content: space-between; color: #688796; font-size: 8px; letter-spacing: .16em; }
.target-heading b { color: var(--cyan); }.target-console h2 { margin: 6px 0 2px; font-size: 20px; font-weight: 580; }.target-console p { margin: 0 0 12px; color: #7895a2; font-size: 10px; }
.target-actions { display: grid; grid-template-columns: .75fr 1fr .85fr 1.7fr; gap: 5px; }
.target-actions button, .wide-action, .operation-sim-actions button, .uga-scene-controls button, .overlay-back {
  min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(91, 185, 214, .28); background: rgba(5, 24, 36, .78); color: #85a7b5; cursor: pointer;
  font-size: 9px; font-weight: 700; letter-spacing: .11em;
}
.target-actions button:hover, .wide-action:hover, .operation-sim-actions button:hover, .uga-scene-controls button:hover, .overlay-back:hover { border-color: var(--cyan); color: white; background: rgba(34, 130, 160, .2); }
.target-actions button.primary, .wide-action { color: var(--cyan-soft); border-color: var(--cyan-deep); background: linear-gradient(110deg, rgba(3, 80, 106, .75), rgba(4, 31, 45, .8)); }
.target-actions button:disabled, .wide-action:disabled { opacity: .32; pointer-events: none; }

.helm-dock {
  position: absolute; z-index: 11; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); height: 76px; min-width: min(590px, 65vw);
  pointer-events: auto;
  display: grid; grid-template-columns: minmax(148px, .75fr) minmax(220px, 1fr) auto; align-items: center; gap: 16px; padding: 8px 18px;
  background: linear-gradient(180deg, rgba(5, 19, 29, .9), rgba(2, 8, 14, .94)); border: 1px solid var(--line); clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px); backdrop-filter: blur(14px);
}
.helm-dock small { color: #55727e; font-size: 7px; letter-spacing: .14em; }.helm-stick-wrap { display: flex; align-items: center; gap: 10px; }
.flight-stick-zone { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #245366; border-radius: 50%; background: radial-gradient(circle, rgba(54, 202, 241, .12), transparent 70%); touch-action: none; }
.stick-knob { width: 17px; height: 17px; border: 1px solid var(--cyan); border-radius: 50%; background: #082b38; box-shadow: 0 0 13px rgba(73, 220, 255, .4); transition: transform .06s linear; }
.helm-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.helm-readout > span { display: grid; padding: 7px 10px; border-left: 1px solid rgba(89, 187, 215, .2); }.helm-readout b { font-size: 11px; color: #c4e9f3; }
.autopilot-ident { min-width: 148px; display: flex; align-items: center; gap: 9px; color: var(--cyan); }
.autopilot-ident svg { width: 28px; height: 28px; }
.autopilot-ident span { display: grid; gap: 3px; }
.autopilot-ident b { color: #d9f7ff; font-size: 10px; letter-spacing: .12em; }
.autopilot-actions { display: flex; gap: 6px; }
.autopilot-actions button { min-width: 112px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(80, 221, 255, .28); background: rgba(6, 30, 43, .84); color: #b8e8f4; cursor: pointer; }
.autopilot-actions button:hover { color: #fff; border-color: var(--cyan); background: rgba(10, 76, 99, .85); }
.autopilot-actions svg { width: 18px; height: 18px; }
.autopilot-actions span { font-size: 8px; font-weight: 800; letter-spacing: .08em; }

.spatial-callout { position: absolute; display: flex; align-items: center; width: 210px; min-height: 38px; pointer-events: auto; cursor: pointer; color: #c7f3ff; filter: drop-shadow(0 7px 14px rgba(0,0,0,.65)); }
.spatial-callout-dot { width: 7px; height: 7px; border: 1px solid var(--cyan); background: #02101a; transform: rotate(45deg); box-shadow: 0 0 8px var(--cyan); }
.spatial-callout-line { width: 29px; height: 1px; background: linear-gradient(90deg, var(--cyan), rgba(76,216,255,.2)); transform: rotate(-14deg); transform-origin: left; }
.spatial-ribbon { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 6px 9px 5px; background: linear-gradient(90deg, rgba(4,28,40,.9), rgba(3,15,24,.78)); border-top: 1px solid rgba(97,219,251,.38); }
.spatial-ribbon b { font-size: 9px; letter-spacing: .1em; }.spatial-ribbon span { color: var(--cyan); font-size: 8px; }
.spatial-callout-sub { position: absolute; left: 42px; top: 30px; color: #678996; font-size: 7px; letter-spacing: .08em; }
.spatial-callout.hazard .spatial-callout-dot { border-color: var(--red); box-shadow: 0 0 8px var(--red); }.spatial-ribbon.hazard { border-color: var(--red); color: #ffd6db; }

.scene-overlay { position: absolute; inset: 0; z-index: 40; display: none; pointer-events: none; }
.scene-overlay.active { display: block; pointer-events: auto; }
.overlay-back { position: absolute; z-index: 5; left: max(22px, env(safe-area-inset-left)); top: max(22px, env(safe-area-inset-top)); padding: 0 16px; }
.survey-overlay {
  /* Planetary Survey is operated from the sealed Survey Lab. The globe is a
     live transparent WebGL instrument over this room, not a planet hanging in
     another generic black-space modal. */
  background:
    radial-gradient(circle at 43% 48%, rgba(3, 18, 28, .16), rgba(1, 7, 12, .88) 78%),
    url('../../assets/runtime/ui/menu-art-v1/uga-survey-lab-v1.webp') center / cover no-repeat !important;
}

/* Mass Effect 2 Scanner HUD */
.me2-scanner-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.me2-scanner-reticle {
  position: absolute;
  left: 45%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.me2-reticle-ring {
  position: absolute;
  inset: 0;
  border: 1.5px dashed rgba(66, 221, 255, .55);
  border-radius: 50%;
  animation: me2ReticleSpin 20s linear infinite;
}

.me2-reticle-crosshair {
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(66, 221, 255, .3);
  border-radius: 50%;
}

.me2-reticle-crosshair::before, .me2-reticle-crosshair::after {
  content: "";
  position: absolute;
  background: var(--cyan);
}

.me2-reticle-crosshair::before {
  left: 50%;
  top: -12px;
  bottom: -12px;
  width: 1px;
  transform: translateX(-50%);
}

.me2-reticle-crosshair::after {
  top: 50%;
  left: -12px;
  right: -12px;
  height: 1px;
  transform: translateY(-50%);
}

.me2-reticle-coords {
  position: absolute;
  bottom: -24px;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--cyan);
  background: rgba(3, 15, 24, .8);
  padding: 2px 6px;
  border: 1px solid rgba(66, 221, 255, .3);
}

.me2-reticle-status {
  position: absolute;
  top: -22px;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 181, 74, .6);
}

@keyframes me2ReticleSpin {
  to { transform: rotate(360deg); }
}

.survey-planet-selector {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: rgba(3, 14, 23, .88);
  border: 1px solid rgba(66, 221, 255, .3);
  padding: 4px 8px;
  border-radius: 4px;
  backdrop-filter: blur(12px);
  z-index: 25;
  pointer-events: auto;
}

.survey-planet-pill {
  min-height: 44px;
  border: 1px solid rgba(66, 221, 255, .2);
  background: rgba(8, 28, 44, .6);
  color: #a7d0e0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 6px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s ease;
}

.survey-planet-pill:hover {
  background: rgba(20, 60, 90, .8);
  color: #fff;
  border-color: var(--cyan);
}

.survey-planet-pill.active {
  background: rgba(66, 221, 255, .22);
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(66, 221, 255, .35);
}

.me2-scanner-side-panel {
  position: absolute;
  left: max(22px, env(safe-area-inset-left));
  top: 80px;
  width: 230px;
  background: rgba(2, 12, 20, .88);
  border: 1px solid rgba(66, 221, 255, .3);
  border-left: 3px solid var(--cyan);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.me2-oscilloscope-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.me2-oscilloscope-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.me2-oscilloscope-header small {
  font-size: 7px;
  color: var(--cyan);
  letter-spacing: .12em;
  font-weight: 800;
}

.me2-oscilloscope-header b {
  font-size: 11px;
  color: var(--green);
}

#surveyOscilloscope {
  width: 100%;
  height: 64px;
  background: #01080e;
  border: 1px solid rgba(66, 221, 255, .2);
  border-radius: 2px;
  display: block;
}

.me2-signal-meter {
  height: 4px;
  background: rgba(4, 20, 30, .8);
  border: 1px solid rgba(66, 221, 255, .2);
  border-radius: 2px;
  overflow: hidden;
}

.me2-signal-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--green), var(--amber));
  box-shadow: 0 0 8px var(--cyan);
  transition: width .15s ease;
}

.me2-mineral-readouts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(66, 221, 255, .15);
  padding-top: 8px;
}

.me2-mineral-row {
  display: grid;
  grid-template-columns: 60px 1fr 50px;
  align-items: center;
  gap: 6px;
  font-size: 8px;
}

.me2-mineral-row small {
  color: #7998a6;
  font-weight: 700;
}

.me2-min-bar {
  height: 4px;
  background: #04121a;
  border-radius: 1px;
  overflow: hidden;
}

.me2-min-bar span {
  display: block;
  height: 100%;
  background: var(--cyan);
}

.me2-mineral-row em {
  font-style: normal;
  color: var(--green);
  text-align: right;
  font-weight: 700;
}
.survey-dossier { position: absolute; right: max(28px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); width: min(430px, 40vw); padding: 26px; border: 1px solid var(--line); border-right: 2px solid var(--cyan); background: var(--panel-strong); backdrop-filter: blur(20px); }
.survey-dossier h2 { margin: 6px 0 8px; font-size: 27px; }.survey-dossier > p { color: #7897a5; font-size: 11px; line-height: 1.55; }
.survey-progress { display: grid; grid-template-columns: 1fr 45px; align-items: center; gap: 12px; margin: 22px 0 13px; }.survey-progress > span { height: 5px; background: #07131a; }.survey-progress i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); transition: width .35s; }.survey-progress b { color: var(--cyan); }
.survey-telemetry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.survey-telemetry span { display: grid; padding: 10px; border: 1px solid rgba(89,185,214,.17); }.survey-telemetry small { color: #597885; font-size: 7px; }.survey-telemetry b { margin-top: 3px; font-size: 13px; }
.discovery-list { min-height: 105px; margin: 14px 0; display: grid; gap: 6px; }.discovery-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 8px; border-left: 2px solid #244855; background: rgba(18,45,58,.35); }.discovery-item.found { border-color: var(--green); }.discovery-item i { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #2b5667; color: var(--cyan); }.discovery-item b { font-size: 10px; }.discovery-item small { display: block; color: #65818c; font-size: 8px; }.discovery-item em { color: var(--green); font-size: 8px; font-style: normal; }
.survey-result { margin-top: 14px; padding: 13px; border: 1px solid rgba(121, 243, 176, .38); border-left: 3px solid var(--green); border-radius: 7px; background: rgba(5, 29, 31, .9); }
.survey-result > small { display: block; color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.survey-result > strong { display: block; margin-top: 4px; color: #efffff; font-size: 14px; letter-spacing: .08em; }
.survey-result > p { margin: 5px 0 10px; color: #94b9c5; font-size: 9px; line-height: 1.4; text-transform: uppercase; }
.survey-result-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.survey-result-actions button { min-width: 0; min-height: 44px; padding: 7px 10px; border: 1px solid rgba(85, 223, 255, .28); border-radius: 6px; background: rgba(7, 28, 40, .88); color: #9bc4d1; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.survey-result-actions .wide-action { display: flex; align-items: center; justify-content: center; gap: 7px; border-color: rgba(255, 180, 74, .55); color: #ffe0a3; background: linear-gradient(115deg, rgba(103, 58, 9, .72), rgba(24, 24, 23, .9)); }

.survey-3d-stage { position: absolute; inset: 0; overflow: hidden; }
.galaxy-overlay, .galaxy-overlay.active { --front-color: var(--cyan); background: rgba(0,3,7,.22); pointer-events: none; }
.galaxy-overlay .overlay-back, .galaxy-info-pane { pointer-events: auto; }
.galaxy-stage, .galaxy-labels-layer { position: absolute; inset: 0; pointer-events: none; }
.galactic-war-header { position: absolute; z-index: 7; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); top: max(18px, env(safe-area-inset-top)); height: 78px; pointer-events: none; }
.galactic-war-header .overlay-back { left: 0; top: 0; min-height: 48px; }
.galactic-war-title { margin-left: 190px; max-width: 560px; }
.galactic-war-title small { color: var(--cyan); font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.galactic-war-title h1 { margin: 3px 0; color: #effbff; font-size: 23px; letter-spacing: .16em; }
.galactic-war-title p { margin: 0; color: #74909d; font-size: 9px; line-height: 1.4; }
.galactic-war-legend { position: absolute; top: 0; right: 0; display: flex; gap: 5px; }
.galactic-war-legend span { padding: 7px 9px; border: 1px solid rgba(110, 190, 213, .24); background: rgba(3, 13, 21, .84); color: #6c8995; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.galactic-war-legend [data-front-state="protected"] { border-color: rgba(121, 243, 176, .45); color: var(--green); }
.galactic-war-legend [data-front-state="contested"] { border-color: rgba(255, 180, 74, .5); color: var(--amber); }
.galactic-war-legend [data-front-state="enemy"] { border-color: rgba(255, 73, 99, .52); color: var(--red); }
.galaxy-system-label { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; text-align: center; filter: drop-shadow(0 2px 6px #000); }
.galaxy-system-label::before { content: ""; width: 7px; height: 7px; margin-bottom: 3px; border: 1px solid currentColor; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.galaxy-system-label b { color: #b9d8e2; font-size: 10px; letter-spacing: .14em; }.galaxy-system-label span { color: #566f7a; font-size: 7px; }.galaxy-system-label em { color: currentColor; font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.galaxy-system-label[data-front-state="protected"] { color: var(--green); }.galaxy-system-label[data-front-state="contested"] { color: var(--amber); }.galaxy-system-label[data-front-state="enemy"] { color: var(--red); }.galaxy-system-label[data-front-state="unknown"] { color: #60717a; }
.galaxy-system-label.selected b { color: white; text-shadow: 0 0 10px currentColor; }
.galaxy-info-pane { --front-color: var(--cyan); position: absolute; z-index: 8; right: max(24px, env(safe-area-inset-right)); top: 112px; bottom: 24px; width: min(460px, 38vw); padding: 20px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; background: linear-gradient(155deg, rgba(5, 17, 27, .98), rgba(2, 9, 15, .94)); border: 1px solid rgba(100, 197, 224, .25); border-right: 2px solid var(--front-color); box-shadow: 0 22px 65px rgba(0, 0, 0, .55); backdrop-filter: blur(18px); }
.galaxy-info-pane::-webkit-scrollbar, .galaxy-operation-list::-webkit-scrollbar { display: none; }
.galaxy-info-pane[data-front-state="protected"] { --front-color: var(--green); }.galaxy-info-pane[data-front-state="contested"] { --front-color: var(--amber); }.galaxy-info-pane[data-front-state="enemy"] { --front-color: var(--red); }.galaxy-info-pane[data-front-state="unknown"] { --front-color: #657782; }
.galaxy-system-heading { display: flex; align-items: flex-start; gap: 12px; }
.galaxy-control-badge { min-width: 82px; padding: 8px 7px; border: 1px solid var(--front-color); background: rgba(7, 30, 40, .74); color: var(--front-color); font-size: 7px; font-weight: 900; letter-spacing: .11em; text-align: center; }
.galaxy-system-heading > div { min-width: 0; }.galaxy-system-heading small { color: var(--front-color); font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.galaxy-info-pane h2 { margin: 3px 0 0; color: #f1fbff; font-size: 30px; letter-spacing: .13em; }.galaxy-system-heading p { margin: 2px 0; color: #718d99; font-size: 9px; }
.galaxy-control-track { margin: 15px 0 10px; }.galaxy-control-track > span { display: flex; justify-content: space-between; margin-bottom: 5px; }.galaxy-control-track small { color: #6d8995; font-size: 7px; letter-spacing: .13em; }.galaxy-control-track b { color: var(--front-color); font-size: 9px; }
.galaxy-control-track > i { display: block; height: 5px; overflow: hidden; background: #08141b; border: 1px solid rgba(102, 178, 200, .16); }.galaxy-control-track em { display: block; height: 100%; background: var(--front-color); box-shadow: 0 0 10px var(--front-color); transition: width .3s ease; }
.galaxy-info-pane dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 10px 0; }.galaxy-info-pane dl div { padding: 6px 8px; border-left: 1px solid rgba(90,188,216,.18); }.galaxy-info-pane dt { color: #587682; font-size: 6px; }.galaxy-info-pane dd { margin: 3px 0 0; font-size: 10px; }.galaxy-description { min-height: 0; margin: 8px 0 12px; color: #718e9a; font-size: 9px; line-height: 1.45; }
.galaxy-operation-board { padding-top: 10px; border-top: 1px solid rgba(91, 188, 216, .16); }.galaxy-operation-board > header { display: flex; align-items: end; justify-content: space-between; gap: 10px; }.galaxy-operation-board header div { display: grid; gap: 2px; }.galaxy-operation-board header small { color: var(--front-color); font-size: 7px; letter-spacing: .14em; }.galaxy-operation-board header b { font-size: 10px; letter-spacing: .12em; }.galaxy-operation-board > header > span { color: #718c98; font-size: 7px; }
.galaxy-operation-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(205px, 1fr); gap: 7px; margin: 9px 0; padding-bottom: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galaxy-operation-card { min-height: 112px; display: grid; align-content: start; gap: 5px; padding: 9px; scroll-snap-align: start; border: 1px solid rgba(91, 179, 204, .2); border-left: 2px solid #526873; background: rgba(5, 20, 30, .76); color: #91abb6; text-align: left; cursor: pointer; }
.galaxy-operation-card > span { display: flex; align-items: center; justify-content: space-between; }.galaxy-operation-card em { color: var(--amber); font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .1em; }.galaxy-operation-card > span b { color: #728d98; font-size: 7px; letter-spacing: .1em; }.galaxy-operation-card strong { color: #dceff5; font-size: 12px; letter-spacing: .05em; }.galaxy-operation-card small { color: #6d8792; font-size: 7px; line-height: 1.35; text-transform: uppercase; }.galaxy-operation-card > i { margin-top: auto; color: #718793; font-size: 7px; font-style: normal; line-height: 1.3; }
.galaxy-operation-card.is-ready { border-left-color: var(--green); }.galaxy-operation-card.is-ready > i { color: var(--green); }.galaxy-operation-card.is-selected { border-color: var(--front-color); background: rgba(10, 38, 50, .9); box-shadow: inset 0 -2px 0 var(--front-color), 0 0 18px rgba(83, 216, 248, .13); }
.galaxy-mission-brief { min-height: 32px; margin: 7px 0; color: #8aa6b1; font-size: 8px; line-height: 1.4; }
.galaxy-primary-actions { display: grid; grid-template-columns: .9fr 1.1fr; gap: 7px; }.galaxy-primary-actions button, .galaxy-route-actions button { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(85, 189, 218, .3); background: rgba(7, 31, 44, .75); color: #92b1bd; font-size: 7px; font-weight: 800; letter-spacing: .08em; cursor: pointer; }.galaxy-primary-actions button:disabled, .galaxy-route-actions button:disabled { opacity: .32; pointer-events: none; }
.galaxy-primary-actions .wide-action { border-color: var(--front-color); color: #effbff; background: linear-gradient(120deg, rgba(18, 75, 92, .9), #071923); }
.galaxy-route-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-top: 7px; }.galaxy-route-actions button { min-width: 105px; min-height: 44px; }.galaxy-route-actions button:last-child { min-width: 82px; }
.route-status { min-height: 38px; display: flex; align-items: center; margin: 0; padding: 8px; border-left: 2px solid #546f7a; background: rgba(16,37,47,.5); color: #6f8b96; font-size: 7px; }.route-status.current { border-color: var(--cyan); color: var(--cyan); }.route-status.jumpable { border-color: var(--green); color: var(--green); }

.uga-mode { position: absolute; inset: 0; z-index: 35; display: none; pointer-events: none; }.uga-mode.active { display: block; pointer-events: none; }
.uga-command-mount { position: absolute; inset: 0; pointer-events: none; }
.uga-scene-controls { position: absolute; z-index: 100; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); display: flex; gap: 6px; pointer-events: auto; }.uga-scene-controls button { padding: 0 13px; backdrop-filter: blur(13px); }

.operation-modal { position: absolute; inset: 0; z-index: 90; display: none; place-items: center; background: rgba(0,4,8,.76); backdrop-filter: blur(10px); }.operation-modal.active { display: grid; }
.operation-card { width: min(720px, calc(100% - 36px)); padding: 26px; background: var(--panel-strong); border: 1px solid var(--line); border-top: 2px solid var(--amber); }.operation-card h2 { margin: 5px 0; font-size: 28px; }.operation-card > p { color: #7896a3; }
.operation-payload { max-height: 230px; overflow: auto; padding: 12px; margin: 14px 0; background: #02080d; border: 1px solid rgba(91,184,213,.18); color: #8ab2c2; font: 10px/1.5 Consolas, monospace; white-space: pre-wrap; }.operation-sim-actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 7px; }

.toast-banner { position: absolute; z-index: 120; left: 50%; top: 102px; transform: translate(-50%, -20px); min-width: 280px; max-width: 75vw; padding: 10px 18px; border: 1px solid var(--line-hot); background: rgba(2,17,27,.94); color: var(--cyan-soft); text-align: center; font-size: 9px; letter-spacing: .13em; opacity: 0; pointer-events: none; transition: .25s; }.toast-banner.show { opacity: 1; transform: translate(-50%, 0); }
.test-reset { position: absolute; z-index: 20; right: max(20px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid rgba(122,160,173,.18); background: rgba(4,12,18,.52); color: #46616d; font-size: 7px; letter-spacing: .1em; cursor: pointer; }.test-reset:hover { color: var(--red); border-color: var(--red); }

/* Authored button display rules must not resurrect unavailable diagnostics. */
.operation-sim-actions button[hidden] { display: none !important; }
.operation-modal[data-operation-state="debrief"] .operation-sim-actions { grid-template-columns: 1fr; }
/* Keep a setback's fresh-ticket retry and ordinary return reachable in the
   short phone landscape, while the detailed receipt scrolls inside the card. */
.operation-modal[data-operation-state="debrief"] { box-sizing: border-box; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.operation-modal[data-operation-state="debrief"] .operation-card { box-sizing: border-box; display: flex; flex-direction: column; width: min(720px, 100%); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 0; padding: clamp(12px, 3vw, 26px); }
.operation-modal[data-operation-state="debrief"] .operation-payload { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
.operation-modal[data-operation-state="debrief"] .operation-sim-actions { flex: 0 0 auto; }
#btnRetryGroundOperation:not([hidden]) { color: #e8fff2; border-color: rgba(101, 230, 168, .58); background: linear-gradient(100deg, rgba(17, 75, 51, .84), rgba(5, 25, 31, .96)); box-shadow: inset 3px 0 #65e6a8; }
.render-veil { position: absolute; inset: 0; z-index: 200; overflow: hidden; isolation: isolate; color: #d8f7ff; background: radial-gradient(ellipse at 50% 18%, #0c2637 0, #06131f 39%, #02060c 78%); transition: opacity .55s, visibility .55s; }.render-veil.ready { opacity: 0; visibility: hidden; pointer-events: none; }
/* Drop the loader's CONTENT immediately on ready, and let only the backdrop
   cross-fade. Measured: the hub goes interactive at ~512ms and this veil is

   still at opacity .42 at ~516ms, so for about half a second "OPENING UGA

   EXPEDITION LINK", the spinner and a meter frozen at 10% were plainly legible

   on top of a live, tappable UGA home — an overlapping loader layer, which

   docs/UGA_PLAYER_FLOW.md forbids, reporting a percentage that never reached

   100 before it vanished. Fading the words out in 120ms keeps the soft backdrop
   transition without ever showing stale progress over the running interface. */
.render-veil.ready > * { opacity: 0; transition: opacity .12s linear; }
.render-signal { position: absolute; inset: -8%; opacity: .32; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 126px, rgba(114, 223, 241, .07) 127px 128px, transparent 129px 254px), repeating-linear-gradient(0deg, transparent 0 92px, rgba(114, 223, 241, .05) 93px 94px, transparent 95px 186px); animation: renderSignalDrift 32s linear infinite; }
.render-grid { position: absolute; inset: 22% 0 0; opacity: .55; pointer-events: none; background: linear-gradient(transparent 95%, rgba(94, 203, 222, .04) 95%), linear-gradient(90deg, transparent 95%, rgba(94, 203, 222, .04) 95%); background-size: 64px 64px; }
.render-frame { position: absolute; inset: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); border: 1px solid rgba(117, 195, 213, .16); pointer-events: none; }
.render-shell { position: relative; z-index: 2; width: min(1080px, 100%); height: 100%; min-height: 100%; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: max(38px, calc(env(safe-area-inset-top) + 22px)) max(30px, calc(env(safe-area-inset-right) + 22px)) max(34px, calc(env(safe-area-inset-bottom) + 20px)) max(30px, calc(env(safe-area-inset-left) + 22px)); }
.render-top, .render-foot { width: 100%; display: flex; justify-content: space-between; gap: 16px; color: #8fb4c5; font: 600 9px/1.5 ui-monospace, monospace; letter-spacing: .18em; }
.render-top strong, .render-foot strong { color: #83edff; font-weight: 600; }
.render-foot { padding-top: 13px; border-top: 1px solid rgba(114, 184, 204, .08); color: #668b9d; letter-spacing: .14em; }
.render-brand { position: relative; display: grid; place-items: center; width: min(88vw, 600px); aspect-ratio: 1200 / 673; margin: auto 0; overflow: hidden; }
.render-brand img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .72)); }
.render-brand-fallback { color: #eefbff; font-size: clamp(42px, 12vw, 78px); font-weight: 900; letter-spacing: .075em; line-height: .94; text-shadow: 0 0 30px rgba(114, 217, 255, .2); white-space: nowrap; }
.render-status { width: 100%; max-width: 540px; display: grid; gap: 9px; margin: 0 0 auto; padding: 19px 0 0; border-top: 1px solid rgba(113, 204, 225, .2); }
.render-kicker { color: #6fa8be; font: 650 9px/1.4 ui-monospace, monospace; letter-spacing: .22em; }
#renderLoadTitle { color: #effbff; font-size: 14px; line-height: 1.4; letter-spacing: .055em; }
.render-veil small { min-height: 30px; color: #97b7c5; font-size: 10px; line-height: 1.5; letter-spacing: .08em; }
/* A UGA command-link test is a linear rack diagnostic, not another generic
   circular hologram. The two rails represent package and GPU channels. */
.loader-mark { position: relative; width: min(310px, 72vw); height: 34px; overflow: hidden; border: 1px solid rgba(80, 221, 255, .22); background: linear-gradient(90deg, rgba(3, 20, 29, .92), rgba(5, 31, 43, .72)); }
.loader-mark::before, .loader-mark::after { position: absolute; top: 5px; color: #648a9a; font: 650 6px/1 ui-monospace, monospace; letter-spacing: .14em; }
.loader-mark::before { content: 'PACKAGE BUS'; left: 8px; }.loader-mark::after { content: 'GPU LINK'; right: 8px; }
.loader-mark span, .loader-mark i { position: absolute; left: 8px; right: 8px; height: 2px; background: linear-gradient(90deg, #2b96c3, #91f6ff 42%, transparent 43%); background-size: 62px 100%; box-shadow: 0 0 10px rgba(94, 225, 255, .44); animation: renderLink 1.6s linear infinite; }
.loader-mark span { bottom: 10px; }.loader-mark i { bottom: 5px; opacity: .48; animation-direction: reverse; }
.render-veil.recovering .render-status { border-top-color: rgba(255, 180, 74, .32); }
.render-veil.failed { background: radial-gradient(ellipse at 50% 18%, #271014 0, #0e090e 42%, #02060c 78%); text-align: center; }
.render-veil.failed .render-status { border-top-color: rgba(255, 92, 92, .36); }
.render-veil.failed .loader-mark { border-color: rgba(255, 92, 92, .36); }
.render-veil.failed .loader-mark span, .render-veil.failed .loader-mark i { background: linear-gradient(90deg, #8a3434, var(--red) 42%, transparent 43%); box-shadow: 0 0 12px rgba(255, 77, 87, .5); animation: none; }
.render-failure-actions { display: none; width: min(360px, 86vw); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.render-veil.failed .render-failure-actions { display: grid; }
.render-veil [data-render-retry] { min-height: 44px; padding: 0 12px; border: 1px solid rgba(255, 93, 102, .5); background: rgba(61, 12, 18, .78); color: #ffd9dc; cursor: pointer; font-family: inherit; font-size: 8px; font-weight: 700; line-height: 1.2; letter-spacing: .1em; }
.render-veil [data-render-retry][hidden] { display: none; }
.render-veil [data-render-retry]:hover, .render-veil [data-render-retry]:focus-visible { border-color: var(--red); background: rgba(105, 18, 27, .82); outline: none; }
.render-veil [data-render-return] { display: none; min-height: 44px; padding: 0 12px; border: 1px solid rgba(84, 220, 255, .48); background: rgba(5, 36, 50, .82); color: #d7f7ff; cursor: pointer; font-family: inherit; font-size: 8px; font-weight: 800; line-height: 1.2; letter-spacing: .1em; }
.render-veil.failed [data-render-return] { display: inline-flex; align-items: center; justify-content: center; }
.render-veil [data-render-return]:hover, .render-veil [data-render-return]:focus-visible { border-color: var(--cyan); background: rgba(8, 66, 86, .9); outline: 2px solid rgba(84, 220, 255, .24); outline-offset: 2px; }
.render-veil [data-render-return]:disabled { cursor: wait; opacity: .62; }
.load-meter { width: 100%; height: 4px; margin-top: 3px; overflow: hidden; border: 1px solid rgba(70, 191, 229, .26); background: rgba(2, 15, 23, .88); }
.load-meter span { display: block; width: 2%; height: 100%; background: linear-gradient(90deg, #087b9e, #6be7ff); box-shadow: 0 0 14px rgba(84, 220, 255, .55); transition: width .32s ease; }
.load-telemetry { width: 100%; display: grid; grid-template-columns: 45px 1fr 42px; align-items: center; gap: 8px; color: #668693; font-size: 7px; letter-spacing: .13em; }
.load-telemetry strong { color: #a9efff; font-size: 9px; }.load-telemetry span { text-align: center; }.load-telemetry time { text-align: right; color: #799aa7; }
@keyframes renderSignalDrift { to { transform: translate3d(-20px, 30px, 0); } }
@keyframes renderLink { to { background-position: 62px 0; } }
@media (max-height: 650px) and (orientation: landscape) { .render-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); gap: 10px 42px; padding: 24px 40px; }.render-top { grid-column: 1 / -1; }.render-brand { grid-column: 1; grid-row: 2; width: min(45vw, 520px); margin: auto; }.render-status { grid-column: 2; grid-row: 2; margin: auto 0; padding-top: 12px; }.render-foot { grid-column: 1 / -1; } }
@media (max-height: 700px) and (orientation: portrait) { .render-shell { gap: 9px; padding-top: max(27px, calc(env(safe-area-inset-top) + 14px)); padding-bottom: max(25px, calc(env(safe-area-inset-bottom) + 14px)); }.render-status { padding-top: 11px; }.render-brand { margin: auto 0; } }
@media (prefers-reduced-motion: reduce) { .render-veil *, .render-veil *::before, .render-veil *::after { animation: none !important; transition: none !important; } }

/* The on-demand content transfer is an inline state of the NORMAL loader, not
   a miniature third design. It keeps the same squared command-link rail while
   staying clear of UGA navigation and deployment controls. */
.mf-normal-inline-status { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 80; width: min(300px, 75vw); box-sizing: border-box; padding: 8px 12px 10px; overflow: auto; border: 1px solid rgba(83, 196, 226, .34); border-radius: 2px; background: linear-gradient(135deg, rgba(3, 17, 27, .97), rgba(5, 31, 43, .93)); color: #d8f4ff; font: 11px/1.5 var(--font); box-shadow: inset 3px 0 #54dcff, 0 12px 28px rgba(0, 0, 0, .52); }
.mf-normal-inline-status::after { content: ''; display: block; height: 3px; margin-top: 8px; background: linear-gradient(90deg, #2b96c3, #91f6ff 44%, transparent 45%); background-size: 64px 100%; animation: renderLink 1.6s linear infinite; }
.mf-normal-inline-summary { min-height: 44px; align-content: center; cursor: pointer; color: #bdefff; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.mf-normal-inline-status p { margin: 4px 0 8px; color: #8eafbd; font-size: 9px; line-height: 1.45; }
.mf-normal-inline-action { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #48aec8; border-radius: 2px; background: #0b2635; color: #9be9ff; font: 800 9px/1.2 var(--font); letter-spacing: .08em; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .mf-normal-inline-status::after { animation: none; background-size: auto; } }

.space-experience[data-scene="uga"] .exploration-topbar,
.space-experience[data-scene="uga"] .story-rail,
.space-experience[data-scene="uga"] .target-console,
.space-experience[data-scene="uga"] .helm-dock,
.space-experience[data-scene="uga"] .space-callouts,
.space-experience[data-scene="uga"] .uga-scene-controls,
.space-experience[data-scene="galaxy"] .exploration-topbar,
.space-experience[data-scene="galaxy"] .story-rail,
.space-experience[data-scene="galaxy"] .target-console,
.space-experience[data-scene="galaxy"] .helm-dock,
.space-experience[data-scene="galaxy"] .space-callouts,
.space-experience[data-scene="galaxy"] .uga-scene-controls,
.space-experience[data-scene="survey"] .exploration-topbar,
.space-experience[data-scene="survey"] .story-rail,
.space-experience[data-scene="survey"] .target-console,
.space-experience[data-scene="survey"] .helm-dock,
.space-experience[data-scene="survey"] .space-callouts,
.space-experience[data-scene="survey"] .uga-scene-controls { opacity: 0 !important; pointer-events: none !important; display: none !important; }

@media (max-width: 1024px) {
  /* The resource row is a new topbar line below 1024px, and the story rail is

     positioned from the top with hard offsets. Publishing its height here - on

     :root, so the rail actually inherits it rather than reading a sibling -

     keeps the three breakpoint offsets from drifting apart as the row changes. */
  :root { --uga-res-row: 48px; }
  .exploration-topbar { grid-template-columns: 1fr auto; }.location-crumb { order: 3; grid-column: 1 / -1; min-height: 48px; }.expedition-resources { grid-column: 1 / -1; order: 4; min-height: 40px; overflow-x: auto; scrollbar-width: none; }
  /* Fuel, probes and research were hidden outright below 1024px, so on every

     phone the navigation view showed no expedition state at all - the player

     could not see how many probes they had while deciding whether to survey.

     Hidden is not compact. Own row, tighter metrics, and horizontal scroll if

     the row still overflows; the values matter more than the chrome around

     them. */
  .expedition-resources::-webkit-scrollbar { display: none; }
  .expedition-resources > span { min-width: 58px; padding: 5px 10px; }
  .expedition-resources small { font-size: 7px; letter-spacing: .1em; }
  .expedition-resources b { font-size: 12px; }
  .top-actions .icon-action { min-width: 44px; padding: 6px; }
  .top-actions .icon-action span { display: none; }
  .story-rail { top: calc(153px + var(--uga-res-row, 0px)); width: min(390px, calc(48vw - 18px)); }.story-rail.is-transmitting { width: min(410px, calc(50vw - 18px)); }.target-console { width: min(420px, 52vw); bottom: 105px; }
  .helm-dock { min-width: 78vw; }.galaxy-info-pane { width: 42vw; }.survey-dossier { width: 48vw; }
}

@media (max-width: 640px), (orientation: portrait) and (max-width: 900px) {
  .space-experience { min-height: 100dvh; }.exploration-topbar { left: 9px; right: 9px; top: max(8px, env(safe-area-inset-top)); grid-template-columns: 1fr auto; min-height: 58px; }
  .mf-ident { min-width: 0; padding: 7px 10px; }.mf-mark { width: 34px; height: 34px; flex-basis: 34px; }.mf-ident b { font-size: 10px; }.mf-ident small { font-size: 6px; }
  .top-actions .icon-action { min-width: 44px; padding: 6px; }.top-actions .icon-action span { display: none; }.location-crumb { min-width: 0; padding: 5px 10px; }.location-crumb strong { font-size: 16px; }.location-crumb small, .location-crumb span { font-size: 6px; }
  .story-rail, .story-rail.is-transmitting { left: 10px; top: calc(130px + var(--uga-res-row, 0px)); width: calc(100% - 20px); max-height: min(48vh, 410px); }.story-rail-default { padding: 13px 15px; }.story-rail h1 { font-size: 18px; }.story-rail-default > p { font-size: 9px; }.story-steps { grid-template-columns: repeat(3, 1fr); margin: 10px 0; }.story-steps li { align-items: flex-start; gap: 5px; font-size: 7px; }.story-steps span { width: 21px; height: 21px; flex: 0 0 21px; }.system-tone { display: none; }
  .story-transmission-copy { padding: 10px 12px 11px; }.story-transmission-identity strong { font-size: 18px; }.story-transmission h2 { margin-top: 8px; font-size: 11px; }.story-transmission-copy > p { font-size: 9px; line-height: 1.45; }.story-transmission-actions button { min-height: 80px; }.story-action-copy strong { font-size: 7px; }.story-action-copy small { font-size: 6.5px; }
  .target-console { right: 9px; left: 9px; bottom: 107px; width: auto; padding: 11px; }.target-console h2 { font-size: 15px; }.target-console p { font-size: 8px; margin-bottom: 8px; }.target-actions { grid-template-columns: repeat(3, 1fr); }.target-actions button { min-height: 44px; font-size: 7px; }.target-actions .primary { grid-column: 1 / -1; }
  .helm-dock { left: 9px; right: 9px; bottom: max(8px, env(safe-area-inset-bottom)); transform: none; min-width: 0; height: 92px; grid-template-columns: 1fr; gap: 5px; padding: 7px; }
  .autopilot-ident { display: none; }
  .helm-readout { grid-template-columns: repeat(3, 1fr); }
  .helm-readout > span { min-height: 30px; padding: 3px 5px; border-left: 0; border-bottom: 1px solid rgba(89, 187, 215, .15); }
  .helm-readout small { font-size: 7px; }
  .helm-readout b { font-size: 9px; }
  .autopilot-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .autopilot-actions button { min-width: 0; min-height: 44px; }
  .survey-overlay {
    background:
      radial-gradient(circle at 50% 34%, rgba(3, 18, 28, .18), rgba(1, 7, 12, .9) 78%),
      url('../../assets/runtime/ui/menu-art-v1/uga-survey-lab-v1.webp') center / cover no-repeat !important;
  }
  .overlay-back { left: 10px; top: max(10px, env(safe-area-inset-top)); height: 44px; min-height: 44px; padding: 0 12px; font-size: 9px; font-weight: 800; border-radius: 4px; z-index: 50; }
  .survey-planet-selector { top: max(10px, env(safe-area-inset-top)); left: auto; right: 10px; transform: none; max-width: 55vw; height: 34px; padding: 2px 4px; z-index: 50; }
  .survey-planet-pill { min-height: 44px; padding: 4px 12px; font-size: 9px; font-weight: 800; }
  .me2-scanner-side-panel { top: 62px; left: 10px; width: 132px; padding: 6px 8px; gap: 4px; border-radius: 4px; pointer-events: none; }
  #surveyOscilloscope { height: 38px; }
  .me2-mineral-readouts { gap: 2px; padding-top: 4px; }
  .me2-mineral-row { font-size: 7px; grid-template-columns: 46px 1fr 36px; gap: 4px; }
  .me2-scanner-reticle { top: 42%; left: 50%; width: 94px; height: 94px; }
  .survey-dossier {
    right: 0;
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    max-height: 36%;
    overflow-y: auto;
    border-radius: 14px 14px 0 0;
    padding: 12px 16px max(14px, env(safe-area-inset-bottom));
    border: 1px solid rgba(66, 221, 255, .35);
    border-bottom: none;
    background: rgba(2, 12, 20, .96);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, .9);
  }
  .survey-dossier::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto 8px;
    background: rgba(66, 221, 255, .4);
    border-radius: 2px;
  }
  .survey-dossier h2 { font-size: 16px; margin: 2px 0 4px; }
  .survey-dossier > p { font-size: 9px; line-height: 1.4; color: #8faec0; }
  .survey-progress { margin: 6px 0 6px; }
  .survey-telemetry { gap: 4px; }
  .survey-telemetry span { padding: 4px; border-radius: 3px; }
  .discovery-list { min-height: 36px; max-height: 75px; margin: 6px 0; }
  .survey-dossier .wide-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    background: linear-gradient(135deg, #00f0ff 0%, #00a3cc 100%);
    color: #010a12;
    margin-top: 8px;
    box-shadow: 0 4px 18px rgba(0, 240, 255, .35);
  }
  .survey-result { margin-top: 6px; padding: 9px; }
  .survey-result > strong { font-size: 12px; }
  .survey-result > p { margin: 4px 0 7px; }
  .survey-result-actions { grid-template-columns: minmax(0, 1fr); }
  .survey-result-actions button { width: 100%; }
  .galactic-war-header { left: 10px; right: 10px; top: max(10px, env(safe-area-inset-top)); height: 78px; }
  .galactic-war-header .overlay-back { left: 0; top: 0; max-width: 112px; padding: 0 9px; font-size: 7px; }
  .galactic-war-title { margin-left: 122px; max-width: none; padding-top: 2px; }
  .galactic-war-title small { font-size: 6px; }.galactic-war-title h1 { margin-top: 4px; font-size: 14px; letter-spacing: .12em; }.galactic-war-title p { display: none; }
  .galactic-war-legend { left: 0; right: 0; top: 54px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .galactic-war-legend span { padding: 5px 3px; font-size: 5.5px; text-align: center; }
  .galaxy-info-pane { right: 10px; left: 10px; bottom: max(10px, env(safe-area-inset-bottom)); top: auto; transform: none; width: auto; max-height: 48%; padding: 13px; border-radius: 12px 12px 4px 4px; }
  .galaxy-system-heading { gap: 8px; }.galaxy-control-badge { min-width: 72px; padding: 6px 4px; font-size: 6px; }.galaxy-system-heading small { font-size: 6px; }
  .galaxy-info-pane h2 { font-size: 20px; }.galaxy-system-heading p { font-size: 7px; }
  .galaxy-control-track { margin: 8px 0 5px; }.galaxy-info-pane dl { margin: 6px 0; }.galaxy-info-pane dl div { padding: 4px 5px; }.galaxy-info-pane dd { font-size: 8px; }
  .galaxy-info-pane .galaxy-description { display: none; }
  .galaxy-operation-board { padding-top: 6px; }.galaxy-operation-list { grid-auto-columns: minmax(190px, 72%); margin: 6px 0; }.galaxy-operation-card { min-height: 94px; padding: 7px; }.galaxy-operation-card strong { font-size: 10px; }.galaxy-mission-brief { min-height: 22px; margin: 5px 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .galaxy-primary-actions button { min-height: 44px; font-size: 6.5px; }.galaxy-route-actions { grid-template-columns: 1fr auto auto; }.galaxy-route-actions button { min-width: 82px; min-height: 36px; font-size: 6px; }.galaxy-route-actions button:last-child { min-width: 66px; }.route-status { min-height: 36px; font-size: 6px; }
  .operation-sim-actions { grid-template-columns: 1fr; }
  .test-reset { display: none; }
  .toast-banner { top: 112px; max-width: calc(100% - 20px); }
}

/* Approved archive subset: decorative chrome never owns input or semantics.

   Galactic cards and panes deliberately keep their structural borders; the

   large archived frames covered their text and falsely implied selection. */
.operation-card,
.survey-planet-pill,
.survey-dossier > .wide-action,
.operation-sim-actions .wide-action { position: relative; }
.survey-dossier::after, .operation-card::after,
.survey-planet-pill::after,
.survey-dossier > .wide-action::after,
.operation-sim-actions .wide-action::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.survey-dossier::after, .operation-card::after {
  border: 25px solid transparent;
  border-image-source: var(--mf-gui-context);
  border-image-slice: 18.9394% 7.8125%;
  border-image-width: 25px;
}
.survey-planet-pill::after {
  border: 17px solid transparent;
  border-image-source: var(--mf-gui-tab);
  border-image-slice: 38.6364% 16.3462%;
  border-image-width: 17px;
}
.survey-dossier > .wide-action,
.operation-sim-actions .wide-action { min-height: 54px; }
.survey-dossier > .wide-action::after,
.operation-sim-actions .wide-action::after {
  border: 23px solid transparent;
  border-image-source: var(--mf-gui-primary);
  border-image-slice: 41.0714% 7.5658%;
  border-image-width: 23px;
}

/* Mobile labels must stay legible without depending on browser text inflation. */
@media (max-width: 640px), (orientation: portrait) and (max-width: 900px) {
  .space-experience {
    --mf-mobile-edge: 10px;
    --mf-mobile-top: max(8px, env(safe-area-inset-top));
    --mf-mobile-topbar-height: 112px;
    --mf-mobile-dock-clearance: calc(100px + env(safe-area-inset-bottom));
  }
  .exploration-topbar {
    top: var(--mf-mobile-top);
    height: var(--mf-mobile-topbar-height);
    min-height: var(--mf-mobile-topbar-height);
    grid-template-rows: 50px 48px;
    gap: 6px;
  }
  .story-rail, .story-rail.is-transmitting {
    top: calc(var(--mf-mobile-top) + var(--mf-mobile-topbar-height) + 8px);
    max-height: min(410px, calc(100dvh - var(--mf-mobile-top) - var(--mf-mobile-topbar-height) - var(--mf-mobile-dock-clearance) - 16px));
  }
  .target-console { bottom: calc(var(--mf-mobile-dock-clearance) + 7px); }
  .galaxy-info-pane {
    max-height: min(58%, calc(100dvh - 118px));
    min-width: 0;
    padding: 16px;
    overflow-x: hidden;
  }
  .galaxy-operation-board { position: relative; min-width: 0; }
  .galaxy-operation-board > header { min-width: 0; align-items: flex-start; }
  .galaxy-operation-board > header > span { flex: 0 0 auto; text-align: right; }
  .galaxy-operation-list {
    width: 100%;
    min-width: 0;
    grid-auto-columns: calc(100% - 28px);
    gap: 8px;
    padding: 0 28px 4px 0;
    scroll-padding-inline: 0 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
  }
  .galaxy-operation-card {
    min-width: 0;
    min-height: 118px;
    padding: 10px;
    overflow: hidden;
  }
  .galaxy-operation-card > span, .galaxy-operation-card strong,
  .galaxy-operation-card small, .galaxy-operation-card > i { min-width: 0; overflow-wrap: anywhere; }
  .galaxy-primary-actions { grid-template-columns: minmax(0, 1fr); }
  .galaxy-primary-actions button, .galaxy-route-actions button {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .galaxy-route-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galaxy-route-actions .route-status { grid-column: 1 / -1; min-width: 0; }
  .galactic-war-legend span, .galaxy-control-badge,
  .galaxy-system-heading small, .galaxy-system-heading p,
  .galaxy-operation-board header small, .galaxy-operation-board > header > span,
  .galaxy-operation-card em, .galaxy-operation-card > span b,
  .galaxy-operation-card small, .galaxy-operation-card > i,
  .galaxy-mission-brief, .galaxy-primary-actions button,
  .galaxy-route-actions button, .route-status { font-size: 9px; line-height: 1.3; }
  .galaxy-operation-card strong { font-size: 12px; }
  .galaxy-route-actions button { min-height: 44px; }
  .me2-mineral-row, .survey-telemetry small, .discovery-item small,
  .story-transmission-signal b, .story-transmission-identity small,
  .story-action-number { font-size: 9px; line-height: 1.25; }
  .story-transmission-copy > p, .story-action-copy strong { font-size: 10px; }
}

@media (max-height: 620px) and (orientation: landscape) and (max-width: 1024px) {
  .exploration-topbar { left: 9px; right: 9px; top: 8px; min-height: 54px; }
  .location-crumb { min-height: 42px; }
  .story-rail, .story-rail.is-transmitting { left: max(22px, env(safe-area-inset-left)); top: calc(151px + var(--uga-res-row, 0px)); width: calc(50% - 46px); max-height: calc(100% - 244px); }
  .story-transmission-signal { min-height: 20px; padding: 0 9px; }.story-transmission-signal b { font-size: 6.5px; }.story-transmission-signal small { display: none; }
  .story-transmission-copy { padding: 5px 8px; }.story-transmission-identity small { font-size: 6px; }.story-transmission-identity strong { font-size: 13.5px; }.story-transmission-identity > b { display: none; }
  .story-transmission h2 { margin: 3px 0 2px; font-size: 9px; line-height: 1.2; }.story-transmission-copy > p { display: -webkit-box; overflow: hidden; font-size: 7.5px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .story-transmission-media { width: 58px; min-height: 58px; }.story-transmission-progress { height: 2px; padding: 0 9px; }
  .story-transmission-actions { gap: 4px; padding: 4px 6px 5px; }.story-transmission-actions button { min-height: 44px; grid-template-columns: 17px minmax(0, 1fr) 7px; gap: 4px; padding: 4px 5px; }.story-action-copy strong { font-size: 7.25px; line-height: 1.2; }.story-action-copy small, .story-action-copy em { display: none; }.story-action-number { font-size: 6.5px; }.story-action-chevron { font-size: 13px; }
  .survey-dossier { top: 62px; right: 10px; bottom: 10px; width: 42vw; max-height: none; overflow-y: auto; padding: 12px; }
  .survey-dossier h2 { margin: 3px 0; font-size: 18px; }
  .survey-dossier > p { margin: 4px 0; font-size: 9px; line-height: 1.35; }
  .survey-progress { margin: 8px 0; }
  .discovery-list { min-height: 40px; max-height: 74px; margin: 7px 0; }
  .survey-dossier .wide-action { min-height: 44px; }
  .galactic-war-header { left: max(9px, env(safe-area-inset-left)); right: max(9px, env(safe-area-inset-right)); top: 8px; height: 48px; }
  .galactic-war-header .overlay-back { min-height: 44px; }
  .galactic-war-title { margin-left: 184px; max-width: calc(54vw - 190px); }
  .galactic-war-title h1 { font-size: 16px; }
  .galactic-war-title p { display: none; }
  .galactic-war-legend { top: 0; }
  .galactic-war-legend span, .galaxy-control-badge,
  .galaxy-system-heading small, .galaxy-system-heading p,
  .galaxy-control-track small, .galaxy-operation-board header small,
  .galaxy-operation-board > header > span, .galaxy-operation-card em,
  .galaxy-operation-card > span b, .galaxy-operation-card small,
  .galaxy-operation-card > i, .galaxy-mission-brief,
  .galaxy-primary-actions button, .galaxy-route-actions button,
  .route-status { font-size: 9px; line-height: 1.3; }
  .galaxy-info-pane { top: 60px; right: max(9px, env(safe-area-inset-right)); bottom: max(9px, env(safe-area-inset-bottom)); width: min(46vw, 430px); padding: 12px; }
  .galaxy-info-pane h2 { font-size: 21px; }
  .galaxy-operation-list { grid-auto-columns: minmax(184px, 78%); }
  .galaxy-operation-card { min-height: 100px; }
  .galaxy-operation-card strong { font-size: 12px; }
  .galaxy-primary-actions button, .galaxy-route-actions button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Shared phone grammar for the isolated experience. These tokens mirror the

   live War Table without importing its stylesheet into this document. */
.space-experience {
  --mf-ui-edge: 12px;
  --mf-ui-gap: 8px;
  --mf-ui-touch: 44px;
  --mf-ui-radius: 10px;
  --mf-ui-surface: rgba(3, 14, 23, .92);
  --mf-ui-surface-soft: rgba(6, 23, 34, .78);
  --mf-ui-line: rgba(103, 183, 207, .22);
  --mf-ui-muted: #7893a1;
}

/* Galactic Command uses the authored submenu and operation-entry families.

   State remains live CSS: neutral raster frames never encode selection. */
.galaxy-info-pane {
  position: absolute;
  isolation: isolate;
  border: 1px solid var(--mf-ui-line);
  border-radius: var(--mf-ui-radius);
  background: linear-gradient(155deg, rgba(4, 17, 27, .97), rgba(2, 10, 17, .94));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .46);
}
.galaxy-info-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border: 27px solid transparent;
  border-image-source: var(--mf-gui-submenu);
  border-image-slice: 12.053571% 8.4375%;
  border-image-width: 27px;
}
.galaxy-operation-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--mf-ui-line);
  border-radius: 8px;
  background: rgba(5, 21, 31, .84);
  box-shadow: none;
}
.galaxy-operation-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 23px solid transparent;
  border-image-source: var(--mf-gui-entry);
  border-image-slice: 27.380952% 7.565789%;
  border-image-width: 23px;
  opacity: .72;
}
.galaxy-operation-card.is-selected {
  border-color: rgba(85, 223, 255, .62);
  background: rgba(7, 35, 48, .92);
  box-shadow: inset 0 -2px 0 var(--cyan);
}
.galaxy-operation-card.is-locked em,
.galaxy-operation-card.is-locked > i { color: var(--amber); }
.galaxy-operation-card.is-ready > i { color: var(--green); }
.galaxy-control-badge,
.galactic-war-legend span,
.galaxy-primary-actions button,
.galaxy-route-actions button,
.route-status { border-radius: 7px; }
.galaxy-operation-board { border-top-color: var(--mf-ui-line); }
.galaxy-primary-actions button,
.galaxy-route-actions button { position: relative; min-height: var(--mf-ui-touch); }
.galaxy-primary-actions button:not(:disabled)::after,
#galaxyJumpBtn:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 23px solid transparent;
  border-image-source: var(--mf-gui-primary);
  border-image-slice: 41.071429% 7.565789%;
  border-image-width: 23px;
}
.galaxy-primary-actions button:not(:disabled),
#galaxyJumpBtn:not(:disabled) {
  border-color: rgba(255, 180, 74, .56);
  color: #ffe0a3;
  background: linear-gradient(115deg, rgba(103, 58, 9, .72), rgba(24, 24, 23, .9));
}
.operation-card::after {
  border-image-source: var(--mf-gui-submenu);
  border-image-slice: 12.053571% 8.4375%;
  border-image-width: 27px;
}

@media (max-width: 640px), (orientation: portrait) and (max-width: 900px) {
  .space-experience { --mf-ui-edge: 10px; --mf-ui-gap: 7px; }
  .galactic-war-header {
    left: max(var(--mf-ui-edge), env(safe-area-inset-left));
    right: max(var(--mf-ui-edge), env(safe-area-inset-right));
    top: max(var(--mf-ui-edge), env(safe-area-inset-top));
    height: 92px;
  }
  .galactic-war-header .overlay-back { min-width: 96px; max-width: 104px; min-height: var(--mf-ui-touch); padding: 0 8px; }
  .galactic-war-title { margin-left: 112px; padding-top: 1px; }
  .galactic-war-title small, .galactic-war-title p { display: none; }
  .galactic-war-title h1 {
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    line-height: var(--mf-ui-touch);
    letter-spacing: .1em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .galactic-war-legend { top: 50px; gap: 5px; }
  .galactic-war-legend span { min-height: 36px; display: grid; place-items: center; padding: 4px 3px; font-size: 8px; }
  .galaxy-info-pane {
    right: max(var(--mf-ui-edge), env(safe-area-inset-right));
    left: max(var(--mf-ui-edge), env(safe-area-inset-left));
    bottom: max(var(--mf-ui-edge), env(safe-area-inset-bottom));
    width: auto;
    max-height: min(56%, calc(100dvh - 112px));
    padding: 16px;
  }
  .galaxy-system-heading { align-items: center; gap: 9px; }
  .galaxy-control-badge { min-width: 76px; min-height: 40px; display: grid; place-items: center; padding: 5px; font-size: 8px; }
  .galaxy-system-heading small { display: none; }
  .galaxy-info-pane h2 { margin: 0; font-size: 20px; line-height: 1.1; letter-spacing: .1em; }
  .galaxy-system-heading p { margin-top: 3px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .galaxy-control-track { margin: 9px 0 7px; }
  .galaxy-control-track small { font-size: 8px; }
  .galaxy-info-pane dl { display: none; }
  .galaxy-info-pane .galaxy-description { display: none; }
  .galaxy-operation-board { padding-top: 7px; }
  .galaxy-operation-board header small { display: none; }
  .galaxy-operation-board header b { font-size: 10px; }
  .galaxy-operation-board > header > span { font-size: 8px; }
  .galaxy-operation-list {
    grid-auto-columns: calc(100% - 22px);
    gap: var(--mf-ui-gap);
    margin: 7px 0;
    padding: 0 22px 3px 0;
    scroll-padding-inline: 0 22px;
  }
  .galaxy-operation-card { min-height: 88px; padding: 10px 12px; gap: 4px; }
  .galaxy-operation-card em,
  .galaxy-operation-card > span b,
  .galaxy-operation-card > i { font-size: 8px; line-height: 1.2; }
  .galaxy-operation-card strong { font-size: 13px; line-height: 1.2; }
  .galaxy-operation-card small { display: none; }
  .galaxy-mission-brief { display: none; }
  .galaxy-primary-actions { grid-template-columns: minmax(0, 1fr); gap: var(--mf-ui-gap); }
  #galaxyLoadoutBtn:disabled,
  #galaxyScanBtn:disabled { display: none; }
  .galaxy-primary-actions:has(#galaxyLoadoutBtn:not(:disabled)) #galaxyScanBtn { display: none; }
  .galaxy-primary-actions button { min-height: 50px; font-size: 10px; }
  .galaxy-route-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mf-ui-gap); margin-top: var(--mf-ui-gap); }
  .galaxy-route-actions .route-status { display: none; }
  .galaxy-route-actions button { min-width: 0; min-height: var(--mf-ui-touch); font-size: 9px; }
  .galaxy-route-actions button:disabled { display: none; }
  .galaxy-route-actions:has(#galaxyJumpBtn:disabled) #galaxyFlagshipBtn { grid-column: 1 / -1; }
  /* The shared toast normally sits beneath the space topbar. UGA has a taller

     two-row header plus room and deck rails, so that position covered the room

     tabs. Its open canvas lane is non-interactive and remains visible beside

     either inspector state. */
  .uga-mode.active ~ .toast-banner {
    top: 282px;
    min-width: 0;
    max-width: calc(100% - 32px);
    padding: 8px 14px;
    font-size: 8px;
  }
}

/* Persistent chrome dot. The base game marks unread mail and social activity

   with a status dot; carrying the same signal here keeps one meaning for one

   mark rather than teaching the player a second vocabulary in space. */
.icon-action { position: relative; }
.chrome-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--uga-amber, #ffb54a);
  box-shadow: 0 0 7px rgba(255, 181, 74, .75);
}
.chrome-dot[hidden] { display: none; }

/* Chrome shares the resource row rather than the action nav. Seven 44px icon

   actions do not fit a 412px topbar - adding mail, social and settings to the

   nav silently pushed RECENTER and FULLSCREEN off the bar. The resource row has

   spare width to its right, and status belongs beside status. */
.space-chrome { display: none; }
@media (max-width: 1024px) {
  .space-chrome {
    display: flex; align-items: center; gap: 4px;
    grid-column: 1 / -1; order: 5; justify-self: end;
    margin-top: -44px; margin-right: 4px; height: 40px;
  }
  .space-chrome .icon-action { min-width: 40px; min-height: 40px; padding: 5px; }
}

/* Short landscape phones need one composed instrument bay, not a tall desktop
   dossier squeezed beside a small globe with empty black below it. */
@media (orientation: landscape) and (max-height: 520px) {
  .survey-dossier {
    top: 62px;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(44vw, 390px);
    max-height: none;
    padding: 11px 13px;
    overflow-y: auto;
    transform: none;
    border-radius: 8px;
  }
  .survey-dossier h2 { margin: 3px 0 5px; font-size: 18px; }
  .survey-dossier > p { display: -webkit-box; margin: 4px 0; overflow: hidden; font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .survey-progress { margin: 7px 0; }
  .survey-telemetry span { padding: 5px 6px; }
  .discovery-list { min-height: 44px; max-height: 82px; margin: 7px 0; overflow-y: auto; }
  .me2-scanner-side-panel { top: 66px; left: max(10px, env(safe-area-inset-left)); width: min(22vw, 194px); padding: 7px 8px; gap: 5px; }
  #surveyOscilloscope { height: 42px; }
  .me2-mineral-readouts { gap: 3px; padding-top: 5px; }
  .me2-mineral-row { grid-template-columns: 50px 1fr 40px; gap: 4px; font-size: 7px; }
  .me2-scanner-reticle { left: 43%; top: 51%; width: 104px; height: 104px; }
}