@import url("./tablet-playing-spacing.css?id=tablet-playing-spacing-1");

/* Mobile playing-phase spacing.
 * Keep the active trick compact while preserving a clear visual break before
 * the player's hand below it. Loaded after the trick/label styles so this is
 * the final narrow-screen spacing authority for the two felt stations. */

@media (max-width: 767px) {
  /* Balance the trick vertically inside its felt station. Pull the trick a few
     pixels upward by reducing the former 12px top inset, and give those pixels
     back below the cards so the lower edge has matching breathing room. */
  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    min-height: 0 !important;
    padding: 8px !important;
  }

  /* Labels now sit in normal flow above each card, so the trick row needs a
     little more height than the old overlay version. */
  body[data-pepper-phase="playing"] #pepper-app .play-cards-stack,
  body[data-pepper-phase="playing"] #pepper-app .play-cards-stack > .played-card-row {
    height: 120px !important;
    min-height: 130px !important;
  }

  body[data-pepper-phase="playing"] #pepper-app .play-cards-stack > .played-card-row {
    padding-top: 8px !important;
  }

  /* Deliberately separate the player's hand from the completed/current trick.
     The extra gap reinforces the play direction: hand below, trick above. */
  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child {
    margin-top: 8px !important;
  }

  /* Give the dealt cards breathing room inside their own felt panel. The cards
     were sitting almost directly against the panel's top edge on phones. Add
     internal space above them while increasing the hand slot by the same
     amount so the action row below does not get crowded. */
  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    height: 118px !important;
    min-height: 118px !important;
    block-size: 118px !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    top: 16px !important;
  }
}

@media (max-width: 479px) {
  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    height: 108px !important;
    min-height: 108px !important;
    block-size: 108px !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    top: 14px !important;
  }
}

/* Surface Pro portrait / wide tablet auction spacing.
 * The general tablet layer still carried the original 460px hand minimum and
 * 270px hand slot during bidding. That created the two empty felt bands above
 * the cards and below the bidding controls. Size the bidding panel from its
 * actual contents, then remove the empty trick station until card play starts. */
@media (min-width: 900px) and (max-width: 991px) {
  body[data-pepper-game-started="true"][data-pepper-phase="bidding"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 6px !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="bidding"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper > .row,
  body[data-pepper-game-started="true"][data-pepper-phase="bidding"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper > .row > .col-md-12,
  body[data-pepper-game-started="true"][data-pepper-phase="bidding"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper > .row > .col-md-12 > .row {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="bidding"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    flex: 0 0 176px !important;
    width: min(100%, 520px) !important;
    height: 176px !important;
    min-height: 176px !important;
    margin: 0 auto !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="bidding"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child
  .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 4px !important;
  }

  /* Before actual card play there is no trick to show. The tablet layout had
     reserved an entire 130px grid row for this empty station. */
  body[data-pepper-game-started="true"]:not([data-pepper-phase="playing"])
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-pepper-game-started="true"]:not([data-pepper-phase="playing"])
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child {
    grid-row: 2 !important;
  }

  /* Bootstrap modals lock document scrolling with body.modal-open. Bot games
     can transition into the table while the modal is finishing its hide
     animation, leaving the Surface Pro page effectively frozen. Once there is
     no visible modal, explicitly restore document scrolling and let the game
     row grow to include the chat card and its input. */
  html:not(:has(.modal.show)),
  body.body-dark:not(:has(.modal.show)) {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  body.body-dark.modal-open:not(:has(.modal.show)) {
    overflow-y: auto !important;
    padding-right: 0 !important;
  }

  body.body-dark:not(:has(.modal.show)) .game-shell,
  body.body-dark:not(:has(.modal.show)) #pepper-app,
  body.body-dark:not(:has(.modal.show)) #pepper-app > div,
  body.body-dark:not(:has(.modal.show)) #pepper-app > div > .row.mb-4.g-0 {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  body.body-dark:not(:has(.modal.show))
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child,
  body.body-dark:not(:has(.modal.show)) #pepper-app .card {
    height: auto !important;
    max-height: none !important;
  }
}