:root{--primary-400:#a855f7;--primary-500:#9333ea;--neutral-50:#fafafa;--neutral-100:#e5e7eb;--neutral-200:#2e3348;--neutral-300:#262a3d;--neutral-400:#1a1d2e;--neutral-500:#14161f;--neutral-600:#0e1018;--muted:#9497a8;--navbar-h:78px;--radius:8px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:#06070c;color:#e9eaf1;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::-webkit-scrollbar{width:0;height:0}
.site-header{position:fixed;top:0;left:0;right:0;height:var(--navbar-h);background:var(--neutral-500);border-bottom:1px solid rgba(255,255,255,.05);z-index:100}
.header-inner{max-width:1280px;height:100%;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;position:relative}
.logo img{height:30px}
.nav{display:flex;align-items:center;gap:8px;height:100%;margin-left:24px}
.nav-link{display:flex;align-items:center;gap:8px;height:100%;padding:0 12px;color:var(--muted);font-weight:700;font-size:.875rem;transition:color .2s}
.nav-link:hover{color:#fff}
.header-right{display:flex;align-items:center;gap:12px}
.balance-chip{min-width:100px;height:40px;padding:0 20px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--neutral-400);font-weight:600;font-size:.875rem}
.deposit-btn{height:40px;padding:0 24px;border-radius:var(--radius);background:var(--primary-500);color:#fff;font-weight:600;font-size:.875rem}
.avatar-wrap{position:relative;width:50px;height:50px;border-radius:var(--radius);background:#fafafa}
.avatar-inner{position:absolute;inset:3px;border-radius:5px;background:var(--neutral-100);overflow:hidden}
.avatar-inner img{width:100%;height:100%;object-fit:cover}
.level-badge{position:absolute;top:6px;right:-10px;height:28px;min-width:32px;padding:0 6px;border-radius:5px;background:var(--neutral-500);color:var(--primary-400);font-weight:700;font-size:.7rem;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--primary-400)}
main{padding-top:var(--navbar-h)}
.view{max-width:1280px;margin:0 auto;padding:40px;display:flex;flex-direction:column;gap:32px}
.top-row{display:flex;flex-direction:column;gap:24px}
@media (min-width:1000px){.top-row{flex-direction:row}}
.divider{height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--neutral-100),transparent);opacity:.25}
.sidebar-card{position:relative;display:flex;flex-direction:column;padding:32px;background:var(--neutral-400);border-radius: 16px;overflow:hidden;min-height:520px;flex-shrink:0}
@media (min-width:1000px){.sidebar-card{width:360px;height:720px;min-height:unset}}
.sidebar-card .glow-blob{position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);width:100%;height:128px;background:var(--primary-400);border-radius:100%;filter:blur(40px)}
.sidebar-card .fade-top{position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,var(--neutral-400),transparent);z-index:1}
.sidebar-card .accent-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary-400),transparent);z-index:1}
.sidebar-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;min-height:100%}
.sidebar-title{font-weight:600;font-size:1.25rem}
.user-row{display:flex;align-items:center;gap:32px}
.joined{color:var(--muted);font-size:.875rem;font-weight:500;opacity:.75}
.progress-block{display:flex;flex-direction:column;gap:8px}
.progress-header{display:flex;justify-content:space-between;font-size:.7rem;font-weight:600;color:var(--muted)}
.progress-header strong{color:#fff}
.progress-track{position:relative;width:100%;height:8px;border-radius:999px;background:var(--neutral-600);border:1px solid var(--neutral-200);overflow:hidden}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary-400),var(--primary-400));border-radius:999px;position:relative}
.progress-fill::after{content:'';position:absolute;top:0;bottom:0;right:-16px;width:40px;background:var(--primary-500);filter:blur(12px)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius);font-weight:600;font-size:1rem;height:48px;padding:0 24px;overflow:hidden;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);background:var(--primary-500);transition:background .15s}
.btn::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);pointer-events:none}
.btn::after{content:'';position:absolute;left:2px;right:2px;top:2px;bottom:0;border-radius:6px;background:var(--primary-500);transition:background .15s;pointer-events:none}
.btn>span{position:relative;z-index:1}
.btn:hover,.btn:hover::after{background:var(--primary-400)}
.btn.full{width:100%}
.btn.sm{height:40px;padding:0 24px;font-size:.875rem}
.btn.tertiary{background:var(--neutral-50);color:#0b0d17;text-shadow:none}
.btn.tertiary::after{background:var(--neutral-50)}
.btn.tertiary:hover,.btn.tertiary:hover::after{background:var(--neutral-100)}
.carousel{position:relative;border-radius:var(--radius);overflow:hidden}
.carousel-track{display:flex;transition:transform .45s ease}
.slide{flex:0 0 100%;background:var(--neutral-400);/* border:1px solid var(--neutral-200); */border-radius: 16px;background-size:cover;background-position:bottom;padding:24px;min-height:220px;display:flex;flex-direction:column;justify-content:center}
@media (min-width:1000px){.slide{padding:32px;min-height: 300px;}}
.slide.halloween{background-image:url('https://cdn.rollbux.com/theme/halloween/halloween-events-banner.jpg')}
.slide.discord{background-image:url('/assets/media/banner/ac8ffda1-7302-4730-a433-dea83d489bcb.png')}
.slide.cases{background-image:url('https://cdn.rollbux.com/backgrounds/daily-cases-banner.png')}
.slide-text{display:flex;flex-direction:column;gap:4px;margin-bottom:32px}
.slide-title{font-weight:700;font-size:30px;line-height:34px;color:#fff}
.slide-sub{color:var(--muted);font-size:.875rem;font-weight:500}
.slide-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.slide-actions .or{color:var(--muted);font-size:.75rem}
.carousel-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:20}
.carousel-dots button{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.7);transition:all .3s}
.carousel-dots button.active{width:20px;background:#fff}
.section{display:flex;flex-direction:column;gap:14px}
.section-head{display:flex;align-items:center;justify-content:space-between}
.section-head .left{display:flex;align-items:center;gap:8px}
.section-head h2{font-weight:700;font-size:1.05rem}
/* ══════════════════════════════════════════
   HOUSE GAMES — horizontal scroll row
   ══════════════════════════════════════════ */

.games-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.games-row::-webkit-scrollbar { height: 6px; }
.games-row::-webkit-scrollbar-track { background: transparent; }
.games-row::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, .3);
  border-radius: 999px;
}



.game-tile {
  position: relative;
  flex: 0 0 auto;
  width: 148px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  background: #0b0d17;
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  transition: transform .18s ease;
}
.game-tile:hover { transform: translateY(-3px); }

/* 2px full accent border */
.game-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 10;
  padding: 2px;
  background: var(--accent, #a855f7);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.game-tile__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.game-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
}

.game-tile__badge {
  position: absolute;
  top: 2px;
  left: 28px;
  right: 28px;
  z-index: 6;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent, #a855f7);
  padding: 5px 6px;
  border-radius: 0 0 5px 5px;
  line-height: 1;
}
.game-tile__title {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  z-index: 6;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  line-height: 1;
  padding: 0 6px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0);
}

