/**
 * globe.css — SkyAtlas astronomy globe styles
 * Design system : Inter variable · dark space · glassmorphism
 *
 * Design tokens (--c-*, --fs-*, --sp-*, --r-*, --blur-*, --glass-*)
 * sont définis dans /assets/tokens.css (linké avant ce fichier).
 */

/* ── Reset & base ─────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--c-bg);
    color: var(--c-text-primary);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--fs-md);
    font-feature-settings: "cv02", "cv03", "cv04";
    -webkit-font-smoothing: antialiased;
}

/* ── Globe container ──────────────────────────────────────── */

/* WHY: #display est désormais enveloppé dans <main> (a11y). Sans hauteur
   explicite sur <main>, le height:100% de #display retombe à 0 → la zone de
   drag (d3.zoom liée à #display) disparaît et le globe ne tourne plus. */
main {
    height: 100%;
}

#display {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* Deep space — richer 3-stop gradient for depth */
    background: radial-gradient(ellipse 70% 70% at 50% 50%,
        #00002a 0%,
        #00001a 40%,
        #00000e 70%,
        #000004 100%);
}

#display:active { cursor: grabbing; }

#map, #foreground, #terminator-svg {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
    transform: translateZ(0);
}

/* Canvas night overlay — rendu pixel par pixel, zéro polygone SVG */
#night-overlay {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    display: block;
    filter: blur(12px);
}

/* ── SVG Globe elements ───────────────────────────────────── */

.background-sphere {
    fill: #061420;
    stroke: none;
    shape-rendering: geometricPrecision;
}

.coastline {
    fill: #1a3f5e;
    stroke: #4d94c8;
    stroke-width: 0.7;
    shape-rendering: geometricPrecision;
}

.lakes {
    fill: #091c30;
    stroke: rgba(55, 115, 175, 0.40);
    stroke-width: 0.5;
    shape-rendering: geometricPrecision;
}

.graticule {
    fill: none;
    stroke: rgba(90, 150, 215, 0.10);
    stroke-width: 0.35;
    shape-rendering: crispEdges;
}

.foreground-sphere {
    fill: none;
    stroke: rgba(90, 150, 220, 0.40);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 10px rgba(70, 130, 220, 0.18));
}

/* ── Terminator (day/night line) ──────────────────────────── */

.terminator-line {
    fill: none;
    stroke: url(#terminator-gradient);
    stroke-width: 2.5;
    stroke-dasharray: 8 5;
    filter: drop-shadow(0 0 6px rgba(255, 130, 30, 0.70))
            drop-shadow(0 0 14px rgba(255, 100, 20, 0.32));
    pointer-events: none;
    animation: terminator-flow 24s linear infinite;
}

@keyframes terminator-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -130px; }
}

.night-polygon {
    filter: url(#night-edge-blur);
}

.day-glow-circle {
    mix-blend-mode: screen;
    pointer-events: none;
}

/* ── Halo atmosphérique ──────────────────────────────────── */

.globe-halo {
    fill: none;
    stroke: rgba(70, 130, 255, 0.18);
    stroke-width: 28px;
    filter: blur(14px);
    pointer-events: none;
}

/* ── Stars background ─────────────────────────────────────── */

#stars-canvas {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 0;
}

/* ── Title ────────────────────────────────────────────────── */

#globe-title {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
    text-shadow: 0 0 24px rgba(100, 160, 240, 0.25);
}

/* ── Bottom indicators ─────────────────────────────────────── */

#utc-clock,
#sun-info {
    position: absolute;
    bottom: 24px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    z-index: 10;
    pointer-events: none;
    backdrop-filter: var(--blur-card);
    -webkit-backdrop-filter: var(--blur-card);
    box-shadow: var(--glass-shadow-sm);
}

#utc-clock { left: 24px; }
#sun-info  { right: 24px; border-color: var(--c-border-glow); }

#utc-clock .label,
#sun-info .label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    display: block;
    margin-bottom: 2px;
}

#utc-clock .time {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
    color: var(--c-text-secondary);
    letter-spacing: 0.06em;
}

#sun-info .value {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--c-golden);
}

