/* ==========================================================================
   STAR MAP
   The scrolling galaxy view. The map is an SVG whose viewBox is moved
   around by the camera in js/ui/screen-map.js, so the player only ever
   sees a small window onto a very large galaxy.

   Font sizes for map labels are set INLINE by the renderer in world
   units, so that text keeps a constant on-screen size at every zoom
   level. The sizes here are only fallbacks.
   ========================================================================== */

/* Container that wraps the SVG star map plus all its overlays. */
.map-container {
position: relative;
flex: 1;
min-height: 600px;
height: 100%;
overflow: hidden;
}

/* The SVG itself: black background with nebula gradients. */
.galaxy-map {
width: 100%;
height: 100%;
display: block;
background:
radial-gradient(ellipse at 18% 35%, rgba(30, 40, 80, 0.25) 0%, transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(60, 30, 50, 0.15) 0%, transparent 55%),
#000;
min-height: 600px;
cursor: grab;
touch-action: none;
}
.galaxy-map.dragging { cursor: grabbing; }
.starfield circle { filter: blur(0.2px); }

/* --------------------------------------------------------------------------
   JUMP LANES
   -------------------------------------------------------------------------- */
.route-line {
stroke: rgba(255, 255, 255, 0.28);
fill: none;
}
/* A lane that runs off into systems the player has not charted yet.
   Drawn as a short stub so unexplored directions are still visible. */
.lane-stub {
stroke: rgba(255, 255, 255, 0.14);
stroke-dasharray: 2 3;
fill: none;
}
/* The route the ship is currently flying / would fly. */
.route-line.active {
stroke: #ffaa00;
filter: drop-shadow(0 0 5px #ffaa00);
animation: routePulse 1.2s linear infinite;
}
@keyframes routePulse {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -20; }
}

/* Ring showing how far the ship can jump on its current fuel. */
.range-ring {
fill: none;
stroke: rgba(0, 221, 255, 0.35);
stroke-dasharray: 6 6;
pointer-events: none;
}

/* --------------------------------------------------------------------------
   STAR SYSTEM NODES
   -------------------------------------------------------------------------- */
