/* ═══════════════════════════
   WISHWORK – style.css  v5
   Shimmer Bet Card + all prev
═══════════════════════════ */

/* ── RESET ── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',sans-serif;background:#080c18;color:#e8edf5;min-height:100vh;overscroll-behavior:none}
input,button{font-family:'Space Grotesk',sans-serif}
button{cursor:pointer;border:none;transition:opacity .2s ease,transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease}
::-webkit-scrollbar{display:none}

/* ── KEYFRAMES ── */
@keyframes trendingRedFlow{
  0%{background-position:150% center}
  15%{background-position:100% center}
  30%{background-position:50% center}
  45%{background-position:0% center}
  60%{background-position:-50% center}
  75%{background-position:-100% center}
  90%,100%{background-position:-150% center}
}
@keyframes greenRupeeGlow{
  0%,100%{text-shadow:0 0 8px rgba(34,197,94,.7),0 0 18px rgba(34,197,94,.4),0 0 32px rgba(34,197,94,.2)}
  50%{text-shadow:0 0 14px rgba(34,197,94,1),0 0 28px rgba(34,197,94,.7),0 0 48px rgba(34,197,94,.35),0 0 70px rgba(34,197,94,.15)}
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.85}}
@keyframes bounceUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes shimmerSlide{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes scanline{0%{transform:translateY(-4vh)}100%{transform:translateY(104vh)}}
@keyframes cardIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes slideUp{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes slideInRight{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
@keyframes hotBlink{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes liveDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}
@keyframes rupeeGlow{0%,100%{text-shadow:0 0 5px rgba(34,197,94,.4)}50%{text-shadow:0 0 12px rgba(34,197,94,.7),0 0 24px rgba(34,197,94,.25)}}
@keyframes shineSwipe{0%{transform:translateX(-110%)}60%,100%{transform:translateX(210%)}}
@keyframes marquee{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
@keyframes subtleGlow{0%,100%{opacity:.05}50%{opacity:.13}}
@keyframes orangePulse{0%,100%{box-shadow:0 0 16px rgba(255,106,0,.4),0 0 32px rgba(255,106,0,.16),inset 0 1px 0 rgba(255,180,80,.28)}50%{box-shadow:0 0 26px rgba(255,106,0,.58),0 0 48px rgba(255,106,0,.24),inset 0 1px 0 rgba(255,200,100,.38)}}
@keyframes goldCountPulse{0%,100%{color:#ffd700}50%{color:#ffe54d}}
@keyframes trackGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,120,0,.18),inset 0 2px 6px rgba(0,0,0,.4),0 0 18px rgba(255,100,0,.22)}50%{box-shadow:0 0 18px rgba(255,120,0,.45),0 0 36px rgba(255,80,0,.22),inset 0 2px 6px rgba(0,0,0,.4)}}
@keyframes balCardGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes bnavBarGlow{0%,100%{box-shadow:0 -4px 24px rgba(110,40,200,.6),0 -1px 0 rgba(140,60,255,.4)}50%{box-shadow:0 -4px 36px rgba(120,50,220,.8),0 -1px 0 rgba(160,80,255,.6),0 0 60px rgba(100,30,200,.3)}}
@keyframes bnavIconGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(140,60,255,.7)) drop-shadow(0 0 10px rgba(110,30,220,.4))}50%{filter:drop-shadow(0 0 8px rgba(160,80,255,1)) drop-shadow(0 0 18px rgba(130,50,240,.6))}}
@keyframes plusBtnGlow{0%,100%{box-shadow:0 0 16px rgba(110,30,220,.7),0 0 32px rgba(90,20,200,.4),inset 0 1px 0 rgba(255,255,255,.25)}50%{box-shadow:0 0 28px rgba(140,60,255,.9),0 0 56px rgba(110,40,230,.6),inset 0 1px 0 rgba(255,255,255,.35)}}
@keyframes blueYesGlow{0%,100%{box-shadow:0 0 18px rgba(30,60,255,.5),0 0 40px rgba(20,40,220,.25)}50%{box-shadow:0 0 32px rgba(40,80,255,.75),0 0 70px rgba(30,60,240,.4)}}
@keyframes balCardGrad2{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes fireOuter{0%,100%{d:path("M9 1 C9 1 13 5 13 9 C14 7 14 5 13 3 C16 5 17 9 16 13 C17 11 17.5 9 17 7 C18 10 18 14 16 17 C15 19.5 12.5 21 9 21 C5.5 21 3 19.5 2 17 C0 14 0 10 1 7 C0.5 9 1 11 2 13 C1 9 2 5 5 3 C4 5 4 7 5 9 C5 5 7 1 9 1Z");transform:scaleX(1)}25%{transform:scaleX(1.08) scaleY(.97)}50%{transform:scaleX(.93) scaleY(1.04)}75%{transform:scaleX(1.05) scaleY(.98)}}
@keyframes fireInner{0%,100%{transform:scaleY(1) translateY(0)}33%{transform:scaleY(1.08) translateY(-1px)}66%{transform:scaleY(.94) translateY(1px)}}
@keyframes fireCore{0%,100%{opacity:.9;rx:2.5}50%{opacity:.6;rx:1.8}}
@keyframes fireGlow{0%,100%{filter:drop-shadow(0 0 3px #ff6600) drop-shadow(0 0 7px #ff3300)}50%{filter:drop-shadow(0 0 6px #ffaa00) drop-shadow(0 0 14px #ff6600) drop-shadow(0 0 22px #ff330066)}}
@keyframes tealMarketsPulse{0%,100%{text-shadow:0 0 10px rgba(0,229,204,.7),0 0 22px rgba(0,200,180,.4)}50%{text-shadow:0 0 16px rgba(0,255,220,1),0 0 32px rgba(0,220,200,.7),0 0 48px rgba(0,180,160,.3)}}
.fire-svg{animation:fireGlow 1.2s ease-in-out infinite}
.fire-outer{animation:fireOuter 1.4s ease-in-out infinite;transform-origin:9px 11px}
.fire-inner{animation:fireInner 1s ease-in-out infinite .15s;transform-origin:9px 13px}
.fire-core{animation:fireCore 0.8s ease-in-out infinite .05s}

@keyframes redBreath{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 8px #ff0000,0 0 18px #ff0000,0 0 32px rgba(255,0,0,.7),inset 0 0 4px rgba(255,100,100,.6)}50%{opacity:.6;transform:scale(.55);box-shadow:0 0 4px #ff1100,0 0 10px rgba(255,0,0,.5)}}
@keyframes fireFlicker1{0%,100%{transform:scaleX(1) scaleY(1) translateY(0)}20%{transform:scaleX(1.1) scaleY(.96) translateY(1px)}40%{transform:scaleX(.9) scaleY(1.05) translateY(-1px)}60%{transform:scaleX(1.07) scaleY(.97) translateY(.5px)}80%{transform:scaleX(.95) scaleY(1.03) translateY(-.5px)}}
@keyframes fireFlicker2{0%,100%{transform:scaleX(1) scaleY(1)}25%{transform:scaleX(.88) scaleY(1.08)}50%{transform:scaleX(1.1) scaleY(.94)}75%{transform:scaleX(.93) scaleY(1.05)}}
@keyframes fireCoreBreath{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
@keyframes fireColorShift{0%,100%{stop-color:#fff700}50%{stop-color:#ffaa00}}
@keyframes balCardGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* ════════════════════════════════════════
   SHIMMER BET CARD  — the main new piece
════════════════════════════════════════ */
/* The metallic shimmer sweep — ::before on .bet-card */
@keyframes shimmerSweep{
  0%   {transform:translateX(-120%);opacity:0}
  8%   {opacity:1}
  60%  {opacity:.9}
  100% {transform:translateX(200%);opacity:0}
}
/* Card entrance pop */
@keyframes betCardPop{
  from{opacity:0;transform:translate(-50%,-50%) scale(.86)}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
}
/* Pulsing border glow */
@keyframes betBorderPulse{
  0%,100%{box-shadow:var(--bs-a)}
  50%    {box-shadow:var(--bs-b)}
}
/* Floating particles inside card */
@keyframes particleRise{
  0%  {transform:translateY(0) scale(1);opacity:.7}
  100%{transform:translateY(-55px) scale(0);opacity:0}
}

/* Card overlay wrapper */
#betOverlay{
  position:fixed;inset:0;
  z-index:700;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
#betOverlay.open{pointer-events:auto}

/* The glassmorphism shimmer card */
.bet-card{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.86);
  opacity:0;
  width:min(94vw,380px);
  max-height:92vh;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:750;
  border-radius:28px;
  padding:26px 22px 22px;

  /* Heavy glassmorphism */
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.05) 35%,
    rgba(0,0,0,.12) 65%,
    rgba(255,255,255,.06) 100%
  );
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);

  /* border — set dynamically via JS --card-color */
  border:2px solid var(--card-color,rgba(34,197,94,.7));
  /* box-shadow pulsing via CSS variables set by JS */
  --bs-a: 0 0 0 1px rgba(0,0,0,.2),
          0 12px 60px rgba(0,0,0,.7),
          0 0 40px var(--card-glow,rgba(34,197,94,.35)),
          0 0 80px var(--card-glow2,rgba(34,197,94,.15)),
          inset 0 1px 0 rgba(255,255,255,.22),
          inset 0 -1px 0 rgba(0,0,0,.35);
  --bs-b: 0 0 0 1px rgba(0,0,0,.2),
          0 16px 70px rgba(0,0,0,.8),
          0 0 60px var(--card-glow,rgba(34,197,94,.55)),
          0 0 120px var(--card-glow2,rgba(34,197,94,.25)),
          inset 0 1px 0 rgba(255,255,255,.28),
          inset 0 -1px 0 rgba(0,0,0,.4);
  box-shadow:var(--bs-a);
  animation:betBorderPulse 2.8s ease-in-out infinite;

  pointer-events:auto;
  scrollbar-width:none;
  -webkit-user-select:none;user-select:none;
  will-change:transform,opacity;
  transform:translate(-50%,-50%) scale(.86) translateZ(0);
}
.bet-card::-webkit-scrollbar{display:none}

/* Card entrance animation class */
.bet-card.open{
  animation:betCardPop .42s cubic-bezier(.16,1,.3,1) forwards,
             betBorderPulse 2.8s ease-in-out 0.42s infinite;
}

/* ── SHIMMER SWEEP (::before) ── */
.bet-card::before{
  content:'';
  position:absolute;
  top:-15%;left:0;
  width:55%;height:130%;
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.18) 55%,
    rgba(255,255,255,.04) 75%,
    transparent 100%
  );
  transform:skewX(-20deg) translateX(-120%);
  animation:shimmerSweep 2.8s ease-in-out infinite;
  pointer-events:none;
  z-index:10;
}

/* ── TOP SPECULAR RIDGE (::after) ── */
.bet-card::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:44%;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.04) 50%,
    transparent 100%
  );
  border-radius:28px 28px 60% 60%;
  pointer-events:none;
  z-index:0;
}

/* Inside content sits above pseudo-elements */
.bet-card .bc-inner{position:relative;z-index:5}

/* Top neon accent line */
.bet-card .bc-topline{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--card-topline,linear-gradient(90deg,transparent,rgba(34,197,94,.9),rgba(255,255,255,.8),rgba(34,197,94,.9),transparent));
  box-shadow:0 0 18px var(--card-glow,rgba(34,197,94,.6));
  border-radius:28px 28px 0 0;
  z-index:6;pointer-events:none;
}

/* Question text */
.bc-question{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:15px;line-height:1.4;
  color:#fff;
  text-shadow:0 1px 12px rgba(255,255,255,.2);
  margin:4px 0 16px;
}

/* Side badge — YES / NO */
.bc-side-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 16px;border-radius:50px;
  font-weight:800;font-size:13px;letter-spacing:.5px;
  border:1.5px solid var(--card-color,rgba(34,197,94,.8));
  color:var(--card-color,#22c55e);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 18px var(--card-glow,rgba(34,197,94,.3));
  backdrop-filter:blur(8px);
  margin-bottom:14px;
}

