.header-logo {
    display: flex;
    align-items: center;
    gap: 1rem;

    img {
        height: 2.5rem;
        width: auto;
        filter: drop-shadow(0 0 5px var(--secondary-40));
    }
}

#map-container {
    flex: 1;
    position: relative;
    background-color: var(--color-black);
}

#map {
    width: 100%;
    height: 100%;
}

#map-3d {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Force the WebGLRenderer canvas to fill its container.
   Three.js is initialised with `setSize(w, h, false)` (updateStyle:false), so
   it never writes inline width/height onto <canvas>. Without this rule, the
   canvas — a replaced element — falls back to its intrinsic dimensions (the
   drawingBuffer pixel size, = clientSize × devicePixelRatio), which overflows
   the container on any DPR > 1.0 and shifts the WebGL scene off the CSS2D pin
   overlay. See three-scene.js:225 for the renderer setup. */
#map-3d > canvas {
    width: 100%;
    height: 100%;
}

/* Overlay toggles — floats over the map, above the view toggle */
/* District hover info panel — top-right under the header, right-aligned with the
   icon on the right (parity with the in-game bottom-right readout; bottom-right
   here is taken by the overlay controls). --di-color is set per-district by
   NCZ.DistrictInfo. pointer-events:none so it never blocks the map. */
#district-info-panel {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    /* Below the cluster panel (1000) so it slides in over this readout, but
       above the map. */
    z-index: 900;
    max-width: 360px;
    text-align: right;
    pointer-events: none;
    /* Text-only (no plate). A solid four-direction dark casing (like the map
       labels) keeps it legible over bright satellite imagery as well as the dark
       schematic — a soft blur alone washed out over the rooftops. */
    text-shadow:
        -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
        0 0 4px rgba(0, 0, 0, 0.9),
        0 0 8px rgba(0, 0, 0, 0.7);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#district-info-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Two-column header (matches the in-game readout): column 1 stacks the district
   name over the subdistrict, column 2 is the icon spanning both rows. */
.di-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
}

.di-names {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.di-district {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--di-color, var(--white));
    line-height: 1.05;
}

.di-sub {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--di-color, var(--white)); /* subdistrict shares the district colour */
    opacity: 0.9;
    margin-top: 1px;
}

.di-icon {
    flex: none;
    /* Box size (exact icon dimensions) + background crop set per-district by
       NCZ.DistrictInfo. A drop shadow keeps the icon legible over bright
       satellite imagery, matching the text casing. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.di-stats {
    margin-top: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.di-count {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--white);
}

.di-breakdown {
    font-size: var(--text-md);
}

.di-dot {
    margin: 0 4px;
    color: var(--white);
    opacity: 0.7;
}

.di-share,
.di-recent {
    font-size: var(--text-md);
    color: var(--white);
}

#overlay-controls {
    position: absolute;
    bottom: 120px;
    right: var(--space-sm);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    background: var(--surface-panel);
    border: var(--ui-border-thin) solid var(--secondary-20);
    padding: var(--space-xs) var(--space-md);
}

.overlay-controls-label {
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    color: var(--gray);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.overlay-perf-warn {
    font-size: var(--text-2xs);
    color: var(--tertiary);
    opacity: 0.7;
    margin-left: 2px;
    cursor: help;
}

.overlay-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--white);
    cursor: pointer;
    user-select: none;

    &.schema-only.sat-active {
        opacity: 0.35;
        pointer-events: none;
    }
}

/* View toggle (SAT | SCHEMA) — floats over the map in the bottom-right */
#map-view-toggle {
    position: absolute;
    bottom: 80px; /* above Leaflet zoom controls */
    right: var(--space-sm);
    z-index: 1000;
    display: flex;
    gap: 2px;
    background: var(--surface-panel);
    border: var(--ui-border-thin) solid var(--secondary);
    padding: 2px;
}

.map-view-btn {
    background: transparent;
    border: none;
    color: var(--gray);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    padding: var(--space-2xs) var(--space-sm);
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: var(--transition-fast);

    &:hover {
        color: var(--white);
    }

    &.active {
        background: var(--secondary);
        color: var(--primary);
    }
}

/* Controls reference + reset — bottom-left of #map-3d */
#scene-controls {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--surface-panel);
    border: var(--ui-border-thin) solid var(--secondary-20);
    padding: var(--space-xs) var(--space-md);
    pointer-events: auto;
}

.scene-controls-hint {
    display: flex;
    gap: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--gray);

    & kbd {
        font-family: var(--font-body);
        color: var(--white);
        background: none;
        border: none;
        padding: 0;
    }
}

/* Sun / time-of-day slider */
#scene-sun-control {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
}

#scene-sun-icon {
    font-size: var(--text-sm);
    line-height: 1;
    color: var(--tertiary);
}

#scene-sun-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 90px;
    height: 2px;
    background: var(--secondary-30);
    border-radius: 1px;
    cursor: pointer;
    outline: none;

    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--tertiary);
        cursor: pointer;
    }

    &::-moz-range-thumb {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--tertiary);
        border: none;
        cursor: pointer;
    }
}

#scene-sun-time {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--tertiary);
    min-width: 2.8rem;
    letter-spacing: 0.05em;
}

#scene-flyover-btn {
    background: transparent;
    border: var(--ui-border-thin) solid var(--secondary-30);
    color: var(--secondary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    padding: var(--space-2xs) var(--space-sm);
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: var(--transition-fast);
    white-space: nowrap;

    &:hover {
        background: var(--secondary);
        color: var(--primary);
        border-color: var(--secondary);
    }

    &.active {
        background: var(--secondary);
        color: var(--primary);
        border-color: var(--secondary);
    }
}

#scene-reset-btn {
    background: transparent;
    border: var(--ui-border-thin) solid var(--secondary-30);
    color: var(--secondary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    padding: var(--space-2xs) var(--space-sm);
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: var(--transition-fast);
    white-space: nowrap;

    &:hover {
        background: var(--secondary);
        color: var(--primary);
        border-color: var(--secondary);
    }
}

/* Loading indicator inside #map-3d */
.scene-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 280px;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    background: var(--surface-panel);
    border: 1px solid var(--secondary-20);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.scene-loading__text {
    color: var(--secondary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scene-loading__track {
    height: 2px;
    background: var(--secondary-20);
    width: 100%;
}
.scene-loading__fill {
    height: 100%;
    background: var(--secondary);
    width: 0%;
    transition: width 200ms ease;
}


/* Showcase fullscreen — applied directly to #map-3d, no ancestor cascade needed */
#map-3d.showcase-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9000;
    width: 100vw;
    height: 100vh;
}


/* Flyover start-screen — opening title card */
#flyover-start-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    pointer-events: none;
    z-index: 10;
    animation: flyover-fade 3s ease forwards;

    &.hidden {
        display: none;
    }
}