@media (max-width: 640px) {
  .game-tile { width: 124px; height: 168px; }
  .game-tile__title { font-size: 18px; }
  .game-tile__badge { font-size: 9px; padding: 5px; top: 8px; left: 8px; right: 8px; }
}
.battles-list{display:grid;gap:14px}
.battle-row{position:relative;overflow:hidden;background:var(--neutral-400);border:1px solid var(--neutral-200);border-radius:12px;transition:transform .2s}
.battle-row:hover{transform:translateY(-2px)}
.battle-row::before{content:'';position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 50%,rgba(26,29,46,0) 0%,rgba(26,29,46,.6) 40%,#1a1d2e 70%);opacity:.35;pointer-events:none}
.battle-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;padding:12px}
@media (min-width:850px){.battle-inner{flex-direction:row;align-items:center;gap:24px;padding:12px 24px}}
.team-col{display:flex;flex-direction:column;align-items:center;gap:10px}
@media (min-width:850px){.team-col{width:272px}}
.team-label{font-size:.875rem;font-weight:600;color:var(--muted);opacity:.75;text-transform:capitalize}
.avatar-stack{display:flex;align-items:center}
.mini{width:36px;height:36px;padding:2px;border:1px solid var(--primary-400);border-radius:6px;background:var(--neutral-100);overflow:hidden;flex-shrink:0}
.mini+.mini{margin-left:-8px}
.mini img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:5px}
.case-col{position:relative;flex:1;border-radius:11px;background:rgba(10,11,18,.8);outline:1px solid var(--neutral-100);outline-offset:-1px;min-height:96px;overflow:hidden}
.case-count{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:5px;background:var(--neutral-200);color:var(--muted);font-size:10px;font-weight:600;line-height:1.8;z-index:20}
.case-strip{display:flex;align-items:center;gap:8px;padding:10px 8px;overflow-x:auto;width:100%}
.case-strip img{width:77px;height:77px;object-fit:cover;flex-shrink:0}
.meta-col{display:flex;align-items:center;gap:16px}
@media (min-width:850px){.meta-col{gap:24px}}
.battle-cost{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
@media (min-width:850px){.battle-cost{flex:none;width:128px}}
.cost-line span{font-weight:700;font-size:.95rem}
.cost-label{font-size:.875rem;font-weight:600;color:var(--muted);opacity:.75}
.battle-cta{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
@media (min-width:850px){.battle-cta{flex:none;width:128px}}
.payment-heading{text-align:center;font-weight:500;font-size:1.05rem;color:var(--muted);opacity:.75;margin-bottom:28px}
.marquee{position:relative;overflow:hidden;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 80%,transparent)}
.marquee-track{display:flex;gap:14px;padding:8px;animation:marquee 40s linear infinite}
.marquee-group{display:flex;gap:14px;flex-shrink:0}
@keyframes marquee{to{transform:translateX(calc(-50% - 7px))}}
.pay-chip{position:relative;height:51px;min-width:100px;padding:14px 24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--neutral-400);border:1px solid var(--neutral-200);box-shadow:inset 0 2px 4px rgba(0,0,0,.2);overflow:hidden;cursor:pointer}
.pay-chip::after{content:'';position:absolute;bottom:0;left:50%;transform:translate(-50%,66%);width:20%;height:32px;background:#a855f7;border-radius:100%;filter:blur(12px)}
.pay-chip .label{font-weight:700;font-size:1rem;color:rgba(255,255,255,.75);position:relative;z-index:1}
.how-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:1000px){.how-grid{grid-template-columns:repeat(3,1fr)}}
.how-card{position:relative;overflow:hidden;padding:26px 30px;background:var(--neutral-400);/* border:2px solid var(--neutral-200); */border-radius: 16px;box-shadow:0 10px 15px -3px rgba(0,0,0,.3)}
.how-card img{position:relative;z-index:1;height:144px;width:auto;margin:0 auto 16px;display:block}
.how-card h3{position:relative;z-index:1;text-align:center;font-weight:700;font-size:1.05rem}
.how-card p{position:relative;z-index:1;text-align:center;margin-top:8px;font-size:.875rem;font-weight:500;color:var(--muted);opacity:.75}
.site-footer{border-top:1px solid var(--neutral-100);background:var(--neutral-600);padding:48px 0;position:relative;overflow:hidden;margin-top:64px}
.site-footer::before{content:'';position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:1200px;height:152px;background:var(--primary-500);opacity:.12;border-radius:100%;filter:blur(80px)}
.footer-inner{position:relative;max-width:1280px;margin:0 auto;padding:0 40px;display:flex;flex-direction:column;gap:48px}
@media (min-width:1024px){.footer-inner{flex-direction:row;gap:64px}}
.footer-about{max-width:448px;display:flex;flex-direction:column;gap:16px}
.footer-about .warn{color:var(--primary-400);font-weight:700}
.footer-about a{font-size:.875rem}
.footer-about p{font-size:.75rem;color:var(--muted);opacity:.5}
.footer-links{display:flex;gap:48px;flex-wrap:wrap}
.footer-links>div{display:flex;flex-direction:column;gap:8px}
.footer-links h4{color:var(--primary-400);font-weight:600;font-size:.875rem}
.footer-links a{font-size:.75rem;opacity:.8}
.footer-links a:hover{opacity:1;text-decoration:underline}
.chat-sidebar{position:fixed;top:var(--navbar-h);right:0;width:350px;height:calc(100dvh - var(--navbar-h));background:var(--neutral-400);border-left:1px solid rgba(255,255,255,.05);transform:translateX(100%);transition:transform .3s ease;z-index:90}
.chat-sidebar[data-open="true"]{transform:translateX(0)}
.chat-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid rgba(255,255,255,.05);font-weight:600}
.chat-body{padding:16px}
.float-btn{position:fixed;bottom:16px;z-index:40;width:52px;height:52px;border-radius:var(--radius);background: #1a1d2e;/* border:1px solid var(--neutral-100); */color:var(--muted);display:none;align-items:center;justify-content:center;/* box-shadow:0 7px 7px rgba(0,0,0,.35); */transition:color .2s}
.float-btn:hover{color:#fff}
.float-btn svg{width:24px;height:24px}
.float-btn.right{right:16px}
@media (min-width:1024px){.float-btn{display:flex}}

/* =====================================================================
   HEADER — auth, balance, user chip, notif bell
   ===================================================================== */
.header-left{display:flex;align-items:center;gap:12px;height:100%}
.header-right{display:flex;align-items:center;gap:12px}

/* Sidebar toggle */
.sidebar-toggle{
  width:44px;height:44px;flex-shrink:0;
  border-radius:14px;
  background:var(--neutral-400);
  border:2px solid var(--neutral-500);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
  cursor:pointer;
}
.sidebar-toggle:hover{background:var(--neutral-300)}
.sidebar-toggle svg{
  width:22px;height:22px;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}

/* ============================================
   PURPLE BALANCE CHIP
   ============================================ */
.center-balance{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;align-items:center;
}
.balance-container{
  position:relative;
  display:flex;align-items:center;justify-content:flex-start;
  gap:.5rem;
  background:#1a1d2e;
  height:44px;
  padding-left:.625rem;
  padding-right:.375rem;
  border-radius:.825rem;
  flex-shrink:0;
  transition:all .3s ease-in-out;
  overflow:hidden;
  width:fit-content;
}
.balance-hover-wrapper{display:inline-flex;align-items:center;cursor:pointer;transition:all .2s ease}
.balance-hover-wrapper .balance-displayed{display:inline-block}
.balance-hover-wrapper .balance-usd{display:none;color:#a855f7;font-weight:600}
.balance-hover-wrapper:hover .balance-displayed{display:none}
.balance-hover-wrapper:hover .balance-usd{display:inline-block}
.balance-hover-wrapper .balance-icon-f{display:inline-block}
.balance-hover-wrapper .balance-icon-usd{display:none}
.balance-hover-wrapper:hover .balance-icon-f{display:none}
.balance-hover-wrapper:hover .balance-icon-usd{display:inline-block}

.balance-glow{
  position:absolute;inset:0;
  border-radius:.825rem;
  pointer-events:none;z-index:20;padding:2px;
  transition:opacity .3s ease;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.balance-glow--purple{
  background:radial-gradient(circle at 0% 100%,
    rgb(168,85,247) 0%,
    rgba(168,85,247,.85) 18px,
    rgba(168,85,247,0) 34px);
  opacity:1;
}
.balance-glow--purple-hover{
  background:radial-gradient(circle at 0% 100%,
    rgb(147,51,234) 0%,
    rgba(147,51,234,.85) 20px,
    rgba(147,51,234,0) 38px);
  opacity:0;
}
.balance-container:hover .balance-glow--purple{opacity:0}
.balance-container:hover .balance-glow--purple-hover{opacity:1}

.balance-orbs{
  position:absolute;inset:0;border-radius:.825rem;
  overflow:hidden;pointer-events:none;z-index:0;
}
.balance-orb{
  position:absolute;left:-1rem;top:50%;transform:translateY(-50%);
  width:4rem;height:4rem;border-radius:9999px;
  filter:blur(12px);transition:opacity .3s ease;
}
.balance-orb--purple{background:rgba(168,85,247,.28);opacity:1}
.balance-orb--purple-hover{background:rgba(147,51,234,.4);opacity:0}
.balance-container:hover .balance-orb--purple{opacity:0}
.balance-container:hover .balance-orb--purple-hover{opacity:1}

.balance-button{
  position:relative;z-index:10;
  display:flex;align-items:center;cursor:pointer;
  background:transparent;border:none;padding:0;color:inherit;
}
.balance-text{
  display:flex;align-items:center;gap:.5rem;
  white-space:nowrap;flex-shrink:0;
}
.balance-displayed{
  font-weight:700;font-size:.875rem;line-height:1;
  color:#d7dbe2;
}
.balance-usd{
  font-weight:700;font-size:.875rem;line-height:1;
  color:#ffffff;
}

.add-balance-button{
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#9333ea;
  color: #000000;
  font-weight:700;
  font-size:.75rem;
  height:28px;
  width:28px;
  border-radius:.55rem;
  border:none;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 2.5px 0 #6b1fb8;
  flex-shrink:0;
}
.add-balance-button:hover{background:#a855f7}
.add-balance-button:active{transform:translateY(2px);box-shadow:none}
.add-balance-button svg{width:16px;height:16px}

/* Notification bell */
.notif-bell{
  position:relative;
  width:44px;
  height:44px;
  border-radius:14px;
  background: #1a1d2e;
  /* border:1px solid var(--neutral-200); */
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s;
}
.notif-bell:hover{background:var(--neutral-300)}
.notif-bell svg{width:20px;height:20px}
.notif-badge{
  position:absolute;
  top:6px;right:6px;
  min-width:16px;height:16px;
  padding:0 4px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.notif-badge.hidden{display:none}

/* User chip */
.user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  height:48px;
  padding:6px 12px 6px 6px;
  border-radius:14px;
  background: #1a1d2e;
  /* border:1px solid var(--neutral-200); */
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s,transform .15s;
}
.user-chip:hover{background:var(--neutral-300)}
.user-chip:active{transform:scale(.98)}
.user-chip .hex{
  width:36px;height:36px;flex-shrink:0;
  border-radius:10px;overflow:hidden;
  border:2px solid var(--primary-400);
  background:var(--neutral-500);
}
.user-chip .hex img{width:100%;height:100%;object-fit:cover;display:block}
.user-chip .info{
  display:flex;flex-direction:column;gap:5px;
  min-width:0;max-width:120px;
}
.user-chip .uname{
  color:#fff;font-weight:700;font-size:12px;
  letter-spacing:.02em;line-height:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.user-chip .bar{
  width:100%;
  height:3px;
  border-radius:999px;
  background: #8f4bd4;
  overflow:hidden;
}
.user-chip .bar > span{
  display:block;height:100%;width:0%;
  background:var(--primary-400);
  border-radius:999px;
  transition:width .4s ease;
}

/* Sign out */
.signout-btn{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--neutral-400);
  /* border:1px solid var(--neutral-200); */
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:color .15s,background .15s;
}
.signout-btn:hover{color:#fff;background:var(--neutral-300)}

/* Auth buttons wrapper */
.header-auth-out{display:flex;align-items:center;gap:8px}

/* Responsive */
@media (max-width:767px){
  .sidebar-toggle{width:40px;height:40px;border-radius:12px}
  .notif-bell    {width:40px;height:40px;border-radius:12px}
  .notif-bell svg{width:18px;height:18px}
  .user-chip     {height:40px;padding:4px;border-radius:12px}
  .user-chip .hex{width:32px;height:32px;border-radius:8px}
  .user-chip .info{display:none}
  .center-balance{left:auto;right:12px;transform:none}
  .balance-container{height:40px;padding-left:.5rem;padding-right:.25rem;gap:.35rem}
  .balance-displayed,.balance-usd{font-size:.8rem}
  .balance-container .add-balance-button{height:24px;width:24px}
  .balance-container .add-balance-button svg{width:14px;height:14px}
}

#app-howitworks {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}


    /* ══════════════════════════════════════════════════════════════
       HEADER — RORUSH style
       ══════════════════════════════════════════════════════════════ */

    /* ─── RESET ─── */
    .site-header *,
    .site-header *::before,
    .site-header *::after {
      box-sizing: border-box;
      border: 0 solid;
      margin: 0;
      padding: 0;
    }
    .site-header img,
    .site-header svg { display: block; vertical-align: middle; max-width: 100%; }
    .site-header button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  height: 34px;
  padding: 0 17px;
  overflow: hidden;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  /* background: #9333eab0; */
  transition: background .15s;
  }
    .site-header a { color: inherit; text-decoration: inherit; }
    .site-header ol,
    .site-header ul,
    .site-header menu { list-style: none; }
    .site-header [hidden] { display: none !important; }

    /* ─── ROOT TOKENS ─── */
    .site-header {
      --navbar-height: 78px;
      --announcement-bar-height: 0px;
      --radius: 0.625rem;

      --neutral-50: #fafafa;
      --neutral-100: #e5e7eb;
      --neutral-200: #2e3348;
      --neutral-300: #262a3d;
      --neutral-400: #1a1d2e;
      --neutral-500: #14161f;
      --neutral-600: #0e1018;

      --primary-400: #a855f7;
      --primary-500: #9333ea;

      --btn-primary-400: #a855f7;
      --btn-primary-500: #9333ea;

      --color-btn-primary-500: var(--btn-primary-500);
      --color-neutral-200: var(--neutral-200);

      --green-700: #1f8a3f;
      --green-100: #d8fbe1;

      /* FIX: orange level badge */
      --level-badge-0: #f0951a;

      --foreground: #e9eaf1;
      --muted-foreground: #9497a8;

      --spacing: 0.25rem;

    }

    /* ─── HEADER SHELL ─── */
    .site-header {
      position: fixed;
      inset-inline: 0;
      top: var(--announcement-bar-height);
      z-index: 100;
      width: 100%;
      height: var(--navbar-height);
      background-color: var(--neutral-500);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      color: var(--foreground);
    }

    .header-inner {
      position: relative;
      margin-inline: auto;
      width: 100%;
      max-width: none;
      height: 100%;
      padding-inline: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    @media (min-width: 768px)  { .header-inner { padding-inline: 1.25rem; } }
    @media (min-width: 1024px) { .header-inner { padding-inline: 2rem; } }
    @media (min-width: 1280px) { .header-inner { padding-inline: 2.5rem; } }

    .header-left {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      height: 100%;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    @media (min-width: 1280px) { .header-right { gap: 1rem; } }
    @media (min-width: 1536px) { .header-right { gap: 1.5rem; } }

    /* ══════════════ LOGO ══════════════ */
    .logo {
      display: inline-flex;
      align-items: center;
      transition: transform 0.2s ease;
      will-change: transform;
    }
    .logo:active { transform: scale(0.95); }

    .logo-icon {
      position: relative;
      width: 44px;
      height: 44px;
      display: flex;
      justify-content: flex-start;
      aspect-ratio: 1;
      color: var(--primary-400);
    }
    .logo-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

    .logo-full {
      position: relative;
      aspect-ratio: 4.59;
      height: 30px;
      justify-content: flex-start;
      display: none;
      color: var(--primary-400);
    }
    .logo-full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    @media (min-width: 1280px) {
      .logo-icon { display: none; }
      .logo-full { display: flex; }
    }
    @media (min-width: 1600px) { .logo-full { height: 34px; } }

    /* ══════════════ NAV ══════════════ */
    .header-nav {
      display: none;
      align-items: center;
      gap: 0.5rem;
      height: 100%;
    }
    @media (min-width: 1024px) { .header-nav { display: flex; } }

    .nav-link {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      height: 100%;
      padding-inline: 0.75rem;
      overflow: hidden;
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--muted-foreground);
      transition: color 0.15s ease;
    }
    .nav-link:hover { color: #fff; }
    .nav-link[data-active="true"] { color: #fff; }

    .nav-link > span {
      position: relative;
      display: flex;
      align-items: center;
      height: 100%;
    }
    .nav-link > span::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: calc(40% + 4rem);
      height: 56px;
      background-image: radial-gradient(
        ellipse 50% 85% at 50% 85%,
        rgba(168, 85, 247, 0.18) 0%,
        rgba(168, 85, 247, 0.15) 18%,
        rgba(168, 85, 247, 0.10) 38%,
        rgba(168, 85, 247, 0.055) 58%,
        rgba(168, 85, 247, 0.02) 78%,
        transparent 100%
      );
      opacity: 0;
      transition: opacity 0.15s ease;
      pointer-events: none;
    }
    .nav-link > span::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 3px;
      background: var(--primary-400);
      border-radius: 9999px;
      opacity: 0;
      transition: opacity 0.15s ease;
      pointer-events: none;
    }
    .nav-link[data-active="true"] > span::before { opacity: 0.6; }
    .nav-link[data-active="true"] > span::after  { opacity: 1; }

    .nav-icon { width: 18px; height: 18px; color: inherit; transition: color 0.15s ease; }
    .nav-link[data-active="true"] .nav-icon { color: var(--primary-400); }

    .nav-chevron {
      width: 18px;
      height: 18px;
      color: var(--muted-foreground);
      transition: rotate 0.15s ease;
    }
    .nav-link[aria-expanded="true"] .nav-chevron { rotate: 180deg; }

    /* ══════════════ PROMO BUTTONS ══════════════ */
    .promo-wrap {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 1rem;
    }
    .promo-wrap::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100%;
      height: 50%;
      transform: translate(-50%, -50%);
      background: var(--primary-400);
      filter: blur(40px);
      opacity: 0.25;
      pointer-events: none;
    }

    .promo-btn {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 38px;
      border-radius: calc(var(--radius) - 2px);
      overflow: hidden;
      background: var(--neutral-400);
    }
    .promo-btn--race   { padding-left: 3rem;   padding-right: 1.5rem; width: 156px; }
    .promo-btn--raffle { padding-left: 3.5rem; padding-right: 1.5rem; width: 180px; margin-left: 1rem; }

    .promo-btn::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 9999px;
      background: var(--primary-500);
      height: 36px;
      width: 80%;
      filter: blur(16px);
      bottom: -100%;
      pointer-events: none;
    }
    .promo-btn-bg {
      position: absolute;
      inset: 1px;
      border-radius: 10px;
      object-fit: cover;
      opacity: 0.6;
      z-index: 0;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
    }
    .promo-btn-svg {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      fill: transparent;
      width: 100%;
      height: 100%;
    }
    .promo-btn-content {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .promo-btn-coin { position: relative; width: 1rem; height: 1rem; flex-shrink: 0; }
    .promo-btn-coin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .promo-btn-amount { font-size: 0.75rem; font-weight: 700; }
    .promo-btn-label  { font-size: 0.75rem; font-weight: 700; font-style: italic; color: var(--primary-400); }

    .promo-trophy {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      pointer-events: none;
      z-index: 1;
      object-fit: cover;
    }
    .promo-trophy--race   { left: -1rem;    width: 4.5rem; height: 4.5rem; }
    .promo-trophy--raffle {left: -1.25rem;width: 4.5rem;}

    @keyframes dash {
      0%   { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -1000px; }
    }
    .animate-dash { animation: dash 10s linear infinite; }

    /* ══════════════ RIGHT SIDE ══════════════ */
    .right-group {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    @media (min-width: 1280px) { .right-group { gap: 1rem; } }

    /* ─── ICON BUTTON ─── */
    .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: calc(var(--radius) - 2px);
      background: var(--neutral-400);
      border: 1px solid transparent;
      color: var(--muted-foreground);
      transition: border-color 0.15s ease, color 0.15s ease;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }
    .icon-btn:hover { border-color: var(--neutral-300); color: #fff; }
    .icon-btn svg { width: 1.5rem; height: 1.5rem; }

    /* ══════════════ BALANCE PILL ══════════════ */
    .balance-pill {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.625rem;
      background: var(--neutral-400);
      height: 44px;
      padding: 0 0.375rem 0 0.625rem;
      min-width: 170px;
      border-radius: 0.825rem;
      z-index: 30;
      flex-shrink: 0;
    }
    @media (min-width: 640px) { .balance-pill { min-width: 190px; } }

    .balance-pill__border {
      position: absolute;
      inset: 0;
      border-radius: 0.825rem;
      pointer-events: none;
      z-index: 20;
      padding: 2px;
      background: radial-gradient(
        circle at 0% 100%,
        #a855f7 0%,
        rgba(168, 85, 247, 0.85) 18px,
        rgba(168, 85, 247, 0) 34px
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
              mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
    }

    .balance-pill__glow {
      position: absolute;
      inset: 0;
      border-radius: 0.825rem;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
    }
    .balance-pill__glow::before {
      content: '';
      position: absolute;
      left: -1rem;
      top: 50%;
      transform: translateY(-50%);
      width: 4rem;
      height: 4rem;
      border-radius: 9999px;
      filter: blur(12px);
      background: rgba(168, 85, 247, 0.28);
    }

    .balance-pill__left {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      position: relative;
      z-index: 10;
      min-width: 0;
    }

    .balance-pill__icon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .balance-pill__icon svg { display: block; }

    .balance-pill__meta {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1;
    }
    .balance-pill__label {
      font-weight: 700;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 3px;
      line-height: 1;
      color: var(--primary-400);
    }
    .balance-pill__value {
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      line-height: 1;
    }

    /* ══════════════ WALLET BUTTON ══════════════ */
    .site-header .balance-wallet-btn {
      background: var(--primary-500);
      color: #ffffff;
      font-weight: 700;
      font-size: 0.75rem;
      height: 28px;
      min-width: 28px;
      width: 28px;
      border-radius: 0.55rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
      flex-shrink: 0;
      position: relative;
      z-index: 10;
      margin-left: auto;
      cursor: pointer;
      padding: 0;
      box-shadow: 0 2.5px 0 #6b1fb8;
      transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
      align-self: center;
      max-height: 28px;
    }
    .site-header .balance-wallet-btn:hover  { background: var(--primary-400); }
    .site-header .balance-wallet-btn:active {
      transform: translateY(2.5px);
      box-shadow: 0 0 0 #6b1fb8;
    }
    .site-header .balance-wallet-btn .material-symbols-rounded {
      font-family: "Material Symbols Rounded", sans-serif;
      font-size: 18px;
      width: 18px;
      height: 18px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      white-space: nowrap;
      font-feature-settings: "liga";
      font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #ffffff;
    }
    .site-header .balance-wallet-label {
      display: none;
      font-weight: 900;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.025em;
      line-height: 1;
      color: #ffffff;
    }
    @media (min-width: 1280px) {
      .site-header .balance-wallet-btn {
        width: auto;
        min-width: auto;
        max-height: 28px;
        padding: 0 0.75rem;
      }
      .site-header .balance-wallet-label { display: inline; }
    }

    /* ─── SEPARATOR ─── */
    .separator {
      display: none;
      width: 1px;
      height: 2rem;
      background: var(--neutral-200);
      flex-shrink: 0;
    }
    @media (min-width: 1280px) { .separator { display: block; } }

    /* ══════════════ PROFILE / LEVEL CHIP ══════════════ */
    .profile-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }
    @media (min-width: 1280px) { .profile-wrap { gap: 1rem; } }

    .profile-btn { display: flex; align-items: center; gap: 1.125rem; }
    .profile-btn[aria-expanded="true"] svg.profile-chev { rotate: 180deg; }

    .level-badge {
      position: relative;
      height: 1.75rem;
      width: 2.9375rem;
      background: var(--neutral-500);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--level-color, var(--level-badge-0));
      border-bottom: 2px solid var(--level-color, var(--level-badge-0));
      box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.05) inset;
    }
    .level-badge::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        circle at 50% 200%,
        color-mix(in oklch, var(--level-color, var(--level-badge-0)) 50%, transparent) 0%,
        transparent 100%
      );
      pointer-events: none;
    }
    .level-badge > span {
      position: relative;
      z-index: 10;
      margin-top: 1px;
      text-shadow:
        0 1px 2px rgba(0,0,0,0.1),
        0 3px 2px rgba(0,0,0,0.1),
        0 4px 8px rgba(0,0,0,0.1);
    }

  .avatar-ring {
      position: relative;
      width: 3.525rem;
      height: 3.525rem;
      border-radius: 22px;
      flex-shrink: 0;
      --progress: 0%;
      --level-color: var(--level-badge-0);
    
    }
    .avatar-ring-inner {
      position: absolute;
      inset: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: var(--neutral-400);
      overflow: hidden;
    }
    .avatar-ring-inner > div { position: relative; width: 100%; height: 100%; }
    .avatar-ring-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

    .profile-chev {
      width: 1.125rem;
      height: 1.125rem;
      margin-left: -0.5rem;
      rotate: -90deg;
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }

    .avatar-ring .level-badge--mobile {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 20px;
      height: 20px;
      min-width: 0;
      padding: 0;
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      border-radius: 6px;
      background: var(--neutral-500);
      color: var(--level-color, var(--level-badge-0));
      border: 2px solid var(--level-color, var(--level-badge-0));
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
    }
    .avatar-ring .level-badge--mobile::before { display: none; }
    .avatar-ring .level-badge--mobile > span {
      margin: 0;
      line-height: 1;
      text-shadow: none;
    }

    /* ══════════════ LOGIN BUTTON ══════════════ */
    .login-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 40px;
      padding: 0 22px;
      border-radius: var(--radius);
      background: var(--primary-500);
      color: #fff;
      font-weight: 600;
      font-size: 0.875rem;
      letter-spacing: 0.02em;
      transition: background 0.15s ease, transform 0.1s ease;
      border: none;
      cursor: pointer;
    }
    .login-btn:hover  { background: var(--primary-400); }
    .login-btn:active { transform: translateY(1px); }

    /* ══════════════ RESPONSIVE ══════════════ */
    @media (max-width: 767px) {
      .header-inner    { padding-inline: 0.75rem; }
      .header-left     { gap: 0.5rem; }
      .header-right    { gap: 0.5rem; }
      .right-group     { gap: 0.5rem; }
      .login-btn       { height: 36px; padding: 0 14px; font-size: 12px; }
      .icon-btn        { width: 36px; height: 36px; }
      .icon-btn svg    { width: 1.25rem; height: 1.25rem; }
      .avatar-ring     { width: 40px; height: 40px; }
      .avatar-ring-inner { inset: 2.5px; border-radius: 6px; }
      .balance-pill    { height: 40px; min-width: 150px; padding: 0 0.25rem 0 0.5rem; }
    }
/* ══════════════ LOADING SCREEN ══════════════ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #06070c;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  overflow: hidden;
}
.loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Soft purple glow behind the logo */
.loader-inner::before {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(168, 85, 247, 0.08) 40%, transparent 70%);
  filter: blur(12px);
  animation: loader-glow 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes loader-glow {
  0%, 100% { opacity: 0.6; transform: scale(1);    }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.loader-logo {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  animation: loader-float 2.4s ease-in-out infinite;
}
.loader-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.5));
}
@keyframes loader-float {
  0%, 100% { transform: translateY(0);     }
  50%      { transform: translateY(-8px);  }
}

   /* ══════════════ HEADER STYLES ══════════════ */
    .site-header *, .site-header *::before, .site-header *::after {
      box-sizing: border-box; border: 0 solid; margin: 0; padding: 0;
    }
    .site-header img, .site-header svg { display: block; vertical-align: middle; max-width: 100%; }
    .site-header button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 5px;
      font-weight: 600;
      font-size: 1rem;
      height: 48px;
      padding: 0 24px;
      overflow: hidden;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
      /* background: var(--primary-500); */
      transition: background .15s;
    }
    .site-header a { color: inherit; text-decoration: inherit; }
    .site-header ol, .site-header ul, .site-header menu { list-style: none; }
    .site-header [hidden] { display: none !important; }

    .site-header {
      --navbar-height: 78px;
      --announcement-bar-height: 0px;
      --radius: 0.625rem;
      --neutral-50: #fafafa;
      --neutral-100: #e5e7eb;
      --neutral-200: #2e3348;
      --neutral-300: #262a3d;
      --neutral-400: #1a1d2e;
      --neutral-500: #14161f;
      --neutral-600: #0e1018;
      --primary-400: #a855f7;
      --primary-500: #9333ea;
      --foreground: #e9eaf1;
      --muted-foreground: #9497a8;
      position: fixed;
      inset-inline: 0;
      top: var(--announcement-bar-height);
      z-index: 100;
      width: 100%;
      height: var(--navbar-height);
      background-color: #06070c;
      border-bottom: 1px solid rgba(255,255,255,.05);
      color: var(--foreground);
    }

    .header-inner {
      position: relative; margin-inline: auto; width: 100%; height: 100%;
      padding-inline: 1rem;
      display: flex; align-items: center; justify-content: space-between;
    }
    @media (min-width: 768px)  { .header-inner { padding-inline: 1.25rem; } }
    @media (min-width: 1024px) { .header-inner { padding-inline: 2rem; } }
    @media (min-width: 1280px) { .header-inner { padding-inline: 2.5rem; } }

    .header-left  { display: flex; align-items: center; gap: 1.5rem; height: 100%; }
    .header-right { display: flex; align-items: center; gap: 0.75rem; }

    .logo { display: inline-flex; align-items: center; }
    .logo-icon { position: relative; width: 44px; height: 44px; aspect-ratio: 1; color: var(--primary-400); }
    .logo-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    .logo-full { position: relative; aspect-ratio: 4.59; height: 60px; display: none; color: var(--primary-400); }
    .logo-full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    @media (min-width: 1280px) { .logo-icon { display: none; } .logo-full { display: flex; } }

    .header-nav { display: none; align-items: center; gap: 0.5rem; height: 100%; }
    @media (min-width: 1024px) { .header-nav { display: flex; } }

    /* INVENTORY BUTTON */
    .site-header .inv-btn {
      display: none;
      width: 44px; height: 44px;
      border-radius: 0.825rem;
      background: var(--neutral-400);
      color: var(--muted-foreground);
      border: 1px solid var(--neutral-200);
      cursor: pointer;
      align-items: center; justify-content: center;
      position: relative;
      transition: color .15s, border-color .15s, background .15s;
      flex-shrink: 0;
      padding: 0;
    }
    .site-header .inv-btn:hover { color: #fff; border-color: var(--primary-400); background: var(--neutral-300); }
    .site-header .inv-btn .material-symbols-rounded {
      font-family: "Material Symbols Rounded", sans-serif;
      font-size: 20px; width: 20px; height: 20px; line-height: 1;
      font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
      display: inline-flex; align-items: center; justify-content: center;
      color: inherit;
    }
    .site-header .inv-btn__count {
      position: absolute;
      top: -4px;
      right: -4px;
      background: var(--primary-500);
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 5px;
      display: none;
      align-items: center;
      justify-content: center;
      line-height: 1;
      /* box-shadow: 0 2px 4px rgba(0,0,0,0.3); */
      /* border: 1.5px solid var(--neutral-500); */
    }
    .site-header .inv-btn__count.show { display: inline-flex; }

    /* BALANCE PILL */
    .balance-pill {
      position: relative; display: flex; align-items: center; gap: 0.625rem;
      background: var(--neutral-400); height: 44px;
      padding: 0 0.375rem 0 0.625rem; min-width: 170px;
      border-radius: 0.825rem; z-index: 30; flex-shrink: 0;
    }
    @media (min-width: 640px) { .balance-pill { min-width: 190px; } }
    .balance-pill__border {
      position: absolute; inset: 0; border-radius: 0.825rem;
      pointer-events: none; z-index: 20; padding: 2px;
      background: radial-gradient(circle at 0% 100%, #a855f7 0%, rgba(168,85,247,.85) 18px, rgba(168,85,247,0) 34px);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
              mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
    }
    .balance-pill__glow { position: absolute; inset: 0; border-radius: 0.825rem; overflow: hidden; pointer-events: none; z-index: 0; }
    .balance-pill__glow::before {
      content: ''; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%);
      width: 4rem; height: 4rem; border-radius: 9999px; filter: blur(12px);
      background: rgba(168,85,247,.28);
    }
    .balance-pill__left { display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 10; min-width: 0; }
    .balance-pill__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .balance-pill__icon svg { display: block; }
    .balance-pill__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
    .balance-pill__label {
      font-weight: 700; font-size: 10px; text-transform: uppercase;
      letter-spacing: 0.05em; margin-bottom: 3px; line-height: 1;
      color: var(--primary-400);
    }
    .balance-pill__value { color: #fff; font-weight: 700; font-size: 14px; line-height: 1; }

    .site-header .balance-wallet-btn {
      background: var(--primary-500); color: #fff; font-weight: 700;
      font-size: 0.75rem; height: 28px; min-width: 28px; width: 28px;
      border-radius: 0.55rem;
      display: inline-flex; align-items: center; justify-content: center;
      gap: 0.375rem; flex-shrink: 0; position: relative; z-index: 10;
      margin-left: auto; cursor: pointer; padding: 0;
      box-shadow: 0 2.5px 0 #6b1fb8;
      transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;
      align-self: center;
    }
    .site-header .balance-wallet-btn:hover  { background: var(--primary-400); }
    .site-header .balance-wallet-btn:active { transform: translateY(2.5px); box-shadow: 0 0 0 #6b1fb8; }
    .site-header .balance-wallet-btn .material-symbols-rounded {
      font-family: "Material Symbols Rounded", sans-serif;
      font-size: 18px; width: 18px; height: 18px; line-height: 1;
      font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
      display: inline-flex; align-items: center; justify-content: center;
      color: #fff;
    }

    .separator { display: none; width: 1px; height: 2rem; background: var(--neutral-200); flex-shrink: 0; }
    @media (min-width: 1280px) { .separator { display: block; } }

    .profile-wrap { display: flex; align-items: center; }
    .profile-btn { display: flex; align-items: center; gap: 0.5rem; }
    .avatar-ring {
      position: relative;
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 5px;
      flex-shrink: 0;
      border: 2px solid #7717ff;
      background: var(--neutral-500);
    }
    .avatar-ring-inner {
      position: absolute;
      inset: 4px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--neutral-400);
      overflow: hidden;
    }
    .avatar-ring-inner > div { position: relative; width: 100%; height: 100%; }
    .avatar-ring-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

    .login-btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: 8px; height: 40px; padding: 0 22px;
      border-radius: var(--radius); background: var(--primary-500);
      color: #fff; font-weight: 600; font-size: 0.875rem;
      transition: background 0.15s ease;
    }
    .login-btn:hover { background: var(--primary-400); }

    .site-header .logout-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      flex-shrink: 0;
      border-radius: 0.5rem;
      background: rgb(18 21 33) !important;
      color: var(--muted-foreground);
      border: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: background .15s, color .15s, transform .15s;
      padding: 0;
    }
    .site-header .logout-btn:hover { background: #7717ff; color: #7717ff; }
    .site-header .logout-btn:active { transform: scale(0.94); }
    .site-header .logout-btn .material-symbols-rounded {
      font-family: "Material Symbols Rounded", sans-serif;
      font-size: 16px; width: 16px; height: 16px; line-height: 1;
      font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
      display: inline-flex; align-items: center; justify-content: center;
      transition: transform 0.2s ease; color: white;
    }
    @keyframes logout-spin { to { transform: rotate(360deg); } }
    .site-header .logout-btn.loading { pointer-events: none; }
    .site-header .logout-btn.loading .material-symbols-rounded { animation: logout-spin 0.7s linear infinite; }
    .site-header .logout-btn.success { background: rgba(34,197,94,.2); color: #22c55e; }

   /* ══════════════ INVENTORY MODAL ══════════════ */
.inv-modal-bd {
  position: fixed; inset: 0;
  background: rgba(6,7,12,.6);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}
.inv-modal-bd.show { display: flex; }

.inv-modal {
  background: #161b26;
  /* border: 1px solid rgba(255,255,255,.06); */
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e9eaf1;
  max-height: 78vh;
  border-radius: 16px;
}
@media (max-width: 640px) {
  .inv-modal { max-height: 100vh; height: 100%; max-width: 100%; border: 0; }
  .inv-modal-bd { padding: 0; }
}

/* Head */
.inv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  /* border-bottom: 1px solid rgba(255,255,255,.06); */
  flex-shrink: 0;
}
.inv-head__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  text-transform: uppercase;
}
.inv-head__close {
  width: 32px; height: 32px;
  background: transparent;
  color: #9497a8;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
  flex-shrink: 0;
  padding: 0;
}
.inv-head__close:hover { color: #fff; background: rgba(255,255,255,.05); }
.inv-head__close .material-symbols-rounded {
  font-family: "Material Symbols Rounded", sans-serif;
  font-size: 20px; width: 20px; height: 20px; line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* Body */
.inv-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
}

/* Empty state */
.inv-empty {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  text-align: center;
  min-height: 240px;
}
.inv-empty__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  /* border: 1px solid rgba(255,255,255,.06); */
  background: rgba(0,0,0,.25);
  color: #ffffff;
  flex-shrink: 0;
}
.inv-empty__icon svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block;
  flex-shrink: 0;
}
.inv-empty__text {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  color: rgba(255,255,255,.5);
  max-width: 280px;
}
.inv-empty__cta {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 2px solid rgba(168,85,247,.45);
  background: rgba(168,85,247,.10);
  color: #c084fc;
  font-size: 12px;
  font-weight: 800;
  transition: border-color .15s, color .15s;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.inv-empty__cta:hover { border-color: #c084fc; color: #fff; }

/* Grid */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
@media (max-width: 480px) { .inv-grid { grid-template-columns: repeat(2, 1fr); } }

.inv-card {
  position: relative;
  background: #1e2531;
  border: 1.5px solid transparent;
  padding: 8px;
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; text-align: center; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.inv-card:hover { background: #242c3b; }
.inv-card.selected { border-color: #a855f7; background: rgba(168,85,247,0.10); }
.inv-card.selected::after {
  content: "";
  position: absolute;
  top: 6px; left: 6px;
  width: 14px; height: 14px;
  background: #a855f7;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.inv-card__img {
  width: 100%; height: 62px;
  display: flex; align-items: center; justify-content: center;
}
.inv-card__img img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  pointer-events: none;
}
.inv-card__name {
  font-size: 10.5px; font-weight: 800; color: #fff;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-card__price {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 800; color: #b0b6c3;
}
.inv-card__price img { width: 11px; height: 11px; object-fit: contain; }

/* Footer */
.inv-foot {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 0px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 8px;
}.inv-sell-btn {
  width: 100%;
  height: 44px;
  border: 0;
  background: #a855f7;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, filter .15s;
  pointer-events: auto;
}

.inv-sell-btn:hover { background: #b975f8; }
.inv-sell-btn:active { filter: brightness(0.94); }

/* nuke any disabled blocking */
.inv-sell-btn:disabled,
.inv-sell-btn[disabled] {
  opacity: .4;
  cursor: pointer;
  pointer-events: auto;
}

/* INVENTORY BUTTON — matching balance pill style */
.site-header .inv-btn {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  background: var(--neutral-400);
  color: var(--muted-foreground);
  border: none;
  cursor: pointer;
  align-items: center; justify-content: center;
  border-radius: 0.825rem;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  transition: color .15s;
  z-index: 30;
}
.site-header .inv-btn:hover { color: #fff; }

/* purple corner border — same as .balance-pill__border */
.site-header .inv-btn__border {
  position: absolute;
  inset: 0;
  border-radius: 0.825rem;
  pointer-events: none;
  z-index: 20;
  padding: 2px;
  background: radial-gradient(
    circle at 0% 100%,
    #a855f7 0%,
    rgba(168, 85, 247, .85) 18px,
    rgba(168, 85, 247, 0) 34px
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* soft pink/purple glow blob — same as .balance-pill__glow::before */
.site-header .inv-btn__glow {
  position: absolute;
  inset: 0;
  border-radius: 0.825rem;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.site-header .inv-btn__glow::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  filter: blur(12px);
  background: rgba(168, 85, 247, .28);
}

/* the SVG icon sits above the effects */
.site-header .inv-btn svg {
  position: relative;
  z-index: 10;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  display: block;
  fill: rgb(255 255 255);
  flex-shrink: 0;
}

/* count badge stays on top */
.site-header .inv-btn__count {
  position: absolute;
  top: 0px;
  right: 86px;
  z-index: 30;
  background: var(--primary-500);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  /* border-radius: 999px; */
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.3); */
  /* border: 1.5px solid var(--neutral-500); */
}
.site-header .inv-btn__count.show { display: inline-flex; }

.inv-empty__icon {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--neutral-400);
  color: #fff;
  flex-shrink: 0;
  border-radius: 0.825rem;
  overflow: hidden;
}

/* purple corner border — same as balance pill */
.inv-empty__border {
  position: absolute;
  inset: 0;
  border-radius: 0.825rem;
  pointer-events: none;
  z-index: 20;
  padding: 2px;
  background: radial-gradient(
    circle at 0% 100%,
    #a855f7 0%,
    rgba(168, 85, 247, .85) 18px,
    rgba(168, 85, 247, 0) 34px
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* soft pink/purple glow — same as balance pill */
.inv-empty__glow {
  position: absolute;
  inset: 0;
  border-radius: 0.825rem;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.inv-empty__glow::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  filter: blur(12px);
  background: rgba(168, 85, 247, .28);
}

/* svg sits above the effects */
.inv-empty__icon svg {
  position: relative;
  z-index: 10;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block;
  flex-shrink: 0;
  fill: currentColor;
}



      .cb-wrap {
        max-width:1280px;margin:0 auto;padding:40px 20px;
        display:flex;flex-direction:column;gap:32px;
      }
      @media (max-width:640px){.cb-wrap{padding:20px 12px;gap:20px}}

      .cb-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
      .cb-head-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
      .cb-head-badge{
        display:inline-flex;
        align-items:center;
        gap: 3px;
        font-size:10px;
        font-weight:800;
        letter-spacing: 0.3em;
        text-transform:uppercase;
        color: #a855f7;
        background:rgba(168,85,247,0.1);
        padding:4px 10px;
        border-radius: 5px;
        border: 2px solid rgba(168,85,247,0.3);
      }
      .cb-head-badge .msr{font-size:12px}
      .cb-h1{font-size:1.5rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#fff}
      @media (max-width:640px){.cb-h1{font-size:1.2rem}}

      .cb-page-meta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
      .cb-meta-block{display:flex;flex-direction:column;gap:4px}
      .cb-meta-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color: #ffffff;}
      .cb-meta-value{font-size:1rem;font-weight:800;color:#fff}

      .cb-btn{
        display:inline-flex;align-items:center;justify-content:center;gap:8px;
        border-radius:8px;font-weight:600;font-size:.875rem;height:40px;padding:0 20px;
        border:0;cursor:pointer;font-family:inherit;color:#fff;
        transition:background .15s, transform .1s;
      }
      @media (max-width:640px){.cb-btn{height:36px;padding:0 14px;font-size:.8rem}}
      .cb-btn--primary{background:#9333ea}
      .cb-btn--primary:hover{background:#a855f7}
      .cb-btn--primary:active{transform:translateY(2px)}
      .cb-btn--dark{background:#1a1d2e}
      .cb-btn--dark:hover{background:#262a3d}
      .cb-btn--dark:active{transform:translateY(2px)}
      .cb-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

      /* ── Stepper ── */
      .cb-qty-wrap{display:flex;flex-direction:column;gap:6px}
      .cb-qty-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9497a8}

      .cb-stepper{
        display:inline-flex;
        align-items:center;
        background: #161b22;
        /* border:1px solid #2e3348; */
        border-radius:8px;
        overflow:hidden;
        height:36px;
      }
      .cb-step-btn{
        width:36px;height:100%;
        background:transparent;
        color:#fff;
        border:0;
        cursor:pointer;
        font-size:18px;
        font-weight:800;
        line-height:1;
        display:inline-flex;align-items:center;justify-content:center;
        transition:background .15s, color .15s;
        font-family:inherit;
        user-select:none;
      }
      .cb-step-btn:hover:not(:disabled){ background:#262a3d; }
      .cb-step-btn:disabled{ opacity:.35; cursor:not-allowed; }
      .cb-step-val{
        min-width:36px;
        text-align:center;
        color:#fff;
        font-weight:900;
        font-size:.875rem;
        padding:0 8px;
        user-select:none;
      }

      /* Per-card stepper — full width inside the card */
      .cb-card-stepper{
        width:100%;
        height:34px;
        justify-content:space-between;
        margin:6px 0 8px 0;
        position:relative;
        z-index:10;
      }
      .cb-card-stepper .cb-step-btn{
        width:34px;
        flex-shrink:0;
      }
      .cb-card-stepper .cb-step-val{
        flex:1;
        min-width:0;
        font-size:.8rem;
      }

      @media (max-width:640px){
        .cb-stepper{height:32px;}
        .cb-step-btn{width:32px;font-size:16px;}
        .cb-step-val{min-width:32px;font-size:.8rem;}
        .cb-card-stepper{height:30px;}
        .cb-card-stepper .cb-step-btn{width:30px;font-size:14px;}
        .cb-card-stepper .cb-step-val{font-size:.75rem;}
      }

      .cb-qty-static{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width:44px;
        height:36px;
        padding:0 12px;
        background: #9333ea;
        color:#fff;
        font-weight:900;
        font-size:.875rem;
        /* border:1px solid #2e3348; */
        border-radius:8px;
      }

      .cb-case-qty-tag{
        background:#9333ea;color:#fff;font-weight:800;font-size:10px;
        padding:1px 6px;border-radius:4px;margin-left:4px;
      }

      /* ── Case grid ── */
      .cb-case-grid{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
        gap:14px;
        padding-bottom:12px;
      }
      @media (max-width:640px){
        .cb-case-grid{grid-template-columns:repeat(2,1fr);gap:12px}
      }

/* ═══════════════════════════════════════════════════
   CASE CARD — clean rounded layout + corner border
   ═══════════════════════════════════════════════════ */

.cb-case-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 16px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background: #1a1d2e82;
  border: 0;
  cursor: pointer;
  user-select: none;
  box-shadow: none;
  transition: background .15s ease;
}

.cb-case-card:hover { background: #21253a82; }

/* purple corner arc — clean falloff, hugs the corner */
.cb-case-card__border {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 20;
  padding: 2px;
  background: radial-gradient(
    circle at 0% 100%,
    #a855f7 0%,
    rgba(168, 85, 247, 0.75) 22px,
    rgba(168, 85, 247, 0.25) 42px,
    rgba(168, 85, 247, 0) 60px
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* soft purple glow tucked into the corner */
.cb-case-card__glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.cb-case-card__glow::before {
  content: '';
  position: absolute;
  left: -2rem;
  bottom: -2rem;
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  filter: blur(18px);
  background: rgba(168, 85, 247, 0.32);
}

/* case image */
.cb-case-card-img {
  position: relative;
  z-index: 10;
  width: 100%;
  flex: 1;
  min-height: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}
.cb-case-card-img img {
  max-height: 100px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3));
  transform: scaleX(-1);
  position: relative;
  z-index: 10;
}

/* name + price */
.cb-case-card-info {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 6px 0 8px;
  width: 100%;
}
.cb-case-card-name {
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-case-card-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.cb-case-card-price img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.cb-case-card-price span {
  color: #d1d5db;
  font-weight: 800;
  font-size: 14px;
}

/* stepper — rounded + clean */
.cb-stepper.cb-card-stepper {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 8px;
  background: #24273c85;
  border-radius: 7px;
  padding: 3px 4px;
  overflow: hidden;
}
.cb-step-btn {
  width: 30px;
  height: 100%;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.cb-step-btn:hover:not(:disabled) { background: #223044; color: #fff; }
.cb-step-btn:active:not(:disabled) { background: #2A3A52; }
.cb-step-btn:disabled {opacity: 1 !important;cursor: not-allowed;}
.cb-step-val {
  flex: 1;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  user-select: none;
}

/* open button — rounded, clean */
.cb-case-card-btn {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: #2A374A;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}
.cb-case-card-btn:hover { background: #9333ea; }

/* qty tag */
.cb-case-qty-tag {
  background: #9333ea;
  color: #fff;
  font-weight: 800;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 5px;
  margin-left: 4px;
}

/* responsive */
@media (max-width: 640px) {
  .cb-case-card { min-height: 240px; padding: 12px; border-radius: 14px; }
  .cb-case-card__border { border-radius: 14px; }
  .cb-case-card__glow { border-radius: 14px; }
  .cb-case-card-name { font-size: 12px; }
  .cb-case-card-price span { font-size: 12px; }
  .cb-case-card-btn { font-size: 11px; padding: 8px 10px; }
  .cb-case-card-img img { max-height: 86px; }
}

      .cb-case-effect{
        position:absolute; top:32px; left:50%; transform:translateX(-50%);
        width:128px; height:128px;
        border-radius:999px;
        background-image:url('/effect.png');
        background-size:cover; background-position:center;
        opacity:.05;
        pointer-events:none; z-index:0;
      }

      .cb-case-glow{
        position:absolute; top:32px; left:50%; transform:translateX(-50%);
        width:144px; height:144px;
        border-radius:999px;
        filter:blur(40px);
        opacity:.35;
        pointer-events:none; z-index:0;
      }

      .cb-case-card-img{
        width:100%;
        flex:1;
        min-height:95px;
        display:flex; align-items:center; justify-content:center;
        position:relative;
        margin:4px 0;
        z-index:10;
      }
      @media (max-width:640px){ .cb-case-card-img{ min-height:80px; } }
      .cb-case-card-img img{
        width:100%; height:100%;
        max-height:100px;
        object-fit:contain;
        filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));
        transform:scaleX(-1);
        position:relative;
        z-index:10;
      }
      @media (max-width:640px){ .cb-case-card-img img{ max-height:86px; } }

      .cb-case-card-info{
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:2px; margin:4px 0; width:100%;
        position:relative; z-index:10;
      }
      .cb-case-card-name{
        color:#fff; font-weight:900; font-size:14px;
        letter-spacing:.025em;
        width:100%; text-align:center;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      }
      @media (max-width:640px){ .cb-case-card-name{ font-size:12px; } }

      .cb-case-card-price{
        display:flex; align-items:center; justify-content:center; gap:4px;
      }
      .cb-case-card-price img{
        width: 16px;
        height: 16px;
        object-fit:contain;
        flex-shrink:0;
      }
      .cb-case-card-price span{
        color:#d1d5db; font-weight:800; font-size:14px;
      }
      @media (max-width:640px){ .cb-case-card-price span{ font-size:12px; } }

      .cb-case-card-btn{
        width:100%;
        background:#2A374A;
        color:#fff;
        font-weight:900;
        font-size:12px;
        padding:8px 12px;
        border:0;
        cursor:pointer;
        text-transform:uppercase;
        letter-spacing:.05em;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        transition:background .15s;
        position:relative;
        z-index:10;
        user-select:none;
        box-shadow:none;
        font-family:inherit;
        border-radius: 9px;
      }
      .cb-case-card-btn:hover{ background:#9333ea; }
      @media (max-width:640px){ .cb-case-card-btn{ font-size:11px; } }

     /* ══════════════════════════════════════════
   SINGLE-REEL OPENER — clean
   ══════════════════════════════════════════ */

.oc-arena {
  position: relative;
  width: 100%;
  background: #0b0d17;
  border-radius: 14px;
  border: 1px solid #1c2030;
  overflow: hidden;
}

.oc-stage {
  position: relative;
  height: 260px;
  background: #0b0d17;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 30px 40px -30px rgba(0, 0, 0, .9),
    inset 0 -30px 40px -30px rgba(0, 0, 0, .9);
}

/* one soft glow behind the reel */
.oc-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 180px;
  background: radial-gradient(
    ellipse at center,
    rgba(168, 85, 247, .14) 0%,
    rgba(168, 85, 247, .05) 40%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}

/* thin purple line anchored under the reel */
.oc-stage::after {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 85, 247, .55),
    transparent
  );
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 640px) { .oc-stage { height: 200px; } }

/* left / right fades */
.oc-fade-left,
.oc-fade-right {
  position: absolute; top: 0; bottom: 0;
  width: 110px;
  z-index: 20; pointer-events: none;
}
.oc-fade-left {
  left: 0;
  background: linear-gradient(to right, #0b0d17 0%, rgba(11,13,23,.7) 55%, transparent 100%);
}
.oc-fade-right {
  right: 0;
  background: linear-gradient(to left, #0b0d17 0%, rgba(11,13,23,.7) 55%, transparent 100%);
}

/* chevrons */
.oc-chevron-left,
.oc-chevron-right {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 40; pointer-events: none; opacity: .8;
}
.oc-chevron-left  { left: 16px; }
.oc-chevron-right { right: 16px; }

/* center line — plain, no glow */
.oc-center-line {
  position: absolute;
  top: 10%; bottom: 10%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .18);
  z-index: 12;
  pointer-events: none;
  transition: background .25s;
}
.oc-center-line.locked { background: #a855f7; }

/* reel */
.oc-reel-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 5;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.oc-reel-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: none;
}

.oc-reel-item {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  flex: 0 0 120px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s ease, filter .4s ease;
}

.oc-reel-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.oc-reel-img {
  width: 78px !important;
  height: 78px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.oc-reel-item.winner {
  z-index: 30;
  animation: ocWinnerPop .4s ease forwards;
  transform-origin: center center;
}
@keyframes ocWinnerPop {
  0%   { transform: scale(1);   }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1.2); }
}

.oc-reel-item.dim { opacity: .12; filter: blur(3px) grayscale(60%); }

/* ── Result overlay ── */
.oc-result {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(11, 13, 23, .94);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  text-align: center;
  padding: 22px;
  overflow: hidden;
}
.oc-result.show {
  display: flex;
  animation: ocResultIn .35s ease;
}
@keyframes ocResultIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1);   }
}

.oc-result-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 360px; height: 120px;
  border-radius: 50%;
  background: #a855f7;
  filter: blur(70px);
  opacity: .25;
  pointer-events: none;
}

.oc-result-label {
  position: relative;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #9497a8;
}

.oc-result-img {
  position: relative;
  width: 76px; height: 76px;
  margin: 8px auto 4px;
  display: flex; align-items: center; justify-content: center;
}
.oc-result-img img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(168, 85, 247, .45));
}

.oc-result-name {
  position: relative;
  font-size: 18px; font-weight: 900;
  color: #fff;
  letter-spacing: .01em;
  margin-top: 4px;
}

.oc-result-value {
  position: relative;
  font-size: 14px; font-weight: 800;
  color: #a855f7;
  margin-top: 2px;
}

.oc-result-actions {
  position: relative;
  margin-top: 16px;
  display: flex; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}

/* ── Multi-open grid ── */
.oc-result-multi {
  position: relative;
  margin-top: 10px;
  max-width: 420px;
  width: 100%;
}

.oc-multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px;
}

.oc-multi-item {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(168, 85, 247, .2);
  border-radius: 10px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.oc-multi-item img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
/* ══════════════════════════════════════════
   MATCH RADIUS — reel arena + drops panel
   ══════════════════════════════════════════ */

.oc-arena.ui-border {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.oc-arena.ui-border .ui-border__arc,
.oc-arena.ui-border .ui-border__glow {
  border-radius: 16px;
}

.cb-drops-panel.ui-border {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.cb-drops-panel.ui-border .ui-border__arc,
.cb-drops-panel.ui-border .ui-border__glow {
  border-radius: 16px;
}

/* ══════════════════════════════════════════
   UI BORDER — purple corner arc (shared)
   ══════════════════════════════════════════ */

.ui-border {
  position: relative;
  isolation: isolate;
}

.ui-border__arc {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 20;
  padding: 2px;
  background: radial-gradient(
    circle at 0% 100%,
    #a855f7 0%,
    rgba(168, 85, 247, 0.85) 18px,
    rgba(168, 85, 247, 0) 34px
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.ui-border__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ui-border__glow::before {
  content: '';
  position: absolute;
  left: -1rem;
  bottom: -1rem;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  filter: blur(12px);
  background: rgba(168, 85, 247, 0.28);
}

/* Force the drops panel + arena to 16px so arc/glow match */
.oc-arena.ui-border,
.oc-arena.ui-border .ui-border__arc,
.oc-arena.ui-border .ui-border__glow,
.cb-drops-panel.ui-border,
.cb-drops-panel.ui-border .ui-border__arc,
.cb-drops-panel.ui-border .ui-border__glow {
  border-radius: 16px;
}


      .cb-empty{
        text-align:center;padding:64px 24px;color:#9497a8;
        font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;
      }

      
        .msr { font-family: 'Material Symbols Rounded', sans-serif; }

     /* ══════════════════════════════════════════
   POSSIBLE DROPS — matched to case cards
   ══════════════════════════════════════════ */

.cb-drops-panel {
  margin-top: 28px;
  background: #0e1018;
  border-radius: 16px;
  padding: 20px 22px 24px;
  position: relative;
  overflow: hidden;
}

/* header */
.cb-drops-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}
.cb-drops-head .msr {
  font-size: 20px;
  color: #a855f7;
}
.cb-drops-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.cb-drops-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #c084fc;
  background: rgba(168, 85, 247, .12);
  border: 1px solid rgba(168, 85, 247, .3);
  padding: 4px 10px;
  border-radius: 6px;
}

/* grid */
.cb-drops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 6px;
  position: relative;
  z-index: 2;
}
.cb-drops-grid::-webkit-scrollbar { width: 6px; }
.cb-drops-grid::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, .35);
  border-radius: 3px;
}

/* card — matches case card visual language */
.cb-drop-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 14px 10px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  background: #1a1d2e82;
  border: 0;
  transition: background .15s ease, transform .15s ease;
  cursor: default;
}
.cb-drop-card:hover {
  background: #21253a82;
  transform: translateY(-2px);
}

/* purple corner arc on every drop card — same recipe as case card */
.cb-drop-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 20;
  padding: 2px;
  background: radial-gradient(
    circle at 0% 100%,
    #a855f7 0%,
    rgba(168, 85, 247, 0.7) 20px,
    rgba(168, 85, 247, 0.2) 40px,
    rgba(168, 85, 247, 0) 58px
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* soft glow blob in bottom-left */
.cb-drop-card::after {
  content: '';
  position: absolute;
  left: -2rem;
  bottom: -2rem;
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  filter: blur(16px);
  background: rgba(168, 85, 247, 0.22);
  pointer-events: none;
  z-index: 0;
}

/* image */
.cb-drop-imgwrap {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.cb-drop-imgwrap img {
  max-width: 84px;
  max-height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
}

/* info */
.cb-drop-info {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}
.cb-drop-name {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cb-drop-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #d1d5db;
}
.cb-drop-price::before {
  content: '';
  width: 12px;
  height: 12px;
  background-image: url('assets/media/logo/minilogo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  flex-shrink: 0;
}
.cb-drop-chance {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #c084fc;
  background: rgba(168, 85, 247, .12);
  border: 1px solid rgba(168, 85, 247, .25);
  padding: 2px 8px;
  border-radius: 5px;
  margin-top: 2px;
}

/* responsive */
@media (max-width: 640px) {
  .cb-drops-panel { padding: 14px; border-radius: 14px; }
  .cb-drops-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cb-drop-card { min-height: 150px; padding: 10px 8px; border-radius: 10px; }
  .cb-drop-card::before { border-radius: 10px; }
  .cb-drop-imgwrap { height: 68px; }
  .cb-drop-imgwrap img { max-width: 68px; max-height: 68px; }
  .cb-drop-name { font-size: 11px; }
  .cb-drop-price { font-size: 11px; }
  .cb-drop-price::before { width: 10px; height: 10px; }
}

      .cb-drop-imgwrap {
        width: 84px;
        height: 84px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cb-drop-imgwrap img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        /* filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); */
      }

      .cb-drop-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        width: 100%;
        text-align: center;
      }
      .cb-drop-name {
        font-size: 12px;
        font-weight: 600;
        color: #e2e8f0;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      .cb-drop-price {
        font-size: 12px;
        font-weight: 700;
        color: #ffffff;
      }
      .cb-drop-chance {
        font-size: 10px;
        font-weight: 600;
        color: #94a3b8;
        background: rgba(148, 163, 184, 0.1);
        padding: 2px 8px;
        border-radius: 999px;
      }

      

       .header-inner { position: relative; }

      .shuf-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: auto;
      }

      /* ════════ BALANCE PILL + WALLET ════════ */
      .shuf-bal {
        display: flex;
        align-items: center;
        background: rgb(18 21 33) !important;
        border: 0.8px solid transparent;
        border-radius: 10px;
        height: 44px;
      }

      .shuf-bal__left {
        display: flex;
        align-items: center;
        padding: 10px;
        height: 44px;
        border-radius: 10px;
        cursor: pointer;
        transition: transform .1s ease;
      }
      .shuf-bal__left:active { transform: scale(.98); }

      /* Robux coin — no border radius */
      .shuf-bal__coin {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .shuf-bal__coin svg {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 0;
      }

      .shuf-bal__text {
        padding: 0 8px;
        min-width: 80px;
      }
      .shuf-bal__amount {
        display: block;
        font-family: 'Aeonik', sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: #f9f9f9;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        white-space: nowrap;
      }

      .shuf-bal__chev {
        width: 16px;
        height: 16px;
        color: rgba(255,255,255,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .2s ease-in-out, color .2s ease-in-out;
      }
      .shuf-bal__left:hover .shuf-bal__chev { color: #fff; }

      /* Wallet button — brand purple */
      .shuf-wallet {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
        background: #7717ff !important;
        color: #ffffff;
        font-family: 'Aeonik', sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        flex-shrink: 0;
        margin: -1px;
        box-shadow: 0 0 6.2px 0 rgb(119 23 255 / 0%) !important;
        transition: filter .15s ease, transform .1s ease;
      }
      .shuf-wallet:hover  { filter: brightness(1.12); }
      .shuf-wallet:active { transform: scale(.98); }

      /* ════════ ACCOUNT WIDGET ════════ */
      .shuf-account {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px;
        height: 44px;
        border-radius: 10px;
        background: rgb(18 21 33) !important;
        border: 0.8px solid transparent;
        color: rgba(255,255,255,0.5);
        cursor: pointer;
        overflow: hidden;
        text-decoration: none;
        flex-shrink: 0;
        transition: background .15s ease, border-color .15s ease;
      }
      .shuf-account:hover { background: rgba(255,255,255,0.08); }

      .shuf-account__avatar {
        min-width: 36px;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        overflow: hidden;
        background: #202329;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .shuf-account__avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 8px;
      }

      .shuf-account__stack {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        flex: 1 1 0%;
        padding-left: 4px;
      }
      .shuf-account__name {
        font-family: 'Aeonik', sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: #f9f9f9;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 220px;
        margin: 0;
      }
      .shuf-account__rank {
        font-family: 'Aeonik', sans-serif;
        font-size: 12px;
        font-weight: 700;
        color: #818e9d;
        white-space: nowrap;
        margin: 0;
      }

      .shuf-account__chev {
        width: 16px;
        height: 16px;
        color: #818e9d;
        margin-left: auto;
        margin-right: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .2s ease-in-out, color .2s ease-in-out;
      }
      .shuf-account:hover .shuf-account__chev { color: #f9f9f9; }

      /* ── Mobile ── */
      @media (max-width: 900px) {
        .shuf-account__stack { display: none; }
        .shuf-account { padding: 4px; }
        .shuf-account__chev { margin-right: 2px; }
      }

      @media (max-width: 767px) {
        .shuf-wrap { gap: 8px; }
        .shuf-bal { height: 40px; }
        .shuf-bal__left { height: 40px; padding: 8px; }
        .shuf-bal__coin { width: 20px; height: 20px; }
        .shuf-bal__text { min-width: 60px; padding: 0 6px; }
        .shuf-bal__amount { font-size: 13px; }
        .shuf-bal__chev { width: 14px; height: 14px; }

        .shuf-wallet { height: 40px; padding: 8px 10px; font-size: 13px; }

        .shuf-account { height: 40px; }
        .shuf-account__avatar { width: 32px; height: 32px; border-radius: 7px; }
        .shuf-account__avatar img { border-radius: 7px; }
      }
      
       #depoModalMain {
        display: none;
        position: fixed;
        inset: 0;
        background: rgb(5 7 13 / 44%);
        z-index: 100000;
        align-items: center;
        justify-content: center;
        /* backdrop-filter: blur(8px); */
        -webkit-backdrop-filter: blur(8px);
        padding: 16px;
        font-family: 'Outfit', sans-serif;
    }
    #depoModalMain.open { display: flex; }

    #depoModalMain .dm-box {
        background: #0e1018;
        border-radius: 18px;
        width: 100%;
        max-width: 760px;
        height: 605px;
        max-height: 92vh;
        box-sizing: border-box;
        color: #fff;
        display: grid;
        grid-template-columns: 240px 1fr;
        overflow: hidden;
        /* box-shadow: 0 30px 80px rgba(0,0,0,0.7); */
    }

    /* ═══ Sidebar ═══ */
    #depoModalMain .dm-side {
        background: #0a0c12;
        border-right: 1px solid rgba(255,255,255,0.04);
        padding: 18px 14px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    #depoModalMain .dm-side-title {
        font-size: 16px;
        font-weight: 700;
        margin: 0;
        padding: 0 4px;
        color: #fff;
    }

    #depoModalMain .dm-side-menu {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    #depoModalMain .dm-side-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 12px 14px 14px;
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        background: #13151f !important;
        border: none;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        transition: background .15s, transform .1s;
        min-width: 0;
    }
    #depoModalMain .dm-side-item:first-child {border-radius: 7px 7px 0 0;}
    #depoModalMain .dm-side-item:last-child  {border-radius: 0 0 7px 7px;}
    #depoModalMain .dm-side-item:active { transform: scale(0.995); }
    #depoModalMain .dm-side-item--active {background: #13151f;}
    #depoModalMain .dm-side-item--active .dm-side-arrow {color: #ffffff;}
    #depoModalMain .dm-side-item-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    #depoModalMain .dm-side-item-left img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        flex-shrink: 0;
    }
    #depoModalMain .dm-side-arrow {
        width: 18px;
        height: 18px;
        color: #fff;
        flex-shrink: 0;
    }

    /* ═══ Sidebar footer ═══ */
    #depoModalMain .dm-side-footer {
        margin-top: auto;
        padding: 12px 4px 4px;
        border-top: 1px solid rgba(255,255,255,0.04);
    }
    #depoModalMain .dm-side-footer-link {
        display: inline-block;
        font-size: 12px;
        font-weight: 500;
        color: #818e9d;
        text-decoration: none;
        transition: color .15s;
        cursor: pointer;
        font-family: 'Inter', system-ui, sans-serif;
    }
    #depoModalMain .dm-side-footer-link:hover { color: #fff; }

    /* ═══ Main ═══ */
    #depoModalMain .dm-main {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #0e1018;
    }

    #depoModalMain .dm-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 22px 14px;
        flex-shrink: 0;
    }
    #depoModalMain .dm-title {
        font-size: 16px;
        font-weight: 800;
        margin: 0;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #depoModalMain .dm-back-btn {
        background: #19212a4a;
        border: none;
        color: #8a8aa9;
        cursor: pointer;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        display: none;
        align-items: center;
        justify-content: center;
        transition: background .15s, color .15s;
    }
    #depoModalMain .dm-back-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
    #depoModalMain .dm-back-btn.show { display: flex; }
    #depoModalMain .dm-close {
        background: #232d39;
        border: none;
        color: #0e1018;
        cursor: pointer;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color .15s;
        border-radius: 7px;
    }
    #depoModalMain .dm-close:hover { color: #fff; }

    #depoModalMain .dm-body {
        flex: 1;
        overflow-y: auto;
        padding: 0 22px 22px;
        display: flex;
        flex-direction: column;
    }
    #depoModalMain .dm-body::-webkit-scrollbar { width: 6px; }
    #depoModalMain .dm-body::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.08);
        border-radius: 6px;
    }

    #depoModalMain .dm-view { display: none; flex-direction: column; flex: 1; }
    #depoModalMain .dm-view.active { display: flex; }

    #depoModalMain .dm-label {
        font-size: 13px;
        font-weight: 500;
        color: #818e9d;
        margin: 0 0 12px;
        font-family: 'Inter', system-ui, sans-serif;
    }

    #depoModalMain .dm-crypto-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    #depoModalMain .dm-coin {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
        background: #19212a;
        border: 1px solid transparent;
        border-radius: 7px;
        cursor: pointer;
        transition: background .15s, transform .1s;
    }
    #depoModalMain .dm-coin:hover { background: #1f2a355c; }
    #depoModalMain .dm-coin:active { transform: scale(.99); }
    #depoModalMain .dm-coin-img {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        object-fit: contain;
        flex-shrink: 0;
    }
    #depoModalMain .dm-coin-name {
        font-size: 13px;
        font-weight: 700;
        color: #fff;
    }

    #depoModalMain .dm-pay-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    #depoModalMain .dm-pay-coin-chip {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #19212a;
        border-radius: 7px;
        padding: 10px 14px;
        width: 100%;
        box-sizing: border-box;
    }
    #depoModalMain .dm-pay-coin-chip img {
        width: 22px;
        height: 22px;
        border-radius: 1px;
        object-fit: contain;
    }
    #depoModalMain .dm-pay-coin-chip-name {
        font-size: 13px;
        font-weight: 700;
        color: #fff;
    }

    #depoModalMain .dm-pay-qr-wrap {
        background: transparent;
        padding: 0;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 204px;
        height: 204px;
        max-width: 100%;
        box-sizing: border-box;
        flex-shrink: 0;
        overflow: hidden;
        line-height: 0;
        font-size: 0;
    }
    #depoModalMain .dm-pay-qr-wrap svg,
    #depoModalMain .dm-pay-qr-wrap canvas,
    #depoModalMain .dm-pay-qr-wrap img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        margin: 0;
        padding: 0;
    }
    #depoModalMain .dm-pay-qr-placeholder {
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.04);
        color: #818e9d;
        font-weight: 800;
        letter-spacing: 0.2em;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    #depoModalMain .dm-pay-address-wrap { width: 100%; }
    #depoModalMain .dm-pay-address-label {
        font-weight: 500;
        color: #818e9d;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: bold;
    }
    #depoModalMain .dm-pay-address-box {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #19212a;
        border-radius: 7px;
        padding: 10px 12px;
        box-sizing: border-box;
        min-height: 46px;
    }
    #depoModalMain .dm-pay-address {
        flex: 1;
        font-size: 12px;
        color: #d7dbe2;
        word-break: break-all;
        min-width: 0;
    }
    #depoModalMain .dm-pay-copy {
        background: transparent;
        border: none;
        color: #818e9d;
        padding: 5px;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .15s, color .15s;
        flex-shrink: 0;
    }
    #depoModalMain .dm-pay-copy:hover { color: #fff; background: rgba(255,255,255,0.05); }

    #depoModalMain .dm-pay-warning {
        width: 100%;
        display: flex;
        gap: 9px;
        align-items: flex-start;
        background: rgba(245, 158, 11, 0.08);
        /* border: 1px solid rgba(245, 158, 11, 0.2); */
        border-radius: 10px;
        padding: 10px 12px;
        box-sizing: border-box;
    }
    #depoModalMain .dm-pay-warning-icon {
        width: 18px;
        height: 18px;
        border-radius: 32%;
        background: #f59e0b;
        color: #0e1018;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 12px;
        flex-shrink: 0;
        margin-top: 1px;
    }
    #depoModalMain .dm-pay-warning-text {
        font-size: 12px;
        line-height: 1.45;
    }
    #depoModalMain .dm-pay-warning-text strong { color: #f59e0b; display: block; margin-bottom: 2px; font-weight: 800; }
    #depoModalMain .dm-pay-warning-text span { color: #a8b0be; }

    #depoModalMain .dm-pay-values {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #depoModalMain .dm-pay-value-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    #depoModalMain .dm-pay-value-label {
        font-size: 12px;
        font-weight: 500;
        color: #818e9d;
        font-weight: bold;
    }
    #depoModalMain .dm-pay-value-box {
        display: flex;
        align-items: center;
        gap: 9px;
        background: #19212a;
        border-radius: 7px;
        padding: 9px 11px;
        min-height: 44px;
        box-sizing: border-box;
    }
    #depoModalMain .dm-pay-value-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: contain;
        flex-shrink: 0;
    }
    #depoModalMain .dm-pay-value-usd-icon {
        width: 22px;
        height: 22px;
        border-radius: 32%;
        background: #00ff86;
        color: #0e1018;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        font-size: 13px;
        flex-shrink: 0;
    }
    #depoModalMain .dm-pay-value-text {
        font-weight: 800;
        font-size: 14px;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #depoModalMain .dm-pay-eq {
        color: #4a5260;
        font-weight: 900;
        font-size: 16px;
        flex-shrink: 0;
        padding-top: 20px;
    }

    #depoModalMain .dm-pay-status {
        width: 100%;
        text-align: center;
        color: #818e9d;
        font-size: 12px;
        font-weight: 700;
        padding: 12px;
        background: #19212a;
        border-radius: 7px;
        box-sizing: border-box;
        font-weight: bold;
    }
    #depoModalMain .dm-pay-status.paid {
        color: #00ff86;
        background: rgba(0,255,134,0.08);
    }

    #depoModalMain .skel {
        position: relative;
        overflow: hidden;
        background: #19212a;
        border-radius: 8px;
    }
    #depoModalMain .skel::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.06) 50%,
            rgba(255,255,255,0) 100%
        );
        animation: dm-skel 1.4s ease-in-out infinite;
    }
    @keyframes dm-skel {
        0%   { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    #depoModalMain .skel-icon    { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }
    #depoModalMain .skel-chip-tx { width: 80px; height: 14px; border-radius: 6px; }
    #depoModalMain .skel-qr      {width: 180px;height: 180px;border-radius: 7px;}
    #depoModalMain .skel-addr    { flex: 1; height: 16px; border-radius: 6px; }
    #depoModalMain .skel-val-ico { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
    #depoModalMain .skel-val-tx  { flex: 1; height: 14px; border-radius: 6px; }

    #depoToastMain {
        display: none;
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: #19212a;
        color: #fff;
        padding: 12px 22px;
        border-radius: 40px;
        z-index: 100001;
        font-family: 'Outfit', sans-serif;
        box-shadow: 0 6px 24px rgba(0,0,0,0.5);
        border: 1px solid rgba(255,255,255,0.08);
        font-size: 14px;
        font-weight: 600;
    }

    @media (max-width: 820px) {
        #depoModalMain { padding: 0; }
        #depoModalMain .dm-box {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            max-width: 100%;
        }
        #depoModalMain .dm-side {
            flex-direction: row;
            padding: 12px;
            border-right: none;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            align-items: center;
            gap: 10px;
        }
        #depoModalMain .dm-side-title { font-size: 14px; margin: 0 10px 0 0; padding: 0; }
        #depoModalMain .dm-side-menu { flex-direction: row; gap: 6px; }
        #depoModalMain .dm-side-item {
            padding: 9px 12px;
            font-size: 13px;
            border-radius: 10px !important;
        }
        #depoModalMain .dm-side-item-left img { width: 18px; height: 18px; }
        #depoModalMain .dm-side-arrow { display: none; }
        #depoModalMain .dm-side-footer {
            margin-top: 0;
            margin-left: auto;
            padding: 0;
            border-top: none;
        }
        #depoModalMain .dm-side-footer-link { font-size: 12px; }
        #depoModalMain .dm-pay-qr-wrap { width: min(60vw, 204px); height: min(60vw, 204px); }
        #depoModalMain .skel-qr { width: min(60vw, 180px); height: min(60vw, 180px); }
    }
    @media (max-width: 480px) {
        #depoModalMain .dm-pay-values { flex-direction: column; }
        #depoModalMain .dm-pay-eq { display: none; }
        #depoModalMain .dm-pay-qr-wrap { width: min(70vw, 200px); height: min(70vw, 200px); }
        #depoModalMain .skel-qr { width: min(70vw, 176px); height: min(70vw, 176px); }
    }
    @media (max-width: 360px) {
        #depoModalMain .dm-pay-qr-wrap { width: min(75vw, 180px); height: min(75vw, 180px); }
        #depoModalMain .skel-qr { width: min(75vw, 156px); height: min(75vw, 156px); }
    }

    #withdrawModalMain {
                display: none;
                position: fixed;
                inset : 0;
                background: rgb(5 7 13 / 44%);
                z-index: 100000;
                align-items: center;
                justify-content: center;
                /* backdrop-filter: blur(8px); */
                -webkit-backdrop-filter: blur(8px);
                padding: 16px;
                font-family: 'Outfit', sans-serif;
            }
            #withdrawModalMain.open { display: flex; }

            #withdrawModalMain .wm-box {
                background: #0e1018;
                border-radius: 18px;
                width: 100%;
                max-width: 760px;
                height: 605px;
                max-height: 92vh;
                box-sizing: border-box;
                color: #fff;
                display: grid;
                grid-template-columns: 240px 1fr;
                overflow: hidden;
            }

            /* ═══ Sidebar ═══ */
            #withdrawModalMain .wm-side {
                background: #0a0c12;
                border-right: 1px solid rgba(255,255,255,0.04);
                padding: 18px 14px;
                display: flex;
                flex-direction: column;
                gap: 14px;
            }
            #withdrawModalMain .wm-side-title {
                font-size: 16px;
                font-weight: 700;
                margin: 0;
                padding: 0 4px;
                color: #fff;
            }
            #withdrawModalMain .wm-side-menu {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }
            #withdrawModalMain .wm-side-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14px 12px 14px 14px;
                font-size: 14px;
                font-weight: 800;
                color: #fff;
                background: #13151f !important;
                border: none;
                cursor: pointer;
                font-family: inherit;
                text-align: left;
                transition: background .15s, transform .1s;
            }
            #withdrawModalMain .wm-side-item:first-child {border-radius: 7px 7px 0 0;}
            #withdrawModalMain .wm-side-item:last-child  {border-radius: 0 0 7px 7px;}
            #withdrawModalMain .wm-side-item:hover { background: #131c24; }
            #withdrawModalMain .wm-side-item--active {background: #13151f !important;}
            #withdrawModalMain .wm-side-item--active .wm-side-arrow {color: #ffffff;}
            #withdrawModalMain .wm-side-item-left {
                display: flex;
                align-items: center;
                gap: 10px;
                min-width: 0;
            }
            #withdrawModalMain .wm-side-item-left img {
                width: 22px;
                height: 22px;
                object-fit: contain;
                flex-shrink: 0;
            }
            #withdrawModalMain .wm-side-arrow {
                width: 18px;
                height: 18px;
                color: #fff;
                flex-shrink: 0;
            }
            #withdrawModalMain .wm-side-footer {
                margin-top: auto;
                padding: 12px 4px 4px;
                border-top: 1px solid rgba(255,255,255,0.04);
            }
            #withdrawModalMain .wm-side-footer-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #818e9d;
    text-decoration: none;
    transition: color .15s;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
            }
            #withdrawModalMain .wm-side-footer-link:hover { color: #fff; }

            /* ═══ Main ═══ */
            #withdrawModalMain .wm-main {
                display: flex;
                flex-direction: column;
                overflow: hidden;
                background: #0e1018;
            }
            #withdrawModalMain .wm-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px 22px 14px;
                flex-shrink: 0;
            }
            #withdrawModalMain .wm-title {
                font-size: 16px;
                font-weight: 800;
                margin: 0;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 10px;
            }
            #withdrawModalMain .wm-back-btn {
  background: #19212a4a;
        border: none;
        color: #8a8aa9;
                cursor: pointer;
                width: 28px;
                height: 28px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background .15s, color .15s;
            }
            #withdrawModalMain .wm-back-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
            #withdrawModalMain .wm-close {
        background: #232d39;
        border: none;
        color: #0e1018;
        cursor: pointer;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color .15s;
        border-radius: 7px;
            }
            #withdrawModalMain .wm-close:hover { color: #fff; }

            #withdrawModalMain .wm-body {
                flex: 1;
                overflow-y: auto;
                padding: 0 22px 22px;
                display: flex;
                flex-direction: column;
                gap: 16px;
            }
            #withdrawModalMain .wm-body::-webkit-scrollbar { width: 6px; }
            #withdrawModalMain .wm-body::-webkit-scrollbar-thumb {
                background: rgba(255,255,255,0.08);
                border-radius: 6px;
            }

            #withdrawModalMain .wm-label {
                font-size: 12px;
                font-weight: 500;
                color: #818e9d;
                margin: 0 0 8px;
                display: block;
                font-weight: bold;
            }

            #withdrawModalMain .wm-coin-chip {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 12px 14px;
                background: #19212a;
                border-radius: 10px;
                font-size: 14px;
                font-weight: 700;
                color: #fff;
                height: 44px;
                box-sizing: border-box;
            }
            #withdrawModalMain .wm-coin-chip img {
                width: 20px;
                height: 20px;
                border-radius: 4px;
                flex-shrink: 0;
            }

            #withdrawModalMain .wm-row {
                display: flex;
                gap: 10px;
                align-items: flex-end;
            }
            #withdrawModalMain .wm-field {
                flex: 1;
                display: flex;
                flex-direction: column;
                min-width: 0;
            }
            #withdrawModalMain .wm-input-box {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 12px;
                background: #19212a;
                border: 1px solid transparent;
                border-radius: 10px;
                height: 44px;
                box-sizing: border-box;
                transition: border-color .15s;
            }
            #withdrawModalMain .wm-input-box:focus-within { border-color: #00ff86; }
            #withdrawModalMain .wm-input-box img {
                width: 20px;
                height: 20px;
                border-radius: 4px;
                flex-shrink: 0;
            }
            #withdrawModalMain .wm-input {
                flex: 1;
                background: transparent;
                border: none;
                outline: none;
                color: #fff;
                font-size: 14px;
                font-weight: 500;
                font-family: inherit;
                min-width: 0;
                padding: 0;
                font-weight: bold;
            }
            #withdrawModalMain .wm-input::placeholder { color: #4a5260; }
            #withdrawModalMain .wm-max-btn {
                height: 44px;
                padding: 0 18px;
                background: #131a22;
                border: none;
                border-radius: 10px;
                color: #fff;
                font-family: inherit;
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;
                flex-shrink: 0;
                transition: background .15s;
                font-weight: bold;
            }
            #withdrawModalMain .wm-max-btn:hover { background: #1b2430; }
            #withdrawModalMain .wm-max-btn:active { transform: scale(0.98); }

            #withdrawModalMain .wm-paste-btn {
                height: 44px;
                padding: 0 14px;
                background: #131a22;
                border: none;
                border-radius: 10px;
                color: #fff;
                font-family: inherit;
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                gap: 6px;
                transition: background .15s;
                margin-top: 20px;
            }
            #withdrawModalMain .wm-paste-btn:hover { background: #1b2430; }
            #withdrawModalMain .wm-paste-btn:active { transform: scale(0.98); }
            #withdrawModalMain .wm-paste-btn svg {
                width: 16px;
                height: 16px;
                fill: #ffffff;
            }

            #withdrawModalMain .wm-withdraw-btn {
                height: 44px;
                padding: 0 16px;
                background: #5BE183;
                color: #0e1018;
                border: none;
                border-radius: 10px;
                font-family: inherit;
                font-size: 14px;
                font-weight: 800;
                cursor: pointer;
                transition: filter .15s, transform .1s;
                width: 100%;
                margin-top: auto;
            }
            #withdrawModalMain .wm-withdraw-btn:hover:not(:disabled) { filter: brightness(1.08); }
            #withdrawModalMain .wm-withdraw-btn:active:not(:disabled) { transform: scale(0.99); }
            #withdrawModalMain .wm-withdraw-btn:disabled {
                background: #131a22;
                color: #45515c;
                cursor: not-allowed;
            }

            #withdrawToastMain {
                display: none;
                position: fixed;
                bottom: 24px;
                left: 50%;
                transform: translateX(-50%);
                background: #19212a;
                color: #fff;
                padding: 12px 22px;
                border-radius: 40px;
                z-index: 100001;
                font-family: 'Outfit', sans-serif;
                box-shadow: 0 6px 24px rgba(0,0,0,0.5);
                border: 1px solid rgba(255,255,255,0.08);
                font-size: 14px;
                font-weight: 600;
            }

            @media (max-width: 820px) {
                #withdrawModalMain { padding: 0; }
                #withdrawModalMain .wm-box {
                    grid-template-columns: 1fr;
                    grid-template-rows: auto 1fr;
                    height: 100vh;
                    max-height: 100vh;
                    border-radius: 0;
                    max-width: 100%;
                }
                #withdrawModalMain .wm-side {
                    flex-direction: row;
                    padding: 12px;
                    border-right: none;
                    border-bottom: 1px solid rgba(255,255,255,0.04);
                    align-items: center;
                    gap: 10px;
                }
                #withdrawModalMain .wm-side-title { font-size: 14px; margin: 0 10px 0 0; padding: 0; }
                #withdrawModalMain .wm-side-menu { flex-direction: row; gap: 6px; }
                #withdrawModalMain .wm-side-item {
                    padding: 9px 12px;
                    font-size: 13px;
                    border-radius: 10px !important;
                }
                #withdrawModalMain .wm-side-item-left img { width: 18px; height: 18px; }
                #withdrawModalMain .wm-side-arrow { display: none; }
                #withdrawModalMain .wm-side-footer {
                    margin-top: 0;
                    margin-left: auto;
                    padding: 0;
                    border-top: none;
                }
                #withdrawModalMain .wm-side-footer-link { font-size: 12px; }
            }
            @media (max-width: 480px) {
                #withdrawModalMain .wm-row { flex-wrap: wrap; }
            }

            svg.dm-side-arrow {
    width: 18px;
    height: 18px;
    color: #fff;
    flex-shrink: 0;
}

