/*================================= 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: 'Super-Cottage';
    src: url("../fonts/Super-Cottage.woff") format('woff');
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Super-Cottage';
}

/*================================= 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;}
canvas {
    height: calc(var(--vh, 1vh) * 100);
  }
.main{background-image: url(../images/find-the-object/main-bg.svg);background-repeat: no-repeat;background-size: cover;background-position: left bottom;height: 100vh;overflow: hidden;}

.globe_wrapper{max-width: 800px;margin: 0 auto;position: fixed;height: 60vh;left: 0;right: 0;bottom: 0;cursor: pointer;}
.globe{animation: swayRotate 15s ease-in-out infinite;z-index: 1;position: relative;}
.globe_cloud, .globe_plane, .globe_wave{position: absolute;top: 0;z-index: 1;left: 0;right: 0;margin: 0 auto;width: 100%;}
.globe_wave{mix-blend-mode: soft-light;animation: swayRotate 15s ease-in-out infinite;}
.globe_cloud{animation: swayRotate 20s ease-in-out infinite;z-index: 0;}
.globe_plane{animation-delay: 2s;animation: planeRotate 20s ease-in-out infinite;}
@keyframes planeRotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
@keyframes swayRotate {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(0deg);}
}

.container{width: 100%;height: 100vh;left: 0;top: 0;padding: 60px;position: fixed;overflow-y: auto;background-image: url(../images/find-the-object/middle-page-bg.png);background-size: cover;background-repeat: no-repeat;background-position: bottom center;}

.header{position: fixed;width: 100%;display: flex;justify-content: space-between;top: 0;z-index: 99;left: 0;}
#middle_page .back{margin: 20px;cursor: pointer;width: 61px;}

.score_wrapper{margin: 20px;position: relative;display: flex;align-items: center;}
.score{font-size: 36px;color: #FFDF80;font-weight: 700;position: absolute;top: 50%;right: 14px;transform: translateY(-50%);}

.logo {display: block;margin: 40px auto 0;max-width: 400px;}
.object_list{display: flex;flex-wrap: wrap;gap: 40px;justify-content: center;height: 100%;align-content: center;}
.object_item {width: 25vw;position: relative;cursor: pointer;text-align: center;height: auto;}

.object_item::before{content: '';position: absolute;top: -20px;right: 20px;z-index: 1;background-image: url(../images/find-the-object/star.png);background-size: contain;background-repeat: no-repeat;height: 70px;width: 150px;}
.object_item.object_item.fill-star::before{background-image: url(../images/find-the-object/fill-star.png);}
.object_item.unlocked .star{width: 150px;top: -40px;right: -40px;}

.object_item img{border-radius: 80px;transform: scale(0.8, 0.9);filter: grayscale(1);height: auto;object-fit: cover;width: 100%;}
.object_item.unlocked img{filter: grayscale(0);}
.object_item::after{content: '';position: absolute;height: 100%;width: 100%;background-image: url(../images/find-the-object/frame.png);background-repeat: no-repeat;background-size: contain;left: 0;top: 50%;transform: translateY(-50%);pointer-events: none;background-position: center;}

.object_item:hover {animation-name: wobble-top;animation-duration: 1s;animation-timing-function: ease-in-out;animation-iteration-count: 1;}

@keyframes wobble-top {
	16.65% {transform: skew(-5deg);}
	33.3% {transform: skew(4deg);}
	49.95% {transform: skew(-3deg);}
	66.6% {transform: skew(2deg);}
	83.25% {transform: skew(-1deg);}
	100% {transform: skew(0);}
}

.game_board{height: 100vh;position: relative;overflow: hidden;}
#childContainer{display: none;}
.game_base{height: 100vh;width: 100%;padding-right: 90px;}

#childContainer .btn_wrapper{position: absolute;background-image: url(../images/find-the-object/btn-base-middle.png);background-repeat: no-repeat;background-size: contain;padding: 40px;top: 0;left: 0;pointer-events: none;}
#childContainer .btn_wrapper img {width: 55px;cursor: pointer;pointer-events: all;}
#childContainer .btn_wrapper .back {-webkit-transform: translate3d(-0.91639px, 43.99997px, 0);transform: translate3d(-0.91639px, 43.99997px, 0);}

.clue_wrapper{position: absolute;right: 0;top: 0;height: 100%;padding: 0 10px 0 20px;display: flex;align-items: center;flex-flow: column;justify-content: center;width: 100px;}
.clue_bg{position: absolute;right: 0;z-index: 0;height: 100%;width: 100%;}
/* fair */
.level1 .clue_bg, #childContainer.level1 .btn_wrapper{filter: hue-rotate(153deg);}
/* city */
.level2 .clue_bg, #childContainer.level2 .btn_wrapper{filter: hue-rotate(0deg) grayscale(0.7);}
/* space */
.level3 .clue_bg, #childContainer.level3 .btn_wrapper{filter: hue-rotate(31deg);}
/* room */
.level5 .clue_bg, #childContainer.level5 .btn_wrapper{filter: hue-rotate(185deg);}

