/* GTA6 STREET — Leonida atlas map surface
   Keeps the imported GTADB coordinate plane square, renders the matching
   CC BY 4.0 GTADB GTA VI map tiles beneath markers, and reduces marker noise
   so geography remains the dominant visual at the default zoom. */

.world-atlas-page .world-atlas-canvas {
    min-height: 660px;
    height: clamp(660px, 72vh, 900px);
    isolation: isolate;
    background:
        linear-gradient(rgba(78, 226, 220, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78, 226, 220, .026) 1px, transparent 1px),
        radial-gradient(circle at 50% 46%, rgba(78, 226, 220, .11), transparent 38%),
        radial-gradient(circle at 76% 70%, rgba(255, 79, 135, .055), transparent 34%),
        #03070a;
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.world-atlas-page .world-atlas-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2, 6, 9, .66), transparent 18%, transparent 82%, rgba(2, 6, 9, .66)),
        linear-gradient(180deg, rgba(2, 6, 9, .4), transparent 16%, transparent 84%, rgba(2, 6, 9, .62));
}

/*
 * GTADB imports use a 20,000 × 20,000 coordinate window. The previous plane
 * inherited inset:0 from the legacy map and stretched that square coordinate
 * system across a landscape viewport. Keep the plane square and center it.
 * CSS individual `translate` is deliberately used so Alpine can continue to
 * own the element's `transform` for drag + zoom without overwriting centering.
 */
.world-atlas-page .world-atlas-plane {
    inset: auto;
    left: 50%;
    top: 50%;
    width: min(88%, 760px);
    height: auto;
    aspect-ratio: 1 / 1;
    translate: -50% -50%;
    overflow: hidden;
    transform-origin: 50% 50%;
    border: 1px solid rgba(78, 226, 220, .16);
    background: #071018;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .025),
        0 30px 90px rgba(0, 0, 0, .45),
        0 0 70px rgba(78, 226, 220, .055);
}

.world-atlas-page .world-atlas-plane > img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #071018;
    filter: saturate(.9) contrast(1.05) brightness(.82);
}

/*
 * GTADB z=1 GTA VI "yanis,14" tiles cover x=0..4 and y=1..5.
 * At z=1 the imported coordinate bounds crop a 1250px square from that 1280px
 * tile mosaic. These offsets map the remote tile mosaic back onto exactly the
 * same normalized coordinate space used by our imported markers:
 *   width/height 1280 / 1250 = 102.4%
 *   x crop start 24px         = -1.92%
 *   y crop start 18px         = -1.44%
 */
.world-atlas-tile-surface {
    position: absolute;
    left: -1.92%;
    top: -1.44%;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    width: 102.4%;
    height: 102.4%;
    overflow: hidden;
    background: #071018;
    pointer-events: none;
    user-select: none;
}

.world-atlas-tile-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 9, 13, .02), rgba(5, 9, 13, .12)),
        radial-gradient(circle at 50% 52%, transparent 48%, rgba(4, 8, 12, .18) 100%);
    mix-blend-mode: multiply;
}

.world-atlas-tile-surface img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    filter: saturate(.9) contrast(1.04) brightness(.9);
    pointer-events: none;
}

/* Keep all map points above either an editorial layer image or GTADB tiles. */
.world-atlas-page .world-atlas-marker {
    z-index: 8;
    width: 9px;
    height: 9px;
    border-width: 1px;
    border-color: rgba(3, 7, 10, .92);
    opacity: .86;
    box-shadow: 0 0 0 1px rgba(78, 226, 220, .58), 0 0 7px rgba(78, 226, 220, .16);
    transition:
        width .14s ease,
        height .14s ease,
        opacity .14s ease,
        box-shadow .14s ease,
        filter .14s ease;
}

.world-atlas-page .world-atlas-marker > span {
    inset: 2px;
}

.world-atlas-page .world-atlas-marker.is-approximate {
    width: 11px;
    height: 11px;
    opacity: .78;
}

