/* ==========================================================================
   custom.css — стили, вынесенные из index.html
   Подключается ПОСЛЕ style.min.css, чтобы сохранить порядок каскада.
   ========================================================================== */

/* --- Базовый шрифт --- */
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

/* --- Прелоадер: фон, логотип, градиенты полоски --- */
.aaubcy {
  background: linear-gradient(180deg, #161824 0%, #2D324C 49%, #3E4464 91%);
}

.aaubcz {
  max-width: 350px !important;
}

@media (max-width: 767px) {
  .aaubcz {
    margin-top: -25% !important;
    max-width: 290px !important;
  }
}

.aaubdb {
  background: linear-gradient(to right, #29C839, #6CFC69);
}

.aaubda {
  background: linear-gradient(to right, #F0B900, #FFF599);
}

/* --- Прелоадер: раскладка --- */
.aaubcy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 999;
  width: 100%;
  padding: 15px;
  display: flex;
  overflow: hidden;
  height: calc(100dvh + 2px);
}

.aaubcy.is--loaded {
  display: none;
}

.aaubcz {
  margin-bottom: 35px;
  width: 100%;
  max-width: 400px;
}

.aaubda {
  width: 100%;
  height: 28px;
  max-width: 340px;
  padding: 4px;
  border-radius: 100px;
  position: relative;
}

.aaubda::before {
  position: absolute;
  content: '';
  left: 4px;
  top: 4px;
  border-radius: 100px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background-color: #fff;
}

.aaubdb {
  position: relative;
  z-index: 2;
  width: 0;
  height: 100%;
  border-radius: 100px;
  transition: width 0.5s ease;
}

@media (max-width: 767px) {
  .aaubda {
    max-width: 220px;
  }
}

/* --- Text overflow / long-translation fix ---------------------------------------------
   ar/fr/tr (and buyer-customized text via the Custom Landings editor) routinely run longer
   than the English defaults these buttons/labels were originally sized for. white-space:
   nowrap here used to force everything onto one line, so longer translations just got cut
   off at the button's edge instead of wrapping. Now: allow wrapping, and let the buttons
   grow taller to fit rather than clip. app.min.js's calculateFontSize() (font auto-shrink)
   runs first at game init - wrapping is the fallback for whatever's still too long after
   that, not the primary mechanism. Short text (English "GO", "Claim Bonus") already fits on
   one line, so none of this changes how it looks - min-height keeps the original size as a
   floor, it only grows when needed.

   word-break: normal (not break-word/anywhere) is deliberate - break-word lets the browser
   break WITHIN a word whenever that yields a slightly tighter line, not just as a last
   resort, which is exactly what turned French "Réclamer" into "Réclame"/"r". overflow-wrap:
   break-word already covers the genuine last-resort case (a single unbreakable token wider
   than the container) without that side effect - normal wrapping always breaks at a space
   first when one exists. */
.bottom__section-button-text,
.aaubdl,
.aaubds,
.aaubdt,
.aaubdv,
.aaubdx,
.modal__title,
.modal__text {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.bottom__section-button-text {
  line-height: 1.15;
}

/* height:auto/min-height:100% alone does nothing here: #win-button-modal and #cash-btn are
   flex ITEMS of .aaubeb / .aaubdj.is--last, neither of which sets align-items - the flex
   default (stretch) silently forces the item back to the container's fixed cross-axis size
   regardless of the item's own height. align-self: flex-start opts these two out of that
   stretch so height:auto can actually take effect and the button grows to fit wrapped text
   instead of the text spilling past its (stretched-fixed) bottom edge. No-op for #go-btn
   (not a flex item of its parent), so it's safe to apply to both selectors uniformly. */
.bottom__section-button,
.aaubdw {
  height: auto;
  min-height: 100%;
  align-self: flex-start;
}