/* Compact playing layout for 992px–1199px.
 * At this width the trick belongs above the local hand instead of in a narrow
 * center rail. Chat and Current Phase remain in the right column. */
@media (min-width: 992px) and (max-width: 1199px) {
  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app > div > .row.mb-4.g-0 {
    grid-template-columns: minmax(0, 1fr) minmax(290px, 320px) !important;
    /* Keep the trick track tied to the trick station itself. With two auto rows,
       the right column (which spans both rows) could inflate row 1 and leave a
       large empty band beneath the trick before the local hand began. */
    grid-template-rows: 156px auto !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
  }

  /* Trick pile: full-width horizontal station above the hand. Keep just enough
     vertical room for the label + lead card without leaving a large runway
     underneath the current trick. */
  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;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 156px !important;
    min-height: 156px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    align-self: start !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app .play-cards-stack,
  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app .play-cards-stack > .played-card-row {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 140px !important;
    min-height: 140px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app .play-cards-stack > .played-card-row {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    align-items: start !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 4px 0 0 !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app .played-card-item {
    width: 70px !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app .played-card-item:first-child {
    width: 82px !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app .played-card-label {
    width: 70px !important;
    max-width: 70px !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app .played-card-item:first-child .played-card-label {
    width: 82px !important;
    max-width: 82px !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app .play-cards-stack img.laydown-pile {
    position: static !important;
    display: block !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 70px !important;
    max-width: 70px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    filter: drop-shadow(0 8px 7px rgba(0,0,0,.32)) !important;
    transform: none !important;
  }

  body[data-pepper-game-started="true"][data-pepper-phase="playing"]
  #pepper-app .play-cards-stack > .played-card-row > .played-card-item:first-child img.laydown-pile {
    width: 82px !important;
    max-width: 82px !important;
    filter: drop-shadow(0 10px 8px rgba(0,0,0,.36)) !important;
  }

  /* Local hand and controls sit directly below the trick. */
  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;
    width: 100% !important;
    align-self: start !important;
  }

  /* Put the cards at the top of the local-hand panel, then the actions below.
     The legacy DOM renders actions before the hand; at 1024px that left a large
     empty runway above the cards. Reordering only this playing breakpoint keeps
     the hand visually closer to the trick pile and matches the mobile flow. */
  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-wrapper > .row > .col-md-12 > .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !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 {
    order: 1 !important;
    place-items: start center !important;
    height: 154px !important;
    min-height: 154px !important;
    margin: 0 auto !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
  }

  /* Vue leaves the completed bidding button group in the DOM with .invisible.
     At this breakpoint the action columns are stacked, so that hidden group was
     still reserving a full row between the cards and Play Card / Sort. */
  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-wrapper .col-md-8 > .btn-group.invisible {
    display: none !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-wrapper .col-md-8 {
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !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-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0 {
    order: 2 !important;
    margin-top: 6px !important;
  }

  /* The fan raises the selected card above its resting position. The primary
     hand wrapper clips overflow at this breakpoint, so reserve a small buffer
     above the hand to keep the full selected card and outline visible. */
  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-wrapper {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 18px !important;
  }

  /* Chat and Current Phase own the full right side. */
  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: 2 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    align-self: stretch !important;
  }
}