/* RABLA — css/galaxy.css (G4, PHASE2_SPEC §6.3 / §6.4)
   The galaxy map overlay (#screen-galaxy: top bar, canvas, side panel, HANGAR tab), the Phase-2
   additions to the planet-map top bar (LAUNCH / GALAXY buttons, fuel badge) and the runtime-added
   flow buttons on the results / menu screens. Colours come from the :root tokens in style.css. */

/* #ui must stay above every canvas G2 appends to #stage (launch-canvas / space-canvas):
   DOM screens, toasts and this overlay always paint on top. */
#ui { z-index: 20; }

/* ---------------------------------------------------------------- planet-map top bar additions */
.topbar .fuel, .galaxy-top .fuel {
  display: inline-flex;
  align-items: center;
  min-width: 80px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--orange-lt);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--ink-2), inset 0 0 0 2px rgba(255, 160, 64, .25);
}
#map-launch.ready {
  background: linear-gradient(180deg, #FFF176, var(--yellow));
  animation: glow 1.6s ease-in-out infinite;
}
#map-launch[disabled] { animation: none; }

/* ---------------------------------------------------------------- overlay */
.galaxy-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: auto;
  background: rgba(6, 11, 28, .96);
  font-family: var(--font);
  color: var(--text);
}
.galaxy-overlay.hidden { display: none !important; }

.galaxy-top {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(34, 48, 94, .97), rgba(20, 28, 61, .97));
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  z-index: 2;
}
.galaxy-top h2 { font-size: 28px; white-space: nowrap; margin: 0; }
.galaxy-top .galaxy-tabs { display: flex; gap: 6px; margin-left: 10px; }
.galaxy-top .btn.tab { opacity: .75; }
.galaxy-top .btn.tab.active {
  opacity: 1;
  background: linear-gradient(180deg, #84FFFF, var(--cyan));
}
.galaxy-top .fuel { margin-left: auto; }
.galaxy-top #galaxy-menu.hidden { display: none !important; }

.galaxy-body {
  position: absolute;
  left: 0; top: var(--topbar-h); right: 0; bottom: 0;
}
.galaxy-body.hidden { display: none !important; }
#galaxy-canvas {
  position: absolute;
  left: 0; top: 0;
  width: 1280px;
  height: calc(720px - var(--topbar-h));
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#galaxy-canvas:active { cursor: grabbing; }

.galaxy-legend {
  position: absolute;
  left: 14px; bottom: 10px;
  margin: 0;
  font-size: 11px;
  color: rgba(243, 240, 255, .6);
  text-shadow: 1px 1px 0 var(--ink);
  pointer-events: none;
}

/* ---------------------------------------------------------------- side panel */
.galaxy-side {
  position: absolute;
  right: 14px; top: 14px;
  width: 330px;
  max-height: calc(100% - 28px);
  overflow: auto;
  padding: 14px 16px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: rgba(26, 16, 48, .92);
  box-shadow: 0 6px 0 var(--ink-2), 0 10px 30px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.galaxy-side.empty { width: 280px; }
.galaxy-side .hint { margin: 0; color: var(--muted); font-size: 14px; }
.galaxy-side .head { display: flex; align-items: center; gap: 10px; }
.galaxy-side .head h3 { margin: 0; font-size: 20px; line-height: 1.1; text-shadow: 2px 2px 0 var(--ink); }
.galaxy-side .swatch {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: 0 0 10px currentColor;
}
.galaxy-side .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.galaxy-side .badge {
  padding: 2px 8px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--steel);
  color: var(--ink);
}
.galaxy-side .badge.home { background: var(--yellow); }
.galaxy-side .badge.here { background: var(--cyan); }
.galaxy-side .badge.course { background: var(--green); color: var(--green-ink); }
.galaxy-side .rows { display: flex; flex-direction: column; gap: 4px; }
.galaxy-side .row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.galaxy-side .row .k { color: var(--dim); font-weight: 900; letter-spacing: 1px; font-size: 11px; }
.galaxy-side .row .v { color: var(--text); font-weight: 900; text-align: right; }
.galaxy-side .btn { align-self: flex-start; }

/* ---------------------------------------------------------------- hangar tab */
.galaxy-hangar {
  position: absolute;
  left: 0; top: var(--topbar-h); right: 0; bottom: 0;
  overflow: auto;
  padding: 18px 40px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.galaxy-hangar.hidden { display: none !important; }
.hangar-section {
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: rgba(26, 16, 48, .85);
  padding: 12px 16px;
  box-shadow: 0 6px 0 var(--ink-2);
}
.hangar-section h3 {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--ink);
}
.hangar-section .hint { margin: 4px 0; color: var(--muted); font-size: 14px; }
.hangar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid transparent;
}
.hangar-row + .hangar-row { border-top-color: rgba(255, 255, 255, .08); border-radius: 0; }
.hangar-row.equipped { background: rgba(0, 229, 255, .08); border-color: rgba(0, 229, 255, .35); }
.hangar-row .icon { flex: none; width: 64px; height: 64px; }
.hangar-row .body { flex: 1; min-width: 0; }
.hangar-row .name { font-weight: 900; font-size: 17px; }
.hangar-row .desc { color: var(--muted); font-size: 13px; font-style: italic; }
.hangar-row .stats { color: var(--dim); font-size: 11px; letter-spacing: 1px; margin-top: 2px; }
.hangar-row .act { display: flex; align-items: center; gap: 10px; }
.hangar-row .cost { color: var(--cyan); font-weight: 900; font-size: 16px; white-space: nowrap; }

/* ------------------------------------------- flow buttons (index.html: RESULTS LAUNCH, MENU CONTINUE IN SPACE) */
.btn.flow-btn.hidden { display: none !important; }
#btn-results-launch {
  background: linear-gradient(180deg, #FFF176, var(--yellow));
  animation: glow 1.6s ease-in-out infinite;
}
#btn-menu-space { background: linear-gradient(180deg, #84FFFF, var(--cyan)); }