@font-face {
    font-family: "PressStart2P";
    src: url('fonts/PressStart2P/PressStart2P.ttf');
}

html, body {font-size: 14px; line-height: 1.2em; font-family: "PressStart2P", "Helvetica", "Arial", sans-serif; margin: 0; padding: 0;}
body {
    position: relative; 
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
.container {margin: 0 auto; width: 800px; text-align: center;}

#ui {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5;}

ul {list-style: none; margin: 0; padding: 0;}
    ul li {margin: 0; padding: 0;}


#resource {position: absolute; top: 10px; left: 10px;}
    #resource h2 {font-size: 1.125em; margin: 0 0 5px;}
    #resource .earth {color: #8DAA48;}
    #resource .fire {color: #CC3428;}
    #resource .water {color: #0296D2;}

#selection {color: #ffffff; font-size: 0.6em; margin-left: -16.2em; position: absolute; bottom: 50px; left: 50%; text-align: center; z-index: 9;}   
    
    #selection span span {color: #ffffff; margin: 0; text-shadow: -2px -2px 0px rgba(0,0,0,0.25);}
    #selection span span.error {color: red;}
    #selection p {margin: 0;}
    #selection li {
        border-radius: 20px; 
        background-color: #222222;
        color: rgba(0,0,0,0.5);
        display: block;
        float: left;
        font-size: 2em; 
        margin: 0 0.2em 0.2em;
        padding: 0.5em;
        width: 4em;
        height: 2.8em;
        text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
    }
    #selection span {
        display: block;
        font-size: 1em;
        margin: 0;
        /*margin: 2.8em 0.5em 0;*/
        line-height: 1.5em;

        /*transition: all 200ms ease; */
    }
    #selection li.selected {
        box-shadow: inset 0 1px 1px #fff, inset 0 1px 5px #222 !important;
        position: relative;
        top: 10px;
    }
    #selection #s-earth {
        background-color: #8DAA48; 
        box-shadow: inset 0 1px 1px #fff, 0 1px 1px #4f5f28, 0 2px 1px #4f5f28, 0 1px 1px #4f5f28, 0 3px 1px #4f5f28, 0 4px 1px #4f5f28, 0 5px 1px #4f5f28, 0 6px 1px #4f5f28, 0 7px 1px #4f5f28, 0 8px 1px #4f5f28, 0 9px 5px #222;
    }
    #selection #s-fire {
        background-color: #CC3428;
        box-shadow: inset 0 1px 1px #fff, 0 1px 1px #731d16, 0 2px 1px #731d16, 0 1px 1px #731d16, 0 3px 1px #731d16, 0 4px 1px #731d16, 0 5px 1px #731d16, 0 6px 1px #731d16, 0 7px 1px #731d16, 0 8px 1px #731d16, 0 9px 5px #222;
    }
    #selection #s-water {
        background-color: #0296D2;
        box-shadow: inset 0 1px 1px #fff, 0 1px 1px #015476, 0 2px 1px #015476, 0 1px 1px #015476, 0 3px 1px #015476, 0 4px 1px #015476, 0 5px 1px #015476, 0 6px 1px #015476, 0 7px 1px #015476, 0 8px 1px #015476, 0 9px 5px #222;
    }
.mobile #selection .key {display: none;}
/*.mobile */#selection {
    margin-left: 0;
    left: 10px;
    bottom: 10px;
    width: 1em;
}
/*.mobile */#selection li {margin-bottom: 15px;}

#gameover {color: #222222; display: none; margin: -18em 0 0; padding: 0; position:  absolute; top: 50%; left: 0; text-align: center; text-transform: uppercase; height: 12em; width: 100%;}
    #gameover p {font-size: 1.2em;}
    #gameover .gg {color: #CC3428; font-size: 5em; line-height: 1em; margin: 0; margin-bottom: 20px; text-shadow: 0 0 1px #000, 0 2px 2px #000;}

