/* The galaxy map (key M, ui/windows/galaxyMap.js): a WebGL canvas
   (galaxy/galaxyRender.js) under an SVG overlay, tools in the corners. */
#galaxyModalBox{ width:1200px; }
#galaxyBody{ position:relative; width:1146px; height:740px; overflow:hidden; flex:none;
  border:1px solid rgb(60 85 216 / .55); border-radius:8px; background:#010208; cursor:grab; touch-action:none; }
#galaxyBody.dragging{ cursor:grabbing; }
#galaxyCanvas, #galaxyOverlay{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#galaxyOverlay{ pointer-events:none; overflow:hidden; font-family:var(--uiFontLabel); }

/* distance rings */
#galaxyOverlay .gRing{ fill:none; stroke:#8a9bff; stroke-opacity:.2; stroke-width:1; stroke-dasharray:2 7; }
#galaxyOverlay .gRingLbl{ fill:#9aa8ff; fill-opacity:.55; font-size:11px; letter-spacing:.8px; }

/* the arms' names: along the arm, a dark halo for contrast */
#galaxyOverlay .gArm{ fill:#dbe4ff; fill-opacity:.82; font-size:14px; font-weight:500; letter-spacing:4px; text-transform:uppercase;
  paint-order:stroke; stroke:rgb(0 2 14 / .75); stroke-width:3.5px; stroke-linejoin:round; }
#galaxyOverlay .gArmSmall{ font-size:11.5px; letter-spacing:3px; fill-opacity:.7; }

/* the Galactic Centre */
#galaxyOverlay .gCenter circle{ fill:none; stroke:#ffd9a0; stroke-width:1.2; }
#galaxyOverlay .gCenter path{ stroke:#ffd9a0; stroke-width:1.2; }
#galaxyOverlay .gCenter text{ fill:#ffe2b8; font-size:12.5px; letter-spacing:2px; text-transform:uppercase;
  paint-order:stroke; stroke:rgb(0 0 8 / .8); stroke-width:3px; }

/* the starting system */
#galaxyOverlay .gStart .gDot{ fill:#ffe9b0; filter:drop-shadow(0 0 4px #f8bb56); }
#galaxyOverlay .gStart .gRingMark{ fill:none; stroke:#f8bb56; stroke-width:1.6; }
#galaxyOverlay .gStart .gTicks, #galaxyOverlay .gStart .gLeader{ stroke:#f8bb56; stroke-width:1.4; fill:none; }
#galaxyOverlay .gStart .gPulse{ fill:none; stroke:#f8bb56; stroke-width:1.5; transform-box:fill-box; transform-origin:center;
  animation:gPulse 2.4s ease-out infinite; }
#galaxyOverlay .gStart .gPulse2{ animation-delay:1.2s; }
@keyframes gPulse{ from{ transform:scale(.6); opacity:.9; } to{ transform:scale(3.2); opacity:0; } }
#galaxyOverlay .gLabelBox{ fill:rgb(2 4 18 / .82); stroke:#f8bb56; stroke-opacity:.8; stroke-width:1; }
#galaxyOverlay .gLabelTitle{ fill:#f8bb56; font-size:14px; font-weight:600; letter-spacing:2.4px; text-transform:uppercase; }
#galaxyOverlay .gLabelSub{ fill:#c7d0ff; font-family:var(--uiFontBody); font-size:12.5px; }

/* tools: zoom, to the start, the whole galaxy */
#galaxyTools{ position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:6px; }
#galaxyTools button{ width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  background:rgb(6 10 32 / .82); border:1.5px solid #3c55d8; border-radius:7px; color:#c7d0ff;
  font-family:var(--uiFontLabel); font-size:20px; line-height:1; transition:filter .15s, border-color .15s; }
#galaxyTools button:hover{ border-color:#f8bb56; color:#ffe2b8; }
#galaxyTools svg{ width:20px; height:20px; }

#galaxyScale{ position:absolute; left:16px; bottom:14px; font-family:var(--uiFontLabel); font-size:12.5px;
  color:#c7d0ff; letter-spacing:.8px; pointer-events:none; }
#galaxyScaleBar{ height:6px; margin-bottom:4px; border:1.5px solid #c7d0ff; border-top:none; }
#galaxyHint{ position:absolute; right:14px; bottom:12px; font-size:12.5px; color:var(--uiText2); pointer-events:none; }
#galaxyFail{ position:absolute; inset:0; display:grid; place-items:center; color:#c7d0ff; font-size:16px; }