/* ============================================================================
   Дельта баланса — справа от суммы выезжает текст и показывает, сколько
   прибавилось (зелёным) или списалось (красным): выигрыш, проигрыш, покупка
   подарка, пополнение — любое изменение цифры в шапке. Никакой подложки:
   только цифра, чтобы шапка не утяжелялась.

   Анимация ровно 3 секунды: 520мс мягкое вытягивание текста вправо, 1960мс
   показ, 520мс обратное втягивание. Тайминги продублированы в balance_delta.js
   (константы OPEN_MS / HOLD_MS / CLOSE_MS) — менять надо в обоих местах.

   Почему тег <b>, а не <span>: в шапке лежит правило
   `#balance … .floating-balance-main span{color:#fff!important}` — оно
   специфичнее любого разумного селектора по классу и перекрасило бы дельту
   в белый. Другой тег под это правило просто не попадает.
   ========================================================================== */

:root{
  --bd-open-ms:520ms;
  --bd-close-ms:520ms;
  --bd-ease-out:cubic-bezier(.22, 1, .36, 1);
  --bd-ease-in:cubic-bezier(.55, 0, .35, 1);
  --bd-plus:#4fe58b;
  --bd-minus:#ff6274;
}

b.yak-balance-delta{
  /* Схлопнутое состояние. Отрицательный margin съедает gap флекс-строки —
     иначе пустой, ещё не раскрытый бейдж уже раздвигал бы сумму на 5-6px. */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex:0 0 auto !important;
  box-sizing:border-box !important;
  /* Дельта чуть мельче суммы и поднята над её базовой линией — читается как
     приписка к цифре, а не как вторая цифра в строке. Сдвиг через
     position/top, а не transform, — transform занят анимацией раскрытия. */
  position:relative !important;
  top:-1px !important;
  max-width:0 !important;
  height:1.6em !important;
  padding:0 !important;
  margin-left:calc(-1 * var(--bd-gap, 6px)) !important;
  border:0 !important;
  background:none !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  font-size:.96em !important;
  font-weight:1000 !important;
  font-style:normal !important;
  line-height:1 !important;
  letter-spacing:.2px !important;
  text-shadow:none !important;
  opacity:0 !important;
  transform:scaleX(.62) !important;
  transform-origin:left center !important;
  pointer-events:none !important;
  will-change:max-width, transform, opacity;
  transition:
    max-width var(--bd-close-ms) var(--bd-ease-in),
    margin-left var(--bd-close-ms) var(--bd-ease-in),
    transform var(--bd-close-ms) var(--bd-ease-in),
    opacity calc(var(--bd-close-ms) * .62) linear !important;
}

b.yak-balance-delta.is-open{
  max-width:var(--bd-w, 64px) !important;
  margin-left:0 !important;
  opacity:1 !important;
  transform:none !important;
  transition:
    max-width var(--bd-open-ms) var(--bd-ease-out),
    margin-left var(--bd-open-ms) var(--bd-ease-out),
    transform var(--bd-open-ms) var(--bd-ease-out),
    opacity calc(var(--bd-open-ms) * .5) linear !important;
}

/* Замер натуральной ширины перед стартом: в раскрытом виде, но невидимо
   и вне анимации, чтобы не мигнуть на кадр. Отступы здесь обязаны совпадать
   с .is-open, иначе замер соврёт и текст обрежется. */
b.yak-balance-delta.is-measuring{
  max-width:none !important;
  margin-left:0 !important;
  transform:none !important;
  transition:none !important;
  opacity:0 !important;
}

b.yak-balance-delta[data-sign="plus"]{
  color:var(--bd-plus) !important;
}

b.yak-balance-delta[data-sign="minus"]{
  color:var(--bd-minus) !important;
}

/* ---- Шапка главного экрана: TON сверху, Stars снизу ----------------------
   Поле растёт вправо и наезжает на кнопку «+» — она на время анимации
   уходит с дороги (гасим и сдвигаем), потом возвращается. */
#balance .top-balance-pill .top-balance-plus{
  transition:opacity var(--bd-open-ms) var(--bd-ease-out), transform var(--bd-open-ms) var(--bd-ease-out) !important;
}

#balance .top-balance-pill.is-bd-open .top-balance-plus{
  opacity:.10 !important;
  transform:translateX(7px) scale(.9) !important;
}

/* Если поле не помещается до края панели — весь столбик баланса отъезжает
   влево ровно на нехватку (в панели для этого есть пустая средняя колонка).
   Величину считает JS в --bd-pull. */
#balance .top-balance-stack{
  transition:transform var(--bd-open-ms) var(--bd-ease-out) !important;
  will-change:transform;
}

#balance .top-balance-stack.is-bd-pulled{
  transform:translateX(calc(-1 * var(--bd-pull, 0px))) !important;
}

/* ---- Шапка полноэкранной игры: Stars слева, TON справа -------------------
   Здесь поле Stars растёт вправо, поэтому весь блок баланса подвигается
   правее ровно настолько, сколько остаётся свободного места до края экрана
   (--bd-shift считает JS). */
.fullscreen-floating-balance{
  transition:transform var(--bd-open-ms) var(--bd-ease-out) !important;
  will-change:transform;
}

.fullscreen-floating-balance.is-bd-shifted,
/* В режиме системной кнопки «назад» блок баланса центрируется правилом с
   `transform:none!important` — перебиваем его точечно, иначе сдвиг не сработает. */
html.tg-fullscreen-back-active .fullscreen-game-overlay:not(.hidden) .fullscreen-floating-balance.is-bd-shifted{
  transform:translateX(var(--bd-shift, 0px)) !important;
}

@media (prefers-reduced-motion: reduce){
  b.yak-balance-delta{
    transform:none !important;
  }

  .fullscreen-floating-balance.is-bd-shifted{
    transform:none !important;
  }

  #balance .top-balance-stack.is-bd-pulled{
    transform:translateX(calc(-1 * var(--bd-pull, 0px))) !important;
  }
}