html,body{margin:0;height:100%;overflow:hidden;touch-action:none;font-family:"Title",Arial,sans-serif;} @font-face{font-family:'Title';src:url('../assets/text/saira-semibold.woff') format('woff');} *,*::after,*::before{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .game-holder{position:fixed;width:100%;height:100%;background:-webkit-linear-gradient(#e4e0ba,#f7d9aa);background:linear-gradient(#e4e0ba,#f7d9aa);} .world{position:absolute;overflow:hidden;width:100%;height:100%;} .header{position:absolute;top:6vh;left:0;width:100%;text-align:center;pointer-events:none;font-size:2vh;} .header h1{font-size:4.5em;line-height:1;margin:0;letter-spacing:-0.025em;color:#d1b790;} .header h1 span{font-size:0.2em;font-style:italic;display:block;margin:0 0 -1.5em -7em;letter-spacing:0px;} .header h2{font-size:1em;margin:0;white-space:nowrap;text-indent:1em;letter-spacing:0.5em;text-transform:uppercase;color:#d6483b;} .score{width:100%;margin:0.6em 0 0;text-align:center;white-space:nowrap;} .score__content{position:relative;display:inline-block;padding:0 1em;vertical-align:top;} .score__content:nth-child(2){border-right:1px solid #d1b790;border-left:1px solid #d1b790;} .score__label{font-size:12px;position:relative;text-align:center;letter-spacing:3px;text-transform:uppercase;color:#d1b790;} .score__value{font-weight:bold;color:#d1b790;} .score__value--level{font-size:24px;text-align:center;margin-top:4px;} .score__value--dist{font-size:30px;} .level-circle{position:absolute;left:50%;width:46px;margin:-42px 0 0 -23px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);} .score__value--energy{position:relative;width:60px;height:8px;margin-top:20px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:#d1b790;} .energy-bar{position:absolute;top:0;right:0;bottom:0;left:0;margin:2px;background-color:#f25346;-webkit-animation-name:none;animation-name:none;-webkit-animation-duration:150ms;animation-duration:150ms;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;} .message{font-weight:bold;position:absolute;left:0;width:100%;text-align:center;text-transform:uppercase;} #gameOver{font-size:30px;bottom:17vh;display:none;text-indent:0.5em;letter-spacing:0.5em;color:#d1b790;} .message--instructions{font-size:1em;bottom:15vh;letter-spacing:0.2em;color:#68c3c0;} .message--instructions>span:nth-child(2){display:block;color:#d6483b;white-space:nowrap;} #bestScore{top:8px;left:10px;color:#d1b790;text-align:left;font-size:0.7em;} @-webkit-keyframes blinking{0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;} } @keyframes blinking{0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;} } @media screen and (min-width:320){.header{} .header h2{letter-spacing:0.65em;} } .coin{position:fixed;left:10px;bottom:3px;z-index:6;font-size:20px;color:sienna;text-shadow:1px 1px white;display:none;} .coin>img{margin-right:6px;} .videoBt{background-color:transparent;border:3px solid sienna;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;color:sienna;padding:5px;font-size:18px;font-weight:bold;cursor:pointer;width:103px;box-shadow:3px 3px 5px black;z-index:6;} .videoBt:hover{background-color:#f0dcbe;} .videoBt>span{float:left;margin-top:7px;color:sienna;text-shadow:1px 1px white;} .videoBt>img{float:right;} #videoBt-Continue{padding:7px;width:137px;margin-left:-5px;} .videoBt-Coin{margin-bottom:16px;display:none;} #btMenu{display:block;cursor:pointer;z-index:10;position:absolute;top:6px;right:12px;} .bar1,.bar2,.bar3{width:30px;height:4px;background-color:#d1b790;margin:6px 0;transition:0.4s;} .change .bar1{-webkit-transform:rotate(-45deg) translate(-6px,6px);transform:rotate(-45deg) translate(-6px,6px);} .change .bar2{opacity:0;} .change .bar3{-webkit-transform:rotate(45deg) translate(-8px,-8px);transform:rotate(45deg) translate(-8px,-8px);} #menu{position:relative;display:none;top:0;left:0;background-color:rgba(0,0,0,0.6);width:100%;height:100%;z-index:10;} div#controlPanel{position:absolute;display:flex;flex-direction:column;top:56px;right:-100px;padding:0;} .button-menu{display:inline-block;padding:0;margin:7px;width:20vh;max-width:60px;height:auto;box-sizing:border-box;} .button{width:65px;height:65px;cursor:pointer;margin:12px;} #btUpgrade{margin-left:-10px;} .button:hover{width:68px;height:68px;} div#popupContainer{position:relative;width:100%;height:100%;background-color:rgba(0,0,0,0.6);z-index:5;text-align:center;display:none;} div#popup{position:absolute;top:50%;left:50%;width:100%;max-height:80vh;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-bottom:6px solid #f1c27b;overflow:auto;min-width:320px;max-width:550px;} div#popupTitle{background-color:#d6483b;color:yellow;width:100%;font-size:1.1em;padding:4px 4px 6px 4px;position:sticky;float:left;top:0;left:0;z-index:6;} div#popupMsg{background-color:#f1c27b;padding:6px 6px 0 6px;width:100%;color:red;overflow:auto;} .close{color:rgb(238,255,0);font-size:28px;font-weight:bold;padding:0 10px;position:absolute;top:-6px;right:0;} .close:hover,.close:focus{color:rgb(87,84,0);text-decoration:none;cursor:pointer;} .item{width:100%;border:3px solid rgb(192,78,50);margin:0;margin-bottom:6px;padding:0;display:flex;} .item:last-child{margin-bottom:0;} .item:hover{border-color:rgb(45,160,51);} .thumbnail{width:40%;} .thumbnail>img{width:100%;height:auto;display:block;} .details{width:30%;font-size:14px;padding:2px;display:flex;flex-direction:column;justify-content:center;align-items:center;} .details-header{font-size:16px;} .details-content{font-size:14px;} .action{width:30.1%;background-color:rgb(160,82,45);position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#f1c27b;} .action button{margin:4px auto auto auto;font-weight:bold;font-size:12px;padding:2px 5px;border:2px solid #f1c27b;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background-color:#3a913d;color:white;box-shadow:2px 2px 4px black;cursor:pointer;} .action button:not(.disabled):hover{background-color:#36aa3a;} .btUpgrade.disabled{background-color:lightgray;cursor:default;} .action-price img{display:inline-block;width:26px;} .tick{width:30px;display:none;} #loading{position:absolute;left:0;top:0;z-index:15;width:100%;height:100%;background-color:#333;background-image:url('../assets/images/common/loading.svg');background-size:128px;background-repeat:no-repeat;background-position:center center;} #loading>img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;} #copyRight{z-index:16;color:white;background-color:green;position:absolute;right:5px;bottom:5px;display:block;text-decoration:none;font-size:11px;font-family:Arial,Helvetica,sans-serif;padding:2px 5px 3px 5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} @media only screen and (min-width:500px){div#popup{width:60%;} .item{border-width:4px;} .tick{width:52px;} .action-price img{width:40px;} .action button{font-size:16px;padding:5px 9px;} } @media only screen and (min-width:820px){div#popup{width:40%;} .button-menu{width:70px;} .bar1,.bar2,.bar3{width:35px;height:5px;} .change .bar1{-webkit-transform:rotate(-45deg) translate(-8px,7px);transform:rotate(-45deg) translate(-8px,7px);} .change .bar3{-webkit-transform:rotate(45deg) translate(-8px,-8px);transform:rotate(45deg) translate(-8px,-8px);} #copyRight{font-size:12px;padding:2px 6px 3px 6px;} #bestScore{font-size:1em;} } @media only screen and (min-width:1200px){.details-header{font-size:20px;} .details-content{font-size:17px;} .score__label{font-size:16px;} } @media only screen and (min-height:450px){#gameOver{bottom:40vh;} }