html {height: 100%;}body {height: 100%; border-top: 1px solid black; margin: -1px 0 0 0; padding: 0px; background-color: white; transition: background-color 1400ms linear; -webkit-transition: background-color 1400ms linear; -moz-transition: background-color 1400ms linear; -ms-transition: background-color 1400ms linear; -o-transition: background-color 1400ms linear;}body.night {background-color: black;}body.paused:before {display: block; content: ' '; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000;}#pauseIcon {z-index: 3; width: 30px; height: 30px; position: absolute; top: 10px; right: 10px; cursor: pointer; opacity: 0.2; transition: all 100ms linear; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -ms-transition: all 100ms linear; -o-transition: all 100ms linear;}#pauseIcon:hover {opacity: 1;}#pauseIcon:before,#pauseIcon:after {height: 80%; width: 20%; content: ' '; display: block; position: absolute; top: 20%; background: black; transition: background 1400ms linear; -webkit-transition: background 1400ms linear; -moz-transition: background 1400ms linear; -ms-transition: background 1400ms linear; -o-transition: background 1400ms linear;}#pauseIcon:before {left: 20%;}#pauseIcon:after {right: 20%;}.paused #pauseIcon {opacity: 1; height: 100px; width: 100px; top: 50%; right: 50%; margin-top: -50px; margin-right: -50px; z-index: 2000;}.night #pauseIcon:before,.night #pauseIcon:after {background: white;}.titleScreen #pauseIcon {display: none;}#test {position: absolute; left: 10px; top: 40px; display:inline-block; padding:5px; height: 10px; width: 10px; margin:auto; border:1px solid black; background-color: red; z-index: 101;}.hidden {opacity: 0 !important; cursor: default !important; transition: opacity 200ms linear !important; -webkit-transition: opacity 200ms linear !important; -moz-transition: opacity 200ms linear !important; -ms-transition: opacity 200ms linear !important; -o-transition: opacity 200ms linear !important;}#gameContainer {position: absolute; top: 0px; left: 50%; margin-left: -244px; z-index: 1;}#loadingScreen {z-index: 100; position: absolute; left: 50%; margin-left: -300px; width: 600px; height: 300px; background: url(https://glmedia.doublespeakgames.com/img/title.png) top left no-repeat; transition: opacity 700ms linear; -webkit-transition: opacity 700ms linear; -moz-transition: opacity 700ms linear; -ms-transition: opacity 700ms linear; -o-transition: opacity 700ms linear;}#loadingScreen.hidden {z-index: -1;}#loadingScreen .saveSpinner {width: 80px; height: 80px; opacity: 1; width: 80px; bottom: 0px; top: auto; left: 50%; margin-left: -40px;}.longload {position: absolute; bottom: -100px; font-size: 1.5em; line-height: 40px; text-align: center; width: 100%;}.longload a {display: block;}@media screen and (min-height: 860px) {#loadingScreen {top:20%}}@media screen and (max-height: 860px) {#loadingScreen {top: 5%;}}@media screen and (max-width: 590px) {.saveSlots {transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); top: 175px;}}.saveSlots {list-style: none; padding: 0; margin: 0; position: relative; top: 200px; width: 236px; margin: auto;}.saveSlot {position: absolute; cursor: pointer; margin-bottom: 10px; font-size: 1.5em; width: 236px; left: 50%; margin-left: -118px; height: 120px; transition: margin 500ms linear, height 500ms linear, width 500ms linear; -webkit-transition: margin 500ms linear, height 500ms linear, width 500ms linear; -moz-transition: margin 500ms linear, height 500ms linear, width 500ms linear; -ms-transition: margin 500ms linear, height 500ms linear, width 500ms linear; -o-transition: margin 500ms linear, height 500ms linear, width 500ms linear;}.saveSlot:nth-child(1) {top: 0px;}.saveSlot:nth-child(2) {top: 130px;}.saveSlot:nth-child(3) {top: 260px;}.saveSlot.empty + .saveSlot,.saveSlot.empty + .saveSlot + .saveSlot {margin-top: -70px;}.saveSlot.empty + .saveSlot.empty + .saveSlot {margin-top: -140px;}.saveSlot.empty {text-align: center; height: 50px;}.saveSlot .heart,.saveSlot .bigheart {display: inline-block;}.saveSlot:hover .slotSide {box-shadow: 0 0 5px 2px #CCC;}.saveSlot .day {position: absolute; bottom: 10px; left: 10px;}.saveSlot .star {position: relative; display: inline-block; top: 0px; margin-right: 5px; background-position: 0 -874px;}.saveSlot .infoSide,.saveSlot .slotSide {background: white; border: 2px solid #000; border-radius: 4px; position: absolute; padding: 10px; top: 0; left: 0; bottom: 0; right: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; transition: transform 500ms linear; -webkit-transition: -webkit-transform 500ms linear; -moz-transition: -moz-transform 500ms linear; -ms-transition: -ms-transform 500ms linear; -o-transition: -o-transform 500ms linear;}.saveSlot .infoSide {cursor: default; transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); z-index: 1;}.infoSide .labelText {text-align: left;}.saveSlot.flipped {box-shadow: none !important;}.saveSlot.bigView {z-index: 2;}.saveSlot.flipped.bigView {height: 300px; width: 400px; margin-left: -200px;}.saveSlot.flipped.bigView:nth-child(2) {margin-top: -125px !important;}.saveSlot.flipped.bigView:nth-child(3) {margin-top: -255px !important;}.saveSlot.flipped .infoSide {transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg);}.saveSlot.flipped .slotSide {transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg);}.saveSlot textarea {border: 1px solid #ccc; box-sizing: border-box; height: 75%; width: 100%; padding: 5px; resize: none;}.confirmText {margin-top: 20px;}.confirmDelete .infoSide {background-color: #BC4D4D; text-align: center; font-size: 1.3em;}.buttons {position: absolute; right: 10px; bottom: 10px; padding: 0; margin: 0; list-style: none; line-height: 0;}.buttons li {width: 28px; height: 28px; display: inline-block; background-image: url(https://glmedia.doublespeakgames.com/img/icons.png); margin-left: 5px; cursor: pointer;}.confirm {background-position: 0 -60px;}.cancel {background-position: -28px -60px;}.export {background-position: -56px -60px;}.import {background-position: -84px -60px;}.delete {background-position: -112px -60px;}.menuBar {z-index: 0; height: 550px; padding-top: 50px; width: 100%; position: fixed; bottom: 0px; border-top: 2px solid; background-color: white; box-sizing: border-box; transition: background-color 1400ms linear, border-color 1400ms linear, opacity 200ms linear, transform 200ms linear !important; -webkit-transition: background-color 1400ms linear, border-color 1400ms linear, opacity 200ms linear, -webkit-transform 200ms linear !important; -moz-transition: background-color 1400ms linear, border-color 1400ms linear, opacity 200ms linear, -moz-transform 200ms linear !important; -ms-transition: background-color 1400ms linear, border-color 1400ms linear, opacity 200ms linear, -ms-transform 200ms linear !important; -o-transition: background-color 1400ms linear, border-color 1400ms linear, opacity 200ms linear, -o-transform 200ms linear !important; transform: translateY(500px); -webkit-transform: translateY(500px); -moz-transform: translateY(500px); -ms-transform: translateY(500px); -o-transform: translateY(500px);}.night .menuBar {background-color: black;}.bigExplosion .menuBar {z-index: 101; background-color: white; border-color: black;}@media screen and (max-height: 780px) {.portrait .menuBar, .portrait.night .menuBar {border-top: 0px;} .portrait.night .menuBtn, .menuBtn {border: 2px solid;} .menuBar, .night .menuBar {border-top: 0px;} .night .menuBtn, .menuBtn {border: 2px solid;}}.menuBtn {height: 40px; width: 40px; background: url(https://glmedia.doublespeakgames.com/img/icons.png) 0 -362px no-repeat; border-radius: 4px; position: absolute; right: 3px; top: 3px; cursor: pointer; transition: border-color 1400ms linear !important; -webkit-transition: border-color 1400ms linear !important; -moz-transition: border-color 1400ms linear !important; -ms-transition: border-color 1400ms linear !important; -o-transition: border-color 1400ms linear !important;}.menuBtn .nightSprite {height: 40px; width: 40px; background: url(https://glmedia.doublespeakgames.com/img/icons.png) 0px -402px no-repeat;}.menuBar.open {z-index: 102; border-top: 2px solid; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); background-color: white; box-shadow: 0 5px 5px 5px #666;}@media screen and (max-height: 552px) {.menuBar.open {height: 100%; margin-top: -2px;}}.menuBar.closing {z-index: 300;}.open .menuBtn {border: 0px;}.night .menuBar.open {background-color: black;}.bigExplosion .menuBar.open {background-color: white;}.dayNotifier {width: 100%; text-align: center; position: absolute; top: 10px; font-size: 2em; color: black; text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF; transition: opacity 500ms linear; -webkit-transition: opacity 500ms linear; -moz-transition: opacity 500ms linear; -ms-transition: opacity 500ms linear; -o-transition: opacity 500ms linear;}.nightSprite, .daySprite {transition: opacity 1400ms linear; -webkit-transition: opacity 1400ms linear; -moz-transition: opacity 1400ms linear; -ms-transition: opacity 1400ms linear; -o-transition: opacity 1400ms linear;}.nightSprite {opacity: 0;}.night .nightSprite {opacity: 1;}.bigExplosion .nightSprite {opacity: 0;}.daySprite {opacity: 1;}.night .daySprite {opacity: 0;}.bigExplosion .daySprite {opacity: 1;}.litBorder {transition: all 1400ms linear; -webkit-transition: all 1400ms linear; -moz-transition: all 1400ms linear; -ms-transition: all 1400ms linear; -o-transition: all 1400ms linear; border-color: #000000;}.night .litBorder {border-color: #FFFFFF;}.bigExplosion .litBorder {border-color: black;}.logo {position: absolute; left: 5px; top: 1px; background-position: -480px -699px;}.logo,.logo .nightSprite {display: block; height: 48px; width: 48px; background-image: url(https://glmedia.doublespeakgames.com/img/icons.png);}.logo .nightSprite {background-position: -480px -747px;}.saveSpinner.active + .logo {display: none;}.saveSpinner {width: 40px; height: 40px; position: absolute; left: 9px; top: 4px; opacity: 0; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; -o-transition: opacity 200ms linear;}.saveSpinner.active {opacity: 1;}.saveSpinner div {position: absolute; width: 15%; height: 15%; background-color: black; transition: background-color 1400ms linear; -webkit-transition: background-color 1400ms linear; -moz-transition: background-color 1400ms linear; -ms-transition: background-color 1400ms linear; -o-transition: background-color 1400ms linear; animation: pulse 1s infinite; -webkit-animation: pulse 1s infinite; -moz-animation: pulse 1s infinite; -ms-animation: pulse 1s infinite; -o-animation: pulse 1s infinite;}.night .saveSpinner div {background-color: white;}.bigExplosion .saveSpinner div {background-color: black;}.saveSpinner div:nth-child(1) {top: 0px; left: 42.5%;}.saveSpinner div:nth-child(2) {top: 10%; right: 10%; animation-delay: -875ms; -webkit-animation-delay: -875ms; -moz-animation-delay: -875ms; -ms-animation-delay: -875ms; -o-animation-delay: -875ms;}.saveSpinner div:nth-child(3) {top: 42.5%; right: 0px; animation-delay: -750ms; -webkit-animation-delay: -750ms; -moz-animation-delay: -750ms; -ms-animation-delay: -750ms; -o-animation-delay: -750ms;}.saveSpinner div:nth-child(4) {bottom: 10%; right: 10%; animation-delay: -625ms; -webkit-animation-delay: -625ms; -moz-animation-delay: -625ms; -ms-animation-delay: -625ms; -o-animation-delay: -625ms;}.saveSpinner div:nth-child(5) {bottom: 0; left: 42.5%; animation-delay: -500ms; -webkit-animation-delay: -500ms; -moz-animation-delay: -500ms; -ms-animation-delay: -500ms; -o-animation-delay: -500ms;}.saveSpinner div:nth-child(6) {bottom: 10%; left: 10%; animation-delay: -375ms; -webkit-animation-delay: -375ms; -moz-animation-delay: -375ms; -ms-animation-delay: -375ms; -o-animation-delay: -375ms;}.saveSpinner div:nth-child(7) {top: 42.5%; left: 0px; animation-delay: -250ms; -webkit-animation-delay: -250ms; -moz-animation-delay: -250ms; -ms-animation-delay: -250ms; -o-animation-delay: -250ms;}.saveSpinner div:nth-child(8) {top: 10%; left: 10%; animation-delay: -125ms; -webkit-animation-delay: -125ms; -moz-animation-delay: -125ms; -ms-animation-delay: -125ms; -o-animation-delay: -125ms;}@keyframes pulse {0% {opacity: 0} 50% {opacity: 1} 100% {opacity: 0}}@-webkit-keyframes pulse {0% {opacity: 0} 50% {opacity: 1} 100% {opacity: 0}}@-moz-keyframes pulse {0% {opacity: 0} 50% {opacity: 1} 100% {opacity: 0}}@-ms-keyframes pulse {0% {opacity: 0} 50% {opacity: 1} 100% {opacity: 0}}@-o-keyframes pulse {0% {opacity: 0} 50% {opacity: 1} 100% {opacity: 0}}.gameBoard {position: relative; margin: 110px auto 0px; border: 2px solid; padding: 2px; opacity: 1; transition: border-color 1400ms linear, background-color 1400ms linear, opacity 1s linear, transform 600ms cubic-bezier(.06,.48,.53,1.53); -webkit-transition: border-color 1400ms linear, background-color 1400ms linear, opacity 1s linear, -webkit-transform 600ms cubic-bezier(.06,.48,.53,1.53); -moz-transition: border-color 1400ms linear, background-color 1400ms linear, opacity 1s linear, -moz-transform 600ms cubic-bezier(.06,.48,.53,1.53); -ms-transition: border-color 1400ms linear, background-color 1400ms linear, opacity 1s linear, -ms-transform 600ms cubic-bezier(.06,.48,.53,1.53); -o-transition: border-color 1400ms linear, background-color 1400ms linear, opacity 1s linear, -o-transform 600ms cubic-bezier(.06,.48,.53,1.53);}.gameBoard.tilted {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg);}.gameBoard.flipTilted {transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg);}.tileContainer {z-index: 1; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background-color: white; perspective: 600px; -moz-perspective: 600px; -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; transition: background-color 1400ms linear; -webkit-transition: background-color 1400ms linear; -moz-transition: background-color 1400ms linear; -ms-transition: background-color 1400ms linear; -o-transition: background-color 1400ms linear;}.night .tileContainer {background-color: black;}.tile {cursor: pointer; width: 60px; height: 60px; position: absolute; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transition: transform 200ms linear, opacity 200ms linear; -webkit-transition: -webkit-transform 200ms linear, opacity 200ms linear;; -moz-transition: -moz-transform 200ms linear, opacity 200ms linear; -ms-transition: -ms-transform 200ms linear, opacity 200ms linear; -o-transition: -o-transform 200ms linear, opacity 200ms linear;}.tile.pooled {transition: none !important;}.tile > div {backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; border-radius: 4px; border: 2px solid; position: absolute; top: 50%; left: 50%; margin: -28px 0 0 -28px; width: 52px; height: 52px; transition: transform 500ms linear, border-color 1400ms linear; -webkit-transition: -webkit-transform 500ms linear, border-color 1400ms linear; -moz-transition: -moz-transform 500ms linear, border-color 1400ms linear; -ms-transition: -ms-transform 500ms linear, border-color 1400ms linear; -o-transition: -o-transform 500ms linear, border-color 1400ms linear;}.tile .nightSide {transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg);}.night .tile .daySide {transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg);}.night .tile .nightSide {transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg);}.tile .daySide,.tile .nightSide {background-image: url(https://glmedia.doublespeakgames.com/img/tiles.png); background-repeat: no-repeat;}.tile.grain .daySide {background-position: 0 0;}.tile.grain .nightSide {background-position: 0 -467px;}.grain2 .tile.grain .daySide {background-position: 0 -52px;}.grain2 .tile.grain .nightSide {background-position: 0 -519px;}.grain3 .tile.grain .daySide {background-position: 0 -104px;}.grain3 .tile.grain .nightSide {background-position: 0 -571px;}.grain4 .tile.grain .daySide {background-position: 0 -156px;}.grain4 .tile.grain .nightSide {background-position: 0 -623px;}.dragonFight .tile.grain .nightSide {background-position: 0 -936px;}.tile.stone .daySide {background-position: -52px 0px; transition-delay: 300ms, 0ms;}.tile.stone .nightSide {background-position: -52px -467px; transition-delay: 300ms, 0ms;}.stone2 .tile.stone .daySide {background-position: -52px -52px;}.stone2 .tile.stone .nightSide {background-position: -52px -519px;}.stone3 .tile.stone .daySide {background-position: -52px -104px;}.stone3 .tile.stone .nightSide {background-position: -52px -571px;}.stone4 .tile.stone .daySide {background-position: -52px -156px;}.stone4 .tile.stone .nightSide {background-position: -52px -623px;}.stone5 .tile.stone .daySide {background-position: -52px -208px;}.stone5 .tile.stone .nightSide {background-position: -52px -675px;}.stone6 .tile.stone .daySide {background-position: -52px -260px;}.stone6 .tile.stone .nightSide {background-position: -52px -727px;}.stone7 .tile.stone .daySide {background-position: -52px -312px;}.stone7 .tile.stone .nightSide {background-position: -52px -779px;}.stone8 .tile.stone .daySide {background-position: -52px -364px;}.stone8 .tile.stone .nightSide {background-position: -52px -831px;}.stone9 .tile.stone .daySide {background-position: -52px -416px;}.stone9 .tile.stone .nightSide {background-position: -52px -883px;}.tile.wood .daySide {background-position: -104px 0px; transition-delay: 600ms, 0ms;}.tile.wood .nightSide {background-position: -104px -467px; transition-delay: 600ms, 0ms;}.wood2 .tile.wood .daySide {background-position: -104px -52px;}.wood2 .tile.wood .nightSide {background-position: -104px -519px;}.wood3 .tile.wood .daySide {background-position: -104px -104px;}.wood3 .tile.wood .nightSide {background-position: -104px -571px;}.wood4 .tile.wood .daySide {background-position: -104px -156px;}.wood4 .tile.wood .nightSide {background-position: -104px -623px;}.wood5 .tile.wood .daySide {background-position: -104px -208px;}.wood5 .tile.wood .nightSide {background-position: -104px -675px;}.wood6 .tile.wood .daySide {background-position: -104px -260px;}.wood6 .tile.wood .nightSide {background-position: -104px -727px;}.wood7 .tile.wood .daySide {background-position: -104px -312px;}.wood7 .tile.wood > div {background-position: -104px -779px;}.wood8 .tile.wood .daySide {background-position: -104px -364px;}.wood8 .tile.wood .nightSide {background-position: -104px -831px;}.wood9 .tile.wood .daySide {background-position: -104px -416px;}.wood9 .tile.wood .nightSide {background-position: -104px -883px;}.tile.clay .daySide {background-position: -156px 0px; transition-delay: 900ms, 0ms;}.tile.clay .nightSide {background-position: -156px -467px; transition-delay: 900ms, 0ms;}.clay2 .tile.clay .daySide {background-position: -156px -52px;}.clay2 .tile.clay .nightSide {background-position: -156px -519px;}.clay3 .tile.clay .daySide {background-position: -156px -104px;}.clay3 .tile.clay > div {background-position: -156px -571px;}.clay4 .tile.clay .daySide {background-position: -156px -156px;}.clay4 .tile.clay .nightSide {background-position: -156px -623px;}.dragonFight .tile.clay .nightSide {background-position: -156px -936px;}.tile.cloth .daySide {background-position: -208px 0px; transition-delay: 1200ms, 0ms;}.tile.cloth .nightSide {background-position: -208px -467px; transition-delay: 1200ms, 0ms;}.cloth2 .tile.cloth .daySide {background-position: -208px -52px;}.cloth2 .tile.cloth .nightSide {background-position: -208px -519px;}.cloth3 .tile.cloth .daySide {background-position: -208px -104px;}.cloth3 .tile.cloth .nightSide {background-position: -208px -571px;}.cloth4 .tile.cloth .daySide {background-position: -208px -156px;}.cloth4 .tile.cloth .nightSide {background-position: -208px -623px;}.dragonFight .tile.cloth .nightSide {background-position: -208px -936px;}.tile.mana .daySide {background-position: -260px 0px; transition-delay: 1200ms, 0ms;}.tile.mana .nightSide {background-position: -260px -467px; transition-delay: 1200ms, 0ms;}.selected:after {display: block; position: absolute; content: ' '; background: url(https://glmedia.doublespeakgames.com/img/select-border.png); top: 0; bottom: 0; left: 0; right: 0; background-size: 100%;}.shaking {animation: shake 100ms infinite; -webkit-animation: shake 100ms infinite; -moz-animation: shake 100ms infinite; -ms-animation: shake 100ms infinite; -o-animation: shake 100ms infinite;}@keyframes shake {0% {transform: translateX(0px)} 25% {transform: translateX(-10px)} 75% {transform: translateX(10px)} 100% {transform: translateX(0px)}}@-webkit-keyframes shake {0% {-webkit-transform: translateX(0px)} 25% {-webkit-transform: translateX(-10px)} 75% {-webkit-transform: translateX(10px)} 100% {-webkit-transform: translateX(0px)}}@-moz-keyframes shake {0% {-moz-transform: translateX(0px)} 25% {-moz-transform: translateX(-10px)} 75% {-moz-transform: translateX(10px)} 100% {-moz-transform: translateX(0px)}}@-ms-keyframes shake {0% {-ms-transform: translateX(0px)} 25% {-ms-transform: translateX(-10px)} 75% {-ms-transform: translateX(10px)} 100% {-ms-transform: translateX(0px)}}@-o-keyframes shake {0% {-o-transform: translateX(0px)} 25% {-o-transform: translateX(-10px)} 75% {-o-transform: translateX(10px)} 100% {-o-transform: translateX(0px)}}.world {position: absolute; z-index: 2; top: -112px; width: 100%; height: 110px; overflow: hidden; background-color: white; transition: background-color 1400ms linear; -webkit-transition: background-color 1400ms linear; -moz-transition: background-color 1400ms linear; -ms-transition: background-color 1400ms linear; -o-transition: background-color 1400ms linear;}.night .world {background-color: black;}.star {position: absolute; background: url(https://glmedia.doublespeakgames.com/img/icons.png) no-repeat; width: 16px; height: 16px; top: 10px; opacity: 1; transition: opacity 1400ms linear; -webkit-transition: opacity 1400ms linear; -moz-transition: opacity 1400ms linear; -ms-transition: opacity 1400ms linear; -o-transition: opacity 1400ms linear;}.night .star {opacity: 0;}.dude {background-image: url(https://glmedia.doublespeakgames.com/img/monsters.png); background-repeat: no-repeat; position: absolute; bottom: 0px; width: 34px; height: 32px; z-index: 10;}.dude .animationLayer.nightSprite {background-image: url(https://glmedia.doublespeakgames.com/img/monsters.png);}.dude, .monster {position: absolute; bottom: 0; left: 0;}.animationLayer {width: 100%; height: 100%}.heldBlock {position: absolute; width: 10px; height: 10px; right: 5px; top: 6px; font-size: 0px;}.building {position: absolute; margin-bottom: 0px; bottom: -80px; width: 60px; height: 80px; background-position: 0px bottom; background-repeat: no-repeat; transition: opacity 1400ms linear, margin-bottom 500ms linear; -webkit-transition: opacity 1400ms linear, margin-bottom 500ms linear; -moz-transition: opacity 1400ms linear, margin-bottom 500ms linear; -ms-transition: opacity 1400ms linear, margin-bottom 500ms linear; -o-transition: opacity 1400ms linear, margin-bottom 500ms linear; z-index: 1;}.night .building {opacity: 0;}.building {background-image: url(https://glmedia.doublespeakgames.com/img/buildings.png);}.resources {z-index: 2; position: absolute; font-size: 0px; bottom: 3px; left: 14px; width: 30px; height: 30px; border: 1px solid black; text-align: right; transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transition: opacity 1400ms linear, height 200ms linear, width 200ms linear, left 200ms linear, bottom 200ms linear; -webkit-transition: opacity 1400ms linear, height 200ms linear, width 200ms linear, left 200ms linear, bottom 200ms linear; -moz-transition: opacity 1400ms linear, height 200ms linear, width 200ms linear, left 200ms linear, bottom 200ms linear; -ms-transition: opacity 1400ms linear, height 200ms linear, width 200ms linear, left 200ms linear, bottom 200ms linear; -o-transition: opacity 1400ms linear, height 200ms linear, width 200ms linear, left 200ms linear, bottom 200ms linear; opacity: 1;}.grain2 .resources {height: 40px;}.grain3 .resources {height: 40px; width: 40px; left: 9px;}.grain4 .resources {height: 40px; width: 50px; left: 4px; bottom: 1px;}.resourceBars {position: relative; top: 0px; margin: 0 -1px; padding: 0; list-style: none; border: 2px solid black; height: 18px; transition: opacity 1400ms linear, transform 500ms linear; -webkit-transition: opacity 1400ms linear, -webkit-transform 500ms linear; -moz-transition: opacity 1400ms linear, -moz-transform 500ms linear; -ms-transition: opacity 1400ms linear, -ms-transform 500ms linear; -o-transition: opacity 1400ms linear, -o-transform 500ms linear; opacity: 0; cursor: pointer;}.resourceBars.show {opacity: 1; transform: translateY(-20px); -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px);}.resourceBars.sunk {transform: translateY(80px); -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transition: transform 1800ms linear; -webkit-transform: -webkit-translateY(80px); -moz-transform: -moz-translateY(80px); -ms-transform: -ms-translateY(80px); -o-transform: -o-translateY(80px);}.resourceBar {display: block;}.bars-2 .resourceBar {height: 9px;}.bars-3 .resourceBar {height: 6px;}.resourceBar-inner {height: 100%; width: 0; transition: width 200ms linear; -webkit-transition: width 200ms linear; -moz-transition: width 200ms linear; -ms-transition: width 200ms linear; -o-transition: width 200ms linear;}.building.upgrading {margin-bottom: 20px; cursor: pointer;}.night .building.upgrading {cursor: default;}.building.sunk {margin-bottom: -80px; transition: margin-bottom 2500ms linear; -webkit-transition: margin-bottom 2500ms linear; -moz-transition: margin-bottom 2500ms linear; -ms-transition: margin-bottom 2500ms linear; -o-transition: margin-bottom 2500ms linear;}.night .resourceBars, .night .resources {opacity: 0; cursor: default;}.blockPile .container {float: left; position: relative;}.blockPile .container.width1 {width: 10px;}.blockPile .container.width2 {width: 20px;}.blockPile .container.height1 {height: 10px;}.blockPile .container.height2 {height: 20px;}.blockPile .container.height3 {height: 30px;}.blockPile .container.height4 {height: 40px;}.blockPile .container.height5 {height: 50px;}.blockPile .container.height6 {height: 60px;}.blockPile .container.height7 {height: 70px;}.blockPile .container.height8 {height: 80px;}.blockPile .container.height9 {height: 90px;}.blockPile .container.height10 {height: 100px;}.blockPile .ghost {position: absolute; opacity: 0.7; top: 0px; left: 0px; bottom: 0px; right: 0px; border-width: 0px 2px 2px 2px; border-style: solid; border-color: black; display: none; transition: opacity 500ms linear; -webkit-transition: opacity 500ms linear; -moz-transition: opacity 500ms linear; -ms-transition: opacity 500ms linear; -o-transition: opacity 500ms linear;}.block {display: inline-block; position: relative; width: 8px; height: 8px; border: 1px solid black; transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);}.block div {height: 100%; transition: width 300ms linear, background-color 200ms linear; -webkit-transition: width 300ms linear, background-color 200ms linear; -ms-transition: width 300ms linear, background-color 200ms linear; -moz-transition: width 300ms linear, background-color 200ms linear; -o-transition: width 300ms linear, background-color 200ms linear;}.block.grain div {background-color: #FFE97F;}.block.wood div,.wood .resourceBar-inner {background-color: #7C5840;}.resourceBar.wood {background-color: rgba(124, 88, 64, 0.2);}.wood4 .block.wood div,.wood4 .wood .resourceBar-inner,.wood5 .block.wood div,.wood5 .wood .resourceBar-inner,.wood6 .block.wood div,.wood6 .wood .resourceBar-inner {background-color: #876C5B;}.wood4 .resourceBar.wood,.wood5 .resourceBar.wood,.wood6 .resourceBar.wood {background-color: rgba(135, 108, 91, 0.2);}.wood7 .block.wood div,.wood7 .wood .resourceBar-inner,.wood8 .block.wood div,.wood8 .wood .resourceBar-inner,.wood9 .block.wood div,.wood9 .wood .resourceBar-inner {background-color: #FFD800;}.wood7 .resourceBar.wood,.wood8 .resourceBar.wood,.wood9 .resourceBar.wood {background-color: rgba(255, 216, 0, 0.2);}.block.stone div,.stone .resourceBar-inner {background-color: #999999;}.resourceBar.stone {background-color: rgba(153, 153, 153, 0.2);}.stone4 .block.stone div,.stone4 .stone .resourceBar-inner,.stone5 .block.stone div,.stone5 .stone .resourceBar-inner,.stone6 .block.stone div,.stone6 .stone .resourceBar-inner {background-color: #135468;}.stone4 .resourceBar.stone,.stone5 .resourceBar.stone,.stone6 .resourceBar.stone {background-color: rgba(19, 84, 104, 0.2);}.stone7 .block.stone div,.stone7 .stone .resourceBar-inner,.stone8 .block.stone div,.stone8 .stone .resourceBar-inner,.stone9 .block.stone div,.stone9 .stone .resourceBar-inner {background-color: #0097FE;}.stone7 .resourceBar.stone,.stone8 .resourceBar.stone,.stone9 .resourceBar.stone {background-color: rgba(0, 151, 254, 0.2);}.block.clay div,.clay .resourceBar-inner {background-color: #C65645;}.resourceBar.clay {background-color: rgba(198, 86, 69, 0.2);}.block.cloth div,.cloth .resourceBar-inner {background-color: #EDC842;}.resourceBar.cloth {background-color: rgba(237, 200, 66, 0.2);}.cloth3 .block.cloth div,.cloth3 .cloth .resourceBar-inner,.cloth4 .block.cloth div,.cloth4 .cloth .resourceBar-inner {background-color: #853AFF;}.cloth3 .resourceBar.cloth,.cloth4 .resourceBar.cloth {background-color: rgba(133, 58, 255, 0.2);}.celestial {z-index: -1; width: 30px; height: 30px; top: 0px; left: 0px; background: url(https://glmedia.doublespeakgames.com/img/icons.png) no-repeat; position: absolute; transform: translate3d(0px, 110px, 0px); -webkit-transform: translate3d(0px, 110px, 0px); -moz-transform: translate3d(0px, 110px, 0px); -ms-transform: translate3d(0px, 110px, 0px); -o-transform: translate3d(0px, 110px, 0px); transition: transform 500ms linear; -webkit-transition: -webkit-transform 500ms linear; -moz-transition: -moz-transform 500ms linear; -ms-transition: -ms-transform 500ms linear; -o-transition: -o-transform 500ms linear;}.celestial.noTransition {transition: none;}.healthBar {width: 30px; margin-top: -15px; height: 3px; border: 1px solid white; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; -o-transition: opacity 200ms linear;}.healthBar > div {background-color: white; height: 100%; transition: width 200ms linear; -webkit-transition: width 200ms linear; -moz-transition: width 200ms linear; -ms-transition: width 200ms linear; -o-transition: width 200ms linear;}.monster {position: absolute; bottom: 0px; background: url(https://glmedia.doublespeakgames.com/img/monsters.png) no-repeat;}.zombie {height: 32px; width: 16px;}.zombie .healthBar {margin-left: -7px;}.hauntedArmour {height: 49px; width: 70px;}.hauntedArmour .healthBar {margin-left: 20px;}.earthElemental {height: 74px; width: 58px;}.earthElemental .healthBar {margin-left: 14px;}.demon {height: 86px; width: 72px;}.demon .healthBar {margin-left: 6px;}.rat {height: 13px; width: 40px;}.rat .healthBar {margin-left: 5px;}.spider {height: 38px; width: 60px;}.spider .healthBar {margin-left: 15px;}.waterElemental {height: 39px; width: 53px;}.waterElemental .healthBar {margin-left: 20px;}.imp {height: 60px; width: 30px;}.imp .healthBar {margin-left: 0px;}.skeleton {height: 32px; width: 27px;}.skeleton .healthBar {margin-left: -2px;}.lizardman {height: 35px; width: 32px;}.lizardman .healthBar {margin-left: 1px;}.fireElemental {height: 41px; width: 30px;}.fireElemental .healthBar {margin-left: 0px;}.warlock {height: 37px; width: 24px;}.warlock .healthBar {margin-left: -3px;}.lich {height: 60px; width: 41px; transition: opacity 300ms linear; -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; -o-transition: opacity 300ms linear;}.projectile {position: absolute; height: 100%; width: 8px; bottom: 20px; transition: transform 500ms linear; -webkit-transition: -webkit-transform 500ms linear; -moz-transition: -moz-transform 500ms linear; -ms-transition: -ms-transform 500ms linear; -o-transition: -o-transform 500ms linear;}.projectileInner {position: absolute; bottom: 0px; width: 8px; height: 1px; background-color: white; transition: transform 500ms linear; -webkit-transition: -webkit-transform 500ms linear; -moz-transition: -moz-transform 500ms linear; -ms-transition: -ms-transform 500ms linear; -o-transition: -o-transform 500ms linear;}.left .projectileInner {transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);}.right .projectileInner {transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);}.top .projectileInner {transform: translate3d(0, -75px, 0) rotate(0deg); -webkit-transform: translate3d(0, -75px, 0) rotate(0deg); -moz-transform: translate3d(0, -75px, 0) rotate(0deg); -ms-transform: translate3d(0, -75px, 0) rotate(0deg); -o-transform: translate3d(0, -75px, 0) rotate(0deg); transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out;}.bottom .projectileInner {transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -o-transition-timing-function: ease-in;}.bottom.left .projectileInner {transform: translate3d(0, 0px, 0) rotate(-45deg); -webkit-transform: translate3d(0, 0px, 0) rotate(-45deg); -moz-transform: translate3d(0, 0px, 0) rotate(-45deg); -ms-transform: translate3d(0, 0px, 0) rotate(-45deg); -o-transform: translate3d(0, 0px, 0) rotate(-45deg);}.bottom.right .projectileInner {transform: translate3d(0, 0px, 0) rotate(45deg); -webkit-transform: translate3d(0, 0px, 0) rotate(45deg); -moz-transform: translate3d(0, 0px, 0) rotate(45deg); -ms-transform: translate3d(0, 0px, 0) rotate(45deg); -o-transform: translate3d(0, 0px, 0) rotate(45deg);}.fireball {width: 16px;}.fireball .projectileInner {background: url(https://glmedia.doublespeakgames.com/img/icons.png) 0 -175px transparent; width: 16px; height: 7px;}.fireball.right .projectileInner {background-position: -16px -175px;}.worldEffect {position: absolute; bottom: 0px;}.worldEffect.iceBlock,.worldEffect.fire {width: 30px; height: 44px; background: url(https://glmedia.doublespeakgames.com/img/icons.png) transparent no-repeat;}.statusContainer {position: absolute; z-index: 10; top: 0px; left: -35px; width: 35px; height: 100%;}.heart.empty,.bigheart.empty {opacity: 0.5;}.heart,.bigheart {position: relative; width: 30px; height: 28px; opacity: 1; transition: opacity 500ms linear; -webkit-transition: opacity 500ms linear; -moz-transition: opacity 500ms linear; -ms-transition: opacity 500ms linear; -o-transition: opacity 500ms linear;}.heart .mask,.bigheart .mask {position: absolute; width: 100%; height: 100%; background: url(https://glmedia.doublespeakgames.com/img/icons.png) 0 -279px no-repeat; z-index: 1;}.bigheart .mask {background-position: -30px -279px;}.heart .mask.nightSprite {background-position: left -307px;}.bigheart .mask.nightSprite {background-position: -30px -307px;}.heart .bar,.bigheart .bar {position: absolute; height: 100%; background: url(https://glmedia.doublespeakgames.com/img/icons.png) -60px -279px; transition: width 300ms linear; -webkit-transition: width 300ms linear; -ms-transition: width 300ms linear; -moz-transition: width 300ms linear; -o-transition: width 300ms linear;}.heart.full,.bigheart.full {background: url(https://glmedia.doublespeakgames.com/img/icons.png) -60px -279px;}.shield {position: absolute; top: -35px; width: 30px; height: 30px; background: url(https://glmedia.doublespeakgames.com/img/icons.png) no-repeat 0px -30px; transition: opacity 300ms linear; -webkit-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -o-transition: opacity 300ms linear;}.shield > div {height: 100%; background: url(https://glmedia.doublespeakgames.com/img/icons.png) 0 0 no-repeat; transition: width 300ms linear; -webkit-transition: width 300ms linear; -ms-transition: width 300ms linear; -moz-transition: width 300ms linear; -o-transition: width 300ms linear;}.wood2 .shield {background-position: -30px -30px;}.wood2 .shield > div {background-position: -30px 0;}.wood3 .shield {background-position: -60px -30px;}.wood3 .shield > div {background-position: -60px 0;}.wood4 .shield {background-position: -90px -30px;}.wood4 .shield > div {background-position: -90px 0;}.wood5 .shield {background-position: -120px -30px;}.wood5 .shield > div {background-position: -120px 0;}.wood6 .shield {background-position: -150px -30px;}.wood6 .shield > div {background-position: -150px 0;}.wood7 .shield {background-position: -180px -30px;}.wood7 .shield > div {background-position: -180px 0;}.wood8 .shield {background-position: -210px -30px;}.wood8 .shield > div {background-position: -210px 0;}.wood9 .shield {background-position: -240px -30px;}.wood9 .shield > div {background-position: -240px 0;}.sword {width: 30px; height: 30px; background: url(https://glmedia.doublespeakgames.com/img/icons.png) no-repeat 0px -981px; transition: opacity 300ms linear; -webkit-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -o-transition: opacity 300ms linear;}.sword > div {height: 100%; background: url(https://glmedia.doublespeakgames.com/img/icons.png) no-repeat 0 -951px; transition: width 300ms linear; -webkit-transition: width 300ms linear; -ms-transition: width 300ms linear; -moz-transition: width 300ms linear; -o-transition: width 300ms linear;}.stone2 .sword {background-position: -30px -981px;}.stone2 .sword > div {background-position: -30px -951px;}.stone3 .sword {background-position: -60px -981px;}.stone3 .sword > div {background-position: -60px -951px;}.stone4 .sword {background-position: -90px -981px;}.stone4 .sword > div {background-position: -90px -951px;}.stone5 .sword {background-position: -120px -981px;}.stone5 .sword > div {background-position: -120px -951px;}.stone6 .sword {background-position: -150px -981px;}.stone6 .sword > div {background-position: -150px -951px;}.stone7 .sword {background-position: -180px -981px;}.stone7 .sword > div {background-position: -180px -951px;}.stone8 .sword {background-position: -210px -981px;}.stone8 .sword > div {background-position: -210px -951px;}.stone9 .sword {background-position: -240px -981px;}.stone9 .sword > div {background-position: -240px -951px;}.xpBar {height: 300px; width: 16px; position: absolute; top: -2px; right: 0px; border-top: 1px solid; border-bottom: 1px solid;}.night .xpBar {transform: translateX(16px); -webkit-transform: translateX(16px); -moz-transform: translateX(16px); -ms-transform: translateX(16px); -o-transform: translateX(16px);}.xpBar .fill {position: absolute; z-index: -1; width: 100%; height: 0%; background-color: #DBAA67; bottom: 0px; transition: all 300ms linear; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear;}.xpBar .nightSprite,.xpBar .mask {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: url(https://glmedia.doublespeakgames.com/img/expbar.png) repeat-y;}.xpBar .nightSprite {background-position: -16px 0;}.levelEffect {position: absolute; height: 0%; width: 2px; top: 0px; background-color: white; opacity: 1; transition: all 500ms ease-out, height 200ms ease-out; -webkit-transition: all 500ms ease-out, height 200ms ease-out; -moz-transition: all 500ms ease-out, height 200ms ease-out; -ms-transition: all 500ms ease-out, height 200ms ease-out; -o-transition: all 500ms ease-out, height 200ms ease-out;}.inventory {background-color: #FFFFFF; border-style: solid; border-width: 0 2px 2px; bottom: -2px; height: 50px; position: absolute; right: -2px; z-index: 0; padding-right: 2px;}.night .inventory {background-color: #000; bottom: -52px;}.inventory.hidden {opacity: 1 !important; bottom: -2px;}.treasureChest {position: absolute; bottom: 0px; width: 26px; height: 26px; background-image: url(https://glmedia.doublespeakgames.com/img/icons.png);}.button {position: relative; width: 40px; height: 40px; cursor: pointer; border-width: 2px; border-style: solid; border-radius: 22px; float: right; margin: 0 8px; transition: opacity 200ms linear, border-color 1400ms linear, background-color 1400ms linear; -webkit-transition: opacity 200ms linear, border-color 1400ms linear, background-color 1400ms linear; -moz-transition: opacity 200ms linear, border-color 1400ms linear, background-color 1400ms linear; -ms-transition: opacity 200ms linear, border-color 1400ms linear, background-color 1400ms linear; -o-transition: opacity 200ms linear, border-color 1400ms linear, background-color 1400ms linear;}.inventory .button {opacity: 0;}.night .inventory .button {opacity: 1;}.inventory .button > div {position: absolute; width: 8px; height: 8px; border: 2px solid white; border-radius: 6px; background-color: black; transition: background-color 200ms linear; -webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; -o-transition: background-color 200ms linear;}.inventory .button div:nth-child(2) {bottom: 0px; left: 0px;}.inventory .button.charge_1 div:nth-child(2),.inventory .button.charge_2 div:nth-child(2),.inventory .button.charge_3 div:nth-child(2) {background-color: white;}.inventory .button div:nth-child(3),.inventory .button.large div:nth-child(2) {bottom: -5px; left: 14px;}.inventory .button.charge_2 div:nth-child(3),.inventory .button.charge_3 div:nth-child(3) {background-color: white;}.inventory .button div:nth-child(4) {bottom: 0px; right: 0px;}.inventory .button.charge_3 div:nth-child(4) {background-color: white;}.inventory .button div:nth-child(1),.loot {position: absolute; width: 28px; height: 28px; background-image: url(https://glmedia.doublespeakgames.com/img/icons.png);}.inventory .button div:nth-child(1) {border: none; bottom: 7px; left: 6px;}.loot {bottom: 35px;}.loot.healthPotion,.button.healthPotion div:nth-child(1) {background-position: 0 -335px;}.loot.manaPotion,.button.manaPotion div:nth-child(1) {background-position: -28px -335px;}.loot.bomb,.button.bomb div:nth-child(1) {background-position: -56px -335px;}.loot.equipment,.button.equipment div:nth-child(1) {background-position: -84px -335px;}.loot.shard {background-position: -112px -335px;}.loot.callDragon,.button.callDragon div:nth-child(1) {background-position: -140px -335px;}.gem {position: absolute; background: url(https://glmedia.doublespeakgames.com/img/icons.png) no-repeat; width: 12px; height: 24px; top: 35px;}.magic {position: absolute; z-index: 1; left: 0px; top: 100%; width: 242px; height: 44px; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; -o-transition: opacity 200ms linear;}.magic .button {position: absolute; bottom: 0px; transition: all 200ms linear, border-color 1400ms linear, background-color 1400ms linear; -webkit-transition: all 200ms linear, border-color 1400ms linear, background-color 1400ms linear; -moz-transition: all 200ms linear, border-color 1400ms linear, background-color 1400ms linear; -ms-transition: all 200ms linear, border-color 1400ms linear, background-color 1400ms linear; -o-transition: all 200ms linear, border-color 1400ms linear, background-color 1400ms linear;}.magic .button:after {width: 100%; height: 100%; content: ''; display: block; position: absolute; background-image: url(https://glmedia.doublespeakgames.com/img/magic.png); background-position: 20% 20%; background-repeat: no-repeat; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; -o-transition: opacity 200ms linear;}.magic .button.open:after {opacity: 0;}@keyframes popicon {0% {transform: scale(0);} 50% {transform: scale(2);} 100% {transform: scale(1);}}@-webkit-keyframes popicon {0% {-webkit-transform: scale(0);} 50% {-webkit-transform: scale(2);} 100% {-webkit-transform: scale(1);}}@-moz-keyframes popicon {0% {-moz-transform: scale(0);} 50% {-moz-transform: scale(2);} 100% {-moz-transform: scale(1);}}@-ms-keyframes popicon {0% {-ms-transform: scale(0);} 50% {-ms-transform: scale(2);} 100% {-ms-transform: scale(1);}}@-o-keyframes popicon {0% {-o-transform: scale(0);} 50% {-o-transform: scale(2);} 100% {-o-transform: scale(1);}}.hearts .heart,.statusContainer .sword,.statusContainer .shield {animation: popicon 500ms 1; -webkit-animation: popicon 500ms 1; -moz-animation: popicon 500ms 1; -ms-animation: popicon 500ms 1; -o-animation: popicon 500ms 1;}.prepop {display: none; animation: none; -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none;}@keyframes glow {0% {box-shadow: 0 0 10px 0px #4D4DBC;} 50% {box-shadow: 0 0 15px 2px #4D4DBC;} 100% {box-shadow: 0 0 10px 0px #4D4DBC;}}@-webkit-keyframes glow {0% {box-shadow: 0 0 10px 0px #4D4DBC;} 50% {box-shadow: 0 0 15px 2px #4D4DBC;} 100% {box-shadow: 0 0 10px 0px #4D4DBC;}}@-moz-keyframes glow {0% {box-shadow: 0 0 10px 0px #4D4DBC;} 50% {box-shadow: 0 0 15px 2px #4D4DBC;} 100% {box-shadow: 0 0 10px 0px #4D4DBC;}}@-ms-keyframes glow {0% {box-shadow: 0 0 10px 0px #4D4DBC;} 50% {box-shadow: 0 0 15px 2px #4D4DBC;} 100% {box-shadow: 0 0 10px 0px #4D4DBC;}}@-o-keyframes glow {0% {box-shadow: 0 0 10px 0px #4D4DBC;} 50% {box-shadow: 0 0 15px 2px #4D4DBC;} 100% {box-shadow: 0 0 10px 0px #4D4DBC;}}.magic .button.full {animation: glow 500ms infinite; -webkit-animation: glow 500ms infinite; -moz-animation: glow 500ms infinite; -ms-animation: glow 500ms infinite; -o-animation: glow 500ms infinite;}.magic .button > .inner {position: absolute; left: 0px; bottom: 0px; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -ms-transition: all 200ms linear; -o-transition: all 200ms linear;}.magic .button.open > .inner {border-radius: 62px;}.magic .button > .inner > div {width: 100%; height: 0px; background-color: #4D4DBC; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -ms-transition: all 200ms linear; -o-transition: all 200ms linear;}.magic .button.open {height: 120px; width: 120px; border-radius: 62px;}.spells {position: absolute; height: 100%; width: 100%; opacity: 0; transition: opacity 200ms linear; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; -o-transition: opacity 200ms linear;}.open .spells {opacity: 1;}.spells > div {z-index: 100; position: absolute; border-width: 2px; border-style: solid; border-radius: 22px; width: 40px; height: 40px; margin-top: -22px; margin-left: -22px; background-color: white;}.night .spells > div {background-color: black;}.spells > div:nth-child(1) {left: 15%; top: 15%;}.spells > div:nth-child(2) {left: 50%; top: 0px;}.spells > div:nth-child(3) {left: 85%; top: 15%;}.spells > div:nth-child(4) {left: 100%; top: 50%;}.spell,.states > div {background-image: url(https://glmedia.doublespeakgames.com/img/icons.png); background-repeat: no-repeat;}.resetBoard {background-position: 0 -794px;}.night .resetBoard {background-position: 0 -834px;}.haste {background-position: -40px -794px;}.night .haste {background-position: -40px -834px;}.freezeTime {background-position: -80px -794px;}.night .freezeTime {background-position: -80px -834px;}.phaseChange {background-position: -120px -794px;}.night .phaseChange {background-position: -120px -834px;}.frozen {background-position: -160px -794px;}.night .frozen {background-position: -160px -834px;}.states {position: absolute; right: -32px; bottom: 0px; width: 30px; height: 180px;}.states > div {width: 40px; height: 40px;}.states > div.expiring {animation: pulse 500ms infinite; -webkit-animation: pulse 500ms infinite; -moz-animation: pulse 500ms infinite; -ms-animation: pulse 500ms infinite; -o-animation: pulse 500ms infinite;}@keyframes volatile {0% {box-shadow: inset 0 0 10px 0px #FF0000;} 50% {box-shadow: inset 0 0 15px 10px #FF0000;} 100% {box-shadow: inset 0 0 10px 0px #FF0000;}}@-webkit-keyframes volatile {0% {box-shadow: inset 0 0 10px 0px #FF0000;} 50% {box-shadow: inset 0 0 15px 10px #FF0000;} 100% {box-shadow: inset 0 0 10px 0px #FF0000;}}@-moz-keyframes volatile {0% {box-shadow: inset 0 0 10px 0px #FF0000;} 50% {box-shadow: inset 0 0 15px 10px #FF0000;} 100% {box-shadow: inset 0 0 10px 0px #FF0000;}}@-ms-keyframes volatile {0% {box-shadow: inset 0 0 10px 0px #FF0000;} 50% {box-shadow: inset 0 0 15px 10px #FF0000;} 100% {box-shadow: inset 0 0 10px 0px #FF0000;}}@-o-keyframes volatile {0% {box-shadow: inset 0 0 10px 0px #FF0000;} 50% {box-shadow: inset 0 0 15px 10px #FF0000;} 100% {box-shadow: inset 0 0 10px 0px #FF0000;}}.tile.effect_explosive > div {animation: volatile 500ms infinite; -webkit-animation: volatile 500ms infinite; -moz-animation: volatile 500ms infinite; -ms-animation: volatile 500ms infinite; -o-animation: volatile 500ms infinite;}.ios .tile.effect_explosive > div {animation: none; -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; box-shadow: inset 0 0 15px 10px #FF0000;}.explosion {position: absolute; top: 25px; left: 25px; height: 10px; width: 10px; border-radius: 5px; background-color: red; transition: all 400ms ease-out; -webkit-transition: all 400ms ease-out; -moz-transition: all 400ms ease-out; -ms-transition: all 400ms ease-out; -o-transition: all 400ms ease-out;}.explosion.exploded {top: -60px; left: -60px; width: 180px; height: 180px; border-radius: 90px; opacity: 0;}.volumeControls {position: relative; width: 80%; top: 10px; left: 10%; margin-left: -7px;}.volumeSlider {position: relative; left: 0px; right: 0px; height: 64px; padding-left: 42px; background: url(https://glmedia.doublespeakgames.com/img/icons.png) 0 -442px no-repeat; margin-bottom: 20px;}.volumeSlider .nightSprite {width: 35px; height: 100%; position: absolute; top: 0px; left: 0px; background: url(https://glmedia.doublespeakgames.com/img/icons.png) 0 -506px no-repeat;}.effectsVolume.volumeSlider {background-position: 0 -570px;}.effectsVolume.volumeSlider .nightSprite {background-position: 0 -634px;}.sliderTrack {position: relative; float: left; top: 50%; width: 100%; margin-top: -1px; border-top: 1px solid; border-bottom: 1px solid;}.sliderHandle {position: absolute; top: 0px; height: 60px; width: 40px; border: 2px solid; border-color: black; border-radius: 4px; background-color: white; cursor: pointer; margin-left: -30px; transition: border-color 1400ms linear, background-color 1400ms linear; -webkit-transition: border-color 1400ms linear, background-color 1400ms linear; -moz-transition: border-color 1400ms linear, background-color 1400ms linear; -ms-transition: border-color 1400ms linear, background-color 1400ms linear; -o-transition: border-color 1400ms linear, background-color 1400ms linear;}.night .sliderHandle {background-color: #000; border-color: white;}.submenu {padding: 0; margin: 0; list-style: none; text-align: center; position: relative;}.submenu:before {color: #000; display: block; font-size: 1.5em; margin: 10px 0; transition: color 1400ms linear; -webkit-transition: color 1400ms linear; -moz-transition: color 1400ms linear; -ms-transition: color 1400ms linear; -o-transition: color 1400ms linear;}.night .submenu:before {color: #FFF;}.submenu li {display: inline-block; margin: 0 2px; border-width: 2px; border-style: solid; border-radius: 4px; position: relative;}.social a, .social div {display: block; width: 48px; height: 48px; background-image: url(https://glmedia.doublespeakgames.com/img/icons.png);}.social .nightSprite {position:absolute; top: 0; left: 0;}.twitter {background-position: 0 -699px;}.twitter.nightSprite {background-position: 0 -747px;}.reddit {background-position: -48px -699px;}.reddit.nightSprite {background-position: -48px -747px;}.gplus {background-position: -96px -699px;}.gplus.nightSprite {background-position: -96px -747px;}.tumblr {background-position: -144px -699px;}.tumblr.nightSprite {background-position: -144px -747px;}.stumbleupon {background-position: -192px -699px;}.stumbleupon.nightSprite {background-position: -192px -747px;}.facebook {background-position: -240px -699px;}.facebook.nightSprite {background-position: -240px -747px;}.donate a, .donate input[type="image"] {display: block; width: 48px; height: 48px; background-image: url(https://glmedia.doublespeakgames.com/img/icons.png);}.donate .nightSprite {position: absolute; top: 0px; left: 0px;}.paypal {background-position: -288px -699px;}.paypal.nightSprite {background-position: -288px -747px;}.bitcoin-button {background-position: -336px -699px;}.bitcoin-button.nightSprite {background-position: -336px -747px;}.flattr {background-position: -384px -699px;}.flattr.nightSprite {background-position: -384px -747px;}.gittip {background-position: -432px -699px;}.gittip.nightSprite {background-position: -432px -747px;}.bitcoin-bubble {background-color: #FFFFFF; border: 2px solid #000; border-radius: 4px; bottom: 52px; color: #000000; display: none; font-family: "Helvetica",sans-serif; font-size: 9pt; left: -2px; padding: 10px; position: absolute; text-align: center; z-index: 1000;}.bitcoin:hover .bitcoin-bubble {display: block;}.dragon {background-image: url(https://glmedia.doublespeakgames.com/img/dragonsprite.png); height: 164px; width: 204px; transition: margin-bottom 1000ms ease-out; -webkit-transition: margin-bottom 1000ms ease-out; -moz-transition: margin-bottom 1000ms ease-out; -ms-transition: margin-bottom 1000ms ease-out; -o-transition: margin-bottom 1000ms ease-out; margin-bottom: 0;}.dragon.flying {margin-bottom: 200px;}.dragon .healthBar {display: none;}.dragon .neck,.dragon .head {position: absolute; transition-property: transform; transition-timing-function: ease-out; transform-origin: 50% 50%; -webkit-transition-property: -webkit-transform; -webkit-transition-timing-function: ease-out; -webkit-transform-origin: 50% 50%; -moz-transition-property: -moz-transform; -moz-transition-timing-function: ease-out; -moz-transform-origin: 50% 50%; -ms-transition-property: -ms-transform; -ms-transition-timing-function: ease-out; -ms-transform-origin: 50% 50%; -o-transition-property: -o-transform; -o-transition-timing-function: ease-out; -o-transform-origin: 50% 50%;}.dragon .neck {height: 24px; width: 24px; background: url(https://glmedia.doublespeakgames.com/img/dragonsprite.png) 0 -1700px no-repeat; transform: rotate(0deg) translateX(-10px); -webkit-transform: rotate(0deg) translateX(-10px); -moz-transform: rotate(0deg) translateX(-10px); -ms-transform: rotate(0deg) translateX(-10px); -o-transform: rotate(0deg) translateX(-10px);}.dragon.flip .neck {background-position: 0 -1724px;}.dragon .head {height: 30px; width: 81px; background: url(https://glmedia.doublespeakgames.com/img/dragonsprite.png) 0 -1640px no-repeat; transform: rotate(0deg) translateX(-40px); -webkit-transform: rotate(0deg) translateX(-40px); -moz-transform: rotate(0deg) translateX(-40px); -ms-transform: rotate(0deg) translateX(-40px); -o-transform: rotate(0deg) translateX(-40px); top: -6px; left: -30px;}.dragon.flip .head {left: -29px; background-position: 0 -1670px;}.dragon .neck .neck {transform: rotate(0deg) translateX(-10px); -webkit-transform: rotate(0deg) translateX(-10px); -moz-transform: rotate(0deg) translateX(-10px); -ms-transform: rotate(0deg) translateX(-10px); -o-transform: rotate(0deg) translateX(-10px);}.dragon .neck .neck .neck {transform: rotate(0deg) translateX(-10px); -webkit-transform: rotate(0deg) translateX(-10px); -moz-transform: rotate(0deg) translateX(-10px); -ms-transform: rotate(0deg) translateX(-10px); -o-transform: rotate(0deg) translateX(-10px);}.dragon.gone,.dragon .head.gone,.dragon .neck.gone {background: none;}.dragonFireball {position: absolute; width: 16px; height: 7px; background: url(https://glmedia.doublespeakgames.com/img/icons.png) 0 -175px transparent; transition: transform 300ms linear; -webkit-transition: -webkit-transform 300ms linear; -moz-transition: -moz-transform 300ms linear; -ms-transition: -ms-transform 300ms linear; -o-transition: -o-transform 300ms linear;}.fireBoom {position: absolute; bottom: 20px; left: -5px; height: 10px; width: 10px; border-radius: 5px; background-color: white; transition: all 400ms ease-out; -webkit-transition: all 400ms ease-out; -moz-transition: all 400ms ease-out; -ms-transition: all 400ms ease-out; -o-transition: all 400ms ease-out;}.fireBoom.exploded {bottom: -5px; left: -30px; width: 60px; height: 60px; border-radius: 30px; opacity: 0;}@keyframes beam {0% {width: 0px; height: 0px; margin-right: 0px; margin-top: 0px;} 75% {width: 30px; height: 30px; margin-right: -15px; margin-top: -15px;} 100% {width: 400px; height: 0px; margin-right: -15px; margin-top: 0px;}}@keyframes beam-flip {0% {width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;} 75% {width: 30px; height: 30px; margin-left: -15px; margin-top: -15px;} 100% {width: 400px; height: 0px; margin-left: -15px; margin-top: 0px;}}@keyframes blast {0% {width: 0px; height: 0px; top: 0px; right: 0px;} 75% {width: 30px; height: 30px; top: -15px; right: -15px;} 100% {width: 30px; height: 10px; top: -5px; right: 100%;}}@keyframes blast-flip {0% {width: 0px; height: 0px; left: 0px; top: 0px;} 75% {width: 30px; height: 30px; left: -15px; top: -15px;} 100% {width: 30px; height: 10px; left: 100%; top: -5px;}}@-webkit-keyframes beam {0% {width: 0px; height: 0px; margin-right: 0px; margin-top: 0px;} 75% {width: 30px; height: 30px; margin-right: -15px; margin-top: -15px;} 100% {width: 400px; height: 0px; margin-right: -15px; margin-top: 0px;}}@-webkit-keyframes beam-flip {0% {width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;} 75% {width: 30px; height: 30px; margin-left: -15px; margin-top: -15px;} 100% {width: 400px; height: 0px; margin-left: -15px; margin-top: 0px;}}@-webkit-keyframes blast {0% {width: 0px; height: 0px; top: 0px; right: 0px;} 75% {width: 30px; height: 30px; top: -15px; right: -15px;} 100% {width: 30px; height: 10px; top: -5px; right: 100%;}}@-webkit-keyframes blast-flip {0% {width: 0px; height: 0px; left: 0px; top: 0px;} 75% {width: 30px; height: 30px; left: -15px; top: -15px;} 100% {width: 30px; height: 10px; left: 100%; top: -5px;}}@-moz-keyframes beam {0% {width: 0px; height: 0px; margin-right: 0px; margin-top: 0px;} 75% {width: 30px; height: 30px; margin-right: -15px; margin-top: -15px;} 100% {width: 400px; height: 0px; margin-right: -15px; margin-top: 0px;}}@-moz-keyframes beam-flip {0% {width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;} 75% {width: 30px; height: 30px; margin-left: -15px; margin-top: -15px;} 100% {width: 400px; height: 0px; margin-left: -15px; margin-top: 0px;}}@-moz-keyframes blast {0% {width: 0px; height: 0px; top: 0px; right: 0px;} 75% {width: 30px; height: 30px; top: -15px; right: -15px;} 100% {width: 30px; height: 10px; top: -5px; right: 100%;}}@-moz-keyframes blast-flip {0% {width: 0px; height: 0px; left: 0px; top: 0px;} 75% {width: 30px; height: 30px; left: -15px; top: -15px;} 100% {width: 30px; height: 10px; left: 100%; top: -5px;}}@-ms-keyframes beam {0% {width: 0px; height: 0px; margin-right: 0px; margin-top: 0px;} 75% {width: 30px; height: 30px; margin-right: -15px; margin-top: -15px;} 100% {width: 400px; height: 0px; margin-right: -15px; margin-top: 0px;}}@-ms-keyframes beam-flip {0% {width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;} 75% {width: 30px; height: 30px; margin-left: -15px; margin-top: -15px;} 100% {width: 400px; height: 0px; margin-left: -15px; margin-top: 0px;}}@-ms-keyframes blast {0% {width: 0px; height: 0px; top: 0px; right: 0px;} 75% {width: 30px; height: 30px; top: -15px; right: -15px;} 100% {width: 30px; height: 10px; top: -5px; right: 100%;}}@-ms-keyframes blast-flip {0% {width: 0px; height: 0px; left: 0px; top: 0px;} 75% {width: 30px; height: 30px; left: -15px; top: -15px;} 100% {width: 30px; height: 10px; left: 100%; top: -5px;}}@-o-keyframes beam {0% {width: 0px; height: 0px; margin-right: 0px; margin-top: 0px;} 75% {width: 30px; height: 30px; margin-right: -15px; margin-top: -15px;} 100% {width: 400px; height: 0px; margin-right: -15px; margin-top: 0px;}}@-o-keyframes beam-flip {0% {width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;} 75% {width: 30px; height: 30px; margin-left: -15px; margin-top: -15px;} 100% {width: 400px; height: 0px; margin-left: -15px; margin-top: 0px;}}@-o-keyframes blast {0% {width: 0px; height: 0px; top: 0px; right: 0px;} 75% {width: 30px; height: 30px; top: -15px; right: -15px;} 100% {width: 30px; height: 10px; top: -5px; right: 100%;}}@-o-keyframes blast-flip {0% {width: 0px; height: 0px; left: 0px; top: 0px;} 75% {width: 30px; height: 30px; left: -15px; top: -15px;} 100% {width: 30px; height: 10px; left: 100%; top: -5px;}}.dragon .head .iceBeam,.dragon .head .fireBlast {position: absolute; right: 94px; top: 19px;}.dragon.flip .head .iceBeam,.dragon.flip .head .fireBlast {left: 84px; top: 19px;}.iceBeam:before {content: ' '; display: block; border-radius: 50%; background-color: white; animation: beam 1000ms 1; -webkit-animation: beam 1000ms 1; -moz-animation: beam 1000ms 1; -ms-animation: beam 1000ms 1; -o-animation: beam 1000ms 1;}.fireBlast:before {content: ' '; display: block; position: absolute; top: 0px; right: 0px; border-radius: 50%; background-color: white; animation: blast 1000ms 1; -webkit-animation: blast 1000ms 1; -moz-animation: blast 1000ms 1; -ms-animation: blast 1000ms 1; -o-animation: blast 1000ms 1;}.flip .fireBlast:before {animation: blast-flip 1000ms 1; -webkit-animation: blast-flip 1000ms 1; -moz-animation: blast-flip 1000ms 1; -ms-animation: blast-flip 1000ms 1; -o-animation: blast-flip 1000ms 1;}.bossHealth {position: absolute; border: 2px solid white; background-color: black; box-shadow: 0 0 10px 1px black; margin-left: -202px; top: 5px; left: 50%; z-index: 10; opacity: 0.8; height: 6px; width: 400px; transition: width 1s, opacity 200ms, margin-left 1s; -webkit-transition: width 1s, opacity 200ms, margin-left 1s; -moz-transition: width 1s, opacity 200ms, margin-left 1s; -ms-transition: width 1s, opacity 200ms, margin-left 1s; -o-transition: width 1s, opacity 200ms, margin-left 1s;}.bossHealth.noshow {width: 0px; margin-left: 0px; opacity: 0;}.bossHealth div {height: 100%; width: 100%; background-color: #BC4D4D; transition: width 200ms linear; -webkit-transition: width 200ms linear; -moz-transition: width 200ms linear; -ms-transition: width 200ms linear; -o-transition: width 200ms linear;}.segmentExplosion {position: absolute; bottom: 20px; left: 50%; top: 50%; transform: translate(-5px, -5px); -webkit-transform: translate(-5px, -5px); -moz-transform: translate(-5px, -5px); -ms-transform: translate(-5px, -5px); -o-transform: translate(-5px, -5px); height: 10px; width: 10px; border-radius: 5px; background-color: white; transition: all 400ms ease-out; -webkit-transition: all 400ms ease-out; -moz-transition: all 400ms ease-out; -ms-transition: all 400ms ease-out; -o-transition: all 400ms ease-out;}.segmentExplosion.exploded {width: 80px; height: 80px; border-radius: 40px; opacity: 0; transform: translate(-40px, -40px); -webkit-transform: translate(-40px, -40px); -moz-transform: translate(-40px, -40px); -ms-transform: translate(-40px, -40px); -o-transform: translate(-40px, -40px);}.dragonExplosion {position: absolute; top: 110px; left: 70px; transform: translate(-5px, -5px); -webkit-transform: translate(-5px, -5px); -moz-transform: translate(-5px, -5px); -ms-transform: translate(-5px, -5px); -o-transform: translate(-5px, -5px); height: 10px; width: 10px; border-radius: 5px; background-color: white; transition: all 2000ms ease-out; -webkit-transition: all 2000ms ease-out; -moz-transition: all 2000ms ease-out; -ms-transition: all 2000ms ease-out; -o-transition: all 2000ms ease-out;}.flip .dragonExplosion {left: 130px;}.dragonExplosion.exploded {width: 400px; height: 400px; border-radius: 200px; opacity: 0; transform: translate(-200px, -200px); -webkit-transform: translate(-200px, -200px); -moz-transform: translate(-200px, -200px); -ms-transform: translate(-200px, -200px); -o-transform: translate(-200px, -200px);}body:after {transition: opacity 1400ms linear; -webkit-transition: opacity 1400ms linear; -moz-transition: opacity 1400ms linear; -ms-transition: opacity 1400ms linear; -o-transition: opacity 1400ms linear; opacity: 0; display: block; background: white; content: ' '; width: 100%; height: 100%; position: absolute; top: 0; z-index: -1;}body.bigExplosion:after {z-index: 100; opacity: 1;}body.bigExplosion.fadeOut:after {z-index: 100; opacity: 0;}#endGame {width: 350px; height: 550px; border: 2px solid black; transition: transform 300ms ease-in; -webkit-transition: -webkit-transform 300ms ease-in; -moz-transition: -moz-transform 300ms ease-in; -ms-transition: -ms-transform 300ms ease-in; -o-transition: -o-transform 300ms ease-in; transform: translate(-175px, 0px); -webkit-transform: translate(-175px, 0px); -moz-transform: translate(-175px, 0px); -ms-transform: translate(-175px, 0px); -o-transform: translate(-175px, 0px); position: absolute; top: -554px; left: 50%; z-index: 101; padding: 10px 0; font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif; box-shadow: 0 0 5px 2px #CCC; box-sizing: border-box; background: white;}#endGame.down {transform: translate(-175px, 677px); -webkit-transform: translate(-175px, 677px); -moz-transform: translate(-175px, 677px); -ms-transform: translate(-175px, 677px); -o-transform: translate(-175px, 677px);}@media screen and (max-height: 730px) {#endGame.down {transform: translate(-175px, 560px); -webkit-transform: translate(-175px, 560px); -moz-transform: translate(-175px, 560px); -ms-transform: translate(-175px, 560px); -o-transform: translate(-175px, 560px);}}#endGame h2 {text-align: center; font-size: 2em; font-weight: bold; margin: 10px 0;}#endGame ul.menu {position: absolute; width: 100%; bottom: 0px; padding: 0; margin: 0;}#endGame ul.menu li {list-style: none; font-size: 1.5em; text-align: center; border-top: 2px solid black; cursor: pointer; line-height: 60px;}#endGame ul.menu li:hover {box-shadow: inset 0 0 5px 2px #CCC;}#endGame ul.counts {list-style: none; margin: 0 20px; padding: 0;}#endGame ul.counts li {line-height: 25px;}#endGame ul.counts li:after {clear: both; content: ''; display: block;}#endGame ul.counts li span {float: right;}#endGame ul.counts li span:first-child {float: left;}.resourceEffect {position: absolute; top: 0px; left: 0px; height: 14px; width: 14px; margin: -8px 0 0 -8px; z-index: 10; transition: transform 700ms ease-in; -webkit-transition: -webkit-transform 700ms ease-in; -moz-transition: -moz-transform 700ms ease-in; -ms-transition: -ms-transform 700ms ease-in; -o-transition: -o-transform 700ms ease-in; transition-timing-function: cubic-bezier(.61,-0.22,.71,.67); -webkit-transition-timing-function: cubic-bezier(.610,.71,.67); -moz-transition-timing-function: cubic-bezier(.61,-0.22,.71,.67); -ms-transition-timing-function: cubic-bezier(.61,-0.22,.71,.67); -o-transition-timing-function: cubic-bezier(.61,-0.22,.71,.67); border-width: 2px; border-style: solid; border-color: black; transform: translate3d(0px, 0px, 0px) scale(1);}.resourceEffect.grain {background-color: rgba(233, 221, 175, 0.8);}.grain3 .resourceEffect.grain {background-color: rgba(197, 105, 40, 0.8);}.grain4 .resourceEffect.grain {background-color: rgba(230, 178, 230, 0.8);}.resourceEffect.wood {background-color: rgba(124, 88, 64, 0.8);}.wood4 .resourceEffect.wood,.wood5 .resourceEffect.wood,.wood6 .resourceEffect.wood {background-color: rgba(135, 108, 91, 0.8);}.wood7 .resourceEffect.wood,.wood8 .resourceEffect.wood,.wood9 .resourceEffect.wood {background-color: rgba(255, 216, 0, 0.8);}.resourceEffect.stone {background-color: rgba(153, 153, 153, 0.8);}.stone4 .resourceEffect.stone,.stone5 .resourceEffect.stone,.stone6 .resourceEffect.stone {background-color: rgba(19, 84, 104, 0.8);}.stone7 .resourceEffect.stone,.stone8 .resourceEffect.stone,.stone9 .resourceEffect.stone {background-color: rgba(0, 151, 254, 0.8);}.resourceEffect.clay {background-color: rgba(198, 86, 69, 0.8);}.resourceEffect.cloth {background-color: rgba(238, 223, 166, 0.8);}.cloth3 .resourceEffect.cloth,.cloth4 .resourceEffect.cloth {background-color: rgba(133, 58, 255, 0.8);}.resourceEffect.mana {background-color: rgba(252, 92, 221, 0.8);}.night .resourceEffect {background-color: rgba(0, 0, 0, 0.8) !important; border-color: white;}.night .resourceEffect.stone,.night .resourceEffect.wood {background-color: rgba(255, 255, 255, 0.8) !important;}.resourceEffect.pooled {display: none;}@keyframes hyperspaceTile {0% {-webkit-filter: invert(0%);} 50% {-webkit-filter: invert(100%);} 100% {-webkit-filter: invert(0%);}}@-webkit-keyframes hyperspaceTile {0% {-webkit-filter: invert(0%);} 50% {-webkit-filter: invert(100%);} 100% {-webkit-filter: invert(0%);}}.hyperspace .tile,.hyperspace .statusContainer,.hyperspace #loadingScreen {animation: hyperspaceTile 800ms linear infinite; -webkit-animation: hyperspaceTile 800ms linear infinite;}@keyframes hyperspace {0% {background-color: #4e892c;} 10% {background-color: #dd33fb;} 20% {background-color: #e7d921;} 30% {background-color: #1380c2;} 40% {background-color: #c6a4de;} 50% {background-color: #c5d66e;} 60% {background-color: #02b1f3;} 70% {background-color: #d1f49c;} 80% {background-color: #1c386a;} 90% {background-color: #21c419;} 100% {background-color: #915689;}}@-webkit-keyframes hyperspace {0% {background-color: #4e892c;} 10% {background-color: #dd33fb;} 20% {background-color: #e7d921;} 30% {background-color: #1380c2;} 40% {background-color: #c6a4de;} 50% {background-color: #c5d66e;} 60% {background-color: #02b1f3;} 70% {background-color: #d1f49c;} 80% {background-color: #1c386a;} 90% {background-color: #21c419;} 100% {background-color: #915689;}}@-moz-keyframes hyperspace {0% {background-color: #4e892c;} 10% {background-color: #dd33fb;} 20% {background-color: #e7d921;} 30% {background-color: #1380c2;} 40% {background-color: #c6a4de;} 50% {background-color: #c5d66e;} 60% {background-color: #02b1f3;} 70% {background-color: #d1f49c;} 80% {background-color: #1c386a;} 90% {background-color: #21c419;} 100% {background-color: #915689;}}@-ms-keyframes hyperspace {0% {background-color: #4e892c;} 10% {background-color: #dd33fb;} 20% {background-color: #e7d921;} 30% {background-color: #1380c2;} 40% {background-color: #c6a4de;} 50% {background-color: #c5d66e;} 60% {background-color: #02b1f3;} 70% {background-color: #d1f49c;} 80% {background-color: #1c386a;} 90% {background-color: #21c419;} 100% {background-color: #915689;}}@-o-keyframes hyperspace {0% {background-color: #4e892c;} 10% {background-color: #dd33fb;} 20% {background-color: #e7d921;} 30% {background-color: #1380c2;} 40% {background-color: #c6a4de;} 50% {background-color: #c5d66e;} 60% {background-color: #02b1f3;} 70% {background-color: #d1f49c;} 80% {background-color: #1c386a;} 90% {background-color: #21c419;} 100% {background-color: #915689;}}body.hyperspace,.hyperspace .world,.hyperspace .tileContainer,.hyperspace .menuBar {transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; animation: hyperspace 600ms linear infinite; -webkit-animation: hyperspace 600ms linear infinite; -moz-animation: hyperspace 600ms linear infinite; -ms-animation: hyperspace 600ms linear infinite; -o-animation: hyperspace 600ms linear infinite;}@keyframes bombsplosion {0% {transform: scale(0); opacity: 1;} 100% {transform: scale(1); opacity: 0;}}@-webkit-keyframes bombsplosion {0% {-webkit-transform: scale(0); opacity: 1;} 100% {-webkit-transform: scale(1); opacity: 0;}}@-moz-keyframes bombsplosion {0% {-moz-transform: scale(0); opacity: 1;} 100% {-moz-transform: scale(1); opacity: 0;}}@-ms-keyframes bombsplosion {0% {-ms-transform: scale(0); opacity: 1;} 100% {-ms-transform: scale(1); opacity: 0;}}@-o-keyframes bombsplosion {0% {-o-transform: scale(0); opacity: 1;} 100% {-o-transform: scale(1); opacity: 0;}}.bombsplosion {position: absolute; animation: bombsplosion 800ms ease-out 1; -webkit-animation: bombsplosion 800ms ease-out 1; -moz-animation: bombsplosion 800ms ease-out 1; -ms-animation: bombsplosion 800ms ease-out 1; -o-animation: bombsplosion 800ms ease-out 1; width: 700px; height: 700px; border-radius: 50%; margin: 0 0 -350px -350px; background-color: white; bottom: 0px;}.portrait .tile {width: 70px; height: 70px;}.portrait .tile > div {transform: scale(1.15); -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15);}.portrait .tile .nightSide {transform: rotateY(180deg) scale(1.15); -webkit-transform: rotateY(180deg) scale(1.15); -moz-transform: rotateY(180deg) scale(1.15); -ms-transform: rotateY(180deg) scale(1.15); -o-transform: rotateY(180deg) scale(1.15);}.portrait.night .tile .daySide {transform: rotateY(180deg) scale(1.15); -webkit-transform: rotateY(180deg) scale(1.15); -moz-transform: rotateY(180deg) scale(1.15); -ms-transform: rotateY(180deg) scale(1.15); -o-transform: rotateY(180deg) scale(1.15);}.portrait.night .tile .nightSide {transform: rotateY(0deg) scale(1.15); -webkit-transform: rotateY(0deg) scale(1.15); -moz-transform: rotateY(0deg) scale(1.15); -ms-transform: rotateY(0deg) scale(1.15); -o-transform: rotateY(0deg) scale(1.15);}.difficultySwitch {display: inline-block; width: 80px; height: 40px; padding: 5px; border: 2px solid; position: relative; cursor: pointer;}.difficultySwitch:before {border: 2px solid; width: 36px; height: 36px; position: absolute; right: 5px; display: block; content: ''; border-radius: 4px; background-color: #BC4D4D; transition: transform 100ms linear, background-color 100ms linear, border-color 1400ms linear; -webkit-transition: -webkit-transform 100ms linear, background-color 100ms linear, border-color 1400ms linear; -moz-transition: -moz-transform 100ms linear, background-color 100ms linear, border-color 1400ms linear; -ms-transition: -ms-transform 100ms linear, background-color 100ms linear, border-color 1400ms linear; -o-transition: -o-transform 100ms linear, background-color 100ms linear, border-color 1400ms linear;}.night .difficultySwitch:before {border-color: white;}.casual .difficultySwitch:before {transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); background-color: #76A864;}