/* ============================================================
   2222bet bd - compact mobile shell stylesheet
   Palette: #34495E / #F0E68C / #DCDCDC / #36454F / #1A1A1A
   Design: humanist headings + clear body, small radius density,
   compact square game catalog, fact-first rhythm, icon micro
   states, square-corner high-contrast CTAs.
   ============================================================ */

:root{
  --mobilea0bb7-ink:#1A1A1A;
  --mobilea0bb7-slate:#34495E;
  --mobilea0bb7-steel:#36454F;
  --mobilea0bb7-gold:#F0E68C;
  --mobilea0bb7-mist:#DCDCDC;
  --mobilea0bb7-panel:#20272E;
  --mobilea0bb7-panel2:#242D35;
  --mobilea0bb7-line:#2C3944;
  --mobilea0bb7-dim:#A7B2BA;
  --mobilea0bb7-dim2:#8A949B;
  --mobilea0bb7-headfont:"Noto Serif Bengali","Noto Serif Bengali UI",Georgia,serif;
  --mobilea0bb7-bodyfont:"Noto Sans Bengali","Hind Siliguri",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:#101214;
  color:var(--mobilea0bb7-mist);
  font-family:var(--mobilea0bb7-bodyfont);
  font-size:15px;
  line-height:1.6;
}
img{max-width:100%;display:block;border:0;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,p{margin:0;}
button{font-family:inherit;}

/* ---------- visible canvas (centered phone frame on wide screens) ---------- */
.mobilea0bb7-shell{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--mobilea0bb7-ink);
  box-shadow:0 0 32px rgba(0,0,0,.65);
  position:relative;
  overflow-x:hidden;
}

/* ---------- skip link ---------- */
.mobilea0bb7-skip{
  position:absolute;left:8px;top:-48px;z-index:120;
  background:var(--mobilea0bb7-gold);color:var(--mobilea0bb7-ink);
  padding:8px 12px;font-size:13px;font-weight:700;border-radius:3px;
  transition:top .2s ease;
}
.mobilea0bb7-skip:focus{top:8px;}

/* ============================================================
   TOP BAR - asymmetric brand head + action strip
   ============================================================ */
