/* ============================================================
   Upgrade page — skin upgrade interface
   Recreates the original /upgrade layout (its bundled CSS,
   ea3720460f508a9c.css, was not part of the static export).
   ============================================================ */

.styles_upgradePage__wrap__custom {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 15px 80px;
}

/* ---- Heading ---- */
.styles_title__UyBHf {
  margin: 0 0 40px;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

/* ---- Main block / panel ---- */
.styles_mainUpgrade__8zQb0 {
  width: 100%;
}

.styles_upgradeTop__zwt_b {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 20px;
  padding: 36px 40px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(40, 53, 74, 0.55) 0%, rgba(22, 29, 43, 0) 55%),
    linear-gradient(180deg, #1c2536 0%, #161d2b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: visible;
}

/* ---- Side bet visuals (skin + podium + glow rings) ---- */
.styles_betContainer__FQFGg,
.styles_betContainer__Qj7P0 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.styles_betVisual__m4Dew {
  position: relative;
  width: 302px;
  max-width: 100%;
  height: 302px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* concentric ring glow behind the skin (inline SVG) */
.styles_ellipseXs__NDinh {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.styles_ellipse__12SsT {
  width: 100%;
  height: 100%;
}

/* soft warm glow under the skin */
.styles_glow__08qNG {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 200px;
  height: 90px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(243, 170, 70, 0.30) 0%, rgba(243, 140, 50, 0.08) 50%, rgba(243, 140, 50, 0) 75%);
  filter: blur(2px);
  z-index: 1;
  pointer-events: none;
}

/* the skin image (AK) — rests on the podium */
.styles_placeholder_skin__e7FCT {
  position: relative;
  z-index: 3;
  width: 78%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-26px);
}

.styles_placeholder__image__lmav_ {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.5));
}

/* podium image (img/podium-base.webp) */
.style_podiumImage__oG6cE {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 112%;
  max-width: none;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* logo mark (remote asset, not bundled locally) */
.styles_logo__2Xlxf {
  display: none;
}

/* ---- Central chance circle ---- */
.styles_chanceContainer__qd9cd {
  position: relative;
  z-index: 5;
}

.styles_contentChance__R_HCu {
  position: relative;
  width: 360px;
  height: 360px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.styles_chanceCircle__p58ee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.styles_chanceCircle__p58ee > svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.4));
}

