/*================================= 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: "Public Sans", sans-serif;
}

/*================================= 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: var(--primary_color) !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/jigsaw-puzzle/main-bg.jpg");background-repeat: no-repeat;background-size: cover;background-position: center 60%;height: 100vh;padding: 60px;display: flex;justify-content: space-evenly;position: relative;overflow: auto;flex-flow: column;}
/* .front_leaf{position: absolute;width: 100%;height: 100%;pointer-events: none;} */
.front_leaf{position: fixed;width: 100%;height: 100%;pointer-events: none;background-image: url(../images/jigsaw-puzzle/front-leaf.svg);background-size: cover;left: 0;top: 0;z-index: 99;filter: hue-rotate(8deg) contrast(1.3) brightness(0.9);}

.main::-webkit-scrollbar {display: none;}

.home_volume{position: absolute;top: 30px;left: 30px;cursor: pointer;}

.logo{display: block;margin: 0 auto;width: 600px;position: absolute;top: 10%;right: 0;left: 0;}
.puzzle{width: 100%;max-width: 760px;cursor: pointer;position: absolute;right: 0;left: 0;bottom: 10%;margin: 0 auto;}
.container{width: 100%;height: 100vh;left: 0;top: 0;padding: 60px;position: fixed;overflow-y: auto;background-image: url(../images/jigsaw-puzzle/inner-page-bg.jpg);background-size: cover;background-repeat: no-repeat;}
.container .home_btn{position: fixed;top: 35px;left: 35px;cursor: pointer;z-index: 1;}
.container .home_btn:active {transform: skewY(5deg) scale(1.2);}

