/* ===== GOG mobile layout layer =====
   Goal: har screen par sab kuch centered + well-arranged. Koi card aadha cut nahi,
   koi overlap nahi, koi horizontal scroll nahi (sirf banner carousel snap hota hai).
   Ye file sabse last load hoti hai (index.html me admin.css ke baad). */

:root{--gap:12px;--cols:2}
@media(min-width:480px){:root{--cols:3}}
@media(min-width:700px){:root{--cols:4}}
@media(min-width:900px){:root{--cols:5}}

html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%}
.wrap{width:100%}

/* ---- Game cards: ek line me --vis (default 3) cards, baaki left/right swipe ---- */
:root{--vis:3}
body #rows .row{
  display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start;align-items:flex-start;
  gap:var(--gap)!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;touch-action:pan-x pan-y;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:6px 2px 8px;margin:0;
}
body #rows .row::-webkit-scrollbar{display:none}
body #rows .row .gc{
  flex:0 0 calc((100% - (var(--vis) - 1) * var(--gap)) / var(--vis))!important;
  width:calc((100% - (var(--vis) - 1) * var(--gap)) / var(--vis))!important;
  max-width:none!important;min-width:0!important;margin:0;scroll-snap-align:start;
}
body #rows .row .gc .ga{width:100%}
body #rows .row .gc .pl{justify-content:center;margin:9px 0 0}

/* ---- Live cricket strip: cards poori width, ek ke neeche ek ---- */
body #strip{
  display:flex!important;flex-direction:column;align-items:stretch;gap:var(--gap)!important;
  overflow:visible!important;scroll-snap-type:none;padding:2px 0 8px;
}
body #strip>.mc{width:100%!important;max-width:100%;flex:0 0 auto!important;margin:0!important}

/* ---- Category tabs: wrap + center (cut nahi) ---- */
body .tabs{flex-wrap:wrap;justify-content:center;overflow:visible!important;gap:8px;padding:14px 0 4px}
body .tabs .tab{flex:0 0 auto;max-width:100%;white-space:nowrap}

/* ---- Search + Providers ---- */
body .tools{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px}
body .tool{min-width:0;justify-content:center;white-space:nowrap;overflow:hidden}
body .tool input{text-align:left}
@media(max-width:400px){
  body .tools{grid-template-columns:1fr}
  body .tool{justify-content:flex-start}
  body #prv{justify-content:center}
}

/* ---- Section heads: title + button kabhi cut/overlap nahi ---- */
body .sh{gap:10px;align-items:center}
body .sh>div{min-width:0;flex:1 1 auto}
body .sh h3{overflow-wrap:anywhere}
body .sh button{flex:0 0 auto;white-space:nowrap}

/* ---- Banner carousel: ek time par ek poora banner, center snap ---- */
body .banners{scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
body .banners .ban{flex:0 0 100%;max-width:100%}
body .ban h2{font-size:clamp(30px,10.5vw,44px)}

/* ---- Page level: koi bhi element screen se bahar na nikle ---- */
body main,body section,body .sec,body .tour{max-width:100%}
.tour .top{overflow:hidden}

/* ---- Sports stories (IND v PAK ...): wrap + center, koi circle cut nahi ---- */
body .stories{flex-wrap:wrap;justify-content:center;overflow:visible!important;gap:12px 10px;padding:16px 0 4px}
body .stories .st{flex:0 0 72px}

/* ---- Trade pair chips (EUR/USD ...): wrap + center ---- */
body .lc .chips{flex-wrap:wrap;justify-content:center;overflow:visible!important}
body .lc .chips>*{flex:0 0 auto}

/* ---- Game page headers: back | title | balance | sound ek line me, kuch cut nahi ---- */
#tppg header,#abpg header,#rmpg header,.gpg header{min-width:0;padding:0}
#tppg header h1,#abpg header h1,#rmpg header h1,.gpg header h1{
  flex:1 1 0;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;text-align:center;
  font-size:clamp(13px,4.4vw,19px);letter-spacing:.04em}