.clock {color: #222222; position: absolute; top: 2em; left: 25%; text-align: center; width: 50%;}
#clock {font-size: 4.5em; line-height: 1.3em;}
.clock p {margin: 0;}
.mobile .clock p {font-size: 1.5em;}

#clock, #selection {opacity: 0.75;}

/*#popup {background-color: rgba(0,0,0,0.7); border-radius: 10px; color: #ffffff; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -350px; margin-top: -200px; width: 660px;}
#popup h1 {margin-top: 0;}
#popup ul {font-size: 0.8em; font-style: italic;}
#popup .button {margin: 10px auto 0;}*/


.bold {font-weight: bold;}

.center {text-align: center;}

.button {background-color: #0296D2; color: #fff; display: inline-block; font-size: 2.5em; padding: 0.7em 0.8em; text-align: center; text-decoration: none;}
.button:hover {opacity: 0.5;}
.button.secondary {background-color: #8DAA48; font-size: 1em; margin: 0.5em;}

#btn-pause {position: absolute; right: 20px; top: 20px; width: 40px; z-index: 10;}
    #btn-pause img {width: 100%;}
    #btn-pause .pause {display: block;}
    #btn-pause .play {display: none;}
        #btn-pause.paused .pause {display: none;}
        #btn-pause.paused .play {display: block;}
#btn-fullscreen { display: none; background: url('images/btn-fullscreen.png') no-repeat; position: absolute; right: 150px; top: 30px; text-decoration: none; color: #222; width: 40px; height: 32px; text-indent: -99999px;}
#btn-mute { background: url('images/btn-mute.png') no-repeat; position: absolute; right: 75px; top: 23px; text-decoration: none; color: #222; display: block; width: 40px; height: 32px; text-indent: -99999px; z-index: 10;}
#btn-mute.mute { background-position: 0 -32px;}

#intro { font-size: 0.8em; line-height: 1em; position: absolute; left: 0; top: 10%; width: 100%; height: 90%; text-align: center;
overflow-y: scroll;
}
#intro .bold { font-size: 2em; line-height: 1.5em;}

#intro section,
.overlay { background-color: rgba(0,0,0,0.7); color: white; display: block; margin: 0 auto 1em; padding: 2em; text-align: left; text-shadow: 1px 1px 0px #000; line-height: 1.5em; width: 48em; max-width: 90%;}
#intro section p { margin-top: 0;}
#intro section ul { margin-left: 20px; margin-bottom: 10px;}
#intro #intro-1 .story { font-size: 1.5em; line-height: 1.2em; margin: 10px;}
#intro h1 { font-size: 2.3em; line-height: 1em; text-transform: uppercase; margin: 0;}
#intro-1 section,
#intro .center {text-align: center;}
#intro-1 section h2,
#intro-1 section p {margin: 0;}
#intro section img.responsive {max-width: 80%;}
#intro #intro-2 { display: none; opacity: 0.6;}
.instructions li { font-size: 1.3em; list-style: none; margin-top: 0.5em;}
.instructions img { vertical-align: middle; margin-right: 2px;}

.mobile #intro,
.mobile #gameover,
.mobile .clock {font-size: 0.5em;}

#intro-2 .mobile {display: none;}
.mobile #intro-2 .mobile {display: block;}
.mobile #intro-2 .mobile .responsive {width: 220px;}
.mobile #intro-2 .nonmobile {display: none;}


#gameover .overlay {text-align: center; width: 23em;}

#game {/*position: relative; top: -40px; left: -40px; */
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;

    position: absolute;
}

.fgl-popup-scorebox,
.fgl-popup-close-huge {line-height: 1em;}
.fgl_overlay_score,
#fgl_overlay,
#fgl_overlay_ad {top: -40px !important; left: -40px !important; right: -40px !important; bottom: -40px !important;}
.brandlogo {position: fixed; position: absolute; right: 20px; bottom: 20px; width: 100px;}
.brandlogo img {width: 100%;}