/* assets/css/star_map.css
   Sternenkarte einer Kampagne (docs/41_Kampagnen_Achievements.md, „Sternenkarte"), gemeinsam für
   den Kampagnen-Editor und die Ansicht „Campaigns". Das Aussehen stammt aus dem abgestimmten Mockup
   (docs/mockups/sternenkarte/). Maße und die Farben der Zustände setzt `StarMap` als Variablen
   `--sm-…` am Element der Karte; sie stehen in js/config/CampaignConfig.js. Feste Farben kommen
   aus den Tokens von global.css. */

/* Der Bereich hat das Seitenverhältnis der Karte. Dahinter liegt das feste Hintergrundbild des
   Containers; es bewegt sich nicht mit. `isolation` hält den Blendmodus des Kartenbilds im Bereich. */
.starmap {
    position: relative;
    width: 100%;
    aspect-ratio: var(--sm-aspect);
    overflow: hidden;
    isolation: isolate;
    background: var(--clr-canvas-bg) url('../images/ui/campaign_background.webp') center / cover no-repeat;
    color: var(--clr-text-light);
    font-family: var(--font-regular);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Wo der Bereich eine andere Form hat (Editor im Split-Screen), füllt die Karte ihn ganz aus */
.starmap.starmap-fill {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
}

.starmap.is-dragging {
    cursor: grabbing;
}

.starmap:focus-visible {
    outline: 2px solid var(--clr-primary-main);
    outline-offset: -2px;
}

/* Optionales Hintergrundbild der Karte: Lage und Größe setzt das Skript */
.starmap-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    max-width: none;
    transform-origin: 0 0;
    mix-blend-mode: var(--sm-bg-blend);
    pointer-events: none;
}

/* Linien entlang der Freischaltungen, in der Farbe von „aktuell" */
.starmap-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.starmap-lines line {
    stroke: var(--sm-clr-current);
    stroke-width: var(--sm-line-width);
    stroke-opacity: var(--sm-line-opacity);
}

.starmap-lines line.is-dashed {
    stroke-dasharray: var(--sm-line-dash);
}

/* Lichtband auf den Linien: dieselbe Linie noch einmal, ihr Strich ist der laufende Verlauf
   (das Skript setzt ihn als `stroke`); additiv gemischt hellt er nur die Linie auf. */
.starmap-lines line.is-sweep {
    stroke-opacity: var(--sm-sweep-strength);
    mix-blend-mode: plus-lighter;
}

.starmap-lines stop {
    stop-color: var(--clr-text-light);
}

.starmap-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Namen der Sterne: eigene, vorderste Ebene, damit kein Stern einen Namen verdeckt */
.starmap-names {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   Stern: ein Knopf, dessen Mitte auf der Position des Sterns liegt.
   Der Kreis ist um den Außenring größer als das Symbol; der Ring ist so stark wie die Linien
   im Symbol, damit beides wie ein Zeichen wirkt.
   --------------------------------------------------------------------- */
.star {
    --star-scale: 1;
    --star-size: calc(var(--sm-icon-size) * (1 + 2 * var(--sm-icon-line-ratio)) * var(--star-scale));
    position: absolute;
    left: 0;
    top: 0;
    width: var(--star-size);
    height: var(--star-size);
    margin: calc(var(--star-size) / -2) 0 0 calc(var(--star-size) / -2);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.star:focus-visible {
    outline: none;
}

.star:focus-visible .star-disc {
    outline: 2px solid var(--clr-text-light);
    outline-offset: 3px;
}

/* Kreis in der Farbe des Zustands, darauf das dunkel gefüllte Symbol: Zu sehen sind die Linien
   des Symbols und der Außenring in der Zustandsfarbe. Der Stern leuchtet in seiner Farbe. */
.star-disc {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--star-color);
    box-shadow: 0 0 var(--sm-glow-size) var(--sm-glow-spread) var(--star-color);
    color: var(--sm-clr-icon);
    font-size: calc(var(--sm-icon-size) * var(--star-scale));
}

/* Inaktive, nicht mehr erreichbare und Deko-Sterne sehen gleich aus: etwas kleiner */
.star[data-state="inactive"] {
    --star-scale: var(--sm-inactive-scale);
}

/* Name über dem Stern; die Lage (`--x`, `--y`) setzt das Skript */
.star-name {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(calc(var(--x) - 50%), calc(var(--y) - 100% - var(--sm-name-distance)));
    font-family: var(--font-narrow);
    font-size: var(--sm-name-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sm-clr-name);
    text-shadow: 0 0 0.3rem var(--clr-canvas-bg), 0 0 0.3rem var(--clr-canvas-bg);
}

/* Punkte der Bewertung: auf einem Bogen unter dem Stern, je Stufe einer mehr */
.star-dots i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--sm-dot-size);
    height: var(--sm-dot-size);
    margin: calc(var(--sm-dot-size) / -2) 0 0 calc(var(--sm-dot-size) / -2);
    border-radius: 50%;
    background: var(--star-color);
    transform: rotate(calc(var(--a) * 1deg)) translateY(var(--sm-dot-distance));
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   Lichtband auf Symbol und Punkten: ein Verlauf transparent → weiß → transparent, additiv gemischt.
   `--sm-sweep-pos` ist die Lage des Bands auf seiner Achse (setzt das Skript in jedem Bild),
   `--s` die Lage des Sterns auf derselben Achse; aus dem Abstand `--o` ergibt sich der Ausschnitt
   des Bands, der auf dem Stern liegt. So wirkt es wie ein durchgehendes Band über die Karte.
   Im Stern liegt der Verlauf zwischen dem farbigen Kreis und dem dunklen Symbol: Er hellt nur die
   farbigen Linien und den Außenring auf, die dunklen Flächen des Symbols bleiben dunkel.
   --------------------------------------------------------------------- */
