/* jay9.homes - Base styles. All custom classes use wb9d4- prefix. */
/* Color palette: #2C3E50 (bg) | #4682B4 | #6A5ACD | #CC99FF | #808080 */

:root{
  --wb9d4-bg:#2C3E50;
  --wb9d4-bg-2:#22313f;
  --wb9d4-card:#2f4254;
  --wb9d4-steel:#4682B4;
  --wb9d4-violet:#6A5ACD;
  --wb9d4-lilac:#CC99FF;
  --wb9d4-grey:#808080;
  --wb9d4-text:#f3f4f8;
  --wb9d4-muted:#c9ccd4;
  --wb9d4-gold:#ffd56b;
  --wb9d4-radius:1.4rem;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;}
body{
  font-family:'Noto Sans Bengali','Hind Siliguri',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:linear-gradient(160deg,#22313f 0%,#2C3E50 50%,#26384c 100%);
  color:var(--wb9d4-text);
  line-height:1.5rem;
  font-size:1.5rem;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--wb9d4-lilac);text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- Layout ---------- */
.wb9d4-wrap{max-width:430px;margin:0 auto;position:relative;background:transparent;}

/* ---------- Header ---------- */
.wb9d4-header{
  position:sticky;top:0;z-index:1000;
  max-width:430px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.2rem;
  background:linear-gradient(90deg,rgba(106,90,205,.95),rgba(70,130,180,.92));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(204,153,255,.25);
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.wb9d4-logo{display:flex;align-items:center;gap:.7rem;color:#fff;font-weight:700;font-size:1.7rem;}
.wb9d4-logo img{width:3rem;height:3rem;border-radius:.8rem;box-shadow:0 0 0 2px rgba(255,255,255,.25);}
.wb9d4-logo small{display:block;font-size:1rem;font-weight:500;color:#e8e2ff;letter-spacing:.5px;}
.wb9d4-hbtns{display:flex;align-items:center;gap:.6rem;}
.wb9d4-btn{
  border:0;border-radius:10rem;cursor:pointer;font-weight:700;font-size:1.3rem;
  padding:.85rem 1.4rem;min-height:44px;color:#fff;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.wb9d4-btn:active{transform:scale(.96);}
.wb9d4-btn-login{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);}
.wb9d4-btn-register{background:linear-gradient(135deg,#ffd56b,#ff9d3b);color:#3a2200;box-shadow:0 6px 16px rgba(255,157,59,.4);}

/* ---------- Hamburger / expandable menu ---------- */
.wb9d4-menu-btn{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  color:#fff;width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;cursor:pointer;
}
.wb9d4-menu{max-width:430px;margin:0 auto;position:sticky;top:64px;z-index:999;}
.wb9d4-menu nav{
  display:none;flex-direction:column;background:rgba(34,49,63,.98);
  border-bottom:1px solid rgba(204,153,255,.2);padding:.6rem 1rem;
}
.wb9d4-menu.open nav{display:flex;}
.wb9d4-menu a{
  color:var(--wb9d4-text);padding:1rem .6rem;border-bottom:1px dashed rgba(255,255,255,.08);
  font-size:1.4rem;display:flex;align-items:center;gap:.8rem;
}
.wb9d4-menu a:last-child{border-bottom:0;}
.wb9d4-menu a i{color:var(--wb9d4-lilac);width:22px;}

/* ---------- Hero / Banner ---------- */
.wb9d4-hero{
  max-width:430px;margin:0 auto;padding:1.2rem;
}
.wb9d4-hero-card{
  border-radius:var(--wb9d4-radius);padding:1.8rem 1.6rem;
  background:radial-gradient(120% 120% at 0% 0%,rgba(106,90,205,.55),rgba(70,130,180,.25) 60%,rgba(34,49,63,.6));
  border:1px solid rgba(204,153,255,.3);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.wb9d4-hero h1{font-size:2.3rem;line-height:2.6rem;margin-bottom:.6rem;color:#fff;}
.wb9d4-hero h1 span{color:var(--wb9d4-gold);}
.wb9d4-hero p{color:var(--wb9d4-muted);font-size:1.35rem;margin-bottom:1.2rem;}
.wb9d4-hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;}
.wb9d4-hero-cta .wb9d4-btn{flex:1;justify-content:center;}

/* ---------- Marquee ---------- */
.wb9d4-marquee{
  max-width:430px;margin:0 auto 1rem;padding:.6rem 1rem;
  background:rgba(106,90,205,.18);border-radius:1rem;
  display:flex;align-items:center;gap:.7rem;overflow:hidden;
}
.wb9d4-marquee i{color:var(--wb9d4-gold);}
.wb9d4-marquee span{font-size:1.25rem;color:var(--wb9d4-text);white-space:nowrap;}

/* ---------- Section ---------- */
.wb9d4-section{max-width:430px;margin:0 auto;padding:1.2rem;}
.wb9d4-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.wb9d4-sec-head h2{font-size:1.8rem;color:#fff;display:flex;align-items:center;gap:.6rem;}
.wb9d4-sec-head h2 i{color:var(--wb9d4-lilac);}
.wb9d4-sec-head a{font-size:1.2rem;color:var(--wb9d4-gold);}

/* ---------- Category chips ---------- */
.wb9d4-chips{display:flex;gap:.7rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1rem;}
.wb9d4-chips button{
  flex:0 0 auto;border:1px solid rgba(204,153,255,.3);background:rgba(255,255,255,.05);
  color:var(--wb9d4-text);padding:.7rem 1.2rem;border-radius:2rem;font-size:1.25rem;cursor:pointer;
  display:flex;align-items:center;gap:.4rem;
}
.wb9d4-chips button.active{background:linear-gradient(135deg,var(--wb9d4-violet),var(--wb9d4-steel));border-color:transparent;}

/* ---------- Game grid ---------- */
.wb9d4-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;}
.wb9d4-card{
  background:var(--wb9d4-card);border-radius:1.1rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);position:relative;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.wb9d4-card:active{transform:scale(.97);}
.wb9d4-card img{aspect-ratio:1/1;object-fit:cover;width:100%;}
.wb9d4-card .wb9d4-gname{padding:.5rem .6rem;font-size:1.05rem;color:var(--wb9d4-text);min-height:3rem;line-height:1.3rem;}
.wb9d4-card .wb9d4-badge{
  position:absolute;top:.4rem;left:.4rem;background:linear-gradient(135deg,#ff5e5e,#ff9d3b);
  color:#fff;font-size:.95rem;padding:.15rem .5rem;border-radius:.6rem;font-weight:700;
}
.wb9d4-card .wb9d4-play{
  position:absolute;inset:0;background:rgba(34,49,63,.7);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;font-size:1.2rem;color:#fff;font-weight:700;
}
.wb9d4-card:hover .wb9d4-play{opacity:1;}

/* ---------- Promo / SEO blocks ---------- */
.wb9d4-promo{
  max-width:430px;margin:1rem auto;padding:1.2rem;border-radius:var(--wb9d4-radius);
  background:linear-gradient(120deg,rgba(255,213,107,.18),rgba(204,153,255,.18));
  border:1px solid rgba(255,213,107,.3);
}
.wb9d4-promo h3{font-size:1.6rem;color:var(--wb9d4-gold);margin-bottom:.5rem;}
.wb9d4-promo p{font-size:1.25rem;color:var(--wb9d4-muted);margin-bottom:.8rem;}
.wb9d4-seo{max-width:430px;margin:1rem auto;padding:1.2rem;color:var(--wb9d4-muted);font-size:1.25rem;}
.wb9d4-seo h2{color:#fff;font-size:1.7rem;margin:1rem 0 .5rem;}
.wb9d4-seo p{margin-bottom:.8rem;}
.wb9d4-seo a{font-weight:700;color:var(--wb9d4-lilac);}

/* ---------- FAQ ---------- */
.wb9d4-faq details{
  background:var(--wb9d4-card);border:1px solid rgba(255,255,255,.06);
  border-radius:1rem;padding:1rem;margin-bottom:.7rem;
}
.wb9d4-faq summary{font-weight:700;color:#fff;font-size:1.3rem;cursor:pointer;list-style:none;}
.wb9d4-faq summary::-webkit-details-marker{display:none;}
.wb9d4-faq p{margin-top:.6rem;color:var(--wb9d4-muted);font-size:1.2rem;}

/* ---------- Footer ---------- */
.wb9d4-footer{max-width:430px;margin:2rem auto 0;padding:1.5rem 1.2rem;background:rgba(34,49,63,.7);border-top:1px solid rgba(204,153,255,.18);}
.wb9d4-footer h4{color:#fff;font-size:1.4rem;margin-bottom:.7rem;}
.wb9d4-footer ul{list-style:none;margin-bottom:1.2rem;}
.wb9d4-footer li{margin-bottom:.5rem;}
.wb9d4-footer a{color:var(--wb9d4-muted);font-size:1.2rem;}
.wb9d4-footer a:hover{color:var(--wb9d4-lilac);}
.wb9d4-footer p{color:var(--wb9d4-grey);font-size:1.1rem;line-height:1.6rem;}

/* ---------- Mobile Bottom Nav (unique arched design) ---------- */
.wb9d4-bottomnav{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;
  z-index:1000;height:64px;display:flex;justify-content:space-around;align-items:flex-end;
  background:linear-gradient(180deg,rgba(34,49,63,.92),rgba(20,28,36,.98));
  border-top:1px solid rgba(204,153,255,.25);
  box-shadow:0 -6px 24px rgba(0,0,0,.45);
  padding:0 .3rem;
}
.wb9d4-bottomnav a, .wb9d4-bottomnav button{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  min-width:60px;min-height:60px;background:transparent;border:0;color:var(--wb9d4-muted);
  font-size:1rem;cursor:pointer;font-family:inherit;
  transition:transform .18s ease, color .18s ease;
}
.wb9d4-bottomnav a i, .wb9d4-bottomnav button i{font-size:2.2rem;}
.wb9d4-bottomnav a.active, .wb9d4-bottomnav button.active{color:var(--wb9d4-gold);}
.wb9d4-bottomnav a:active, .wb9d4-bottomnav button:active{transform:translateY(-3px) scale(1.05);}
.wb9d4-bottomnav .wb9d4-fab{
  flex:0 0 auto;width:60px;height:60px;margin-top:-22px;border-radius:50%;
  background:linear-gradient(135deg,var(--wb9d4-violet),var(--wb9d4-steel));
  color:#fff;box-shadow:0 6px 18px rgba(106,90,205,.6);border:2px solid rgba(255,255,255,.35);
}
.wb9d4-bottomnav .wb9d4-fab i{font-size:2.6rem;}

main{padding-bottom:80px;}

@media (min-width:769px){
  .wb9d4-bottomnav{display:none;}
  main{padding-bottom:0;}
}