/* =====================================================================
   LUCKY BABES · V2  —  standalone animated visual prototype
   Fresh design system. No backend. Mobile-first, scales to desktop.
   ===================================================================== */
:root{
  /* ---- structural surfaces: neutral slate, not plum ---- */
  --bg:#040405;            /* page base */
  --surface:#141821;       /* card / panel */
  --surface-2:#1a1f2a;     /* elevated panel */
  --surface-3:#222936;     /* nested / inputs */
  --surface-hi:#2a3140;    /* hover surface */

  /* ---- brand accents (identity only, used sparingly) ---- */
  --pink:#FF4DB8;
  --pink-2:#ff7ed0;
  --purple:#8b5cff;        /* primary brand action */
  --purple-2:#a98bff;
  --cyan:#24D9FF;          /* cool accent, rare */
  --gold:#FFC83D;          /* premium / VIP / value only */
  --gold-2:#ffe08a;

  /* ---- semantic states ---- */
  --success:#34d399;
  --warning:#f6b756;
  --error:#ff5d73;
  --available:#34d399;
  --locked:#7b8494;
  --green:var(--success);  /* legacy aliases */
  --red:var(--error);

  /* ---- text ---- */
  --ink:#f4f6fb;
  --muted:rgba(244,246,251,.66);
  --faint:rgba(244,246,251,.55);

  /* ---- borders / hairlines ---- */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.15);
  --focus:#7aa8ff;         /* focus ring, distinct from brand */

  /* ---- surfaces as near-flat tonal (no glass) ---- */
  --glass:var(--surface);
  --glass-2:var(--surface-2);

  /* ---- brand fills: flat by default; gradient reserved for hero/CTA only ---- */
  --grad-pink:var(--pink);
  --grad-cta:var(--purple);            /* solid primary action */
  --grad-gold:var(--gold);
  --grad-cyber:var(--cyan);
  --hero-grad:linear-gradient(120deg,#3a2566,#241640 70%);  /* the ONE restrained gradient */
  --cta-grad:linear-gradient(120deg,#9b5cff,#6c3df0);       /* premium claim moment only */

  /* ---- radius scale: sharper, consistent ---- */
  --r-xs:6px; --r-sm:8px; --r:11px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* ---- depth: subtle, neutral (no colored glow) ---- */
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh:0 6px 18px -10px rgba(0,0,0,.55);
  --sh-lg:0 16px 38px -18px rgba(0,0,0,.6);
  --sh-glow:0 6px 18px -10px rgba(0,0,0,.55);  /* legacy alias → subtle, no neon */
  --edge:inset 0 1px 0 rgba(255,255,255,.06);

  /* ---- layout / spacing ---- */
  --topbar-h:70px; --botnav-h:62px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --maxw:480px;            /* mobile column; widened by breakpoints below */
  --content-pad:16px;

  --f-disp:'Fredoka',system-ui,sans-serif;
  --f-impact:'Bungee',var(--f-disp);
  --f-game-bold:'Lilita One',var(--f-disp);
  --f-game-tech:'Kanit',var(--f-body);
  --f-body:'Outfit',system-ui,sans-serif;
  --lb-logo:url('../assets/lb-brand-current/lb-logo-transparent.png?v=lb-perfect-logo-20260623');
  --lucky-chip:url('../assets/lb-brand-current/lucky-chips.webp');
  --fun-chip:url('../assets/lb-brand-current/fun-chips.webp');
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:600;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + 8px) 0
          calc(var(--botnav-h) + env(safe-area-inset-bottom,0px) + 16px);
}
img{display:block;max-width:100%}
[hidden]{display:none!important}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
::-webkit-scrollbar{width:0;height:0}

.lb-logo-button{position:relative;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;
  transition:transform .15s}
.lb-logo-button img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(0,0,0,.45))}
button:active .lb-logo-button{transform:scale(.93)}

/* ---------- background: brand light-streaks, spread across the WHOLE screen ---------- */
.bg{position:fixed;inset:0;z-index:-3;overflow:hidden;background:var(--bg)}
.bg-base{position:absolute;inset:0;background:var(--bg)}
/* thin, crisp comet trails — brand-tinted, seeded across every column AND row so the
   whole viewport streaks, never bunched in one corner. GPU transform/opacity only. */
.bg-streaks{position:absolute;inset:-12% -16%;pointer-events:none;contain:strict;opacity:.35}
.bg-streaks i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--len);height:1.6px;border-radius:2px;
  background:linear-gradient(90deg,transparent 0%,var(--c) 60%,#fff 93%,transparent 100%);
  filter:drop-shadow(0 0 3px var(--c));
  opacity:0;will-change:transform,opacity;
  transform:rotate(-19deg) translate3d(-55vw,0,0);
  animation:bgStreak var(--dur) cubic-bezier(.32,0,.22,1) var(--delay) infinite;
}
@keyframes bgStreak{
  0%{opacity:0;transform:rotate(-19deg) translate3d(-55vw,0,0)}
  8%{opacity:var(--op)}
  72%{opacity:var(--op)}
  100%{opacity:0;transform:rotate(-19deg) translate3d(60vw,0,0)}
}
.bg-streaks i:nth-child(1){--x:-8%;--y:8%; --len:34vw;--c:rgba(169,139,255,.85);--op:.50;--dur:8.5s;--delay:0s}
.bg-streaks i:nth-child(2){--x:30%;--y:5%; --len:22vw;--c:rgba(255,255,255,.70);--op:.34;--dur:6.4s;--delay:1.6s}
.bg-streaks i:nth-child(3){--x:62%;--y:11%;--len:40vw;--c:rgba(255,77,184,.70);--op:.42;--dur:10.5s;--delay:3.2s}
.bg-streaks i:nth-child(4){--x:14%;--y:20%;--len:26vw;--c:rgba(139,92,255,.80);--op:.40;--dur:7.6s;--delay:.8s}
.bg-streaks i:nth-child(5){--x:46%;--y:24%;--len:30vw;--c:rgba(36,217,255,.55);--op:.32;--dur:9.4s;--delay:4.6s}
.bg-streaks i:nth-child(6){--x:78%;--y:18%;--len:20vw;--c:rgba(255,200,61,.60);--op:.34;--dur:11.5s;--delay:2.4s}
.bg-streaks i:nth-child(7){--x:-6%;--y:33%;--len:24vw;--c:rgba(255,255,255,.60);--op:.30;--dur:7.0s;--delay:5.5s}
.bg-streaks i:nth-child(8){--x:34%;--y:38%;--len:18vw;--c:rgba(169,139,255,.70);--op:.36;--dur:5.6s;--delay:6.3s}
.bg-streaks i:nth-child(9){--x:66%;--y:31%;--len:36vw;--c:rgba(255,77,184,.62);--op:.32;--dur:12.5s;--delay:1.1s}
.bg-streaks i:nth-child(10){--x:18%;--y:46%;--len:28vw;--c:rgba(36,217,255,.55);--op:.30;--dur:8.0s;--delay:3.8s}
.bg-streaks i:nth-child(11){--x:50%;--y:52%;--len:38vw;--c:rgba(169,139,255,.80);--op:.44;--dur:10.0s;--delay:.4s}
.bg-streaks i:nth-child(12){--x:80%;--y:44%;--len:22vw;--c:rgba(255,255,255,.60);--op:.30;--dur:6.8s;--delay:7.0s}
.bg-streaks i:nth-child(13){--x:-4%;--y:58%;--len:32vw;--c:rgba(255,77,184,.70);--op:.40;--dur:9.0s;--delay:2.0s}
.bg-streaks i:nth-child(14){--x:38%;--y:63%;--len:26vw;--c:rgba(139,92,255,.78);--op:.38;--dur:7.4s;--delay:5.0s}
.bg-streaks i:nth-child(15){--x:70%;--y:56%;--len:42vw;--c:rgba(36,217,255,.50);--op:.28;--dur:11.0s;--delay:3.0s}
.bg-streaks i:nth-child(16){--x:12%;--y:72%;--len:24vw;--c:rgba(255,200,61,.55);--op:.32;--dur:8.6s;--delay:6.0s}
.bg-streaks i:nth-child(17){--x:52%;--y:76%;--len:30vw;--c:rgba(255,255,255,.55);--op:.30;--dur:9.8s;--delay:1.8s}
.bg-streaks i:nth-child(18){--x:76%;--y:68%;--len:20vw;--c:rgba(169,139,255,.72);--op:.36;--dur:6.2s;--delay:4.2s}
.bg-streaks i:nth-child(19){--x:24%;--y:88%;--len:34vw;--c:rgba(255,77,184,.62);--op:.34;--dur:10.8s;--delay:2.8s}
.bg-streaks i:nth-child(20){--x:60%;--y:92%;--len:26vw;--c:rgba(36,217,255,.52);--op:.28;--dur:8.2s;--delay:5.8s}
@media (prefers-reduced-motion: reduce){.bg-streaks{display:none}}
#fx{position:fixed;inset:0;z-index:60;pointer-events:none}
body.fx-paused #fx,
body.fx-paused .bg-streaks{display:none!important}

/* ---------- splash ---------- */
#splash{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:18px;
  background:#000;transition:opacity .5s ease,visibility .5s}
