/* ═══════════════════════════════════════════════════════════════
   UNBOX — Premium Dark UI (EmpireDrop-level polish)
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Core palette — neutral dark charcoal with a hint of purple-blue */
  --bg:#18171f;
  --bg2:#1d1c26;
  --surface:rgba(36,34,44,.85);
  --surface2:rgba(44,41,54,.85);
  --surface3:rgba(52,49,62,.8);
  --glass:rgba(36,34,44,.7);
  --glass-border:rgba(140,100,255,.08);
  --glass-border-hover:rgba(140,100,255,.18);

  /* Accent */
  --gold:#ffffff;
  --gold-dim:rgba(255,255,255,.3);
  --gold-bg:rgba(255,255,255,.04);
  --purple:#dc2626;
  --purple-dim:rgba(220,38,38,.3);
  --cyan:#00CED1;
  --orange:#FF8C00;

  /* Semantic */
  --green:#10B981;--red:#EF4444;

  /* Text */
  --t1:#FFFFFF;
  --t2:#B0B0B0;
  --t3:#6B6B78;

  /* Borders & glow */
  --brd:rgba(255,255,255,.05);
  --brd2:rgba(255,255,255,.10);
  --glow-gold:0 0 20px rgba(220,38,38,.15);
  --glow-purple:0 0 20px rgba(220,38,38,.15);

  /* Type */
  --font:'Poppins',system-ui,sans-serif;
  --r:8px;
  --r-lg:12px;
  --r-xl:16px;

  /* Motion */
  --ease:cubic-bezier(.25,.8,.25,1);
  --ease-spring:cubic-bezier(.2,.9,.2,1);

  /* Rarity */
  --rc-common:#93c5fd;--rc-uncommon:#ec4899;--rc-rare:#8b5cf6;--rc-epic:#ef4444;--rc-legendary:#fbbf24;
}

/* ─── Reset ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{font-family:var(--font);font-size:15px;line-height:1.5;color:var(--t2);background:var(--bg);overflow-x:hidden}
/* Subtle purple ambient glow — single layer, no animation */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(ellipse 70% 50% at 50% 0%,rgba(88,28,135,.12),transparent 65%),
  radial-gradient(ellipse 50% 40% at 15% 85%,rgba(70,25,110,.06),transparent 55%),
  radial-gradient(ellipse 45% 35% at 85% 70%,rgba(80,30,130,.05),transparent 50%)}

a{color:inherit;text-decoration:none;cursor:pointer}
button,select{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
img{display:block;max-width:100%}
svg{display:block}
h1,h2,h3,h4{color:var(--t1);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.hidden{display:none!important}
.w100{width:100%}
.gold{color:var(--gold)!important}

/* ─── Buttons ────────────────────────────────── */
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;font-size:14px;font-weight:700;border-radius:var(--r);text-transform:uppercase;letter-spacing:.04em;transition:all .25s var(--ease);box-shadow:0 4px 16px rgba(220,38,38,.2);position:relative;overflow:hidden}
.btn-gold:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 28px rgba(220,38,38,.35);filter:brightness(1.1)}
.btn-gold:active{transform:translateY(0) scale(.98)}
.btn-gold:disabled{opacity:.3;pointer-events:none}
.btn-gold--sm{padding:8px 18px;font-size:12px}
.btn-gold--lg{padding:14px 32px;font-size:15px}
.btn-gold::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:skewX(-20deg);transition:none}
.btn-gold:hover::after{animation:btnSheen .6s ease}

.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;background:transparent;color:var(--t2);font-size:13px;font-weight:500;border-radius:var(--r);border:1px solid var(--brd2);transition:all .2s var(--ease)}
.btn-outline:hover{color:var(--t1);border-color:var(--glass-border-hover);background:rgba(255,255,255,.03)}

.sel{padding:8px 14px;background:var(--surface);border:1px solid var(--brd2);border-radius:var(--r);color:var(--t1);font-size:13px;font-family:var(--font)}
.sel option{background:var(--surface)}

/* ─── Glass panel ────────────────────────────── */
.glass{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--r-lg)}
.glass:hover{border-color:var(--glass-border-hover)}

/* ═══════════════════════════════════════════════════════════════
   SPLASH SCREEN
   ═══════════════════════════════════════════════════════════════ */
.splash{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:splashOut .6s ease 3.8s forwards}

