/* The Fractured Sky Atlas — interactive story map */
.ks-atlas-wrap { position: relative; }

#ks-atlas {
    width: 100%;
    background: #0f1220;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #2a2f42;
}
#ks-atlas svg { display: block; width: 100%; height: auto; cursor: grab; }
#ks-atlas svg:active { cursor: grabbing; }

.ks-atlas-land { fill: #232838; stroke: rgba(201, 161, 74, .30); stroke-width: .4px; }
.ks-atlas-sphere { fill: #0f1220; }

.ks-atlas-pt { stroke: #0f1220; stroke-width: 1px; cursor: pointer; transition: opacity .15s; }
.ks-atlas-pt:hover { stroke: #fff; }

/* Controls */
.ks-atlas-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .75rem; }
.ks-atlas-controls .btn.active { box-shadow: inset 0 0 0 2px currentColor; }
.ks-atlas-legend { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: .6rem; font-size: .85rem; }
.ks-atlas-legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }

/* Timeline */
.ks-atlas-timeline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .75rem; }
.ks-atlas-timeline .ks-scrub { flex: 1 1 220px; min-width: 160px; accent-color: #c9a14a; cursor: pointer; }
.ks-atlas-timeline .ks-date {
    min-width: 150px; font-weight: 600; color: #c9a14a;
    font-variant-numeric: tabular-nums;
}

/* "Now showing" caption during playback (anchored above the centered marker) */
.ks-atlas-now {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    transform: translate(-50%, -100%);
    max-width: 280px;
    text-align: center;
    background: #1a1d2b;
    color: #f4f4f7;
    border: 1px solid #c9a14a;
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .25s; /* duration is overridden per-move in JS */
}
.ks-atlas-now .now-place { font-weight: 700; color: #c9a14a; font-size: .95rem; line-height: 1.2; }
.ks-atlas-now .now-code { font-style: italic; color: #b9bdc9; font-size: .8rem; }
.ks-atlas-now .now-date { font-size: .82rem; }

/* Tooltip */
.ks-atlas-tip {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    max-width: 260px;
    background: #1a1d2b;
    color: #f4f4f7;
    border: 1px solid #c9a14a;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: .82rem;
    line-height: 1.35;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
    opacity: 0;
    transition: opacity .12s;
}
.ks-atlas-tip .tip-place { font-weight: 700; color: #c9a14a; }
.ks-atlas-tip .tip-code { font-style: italic; color: #b9bdc9; }
.ks-atlas-tip ul { margin: 6px 0 0; padding-left: 16px; }
.ks-atlas-tip li { margin-bottom: 2px; }