/* =========================================================
   ba999.cyou - Core layout stylesheet
   Scope: header / hero / game grid / cards / footer / bottom nav
   Prefix: g587-
   Palette: #32CD32 #9AFF9A #34495E #00FF00 #B22222
   ========================================================= */

:root{
  --g587-bg:#0b1410;
  --g587-bg-2:#101e17;
  --g587-card:#152620;
  --g587-line:#1f3a2e;
  --g587-green:#32CD32;
  --g587-green-soft:#9AFF9A;
  --g587-neon:#00FF00;
  --g587-red:#B22222;
  --g587-ink:#34495E;
  --g587-text:#eafaf0;
  --g587-muted:#9bb3a3;
  --g587-gold:#ffd24a;
  --g587-radius:1.4rem;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;scroll-behavior:smooth;}
body{
  font-family:"Noto Sans Bengali","Hind Siliguri","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(120% 80% at 50% 0%,#163024 0%,var(--g587-bg) 55%,var(--g587-bg-2) 100%);
  color:var(--g587-text);
  line-height:1.5rem;
  font-size:1.5rem;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--g587-green-soft);text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- Shell : strict mobile width 430px ---------- */
.g587-shell{
  width:100%;
  max-width: 430px;
  margin:0 auto;
  background:var(--g587-bg);
  position:relative;
  min-height:100vh;
  box-shadow:0 0 40px rgba(0,0,0,.5);
}