/* ═══════════ HOME LAYOUT ═══════════ */
.home-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1000px) {
  .home-grid { grid-template-columns: 1fr; }
}

.home-side {
  display: flex;
  flex-direction: column;
}
.home-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* ═══════════ USER SIDEBAR ═══════════ */
.hw-side {
  background: #1a1d2e;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 620px;
}
.hw-side__title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.hw-side__user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hw-side__avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: #14161f;
  flex-shrink: 0;
}
.hw-side__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hw-side__badge {
  min-width: 28px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: #9333ea;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #6b1fb8;
  flex-shrink: 0;
}
.hw-side__joined {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: #9497a8;
}
.hw-side__joined strong {
  color: #fff;
  font-weight: 700;
}

.hw-side__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hw-side__progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #9497a8;
  font-weight: 600;
}
.hw-side__progress-head strong {
  color: #fff;
  font-weight: 800;
}
.hw-side__progress-track {
  height: 8px;
  background: #14161f;
  border-radius: 999px;
  overflow: hidden;
}
.hw-side__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #a855f7, #c084fc);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.hw-side__spacer {
  flex: 1;
  min-height: 40px;
}

.hw-side__cta {
  display: block;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background: #9333ea;
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 #6b1fb8;
  transition: background 0.15s, transform 0.1s, box-shadow 0.1s;
}
.hw-side__cta:hover { background: #a855f7; }
.hw-side__cta:active { transform: translateY(2px); box-shadow: none; }

/* ═══════════ HOUSE GAMES — BENTO GRID ═══════════ */
.hg-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hg-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hg-head__icon { font-size: 20px; line-height: 1; }
.hg-head__title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.01em;
}

