:root {
        --bg1: #e8f1e6;
        /* iarbă deschis */
        --bg2: #cfe6c4;
        /* iarbă */
        --bg3: #b7d9b1;
        /* iarbă umbră */
        --shoulder: #b9c5c7;
        /* margini drum */
        --asfalt: #2c2f33;
        /* asfalt */
        --lane: #f6f7f8;
        /* dungă mijloc */
        --poi: #111827;
        /* text */
        --card: #111827;
        /* card bg */
        --cardText: #f9fafb;
        /* card text */
        --accent: #22c55e;
        /* accente UI */
    }

    .wrap {
        width: min(1100px, 95vw);
        margin: auto;
    }

    .map {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 24px;
        overflow: hidden;
        background:
            radial-gradient(1200px 800px at 70% 110%, #a6d39a00 60%, #86c68622 61%),
            conic-gradient(from 180deg at 85% 10%, #cbe6c5 0 20%, #e7f2e5 20% 35%, #cfe6c4 35% 55%, #bfe0b8 55% 80%, #e5f1e2 80% 100%);
        box-shadow: 0 30px 60px #0a0e141a, 0 8px 18px #0a0e1414, inset 0 0 0 1px #00000010;
        isolation: isolate;
        margin-bottom: 4em;
    }

    .map::after {
        /* textură subtilă */
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        mix-blend-mode: multiply;
        opacity: .07;
        background: repeating-linear-gradient(45deg, #0000 0 2px, #0001 2px 3px);
    }

    .map-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block
    }

    /* STRATURI DRUM (același path, straturi diferite) */
    .road-shoulder {
        stroke: var(--shoulder);
        stroke-width: 28;
        fill: none;
        stroke-linecap: round;
        filter: drop-shadow(0 1px 0 #0002)
    }

    .road-asphalt {
        stroke: var(--asfalt);
        stroke-width: 22;
        fill: none;
        stroke-linecap: round
    }

    .road-center {
        stroke: var(--lane);
        stroke-width: 3;
        fill: none;
        stroke-linecap: round;
        stroke-dasharray: 8 9;
    }


    /* POI (puncte de interes) */
    .poi {
        position: absolute;
        translate: -50% -100%;
        /* ancoră la vârf */
        display: grid;
        place-items: center;
        gap: 4px;
        border: 0;
        background: #fff;
        color: var(--poi);
        padding: 10px 12px;
        border-radius: 14px;
        cursor: pointer;
        box-shadow: 0 6px 16px #00000022, inset 0 0 0 1px #00000010;
        font-size: 20px;
        line-height: 1;
        transition: transform .15s ease, box-shadow .15s ease;
        user-select: none;
    }

    .poi:before {
        /* „picsiorul” pinului */
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        width: 0;
        height: 0;
        translate: -50% 0;
        border: 8px solid transparent;
        border-top-color: #fff;
        filter: drop-shadow(0 2px 2px #0002)
    }

    .poi:hover {
        transform: translate(0, -30%) scale(1.05);
        box-shadow: 0 10px 22px #00000030, inset 0 0 0 1px #00000012
    }

    .poi:active {
        transform: translate(0, -30%) scale(.98)
    }

    .poi small {
        font-size: 12px;
        opacity: .8
    }

    /* Info card care apare lângă POI */
    .info {
        /* position: absolute; */
        inset: auto auto 12px 12px;
        background: var(--card);
        color: var(--cardText);
        border-radius: 16px;
        /* min-width: 69em; */
        /* max-width: min(320px, 80vw); */
        padding: 12px 14px;
        box-shadow: 0 24px 60px #0008, inset 0 0 0 1px #ffffff10;
        display: none;
        z-index: 10;
        height: fit-content;
        left: 15%;
        top: 90%;
        /* width: 70vw; */
        margin-bottom: 3em;
    }

    .info.visible {
        display: block
    }

    .info h3 {
        margin: .2rem 0 .25rem;
        font-size: 16px
    }

    .info p {
        text-indent: 30px;
        margin: 0;
        font-size: 14px;
        opacity: .9
    }

    .info .actions {
        display: flex;
        gap: 8px;
        margin-top: 10px
    }

    .btn {
        border: 0;
        background: var(--accent);
        color: #052e16;
        padding: 8px 10px;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer
    }

    .btn.secondary {
        background: #374151;
        color: #e5e7eb
    }

    .close {
        /* position: absolute; */
        /* top: 62em; */
        /* right: 19em; */
        border: 0;
        background: #ffffff14;
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        cursor: pointer;
        margin: 0;
    }

    /* Legenda / hint */
    .legend {
        position: absolute;
        left: 12px;
        top: 12px;
        background: #ffffffcc;
        backdrop-filter: blur(6px);
        padding: 6px 10px;
        border-radius: 12px;
        font-size: 12px;
        box-shadow: 0 8px 18px #0001;
        display: flex;
        gap: 10px;
        align-items: center
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 999px;
        background: #00000006
    }

    .dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--asfalt);
        box-shadow: 0 0 0 3px var(--shoulder) inset
    }

    .dashed {
        width: 22px;
        height: 3px;
        background: linear-gradient(90deg, var(--lane) 0 50%, #0000 0) 0/10px 3px repeat-x;
        border-radius: 2px
    }

    /* Responsivitate mică */
    @media (max-width:600px) {
        .poi {
            padding: 8px 10px;
            font-size: 18px
        }
    }

    @media (min-width:641px) {
        .carnu {
            left: 26%;
            top: 10%;
        }

        .complex {
            left: 41%;
            top: 15%;
        }

        .legende {
            left: 49%;
            top: 27%;
        }

        .civic {
            left: 60%;
            top: 24%;
        }

        .neaga {
            left: 70%;
            top: 38%;
        }

        .biserica {
            left: 81%;
            top: 51%;
        }

        .fantana {
            left: 65%;
            top: 54%;
        }

        .cabana {
            left: 54%;
            top: 67%;
        }

        .satul {
            left: 39%;
            top: 67%;
        }

        .piatra {
            left: 32%;
            top: 82%;
        }

    }

    @media (max-width:640px) {
        .carnu {
            left: 23%;
            top: 7%;
        }

        .complex {
            left: 43%;
            top: 15%;
        }

        .legende {
            left: 41%;
            top: 25%;
        }

        .civic {
            left: 72%;
            top: 29%;
        }

        .neaga {
            left: 67%;
            top: 44%;
        }

        .biserica {
            left: 65%;
            top: 55%;
        }

        .fantana {
            left: 62%;
            top: 65%;
        }

        .cabana {
            left: 28%;
            top: 74%;
        }

        .satul {
            left: 37%;
            top: 84%;
        }

        .piatra {
            left: 16%;
            top: 93%;
        }

        .map {
            height: 92vh;
        }
    }