/* don't allow copy-paste of content.  it messes up key capture */
* {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

body {
    font-size : 14px;
    margin : 1rem;
    background-color: black;
    color : #ccc;
    line-height: 1.3;
}

* { box-sizing: border-box; }

.page {
    display: flex;
    flex-wrap: wrap;
}

.col {
    display: inline-block;
    vertical-align: top;
    width: 33%;
}



/*-----------------------------------------------
            responsive sizing of columns 
-----------------------------------------------*/

@media only screen and (min-width: 901px) and (max-width: 1100px) {
    div.col {width: 50%;}
}

@media only screen and (max-width: 900px) {
    div.col {width: 100%;}
    div.col.primary {-webkit-order:1;}
    div.col.secondary {-webkit-order:2;}
    
    div.col.primary {order:1;}
    div.col.secondary {order:2;}
}



fieldset {
    padding: 0rem 0.75rem 0rem 1rem;
    border-width: .15rem 0 0 0;
    border-style: solid;
    border-color: #ddd;
    min-width: calc(100% - 10px);
    max-width: calc(100% - 10px);
}

fieldset.mapview { text-align: -webkit-center; }

fieldset > legend {
    font-size: larger;
    width: inherit;
    padding: 0px .5rem;
    margin-bottom: 0px;
    margin-left: 0rem;
    text-align: center;
}


/*-----------------------------------------------
            specific column types 
-----------------------------------------------*/


.maze {
    line-height: 0.9rem;
    letter-spacing: .3rem;
    background-color: #1e1e1e;
    color: lawngreen;
    transition: color .15s ease-in-out;
    width: fit-content;
    padding: 0.4rem 0.2rem 0.4rem 0.6rem;
}
.maze.danger { color: orangered; }
.maze.paused { color: grey; }


.stats div>span:nth-child(1) {
    width: 8rem;
    display: inline-block;
}

.stats div>span:nth-child(2) {
    width: 4rem;
    text-align: right;
    display: inline-block;
    font-family: monospace;
}

.stats div.shake>span {
    -webkit-animation: bounce .5s ease-out;
    -moz-animation: bounce .5s ease-out;
    animation: bounce .5s ease-out;
}


#messagelog div {
    -webkit-animation: bounce .5s ease-out;
    -moz-animation: bounce .5s ease-out;
    animation: bounce .5s ease-out;
}
#messagelog div:nth-child(n+10) { opacity:65%; }
#messagelog div:nth-child(n+13) { opacity:35%; }

.achievements { color: gold; }


.hidden {
    visibility:hidden;
    display:none;
}




/*-----------------------------------------------
            bounce effect for messages 
-----------------------------------------------*/

/* Webkit, Chrome and Safari */
@-webkit-keyframes bounce {
	0% {-webkit-transform:translateX(-1rem);}
	25% {-webkit-transform:translateX(1rem);}
	50% {-webkit-transform:translateX(-0.5rem);}
	75% {-webkit-transform:translateX(0.5rem);}
	100% {-webkit-transform:translateX(0);}
}

/* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
	0% {-moz-transform:translateX(-1rem);}
	25% {-moz-transform:translateX(1rem);}
	50% {-moz-transform:translateX(-0.5rem);}
	75% {-moz-transform:translateX(0.5rem);}
	100% {-moz-transform:translateX(0);}
}

/* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
	0% {transform:translateX(-1rem);}
	25% {transform:translateX(1rem);}
	50% {transform:translateX(-0.5rem);}
	75% {transform:translateX(0.5rem);}
	100% {transform:translateX(0);}
}