/* Local map tab (Crash Site) */

/* The Local Map host must fill the pane so the grid has a definite height.
   Otherwise the CSS grid rows size to content and the Actions panel can balloon. */
#crashSiteLocalMapContainer {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

#crashSiteLocalMapContainer > .localmap-root {
    flex: 1 1 auto;
    min-height: 0;
}

/* Layout: center the map within the tab */
.crashsite-pane .localmap-root {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 0;
    flex: 1 1 auto;
}

.localmap-layout {
    /* Reserve a fixed bottom strip for Actions so the top row (map + tile)
       never changes height when the Tile panel is collapsed/expanded. */
    /* One-row target: header + a single row of buttons. */
    /* Add a few pixels so hover/focus button effects don't cause scrollbar flicker. */
    --localmap-actions-height: clamp(94px, 12vh, 112px);
    width: 100%;
    display: grid;
    /* Give the map more room; keep the Tile panel narrower */
    grid-template-columns: minmax(0, 1fr) clamp(200px, 16vw, 260px);
    grid-template-areas:
        "map info"
        "actions actions";
    /* Fixed-height Actions row; top row takes the remaining space */
    grid-template-rows: minmax(0, 1fr) var(--localmap-actions-height);
    gap: 12px;
    align-items: stretch;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
}

/* Phone-landscape: make the map feel larger by tightening layout spacing.
   Keep desktop/tablet spacing unchanged. */
@media (max-width: 600px),
       (max-width: 900px) and (max-height: 450px),
       (hover: none) and (pointer: coarse) and (max-width: 900px) and (max-height: 600px) {
    .localmap-layout {
        gap: 1px;
        /* Smaller Actions strip on phone-landscape (single compact row) */
        --localmap-actions-height: clamp(42px, 7vh, 52px);
    }

    .localmap-mapwrap {
        padding: 0;
        border-radius: 8px;
    }

    .localmap-card {
        padding: 4px;
        border-radius: 8px;
    }
}

html.is-compact .localmap-layout {
    gap: 1px;
    --localmap-actions-height: clamp(42px, 7vh, 52px);
}

html.is-compact .localmap-mapwrap {
    padding: 0;
    border-radius: 8px;
}

html.is-compact .localmap-card {
    padding: 4px;
    border-radius: 8px;
}

/* Phone-landscape: shrink coord headers and overlay zoom so the map can use the full height. */
@media (max-width: 600px),
       (max-width: 900px) and (max-height: 450px),
       (hover: none) and (pointer: coarse) and (max-width: 900px) and (max-height: 600px) {
    .localmap-shell {
        grid-template-columns: 14px 1fr;
        /* Keep 3 rows so existing grid placements remain valid, but make controls row 0 height. */
        grid-template-rows: 12px minmax(0, 1fr) 0px;
        gap: 2px;
    }

    .localmap-label {
        font-size: 8px;
        letter-spacing: 0.2px;
        line-height: 1;
    }

    .localmap-grid-viewport {
        border-radius: 6px;
    }

    .localmap-bottom {
        position: absolute;
        right: 6px;
        bottom: 6px;
        margin: 0;
        pointer-events: none;
        z-index: 8;
    }

    .localmap-bottom .localmap-zoom {
        pointer-events: auto;
    }

    .localmap-zoom {
        padding: 4px 6px;
        gap: 6px;
        border-radius: 9px;
        background: rgba(0, 0, 0, 0.42);
    }


html.is-compact .localmap-shell {
    grid-template-columns: 14px 1fr;
    grid-template-rows: 12px minmax(0, 1fr) 0px;
    gap: 2px;
}

html.is-compact .localmap-label {
    font-size: 8px;
    letter-spacing: 0.2px;
    line-height: 1;
}

html.is-compact .localmap-grid-viewport {
    border-radius: 6px;
}

html.is-compact .localmap-bottom {
    position: absolute;
    right: 6px;
    bottom: 6px;
    margin: 0;
    pointer-events: none;
    z-index: 8;
}

html.is-compact .localmap-bottom .localmap-zoom {
    pointer-events: auto;
}

html.is-compact .localmap-zoom {
    padding: 4px 6px;
    gap: 6px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.42);
}
    .localmap-zoom-readout {
        min-width: 34px;
        font-size: 11px;
    }

    .localmap-zoom-btn {
        width: 28px;
        height: 24px;
        border-radius: 7px;
        font-size: 15px;
    }
}

.localmap-layout.is-tile-collapsed {
    /* Shrink the Tile panel column so the map widens */
    grid-template-columns: minmax(0, 1fr) 44px;
}

.localmap-mapwrap {
    grid-area: map;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 0;
    min-width: 0;
     /* IMPORTANT: grid items already stretch; avoid height:100% + padding (content-box)
         which can make this column visually taller than the Tile panel. */
     box-sizing: border-box;
    /* Match the Tile panel card edge/shadow so both columns align visually.
       The inner .localmap-shell is layout-only (no outer border/shadow). */
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.20);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.25);
    padding: 8px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.localmap-infowrap {
    grid-area: info;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Tile panel: selected coordinate highlight */
.localmap-selected-coord {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-weight: 900;
    letter-spacing: 0.6px;
    font-size: 1.12em;
    color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.98);
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.10);
    border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.35);
    text-shadow:
        0 0 8px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.55),
        0 0 18px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.25);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.55) inset,
        0 0 14px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.18);
    animation: localmap-selected-coord-pulse 2.4s ease-in-out infinite;
}

@keyframes localmap-selected-coord-pulse {
    0%, 100% {
        background: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.08);
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.55) inset,
            0 0 12px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.14);
        text-shadow:
            0 0 7px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.45),
            0 0 14px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.18);
    }
    50% {
        background: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.14);
        box-shadow:
            0 0 0 1px rgba(0,0,0,0.55) inset,
            0 0 18px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.22);
        text-shadow:
            0 0 10px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.62),
            0 0 20px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.28);
    }
}

