@font-face {font-family: 'gothamregular';src: url('fonts/gotham_r.woff2') format('woff2'),url('fonts/gotham_r.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'gotham_boldregular';src: url('fonts/gotham-b.woff2') format('woff2'),url('fonts/gotham-b.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'gothammedium';src: url('fonts/gotham-m.woff2') format('woff2'),url('fonts/gotham-m.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'typewriter';src: url('fonts/AA_typewriter.woff') format('woff2'),url('fonts/AA_typewriter.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;}
@font-face {font-family: 'french';src: url('fonts/1906-French-News-Caps-W00-Bold.woff') format('woff2'),url('fonts/1906-French-News-Caps-W00-Bold.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;}



/* Start */
.game-hint span{display: block!important;}

body{font-family: 'french';}
#quitBtn{position: fixed; top: 0; left: 20px;}
.game09{margin:0;padding:0;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;position:relative}
#intro{background: url(./games/img/play-screen.jpg);}
.heading_s1 {text-align: center; color: #37704f; font-family: 'gothammedium';}
.heading_s2{text-transform:none;font-size:24px;color:#b14823;font-family: 'typewriter';font-weight: normal;}
.game09 h1{font-size:26px;gap:10px;text-align:center;display:flex;margin:0px 0;color:#15723e; flex-wrap: wrap;font-family: 'french';}
.game09 h1 .letter{opacity:0;transform:translateY(-20px);transition:opacity .9s ease-out,transform .8s ease-out;display:inline-block}
.game09 h1 .letter.visible{opacity:1;transform:translateY(0)}
.game-hint{display:block;position:absolute;top:22px;width:fit-content;margin:auto;right:10px}
.game-hint button{font-size:0px;position:relative;background:0 0;width:15px;height:15px;border:none;cursor:pointer; display: none!important;}
.game-hint button::after{content:'\f0eb';position:absolute;width:15px;height:15px;font-size:30px;font-family:'Font Awesome 6 Free';color:#8f4f20; display: none;}
.game-hint span{color:brown;text-align:center;padding:5px 10px;  font-family: 'typewriter';}
.hidden{display:none!important}
#loading{position:absolute}
.game-wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center; background: url(./games/img/h1.jpg); background-repeat: no-repeat;background-size: cover;}
.download-earth{margin-top:20px;padding:8px 15px;font-size:12px;background:linear-gradient(135deg,#6f3213,#a65c34);color:#fff;border:none;border-radius:50px;cursor:pointer;position:relative;overflow:hidden;transition:background .3s ease}
.download-earth::before{content:"";position:absolute;left:-100%;top:0;height:100%;width:100%;background:rgba(255,255,255,.2);transform:skewX(-20deg);transition:left .4s ease}
.download-earth:hover::before{left:100%}
.download-earth:hover{background:linear-gradient(135deg,#8d4020,#6f3213)}
.loader{border:6px solid green;border-radius:0;width:60px;height:60px;animation:spin 2s linear infinite}
@keyframes spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
button.play-btn{background:0 0;border:none;padding:0 30px;font-size:18px;cursor:pointer;border-radius:8px;cursor:pointer}
.play-btn img{width:70px;height:70px;pointer-events:none;animation:zoomInOut 3.5s ease-in-out infinite;  object-fit: contain;}
@keyframes zoomInOut{
0%,100%{transform:scale(1)}
50%{transform:scale(1.1)}
}
.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.75);display:flex;justify-content:center;align-items:center;z-index:2000}
.modal-content{background:#222;padding:20px 30px;border-radius:8px;text-align:center}
.modal-buttons button{margin:10px;padding:10px 20px;border:none;background:#0f0;color:#000;cursor:pointer;font-size:16px;border-radius:6px}
#thankyou h1{font-size:30px;letter-spacing:normal}
/* Start */


/* Number */
.level1{margin:0;display:flex;justify-content:center;align-items:center;height:100vh}
.game-container{width:90%;display:flex;justify-content:center;align-items:center;height:100vh}
.numbers{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:150px;font-weight:800;color:#000;padding:20px 0;background:0 0;z-index:9}
.number{user-select:none;line-height:.6;transition:transform .2s ease;outline:0;background-color:transparent!important;color:brown;-webkit-user-drag:element}




.number:active{transform:scale(1.1)}
.number:hover{transform:scale(1.05)}
.slots{display:flex;flex-direction:column;gap:10px;width:6%;margin:0 100px;padding:10px;z-index:1}

.slot{font-size:30px;text-align:center;display:flex;align-items:center;justify-content:center;color:brown;transition:all .3s ease-in-out;height:90px;width: 90px;background-repeat: no-repeat; background-size: contain; background-position: center;position: relative;margin: 5px 0;}
.slot:hover{scale:1.1}
.progress{position:absolute;top:0;left:0;height:0%;width:100%;background:url(./games/img/bg.jpg);z-index:0;transition: all 0.5s ease-in-out;background-repeat: no-repeat; background-size: cover; background-position: center top;}
.number.dragging,.number.touching{background-color:#0cf;color:#000;opacity:.8}
.slot img{position: absolute;margin: auto;inset: 0;}
.slots .slot:nth-child(4) img{  left: -34px;}


/* Number */

/* Circle */
.circle09{margin:0;padding:0;background:#fff;overflow:hidden;height:100vh;display:flex;align-items:center;justify-content:center;position:relative}
.MainCircle{width:150px;height:150px;background:url(./games/img/l2/2.png) no-repeat center;background-size: cover;border-radius:100px;display:flex;align-items:center;justify-content:center;position:relative;z-index:3}
.circleBg{width:100px;height:100px;background:url(./games/img/l2/1.png) no-repeat center;background-size: cover;border-radius:50%;position:relative;transition:opacity .3s ease;z-index:4}
.expandCircle{position:fixed;background:url(./games/img/l2/3.png) no-repeat center;background-size: contain;border-radius:50%;width:100px;height:100px;transform:translate(-50%,-50%) scale(0);z-index:1;transition:transform 1s ease-out,width 1s ease-out,height 1s ease-out;pointer-events:none}
/* Circle */

/* Battery */
.battery09{margin:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background: url(./games/img/h1.jpg) no-repeat center; background-size: cover;}
.battery-container{position:relative;width:179px;height:341px;display:flex;flex-direction:column-reverse;justify-content:flex-start;align-items:center;box-sizing:border-box;background-image:url(./games/img/l3/1.png);background-repeat:no-repeat;background-position:center;background-size:contain}
.battery-tip{position:absolute;top:-12px;left:35%;width:30%;height:10px;background:#000;border-radius:2px}
.level{width:76%;height:59px;margin:1px 0;background: url(./games/img/bg.jpg) ;opacity:.15;border-radius:12px;transition:opacity .3s ease; background-size: cover;}
.level.filled{opacity:1}
.percentage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;font-weight:700;pointer-events:none}
button{margin-top:20px;padding:10px 20px;background:#0b803c;color:#fff;border:2px solid #00a63f;border-radius:5px;font-size:16px; font-family: 'french';}
button:disabled{opacity:.5;cursor:default}
/* Battery */

/* Duck */
.duck09{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;overflow:hidden;position:relative;margin:0;background:#fff}
.duckMove{position:absolute;top:50%;left:0;transform:translateY(-50%);width:200px;height:auto;transition:left .4s ease,opacity .5s ease;z-index:2}
.duckMove img{width:100%;height:140px;user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;transition:transform .2s ease}
.duckMove:hover img{transform:scale(1.1)}
.green-fill{position:absolute;top:0;left:0;height:100%;width:0;background:url(./games/img/bg2.jpg) ;transition:width .4s ease;z-index:1; background-size: cover; background-position: center right;}
/* Duck */

/* Leaf */
.leaf{margin:0;overflow:hidden;background: url(./games/img/bg.jpg) no-repeat center; background-size: cover;}
.leafMain{position:relative;width:100vw;height:100vh;margin:0 auto}
.leafMain a{position:absolute;display:block}
.main-img{width:100%;height:100%;object-fit:contain;transition:opacity .4s ease;transform:rotate(25deg)}
.dissolve-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}
.hinge{animation:hingeFall 1s ease-in-out forwards;transform-origin:top center;pointer-events:none}
@keyframes hingeFall{
0%{transform:rotate(0);opacity:1}
20%{transform:rotate(0)}
40%{transform:rotate(-5deg)}
60%{transform:rotate(15deg)}
80%{transform:rotate(10deg) translateY(0)}
100%{transform:rotate(20deg) translateY(1000px);opacity:1}
}
@keyframes shake{
0%,100%{transform:translateX(0)}
25%{transform:translateX(5px)}
50%{transform:translateX(5px)}
75%{transform:translateX(-5px)}
}
.shake{animation:shake .1s}
.fade-dissolve{animation:fadeIn 1s forwards}
@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}
.leafMain a:first-child{top:5vh;left:40vw;width:140px;}
.leafMain a:nth-child(2){top:14vh;left:15vw;  width: 170px;}
.leafMain a:nth-child(3){top:30vh;left:65vw;width:119px;}
.leafMain a:nth-child(4){top:35vh;left:38vw;width:120px;}
.leafMain a:nth-child(5){top:60vh;left:15vw;width:125px;}
.leafMain a:nth-child(6){top:45vh;left:68vw;width:188px;}
.leafMain a:nth-child(7){top:65vh;left:38vw; width: 130px;}
/* Leaf */


@media screen and (max-width: 768px) {
.heading_s2{font-size: 10px;}    
.game09 h1{gap: 16px;font-size: 19px;}

.slot{width: 80px;height: 80px;}
.game-hint{top: 45px;right: 0px;font-size:11px;}
button.play-btn{padding:15px 0;}

.MainCircle{width: 70px;height: 70px;}
.circleBg{width: 40px;height: 40px;}
.duckMove img{height: 100px;object-fit: contain;}

.leafMain a:first-child {top: 16%;left: 0;width: 95px;height: auto;right: 0;}
.leafMain a:nth-child(2) {top: 25%;left: 0;width: 121px;}
.leafMain a:nth-child(3) {top: 29%;left: inherit;width: 119px;height: auto;right: 0;}
.leafMain a:nth-child(4) {top: 44%;left: 33%;width: 94px;height: auto;}
.leafMain a:nth-child(5) {top: 63%;left: 4%;width: 114px;height: auto;}
.leafMain a:nth-child(6) {top: 55%;left: inherit;width: 111px;height: auto;right: 7%;}
.leafMain a:nth-child(7) {top: 74%;left: 18%;right: 0;margin: auto;width: 114px;}

.leafMain a{margin: auto;}
#thankyou h1{font-size: 15px;}

#quitBtn{left: inherit!important;right: 15px!important;  top: -20px;z-index: 2;}


}