/*
 * Mobile hand/action spacing correction.
 *
 * Loaded after the existing responsive layers so the dealt hand consumes only
 * the height needed by the visible cards. This keeps Sort and Pagat decision
 * actions immediately below the hand instead of leaving an empty felt runway.
 */

@media (max-width: 767px) {
  /* Compact the two team score cards on phones. The wider responsive layer
     gives these cards extra vertical room that is useful on tablet but costly
     on mobile. Keep the complete Team / Score / Tricks hierarchy in 70px. */
  body #pepper-app .team-1-bg,
  body #pepper-app .team-2-bg {
    position: relative !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  body #pepper-app .team-1-bg > .row,
  body #pepper-app .team-2-bg > .row {
    display: none !important;
  }

  body #pepper-app .team-1-bg .mock-score,
  body #pepper-app .team-2-bg .mock-score {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-rows: 17px 1fr !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 5px 8px 6px !important;
    visibility: visible !important;
  }

  body #pepper-app .mock-score__team {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
  }

  body #pepper-app .mock-score__stats {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    align-items: stretch !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  /* Each metric owns one half of the card. Center the number and label inside
     that half while keeping the team heading itself left aligned. */
  body #pepper-app .mock-score__stat {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 8px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body #pepper-app .mock-score__stat + .mock-score__stat {
    padding-left: 0 !important;
    border-left: 1px solid rgba(255,255,255,.16) !important;
  }

  body #pepper-app .mock-score__value {
    display: block !important;
    margin: 0 0 2px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

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

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child
  .pepper-hand-wrapper > .row > .col-md-12 {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    height: 106px !important;
    min-height: 106px !important;
    block-size: 106px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

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

  /* Once bidding is complete Vue keeps the old bid button group in the DOM
     with Bootstrap's .invisible class. visibility:hidden still reserves the
     group's full mobile grid height, which is the large empty felt strip seen
     between the cards and Sort. Collapse that stale auction UI completely in
     post-bid phases instead of merely hiding it visually. */
  body[data-pepper-game-started="true"]:not([data-pepper-phase="bidding"])
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child
  .pepper-hand-wrapper .col-md-8 > .btn-group.invisible {
    display: none !important;
  }

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

  body[data-pepper-game-started="true"]
  #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: 2px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[data-pepper-game-started="true"]:not([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 > .row {
    margin-top: 0 !important;
    row-gap: 0 !important;
  }

  /* During card play, keep Play Card visually centered under the hand while
     putting Sort at the far right of that same action row. This preserves the
     centered primary action without spending another full row on Sort. */
  body[data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 8px 8px !important;
    text-align: center !important;
  }

  body[data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end > .row,
  body[data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end .col {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end .col > div:first-child {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body[data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end .col > div:first-child > .btn.btn-warning {
    position: static !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 116px !important;
    max-width: 150px !important;
    margin: 0 auto !important;
  }

  body[data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end .col > div:first-child > .btn:last-child {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* On phones the legacy vertical trump picker was absolutely positioned at
     the right edge of the hand. The compact felt wrapper intentionally clips
     overflow, so Spades / No Trump could fall below the wrapper and become
     unreachable. In Choose Trump, make the picker a real row above the cards
     and show all five choices across the available width. */
  body[data-pepper-phase="choose-suit"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .winning-bidder-suit-picker {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 4px !important;
    padding: 5px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    background: rgba(8,24,19,.78) !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  body[data-pepper-phase="choose-suit"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .winning-bidder-suit-picker .btn-group-vertical {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body[data-pepper-phase="choose-suit"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .winning-bidder-suit-picker .btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 4px 2px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }
}

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

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    top: 2px !important;
    width: clamp(54px, 15.5vw, 64px) !important;
  }

  body[data-pepper-phase="choose-suit"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .winning-bidder-suit-picker .btn {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 9px !important;
  }
}

/* In stacked phone / portrait-tablet play, put the active trick above the
   local hand. The player's cards stay closest to them at the bottom of the
   table, so each play visually travels up and away toward the opponents. */
@media (max-width: 991px) {
  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

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

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