.localmap-selected-coord__letters {
    font-size: 1.05em;
}

.localmap-selected-coord__numbers {
    font-size: 1.05em;
}

.localmap-infowrap.is-collapsed .localmap-card-body {
    display: none;
}

.localmap-infowrap.is-collapsed .localmap-card {
    padding: 10px 6px;
}

.localmap-infowrap.is-collapsed .localmap-card-header h3 {
    display: none;
}

.localmap-infowrap.is-collapsed::before {
    content: 'Tile';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.95);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow:
        0 0 2px rgba(0,0,0,0.85),
        0 0 8px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.35);
}

.localmap-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.localmap-info-collapse-btn {
    border: 0;
    background: transparent;
    padding: 6px;
    margin: -6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.localmap-info-collapse-btn .chevrons-icon {
    width: 22px;
    height: 16px;
    stroke: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.95);
    stroke-width: 2.5;
    fill: none;
    filter: drop-shadow(0 0 3px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.7));
    transform-origin: 50% 50%;
    transition: transform 140ms ease, filter 140ms ease;
    /* Default: chevron points right */
    transform: rotate(90deg);
}

.localmap-info-collapse-btn:hover .chevrons-icon,
.localmap-info-collapse-btn:focus .chevrons-icon,
.localmap-info-collapse-btn:focus-visible .chevrons-icon {
    filter: drop-shadow(0 0 5px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.9));
}

.localmap-infowrap.is-collapsed .localmap-info-collapse-btn .chevrons-icon {
    /* When collapsed, point left to indicate expand */
    transform: rotate(-90deg);
}

.localmap-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.20);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
}

/* Tile markers (small top-left corner icons) */
.localmap-tile .localmap-markers {
    position: absolute;
    left: 6px;
    top: 6px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    z-index: 4;
    pointer-events: none;
}

/* Centered warning badge for important local-map alert tiles ("!") */
.localmap-tile .localmap-tile-alert {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    color: #111;
    background: #ffd84a;
    box-shadow:
        0 0 8px rgba(255, 216, 74, 0.92),
        0 0 16px rgba(255, 216, 74, 0.60),
        0 0 26px rgba(255, 216, 74, 0.32);
    z-index: 5;
    pointer-events: none;
    animation: localmapTileAlertPulse 1600ms ease-in-out infinite;
    will-change: transform, box-shadow;
}

@keyframes localmapTileAlertPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 8px rgba(255, 216, 74, 0.92),
            0 0 16px rgba(255, 216, 74, 0.60),
            0 0 26px rgba(255, 216, 74, 0.32);
    }
    50% {
        transform: translate(-50%, -52%) scale(1.15);
        box-shadow:
            0 0 14px rgba(255, 216, 74, 0.98),
            0 0 26px rgba(255, 216, 74, 0.72),
            0 0 42px rgba(255, 216, 74, 0.40);
    }
}

@media (prefers-reduced-motion: reduce) {
    .localmap-tile .localmap-tile-alert {
        animation: localmapTileAlertGlow 2200ms ease-in-out infinite;
    }
}

@keyframes localmapTileAlertGlow {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(255, 216, 74, 0.85),
            0 0 16px rgba(255, 216, 74, 0.52),
            0 0 26px rgba(255, 216, 74, 0.28);
        opacity: 0.92;
    }
    50% {
        box-shadow:
            0 0 14px rgba(255, 216, 74, 0.98),
            0 0 26px rgba(255, 216, 74, 0.70),
            0 0 42px rgba(255, 216, 74, 0.36);
        opacity: 1;
    }
}

/* Subtle motion for the corner alert marker variant too (if used). */
.localmap-marker--alert {
    animation: localmapCornerAlertPulse 1600ms ease-in-out infinite;
    will-change: transform, box-shadow;
}

@keyframes localmapCornerAlertPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.10);
    }
}

@media (prefers-reduced-motion: reduce) {
    .localmap-marker--alert {
        animation: localmapCornerAlertGlow 2200ms ease-in-out infinite;
    }
}

@keyframes localmapCornerAlertGlow {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 6px 14px rgba(0,0,0,0.55);
        opacity: 0.92;
    }
    50% {
        box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 8px 18px rgba(0,0,0,0.58);
        opacity: 1;
    }
}

