/* COPA RUSH — Otimizações mobile-first */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  overscroll-behavior-y: none;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

/* ── Scrollbar lateral: oculta em repouso · rolagem normal (toque/rodinha/trackpad) ── */
html {
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: transparent;
}

html.cr-scroll-active {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

html.cr-scroll-active::-webkit-scrollbar {
  width: 5px;
  display: block;
}

html.cr-scroll-active::-webkit-scrollbar-track {
  background: transparent;
}

html.cr-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.42);
  border-radius: 999px;
}

html.cr-scroll-active::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.58);
}

.cr-page-shell {
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

.cr-bottom-bar {
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}

body.cr-profile-open,
body.cr-taxa-modal-open,
body.cr-wallet-open {
  overflow: hidden !important;
  touch-action: none;
}

/* Touch targets — rodapé e modais */
a.cr-bottom-bar__item,
.cr-bottom-bar__main-btn,
.cr-wallet-tabs__btn,
.cr-withdraw-chip,
.value-btn,
.cr-profile-menu__item,
.cr-profile-menu__cta {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Header — avatar e refresh sem min-height (não mexe no botão depositar) */
.cr-avatar-btn,
.refresh-btn {
  min-height: 0 !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Header wallet — sempre horizontal no mobile */
.cr-header-wallet {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 5px !important;
}

#crHeaderDepositBtn.cr-header-deposit-btn,
.cr-balance-pill {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 400px) {
  :root {
    --cr-wallet-h: 24px;
    --cr-wallet-font: 11px;
    --cr-wallet-gap: 7px;
    --cr-wallet-pad-x: 11px;
  }
}

@media (max-width: 360px) {
  :root {
    --cr-wallet-h: 22px;
    --cr-wallet-font: 10px;
    --cr-wallet-gap: 5px;
    --cr-wallet-pad-x: 8px;
  }

  #crHeaderDepositBtn.cr-header-deposit-btn .cr-header-deposit-btn__text {
    letter-spacing: 0.01em !important;
  }
}

@media (max-width: 320px) {
  #crHeaderDepositBtn .cr-header-deposit-btn__text {
    font-size: 9px !important;
  }

  .cr-balance-pill .amount {
    font-size: 9px !important;
  }
}

/* ── Modais responsivos ── */
@media (max-width: 640px) {
  .cr-wallet-modal,
  .cr-deposit-modal,
  .cr-taxa-modal {
    padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
  }

  .cr-wallet-modal__content,
  .cr-deposit-modal__content,
  .cr-taxa-modal__scroll {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  }

  .cr-game-feed__viewport {
    scroll-padding-inline: 12px;
  }

  .cr-site-footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  #carouselWrapper .banner-viewport {
    border-radius: 14px;
  }

  .cr-withdraw__chips {
    grid-template-columns: repeat(2, 1fr);
  }

  .cr-withdraw-chip--full {
    grid-column: 1 / -1;
  }
}

/* ── Rodapé ── */
@media (max-width: 380px) {
  .cr-bottom-bar__item {
    font-size: 8px;
  }

  .cr-bottom-bar__item i {
    font-size: 18px;
  }
}