#tppg header .bl,#abpg header .bl,#rmpg header .bl,.gpg header .bl{flex:0 0 auto;min-width:0;max-width:44vw;white-space:nowrap}
#tppg header .ib,#abpg header .ib,#rmpg header .ib,.gpg header .ib{flex:0 0 36px}

/* ---- Game pages ke andar ka text: wrap ho, screen se bahar na jaye ---- */
.abh{white-space:normal;line-height:1.35;padding:0 8px;overflow-wrap:anywhere;letter-spacing:.12em}
.rmo{padding:16px 14px}
.rmo b,.rmo span{max-width:100%;overflow-wrap:anywhere}
.rmo span{display:block;white-space:normal;line-height:1.45}
#tppg .gw,#abpg .gw,#rmpg .gw,.gpg .gx{max-width:560px;margin-left:auto;margin-right:auto}

/* ---- Bottom sheet (Coin Flip, Sky Rush, Roulette...) centered + safe ---- */
body #sh,body .sheet{max-width:560px;margin-left:auto;margin-right:auto}

/* ---- Bottom nav ke peeche content na chhupe ---- */
body main.wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* ---- Rummy status bar: wrap + center ---- */
.rmsb{flex-wrap:wrap;justify-content:center}
.rmsb button{margin-left:0}
.rma{gap:6px}.rma button{min-width:0;padding:0 4px;font-size:clamp(12px,3.6vw,14px)}

/* ---- Hall of Glory header ---- */
.lbh{min-width:0}.lbh>*{min-width:0}.lbh h2{font-size:clamp(20px,7vw,26px);overflow-wrap:anywhere}

/* ---- Chhote phones (<=350px): Teen Patti card slots + bet zones chhote ---- */
@media(max-width:350px){
  body .tcw{width:40px;height:57px}
  body .tcs{transform:scale(.526)}
  body .tpr{gap:2px}
  body #tpz .z.e b{font-size:12px;letter-spacing:0}
  body #tpz .z.e small{font-size:9px;letter-spacing:0}
  body #tpz .z{padding-left:2px;padding-right:2px}
  body .lbh{flex-wrap:wrap;justify-content:center;text-align:center}
}

/* ---- 3 cards ek line: chhote cards ke andar text/heart overlap na kare ---- */
body #rows .row .gc .gt{font-size:13px!important;letter-spacing:.02em!important;padding:0 4px;margin-top:26px;line-height:1.1}
body #rows .row .gc .gs{font-size:11px;padding:0 6px;line-height:1.25}
body #rows .row .gc .prov{left:5px!important;right:auto!important;transform:none!important;font-size:8.5px;max-width:calc(100% - 38px);padding:3px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body #rows .row .gc .pl{font-size:11px;gap:4px}
body #rows .row .gc .cs{top:34px!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;font-size:9px!important;padding:3px 8px!important;white-space:nowrap}

/* ---- Game cards: chhote cute left/right slider arrows (sirf left-right slide) ---- */
.rwrap{position:relative}
.rnav{position:absolute;top:calc(50% - 26px);z-index:6;width:24px;height:24px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(8,12,24,.62);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold2);font:700 15px/1 var(--sans);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:.82;transition:opacity .2s,transform .2s;-webkit-tap-highlight-color:transparent;cursor:pointer}
.rnav:active{transform:scale(.88)}
.rnav.l{left:-3px}.rnav.r{right:-3px}
.rnav[hidden]{display:none!important}
.rnav svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* banner image: text/frame/shine overlap nahi (image me already design hota hai) */
body .ban.notx h2,body .ban.notx .gs,body .ban.notx .prov{display:none!important}
body .ban.notx .fx,body .ban.notx .fx:before,body .ban.notx .fx:after,body .ban.notx:before,body .ban.notx:after{display:none!important}
body .ban.hasimg{padding:0}

/* game card with image: clean image, koi overlay/filter/text overlap nahi */
body .gc .ga.gimg{filter:none!important}
body .gc .ga.gimg:after,body .gc .ga.gimg .fx{display:none!important}
body .gc .ga.gnt .gt,body .gc .ga.gnt .gs,body .gc .ga.gnt .prov{display:none!important}