/* Twinkling star-sky behind the universe-map canvases (regions / constellations
   / solar systems). MapGraph appends a .map-stars layer behind its <canvas>;
   #map is the near-black, positioned container both of them fill. The faint
   central glow matches the solar-systems sunmap, so the map reads as "space". */
#map,
#route-map {
    position: relative;
}

/* The main universe map and the route map share the near-black space backdrop
   with a faint central glow, so both read as "space".
   :not(canvas) — in the solar-system sunmap view #map is the <canvas> itself,
   not a container: it must stay transparent so the .map-stars twinkle layer
   behind it shows through (that view's backdrop comes from .map-canvas). */
#map:not(canvas),
#route-map {
    background:
        radial-gradient(circle at 50% 42%, rgba(0, 206, 239, 0.06), transparent 65%),
         #05060a;
}

/* Both canvases sit above the star layer, so the twinkle stays behind the
   drawn graph/route. */
#map canvas,
#route-map canvas {
    position: relative;
    z-index: 1;
}

.map-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 0.5rem;
    pointer-events: none;
}

.map-star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5;
    animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle {
     0%, 100% { opacity: 0.5; }
     50%       { opacity: 0.15; }
}

/* Respect the user's motion preference: a static star field, no twinkle. */
@media (prefers-reduced-motion: reduce) {
     .map-star {
        animation: none;
     }
}

/* ---------------------------------------------------------------------------
   List titles + member links — shared by the graph family (regions /
   constellations / solar systems). The lists sit below the map and are the
   tap/keyboard fallback for the canvas. Coloured via the app's design tokens,
   which Tailwind v4 emits as :root custom properties (see assets/styles/app.css).
   The fallbacks in each var() equal the token values, so there is no flash if
   the main stylesheet loads after this one.
   --------------------------------------------------------------------------- */
.map-list-title {
    display: inline-block;
    margin: 0 0 0.85rem;
    padding: 0.3rem 0.95rem;
    font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-eve-primary, #00ceef);
    background: rgba(0, 206, 239, 0.08);
    border: 1px solid rgba(0, 206, 239, 0.22);
    border-radius: 999px;
}

a[data-region] {
    display: inline-block;
    padding: 0.4rem 0.7rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    color: #c9cdd3;
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

a[data-region]:hover,
a[data-region]:focus-visible {
    color: var(--color-eve-primary, #00ceef);
    background: rgba(0, 206, 239, 0.10);
    border-color: rgba(0, 206, 239, 0.30);
}

a[data-region]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 206, 239, 0.35);
}