.system-node { cursor: pointer; }
.system-node .node-circle {
fill: #ffffff;
stroke: rgba(0, 255, 136, 0.8);
transition: fill 0.15s;
}
.system-node:hover .node-circle { fill: #00ff88; filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.8)); }
.system-node.hub .node-circle { fill: #00ddff; stroke: #66e0ff; }
.system-node.deadend .node-circle { fill: #ff8800; stroke: #ffaa55; }

/* Scanned from a distance but never visited: dimmer, hollow. */
.system-node.scanned .node-circle { fill: #667799; stroke: #7788aa; }
.system-node.scanned .node-label { fill: #99aacc; }
/* Visited at least once. */
.system-node.visited .node-circle { fill: #ffffff; stroke: #00ff88; }
/* Out of jump range on current fuel. */
.system-node.outofrange .node-circle { opacity: 0.55; }

/* The system the player is in - yellow glowing pulse. */
.node-current-glow {
fill: none;
stroke: #ffdd00;
filter: drop-shadow(0 0 8px #ffdd00);
animation: currentPulse 2s infinite;
pointer-events: none;
}
@keyframes currentPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Mission indicator tick marks: red = available job, blue = accepted job. */
.line-accepted { stroke: #00ddff; filter: drop-shadow(0 0 4px #00ddff); stroke-linecap: round; }
.line-available { stroke: #ff4466; filter: drop-shadow(0 0 4px #ff4466); stroke-linecap: round; }

/* Yellow mission path shown when viewing a mission on the map. */
.mission-path-line {
stroke: #ffdd00;
stroke-width: 2.5;
stroke-dasharray: 8 4;
filter: drop-shadow(0 0 4px rgba(255, 221, 0, 0.8));
animation: missionDash 1s linear infinite;
}
@keyframes missionDash { to { stroke-dashoffset: -12; } }

/* Labels. Size is set inline by the renderer; keep them small and quiet. */
.node-label {
fill: #ffffff;
font-family: 'Orbitron', sans-serif;
font-weight: 600;
letter-spacing: 0.5px;
pointer-events: none;
paint-order: stroke;
stroke: rgba(0, 0, 0, 0.85);
stroke-width: 0.6px;
stroke-linejoin: round;
}
.node-sublabel {
fill: #88ccaa;
font-family: 'IBM Plex Mono', monospace;
pointer-events: none;
paint-order: stroke;
stroke: rgba(0, 0, 0, 0.85);
stroke-width: 0.5px;
}
.system-node.current .node-label { fill: #ffdd00; }
.system-node.selected .node-circle { stroke: #ff4466; filter: drop-shadow(0 0 6px #ff4466); }
.system-node.selected .node-label { fill: #ff8899; }

/* --------------------------------------------------------------------------
   WORMHOLES
   -------------------------------------------------------------------------- */
.wormhole-ring {
fill: none;
stroke: #cc66ff;
stroke-dasharray: 3 2;
filter: drop-shadow(0 0 5px #cc66ff);
animation: wormholeSpin 6s linear infinite;
pointer-events: none;
transform-box: fill-box;
transform-origin: center;
}
@keyframes wormholeSpin { to { transform: rotate(360deg); } }
.wormhole-ring.unstable { stroke: #ff66aa; animation-duration: 2.2s; }
.wormhole-glyph { fill: #cc66ff; pointer-events: none; text-anchor: middle; }
.wormhole-glyph.unstable { fill: #ff66aa; }
/* Dashed link between the two ends of a known stable wormhole. */
.wormhole-link {
stroke: rgba(204, 102, 255, 0.4);
stroke-dasharray: 5 5;
fill: none;
pointer-events: none;
}

/* --------------------------------------------------------------------------
   SHIP MARKER (the graphic that flies between systems)
   Swap the artwork in js/ui/map-ship.js - these rules just make it glow.
   -------------------------------------------------------------------------- */
.ship-marker { pointer-events: none; }
.ship-marker .ship-body { fill: #ffdd00; stroke: #fff8cc; }
.ship-marker .ship-glow { fill: rgba(255, 221, 0, 0.18); }
.ship-trail { stroke: #ffdd00; fill: none; opacity: 0.55; stroke-linecap: round; }

/* --------------------------------------------------------------------------
   MAP HUD - zoom buttons, coordinates, recenter
   -------------------------------------------------------------------------- */
.map-hud {
position: absolute; top: 12px; left: 12px;
display: flex; align-items: center; gap: 6px;
z-index: 12; flex-wrap: wrap;
}
.map-hud-btn {
background: rgba(0, 20, 14, 0.85);
border: 1px solid #00aa66;
color: #00ff88;
width: 30px; height: 30px;
border-radius: 4px; cursor: pointer;
font-family: 'IBM Plex Mono', monospace;
font-size: 1em; line-height: 1; padding: 0;
display: flex; align-items: center; justify-content: center;
}
.map-hud-btn:hover { background: rgba(0, 60, 40, 0.9); border-color: #00ff88; }
.map-hud-btn.wide { width: auto; padding: 0 10px; font-size: 0.8em; letter-spacing: 1px; }
.map-hud-btn.active { background: rgba(0, 100, 60, 0.9); border-color: #00ff88; }
.map-readout {
background: rgba(0, 8, 18, 0.8);
border: 1px solid #1a4a3a;
color: #66aaff;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.72em;
padding: 5px 9px; border-radius: 4px;
letter-spacing: 1px; white-space: nowrap;
}
.map-readout .rd-label { color: #446688; }
.map-readout .rd-value { color: #88ccaa; }

/* Legend, bottom-right. */
.map-legend-box {
position: absolute; right: 12px; bottom: 12px;
background: rgba(0, 8, 18, 0.8);
border: 1px solid #1a4a3a; border-radius: 4px;
padding: 8px 10px; z-index: 11;
font-family: 'IBM Plex Mono', monospace; font-size: 0.7em;
color: #88ccaa; line-height: 1.7; letter-spacing: 0.5px;
}
.map-legend-box .lg-row { white-space: nowrap; }

/* --------------------------------------------------------------------------
   HOVER TOOLTIP - quick facts, follows the mouse
   -------------------------------------------------------------------------- */
.map-tooltip {
position: absolute;
z-index: 30;
pointer-events: none;
background: rgba(0, 8, 18, 0.96);
border: 1px solid #00ddff;
border-radius: 5px;
padding: 7px 10px;
min-width: 130px; max-width: 250px;
box-shadow: 0 0 14px rgba(0, 221, 255, 0.35);
font-family: 'IBM Plex Mono', monospace;
font-size: 0.75em;
color: #88ccaa;
line-height: 1.55;
display: none;
}
.map-tooltip.visible { display: block; }
.map-tooltip .tt-name {
font-family: 'Orbitron', sans-serif;
color: #00ff88; font-weight: 700;
font-size: 1.1em; letter-spacing: 1px;
margin-bottom: 3px;
}
.map-tooltip .tt-row { white-space: nowrap; }
.map-tooltip .tt-key { color: #446688; }
.map-tooltip .tt-warn { color: #ffaa00; }
.map-tooltip .tt-bad { color: #ff4466; }
.map-tooltip .tt-wh { color: #cc66ff; }
.map-tooltip .tt-hint { color: #446688; font-size: 0.9em; margin-top: 3px; font-style: italic; }

/* --------------------------------------------------------------------------
   GALAXY OVERVIEW (minimap) - shows the whole galaxy, tiny
   -------------------------------------------------------------------------- */
.minimap {
position: absolute; right: 12px; top: 12px;
width: 170px; height: 170px;
background: rgba(0, 4, 10, 0.9);
border: 1px solid #1a4a3a;
border-radius: 4px;
z-index: 11;
overflow: hidden;
}
.minimap svg { width: 100%; height: 100%; display: block; }
.minimap .mm-dot { fill: #33ccaa; }
.minimap .mm-visited { fill: #00ff88; }
.minimap .mm-wh { fill: #cc66ff; }
.minimap .mm-ship { fill: #ffdd00; stroke: #fff; stroke-width: 0.6; }
.minimap .mm-view { fill: none; stroke: #ffdd00; stroke-width: 1; opacity: 0.8; }
.minimap .mm-frame { fill: none; stroke: #1a4a3a; stroke-width: 1; }
.minimap-title {
position: absolute; top: 0; left: 0; right: 0;
background: rgba(0, 8, 18, 0.85);
color: #446688; font-family: 'IBM Plex Mono', monospace;
font-size: 0.62em; letter-spacing: 1px;
padding: 2px 5px; text-align: center;
pointer-events: none;
}

/* --------------------------------------------------------------------------
   MISSION BACK BUTTON (top-left, below the +/- zoom buttons)
   -------------------------------------------------------------------------- */
.mission-back-btn {
  position: absolute;
  top: 52px;
  left: 12px;
  z-index: 13;
  background: rgba(0, 20, 14, 0.9);
  border: 1px solid #66aaff;
  color: #99ccff;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8em;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: all 0.2s;
}
.mission-back-btn:hover {
  background: rgba(0, 40, 80, 0.9);
  border-color: #66aaff;
  box-shadow: 0 0 10px rgba(102, 170, 255, 0.4);
}

/* --------------------------------------------------------------------------
   MISSION NAME BOX (below the back button, top-left — taller, left-aligned,
   does not block engage button at bottom-left or detail panel on the right)
   -------------------------------------------------------------------------- */
.mission-name-box {
  position: absolute;
  top: 90px;
  left: 12px;
  z-index: 10;
  background: rgba(0, 8, 18, 0.9);
  border: 1px solid #ffdd00;
  border-radius: 6px;
  padding: 12px 16px;
  max-width: 280px;
  min-width: 200px;
  text-align: left;
  box-shadow: 0 0 15px rgba(255, 221, 0, 0.25);
  pointer-events: none;
}
.mission-name-box .mnb-title {
  color: #ffdd00;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.7;
  word-wrap: break-word;
}
.mission-name-box .mnb-target {
  color: #88ccaa;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8em;
  margin-top: 6px;
  line-height: 1.6;
}
.mission-name-box .mnb-reward {
  color: #ffdd00;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78em;
  margin-top: 4px;
  font-weight: 700;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   SYSTEM DETAIL PANEL (opens on click)
   -------------------------------------------------------------------------- */
.location-popup {
position: absolute;
top: 195px;
right: 12px;
width: 290px;
max-height: calc(100% - 210px);
background: rgba(0, 8, 18, 0.95);
border: 1px solid #00ddff;
border-radius: 8px;
padding: 14px;
overflow-y: auto;
z-index: 10;
box-shadow: 0 0 25px rgba(0, 221, 255, 0.4), inset 0 0 30px rgba(0, 100, 150, 0.1);
backdrop-filter: blur(4px);
}
.popup-header { position: relative; border-bottom: 1px solid #00aa66; padding-bottom: 10px; margin-bottom: 12px; }
.popup-header h3 { color: #00ff88; font-family: 'Orbitron', sans-serif; font-size: 1.1em; letter-spacing: 2px; margin: 0 0 4px 0; text-shadow: 0 0 6px rgba(0, 255, 136, 0.4); }
.popup-desc { color: #88ccaa; font-size: 0.8em; font-style: italic; margin: 0; }
.popup-close { position: absolute; top: -6px; right: -6px; background: rgba(20, 0, 0, 0.9); border: 1px solid #ff4466; color: #ff4466; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.85em; line-height: 1; padding: 0; font-family: 'IBM Plex Mono', monospace; }
.popup-close:hover { background: rgba(255, 68, 102, 0.3); color: #fff; }
.popup-stats { color: #88ccaa; font-size: 0.78em; line-height: 1.6; margin-bottom: 10px; }
.popup-stats .ps-key { color: #446688; }
.popup-locations { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.location-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(0, 40, 25, 0.4); border: 1px solid #006644; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.location-item:hover { background: rgba(0, 80, 50, 0.5); border-color: #00ff88; transform: translateX(2px); }
.location-item.selected { background: rgba(255, 68, 102, 0.15); border-color: #ff4466; box-shadow: 0 0 8px rgba(255, 68, 102, 0.3); }
.location-item.current { border-color: #ffdd00; background: rgba(255, 221, 0, 0.08); }
.loc-circle { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #88ccaa; background: rgba(0, 30, 20, 0.6); flex-shrink: 0; transition: all 0.2s; }
.loc-circle.selected { border-color: #ff4466; background: #ff4466; box-shadow: 0 0 8px #ff4466; }
.loc-info { flex: 1; min-width: 0; }
.loc-name { color: #00ff88; font-weight: 700; font-size: 0.9em; letter-spacing: 0.5px; }
.loc-type { color: #66aaff; font-size: 0.72em; letter-spacing: 0.5px; }
.popup-footer { border-top: 1px solid #00aa66; padding-top: 10px; color: #88ccaa; font-size: 0.85em; text-align: center; letter-spacing: 0.5px; }
.popup-footer .footer-current { color: #00ff88; font-weight: 700; }
.popup-unknown { color: #667799; font-size: 0.8em; font-style: italic; text-align: center; padding: 12px 4px; }

/* Mission listings inside the system detail popup. */
.popup-missions { border-top: 1px solid #00aa66; padding-top: 10px; margin-bottom: 12px; }
.pm-title { font-family: 'Orbitron', sans-serif; font-size: 0.82em; letter-spacing: 1px; margin-bottom: 6px; }
.pm-item { background: rgba(0, 40, 25, 0.4); border: 1px solid #006644; border-radius: 4px; padding: 7px 9px; margin-bottom: 5px; }
.pm-name { color: #00ff88; font-weight: 700; font-size: 0.85em; letter-spacing: 0.5px; }
.pm-meta { color: #88ccaa; font-size: 0.75em; margin-top: 2px; }

/* Wormhole call-to-action inside the detail panel. */
.wh-panel {
border: 1px solid #cc66ff; border-radius: 5px;
background: rgba(60, 20, 90, 0.35);
padding: 9px 10px; margin-bottom: 11px;
}
.wh-panel .wh-title { color: #dd99ff; font-family: 'Orbitron', sans-serif; font-size: 0.85em; letter-spacing: 1px; margin-bottom: 4px; }
.wh-panel .wh-desc { color: #bb99cc; font-size: 0.75em; line-height: 1.5; margin-bottom: 7px; }
.btn-wormhole {
background: linear-gradient(180deg, #7722aa 0%, #4a1170 100%);
border: 1px solid #cc66ff; color: #fff;
width: 100%; padding: 7px; border-radius: 4px; cursor: pointer;
font-family: 'IBM Plex Mono', monospace; font-size: 0.82em; letter-spacing: 1px;
}
.btn-wormhole:hover:not(:disabled) { background: linear-gradient(180deg, #9933cc 0%, #5f1a8c 100%); box-shadow: 0 0 12px rgba(204, 102, 255, 0.6); }
.btn-wormhole:disabled { opacity: 0.45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   ENGAGE ENGINES button + flight status banner
   -------------------------------------------------------------------------- */
.engage-btn {
position: absolute; left: 20px; bottom: 30px;
font-family: 'Orbitron', sans-serif;
font-size: 1.15em; padding: 14px 28px;
background: linear-gradient(180deg, #cc2222 0%, #881111 100%);
border: 2px solid #ff4466; color: #fff; border-radius: 6px;
cursor: pointer; letter-spacing: 3px; z-index: 10;
box-shadow: 0 0 20px rgba(255, 68, 102, 0.5);
animation: engagePulse 1.5s infinite;
text-shadow: 0 0 6px rgba(255, 100, 100, 0.8);
font-weight: 700;
}
@keyframes engagePulse { 0%, 100% { box-shadow: 0 0 20px rgba(255, 68, 102, 0.5); transform: scale(1); } 50% { box-shadow: 0 0 40px rgba(255, 68, 102, 0.9); transform: scale(1.04); } }
.engage-btn:hover:not(:disabled) { background: linear-gradient(180deg, #ee3333 0%, #aa1818 100%); }
.engage-btn:disabled { opacity: 0.4; cursor: not-allowed; animation: none; }
/* Green variant: Accept Mission (shown instead of Engage Engines for
   Job Board missions viewed on the map). */
.engage-btn.accept {
  background: linear-gradient(180deg, #00aa44 0%, #007722 100%);
  border-color: #00ff88;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.8);
  animation: acceptPulse 1.5s infinite;
}
@keyframes acceptPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.5); transform: scale(1); }
  50% { box-shadow: 0 0 40px rgba(0, 255, 136, 0.9); transform: scale(1.04); }
}
.engage-btn.accept:hover:not(:disabled) { background: linear-gradient(180deg, #00cc55 0%, #009933 100%); }
.engage-btn-info { position: absolute; left: 20px; bottom: 90px; background: rgba(0, 8, 18, 0.85); border: 1px solid #ff4466; color: #ff8899; padding: 6px 12px; border-radius: 4px; font-size: 0.8em; z-index: 10; letter-spacing: 1px; }
/* Green variant: shown with the Accept Mission button for Job Board missions. */
.engage-btn-info.accept {
  border-color: #00ff88;
  color: #88ffaa;
  background: rgba(0, 25, 12, 0.85);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}
/* Secondary button: fly as far along the route as fuel allows. */
.partial-btn {
position: absolute; left: 20px; bottom: 128px; z-index: 10;
background: linear-gradient(180deg, #0066cc 0%, #004499 100%);
border: 1px solid #66aaff; color: #fff;
padding: 7px 14px; border-radius: 4px; cursor: pointer;
font-family: 'IBM Plex Mono', monospace; font-size: 0.8em; letter-spacing: 1px;
}
.partial-btn:hover { background: linear-gradient(180deg, #0077ee 0%, #0055bb 100%); box-shadow: 0 0 10px rgba(102, 170, 255, 0.5); }

/* Status strip shown while the ship is flying across the map. */
.flight-banner {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: 24px; z-index: 20;
background: rgba(0, 8, 18, 0.92);
border: 1px solid #ffdd00; border-radius: 6px;
padding: 9px 18px; min-width: 260px; text-align: center;
box-shadow: 0 0 20px rgba(255, 221, 0, 0.3);
font-family: 'IBM Plex Mono', monospace;
}
.flight-banner .fb-title { color: #ffdd00; font-family: 'Orbitron', sans-serif; font-size: 0.9em; letter-spacing: 2px; margin-bottom: 4px; }
.flight-banner .fb-status { color: #88ccaa; font-size: 0.78em; min-height: 16px; }
.flight-banner .fb-bar { height: 4px; background: rgba(0, 50, 30, 0.7); border-radius: 2px; overflow: hidden; margin-top: 7px; }
.flight-banner .fb-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ffaa00, #ffdd00); box-shadow: 0 0 8px #ffdd00; }
.flight-banner .fb-skip { color: #446688; font-size: 0.68em; margin-top: 5px; letter-spacing: 1px; }

/* The map screen fills the display area with no padding. */
.main-display.map-mode { padding: 0; overflow: hidden; display: flex; }