/* ═══════════════════════════════════════════════════════════════
   UNBOX — Premium Dark UI (EmpireDrop-level polish)
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* Core palette — dark with purple undertone */
  --bg:#080710;
  --bg2:#0a0913;
  --surface:rgba(18,16,26,.85);
  --surface2:rgba(28,25,40,.8);
  --surface3:rgba(38,34,52,.75);
  --glass:rgba(18,16,26,.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:rgba(8,7,16,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--brd)}
.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;flex-shrink:0}
.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}
.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:rgba(11,10,16,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-right:1px solid var(--brd);z-index:95;transition:transform .3s var(--ease),width .3s var(--ease)}
.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}}

/* 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;border:1.5px solid rgba(255,255,255,.1);overflow:hidden}
.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__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:240px;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:rgba(11,10,16,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);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:240px}}

.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
   ═══════════════════════════════════════════════════════════════ */
.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:20px 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:200px;height:auto;max-height:180px;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-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:10px;margin-top:14px}
@media(min-width:520px){.pd-items{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.pd-items{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1200px){.pd-items{grid-template-columns:repeat(8,1fr)}}

.pd-item{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;transition:all .2s var(--ease)}
.pd-item:hover{transform:translateY(-2px);border-color:var(--glass-border-hover)}
.pd-item::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--rr),0.06),transparent 50%);pointer-events:none;border-radius:var(--r-lg)}
.pd-item__bar{position:absolute;top:8px;left:8px;width:16px;height:5px;border-radius:3px}
.pd-item__odds{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;color:var(--t3)}
.pd-item__icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:rgba(255,255,255,.6);margin:6px 0 4px}
.pd-item__name{font-size:11px;font-weight:600;color:var(--t1);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.pd-item__val{font-size:12px;font-weight:700;color:var(--gold)}

/* ═══════════════════════════════════════════════════════════════
   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(3,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}

.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:var(--surface2);border:1px solid var(--glass-border);overflow:hidden;cursor:grab}
.pack-slot--filled:active{cursor:grabbing}
.pack-slot--filled img{width:55%;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:820px;width:calc(100vw - 60px);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.picker-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--brd);flex-shrink:0}
.picker-header__left{display:flex;gap:18px}
.picker-stat{font-size:13px;color:var(--t2);display:flex;align-items:center;gap:5px}
.picker-stat b{color:var(--t1)}
.picker-filters{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--brd);flex-shrink:0;flex-wrap:wrap}
.picker-filters .sel{text-align:left;padding-right:28px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6B78' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.picker-search{flex:1;min-width:150px;padding:10px 14px;background:var(--surface2);border:1px solid var(--brd2);border-radius:var(--r);color:var(--t1);font-size:13px;outline:none;transition:border-color .2s}
.picker-search::placeholder{color:var(--t3)}
.picker-search:focus{border-color:var(--purple)}

.picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px;overflow-y:auto;overflow-x:hidden;flex:1;scrollbar-width:none;-ms-overflow-style:none}
.picker-grid::-webkit-scrollbar{display:none}
@media(min-width:520px){.picker-grid{grid-template-columns:repeat(3,1fr)}}

.picker-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all .25s var(--ease);position:relative}
.picker-card:hover{border-color:var(--glass-border-hover);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.picker-card__img{width:80px;height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.picker-card__img img{max-width:100%;max-height:100%;object-fit:contain}
.picker-card__letter{font-size:1.5rem;font-weight:900;color:rgba(255,255,255,.4)}
.picker-card__name{font-size:13px;font-weight:600;color:var(--t1);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.picker-card__price{font-size:14px;font-weight:700;color:var(--gold)}
.picker-card__rarity{width:100%;height:4px;border-radius:2px;background:var(--surface2);overflow:hidden;display:flex}
.picker-card__rarity span{height:100%}
.picker-card__eye{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;opacity:0;transition:opacity .2s;z-index:2}
.picker-card:hover .picker-card__eye{opacity:1}
.picker-card__eye:hover{color:var(--t1)}

.picker-card__add{width:100%;padding:8px;font-size:12px;font-weight:700;color:#fff;background:linear-gradient(135deg,#dc2626,#b91c1c);border-radius:var(--r);text-align:center;margin-top:2px;transition:all .2s;text-transform:uppercase;letter-spacing:.03em}
.picker-card__add:hover{filter:brightness(1.1);box-shadow:0 4px 12px rgba(220,38,38,.2)}

/* +/- Stepper */
.pk-stepper{display:flex;align-items:center;width:100%;margin-top:2px;border-radius:var(--r);overflow:hidden;border:1px solid var(--glass-border)}
.pk-step-btn{flex:1;padding:8px 0;font-size:16px;font-weight:700;color:var(--t1);background:var(--surface2);text-align:center;transition:background .15s}
.pk-step-btn:hover{background:var(--surface3)}
.pk-step-count{padding:8px 14px;font-size:14px;font-weight:700;color:var(--t1);background:var(--surface);text-align:center;min-width:36px;border-left:1px solid var(--glass-border);border-right:1px solid var(--glass-border)}

/* ═══════════════════════════════════════════════════════════════
   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:200px;padding:10px 14px;gap:4px}
#homeBattles .bb-left .bb-rounds{font-size:11px;padding:2px 8px}
#homeBattles .bb-left .bb-av{width:26px;height:26px;font-size:10px}
#homeBattles .bb-right{width:140px;padding:10px 14px;gap:4px}
#homeBattles .bb-right .bb-price{font-size:16px}
#homeBattles .bb-packs .bb-pk{width:36px;height:46px}

.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)}
.bb-card:hover{border-color:var(--glass-border-hover)}

/* Left section: rounds + players + mode */
.bb-left{flex-shrink:0;width:220px;padding:12px 14px;background:rgba(255,255,255,.015);border-right:1px solid var(--brd);display:flex;flex-direction:column;align-items:center;gap:4px}
.bb-rounds{font-size:12px;font-weight:600;color:var(--t2);background:var(--surface2);padding:3px 12px;border-radius:var(--r);display:inline-block}
.bb-rounds::first-letter{color:var(--t1)}
.bb-avatars{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;justify-content:center}
.bb-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;border:1.5px solid rgba(255,255,255,.1);overflow:hidden;flex-shrink:0}
.bb-av img{width:100%;height:100%;object-fit:cover}
.bb-sep{flex-shrink:0}
.bb-sep{font-size:12px;color:var(--t3);margin:0 2px;font-weight:700}
.bb-mode{font-size:12px;font-weight:800;letter-spacing:.06em}

