@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Noto Serif Bengali",Roboto,Helvetica,sans-serif;src: url('https://play.bengaliworksheets.com/noto-serif-bengali.woff2') format('woff2');background-color:#FBAB7E;background-image:linear-gradient(62deg,#FBAB7E 0%,#F7CE68 100%);color:#fff;display:flex;flex-direction:column;min-height:100vh;justify-content:center;align-items:center;padding:0}
.header{display:flex;justify-content:space-between;align-items:center;padding:0.5rem;background:#e96443;background:-webkit-linear-gradient(to left,#904e95,#e96443);background:linear-gradient(to left,#904e95,#e96443);width:100%;box-shadow:0 4px 6px rgba(0,0,0,0.1);margin-bottom:0.4rem}
.logo{font-size:1.5rem;font-weight:700;color:#fff} a{text-decoration: none;text-color: #fff;} a:link {color: #fff; text-decoration: none;} a:visited {color: #fff; text-decoration: none;}
.menu-toggle{cursor:pointer}
.menu-toggle img{width:30px;height:30px}
.mute-button{cursor:pointer} .mute-button img{width:30px;height:30px}
.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);z-index:999}
.popup-menu{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:400px;background-color:#1b1b2f;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.9);padding:1rem;z-index:1000;overflow-y:auto;max-height:80vh;text-align:center}
.popup-menu.active{display:block}
.popup-menu .close-button{position:absolute;top:10px;right:10px;font-size:1.5rem;cursor:pointer;color:#fff}
.popup-menu h2{margin-bottom:1rem;font-size:1.5rem}
.popup-menu ul{list-style-type:none;padding:0;margin:0;display:flex;flex-direction:column;align-items:center}
.popup-menu ul li{margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;background:#cb2d3e;background:-webkit-linear-gradient(to top,#ef473a,#cb2d3e);background:linear-gradient(to top,#ef473a,#cb2d3e);border-radius:10px;padding:.5rem 1rem;text-align:center;width:100%;max-width:300px}
.popup-menu ul li img{width:30px;height:30px}
.popup-menu ul li a{text-decoration:none;color:#fff;font-size:1.2rem;font-weight:700}
.popup-menu ul li:hover{background:#f857a6;background:-webkit-linear-gradient(to top,#ff5858,#f857a6);background:linear-gradient(to top,#ff5858,#f857a6)}
.game-container{font-family:"Noto Serif Bengali",Roboto,Helvetica,sans-serif;src: url('https://play.bengaliworksheets.com/noto-serif-bengali.woff2') format('woff2'); display:flex;flex-direction:column;justify-content:center;align-items:center;background:#cb2d3e;background:-webkit-linear-gradient(to top,#ef473a,#cb2d3e);background:linear-gradient(to top,#ef473a,#cb2d3e);padding:10px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.2);width:85%;max-width:400px;transition:opacity .3s ease-out,transform .3s ease-in;}
.question{font-size:2rem;margin-bottom:1rem;text-align:center}
.vertical-problem{text-align:center;margin-bottom:1rem}
.vertical-problem div{font-size:4rem;line-height:4rem}
.vertical-problem div:first-child{margin-bottom:.5rem}
.box{background-color:#e6e6e6;padding:1rem;border-radius:5px;margin-bottom:1.5rem;text-align:center;font-size:1.2rem;color:#333}
.options-container{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.option-button:hover{transform:scale(1.1)}
.feedback{font-size:1.8rem;margin-top:1rem;color:#fff;text-align:center}
h1{font-size:1.5rem;margin-bottom:.3rem;color:#ad2d97} h2{color:#ad2d97}
.more-games{margin-top:2rem;text-align:center}
.more-games h2{font-size:1.5rem;margin-bottom:1rem;color:#ad2d97}
.more-games ul{list-style-type:none;padding:0;margin:0;display:flex;flex-direction:column;align-items:center}
.more-games ul li{margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;background:#cb2d3e;background:-webkit-linear-gradient(to top,#ef473a,#cb2d3e);background:linear-gradient(to top,#ef473a,#cb2d3e);border-radius:10px;padding:.5rem 1rem;text-align:center;width:100%;max-width:300px}
.more-games ul li img{width:30px;height:30px}
.more-games ul li a{text-decoration:none;color:#fff;font-size:1.2rem;font-weight:700}
.more-games ul li:hover{background:#f857a6;background:-webkit-linear-gradient(to top,#ff5858,#f857a6);background:linear-gradient(to top,#ff5858,#f857a6)}
.home-featured-games{padding:20px;margin-top: 20px; border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.2);transition:opacity .3s ease-out,transform .3s ease-in;}.home-featured-games h2{text-align:center;margin-bottom:20px}.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;justify-content:center}.game-item{text-align:center}.game-item img{max-width:100%;height:auto;display:block;margin:0 auto}.game-item p{margin-top:10px;font-size:1rem;color:#ad2d97}
.footer{background:#e96443;background:-webkit-linear-gradient(to left,#904e95,#e96443);background:linear-gradient(to left,#904e95,#e96443);text-align:center;padding:1rem;font-size:.9rem;width:100%;margin-top:20px}
::-webkit-scrollbar{display:none}
@media (max-width: 768px) {
.question{font-size:1.5rem}
.vertical-problem div{font-size:3rem;line-height:3rem}
.option-button{font-size:2rem;width:60px}
.box{font-size:1rem}
.more-games a{font-size:1rem}
.options-container{display:flex;justify-content:center;gap:.3rem;flex-wrap:wrap}
.option-button{width:50px!important;height:50px!important;border:none;background:none;padding:0;display:inline-block;margin:5px;transition:background-color .3s ease,transform .3s ease}
.image-box{width:100%;max-width:400px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.2);overflow:hidden;margin-top:2rem;position:relative;text-align:center}
.image-box a{display:block;height:100%;width:100%}
.image-box img{width:100%;height:250px;display:block}
}
@keyframes shake {
0%{transform:translateX(0)}
25%{transform:translateX(-10px)}
50%{transform:translateX(10px)}
75%{transform:translateX(-10px)}
100%{transform:translateX(0)}
}
.shake{animation:shake .5s ease}
.thumbs-up{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;text-align:center}
.thumbs-up img{width:200px;height:auto;animation:scale-up .5s ease-in-out}
@keyframes scale-up {
0%{transform:scale(0)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}
.shape-image {width: 100px;height: 100px;display: inline-block; padding:5px; border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,0.2);background-color:#a4251a;}
.options-container img {
cursor:pointer
}

.option-button {
width:60px;
height:60px;
border:none;
background:none;
padding:0;
display:inline-block;
margin:5px;
transition:background-color .3s ease,transform .3s ease
}

.shake {
animation:shake .5s
}

@keyframes shake {
0% {
transform:translateX(0)
}

25% {
transform:translateX(-5px)
}

50% {
transform:translateX(5px)
}

75% {
transform:translateX(-5px)
}

100% {
transform:translateX(0)
}
}