.localmap-tile .localmap-marker {
    position: relative;
    transform: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 12px;
    line-height: 1;
    color: rgba(255,255,255,0.95);
    background: rgba(0,0,0,0.72);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 6px 14px rgba(0,0,0,0.55);
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.localmap-marker--alert {
    border-color: rgba(255, 213, 74, 0.55);
    background-color: rgba(255, 213, 74, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M11 3h2v11h-2z'/%3E%3Cpath fill='%23ffffff' d='M11 16h2v2h-2z'/%3E%3C/svg%3E");
}

.localmap-marker--rest {
    border-color: rgba(138, 215, 255, 0.55);
    background-color: rgba(138, 215, 255, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 12a3 3 0 1 1 6 0v1H7z'/%3E%3Cpath fill='%23ffffff' d='M4 13h16v4H4z'/%3E%3Cpath fill='%23ffffff' d='M5 17h2v2H5zM17 17h2v2h-2z'/%3E%3C/svg%3E");
}

.localmap-marker--berries {
    border-color: rgba(255, 122, 168, 0.60);
    background-color: rgba(255, 122, 168, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='13' r='4' fill='%23ffffff'/%3E%3Ccircle cx='15' cy='13' r='4' fill='%23ffffff'/%3E%3Cpath fill='%23ffffff' d='M12 6c2 0 3 1 3 3h-2c0-1-.5-1.5-1-1.5S11 8 11 9H9c0-2 1-3 3-3z'/%3E%3C/svg%3E");
}

.localmap-marker--water {
    border-color: rgba(107, 214, 255, 0.55);
    background-color: rgba(107, 214, 255, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 2C10 6 6 10 6 14a6 6 0 1 0 12 0c0-4-4-8-6-12z'/%3E%3C/svg%3E");
}

.localmap-marker--cave {
    border-color: rgba(190, 190, 210, 0.55);
    background-color: rgba(190, 190, 210, 0.10);
}

.localmap-marker--camp {
    border-color: rgba(183, 255, 159, 0.55);
    background-color: rgba(183, 255, 159, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 4l8 14H4z'/%3E%3Cpath fill='%23000000' opacity='0.15' d='M12 7l5 9H7z'/%3E%3C/svg%3E");
}

.localmap-marker--chemicals {
    border-color: rgba(185, 140, 255, 0.60);
    background-color: rgba(185, 140, 255, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 2h6v2h-1v5.2l3.6 6.3A4 4 0 0 1 14.1 21H9.9a4 4 0 0 1-3.5-5.5L10 9.2V4H9z'/%3E%3Cpath fill='%23000000' opacity='0.18' d='M10.5 12h3l2 3.5a2.5 2.5 0 0 1-2.2 3.8H10.7a2.5 2.5 0 0 1-2.2-3.8z'/%3E%3C/svg%3E");
}

/* POI points (single-tile POIs like Base Camp) */
.localmap-tile.is-poi-point {
    box-shadow: inset 0 0 0 2px rgba(183, 255, 159, 0.18);
}

.localmap-card-header h3 {
    margin: 0;
    font-size: 14px;
    color: #90EE90;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.localmap-card-body {
    margin-top: 10px;
    color: rgba(255,255,255,0.80);
    font-size: 13px;
    line-height: 1.35;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.localmap-info-card {
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
}

.localmap-info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    min-width: 0;
}

.localmap-info-row .k {
    opacity: 0.75;
    flex: 0 0 auto;
    white-space: nowrap;
}

.localmap-info-row .v {
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Tile panel status coloring */
.localmap-info-row .v.status--explored { color: #69f0ae; }
.localmap-info-row .v.status--unexplored { color: #FFD54F; }
.localmap-info-row .v.status--unknown { color: #FF5252; }
.localmap-info-row .v.status--blocked { color: #FF5252; }

.localmap-divider {
    height: 1px;
    margin: 10px 0;
    background: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.16);
}

.localmap-note {
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    line-height: 1.35;
}

.localmap-shell {
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    /* Fixed height: do not let width changes (Tile collapse) affect height. */
    aspect-ratio: auto;
    min-height: 0;
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 34px 1fr;
    /* Add a small bottom row for controls (zoom) */
    grid-template-rows: 26px minmax(0, 1fr) 34px;
    gap: 6px;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    position: relative;
    overflow: hidden;
}

/* Subtle scanner/noise underlay */
.localmap-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 100% at 40% 30%, rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.10), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
        repeating-linear-gradient(0deg, rgba(127, 255, 212, 0.035) 0px, rgba(127, 255, 212, 0.035) 1px, transparent 1px, transparent 4px);
    opacity: 0.55;
    pointer-events: none;
}

.localmap-corner {
    grid-column: 1;
    grid-row: 1;
}

.localmap-top {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(var(--cols, 11), 1fr);
    align-items: center;
}

.localmap-left {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-rows: repeat(var(--rows, 9), 1fr);
    align-items: center;
}

.localmap-label {
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    letter-spacing: 0.6px;
    text-align: center;
    text-transform: uppercase;
    user-select: none;
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
}

.localmap-label > span {
    position: relative;
    z-index: 1;
}

.localmap-label.is-selected-axis {
    color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.98);
    font-weight: 900;
    text-shadow:
        0 0 8px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.55),
        0 0 18px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.22);
}

.localmap-label.is-selected-axis::before {
    content: "";
    position: absolute;
    inset: 2px 3px;
    border-radius: 8px;
    background: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.12);
    border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.35);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.55) inset,
        0 0 16px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.14);
    z-index: 0;
}

.localmap-grid-viewport {
    grid-column: 2;
    grid-row: 2;

    /* Allow the viewport to shrink inside the fixed shell grid,
       otherwise it can push the bottom controls off-screen and get clipped. */
    min-height: 0;

    border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.22);
    border-radius: 8px;
    overflow: hidden;

    position: relative;
    z-index: 1;

    user-select: none;
    touch-action: none;
}

.localmap-grid-viewport.is-pannable {
    cursor: grab;
}

.localmap-grid-viewport.is-panning {
    cursor: grabbing;
}

.localmap-grid-pan {
    width: 100%;
    height: 100%;
    min-height: 0;
    transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0);
    will-change: transform;
    display: block;
}

.localmap-grid {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: repeat(var(--cols, 11), 1fr);
    grid-template-rows: repeat(var(--rows, 9), 1fr);

     /* Background image under the grid/tiles.
         Use a full stretch so we don't show "letterbox" gaps that can look like the image is cut off,
         especially when the map is zoomed/panned in compact phone-landscape. */
     background-image: url("../../assets/images/mapback2.png");
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;

    position: relative;
    z-index: 1;

    /* Zoom (applied via --zoom on .localmap-shell) */
    transform: scale(var(--zoom, 1));
    transform-origin: center;
    will-change: transform;
}

.localmap-path-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* Keep route hints below per-tile markers/arrows so gameplay cues stay readable */
    z-index: 2;
    pointer-events: none;
}