@keyframes flyover-fade {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

.flyover-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    letter-spacing: 0.15em;
    color: var(--white);
    text-transform: uppercase;
}

.flyover-subtitle {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.2em;
    color: var(--gray);
    text-transform: uppercase;
}

.flyover-esc-hint {
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    letter-spacing: 0.15em;
    color: var(--gray);
    opacity: 0.5;
    margin-top: 1.5rem;
    text-transform: uppercase;
}

/* Sidebar Styling */
#sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 100%;
    background: var(--surface-panel);
    border-right: var(--ui-border-thin) solid var(--secondary);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(var(--space-lg));

    &.hidden {
        display: none;
    }
}

#cluster-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    min-width: 260px;
    max-width: min(70svw, 720px);
    height: 100%;
    background: var(--surface-panel);
    border-left: var(--ui-border-thin) solid var(--secondary);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(var(--space-lg));
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.25s ease, opacity 0.25s ease;

    &.cluster-panel-closed {
        transform: translateX(100%);
        opacity: 0;
        pointer-events: none;
    }

    &.resizing {
        user-select: none;
    }
}

#cluster-panel-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--space-lg);
    height: 100%;
    cursor: ew-resize;
    z-index: 2;
    touch-action: none;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 5px;
        width: var(--ui-border-thin);
        background: var(--secondary-20);
        transition: background 0.2s ease;
    }

    &:hover::before {
        background: var(--secondary-50);
    }
}

body.cluster-panel-resizing,
body.cluster-panel-resizing * {
    cursor: ew-resize !important;
    user-select: none !important;
}

#sidebar-open {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 999;
    background: var(--surface-panel-90);
    border: var(--ui-border-thin) solid var(--secondary);
    color: var(--secondary);
    cursor: pointer;
    padding: var(--space-sm);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(var(--space-sm));
    transition: var(--transition-fast);

    &:hover {
        background: var(--secondary);
        color: var(--primary);
    }

    &.visible {
        display: flex;
    }
}

#map-container .map-action-btn {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    z-index: 999;
    background-color: var(--primary);

    &:hover {
        background-color: var(--secondary);
        color: var(--primary);
    }
}

#sidebar-cat-header {
    margin: 0;
    border-bottom: var(--ui-border-thin) solid var(--dark-accent);
}

.ui-close-btn {
    background: transparent;
    border: none;
    color: var(--gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--lh-icon);
    padding: 5px;
    transition: color 0.2s ease;

    &:hover {
        color: var(--secondary);
    }
}

.ui-close-btn-icon {
    width: 18px;
    height: 18px;
    display: block;
    background-color: currentColor;
    -webkit-mask-image: url("../img/icon/close.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("../img/icon/close.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.ui-close-btn.ui-close-btn-reverse {
    color: rgb(from var(--primary) r g b / 0.65);

    &:hover {
        color: var(--primary);
    }
}

#cluster-panel-header {
    margin: 0;
    border-bottom: var(--ui-border-thin) solid var(--dark-accent);
}

#cluster-mod-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    padding: 0;
}

.cluster-mod-item {
    border-bottom: var(--ui-border-thin) solid var(--surface-hover);
    --cluster-mod-color: var(--category-location-overhaul);

    .cluster-mod-name {
        text-shadow: 0 0 var(--space-sm) var(--cluster-mod-color);
    }

    .cluster-mod-separator {
        background-color: var(--cluster-mod-color);
    }
}

.cluster-mod-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.9rem 1rem;
    transition: background 0.2s ease;
    font-family: var(--font-body);

    &:hover {
        background: var(--surface-hover);
    }
}

.cluster-mod-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.cluster-mod-thumb {
    width: clamp(56px, 30%, 160px);
    height: auto;
    aspect-ratio: 3 / 2;
    flex-shrink: 0;
    border: var(--ui-border-thin) solid var(--white-20);
    object-fit: cover;
    background: var(--white-02);
}

.cluster-mod-thumb-clickable {
    cursor: zoom-in;
    transition: border-color 0.2s ease, transform 0.2s ease;

    &:hover {
        border-color: var(--secondary);
        transform: scale(1.03);
    }
}

.cluster-mod-thumb-placeholder {
    display: inline-block;
    border-style: dashed;
}

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

.cluster-mod-name {
    display: block;
    color: var(--white);
    font-weight: bold;
    font-size: var(--text-lg);
}

.cluster-mod-separator {
    display: block;
    width: 100%;
    height: var(--ui-border-thin);
    margin-top: 0.3rem;
    opacity: 0.75;
}

.cluster-mod-meta {
    display: block;
    color: var(--secondary);
    font-size: var(--text-sm);
    margin-top: 0.2rem;
}

.cluster-mod-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: 0.35rem;
}

.cluster-mod-desc {
    display: block;
    color: var(--white-78);
    font-size: var(--text-sm);
    margin-top: 0.35rem;
    line-height: var(--lh-snug);
}

.cluster-empty {
    padding: 0.9rem 1rem;
    color: var(--gray);
    font-size: var(--text-md);
}

.sidebar-search-container {
    padding: 0.5rem 1rem;
    width: 100%;
}

.sidebar-search-input-wrap {
    position: relative;
}

#mod-search {
    padding-right: 2rem;
}

.sidebar-search-clear-btn {
    position: absolute;
    top: 50%;
    right: var(--space-sm);
    transform: translateY(-50%);

    &[hidden] {
        display: none;
    }
}



#category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
}

.filter-btn {
    background: var(--dark-accent);
    border: var(--ui-border-thin) solid var(--gray);
    color: var(--gray);
    padding: var(--space-2xs) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    cursor: pointer;
    text-transform: uppercase;
    transition: var(--transition-fast);
    letter-spacing: 1px;

    &:hover {
        border-color: var(--secondary);
        color: var(--secondary);
        background: var(--secondary-10);
    }

    &.active {
        color: var(--primary);
        font-weight: bold;
    }

    &[data-category="location-overhaul"].active {
        background: var(--category-location-overhaul);
        border-color: var(--category-location-overhaul);
        box-shadow: 0 0 var(--space-sm) var(--category-location-overhaul-glow);
    }

    &[data-category="new-location"].active {
        background: var(--category-new-location);
        border-color: var(--category-new-location);
        box-shadow: 0 0 var(--space-sm) var(--category-new-location-glow);
    }

    &[data-category="other"].active {
        background: var(--category-other);
        border-color: var(--category-other);
        box-shadow: 0 0 var(--space-sm) var(--category-other-glow);
    }
}

#mod-list {
    flex: 1;
    overflow-y: auto;
    list-style: none;
    padding: 0;
}

