/* Alegacy World Map — MapLibre GL (WebGL) edition styles.
 * Shared chrome (.map-card, .map-overlay, .al-ctl, .al-popup-*) lives in
 * map.css — this file only covers the GL container and its own controls. */

.map-gl {
    width: 100%;
    height: 100%;
    background: #0c1119;
}

/* dark-fantasy vignette over the WebGL canvas — purely decorative */
.map-gl::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    box-shadow: inset 0 0 160px 40px rgba(4, 5, 8, .6),
                inset 0 0 40px rgba(4, 5, 8, .35);
}

/* ----------------------- engine switch ----------------------- */

.map-engine-switch {
    margin: .3rem 0 0;
    font-size: .75rem;
    color: var(--al-text-dim);
}

.map-engine-toggle {
    color: var(--al-accent-light);
}

/* ------------------- maplibre chrome restyle ------------------- */

.map-gl .maplibregl-ctrl-group {
    background: var(--map-ctl-bg, rgba(16, 16, 19, .92));
    border: 1px solid var(--map-border, rgba(255, 255, 255, .12));
    border-radius: .4rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.map-gl .maplibregl-ctrl-group button {
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--map-border, rgba(255, 255, 255, .12));
    cursor: pointer;
}

.map-gl .maplibregl-ctrl-group button:last-child {
    border-bottom: none;
}

