/* =====================================================================
   gks-v116.css  -  FINAL LAYER (loaded LAST on every user page)
   1. Maroon Durga wallpaper everywhere (never navy / blank / flash)
   2. No "page coming from the side" - plain soft fade only
   3. Login page: one calm entrance, no stutter
   4. Boxes: soft glass look + transparent festival emoji inside
   5. Light animations (rise-in, float, glow, button pulse)
   Other festivals (Diwali, Holi ...) still work: rules below skip html[data-th-full].
   To remove all of this: delete the 2 lines  gks-v116.css / gks-v116.js  at the end of each page.
   ===================================================================== */

/* ---------- 1. WALLPAPER ---------- */
html:not([data-th-full]):not(#z):not(#zz){
  background:#0d0712 url(/assets/bg-wall.jpg?v=162) center top/cover no-repeat fixed!important;
  min-height:100%}
html:not([data-th-full]):not(#z):not(#zz) body{
  background:transparent!important;background-image:none!important}
html:not([data-th-full]):not(#z):not(#zz)::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#0d0712 url(/assets/bg-wall.jpg?v=162) center/cover no-repeat!important}
/* wrappers never paint their own colour on top of the wallpaper */
html:not([data-th-full]):not(#z):not(#zz) body #main-app,
html:not([data-th-full]):not(#z):not(#zz) body .page-content,
html:not([data-th-full]):not(#z):not(#zz) body #page-dashboard,
html:not([data-th-full]):not(#z):not(#zz) body #page-home,
html:not([data-th-full]):not(#z):not(#zz) body #page-history,
html:not([data-th-full]):not(#z):not(#zz) body #page-referral,
html:not([data-th-full]):not(#z):not(#zz) body #page-profile,
html:not([data-th-full]):not(#z):not(#zz) body #page-add-money,
html:not([data-th-full]):not(#z):not(#zz) body #page-support,
html:not([data-th-full]):not(#z):not(#zz) body #page-notifications,
html:not([data-th-full]):not(#z):not(#zz) body #page-api,
html:not([data-th-full]):not(#z):not(#zz) body #page-docs{
  background:transparent!important;background-image:none!important}
/* loading page: wallpaper + soft gold glow (the old grid / dark box is gone) */
html:not([data-th-full]):not(#z):not(#zz) body.gksLoad{background:transparent!important}
html:not([data-th-full]):not(#z):not(#zz) body.gksLoad::before{
  background:
    radial-gradient(ellipse 80% 42% at 50% 34%,rgba(166,99,242,.20),transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 100%,rgba(244,122,51,.14),transparent 72%)!important}

/* ---------- 2. NO SLIDE-IN / NO FLASH ---------- */
@keyframes g116Fade{from{opacity:0}to{opacity:1}}
html body{animation:none!important;transform:none!important}
html body #main-app,
html body #page-dashboard,html body #page-home,html body #page-history,html body #page-referral,
html body #page-profile,html body #page-add-money,html body #page-support,html body #page-notifications,
html body #page-api,html body #page-docs{
  transform:none!important;animation:g116Fade .28s ease both!important}
/* the promo pop-up never slides in from a side, it just fades */
html body .promo-popup{animation:g116Fade .25s ease both!important}
html body .promo-popup-card{transform:none!important}

/* ---------- 3. LOGIN / REGISTER PAGE: calm, no glitch ---------- */
html body #wrap{animation:g116Fade .35s ease both!important}
html body #wrap>*,
html body #wrap .card,
html body #wrap .pane,
html body #wrap form>*{
  animation:none!important;opacity:1!important;transform:none!important}
html body #wrap .card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;will-change:auto!important}
html body #wrap .pane{transition:none!important}
html body #wrap .in,html body #wrap .btn,html body #wrap .gbtn{transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease!important}
html body #wrap .btn:active,html body #wrap .gbtn:active{transform:scale(.985)!important}

/* ---------- 4. BOXES: soft glass + festival emoji inside ---------- */
html body :is(.hbCard,.statCard,.monthly-challenge-card,.pc-card,.rk-card,.rk-stat,.manual-upi-deposit-card,
  .deposit-history-card,.deposit-history-item,.history-card,.profile-card,.profile-stat,.password-card,.gp-card){
  border-radius:22px!important}
html body :is(.statCard,.rk-stat,.profile-stat){
  box-shadow:0 10px 26px rgba(0,0,0,.34),inset 0 1px 0 rgba(220,192,253,.14)!important}
html body :is(.pc-card,.rk-card,.history-card,.deposit-history-card,.deposit-history-item,.profile-card,.password-card,.gp-card,.manual-upi-deposit-card){
  background-image:linear-gradient(150deg,rgba(204,162,253,.07),rgba(255,255,255,0) 42%)!important;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:0 12px 30px rgba(0,0,0,.30),inset 0 1px 0 rgba(220,192,253,.12)!important}

/* the transparent emoji (inserted by gks-v116.js) */
.g116-deco{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0;contain:paint}
.g116-deco::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 12% 0%,rgba(201,157,252,.16),transparent 46%)}
.g116-deco::after{content:attr(data-e);position:absolute;right:14px;bottom:8px;
  font-size:46px;line-height:1;opacity:.14;filter:saturate(1.1);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  transform:rotate(-8deg);animation:g116Float 5s ease-in-out infinite}
.g116-deco.tile::after{right:12px;bottom:auto;top:50%;font-size:40px;margin-top:-20px;animation-name:g116FloatMid}
.g116-deco.wide::after{font-size:58px;right:18px;bottom:6px}
.g116-deco.alt::after{right:auto;left:12px;transform:rotate(8deg);animation-delay:-2s}

/* ---------- 5. ANIMATIONS ---------- */
@keyframes g116Rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes g116Float{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-6px)}}
@keyframes g116FloatMid{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-5px)}}
@keyframes g116Glow{0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.38),0 0 0 1px rgba(166,99,242,.30),0 0 18px rgba(166,99,242,.14)}
  50%{box-shadow:0 14px 34px rgba(0,0,0,.38),0 0 0 1px rgba(201,157,252,.55),0 0 30px rgba(166,99,242,.30)}}
@keyframes g116Pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes g116Sheen{0%{transform:translateX(-140%) skewX(-18deg)}60%,100%{transform:translateX(320%) skewX(-18deg)}}

html body :is(.statCard,.rk-stat,.profile-stat,.jc2,.monthly-challenge-card,.pc-card,.rk-card,.history-card,
  .deposit-history-card,.deposit-history-item,.profile-card,.password-card,.gp-card,.manual-upi-deposit-card){
  animation:g116Rise .5s cubic-bezier(.2,.8,.3,1) both}
html body .statsGrid>*:nth-child(1){animation-delay:.05s}
html body .statsGrid>*:nth-child(2){animation-delay:.12s}
html body .statsGrid>*:nth-child(3){animation-delay:.19s}
html body .statsGrid>*:nth-child(4){animation-delay:.26s}
html body .jc2{animation-delay:.02s}
html body .hbCard{animation:g116Glow 3.6s ease-in-out infinite}
html body .hb-add{animation:g116Pulse 2.6s ease-in-out infinite}
html body .jc2 .jc2-ar{animation:g116Pulse 2.2s ease-in-out infinite}

/* press feedback on every tappable box */
html body :is(.statCard,.jc2,.pc-card,.rk-card,.history-card,.deposit-history-item){transition:transform .16s ease,filter .16s ease}
html body :is(.statCard,.jc2,.pc-card,.rk-card,.history-card,.deposit-history-item):active{transform:scale(.982)!important;filter:brightness(1.08)}

@media (prefers-reduced-motion:reduce){
  .g116-deco::after,html body .hbCard,html body .hb-add,html body .jc2 .jc2-ar,
  html body :is(.statCard,.rk-stat,.profile-stat,.jc2,.pc-card,.rk-card,.history-card,.deposit-history-item){animation:none!important}
}

/* ---------- loading page: one stable system font (no late font swap = no "text glitch") ---------- */
body.gksLoad,body.gksLoad *{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Noto Color Emoji",sans-serif!important}
body.gksLoad .sec{font-weight:700;letter-spacing:.24em}