/* Odds bar in card */
.bc-odds-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.bc-odds-pct{font-family:'Oswald',sans-serif;font-weight:700;font-size:22px;color:var(--card-color,#22c55e);min-width:46px}
.bc-bar-wrap{flex:1;height:7px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden}
.bc-bar-fill{height:100%;border-radius:5px;background:var(--card-color,#22c55e);box-shadow:0 0 10px var(--card-glow,rgba(34,197,94,.5))}
.bc-odds-lbl{font-size:10px;color:rgba(255,255,255,.35);min-width:38px;text-align:right}

/* Payout box */
.bc-payout-box{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;margin-bottom:14px;
  backdrop-filter:blur(8px);
}
.bc-payout-lbl{font-size:11px;color:rgba(255,255,255,.5);font-weight:600;display:flex;align-items:center;gap:5px}
.bc-payout-val{font-family:'Oswald',sans-serif;font-weight:700;font-size:18px;color:#22c55e;text-shadow:0 0 14px rgba(34,197,94,.5)}

/* Amount chips */
.bc-chips{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.bc-chip{
  padding:7px 13px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50px;font-size:12px;font-weight:700;
  cursor:pointer;color:rgba(255,255,255,.7);
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
}
.bc-chip.active,.bc-chip:active{
  background:var(--card-color,rgba(34,197,94,.2));
  border-color:var(--card-color,rgba(34,197,94,.7));
  color:#fff;
  box-shadow:0 0 12px var(--card-glow,rgba(34,197,94,.3));
}

/* Amount input */
.bc-input{
  width:100%;
  background:rgba(0,0,0,.45);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:14px;color:#fff;
  font-size:30px;font-weight:800;text-align:center;
  outline:none;margin-bottom:14px;
  font-family:'Oswald',sans-serif;letter-spacing:2px;
  transition:border-color .25s ease,box-shadow .25s ease;
  backdrop-filter:blur(8px);
}
.bc-input:focus{
  border-color:var(--card-color,rgba(34,197,94,.8));
  box-shadow:0 0 0 3px var(--card-glow,rgba(34,197,94,.15));
}

/* Place bet button — big, bold, shiny */
.bc-btn{
  width:100%;padding:16px;
  border-radius:50px;
  font-weight:900;font-size:15px;
  cursor:pointer;
  position:relative;overflow:hidden;
  letter-spacing:.6px;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
  border:none;
  transition:transform .15s,opacity .15s;
}
.bc-btn::before{
  content:'';position:absolute;
  top:0;left:0;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),rgba(255,255,255,.55),rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg) translateX(-110%);
  animation:shimmerSweep 1.8s ease-in-out infinite .4s;
  pointer-events:none;
  will-change:transform;
}
.bc-btn{transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .18s ease,box-shadow .22s ease}
.bc-btn:active{transform:scale(.97)}

/* Cancel link */
.bc-cancel{
  text-align:center;margin-top:12px;
  color:rgba(255,255,255,.35);font-size:13px;
  cursor:pointer;padding:6px;
  transition:color .18s;
}
.bc-cancel:hover{color:rgba(255,255,255,.6)}
.bc-cancel{transition:color .22s ease}

/* ── CSS VARIABLES ── */
:root{--cc:#00d4ff}

/* ── UTILITY ── */
.hidden{display:none!important}
.page-content{padding:0}
.shine-card{position:relative;overflow:hidden}
.shine-card::before{content:'';position:absolute;top:0;left:0;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.05),transparent);animation:shineSwipe 5.5s ease-in-out infinite;pointer-events:none;z-index:5;transform:translateX(-110%);will-change:transform;}

/* ── LAYOUT ── */
#app{min-height:100vh;padding-bottom:82px;overflow-x:hidden;position:relative;touch-action:pan-y}

/* ── BG BLOBS ── */
.blob{position:fixed;border-radius:50%;pointer-events:none;z-index:0}
#blob1{width:500px;height:500px;filter:blur(120px);opacity:.08;background:#00d4ff;top:-160px;left:-160px;animation:float 18s ease-in-out infinite;will-change:transform;transform:translateZ(0)}
#blob2{width:420px;height:420px;filter:blur(110px);opacity:.06;background:#00d4ff;bottom:-130px;right:-130px;animation:float 22s ease-in-out infinite reverse;will-change:transform;transform:translateZ(0)}
#blob3{width:220px;height:220px;filter:blur(75px);opacity:.05;background:#ffd700;top:40%;left:50%;animation:float 14s ease-in-out infinite;will-change:transform;transform:translateZ(0)}
#blob4{width:170px;height:170px;filter:blur(65px);opacity:.04;background:#a855f7;top:18%;right:8%;animation:float 20s ease-in-out infinite;will-change:transform;transform:translateZ(0)}
#scanline{position:fixed;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.18),transparent);animation:scanline 12s linear infinite;pointer-events:none;z-index:1;opacity:.5;will-change:transform;transform:translateZ(0)}

/* ── TOP NAV ── */
#topnav{position:sticky;top:0;z-index:500;backdrop-filter:blur(36px);-webkit-backdrop-filter:blur(36px);background:linear-gradient(180deg,rgba(6,9,20,.97),rgba(8,12,24,.94));border-bottom:1px solid rgba(255,255,255,.07);padding:0 14px;display:flex;align-items:center;justify-content:space-between;height:60px;box-shadow:0 1px 0 rgba(0,212,255,.05),0 4px 18px rgba(0,0,0,.4);will-change:transform;transform:translateZ(0)}
.nav-logo-wrap{display:flex;align-items:center;gap:10px;cursor:pointer}
.nav-brand{display:flex;flex-direction:column;line-height:1}
.brand-text-wrap{position:relative;display:inline-block}
.brand-glass-bg{position:absolute;inset:-3px -8px;background:rgba(0,212,255,.05);backdrop-filter:blur(6px);border-radius:8px;border:1px solid rgba(0,212,255,.1);z-index:0}
.brand-shine{position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:shineSwipe 4.5s ease-in-out infinite;z-index:1;border-radius:8px;pointer-events:none;transform:translateX(-100%);will-change:transform;}
.brand-name{font-family:'Syne',sans-serif;font-weight:800;font-size:19px;letter-spacing:2.5px;font-style:italic;transform:skewX(-4deg);background:linear-gradient(105deg,#00d4ff 0%,#7dd3fc 30%,#fff 50%,#fbbf24 75%,#ffd700 100%);background-size:250% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmerSlide 3s linear infinite;display:inline-block;position:relative;z-index:2;filter:drop-shadow(0 0 7px rgba(0,212,255,.45));will-change:background-position}
.brand-sub{font-size:7px;letter-spacing:3.5px;color:rgba(0,212,255,.48);font-weight:700;text-transform:uppercase;padding-left:3px;margin-top:1px;position:relative;z-index:2}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-bal{background:rgba(34,197,94,.07);backdrop-filter:blur(12px);border:1px solid rgba(34,197,94,.22);border-radius:10px;padding:6px 12px;display:flex;align-items:center;gap:5px;box-shadow:0 0 12px rgba(34,197,94,.1)}
.nav-rupee{font-family:'Oswald',sans-serif;font-size:13px;color:#22c55e;font-weight:700;animation:rupeeGlow 2.5s ease-in-out infinite}
.nav-bal-num{font-family:'Oswald',sans-serif;font-weight:700;font-size:15px;color:#22c55e;letter-spacing:.5px}
.nav-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:9px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px)}

/* ── TABS ── */
#tabsWrap{position:sticky;top:60px;z-index:400;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);background:linear-gradient(180deg,rgba(6,9,20,.97),rgba(8,12,24,.95));border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 4px 18px rgba(0,0,0,.45);will-change:transform;transform:translateZ(0)}
#tabsRow{display:flex;overflow-x:auto;padding:0 4px;scrollbar-width:none;gap:2px}
.tab{display:flex;align-items:center;gap:7px;padding:13px 15px;font-size:12px;font-weight:700;color:rgba(255,255,255,.28);white-space:nowrap;cursor:pointer;border-bottom:2.5px solid transparent;transition:color .28s ease,border-color .28s ease,background .28s ease,opacity .22s ease;position:relative;letter-spacing:.3px}
.tab.active{color:#fff;border-bottom-color:var(--cc);background:rgba(255,255,255,.03);border-radius:6px 6px 0 0}
.tab-glow{position:absolute;bottom:0;left:0;right:0;height:2px;filter:blur(3px);opacity:.55;background:var(--cc)}
.tab svg{transition:all .25s}
.tab.active svg{filter:brightness(1.7) saturate(1.4) drop-shadow(0 0 4px currentColor)}

/* ── GLASS CARD ── */
.glass{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025),rgba(0,212,255,.02));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.09);box-shadow:0 6px 24px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.1);border-radius:16px;position:relative;overflow:hidden}

/* ── BALANCE CARD ── */
#balCard{margin:12px 14px 0;border-radius:22px;padding:20px 18px;position:relative;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,#3a0018 0%,#1a0535 25%,#051228 50%,#2a0640 75%,#3a0018 100%);background-size:300% 300%;animation:balCardGrad 7s ease infinite;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border:1.5px solid rgba(180,60,120,.45);box-shadow:0 0 0 1px rgba(120,20,80,.3),0 8px 40px rgba(80,0,40,.6),0 0 60px rgba(160,40,100,.18),0 0 100px rgba(0,180,255,.08),inset 0 1px 0 rgba(255,180,220,.22),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 40px rgba(120,0,80,.1);will-change:transform;transition:box-shadow .25s ease;-webkit-user-select:none;user-select:none;transform:translateZ(0)}
#balCard::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,180,220,.12) 0%,rgba(120,40,160,.04) 60%,transparent 100%);border-radius:22px 22px 60% 60%;pointer-events:none;z-index:0}
#balCard .bc-sweep{position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(200,80,160,.12),rgba(0,200,255,.08),transparent);animation:shineSwipe 4s ease-in-out infinite;pointer-events:none;z-index:1;transform:translateX(-110%);will-change:transform;}
#balCard .bc-topline{position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(200,80,140,.8),rgba(0,200,255,.6),rgba(200,80,140,.5),transparent);box-shadow:0 0 12px rgba(200,80,160,.5);z-index:2;pointer-events:none}
.bal-uid-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border-radius:50px;border:1px solid rgba(255,255,255,.18);font-size:10px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.5px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bal-view-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;background:linear-gradient(135deg,rgba(120,0,200,.7),rgba(80,0,160,.8));backdrop-filter:blur(8px);border-radius:50px;border:1px solid rgba(160,80,255,.45);font-size:11px;font-weight:800;color:#fff;letter-spacing:.5px;box-shadow:0 0 14px rgba(120,0,200,.4),inset 0 1px 0 rgba(255,255,255,.2);cursor:pointer;flex-shrink:0;transition:opacity .18s}
.bal-view-btn:active{opacity:.8}
.bal-main-row{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px}
.bal-rupee-lg{font-family:'Oswald',sans-serif;font-weight:700;font-size:32px;color:#22c55e;line-height:1;animation:greenRupeeGlow 2.2s ease-in-out infinite}
.bal-num-lg{font-family:'Oswald',sans-serif;font-weight:700;font-size:46px;color:#fff;line-height:1;letter-spacing:1px;text-shadow:0 2px 20px rgba(255,255,255,.3)}
.bal-inr{font-family:'Oswald',sans-serif;font-size:14px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:2px;align-self:flex-end;margin-bottom:6px}
.bal-btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.dep-btn{padding:13px;border-radius:50px;border:2px solid var(--cc);font-weight:800;font-size:12px;cursor:pointer;color:var(--cc);background:rgba(0,212,255,.06);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:.3px;position:relative;overflow:hidden;transition:all .28s cubic-bezier(.34,1.56,.64,1);text-shadow:0 0 10px var(--cc);box-shadow:0 0 18px rgba(0,212,255,.18),inset 0 1px 0 rgba(255,255,255,.12)}
.wit-btn{padding:13px;border-radius:50px;border:1.5px solid rgba(0,212,255,.3);font-weight:700;font-size:12px;cursor:pointer;background:rgba(0,212,255,.05);color:rgba(0,212,255,.85);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden;transition:all .28s cubic-bezier(.34,1.56,.64,1)}
.bal-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
.bal-stat-box{text-align:center}
.bal-stat-lbl{font-size:10px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}
.bal-stat-val{font-family:'Oswald',sans-serif;font-weight:700;font-size:17px;color:#fff;letter-spacing:.5px;text-shadow:0 0 14px rgba(255,255,255,.3)}

/* ── MARKET ICON BOX + CHIPS ── */
.jelly-icon-box{width:44px;height:44px;border-radius:13px;flex-shrink:0;background:rgba(30,20,60,.9);border:1.5px solid rgba(100,80,200,.3);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 8px rgba(0,0,0,.4)}
.jelly-chips{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.chip-live{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:50px;background:rgba(180,20,20,.22);border:1.5px solid rgba(220,50,50,.6)}
.chip-vol{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:50px;background:rgba(0,140,160,.15);border:1.5px solid rgba(0,190,210,.5)}
.chip-hot{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:50px;background:rgba(120,80,0,.22);border:1.5px solid rgba(180,130,0,.5)}
.chip-text{font-family:'Oswald',sans-serif;font-weight:700;font-size:10px;letter-spacing:1.2px}
.count-pill{font-family:'Oswald',sans-serif;font-weight:700;font-size:14px;letter-spacing:.8px;color:#00e5ff;border:1.5px solid rgba(0,220,255,.5);padding:6px 14px;border-radius:50px;background:rgba(0,180,220,.1);white-space:nowrap;flex-shrink:0;box-shadow:0 0 12px rgba(0,200,255,.18)}

/* ── MARKET HEADER BAR (replaces jelly section) ── */
.market-header-bar{
  display:flex;align-items:center;justify-content:space-between;
  margin:10px 14px 8px;padding:14px 16px;
  background:linear-gradient(135deg,rgba(0,60,60,.92),rgba(0,40,50,.96),rgba(0,30,45,.95));
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-radius:18px;
  border:2px solid rgba(0,220,200,.5);
  box-shadow:0 0 18px rgba(0,220,200,.2),0 4px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(0,255,230,.1);
}

/* ── MARKET STICKY WRAPPER ── */
#marketSticky{position:relative;z-index:300;}

/* ── BETS CONTAINER ── */
#betsContainer{overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:16px;touch-action:pan-y;overscroll-behavior:contain}
#betsContainer::-webkit-scrollbar{display:none}

/* ── MARKET CARDS ── */
.market-card{margin:0 0 10px;border-radius:16px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018),rgba(0,212,255,.018));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.09);transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease,opacity .22s ease;position:relative;overflow:hidden;animation:cardIn .32s ease forwards;contain:layout style}
.market-card:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.12)}
.card-glow-top{position:absolute;top:0;left:0;right:0;height:1px}
.card-glow-left{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:16px 0 0 16px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:7px;font-size:10px;font-weight:700;text-transform:uppercase}
.hot-badge{font-size:9px;background:rgba(255,215,0,.09);color:#ffd700;border:1px solid rgba(255,215,0,.25);padding:3px 7px;border-radius:6px;font-weight:800;animation:hotBlink 2.2s infinite;display:inline-flex;align-items:center;gap:3px}
.live-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:800;color:#00d4ff;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.2);border-radius:6px;padding:3px 7px}
.live-dot{width:5px;height:5px;border-radius:50%;background:#00d4ff;display:inline-block;animation:liveDot 1.4s infinite}
.card-badge-row{display:flex;align-items:center;gap:6px;margin-bottom:9px;flex-wrap:wrap;padding-left:4px}
.card-q{font-size:17px;font-weight:700;color:#dde4f0;line-height:1.55;margin:9px 0 10px;padding-left:4px}
.odds-row{display:flex;align-items:center;gap:8px;margin-bottom:11px;padding-left:4px}
.odds-num{font-family:'Oswald',sans-serif;font-weight:700;font-size:24px;min-width:50px;letter-spacing:1px;line-height:1}
.odds-bar-wrap{flex:1;height:6px;background:rgba(255,255,255,.05);border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.odds-bar-fill{height:100%;border-radius:5px}
.odds-label{font-size:10px;color:#4a5568;min-width:36px;text-align:right}
.bet-btns{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-left:0}
.bet-btn{padding:12px 10px;border-radius:11px;font-size:12px;cursor:pointer;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;gap:5px;position:relative;overflow:hidden;font-weight:700;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,opacity .18s ease}

/* ── OTHER BUTTONS ── */
.neon-btn{width:100%;padding:15px 18px;border-radius:12px;font-weight:700;font-size:13px;cursor:pointer;position:relative;overflow:hidden;letter-spacing:.5px;transition:opacity .22s ease,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease}
.neon-btn:active{transform:scale(.98)}
.neon-cyan-btn{background:linear-gradient(145deg,rgba(0,212,255,.13),rgba(0,212,255,.05));border:1.5px solid rgba(0,212,255,.45);color:#00d4ff;font-weight:700;box-shadow:0 0 16px rgba(0,212,255,.18),inset 0 1px 0 rgba(255,255,255,.12)}
.neon-gold-btn{background:linear-gradient(145deg,rgba(255,215,0,.13),rgba(255,215,0,.05));border:1.5px solid rgba(255,215,0,.45);color:#ffd700;font-weight:700;box-shadow:0 0 16px rgba(255,215,0,.18),inset 0 1px 0 rgba(255,255,255,.12)}
.neon-green-btn{background:linear-gradient(145deg,rgba(34,197,94,.13),rgba(34,197,94,.05));border:1.5px solid rgba(34,197,94,.45);color:#22c55e;font-weight:700;box-shadow:0 0 16px rgba(34,197,94,.18),inset 0 1px 0 rgba(255,255,255,.12)}
.neon-red-btn{background:linear-gradient(145deg,rgba(239,68,68,.13),rgba(239,68,68,.05));border:1.5px solid rgba(239,68,68,.45);color:#ef4444;font-weight:700;box-shadow:0 0 16px rgba(239,68,68,.18),inset 0 1px 0 rgba(255,255,255,.12)}

/* ── BOTTOM NAV ── */
@keyframes rainbowBorder{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes iconRingRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
#bnav{
  position:fixed;bottom:0;left:0;right:0;
  background:linear-gradient(180deg,
    #0a1a3a 0%,
    #0d2255 15%,
    #1a3888 30%,
    #2255bb 48%,
    #3344aa 62%,
    #442299 78%,
    #2a1166 100%
  );
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  display:flex;z-index:500;
  height:72px;
  align-items:stretch;
  border-top:none;
  will-change:transform;
  transform:translateZ(0);
  box-shadow:
    0 -1px 0 rgba(60,120,255,.6),
    0 -20px 40px rgba(30,80,220,.4),
    0 -6px 20px rgba(40,60,200,.5);
}
/* Rainbow top border — animating gradient like image 1 Gemini bar */
#bnav::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,
    #ff0000,#ff6600,#ffcc00,#00ff88,#00ccff,#0066ff,#aa00ff,#ff0099,#ff0000
  );
  background-size:200% 100%;
  animation:rainbowBorder 4s linear infinite;
  box-shadow:0 0 12px rgba(120,180,255,.7),0 0 28px rgba(180,100,255,.5),0 0 48px rgba(255,80,180,.3);
  pointer-events:none;
  z-index:2;
}
/* curved dip in center */
#bnav::after{
  content:'';
  position:absolute;
  top:-22px;left:50%;transform:translateX(-50%);
  width:80px;height:44px;
  background:transparent;
  border-radius:0 0 50% 50%;
  box-shadow:0 20px 0 0 #3d2a99;
  pointer-events:none;
}

/* Icon wrapper — circular ring like image 3 */
.bnav-icon-wrap{
  position:relative;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.bnav-icon-wrap::before{
  content:'';
  position:absolute;inset:-3px;
  border-radius:50%;
  padding:2px;
  background:conic-gradient(
    from 0deg,
    rgba(100,160,255,0) 0%,
    rgba(120,180,255,.8) 25%,
    rgba(180,100,255,.9) 50%,
    rgba(255,80,160,.7) 75%,
    rgba(100,160,255,0) 100%
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .25s;
}
.bnav-item.active .bnav-icon-wrap::before{
  opacity:1;
  animation:iconRingRotate 3s linear infinite;
}

.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0;gap:4px;cursor:pointer;border:none;background:none;color:rgba(255,255,255,.45);transition:color .28s ease,transform .2s cubic-bezier(.34,1.56,.64,1);position:relative}
.bnav-item.active{color:#fff}
.bnav-item svg{transition:all .25s;position:relative;z-index:1}
/* Active icon glow */
.bnav-item.active svg{filter:drop-shadow(0 0 6px rgba(180,200,255,.9)) drop-shadow(0 0 14px rgba(120,160,255,.6))}
.bnav-item:not(.active):hover svg{filter:drop-shadow(0 0 4px rgba(160,180,255,.5))}
.bnav-pip{position:absolute;top:0;left:50%;transform:translateX(-50%);width:22px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,#60a0ff,#cc80ff);box-shadow:0 0 10px rgba(120,160,255,.9),0 0 20px rgba(160,100,255,.5)}
.bnav-label{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.bnav-item.active .bnav-label{text-shadow:0 0 10px rgba(180,210,255,.9);color:#fff}

/* Center plus button */
#bnavCenterBtn{
  position:absolute;
  top:-26px;left:50%;transform:translateX(-50%);
  width:54px;height:54px;
  border-radius:50%;
  background:linear-gradient(145deg,#00c4b4,#00e5cc,#00ffea);
  border:2px solid rgba(255,255,255,.25);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  animation:plusBtnGlow 2.8s ease-in-out infinite;
  z-index:510;
  transition:transform .18s;
  box-shadow:0 0 20px rgba(0,220,200,.8),0 0 40px rgba(0,180,170,.5),0 4px 16px rgba(0,0,0,.5);
}
#bnavCenterBtn:active{transform:translateX(-50%) scale(.93)}
#bnavCenterBtn{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease}
#bnavCenterBtn svg{filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}

/* ── BACKDROP ── */
.backdrop{position:fixed;inset:0;background:rgba(2,5,16,.76);z-index:600;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:backdropIn .3s ease forwards;transition:background .3s ease}
/* When bet card is open — very light blur (10%) so site background is clearly visible */
.backdrop.bet-open{background:rgba(2,5,16,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

/* ── BOTTOM SHEET (deposit / withdraw only) ── */
.sheet{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(180deg,rgba(8,12,26,.97),rgba(4,7,16,.99));backdrop-filter:blur(44px);-webkit-backdrop-filter:blur(44px);border-radius:22px 22px 0 0;padding:20px;z-index:700;max-height:88vh;overflow-y:auto;border:1px solid rgba(255,255,255,.09);border-bottom:none;border-top:1.5px solid rgba(0,212,255,.15);box-shadow:0 -18px 55px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.09);animation:slideUp .38s cubic-bezier(.16,1,.3,1) forwards}
.handle{width:42px;height:4px;background:rgba(255,255,255,.12);border-radius:2px;margin:0 auto 18px}
.sheet-title{font-family:'Syne',sans-serif;font-weight:800;font-size:14px;margin-bottom:4px;line-height:1.35;color:#e8edf5}
.sheet-sub{font-size:12px;color:#64748b;margin-bottom:16px;display:flex;align-items:center;gap:6px}
.amt-chips{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.amt-chip{padding:7px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;color:#94a3b8;transition:all .24s cubic-bezier(.34,1.56,.64,1)}
.amt-chip.active{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);color:#e8edf5}
.amt-inp{width:100%;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:15px;color:#e8edf5;font-size:28px;font-weight:700;text-align:center;outline:none;margin-bottom:10px;font-family:'Oswald',sans-serif;letter-spacing:2px;transition:border-color .18s}
.amt-inp:focus{border-color:rgba(0,212,255,.3)}
.payout-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;background:rgba(255,255,255,.04);border-radius:11px;margin-bottom:12px;border:1px solid rgba(255,255,255,.06)}
.sheet-cancel{text-align:center;margin-top:12px;color:#475569;font-size:13px;cursor:pointer;padding:8px}

/* ── TOAST ── */
@keyframes toastBounceIn{
  0%  {opacity:0;transform:translateX(-50%) translateY(-28px) scale(.72)}
  55% {opacity:1;transform:translateX(-50%) translateY(6px) scale(1.06)}
  72% {transform:translateX(-50%) translateY(-4px) scale(.97)}
  85% {transform:translateX(-50%) translateY(2px) scale(1.02)}
  100%{transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes toastSlideOut{
  0%  {opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-22px) scale(.88)}
}
@keyframes toastShimmer{
  0%  {transform:skewX(-18deg) translateX(-220%);opacity:0}
  10% {opacity:1}
  70% {opacity:.8}
  100%{transform:skewX(-18deg) translateX(320%);opacity:0}
}
.toast{
  position:fixed;top:22px;left:50%;
  transform:translateX(-50%);
  padding:18px 32px;
  border-radius:22px;
  font-weight:800;font-size:17px;
  z-index:9999;
  white-space:nowrap;
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  display:none;
  letter-spacing:.3px;
  box-shadow:0 8px 40px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.12) inset;
  overflow:hidden;
  min-width:200px;
  text-align:center;
}
.toast::before{
  content:'';position:absolute;top:0;left:0;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.25),rgba(255,255,255,.45),rgba(255,255,255,.25),transparent);
  transform:skewX(-18deg) translateX(-220%);
  pointer-events:none;
  will-change:transform;
}
.toast.show{display:block;animation:toastBounceIn .48s cubic-bezier(.16,1,.3,1) forwards}
.toast.show::before{animation:toastShimmer 1.6s ease-in-out .3s forwards}
.toast.hide{animation:toastSlideOut .32s ease forwards}

/* ── PORTFOLIO SIDEBAR ── */
#portfolio{position:fixed;top:0;right:0;width:min(100%,385px);height:100%;background:linear-gradient(180deg,rgba(6,9,22,.98),rgba(4,6,14,.99));backdrop-filter:blur(44px);-webkit-backdrop-filter:blur(44px);z-index:800;overflow-y:auto;border-left:1px solid rgba(255,255,255,.07);box-shadow:-8px 0 36px rgba(0,0,0,.5);animation:slideInRight .36s cubic-bezier(.16,1,.3,1) forwards}
.port-header{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:rgba(6,9,18,.94);backdrop-filter:blur(16px);z-index:1}
.port-close{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:9px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:#94a3b8;transition:all .25s ease}
.port-close:hover{background:rgba(255,255,255,.1);color:#e8edf5}
.port-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;padding:12px 14px 0}
.port-stat{border-radius:11px;padding:10px;text-align:center}
.port-stat-val{font-family:'Oswald',sans-serif;font-weight:700;font-size:17px;letter-spacing:.5px}
.port-stat-lbl{font-size:10px;color:#64748b;margin-top:2px;font-weight:600}
.tx-card{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:12px;margin-bottom:7px;transition:transform .16s}
.tx-card:hover{transform:translateX(-2px)}
.tx-type{font-size:10px;font-weight:700;text-transform:uppercase;color:#94a3b8;margin-bottom:2px;letter-spacing:.5px}
.tx-amt{font-size:15px;font-weight:800;color:#e8edf5}
.tx-desc{font-size:10px;color:#475569;margin-top:2px}
.tx-badge{padding:4px 10px;border-radius:7px;font-size:10px;font-weight:700;text-transform:uppercase;white-space:nowrap}
.tx-badge.won,.tx-badge.completed{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.22)}
.tx-badge.lost{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.22)}
.tx-badge.pending{background:rgba(245,158,11,.09);color:#f59e0b;border:1px solid rgba(245,158,11,.2)}
.tx-empty{text-align:center;color:#475569;font-size:13px;padding:30px}
.tx-emoji{font-size:28px;margin-bottom:8px}
.upi-linked-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(0,212,255,.05);border-radius:11px;border:1px solid rgba(0,212,255,.16)}
.text-inp{width:100%;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:11px 14px;color:#e8edf5;font-size:13px;outline:none;font-family:inherit;transition:border-color .18s,box-shadow .18s}
.text-inp::placeholder{color:#475569}
.text-inp:focus{border-color:rgba(0,212,255,.28);box-shadow:0 0 0 3px rgba(0,212,255,.06)}
.text-inp{transition:border-color .25s ease,box-shadow .25s ease}
.acc-tabs{display:flex;gap:5px;margin-bottom:18px;background:rgba(255,255,255,.04);border-radius:11px;padding:4px;border:1px solid rgba(255,255,255,.06)}
.acc-tab{flex:1;padding:8px;border-radius:8px;border:none;font-weight:700;font-size:12px;cursor:pointer;color:#64748b;background:transparent;transition:all .25s ease}
.acc-tab.active{background:rgba(255,215,0,.09);color:#ffd700}

/* ── UPI POPUP ── */
@keyframes upiPopIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
#upiPopup{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.82);
  opacity:0;
  z-index:1000;
  width:min(88vw,320px);
  border-radius:22px;
  padding:24px 20px 20px;
  background:linear-gradient(145deg,rgba(8,12,28,.97),rgba(4,7,18,.99));
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  border:1.5px solid rgba(255,215,0,.35);
  box-shadow:0 0 40px rgba(255,215,0,.18),0 16px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);
  pointer-events:none;
}
#upiPopup.open{
  animation:upiPopIn .38s cubic-bezier(.16,1,.3,1) forwards;
  pointer-events:auto;
}

/* ── TRENDING WORD RED FLOW ── */
.trending-word{
  font-family:'Oswald',sans-serif;font-weight:800;font-size:12px;letter-spacing:2.5px;
  background:linear-gradient(90deg,
    #cc0000 0%,
    #cc0000 20%,
    #ff4444 35%,
    #ff9999 45%,
    #ffffff 50%,
    #ff9999 55%,
    #ff4444 65%,
    #cc0000 80%,
    #cc0000 100%
  );
  background-size:300% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:trendingRedFlow 3.5s ease-in-out infinite;
  display:inline-block;
  will-change:background-position;
}

/* ── GAME PAGE ── */
.game-chip.active{
  background:rgba(255,77,109,.2)!important;
  border-color:rgba(255,77,109,.7)!important;
  color:#ff4d6d!important;
  box-shadow:0 0 12px rgba(255,77,109,.3);
}
#pageGames{
  min-height:100vh;
  scroll-behavior:smooth;
}
#gameResultOverlay{
  position:fixed;inset:0;z-index:900;pointer-events:none;
}
#gameResultOverlay:not(:empty){pointer-events:auto;}

/* ══════════════════════════════════════════════════════════
   BET HISTORY LEDGER BOOK  —  Real Book Design v2
   Matches reference: teal steampunk frame, dual pages,
   center ring bindings, parchment, red STAMPED ink stamps
══════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes bookSlideUp{
  0%  {transform:translateY(100%) scale(.96);opacity:0}
  60% {transform:translateY(-4px) scale(1.002);opacity:1}
  80% {transform:translateY(3px) scale(.999)}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes bookSlideDown{
  0%  {transform:translateY(0);opacity:1}
  100%{transform:translateY(105%);opacity:0}
}
@keyframes frameGlow{
  0%,100%{box-shadow:0 -6px 40px rgba(0,120,130,.5),0 0 0 1px rgba(80,180,180,.3),inset 0 1px 0 rgba(100,220,220,.15)}
  50%    {box-shadow:0 -10px 60px rgba(0,150,160,.7),0 0 0 2px rgba(80,200,200,.5),inset 0 1px 0 rgba(120,240,240,.25)}
}
@keyframes ringPop{
  0%  {transform:scaleY(0);opacity:0}
  70% {transform:scaleY(1.15)}
  100%{transform:scaleY(1);opacity:1}
}
@keyframes ringGlint{
  0%,100%{background:radial-gradient(circle at 30% 25%,rgba(220,200,100,.7) 0%,rgba(140,110,40,.9) 45%,rgba(60,40,10,1) 100%)}
  50%    {background:radial-gradient(circle at 40% 20%,rgba(255,235,140,1) 0%,rgba(180,140,60,.9) 40%,rgba(80,55,15,1) 100%)}
}
@keyframes pageReveal{
  0%  {clip-path:inset(0 100% 0 0 round 4px);opacity:0}
  100%{clip-path:inset(0 0% 0 0 round 4px);opacity:1}
}
@keyframes stampDrop{
  0%  {transform:scale(3.2) rotate(-22deg) translateY(-20px);opacity:0;filter:blur(6px) saturate(3)}
  35% {transform:scale(.82) rotate(8deg) translateY(3px);opacity:1;filter:blur(0) saturate(1.5)}
  52% {transform:scale(1.12) rotate(-5deg);filter:saturate(1.8)}
  66% {transform:scale(.94) rotate(2deg)}
  78% {transform:scale(1.05) rotate(-2deg)}
  88% {transform:scale(.98) rotate(1deg)}
  100%{transform:scale(1) rotate(-10deg);opacity:1;filter:saturate(1)}
}
@keyframes stampInkBleed{
  0%  {box-shadow:0 0 0 0 rgba(180,20,20,.0),0 0 0 1px rgba(180,20,20,.8)}
  30% {box-shadow:0 0 0 8px rgba(180,20,20,.35),0 0 0 1px rgba(180,20,20,.8)}
  60% {box-shadow:0 0 0 16px rgba(180,20,20,.1),0 0 0 1px rgba(180,20,20,.7)}
  100%{box-shadow:0 0 0 22px rgba(180,20,20,.0),0 0 0 1px rgba(180,20,20,.55)}
}
@keyframes stampTextAppear{
  0%  {letter-spacing:8px;opacity:0}
  50% {letter-spacing:4px;opacity:.7}
  100%{letter-spacing:3px;opacity:1}
}
@keyframes stampImpact{
  0%  {transform:scale(1) rotate(-10deg)}
  25% {transform:scale(1.04,.92) rotate(-10deg)}
  50% {transform:scale(.97,1.05) rotate(-10deg)}
  75% {transform:scale(1.01,.98) rotate(-10deg)}
  100%{transform:scale(1) rotate(-10deg)}
}
@keyframes inkLine{
  0%  {width:0;opacity:0}
  20% {opacity:1}
  100%{width:100%;opacity:1}
}
@keyframes rowIn{
  0%  {opacity:0;transform:translateY(10px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes triggerFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-3px)}
}
@keyframes triggerGlow{
  0%,100%{box-shadow:0 -4px 28px rgba(0,160,170,.4),0 0 0 1.5px rgba(60,180,180,.35),inset 0 1px 0 rgba(120,220,220,.15)}
  50%    {box-shadow:0 -7px 42px rgba(0,190,200,.6),0 0 0 2px rgba(80,210,210,.55),inset 0 1px 0 rgba(140,240,240,.25)}
}
@keyframes pageFlicker{
  0%,100%{opacity:1}
  92%    {opacity:.97}
  94%    {opacity:.93}
  96%    {opacity:.98}
}
@keyframes candleFlicker{
  0%,100%{text-shadow:0 0 8px rgba(255,200,80,.6),0 0 20px rgba(255,160,40,.3)}
  50%    {text-shadow:0 0 14px rgba(255,220,100,.9),0 0 32px rgba(255,180,60,.5),0 0 50px rgba(255,140,20,.2)}
}

/* ═══════════════════════════
   TRIGGER TAB (game page)
═══════════════════════════ */
#betLedgerTrigger{
  margin:8px 14px 14px;
  border-radius:16px;
  background:linear-gradient(145deg,#0d2e32,#0a2428,#0e3438);
  border:2px solid rgba(60,180,185,.6);
  padding:14px 18px;
  cursor:pointer;
  display:flex;align-items:center;gap:14px;
  animation:triggerGlow 3s ease-in-out infinite, triggerFloat 4s ease-in-out infinite;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),filter .2s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  position:relative;overflow:hidden;
}
#betLedgerTrigger::before{
  content:'';position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(100,220,220,.08),transparent);
  animation:shineSwipe 4s ease-in-out infinite;pointer-events:none;
  transform:translateX(-110%);will-change:transform;
}
#betLedgerTrigger:active{transform:scale(.95);}
#betLedgerTrigger.open{filter:brightness(1.15);}

/* Mini book icon */
.lbt-icon{
  width:44px;height:44px;flex-shrink:0;position:relative;
  border-radius:8px;overflow:hidden;
  background:linear-gradient(145deg,#c8a448,#9a7828,#c8a448);
  border:2px solid rgba(200,164,72,.8);
  box-shadow:3px 3px 12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,230,120,.3);
}
.lbt-icon::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:10px;
  background:linear-gradient(180deg,#5a3a08,#3a2404,#5a3a08);
  border-right:1.5px solid rgba(200,164,72,.6);
  box-shadow:inset -2px 0 4px rgba(0,0,0,.4);
}
.lbt-icon::after{
  content:'📖';position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:20px;
}
.lbt-text{flex:1}
.lbt-title{
  font-family:'Caveat',cursive;font-weight:700;font-size:20px;
  color:#6ddde0;letter-spacing:.4px;line-height:1.1;
  animation:candleFlicker 3s ease-in-out infinite;
}
.lbt-sub{
  font-family:'Caveat',cursive;font-size:14px;
  color:rgba(100,200,210,.55);margin-top:2px;
}
.lbt-arrow{
  font-size:20px;color:rgba(80,200,210,.8);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:center;
}
#betLedgerTrigger.open .lbt-arrow{transform:rotate(180deg);}

/* ═══════════════════════════════════════════════════
   REAL BOOK PANEL — full bottom sheet
═══════════════════════════════════════════════════ */
@keyframes gearSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes gearSpinRev{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}
@keyframes copperPulse{
  0%,100%{box-shadow:0 -8px 60px rgba(0,120,130,.6),0 0 0 2px rgba(80,180,180,.4),inset 0 1px 0 rgba(100,220,220,.2),0 0 80px rgba(184,115,51,.15)}
  50%    {box-shadow:0 -14px 80px rgba(0,150,160,.8),0 0 0 3px rgba(80,210,210,.6),inset 0 1px 0 rgba(140,250,250,.3),0 0 120px rgba(200,140,60,.25)}
}
@keyframes rivetsShimmer{
  0%,100%{box-shadow:0 0 6px rgba(220,180,80,.6),inset 0 1px 2px rgba(255,235,140,.7),inset 0 -2px 3px rgba(0,0,0,.5)}
  50%    {box-shadow:0 0 14px rgba(255,210,100,.9),inset 0 1px 3px rgba(255,245,160,1),inset 0 -2px 4px rgba(0,0,0,.4)}
}
@keyframes panelSlideUp{
  0%  {transform:translateY(100%) scale(.98);opacity:0}
  55% {transform:translateY(-6px) scale(1.003);opacity:1}
  72% {transform:translateY(4px) scale(.999)}
  84% {transform:translateY(-2px) scale(1.001)}
  100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes topCrestGlow{
  0%,100%{opacity:.7;filter:drop-shadow(0 0 6px rgba(100,220,230,.6))}
  50%    {opacity:1;filter:drop-shadow(0 0 14px rgba(120,240,255,.9)) drop-shadow(0 0 28px rgba(80,200,220,.5))}
}

#betLedgerBackdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:600;opacity:0;pointer-events:none;
  transition:opacity .32s ease;
}
#betLedgerBackdrop.open{opacity:1;pointer-events:auto;}

#betLedgerPanel{
  position:fixed;bottom:0;left:0;right:0;
  height:84vh;
  z-index:601;
  display:flex;flex-direction:column;
  /* Steampunk dark teal base */
  background:linear-gradient(180deg,#0c3a42 0%,#081e24 6%,#06181e 100%);
  /* Thick copper-teal border frame */
  border-top:5px solid #3ab8c0;
  border-left:4px solid #2a9aa2;
  border-right:4px solid #2a9aa2;
  border-radius:28px 28px 0 0;
  /* Outer glowing rim */
  box-shadow:
    0 -12px 70px rgba(0,0,0,.85),
    0 0 0 1px rgba(80,200,210,.18),
    inset 0 0 0 2px rgba(30,120,130,.4),
    inset 0 1px 0 rgba(100,240,250,.12);
  transform:translateY(100%);opacity:0;pointer-events:none;
  transition:none;
  overflow:hidden;
}
#betLedgerPanel.open{
  transform:translateY(0);opacity:1;pointer-events:auto;
  animation:panelSlideUp .55s cubic-bezier(.16,1,.3,1) forwards, copperPulse 5s ease-in-out 0.56s infinite;
}

/* ── Corner bolt decorations ── */
#betLedgerPanel::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:7px;
  background:linear-gradient(90deg,
    #1a7880 0%, #2ab8c0 8%, #4de0ea 15%, #6af0f8 22%,
    #3dd0d8 30%, #2ab8c0 38%, #5ee8f2 50%,
    #2ab8c0 62%, #3dd0d8 70%, #6af0f8 78%,
    #4de0ea 85%, #2ab8c0 92%, #1a7880 100%
  );
  border-radius:28px 28px 0 0;
  z-index:10;pointer-events:none;
}
/* Inner decorative top line */
#betLedgerPanel::after{
  content:'';
  position:absolute;top:12px;left:20px;right:20px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(100,230,240,.5),rgba(60,200,210,.7),rgba(100,230,240,.5),transparent);
  z-index:10;pointer-events:none;
}

/* Top decorative frame bar */
.book-frame-bar{
  flex-shrink:0;
  background:linear-gradient(180deg,#1c6068 0%,#124448 50%,#0d343a 100%);
  border-bottom:3px solid rgba(40,180,190,.55);
  padding:14px 20px 10px;
  position:relative;
  overflow:visible;
}
/* Top shimmer line on frame bar */
.book-frame-bar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,
    transparent 0%,rgba(100,230,240,.3) 10%,
    rgba(60,210,220,.8) 30%,rgba(120,250,255,1) 50%,
    rgba(60,210,220,.8) 70%,rgba(100,230,240,.3) 90%,transparent 100%
  );
  border-radius:28px 28px 0 0;
}
/* Corner rivet bolts */
.book-frame-bar::after{
  content:'⬡ ⬡ ⬡';position:absolute;top:50%;right:16px;transform:translateY(-50%);
  font-size:11px;color:rgba(100,220,230,.6);letter-spacing:5px;
  text-shadow:0 0 8px rgba(80,220,230,.5);
}

/* Corner bolt circles */
.book-frame-bar .corner-bolt{
  position:absolute;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 33% 28%,rgba(255,235,140,.9),rgba(180,140,50,.9),rgba(80,55,10,1));
  border:2px solid rgba(220,180,80,.8);
  box-shadow:0 0 8px rgba(220,180,80,.5),inset 0 1px 2px rgba(255,235,140,.7);
  animation:rivetsShimmer 2.5s ease-in-out infinite;
}

.book-top-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.book-title-main{
  font-family:'Caveat',cursive;font-weight:700;font-size:26px;
  color:#7ae8f0;letter-spacing:1.5px;
  text-shadow:0 0 18px rgba(80,230,240,.7),0 0 40px rgba(60,200,220,.4);
  animation:candleFlicker 3s ease-in-out infinite;
  display:flex;align-items:center;gap:10px;
}
.book-title-main::before{
  content:'📖';font-size:22px;
  filter:drop-shadow(0 0 8px rgba(100,230,240,.6));
}
.book-close-btn{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(145deg,rgba(0,120,130,.5),rgba(0,80,90,.6));
  border:2.5px solid rgba(60,200,210,.6);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;color:rgba(120,240,250,.9);
  transition:all .2s ease;
  box-shadow:0 0 14px rgba(0,180,190,.3),inset 0 1px 0 rgba(255,255,255,.15);
}
.book-close-btn:active{transform:scale(.85);}
.book-close-btn:hover{background:linear-gradient(145deg,rgba(0,150,160,.6),rgba(0,100,110,.7));box-shadow:0 0 22px rgba(0,210,220,.5);}

/* Gear decorations — side ornaments */
.book-gear-left,.book-gear-right{
  position:absolute;top:50%;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;
  opacity:.55;
  pointer-events:none;
}
.book-gear-left{left:12px;transform:translateY(-50%);animation:gearSpin 8s linear infinite;color:#5ad0d8;text-shadow:0 0 10px rgba(80,200,220,.5)}
.book-gear-right{right:50px;transform:translateY(-50%);animation:gearSpinRev 6s linear infinite;color:#5ad0d8;font-size:16px;text-shadow:0 0 8px rgba(80,200,220,.5)}

/* Tab switcher — REMOVED (only user bets now) */

/* ══════════════════════════════════════
   RED APPROVED STAMP — elite animation
══════════════════════════════════════ */

/* Base stamp — always red APPROVED */
.real-stamp{
  display:inline-block;
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:17px;
  letter-spacing:3px;
  padding:5px 13px 4px;
  border:3.5px solid rgba(185,20,20,.88);
  border-radius:5px;
  transform:rotate(-10deg);
  position:relative;
  margin-top:4px;
  pointer-events:none;
  opacity:0; /* hidden until stamp-anim fires */

  /* Layered red ink look */
  color:rgba(185,20,20,.92);
  background:radial-gradient(ellipse at 50% 50%,rgba(200,30,30,.12),rgba(180,15,15,.06));
  box-shadow:
    0 0 0 1.5px rgba(185,20,20,.55),
    inset 0 0 6px rgba(185,20,20,.1),
    2px 2px 0 rgba(140,10,10,.3);
  text-shadow:
    0 0 8px rgba(200,30,30,.5),
    1px 1px 0 rgba(140,10,10,.4);
}

/* Worn texture overlay */
.real-stamp::before{
  content:'';
  position:absolute;inset:0;
  border-radius:3px;
  background:
    repeating-linear-gradient(
      42deg,
      transparent,transparent 3px,
      rgba(185,20,20,.04) 3px,rgba(185,20,20,.04) 4px
    );
  pointer-events:none;
}

/* Outer ring detail (like a rubber stamp frame) */
.real-stamp::after{
  content:'';
  position:absolute;
  inset:-6px;
  border:1.5px dashed rgba(185,20,20,.22);
  border-radius:8px;
  pointer-events:none;
}

/* ── Stamp drop animation ── */
.stamp-anim{
  animation:
    stampDrop   .58s cubic-bezier(.22,1.4,.36,1) both,
    stampImpact .22s ease .56s both,
    stampInkBleed .7s ease .52s both;
  opacity:1;
}

/* ── Letter-spacing write-on for the text ── */
.stamp-anim .stamp-txt,
.stamp-anim{
  animation:
    stampDrop    .58s cubic-bezier(.22,1.4,.36,1) both,
    stampImpact  .22s ease .56s both,
    stampInkBleed .7s ease .52s both;
}


/* ═══════════════════════════════
   OPEN BOOK — dual page spread
═══════════════════════════════ */
.book-spread{
  flex:1;display:flex;overflow:hidden;
  /* Dark steampunk frame around the spread */
  background:#0a2428;
  position:relative;
  padding:10px 10px 6px;
  gap:0;
}
/* Inner decorative border around entire spread */
.book-spread::before{
  content:'';
  position:absolute;inset:6px;
  border:2px solid rgba(50,170,180,.25);
  border-radius:6px;
  pointer-events:none;
  z-index:3;
}

/* Left page */
.book-page-left{
  flex:1;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(100,80,20,.2) 31px,rgba(100,80,20,.2) 32px),
    linear-gradient(160deg,#f5ecd0 0%,#ede3b8 40%,#e8d8a8 100%);
  border-radius:4px 0 0 4px;
  border-right:none;
  padding:14px 16px 14px 18px;
  overflow-y:auto;overflow-x:hidden;
  position:relative;
  box-shadow:
    inset -10px 0 24px rgba(0,0,0,.18),
    inset 6px 0 14px rgba(255,245,210,.5),
    inset 0 0 40px rgba(0,0,0,.06);
  -webkit-overflow-scrolling:touch;
  animation:pageFlicker 8s ease-in-out infinite;
}
.book-page-left::-webkit-scrollbar{display:none;}

/* Right page */
.book-page-right{
  flex:1;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(100,80,20,.2) 31px,rgba(100,80,20,.2) 32px),
    linear-gradient(200deg,#ede3b8 0%,#f2e8c8 50%,#e6d5a5 100%);
  border-radius:0 4px 4px 0;
  border-left:none;
  padding:14px 18px 14px 16px;
  overflow-y:auto;overflow-x:hidden;
  position:relative;
  box-shadow:
    inset 10px 0 24px rgba(0,0,0,.18),
    inset -6px 0 14px rgba(255,245,210,.5),
    inset 0 0 40px rgba(0,0,0,.06);
  -webkit-overflow-scrolling:touch;
  animation:pageFlicker 8s ease-in-out infinite .4s;
}
.book-page-right::-webkit-scrollbar{display:none;}

/* Center spine with rings */
.book-spine{
  width:34px;flex-shrink:0;
  background:linear-gradient(180deg,
    #6a4e18 0%,#8a6820 10%,#5a4010 25%,
    #8a6820 40%,#5a4010 55%,#7a5a18 70%,
    #5a4010 85%,#8a6820 100%
  );
  display:flex;flex-direction:column;align-items:center;
  justify-content:space-around;
  padding:8px 0;
  box-shadow:
    inset 3px 0 8px rgba(0,0,0,.55),
    inset -3px 0 8px rgba(0,0,0,.55),
    0 0 16px rgba(0,0,0,.4);
  position:relative;z-index:4;
  border-left:2px solid rgba(180,140,50,.6);
  border-right:2px solid rgba(180,140,50,.6);
}
/* Leather texture line on spine */
.book-spine::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,
    transparent,transparent 12px,rgba(0,0,0,.15) 12px,rgba(0,0,0,.15) 13px
  );
  pointer-events:none;
}

.book-ring{
  width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,
    rgba(255,240,140,.95) 0%,
    rgba(220,185,70,.9) 30%,
    rgba(160,120,40,1) 55%,
    rgba(60,40,8,1) 100%
  );
  border:3px solid rgba(210,170,60,.95);
  box-shadow:
    0 3px 8px rgba(0,0,0,.75),
    inset 0 1.5px 4px rgba(255,245,160,.7),
    inset 0 -2px 5px rgba(0,0,0,.6),
    0 0 8px rgba(220,180,70,.4);
  animation:ringGlint 2s ease-in-out infinite;
  flex-shrink:0;
  position:relative;z-index:1;
}
/* Ring hole center */
.book-ring::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,10,0,.9),rgba(40,25,5,.7));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8);
}
.book-ring:nth-child(2){animation-delay:.3s;}
.book-ring:nth-child(3){animation-delay:.6s;}
.book-ring:nth-child(4){animation-delay:.9s;}
.book-ring:nth-child(5){animation-delay:1.2s;}
.book-ring:nth-child(6){animation-delay:1.5s;}

/* Page title underlined like real ledger */
.page-heading{
  font-family:'Caveat',cursive;font-weight:700;font-size:22px;
  color:#2a1a04;text-align:center;margin-bottom:4px;
  text-shadow:1px 1px 0 rgba(255,240,200,.6);
  animation:rowIn .3s ease both;
}
.page-underline{
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(80,50,10,.5),rgba(80,50,10,.7),rgba(80,50,10,.5),transparent);
  margin:0 8px 12px;
  animation:inkLine .6s ease .1s both;
}

/* Field rows — "Name: value" style like reference */
.ledger-field{
  display:flex;align-items:baseline;gap:6px;
  margin-bottom:10px;
  animation:rowIn .3s ease both;
  position:relative;
}
.ledger-field-label{
  font-family:'Caveat',cursive;font-size:17px;font-weight:600;
  color:#5a3a10;flex-shrink:0;min-width:70px;
}
.ledger-field-value{
  font-family:'Caveat',cursive;font-size:20px;font-weight:700;
  color:#1a0e02;flex:1;
  border-bottom:1.5px solid rgba(80,50,10,.3);
  padding-bottom:1px;line-height:1.2;
}
.ledger-field-value.green{color:#1a6a1a;}
.ledger-field-value.red  {color:#8a1a1a;}
.ledger-field-value.blue {color:#1a3a8a;}
.ledger-field-value.violet{color:#5a1a8a;}

/* Divider line between entries */
.ledger-hr{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(80,50,10,.4),transparent);
  margin:8px 0;
}

/* Colour dot */
.col-dot{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  vertical-align:middle;margin-right:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.4);
}

/* Result ball (bigger, pen-drawn look) */
.result-ball{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  font-family:'Caveat',cursive;font-weight:700;font-size:20px;color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.5),inset 0 -3px 6px rgba(0,0,0,.35),inset 0 2px 4px rgba(255,255,255,.3);
  flex-shrink:0;
}

/* Empty state */
.page-empty{
  text-align:center;padding:30px 10px;
  font-family:'Caveat',cursive;font-size:19px;
  color:rgba(80,50,10,.45);line-height:1.8;
}

/* Entry card — groups one round/bet neatly */
.ledger-entry{
  margin-bottom:14px;
  animation:rowIn .3s ease both;
}

/* period small label */
.period-lbl{
  font-family:'Caveat',cursive;font-size:13px;
  color:rgba(80,55,15,.5);margin-bottom:2px;
}

/* ── bottom copper rivet bar ── */
.book-rivet-bar{
  flex-shrink:0;height:14px;
  background:linear-gradient(180deg,rgba(40,160,170,.4),rgba(20,100,110,.7),rgba(10,60,70,.9));
  border-top:3px solid rgba(60,200,210,.5);
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.book-rivet-bar::before{
  content:'⬡ ⬡ ⬡ ⬡ ⬡';
  font-size:9px;color:rgba(100,220,230,.5);letter-spacing:8px;
  text-shadow:0 0 6px rgba(80,210,220,.4);
}


/* ════════════════════════════════════════════════════════════════
   CGZ — CASINO GAME ZONE  v2  (pixel-perfect to reference image)
   Dark green felt · gold borders · 3D timer · real poker chips
════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes cgzGoldTimer{
  0%,100%{text-shadow:0 0 30px rgba(255,210,40,.95),0 0 60px rgba(220,160,20,.55),0 6px 0 #5a3a00,0 3px 0 #3a2500}
  50%{text-shadow:0 0 50px rgba(255,230,60,1),0 0 100px rgba(255,200,30,.7),0 6px 0 #7a5000,0 3px 0 #503500}
}
@keyframes cgzRedTimer{
  0%,100%{text-shadow:0 0 30px rgba(255,50,50,.95),0 0 60px rgba(255,0,0,.5),0 6px 0 #5a0000,0 3px 0 #3a0000}
  50%{text-shadow:0 0 50px rgba(255,80,80,1),0 0 100px rgba(255,20,20,.75),0 6px 0 #7a0000,0 3px 0 #500000}
}
@keyframes cgzLockPulse{
  0%,100%{box-shadow:0 0 8px rgba(255,60,60,.3)}50%{box-shadow:0 0 22px rgba(255,60,60,.65)}
}
@keyframes cgzChipFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%{transform:translateY(-4px) rotate(.6deg)}
  65%{transform:translateY(-2px) rotate(-.4deg)}
}
@keyframes cgzSpotlight{
  0%,100%{opacity:.2}50%{opacity:.32}
}
@keyframes cgzBtnShine{
  0%{transform:translateX(-130%)}55%,100%{transform:translateX(160%)}
}
@keyframes cgzBorderGold{
  0%,100%{box-shadow:0 0 0 2px rgba(212,175,55,.45),0 5px 28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,240,160,.18)}
  50%{box-shadow:0 0 0 2.5px rgba(255,215,80,.75),0 5px 36px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,250,190,.3)}
}
@keyframes cgzChipPress{
  0%{transform:scale(1) translateY(0)}
  40%{transform:scale(.86) translateY(3px)}
  100%{transform:scale(1) translateY(0)}
}
@keyframes cgzParticle{
  0%{opacity:.9;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-60px) scale(0) rotate(45deg)}
}

/* ── Root wrapper ── */
.cgz-root{
  position:relative;
  min-height:100vh;
  padding:0 0 110px;
  overflow-x:hidden;
}

/* ── Background layers ── */
.cgz-bg-felt{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%,rgba(5,90,35,.95) 0%,rgba(2,55,18,.85) 38%,rgba(1,22,7,1) 85%),
    radial-gradient(ellipse 80% 40% at 50% 100%,rgba(2,40,12,.8) 0%,transparent 60%);
  background-color:#011205;
  pointer-events:none;
}
.cgz-bg-grain{
  position:fixed;inset:0;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:200px 200px;
  opacity:.5;pointer-events:none;
}
.cgz-bg-vignette{
  position:fixed;inset:0;z-index:2;
  background:radial-gradient(ellipse at 50% 50%,transparent 25%,rgba(0,0,0,.72) 100%);
  pointer-events:none;
}
.cgz-spotlight{
  position:fixed;top:-5%;left:50%;transform:translateX(-50%);
  width:75%;height:55%;z-index:2;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,220,80,.13) 0%,rgba(255,200,60,.04) 40%,transparent 70%);
  animation:cgzSpotlight 5s ease-in-out infinite;
  pointer-events:none;
}
.cgz-spotlight2{
  width:50%;height:30%;
  background:radial-gradient(ellipse at 50% 0%,rgba(120,255,160,.06) 0%,transparent 70%);
  animation-delay:2.5s;
}

/* ── Top bar ── */
.cgz-topbar{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 8px;
}
.cgz-period-lbl{
  font-size:9px;color:rgba(212,175,55,.6);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
}
.cgz-period-val{
  font-family:'Oswald',sans-serif;font-size:12px;color:rgba(255,235,140,.8);
  font-weight:600;letter-spacing:.5px;margin-top:2px;
}
.cgz-hist-chips{display:flex;gap:7px;align-items:center;}
.cgz-hist-chip{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;
}
.cgz-hchip-rim{
  position:absolute;inset:3px;border-radius:50%;pointer-events:none;
}

/* ── Giant Gold Timer ── */
.cgz-timer-wrap{
  position:relative;z-index:3;
  text-align:center;
  padding:8px 16px 18px;
  margin:0 10px 12px;
  border-radius:22px;
  background:linear-gradient(170deg,rgba(0,60,20,.65),rgba(0,30,10,.8));
  border:2px solid rgba(212,175,55,.4);
  box-shadow:0 0 0 1px rgba(212,175,55,.15),0 10px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,220,80,.08);
}
.cgz-timer-wrap.cgz-timer-low{
  border-color:rgba(255,60,60,.65);
  box-shadow:0 0 0 1px rgba(255,40,40,.2),0 10px 50px rgba(0,0,0,.55),0 0 50px rgba(255,40,40,.15);
  animation:cgzLockPulse 1s ease-in-out infinite;
}
.cgz-timer-label-row{
  font-size:11px;font-weight:800;letter-spacing:3.5px;text-transform:uppercase;
  color:rgba(212,175,55,.65);margin-bottom:2px;font-family:'Oswald',sans-serif;
}
.cgz-timer-digits{
  font-family:'Oswald',sans-serif;
  font-weight:900;
  font-size:104px;
  line-height:.95;
  letter-spacing:10px;
  display:block;
  animation:cgzGoldTimer 2.5s ease-in-out infinite;
  /* Deep 3D layered text extrusion */
  -webkit-text-stroke:1.5px rgba(80,50,0,.4);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5));
}
.cgz-timer-wrap.cgz-timer-low .cgz-timer-digits{
  animation:cgzRedTimer .8s ease-in-out infinite;
}
.cgz-particles{
  position:absolute;inset:0;border-radius:22px;overflow:hidden;pointer-events:none;
}

/* ── Bets bar ── */
.cgz-bets-bar{
  position:relative;z-index:3;
  margin:0 12px 10px;
  padding:9px 13px;
  border-radius:12px;
  background:rgba(212,175,55,.07);
  border:1px solid rgba(212,175,55,.22);
}
.cgz-bet-pill{
  padding:3px 9px;border-radius:50px;
  background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.3);
  font-size:11px;font-weight:700;color:#f5c518;
}

