.map-path {
    fill: none;
    stroke: var(--color-accent);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dasharray 1s ease-in-out,
                stroke 0.8s ease-in-out,
                stroke-width 0.5s ease-in-out,
                opacity 0.8s ease-in-out,
                filter 0.5s ease-in-out;
}

.map-path.faint-preview {
    stroke-width: 3;
    stroke: #5a4c3c;
    stroke-dasharray: 4 6;
    opacity: 0.22;
}

.map-path.dotted-active {
    stroke-width: 4;
    stroke: var(--color-accent);
    stroke-dasharray: 6 8;
    opacity: 0.75;
    filter: drop-shadow(0 0 3px rgba(207, 168, 110, 0.4));
    animation: dashScroll 30s linear infinite;
}

.map-path.solid-traversed {
    stroke-width: 5.5;
    stroke: var(--color-gold);
    stroke-dasharray: 0;
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

@keyframes dashScroll {
    to {
        stroke-dashoffset: -1000;
    }
}