* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Courier New', Courier, monospace;
}

body {
    background-color: #1abc9c;
}

.noselect,
#highScoreHeader *,
#scoreboard *,
#controlsArea>div>button,
#close-button,
#map-mute,
#message-button {
    /* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
    cursor: default;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.orange {
    color: orange;
}

.grey {
    color: grey;
}

.character-element {
    font-family: 'Courier New', Courier, monospace;
    background-color: transparent;
}


/* generic flex container styling
--------------------- */

.flex-container-column-default {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flex-container-row-default {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#highScoreHeader,
#scoreboard,
#playArea {
    /* width: 320px; */
    width: 700px;
    border: 1px solid green;
}

#playArea {
    /* desired height - highscore -scoreboard - control heights =409*/
    /* 569−20−20−120=409*/
    /* height: 409px; */
    height: 700px;
    position: relative;
    overflow: hidden;
}

#highScoreHeader,
#scoreboard {
    height: 20px
}

#gameArea {
    /* border: solid 1px orange; */
    overflow: hidden;
    border: none;
}

#playArea>div:not(#message-bubble):not(#speech-bubble) {
    font-size: 2rem;
}

#mybuddy {
    position: absolute;
    left: 100px;
    top: 100px;
}


/* #playAreaParent{
    position:relative;
} */


/* #space {
    grid-area: space;
}

#left {
    grid-area: left;
}

#right {
    grid-area: right;
}

#up {
    grid-area: up;
}

#down {
    grid-area: down;
} */

#btnLeft,
#btnRight,
#btnUp,
#btnDown {
    font-size: 2rem;
    color: grey;
}

#controlsArea {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: 60px 60px;
    grid-template-areas: 'space space left up right' 'space space left down right';
    background-color: transparent;
}


/****************** left/right up/down controls ******************/

#space {
    display: none;
}

#left {
    grid-area: left;
}

#right {
    grid-area: right;
}

#up {
    grid-area: up;
}

#down {
    grid-area: down;
}

#controlsArea {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: 60px 60px;
    grid-template-areas: 'left up up right' 'left down down right';
    background-color: transparent;
}


/****************** left/right up/down controls end ******************/


/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */

#controlsArea>div>button {
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0px;
}

#start-button {
    position: absolute;
    display: inline-block;
    left: 33%;
    top: 33%;
    margin: auto;
    width: 33%;
    height: 15%;
    z-index: 98;
}

#restart-button {
    position: absolute;
    display: none;
    left: 33%;
    top: 70%;
    margin: auto;
    width: 33%;
    height: 10%;
    z-index: 97;
}

pre {
    /* white-space: pre-wrap; */
    white-space: nowrap;
}

.game-character {
    font-family: 'Courier New', Courier, monospace;
}

.game-character:hover {
    background-color: orange;
}

#message-bubble {
    position: absolute;
    left: 10px;
    top: 40px;
    width: 240px;
    height: 300px;
    background-color: rgba(240, 248, 255, 0.8);
    z-index: 96;
    font-size: 1em;
    display: none;
    border-radius: 50px;
    padding: 20px;
}

#message-button {
    /* width: 100%;
    height: 100%;
    display: none; */
    position: absolute;
    bottom: 0px;
    left: 120px;
    display: none;
    font-size: 2rem;
}

#otter-advisor {
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: none;
    z-index: 99;
}

#game-link {
    color: beige;
    position: absolute;
    top: 0px;
    left: 10px;
    background-color: orange;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 10px;
    display: none;
    border: 2px solid green;
}

#game-char {
    background-color: orange;
    position: absolute;
    top: 0;
    left: 75%;
    font-size: 2rem;
    border-radius: 10px;
    display: none;
    border: 2px solid green;
}

#map-mute {
    position: absolute;
    top: 0;
    right: 0;
}

#map {
    z-index: -1;
    background-color: lightblue;
    color: green;
    font-weight: bold;
}

#close-button {
    background-color: rgb(239, 239, 239);
    width: 320px;
    border: none;
}

#close-button:hover {
    background-color: orange;
}

#walker {
    z-index: 99;
}

@media screen and (min-width: 768px) {
    #controlsArea {
        display: none;
    }
    #gameArea {
        border: none;
    }
    #highScoreHeader,
    #scoreboard,
    #playArea {
        width: 320px;
        /* width: 700px; */
        border: 1px solid green;
    }
    #playArea {
        /* desired height - highscore -scoreboard - control heights =409*/
        /* 569−20−20−120=409*/
        height: 409px;
        /* height: 700px; */
        position: relative;
        overflow: hidden;
    }
}