/* ============================================================
   CS-SOL — PREMIUM MINIMAL UI LAYER
   Loaded after menu.css / intro.css. Presentation only; every element id unchanged.
   Tokens: soft dark surfaces, hairline borders, 12-16px radii, Inter type,
   condensed only for large numerals, single amber accent, spring motion.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Rajdhani:wght@500;600;700&display=swap');

#menu-overlay, #intro-overlay, #match-loader, #conn-banner, .cs-modal, .card-buy-modal{
  --amber:#f0a83c; --amber-2:#ffc76b; --ink:#0b0c0f; --surface:rgba(18,20,25,.72); --surface-2:rgba(24,27,33,.8);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --text:#e9ebef; --muted:#8d93a0; --muted-2:#5f6673;
  --ok:#3ad17a; --bad:#ff6b5e; --r:14px; --r-s:10px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.3,.4,1);
  --px:0px; --py:0px;
  --ui:'Rajdhani', system-ui, sans-serif; --num:'Teko','Rajdhani',sans-serif; --disp:'Teko','Rajdhani',sans-serif;
}
#menu-overlay, #intro-overlay, #match-loader{ font-family:var(--ui); color:var(--text); letter-spacing:0; }
#menu-overlay *, #intro-overlay *{ letter-spacing:inherit; }
/* small-caps labels: the only place uppercase survives */
.k-label{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---------- shared: glass card, buttons, inputs ---------- */
#menu-overlay .lb-card, #menu-overlay .sc, #menu-overlay .panel, #menu-overlay .lb-team, #menu-overlay .showdown, #menu-overlay .sdl-row, #menu-overlay .pf-stat, #menu-overlay .pf-earn,
#menu-overlay .adm-card, #menu-overlay .adm-sd, #menu-overlay .adm-online-row, #menu-overlay .adm-formbox, #menu-overlay .adm-sd-inline, #menu-overlay .adm-tablewrap, #menu-overlay .adm-hint, #menu-overlay .adm-bug,
#menu-overlay .pf-game, #menu-overlay .pf-friend, #menu-overlay .pf-rename, #menu-overlay .lb-confirm-box, #intro-overlay .card, #intro-overlay .p2e-feat{
  border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 20px 50px rgba(0,0,0,.35); backdrop-filter:blur(18px) saturate(1.2); clip-path:none;
}
#menu-overlay .pbtn, #menu-overlay .opt-btn, #menu-overlay .adm-mini, #menu-overlay .adm-segb, #menu-overlay .pf-card-tab, #menu-overlay .adm-tab, #menu-overlay .pf-edit, #menu-overlay .lb-leave, #menu-overlay .lb-spec, #menu-overlay .lb-start,
#menu-overlay .sdl-join, #menu-overlay .sdl-joined, #menu-overlay .pf-earn-go, #menu-overlay .lb-confirm-cancel, #menu-overlay .lb-confirm-ok, #menu-overlay .cs-buy, #menu-overlay .cs-open, #menu-overlay .cs-rv-btn, #intro-overlay .btn, #intro-overlay .auth-tab, #conn-banner .cb-retry, .cs-modal .cbm-btn{
  border-radius:var(--r-s); font-family:var(--ui); font-weight:700; font-size:14px; letter-spacing:.08em; clip-path:none; text-transform:uppercase;
  transition:transform .25s var(--spring), background .2s, color .2s, border-color .2s, box-shadow .25s;
}
#menu-overlay .pbtn, #menu-overlay .opt-btn, #menu-overlay .adm-mini, #menu-overlay .pf-edit, #menu-overlay .lb-leave, #menu-overlay .lb-spec, #menu-overlay .lb-confirm-cancel{ background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--text); }
#menu-overlay .pbtn:hover, #menu-overlay .opt-btn.ghost:hover, #menu-overlay .adm-mini:hover, #menu-overlay .pf-edit:hover, #menu-overlay .lb-leave:hover, #menu-overlay .lb-spec:hover, #menu-overlay .lb-confirm-cancel:hover{ background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.22); transform:translateY(-1px); }
#menu-overlay .pbtn.primary, #menu-overlay .opt-btn.primary, #menu-overlay .lb-start, #menu-overlay .sdl-join, #menu-overlay .pf-earn-go, #menu-overlay .cs-open, #intro-overlay .btn, #conn-banner .cb-retry{
  background:var(--amber); color:#1a1206; border:0; box-shadow:0 8px 24px rgba(240,168,60,.25); }
#menu-overlay .pbtn.primary:hover, #menu-overlay .opt-btn.primary:hover, #menu-overlay .lb-start:hover, #menu-overlay .sdl-join:hover, #menu-overlay .pf-earn-go:hover, #menu-overlay .cs-open:hover, #intro-overlay .btn:hover{ background:var(--amber-2); transform:translateY(-2px); box-shadow:0 14px 34px rgba(240,168,60,.38); filter:none; }
#menu-overlay .hsel, #menu-overlay .hinput, #menu-overlay .pf-rename .field, #intro-overlay .field{ border-radius:var(--r-s); background:rgba(0,0,0,.28); border:1px solid var(--line-2); font-family:var(--ui); font-size:14px; letter-spacing:0; clip-path:none; transition:border-color .2s, box-shadow .2s; }
#menu-overlay .hsel:focus, #menu-overlay .hinput:focus, #menu-overlay .pf-rename .field:focus-within, #intro-overlay .field:focus-within{ border-color:rgba(240,168,60,.7); box-shadow:0 0 0 4px rgba(240,168,60,.14); }
#intro-overlay .field input, #menu-overlay .pf-rename .field input{ font-family:var(--ui); font-size:15px; font-weight:500; letter-spacing:0; }
#menu-overlay .opt-close{ font-size:22px; color:var(--muted); transition:color .2s, transform .3s var(--spring); } #menu-overlay .opt-close:hover{ color:#fff; transform:rotate(90deg); }
#menu-overlay .panel-body::-webkit-scrollbar{ width:6px; } #menu-overlay .panel-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }
#menu-overlay .lbd-empty, #menu-overlay .lbd-loading, #menu-overlay .sdl-empty, #menu-overlay .adm-empty, #menu-overlay .adm-load, #menu-overlay .pf-empty, #menu-overlay .cs-inv-empty{ font-family:var(--ui); font-size:14px; letter-spacing:0; color:var(--muted); text-transform:none; }

/* ---------- hero background: slow drift, gentle parallax, clean vignette ---------- */
#menu-overlay .m-bg, #intro-overlay .bg, #intro-overlay .bg2{ translate:var(--px) var(--py); scale:1.08; animation:kinBreath 26s ease-in-out infinite alternate; will-change:translate; }
@keyframes kinBreath{ from{ scale:1.08; } to{ scale:1.13; } }
#menu-overlay .m-scrim{ background:linear-gradient(90deg, rgba(8,9,12,.94) 0%, rgba(8,9,12,.7) 34%, rgba(8,9,12,.18) 60%, rgba(8,9,12,.62) 100%), linear-gradient(180deg, rgba(8,9,12,.62) 0%, rgba(8,9,12,.05) 30%, rgba(8,9,12,.78) 100%); }
#menu-overlay .m-scrim::before, #menu-overlay .m-scrim::after{ display:none; }
#intro-overlay .scrim{ background:linear-gradient(90deg, rgba(8,9,12,.5) 0%, rgba(8,9,12,.28) 40%, rgba(8,9,12,.12) 65%, rgba(8,9,12,.5) 100%), linear-gradient(180deg, rgba(8,9,12,.35) 0%, rgba(8,9,12,0) 30%, rgba(8,9,12,.72) 100%); }
#intro-overlay .scrim::before, #intro-overlay .scrim::after{ display:none; }
#intro-overlay .vignette{ box-shadow:inset 0 0 200px 20px rgba(0,0,0,.65); }
#intro-overlay .bg, #intro-overlay .bg2{ filter:saturate(1.05) brightness(.9); }

/* ============================================================ MAIN MENU ============================================================ */
#menu-overlay .topbar{ height:60px; background:linear-gradient(180deg, rgba(8,9,12,.85), rgba(8,9,12,.55)); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
#menu-overlay .tabs{ position:relative; padding-left:6px; }
#menu-overlay .tab{ font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:0 16px; border-bottom:0; transition:color .2s; }
#menu-overlay .tab:hover{ color:var(--text); }
#menu-overlay .tab.active{ color:#fff; background:transparent; border-bottom-color:transparent; }
#menu-overlay .tab-admin{ color:#ff8d82; } #menu-overlay .tab-admin.active{ color:#fff; background:transparent; }
#menu-overlay .kin-ind{ position:absolute; left:0; bottom:-1px; height:2px; width:0; opacity:0; background:var(--amber); border-radius:2px; box-shadow:0 0 12px rgba(240,168,60,.6); transition:transform .45s var(--ease), width .45s var(--ease), opacity .2s; }
#menu-overlay .rank, #menu-overlay .name-pill, #menu-overlay .coin, #menu-overlay .ico-btn{ border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line-2); clip-path:none; }
#menu-overlay .name-pill{ font-family:var(--ui); font-size:13px; font-weight:600; letter-spacing:0; padding:0 16px; min-width:0; }
#menu-overlay .coin{ font-family:var(--ui); font-size:13px; font-weight:600; letter-spacing:0; }
#menu-overlay .coin.opr{ border-color:rgba(240,168,60,.45); } #menu-overlay .coin.sol{ border-color:rgba(153,69,255,.4); }
#menu-overlay .rank{ padding:0 14px 0 4px; border-color:rgba(240,168,60,.3); }
#menu-overlay .rank-lvl{ border-radius:999px; clip-path:none; font-family:var(--ui); font-size:13px; }
#menu-overlay .rank-name{ font-family:var(--ui); font-size:10px; letter-spacing:.12em; }
#menu-overlay .rank-fill{ transition:width 1.1s var(--ease); }
#menu-overlay .ico-btn{ transition:background .2s, color .2s, transform .25s var(--spring); } #menu-overlay .ico-btn:hover{ background:rgba(255,255,255,.1); color:#fff; transform:translateY(-1px); }
#menu-overlay .ico-btn.amber{ border-color:rgba(240,168,60,.5); }

/* left column */
#menu-overlay .left{ top:96px; width:460px; translate:calc(var(--px) * -.3) calc(var(--py) * -.3); }
#menu-overlay .m-logo{ height:64px; }
#menu-overlay .m-tagline{ margin:26px 0 22px; display:flex; flex-direction:column; letter-spacing:0; }
#menu-overlay .m-tagline .kw{ display:block; overflow:hidden; line-height:.86; }
#menu-overlay .m-tagline .kw > span{ display:block; font-family:var(--disp); font-weight:700; letter-spacing:.03em; font-size:clamp(49px, 7.3vh, 70px); color:#fff; }
#menu-overlay .m-tagline .kw:last-child > span{ color:var(--amber); }
#menu-overlay .play{ width:auto; min-width:280px; height:58px; margin-bottom:14px; padding:0 22px 0 26px; border:0; border-radius:var(--r-s); clip-path:none; color:#1a1206; background:var(--amber); box-shadow:0 10px 30px rgba(240,168,60,.28);
  font-family:var(--ui); font-weight:700; font-size:16px; letter-spacing:.01em; text-transform:none; justify-content:flex-start; gap:18px; transition:transform .3s var(--spring), box-shadow .3s, background .2s; }
#menu-overlay .play:hover{ transform:translateY(-2px); background:var(--amber-2); box-shadow:0 18px 44px rgba(240,168,60,.4); color:#1a1206; }
#menu-overlay .play:active{ transform:translateY(0); }
#menu-overlay .play .chev{ margin-left:auto; color:#1a1206; display:flex; transition:transform .3s var(--spring); }
#menu-overlay .play:hover .chev{ transform:translateX(4px); }
#menu-overlay .mitem{ height:44px; gap:14px; width:auto; padding:0 14px; margin-left:-14px; border-radius:var(--r-s); font-family:var(--ui); font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:#c9ced6; transition:background .2s, color .2s, padding-left .3s var(--ease); }
#menu-overlay .mitem::before{ display:none; }
#menu-overlay .mitem:hover{ background:rgba(255,255,255,.06); color:#fff; padding-left:18px; }
#menu-overlay .mitem .chev{ opacity:.35; transition:opacity .2s, transform .3s var(--spring); } #menu-overlay .mitem:hover .chev{ opacity:.9; transform:translateX(3px); }
#menu-overlay .left .menu-card{ margin-top:18px; max-width:360px; }
#menu-overlay .lb-card-h{ font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:14px 18px 12px; border-bottom:1px solid var(--line); background:none; }
#menu-overlay .left .menu-card .lb-loadout{ display:grid; grid-template-columns:1fr 120px; grid-template-rows:auto auto; align-items:center; column-gap:12px; padding:14px 18px 16px; cursor:pointer; }
#menu-overlay .left .menu-card .lb-lo-class{ font-family:var(--disp); font-size:22px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
#menu-overlay .left .menu-card .lb-lo-gun{ grid-column:2; grid-row:1 / span 2; width:120px; margin:0; filter:drop-shadow(0 8px 12px rgba(0,0,0,.6)); transition:transform .4s var(--spring); }
#menu-overlay .left .menu-card .lb-loadout:hover .lb-lo-gun{ transform:translateX(-6px) scale(1.05); }
#menu-overlay .left .menu-card .lb-lo-name{ grid-column:1; border-top:0; padding-top:2px; font-family:var(--ui); font-size:12px; letter-spacing:0; color:var(--muted); }

/* right column: showcase */
#menu-overlay .right{ top:96px; width:340px; translate:calc(var(--px) * -.18) calc(var(--py) * -.18); }
#menu-overlay .sc{ padding:18px; }
#menu-overlay .sc-name{ font-family:var(--disp); font-size:27px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
#menu-overlay .sc-lvl{ font-family:var(--ui); font-size:14px; } #menu-overlay .sc-lvl::before{ letter-spacing:.1em; }
#menu-overlay .sc-rank{ font-family:var(--ui); font-size:11px; letter-spacing:.12em; }
#menu-overlay .sc-emblem{ border-radius:12px; clip-path:none; }
#menu-overlay .sc-xpbar{ height:4px; border-radius:2px; } #menu-overlay .sc-xpfill{ transition:width 1.2s var(--ease); }
#menu-overlay .sc-card{ border-radius:12px; clip-path:none; box-shadow:0 10px 30px rgba(0,0,0,.4); }
#menu-overlay .sc-card::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%); background-size:260% 100%; animation:kinShimmer 7s ease-in-out infinite; }
@keyframes kinShimmer{ 0%,60%{ background-position:150% 0; } 100%{ background-position:-150% 0; } }
#menu-overlay .kin-tl, #menu-overlay .kin-br{ display:none; }

/* showdown widget */
#menu-overlay .showdown{ right:46px; bottom:70px; width:300px; padding:18px 20px; background:linear-gradient(160deg, rgba(240,168,60,.12), var(--surface) 60%); border-color:rgba(240,168,60,.3); translate:calc(var(--px) * -.12) calc(var(--py) * -.12); overflow:hidden; }
#menu-overlay .showdown::before{ display:none; }
#menu-overlay .sd-top{ font-family:var(--ui); font-size:11px; letter-spacing:.14em; font-weight:600; }
#menu-overlay .sd-live{ position:relative; padding-left:12px; font-size:10px; letter-spacing:.1em; animation:none; }
#menu-overlay .sd-live::before{ content:''; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#ff5a4d; box-shadow:0 0 0 0 rgba(255,90,77,.6); animation:kinPing 1.8s ease-out infinite; }
@keyframes kinPing{ to{ box-shadow:0 0 0 8px rgba(255,90,77,0); } }
#menu-overlay .sd-pot{ font-family:var(--num); font-size:44px; font-weight:700; letter-spacing:0; margin-top:8px; font-variant-numeric:tabular-nums; text-shadow:none; }
#menu-overlay .sd-sol{ font-family:var(--ui); font-size:14px; font-weight:600; letter-spacing:0; }
#menu-overlay .sd-pot-lbl, #menu-overlay .sd-split{ font-family:var(--ui); font-size:10.5px; letter-spacing:.12em; }
#menu-overlay .sd-next{ font-family:var(--ui); font-size:12px; letter-spacing:.1em; margin-top:12px; }
#menu-overlay .sd-next span{ display:inline-block; min-width:48px; font-variant-numeric:tabular-nums; }
#menu-overlay .sd-join-btn{ border-radius:var(--r-s) !important; clip-path:none; font-family:var(--ui); font-size:13px; letter-spacing:.01em; font-weight:600; transition:transform .3s var(--spring), filter .2s; }
#menu-overlay .sd-join-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
#menu-overlay .sd-meta{ font-family:var(--ui); font-size:12px; letter-spacing:0; }

/* bottom bar */
#menu-overlay .bottombar{ height:44px; background:linear-gradient(0deg, rgba(8,9,12,.9), rgba(8,9,12,.6)); border-top:1px solid var(--line); font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
#menu-overlay .stat{ color:var(--muted); font-weight:500; } #menu-overlay .stat::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--amber); }
#menu-overlay .stat b{ display:inline-block; color:#fff; font-weight:600; transition:color .2s; }
#menu-overlay .stat b.tick{ animation:kinTick .6s var(--ease) 1; } @keyframes kinTick{ 0%{ color:var(--amber); transform:translateY(-4px); } 100%{ color:#fff; transform:none; } }
#menu-overlay .region{ border-radius:999px; clip-path:none; border-color:var(--line-2); }
#menu-overlay .bottom-right{ color:var(--muted); font-weight:500; }

/* panels */
#menu-overlay .panel{ border-radius:18px; animation:kinPanel .55s var(--ease) backwards; }
@keyframes kinPanel{ from{ opacity:0; transform:translateY(14px) scale(.99); } }
#menu-overlay .panel-head{ padding:16px 22px 14px 24px; border-bottom:1px solid var(--line); background:none; }
#menu-overlay .panel-head .t{ font-family:var(--disp); font-size:22px; font-weight:700; letter-spacing:.03em; color:#fff; text-transform:uppercase; display:flex; align-items:center; gap:0; }
#menu-overlay .panel-head .t::before{ display:none; }
#menu-overlay #panel-admin .panel-head .t::before{ display:none; }

/* entrance choreography */
#menu-overlay.kin .left > *{ animation:kinUp .8s var(--ease) both; animation-delay:calc(var(--i, 0) * 80ms + 60ms); }
#menu-overlay.kin .left > *:nth-child(2){ --i:1 } #menu-overlay.kin .left > *:nth-child(3){ --i:2 } #menu-overlay.kin .left > *:nth-child(4){ --i:3 } #menu-overlay.kin .left > *:nth-child(5){ --i:4 } #menu-overlay.kin .left > *:nth-child(6){ --i:5 }
#menu-overlay.kin .m-tagline .kw > span{ animation:kinWordUp .85s var(--ease) both; animation-delay:calc(.25s + var(--i, 0) * 100ms); }
#menu-overlay.kin .m-tagline .kw:nth-child(2) > span{ --i:1 } #menu-overlay.kin .m-tagline .kw:nth-child(3) > span{ --i:2 }
#menu-overlay.kin .right > *{ animation:kinUp .8s var(--ease) both; animation-delay:calc(var(--i, 0) * 100ms + 200ms); }
#menu-overlay.kin .right > *:nth-child(2){ --i:1 }
#menu-overlay.kin .showdown{ animation:kinUp .8s var(--ease) both .4s; }
#menu-overlay.kin .topbar{ animation:kinDown .6s var(--ease) both; }
#menu-overlay.kin .bottombar{ animation:kinUpBar .6s var(--ease) both .1s; }
#menu-overlay.kin .tab{ animation:kinFade .5s var(--ease) both; animation-delay:calc(var(--i, 0) * 40ms + .15s); }
#menu-overlay.kin .tab:nth-child(2){ --i:1 } #menu-overlay.kin .tab:nth-child(3){ --i:2 } #menu-overlay.kin .tab:nth-child(4){ --i:3 } #menu-overlay.kin .tab:nth-child(5){ --i:4 } #menu-overlay.kin .tab:nth-child(6){ --i:5 } #menu-overlay.kin .tab:nth-child(7){ --i:6 } #menu-overlay.kin .tab:nth-child(8){ --i:7 }
@keyframes kinUp{ from{ opacity:0; transform:translateY(18px); } }
@keyframes kinWordUp{ from{ transform:translateY(110%); } to{ transform:none; } }
@keyframes kinDown{ from{ transform:translateY(-100%); opacity:0; } }
@keyframes kinUpBar{ from{ transform:translateY(100%); opacity:0; } }
@keyframes kinFade{ from{ opacity:0; transform:translateY(-4px); } }
@keyframes kinIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes kinLeft{ from{ opacity:0; transform:translateX(-18px); } }
@keyframes kinRight{ from{ opacity:0; transform:translateX(18px); } }
@keyframes kinPop{ from{ opacity:0; transform:scale(.92); } }