.mod-item {
    padding: 1rem;
    border-bottom: var(--ui-border-thin) solid var(--surface-hover);
    cursor: pointer;
    transition: background 0.2s ease;

    &:hover {
        background: var(--surface-hover);
    }

    .mod-item-header {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
        margin-bottom: 0.2rem;

        .mod-item-name {
            margin-bottom: 0;
        }
    }

    .mod-item-name {
        display: block;
        color: var(--white);
        font-weight: bold;
        font-size: var(--text-lg);
        margin-bottom: 0.2rem;
    }

    .mod-item-author {
        color: var(--gray);
        font-size: var(--text-sm);
    }

    .mod-item-meta {
        margin-top: 0.3rem;
        display: flex;
        align-items: center;
    }

    .mod-item-category {
        font-size: var(--text-xs);
        text-transform: uppercase;
        padding: 1px var(--space-2xs);
        border-radius: var(--ui-radius-xs);
        margin-left: 0.5rem;

        &.badge-location-overhaul {
            color: var(--category-location-overhaul);
            border: var(--ui-border-thin) solid var(--category-location-overhaul);
        }

        &.badge-new-location {
            color: var(--category-new-location);
            border: var(--ui-border-thin) solid var(--category-new-location);
        }

        &.badge-other {
            color: var(--category-other);
            border: var(--ui-border-thin) solid var(--category-other);
        }
    }
}

.badge-updated {
    display: inline-block;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px var(--space-2xs);
    border-radius: var(--ui-radius-xs);
    color: var(--tertiary);
    border: var(--ui-border-thin) solid var(--tertiary);
    vertical-align: middle;
    margin-left: var(--space-xs);
    cursor: help;
}

#sidebar-footer {
    padding: 1rem;
    border-top: var(--ui-border-thin) solid var(--dark-accent);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


/* Category Marker Styling */
.category-marker {
    background: none;
    border: none;
}

@keyframes markerPulse {
    0%   { transform: scale(1) rotate(45deg); filter: brightness(1); }
    50%  { transform: scale(1.8) rotate(45deg); filter: brightness(1.5); box-shadow: 0 0 20px var(--secondary); }
    100% { transform: scale(1) rotate(45deg); filter: brightness(1); }
}

.marker-pin {
    width: var(--space-lg);
    height: var(--space-lg);
    border: 3px solid var(--color-black);
    box-shadow: 0 0 var(--space-md) var(--black-80);
    position: relative;
    transform: rotate(45deg);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    &:hover {
        transform: scale(1.5) rotate(45deg);
        z-index: 1000 !important;
    }

    &.pulsing {
        animation: markerPulse 1.5s infinite ease-in-out;
        z-index: 1000 !important;
    }

    &.cat-location-overhaul {
        background-color: var(--category-location-overhaul);
        box-shadow: 0 0 var(--space-md) var(--category-location-overhaul);
    }

    &.cat-new-location {
        background-color: var(--category-new-location);
        box-shadow: 0 0 var(--space-md) var(--category-new-location);
    }

    &.cat-other {
        background-color: var(--category-other);
        box-shadow: 0 0 var(--space-md) var(--category-other);
    }
}

/* Dynamic Pin Tooltip */
.pin-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1200;
    pointer-events: none;
    display: none;

    &.visible {
        display: block;
    }

    &.measure {
        visibility: hidden;
    }

    .pin-tooltip-content {
        background: var(--surface-tooltip-95);
        border: var(--ui-border-thin) solid var(--secondary);
        color: var(--white);
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        letter-spacing: 0.8px;
        text-transform: uppercase;
        padding: 5px 9px;
        line-height: var(--lh-tight);
        white-space: nowrap;
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 0 0 var(--space-lg) var(--secondary-30);
    }

    .pin-tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
    }

    &.dir-top .pin-tooltip-arrow {
        top: 100%;
        left: var(--pin-tooltip-arrow-x, 50%);
        transform: translateX(-50%);
        border-left: var(--space-xs) solid transparent;
        border-right: var(--space-xs) solid transparent;
        border-top: var(--space-xs) solid var(--secondary);
    }

    &.dir-bottom .pin-tooltip-arrow {
        bottom: 100%;
        left: var(--pin-tooltip-arrow-x, 50%);
        transform: translateX(-50%);
        border-left: var(--space-xs) solid transparent;
        border-right: var(--space-xs) solid transparent;
        border-bottom: var(--space-xs) solid var(--secondary);
    }

    &.dir-left .pin-tooltip-arrow {
        left: 100%;
        top: var(--pin-tooltip-arrow-y, 50%);
        transform: translateY(-50%);
        border-top: var(--space-xs) solid transparent;
        border-bottom: var(--space-xs) solid transparent;
        border-left: var(--space-xs) solid var(--secondary);
    }

    &.dir-right .pin-tooltip-arrow {
        right: 100%;
        top: var(--pin-tooltip-arrow-y, 50%);
        transform: translateY(-50%);
        border-top: var(--space-xs) solid transparent;
        border-bottom: var(--space-xs) solid transparent;
        border-right: var(--space-xs) solid var(--secondary);
    }
}

/* Custom Leaflet Styling */
.leaflet-container {
    background: var(--color-black) !important;
}

/* Leaflet Zoom Controls Override */
.leaflet-bar {
    border: var(--ui-border-thin) solid var(--secondary) !important;
    background: var(--primary) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 var(--space-md) var(--secondary-20) !important;

    a {
        background-color: var(--primary) !important;
        color: var(--secondary) !important;
        border-bottom: var(--ui-border-thin) solid var(--secondary) !important;
        font-family: var(--font-heading) !important;
        transition: var(--transition-fast);

        &:hover {
            background-color: var(--secondary) !important;
            color: var(--primary) !important;
        }

        &.leaflet-disabled {
            background-color: var(--dark-accent) !important;
            color: var(--secondary-30) !important;
            cursor: not-allowed;
        }
    }
}



.leaflet-bottom.leaflet-right {
	display: flex;
	align-items: flex-end;
	flex-direction: row-reverse;
    user-select: none;

    .leaflet-control-zoom-in, .leaflet-control-zoom-out {
        border-radius: 0 !important;
        line-height: var(--lh-zoom-control) !important;
    }

    /* Leaflet Scale Control — placement only. Visual styling lives below
       so the 3D view's #scene-scale can wear the same skin. */
    .leaflet-control-scale {
        margin-bottom: var(--space-md);
        pointer-events: none;
    }
}

/* Distance scale bar — shared by Leaflet (.leaflet-control-scale at
   bottom-right of the SAT view) and ThreeMarkers (#scene-scale at bottom-
   right of the SCHEMA view). Both wear the same .leaflet-control-scale-line
   skin so 2D and 3D distance bars render identically. */
