/**
 * Выравнивает rem с production caser.gg (html 62.5% → 10px), анимации ленты и вспомогательные правки.
 * Ширину колонки live-drops не трогаем: в разметке caser.gg стоит w-[28rem] (~280px).
 */
html {
  font-size: 62.5%;
  /* Резервируем место под скроллбар — меньше скачков при overflow:hidden на модалке (поддерживающие браузеры). */
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  html {
    font-size: 62.5%;
  }
}

/* Модалка: lg:!w-[calc(100vw-2rem)] не совпадает с фактической шириной layout при scrollbar. */
#caser-auth-modal-overlay {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#caser-auth-modal-overlay #caser-auth-modal {
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  #caser-auth-modal-overlay #caser-auth-modal {
    width: auto !important;
    max-width: min(46rem, calc(100% - 2rem)) !important;
  }
}

html.caser-modal-lock {
  overscroll-behavior: none;
}

/*
 * До breakpoint lg разметка была flex-row: узкая колонка ленты (~28rem) + справа пустое размытое поле.
 * Колонка + полная ширина ленты — сразу видно много карточек, контент с кейсами ниже без «дыры».
 */
@media (max-width: 1023px) {
  [data-caser-layout-row] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.2rem !important;
  }

  #caser-livedrops-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  #caser-livedrops-shell > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Плавный скролл области ленты (мобильная колонка / lg горизонт). */
.livedrops-list-bg > div[class*="overflow-y-auto"],
.livedrops-list-bg > div[class*="overflow-x-auto"] {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .livedrops-list-bg > div[class*="overflow-y-auto"],
  .livedrops-list-bg > div[class*="overflow-x-auto"] {
    scroll-behavior: auto;
  }
}