/* ============================= */
/* ========= reset css ========= */
/* ============================= */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent }

ol, ul {list-style:none;}

blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:''; content:none;}

:focus {outline:0;}

ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse; border-spacing:0;}

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width:0px; line-height:0px; font-size:0px;}

/* ============================= */
/* ========= container ========= */
/* ============================= */

body {background:#000;  overflow: hidden; height: calc(var(--vh) * 100); }
body, body * {-webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;}

.game-header {position: relative; width:100%; max-width: 778px; height: 80px; margin:0 auto; top:20px;}
/* Wrapper responsivo */
.game-wrapper {
  width: 100%;
  max-width: 100%;
  overflow: hidden; height: 640px;
}
.game{ width:778px; height: 640px; margin: 0px auto 0 auto; position:relative;}

.loader {width:100%; height:100svh; background:#000 url(loading.gif) no-repeat center center; margin: -40px auto 0 auto;
 position:fixed; top:0; overflow:hidden; z-index: 1000;}
 .loadContent {position:absolute; left:50%; top:50%; width:50px; height: 50px; overflow: hidden;}
.loadContent img {position:absolute; left:0px; top:0px; visibility:hidden; }
.loader .loaderCounter {position:absolute; left:50%; top:50%; margin:-10px 0 0 -50px; width:100px; height:50px; display:block; font-family: Arial, Sans-serif; color:#ddd; font-weight:700; font-size:16px; text-align:center; }
.loader .loaderLogo {width:64px; height:40px; background:#000 url(minilogo.png) no-repeat left top; position:absolute; left:50%; top:50%; margin:-90px 0 0 -34px;}

h1 {text-indent:-99999px; font-size:0px; width:64px; height:40px; background: url(minilogo.png) repeat left top;
 position:absolute; left:353px; top:10px; }
/*body.is-touch-device h1 {background: none;}*/
.levelLabel {font-family: Arial, Helvetica, sans-serif; font-size:10px;  color:#1a8; position:absolute; left:420px; 
width:70px; top:18px;}
.levelLabel cite {color:#6e7; font-style:normal; margin-right: 15px; }
.levelLabel cite.levelOne {margin-top:14px;}
.levelLabel em {color:#6e7; font-style:normal; font-size:11px;}
.score {font-family: Arial, Sans-serif; font-size:22px; line-height: 22px; color:#1a8; position:absolute; right:430px; top:22px;}


.ready span{position:absolute; left:289px; top:280px; width:200px; height: 60px; display:block;
 background:url(ready.gif) no-repeat center center; background-size: contain; }
.ready {width:770px; height:490px; display:block; background: url(readyBg.png) repeat left top; 
  position:absolute; left:0px; top:0px; border:4px solid #888;}


.resetPause {width:770px; height:490px; display:block; background: #000; position:absolute; left:0px; top:0px; border:4px solid #888;}

#main{ margin: 0px 0 0 0; height: 640px; }
.maze {width:770px; height:490px; display:block; margin:0px auto 0 auto;  position:absolute; left:0px; top:0px; border:4px solid #888; overflow:hidden; }

.level01 .maze {background: url(maze1.jpg) no-repeat left top;}
.level02 .maze {background: url(maze2.jpg) no-repeat left top;}
.level03 .maze {background: url(maze3.jpg) no-repeat left top;}
.level04 .maze {background: url(maze4.jpg) no-repeat left top;}
.level05 .maze {background: url(maze5.jpg) no-repeat left top;}
.level06 .maze {background: url(maze6.jpg) no-repeat left top;}
.level07 .maze {background: url(maze7.jpg) no-repeat left top;}
.level08 .maze {background: url(maze8.jpg) no-repeat left top;}
.level09 .maze {background: url(maze9.jpg) no-repeat left top;}
.level10 .maze {background: url(maze10.jpg) no-repeat left top;}
.level11 .maze {background: url(end.jpg) no-repeat left top;}

.intro {width:770px; height:490px; display:block; /*margin:0px auto 0 auto;*/ background: url(intro.jpg) no-repeat left top; position:absolute; left:0px; top:0px; border:4px solid #888; overflow:hidden; }
.btPlay, .intro-inputCode, .intro-arrowsInfo, .intro-joystickInfo{position: absolute;}
body.is-touch-device .intro-arrowsInfo {display: none;}
.btPlay{left:586px; top:308px; width:172px; height: 172px; background: url(btn-play.png) no-repeat left top; cursor: pointer;}
.btPlay:after{content:""; position: absolute; left:32px; top:67px; width:100%; height: 100%; 
background: url(play.gif) no-repeat left top; pointer-events: none;}
.btPlay:hover {filter: brightness(.9) contrast(1.2);}
.intro-inputCode{left:25px; top:348px; width: 231px; height: 89px; background: url(input-code.png) no-repeat left top;}
.intro-arrowsInfo{left:445px; top:45px; width: 295px; height: 88px; background: url(arrows-info.png) no-repeat left top;}
/*.intro-joystickInfo {left:525px; top:45px; width: 221px; height: 88px; background: url(joystick-info.png) no-repeat left top;
display:none;}*/
.intro-joystickInfo {left:600px; top:33px; width: 127px; height: 173px; background: url(joystick-info-vert.png) no-repeat left top;
display:none;}
body.is-touch-device .intro-joystickInfo {display: block;}
#codeInput {position:absolute; left:50px; top:384px; width:130px; height:25px; border:none; background:transparent;
 font-family: 'MunroRegular', Arial, Sans-serif; color:#333; font-weight:700; font-size:24px; letter-spacing: 1px; padding:0 5px; padding-top:3px\9;}
button {position:absolute; left:191px; top:376px; width:50px; height:40px; background:transparent; border:none; cursor:pointer; z-index: 1;}
.btCode {position:absolute; left:187px; top:372px; width:50px; height:40px; background: url(bt-code-hover.jpg) no-repeat left top; display:none; z-index: 1; }

.info {width:770px; /*height:490px;*/ height:0px; display:block; background: url(infoBoard.jpg) no-repeat left top; position:absolute; left:4px; top:4px;  overflow:hidden; z-index: 2; cursor: default; }
.info span { position:absolute; width:450px; height:430px; left:270px; top:60px; font-family: 'UASquaredRegular', Arial, Sans-serif; 
font-size:28px; color:#eee; display:none;}
.info span.keyInfo, .info span.tranqInfo {position:absolute;  height:70px; padding:0px 0 0 70px; left:-70px;
 line-height:70px; display:block;}
.info span.keyInfo {top:130px;}
.info span.tranqInfo {top:180px;}
.info span.keyInfo:before, .info span.tranqInfo:before {    content: "";
    position: absolute;
    left: 12px;
    top: 13px;
    width: 46px;
    height: 46px;
    background: #000;
    border-radius: 50%;
    opacity: .8; }

.info span.keyInfo:after, .info span.tranqInfo:after {content:""; position: absolute; left:0; top:0; width:70px; height: 70px; }
.info span.keyInfo:after {background: url(key.gif) no-repeat;}
.info span.tranqInfo:after {background: url(pill.gif) no-repeat;;}



.info span em {position:absolute; left:-220px; bottom:20px; font-style:normal; font-size:24px;
 width:670px; padding:10px 0 0 0; border-top:2px solid #ccc; color:#6b6;}

.info a {color:#6b6; text-decoration:underline; cursor: pointer;}
.info a:hover {color:#fff; }

.arrowInfo {position:absolute; left:0px; top:557px; width:750px; height:18px; 
  font-family: 'UASquaredRegular'; color:#eee; font-size:18px; display:none;}
.arrowInfo em { font-style:normal; line-height:16px;  position:absolute; left:40px; top:0px; height:16px;  background: url(infoArrow.gif) no-repeat; padding:0 0 0 30px; }
.arrowInfo cite { font-style:normal; line-height:16px;  position:absolute; left:610px; top:0px; height:16px;  background: url(infoArrow.gif) no-repeat; padding:0 0 0 30px; }

.arrowInfo span{position:absolute; left:0px; top:0px; width:720px; height:16px; background: url(pixelate.png) repeat left top;}

.btCloseInfo { position:absolute; width:40px; height:40px; right:5px; top:5px; background: url(close.png) no-repeat left top; cursor:pointer; display:none; text-indent:-99999px; font-size:0px; z-index: 2;}
.btCloseInfo::after {content:""; position:absolute; width:40px; height:40px; left:0; top:0; background: url(pixelate.png) repeat left top;}
.btCloseInfo:hover {background-position: -40px 0px;}
.pointer {background: url(pointer.png) repeat left top; position:absolute; left:250px; top:360px; width:120px; height:86px; display:none; z-index: 2;}

.level04 .extraDeco {position:absolute; width:256px; height:277px; left:116px; top:127px; background: url(trees_L4.png) no-repeat left top;}
.level06 .extraDeco {position:absolute; width:528px; height:174px; left:120px; top:228px; background: url(lamps_L6.png) no-repeat 0px 0px;}
.level06 .extraDeco.light {background-position: 0px -174px;}

.exitGap{position:absolute;background:#000;}
.level01 .exitGap{width:70px; height:4px; left:564px; top:494px;}
.level02 .exitGap{width:70px; height:4px; left:74px; top:0px;}
.level03 .exitGap{width:70px; height:4px; left:144px; top:494px;}
.level04 .exitGap{width:4px; height:70px; left:774px; top:354px;}
.level05 .exitGap{width:70px; height:4px; left:354px; top:0px;}
.level06 .exitGap{width:70px; height:4px; left:354px; top:0px;}
.level07 .exitGap{width:4px; height:70px; left:0px; top:354px;}
.level08 .exitGap{width:4px; height:70px; left:774px; top:354px;}
.level09 .exitGap{width:70px; height:4px; left:634px; top:494px;}
.level10 .exitGap{width:70px; height:4px; left:354px; top:494px;}

.pixelate {width:780px; height:590px; display:block;  background: url(pixelate.png) repeat left top; position:absolute; left:0px; top:0px; z-index: 5; pointer-events: none; }




#man {position:absolute; width:70px; height:70px; background: url(man.png) no-repeat;  }
#guyA {position:absolute; width:70px; height:70px; background: url(guyH.png) no-repeat;  }
#guyB {position:absolute; width:70px; height:70px; background: url(guyA.png) no-repeat;  }
#guyC {position:absolute; width:70px; height:70px; background: url(guyB.png) no-repeat;  }
#guyD {position:absolute; width:70px; height:70px; background: url(guyD.png) no-repeat;  }
#guyE {position:absolute; width:70px; height:70px; background: url(guyE.png) no-repeat;  }
#guyF {position:absolute; width:70px; height:70px; background: url(guyF.png) no-repeat;  }
#manRest {position:absolute; width:90px; height:100px; background: url(manRest.png) no-repeat; display:none;  }

.level01 #guyA {position:absolute; width:70px; height:70px; background: url(guyD.png) no-repeat;  }
.level01 #guyB {position:absolute; width:70px; height:70px; background: url(guyH.png) no-repeat;  }

.level02 #guyA {position:absolute; width:70px; height:70px; background: url(guyG.png) no-repeat;  }
.level02 #guyB {position:absolute; width:70px; height:70px; background: url(guyJ.png) no-repeat;  }
.level02 #guyC {position:absolute; width:70px; height:70px; background: url(guyK.png) no-repeat;  }

.level03 #guyA {position:absolute; width:70px; height:70px; background: url(guyE.png) no-repeat;  }
.level03 #guyB {position:absolute; width:70px; height:70px; background: url(guyB.png) no-repeat;  }
.level03 #guyC {position:absolute; width:70px; height:70px; background: url(guyI.png) no-repeat;  }
.level03 #guyD {position:absolute; width:70px; height:70px; background: url(guyH.png) no-repeat;  }

.level04 #guyA {position:absolute; width:70px; height:70px; background: url(guyH.png) no-repeat;  }
.level04 #guyB {position:absolute; width:70px; height:70px; background: url(guyF.png) no-repeat;  }
.level04 #guyC {position:absolute; width:70px; height:70px; background: url(guyA.png) no-repeat;  }

.level05 #guyA {position:absolute; width:70px; height:70px; background: url(guyG.png) no-repeat;  }
.level05 #guyB {position:absolute; width:70px; height:70px; background: url(guyD.png) no-repeat;  }
.level05 #guyC {position:absolute; width:70px; height:70px; background: url(guyA.png) no-repeat;  }

.level06 #guyA {position:absolute; width:70px; height:70px; background: url(guyC.png) no-repeat;  }
.level06 #guyB {position:absolute; width:70px; height:70px; background: url(guyE.png) no-repeat;  }
.level06 #guyC {position:absolute; width:70px; height:70px; background: url(guyB.png) no-repeat;  }

.level07 #guyA {position:absolute; width:70px; height:70px; background: url(guyF.png) no-repeat;  }
.level07 #guyB {position:absolute; width:70px; height:70px; background: url(guyI.png) no-repeat;  }
.level07 #guyC {position:absolute; width:70px; height:70px; background: url(guyK.png) no-repeat;  }

.level08 #guyA {position:absolute; width:70px; height:70px; background: url(guyH.png) no-repeat;  }
.level08 #guyB {position:absolute; width:70px; height:70px; background: url(guyJ.png) no-repeat;  }
.level08 #guyC {position:absolute; width:70px; height:70px; background: url(guyA.png) no-repeat;  }
.level08 #guyD {position:absolute; width:70px; height:70px; background: url(guyB.png) no-repeat;  }

.level09 #guyA {position:absolute; width:70px; height:70px; background: url(guyF.png) no-repeat;  }
.level09 #guyB {position:absolute; width:70px; height:70px; background: url(guyD.png) no-repeat;  }
.level09 #guyC {position:absolute; width:70px; height:70px; background: url(guyA.png) no-repeat;  }
.level09 #guyD {position:absolute; width:70px; height:70px; background: url(guyI.png) no-repeat;  }
.level09 #guyE {position:absolute; width:70px; height:70px; background: url(guyB.png) no-repeat;  }
.level09 #guyF {position:absolute; width:70px; height:70px; background: url(guyH.png) no-repeat;  }

.level10 #guyA {position:absolute; width:70px; height:70px; background: url(guyB.png) no-repeat;  }
.level10 #guyB {position:absolute; width:70px; height:70px; background: url(guyG.png) no-repeat;  }
.level10 #guyC {position:absolute; width:70px; height:70px; background: url(guyC.png) no-repeat;  }




#box, #box2 {position:absolute; width:70px; height:70px;  background: url(box.png) no-repeat left top; display:block;  }


#stars {position:absolute; width:70px; height:70px; background: url(stars.png) no-repeat; display:none; }
#stars.cycleZero {background-position: 0px -70px !important;}
#stars.cycleOne {background-position: 0px 0px !important;}
#stars.cycleTwo {background-position: 0px -140px !important;}

#dust {position:absolute; width:70px; height:70px; background: url(dust.png) no-repeat; display:none;  }
#dust.deadZero {background-position: 0px 0px !important;}
#dust.deadOne {background-position: 0px -70px !important;}
#dust.deadTwo {background-position: 0px -140px !important;}



#key1, #key2, #key3, #key4, #key5, #key6, #key7, #key8 {position:absolute; width:70px; height:70px; background: url(key.gif) no-repeat;  }

#door1, #door2, #door3, #door4, #door5, #door6, #door7, #door8 {width:70px; height:70px; position:absolute; background: url(doors.gif) no-repeat;}
#door1.n, #door2.n, #door3.n, #door4.n, #door5.n, #door6.n, #door7.n, #door8.n {background-position:0px 0px;}
#door1.s, #door2.s, #door3.s, #door4.s, #door5.s, #door6.s, #door7.s, #door8.s {background-position:-70px 0px;}
#door1.w, #door2.w, #door3.w, #door4.w, #door5.w, #door6.w, #door7.w, #door8.w {background-position:0px -70px;}
#door1.e, #door2.e, #door3.e, #door4.e, #door5.e, #door6.e, #door7.e, #door8.e {background-position:-70px -70px;}

#pill1, #pill2 {position:absolute; width:70px; height:70px; background: url(pill.gif) no-repeat;  }


.standUp {background-position: 0px 0px !important;}
.standLeft {background-position: -70px 0px !important;}
.standRight {background-position: -140px 0px !important;}
.standDown {background-position: -210px 0px !important;}


.walkUp.cycleZero {background-position:0px 0px !important;}
.walkUp.cycleOne {background-position:0px -70px !important;}
.walkUp.cycleTwo {background-position:0px -140px !important;}

.walkLeft.cycleZero {background-position:-70px 0px !important;}
.walkLeft.cycleOne {background-position:-70px -70px !important;}
.walkLeft.cycleTwo {background-position:-70px -140px !important;}

.walkRight.cycleZero {background-position:-140px 0px !important;}
.walkRight.cycleOne {background-position:-140px -70px !important;}
.walkRight.cycleTwo {background-position:-140px -140px !important;}

.walkDown.cycleZero {background-position:-210px 0px !important;}
.walkDown.cycleOne {background-position:-210px -70px !important;}
.walkDown.cycleTwo {background-position:-210px -140px !important;}

.manSit {background-position:0px 0px !important; left:343px; top:206px; }
.manLie {background-position:-95px 0px !important; width:130px !important;  left:325px; top:195px; }


.healthBack {position:absolute; left:570px; top:520px; background:#c00; height:20px; width:200px; display:block; border:4px solid #888;}
.healthBlink {position:absolute; left:570px; top:520px; background:transparent; height:20px; width:200px; display:none; border:4px solid #fff;}
.healthBlock {position:absolute; left:574px; top:524px; background:#0c0; height:20px; display:block;}
.timerBack {position:absolute; left:0px; top:520px; background:#666; height:20px; width:500px; display:block; border:4px solid #888;}
.timerBlock {position:absolute; left:4px; top:524px; background: url(timerGraph.png) repeat-x; height:20px; display:block;}

.bomb {position:absolute; left:0px; top:555px; background: url(icons.gif) no-repeat -2px top; height:20px; width:30px; display:block;}
.heart {position:absolute; left:567px; top:555px; background: url(icons.gif) no-repeat -30px top; height:20px; width:30px; display:block;}
/*.btSound {position:absolute; right:0px; top:-40px; background: url(icons.gif) no-repeat -60px top; height:36px; width:36px; display:block; cursor:pointer;}
.btSound.off {background-position:-90px 0px;}*/
.btSound {position:absolute; right:-5px; top:10px; height:40px; width:40px; display:block; cursor:pointer; opacity: .5;}
/*body.is-touch-device .btSound {display: none;}*/
.btSound svg {position: absolute; left:10px; top:5px; width:30px; height:30px; object-fit: contain;}
.btSound svg#audioOn {display:block;}
.btSound svg#audioOff {display:none;}
.btSound.off svg#audioOn {display:none;}
.btSound.off svg#audioOff {display:block;}
/*.btInfo {position:absolute; left:0px; top:-40px; background: url(icons.gif) no-repeat -120px top; height:36px; width:36px; display:block; cursor:pointer;}*/
.btInfo {position:absolute; left:-7px; top:8px; height:40px; width:40px; display:block; cursor:pointer; opacity: .5;}
.btInfo svg {position: absolute;
    left: 7px;
    top: 7px;
    width: 25px;
    height: 25px;
    object-fit: contain;}
.game.showing-info .btInfo {pointer-events: none; }

.mobileQuitBtn {    position: absolute;
    left: 10px;
    top: 5px;
    width: 60px;
    height: 49px;
    background: url(btn-quit.png) no-repeat;
    background-size: contain; background-position: center; display:none;}
.mobileQuitBtn.disabled {opacity: 0!important; pointer-events: none;}
body.is-touch-device .mobileQuitBtn {display: block; opacity: .3;}
body:not(.is-touch-device) .mobileQuitBtn {display: none!important;}

.gameover {width:770px; height:490px; display:block; background: url(darkBg.png) repeat left top; position:absolute; left:0px; top:0px; border:4px solid #888;}
.gameover span {position:absolute; left:265px; top:140px; width:240px; height:140px; background: transparent; text-indent:-9999px; font-size:0px;}
.gameover span.dead {background: url(gameoverPanels.png) no-repeat 0px -240px;}
.gameover span.timeout {background: url(gameoverPanels.png) no-repeat 0px -100px;}
.gameover span.welldone {/*background: url(gameoverPanels.png) no-repeat 0px 0px; height:100px;*/}
.gameover .continue {position:absolute; left:235px; top:310px; width:300px; height:100px; text-align:center;
font-family: 'UASquaredRegular', Arial, Sans-serif; font-size:28px; color:#eee;}
.gameover .continue em, .gameover .continue i {font-style:normal;}
body.is-touch-device .gameover .continue i {display: none;}
.gameover .continue strong {position:absolute; left:50px; top:40px;background:#666; width:200px; height:5px; border:2px solid #999; display:block;}
.gameover .continue .continueBar {position:absolute; left:52px; top:42px;background:#eee; width:150px; height:5px; display:block;}
.continueMobile {display: none;}
body.is-touch-device .gameover .continue .continueMobile {     position: absolute;
    left: 23px;
    top: 85px;
    width: 260px;
    height: 47px;
    display: flex;
    justify-content: space-between; }
.sureBtn, .nopeBtn { width: 120px;
    height: 55px;
    background-size: contain;
    background-repeat: no-repeat;}
.sureBtn {background-image: url(btn-sure.png);}
.nopeBtn {background-image: url(btn-nope.png);}

.gameover .complete {position:absolute; left:235px; top:210px; width:300px; height:100px; text-align:center;
font-family: 'UASquaredRegular', Arial, Sans-serif; font-size:28px; color:#eee;}
.gameover .complete em, .gameover .complete cite {font-style:normal;}
.gameover .complete strong {clear:both; display:block; text-align:center;
font-family: 'UASquaredRegular', Arial, Sans-serif; font-size:32px; color:#eee; margin:3px 0 0 0;}

/*.btPlay {position:absolute; left:601px; top:326px; width:145px; height:145px; background:transparent; display:block; cursor:pointer;}*/


.finalBoard {position:absolute; left:85px; top:30px; width:600px; height:300px; 
  font-family: 'UASquaredRegular', Arial, Sans-serif; font-size:28px; color:#eee; text-align:center; display:none;}
.finalBoard div { position:absolute; left:145px; top:25px; width:330px; height:299px; font-size:20px; background: url(statsBoard.png) no-repeat left top; padding:65px 0 0 150px; }
/*.finalBoard div span {position:absolute; left:310px; top:0px; width:200px; text-align:left; }*/
.finalBoard div em {/*position:absolute; left:0px; top:0px;*/ font-style:normal; font-size:16px;  display:block; text-align:left; color:#ccc; }
.finalBoard div span {/*position:absolute; right:0px; top:0px;*/font-family: Arial, Sans-serif;  display:block; text-align:left; color:#fff; margin-bottom:8px; }
.finalBoardBlack {position:absolute; left:4px; top:4px; width:770px; height:490px; display:none;  background: url(readyBg.png) repeat left top; }
.finalBoard div cite {position:absolute; left:50%; top:370px; margin:0 0 0 -175px; color:#ccc; width:200px; font-style:normal; font-size:20px; font-family: 'UASquaredRegular', Arial, Sans-serif;}
.finalBoard div .finalexitBtn {    position: absolute;
    padding: 0;
    left: calc(50% - 140px);
    top: 290px;
    width: 120px;
    height: 60px;
    background: url(btn-exitfim.png) no-repeat; background-size: contain;
    z-index: 2;
    background-position: center;
    cursor: pointer;}
/* */
@font-face {
    font-family: 'MunroRegular';
    src: url('munro-webfont.eot');
    src: url('munro-webfont.eot?#iefix') format('embedded-opentype'),
         url('munro-webfont.woff') format('woff'),
         url('munro-webfont.ttf') format('truetype'),
         url('munro-webfont.svg#MunroRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'UASquaredRegular';
    src: url('uasquare-webfont.eot');
    src: url('uasquare-webfont.eot?#iefix') format('embedded-opentype'),
         url('uasquare-webfont.woff') format('woff'),
         url('uasquare-webfont.ttf') format('truetype'),
         url('uasquare-webfont.svg#UASquaredRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

#joystick-area{
  width:200px;
  height:200px;
  border-radius:50%;
  background:url(joystick-plate.png) no-repeat center center;
  margin-top:20px;
  position:absolute; bottom: 60px; left:calc(50% - 100px);
  z-index: 100;
  touch-action:none; opacity: .6; display: none;
}
body.is-touch-device #joystick-area {display: block;}

#joystick-knob{
  width:50px;
  height:50px;
  border-radius:50%;
  background:#444;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

@keyframes joystickDemo {
  0% {background-image: url(joystick-off.png); transform:rotate(0deg);}
  20% {background-image: url(joystick-off.png); transform:rotate(0deg);}
  20.05% {background-image: url(joystick.png); transform:rotate(180deg);}
  25% {background-image: url(joystick.png); transform:rotate(180deg);}
  25.05% {background-image: url(joystick.png); transform:rotate(0deg);}
  30% {background-image: url(joystick.png); transform:rotate(0deg);}
  30.05% {background-image: url(joystick.png); transform:rotate(-90deg);}
  35% {background-image: url(joystick.png); transform:rotate(-90deg);}
  35.05% {background-image: url(joystick.png); transform:rotate(90deg);}
  40% {background-image: url(joystick.png); transform:rotate(90deg);}
  40.05% {background-image: url(joystick-off.png); transform:rotate(0deg);}
  100% {background-image: url(joystick-off.png); transform:rotate(0deg);}
}

#joystick-moves {
	position:absolute; width:100px;
  height:100px; left:50px; top:50px;
  background: url(joystick-off.png) no-repeat center center; background-size: contain;
}

body.moving-left #joystick-moves{background-image: url(joystick.png); transform: rotate(-90deg);}
body.moving-right #joystick-moves{background-image: url(joystick.png); transform: rotate(90deg);}
body.moving-up #joystick-moves{background-image: url(joystick.png); transform: rotate(0deg);}
body.moving-down #joystick-moves{background-image: url(joystick.png); transform: rotate(180deg);}

/*body.showing-intro #joystick-moves{animation: joystickDemo 12s infinite;}*/

@media (max-width: 800px) {

  .game-header {max-width: none; top:60px; margin-bottom: 50px; }
  
  /*.game-header .btSound {left:10px;}*/
  .btInfo {right:55px; top:-4px; left:auto;}
  .btSound {right:10px; top:-4px; left: auto; display:block;}
  .mobileQuitBtn {right:55px; top:-8px; left:auto;}
  .score {left:10px; top:80px;}
  .levelLabel {left:100px; top:88px; width: auto;}
  .levelLabel .levelOne {display: none!important;}
  h1 {display: none;}

  /* Escala jogo largura do ecrã */
  .game-wrapper {
    display: flex;
    justify-content: center;
  }

  .game {
    /*margin-top: 20px;*/ /* menos margem em mobile */

    /* scale aprox baseado na largura do viewport */
    transform: scale(calc(96vw / 778px));
    transform-origin: left top;
    margin-left: 2vw;
  }
   /*{transform: scale(calc(778px / 96vw)) translateY(-47%);
    left: calc(47% * (778px / 96vw)); display:none; }*/
  /*h1.btSound {transform: scale(calc(778px / 96vw)) translateY(-40%);
    right: auto;
    left: calc(90% * (778px / 96vw));}

  .btInfo {transform: scale(calc(778px / 96vw)) translateY(-40%);
     left: calc(3% * (778px / 96vw)); }*/

  .btCloseInfo {transform: scale(calc(778px / 96vw)) translateY(22%);
    right: auto;
    left: calc(90% * (778px / 96vw));}

  .bomb {transform: scale(calc(778px / 96vw)) translateY(30%);
    left: calc(2% * (778px / 96vw)); }

  .heart {transform: scale(calc(778px / 96vw)) translateY(30%);
    left: calc(73% * (778px / 96vw)); }

  .arrowInfo { left: 15px;top: 565px;}

  /*.score {     transform: scale(calc(778px / 96vw)) translateY(calc(-30% * (778px / 96vw)));
   right: auto; left: calc(5% * (778px / 96vw));

  }

  .levelLabel {  line-height: 22px;  transform: scale(calc(778px / 96vw)) translateY(calc(-19% * (778px / 96vw)));
    left: calc(41% * (778px / 96vw));
    width: 240px;}

  .mobileQuitBtn {transform: scale(calc(778px / 96vw)) translateY(calc(-124% * (778px / 96vw)));
    left: calc(87% * (778px / 96vw));}*/

  /* Evita scroll horizontal */
  html, body {
    overflow: hidden;
  }
}

@media (min-width: 630px) and (max-width: 800px) {
 /*.game {margin-top:60px;}*/
 .arrowInfo { left: 8px;top: 562px;}
}

@media (max-width: 550px) {
  .game-header {top: 30px;}
  .intro-arrowsInfo {display: none;}
	.intro-inputCode {background-size: contain; width: 300px; height: 116px;}
	#codeInput{  
        left: 50px;
    top: 387px;
    width: 164px;
    height: 45px;
    font-size: 30px;
    padding: 0 15px;
    padding-top: 3px\9;}
    .btCode { 
    left: 240px;
    top: 383px;
    width: 59px;
    height: 47px;
    background-size: contain;}
    button { 
    left: 247px;
    top: 381px;
    width: 60px;
    height: 60px; }

    .btPlay { left: 567px;
    top: 290px;
    width: 200px;
    height: 200px;
    background-size: contain;}
    .btPlay:after{left: 36px; top: 77px; background-size: 130px; }
   /* @media (max-width: 389px) {
      .game-header {margin-top:20px;}

    }*/

}
@media (max-height:740px) {
  /*body.is-touch-device .game {margin-top:-50px;}*/
  #joystick-area {bottom:60px;}

}
/* mobile landscape */
@media (orientation:landscape) and (max-height: 500px) {
  .game-header {position: absolute; max-width: none; top:0;}
  .btInfo {right:70px; top:29px; left:auto;}
  .btSound {right:23px; top:28px; left: auto; display:block;}
  .mobileQuitBtn {right:70px; top:24px; left:auto;}
  .score {    right: auto;
    left: 18px;
    top: 16px;}
  .levelLabel { left: 110px; top: 20px; width: auto;}
  .levelLabel .levelOne {display: none!important;}

  @media (max-height:389px) {
    .game-header {top:10px;}

  }


  .intro-inputCode {background-size: contain; width: 300px; height: 116px;}
  #codeInput{  
        left: 50px;
    top: 387px;
    width: 164px;
    height: 45px;
    font-size: 26px;
    padding: 0 15px;
    padding-top: 3px\9;}
    .btCode { 
    left: 240px;
    top: 383px;
    width: 59px;
    height: 47px;
    background-size: contain;}
    button { 
    left: 247px;
    top: 381px;
    width: 60px;
    height: 60px; }

    .btPlay { left: 567px;
    top: 290px;
    width: 200px;
    height: 200px;
    background-size: contain;}
    .btPlay:after{left: 36px; top: 77px; background-size: 130px; }
  body.is-touch-device .game-wrapper {
    display: flex;
    justify-content: center;
  }

  body.is-touch-device .game {
        transform: scale(calc(96svh / 640px));
    transform-origin: left top;
    margin-left: 2vw;
    /*margin-top: 7vh;*/ margin-top:4.5%;
  }
  body.is-touch-device h1 {display: none; }
  /*body.is-touch-device .btSound {transform: scale(calc(640px / 96svh)) translateY(-40%);
    right: auto;
    left: calc(90% * (640px / 96svh));}

  body.is-touch-device .btInfo {    transform: scale(calc(640px / 96svh)) translateY(50%);
    left: calc(93vw * (640px / 96svh)); }

  body.is-touch-device .mobileQuitBtn {     transform: scale(calc(640px / 96svh)) translateY(-29%);
    left: calc(90vw * (640px / 96svh)); }*/

  body.is-touch-device .btCloseInfo {transform: scale(calc(640px / 96svh)) translateY(22%);
    right: auto;
    left: calc(108svh * (640px / 96svh));}

  body.is-touch-device .bomb {transform: scale(calc(640px / 96svh)) translateY(30%);
    left: calc(1svh * (640px / 96svh)); }

  body.is-touch-device .heart {transform: scale(calc(640px / 96svh)) translateY(30%);
    left: calc(86svh * (640px / 96svh)); }

  body.is-touch-device .arrowInfo { left: 15px;top: 565px;}

  /*.score {    transform: scale(calc(778px / 96vw)) translateY(-15%);
    right:auto; left: calc(2vw * (778px / 96vw));}

  .levelLabel {font-size: 20px; width: 300px;    transform: scale(calc(778px / 96vw)) translateY(-9%);}
  .levelLabel cite.levelOne {margin-top:3px;}
  .levelLabel em {font-size: 23px;}*/
 
  html, body {
    overflow: hidden;
  }

  #joystick-area{ margin-top:0; bottom:auto; top:calc(50% - 100px); left:auto; right: 40px; }

}

@media (orientation:landscape) and (max-width: 740px) {
  
  #joystick-area {right:10px;}
  
}