.leaflet-control-scale-line {
    border: var(--ui-border-thin) solid var(--secondary);
    border-top: none;
    border-width: 2px;
    background: var(--primary-60);
    color: var(--secondary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: 0.5px;
    text-shadow: none;
    box-shadow: 0 0 var(--space-md) var(--secondary-20);

    &:not(:first-child) {
        border-top: var(--ui-border-thin) solid var(--secondary);
    }
}

/* 3D-specific placement — floats above the bottom controls strip, below the
   #map-view-toggle. Kept out of #scene-controls so the strip's flex row
   doesn't shift width every time the bar relabels at a new zoom level.
   Bottom value sits in the gap between scene-controls top (~44px) and
   map-view-toggle bottom (80px). */
#scene-scale {
    position: absolute;
    right: var(--space-sm);
    bottom: 56px;
    pointer-events: none;
    z-index: 1000;
    margin: 0;
    line-height: 1;
}

.leaflet-popup-content-wrapper {
    background-color: var(--primary) !important;
    color: var(--white) !important;
    border: var(--ui-border-thin) solid var(--secondary);
    border-radius: var(--ui-radius-xs);
    font-family: var(--font-body);
    box-shadow: 0 0 20px var(--black-50);
}

.leaflet-container a.leaflet-popup-close-button {
    top: .5rem;
    right: .25rem;
    color: var(--gray) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;

    &:hover {
        color: var(--secondary) !important;
    }

    &::before {
        content: "";
        width: 18px;
        height: 18px;
        background-color: currentColor;
        -webkit-mask-image: url("../img/icon/close.svg");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-image: url("../img/icon/close.svg");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }
}

.leaflet-popup-tip {
    background-color: var(--secondary) !important;
}

/* ── Popup chrome — shared by Leaflet (2D) and ThreeMarkers (3D) ──────────
   Leaflet renders the popup inside `.leaflet-popup.ncz-dynamic-popup >
   .leaflet-popup-content-wrapper`. ThreeMarkers renders it as
   `.three-popup.ncz-dynamic-popup` directly (no auto-generated wrapper).
   Both views get the same styled card via the shared selectors below. */

/* Default + per-category border colour. Applies to either view because
   `.popup-cat-*` is on the same element as `.ncz-dynamic-popup`. */
.ncz-dynamic-popup {
    --popup-border-color: var(--secondary);

    &.popup-cat-location-overhaul { --popup-border-color: var(--category-location-overhaul); }
    &.popup-cat-new-location      { --popup-border-color: var(--category-new-location); }
    &.popup-cat-other             { --popup-border-color: var(--category-other); }
}

/* Leaflet-only structural reset — strip Leaflet's default close button, tip,
   and outer wrapper margins so our chrome can render cleanly. */
.leaflet-popup.ncz-dynamic-popup {
    margin: 0 !important;

    .leaflet-popup-content       { margin: 0 !important; }
    .leaflet-popup-close-button  { display: none !important; }
    .leaflet-popup-tip-container { display: none !important; }
}

/* The styled card — Leaflet's content-wrapper or 3D's .three-popup. */
.leaflet-popup.ncz-dynamic-popup .leaflet-popup-content-wrapper,
.three-popup.ncz-dynamic-popup {
    position: relative;
    overflow: visible;
    border: 1px solid transparent;
    border-color: transparent;
    background:
        linear-gradient(var(--primary), var(--primary)) padding-box,
        linear-gradient(
            180deg,
            var(--popup-border-color) var(--ncz-popup-gradient-top-stop, 220px),
            var(--secondary) var(--ncz-popup-gradient-bottom-stop, 240px)
        ) border-box;

    &::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        pointer-events: none;
    }
}

/* Direction classes — ncz-popup-top = popup is above pin (arrow at popup
   bottom pointing down). ncz-popup-bottom = popup below pin (arrow at top
   pointing up). top/bottom work for both views; left/right are Leaflet-only. */
.leaflet-popup.ncz-dynamic-popup.ncz-popup-top .leaflet-popup-content-wrapper::after,
.three-popup.ncz-dynamic-popup.ncz-popup-top::after {
    top: 100%;
    left: var(--ncz-popup-arrow-x, 50%);
    transform: translateX(-50%);
    border-left: var(--space-md) solid transparent;
    border-right: var(--space-md) solid transparent;
    border-top: var(--space-md) solid var(--secondary);
}

.leaflet-popup.ncz-dynamic-popup.ncz-popup-bottom .leaflet-popup-content-wrapper::after,
.three-popup.ncz-dynamic-popup.ncz-popup-bottom::after {
    bottom: 100%;
    left: var(--ncz-popup-arrow-x, 50%);
    transform: translateX(-50%);
    border-left: var(--space-md) solid transparent;
    border-right: var(--space-md) solid transparent;
    border-bottom: var(--space-md) solid var(--popup-border-color);
}

.leaflet-popup.ncz-dynamic-popup.ncz-popup-left .leaflet-popup-content-wrapper::after {
    left: 100%;
    top: var(--ncz-popup-arrow-y, 50%);
    transform: translateY(-50%);
    border-top: var(--space-md) solid transparent;
    border-bottom: var(--space-md) solid transparent;
    border-left: var(--space-md) solid var(--popup-border-color);
}

.leaflet-popup.ncz-dynamic-popup.ncz-popup-right .leaflet-popup-content-wrapper::after {
    right: 100%;
    top: var(--ncz-popup-arrow-y, 50%);
    transform: translateY(-50%);
    border-top: var(--space-md) solid transparent;
    border-bottom: var(--space-md) solid transparent;
    border-right: var(--space-md) solid var(--popup-border-color);
}

/* Global link/button components */
.ui-popup-action-link.ui-popup-action-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: 0;
    color: var(--secondary);
    text-decoration: none;
    font-weight: bold;
    border: var(--ui-border-thin) solid var(--secondary-30);
    background-color: var(--secondary-05);
    padding: var(--space-xs) var(--space-sm);
    transition: var(--transition-fast);

    &:hover {
        background-color: var(--secondary-20);
        border-color: var(--secondary);
        color: var(--white);
    }

    .ui-popup-action-link-icon {
        display: inline-block;
        width: 1.25rem;
        height: 1.25rem;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    &.tertiary {
        color: var(--tertiary);
        border-color: var(--tertiary-30);
        background-color: var(--tertiary-05);

        &:hover {
            background-color: var(--tertiary-30);
            border-color: var(--tertiary);
            color: var(--white);
        }
    }

    &.small {
        font-size: var(--text-sm);
        padding: var(--space-2xs) var(--space-xs);

        .ui-popup-action-link-icon {
            width: 1rem;
            height: 1rem;
            display: block;
            object-fit: contain;
        }
    }
}

.ui-popup-action-link-edit .ui-popup-action-link-icon {
    background-color: currentColor;
    -webkit-mask-image: url("../img/icon/edit.svg");
    mask-image: url("../img/icon/edit.svg");
}

.ui-popup-action-link-copy-link .ui-popup-action-link-icon {
    background-color: currentColor;
    -webkit-mask-image: url("../img/icon/link.svg");
    mask-image: url("../img/icon/link.svg");
}