.localmap-path-overlay polyline {
    fill: none;
    stroke: rgba(80, 255, 140, 0.92);
    stroke-width: 0.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Dotted/condensed route hint */
    stroke-dasharray: 0.55 1.55;
    filter: drop-shadow(0 0 1px rgba(80, 255, 140, 0.22));
    opacity: 0.62;
}

.localmap-path-overlay circle {
    /* Target ring marker (subtle) */
    fill: rgba(0, 0, 0, 0);
    stroke: rgba(80, 255, 140, 0.90);
    stroke-width: 0.45;
    filter: drop-shadow(0 0 2px rgba(80, 255, 140, 0.28));
    opacity: 0.75;
}

.localmap-path-overlay[data-kind="traverse"] circle {
    stroke: rgba(90, 255, 150, 0.95);
    filter: drop-shadow(0 0 3px rgba(80, 255, 140, 0.40));
}

.localmap-path-overlay[data-kind="traverse"] polyline {
    /* Keep traverse preview the same green as movement hints */
    stroke: rgba(80, 255, 140, 0.92);
    filter: drop-shadow(0 0 2px rgba(80, 255, 140, 0.28));
}

.localmap-travel-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 245, 170, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow:
        0 0 10px rgba(255, 245, 170, 0.65),
        0 0 18px rgba(255, 245, 170, 0.25),
        0 0 22px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.12);
    z-index: 7;
    pointer-events: none;
}

.localmap-grid.is-player-traveling .localmap-tile.is-player::after,
.localmap-grid.is-player-traveling .localmap-tile.is-player::before {
    opacity: 0;
}

.localmap-bottom {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Grid lines */
.localmap-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(120,255,210,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120,255,210,0.08) 1px, transparent 1px);
    background-size:
        calc(100% / var(--cols, 11)) 100%,
        100% calc(100% / var(--rows, 9));
    pointer-events: none;
    opacity: 0.8;
}

.localmap-tile {
    position: relative;
    background: rgba(0,0,0,0.12);
    cursor: pointer;
}

/* Interior focus: while selecting POI interior tiles (and the player is inside),
   slightly darken exterior tiles to keep attention on the interior layout. */
.localmap-root.dim-exterior .localmap-tile:not(.is-poi-area):not(.is-unknown)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    pointer-events: none;
    z-index: 1;
}

/* Exterior focus: while selecting exterior tiles (and the player is outside),
   slightly darken POI tiles so the outside terrain reads cleanly. */
.localmap-root.dim-poi .localmap-tile.is-poi-area:not(.is-unknown)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    pointer-events: none;
    z-index: 1;
}

/* Base camp overlay art (shown after camp is established). */
.localmap-basecamp-overlay {
    position: absolute;
    inset: 0;
    background-image: url("../../assets/images/basecamp.png");
    background-repeat: no-repeat;
    background-position: center;
    /* Stretch to fill the tile so it reads as "built here". */
    background-size: 100% 100%;
    /* Blend out the black matte and integrate with the map art. */
    mix-blend-mode: screen;
    opacity: 0.82;
    filter: saturate(1.05) contrast(1.04);
    pointer-events: none;
    z-index: 1;
}