/* ── Green / Violet / Red buttons ── */
.cgz-colour-row{
  position:relative;z-index:3;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:9px;padding:0 12px;margin-bottom:11px;
}
.cgz-col-btn{
  position:relative;overflow:hidden;
  border:none;cursor:pointer;
  border-radius:13px;
  padding:18px 6px 14px;
  display:flex;flex-direction:column;align-items:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1),filter .12s;
}
.cgz-col-btn:active{transform:scale(.89);filter:brightness(.85);}
/* Shine sweep */
.cgz-col-shine{
  position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);
  animation:cgzBtnShine 4s ease-in-out infinite;
  pointer-events:none;
  transform:translateX(-130%);
  will-change:transform;
}
/* Corner decorations — filigree look */
.cgz-col-deco{
  position:absolute;width:12px;height:12px;
  border-color:rgba(255,255,255,.22);border-style:solid;pointer-events:none;
}
.cgz-col-deco-tl{top:5px;left:5px;border-width:1.5px 0 0 1.5px;border-radius:2px 0 0 0;}
.cgz-col-deco-tr{top:5px;right:5px;border-width:1.5px 1.5px 0 0;border-radius:0 2px 0 0;}
.cgz-col-deco-bl{bottom:5px;left:5px;border-width:0 0 1.5px 1.5px;border-radius:0 0 0 2px;}
.cgz-col-deco-br{bottom:5px;right:5px;border-width:0 1.5px 1.5px 0;border-radius:0 0 2px 0;}
.cgz-col-inner{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;z-index:1;}
.cgz-col-name{
  font-family:'Oswald',sans-serif;font-weight:800;font-size:19px;
  color:#fff;letter-spacing:.5px;
  text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 24px rgba(255,255,255,.25);
}
.cgz-col-odds{font-size:11px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.8px;}
/* Button themes */
.cgz-green{
  background:linear-gradient(160deg,#0d4a1c 0%,#166534 35%,#15803d 55%,#0a3516 100%);
  border:2.5px solid rgba(74,222,128,.7);
  box-shadow:0 0 0 1px rgba(34,197,94,.25),0 6px 28px rgba(0,0,0,.7),inset 0 1px 0 rgba(134,239,172,.25),inset 0 -2px 0 rgba(0,0,0,.4),0 0 20px rgba(34,197,94,.15);
  animation:cgzBorderGold 4s ease-in-out infinite;
}
.cgz-violet{
  background:linear-gradient(160deg,#2e1065 0%,#5b21b6 35%,#7c3aed 55%,#1e0844 100%);
  border:2.5px solid rgba(167,139,250,.7);
  box-shadow:0 0 0 1px rgba(139,92,246,.25),0 6px 28px rgba(0,0,0,.7),inset 0 1px 0 rgba(221,214,254,.22),inset 0 -2px 0 rgba(0,0,0,.4),0 0 20px rgba(139,92,246,.15);
}
.cgz-red{
  background:linear-gradient(160deg,#450a0a 0%,#991b1b 35%,#b91c1c 55%,#320808 100%);
  border:2.5px solid rgba(252,165,165,.6);
  box-shadow:0 0 0 1px rgba(220,38,38,.25),0 6px 28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,150,150,.2),inset 0 -2px 0 rgba(0,0,0,.4),0 0 20px rgba(220,38,38,.15);
}

/* ── Number chip section ── */
.cgz-num-section{
  position:relative;z-index:3;
  margin:0 12px 11px;
  background:linear-gradient(165deg,rgba(0,10,4,.75) 0%,rgba(0,18,8,.85) 100%);
  border:2px solid rgba(212,175,55,.35);
  border-radius:20px;
  padding:14px 12px 16px;
  box-shadow:inset 0 2px 16px rgba(0,0,0,.5),0 4px 24px rgba(0,0,0,.5),0 0 0 1px rgba(212,175,55,.1);
}
.cgz-num-label{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:9.5px;color:rgba(212,175,55,.75);font-weight:700;
  letter-spacing:1.8px;text-align:center;margin-bottom:14px;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(212,175,55,.4);
}
.cgz-num-label-icon{font-size:12px;}
.cgz-chip-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}

/* ── Poker chip button ── */
.cgz-chip{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  cursor:pointer;
  border:none;background:transparent;padding:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),filter .15s;
  animation:cgzChipFloat 3.2s ease-in-out infinite;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.75));
}
.cgz-chip:nth-child(1){animation-delay:0s}
.cgz-chip:nth-child(2){animation-delay:.32s}
.cgz-chip:nth-child(3){animation-delay:.64s}
.cgz-chip:nth-child(4){animation-delay:.96s}
.cgz-chip:nth-child(5){animation-delay:1.28s}
.cgz-chip:nth-child(6){animation-delay:.16s}
.cgz-chip:nth-child(7){animation-delay:.48s}
.cgz-chip:nth-child(8){animation-delay:.80s}
.cgz-chip:nth-child(9){animation-delay:1.12s}
.cgz-chip:nth-child(10){animation-delay:1.44s}
.cgz-chip:hover{transform:scale(1.1) translateY(-3px);filter:drop-shadow(0 10px 20px rgba(0,0,0,.85)) brightness(1.15);}
.cgz-chip:active{animation:cgzChipPress .28s ease forwards;filter:drop-shadow(0 2px 5px rgba(0,0,0,.9)) brightness(.88);}

