/* =====================================================================
   realgrader — theme layer  (loaded AFTER style.css, so it wins)
   ---------------------------------------------------------------------
   Two goals:
     1. Palette: not one flat purple any more. A lavender family (lilac →
        periwinkle → orchid) over cool violet-charcoal surfaces.
     2. Volume: every surface is a physical plate — a light top edge, a dark
        bottom edge and a cast shadow. Buttons are extruded and compress when
        pressed; their labels are embossed.
   Light always comes from the top. Depth tokens are shared so panels, cards
   and buttons read as the same material.
   ===================================================================== */

:root{
  /* ---- surfaces (cool violet-charcoal, lighter than pure black) ---- */
  --bg:#110d22;
  --bg-2:#16112a;
  --panel:#1e1638;
  --panel-hi:#2b1f4c;
  --card:#231a40;
  --line:#3a2b5e;
  --line-soft:#2b2047;

  /* ---- text ---- */
  --text:#f4efff;
  --muted:#a494c4;
  --dim:#8577a4;

  /* ---- the lavender family ---- */
  --lav:#b49bff;          /* primary */
  --lav-hi:#dccfff;       /* highlight */
  --lav-lo:#8a67e8;       /* shade */
  --lav-deep:#6a44c4;     /* extrusion side */
  --peri:#8fa5ff;         /* periwinkle, secondary */
  --orchid:#e3a6ff;       /* orchid, tertiary */
  --mint:#86efc4;
  --rose:#ff9ab0;
  --gold:#ffc96b;
  --accent:var(--lav);
  --bright:var(--lav-hi);

  /* ---- depth recipe shared by every plate ---- */
  --edge-top:inset 0 1px 0 rgba(255,255,255,.10);
  --edge-bottom:inset 0 -1px 0 rgba(0,0,0,.55);
  --lift-1:0 2px 6px rgba(0,0,0,.35);
  --lift-2:0 10px 26px rgba(0,0,0,.42);
  --lift-3:0 18px 44px rgba(0,0,0,.5);
  --glow-lav:0 0 28px rgba(150,110,255,.22);
  --r-sm:10px; --r-md:14px; --r-lg:20px;
}

/* ---- page: lavender gradient, NOT pure black ---- */
body{
  background:
    radial-gradient(1200px 700px at 50% -8%, rgba(141,104,255,.22), transparent 58%),
    radial-gradient(900px 600px at 100% 6%, rgba(227,166,255,.12), transparent 55%),
    radial-gradient(800px 600px at 0% 18%, rgba(143,165,255,.12), transparent 55%),
    radial-gradient(600px 400px at 50% 60%, rgba(120,80,200,.08), transparent 50%),
    radial-gradient(500px 300px at 30% 90%, rgba(180,155,255,.06), transparent 50%),
    linear-gradient(180deg,#14102a 0%, #110d22 30%, #0e0a1c 60%, #0b0814 100%);
  background-attachment:fixed;
}
.main{background:none}

/* =====================================================================
   1. Volume primitives — panels and plates
   ===================================================================== */
.workspace,
.catalog-panel,
.profile-card,
.profile-overview,
.profile-inventory,
.orders-summary>div,
.store-card,
.delivery-card{
  background:linear-gradient(168deg, var(--panel-hi) 0%, var(--panel) 46%, #150f28 100%);
  border:1px solid var(--line-soft);
  box-shadow:var(--edge-top), var(--edge-bottom), var(--lift-2);
}
.workspace{border-radius:var(--r-lg); border-color:var(--line)}
.workspace:before{background:linear-gradient(90deg,transparent,rgba(199,170,255,.55),transparent)}
.catalog-panel{border-radius:var(--r-md)}
.panel-head{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 70%), var(--panel-hi);
  border-bottom:1px solid var(--line-soft);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.4);
}
.section-icon{
  background:linear-gradient(165deg, rgba(180,155,255,.26), rgba(143,165,255,.12));
  border:1px solid rgba(190,165,255,.26); color:var(--lav-hi);
  box-shadow:var(--edge-top), 0 3px 10px rgba(0,0,0,.35);
}

/* =====================================================================
   2. Buttons — extruded, with embossed labels
   ===================================================================== */
.btn{
  border-radius:12px; font-weight:750; letter-spacing:.015em;
  transition:transform .13s cubic-bezier(.2,.7,.3,1), box-shadow .16s, filter .16s;
}
.btn>span{display:inline-flex; align-items:center; gap:9px}