/* Laboratory overlay art (G3) */
.localmap-laboratory-overlay {
    position: absolute;
    inset: 0;
    background-image: url("../../assets/images/localmap/laboratory.png");
    background-repeat: no-repeat;
    background-position: center;
    /* Keep the border inside the tile. */
    background-size: 90% 90%;
    /* Render as-is so the black border reads intentional. */
    mix-blend-mode: normal;
    opacity: 0.80;
    filter: none;
    transform: rotate(180deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 1;
}

/* Cafeteria overlay art (D6) */
.localmap-cafeteria-overlay {
    position: absolute;
    inset: 0;
    background-image: url("../../assets/images/localmap/cafeteria.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% 90%;
    mix-blend-mode: normal;
    opacity: 0.80;
    filter: none;
    transform: rotate(180deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 1;
}

/* Crew Quarters overlay art (F6) */
.localmap-crewquarters-overlay {
    position: absolute;
    inset: 0;
    background-image: url("../../assets/images/localmap/crewquarters.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% 90%;
    mix-blend-mode: normal;
    opacity: 0.80;
    filter: none;
    transform: rotate(180deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 1;
}

/* Power Core overlay art (H4) */
.localmap-powercore-overlay {
    position: absolute;
    inset: 0;
    background-image: url("../../assets/images/localmap/powercore.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% 90%;
    mix-blend-mode: normal;
    opacity: 0.80;
    filter: none;
    transform: rotate(180deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 1;
}

/* Captain's Quarters overlay art (G7) */
.localmap-captainsquarters-overlay {
    position: absolute;
    inset: 0;
    background-image: url("../../assets/images/localmap/captainsquarters.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% 90%;
    mix-blend-mode: normal;
    opacity: 0.80;
    filter: none;
    transform: rotate(180deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 1;
}

/* Bridge overlay art (H6) */
.localmap-bridge-overlay {
    position: absolute;
    inset: 0;
    background-image: url("../../assets/images/localmap/bridge.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% 90%;
    mix-blend-mode: normal;
    opacity: 0.80;
    filter: none;
    transform: rotate(180deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 1;
}

/* Cave entry overlay art (B6) */
.localmap-caveentry-overlay {
    position: absolute;
    inset: 0;
    background-image: url("../../assets/images/localmap/caveentry.png");
    background-repeat: no-repeat;
    background-position: center;
    /* Stretch to fill the tile so it reads as "built here". */
    background-size: 100% 100%;
    /* Blend out the black matte and integrate with the map art. */
    mix-blend-mode: screen;
    opacity: 0.82;
    filter: saturate(1.05) contrast(1.04);
    pointer-events: none;
    z-index: 1;
}

/* Thorny wall overlay art (C5) */
.localmap-thornwall-overlay {
    position: absolute;
    inset: 0;
    background-image: url("../../assets/images/localmap/thorny%20wall.png");
    background-repeat: no-repeat;
    background-position: center;
    /* Slight inset so the underlying tile texture still reads at the edges. */
    background-size: 96% 96%;
    /* Blend out dark matte and integrate with terrain like the other exterior overlays. */
    mix-blend-mode: screen;
    opacity: 0.78;
    filter: saturate(1.05) contrast(1.04);
    pointer-events: none;
    z-index: 1;
}

.localmap-tile.is-blocked {
    cursor: not-allowed;
}

.localmap-tile.is-blocked::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg, rgba(231, 76, 60, 0.0) 0px, rgba(231, 76, 60, 0.0) 6px, rgba(231, 76, 60, 0.10) 6px, rgba(231, 76, 60, 0.10) 10px);
    pointer-events: none;
    opacity: 0.9;
}

.localmap-tile:hover {
    background: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.07);
}

.localmap-tile.is-selected {
    /* Default selection (explored): green */
    outline: 2px solid rgba(80, 255, 140, 0.95);
    outline-offset: -2px;
}

/* Selection highlight matches tile state
   - Explored: green (default)
   - Unexplored: yellow
   - Blocked or Fog: red */
.localmap-tile.is-selected.is-unexplored {
    outline-color: rgba(255, 216, 74, 0.95);
}

.localmap-tile.is-selected.is-blocked,
.localmap-tile.is-selected.is-unknown {
    outline-color: rgba(255, 82, 82, 0.95);
}

.localmap-tile.is-player::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 245, 170, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.55);
    box-shadow:
        0 0 10px rgba(255, 245, 170, 0.65),
        0 0 18px rgba(255, 245, 170, 0.25),
        0 0 22px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.12);
    z-index: 2;
}

@keyframes localmapRouteHintPulse {
    0% { opacity: 0.65; filter: drop-shadow(0 0 3px rgba(80, 255, 140, 0.35)); }
    50% { opacity: 1; filter: drop-shadow(0 0 5px rgba(80, 255, 140, 0.65)); }
    100% { opacity: 0.70; filter: drop-shadow(0 0 3px rgba(80, 255, 140, 0.40)); }
}

.localmap-player-arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.localmap-move-arrow {
    position: absolute;
    width: 0;
    height: 0;
    animation: localmapRouteHintPulse 1200ms ease-in-out infinite;
}

.localmap-move-arrow--up {
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid rgba(80, 255, 140, 0.92);
}

.localmap-move-arrow--down {
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid rgba(80, 255, 140, 0.92);
}

.localmap-move-arrow--left {
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 8px solid rgba(80, 255, 140, 0.92);
}

.localmap-move-arrow--right {
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid rgba(80, 255, 140, 0.92);
}

@keyframes localmapPlayerMovePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 10px rgba(255, 245, 170, 0.65),
            0 0 18px rgba(255, 245, 170, 0.25),
            0 0 22px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.12);
    }
    45% {
        transform: translate(-50%, -50%) scale(1.55);
        box-shadow:
            0 0 18px rgba(255, 245, 170, 0.75),
            0 0 34px rgba(255, 245, 170, 0.35),
            0 0 40px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.22);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 10px rgba(255, 245, 170, 0.65),
            0 0 18px rgba(255, 245, 170, 0.25),
            0 0 22px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.12);
    }
}

.localmap-tile.is-player.is-just-moved::after {
    animation: localmapPlayerMovePulse 650ms ease-out 1;
}

@keyframes localmapBurnFlicker {
    0%   { opacity: 0.00; transform: translate(-50%, -52%) scale(0.96); filter: blur(0.0px); }
    10%  { opacity: 0.90; transform: translate(-50%, -50%) scale(1.02); filter: blur(0.2px); }
    30%  { opacity: 0.55; transform: translate(-50%, -49%) scale(1.06); filter: blur(0.5px); }
    55%  { opacity: 0.85; transform: translate(-50%, -51%) scale(1.03); filter: blur(0.3px); }
    100% { opacity: 0.00; transform: translate(-50%, -50%) scale(1.08); filter: blur(1.0px); }
}

/* One-shot effect when a thorn wall is burned away */
.localmap-burn-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    background:
        radial-gradient(circle at 45% 55%, rgba(255, 226, 120, 0.95) 0%, rgba(255, 175, 60, 0.75) 22%, rgba(255, 96, 22, 0.45) 42%, rgba(0,0,0,0) 70%),
        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 216, 74, 0.25) 18%, rgba(0,0,0,0) 55%);
    box-shadow:
        0 0 14px rgba(255, 140, 40, 0.45),
        0 0 26px rgba(255, 216, 74, 0.20);
    animation: localmapBurnFlicker 1400ms ease-out 1;
    animation-fill-mode: forwards;
}

.localmap-tile.is-move-from {
    box-shadow: inset 0 0 0 2px rgba(255, 245, 170, 0.16);
}

.localmap-tile.is-player::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255, 245, 170, 0.55);
    box-shadow: 0 0 10px rgba(255, 245, 170, 0.25);
    opacity: 0.9;
    z-index: 1;
}

/* Crash Site POI footprint (irregular; see crashSiteLocalMap.js) */
.localmap-tile.is-poi-area {
    background: rgba(120,255,210,0.06);
}

/* POI wall overlay: thicker hull walls that remain visible under selection */
.localmap-tile.is-poi-area .poi-wall-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
    /* Match exterior hull wall styling (C5↔D5) */
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.35));
}

/* POI corridor overlay (visual corridor walls inset from tile edges) */
.localmap-tile.is-poi-area {
    --corridor-width: 40%;
    --corridor-half: 20%;
    --corridor-edge-gap-h: 6%;
    --corridor-edge-gap-v: 6%;

    /* Doors */
    --door-length: 28px;
    --door-thickness: 3px;
}

