/* Star map — unified with the system-preview design language. The overlay is
   a self-contained HUD: galaxy level (stars only) and system level share the
   same panels, markers and scaling rules. */

#starmap-overlay {
  --ink: #eef3f3;
  --muted: #aab3b4;
  --panelTop: rgba(8, 20, 31, .9);
  --panelBottom: rgba(7, 16, 25, .74);
  --line: rgba(203, 214, 214, .22);
  --line2: rgba(222, 232, 232, .12);
  --green: #17e31a;
  --cyan: #3ed4e8;
  --hud-scale: 1;
  --marker-scale: 1;
  position: fixed; z-index: 60; inset: 0; overflow: hidden; isolation: isolate;
  color: var(--ink);
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  user-select: none;
}
#starmap-overlay * { box-sizing: border-box; }

/* ---- stage ---------------------------------------------------------------- */
.sm-viewport, #sm-stage, #sm-canvas, #sm-sysview { position: absolute; inset: 0; }
#sm-stage {
  background:
    radial-gradient(circle at 50% 49%, rgba(150, 122, 82, .18) 0, rgba(113, 92, 60, .10) 18%, rgba(26, 31, 31, 0) 46%),
    radial-gradient(circle at 50% 50%, #262a27 0, #171b1b 34%, #0c1112 72%, #090e10 100%);
}
#sm-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: .06; mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0, rgba(255, 255, 255, .02) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, .5) 100%);
}
#sm-canvas, #sm-sysview { z-index: 1; }
#sm-canvas canvas, #sm-sysview canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#sm-canvas canvas:active, #sm-sysview canvas:active { cursor: grabbing; }
#sm-label-layer { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; }

.mode-galaxy #sm-sysview { display: none; }
.mode-system #sm-canvas { display: none; }
.mode-system .sm-map-label { display: none !important; }
.mode-galaxy .worldLabel, .mode-galaxy #sm-navArrow, .mode-galaxy #sm-nameTag { display: none !important; }

#sm-ui { position: absolute; inset: 0; z-index: 8; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .75); }
#starmap-overlay .panel { background: rgba(7, 17, 26, .79); border: 1px solid rgba(182, 198, 201, .19); box-shadow: inset 0 1px rgba(255, 255, 255, .018); }
#starmap-overlay .panelRule { height: 1px; background: rgba(207, 220, 220, .2); }
#starmap-overlay button { font: inherit; color: inherit; }
#starmap-overlay kbd, #starmap-overlay .key {
  min-width: 29px; height: 24px; padding: 2px 7px; display: inline-grid; place-items: center;
  border: 1px solid rgba(198, 211, 213, .24); border-radius: 3px;
  background: rgba(198, 211, 213, .055); color: #cbd4d5;
  font: 700 13px/1 Consolas, "Cascadia Mono", monospace; box-shadow: none;
}

/* ---- HUD anchors ----------------------------------------------------------- */
.hudAnchor { position: absolute; pointer-events: none; will-change: transform; }
#sm-leftHud { width: 418px; height: 730px; transform: scale(var(--hud-scale)); transform-origin: top left; }
#sm-rightHud { width: 360px; height: 550px; transform: scale(var(--hud-scale)); transform-origin: top right; }
#sm-bottomHud { transform: scale(var(--hud-scale)); transform-origin: bottom right; }

#sm-leftHud #sm-leftRail { left: 0; top: 0; width: 26px; height: 650px; }
#sm-leftHud #sm-sysPanel { left: 48px; top: 0; width: 370px; }
#sm-leftHud #sm-planetLeft, #sm-leftHud #sm-galaxyTools { left: 48px; top: 278px; width: 370px; }
#sm-rightHud #sm-faction { right: 0; top: 0; width: 360px; height: 78px; }
#sm-rightHud #sm-planetRight { right: 0; top: 278px; width: 360px; height: 225px; }
#sm-bottomHud #sm-controls { position: relative; right: auto; bottom: auto; gap: 14px; font-size: 17px; }

/* ---- left rail -------------------------------------------------------------- */
#sm-leftRail {
  position: absolute; height: 68.3vh;
  border-left: 2px solid rgba(204, 216, 216, .13); border-right: 1px solid rgba(204, 216, 216, .08);
  background: rgba(8, 14, 17, .16);
}
#sm-leftRail .back {
  width: 100%; height: 28px; display: grid; place-items: center; padding: 0;
  background: rgba(224, 232, 232, .14); border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 14px; color: #d8dede; cursor: pointer; pointer-events: auto;
}
#sm-leftRail .back:hover { background: rgba(224, 232, 232, .26); color: #fff; }
#sm-leftRail .vertical {
  writing-mode: vertical-rl; margin: 17px auto 0;
  font-weight: 900; font-size: 15px; letter-spacing: 3px; color: #b9c0c1;
}