/* Shadow base layer */
.cgz-chip-shadow{
  position:absolute;inset:-4px;border-radius:50%;z-index:0;pointer-events:none;
}

/* Gold outer rim */
.cgz-chip-outer{
  position:absolute;inset:0;border-radius:50%;z-index:1;
  box-shadow:
    inset 0 3px 5px rgba(255,245,180,.45),
    inset 0 -4px 7px rgba(0,0,0,.65),
    0 0 0 2px rgba(0,0,0,.5);
}

/* ── Notch tabs: RECTANGULAR bars matching photo ── */
/* Each notch is a thin coloured rectangle cutting into the gold rim */
.cgz-chip-notch{
  position:absolute;
  border-radius:2px;   /* very slight rounding — square not round */
  z-index:2;
}
/* Top notch — horizontal bar */
.cgz-notch-n{width:18%;height:7%;top:2%;left:41%;border-radius:2px;}
/* Bottom notch — horizontal bar */
.cgz-notch-s{width:18%;height:7%;bottom:2%;left:41%;border-radius:2px;}
/* Left notch — vertical bar */
.cgz-notch-w{width:7%;height:18%;top:41%;left:2%;border-radius:2px;}
/* Right notch — vertical bar */
.cgz-notch-e{width:7%;height:18%;top:41%;right:2%;border-radius:2px;}
/* Diagonal notches — small square bars at 45° positions */
.cgz-notch-nw{width:9%;height:9%;top:10%;left:10%;border-radius:2px;transform:rotate(45deg);}
.cgz-notch-ne{width:9%;height:9%;top:10%;right:10%;border-radius:2px;transform:rotate(45deg);}
.cgz-notch-sw{width:9%;height:9%;bottom:10%;left:10%;border-radius:2px;transform:rotate(45deg);}
.cgz-notch-se{width:9%;height:9%;bottom:10%;right:10%;border-radius:2px;transform:rotate(45deg);}