.ui-popup-action-link-copy-cmd .ui-popup-action-link-icon {
    background-color: currentColor;
    -webkit-mask-image: url("../img/icon/copy.svg");
    mask-image: url("../img/icon/copy.svg");
}

.ui-popup-action-link-nexus {
    font-size: var(--text-md);
    padding: var(--space-xs) var(--space-lg);

    &::before {
        content: "";
        width: 1.25rem;
        height: 1.25rem;
        background-image: url("../img/nexus-mods_favicon.ico");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        flex-shrink: 0;
    }
}

.custom-popup-content {
    --popup-title-accent: var(--secondary);
    --popup-header-image-height: 210px;
    position: relative;

    .popup-category-badge {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-2px, -75%);
        z-index: 4;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 2px var(--space-xs);
        color: black;
        font-weight: bold;
        background: var(--popup-title-accent);
        pointer-events: none;
        box-shadow: 0 0 var(--space-sm) rgba(0, 0, 0, 0.4);
    }

    > .badge-updated {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(2px, -75%);
        margin-left: 0;
        z-index: 4;
        background: var(--primary);
        font-weight: bold;
        box-shadow: 0 0 var(--space-sm) var(--tertiary);
    }

    .custom-popup-header {
        position: relative;

        &.has-image {
            max-height: var(--popup-header-image-height);
            overflow: hidden;
            background: var(--black-30);
        }
    }

    .custom-popup-title {
        color: var(--white);
        font-family: var(--font-heading);
        font-size: var(--text-lg);
        position: relative;
        margin: 0;
        padding: var(--space-md) var(--space-md) calc(var(--space-md) - 2px);
        letter-spacing: 1px;
        text-shadow: 0 0 var(--space-sm) var(--popup-title-accent);

        &::after {
            content: "";
            position: absolute;
            left: var(--space-md);
            right: var(--space-md);
            bottom: var(--space-2xs);
            height: 1px;
            background-color: var(--popup-title-accent);
        }
    }

    .custom-popup-body {
        padding: var(--space-md);
    }

    .custom-popup-authors {
        margin-bottom: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .custom-popup-credits {
        font-size: var(--text-sm);
        color: var(--text-dim);
        font-style: italic;
        margin-bottom: 0.5rem;
    }

    .custom-popup-credit-name {
        color: var(--tertiary);
    }

    .custom-popup-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs);
        margin-top: var(--space-sm);
        background: var(--black-30);
        padding: var(--space-xs);
    }

    .custom-popup-images {
        margin: 0;
    }

    .popup-thumb {
        display: block;
        width: 100%;
        object-fit: contain;
        border: 0;
        cursor: zoom-in;
        transition: var(--transition-fast);
        border-radius: calc(var(--ui-radius-xs) - 1px) calc(var(--ui-radius-xs) - 1px) 0 0;
        background: var(--black-30);

        &:hover {
            filter: brightness(1.07);
        }
    }

    .custom-popup-desc {
        line-height: var(--lh-base);
        color: var(--white-86);
    }

    .popup-actions {
        display: flex;
        gap: var(--space-sm);
        margin-top: var(--space-md);

        .ui-popup-action-link-nexus {
            flex: 1 1 auto;
            justify-content: center;
        }

        .ui-popup-action-link-edit {
            flex: 0 0 auto;
        }

        .ui-popup-action-link-copy-link {
            flex: 0 0 auto;
        }
    }
}

/* District Tooltips */
.district-tooltip {
    background: var(--surface-tooltip-85) !important;
    border: var(--ui-border-thin) solid var(--secondary) !important;
    color: var(--secondary) !important;
    font-family: var(--font-heading) !important;
    font-size: var(--text-sm) !important;
    letter-spacing: 1px !important;
    padding: var(--space-2xs) var(--space-sm) !important;
    box-shadow: 0 0 var(--space-md) var(--secondary-20) !important;

    &:before {
        border-right-color: var(--secondary) !important;
    }
}

.tag-badge {
    background: var(--white-10);
    color: var(--text-subtle);
    font-size: var(--text-2xs);
    padding: 1px var(--space-xs);
    border-radius: var(--space-md);
    text-transform: uppercase;
    cursor: help;
    border: var(--ui-border-thin) solid var(--white-10);

    &:hover {
        border-color: var(--secondary);
        color: var(--secondary);
    }
}

/* Sidebar Section Header */
.sidebar-section-header {
    width: 100%;
    padding: 0.6rem 1rem;
    font-family: var(--font-heading);
    color: var(--secondary);
    font-size: var(--text-xs);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: var(--secondary-05);
    border-left: 3px solid var(--secondary);
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &.collapsible {
        cursor: pointer;
        user-select: none;

        &:hover {
            background: var(--secondary-10);
        }
    }

    .collapse-chevron {
        transition: transform 0.2s ease;
    }

    &.collapsed .collapse-chevron {
        transform: rotate(-90deg);
    }
}

#mod-count {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    opacity: 0.7;
    letter-spacing: 0;
}

.filter-selected-count {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    opacity: 0.8;
    letter-spacing: 0;
}


/* Tag & Author Filters Section */
#tag-filters, #author-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: var(--space-lg) 1rem;

    &.filter-collapsed {
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
    }
}

.filter-clear-btn {
    flex: 0 0 100%;
    justify-self: flex-start;
    width: fit-content;
    background: transparent;
    border: var(--ui-border-thin) solid var(--text-dim);
    color: var(--text-dim);
    padding: 2px var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);

    &:hover {
        border-color: var(--secondary);
        color: var(--secondary);
    }

    &[hidden] {
        display: none;
    }
}

.tag-filter-btn {
    background: transparent;
    border: var(--ui-border-thin) solid var(--border-neutral);
    color: var(--text-muted);
    padding: 2px var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    cursor: pointer;
    border-radius: var(--ui-radius-sm);
    transition: var(--transition-fast);

    &:hover {
        border-color: var(--text-dim);
        color: var(--text-dim);
    }

    &.active {
        border-color: var(--tertiary);
        color: var(--tertiary);
        box-shadow: 0 0 5px var(--tertiary-30);
    }
}

/* Modal Styling */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--surface-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
}



/* Image Modal */
#image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;

    &.hidden {
        display: none;
    }

    .modal-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--overlay-dark);
        backdrop-filter: blur(var(--space-md));
    }
}

.image-modal-content {
    position: relative;
    max-width: 90svw;
    max-height: 90svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10001;
}

.image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    #prev-image {
        left: -80px;
    }

    #next-image {
        right: -80px;
    }
}

#modal-image {
    max-width: 100%;
    max-height: 80svh;
    border: var(--ui-border-thin) solid var(--secondary);
    box-shadow: 0 0 40px var(--secondary-20);
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--surface-nav-80);
    border: var(--ui-border-thin) solid var(--secondary);
    color: var(--secondary);
    font-size: var(--text-2xl);
    padding: var(--space-md) 20px;
    cursor: pointer;
    z-index: 10002;
    transition: var(--transition-fast);

    &:hover {
        background: var(--secondary);
        color: var(--primary);
    }
}

