/* ============================================================
   g-baji.click base stylesheet (Bengali / bn-BD)
   All custom classes use the wee9b- prefix.
   Palette: #880E4F | #FF69B4 | #D3D3D3 | #3A3A3A | #F8F8FF
   ============================================================ */

:root{
  --wee9b-bg:#3A3A3A;
  --wee9b-bg-2:#2b2b2b;
  --wee9b-primary:#880E4F;
  --wee9b-accent:#FF69B4;
  --wee9b-soft:#D3D3D3;
  --wee9b-light:#F8F8FF;
  --wee9b-radius:14px;
  --wee9b-shadow:0 6px 18px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%}
body{
  font-family:"Hind Siliguri","Noto Sans Bengali",Segoe UI,Arial,sans-serif;
  background:var(--wee9b-bg);
  color:var(--wee9b-light);
  line-height:1.5;
  font-size:1.6rem;
  -webkit-text-size-adjust:100%;
}
a{color:var(--wee9b-accent);text-decoration:none}
a:hover{color:var(--wee9b-light)}
img{max-width:100%;display:block}

/* ---------- Layout container ---------- */
.wee9b-wrap{
  width:100%;
  max-width: 430px;
  margin:0 auto;
  background:var(--wee9b-bg);
  min-height:100vh;
  position:relative;
  overflow:hidden;
}