.mobilea0bb7-topbar{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#212A32 0%,#1A1A1A 100%);
  border-bottom:1px solid var(--mobilea0bb7-line);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.mobilea0bb7-row1{
  display:flex;align-items:center;justify-content:space-between;
  min-height:52px;padding:6px 10px 4px 0;gap:8px;
}
/* brand block leans left with a gold notch */
.mobilea0bb7-brand{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(90deg,rgba(240,230,140,.14),rgba(240,230,140,0) 82%);
  border-right:1px solid var(--mobilea0bb7-line);
  padding:5px 14px 5px 12px;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
  min-width:0;
}
.mobilea0bb7-brand img{
  width:34px;height:34px;object-fit:contain;flex:0 0 34px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.mobilea0bb7-brand b{
  font-family:var(--mobilea0bb7-headfont);
  font-size:17px;line-height:1.15;color:#FFFFFF;
  font-weight:700;letter-spacing:.2px;white-space:nowrap;
}
.mobilea0bb7-menubtn{
  flex:0 0 44px;height:44px;width:44px;
  background:transparent;border:1px solid var(--mobilea0bb7-line);
  border-radius:3px;color:var(--mobilea0bb7-gold);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.mobilea0bb7-menubtn span{
  display:block;width:18px;height:2px;background:currentColor;
  position:relative;border-radius:1px;transition:background .18s ease;
}
.mobilea0bb7-menubtn span::before,
.mobilea0bb7-menubtn span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;
  background:currentColor;border-radius:1px;transition:transform .18s ease,top .18s ease;
}
.mobilea0bb7-menubtn span::before{top:-6px;}
.mobilea0bb7-menubtn span::after{top:6px;}
.mobilea0bb7-menubtn[aria-expanded="true"] span{background:transparent;}
.mobilea0bb7-menubtn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.mobilea0bb7-menubtn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* action strip keeps auth outside the brand zone */
.mobilea0bb7-actions{
  display:flex;gap:8px;padding:6px 10px 8px;
}
.mobilea0bb7-btn{
  flex:1;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;font-weight:700;letter-spacing:.2px;
  border-radius:2px;cursor:pointer;
  transition:transform .12s ease,background-color .18s ease,color .18s ease;
}
.mobilea0bb7-btn:active{transform:translateY(1px);}
.mobilea0bb7-btn-gold{
  background:var(--mobilea0bb7-gold);color:var(--mobilea0bb7-ink);
  border:1px solid #D9C96A;
}
.mobilea0bb7-btn-gold:hover{background:#F7EEB0;}
.mobilea0bb7-btn-ghost{
  background:transparent;color:var(--mobilea0bb7-gold);
  border:1px solid var(--mobilea0bb7-gold);
}
.mobilea0bb7-btn-ghost:hover{background:rgba(240,230,140,.12);}

/* ============================================================
   SECTIONAL MENU PAGE (slides over the canvas from the right)
   ============================================================ */
.mobilea0bb7-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(86%,340px);
  background:#1E252C;
  border-left:2px solid var(--mobilea0bb7-gold);
  transform:translateX(102%);
  transition:transform .26s ease;
  overflow-y:auto;
  padding-bottom:24px;
}
.mobilea0bb7-menu.mobilea0bb7-open{transform:translateX(0);}
.mobilea0bb7-menuhead{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--mobilea0bb7-line);
  position:sticky;top:0;background:#1E252C;z-index:2;
}
.mobilea0bb7-menuhead b{
  font-family:var(--mobilea0bb7-headfont);font-size:15px;color:var(--mobilea0bb7-gold);
}
.mobilea0bb7-menuclose{
  min-height:44px;min-width:44px;background:transparent;
  border:1px solid var(--mobilea0bb7-line);border-radius:3px;
  color:var(--mobilea0bb7-mist);font-size:16px;cursor:pointer;line-height:1;
}
.mobilea0bb7-mcat{
  font-size:11px;font-weight:700;color:var(--mobilea0bb7-dim2);
  letter-spacing:1.2px;padding:14px 16px 4px;
}
.mobilea0bb7-mlink{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:46px;padding:8px 16px;font-size:13.5px;color:var(--mobilea0bb7-mist);
  border-bottom:1px solid #26303A;
}
.mobilea0bb7-mlink::after{
  content:"\203A";color:var(--mobilea0bb7-gold);font-size:16px;font-weight:700;
}
.mobilea0bb7-mlink:hover{background:rgba(240,230,140,.07);color:#fff;}
.mobilea0bb7-mlink[aria-current="page"]{
  color:var(--mobilea0bb7-gold);background:rgba(240,230,140,.08);
  border-left:3px solid var(--mobilea0bb7-gold);padding-left:13px;
}
.mobilea0bb7-menucta{
  margin:16px 14px 0;
}
.mobilea0bb7-scrim{
  position:fixed;inset:0;z-index:80;background:rgba(8,10,12,.66);
  opacity:0;pointer-events:none;transition:opacity .24s ease;
}
.mobilea0bb7-scrim.mobilea0bb7-open{opacity:1;pointer-events:auto;}

/* ============================================================
   MAIN CANVAS
   ============================================================ */
.mobilea0bb7-main{
  padding:12px 12px calc(92px + env(safe-area-inset-bottom));
}

/* ---------- hero ---------- */
.mobilea0bb7-hero{
  border:1px solid var(--mobilea0bb7-line);
  border-radius:4px;overflow:hidden;
  background:var(--mobilea0bb7-panel);
  padding:14px 12px 12px;
  margin-bottom:12px;
}
.mobilea0bb7-h1{
  font-family:var(--mobilea0bb7-headfont);
  font-size:20px;line-height:1.4;color:#FFFFFF;
  padding-left:10px;border-left:4px solid var(--mobilea0bb7-gold);
  margin-bottom:8px;
}
.mobilea0bb7-lead{
  font-size:12.5px;line-height:1.7;color:var(--mobilea0bb7-dim);
  padding-left:14px;margin-bottom:12px;
}
.mobilea0bb7-lead strong{color:var(--mobilea0bb7-gold);font-weight:700;}

/* ---------- promo carousel ---------- */
.mobilea0bb7-carousel{
  position:relative;border-radius:3px;overflow:hidden;
  border:1px solid #31404C;background:#151A1F;
}
.mobilea0bb7-track{
  display:flex;transition:transform .4s ease;
  touch-action:pan-y;
}
.mobilea0bb7-slide{
  flex:0 0 100%;position:relative;display:block;
}
.mobilea0bb7-slide img{
  width:100%;aspect-ratio:2/1;object-fit:cover;
}
.mobilea0bb7-slidecap{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 38px 8px 10px;
  background:linear-gradient(180deg,rgba(10,12,14,0) 0%,rgba(10,12,14,.88) 78%);
  font-size:12px;font-weight:600;color:#fff;line-height:1.45;
}
.mobilea0bb7-dots{
  position:absolute;bottom:8px;right:10px;
  display:flex;gap:6px;align-items:center;
}
.mobilea0bb7-dot{
  width:22px;height:4px;padding:0;border:0;cursor:pointer;
  background:rgba(220,220,220,.38);border-radius:2px;
  transition:background-color .25s ease;
}
.mobilea0bb7-dot.mobilea0bb7-on{background:var(--mobilea0bb7-gold);}

/* ---------- quick access strip ---------- */
.mobilea0bb7-quick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
  margin-bottom:6px;
}
.mobilea0bb7-qk{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--mobilea0bb7-panel);border:1px solid var(--mobilea0bb7-line);
  border-radius:3px;padding:9px 4px 7px;min-height:62px;justify-content:center;
  font-size:10.5px;color:var(--mobilea0bb7-mist);text-align:center;line-height:1.3;
  transition:border-color .16s ease;
}
.mobilea0bb7-qk:hover{border-color:var(--mobilea0bb7-gold);}
.mobilea0bb7-qk svg{width:20px;height:20px;color:var(--mobilea0bb7-gold);}