/* On the player tile, pull top/bottom corridor lines closer to center a bit */
.localmap-tile.is-poi-area.is-player {
    --corridor-edge-gap-v: 12%;
}

.localmap-tile.is-poi-area .poi-corridor-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.95;
    /* Prevent corridor wall/shadow visuals from bleeding into adjacent tiles */
    overflow: hidden;
}

.localmap-tile.is-unknown .poi-corridor-overlay {
    opacity: 0.18;
}


/* Corridor walls: SVG stroke-only outline (generated in crashSiteLocalMap.js) */
.localmap-tile.is-poi-area .poi-corridor-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.localmap-tile.is-poi-area .poi-corridor-svg path {
    fill: none;
    stroke: rgba(18, 20, 22, 0.95);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: square;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.35));
}

/* Add a "filled" backing stroke behind corridor/room wall lines for extra body. */
.localmap-tile.is-poi-area .poi-corridor-svg path.poi-wall-fill,
.localmap-tile.is-poi-area .poi-room-svg path.poi-wall-fill {
    stroke: rgba(12, 14, 16, 0.55);
    stroke-width: 9;
    stroke-linejoin: round;
    stroke-linecap: square;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.35));
}

/* Lift center box (elevator tile) */
.localmap-tile.is-poi-area .poi-elevator-svg .lift-box {
    fill: none;
    stroke: rgba(40, 45, 55, 0.90);
    stroke-width: 2.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.35));
}

/* Room wall overlay (visual) */
.localmap-tile.is-poi-area .poi-room-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.92;
    overflow: hidden;
}

.localmap-tile.is-unknown .poi-room-overlay {
    opacity: 0.16;
}

.localmap-tile.is-poi-area .poi-room-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.localmap-tile.is-poi-area .poi-room-svg path {
    fill: none;
    stroke: rgba(18, 20, 22, 0.90);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: square;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.30));
}

/* POI doors overlay (visual only) */
.localmap-tile.is-poi-area .poi-doors-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.localmap-tile.is-poi-area .poi-door {
    position: absolute;
    display: none;
    background: linear-gradient(180deg, rgba(40, 45, 55, 0.95), rgba(18, 20, 22, 0.95));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.45),
        0 6px 14px rgba(0,0,0,0.35);
    border-radius: 3px;
}

/* Door state styles */
.localmap-tile.is-poi-area .poi-door.poi-door--locked {
    background:
        repeating-linear-gradient(135deg,
            rgba(231, 76, 60, 0.10) 0px,
            rgba(231, 76, 60, 0.10) 6px,
            rgba(231, 76, 60, 0.22) 6px,
            rgba(231, 76, 60, 0.22) 10px
        );
    border: 1px solid rgba(231, 76, 60, 0.45);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.45),
        0 0 10px rgba(231, 76, 60, 0.25);
}

.localmap-tile.is-poi-area .poi-door.poi-door--open {
    background: linear-gradient(180deg,
        rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.55),
        rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.25)
    );
    border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.35);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.45),
        0 0 10px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.18);
    opacity: 0.72;
}

.localmap-tile.is-poi-area.poi-door-top .poi-door--top,
.localmap-tile.is-poi-area.poi-door-left .poi-door--left {
    display: block;
}

.localmap-tile.is-poi-area .poi-door--top {
    left: 50%;
    width: var(--door-length);
    height: var(--door-thickness);
    transform: translateX(-50%);
    top: calc(0px - (var(--door-thickness) / 2));
}

.localmap-tile.is-poi-area .poi-door--left {
    top: 50%;
    height: var(--door-length);
    width: var(--door-thickness);
    transform: translateY(-50%);
    left: calc(0px - (var(--door-thickness) / 2));
}

/* External (non-POI) door marker support (used for the C5↔D5 alternate access edge) */
.localmap-tile.has-external-door {
    /* Match POI door sizing defaults (C5 is not a POI tile, so it won't inherit these vars). */
    --door-length: 28px;
    --door-thickness: 6px;
    /* Allow the door to visually sit "between" tiles. */
    z-index: 5;
}

.localmap-tile.has-external-door .poi-doors-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}

.localmap-tile.has-external-door .poi-door {
    position: absolute;
    display: none;
    background: linear-gradient(180deg, rgba(40, 45, 55, 0.95), rgba(18, 20, 22, 0.95));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.45),
        0 6px 14px rgba(0,0,0,0.35);
    border-radius: 3px;
}

.localmap-tile.has-external-door.poi-door-right .poi-door--right {
    display: block;
}

.localmap-tile.has-external-door .poi-door--right {
    top: 50%;
    height: var(--door-length);
    width: var(--door-thickness);
    transform: translateY(-50%);
    /* Center the door on the tile boundary (so it reads as connecting two tiles). */
    right: calc(0px - (var(--door-thickness) / 2));
}

/* Exterior hull wall segment around the alternate access door (C5↔D5). */
.localmap-tile.has-external-door .external-hull-wall-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.localmap-tile.has-external-door .external-hull-wall-overlay--right {
    /* Draw a right-edge wall, with a gap where the door sits (centered). */
    background:
        linear-gradient(
            to bottom,
            rgba(12, 14, 16, 0.95) 0%,
            rgba(12, 14, 16, 0.95) 41%,
            rgba(0, 0, 0, 0) 41%,
            rgba(0, 0, 0, 0) 59%,
            rgba(12, 14, 16, 0.95) 59%,
            rgba(12, 14, 16, 0.95) 100%
        );
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 4px 100%;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.35));
}

