@import url("./compact-playing-two-column.css?id=compact-playing-two-column-1");

/*
 * Bot setup modal centering.
 *
 * Keep the dialog visually centered when it fits. When the viewport is too
 * short for the complete setup form, constrain the modal to the viewport and
 * let only the body scroll so the close control, form fields, difficulty
 * choices, team summary, and Start Bot Game action all remain reachable.
 */

/* Surface Pro portrait / wide tablet. */
@media (min-width: 900px) and (max-width: 991px) {
  .pepper-bot-game-modal.show {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow: hidden !important;
  }

  /* Bootstrap's centered-dialog helper can contribute its own viewport-sized
     pseudo-element. Remove it here so the dialog itself is the only centering
     box and cannot be pushed below the visible viewport. */
  .pepper-bot-game-modal.show .modal-dialog-centered::before {
    display: none !important;
    height: 0 !important;
    content: none !important;
  }

  .pepper-bot-game-modal.show .modal-dialog,
  .pepper-bot-game-modal.show .modal-dialog-centered {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: stretch !important;
    flex: 0 1 680px !important;
    width: min(680px, 100%) !important;
    max-width: 680px !important;
    height: calc(100vh - 40px) !important;
    height: calc(100dvh - 40px) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 40px) !important;
    max-height: calc(100dvh - 40px) !important;
    margin: 0 !important;
    transform: none !important;
  }

  .pepper-bot-game-modal.show .modal-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .pepper-bot-game-modal.show .modal-header {
    flex: 0 0 auto !important;
  }

  .pepper-bot-game-modal.show .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Leave a little breathing room below the primary action when the modal body
     is scrolled all the way to the bottom. */
  .pepper-bot-game-modal.show .pepper-bot-game-modal__start {
    margin-bottom: 4px !important;
  }
}

/* Compact desktop / landscape tablet. */
@media (min-width: 992px) and (max-width: 1199px) {
  .pepper-bot-game-modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  .pepper-bot-game-modal.show .modal-dialog {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    flex: 0 1 680px !important;
    width: min(680px, 100%) !important;
    max-width: 680px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    transform: translateY(clamp(-140px, -10vh, -64px)) !important;
  }

  .pepper-bot-game-modal.show .modal-content {
    width: 100% !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: hidden !important;
  }

  .pepper-bot-game-modal.show .modal-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}