/* Current-trick layout.
   Played cards are kept in play order on one horizontal row. Each player label
   sits above its own card in normal flow. The first card in the trick is the
   lead, so it remains slightly larger than the later plays. */

@media (min-width:1200px) {
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    width:430px !important;
    height:190px !important;
    margin-top:0 !important;
  }

  #pepper-app .play-cards-stack {
    position:relative !important;
    width:430px !important;
    height:190px !important;
    min-height:190px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  #pepper-app .play-cards-stack > .played-card-row {
    position:relative !important;
    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:max-content !important;
    align-items:start !important;
    justify-content:center !important;
    gap:16px !important;
    width:430px !important;
    height:190px !important;
    min-height:190px !important;
    margin:0 !important;
    padding:24px 0 0 !important;
    overflow:visible !important;
  }

  #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:82px !important;
    max-width:82px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:6px !important;
    filter:drop-shadow(0 10px 8px rgba(0,0,0,.34)) !important;
    transform:none !important;
    transform-origin:center center !important;
  }

  /* First card in the trick is always the lead card. */
  #pepper-app .play-cards-stack > .played-card-row > .played-card-item:first-child img.laydown-pile {
    width:96px !important;
    max-width:96px !important;
    filter:drop-shadow(0 12px 9px rgba(0,0,0,.38)) !important;
  }
}

/* Phones use the same horizontal reading order, scaled to fit comfortably in
   the available felt width. */
@media (max-width:767px) {
  body[data-pepper-phase="playing"] #pepper-app .play-cards-stack,
  body[data-pepper-phase="playing"] #pepper-app .play-cards-stack > .played-card-row {
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    height:150px !important;
    min-height:150px !important;
    margin:0 !important;
    overflow:visible !important;
  }

  body[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:10px !important;
    padding:20px 0 0 !important;
  }

  body[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:56px !important;
    max-width:56px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:5px !important;
    filter:drop-shadow(0 7px 6px rgba(0,0,0,.30)) !important;
    transform:none !important;
    transform-origin:center center !important;
  }

  body[data-pepper-phase="playing"] #pepper-app .play-cards-stack > .played-card-row > .played-card-item:first-child img.laydown-pile {
    width:64px !important;
    max-width:64px !important;
    filter:drop-shadow(0 9px 7px rgba(0,0,0,.34)) !important;
  }
}