/* ===========================================================
   betjili.sbs - Mobile-first layout
   Prefix: g64a- | Palette: dark green casino theme
   =========================================================== */

:root{
  --g64a-bg:#1A1A2E;
  --g64a-bg2:#13132a;
  --g64a-card:#22223f;
  --g64a-light:#9AFF9A;
  --g64a-green:#228B22;
  --g64a-mint:#00FA9A;
  --g64a-gold:#CD853F;
  --g64a-text:#f3fff0;
  --g64a-muted:#b8c7b8;
  --g64a-border:rgba(154,255,154,.18);
  --g64a-radius:14px;
  --g64a-shadow:0 8px 22px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Sans Bengali","Hind Siliguri",system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--g64a-bg);
  color:var(--g64a-text);
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--g64a-mint);text-decoration:none}
a:hover{color:var(--g64a-light)}

/* ---------- Shell: cap to mobile width ---------- */
.g64a-shell{
  width:100%;
  max-width:430px;
  margin:0 auto;
  background:linear-gradient(180deg,#15152b 0%,#1A1A2E 40%,#101022 100%);
  min-height:100vh;
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.5);
}

/* ---------- Header ---------- */
.g64a-header{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(90deg,#0f0f22,#1d2a1d 60%,#0f0f22);
  border-bottom:1px solid var(--g64a-border);
  backdrop-filter:blur(6px);
}
.g64a-logo{display:flex;align-items:center;gap:8px;font-size:1.9rem;font-weight:800;color:var(--g64a-light);letter-spacing:.5px}
.g64a-logo i{color:var(--g64a-gold);font-size:2.2rem}
.g64a-logo span{color:var(--g64a-mint)}
.g64a-hbtns{display:flex;gap:8px;align-items:center}
.g64a-btn{
  border:0;cursor:pointer;border-radius:30px;padding:8px 14px;
  font-size:1.25rem;font-weight:700;font-family:inherit;
  transition:transform .15s ease,box-shadow .15s ease;
}
.g64a-btn:active{transform:scale(.96)}
.g64a-login{
  background:transparent;color:var(--g64a-light);
  border:1px solid var(--g64a-light);
}
.g64a-register{
  background:linear-gradient(90deg,var(--g64a-green),var(--g64a-mint));
  color:#0d1f0d;box-shadow:0 4px 14px rgba(0,250,154,.35);
}
.g64a-menu-btn{
  background:transparent;border:0;color:var(--g64a-light);
  font-size:2rem;cursor:pointer;padding:4px 6px;
}

/* ---------- Mobile slide menu ---------- */
.g64a-menu{
  position:fixed;top:0;right:-86%;width:78%;height:100vh;z-index:9999;
  background:#101022;transition:right .28s ease;padding:18px 16px;
  overflow-y:auto;border-left:1px solid var(--g64a-border);
}
.g64a-menu.open{right:0}
.g64a-menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.g64a-menu-backdrop.open{opacity:1;pointer-events:auto}
.g64a-menu h3{color:var(--g64a-gold);font-size:1.4rem;margin:14px 0 8px;border-bottom:1px solid var(--g64a-border);padding-bottom:6px}
.g64a-menu a{
  display:block;color:var(--g64a-text);padding:10px 8px;font-size:1.3rem;
  border-bottom:1px solid rgba(154,255,154,.06);
}
.g64a-menu a:hover{background:rgba(0,250,154,.08);color:var(--g64a-mint)}
.g64a-menu-close{
  background:var(--g64a-card);color:var(--g64a-light);border:0;
  border-radius:20px;padding:6px 14px;font-size:1.2rem;cursor:pointer;float:right;
}

/* ---------- Hero ---------- */
.g64a-hero{
  position:relative;padding:18px 14px 14px;overflow:hidden;
  background:radial-gradient(circle at 20% 10%,rgba(0,250,154,.18),transparent 55%),
             linear-gradient(135deg,#13251a,#1A1A2E);
  border-bottom:1px solid var(--g64a-border);
}
.g64a-hero-tag{
  display:inline-block;background:rgba(205,133,63,.18);color:var(--g64a-gold);
  padding:4px 10px;border-radius:20px;font-size:1.1rem;font-weight:700;
}
.g64a-hero h1{
  font-size:2.4rem;line-height:1.25;margin:10px 0 8px;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.g64a-hero h1 em{color:var(--g64a-mint);font-style:normal}
.g64a-hero p{font-size:1.25rem;color:var(--g64a-muted);margin-bottom:12px}
.g64a-hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.g64a-hero-cta .g64a-btn{flex:1;min-width:130px;text-align:center;font-size:1.3rem;padding:11px 14px}
.g64a-hero-stats{
  display:flex;justify-content:space-between;margin-top:14px;
  background:rgba(0,0,0,.25);border-radius:var(--g64a-radius);padding:10px;
}
.g64a-hero-stats div{text-align:center;flex:1}
.g64a-hero-stats strong{display:block;color:var(--g64a-mint);font-size:1.5rem;font-weight:800}
.g64a-hero-stats small{color:var(--g64a-muted);font-size:1rem}

/* ---------- Marquee ---------- */
.g64a-marquee{
  background:linear-gradient(90deg,var(--g64a-green),var(--g64a-gold));
  color:#0d1f0d;font-weight:700;font-size:1.2rem;padding:6px 0;overflow:hidden;
  white-space:nowrap;
}
.g64a-marquee span{display:inline-block;padding-left:100%;animation:g64ascroll 18s linear infinite}
@keyframes g64ascroll{to{transform:translateX(-100%)}}

/* ---------- Section ---------- */
.g64a-section{padding:18px 14px}
.g64a-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.g64a-section-head h2{font-size:1.7rem;color:var(--g64a-light);display:flex;align-items:center;gap:8px}
.g64a-section-head h2 i{color:var(--g64a-gold)}
.g64a-section-head a{font-size:1.1rem;color:var(--g64a-mint)}
.g64a-seo-text{font-size:1.18rem;color:var(--g64a-muted);margin-top:10px;line-height:1.7}
.g64a-seo-text a{color:var(--g64a-mint);font-weight:700}

/* ---------- Category chips ---------- */
.g64a-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.g64a-chips button{
  flex:0 0 auto;border:1px solid var(--g64a-border);background:var(--g64a-card);
  color:var(--g64a-text);padding:7px 14px;border-radius:20px;font-size:1.15rem;
  cursor:pointer;font-family:inherit;
}
.g64a-chips button.active{
  background:linear-gradient(90deg,var(--g64a-green),var(--g64a-mint));
  color:#0d1f0d;border-color:transparent;font-weight:700;
}

/* ---------- Game grid ---------- */
.g64a-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g64a-card{
  background:var(--g64a-card);border:1px solid var(--g64a-border);
  border-radius:var(--g64a-radius);overflow:hidden;cursor:pointer;
  transition:transform .15s,box-shadow .15s;position:relative;
}
.g64a-card:active{transform:scale(.96)}
.g64a-card img{width:100%;aspect-ratio:1;object-fit:cover;background:#0c0c1a}
.g64a-card .g64a-name{
  padding:6px 8px;font-size:1.05rem;color:var(--g64a-text);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.g64a-card .g64a-tag{
  position:absolute;top:6px;left:6px;background:var(--g64a-gold);color:#1A1A2E;
  font-size:.95rem;font-weight:700;padding:2px 6px;border-radius:8px;
}
.g64a-card .g64a-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s;
}
.g64a-card:hover .g64a-play{opacity:1}
.g64a-card .g64a-play i{color:#fff;font-size:3rem}

/* ---------- Promo banner ---------- */
.g64a-promo{
  background:linear-gradient(120deg,#228B22,#00FA9A 60%,#CD853F);
  color:#0d1f0d;border-radius:var(--g64a-radius);padding:14px;margin:14px 0;
  display:flex;align-items:center;gap:12px;
}
.g64a-promo i{font-size:3rem;color:#1A1A2E}
.g64a-promo div{flex:1}
.g64a-promo strong{font-size:1.4rem;display:block}
.g64a-promo small{font-size:1.1rem;opacity:.85}
.g64a-promo .g64a-btn{background:#1A1A2E;color:var(--g64a-mint)}

/* ---------- Feature list ---------- */
.g64a-feat{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px}
.g64a-feat .g64a-ft{
  background:var(--g64a-card);border:1px solid var(--g64a-border);
  border-radius:var(--g64a-radius);padding:12px;
}
.g64a-feat .g64a-ft i{font-size:2.2rem;color:var(--g64a-mint)}
.g64a-feat .g64a-ft h4{font-size:1.3rem;margin:6px 0 4px;color:var(--g64a-light)}
.g64a-feat .g64a-ft p{font-size:1.1rem;color:var(--g64a-muted);line-height:1.5}

/* ---------- FAQ ---------- */
.g64a-faq-item{
  background:var(--g64a-card);border:1px solid var(--g64a-border);
  border-radius:12px;margin-bottom:8px;overflow:hidden;
}
.g64a-faq-q{
  padding:12px;font-size:1.22rem;font-weight:700;color:var(--g64a-light);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
}
.g64a-faq-q .g64a-ico{color:var(--g64a-gold);transition:transform .2s}
.g64a-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 12px}
.g64a-faq-item.open .g64a-faq-a{max-height:400px;padding:0 12px 12px;font-size:1.15rem;color:var(--g64a-muted)}
.g64a-faq-item.open .g64a-ico{transform:rotate(45deg)}

/* ---------- Footer ---------- */
.g64a-footer{
  background:#0d0d1d;border-top:1px solid var(--g64a-border);padding:18px 14px 30px;
}
.g64a-footer h4{color:var(--g64a-gold);font-size:1.35rem;margin:12px 0 6px}
.g64a-footer p{font-size:1.12rem;color:var(--g64a-muted);line-height:1.7}
.g64a-footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0}
.g64a-footer-links a{font-size:1.15rem;color:var(--g64a-text);padding:4px 0}
.g64a-footer-links a:hover{color:var(--g64a-mint)}
.g64a-foot-note{font-size:1.05rem;color:#778;font-style:italic;margin-top:14px;border-top:1px solid var(--g64a-border);padding-top:10px}

/* ---------- Mobile bottom nav ---------- */
.g64a-bottomnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;z-index:1000;
  display:flex;justify-content:space-around;align-items:center;
  background:linear-gradient(180deg,#191930,#0d0d1d);
  border-top:1px solid var(--g64a-border);height:62px;
  box-shadow:0 -4px 14px rgba(0,0,0,.45);
}
.g64a-bottomnav a,.g64a-bottomnav button{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--g64a-muted);font-family:inherit;
  font-size:1rem;min-width:60px;min-height:60px;cursor:pointer;gap:3px;
  transition:color .15s,transform .15s;
}
.g64a-bottomnav a i,.g64a-bottomnav button i{font-size:2.2rem}
.g64a-bottomnav a.active,.g64a-bottomnav button.active{color:var(--g64a-mint)}
.g64a-bottomnav a:active,.g64a-bottomnav button:active{transform:translateY(-2px)}
.g64a-bottomnav .g64a-bn-promo{color:var(--g64a-gold)}
.g64a-bottomnav .g64a-bn-center{
  flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--g64a-green),var(--g64a-mint));
  color:#0d1f0d;margin-top:-22px;box-shadow:0 4px 14px rgba(0,250,154,.5);
  font-size:2.6rem;
}

/* ---------- Carousel and help pages ---------- */
.g64a-carousel{display:grid;gap:10px;padding:14px;background:rgba(0,0,0,.16)}
.g64a-slide{position:relative;display:block;border-radius:var(--g64a-radius);overflow:hidden;border:1px solid var(--g64a-border);box-shadow:var(--g64a-shadow)}
.g64a-slide img{width:100%;height:124px;object-fit:cover;background:#0c0c1a}
.g64a-slide span{position:absolute;left:10px;bottom:10px;background:rgba(13,13,29,.82);color:var(--g64a-light);font-size:1.2rem;font-weight:800;padding:5px 10px;border-radius:20px}
.g64a-page-hero{padding:22px 14px;background:radial-gradient(circle at top right,rgba(0,250,154,.18),transparent 55%),linear-gradient(135deg,#13251a,#1A1A2E);border-bottom:1px solid var(--g64a-border)}
.g64a-page-hero h1{font-size:2.2rem;line-height:1.28;color:#fff;margin:8px 0}
.g64a-page-hero p{font-size:1.24rem;color:var(--g64a-muted);line-height:1.7}
.g64a-guide-list{display:grid;gap:10px;margin-top:10px}
.g64a-guide-card{background:var(--g64a-card);border:1px solid var(--g64a-border);border-radius:var(--g64a-radius);padding:12px}
.g64a-guide-card h3{font-size:1.35rem;color:var(--g64a-light);margin-bottom:5px;display:flex;gap:8px;align-items:center}
.g64a-guide-card h3 i,.g64a-guide-card h3 ion-icon{color:var(--g64a-gold);font-size:2rem}
.g64a-guide-card p,.g64a-guide-card li{font-size:1.16rem;color:var(--g64a-muted);line-height:1.65}
.g64a-guide-card ul,.g64a-guide-card ol{padding-left:20px;margin-top:6px}
.g64a-cta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.g64a-text-link{font-weight:800;color:var(--g64a-mint);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.g64a-steps{counter-reset:g64astep;display:grid;gap:10px;margin-top:10px}
.g64a-step{counter-increment:g64astep;background:var(--g64a-card);border:1px solid var(--g64a-border);border-radius:var(--g64a-radius);padding:12px 12px 12px 48px;position:relative}
.g64a-step:before{content:counter(g64astep);position:absolute;left:12px;top:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--g64a-green),var(--g64a-mint));color:#0d1f0d;font-weight:900;font-size:1.3rem}
.g64a-step h3{font-size:1.32rem;color:var(--g64a-light);margin-bottom:4px}
.g64a-step p{font-size:1.16rem;color:var(--g64a-muted);line-height:1.65}

/* ---------- Desktop: hide bottom nav, show desktop nav ---------- */
@media (min-width:769px){
  .g64a-bottomnav{display:none}
  main{padding-bottom:30px !important}
  .g64a-desktop-nav{display:flex !important}
}
.g64a-desktop-nav{display:none;gap:18px;padding:8px 14px;background:#0f0f22;border-bottom:1px solid var(--g64a-border);justify-content:center;flex-wrap:wrap}
.g64a-desktop-nav a{font-size:1.2rem;color:var(--g64a-text)}

/* ---------- Mobile bottom padding for fixed nav ---------- */
@media (max-width:768px){
  main{padding-bottom:80px}
}