/* ── Loading overlay ──────────────────────────────────────── */

#loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg);
    color: var(--c-text-muted);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    z-index: 100;
    transition: opacity 0.6s ease;
}

#loading.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 600px) {
    #globe-title { font-size: var(--fs-xs); top: 12px; }
    #utc-clock, #sun-info { padding: var(--sp-1) var(--sp-2); bottom: 14px; }
    #utc-clock { left: 14px; }
    #sun-info  { right: 14px; }
}

/* ── Golden Hour Panel ─────────────────────────────────────── */

#golden-panel {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 232px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-glow);
    border-radius: var(--r-xl);
    overflow: hidden;
    z-index: 20;
    backdrop-filter: var(--blur-bg);
    -webkit-backdrop-filter: var(--blur-bg);
    box-shadow: var(--glass-shadow);
}

.gh-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.gh-header-icon { color: var(--c-golden); font-size: var(--fs-sm); }

.gh-header-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-golden);
    flex: 1;
}

.gh-live-badge {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    background: var(--c-golden-dim);
    border: 1px solid var(--c-golden-glow);
    border-radius: 20px;
    padding: 2px var(--sp-2);
    color: var(--c-golden);
    font-variant-numeric: tabular-nums;
}

.gh-list {
    padding: var(--sp-1) 0;
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: none;
}
.gh-list::-webkit-scrollbar { display: none; }
.gh-list.is-scrollable {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}

.gh-entry {
    display: flex;
    align-items: center;
    padding: 7px var(--sp-4) 7px 0;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: var(--r-sm);
    margin: 0 var(--sp-1);
    position: relative;
}
.gh-entry:hover { background: var(--c-golden-dim); }

/* Active entries get a left border accent */
.live-golden,
.live-sunrise,
.live-blue {
    background: rgba(255, 176, 32, 0.04);
}

