.starmap-wrap {
    background: rgba(8, 12, 18, 0.6);
    border: 1px solid rgba(58, 212, 231, 0.15);
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
}

/* Single-body image (Body detail page). Wrapper holds the SVG + atmosphere
   info card stacked vertically. */
.starmap-body-image {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}
.starmap-body-image-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Atmosphere info card — class badge + pressure/temp + composition bar. */
.starmap-body-atmo {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(8, 12, 18, 0.6);
    border: 1px solid rgba(58, 212, 231, 0.10);
    border-radius: 4px;
    font-size: 11px;
    color: #b8c4d0;
}
.starmap-body-atmo .atmo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 6px;
}
.starmap-body-atmo .atmo-class {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 10px;
}
.atmo-class-breathable    { color: #80b8ff; }
.atmo-class-nonbreathable { color: #d4b48c; }
.atmo-class-toxic         { color: #f09070; }
.atmo-class-vacuum        { color: #8a96a4; }
.starmap-body-atmo .atmo-stats {
    color: #7a8fa0;
    font-size: 10px;
    letter-spacing: 0.04em;
}
.starmap-body-atmo .atmo-bar {
    display: flex;
    height: 16px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}
.starmap-body-atmo .atmo-segment {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(8, 12, 18, 0.85);
    font-size: 9px;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    transition: filter 0.2s;
}
.starmap-body-atmo .atmo-segment:hover {
    filter: brightness(1.2);
}

/* Per-gas colors. Air-like = pale blue/cyan, hostile = warm/sulfur,
   inert/heavy = beige/grey. Class names are lowercased + alphanumeric. */
.atmo-gas-n2     { background: #88b8e8; }  /* nitrogen — Earth-like blue */
.atmo-gas-o2     { background: #a8d8f0; }  /* oxygen — pale cyan */
.atmo-gas-co2    { background: #c8a47a; }  /* carbon dioxide — tan */
.atmo-gas-co     { background: #a04020; }  /* carbon monoxide — toxic dark red */
.atmo-gas-so2    { background: #e0c448; }  /* sulfur dioxide — bright yellow */
.atmo-gas-so     { background: #d8a440; }  /* sulfur monoxide — yellow-orange */
.atmo-gas-nh3    { background: #98c898; }  /* ammonia — pale green */
.atmo-gas-ch4    { background: #b8d8a8; }  /* methane — light green */
.atmo-gas-h2     { background: #d8d8e8; }  /* hydrogen — pale lavender */
.atmo-gas-he     { background: #e8e8f0; }  /* helium — very pale */
.atmo-gas-ar     { background: #aab0b8; }  /* argon — pale grey */
.atmo-gas-h2o2   { background: #f0c8d0; }  /* hydrogen peroxide — light pink */
.atmo-gas-nacl   { background: #d8d8d8; }  /* salt — white-grey */
.atmo-gas-sarin  { background: #802020; }  /* sarin — toxic dark red */
.atmo-gas-hcn    { background: #803020; }  /* hydrogen cyanide — toxic dark red */
.atmo-gas-fpm    { background: #505050; }  /* fine particulate — dark grey */

/* Station archetype — themed per system. Background image per archetype
   (Stanton corporate, Pyro derelict, Nyx). Same images cover all stations
   in that system until per-station artwork is available. */
.station-archetype {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background-color: rgba(8, 12, 18, 0.6);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(58, 212, 231, 0.25);
    border-radius: 4px;
    color: #ffffff;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}
.station-archetype-stanton {
    background-image: url('images/archetype-stanton.png');
    border-color: rgba(96, 168, 255, 0.35);
}
.station-archetype-pyro {
    background-image: url('images/archetype-pyro.png');
    border-color: rgba(224, 112, 72, 0.35);
}
.station-archetype-nyx {
    background-image: url('images/archetype-nyx.png');
    border-color: rgba(154, 111, 224, 0.35);
}
.station-archetype-label {
    background: rgba(8, 12, 18, 0.75);
    padding: 4px 8px;
    border-radius: 2px;
    backdrop-filter: blur(2px);
}

/* Per-station image — used when station-{slug}.png exists. Replaces
   the generic station-archetype placeholder with the actual photo
   the user sourced. Sized by inline width/height; image fills the box. */
.starmap-station-image {
    background-color: rgba(8, 12, 18, 0.6);
    border: 1px solid rgba(58, 212, 231, 0.25);
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
}
.starmap-station-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.starmap {
    width: 100%;
    height: auto;
    display: block;
    color: #b8c4d0;
    font-family: 'Electrolize', Arial, sans-serif;
}

.starmap-orbit {
    fill: none;
    stroke: rgba(58, 212, 231, 0.14);
    stroke-width: 0.7;
    stroke-dasharray: 3 4;
    pointer-events: none;
}

.starmap-tick {
    stroke: rgba(58, 212, 231, 0.08);
    stroke-width: 1;
    stroke-dasharray: 2 6;
    pointer-events: none;
}

.starmap-tick-label {
    fill: #5a6c7a;
    font-size: 8px;
    letter-spacing: 0.05em;
    pointer-events: none;
}

.starmap-body {
    /* Subtle rim — keeps tiny system-map bodies legible against the dark
       background without dominating the lit/dark gradient. Big body images
       on detail pages override this with style="stroke:none" since at that
       scale even a faint rim reads as a hard ring around the dark side. */
    stroke: rgba(58, 212, 231, 0.15);
    stroke-width: 1;
    transition: filter 0.2s;
}
.starmap-star     { stroke: none; }
.starmap-star-halo { pointer-events: none; }
/* Fill is set per-element (inline gradient URL or color override). Do not set a default here — it overrides the attribute in SVG specificity. */
.starmap-dwarf    { opacity: 0.95; stroke: rgba(255, 255, 255, 0.18); stroke-width: 0.6; }
.starmap-moon     { stroke: rgba(122, 143, 160, 0.22); stroke-width: 0.5; }

/* Atmosphere halo — sits behind the body, color/thickness/opacity set inline.
   Soft edge via blur so the halo blends rather than reading as a stroke. */
.starmap-atmosphere,
.starmap-temperature {
    pointer-events: none;
}

/* Gas giant ring — thin ellipse around the planet body */
.starmap-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 0.8;
}

/* Jurisdiction subtitle under planet name */
.starmap-sublabel {
    fill: #7a8fa0;
    font-size: 7.5px;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* Hover glow on any body */
.starmap-link:hover .starmap-body {
    filter: brightness(1.2) drop-shadow(0 0 4px rgba(58, 212, 231, 0.5));
}
.starmap-link:hover .starmap-ring {
    stroke: rgba(255, 255, 255, 0.6);
}

.starmap-link { cursor: pointer; }
.starmap-link:hover .starmap-body { filter: brightness(1.4) drop-shadow(0 0 6px rgba(58, 212, 231, 0.8)); }
.starmap-link:hover .starmap-label { opacity: 1; }

/* Selection reticule — corner brackets that frame the selected entity
   without modifying its body/halo/label appearance. Hidden by default;
   shown only when the parent link has .starmap-link-selected. */
.starmap-reticule {
    pointer-events: none;
    display: none;
}
.starmap-reticule line {
    stroke: #ffffff;
    stroke-width: 1;
    stroke-linecap: round;
    /* Direct match defaults to 0.9; ancestor highlights override via
       --ret-opacity (set inline by JS based on lineage distance). */
    opacity: var(--ret-opacity, 0.9);
}
.starmap-link-selected .starmap-reticule {
    display: block;
}

/* Labels are muted by default and brighten on hover. The fill colors set by
   atmosphere-class / kind rules are preserved — opacity does the lift, not
   a color swap, so the per-class semantic stays. The system corner label
   has its own opacity rule and isn't affected. */
.starmap-label {
    fill: #b8c4d0;
    font-size: 10px;
    letter-spacing: 0.05em;
    opacity: 0.65;
    transition: opacity 0.15s;
}
.starmap-label-system { fill: #b8c4d0; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.7; }
.starmap-label-planet { fill: #b8c4d0; font-size: 11px; }
.starmap-label-dwarf  { fill: #b8c4d0; font-size: 10px; opacity: 0.85; }
.starmap-label-moon   { fill: #b8c4d0; font-size: 10px; }
.starmap-label-belt   { fill: #c8956a; font-size: 9px; font-style: italic; }
.starmap-label-station { fill: #a8d8e0; font-size: 9px; font-style: italic; }
.starmap-label-wormhole { fill: #a8c8e8; font-size: 10px; font-style: italic; letter-spacing: 0.04em; }

/* Atmosphere-class label tints — applied alongside -planet/-moon/-dwarf to
   color the body name by its atmosphere category. Defined after the kind
   rules so this fill wins. Vacuum keeps the default neutral grey. */
.starmap-label-atmo-breathable     { fill: #80b8ff; }
.starmap-label-atmo-non-breathable { fill: #d4b48c; }
.starmap-label-atmo-toxic          { fill: #f09070; }
.starmap-label-atmo-vacuum         { fill: #8a96a4; }

.starmap-wormhole {
    transition: filter 0.2s;
}
.starmap-wormhole-aura {
    pointer-events: none;
}
.starmap-wormhole-ring {
    fill: none;
    stroke: #d8eeff;
    stroke-width: 0.4;
    opacity: 0.7;
}
.starmap-wormhole-core {
    fill: #ffffff;
    opacity: 1;
}
.starmap-wormhole-tether {
    stroke: rgba(168, 200, 240, 0.35);
    stroke-width: 0.5;
    stroke-dasharray: 1.5 1.5;
}
.starmap-wormhole-link:hover .starmap-wormhole {
    filter: drop-shadow(0 0 5px rgba(168, 216, 255, 0.95));
}
.starmap-wormhole-link:hover .starmap-label-wormhole {
    fill: #ffffff;
}

.starmap-station-marker {
    transition: filter 0.2s, opacity 0.2s;
    opacity: 0.85;
}
.starmap-station-ring { fill: none; stroke: #ffffff; stroke-width: 0.5; }
.starmap-station-axis { stroke: #ffffff; stroke-width: 0.5; stroke-linecap: round; }

.starmap-station-link:hover .starmap-station-marker {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(58, 212, 231, 0.9));
}
.starmap-station-link:hover .starmap-label-station {
    fill: #3ad4e7;
}

.starmap-connector {
    stroke: rgba(58, 212, 231, 0.15);
    stroke-width: 1;
}

.starmap-belt-dot {
    fill: #a89078;
    stroke: none;
}
.starmap-belt-edge {
    fill: none;
    stroke: rgba(168, 144, 120, 0.14);
    stroke-width: 0.6;
    stroke-dasharray: 2 3;
    pointer-events: none;
}
.starmap-belt-container {
    cursor: pointer;
    fill: transparent;
    pointer-events: all;
}
.starmap-belt-link:hover .starmap-belt-asteroids .starmap-belt-dot {
    fill: #d8c098;
    filter: drop-shadow(0 0 2px rgba(216, 192, 152, 0.5));
}
.starmap-belt-link:hover .starmap-label-belt {
    fill: #d8c098;
}