#splash.gone{opacity:0;visibility:hidden}
.splash-logo{width:132px;height:132px;display:grid;place-items:center}
.splash-video-frame{position:relative;display:block;width:132px;height:132px;overflow:hidden;border-radius:28px;background:#000;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}
.splash-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 43%;
  transform:scale(1.08);background:#000}
.splash-fallback{position:absolute;inset:19%;width:62%;height:62%;object-fit:contain;object-position:center;display:none}
.splash-bar{width:170px;height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.splash-bar i{display:block;height:100%;width:30%;border-radius:99px;background:#fff;animation:load 1.2s ease forwards}
.splash-tag{font-family:var(--f-disp);font-weight:700;letter-spacing:.32em;color:var(--muted);font-size:12px}
@keyframes load{to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .splash-video,.loading-video{display:none}
  .splash-fallback,.loading-video-fallback{display:block}
}

/* ---------- chips ---------- */
.bal-chip{display:inline-block;width:30px;height:30px;flex:0 0 auto;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.bal-chip.lucky{background-image:var(--lucky-chip)}
.bal-chip.fun{background-image:var(--fun-chip)}
.chip-i{display:inline-block;width:18px;height:18px;vertical-align:-4px;background:var(--lucky-chip) center/contain no-repeat}
.chip-i.fun{background-image:var(--fun-chip)}

/* ---------- topbar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:90;height:calc(var(--topbar-h) + env(safe-area-inset-top,0px));
  padding:calc(env(safe-area-inset-top,0px) + 7px) 11px 7px;
  display:flex;align-items:center;gap:8px;max-width:none;margin-inline:0;border-radius:0;
  background:rgba(12,12,13,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.tb-home{width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center}
.tb-home .lb-logo-button{width:54px;height:54px;border-radius:14px}
.tb-home:active .lb-logo-button{transform:scale(.92)}
.tb-icon{position:relative;width:54px;height:54px;flex:0 0 auto;display:grid;place-items:center;border-radius:6px;
  background:#131316;border:1px solid var(--line);transition:transform .15s,border-color .2s,background .2s,color .2s}
.tb-icon:hover,.tb-icon.is-active{background:rgba(139,92,255,.055);border-color:rgba(139,92,255,.28);color:var(--purple-2)}
.tb-icon svg{width:27px;height:27px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb-icon .tb-nav-img{position:absolute;inset:50% auto auto 50%;width:31px;height:31px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.42));transform:translate(-50%,-50%);transition:opacity .16s ease}
.tb-icon .tb-nav-purple{opacity:0}
.tb-icon:hover .tb-nav-base,.tb-icon.is-active .tb-nav-base{opacity:0}
.tb-icon:hover .tb-nav-purple,.tb-icon.is-active .tb-nav-purple{opacity:1}
.tb-wallet svg{fill:var(--purple-2);stroke:none}
.tb-chat.is-active{background:rgba(139,92,255,.07);border-color:rgba(139,92,255,.34);color:var(--purple-2)}
.tb-chat.is-active svg{stroke:#fff}
.tb-chat.is-active .tb-nav-img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.38))}
.tb-icon:active{transform:scale(.92)}
.tb-home:focus-visible,.tb-icon:focus-visible,.tb-balance:focus-visible,.tb-profile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tb-bell .dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:var(--r-pill);background:var(--pink);
  color:#fff;font:800 10px/18px var(--f-body);text-align:center}
.tb-bell{position:relative}
.tb-balance{flex:1;min-width:0;height:54px;display:flex;align-items:center;gap:9px;padding:0 13px 0 10px;border-radius:6px;
  background:#131316;border:1px solid var(--line);overflow:hidden;transition:background .2s,border-color .2s,color .2s}
.tb-balance:hover,.tb-balance.is-active{background:rgba(139,92,255,.055);border-color:rgba(139,92,255,.28);color:var(--purple-2)}
.tb-balance:hover .bal-caret,.tb-balance.is-active .bal-caret{stroke:var(--purple-2)}
.tb-balance .bal-chip{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.bal-amt{font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:.2px;margin-right:auto;white-space:nowrap}
.bal-caret{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--muted);stroke-width:2.6;stroke-linecap:round}
.tb-profile{width:54px;height:54px;flex:0 0 auto;border-radius:15px;overflow:hidden;padding:2px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(139,92,255,.34),rgba(255,77,184,.16));box-shadow:0 10px 24px -18px rgba(0,0,0,.75)}
.tb-profile img{width:100%;height:100%;border-radius:12px;object-fit:cover;object-position:center;display:block;background:#101620;transform:scale(1.08);transform-origin:center}
@media (max-width:1079px){
  .tb-chat{display:none}
  .topbar{gap:7px}
  .tb-balance{flex:1 1 auto;min-width:128px}
}
/* small phones: scale the bar down so nothing overflows */
@media (max-width:430px){
  .tb-home{width:46px;height:50px;justify-content:start}.tb-home .lb-logo-button{width:46px;height:46px;min-width:46px;min-height:46px}
  .tb-icon,.tb-profile{width:50px;height:50px}.tb-icon svg{width:25px;height:25px}
  .tb-icon .tb-nav-img{width:29px;height:29px}
  .tb-balance{height:50px;min-width:132px;gap:7px;padding:0 11px 0 9px}.tb-balance .bal-chip{width:30px;height:30px}.bal-amt{font-size:19px}.bal-caret{width:18px;height:18px}
  .topbar{gap:7px;padding-left:5px;padding-right:8px}
}
/* rank icons never squish (coins vs wide crests) */
img[src*="ranks/"]{object-fit:contain}

.balance-pop{position:fixed;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + 8px);left:50%;
  transform:translateX(-50%) translateY(-8px) scale(.96);transform-origin:top;
  width:min(360px,calc(100vw - 24px));z-index:125;display:grid;gap:8px;padding:10px;border-radius:var(--r-lg);
  background:var(--glass-2);border:1px solid var(--line-2);box-shadow:var(--sh);backdrop-filter:blur(20px);
  opacity:0;pointer-events:none;transition:.2s}
.balance-pop.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.bp-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:left;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.bp-row:hover,.bp-row.active{background:rgba(139,92,255,.065);border-color:rgba(139,92,255,.32)}
.bp-row:hover b,.bp-row.active b{color:var(--purple-2)}
.balance-pop .bp-row:hover > span:nth-child(2) b,
.balance-pop .bp-row.active > span:nth-child(2) b,
.balance-pop .bp-row:hover .bp-amt,
.balance-pop .bp-row.active .bp-amt{color:var(--purple-2)!important;-webkit-text-fill-color:var(--purple-2)!important}
.bp-row small{display:block;color:var(--faint);font-size:10px;font-weight:700;transition:color .16s}
.bp-row:hover small,.bp-row.active small{color:rgba(190,171,255,.78)}
.bp-row b{font-family:var(--f-disp);transition:color .16s}
.bp-amt{font-family:var(--f-disp);font-size:16px}

/* ---------- bottom nav ---------- */
.botnav{position:fixed;bottom:0;left:0;right:0;z-index:90;height:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px));
  padding:5px 12px calc(5px + env(safe-area-inset-bottom,0px));max-width:none;margin-inline:0;border-radius:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  background:rgba(13,16,22,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.botnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:var(--r);
  color:var(--faint);position:relative;transition:color .2s;font-family:var(--f-disp);font-weight:600;font-size:9.5px}
.botnav .bn-ico{display:grid;place-items:center;width:26px;height:26px}
.botnav .bn-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.botnav .bn-ico img{width:25px;height:25px;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.botnav button.is-active{color:var(--ink)}
.botnav button.is-active::before{content:"";position:absolute;top:3px;width:24px;height:3px;border-radius:var(--r-pill);background:var(--purple-2)}
.botnav .bn-center{margin-top:-16px}
.botnav .bn-center .bn-ico{width:54px;height:54px;border-radius:50%;background:var(--grad-cta);box-shadow:var(--sh);color:#fff}
.botnav .bn-center .bn-ico svg{width:26px;height:26px;fill:#fff;stroke:none}
.botnav .bn-center.is-active::before{display:none}
.botnav button:active{transform:scale(.9)}

/* ---------- stage / screens ---------- */
.stage{max-width:var(--maxw);margin-inline:auto;padding:3px 10px 8px}
.screen{display:none}
.screen.is-active{display:block;animation:screenIn .42s cubic-bezier(.2,.8,.3,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.stagger>*{opacity:0;animation:upIn .5s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes upIn{to{opacity:1;transform:none}}
.stagger>*{transform:translateY(16px)}

/* ---------- shared bits ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-disp);font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--pink-2)}
.h-title{font-family:var(--f-disp);font-weight:700;font-size:clamp(24px,6.4vw,34px);margin:4px 0 0;letter-spacing:.2px;line-height:1}
.sect-head{display:flex;align-items:center;justify-content:space-between;margin:14px 4px 11px}
.sect-head h2{font-family:var(--f-disp);font-weight:700;font-size:19px;margin:0;display:flex;align-items:center;gap:8px}
.link{color:var(--pink-2);font-weight:700;font-size:13px;font-family:var(--f-disp)}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh),var(--edge)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(52,211,153,.18);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.5;transform:scale(.8)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r);
  font-family:var(--f-disp);font-weight:700;font-size:15px;color:#fff;background:var(--grad-cta);
  box-shadow:var(--sh-sm);transition:transform .14s,background .2s,box-shadow .2s}
.btn:hover{background:#9d6bff}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-gold{background:var(--grad-gold);color:#2a1c02;box-shadow:var(--sh-sm)}
.btn-gold:hover{background:var(--gold-2)}
.btn-ghost{background:var(--surface-3);border:1px solid var(--line-2);box-shadow:none;color:var(--ink)}
.btn-ghost:hover{background:var(--surface-hi)}
.btn-cyber{background:var(--grad-cyber);color:#04222b}
.btn-cyber:hover{filter:brightness(1.08)}
.btn-block{width:100%}
.btn-sm{height:40px;font-size:13px;padding:0 14px;border-radius:var(--r-sm)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* =====================================================================
   LOBBY
   ===================================================================== */
.hero{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:15px 16px 16px;margin-top:4px;
  background:var(--hero-grad);border:1px solid var(--line-2);box-shadow:var(--sh)}
.hero .eyebrow,.hero h1,.hero p,.hero-cta{position:relative;z-index:1}
.hero .eyebrow{color:var(--purple-2)}
.hero h1{font-family:var(--f-disp);font-weight:700;font-size:clamp(20px,5.6vw,28px);margin:0 0 4px;line-height:1.04}
.hero p{margin:0 0 13px;color:var(--muted);max-width:42ch;font-size:13px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-cta .btn{flex:1;min-width:120px}
.hero-coins{position:absolute;right:-6px;bottom:-10px;width:92px;height:92px;opacity:.55;pointer-events:none;z-index:0;
  background:var(--lucky-chip) center/contain no-repeat}

/* promo hero — code-built brand hero + promo side cards */
.promo-hero{display:grid;grid-template-columns:1fr;gap:10px}
.lb-hero{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line-2);box-shadow:var(--sh);
  display:flex;align-items:center;min-height:224px;
  background:#111927 url('../assets/lb-brand-current/lb-logo-mark.png') right 28px center/250px auto no-repeat}
.hero-copy{position:relative;z-index:2;padding:22px 26px;max-width:58%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-disp);font-weight:700;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:#e6ccff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);padding:5px 11px;border-radius:99px;margin-bottom:12px}
.hero-h1{font-family:var(--f-body);font-weight:900;font-size:clamp(21px,2.4vw,37px);line-height:1.05;
  letter-spacing:.2px;color:#fff;margin:0 0 10px;text-wrap:balance}
.hero-h1 .hero-accent{color:#ff78d2}
.hero-sub{font-size:clamp(12.5px,.95vw,14.5px);line-height:1.5;color:#cfbcec;font-weight:600;margin:0 0 16px;max-width:44ch}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
.hero-fan{position:absolute;right:0;top:0;bottom:0;width:46%;z-index:1;pointer-events:none}
.hf-card{position:absolute;width:33%;aspect-ratio:3/4;border-radius:13px;overflow:hidden;padding:0;margin:0;cursor:pointer;
  pointer-events:auto;border:1px solid rgba(255,255,255,.17);background:#12081f;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.92),0 0 26px -8px rgba(226,49,143,.4);
  transition:border-color .2s;animation:hfFloat 5s ease-in-out infinite alternate}
.hf-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.hf-card:hover{border-color:rgba(255,255,255,.45);scale:1.04}
.hf-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hf-1{left:0;top:18%;transform:rotate(-9deg);animation-delay:-1.2s}
.hf-2{left:31%;top:8%;transform:rotate(1.5deg);z-index:2;animation-duration:4.4s}
.hf-3{left:62%;top:22%;transform:rotate(9deg);animation-delay:-2.6s;animation-duration:5.6s}
@keyframes hfFloat{from{translate:0 -5px}to{translate:0 7px}}
@media (prefers-reduced-motion:reduce){.hf-card{animation:none}.hero-eyebrow i{animation:none}}
@media (max-width:679px){
  .hero-copy{max-width:66%;padding:18px 18px}
  .hero-sub{display:none}
  .lb-hero{min-height:172px;background-size:190px auto;background-position:calc(100% + 54px) center}
  .hero-fan{width:42%;right:-10px}
}
.ph-side{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ph-card{position:relative;display:block;border:1px solid var(--line-2);margin:0;padding:0;background:none;cursor:pointer;
  border-radius:var(--r);overflow:hidden;aspect-ratio:1000/438;box-shadow:var(--sh)}
.ph-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .3s ease,filter .3s ease}
.ph-card:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media(hover:hover){
  .ph-card:hover img{transform:scale(1.03);filter:brightness(1.07)}
}
@media (prefers-reduced-motion:reduce){.ph-card img{transition:none}}
/* desktop: featured hero + two stacked side-card columns sharing its height */
@media (min-width:920px){
  .promo-hero{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
  .ph-side{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:12px}
  .ph-card{aspect-ratio:auto;height:100%;min-height:0}
}

/* live bets */
.live{margin-top:18px;overflow:hidden}
.live-feed{display:grid;gap:8px;padding:10px}
.lb-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:9px 12px;border-radius:14px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);
  box-shadow:inset 3px 0 0 var(--accent,rgba(255,255,255,.2))}
.lb-row.new{animation:rowIn .5s cubic-bezier(.2,1.2,.4,1)}
@keyframes rowIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.lb-user{display:flex;align-items:center;gap:9px;min-width:0}
.lb-ava{width:34px;height:34px;border-radius:11px;flex:0 0 auto;object-fit:cover;border:1.5px solid var(--line-2);background:#0c0418}
.lb-uname{font-family:var(--f-disp);font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-rankmini{width:16px;height:16px;vertical-align:-3px;margin-right:3px}
.lb-game{display:flex;align-items:center;gap:8px;min-width:0}
.lb-gico{width:30px;height:30px;border-radius:9px;flex:0 0 auto;object-fit:contain;padding:3px;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 40%,#160722),#0c0418);border:1px solid var(--line)}
.lb-gname{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap}
.lb-nums{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.lb-bet{font-size:11px;color:var(--faint);font-weight:700}
.lb-mult{font-family:var(--f-disp);font-weight:600;font-size:13px}
.lb-pay{font-family:var(--f-disp);font-weight:700;font-size:14px}
.lb-pay.win{color:var(--green)}.lb-pay.lose{color:var(--faint)}

/* lobby category rows (Shuffle-style horizontal shelves) */
#lobbyRows{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.game-row-sect{margin-top:8px}
.row-head{display:flex;align-items:center;gap:10px}
.row-head h2{flex:0 1 auto}
.row-viewall{margin-left:auto;font-family:var(--f-disp);font-weight:700;font-size:12.5px;color:var(--purple-2,#a78bfa);
  background:none;border:0;cursor:pointer;padding:6px 2px;letter-spacing:.02em}
.row-viewall:hover{text-decoration:underline;text-underline-offset:3px}
.row-head .row-nav{display:flex;gap:6px;margin-left:0}
.row-head .row-viewall+.row-nav{margin-left:0}
.row-head:not(:has(.row-viewall)) .row-nav{margin-left:auto}
.rn-btn{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;cursor:pointer;
  background:var(--surface-hi);border:1px solid var(--line);color:#cfc6e6;transition:background .15s,color .15s}
.rn-btn svg{width:16px;height:16px}
.rn-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.game-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2.6*9px)/3.6);gap:9px;
  overflow-x:auto;scroll-snap-type:x proximity;padding:4px 0 10px;scrollbar-width:none;overflow-anchor:none}
.game-row::-webkit-scrollbar{display:none}
.game-row .gcard{scroll-snap-align:start;animation:none}
@media(min-width:680px){.game-row{grid-auto-columns:calc((100% - 3.5*11px)/4.5);gap:11px}}
@media(min-width:920px){.game-row{grid-auto-columns:calc((100% - 5.5*13px)/6.5);gap:13px}}
@media(min-width:1440px){.game-row{grid-auto-columns:calc((100% - 6.5*14px)/7.5);gap:14px}}
/* ghost placeholder cards — future games; owner swaps these for real ones */
.gcard.ghost{cursor:default;border-style:dashed;opacity:.82;
  background:color-mix(in srgb,hsl(var(--ph) 56% 18%) 55%,#0d1119)}
.ghost-mark{position:absolute;inset:0;display:grid;place-items:center;z-index:1;opacity:.13}
.ghost-mark img{width:44%;max-width:88px;filter:saturate(.35) brightness(1.55)}
.gcard.ghost .scrim{background:linear-gradient(180deg,transparent 42%,rgba(7,9,14,.92) 100%)}
.gcard.ghost .gtitle{opacity:.84;text-shadow:0 8px 18px rgba(0,0,0,.86),0 0 14px rgba(255,255,255,.08)}
@media(hover:hover){.gcard.ghost:hover{transform:none;border-color:rgba(255,255,255,.26);
  box-shadow:0 14px 28px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.035) inset}}
.gcard.ghost:active{transform:none}

/* game grid + cards (per-game accent) */
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:4px}
.gcard{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;display:block;container-type:inline-size;isolation:isolate;
  background:#080b12;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 18px 36px -28px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.035) inset;
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .22s,filter .22s}
.gcard::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 -46px 72px -58px color-mix(in srgb,var(--accent) 72%,transparent)}
.gcard img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .32s cubic-bezier(.22,1,.36,1),filter .24s}
.gcard .scrim{position:absolute;inset:auto 0 0 0;height:62%;z-index:2;
  background:linear-gradient(180deg,transparent 0%,rgba(4,5,10,.24) 34%,rgba(4,5,10,.74) 72%,rgba(4,5,10,.98) 100%)}
.gcard .gtitle{position:absolute;left:10px;right:10px;bottom:13px;z-index:3;display:flex;align-items:flex-end;justify-content:center;text-align:center;gap:.16em;
  color:#fff;font-family:var(--f-game-bold);font-weight:400;font-size:clamp(18px,12.5cqw,26px);line-height:.92;letter-spacing:0;text-transform:none;
  overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance;
  text-shadow:0 7px 15px rgba(0,0,0,.9),0 0 15px color-mix(in srgb,var(--accent) 34%,transparent);
  transition:transform .22s cubic-bezier(.22,1,.36,1),color .2s,text-shadow .2s,letter-spacing .2s}
.gcard .gtitle .title-word{display:inline-block}
.gcard .gtitle::after{content:"";position:absolute;left:50%;bottom:-8px;width:38%;height:2px;border-radius:3px;
  background:color-mix(in srgb,var(--accent) 82%,#fff 18%);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);
  opacity:.82;transform:translateX(-50%);transition:width .22s cubic-bezier(.22,1,.36,1),opacity .2s,transform .22s cubic-bezier(.22,1,.36,1)}
.gcard .gtitle.vibe-playful{font-family:var(--f-game-bold);font-weight:400;text-shadow:0 7px 15px rgba(0,0,0,.86),0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}
.gcard .gtitle.vibe-impact{font-family:var(--f-impact);font-weight:400;font-size:clamp(16px,10.8cqw,23px);letter-spacing:.02em;text-shadow:0 8px 16px rgba(0,0,0,.9),0 0 19px color-mix(in srgb,var(--accent) 48%,transparent)}
.gcard .gtitle.vibe-clean{font-family:var(--f-game-tech);font-weight:900;letter-spacing:.025em;text-shadow:0 7px 15px rgba(0,0,0,.88),0 0 13px color-mix(in srgb,var(--accent) 26%,transparent)}
.gcard .gtitle.title-blitz{font-family:var(--f-game-tech);font-weight:900;text-transform:uppercase;font-size:clamp(18px,12.3cqw,25px);letter-spacing:.045em}
.gcard .title-limbo,.gcard .title-crash,.gcard .title-punk-rocker,.gcard .title-slide,.gcard .title-darts,.gcard .title-coinflip{font-family:var(--f-impact);font-weight:400}
.gcard .title-mines,.gcard .title-diamonds,.gcard .title-roulette,.gcard .title-keno,.gcard .title-hilo,.gcard .title-blackjack,.gcard .title-baccarat,.gcard .title-video-poker{font-family:var(--f-game-tech);font-weight:900}
.gcard .title-plinko,.gcard .title-chicken-road,.gcard .title-lucky-packs,.gcard .title-lucky-tower,.gcard .title-snakes,.gcard .title-wheel{font-family:var(--f-game-bold);font-weight:400}
.gcard .title-advanced-dice,.gcard .title-chicken-road,.gcard .title-lucky-packs,.gcard .title-video-poker{font-size:clamp(15px,10.2cqw,22px);line-height:.96}
.gcard .title-blackjack,.gcard .title-baccarat,.gcard .title-roulette{font-size:clamp(17px,11.4cqw,23px)}
.gcard:active{transform:scale(.97)}
@media(hover:hover){.gcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.22));box-shadow:0 28px 48px -30px rgba(0,0,0,.95),0 0 0 1px color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08)) inset}.gcard:hover img.cover{transform:scale(1.045);filter:saturate(1.12) brightness(1.05) contrast(1.04)}.gcard:hover .gtitle{transform:translateY(-4px) scale(1.035);color:#fff;text-shadow:0 10px 17px rgba(0,0,0,.9),0 0 23px color-mix(in srgb,var(--accent) 58%,transparent)}.gcard:hover .gtitle::after{width:54%;opacity:1;transform:translateX(-50%) translateY(-1px)}}
.gcard.is-locked,.game-more-card.is-locked{opacity:.56;filter:grayscale(.78);cursor:not-allowed}
.gcard.is-locked .cover,.game-more-card.is-locked img{filter:grayscale(.82) brightness(.64)}
.gcard .tag{position:absolute;top:10px;right:10px;z-index:3;font-family:var(--f-disp);font-weight:700;font-size:9px;letter-spacing:.1em;
  padding:4px 9px;border-radius:99px;color:#07020d;background:var(--grad-gold);box-shadow:var(--edge)}
.gcard .tag.hot{background:var(--grad-cta);color:#fff}

/* embedded BetOrigami game page */
.game-screen{display:grid;gap:18px;padding-top:10px}
.game-viewer-card{position:relative;overflow:hidden;border-radius:var(--r-lg);background:#0d0d0e;border:1px solid rgba(255,255,255,.07);box-shadow:var(--sh),var(--edge)}
.game-frame{display:block;width:100%;height:min(766px,calc(100dvh - var(--topbar-h) - var(--botnav-h) - 34px));min-height:690px;border:0;background:#060606}
.game-load-cover{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;color:#fff;background:#000;transition:opacity .32s ease,visibility .32s ease;pointer-events:auto}
.game-viewer-card.is-loaded .game-load-cover{opacity:0;visibility:hidden;pointer-events:none}
.loading-video-frame{position:relative;display:block;overflow:hidden;background:#000;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}
.loading-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 43%;transform:scale(1.08);background:#000}
.loading-video-fallback{position:absolute;inset:19%;width:62%;height:62%;object-fit:contain;object-position:center;display:none}
.game-loading-mark{width:148px;height:148px;border-radius:30px}
.game-info-card{overflow:hidden;border-radius:var(--r-lg);background:#0d0d0e;border:1px solid rgba(255,255,255,.07);box-shadow:var(--sh)}
.game-info-title{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 16px;border-bottom:1px solid var(--line)}
.game-info-title h2{margin:0;font-family:var(--f-disp);font-size:23px;font-weight:800;line-height:1}
.game-info-title span{display:block;margin-top:5px;color:var(--muted);font-size:12px;font-weight:800}
.game-info-actions{display:flex;align-items:center;gap:8px;min-width:0}
.game-win-summary{display:flex;align-items:center;min-width:0;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#080b10}
.game-summary-pill{display:flex;align-items:center;gap:7px;min-height:40px;padding:0 10px;background:var(--surface-3);font-family:var(--f-disp);font-weight:800;white-space:nowrap}
.game-summary-pill .chip-i{width:18px;height:18px}
.game-summary-trophy{color:var(--gold);font-size:12px}
.game-summary-user{max-width:110px;margin:0!important;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff!important;font-size:12px!important}
.game-summary-muted{padding:0 12px;color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}
.game-info-toggle{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--surface-3);border:1px solid var(--line);color:#fff}
.game-info-toggle svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.game-info-toggle.is-open svg{transform:rotate(180deg)}
.game-info-body{padding:14px 14px 16px}
.game-info-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.game-tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface-3);min-width:0;overflow:auto}
.game-tabs button{height:36px;padding:0 13px;border-radius:9px;color:var(--muted);font-weight:800;white-space:nowrap}
.game-tabs button.on{background:#3a4152;color:#fff}
.game-period-wrap{position:relative;flex:0 0 auto}
.game-period{height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:142px;padding:0 12px;border-radius:11px;background:var(--surface-3);border:1px solid var(--line);font-weight:800;color:#fff;white-space:nowrap}
.game-period svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.game-period-wrap.open .game-period svg{transform:rotate(180deg)}
.game-period-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:none;min-width:164px;padding:6px;border-radius:12px;background:#111720;border:1px solid var(--line-2);box-shadow:var(--sh-lg)}
.game-period-wrap.open .game-period-menu{display:grid;gap:4px}
.game-period-menu button{height:38px;padding:0 12px;border-radius:9px;text-align:left;color:var(--muted);font-weight:800}
.game-period-menu button.on,.game-period-menu button:hover{background:rgba(139,92,246,.14);color:#9b6bff}
.game-lb-table{display:grid;border-top:1px solid var(--line)}
.game-lb-head,.game-lb-row{display:grid;grid-template-columns:74px minmax(130px,1fr) minmax(92px,.75fr) minmax(112px,.85fr) minmax(108px,.75fr) minmax(112px,.9fr);align-items:center;gap:10px}
.game-lb-head{min-height:50px;color:var(--faint);font-size:11px;font-weight:800}
.game-lb-row{min-height:58px;border-top:1px solid var(--line);font-weight:800}
.game-lb-row:nth-child(odd){background:rgba(255,255,255,.025)}
.game-user{display:flex;align-items:center;gap:10px;min-width:0}
.game-user-badge{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075)}
.game-user-badge img{width:23px;height:23px;border-radius:0;object-fit:contain;background:transparent;filter:drop-shadow(0 2px 4px rgba(0,0,0,.42))}
.game-user{cursor:pointer}
.game-user b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-rank b{font-family:var(--f-disp);color:var(--gold)}
.game-lb-row.place-1 .game-rank b{color:#ffc83d}
.game-lb-row.place-2 .game-rank b{color:#cfd6e6}
.game-lb-row.place-3 .game-rank b{color:#cd8b4a}
.game-date{color:var(--muted)}
.game-bet,.game-payout{display:flex;align-items:center;gap:7px;color:#fff}
.game-payout{color:var(--success)}
.game-lb-empty{min-height:120px;display:grid;place-items:center;text-align:center;border-top:1px solid var(--line);color:var(--muted);font-weight:800}
.game-desc{border-top:1px solid var(--line);padding-top:16px;color:rgba(244,246,251,.78);line-height:1.62}
.game-desc p{margin:0 0 14px}
.game-desc-lead{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:start}
.game-desc-lead img{width:92px;border-radius:10px;border:1px solid var(--line-2)}
.game-desc-meta{margin:0 0 6px!important;color:var(--muted);font-size:12px;font-weight:800}
.game-desc h3{margin:18px 0 10px;font-family:var(--f-disp);font-size:16px}
.game-facts{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.game-facts div{display:grid;grid-template-columns:minmax(110px,.5fr) minmax(0,1fr);gap:12px;padding:12px;background:rgba(255,255,255,.025);border-top:1px solid var(--line)}
.game-facts div:first-child{border-top:0}
.game-facts span{color:var(--muted);font-weight:800}
.game-facts b{font-weight:800}
.game-more{min-width:0}
.game-more-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,34%);gap:12px;overflow-x:auto;overscroll-behavior-inline:contain;padding:14px 2px 18px;scroll-snap-type:x proximity}
.game-more-card{position:relative;display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:#080b12;scroll-snap-align:start;box-shadow:0 18px 36px -28px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.035) inset;transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .22s;container-type:inline-size;isolation:isolate}
.game-more-card::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 -42px 70px -56px color-mix(in srgb,var(--accent) 70%,transparent)}
.game-more-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .32s cubic-bezier(.22,1,.36,1),filter .24s}
.game-more-card::before{content:"";position:absolute;inset:auto 0 0;height:62%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(4,5,10,.24) 34%,rgba(4,5,10,.74) 72%,rgba(4,5,10,.98) 100%)}
.game-more-card .gtitle{position:absolute;left:10px;right:10px;bottom:13px;z-index:3;display:flex;align-items:flex-end;justify-content:center;text-align:center;gap:.16em;color:#fff;font-family:var(--f-game-bold);font-weight:400;font-size:clamp(17px,11.8cqw,24px);line-height:.92;letter-spacing:0;text-transform:none;text-wrap:balance;text-shadow:0 8px 16px rgba(0,0,0,.9),0 0 15px color-mix(in srgb,var(--accent) 34%,transparent);transition:transform .22s cubic-bezier(.22,1,.36,1),color .2s,text-shadow .2s}
.game-more-card .gtitle .title-word{display:inline-block}
.game-more-card .gtitle::after{content:"";position:absolute;left:50%;bottom:-8px;width:38%;height:2px;border-radius:3px;background:color-mix(in srgb,var(--accent) 82%,#fff 18%);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);opacity:.82;transform:translateX(-50%);transition:width .22s cubic-bezier(.22,1,.36,1),opacity .2s,transform .22s cubic-bezier(.22,1,.36,1)}
.game-more-card .gtitle.title-blitz{font-family:var(--f-game-tech);font-weight:900;text-transform:uppercase;letter-spacing:.045em}.game-more-card .title-limbo,.game-more-card .title-crash,.game-more-card .title-punk-rocker,.game-more-card .title-slide,.game-more-card .title-darts,.game-more-card .title-coinflip{font-family:var(--f-impact);font-weight:400}.game-more-card .title-mines,.game-more-card .title-diamonds,.game-more-card .title-roulette,.game-more-card .title-keno,.game-more-card .title-hilo,.game-more-card .title-blackjack,.game-more-card .title-baccarat,.game-more-card .title-video-poker{font-family:var(--f-game-tech);font-weight:900}.game-more-card .title-plinko,.game-more-card .title-chicken-road,.game-more-card .title-lucky-packs,.game-more-card .title-lucky-tower,.game-more-card .title-snakes,.game-more-card .title-wheel{font-family:var(--f-game-bold);font-weight:400}.game-more-card .title-advanced-dice,.game-more-card .title-chicken-road,.game-more-card .title-lucky-packs,.game-more-card .title-video-poker{font-size:clamp(15px,10.5cqw,21px);line-height:.96}
@media(hover:hover){.game-more-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.22));box-shadow:0 28px 48px -30px rgba(0,0,0,.95),0 0 0 1px color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08)) inset}.game-more-card:hover img{transform:scale(1.045);filter:saturate(1.12) brightness(1.05) contrast(1.04)}.game-more-card:hover .gtitle{transform:translateY(-4px) scale(1.035);text-shadow:0 10px 17px rgba(0,0,0,.9),0 0 23px color-mix(in srgb,var(--accent) 58%,transparent)}.game-more-card:hover .gtitle::after{width:54%;opacity:1;transform:translateX(-50%) translateY(-1px)}}
.game-locked-card{display:grid;place-items:center;text-align:center;gap:12px;min-height:360px;padding:34px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh),var(--edge)}
.game-locked-ic{width:54px;height:54px;display:grid;place-items:center;border-radius:var(--r);background:rgba(139,92,255,.08);color:var(--purple-2);border:1px solid rgba(139,92,255,.22)}
.game-locked-card h2{margin:0;font-family:var(--f-disp)}
.game-locked-card p{margin:0;max-width:420px;color:var(--muted);line-height:1.45}
@media (max-width:430px){
  .game-screen{padding-left:7px;padding-right:7px}
  .game-viewer-card,.game-info-card{border-radius:12px}
  .game-frame{height:min(748px,calc(100dvh - var(--topbar-h) - var(--botnav-h) - 24px));min-height:690px}
  .game-info-title{padding:16px 14px}
  .game-info-title h2{font-size:22px}
  .game-win-summary{display:none}
  .game-info-controls{align-items:stretch;flex-direction:column}
  .game-tabs{width:100%;justify-content:space-between}
  .game-tabs button{flex:1;padding:0 8px}
  .game-period-wrap{width:100%}
  .game-period{width:100%;justify-content:space-between}
  .game-period-menu{left:0;right:0}
  .game-lb-head,.game-lb-row{grid-template-columns:76px minmax(0,1fr) minmax(108px,.9fr);gap:8px}
  .game-lb-head span:nth-child(3),.game-lb-head span:nth-child(4),.game-lb-head span:nth-child(6),
  .game-date,.game-bet,.game-payout{display:none}
  .game-desc-lead{grid-template-columns:72px minmax(0,1fr)}
  .game-desc-lead img{width:72px}
  .game-facts div{grid-template-columns:1fr;gap:4px}
  .game-more-row{grid-auto-columns:minmax(120px,34%)}
}

.searchbar{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:var(--r);margin:6px 0 2px;
  background:var(--surface-3);border:1px solid var(--line);overflow-anchor:none}
.searchbar:focus-within{border-color:var(--line-2)}
.searchbar svg{width:20px;height:20px;fill:none;stroke:var(--faint);stroke-width:2}
.searchbar input{flex:1;background:none;border:0;outline:0;color:#fff;font-family:var(--f-body);font-weight:600;font-size:15px}
.searchbar input::placeholder{color:var(--faint)}
.game-search-empty{grid-column:1/-1;padding:18px 14px;border-radius:var(--r);text-align:center;font-family:var(--f-disp);font-weight:700;
  color:var(--muted);background:var(--surface);border:1px solid var(--line)}
.chips-row{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;margin:0 -2px;overflow-anchor:none}
/* games toolbar: search + filter chips share one row on desktop */
.games-toolbar{display:flex;flex-direction:column;gap:2px}
@media(min-width:920px){
  .games-toolbar{flex-direction:row;align-items:center;gap:12px}
  .games-toolbar .searchbar{flex:0 1 340px;margin:0}
  .games-toolbar .chips-row{flex:1;min-width:0;padding:0;margin:0}
}
.fchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:var(--r-sm);font-family:var(--f-disp);font-weight:600;font-size:13px;
  background:var(--surface-3);border:1px solid var(--line);color:var(--muted);transition:background .2s,color .2s}
.fchip:hover{background:var(--surface-hi);color:var(--ink)}
.fchip.on{background:var(--grad-cta);color:#fff;border-color:transparent}
.fchip-img{width:17px;height:17px;object-fit:contain;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));margin-right:2px}

/* =====================================================================
   CHAT
   ===================================================================== */
/* chat fills the viewport between top bar and bottom nav (no wasted space) */
.chat-screen{position:fixed;left:0;right:0;z-index:40;max-width:var(--maxw);margin-inline:auto;
  top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));
  bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;padding:0 14px 8px;background:var(--bg)}
body[data-screen="chat"] .intercom-lightweight-app-launcher,
body[data-screen="chat"] .intercom-launcher,
body.lb-chat-docked .intercom-lightweight-app-launcher,
body.lb-chat-docked .intercom-launcher,
body.lb-panel-open .intercom-lightweight-app-launcher,
body.lb-panel-open .intercom-launcher{display:none!important;visibility:hidden!important;pointer-events:none!important}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 2px 11px;flex:0 0 auto}
.chat-head h2{font-family:var(--f-disp);font-weight:700;font-size:20px;margin:0;line-height:1}
.chat-head .chat-online{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.chat-head .chat-online b{color:var(--ink);font-variant-numeric:tabular-nums}
.chat-rules-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:12.5px}
.chat-rules-btn:hover{background:var(--surface-hi);color:var(--ink)}
.chat-rules-btn .bi svg{width:15px;height:15px}
.chat-close-btn{display:none;width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:18px;font-weight:900;line-height:1}
.chat-close-btn:hover{background:var(--surface-hi);color:#fff}
.chat-rain{position:relative;isolation:isolate;overflow:hidden;flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) 106px;gap:8px;margin:0 0 10px;padding:7px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.chat-rain::before{content:"";position:absolute;inset:-90px 0 auto 0;height:calc(100% + 170px);z-index:0;opacity:0;pointer-events:none;background:
  var(--lucky-chip) 8% 0/15px 15px no-repeat,
  var(--lucky-chip) 26% 34px/12px 12px no-repeat,
  var(--lucky-chip) 46% 10px/14px 14px no-repeat,
  var(--lucky-chip) 67% 44px/11px 11px no-repeat,
  var(--lucky-chip) 88% 18px/13px 13px no-repeat,
  var(--lucky-chip) 16% 86px/13px 13px no-repeat,
  var(--lucky-chip) 38% 114px/15px 15px no-repeat,
  var(--lucky-chip) 58% 92px/12px 12px no-repeat,
  var(--lucky-chip) 79% 126px/14px 14px no-repeat;
  transform:translateY(-96px);filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.chat-rain.join-open{border-color:rgba(139,92,246,.36);box-shadow:0 14px 34px rgba(0,0,0,.22),0 0 0 1px rgba(139,92,246,.1) inset}
.chat-rain.join-open::before{opacity:.24;animation:rainChips 2.15s linear infinite}
.rain-main{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:54px;padding:7px 10px;border-radius:11px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045)}
.rain-main,.rain-actions{position:relative;z-index:1}
.rain-cloud{width:50px;height:50px;border-radius:9px;display:block;object-fit:contain;opacity:.96;filter:drop-shadow(0 0 7px rgba(139,92,246,.2))}
.rain-main b{display:block;font-family:var(--f-disp);font-size:12.5px;color:var(--ink);line-height:1}
.rain-main small{display:block;margin-top:4px;color:var(--muted);font-size:10.5px;font-weight:800}
.rain-main strong{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-size:15px;color:#fff;white-space:nowrap}
.rain-main strong .chip-i{width:18px;height:18px}
.rain-actions{display:grid;grid-template-columns:1fr;align-self:stretch;min-width:106px}
.rain-join,.rain-tip{height:100%;min-height:54px;border-radius:11px;font-family:var(--f-disp);font-size:12px;font-weight:800;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.rain-join{background:rgba(139,92,255,.07);border-color:rgba(139,92,255,.28);color:var(--purple-2)}
.rain-join.joined{background:rgba(52,211,153,.18);color:var(--success)}
.rain-join:disabled{background:var(--surface-2);border-color:var(--line);color:var(--muted);opacity:1;filter:none}
.rain-tip{background:transparent;color:var(--muted)}
.rain-tip:hover,.rain-join:not(:disabled):hover{background:rgba(139,92,255,.055);border-color:rgba(139,92,255,.28);color:var(--purple-2)}
@keyframes rainChips{0%{transform:translateY(-98px)}100%{transform:translateY(126px)}}
@media (prefers-reduced-motion:reduce){
  .chat-rain.join-open::before{animation:none;opacity:.16;transform:translateY(0)}
}
.chat-feed{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px 10px;overscroll-behavior:contain}
.msg{display:flex;gap:9px;align-items:flex-start;max-width:100%;animation:upIn .3s ease}
.msg.rain-msg{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;width:100%;padding:8px 11px;border-radius:13px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.rain-msg-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(139,92,246,.1);border:1px solid rgba(255,255,255,.055)}
.rain-msg-icon img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.rain-msg-body{min-width:0;font-size:13.5px;font-weight:700;line-height:1.42;color:rgba(255,255,255,.92)}
.rain-msg-body b{display:block;font-family:var(--f-disp);font-size:13.5px;color:var(--muted);margin-bottom:2px}
.rain-msg-body span{word-break:break-word}
.rain-msg-amt{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-disp);color:var(--success);white-space:nowrap;vertical-align:-3px}
.rain-msg-amt .chip-i{width:18px;height:18px}
.rain-msg-mark{display:grid;place-items:center;align-self:start;opacity:.9}
.rain-msg-mark img{width:27px;height:27px;object-fit:contain}
/* body flows rank + name + text inline, clamped to 3 lines (no bubble) */
.msg-body{min-width:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13.5px;font-weight:600;line-height:1.42;color:rgba(255,255,255,.9);word-break:break-word}
.msg-name{font-family:var(--f-disp);font-weight:700;font-size:13.5px;color:var(--muted);cursor:pointer;margin-right:5px}
.msg-name:hover{text-decoration:underline}
.msg-name.you{color:var(--muted)}
.msg.tip .msg-text{color:rgba(255,255,255,.92)}
.msg.tip .msg-text b{color:#fff}
.tip-amt{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-disp);font-weight:700;color:#fff;vertical-align:-3px}
.chat-compose{flex:0 0 auto;padding-top:8px}
.chat-inbar{display:flex;align-items:center;gap:5px;background:var(--surface-3);border:1px solid var(--line);border-radius:24px;padding:5px 6px 5px 10px;transition:border-color .15s}
.chat-inbar:focus-within{border-color:var(--line-2)}
.chat-ce{flex:1;min-width:0;min-height:38px;max-height:108px;overflow-y:auto;background:none;border:0;outline:0;color:#fff;font-family:var(--f-body);font-weight:600;font-size:15px;line-height:1.4;padding:8px 4px;word-break:break-word;white-space:pre-wrap}
.chat-ce:empty::before{content:attr(data-placeholder);color:var(--faint);pointer-events:none}
.chat-count{display:block;text-align:right;font-family:var(--f-disp);font-weight:700;font-size:10.5px;letter-spacing:.06em;
  color:var(--faint);padding:4px 10px 0}
.chat-count.over{color:var(--red,#f43f5e)}
.chat-ce .chat-emoji{vertical-align:-0.32em}
.chat-emoji-btn{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;color:var(--muted);transition:color .15s,background .15s}
.chat-emoji-btn:hover,.chat-emoji-btn[aria-expanded="true"]{color:var(--purple-2);background:rgba(255,255,255,.06)}
.chat-emoji-btn svg{width:23px;height:23px}
.chat-send-btn{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--grad-cta)}
.chat-send-btn svg{width:19px;height:19px;fill:#fff}
.chat-send-btn:active{transform:scale(.92)}
/* custom emoji rendered inline in messages */
.chat-emoji{display:inline-block;width:2.1em;height:2.1em;object-fit:contain;vertical-align:-0.58em;margin:0 2px}
/* public chat identity shows rank only; the profile photo stays inside the profile sheet */
.msg-rankwrap{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;cursor:pointer;border-radius:8px;background:none;border:0}
.msg-rankicon{width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
/* emoji picker panel */
.emoji-panel{flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin:8px 0 0;max-height:236px;overflow-y:auto;overscroll-behavior:contain}
.emoji-sec+.emoji-sec{margin-top:10px}
.emoji-sec-h{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin:0 2px 6px}
.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.emoji-item{height:42px;border-radius:10px;display:grid;place-items:center;font-size:24px;line-height:1;transition:background .12s,transform .08s}
.emoji-item:hover{background:rgba(255,255,255,.09)}
.emoji-item:active{transform:scale(.9)}
.emoji-item img{width:30px;height:30px;object-fit:contain}
.tip-box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.tip-box-head{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:700;font-size:14px;margin-bottom:11px}
.tip-input-row{display:flex;align-items:center;gap:9px;height:50px;padding:0 14px;border-radius:var(--r);background:var(--surface-3);border:1px solid var(--line);margin-bottom:11px}
.tip-input-row .chip-i{width:24px;height:24px;flex:0 0 auto}
.tip-input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-family:var(--f-disp);font-weight:700;font-size:20px;-moz-appearance:textfield}
.tip-input::-webkit-outer-spin-button,.tip-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tip-input::placeholder{color:var(--faint);font-weight:600;font-size:16px}
.tip-mode{display:flex;gap:8px;margin-bottom:12px;background:var(--surface-3);border-radius:var(--r-sm);padding:4px}
.tip-mode-btn{flex:1;height:36px;border-radius:6px;background:none;color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:13px}
.tip-mode-btn.on{background:var(--surface-hi);color:var(--ink)}
.tip-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.tip-presets button{height:34px;border-radius:10px;background:var(--surface-3);border:1px solid var(--line);color:var(--muted);font-family:var(--f-disp);font-size:12px;font-weight:800}
.tip-presets button:hover{background:var(--surface-hi);color:#fff}
.chat-rules{margin:8px 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.chat-rules li{color:var(--muted);font-size:13.5px;font-weight:600;line-height:1.4}
.inv-code-card{padding:14px}
.inv-code-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.inv-code-row small{display:block;color:var(--faint);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.inv-code{font-family:var(--f-disp);font-weight:700;font-size:20px;letter-spacing:.06em;color:var(--ink)}
.inv-code-row .btn{margin-left:auto}
.inv-link-row input{width:100%;height:42px;border-radius:var(--r-sm);background:var(--surface-3);border:1px solid var(--line);
  color:var(--muted);padding:0 12px;font-family:var(--f-body);font-weight:600;font-size:13px;outline:0}
.inv-actions{display:flex;gap:10px;margin-top:11px}
.inv-actions .btn{flex:1}
.inv-actions .bi svg{width:16px;height:16px}
.ref-list{display:flex;flex-direction:column;gap:9px}
.ref-row{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.ref-ava{width:38px;height:38px;border-radius:12px;object-fit:cover;border:1.5px solid var(--line-2);flex:0 0 auto}
.ref-meta{min-width:0;flex:1}
.ref-meta b{font-family:var(--f-disp);font-weight:700;font-size:14px;display:block}
.ref-meta small{color:var(--faint);font-size:11.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-status{flex:0 0 auto;font-family:var(--f-disp);font-weight:700;font-size:11px;padding:5px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--muted);background:var(--surface-3)}
.ref-status.st-verified{color:var(--cyan);border-color:rgba(36,217,255,.4)}
.ref-status.st-qualified{color:var(--purple-2);border-color:rgba(139,92,255,.45)}
.ref-status.st-pending{color:var(--warning);border-color:rgba(246,183,86,.42)}
.ref-status.st-rewarded{color:var(--success);border-color:rgba(52,211,153,.45)}
.ref-status.st-review{color:var(--error);border-color:rgba(255,93,115,.42)}

/* =====================================================================
   SUPPORT
   ===================================================================== */

/* =====================================================================
   MENU
   ===================================================================== */
.menu-prof{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r-lg)}
.menu-prof .ava{width:62px;height:62px;border-radius:18px;object-fit:cover;border:2px solid var(--line-2)}
.menu-prof .who b{font-family:var(--f-disp);font-weight:700;font-size:19px;display:flex;align-items:center;gap:7px}
.menu-prof .who .rb{width:20px;height:20px}
.menu-prof .who small{color:var(--muted);font-size:12px;font-weight:700}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}
.mitem{display:flex;align-items:center;gap:12px;padding:15px;border-radius:var(--r);text-align:left;background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge);transition:transform .14s,border-color .2s}
.mitem:active{transform:scale(.97)}
.mitem .mi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;font-size:20px;background:rgba(255,255,255,.05)}
.mitem b{font-family:var(--f-disp);font-weight:600;font-size:14px;display:block}
.mitem small{color:var(--faint);font-size:11px;font-weight:600}

/* =====================================================================
   WALLET
   ===================================================================== */
.wallet-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wcard{padding:18px;border-radius:var(--r-lg);position:relative;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--sh)}
.wcard.lucky{background:var(--surface-2);border-left:3px solid var(--pink)}
.wcard.fun{background:var(--surface-2);border-left:3px solid var(--cyan)}
.wcard .bal-chip{width:40px;height:40px}
.wcard small{display:block;color:rgba(255,255,255,.8);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:12px 0 2px}
.wcard b{font-family:var(--f-disp);font-weight:700;font-size:26px}
.seg{display:flex;gap:6px;padding:5px;border-radius:15px;background:rgba(255,255,255,.05);border:1px solid var(--line);margin:18px 0 14px}
.seg button{flex:1;height:40px;border-radius:11px;font-family:var(--f-disp);font-weight:600;font-size:14px;color:var(--muted)}
.seg button.on{background:var(--grad-cta);color:#fff;box-shadow:var(--sh-glow)}
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pkg{padding:16px;border-radius:var(--r);text-align:center;background:var(--glass);border:1px solid var(--line);position:relative;box-shadow:var(--edge);transition:transform .15s,border-color .2s}
.pkg.best{border-color:var(--gold);box-shadow:0 0 24px -8px var(--gold)}
.pkg.best::before{content:"BEST VALUE";position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-family:var(--f-disp);font-weight:700;font-size:9px;letter-spacing:.1em;padding:3px 10px;border-radius:99px;background:var(--grad-gold);color:#3a1d04}
.pkg:active{transform:scale(.97)}
.pkg .pchip{width:54px;height:54px;margin:0 auto 8px;background:var(--lucky-chip) center/contain no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.pkg .amt{font-family:var(--f-disp);font-weight:700;font-size:20px}
.pkg .bonus{color:var(--green);font-size:11px;font-weight:800}
.pkg .price{margin-top:10px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--grad-cta);font-family:var(--f-disp);font-weight:700;font-size:14px}
.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.pay{aspect-ratio:1;border-radius:14px;display:grid;place-items:center;font-size:22px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge)}

/* =====================================================================
   REWARDS
   ===================================================================== */
.vip-card{padding:18px;border-radius:var(--r-lg);position:relative;overflow:hidden}
.vip-top{display:flex;align-items:center;gap:13px}
.vip-top .ava{width:54px;height:54px;border-radius:16px;object-fit:cover;border:2px solid var(--line-2)}
.vip-top b{font-family:var(--f-disp);font-weight:700;font-size:18px;display:flex;align-items:center;gap:7px}
.vip-top .rb{width:22px;height:22px}
.vip-top small{color:var(--muted);font-size:12px;font-weight:700}
.vip-pct{margin-left:auto;font-family:var(--f-disp);font-weight:700;font-size:22px;color:var(--gold)}
.bar{height:10px;border-radius:var(--r-pill);background:rgba(0,0,0,.35);overflow:hidden;margin:14px 0 8px;position:relative;border:1px solid var(--line)}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--pink),var(--purple-2));position:relative;transition:width 1s cubic-bezier(.2,.8,.3,1)}
@keyframes shine{to{transform:translateX(180%)}}
.vip-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:700}
.vip-xp-card{padding:16px 18px 18px;background:var(--hero-grad)}
.vip-xp-top{display:flex;align-items:center;gap:10px;font-family:var(--f-disp);font-weight:700;font-size:19px}
.vip-xp-rank{width:32px;height:32px;object-fit:contain;object-position:center;display:block;padding:2px;box-sizing:border-box;flex:0 0 auto;overflow:visible}
.vip-xp-top span{margin-left:auto;color:var(--ink);font-size:21px}
.vip-xp-meta{color:var(--muted);font-weight:700;font-size:14px;line-height:1.35}

/* rakeback cards — single owner (Instant / Daily / Weekly / Monthly) */
.rake-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.rake{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 12px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge);position:relative;overflow:hidden}
.rake .rk-ico{width:84px;height:84px;margin:2px auto 10px;display:grid;place-items:center;overflow:visible}
.rake .rk-ico img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.5))}
.rake .rk-name{font-family:var(--f-disp);font-weight:600;font-size:14px}
.rake .rk-sub{color:var(--faint);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:2px 0 11px}
.rake.is-ready .rk-sub{color:var(--green)}
.rake.is-locked .rk-ico img{filter:drop-shadow(0 5px 9px rgba(0,0,0,.5)) grayscale(.12)}
@media(min-width:700px){.rake-grid{grid-template-columns:repeat(4,1fr)}}

/* leaderboard */
.lead{padding:0;overflow:hidden;margin-top:6px}
.lead-hero{position:relative;padding:20px 18px;text-align:center;background:var(--hero-grad)}
.lead-hero img{width:118px;margin:0 auto 6px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.lead-hero .eyebrow{color:#fff;justify-content:center}
.lead-hero h2{font-family:var(--f-disp);font-weight:700;font-size:22px;margin:4px 0 0}
.lead-pool{display:flex;justify-content:center;gap:7px;align-items:center;margin-top:8px;font-family:var(--f-disp);font-weight:700;color:var(--gold);font-size:15px}
.lead-row{display:grid;grid-template-columns:42px 36px 1fr auto;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.lead-empty{padding:18px;color:var(--muted);font-weight:800;text-align:center;border-top:1px solid var(--line)}
.lead-rank{font-family:var(--f-disp);font-weight:700;font-size:17px;text-align:center;color:var(--muted)}
.lead-row.top1 .lead-rank{color:var(--gold)}.lead-row.top2 .lead-rank{color:#cdd6ff}.lead-row.top3 .lead-rank{color:#ff9e6a}
.lead-row.me{background:linear-gradient(135deg,rgba(255,77,184,.16),transparent)}
.lead-ava{width:36px;height:36px;border-radius:11px;object-fit:cover;border:1.5px solid var(--line-2)}
.lead-rank-icon{object-fit:contain;border:0;background:transparent;border-radius:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.lead-name{font-family:var(--f-disp);font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px}
.lead-name img{width:16px;height:16px}
.lead-wag{font-family:var(--f-disp);font-weight:700;font-size:14px;color:#fff}
.lead-wag small{display:block;color:var(--faint);font-size:10px;text-align:right}

/* =====================================================================
   PACK OPENING MODAL
   ===================================================================== */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at 50% 40%,rgba(40,10,60,.86),rgba(5,1,10,.96));backdrop-filter:blur(10px)}
.modal.open{display:flex;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes packShake{10%,90%{transform:translateX(-2px) rotate(-1deg)}30%,70%{transform:translateX(4px) rotate(1.5deg)}50%{transform:translateX(-4px) rotate(-1.5deg)}}
@keyframes bob{50%{transform:translateX(-50%) translateY(-5px)}}
@keyframes packBurst{60%{transform:scale(1.15)}100%{transform:scale(.2);opacity:0}}
@keyframes swipe{to{transform:translateX(120%)}}
@keyframes cardReveal{to{opacity:1;transform:none}}

/* sheets / toast / scrim */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(5,1,10,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:.25s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;inset:0;z-index:110;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.sheet.open{pointer-events:auto}
.sheet-card{width:min(460px,100%);max-height:80vh;overflow-y:auto;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:18px;
  background:var(--glass-2);border:1px solid var(--line-2);box-shadow:0 -20px 60px rgba(0,0,0,.6);backdrop-filter:blur(22px);
  transform:translateY(110%);transition:transform .34s cubic-bezier(.2,.9,.3,1);padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.sheet.open .sheet-card{transform:none}
.sheet-head{display:flex;align-items:center;margin-bottom:12px}
.sheet-head h3{font-family:var(--f-disp);font-weight:700;font-size:18px;margin:0;flex:1}
.sheet-x{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);font-size:14px}
/* inbox cards — single owner (Shuffle-style: icon tile, 2-line body, side meta) */
.notif-list{display:grid;gap:10px}
.notif{position:relative;display:flex;gap:13px;align-items:center;min-height:76px;padding:14px 16px 14px 18px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);width:100%;text-align:left;cursor:pointer;transition:background .18s,border-color .18s,transform .12s;overflow:hidden}
.notif::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--nc,#8b5cff);opacity:.28;transition:opacity .18s}
.notif:hover{background:var(--surface-hi);border-color:var(--line-2)}
.notif:active{transform:scale(.99)}
.notif.unread{border-color:color-mix(in srgb,var(--nc,#8b5cff) 30%,var(--line))}
.notif.unread::before{opacity:1}
.notif .ni{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;color:color-mix(in srgb,var(--nc,#fff) 72%,#fff);background:linear-gradient(150deg,color-mix(in srgb,var(--nc,#8b5cff) 22%,var(--surface-3)),var(--surface-3));border:1px solid color-mix(in srgb,var(--nc,#8b5cff) 26%,var(--line))}
.notif .ni svg{width:21px;height:21px;fill:currentColor}
.notif .ni .ni-rank{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.notif-body{flex:1;min-width:0}
.notif b{font-family:var(--f-disp);font-weight:700;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.notif small{color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px;align-self:stretch;justify-content:center}
.notif time{color:var(--faint);font-size:11px;font-weight:700;white-space:nowrap}

.profile-big{text-align:center}
.profile-big .pava{width:96px;height:96px;border-radius:28px;object-fit:cover;object-position:center;margin:0 auto 10px;border:3px solid var(--line-2);background:#101620}
.profile-big h2{font-family:var(--f-disp);font-weight:700;font-size:24px;margin:0;display:flex;align-items:center;justify-content:center;gap:8px}
.profile-big h2 img{width:26px;height:26px}
.profile-big .pava-wrap{position:relative;display:inline-block;margin:0 auto 10px;line-height:0}
.profile-big .pava-wrap .pava{margin:0}
.profile-big .pava-rankbadge{position:absolute;left:-3px;bottom:-3px;width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));pointer-events:none}
.profile-big .sub{color:var(--muted);font-weight:700;font-size:13px;margin-top:2px}
.ep-ava img,.menu-prof .ava,.profile-big .pava,.ref-ava,.lead-ava,.creator-ava,.dm-ava,.lbx-ava,.lb-ava,.vip-top .ava,.cr-ava{object-fit:cover;object-position:center;background:#101620}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.pstat{padding:14px 8px;border-radius:16px;background:var(--glass);border:1px solid var(--line)}
.pstat b{font-family:var(--f-disp);font-weight:700;font-size:20px;display:block}
.pstat small{color:var(--faint);font-size:11px;font-weight:700}

/* ---------- inline SVG icon sizing + color ---------- */
.mi,.hi,.bi,.big-ic{color:#fff}
.mi svg,.ti svg,.ni svg,.hi svg,.bi svg,.big-ic svg,.fmeta svg,.menu-prof svg{fill:currentColor}
.mi svg{width:25px;height:25px}
.ti svg{width:25px;height:25px}
.ni svg{width:22px;height:22px}
.hi{display:inline-grid;place-items:center;vertical-align:-5px}
.hi svg{width:21px;height:21px}
.bi{display:inline-grid;place-items:center}
.bi svg{width:18px;height:18px}
.reward .rimg.big-ic svg{width:42px;height:42px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.fmeta{display:inline-flex;align-items:center;gap:5px}
.fmeta svg{width:16px;height:16px}
.pay img{width:58%;height:58%;object-fit:contain}
.fchip svg{width:15px;height:15px;fill:currentColor;vertical-align:-3px;margin-right:3px}
.lead-rank .crown{display:inline-grid;place-items:center}
.lead-rank .crown svg{width:23px;height:23px;fill:var(--gold)}
.lh.prem .lhc{display:inline-grid;place-items:center;vertical-align:-2px}
.lh.prem .lhc svg{width:14px;height:14px;fill:#3a1d04}

/* =====================================================================
   responsive — tablet / desktop
   ===================================================================== */
/* fill better on narrow-desktop / large-phone windows (less wasted side margin) */
@media(min-width:481px){ :root{--maxw:94vw} }
/* small tablet / large phone landscape: widen the column, 4-up grid */
@media(min-width:680px){
  :root{--maxw:620px}
  .game-grid{grid-template-columns:repeat(4,1fr);gap:11px}
  .menu-grid{grid-template-columns:repeat(3,1fr)}
}
/* portrait tablet */
@media(min-width:768px){
  :root{--maxw:700px}
  .stage{padding:8px 20px 10px}
}
/* large tablet / pre-sidebar laptop: full-width lobby, fluid grid */
@media(min-width:920px){
  :root{--maxw:900px}
  .stage{padding:10px 24px 12px}
  .game-grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:14px}
  .pkg-grid{grid-template-columns:repeat(4,1fr)}
  .wallet-cards{grid-template-columns:1fr 1fr 1fr}
  .rake-grid{grid-template-columns:repeat(4,1fr)}
  .rake.monthly{grid-column:span 4}
  .pm-reveal{min-height:160px}
}
@media(min-width:1280px){
  .topbar,.botnav{border-radius:0}
}

/* =====================================================================
   V2 PATCH — live-bets table, rakeback, leaderboard chip, clean deposit
   ===================================================================== */
/* live bets: reference-style table */
.livebets{overflow:hidden;margin-top:12px;overflow-anchor:none;contain:layout paint style}
.lbx-head,.lbx-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.12fr) minmax(0,.82fr) minmax(0,1fr) minmax(0,1.28fr);align-items:center;gap:5px;padding:0 12px}
.lbx-head{height:40px;border-bottom:1px solid var(--line);color:var(--faint);font-family:var(--f-disp);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.lbx-body{display:grid;grid-auto-rows:48px;align-content:start;height:192px;overflow:hidden;overflow-anchor:none;contain:layout paint}
.lbx-empty,.chat-empty{padding:16px;color:var(--muted);font-weight:700;line-height:1.35}
.chat-empty{min-height:120px;display:grid;place-items:center;text-align:center}
.lbx-row{height:48px;min-height:48px;border-bottom:1px solid rgba(255,255,255,.05)}
.lbx-row:nth-child(even){background:rgba(255,255,255,.018)}
.lbx-row:last-child{border-bottom:0}
.lbx-c{min-width:0;display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden}
.lbx-rank{width:27px;height:27px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.lbx-user b{overflow:hidden;text-overflow:ellipsis}
.lbx-user.is-private{cursor:default;color:rgba(255,255,255,.9)}
.lbx-user.is-private .lbx-rank{width:30px;height:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(255,255,255,.1))}
.lbx-gico{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--a) 44%,#160722),#0c0418);border:1px solid var(--line)}
.lbx-gico img{width:22px;height:22px;object-fit:contain}
.lbx-game b{color:var(--muted);font-weight:700;overflow:hidden;text-overflow:ellipsis}
.lbx-bet{color:var(--ink)}
.lbx-bet .chip-i,.lbx-pay .chip-i{width:18px;height:18px;flex:0 0 auto}
.lbx-row.fun{background:linear-gradient(90deg,rgba(255,255,255,.026),rgba(255,255,255,.012))}
.lbx-row.fun .lbx-bet{color:#fff}
.lbx-row.fun .lbx-pay.win{color:var(--green)}
.lbx-mult{color:var(--muted)}
.lbx-mult .trend{width:24px;height:24px;flex:0 0 auto}
.lbx-mult.up{color:#cfe9ff}.lbx-mult.up .trend{color:#62f0b0}
.lbx-mult.down .trend{color:var(--faint)}
.lbx-pay.win{color:var(--green)}.lbx-pay.lose{color:rgba(255,255,255,.86)}
.lbx-row.new{animation:liveBetInsert .34s cubic-bezier(.2,.9,.25,1)}
@keyframes liveBetInsert{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.lbx-row.new{animation:none}}
@media(min-width:680px){.lbx-body{height:240px}}
@media(min-width:920px){.lbx-body{height:288px}}
@media(min-width:920px){
  .game-livebets .lbx-head,.game-livebets .lbx-row,
  .casino-livebets .lbx-head,.casino-livebets .lbx-row{grid-template-columns:minmax(180px,1.2fr) minmax(180px,1.12fr) minmax(110px,.62fr) minmax(110px,.62fr) minmax(132px,.72fr);gap:14px;padding:0 18px}
  .game-livebets .lbx-c,.casino-livebets .lbx-c{overflow:visible}
  .game-livebets .lbx-user b,.game-livebets .lbx-game b,
  .casino-livebets .lbx-user b,.casino-livebets .lbx-game b{overflow:visible;text-overflow:clip;white-space:nowrap}
  .casino-livebets .lbx-body{height:384px}
}
@media(max-width:412px){
  .lbx-head,.lbx-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.74fr) minmax(0,.92fr) minmax(0,1.2fr);gap:4px;padding:0 8px}
  .lbx-c{font-size:11.5px;gap:5px}
  .lbx-rank{width:22px;height:22px}.lbx-gico{width:25px;height:25px}.lbx-gico img{width:18px;height:18px}
  .lbx-mult .trend{width:19px;height:19px}
  .lbx-bet .chip-i,.lbx-pay .chip-i{width:14px;height:14px}
}

@media(max-width:679px){
  .gcard .gtitle,.game-more-card .gtitle{left:8px;right:8px;bottom:12px;font-size:20px;line-height:.92}
  .gcard .gtitle.vibe-clean{letter-spacing:.015em}
}

/* rakeback claim / lock CTAs */
.rk-claim{width:100%;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--f-disp);font-weight:700;font-size:13px;color:#fff;background:var(--grad-cta);box-shadow:var(--sh-glow);transition:transform .14s,filter .2s;white-space:nowrap}
.rk-claim .bal-chip{width:18px;height:18px;flex:0 0 auto}
.rk-claim b{font:inherit;line-height:1}
.rk-claim:active{transform:scale(.97)}
.rk-claim.busy{opacity:.6;pointer-events:none}
.rk-lock{width:100%;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:12px}
.rk-lock .rk-lock-ic{display:inline-grid;place-items:center}
.rk-lock .rk-lock-ic svg{width:14px;height:14px;fill:var(--faint)}

/* leaderboard: chip before wagered */
.lead-wag .lwc{display:inline-flex;align-items:center;gap:5px;justify-content:flex-end}
.lead-wag .lwc .chip-i{width:17px;height:17px}
.lead-prize{display:flex;align-items:center;gap:5px;justify-content:flex-end;color:var(--gold);font-weight:800}
.lead-prize .chip-i{width:17px;height:17px}
.lead-sub{text-align:center;color:var(--muted);font-size:11.5px;font-weight:600;margin-top:3px}
.lead-cols{display:flex;justify-content:space-between;padding:11px 16px 2px;color:var(--faint);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* ---- clean deposit / wallet (financial, not arcade) ---- */
.dep-head h2{font-family:var(--f-disp);font-weight:700;font-size:24px;margin:4px 0 2px}
.dep-head p{color:var(--muted);font-size:13px;font-weight:600;margin:0 0 16px}
.dep-bal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.dep-bal-it{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.dep-bal-it .bal-chip{width:34px;height:34px}
.dep-bal-it small{display:block;color:var(--faint);font-size:11px;font-weight:700}
.dep-bal-it b{font-family:var(--f-disp);font-weight:700;font-size:18px;line-height:1.1}
.dep-label{font-family:var(--f-disp);font-weight:600;font-size:12px;color:var(--faint);margin:18px 2px 10px;text-transform:uppercase;letter-spacing:.08em}
.dep-foot{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--faint);font-size:11px;font-weight:600;margin-top:14px}
.dep-foot .bi svg{width:14px;height:14px;fill:var(--faint)}
/* redeem amount card */
.rdm-amount{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:18px;padding:16px}
.rdm-side{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.rdm-side .bal-chip{width:34px;height:34px;flex:0 0 auto}
.rdm-side b{font-family:var(--f-disp);font-weight:700;font-size:22px;display:block;line-height:1.05}
.rdm-side small{color:var(--muted);font-size:11px;font-weight:600}
.rdm-usd{justify-content:flex-end;text-align:right}
.rdm-usd b{color:var(--gold)}
.rdm-eq{color:var(--muted);font-size:22px;font-weight:800;flex:0 0 auto}
@media(min-width:920px){.dep{max-width:720px;margin-inline:auto}}

/* =====================================================================
   V2 PATCH 2 — new routed screens (creators, inventory, tx, settings)
   ===================================================================== */
.cr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cr-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge),var(--sh);text-align:center}
.cr-ava{width:74px;height:74px;border-radius:50%;object-fit:cover;border:2.5px solid var(--line-2)}
.cr-meta b{font-family:var(--f-disp);font-weight:700;font-size:15px;display:block}
.cr-meta small{color:var(--faint);font-size:11px;font-weight:700}
.cr-follow{width:100%;height:36px;border-radius:11px;font-family:var(--f-disp);font-weight:700;font-size:13px;color:#fff;background:var(--grad-cta);box-shadow:var(--sh-glow)}
.cr-follow.done{background:rgba(255,255,255,.07);box-shadow:none;color:var(--muted)}
.inv-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.inv-card{padding:14px 10px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge);text-align:center;position:relative}
.inv-card img{width:100%;height:82px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.inv-card b{display:block;font-family:var(--f-disp);font-weight:600;font-size:12px;margin-top:8px}
.inv-qty{position:absolute;top:8px;right:8px;font-family:var(--f-disp);font-weight:700;font-size:11px;padding:3px 8px;border-radius:99px;background:var(--grad-cta);color:#fff}
.tx-page{padding-bottom:10px}
.tx-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 2px 10px}
.tx-title h2{font-family:var(--f-disp);font-size:32px;line-height:1;margin:0;font-weight:800;letter-spacing:0}
.tx-filter-btn{height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border-radius:8px;background:#2a2f3b;border:1px solid rgba(255,255,255,.08);font-family:var(--f-disp);font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap}
.tx-filter-btn:active{transform:translateY(1px)}
.tx-tabs{display:flex;gap:3px;width:100%;padding:5px;border-radius:10px;background:#20232b;border:1px solid rgba(255,255,255,.07);overflow-x:auto;scrollbar-width:none;box-shadow:none;margin-bottom:7px}
.tx-tabs::-webkit-scrollbar{display:none}
.tx-tabs button{flex:1 0 auto;min-width:max-content;height:38px;padding:0 13px;border-radius:7px;font-family:var(--f-disp);font-size:13px;font-weight:800;color:rgba(255,255,255,.62);white-space:nowrap}
.tx-tabs button.on{background:#353a47;color:#fff;box-shadow:none}
.tx-tools-row{display:flex;justify-content:flex-end;margin:0 2px 8px}
.tx-stat-link{height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border-radius:7px;background:rgba(42,47,59,.72);border:1px solid rgba(255,255,255,.07);font-family:var(--f-disp);font-size:11.5px;font-weight:800;color:rgba(255,255,255,.82)}
.tx-stat-link svg{width:15px;height:15px}
.tx-action-icon{width:20px;height:20px;flex:0 0 auto}
.tx-chev{width:16px;height:16px;flex:0 0 auto;color:rgba(255,255,255,.68)}
.tx-filter-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;margin-bottom:8px;border-radius:9px;background:#181b23;border:1px solid rgba(255,255,255,.07)}
.tx-filter-panel button{height:34px;border-radius:7px;background:transparent;border:0;font-family:var(--f-disp);font-size:12px;font-weight:800;color:rgba(255,255,255,.62)}
.tx-filter-panel button.on{background:#353a47;color:#fff}
.tx-state{padding:13px 14px;margin-bottom:8px;border-radius:9px;background:#101319;border:1px solid rgba(255,255,255,.06)}
.tx-state b{display:block;font-family:var(--f-disp);font-size:15px}
.tx-state small{display:block;margin-top:3px;color:rgba(255,255,255,.5);font-size:12px;line-height:1.35}
.tx-state{display:grid;gap:10px;justify-items:start}
.tx-state.bad{border-color:rgba(255,93,115,.35)}
.tx-stats{padding:11px;margin-bottom:8px;border-radius:9px;background:#101319;border:1px solid rgba(255,255,255,.06)}
.tx-stats-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.tx-stats-head b{font-family:var(--f-disp);font-size:15px}
.tx-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tx-stat{min-width:0;padding:11px;border-radius:8px;background:#171a22;border:1px solid rgba(255,255,255,.06)}
.tx-stat span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#282d38;color:#fff;margin-bottom:8px}
.tx-stat span svg{width:17px;height:17px;fill:currentColor}
.tx-stat small{display:block;color:var(--faint);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-stat b{font-family:var(--f-disp);font-size:17px;line-height:1.15;display:block;margin-top:2px}
.tx-table{overflow-x:auto;overflow-y:hidden;border-radius:0;border:0;background:transparent;box-shadow:none;scrollbar-width:thin;margin-top:2px}
.tx-body{display:grid;gap:0}
.tx-head,.tx-line{min-width:700px;display:grid;grid-template-columns:minmax(150px,1.1fr) 180px 130px 140px;gap:16px;align-items:center;padding:0 18px}
.tx-table.casino .tx-head,.tx-line.casino{min-width:840px;grid-template-columns:minmax(180px,1.2fr) 180px 130px 120px 160px}
.tx-table.deposits .tx-head,.tx-line.deposits{min-width:760px;grid-template-columns:minmax(180px,1fr) minmax(150px,.75fr) minmax(180px,1fr) minmax(140px,.75fr)}
.tx-table.withdrawals .tx-head,.tx-line.withdrawals{min-width:760px;grid-template-columns:minmax(180px,1fr) minmax(150px,.75fr) minmax(180px,1fr) minmax(140px,.75fr)}
.tx-head{height:52px;color:#858c9b;font-family:var(--f-disp);font-size:13px;font-weight:800;letter-spacing:0;text-transform:none;border-bottom:1px solid #262b35}
.tx-line{min-height:70px;border-bottom:0}
.tx-line:nth-child(even){background:#101319;border-radius:8px}
.tx-line:last-child{border-bottom:0}
.tx-line b{font-family:var(--f-disp);font-size:15px;line-height:1.1}
.tx-line small{display:block;color:#858c9b;font-size:11px;line-height:1.2;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-line time{color:rgba(255,255,255,.86);font-size:14px;font-weight:800;line-height:1.2}
.tx-kind,.tx-game{min-width:0}
.tx-value,.tx-status,.tx-id,.tx-mult{min-width:0;display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-size:14px;font-weight:800;white-space:nowrap}
.tx-value.stack{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"token amount" ". sub";justify-content:start;align-items:center}
.tx-value.stack .tx-token{grid-area:token}
.tx-value.stack b{grid-area:amount}
.tx-value.stack small{grid-area:sub;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-value.in{color:var(--green)}
.tx-value.out{color:rgba(255,255,255,.86)}
.tx-token .bal-chip{width:22px;height:22px}
.tx-status{justify-content:flex-start;color:var(--green)}
.tx-status.pending{color:var(--gold)}
.tx-status.reviewing{color:var(--gold)}
.tx-status.confirming{color:#68a7ff}
.tx-status.failed{color:var(--red)}
.tx-status svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.tx-id svg{width:17px;height:17px;fill:none;flex:0 0 auto}
.tx-id{color:rgba(255,255,255,.82);overflow:hidden;text-overflow:ellipsis}
.tx-id.linked,.tx-status.linked{color:var(--green);text-decoration:none}
.tx-id.linked:hover,.tx-status.linked:hover{text-decoration:underline}
.tx-id.muted{color:#858c9b}
.tx-mult{color:var(--faint)}
.tx-mult .trend{width:20px;height:20px;flex:0 0 auto}
.tx-mult.up{color:var(--green)}
.tx-more{min-width:700px;height:50px;width:100%;display:flex;align-items:center;justify-content:center;gap:7px;border-top:0;font-family:var(--f-disp);font-weight:800;color:rgba(255,255,255,.78);background:transparent}
.tx-table.casino .tx-more{min-width:840px}
.tx-table.deposits .tx-more{min-width:760px}
.tx-table.withdrawals .tx-more{min-width:760px}
@media(max-width:430px){
  .tx-title h2{font-size:30px}
  .tx-filter-btn{height:36px;padding:0 12px;font-size:12px}
  .tx-tabs{padding:4px;gap:2px;border-radius:9px;margin-bottom:6px}
  .tx-tabs button{flex:1 1 0;min-width:0;height:36px;padding:0 4px;font-size:11.5px;border-radius:7px}
  .tx-tools-row{margin-bottom:7px}
  .tx-stat-link{height:28px;font-size:11px}
  .tx-table{overflow-x:hidden}
  .tx-head{display:none}
  .tx-body{gap:6px}
  .tx-line,.tx-line.casino{min-width:0;min-height:0;display:grid;gap:4px 8px;padding:9px 11px;border-radius:9px;background:rgba(12,15,22,.8);border:1px solid rgba(255,255,255,.035)}
  .tx-line:nth-child(even){background:#101319;border-radius:9px}
  .tx-line{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kind value" "date status"}
  .tx-line.casino{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"game value value" "date mult id"}
  .tx-line.deposits{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"value status" "date id"}
  .tx-line.withdrawals{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"value status" "date id"}
  .tx-kind{grid-area:kind}.tx-game{grid-area:game}.tx-line time{grid-area:date}.tx-value{grid-area:value}.tx-status{grid-area:status}.tx-mult{grid-area:mult}.tx-id{grid-area:id}
  .tx-line b{font-size:13px}
  .tx-line small{display:none}
  .tx-line .tx-value.stack small{display:block;font-size:10.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tx-line time{font-size:11.5px;line-height:1.2;color:#8d95a5;white-space:nowrap}
  .tx-value,.tx-status,.tx-id,.tx-mult{gap:4px;font-size:11.5px;justify-self:end}
  .tx-line.deposits .tx-value,.tx-line.withdrawals .tx-value{justify-self:start}
  .tx-token .bal-chip{width:18px;height:18px}
  .tx-mult .trend{width:14px;height:14px}
  .tx-id svg{width:13px;height:13px}
  .tx-more,.tx-table.casino .tx-more,.tx-table.deposits .tx-more,.tx-table.withdrawals .tx-more{min-width:0}
}
.set-group{font-family:var(--f-disp);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin:18px 4px 9px}
.set-list{display:grid;gap:9px}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);font-family:var(--f-disp);font-weight:600;font-size:14px;text-align:left;color:#fff;cursor:pointer}
.set-row.has-ic{justify-content:flex-start;gap:12px}
.set-link{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-align:left;color:#fff;cursor:pointer;text-decoration:none}
.set-link:hover{background:var(--surface-2)}
.set-ic{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--purple-2)}
.set-ic svg{width:25px;height:25px}
.asset-ic{width:34px;height:34px;object-fit:contain;object-position:center;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.34))}
.asset-ic-xl{transform:scale(1.24)}
.edit-profile-ic,.private-mode-ic{transform:scale(1.2)}
.lb-wallet-img{width:34px;height:34px;object-fit:contain;object-position:center;display:block}
.set-tx{flex:1;min-width:0}.set-tx b{font-family:var(--f-disp);font-weight:600;font-size:14px;display:block}.set-tx small{color:var(--faint);font-size:12px;font-weight:600}
.set-chev{width:18px;height:18px;color:var(--faint);flex:0 0 auto}
.set-note{color:var(--muted);font-size:13.5px;font-weight:500;line-height:1.5;margin:6px 0 16px}
.ep-label{display:block;font-family:var(--f-disp);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:14px 2px 8px}
.ep-input{width:100%;height:48px;border-radius:var(--r);background:var(--surface-3);border:1px solid var(--line);color:#fff;padding:0 14px;font-family:var(--f-disp);font-weight:700;font-size:16px;outline:0}
.ep-input:focus{border-color:var(--line-2)}
.ep-avas{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.ep-ava{aspect-ratio:1;border-radius:14px;overflow:hidden;border:2px solid var(--line);background:var(--surface-3);padding:0;cursor:pointer}
.ep-ava img{width:100%;height:100%;object-fit:cover}
.ep-ava.on{border-color:var(--purple)}
/* avatar menu (account shortcuts) */
.am-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.am-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);text-align:left;color:#fff;cursor:pointer}
.am-row:hover{background:var(--surface-hi)}
.am-ic{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;color:var(--purple-2)}
.am-ic svg{width:27px;height:27px}
.am-ic .lb-wallet-img{transform:scale(1.18)}
.promo-code-ic{transform:scale(1.13)}
.am-tx{flex:1;min-width:0}.am-tx b{font-family:var(--f-disp);font-weight:600;font-size:14px;display:block}.am-tx small{color:var(--faint);font-size:12px;font-weight:600}
.am-chev{width:18px;height:18px;color:var(--faint);flex:0 0 auto}
/* settings static row + hint */
.set-static{cursor:default}
.set-hint{color:var(--faint);font-family:var(--f-disp);font-weight:700;font-size:12px}
/* responsible play */
.rp-sub{color:var(--muted);font-size:13px;font-weight:500;margin:0 2px 10px;line-height:1.45}
.rp-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:6px}
.rp-btn{flex:1;height:46px;font-size:14px}
.rp-serious{border-color:rgba(139,92,255,.46);color:#f4efff}
.rp-serious:hover{background:rgba(139,92,255,.13);border-color:rgba(139,92,255,.7)}
#profileSheet:has(.se-info),#profileSheet:has(.se-sheet){align-items:center}
#profileSheet:has(.se-info) .sheet-card,#profileSheet:has(.se-sheet) .sheet-card{width:min(820px,calc(100% - 28px));max-height:88vh;border-radius:12px;background:#080a0f;border-color:rgba(140,151,174,.32);padding:24px}
#profileSheet:has(.se-info):not(.open) .sheet-card,#profileSheet:has(.se-sheet):not(.open) .sheet-card{transform:translateY(calc(100vh + 100%))}
.se-info-head{padding-bottom:16px;border-bottom:1px solid rgba(140,151,174,.26);margin-bottom:18px}
.se-info-head h3{font-size:17px;font-weight:800}
.se-info{display:grid;gap:18px}
.se-info p{margin:0;color:#f1f3f7;font-size:14px;line-height:1.55;font-weight:500}
.se-step-list{display:grid;gap:22px;margin-top:8px}
.se-step-card{display:grid;grid-template-columns:82px minmax(0,1fr);min-height:104px;border-radius:8px;border:1px solid rgba(140,151,174,.35);overflow:hidden;background:#06070a}
.se-step-ic{display:grid;place-items:center;color:var(--purple-2);background:#11141a;border-right:1px solid rgba(140,151,174,.28)}
.se-step-ic svg{width:32px;height:32px}
.se-step-copy{display:grid;align-content:center;gap:5px;padding:20px 28px}
.se-step-copy b{font-family:var(--f-disp);font-size:14px;color:#fff}
.se-step-copy small{color:#c6cbd6;font-size:13.5px;line-height:1.45;font-weight:500}
.se-continue,.se-confirm:not(:disabled){height:54px;background:linear-gradient(135deg,#7c1dff,#8d32ff);color:#fff;border:0;box-shadow:0 12px 28px rgba(124,29,255,.24)}
.se-continue{width:min(184px,100%);margin-top:6px}
.se-sheet{display:grid;gap:12px}
.se-lead{margin:0;color:var(--muted);font-size:13px;line-height:1.5;font-weight:600}
.se-grid{display:grid;gap:10px}
.se-field{display:grid;gap:7px}
.se-field span{font-size:12px;color:var(--muted);font-weight:800}
.se-field b{display:flex;align-items:center;min-height:48px;border-radius:8px;background:var(--surface-3);border:1px solid var(--line);padding:0 14px;color:var(--ink);font-size:14px;font-weight:700}
.se-steps{display:grid;gap:6px;border:1px solid var(--line);border-radius:10px;padding:13px;background:rgba(255,255,255,.025)}
.se-steps b{font-family:var(--f-disp);font-size:13px}
.se-steps p{margin:0 0 6px;color:var(--muted);font-size:12.5px;line-height:1.45}
.se-checks{display:grid;gap:10px;border:1px solid var(--line);border-radius:10px;padding:14px;background:rgba(255,255,255,.018)}
.se-check-title{font-size:13px;font-weight:800;color:var(--ink)}
.se-check{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;color:var(--ink);font-size:13px;line-height:1.35}
.se-check input{width:16px;height:16px;margin:1px 0 0;accent-color:var(--purple)}
#selfExclusionConfirm:disabled{background:#9aa4b5;color:#fff;opacity:1;filter:none;cursor:not-allowed}
/* about */
.about-card{text-align:center;padding:24px 18px}
.about-logo{width:64px;height:64px;min-width:64px;min-height:64px;border-radius:16px;margin:0 auto 10px}
.about-name{font-family:var(--f-impact);font-size:20px;letter-spacing:.5px;display:block}
.about-card small{color:var(--faint);font-size:12px;font-weight:600}
.about-card p{color:var(--muted);font-size:13.5px;font-weight:500;line-height:1.5;margin:12px 0 0}
/* danger button */
.btn-danger{background:var(--error);color:#fff}
.btn-danger:hover{background:#ff7385}
/* wallet hub */
.wallet-screen{max-width:480px;margin:0 auto}
.wallet-title{margin:2px 0 14px}
.wallet-title h2{font-family:var(--f-disp);font-weight:900;font-size:28px;line-height:1;margin:0;color:#fff}
.wallet-title p{margin:6px 0 0;color:var(--muted);font-size:13px;font-weight:650}
.wallet-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:10px;background:#10141c;border:1px solid rgba(255,255,255,.09);margin-bottom:12px}
.wallet-seg button{min-width:0;height:40px;border-radius:7px;font-family:var(--f-disp);font-weight:800;font-size:12.5px;color:rgba(244,246,251,.6);white-space:nowrap}
.wallet-seg button.on{background:#2a3140;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.wallet-seg button{display:flex;align-items:center;justify-content:center;gap:5px}
.wallet-seg .seg-ic{display:inline-grid;place-items:center;flex:0 0 auto}
.wallet-seg .seg-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wallet-seg button.on .seg-ic{color:#fff}
.wbody{display:grid;gap:12px}
.wallet-panel{position:relative;padding:14px;border-radius:12px;background:#111720;border:1px solid rgba(255,255,255,.09);box-shadow:var(--edge),0 14px 32px -24px rgba(0,0,0,.85)}
.wallet-kicker{display:block;margin-bottom:9px;color:var(--faint);font-family:var(--f-disp);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.wb-lead{color:var(--muted);font-size:13px;font-weight:500;line-height:1.5;margin:0 2px 14px}
.wb-lead b{color:var(--ink)} .wb-lead a{color:var(--cyan);font-weight:700}
.wb-fine{color:var(--faint);font-size:12px;font-weight:500;line-height:1.5;margin:3px 2px 0}
.wb-fine b{color:var(--muted)} .wb-fine a{color:var(--cyan);font-weight:700}
.buy-panel{background:linear-gradient(180deg,rgba(139,92,255,.13),#10141c 74%)}
.buy-entry{display:grid;gap:7px}
.buy-entry>span:first-child{font-family:var(--f-disp);font-size:10.5px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.buy-input-wrap{min-height:62px;display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:14px;background:#151b25;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 30px -24px rgba(139,92,255,.82)}
.buy-input-wrap:focus-within{border-color:rgba(169,139,255,.88);box-shadow:0 0 0 3px rgba(139,92,255,.18),inset 0 1px 0 rgba(255,255,255,.06)}
.buy-input-wrap b{font-family:var(--f-disp);font-size:24px;font-weight:900;color:var(--muted)}
.buy-input-wrap input{width:100%;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-family:var(--f-disp);font-size:32px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.buy-input-wrap input::placeholder{color:rgba(244,246,251,.24)}
.buy-gets{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.buy-get,.buy-bonus{display:flex;align-items:center;gap:7px;min-width:0;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);font-family:var(--f-disp);font-weight:850;line-height:1.15}
.buy-get{font-size:13px;color:var(--ink)}
.buy-get .bal-chip{width:23px;height:23px;flex:0 0 auto}
.buy-bonus{font-size:12px;color:var(--gold)}
.buy-bonus .chip-i{width:18px;height:18px;flex:0 0 auto}
.buy-entry-hint{margin-top:7px;color:var(--faint);font-size:11.5px;font-weight:700}
.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.amount-pill{height:46px;border-radius:10px;background:#161d27;border:1px solid rgba(255,255,255,.09);font-family:var(--f-disp);font-size:15px;font-weight:900;color:rgba(244,246,251,.72);transition:border-color .15s,background .15s,color .15s}
.amount-pill.on{background:rgba(139,92,255,.18);border-color:rgba(169,139,255,.7);color:#fff;box-shadow:inset 0 0 0 1px rgba(169,139,255,.35)}
.method-panel{display:grid;gap:12px;background:linear-gradient(180deg,#141b27,#10141c 72%);border-color:rgba(139,92,255,.18)}
.method-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.method-head .wallet-kicker{margin:0}
.deposit-groups{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.deposit-method-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:2px}
.deposit-method-head b{font-family:var(--f-disp);font-size:13px;font-weight:950;color:#fff}
.deposit-method-head small{min-width:0;color:var(--faint);font-size:11px;font-weight:750;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.method-grid,.deposit-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.deposit-method-grid.crypto{grid-template-columns:repeat(3,minmax(0,1fr))}
.deposit-method-grid.payment-apps{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.dep-pay-img{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--pc) 14%,#0f1724);border:1px solid color-mix(in srgb,var(--pc) 36%,transparent)}
.dep-pay-img img{width:25px;height:25px;object-fit:contain;aspect-ratio:1/1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.34))}
.dep-pay-crypto .dep-pay-img{background:linear-gradient(135deg,rgba(247,147,26,.2),rgba(139,92,255,.18))}
.wallet-continue{margin-top:2px}
.wallet-continue:disabled{opacity:.48;filter:grayscale(.25);cursor:not-allowed}
.method-note{margin:0;color:var(--faint);font-size:11.5px;font-weight:650;line-height:1.45}
.free-hero{display:grid;gap:8px;background:linear-gradient(180deg,rgba(139,92,255,.14),#111720 64%)}
.free-hero h3{font-family:var(--f-disp);font-size:22px;line-height:1.08;margin:0;font-weight:900;color:#fff}
.free-hero p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.free-balance{margin-top:3px;display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:8px 10px;border-radius:10px;background:rgba(36,217,255,.08);border:1px solid rgba(36,217,255,.16)}
.free-balance .bal-chip{width:24px;height:24px;flex:0 0 auto}
.free-balance b{font-family:var(--f-disp);font-size:17px;font-weight:900}
.free-balance small{color:var(--faint);font-size:11px;font-weight:800}
.pf-grid{display:grid;grid-template-columns:1fr;gap:9px}
@media(min-width:560px){.pf-grid{grid-template-columns:1fr 1fr}}
.pf-tile{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;padding:13px;border-radius:11px;background:#111720;border:1px solid rgba(255,255,255,.08);transition:border-color .15s,background .15s,transform .1s}
.pf-tile:hover,.pf-tile:focus-visible{border-color:var(--line-2);background:#151b25;outline:none}
.pf-tile:active{transform:scale(.99)}
.pf-ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(255,200,61,.1);color:var(--gold)}
.pf-ic .uic,.pf-ic svg{width:23px;height:23px}
.pf-ic img{width:24px;height:24px;object-fit:contain;display:block}
.pf-ic svg{fill:currentColor;stroke:none}
.pf-ic-faucet svg,.pf-ic-path svg{fill:none;stroke:currentColor;stroke-width:1.9}
.pf-ic-discord{color:#fff;background:#5865f2}
.pf-ic-telegram{background:rgba(34,158,217,.12);color:#229ed9}
.pf-tx{flex:1;min-width:0}
.pf-tx b{display:block;font-family:var(--f-disp);font-weight:850;font-size:14px;color:var(--ink)}
.pf-tx small{display:block;font-size:12px;font-weight:550;color:var(--muted);margin-top:2px;line-height:1.35}
.pf-cta{flex:0 0 auto;font-size:11.5px;font-weight:900;color:#191205;background:var(--gold);border-radius:var(--r-pill);padding:6px 11px}
.pf-arrow{flex:0 0 auto;font-size:22px;line-height:1;color:var(--faint)}
.lucky-free-hero{gap:16px;background:
  linear-gradient(145deg,rgba(255,200,61,.08),transparent 34%),
  linear-gradient(180deg,#151b25,#101720 72%);border-color:rgba(255,255,255,.09)}
.free-hero-main{display:grid;gap:0}
.lucky-free-hero h3{max-width:760px;font-size:clamp(23px,3.3vw,34px);line-height:1.12;letter-spacing:0}
.free-lucky-balance{background:rgba(255,200,61,.09);border-color:rgba(255,200,61,.22)}
.free-lucky-balance .chip-i{width:24px;height:24px;flex:0 0 auto}
.faucet-action{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:5px 12px;align-items:center;padding:12px;border-radius:13px;background:#101720;border:1px solid rgba(255,200,61,.18)}
.faucet-ic{grid-row:1/3;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(255,200,61,.12);color:var(--gold)}
.faucet-ic svg{width:28px;height:28px}
.faucet-copy{min-width:0;display:grid;gap:1px}
.faucet-copy b{font-family:var(--f-disp);font-size:15px;font-weight:900;color:#fff}
.faucet-copy small,.faucet-next{font-size:11px;font-weight:800;color:var(--faint)}
.faucet-btn{grid-column:3;grid-row:1/3;min-height:44px;border-radius:999px;background:var(--gold);color:#171002;font-family:var(--f-disp);font-weight:900;font-size:13px;padding:0 16px;white-space:nowrap;box-shadow:0 12px 26px -18px rgba(255,200,61,.9)}
.faucet-btn.cooling,.faucet-btn:disabled{opacity:.68;filter:grayscale(.15);cursor:not-allowed}
.faucet-next{grid-column:2}
.pf-discord{border-color:rgba(88,101,242,.38);background:linear-gradient(135deg,rgba(88,101,242,.18),#111720 58%)}
.pf-tile{text-decoration:none;color:inherit}
.pf-primary{border-color:rgba(255,200,61,.34);background:linear-gradient(135deg,rgba(255,200,61,.13),#111720 58%)}
.pf-primary .pf-cta{background:#fff;color:#170f02}
.rank-pack-panel{display:grid;gap:12px;background:linear-gradient(180deg,#141b27,#10141c)}
.rank-pack-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rank-pack-head b{display:block;font-family:var(--f-disp);font-size:16px;font-weight:900;color:#fff}
.rank-pack-head small{display:block;margin-top:2px;color:var(--faint);font-size:11.5px;font-weight:700;line-height:1.3}
.rank-pack-reset{flex:0 0 auto;border-radius:var(--r-pill);padding:5px 9px;background:rgba(255,200,61,.1);border:1px solid rgba(255,200,61,.22);color:var(--gold);font-size:10.5px;font-weight:900;text-transform:uppercase}
.rank-pack-grid{display:grid;grid-template-columns:1fr;gap:9px}
@media(min-width:560px){.rank-pack-grid{grid-template-columns:1fr 1fr}}
.rank-pack-card{position:relative;min-height:86px;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:1fr auto;gap:8px 10px;padding:12px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--rank) 14%,#111720),#111720 72%);border:1px solid color-mix(in srgb,var(--rank) 38%,rgba(255,255,255,.08));text-align:left;cursor:pointer;transition:transform .1s,border-color .15s,background .15s}
.rank-pack-card:active{transform:scale(.99)}
.rank-pack-card.locked{filter:saturate(.72);background:#111720;border-color:rgba(255,255,255,.08)}
.rank-pack-icon{grid-row:1/3;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--rank) 18%,#0a0f16);border:1px solid color-mix(in srgb,var(--rank) 42%,transparent)}
.rank-pack-icon span{font-family:var(--f-disp);font-size:22px;font-weight:950;color:var(--rank)}
.rank-pack-copy{min-width:0;display:grid;gap:2px}
.rank-pack-copy b{font-family:var(--f-disp);font-size:14.5px;font-weight:900;color:#fff}
.rank-pack-copy small{font-size:11px;font-weight:750;color:var(--muted);line-height:1.25}
.rank-pack-copy em{font-style:normal;font-size:10.5px;font-weight:850;color:var(--faint)}
.rank-pack-cta{grid-column:2;justify-self:start;border-radius:var(--r-pill);padding:5px 9px;background:color-mix(in srgb,var(--rank) 18%,rgba(255,255,255,.05));color:color-mix(in srgb,var(--rank) 78%,#fff);font-size:10.5px;font-weight:900}
.rank-pack-card.locked .rank-pack-cta{color:var(--faint);background:rgba(255,255,255,.06)}
.rank-pack-sheet{display:grid;gap:12px}
.rank-pack-big{width:72px;height:72px;margin:0 auto;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--rank) 18%,#111720);border:1px solid color-mix(in srgb,var(--rank) 48%,transparent);box-shadow:0 16px 34px -26px var(--rank)}
.rank-pack-big span{font-family:var(--f-disp);font-size:34px;font-weight:950;color:var(--rank)}
.rank-pack-result{display:grid;place-items:center;gap:4px;padding:12px;border-radius:12px;background:rgba(255,200,61,.1);border:1px solid rgba(255,200,61,.24);text-align:center}
.rank-pack-result .chip-i{width:28px;height:28px}
.rank-pack-result b{font-family:var(--f-disp);font-size:19px;font-weight:950;color:#fff}
.rank-pack-result small{font-size:11px;font-weight:800;color:var(--faint)}
.rank-pack-subhead{margin:0;color:#fff;font-family:var(--f-disp);font-size:14px;font-weight:900}
.rank-pack-odds{margin:0;padding-left:18px;color:var(--muted);font-size:12px;font-weight:700;line-height:1.55}
.redeem-panel{background:linear-gradient(180deg,#131923,#10141c)}
.redeem-panel.locked{border-color:rgba(246,183,86,.22)}
.rdm-ac-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--f-disp);font-weight:850;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.rdm-avail{color:var(--muted);white-space:nowrap}
.rdm-ac-main{display:flex;align-items:baseline;gap:9px;margin:10px 0 4px}
.rdm-ac-main .bal-chip{width:27px;height:27px;align-self:center;flex:0 0 auto}
.rdm-ac-main b{font-family:var(--f-disp);font-weight:900;font-size:35px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.rdm-ac-usd{margin-left:auto;font-size:14px;font-weight:850;color:var(--success);white-space:nowrap}
.redeem-entry-card{background:linear-gradient(180deg,#131923,#10141c)}
.redeem-entry{display:grid;gap:10px}
.redeem-entry-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--f-disp);text-transform:uppercase;letter-spacing:.07em}
.redeem-entry-top b{font-size:11px;color:var(--faint);font-weight:900}
.redeem-entry-top small{font-size:11px;color:var(--muted);font-weight:900;white-space:nowrap}
.redeem-input-wrap{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:8px 8px 8px 13px;border-radius:13px;background:#0d131c;border:1px solid rgba(255,255,255,.1)}
.redeem-input-wrap:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,200,61,.12)}
.redeem-input-wrap .bal-chip{width:30px;height:30px}
.redeem-input-wrap input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#fff;font-family:var(--f-disp);font-weight:950;font-size:29px;line-height:1;font-variant-numeric:tabular-nums}
.redeem-input-wrap input::placeholder{color:rgba(255,255,255,.28)}
.redeem-input-wrap input:disabled{opacity:.5}
.redeem-max-btn{min-height:42px;border-radius:999px;padding:0 14px;background:rgba(255,200,61,.12);border:1px solid rgba(255,200,61,.28);color:var(--gold);font-family:var(--f-disp);font-weight:950;font-size:12px;cursor:pointer}
.redeem-max-btn:disabled{opacity:.45;cursor:not-allowed}
.redeem-empty{display:grid;gap:2px;margin-top:10px;padding:10px 11px;border-radius:10px;background:rgba(246,183,86,.08);border:1px solid rgba(246,183,86,.2)}
.redeem-empty b{font-family:var(--f-disp);font-size:13px;font-weight:900;color:var(--warning)}
.redeem-empty span{font-size:12px;font-weight:650;line-height:1.35;color:var(--muted)}
.redeem-btn:disabled{opacity:.48;filter:grayscale(.25);cursor:not-allowed}
.spd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.spd-btn{position:relative;min-width:0;min-height:68px;display:flex;flex-direction:column;align-items:center;gap:2px;justify-content:center;padding:9px 6px;border-radius:10px;background:#111720;border:1px solid rgba(255,255,255,.08);text-align:center;cursor:pointer}
.spd-turbo{padding-right:40px}
.spd-btn.on{border-color:var(--purple);background:rgba(139,92,255,.14);box-shadow:inset 0 0 0 1px rgba(139,92,255,.42)}
.spd-btn b{font-family:var(--f-disp);font-weight:900;font-size:13px}
.spd-btn small{font-size:10px;font-weight:850;color:var(--muted)}
.spd-btn .spd-eta{color:var(--faint);font-weight:700}
.spd-asset{width:20px;height:20px;object-fit:contain;display:block;margin-bottom:1px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.42)) drop-shadow(0 0 8px rgba(255,255,255,.12))}
.spd-turbo .spd-asset{position:absolute;right:14px;top:50%;width:23px;height:23px;margin:0;transform:translateY(-50%)}
.rdm-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rdm-method{display:flex;align-items:center;gap:10px;padding:11px;border-radius:10px;text-align:left;background:#111720;border:1px solid rgba(255,255,255,.08);transition:border-color .15s,background .15s,transform .1s}
.rdm-method:active{transform:scale(.99)}
.rdm-method.sel{border-color:var(--pc,var(--pink));background:color-mix(in srgb,var(--pc,var(--pink)) 13%,#111720);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc,var(--pink)) 68%,transparent)}
.rdm-m-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.05)}
.rdm-m-ic img{width:27px;height:27px;object-fit:contain;aspect-ratio:1/1;filter:drop-shadow(0 3px 5px rgba(0,0,0,.34))}
.rdm-m-tx{min-width:0}
.rdm-m-tx b{display:block;font-family:var(--f-disp);font-weight:900;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdm-m-tx small{display:block;font-size:10.5px;font-weight:850;color:var(--faint);letter-spacing:.03em}
.rdm-summary{background:#111720;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px 13px;display:grid;gap:7px}
.rdm-summary:empty{display:none}
.rdm-sum-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:650;color:var(--muted)}
.rdm-sum-row b{font-family:var(--f-disp);font-weight:900;color:var(--ink);text-align:right}
.rdm-sum-row.total{border-top:1px solid rgba(255,255,255,.08);padding-top:8px;margin-top:1px}
.rdm-sum-row.total b{color:var(--success)}
@media(max-width:390px){
  .wallet-seg button{font-size:11px}
  .faucet-action{grid-template-columns:48px minmax(0,1fr)}
  .faucet-btn{grid-column:2;grid-row:3;justify-self:start;margin-top:2px}
  .faucet-next{grid-column:2}
  .native-marks{flex-direction:column;gap:5px}.native-mark{height:28px;min-width:52px;font-size:12px}
  .deposit-groups,.method-grid,.crypto-grid,.deposit-method-grid,.rdm-method-grid{grid-template-columns:1fr}
  .deposit-method-head{display:grid;gap:3px}
  .deposit-method-head small{text-align:left}
}
/* ---- auth: clean loading state while Telegram sign-in resolves ---- */
.auth-loading{display:grid;place-items:center;gap:16px;color:var(--ink);text-align:center}
.auth-loading p{margin:0;font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--muted)}
.auth-spin{width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,.16);border-top-color:var(--pink);animation:authSpin .8s linear infinite}
@keyframes authSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.auth-spin{animation-duration:1.6s}}
/* review sheet */
.rv-list{display:flex;flex-direction:column;gap:9px;margin:6px 0 14px}
.rv-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;color:var(--muted)}
.rv-row b{font-family:var(--f-disp);color:var(--ink)}
.rv-row.total{border-top:1px solid var(--line-2);padding-top:11px;margin-top:2px;font-size:15px}
.rv-row.total b{color:var(--success)}
.rv-note{color:var(--faint);font-size:12px;font-weight:500;line-height:1.45;margin:0 0 14px}
.crypto-deposit-card{display:grid;gap:12px}
.crypto-deposit-loading{min-height:310px;align-content:start}
.crypto-deposit-loading .crypto-deposit-token{opacity:.88}
.crypto-deposit-token{display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px;background:linear-gradient(135deg,rgba(36,217,255,.08),rgba(139,92,255,.11));border:1px solid rgba(255,255,255,.1)}
.crypto-deposit-token .dep-pay-img{width:46px;height:46px;border-radius:14px}
.crypto-deposit-token .dep-pay-img img{width:31px;height:31px}
.crypto-deposit-token small,.crypto-address-box small,.crypto-deposit-meta small{display:block;color:var(--faint);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.crypto-deposit-token b{display:block;margin-top:2px;font-family:var(--f-disp);font-size:20px;font-weight:950;color:#fff}
.crypto-deposit-qr{display:grid;place-items:center;gap:8px;padding:14px;border-radius:15px;background:linear-gradient(180deg,#f8fbff,#dce8f7);border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 32px rgba(0,0,0,.22)}
.crypto-deposit-qr svg{width:184px;height:184px;display:block;border-radius:10px;background:#fff}
.crypto-qr-missing{width:184px;height:184px;border-radius:10px;background:#fff}
.crypto-deposit-qr small{color:#182235;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.crypto-deposit-qr em{font-size:12px;font-weight:800;color:#7b1f2e;font-style:normal}
.crypto-deposit-qr.qr-unavailable .crypto-qr-missing{display:none}
.crypto-address-box{display:grid;gap:9px;padding:12px;border-radius:13px;background:#111720;border:1px solid rgba(255,255,255,.1)}
.crypto-address-box.warn{border-color:rgba(255,200,61,.36);background:rgba(255,200,61,.06)}
.crypto-address-box code{display:block;max-width:100%;overflow-wrap:anywhere;word-break:break-word;padding:10px;border-radius:10px;background:#0b1018;border:1px solid rgba(255,255,255,.08);color:#eef6ff;font:800 12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.crypto-address-box .btn{justify-self:start}
.crypto-deposit-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.crypto-deposit-meta span{min-width:0;padding:10px;border-radius:11px;background:#151b25;border:1px solid rgba(255,255,255,.08)}
.crypto-deposit-meta b{display:block;font-family:var(--f-disp);font-size:15px;font-weight:950;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crypto-status{margin:0;padding:11px 12px;border-radius:11px;background:rgba(36,217,255,.08);border:1px solid rgba(36,217,255,.16);color:#dff8ff;font-size:12.5px;font-weight:850;line-height:1.35}
.crypto-deposit-skel-qr{height:218px;border-radius:15px;background-color:#111720;border:1px solid rgba(255,255,255,.08)}
.crypto-address-skel{gap:10px}
.crypto-skel-line{display:block;height:16px;border-radius:8px;width:100%}
.crypto-skel-line.short{width:34%;height:12px}
.crypto-skel-button{display:block;width:138px;height:43px;border-radius:11px}
@media(max-width:430px){.crypto-deposit-meta{grid-template-columns:1fr}.crypto-address-box .btn{width:100%}}
/* skeleton loaders */
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-hi) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:skelShimmer 1.4s ease infinite;border-radius:8px;display:block}
@keyframes skelShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.skel-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.skel-row{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.skel-ava{width:38px;height:38px;border-radius:11px;flex:0 0 auto}
.skel-lines{flex:1;display:flex;flex-direction:column;gap:7px}
.skel-line{height:11px;width:80%} .skel-line.short{width:45%}
.reel-skel{position:relative;height:calc(100% - 8px);border-radius:var(--r-lg);overflow:hidden;background:#0c0e14;border:1px solid var(--line)}
.skel-reel{position:absolute;inset:0;border-radius:0}
.reel-skel-foot{position:absolute;left:14px;right:60px;bottom:18px;display:flex;gap:11px;align-items:center;z-index:1}
.reel-skel-foot .skel-ava{width:42px;height:42px;border-radius:13px}
/* error card + fatal overlay */
.err-card{max-width:360px;margin:40px auto;text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px}
.err-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:rgba(255,93,115,.14);color:var(--error);font-family:var(--f-disp);font-weight:800;font-size:26px}
.err-ic svg{width:24px;height:24px;fill:var(--error)}
.err-card h2{font-family:var(--f-disp);font-weight:700;font-size:19px;margin:0 0 8px}
.err-card p{color:var(--muted);font-size:13.5px;font-weight:500;line-height:1.5;margin:0 0 14px}
.err-code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;color:var(--gold);background:var(--surface-3);border:1px solid var(--line);border-radius:8px;padding:7px 12px;margin-bottom:16px;letter-spacing:.5px}
.err-actions{display:flex;gap:10px}.err-actions .btn{flex:1}
#lbErrOverlay{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(7,9,14,.92);backdrop-filter:blur(6px)}
#lbErrOverlay.show{display:flex}
#lbErrOverlay .err-card{margin:0}
.toggle{width:46px;height:27px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;flex:0 0 auto;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle.on{background:var(--grad-cta)}
.toggle.on::after{transform:translateX(19px)}
@media(min-width:680px){.cr-grid{grid-template-columns:repeat(3,1fr)}.inv-grid{grid-template-columns:repeat(4,1fr)}}

/* =====================================================================
   V2 PATCH 3 — live-bets, deposit, profile
   ===================================================================== */
/* live bets: avatars, white icons, neutral panel */
.livebets{background:var(--surface) !important;border:1px solid var(--line) !important}
.lbx-ava{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:0;background:none}
.lbx-user{cursor:pointer}
.lbx-gico{width:26px;height:26px;object-fit:contain;flex:0 0 auto;filter:brightness(0) invert(1);opacity:.95;background:none !important;border:0 !important;padding:0 !important}
@media(max-width:412px){.lbx-ava{width:26px;height:26px}.lbx-gico{width:23px;height:23px}}


/* profile actions */
.prof-badge{font-size:11px;font-weight:800;color:var(--green);background:rgba(55,245,160,.12);padding:2px 8px;border-radius:99px}
.prof-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prof-act{display:flex;align-items:center;gap:11px;padding:15px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-family:var(--f-disp);font-weight:600;font-size:14px;color:#fff;text-align:left}
.prof-act .pa-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,77,184,.12);flex:0 0 auto}
.prof-act .pa-ic svg{width:19px;height:19px;fill:var(--pink-2)}

/* coming soon */
.soon-cover{width:150px;height:200px;border-radius:18px;margin:0 auto 16px;background-size:cover;background-position:center;
  border:1.5px solid color-mix(in srgb,var(--accent,#ff4db8) 60%,transparent);box-shadow:0 18px 40px -16px color-mix(in srgb,var(--accent,#ff4db8) 70%,#000)}

/* premium 3D utility icons (More tab / menu / profile / headers) */
.uic{width:24px;height:24px;object-fit:contain;object-position:center;vertical-align:middle;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.mi .uic{width:28px;height:28px}
.pa-ic .uic{width:23px;height:23px}
.hi .uic{width:23px;height:23px;vertical-align:-5px}
.set-ic .uic,.am-ic .uic{width:27px;height:27px}

.lbx-game[data-game]{cursor:pointer}
.lbx-game[data-game]:hover b{color:#fff}

/* ===================== SECTION A — Economy / Rank / VIP ===================== */
.bp-xp{padding:11px 13px 13px;border-top:1px solid var(--line-2);margin-top:4px}
.bp-xp-top{display:flex;align-items:center;gap:7px;font-family:var(--f-disp);font-weight:600;font-size:13px}
.bp-xp-top img{width:18px;height:18px;object-fit:contain}
.bp-xp-top span{margin-left:auto;color:var(--gold);font-weight:800}
.bp-xp small{display:block;margin-top:6px;color:var(--muted);font-size:11px;font-weight:600}
.bp-xp .bar{margin-top:7px}

.rewards-copy{margin:14px 2px 4px;color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.5}
.vip-link{justify-content:center;display:flex;align-items:center;gap:6px}
.vip-link .bi svg{width:15px;height:15px;vertical-align:middle}

.vipb-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 4px;border-radius:16px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.vipb{width:100%;border-collapse:collapse;font-size:12px;min-width:430px}
.vipb th,.vipb td{padding:9px 6px;text-align:center;border-bottom:1px solid rgba(255,255,255,.07)}
.vipb thead th{position:sticky;top:0;background:var(--surface-2);font-family:var(--f-disp);font-weight:600}
.vipb th span{display:block;font-size:10.5px;margin-top:3px;letter-spacing:.02em}
.vipb-rk{width:28px;height:28px;object-fit:contain;object-position:center;display:block;margin:0 auto;padding:2px;box-sizing:border-box;overflow:visible}
.vipb-name{text-align:left!important;white-space:nowrap;padding-left:12px!important}
.vipb th.vipb-name{color:#fff;font-weight:700}
.vipb td.vipb-name{color:rgba(255,255,255,.86);font-weight:600;font-size:11.5px}
.vipb .cur{background:rgba(255,211,78,.10)}
.vipb thead th.cur{background:rgba(255,211,78,.16);box-shadow:inset 0 -2px 0 var(--gold)}
.vipb-yes{color:var(--gold)}
.vipb-yes svg{width:15px;height:15px;vertical-align:middle}
.vipb-no{color:rgba(255,255,255,.28)}
.vipb tbody tr:last-child td{border-bottom:none}

.rankup-card{margin-top:14px;padding:14px}
.ru-head{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:600;margin-bottom:11px}
.ru-head .hi svg{width:18px;height:18px}
.ru-body{display:flex;gap:10px;flex-wrap:wrap}
.ru-chips,.ru-pack{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);border-radius:12px;padding:9px 12px;font-weight:700;font-size:13px;text-transform:capitalize}
.ru-pack img{width:26px;height:26px;object-fit:contain}

/* VIP levels accordion (per-tier dropdown of sublevels) */
.vip-levels{display:flex;flex-direction:column;gap:10px}
.vlt{background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
.vlt-head{width:100%;display:flex;align-items:center;gap:11px;padding:14px;background:none;border:none;
  color:#fff;font-family:var(--f-disp);font-weight:600;font-size:16px;cursor:pointer;text-align:left}
.vlt-rk{width:34px;height:34px;object-fit:contain;object-position:center;flex:0 0 auto;display:block;padding:2px;box-sizing:border-box;overflow:visible}
.vlt-badge{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);
  background:rgba(255,211,78,.16);border-radius:99px;padding:3px 8px}
.lb-lock-ic{width:18px;height:18px;object-fit:contain;display:inline-block;vertical-align:-4px}
.vlt-state .lb-lock-ic{width:20px;height:20px;vertical-align:0}
.vlt-done .lb-lock-ic{width:16px;height:16px;vertical-align:-3px;margin-right:3px}
.vlt-state{margin-left:auto;display:grid;place-items:center;color:rgba(255,255,255,.3)}
.vlt-state.on{color:#36d399}
.vlt-state svg{width:18px;height:18px}
.vlt-chev{width:20px;height:20px;flex:0 0 auto;color:var(--muted);transition:transform .25s}
.vlt.open .vlt-chev{transform:rotate(180deg)}
.vlt-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.vlt.open .vlt-body{max-height:480px}
.vlt-row{display:grid;grid-template-columns:1.25fr .75fr 1fr;align-items:center;gap:8px;
  min-height:50px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.06);overflow:visible}
.vlt-row.cur{background:rgba(255,211,78,.10)}
.vlt-lvl{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;line-height:1.2;overflow:visible;min-width:0}
.vlt-lvl img{width:28px;height:28px;object-fit:contain;object-position:center;display:block;padding:2px;box-sizing:border-box;flex:0 0 auto;overflow:visible}
.vlt-xp{font-weight:700;font-size:13px;color:var(--muted)}
.vlt-done{display:flex;align-items:center;gap:5px;font-weight:700;font-size:12px;justify-content:flex-end}
.vlt-done svg{width:15px;height:15px}
.vlt-done.yes{color:#36d399}
.vlt-done.no{color:rgba(255,255,255,.4)}

/* ===================== SECTION F — Promo redeem box ===================== */
.promo-box{padding:14px;margin-bottom:14px}
.promo-head{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-weight:600;margin-bottom:10px}
.promo-head .bi svg{width:17px;height:17px;vertical-align:middle}
.promo-row{display:flex;gap:8px}
.promo-row input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:12px;
  padding:11px 13px;color:#fff;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.promo-row input::placeholder{color:rgba(255,255,255,.4);text-transform:none;letter-spacing:normal;font-weight:600}
.promo-row input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,211,78,.18)}
.promo-row .btn{white-space:nowrap}
.promo-msg{min-height:16px;margin-top:9px;font-size:12.5px;font-weight:700}
.promo-msg.ok{color:#36d399}
.promo-msg.err{color:#ff6b8b}

/* ===================== SECTION B — Tasks ===================== */


/* ===================== Feed (creator video posts) ===================== */
.feed-seg{margin-bottom:14px}
.vbadge{font-size:9.5px;font-weight:800;color:#24D9FF;background:rgba(36,217,255,.14);border-radius:99px;padding:2px 7px;display:inline-flex;align-items:center;gap:3px}
.vbadge svg{width:11px;height:11px}
.vpa{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;padding:5px 8px;border-radius:10px}
.vpa svg{width:19px;height:19px}
.vpa.liked{color:var(--pink)}.vpa.liked svg{fill:var(--pink)}
.feed-state{padding:22px;text-align:center}
.feed-state b{display:block;font-family:var(--f-disp);font-size:17px;margin-bottom:6px}
.feed-state small{display:block;color:var(--muted);font-size:13px;font-weight:600;line-height:1.45}
.cr-offers{display:flex;flex-wrap:wrap;gap:8px}
.cr-offer{background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:99px;padding:7px 13px;font-weight:700;font-size:12.5px;text-transform:capitalize}

/* ===================== Feed reels (TikTok-style vertical scroll) ===================== */
.feed-screen{position:fixed;z-index:40;left:0;right:0;max-width:var(--maxw);margin-inline:auto;display:flex;flex-direction:column;
  top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));
  bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(8,2,15,.96),rgba(14,4,25,.82) 42%,rgba(4,8,19,.9))}
.feed-top{display:flex;align-items:center;gap:8px;padding:7px 10px 8px;flex:0 0 auto;
  background:linear-gradient(180deg,rgba(8,2,15,.92),rgba(8,2,15,.38));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.feed-top .feed-seg{flex:1;margin:0}
.feed-top .seg{padding:4px;border-radius:12px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.08)}
.feed-top .seg button{height:35px;border-radius:9px;font-size:12.5px;font-weight:800}
.nsfw-toggle{height:43px;flex:0 0 auto;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:0 12px;color:rgba(255,255,255,.66);font-weight:800;font-size:11.5px;cursor:pointer;white-space:nowrap}
.nsfw-toggle .nsfw-dot{width:9px;height:9px;border-radius:50%;background:var(--faint);transition:.2s}
.nsfw-toggle.on{color:#fff;border-color:var(--pink);background:rgba(255,77,184,.12)}
.nsfw-toggle.on .nsfw-dot{background:var(--pink)}
.reels{flex:1;min-height:0;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;padding:0 10px 6px;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;height:calc(100% - 8px);scroll-snap-align:start;scroll-snap-stop:always;border-radius:18px;overflow:hidden;margin-bottom:8px;
  background:#0c0e14;border:1px solid var(--line);box-shadow:var(--sh-lg)}
.reel::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);pointer-events:none}
.reel-bg{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(78% 56% at 50% 38%,color-mix(in srgb,var(--accent) 42%,transparent),transparent)}
.reel-bg.nsfw{filter:blur(30px) saturate(.7);transform:scale(1.1)}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050208;filter:saturate(1.04) contrast(1.02)}
.reel-video.nsfw{filter:blur(30px) saturate(.7);transform:scale(1.1)}
.reel-play{width:76px;height:76px;opacity:.92}
.reel-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,2,10,.9) 0%,rgba(4,2,10,.62) 24%,transparent 56%),linear-gradient(to bottom,rgba(4,2,10,.34),transparent 20%);pointer-events:none}
.reel-status{display:grid;place-items:center;background:var(--surface)}
.feed-state{text-align:center;padding:26px 20px;max-width:80%}
.feed-state b{font-family:var(--f-disp);font-size:16px;display:block;margin-bottom:6px}
.feed-state small{color:var(--muted);font-weight:600}
.reel-reveal{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:20px 26px;color:#fff;font-weight:800;font-size:15px;cursor:pointer;z-index:3}
.reel-reveal .rv-ic svg{width:26px;height:26px;fill:#fff;margin-bottom:5px}
.reel-reveal small{color:rgba(255,255,255,.72);font-weight:600;font-size:12px}
.reel-rail{position:absolute;right:10px;bottom:116px;display:flex;flex-direction:column;gap:14px;z-index:2}
.rr-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:#fff;font-weight:800;font-size:11px;cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.rr-ic{width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.13);display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rr-ic svg{width:25px;height:25px;fill:#fff}
.rr-btn.liked .rr-ic svg{fill:var(--pink)}
.rr-ava-wrap{padding:0;overflow:hidden;border:2px solid #fff;background:none}
.rr-ava{width:100%;height:100%;object-fit:cover}
.reel-info{position:absolute;left:13px;right:70px;bottom:15px;z-index:2}
.reel-who{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.reel-who img{width:38px;height:38px;border-radius:12px;object-fit:cover;border:2px solid #fff}
.reel-who b{font-family:var(--f-disp);font-weight:700;font-size:15px}
.reel-who .vbadge{padding:3px;border-radius:50%}.reel-who .vbadge svg{width:12px;height:12px}
.reel-follow{margin-left:2px;background:var(--pink);color:#fff;border:none;border-radius:var(--r-pill);padding:6px 14px;font-weight:800;font-size:11.5px;cursor:pointer}
.reel-follow.on{background:rgba(255,255,255,.18)}
.reel-cap{font-weight:700;font-size:13.5px;line-height:1.35;margin-bottom:8px;text-shadow:0 1px 5px rgba(0,0,0,.72);max-height:4.1em;overflow:hidden}
.reel-dur{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.44);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:6px 9px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.reel-dur svg{width:13px;height:13px;fill:currentColor}
@media(max-width:390px){
  .feed-top{padding-left:8px;padding-right:8px}
  .feed-top .seg button{font-size:11.5px}
  .nsfw-toggle{padding:0 9px;font-size:10.8px}
  .reels{padding-left:8px;padding-right:8px}
  .reel-rail{right:8px}
  .reel-info{left:11px;right:64px}
}

/* ===================== SECTION J — Accessibility ===================== */
/* visible keyboard focus on every interactive element */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #7CC6FF;outline-offset:2px;border-radius:12px}
.botnav button:focus-visible{outline-offset:-3px}
/* losing payouts/mults stay white (owner preference), bright enough for contrast */
.lbx-pay.lose,.tx-amt.lose{color:rgba(255,255,255,.86)}
.lbx-mult.down .trend{color:rgba(159,169,187,.78)}
/* screen-reader-only utility */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* respect the user's reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero-coins,#splash .splash-bar i{animation:none!important}
}

/* ============ batch: hero / creator profile / DM / notifications / desktop ============ */
/* hero: smaller */
.hero{padding:15px 17px}
.hero-text{position:relative;z-index:1;max-width:74%}
.hero h1{font-size:clamp(21px,5.4vw,30px);margin:5px 0 6px}
.hero p{font-size:13px;margin:0 0 13px;max-width:40ch}
.hero-coins{width:96px;height:96px}

/* creator profile sheet */
.creator-cover{position:relative;height:94px;border-radius:18px;margin-bottom:40px;background:linear-gradient(135deg,var(--accent,#ff4db8),#0d0420)}
.creator-ava{position:absolute;left:50%;bottom:-32px;transform:translateX(-50%);width:78px;height:78px;border-radius:22px;object-fit:cover;border:3px solid var(--surface);box-shadow:0 8px 22px -6px #000}
.creator-id{text-align:center;margin-bottom:13px}
.creator-id h2{font-family:var(--f-disp);font-weight:700;font-size:21px;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.creator-handle{color:var(--muted);font-weight:600;font-size:13px;margin-top:3px}
.creator-stats{display:flex;justify-content:center;gap:9px;margin-bottom:14px}
.creator-stats div{flex:1;text-align:center;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:14px;padding:10px 6px}
.creator-stats b{font-family:var(--f-disp);font-weight:700;font-size:16px;display:block}
.creator-stats small{color:var(--muted);font-size:11px;font-weight:600}
.creator-actions{display:flex;gap:10px;margin-bottom:8px}
.creator-actions .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.creator-actions .cr-followbtn{background:var(--grad-cta);color:#fff}
.creator-actions .bi svg{width:16px;height:16px;vertical-align:middle}
.creator-offers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.creator-offer{display:flex;flex-direction:column;align-items:flex-start;gap:5px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:15px;padding:13px;cursor:pointer;text-align:left}
.creator-offer:active{transform:scale(.98)}
.creator-offer .co-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(255,77,184,.16);color:var(--pink)}
.creator-offer .co-ic svg{width:19px;height:19px}
.creator-offer b{font-weight:700;font-size:14px}
.creator-offer small{color:var(--muted);font-size:11px;font-weight:600}
.creator-note{color:var(--muted);font-size:12.5px;font-weight:600;margin:14px 2px 0;line-height:1.5}

/* DM thread */
.dm-head{display:flex;align-items:center;gap:10px}
.dm-head h3{flex:1}
.dm-back{background:none;border:none;color:#fff;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.dm-back svg{width:22px;height:22px;transform:scaleX(-1)}
.dm-ava{width:34px;height:34px;border-radius:11px;object-fit:cover;flex:0 0 auto}
.dm-thread{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow-y:auto;padding:14px 2px}
.dm-msg{display:flex;gap:8px;align-items:flex-end;max-width:82%}
.dm-msg.me{align-self:flex-end;flex-direction:row-reverse}
.dm-msg img{width:28px;height:28px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.dm-bub{padding:10px 13px;border-radius:16px;font-weight:600;font-size:14px;line-height:1.4;background:rgba(255,255,255,.08)}
.dm-msg.me .dm-bub{background:var(--grad-cta);color:#fff}
.dm-compose{display:flex;gap:8px;margin-top:10px}
.dm-compose input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;color:#fff;font-weight:600;font-size:14px}
.dm-compose input:focus{outline:none;border-color:var(--pink)}
.dm-send{flex:0 0 auto;width:46px;border:none;border-radius:14px;background:var(--grad-cta);color:#fff;cursor:pointer;display:grid;place-items:center}
.dm-send svg{width:20px;height:20px;fill:#fff}

/* inbox chrome (tools/categories); card styles live with .notif above */
.notif-tools{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.notif-pill{font-weight:800;font-size:12px;color:var(--pink);background:rgba(255,77,184,.14);border-radius:99px;padding:5px 11px}
.notif-pill.muted{color:var(--muted);background:rgba(255,255,255,.06)}
.notif-readall{background:none;border:none;color:var(--cyan);font-weight:700;font-size:12.5px;cursor:pointer;min-height:34px}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--nc,var(--pink));box-shadow:0 0 8px color-mix(in srgb,var(--nc,var(--pink)) 60%,transparent)}
.notif-empty{padding:22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.05);color:var(--muted);font-weight:800;text-align:center}

/* launch auth */
html.lb-auth-locked-root,
body.lb-auth-locked{overflow:hidden;overscroll-behavior:none}
body.lb-auth-locked{touch-action:none}
.lb-auth-locked .topbar,
.lb-auth-locked .botnav,
.lb-auth-locked .sidebar,
.lb-auth-locked .stage,
.lb-auth-locked .site-footer,
.lb-auth-locked .chat-dock,
.lb-auth-locked .desktop-panel{filter:blur(1.6px);opacity:.74;pointer-events:none;user-select:none}
.lb-auth-locked .balance-pop{display:none!important}
.auth-overlay{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:18px 14px;overflow:hidden;background:rgba(2,5,10,.06);pointer-events:auto;overscroll-behavior:contain;touch-action:none}
.auth-overlay[hidden]{display:none!important}
.auth-screen{width:100%;height:100dvh;min-height:0;display:grid;place-items:center;padding:0!important;overflow:hidden;pointer-events:none}
.auth-panel{--auth-card-signup-h:502px;position:relative;z-index:2;width:min(100%,376px);height:min(var(--auth-card-signup-h), calc(100dvh - 36px));max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;align-content:start;gap:10px;padding:13px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:linear-gradient(180deg,rgba(20,24,33,.97),rgba(8,11,17,.97));box-shadow:0 18px 58px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.04) inset;text-align:left;pointer-events:auto;touch-action:pan-y;animation:authModeFade .14s ease-out}
@keyframes authModeFade{from{opacity:.985}to{opacity:1}}
/* signup has an extra field (username) + terms — give it more height so the bottom
   (social buttons) isn't clipped and no scroll is needed. Login keeps its shorter height. */
.auth-panel.auth-signup{--auth-card-signup-h:560px}
.auth-native::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 8px 8px;background:var(--pink);box-shadow:0 0 18px rgba(255,77,184,.18);pointer-events:none}
.auth-native-head{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;min-height:46px}
.auth-logo{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.42))}
.auth-native-head div{display:grid;gap:2px;min-width:0}
.auth-native-head span{color:var(--pink-2);font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}
.auth-native-head b{color:#fff;font:900 17px/1.02 var(--f-disp);letter-spacing:0}
.auth-native-copy{display:grid;gap:4px;min-height:29px;align-items:center;padding:1px 0 0}
.auth-native-copy h1{margin:0;color:#fff;font:900 clamp(21px,5.15vw,22px)/1.02 var(--f-disp);letter-spacing:0;white-space:nowrap}
.auth-native-copy p{margin:0;color:rgba(244,246,251,.7);font-size:12.5px;font-weight:800;line-height:1.3}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.auth-tabs button{height:44px;min-height:44px;display:grid;place-items:center;line-height:1;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);color:rgba(244,246,251,.74);border-radius:12px;padding:8px 4px;font:950 13px/1 var(--f-body);cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.auth-tabs button.active{border-color:rgba(255,77,184,.62);background:rgba(255,77,184,.12);color:#fff;box-shadow:0 10px 24px rgba(255,77,184,.08)}
.auth-tabs button:focus-visible,.auth-google-btn:focus-visible,.auth-primary:focus-visible,.auth-check a:focus-visible,.auth-forgot:focus-visible,.auth-social-btn:focus-visible,.auth-eye:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.auth-google-btn{height:44px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid rgba(244,246,251,.82);border-radius:12px;background:rgba(8,11,20,.58);color:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.2);transition:filter .2s,border-color .2s,background .2s}
.auth-google-btn span{width:20px;height:20px;display:grid;place-items:center}
.auth-google-btn b{font:900 13px/1 var(--f-body)}
.auth-form{display:grid;gap:8px;margin:0}
.auth-divider{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;color:rgba(244,246,251,.48);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:rgba(255,255,255,.1)}
.auth-field{display:grid;gap:4px;text-align:left}
.auth-field>span:first-child{font-size:10px;color:rgba(244,246,251,.58);font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.auth-field input{width:100%;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.055);color:#fff;padding:0 12px;font:800 14px/1 var(--f-body);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.auth-password-wrap{position:relative;display:block}
.auth-password-wrap input{padding-right:48px}
.auth-eye{position:absolute;right:8px;top:50%;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:rgba(244,246,251,.74);transform:translateY(-50%);transition:background .2s,color .2s}
.auth-eye svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auth-eye:hover{background:rgba(255,255,255,.08);color:#fff}
.auth-field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(36,217,255,.14);background:rgba(255,255,255,.075)}
.auth-forgot{min-height:34px;display:flex;align-items:flex-end;justify-self:end;margin-top:-6px;color:#fff;font-weight:900;font-size:13px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.auth-check{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;color:rgba(244,246,251,.64);font-weight:800;font-size:10.5px;line-height:1.3;text-align:left}
.auth-check input{width:17px;height:17px;margin:0;accent-color:var(--pink)}
.auth-check a{color:var(--pink-2);font:inherit;font-weight:1000;text-decoration:underline;text-underline-offset:2px}
.auth-primary{height:46px;border:0;border-radius:13px;background:linear-gradient(135deg,#ff5cc0,#b455f0);color:#fff;font:1000 14.5px/1 var(--f-body);cursor:pointer;box-shadow:0 14px 30px -10px rgba(255,77,184,.55);transition:filter .2s,transform .2s}
.auth-login .auth-signup-only,.auth-login .auth-signup-action{display:none}
.auth-signup .auth-login-action{display:none}
.auth-social-login{display:grid;gap:10px}
.auth-social-divider{display:grid;place-items:center;color:rgba(244,246,251,.8);font-size:14px;font-weight:700}
.auth-social-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.auth-social-btn{height:54px;min-width:0;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.auth-social-btn svg{width:20px;height:20px}
.auth-social-btn b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-google-btn:hover{border-color:#fff;background:rgba(244,246,251,.08)}
.auth-primary:hover{filter:brightness(1.04)}
.auth-google-btn:active,.auth-primary:active,.auth-social-btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
  .auth-panel{animation:none}
}

/* ===== DESKTOP (sidebar + wide layout) ===== */
.sidebar{display:none}
.chat-dock{display:none}
.desktop-panel{display:none}
.tb-brand-word{display:none}
@media (min-width:1080px){
  :root{--sidebar-open-w:188px;--sidebar-closed-w:64px;--sidebar-w:var(--sidebar-open-w);--chat-dock-w:360px;--panel-w:min(520px,calc(100vw - var(--sidebar-w) - 76px))}
  body.lb-sidebar-collapsed{--sidebar-w:var(--sidebar-closed-w)}
  .sidebar{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:95;
    padding:14px 10px;gap:8px;background:#1a1a1c;border-right:1px solid rgba(255,255,255,.1);overflow:hidden;
    transition:width .24s cubic-bezier(.22,1,.36,1),padding .24s cubic-bezier(.22,1,.36,1)}
  .sb-head{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:56px;flex:0 0 auto;margin:0 -10px 12px;padding:0 10px;border-bottom:1px solid var(--line)}
  .sb-toggle{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;border-radius:0;color:#d8dbea;background:transparent;border:0;box-shadow:none;transition:color .18s,transform .18s}
  .sb-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round}
  .sb-toggle:hover{color:#fff;transform:scale(1.04)}
  .sb-toggle:focus,.sb-toggle:focus-visible{outline:none}
  .sb-logo{display:none}
  .sb-logo .lb-logo-button{width:34px;height:34px;min-width:34px;min-height:34px;border-radius:10px}
  .sb-word{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-disp);font-weight:800;font-size:12px;letter-spacing:.06em;transition:opacity .18s}
  .sb-search{height:42px;display:flex;align-items:center;gap:9px;margin:2px 0 6px;padding:0 11px;border-radius:12px;background:#06080d;border:1px solid rgba(255,255,255,.12);color:rgba(232,235,244,.72);overflow:hidden;flex:0 0 auto;
    transition:height .22s cubic-bezier(.22,1,.36,1),margin .22s cubic-bezier(.22,1,.36,1),padding .22s cubic-bezier(.22,1,.36,1),opacity .16s ease,transform .22s cubic-bezier(.22,1,.36,1),border-color .18s,box-shadow .18s}
  .sb-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:0 0 auto}
  .sb-search input{min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:#fff;font:700 13px var(--f-body)}
  .sb-search input::placeholder{color:rgba(232,235,244,.48)}
  .sb-search:focus-within{border-color:rgba(139,92,255,.45);box-shadow:0 0 0 3px rgba(139,92,255,.12)}
  .sb-nav{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow-y:auto;padding:5px 0 12px}
  .sb-nav button{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:13px;width:100%;min-height:46px;padding:6px 10px 6px 13px;border-radius:10px;background:none;border:1px solid transparent;cursor:pointer;
    color:rgba(232,235,244,.74);font-family:var(--f-disp);font-weight:750;font-size:12px;line-height:1;text-align:left;
    transition:background .18s,color .18s,border-color .18s,box-shadow .18s,padding .24s cubic-bezier(.22,1,.36,1),grid-template-columns .24s cubic-bezier(.22,1,.36,1),width .24s cubic-bezier(.22,1,.36,1)}
  .sb-nav button::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 6px 6px 0;background:var(--purple);opacity:0;transition:opacity .18s ease}
  .sb-nav button b{display:block;min-width:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transition:opacity .16s ease,max-width .22s cubic-bezier(.22,1,.36,1)}
  .sb-nav button:hover{background:rgba(139,92,255,.045);border-color:transparent;color:var(--purple-2)}
  .sb-nav button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
  .sb-nav button:hover::before,.sb-nav button.is-active::before{opacity:1}
  .sb-nav button.is-active{background:rgba(139,92,255,.035);border-color:transparent;color:var(--purple-2);box-shadow:none}
  .sb-nav button.is-locked{opacity:.48}
  .sb-nav button.is-locked:hover{color:rgba(232,235,244,.74);background:none}
  .sb-ico{position:relative;width:26px;height:26px;display:grid;place-items:center;flex:0 0 auto}
  .sb-ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.38));transition:opacity .16s ease}
  .sb-ico-purple{opacity:0}
  .sb-nav button:hover .sb-ico-base,.sb-nav button.is-active .sb-ico-base{opacity:0}
  .sb-nav button:hover .sb-ico-purple,.sb-nav button.is-active .sb-ico-purple{opacity:1}
  .sb-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  body.lb-sidebar-collapsed .sidebar{padding:14px 8px}
  body.lb-sidebar-collapsed .sb-head{justify-content:flex-start}
  body.lb-sidebar-collapsed .sb-toggle{background:transparent;color:#fff}
  body.lb-sidebar-collapsed .sb-search{height:0;margin:0;padding-top:0;padding-bottom:0;border-width:0;border-color:transparent;opacity:0;pointer-events:none;transform:translateY(-6px)}
  body.lb-sidebar-collapsed .sb-nav{align-items:center}
  body.lb-sidebar-collapsed .sb-nav button{width:46px;grid-template-columns:26px 0;min-height:46px;justify-content:center;padding:5px;gap:0}
  body.lb-sidebar-collapsed .sb-nav button b{max-width:0;opacity:0;pointer-events:none}

  .botnav{display:none}
  .topbar{left:var(--sidebar-w);right:0;max-width:none;margin:0;height:calc(var(--topbar-h) + env(safe-area-inset-top,0px));gap:12px;justify-content:flex-start;
    padding:12px max(24px,calc((100% - 1560px)/2 + 24px));transition:left .24s cubic-bezier(.22,1,.36,1),right .24s cubic-bezier(.22,1,.36,1)}
  .tb-home{display:flex;align-items:center;gap:12px;width:auto;min-width:204px;height:50px;padding:0;border-radius:0;background:transparent;border:0;cursor:pointer}
  .tb-home .lb-logo-button{width:39px;height:39px;min-width:39px;min-height:39px}
  .tb-brand-word{display:block;font-family:var(--f-disp);font-weight:850;font-size:14px;letter-spacing:.07em;white-space:nowrap;color:#fff}
  .tb-wallet{margin-left:auto}
  .tb-balance{flex:0 0 auto;width:auto;min-width:190px;max-width:280px}
  .stage{max-width:none;margin:0 0 0 var(--sidebar-w);padding:0;transition:margin .24s cubic-bezier(.22,1,.36,1)}
  .screen-inner{width:100%;max-width:min(1560px,100%);margin-inline:auto;padding:12px 24px 60px}
  .game-screen{max-width:min(1360px,100%);padding-top:28px;gap:22px}
  .game-frame{height:clamp(620px,calc(100vh - 168px),760px);min-height:620px}
  .game-info-title{padding:20px 24px}
  .game-info-body{padding:18px 24px 24px}
  .game-more-row{grid-auto-columns:150px}
  .feed-screen{left:var(--sidebar-w);right:0;max-width:none;top:74px;bottom:0;transition:left .24s cubic-bezier(.22,1,.36,1),right .24s cubic-bezier(.22,1,.36,1)}
  .chat-screen{left:var(--sidebar-w);right:0;max-width:760px;margin-inline:auto;top:74px;bottom:0}
  .feed-screen .feed-top,.feed-screen .reels{max-width:560px;margin-inline:auto;width:100%}
  .site-footer{margin-left:var(--sidebar-w);transition:margin .24s cubic-bezier(.22,1,.36,1)}
  .sheet-card{max-width:480px;margin-inline:auto}
  .balance-pop{left:auto;right:32px;transform:translateY(-8px) scale(.96)}
  .balance-pop.open{transform:translateY(0) scale(1)}
  body.lb-chat-docked .balance-pop{right:calc(var(--chat-dock-w) + 32px)}
  .chat-dock{position:fixed;top:0;right:0;bottom:0;width:var(--chat-dock-w);z-index:96;display:none;background:#1a1a1c;border-left:1px solid rgba(255,255,255,.1);border-radius:0;box-shadow:-18px 0 54px -34px rgba(0,0,0,.82);overflow:hidden}
  body.lb-chat-docked .chat-dock{display:block}
  body.lb-chat-docked .topbar{right:var(--chat-dock-w)}
  body.lb-chat-docked .stage{margin-right:var(--chat-dock-w)}
  body.lb-chat-docked .feed-screen{right:var(--chat-dock-w)}
  body.lb-chat-docked .site-footer{margin-right:var(--chat-dock-w)}
  .chat-dock .chat-screen{position:static;inset:auto;max-width:none;width:100%;height:100%;margin:0;padding:0 16px 16px;background:transparent}
  .chat-dock .chat-head{min-height:70px;margin:0 -16px 10px;padding:0 14px 0 16px;border-bottom:1px solid var(--line);background:transparent}
  .chat-dock .chat-head h2{font-size:21px}
  .chat-dock .chat-online{font-size:12px}
  .chat-dock .chat-rules-btn{margin-left:0}
  .chat-dock .chat-close-btn{display:grid;place-items:center;margin-left:auto}
  .chat-dock .chat-feed{gap:12px;padding:4px 2px 12px}
  .chat-dock .msg-body{-webkit-line-clamp:unset;display:block;font-size:13.5px}
  .chat-dock .emoji-panel{max-height:210px}
  .desktop-panel{display:block;visibility:hidden;position:fixed;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + 10px);right:16px;bottom:16px;width:var(--panel-w);z-index:88;opacity:0;pointer-events:none;transform:translateX(24px);
    background:linear-gradient(180deg,rgba(20,26,38,.98),rgba(9,13,20,.98));border:1px solid rgba(255,255,255,.11);border-radius:18px;box-shadow:-22px 24px 70px -34px rgba(0,0,0,.82);overflow:hidden;
    transition:opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility .2s}
  body.lb-panel-open .desktop-panel{visibility:visible;opacity:1;pointer-events:auto;transform:none}
  .desktop-panel-head{height:62px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
  .desktop-panel-head h2{margin:0;flex:1;font-family:var(--f-disp);font-weight:850;font-size:18px;color:#fff}
  .desktop-panel-close{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-weight:900;color:var(--muted)}
  .desktop-panel-close:hover{background:rgba(255,255,255,.11);color:#fff}
  .desktop-panel-body{height:calc(100% - 62px);overflow-y:auto;overscroll-behavior:contain}
  .desktop-panel .screen-inner{max-width:none;width:100%;padding:16px 16px 28px}
  .desktop-panel .sect-head{margin-top:0}
  .desktop-panel .screen-inner>.sect-head:first-child{display:none}
  .desktop-panel .inv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .desktop-panel .tx-page,.desktop-panel .wallet-screen{padding-top:16px}
  .desktop-panel .site-footer{display:none}
  .screen-inner.wallet-screen{max-width:min(1180px,calc(100% - 48px));padding-top:18px;padding-bottom:72px}
  .wallet-screen .wallet-title{margin-bottom:12px}
  .wallet-screen .wallet-seg{max-width:860px;margin-bottom:16px}
  .wallet-screen .wbody{gap:16px}
  .wallet-screen .wallet-panel{padding:16px}
  .wallet-screen .buy-panel{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:14px;align-items:start}
  .wallet-screen .buy-gets{display:flex;flex-wrap:wrap;align-content:start;gap:8px;margin-top:0}
  .wallet-screen .buy-get,.wallet-screen .buy-bonus{width:max-content;max-width:100%;justify-self:start;padding-inline:11px 14px}
  .wallet-screen .buy-entry-hint{grid-column:1/-1;margin-top:0}
  .wallet-screen .deposit-method-grid.crypto,.wallet-screen .deposit-method-grid.payment-apps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wallet-screen .wallet-continue{max-width:360px;justify-self:end}
  .wallet-screen .method-note{max-width:720px}
  .wallet-screen .redeem-entry-card{max-width:680px}
  .wallet-screen .spd-grid{max-width:760px}
  .wallet-screen .rdm-method-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wallet-screen .redeem-btn,.wallet-screen .wallet-continue{max-width:360px;justify-self:end}
  .wallet-screen .lucky-free-hero h3{font-size:28px;max-width:700px}
  .wallet-screen .faucet-action{max-width:100%}
  .wallet-screen .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wallet-screen .rank-pack-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .desktop-panel .screen-inner.wallet-screen{max-width:none;padding:16px 16px 28px}
  /* desktop lobby: full-width games grid, live bets table below */
  .game-grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:16px}
  .lbx-body{height:288px}
  .game-livebets .lbx-body{height:336px}
  .hero{padding:22px 26px}
  .hero h1{font-size:34px}
  .hero p{font-size:15px}
}
@media (min-width:1440px){
  :root{--chat-dock-w:386px}
  .screen-inner{max-width:min(1680px,100%)}
  .topbar{padding:12px max(28px,calc((100% - 1680px)/2 + 28px))}
  .game-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}
@media (min-width:1280px){
  .lbx-body{height:336px}
  .game-livebets .lbx-body{height:432px}
  .casino-livebets .lbx-body{height:480px}
}
@media (prefers-reduced-motion:reduce) and (min-width:1080px){
  .sidebar,.topbar,.stage,.site-footer,.feed-screen,.desktop-panel,.sb-nav button,.sb-nav button b,.sb-logo{transition:none}
}

/* ---------- captcha (Cloudflare Turnstile) gate ---------- */
.ts-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,6,16,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ts-card{background:var(--glass,#12152a);border:1px solid var(--line-2,rgba(255,255,255,.15));
  border-radius:var(--r-lg,16px);padding:22px 20px;min-width:300px;max-width:340px;
  display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:var(--sh,0 24px 70px rgba(0,0,0,.55))}
.ts-ttl{color:var(--ink,#fff);font-weight:700;font-size:15px}
.ts-sub{color:var(--muted,rgba(244,246,251,.66));font-size:12px;margin-top:-8px;text-align:center}
.ts-host{min-height:65px;display:flex;align-items:center;justify-content:center}
.ts-cancel{background:transparent;border:0;color:var(--muted,#8a90b0);font-size:13px;cursor:pointer;padding:4px 10px;border-radius:8px}
.ts-cancel:hover{color:var(--ink,#fff)}

/* ===== Economy rebuild 2026-07: VIP panel, rewards, notifications, skeletons ===== */
#toastStack{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px) + 18px);z-index:1200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,420px)}
.toast-item{display:flex;align-items:center;gap:9px;background:var(--surface-2,#181c26);border:1px solid var(--line-2,rgba(255,255,255,.15));color:var(--ink,#f4f6fb);font-weight:800;font-size:14px;padding:11px 16px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.45);opacity:0;transform:translateY(10px) scale(.97);transition:opacity .22s ease,transform .22s ease;max-width:100%}
.toast-item.show{opacity:1;transform:translateY(0) scale(1)}
.toast-item .ti{display:grid;place-items:center;width:22px;height:22px;color:var(--pink,#FF4DB8)}
.toast-item .ti svg{width:18px;height:18px}

.rake .rk-sub .bal-chip.mini{width:14px;height:14px;display:inline-block;vertical-align:-2px}
.rewards-signin{display:flex;flex-direction:column;gap:4px;padding:18px}
.rewards-signin b{font-size:15px}
.rewards-signin small{color:var(--muted)}

.lead-me-chip{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(139,92,255,.16);border:1px solid rgba(139,92,255,.4);color:#cdb7ff;font-weight:900;font-size:12.5px;padding:6px 12px;border-radius:999px}

/* skeleton loaders */
.skel{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:8px}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:skelShine 1.2s infinite}
@keyframes skelShine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.skel-card{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;min-height:130px}
.skel-ico{width:44px;height:44px;border-radius:12px}
.skel-line{width:70%;height:12px}
.skel-line.sm{width:45%;height:9px}
.skel-tile{height:84px;border-radius:14px;margin-bottom:10px}
.skel-input{height:52px;border-radius:12px}

/* ===== Wallet rework 2026-07 ===== */
/* shared wallet body rhythm: generous spacing, calmer panels */
#walletBody .wbody{gap:14px}
#walletBody .wallet-panel{padding:16px;border-radius:var(--r-lg)}
#walletBody .dep-label{margin:4px 2px -2px}
#walletBody .wallet-kicker{margin-bottom:0}
#walletBody .method-panel,#walletBody .rank-pack-panel{gap:13px}

/* skeleton variants (reuse .skel shimmer) */
.wsk-line{display:inline-block;width:96px;height:10px;border-radius:6px;vertical-align:middle}
.wsk-num{display:inline-block;width:64px;height:14px;border-radius:7px}

/* ---- deposit: hero balance strip + value prop ---- */
.buy-hero{display:grid;gap:12px;background:linear-gradient(160deg,rgba(139,92,255,.16),rgba(255,77,184,.06) 46%,#10141c 80%);border-color:rgba(139,92,255,.26)}
.buy-bal-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.buy-bal{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 12px;border-radius:var(--r);background:rgba(8,11,17,.55);border:1px solid rgba(255,255,255,.08)}
.buy-bal .bal-chip{width:30px;height:30px}
.buy-bal-tx{min-width:0;display:grid;gap:1px}
.buy-bal-tx small{color:var(--faint);font-family:var(--f-disp);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.buy-bal-tx b{font-family:var(--f-disp);font-size:17px;font-weight:900;color:#fff;line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buy-value-prop{margin:0;color:var(--muted);font-size:12.5px;font-weight:700;line-height:1.45}
.buy-value-prop b{color:var(--gold);font-family:var(--f-disp);font-weight:850}

/* ---- deposit: quick amount chips ---- */
.buy-quick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:12px}
@media(max-width:430px){.buy-quick{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- deposit: consistent 2-column method cards (icon, name, network tag) ---- */
#walletBody .deposit-method-grid.crypto,#walletBody .deposit-method-grid.payment-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
#walletBody .deposit-method-grid.telegram-checkout{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:460px){#walletBody .deposit-method-grid.telegram-checkout{grid-template-columns:1fr}}
#walletBody .deposit-method-head small{font-weight:700}

/* ---- deposit: summary card ---- */
.buy-summary{display:grid;gap:10px;background:linear-gradient(180deg,#131923,#10141c)}
.buy-sum-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:650;color:var(--muted)}
.buy-sum-row b{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-disp);font-weight:900;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.buy-sum-row b .chip-i{width:17px;height:17px;vertical-align:0}
.buy-sum-row.bonus{border-top:1px solid rgba(255,255,255,.07);padding-top:10px}
.buy-sum-row.bonus b{color:var(--gold)}
.buy-summary .wallet-continue{margin-top:4px}
.buy-summary .method-note{margin:0}

/* ---- redeem: panels, speed tiers as horizontal cards, summary ---- */
.rdm-amount-panel{display:grid;gap:10px}
.rdm-speed-panel,.rdm-method-panel,.rdm-summary-panel{display:grid;gap:11px}
#walletBody .spd-grid{grid-template-columns:1fr;gap:8px;max-width:none}
#walletBody .spd-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:3px;align-items:center;justify-items:start;min-height:58px;padding:10px 14px;text-align:left;border-radius:var(--r)}
#walletBody .spd-btn b{grid-column:1;grid-row:1;font-size:14px}
#walletBody .spd-btn small:not(.spd-eta){grid-column:2;grid-row:1/3;justify-self:end;padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:var(--muted);font-size:10.5px;font-weight:900}
#walletBody .spd-btn .spd-eta{grid-column:1;grid-row:2;color:var(--faint);font-size:11px}
#walletBody .spd-btn.on{border-color:rgba(169,139,255,.75)}
#walletBody .spd-btn.on small:not(.spd-eta){background:rgba(139,92,255,.2);border-color:rgba(169,139,255,.5);color:#e6dbff}
#walletBody .spd-turbo{padding-right:48px}
#walletBody .spd-turbo .spd-asset{right:12px}
#walletBody .spd-turbo small:not(.spd-eta){background:rgba(255,200,61,.1);border-color:rgba(255,200,61,.28);color:var(--gold)}
#walletBody .rdm-method-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#walletBody .rdm-method{min-height:62px;border-radius:var(--r);padding:10px 12px}
.rdm-summary-panel{background:linear-gradient(180deg,#131923,#10141c)}
.rdm-summary-panel .rdm-summary{background:#0d131c;border-color:rgba(255,255,255,.07);border-radius:var(--r)}
.rdm-sum-row.after b{color:var(--muted)}
.rdm-min-hint{margin:0;color:var(--faint);font-size:12px;font-weight:650;line-height:1.45}
#rdmSummary:not(:empty)~.rdm-min-hint{display:none}
.rdm-summary-panel .redeem-btn{margin-top:2px}
.rdm-summary-panel .dep-foot{margin-top:0}

/* ---- play free: hero, faucet progress, rank pack rail ---- */
.wb-free .lucky-free-hero{gap:14px}
.wb-free .free-hero-main{gap:6px}
.wb-free .lucky-free-hero h3{font-size:clamp(21px,3vw,30px)}
.wb-free .free-hero-main p{margin:0;color:var(--muted);font-size:13px;font-weight:600;line-height:1.5}
.faucet-panel{display:grid;gap:11px;border-color:rgba(255,200,61,.22);background:linear-gradient(160deg,rgba(255,200,61,.09),#10141c 72%)}
.faucet-panel .faucet-action{padding:0;border:0;background:transparent;border-radius:0}
.faucet-track{position:relative;height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);overflow:hidden}
.faucet-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform-origin:left center;transform:scaleX(var(--fp-start,1))}
.faucet-fill.filling{animation:lbFaucetFill linear forwards;animation-duration:var(--fp-dur,0ms)}
@keyframes lbFaucetFill{from{transform:scaleX(var(--fp-start,0))}to{transform:scaleX(1)}}
.faucet-panel:has(.faucet-btn.cooling) .faucet-fill:not(.filling){transform:scaleX(.04);animation:none}
@media(prefers-reduced-motion:reduce){.faucet-fill.filling{animation:none;transform:scaleX(1)}}
.faucet-note{margin:0;color:var(--faint);font-size:11.5px;font-weight:650;line-height:1.45}
@media(max-width:1079px){
  .wb-free .rank-pack-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(260px,80%);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;margin-inline:-2px;padding-inline:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wb-free .rank-pack-grid::-webkit-scrollbar{display:none}
  .wb-free .rank-pack-card{scroll-snap-align:start}
}

/* ---- desktop: two-column wallet layouts (matches existing >=1080 shell) ---- */
@media(min-width:1080px){
  #walletBody .wbody{gap:16px}
  .wallet-screen .wb-buy{grid-template-columns:minmax(320px,400px) minmax(0,1fr);align-items:start}
  .wallet-screen .wb-buy .buy-hero{grid-column:1/-1;grid-row:1}
  .wallet-screen .wb-buy .buy-panel{display:block;grid-column:1;grid-row:2}
  .wallet-screen .wb-buy .method-panel{grid-column:2;grid-row:2/span 2}
  .wallet-screen .wb-buy .buy-summary{grid-column:1;grid-row:3}
  .wallet-screen .wb-buy .wb-fine{grid-column:1/-1;grid-row:4}
  .wallet-screen .wb-buy .wallet-continue{max-width:none;justify-self:stretch}
  .wallet-screen .wb-redeem{grid-template-columns:minmax(320px,420px) minmax(0,1fr);align-items:start}
  .wallet-screen .wb-redeem .rdm-amount-panel{grid-column:1;grid-row:1;max-width:none}
  .wallet-screen .wb-redeem .rdm-speed-panel{grid-column:1;grid-row:2}
  .wallet-screen .wb-redeem .rdm-method-panel{grid-column:2;grid-row:1}
  .wallet-screen .wb-redeem .rdm-summary-panel{grid-column:2;grid-row:2}
  .wallet-screen .wb-redeem .redeem-btn{max-width:none;justify-self:stretch}
  #walletBody .rdm-method-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wallet-screen .wb-history .history-panel{max-width:560px}
}

/* =====================================================================
   REWARDS BONUSES + BONUS BANNERS + BET MODAL + SHARED BETS — 2026-07
   Single owner for all bonus/PF surfaces (replaces .vlu-* and the
   aly-v246 iframe heads-up banner).
   ===================================================================== */
/* -- Bonuses (Rewards panel, under the rakeback grid) -- */
.bonus-list{display:grid;gap:12px;margin-top:6px}
.bonus-card{padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--bc,#8b5cff) 26%,var(--line))}
.bonus-head{display:flex;align-items:center;gap:11px;padding:13px 16px;background:linear-gradient(120deg,color-mix(in srgb,var(--bc,#8b5cff) 16%,transparent),transparent 70%)}
.bonus-rank{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));flex:0 0 auto}
.bonus-rank.dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--bc,#8b5cff);margin:11px}
.bonus-title b{display:block;font-family:var(--f-disp);font-weight:700;font-size:15px}
.bonus-title small{color:var(--muted);font-size:11.5px;font-weight:700}
.bonus-rows{display:flex;flex-direction:column}
.bonus-row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-top:1px solid var(--line);min-height:56px}
.bonus-row.done{opacity:.55}
.bonus-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--bc,#8b5cff) 16%,var(--surface-3));color:color-mix(in srgb,var(--bc,#8b5cff) 70%,#fff)}
.bonus-ic svg{width:17px;height:17px;fill:currentColor}
.bonus-meta{flex:1;min-width:0}
.bonus-meta b{display:block;font-family:var(--f-disp);font-weight:700;font-size:13.5px}
.bonus-meta small{display:block;color:var(--muted);font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bonus-claim{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:11px;background:var(--grad-cta);box-shadow:var(--sh-glow);color:#fff;font-family:var(--f-disp);font-weight:700;font-size:12.5px;transition:transform .14s,filter .2s;cursor:pointer}
.bonus-claim:active{transform:scale(.96)}
.bonus-claim .bal-chip{width:15px;height:15px}
.bonus-claim b{font:inherit}
.bonus-claim span:last-child{opacity:.85;font-weight:800;text-transform:uppercase;font-size:10.5px;letter-spacing:.06em}
.bonus-done{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;color:var(--success);font-weight:800;font-size:12.5px}
.bonus-done svg{width:14px;height:14px;fill:currentColor}
.bonus-wait{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:12px}
.bonus-wait svg{width:13px;height:13px;fill:var(--faint)}

/* -- Bonus banners: polished in-shell notification pop (top-right) -- */
#bonusBanners{position:fixed;top:calc(var(--topbar-h,64px) + env(safe-area-inset-top,0px) + 12px);right:14px;z-index:180;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:min(400px,calc(100vw - 28px))}
.bonus-banner{pointer-events:auto;display:grid;grid-template-columns:44px minmax(0,1fr) 28px;align-items:center;gap:11px;padding:13px 12px 13px 14px;border-radius:16px;cursor:pointer;
  background:linear-gradient(150deg,color-mix(in srgb,var(--bb,#8b5cff) 22%,#12141d),#101219 62%);border:1px solid color-mix(in srgb,var(--bb,#8b5cff) 38%,var(--line-2));
  box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset;backdrop-filter:blur(14px);
  opacity:0;transform:translateX(18px) scale(.97);transition:opacity .28s ease-out,transform .28s cubic-bezier(.2,.9,.3,1.15)}
.bonus-banner.show{opacity:1;transform:none}
.bonus-banner .bb-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--bb,#8b5cff) 20%,rgba(255,255,255,.04));color:color-mix(in srgb,var(--bb,#8b5cff) 65%,#fff)}
.bonus-banner .bb-ic img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.bonus-banner .bb-ic svg{width:20px;height:20px;fill:currentColor}
.bonus-banner .bb-body{min-width:0}
.bonus-banner .bb-body b{display:block;font-family:var(--f-disp);font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bonus-banner .bb-body small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:11.5px;font-weight:600;line-height:1.35}
.bonus-banner:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bonus-banner .bb-x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--muted);font-size:11px;cursor:pointer;align-self:start}
@media(max-width:640px){#bonusBanners{left:14px;right:14px;max-width:none}.bonus-banner{grid-template-columns:40px minmax(0,1fr) 26px}}

/* -- inbox polish: rank art icons -- */
.notif .ni .ni-rank{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}

/* -- Bet details / provably fair modal -- */
.bm-id{color:var(--muted);font-weight:700;font-size:14px;margin-left:4px}
.bm-copy{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;color:var(--faint);background:rgba(255,255,255,.05);margin-left:6px;cursor:pointer;vertical-align:middle;transition:color .15s,background .15s}
.bm-copy:hover{color:#fff;background:rgba(255,255,255,.1)}
.bm-copy svg{width:14px;height:14px;fill:none;stroke:currentColor}
.bm-by{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;font-weight:700;margin:-2px 0 16px}
.bm-user-pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:5px 11px;min-height:30px}
.bm-user-pill .bm-rank{width:18px;height:18px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.bm-user-pill b{color:#fff;font-family:var(--f-disp);font-weight:700;font-size:13px}
.bm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:14px 6px;text-align:center;margin-bottom:12px}
.bm-stats>div+div{border-left:1px solid var(--line)}
.bm-stats small{display:block;color:var(--faint);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.bm-stats b{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-weight:700;font-size:15px}
.bm-stats b.up{color:var(--success)}
.bm-stats .bal-chip{width:16px;height:16px}
.bm-snapshot{padding:16px;margin-bottom:12px}
.bm-board{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-width:330px;margin:0 auto}
.bm-cell{aspect-ratio:1;border-radius:11px;display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--line)}
.bm-cell svg{width:58%;height:58%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.bm-cell.picked{border-color:#c84cff;box-shadow:0 0 0 1.5px rgba(200,76,255,.55),0 4px 12px rgba(200,76,255,.2)}
.bm-cell.mine.picked{border-color:#ff314a;box-shadow:0 0 0 1.5px rgba(255,49,74,.55),0 4px 12px rgba(255,49,74,.22)}
.bm-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bm-fact small{display:block;color:var(--faint);font-size:10.5px;font-weight:800;text-transform:capitalize;margin-bottom:2px}
.bm-fact b{font-family:var(--f-disp);font-weight:700;font-size:13.5px;word-break:break-word}
.bm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.bm-actions .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.bm-actions .btn:only-child{grid-column:span 2}
.bm-actions .bi svg,.bm-actions svg{width:16px;height:16px;fill:currentColor}
.bm-pf{padding:0;overflow:hidden}
.bm-pf-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 16px;font-family:var(--f-disp);font-weight:700;font-size:15px;color:#fff;cursor:pointer;min-height:48px}
.bm-pf .bm-chev{width:18px;height:18px;transition:transform .22s ease}
.bm-pf.open .bm-chev{transform:rotate(180deg)}
.bm-pf-body{display:none;padding:2px 16px 16px;flex-direction:column;gap:10px}
.bm-pf.open .bm-pf-body{display:flex}
.bm-seed small{display:block;color:var(--faint);font-size:11px;font-weight:800;margin-bottom:4px}
.bm-seed span{display:flex;align-items:center;gap:6px}
.bm-seed code{flex:1;min-width:0;display:block;padding:10px 12px;border-radius:11px;background:var(--surface-3);border:1px solid var(--line);font-size:12px;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-seed.revealed code{border-color:color-mix(in srgb,var(--success,#37f5a0) 45%,var(--line));color:var(--success)}
.bm-pf-hint,.bm-pf-note{color:var(--muted);font-size:12.5px;font-weight:600;line-height:1.5;margin:2px 0 0}
.bm-verify{margin-top:2px}
.bm-verify-out{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:12px;background:var(--surface-3);border:1px solid var(--line)}
.bm-verify-out.ok{border-color:color-mix(in srgb,var(--success,#37f5a0) 40%,var(--line))}
.bm-verify-out.bad{border-color:rgba(255,93,93,.5)}
.bm-check{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.9);line-height:1.4}
.bm-check svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;fill:currentColor}
.bm-check.ok{color:var(--success)}
.bm-check.bad{color:#ff7a7a}
.bm-check.dim{color:var(--faint);font-weight:600;word-break:break-all}

/* -- Shared bets in chat -- */
.msg.shared-bet .sb-label{color:var(--purple-2,#a78bfa);font-weight:700}
.sb-chip{display:flex;align-items:center;gap:9px;width:100%;margin-top:5px;padding:7px 10px;border-radius:11px;background:var(--surface);border:1px solid var(--line);cursor:pointer;min-height:38px;transition:background .16s,border-color .16s,transform .12s;text-align:left}
.sb-chip:hover{background:var(--surface-hi);border-color:var(--line-2)}
.sb-chip:active{transform:scale(.985)}
.sb-chip[disabled]{opacity:.55;cursor:default}
.sb-game{display:inline-flex;align-items:center;gap:7px;min-width:0;flex:1;font-family:var(--f-disp);font-weight:700;font-size:13px;color:#fff}
.sb-game .sb-gico{width:18px;height:18px;object-fit:contain;filter:brightness(0) invert(1);opacity:.92;flex:0 0 auto}
.sb-game b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-mult{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-disp);font-weight:700;font-size:12.5px;color:var(--muted);flex:0 0 auto}
.sb-mult svg{width:13px;height:13px}
.sb-pay{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-weight:800;font-size:13px;color:var(--muted);flex:0 0 auto}
.sb-pay.up{color:var(--success)}
.sb-pay .bal-chip{width:15px;height:15px}
.sb-chev{width:15px;height:15px;color:var(--faint);flex:0 0 auto}
.msg.shared-bet .msg-body{overflow:visible;display:block;-webkit-line-clamp:unset}

/* -- clickable live-bet + transactions bet ids -- */
.lbx-row.has-bet .lbx-mult,.lbx-row.has-bet .lbx-pay{cursor:pointer}
.lbx-row.has-bet .lbx-mult:hover b,.lbx-row.has-bet .lbx-pay:hover{text-decoration:underline;text-underline-offset:3px}
button.tx-id.linked{cursor:pointer;background:none;border:0;padding:0;color:inherit;font:inherit;display:inline-flex;align-items:center;gap:5px}
button.tx-id.linked:hover b{text-decoration:underline;text-underline-offset:3px}

/* staged bet share above the chat composer */
.share-pending{display:flex;align-items:center;gap:9px;margin:8px 0 0;padding:9px 11px;border-radius:13px;background:var(--surface);border:1px solid color-mix(in srgb,#c84cff 40%,var(--line));min-height:44px;animation:upIn .24s ease}
.share-pending .sp-label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto}
.share-pending .sp-label svg{width:13px;height:13px;fill:currentColor}
.share-pending .sb-game{flex:1}
.share-pending .sp-x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--muted);font-size:11px;cursor:pointer;flex:0 0 auto}

/* -- bet modal: game-specific snapshots (reference: Shuffle bet modals) -- */
.bm-gico{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1);opacity:.95;margin-right:10px;flex:0 0 auto}
.bm-big{padding:26px 16px;text-align:center;font-family:var(--f-disp);font-weight:800;font-size:40px;letter-spacing:-.01em;color:#fff}
.bm-big.up{color:var(--success)}
.bm-big.down{color:#ff6b6b}
.bm-field{margin:0 0 12px}
.bm-field small{display:block;color:rgba(255,255,255,.85);font-size:12.5px;font-weight:700;margin:0 0 6px}
.bm-field-val{padding:13px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-family:var(--f-disp);font-weight:700;font-size:14px;color:#fff}
/* blackjack / baccarat table */
.bm-table{display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 16px}
.bm-hand{display:flex;flex-direction:column;align-items:center;gap:10px}
.bm-hand-cards{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bm-total{min-width:40px;text-align:center;padding:4px 12px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line);font-family:var(--f-disp);font-weight:800;font-size:13px;color:#fff}
.bm-total.win{background:color-mix(in srgb,var(--success,#37f5a0) 22%,var(--surface-3));border-color:color-mix(in srgb,var(--success,#37f5a0) 55%,var(--line));color:var(--success)}
.bm-card{width:64px;height:88px;border-radius:9px;background:#fff;color:#17181d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-family:var(--f-disp);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.bm-card b{font-weight:800;font-size:26px;line-height:1}
.bm-card i{font-style:normal;font-size:22px;line-height:1.15}
.bm-card.red{color:#e5002c}
.bm-card.win{outline:2.5px solid var(--success,#37f5a0);outline-offset:-1px;box-shadow:0 4px 14px rgba(55,245,160,.28)}
@media(max-width:420px){.bm-card{width:52px;height:72px}.bm-card b{font-size:21px}.bm-card i{font-size:18px}}
/* blitz 13x4 card grid */
.bm-blitz{display:grid;grid-template-columns:repeat(13,1fr);gap:4px;padding:2px}
.bm-mini-card{aspect-ratio:5/7;border-radius:4.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface-3);border:1px solid var(--line);color:rgba(255,255,255,.28);font-family:var(--f-disp)}
.bm-mini-card b{font-weight:800;font-size:10.5px;line-height:1}
.bm-mini-card i{font-style:normal;font-size:9px;line-height:1.2}
.bm-mini-card.red{color:rgba(255,90,120,.4)}
.bm-mini-card.hit{background:#fff;color:#17181d;border-color:var(--success,#37f5a0);outline:1.5px solid var(--success,#37f5a0);outline-offset:-1px}
.bm-mini-card.hit.red{color:#e5002c}
/* keno 8x5 board */
.bm-keno-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.bm-keno{position:relative;aspect-ratio:1;border-radius:10px;display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--line);font-family:var(--f-disp);font-weight:800;font-size:13px;color:rgba(255,255,255,.75)}
.bm-keno.pick{background:var(--purple,#8b5cff);border-color:color-mix(in srgb,var(--purple,#8b5cff) 70%,#fff);color:#fff}
.bm-keno.drawn{color:#ff5d6c;background:#111117;border-color:rgba(255,93,108,.35)}
.bm-keno.hit{background:#0d1512;border-color:var(--success,#37f5a0);box-shadow:0 0 10px rgba(55,245,160,.25)}
/* roulette pocket */
.bm-roulette{display:grid;place-items:center;padding:26px 16px}
.bm-pocket{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:28px;color:#fff;border:3px solid rgba(255,255,255,.25)}
.bm-pocket.red{background:#e5002c}
.bm-pocket.dark{background:#17181d}
.bm-pocket.green{background:#0f9d58}

/* -- rewards page 2026-07 polish: hero art, calm spacing, countdown locks -- */
.rewards-page .sect-head{margin-top:26px}
.rewards-page .rake-grid{gap:14px}
.rewards-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:0;padding:0;overflow:hidden;background:linear-gradient(120deg,#17102b,#0f0a1e 65%);border-color:rgba(139,92,255,.22)}
.rewards-hero .rh-info{padding:22px 20px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.rewards-hero .vip-xp-top{font-size:20px}
.rewards-hero .vip-link{margin-top:6px;width:max-content;padding:0 16px;min-height:38px;display:inline-flex;align-items:center;gap:7px}
.rewards-hero .rh-art{position:relative;min-height:170px}
.rewards-hero .rh-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.rewards-hero .rh-art::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#140e26 0%,rgba(20,14,38,.25) 34%,transparent 60%)}
@media(max-width:640px){
  .rewards-hero{grid-template-columns:1fr}
  .rewards-hero .rh-art{min-height:130px;order:-1}
  .rewards-hero .rh-art::before{background:linear-gradient(180deg,transparent 30%,#140e26 100%)}
}
.rk-lock .rk-lock-ic svg{width:16px;height:16px}
.rk-timer-box{gap:8px}
.rk-timer-box b{font:inherit;font-size:13px;color:rgba(255,255,255,.85);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.rake .rk-name{margin-bottom:12px}

/* bet id chip (link icon, whole chip copies) */
/* bet id: plain grey text + link glyph, purple on hover (whole thing copies) */
.bm-idchip{display:inline-flex;align-items:center;gap:7px;margin-left:4px;padding:2px 4px;background:none;border:none;color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:17px;cursor:pointer;vertical-align:-1px;transition:color .16s}
.bm-idchip svg{width:15px;height:15px;flex:0 0 auto}
.bm-idchip:hover{color:var(--purple-2,#a78bfa)}
/* centered modal header, close pinned right */
.bm-head{position:relative;justify-content:center;margin-bottom:16px;padding:4px 44px 0}
.bm-head h3{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:19px}
.bm-head .sheet-x{position:absolute;right:0;top:0}

/* keno gem now inline svg */
.bm-keno.hit svg{width:74%;height:74%;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}


/* -- header line alignment: topbar / sidebar / chat dock share one baseline --
   Desktop header token is 80px; the sidebar header sits inside 14px top padding
   so its own height is 80-14. All three border-bottoms land at exactly 80px. */
@media(min-width:1024px){
  :root{--topbar-h:80px}
  .sb-head{height:calc(var(--topbar-h) - 14px);min-height:0;margin-bottom:14px}
  .chat-dock .chat-head{height:calc(var(--topbar-h) + env(safe-area-inset-top,0px));min-height:0;margin-bottom:12px}
}

/* =====================================================================
   CHALLENGES  —  community challenge cards page
   Design target: Shuffle's Challenges page (measured specs below).
   Contract: class names are fixed by the JS renderer — style, never rename.
   Brand tokens reused from :root — --pink / --purple / --purple-2 /
   --surface-2..3 / --surface-hi / --muted / --ink / --line(-2) / --focus /
   --r-sm / --r-pill / --f-disp / --f-body / --botnav-h. No new brand colors.
   ===================================================================== */

/* ---- pill tab row (scrolls horizontally when it overflows on phones) ---- */
.chal-tabs{
  display:flex;gap:8px;align-items:center;
  margin:2px 0 16px;padding-bottom:2px;
  overflow-x:auto;overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.chal-tabs::-webkit-scrollbar{display:none}
.chal-tab{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;                       /* >=44px touch target */
  padding:10px 16px;                     /* spec: ~10px/16px */
  border-radius:var(--r-pill);
  font-family:var(--f-disp);font-size:14px;font-weight:700;line-height:1;
  white-space:nowrap;
  color:var(--muted);
  background:var(--surface-3);
  border:1px solid var(--line);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.chal-tab:hover{color:var(--ink);border-color:var(--line-2)}
.chal-tab.on{
  color:#fff;
  background:var(--purple);              /* brand primary action */
  border-color:transparent;
}
.chal-tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- centered empty / loading / error message ---- */
.chal-status{
  grid-column:1/-1;                      /* span the whole grid if nested */
  min-height:160px;
  display:grid;place-items:center;
  text-align:center;
  padding:32px 16px;
  color:var(--muted);
  font-weight:700;
}

/* ---- responsive card grid ----------------------------------------------
   Mobile-first: 2 cols on phones. Steps mirror the file's EXISTING
   breakpoints (see .game-grid / :root --maxw: 680 → 920 → 1280) so the page
   grows in lockstep with the rest of the lobby rather than inventing new
   stops. Bottom padding lets the last row clear the fixed mobile bottom nav
   (~62px, --botnav-h) + safe-area, matching the pattern used site-wide. */
.chal-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:4px;
  padding-bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom,0px) + 12px);
}
@media(min-width:680px){ .chal-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:920px){ .chal-grid{grid-template-columns:repeat(4,1fr)} }
@media(min-width:1280px){
  /* 6-up on wide desktop, capped so cards stay ~200px */
  .chal-grid{grid-template-columns:repeat(6,minmax(0,200px));justify-content:start}
}

/* ---- the card (the whole card is a link/button) ---- */
.chal-card{
  display:flex;flex-direction:column;
  text-align:left;
  border-radius:8px;                     /* measured: 8px (== --r-sm) */
  overflow:hidden;
  background:rgb(32,35,41);              /* measured target surface */
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.chal-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:var(--sh);
}
.chal-card:active{transform:translateY(-1px) scale(.99)}
.chal-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---- art (full-bleed image area, top of card) ---- */
.chal-art{
  position:relative;
  aspect-ratio:16/10;
  background:var(--surface-hi);          /* placeholder while img loads */
}
.chal-art img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* ---- "LUCKY BABES" ribbon, top-left over the art ---- */
.chal-ribbon{
  position:absolute;top:8px;left:8px;z-index:2;
  padding:4px 9px;
  border-radius:var(--r-pill);
  font-family:var(--f-disp);
  font-size:9px;font-weight:700;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;
  color:#fff;
  background:var(--purple);              /* brand pill */
  box-shadow:var(--sh-sm);
}

/* ---- footer content ---- */
.chal-foot{
  display:grid;grid-template-rows:60px 40px 40px;gap:8px;
  padding:16px;                          /* measured: 16px */
}

/* condition line — up to 2 lines, no truncation */
.chal-cond{
  margin:0 0 2px;
  height:60px;
  font-family:var(--f-body);
  font-size:14px;font-weight:400;line-height:1.35;
  color:#fff;
  overflow-wrap:anywhere;
}

/* meta rows (Reward, Creator): stacked <small> label + <b> value */
.chal-meta{
  display:flex;flex-direction:column;gap:2px;min-height:40px;
  justify-content:flex-start;
}
.chal-meta small{
  font-family:var(--f-body);
  font-size:12px;font-weight:400;line-height:1.2;
  color:rgb(155,165,180);               /* muted grey label */
}
.chal-meta b{
  font-family:var(--f-body);
  font-size:14px;font-weight:400;line-height:1.2;
  color:#fff;
}

/* reward value: chip icon + number on one line */
.chal-reward{
  display:inline-flex;align-items:center;gap:6px;
}
.chal-reward .bal-chip.lucky.mini{
  width:16px;height:16px;flex:0 0 auto;
}

/* completed block (finished challenges only): centered label + winner */
.chal-completed{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding-top:2px;
  text-align:center;
}
.chal-completed small{
  font-family:var(--f-body);
  font-size:12px;font-weight:400;line-height:1.2;
  color:rgb(155,165,180);               /* muted grey */
}
.chal-winner{
  font-family:var(--f-body);
  font-size:14px;font-weight:400;line-height:1.2;
  color:#fff;
}
/* lock icon before "Hidden" winner names */
.chal-winlock{
  display:inline-flex;align-items:center;
  margin-right:4px;
  color:var(--muted);
  vertical-align:-1px;
}
.chal-winlock svg{width:12px;height:12px;display:block}

/* ---- motion / accessibility: honour reduced-motion preference ---- */
@media (prefers-reduced-motion:reduce){
  .chal-card,.chal-tab{transition:none}
  .chal-card:hover,.chal-card:active{transform:none}
}

/* Challenges sidebar entry: target icon + live-count badge */
.sb-nav button .sb-ico svg{width:22px;height:22px;display:block;margin:auto;color:var(--muted)}
.sb-nav button.is-active .sb-ico svg,.sb-nav button:hover .sb-ico svg{color:var(--purple)}
/* live-count badge as an absolute corner chip so it never wraps under the icon */
.sb-nav button .sb-badge{position:absolute;top:7px;right:10px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--pink,#ff4db8);color:#fff;font:800 10px/18px var(--f-disp,inherit);text-align:center;font-style:normal;box-shadow:0 2px 6px rgba(0,0,0,.35);pointer-events:none}
body.lb-sidebar-collapsed .sb-nav button .sb-badge{top:3px;right:3px;min-width:16px;height:16px;line-height:16px;padding:0 4px}

/* =====================================================================
   Notifications drawer — Shuffle-style right slide (2026-07 polish)
   Scoped to #notifSheet; other .sheet instances keep the bottom sheet.
   Informational-only rows; reward rows route to Rewards on row tap.
   ===================================================================== */
#notifSheet{justify-content:flex-end;align-items:stretch}
#notifSheet .sheet-card{
  position:relative;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;
  border-radius:0;border:none;border-left:1px solid var(--line-2);
  background:linear-gradient(210deg,color-mix(in srgb,var(--purple) 8%,var(--surface-2)),var(--surface-2) 42%);
  box-shadow:-28px 0 70px rgba(0,0,0,.6);
  display:flex;flex-direction:column;overflow:hidden;
  padding:0 16px calc(14px + env(safe-area-inset-bottom,0px));
  transform:translateX(102%);transition:transform .3s cubic-bezier(.32,.72,.28,1);
}
#notifSheet.open .sheet-card{transform:none}
#notifSheet .sheet-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;pointer-events:none;
  background:linear-gradient(180deg,var(--pink),var(--purple) 55%,transparent);opacity:.65}
#notifSheet .sheet-head{flex:0 0 auto;margin:0 -16px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;border-bottom:1px solid var(--line)}
#notifSheet .sheet-x{width:44px;height:44px;min-width:44px;min-height:44px}
#notifSheet #notifList{flex:1;min-height:0;overflow-y:auto;align-content:start;gap:6px;padding:10px 2px 8px;overscroll-behavior:contain}

#notifSheet .notif-tools{position:sticky;top:0;z-index:2;margin:-10px -2px 4px;padding:10px 2px 8px;
  background:linear-gradient(180deg,var(--surface-2) 78%,transparent)}
.notif-hacts{display:inline-flex;align-items:center;gap:2px}
.notif-readall{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;margin:0;
  border:none;border-radius:var(--r-pill);background:none;cursor:pointer;
  color:var(--pink);font-family:var(--f-disp);font-weight:700;font-size:12.5px;
  transition:background .16s,color .16s}
.notif-readall svg{width:14px;height:14px;flex:0 0 auto}
.notif-readall:hover{background:rgba(255,77,184,.12);color:var(--pink-2)}
.notif-hbtn{display:grid;place-items:center;width:44px;height:44px;border:none;border-radius:var(--r-pill);
  background:none;color:var(--muted);cursor:pointer;transition:background .16s,color .16s}
.notif-hbtn svg{width:17px;height:17px;fill:currentColor}
.notif-hbtn:hover{background:rgba(255,255,255,.08);color:var(--ink)}

.notif{gap:12px;align-items:flex-start;min-height:64px;padding:12px 12px 12px 14px;border-radius:var(--r-lg);
  background:transparent;border:1px solid transparent;transition:background .16s,border-color .16s,transform .12s}
.notif::before{content:none}
.notif:hover{background:var(--surface-hi);border-color:var(--line)}
.notif.unread{background:color-mix(in srgb,var(--purple) 9%,transparent);
  border-color:color-mix(in srgb,var(--purple) 24%,var(--line))}
.notif .ni{width:38px;height:38px;border-radius:12px;margin-top:1px}
.notif .ni svg{width:18px;height:18px}
.notif .ni .ni-rank{width:27px;height:27px}
.notif-body{display:flex;flex-direction:column;gap:2px}
.notif-top{display:flex;align-items:baseline;gap:10px;min-width:0}
.notif-top b{flex:1;min-width:0;margin-bottom:0}
.notif-meta{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;transform:translateY(-1px)}
.notif small{font-weight:500}
.notif time{font-size:11px}
.notif-dot{width:7px;height:7px;background:var(--pink);box-shadow:0 0 8px color-mix(in srgb,var(--pink) 70%,transparent)}

.notif-empty{display:grid;justify-items:center;gap:8px;padding:38px 20px;margin-top:10px;
  background:transparent;border-style:dashed}
.notif-empty svg{width:26px;height:26px;fill:var(--faint)}
.notif-empty b{font-family:var(--f-disp);font-weight:700;font-size:14px;color:var(--ink)}
.notif-empty span{font-size:12.5px;font-weight:600;color:var(--muted)}

.notif:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.notif-readall:focus-visible,.notif-hbtn:focus-visible,#notifSheet .sheet-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  #notifSheet .sheet-card{transition:none}
  .notif,.notif-readall,.notif-hbtn{transition:none}
}
@media(min-width:680px){
  #notifSheet .sheet-card{width:378px}
}

/* Notification row icons: crypto deposit logos + generic image/svg sizing */
.notif .ni .ni-coin{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.notif .ni:has(.ni-coin){background:rgba(255,255,255,.06);border-color:var(--line)}
.notif .ni svg{width:18px;height:18px}
.notif .ni img:not(.ni-coin):not(.ni-rank){width:22px;height:22px;object-fit:contain}

/* Rewards: separate the promo-code box from the weekly-race leaderboard above it */
.rewards-page .promo-box{margin-top:18px}

/* =====================================================================
   DEPOSIT v2 — one clean flow, two cards (2026-07). Brand tokens only.
   ===================================================================== */
.dep2-wrap{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto}
.dep2-card{background:linear-gradient(180deg,var(--surface-2),var(--surface-3) 120%);border:1px solid var(--line);border-radius:var(--r-lg,16px);padding:18px;box-shadow:var(--sh-sm)}

/* balance strip */
.dep2-bal{display:flex;gap:20px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.dep2-bal-item{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);font-weight:600}
.dep2-bal-item b{color:var(--ink);font-family:var(--f-disp);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.dep2-bal-item .bal-chip{width:18px;height:18px}

/* amount — the focal point */
.dep2-amount{display:block;margin-bottom:12px}
.dep2-lbl{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.dep2-amount-in{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:6px 16px;transition:border-color .18s,box-shadow .18s}
.dep2-amount-in:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 22%,transparent)}
.dep2-amount-in>b{font-family:var(--f-disp);font-weight:800;font-size:26px;color:var(--muted)}
.dep2-amount-in input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-family:var(--f-disp);font-weight:800;font-size:28px;padding:8px 0;font-variant-numeric:tabular-nums}

/* you-receive highlight */
.dep2-get{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:linear-gradient(120deg,color-mix(in srgb,var(--pink) 12%,transparent),color-mix(in srgb,var(--purple) 14%,transparent));border:1px solid color-mix(in srgb,var(--purple) 26%,var(--line))}
.dep2-get>span{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.dep2-get b{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-weight:800;font-size:14px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.dep2-get .chip-i{width:16px;height:16px}
.dep2-get-sep{color:var(--muted);margin:0 2px}
.dep2-hint{margin-top:9px;font-size:11.5px;color:var(--faint);font-weight:600}

/* segmented Crypto / Cards & Apps */
.dep2-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:13px;margin-bottom:14px}
.dep2-seg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:9px;background:none;border:none;cursor:pointer;color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:13.5px;transition:background .18s,color .18s}
.dep2-seg-btn svg{width:16px;height:16px;fill:currentColor}
.dep2-seg-btn.on{background:var(--cta-grad);color:#fff;box-shadow:var(--sh-sm)}
.dep2-seg-btn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* coin / method grid */
.dep2-coins{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
@media(max-width:460px){.dep2-coins{grid-template-columns:1fr}}
.dep2-coin{position:relative;display:flex;align-items:center;gap:11px;min-height:56px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line);cursor:pointer;text-align:left;transition:border-color .16s,background .16s,transform .12s}
.dep2-coin:hover{border-color:var(--line-2);background:var(--surface-hi)}
.dep2-coin.sel{border-color:var(--purple);background:color-mix(in srgb,var(--purple) 12%,var(--surface))}
.dep2-coin:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dep2-coin-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--pc,#8a8a8a) 16%,#0b0d12);overflow:hidden}
.dep2-coin-ic img{width:22px;height:22px;object-fit:contain}
.dep2-coin-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.dep2-coin-tx b{font-family:var(--f-disp);font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dep2-coin-tx small{font-size:11px;color:var(--muted);font-weight:600}
.dep2-coin-check{position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--purple);opacity:0;transform:scale(.6);transition:opacity .16s,transform .16s}
.dep2-coin-check svg{width:12px;height:12px;fill:#fff}
.dep2-coin.sel .dep2-coin-check{opacity:1;transform:scale(1)}

/* CTA + note + history */
.dep2-cta{min-height:52px;font-family:var(--f-disp);font-weight:800;font-size:15px;background:var(--cta-grad);box-shadow:var(--sh)}
.dep2-cta:disabled{opacity:.5;filter:grayscale(.25);cursor:not-allowed}
.dep2-cta:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dep2-note{display:flex;gap:8px;align-items:flex-start;margin:12px 2px 0;font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.5}
.dep2-note-ic{flex:0 0 auto;color:var(--faint)}.dep2-note-ic svg{width:14px;height:14px;fill:currentColor}
.dep2-history{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:14px;padding:0 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:border-color .16s,background .16s}
.dep2-history:hover{border-color:var(--line-2);background:var(--surface-hi)}
.dep2-history:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dep2-hist-ic{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--purple) 15%,transparent);color:var(--purple-2)}
.dep2-hist-ic svg{width:16px;height:16px;fill:currentColor}
.dep2-history>span:not(.dep2-hist-ic):not(.dep2-hist-chev){flex:1;font-family:var(--f-disp);font-weight:700;font-size:13px;color:var(--ink)}
.dep2-hist-chev{color:var(--faint);font-size:18px;font-weight:800}
@media(prefers-reduced-motion:reduce){.dep2-qa,.dep2-seg-btn,.dep2-coin,.dep2-coin-check,.dep2-cta,.dep2-history,.dep2-amount-in{transition:none}}

/* =====================================================================
   FLAT PASS (2026-07): kill the pink/purple gradients + pill-in-pill.
   Shuffle-style: flat cards, a left accent bar, plain circular icons.
   ===================================================================== */
/* deposit: flat cards, flat you-receive */
.dep2-card{background:var(--surface-2)!important}
.dep2-get{background:var(--surface)!important;border:1px solid var(--line)!important}
.dep2-seg-btn.on{background:var(--purple)!important}
.dep2-cta{background:var(--purple)!important}

/* notifications drawer: flat surface, no gradient, no neon edge */
#notifSheet .sheet-card{background:var(--surface-1,#0d1017)!important;border-left:1px solid var(--line)!important}
#notifSheet .sheet-card::before{display:none!important}

/* notif rows: flat card + left accent bar; unread bar lights up */
.notif{background:var(--surface-2)!important;border:1px solid var(--line)!important;border-left:3px solid transparent!important;border-radius:12px}
.notif.unread{background:var(--surface-2)!important;border-color:var(--line)!important;border-left-color:var(--purple)!important}
.notif:hover{background:var(--surface-hi)!important;border-color:var(--line-2)!important}
.notif.unread:hover{border-left-color:var(--purple)!important}
/* icon: plain flat circle, no gradient tile, no --nc tint */
.notif .ni{background:var(--surface-hi)!important;border:1px solid var(--line)!important;border-radius:50%!important;color:var(--muted)!important;width:40px!important;height:40px!important}
.notif .ni:has(.ni-coin){background:#fff!important;border-color:transparent!important;padding:0}
.notif .ni .ni-coin{width:40px!important;height:40px!important;box-shadow:none}

.dep2-div{height:1px;background:var(--line);margin:16px -18px 16px;opacity:.7}
.dep2-solo .dep2-get{margin-top:12px}

/* =====================================================================
   VAULT — balance-dropdown entry + transfer modal (2026-07). Flat/brand.
   ===================================================================== */
.bp-vault{display:flex;align-items:center;gap:11px;width:100%;margin-top:6px;padding:11px 12px;border:none;border-top:1px solid var(--line);background:none;cursor:pointer;text-align:left;color:inherit;transition:background .16s}
.bp-vault:hover{background:var(--surface-hi)}
.bp-vault:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.bp-vault-ic{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface-hi);color:var(--purple-2)}
.bp-vault-ic svg{width:19px;height:19px}
.bp-vault-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.bp-vault-tx b{font-family:var(--f-disp);font-weight:700;font-size:13.5px;color:var(--ink)}
.bp-vault-tx small{font-size:11px;color:var(--muted)}
.bp-vault .bp-amt{font-variant-numeric:tabular-nums}
.bp-vault-chev{color:var(--faint);font-size:17px;font-weight:800}

.vault-body{padding:4px 2px 6px}
.vault-sub{margin:0 0 14px;font-size:12.5px;color:var(--muted);line-height:1.5}
.vault-bal{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.vault-bal-box{display:flex;flex-direction:column;gap:4px;padding:12px 13px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.vault-bal-box.is-vault{background:color-mix(in srgb,var(--purple) 10%,var(--surface));border-color:color-mix(in srgb,var(--purple) 26%,var(--line))}
.vault-bal-box small{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.vault-bal-box b{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-disp);font-weight:800;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.vault-bal-box .bal-chip{width:18px;height:18px}
.vault-lock{display:inline-grid;place-items:center;color:var(--purple-2)}.vault-lock svg{width:15px;height:15px;fill:currentColor}
.vault-dir{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
.vault-dir button{min-height:40px;border:none;border-radius:8px;background:none;color:var(--muted);font-family:var(--f-disp);font-weight:700;font-size:13px;cursor:pointer;transition:background .16s,color .16s}
.vault-dir button.on{background:var(--purple);color:#fff}
.vault-dir button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.vault-amt-lbl{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:7px}
.vault-amt-in{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:4px 6px 4px 14px;transition:border-color .18s,box-shadow .18s}
.vault-amt-in:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 20%,transparent)}
.vault-amt-in .bal-chip{width:18px;height:18px;flex:0 0 auto}
.vault-amt-in input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-family:var(--f-disp);font-weight:800;font-size:20px;padding:8px 0;font-variant-numeric:tabular-nums}
.vault-max{flex:0 0 auto;min-height:34px;padding:0 13px;border:none;border-radius:8px;background:var(--surface-hi);color:var(--purple-2);font-family:var(--f-disp);font-weight:800;font-size:12px;cursor:pointer}
.vault-max:hover{background:color-mix(in srgb,var(--purple) 18%,var(--surface-hi))}
.vault-hint{margin:8px 2px 16px;font-size:11.5px;color:var(--faint);font-weight:600}
.vault-cta{min-height:50px;background:var(--purple);font-family:var(--f-disp);font-weight:800;font-size:15px}
.vault-cta:disabled{opacity:.5;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.bp-vault,.vault-dir button,.vault-amt-in{transition:none}}

/* ============ Invite & Earn — affiliate program (Shuffle-style) ============ */
.af-screen{ display:flex; flex-direction:column; gap:16px; }
.af-hero{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 22px; }
.af-hero-main{ min-width:0; }
.af-badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); background:color-mix(in srgb, var(--purple) 16%, transparent); padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.af-hero h1{ margin:0 0 8px; font-size:26px; line-height:1.1; }
.af-hero p{ margin:0; color:var(--muted); max-width:52ch; font-size:14px; line-height:1.55; }
.af-hero p b{ color:var(--ink); }
.af-rate{ flex:0 0 auto; text-align:center; padding:14px 20px; border-radius:14px; background:var(--surface-hi); border:1px solid var(--line); }
.af-rate b{ display:block; font-size:34px; font-weight:800; color:var(--purple); line-height:1; }
.af-rate small{ display:block; margin-top:4px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }

.af-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.af-stat{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.af-stat small{ color:var(--muted); font-size:12px; }
.af-stat b{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }

.af-claim{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; }
.af-claim-l small{ display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }
.af-claim-l b{ display:flex; align-items:center; gap:8px; font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; }
.af-claim-btn{ background:var(--purple); color:#fff; border:none; font-weight:700; padding:12px 22px; border-radius:12px; min-width:170px; }
.af-claim-btn:disabled{ opacity:.45; cursor:not-allowed; }

.af-how{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.af-step{ display:flex; gap:12px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:16px; }
.af-step-n{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; color:var(--purple); background:color-mix(in srgb, var(--purple) 16%, transparent); }
.af-step b{ display:block; font-size:14px; margin-bottom:3px; }
.af-step small{ color:var(--muted); font-size:12.5px; line-height:1.5; }

.af-formula{ padding:20px 22px; }
.af-formula h3{ margin:0 0 10px; font-size:16px; }
.af-formula p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.55; }
.af-eq{ display:block; margin:14px 0; padding:14px 16px; text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; font-weight:600; color:var(--ink); background:var(--surface-hi); border:1px solid var(--line); border-radius:12px; }
.af-formula-note{ font-size:12.5px; }

.af-adv{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.af-adv-item{ display:flex; gap:12px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:16px; }
.af-adv-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--purple); background:color-mix(in srgb, var(--purple) 14%, transparent); }
.af-adv-ic svg{ width:20px; height:20px; }
.af-adv-item b{ display:block; font-size:14px; margin-bottom:3px; }
.af-adv-item small{ color:var(--muted); font-size:12.5px; line-height:1.5; }

@media (max-width:720px){
  .af-hero{ flex-direction:column; align-items:flex-start; gap:14px; }
  .af-rate{ align-self:stretch; }
  .af-stats{ grid-template-columns:repeat(2,1fr); }
  .af-how,.af-adv{ grid-template-columns:1fr; }
  .af-claim{ flex-direction:column; align-items:stretch; }
  .af-claim-btn{ width:100%; }
}

/* Invite & Earn — code row label stacking */
.af-code{ padding:18px 20px; }
.af-code-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.af-code-row span{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.af-code-row small{ color:var(--muted); font-size:12px; }
.af-code-row .inv-code{ font-size:18px; font-weight:800; letter-spacing:.04em; }

/* ============ Player popup — Shuffle-style public card ============ */
.pp-hero{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 0 18px; margin:0 -2px; text-align:center; }
.pp-ava{ width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid var(--line-2); background:var(--surface-hi); }
.pp-name{ margin:2px 0 0; font-family:var(--f-disp); font-weight:700; font-size:21px; }
.pp-rank{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--muted); background:var(--surface-hi); border:1px solid var(--line); padding:5px 14px; border-radius:999px; }
.pp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:14px 6px; margin-bottom:16px; }
.pp-stats>div{ display:flex; flex-direction:column; gap:5px; align-items:center; text-align:center; padding:0 8px; }
.pp-stats>div+div{ border-left:1px solid var(--line); }
.pp-stats small{ color:var(--muted); font-size:11.5px; }
.pp-stats b{ font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:5px; }
.pp-hidden{ color:var(--muted); }
.pp-hidden svg{ width:14px; height:14px; }

/* Player popup — rank pill with tier icon */
.pp-rank{ display:inline-flex; align-items:center; gap:6px; }
.pp-rank img{ width:16px; height:16px; object-fit:contain; }

/* Redeem tab — one-card layout (matches deposit dep2-solo) */
.wb-redeem .dep2-card .dep2-lbl{display:block;margin:0 0 10px}
.wb-redeem .redeem-entry{display:block}
.wb-redeem .rdm-summary{margin:16px 0 14px;background:var(--surface)!important;border:1px solid var(--line)}
.wb-redeem .rdm-summary:empty{display:none}
.rdm2-min{margin:0;color:var(--muted);font-size:12.5px;text-align:center}
.wb-redeem .dep2-cta:disabled{opacity:.45;cursor:not-allowed}

/* ============ Bet modal — Shuffle-style game snapshots ============ */
/* Our in-game card colors (customCardRedColor / customCardBlackColor) */
.bm-card{color:#151020}
.bm-card.red{color:#ff4f9d}
.bm-card.lose{outline:2.5px solid #ff4d5e;outline-offset:-1px;box-shadow:0 4px 14px rgba(255,77,94,.25)}
.bm-total.lose{background:color-mix(in srgb,#ff4d5e 20%,var(--surface-3));border-color:color-mix(in srgb,#ff4d5e 55%,var(--line));color:#ff6b7c}
.bm-total.push{background:color-mix(in srgb,var(--gold,#ffd34e) 18%,var(--surface-3));border-color:color-mix(in srgb,var(--gold,#ffd34e) 50%,var(--line));color:var(--gold,#ffd34e)}
.bm-hand-cards.lg .bm-card{width:72px;height:100px}
.bm-hand-cards.lg .bm-card b{font-size:30px}
.bm-hand-cards.lg .bm-card i{font-size:25px}
@media(max-width:420px){.bm-hand-cards.lg .bm-card{width:58px;height:82px}.bm-hand-cards.lg .bm-card b{font-size:23px}.bm-hand-cards.lg .bm-card i{font-size:19px}}

/* Blackjack: dealer total pill above, player hand(s) larger below, side bets */
.bm-bj{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 16px}
.bm-bj-hands{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.bm-bj-hand{display:flex;flex-direction:column;align-items:center;gap:10px}
.bm-bj-sides{display:flex;gap:8px;justify-content:center;margin-top:2px}
.bm-bj-side{display:inline-flex;align-items:center;gap:0;border-radius:999px;overflow:hidden;font-family:var(--f-disp);font-weight:800;font-size:12px}
.bm-bj-side b{background:#101418;color:var(--success,#37f5a0);padding:5px 10px;border:1px solid color-mix(in srgb,var(--success,#37f5a0) 45%,transparent);border-right:none;border-radius:999px 0 0 999px}
.bm-bj-side i{font-style:normal;background:var(--success,#37f5a0);color:#08110c;padding:5px 9px;border-radius:0 999px 999px 0}
.bm-bj-side:only-child b:last-child{border-right:1px solid color-mix(in srgb,var(--success,#37f5a0) 45%,transparent);border-radius:999px}

/* Baccarat: player | banker side by side */
.bm-bac{display:flex;align-items:stretch;justify-content:center;gap:16px;padding:24px 12px}
.bm-bac-col{display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;min-width:0}
.bm-bac-col small{color:var(--muted);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bm-bac-col .bm-hand-cards{flex-wrap:nowrap}
.bm-bac-col .bm-hand-cards .bm-card+.bm-card{margin-left:-30px}
.bm-bac-div{width:1px;background:var(--line);margin:8px 0}
@media(max-width:420px){.bm-bac{gap:8px}.bm-bac-col .bm-hand-cards .bm-card+.bm-card{margin-left:-26px}}

/* Wheel: donut ring + pin + multiplier strip */
.bm-wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 14px}
.bm-wheel{width:min(300px,82%);height:auto;display:block}
.bm-wheel-win{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.bm-wheel-center{font-family:var(--f-disp);font-weight:800;font-size:34px}
.bm-wheel-strip{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bm-wheel-chip{font-family:var(--f-disp);font-weight:800;font-size:12.5px;padding:7px 12px;border-radius:9px;background:var(--surface-3);border:1px solid var(--line);color:#fff;border-bottom:3px solid var(--wc)}
.bm-wheel-chip.on{background:var(--wc);border-color:var(--wc);color:#0b0d12}
.bm-two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bm-two-fields .bm-field{margin:0 0 12px}

/* Play Free tab — one-card layout */
.wb-free .pf2-hero{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wb-free .pf2-hero h3{margin:6px 0 6px;font-size:18px}
.wb-free .pf2-hero p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
@media(max-width:640px){.wb-free .pf2-hero{flex-direction:column;align-items:flex-start}}

/* ============ Wallet alignment + deposit polish (owner pass 2026-07-02) ============ */
/* One centered column: title, tabs and card all share the same width */
@media (min-width:768px){
  .wallet-screen .wallet-title{max-width:640px;margin-left:auto;margin-right:auto}
  .wallet-screen .wallet-seg{max-width:640px;margin-left:auto;margin-right:auto}
}
/* Crypto tab: three stacked coin logos instead of the star */
.dep2-tri{display:inline-flex;align-items:center}
.dep2-tri img{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid var(--surface-2)}
.dep2-tri img+img{margin-left:-7px}
.dep2-seg-btn.on .dep2-tri img{border-color:var(--purple)}
/* Coin logos fill their circle — kills the pale ring around each icon */
.dep2-coin-ic{background:transparent}
.dep2-coin-ic img{width:34px;height:34px;border-radius:50%;object-fit:cover}
/* Method notes vary in length; reserve two lines so the card never jumps */
.dep2-note{min-height:38px}
.dep2-coins{align-content:start}

/* Notifications: header row sized like a normal toolbar, no floating grey slab */
#notifSheet .notif-tools{margin:0 0 8px;padding:8px 10px;border-radius:12px;
  background:var(--surface-hi);border:1px solid var(--line)}

/* Casino bets table: icon+game, tighter columns, no dead space */
@media(min-width:431px){.tx-table.casino .tx-head,.tx-line.casino{min-width:640px;grid-template-columns:minmax(150px,1fr) 150px 110px 96px 140px;gap:10px}}
.tx-game{display:inline-flex;align-items:center;gap:9px;min-width:0}
.tx-game b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-gico{width:26px;height:26px;border-radius:7px;object-fit:cover;flex:0 0 auto}

/* Play Free: image icons in the free-chips grid */
.pf-ic-rain img,.pf-ic-invite img,.pf-ic-promo img{width:22px;height:22px;object-fit:contain}

/* Notif icons: crypto logos + rank badges render bare — no circle chip behind them */
#notifSheet .notif .ni:has(img){background:none!important;border:none!important;box-shadow:none!important}
#notifSheet .notif .ni .ni-coin{width:38px!important;height:38px!important;border-radius:50%;object-fit:cover}
#notifSheet .notif .ni .ni-rank{width:40px!important;height:40px!important;object-fit:contain}

/* Casino bets: cap width so game sits near date (no comedic desktop stretch);
   grid columns sized to content, table left-aligned. Mobile keeps horizontal scroll. */
@media (min-width:768px){
  .tx-table.casino{max-width:860px}
  .tx-table.casino .tx-head,.tx-line.casino{min-width:0;grid-template-columns:minmax(160px,1.1fr) 140px 96px 90px 128px}
}

/* ============ Icon consistency pass (owner 2026-07-02) ============
   The three settings PNGs are all 120px canvases but their artwork fills
   different amounts (change-password 64px, edit-profile 75px, private-mode
   89px). Scales below were computed from the measured artwork bounding boxes
   so every icon renders ~26px of visible art in the same 34px box. */
.set-ic .asset-ic{width:34px;height:34px}
.set-ic img.asset-ic{transform:none}
.set-ic img[src*="edit-profile"]{transform:scale(1.22)}
.set-ic img[src*="change-password"]{transform:scale(1.43)}
.set-ic img[src*="private-mode-live-bets"]{transform:scale(1.03)}

/* Sidebar: nav PNGs show ~22.6px of art in their 26px box; the Challenges
   inline SVG at 22px read smaller. 24px + its rounded caps matches. */
.sb-nav button .sb-ico svg{width:26px;height:26px}
@media (min-width:768px){ .sb-ico svg{width:26px;height:26px} }

/* Sweep fixes 2026-07-02 */
/* balance-pop currency rows are real buttons now (keyboard reachable) */
.bp-row{width:100%;text-align:left;font:inherit;background:none;border:none;cursor:pointer}
/* inventory: icon card for non-pack items (coupons etc.) */
.inv-card-ic{width:44px;height:44px;display:grid;place-items:center;color:var(--purple)}
.inv-card-ic svg{width:26px;height:26px}
.inv-card.is-static{cursor:default}
/* tiny phones: keep the topbar from clipping the profile button */
@media(max-width:430px){.tb-balance{min-width:120px}}
@media(max-width:374px){.topbar{gap:5px}.tb-balance{min-width:104px}}

/* In-place data refreshes re-render the same screen; skip the entrance
   animation so timers/balances update without the whole page dipping. */
#stage[data-no-anim="1"] .stagger>*{animation:none!important;opacity:1!important;transform:none!important}

/* Challenges PNG art fills 86/128px vs ~111/128 for its siblings — scale to parity */
.sb-nav button[data-nav="challenges"] .sb-ico img{transform:scale(1.29)}