.hg-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  grid-auto-rows: 160px;
}
.hg-tile--wide    { grid-column: span 4; }
.hg-tile--narrow  { grid-column: span 2; }
.hg-tile          { grid-column: span 2; }

.hg-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--hg-accent, #a855f7) 0%, #0e1018 85%);
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.hg-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: radial-gradient(80% 80% at 50% 0%, rgba(255,255,255,0.1), transparent 60%);
}
.hg-tile:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.hg-tile__icon {
  font-size: 52px;
  line-height: 1;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.hg-tile--wide .hg-tile__icon { font-size: 64px; }
.hg-tile__name {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.hg-tile--wide .hg-tile__name { font-size: 20px; }

@media (max-width: 640px) {
  .hg-bento { grid-auto-rows: 120px; }
  .hg-tile--wide   { grid-column: span 6; }
  .hg-tile--narrow { grid-column: span 3; }
  .hg-tile         { grid-column: span 3; }
  .hg-tile__icon { font-size: 40px; }
  .hg-tile--wide .hg-tile__icon { font-size: 48px; }
  .hg-tile__name { font-size: 14px; }
}

/* ═══════════ LATEST WINS ═══════════ */
.hw-card {
  background: #1a1d2e00;
  border-radius: 16px;
  padding: 20px;
}
.hw-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hw-card__title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hw-card__badge {
  font-size: 11px;
  font-weight: 700;
  color: #9497a8;
  background: #14161f;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hw-card__badge--live {
  color: #5BE183;
  background: rgba(91,225,131,0.1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hw-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #5BE183;
  animation: hwPulse 1.4s ease-in-out infinite;
}
@keyframes hwPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.hw-latest__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.hw-latest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #14161f;
  border-radius: 10px;
}
.hw-latest__avatar {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
}
.hw-latest__name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hw-latest__game {
  font-size: 11px;
  font-weight: 700;
  color: #9497a8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.hw-latest__mult {
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
  color: #5BE183;
  font-variant-numeric: tabular-nums;
}
.hw-latest__empty {
  font-size: 13px;
  color: #9497a8;
  text-align: center;
  padding: 24px 0;
}
/* ═══ Home — 4 game cards under carousel ═══ */
.hw-home-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.hw-home-grid .game-card {
  aspect-ratio: auto;
  height: 210px;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #16232f;
  cursor: pointer;
  transition: transform .25s ease;
}
.hw-home-grid .game-card:hover { transform: translateY(-3px); }
.hw-home-grid .game-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hw-home-grid .game-overlay {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s ease;
}
.hw-home-grid .game-card:hover .game-overlay { opacity: 1; }
.hw-home-grid .play-button {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(167,139,250,.92);
  display: flex; align-items: center; justify-content: center;
}
.hw-home-grid .play-button svg { width: 28px; height: 28px; fill: #fff; margin-left: 3px; }

@media (max-width: 900px) {
  .hw-home-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
  .hw-home-grid .game-card { height: 220px; }
}
@media (max-width: 480px) {
  .hw-home-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
  .hw-home-grid .game-card { height: 180px; }
}

/* ═══ View all link ═══ */
.hw-card__viewall {
  font-size: 12px;
  font-weight: 700;
  color: #a855f7;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color .15s;
}
.hw-card__viewall:hover { color: #c084fc; }

/* ═══ Responsive grid ═══ */
@media (max-width: 900px) {
  .hw-home-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .hw-home-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .hw-home-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ Cards — no hover button, just lift + brighten ═══ */
.game-card { transition: transform .25s ease, filter .25s ease; }
.game-card:hover { transform: translateY(-3px); filter: brightness(1.10); }
.game-card::after,
.game-overlay,
.play-button { display: none !important; }

/* ═══ Cards — no hover button, just lift + brighten ═══ */
.game-card { transition: transform .25s ease, filter .25s ease; }
.game-card:hover { transform: translateY(-3px); filter: brightness(1.10); }
.game-card::after,
.game-overlay,
.play-button { display: none !important; }