/* Coloured face inside the gold ring */
.cgz-chip-face{
  position:absolute;inset:11%;border-radius:50%;z-index:3;
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    inset 0 5px 16px rgba(255,255,255,.2),
    inset 0 -6px 16px rgba(0,0,0,.7);
}
/* Inner gold ring on the face */
.cgz-chip-inner-ring{
  position:absolute;inset:9%;border-radius:50%;pointer-events:none;z-index:4;
}
/* Primary gloss highlight — top-left bright ellipse (like photo) */
.cgz-chip-highlight{
  position:absolute;top:6%;left:10%;width:46%;height:40%;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.65) 0%,rgba(255,255,255,.22) 40%,transparent 68%);
  border-radius:50%;pointer-events:none;z-index:5;
}
/* Secondary soft glow — bottom centre */
.cgz-chip-highlight2{
  position:absolute;bottom:8%;left:18%;width:64%;height:30%;
  background:radial-gradient(ellipse at 50% 85%,rgba(255,255,255,.12) 0%,transparent 65%);
  border-radius:50%;pointer-events:none;z-index:5;
}
/* Number */
.cgz-chip-num{
  font-family:'Oswald',sans-serif;font-weight:900;
  font-size:clamp(19px,5.2vw,30px);
  position:relative;z-index:6;letter-spacing:0;
  -webkit-text-stroke:0.8px rgba(0,0,0,.6);
}
/* Outer glow halo */
.cgz-chip-glow{
  position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  z-index:0;
}

