/* ==========================================
   SCOUT: RECON RUN
   GLOBAL
   ========================================== */

* {
    box-sizing: border-box;
}

html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #101310;

    font-family: Arial, sans-serif;
}


/* ==========================================
   GAME
   ========================================== */

#game-container {

    position: relative;

    width: 100vw;
    height: 100vh;
}

#game {

    display: block;

    width: 100vw;
    height: 100vh;

    background: #171a17;
}


/* ==========================================
   START MENU
   ========================================== */

#start-menu {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    background: #0b100d;

    display: flex;

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

    z-index: 9999;

    color: #d8ddd8;
}


/* ==========================================
   START MENU CONTENT
   ========================================== */

.start-content {

    width: 440px;

    max-width: 85vw;

    text-align: center;

    position: relative;

}


/* ==========================================
   TITLE
   ========================================== */

.game-title {

    font-size: 64px;

    font-weight: bold;

    letter-spacing: 12px;

    color: #e1e6e1;

    line-height: 1;

    margin-bottom: 8px;
}


.game-subtitle {

    font-size: 22px;

    letter-spacing: 8px;

    color: #8c998d;
}


.demo-text {

    margin-top: 24px;

    font-size: 13px;

    letter-spacing: 4px;

    color: #687368;
}


.creator {

    margin-top: 8px;

    font-size: 16px;

    color: #aeb7ae;
}


/* ==========================================
   RULES
   ========================================== */

.rules {

    margin: 55px auto 0;

    width: 330px;

    text-align: left;
}


.rules-title {

    margin-bottom: 18px;

    font-size: 12px;

    letter-spacing: 3px;

    color: #7f8c80;
}


.rule {

    margin-bottom: 13px;

    font-size: 15px;

    color: #c5ccc5;

    line-height: 1.4;
}


/* ==========================================
   PLAY BUTTON
   ========================================== */

#play-button {

    margin-top: 38px;

    padding: 15px 55px;

    background: transparent;

    border: 2px solid #8fa28f;

    color: #dfe5df;

    font-family: Arial, sans-serif;

    font-size: 16px;

    font-weight: bold;

    letter-spacing: 3px;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.1s ease;
}


#play-button:hover {

    background: #dfe5df;

    color: #0b100d;
}


#play-button:active {

    transform: scale(0.96);
}


/* ==========================================
   MUSIC CREDIT
   ========================================== */

.music-credit {

    position: fixed;

    bottom: 7px;

    left: 0;
    right: 0;

    text-align: center;

    font-size: 8px;

    letter-spacing: 0.4px;

    color: #4f584f;

    pointer-events: none;
}


/* ==========================================
   SONAR BUTTON
   ========================================== */

#sonar-toggle {

    position: absolute;

    top: 20px;
    right: 20px;

    padding: 12px 18px;

    background: #061006;

    color: #00ff66;

    border: 2px solid #00ff66;

    font-weight: bold;

    cursor: pointer;

    z-index: 10;
}


#sonar-toggle:hover {

    background: #0b210f;
}


/* ==========================================
   SONAR PANEL
   ========================================== */

#sonar-panel {

    position: absolute;

    top: 70px;
    right: 20px;

    width: 360px;

    padding: 15px;

    background: rgba(0, 10, 3, 0.95);

    border: 2px solid #00ff66;

    color: #00ff66;

    display: none;

    z-index: 10;
}


#sonar-panel.open {

    display: block;
}


#sonar-panel h2 {

    margin-top: 0;

    font-size: 18px;

    text-align: center;
}


#sonar {

    display: block;

    margin: auto;

    background: black;

    border: 2px solid #00ff66;
}


.sonar-info {

    margin-top: 10px;

    text-align: center;

    line-height: 1.8;

    font-size: 14px;
}


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

#map-toggle {

    position: absolute;

    bottom: 20px;
    right: 20px;

    padding: 12px 18px;

    background: #101510;

    color: #d6b400;

    border: 2px solid #d6b400;

    font-weight: bold;

    cursor: pointer;

    z-index: 10;
}


#map-toggle:hover {

    background: #252515;
}


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

