/*================================= 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 ) =================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Nerko One", cursive;
}

/*================================= 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/match-three/bg.jpg);background-repeat: no-repeat;background-size: cover;height: 100vh;overflow: hidden;padding: 20px;background-position: center;position: relative;}
.btn_wrapper{position: absolute;right: 20px;top: 20px;}
img.btn_wrapper, .btn_wrapper img{width: 40px;cursor: pointer;}
.logo{max-width: 600px;display: block;margin: 30px auto 60px;}
.level_wrapper{display: flex;flex-wrap: wrap;gap: 40px;max-width: 1030px;margin-left: auto;margin-right: auto;justify-content: center;align-items: center;height: 50%;}
.level_wrapper a {display: inline-block;position: relative;animation: float 2s ease-in-out infinite;width: 140px;cursor: pointer;}
.level_wrapper a.level_done::after{content: '';position: absolute;bottom: 0;width: 140px;height: 140px;background-image: url(../images/match-three/level_done.gif);background-repeat: no-repeat;background-size: contain;z-index: 1;left: 0;}
.level_wrapper a.level_done:nth-child(odd):after{background-image: url(../images/match-three/level_done_odd.gif);cursor: pointer;}
.level_wrapper a.level_done img{visibility: hidden;}
.level_wrapper a img{width: 90px;}
.level_wrapper a:nth-child(odd){margin-top: 50px;}
.level_wrapper a.level_done:nth-child(odd){top: 30px;}

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

.topbar{display: flex;align-items: center;justify-content: center;gap: 60px;}
.score_board{display: flex;max-width: 394px;background-color: #2990B1;border-radius: 100px;align-items: center;height: 60px;}
.score_board img{width: 50px;margin-right: 10px;}
.level4 .score_board img, .level5 .score_board img{width: 60px;}
.score_board p{font-size: 50px;color: #FFD346;padding-right: 30px;}
.level4 .score_board p, .level5 .score_board p{padding: 0 10px;}

.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;}
.progress_bar{background: linear-gradient(10deg, #FFF 0.06%, #dddddb4f 99.96%);border-radius: 50px;width: 332px;height: 27px;overflow: hidden;position: relative;border: 1px groove #EDB720;border-top-color: #EDB720;border-bottom-color: #FFFFFF;}
.progress_bar::after{content: '';width: calc(100% - 10px);position: absolute;background: linear-gradient(0deg, #000 -0.12%, #FFF 99.97%);opacity: 0.65;mix-blend-mode: lighten;top: 3px;left: 5px;height: 20px;border-radius: 50px;pointer-events: none;}
.progress_bar::before{content: '';width: calc(100% - 10px);position: absolute;background: linear-gradient(180deg, #000 -0.12%, #FFF 99.97%);opacity: 0.65;mix-blend-mode: lighten;bottom: 3px;left: 5px;height: 20px;border-radius: 50px;pointer-events: none;}
.progress_bar span{display: inline-block;width: 100%;height: 100%;}
.progress_bar span img{height: 100%;position: relative;z-index: 1;mix-blend-mode: multiply;width:0%}

.game_wrapper{display: grid;align-items: center;height: 90%;}
.game_board{display: grid;grid-template-columns: repeat(6, 1fr);margin-right: auto;margin-left: auto;}
.tile{height: 100px;width: 101px;position: relative;display: flex;align-items: center;justify-content: center;background-image: url(../images/match-three/fruit_bg.png);background-repeat: no-repeat;background-size: contain;left: 0;top: 0;}
.game_board .tile-image{--fruit-height: 100px;animation: bounce infinite;width: 100%;height: 55px;position: absolute;background-repeat: no-repeat;background-size: inherit;background-position: center;}

.game_board .tile-media{width: 170px;position: absolute;transform: scale(1.1);pointer-events: none;opacity: 0;}

@keyframes bounce{0%{transform:translateY(0)}20%{transform:translateY(calc(-0.3 * 30px))}40%{transform:translateY(0)}60%{transform:translateY(calc(-0.2 * 30px))}80%{transform:translateY(0)}100%{transform:translateY(calc(-0.1 * 30px))}}

.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 .popup_content{position: absolute;top: 50%;transform: translateY(-50%);text-align: center;max-width: 560px;left: 0;right: 0;margin: 10px auto;width: 90%;}
.popup p{font-size: 47px;color: #FFD346;margin-bottom: 20px;}
.popup .popup_content img{width: 130px;}
.popup .popup_content .apple_img{position: absolute;right: -80px;bottom: -50px;width: 190px;}
.wood_board{max-width: 600px;}
#childContainer{display: none;}
#play-btn{cursor: pointer;}


.popup_wrapper{animation: popout 1s ease-in-out 0.3s;}
img {outline: none;}

img, img::selection {user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;}

*::selection {background: transparent;}


@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:1024px) and (max-width:1280px){
    .popup p{font-size: 47px;}
    @keyframes bounce {
        0% {transform: translateY(0);}
        20% {transform: translateY(calc(-0.3 * 20px));}
        40% {transform: translateY(0);}
        60% {transform: translateY(calc(-0.2 * 20px));}
        80% {transform: translateY(0);}
        100% {transform: translateY(calc(-0.1 * 20px));}
    }
}

@media (max-width:1024px) and (max-height:600px) {
    img.btn_wrapper, .btn_wrapper img{width: 30px;}
    .topbar{justify-content: flex-start;gap: 30px;}
    .score_board{height: 40px;}
    .score_board p{font-size: 28px;}
    .score_board img {width: 70px;margin-left: -20px;}
    .timer{height: 40px;max-width: 254px;}
    .timer > img {margin-left: -20px;width: 50px;}
    .progress_bar{height: 20px;}
    .progress_bar::before, .progress_bar::after{height: 8px;}
    .tile{height: 80px;width: 81px;}
   
}

@media (max-width:1023px){
    img.btn_wrapper, .btn_wrapper img{width: 30px;}
    .logo{max-width: 360px;}
    .level_wrapper{gap: 30px;}

    .level_wrapper a{width: 90px;}
    .level_wrapper a.level_done::after{width: 90px;}
    .level_wrapper a:nth-child(odd) {margin-top: 30px;}
    .level_wrapper a.level_done:nth-child(odd) {top: 20px;}

    .topbar{justify-content: flex-start;gap: 30px;}
    .score_board{height: 40px;}
    .score_board p{font-size: 28px;}
    .score_board img {width: 31px;}
    .level4 .score_board img, .level5 .score_board img{width: 35px;}
    .timer{height: 40px;max-width: 234px;}
    .timer > img {margin-left: -20px;width: 50px;}
    .progress_bar{height: 20px;}
    .progress_bar::before, .progress_bar::after{height: 8px;}

    .tile {height: 60px;width: 61px;}
    .game_board .tile-image{height: 33px;}

    .popup p{font-size: 34px;}
    .wood_board {max-width: 490px;}
    .popup .popup_content{max-width: 450px;}
    .popup .popup_content img {width: 80px;}
    .popup .popup_content .apple_img{right: -10px;bottom: -50px;width: 140px;}
    @keyframes bounce {
        0% {transform: translateY(0);}
        20% {transform: translateY(calc(-0.3 * 20px));}
        40% {transform: translateY(0);}
        60% {transform: translateY(calc(-0.2 * 20px));}
        80% {transform: translateY(0);}
        100% {transform: translateY(calc(-0.1 * 20px));}
    }

}

@media screen and (max-width:767px){
    .logo{max-width: 310px;margin: 0 auto;}
    .level5 .topbar{flex-flow: column;gap: 10px;}
    
}

@media (max-width:767px){
    .level_wrapper {margin-top: 70px;gap: 10px 50px;align-content: center;}
    .tile {height: 50px;width: 51px;}
    .game_board .tile-image {height: 32px;}
    .btn_wrapper{top: 25px;}
    .level3 .game_wrapper,.level4 .game_wrapper,.level5 .game_wrapper{height: 85%;}
    .popup_wrapper{padding: 20px;}
    .popup p {font-size: 22px;padding: 0 20px;margin-bottom: 10px;}
    .popup .popup_content{width: 74%;}
    .popup .popup_content img {width: 50px;}
    .popup .popup_content .apple_img {right: 10px;bottom: -20px;width: 80px;}
    .wood_board {width: 290px;}
    
}
@media screen and (max-width: 767px) and (orientation: landscape){
    .main{overflow: hidden;}
    .level_wrapper{margin-top: 50px;gap: 10px 20px;}
}
@media (max-width:500px){
    .level_wrapper{margin-top: 100px;}
    .level3 .topbar,.level4 .topbar{flex-flow: column;gap: 10px;}
    .score_board{align-self: flex-start;height: 30px;}
    .timer{align-self: flex-start;margin-left: 10px;margin-top: 3px;height: 30px;}
    .timer > img {margin-left: -10px;width: 45px;}
}

.portrait .game_board, .portrait .popup, .portrait .btn_wrapper,.portrait .topbar {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;font-family: "Public Sans", sans-serif;}
.block {position: absolute; top: 0; left: 0; width: 100%;height: 100%; background-size: cover;display: none; transition: background-color 0.3s ease;}
.ice-block {background-image: url(../images/match-three/ice-cube.png);opacity: 0.8;}
.chain-block {background-image: url(../images/match-three/chain-cube.png);}
.break {position: absolute; top: 0; left: 0; width: 100%;height: 100%; background-size: cover;display: none; transition: background-color 0.3s ease;}