.object_list{display: flex;gap: 60px;align-items: center;flex-wrap: wrap;justify-content: center;}
.object_item{border-radius: 20px;position: relative;transition: all 0.5s ease;background-color: #fff;padding: 6px;flex: 0 0 auto;max-width: 330px;box-shadow: 4px 2px 3px rgba(0, 0, 0, 0.21);}
.object_item.unlocked img{filter: grayscale(0); cursor: pointer;}
.object_item::after{content: '';position: absolute;width: calc(100% - 20px);height: calc(100% - 20px);border-radius: 20px;border: 5px groove #1088f7;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.31);left: 5px;top: 5px;background-color: transparent;pointer-events: none;}
.object_item img{filter: grayscale(1);border-radius: 20px;}
.object_item:hover{transform: skewY(5deg) scale(0.9);}
.object_item.selected::before{content: '';position: absolute;background-image: url(../images/jigsaw-puzzle/puzzle-piece.png);background-size: cover;background-repeat: no-repeat;top: -20px;right: -20px;z-index: 9;width: 100%;max-width: 75px;height: 105px;pointer-events: none;}


.home_volume:active, .btn_wrapper img:active {transform: skewY(5deg) scale(1.2);}

#childContainer{background-image: url(../images/jigsaw-puzzle/inner-page-bg.jpg);}

.puzzle_wrapper{width: 100%;padding: 30px;position: relative;display: flex;align-items: center;gap: 20px;height: -webkit-fill-available;z-index: 1;}

.game_base{width: 666px;flex: 0 1 auto;overflow: hidden;position: relative;box-shadow: 15px 6px 21px rgba(0, 0, 0, 0.45);}
.game_base img{opacity: 0.4;}
.btn_wrapper{position: absolute;z-index: 9;display: flex;flex-flow: column;left: 30px;gap: 10px;top: 50%;transform: translateY(-50%);}
.btn_wrapper img{cursor: pointer;}
.puzzle_pieces {position: relative;width: 44vw;height: 60vh;float: right;flex: 1 1 auto;pointer-events: none;}
.piece {position: absolute;max-width: 100px;max-height: 100px;}
.puzzle-piece{box-shadow: 10px 6px 18px rgba(0, 0, 0, 0.34);}

.popup{position: fixed;width: 100%;height: 100vh;top: 0;left: 0;right: 0;margin: 0 auto;display: flex;align-items: center;justify-content: center;z-index: 99;opacity: 1;transition: all 0.5s ease;clear: both;}
.flyies{height: 100vh;opacity: 0.7;width: 100%;filter: hue-rotate(145deg) brightness(0.2);}
.popup_wrapper{position: absolute;text-align: center;}
.popup_wrapper img{margin: 0 auto;display: block;}
.popup_wrapper img:first-child{width: 470px;z-index: 1;position: relative;animation: popout 0.7s linear 0.5s;}
.popup_wrapper img:nth-child(2){width: 100px;cursor: pointer;position: relative;height: auto;left: 0;top: 0;}
.puzzle-box {width: 150px;height: 150px;border: 1px solid #878787;position: absolute;cursor: pointer;}
#childContainer{display: none;overflow: hidden;}
#middle_page{display: none;}

@keyframes popout {
    0%{transform: scale(1);}
    40%, 50%{transform: scale(1.2);}
    90%, 100%{transform: scale(1);}
}
@media (min-width:1920px) {
    .logo{width: 740px;top: 17%;}
    .puzzle{max-width: 1100px;margin-bottom: -50px;}
    .popup_wrapper img:first-child{width: 570px;}
    .popup_wrapper img:nth-child(2){width: 150px;}
}

@media (max-width:1580px){
    .btn_wrapper{left: 35px;}
    .logo{top: 25%;}
}

@media (max-width:1280px){
    .object_list{gap: 30px;}
    .logo{z-index: 99;top: 16%;}
    .puzzle_wrapper{overflow: hidden;}
}
@media (min-width:1024px) and (max-width:1279px){
    .main{background-position: 80% 60%;}
}

@media (max-width:1023px){
    .main{padding: 15px;}
    .home_volume{height: 35px;width: 35px;}
    .object_list{gap: 30px;}
    .btn_wrapper{left: 7px;}
    .btn_wrapper img{width: 35px;height: 35px;}
    .popup_wrapper img:first-child{width: 250px;}
    .popup_wrapper img:nth-child(2){width: 60px;}
    .puzzle_wrapper{position: absolute;height: 95%;left: 0;width: 95%;right: 0;margin: 0 auto;}
    .container .home_btn{left: 20px;top: 20px;width: 35px;height: 35px;}

}
@media (max-width:767px){
    .logo {max-width: 260px;}
    .object_list{gap: 15px;}
    .object_item{max-width: 220px;}
    .object_item.selected::before{max-width: 55px;height: 76px;}

    .popup_wrapper img:first-child{width: 250px;}
    .popup_wrapper img:nth-child(2){width: 40px;}

    .container .home_btn{left: 15px;top: 15px;}
    
}
@media (max-width: 1023px) and (orientation:landscape){
    .logo{max-width: 280px;top: 16%;}
    .puzzle{max-width: 470px;bottom: 4%;}
}
@media (max-width: 1023px) and (orientation:portrait){
    .logo{max-width: 600px;top: 23%;}
    .puzzle{max-width: 700px;bottom: 20%;}
}

@media (max-width: 767px) and (orientation:landscape){
    .puzzle{max-width: 390px;}
}
@media (max-width: 767px) and (orientation:portrait){
    .main{background-position: 60% 100%;}
    .front_leaf{background-position: 90%;}
    .logo{max-width: 260px;top: 29%;}
    .puzzle{max-width: 300px;bottom: 20%;}
}

@media (max-width:882px) and (max-height:344px){
    .puzzle {max-width: 330px;}
}
@media (width:1024px) and (height:600px){
    .logo{max-width: 350px;}
    .puzzle {max-width: 540px;bottom: 10%;}
}
.portrait .puzzle_wrapper {display: none;}
.landscape .puzzle_wrapper {display: flex;}
.portrait .btn_wrapper{z-index: -1;}
.rotate-message {display: none;}
.landscape .rotate-message {display: none;}
.hide {display: none;}
.portrait .rotate-message {display: block;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";}