/* Logo: scale up + explode in */
.splash-logo{position:relative;z-index:2;width:180px;height:auto;opacity:0;transform:scale(0);animation:logoExplode .8s var(--ease-spring) .3s forwards}
@keyframes logoExplode{
  0%{opacity:0;transform:scale(0) rotate(-20deg)}
  50%{opacity:1;transform:scale(1.2) rotate(5deg)}
  70%{transform:scale(.95) rotate(-2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

/* UNBOX text — centered, appears after logo */
.splash-text{position:relative;z-index:4;font-size:clamp(56px,12vw,100px);font-weight:900;color:var(--t1);letter-spacing:-.06em;opacity:0;transform:scale(.6);animation:splashTitle .6s var(--ease-spring) 1.6s forwards;text-shadow:0 0 40px rgba(220,38,38,.2)}
.splash-sub{position:relative;z-index:4;font-size:14px;font-weight:500;color:var(--t2);opacity:0;transform:translateY(8px);animation:fadeUp .5s ease 2.2s forwards;letter-spacing:.1em;text-transform:uppercase}

/* ═══════════════════════════════════════════════════════════════
   TOP BAR — subtle utility links
   ═══════════════════════════════════════════════════════════════ */
.topbar{display:none}
.topbar-inner{display:flex;align-items:center;gap:18px;width:100%;padding:0 28px;height:100%}
.topbar-spacer{flex:1}
.tl{font-size:11px;font-weight:500;color:var(--t3);transition:color .2s}
.tl:hover{color:var(--t1)}
.tl--gold{color:var(--gold)}
.tl--gold:hover{color:#fff}

/* ═══════════════════════════════════════════════════════════════
   HEADER — glass panel, sticky, with glow
   ═══════════════════════════════════════════════════════════════ */
.hdr{position:sticky;top:0;z-index:100;background:#0d0c12;border-bottom:1px solid var(--brd);will-change:transform}
.hdr-inner{display:flex;align-items:center;padding:0 20px;height:58px}

.logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo-img{width:34px;height:34px;object-fit:contain}
.logo-t{font-size:21px;font-weight:900;color:var(--t1);letter-spacing:-.04em;text-shadow:0 0 20px rgba(255,255,255,.08)}

.hdr-nav{display:flex;gap:4px;margin-left:28px;min-width:0;overflow-x:auto;scrollbar-width:none}
.hdr-nav::-webkit-scrollbar{display:none}
.hdr-tab{padding:12px 18px;font-size:13px;font-weight:600;color:var(--t3);border-radius:var(--r);transition:all .25s var(--ease);text-transform:uppercase;letter-spacing:.04em;position:relative}
.hdr-tab:hover{color:var(--t2)}
.hdr-tab.active{color:var(--t1)}
.hdr-tab.active::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:2px;background:#dc2626;border-radius:1px;box-shadow:0 0 8px rgba(220,38,38,.3)}
.hdr-tab--gold{color:var(--gold)!important}

/* Wallet — dead center via absolute positioning */
.hdr-wallet{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0;background:rgba(255,255,255,.04);border:1px solid var(--brd2);border-radius:var(--r-lg);overflow:hidden}
/* Below the sidebar breakpoint there is no room to center the wallet over the nav */
@media(max-width:1100px){
  .hdr-wallet{position:static;transform:none;margin-left:auto;flex-shrink:0}
  .hdr-wallet:not(.hidden)~.hdr-right{margin-left:10px}
}
.hdr-bal{padding:8px 16px;font-size:14px;font-weight:600;color:var(--t1);white-space:nowrap;letter-spacing:.01em}
.hdr-deposit{padding:8px 16px;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);border-left:1px solid var(--brd);cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.hdr-deposit:hover{filter:brightness(1.15)}

.hdr-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.hdr-login{font-size:13px;font-weight:500;color:var(--t3);transition:color .2s}
.hdr-login:hover{color:var(--t1)}

/* (nav meta removed — moved to topbar) */

/* ═══════════════════════════════════════════════════════════════
   SITE LAYOUT — content + right sidebar
   ═══════════════════════════════════════════════════════════════ */
/* Full-width layout with left chat + content + right sidebar */
.site-layout{display:flex}
.main{flex:1;min-width:0;position:relative;z-index:1;padding:8px 20px}
.page{max-width:1100px;margin-left:auto;margin-right:auto}
section{margin-top:14px}
section:first-child{margin-top:0}

/* ═══ LEFT SIDEBAR — Live Chat (Clash.gg style) ═══ */
.sidebar-left{width:260px;flex-shrink:0;position:fixed;left:0;top:58px;bottom:0;display:flex;flex-direction:column;background:#13121a;border-right:1px solid var(--brd);z-index:95;transition:transform .3s var(--ease),width .3s var(--ease);will-change:transform}
.sidebar-left.collapsed{transform:translateX(-220px)}
.sidebar-left.collapsed .chat-messages,
.sidebar-left.collapsed .chat-input,
.sidebar-left.collapsed .chat-online,
.sidebar-left.collapsed .chat-header__tabs{opacity:0;pointer-events:none}
.sidebar-left.collapsed .chat-toggle{transform:rotate(180deg)}
@media(max-width:1100px){.sidebar-left{display:none}}
@media(min-width:1101px){.main{margin-left:260px}}
@media(min-width:1101px){body.chat-collapsed .main{margin-left:40px}}

/* Chat header */
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--brd);flex-shrink:0}
.chat-header__tabs{display:flex;gap:4px}
.chat-htab{padding:6px 14px;font-size:12px;font-weight:600;color:var(--t3);border-radius:var(--r);transition:all .2s;background:transparent}
.chat-htab:hover{color:var(--t2)}
.chat-htab.active{color:var(--t1);background:rgba(255,255,255,.06)}
.chat-toggle{width:28px;height:28px;border-radius:var(--r);background:rgba(255,255,255,.04);color:var(--t3);display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .2s}
.chat-toggle:hover{color:var(--t1);background:rgba(255,255,255,.08)}

/* Online counter */
.chat-online{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--brd);flex-shrink:0;font-size:12px;color:var(--t3)}
.chat-online__dot{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 6px rgba(16,185,129,.4);flex-shrink:0}
.chat-online__count{flex:1}
.chat-online__count b{color:var(--t1);font-weight:700}
.chat-online__lang{font-size:10px;font-weight:700;color:var(--t2);padding:2px 6px;border-radius:3px;background:rgba(255,255,255,.05)}

/* Messages area */
.chat-messages{flex:1;overflow-y:auto;padding:8px 0;scrollbar-width:none;display:flex;flex-direction:column;gap:2px}
.chat-messages::-webkit-scrollbar{display:none}

/* Individual message */
.chat-msg{padding:8px 14px;transition:background .15s}
.chat-msg:hover{background:rgba(255,255,255,.02)}
.chat-msg__top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.chat-msg__avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.chat-msg__avatar--owner{box-shadow:0 0 0 1.5px #dc2626}
.chat-msg__avatar--staff{box-shadow:0 0 0 1.5px #22c55e}
.chat-msg__avatar img{width:100%;height:100%;object-fit:cover}
.chat-msg__name{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-msg__level{font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;color:#fff;flex-shrink:0}
.chat-msg__role{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;flex-shrink:0}
.chat-msg__role--owner{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;cursor:default}
.chat-msg__role--staff{background:rgba(34,197,94,.12);color:#22c55e}
.chat-msg__avatar{position:relative}
.chat-avatar-shield{position:absolute;bottom:-2px;right:-2px;font-size:9px;line-height:1}
.chat-msg__text{font-size:12px;color:var(--t2);line-height:1.5;padding-left:36px;word-wrap:break-word;overflow-wrap:break-word}

/* System message */
.chat-msg--system{background:rgba(140,100,255,.06);border-left:3px solid rgba(140,100,255,.4);margin:4px 8px;border-radius:0 var(--r) var(--r) 0;padding:10px 12px}
.chat-msg--system .chat-msg__name{color:#a78bfa}
.chat-msg--system .chat-msg__text{padding-left:0;font-size:11px;color:var(--t2)}

/* Chat input */
.chat-input{display:flex;align-items:center;gap:6px;padding:10px 12px;border-top:1px solid var(--brd);flex-shrink:0}
.chat-input input{flex:1;padding:9px 12px;background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:var(--r);color:var(--t1);font-size:12px;outline:none;font-family:var(--font);transition:border-color .2s}
.chat-input input::placeholder{color:var(--t3)}
.chat-input input:focus{border-color:rgba(140,100,255,.3)}
.chat-send{width:34px;height:34px;border-radius:var(--r);background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.chat-send:hover{filter:brightness(1.15);box-shadow:0 2px 10px rgba(220,38,38,.3)}

/* Right Sidebar — fixed position on right edge */
.sidebar-right{width:260px;flex-shrink:0;position:fixed;right:0;top:58px;bottom:0;padding:16px;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:16px;background:var(--bg);border-left:1px solid var(--brd);z-index:10}
.sidebar-right::-webkit-scrollbar{display:none}
@media(max-width:1100px){.sidebar-right{display:none}}
@media(min-width:1101px){.main{margin-right:260px}}

.sr-section{display:flex;flex-direction:column;gap:8px}
.sr-title{font-size:12px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:6px;letter-spacing:.03em}
.sr-icon{color:var(--gold);font-size:14px}
.sr-list{display:flex;flex-direction:column;gap:8px}

.sr-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:10px;text-align:center;transition:all .25s var(--ease);position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.sr-card:hover{border-color:var(--glass-border-hover);transform:translateY(-2px)}
.sr-card__img{width:100%;height:70px;object-fit:contain;border-radius:var(--r)}
.sr-card__avatar{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--surface2);border:1px solid var(--brd)}
.sr-card__name{font-size:11px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sr-card__price{font-size:13px;font-weight:800;color:var(--gold)}
.sr-card__dot{width:6px;height:6px;border-radius:50%;position:absolute;top:8px;right:8px}
.sec-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;margin-bottom:12px;text-transform:uppercase;letter-spacing:.03em}
.sec-icon{font-size:16px}
.sec-link{margin-left:auto;font-size:12px;font-weight:500;color:var(--t3);transition:color .25s;text-transform:none;letter-spacing:0}
.sec-link:hover{color:var(--gold)}
.sec-count{font-size:12px;color:var(--t3);margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0}
.pg-desc{font-size:14px;color:var(--t2);margin-bottom:20px;max-width:500px;line-height:1.6}

/* ═══ Home Top — banner + games in one row ═══ */
/* ═══ HOME PAGE — informational landing ═══ */

/* Hero */
.hero{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:32px;margin-bottom:20px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(220,38,38,.06),transparent 60%);pointer-events:none}
.hero__text{max-width:500px;position:relative;z-index:1}
.hero__text h1{font-size:clamp(24px,3vw,36px);font-weight:900;letter-spacing:-.04em;margin-bottom:8px;line-height:1.1}
.hero__text p{font-size:14px;color:var(--t2);line-height:1.6;margin-bottom:16px}
.hero__btns{display:flex;gap:8px}
.hero__art{width:clamp(100px,15vw,180px);flex-shrink:0;opacity:.8;position:relative;z-index:1}
@media(max-width:600px){.hero__art{display:none}}

/* Game mode cards — tall vertical cards like Clash.gg */
.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:0}
@media(max-width:640px){.games-grid{grid-template-columns:1fr}}
.gm-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:0;display:flex;flex-direction:column;cursor:pointer;transition:all .25s var(--ease);overflow:hidden;position:relative}
.gm-card:hover{border-color:var(--glass-border-hover);transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.gm-card img{width:100%;height:180px;object-fit:contain;background:rgba(255,255,255,.02);padding:12px}
.gm-card__info{padding:14px 16px 8px}
.gm-card__info h3{font-size:17px;font-weight:800;margin-bottom:4px}
.gm-card__info p{font-size:12px;color:var(--t3);margin-bottom:10px;line-height:1.5}
.gm-card .btn-accent-purple{margin:0 16px 16px;text-align:center;justify-content:center}
.gm-card .btn-outline{margin:0 16px 16px;text-align:center;justify-content:center}

/* Biggest wins */
.wins-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:900px){.wins-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:500px){.wins-grid{grid-template-columns:repeat(2,1fr)}}
.win-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:12px;text-align:center;transition:all .25s var(--ease)}
.win-card:hover{transform:translateY(-3px);border-color:var(--glass-border-hover)}
.win-card img{width:60px;height:60px;object-fit:contain;margin:0 auto 8px;border-radius:var(--r)}
.win-card__name{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-card__by{font-size:10px;color:var(--t3);margin:2px 0}
.win-card__val{font-size:14px;font-weight:800;color:var(--t1)}

/* Platform info */
.info-section{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
@media(max-width:768px){.info-section{grid-template-columns:1fr}}
.info-block{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:28px}
.info-block h2{font-size:20px;font-weight:800;margin-bottom:10px}
.info-block p{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:16px}
.info-features{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.info-feat{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:16px;text-align:center}
.info-feat span{font-size:24px;display:block;margin-bottom:6px}
.info-feat h4{font-size:13px;font-weight:700;margin-bottom:3px}
.info-feat p{font-size:11px;color:var(--t3);line-height:1.4}

.home-top{display:grid;grid-template-columns:1fr 280px;gap:10px;margin-bottom:14px}
@media(max-width:768px){.home-top{grid-template-columns:1fr}}

.ht-banner{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;overflow:hidden}
.ht-banner__text{position:relative;z-index:1}
.ht-banner__text h2{font-size:20px;font-weight:800;margin-bottom:4px}
.ht-banner__text p{font-size:12px;color:var(--t2);margin-bottom:12px}
.ht-banner__art{width:120px;height:auto;opacity:.6;flex-shrink:0}

.ht-games{display:flex;flex-direction:column;gap:8px}
.ht-game{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s var(--ease)}
.ht-game:hover{border-color:var(--glass-border-hover);transform:translateY(-1px)}
.ht-game span{font-size:15px;font-weight:700;color:var(--t1)}
.btn-accent-purple--sm{padding:6px 14px;font-size:11px}

/* ═══ Live Drop Ticker (top horizontal strip) ═══ */
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.5s ease-in-out infinite}
.drop-ticker{display:none}
.dt-side{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 12px;height:100%;border-right:1px solid var(--brd)}
.dt-track{display:flex;gap:10px;overflow:hidden;flex:1;padding:0 12px;align-items:center}
.dt-item{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;background:var(--surface2);border-radius:var(--r);border:1px solid var(--brd);min-width:80px;animation:slideIn .3s var(--ease-spring)}
.dt-item__price{font-size:11px;font-weight:700;color:var(--gold)}
.dt-item__img{width:40px;height:40px;border-radius:4px;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;overflow:hidden}
.dt-item__img img{width:100%;height:100%;object-fit:cover}

/* ═══════════════════════════════════════════════════════════════
   PROMO BANNERS — glass panels with glow
   ═══════════════════════════════════════════════════════════════ */
/* ═══ Promo Banners (EmpireDrop: big left, med center, wide right) ═══ */
.promos{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}
@media(min-width:768px){.promos{grid-template-columns:1.5fr 1fr 1fr}}
@media(min-width:768px){.promos{grid-template-columns:1.5fr 1fr 1.3fr}}
.promo{border-radius:var(--r-lg);overflow:hidden;position:relative;padding:16px;min-height:80px;display:flex;background:var(--surface);border:1px solid var(--glass-border);transition:all .25s var(--ease)}
.promo:hover{border-color:var(--glass-border-hover);transform:translateY(-2px)}
.promo--big{background:linear-gradient(135deg,#1a0515,#0d0210)}
.promo--med{background:linear-gradient(135deg,#15061a,#0a0210)}
.promo--wide{background:var(--surface)}
.promo__bg{position:absolute;pointer-events:none}
.promo-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;max-width:65%}
.promo h2{font-size:22px;font-weight:800;letter-spacing:-.03em}
.promo__img{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:80px;opacity:.45}
.promo h3{font-size:15px;font-weight:700}
.promo p{font-size:12px;color:rgba(255,255,255,.45);line-height:1.5}
.btn-accent-purple{display:inline-flex;align-items:center;padding:9px 20px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c);border-radius:var(--r);border:none;cursor:pointer;transition:all .2s;align-self:flex-start}
.btn-accent-purple:hover{filter:brightness(1.15);box-shadow:0 4px 16px rgba(220,38,38,.3)}

/* ═══════════════════════════════════════════════════════════════
   GAME MODE CARDS (EmpireDrop: 4 cards, dot pattern, purple)
   ═══════════════════════════════════════════════════════════════ */
.games-sec{margin-top:0;margin-bottom:10px}
.game-card{position:relative;border:1px solid rgba(220,38,38,.1);border-radius:var(--r-lg);min-height:120px;overflow:hidden;cursor:pointer;transition:all .25s var(--ease);display:flex;flex-direction:column;padding:16px;background:var(--surface)}
.game-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px,rgba(220,38,38,.15) 1px,transparent 1px);background-size:10px 10px;pointer-events:none;border-radius:var(--r-xl)}
.game-card:hover{transform:translateY(-4px);border-color:rgba(220,38,38,.3);box-shadow:0 8px 30px rgba(220,38,38,.1)}
.game-card__title{font-size:18px;font-weight:800;color:var(--t1);margin-bottom:auto;position:relative;z-index:1}
.game-card__img{position:absolute;bottom:50px;right:10px;width:100px;height:auto;opacity:.8;z-index:0;transition:transform .3s var(--ease)}
.game-card:hover .game-card__img{transform:scale(1.05)}
.game-card .btn-accent-purple{position:relative;z-index:1;margin-top:auto;align-self:flex-start}

/* ═══════════════════════════════════════════════════════════════
   CATEGORY TABS — gold underline active
   ═══════════════════════════════════════════════════════════════ */
/* Category grid */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;max-width:1100px;margin:0 auto}
.cat-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:28px 20px;text-align:center;cursor:pointer;transition:all .25s var(--ease);position:relative;overflow:hidden}
.cat-card:hover{border-color:var(--glass-border-hover);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.cat-card__icon{font-size:36px;margin-bottom:10px;display:block}
.cat-card__name{font-size:16px;font-weight:700;color:var(--t1);margin-bottom:4px}
.cat-card__count{font-size:12px;color:var(--t3)}
.packs-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.packs-header .sec-title{margin-bottom:0}

.cat-tabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;max-width:1200px;margin-left:auto;margin-right:auto}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tab{flex-shrink:0;padding:8px 16px;font-size:12px;font-weight:500;color:var(--t3);background:transparent;border:none;border-radius:var(--r);cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;position:relative}
.cat-tab:hover{color:var(--t2)}
.cat-tab.active{color:var(--t1)}
.cat-tab.active::after{content:'';position:absolute;bottom:0;left:12px;right:12px;height:2px;background:#dc2626;border-radius:1px;box-shadow:0 0 6px rgba(220,38,38,.3)}
.cat-count{font-size:10px;color:var(--t3);margin-left:4px}

/* ═══════════════════════════════════════════════════════════════
   PACK GRID — premium cards with glow
   ═══════════════════════════════════════════════════════════════ */
/* Pack grid — EmpireDrop exact: 6 per row, centered container */
.packs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:72px 16px;max-width:1200px;margin:0 auto}
@media(min-width:480px){.packs-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.packs-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.packs-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1200px){.packs-grid{grid-template-columns:repeat(6,1fr)}}

/* Pack card — image top, name center, purple button bottom */
.pk{cursor:pointer;text-align:center;transition:transform .25s var(--ease)}
.pk:hover{transform:translateY(-8px)}
.pk:hover .pk__img{transform:scale(1.06)}

.pk__art{display:flex;align-items:flex-end;justify-content:center;height:180px;margin-bottom:8px}
.pk__img{width:100%;max-width:160px;height:auto;max-height:160px;object-fit:contain;transition:transform .3s var(--ease)}

.pk__name{font-size:14px;font-weight:600;color:var(--t1);text-align:center;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}

.pk__btn{display:block;width:100%;padding:11px 0;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c);border-radius:8px;border:none;cursor:pointer;transition:all .2s var(--ease);letter-spacing:.01em}
.pk__btn:hover{filter:brightness(1.15);box-shadow:0 4px 16px rgba(220,38,38,.3)}

/* ═══ Pack Detail Page (EmpireDrop box view) ═══ */
.pd-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pd-header__center{display:flex;align-items:center;gap:8px}
.pd-header__img{width:32px;height:32px;border-radius:var(--r);object-fit:cover}
.pd-header__center h2{font-size:16px;font-weight:700}
.pd-header__cat{font-size:11px;color:var(--t3)}

/* Pack Detail Arena — inline rip experience */
.pd-arena{position:relative;min-height:340px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);margin-bottom:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pd-state{display:flex;flex-direction:column;align-items:center;gap:16px;position:absolute;inset:0;align-items:center;justify-content:center;transition:opacity .4s,transform .4s}
.pd-state.hidden{opacity:0;pointer-events:none;transform:scale(.95)}

/* Idle state — pack floating + rip button */
.pd-arena__pack{width:180px;height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));animation:packFloat 4s ease-in-out infinite}
@keyframes packFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Rip state — split pack halves */
.pd-state--rip{z-index:2}
.pd-rip-pack{position:relative;display:flex;width:180px;height:240px}
.pd-rip-left,.pd-rip-right{width:50%;height:100%;overflow:hidden;transition:transform 1.2s var(--ease-spring),opacity .8s}
.pd-rip-left img,.pd-rip-right img{width:180px;height:240px;object-fit:contain}
.pd-rip-right img{margin-left:-90px}
.pd-rip-glow{position:absolute;top:50%;left:50%;width:4px;height:70%;transform:translate(-50%,-50%);background:#dc2626;border-radius:3px;opacity:0;z-index:3;box-shadow:0 0 30px #dc2626,0 0 60px #dc2626;transition:opacity .3s,width .8s,height .6s}
.pd-rip-pack.ripping .pd-rip-left{transform:translateX(-70px) rotate(-14deg);opacity:0}
.pd-rip-pack.ripping .pd-rip-right{transform:translateX(70px) rotate(14deg);opacity:0}
.pd-rip-pack.ripping .pd-rip-glow{opacity:1;width:240px;height:130%}
.pd-rip-particles{position:absolute;inset:0;pointer-events:none;z-index:1}
.pd-rip-particles span{position:absolute;border-radius:50%;opacity:0}

/* Result state — prize card + actions */
.pd-state--result{z-index:3;gap:20px}
.pd-prize{text-align:center;padding:24px 36px;background:var(--surface);border:2px solid var(--rc,var(--brd));border-radius:var(--r-xl);box-shadow:0 0 40px rgba(var(--rgb,0,0,0),.25);animation:prizeReveal .5s var(--ease-spring)}
.pd-prize__rarity{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 14px;border-radius:var(--r);display:inline-block;margin-bottom:10px}
.pd-prize__name{display:block;font-size:22px;font-weight:800;color:var(--t1);margin-bottom:6px}
.pd-rip-actions{display:flex;flex-direction:column;align-items:center;gap:10px}
.pd-demo-btn{font-size:13px;padding:8px 20px}
.pd-prize__img{display:block;width:120px;height:120px;object-fit:contain;margin:0 auto 12px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.pd-prize__demo{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);padding:2px 9px;border-radius:99px;margin-bottom:12px}
.pd-prize__demo-note{display:block;font-size:11px;color:var(--t3);margin-top:10px}
.pd-prize__value{display:block;font-size:28px;font-weight:900;color:var(--gold)}
@keyframes prizeReveal{from{opacity:0;transform:scale(.5) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

.pd-result-actions{display:flex;gap:10px}
.pd-sell-btn{padding:12px 28px;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:var(--r);cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.03em}
.pd-sell-btn:hover{filter:brightness(1.15);box-shadow:0 4px 16px rgba(34,197,94,.3)}

.pd-content{margin-top:8px}
.pd-content__sub{font-size:13px;color:var(--t3);font-weight:400;text-transform:none;letter-spacing:0;margin-left:8px}
.pd-items{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
@media(min-width:520px){.pd-items{grid-template-columns:repeat(3,1fr)}}
@media(min-width:800px){.pd-items{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.pd-items{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1280px){.pd-items{grid-template-columns:repeat(6,1fr)}}

.pd-item{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.035);border-radius:12px;padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:0;position:relative;transition:transform .25s var(--ease-spring),border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);overflow:hidden;aspect-ratio:1/1.05;will-change:transform}
.pd-item:hover{transform:translateY(-4px) scale(1.04);border-color:rgba(var(--rr),.42) !important;background:rgba(255,255,255,.045) !important;box-shadow:0 0 0 1px rgba(var(--rr),.32),0 0 20px 2px rgba(var(--rr),.32),0 0 42px 8px rgba(var(--rr),.12) !important}
.pd-item__icon{transition:background .25s var(--ease)}
.pd-item:hover .pd-item__icon{background:radial-gradient(circle at center,rgba(var(--rr),.5) 0%,rgba(var(--rr),.18) 42%,transparent 72%) !important}
/* Gold / God Spin tile — stronger aura, U-crown token rendered at 90% instead of the 60% cap */
.pd-item--god{border-color:rgba(251,191,36,.25);box-shadow:0 0 0 1px rgba(251,191,36,.1),0 0 24px rgba(251,191,36,.12)}
.pd-item--god:hover{border-color:rgba(251,191,36,.5);box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 0 1px rgba(251,191,36,.25),0 0 32px rgba(251,191,36,.22)}
.pd-item__icon--god{background:radial-gradient(circle at center,rgba(251,191,36,.35) 0%,rgba(251,191,36,.12) 42%,transparent 70%) !important}
.pd-item__icon--god img{max-width:88% !important;max-height:92% !important;filter:drop-shadow(0 0 12px rgba(251,191,36,.6)) drop-shadow(0 6px 16px rgba(0,0,0,.5)) !important}
.pd-item--god .pd-item__val{color:#fbbf24;text-shadow:0 0 10px rgba(251,191,36,.4);letter-spacing:.04em}
.pd-item__bar{display:none}
.pd-item__odds{font-size:11px;font-weight:600;color:var(--t2);text-align:center;margin-bottom:0;font-variant-numeric:tabular-nums}
.pd-item__icon{width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:2px 0 4px;background:radial-gradient(circle at center,rgba(var(--rr),.13) 0%,rgba(var(--rr),.04) 45%,transparent 70%);border:none;position:relative}
.pd-item__icon img{max-width:60%;max-height:75%;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
.pd-item__name{font-size:11px;font-weight:500;color:var(--t2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;margin-bottom:3px}
.pd-item__val{font-size:14px;font-weight:700;color:#fff;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════════════════════════
   HOW IT WORKS
   ═══════════════════════════════════════════════════════════════ */
.hiw-sec{margin-top:14px}
.hiw-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:768px){.hiw-row{grid-template-columns:repeat(4,1fr)}}
.hiw{position:relative;padding:32px 16px 16px;border-radius:var(--r-xl);text-align:center;background:var(--surface);border:1px solid var(--glass-border)}
.hiw::before{content:'';position:absolute;inset:0;border-radius:var(--r-xl);background:radial-gradient(circle 1.5px,rgba(255,255,255,.03) 1px,transparent 1px);background-size:12px 12px;pointer-events:none}
.hiw-n{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:var(--r);background:var(--surface2);border:1px solid var(--glass-border);font-size:11px;font-weight:700;color:var(--gold);display:flex;align-items:center;justify-content:center}
.hiw-icon{width:48px;height:48px;margin:0 auto 10px;opacity:.7}
.hiw-icon svg{width:100%;height:100%}
.hiw h3{font-size:15px;font-weight:700;margin-bottom:6px}
.hiw p{font-size:12px;line-height:1.6}

/* ═══════════════════════════════════════════════════════════════
   BATTLE CREATE — fits one screen, glass panels
   ═══════════════════════════════════════════════════════════════ */
/* Battle create — full-width vertical layout (Clash.gg style) */
.cb-page{display:block}
.cb-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.cb-header__left{display:flex;align-items:center;gap:14px}
.cb-header__left h2{font-size:20px;font-weight:800}
.cb-label{font-size:12px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.cb-section{margin-bottom:24px}

/* Gamemode cards — full-width row */
.gm-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
.gm-btn{padding:18px 14px;text-align:center;background:var(--surface);border:2px solid var(--glass-border);border-radius:var(--r-lg);transition:all .25s var(--ease);cursor:pointer}
.gm-btn:hover{border-color:var(--glass-border-hover)}
.gm-btn--active{border-color:var(--gold);background:var(--gold-bg);box-shadow:var(--glow-gold)}
.gm-btn b{display:block;font-size:13px;font-weight:700;color:var(--t1);margin-bottom:3px}
.gm-btn span{font-size:10px;color:var(--t3);line-height:1.3}
/* Color-coded mode buttons (active state). Standard=white, Terminal=red,
   Jackpot=gold, Share=green. The b text takes the same accent color so users
   can spot the active mode at a glance. */
.gm-btn--standard.gm-btn--active{border-color:#ffffff;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 22px rgba(255,255,255,.10)}
.gm-btn--standard.gm-btn--active b{color:#ffffff}
.gm-btn--terminal.gm-btn--active{border-color:#ef4444;background:rgba(239,68,68,.06);box-shadow:0 0 0 1px rgba(239,68,68,.25),0 0 22px rgba(239,68,68,.18)}
.gm-btn--terminal.gm-btn--active b{color:#ef4444}
.gm-btn--jackpot.gm-btn--active{border-color:#fbbf24;background:rgba(251,191,36,.06);box-shadow:0 0 0 1px rgba(251,191,36,.25),0 0 22px rgba(251,191,36,.18)}
.gm-btn--jackpot.gm-btn--active b{color:#fbbf24}
.gm-btn--share.gm-btn--active{border-color:#22c55e;background:rgba(34,197,94,.06);box-shadow:0 0 0 1px rgba(34,197,94,.25),0 0 22px rgba(34,197,94,.18)}
.gm-btn--share.gm-btn--active b{color:#22c55e}

.cb-fmt-row{display:flex;gap:20px;flex-wrap:wrap}
.fmt-row{display:flex;gap:5px;flex-wrap:wrap}
.fmt-btn{padding:7px 14px;font-size:12px;font-weight:600;color:var(--t3);background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r);transition:all .25s var(--ease);text-align:center}
.fmt-btn:hover{border-color:var(--glass-border-hover);color:var(--t2)}
.fmt-btn--active{border-color:var(--gold);color:var(--gold);background:var(--gold-bg);box-shadow:var(--glow-gold)}

.toggle-opt{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--t3);cursor:pointer;padding:7px 14px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r)}
.toggle-opt input{display:none}
.toggle-slider{width:30px;height:16px;background:var(--surface2);border-radius:8px;position:relative;transition:background .2s;flex-shrink:0}
.toggle-slider::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--t3);border-radius:50%;transition:all .2s}
.toggle-opt input:checked+.toggle-slider{background:var(--gold)}
.toggle-opt input:checked+.toggle-slider::after{left:16px;background:var(--bg)}

.cb-reorder-bar{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.cb-reorder-actions{display:flex;gap:6px;flex-wrap:wrap}
.reorder-btn{padding:8px 16px;font-size:12px;font-weight:500;color:var(--t3);background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r);transition:all .2s}
.reorder-btn:hover{color:var(--t1);border-color:var(--brd2)}
.reorder-btn--red{color:var(--red)}

.pack-slots{display:flex;gap:12px;flex-wrap:wrap;align-content:start;padding:24px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);min-height:220px}
.pack-slot{width:130px;height:160px;border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .2s var(--ease);position:relative}
.pack-slot--add{background:rgba(255,255,255,.02);border:2px dashed rgba(255,255,255,.1)}
.pack-slot--add:hover{border-color:var(--gold-dim);background:var(--gold-bg)}
.pack-slot__plus{width:36px;height:36px;border-radius:var(--r);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--t3)}
.pack-slot__label{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.pack-slot--filled{background:none;border:none;overflow:visible;cursor:grab}
.pack-slot--filled:active{cursor:grabbing}
.pack-slot--filled img{width:65%;height:auto;margin-bottom:2px}
.pack-slot--filled .ps-name{font-size:8px;font-weight:600;color:var(--t1);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:90%}
.pack-slot--filled .ps-price{font-size:9px;font-weight:600;color:var(--gold)}
.pack-slot--filled .ps-num{position:absolute;top:3px;left:3px;font-size:7px;font-weight:700;color:var(--t3);background:rgba(0,0,0,.5);padding:1px 4px;border-radius:3px}
.pack-slot--filled .ps-remove{position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:rgba(239,68,68,.15);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:9px;opacity:0;transition:opacity .2s}
.pack-slot--filled:hover .ps-remove{opacity:1}
.ps-letter{font-size:14px;font-weight:900;color:rgba(255,255,255,.4);margin:8px 0}

.cb-summary{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r);margin-top:8px;font-size:12px;color:var(--t2);flex-shrink:0}
.cb-summary b{color:var(--t1)}

.back-btn{font-size:13px;font-weight:500;color:var(--t3);transition:color .2s;display:inline-block}
.back-btn:hover{color:var(--gold)}

/* ═══════════════════════════════════════════════════════════════
   PACK PICKER MODAL — premium dark
   ═══════════════════════════════════════════════════════════════ */
.mdl--picker{max-width:780px;width:calc(100vw - 48px);max-height:min(640px,calc(100vh - 48px));height:min(640px,calc(100vh - 48px));display:flex;flex-direction:column;overflow:hidden;background:#0d0c14;border:1px solid rgba(255,255,255,.05);border-radius:14px}
.picker-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 12px;flex-shrink:0}
.picker-title{font-size:17px;font-weight:700;color:#fff;margin:0;letter-spacing:-0.01em}
.picker-search-row{display:flex;gap:6px;align-items:center;padding:0 22px 12px;flex-shrink:0}
.picker-search-wrap{flex:1;position:relative;display:flex;align-items:center}
.picker-search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}
.picker-search{width:100%;padding:11px 36px 11px 36px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);border-radius:10px;color:#fff;font-size:13px;outline:none;transition:border-color .2s;font-family:var(--font)}
.picker-search::placeholder{color:var(--t3)}
.picker-search:focus{border-color:rgba(255,255,255,.15)}
.picker-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);border:none;color:var(--t2);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font);padding:0}
.picker-search-clear:hover{background:rgba(255,255,255,.15);color:#fff}
.picker-reset{padding:11px 4px 11px 10px;background:transparent;border:none;color:#5b8eff;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font)}
.picker-reset:hover{color:#7ba3ff}
.picker-filters{display:flex;gap:8px;padding:0 22px 14px;flex-shrink:0;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.04)}
.picker-chip-wrap{position:relative;display:flex;align-items:center;flex:1;min-width:0;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);border-radius:10px;transition:border-color .2s;padding:0 10px 0 12px}
.picker-chip-wrap:hover{border-color:rgba(255,255,255,.15)}
.picker-chip-icon{color:var(--t2);flex-shrink:0;pointer-events:none}
.picker-chip-caret{color:var(--t3);flex-shrink:0;pointer-events:none;margin-left:4px}
.picker-chip{flex:1;min-width:0;padding:10px 4px 10px 8px;background:transparent;border:none;color:#fff;font-size:12px;font-weight:600;font-family:var(--font);cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.picker-chip option{background:#14131c;color:#fff}

.picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 20px;overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent}
.picker-grid::-webkit-scrollbar{width:6px}
.picker-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
@media(min-width:520px){.picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:720px){.picker-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

.picker-card{position:relative;display:flex;flex-direction:column;gap:5px;cursor:pointer;transition:transform .2s var(--ease);background:transparent;border:none;padding:0;min-width:0}
.picker-card:hover{transform:translateY(-2px)}
.picker-card__top{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,var(--g,#6366f1) 0%,color-mix(in srgb,var(--g,#6366f1) 45%,#0a0a12) 100%);display:flex;flex-direction:column;align-items:center;padding:10px 8px;border:1px solid rgba(255,255,255,.06)}
.picker-card__top::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.14) 0%,transparent 55%);pointer-events:none}
.picker-card__top::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:8px 8px;pointer-events:none;opacity:.5}
.picker-card:hover .picker-card__top{box-shadow:0 6px 18px rgba(0,0,0,.5);border-color:rgba(255,255,255,.15)}
.picker-card__name{font-size:11px;font-weight:800;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.5);position:relative;z-index:1;line-height:1.2;margin-bottom:4px}
.picker-card__img{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.picker-card__img img{max-width:78%;max-height:88%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.picker-card__letter{display:none}
.picker-card__rarity{display:none}
.picker-card__price{background:#14121c;border-radius:8px;padding:7px 4px;text-align:center;font-size:12px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;border:1px solid rgba(255,255,255,.04)}
.picker-card__eye{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;opacity:0;transition:opacity .2s;z-index:3}
.picker-card:hover .picker-card__eye{opacity:1}
.picker-card__eye:hover{background:rgba(0,0,0,.8)}

.picker-card__add{display:none}
.picker-card__count{position:absolute;top:5px;left:5px;z-index:3;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#22c55e;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px rgba(0,0,0,.5)}

.pk-stepper{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:stretch;background:rgba(0,0,0,.85);border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 10px 10px;overflow:hidden}
.pk-step-btn{flex:1;padding:6px 0;font-size:14px;font-weight:800;color:#fff;background:transparent;text-align:center;transition:background .15s;border:none;cursor:pointer}
.pk-step-btn:hover{background:rgba(255,255,255,.1)}
.pk-step-count{padding:6px 0;font-size:11px;font-weight:800;color:#fff;text-align:center;min-width:26px;flex:0 0 auto;font-variant-numeric:tabular-nums;border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12)}

.picker-footer{display:flex;justify-content:flex-end;gap:24px;padding:12px 20px;border-top:1px solid rgba(255,255,255,.04);flex-shrink:0;background:rgba(0,0,0,.2)}
.picker-footer__stat{font-size:11px;color:var(--t3);font-weight:500}
.picker-footer__stat b{color:var(--t1);font-weight:700;margin-left:5px}

/* ═══════════════════════════════════════════════════════════════
   BATTLE LOBBY
   ═══════════════════════════════════════════════════════════════ */

/* Personal stats bar */
.battle-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.bstat{display:flex;align-items:center;gap:12px;padding:16px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg)}
.bstat__icon{font-size:24px;flex-shrink:0}
.bstat__info{display:flex;flex-direction:column;gap:2px}
.bstat__label{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.bstat__val{font-size:18px;font-weight:800;color:var(--gold)}
@media(max-width:768px){.battle-stats{grid-template-columns:1fr}}

.lobby-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.lobby-empty{text-align:center;padding:40px;color:var(--t3);font-size:13px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg)}

/* ═══ Battle Cards (Image #39 — EmpireDrop style) ═══ */
.live-battles{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}

/* Home page battles — more compact */
#homeBattles{max-height:none}
#homeBattles .bb-card{padding:0}
#homeBattles .bb-left{width:70px;padding:10px 8px}
#homeBattles .bb-left .bb-rounds{font-size:16px;width:40px;height:40px}
#homeBattles .bb-right{width:140px;padding:10px 14px;gap:4px}
#homeBattles .bb-right .bb-price{font-size:16px}
#homeBattles .bb-packs .bb-pk{width:50px;height:60px}

.bb-card{display:flex;align-items:center;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);overflow:hidden;transition:all .2s var(--ease);min-height:120px}
.bb-card:hover{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.06);transform:translateY(-2px);box-shadow:0 4px 20px rgba(139,92,246,.15)}

/* Left section: round number + status */
.bb-left{flex-shrink:0;width:80px;padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.bb-rounds{font-size:22px;font-weight:800;color:#fff;background:rgba(255,255,255,.04);width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.06);line-height:1}
.bb-status{font-size:9px;font-weight:600;letter-spacing:.05em}

/* Center: pack thumbnails — completed packs fade, upcoming stay bright */
.bb-packs{display:flex;gap:4px;flex:1;padding:12px 16px;align-items:center;overflow-x:auto;min-width:0;background:rgba(0,0,0,.18);border-radius:8px;margin:10px 0}
.bb-packs::-webkit-scrollbar{display:none}
.bb-pk{flex-shrink:0;width:90px;height:105px;border-radius:0;overflow:visible;position:relative;transition:all .3s;background:none;border:none}
.bb-pk img{width:100%;height:100%;object-fit:contain}
.bb-pk--done{filter:grayscale(.8) brightness(.35);opacity:.5}
.bb-pk--current{filter:drop-shadow(0 0 12px rgba(251,191,36,.5)) brightness(1.1);z-index:2;transform:scale(1.08)}
.bb-pk-arrow{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:8px;color:#fbbf24}

/* Right: price + avatars + view button + mode */
.bb-right{flex-shrink:0;width:200px;padding:14px 18px;display:flex;flex-direction:column;align-items:center;gap:6px}
.bb-price{font-size:21px;font-weight:900;color:var(--t1);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.02em}
.bb-price-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.bb-avatars{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;max-width:150px}
.bb-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;overflow:hidden;flex-shrink:0}
.bb-av img{width:100%;height:100%;object-fit:cover}
.bb-sep{font-size:11px;color:var(--t3);margin:0 1px;font-weight:700}
.bb-view{padding:6px 18px;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:var(--r);cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.04em}
.bb-view:hover{filter:brightness(1.15);box-shadow:0 4px 16px rgba(34,197,94,.3)}
.bb-mode{font-size:10px;font-weight:800;letter-spacing:.06em}

@media(max-width:900px){.bb-left{width:auto;min-width:80px}.bb-right{width:auto;min-width:120px}}

/* Battle highlight cards */
.bh-list{display:flex;flex-direction:column;gap:8px}
.bh-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);border-left:3px solid var(--purple);transition:all .2s var(--ease)}
.bh-card:hover{border-color:var(--glass-border-hover);transform:translateY(-1px)}
.bh-card__mode{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r);background:rgba(220,38,38,.1);color:var(--purple);flex-shrink:0;border:1px solid rgba(220,38,38,.12)}
.bh-card__info{flex:1;min-width:0}
.bh-card__title{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px}
.bh-card__meta{font-size:11px;color:var(--t3)}
.bh-card__result{font-size:14px;font-weight:700;flex-shrink:0}
.bh-card__btn{padding:6px 14px;font-size:11px;font-weight:600;color:var(--t2);background:var(--surface2);border:1px solid var(--brd2);border-radius:var(--r);transition:all .2s;flex-shrink:0}
.bh-card__btn:hover{color:var(--t1);border-color:var(--glass-border-hover)}

/* ═══════════════════════════════════════════════════════════════
   REWARDS PAGE — minimal, clean
   ═══════════════════════════════════════════════════════════════ */
.rw-page{max-width:640px;margin:0 auto;padding:16px 0}

/* Bonuses */
.rw-bonuses{display:flex;gap:10px;margin-bottom:16px}
@media(max-width:600px){.rw-bonuses{flex-direction:column}}
.rw-bonus-card{flex:1;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:10px}
.rw-bonus-card__label{font-size:13px;color:var(--t1);font-weight:500}
.rw-bonus-card__claimable{font-size:12px;color:var(--t2)}
.rw-bonus-card__cd{display:flex;align-items:center;gap:6px;width:100%}
.rw-cd-time{flex:1;padding:8px 12px;background:rgba(255,255,255,.04);border-radius:var(--r);font-size:12px;font-weight:600;color:var(--t3);text-align:center}
.rw-cd-bolt{width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c);border-radius:var(--r);cursor:pointer;transition:all .15s;flex-shrink:0;border:none;filter:brightness(1)}
.rw-cd-bolt:hover{filter:brightness(1.15)}

/* Promo */
.rw-promo{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-radius:var(--r-lg);margin-bottom:14px}
.rw-promo__left{flex:1}
.rw-promo__left h4{font-size:12px;font-weight:500;color:var(--t2)}
.rw-promo__left p{display:none}
.rw-promo__input{display:flex;gap:6px}
.rw-promo__input input{padding:6px 10px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r);color:var(--t1);font-size:12px;font-family:var(--font);outline:none;width:130px}
.rw-promo__input input::placeholder{color:var(--t3)}


/* Sections */
.rw-section{margin-top:16px}
.rw-section__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px}
.rw-section__header span:first-child{font-size:13px;font-weight:600;color:var(--t1)}
.rw-section__sub{font-size:11px;color:var(--t3)}

/* Daily free cases */
.rw-daily-cases{display:flex;gap:10px}
@media(max-width:700px){.rw-daily-cases{flex-wrap:wrap}.rw-dcase{flex:1 1 30%;min-width:110px}}
.rw-dcase{flex:1;min-width:0;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative;transition:all .2s}
.rw-dcase--available:hover{border-color:var(--glass-border-hover);transform:translateY(-2px)}
.rw-dcase__badge{position:absolute;top:8px;right:8px;font-size:9px;font-weight:700;padding:2px 8px;border-radius:4px;background:rgba(220,38,38,.15);color:#ef4444}
.rw-dcase img{width:70px;height:70px;object-fit:contain;margin:4px 0}
.rw-dcase__name{font-size:12px;font-weight:600;color:var(--t1)}
.rw-dcase__value{font-size:11px;color:var(--t3)}
.rw-dcase__btn{width:100%;padding:8px;font-size:11px;font-weight:600;color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c);border:none;border-radius:var(--r);cursor:pointer;transition:all .15s;margin-top:auto}
.rw-dcase__btn:hover{filter:brightness(1.15)}
.rw-dcase--locked{opacity:.35}
.rw-dcase--locked img{filter:grayscale(1)}
.rw-dcase--locked .rw-dcase__badge{background:rgba(255,255,255,.06);color:var(--t3)}

/* Referral */
.rw-referral{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--r-lg);padding:14px 18px}
.rw-ref-stat{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:60px}
.rw-ref-stat__val{font-size:16px;font-weight:600;color:var(--t1)}
.rw-ref-stat__label{font-size:10px;color:var(--t3)}
.rw-ref-link{display:flex;gap:6px;flex:1;margin-left:12px}
.rw-ref-link input{flex:1;padding:7px 10px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r);color:var(--t2);font-size:11px;font-family:monospace;outline:none}
.rw-ref-copy{padding:7px 14px;font-size:10px;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:all .15s}
.rw-ref-copy:hover{color:var(--t1);border-color:var(--brd2)}

/* Stats grid */
.rw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.03);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:500px){.rw-stats{grid-template-columns:repeat(2,1fr)}}
.rw-stat{background:var(--bg);padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.rw-stat__label{font-size:11px;color:var(--t2)}
.rw-stat__val{font-size:16px;font-weight:600;color:var(--t1)}

/* ═══════════════════════════════════════════════════════════════
   INVENTORY (kept for sell/withdraw logic)
   ═══════════════════════════════════════════════════════════════ */
.inv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:520px){.inv-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:800px){.inv-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.inv-grid{grid-template-columns:repeat(5,1fr)}}
.inv-c{background:var(--surface);border:1px solid var(--glass-border);border-top:3px solid var(--rc);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;transition:all .25s var(--ease)}
.inv-c:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.inv-c__n{font-size:14px;font-weight:700;color:var(--t1)}
.inv-c__t{font-size:10px;font-weight:600;padding:3px 10px;border-radius:var(--r);color:#fff}
.inv-c__r{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.inv-c__v{font-size:16px;font-weight:800;color:var(--gold)}
.inv-c__btns{display:flex;gap:6px;width:100%;margin-top:6px}
.inv-c__btns button{flex:1;padding:7px;font-size:11px;font-weight:600;border-radius:var(--r);border:1px solid var(--glass-border);transition:all .2s}
.inv-c__btns .sell-btn{background:rgba(16,185,129,.06);color:var(--green);border-color:rgba(16,185,129,.15)}
.inv-c__btns .sell-btn:hover{background:rgba(16,185,129,.12)}
.inv-c__btns .wd-btn{color:var(--t3)}
.inv-c__btns .wd-btn:hover{color:var(--t1);border-color:var(--brd2)}
.empty{text-align:center;padding:48px;color:var(--t3);font-size:14px}

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.ov{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:24px}
#ov-contents{z-index:250}
.ov.open{display:flex}
.mdl{width:100%;max-width:680px;background:var(--surface);border-radius:var(--r-xl);border:1px solid var(--glass-border);overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.5)}
.mdl--sm{max-width:460px}.mdl--wide{max-width:860px}
.mdl-h{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--brd)}
.mdl-h h3{flex:1;font-size:16px;font-weight:700}
.mdl-x{width:30px;height:30px;border-radius:var(--r);background:var(--surface2);color:var(--t3);display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s}
.mdl-x:hover{background:var(--purple);color:#fff}
.mdl-b{padding:20px;max-height:70vh;overflow-y:auto}
.mdl-ft{padding:14px 20px;display:flex;justify-content:center}
.rnd{font-size:12px;font-weight:600;color:var(--t3)}

/* ═══════════════════════════════════════════════════════════════
   PACK RIP ANIMATION
   ═══════════════════════════════════════════════════════════════ */
.rip-zone{position:relative;height:320px;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.rip-pack{position:relative;display:flex;z-index:2}
.rip-pack__left,.rip-pack__right{width:70px;height:200px;overflow:hidden;transition:transform 1s var(--ease-spring),opacity .8s}
.rip-pack__left img,.rip-pack__right img{width:140px;height:200px;object-fit:cover;border-radius:8px}
.rip-pack__right{direction:rtl}
.rip-pack__right img{direction:ltr}
.rip-pack__glow{position:absolute;top:50%;left:50%;width:6px;height:60%;transform:translate(-50%,-50%);background:var(--gold);border-radius:3px;opacity:0;z-index:3;box-shadow:0 0 30px var(--gold),0 0 60px var(--gold);transition:opacity .3s,width .6s,height .5s}
.rip-pack.ripping .rip-pack__left{transform:translateX(-60px) rotate(-12deg);opacity:0}
.rip-pack.ripping .rip-pack__right{transform:translateX(60px) rotate(12deg);opacity:0}
.rip-pack.ripping .rip-pack__glow{opacity:1;width:200px;height:120%}
.rip-particles{position:absolute;inset:0;z-index:1;pointer-events:none}
.rip-particles span{position:absolute;border-radius:50%;opacity:0}
.rip-card-reveal{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:scale(.5);transition:all .5s var(--ease-spring)}
.rip-card-reveal.visible{opacity:1;transform:scale(1)}
.rip-card-reveal__card{width:160px;padding:20px;border-radius:var(--r-lg);background:var(--surface);border:2px solid var(--rc);text-align:center;box-shadow:0 0 30px rgba(var(--rgb),.25)}
.rip-card-reveal__rarity{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:4px 12px;border-radius:var(--r);display:inline-block;margin-bottom:8px}
.rip-card-reveal__name{font-size:18px;font-weight:800;color:var(--t1);display:block;margin-bottom:6px}
.rip-card-reveal__value{font-size:22px;font-weight:900;color:var(--gold);display:block}
/* Auth modals */
.mdl--auth{max-width:420px}
.auth-body{padding:28px}
.auth-subtitle{text-align:center;font-size:12px;color:var(--t3);margin-bottom:18px}
.auth-google{width:100%;padding:11px;font-size:13px;font-weight:600;color:var(--t1);background:rgba(255,255,255,.06);border:1px solid var(--brd2);border-radius:var(--r);cursor:pointer;transition:all .2s;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:10px}
.auth-google:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15)}
.auth-google svg{flex-shrink:0}
.auth-age{margin-top:12px;font-size:11px;color:var(--t3);line-height:1.5}
.auth-age label{display:flex;align-items:flex-start;gap:6px;cursor:pointer}
.auth-age input{margin-top:2px}
.auth-age a{color:var(--t2);text-decoration:underline}
.auth-divider{display:flex;align-items:center;gap:14px;margin:18px 0;color:var(--t3);font-size:12px;font-style:italic}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--brd)}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:12px;font-weight:500;color:var(--t2);margin-bottom:5px}
.auth-field input{width:100%;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid var(--brd2);border-radius:var(--r);color:var(--t1);font-size:13px;font-family:var(--font);outline:none;transition:border-color .2s}
.auth-field input::placeholder{color:var(--t3)}
.auth-field input:focus{border-color:rgba(66,133,244,.4)}
.auth-extras{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:11px}
.auth-remember{display:flex;align-items:center;gap:5px;color:var(--t2);cursor:pointer}
.auth-forgot{color:rgba(66,133,244,.8);text-decoration:none;font-weight:500}
.auth-forgot:hover{text-decoration:underline}
.auth-error{padding:8px 12px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:var(--r);color:#ef4444;font-size:12px;margin-bottom:12px}
.auth-submit{width:100%;padding:11px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:var(--r);cursor:pointer;transition:all .2s;font-family:var(--font)}
.auth-submit:hover{filter:brightness(1.15)}
.auth-submit--red{background:linear-gradient(135deg,#dc2626,#b91c1c)}
.auth-switch{text-align:center;font-size:12px;color:var(--t3);margin-top:16px}
.auth-switch a{color:rgba(66,133,244,.9);text-decoration:none;font-weight:500}
.auth-switch a:hover{text-decoration:underline}

/* Header user dropdown */
.hdr-user{position:relative}
.hdr-user__btn{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:all .15s}
.hdr-user__btn:hover{border-color:var(--brd2)}
.hdr-user__avatar{width:28px;height:28px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--t1);overflow:hidden}
.hdr-user__avatar img{width:100%;height:100%;object-fit:cover}
.hdr-user__name{font-size:12px;font-weight:600;color:var(--t1)}
.hdr-user__level{font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;background:rgba(220,38,38,.15);color:#ef4444}
.hdr-dropdown{display:none;position:absolute;top:100%;right:0;margin-top:6px;background:#141318;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:6px 0;min-width:180px;box-shadow:0 12px 32px rgba(0,0,0,.6);z-index:200}
.hdr-user.open .hdr-dropdown{display:block}
.hdr-drop-item{display:block;padding:8px 16px;font-size:12px;color:var(--t2);cursor:pointer;transition:all .1s}
.hdr-drop-item:hover{background:rgba(255,255,255,.04);color:var(--t1)}
.hdr-drop-item--red{color:#ef4444}
.hdr-drop-item--red:hover{background:rgba(239,68,68,.06)}
.hdr-drop-sep{height:1px;background:var(--brd);margin:4px 0}
.hdr-right{gap:14px}

/* Deposit modal */
.mdl--deposit{max-width:480px}
.dep-body{padding:20px}
.dep-tabs{display:flex;gap:0;margin-bottom:16px;background:rgba(255,255,255,.04);border-radius:var(--r);overflow:hidden}
.dep-tab{flex:1;padding:10px;font-size:13px;font-weight:600;color:var(--t3);background:transparent;text-align:center;cursor:pointer;transition:all .15s;border:none;font-family:var(--font)}
.dep-tab.active{color:var(--t1);background:rgba(255,255,255,.06)}
.dep-tab:hover{color:var(--t2)}
.dep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
@media(max-width:400px){.dep-grid{grid-template-columns:repeat(2,1fr)}}
.dep-option{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r-lg);cursor:pointer;transition:all .15s}
.dep-option:hover{border-color:var(--brd2);background:rgba(255,255,255,.05)}
.dep-option__icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.dep-option__logo{width:28px;height:28px;border-radius:50%;flex-shrink:0}
.dep-option__info{display:flex;flex-direction:column;min-width:0}
.dep-option__name{font-size:12px;font-weight:600;color:var(--t1)}
.dep-option__ticker{font-size:10px;color:var(--t3)}
.dep-affiliate{display:flex;gap:8px;margin-bottom:14px}
.dep-aff-input{flex:1;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r);color:var(--t1);font-size:13px;font-family:var(--font);outline:none}
.dep-aff-input::placeholder{color:var(--t3)}
.dep-aff-btn{padding:10px 20px;font-size:12px;font-weight:600;color:var(--t2);background:transparent;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:all .15s;font-family:var(--font)}
.dep-aff-btn:hover{color:var(--t1);border-color:var(--brd2)}
.dep-disclaimer{font-size:10px;color:var(--t3);text-align:center;font-style:italic}

/* Deposit detail view */
.dep-detail{display:none}
.dep-detail.active{display:block}
.dep-grid-view{display:block}
.dep-grid-view.hidden{display:none}
.dep-back{font-size:13px;color:var(--t2);cursor:pointer;display:flex;align-items:center;gap:6px;margin-bottom:16px;background:none;border:none;font-family:var(--font)}
.dep-back:hover{color:var(--t1)}
.dep-detail-row{display:flex;gap:12px;margin-bottom:16px}
.dep-detail-field{flex:1}
.dep-detail-field label{display:block;font-size:11px;font-weight:600;color:var(--t2);margin-bottom:4px}
.dep-detail-field .dep-val{padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r);font-size:13px;color:var(--t3)}
.dep-addr-label{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.dep-addr-box{display:flex;align-items:center;gap:8px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r);margin-bottom:16px}
.dep-addr-box input{flex:1;background:none;border:none;color:var(--t2);font-size:12px;font-family:monospace;outline:none}
.dep-addr-copy{padding:6px 10px;font-size:11px;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;font-family:var(--font)}
.dep-addr-copy:hover{color:var(--t1);border-color:rgba(255,255,255,.12)}
.dep-info-box{background:rgba(255,255,255,.02);border:1px solid var(--brd);border-radius:var(--r);padding:14px 16px}
.dep-info-box p{font-size:12px;color:var(--t3);line-height:1.6}
.dep-info-box strong{color:var(--t2)}

.mdl--opener{max-width:520px}
.rflash{position:fixed;inset:0;pointer-events:none;z-index:300;animation:flash .5s ease-out forwards}

/* ═══════════════════════════════════════════════════════════════
   SPINNER (backup)
   ═══════════════════════════════════════════════════════════════ */
.spin-zone{padding:20px 12px;background:var(--bg)}
.spin{position:relative;max-width:620px;margin:0 auto;height:130px}
@media(min-width:768px){.spin{height:148px}}
.sp-vp{position:relative;overflow:hidden;height:100%;border-radius:var(--r)}
.sp-trk{display:flex;gap:5px;height:100%;will-change:transform}
.sp-ptr{position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;background:var(--purple);z-index:10;transform:translateX(-50%);box-shadow:0 0 12px var(--purple-dim)}
.sp-ptr::before,.sp-ptr::after{content:'';position:absolute;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent}
.sp-ptr::before{top:-1px;border-top:6px solid var(--purple)}
.sp-ptr::after{bottom:-1px;border-bottom:6px solid var(--purple)}
.sp-f{position:absolute;top:0;bottom:0;width:40px;z-index:5;pointer-events:none}
.sp-f--l{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.sp-f--r{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.sc{flex-shrink:0;width:90px;height:100%;border-radius:var(--r);background:var(--surface2);border:2px solid var(--brd);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px;transition:all .3s}
.sc__t{font-size:8px;font-weight:600;text-transform:uppercase;padding:2px 6px;border-radius:3px;color:#fff}
.sc__n{font-size:10px;font-weight:700;color:var(--t1);text-align:center;line-height:1.1}
.sc__v{font-size:9px;font-weight:700;color:var(--gold)}
.sc__b{width:70%;height:2px;border-radius:1px;margin-top:auto}
.sc--w{border-color:var(--rc)!important;box-shadow:0 0 16px rgba(var(--rgb),.35);transform:scale(1.05);z-index:5}
.o-res{text-align:center;padding:14px 20px 0}
.rc{display:inline-flex;flex-direction:column;align-items:center;gap:8px;padding:18px 28px;background:var(--surface2);border:2px solid var(--rc);border-radius:var(--r-lg);box-shadow:0 0 24px rgba(var(--rgb),.2);animation:pop .35s var(--ease-spring)}
.rc__r{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:3px 12px;border-radius:var(--r)}
.rc__n{font-size:1.2rem;font-weight:800;color:var(--t1)}
.rc__tp{font-size:10px;font-weight:600;padding:3px 10px;border-radius:var(--r);color:#fff}
.rc__v{font-size:1.1rem;font-weight:800;color:var(--gold)}

/* ═══════════════════════════════════════════════════════════════
   BATTLE SCREEN — PackDraw layout
   Top: back + pack strip + cost
   Middle: player columns with sword dividers
   Bottom: player cards + pulled items
   ═══════════════════════════════════════════════════════════════ */
.battle-screen{display:none;position:fixed;top:58px;left:260px;right:0;bottom:0;z-index:150;background:var(--bg);overflow-y:auto;overflow-x:hidden}
@media(max-width:1100px){.battle-screen{left:0}}
.battle-screen.active{display:block}

/* Full-width container */
.bs-wrap{width:100%;max-width:1200px;margin:0 auto}

/* Top bar: back + pack strip + cost */
.bs-top{display:flex;align-items:center;padding:12px 20px;border-bottom:1px solid var(--brd);flex-shrink:0;gap:16px}
.bs-back{font-size:13px;font-weight:500;color:var(--t2);background:none;border:none;cursor:pointer;flex-shrink:0;transition:color .2s}
.bs-back:hover{color:var(--t1)}
.bs-packstrip{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.bs-packstrip::-webkit-scrollbar{display:none}
.bs-ps{width:42px;height:54px;border-radius:0;background:none;border:none;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:var(--t3);flex-shrink:0;transition:all .3s;position:relative;overflow:visible}
.bs-ps img{width:100%;height:100%;object-fit:contain}
.bs-ps__num{position:absolute;bottom:1px;right:2px;font-size:7px;font-weight:700;color:var(--t3);background:rgba(0,0,0,.6);padding:0 3px;border-radius:2px}
.bs-ps.active{transform:scale(1.15);filter:drop-shadow(0 0 8px rgba(220,38,38,.4));z-index:2}
.bs-ps.done{opacity:.3}
.bs-top__right{flex-shrink:0}

/* Info bar */
.bs-info{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;border-bottom:1px solid var(--brd);flex-shrink:0}
.bs-mode{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:4px 12px;border-radius:var(--r);background:rgba(255,255,255,.06);color:#ffffff;border:1px solid rgba(255,255,255,.18)}
.bs-round-lbl{font-size:13px;color:var(--t2);font-weight:600;text-align:center;flex:1}
.bs-round-counter{font-size:12px;font-weight:600;color:var(--t3)}
.bs-cost{font-size:12px;font-weight:600;color:var(--t2)}
.bs-jackpot{font-size:13px;font-weight:800;color:#fbbf24;padding:4px 12px;border-radius:var(--r);background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.35);text-shadow:0 0 8px rgba(251,191,36,.4);letter-spacing:.02em;white-space:nowrap}
/* Jackpot top-center banner — big white running total above the arena. */
.bs-jackpot-banner{text-align:center;font-size:30px;font-weight:900;color:#fff;letter-spacing:-.01em;padding:14px 0 8px;text-shadow:0 2px 12px rgba(0,0,0,.6),0 0 24px rgba(251,191,36,.25);flex-shrink:0;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Countdown overlay */
.bs-countdown{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(24,23,31,.7)}
.bs-countdown__num{font-size:clamp(80px,15vw,140px);font-weight:900;color:#fff;text-shadow:0 0 40px rgba(255,255,255,.2);animation:cdPop .6s var(--ease-spring)}
@keyframes cdPop{from{opacity:0;transform:scale(2)}to{opacity:1;transform:scale(1)}}

/* Arena — fixed height, fits on screen */
.bs-arena{display:flex;align-items:stretch;position:relative;height:50vh;min-height:300px;max-height:500px}
.bs-rip-area{display:flex;align-items:stretch;width:100%;flex:1;position:relative;overflow:hidden}

/* Player column — equal width, full height */
.bs-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:8px 4px;border-right:1px solid var(--brd);min-width:0;overflow:hidden}
.bs-col:last-child{border-right:none}
/* Sword divider — overlaid on column border, not taking width */
.bs-sword{width:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;opacity:.3;position:relative;z-index:5}
.bs-sword.active{opacity:.5;font-size:20px}

/* Pack rip inside column */
.bs-pack-wrap{position:relative;width:80px;height:110px;display:flex;align-items:center;justify-content:center}
.bs-pack{position:relative;width:74px;height:105px;border-radius:var(--r);overflow:hidden;transition:transform .2s}
.bs-pack__half{position:absolute;inset:0;background:linear-gradient(145deg,#5b21b6,#1e0a4a);border:1.5px solid rgba(220,38,38,.35);border-radius:var(--r)}
.bs-pack__l{z-index:1}
.bs-pack__r{position:absolute;top:0;right:0;width:0;height:0;border-radius:0;border:none;background:none;border-left:45px solid transparent;border-top:45px solid rgba(220,38,38,.5);transform-origin:top right;opacity:0;z-index:3;transition:all .6s var(--ease-spring)}
.bs-pack__glow{position:absolute;top:0;right:0;width:16px;height:16px;border-radius:0 var(--r) 0 50%;background:radial-gradient(circle at top right,var(--gold),transparent 70%);opacity:0;transition:all .5s;z-index:2}
.bs-pack__shimmer{position:absolute;inset:0;border-radius:var(--r);opacity:0;z-index:2;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);background-size:200% 200%;transition:opacity .3s}
.bs-pack.suspense{animation:packTremble .12s ease-in-out infinite}
.bs-pack.suspense .bs-pack__glow{opacity:.6;width:24px;height:24px}
.bs-pack.suspense .bs-pack__shimmer{opacity:1;animation:shimmerSweep .8s ease infinite}
.bs-pack.suspense-peak{animation:packTrembleHard .07s ease-in-out infinite}
.bs-pack.suspense-peak .bs-pack__glow{opacity:1;width:40px;height:40px;box-shadow:0 0 20px var(--gold)}
.bs-pack.suspense-peak .bs-pack__r{opacity:.6;border-left:12px solid transparent;border-top:12px solid rgba(220,38,38,.4);transform:rotate(-3deg)}
.bs-pack.ripped{animation:none}
.bs-pack.ripped .bs-pack__r{opacity:1;border-left:50px solid transparent;border-top:50px solid rgba(90,30,150,.6);transform:rotate(-45deg) translate(8px,-8px)}
.bs-pack.ripped .bs-pack__half{opacity:.3;transition:opacity .4s}
.bs-pack.ripped .bs-pack__glow{opacity:1;width:90px;height:90px;border-radius:50%;top:-16px;right:-16px;box-shadow:0 0 30px var(--gold)}
.bs-burst-particle{position:absolute;width:3px;height:3px;border-radius:50%;top:15%;right:15%;opacity:0;animation:burstOut .6s ease forwards;z-index:10}

/* ═══════════════════════════════════════════════════════════════
   VERTICAL ITEM SCROLL — PackDraw-style reveal
   ═══════════════════════════════════════════════════════════════ */

/* Scroll viewport — items tumble through vertically */
.vscroll{position:relative;width:100%;height:100%;overflow:hidden}
/* Fade top/bottom */
.vscroll::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(24,23,31,.7) 0%,transparent 25%,transparent 75%,rgba(24,23,31,.7) 100%)}

/* Active item highlight during scroll — brighten + stronger glow */
.vscroll-item.active-item{z-index:3;filter:brightness(1.15) drop-shadow(0 6px 11px rgba(var(--rgb,255,255,255),.35)) drop-shadow(0 3px 6px rgba(0,0,0,.55)) !important}
/* Landing arrows — far edges, pointing inward toward battle */
.vscroll__arrow{display:none}
.bs-arena::before,.bs-arena::after{content:'';position:absolute;top:50%;z-index:5;width:0;height:0;transform:translateY(-50%);border-top:10px solid transparent;border-bottom:10px solid transparent}
.bs-arena::before{left:18px;border-left:13px solid #fff}
.bs-arena::after{right:18px;border-right:13px solid #fff}

/* ═══ TIEBREAKER SPIN — horizontal jackpot-style picker ═══ */
.tb-spin{position:absolute;top:0;left:0;right:0;z-index:60;background:linear-gradient(180deg,rgba(24,23,31,.96),rgba(24,23,31,.92));border-bottom:1px solid rgba(255,255,255,.08);padding:14px 0 18px;opacity:0;transform:translateY(-100%);transition:transform .4s cubic-bezier(.2,1,.3,1),opacity .4s ease;pointer-events:none}
.tb-spin.active{opacity:1;transform:translateY(0)}
.tb-spin.fading{opacity:0;transform:translateY(-100%);transition:transform .4s ease,opacity .4s ease}
.tb-spin__label{text-align:center;font-size:11px;font-weight:800;letter-spacing:.2em;color:#fbbf24;margin-bottom:10px;text-shadow:0 0 8px rgba(251,191,36,.5)}
.tb-spin__viewport{position:relative;width:100%;height:110px;overflow:hidden}
.tb-spin__viewport::before,.tb-spin__viewport::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:3;pointer-events:none}
.tb-spin__viewport::before{left:0;background:linear-gradient(90deg,rgba(24,23,31,1),transparent)}
.tb-spin__viewport::after{right:0;background:linear-gradient(270deg,rgba(24,23,31,1),transparent)}
.tb-spin__pointer{position:absolute;left:50%;top:-2px;width:2px;height:114px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.3));z-index:4;transform:translateX(-50%);box-shadow:0 0 12px rgba(255,255,255,.6)}
.tb-spin__pointer::before,.tb-spin__pointer::after{content:'';position:absolute;left:50%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;transform:translateX(-50%)}
.tb-spin__pointer::before{top:-2px;border-top:8px solid #fff}
.tb-spin__pointer::after{bottom:-2px;border-bottom:8px solid #fff}
.tb-spin__track{display:flex;align-items:center;height:100%;will-change:transform}
.tb-spin__cell{flex:0 0 130px;height:96px;margin:0 0;border:1px solid rgba(255,255,255,.1);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;transition:transform .3s,box-shadow .3s}
.tb-spin__av{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.tb-spin__av img{width:100%;height:100%;object-fit:cover}
.tb-spin__name{font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-spin__cell--won{transform:scale(1.08);box-shadow:0 0 0 2px #fbbf24,0 0 24px 4px rgba(251,191,36,.6),0 6px 18px rgba(0,0,0,.6);z-index:5}
/* Jackpot variant — cells have variable widths set inline (proportional to %),
   show a percentage label, and tiny slivers gracefully omit the avatar/name. */
.tb-spin--jackpot .tb-spin__label{color:#fbbf24;text-shadow:0 0 12px rgba(251,191,36,.6)}
.tb-spin__cell--jp{flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 4px;min-width:8px;overflow:hidden}
.tb-spin__pct{font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);letter-spacing:.02em;line-height:1}

.vscroll-track{display:flex;flex-direction:column;align-items:center}

/* Wrap controls spacing */
.vscroll-item-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.vscroll-item{width:70px;height:94px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;background:transparent;border:none;overflow:visible;filter:drop-shadow(0 4px 7px rgba(var(--rgb,255,255,255),.16)) drop-shadow(0 3px 5px rgba(0,0,0,.45))}
.vscroll-item__img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.vscroll-item__name{position:absolute;bottom:0;left:0;right:0;font-size:8px;font-weight:600;color:#fff;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.88));padding:9px 3px 3px;border-radius:0 0 4px 4px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3;pointer-events:none}
.pd-arena .vscroll-item__name{font-size:11px;padding:12px 4px 4px}
.bs-col .vscroll-item__name{font-size:8px}
/* God-spin trigger — U-crown token on a solid gold medallion with downward
   gold drop-shadow glow (matching the other spinner cards' pattern) and a
   subtle center-only sparkle that can't bleed past the U on the right. */
.vscroll-item--god{background:transparent !important;border-radius:0;border:none;overflow:visible;box-shadow:none !important;filter:drop-shadow(0 8px 14px rgba(251,191,36,.5)) drop-shadow(0 3px 6px rgba(0,0,0,.5)) !important}
.vscroll-item--god::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 30%,#fff6c4 0%,#ffe27a 20%,#fbbf24 55%,#d97706 100%);box-shadow:0 0 0 2px rgba(255,230,130,.7),inset 0 3px 8px rgba(255,255,255,.45),inset 0 -5px 12px rgba(139,69,19,.35);z-index:0;animation:goldPulse 1.6s ease-in-out infinite;pointer-events:none}
/* Subtle upper-left sparkle arc — positioned away from the U's right leg so
   it can't show up as a 'smidge' next to the crown. */
.vscroll-item--god::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(1.5px 1.5px at 28% 22%,rgba(255,255,255,.95),transparent 60%),radial-gradient(1px 1px at 20% 40%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1.2px 1.2px at 38% 30%,rgba(255,255,255,.85),transparent 60%);z-index:3;animation:sparkleShimmer 2.4s ease-in-out infinite;pointer-events:none}
.vscroll-item--god .vscroll-item__img{object-fit:contain;width:80%;height:80%;border-radius:0;position:relative;z-index:2}
@keyframes goldPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(255,230,130,.7),inset 0 3px 8px rgba(255,255,255,.45),inset 0 -5px 12px rgba(139,69,19,.35);transform:scale(1)}
  50%{box-shadow:0 0 0 3px rgba(255,240,160,.85),inset 0 3px 8px rgba(255,255,255,.55),inset 0 -5px 12px rgba(139,69,19,.35);transform:scale(1.05)}
}
@keyframes sparkleShimmer{
  0%,100%{opacity:.45}
  50%{opacity:.95}
}
.vscroll-item__price{font-size:14px;font-weight:800;color:var(--t1);margin-top:2px;position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);white-space:nowrap}
.vscroll-item__price.hidden{display:none}
.vscroll-item::before{display:none}
/* Winning item — slightly brighter glow */
.vscroll-item.won{filter:drop-shadow(0 6px 11px rgba(var(--rgb,255,255,255),.32)) drop-shadow(0 3px 6px rgba(0,0,0,.55)) brightness(1.08)}

/* Solo open — larger */
.pd-arena .vscroll-item{width:100px;height:135px}
.pd-arena .vscroll-item__img{width:100%;height:100%}
.pd-arena .vscroll-item__price{font-size:18px}
.pd-arena .vscroll-item-wrap{}

/* Battle columns — restrict the spinner viewport so only the active item +
   one above/below are fully visible, with small slivers of the items two up
   and two down. Combined with the wrap-padding override below this gives a
   consistent ~3-item view. */
.bs-col .vscroll-item{width:64px;height:86px}
.bs-col .vscroll-item__img{width:100%;height:100%}
.bs-col .vscroll-item__price{font-size:12px}
.bs-col .vscroll-item-wrap{padding-top:34px !important;padding-bottom:34px !important}
.bs-col .vscroll{max-height:480px;height:480px}

/* God Spin — triggered when a column lands on a gold/legendary item. The column
   freezes, the gold card flashes, then the column respins with only legendaries. */
@keyframes ripSpinFlash{
  0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0), inset 0 0 0 0 rgba(251,191,36,0);filter:brightness(1)}
  20%{box-shadow:0 0 40px 8px rgba(251,191,36,.9), inset 0 0 30px rgba(251,191,36,.5);filter:brightness(1.6)}
  40%{box-shadow:0 0 20px 4px rgba(251,191,36,.4), inset 0 0 18px rgba(251,191,36,.25);filter:brightness(1.2)}
  60%{box-shadow:0 0 50px 10px rgba(251,191,36,1), inset 0 0 36px rgba(251,191,36,.6);filter:brightness(1.8)}
  80%{box-shadow:0 0 30px 6px rgba(251,191,36,.6), inset 0 0 22px rgba(251,191,36,.35);filter:brightness(1.3)}
}
@keyframes ripSpinPulse{
  0%,100%{background:radial-gradient(ellipse at center,rgba(251,191,36,.15) 0%,transparent 70%)}
  50%{background:radial-gradient(ellipse at center,rgba(251,191,36,.35) 0%,transparent 70%)}
}
.bs-col.rip-spin-flash{animation:ripSpinFlash 1.4s ease-in-out; position:relative}
.bs-col.rip-spin-flash::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;animation:ripSpinPulse 1.4s ease-in-out}
.bs-col.rip-spin-active{box-shadow:inset 0 0 40px rgba(251,191,36,.25);background:radial-gradient(ellipse at center,rgba(251,191,36,.08) 0%,transparent 60%)}
.bs-col.rip-spin-active::after{content:'RIP SPIN';position:absolute;top:4px;left:50%;transform:translateX(-50%);z-index:10;font-size:10px;font-weight:900;color:#fbbf24;text-shadow:0 0 8px rgba(251,191,36,.9),0 0 14px rgba(251,191,36,.5);letter-spacing:1px;pointer-events:none}

/* Bottom — players + loot */
.bs-bottom{flex-shrink:0;border-top:1px solid var(--brd)}

/* Player bar — flush columns matching the arena */
.bs-players{display:flex;background:var(--surface);border-bottom:1px solid var(--brd)}
.bs-p{flex:1;display:flex;align-items:center;gap:8px;padding:8px 12px;border-right:1px solid var(--brd);min-width:0}
.bs-p:last-child{border-right:none}
.bs-p__av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;transition:box-shadow .3s}
.bs-p__av img{width:100%;height:100%;object-fit:cover}
.bs-p__info{min-width:0;flex:1}
.bs-p__name{font-size:11px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.bs-p__pct{display:inline-block;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:800;color:#fbbf24;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.3);border-radius:6px;letter-spacing:.02em;vertical-align:middle}
.bs-p__total{font-size:15px;font-weight:800;color:#fff;display:block;transition:color .3s,transform .3s;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-feature-settings:"tnum" 1;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.bs-p.winner .bs-p__av{box-shadow:0 0 0 2px #22c55e, 0 0 8px rgba(34,197,94,.3)}
.bs-p.winner{background:rgba(34,197,94,.06)}

/* Loot grid — flex columns matching players */
.bs-card-rows{display:flex;padding:0;background:transparent}
.bs-card-col{flex:1;display:flex;flex-direction:column;gap:8px;padding:8px;min-width:0;align-items:center}
.bs-card-col__round{display:none}

/* Loot tile — matches .pd-item from the pack detail page: subtle translucent
   box, aspect-locked, radial rarity glow inside, card image floating in the
   middle, odds on top and name+bold white price on the bottom.
   Capped at ~130px so wide columns don't stretch them huge. */
.bs-card{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.035);border-radius:12px;padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:0;position:relative;overflow:hidden;aspect-ratio:1/1.05;width:100%;max-width:130px;animation:cardIn .2s var(--ease-spring)}
.bs-card__odds{font-size:11px;font-weight:600;color:var(--t2);text-align:center;margin-bottom:0;font-variant-numeric:tabular-nums}
.bs-card__icon{width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:2px 0 4px;background:radial-gradient(circle at center,rgba(var(--rr,255,255,255),.13) 0%,rgba(var(--rr,255,255,255),.04) 45%,transparent 70%);border:none;border-radius:0;position:relative}
.bs-card__icon img{max-width:60%;max-height:75%;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.bs-card__name{font-size:11px;font-weight:500;color:var(--t2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;margin-bottom:3px}
.bs-card__val{font-size:14px;font-weight:700;color:#fff;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
/* Jackpot mystery cards — keep the result hidden until the final round so it
   builds suspense. Big "?" icon, blurred name, dimmed value. */
.bs-card--mystery{filter:saturate(.4)}
.bs-card--mystery .bs-card__icon{background:radial-gradient(circle at center,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 45%,transparent 70%)}
.bs-card__qmark{font-size:42px;font-weight:900;color:rgba(255,255,255,.45);text-shadow:0 0 16px rgba(255,255,255,.15);line-height:1}
.bs-card--mystery .bs-card__name{color:var(--t3);letter-spacing:.06em}
.bs-card--mystery .bs-card__val{color:rgba(255,255,255,.5)}

@keyframes packTremble{0%,100%{transform:translate(0) rotate(0)}25%{transform:translate(-1.5px,1px) rotate(-.4deg)}75%{transform:translate(1.5px,-1px) rotate(.4deg)}}
@keyframes packTrembleHard{0%,100%{transform:translate(0) rotate(0)}20%{transform:translate(-2px,1.5px) rotate(-.8deg)}40%{transform:translate(2px,-1px) rotate(.6deg)}60%{transform:translate(-1px,2px) rotate(-.5deg)}80%{transform:translate(1.5px,-1.5px) rotate(.7deg)}}
@keyframes shimmerSweep{0%{background-position:200% 200%}100%{background-position:-100% -100%}}
@keyframes burstOut{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(0)}}

.bs-winner{display:none;position:fixed;inset:0;background:rgba(24,23,31,.9);z-index:310;align-items:center;justify-content:center}
.bs-winner.active{display:flex}
.bs-winner__content{text-align:center;animation:pop .5s var(--ease-spring)}
.bs-winner__content h2{font-size:clamp(28px,5vw,48px);font-weight:900;margin-bottom:8px}
.bs-winner__content p{font-size:14px;color:var(--t2);margin-bottom:24px}
.bs-winner__scores{display:flex;gap:14px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}
.bs-winner__score{padding:14px 22px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);text-align:center;min-width:100px}
.bs-winner__score.won{border-color:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,.2)}
.bs-winner__score span{display:block;font-size:11px;color:var(--t3);margin-bottom:4px}
.bs-winner__score b{font-size:18px;color:var(--gold)}
/* Team display in winner overlay */
.bs-winner__team{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--brd);border-radius:var(--r-lg);min-width:140px}
.bs-winner__team.won{border-color:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,.2)}
.bs-winner__team-label{font-size:12px;font-weight:700;color:var(--t2);text-align:center;margin-bottom:4px}
.bs-winner__team.won .bs-winner__team-label{color:#fbbf24}
.bs-winner__vs{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--t3);padding:0 10px}

/* Battle result sides — shown in arena after battle ends */
.bs-result-side{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px}
.bs-result-label{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.bs-result-label--win{color:#22c55e}
.bs-result-label--lose{color:#ef4444;opacity:.6}
.bs-result-amount{font-weight:900}
.bs-result-amount--win{font-size:32px;color:#22c55e}
.bs-result-amount--win span{font-size:14px;font-weight:600;opacity:.7}
.bs-result-amount--lose{font-size:28px;color:#ef4444;opacity:.5}
.bs-result-names{font-size:13px;font-weight:600;color:var(--t2)}
.bs-result-total{font-size:11px;color:var(--t3)}
.bs-result-side--win{background:rgba(34,197,94,.04)}
.bs-result-side--lose{opacity:.6}

/* Team divider in player bar */
.bs-team-divider{display:flex;align-items:center;justify-content:center;width:0;font-size:12px;color:var(--t3);flex-shrink:0;position:relative;z-index:5}
/* Team divider in loot grid */
.bs-loot-divider{width:0;flex-shrink:0;position:relative;z-index:5}

/* Waiting room */
.wr-header{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--brd)}
.wr-slots{display:flex;align-items:center;justify-content:center;gap:0;padding:60px 20px;flex-wrap:wrap}
.wr-slot{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:100px;padding:16px}
.wr-slot__avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;overflow:hidden}
.wr-slot__avatar img{width:100%;height:100%;object-fit:cover}
.wr-slot--empty .wr-slot__avatar{border:2px dashed rgba(255,255,255,.15);color:var(--t3);font-size:20px}
.wr-slot__name{font-size:12px;font-weight:600;color:var(--t1)}
.wr-slot__btn{padding:6px 14px;font-size:10px;font-weight:600;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:all .15s;font-family:var(--font)}
.wr-slot__btn:hover{color:var(--t1);border-color:rgba(255,255,255,.15)}
.wr-vs{font-size:18px;color:var(--t3);opacity:.4;padding:0 8px}
.wr-actions{display:flex;justify-content:center;padding:20px}

.bs-winner__actions{display:flex;gap:10px;justify-content:center}
.bs-confetti span{position:absolute;width:6px;height:6px;border-radius:50%;animation:confettiFall 2s ease forwards}

/* Contents modal */
.c-head{display:flex;align-items:center;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--brd);margin-bottom:18px}
.c-head img{width:80px;height:auto;border-radius:var(--r-lg)}
.c-head__letter{width:60px;height:60px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:#fff;flex-shrink:0}
.c-head__info{flex:1}
.c-head__info h3{font-size:18px;font-weight:700;margin-bottom:3px}
.c-head__info p{font-size:13px;color:var(--t2);margin-bottom:10px}
.c-stitle{font-size:16px;font-weight:700;color:var(--t1);margin-bottom:4px}
.c-ssub{font-size:13px;color:var(--t3);margin-bottom:16px}
.c-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:520px){.c-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:800px){.c-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.c-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1280px){.c-grid{grid-template-columns:repeat(6,1fr)}}
.c-item{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.035);border-radius:12px;padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:0;position:relative;transition:transform .25s var(--ease-spring),border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);overflow:hidden;aspect-ratio:1/1.05;will-change:transform}
.c-item:hover{transform:translateY(-4px) scale(1.04);border-color:rgba(var(--rr),.42) !important;background:rgba(255,255,255,.045) !important;box-shadow:0 0 0 1px rgba(var(--rr),.32),0 0 20px 2px rgba(var(--rr),.32),0 0 42px 8px rgba(var(--rr),.12) !important}
.c-item__icon{transition:background .25s var(--ease)}
.c-item:hover .c-item__icon{background:radial-gradient(circle at center,rgba(var(--rr),.5) 0%,rgba(var(--rr),.18) 42%,transparent 72%) !important}
/* Gold / God Spin c-item — same treatment as pd-item--god */
.c-item--god{border-color:rgba(251,191,36,.25);box-shadow:0 0 0 1px rgba(251,191,36,.1),0 0 24px rgba(251,191,36,.12)}
.c-item--god:hover{border-color:rgba(251,191,36,.5);box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 0 1px rgba(251,191,36,.25),0 0 32px rgba(251,191,36,.22)}
.c-item__icon--god{background:radial-gradient(circle at center,rgba(251,191,36,.35) 0%,rgba(251,191,36,.12) 42%,transparent 70%) !important}
.c-item__icon--god img{max-width:88% !important;max-height:92% !important;filter:drop-shadow(0 0 12px rgba(251,191,36,.6)) drop-shadow(0 6px 16px rgba(0,0,0,.5)) !important}
.c-item--god .c-item__val{color:#fbbf24;text-shadow:0 0 10px rgba(251,191,36,.4);letter-spacing:.04em}
.c-item__bar{display:none}
.c-item__odds{font-size:11px;font-weight:600;color:var(--t2);text-align:center;margin-bottom:0;font-variant-numeric:tabular-nums}
.c-item__icon{width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:2px 0 4px;background:radial-gradient(circle at center,rgba(var(--rr),.13) 0%,rgba(var(--rr),.04) 45%,transparent 70%);border:none;border-radius:0;position:relative}
.c-item__icon::after{display:none}
.c-item__icon img{max-width:60%;max-height:75%;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
.c-item__name{font-size:11px;font-weight:500;color:var(--t2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;margin-bottom:3px}
.c-item__type{display:none}
.c-item__val{font-size:14px;font-weight:700;color:#fff;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════════════════════════
   USER PAGES (Profile, Settings, Transactions)
   ═══════════════════════════════════════════════════════════════ */
.usr-page{max-width:600px;margin:0 auto;padding:16px 0}
.usr-title{font-size:18px;font-weight:700;margin-bottom:20px}
.usr-section{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:18px;margin-bottom:14px}
.usr-section-title{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:12px}
.usr-label{font-size:12px;font-weight:500;color:var(--t2);display:block;margin-bottom:6px}
.usr-hint{font-size:11px;color:var(--t3);margin-bottom:8px;line-height:1.5}
.usr-input{width:100%;padding:9px 12px;background:rgba(255,255,255,.04);border:1px solid var(--brd2);border-radius:var(--r);color:var(--t1);font-size:13px;font-family:var(--font);outline:none}
.usr-input:focus{border-color:rgba(220,38,38,.3)}
.usr-sub{font-size:11px;color:var(--t3)}
.usr-avatar-row{display:flex;align-items:center;gap:14px}
.usr-avatar-big{width:56px;height:56px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--t1);overflow:hidden;flex-shrink:0}
.usr-avatar-big img{width:100%;height:100%;object-fit:cover}
.usr-avatar-edit{position:relative;cursor:pointer}
.usr-avatar-edit:hover .usr-avatar-cam{opacity:1}
.usr-avatar-cam{position:absolute;bottom:0;right:0;width:22px;height:22px;border-radius:50%;background:#3a3a42;display:flex;align-items:center;justify-content:center;font-size:10px;opacity:.7;transition:opacity .15s;border:2px solid var(--bg)}
.usr-toggle{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12px;color:var(--t2);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.02)}
.usr-toggle:last-child{border-bottom:none}
.usr-toggle input{accent-color:#dc2626}
.usr-tabs{display:flex;gap:4px;margin-bottom:14px}
.usr-tab{padding:7px 14px;font-size:12px;font-weight:500;color:var(--t3);background:transparent;border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:all .15s;font-family:var(--font)}
.usr-tab:hover{color:var(--t2)}
.usr-tab.active{color:var(--t1);background:rgba(255,255,255,.04);border-color:var(--brd2)}
.usr-tx-list{display:flex;flex-direction:column;gap:2px}
.usr-tx{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border-radius:var(--r);font-size:12px}
.usr-tx__type{font-weight:600;width:80px;flex-shrink:0;text-transform:capitalize}
.usr-tx__desc{flex:1;color:var(--t3);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usr-tx__amt{font-weight:600;flex-shrink:0}
.usr-tx__date{font-size:10px;color:var(--t3);flex-shrink:0;width:100px;text-align:right}

/* ═══════════════════════════════════════════════════════════════
   UPGRADER PAGE
   ═══════════════════════════════════════════════════════════════ */
#pg-upgrade{max-width:1100px;margin:0 auto}
.ug-top{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px;margin-bottom:20px;padding:10px 0}
@media(max-width:800px){.ug-top{grid-template-columns:1fr}}
.ug-panel{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:12px}
.ug-panel__title{font-size:13px;font-weight:700;color:var(--t1)}
.ug-price-row{display:flex;align-items:center;gap:0;border:1px solid var(--brd2);border-radius:var(--r);overflow:hidden}
.ug-price-prefix{padding:8px 12px;background:rgba(255,255,255,.04);font-size:14px;font-weight:700;color:var(--t2)}
.ug-price-input{flex:1;padding:8px 12px;background:transparent;border:none;color:var(--t1);font-size:16px;font-weight:700;outline:none;font-family:var(--font)}
.ug-price-max{padding:8px 12px;background:rgba(255,255,255,.04);font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;border-left:1px solid var(--brd)}
.ug-outcome-row{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--t2)}
.ug-slider{width:100%;accent-color:#dc2626;cursor:pointer}
.ug-presets{display:flex;gap:6px}
.ug-presets button{flex:1;padding:6px;font-size:11px;font-weight:600;color:var(--t3);background:var(--surface2);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:all .2s}
.ug-presets button:hover{color:var(--t1);border-color:var(--brd2)}
.ug-reset{padding:10px;font-size:12px;font-weight:600;color:var(--t3);background:var(--surface2);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;transition:all .2s}
.ug-reset:hover{color:var(--t1)}

/* Center: Pack Rip */
.ug-rip-area{display:flex;flex-direction:column;align-items:center;gap:16px}
.ug-rip-wrap{position:relative;width:260px;height:330px;display:flex;align-items:center;justify-content:center;perspective:700px}

/* Pack — two halves with jagged tear edge */
.ug-pack{position:relative;width:200px;height:270px;display:flex;transform-style:preserve-3d;animation:ugBob 4.5s ease-in-out infinite}
@keyframes ugBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(1.1deg)}}
.ug-rip-wrap.won .ug-pack,.ug-rip-wrap.lost .ug-pack{animation:none}
/* pulsing aura behind the pack */
.ug-pack__aura{position:absolute;left:50%;top:50%;width:240px;height:310px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(220,38,38,.18),transparent 65%);filter:blur(18px);animation:ugAuraPulse 3s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes ugAuraPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
.ug-rip-wrap.won .ug-pack__aura{background:radial-gradient(ellipse,rgba(251,191,36,.2),transparent 65%)}
.ug-rip-wrap.lost .ug-pack__aura{opacity:.12;animation:none}
/* charge-up squeeze before the rip */
.ug-rip-wrap.charging .ug-pack{animation:ugShake .07s ease-in-out infinite}
.ug-rip-wrap.charging .ug-pack__left{transform:translateX(1.5px) scaleX(.985)}
.ug-rip-wrap.charging .ug-pack__right{transform:translateX(-1.5px) scaleX(.985)}
/* blast: whole stage kicks on the winning rip */
.ug-rip-wrap.blast{animation:ugBlastShake .45s ease-out}
@keyframes ugBlastShake{0%{transform:translate(0)}20%{transform:translate(-8px,6px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}100%{transform:translate(0)}}
.ug-flash{position:absolute;inset:-50px;background:#fff;border-radius:24px;opacity:0;pointer-events:none;z-index:6}
.ug-rip-wrap.won .ug-flash{animation:ugFlashPop .55s ease-out}
@keyframes ugFlashPop{0%{opacity:0}12%{opacity:.85}100%{opacity:0}}
.ug-shockwave{position:absolute;left:50%;top:50%;width:22px;height:22px;border-radius:50%;border:3px solid rgba(251,191,36,.85);transform:translate(-50%,-50%) scale(0);opacity:0;z-index:5;pointer-events:none}
.ug-rip-wrap.won .ug-shockwave{animation:ugShockRing .7s ease-out}
@keyframes ugShockRing{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(-50%,-50%) scale(16);opacity:0}}
/* smoke puffs when the rip dies */
.ug-smoke{position:absolute;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,rgba(130,130,140,.5),transparent 70%);filter:blur(4px);z-index:4;pointer-events:none;animation:ugSmokeRise 1.4s ease-out forwards}
@keyframes ugSmokeRise{to{transform:translate(var(--sx,0),-75px) scale(2.4);opacity:0}}
/* AI pack art mode — activates when /img/upgrader-pack.png exists */
.ug-pack.has-art .ug-pack__face img,.ug-pack.has-art .ug-pack__face span,.ug-pack.has-art .ug-pack__face em{display:none}
.ug-pack.has-art .ug-pack__left{background:url('/img/upgrader-pack.png') left center/200% 100% no-repeat,linear-gradient(160deg,#1c1424,#120d1a)}
.ug-pack.has-art .ug-pack__right{background:url('/img/upgrader-pack.png') right center/200% 100% no-repeat,linear-gradient(160deg,#1c1424,#120d1a)}
.ug-pack.has-art .ug-pack__left::before,.ug-pack.has-art .ug-pack__right::before,.ug-pack.has-art .ug-pack__left::after,.ug-pack.has-art .ug-pack__right::after{display:none}
.ug-pack__left,.ug-pack__right{width:50%;height:100%;background:linear-gradient(160deg,#1c1424 0%,#241a30 45%,#120d1a 100%);border:1.5px solid rgba(220,38,38,.25);transition:transform 1s var(--ease-spring),opacity .8s,filter .5s;overflow:hidden;position:relative;z-index:2}
.ug-pack__left{border-radius:var(--r-lg) 0 0 var(--r-lg);border-right:none;transform-origin:left center}
.ug-pack__right{border-radius:0 var(--r-lg) var(--r-lg) 0;border-left:none;transform-origin:right center}
/* foil crimp bands top and bottom, like a sealed booster */
.ug-pack__left::before,.ug-pack__right::before{content:'';position:absolute;left:0;right:0;height:18px;top:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 2px,rgba(255,255,255,.03) 2px 5px);border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 0 0 0 transparent,0 252px 0 0 rgba(255,255,255,.001)}
.ug-pack__left::after,.ug-pack__right::after{content:'';position:absolute;left:0;right:0;height:18px;bottom:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,rgba(255,255,255,.02) 2px 5px);border-top:1px solid rgba(255,255,255,.08)}
/* branded face spans the whole pack; each half shows its slice */
.ug-pack__face{position:absolute;top:0;left:0;width:200%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.ug-pack__right .ug-pack__face{left:-100%}
.ug-pack__face img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(220,38,38,.5))}
.ug-pack__face span{font-size:24px;font-weight:900;letter-spacing:.14em;color:var(--t1);text-shadow:0 0 18px rgba(255,255,255,.2)}
.ug-pack__face em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.3em;color:var(--t3)}
/* holographic sheen sweeping across the sealed pack */
.ug-pack__face::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 45%,rgba(140,100,255,.10) 50%,rgba(255,255,255,.07) 55%,transparent 70%);background-size:250% 100%;animation:ugSheen 3.2s linear infinite}
@keyframes ugSheen{from{background-position:120% 0}to{background-position:-130% 0}}
/* the prize hiding inside, revealed through the widening tear */
.ug-pack__prize{position:absolute;left:50%;top:50%;width:72%;height:72%;object-fit:contain;transform:translate(-50%,-50%) scale(.82);z-index:1;opacity:0;filter:drop-shadow(0 0 24px rgba(255,255,255,.35));transition:opacity .6s,transform .8s var(--ease-spring)}
.ug-rip-wrap.tearing .ug-pack__prize{opacity:.95}
.ug-rip-wrap.won .ug-pack__prize{opacity:1;transform:translate(-50%,-58%) scale(1.28);filter:drop-shadow(0 0 14px rgba(251,191,36,.55)) drop-shadow(0 8px 26px rgba(0,0,0,.55));animation:ugPrizeFloat 2.6s ease-in-out .9s infinite}
@keyframes ugPrizeFloat{0%,100%{transform:translate(-50%,-58%) scale(1.28)}50%{transform:translate(-50%,-62%) scale(1.31)}}
.ug-rip-wrap.lost .ug-pack__prize{opacity:0}
/* light rays behind the reveal */
.ug-pack__rays{position:absolute;left:50%;top:50%;width:340px;height:340px;transform:translate(-50%,-50%);background:repeating-conic-gradient(rgba(251,191,36,.16) 0 9deg,transparent 9deg 22deg);border-radius:50%;opacity:0;z-index:0;transition:opacity .7s;filter:blur(1.5px);pointer-events:none}
.ug-rip-wrap.won .ug-pack__rays{animation:ugRaysBurst 2.4s ease-out forwards}
@keyframes ugRaysBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(0)}15%{opacity:.8}100%{opacity:.1;transform:translate(-50%,-50%) scale(1.15) rotate(45deg)}}
/* spark particles thrown from the tear tip */
.ug-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8),0 0 12px rgba(251,191,36,.6);z-index:4;pointer-events:none;animation:ugSparkFly .65s ease-out forwards}
@keyframes ugSparkFly{to{transform:translate(var(--sx),var(--sy)) scale(.2);opacity:0}}
/* Pack texture */
/* Jagged tear edge — SVG clip on inner edges */
.ug-pack__left{clip-path:polygon(0 0,100% 0,100% 5%,96% 8%,100% 12%,97% 16%,100% 20%,95% 25%,100% 30%,97% 34%,100% 38%,96% 42%,100% 46%,97% 50%,100% 54%,95% 58%,100% 62%,97% 66%,100% 70%,96% 74%,100% 78%,97% 82%,100% 86%,95% 90%,100% 95%,100% 100%,0 100%)}
.ug-pack__right{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 95%,5% 90%,0 86%,3% 82%,0 78%,4% 74%,0 70%,3% 66%,0 62%,5% 58%,0 54%,3% 50%,0 46%,4% 42%,0 38%,3% 34%,0 30%,5% 25%,0 20%,3% 16%,0 12%,4% 8%,0 5%)}
/* Center crack glow */
.ug-pack__tear{position:absolute;left:50%;top:10%;width:0;height:0;background:transparent;transform:translateX(-50%);z-index:2;transition:height 3s var(--ease),width 1s,box-shadow 2s,background .5s;border-radius:2px}
.ug-pack__glow{position:absolute;left:50%;top:50%;width:0;height:0;background:rgba(255,255,255,.2);transform:translate(-50%,-50%);filter:blur(25px);z-index:1;transition:height 3s var(--ease),width 2s,opacity 1s;pointer-events:none}

/* Tearing state — the shake lives on the pack CONTAINER so the halves' inline
   separation transforms are not overridden by the animation */
.ug-rip-wrap.tearing .ug-pack{animation:ugShake .1s ease-in-out infinite}
.ug-rip-wrap.tearing .ug-pack__tear{width:3px;background:rgba(255,255,255,.8)}
@keyframes ugShake{0%,100%{transform:translate(0)}25%{transform:translate(calc(var(--amp,1px)*-1),calc(var(--amp,1px)*.5)) rotate(-.25deg)}75%{transform:translate(var(--amp,1px),calc(var(--amp,1px)*-.5)) rotate(.25deg)}}

/* Won — halves fly apart in 3D, prize pops through the light */
.ug-rip-wrap.won .ug-pack__left{transform:translateX(-72px) rotateY(42deg) rotate(-13deg);opacity:.16;transition:transform .7s var(--ease-spring),opacity .9s}
.ug-rip-wrap.won .ug-pack__right{transform:translateX(72px) rotateY(-42deg) rotate(13deg);opacity:.16;transition:transform .7s var(--ease-spring),opacity .9s}
.ug-rip-wrap.won .ug-pack__tear{animation:ugTearSettle 1.8s ease-out forwards}
@keyframes ugTearSettle{0%{height:84%;width:7px;background:rgba(255,255,255,.95);box-shadow:0 0 26px rgba(255,255,255,.65),0 0 70px rgba(251,191,36,.4)}100%{height:84%;width:2px;background:rgba(255,255,255,.3);box-shadow:0 0 10px rgba(255,255,255,.15)}}
.ug-rip-wrap.won .ug-pack__glow{animation:ugGlowSettle 2s ease-out forwards}
@keyframes ugGlowSettle{0%{height:135%;width:130px;opacity:.95}100%{height:105%;width:60px;opacity:.25}}

/* Lost — the rip dies out, pack sags and grays */
.ug-rip-wrap.lost .ug-pack__left{transform:translateX(-1px) translateY(5px) rotate(-1.2deg);transition:transform .6s ease,filter .6s}
.ug-rip-wrap.lost .ug-pack__right{transform:translateX(1px) translateY(5px) rotate(1.2deg);transition:transform .6s ease,filter .6s}
.ug-rip-wrap.lost .ug-pack__left,.ug-rip-wrap.lost .ug-pack__right{filter:brightness(.35) grayscale(.7)}
.ug-rip-wrap.lost .ug-pack__tear{background:rgba(255,255,255,.15)!important;box-shadow:none!important}
.ug-rip-wrap.lost .ug-pack__glow{opacity:0!important}
.ug-rip-wrap.lost .ug-pack__face::after{animation:none}

.ug-wheel-actions{display:flex;gap:10px}

/* Selected item */
.ug-selected{align-items:center;justify-content:center;text-align:center;min-height:180px}
.ug-sel-empty{font-size:13px;color:var(--t3);font-weight:600}
.ug-sel-item{display:flex;flex-direction:column;align-items:center;gap:8px}
#ugSelImg{width:80px;height:80px;object-fit:contain}
.ug-sel-name{font-size:13px;font-weight:700;color:var(--t1)}
.ug-sel-row{display:flex;gap:16px;font-size:14px;font-weight:700}
.ug-sel-price{color:var(--t2)}
.ug-sel-mult{color:#22c55e}

/* Filters */
.ug-filters{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:14px;padding:12px 16px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg)}
@media(max-width:800px){.ug-filters{flex-wrap:wrap}}
.ug-search{width:180px;padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid var(--brd2);border-radius:var(--r);color:var(--t1);font-size:13px;font-family:var(--font);outline:none}
.ug-search::placeholder{color:var(--t3)}
.ug-minmax{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:var(--t3);font-family:var(--font)}
.ug-mm-input{width:80px;padding:8px 10px;background:var(--surface);border:1px solid var(--brd2);border-radius:var(--r);color:var(--t1);font-size:13px;font-family:var(--font);outline:none;text-align:center}
.ug-mm-btn{padding:6px 10px;font-size:11px;font-weight:600;color:var(--t3);background:var(--surface2);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;font-family:var(--font)}
.ug-mm-btn:hover{color:var(--t1)}

/* Dual-handle price-range filter */
.ug-range{display:flex;flex-direction:column;gap:6px;min-width:220px;flex:1;max-width:340px}
.ug-range__labels{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--t2);font-family:var(--font)}
.ug-range__sep{color:var(--t3);font-weight:500}
.ug-range__track{position:relative;height:24px;display:flex;align-items:center}
.ug-range__track::before{content:'';position:absolute;left:0;right:0;height:4px;background:var(--surface2);border-radius:2px}
.ug-range__fill{position:absolute;height:4px;background:linear-gradient(90deg,#dc2626,#8b5cf6);border-radius:2px}
.ug-range__input{position:absolute;left:0;right:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:24px}
.ug-range__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #dc2626;box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:pointer;pointer-events:auto}
.ug-range__input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #dc2626;box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:pointer;pointer-events:auto}

/* Count + pagination */
.ug-count{font-size:12px;color:var(--t3);margin-bottom:10px;font-weight:600}
.ug-pagination{display:flex;gap:8px;justify-content:center;margin-top:16px}
.ug-pagination button{padding:6px 14px;font-size:12px;font-weight:600;border-radius:var(--r);cursor:pointer;transition:all .2s}
.ug-pg-prev,.ug-pg-next{color:var(--t2);background:var(--surface);border:1px solid var(--brd)}
.ug-pg-next{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:none}
.ug-pg-prev:hover,.ug-pg-next:hover{filter:brightness(1.1)}

/* Item grid */
.ug-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ug-item{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all .2s;text-align:center;position:relative;overflow:hidden}
.ug-item::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--rc,var(--brd));border-radius:var(--r-lg) var(--r-lg) 0 0}
.ug-item:hover{border-color:var(--glass-border-hover);transform:translateY(-2px)}
.ug-item.selected{border-color:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.2)}
.ug-item__img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.ug-item__name{font-size:11px;font-weight:600;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ug-item__price{font-size:14px;font-weight:800;color:var(--t1)}

/* Win popup */
.ug-win-overlay{position:fixed;inset:0;z-index:500;background:rgba(24,23,31,.85);display:flex;align-items:center;justify-content:center}
.ug-win-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-xl);padding:32px;text-align:center;animation:pop .4s var(--ease-spring);max-width:340px}
.ug-win-card h3{font-size:20px;font-weight:900;color:#22c55e;margin-bottom:12px}
.ug-win-card img{width:150px;height:150px;object-fit:contain;margin:0 auto 10px;filter:drop-shadow(0 0 20px rgba(251,191,36,.35))}
.ug-win-card__name{font-size:15px;font-weight:700;color:var(--t1);display:block;margin-bottom:4px}
.ug-win-card__val{font-size:22px;font-weight:900;color:var(--gold);display:block;margin-bottom:16px}
.ug-win-actions{display:flex;gap:10px;justify-content:center}

/* ═══════════════════════════════════════════════════════════════
   PROVABLY FAIR PAGE
   ═══════════════════════════════════════════════════════════════ */
.pf-page{max-width:700px;margin:0 auto;padding:20px 10px}
.pf-title{font-size:24px;font-weight:900;margin-bottom:6px}
.pf-desc{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:24px;max-width:600px}
.pf-grid{display:flex;flex-direction:column;gap:20px}
.pf-section{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:24px;overflow:hidden}
.pf-section h3{font-size:15px;font-weight:700;margin-bottom:14px}
.pf-sub{font-size:12px;color:var(--t3);line-height:1.6;margin-bottom:14px}

/* Steps */
.pf-steps{display:flex;flex-direction:column;gap:22px;padding-top:4px}
.pf-step{display:flex;gap:16px;align-items:flex-start}
.pf-step__num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.pf-step h4{font-size:13px;font-weight:700;margin-bottom:3px}
.pf-step p{font-size:12px;color:var(--t3);line-height:1.5}

/* Inputs */
.pf-input-row{display:flex;gap:8px;margin-bottom:10px}
.pf-input{flex:1;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid var(--brd2);border-radius:var(--r);color:var(--t1);font-size:13px;font-family:monospace;outline:none}
.pf-input:focus{border-color:rgba(220,38,38,.3)}
.pf-btn{padding:10px 18px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c);border-radius:var(--r);cursor:pointer;transition:all .2s;flex-shrink:0}
.pf-btn:hover{filter:brightness(1.15)}
.pf-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t3);cursor:pointer}

/* Fields */
.pf-field{margin-bottom:12px}
.pf-label{display:block;font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.pf-hash{padding:10px 14px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r);font-size:12px;font-family:monospace;color:var(--t2);word-break:break-all;user-select:all}
.pf-hash--reveal{color:var(--gold)}

/* Verify */
.pf-verify-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:700px){.pf-verify-grid{grid-template-columns:1fr}}
.pf-verify-result{margin-top:14px;padding:14px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r);font-family:monospace;font-size:12px;color:var(--t2);word-break:break-all}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.ftr{margin-top:64px;border-top:1px solid var(--brd);padding:32px 24px 20px;background:var(--bg);transition:margin-left .3s var(--ease)}
@media(min-width:1101px){.ftr{margin-left:260px;margin-right:240px}}
.chat-collapsed .ftr{margin-left:40px}
.ftr-inner{display:flex;flex-wrap:wrap;gap:32px}
.ftr-brand{max-width:280px}
.ftr-brand p{margin-top:10px;font-size:13px;color:var(--t3);line-height:1.6}
.ftr-cols{display:flex;gap:40px;flex-wrap:wrap}
.ftr-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:10px}
.ftr-col a{display:block;font-size:13px;color:var(--t3);padding:3px 0;transition:color .25s}
.ftr-col a:hover{color:var(--gold)}
.ftr-bottom{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.04)}
.ftr-bottom span{font-size:11px;color:rgba(255,255,255,.15)}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes sweep{0%{left:-100%}60%,100%{left:150%}}
@keyframes btnSheen{0%{left:-100%}100%{left:150%}}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:none}}
@keyframes flash{from{opacity:.3}to{opacity:0}}
@keyframes cardIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes particleDrift{0%,100%{transform:translateY(0) scale(1);opacity:.4}50%{transform:translateY(-10px) scale(1.4);opacity:.9}}
@keyframes ripParticle{0%{opacity:0;transform:translate(0,0) scale(1)}30%{opacity:1}100%{opacity:0;transform:translate(var(--rpx),var(--rpy)) scale(0)}}
@keyframes tearL{to{transform:translateX(-80px) rotate(-15deg);opacity:0}}
@keyframes tearR{to{transform:translateX(80px) rotate(15deg);opacity:0}}
@keyframes ripSplashL{0%{transform:none}30%{transform:translateX(-3px) rotate(-1deg)}100%{transform:translateX(-100px) rotate(-18deg);opacity:0}}
@keyframes ripSplashR{0%{transform:none}30%{transform:translateX(3px) rotate(1deg)}100%{transform:translateX(100px) rotate(18deg);opacity:0}}
@keyframes burst{0%{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(40)}}
@keyframes particle{0%{opacity:0;transform:translate(0,0) scale(1)}30%{opacity:1}100%{opacity:0;transform:translate(var(--px,60px),var(--py,-70px)) scale(0)}}
@keyframes splashTitle{to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes splashOut{to{opacity:0;pointer-events:none}}
@keyframes confettiFall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--cx,0),var(--cy,300px)) rotate(720deg)}}
@keyframes chatMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:640px){
  .bs-arena{grid-template-columns:1fr!important;gap:8px}
  .hdr-inner{gap:4px;padding:0 12px}
  .logo-t{font-size:17px}
  .hdr-tab{padding:8px 10px;font-size:11px}
  .hdr-nav{margin-left:8px}
  .hdr-bal{padding:8px 10px;font-size:12px}
  .hdr-deposit{padding:8px 10px}
  .hdr-user__name{display:none}
  .promos{grid-template-columns:1fr}
  .games-grid{grid-template-columns:1fr}
  .bb-pk{width:56px;height:66px}
  .bb-left{min-width:56px;padding:10px 4px}
  .bb-rounds{font-size:15px;width:34px;height:34px}
  .bb-right{min-width:104px;padding:10px 8px}
  .bb-price{font-size:15px}
}


