/*================================= 1 Reset Css ( #res ) =================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{text-decoration:none;outline:0;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:#D46300;transition:all 0.5s ease 0s;}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}hr{display:block;height:1px;border:0;border-top:1px solid #ababab;margin:50px auto; padding:0}

/*================================= 2 Font Face ( #face ) =================================*/
@font-face {
    font-family: Avenir-Heavy;
    src: url(../fonts/Avenir-Heavy.woff);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Avenir-Heavy;
}

/*================================= 3  Inputs ( #input ) =================================*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0;}
::-webkit-input-placeholder {color:#343434; font-style:normal;}
:-moz-placeholder {color:#343434; font-style:normal;}
::-moz-placeholder {color:#343434; font-style:normal;}
:-ms-input-placeholder {color: #343434; font-style:normal;}
button::-moz-focus-inner {border: 0}
:focus {outline:none;border-color: #343434 !important;}
::-moz-focus-inner {border:0;}

ul{list-style:none; margin:0; padding:0;}
li{list-style:none;}
img{max-width: 100%;}
button{cursor: pointer;}

.main{background-image: url(../images/kashay-shooter/main-page-bg.jpg);background-repeat: no-repeat;background-size: cover;height: 100vh;overflow: auto;background-position: center bottom;padding: 35px;}
.logo{max-width: 500px;margin: 30px auto;display: block;}
.level_wrapper{max-width: 500px;display: flex;align-items: center;justify-content: center;gap: 30px;margin: 0 auto;flex-wrap: wrap;padding-top: 30px;}
.level_wrapper img{width: 140px;height: auto;cursor: pointer;filter: grayscale(100);}
.level_wrapper img.unlock{filter: grayscale(0);}
#snowCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;}
.main_game{background-repeat: no-repeat;height: 100vh;padding: 60px;background-size: cover;background-position: center top;display: flex;align-items: center;}
.btn_wrapper{position: absolute;top: 30px;right: 30px;}
.btn_wrapper img{cursor: pointer;margin-right: 10px;width: 40px;height: auto;}
.blue_cartoon { width: 7vw; position: absolute; animation: moveX 8s linear infinite alternate, moveY 8s linear infinite alternate;min-width: 60px;}   
@keyframes moveX {
    from { left: 0; }
    to { left: calc(100vw - 7vw); }
}
@keyframes moveY {
    from { top: 0; }
    to { top: calc(100vh - 20vh); }
}

#game-container div{position: relative;}
#game-container div::after{content: '';background-image: url(/images/kashay-shooter/kashay-blow.gif);position: absolute;height: 100%;width: 100%;left: 0;}

.progress_bar{max-width: 400px;position: fixed;top: 20px;left: 0;right: 0;text-align: center;margin: 0 auto;}
.progress_base{position: relative;}
.progress_thumb{ background-color: #F5F0F0; position: absolute;background-image: url(../images/kashay-shooter/progress-bg.svg); width:calc(100% - 60px);height: 43%;border-radius: 50px;top: calc(50% + 11px);left: 30px;transform: translateY(-50%);transition: width 1s;-webkit-transition: width 3s;overflow: hidden;box-shadow: 0 -3px 4px rgba(0,0,0,0.4) inset, 0 0 4px rgba(0,0,0,0.4) inset;}
.progress_thumb:after { content: "";display: block; position: absolute; top: 2px; width: 100%; left: 50%; margin-left: -48%; border-radius: 20px;height: 10px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 30%, transparent 120%);}
.score{font-size: 28px;}
.hide{display: none;opacity: 0;}
.popup{position: fixed;width: 100%;height: 100vh;top: 0;left: 0;right: 0;margin: 0 auto;display: flex;align-items: center;justify-content: center;background-color: rgba(0, 0, 0, 0.7);z-index: 99;opacity: 1;transition: all 0.3s ease;}
.popup_wrapper{padding: 30px;text-align: center;}
.popup_wrapper > img{max-width: 700px;}
.popup .popup_content{position: absolute;top: 50%;transform: translateY(-50%);max-width: 500px;left: 0;right: 0;margin: 50px auto;}
.popup .stars img{animation: popout 1s linear 0.5s;}
.popup .stars img:first-child{animation: popout 1s linear 0.7s;}
.popup .stars img:nth-child(3){animation: popout 1s linear 0.9s;}
.popup p{color: #fff;font-size: 20px;margin-top: 20px;}
.popup h6{color: rgb(26, 87, 176);font-size: 42px;width: 50%;padding: 12px 30px;margin: 20px auto;background-image: url(../images/kashay-shooter/score-bg.png);background-repeat: no-repeat;background-size: contain;background-position: center;-webkit-text-stroke: 1px #fff;text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.3), -1px -1px 1px #fff, 1px 1px 1px #075c83;}
.popup a{display: inline-block;}
.popup .btn_container img:not(:last-child){margin-right: 20px;}
.popup .btn_container img{width: 70px;}
.popup.time_over .btn_container{position: absolute;top: 50%;transform: translateY(-50%);left: 0;right: 0;text-align: center;padding-top: 60px;width: 100%;}
.popup.time_over p{color: #C70005;-webkit-text-stroke: 1px #fff;text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.3), -1px -1px 1px #fff, 1px 1px 1px #075c83;font-size: 60px;margin: 20px auto 0;}
.popup.time_over span{font-size: 23px;display: block;color: #113570;margin-bottom: 10px;}
@keyframes popout {
    0%{transform: scale(1);opacity: 0;}
    40%, 50%{transform: scale(1.2);opacity: 1;}
    90%, 100%{transform: scale(1);}
}
@media (max-width: 768px) {
    .red_cartoon {
        width: 15vw;
        animation: moveX 10s linear infinite alternate, moveY 10s linear infinite alternate;
    }
    @keyframes moveX {
        from { left: 0; }
        to { left: calc(100vw - 15vw); }
    }
    @keyframes moveY {
        from { top: 0; }
        to { top: calc(100vh - 15vh); }
    }
}
.kashay,.happy { position: relative; width: 100px;top: 50%;
    transform: translateY(-50%);
    left: -60px;}
.happy{width: 110px;}
#shooter{width: 130px;  height: 130px;position: absolute; cursor: auto; z-index: 100;}
#game-container{width: 700px; height: 350px;}
.red_cartoon {width: 100px; animation: roll 5s ease-in-out infinite;position: absolute;left: 80%;bottom: 20%;}
@keyframes roll{0%{transform:translateX(0) rotate(0deg)}25%{transform:translateX(30px) rotate(40deg)}50%{transform:translateX(0) rotate(0deg)}75%{transform:translateX(-50px) rotate(-25deg)}100%{transform:translateX(0) rotate(0deg)}}

@media (min-width:1440px){
    .level_wrapper{position: absolute;bottom: 0;left: 0;right: 0;}
    .main{overflow: hidden;}

}
@media (min-width:1600px){
    .level_wrapper{bottom: 10%;}
}
@media (min-width:1170px) and (max-width:1299px){
    #game-container{width: 590px;  height: 570px;}
}
@media (min-width:1024px) and (max-width:1169px){
    #game-container{width: 490px; height: 490px;}
    .level_wrapper img{width: 110px;}
    .logo{max-width: 440px;margin-bottom: 0;}
}
@media(min-width:1300px) and (max-width:1390px) {
    #game-container{width: 650px; height: 650px;}
}
@media (min-width:1024px) {
    .main{display: flex;flex-flow: column;justify-content: center;}
    .level_wrapper{position: relative;bottom: 0;}
}
@media (max-width:1023px) {
    .main{padding: 60px 20px;background-position: 20%;}
    .volume_btn{width: 40px;height: auto;}
    .logo{max-width: 400px;margin: 20px auto;}
    .level_wrapper img{width: 100px;}
    .main_game{padding: 20px;}
    .red_cartoon{width: 60px;}
    .progress_bar{max-width: 320px;}
    .progress_thumb{top: calc(50% + 8px);}
    .score{font-size: 22px;}
    .popup_wrapper > img {max-width: 400px;}
    .popup .popup_content{margin: 30px auto;}
    .popup .stars img{width: 40px;}
    .popup .stars img:nth-child(2){width: 60px;}
    .popup h6{font-size: 30px;margin: 10px auto;}
    .popup .btn_container img{width: 40px;}
    .popup .btn_container img:not(:last-child) {margin-right: 10px;}
    .popup.time_over .btn_container{padding-top: 30px;}
    .popup.time_over p{font-size: 38px;margin: 10px auto 0;}
    .popup span{font-size: 18px;}
    .main{display: flex;flex-flow: column;justify-content: center;}
}
@media (max-width:1023px) and (orientation: portrait) {
    .main{padding: 100px 20px;}   
}
@media (max-width:1023px) and (orientation: landscape) {
    .main{padding: 20px;}
    .logo{margin: 10px auto;}
    .level_wrapper img{width: 70px;}
    .kashay,.happy {position: relative; width: 70px;}
    .happy{width: 80px;}
    #shooter{width: 95px;  height: 95px;position: absolute; cursor: auto; z-index: 100;}
    #game-container{width: 450px;  height: 160px;}
    .btn_wrapper img{z-index: 1000;}  
}
@media (max-width:767px) {
    .main{padding: 50px 20px;}
    .logo{max-width: 320px;}
    .level_wrapper{gap: 20px;padding-top: 50px;}
    .btn_wrapper img{width: 30px;height: auto;  z-index: 1000;}
    .level_wrapper img {width: 70px;}
    .red_cartoon{width: 40px;}
    .progress_bar{max-width: 280px;top: 10px;}
    .score {font-size: 18px;}
    .progress_thumb{top: calc(50% + 6px);}
    .popup p{font-size: 16px;margin-top: 10px;}
    .popup .btn_container img{width: 35px;}
}
@media (max-width:767px) and (orientation: landscape) {
    .logo{margin: 0 auto;}
    .main{padding: 20px;}
    .level_wrapper{padding-top: 30px;}
    .kashay,.happy { position: relative;width: 60px;}
    .happy{width: 70px;}
    #shooter{width: 85px;  height: 85px;position: absolute;  cursor: auto;z-index: 100;}
    #game-container{width: 350px; height: 200px; }
    .btn_wrapper img{z-index: 1000;}
}
@media (max-width:440px) {
    .logo{max-width: 280px;}
}
@media (max-width:440px) and (orientation: portrait) {
    .main{padding: 100px 20px;display: flex;flex-flow: column;justify-content: center;}
}
@media (width:820px) and (height:1180px) {
    @keyframes moveX {
        from { left: 0; }
        to { left: calc(100vw - 15vw); }
    }
    @keyframes moveY {
        from { top: 0; }
        to { top: calc(100vh - 15vh); }
    }
}
.portrait .btn_wrapper, .portrait .progress_bar,.portrait .game-container,.portrait #shooter,.portrait .kashay {display: none;}
.hide {display: none;}
.rotate-message {display: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.7);color: white;padding: 20px;border-radius: 10px;z-index: 1000;text-align: center;font-size: 18px;line-height: 25px;}