/* Darker background, bright modal */
.modal-backdrop {
    opacity: 0.8 !important;
    z-index: 1040 !important;
}

.modal-backdrop.in {
    opacity: 0.8 !important;
}

/* Keep modal content bright and white */
.modal-content {
    background-color: #fff !important;
    opacity: 1 !important;
}

.modal-dialog {
    opacity: 1 !important;
    z-index: 1050 !important;
}

/* Ensure modal is above backdrop */
.modal {
    z-index: 1050 !important;
}

/* Ensure close buttons are clickable */
.modal-header .close {
    z-index: 1051 !important;
    cursor: pointer !important;
}

.modal-footer button {
    z-index: 1051 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Player map iframe wrapper - responsive container */
.map-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 966 / 732; /* Native map aspect ratio */
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Responsive iframe that scales dynamically */
.player-map-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    background-color: #000;
    display: block;
}

/* Fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .map-wrapper {
        padding-bottom: 75.7%; /* 732/966 * 100 = 75.7% */
        height: 0;
    }
}

/* Player map container width control */
.player-map-container {
    width: 100%;
}

/* Responsive iframe scaling for mobile - scale the map inside the container */
@media (max-width: 768px) {
    .player-map-container iframe[src*="playermapnpbot"] {
        -webkit-transform: translate(-50%, -50%) scale(0.385) !important;
        -ms-transform: translate(-50%, -50%) scale(0.385) !important;
        transform: translate(-50%, -50%) scale(0.385) !important;
        -webkit-transform-origin: center center !important;
        transform-origin: center center !important;
    }
}

@media (max-width: 480px) {
    .player-map-container iframe[src*="playermapnpbot"] {
        -webkit-transform: translate(-50%, -50%) scale(0.3) !important;
        -ms-transform: translate(-50%, -50%) scale(0.3) !important;
        transform: translate(-50%, -50%) scale(0.3) !important;
        -webkit-transform-origin: center center !important;
        transform-origin: center center !important;
    }
}