/* ============================================================
   SECTION SHELL + HEADINGS
   ============================================================ */
.mobilea0bb7-sect{margin-top:20px;}
.mobilea0bb7-h2{
  font-family:var(--mobilea0bb7-headfont);
  font-size:16.5px;line-height:1.45;color:var(--mobilea0bb7-gold);
  margin-bottom:7px;font-weight:700;
}
.mobilea0bb7-h2a{                       /* variant: gold left rail */
  padding-left:9px;border-left:4px solid var(--mobilea0bb7-gold);
}
.mobilea0bb7-h2b{                       /* variant: steel baseline */
  padding:0 2px 6px;border-bottom:1px solid var(--mobilea0bb7-line);
  position:relative;
}
.mobilea0bb7-h2b::after{
  content:"";position:absolute;left:2px;bottom:-1px;width:56px;height:2px;
  background:var(--mobilea0bb7-gold);
}
.mobilea0bb7-sintro{
  font-size:12.5px;line-height:1.7;color:var(--mobilea0bb7-dim);
  margin-bottom:10px;
}
.mobilea0bb7-sintro a{
  color:var(--mobilea0bb7-gold);border-bottom:1px dashed rgba(240,230,140,.55);
  font-weight:600;
}

/* ============================================================
   COMPACT SQUARE GAME CATALOG
   ============================================================ */
.mobilea0bb7-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px 6px;
}
.mobilea0bb7-gm{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  background:linear-gradient(165deg,#242E37 0%,#1D252C 100%);
  border:1px solid #2E3B46;border-radius:4px;
  padding:5px 4px 6px;
  transition:border-color .15s ease,transform .12s ease;
}
.mobilea0bb7-gm:hover{border-color:var(--mobilea0bb7-gold);}
.mobilea0bb7-gm:active{transform:scale(.97);}
.mobilea0bb7-gm img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:3px;background:#151A20;
}
.mobilea0bb7-gmn{
  font-size:10.5px;line-height:1.3;color:var(--mobilea0bb7-mist);
  text-align:center;min-height:27px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}

/* ============================================================
   FEATURES - scannable comparable rows
   ============================================================ */
.mobilea0bb7-feats{
  border:1px solid var(--mobilea0bb7-line);border-radius:4px;
  background:var(--mobilea0bb7-panel);overflow:hidden;
}
.mobilea0bb7-feat{
  display:grid;grid-template-columns:104px 1fr;gap:10px;
  padding:10px 11px;border-bottom:1px solid #26313B;
  font-size:12.5px;line-height:1.6;
}
.mobilea0bb7-feat:last-child{border-bottom:0;}
.mobilea0bb7-featdt{
  font-weight:700;color:var(--mobilea0bb7-gold);font-size:12px;line-height:1.5;
}
.mobilea0bb7-featdd{color:var(--mobilea0bb7-dim);}
.mobilea0bb7-featdd a{
  color:var(--mobilea0bb7-gold);border-bottom:1px dashed rgba(240,230,140,.55);
}

/* ============================================================
   PROSE BLOCKS (what-is)
   ============================================================ */
.mobilea0bb7-prose p{
  font-size:12.5px;line-height:1.75;color:var(--mobilea0bb7-dim);
  margin-bottom:9px;
}
.mobilea0bb7-prose p:last-child{margin-bottom:0;}
.mobilea0bb7-prose strong{color:var(--mobilea0bb7-mist);font-weight:600;}