/* ---------- Header ---------- */
.wee9b-header{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.9rem 1.2rem;
  background:linear-gradient(120deg,var(--wee9b-primary),#5b0a35);
  border-bottom:2px solid var(--wee9b-accent);
  box-shadow:var(--wee9b-shadow);
}
.wee9b-logo{
  display:flex;align-items:center;gap:.6rem;color:var(--wee9b-light);font-weight:700;font-size:1.8rem;
}
.wee9b-logo .wee9b-logo-mark{
  width:34px;height:34px;border-radius:50%;
  background:var(--wee9b-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
}
.wee9b-header-actions{display:flex;align-items:center;gap:.5rem}
.wee9b-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.65rem 1.2rem;border-radius:30px;font-weight:700;font-size:1.3rem;
  border:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
}
.wee9b-btn:active{transform:scale(.95)}
.wee9b-btn-login{background:transparent;color:var(--wee9b-light);border:1.5px solid var(--wee9b-soft)}
.wee9b-btn-register{background:var(--wee9b-accent);color:#3A3A3A;box-shadow:0 4px 12px rgba(255,105,180,.45)}
.wee9b-menu-btn{
  background:transparent;border:none;color:var(--wee9b-light);font-size:2rem;cursor:pointer;padding:.2rem .4rem;
}

/* ---------- Mobile menu drawer ---------- */
.wee9b-menu{
  position:fixed;inset:0 0 0 auto;width:78%;max-width:320px;
  background:var(--wee9b-bg-2);z-index:9999;
  transform:translateX(110%);transition:transform .28s ease;
  padding:2rem 1.4rem;overflow-y:auto;border-left:3px solid var(--wee9b-primary);
}
.wee9b-menu.wee9b-open{transform:translateX(0)}
.wee9b-menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.wee9b-menu-overlay.wee9b-open{opacity:1;visibility:visible}
.wee9b-menu h3{color:var(--wee9b-accent);font-size:1.5rem;margin:1.2rem 0 .6rem}
.wee9b-menu a{
  display:block;padding:.8rem .6rem;border-bottom:1px solid #444;color:var(--wee9b-light);font-size:1.4rem;
}
.wee9b-menu a:hover{color:var(--wee9b-accent)}
.wee9b-menu-close{
  position:absolute;top:.8rem;right:.8rem;background:transparent;border:none;color:#fff;font-size:2.2rem;cursor:pointer;
}

/* ---------- Hero ---------- */
.wee9b-hero{
  position:relative;padding:1.6rem 1.4rem 1.8rem;
  background:radial-gradient(circle at 30% 20%,rgba(255,105,180,.35),transparent 60%),var(--wee9b-primary);
  color:var(--wee9b-light);text-align:center;
}
.wee9b-hero h1{font-size:2.4rem;line-height:1.25;margin-bottom:.6rem}
.wee9b-hero p{font-size:1.35rem;color:var(--wee9b-soft);margin-bottom:1rem}
.wee9b-hero-cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.wee9b-hero .wee9b-btn{font-size:1.4rem;padding:.8rem 1.6rem}

/* ---------- Marquee ---------- */
.wee9b-marquee{
  background:#222;color:var(--wee9b-accent);font-size:1.25rem;padding:.5rem 0;
  white-space:nowrap;overflow:hidden;border-bottom:1px solid #444;
}
.wee9b-marquee span{display:inline-block;padding-left:100%;animation:wee9b-scroll 22s linear infinite}
@keyframes wee9b-scroll{to{transform:translateX(-100%)}}

/* ---------- Section ---------- */
.wee9b-section{padding:1.6rem 1.2rem}
.wee9b-section-title{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;
}
.wee9b-section-title h2{font-size:1.7rem;color:var(--wee9b-accent)}
.wee9b-section-title a{font-size:1.25rem}

/* ---------- Category tabs ---------- */
.wee9b-tabs{
  display:flex;gap:.5rem;overflow-x:auto;padding:.4rem 0 1rem;
  scrollbar-width:none;
}
.wee9b-tabs::-webkit-scrollbar{display:none}
.wee9b-tab{
  flex:0 0 auto;padding:.5rem 1.1rem;border-radius:20px;
  background:#4a4a4a;color:var(--wee9b-soft);font-size:1.25rem;border:1px solid #555;cursor:pointer;
}
.wee9b-tab.wee9b-active{background:var(--wee9b-accent);color:#3A3A3A;border-color:var(--wee9b-accent);font-weight:700}

/* ---------- Carousel ---------- */
.wee9b-carousel{
  display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.6rem;scrollbar-width:none;
}
.wee9b-carousel::-webkit-scrollbar{display:none}
.wee9b-slide{
  flex:0 0 78%;border-radius:var(--wee9b-radius);overflow:hidden;
  background:var(--wee9b-bg-2);box-shadow:var(--wee9b-shadow);position:relative;
}
.wee9b-slide img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.wee9b-slide-cap{padding:.7rem .9rem;font-size:1.3rem;color:var(--wee9b-light)}

/* ---------- Game grid & cards ---------- */
.wee9b-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
}
.wee9b-card{
  background:var(--wee9b-bg-2);border-radius:12px;overflow:hidden;
  border:1px solid #4a4a4a;transition:transform .15s ease;
  display:flex;flex-direction:column;
}
.wee9b-card:active{transform:scale(.97)}
.wee9b-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#222}
.wee9b-card-body{padding:.5rem .6rem .7rem}
.wee9b-card-title{
  font-size:1.15rem;color:var(--wee9b-light);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wee9b-card-tag{
  display:inline-block;font-size:1rem;color:var(--wee9b-accent);margin-top:.2rem;
}
.wee9b-card-play{
  margin:.4rem .6rem .6rem;padding:.45rem;border:none;border-radius:8px;
  background:var(--wee9b-primary);color:#fff;font-size:1.15rem;font-weight:700;cursor:pointer;
}

/* ---------- Promo banner ---------- */
.wee9b-promo{
  margin:1.2rem;padding:1.2rem;border-radius:var(--wee9b-radius);
  background:linear-gradient(120deg,#880E4F,#FF69B4);
  color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  box-shadow:var(--wee9b-shadow);
}
.wee9b-promo-text h3{font-size:1.6rem;margin-bottom:.3rem}
.wee9b-promo-text p{font-size:1.2rem;color:var(--wee9b-light);opacity:.9}
.wee9b-promo .wee9b-btn{background:#fff;color:var(--wee9b-primary)}

/* ---------- SEO content ---------- */
.wee9b-content{padding:1.4rem 1.2rem;color:var(--wee9b-soft);font-size:1.35rem;line-height:1.7}
.wee9b-content h2{color:var(--wee9b-accent);font-size:1.7rem;margin:1.2rem 0 .6rem}
.wee9b-content p{margin-bottom:.9rem}
.wee9b-content a{color:var(--wee9b-accent);text-decoration:underline}

/* ---------- FAQ ---------- */
.wee9b-faq-item{
  background:var(--wee9b-bg-2);border:1px solid #444;border-radius:10px;margin-bottom:.7rem;overflow:hidden;
}
.wee9b-faq-q{
  width:100%;text-align:left;background:transparent;border:none;color:var(--wee9b-light);
  padding:1rem;font-size:1.35rem;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;
}
.wee9b-faq-a{padding:0 1rem 1rem;color:var(--wee9b-soft);font-size:1.25rem;display:none}
.wee9b-faq-item.wee9b-open .wee9b-faq-a{display:block}

/* ---------- Footer ---------- */
.wee9b-footer{
  background:var(--wee9b-bg-2);padding:1.6rem 1.2rem 9rem;border-top:3px solid var(--wee9b-primary);
}
.wee9b-footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem}
.wee9b-footer h4{color:var(--wee9b-accent);font-size:1.3rem;margin-bottom:.5rem}
.wee9b-footer a{display:block;color:var(--wee9b-soft);font-size:1.2rem;padding:.25rem 0}
.wee9b-footer a:hover{color:var(--wee9b-accent)}
.wee9b-footer-bottom{font-size:1.15rem;color:#999;text-align:center;border-top:1px solid #444;padding-top:1rem}

/* ---------- Mobile bottom nav ---------- */
.wee9b-bottomnav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:430px;z-index:1000;
  height:62px;display:flex;justify-content:space-around;align-items:center;
  background:rgba(40,40,40,.97);border-top:2px solid var(--wee9b-accent);
  backdrop-filter:blur(6px);
}
.wee9b-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--wee9b-soft);font-size:1rem;gap:.15rem;height:100%;min-width:60px;min-height:60px;
  transition:color .15s ease;
}
.wee9b-bottomnav a:hover{color:var(--wee9b-accent)}
.wee9b-bottomnav a.wee9b-active{color:var(--wee9b-accent)}
.wee9b-bottomnav .wee9b-bn-icon{font-size:2.2rem;line-height:1}
.wee9b-bottomnav .material-icons,.wee9b-bottomnav .bi{font-size:2.2rem}

/* ---------- Desktop: hide bottom nav, widen layout ---------- */
@media (min-width:769px){
  .wee9b-bottomnav{display:none}
  .wee9b-wrap{max-width:960px}
  .wee9b-grid{grid-template-columns:repeat(5,1fr)}
  .wee9b-footer-cols{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:768px){
  main{padding-bottom:80px}
}