/* Mobile nav adjustments */
@media (max-width: 768px) {
    .image-container {
        #prev-image {
            left: var(--space-md);
        }

        #next-image {
            right: var(--space-md);
        }
    }

    .nav-btn {
        padding: 5px 15px;
        font-size: var(--text-2xl);
    }

    #cluster-panel {
        width: min(92svw, 340px);
        min-width: min(92svw, 340px);
        max-width: min(92svw, 340px);
    }

    #cluster-panel-resize-handle {
        display: none;
    }
}

#image-counter {
    margin-top: 15px;
    color: var(--secondary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 2px;
}

#close-image-modal {
    position: absolute;
    top: -50px;
    right: 0;
    background: transparent;
    border: none;
    color: var(--secondary);
    font-size: var(--text-2xl);
    cursor: pointer;
    line-height: var(--lh-icon);

    &:hover {
        color: var(--white);
    }
}

.modal-content {
    width: 90%;
    max-width: 500px;
}

header {
    background: var(--primary);
    border-bottom: 2px solid var(--secondary);
    padding: var(--space-lg) 2rem;
    box-shadow: 0 0 20px var(--secondary-20);
    position: relative;
    z-index: 1000;
}

#header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h1 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--secondary);
    letter-spacing: var(--space-2xs);
    margin: 0;
    text-shadow: 0 0 var(--space-md) var(--secondary-50);

    span {
        color: var(--white);
        margin-left: var(--space-md);
        font-weight: 300;
    }
}

#header-status-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    color: var(--secondary);
    opacity: 0.8;
}

.header-action-btn {
    --header-btn-color: var(--secondary);
    background: transparent;
    border: var(--ui-border-thin) solid var(--header-btn-color);
    color: var(--header-btn-color);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-sm);
    cursor: pointer;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: var(--transition-fast);
    opacity: 1;

    &:hover {
        background: var(--header-btn-color);
        color: var(--primary);
    }

    svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    span {
        font-weight: bold;
    }
}

.header-action-btn-tertiary {
    --header-btn-color: var(--tertiary);
}

#about-btn {
    font-size: var(--text-md);
    line-height: 18px;
}

.status-label {
    letter-spacing: 1px;
    
    &.status-elevated {
        color: var(--tertiary);
    }

    &.status-critical {
        color: var(--status-critical);
    }
}

.status-led {
    width: var(--space-xs);
    height: var(--space-xs);
    background: var(--status-ok);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--status-ok);
    animation: blink 2s infinite;
    transition: background 0.5s ease, box-shadow 0.5s ease;

    &.led-amber {
        background: var(--tertiary);
        box-shadow: 0 0 5px var(--tertiary);
    }

    &.led-red {
        background: var(--status-critical);
        box-shadow: 0 0 5px var(--status-critical);
    }
}

.status-telemetry {
    font-family: monospace;
    opacity: 0.6;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Cluster icon pulse */
.leaflet-marker-icon.pulsing {
    filter: brightness(1.5) drop-shadow(0 0 var(--space-md) var(--secondary));
    z-index: 1000 !important;
    animation: clusterPulse 1.5s infinite ease-in-out;
}

@keyframes clusterPulse {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.5) drop-shadow(0 0 15px var(--secondary)); }
    100% { filter: brightness(1); }
}

/* Scanline Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(var(--scanline-dark) 50%, var(--black-10) 50%), linear-gradient(90deg, var(--scanline-red), var(--scanline-green), var(--scanline-blue));
    background-size: 100% 3px, 3px 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.2;
}

.nc-terminal {
    background: var(--primary);
    border: var(--ui-border-thin) solid var(--secondary);
    box-shadow: 0 0 30px var(--secondary-20);
    padding: 0;
    font-family: var(--font-body);
}

.terminal-header {
    background: var(--secondary);
    color: var(--primary);
    padding: 5px 15px;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: bold;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.terminal-body {
    padding: 20px;
    color: var(--white);
    font-size: var(--text-lg);

    p {
        margin-bottom: 15px;
        line-height: var(--lh-loose);
    }
}

.warning-text {
    color: var(--tertiary);
    font-weight: bold;
    font-size: var(--text-sm);
    padding: var(--space-md);
    border: var(--ui-border-thin) dashed var(--tertiary);
    background: var(--tertiary-05);
}

.terminal-btn {
    background: transparent;
    border: var(--ui-border-thin) solid var(--secondary);
    color: var(--secondary);
    padding: var(--space-sm) 20px;
    font-family: var(--font-heading);
    cursor: pointer;
    font-size: var(--text-sm);
    width: 100%;
    margin-top: var(--space-md);
    transition: var(--transition-fast);

    &:hover {
        background: var(--secondary);
        color: var(--primary);
    }
}

.about-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Attribution block — "Asset & data credits" heading, CDPR Fan Content
   disclaimer, then the per-asset credit list. Body reads at the modal text
   size; heading reuses the .parameters-section-title idiom (Orbitron, accent,
   uppercase) so it matches the Settings section headings. */
.about-credits {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--gray);

    p {
        margin-bottom: var(--space-xs);
        line-height: 1.5;
    }

    .about-credits-heading {
        margin: 0 0 var(--space-sm);
        font-family: var(--font-heading);
        font-size: var(--text-lg);
        color: var(--secondary);
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .about-credits-list {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    a {
        color: var(--secondary);
        text-decoration: underline;
        text-underline-offset: 2px;
    }
}

.terminal-link {
    display: block;
    color: var(--secondary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--text-md);
    padding: var(--space-xs) var(--space-md);
    border-left: 2px solid transparent;
    transition: var(--transition-fast);

    &:hover {
        border-left-color: var(--secondary);
        background: var(--secondary-05);
        color: var(--white);
    }
}

.terminal-link-logo {
    vertical-align: text-bottom;
    margin-right: 6px;
}

.hidden {
    display: none !important;
}

/* ── BBCode Header Button ─────────────────────────────────────────── */
.parameters-modal-content,
.showcase-modal-content {
    max-width: 420px;
    width: 95%;
}

.showcase-modal-actions {
    display: flex;
    gap: 8px;

    & > .terminal-btn {
        white-space: nowrap;
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
}

.showcase-modal-actions > #showcase-start-btn {
    flex: 3;
}

.showcase-modal-actions > #showcase-reset-btn,
.showcase-modal-actions > #close-showcase-modal {
    flex: 1;
    border-color: var(--gray);
    color: var(--gray);
}

.parameters-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.parameters-section-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-md);
    color: var(--secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.parameters-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: var(--ui-border-thin) solid var(--dark-accent);
    background: var(--black-30);
}

.parameters-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--white);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.parameters-close-btn {
    margin-top: 0;
}