/* ============================================================
   FAQ (details / summary)
   ============================================================ */
.mobilea0bb7-qa{
  background:var(--mobilea0bb7-panel);border:1px solid var(--mobilea0bb7-line);
  border-radius:4px;margin-bottom:7px;overflow:hidden;
}
.mobilea0bb7-qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:9px;
  min-height:46px;padding:10px 12px;
  font-size:12.5px;font-weight:700;color:var(--mobilea0bb7-mist);line-height:1.5;
}
.mobilea0bb7-qa summary::-webkit-details-marker{display:none;}
.mobilea0bb7-qa summary::before{
  content:"+";flex:0 0 18px;height:18px;line-height:1;
  color:var(--mobilea0bb7-gold);font-size:16px;font-weight:700;text-align:center;
}
.mobilea0bb7-qa[open] summary::before{content:"\2212";}
.mobilea0bb7-qa[open]{border-color:#3B4B58;}
.mobilea0bb7-ans{
  padding:0 12px 11px 39px;
  font-size:12px;line-height:1.7;color:var(--mobilea0bb7-dim);
}

/* ============================================================
   TRICKS
   ============================================================ */
.mobilea0bb7-tricks li{
  position:relative;padding:9px 10px 9px 34px;
  background:var(--mobilea0bb7-panel);border:1px solid var(--mobilea0bb7-line);
  border-radius:4px;margin-bottom:7px;
  font-size:12.5px;line-height:1.65;color:var(--mobilea0bb7-dim);
}
.mobilea0bb7-tricks li::before{
  content:counter(mobilea0bb7tick);
  counter-increment:mobilea0bb7tick;
  position:absolute;left:9px;top:9px;
  width:18px;height:18px;border-radius:2px;
  background:rgba(240,230,140,.14);border:1px solid rgba(240,230,140,.5);
  color:var(--mobilea0bb7-gold);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.mobilea0bb7-tricks{counter-reset:mobilea0bb7tick;list-style:none;}
.mobilea0bb7-tricks b{color:var(--mobilea0bb7-mist);font-weight:600;}
.mobilea0bb7-tricks a{
  color:var(--mobilea0bb7-gold);border-bottom:1px dashed rgba(240,230,140,.55);
}

/* ============================================================
   FACT SUMMARY
   ============================================================ */
.mobilea0bb7-facts{
  border:1px dashed #3A4A57;border-radius:4px;
  padding:4px 12px;background:rgba(52,73,94,.16);
}
.mobilea0bb7-fact{
  display:flex;gap:9px;padding:8px 0;
  border-bottom:1px solid rgba(54,69,79,.6);
  font-size:12.5px;line-height:1.6;
}
.mobilea0bb7-fact:last-child{border-bottom:0;}
.mobilea0bb7-fact::before{
  content:"";flex:0 0 7px;height:7px;margin-top:6px;
  background:var(--mobilea0bb7-gold);
}
.mobilea0bb7-fact b{color:var(--mobilea0bb7-mist);font-weight:600;}

/* ============================================================
   EXTENDED FOOTER  (directory > brand > promotions > disclaimer)
   ============================================================ */
.mobilea0bb7-xfoot{
  margin-top:26px;padding-top:14px;
  border-top:2px solid var(--mobilea0bb7-gold);
}
.mobilea0bb7-xfhead{
  font-family:var(--mobilea0bb7-headfont);
  font-size:13.5px;color:var(--mobilea0bb7-gold);font-weight:700;
  letter-spacing:.4px;margin:16px 0 7px;
}
.mobilea0bb7-xfhead:first-child{margin-top:2px;}
.mobilea0bb7-xflink{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:44px;padding:9px 2px;
  border-bottom:1px dashed #2C3944;
  font-size:12.5px;color:var(--mobilea0bb7-dim);line-height:1.5;
}
.mobilea0bb7-xflink::after{
  content:"\203A";color:var(--mobilea0bb7-gold);font-size:15px;font-weight:700;flex:0 0 auto;
}
.mobilea0bb7-xflink:hover{color:#fff;}
.mobilea0bb7-xflink span{color:var(--mobilea0bb7-dim2);font-size:10.5px;display:block;}
.mobilea0bb7-xflink:hover span{color:var(--mobilea0bb7-dim);}
.mobilea0bb7-xfbrand p{
  font-size:12px;line-height:1.75;color:var(--mobilea0bb7-dim);
}
.mobilea0bb7-xfpromos{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.mobilea0bb7-xfp{
  min-height:52px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:8px 6px;
  background:var(--mobilea0bb7-panel);border:1px solid #3A4A57;border-radius:2px;
  color:var(--mobilea0bb7-mist);font-size:11.5px;font-weight:600;line-height:1.4;
  cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease;
}
.mobilea0bb7-xfp:hover{border-color:var(--mobilea0bb7-gold);background:var(--mobilea0bb7-panel2);}
.mobilea0bb7-xfp b{color:var(--mobilea0bb7-gold);display:block;font-size:12px;}
.mobilea0bb7-xfdisc{
  margin-top:8px;padding:9px 11px;
  background:#20262C;border-left:3px solid var(--mobilea0bb7-slate);
  border-radius:0 3px 3px 0;
  font-size:11px;line-height:1.65;color:var(--mobilea0bb7-dim2);
}

/* ---------- plain copyright foot ---------- */
.mobilea0bb7-foot{
  padding:14px 12px 8px;text-align:center;
  font-size:11px;color:var(--mobilea0bb7-dim2);
  border-top:1px solid #232D36;margin-top:18px;
}

/* ============================================================
   BOTTOM NAV - center raised, sliding indicator
   ============================================================ */
.mobilea0bb7-bnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:70;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(24,29,34,.97);
  border-top:1px solid var(--mobilea0bb7-line);
  padding-bottom:env(safe-area-inset-bottom);
  backdrop-filter:blur(8px);
}
.mobilea0bb7-navind{
  position:absolute;top:-1px;left:0;height:3px;width:38px;
  background:var(--mobilea0bb7-gold);
  transition:left .3s cubic-bezier(.4,0,.2,1);
  transform:translateX(-50%);
}
.mobilea0bb7-bi{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:58px;padding:4px 2px 6px;
  font-size:9.5px;color:var(--mobilea0bb7-dim2);line-height:1.2;
  background:transparent;border:0;cursor:pointer;position:relative;
}
.mobilea0bb7-bi svg{width:21px;height:21px;transition:transform .18s ease;}
.mobilea0bb7-bi:hover svg{transform:translateY(-2px);}
.mobilea0bb7-bi[aria-current="page"]{color:var(--mobilea0bb7-gold);font-weight:700;}
/* linear icon -> filled glyph on the active role */
.mobilea0bb7-bi[aria-current="page"] .mobilea0bb7-ifill{fill:currentColor;}
.mobilea0bb7-bi[aria-current="page"] svg{stroke:var(--mobilea0bb7-gold);}
/* raised center promo role */
.mobilea0bb7-bcenter{
  margin-top:-24px;
}
.mobilea0bb7-bcore{
  width:52px;height:52px;border-radius:50%;
  background:var(--mobilea0bb7-gold);color:var(--mobilea0bb7-ink);
  display:flex;align-items:center;justify-content:center;
  border:3px solid #1A1A1A;
  box-shadow:0 4px 14px rgba(240,230,140,.28);
  transition:transform .16s ease;
}
.mobilea0bb7-bcenter:hover .mobilea0bb7-bcore{transform:translateY(-3px);}
.mobilea0bb7-bcenter svg{width:24px;height:24px;stroke:var(--mobilea0bb7-ink);}
.mobilea0bb7-bclabel{
  margin-top:3px;font-size:9.5px;color:var(--mobilea0bb7-gold);font-weight:700;
}

/* ============================================================
   FOCUS + MOTION
   ============================================================ */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--mobilea0bb7-gold);outline-offset:2px;border-radius:2px;
}
::selection{background:var(--mobilea0bb7-gold);color:var(--mobilea0bb7-ink);}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto;}
}

/* ============================================================
   BREAKPOINTS - 320 first, densify upward
   ============================================================ */
@media (min-width:360px){
  .mobilea0bb7-gmn{font-size:11px;}
  .mobilea0bb7-h1{font-size:21px;}
}
@media (min-width:400px){
  .mobilea0bb7-grid{grid-template-columns:repeat(5,1fr);}
  .mobilea0bb7-main{padding-left:14px;padding-right:14px;}
}
@media (min-width:430px){
  .mobilea0bb7-gmn{font-size:11.5px;min-height:29px;}
  .mobilea0bb7-h2{font-size:17.5px;}
  .mobilea0bb7-quick{gap:9px;}
  .mobilea0bb7-xfpromos{gap:10px;}
}
@media (min-width:481px){
  body{font-size:16px;}
  .mobilea0bb7-h1{font-size:23px;}
}