.world-atlas-page .world-atlas-marker:hover,
.world-atlas-page .world-atlas-marker:focus-visible {
    z-index: 20;
    width: 16px;
    height: 16px;
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 18px rgba(78,226,220,.66);
}

.world-atlas-page .world-atlas-marker.is-selected {
    z-index: 24;
    width: 19px;
    height: 19px;
    opacity: 1;
    border-width: 2px;
    box-shadow: 0 0 0 4px rgba(255,79,135,.17), 0 0 24px rgba(255,79,135,.68);
}

.world-atlas-page .world-map-marker--business {
    box-shadow: 0 0 0 1px rgba(245,185,76,.7), 0 0 7px rgba(245,185,76,.18);
}

/* The map should read like a dedicated explorer, not a dashboard panel. */
.world-atlas-page .world-atlas-map__controls {
    top: 50%;
    left: 16px;
    translate: 0 -50%;
}

.world-atlas-page .world-atlas-map__controls button,
.world-atlas-page .world-atlas-map__controls button:last-child {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 4px;
    background: rgba(6, 12, 17, .88);
}

.world-atlas-map__hud {
    left: 16px;
    right: 16px;
    top: 16px;
}

.world-atlas-map__mode,
.world-atlas-map__readout {
    border-radius: 4px;
    background: rgba(6, 12, 17, .86);
}

.world-atlas-legend {
    left: 50%;
    right: auto;
    bottom: 16px;
    translate: -50% 0;
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 120px);
    border-radius: 4px;
    background: rgba(6, 12, 17, .88);
}

.world-atlas-page .world-atlas-attribution {
    flex-wrap: wrap;
    gap: 5px 7px;
}

.world-atlas-page .world-atlas-attribution a {
    color: #93dcd9;
    text-decoration: underline;
    text-decoration-color: rgba(78,226,220,.36);
    text-underline-offset: 3px;
}

.world-atlas-page .world-atlas-attribution a:hover,
.world-atlas-page .world-atlas-attribution a:focus-visible {
    color: #fff;
    text-decoration-color: var(--atlas-cyan);
}

/* Give the inspector a slightly smaller share now that the map is the hero. */
@media (min-width: 1181px) {
    .world-atlas-page .world-atlas-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
}

@media (max-width: 1180px) {
    .world-atlas-page .world-atlas-plane {
        width: min(88%, 680px);
    }

    .world-atlas-page .world-atlas-canvas {
        min-height: 620px;
        height: clamp(620px, 68vh, 780px);
    }
}

@media (max-width: 900px) {
    .world-atlas-page .world-atlas-layout {
        grid-template-columns: 1fr;
    }

    .world-atlas-page .world-atlas-map {
        border-right: 0;
        border-bottom: 1px solid var(--atlas-line);
    }

    .world-atlas-page .world-atlas-plane {
        width: min(90%, 620px);
    }

    .world-atlas-page .world-atlas-canvas {
        min-height: 580px;
        height: min(72vh, 720px);
    }

    .world-atlas-page .world-atlas-inspector {
        min-height: 300px;
    }
}

@media (max-width: 620px) {
    .world-atlas-page .world-atlas-canvas {
        min-height: 500px;
        height: 68vh;
        max-height: 620px;
    }

    .world-atlas-page .world-atlas-plane {
        width: min(96%, 520px);
    }

    .world-atlas-map__hud {
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .world-atlas-map__mode {
        max-width: calc(100% - 72px);
    }

    .world-atlas-map__readout {
        display: none;
    }

    .world-atlas-page .world-atlas-map__controls {
        left: 10px;
        top: auto;
        bottom: 58px;
        translate: 0;
        display: flex;
    }

    .world-atlas-page .world-atlas-map__controls button,
    .world-atlas-page .world-atlas-map__controls button:last-child {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .world-atlas-legend {
        left: 10px;
        right: 10px;
        bottom: 10px;
        translate: 0;
        width: auto;
        max-width: none;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .world-atlas-legend::-webkit-scrollbar {
        display: none;
    }

    .world-atlas-legend span {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .world-atlas-page .world-atlas-marker {
        transition: none;
    }
}