/*================================= 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: aBlackLives;
    src: url(../fonts/aBlackLives.otf);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: aBlackLives;
}

/*================================= 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;}

body {font-family: Arial, sans-serif;overflow: hidden;
    /* Prevents scrolling while dragging */
    user-select: none;}

#emoji-container {display: grid;gap: 2px;justify-content: center;margin: 0 auto;padding: 10px;position: relative;max-height: max-content;}
#emoji-container::after{content: '';position: absolute;width: calc(100% - 22px);height: calc(100% - 22px);top: 11px;left: 11px;box-shadow: 0px 0px 30px rgb(0 0 0 / 50%);pointer-events: none;}
#childContainer{display: none;}

.emoji-box {position: relative;}
.emoji-box-image {position: absolute;top: 0;left: 0;z-index: 1;right: 0;margin: 0 auto;height: 100%;}

.emoji-box.main_overlay::after{content: '';position: absolute;width: 100%;height: 100%;background-image: url(../images/emotions-out/main_overlay.png);background-size: cover;background-repeat: no-repeat;z-index: 9;opacity: var(--overlay-opacity, 90%);pointer-events: none;}

.moving-girl.bottom{bottom: -40px;}
.moving-girl.top{top: -40px;}
.moving-girl.left{left: -40px;}
.obstacle {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;/* Make sure it's above empty emoji-box */}
.obstacle > img {width: 100%;height: 100%;object-fit: cover;display: block;}
.obstacle > .border-horizontal.border-top{box-shadow: 0px -5px 6px #321404;}
.obstacle > .border-horizontal.border-bottom{box-shadow: 0px 5px 6px #321404;}
.obstacle > .border-vertical.border-left{box-shadow: 0px 5px 6px #321404;}
.obstacle > .border-vertical.border-right{box-shadow: 0px -5px 6px #321404;}

.emoji {width: 100%;position: absolute;z-index: 3;cursor: pointer;max-width: 50px;left: 14px;top: 16px;margin: 0 auto;}
/* .main-character {width: 60px;height: 60px;} */

.main-character{animation: popout_main 2s ease-in;transform-origin: center center;}

@keyframes jerkEffect {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-4px, -4px);
    }

    50% {
        transform: translate(4px, 4px);
    }

    75% {
        transform: translate(-3px, 3px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.jerk {
    animation: jerkEffect 0.2s ease-in-out;
}

.main{background-image: url(../images/emotions-out/main-page-bg.jpg);background-repeat: no-repeat;background-size: cover;height: 100vh;padding: 15px;background-position: bottom;position: relative;display: flex;align-items: center;flex-flow: column;}
.logo{max-width: 600px;display: block;margin: -15px auto 0;}

.info_page{width: auto;z-index: 9999;position: absolute;left: 0;right: 0;margin: 0 auto;height: 100%;text-align: center;}
.info_page::after{content: '';background-color: #00000098;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 0;}
.info_page .info_page_gif{height: 100%;z-index: 1;position: relative;}
.info_page .play_button{position: absolute;bottom: 20px;right: 0;left: 0;margin: 0 auto;z-index: 2;max-width: 300px;animation: float 2s ease-in-out infinite;cursor: pointer;}

.child_page{background-image: url(../images/emotions-out/car-out-bg.jpg);background-repeat: no-repeat;background-size: cover;height: 100vh;padding: 15px;background-position: center;position: relative;align-items: center;}
.btn_wrapper img{cursor: pointer;}
.level_wrapper{display: flex;flex-wrap: wrap;gap: 70px 30px;max-width: 1140px;margin-left: auto;margin-right: auto;justify-content: center;margin-top: 10vh;}
.level_wrapper a {display: inline-block;position: relative;animation: float 2s ease-in-out infinite;cursor: pointer;color: #fff;max-width: 270px;}
.level_wrapper a.current_level::after{content: '';position: absolute;top: -80px;width: 100px;height: 100px;background-image: url(../images/emotions-out/character/happy-gif.gif);background-repeat: no-repeat;background-size: contain;z-index: 1;left: 0;right: 0;margin: 0 auto;}
.level_wrapper a.level_done span, .level_wrapper a.current_level span{color: #ffba01;}
.level_wrapper a span{position: absolute;left: 0;right: 0;text-align: center;top: 50%;transform: translateY(-50%);font-size: 28px;}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.timer{max-width: 364px;background-color: #2990B1;border-radius: 100px;display: flex;align-items: center;gap:20px;padding-right: 20px;height: 60px;}
.timer > img {margin-left: -30px;}
.btn_wrapper{position: fixed;z-index: 2; width: 100%;top: 0;display: flex;justify-content: space-between;align-items: center;padding: 20px;left: 0;}
.btn_wrapper .icon{width: 50px;}
.progress_bar{width: 427px;position: absolute;z-index: 99;top: 20px;left: 0;right: 0;margin: 0 auto;}
.progress_base{position: relative;}
.progress_thumb{position: absolute;top: calc(50% - 4px);left: 24px;transform: translateY(-50%);width: calc(100% - 40px);height: 16px;}
.progress_thumb::after{content: '';background-image: url(../images/emotions-out/progress-thumb.png);height: 62px;width: 48px;display: inline-block;background-repeat: no-repeat;position: absolute;top: 50%;left: 50;transform: translateY(-50%);transition: all 0.5s linear;}
.progress_base span{position: absolute;font-size: 30px;font-weight: 600;top: 44%;transform: translateY(-50%);left: -20px;text-shadow: 2px 2px 0px #eee, 3px 3px 0px #fff;color: #5f2415;background: #ffbd0b; border-radius: 50%;border-top: 7px solid #ffd84c; border-left: 7px solid #ffd84c; border-right: 7px solid #d57e08;border-bottom: 7px solid #d57e08;width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;}
.progress_thumb #progressFill{height: 100%;transition: width 0.5s linear;}

.box_wrapper{position: relative;height: 100vh;}

@keyframes bounce {
    0%, 40% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
    60%, 100% {
        transform: translateY(0);
    }
}

@keyframes rotate {
    0%, 40% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    60%, 100% {
        transform: rotate(360deg);
    }
}

@keyframes skew {
    0%, 40% {
        transform: skew(0deg, 0deg);
    }
    50% {
        transform: skew(10deg, -10deg);
    }
    60%, 100% {
        transform: skew(0deg, 0deg);
    }
}

@keyframes jerk {
    0%, 30% {
        transform: translate(0, 0);
    }
    35% {
        transform: translate(-3px, 1px);
    }
    50% {
        transform: translate(3px, -1px);
    }
    65% {
        transform: translate(-3px, -1px);
    }
    70%, 100% {
        transform: translate(0, 0);
    }
}

@keyframes scribble {
    0%, 20% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(-2px, 1px) rotate(1deg);
    }
    35% {
        transform: translate(3px, -1px) rotate(-2deg);
    }
    45%, 60% {
        transform: translate(-3px, 1px) rotate(2deg);
    }
    70% {
        transform: translate(2px, -1px) rotate(-1deg);
    }
    80%, 100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

.moving-girl {position: absolute;width: 50px;height: 50px;z-index: 10;}

.moving-girl img {width: 100%;height: 100%;}

.popup.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.5s ease;}
.popup h6{color: #fff;text-align: center;font-size: 27px;margin-bottom: -58px;z-index: 1;position: relative;
    text-shadow: 
    3px 3px 6px rgba(0, 0, 0, 0.6),
    -1px -1px 3px rgba(255, 255, 255, 0.9),
    2px 2px 4px rgba(0, 0, 0, 0.4),
    -2px -2px 4px rgba(255, 255, 255, 0.6);}
.popup .popup_content{position: absolute;text-align: center;top: 50%;transform: translateY(-50%);max-width: 370px;left: 0;right: 0;margin: 10px auto;}
.popup svg{width: 70%;margin-bottom: 30px;}
.popup p{line-height: 45px;font-size: 30px;color: #fff;margin-bottom: 20px;text-shadow: 
    3px 3px 6px rgba(0, 0, 0, 0.6),
    -1px -1px 3px rgba(255, 255, 255, 0.9),
    2px 2px 4px rgba(0, 0, 0, 0.4),
    -2px -2px 4px rgba(255, 255, 255, 0.6);}
.popup .popup_content img{width: 130px;cursor: pointer;}
.popup_base{max-width: 550px;width: 100%;}
.popup_wrapper{animation: popout 1s ease-in-out 0.3s;}


@keyframes popout {
    0% {
        transform: scale(0.5) rotate(-20deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(10deg);
        opacity: 1;
    }
    75% {
        transform: scale(0.9) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@media (min-width:1920px){
    .level_wrapper a{max-width: 320px;}
    .progress_bar{top: 30px;}
}
@media (max-width:1200px){
    .level_wrapper{gap: 60px 30px;height: 50%;align-content: center;}
    .level_wrapper a{max-width: 300px;align-self: center;}
    .moving-girl.bottom{bottom: -40px;}
    .moving-girl.top{top: -40px;}
    .moving-girl.left{left: -40px;}
}

@media (max-width:1023px){
    .main{overflow-y: auto;}
    .logo{max-width: 360px;margin: -40px auto 10px;}

    .moving-girl{width: 30px;height: 30px;}
    .moving-girl.bottom{bottom: -40px;}
    .moving-girl.top{top: -30px;}
    .moving-girl.left{left: -30px;}

    .btn_wrapper .icon {width: 40px;}
    .level_wrapper {gap: 30px 20px;}
    .level_wrapper a{max-width: 200px;}
    .level_wrapper a span{font-size: 18px;}
    .level_wrapper a.current_level::after{width: 60px;top: -40px;}
    
    
    .popup p {font-size: 16px;line-height: 25px;}
    .popup h6{font-size: 14px;margin-bottom: -29px;}
    .popup_base {max-width: 250px;}
    .popup .popup_content{max-width: 180px;}
    .popup .popup_content img {width: 80px;}
    .emoji{left: 5px;top: 5px;max-width: 40px;}
    .obstacle > img{max-width: 50px;}
    
    .progress_bar {width: 247px;transform: rotate(-90deg) translateX(-20px);left: -100px;right: auto;top: auto;height: 20px;}
    .btn_wrapper img{vertical-align: middle;}
    .progress_thumb{height: 9px;}
    .progress_thumb::after{background-size: contain;height: 34px;width: 26px;}
    .progress_bar::before, .progress_bar::after{height: 8px;}
    .progress_thumb #progressFill{vertical-align: middle;}

}
@media (max-width:1000px){
 .level_wrapper a{max-width: 170px;}   
}
@media (max-width:767px){
    .logo{max-width: 290px;}
    .child_page{padding: 25px;}
    .btn_wrapper{padding: 10px;}
    .moving-girl.top{top: -20px;}
    .moving-girl.left{left: -20px;}
    .moving-girl.bottom{bottom: -20px;}

    .level_wrapper a{max-width: 150px;}
    .level_wrapper a span{font-size: 16px;}
    .level_wrapper a.current_level::after{width: 50px;top: -40px;}
    .btn_wrapper .icon{width: 30px;}
    .emoji{left: 6px;top: 8px;max-width: 35px;}
    .moving-girl{width: 30px;height: 30px;}

    .info_page .play_button{max-width: 170px;bottom: 0;}
    

}
@media (width:912px) and (height:1368px) {
    .logo{max-width: 570px;}
    .level_wrapper{gap: 60px 30px;}
    .level_wrapper a{max-width: 270px;}
    .level_wrapper a span {font-size: 22px;}
}
@media (width:1024px) and (height:600px) {
    .logo{max-width: 420px;}
    .level_wrapper{height: 50%;align-content: center;}
    .level_wrapper a {max-width: 260px;align-self: center;}
    .level_wrapper a.current_level::after{top: -60px;width: 80px;}
    .popup_base{max-width: 480px;}
    .popup .popup_content{max-width: 330px;}
    .progress_bar{height: 20px;}
    .progress_bar::before, .progress_bar::after{height: 8px;}
}
@media (max-height:344px){
    .logo {max-width: 310px;margin: -40px auto 0;}
    .level_wrapper{gap: 20px;}
}
.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;}
.portrait #emoji-container, .portrait .btn_wrapper,.portrait .info_page, .portrait .progress_bar{display: none;}