html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
   background-color: #7f92e7;
   font-family: Arial, Helvetica, sans-serif;
}

.page {
    width: 100%;
    height: 100vh;
}

.map-viewer {
    width: 100%;  
    height:100vh;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    overflow: hidden;
    }

.map-layer {
    position: relative;
    display: inline-block;
    transform-origin: center center;
}

.map-image {
    display: block;
    max-width: 120vw;
    max-height: 121vh;
    width: auto;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    /*transform-origin: center center;*/
    pointer-events: none;  
    cursor: grab;
}

.map-layer:active .map-image {
    cursor: grabbing;
}

.marker {
    position: absolute;
    transform: translate(-50%,-100%);
    border:none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 10;
}

.marker img {
    object-fit: contain;
    display: block;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.marker:hover img {
    transform: scale(1.08);
}

.popup {
    transition: opacity 0.2s ease, transform 0.2s ease;
    position: absolute;
    left: 0;
    top: 0;
    width: 220px;
    max-width: 240px;
    background: rgba(255, 255, 255, 0.96);
    color: #4b3b4f;
    border-radius: 16px;
    padding: 18px 18px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
}

.popup.hidden {
    display: none;
}

.popup h3 {
    margin: 0 28px 8px 0;
    font-size: 18px;
}

.popup p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #6e5c72;
}

.water-layer {
    position: absolute;
    top: 0;
    left:0;

    width:100%;
    height:auto;

    pointer-events: none;

    opacity:0.75;
    mix-blend-mode: screen;
    animation: waterFloat 8s ease-in-out infinite alternate;

    z-index: 3;

}

@keyframes waterFloat{

    0%{
        transform:
        translateY(0px)
        translateX(0px)
        rotate(0deg);
    }

    25% {
        transform:
        translateY(-6px)
        translateX(4px)
        rotate(0.4deg);
    }

    50% {
        transform:
        translateY(4px)
        translateX(-5px)
        rotate(-0.3deg);
    }

    75% {
        transform:
        translateY(-3px)
        translateX(3px)
        rotate(0.2deg);
    }

    100% {
        transform:
        translateY(5px)
        translateX(-2px)
        rotate(-0.4deg);
    }
    
}

.glow-layer{
 position: absolute;
 top:0;
 left:0;

 width: 100%;
 height: auto;

 pointer-events: none;

 opacity: 0.85;

 mix-blend-mode: screen;

 animation: 
 pulseGlow 2.2s ease-in-out infinite,
 floatGlow 8s ease-in-out infinite;

 filter: 
 drop-shadow(0 0 10px rgba(255,140,140,0.95))
 drop-shadow(0 0 26px rgba(255,70,70,0.8))
 drop-shadow(0 0 52px rgba(255,40,40,0.45))
 blur(0.15px);

 z-index: 4;
}

@keyframes pulseGlow{

    0%{
        opacity: 0.45;
        transform: scale(1);
    }

    50%{
        opacity: 1;
        transform: scale(1.06);
    }

    100%{
        opacity: 0.45;
        transform: scale(1);
    }
}

@keyframes floatGlow{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-6px);
    }

    100%{
        transform: translateY(0px);
    }
}

/*#resetZoom {
    width: auto;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
}

.zoom-level {
    min-width: 64px;
    text-align: center;
    font-size: 14px;
    color: #3a3140;
}*/

 /*   .map-image {
        max-width: none;
    }