#map-panel {

    position: absolute;

    bottom: 70px;
    right: 20px;

    width: 390px;

    padding: 15px;

    background: rgba(10, 15, 10, 0.96);

    border: 2px solid #d6b400;

    color: #d6b400;

    display: none;

    z-index: 10;
}


#map-panel.open {

    display: block;
}


#map-panel h2 {

    margin-top: 0;

    font-size: 18px;

    text-align: center;
}


#map-display {

    display: block;

    width: 360px;
    height: 220px;

    margin: auto;

    background: #111713;

    border: 2px solid #d6b400;
}

/* ==========================================
   FAILED SCREEN
   ========================================== */

#failed-screen {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    background: rgba(8, 10, 8, 0.94);

    display: none;

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

    z-index: 10000;

    color: #d8ddd8;
}


#failed-screen.open {

    display: flex;

}


.failed-content {

    text-align: center;

    width: 420px;

    max-width: 85vw;
}


.failed-title {

    font-size: 64px;

    font-weight: bold;

    letter-spacing: 8px;

    color: #c9d0c9;

    margin-bottom: 15px;
}


.failed-subtitle {

    font-size: 13px;

    letter-spacing: 3px;

    color: #737d73;

    margin-bottom: 40px;
}


#failed-menu-button {

    padding: 14px 35px;

    background: transparent;

    border: 2px solid #7d887d;

    color: #d5dbd5;

    font-weight: bold;

    letter-spacing: 2px;

    cursor: pointer;
}


#failed-menu-button:hover {

    background: #d5dbd5;

    color: #101310;
}

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

#mobile-controls {

    display: none;

    position: fixed;

    left: 20px;
    bottom: 20px;

    width: 170px;
    height: 170px;

    z-index: 1000;

    pointer-events: none;

    touch-action: none;
}


/* ==========================================
   MOBILE CONTROL BUTTONS
   ========================================== */

#mobile-controls button {

    position: absolute;

    width: 55px;
    height: 55px;

    border-radius: 12px;

    background: rgba(10, 15, 10, 0.9);

    color: #00ff66;

    border: 2px solid #00ff66;

    font-size: 24px;

    font-weight: bold;

    display: flex;

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

    pointer-events: auto;

    touch-action: none;

    user-select: none;

    -webkit-user-select: none;

    -webkit-touch-callout: none;
}


/* ==========================================
   BUTTON POSITIONS
   ========================================== */

#mobile-up {

    left: 57px;
    top: 0;

}


#mobile-left {

    left: 0;
    top: 57px;

}


#mobile-down {

    left: 57px;
    top: 114px;

}


#mobile-right {

    left: 114px;
    top: 57px;

}


/* ==========================================
   BUTTON PRESS EFFECT
   ========================================== */

#mobile-controls button:active {

    background: rgba(0, 255, 102, 0.25);

    transform: scale(0.92);

}


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

@media (max-width: 800px) {

    #mobile-controls {

        display: flex;

    }


    /* Move sonar/map controls away from
       the mobile driving controls */

    #sonar-toggle {

        top: 15px;
        right: 15px;

        padding: 9px 12px;

        font-size: 12px;

    }


    #map-toggle {

        bottom: 15px;
        right: 15px;

        padding: 9px 12px;

        font-size: 12px;

    }


    #sonar-panel {

        top: 55px;
        right: 10px;

        width: min(360px, calc(100vw - 20px));

        max-height: 70vh;

        overflow: auto;

    }


    #map-panel {

        bottom: 55px;
        right: 10px;

        width: min(390px, calc(100vw - 20px));

        max-height: 60vh;

        overflow: auto;

    }


    #sonar {

        max-width: 100%;

        height: auto;

    }


    #map-display {

        max-width: 100%;

        height: auto;

    }

}


/* ==========================================
   VERY SMALL PHONES
   ========================================== */

@media (max-width: 500px) {

    #mobile-controls {

        left: 12px;
        bottom: 12px;

        width: 150px;
        height: 150px;

    }


    #mobile-controls button {

        width: 48px;
        height: 48px;

        font-size: 20px;

    }


    #mobile-up {
        left: 51px;
        top: 0;
    }


    #mobile-left {
        left: 0;
        top: 51px;
    }


    #mobile-down {
        left: 51px;
        top: 102px;
    }


    #mobile-right {
        left: 102px;
        top: 51px;
    }

}