.gh-score-badge {
    width: 40px;
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-align: right;
    padding-right: var(--sp-2);
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gh-accent {
    width: 2px;
    min-height: 28px;
    border-radius: 0 2px 2px 0;
    margin-right: var(--sp-3);
    flex-shrink: 0;
}
.live-golden  .gh-accent { background: linear-gradient(180deg, #ffd040 0%, #ff6800 100%); }
.live-sunrise .gh-accent { background: linear-gradient(180deg, #d880ff 0%, #7030c0 100%); }
.live-blue    .gh-accent { background: linear-gradient(180deg, #6090ff 0%, #3050c0 100%); }
.upcoming     .gh-accent { background: var(--c-border); }

.gh-content { flex: 1; min-width: 0; }

.gh-top {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: 3px;
}

.gh-flag { font-size: var(--fs-base); line-height: 1; flex-shrink: 0; }

.gh-city {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gh-time {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
.live-golden  .gh-time { color: var(--c-golden); }
.live-sunrise .gh-time { color: #d080ff; }
.live-blue    .gh-time { color: var(--c-blue); }
.upcoming     .gh-time { color: var(--c-text-muted); }

.gh-bar {
    height: 2px;
    background: rgba(255,255,255,0.07);
    border-radius: 1px;
    overflow: hidden;
}
.live-sunrise .gh-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8040cc, #e080ff);
    border-radius: 1px;
}
.live-golden .gh-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff7010, #ffcc30);
    border-radius: 1px;
    transition: width 1s linear;
}
.live-blue .gh-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4055cc, #7090ff);
    border-radius: 1px;
}

.gh-sub {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: 1px;
}

#city-layer { display: none; }

.city-ring {
    animation: city-ring-pulse 2.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes city-ring-pulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%       { opacity: 0.05; transform: scale(2.2); }
}

/* ── Sun sub-solar marker ─────────────────────────────────── */

#sun-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.sun-glow {
    fill: rgba(255, 210, 80, 0.12);
    animation: sun-glow-pulse 4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.sun-ring {
    fill: none;
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
}
.sun-ring-1 {
    stroke: rgba(255, 210, 60, 0.80);
    animation: sun-ring-pulse 2.4s ease-in-out infinite;
}
.sun-ring-2 {
    stroke: rgba(255, 180, 40, 0.50);
    animation: sun-ring-pulse 2.4s ease-in-out infinite 0.9s;
}

.sun-core {
    fill: rgba(255, 245, 120, 0.98);
    filter: drop-shadow(0 0 8px rgba(255, 235, 80, 1))
            drop-shadow(0 0 18px rgba(255, 185, 30, 0.75));
}

.sun-label {
    font-size: var(--fs-lg);
    fill: rgba(255, 230, 80, 0.90);
    filter: drop-shadow(0 0 6px rgba(255, 220, 60, 0.95));
    user-select: none;
}

/* ── Golden hour & civil twilight bands ───────────────────── */

.golden-band {
    filter: url(#band-blur);
    opacity: 0.85;
}

.blue-band {
    filter: url(#band-blur);
    opacity: 0.80;
}

/* ── Search bar ───────────────────────────────────────────── */

#search-wrap {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    width: 290px;
    z-index: 30;
}

#search-input {
    width: 100%;
    background: rgba(2, 5, 18, 0.82);
    border: 1px solid rgba(100, 140, 200, 0.20);
    border-radius: 22px;
    padding: 9px 36px 9px 36px;
    color: var(--c-text-primary);
    font-size: var(--fs-base);
    font-family: inherit;
    outline: none;
    backdrop-filter: var(--blur-input);
    -webkit-backdrop-filter: var(--blur-input);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
#search-input::placeholder { color: var(--c-text-muted); }
#search-input:focus {
    border-color: var(--c-border-glow);
    box-shadow: 0 4px 28px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,165,30,0.12);
}

#search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-base);
    pointer-events: none;
    opacity: 0.5;
    line-height: 1;
}

#search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    background: rgba(80,100,140,0.25);
    border: none;
    border-radius: 50%;
    color: var(--c-text-secondary);
    font-size: var(--fs-xs);
    cursor: pointer;
    transition: background 0.15s;
}
#search-clear:hover { background: rgba(255,100,80,0.25); color: rgba(255,140,120,0.9); }

#search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: rgba(2, 5, 18, 0.94);
    border: 1px solid rgba(100, 140, 200, 0.16);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 36px rgba(0,0,0,0.65);
    backdrop-filter: var(--blur-card);
    -webkit-backdrop-filter: var(--blur-card);
    transition: opacity 0.15s;
}
#search-results.search-hidden { display: none; }

.search-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.12s;
    font-size: var(--fs-base);
}
.search-item:hover, .search-item.active { background: rgba(255,165,30,0.10); }
.search-item + .search-item { border-top: 1px solid rgba(255,255,255,0.04); }
.si-flag { font-size: var(--fs-md); flex-shrink: 0; line-height: 1; }
.si-name { flex: 1; color: var(--c-text-primary); font-weight: var(--fw-medium); }
.si-cc   {
    font-size: var(--fs-xs); color: var(--c-text-muted); font-weight: var(--fw-semibold);
    letter-spacing: 0.06em; background: rgba(80,100,140,0.20);
    padding: 2px 6px; border-radius: var(--r-sm);
}

/* ── Location popup ───────────────────────────────────────── */

#loc-popup {
    position: absolute;
    width: 272px;
    background: rgba(2, 5, 18, 0.93);
    border: 1px solid rgba(100, 140, 200, 0.18);
    border-radius: 16px;
    overflow: hidden;
    z-index: 50;
    backdrop-filter: var(--blur-bg);
    -webkit-backdrop-filter: var(--blur-bg);
    box-shadow: 0 16px 48px rgba(0,0,0,0.70), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: opacity 0.18s, transform 0.18s;
}

#loc-popup.loc-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.97);
}

#loc-close {
    position: absolute;
    top: 10px; right: 12px;
    background: none; border: none;
    color: rgba(120,150,190,0.5);
    font-size: 12px; cursor: pointer;
    padding: 2px 4px; line-height: 1;
    transition: color 0.15s;
}
#loc-close:hover { color: rgba(200,220,255,0.8); }