.starmap .star {
    --o: calc(var(--sm-sweep-pos, -100000px) - var(--s));
}

/* Das Symbol liegt über dem Verlauf */
.star-disc i {
    position: relative;
}

.starmap .star-disc::before,
.starmap .star-dots i::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(to right, transparent, var(--clr-text-light), transparent) no-repeat;
    background-size: var(--sm-sweep-width) 100%;
    background-position: calc(var(--box) / 2 + var(--o) - var(--sm-sweep-width) / 2) 0;
    opacity: var(--sm-sweep-strength);
    mix-blend-mode: plus-lighter;
    pointer-events: none;
}

/* Im Stern folgt der Verlauf der Richtung des Bands; die Punkte sind dafür zu klein */
.starmap .star-disc::before {
    --box: var(--star-size);
    transform: rotate(var(--sm-sweep-angle));
}

.starmap .star-dots i::after {
    --box: var(--sm-dot-size);
}

/* Auswahlring: kleine Dreiecke, die auf den Stern zeigen und sich langsam drehen */
.star-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    display: none;
    animation: sm-spin var(--sm-ring-seconds) linear infinite;
    pointer-events: none;
}

.star.is-selected .star-ring {
    display: block;
}

.star-ring i {
    position: absolute;
    width: var(--sm-ring-triangle-size);
    height: var(--sm-ring-triangle-size);
    margin: calc(var(--sm-ring-triangle-size) / -2) 0 0 calc(var(--sm-ring-triangle-size) / -2);
    background: var(--sm-clr-ring);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: rotate(calc(var(--k) * 1turn / var(--n))) translateY(calc(var(--sm-ring-radius) * -1));
}

/* „Next Operation": ein Kreis, der vom Stern nach außen pulsiert */
.star-pulse {
    position: absolute;
    inset: 0;
    display: none;
    border: 2px solid var(--star-color);
    border-radius: 50%;
    animation: sm-pulse var(--sm-pulse-seconds) ease-out infinite;
    pointer-events: none;
}

.star.is-next .star-pulse {
    display: block;
}

@keyframes sm-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes sm-pulse {
    from {
        transform: scale(1);
        opacity: 0.9;
    }

    to {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* ---------------------------------------------------------------------
   Nur im Editor: Schloss an gesperrten Sternen, Rahmen der Grundansicht der Spieler
   --------------------------------------------------------------------- */
.star-lock {
    position: absolute;
    right: -0.45rem;
    bottom: -0.45rem;
    display: none;
    font-size: 0.7rem;
    color: var(--clr-text-light);
    text-shadow: 0 0 0.2rem var(--clr-canvas-bg), 0 0 0.2rem var(--clr-canvas-bg);
    pointer-events: none;
}

.star.is-locked .star-lock {
    display: block;
}

.starmap.is-editable .star:not(.is-locked) {
    cursor: move;
}

.starmap-frame {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    box-sizing: border-box;
    border: 1px dashed var(--clr-text-light);
    opacity: 0.45;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   Legende unter der Karte (Ansicht „Campaigns")
   --------------------------------------------------------------------- */
.starmap-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    box-sizing: border-box;
    padding: 0.6rem 0.9rem 0.9rem;
    background: var(--clr-shade-55);
    color: var(--clr-text-light);
    font-size: 0.85rem;
}

.starmap-legend-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Die Sterne der Legende stehen im Textfluss statt auf der Karte */
.starmap-legend .star {
    position: relative;
    flex: none;
    margin: 0 0 0.6rem;
    cursor: default;
}