* {
    box-sizing: border-box;
}

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

body {
    background: #111;
    overflow: hidden;
}

#map-container {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #111;

    touch-action: none;
}

#map {
    display: block;

    width: 100%;
    height: 100%;

    cursor: grab;

    touch-action: none;
}

#map.dragging {
    cursor: grabbing;
}


/* --------------------------------------------------
   Zoom-Steuerung
   -------------------------------------------------- */

#map-controls {
    position: absolute;

    top: 15px;
    right: 15px;

    display: flex;

    gap: 6px;

    padding: 6px;

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

    border-radius: 8px;
}

#map-controls button {
    min-width: 42px;
    height: 42px;

    padding: 0 10px;

    border: 0;
    border-radius: 6px;

    background: #333;

    color: white;

    font-size: 18px;

    cursor: pointer;
}

#map-controls button:hover {
    background: #444;
}


/* --------------------------------------------------
   Spieler-Panel
   -------------------------------------------------- */

#player-panel {
    position: absolute;

    top: 15px;
    left: 15px;

    width: 240px;

    max-height:
        calc(100% - 30px);

    overflow-y: auto;

    padding: 15px;

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

    border-radius: 8px;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 14px;
}

#player-panel h3 {
    margin:
        0 0 10px 0;

    font-size: 15px;
}

#player-panel hr {
    margin:
        15px 0;

    border: 0;

    border-top:
        1px solid #444;
}


/* --------------------------------------------------
   Allgemeine Labels
   -------------------------------------------------- */

#player-panel label {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 8px 0;

    cursor: pointer;
}

#player-panel input {
    margin: 0;
}


/* --------------------------------------------------
   Spieler
   -------------------------------------------------- */

.player-entry {
    margin: 5px 0;
}

.player-header {
    display: flex;

    align-items: center;

    gap: 7px;

    min-height: 30px;
}

.player-header input[type="checkbox"] {
    margin: 0;
}

.player-color {
    width: 11px;
    height: 11px;

    flex-shrink: 0;

    border-radius: 50%;
}

.player-name {
    flex: 1;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.player-info {
    flex: 1;
    min-width: 0;
}

.player-latest-time {
    margin-top: 2px;

    color: #999;

    font-size: 11px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.player-toggle {
    width: 24px;
    height: 24px;

    padding: 0;

    border: 0;

    border-radius: 4px;

    background: transparent;

    color: #aaa;

    font-size: 16px;

    line-height: 24px;

    cursor: pointer;
}

.player-toggle:hover {
    background: #333;

    color: white;
}


/* --------------------------------------------------
   Spieler-Einstellungen
   -------------------------------------------------- */

.player-options {
    margin:
        3px 0 8px 25px;

    padding:
        5px 0 5px 10px;

    border-left:
        1px solid #444;
}

.player-options label {
    margin:
        6px 0 !important;

    font-size: 13px;
}


/* --------------------------------------------------
   Mobile
   -------------------------------------------------- */

@media (max-width: 600px) {

    #player-panel {
        width: 200px;

        padding: 12px;

        font-size: 13px;
    }

    #map-controls {
        top: 10px;
        right: 10px;
    }
}