/* footer social */
.ftr-social{display:flex;gap:10px;margin-top:14px}
.ftr-social a{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--t3);border:1px solid var(--brd);border-radius:8px;padding:6px 11px;transition:color .25s,border-color .25s,background .25s}
.ftr-social a:hover{color:var(--gold);border-color:var(--gold);background:rgba(255,255,255,.03)}
.ftr-social svg{flex:none}

/* ── Payments (deposit / withdraw) ─────────────────────────────────────── */
.hdr-withdraw{padding:8px 14px;font-size:11px;font-weight:600;color:var(--t2);background:rgba(255,255,255,.04);border-left:1px solid var(--brd);cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.hdr-withdraw:hover{color:var(--t1);background:rgba(255,255,255,.08)}
.dep-grid--compact{grid-template-columns:repeat(4,1fr);margin-bottom:0}
.dep-option.selected{border-color:#fbbf24;background:rgba(251,191,36,.08)}
.dep-option.disabled{opacity:.35;cursor:not-allowed}
.dep-option__badge{font-size:9px;color:var(--t3);margin-top:2px}
.pay-loading{grid-column:1/-1;padding:20px;text-align:center;font-size:12px;color:var(--t3)}
.pay-amt-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r)}
.pay-amt-row:focus-within{border-color:rgba(251,191,36,.5)}
.pay-amt-prefix{font-size:16px;font-weight:700;color:var(--t2)}
.pay-amt-row input{flex:1;background:none;border:none;color:var(--t1);font-size:18px;font-weight:700;font-family:var(--font);outline:none;min-width:0}
.pay-amt-row input::-webkit-outer-spin-button,.pay-amt-row input::-webkit-inner-spin-button{-webkit-appearance:none}
.pay-amt-crypto{font-size:11px;color:var(--t3);font-family:monospace;white-space:nowrap}
.pay-max{padding:4px 10px;font-size:10px;font-weight:600;color:var(--t2);background:rgba(255,255,255,.06);border:1px solid var(--brd);border-radius:4px;cursor:pointer;font-family:var(--font);text-transform:uppercase}
.pay-presets{display:flex;gap:6px;margin-top:8px}
.pay-presets button{flex:1;padding:6px;font-size:11px;font-weight:600;color:var(--t2);background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r);cursor:pointer;font-family:var(--font)}
.pay-presets button:hover{color:var(--t1);border-color:rgba(255,255,255,.15)}
.pay-submit{width:100%;padding:12px;font-size:13px;margin-top:4px}
.pay-submit:disabled{opacity:.5;cursor:wait}
.pay-error{color:#ef4444;font-size:12px;min-height:16px;margin:6px 0}
.pay-hint{font-size:10px;color:var(--t3);font-weight:400;margin-top:4px}
.pay-quote{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--t3);padding:8px 12px;background:rgba(255,255,255,.02);border:1px solid var(--brd);border-radius:var(--r);margin-bottom:8px;flex-wrap:wrap}
.pay-quote b{color:var(--t1)}
.dep-val--hi{color:var(--t1)!important;font-family:monospace;font-weight:700}
.pay-status{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r);font-size:12px;margin-bottom:12px;background:rgba(255,255,255,.03);border:1px solid var(--brd)}
.pay-status:empty{display:none}
.pay-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pay-badge--pending{background:rgba(234,179,8,.15);color:#eab308}
.pay-badge--submitted,.pay-badge--confirming,.pay-badge--approved{background:rgba(59,130,246,.15);color:#3b82f6}
.pay-badge--credited,.pay-badge--paid{background:rgba(34,197,94,.15);color:#22c55e}
.pay-badge--rejected,.pay-badge--expired,.pay-badge--cancelled{background:rgba(239,68,68,.15);color:#ef4444}
.pay-history{margin-top:16px}
.pay-history:empty{display:none}
.pay-history h4{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.pay-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.02);border:1px solid var(--brd);border-radius:var(--r);font-size:12px;margin-bottom:4px}
.pay-row__main{flex:1;min-width:0}
.pay-row__title{color:var(--t1);font-weight:600}
.pay-row__sub{color:var(--t3);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:monospace}
.pay-row__amt{font-weight:700;color:var(--t1);white-space:nowrap}
.pay-row__act{padding:4px 8px;font-size:10px;font-weight:600;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:4px;cursor:pointer;font-family:var(--font)}
.pay-row__act:hover{color:var(--t1)}
.pay-row--clickable{cursor:pointer}
.pay-row--clickable:hover{border-color:rgba(255,255,255,.15)}
.usr-tx--pay{flex-wrap:wrap}
.usr-tx__hash{font-family:monospace;font-size:10px;color:var(--t3);width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.hdr-withdraw{display:none}}

/* ── Password forms ──────────────────────────────────────────────────── */
.pw-form{display:flex;flex-direction:column;gap:8px;max-width:360px}
.pw-form input{padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r);color:var(--t1);font-size:13px;font-family:var(--font);outline:none}
.pw-form input:focus{border-color:rgba(251,191,36,.5)}
.pay-error.ok{color:#22c55e}

/* ── Deposit funnel v2 ──────────────────────────────────────────────── */
.dep-steps{display:flex;gap:6px;margin-bottom:16px}
.dep-steps span{flex:1;text-align:center;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:6px 0;border-bottom:2px solid var(--brd)}
.dep-steps span.on{color:#fbbf24;border-bottom-color:#fbbf24}
.dep-steps span.done{color:var(--t2);border-bottom-color:rgba(255,255,255,.25)}
.dep-view.hidden{display:none}
.dep-sub{font-size:13px;color:var(--t2);margin-bottom:12px}
.dep-sub b{color:var(--t1)}
.dep-assets{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.dep-asset{display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r-lg);cursor:pointer;transition:all .15s;position:relative}
.dep-asset:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.dep-asset.disabled{opacity:.35;cursor:not-allowed}
.dep-asset__icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;flex-shrink:0}
.dep-asset__name{font-size:14px;font-weight:700;color:var(--t1)}
.dep-asset__sub{font-size:11px;color:var(--t3);margin-top:2px}
.dep-rec{position:absolute;top:-8px;right:10px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#060709;background:#fbbf24;padding:2px 7px;border-radius:999px}
.dep-networks{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.dep-net{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:var(--r-lg);cursor:pointer;transition:all .15s;position:relative}
.dep-net:hover{border-color:rgba(255,255,255,.2)}
.dep-net.disabled{opacity:.35;cursor:not-allowed}
.dep-net__icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.dep-net__name{font-size:13px;font-weight:700;color:var(--t1)}
.dep-net__hint{font-size:11px;color:var(--t3);margin-top:2px}
.dep-net__arrow{margin-left:auto;color:var(--t3)}
.dep-send{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px}
.dep-qr{width:132px;height:132px;flex-shrink:0;background:#fff;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.dep-qr img,.dep-qr canvas{width:120px!important;height:120px!important}
.dep-send__main{flex:1;min-width:0}
.dep-warn{font-size:12px;color:#fbbf24;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);border-radius:var(--r);padding:8px 10px;margin-bottom:10px}
.dep-warn b{color:#fde68a}
.dep-facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--t3)}
.dep-facts b{color:var(--t2);font-weight:600}
.dep-how{margin:12px 0 0 0;padding-left:18px;font-size:12px;color:var(--t3);line-height:1.7}
.dep-how li b{color:var(--t2)}
@media(max-width:480px){.dep-send{flex-direction:column;align-items:center}.dep-assets{grid-template-columns:1fr}}
.dep-addr-box--wrap input{font-size:12.5px;letter-spacing:.01em}
.dep-send__main .dep-facts{flex-direction:column;gap:6px}
.dep-assets{grid-template-columns:repeat(3,1fr)}
.dep-option.dep-asset{padding:12px 14px}
.dep-option.dep-asset .dep-rec{top:-7px;right:8px}
@media(max-width:480px){.dep-assets{grid-template-columns:repeat(2,1fr)}}

/* ── Coin / chain logos ────────────────────────────────────────────── */
.dep-net__logo{width:30px;height:30px;border-radius:50%;flex-shrink:0}
.dep-logo-stack{position:relative;width:30px;height:30px;flex-shrink:0}
.dep-logo-stack .dep-option__logo{width:30px;height:30px}
.dep-logo-stack__chain{position:absolute;right:-5px;bottom:-4px;width:15px;height:15px;border-radius:50%;border:2px solid #18171f;background:#18171f}
.dep-title__logo{width:22px;height:22px;border-radius:50%;vertical-align:-5px;margin-right:6px}
.dep-grid--compact{grid-template-columns:repeat(3,1fr)}
.dep-grid--compact .dep-option{padding:10px 12px}