/* ---------- Header ---------- */
.g587-header{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;gap:.8rem;
  padding:.8rem 1rem;
  background:linear-gradient(180deg,rgba(8,18,13,.96),rgba(8,18,13,.86));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--g587-line);
}
.g587-logo{display:flex;align-items:center;gap:.6rem;flex:1;min-width:0;}
.g587-logo-img{
  width:3.2rem;height:3.2rem;border-radius:.9rem;
  background:radial-gradient(circle at 30% 30%,var(--g587-neon),var(--g587-green) 60%,#0a3d1f);
  display:grid;place-items:center;color:#04130a;font-weight:900;font-size:1.6rem;
  box-shadow:0 0 14px rgba(0,255,0,.45);
}
.g587-logo-txt{font-size:1.7rem;font-weight:800;color:#fff;letter-spacing:.04em;white-space:nowrap;}
.g587-logo-txt span{color:var(--g587-neon);}
.g587-btn{
  border:0;cursor:pointer;border-radius:1rem;font-weight:700;font-size:1.3rem;
  padding:.7rem 1.2rem;min-height:3.4rem;transition:transform .15s, box-shadow .15s, filter .15s;
  font-family:inherit;
}
.g587-btn:active{transform:scale(.94);}
.g587-btn-login{
  background:transparent;color:var(--g587-green-soft);
  border:1.5px solid var(--g587-green);
}
.g587-btn-register{
  background:linear-gradient(135deg,var(--g587-neon),var(--g587-green) 55%,var(--g587-red));
  color:#04130a;box-shadow:0 4px 16px rgba(50,205,50,.4);
}
.g587-menu-btn{
  background:transparent;border:0;color:var(--g587-green-soft);
  font-size:2.2rem;cursor:pointer;padding:.2rem .5rem;
}

/* ---------- Mobile menu (drop-down) ---------- */
.g587-menu{
  position:fixed;inset:0 0 0 auto;z-index:9999;
  width:84%;max-width:340px;
  background:linear-gradient(180deg,#0c1a13,#0a130e);
  border-left:1px solid var(--g587-line);
  transform:translateX(105%);transition:transform .28s ease;
  padding:2rem 1.4rem;overflow-y:auto;
}
.g587-menu.open{transform:translateX(0);}
.g587-menu h3{font-size:1.5rem;color:var(--g587-green);margin:1.4rem 0 .6rem;}
.g587-menu a{
  display:block;padding:1rem .8rem;border-radius:.9rem;margin-bottom:.4rem;
  color:var(--g587-text);background:rgba(255,255,255,.03);
  border:1px solid var(--g587-line);font-size:1.4rem;
}
.g587-menu a:active{background:rgba(50,205,50,.12);}
.g587-menu-close{
  position:absolute;top:1rem;right:1rem;background:transparent;border:0;
  color:#fff;font-size:2.4rem;cursor:pointer;
}
.g587-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.g587-overlay.open{opacity:1;pointer-events:auto;}

/* ---------- Hero ---------- */
.g587-hero{
  position:relative;overflow:hidden;
  padding:1.6rem 1.2rem 1.8rem;
  background:
    radial-gradient(80% 120% at 80% 10%,rgba(178,34,34,.35),transparent 60%),
    radial-gradient(80% 120% at 10% 90%,rgba(0,255,0,.25),transparent 60%),
    linear-gradient(135deg,#0a1f14,#102b1d);
  border-bottom:1px solid var(--g587-line);
}
.g587-hero-badge{
  display:inline-block;background:rgba(178,34,34,.18);color:#ff8a8a;
  border:1px solid var(--g587-red);padding:.3rem .9rem;border-radius:99px;
  font-size:1.1rem;font-weight:700;margin-bottom:.7rem;
}
.g587-hero h1{font-size:2.2rem;line-height:1.35;color:#fff;margin-bottom:.7rem;font-weight:800;}
.g587-hero h1 b{color:var(--g587-neon);}
.g587-hero p{font-size:1.35rem;color:var(--g587-muted);margin-bottom:1.1rem;}
.g587-hero-cta{display:flex;gap:.8rem;}
.g587-hero-cta .g587-btn{flex:1;font-size:1.4rem;padding:.9rem;}
.g587-hero-stats{
  display:flex;gap:.6rem;margin-top:1.2rem;
}
.g587-hero-stats div{
  flex:1;background:rgba(0,0,0,.3);border:1px solid var(--g587-line);
  border-radius:1rem;padding:.7rem;text-align:center;
}
.g587-hero-stats b{display:block;color:var(--g587-gold);font-size:1.5rem;}
.g587-hero-stats small{color:var(--g587-muted);font-size:1.05rem;}

/* ---------- Section ---------- */
.g587-section{padding:1.6rem 1rem;}
.g587-section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;
}
.g587-section-head h2{
  font-size:1.7rem;color:#fff;font-weight:800;
  display:flex;align-items:center;gap:.5rem;
}
.g587-section-head h2 i{color:var(--g587-green);}
.g587-section-head a{font-size:1.2rem;color:var(--g587-green-soft);}

/* ---------- Category title ---------- */
.g587-cat-title{
  display:flex;align-items:center;gap:.7rem;
  margin:1.6rem 0 1rem;padding:.6rem .9rem;
  background:linear-gradient(90deg,rgba(50,205,50,.14),transparent);
  border-left:4px solid var(--g587-green);border-radius:.6rem;
}
.g587-cat-title h2{font-size:1.55rem;color:#fff;font-weight:800;}
.g587-cat-title span{margin-left:auto;color:var(--g587-green-soft);font-size:1.1rem;}

/* ---------- Game grid ---------- */
.g587-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
}
.g587-card{
  background:var(--g587-card);border:1px solid var(--g587-line);
  border-radius:var(--g587-radius);overflow:hidden;cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  position:relative;
}
.g587-card:active{transform:scale(.95);border-color:var(--g587-green);}
.g587-card .g587-thumb{
  aspect-ratio:1/1;background:#0a160f;
  display:grid;place-items:center;overflow:hidden;
}
.g587-card .g587-thumb img{width:100%;height:100%;object-fit:cover;}
.g587-card .g587-name{
  font-size:1.15rem;color:var(--g587-text);font-weight:600;
  padding:.5rem .4rem;text-align:center;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.g587-card .g587-hot{
  position:absolute;top:.4rem;left:.4rem;background:var(--g587-red);
  color:#fff;font-size:.95rem;padding:.1rem .5rem;border-radius:.6rem;font-weight:700;
}
.g587-card .g587-play{
  position:absolute;inset:0;background:rgba(0,20,8,.55);
  display:grid;place-items:center;opacity:0;transition:opacity .2s;
}
.g587-card:active .g587-play{opacity:1;}
.g587-card .g587-play i{color:var(--g587-neon);font-size:2.6rem;}

/* ---------- Promo banner ---------- */
.g587-promo{
  background:linear-gradient(135deg,#1c0c0c,#2a1010);
  border:1px solid var(--g587-red);border-radius:var(--g587-radius);
  padding:1.2rem;display:flex;gap:1rem;align-items:center;
  margin:1.4rem 0;cursor:pointer;transition:transform .15s;
}
.g587-promo:active{transform:scale(.98);}
.g587-promo .g587-promo-ic{
  width:4.2rem;height:4.2rem;border-radius:1rem;flex:0 0 auto;
  background:linear-gradient(135deg,var(--g587-red),#ff6b6b);
  display:grid;place-items:center;color:#fff;font-size:2.4rem;
}
.g587-promo h3{font-size:1.4rem;color:#fff;margin-bottom:.3rem;}
.g587-promo p{font-size:1.2rem;color:var(--g587-muted);}
.g587-promo b{color:var(--g587-gold);}

/* ---------- Carousel ---------- */
.g587-carousel{display:grid;grid-template-columns:1fr;gap:.9rem;padding:1.2rem 1rem .4rem;}
.g587-slide{position:relative;border-radius:var(--g587-radius);overflow:hidden;border:1px solid var(--g587-line);cursor:pointer;background:#09150f;min-height:12rem;}
.g587-slide img{width:100%;height:12rem;object-fit:cover;opacity:.82;}
.g587-slide span{position:absolute;left:1rem;bottom:1rem;background:rgba(0,0,0,.62);border:1px solid var(--g587-green);color:#fff;border-radius:99px;padding:.45rem 1rem;font-size:1.2rem;font-weight:800;}

/* ---------- Content panels ---------- */
.g587-panel{background:var(--g587-card);border:1px solid var(--g587-line);border-radius:var(--g587-radius);padding:1.1rem;margin:.9rem 0;}
.g587-panel h2{font-size:1.55rem;color:var(--g587-green);margin-bottom:.6rem;line-height:1.35;}
.g587-panel h3{font-size:1.35rem;color:#fff;margin:.7rem 0 .35rem;}
.g587-panel p,.g587-panel li{font-size:1.25rem;line-height:1.55;color:var(--g587-muted);margin-bottom:.55rem;}
.g587-panel ul,.g587-panel ol{margin-left:1.5rem;}
.g587-chiprow{display:flex;flex-wrap:wrap;gap:.55rem;margin:.7rem 0;}
.g587-chip{border:1px solid var(--g587-line);background:rgba(50,205,50,.08);color:var(--g587-green-soft);border-radius:99px;padding:.45rem .75rem;font-size:1.1rem;font-weight:700;}
.g587-link-strong{color:var(--g587-gold);font-weight:900;text-decoration:underline;cursor:pointer;}
.g587-mini-list{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.7rem;}
.g587-mini-list div{background:rgba(0,0,0,.24);border:1px solid var(--g587-line);border-radius:1rem;padding:.75rem;}
.g587-mini-list b{display:block;color:#fff;font-size:1.2rem;margin-bottom:.2rem;}
.g587-mini-list small{color:var(--g587-muted);font-size:1.05rem;line-height:1.35;display:block;}
.g587-quote{border-left:3px solid var(--g587-green);background:rgba(50,205,50,.07);border-radius:.8rem;padding:.8rem;margin:.7rem 0;color:var(--g587-muted);font-size:1.22rem;line-height:1.5;}
.g587-payrow{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.7rem 0;}
.g587-payrow span{background:rgba(0,0,0,.32);border:1px solid var(--g587-line);border-radius:.9rem;padding:.7rem .35rem;text-align:center;color:#fff;font-weight:700;font-size:1.1rem;}
.g587-faq-item{border-bottom:1px solid var(--g587-line);padding:.8rem 0;}
.g587-faq-item:last-child{border-bottom:0;}
.g587-faq-item h3{display:flex;gap:.45rem;align-items:flex-start;}

/* ---------- SEO content ---------- */
.g587-seo{padding:1.6rem 1rem;color:var(--g587-text);}
.g587-seo h2{font-size:1.6rem;color:var(--g587-green);margin:1.2rem 0 .6rem;font-weight:800;}
.g587-seo h3{font-size:1.4rem;color:#fff;margin:1rem 0 .4rem;}
.g587-seo p{font-size:1.3rem;line-height:1.55;color:var(--g587-muted);margin-bottom:.7rem;}
.g587-seo p a{color:var(--g587-green-soft);font-weight:600;}
.g587-seo ul{margin:.4rem 0 .8rem 1.4rem;}
.g587-seo li{font-size:1.3rem;color:var(--g587-muted);margin-bottom:.3rem;line-height:1.5;}

/* ---------- Features strip ---------- */
.g587-feat{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;
  padding:0 1rem 1rem;
}
.g587-feat div{
  background:var(--g587-card);border:1px solid var(--g587-line);
  border-radius:1rem;padding:.9rem;display:flex;gap:.7rem;align-items:center;
}
.g587-feat i{font-size:2rem;color:var(--g587-green);}
.g587-feat b{display:block;color:#fff;font-size:1.2rem;}
.g587-feat small{color:var(--g587-muted);font-size:1.05rem;}

/* ---------- Footer ---------- */
.g587-footer{
  background:#070f0b;border-top:1px solid var(--g587-line);
  padding:1.6rem 1.2rem 8rem;color:var(--g587-muted);
}
.g587-footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.g587-footer h4{color:#fff;font-size:1.25rem;margin-bottom:.5rem;}
.g587-footer a{display:block;font-size:1.15rem;color:var(--g587-muted);padding:.25rem 0;}
.g587-footer a:active{color:var(--g587-green);}
.g587-footer-bot{
  border-top:1px solid var(--g587-line);padding-top:.9rem;
  font-size:1.05rem;text-align:center;line-height:1.5;
}
.g587-18plus{
  display:inline-block;border:1.5px solid var(--g587-red);color:#ff9090;
  border-radius:99px;padding:.1rem .7rem;font-size:1rem;margin-top:.5rem;
}

/* ---------- Mobile bottom navigation ---------- */
.g587-bottomnav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:430px;z-index:1000;
  height:6.4rem;display:flex;justify-content:space-around;align-items:center;
  background:linear-gradient(180deg,rgba(8,18,13,.85),#050a07);
  border-top:1px solid var(--g587-line);
  backdrop-filter:blur(12px);
}
.g587-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:6rem;min-height:6rem;color:var(--g587-muted);
  font-size:1.05rem;text-decoration:none;gap:.2rem;position:relative;
  transition:color .2s, transform .15s;
}
.g587-bottomnav a i{font-size:2.4rem;}
.g587-bottomnav a.active{color:var(--g587-neon);}
.g587-bottomnav a:active{transform:scale(.9);}
.g587-bottomnav a.g587-cta{
  flex:0 0 5.6rem;width:5.6rem;height:5.6rem;margin-top:-2.4rem;
  border-radius:50%;
  background:linear-gradient(135deg,var(--g587-neon),var(--g587-green) 60%,var(--g587-red));
  color:#04130a;box-shadow:0 6px 18px rgba(50,205,50,.5);
  border:3px solid #06160c;
}
.g587-bottomnav a.g587-cta i{font-size:2.6rem;}

/* ---------- Desktop rules ---------- */
@media (min-width: 769px){
  .g587-bottomnav{display:none;}
  .g587-shell{box-shadow:0 0 60px rgba(0,255,0,.08);}
}
@media (max-width: 768px){
  main{padding-bottom:8rem;}
}

/* ---------- Utilities ---------- */
.g587-container{padding:0 1rem;}
.g587-hide{display:none !important;}
.g587-fab-pulse{animation:g587pulse 1.8s infinite;}
@keyframes g587pulse{
  0%{box-shadow:0 6px 18px rgba(50,205,50,.5);}
  50%{box-shadow:0 6px 28px rgba(0,255,0,.85);}
  100%{box-shadow:0 6px 18px rgba(50,205,50,.5);}
}