.loc-header {
    padding: 12px 36px 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.loc-city {
    font-size: var(--fs-md); font-weight: var(--fw-bold);
    color: var(--c-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loc-header-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 3px;
}
.loc-coords {
    font-size: var(--fs-xs); color: var(--c-text-muted);
    font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}

.loc-body { padding: 8px 0 4px; }

.loc-row {
    display: flex; align-items: center;
    gap: var(--sp-2); padding: 5px var(--sp-4);
    font-size: var(--fs-sm);
}
.loc-icon  { width: 14px; text-align: center; font-size: var(--fs-xs); color: var(--c-text-muted); flex-shrink: 0; }
.loc-label { flex: 1; color: var(--c-text-secondary); }
.loc-val   { font-weight: var(--fw-semibold); color: var(--c-text-primary); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }

.loc-golden .loc-icon  { color: rgba(255,195,50,0.90); }
.loc-golden .loc-label { color: rgba(220,170,80,0.85); }
.loc-golden .loc-val   { color: rgba(255,210,70,0.98); }

.loc-twilight .loc-icon { color: rgba(100,120,255,0.80); }
.loc-twilight .loc-val  { color: rgba(130,155,255,0.92); }

.loc-dim .loc-icon  { color: rgba(100,130,170,0.35); }
.loc-dim .loc-label { color: rgba(100,130,170,0.45); }
.loc-dim .loc-val   { color: rgba(120,150,190,0.55); font-size: 11px; }

.loc-status {
    margin: 4px 14px 6px;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    font-size: 11px; font-weight: var(--fw-semibold);
    text-align: center;
    letter-spacing: 0.02em;
}
.loc-status-golden { background: rgba(255,175,30,0.12); color: rgba(255,210,60,0.98); border: 1px solid rgba(255,175,30,0.22); }
.loc-status-day    { background: rgba(80,150,255,0.08);  color: rgba(150,195,255,0.88); }
.loc-status-twi    { background: rgba(80,100,255,0.10);  color: rgba(130,160,255,0.88); }
.loc-status-night  { background: rgba(20,30,80,0.30);    color: rgba(110,135,210,0.75); }
.loc-status-polar  { background: rgba(60,80,120,0.15);   color: rgba(160,190,225,0.80); }

.loc-score-wrap {
    margin: 0;
    padding: 10px 16px 8px;
    background: rgba(255,255,255,0.025);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.loc-score-hero { display: flex; align-items: center; gap: 12px; }
.loc-score-right { flex: 1; min-width: 0; }
.loc-score-num {
    font-size: 28px;
    font-weight: var(--fw-extrabold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: rgba(200,220,255,0.88);
    flex-shrink: 0;
    min-width: 58px;
    text-align: right;
}
.loc-score-track {
    height: 4px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}
.loc-score-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease, background 0.6s ease;
    width: 0%;
}
.loc-score-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 16px;
}
.loc-score-label-text  { font-size: 11.5px; font-weight: var(--fw-bold); }
.loc-score-details-text { font-size: 10px; color: rgba(120,150,190,0.60); }
.loc-score-loading, .loc-score-err { font-size: 10px; color: rgba(100,130,170,0.50); font-style: italic; }

.loc-btn {
    display: block;
    margin: 0 14px 14px;
    padding: 8px 12px;
    background: rgba(255,165,30,0.10);
    border: 1px solid rgba(255,165,30,0.22);
    border-radius: var(--r-sm);
    color: rgba(255,200,60,0.95);
    font-size: 11.5px; font-weight: var(--fw-semibold);
    text-align: center; text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.loc-btn:hover {
    background: rgba(255,165,30,0.18);
    border-color: rgba(255,165,30,0.45);
    transform: translateY(-1px);
}
.loc-btn:active { transform: translateY(0); }

/* ── Share button ──────────────────────────────────────────── */

#share-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 10px;
    background: rgba(4, 8, 24, 0.75);
    border: 1px solid var(--c-border-glow);
    border-radius: 20px;
    color: rgba(255, 200, 60, 0.92);
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    cursor: pointer;
    backdrop-filter: var(--blur-input);
    -webkit-backdrop-filter: var(--blur-input);
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
#share-btn:hover {
    background: rgba(255, 165, 30, 0.12);
    border-color: rgba(255, 165, 30, 0.55);
    transform: translateY(-1px);
}
#share-btn:active { transform: translateY(0); }

/* ── Legend button & card ──────────────────────────────────── */

#legend-btn {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(0, 5, 20, 0.72);
    border: 1px solid rgba(100, 140, 200, 0.28);
    color: rgba(130, 165, 215, 0.82);
    font-size: 14px; line-height: 24px;
    text-align: center; cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.2s, color 0.2s;
    user-select: none;
}
#legend-btn:hover {
    border-color: rgba(255, 165, 30, 0.55);
    color: rgba(255, 195, 60, 0.92);
}

