/* RaxBet v49 - responsive layout fixes */

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body main {
  width: 100% !important;
  max-width: 700px !important;
  padding: 12px 12px
    calc(105px + env(safe-area-inset-bottom, 0px)) !important;
}

body main section,
body main section > div {
  min-width: 0;
}

/* Compact header */
body header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}

body header #logo-home,
body header #logo-home > div:last-child {
  min-width: 0;
}

body #top-username {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px !important;
}

body header #logo-home span:first-child {
  font-size: 16px !important;
}

body header #btn-open-currency {
  min-height: 38px !important;
  padding: 5px 7px !important;
}

body header #user-bal {
  font-size: 13px !important;
}

/* Compact quick-access cards */
body #tab-lobby > .grid:first-child {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px !important;
}

body #tab-lobby > .grid:first-child > div {
  min-width: 0;
  min-height: 58px !important;
  padding: 8px !important;
  gap: 5px !important;
}

body #tab-lobby > .grid:first-child > div > div {
  min-width: 0;
}

/* Smaller introductory banner */
body .hero-banner {
  min-height: 0 !important;
  padding: 16px !important;
  border-radius: 18px !important;
}

body .hero-banner::after {
  display: none !important;
}

body .hero-banner > div {
  max-width: 100% !important;
}

body .hero-banner h1 {
  font-size: clamp(19px, 5vw, 25px) !important;
  line-height: 1.2 !important;
}

body .hero-banner p {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body .hero-banner .pt-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body .hero-banner .pt-2 button {
  min-height: 40px;
  margin: 0 !important;
  white-space: normal;
}

/* Shorter content cards */
body #launch-dice-game,
body #raxbet-arcade-lobby > button {
  min-height: 0 !important;
  padding: 15px !important;
  border-radius: 18px !important;
}

body #launch-dice-game h3,
body #raxbet-arcade-lobby h3 {
  font-size: 17px !important;
  line-height: 1.25 !important;
}

body #launch-dice-game p,
body #raxbet-arcade-lobby p {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

body #launch-dice-game .mt-4 {
  margin-top: 10px !important;
  padding-top: 10px !important;
  gap: 8px;
}

body #raxbet-arcade-lobby > button [class~="text-3xl"] {
  font-size: 34px !important;
}

/* Navigation */
body nav {
  padding: 8px 7px
    calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}

body nav > div {
  max-width: 700px !important;
  gap: 4px !important;
}

body nav button {
  min-width: 0 !important;
  flex: 1 1 0;
  padding: 5px 2px !important;
}

body nav button span {
  font-size: 10px !important;
}

/* Small devices */
@media (max-width: 390px) {
  body header {
    padding: 8px !important;
    gap: 5px !important;
  }

  body header #logo-home {
    gap: 6px !important;
  }

  body header #logo-home span:first-child {
    font-size: 14px !important;
  }

  body header [data-tab="wallet"] {
    font-size: 10px !important;
    padding: 7px !important;
  }

  body #tab-lobby > .grid:first-child > div {
    display: block !important;
  }

  body #tab-lobby > .grid:first-child > div > div:first-child {
    display: none !important;
  }

  body .hero-banner {
    padding: 12px !important;
  }

  body #launch-dice-game .w-16.h-16 {
    display: none !important;
  }
}

@media (max-width: 350px) {
  body header #user-crypto-equiv {
    display: none !important;
  }

  body #top-username {
    max-width: 95px;
  }

  body nav button span {
    font-size: 9px !important;
  }
}

/* Tablets and larger screens */
@media (min-width: 650px) {
  body #raxbet-arcade-lobby {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .hero-banner {
    padding: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #launch-dice-game,
  body #raxbet-arcade-lobby > button {
    transition: none !important;
  }
}