/* Settings render toggles: match the Appearance section's control size
   (the theme select is --text-md), with the hint a step smaller. Scoped to
   the parameters modal so the overlay-panel toggles keep their own size. */
.parameters-section .overlay-toggle {
    font-size: var(--text-md);
}

/* Always-visible hint under a Settings checkbox (the toggles' hover-title made
   visible, per request) — a bit smaller than the setting label. */
.parameters-hint {
    margin: 0 0 var(--space-xs) calc(var(--space-md) + var(--space-2xs));
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--gray);

    a {
        color: var(--secondary);
        text-decoration: underline;
        text-underline-offset: 2px;
    }
}

/* ── Nexus Auto Badge ─────────────────────────────────────────────── */
.nexus-auto-badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: var(--space-xs);
    vertical-align: middle;
    cursor: help;
    background-image: url("../img/nexus-mods_favicon.ico");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ── BBCode Generator Modal ───────────────────────────────────────── */
.bbcode-modal-content {
    max-width: 560px;
    width: 95%;
}

.bbcode-modal-body {
    max-height: 80svh;
    overflow-y: auto;
}

.bbcode-form {
    display: flex;
    flex-direction: column;
}

.bbcode-field-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: 14px;
}

.bbcode-label {
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bbcode-optional {
    color: var(--gray);
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-xs);
}

.bbcode-coord-inputs {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
}

.coord-input-group {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.coord-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    color: var(--gray);
    min-width: var(--space-md);
}

.bbcode-coord-note {
    font-size: var(--text-xs);
    color: var(--tertiary);
    margin-top: 0.25rem;
    font-family: var(--font-body);
}

.bbcode-coord-inputs input[type="number"],
.bbcode-input,
.bbcode-select,
.bbcode-textarea {
    transition: border-color 0.2s ease;

    &:focus {
        border-color: var(--secondary);
    }
}

.bbcode-coord-inputs {
    input[type="number"] {
        width: 140px;
    }
}

.coord-help-btn {
    background: transparent;
    border: var(--ui-border-thin) solid var(--gray);
    color: var(--gray);
    font-family: var(--font-heading);
    font-size: var(--text-2xs);
    padding: var(--space-2xs) var(--space-sm);
    cursor: help;
    transition: var(--transition-fast);
    flex-shrink: 0;

    &:hover {
        border-color: var(--secondary);
        color: var(--secondary);
    }
}

.bbcode-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.bbcode-tag-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--gray);
    cursor: pointer;
    padding: 2px var(--space-xs);
    border: var(--ui-border-thin) solid var(--border-subtle);
    border-radius: var(--ui-radius-sm);
    transition: all 0.15s ease;
    user-select: none;

    &:hover {
        border-color: var(--tertiary);
        color: var(--tertiary);
    }

    input[type="checkbox"] {
        accent-color: var(--tertiary);
    }
}

.bbcode-checkbox-row {
    flex-direction: row;
    align-items: center;
}

.bbcode-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-md);
    color: var(--gray);
    cursor: pointer;

    input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }

    code {
        color: var(--secondary);
        font-family: monospace;
        font-size: var(--text-sm);
    }
}

.bbcode-output {
    width: 100%;
    background: var(--black-50);
    border: var(--ui-border-thin) solid var(--dark-accent);
    color: var(--secondary);
    padding: var(--space-md);
    font-family: monospace;
    font-size: var(--text-sm);
    resize: vertical;
    margin-top: var(--space-xs);
    line-height: var(--lh-relaxed);
}

.bbcode-copy-btn {
    margin-top: var(--space-xs) !important;
    border-color: var(--tertiary) !important;
    color: var(--tertiary) !important;

    &:hover {
        background: var(--tertiary) !important;
        color: var(--primary) !important;
    }
}

.bbcode-cet-command-block {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    background: var(--black-50);
    border: var(--ui-border-thin) solid var(--dark-accent);
    padding: var(--space-md);
    margin: var(--space-md) 0;
    border-radius: 2px;

    code {
        flex: 1;
        color: var(--secondary);
        font-family: monospace;
        font-size: var(--text-sm);
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-all;
        line-height: var(--lh-relaxed);
    }
}


/* ── BBCode Steps & Notes ────────────────────────────────────────── */
.bbcode-doc-link {
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
    display: inline-block;
}

.bbcode-steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0 0 var(--space-lg) 0;

    li {
        counter-increment: step;
        padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
        font-size: var(--text-md);
        color: var(--white);
        border-left: 2px solid var(--dark-accent);
        padding-left: var(--space-md);
        margin-bottom: var(--space-2xs);

        &::before {
            content: counter(step) ".";
            color: var(--secondary);
            font-family: var(--font-heading);
            font-weight: bold;
            font-size: var(--text-sm);
            margin-right: var(--space-sm);
        }

        strong {
            font-family: var(--font-heading);
            color: var(--secondary);
            font-size: var(--text-xs);
            letter-spacing: 1px;
        }

        code {
            color: var(--tertiary);
            font-size: var(--text-sm);
        }
    }
}

.bbcode-note {
    font-size: var(--text-sm);
    color: var(--gray);
    font-style: italic;
    margin-bottom: var(--space-lg);
}

/* ── MarkerCluster style ────────────────────────────────────────── */
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/* District outline hover-brighten: NCZ.Overlay flips the path's stroke-opacity
   between the faint baseline and the hover value; this animates the 250 ms fade
   to match the SCHEMA (Three.js) tween. Pane class added in overlay.js init(). */
.district-outline-pane path {
	transition: stroke-opacity 0.25s ease;
}

.marker-cluster-step {
    --cluster-hue: 120;
	background-color: hsl(
        var(--cluster-hue)
        var(--cluster-bg-saturation)
        var(--cluster-bg-lightness)
        / var(--cluster-bg-alpha)
    );

    div {
        background-color: hsl(
            var(--cluster-hue)
            var(--cluster-inner-saturation)
            var(--cluster-inner-lightness)
            / var(--cluster-inner-alpha)
        );
    }
}

.marker-cluster-step-0 { --cluster-hue: 96; }
.marker-cluster-step-1 { --cluster-hue: 72; }
.marker-cluster-step-2 { --cluster-hue: 48; }
.marker-cluster-step-3 { --cluster-hue: 24; }
.marker-cluster-step-4 { --cluster-hue: 360; }
.marker-cluster-step-5 { --cluster-hue: 342; }
.marker-cluster-step-6 { --cluster-hue: 324; }
.marker-cluster-step-7 { --cluster-hue: 306; }
.marker-cluster-step-8 { --cluster-hue: 288; }
.marker-cluster-step-9 { --cluster-hue: 270; }