#legend-card {
    position: absolute;
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    width: 310px;
    background: rgba(2, 5, 18, 0.93);
    border: 1px solid rgba(100, 140, 200, 0.16);
    border-radius: 14px;
    padding: 14px 16px 12px;
    backdrop-filter: var(--blur-card);
    -webkit-backdrop-filter: var(--blur-card);
    box-shadow: var(--glass-shadow);
    transition: opacity 0.18s, transform 0.18s;
}

#legend-card.legend-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
}

.legend-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: var(--sp-2);
}

.legend-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-text-secondary);
    line-height: 1.5;
}
.legend-row:last-child { margin-bottom: 0; }

.legend-line {
    display: inline-block;
    width: 28px; height: 2px;
    margin-top: 6px;
    border-radius: 1px;
    flex-shrink: 0;
    background: var(--c-term);
    box-shadow: 0 0 4px rgba(255,122,48,0.65);
}

.legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-top: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

/* ── Keyframe animations ───────────────────────────────────── */

@keyframes sun-ring-pulse {
    0%, 100% { opacity: 0.78; transform: scale(1);   }
    50%       { opacity: 0.04; transform: scale(2.4); }
}

@keyframes sun-glow-pulse {
    0%, 100% { opacity: 0.14; transform: scale(1);   }
    50%       { opacity: 0.04; transform: scale(1.6); }
}

/* ── Moon phase widget ─────────────────────────────────────────────────── */
#moon-widget {
    position: absolute;
    bottom: 66px;
    right: 24px;
    background: var(--c-surface);
    border: 1px solid rgba(130, 100, 220, 0.22);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    z-index: 10;
    pointer-events: none;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
#moon-widget .label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
#moon-icon-widget { font-size: 18px; line-height: 1; }
#moon-pct-widget {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: rgba(180, 160, 255, 0.90);
    font-variant-numeric: tabular-nums;
}

/* ── Time travel slider ────────────────────────────────────────────────── */
#time-ctrl {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: rgba(2, 5, 18, 0.88);
    border: 1px solid rgba(100, 140, 200, 0.18);
    border-radius: 20px;
    padding: 5px 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
#time-slider {
    width: 130px;
    cursor: pointer;
    accent-color: var(--c-golden);
}
#time-offset-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-golden);
    font-variant-numeric: tabular-nums;
    min-width: 44px;
    text-align: center;
    letter-spacing: 0.04em;
}
#time-reset-btn {
    background: none;
    border: none;
    color: var(--c-text-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.15s;
}
#time-reset-btn:hover { color: var(--c-golden); }

/* ── Nautical + Astronomical twilight bands ────────────────────────────── */
.nautical-band { filter: url(#band-blur); opacity: 0.70; }
.astro-band    { filter: url(#band-blur); opacity: 0.50; }

/* ── Enhanced atmospheric halo rings ─────────────────────────────────────── */
.globe-halo-outer {
    fill: none;
    stroke: rgba(30, 55, 155, 0.07);
    stroke-width: 58px;
    filter: blur(28px);
    pointer-events: none;
}
.globe-halo-warm {
    fill: none;
    stroke: rgba(210, 115, 45, 0.05);
    stroke-width: 32px;
    filter: blur(18px);
    pointer-events: none;
}

/* ── Aurora borealis / australis canvas ─────────────────────────────────── */
#aurora-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

/* ── Ambient city dots ───────────────────────────────────────────────────── */
.ambient-city-dot {
    stroke: none;
    shape-rendering: geometricPrecision;
}