rl-map{
    display:block
}

.map{
    position:relative;
    aspect-ratio:1000/488;
    container-type:inline-size;
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    background-color:var(--map);
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:40px 40px
}

.map[data-action=pick]{
    cursor:crosshair
}

.map svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none
}

.map .land{
    fill:var(--card);
    stroke:var(--mut);
    stroke-width:1.5;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke
}

.pin{
    position:absolute;
    width:26px;
    height:26px;
    border-radius:50%;
    border:3px solid #fff;
    cursor:pointer;
    transform:translate(-50%,-50%);
    padding:0
}

.pin.new::after{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:3px solid currentColor;
    animation:pulse 1.4s ease-out 3
}

@keyframes pulse{
    from{
        transform: scale(.5);
        opacity: 1
    }

    to{
        transform: scale(1.6);
        opacity: 0
    }
}

.cl{
    position:absolute;
    transform:translate(-50%,-50%);
    font-size:clamp(8px,1.35cqw,11px);
    color:var(--mut);
    pointer-events:none;
    white-space:nowrap
}

.cl.cap{
    font-weight:800;
    color:var(--ink)
}

@container (max-width:420px){
    .cl{
        display:none
    }
}

.popup{
    position:absolute;
    left:12px;
    bottom:12px;
    max-width:270px;
    padding:14px
}

.legend{
    font-size:13px;
    margin-top:8px;
    color:var(--mut)
}

.legend span{
    margin-right:14px;
    white-space:nowrap
}

.map-layout{
    display:grid;
    gap:20px;
    grid-template-columns:minmax(0,1fr) 340px;
    align-items:start
}

@media(max-width:1100px){
    .map-layout{
        grid-template-columns:1fr
    }
}