/* ============================================================
   LUCKROOM · games — кейсы, ракета, мины, апгрейд
   ============================================================ */

/* ---------- общая панель ставки ---------- */
.betpanel{
  display:flex; flex-direction:column; gap:10px; padding:14px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(26,19,36,.96), rgba(14,10,20,.98));
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-md);
}
.betpanel__top{ display:flex; align-items:center; justify-content:space-between; }
.betpanel__label{ font-family:var(--font-disp); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

.stepper{ display:flex; align-items:center; gap:8px; }
.stepper__btn{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-disp); font-size:22px; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid var(--line-soft);
}
.stepper__btn:active{ transform:scale(.95); }
.stepper__field{
  flex:1; height:44px; display:flex; align-items:center; gap:8px; padding:0 12px;
  border-radius:12px; background:rgba(0,0,0,.34); border:1px solid var(--line);
}
.stepper__field img{ width:20px; height:20px;  }
/* клавиатурный фокус в поле ставки должен быть виден */
.stepper__field:focus-within{ outline:2px solid rgba(43,227,139,.6); outline-offset:2px; border-radius:12px; }

  width:100%; background:none; border:0; outline:none; color:var(--text);
  font-family:var(--font-disp); font-size:20px; font-variant-numeric:tabular-nums; letter-spacing:.03em;
}
.stepper__input::-webkit-outer-spin-button,.stepper__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.betpanel--slim{ padding:10px 12px; gap:8px; }
.betpanel--slim .betpanel__top{ display:none; }
.betpanel--slim .stepper__field{ height:40px; }
.betpanel--slim .stepper__btn{ height:40px; }