/* gold pointer at the top of the circle */
.styles_chancePoint__00Dnu {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.styles_chancePoint__container__oI2sn {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 48px;
  height: 42px;
  margin-left: -24px;
  transform-origin: center 190px;
}

/* ---- Centered info: chance %, label, button, switcher ---- */
.styles_upgradeInfo__uv3xz {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.styles_largeText__PpTOY {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.styles_runUpgrade__dVf3k {
  margin-top: 18px;
  min-width: 156px;
}

/* gold gradient button */
.styles_color--gold-gradient__awp28 {
  background: linear-gradient(180deg, #f3ca80 0%, #d2a655 100%);
  color: #1a1f29;
  border: none;
}

.styles_color--gold-gradient__awp28:disabled {
  background: linear-gradient(180deg, #8d7c50 0%, #756542 100%);
  color: rgba(26, 31, 41, 0.85);
  cursor: default;
}

.styles_runUpgrade__dVf3k .styles_icon__1IAKk path {
  fill: currentColor;
}

/* "Быстро" charge switcher (toggle) */
.styles_chargeSwitcher__e9zaZ {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.styles_chargeSwitcher__decorate__yR5zG {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 12px;
  background: #2a3346;
  transition: background 0.2s ease;
}

.styles_chargeSwitcher__decorate__yR5zG::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #9aa3b4;
  transition: transform 0.2s ease, background 0.2s ease;
}

.styles_chargeSwitcher__e9zaZ.is-active .styles_chargeSwitcher__decorate__yR5zG {
  background: #f3ca80;
}

.styles_chargeSwitcher__e9zaZ.is-active .styles_chargeSwitcher__decorate__yR5zG::after {
  transform: translateX(18px);
  background: #1a1f29;
}

/* ---- Responsive ---- */
@media (max-width: 1023.98px) {
  .styles_upgradeTop__zwt_b {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 32px 20px;
  }

  .styles_chanceContainer__qd9cd {
    order: -1;
  }
}

@media (max-width: 549.98px) {
  .styles_title__UyBHf {
    font-size: 22px;
  }

  .styles_betVisual__m4Dew {
    width: 240px;
    height: 240px;
  }

  .styles_contentChance__R_HCu {
    width: 300px;
    height: 300px;
  }

  .styles_largeText__PpTOY {
    font-size: 38px;
  }
}

/* ============================================================
   Center section — balance slider / type toggle / multipliers
   ============================================================ */
.styles_centerSection__KPjYA {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  z-index: 2;
  padding: 14px;
  margin: 20px 0;
  background: #25263a;
  border-radius: var(--border-radius-lg);
}

@media (min-width: 550px) {
  .styles_centerSection__KPjYA {
    width: 100%;
    margin: 25px auto;
  }
}

@media (min-width: 1250px) {
  .styles_centerSection__KPjYA {
    width: 94%;
  }
}

/* ---- 1) Balance block (left) ---- */
.styles_centerSection__KPjYA .styles_control__W2iPX {
  flex: 0 0 360px;
  width: 360px;
  max-width: 100%;
  display: flex;
}

.styles_control__balance__VhLuW {
  width: 100%;
  display: flex;
}

.styles_control__balance__VhLuW.styles_control__disabled__HmpGa {
  opacity: 0.6;
}

.styles_balanceContainer__0WQ9h {
  display: block;
  width: 100%;
  height: auto;
  padding: 14px 18px;
  border-radius: var(--border-radius-md, 8px);
}

.styles_balanceController__pNB6m {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.styles_balanceController__topSide__gCtT_ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.styles_balanceController__pNB6m .styles_wrapper__bWnZr {
  width: 100%;
}

/* ---- 2) Type toggle: Баланс / Скины (center) ---- */
.styles_control__center__kBZK0 {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.styles_changeTypeBet__Vutqb {
  display: flex;
}

.styles_toggle__9RmZd {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 5px;
  border-radius: var(--border-radius-md, 8px);
  background: var(--color-primary, #181924);
}

.styles_toggleSlider__0YXYO {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(50% - 5px);
  bottom: 5px;
  border-radius: 6px;
  background: var(--color-gold-gradient, linear-gradient(180deg, #f3ca80, #c0a16e));
  transition: transform 0.25s ease;
  z-index: 0;
}

/* active = "Скины" selected → gold pill slides to the right segment */
.styles_toggle__9RmZd.styles_active__I5ZYh .styles_toggleSlider__0YXYO {
  transform: translateX(100%);
}

.styles_balanceToggle__LoXfT,
.styles_skinToggle__pOK2i {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  white-space: nowrap;
  cursor: pointer;
}

/* ---- 3) Multiplier buttons (right) ---- */
.styles_control__multiplier__kuu7A {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
}

.styles_buttons__group__jRpWo {
  display: flex;
  gap: 8px;
}

/* override the common full-width class so buttons stay compact */
.styles_centerSection__KPjYA .styles_buttons__groupButton__aVixO {
  flex: 0 0 auto;
  width: auto;
  min-width: 56px;
}

.styles_color--golden-gradient-2__hykwV {
  background: linear-gradient(180deg, rgba(243, 202, 128, 0.18) 0%, rgba(243, 202, 128, 0.07) 100%);
  border: 1px solid rgba(243, 202, 128, 0.5);
}

/* ============================================================
   Bottom section — inventory selectors (unauthorized state)
   ============================================================ */
.styles_bottomSection__gj_Tj {
  margin-top: 24px;
}

.styles_selectors__container__1bZba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.styles_your_inventory__container__iOnJG,
.styles_your_inventory__container__9D0HJ {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 28px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, #1c2536 0%, #161d2b 100%);
}

.styles_your_inventory__unauthorized__3pP5G,
.styles_your_drops__unauthorized__pOR8u {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 340px;
  text-align: center;
}

.styles_unauthorized_button__wrapper__74qyG,
.styles_unauthorized_button__wrapper__OrQlj {
  display: flex;
  justify-content: center;
}

/* ---- Responsive: center & bottom sections ---- */
@media (max-width: 1023.98px) {
  .styles_centerSection__KPjYA {
    flex-direction: column;
    align-items: stretch;
  }

  .styles_control__center__kBZK0,
  .styles_control__multiplier__kuu7A {
    justify-content: center;
  }

  .styles_changeTypeBet__Vutqb,
  .styles_buttons__group__jRpWo {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 549.98px) {
  .styles_selectors__container__1bZba {
    grid-template-columns: 1fr;
  }

  .styles_buttons__group__jRpWo {
    flex-wrap: wrap;
  }

  .styles_balanceToggle__LoXfT,
  .styles_skinToggle__pOK2i {
    flex: 1 1 0;
    justify-content: center;
    padding: 10px 12px;
  }
}

/* ============================================================
   Bet panel (custom clean version)
   ============================================================ */
.bet-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #23233a;
  border-radius: 18px;
  padding: 18px 20px;
  gap: 20px;
  margin: 20px 0;
}

/* Баланс */
.balance-box {
  width: 360px;
  background: #2a2a45;
  border-radius: 12px;
  padding: 12px 16px;
  position: relative;
}

.balance-top {
  display: flex;
  justify-content: space-between;
  color: #8d8fa6;
  font-size: 15px;
  font-weight: 600;
}

.slider-line {
  margin-top: 14px;
  height: 4px;
  border-radius: 999px;
  background: #cba45f;
}

.slider-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #a9a9b8;
  position: absolute;
  left: 16px;
  bottom: 12px;
}

/* Переключатель */
.mode-switch {
  display: flex;
  overflow: hidden;
  border-radius: 12px;
  background: #2a2a45;
}

.mode-btn {
  border: none;
  background: transparent;
  color: #9da0b7;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 26px;
  cursor: pointer;
}

.mode-btn.active {
  background: #e6bb6c;
  color: #1b1b25;
}

/* Множители */
.multipliers {
  display: flex;
  gap: 10px;
}

.multipliers button {
  width: 64px;
  height: 54px;
  border: none;
  border-radius: 10px;
  background: #2a2a45;
  color: #73758d;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}

.multipliers button:hover {
  background: #353555;
}

/* keep the clean panel responsive */
@media (max-width: 767.98px) {
  .bet-panel {
    flex-wrap: wrap;
    justify-content: center;
  }

  .balance-box {
    width: 100%;
  }

  .multipliers {
    flex-wrap: wrap;
    justify-content: center;
  }
}