/* =========================================================
   BASE
========================================================= */

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

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* =========================================================
   MAP
========================================================= */

#map {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* =========================================================
   STATUS
========================================================= */

#status {
    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 10;

    padding: 10px 14px;

    background: rgba(0, 0, 0, .75);
    color: white;

    font-family: Arial, sans-serif;

    border-radius: 6px;
}


/* =========================================================
   START / FINISH MARKER
========================================================= */

.start-marker {
    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: #000;

    border: 3px solid #fff;

    box-shadow:
        0 0 0 2px rgba(0, 0, 0, .5),
        0 2px 6px rgba(0, 0, 0, .6);
}


/* =========================================================
   DISTANCE
========================================================= */

#distance {
    position: absolute;

    top: 15px;
    right: 15px;

    z-index: 20;

    padding: 9px 13px;

    background: rgba(0, 0, 0, .72);
    color: #fff;

    border-radius: 7px;

    font-family: Arial, sans-serif;

    font-size: 13px;
    font-weight: bold;

    backdrop-filter: blur(5px);
}


/* =========================================================
   RUNNER
========================================================= */

.runner-marker {
    position: relative;

    width: 18px;
    height: 18px;
}


.runner-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 34px;
    height: 34px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(255, 140, 0, .22);

    box-shadow:
        0 0 12px rgba(255, 140, 0, .85),
        0 0 25px rgba(255, 140, 0, .55);

    animation: runnerPulse 1.2s infinite;
}


.runner-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 10px;
    height: 10px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #fff;

    border: 3px solid #ff8c00;

    box-shadow:
        0 0 8px #fff,
        0 0 15px #ff8c00,
        0 0 25px #ff8c00;
}


@keyframes runnerPulse {

    0% {
        transform:
            translate(-50%, -50%)
            scale(.75);

        opacity: .8;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.15);

        opacity: .4;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(.75);

        opacity: .8;
    }
}


/* =========================================================
   ANIMATION CONTROLS
========================================================= */

.animation-controls {
    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    z-index: 25;

    display: flex;

    gap: 8px;
}


.animation-controls button {
    border: none;

    border-radius: 6px;

    padding: 9px 14px;

    background: rgba(0, 0, 0, .78);
    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 13px;

    cursor: pointer;

    backdrop-filter: blur(5px);
}


.animation-controls button:hover {
    background: rgba(0, 0, 0, .95);
}


/* =========================================================
   ELEVATION PANEL
========================================================= */

#elevation-panel {
    position: absolute;

    left: 50%;
    bottom: 70px;

    transform: translateX(-50%);

    z-index: 100;

    width: min(850px, calc(100% - 30px));

    height: 145px;

    background: rgba(0, 0, 0, .85);

    border-radius: 10px;

    color: white;

    font-family: Arial, sans-serif;

    backdrop-filter: blur(6px);

    box-shadow:
        0 2px 15px rgba(0, 0, 0, .4);
}


/* =========================================================
   ELEVATION HEADER
========================================================= */

#elevation-header {
    position: absolute;

    top: 8px;
    left: 12px;
    right: 12px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    color: white;

    font-family: Arial, sans-serif;

    font-size: 12px;

    pointer-events: none;
}


#elevation-title {
    font-weight: bold;
}


#elevation-current {
    font-weight: bold;
}


/* =========================================================
   ELEVATION SVG
========================================================= */

#elevation-svg {
    position: absolute;

    left: 10px;
    right: 10px;

    bottom: 9px;

    width: calc(100% - 20px);

    height: 105px;
}


/* =========================================================
   ELEVATION PROFILE
========================================================= */

.profile-line {
    fill: none;

    stroke: #ff8c00;

    stroke-width: 2.5;

    stroke-linejoin: round;
    stroke-linecap: round;
}


.profile-fill {
    fill: rgba(255, 140, 0, .25);
}


.profile-position {
    stroke: white;

    stroke-width: 2;

    stroke-dasharray: 4 3;
}


.profile-dot {
    fill: white;

    stroke: #ff8c00;

    stroke-width: 2;
}


.profile-label {
    fill: rgba(255, 255, 255, .8);

    font-family: Arial, sans-serif;

    font-size: 9px;
}


/* =========================================================
   TUZLA OUTDOORS CREDIT
========================================================= */

#map-credit {
    position: fixed;

    bottom: 0;
    left: 50%;

    transform: translateX(-50%);

    z-index: 1000;

    padding: 4px 9px;

    background: rgba(0, 0, 0, .35);

    border-radius: 6px;

    color: rgba(255, 255, 255, .75);

    font-family: "Trebuchet MS", sans-serif;

    font-size: 12px;

    white-space: nowrap;

    pointer-events: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #distance {
        font-size: 11px;

        padding: 7px 10px;
    }


    .animation-controls {
        bottom: 25px;
    }


    .animation-controls button {
        padding: 8px 11px;

        font-size: 12px;
    }


    #elevation-panel {
        bottom: 63px;

        width: calc(100% - 20px);

        height: 125px;
    }


    #elevation-svg {
        height: 88px;
    }


    #map-credit {
        font-size: 11px;

        padding: 3px 7px;
    }
}