.quick{ display:flex; gap:6px; }
.quick--scroll{ overflow-x:auto; padding-bottom:2px; }
.quick--scroll button{ flex:0 0 auto; white-space:nowrap; padding:0 12px; }
.quick:not(.quick--scroll) button{ flex:1 1 0; min-width:0; }
.quick button{
  flex:1; height:32px; white-space:nowrap; border-radius:9px; font-size:12.5px; font-weight:700; letter-spacing:.05em;
  color:var(--text-dim); background:rgba(255,255,255,.045); border:1px solid var(--line-soft);
}
.quick button:active{ background:rgba(43,227,139,.16); color:#CFFFE6; }
/* прокручиваемый ряд (например, «без авто / авто ×1.5») не сжимает кнопки:
   им нужна ширина по тексту, иначе подпись обрезается на пару пикселей */
.quick.quick--scroll button{ flex:0 0 auto; }

/* ---------- кейсы ---------- */
.case-tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin:0 -16px; padding-left:16px; padding-right:16px; }
.case-tab{
  flex:0 0 auto; height:34px; padding:0 14px; border-radius:10px; white-space:nowrap;
  font-family:var(--font-disp); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  /* тёмная подложка: на тёплом фоне страницы белая 4% давала 4.49:1 для серого текста */
  color:var(--muted); background:rgba(10,7,14,.45); border:1px solid var(--line-soft);
}
.case-tab.is-active{ color:#04170E; background:linear-gradient(180deg,#FFE7A8,#F5C451); border-color:transparent; }

.case-hero{
  position:relative; display:grid; place-items:center; height:158px; margin:2px 0 2px;
}
.case-hero::before{
  content:""; position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,196,81,.28), transparent 62%);
  filter:blur(6px);
}
.case-hero img{
  position:relative; height:150px; width:auto;
  /* иллюстрации кейсов идут на своём тёмном фоне: маска растворяет края в карточке */
  -webkit-mask-image:radial-gradient(56% 56% at 50% 52%, #000 66%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(56% 56% at 50% 52%, #000 66%, rgba(0,0,0,0) 100%);
  filter:saturate(1.04);
}
.case-hero.is-opened{ animation:heroPop .5s cubic-bezier(.22,1,.36,1); }
@keyframes heroPop{ 0%{ transform:scale(1) } 40%{ transform:scale(1.12) rotate(-2deg) } 100%{ transform:scale(1) } }

/* топ-призы кейса: три самые дорогие вещи, каждая в рамке своей редкости */
.case-top{ display:flex; flex-direction:column; gap:8px; margin:12px 0 2px; }
.case-top__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.case-top__head .eyebrow{ flex:0 0 auto; }
.case-top__head .small{ color:var(--text-dim); }   /* подпись рядом с заголовком: не теряется на сукне */
.case-top__row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.case-top__cell{
  position:relative; display:flex; flex-direction:column; gap:6px; padding:8px 8px 9px;
  border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
  border:1px solid rgba(255,255,255,.08);
}
.case-top__cell.is-first{
  border-color:rgba(245,196,81,.42);
  box-shadow:0 8px 22px rgba(245,196,81,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.case-top__badge{
  position:absolute; top:6px; right:6px;
  font-family:var(--font-disp); font-size:10px; letter-spacing:.14em; color:#2A0710;
  background:linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-radius:5px; padding:2px 5px;
}
.case-top__art{ height:56px; display:grid; place-items:center; }
.case-top__art img{ height:52px; width:auto; filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)); }
.case-top__meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.case-top__meta b{ font-family:var(--font-disp); font-size:15px; color:var(--gold); letter-spacing:.02em; }
.case-top__meta i{
  font-style:normal; font-size:11.5px; line-height:1.25; color:var(--text-dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.case-top__meta em{ font-style:normal; font-size:11px; color:#9FE7C4; letter-spacing:.02em; }

.case-title{ text-align:center; }
.case-title .h1{ font-size:26px; }
.case-title p{ margin:4px 0 0; font-size:13px; color:var(--muted); }

/* барабан */
.reel{
  position:relative; height:106px; overflow:hidden; margin:12px -16px;
  background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.2) 30%, rgba(0,0,0,.2) 70%, rgba(0,0,0,.5));
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.reel::before,.reel::after{
  content:""; position:absolute; top:0; bottom:0; width:56px; z-index:3; pointer-events:none;
}
.reel::before{ left:0; background:linear-gradient(90deg,#0D0B13,transparent); }
.reel::after{ right:0; background:linear-gradient(270deg,#0D0B13,transparent); }
.reel__mark{
  position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; z-index:4;
  background:linear-gradient(180deg, transparent, var(--gold), transparent);
  box-shadow:0 0 16px rgba(245,196,81,.9);
}
.reel__mark::before,.reel__mark::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent;
}
.reel__mark::before{ top:-1px; border-top:8px solid var(--gold); }
.reel__mark::after{ bottom:-1px; border-bottom:8px solid var(--gold); }
.reel__track{
  display:flex; gap:8px; padding:8px 0; will-change:transform;
  transition:transform 4.4s cubic-bezier(.12,.72,.06,1);
}
.reel__item{
  flex:0 0 92px; height:92px; border-radius:12px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:radial-gradient(90% 90% at 50% 20%, color-mix(in srgb, var(--rc) 26%, transparent), rgba(10,8,15,.9));
  border:1px solid color-mix(in srgb, var(--rc) 42%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.reel__item img{ width:52px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.6)); }
.reel__item b{ font-family:var(--font-disp); font-size:12px; color:var(--gold-hi); font-variant-numeric:tabular-nums; }
.reel__item i{ display:block; font-style:normal; font-size:8.5px; line-height:1.2; color:rgba(255,255,255,.7); max-width:84px; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.reel__item span{ font-size:9px; color:rgba(255,255,255,.55); letter-spacing:.02em; max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* пул предметов */
.pool{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pool__cell{
  position:relative; border-radius:12px; padding:8px 6px 6px; text-align:center;
  background:radial-gradient(90% 90% at 50% 15%, color-mix(in srgb, var(--rc) 20%, transparent), rgba(12,9,17,.92));
  border:1px solid color-mix(in srgb, var(--rc) 34%, transparent);
}
.pool__cell img{ width:46px; margin:0 auto; filter:drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
.pool__cell b{ display:block; font-family:var(--font-disp); font-size:11.5px; color:var(--gold-hi); font-variant-numeric:tabular-nums; margin-top:3px; }
.pool__cell i{ display:block; font-style:normal; font-size:9px; line-height:1.25; color:rgba(255,255,255,.62); margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pool__cell span{ display:block; font-size:9.5px; color:rgba(255,255,255,.5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pool__cell em{ display:block; font-style:normal; font-size:9.5px; color:#9FE7C4; font-variant-numeric:tabular-nums; margin-top:1px; }

/* ---------- ракета ---------- */
.rocket-stage{
  position:relative; border-radius:var(--r-lg); overflow:hidden; height:290px;
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(43,227,139,.12), transparent 60%),
    linear-gradient(180deg, #0F0D16, #0D0B13);
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.rocket-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.rocket-mult{
  position:absolute; left:0; right:0; top:22px; text-align:center; z-index:3;
  font-family:var(--font-disp); font-size:58px; font-weight:600; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:#EFFBF5; text-shadow:0 0 32px rgba(43,227,139,.55);
  transition:color .2s ease;
}
.rocket-mult.is-crashed{ color:#FF6F8B; text-shadow:0 0 32px rgba(255,45,85,.6); }
.rocket-mult.is-cashed{ color:var(--gold-hi); text-shadow:0 0 34px rgba(245,196,81,.7); }
.rocket-ship{
  position:absolute; width:74px; z-index:2;
  filter:drop-shadow(0 8px 22px rgba(245,196,81,.28));
  transition:opacity .2s ease;
}
/* ---------- мины ---------- */
.mines-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; max-width:300px; margin:0 auto; width:100%; }
.mine{
  position:relative; aspect-ratio:1; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(38,29,50,.9), rgba(18,13,26,.95));
  border:1px solid rgba(176,107,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
.mine:active:not(:disabled){ transform:scale(.94); }
.mine.is-open{ background:linear-gradient(180deg, rgba(43,227,139,.2), rgba(10,40,28,.9)); border-color:rgba(43,227,139,.45); }
.mine.is-bomb{ background:linear-gradient(180deg, rgba(255,45,85,.24), rgba(60,8,20,.9)); border-color:rgba(255,45,85,.5); }
.mine.is-dim{ opacity:.4; }
.mine svg{ width:24px; height:24px; }

/* ---------- апгрейд ---------- */
.up-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.up-ring{
  position:relative; width:196px; height:196px; border-radius:50%;
  background:conic-gradient(from 0deg, #FFF1C4 0%, var(--gold) calc(var(--p,0)*1%), rgba(255,255,255,.06) 0);
  display:grid; place-items:center;
  box-shadow:0 0 44px rgba(245,196,81,.28);
}
.up-ring::before{
  content:""; position:absolute; inset:14px; border-radius:50%;
  background:radial-gradient(circle at 50% 30%, #1B1426, #0B0911 70%);
  border:1px solid rgba(255,255,255,.06);
}
.up-ring__in{ position:relative; z-index:2; text-align:center; }
.up-ring__chance{ font-family:var(--font-disp); font-size:36px; letter-spacing:.02em; }
.up-ring__label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-family:var(--font-disp); }
.up-items{ display:flex; align-items:center; gap:12px; width:100%; }
.up-slot{
  flex:1; border-radius:14px; padding:12px; text-align:center;
  background:linear-gradient(180deg, rgba(32,23,43,.95), rgba(15,11,21,.95));
  border:1px solid var(--line-soft);
}
.up-slot img{ width:62px; margin:0 auto 6px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.up-slot b{ display:block; font-family:var(--font-disp); font-size:15px; color:var(--gold-hi); font-variant-numeric:tabular-nums; }
.up-slot span{ font-size:11px; color:var(--muted); }
.up-arrow{ color:var(--emerald); font-size:22px; }

/* ---------- итог раунда ---------- */
.verdict{
  border-radius:var(--r-lg); padding:16px; text-align:center; position:relative; overflow:hidden;
  border:1px solid var(--line-soft); background:linear-gradient(180deg, rgba(24,18,33,.96), rgba(12,9,18,.98));
  animation:verdictIn .34s cubic-bezier(.22,1,.36,1) both;
}
@keyframes verdictIn{ from{ opacity:0; transform:translateY(12px) scale(.97) } to{ opacity:1; transform:none } }
.verdict.is-win{ border-color:rgba(43,227,139,.4); box-shadow:0 0 40px -10px rgba(43,227,139,.5) inset; }
.verdict.is-lose{ border-color:rgba(255,45,85,.34); }
.verdict__art{ width:88px; margin:0 auto 8px;  filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.verdict__big{ font-family:var(--font-disp); font-size:32px; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.verdict__cap{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:2px; font-family:var(--font-disp); }
.verdict__actions{ display:flex; gap:8px; margin-top:14px; }
.verdict__actions .btn{ flex:1; }

/* ---------- честность ---------- */
.fair-box{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; line-height:1.6;
  background:rgba(0,0,0,.4); border:1px solid var(--line-soft); border-radius:12px; padding:10px 12px;
  color:#9FE7C4; word-break:break-all;
}

/* ---------- турниры ---------- */
.cup{ display:grid; place-items:center; padding:6px 0 2px; }
.cup img{ width:132px;  filter:drop-shadow(0 14px 26px rgba(0,0,0,.6)); }
.pool-big{ font-family:var(--font-disp); font-size:40px; letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--gold-hi); text-align:center; }
.timer{ display:flex; justify-content:center; gap:8px; }
.timer div{
  min-width:52px; padding:6px 0; border-radius:10px; text-align:center;
  background:rgba(0,0,0,.35); border:1px solid var(--line-soft);
}
.timer b{ display:block; font-family:var(--font-disp); font-size:21px; font-variant-numeric:tabular-nums; }
.timer span{ font-size:9.5px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }

/* ---------- задания ---------- */
.task-done{ color:var(--emerald); font-size:12px; font-weight:700; }
.streak{ display:flex; gap:6px; }
.streak div{
  flex:1; height:44px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  font-family:var(--font-disp); font-size:13px; color:var(--muted);
}
.streak div.on{ background:linear-gradient(180deg,#41F59C,#12B96D); color:#04170E; border-color:transparent; }
.streak div.today{ box-shadow:0 0 0 2px rgba(245,196,81,.6); }

/* ---------- плинко ---------- */
.plinko-stage{
  position:relative; height:352px; border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(124,216,255,.10), transparent 60%),
    linear-gradient(180deg,#0F0D16,#0B0911);
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.plinko-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* ---------- колесо ---------- */
.wheel-stage{
  position:relative; display:grid; place-items:center; padding:8px 0 4px;
}
.wheel-stage canvas{
  width:min(330px, 82vw); height:min(330px, 82vw);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));
}

/* ---------- скрэтч ---------- */
.scratch-board{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:330px; margin:0 auto; width:100%;
}
.scratch-card{
  position:relative; aspect-ratio:1; border-radius:14px; display:grid; place-items:center; gap:2px;
  background:radial-gradient(90% 90% at 50% 20%, rgba(255,255,255,.07), rgba(12,9,17,.95));
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .14s ease, background .2s ease, border-color .2s ease;
  padding:6px;
}
.scratch-card img{ width:56%; }
.scratch-card b{ font-size:10px; letter-spacing:.04em; color:var(--muted); font-weight:600; }
.scratch-card.is-covered{
  background:
    repeating-linear-gradient(45deg, rgba(245,196,81,.05) 0 6px, rgba(245,196,81,.02) 6px 12px),
    linear-gradient(180deg,#241A2E,#150F1E);
  border-color:rgba(245,196,81,.18);
}
.scratch-card.is-covered:active{ transform:scale(.96); }
.scratch-card__q{ font-family:var(--font-disp); font-size:28px; color:rgba(245,196,81,.55); }
.scratch-card.is-open{ background:radial-gradient(90% 90% at 50% 20%, rgba(43,227,139,.14), rgba(10,20,16,.95)); border-color:rgba(43,227,139,.3); }

/* ---------- кейс-баты ---------- */
.battle-arena{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  padding:14px; border-radius:var(--r-lg);
  background:
    radial-gradient(60% 80% at 0% 50%, rgba(255,45,85,.12), transparent 60%),
    radial-gradient(60% 80% at 100% 50%, rgba(124,216,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(26,19,36,.95), rgba(12,9,18,.98));
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.battle-side{ text-align:center; padding:8px 4px; border-radius:14px; transition:box-shadow .3s ease, background .3s ease; }
.battle-side__who{ font-family:var(--font-disp); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.battle-side__art{ height:92px; display:grid; place-items:center; margin:4px 0; }
.battle-side__art img{ max-height:88px; filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.battle-side__val{ font-family:var(--font-disp); font-size:18px; color:var(--gold-hi); font-variant-numeric:tabular-nums; }
.battle-side.is-winner{ background:rgba(43,227,139,.1); box-shadow:inset 0 0 0 1px rgba(43,227,139,.35); }
.battle-side.is-loser{ opacity:.5; }
.battle-vs{
  font-family:var(--font-disp); font-size:14px; letter-spacing:.1em; color:#C6BCCC;
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid var(--line-soft);
}

/* фильтр инвентаря */
.filters{ display:flex; gap:6px; }
.filters button{
  height:36px; padding:0 12px; border-radius:9px; font-size:12px; font-weight:600; letter-spacing:.04em;
  /* тёмная подложка: на тёплом фоне страницы белая 4% давала 4.49:1 для серого текста */
  color:var(--muted); background:rgba(10,7,14,.45); border:1px solid var(--line-soft);
}
.filters button.is-on{ color:#04170E; background:linear-gradient(180deg,#41F59C,#12B96D); border-color:transparent; }
.inv__kind{
  position:absolute; top:3px; left:4px; font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* подарки Telegram — квадратные превью, скругляем как медальоны */
img.img--gift{ border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 6px 14px rgba(0,0,0,.55); }
.inv__cell img.img--gift{ border-radius:14px; }

/* ---------- путь подарков ---------- */
/* ---------- путь подарков: башня ---------- */
.tower-wrap{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(245,196,81,.22);
  background:#0D0B13 url(../assets/giftpath/tower.webp) center top / cover no-repeat;
  box-shadow:0 18px 40px rgba(0,0,0,.55), inset 0 0 90px rgba(0,0,0,.75);
}
.tower-wrap::after{          /* виньетка: по краям башня уходит в темноту */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(120% 80% at 50% 42%, rgba(0,0,0,0) 40%, rgba(4,2,8,.72) 100%);
}
.tower-hud{
  position:relative; z-index:3; display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-bottom:1px solid rgba(245,196,81,.16);
  background:linear-gradient(180deg, rgba(10,7,16,.92), rgba(10,7,16,.55));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tower-hud__mult{
  font-family:var(--font-disp); font-size:22px; line-height:1; color:var(--gold-hi);
  text-shadow:0 2px 10px rgba(245,196,81,.45);
}
.tower-hud__mid{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tower-hud__sum{ font-family:var(--font-disp); font-size:14px; color:var(--emerald-hi); }
.tower-hud__step{ font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:#C9BECF; }
.tower-hud.is-risk .tower-hud__sum{ color:var(--gold-hi); }

.tower-stage{ position:relative; z-index:1; padding:10px 10px 12px; }
.tower{ display:flex; flex-direction:column; gap:9px; }

/* этаж: плита из камня с золотой окантовкой, чередуется влево-вправо */
.floor{
  position:relative; display:flex; align-items:center; gap:9px; min-height:42px;
  padding:7px 11px 9px; border-radius:10px;
  /* затемнение — только фона (blend), а не текста: filter гасил и подписи,
     из-за чего значения этажей не дотягивали до AA */
  background-image:linear-gradient(rgba(9,6,12,.58), rgba(9,6,12,.58)), url(../assets/giftpath/slab.webp);
  background-size:100% 100%, 100% 100%; background-repeat:no-repeat;
  background-blend-mode:multiply;
  transition:background-image .25s ease, transform .25s ease, box-shadow .25s ease;
}
.floor.is-shift{ margin-left:18px; margin-right:0; }
.floor:not(.is-shift){ margin-right:18px; }
.floor.is-passed{ background-image:linear-gradient(rgba(10,26,20,.22), rgba(10,26,20,.22)), url(../assets/giftpath/slab.webp); }
.floor.is-next{ background-image:linear-gradient(rgba(9,6,12,.42), rgba(9,6,12,.42)), url(../assets/giftpath/slab.webp); }
.floor.is-current{
  background-image:linear-gradient(rgba(72,54,16,.16), rgba(72,54,16,.16)), url(../assets/giftpath/slab.webp);
  box-shadow:0 0 0 1px rgba(245,196,81,.55), 0 10px 26px rgba(245,196,81,.18);
  transform:translateX(0) scale(1.012);
}
.floor.is-current::after{     /* тёплый свет на текущем этаже */
  content:""; position:absolute; inset:0; border-radius:10px; pointer-events:none;
  background:radial-gradient(70% 120% at 20% 50%, rgba(245,196,81,.16), transparent 70%);
}
/* хомяк висит слева от текста: освобождаем ему место, иначе он закрывает множитель */
.floor.is-current{ padding-left:62px; }
/* приглушаем руну на плите: одна и та же картинка на восьми этажах иначе рябит */
.floor::before{
  content:""; position:absolute; inset:1px; border-radius:9px; pointer-events:none;
  background:radial-gradient(26% 130% at 50% 50%, rgba(8,6,12,.5), transparent 72%);
}
.floor > *{ position:relative; z-index:1; }
.floor.is-boss{
  min-height:74px; transform:scale(1.03);
  background-image:linear-gradient(rgba(9,6,12,.5), rgba(9,6,12,.5)), url(../assets/giftpath/boss.webp);
}
.floor.is-boss.is-current{ transform:scale(1.045); }
.floor__badge{
  position:relative; z-index:1; flex:0 0 auto; min-width:24px; height:24px; padding:0 5px;
  border-radius:7px; display:grid; place-items:center;
  font-family:var(--font-disp); font-size:13px; letter-spacing:.04em;
  color:#1A0F05; background:linear-gradient(180deg,#FFEFC6,#F5C451);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.floor.is-passed .floor__badge{ background:linear-gradient(180deg,#41F59C,#12B96D); color:#04170E; }
.floor.is-boss .floor__badge{ font-size:10.5px; letter-spacing:.12em; padding:0 7px; background:linear-gradient(180deg,#FF6B87,#C41336); color:#FFF; }
.floor__meta{ position:relative; z-index:1; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.floor__mult{
  font-family:var(--font-disp); font-size:15px; line-height:1.05; color:#FFF3D6;
  text-shadow:0 2px 6px rgba(0,0,0,.85);
}
.floor__chance{ font-size:11px; letter-spacing:.02em; color:#E2DAE7; text-shadow:0 1px 4px rgba(0,0,0,.95); }
.floor__val{
  position:relative; z-index:1; flex:0 0 auto; font-family:var(--font-disp); font-size:14px;
  color:var(--gold-hi); text-shadow:0 2px 6px rgba(0,0,0,.85);
}
.floor.is-passed .floor__val{ color:var(--emerald-hi); }
.floor:not(.is-passed):not(.is-current) .floor__val{ color:#BDB3C8; }

/* хомяк висит на краю текущего этажа */
.tower-hero{
  position:absolute; left:2px; top:-16px; width:52px; height:auto; z-index:2;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.7));
  pointer-events:none;
  /* у спрайта свой тёмный фон: маска растворяет прямоугольник в плите этажа */
  -webkit-mask-image:radial-gradient(76% 76% at 54% 48%, #000 56%, rgba(0,0,0,0) 92%);
  mask-image:radial-gradient(76% 76% at 54% 48%, #000 56%, rgba(0,0,0,0) 92%);
}
.tower-hero.is-falling{ animation:heroFall .85s cubic-bezier(.4,0,.9,.6) forwards; }
@keyframes heroFall{
  0%{ transform:translateY(0) rotate(0) }
  100%{ transform:translateY(140px) rotate(46deg); opacity:0 }
}
.tower-stage.is-fall{ animation:towerShake .5s ease-in-out; }
@keyframes towerShake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-5px) }
  45%{ transform:translateX(4px) }
  70%{ transform:translateX(-3px) }
}

/* табличка поверх башни */
.tower-banner{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none;
}
.tower-banner__in{
  font-family:var(--font-disp); font-size:24px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 16px; border-radius:12px;
  animation:bannerIn .35s cubic-bezier(.2,1.4,.4,1);
}
.tower-banner__in.is-win{
  color:#150C05; background:linear-gradient(180deg,#FFE7A8,#F5C451);
  box-shadow:0 10px 30px rgba(245,196,81,.45);
}
.tower-banner__in.is-lose{
  color:#FFF; background:linear-gradient(180deg,#FF5D7C,#B4153A);
  box-shadow:0 10px 30px rgba(255,45,85,.4);
}
@keyframes bannerIn{ from{ opacity:0; transform:scale(.7) } to{ opacity:1; transform:none } }

/* ---------- арена ---------- */
.arena{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.seat{
  padding:10px 6px; border-radius:14px; text-align:center;
  background:linear-gradient(180deg, rgba(28,20,38,.95), rgba(13,10,19,.95));
  border:1px solid var(--line-soft); transition:box-shadow .3s, background .3s;
}
.seat--me{ border-color:rgba(43,227,139,.3); }
.seat__name{
  display:flex; align-items:center; justify-content:center; gap:5px; min-width:0;
  font-family:var(--font-disp); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.seat__name .nick-chip{ width:18px; height:18px; font-size:9px; }
.seat__name b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.seat__art{ height:74px; display:grid; place-items:center; margin:6px 0; }
.seat__art img{ max-height:70px; max-width:100%; }
.seat__val{ font-family:var(--font-disp); font-size:14px; color:var(--gold-hi); font-variant-numeric:tabular-nums; }
.seat.is-winner{ background:rgba(43,227,139,.12); box-shadow:inset 0 0 0 1px rgba(43,227,139,.4); }
.seat.is-loser{ opacity:.45; }

/* ---------- прыгун: хомяк, видимое препятствие, дуга прыжка ---------- */
.jumper-stage{
  position:relative; height:200px; border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(43,227,139,.14), transparent 62%),
    linear-gradient(180deg,#0F0D16,#0B0911);
  border:1px solid var(--line-soft);
}
.jumper-hill{
  position:absolute; left:0; right:0; bottom:0; height:46px; overflow:hidden;
  background:linear-gradient(180deg, rgba(43,227,139,.18), rgba(9,26,20,.95));
  border-top:1px solid rgba(43,227,139,.25);
}
/* бегущая земля под ногами — ощущение движения */
.jumper-hill::before{
  content:""; position:absolute; inset:0 -46px 0 0;
  background:repeating-linear-gradient(90deg, rgba(43,227,139,.22) 0 14px, transparent 14px 46px);
  opacity:0; transition:opacity .2s;
}
.jumper-stage.is-running .jumper-hill::before{ opacity:.55; animation:groundScroll .55s linear infinite; }
@keyframes groundScroll{ from{ transform:translateX(0) } to{ transform:translateX(-46px) } }

/* хомяк: стоит на земле, при прыжке уходит по дуге с поджатием */
.jumper-hero{
  position:absolute; left:44px; bottom:32px; width:74px; height:auto;
  transform-origin:50% 100%;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.65));
  animation:hamIdle 1.6s ease-in-out infinite;
}
@keyframes hamIdle{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.97) scaleX(1.02) } }
/* 460 мс — ровно столько же едет препятствие под ним (CLEAR_MS в jumper.js) */
.jumper-hero.is-jump{
  animation:hamJump .46s cubic-bezier(.3,.62,.4,1) forwards;
}
@keyframes hamJump{
  0%   { transform:translateY(0) scaleY(.82) scaleX(1.12); }
  14%  { transform:translateY(-10px) scaleY(1.12) scaleX(.92); }
  50%  { transform:translateY(-74px) rotate(-6deg) scaleY(1.02) scaleX(1); }
  84%  { transform:translateY(-16px) rotate(-2deg) scaleY(1) scaleX(1); }
  100% { transform:translateY(0) scaleY(.9) scaleX(1.06); }
}
.jumper-hero.is-land{ animation:hamLand .22s ease-out; }
@keyframes hamLand{ 0%{ transform:scaleY(.86) scaleX(1.1) } 100%{ transform:none } }
.jumper-hero.is-fall{ animation:hamFall .9s ease-in forwards; }
@keyframes hamFall{
  0%   { transform:rotate(0) translateY(0) }
  40%  { transform:rotate(38deg) translateY(-4px) }
  100% { transform:rotate(78deg) translateY(4px); opacity:.85 }
}
/* тень под хомяком: отрывается от земли в прыжке */
.jumper-shadow{
  position:absolute; left:44px; bottom:28px; width:70px; height:12px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.75), transparent 70%);
  transition:transform .3s ease, opacity .3s ease;
}
.jumper-shadow.is-jump{ transform:translateY(56px) scale(.55); opacity:.4; }

.jumper-track{ position:absolute; inset:0; pointer-events:none; }
/* Препятствие: позицию по X ведёт JS (transform), чтобы апогей прыжка совпал
   с проездом под хомяком. Здесь только вид и «дыхание» на месте. */
.jumper-obstacle{
  position:absolute; bottom:32px; left:0; width:20px; height:44px;
  will-change:transform;
}
.jumper-obstacle__body{
  position:absolute; inset:0; border-radius:5px;
  background:linear-gradient(180deg,#FF2D55,#8E0C26);
  box-shadow:0 0 14px rgba(255,45,85,.5), inset 0 1px 0 rgba(255,255,255,.35);
  animation:obstacleBob 1.5s ease-in-out infinite;
}
.jumper-obstacle__top{
  position:absolute; left:-6px; right:-6px; top:-8px; height:12px; border-radius:4px;
  background:linear-gradient(180deg,#FF6B87,#B4153A);
  box-shadow:0 0 10px rgba(255,45,85,.4);
}
@keyframes obstacleBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
/* до старта: подсказка, что будем прыгать */
.jumper-obstacle.is-idle .jumper-obstacle__body{ animation:obstacleBob 1.5s ease-in-out infinite, obstacleHint 2.4s ease-in-out infinite; }
@keyframes obstacleHint{
  0%,100%{ box-shadow:0 0 14px rgba(255,45,85,.5), inset 0 1px 0 rgba(255,255,255,.35) }
  50%{ box-shadow:0 0 26px rgba(255,45,85,.85), inset 0 1px 0 rgba(255,255,255,.5) }
}
/* столкновение трясёт корпус, а не позицию: иначе animation перебила бы transform из JS */
.jumper-obstacle.is-hit .jumper-obstacle__body{ animation:obstacleHit .4s ease-out forwards; }
@keyframes obstacleHit{
  0%,100%{ transform:translateX(0) }
  30%{ transform:translateX(-8px) rotate(-6deg) }
  70%{ transform:translateX(6px) rotate(4deg) }
}
.jumper-mult{
  position:absolute; top:12px; left:0; right:0; text-align:center;
  font-family:var(--font-disp); font-size:42px; color:#EFFBF5;
  text-shadow:0 0 28px rgba(43,227,139,.5); pointer-events:none;
}
.jumper-mult.is-cashed{ color:var(--gold-hi); text-shadow:0 0 28px rgba(245,196,81,.6); }
.jumper-mult.is-crashed{ color:#FF6F8B; }

/* ---------- коровка ---------- */
.cow-stage{
  position:relative; height:250px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,#0F1A2A,#0D0B13); border:1px solid var(--line-soft);
}
.cow-stage__sky{
  position:absolute; inset:0;
  background:radial-gradient(70% 50% at 50% 110%, rgba(43,227,139,.22), transparent 65%);
}
.cow-stage__cow{
  position:absolute; left:50%; bottom:26px; width:96px; margin-left:-48px;
  transition:bottom .22s ease; filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));
}
.cow-fences{ position:absolute; left:0; right:0; bottom:0; height:44px; display:flex; gap:14px; align-items:flex-end; padding:0 10px; }
.cow-fence{ width:10px; height:22px; border-radius:3px; background:linear-gradient(180deg,#F5C451,#B8892A); opacity:.7; }
.cow-stage__mult{
  position:absolute; top:16px; left:0; right:0; text-align:center;
  font-family:var(--font-disp); font-size:48px; color:#EFFBF5;
  text-shadow:0 0 30px rgba(43,227,139,.5);
}
.cow-stage__mult.is-cashed{ color:var(--gold-hi); }
.cow-stage__mult.is-crashed{ color:#FF6F8B; }

/* ---------- блэкджек ---------- */
.bj-table{ display:flex; flex-direction:column; gap:14px; }
.bj-side{
  padding:12px; border-radius:var(--r-lg);
  background:radial-gradient(80% 120% at 50% 0%, rgba(43,227,139,.1), transparent 60%), rgba(12,20,16,.9);
  border:1px solid rgba(43,227,139,.16);
}
.bj-label{ font-family:var(--font-disp); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.cards{ display:flex; gap:6px; min-height:74px; }
.card-face{
  width:52px; height:74px; border-radius:9px; position:relative;
  background:linear-gradient(180deg,#F8F4EA,#DFD8C8); color:#1B1206;
  box-shadow:0 6px 14px rgba(0,0,0,.45); display:flex; flex-direction:column; justify-content:space-between;
  padding:6px;
}
.card-slot{
  width:52px; height:74px; border-radius:9px;
  border:1.5px dashed rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.card-face.is-red{ color:#C41336; }
.card-face.is-hidden{
  /* закрытая карта должна читаться как карта, а не как пустая плашка */
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 3px, transparent 3px 7px),
    linear-gradient(150deg,#4A3468,#241834 60%,#180F24);
  border:1px solid rgba(245,196,81,.38);
  color:transparent;
  box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.04);
}
.card-face.is-hidden::after{
  content:"M"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-disp); font-size:22px; font-weight:700;
  color:rgba(245,196,81,.55); text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.bj-hint{ font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.card-face__r{ font-family:var(--font-disp); font-size:18px; }
.card-face__s{ align-self:flex-end; font-size:18px; }
.bj-score{ margin-top:8px; font-family:var(--font-disp); font-size:17px; color:var(--gold-hi); }

/* ---------- шторм ---------- */
.storm-board{ display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.storm-cell{
  aspect-ratio:1; border-radius:9px; display:grid; place-items:center; padding:3px;
  background:radial-gradient(90% 90% at 50% 20%, rgba(255,255,255,.05), rgba(10,8,15,.9));
  border:1px solid var(--line-soft); transition:border-color .2s, background .2s;
}
.storm-cell img{ width:100%; max-height:100%; object-fit:contain; }
.storm-cell.is-hit{ border-color:rgba(43,227,139,.6); background:rgba(43,227,139,.12); }
.storm-cell__q{ color:rgba(255,255,255,.25); font-size:11px; }

/* блэкджек: несколько рук и панель действий */
.bj-hands{ display:flex; flex-direction:column; gap:10px; }
.bj-hand{
  padding:10px 12px; border-radius:var(--r-lg);
  background:radial-gradient(80% 120% at 50% 0%, rgba(43,227,139,.09), transparent 60%), rgba(12,20,16,.9);
  border:1px solid rgba(43,227,139,.14); transition:border-color .2s, box-shadow .2s, opacity .2s;
}
.bj-hand.is-active{ border-color:rgba(245,196,81,.55); box-shadow:0 0 0 1px rgba(245,196,81,.25) inset; }
.bj-hand.is-done{ opacity:.72; }
.bj-hand__head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.bj-hand__score{ font-family:var(--font-disp); font-size:17px; color:var(--gold-hi); }
.bj-hand__tag{
  font-family:var(--font-disp); font-size:10px; letter-spacing:.1em; padding:2px 6px; border-radius:5px;
  background:rgba(255,255,255,.1); color:#C6BCCC;
}
.bj-hand__tag.is-gold{ background:rgba(245,196,81,.2); color:var(--gold-hi); }
.bj-hand__bet{ margin-top:8px; font-family:var(--font-disp); font-size:13px; color:var(--muted); }
.bj-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bj-actions .btn{ width:100%; }

/* кнопки хода всегда под рукой, даже когда рук три-четыре */
.bj-actions{
  position:sticky; bottom:6px; z-index:6;
  background:linear-gradient(180deg, rgba(11,8,17,0), rgba(11,8,17,.92) 45%);
  padding-top:10px;
}

/* ---------- офферы «Заработка» ---------- */
.offer{
  border-radius:var(--r-lg); padding:14px; display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(165deg, rgba(38,27,52,.95), rgba(14,10,20,.97));
  border:1px solid var(--line-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.offer__top{ display:flex; align-items:center; gap:8px; }
.offer__brand{ font-family:var(--font-disp); font-size:17px; letter-spacing:.12em; text-transform:uppercase; }
.offer__hot{
  font-family:var(--font-disp); font-size:10px; letter-spacing:.14em; padding:2px 6px; border-radius:5px;
  background:linear-gradient(180deg,#FF5B79,#C41336); color:#fff;
}
.offer__title{ font-size:13px; color:var(--muted); }
.offer__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.offer__sum{ font-family:var(--font-disp); font-size:22px; color:var(--gold-hi); }
.offer__steps{ font-size:11px; color:var(--muted); margin-top:2px; }

/* ---------- кошелёк ---------- */
.method{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.03);
  border:1px solid var(--line-soft); color:var(--text);
}
.method__name{ font-size:14.5px; font-weight:600; }
.method__meta{ margin-left:auto; font-size:11.5px; color:var(--muted); }
.method__go{ font-size:20px; color:var(--gold); }

/* ---------- апгрейд: чипы выбора ---------- */
.up-picker{
  display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; margin:0 -16px; padding-left:16px; padding-right:16px;
}
.up-chip{
  flex:0 0 auto; width:78px; padding:8px 4px; border-radius:12px; text-align:center;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft); color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.up-chip.is-on{ border-color:rgba(245,196,81,.6); box-shadow:0 0 0 1px rgba(245,196,81,.25) inset; }
.up-chip img{ width:38px; height:38px; object-fit:contain; }
.up-chip span{ font-family:var(--font-disp); font-size:11.5px; color:var(--gold-hi); }
.up-chip em{ font-style:normal; font-size:10px; color:#9FE7C4; }
.up-chip b{ font-size:12px; }

/* ---------- лента побед ---------- */
.feed-row{ animation:feedIn .35s ease both; }
@keyframes feedIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---------- реферальная ссылка ---------- */
.ref-link{
  margin-top:8px; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.35);
  border:1px solid var(--line); font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; color:#9FE7C4; word-break:break-all;
}

/* итог раунда: три кнопки в ряд переносятся, а не сжимаются */
.verdict__actions{ flex-wrap:wrap; }
.verdict__actions .btn{ flex:1 1 30%; min-width:104px; }

/* апгрейд: кольцо компактнее, кнопка всегда на виду */
.up-ring{ width:170px; height:170px; }
.up-ring__chance{ font-size:32px; }
.up-wrap{ gap:12px; }
.sticky-cta{ position:sticky; bottom:6px; z-index:6; background:linear-gradient(180deg, rgba(11,8,17,0), rgba(11,8,17,.94) 45%); padding-top:10px; }

/* промо-карусель */
.promo-track{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:0 -16px; padding:0 16px 4px;
}
.promo-slide{
  flex:0 0 86%; scroll-snap-align:center; min-height:118px; padding:14px;
}
/* арт в карусели крупный и позиционируется сам: ширина/флекс не задаём */
.promo-slide .banner__art{ width:190px; flex:none; }

/* поиск столов */
.search{ position:relative; }
.search__ic{ position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.6; }
.search__field{
  width:100%; height:42px; padding:0 14px 0 36px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  color:var(--text); font-size:14px; outline:none;
}
.search__field:focus{ border-color:rgba(245,196,81,.4); }
.search__field::placeholder{ color:var(--muted); }

/* комнаты батлов */
.room-mode{
  font-family:var(--font-disp); font-size:12px; letter-spacing:.08em;
  color:var(--gold-hi);
}
.guide-p{ font-size:14px; line-height:1.55; color:var(--text-dim); }

/* тап-таргеты: подняли мелкие контролы до 36–38 px */
.quick button{ height:36px; }
.case-tab{ height:38px; }
.filters button{ height:36px; }

/* текстовая кнопка-ссылка с нормальной областью нажатия */
.link-btn{
  min-height:36px; padding:0 8px; border:0; background:none; border-radius:8px;
  font-size:12.5px; color:var(--gold); font-family:var(--font-body);
}
.link-btn:active{ background:rgba(245,196,81,.12); }

/* переключатель языка */
.filters__btn{
  min-width:44px; height:36px; padding:0 10px; border-radius:10px;
  font-family:var(--font-disp); font-size:13px; letter-spacing:.1em;
  /* тёмная подложка: на тёплом фоне страницы белая 4% давала 4.49:1 для серого текста */
  color:var(--muted); background:rgba(10,7,14,.45); border:1px solid var(--line-soft);
}
.filters__btn.is-on{ color:#04170E; background:linear-gradient(180deg,#41F59C,#12B96D); border-color:transparent; }

/* цепочка улучшений */
.chain-badge{
  display:inline-block; margin-top:8px; padding:4px 10px; border-radius:999px;
  font-family:var(--font-disp); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:#1B1204; background:linear-gradient(180deg,#FFE9B0,#F5C451);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(245,196,81,.35);
}

/* кнопки в рядах действий: подписи в одну строку */
.verdict__actions .btn{
  font-size:13.5px; letter-spacing:.05em; padding:0 10px; white-space:nowrap;
}
.verdict__actions{ gap:8px; }

/* чипы и табы: лаковая поверхность вместо плоского прямоугольника */
.case-tab, .filters button, .filters__btn, .up-chip, .quick button{
  background-image:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.015) 55%, rgba(0,0,0,.28));
  border-color:rgba(245,196,81,.18);
}
.case-tab.is-active, .filters button.is-on, .filters__btn.is-on{
  background-image:linear-gradient(180deg,#FFF0C6 0%, #FFDE95 30%, #F5C451 62%, #D09720 100%);
  border-color:rgba(255,231,168,.85);
}

/* ряды действий: по две кнопки в ряд, чтобы подписи не резались */
.verdict__actions{ display:flex; flex-wrap:wrap; gap:8px; }
.verdict__actions .btn{ flex:1 1 calc(50% - 4px); min-width:0; }
.verdict__actions .btn:only-child{ flex:1 1 100%; }

/* ---------- колесо апгрейда: сектор удачи + стрелка ---------- */
.up-wheel{
  position:relative; width:236px; height:236px; border-radius:50%; margin:0 auto;
  display:grid; place-items:center;
  background:
    conic-gradient(from 0deg,
      #34F09A 0%, #12C776 calc(var(--arc,0%) * .55), #0E9E63 var(--arc,0%),
      #7A1B32 var(--arc,0%), #4E0F22 62%, #380A18 100%);
  box-shadow:
    0 0 0 6px rgba(12,9,16,.9),
    0 0 0 7px rgba(245,196,81,.35),
    0 18px 40px rgba(0,0,0,.55),
    0 0 46px rgba(26,200,120,.18);
  transition:none;
}
/* деления по кольцу */
.up-wheel__ticks{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(0,0,0,.55) 0deg .7deg, transparent .7deg 7.5deg);
  -webkit-mask:radial-gradient(closest-side, transparent 78%, #000 79%, #000 100%);
  mask:radial-gradient(closest-side, transparent 78%, #000 79%, #000 100%);
  opacity:.55;
}
/* внутренний диск */
.up-wheel__hub{
  position:absolute; inset:26px; border-radius:50%;
  background:radial-gradient(circle at 50% 28%, #221A2E, #0B0911 72%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.7), 0 0 22px rgba(0,0,0,.6);
  display:grid; place-items:center; align-content:center; gap:2px; z-index:3;
}
.up-wheel__chance{ font-family:var(--font-disp); font-size:36px; letter-spacing:.02em; }
.up-wheel__label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-family:var(--font-disp); }
/* стрелка */
.up-wheel__needle{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  transform-origin:50% 50%;
  will-change:transform;
}
.up-wheel__needle::before{
  content:""; position:absolute; left:50%; top:4px; transform:translateX(-50%);
  width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:24px solid #FFF0C6;
  filter:drop-shadow(0 0 9px rgba(255,236,180,.9)) drop-shadow(0 2px 3px rgba(0,0,0,.65));
}
.up-wheel__needle::after{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:26px; height:6px; border-radius:3px;
  background:linear-gradient(90deg, transparent, rgba(255,231,168,.9), transparent);
  filter:blur(1px);
}


/* символ валюты рядом с ценой предмета */
.cur{
  font-style:normal; color:var(--gold); font-size:.82em; margin-left:.28em;
  opacity:.95; font-family:var(--font-body);
}

/* ---------- сцена открытия кейса ---------- */
.case-hero{ overflow:visible; }
.open-stage{
  position:absolute; inset:0; z-index:6; display:grid; place-items:center;
  pointer-events:none; transform:translateZ(0);
}
.open-stage.is-gone{ opacity:0; transition:opacity .34s ease; }

/* лучи */
.open-rays{
  position:absolute; width:300px; height:300px; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, var(--fx) 0deg 2.6deg, transparent 2.6deg 22.5deg);
  opacity:0; filter:blur(.6px);
  mask:radial-gradient(closest-side, transparent 44%, #000 52%, #000 64%, transparent 70%);
  -webkit-mask:radial-gradient(closest-side, transparent 44%, #000 52%, #000 64%, transparent 70%);
}
.open-stage.is-charging .open-rays{ opacity:.28; animation:raysSpin 9s linear infinite; }
.open-stage.lv2 .open-rays{ opacity:.42; animation-duration:6s; }
.open-stage.lv3 .open-rays{ opacity:.6; animation-duration:3.4s; }
.open-stage.is-burst .open-rays{ opacity:.85; animation-duration:1.6s; }
@keyframes raysSpin{ to{ transform:rotate(360deg); } }

/* свечение */
.open-glow{
  position:absolute; width:176px; height:176px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--fx) 55%, transparent) 0%, transparent 66%);
  opacity:0;
}
.open-stage.is-charging .open-glow{ animation:glowPulse 1.1s ease-in-out infinite; opacity:calc(var(--fx-glow) * .7); }
.open-stage.lv2 .open-glow{ animation-duration:.8s; }
.open-stage.lv3 .open-glow{ animation-duration:.5s; }
.open-stage.is-burst .open-glow{ animation:glowBurst .7s ease-out forwards; }
@keyframes glowPulse{ 0%,100%{ transform:scale(.86); } 50%{ transform:scale(1.18); } }
@keyframes glowBurst{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(2.6); opacity:0; } }

/* сундук */
.open-chest{ position:relative; width:132px; z-index:3; filter:drop-shadow(0 14px 26px rgba(0,0,0,.6)); }
.open-chest img{ width:100%; display:block; }
.open-stage.is-charging .open-chest{ animation:chestShake .34s ease-in-out infinite; }
.open-stage.lv2 .open-chest{ animation-duration:.2s; }
.open-stage.lv3 .open-chest{ animation-duration:.13s; }
.open-chest.is-burst{ animation:chestBurst .55s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes chestShake{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  20%{ transform:translate(-3px,-1px) rotate(-2.4deg); }
  45%{ transform:translate(3px,1px) rotate(2.2deg); }
  70%{ transform:translate(-2px,1px) rotate(-1.4deg); }
}
@keyframes chestBurst{
  0%{ transform:scale(1) rotate(0); opacity:1; }
  35%{ transform:scale(1.22) rotate(-3deg); opacity:1; }
  100%{ transform:scale(.35) translateY(-26px) rotate(6deg); opacity:0; }
}

/* вспышка */
.open-flash{
  position:absolute; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--fx) 42%, transparent 70%);
  opacity:0; z-index:4;
}
.open-stage.is-burst .open-flash{ animation:flashPop .5s ease-out forwards; }
@keyframes flashPop{ 0%{ opacity:0; transform:scale(.3); } 25%{ opacity:1; transform:scale(1.05); } 100%{ opacity:0; transform:scale(1.7); } }

/* столб света */
.open-beam{
  position:absolute; bottom:50%; width:70px; height:0; z-index:2;
  background:linear-gradient(180deg, color-mix(in srgb, var(--fx) 85%, transparent), transparent);
  filter:blur(6px); opacity:0;
}
.open-stage.is-burst .open-beam{ animation:beamUp .8s ease-out forwards; }
@keyframes beamUp{ 0%{ height:0; opacity:0; } 40%{ height:230px; opacity:.75; } 100%{ height:300px; opacity:0; } }

/* частицы */
.open-particles{ position:absolute; inset:0; display:grid; place-items:center; z-index:5; }
.open-particle{
  position:absolute; width:var(--sz); height:var(--sz); border-radius:50%;
  background:#fff; box-shadow:0 0 8px var(--fx), 0 0 18px var(--fx);
  animation:particleFly .9s cubic-bezier(.15,.7,.35,1) forwards;
}
@keyframes particleFly{
  0%{ transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(var(--dx), var(--dy)) scale(.2); opacity:0; }
}

/* вылет предмета */
.open-prize{
  position:absolute; width:120px; z-index:7; opacity:0;
  filter:drop-shadow(0 0 26px color-mix(in srgb, var(--fx) 60%, transparent));
}
.open-prize.is-fly{ animation:prizeFly 1.05s cubic-bezier(.2,1.5,.35,1) forwards; }
@keyframes prizeFly{
  0%{ opacity:0; transform:translateY(6px) scale(.25) rotate(-12deg); }
  40%{ opacity:1; transform:translateY(-58px) scale(1.12) rotate(4deg); }
  70%{ transform:translateY(-34px) scale(1.04) rotate(-2deg); }
  100%{ opacity:1; transform:translateY(-44px) scale(1) rotate(0deg); }
}
.open-stage.is-settled .open-prize{
  animation:none; opacity:1; transform:translateY(-44px) scale(1);
}

/* вспышка на весь экран в момент вскрытия */
/* ко вьюпорту (fixed): иначе при прокрученном экране вспышка уезжает за кадр */
.screen-flash{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%);
  animation:screenFlash .42s ease-out forwards;
}
@keyframes screenFlash{ 0%{ opacity:0; } 18%{ opacity:.9; } 100%{ opacity:0; } }

/* ---------- взрыв хомяка при крахе ---------- */
.rocket-boom{ position:absolute; z-index:2; pointer-events:none; width:1px; height:1px; }
.rocket-boom__flash{
  position:absolute; left:0; top:0; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,246,214,.95), rgba(255,190,80,.75) 32%, rgba(255,80,60,.38) 58%, transparent 72%);
  animation:boomFlash .52s cubic-bezier(.2,.8,.3,1) forwards;
}
.rocket-boom__ring{
  position:absolute; left:0; top:0; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%;
  border:3px solid rgba(255,180,90,.85);
  animation:boomRing .62s ease-out forwards;
}
.rocket-boom__shard{
  position:absolute; left:0; top:0; width:7px; height:7px; border-radius:2px;
  background:linear-gradient(180deg, #FFD98A, #E2571E);
  box-shadow:0 0 10px rgba(255,150,60,.85);
  animation:boomShard .72s cubic-bezier(.15,.7,.4,1) forwards;
  animation-delay:var(--d, 0ms);
}
.rocket-boom__smoke{
  position:absolute; left:0; top:0; width:90px; height:90px; margin:-45px 0 0 -45px; border-radius:50%;
  background:radial-gradient(circle, rgba(90,70,80,.55), rgba(50,40,50,.18) 60%, transparent 72%);
  animation:boomSmoke .95s ease-out forwards;
}
@keyframes boomFlash{
  0%{ transform:scale(.35); opacity:1 }
  55%{ opacity:.9 }
  100%{ transform:scale(1.35); opacity:0 }
}
@keyframes boomRing{
  0%{ transform:scale(.3); opacity:.9; border-width:4px }
  100%{ transform:scale(2.6); opacity:0; border-width:1px }
}
@keyframes boomShard{
  0%{ transform:translate(0,0) rotate(0); opacity:1 }
  100%{ transform:translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity:0 }
}
@keyframes boomSmoke{
  0%{ transform:scale(.5); opacity:.75 }
  100%{ transform:scale(2.4) translateY(-16px); opacity:0 }
}
/* тряска стола при взрыве */
.rocket-stage.is-shaking{ animation:stageShake .38s cubic-bezier(.36,.07,.19,.97) }
@keyframes stageShake{
  10%, 90%{ transform:translate(-1px, 1px) }
  20%, 80%{ transform:translate(2px, -2px) }
  30%, 50%, 70%{ transform:translate(-4px, 2px) }
  40%, 60%{ transform:translate(4px, -1px) }
}

/* ---------- победа в апгрейде: вспышка, лучи и вылет предмета ---------- */
.up-win{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:120px; height:120px; margin:0 auto 8px;
}
.up-win__glow{
  position:absolute; inset:-26px; border-radius:50%;
  background:radial-gradient(circle, rgba(43,227,139,.45), rgba(43,227,139,.12) 46%, transparent 68%);
  animation:upWinGlow .9s ease-out both;
}
.up-win__ray{
  position:absolute; left:50%; top:50%; width:3px; height:74px; border-radius:2px;
  background:linear-gradient(180deg, rgba(245,196,81,.9), transparent 78%);
  transform-origin:50% 100%;
  animation:upWinRay .75s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:var(--d, 0ms);
  opacity:0;
}
.up-win__img img{
  /* мягкая круглая маска: тёмный фон картинки растворяется в свечении */
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 58%, rgba(0,0,0,.6) 72%, transparent 82%);
  mask:radial-gradient(circle at 50% 50%, #000 58%, rgba(0,0,0,.6) 72%, transparent 82%);
}
.up-win__img{
  position:relative; width:104px; z-index:2;
  animation:upWinPop .62s cubic-bezier(.2,1.3,.4,1) both;
  filter:drop-shadow(0 10px 26px rgba(43,227,139,.35));
}
.up-win__spark{
  position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #FFF6DA, rgba(245,196,81,0));
  animation:upWinSpark .8s ease-out both;
  animation-delay:var(--d, 0ms);
  opacity:0;
}
@keyframes upWinGlow{ 0%{ transform:scale(.4); opacity:0 } 35%{ opacity:1 } 100%{ transform:scale(1.15); opacity:0 } }
@keyframes upWinRay{
  0%{ opacity:0; transform:translate(-50%,-100%) rotate(var(--a)) scaleY(.2) }
  35%{ opacity:.95 }
  100%{ opacity:0; transform:translate(-50%,-100%) rotate(var(--a)) scaleY(1.25) }
}
@keyframes upWinPop{
  0%{ opacity:0; transform:scale(.35) translateY(22px) }
  60%{ opacity:1; transform:scale(1.12) translateY(-4px) }
  100%{ opacity:1; transform:scale(1) translateY(0) }
}
@keyframes upWinSpark{
  0%{ opacity:1; transform:translate(-50%,-50%) scale(.4) }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) }
}
.verdict.is-lose .verdict__big{ animation:loseShake .34s ease-in-out both }
@keyframes loseShake{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-4px) }
  55%{ transform:translateX(4px) }
  80%{ transform:translateX(-2px) }
}

/* ---------- лента призов: остановка и подсветка выигрыша ---------- */
.reel.is-stopped .reel__item{ opacity:.45; transition:opacity .25s ease }
.reel__item.is-winner{
  opacity:1 !important;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(245,196,81,.55), 0 0 26px rgba(245,196,81,.45), inset 0 1px 0 rgba(255,255,255,.12);
  transform:scale(1.06);
  transition:transform .22s cubic-bezier(.2,1.2,.4,1), box-shadow .22s ease, opacity .2s ease;
}
.reel.is-gone{ opacity:0; transform:translateY(-6px); transition:opacity .24s ease, transform .24s ease }
/* сундук дрожит, пока крутится лента */
.case-hero.is-shaking img{ animation:caseShake .28s linear infinite }
@keyframes caseShake{
  0%,100%{ transform:translate3d(0,0,0) rotate(0) }
  25%{ transform:translate3d(-2px,1px,0) rotate(-.6deg) }
  50%{ transform:translate3d(2px,-1px,0) rotate(.6deg) }
  75%{ transform:translate3d(-1px,-2px,0) rotate(-.3deg) }
}

/* ============================================================
   ГРАФИКА 2.0 — витрина кейса, столы, кнопки
   ============================================================ */

/* кейс крупнее и стоит на «полу»: тень-эллипс + отражение */
.case-hero{ height:176px; }
.case-hero img{ height:152px; }
.case-hero::after{
  content:""; position:absolute; bottom:6px; width:190px; height:26px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.75), transparent 72%);
  filter:blur(4px);
}
.case-hero::before{ width:250px; height:250px; filter:blur(10px); }

/* золотая кнопка: свет пробегает по хрому */
/* постоянный блик на CTA: базовое правило .btn::after держит opacity:0,
   поэтому здесь её включаем явно, иначе блик не виден */
.btn--gold::after, .btn--go::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-10%; right:-10%; width:auto; z-index:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.5) 48%, transparent 58%);
  transform:translateX(-120%); opacity:1; pointer-events:none;
  animation:btnSheen 4.6s ease-in-out infinite;
}
@keyframes btnSheen{
  0%, 62%{ transform:translateX(-120%) }
  82%, 100%{ transform:translateX(120%) }
}
.btn--gold:active::after, .btn--go:active::after{ animation:none; }

/* вкладки кейсов: активная светится изнутри */
.case-tab.is-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 6px 16px rgba(245,196,81,.35),
    0 0 22px rgba(245,196,81,.28);
}

/* столы: виньетка по краям, чтобы центр читался как сцена */
/* виньетка столов: у ленты кейса свои ::before/::after — её не трогаем */
.mines-grid, .wheel-stage, .bj-table, .storm-board{ position:relative; }
.mines-grid::after, .wheel-stage::after, .storm-board::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ячейки мин: утоплены в сукно */
.mine{
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.05);
}

/* лента кейса: карточки предметов получают контактную тень */
.reel__item{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.45);
}
.reel__item.is-winner{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 2px rgba(245,196,81,.55), 0 10px 26px rgba(245,196,81,.35);
}

/* подписи предметов были 7.5–8.5px — нечитаемо; поднимаем до 9.5–10px */
.reel__item i, .reel__item span, .pool__cell span, .pool__cell i{ font-size:10.5px; }
.pool__cell em{ font-size:10.5px; }
.inv__kind{ font-size:10px; }

/* ============================================================
   Попап награды бонусов: лента призов + карточка выигрыша
   ============================================================ */
.reward-pop{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center; padding:20px;
  background:rgba(6,4,10,.78);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0; transition:opacity .18s ease;
}
.reward-pop.is-open{ opacity:1; }
.reward-pop.is-closing{ opacity:0; }
.reward-pop__panel{
  width:min(392px, 100%); max-height:min(86vh, 640px); overflow:auto;
  padding:20px 16px 16px; border-radius:var(--r-xxl);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(245,196,81,.18), transparent 62%),
    linear-gradient(180deg, #241B31 0%, #150F1F 100%);
  border:1px solid rgba(245,196,81,.28);
  box-shadow:0 28px 70px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.1);
  text-align:center;
  transform:translateY(14px) scale(.97); transition:transform .2s cubic-bezier(.2,.9,.2,1);
}
.reward-pop.is-open .reward-pop__panel{ transform:none; }
.reward-pop__title{
  font-family:var(--font-disp); font-size:21px; letter-spacing:.02em; color:var(--text);
}
.reward-pop__sub{ font-size:13px; color:var(--text-dim); margin-top:4px; }
.reward-pop__stage{ margin:16px -6px 0; }
/* в попапе лента не должна наследовать margin базового .reel (он под отступы страницы) */
.reward-pop__reel{
  position:relative; margin:0; height:118px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, #100C18, #1A1324);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6);
}
.reward-pop__reel .reel__track{ height:100%; align-items:center; }
.reward-pop__reel .reel__item{ flex:0 0 96px; width:96px; }
.reward-pop__result{ min-height:186px; }   /* место под карточку: панель не прыгает, когда лента встала */
.reward-pop__win{
  position:relative; padding:16px 0 4px;
  animation:popWin .45s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes popWin{ from{ opacity:0; transform:translateY(10px) scale(.94) } to{ opacity:1; transform:none } }
.reward-pop__glow{
  position:absolute; left:50%; top:44%; width:220px; height:220px; margin:-110px 0 0 -110px;
  background:radial-gradient(circle, rgba(245,196,81,.34), rgba(43,227,139,.12) 45%, transparent 70%);
  filter:blur(6px); pointer-events:none;
  animation:popGlow 2.4s ease-in-out infinite;
}
@keyframes popGlow{ 0%,100%{ opacity:.75 } 50%{ opacity:1 } }
.reward-pop__art{ position:relative; width:132px; margin:0 auto; }
.reward-pop__name{
  position:relative; margin-top:10px; font-family:var(--font-disp); font-size:18px; color:var(--gold);
}
.reward-pop__price{ position:relative; margin-top:4px; font-size:14px; color:var(--text); }
.reward-pop__note{ position:relative; margin-top:2px; font-size:12px; color:var(--text-dim); }
.reward-pop__btn{ margin-top:14px; }
.reward-pop__stage.is-done .reward-pop__reel{ opacity:.45; transition:opacity .3s ease; }
@media (max-width:380px){
  .reward-pop__panel{ padding:16px 12px 12px; }
  .reward-pop__reel .reel__item{ flex:0 0 82px; width:82px; }
}

/* ожидание, пока крутится лента */
.reward-pop__wait{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  height:100%; min-height:186px;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
}
.reward-pop__dots{
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(245,196,81,.25); border-top-color:var(--gold);
  animation:popSpin 0.9s linear infinite;
}
@keyframes popSpin{ to{ transform:rotate(360deg) } }
.reward-pop__stage.is-done ~ .reward-pop__result .reward-pop__wait{ display:none; }

/* ============================================================
   Апгрейд: весь экран в один телефон
   Было ~919 px контента — кнопка «Улучшить» уезжала за нижнюю кромку
   (на iPhone SE её не видно вообще). Сжимаем сцену и рейлы.
   ============================================================ */
.up-wrap{
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:8px; margin-top:2px;
}
.up-items{ gap:8px; flex:1 1 auto; min-width:0; }
.up-slot{ padding:8px 6px; border-radius:12px; }
.up-slot img{ width:44px; margin:0 auto 4px; }
.up-slot b{ font-size:13.5px; }
.up-slot span{ font-size:10px; }
.up-arrow{ font-size:17px; }

/* колесо меньше и по центру между предметами на узких экранах */
.up-wheel{
  width:132px; height:132px; flex:0 0 132px; margin:0;
  box-shadow:0 0 0 5px rgba(12,9,16,.9), 0 0 0 6px rgba(245,196,81,.3), 0 0 26px rgba(245,196,81,.2);
}
.up-wheel__hub{ inset:22px; }
.up-wheel__chance{ font-size:19px; }
.up-wheel__label{ font-size:9.5px; }

/* подписи секций — одна строка, без лишних отступов */
#screen .eyebrow{ margin:2px 0 0; }

/* чипы инвентаря и целей ниже */
.up-picker{ padding:2px 16px 4px; gap:6px; }
.up-chip{ width:66px; padding:6px 3px; }
.up-chip img{ width:30px; height:30px; }
.up-chip span{ font-size:10.5px; }

/* инфо-строка и кнопка компактнее */
.sticky-cta{ bottom:0; padding-top:6px; }
.sticky-cta .betpanel{ padding:8px 12px !important; }
.sticky-cta .btn{ padding:12px; }

@media (max-height:700px){
  .up-wheel{ width:112px; height:112px; flex-basis:112px; }
  .up-slot img{ width:38px; }
  .up-chip{ width:60px; }
  .up-chip img{ width:26px; height:26px; }
}

/* компактнее инфо-строка: одна строка вместо двух */
/* прячем только подсказку «слева источник…»: баланс в первой строке остаётся */
.sticky-cta .betpanel > .small.muted{ display:none; }
.sticky-cta .betpanel{ padding:8px 12px !important; }
.up-slot span{ display:none; }

@media (max-height:700px){
  .up-wrap{ height:104px; }
  .up-wheel{ width:96px; height:96px; flex-basis:96px; }
  .up-wheel__hub{ inset:16px; }
  .up-wheel__chance{ font-size:15px; }
  .up-slot img{ width:32px; }
  .up-slot b{ font-size:12px; }
  .up-picker{ padding:1px 16px 2px; }
  .up-chip{ width:54px; padding:4px 2px; }
  .up-chip img{ width:22px; height:22px; }
  .up-chip span{ font-size:10px; }
  .sticky-cta .btn{ padding:10px; }
  .stack{ gap:8px; }
}


/* вердикт на месте рейлов: компактный, чтобы влезал без прокрутки */
.verdict--inline{
  padding:12px; display:grid; gap:6px;
  grid-template-columns:64px 1fr;
  align-items:center; text-align:left;
}
.verdict--inline > *{ min-width:0; }
.verdict--inline .verdict__art,
.verdict--inline .win-scene{ grid-row:1 / span 3; width:64px !important; margin:0 !important; }
.verdict--inline .verdict__big{ font-size:15px; }
.verdict--inline .verdict__cap{ font-size:12px; }
.verdict--inline .verdict__actions{
  grid-column:1 / -1; display:flex; gap:6px; margin-top:4px !important;
}
.verdict--inline .verdict__actions .btn{ flex:1; padding:9px 8px; font-size:13px; }

/* добивка компактного режима: экран должен влезать и в 560 px */
@media (max-height:700px){
  .stack{ gap:7px; }
  .verdict--inline{ padding:10px; gap:5px; }
  .verdict--inline .verdict__actions .btn{ padding:8px 6px; font-size:12.5px; }
  .up-pickers .eyebrow{ font-size:10px; }
  .up-wrapper, .up-pick{ margin:0; }
  .up-picker{ padding:0 16px 2px; }
  .up-chip{ width:52px; }
}

@media (max-height:700px){
  .verdict--inline{ padding:8px; gap:4px; }
  .verdict--inline .win-scene{ height:auto !important; max-height:96px; }
}

/* вердикт апгрейда: строгая сетка 2 колонки, иначе подпись рвалась на четыре строки */
.verdict--inline{
  display:grid; grid-template-columns:62px 1fr; align-items:center;
  column-gap:10px; row-gap:2px; text-align:left;
}
.verdict--inline > *:first-child{ grid-row:1 / span 2; grid-column:1; width:62px; margin:0 auto; }
.verdict--inline .verdict__big{ grid-column:2; grid-row:1; font-size:15px; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.verdict--inline .verdict__cap{ grid-column:2; grid-row:2; font-size:11.5px; line-height:1.3; }
.verdict--inline .chain-badge{ grid-column:2; grid-row:3; justify-self:start; }
.verdict--inline .verdict__actions{
  grid-column:1 / -1; grid-row:auto; display:flex; gap:6px; margin-top:6px !important;
}
.verdict--inline .verdict__actions .btn{ flex:1 1 0; min-width:0; padding:9px 6px; font-size:12.5px; }
.verdict--inline .win-scene{ max-height:76px; }


/* первая колонка вердикта: сцена победы и заглушка не шире колонки */
.verdict--inline > *:first-child,
.verdict--inline .win-scene,
.verdict--inline .up-win{
  width:62px !important; max-width:62px !important; max-height:76px !important;
  justify-self:center; align-self:center; overflow:hidden;
}
.verdict--inline .win-scene > *,
.verdict--inline .up-win > *{ max-width:62px !important; }

/* ---------- описание и правила под столом ---------- */
.rules{
  margin-top:6px; padding:12px 14px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(24,18,33,.9), rgba(12,9,18,.92));
  border:1px solid var(--line-soft);
}
.rules__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rules__rtp{ font-size:11.5px; color:var(--gold-hi); font-family:var(--font-disp); letter-spacing:.04em; }
.rules__essence{ margin-top:6px; font-size:13.5px; line-height:1.45; color:var(--text); }
.rules__list{
  margin:8px 0 0; padding:0 0 0 16px; display:grid; gap:4px;
  font-size:12.5px; line-height:1.4; color:var(--text-dim);
}
.rules__list li::marker{ color:rgba(43,227,139,.7); }

/* Хомяк: слово «КРАХ» вместо голого множителя */
.rocket-mult__word{ display:block; }
.rocket-mult__at{
  display:block; margin-top:2px; font-size:19px; letter-spacing:.04em;
  color:rgba(255,255,255,.72); text-shadow:none; font-family:var(--font-body, Manrope, Arial, sans-serif);
}
.rocket-mult.is-crashed .rocket-mult__at{ color:#FFA9BA; }
.rocket-mult.is-cashed .rocket-mult__at{ color:#FFE7A8; }

/* лента истории: краш и выкуп разными цветами */

/* ---------- множитель ставки ---------- */

/* щит: пассивная метка в панели ставки */
.pill--shield{
  background:rgba(124,216,255,.14); color:#9FD9FF; border:1px solid rgba(124,216,255,.35);
  padding:5px 10px; border-radius:999px; font-size:12.5px; font-family:var(--font-disp);
}

/* ---------- альбом ---------- */
.album__set{ margin-top:2px; }
.album__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.album__cell{
  border-radius:12px; padding:8px 6px; text-align:center;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
  opacity:.55; transition:opacity .15s ease, border-color .15s ease;
}
.album__cell.is-have{ opacity:1; border-color:rgba(43,227,139,.35); background:rgba(43,227,139,.06); }
.album__art{ height:52px; display:grid; place-items:center; }
.album__art img{ max-height:48px; max-width:80%; object-fit:contain; }
.album__q{ font-family:var(--font-disp); font-size:22px; color:rgba(255,255,255,.25); }
.album__name{ margin-top:4px; font-size:10.5px; color:var(--text-dim); line-height:1.25;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.album__cell.is-have .album__name{ color:var(--text); }

/* ---------- prefers-reduced-motion ----------
   Игровые анимации и вспышка: без движения и без ярких миганий по просьбе системы. */
@media (prefers-reduced-motion: reduce){
  .btn::after, .case-hero.is-opened, .case-hero.is-shaking,
  .open-chest, .open-chest__lid, .open-rays, .open-glow, .open-particle,
  .reward-pop__glow, .reward-pop__dots, .up-win__glow, .rocket-boom__flash,
  .jumper-hero, .jumper-hero.is-jump, .jumper-hero.is-land, .jumper-hero.is-fall,
  .jumper-hill::before, .jumper-obstacle__body,
  .tower-stage.is-fall, .tower-hero.is-falling, .tower-banner__in{ animation:none !important; }
  .reel__track{ transition:none !important; }
  /* прыжок всё равно должен показывать отрыв: без анимации ставим статичную позу */
  .jumper-hero.is-jump{ transform:translateY(-58px) rotate(-4deg); }
  .screen-flash{ animation:none !important; opacity:0 !important; }
}

/* ---------- действия стола приклеены к низу ----------
   Кнопку действия видно сразу, даже если сцена стола выше первого экрана. */
.screen--game .game-actions-sheet{
  /* Привязан к колонке приложения, а не к окну: на десктопе колонка узкая
     и по центру, а полотно раньше растягивалось на весь экран. */
  position:fixed; left:var(--ga-x, 0px); right:auto; width:var(--ga-w, 100%); bottom:var(--ga-b, 0px);
  z-index:30; margin:0;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius:18px 18px 0 0;
  background:linear-gradient(180deg, #100B18, #0B0911);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 -12px 30px rgba(0,0,0,.55);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-sizing:border-box;
}
/* мягкое затухание над панелью: строка под ней гаснет, а не режется пополам */
.screen--game .game-actions-sheet::before{
  content:""; position:absolute; left:0; right:0; top:-28px; height:28px;
  width:100%;
  background:linear-gradient(180deg, rgba(11,8,19,0), #100B18);
  pointer-events:none;
}
/* место под фиксированным блоком, чтобы сцена доскролливалась целиком */
.screen--game{ padding-bottom:calc(var(--ga-h, 0px) + 26px) !important; }
@media (max-width:344px){
  .screen--game .game-actions-sheet{ left:10px; right:10px; padding:8px 8px max(8px, env(safe-area-inset-bottom, 0px)); }
}

/* Низкие экраны: поле должно умещаться над листом действий целиком.
   Раньше сетка уходила под лист и её приходилось доскролливать. */
@media (max-height:700px){
  /* на низком экране строка «пример выплаты» дублирует кнопку — убираем её,
     чтобы поле мин целиком уместилось над листом действий */
  .screen--game .mines-status{ display:none; }
  .screen--game .mines-grid{ max-width:min(300px, calc(100dvh - var(--ga-h, 200px) - 210px)); }
  .screen--game .storm-board{ max-width:min(360px, 40vh); margin:0 auto; }
  .screen--game .scratch-board{ max-width:min(330px, 36vh); }
}

/* ---------- рулетка призов: казиношная сцена ---------- */
.roulette-stage{
  position:relative; overflow:hidden; border-radius:22px; isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(245,196,81,.16), transparent 60%),
    radial-gradient(90% 70% at 50% 120%, rgba(120,12,34,.35), transparent 65%),
    linear-gradient(180deg, #17101F 0%, #120C18 55%, #0C0710 100%);
  box-shadow: inset 0 0 0 1px rgba(245,196,81,.16), inset 0 -30px 60px rgba(0,0,0,.55);
}
/* бархат стола: мелкая диагональная фактура */
.roulette-stage::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 6px);
  opacity:.8;
}
/* луч софита сверху */
.roulette-stage::after{
  content:""; position:absolute; left:50%; top:-40%; width:80%; height:120%; z-index:0;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%, rgba(255,226,150,.18), transparent 70%);
}
.roulette-stage canvas{ position:relative; z-index:2; }
/* крупье: стоит у стола справа-снизу, чуть перекрывая обод */
.roulette-croupier{
  position:absolute; right:1%; bottom:2%; z-index:3; height:41%; width:auto;
  transform-origin:50% 100%; pointer-events:none; user-select:none;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(245,196,81,.18));
  transition:transform .35s ease;
}
/* под крупье — мягкая тень на столе: фигура «стоит», а не висит */
.roulette-croupier-shadow{
  position:absolute; right:0; bottom:0; z-index:2; width:34%; height:7%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
  pointer-events:none; filter:blur(2px);
}
.roulette-stage.is-spinning .roulette-croupier{ animation:roulette-push .5s ease-in-out infinite; }
@keyframes roulette-push{
  0%,100%{ transform:rotate(-1.5deg) translateY(0); }
  45%{ transform:rotate(2.5deg) translateY(-4px); }
}
@media (max-width:360px){ .roulette-croupier{ height:40%; } }

/* вердикт блэкджека: проигрыш из-за блэкджека дилера объясняем словами */
.bj-verdict{ display:block; font-family:var(--font-disp); font-size:17px; font-weight:700; letter-spacing:.02em; }
.bj-verdict.is-lose{ color:#FF8A8A; }
.bj-verdict__sub{ display:block; font-size:12.5px; color:var(--text-dim); margin-top:3px; }