.localmap-tile .external-hull-wall-overlay--left {
    /* Draw a left-edge wall, with a gap where the breach sits (centered). */
    background:
        linear-gradient(
            to bottom,
            rgba(12, 14, 16, 0.95) 0%,
            rgba(12, 14, 16, 0.95) 41%,
            rgba(0, 0, 0, 0) 41%,
            rgba(0, 0, 0, 0) 59%,
            rgba(12, 14, 16, 0.95) 59%,
            rgba(12, 14, 16, 0.95) 100%
        );
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 4px 100%;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.35));
}

.localmap-tile.is-poi-area.poi-border-top .poi-wall-overlay { border-top: 4px solid rgba(12, 14, 16, 0.95); }
.localmap-tile.is-poi-area.poi-border-bottom .poi-wall-overlay { border-bottom: 4px solid rgba(12, 14, 16, 0.95); }
.localmap-tile.is-poi-area.poi-border-left .poi-wall-overlay { border-left: 4px solid rgba(12, 14, 16, 0.95); }
.localmap-tile.is-poi-area.poi-border-right .poi-wall-overlay { border-right: 4px solid rgba(12, 14, 16, 0.95); }

/* Internal corridor walls (slightly thinner than outer hull) */
.localmap-tile.is-poi-area.poi-wall-top .poi-wall-overlay { border-top: 3px solid rgba(18, 20, 22, 0.95); }
.localmap-tile.is-poi-area.poi-wall-bottom .poi-wall-overlay { border-bottom: 3px solid rgba(18, 20, 22, 0.95); }
.localmap-tile.is-poi-area.poi-wall-left .poi-wall-overlay { border-left: 3px solid rgba(18, 20, 22, 0.95); }
.localmap-tile.is-poi-area.poi-wall-right .poi-wall-overlay { border-right: 3px solid rgba(18, 20, 22, 0.95); }

.localmap-tile.is-poi-area.poi-border-top .poi-wall-overlay,
.localmap-tile.is-poi-area.poi-border-bottom .poi-wall-overlay,
.localmap-tile.is-poi-area.poi-border-left .poi-wall-overlay,
.localmap-tile.is-poi-area.poi-border-right .poi-wall-overlay {
    /* Keep borders crisp/dark (no teal glow) to match exterior hull walls. */
    box-shadow: none;
}

/* Exterior mode: hide interior overlays unless an interior tile is selected (see crashSiteLocalMap.js). */
.localmap-root.is-exterior .localmap-tile.is-poi-area {
    /* Match default tile treatment so the background crash art reads cleanly. */
    background: rgba(0,0,0,0.12);
    box-shadow: none;
}

.localmap-root.is-exterior .localmap-tile.is-poi-area .poi-corridor-overlay,
.localmap-root.is-exterior .localmap-tile.is-poi-area .poi-room-overlay,
.localmap-root.is-exterior .localmap-tile.is-poi-area .poi-doors-overlay {
    opacity: 0;
}

/* Keep a faint ship silhouette without the internal corridor clutter. */
.localmap-root.is-exterior .localmap-tile.is-poi-area .poi-wall-overlay {
    opacity: 0.28;
}

/* Interior room art (e.g., laboratory) should only read in interior mode. */
.localmap-root.is-exterior .localmap-tile.is-poi-area .localmap-laboratory-overlay {
    opacity: 0;
}

.localmap-root.is-exterior .localmap-tile.is-poi-area .localmap-cafeteria-overlay,
.localmap-root.is-exterior .localmap-tile.is-poi-area .localmap-crewquarters-overlay,
.localmap-root.is-exterior .localmap-tile.is-poi-area .localmap-powercore-overlay,
.localmap-root.is-exterior .localmap-tile.is-poi-area .localmap-captainsquarters-overlay {
    opacity: 0;
}

/* Seen (in vision radius) but not stepped on yet */
.localmap-tile.is-unexplored {
    background: rgba(0,0,0,0.22);
}

/* Visited tiles stay visible and slightly brighter */
.localmap-tile.is-explored {
    background: rgba(255,255,255,0.055);
}


.localmap-tile.is-unknown {
    /* Unexplored: strongly blackened */
    background: rgba(0,0,0,0.92);
}

/* Fog texture */
.localmap-tile.is-unknown::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 45% 40%, rgba(0,0,0,0.35), rgba(0,0,0,0.98)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 7px);
    opacity: 0.98;
    pointer-events: none;
}

/* Zoom controls */
.localmap-zoom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.22);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
    z-index: 6;
}

.localmap-zoom-readout {
    min-width: 44px;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    font-family: 'Roboto Mono', monospace;
}

.localmap-zoom-btn {
    width: 30px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.25);
    background: rgba(0,0,0,0.25);
    color: rgba(255,255,255,0.92);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.localmap-zoom-btn:hover {
    background: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.08);
}

/* Safety net: hide markers in fog by default.
   Exception: tutorial/guide markers can opt in (see .has-always-marker). */
.localmap-tile.is-unknown:not(.has-always-marker) .localmap-marker {
    display: none;
}

/* Under-map actions panel (rendered by Crash Site tab) */

.localmap-actions-card {
    grid-area: actions;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    /* Make this strip more opaque so content behind (map) doesn't show through,
       which otherwise looks like the map panel extends underneath it. */
    background: rgba(0, 0, 0, 0.62);
    /* Slightly tighter than the default card padding so a single row of actions
       fits without triggering a pointless scrollbar in the reserved strip. */
    padding: 10px 12px;
}

.localmap-actions-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    /* Ensure buttons sit visually below the header */
    margin-top: 8px;
    /* Keep Actions contained in the reserved bottom strip */
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: flex-start;
}

.localmap-actions-hint {
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    padding: 8px 10px;
    border: 1px dashed rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.22);
    border-radius: 10px;
    background: rgba(0,0,0,0.25);
}

/* NOTE: .localmap-actions-panel is not used (kept lean intentionally). */