.clue_list{display: flex;flex-flow: column;z-index: 1;position: relative;justify-content: flex-start;gap: 30px;height: 70%;overflow-y: auto;}
.clue_list::-webkit-scrollbar{display: none;}
.clue_list img{width: 80px;border-radius: 50%;border: 2px solid #FFDF80;}
.clue_wrapper button{z-index: 1;background-color: transparent;border: none;margin: 5px;}
.up_arrow{transform: rotate(180deg);}


.btn_wrapper .home_volume {-webkit-transform: translate3d(-8.0534px, -10.52414px, 0);transform: translate3d(-8.0534px, -10.52414px, 0);}
.btn_wrapper .back {-webkit-transform: translate3d(-5.91639px, 49.99997px, 0);transform: translate3d(-5.91639px, 49.99997px, 0);}

.star_popup{position: absolute;top: 0;left: 0;height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;transition: all 0.5s ease;z-index: 2;flex-flow: column;visibility: hidden;opacity: 0;}
.star_popup::after{content: '';position: absolute;height: 100%;width: 100%;z-index: 2;background-color: hsla(0, 0%, 0%, 0.7);}
.star_popup > img{z-index: 3;width: 415px;;}
.star_popup div{z-index: 3;display: flex;justify-content: space-between;gap: 10px;position: relative;bottom: 40px;}
.star_popup div img{cursor: pointer;}
.star_popup.show_popup{visibility: visible;opacity: 1;}
.star_popup .next{transform: rotate(180deg);}


@media (min-width:1920px){
    .logo {margin: 40px auto 0;max-width: 550px;}
    .globe_wrapper{max-width: 1000px;bottom: -40px;}

    .object_item{width: 27vw;}
    .object_item::before{height: 80px;width: 180px;right: 40px;}
    .star_popup > img{width: 495px;}
    .star_popup div{gap: 20px;}
    .star_popup div img{width: 80px;}
}

@media (max-width:1280px){
    .logo{max-width: 370px;}
    .star_popup div img{width: 70px;}
    
}
@media (min-width:1024px) and (max-width:1440px){
    .globe_wrapper{transform: scale(1.3);bottom: -150px;}
    .logo{margin-top: 60px;}

    .object_item{width: 30vw;}
    #childContainer .btn_wrapper{padding: 30px;}
    #childContainer .btn_wrapper img {width: 40px;}
    #childContainer .btn_wrapper .back {-webkit-transform: translate3d(0.08361px, 36.99997px, 0);transform: translate3d(0.08361px, 36.99997px, 0);}
    #childContainer .btn_wrapper .home_volume {-webkit-transform: translate3d(-1.0534px, -10.52414px, 0);transform: translate3d(-1.0534px, -10.52414px, 0);}
}
@media (max-width:1023px){
    .logo{max-width: 320px;}

    .container{padding: 80px 30px;}

    .score_wrapper img{width: 160px;}
    .score{font-size: 30px;}
   
    .clue_list{overflow-y: auto;justify-content: flex-start;gap: 15px;}
    
    .star_popup > img {width: 315px;}
    .star_popup div{bottom: 30px;}
    .star_popup div img{width: 65px;}
    .clue_list img{width: 60px;}
    .btn_wrapper .back {-webkit-transform: translate3d(2.08361px, 51.99997px, 0);transform: translate3d(2.08361px, 51.99997px, 0);}
    .btn_wrapper .home_volume {-webkit-transform: translate3d(-7.0534px, -12.52414px, 0);transform: translate3d(-7.0534px, -12.52414px, 0);}

    .clue_wrapper{width: 90px;}

    .object_item::before{height: 50px;width: 110px;top: -10px;}

    
}
@media (max-width: 1023px) and (orientation:landscape){
    .globe_wrapper{bottom: -50px;width: 70%;}
    .logo {max-width: 330px;margin-top: 10px;}
    .object_list{height: auto;}

    #middle_page .back{width: 41px;}
    .btn_wrapper .home_volume {-webkit-transform: translate3d(-4.0534px, -2.52414px, 0);transform: translate3d(-4.0534px, -2.52414px, 0);}
    .btn_wrapper .back {-webkit-transform: translate3d(0.08361px, 38.99997px, 0);transform: translate3d(0.08361px, 38.99997px, 0);}
    .object_list{align-content: flex-start;}
    .object_item{width: 33vw;}
    #childContainer .btn_wrapper{padding: 25px;}
    #childContainer .btn_wrapper img{width: 40px;}
    #childContainer .btn_wrapper .home_volume {-webkit-transform: translate3d(-11.0534px, -6.52414px, 0);transform: translate3d(-11.0534px, -6.52414px, 0);}
    #childContainer .btn_wrapper .back {-webkit-transform: translate3d(-3.91639px, 24.99997px, 0);transform: translate3d(-3.91639px, 24.99997px, 0);}

}
@media (max-width: 1023px) and (orientation:portrait){
    .globe_wrapper{bottom: -120px;transform: scale(1.5);}
    .logo {max-width: 450px;margin-top: 90px;}

    .object_item{width: 40vw;}
}
@media (max-width:767px){
    .globe_wrapper{transform: scale(1.6);bottom: -160px;}

    .object_list{align-content: flex-start;height: auto;}
    .object_item{width: 35vw;}

    #middle_page .back{width: 35px;}
    .btn_wrapper .back {-webkit-transform: translate3d(10.08361px, 36.99997px, 0);transform: translate3d(10.08361px, 36.99997px, 0);}
    .btn_wrapper .home_volume {-webkit-transform: translate3d(6.9466px, 4.47586px, 0);transform: translate3d(6.9466px, 4.47586px, 0);}
    .score_wrapper img {width: 110px;}
    .score {font-size: 18px;}

    .logo {max-width: 260px;}
    
    .star_popup div{bottom: 20px;}
    .star_popup div img{width: 45px;}
    .star_popup > img {width: 295px;}
    .object_item::before{top: -14px;width: 95px;}
}
@media (max-width: 767px) and (orientation:landscape){
    .logo{margin-top: 10px;}
    .globe_wrapper{ width: 60%;bottom: -120px;}

    #childContainer .btn_wrapper{padding: 10px;}
    #childContainer .btn_wrapper img {width: 25px;}
    #childContainer .btn_wrapper .home_volume {-webkit-transform: translate3d(-8.0534px, -5.52414px, 0);transform: translate3d(-8.0534px, -5.52414px, 0);}
    #childContainer .btn_wrapper .back {-webkit-transform: translate3d(0.08361px, 17.99997px, 0);transform: translate3d(0.08361px, 17.99997px, 0);}
}

@media (max-width: 767px) and (orientation:portrait){
    .logo{margin-top: 70px;}
    .object_item{width: 80vw;}
}
@media (width:344px) and (height:882px){
    .globe_wrapper {transform: scale(1.9);bottom: -260px;}
}
@media (width:882px) and (height:344px){
    .logo{max-width: 240px;}
    .globe_wrapper {bottom: -30px;}
}
.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 .btn_wrapper,.portrait #gameCanvas, .portrait .clue_wrapper{display: none;}
#middle_page{display: none;}

.marker.animate {animation: pulse 1s infinite;background: rgba(0, 0, 0, 0.3);border: 2px solid black;box-sizing: border-box;border-radius: 50%;}
  
@keyframes pulse {0% {transform: scale(1);opacity: 0.8;}50% {transform: scale(1.4);opacity: 0.4;}100% {transform: scale(1);opacity: 0.8;}}