/* 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;
  }

  #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;
  }
}

/* Surface Pro / tablet portrait. The earlier responsive layer stacks the main
   table regions at this width; keep the current trick itself on one horizontal
   track instead of allowing each played-card item to form a vertical row. */
@media (min-width:768px) and (max-width:991px) {
  body[data-pepper-phase="playing"] #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    display:block !important;
    width:100% !important;
    min-height:148px !important;
    height:148px !important;
    margin:0 !important;
    padding:6px 12px !important;
  }

  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:136px !important;
    min-height:136px !important;
    margin:0 !important;
    overflow:visible !important;
  }

  body[data-pepper-phase="playing"] #pepper-app .play-cards-stack > .played-card-row {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:12px !important;
    padding:4px 0 0 !important;
  }

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

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

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

  body[data-pepper-phase="playing"] #pepper-app .played-card-item:first-child .played-card-label {
    width:82px !important;
    max-width:82px !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: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;
    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:82px !important;
    max-width:82px !important;
    filter:drop-shadow(0 10px 8px rgba(0,0,0,.36)) !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;
  }
}