/* Fits game tables to the phone column and to tablets. Wheel, Lightning and Tower keep their own layout. */

body.refresh-design .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  box-sizing: border-box;
  height: calc(64px + var(--app-inset-top, env(safe-area-inset-top, 0px)));
  padding-top: var(--app-inset-top, env(safe-area-inset-top, 0px));
  background: #17140f;
}

@media (max-width: 700px) {
  body.refresh-design .topbar {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  body.refresh-design .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  body.refresh-design .account {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  body.refresh-design .balance-label { display: none; }

  body.refresh-design .balance-value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  body.refresh-design .chat-toggle,
  body.refresh-design .sound-toggle {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
  }

}

/* The client bar covers the top of the page. Chat lives in the bottom nav. */
body.refresh-design .topbar > .chat-toggle { display: none; }

body.refresh-design .mobile-nav {
  z-index: 35;
}

body.refresh-design .mobile-nav button,
body.refresh-design .mobile-nav button.nav-game,
body.refresh-design .mobile-nav button.nav-game.active {
  width: 20%;
}

body.refresh-design .mobile-nav [data-chat-toggle][aria-expanded="true"] {
  color: #e5c48a;
  background: #d6b37b24 !important;
}

@media (min-width: 700px) and (max-width: 1180px) {
  body {
    max-width: min(920px, 100%);
  }

  .mobile-nav {
    width: min(100%, 920px);
  }
}

@media (max-width: 1180px) {
  body .screen:is(.dice-screen, .double-screen, .dream-screen, .crazy-screen, .crash-screen, .blackjack-screen, .fruit-screen) {
    padding: 16px 14px 108px;
    min-height: 0;
  }

  body .screen:is(.dice-screen, .double-screen, .dream-screen, .crazy-screen, .crash-screen, .blackjack-screen) > .sub-head {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  body .screen:is(.dice-screen, .double-screen, .dream-screen, .crazy-screen, .crash-screen, .blackjack-screen) > .sub-head h1,
  body .fruit-screen .fs-heading h1 {
    font-size: 28px;
    margin-top: 4px;
    margin-bottom: 6px;
  }

  body .double-wheel,
  body .dream-wheel,
  body .crazy-main-wheel {
    width: min(100%, 340px);
  }

  body .dice-number-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body .dice-choice,
  body .double-choice,
  body .dream-choice,
  body .crazy-choice {
    min-height: 58px;
  }

  body .crazy-number-choices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body .crazy-bonus-choices {
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-height: 132px;
  }

  body .crazy-all-bonuses {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
  }

  body .crash-scene {
    height: min(42vw, 250px);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 70%;
  }

  body .crash-action {
    min-height: 52px;
    position: relative;
    z-index: 2;
  }

  body .bj-saloon.bj-saloon-firstperson,
  body .blackjack-screen .bj-webgl-scene {
    --bj-base-height: min(46svh, 420px);
    min-height: 280px;
    height: calc(var(--bj-base-height) + var(--bj-extra-height, 0px));
  }

  body .fruit-screen {
    max-width: none;
  }
}

@media (min-width: 700px) and (max-width: 1180px) {
  body .double-wheel,
  body .dream-wheel,
  body .crazy-main-wheel {
    width: min(100%, 420px);
  }

  body .dice-screen .dice-stage {
    height: 260px;
  }

  body .crash-scene {
    height: 280px;
  }

  body .bj-saloon.bj-saloon-firstperson,
  body .blackjack-screen .bj-webgl-scene {
    --bj-base-height: min(52svh, 520px);
  }
}