/*================================= 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: Bahnshrift;
    src: url(../fonts/BAHNSCHRIFT.woff);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Bahnshrift;
}

/*================================= 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{height: 100vh;padding: 60px;position: relative;overflow: auto;}
.main_bg{background-image: url("../images/word-search//game_main_bg.jpg");background-repeat: no-repeat;background-size: cover;background-position: left top;display: flex;flex-flow: column;justify-content: center;}
.container{height: 100%;overflow: hidden;max-width: 1630px;margin-right: auto;margin-left: auto;}
.main::-webkit-scrollbar {display: none;}

.btn_wrapper{position: absolute;left: 30px;top: 30px;z-index: 99;}
.btn_wrapper img{width: 50px;cursor: pointer;margin-right: 10px;}

.logo{max-width: 600px;display: block;margin: 0 auto 20px;width: 100%;}
.level_wrapper{max-width: 1200px;display: flex;gap: 30px;flex-wrap: wrap;justify-content: center;margin: 60px auto;width: 100%;}
.level_wrapper li{background-image: url("../images/word-search/level_base.png");background-repeat: no-repeat;background-size: contain;max-width: 120px;background-position: bottom;text-align: center;flex: 1 1 25%;cursor: pointer;}
.level_wrapper li img{width: 100px;animation: ding-dong 25s linear infinite;}
.level_wrapper li img.level_lock{opacity: 0.2;}
.level_wrapper li:nth-child(even){transform: translateY(-20px);}

.game_bg{background-image: url("../images/word-search/game_bg.jpg");background-repeat: no-repeat;background-position: bottom left;background-size: cover;height: 100vh;padding: 60px;position: relative;overflow: auto;}
.game_board{max-width: 800px;position: relative;margin: 0 auto;z-index: 1;display: grid;align-items: center;padding: 40px;}
#leveltitle{font-size: 30px;font-weight: 700;text-align: center;color: #648d9e;margin: 20px auto;position: absolute;right: 0;left: 0;top: -10px;}
.board_img{position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;width: 100%;z-index: -1;height: 100%;}
.letter_wrapper{display: grid;grid-template-columns: repeat(10, 1fr);grid-template-rows: repeat(10, 1fr);justify-content: center;column-gap: 20px;width: 80%;margin: 0 auto;row-gap: 6px;padding: 10px;}

.letter_wrapper li{display: inline-block;text-align: center;color: #022737;font-size: 35px;font-weight: 700;text-transform: uppercase;padding: 5px;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;justify-self: center;cursor: pointer;}


.board_pipe{position: absolute;bottom: 0;right: 0;left: 0;margin: 0 auto;}

.word_footer{background-image: url("../images/word-search/footer_bg.png");background-repeat: repeat-x;position: fixed;bottom: 0;left: 0;right: 0;width: 100%;z-index: 99;}
.word_wrapper{color: #fff;display: flex;gap: 30px;font-size: 30px;flex-wrap: nowrap;overflow-x: auto;margin: 0 auto;max-width: 1300px;text-transform: uppercase;padding: 60px 40px 20px;margin-bottom: 6px;}
.word_wrapper.dragging{cursor: grabbing;}
.word_wrapper::-webkit-scrollbar {height: 8px;}
.word_wrapper::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);}
.word_wrapper::-webkit-scrollbar-thumb {background-color: #aad44d;outline: 1px solid #aad44d;}

.panda_top{position: absolute;top: 0;right: 80px;z-index: 999; animation: pandaMove 10s infinite ease-in; }
@keyframes pandaMove {0% { top: 0; }20% { top: 50px; }50% { top: 300px; }70% { top: 200px; }90% { top: 100px; }100% { top: 0; }}

.footer_panda{position: absolute;bottom: 70px;animation: movingX 8s linear infinite;}
@-webkit-keyframes movingX{0%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(50px);transform:translateX(50px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes movingX{0%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(50px);transform:translateX(50px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
@-webkit-keyframes ding-dong{0%{-webkit-transform:translateX(0) rotateY(0deg);transform:translateX(0) rotateY(0deg)}5%{-webkit-transform:rotateZ(5.3deg);transform:rotate(5.3deg)}10%{-webkit-transform:rotateZ(7.8deg);transform:rotate(7.8deg)}15%{-webkit-transform:rotateZ(7deg);transform:rotate(7deg)}20%{-webkit-transform:rotateZ(3.9deg);transform:rotate(3.9deg)}25%{-webkit-transform:rotateZ(0);transform:rotate(0)}30%{-webkit-transform:rotateZ(-3.2deg);transform:rotate(-3.2deg)}35%{-webkit-transform:rotateZ(-4.7deg);transform:rotate(-4.7deg)}40%{-webkit-transform:rotate(-4.3deg);transform:rotate(-4.3deg)}45%{-webkit-transform:rotateZ(-2.4deg);transform:rotate(-2.4deg)}50%{-webkit-transform:rotateZ(0);transform:rotate(0)}55%{-webkit-transform:rotateZ(2deg);transform:rotate(2deg)}60%{-webkit-transform:rotateZ(2.9deg);transform:rotate(2.9deg)}65%{-webkit-transform:rotateZ(2.6deg);transform:rotate(2.6deg)}70%{-webkit-transform:rotateZ(1.4deg);transform:rotate(1.4deg)}75%{-webkit-transform:rotateZ(0);transform:rotate(0)}80%{-webkit-transform:rotateZ(-1.2deg);transform:rotate(-1.2deg)}85%{-webkit-transform:rotateZ(-1.7deg);transform:rotate(-1.7deg)}90%{-webkit-transform:rotateZ(-1.6deg);transform:rotate(-1.6deg)}95%{-webkit-transform:rotateZ(-0.9deg);transform:rotate(-0.9deg)}100%{-webkit-transform:translateX(0) rotateY(180deg);transform:translateX(0) rotateY(180deg)}}
@keyframes ding-dong{0%{-webkit-transform:translateX(0) rotateY(0deg);transform:translateX(0) rotateY(0deg)}5%{-webkit-transform:rotateZ(5.3deg);transform:rotate(5.3deg)}10%{-webkit-transform:rotateZ(7.8deg);transform:rotate(7.8deg)}15%{-webkit-transform:rotateZ(7deg);transform:rotate(7deg)}20%{-webkit-transform:rotateZ(3.9deg);transform:rotate(3.9deg)}25%{-webkit-transform:rotateZ(0);transform:rotate(0)}30%{-webkit-transform:rotateZ(-3.2deg);transform:rotate(-3.2deg)}35%{-webkit-transform:rotateZ(-4.7deg);transform:rotate(-4.7deg)}40%{-webkit-transform:rotate(-4.3deg);transform:rotate(-4.3deg)}45%{-webkit-transform:rotateZ(-2.4deg);transform:rotate(-2.4deg)}50%{-webkit-transform:rotateZ(0);transform:rotate(0)}55%{-webkit-transform:rotateZ(2deg);transform:rotate(2deg)}60%{-webkit-transform:rotateZ(2.9deg);transform:rotate(2.9deg)}65%{-webkit-transform:rotateZ(2.6deg);transform:rotate(2.6deg)}70%{-webkit-transform:rotateZ(1.4deg);transform:rotate(1.4deg)}75%{-webkit-transform:rotateZ(0);transform:rotate(0)}80%{-webkit-transform:rotateZ(-1.2deg);transform:rotate(-1.2deg)}85%{-webkit-transform:rotateZ(-1.7deg);transform:rotate(-1.7deg)}90%{-webkit-transform:rotateZ(-1.6deg);transform:rotate(-1.6deg)}95%{-webkit-transform:rotateZ(-0.9deg);transform:rotate(-0.9deg)}100%{-webkit-transform:translateX(0) rotateY(180deg);transform:translateX(0) rotateY(180deg)}}

.bamboo{position: absolute;right: -40px;bottom: 70px;}
.time_board{position: absolute;right: 40px;bottom: 74px;}
.time_board img{width: 270px;}
.time_board span{font-size: 60px;font-weight: 700;color: #fff;position: absolute;left: 0;right: 0;top: 20px;text-align: center;text-shadow: 0px 4px 0px rgba(32, 39, 2, 0.56);}
.mobile_panda{display: none;animation: swing 10s infinite ease-in-out;}
@-webkit-keyframes swing{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}25%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}50%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}75%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}}
@keyframes swing{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}25%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}50%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}75%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}}

.active, .selected{color: #9dc741 !important;}
#childContainer{display: none;}

.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: 999;opacity: 1;transition: all 0.5s ease;}
.popup_wrapper{animation: popout 1s ease-in-out 0.3s;}
.popup_wrapper > img{max-width: 650px;}
.popup .popup_content{position: absolute;top: 50%;transform: translateY(-50%);text-align: center;max-width: 500px;left: 0;right: 0;margin: 10px auto;}
.popup p{font-size: 34px;margin-top: 20px;margin-bottom: 30px;line-height: 45px;font-weight: 600;}
.popup .btn_container img:not(:last-child){margin-right: 20px;}
.popup .btn_container img{width: 70px;cursor: pointer;}
@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)}}

#confetti-container-left,
#confetti-container-right {position: fixed;bottom: 0;width: 50%;height: 100%;pointer-events: none;overflow: hidden;z-index: 999;}
#confetti-container-left {left: 0;}
#confetti-container-right {right: 0;}
.confetti {position: absolute;width: 10px;height: 10px;background-color: red;opacity: 0;transform: translateY(0);animation: pop 2s ease-out forwards;}
@keyframes pop {0% {transform: translate(0, 0);opacity: 1;}100% {transform: translate(var(--x-move), var(--y-move));opacity: 0;}}

@media (max-width:1700px){
    .letter_wrapper li{font-size: 28px;}
    .popup_wrapper > img{max-width: 590px;}
}

@media (min-width:1366px) and (min-height: 1024px) {
    .container{padding-top: 100px;}
    .game_board{padding: 60px 110px;max-width:1024px}
    .letter_wrapper{row-gap: 10px;width: 90%;}
    #leveltitle{top: 70px;}
    .level_wrapper{gap: 30px 100px;}
    .level_wrapper li{max-width: 150px;}
    .logo{margin-bottom: 60px;}
}

@media (max-width:1280px) {
    .letter_wrapper li{font-size: 25px;}
    .time_board > img {width: 220px;}
    .time_board span{top: 13px;}
    .bamboo, .panda_top{display: none;}
    .mobile_panda{position: absolute;display: block;bottom: 100px;width: 80px !important;right: 40px;}
}

@media (min-width:768px) and (max-width:1023px){
    .game_bg{padding: 40px;}
    .game_board{padding: 24px;}
    .letter_wrapper{column-gap: 8px;padding: 0;place-items: center;row-gap: 5px;}
    .letter_wrapper li {font-size: 15px;}
    .board_pipe, .bamboo, .panda_top{display: none;}
    .time_board{bottom: 38px;right: 10px;}
    .time_board > img{width: 140px;}
    .time_board span{top: 9px;font-size: 42px;}
    .mobile_panda{bottom: 67px;}
    .footer_panda {width: 100px;bottom: 43px;}
    .word_wrapper{font-size: 18px;gap: 20px;padding: 10px;}
    .word_footer{background-position: bottom;}
    .word_wrapper::-webkit-scrollbar {height: 5px;}
}

@media (max-width:1023px) and (orientation: landscape){
    .logo{max-width: 330px;margin: 20px auto;}
    .main {padding: 0px 20px;}
    .level_wrapper{margin: 20px auto 0;}
    .popup_wrapper > img{max-width: 590px;}
}
@media (max-width:767px){
    .main{padding: 60px 20px;}
    .btn_wrapper{left: 20px;top: 20px;}
    .btn_wrapper img{width: 40px;}
    .level_wrapper{gap: 20px;}
    .level_wrapper li img {width: 60px;}
    .logo{margin: 40px auto;}

    .game_bg{padding: 30px 15px;}
    .game_board{padding: 10px;max-width: 500px;}
    #leveltitle{font-size: 18px;margin: 10px auto;top: 0;}
    .letter_wrapper{padding: 0px;margin-top: 10px;gap: 5px 8px;}
    .letter_wrapper li{font-size: 14px;padding: 3px;}

    .time_board{bottom: 32px;}
    .footer_panda{width: 60px;bottom: 37px;}
    .time_board > img{width: 120px;}
    .time_board span{font-size: 33px;top: 7px;}
    .board_pipe, .bamboo{display: none;}
    .word_wrapper{font-size: 15px;gap: 20px;padding: 8px 10px 5px;}
    .word_footer{background-position: center;}
    .mobile_panda{bottom: 56px;width: 50px !important;}
    .word_wrapper::-webkit-scrollbar {height: 5px;}

    .popup_wrapper > img{max-width: 380px;width: 100%;padding: 10px;}
    .popup .popup_content{max-width: 260px;}
    .popup p{font-size: 16px;line-height: 25px;margin: 10px;}
    .popup .btn_container img{width: 45px;}
    .popup .btn_container img:not(:last-child) {margin-right: 10px;}
}

@media (max-width:480px) and (orientation: portrait){
    #leveltitle{margin-bottom: 10px;}
    .popup .btn_container img {width: 40px;}
}

@media (min-width:1024px) and (max-width:1368px) {
    .main{padding-top: 90px;}
    .game_board{padding: 30px 110px;}
}
@media (width:1024px) and (height:600px) {
    .main{padding-top: 40px;}
    .letter_wrapper li {font-size: 20px;}
}
@media (width:882px) and (height:344px) {
    .game_board {padding: 10px;margin-top: -10px;}
    #leveltitle{font-size: 24px;}
    .letter_wrapper{row-gap: 2px;padding: 0;}
    .letter_wrapper li {font-size: 14px;padding: 2px;}
    .popup_wrapper > img{max-width: 530px;}
}
@media (min-width:1920px) {
    .logo{max-width: 700px;}
    #leveltitle{margin: 30px auto;}
    .letter_wrapper{row-gap: 10px;}
    .level_wrapper{max-width: 1260px;}
    .level_wrapper li {max-width: 180px;}
    .level_wrapper li img{width: 140px;}
}
.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 .container{display: none;}
#words li {user-select: none; cursor: grab;}
#words li.dragging {cursor: grabbing;}