/* ── Bet amount row ── */
.cgz-amt-section{
  position:relative;z-index:3;
  padding:0 12px;margin-bottom:11px;
}
.cgz-amt-lbl{
  font-size:9px;color:rgba(212,175,55,.5);font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;
}
.cgz-amt-row{display:flex;gap:7px;flex-wrap:wrap;}
.cgz-amt-pill{
  padding:8px 14px;border-radius:50px;
  background:rgba(0,0,0,.35);
  border:1.5px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.45);
  font-weight:700;font-size:12px;cursor:pointer;
  font-family:'Oswald',sans-serif;letter-spacing:.5px;
  transition:all .18s ease;
}
.cgz-amt-pill.cgz-amt-active{
  background:rgba(212,175,55,.14);
  border-color:rgba(212,175,55,.8);
  color:#f5c518;
  box-shadow:0 0 14px rgba(212,175,55,.25),inset 0 1px 0 rgba(255,240,160,.1);
}

/* ── SMALL / BIG buttons ── */
.cgz-sb-row{
  position:relative;z-index:3;
  display:grid;grid-template-columns:1fr 1fr;
  gap:11px;padding:0 12px;margin-bottom:14px;
}
.cgz-sb-btn{
  position:relative;overflow:hidden;
  border:none;cursor:pointer;border-radius:14px;
  padding:28px 10px 20px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1),filter .12s;
}
.cgz-sb-btn:active{transform:scale(.93);filter:brightness(.82);}