/* ============================================================ GAME LOBBY ============================================================ */
#menu-overlay.lobby .m-scrim{ background:linear-gradient(90deg, rgba(8,9,12,.94), rgba(8,9,12,.8) 30%, rgba(8,9,12,.62) 55%, rgba(8,9,12,.88)), linear-gradient(180deg, rgba(8,9,12,.7), rgba(8,9,12,.2) 30%, rgba(8,9,12,.85)); }
#menu-overlay.lobby .lb-left{ top:96px; bottom:118px; max-height:none; width:300px; overflow:auto; scrollbar-width:none; } #menu-overlay.lobby .lb-left::-webkit-scrollbar{ display:none; }
#menu-overlay.lobby .left .m-logo{ display:none; }
#menu-overlay .lb-card.lb-match .lb-card-h{ font-size:0; } #menu-overlay .lb-card.lb-match .lb-card-h::before{ content:'Mission'; font-size:11px; }
#menu-overlay .lb-match .lb-mode{ font-family:var(--disp); font-size:24px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:14px 18px 10px; }
#menu-overlay .lb-map{ border-radius:10px; width:calc(100% - 36px); height:138px; object-fit:cover; margin:0 18px; clip-path:none; filter:saturate(.85); }
#menu-overlay .lb-stats2{ padding:14px 18px 8px; gap:24px; } #menu-overlay .lb-stats2 span{ font-family:var(--ui); font-size:10.5px; letter-spacing:.12em; } #menu-overlay .lb-stats2 b{ font-family:var(--num); font-size:22px; letter-spacing:0; font-weight:700; }
#menu-overlay .lb-settings{ padding:0 18px 16px; gap:8px; } #menu-overlay .lb-settings span{ font-family:var(--ui); font-size:11px; letter-spacing:.06em; padding:4px 10px; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px; clip-path:none; }
#menu-overlay.lobby .lb-left .lb-loadout{ display:grid; grid-template-columns:1fr 110px; grid-template-rows:auto auto; align-items:center; column-gap:10px; padding:12px 18px 14px; cursor:pointer; }
#menu-overlay.lobby .lb-left .lb-lo-class{ font-family:var(--disp); font-size:21px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
#menu-overlay.lobby .lb-left .lb-lo-gun{ grid-column:2; grid-row:1 / span 2; width:110px; margin:0; filter:drop-shadow(0 8px 12px rgba(0,0,0,.6)); transition:transform .4s var(--spring); }
#menu-overlay.lobby .lb-left .lb-loadout:hover .lb-lo-gun{ transform:translateX(-6px) scale(1.05); }
#menu-overlay.lobby .lb-left .lb-lo-name{ grid-column:1; border-top:0; padding-top:2px; font-family:var(--ui); font-size:12px; letter-spacing:0; color:var(--muted); }
#menu-overlay .lb-center{ top:84px; width:640px; max-width:48vw; }
#menu-overlay .lb-waiting{ font-family:var(--disp); font-size:34px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#fff; display:flex; align-items:center; justify-content:center; gap:12px; }
#menu-overlay .lb-waiting::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(240,168,60,.5); animation:kinPingA 1.8s ease-out infinite; flex:0 0 auto; }
@keyframes kinPingA{ to{ box-shadow:0 0 0 10px rgba(240,168,60,0); } }
#menu-overlay .lb-count{ font-family:var(--ui); font-size:12px; letter-spacing:.1em; margin:6px 0 18px; color:var(--muted); } #menu-overlay .lb-count b{ font-size:14px; }
#menu-overlay .lb-wager{ border-radius:var(--r-s); clip-path:none; font-family:var(--ui); font-size:12px; letter-spacing:.02em; }
#menu-overlay .lb-team{ margin-bottom:14px; overflow:hidden; }
#menu-overlay .lb-team::before{ display:none; }
#menu-overlay .lb-team-h{ padding:14px 18px; border-bottom:1px solid var(--line); background:none; }
#menu-overlay .lb-team-name{ font-family:var(--disp); font-size:17px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
#menu-overlay .lb-team-ready{ font-family:var(--ui); font-size:12px; letter-spacing:.02em; }
#menu-overlay .lb-cols{ font-family:var(--ui); font-size:10.5px; letter-spacing:.12em; padding:8px 18px 6px; grid-template-columns:72px 1fr 130px; }
#menu-overlay .lb-row{ grid-template-columns:72px 1fr 130px; padding:11px 18px; border-top:1px solid var(--line); transition:background .2s; }
#menu-overlay .lb-row:hover{ background:rgba(255,255,255,.03); }
#menu-overlay .lb-row.you{ border:0; border-top:1px solid var(--line); border-radius:0; margin:0; background:linear-gradient(90deg, rgba(240,168,60,.12), transparent 70%); box-shadow:inset 2px 0 0 var(--amber); }
#menu-overlay .lb-lvl{ font-family:var(--ui); font-size:13px; letter-spacing:0; gap:0; font-weight:600; } #menu-overlay .lb-lvl .chev{ display:none; }
#menu-overlay .lb-lvl::before{ content:'Lv'; font-size:11px; color:var(--muted); margin-right:5px; font-weight:500; }
#menu-overlay .lb-pname{ font-family:var(--disp); font-size:17px; font-weight:600; letter-spacing:0; }
#menu-overlay .lb-you{ border-radius:999px; clip-path:none; font-family:var(--ui); font-size:10px; letter-spacing:.08em; padding:2px 8px; vertical-align:1px; }
#menu-overlay .lb-status{ font-family:var(--ui); font-size:12px; letter-spacing:.02em; display:flex; justify-content:flex-end; align-items:center; gap:8px; text-transform:capitalize; }
#menu-overlay .lb-status::before{ content:''; width:6px; height:6px; border-radius:50%; background:#5a6068; }
#menu-overlay .lb-status.ready::before{ background:var(--ok); box-shadow:0 0 0 0 rgba(58,209,122,.6); animation:kinPingG 1.8s ease-out infinite; }
@keyframes kinPingG{ to{ box-shadow:0 0 0 7px rgba(58,209,122,0); } }
#menu-overlay .lobby-view.kin-rows .lb-row{ animation:kinLeft .5s var(--ease) both; animation-delay:calc(var(--i,0) * 50ms + .25s); }
#menu-overlay .lobby-view.kin-rows .lb-row:nth-child(2){ --i:1 } #menu-overlay .lobby-view.kin-rows .lb-row:nth-child(3){ --i:2 } #menu-overlay .lobby-view.kin-rows .lb-row:nth-child(4){ --i:3 } #menu-overlay .lobby-view.kin-rows .lb-row:nth-child(5){ --i:4 } #menu-overlay .lobby-view.kin-rows .lb-row:nth-child(6){ --i:5 } #menu-overlay .lobby-view.kin-rows .lb-row:nth-child(7){ --i:6 } #menu-overlay .lobby-view.kin-rows .lb-row:nth-child(n+8){ --i:7 }
#menu-overlay .lb-sd-card{ position:relative; overflow:hidden; border-color:rgba(240,168,60,.3) !important; background:linear-gradient(160deg, rgba(240,168,60,.12), var(--surface) 60%) !important; }
#menu-overlay .lb-sd-card::before{ display:none; }
#menu-overlay .lb-sd-pot{ font-family:var(--num); font-size:34px; font-weight:700; letter-spacing:0; } #menu-overlay .lb-sd-sol{ font-family:var(--ui); font-size:13px; letter-spacing:0; } #menu-overlay .lb-sd-split{ font-family:var(--ui); font-size:10.5px; letter-spacing:.1em; padding-bottom:8px; }
#menu-overlay .lb-actions-l{ bottom:54px; gap:8px; }
#menu-overlay .lb-leave, #menu-overlay .lb-spec, #menu-overlay .lb-start{ padding:13px 22px; font-size:13px; }
#menu-overlay .lb-leave:hover{ background:rgba(255,90,77,.12); color:#ff8d82; border-color:rgba(255,90,77,.4); }
#menu-overlay .lb-ready{ position:absolute; right:46px; bottom:46px; width:320px; padding:18px 24px; border:1px solid rgba(240,168,60,.45); border-radius:var(--r); text-align:left; clip-path:none; background:linear-gradient(160deg, rgba(240,168,60,.14), var(--surface) 55%); box-shadow:0 20px 50px rgba(0,0,0,.4); backdrop-filter:blur(18px); overflow:hidden; transition:transform .3s var(--spring), border-color .3s, box-shadow .3s; animation:kinReadyPulse 2.6s ease-in-out infinite; }
@keyframes kinReadyPulse{ 0%,100%{ box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 0 rgba(240,168,60,0); } 50%{ box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 36px rgba(240,168,60,.28); } }
#menu-overlay .lb-ready::before, #menu-overlay .lb-ready::after{ display:none; }
#menu-overlay .lb-ready:hover{ transform:translateY(-2px); border-color:var(--amber); box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 44px rgba(240,168,60,.35); animation:none; }
#menu-overlay .lb-ready-t{ padding:0; font-family:var(--disp); font-size:27px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#fff; }
#menu-overlay .lb-ready-s{ padding:0; font-family:var(--ui); font-size:12px; letter-spacing:0; color:var(--muted); margin-top:4px; text-transform:none; }
#menu-overlay .lb-ready.on{ animation:none; border-color:rgba(58,209,122,.7); background:linear-gradient(160deg, rgba(58,209,122,.16), var(--surface) 55%); box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 36px rgba(58,209,122,.25); }
#menu-overlay .lb-ready.on .lb-ready-t{ color:#8fe89a; }
#menu-overlay .lb-confirm{ background:rgba(6,7,10,.7); backdrop-filter:blur(8px); }
#menu-overlay .lb-confirm-box{ width:440px; padding:30px 32px 28px; border-color:var(--line-2); background:var(--surface-2); clip-path:none; animation:kinPop .35s var(--spring) both; }
#menu-overlay .lb-confirm-box::before{ display:none; }
#menu-overlay .lb-confirm-t{ font-family:var(--disp); font-size:29px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#fff; }
#menu-overlay .lb-confirm-s{ font-size:14px; color:var(--muted); }
#menu-overlay .lb-confirm-btns{ gap:8px; } #menu-overlay .lb-confirm-cancel, #menu-overlay .lb-confirm-ok{ font-size:13px; letter-spacing:.01em; clip-path:none; }
#menu-overlay .lb-confirm-ok{ background:var(--bad); border:0; color:#fff; } #menu-overlay .lb-confirm-ok:hover{ background:#ff8577; }
#menu-overlay.lobby.kin .lb-left > *{ animation:kinLeft .8s var(--ease) both; animation-delay:calc(var(--i,0) * 100ms + 60ms); } #menu-overlay.lobby.kin .lb-left > *:nth-child(2){ --i:1 }
#menu-overlay.lobby.kin .lb-center > *{ animation:kinUp .7s var(--ease) both; animation-delay:calc(var(--i,0) * 90ms + 80ms); } #menu-overlay.lobby.kin .lb-center > *:nth-child(2){ --i:1 } #menu-overlay.lobby.kin .lb-center > *:nth-child(3){ --i:2 } #menu-overlay.lobby.kin .lb-center > *:nth-child(4){ --i:3 } #menu-overlay.lobby.kin .lb-center > *:nth-child(5){ --i:4 }
#menu-overlay.lobby.kin .lb-actions-l{ animation:kinUp .7s var(--ease) both .3s; }
#menu-overlay.lobby.kin .lb-ready{ animation:kinUp .7s var(--ease) both .38s, kinReadyPulse 2.6s ease-in-out 1.2s infinite; } #menu-overlay.lobby.kin .lb-ready.on{ animation:kinUp .7s var(--ease) both .38s; }
#match-loader{ font-family:var(--ui); }
#match-loader .ml-grid{ display:none; } #match-loader .ml-logo{ height:56px; margin-bottom:30px; }
#match-loader .ml-deploy{ font-size:11px; letter-spacing:.2em; color:var(--muted); animation:kinFade .6s var(--ease) both .1s; }
#match-loader .ml-map{ font-family:var(--disp); font-weight:700; font-size:clamp(52px, 9.1vh, 83px); letter-spacing:.03em; text-transform:uppercase; text-shadow:none; animation:kinWordUp .8s var(--ease) both .2s; }
#match-loader .ml-bar{ width:320px; height:3px; border-radius:2px; margin:34px 0 14px; background:rgba(255,255,255,.1); }
#match-loader .ml-bar-fill{ border-radius:2px; box-shadow:0 0 12px rgba(244,179,76,.7); }
#match-loader .ml-status{ font-size:12px; letter-spacing:.14em; color:var(--muted); }

