/* STEP 4A only: separate image layers, existing paths, labels and anchors remain live. */
.app-shell .constellation.jupiter-art {
 background-color:var(--panel-deep);
 background-image:linear-gradient(#061c2626,#061c2626);
 background-size:cover;
 background-position:center;
 border:1px solid #c2924c40;
 border-radius:2px;
 isolation:isolate;
}
.app-shell .jupiter-art .star-node { z-index:1; }
.app-shell .jupiter-art .star-node:has(.art-celestial) { width:180px; }
.app-shell .jupiter-art .art-celestial {
 background:none; padding:0; border:0; border-radius:0; box-shadow:none;
 width:100px; height:100px;
}
.app-shell .jupiter-art .focus-node .art-jupiter { width:180px; height:180px; box-shadow:none; }
.app-shell .jupiter-art .art-celestial img {
 display:block; width:100%; height:100%; object-fit:contain;
 background:transparent; border-radius:0; filter:none;
 /* Browser downsampling preserves fine printed texture; do not force coarse nearest-neighbour. */
 image-rendering:auto;
}
.app-shell .jupiter-art .star-node strong,.app-shell .jupiter-art .star-node small {
 background:#061c26dc; padding:2px 5px; border-radius:2px;
 color:var(--ink); max-width:175px;
}
.app-shell .jupiter-art>svg { stroke:#a4b7a1b3; }
.app-shell .jupiter-art>svg ellipse { stroke:#bca47755; }
@media(max-width:760px) {
 .app-shell .jupiter-art .star-node:has(.art-celestial) { width:120px; }
 .app-shell .jupiter-art .art-celestial { width:80px; height:80px; }
 .app-shell .jupiter-art .focus-node .art-jupiter { width:120px; height:120px; }
 .app-shell .jupiter-art .star-node strong,.app-shell .jupiter-art .star-node small { max-width:120px; }
}

/* STEP 4D-2: only the central map while Europa is selected. */
.app-shell .constellation:is(.europa-map,.jupiter-map) { height:570px; background:linear-gradient(#061c26c9,#061c26df) center/cover; isolation:isolate; }
:is(.europa-map,.jupiter-map)>svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; fill:none; stroke:#7eaaa4; stroke-width:.25; }
:is(.europa-map,.jupiter-map) .europa-node { position:absolute; left:var(--node-x); top:var(--node-y); transform:translate(-50%,-50%); display:grid; justify-items:center; gap:4px; width:150px; padding:6px 3px; color:var(--ink); text-align:center; text-decoration:none; border:1px solid transparent; border-radius:4px; background:#061c26c9; }
:is(.europa-map,.jupiter-map) .selected-node { border-color:var(--mint); }
:is(.europa-map,.jupiter-map) .europa-node strong { font-size:12px; line-height:1.5; overflow-wrap:anywhere; font-weight:500; }
:is(.europa-map,.jupiter-map) .europa-node :is(.node-evidence,.node-state,.node-access,small) { font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
:is(.europa-map,.jupiter-map) .node-evidence { color:#c9d8d4; }
:is(.europa-map,.jupiter-map) .node-state,:is(.europa-map,.jupiter-map) small { color:var(--muted); }
:is(.europa-map,.jupiter-map) .node-access { color:var(--mint); }
:is(.europa-map,.jupiter-map) .europa-thumbnail { position:relative; display:block; width:76px; height:76px; border-radius:50%; border:1px solid #52696a; }
:is(.europa-map,.jupiter-map) .selected-node .europa-thumbnail { width:130px; height:130px; border-color:var(--mint); }
:is(.europa-map,.jupiter-map) .europa-thumbnail img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:auto; }
:is(.europa-map,.jupiter-map) .environment-node .europa-thumbnail { width:104px; height:64px; border-radius:3px; overflow:hidden; }
:is(.europa-map,.jupiter-map) .environment-node .europa-thumbnail img { object-fit:cover; }
:is(.europa-map,.jupiter-map) .inferred .europa-thumbnail { border-style:dashed; border-color:#9db6c7; }
:is(.europa-map,.jupiter-map) .fictional .europa-thumbnail { border-style:double; border-width:3px; border-color:#c2924c; }
:is(.europa-map,.jupiter-map) .fictional .europa-thumbnail img { object-position:center; transform:scale(1.85); transform-origin:12% 72%; }
:is(.europa-map,.jupiter-map) .inferred .europa-thumbnail img { object-position:center; transform:scale(1.85); transform-origin:76% 16%; }
:is(.europa-map,.jupiter-map) .is-visited:not(.selected-node) .europa-thumbnail { border-color:#52696a; }
:is(.europa-map,.jupiter-map) .is-complete .europa-thumbnail { outline:none; }
:is(.europa-map,.jupiter-map) .europa-thumbnail i { position:absolute; right:-3px; bottom:0; font-size:12px; font-style:normal; background:var(--panel-deep); color:var(--mint); padding:1px 3px; border-radius:3px; }
:is(.europa-map,.jupiter-map) .is-locked .europa-thumbnail img { opacity:.4; }
:is(.europa-map,.jupiter-map) .europa-node:hover { border-color:var(--mint); }
@media(max-width:1365px) {
 .app-shell .constellation:is(.europa-map,.jupiter-map) { height:700px; }
 :is(.europa-map,.jupiter-map) .desktop-map-lines { display:none; }
 :is(.europa-map,.jupiter-map) .mobile-map-lines { display:block; }
 :is(.europa-map,.jupiter-map) .europa-node { left:var(--small-x); top:var(--small-y); width:136px; }
 :is(.europa-map,.jupiter-map) .selected-node .europa-thumbnail { width:120px; height:120px; }
 :is(.europa-map,.jupiter-map)>svg { stroke-width:.4; }
}

/* STEP 4D-3: compact labels, selected mint border and separate keyboard focus. */
:is(.europa-map,.jupiter-map)>svg { z-index:0; }
:is(.europa-map,.jupiter-map) .europa-node { z-index:1; background:#081f2a; }
:is(.europa-map,.jupiter-map) .selected-node .europa-thumbnail { border-color:#52696a; box-shadow:none; }
:is(.europa-map,.jupiter-map) .node-status { display:flex; flex-wrap:wrap; justify-content:center; gap:3px 8px; font-size:10px; line-height:1.5; }
:is(.europa-map,.jupiter-map) .europa-node:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
:is(.europa-map,.jupiter-map) .europa-node:not(.selected-node):hover { border-color:var(--line); }

/* Jupiter remains the visual focus; source PNGs and their alpha padding are unchanged. */
.jupiter-map .selected-node .europa-thumbnail { width:150px; height:150px; }
.jupiter-map .selected-node { width:170px; }
@media(max-width:1365px) { .jupiter-map .selected-node .europa-thumbnail { width:140px; height:140px; } .jupiter-map .selected-node { width:158px; } }