/* Shine sweep */
.cgz-sb-shine{
  position:absolute;top:0;left:0;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.1),transparent);
  animation:cgzBtnShine 5s ease-in-out infinite;pointer-events:none;
  transform:translateX(-130%);will-change:transform;
}

/* Corner filigree ornaments — matching photo decorative corners */
.cgz-sb-deco{
  position:absolute;pointer-events:none;
  width:22px;height:22px;
}
.cgz-sb-deco::before,.cgz-sb-deco::after{
  content:'';position:absolute;
  background:rgba(212,175,55,.7);
  border-radius:1px;
}
/* TL corner: horizontal + vertical bar */
.cgz-sb-deco-tl{top:8px;left:8px;}
.cgz-sb-deco-tl::before{width:14px;height:2px;top:0;left:0;}
.cgz-sb-deco-tl::after{width:2px;height:14px;top:0;left:0;}
/* TR corner */
.cgz-sb-deco-tr{top:8px;right:8px;}
.cgz-sb-deco-tr::before{width:14px;height:2px;top:0;right:0;}
.cgz-sb-deco-tr::after{width:2px;height:14px;top:0;right:0;}
/* BL corner */
.cgz-sb-deco-bl{bottom:8px;left:8px;}
.cgz-sb-deco-bl::before{width:14px;height:2px;bottom:0;left:0;}
.cgz-sb-deco-bl::after{width:2px;height:14px;bottom:0;left:0;}
/* BR corner */
.cgz-sb-deco-br{bottom:8px;right:8px;}
.cgz-sb-deco-br::before{width:14px;height:2px;bottom:0;right:0;}
.cgz-sb-deco-br::after{width:2px;height:14px;bottom:0;right:0;}

.cgz-sb-name{
  font-family:'Oswald',sans-serif;font-weight:900;font-size:34px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.95),0 0 20px rgba(255,255,255,.1);
  letter-spacing:3px;position:relative;z-index:1;
}
.cgz-sb-sub{
  font-size:12px;font-weight:700;color:rgba(255,255,255,.55);
  letter-spacing:1.5px;position:relative;z-index:1;
  display:flex;align-items:center;gap:5px;
}