/* ---- system panel ----------------------------------------------------------- */
#sm-sysPanel { position: absolute; min-height: 266px; }
#sm-sysPanel .head {
  height: 34px; padding: 5px 14px 4px; display: flex; justify-content: space-between; align-items: center;
  font-size: 19px; font-weight: 950; letter-spacing: .5px; border-bottom: 1px solid rgba(208, 220, 220, .18);
}
#sm-sysPanel .head span:last-child { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
#sm-sysPanel .identity {
  min-height: 67px; padding: 8px 14px 7px; display: grid; grid-template-columns: 1fr auto; align-items: center;
  border-bottom: 1px solid rgba(208, 220, 220, .18);
}
.eyebrow { font-size: 12px; font-weight: 900; line-height: 1.4; color: #8d9799; letter-spacing: .06em; }
.sysName { margin-top: 3px; font-size: 22px; line-height: 1.08; font-weight: 950; letter-spacing: -.7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.level { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-right: 8px; }
.level strong { font-size: 13px; font-weight: 900; color: #b8c0c2; }
.level span { display: grid; place-items: center; width: 34px; height: 25px; background: var(--green); color: #041007; font-size: 17px; font-weight: 950; text-shadow: none; }

#sm-systemGlyph { position: relative; height: 99px; border-bottom: 1px solid rgba(208, 220, 220, .16); overflow: hidden; }
#sm-systemGlyph::before { content: ""; position: absolute; left: 0; right: 0; top: 56px; height: 1px; background: rgba(229, 236, 236, .52); }
#sm-systemGlyph .gMain, #sm-systemGlyph .gNode { position: absolute; border-radius: 50%; }
#sm-systemGlyph .gMain { width: 58px; height: 58px; left: 40%; top: 56px; transform: translate(-50%, -50%); }
#sm-systemGlyph .gNode {
  top: 56px; border: 1px solid #9ea7aa; transform: translate(-50%, -50%);
  cursor: pointer; pointer-events: auto; transition: transform .12s ease;
}
#sm-systemGlyph .gNode:hover { transform: translate(-50%, -50%) scale(1.35); }

#sm-survey { height: 66px; padding: 8px 14px 6px; }
#sm-survey .label { font-size: 16px; line-height: 19px; font-weight: 950; }
#starmap-overlay .bar { position: relative; margin-top: 5px; height: 3px; background: rgba(206, 220, 220, .28); }
#starmap-overlay .bar::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--survey-progress, 0%); background: #dfe6e6; }
.barValue { text-align: center; margin-top: 2px; font-size: 17px; line-height: 18px; font-weight: 950; color: #c9d0d1; letter-spacing: 1px; }

/* galaxy-level meta + actions live at the bottom of the system panel */
#sm-galaxyMeta { padding: 10px 14px 12px; }
.metaRows { display: grid; gap: 1px; }
.metaRow {
  display: flex; justify-content: space-between; align-items: center; padding: 6px 8px;
  background: rgba(183, 194, 196, .055); border-top: 1px solid rgba(222, 231, 231, .055); border-bottom: 1px solid rgba(0, 0, 0, .2);
  font-size: 13px; font-weight: 850; color: #b9c1c2;
}
.metaRow b { color: #d1d7d8; font-weight: 650; }
/* ---- galaxy tools (search / filter) ----------------------------------------- */
#sm-galaxyTools { position: absolute; padding: 12px 14px; display: none; }
.mode-galaxy #sm-galaxyTools { display: block; }
.mode-galaxy #sm-planetLeft, .mode-galaxy #sm-planetRight, .mode-galaxy #sm-faction { display: none; }
.mode-system #sm-galaxyMeta, .mode-system #sm-galaxyTools { display: none; }
.toolRow { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.toolRow span { font-size: 14px; font-weight: 950; color: #c5cccd; }
.toolRow input {
  width: 100%; padding: 8px 10px; color: #edf8fa; background: rgba(3, 12, 17, .78);
  border: 1px solid rgba(117, 165, 172, .27); outline: none; font-size: 13px; pointer-events: auto;
}
.toolRow input::placeholder { color: rgba(197, 218, 220, .38); }
.toolRow input:focus {
  border-color: rgba(126, 213, 225, .74); background: rgba(5, 20, 27, .92);
  box-shadow: 0 0 0 1px rgba(86, 173, 186, .14), inset 2px 0 0 rgba(117, 220, 234, .58);
}
.toolFilters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 9px; }
.toolFilters button {
  padding: 6px 3px; color: var(--muted); background: rgba(177, 190, 192, .07);
  border: 1px solid var(--line2); cursor: pointer; font-size: 13px; pointer-events: auto;
}
.toolFilters button:hover { color: var(--ink); }
.toolFilters button.active {
  color: #ecfbfd; background: #245c66; border-color: rgba(130, 221, 232, .62);
  box-shadow: inset 0 0 0 1px rgba(5, 19, 23, .55); font-weight: 800;
}
.toolMeta { display: flex; justify-content: space-between; margin-top: 9px; color: rgba(235, 238, 233, .42); font: 11px/1 Consolas, monospace; }

/* ---- faction ----------------------------------------------------------------- */
#sm-faction { position: absolute; padding: 7px 92px 7px 12px; overflow: hidden; }
#sm-faction::after {
  content: "✦"; position: absolute; z-index: 0; right: 12px; bottom: -27px; width: 72px;
  text-align: center; font-size: 92px; color: rgba(192, 207, 210, .075);
  transform: scale(1.35, 1) rotate(45deg); pointer-events: none;
}
#sm-faction .small, #sm-faction .big, #sm-faction .panelRule { position: relative; z-index: 1; }
#sm-faction .small { font-size: 16px; line-height: 19px; font-weight: 950; }
#sm-faction .big { font-size: 25px; line-height: 1.18; font-weight: 950; white-space: nowrap; }

/* ---- planet detail panels ----------------------------------------------------- */
.planetInfo { visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s; overflow: hidden; }
.planetInfo.active { visibility: visible; opacity: 1; transform: translateY(0); }
#sm-leftHud #sm-planetLeft.planetInfo, #sm-rightHud #sm-planetRight.planetInfo { transform: translateY(8px); }
#sm-leftHud #sm-planetLeft.planetInfo.active, #sm-rightHud #sm-planetRight.planetInfo.active { transform: translateY(0); }

#sm-planetLeft { position: absolute; min-height: 300px; display: flex; flex-direction: column; }
.detailTitle { height: 78px; flex: 0 0 78px; padding: 12px 14px 9px; border-bottom: 1px solid rgba(205, 218, 218, .17); }
.detailTitle .name { font-size: 28px; line-height: 30px; font-weight: 500; letter-spacing: -1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detailTitle .system { margin-top: 3px; color: #aeb7b9; font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detailSurvey { height: 58px; flex: 0 0 58px; padding: 7px 14px; background: rgba(191, 201, 202, .075); border-bottom: 1px solid rgba(205, 218, 218, .12); }
.detailSurveyTop { display: flex; justify-content: space-between; align-items: center; color: #bac2c3; font-size: 16px; font-weight: 900; }
.detailSurvey .bar { margin-top: 7px; }
.detailRows { flex: 1; min-height: 0; padding: 8px 14px 10px; display: grid; grid-template-rows: repeat(8, minmax(0, 1fr)); }
.detailRow {
  min-height: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 7px;
  background: rgba(183, 194, 196, .055); border-top: 1px solid rgba(222, 231, 231, .055); border-bottom: 1px solid rgba(0, 0, 0, .20);
  font-size: 15px; font-weight: 850; color: #b9c1c2;
}
.detailRow span:first-child { flex-shrink: 0; }
.detailRow span:last-child { color: #d1d7d8; text-align: right; margin-left: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }

.routeActionWrap { flex: 0 0 58px; padding: 7px 14px 9px; border-top: 1px solid rgba(210, 222, 223, .10); background: rgba(5, 12, 18, .12); }
#sm-routeAction {
  pointer-events: auto; width: 100%; height: 41px;
  border: 1px solid rgba(197, 211, 213, .24); border-left: 2px solid rgba(113, 177, 187, .62);
  background: rgba(177, 190, 192, .10); color: #d6dedf;
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; padding: 0 9px 0 6px;
  font: 850 16px/1 "Microsoft YaHei UI", "PingFang SC", sans-serif; letter-spacing: .2px; text-shadow: none;
  cursor: pointer; box-shadow: none; transition: background .14s ease, border-color .14s ease, color .14s ease;
}
#sm-routeAction:hover:not(:disabled) { background: rgba(191, 205, 207, .16); border-color: rgba(213, 226, 227, .34); border-left-color: rgba(126, 201, 212, .82); }
#sm-routeAction:active:not(:disabled) { background: rgba(135, 170, 176, .16); }
#sm-routeAction:disabled { opacity: .42; cursor: not-allowed; }
.routeIcon { width: 27px; height: 22px; justify-self: center; color: rgba(205, 218, 220, .84); }
.routeIcon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.routeActionLabel { text-align: left; padding-left: 2px; }

#sm-planetRight { position: absolute; padding: 14px 14px 13px; }
.resourceHead { display: flex; justify-content: space-between; align-items: center; color: #c5cccd; font-size: 18px; font-weight: 950; }
.resourceTiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 9px; }
.resourceTile {
  height: 54px; display: flex; align-items: flex-end; padding: 6px 5px;
  border: 1px solid rgba(217, 226, 226, .14); background: rgba(179, 191, 194, .19);
  color: #e1e6e6; font-size: 14px; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); position: relative; overflow: hidden;
}
.resourceTile:nth-child(1) { background: rgba(92, 171, 169, .46); }
.resourceTile:nth-child(4) { background: rgba(48, 112, 151, .46); }
.resourceTile.unknown { color: rgba(219, 226, 225, .34); border-style: dashed; background: rgba(90, 108, 112, .18); }
.resourceTile::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .08); pointer-events: none; }
.traitText { margin-top: 82px; color: #d2d8d9; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- hints -------------------------------------------------------------------- */
#sm-controls { display: flex; gap: 14px; align-items: center; font-weight: 950; font-size: 17px; white-space: nowrap; }
#sm-controls .hint { display: flex; gap: 6px; align-items: center; }
#sm-controls .key {
  min-width: 35px; height: 30px; padding: 3px 8px; border-radius: 7px; font-size: 16px;
  border-color: rgba(231, 236, 236, .62); background: rgba(8, 14, 16, .58); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7);
}

/* ---- markers / labels ----------------------------------------------------------- */
.worldLabel { position: absolute; transform: translate(-50%, -50%); will-change: transform, opacity; pointer-events: none; transition: opacity .2s; }
.worldLabel .diamond {
  position: relative; width: 12px; height: 12px; border: 1.5px solid #edf2f2;
  background: rgba(18, 22, 26, .82); transform: rotate(45deg) scale(var(--marker-scale)); transform-origin: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .62), 0 0 6px rgba(255, 255, 255, .10);
}
.worldLabel .diamond::after { content: ""; position: absolute; inset: 3px; border: 1px solid #dce5e5; }
.worldLabel.target .diamond { border-color: rgba(134, 199, 209, .92); background: rgba(14, 29, 34, .90); box-shadow: 0 0 0 1px rgba(0, 0, 0, .72), 0 0 5px rgba(105, 188, 202, .16); }
.worldLabel.target .diamond::after { border-color: rgba(181, 220, 225, .78); }

#sm-navArrow {
  position: absolute; display: none; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 11px solid rgba(115, 194, 207, .86);
  filter: drop-shadow(0 0 2px rgba(85, 170, 184, .22)); opacity: .56;
}
#sm-nameTag {
  position: absolute; display: none; min-width: 82px; height: 27px; padding: 3px 9px 3px 11px;
  background: rgba(12, 23, 28, .78); border: 1px solid rgba(150, 185, 190, .20); border-left: 2px solid rgba(111, 190, 202, .70);
  color: #d9e1e2; font-size: 13px; font-weight: 750; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  white-space: nowrap; transform: translate(10px, -50%) scale(var(--marker-scale)); transform-origin: left center;
}
#sm-crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 50%; transform: translate(-50%, -50%); opacity: .28; }

/* galaxy-level star labels */
.sm-map-label {
  position: absolute; left: 0; top: 0; display: grid; grid-template-columns: 10px auto; grid-template-rows: auto auto;
  align-items: center; gap: 1px 6px; min-width: 52px; padding: 1px 2px;
  color: var(--ink); text-align: left; text-shadow: 0 2px 5px #000;
  border: 0; background: transparent; pointer-events: auto; cursor: pointer; transform-origin: left center;
  font-family: inherit; opacity: .82;
}
.sm-map-label[hidden] { display: none; }
.sm-map-label i {
  --label-color: #fff; grid-row: 1 / -1; width: 6px; height: 6px; margin-left: -5px;
  border-radius: 50%; background: var(--label-color); box-shadow: 0 0 8px var(--label-color);
}
.sm-map-label strong { font-size: 12px; font-weight: 680; line-height: 1.08; white-space: nowrap; }
.sm-map-label small { color: rgba(235, 238, 233, .42); font: 9px/1.1 Consolas, monospace; }
.sm-map-label.current { opacity: 1; }
.sm-map-label.current strong { color: #eaf8fa; font-size: 13px; }
.sm-map-label.selected:not(.current) {
  color: #b9eef5; opacity: 1;
}
.sm-map-label.black-hole {
  color: #ffc88f; opacity: 1;
}
.sm-map-label.black-hole i {
  width: 10px; height: 10px; margin-left: -7px; background: #010203; border: 1.5px solid #ffbd75;
  box-shadow: 0 0 0 1px rgba(255, 91, 26, .18), 0 0 12px rgba(255, 116, 42, .72);
}
.sm-map-label.current::after {
  content: ""; position: absolute; left: 5px; bottom: -9px;
  border: 5px solid transparent; border-bottom: 0; border-top-color: var(--cyan);
}

#sm-hoverMark {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px;
  margin: -11px 0 0 -11px; border: 1.5px solid rgba(180, 220, 230, .85);
  border-radius: 50%; pointer-events: none; z-index: 5; will-change: transform;
  box-shadow: 0 0 10px rgba(180, 220, 230, .45), inset 0 0 6px rgba(180, 220, 230, .25);
}
#sm-hoverMark[hidden] { display: none; }

/* ---- loading --------------------------------------------------------------------- */
#sm-loading { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: #0a1011; transition: opacity .7s; }
#sm-loading.done { opacity: 0; pointer-events: none; }
#sm-loading .loadBox { width: 230px; text-align: center; }
#sm-loading .loadTitle { font-weight: 950; letter-spacing: 5px; }
#sm-loading .loadBar { height: 2px; background: #263436; margin-top: 14px; overflow: hidden; }
#sm-loading .loadBar i { display: block; height: 100%; width: 100%; background: #dfe7e7; transform-origin: left; animation: sm-load 1.4s cubic-bezier(.2, .7, .2, 1); }
@keyframes sm-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- compact / narrow adaptations ------------------------------------------------- */
#starmap-overlay.hudCompact #sm-planetLeft { min-height: 0; }
#starmap-overlay.hudCompact .detailTitle { height: 72px; flex-basis: 72px; padding-top: 10px; }
#starmap-overlay.hudCompact .detailSurvey { height: 54px; flex-basis: 54px; }
#starmap-overlay.hudCompact #sm-planetRight { height: 214px; }
#starmap-overlay.hudCompact .traitText { margin-top: 66px; }
#starmap-overlay.hudCompact .routeActionWrap { flex-basis: 56px; padding-top: 6px; padding-bottom: 8px; }
#starmap-overlay.hudCompact #sm-routeAction { height: 40px; font-size: 16px; }

#starmap-overlay.hudNarrow #sm-leftRail { display: none; }
#starmap-overlay.hudNarrow #sm-leftHud #sm-sysPanel,
#starmap-overlay.hudNarrow #sm-leftHud #sm-planetLeft,
#starmap-overlay.hudNarrow #sm-leftHud #sm-galaxyTools { left: 0; }
#starmap-overlay.hudNarrow #sm-leftHud { width: 370px; }
#starmap-overlay.hudNarrow #sm-controls { gap: 10px; }
#starmap-overlay.hudNarrow #sm-controls .hint:first-child { display: none; }

/* hide the in-flight HUD while the chart owns the screen */
.starmap-open #brand, .starmap-open #compass, .starmap-open #flight-ring, .starmap-open #hud,
.starmap-open #ship-integrity, .starmap-open #resource-strip,
.starmap-open #bottom, .starmap-open #stats, .starmap-open #crosshair,
.starmap-open #vignette, .starmap-open #touch-ui, .starmap-open #walk-hud,
.starmap-open #star-map-btn { display: none !important; }

@media (max-width: 900px) {
  #sm-controls { font-size: 13px; gap: 8px; }
  #sm-controls .key { min-width: 28px; height: 25px; }
  #sm-controls .hint:nth-child(-n+2) { display: none; }
  .sysName { font-size: 19px; }
}