* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #071019;
}

#map {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            #102536 0,
            #061019 65%,
            #03080c 100%
        );
}

#map-header {
    position: fixed;

    z-index: 1000;

    top: 12px;
    left: 50%;

    transform:
        translateX(-50%);

    display: flex;
    align-items: center;

    gap: 18px;

    min-height: 48px;

    padding:
        8px 16px;

    background:
        rgba(
            6,
            10,
            15,
            0.94
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius: 9px;

    box-shadow:
        0 10px 35px
        rgba(
            0,
            0,
            0,
            0.45
        );
}

.map-brand {
    color: #d4a84d;

    text-decoration: none;

    font-size: 17px;

    font-weight: 700;
}

.map-title {
    color: #ffffff;

    font-size: 14px;
}

.live-status {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #aeb8c3;

    font-size: 12px;
}

.live-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}

.live-dot.online {
    background: #55d17c;
}

.live-dot.offline {
    background: #d85b5b;
}

#player-count {
    margin-left: 6px;

    padding-left: 12px;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );
}

#coordinates {
    position: fixed;

    z-index: 1000;

    right: 12px;
    bottom: 12px;

    min-width: 160px;

    padding:
        9px 12px;

    background:
        rgba(
            6,
            10,
            15,
            0.92
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius: 7px;

    color: #c9d2da;

    font-family:
        Consolas,
        monospace;

    font-size: 12px;

    pointer-events: none;
}

#location-search {
    position: fixed;

    z-index: 1000;

    top: 74px;
    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    width:
        min(
            460px,
            calc(100vw - 30px)
        );

    background:
        rgba(
            6,
            10,
            15,
            0.94
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius: 8px;

    overflow: hidden;
}

#location-search-input {
    flex: 1;

    min-width: 0;

    padding:
        11px 12px;

    border: 0;

    outline: 0;

    color: #ffffff;

    background: transparent;
}

#location-search-input::placeholder {
    color: #71808d;
}

#location-search-button {
    padding:
        0 16px;

    border: 0;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    background: #18232d;

    color: #ffffff;

    cursor: pointer;
}

#location-search-button:hover {
    background: #22303d;
}


/*
 * PLAYER MARKER
 */

.player-marker-wrapper {
    background: none !important;

    border: none !important;
}

.player-marker {
    position: relative;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #ef4747;

    border:
        2px solid
        #ffffff;

    box-shadow:
        0 2px 10px
        rgba(
            0,
            0,
            0,
            0.8
        );
}

.player-marker-label {
    position: absolute;

    top: -3px;
    left: 24px;

    white-space: nowrap;

    padding:
        3px 6px;

    border-radius: 4px;

    color: #ffffff;

    background:
        rgba(
            0,
            0,
            0,
            0.75
        );

    font-size: 11px;
}


/*
 * LOCATION MARKERS
 */

.location-icon {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.8
        );

    box-shadow:
        0 1px 5px
        rgba(
            0,
            0,
            0,
            0.7
        );
}

.location-capital {
    background: #ffd65a;
}

.location-town {
    background: #ff9e4a;
}

.location-zone {
    background: #69baff;
}

.location-subzone {
    background: #a8a8a8;
}


/*
 * LEAFLET
 */

.leaflet-control-zoom a {
    background:
        rgba(
            10,
            15,
            21,
            0.95
        ) !important;

    color: #ffffff !important;

    border-color:
        rgba(
            255,
            255,
            255,
            0.08
        ) !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: #101820;

    color: #e8eef4;
}

.leaflet-control-layers {
    background:
        rgba(
            10,
            15,
            21,
            0.94
        ) !important;

    color: #ffffff;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        ) !important;
}


@media (
    max-width: 650px
) {

    #map-header {
        left: 10px;
        right: 10px;

        transform: none;

        justify-content:
            space-between;

        gap: 8px;
    }

    .map-title {
        display: none;
    }

    #location-search {
        top: 72px;
    }

    #live-text {
        display: none;
    }
}