/* SMALL — deep navy blue, thick bright gold border matching photo */
.cgz-sb-small{
  background:linear-gradient(160deg,#0a1535 0%,#102060 30%,#1a3a9a 55%,#0d1d5a 80%,#07102e 100%);
  border:3px solid #d4af37;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.15),
    0 0 22px rgba(212,175,55,.35),
    0 0 44px rgba(212,175,55,.12),
    0 8px 32px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(200,210,255,.15),
    inset 0 -2px 8px rgba(0,0,0,.5);
}

/* BIG — deep crimson, thick bright gold border matching photo */
.cgz-sb-big{
  background:linear-gradient(160deg,#1a0505 0%,#5a0f0f 30%,#8b1a1a 55%,#6e1010 80%,#120404 100%);
  border:3px solid #d4af37;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.15),
    0 0 22px rgba(212,175,55,.35),
    0 0 44px rgba(212,175,55,.12),
    0 8px 32px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,160,160,.12),
    inset 0 -2px 8px rgba(0,0,0,.5);
}

/* ── History section ── */
.cgz-history{
  position:relative;z-index:3;
  margin:0 12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(212,175,55,.14);
  border-radius:18px;
  padding:13px;
}
.cgz-history-hdr{
  font-size:9px;color:rgba(212,175,55,.55);font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;
}

/* ═══════════════════════════════════════════
   BIG / SMALL BOLD BADGES in history
═══════════════════════════════════════════ */
.cgz-big-badge{
  display:inline-block;
  font-family:'Oswald',sans-serif;font-weight:900;font-size:11px;
  padding:2px 8px;border-radius:50px;letter-spacing:1px;
  color:#fff;
  background:linear-gradient(135deg,#ea580c,#fb923c);
  border:1.5px solid #fb923c;
  box-shadow:0 0 8px rgba(251,146,60,.7),0 0 18px rgba(234,88,12,.35);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  animation:bigBadgePulse 2.2s ease-in-out infinite;
}
.cgz-small-badge{
  display:inline-block;
  font-family:'Oswald',sans-serif;font-weight:900;font-size:11px;
  padding:2px 8px;border-radius:50px;letter-spacing:1px;
  color:#fff;
  background:linear-gradient(135deg,#1d4ed8,#3b82f6);
  border:1.5px solid #60a5fa;
  box-shadow:0 0 8px rgba(96,165,250,.7),0 0 18px rgba(59,130,246,.35);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  animation:smallBadgePulse 2.2s ease-in-out infinite;
}
@keyframes bigBadgePulse{
  0%,100%{box-shadow:0 0 8px rgba(251,146,60,.7),0 0 18px rgba(234,88,12,.35)}
  50%{box-shadow:0 0 14px rgba(255,165,80,1),0 0 30px rgba(234,88,12,.6)}
}
@keyframes smallBadgePulse{
  0%,100%{box-shadow:0 0 8px rgba(96,165,250,.7),0 0 18px rgba(59,130,246,.35)}
  50%{box-shadow:0 0 14px rgba(120,180,255,1),0 0 30px rgba(59,130,246,.6)}
}

/* ═══════════════════════════════════════════
   LAST BETS STRIP — above the timer
═══════════════════════════════════════════ */
.cgz-last-bets-strip{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(20,16,40,.7),rgba(0,0,0,.55));
  border-top:1px solid rgba(255,215,0,.1);
  border-bottom:1px solid rgba(255,215,0,.1);
  min-height:38px;
  flex-shrink:0;
}
.cgz-last-bets-strip::-webkit-scrollbar{display:none}
.clb-empty{
  font-size:10px;color:rgba(255,255,255,.2);
  font-style:italic;white-space:nowrap;padding:0 4px;
}
.clb-pill{
  display:flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:50px;
  flex-shrink:0;white-space:nowrap;
  font-family:'Oswald',sans-serif;
  font-size:11px;font-weight:700;
  border:1.5px solid;
  cursor:default;
  transition:transform .15s ease;
}
.clb-pill:active{transform:scale(.95)}
.clb-big{
  background:linear-gradient(135deg,rgba(234,88,12,.22),rgba(251,146,60,.1));
  border-color:rgba(251,146,60,.55);
  box-shadow:0 0 8px rgba(251,146,60,.25);
}
.clb-small{
  background:linear-gradient(135deg,rgba(29,78,216,.22),rgba(96,165,250,.1));
  border-color:rgba(96,165,250,.55);
  box-shadow:0 0 8px rgba(96,165,250,.25);
}
.clb-result{
  font-size:10px;font-weight:900;letter-spacing:.8px;
}
.clb-big .clb-result{color:#fb923c}
.clb-small .clb-result{color:#60a5fa}
.clb-col{
  font-size:10px;font-weight:800;
  width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  font-size:8px;
}
.clb-num{
  font-size:13px;font-weight:900;color:rgba(255,255,255,.85);
}
.clb-pnl{font-size:10px;font-weight:800;}
.clb-won{color:#22c55e}
.clb-lost{color:#ef4444}

/* ═══════════════════════════════════════════
   IMPROVED ACTIVE BETS BAR
═══════════════════════════════════════════ */
.cgz-bets-bar{
  margin:0 12px 8px;
  padding:10px 14px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(245,197,24,.1),rgba(255,165,0,.06));
  border:1.5px solid rgba(245,197,24,.35);
  box-shadow:0 0 18px rgba(245,197,24,.12),inset 0 1px 0 rgba(255,255,255,.08);
  animation:betBarPulse 2.5s ease-in-out infinite;
}
@keyframes betBarPulse{
  0%,100%{border-color:rgba(245,197,24,.35);box-shadow:0 0 18px rgba(245,197,24,.12)}
  50%{border-color:rgba(245,197,24,.6);box-shadow:0 0 28px rgba(245,197,24,.25)}
}
.cgz-bets-bar-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;
}
.cgz-bets-count{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:11px;
  color:#f5c518;letter-spacing:.5px;
}
.cgz-bets-total{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:11px;
  color:rgba(255,255,255,.5);
}
.cgz-bets-pills{
  display:flex;flex-wrap:wrap;gap:5px;
}
.cgz-bet-pill{
  padding:4px 12px;border-radius:50px;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:11px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.75);
  letter-spacing:.5px;
}
.cgz-pill-big{
  background:linear-gradient(135deg,rgba(234,88,12,.25),rgba(251,146,60,.12));
  border:1.5px solid rgba(251,146,60,.55);
  color:#fb923c;
  box-shadow:0 0 8px rgba(251,146,60,.2);
}
.cgz-pill-small{
  background:linear-gradient(135deg,rgba(29,78,216,.25),rgba(96,165,250,.12));
  border:1.5px solid rgba(96,165,250,.55);
  color:#60a5fa;
  box-shadow:0 0 8px rgba(96,165,250,.2);
}

/* ─── BIG/SMALL Results Strip (above timer) ─── */
.cgz-bs-results-strip{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(10,6,28,.8),rgba(0,0,0,.6));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  min-height:34px;
  flex-shrink:0;
}
.cgz-bs-results-strip::-webkit-scrollbar{display:none}
.cgz-bs-strip-label{
  font-family:'Oswald',sans-serif;
  font-size:9px;font-weight:700;
  color:rgba(255,215,0,.5);
  letter-spacing:1.5px;
  white-space:nowrap;
  flex-shrink:0;
  margin-right:2px;
}
.cgz-bs-pill{
  display:flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:50px;
  flex-shrink:0;white-space:nowrap;
  font-family:'Oswald',sans-serif;
  font-weight:700;
  border:1.5px solid;
  transition:transform .15s ease;
}
.cgz-bs-big{
  background:linear-gradient(135deg,rgba(234,88,12,.25),rgba(251,146,60,.12));
  border-color:rgba(251,146,60,.6);
  box-shadow:0 0 6px rgba(251,146,60,.28);
}
.cgz-bs-small{
  background:linear-gradient(135deg,rgba(29,78,216,.25),rgba(96,165,250,.12));
  border-color:rgba(96,165,250,.6);
  box-shadow:0 0 6px rgba(96,165,250,.28);
}
.cgz-bs-num{
  font-size:13px;font-weight:900;
}
.cgz-bs-tag{
  font-size:9px;font-weight:900;letter-spacing:.8px;
}
.cgz-bs-big .cgz-bs-tag{color:#fb923c}
.cgz-bs-small .cgz-bs-tag{color:#60a5fa}

/* ═══════════════════════════════════════════
   RESULT POPUP ANIMATION
═══════════════════════════════════════════ */
@keyframes wwPopIn{
  0%{opacity:0;transform:scale(.7) translateY(40px)}
  65%{opacity:1;transform:scale(1.04) translateY(-4px)}
  82%{transform:scale(.97) translateY(2px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* ═══════════════════════════════════════════
   CASHOUT MARQUEE BAR
═══════════════════════════════════════════ */
@keyframes cashoutScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes cashoutBarGlow{
  0%,100%{
    box-shadow:0 0 0 1.5px rgba(34,197,94,.25),
      0 0 14px rgba(34,197,94,.3),
      0 0 28px rgba(34,197,94,.1),
      inset 0 1px 0 rgba(255,255,255,.05);
  }
  50%{
    box-shadow:0 0 0 1.5px rgba(34,197,94,.55),
      0 0 22px rgba(34,197,94,.55),
      0 0 44px rgba(34,197,94,.2),
      inset 0 1px 0 rgba(34,197,94,.1);
  }
}
@keyframes userGlow{
  0%,100%{text-shadow:0 0 6px rgba(0,212,255,.6),0 0 14px rgba(0,180,255,.3)}
  50%{text-shadow:0 0 10px rgba(0,229,255,1),0 0 22px rgba(0,200,255,.55)}
}
@keyframes amtGlow{
  0%,100%{text-shadow:0 0 7px rgba(34,197,94,.8),0 0 16px rgba(34,197,94,.4)}
  50%{text-shadow:0 0 12px rgba(34,255,120,1),0 0 26px rgba(34,197,94,.65)}
}
.cgz-cashout-bar{
  position:relative;z-index:3;
  display:flex;align-items:center;
  margin:4px 12px 4px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(0,15,6,.9),rgba(4,30,12,.85),rgba(0,15,6,.9));
  border:1.5px solid rgba(34,197,94,.35);
  animation:cashoutBarGlow 2.8s ease-in-out infinite;
  min-height:36px;
  flex-shrink:0;
}
.cgz-cashout-bar::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(34,197,94,.06) 0%,
    transparent 30%,
    transparent 70%,
    rgba(34,197,94,.06) 100%);
  pointer-events:none;
}
.cgz-cashout-label{
  display:flex;align-items:center;gap:5px;
  padding:0 10px 0 11px;
  font-family:'Oswald',sans-serif;
  font-size:9px;font-weight:900;
  color:#22c55e;
  letter-spacing:2px;
  white-space:nowrap;
  flex-shrink:0;
  border-right:1px solid rgba(34,197,94,.25);
  height:100%;min-height:36px;
  text-shadow:0 0 8px rgba(34,197,94,.7);
}
.cgz-cashout-track{
  flex:1;overflow:hidden;
  position:relative;
}
/* fade edges */
.cgz-cashout-track::before,.cgz-cashout-track::after{
  content:'';position:absolute;top:0;bottom:0;width:28px;z-index:2;pointer-events:none;
}
.cgz-cashout-track::before{left:0;background:linear-gradient(90deg,rgba(0,15,6,.9),transparent);}
.cgz-cashout-track::after{right:0;background:linear-gradient(-90deg,rgba(0,15,6,.9),transparent);}

.cgz-cashout-inner{
  display:inline-flex;align-items:center;gap:0;
  white-space:nowrap;
  animation:cashoutScroll 28s linear infinite;
  padding:0 12px;
}
.cgz-cashout-inner:hover{animation-play-state:paused}
.cgz-co-item{
  font-family:'Space Grotesk',sans-serif;
  font-size:11.5px;font-weight:600;
  color:rgba(255,255,255,.75);
  padding:0 6px;
}
.cgz-co-user{
  color:#00d4ff;
  font-weight:800;
  animation:userGlow 2.2s ease-in-out infinite;
}
.cgz-co-amt{
  color:#22c55e;
  font-weight:900;
  animation:amtGlow 2s ease-in-out infinite;
}
.cgz-co-sep{
  color:rgba(212,175,55,.4);
  font-size:10px;
  padding:0 8px;
}

/* ═══════════════════════════════════════════
   PREMIUM BALANCE WIDGET — game page
═══════════════════════════════════════════ */
@keyframes balWidgetShimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(280%)}
}
@keyframes balAmountPulse{
  0%,100%{
    text-shadow:0 0 18px rgba(255,160,0,1),
      0 0 36px rgba(255,120,0,.9),
      0 0 60px rgba(220,80,0,.55),
      0 2px 0 rgba(0,0,0,.5);
  }
  50%{
    text-shadow:0 0 28px rgba(255,200,50,1),
      0 0 55px rgba(255,150,20,1),
      0 0 90px rgba(240,100,0,.7),
      0 0 130px rgba(200,60,0,.3),
      0 2px 0 rgba(0,0,0,.5);
  }
}
@keyframes goldBorderPulse{
  0%,100%{
    box-shadow:
      0 0 0 3px #d4af37,
      0 0 0 4.5px rgba(255,230,80,.18),
      0 0 0 6px rgba(180,130,20,.08),
      0 0 24px rgba(212,175,55,.5),
      0 0 48px rgba(180,140,30,.22),
      0 8px 28px rgba(0,0,0,.8),
      inset 0 1.5px 0 rgba(255,248,160,.2),
      inset 0 -1.5px 0 rgba(0,0,0,.5);
  }
  50%{
    box-shadow:
      0 0 0 3px #ffe566,
      0 0 0 4.5px rgba(255,240,100,.28),
      0 0 0 6px rgba(212,175,55,.12),
      0 0 36px rgba(255,215,0,.7),
      0 0 70px rgba(212,175,55,.35),
      0 8px 28px rgba(0,0,0,.8),
      inset 0 1.5px 0 rgba(255,252,200,.3),
      inset 0 -1.5px 0 rgba(0,0,0,.5);
  }
}
@keyframes coinSpin{
  0%,85%,100%{transform:rotateY(0deg)}
  90%{transform:rotateY(180deg)}
  95%{transform:rotateY(360deg)}
}
.cgz-balance-widget{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;
  margin:6px 12px 6px;
  padding:16px 20px;
  border-radius:20px;
  background:linear-gradient(135deg,
    rgba(90,35,0,.7) 0%,
    rgba(55,18,0,.8) 28%,
    rgba(18,6,0,.88) 58%,
    rgba(70,28,0,.65) 85%,
    rgba(100,40,0,.5) 100%);
  animation:goldBorderPulse 2.8s ease-in-out infinite;
  will-change:box-shadow;
  flex-shrink:0;
}
/* Gold shimmer top edge */
.cgz-balance-widget::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,230,80,.4),
    rgba(255,215,0,1),
    rgba(255,248,160,.9),
    rgba(255,215,0,1),
    rgba(255,230,80,.4),
    transparent);
  border-radius:0 0 3px 3px;
}
/* Gold shimmer bottom edge */
.cgz-balance-widget::after{
  content:'';position:absolute;bottom:0;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.4),transparent);
}
.cgz-bal-shimmer{
  position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,240,160,.07),rgba(255,215,0,.04),transparent);
  animation:balWidgetShimmer 4.5s ease-in-out infinite 1s;
  pointer-events:none;
  transform:translateX(-100%);
}
.cgz-bal-left{
  display:flex;align-items:center;gap:15px;
}
.cgz-bal-icon{
  width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,rgba(255,248,160,.22),rgba(180,120,0,.1));
  border:3px solid #d4af37;
  box-shadow:
    0 0 20px rgba(212,175,55,.6),
    0 0 40px rgba(180,140,30,.3),
    inset 0 2px 0 rgba(255,248,180,.35),
    inset 0 -2px 0 rgba(80,50,0,.5);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  animation:coinSpin 5s ease-in-out infinite;
}
.cgz-bal-info{display:flex;flex-direction:column;gap:2px}
.cgz-bal-label{
  font-family:'Oswald',sans-serif;
  font-size:12px;font-weight:900;
  color:#fff5a0;
  letter-spacing:3px;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(255,240,80,1),0 0 24px rgba(255,215,0,.8),0 0 44px rgba(255,180,0,.45);
}
.cgz-bal-amount{
  font-family:'Oswald',sans-serif;
  font-size:38px;font-weight:900;
  color:#ff9500;
  letter-spacing:2px;
  line-height:1;
  animation:balAmountPulse 2.5s ease-in-out infinite;
}
.cgz-bal-sub{
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;font-weight:800;
  color:rgba(255,235,100,.9);
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-top:2px;
  text-shadow:0 0 10px rgba(255,215,0,.7),0 0 20px rgba(255,180,0,.35);
}
.cgz-bal-deposit-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(160deg,rgba(212,175,55,.25),rgba(160,110,0,.15));
  border:2.5px solid #d4af37;
  box-shadow:
    0 0 16px rgba(212,175,55,.4),
    0 0 32px rgba(180,140,30,.15),
    inset 0 1.5px 0 rgba(255,248,180,.2),
    inset 0 -1px 0 rgba(80,50,0,.35);
  font-family:'Oswald',sans-serif;
  font-size:10px;font-weight:900;
  color:#cc5500;
  letter-spacing:2px;
  cursor:pointer;
  flex-shrink:0;
  text-shadow:0 1px 0 rgba(255,200,100,.2);
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;
}
.cgz-bal-deposit-btn svg{color:#8a4400}
.cgz-bal-deposit-btn:active{
  transform:scale(.92);
  box-shadow:0 0 8px rgba(212,175,55,.25);
}

/* ── Performance ── */
.cgz-timer-wrap,.cgz-balance-widget,.cgz-colour-row,.cgz-chip-grid{
  contain:layout style;
}
/* Force GPU layer for all animated shine elements */
.cgz-col-shine,.cgz-sb-shine,.brand-shine,.bc-btn::before,
.bet-card::before,.shine-card::before,#betLedgerTrigger::before{
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Reduce blob animation cost on mobile */
.blob{
  will-change:transform;
  backface-visibility:hidden;
}
/* Disable expensive animations when tab is hidden */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}