/* Center: pack thumbnails */
.bb-packs{display:flex;gap:6px;flex:1;padding:12px 16px;align-items:center;overflow-x:auto;scrollbar-width:none}
.bb-packs::-webkit-scrollbar{display:none}
.bb-pk{flex-shrink:0;width:48px;height:60px;border-radius:var(--r);overflow:hidden;position:relative;opacity:.6;transition:all .2s}
.bb-pk img{width:100%;height:100%;object-fit:cover}
.bb-pk--current{opacity:1;transform:scale(1.1);border:2px solid rgba(0,206,209,.4);box-shadow:0 0 8px rgba(0,206,209,.2)}
.bb-pk-arrow{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--cyan)}

/* Right: price + view button */
.bb-right{flex-shrink:0;width:180px;padding:16px 20px;display:flex;flex-direction:column;align-items:center;gap:6px}
.bb-price{font-size:20px;font-weight:800;color:var(--t1)}
.bb-price-label{font-size:11px;color:var(--t3)}
.bb-view{padding:5px 12px;font-size:11px;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;display:inline-flex;align-items:center;gap:4px}
.bb-view:hover{border-color:var(--glass-border-hover);background:var(--surface3)}

@media(max-width:900px){.bb-left{width:auto;min-width:160px}.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;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.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-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:90;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:36px;height:46px;border-radius:var(--r);background:var(--surface2);border:2px solid var(--brd);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:hidden}
.bs-ps img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) - 2px)}
.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{border-color:var(--gold);transform:scale(1.1);box-shadow:0 0 10px rgba(220,38,38,.2);z-index:2}
.bs-ps.done{opacity:.3;border-color:var(--green)}
.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:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r);background:rgba(220,38,38,.1);color:#ef4444}
.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)}

/* Countdown overlay */
.bs-countdown{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(8,7,16,.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(8,7,16,.7) 0%,transparent 20%,transparent 80%,rgba(8,7,16,.7) 100%)}
/* 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}

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

/* Wrap controls spacing, inner card gets tilt */
.vscroll-item-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.vscroll-item{width:90px;height:80px;border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;background:rgba(30,28,40,.65);border:1px solid rgba(var(--rgb,255,255,255),.12);box-shadow:0 4px 16px rgba(0,0,0,.3),0 0 22px rgba(var(--rgb,255,255,255),.2),0 0 6px rgba(var(--rgb,255,255,255),.1),inset 0 0 16px rgba(var(--rgb,255,255,255),.06)}
.vscroll-item__img{width:50px;height:50px;object-fit:contain}
.vscroll-item__price{font-size:14px;font-weight:800;color:var(--t1);margin-top:2px}
.vscroll-item__price.hidden{display:none}
/* Rarity glow border-top */
.vscroll-item::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--rc,rgba(255,255,255,.1));border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:0 0 8px var(--rc,transparent)}
/* Winning item — slightly stronger glow */
.vscroll-item.won{box-shadow:0 0 18px rgba(var(--rgb,255,255,255),.18);border-color:rgba(var(--rgb,255,255,255),.15)}

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

/* Battle columns */
.bs-col .vscroll-item{width:80px;height:70px}
.bs-col .vscroll-item__img{width:40px;height:40px}
.bs-col .vscroll-item__price{font-size:12px}
.bs-col .vscroll-item-wrap{}