/* ============================================================ START MENU ============================================================ */
#intro-overlay{ font-family:var(--ui); }
#intro-overlay .kin-readout, #intro-overlay .kin-ticker{ display:none; }
#intro-overlay .kin-corner{ position:absolute; z-index:4; top:26px; right:34px; display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line-2); font-size:12px; font-weight:500; color:var(--muted); animation:kinFade .6s var(--ease) both .3s; }
#intro-overlay .kin-corner span{ width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(58,209,122,.6); animation:kinPingG 2s ease-out infinite; }
#intro-overlay #login-view{ width:min(1180px, 92vw); max-width:none; text-align:left; display:grid; grid-template-columns:minmax(0,1fr) 400px; column-gap:72px; align-items:center; translate:calc(var(--px) * -.25) calc(var(--py) * -.25); }
#intro-overlay #login-view > *{ grid-column:1; }
#intro-overlay #login-view .card{ grid-column:2; grid-row:1 / span 6; align-self:center; justify-self:end; width:400px; max-width:none; box-sizing:border-box; }
#intro-overlay #login-view .footer{ display:none; }
#intro-overlay .p2e-tag{ border-radius:999px; clip-path:none; font-family:var(--ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin:0 0 22px; padding:7px 14px; box-shadow:none; justify-self:start; background:rgba(58,209,122,.1); border-color:rgba(58,209,122,.35); }
#intro-overlay .logo{ height:56px; margin:0 0 22px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
#intro-overlay .tagline{ display:flex; flex-direction:column; align-items:flex-start; margin:0; letter-spacing:0; }
#intro-overlay .tagline::before, #intro-overlay .tagline::after{ display:none; }
#intro-overlay .tagline .kw{ display:block; overflow:hidden; line-height:.86; }
#intro-overlay .tagline .kw > span{ display:block; font-family:var(--disp); font-weight:700; letter-spacing:.03em; font-size:clamp(57px, 10.1vh, 98px); color:#fff; animation:kinWordUp .85s var(--ease) both; animation-delay:calc(.3s + var(--i,0) * .11s); }
#intro-overlay .tagline .kw:nth-child(2) > span{ --i:1 } #intro-overlay .tagline .kw:nth-child(3) > span{ --i:2 }
#intro-overlay .tagline .kw:last-child > span{ color:var(--amber); }
#intro-overlay .hero{ order:1; max-width:500px; margin:18px 0 0; font-size:16px; line-height:1.55; color:#b7bcc6; letter-spacing:0; animation:kinIn .7s var(--ease) both .6s; }
#intro-overlay .hero b{ color:#fff; font-weight:600; }
#intro-overlay .p2e-feats{ order:2; max-width:560px; margin:26px 0 0; gap:10px; }
#intro-overlay .p2e-feat{ align-items:flex-start; text-align:left; padding:14px 16px; box-shadow:none; animation:kinUp .7s var(--ease) both; animation-delay:calc(.6s + var(--i,0) * .1s); }
#intro-overlay .p2e-feat:nth-child(2){ --i:1 } #intro-overlay .p2e-feat:nth-child(3){ --i:2 }
#intro-overlay .p2e-feat::before, #intro-overlay .p2e-feat::after{ display:none; }
#intro-overlay .p2e-feat svg{ width:18px; height:18px; } #intro-overlay .p2e-feat b{ font-family:var(--disp); font-size:16px; letter-spacing:0; text-transform:uppercase; } #intro-overlay .p2e-feat i{ text-align:left; font-size:15px; color:var(--muted); }
#intro-overlay .card{ position:relative; padding:26px 26px 24px; overflow:hidden; border-color:var(--line-2); background:var(--surface-2); animation:kinRight .9s var(--ease) both .35s !important; opacity:1; transform:none; }
#intro-overlay .card::before{ display:none; }
#intro-overlay .card .kin-tl, #intro-overlay .card .kin-br{ display:none; }
#intro-overlay .kin-card-h{ display:flex; justify-content:space-between; align-items:center; margin:0 0 18px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
#intro-overlay .kin-card-h b{ color:#fff; font-weight:600; }
#intro-overlay .auth-tabs{ border-radius:var(--r-s); background:rgba(0,0,0,.3); border:1px solid var(--line); padding:3px; margin:0 0 18px; gap:3px; }
#intro-overlay .auth-tab{ border-radius:8px; font-size:12px; letter-spacing:.08em; padding:9px 0; text-transform:uppercase; clip-path:none; }
#intro-overlay .auth-tab:hover{ animation:none; color:#fff; }
#intro-overlay .auth-tab.on{ background:rgba(255,255,255,.1); color:#fff; }
#intro-overlay .card-label{ font-family:var(--ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
#intro-overlay .btn{ position:relative; height:52px; margin-top:14px; gap:10px; font-size:14px; letter-spacing:.01em; text-transform:none; font-weight:600; box-shadow:0 10px 28px rgba(240,168,60,.28); }
#intro-overlay .btn .shine{ display:none; }
#intro-overlay .btn .chev{ margin-left:auto; display:flex; transition:transform .3s var(--spring); } #intro-overlay .btn:hover .chev{ transform:translateX(4px); }
#intro-overlay .btn.ready{ background:var(--ok); }
#intro-overlay .req{ font-family:var(--ui); font-size:12px; letter-spacing:0; justify-content:flex-start; padding:10px 12px; margin-top:16px; border-radius:var(--r-s); background:rgba(0,0,0,.25); border:1px solid var(--line); text-transform:none; }
#intro-overlay .req.kin-flash{ animation:kinReq .5s var(--ease) 1; } @keyframes kinReq{ from{ opacity:0; transform:translateX(-8px); } }
/* loader */
#intro-overlay.loading .loading-view{ display:flex; flex-direction:column; align-items:center; width:min(760px, 92vw); text-align:center; animation:none; }
#intro-overlay .loading-view .logo{ height:clamp(120px, 19vh, 170px); margin:0 0 18px; opacity:1; animation:kinFade .6s var(--ease) both; }
#intro-overlay .kin-ring{ position:relative; width:320px; height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#intro-overlay .kin-ring svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
#intro-overlay .kin-ring .arc{ transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .45s var(--ease); filter:drop-shadow(0 0 6px rgba(240,168,60,.7)); }
#intro-overlay .kin-ring .orbit{ transform-origin:50% 50%; animation:kinSpin 30s linear infinite; }
@keyframes kinSpin{ to{ transform:rotate(360deg); } }
#intro-overlay .kin-ring .lbl{ position:relative; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; animation:kinFade .6s var(--ease) both .5s; }
#intro-overlay .loading-view .load-callsign{ position:relative; margin:6px 0 0; font-family:var(--disp); font-size:clamp(39px, 6.5vh, 57px); font-weight:700; letter-spacing:.03em; line-height:1; animation:kinWordUp .8s var(--ease) both .3s; }
#intro-overlay .loading-view .load-pct{ position:relative; margin:8px 0 0; font-family:var(--num); font-size:40px; font-weight:700; color:var(--amber); letter-spacing:0; line-height:1; font-variant-numeric:tabular-nums; animation:kinFade .6s var(--ease) both .7s; }
#intro-overlay .loading-view .load-status{ margin-top:22px; font-family:var(--ui); font-size:12px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; min-height:18px; opacity:1; animation:kinIn .5s var(--ease) both .9s; }
#intro-overlay .loading-view .load-status::after{ display:none; }
#intro-overlay .loading-view .load-status.kin-flash{ animation:kinIn .45s var(--ease) both; }
#intro-overlay .loading-view .load-bar{ width:280px; height:3px; border-radius:2px; margin:14px auto 0; background:rgba(255,255,255,.1); box-shadow:none; -webkit-mask-image:none; mask-image:none; animation:kinFade .5s var(--ease) both 1s; }
#intro-overlay .loading-view .load-bar-fill{ border-radius:2px; box-shadow:0 0 12px rgba(244,179,76,.7); transition:width .4s var(--ease); }
#intro-overlay .loading-view .load-tip{ font-family:var(--ui); font-size:13px; letter-spacing:0; margin-top:26px; max-width:520px; color:var(--muted); animation:kinFade .5s var(--ease) both 1.1s; text-transform:none; }
#intro-overlay .load-tip-key{ border-radius:999px; clip-path:none; font-size:10px; letter-spacing:.12em; padding:3px 9px; }
#intro-overlay .loading-view #load-tip{ display:inline-block; animation:kinFade .5s var(--ease) both; }
#intro-overlay .loading-view.kin-deployed{ animation:kinOut .7s var(--ease) forwards; }
@keyframes kinOut{ to{ transform:scale(1.04); opacity:0; filter:blur(3px); } }
#intro-overlay .kin-term, #intro-overlay .kin-dossier, #intro-overlay .kin-flashout{ display:none; }
@media (max-width:1040px){
  #intro-overlay #login-view{ grid-template-columns:1fr; width:min(560px, 92vw); }
  #intro-overlay #login-view .card{ grid-column:1; grid-row:auto; width:100%; justify-self:stretch; margin-top:22px; }
  #intro-overlay .p2e-feats, #intro-overlay .kin-corner{ display:none; }
  #intro-overlay .tagline .kw > span{ font-size:clamp(49px, 9.1vh, 72px); }
}
@media (max-width:480px){ #intro-overlay .btn{ font-size:13px; } }

/* ============================================================ PANELS ============================================================ */
/* leaderboard */
#panel-leaderboard .lbd-row{ grid-template-columns:60px 1fr 60px 56px 56px 70px 64px 150px; padding:0 22px; min-height:56px; font-family:var(--ui); font-size:14px; letter-spacing:0; border-bottom:1px solid var(--line); animation:kinLeft .5s var(--ease) both; animation-delay:calc(var(--i,0) * 40ms); }
#panel-leaderboard .lbd-row:nth-child(2){ --i:1 } #panel-leaderboard .lbd-row:nth-child(3){ --i:2 } #panel-leaderboard .lbd-row:nth-child(4){ --i:3 } #panel-leaderboard .lbd-row:nth-child(5){ --i:4 } #panel-leaderboard .lbd-row:nth-child(6){ --i:5 } #panel-leaderboard .lbd-row:nth-child(7){ --i:6 } #panel-leaderboard .lbd-row:nth-child(n+8){ --i:7 }
#panel-leaderboard .lbd-head{ min-height:38px; background:rgba(10,12,15,.9); border-bottom:1px solid var(--line); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; animation:none; }
#panel-leaderboard .lbd-row .lbd-rank{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin:0 auto; border-radius:50%; font-size:12px; font-weight:600; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line); clip-path:none; }
#panel-leaderboard .lbd-head .lbd-rank{ background:none; border:0; width:auto; height:auto; }
#panel-leaderboard .lbd-row.top:nth-child(2) .lbd-rank{ color:#1c1304; background:var(--amber); border-color:transparent; box-shadow:0 0 16px rgba(240,192,64,.45); }
#panel-leaderboard .lbd-row.top:nth-child(3) .lbd-rank{ color:#111; background:#d6dbe2; border-color:transparent; }
#panel-leaderboard .lbd-row.top:nth-child(4) .lbd-rank{ color:#1a0e05; background:#c98a55; border-color:transparent; }
#panel-leaderboard .lbd-row .lbd-name > b{ font-size:18px; font-weight:600; letter-spacing:0; }
#panel-leaderboard .lbd-row .lbd-name > i{ font-family:var(--ui); font-size:11px; letter-spacing:0; color:var(--muted-2); }
#panel-leaderboard .lbd-row .lbd-earn{ font-family:var(--num); font-size:20px; font-weight:700; letter-spacing:0; } #panel-leaderboard .lbd-row .lbd-earn i{ font-family:var(--ui); font-size:10px; letter-spacing:.04em; }
#panel-leaderboard .lbd-row.me{ background:linear-gradient(90deg, rgba(240,168,60,.14), transparent 70%); box-shadow:inset 2px 0 0 var(--amber); }
/* showdowns */
#panel-servers .sdl-body{ padding:16px 22px; }
#menu-overlay .sdl-row{ position:relative; padding:16px 20px; margin-bottom:10px; gap:22px; animation:kinUp .55s var(--ease) both; animation-delay:calc(var(--i,0) * 60ms); transition:transform .3s var(--spring), border-color .2s, background .2s; }
#menu-overlay .sdl-row:nth-child(2){ --i:1 } #menu-overlay .sdl-row:nth-child(3){ --i:2 } #menu-overlay .sdl-row:nth-child(4){ --i:3 } #menu-overlay .sdl-row:nth-child(n+5){ --i:4 }
#menu-overlay .sdl-row::before{ display:none; }
#menu-overlay .sdl-row:hover{ transform:translateY(-2px); border-color:var(--line-2); background:var(--surface-2); }
#menu-overlay .sdl-name{ font-family:var(--disp); font-size:21px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
#menu-overlay .sdl-live{ border-radius:999px; clip-path:none; font-family:var(--ui); font-size:10px; letter-spacing:.1em; padding:2px 8px 2px 16px; margin:0; position:relative; background:rgba(255,90,77,.16); color:#ff8d82; }
#menu-overlay .sdl-live::before{ content:''; position:absolute; left:7px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:#ff5a4d; box-shadow:0 0 0 0 rgba(255,90,77,.6); animation:kinPing 1.8s ease-out infinite; }
#menu-overlay .sdl-meta{ font-family:var(--ui); font-size:12.5px; letter-spacing:0; color:var(--muted); margin-top:5px; }
#menu-overlay .sdl-pot{ min-width:150px; } #menu-overlay .sdl-pot-v{ font-family:var(--num); font-size:22px; font-weight:700; letter-spacing:0; color:#fff; } #menu-overlay .sdl-pot-usd{ font-family:var(--ui); font-size:12px; letter-spacing:0; color:var(--amber); }
#menu-overlay .sdl-join, #menu-overlay .sdl-joined{ position:relative; overflow:hidden; padding:11px 22px; font-size:13px; }
#menu-overlay .sdl-join::after{ display:none; }
#menu-overlay .sdl-join.joined{ background:var(--ok); }
/* profile */
#menu-overlay .pf{ padding:24px 28px 32px; }
#menu-overlay .pf-avatar{ border-radius:18px; width:84px; height:84px; font-family:var(--ui); font-size:34px; font-weight:700; clip-path:none; box-shadow:0 12px 30px rgba(224,143,37,.3); animation:kinLeft .6s var(--ease) both; }
#menu-overlay .pf-name{ font-family:var(--disp); font-size:34px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; animation:kinLeft .6s var(--ease) both .05s; }
#menu-overlay .pf-edit{ font-size:11px; letter-spacing:.06em; padding:6px 12px; }
#menu-overlay .pf-rank{ font-family:var(--ui); font-size:12px; letter-spacing:.1em; color:var(--amber); }
#menu-overlay .pf-xpbar{ border-radius:2px; height:4px; width:340px; } #menu-overlay .pf-xpfill{ transition:width 1.2s var(--ease); }
#menu-overlay .pf-wallet{ font-family:var(--ui); font-size:11px; letter-spacing:0; color:var(--muted-2); }
#menu-overlay .pf-sol{ font-family:var(--ui); font-size:15px; font-weight:600; letter-spacing:0; padding:9px 16px; border:1px solid rgba(153,69,255,.4); border-radius:999px; background:rgba(255,255,255,.04); clip-path:none; }
#menu-overlay .pf-stats{ gap:10px; margin-top:22px; }
#menu-overlay .pf-stat{ position:relative; padding:16px 8px 14px; box-shadow:none; animation:kinUp .5s var(--ease) both; animation-delay:calc(var(--i,0) * 45ms + .1s); transition:transform .3s var(--spring), border-color .2s, background .2s; }
#menu-overlay .pf-stat:hover{ transform:translateY(-3px); border-color:var(--line-2); background:var(--surface-2); }
#menu-overlay .pf-stat:nth-child(2){ --i:1 } #menu-overlay .pf-stat:nth-child(3){ --i:2 } #menu-overlay .pf-stat:nth-child(4){ --i:3 } #menu-overlay .pf-stat:nth-child(5){ --i:4 } #menu-overlay .pf-stat:nth-child(6){ --i:5 } #menu-overlay .pf-stat:nth-child(7){ --i:6 } #menu-overlay .pf-stat:nth-child(8){ --i:7 }
#menu-overlay .pf-stat-v{ font-family:var(--num); font-size:28px; font-weight:700; letter-spacing:0; } #menu-overlay .pf-stat-k{ font-family:var(--ui); font-size:10px; letter-spacing:.12em; }
#menu-overlay .pf-earn{ position:relative; overflow:hidden; margin-top:12px; padding:20px 24px; background:linear-gradient(160deg, rgba(240,168,60,.14), var(--surface) 60%); border-color:rgba(240,168,60,.3); box-shadow:0 20px 50px rgba(0,0,0,.3); animation:kinUp .6s var(--ease) both .3s; }
#menu-overlay .pf-earn::before{ display:none; }
#menu-overlay .pf-earn-lbl{ font-family:var(--ui); font-size:10.5px; letter-spacing:.14em; } #menu-overlay .pf-earn-bal{ font-family:var(--num); font-size:44px; font-weight:700; letter-spacing:0; } #menu-overlay .pf-earn-sym{ font-family:var(--ui); font-size:15px; letter-spacing:0; font-weight:600; } #menu-overlay .pf-earn-claimed{ font-family:var(--ui); font-size:11px; letter-spacing:.06em; }
#menu-overlay .pf-earn-go{ position:relative; overflow:hidden; font-size:14px; padding:14px 34px; } #menu-overlay .pf-earn-go::after{ display:none; }
#menu-overlay .pf-earn-msg{ font-family:var(--ui); font-size:11.5px; letter-spacing:0; }
#menu-overlay .pf-col-h{ font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; border-bottom-color:var(--line); }
#menu-overlay .pf-col-h::before{ display:none; }
#menu-overlay .pf-rename{ clip-path:none; animation:kinPop .35s var(--spring) both; } #menu-overlay .pf-rename-h{ font-family:var(--ui); font-size:13px; letter-spacing:.02em; }
#menu-overlay .pf-emb-preview{ border-radius:14px; clip-path:none; } #menu-overlay .pf-emb-ov{ font-family:var(--disp); font-size:13px; letter-spacing:.1em; } #menu-overlay .pf-emb-up-t{ font-family:var(--disp); font-size:18px; letter-spacing:0; font-weight:600; text-transform:uppercase; }
#menu-overlay .pf-card-tab{ font-size:11px; padding:6px 13px; letter-spacing:.08em; text-transform:uppercase; } #menu-overlay .pf-card-tab.on{ background:rgba(255,255,255,.12); color:#fff; border-color:transparent; }
#menu-overlay .pf-card{ border-radius:12px; clip-path:none; transition:transform .3s var(--spring), border-color .2s, box-shadow .3s; } #menu-overlay .pf-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.4); }
#menu-overlay .pf-card-nm{ font-family:var(--ui); font-size:11px; letter-spacing:.06em; padding:6px 10px; } #menu-overlay .pf-card.on{ box-shadow:0 0 0 2px rgba(240,168,60,.6), 0 0 24px rgba(240,168,60,.25); }
#menu-overlay .pf-card-price, #menu-overlay .pf-res, #menu-overlay .pf-card-cs{ border-radius:999px; font-family:var(--ui); letter-spacing:.06em; clip-path:none; }
#menu-overlay .pf-card-cs{ position:absolute; top:6px; right:6px; z-index:3; padding:2px 8px; font-size:10px; color:#1c1304; background:var(--amber); }
#menu-overlay .pf-card.locked{ cursor:pointer; } #menu-overlay .pf-card.locked::before{ content:''; position:absolute; inset:0; z-index:1; background:rgba(6,7,10,.5); }
#menu-overlay .pf-game, #menu-overlay .pf-friend{ border-radius:var(--r-s); clip-path:none; font-family:var(--ui); letter-spacing:0; box-shadow:none; backdrop-filter:none; }
#menu-overlay .pf-game-map{ font-size:13px; } #menu-overlay .pf-game-mode{ font-family:var(--ui); font-size:10.5px; letter-spacing:.08em; }
/* admin */
#menu-overlay .adm-tabs{ gap:3px; padding:3px; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:var(--r-s); clip-path:none; }
#menu-overlay .adm-tab{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:7px 14px; border:0; border-radius:8px; }
#menu-overlay .adm-tab.on{ background:rgba(255,255,255,.12); color:#fff; }
#menu-overlay #adm-body{ padding:20px 24px 28px; }
#menu-overlay .adm-sub{ font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; margin:26px 0 10px; font-weight:600; }
#menu-overlay .adm-sub::before{ display:none; }
#menu-overlay .adm-card{ position:relative; padding:18px 18px 16px; box-shadow:none; animation:kinUp .5s var(--ease) both; animation-delay:calc(var(--i,0) * 60ms); }
#menu-overlay .adm-card:nth-child(2){ --i:1 } #menu-overlay .adm-card:nth-child(3){ --i:2 } #menu-overlay .adm-card:nth-child(4){ --i:3 } #menu-overlay .adm-card:nth-child(5){ --i:4 } #menu-overlay .adm-card:nth-child(6){ --i:5 }
#menu-overlay .adm-card-v{ font-family:var(--num); font-size:30px; font-weight:700; letter-spacing:0; } #menu-overlay .adm-card-l{ font-family:var(--ui); font-size:10px; letter-spacing:.12em; }
#menu-overlay .adm-card.pool{ background:linear-gradient(160deg, rgba(240,168,60,.16), var(--surface) 60%); border-color:rgba(240,168,60,.35); } #menu-overlay .adm-card.pool::before{ display:none; }
#menu-overlay .adm-online-row, #menu-overlay .adm-sd, #menu-overlay .adm-formbox, #menu-overlay .adm-sd-inline, #menu-overlay .adm-tablewrap, #menu-overlay .adm-hint, #menu-overlay .adm-bug{ box-shadow:none; backdrop-filter:none; border-radius:var(--r-s); }
#menu-overlay .adm-online-name{ font-family:var(--ui); font-size:13px; letter-spacing:0; } #menu-overlay .adm-online-dot{ box-shadow:0 0 0 0 rgba(95,207,106,.6); animation:kinPingG 1.8s ease-out infinite; }
#menu-overlay .adm-table th{ font-family:var(--ui); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; background:rgba(10,12,15,.8); } #menu-overlay .adm-table td{ font-family:var(--ui); font-size:13px; letter-spacing:0; }
#menu-overlay .adm-sd{ position:relative; padding:14px 16px; } #menu-overlay .adm-sd::before{ display:none; }
#menu-overlay .adm-sd-top{ font-family:var(--disp); font-size:18px; font-weight:600; letter-spacing:0; } #menu-overlay .adm-sd-meta, #menu-overlay .adm-sd-win{ font-family:var(--disp); font-size:15px; letter-spacing:0; }
#menu-overlay .adm-st{ border-radius:999px; font-family:var(--ui); font-size:10px; letter-spacing:.08em; clip-path:none; }
#menu-overlay .adm-mini{ font-size:11px; padding:5px 12px; } #menu-overlay .adm-segb{ font-size:12px; border-radius:8px; } #menu-overlay .adm-segb.on{ background:rgba(255,255,255,.12); color:#fff; border-color:transparent; }
#menu-overlay .adm-form-t{ font-family:var(--ui); font-size:12px; letter-spacing:.1em; text-transform:uppercase; } #menu-overlay .adm-fg label{ font-family:var(--ui); font-size:12px; letter-spacing:0; }
#menu-overlay .adm-split-cell{ border-radius:var(--r-s); clip-path:none; }
#menu-overlay .adm-gate{ margin-top:8vh; padding:32px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line-2); clip-path:none; position:relative; animation:kinPop .4s var(--spring) both; }
#menu-overlay .adm-gate::before{ display:none; } #menu-overlay .adm-gate-t{ font-family:var(--disp); font-size:27px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
#menu-overlay .adm-hint{ font-family:var(--ui); font-size:12.5px; letter-spacing:0; } #menu-overlay .adm-err{ font-family:var(--ui); letter-spacing:0; }

/* ============================================================ CASES ============================================================ */
#menu-overlay.cases #panel-cases{ display:flex; } #menu-overlay.cases .showdown, #menu-overlay.cases .right{ display:none; } #menu-overlay #panel-cases{ position:absolute; }
#menu-overlay .cs{ padding:26px 28px 40px; }
#menu-overlay .cs-hero{ margin-bottom:22px; }
#menu-overlay .cs-hero-t{ font-family:var(--disp); font-size:37px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#fff; line-height:1.1; animation:kinWordUp .7s var(--ease) both; }
#menu-overlay .cs-hero-s{ margin-top:8px; font-size:14px; color:var(--muted); animation:kinFade .6s var(--ease) both .2s; max-width:640px; line-height:1.5; }
#menu-overlay .cs-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
#menu-overlay .cs-tier{ position:relative; padding:24px 22px 20px; text-align:center; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.35); backdrop-filter:blur(18px); clip-path:none; overflow:hidden;
  animation:kinUp .7s var(--ease) both; animation-delay:calc(var(--i,0) * 100ms + .15s); transition:transform .35s var(--spring), border-color .3s, box-shadow .3s; }