.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;

    > div {
        width: 30px;
        height: 30px;
        margin-left: 5px;
        margin-top: 5px;

        text-align: center;
        border-radius: 15px;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: radial-gradient(
                circle at center,
                var(--overlay-dark) 40%,
                var(--black-50) 45%,
                transparent 78%
            );
            z-index: -1;
        }
    }

    span {
        line-height: var(--lh-cluster-count);
        text-shadow: 1px 1px var(--color-black);
        font-weight: bold;
        font-size: 15px;
        color: var(--color-white);
    }

    /* Active cluster — the one whose contents are currently in the cluster
       panel. Shared between Leaflet (SAT) and ThreeMarkers (SCHEMA) views. */
    &.marker-cluster-active {
        box-shadow:
            0 0 0 2px var(--secondary),
            0 0 var(--space-lg) var(--secondary-30);
        z-index: 999 !important;
    }
}


/* ── 3D pin layer (CSS2DRenderer overlay) ─────────────────────────────────
   .three-marker is the pin element CSS2DRenderer anchors at the world point.
   .three-popup-anchor is a zero-size wrapper at the world point; the inner
   .three-popup card is absolutely positioned above it so the height of the
   card never affects where it anchors. ::after draws the downward arrow.
   ─────────────────────────────────────────────────────────────────────── */

.three-marker {
    pointer-events: auto;
    cursor: pointer;
}

/* District / subdistrict name labels (CSS2DObject at the polygon centroid).
   Colour comes per-label from --label-color (the district's palette colour).
   pointer-events:none so labels never intercept the outline hover or pins.
   The .district-label-anchor is what CSS2DRenderer positions (it owns the inline
   transform); the inner .district-label scales/glows on hover independently. */
.district-label-anchor {
    pointer-events: none;
}

.district-label {
    pointer-events: none;
    font-family: var(--font-heading);
    color: var(--label-color, var(--white));
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
    /* Dark halo keeps the name legible over the busy map without a filled plate. */
    text-shadow:
        0 0 4px var(--surface-tooltip-95, rgba(2, 8, 20, 0.95)),
        0 1px 3px rgba(0, 0, 0, 0.9);
    user-select: none;
    /* Faint by default (like the outlines), brightening only on hover. Roughly
       half the previous baseline so names stay readable but recede; the hover
       state lifts the focused one to full. 250 ms matches the outline brighten. */
    opacity: 0.5;
    transition: opacity 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
}

.district-label-district {
    font-size: var(--text-sm);
    letter-spacing: 0.14em;
}

.district-label-subdistrict {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    opacity: 0.45;
}

/* Outline-hover emphasis: the hovered district/subdistrict's label pops to full
   opacity, scales up slightly, and gains a colour glow — paired with the
   outline brighten in setHoveredDistrict (3D) / onMapMouseMove (2D). */
.district-label.district-label-hover {
    opacity: 1;
    transform: scale(1.18);
    text-shadow:
        0 0 6px var(--label-color, #fff),
        0 0 12px var(--surface-tooltip-95, rgba(2, 8, 20, 0.95)),
        0 1px 3px rgba(0, 0, 0, 0.95);
}

/* 2D (Leaflet) labels reuse the .district-label skin via a permanent centre
   tooltip; strip Leaflet's bubble/arrow so only the text shows. Leaflet
   positions this root, leaving the inner .district-label free to scale on hover
   (same trick as the 3D .district-label-anchor). */
.leaflet-tooltip.district-label-tooltip {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    white-space: nowrap;
    pointer-events: none;
}

.leaflet-tooltip.district-label-tooltip::before {
    display: none; /* no arrow */
}

/* The satellite imagery is bright and busy, so the 3D schematic's soft halo
   isn't enough — give the SAT labels a solid dark text-casing (1px outline in
   all four diagonals + glow) and a heavier weight / more present baseline so the
   names stay legible over any tile. Scoped to the Leaflet tooltip so the 3D
   labels keep their faint look. Higher specificity than the shared hover rule,
   so the hover override below must match it (4 classes) to still win. */
.leaflet-tooltip.district-label-tooltip .district-label {
    /* Faded baseline (so the fade + hover-emphasis still read) but kept legible
       by the solid dark casing below — the outline carries contrast even at low
       fill opacity, where the old soft halo couldn't. */
    opacity: 0.6;
    font-weight: 700;
    text-shadow:
        -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
        0 0 4px #000, 0 0 7px rgba(0, 0, 0, 0.9);
}

.leaflet-tooltip.district-label-tooltip .district-label.district-label-hover {
    opacity: 1;
    /* keep the dark casing under the colour glow on hover */
    text-shadow:
        -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
        0 0 6px var(--label-color, #fff), 0 0 12px #000;
}

/* 3D tooltip anchor — wraps the shared `.pin-tooltip` skin (defined above).
   CSS2DRenderer projects the anchor to the pin's world position; the inner
   .pin-tooltip is then offset upward in screen space so the arrow points
   down at the pin. Single instance reused on every hover. */
.three-tooltip-anchor {
    position: relative;
    width: 0;
    height: 0;
    pointer-events: none;
    /* Above pins (auto inline 0–~300), below popup (500). 400 is the deliberate
       middle slot. !important is required to beat CSS2DRenderer's per-frame
       inline z-index. */
    z-index: 400 !important;

    /* Override Leaflet's left:0/top:0 (set dynamically there) so the inner
       .pin-tooltip sits centred horizontally and above the world point. */
    .pin-tooltip {
        left: 50%;
        top: auto;
        bottom: 16px;
        transform: translateX(-50%);
    }
}

.three-popup-anchor {
    /* CSS2DRenderer applies translate(-50%, -50%) — a zero-size box centres
       its inner content's reference point exactly on the world position. */
    position: relative;
    width: 0;
    height: 0;
    pointer-events: none;
    /* CSS2DRenderer sets style.zIndex inline per frame based on camera
       distance, which can place a closer pin in front of a popup attached
       to a further pin. !important is the only way to beat inline styles
       — combined with renderOrder=1000 on the CSS2DObject (see three-markers.js)
       this guarantees the popup always paints above every pin.
       Value 500 is deliberately chosen between:
         - CSS2DRenderer's auto-assigned zIndex range (0–~300 for our pin count)
         - the sidebar's z-index 1000
       so the popup wins against pins but still loses to the sidebar/header/modals. */
    z-index: 500 !important;
}

/* 3D-specific positioning — sizes the popup and floats it above (default)
   or below (when `.ncz-popup-bottom` is added) the anchor's world point.
   Visual chrome (background, arrow, category colour) comes from the shared
   `.ncz-dynamic-popup` rules above; this rule only deals with layout. */
.three-popup.ncz-dynamic-popup {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    max-width: 360px;
    pointer-events: auto;
    /* Default: popup is above the pin, 18px clearance for the arrow. */
    bottom: 18px;
    top: auto;
    z-index: 10;

    /* Auto-flip: shared `.ncz-popup-bottom` direction class repositions the
       popup below the pin (arrow handled by the shared chrome rules). */
    &.ncz-popup-bottom {
        bottom: auto;
        top: 18px;
    }
}