/* ===== SoulKeeper - Seelenpfad (Level-Fortschrittsanzeige) =============
   Bewusst KEINE normale Webseiten-Navigation (keine Buttons-in-einer-Reihe-
   Optik) - eher wie eine alte Karte/ein Pfad durch die Unterwelt: vertikale
   Kette aus Stationen, durch eine gestrichelte Linie verbunden, gesperrte
   Stationen ausgegraut mit Schloss-Symbol. Sitzt im selben .panel wie
   Highscore/Settings/Jukebox (siehe css/menues.css), hier nur der Inhalt
   der Liste selbst. */

/* Kein horizontales Scrollen im Seelenpfad (die Kette ist rein vertikal) -
   der eigentliche Scrollbalken-Look kommt jetzt aus der allgemeinen
   .panel-Regel in css/menues.css (gilt für alle Panels, nicht nur diesen). */
#level-karte-panel {
    overflow-x: hidden;
}

.level-pfad {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.level-pfad-eintrag {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.9rem 0 1.9rem;
    text-align: center;
}

/* Gestrichelte Verbindungslinie zur nächsten Station - der "Pfad". */
.level-pfad-eintrag:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1.6rem;
    border-left: 2px dashed var(--panel-border);
    transform: translateX(-50%);
}

.level-pfad-marker {
    font-size: 1.4rem;
    line-height: 1;
    filter: grayscale(1);
    opacity: 0.55;
}

.level-pfad-eintrag--frei .level-pfad-marker {
    filter: none;
    opacity: 1;
    text-shadow: 0 0 14px var(--accent);
}

.level-pfad-eintrag--aktuell .level-pfad-marker {
    text-shadow: 0 0 20px var(--accent-bright), 0 0 40px var(--accent);
    animation: seelenpfad-glimmen 2.4s ease-in-out infinite;
}

@keyframes seelenpfad-glimmen {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

.level-pfad-name {
    margin: 0;
    font-size: clamp(0.65rem, calc(2.2 * var(--uw)), 0.85rem);
    letter-spacing: 0.06em;
    color: var(--text-dim);
    background: none;
    border: none;
    padding: 0;
    cursor: default;
}

.level-pfad-eintrag--frei .level-pfad-name {
    color: var(--text);
    text-shadow: 0 0 12px var(--accent);
}

.level-pfad-eintrag--aktuell .level-pfad-name {
    color: var(--accent-bright);
}

button.level-pfad-name {
    cursor: pointer;
}

button.level-pfad-name:hover {
    color: var(--accent-bright);
    text-shadow: 0 0 16px var(--accent-bright);
}

.level-pfad-untertitel {
    font-size: clamp(0.5rem, calc(1.6 * var(--uw)), 0.65rem);
    color: var(--text-dim);
    opacity: 0.8;
}

.level-pfad-hinweis {
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    opacity: 0.6;
    text-transform: uppercase;
}

.level-pfad-hinweis--springbar {
    color: var(--accent-bright);
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .level-pfad-eintrag--aktuell .level-pfad-marker {
        animation: none;
    }
}