.map-gl .maplibregl-ctrl-group button:hover,
.map-gl .maplibregl-ctrl-group button:focus {
    background: var(--map-accent, #e04444);
}

.map-gl .maplibregl-ctrl-group button + button {
    border-top: none;
}

/* zoom +/- glyphs are dark by default — invert for the dark panel */
.map-gl .maplibregl-ctrl-icon {
    filter: invert(.88);
}

/* top-left button row: fullscreen toggle + spawn in ONE horizontal group —
 * the vertical separators maplibre adds between stacked buttons become
 * side-by-side dividers here */
.map-gl .al-corner-btns {
    display: flex;
    align-items: stretch;
}

.map-gl .al-corner-btns button {
    border-bottom: none;
}

.map-gl .al-corner-btns button + button {
    border-left: 1px solid var(--map-border, rgba(255, 255, 255, .12));
}

/* the spawn label sizes to its text instead of the fixed 2rem icon square */
.map-gl .al-corner-btns .al-spawn-btn {
    width: auto;
    height: auto;
    min-height: 2rem;
    display: flex;
    align-items: center;
    border-radius: 0;
    background: transparent;
    color: #fff;
}

.map-gl .maplibregl-ctrl-attrib {
    background: rgba(16, 16, 19, .75);
    color: var(--al-text-dim, #9aa);
    font-size: .68rem;
}

.map-gl .maplibregl-ctrl-attrib a {
    color: var(--al-accent-light, #e06a6a);
}

.map-gl .maplibregl-canvas {
    outline: none;
}

/* keep controls and popups above the ::after vignette (z-index 5) */
.map-gl .maplibregl-ctrl-container {
    z-index: 10;
}

.map-gl .maplibregl-popup {
    z-index: 15;
}

/* ------------------------- hover tooltip ------------------------- */

.algl-tooltip {
    position: absolute;
    z-index: 20;
    transform: translate(-50%, -135%);
    padding: .25rem .55rem;
    background: var(--map-ctl-bg, rgba(16, 16, 19, .92));
    border: 1px solid var(--map-border, rgba(255, 255, 255, .12));
    border-radius: .4rem;
    color: #fff;
    font-size: .75rem;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    backdrop-filter: blur(10px);
}

/* ------------------------- layers panel ------------------------- */

.algl-layers {
    position: relative;
    font-size: .82rem;
}

.algl-layers-btn {
    display: block;
    padding: .4rem .8rem;
    background: transparent;
    border: none;
    color: #fff;
    font-size: .78rem;
    cursor: pointer;
}

.algl-layers-btn:hover {
    color: var(--al-accent-light, #e06a6a);
}

.algl-layers-panel {
    /* a shade softer + glassier than the .al-ctl chip it hangs off —
     * local var overrides keep the theme hooks working */
    --map-ctl-bg: rgba(12, 15, 20, .82);
    --map-border: rgba(255, 255, 255, .07);
    position: absolute;
    top: calc(100% + .3rem);
    right: 0;
    min-width: 10.5rem;
    padding: .4rem .35rem;
    background: var(--map-ctl-bg);
    border: 1px solid var(--map-border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
    backdrop-filter: blur(6px);
}

.algl-layers-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .4rem;
    border-radius: .3rem;
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    letter-spacing: .02em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease;
}

.algl-layers-row:hover {
    background: rgba(255, 255, 255, .04);
}

.algl-layers-row input {
    accent-color: var(--map-accent, #e04444);
    margin: 0;
}

.algl-layers-dot {
    flex: none;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    /* currentColor is set inline to the layer colour — glow matches */
    box-shadow: 0 0 6px currentColor;
}

/* area layers (claims): outlined-rect glyph echoing the dashed fill stroke */
.algl-layers-dot--rect {
    border: 1.5px solid currentColor;
    border-radius: .15rem;
}

/* icon layers: the real marker glyph (Maki) instead of a colour dot */
.algl-layers-dot--icon {
    width: .95rem;
    height: .95rem;
    border-radius: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.algl-layers-dot--icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 3px currentColor);
}

/* ------------------------- marker popup ------------------------- */

.algl-popup .maplibregl-popup-content {
    background: var(--al-surface, #15171c);
    border: 1px solid var(--map-border, rgba(255, 255, 255, .12));
    border-radius: var(--al-radius, .6rem);
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
    padding: .7rem .9rem;
    font-size: .85rem;
    line-height: 1.35;
}

.algl-popup .maplibregl-popup-tip {
    border-top-color: var(--al-surface, #15171c);
}

.algl-popup .maplibregl-popup-close-button {
    color: var(--al-text-dim, #9aa);
    font-size: 1rem;
    padding: .15rem .45rem;
}

.algl-popup .maplibregl-popup-close-button:hover {
    color: #fff;
}

/* ------------------------- region labels ------------------------- */

/* DOM markers: parchment text over the dark map — no glyph PBF needed.
 * Border colour is set inline to the region colour. */
.algl-region-label {
    padding: 0 .15rem .05rem;
    color: #e9dcae;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-shadow: 0 0 4px rgba(0, 0, 0, .9),
                 0 1px 3px rgba(0, 0, 0, .95),
                 0 0 14px rgba(0, 0, 0, .8);
    border-bottom: 1px solid #e8b04a;
    white-space: nowrap;
    pointer-events: auto;
    cursor: default;
    user-select: none;
}

.algl-region-label:hover {
    color: #fff3cf;
}



/* ------------------------- popup action buttons ------------------------- */

.algl-popup-actions {
    display: flex;
    gap: .4rem;
    margin-top: .55rem;
}

.algl-popup-btn {
    padding: .25rem .6rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--map-border, rgba(255, 255, 255, .14));
    border-radius: .35rem;
    color: rgba(255, 255, 255, .88);
    font-size: .75rem;
    cursor: pointer;
    transition: background .15s ease;
}

.algl-popup-btn:hover {
    background: rgba(255, 255, 255, .12);
}

.algl-popup-btn--danger {
    color: #f0a0a0;
    border-color: rgba(224, 68, 68, .4);
}

.algl-popup-btn--danger:hover {
    background: rgba(224, 68, 68, .18);
}

/* ------------------------- admin draw toolbar ------------------------- */

.algl-admin {
    position: relative;
    font-size: .82rem;
}

.algl-admin--drawing > .algl-layers-btn {
    color: var(--al-accent-light, #e06a6a);
}

.algl-admin-panel {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .35rem;
}

.algl-admin-btn {
    display: block;
    width: 100%;
    padding: .32rem .55rem;
    background: transparent;
    border: none;
    border-radius: .3rem;
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}

.algl-admin-btn:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

/* ------------------------- mobile ------------------------- */

@media (max-width: 640px) {
    .algl-layers-panel {
        min-width: 9rem;
    }

    .algl-region-label {
        letter-spacing: .05em;
    }
}