#menu-overlay .cs-tier::before{ display:none; }
#menu-overlay .cs-tier:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--tc) 55%, transparent); box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 50px color-mix(in srgb, var(--tc) 22%, transparent); }
#menu-overlay .cs-tier-art{ position:relative; height:130px; display:flex; align-items:center; justify-content:center; }
#menu-overlay .cs-tier-glow{ position:absolute; inset:-20px; background:radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tc) 40%, transparent), transparent 60%); animation:kinBreathe 3.4s ease-in-out infinite; pointer-events:none; }
@keyframes kinBreathe{ 0%,100%{ opacity:.55; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.04); } }
#menu-overlay .cs-case{ position:relative; width:112px; height:84px; z-index:1; filter:drop-shadow(0 14px 20px rgba(0,0,0,.55)); transition:transform .4s var(--spring); }
#menu-overlay .cs-tier:hover .cs-case{ transform:translateY(-4px) rotate(-2deg); }
#menu-overlay .cs-case-body{ position:absolute; left:0; right:0; bottom:0; height:60px; border-radius:10px; background:linear-gradient(180deg, #2b3038, #171a20); border:1px solid rgba(255,255,255,.14); clip-path:none; }
#menu-overlay .cs-case-body i{ position:absolute; left:50%; top:22px; width:24px; height:14px; margin-left:-12px; border-radius:3px; background:var(--tc); box-shadow:0 0 16px var(--tc); }
#menu-overlay .cs-case-body::before, #menu-overlay .cs-case-body::after{ content:''; position:absolute; top:10px; bottom:10px; width:2px; border-radius:1px; background:var(--tc); opacity:.7; }
#menu-overlay .cs-case-body::before{ left:16px; } #menu-overlay .cs-case-body::after{ right:16px; }
#menu-overlay .cs-case-lid{ position:absolute; left:6px; right:6px; top:0; height:30px; border-radius:8px 8px 0 0; background:linear-gradient(180deg, #3b4149, #1d2128); border:1px solid rgba(255,255,255,.16); border-bottom:2px solid var(--tc); clip-path:none; transform-origin:50% 100%; transition:transform .5s var(--spring); }
#menu-overlay .cs-tier:hover .cs-case-lid{ transform:translateY(-10px) rotateX(30deg); }
#menu-overlay .cs-case.mini{ width:56px; height:42px; filter:none; } #menu-overlay .cs-case.mini .cs-case-body{ height:30px; border-radius:6px; } #menu-overlay .cs-case.mini .cs-case-lid{ height:15px; border-radius:5px 5px 0 0; }
#menu-overlay .cs-case.mini .cs-case-body i{ width:12px; height:7px; margin-left:-6px; top:11px; } #menu-overlay .cs-case.mini .cs-case-body::before{ left:8px; } #menu-overlay .cs-case.mini .cs-case-body::after{ right:8px; }
#menu-overlay .cs-tier-n{ margin-top:10px; font-family:var(--disp); font-size:21px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:#fff; }
#menu-overlay .cs-tier-p{ font-family:var(--num); font-size:36px; font-weight:700; letter-spacing:0; color:var(--tc); line-height:1; margin-top:6px; }
#menu-overlay .cs-tier-p span{ display:block; font-family:var(--ui); font-size:12px; letter-spacing:0; color:var(--muted); font-weight:500; margin-top:6px; text-transform:none; }
#menu-overlay .cs-odds{ margin:18px auto 0; max-width:230px; display:flex; flex-direction:column; gap:6px; }
#menu-overlay .cs-odd{ display:flex; align-items:center; gap:9px; font-family:var(--ui); font-size:12px; letter-spacing:0; color:var(--muted); text-transform:capitalize; }
#menu-overlay .cs-odd i{ width:7px; height:7px; border-radius:50%; clip-path:none; flex:0 0 auto; } #menu-overlay .cs-odd b{ margin-left:auto; color:var(--text); font-variant-numeric:tabular-nums; font-weight:600; }
#menu-overlay .cs-buy{ position:relative; overflow:hidden; margin-top:18px; padding:13px 0; cursor:pointer; font-size:14px; color:#0b0d10; background:var(--tc); clip-path:none; border-radius:var(--r-s); box-shadow:0 10px 26px color-mix(in srgb, var(--tc) 30%, transparent); }
#menu-overlay .cs-buy:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 16px 36px color-mix(in srgb, var(--tc) 42%, transparent); } #menu-overlay .cs-buy::after{ display:none; }
#menu-overlay .cs-have{ margin-top:10px; font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tc); }
#menu-overlay .cs-sec{ margin-top:28px; }
#menu-overlay .cs-cnt{ margin-left:8px; padding:1px 8px; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-size:11px; clip-path:none; }
#menu-overlay .cs-invs{ display:flex; flex-wrap:wrap; gap:10px; }
#menu-overlay .cs-inv{ display:flex; align-items:center; gap:14px; padding:10px 14px 10px 12px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); clip-path:none; animation:kinLeft .5s var(--ease) both; transition:transform .3s var(--spring), border-color .2s; }
#menu-overlay .cs-inv:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--tc) 45%, transparent); }
#menu-overlay .cs-inv-n{ font-family:var(--disp); font-size:16px; font-weight:600; letter-spacing:0; text-transform:uppercase; }
#menu-overlay .cs-open{ padding:8px 18px; font-size:12px; clip-path:none; animation:none; }
#menu-overlay .cs-vis-gun{ width:100%; max-height:70%; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(0,0,0,.7)); }
#menu-overlay .cs-vis-card{ width:100%; aspect-ratio:3/1; border-radius:8px; clip-path:none; }
#menu-overlay .cs-vis-camo{ width:72px; height:72px; border-radius:50%; border:2px solid rgba(255,255,255,.14); box-shadow:inset 0 0 20px rgba(0,0,0,.6), 0 10px 20px rgba(0,0,0,.5); }
#menu-overlay .cs-vis-coin{ width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%, #ffe08a, #e08f25 60%, #8a5410); box-shadow:0 0 24px rgba(240,168,60,.5), inset 0 -6px 12px rgba(0,0,0,.35); font-size:32px; color:#4a2c05; font-weight:800; animation:kinSpinY 3s linear infinite; }
@keyframes kinSpinY{ from{ transform:rotateY(0); } to{ transform:rotateY(360deg); } }
#menu-overlay .cs-reelwrap:empty{ display:none; }
#menu-overlay .cs-stage{ margin-top:28px; animation:kinPanel .4s var(--ease) both; }
#menu-overlay .cs-stage-h{ font-family:var(--disp); font-size:18px; font-weight:600; letter-spacing:0; text-transform:uppercase; color:#fff; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
#menu-overlay .cs-stage-h span{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); padding:3px 9px; border:1px solid rgba(240,168,60,.45); border-radius:999px; animation:none; }
#menu-overlay .cs-reel{ position:relative; height:196px; overflow:hidden; border-radius:16px; background:rgba(0,0,0,.35); border:1px solid var(--line); clip-path:none; }
#menu-overlay .cs-reel::before, #menu-overlay .cs-reel::after{ content:''; position:absolute; top:0; bottom:0; width:160px; z-index:2; pointer-events:none; }
#menu-overlay .cs-reel::before{ left:0; background:linear-gradient(90deg, rgba(10,12,15,.96), transparent); } #menu-overlay .cs-reel::after{ right:0; background:linear-gradient(-90deg, rgba(10,12,15,.96), transparent); }
#menu-overlay .cs-marker{ position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--amber); z-index:3; box-shadow:0 0 16px rgba(240,168,60,.8); border-radius:1px; }
#menu-overlay .cs-marker::before, #menu-overlay .cs-marker::after{ content:''; position:absolute; left:50%; width:0; height:0; margin-left:-7px; border-left:7px solid transparent; border-right:7px solid transparent; }
#menu-overlay .cs-marker::before{ top:0; border-top:9px solid var(--amber); } #menu-overlay .cs-marker::after{ bottom:0; border-bottom:9px solid var(--amber); }
#menu-overlay .cs-strip{ position:absolute; left:0; top:13px; display:flex; gap:8px; will-change:transform; }
#menu-overlay .cs-tile{ position:relative; flex:0 0 156px; width:156px; height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:12px; box-sizing:border-box; border-radius:12px; background:linear-gradient(180deg, rgba(24,27,33,.96), rgba(12,14,18,.96)); border:1px solid var(--line); border-bottom:3px solid var(--rc); clip-path:none; }
#menu-overlay .cs-tile b{ font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:0; color:#cfd3d8; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; text-transform:capitalize; }
#menu-overlay .cs-tile.win{ box-shadow:0 0 0 2px var(--rc), 0 0 34px var(--rc); animation:kinWinPop .5s var(--spring); } @keyframes kinWinPop{ 50%{ transform:scale(1.06); } }
#menu-overlay .cs-tile .cs-vis-camo, #menu-overlay .cs-tile .cs-vis-coin{ width:64px; height:64px; }
#menu-overlay .cs-reveal{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; border-radius:18px; background:rgba(6,7,10,.84); backdrop-filter:blur(14px); opacity:0; transition:opacity .4s; overflow:hidden; clip-path:none; }
#menu-overlay .cs-reveal.on{ opacity:1; }
#menu-overlay .cs-rv-glow{ position:absolute; left:50%; top:50%; width:900px; height:900px; margin:-450px 0 0 -450px; background:radial-gradient(circle, color-mix(in srgb, var(--rc) 45%, transparent), transparent 55%); animation:kinBreathe 2.8s ease-in-out infinite; pointer-events:none; }
#menu-overlay .cs-rv-rays{ display:none; }
#menu-overlay .cs-rv-sparks{ position:absolute; inset:0; pointer-events:none; }
#menu-overlay .cs-rv-sparks i{ position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; background:var(--rc); box-shadow:0 0 10px var(--rc); animation:kinSpark 1.8s var(--ease) infinite; }
#menu-overlay .cs-rv-sparks i:nth-child(1){--k:1} #menu-overlay .cs-rv-sparks i:nth-child(2){--k:2} #menu-overlay .cs-rv-sparks i:nth-child(3){--k:3} #menu-overlay .cs-rv-sparks i:nth-child(4){--k:4} #menu-overlay .cs-rv-sparks i:nth-child(5){--k:5} #menu-overlay .cs-rv-sparks i:nth-child(6){--k:6} #menu-overlay .cs-rv-sparks i:nth-child(7){--k:7} #menu-overlay .cs-rv-sparks i:nth-child(8){--k:8} #menu-overlay .cs-rv-sparks i:nth-child(9){--k:9}
#menu-overlay .cs-rv-sparks i:nth-child(10){--k:10} #menu-overlay .cs-rv-sparks i:nth-child(11){--k:11} #menu-overlay .cs-rv-sparks i:nth-child(12){--k:12} #menu-overlay .cs-rv-sparks i:nth-child(13){--k:13} #menu-overlay .cs-rv-sparks i:nth-child(14){--k:14} #menu-overlay .cs-rv-sparks i:nth-child(15){--k:15} #menu-overlay .cs-rv-sparks i:nth-child(16){--k:16} #menu-overlay .cs-rv-sparks i:nth-child(17){--k:17} #menu-overlay .cs-rv-sparks i:nth-child(18){--k:18}
#menu-overlay .cs-rv-sparks i{ --a:calc(var(--k, 0) * 20deg); } #menu-overlay .cs-rv-sparks i:nth-child(even){ animation-delay:.6s; }
@keyframes kinSpark{ from{ transform:rotate(var(--a)) translateX(80px) scale(1); opacity:.9; } to{ transform:rotate(var(--a)) translateX(420px) scale(.2); opacity:0; } }
#menu-overlay .cs-rv-box{ position:relative; text-align:center; width:420px; max-width:90%; padding:32px 32px 28px; border-radius:20px; background:var(--surface-2); border:1px solid color-mix(in srgb, var(--rc) 50%, transparent); box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 60px color-mix(in srgb, var(--rc) 25%, transparent); clip-path:none; animation:kinRvIn .6s var(--spring) both .1s; }
@keyframes kinRvIn{ from{ transform:scale(.7); opacity:0; } }
#menu-overlay .cs-rv-rar{ font-family:var(--ui); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--rc); font-weight:600; }
#menu-overlay .cs-rv-vis{ height:150px; display:flex; align-items:center; justify-content:center; margin:16px 0; }
#menu-overlay .cs-rv-vis .cs-vis-gun{ max-height:130px; } #menu-overlay .cs-rv-vis .cs-vis-camo, #menu-overlay .cs-rv-vis .cs-vis-coin{ width:120px; height:120px; } #menu-overlay .cs-rv-vis .cs-vis-coin{ font-size:54px; }
#menu-overlay .cs-rv-name{ font-family:var(--disp); font-size:34px; font-weight:700; letter-spacing:.03em; color:#fff; line-height:1.1; text-transform:uppercase; }
#menu-overlay .cs-rv-sub{ margin-top:10px; font-size:13px; color:var(--muted); }
#menu-overlay .cs-rv-btn{ margin-top:22px; padding:13px 0; cursor:pointer; font-size:14px; color:#0b0d10; background:var(--rc); clip-path:none; box-shadow:0 12px 30px color-mix(in srgb, var(--rc) 35%, transparent); }
#menu-overlay .cs-rv-btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
#menu-overlay .cs-reveal.legendary .cs-rv-box{ animation:kinRvIn .6s var(--spring) both .1s, kinShake .5s ease-in-out .7s 2; }
@keyframes kinShake{ 0%,100%{ transform:none; } 25%{ transform:translate(-3px, 2px); } 75%{ transform:translate(3px, -2px); } }
#menu-overlay .cs-drops{ display:flex; gap:10px; flex-wrap:wrap; }
#menu-overlay .cs-drop{ width:120px; height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px; box-sizing:border-box; border-radius:12px; background:var(--surface); border:1px solid var(--line); border-bottom:3px solid var(--rc); clip-path:none; }
#menu-overlay .cs-drop b{ font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:0; color:#cfd3d8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; text-transform:capitalize; }
#menu-overlay .cs-drop .cs-vis-camo, #menu-overlay .cs-drop .cs-vis-coin{ width:44px; height:44px; font-size:18px; }
.cs-modal{ position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; background:rgba(6,7,10,.72); backdrop-filter:blur(8px); font-family:'Rajdhani',system-ui,sans-serif; }
.cs-modal.on{ display:flex; }
.cs-modal .cs-modal-box{ width:360px; max-width:90vw; padding:26px 26px 24px; text-align:center; border-radius:20px; background:#15181e; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 80px rgba(0,0,0,.6); clip-path:none; animation:kinPop .35s cubic-bezier(.34,1.3,.4,1) both; }
.cs-modal .cs-modal-case{ height:100px; display:flex; align-items:center; justify-content:center; }
.cs-modal .cs-case{ position:relative; width:112px; height:84px; } .cs-modal .cs-case-body{ position:absolute; left:0; right:0; bottom:0; height:60px; border-radius:10px; background:linear-gradient(180deg,#2b3038,#171a20); border:1px solid rgba(255,255,255,.14); }
.cs-modal .cs-case-body i{ position:absolute; left:50%; top:22px; width:24px; height:14px; margin-left:-12px; border-radius:3px; background:var(--tc); box-shadow:0 0 16px var(--tc); }
.cs-modal .cs-case-lid{ position:absolute; left:6px; right:6px; top:0; height:30px; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#3b4149,#1d2128); border:1px solid rgba(255,255,255,.16); border-bottom:2px solid var(--tc); }
.cs-modal .cbm-h{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8d93a0; margin-bottom:10px; } .cs-modal .cbm-name{ margin-top:10px; font-size:24px; font-weight:700; letter-spacing:.03em; color:#fff; text-transform:uppercase; }
.cs-modal .cbm-sub{ margin-top:6px; font-size:12px; color:#8d93a0; } .cs-modal .cbm-price{ font-family:'Teko','Rajdhani',sans-serif; font-size:40px; font-weight:700; color:#f0a83c; line-height:1; margin-top:4px; }
.cs-modal .cbm-ops{ margin-top:4px; font-size:12px; color:#8d93a0; } .cs-modal .cbm-msg{ min-height:15px; margin-top:10px; font-size:12px; font-weight:500; color:#d6912f; }
.cs-modal .cbm-btns{ display:flex; gap:8px; margin-top:18px; } .cs-modal .cbm-btn{ flex:1; padding:12px 0; cursor:pointer; font-size:13px; font-weight:600; border-radius:10px; transition:transform .25s cubic-bezier(.34,1.3,.4,1), background .2s; }
.cs-modal .cbm-btn.cancel{ background:rgba(255,255,255,.06); color:#c2c8cf; border:1px solid rgba(255,255,255,.12); } .cs-modal .cbm-btn.yes{ background:#f0a83c; color:#1c1304; } .cs-modal .cbm-btn:hover{ transform:translateY(-1px); }
.cs-modal .cbm-btn.busy{ pointer-events:none; } .cs-modal .cbm-spin{ display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-2px; border:2px solid rgba(28,19,4,.35); border-top-color:#1c1304; border-radius:50%; animation:cbmSpin .7s linear infinite; }
#menu-overlay .brk-chip.locked{ opacity:.55; position:relative; }
#menu-overlay .brk-chip .brk-case{ font-style:normal; margin-left:6px; padding:1px 7px; border-radius:999px; font-family:var(--ui); font-size:9.5px; letter-spacing:.08em; color:#1c1304; background:var(--amber); clip-path:none; }
@media (max-width:1100px){ #menu-overlay .cs-tiers{ grid-template-columns:1fr; } }

/* ============================================================ CONNECTION BANNER ============================================================ */
#conn-banner{ border-radius:0 0 14px 14px; border:1px solid rgba(255,90,77,.45); border-top:0; padding:10px 16px 11px 18px; gap:12px; clip-path:none; background:rgba(28,10,10,.96); backdrop-filter:blur(14px); font-family:var(--ui); font-size:13px; font-weight:500; letter-spacing:0; }
#conn-banner::before{ display:none; }
#conn-banner.ok{ border-color:rgba(58,209,122,.5); background:rgba(8,26,12,.96); }
#conn-banner .cb-retry{ border-radius:999px; clip-path:none; font-family:var(--ui); font-size:12px; letter-spacing:0; padding:5px 14px; }

@media (prefers-reduced-motion:reduce){ #menu-overlay *, #menu-overlay *::before, #menu-overlay *::after, #intro-overlay *, #intro-overlay *::before, #intro-overlay *::after{ animation:none !important; transition:none !important; } }
/* home column fades away under any open panel (no amber bleed through the glass) */
#menu-overlay .left{ transition:opacity .35s var(--ease); }
#menu-overlay.servers .left, #menu-overlay.leaderboard .left, #menu-overlay.profile .left, #menu-overlay.barracks .left, #menu-overlay.admin .left, #menu-overlay.challenges .left, #menu-overlay.host .left, #menu-overlay.cases .left, #menu-overlay.options .left{ opacity:0; pointer-events:none; }
/* ---------- guest play ---------- */
#intro-overlay .guest-row{ display:flex; align-items:center; gap:12px; margin:16px 0 12px; color:var(--muted-2); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
#intro-overlay .guest-row::before, #intro-overlay .guest-row::after{ content:''; flex:1; height:1px; background:var(--line); }
#intro-overlay .btn.ghost{ margin-top:0; background:rgba(255,255,255,.06); color:var(--text); border:1px solid var(--line-2); box-shadow:none; }
#intro-overlay .btn.ghost:hover{ background:rgba(255,255,255,.1); box-shadow:none; }
#intro-overlay .guest-hint{ margin-top:10px; font-size:12px; line-height:1.45; color:var(--muted); }
#menu-overlay .pf-link{ display:inline-block; margin-top:8px; background:var(--amber); color:#1a1206; border:0; font-weight:600; }
#menu-overlay .pf-link:hover{ background:var(--amber-2); color:#1a1206; }
/* start screen: logo carries it — no stacked slogan */
#intro-overlay #login-view .tagline{ display:none; }
#intro-overlay #login-view .logo{ height:clamp(120px, 20vh, 170px); margin:6px 0 10px; opacity:1; transform:none; animation:kinIn .8s var(--ease) both .2s; }
#intro-overlay #login-view .hero{ margin-top:14px; font-size:17px; max-width:520px; }
/* ============================================================ WAGER MATCHES ============================================================ */
#menu-overlay .wg{ padding:26px 28px 40px; }
#menu-overlay .wg-hero{ margin-bottom:18px; }
#menu-overlay .wg-hero-t{ font-family:var(--disp); font-size:38px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#fff; line-height:1; animation:kinWordUp .7s var(--ease) both; }
#menu-overlay .wg-hero-s{ margin-top:8px; font-size:14px; color:var(--muted); max-width:720px; line-height:1.5; animation:kinFade .6s var(--ease) both .2s; }
#menu-overlay .wg-form{ margin:0 0 22px; padding:20px 22px 18px; border-radius:var(--r); background:var(--surface-2); border:1px solid rgba(240,168,60,.35); box-shadow:0 20px 50px rgba(0,0,0,.35); animation:kinPop .35s var(--spring) both; }
#menu-overlay .wg-form-t{ font-family:var(--disp); font-size:22px; letter-spacing:.03em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
#menu-overlay .wg-grid{ display:grid; grid-template-columns:2fr 1.2fr .8fr 1.2fr; gap:12px; }
#menu-overlay .wg-grid label{ display:flex; flex-direction:column; gap:6px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
#menu-overlay .wg-grid .hinput, #menu-overlay .wg-grid .hsel{ height:42px; }
#menu-overlay .wg-summary{ margin-top:14px; font-size:14px; color:var(--text); } #menu-overlay .wg-summary b{ color:var(--amber); font-family:var(--num); font-size:18px; letter-spacing:0; }
#menu-overlay .wg-summary span{ display:block; margin-top:4px; font-size:12px; color:var(--muted); }
#menu-overlay .wg-form-acts{ display:flex; gap:8px; margin-top:16px; }
#menu-overlay .wg-msg{ min-height:16px; margin-top:10px; font-size:12px; font-weight:600; color:#d6912f; }
#menu-overlay .wg-list{ display:flex; flex-direction:column; gap:10px; }
#menu-overlay .wg-card{ position:relative; display:flex; align-items:center; gap:22px; padding:16px 20px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.3); backdrop-filter:blur(16px);
  animation:kinUp .55s var(--ease) both; animation-delay:calc(var(--i,0) * 60ms); transition:transform .3s var(--spring), border-color .2s; }
#menu-overlay .wg-card:hover{ transform:translateY(-2px); border-color:var(--line-2); }
#menu-overlay .wg-card.mine{ border-color:rgba(240,168,60,.45); box-shadow:inset 3px 0 0 var(--amber), 0 20px 50px rgba(0,0,0,.3); }
#menu-overlay .wg-main{ flex:1; min-width:0; }
#menu-overlay .wg-name{ font-family:var(--disp); font-size:24px; letter-spacing:.03em; text-transform:uppercase; color:#fff; display:flex; align-items:center; gap:10px; line-height:1; }
#menu-overlay .wg-live, #menu-overlay .wg-ready{ font-family:var(--ui); font-size:10px; letter-spacing:.12em; padding:3px 9px; border-radius:999px; background:rgba(255,90,77,.16); color:#ff8d82; }
#menu-overlay .wg-ready{ background:rgba(58,209,122,.16); color:#7ee6a6; }
#menu-overlay .wg-meta{ margin-top:6px; font-size:12.5px; color:var(--muted); }
#menu-overlay .wg-players{ display:flex; align-items:center; gap:4px; margin-top:10px; }
#menu-overlay .wg-players i{ width:14px; height:6px; border-radius:3px; background:rgba(255,255,255,.1); } #menu-overlay .wg-players i.on{ background:var(--ok); box-shadow:0 0 8px rgba(58,209,122,.6); }
#menu-overlay .wg-players span{ margin-left:8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
#menu-overlay .wg-pot{ text-align:right; min-width:170px; }
#menu-overlay .wg-pot b{ display:block; font-family:var(--num); font-size:30px; font-weight:700; color:var(--amber); line-height:1; }
#menu-overlay .wg-pot span{ display:block; font-size:10px; letter-spacing:.14em; color:var(--muted); margin-top:2px; }
#menu-overlay .wg-pot em{ display:block; font-style:normal; font-size:11px; color:var(--muted-2); margin-top:6px; }
#menu-overlay .wg-join{ padding:12px 22px; border-radius:var(--r-s); cursor:pointer; font-family:var(--ui); font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:#1a1206; background:var(--amber); box-shadow:0 8px 24px rgba(240,168,60,.25); white-space:nowrap; transition:transform .25s var(--spring), background .2s; }
#menu-overlay .wg-join:hover{ transform:translateY(-2px); background:var(--amber-2); }
#menu-overlay .wg-join.mine{ background:rgba(255,255,255,.08); color:#fff; border:1px solid var(--line-2); box-shadow:none; }
#menu-overlay .wg-closed{ padding:12px 18px; border-radius:var(--r-s); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
#menu-overlay .wg-cancel{ position:absolute; top:10px; right:12px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted); cursor:pointer; border:1px solid var(--line); }
#menu-overlay .wg-cancel:hover{ color:#ff8d82; border-color:rgba(255,90,77,.5); }
#menu-overlay .wg-empty{ font-size:14px; color:var(--muted); padding:14px 0; }
#menu-overlay .wg-recents{ display:flex; flex-direction:column; gap:6px; }
#menu-overlay .wg-recent{ display:flex; align-items:center; gap:16px; padding:10px 14px; border-radius:var(--r-s); background:rgba(255,255,255,.03); border:1px solid var(--line); font-size:13px; }
#menu-overlay .wg-recent b{ font-family:var(--disp); font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:#fff; min-width:160px; } #menu-overlay .wg-recent span{ color:var(--amber); font-weight:700; min-width:110px; } #menu-overlay .wg-recent em{ font-style:normal; color:var(--muted); }
#menu-overlay .lb-wager{ background:linear-gradient(160deg, rgba(240,168,60,.14), var(--surface) 60%); border:1px solid rgba(240,168,60,.35); color:var(--text); padding:12px 16px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
#menu-overlay .lb-wager b{ color:var(--amber); } #menu-overlay .lbw-tag{ color:#1a1206; background:var(--amber); padding:2px 8px; border-radius:999px; margin-right:8px; letter-spacing:.1em; }
@media (max-width:1100px){ #menu-overlay .wg-grid{ grid-template-columns:1fr 1fr; } #menu-overlay .wg-card{ flex-wrap:wrap; } }
/* ---------- wager: journey strip on the list + create wizard ---------- */
#menu-overlay .wg-steps-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 24px; }
#menu-overlay .wg-steps-strip div{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--r-s); background:rgba(255,255,255,.03); border:1px solid var(--line); font-size:13px; color:var(--text); }
#menu-overlay .wg-steps-strip b{ width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--amber); color:#1a1206; font-family:var(--num); font-size:15px; flex:0 0 auto; }
#menu-overlay .wg-thumb{ width:96px; height:64px; border-radius:10px; background-size:cover; background-position:center; flex:0 0 auto; filter:saturate(.8); border:1px solid var(--line); }
#menu-overlay .wz{ max-width:860px; animation:kinPop .35s var(--spring) both; }
#menu-overlay .wz-bar{ display:flex; align-items:center; margin:4px 0 28px; }
#menu-overlay .wz-step{ display:flex; align-items:center; gap:10px; cursor:default; }
#menu-overlay .wz-step i{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-family:var(--num); font-size:17px; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line-2); transition:all .3s var(--ease); }
#menu-overlay .wz-step span{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
#menu-overlay .wz-step.on i{ background:var(--amber); color:#1a1206; border-color:transparent; box-shadow:0 0 18px rgba(240,168,60,.5); } #menu-overlay .wz-step.on span{ color:#fff; }
#menu-overlay .wz-step.done{ cursor:pointer; } #menu-overlay .wz-step.done i{ background:rgba(58,209,122,.18); color:#7ee6a6; border-color:rgba(58,209,122,.4); }
#menu-overlay .wz-line{ flex:1; height:1px; background:var(--line-2); margin:0 14px; } #menu-overlay .wz-line.done{ background:rgba(58,209,122,.5); }
#menu-overlay .wz-body{ animation:kinRight .4s var(--ease) both; }
#menu-overlay .wz-h{ font-family:var(--disp); font-size:34px; letter-spacing:.03em; text-transform:uppercase; color:#fff; line-height:1; }
#menu-overlay .wz-s{ margin:8px 0 22px; font-size:14px; color:var(--muted); max-width:620px; line-height:1.5; }
#menu-overlay .wz-field{ display:flex; flex-direction:column; gap:8px; max-width:460px; margin-bottom:22px; }
#menu-overlay .wz-field span, #menu-overlay .wz-label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
#menu-overlay .wz-field .hinput{ height:48px; font-size:17px; }
#menu-overlay .wz-label{ margin-bottom:10px; display:block; }
#menu-overlay .wz-maps{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
#menu-overlay .wz-map{ position:relative; height:150px; border-radius:var(--r); background-size:cover; background-position:center; border:2px solid var(--line); cursor:pointer; overflow:hidden; display:flex; align-items:flex-end; transition:transform .3s var(--spring), border-color .2s, box-shadow .3s; filter:saturate(.8); }
#menu-overlay .wz-map::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(6,7,10,.9)); }
#menu-overlay .wz-map b{ position:relative; padding:12px 14px; font-family:var(--disp); font-size:22px; letter-spacing:.03em; text-transform:uppercase; color:#fff; }
#menu-overlay .wz-map i{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; display:none; align-items:center; justify-content:center; font-style:normal; background:var(--amber); color:#1a1206; font-weight:800; }
#menu-overlay .wz-map:hover{ transform:translateY(-3px); border-color:var(--line-2); filter:none; }
#menu-overlay .wz-map.on{ border-color:var(--amber); box-shadow:0 0 0 3px rgba(240,168,60,.2), 0 16px 34px rgba(0,0,0,.4); filter:none; } #menu-overlay .wz-map.on i{ display:flex; }
#menu-overlay .wz-chips{ display:flex; flex-wrap:wrap; gap:10px; }
#menu-overlay .wz-chip{ min-width:96px; padding:12px 16px; border-radius:var(--r-s); background:rgba(255,255,255,.04); border:1px solid var(--line-2); cursor:pointer; text-align:center; transition:transform .3s var(--spring), border-color .2s, background .2s; }
#menu-overlay .wz-chip b{ display:block; font-family:var(--num); font-size:28px; line-height:1; color:#fff; } #menu-overlay .wz-chip span{ display:block; margin-top:4px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
#menu-overlay .wz-chip:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.25); }
#menu-overlay .wz-chip.on{ background:rgba(240,168,60,.14); border-color:var(--amber); box-shadow:0 0 0 3px rgba(240,168,60,.15); } #menu-overlay .wz-chip.on b{ color:var(--amber); }
#menu-overlay .wz-note{ margin-top:18px; font-size:14px; color:var(--text); } #menu-overlay .wz-note b{ color:var(--amber); }
#menu-overlay .wz-custom{ margin-top:18px; }
#menu-overlay .wz-pot{ margin-top:22px; padding:16px 20px; border-radius:var(--r); background:linear-gradient(160deg, rgba(240,168,60,.14), var(--surface) 60%); border:1px solid rgba(240,168,60,.3); display:flex; flex-direction:column; gap:2px; }
#menu-overlay .wz-pot span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } #menu-overlay .wz-pot b{ font-family:var(--num); font-size:40px; line-height:1; color:var(--amber); } #menu-overlay .wz-pot em{ font-style:normal; font-size:13px; color:var(--text); margin-top:4px; }
#menu-overlay .wz-review{ display:flex; gap:20px; padding:18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line-2); }
#menu-overlay .wz-rv-map{ width:200px; height:150px; border-radius:12px; background-size:cover; background-position:center; flex:0 0 auto; }
#menu-overlay .wz-rv-rows{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; align-content:center; }
#menu-overlay .wz-rv-rows div{ display:flex; flex-direction:column; gap:3px; } #menu-overlay .wz-rv-rows span{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } #menu-overlay .wz-rv-rows b{ font-size:15px; color:#fff; font-weight:600; } #menu-overlay .wz-rv-rows b.amber{ color:var(--amber); font-family:var(--num); font-size:24px; }
#menu-overlay .wz-timeline{ margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
#menu-overlay .wz-timeline div{ padding:12px 14px; border-radius:var(--r-s); background:rgba(255,255,255,.03); border:1px solid var(--line); font-size:13px; color:var(--text); line-height:1.4; }
#menu-overlay .wz-timeline i{ display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; font-style:normal; font-family:var(--num); background:var(--amber); color:#1a1206; margin-right:8px; vertical-align:-5px; }
#menu-overlay .wz-timeline b{ color:var(--amber); } #menu-overlay .wz-timeline em{ font-style:normal; color:var(--muted); }
#menu-overlay .wz-nav{ display:flex; justify-content:space-between; gap:10px; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
#menu-overlay .wz-nav .opt-btn{ min-width:150px; text-align:center; }
@media (max-width:1100px){ #menu-overlay .wg-steps-strip, #menu-overlay .wz-timeline{ grid-template-columns:1fr 1fr; } #menu-overlay .wz-maps{ grid-template-columns:1fr; } #menu-overlay .wz-review{ flex-direction:column; } }
/* ============================================================ LOADOUT (barracks) ============================================================ */
#menu-overlay .brk{ display:flex; height:100%; }
#menu-overlay .brk-classes{ width:170px; padding:14px 12px; border-right:1px solid var(--line); gap:6px; position:relative; }
#menu-overlay .brk-class{ position:relative; padding:12px 14px; border-radius:var(--r-s); font-family:var(--disp); font-size:19px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border:1px solid transparent; transition:color .2s, background .25s, transform .3s var(--spring), padding-left .3s var(--ease); }
#menu-overlay .brk-class:hover{ color:#fff; background:rgba(255,255,255,.05); padding-left:18px; }
#menu-overlay .brk-class.on{ color:#fff; background:rgba(240,168,60,.12); border-color:rgba(240,168,60,.4); box-shadow:inset 3px 0 0 var(--amber), 0 10px 26px rgba(0,0,0,.3); }
#menu-overlay .brk-defbadge{ border-radius:999px; font-family:var(--ui); font-size:9px; letter-spacing:.1em; padding:2px 7px; }
#menu-overlay .brk-slots{ padding:18px 22px; scrollbar-width:thin; }
#menu-overlay .brk-classbar{ margin-bottom:18px; }
#menu-overlay .brk-cname{ height:46px; border-radius:var(--r-s); background:rgba(0,0,0,.28); border:1px solid var(--line-2); font-family:var(--disp); font-size:24px; letter-spacing:.04em; text-transform:uppercase; color:#fff; padding:0 16px; transition:border-color .2s, box-shadow .2s; }
#menu-overlay .brk-cname:focus{ border-color:var(--amber); box-shadow:0 0 0 4px rgba(240,168,60,.14); }
#menu-overlay .brk-setdef{ height:46px; border-radius:var(--r-s); font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line-2); background:rgba(255,255,255,.05); color:var(--text); transition:transform .3s var(--spring), background .2s; }
#menu-overlay .brk-setdef:hover{ transform:translateY(-1px); background:rgba(240,168,60,.14); }
#menu-overlay .brk-setdef.on{ background:var(--ok); border-color:transparent; color:#06210b; }
#menu-overlay .brk-slot{ margin-bottom:18px; padding:14px 16px 12px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); transition:border-color .2s; animation:kinUp .6s var(--ease) both; animation-delay:calc(var(--i,0) * 70ms + 60ms); }
#menu-overlay .brk-slot:nth-of-type(2){ --i:1 } #menu-overlay .brk-slot:nth-of-type(3){ --i:2 } #menu-overlay .brk-slot:nth-of-type(4){ --i:3 } #menu-overlay .brk-slot:nth-of-type(5){ --i:4 }
#menu-overlay .brk-slot:hover{ border-color:var(--line-2); }
#menu-overlay .brk-slot .sh{ border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px; }
#menu-overlay .brk-slot .sl{ font-family:var(--ui); font-size:10.5px; letter-spacing:.14em; color:var(--muted); font-weight:600; }
#menu-overlay .brk-slot .cur{ font-family:var(--disp); font-size:22px; letter-spacing:.04em; text-transform:uppercase; color:#fff; display:flex; align-items:center; gap:10px; }
#menu-overlay .brk-slot .cur img{ width:64px; height:32px; margin:0; filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); animation:kinPop .35s var(--spring) both; }
#menu-overlay .brk-chips{ gap:8px; }
#menu-overlay .brk-chip{ position:relative; padding:9px 14px 9px 10px; border-radius:var(--r-s); font-family:var(--ui); font-weight:600; font-size:13px; letter-spacing:0; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text); overflow:hidden;
  transition:transform .3s var(--spring), border-color .2s, background .2s, box-shadow .3s; }
#menu-overlay .brk-chip img{ width:46px; height:26px; transition:transform .35s var(--spring); }
#menu-overlay .brk-chip:hover{ transform:translateY(-3px); border-color:var(--line-2); background:rgba(255,255,255,.07); color:#fff; box-shadow:0 12px 26px rgba(0,0,0,.35); }
#menu-overlay .brk-chip:hover img{ transform:translateX(3px) rotate(-4deg) scale(1.1); }
#menu-overlay .brk-chip.on{ background:rgba(240,168,60,.14); border-color:var(--amber); color:#fff; box-shadow:0 0 0 3px rgba(240,168,60,.14), 0 10px 26px rgba(240,168,60,.15); }
#menu-overlay .brk-chip.on::after{ content:''; position:absolute; top:-40%; bottom:-40%; width:26px; left:-40px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-22deg); animation:kinShine 3.2s var(--ease) infinite; }
@keyframes kinShine{ 0%,60%{ left:-40px; } 100%{ left:calc(100% + 40px); } }
#menu-overlay .brk-chip.locked{ opacity:.5; filter:grayscale(.6); } #menu-overlay .brk-chip.locked:hover{ opacity:.8; filter:none; }
/* customizer column */
#menu-overlay .brk-custom{ width:640px; flex:0 0 640px; border-left:1px solid var(--line); scrollbar-width:thin; }
#menu-overlay .cz-stick{ background:linear-gradient(180deg, rgba(10,12,15,.98), rgba(10,12,15,.92)); border-bottom:1px solid var(--line); padding:18px 24px 14px; backdrop-filter:blur(14px); }
#menu-overlay .cz-prev-stage{ border-radius:var(--r); border:1px solid var(--line); background:radial-gradient(ellipse at 50% 60%, rgba(240,168,60,.14), rgba(8,9,12,.2) 55%, rgba(8,9,12,.6)); height:320px; }
#menu-overlay .cz-prev-stage::before{ content:''; position:absolute; left:50%; top:50%; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%; border:1px dashed rgba(240,168,60,.25); animation:kinSpin 40s linear infinite; pointer-events:none; }
#menu-overlay .cz-prev-stage::after{ content:''; position:absolute; left:50%; top:50%; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; border:1px solid rgba(255,255,255,.06); animation:kinSpin 26s linear infinite reverse; pointer-events:none; }
#menu-overlay .cz-prev-img{ filter:drop-shadow(0 24px 30px rgba(0,0,0,.7)); animation:kinFloat 5s ease-in-out infinite; }
@keyframes kinFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
#menu-overlay .cz-prev-stage.grabbing .cz-prev-img{ animation:none; }
#menu-overlay .cz-prev-stage.live .cz-prev-tint{ display:none; } /* live Unity frames carry the real camo */
#menu-overlay .cz-badges span{ border-radius:999px; font-family:var(--ui); font-size:10px; letter-spacing:.08em; background:rgba(8,9,12,.85); border:1px solid rgba(240,168,60,.4); animation:kinPop .3s var(--spring) both; }
#menu-overlay .cz-spin-hint{ font-family:var(--ui); font-size:10px; letter-spacing:.16em; color:var(--muted-2); }
#menu-overlay .cz-prev-name{ font-family:var(--disp); font-size:30px; letter-spacing:.04em; text-transform:uppercase; color:#fff; margin-top:12px; animation:kinWordUp .5s var(--ease) both; }
#menu-overlay .cz-tabs{ margin-top:12px; gap:3px; padding:3px; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:var(--r-s); }
#menu-overlay .cz-tab{ border:0 !important; border-radius:8px; font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:9px 0; background:transparent; transition:background .2s, color .2s; }
#menu-overlay .cz-tab.on{ background:rgba(255,255,255,.1); color:#fff; }
#menu-overlay .cz-pane{ padding:18px 24px 26px; animation:kinRight .35s var(--ease) both; }
#menu-overlay .cz-head{ font-family:var(--ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } #menu-overlay .cz-head span{ font-family:var(--disp); font-size:18px; letter-spacing:.03em; color:var(--amber); }
#menu-overlay .cz-row{ margin-bottom:14px; padding:12px 14px; border-radius:var(--r-s); background:rgba(255,255,255,.025); border:1px solid var(--line); animation:kinUp .5s var(--ease) both; animation-delay:calc(var(--i,0) * 60ms); }
#menu-overlay .cz-row:nth-child(2){ --i:1 } #menu-overlay .cz-row:nth-child(3){ --i:2 } #menu-overlay .cz-row:nth-child(4){ --i:3 } #menu-overlay .cz-row:nth-child(5){ --i:4 }
#menu-overlay .cz-label{ font-family:var(--ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
#menu-overlay .cz-chip{ border-radius:var(--r-s); font-family:var(--ui); font-weight:600; font-size:12.5px; letter-spacing:0; padding:8px 12px; background:rgba(255,255,255,.04); border:1px solid var(--line); transition:transform .3s var(--spring), border-color .2s, background .2s; }
#menu-overlay .cz-chip i{ font-size:10px; color:var(--muted); }
#menu-overlay .cz-chip:hover{ transform:translateY(-2px); border-color:var(--line-2); color:#fff; }
#menu-overlay .cz-chip.on{ background:rgba(240,168,60,.14); border-color:var(--amber); color:#fff; box-shadow:0 0 0 3px rgba(240,168,60,.12); } #menu-overlay .cz-chip.on i{ color:var(--amber); }
#menu-overlay .cz-camos{ gap:10px; }
#menu-overlay .cz-camo{ width:108px; flex-direction:column; align-items:center; gap:8px; padding:12px 8px 10px; border-radius:var(--r-s); background:rgba(255,255,255,.04); border:1px solid var(--line); transition:transform .3s var(--spring), border-color .2s, box-shadow .3s; animation:kinPop .4s var(--spring) both; animation-delay:calc(var(--i,0) * 25ms); }
#menu-overlay .cz-camo:hover{ transform:translateY(-3px); border-color:var(--line-2); }
#menu-overlay .cz-camo.on{ border-color:var(--amber); background:rgba(240,168,60,.12); box-shadow:0 0 0 3px rgba(240,168,60,.14), 0 10px 26px rgba(240,168,60,.15); }
#menu-overlay .cz-sw{ width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.12); box-shadow:inset 0 0 14px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.5); transition:transform .3s var(--spring); }
#menu-overlay .cz-camo:hover .cz-sw{ transform:scale(1.1); }
#menu-overlay .cz-camo b{ font-family:var(--ui); font-size:11px; letter-spacing:.04em; text-align:center; color:var(--text); }
#menu-overlay .cz-camo b .cz-live{ border-radius:999px; padding:0 5px; font-size:8px; }
#menu-overlay .cz-camo .cz-lock{ position:absolute; top:6px; right:6px; margin:0; border-radius:999px; font-family:var(--ui); font-size:9px; padding:1px 6px; }
@media (max-width:1280px){ #menu-overlay .brk-custom{ width:560px; flex-basis:560px; } #menu-overlay .cz-prev-stage{ height:260px; } }
/* ============================================================ OPTIONS popup ============================================================ */
#menu-overlay .opt-popup{ background:rgba(6,7,10,.7); backdrop-filter:blur(10px); animation:kinFade .25s var(--ease) both; }
#menu-overlay .opt-card{ width:640px; max-height:86vh; border-radius:20px; background:var(--surface-2); border:1px solid var(--line-2); box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset; backdrop-filter:blur(20px); animation:kinPop .4s var(--spring) both; scrollbar-width:thin; }
#menu-overlay .opt-head{ padding:20px 26px 16px; border-bottom:1px solid var(--line); }
#menu-overlay .opt-head .t{ font-family:var(--disp); font-size:30px; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
#menu-overlay .opt-body{ padding:6px 26px 14px; }
#menu-overlay .opt-row{ position:relative; padding:14px 0; gap:18px; border-bottom:1px solid var(--line); animation:kinUp .5s var(--ease) both; animation-delay:calc(var(--i,0) * 45ms + .1s); }
#menu-overlay .opt-row:nth-child(2){ --i:1 } #menu-overlay .opt-row:nth-child(3){ --i:2 } #menu-overlay .opt-row:nth-child(4){ --i:3 } #menu-overlay .opt-row:nth-child(5){ --i:4 } #menu-overlay .opt-row:nth-child(6){ --i:5 } #menu-overlay .opt-row:nth-child(7){ --i:6 } #menu-overlay .opt-row:nth-child(8){ --i:7 }
#menu-overlay .opt-row:last-child{ border-bottom:0; }
/* group headings */
#menu-overlay .opt-row:nth-child(1), #menu-overlay .opt-row:nth-child(3), #menu-overlay .opt-row:nth-child(5), #menu-overlay .opt-row:nth-child(6){ margin-top:22px; }
#menu-overlay .opt-row:nth-child(1)::before, #menu-overlay .opt-row:nth-child(3)::before, #menu-overlay .opt-row:nth-child(5)::before, #menu-overlay .opt-row:nth-child(6)::before{ position:absolute; top:-16px; left:0; font-family:var(--ui); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); font-weight:700; }
#menu-overlay .opt-row:nth-child(1)::before{ content:'Controls'; } #menu-overlay .opt-row:nth-child(3)::before{ content:'Display'; } #menu-overlay .opt-row:nth-child(5)::before{ content:'Audio'; } #menu-overlay .opt-row:nth-child(6)::before{ content:'Graphics'; }
#menu-overlay .opt-row .lbl{ width:170px; font-family:var(--ui); font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--text); text-transform:none; }
#menu-overlay .opt-row .val{ width:56px; font-family:var(--num); font-size:22px; letter-spacing:0; color:var(--amber); font-variant-numeric:tabular-nums; }
#menu-overlay input[type=range]{ height:6px; border-radius:3px; background:linear-gradient(90deg, var(--amber) var(--p,50%), rgba(255,255,255,.1) var(--p,50%)); transition:filter .2s; }
#menu-overlay input[type=range]:hover{ filter:brightness(1.1); }
#menu-overlay input[type=range]::-webkit-slider-thumb{ width:20px; height:20px; background:#fff; border:3px solid var(--amber); box-shadow:0 0 0 4px rgba(240,168,60,.15), 0 4px 12px rgba(0,0,0,.5); transition:transform .25s var(--spring), box-shadow .25s; }
#menu-overlay input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.15); box-shadow:0 0 0 7px rgba(240,168,60,.2), 0 4px 12px rgba(0,0,0,.5); }
#menu-overlay input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.25); }
#menu-overlay .seg{ gap:3px; padding:3px; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:var(--r-s); }
#menu-overlay .seg button{ border:0; border-radius:8px; background:transparent; font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.1em; color:var(--muted); padding:9px 0; transition:background .2s, color .2s, transform .25s var(--spring); }
#menu-overlay .seg button:hover{ color:#fff; }
#menu-overlay .seg button.on{ background:var(--amber); color:#1a1206; box-shadow:0 6px 16px rgba(240,168,60,.3); }
#menu-overlay .tgl{ width:52px; height:28px; border-radius:14px; background:rgba(255,255,255,.1); border:1px solid var(--line-2); margin-left:auto; transition:background .25s, border-color .25s; }
#menu-overlay .tgl::after{ top:3px; left:3px; width:20px; height:20px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.5); transition:left .3s var(--spring), background .25s; }
#menu-overlay .tgl.on{ background:var(--amber); border-color:transparent; box-shadow:0 0 16px rgba(240,168,60,.35); }
#menu-overlay .tgl.on::after{ left:27px; background:#1a1206; }
#menu-overlay .opt-foot{ padding:16px 26px 20px; border-top:1px solid var(--line); gap:10px; }
#menu-overlay .opt-foot .opt-btn{ min-width:130px; text-align:center; }
/* ============================================================ CASES v2: loot showcase ============================================================ */
#menu-overlay .cs-tier{ padding:18px 18px 18px; text-align:left; }
#menu-overlay .cs-tier-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#menu-overlay .cs-tier-n{ margin:0; font-family:var(--disp); font-size:26px; letter-spacing:.04em; text-transform:uppercase; color:#fff; }
#menu-overlay .cs-tier-info{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-style:italic; font-size:14px; color:var(--muted); border:1px solid var(--line-2); cursor:pointer; transition:all .2s; }
#menu-overlay .cs-tier-info:hover, #menu-overlay .cs-tier-info.on{ color:#1a1206; background:var(--tc); border-color:transparent; }
#menu-overlay .cs-stage2{ position:relative; height:220px; border-radius:14px; overflow:hidden; background:radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--tc) 22%, transparent), rgba(8,9,12,.4) 60%, rgba(8,9,12,.85)); border:1px solid var(--line); }
#menu-overlay .cs-stage2-glow{ position:absolute; left:50%; top:60%; width:260px; height:260px; margin:-130px 0 0 -130px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--tc) 45%, transparent), transparent 60%); animation:kinBreathe 3.2s ease-in-out infinite; pointer-events:none; }
#menu-overlay .cs-stage2-rim{ position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, transparent, var(--tc), transparent); opacity:.8; }
#menu-overlay .cs-slide{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; opacity:0; transform:translateY(14px) scale(.96); transition:opacity .6s var(--ease), transform .7s var(--spring); pointer-events:none; }
#menu-overlay .cs-slide.on{ opacity:1; transform:none; }
#menu-overlay .cs-slide-vis{ height:120px; width:80%; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 24px color-mix(in srgb, var(--rc) 55%, transparent)); }
#menu-overlay .cs-slide-vis .cs-vis-gun{ max-height:110px; } #menu-overlay .cs-slide-vis .cs-vis-card{ width:100%; max-width:230px; } #menu-overlay .cs-slide-vis .cs-vis-camo, #menu-overlay .cs-slide-vis .cs-vis-coin{ width:96px; height:96px; }
#menu-overlay .cs-slide-n{ font-family:var(--disp); font-size:22px; letter-spacing:.04em; text-transform:uppercase; color:#fff; line-height:1; }
#menu-overlay .cs-slide-r{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--rc); font-weight:700; }
#menu-overlay .cs-rar-dots{ display:flex; align-items:center; gap:5px; margin:14px 2px 0; }
#menu-overlay .cs-rar-dots i{ width:22px; height:5px; border-radius:3px; }
#menu-overlay .cs-rar-dots span{ margin-left:auto; font-size:11px; letter-spacing:.04em; color:var(--muted); }
#menu-overlay .cs-tier .cs-odds{ margin:14px 0 0; max-width:none; padding:12px 14px; border-radius:var(--r-s); background:rgba(0,0,0,.25); border:1px solid var(--line); animation:kinPop .3s var(--spring) both; }
#menu-overlay .cs-tier .cs-buy{ margin-top:14px; padding:12px 0 10px; display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1; }
#menu-overlay .cs-tier .cs-buy b{ font-family:var(--disp); font-size:22px; letter-spacing:.06em; font-weight:700; }
#menu-overlay .cs-tier .cs-buy span{ font-family:var(--ui); font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.8; }
#menu-overlay .cs-tier .cs-have{ text-align:center; }
#menu-overlay .cs-tier-art, #menu-overlay .cs-tier-p{ display:none; }
/* ============================================================ CASES v3: real case art + preview ============================================================ */
#menu-overlay .cs-stage2, #menu-overlay .cs-tier-top, #menu-overlay .cs-tier .cs-odds{ display:none !important; }
#menu-overlay .cs-tier{ text-align:center; padding:20px 20px 18px; }
#menu-overlay .cs-tier .cs-tier-n{ margin:0 0 6px; }
#menu-overlay .cs-art{ position:relative; height:230px; display:flex; align-items:center; justify-content:center; overflow:visible; }
#menu-overlay .cs-art img{ position:relative; z-index:1; width:112%; max-width:none; height:auto; transform:translateY(6px); filter:drop-shadow(0 26px 30px rgba(0,0,0,.65)); transition:transform .5s var(--spring); animation:kinFloat 6s ease-in-out infinite; pointer-events:none; }
#menu-overlay .cs-tier:hover .cs-art img{ transform:translateY(-6px) scale(1.04) rotate(-1.5deg); }
#menu-overlay .cs-art-glow{ position:absolute; left:50%; top:55%; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--tc) 40%, transparent), transparent 62%); animation:kinBreathe 3.4s ease-in-out infinite; pointer-events:none; }
#menu-overlay .cs-art-floor{ position:absolute; left:15%; right:15%; bottom:8px; height:2px; background:linear-gradient(90deg, transparent, var(--tc), transparent); opacity:.7; }
#menu-overlay .cs-rar-dots{ justify-content:center; margin-top:8px; }
#menu-overlay .cs-rar-dots span{ margin-left:8px; }
#menu-overlay .cs-tier-acts{ display:grid; grid-template-columns:1fr 1.6fr; gap:8px; margin-top:16px; }
#menu-overlay .cs-preview{ padding:12px 0; border-radius:var(--r-s); cursor:pointer; font-family:var(--ui); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--line-2); transition:transform .3s var(--spring), background .2s; }
#menu-overlay .cs-preview:hover{ transform:translateY(-2px); background:rgba(255,255,255,.1); }
#menu-overlay .cs-tier .cs-buy{ margin-top:0; }
/* preview modal */
.cs-modal.wide .cs-modal-box{ width:900px; max-width:94vw; max-height:88vh; padding:0; text-align:left; display:flex; flex-direction:column; overflow:hidden; }
.cs-modal .cs-pv{ display:flex; flex-direction:column; max-height:88vh; }
.cs-modal .cs-pv-top{ position:relative; display:flex; align-items:center; gap:18px; padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(90deg, rgba(240,168,60,.08), transparent 60%); }
.cs-modal .cs-pv-top img{ width:150px; height:auto; filter:drop-shadow(0 12px 18px rgba(0,0,0,.6)); }
.cs-modal .cs-pv-t{ font-family:'Teko','Rajdhani',sans-serif; font-size:34px; letter-spacing:.04em; text-transform:uppercase; color:#fff; line-height:1; }
.cs-modal .cs-pv-s{ margin-top:6px; font-size:13px; color:#8d93a0; }
.cs-modal .cs-pv-x{ position:absolute; top:14px; right:16px; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#8d93a0; border:1px solid rgba(255,255,255,.12); transition:all .25s; }
.cs-modal .cs-pv-x:hover{ color:#fff; transform:rotate(90deg); }
.cs-modal .cs-pv-body{ overflow:auto; padding:6px 24px 18px; scrollbar-width:thin; }
.cs-modal .cs-pv-group{ margin-top:18px; animation:kinUp .5s cubic-bezier(.2,.8,.2,1) both; }
.cs-modal .cs-pv-h{ display:flex; align-items:baseline; gap:12px; padding-bottom:8px; margin-bottom:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.cs-modal .cs-pv-h span{ font-family:'Teko','Rajdhani',sans-serif; font-size:22px; letter-spacing:.06em; color:var(--rc); }
.cs-modal .cs-pv-h em{ font-style:normal; font-size:12px; color:#8d93a0; }
.cs-modal .cs-pv-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.cs-modal .cs-pv-tile{ position:relative; height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px; box-sizing:border-box; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-bottom:3px solid var(--rc); transition:transform .3s cubic-bezier(.34,1.3,.4,1), background .2s; }
.cs-modal .cs-pv-tile:hover{ transform:translateY(-3px); background:rgba(255,255,255,.07); }
.cs-modal .cs-pv-tile b{ font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; color:#cfd3d8; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cs-modal .cs-pv-tile i{ position:absolute; top:6px; right:6px; font-style:normal; font-size:9px; letter-spacing:.1em; padding:1px 6px; border-radius:999px; background:#3ad17a; color:#06210b; font-weight:700; }
.cs-modal .cs-pv-tile.owned{ opacity:.75; }
.cs-modal .cs-pv-tile .cs-vis-gun{ max-height:52px; } .cs-modal .cs-pv-tile .cs-vis-card{ max-width:110px; } .cs-modal .cs-pv-tile .cs-vis-camo, .cs-modal .cs-pv-tile .cs-vis-coin{ width:48px; height:48px; font-size:20px; }
.cs-modal .cs-pv-foot{ display:flex; justify-content:flex-end; gap:8px; padding:14px 24px 18px; border-top:1px solid rgba(255,255,255,.08); }
.cs-modal .cs-pv-foot .cbm-btn{ flex:0 0 auto; min-width:150px; padding:12px 22px; }
#menu-overlay .cs-vis-gun, #menu-overlay .cs-vis-card, #menu-overlay .cs-vis-camo, #menu-overlay .cs-vis-coin{ }
.cs-modal .cs-vis-gun{ width:100%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)); }
.cs-modal .cs-vis-card{ width:100%; aspect-ratio:3/1; border-radius:6px; background-size:cover; }
.cs-modal .cs-vis-camo{ border-radius:50%; border:2px solid rgba(255,255,255,.14); box-shadow:inset 0 0 14px rgba(0,0,0,.6); }
.cs-modal .cs-vis-coin{ border-radius:50%; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%, #ffe08a, #e08f25 60%, #8a5410); color:#4a2c05; font-weight:800; }
@media (max-width:1100px){ .cs-modal .cs-pv-grid{ grid-template-columns:repeat(3,1fr); } }

/* animated camo swatches inside the case modal (menu.css scopes them to #menu-overlay) */
.cs-modal .cz-anim-holo{ background:linear-gradient(120deg,#ff4d6d,#ffd93d,#6bff8f,#4dd2ff,#b06bff,#ff4d6d); background-size:300% 100%; animation:czHolo 3s linear infinite; }
.cs-modal .cz-anim-cyberhex{ background:radial-gradient(circle at 50% 50%, #14e8e8, #0a2a2a 70%); animation:czPulse 1.4s ease-in-out infinite; }
.cs-modal .cz-anim-plasma{ background:linear-gradient(120deg,#ff2a00,#ff8a00,#ffd000,#ff5a00); background-size:300% 100%; animation:czHolo 4s linear infinite; }
.cs-modal .cz-anim-darkmatter{ background:radial-gradient(circle at 40% 40%, #8a4dff, #14082a 75%); background-size:200% 200%; animation:czDrift 6s ease-in-out infinite; }
.cs-modal .cz-anim-obsidianflux{ background:linear-gradient(115deg,#0a0a12 40%,#7a86a6 50%,#0a0a12 60%); background-size:300% 100%; animation:czHolo 5s linear infinite; }
#menu-overlay .cs-inv-img{ width:72px; height:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
/* ============================================================ CASE OPEN ANIMATION ============================================================ */
#menu-overlay .cs-openstage{ position:relative; margin-top:24px; height:460px; border-radius:18px; overflow:hidden; background:radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--tc) 18%, transparent), rgba(8,9,12,.5) 55%, rgba(8,9,12,.9)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; animation:kinPanel .4s var(--ease) both; }
#menu-overlay .cs-os-glow{ position:absolute; left:50%; top:60%; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--tc) 45%, transparent), transparent 60%); opacity:.5; transition:opacity .6s, transform .8s var(--ease); pointer-events:none; }
#menu-overlay .cs-openstage.opening .cs-os-glow{ opacity:.9; transform:scale(1.3); }
#menu-overlay .cs-openstage.open .cs-os-glow{ opacity:1; transform:scale(2); background:radial-gradient(circle, color-mix(in srgb, var(--rc) 55%, transparent), transparent 60%); }
#menu-overlay .cs-os-rays{ position:absolute; left:50%; top:55%; width:1100px; height:1100px; margin:-550px 0 0 -550px; background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 20%, transparent) 0 5deg, transparent 5deg 16deg); -webkit-mask-image:radial-gradient(circle, #000 15%, transparent 55%); mask-image:radial-gradient(circle, #000 15%, transparent 55%); opacity:0; transition:opacity .5s; animation:kinSpin 24s linear infinite; pointer-events:none; }
#menu-overlay .cs-openstage.open .cs-os-rays{ opacity:.9; }
#menu-overlay .cs-os-case{ position:relative; z-index:2; width:520px; max-width:80%; height:auto; filter:drop-shadow(0 30px 34px rgba(0,0,0,.7)); transform:translateY(30px); }
#menu-overlay .cs-openstage.shake .cs-os-case{ animation:kinCaseShake .9s ease-in-out; }
@keyframes kinCaseShake{ 0%,100%{ transform:translateY(30px) rotate(0); } 15%{ transform:translateY(28px) rotate(-1.5deg); } 30%{ transform:translateY(31px) rotate(1.5deg); } 45%{ transform:translateY(27px) rotate(-2deg); } 60%{ transform:translateY(32px) rotate(2deg); } 75%{ transform:translateY(29px) rotate(-1deg); } 90%{ transform:translateY(30px) rotate(1deg); } }
#menu-overlay .cs-openstage.open .cs-os-case{ animation:kinCaseSettle .6s var(--spring) both; }
@keyframes kinCaseSettle{ from{ transform:translateY(30px) scale(1.04); } to{ transform:translateY(46px) scale(.96); filter:drop-shadow(0 30px 34px rgba(0,0,0,.7)) brightness(.75); } }
#menu-overlay .cs-os-burst{ position:absolute; left:50%; top:48%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; background:radial-gradient(circle, #fff, color-mix(in srgb, var(--rc) 80%, #fff) 30%, transparent 70%); opacity:0; z-index:3; pointer-events:none; }
#menu-overlay .cs-openstage.open .cs-os-burst{ animation:kinBurst .9s ease-out both; }
@keyframes kinBurst{ 0%{ opacity:0; transform:scale(.2); } 15%{ opacity:1; transform:scale(6); } 100%{ opacity:0; transform:scale(22); } }
#menu-overlay .cs-os-item{ position:absolute; left:50%; top:46%; z-index:4; width:300px; height:190px; margin-left:-150px; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(90px) scale(.5); filter:drop-shadow(0 0 30px color-mix(in srgb, var(--rc) 70%, transparent)); pointer-events:none; }
#menu-overlay .cs-openstage.rise .cs-os-item{ animation:kinRise 1.1s var(--spring) both; }
@keyframes kinRise{ 0%{ opacity:0; transform:translateY(90px) scale(.5); } 60%{ opacity:1; } 100%{ opacity:1; transform:translateY(-120px) scale(1.15); } }
#menu-overlay .cs-os-item .cs-vis-gun{ max-height:160px; } #menu-overlay .cs-os-item .cs-vis-card{ width:280px; } #menu-overlay .cs-os-item .cs-vis-camo, #menu-overlay .cs-os-item .cs-vis-coin{ width:140px; height:140px; font-size:60px; }
#menu-overlay .cs-os-label{ position:absolute; left:0; right:0; bottom:16px; text-align:center; font-family:var(--disp); font-size:22px; letter-spacing:.06em; text-transform:uppercase; color:#fff; z-index:5; display:flex; align-items:center; justify-content:center; gap:10px; }
#menu-overlay .cs-os-label span{ font-family:var(--ui); font-size:10px; letter-spacing:.14em; padding:3px 9px; border:1px solid rgba(240,168,60,.45); border-radius:999px; color:var(--amber); }
#menu-overlay .cs-openstage.open .cs-os-label{ opacity:0; transition:opacity .4s; }

/* LOADOUT before the game download finishes: placeholder + sync pill */
#menu-overlay .brk.waiting > :not(.brk-wait){ display:none; }
#menu-overlay .brk-wait{ flex:1; width:100%; min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; animation:kinIn .5s var(--spring) both; }
#menu-overlay .brk-wait-ring{ width:56px; height:56px; border-radius:50%; border:2px solid rgba(255,255,255,.08); border-top-color:var(--amber); animation:kinSpin 1.1s linear infinite; margin-bottom:8px; }
#menu-overlay .brk-wait-t{ font-family:var(--display); font-size:30px; letter-spacing:.06em; line-height:1; }
#menu-overlay .brk-wait-s{ font-family:var(--ui); font-size:12px; letter-spacing:.18em; color:var(--amber); }
#menu-overlay .brk-wait-n{ font-family:var(--ui); font-size:12px; color:var(--muted-2); max-width:360px; }
#menu-overlay .brk-sync{ display:flex; align-items:center; gap:8px; margin-left:auto; margin-right:14px; padding:6px 12px; border-radius:999px; border:1px solid rgba(240,168,60,.35); background:rgba(240,168,60,.08); font-family:var(--ui); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); }
#menu-overlay .brk-sync[hidden]{ display:none; }
#menu-overlay .brk-sync i{ width:7px; height:7px; border-radius:50%; background:var(--amber); animation:kinPulse 1.2s ease-in-out infinite; }
@keyframes kinPulse{ 0%,100%{ opacity:.35; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }
#menu-overlay .top-load{ display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid rgba(240,168,60,.35); background:rgba(240,168,60,.08); font-family:var(--ui); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); white-space:nowrap; }
#menu-overlay .top-load i{ width:7px; height:7px; border-radius:50%; background:var(--amber); animation:kinPulse 1.2s ease-in-out infinite; }
#menu-overlay .top-load.bad{ border-color:rgba(255,80,80,.5); background:rgba(255,80,80,.1); color:#ff7a7a; cursor:pointer; }
#menu-overlay .top-load.bad i{ background:#ff7a7a; }
#menu-overlay .brk-group{ flex-basis:100%; font-family:var(--ui); font-size:10px; letter-spacing:.2em; color:var(--muted-2); margin:6px 0 -2px; padding-top:6px; border-top:1px solid rgba(255,255,255,.05); }
#menu-overlay .brk-group:first-child{ border-top:0; padding-top:0; margin-top:0; }
#menu-overlay.gr #lb-loadout-card{ display:none; }
#menu-overlay.gr .lb-card:has(#lb-loadout-card){ display:none; }
#menu-overlay.gr .tab[data-tab="barracks"]{ opacity:.35; pointer-events:none; }
/* wager escrow deposit panel */
#menu-overlay .wg-dep{ max-width:640px; margin:10px auto 0; padding:26px 28px; border-radius:var(--r); border:1px solid var(--line); background:rgba(12,14,18,.7); animation:kinIn .45s var(--spring) both; }
#menu-overlay .wg-dep-t{ font-family:var(--display); font-size:34px; letter-spacing:.04em; line-height:1; }
#menu-overlay .wg-dep-s{ font-family:var(--ui); font-size:12px; letter-spacing:.14em; color:var(--muted-2); margin-top:4px; text-transform:uppercase; }
#menu-overlay .wg-dep-amt{ display:flex; align-items:baseline; gap:8px; margin:18px 0 14px; } #menu-overlay .wg-dep-amt b{ font-family:var(--display); font-size:56px; line-height:1; color:var(--amber); } #menu-overlay .wg-dep-amt span{ font-family:var(--ui); letter-spacing:.14em; color:var(--muted-2); }
#menu-overlay .wg-dep-l{ font-family:var(--ui); font-size:10px; letter-spacing:.2em; color:var(--muted-2); margin-bottom:6px; }
#menu-overlay .wg-dep-addr{ font-family:ui-monospace,Menlo,monospace; font-size:13px; padding:12px 14px; border-radius:8px; border:1px dashed rgba(240,168,60,.45); background:rgba(240,168,60,.06); color:#fff; word-break:break-all; cursor:copy; }
#menu-overlay .wg-dep-n{ font-family:var(--ui); font-size:12.5px; color:var(--muted); line-height:1.5; margin:12px 0 16px; }
#menu-overlay .wg-dep-btns{ display:flex; gap:10px; flex-wrap:wrap; }
#menu-overlay .wg-dep-status{ display:flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--ui); font-size:11px; letter-spacing:.14em; color:var(--amber); }
#menu-overlay .wg-dep-status i{ width:7px; height:7px; border-radius:50%; background:var(--amber); animation:kinPulse 1.2s ease-in-out infinite; }
#menu-overlay .wg-dep-status em{ font-style:normal; color:var(--muted-2); margin-left:auto; }
#menu-overlay .wg-dep-status.ok{ color:#5fcf6a; } #menu-overlay .wg-dep-status.ok i{ background:#5fcf6a; animation:none; }
#menu-overlay .wg-dep-status.err{ color:#ff6a5a; } #menu-overlay .wg-dep-status.err i{ background:#ff6a5a; animation:none; }
#menu-overlay .wg-btn{ padding:12px 18px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.04); font-family:var(--ui); font-size:12px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:transform .15s var(--spring), background .2s; user-select:none; }
#menu-overlay .wg-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.08); }
#menu-overlay .wg-btn.primary{ background:var(--amber); color:#111; border-color:var(--amber); font-weight:700; }
#menu-overlay .wg-btn.primary.busy{ opacity:.7; pointer-events:none; }
#menu-overlay .wg-btn.ghost{ margin-left:auto; color:var(--muted-2); }
#menu-overlay .wz-map.soon{ cursor:not-allowed; filter:grayscale(.85) brightness(.55); }
#menu-overlay .wz-map.soon:hover{ transform:none; border-color:var(--line); }
#menu-overlay .wz-soon{ position:absolute; top:12px; left:12px; z-index:2; padding:5px 9px; border-radius:999px; border:1px solid rgba(240,168,60,.5); background:rgba(8,9,12,.85); font-family:var(--ui); font-size:10px; letter-spacing:.18em; color:var(--amber); }
#menu-overlay .lb-botfill{ display:flex; align-items:center; gap:9px; padding:12px 16px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.04); font-family:var(--ui); font-size:11.5px; letter-spacing:.14em; cursor:pointer; user-select:none; transition:background .2s, border-color .2s; }
#menu-overlay .lb-botfill i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
#menu-overlay .lb-botfill em{ font-style:normal; color:var(--amber); margin-left:2px; }
#menu-overlay .lb-botfill:hover{ background:rgba(255,255,255,.08); }
#menu-overlay .lb-botfill.on{ border-color:rgba(240,168,60,.5); background:rgba(240,168,60,.1); color:var(--amber); }
#menu-overlay .lb-botfill.on i{ background:var(--amber); box-shadow:0 0 10px var(--amber); }

/* ============================================================ CASE OPEN v4 (layered real art) ============================================================ */
#menu-overlay .cs-openstage.v4{ height:520px; perspective:1200px; }
#menu-overlay .cs-os-rig{ position:relative; z-index:2; width:600px; max-width:88%; aspect-ratio:2/1; transform:translateY(-140px) scale(.7); opacity:0; }
#menu-overlay .cs-os-rig img{ filter:drop-shadow(0 26px 30px rgba(0,0,0,.7)); }
#menu-overlay .cs-openstage.v4.drop .cs-os-rig{ animation:csDrop .55s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes csDrop{ 0%{ opacity:0; transform:translateY(-160px) scale(.72); } 70%{ opacity:1; transform:translateY(34px) scale(1.02); } 85%{ transform:translateY(22px) scale(.985); } 100%{ opacity:1; transform:translateY(28px) scale(1); } }
#menu-overlay .cs-openstage.v4.landed .cs-os-rig{ transform:translateY(28px); opacity:1; }
#menu-overlay .cs-openstage.v4.landed:not(.open) .cs-os-glow{ opacity:.85; animation:csLedPulse 1.1s ease-in-out infinite; }
@keyframes csLedPulse{ 0%,100%{ transform:scale(1.15); opacity:.55; } 50%{ transform:scale(1.4); opacity:.95; } }
#menu-overlay .cs-os-rig img{ position:absolute; left:0; top:0; width:100%; height:auto; -webkit-user-drag:none; user-select:none; pointer-events:none; }
#menu-overlay .cs-os-base{ z-index:1; }
#menu-overlay .cs-os-lid{ z-index:3; transform-origin:52% 8%; transform:perspective(900px) rotateX(0); transition:transform .8s cubic-bezier(.25,.9,.2,1.04), filter .4s; backface-visibility:hidden; }
#menu-overlay .cs-openstage.v4.crack .cs-os-lid{ transform:perspective(900px) rotateX(-7deg) translateY(-1%); }
#menu-overlay .cs-openstage.v4.open .cs-os-lid{ transform:perspective(900px) rotateX(-74deg) translateY(-4%); filter:brightness(1.3) drop-shadow(0 0 28px color-mix(in srgb, var(--tc) 75%, transparent)); }
#menu-overlay .cs-os-tab{ z-index:4; left:auto !important; transform-origin:50% 0; transform:perspective(500px) rotateX(0); transition:transform .28s cubic-bezier(.3,1.5,.5,1), filter .2s; }
#menu-overlay .cs-os-tab.l{ left:29.6% !important; top:61.6% !important; width:9.4% !important; }
#menu-overlay .cs-os-tab.r{ left:83.0% !important; top:55.0% !important; width:8.9% !important; }
#menu-overlay .cs-openstage.v4.lock1 .cs-os-tab.l, #menu-overlay .cs-openstage.v4.lock2 .cs-os-tab.r{ transform:perspective(500px) rotateX(-105deg) translateY(2px); filter:brightness(1.7); }
#menu-overlay .cs-openstage.v4.lock1 .cs-os-rig{ animation:csKick .28s ease-out; } #menu-overlay .cs-openstage.v4.lock2 .cs-os-rig{ animation:csKick2 .28s ease-out; }
@keyframes csKick{ 0%{ transform:translateY(28px) rotate(0); } 30%{ transform:translateY(26px) rotate(-.9deg) translateX(-3px); } 100%{ transform:translateY(28px) rotate(0); } }
@keyframes csKick2{ 0%{ transform:translateY(28px) rotate(0); } 30%{ transform:translateY(26px) rotate(.9deg) translateX(3px); } 100%{ transform:translateY(28px) rotate(0); } }
#menu-overlay .cs-openstage.v4.open .cs-os-rig{ animation:csSlam .5s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes csSlam{ 0%{ transform:translateY(28px) scale(1); } 40%{ transform:translateY(36px) scale(1.03); } 100%{ transform:translateY(30px) scale(1); } }
#menu-overlay .cs-os-spark{ position:absolute; z-index:6; width:0; height:0; opacity:0; pointer-events:none; }
#menu-overlay .cs-os-spark.l{ left:34.3%; top:63%; } #menu-overlay .cs-os-spark.r{ left:87.5%; top:56%; }
#menu-overlay .cs-os-spark i{ position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px var(--tc); }
#menu-overlay .cs-os-spark::after{ content:''; position:absolute; left:-30px; top:-30px; width:60px; height:60px; border-radius:50%; background:radial-gradient(circle, #fff, color-mix(in srgb, var(--tc) 80%, #fff) 35%, transparent 70%); opacity:0; }
#menu-overlay .cs-openstage.v4.lock1 .cs-os-spark.l::after, #menu-overlay .cs-openstage.v4.lock2 .cs-os-spark.r::after{ animation:csLatchFlash .45s ease-out both; }
@keyframes csLatchFlash{ 0%{ opacity:1; transform:scale(.4); } 100%{ opacity:0; transform:scale(2.4); } }
#menu-overlay .cs-openstage.v4.lock1 .cs-os-spark.l, #menu-overlay .cs-openstage.v4.lock2 .cs-os-spark.r{ opacity:1; }
#menu-overlay .cs-openstage.v4.lock1 .cs-os-spark.l i, #menu-overlay .cs-openstage.v4.lock2 .cs-os-spark.r i{ animation:csSpark .55s cubic-bezier(.1,.8,.3,1) both; }
#menu-overlay .cs-os-spark i:nth-child(1){ --dx:-46px; --dy:-30px; } #menu-overlay .cs-os-spark i:nth-child(2){ --dx:40px; --dy:-42px; } #menu-overlay .cs-os-spark i:nth-child(3){ --dx:-30px; --dy:38px; } #menu-overlay .cs-os-spark i:nth-child(4){ --dx:52px; --dy:20px; }
#menu-overlay .cs-os-spark i:nth-child(5){ --dx:-58px; --dy:6px; } #menu-overlay .cs-os-spark i:nth-child(6){ --dx:18px; --dy:-58px; } #menu-overlay .cs-os-spark i:nth-child(7){ --dx:26px; --dy:48px; } #menu-overlay .cs-os-spark i:nth-child(8){ --dx:-14px; --dy:-52px; }
@keyframes csSpark{ 0%{ transform:translate(0,0) scale(1.6); opacity:1; } 100%{ transform:translate(var(--dx), var(--dy)) scale(.2); opacity:0; } }
#menu-overlay .cs-os-beam{ position:absolute; z-index:2; left:6%; right:6%; top:44%; height:9%; opacity:0; background:linear-gradient(90deg, transparent, #fff 18%, color-mix(in srgb, var(--rc) 60%, #fff) 50%, #fff 82%, transparent); filter:blur(6px); transform-origin:50% 50%; pointer-events:none; }
#menu-overlay .cs-openstage.v4.crack .cs-os-beam{ opacity:.7; transition:opacity .25s; }
#menu-overlay .cs-openstage.v4.open .cs-os-beam{ opacity:1; animation:csBeam .9s ease-out both; }
@keyframes csBeam{ 0%{ transform:scaleY(1); } 40%{ transform:scaleY(9) translateY(-8%); opacity:1; } 100%{ transform:scaleY(4) translateY(-30%); opacity:.35; } }
#menu-overlay .cs-os-flash{ position:absolute; inset:0; z-index:7; background:#fff; opacity:0; pointer-events:none; }
#menu-overlay .cs-openstage.v4.open .cs-os-flash{ animation:csFlash .7s ease-out both; }
@keyframes csFlash{ 0%{ opacity:0; } 10%{ opacity:.55; } 100%{ opacity:0; } }
#menu-overlay .cs-openstage.v4 .cs-os-item{ top:34%; left:50%; z-index:2; margin-left:-150px; }
#menu-overlay .cs-openstage.v4.rise .cs-os-item{ z-index:5; animation:csRise 1.2s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes csRise{ 0%{ opacity:0; transform:translateY(60px) scale(.45); filter:brightness(3) blur(6px); } 35%{ opacity:1; } 100%{ opacity:1; transform:translateY(-135px) scale(1.15); filter:brightness(1) blur(0); } }
#menu-overlay .cs-openstage.v4 .cs-os-burst{ top:44%; }
#menu-overlay .cs-openstage.v4.open .cs-os-rays{ opacity:.9; animation:kinSpin 30s linear infinite; }

/* ============================================================ CASES: compact tier row ============================================================ */
#menu-overlay .cs-hero{ margin-bottom:12px; } #menu-overlay .cs-hero-t{ font-size:30px; } #menu-overlay .cs-hero-s{ font-size:12.5px; }
#menu-overlay .cs-tiers{ grid-template-columns:repeat(3,1fr); gap:14px; }
#menu-overlay .cs-tier{ padding:14px 16px 14px; border-radius:14px; }
#menu-overlay .cs-tier .cs-tier-n{ font-size:20px; margin:0 0 2px; }
#menu-overlay .cs-art{ height:150px; perspective:900px; }
#menu-overlay .cs-art img{ width:240px; max-width:92%; transform:translateY(4px); filter:drop-shadow(0 18px 20px rgba(0,0,0,.6)); animation:csIdle 6s ease-in-out infinite; animation-delay:calc(var(--i, 0) * -2s); transition:transform .5s var(--spring), filter .4s; }
@keyframes csIdle{ 0%,100%{ transform:translateY(4px) rotateX(0) rotateY(0); } 50%{ transform:translateY(-4px) rotateX(2deg) rotateY(-3deg); } }
#menu-overlay .cs-tier:hover .cs-art img{ animation:none; transform:translateY(-8px) rotateX(8deg) rotateY(-10deg) scale(1.05); filter:drop-shadow(0 26px 28px rgba(0,0,0,.7)) brightness(1.08); }
#menu-overlay .cs-art-glow{ width:220px; height:220px; margin:-110px 0 0 -110px; animation:csBreathe 2.6s ease-in-out infinite; animation-delay:calc(var(--i, 0) * -.9s); }
@keyframes csBreathe{ 0%,100%{ opacity:.45; transform:scale(.95); } 50%{ opacity:.9; transform:scale(1.08); } }
#menu-overlay .cs-art-floor{ left:22%; right:22%; bottom:4px; }
#menu-overlay .cs-rar-dots{ margin-top:4px; } #menu-overlay .cs-rar-dots i{ width:18px; height:4px; } #menu-overlay .cs-rar-dots span{ font-size:10.5px; }
#menu-overlay .cs-tier-acts{ margin-top:12px; gap:6px; }
#menu-overlay .cs-preview{ padding:10px 0; font-size:12px; }
#menu-overlay .cs-tier .cs-buy{ padding:9px 0 8px; } #menu-overlay .cs-tier .cs-buy b{ font-size:19px; } #menu-overlay .cs-tier .cs-buy span{ font-size:10px; }
#menu-overlay .cs-tier .cs-have{ margin-top:8px; font-size:10.5px; }
#menu-overlay .cs-reelwrap:empty{ display:none; }
/* ============================================================ CINEMATIC UNBOX ============================================================ */
#menu-overlay .cs-cine{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0; transition:opacity .3s; perspective:1200px; }
#menu-overlay .cs-cine.on{ opacity:1; } #menu-overlay .cs-cine.out{ opacity:0; transition:opacity .45s; }
#menu-overlay .cs-cine-vig{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 58%, rgba(10,11,14,.55), rgba(5,6,8,.94) 70%); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
#menu-overlay .cs-cine-rays{ position:absolute; left:50%; top:52%; width:1600px; height:1600px; margin:-800px 0 0 -800px; background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 22%, transparent) 0 4deg, transparent 4deg 14deg); -webkit-mask-image:radial-gradient(circle, #000 10%, transparent 50%); mask-image:radial-gradient(circle, #000 10%, transparent 50%); opacity:0; transition:opacity .5s; pointer-events:none; }
#menu-overlay .cs-cine.open .cs-cine-rays{ opacity:.45; animation:kinSpin 40s linear infinite; }
#menu-overlay .cs-cine-column{ position:absolute; left:50%; bottom:46%; width:260px; height:0; margin-left:-130px; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--rc) 55%, #fff) 60%, #fff); -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); opacity:0; filter:blur(10px); transform-origin:50% 100%; pointer-events:none; }
#menu-overlay .cs-cine.crack .cs-cine-column{ height:60px; opacity:.5; transition:height .25s, opacity .25s; }
#menu-overlay .cs-cine.open .cs-cine-column{ height:62vh; opacity:.85; transition:height .7s cubic-bezier(.2,.9,.2,1), opacity .3s; }
#menu-overlay .cs-cine.rise .cs-cine-column{ opacity:.35; transition:opacity 1s; }
#menu-overlay .cs-cine-rings{ position:absolute; left:50%; top:52%; width:0; height:0; pointer-events:none; }
#menu-overlay .cs-cine-rings i{ position:absolute; left:-150px; top:-80px; width:300px; height:160px; border-radius:50%; border:2px solid color-mix(in srgb, var(--rc) 80%, #fff); opacity:0; transform:scale(.2); }
#menu-overlay .cs-cine.open .cs-cine-rings i{ animation:csRing 1.1s cubic-bezier(.1,.8,.3,1) both; }
#menu-overlay .cs-cine.open .cs-cine-rings i:nth-child(2){ animation-delay:.18s; } #menu-overlay .cs-cine.rise .cs-cine-rings i:nth-child(3){ animation-delay:0s; animation:csRing 1.2s cubic-bezier(.1,.8,.3,1) both; }
@keyframes csRing{ 0%{ opacity:.9; transform:scale(.2); border-width:6px; } 100%{ opacity:0; transform:scale(2.6); border-width:1px; } }
#menu-overlay .cs-cine-particles{ position:absolute; left:50%; top:60%; width:0; height:0; pointer-events:none; }
#menu-overlay .cs-cine-particles i{ position:absolute; left:calc(var(--x) * 1% - 50% * 6px); top:0; width:4px; height:4px; border-radius:50%; background:#fff; box-shadow:0 0 8px 2px var(--rc); opacity:0; left:calc((var(--x) - 50) * 5px); }
#menu-overlay .cs-cine.open .cs-cine-particles i{ animation:csParticle 2.2s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--d) * .09s); }
@keyframes csParticle{ 0%{ opacity:0; transform:translateY(0) scale(.4); } 15%{ opacity:1; } 100%{ opacity:0; transform:translateY(-62vh) translateX(calc((var(--x) - 50) * 2px)) scale(1.1); } }
#menu-overlay .cs-cine-rig{ position:relative; z-index:2; width:460px; max-width:80vw; aspect-ratio:2/1; transform:translateY(30px); opacity:1; animation:csDolly .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes csDolly{ 0%{ opacity:0; transform:translateY(90px) scale(.8) rotate(-2deg); } 100%{ opacity:1; transform:translateY(30px) scale(1) rotate(0); } }
#menu-overlay .cs-cine.lock1 .cs-cine-rig{ animation:csKick .25s ease-out both; } #menu-overlay .cs-cine.lock2 .cs-cine-rig{ animation:csKick2 .25s ease-out both; }
@keyframes csKick{ 0%{ transform:translateY(30px) scale(1); } 35%{ transform:translateY(27px) scale(1.01) rotate(-.8deg) translateX(-3px); } 100%{ transform:translateY(30px) scale(1); } }
@keyframes csKick2{ 0%{ transform:translateY(30px) scale(1); } 35%{ transform:translateY(27px) scale(1.01) rotate(.8deg) translateX(3px); } 100%{ transform:translateY(30px) scale(1); } }
#menu-overlay .cs-cine.open .cs-cine-rig{ animation:csRecoil .55s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes csRecoil{ 0%{ transform:translateY(30px) scale(1); } 35%{ transform:translateY(42px) scale(1.04); } 100%{ transform:translateY(34px) scale(1); } }
#menu-overlay .cs-cine-rig img{ position:absolute; left:0; top:0; width:100%; height:auto; -webkit-user-drag:none; user-select:none; pointer-events:none; filter:drop-shadow(0 28px 30px rgba(0,0,0,.75)); }
#menu-overlay .cs-cine-base{ z-index:1; }
#menu-overlay .cs-cine-lid{ z-index:3; transform-origin:52% 6%; transform:perspective(900px) rotateX(0); transition:transform .7s cubic-bezier(.25,.9,.2,1.04), filter .4s; backface-visibility:hidden; }
#menu-overlay .cs-cine.crack .cs-cine-lid{ transform:perspective(900px) rotateX(-6deg) translateY(-1%); }
#menu-overlay .cs-cine.open .cs-cine-lid{ transform:perspective(900px) rotateX(-80deg) translateY(-3%); filter:brightness(1.35) drop-shadow(0 0 30px color-mix(in srgb, var(--tc) 80%, transparent)); }
#menu-overlay .cs-cine-tab{ z-index:4; transform-origin:50% 0; transform:perspective(500px) rotateX(0); transition:transform .24s cubic-bezier(.3,1.5,.5,1), filter .2s; }
#menu-overlay .cs-cine-tab.l{ left:29.6% !important; top:61.6% !important; width:9.4% !important; } #menu-overlay .cs-cine-tab.r{ left:83.0% !important; top:55.0% !important; width:8.9% !important; }
#menu-overlay .cs-cine.lock1 .cs-cine-tab.l, #menu-overlay .cs-cine.lock2 .cs-cine-tab.r{ transform:perspective(500px) rotateX(-108deg) translateY(2px); filter:brightness(1.8); }
#menu-overlay .cs-cine-spark{ position:absolute; z-index:6; width:0; height:0; pointer-events:none; } #menu-overlay .cs-cine-spark.l{ left:34.3%; top:63%; } #menu-overlay .cs-cine-spark.r{ left:87.5%; top:56%; }
#menu-overlay .cs-cine-spark b{ position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 10px 3px var(--tc); opacity:0; }
#menu-overlay .cs-cine-spark::after{ content:''; position:absolute; left:-36px; top:-36px; width:72px; height:72px; border-radius:50%; background:radial-gradient(circle, #fff, color-mix(in srgb, var(--tc) 80%, #fff) 35%, transparent 70%); opacity:0; }
#menu-overlay .cs-cine.lock1 .cs-cine-spark.l::after, #menu-overlay .cs-cine.lock2 .cs-cine-spark.r::after{ animation:csLatchFlash .4s ease-out both; }
#menu-overlay .cs-cine.lock1 .cs-cine-spark.l b, #menu-overlay .cs-cine.lock2 .cs-cine-spark.r b{ animation:csSparkFly .55s cubic-bezier(.1,.8,.3,1) both; }
#menu-overlay .cs-cine-spark b:nth-child(1){ --dx:-52px; --dy:-34px; } #menu-overlay .cs-cine-spark b:nth-child(2){ --dx:46px; --dy:-48px; } #menu-overlay .cs-cine-spark b:nth-child(3){ --dx:-34px; --dy:42px; } #menu-overlay .cs-cine-spark b:nth-child(4){ --dx:58px; --dy:22px; } #menu-overlay .cs-cine-spark b:nth-child(5){ --dx:-64px; --dy:6px; }
#menu-overlay .cs-cine-spark b:nth-child(6){ --dx:20px; --dy:-64px; } #menu-overlay .cs-cine-spark b:nth-child(7){ --dx:30px; --dy:52px; } #menu-overlay .cs-cine-spark b:nth-child(8){ --dx:-16px; --dy:-58px; } #menu-overlay .cs-cine-spark b:nth-child(9){ --dx:66px; --dy:-10px; } #menu-overlay .cs-cine-spark b:nth-child(10){ --dx:-44px; --dy:-56px; }
@keyframes csSparkFly{ 0%{ opacity:1; transform:translate(0,0) scale(1.4); } 100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(.2); } }
#menu-overlay .cs-cine-flash{ position:absolute; inset:0; z-index:7; background:#fff; opacity:0; pointer-events:none; }
#menu-overlay .cs-cine.open .cs-cine-flash{ animation:csFlash .6s ease-out both; }
#menu-overlay .cs-cine-item{ position:absolute; left:50%; top:30%; z-index:2; width:300px; height:190px; margin-left:-150px; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(70px) scale(.4); filter:drop-shadow(0 0 30px color-mix(in srgb, var(--rc) 70%, transparent)); pointer-events:none; }
#menu-overlay .cs-cine.rise .cs-cine-item{ z-index:5; animation:csItemRise 1.1s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes csItemRise{ 0%{ opacity:0; transform:translateY(70px) scale(.4) rotate(-8deg); filter:brightness(3) blur(8px); } 30%{ opacity:1; } 100%{ opacity:1; transform:translateY(-190px) scale(1.2) rotate(0); filter:brightness(1) blur(0) drop-shadow(0 0 40px color-mix(in srgb, var(--rc) 80%, transparent)); } }
#menu-overlay .cs-cine-item .cs-vis-gun{ max-height:170px; } #menu-overlay .cs-cine-item .cs-vis-card{ width:280px; } #menu-overlay .cs-cine-item .cs-vis-camo, #menu-overlay .cs-cine-item .cs-vis-coin{ width:150px; height:150px; font-size:64px; }
#menu-overlay .cs-cine-tag{ position:absolute; left:0; right:0; bottom:9vh; z-index:8; text-align:center; font-family:var(--disp); font-size:26px; letter-spacing:.06em; text-transform:uppercase; color:#fff; display:flex; align-items:center; justify-content:center; gap:12px; animation:kinIn .5s var(--spring) both .3s; }
#menu-overlay .cs-cine-tag span{ font-family:var(--ui); font-size:10px; letter-spacing:.16em; padding:4px 10px; border:1px solid rgba(240,168,60,.45); border-radius:999px; color:var(--amber); }
#menu-overlay .cs-cine.legendary .cs-cine-vig{ background:radial-gradient(ellipse at 50% 58%, rgba(30,22,8,.55), rgba(5,6,8,.94) 70%); }

/* cinematic unbox: real 3D canvas */
#menu-overlay .cs-cine-3d{ position:relative; z-index:3; display:block; pointer-events:none; }
#menu-overlay .cs-cine-spark{ position:fixed !important; left:50%; top:50%; }
#menu-overlay .cs-cine-item{ position:fixed !important; top:50%; left:50%; width:300px; height:190px; margin:-95px 0 0 -150px; z-index:5; }
#menu-overlay .cs-cine.rise .cs-cine-item{ animation:csItemRise 1.2s cubic-bezier(.2,.9,.25,1.05) both; }
#menu-overlay .cs-cine-column{ bottom:38%; }
/* 3D unbox: the drop is rendered inside the box, so the DOM item stays hidden; slower, moodier light */
#menu-overlay .cs-cine .cs-cine-item{ display:none; }
#menu-overlay .cs-cine.crack .cs-cine-column{ height:90px; opacity:.45; transition:height 1.2s ease-out, opacity 1.2s; animation:csSeep 1.1s ease-in-out infinite; }
@keyframes csSeep{ 0%,100%{ opacity:.3; } 50%{ opacity:.6; } }
#menu-overlay .cs-cine.open .cs-cine-column{ animation:none; height:64vh; opacity:.8; transition:height 1.3s cubic-bezier(.2,.9,.2,1), opacity .6s; }
#menu-overlay .cs-cine.rise3d .cs-cine-column{ opacity:.3; transition:opacity 1.6s; }
#menu-overlay .cs-cine.open .cs-cine-flash{ animation:csFlash 1.1s ease-out both; }
#menu-overlay .cs-cine.open .cs-cine-rays{ transition:opacity 1.2s; }
#menu-overlay .cs-cine.open .cs-cine-particles i{ animation-duration:3.4s; }
#menu-overlay .cs-cine.open .cs-cine-rings i{ animation-duration:1.8s; } #menu-overlay .cs-cine.open .cs-cine-rings i:nth-child(2){ animation-delay:.35s; }
#menu-overlay .cs-cine-tag{ transition:opacity .4s; }
/* real 3D renders of guns in the cases UI */
#menu-overlay .cs-vis-gun.cs-vis-3d, .cs-modal .cs-vis-gun.cs-vis-3d{ max-width:100%; max-height:none; width:auto; filter:drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
#menu-overlay .cs-rv-vis .cs-vis-gun.cs-vis-3d{ width:360px; max-height:200px; }
#menu-overlay .cs-drop .cs-vis-gun.cs-vis-3d{ width:120px; } #menu-overlay .cs-tile .cs-vis-gun.cs-vis-3d{ width:140px; }
.cs-modal .cs-pv-item .cs-vis-gun.cs-vis-3d{ width:190px; max-width:110%; margin:-6px 0; }
/* new case loot: XP packs, titles, name colours, bonus cases */
#menu-overlay .cs-vis-xp, .cs-modal .cs-vis-xp{ width:92px; height:92px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%, #60a5fa, #1d4ed8 60%, #0b1f5c); box-shadow:0 10px 24px rgba(29,78,216,.45), inset 0 0 0 2px rgba(255,255,255,.18); color:#fff; }
#menu-overlay .cs-vis-xp b, .cs-modal .cs-vis-xp b{ font-family:var(--disp); font-size:26px; line-height:1; } #menu-overlay .cs-vis-xp span, .cs-modal .cs-vis-xp span{ font-family:var(--ui); font-size:10px; letter-spacing:.2em; opacity:.85; }
#menu-overlay .cs-vis-title, .cs-modal .cs-vis-title{ padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(135deg,#1a1d23,#0b0c10); display:flex; flex-direction:column; align-items:center; gap:3px; box-shadow:0 10px 24px rgba(0,0,0,.5); }
#menu-overlay .cs-vis-title span, .cs-modal .cs-vis-title span{ font-family:var(--ui); font-size:9px; letter-spacing:.24em; color:var(--muted-2); } #menu-overlay .cs-vis-title b, .cs-modal .cs-vis-title b{ font-family:var(--disp); font-size:22px; letter-spacing:.06em; color:#fff; white-space:nowrap; }
#menu-overlay .cs-vis-color, .cs-modal .cs-vis-color{ width:92px; height:92px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 45%, #000)); box-shadow:0 10px 24px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 0 2px rgba(255,255,255,.2); }
#menu-overlay .cs-vis-color b, .cs-modal .cs-vis-color b{ font-family:var(--disp); font-size:30px; color:#0b0c10; line-height:1; } #menu-overlay .cs-vis-color span, .cs-modal .cs-vis-color span{ font-family:var(--ui); font-size:9px; letter-spacing:.2em; color:rgba(0,0,0,.6); }
#menu-overlay .cs-vis-color.prism, .cs-modal .cs-vis-color.prism{ background:conic-gradient(from 0deg, #ff4dd2, #f0a83c, #34d399, #22d3ee, #a78bfa, #ff4dd2); animation:kinSpin 6s linear infinite; }
#menu-overlay .cs-vis-color.prism b, #menu-overlay .cs-vis-color.prism span, .cs-modal .cs-vis-color.prism b, .cs-modal .cs-vis-color.prism span{ animation:kinSpin 6s linear infinite reverse; }
#menu-overlay .cs-vis-case, .cs-modal .cs-vis-case{ width:140px; height:auto; filter:drop-shadow(0 12px 16px rgba(0,0,0,.6)); }
.cs-modal .cs-pv-tile .cs-vis-xp, .cs-modal .cs-pv-tile .cs-vis-color{ width:56px; height:56px; } .cs-modal .cs-pv-tile .cs-vis-xp b{ font-size:16px; } .cs-modal .cs-pv-tile .cs-vis-color b{ font-size:20px; }
.cs-modal .cs-pv-tile .cs-vis-title{ padding:6px 10px; } .cs-modal .cs-pv-tile .cs-vis-title b{ font-size:14px; } .cs-modal .cs-pv-tile .cs-vis-case{ width:96px; }
#menu-overlay .cs-drop .cs-vis-xp, #menu-overlay .cs-drop .cs-vis-color{ width:44px; height:44px; } #menu-overlay .cs-drop .cs-vis-xp b{ font-size:12px; } #menu-overlay .cs-drop .cs-vis-xp span, #menu-overlay .cs-drop .cs-vis-color span{ display:none; } #menu-overlay .cs-drop .cs-vis-case{ width:60px; } #menu-overlay .cs-drop .cs-vis-title b{ font-size:12px; }
#menu-overlay .cs-rv-vis .cs-vis-xp, #menu-overlay .cs-rv-vis .cs-vis-color{ width:120px; height:120px; } #menu-overlay .cs-rv-vis .cs-vis-case{ width:220px; }
#menu-overlay .name-prism{ background:linear-gradient(90deg, #ff4dd2, #f0a83c, #34d399, #22d3ee, #a78bfa, #ff4dd2); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; animation:czHolo 5s linear infinite; }
/* buy-confirm modal: the real case render instead of the old CSS crate */
.cs-modal .cbm-art{ position:relative; height:150px; margin:4px 0 6px; display:flex; align-items:center; justify-content:center; }
.cs-modal .cbm-art::before{ content:''; position:absolute; left:50%; top:58%; width:220px; height:220px; margin:-110px 0 0 -110px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--tc) 40%, transparent), transparent 62%); animation:csBreathe 2.6s ease-in-out infinite; pointer-events:none; }
.cs-modal .cbm-art img{ position:relative; width:260px; max-width:92%; height:auto; filter:drop-shadow(0 18px 22px rgba(0,0,0,.65)); animation:csIdle 6s ease-in-out infinite; }
/* one SOL pill: the old wallet-balance pill is folded into the earnings pill */
#menu-overlay #sol-pill{ display:none; }
#menu-overlay .coin.opr .sol-ico{ margin-right:6px; }
/* CLEAN unbox: no rays / particles / rings / flash / sparks — just the box, a soft floor shadow, a quiet light column and the label */
#menu-overlay .cs-cine-rays, #menu-overlay .cs-cine-particles, #menu-overlay .cs-cine-rings, #menu-overlay .cs-cine-flash, #menu-overlay .cs-cine-spark{ display:none !important; }
#menu-overlay .cs-cine-vig{ background:radial-gradient(ellipse at 50% 55%, rgba(12,13,17,.72), rgba(5,6,8,.96) 72%); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
#menu-overlay .cs-cine-column{ width:200px; margin-left:-100px; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--rc) 35%, #fff)); filter:blur(14px); }
#menu-overlay .cs-cine.crack .cs-cine-column{ height:70px; opacity:.16; animation:none; }
#menu-overlay .cs-cine.open .cs-cine-column{ height:48vh; opacity:.22; }
#menu-overlay .cs-cine.rise3d .cs-cine-column{ opacity:.12; }
#menu-overlay .cs-cine-3d{ filter:drop-shadow(0 40px 50px rgba(0,0,0,.6)); }
#menu-overlay .cs-cine-tag{ font-size:22px; letter-spacing:.1em; gap:14px; }
#menu-overlay .cs-cine-tag span{ background:rgba(8,9,12,.6); }
/* admin money dashboard */
#menu-overlay .adm-card-v i{ font-style:normal; font-size:12px; color:var(--muted-2); margin-left:6px; font-family:var(--ui); }
#menu-overlay .adm-sws{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
#menu-overlay .adm-sw{ padding:7px 12px; border-radius:999px; border:1px solid var(--line); font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
#menu-overlay .adm-sw.on{ color:#5fcf6a; border-color:rgba(95,207,106,.4); background:rgba(95,207,106,.08); }
#menu-overlay .adm-sw.off{ color:#ff8a7a; border-color:rgba(255,106,90,.35); }
#menu-overlay .adm-sig{ color:var(--amber); text-decoration:none; font-family:ui-monospace,Menlo,monospace; font-size:11px; } #menu-overlay .adm-sig:hover{ text-decoration:underline; }

/* ---------- in-game GUN RACE panel (left column, same slot as the showdown pot) ---------- */
#game-hud #hud-gunrace{ position:absolute; top:318px; left:24px; z-index:2; width:240px; box-sizing:border-box;
  padding:9px 12px 10px; border-radius:9px; text-align:left;
  background:linear-gradient(135deg,rgba(240,168,60,.16),rgba(14,12,8,.86)); border:1px solid rgba(240,168,60,.5);
  box-shadow:0 10px 26px rgba(0,0,0,.5); backdrop-filter:blur(3px); }
#game-hud .hud-gr-top{ display:flex; align-items:baseline; justify-content:space-between; }
#game-hud .hud-gr-tier{ font-size:9px; font-weight:700; letter-spacing:1.6px; color:#aeb4bc; }
#game-hud .hud-gr-tier b{ font-size:14px; color:#fff; font-weight:800; margin-right:2px; }
#game-hud .hud-gr-tier i{ font-style:normal; color:#8b9098; }
#game-hud .hud-gr-cur{ display:flex; align-items:center; gap:10px; margin-top:6px; }
#game-hud .hud-gr-cur img{ width:86px; height:40px; object-fit:contain; flex:none; filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
#game-hud .hud-gr-txt{ min-width:0; }
#game-hud .hud-gr-name{ font-size:16px; font-weight:800; letter-spacing:1.4px; color:#fff; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#game-hud .hud-gr-next{ margin-top:3px; font-size:8.5px; font-weight:700; letter-spacing:1.4px; color:#8b9098; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#game-hud .hud-gr-next b{ color:#f0a83c; font-weight:800; }
#game-hud .hud-gr-next b.fin{ color:#ff8a7a; }
#game-hud .hud-gr-bar{ display:flex; gap:2px; margin-top:8px; height:4px; }
#game-hud .hud-gr-bar i{ flex:1; border-radius:1px; background:rgba(255,255,255,.12); }
#game-hud .hud-gr-bar i.done{ background:#f0a83c; }
#game-hud .hud-gr-bar i.cur{ background:#fff; box-shadow:0 0 6px rgba(255,255,255,.6); }
#game-hud .hud-gr-lead{ display:flex; align-items:baseline; gap:7px; margin-top:8px; padding-top:7px; border-top:1px solid rgba(255,255,255,.08); font-size:10px; }
#game-hud .hud-gr-ll{ font-size:8px; font-weight:800; letter-spacing:2px; color:#f0a83c; }
#game-hud .hud-gr-ln{ flex:1; min-width:0; font-weight:700; letter-spacing:.6px; color:#e8eaed; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#game-hud .hud-gr-ln.me{ color:#f0a83c; }
#game-hud .hud-gr-li{ font-weight:800; color:#fff; letter-spacing:1px; }
/* FFA top-3 list sits below the race panel in Gun Race */
#game-hud.gr .hud-lead{ top:492px; }
/* weapon-up toast: brief, centred, no glow */
#game-hud #hud-gr-toast{ position:absolute; left:50%; top:30%; transform:translate(-50%,-50%) translateY(10px); opacity:0; pointer-events:none;
  text-align:center; transition:opacity .22s ease, transform .22s ease; }
#game-hud #hud-gr-toast.show{ opacity:1; transform:translate(-50%,-50%); }
#game-hud .hud-gr-toast-l{ font-size:9px; font-weight:800; letter-spacing:3px; color:#f0a83c; }
#game-hud .hud-gr-toast-g{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:4px; padding:8px 18px; border-radius:8px;
  background:rgba(10,14,20,.78); border:1px solid rgba(255,255,255,.1); }
#game-hud .hud-gr-toast-g img{ width:110px; height:48px; object-fit:contain; }
#game-hud .hud-gr-toast-g span{ font-size:22px; font-weight:800; letter-spacing:2px; color:#fff; }

/* ---------- profile: earnings breakdown + match history ---------- */
#menu-overlay .pf-earnings{ margin-top:22px; }
#menu-overlay .pf-ets{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
#menu-overlay .pf-et{ padding:12px 12px 10px; border-radius:8px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
#menu-overlay .pf-et.hi{ background:linear-gradient(135deg,rgba(240,168,60,.16),rgba(255,255,255,.03)); border-color:rgba(240,168,60,.4); }
#menu-overlay .pf-et.amber .pf-et-v{ color:#f0a83c; }
#menu-overlay .pf-et-v{ font-weight:800; font-size:18px; color:#fff; font-variant-numeric:tabular-nums; line-height:1; }
#menu-overlay .pf-et-v b{ font-size:9px; color:#f0a83c; margin-left:4px; letter-spacing:.5px; }
#menu-overlay .pf-et > i{ display:block; font-style:normal; font-size:10px; color:#8b9098; margin-top:4px; font-variant-numeric:tabular-nums; }
#menu-overlay .pf-et-k{ margin-top:6px; font-size:9px; font-weight:800; letter-spacing:1.6px; color:#7d838b; }
#menu-overlay .pf-rates{ margin-top:8px; font-size:9.5px; font-weight:700; letter-spacing:1.2px; color:#6b7076; }
#menu-overlay .pf-led-h{ margin-top:14px; font-size:10px; font-weight:800; letter-spacing:2px; color:#aeb4bc; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.08); }
#menu-overlay .pf-col-n{ font-size:9px; color:#6b7076; margin-left:6px; letter-spacing:1px; }
#menu-overlay .pf-leds{ display:flex; flex-direction:column; gap:3px; margin-top:6px; max-height:230px; overflow:auto; padding-right:4px; }
#menu-overlay .pf-led{ display:grid; grid-template-columns:1fr 110px 120px; align-items:center; gap:10px; padding:7px 10px; border-radius:5px; background:rgba(255,255,255,.025); font-size:12px; }
#menu-overlay .pf-led.failed{ opacity:.7; }
#menu-overlay .pf-led-k{ font-weight:700; letter-spacing:1px; color:#e8eaed; font-size:11px; }
#menu-overlay .pf-led-k em{ font-style:normal; font-size:8.5px; color:#f0a83c; margin-left:5px; letter-spacing:1.5px; }
#menu-overlay .pf-led-sig{ font-size:9px; color:#f0a83c; text-decoration:none; margin-left:6px; letter-spacing:1px; }
#menu-overlay .pf-led-d{ font-size:10.5px; color:#7d838b; font-variant-numeric:tabular-nums; }
#menu-overlay .pf-led-a{ text-align:right; font-weight:800; font-variant-numeric:tabular-nums; color:#cdd2d8; }
#menu-overlay .pf-led-a.in{ color:#5fcf6a; }
#menu-overlay .pf-led-a.out{ color:#ff8a7a; }
#menu-overlay .pf-led-a i{ font-style:normal; font-size:9px; color:#8b9098; margin-left:3px; }
#menu-overlay .pf-hist{ max-height:320px; overflow:auto; padding-right:4px; }
#menu-overlay .pf-game-earn{ font-weight:800; font-size:12px; color:#5fcf6a; font-variant-numeric:tabular-nums; white-space:nowrap; }
#menu-overlay .pf-game-earn i{ font-style:normal; font-size:9px; color:#8b9098; margin-left:3px; }

/* ---------- player card popup (click an operator in a lobby) ---------- */
#menu-overlay .lb-row.pc-link{ cursor:pointer; }
#menu-overlay .lb-row.pc-link:hover{ background:rgba(240,168,60,.06); }
#menu-overlay .lb-row.pc-link:hover .lb-pname{ color:#f0a83c; }
#menu-overlay .pc-popup{ position:absolute; inset:0; z-index:9; display:none; align-items:center; justify-content:center; background:rgba(6,7,10,.72); backdrop-filter:blur(8px); animation:kinFade .2s var(--ease) both; }
#menu-overlay .pc-popup.on{ display:flex; }
#menu-overlay .pc-card{ width:520px; max-width:92vw; max-height:88vh; display:flex; flex-direction:column; background:rgba(13,15,19,.97); border:1px solid rgba(240,168,60,.3); border-radius:8px; box-shadow:0 28px 80px rgba(0,0,0,.7); overflow:hidden; }
#menu-overlay .pc-body{ overflow:auto; }
#menu-overlay .pc-loading{ padding:46px 20px; text-align:center; color:#aeb4bc; font-weight:700; letter-spacing:2px; font-size:13px; }
#menu-overlay .pc-loading small{ display:block; margin-top:8px; font-size:11px; color:#7d838b; letter-spacing:.5px; font-weight:600; }
#menu-overlay .pc-hero{ position:relative; display:flex; align-items:center; gap:16px; padding:22px 22px 18px; min-height:118px; }
#menu-overlay .pc-hero-scrim{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,10,13,.82),rgba(8,10,13,.55)); }
#menu-overlay .pc-emblem{ position:relative; width:64px; height:64px; border-radius:12px; overflow:hidden; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; flex:none; }
#menu-overlay .pc-emblem img, #menu-overlay .pc-emblem svg{ width:100%; height:100%; object-fit:cover; }
#menu-overlay .pc-id{ position:relative; min-width:0; flex:1; }
#menu-overlay .pc-name{ font-size:22px; font-weight:800; letter-spacing:2px; color:#fff; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#menu-overlay .pc-rank{ margin-top:6px; font-size:11px; font-weight:700; letter-spacing:1.6px; color:#f0a83c; }
#menu-overlay .pc-xpbar{ margin-top:8px; height:4px; width:220px; max-width:100%; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden; }
#menu-overlay .pc-xpbar i{ display:block; height:100%; background:#f0a83c; }
#menu-overlay .pc-wallet{ margin-top:7px; font-size:9.5px; font-weight:700; letter-spacing:1.4px; color:#aeb4bc; }
#menu-overlay .pc-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:14px 16px 4px; }
#menu-overlay .pc-stat{ padding:10px 6px; text-align:center; border-radius:6px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
#menu-overlay .pc-stat b{ display:block; font-size:18px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
#menu-overlay .pc-stat span{ display:block; margin-top:3px; font-size:8.5px; font-weight:800; letter-spacing:1.4px; color:#7d838b; }
#menu-overlay .pc-h{ margin:14px 16px 6px; font-size:10px; font-weight:800; letter-spacing:2px; color:#f0a83c; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.08); }
#menu-overlay .pc-hist{ display:flex; flex-direction:column; gap:5px; padding:0 16px 14px; }
#menu-overlay .pc-acts{ display:flex; justify-content:flex-end; gap:10px; padding:0 16px 16px; }
#menu-overlay .pc-acts .opt-btn.done{ opacity:.7; pointer-events:none; }

/* top-bar SOL pill: brief tick when the balance changes */
@keyframes pillUp{ 0%{ box-shadow:0 0 0 0 rgba(95,207,106,.0); color:#5fcf6a; } 30%{ box-shadow:0 0 0 4px rgba(95,207,106,.18); } 100%{ box-shadow:0 0 0 0 rgba(95,207,106,0); } }
@keyframes pillDown{ 0%{ box-shadow:0 0 0 0 rgba(255,138,122,.0); color:#ff8a7a; } 30%{ box-shadow:0 0 0 4px rgba(255,138,122,.18); } 100%{ box-shadow:0 0 0 0 rgba(255,138,122,0); } }
#menu-overlay .coin.opr.tick-up #opr-bal{ animation:pillUp 1.2s ease-out; }
#menu-overlay .coin.opr.tick-down #opr-bal{ animation:pillDown 1.2s ease-out; }

/* ---------- match share card ---------- */
#game-scoreboard .gwin-share{ pointer-events:auto; cursor:pointer; margin-top:2px; padding:7px 16px; border-radius:5px; font-size:11px; font-weight:800; letter-spacing:2px; color:#1c1304; background:#f0a83c; }
#game-scoreboard .gwin-share:hover{ filter:brightness(1.08); }
#share-popup{ position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; background:rgba(6,7,10,.78); backdrop-filter:blur(8px); font-family:'Rajdhani',system-ui,sans-serif; }
#share-popup.on{ display:flex; }
#share-popup .shr-card{ width:720px; max-width:94vw; background:rgba(13,15,19,.98); border:1px solid rgba(240,168,60,.3); border-radius:8px; box-shadow:0 28px 80px rgba(0,0,0,.7); overflow:hidden; }
#share-popup .shr-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.07); }
#share-popup .shr-t{ color:#f0a83c; font-weight:800; font-size:15px; letter-spacing:3px; }
#share-popup .shr-close{ cursor:pointer; color:#9aa0a8; font-size:22px; line-height:1; padding:2px 8px; }
#share-popup .shr-img{ padding:16px 20px 0; }
#share-popup .shr-img img{ display:block; width:100%; aspect-ratio:1200/630; border-radius:6px; background:#0b0d10; border:1px solid rgba(255,255,255,.08); }
#share-popup .shr-acts{ display:flex; gap:10px; padding:14px 20px 6px; }
#share-popup .shr-btn{ flex:1; text-align:center; padding:12px 10px; border-radius:5px; cursor:pointer; font-weight:800; font-size:12px; letter-spacing:2px; color:#e8eaed; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); }
#share-popup .shr-btn:hover{ border-color:rgba(240,168,60,.5); }
#share-popup .shr-btn.pri{ background:#f0a83c; color:#1c1304; border-color:#f0a83c; }
#share-popup .shr-msg{ padding:6px 20px 16px; font-size:11.5px; font-weight:600; letter-spacing:.4px; color:#8b9098; }
#menu-overlay .pf-game-share{ cursor:pointer; width:26px; height:26px; border-radius:5px; display:flex; align-items:center; justify-content:center; color:#8b9098; border:1px solid rgba(255,255,255,.1); font-size:13px; flex:none; }
#menu-overlay .pf-game-share:hover{ color:#f0a83c; border-color:rgba(240,168,60,.5); }

/* leaderboard rows open the player card */
.lbd-row.lbd-link{ cursor:pointer; transition:background .15s ease; }
.lbd-row.lbd-link:hover{ background:rgba(240,168,60,.07); }
.lbd-row.lbd-link:hover .lbd-name > b{ color:#f0a83c; }
.lbd-hint{ padding:10px 16px 2px; font-size:10.5px; font-weight:700; letter-spacing:1.2px; color:#6b7076; }

/* ---------- top-right notifications ---------- */
#nt-stack{ position:fixed; top:70px; right:16px; z-index:80; display:flex; flex-direction:column; gap:8px; width:340px; max-width:calc(100vw - 32px); pointer-events:none; font-family:'Rajdhani',system-ui,sans-serif; }
#nt-stack .nt{ pointer-events:auto; display:flex; align-items:flex-start; gap:12px; padding:12px 12px 12px 14px; border-radius:8px; background:rgba(13,15,19,.96); border:1px solid rgba(255,255,255,.1); box-shadow:0 14px 40px rgba(0,0,0,.55); border-left:3px solid #aeb4bc; opacity:0; transform:translateX(24px); transition:opacity .28s ease, transform .32s cubic-bezier(.2,.8,.2,1); cursor:default; }
#nt-stack .nt.on{ opacity:1; transform:none; } #nt-stack .nt.out{ opacity:0; transform:translateX(24px); }
#nt-stack .nt.sol{ border-left-color:#f0a83c; } #nt-stack .nt.friend{ border-left-color:#5fcf6a; }
#nt-stack .nt-ico{ flex:none; width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
#nt-stack .nt-ico.sol{ color:#f0a83c; background:rgba(240,168,60,.14); } #nt-stack .nt-ico.friend{ color:#5fcf6a; background:rgba(95,207,106,.14); } #nt-stack .nt-ico.info{ color:#aeb4bc; background:rgba(255,255,255,.08); }
#nt-stack .nt-b{ flex:1; min-width:0; }
#nt-stack .nt-t{ font-size:13px; font-weight:800; letter-spacing:1.6px; color:#fff; line-height:1.1; }
#nt-stack .nt.sol .nt-t{ color:#f0a83c; }
#nt-stack .nt-s{ margin-top:3px; font-size:12px; font-weight:600; color:#aeb4bc; line-height:1.3; }
#nt-stack .nt-x{ flex:none; cursor:pointer; color:#6b7076; font-size:18px; line-height:1; padding:0 2px; } #nt-stack .nt-x:hover{ color:#fff; }
/* friend badge on the top-bar icon */
#menu-overlay .ico-btn#top-friends{ position:relative; }
#menu-overlay .ico-btn#top-friends.badge::after{ content:""; position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:#5fcf6a; box-shadow:0 0 0 2px #0e1116; }
/* friends list rows */
#menu-overlay .fr-row .fdot.on, #menu-overlay .pf-friend .fdot.on{ background:#5fcf6a; box-shadow:0 0 0 3px rgba(95,207,106,.18); }
#menu-overlay .fr-row .fn.fr-link{ cursor:pointer; } #menu-overlay .fr-row .fn.fr-link:hover .fr-nm{ color:#f0a83c; }
#menu-overlay .fr-nmw{ display:flex; flex-direction:column; line-height:1.15; }
#menu-overlay .fr-meta{ font-size:9.5px; font-weight:700; letter-spacing:1.4px; color:#7d838b; }
#menu-overlay .pf-friend.fr-link{ cursor:pointer; gap:9px; } #menu-overlay .pf-friend.fr-link:hover .fr-nm{ color:#f0a83c; }
#menu-overlay .pf-friend .fr-meta{ margin-left:auto; }
#menu-overlay .fr-msg{ padding:0 22px 8px; font-size:11.5px; font-weight:600; letter-spacing:.4px; min-height:14px; }

/* case purchase: manual deposit option */
.cbm-alt{ margin-top:14px; padding:12px 14px 14px; border-radius:8px; background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.14); text-align:left; }
.cbm-alt-h{ font-size:9.5px; font-weight:800; letter-spacing:2px; color:#f0a83c; }
.cbm-alt-p{ margin-top:5px; font-size:11.5px; font-weight:600; color:#aeb4bc; line-height:1.4; }
.cbm-alt-p b{ color:#fff; }
.cbm-addr{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.cbm-addr code{ flex:1; min-width:0; font-family:ui-monospace,Menlo,monospace; font-size:10.5px; color:#e8eaed; background:#0c0e12; border:1px solid rgba(255,255,255,.1); border-radius:5px; padding:7px 9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cbm-mini{ cursor:pointer; font-size:10px; font-weight:800; letter-spacing:1.5px; padding:7px 10px; border-radius:5px; border:1px solid rgba(255,255,255,.14); color:#e8eaed; }
.cbm-mini:hover{ border-color:rgba(240,168,60,.6); color:#f0a83c; }
.cbm-alt .cbm-btn{ margin-top:9px; width:100%; box-sizing:border-box; text-align:center; }