/* =========================================================
   299bad.sbs - Mobile-first BD gaming theme
   All custom classes use the ui76- prefix.
   Comments in English per project convention.
   ========================================================= */

:root{
  --ui76-bg:#0b1620;
  --ui76-bg2:#0f2030;
  --ui76-card:#13283a;
  --ui76-card2:#16304466;
  --ui76-gold:#f5c451;
  --ui76-gold2:#e09a2b;
  --ui76-red:#e84d4d;
  --ui76-green:#34c759;
  --ui76-blue:#4aa3ff;
  --ui76-purple:#9b6bff;
  --ui76-text:#eaf2f8;
  --ui76-muted:#9fb3c4;
  --ui76-line:#1e3a52;
  --ui76-grad:linear-gradient(135deg,#f5c451 0%,#e09a2b 100%);
  --ui76-grad2:linear-gradient(135deg,#4aa3ff 0%,#9b6bff 100%);
  --ui76-shadow:0 6px 18px rgba(0,0,0,.45);
  --ui76-radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:62.5%;scroll-behavior:smooth}
body{
  font-family:'Segoe UI','Noto Sans Bengali','Hind Siliguri',Roboto,Arial,sans-serif;
  background:radial-gradient(circle at 20% 0%,#15324a 0%,var(--ui76-bg) 55%);
  color:var(--ui76-text);
  line-height:1.55;
  font-size:1.6rem;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:var(--ui76-gold);text-decoration:none;transition:color .2s}
a:hover{color:#ffe39a}
img{max-width:100%;display:block}
ul{list-style:none}

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

/* ---------- Header ---------- */
.ui76-header{
  position:sticky;top:0;z-index:1000;
  background:linear-gradient(180deg,#0d2233 0%,#0b1c2a 100%);
  border-bottom:1px solid var(--ui76-line);
  padding:10px 14px;
  display:flex;align-items:center;gap:10px;
}
.ui76-logo{
  display:flex;align-items:center;gap:8px;flex:1;min-width:0;
}
.ui76-logo-icon{
  width:34px;height:34px;border-radius:10px;
  background:var(--ui76-grad);
  display:grid;place-items:center;color:#10202c;font-weight:800;font-size:1.7rem;
  box-shadow:0 2px 8px rgba(245,196,81,.35);
}
.ui76-logo-text{font-weight:800;font-size:1.9rem;color:#fff;letter-spacing:.5px;line-height:1}
.ui76-logo-text small{display:block;font-size:1.05rem;color:var(--ui76-gold);font-weight:600;margin-top:2px}
.ui76-menu-btn{
  background:transparent;border:0;color:var(--ui76-text);
  font-size:2.2rem;cursor:pointer;padding:4px 6px;border-radius:8px;
}
.ui76-menu-btn:hover{background:rgba(255,255,255,.06)}
.ui76-btn{
  border:0;border-radius:22px;padding:8px 16px;font-size:1.35rem;
  font-weight:700;cursor:pointer;transition:transform .15s, box-shadow .15s, filter .15s;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.ui76-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.ui76-btn-login{background:#1c3850;color:#eaf2f8;border:1px solid #2c5070}
.ui76-btn-register{
  background:var(--ui76-grad);color:#10202c;
  box-shadow:0 4px 12px rgba(245,196,81,.35);
}

/* ---------- Mobile slide menu ---------- */
.ui76-menu-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.ui76-menu-backdrop.ui76-open{opacity:1;pointer-events:auto}
.ui76-side-menu{
  position:fixed;top:0;right:-86%;width:86%;max-width:360px;height:100%;
  background:linear-gradient(180deg,#102334,#0b1c2a);z-index:9999;
  transition:right .3s ease;padding:18px 16px 30px;overflow-y:auto;
  border-left:1px solid var(--ui76-line);box-shadow:-8px 0 30px rgba(0,0,0,.5);
}
.ui76-side-menu.ui76-open{right:0}
.ui76-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ui76-menu-head h3{color:var(--ui76-gold);font-size:1.8rem}
.ui76-menu-close{background:transparent;border:0;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1}
.ui76-menu-cta{display:flex;gap:8px;margin-bottom:14px}
.ui76-menu-cta .ui76-btn{flex:1;justify-content:center;padding:10px}
.ui76-side-menu nav a{
  display:flex;align-items:center;gap:12px;
  padding:12px 10px;border-radius:10px;color:var(--ui76-text);
  font-size:1.5rem;border-bottom:1px solid rgba(255,255,255,.04);
}
.ui76-side-menu nav a:hover{background:rgba(245,196,81,.08);color:var(--ui76-gold)}
.ui76-side-menu nav a i{width:22px;font-size:1.7rem;color:var(--ui76-gold)}

/* ---------- Main ---------- */
main{padding:0 0 90px}
.ui76-sec{padding:18px 14px}
.ui76-sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ui76-sec-head h2{font-size:1.8rem;color:#fff;display:flex;align-items:center;gap:8px}
.ui76-sec-head h2 i{color:var(--ui76-gold)}
.ui76-sec-head a{font-size:1.25rem}

/* ---------- Hero ---------- */
.ui76-hero{
  position:relative;
  background:linear-gradient(135deg,#163a55 0%,#0e2a40 60%,#0a1d2e 100%);
  margin:12px;border-radius:18px;overflow:hidden;
  border:1px solid var(--ui76-line);box-shadow:var(--ui76-shadow);
}
.ui76-hero-inner{padding:22px 18px;position:relative;z-index:2}
.ui76-hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(245,196,81,.15);color:var(--ui76-gold);
  font-size:1.15rem;font-weight:700;padding:4px 10px;border-radius:20px;margin-bottom:10px;
}
.ui76-hero h1{
  font-size:2.6rem;line-height:1.25;color:#fff;margin-bottom:10px;font-weight:800;
}
.ui76-hero h1 span{color:var(--ui76-gold)}
.ui76-hero p{color:var(--ui76-muted);font-size:1.35rem;margin-bottom:16px}
.ui76-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.ui76-hero-actions .ui76-btn{padding:12px 18px;font-size:1.45rem;flex:1;min-width:130px;justify-content:center}
.ui76-hero-actions .ui76-btn-register{background:var(--ui76-grad)}
.ui76-hero-actions .ui76-btn-soft{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15)}
.ui76-hero-stats{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.ui76-hero-stat{
  flex:1;min-width:90px;background:rgba(0,0,0,.25);border:1px solid var(--ui76-line);
  border-radius:12px;padding:8px 6px;text-align:center;
}
.ui76-hero-stat b{display:block;color:var(--ui76-gold);font-size:1.7rem;font-weight:800}
.ui76-hero-stat small{color:var(--ui76-muted);font-size:1.1rem}

/* ---------- Marquee ---------- */
.ui76-marquee{
  background:linear-gradient(90deg,#3a0d0d,#5a1313,#3a0d0d);
  color:#ffd9a8;font-size:1.25rem;font-weight:600;
  padding:8px 0;margin:0 12px 4px;border-radius:10px;overflow:hidden;
  border:1px solid #5a2a2a;
}
.ui76-marquee span{display:inline-block;padding-left:100%;white-space:nowrap;animation:ui76scroll 22s linear infinite}
@keyframes ui76scroll{to{transform:translateX(-100%)}}

/* ---------- Category chips ---------- */
.ui76-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.ui76-chips::-webkit-scrollbar{display:none}
.ui76-chip{
  flex:0 0 auto;background:var(--ui76-card);border:1px solid var(--ui76-line);
  color:var(--ui76-text);padding:8px 14px;border-radius:22px;
  font-size:1.3rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
}
.ui76-chip.active{background:var(--ui76-grad);color:#10202c;border-color:transparent}

/* ---------- Game grid ---------- */
.ui76-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.ui76-card{
  background:var(--ui76-card);border:1px solid var(--ui76-line);
  border-radius:var(--ui76-radius);overflow:hidden;cursor:pointer;
  transition:transform .18s, box-shadow .18s;position:relative;
}
.ui76-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.5)}
.ui76-card-img{
  aspect-ratio:1/1;width:100%;background:#0a1828;
  display:grid;place-items:center;overflow:hidden;
}
.ui76-card-img img{width:100%;height:100%;object-fit:cover}
.ui76-card-hot{
  position:absolute;top:6px;left:6px;background:var(--ui76-red);color:#fff;
  font-size:1rem;font-weight:800;padding:2px 7px;border-radius:8px;
}
.ui76-card-tag{
  position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);color:var(--ui76-gold);
  font-size:1rem;font-weight:700;padding:2px 7px;border-radius:8px;
}
.ui76-card-name{
  padding:7px 8px 9px;text-align:center;font-size:1.2rem;color:var(--ui76-text);
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ui76-card-play{
  display:block;margin:0 auto 8px;width:calc(100% - 12px);
  background:var(--ui76-grad);color:#10202c;border:0;border-radius:8px;
  padding:5px 0;font-size:1.15rem;font-weight:700;cursor:pointer;
}

/* ---------- Promo banner ---------- */
.ui76-promo{
  background:linear-gradient(120deg,#3a1d6b,#1c4a8a);
  border-radius:16px;padding:16px;margin:8px 0;border:1px solid #4a2a8a;
  display:flex;align-items:center;gap:12px;
}
.ui76-promo-icon{
  width:48px;height:48px;border-radius:12px;background:var(--ui76-grad);
  display:grid;place-items:center;font-size:2.4rem;color:#10202c;flex:0 0 auto;
}
.ui76-promo-text{flex:1;min-width:0}
.ui76-promo-text b{display:block;color:#fff;font-size:1.55rem;margin-bottom:2px}
.ui76-promo-text small{color:#cdd9e5;font-size:1.2rem}
.ui76-promo .ui76-btn{flex:0 0 auto}

/* ---------- Feature list ---------- */
.ui76-features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ui76-feature{
  background:var(--ui76-card);border:1px solid var(--ui76-line);
  border-radius:12px;padding:14px;text-align:center;
}
.ui76-feature i{font-size:2.6rem;color:var(--ui76-gold);margin-bottom:6px;display:block}
.ui76-feature b{display:block;color:#fff;font-size:1.45rem;margin-bottom:2px}
.ui76-feature small{color:var(--ui76-muted);font-size:1.15rem}

/* ---------- SEO content ---------- */
.ui76-seo{
  background:var(--ui76-card);border:1px solid var(--ui76-line);
  border-radius:14px;padding:16px;margin:14px 0;color:#cbd9e5;font-size:1.3rem;
}
.ui76-seo h2{color:#fff;font-size:1.7rem;margin:10px 0 6px}
.ui76-seo h2:first-child{margin-top:0}
.ui76-seo p{margin-bottom:8px}
.ui76-seo a{color:var(--ui76-gold);text-decoration:underline}

/* ---------- FAQ ---------- */
.ui76-faq-item{
  background:var(--ui76-card);border:1px solid var(--ui76-line);
  border-radius:10px;margin-bottom:8px;overflow:hidden;
}
.ui76-faq-q{
  padding:12px 14px;font-weight:700;color:#fff;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:1.35rem;
}
.ui76-faq-q i{color:var(--ui76-gold);transition:transform .2s}
.ui76-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:#c5d3e0;padding:0 14px;font-size:1.25rem}
.ui76-faq-item.ui76-open .ui76-faq-q i{transform:rotate(180deg)}
.ui76-faq-item.ui76-open .ui76-faq-a{max-height:240px;padding:0 14px 12px}

/* ---------- Footer ---------- */
.ui76-footer{
  background:#091725;border-top:1px solid var(--ui76-line);padding:20px 14px 24px;
}
.ui76-footer-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:16px}
.ui76-footer-col h4{color:var(--ui76-gold);font-size:1.4rem;margin-bottom:8px}
.ui76-footer-col a{display:block;color:#b8c8d6;font-size:1.2rem;padding:4px 0}
.ui76-footer-col a:hover{color:var(--ui76-gold)}
.ui76-footer-bottom{
  border-top:1px solid var(--ui76-line);padding-top:12px;
  text-align:center;color:#7e93a6;font-size:1.1rem;line-height:1.6;
}
.ui76-18{display:inline-block;border:1px solid #5a6b7a;border-radius:50%;padding:2px 6px;color:#aebfcc;font-weight:700;margin-top:6px}

/* ---------- Floating action button ---------- */
.ui76-fab{
  position:fixed;right:12px;bottom:78px;z-index:999;
  background:var(--ui76-grad);color:#10202c;border-radius:50%;
  width:54px;height:54px;display:grid;place-items:center;
  font-size:2.4rem;box-shadow:0 6px 16px rgba(245,196,81,.5);cursor:pointer;
  animation:ui76pulse 1.8s infinite;
}
@keyframes ui76pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---------- Bottom nav ---------- */
.ui76-bottomnav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:0;width:100%;max-width:430px;z-index:1000;
  background:linear-gradient(180deg,#0d2233,#08141f);
  border-top:1px solid var(--ui76-line);
  display:flex;justify-content:space-around;align-items:stretch;
  height:62px;
}
.ui76-bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#9fb3c4;font-size:1.05rem;font-weight:600;gap:2px;text-decoration:none;
  transition:color .2s;min-width:60px;min-height:60px;position:relative;
}
.ui76-bottomnav a i{font-size:2.2rem}
.ui76-bottomnav a.active{color:var(--ui76-gold)}
.ui76-bottomnav a.active::before{
  content:"";position:absolute;top:0;width:30px;height:3px;border-radius:0 0 6px 6px;background:var(--ui76-gold);
}
.ui76-bottomnav a.ui76-bn-promo{
  background:var(--ui76-grad);color:#10202c;border-radius:14px;
  margin:6px;flex:1.1;font-weight:800;
}
.ui76-bottomnav a.ui76-bn-promo i{font-size:2rem;color:#10202c}

/* ---------- Desktop tweaks ---------- */
@media (min-width:769px){
  .ui76-bottomnav{display:none}
  main{padding-bottom:30px}
}

/* ---------- Small screens under 360px ---------- */
@media (max-width:360px){
  .ui76-grid{grid-template-columns:repeat(2,1fr)}
  .ui76-hero h1{font-size:2.2rem}
}