/* FINAL OVERRIDES (must be last): phone-landscape map maximization */
@media (max-width: 600px),
       (max-width: 900px) and (max-height: 450px),
       (hover: none) and (pointer: coarse) and (max-width: 900px) and (max-height: 600px) {
    /* Shrink the coordinate header row/col and remove the reserved zoom row. */
    .localmap-mapwrap .localmap-shell {
        grid-template-columns: 10px 1fr !important;
        grid-template-rows: 9px minmax(0, 1fr) 0px !important;
        gap: 1px !important;
    }

    .localmap-mapwrap .localmap-label {
        font-size: 8px !important;
        letter-spacing: 0.15px !important;
        line-height: 1 !important;
    }

    /* Tile panel: smaller, denser text on phone-landscape */
    .localmap-infowrap .localmap-card-header h3 {
        font-size: 12px;
        letter-spacing: 0.35px;
    }

    .localmap-infowrap .localmap-card-body {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.25;
    }

    .localmap-infowrap .localmap-info-row {
        gap: 8px;
        padding: 1px 0;
    }

    .localmap-infowrap .localmap-info-row .k {
        font-size: 10px;
        opacity: 0.7;
    }

    .localmap-infowrap .localmap-info-row .v {
        font-size: 11px;
    }

    .localmap-infowrap .localmap-note {
        font-size: 10px;
        line-height: 1.25;
    }

    /* Overlay zoom controls on top of the map so the grid can use full height. */
    .localmap-mapwrap .localmap-bottom {
        position: absolute !important;
        right: 6px !important;
        bottom: 6px !important;
        margin: 0 !important;
        pointer-events: none;
        z-index: 8;
    }

    .localmap-mapwrap .localmap-bottom .localmap-zoom {
        pointer-events: auto;
    }

    .localmap-mapwrap .localmap-zoom {
        padding: 4px 6px !important;
        gap: 6px !important;
    }

    .localmap-mapwrap .localmap-zoom-readout {
        min-width: 34px !important;
        font-size: 11px !important;
    }

    .localmap-mapwrap .localmap-zoom-btn {
        width: 28px !important;
        height: 24px !important;
        font-size: 15px !important;
    }

    /* Actions strip: remove header, reduce padding, and keep buttons in a single row */
    .localmap-actions-card .localmap-card-header {
        display: none !important;
    }

    .localmap-actions-card {
        padding: 4px 6px !important;
    }

    .localmap-actions-row {
        margin-top: 0 !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        align-items: center;
    }

    .localmap-actions-row .image-button {
        width: 136px;
        height: 34px;
        font-size: 11px;
        gap: 6px;
        padding: 0 8px;
        border-radius: 999px;
    }

    .localmap-actions-row .image-button:hover {
        transform: scale(1.02);
    }

    .localmap-actions-row .image-button .building-name {
        font-size: 11px;
        line-height: 1.05;
        white-space: normal;
        text-align: center;
        overflow: hidden;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .localmap-actions-row .image-button .action-new-badge,
    .localmap-actions-row .image-button .action-hint-badge {
        top: 4px;
        right: 6px;
        width: 14px;
        height: 14px;
        font-size: 11px;
    }
}

html.is-compact .localmap-mapwrap .localmap-shell {
    grid-template-columns: 10px 1fr !important;
    grid-template-rows: 9px minmax(0, 1fr) 0px !important;
    gap: 1px !important;
}

html.is-compact .localmap-mapwrap .localmap-label {
    font-size: 8px !important;
    letter-spacing: 0.15px !important;
    line-height: 1 !important;
}

html.is-compact .localmap-infowrap .localmap-card-header h3 {
    font-size: 12px;
    letter-spacing: 0.35px;
}

html.is-compact .localmap-infowrap .localmap-card-body {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.25;
}

html.is-compact .localmap-infowrap .localmap-info-row {
    gap: 8px;
    padding: 1px 0;
}

html.is-compact .localmap-infowrap .localmap-info-row .k {
    font-size: 10px;
    opacity: 0.7;
}

html.is-compact .localmap-infowrap .localmap-info-row .v {
    font-size: 11px;
}

html.is-compact .localmap-infowrap .localmap-note {
    font-size: 10px;
    line-height: 1.25;
}

html.is-compact .localmap-mapwrap .localmap-bottom {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    margin: 0 !important;
    pointer-events: none;
    z-index: 8;
}

html.is-compact .localmap-mapwrap .localmap-bottom .localmap-zoom {
    pointer-events: auto;
}

html.is-compact .localmap-mapwrap .localmap-zoom {
    padding: 4px 6px !important;
    gap: 6px !important;
}

html.is-compact .localmap-mapwrap .localmap-zoom-readout {
    min-width: 34px !important;
    font-size: 11px !important;
}

html.is-compact .localmap-mapwrap .localmap-zoom-btn {
    width: 28px !important;
    height: 24px !important;
    font-size: 15px !important;
}

html.is-compact .localmap-actions-card .localmap-card-header {
    display: none !important;
}

html.is-compact .localmap-actions-card {
    padding: 4px 6px !important;
}

html.is-compact .localmap-actions-row {
    margin-top: 0 !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    align-items: center;
}

html.is-compact .localmap-actions-row .image-button {
    width: 136px;
    height: 34px;
    font-size: 11px;
    gap: 6px;
    padding: 0 8px;
    border-radius: 999px;
}

html.is-compact .localmap-actions-row .image-button:hover {
    transform: scale(1.02);
}

html.is-compact .localmap-actions-row .image-button .building-name {
    font-size: 11px;
    line-height: 1.05;
    white-space: normal;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

html.is-compact .localmap-actions-row .image-button .action-new-badge {
    top: 4px;
    right: 6px;
    width: 14px;
    height: 14px;
    font-size: 11px;
}