body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

.map-wrapper {
    position: relative;
    width: 1000px;
    height: 800px;
    border: 1px solid #aaa;
    margin-bottom: 20px;
}

.map-image {
    width: 100%;
    height: 100%;
    display: block;
}

.poly-preview {
    position: absolute;
    left: 0;
    top: 0;
    width: 1000px;
    height: 800px;
    pointer-events: none;
}

.poly-preview polygon {
    fill: rgba(0, 255, 0, 0.3);
    stroke: #00aa00;
    stroke-width: 2;
}

#output {
    background: #f5f5f5;
    padding: 15px;
    border: 1px solid #ccc;
    white-space: pre-wrap;
}


.area { 
    position: absolute; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-weight: bold; 
    font-size: 20px; 
    color: white; 
    /*background: rgba(0, 128, 0, 0.4); */
    background: #0d0d0e; 
    cursor: pointer; 
    transition: 0.2s; 
}

/* obszar zajęty */ 
.area[data-zajete="1"] { 
    /*pointer-events: none; */
    filter: blur(2px) grayscale(1); 
    background: rgba(0,0,0,0.4); 
}


.drag-rect {
    fill: rgba(0, 150, 255, 0.3);
    stroke: #0d0d0e;
    stroke-width: 2;
}