/* 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;border:2px solid rgba(255,255,255,.1);flex-shrink:0;overflow:hidden;transition:border-color .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__total{font-size:12px;font-weight:800;color:var(--gold);display:block;transition:all .3s}
.bs-p.winner .bs-p__av{border-color:#22c55e;box-shadow: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:4px;padding:4px;min-width:0}
.bs-card-col__round{display:none}

/* Loot tile — PackDraw style card with odds, icon, name, price */
.bs-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;background:rgba(30,28,40,.6);border-radius:var(--r);animation:cardIn .2s var(--ease-spring);text-align:center;justify-content:center}
.bs-card__odds{font-size:8px;font-weight:600;color:var(--t3)}
.bs-card__icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:rgba(255,255,255,.6)}
.bs-card__name{font-size:8px;font-weight:600;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:95%}
.bs-card__val{font-size:11px;font-weight:800;color:var(--t1)}

@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(8,7,16,.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}

.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:10px}
@media(min-width:520px){.c-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.c-grid{grid-template-columns:repeat(4,1fr)}}
.c-item{position:relative;background:var(--surface2);border-radius:var(--r-lg);padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:5px;overflow:hidden;border:1px solid var(--brd);transition:all .25s var(--ease)}
.c-item:hover{transform:translateY(-2px);border-color:var(--brd2)}
.c-item::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--rr),0.06),transparent 50%);pointer-events:none;border-radius:var(--r-lg)}
.c-item__bar{position:absolute;top:10px;left:10px;width:20px;height:6px;border-radius:3px}
.c-item__odds{position:absolute;top:10px;right:10px;font-size:11px;font-weight:700;color:var(--t3)}
.c-item__icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:rgba(255,255,255,.7);margin:10px 0 6px;position:relative}
.c-item__icon::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid rgba(var(--rr),.15)}
.c-item__name{font-size:12px;font-weight:600;color:var(--t1);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.c-item__type{font-size:10px;font-weight:500;color:var(--t3)}
.c-item__val{font-size:14px;font-weight:700;color:var(--gold);margin-top:2px}

/* ═══════════════════════════════════════════════════════════════
   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:180px;height:240px;display:flex;align-items:center;justify-content:center}

/* Pack — two halves with jagged tear edge */
.ug-pack{position:relative;width:140px;height:190px;display:flex}
.ug-pack__left,.ug-pack__right{width:50%;height:100%;background:linear-gradient(145deg,#2a1f3d,#1a1528);border:1.5px solid rgba(140,100,255,.15);transition:transform 1s var(--ease-spring),opacity .8s;overflow:hidden;position:relative}
.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}
/* Pack texture */
.ug-pack__left::after,.ug-pack__right::after{content:'';position:absolute;inset:0;background:radial-gradient(circle 1.5px,rgba(140,100,255,.06) 1px,transparent 1px);background-size:8px 8px;pointer-events:none}
/* 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 */
.ug-rip-wrap.tearing .ug-pack__left,.ug-rip-wrap.tearing .ug-pack__right{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(-1px,.5px) rotate(-.2deg)}75%{transform:translate(1px,-.5px) rotate(.2deg)}}
.ug-rip-wrap.tearing .ug-pack__left{transform:translateX(-2px)}
.ug-rip-wrap.tearing .ug-pack__right{transform:translateX(2px)}

/* Won — halves rip fully apart */
.ug-rip-wrap.won .ug-pack__left{transform:translateX(-28px) rotate(-12deg);opacity:.3;transition:transform .6s var(--ease-spring),opacity .8s}
.ug-rip-wrap.won .ug-pack__right{transform:translateX(28px) rotate(12deg);opacity:.3;transition:transform .6s var(--ease-spring),opacity .8s}
.ug-rip-wrap.won .ug-pack__tear{height:80%!important;width:5px;background:rgba(255,255,255,.9);box-shadow:0 0 20px rgba(255,255,255,.5),0 0 50px rgba(255,255,255,.2)!important}
.ug-rip-wrap.won .ug-pack__glow{height:120%!important;width:100px;opacity:1!important}

/* Lost — halves close back, darken */
.ug-rip-wrap.lost .ug-pack__left{transform:translateX(0);transition:transform .5s,filter .5s}
.ug-rip-wrap.lost .ug-pack__right{transform:translateX(0);transition:transform .5s,filter .5s}
.ug-rip-wrap.lost .ug-pack__left,.ug-rip-wrap.lost .ug-pack__right{filter:brightness(.4) grayscale(.6)}
.ug-rip-wrap.lost .ug-pack__tear{background:rgba(255,255,255,.2)!important;box-shadow:none!important}
.ug-rip-wrap.lost .ug-pack__glow{opacity:0!important}

.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)}

/* 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:60px;height:60px;object-fit:contain}
.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(8,7,16,.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:80px;height:80px;object-fit:contain;margin:0 auto 10px}
.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}
  .promos{grid-template-columns:1fr}
  .games-grid{grid-template-columns:1fr}
}