.btn-primary{
  background:linear-gradient(180deg, #c8b0ff 0%, var(--lav) 44%, var(--lav-lo) 100%);
  color:#1d1033;
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(44,18,92,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -2px 0 rgba(78,42,150,.5),
    0 5px 0 var(--lav-deep),
    0 12px 24px rgba(118,70,230,.4),
    0 2px 6px rgba(0,0,0,.42);
}
.btn-primary:hover:not(:disabled){
  filter:brightness(1.05); transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -2px 0 rgba(78,42,150,.5),
    0 6px 0 var(--lav-deep),
    0 16px 30px rgba(126,78,240,.48),
    0 2px 6px rgba(0,0,0,.42);
}
.btn-primary:active:not(:disabled){
  transform:translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 2px 7px rgba(60,28,120,.45),
    0 1px 0 var(--lav-deep),
    0 3px 8px rgba(0,0,0,.4);
}

.btn-subtle{
  background:linear-gradient(180deg, #342751 0%, #281d41 100%);
  border:1px solid var(--line); color:#e2d6ff;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #1d1431, 0 7px 16px rgba(0,0,0,.4);
}
.btn-subtle:hover:not(:disabled){transform:translateY(-1px); border-color:rgba(180,155,255,.5); background:linear-gradient(180deg,#3d2e5e 0%,#2e2149 100%)}
.btn-subtle:active:not(:disabled){transform:translateY(3px); box-shadow:inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 #1d1431}

.btn-ghost{color:#c0b0dd; text-shadow:0 1px 0 rgba(0,0,0,.5)}
.btn-ghost:hover:not(:disabled){color:var(--lav-hi)}

.icon-btn{
  background:linear-gradient(180deg,#2d2149,#211838);
  border:1px solid var(--line-soft); color:#cbb9f0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 #170f28, 0 6px 14px rgba(0,0,0,.4);
  transition:transform .13s, box-shadow .16s, color .16s;
}
.icon-btn:hover{transform:translateY(-1px); color:var(--lav-hi); border-color:rgba(180,155,255,.45)}
.icon-btn:active{transform:translateY(3px); box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.icon-btn.active{
  background:linear-gradient(180deg, rgba(180,155,255,.9), rgba(124,92,224,.9));
  color:#1d1033; border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 var(--lav-deep), 0 8px 18px rgba(118,70,230,.4);
}

/* =====================================================================
   3. Header
   ===================================================================== */
.topbar{
  background:linear-gradient(180deg, #1a1330 0%, #140e26 100%);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.45);
}
.brand-mark{stroke:var(--lav-hi); filter:drop-shadow(0 2px 6px rgba(150,110,255,.5))}
.brand small{color:var(--orchid)}
.main-tabs{
  background:linear-gradient(180deg,#191230,#130d24);
  border:1px solid var(--line-soft); border-radius:14px; padding:5px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05);
}
.main-tab{border-radius:10px; color:#b3a2d4; text-shadow:0 1px 0 rgba(0,0,0,.5); transition:background .18s, color .18s, box-shadow .18s, transform .14s}
.main-tab:hover{color:var(--lav-hi)}
.main-tab.active{
  background:linear-gradient(180deg, rgba(180,155,255,.95), rgba(128,96,226,.95));
  color:#1b1030; font-weight:750; text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 var(--lav-deep), 0 8px 18px rgba(118,70,230,.38);
}
.balance-pill{
  background:linear-gradient(180deg,#2a1f47,#1e1636);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.4);
  text-shadow:0 1px 0 rgba(0,0,0,.55);
}
.coin-ico{color:var(--gold); filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.stat-inline>.icon{color:var(--peri)}
.live-dot{background:var(--mint); box-shadow:0 0 10px rgba(134,239,196,.6)}

/* =====================================================================
   4. Upgrade arena — base styling (layout is in section 12)
   ===================================================================== */

.workspace{padding:18px!important; margin-top:6px}
.workspace-toolbar{margin-bottom:14px!important}
.page-heading-logo{margin-bottom:10px!important}
.fair-badge{display:none!important}

/* ---- item slots: plates with an inner well for the picture ---- */
.selected-item{
  border-radius:var(--r-md)!important;
  background:linear-gradient(168deg,#2a1f48 0%, #1d1536 50%, #140e26 100%)!important;
  border:1px solid var(--line-soft)!important;
  box-shadow:var(--edge-top), var(--edge-bottom), var(--lift-2)!important;
}
.selected-item.target{
  background:linear-gradient(168deg,#2d2150 0%, #201640 50%, #150f29 100%)!important;
  border-color:rgba(180,155,255,.26)!important;
}
.selected-item img{
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.6));
}
.slot-top b{
  background:linear-gradient(180deg, rgba(180,155,255,.22), rgba(143,165,255,.12));
  border:1px solid rgba(190,165,255,.3); color:var(--lav-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.slot-info .slot-price{color:var(--lav-hi); text-shadow:0 2px 0 rgba(0,0,0,.5)}
.empty-slot{color:#7f6ea3}
.empty-slot .icon{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}

/* =====================================================================
   5. "Добавить с баланса" — its own raised 3D block
   ===================================================================== */
.balance-control{
  display:flex!important; flex-direction:column; justify-content:center; gap:10px;
  padding:16px 18px!important; border-radius:var(--r-md);
  background:linear-gradient(168deg,#2a1f48 0%, #1d1536 55%, #140e26 100%);
  border:1px solid var(--line-soft);
  box-shadow:var(--edge-top), var(--edge-bottom), var(--lift-2);
  position:relative; overflow:hidden;
}
.balance-control:before{                   /* top light line, like the panels */
  content:""; position:absolute; left:14%; right:14%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,170,255,.5),transparent);
}
.balance-control>div{
  display:flex!important; align-items:baseline; justify-content:space-between;
  font-size:11px!important; color:var(--muted); margin:0!important; letter-spacing:.04em; text-transform:uppercase;
}
.balance-control strong{
  display:inline-block!important; margin:0!important;
  font-size:19px; font-weight:800; letter-spacing:-.3px;
  color:var(--lav-hi); text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 18px rgba(150,110,255,.35);
}
/* the slider itself: a carved track with a domed knob */
.balance-control input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:10px!important; background:transparent; margin:2px 0 0;
}
.balance-control input[type=range]::-webkit-slider-runnable-track{
  height:10px; border-radius:999px;
  background:linear-gradient(180deg,#120b22,#1d1536);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.06);
}
.balance-control input[type=range]::-moz-range-track{
  height:10px; border-radius:999px; background:#140d26;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.75);
}
.balance-control input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-6px; border-radius:50%;
  background:radial-gradient(circle at 36% 28%, #ffffff 0%, var(--lav-hi) 26%, var(--lav) 58%, var(--lav-lo) 100%);
  box-shadow:0 3px 0 var(--lav-deep), 0 6px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.85);
  cursor:grab; transition:transform .12s;
}
.balance-control input[type=range]::-webkit-slider-thumb:active{transform:scale(.94); cursor:grabbing}
.balance-control input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border:0; border-radius:50%;
  background:radial-gradient(circle at 36% 28%, #fff, var(--lav) 60%, var(--lav-lo) 100%);
  box-shadow:0 3px 0 var(--lav-deep), 0 6px 14px rgba(0,0,0,.55);
}

/* ---- CTA cell under the dial ---- */
.arena-cta{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px}
.arena-cta .upgrade-btn{
  width:100%!important; min-height:60px!important; max-width:none!important;
  margin:0!important; transform:none!important;
  font-size:16px!important; letter-spacing:.3px; border-radius:14px!important;
}
.arena-cta .upgrade-btn>span{font-size:16px}
.arena-cta .upgrade-btn:hover:not(:disabled){transform:translateY(-1px)!important}
.arena-cta .upgrade-btn:active:not(:disabled){transform:translateY(4px)!important}
.upgrade-caption{position:static!important; margin:0!important; font-size:10px; color:var(--dim)}

/* ---- multiplier buttons: small extruded keys ---- */
.multiplier-controls{
  display:flex!important; flex-wrap:wrap; align-content:center; justify-content:center; gap:8px!important;
  padding:14px!important; border-radius:var(--r-md);
  background:linear-gradient(168deg,#241a40 0%, #1a1331 60%, #130d24 100%);
  border:1px solid var(--line-soft);
  box-shadow:var(--edge-top), var(--edge-bottom), var(--lift-2);
}
.multiplier-controls button{
  flex:1 1 56px; min-width:56px; padding:11px 10px!important; font-size:13px!important; font-weight:750;
  border-radius:11px; color:#d3c3f5; text-shadow:0 1px 0 rgba(0,0,0,.6);
  background:linear-gradient(180deg,#352750,#271c41);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #1a1230, 0 6px 14px rgba(0,0,0,.4);
  transition:transform .12s, box-shadow .16s, color .16s, background .16s;
}
.multiplier-controls button:hover{transform:translateY(-1px); color:#fff; border-color:rgba(180,155,255,.5)}
.multiplier-controls button:active,
.multiplier-controls button.active{
  transform:translateY(3px);
  background:linear-gradient(180deg, var(--lav), var(--lav-lo));
  color:#1d1033; text-shadow:0 1px 0 rgba(255,255,255,.45); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 var(--lav-deep), 0 4px 12px rgba(118,70,230,.45);
}

/* =====================================================================
   6. Catalog + product cards
   ===================================================================== */
.product-card{
  border-radius:12px;
  background:linear-gradient(168deg,#271c45 0%, #1c1435 55%, #150f28 100%);
  border:1px solid var(--line-soft);
  box-shadow:var(--edge-top), 0 6px 16px rgba(0,0,0,.4);
}
.product-card:hover{
  transform:translateY(-4px); border-color:rgba(180,155,255,.55);
  box-shadow:var(--edge-top), 0 14px 30px rgba(0,0,0,.5), var(--glow-lav);
}
.product-card.selected{
  border-color:var(--lav)!important;
  background:linear-gradient(168deg,#402d6e 0%, #2a1d4c 60%, #1d1438 100%);
  box-shadow:inset 0 0 0 1px rgba(180,155,255,.35), 0 0 0 1px rgba(180,155,255,.25), 0 14px 32px rgba(0,0,0,.5), var(--glow-lav);
}
.product-card.selected:after{background:var(--lav); color:#1d1033}
.product-card img{filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
.product-price{color:var(--lav-hi); text-shadow:0 1px 0 rgba(0,0,0,.5)}
.product-card:before{background:linear-gradient(90deg,transparent,var(--lav-lo),transparent)}




/* =====================================================================
   7. Shop
   ===================================================================== */
.store-toolbar{
  background:linear-gradient(168deg,#241a40,#1a1331);
  border:1px solid var(--line-soft); border-radius:var(--r-md); padding:14px;
  box-shadow:var(--edge-top), var(--edge-bottom), var(--lift-1);
}
.store-search input,.store-toolbar input,.store-sort select{
  background:linear-gradient(180deg,#140d26,#1b1333);
  border:1px solid var(--line); border-radius:11px; color:var(--text);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
.store-search input:focus,.store-toolbar input:focus,.store-sort select:focus{
  border-color:var(--lav); box-shadow:inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 3px rgba(180,155,255,.18); outline:none;
}
.store-chip{
  background:linear-gradient(180deg,#2f2249,#241a3c);
  border:1px solid var(--line); color:#cdbcf0; border-radius:999px;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 2px 0 #1a1230, 0 5px 12px rgba(0,0,0,.35);
  transition:transform .12s, box-shadow .16s, background .16s, color .16s;
}
.store-chip:hover{transform:translateY(-1px); color:#fff; border-color:rgba(180,155,255,.5)}
.store-chip.active{
  background:linear-gradient(180deg, var(--lav), var(--lav-lo)); color:#1d1033; border-color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 var(--lav-deep), 0 7px 16px rgba(118,70,230,.4);
}
.store-chip i{background:rgba(0,0,0,.25); border-radius:999px; padding:1px 6px; font-style:normal}
.store-chip.active i{background:rgba(255,255,255,.3)}

.store-card{
  border-radius:18px;
  background:linear-gradient(168deg,#271c45 0%, #1c1435 52%, #150f28 100%);
  border:1px solid var(--line-soft);
  box-shadow:var(--edge-top), var(--edge-bottom), var(--lift-1);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .24s, border-color .2s;
}
.store-card:hover{
  transform:translateY(-6px);
  border-color:rgba(180,155,255,.5);
  box-shadow:var(--edge-top), 0 22px 44px rgba(0,0,0,.55), var(--glow-lav);
}
.store-img{                                   /* carved well for the photo */
  background:
    radial-gradient(ellipse at 50% 18%, rgba(180,155,255,.12), transparent 62%),
    linear-gradient(180deg,#191130,#241a3e);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.07);
  border-radius:14px;
}
.store-card img{filter:drop-shadow(0 12px 14px rgba(0,0,0,.55))}
.store-price{color:var(--text); text-shadow:0 2px 0 rgba(0,0,0,.45)}
.store-label{color:var(--muted)}
.store-fav{
  background:linear-gradient(180deg, rgba(42,31,72,.92), rgba(26,19,49,.92));
  border:1px solid var(--line); color:#bda9e8; backdrop-filter:blur(6px);
  box-shadow:0 3px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1);
}
.store-fav:hover,.store-fav.active{color:var(--orchid); border-color:rgba(227,166,255,.55)}
.store-fab-btn{
  background:linear-gradient(180deg, #c8b0ff, var(--lav-lo)); color:#1d1033;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 0 var(--lav-deep), 0 10px 20px rgba(118,70,230,.45);
  transition:transform .13s, box-shadow .16s;
}
.store-fab-btn:hover:not(:disabled){transform:translateY(-2px)}
.store-fab-btn:active:not(:disabled){transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 var(--lav-deep)}
.store-cart-bar,.shop-cart-bar{
  background:linear-gradient(168deg, rgba(44,31,78,.96), rgba(25,18,46,.96))!important;
  border:1px solid rgba(180,155,255,.3)!important; border-radius:16px!important;
  box-shadow:var(--edge-top), 0 -2px 0 rgba(0,0,0,.4) inset, 0 18px 40px rgba(0,0,0,.55)!important;
}

/* =====================================================================
   8. Feed rail, footer, misc
   ===================================================================== */
.activity-rail{
  background:linear-gradient(180deg,#140e26,#0f0a1d);
  border-right:1px solid var(--line-soft);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
}
.feed-card{
  background:linear-gradient(160deg,#2a1f4a,#1a1332)!important;
  border:1px solid var(--line-soft)!important; border-left:2px solid var(--lav)!important;
  box-shadow:var(--edge-top), 0 5px 14px rgba(0,0,0,.4);
}
.feed-card:nth-child(3n){border-left-color:var(--peri)!important}
.feed-card:nth-child(4n){border-left-color:var(--orchid)!important}
.feed-meta b{color:var(--mint)}
.live-label{color:var(--mint)}
.footer{border-top:1px solid var(--line-soft)}
.modal{
  background:linear-gradient(168deg,#2b2048 0%, #1d1538 55%, #150f28 100%);
  border:1px solid var(--line);
  box-shadow:var(--edge-top), 0 30px 90px rgba(0,0,0,.65);
}
.modal h2{text-shadow:0 2px 0 rgba(0,0,0,.45)}
.toast{
  background:linear-gradient(168deg,#352651,#201739);
  border:1px solid rgba(180,155,255,.45);
  box-shadow:var(--edge-top), 0 16px 40px rgba(0,0,0,.6);
}
.page-heading h1{text-shadow:0 3px 0 rgba(0,0,0,.35)}
.eyebrow{color:var(--lav-hi)}
.eyebrow:before{background:var(--lav)}

/* =====================================================================
   9. Compact layout on tablets/phones — keep everything close together
   ===================================================================== */
@media (max-width:900px){
  .workspace{padding:12px!important}
  .upgrade-arena{gap:8px!important}
  .chance-area{width:100%} .chance-frame .rl,.rl{width:100%!important; max-width:230px!important; margin:0 auto}
  .arena-controls{gap:8px!important; margin-top:8px!important}
  .balance-control{padding:12px 14px!important}
  .balance-control strong{font-size:17px}
  .arena-cta .upgrade-btn{min-height:54px!important; font-size:15px!important}
  .multiplier-controls{padding:10px!important; gap:6px!important}
  .multiplier-controls button{padding:10px 6px!important; font-size:12px!important; min-width:48px}
}
@media (max-width:900px){
  /* five keys must fit one row without hiding under the support bubble */
  .multiplier-controls{flex-wrap:nowrap!important; padding:10px 8px!important}
  .multiplier-controls button{flex:1 1 0!important; min-width:0!important; padding:11px 2px!important}
  .workspace{padding-bottom:78px!important}
}
@media (max-width:420px){
  .rl{max-width:200px!important}
  .multiplier-controls button{font-size:11px!important}
}

/* =====================================================================
   10. Item slots — picture fills the plate, info sits on a base strip
   ===================================================================== */
@media (min-width:901px){
  .selected-item{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    gap:8px!important; overflow:hidden!important;
  }
  .selected-item img{
    position:relative!important; width:100%!important; height:100%!important;
    max-height:none!important; object-fit:contain!important; margin:0!important;
    padding:4px 8px;
  }
  .selected-item .empty-slot{margin:0!important}
  /* info strip: name+category left, price right — reads like a price tag */
  .selected-item .slot-info{
    display:flex!important; align-items:center; justify-content:space-between; gap:10px;
    margin:0!important; padding:10px 12px; border-radius:11px;
    background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.25));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.45);
  }
  .selected-item .slot-info h3{font-size:14px!important; margin:0 0 2px!important}
  .selected-item .slot-info p{font-size:10px!important; color:var(--dim)}
  .selected-item .slot-info .slot-price{
    position:static!important; margin:0!important; flex:0 0 auto;
    font-size:17px!important; font-weight:800; letter-spacing:-.3px; white-space:nowrap;
  }
}
/* a soft glow pad under the item so it does not float on a flat plate */
.selected-item:after{
  content:""; position:absolute; left:18%; right:18%; top:52%; height:34%;
  background:radial-gradient(ellipse at 50% 50%, rgba(150,110,255,.18), transparent 70%);
  filter:blur(14px); pointer-events:none; z-index:0;
}
.selected-item>*{position:relative; z-index:1}

/* =====================================================================
   11. Volumetric labels on the remaining interactive text
   ===================================================================== */
.store-price,.product-price,.orders-summary b,.profile-balance,.mini-stat b{
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}
.page-heading h1,.modal h2,.support-head-id b{letter-spacing:-.4px}
.count,.tab-badge{
  background:linear-gradient(180deg,#3a2b5e,#2a1f47); color:#cfbdf2;
  border:1px solid rgba(180,155,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}

/* =====================================================================
   12. Wide Upgrader-style layout
   Full-width (max 1400px). Slots are tall rectangles, dial is large.
   NOT squished into a narrow centered column.
   ===================================================================== */
@media (min-width:901px){
  .workspace{
    max-width:1400px!important; margin-left:auto!important; margin-right:auto!important;
  }
  .upgrade-arena{
    display:grid!important;
    grid-template-columns:1fr 340px 1fr!important;
    gap:0 32px!important; max-width:1400px!important;
    margin:20px auto 0!important; align-items:stretch!important;
  }
  .arena-controls{
    display:grid!important;
    grid-template-columns:1fr 340px 1fr!important;
    gap:0 32px!important; max-width:1400px!important;
    margin:22px auto 0!important; align-items:stretch!important;
  }
  .selected-item,
  .selected-item.target{
    width:100%!important; height:auto!important; min-height:320px!important;
    aspect-ratio:auto!important; max-width:none!important; margin:0!important;
  }
  .chance-frame{
    display:flex!important; align-items:center!important; justify-content:center!important;
    width:100%!important; height:auto!important; min-height:320px!important;
    padding:0!important; margin:0!important; aspect-ratio:auto!important;
  }
  .chance-frame .chance-area{width:100%!important; height:auto!important; display:flex!important; align-items:center; justify-content:center}
  .rl{width:100%!important; max-width:320px!important; margin:0 auto}

  .multiplier-controls{flex-wrap:nowrap!important; padding:14px!important; gap:8px!important}
  .multiplier-controls button{flex:1 1 0!important; min-width:0!important; padding:12px 4px!important; font-size:13px!important}

  .catalogs{
    max-width:1400px!important; margin:28px auto 0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important;
  }
  .catalogs .items-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  .catalog-panel .panel-head{flex-wrap:nowrap!important; align-items:center!important; gap:10px!important; min-height:60px!important; padding:12px 14px!important}
  .inventory-heading{display:flex!important; align-items:center; gap:10px; min-width:0}
  .inventory-heading h2,.catalog-panel .panel-head h2{margin:0!important; white-space:nowrap; font-size:15px!important}
  .inventory-shop-link{margin-left:auto!important; padding:9px 14px!important; font-size:12px!important; white-space:nowrap}
  .catalog-panel .panel-head select{margin-left:auto!important; max-width:150px!important}
}
@media (min-width:901px) and (max-width:1200px){
  .upgrade-arena,
  .arena-controls{grid-template-columns:1fr 280px 1fr!important; gap:0 20px!important}
  .rl{max-width:260px!important}
}
@media (min-width:1201px) and (max-width:1440px){
  .workspace{max-width:1200px!important}
  .upgrade-arena,.arena-controls{max-width:1200px!important}
  .catalogs{max-width:1200px!important}
}

/* =====================================================================
   13. Coin = round lavender token with the realgrader chevrons (no gold)
   ===================================================================== */
.coin-ico{
  stroke:none!important; fill:none; color:inherit;
  filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.5));
}
.coin-ico .cb{fill:#5b3db5!important; stroke:none!important}
.coin-ico .cr{fill:#a98bff!important; stroke:#7f5fe0!important; stroke-width:.7!important}
.coin-ico .cm{fill:none!important; stroke:#fbf8ff!important; stroke-width:1.9!important; stroke-linecap:round; stroke-linejoin:round}
.coin-ico .ch{fill:none!important; stroke:#fff!important; stroke-opacity:.55!important; stroke-width:1.1!important; stroke-linecap:round}
.store-cost .coin-ico,.store-unit .coin-ico,.profile-balance-coin .coin-ico{color:inherit!important}

/* =====================================================================
   14. "Добавить с баланса": slider on the left, bare amount on the right
   ===================================================================== */
.balance-control{
  flex-direction:row!important; align-items:center!important; justify-content:flex-start!important;
  gap:16px!important; padding:16px 18px!important;
}
.balance-control input[type=range]{flex:1 1 auto; min-width:0; width:auto!important}
.balance-amount{
  display:inline-flex!important; align-items:center; gap:8px; flex:0 0 auto;
  min-width:86px; justify-content:flex-end; padding:8px 12px; border-radius:12px;
  background:linear-gradient(180deg,#120b22,#1c1432);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.07);
}
.balance-amount strong{
  font-size:20px!important; font-weight:800; letter-spacing:-.3px; font-variant-numeric:tabular-nums;
  color:var(--lav-hi)!important; text-shadow:0 2px 0 rgba(0,0,0,.5)!important;
}
.balance-amount .coin-ico{width:24px; height:24px; flex:0 0 auto}
@media (max-width:900px){
  .balance-control{padding:12px 14px!important; gap:12px!important}
  .balance-amount strong{font-size:18px!important}
  .balance-amount .coin-ico{width:22px; height:22px}
}

/* =====================================================================
   15. Target filters — compact one-row with toggle between price and name
   ===================================================================== */
.target-filters{
  display:flex!important; flex-wrap:nowrap!important; align-items:center!important;
  gap:8px!important; padding:10px 12px!important;
  background:linear-gradient(180deg,rgba(30,22,56,.7),rgba(20,14,38,.5));
  border-radius:var(--r-sm); margin-bottom:8px;
}
.target-filter-toggle{
  display:flex; gap:0; border-radius:8px; overflow:hidden; flex:0 0 auto;
  background:#1a1230; border:1px solid var(--line-soft);
}
.target-filter-toggle button{
  padding:8px 12px; font-size:12px; color:var(--muted); background:transparent;
  border:none; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s;
}
.target-filter-toggle button.active{background:var(--lav-deep); color:#fff}
.target-filter-toggle button:hover:not(.active){color:var(--lav-hi)}
.target-filter-body{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px}
.target-filter-body .shop-price-inputs{flex:1; display:flex; align-items:center; gap:6px}
.target-filter-body .shop-price-inputs input{
  width:70px; padding:7px 10px; font-size:13px;
  background:#120c1f; border:1px solid var(--line-soft); color:var(--text);
  border-radius:8px; outline:none;
}
.target-filter-body .shop-price-inputs input:focus{border-color:var(--lav)}
.target-filter-body .target-name-input{
  flex:1; padding:7px 10px; font-size:13px;
  background:#120c1f; border:1px solid var(--line-soft); color:var(--text);
  border-radius:8px; outline:none;
}
.target-filter-body .target-name-input:focus{border-color:var(--lav)}

/* =====================================================================
   16. Locked cards — items cheaper than source price × 0.75
   ===================================================================== */
.product-card.locked{
  opacity:.45; pointer-events:none; position:relative; filter:grayscale(.4);
}
.product-card.locked::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:rgba(11,8,20,.55);
  display:flex; align-items:center; justify-content:center;
}
.product-card .lock-overlay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; color:var(--muted); opacity:.7;
}
.product-card .lock-overlay .icon{width:28px; height:28px}

/* =====================================================================
   17. Cross-browser consistency (Yandex / Chrome / Firefox / Safari / mobile)
   ===================================================================== */
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scrollbar-gutter:stable;               /* same width with or without a scrollbar */
  overflow-x:hidden;                     /* fallback for engines without clip */
}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
body{
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; min-width:0;
}
img,svg,video{max-width:100%}
button,input,select{font-family:inherit}
input[type=number]{-moz-appearance:textfield; appearance:textfield}
input[type=range]{-webkit-appearance:none; appearance:none; touch-action:pan-y}
/* Smooth slider: no transitions on the thumb/track while dragging */
.balance-control input[type=range]::-webkit-slider-thumb,
.balance-control input[type=range]::-moz-range-thumb{transition:none!important}
.balance-control{will-change:auto; contain:layout style}
.balance-amount strong{font-variant-numeric:tabular-nums; min-width:3ch; display:inline-block; text-align:right}
/* Fixed-size flex/grid children must be able to shrink in every engine */
.workspace,.upgrade-arena,.arena-controls,.catalogs,.catalog-panel,.items-grid,.selected-item,.layout>*{min-width:0}

/* Cancel-order button */
.delivery-cancel{
  margin-top:10px; border-color:#6a3040!important; color:#ffb0bc!important;
  background:linear-gradient(135deg,#2e1a22,#241018)!important;
}
.delivery-cancel:hover:not(:disabled){border-color:#ff8a9c!important; background:linear-gradient(135deg,#3a2029,#2c1420)!important}
.delivery-cancel .icon{width:14px;height:14px}

/* =====================================================================
   18. Fixed-size picture blocks — photos adapt to the block, never the other way
   ===================================================================== */
@media (min-width:901px){
  .selected-item,.selected-item.target{
    height:340px!important; min-height:340px!important; max-height:340px!important;
    overflow:hidden!important;
  }
  .chance-frame{height:340px!important; min-height:340px!important; max-height:340px!important}
  .selected-item img{
    min-height:0!important; min-width:0!important; max-width:100%!important; max-height:100%!important;
    width:100%!important; height:100%!important; object-fit:contain!important;
  }
}
@media (min-width:901px) and (max-width:1200px){
  .selected-item,.selected-item.target,.chance-frame{height:300px!important; min-height:300px!important; max-height:300px!important}
}
/* slot picture can never push its container (all widths) */
.selected-item img{object-fit:contain; max-width:100%; max-height:100%}
.slot-pop img{max-height:100%}

/* Shop: photo fills the square well, whatever its natural size */
.store-img{position:relative!important; aspect-ratio:1/1!important; padding:0!important; overflow:hidden!important; display:block!important}
.store-img img{
  position:absolute!important; left:8%; top:8%; width:84%!important; height:84%!important;
  max-width:none!important; object-fit:contain!important; transform:none;
}
.store-card:hover .store-img img{transform:scale(1.06)!important}
.store-img>*:not(img){z-index:2}

/* Lists (inventory / upgrade targets): fixed-height image area */
.product-card img{height:104px!important; min-height:104px; max-height:104px; width:100%!important; object-fit:contain!important}
@media(max-width:760px){.product-card img{height:84px!important; min-height:84px; max-height:84px}}

/* =====================================================================
   19. Square slots, +15% roulette, 3D activity feed
   ===================================================================== */
@media (min-width:901px){
  .upgrade-arena,.arena-controls{
    --slot:400px; --rl:391px;
    grid-template-columns:minmax(0,1fr) var(--rl) minmax(0,1fr)!important;
    align-items:center!important;
  }
  /* square plates: width follows the column (capped), height = width */
  .selected-item,.selected-item.target{
    width:100%!important; max-width:var(--slot)!important;
    height:auto!important; min-height:0!important; max-height:none!important;
    aspect-ratio:1/1!important; justify-self:center!important; align-self:center!important;
  }
  .chance-frame{
    width:var(--rl)!important; height:var(--rl)!important; min-height:0!important; max-height:none!important;
    aspect-ratio:1/1!important; align-self:center!important; justify-self:center!important;
  }
  .rl{max-width:calc(var(--rl) - 23px)!important}
  /* controls line up with the square plates */
  .arena-controls .balance-control,.arena-controls .multiplier-controls{
    width:100%; max-width:var(--slot); justify-self:center;
  }
}
@media (min-width:901px) and (max-width:1440px){
  .upgrade-arena,.arena-controls{--slot:360px; --rl:391px}
}
@media (min-width:901px) and (max-width:1200px){
  .upgrade-arena,.arena-controls{--slot:300px; --rl:322px; gap:0 16px!important}
}

/* ---- activity feed: volumetric 3D tiles ---- */
.activity-rail{perspective:900px; perspective-origin:100% 30%}
.feed-list{transform-style:preserve-3d}
.feed-card{
  border-radius:14px!important;
  background:
    linear-gradient(160deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 38%),
    linear-gradient(160deg,#3a2b66 0%,#241a46 55%,#170f31 100%)!important;
  border:1px solid rgba(190,165,255,.28)!important;
  border-left:3px solid var(--lav)!important;
  transform:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.45),
    0 3px 0 #1b1238,
    0 6px 0 #130b29,
    0 9px 0 #0c0719,
    0 16px 24px rgba(0,0,0,.6),
    0 0 18px rgba(150,110,255,.12)!important;
  animation:feed-in3d .5s var(--ease-out) backwards!important;
  animation-delay:calc(var(--i,0) * 40ms)!important;
  transition:transform .25s ease, box-shadow .25s ease!important;
  margin-bottom:14px!important;
}
.feed-card img{
  transform:translateZ(26px) scale(1.04);
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(160,120,255,.25))!important;
}
.feed-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -2px 0 rgba(0,0,0,.45),
    0 4px 0 #1b1238, 0 8px 0 #130b29, 0 12px 0 #0c0719,
    0 22px 30px rgba(0,0,0,.65), 0 0 24px rgba(170,130,255,.25)!important;
}
@keyframes feed-in3d{
  from{opacity:0; transform:translateY(-14px) scale(.96)}
}
@media (max-width:900px){
  .feed-card{transform:none; animation:none!important}
  .feed-card img{transform:none}
}


/* =====================================================================
   20. Support chat — volumetric 3D, site palette
   ===================================================================== */
.support-fab{
  background:linear-gradient(180deg,#b79bff 0%,#8f64f2 55%,#6d44c9 100%)!important;
  border:1px solid rgba(220,200,255,.45)!important; color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(40,15,100,.45),
             0 4px 0 #4a2c99, 0 8px 0 #34207a, 0 16px 28px rgba(60,25,140,.55)!important;
  position:fixed;
}
.support-fab:hover{transform:translateY(-3px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(40,15,100,.45),
             0 6px 0 #4a2c99, 0 11px 0 #34207a, 0 22px 34px rgba(80,35,170,.6)!important}
.support-fab:active{transform:translateY(3px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 #4a2c99, 0 6px 14px rgba(60,25,140,.5)!important}
/* red unread dot */
.support-dot{display:none; position:absolute; top:-3px; right:-3px; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8fa0,#ff2d55 60%,#c40f38);
  border:2px solid #1a1030; box-shadow:0 0 0 0 rgba(255,45,85,.6), 0 2px 6px rgba(0,0,0,.5)}
.support-fab.has-dot .support-dot{display:block; animation:support-dot-pulse 1.6s ease-out infinite}
@keyframes support-dot-pulse{70%{box-shadow:0 0 0 9px rgba(255,45,85,0), 0 2px 6px rgba(0,0,0,.5)}100%{box-shadow:0 0 0 0 rgba(255,45,85,0), 0 2px 6px rgba(0,0,0,.5)}}

.support-panel{
  background:linear-gradient(168deg,#2b2050 0%,#1c1436 48%,#120c26 100%)!important;
  border:1px solid rgba(190,165,255,.32)!important; border-radius:26px!important;
  transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.4),
             0 5px 0 #1b1238, 0 10px 0 #120a28, 0 22px 50px rgba(0,0,0,.65), 0 0 40px rgba(140,100,255,.16)!important;
  animation:support-in3d .5s var(--ease-out) both!important;
}
@keyframes support-in3d{from{opacity:0; transform:translateY(26px) scale(.95)}
  to{opacity:1; transform:none}}
.support-head{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 60%),linear-gradient(180deg,#3a2b6a,#271c4b)!important;
  border-bottom:1px solid rgba(190,165,255,.25)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 rgba(0,0,0,.25)!important;
}
.support-avatar{
  background:linear-gradient(180deg,#c9b1ff,#8a5cf0 60%,#6a40c6)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 #3f2490, 0 8px 14px rgba(40,15,100,.55)!important;
}
.support-head-btn{
  background:linear-gradient(180deg,#3b2d68,#271c4b)!important; border:1px solid rgba(190,165,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 #140c2c!important;
}
.support-head-btn:hover{transform:translateY(-1px)!important}
.support-head-btn:active{transform:translateY(2px)!important; box-shadow:none!important}
.support-messages{background:radial-gradient(ellipse at 50% 0%,rgba(150,110,255,.1),transparent 60%)!important}
.support-bubble{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.28), 0 3px 0 rgba(0,0,0,.35), 0 9px 16px rgba(0,0,0,.35)!important;
}
.support-msg.user .support-bubble{
  background:linear-gradient(180deg,#b79bff 0%,#8f64f2 60%,#7a4de0 100%)!important; color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(40,15,100,.4), 0 3px 0 #4a2c99, 0 9px 16px rgba(60,25,140,.45)!important;
}
.support-msg.support .support-bubble{
  background:linear-gradient(180deg,#3b2d68 0%,#2a1f4d 100%)!important; color:#efe6ff!important;
  border:1px solid rgba(190,165,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.35), 0 3px 0 #120a28, 0 9px 16px rgba(0,0,0,.4)!important;
}
.support-msg-bot .support-bubble,.support-msg-system .support-bubble{
  background:linear-gradient(180deg,#2a2150,#1e1740)!important; border:1px dashed rgba(190,165,255,.3)!important;
}
.support-msg{margin-bottom:4px}
.support-msg.user{transform-origin:100% 50%}
.support-msg.support{transform-origin:0% 50%}
.support-compose,.support-namegate{
  background:linear-gradient(180deg,#241a45,#190f33)!important; border-top:1px solid rgba(190,165,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important;
}
.support-compose textarea,.support-namegate input{
  background:linear-gradient(180deg,#140d2b,#1d1438)!important; border:1px solid rgba(190,165,255,.25)!important;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.08)!important;
}
.support-compose textarea:focus,.support-namegate input:focus{border-color:#a98bff!important; box-shadow:inset 0 3px 8px rgba(0,0,0,.55), 0 0 0 3px rgba(150,110,255,.25)!important}
.btn-send{
  background:linear-gradient(180deg,#b79bff,#8f64f2 60%,#7a4de0)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 #4a2c99, 0 8px 14px rgba(60,25,140,.5)!important;
}
.btn-send:hover{transform:translateY(-1px)!important}
.btn-send:active{transform:translateY(3px)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 #4a2c99!important}
@media(max-width:760px){
  .support-panel{transform:none; animation:support-in .3s ease both!important}
}

/* chat scrollbar: slim, in the site palette (no white bar) */
.support-messages{scrollbar-width:thin; scrollbar-color:rgba(160,125,255,.45) transparent}
.support-messages::-webkit-scrollbar{width:6px; background:transparent}
.support-messages::-webkit-scrollbar-track{background:transparent}
.support-messages::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a98bff,#7a4de0); border-radius:6px; border:1px solid rgba(0,0,0,.25)}
.support-messages::-webkit-scrollbar-button{display:none; width:0; height:0}

/* =====================================================================
   21. Deposit modal — volumetric 3D
   ===================================================================== */
.modal:has(.dep-modal){
  background:linear-gradient(168deg,#2b2050 0%,#1c1436 48%,#120c26 100%)!important;
  border:1px solid rgba(190,165,255,.32)!important; border-radius:26px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.4),
             0 5px 0 #1b1238, 0 10px 0 #120a28, 0 28px 60px rgba(0,0,0,.7), 0 0 50px rgba(140,100,255,.16)!important;
}
.dep-title{text-shadow:0 2px 0 rgba(0,0,0,.45)}
.dep-tabs{
  background:linear-gradient(180deg,#140d2b,#1d1438)!important; border:1px solid rgba(190,165,255,.22)!important;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.08)!important; border-radius:16px!important;
}
.dep-tab{border-radius:12px!important}
.dep-tab.active{
  background:linear-gradient(180deg,#b79bff,#8f64f2 60%,#7a4de0)!important; color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #4a2c99, 0 8px 14px rgba(60,25,140,.5)!important;
  transform:translateY(-1px);
}
.pay-tile{
  background:linear-gradient(180deg,#3b2d68 0%,#2a1f4d 100%)!important;
  border:1px solid rgba(190,165,255,.25)!important; border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.35), 0 4px 0 #120a28, 0 10px 18px rgba(0,0,0,.4)!important;
  transition:transform .15s, box-shadow .15s, border-color .15s!important;
}
.pay-tile img{filter:drop-shadow(0 6px 6px rgba(0,0,0,.5)); object-fit:contain}
.pay-tile:hover{transform:translateY(-2px)!important}
.pay-tile:active{transform:translateY(3px)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 #120a28!important}
.pay-tile.active{
  background:linear-gradient(180deg,#5a3fa8 0%,#3f2c80 100%)!important; border-color:#b79bff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.35), 0 4px 0 #2a1a60, 0 10px 20px rgba(110,70,230,.45), 0 0 0 2px rgba(183,155,255,.35)!important;
}
.dep-chip{
  background:linear-gradient(180deg,#3b2d68,#2a1f4d)!important; border:1px solid rgba(190,165,255,.25)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 #120a28!important; border-radius:10px!important;
}
.dep-chip:active{transform:translateY(2px); box-shadow:none!important}
.dep-chip.active{
  background:linear-gradient(180deg,#b79bff,#8f64f2 60%,#7a4de0)!important; color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #4a2c99!important;
}
.dep-amount-box,.dep-promo{
  background:linear-gradient(180deg,#140d2b,#1d1438)!important; border:1px solid rgba(190,165,255,.25)!important;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.08)!important; border-radius:14px!important;
}
.dep-submit{
  background:linear-gradient(180deg,#b79bff 0%,#8f64f2 55%,#6d44c9 100%)!important; color:#fff!important;
  border:1px solid rgba(220,200,255,.45)!important; border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(40,15,100,.45), 0 5px 0 #4a2c99, 0 10px 0 #34207a, 0 18px 30px rgba(60,25,140,.5)!important;
  text-shadow:0 1px 0 rgba(40,15,100,.6); transition:transform .15s, box-shadow .15s!important;
}
.dep-submit:hover{transform:translateY(-2px)!important; filter:none!important}
.dep-submit:active{transform:translateY(5px)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 #4a2c99, 0 6px 14px rgba(60,25,140,.5)!important}
.pay-grid.cards-only,.dep-modal[data-tab="cards"] .pay-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important}
.pay-grid.cards-only .pay-tile{padding:14px 8px 12px!important}
.pay-grid.cards-only .pay-tile img{width:64px!important; height:64px!important}

/* =====================================================================
   22. Win celebration around the roulette
   ===================================================================== */
.chance-frame{position:relative}
.win-fx{position:absolute; left:50%; top:50%; width:0; height:0; z-index:30; pointer-events:none}
.win-fx>*{position:absolute; display:block}
.wfx-rays{
  left:-300px; top:-300px; width:600px; height:600px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,231,140,.55) 0deg 6deg,transparent 6deg 20deg);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 38%,transparent 70%);
          mask:radial-gradient(circle,transparent 30%,#000 38%,transparent 70%);
  animation:wfx-rays 4s linear both;
}
@keyframes wfx-rays{0%{opacity:0; transform:rotate(0) scale(.5)} 15%{opacity:.95} 100%{opacity:0; transform:rotate(110deg) scale(1.15)}}
.feed-old{animation:none!important}

/* Deposit modal: even more depth */
.modal:has(.dep-modal){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.45),
             0 6px 0 #1b1238, 0 12px 0 #140b2c, 0 18px 0 #0d0720, 0 36px 70px rgba(0,0,0,.75), 0 0 60px rgba(140,100,255,.2)!important;
}
.dep-title{font-size:26px; text-shadow:0 1px 0 #6d44c9, 0 2px 0 #4a2c99, 0 3px 0 #2a1a60, 0 8px 14px rgba(0,0,0,.5)}
.pay-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -3px 0 rgba(0,0,0,.4), 0 6px 0 #120a28, 0 14px 22px rgba(0,0,0,.45)!important}
.pay-tile.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -3px 0 rgba(0,0,0,.35), 0 6px 0 #2a1a60, 0 16px 26px rgba(110,70,230,.5), 0 0 0 2px rgba(183,155,255,.4)!important; transform:translateY(-3px)}
.pay-tile img{filter:drop-shadow(0 8px 6px rgba(0,0,0,.55)); transform:translateZ(0)}
.dep-submit{
  display:flex; align-items:center; justify-content:center; gap:8px; font-size:17px!important; padding:16px 20px!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(40,15,100,.5), 0 7px 0 #4a2c99, 0 14px 0 #34207a, 0 24px 36px rgba(60,25,140,.55)!important;
}
.dep-submit .coin-ico{width:22px; height:22px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.dep-submit:active{transform:translateY(7px)!important; box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 0 0 #4a2c99, 0 8px 16px rgba(60,25,140,.5)!important}
.dep-amount-box{box-shadow:inset 0 4px 10px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(0,0,0,.3)!important}

/* =====================================================================
   23. Mobile: no white strips while scrolling / overscrolling
   (background-attachment:fixed is unreliable on phones — the gradient now lives on a fixed layer)
   ===================================================================== */
html{background-color:#0e0a1c; overscroll-behavior-y:none}
body:not([data-page="admin"]){background:transparent!important; min-height:100vh; min-height:100dvh}
body:not([data-page="admin"])::before{
  content:""; position:fixed; left:0; right:0; top:0; bottom:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -8%, rgba(141,104,255,.22), transparent 58%),
    radial-gradient(900px 600px at 100% 6%, rgba(227,166,255,.12), transparent 55%),
    radial-gradient(800px 600px at 0% 18%, rgba(143,165,255,.12), transparent 55%),
    radial-gradient(600px 400px at 50% 60%, rgba(120,80,200,.08), transparent 50%),
    linear-gradient(180deg,#14102a 0%, #110d22 30%, #0e0a1c 60%, #0b0814 100%);
}
#app{min-height:100vh; min-height:100dvh; background:transparent}

/* 24. coin logo instead of the word "коины" */
.cur{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap;vertical-align:baseline}
.cur .coin-ico{width:1.05em;height:1.05em;flex:none;vertical-align:middle}

/* 25. Google Authenticator step */
.code-input{text-align:center;font-size:28px;font-weight:700;letter-spacing:.5em;padding-left:.5em;font-variant-numeric:tabular-nums}
.code-actions{display:flex;gap:10px;justify-content:space-between;margin-top:12px;flex-wrap:wrap}
.code-actions .btn{flex:1 1 auto;min-height:40px;font-size:13px}
.totp-steps{margin:0 0 12px;padding-left:20px;font-size:13px;line-height:1.5;color:var(--muted,#a99dc9)}
.totp-steps li{margin:3px 0}
.totp-qr{width:200px;height:200px;margin:8px auto 12px;padding:8px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.totp-qr svg{display:block;width:184px;height:184px}
.totp-noqr{color:#333;font-size:12px;text-align:center}
.totp-manual{margin:0 0 12px;font-size:13px;color:var(--muted,#a99dc9)}
.totp-manual summary{cursor:pointer;margin-bottom:6px}
.totp-key{display:flex;gap:8px;align-items:center;margin:6px 0}
.totp-key code{flex:1;min-width:0;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.28);letter-spacing:.08em;word-break:break-all;user-select:all;font-size:13px}
.totp-link{display:inline-block;margin-top:4px;color:var(--bright,#bc98ff)}

/* 26. Steam sign-in button */
.btn-steam{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;color:#dfe9f5;background:linear-gradient(180deg,#2a475e,#1b2838);border:1px solid rgba(139,177,214,.35);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.btn-steam:hover{background:linear-gradient(180deg,#34607e,#22364b);color:#fff}
.btn-steam .steam-ico{flex:none}

/* 27. Auth providers: small coloured logo-only buttons in one row */
.auth-providers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 4px}
.auth-prov{display:flex;align-items:center;justify-content:center;width:54px;height:42px;border-radius:11px;border:1px solid rgba(255,255,255,.18);background:#2a2540;transition:filter .15s,transform .15s,box-shadow .15s}
.auth-prov:hover,.auth-prov:focus-visible{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.35);outline:none}
.auth-prov img{width:22px;height:22px;object-fit:contain;pointer-events:none}
.auth-prov--google{background:#fff;border-color:#fff}
.auth-prov--steam{background:#171a21;border-color:#2b3140}
.auth-prov--yandex{background:#e0115f;border-color:#e0115f}
.auth-prov--vk{background:#0077ff;border-color:#0077ff}
.auth-prov--telegram{background:#2aabee;border-color:#2aabee}

/* 28. Оплата по реквизитам */
.pay-hint{color:#b6a8e0;margin:6px 0 14px;font-size:14px;line-height:1.5}
.pay-req{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.pay-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:10px 12px;border-radius:12px;background:#1b1237;border:1px solid #3a2c5e}
.pay-row span{grid-column:1;font-size:12px;color:#a392d8;text-transform:uppercase;letter-spacing:.6px}
.pay-row b{grid-column:1;font-size:18px;word-break:break-all}
.pay-row .btn-copy-code{grid-column:2;grid-row:1 / span 2}
.pay-note{margin-top:10px;font-size:12px;color:#8f80bd;text-align:center}

/* 29. multi-source upgrade (до 5 предметов) */
.src-stack{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;align-content:center;height:146px;margin:4px 0;position:relative}
.selected-item .src-stack img{width:auto;height:64px;max-width:31%;margin:0;object-fit:contain;filter:drop-shadow(0 8px 8px #0006)}
.selected-item:hover .src-stack img{transform:none}

/* 30. лимиты способов оплаты */
.pay-tile .pay-limit{display:block;margin-top:2px;font-size:10px;font-weight:600;color:#a995c9;letter-spacing:.2px}

/* 31 — Telegram link */
.tg-link{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.tg-link:hover{color:#6fd0ff}
.header-tg{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#37aee2,#1e96c8);box-shadow:0 3px 10px rgba(30,150,200,.4)}
.header-tg:hover{filter:brightness(1.12)}
.tg-fab{position:fixed;left:14px;bottom:14px;z-index:60;width:46px;height:46px}