/*
 * Mid-tablet bridge (840-900px).
 *
 * The general tablet rules stack the entire summary at <=991px, while the
 * compact summary starts at 901px. That leaves the high-800px/900px window
 * with a large empty roster panel and full-width score row. Keep bidding dense
 * here without squeezing narrower tablets.
 */
@media (min-width:840px) and (max-width:900px) {
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) {
    display:grid !important;
    grid-template-columns:340px minmax(0,1fr) !important;
    gap:12px !important;
    width:100% !important;
    min-height:120px !important;
    margin:0 0 14px !important;
    align-items:stretch !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) > .col-md-6 {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* While bidding there is no contract yet. Use the left side only for the
     roster and give the remaining width to the two score cards. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:not(:has(.winning-bid-summary:not([hidden]))) > .col-md-6:first-child {
    display:block !important;
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:not(:has(.winning-bid-summary:not([hidden]))) .player-roster {
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
    margin:0 !important;
    padding:8px 10px !important;
    overflow:hidden !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .player-roster__eyebrow {
    display:none !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .player-roster__header {
    margin-bottom:5px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .player-roster__title {
    font-size:17px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .player-roster__teams {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .player-roster__team {
    min-width:0 !important;
    padding:5px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .player-roster__team-title {
    margin-bottom:3px !important;
    font-size:10px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .player-roster__team-list {
    gap:2px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .player-roster__player {
    height:21px !important;
    min-width:0 !important;
    padding:2px 5px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) > .col-md-6:last-child,
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) > .col-md-6:last-child > .row {
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) > .col-md-6:last-child > .row {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    margin:0 !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .team-1-bg,
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .team-2-bg {
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:13px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .team-1-bg > .row,
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .team-2-bg > .row {
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .mock-score {
    visibility:visible !important;
    position:absolute !important;
    inset:0 !important;
    z-index:5 !important;
    display:grid !important;
    grid-template-rows:26px 1fr !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:8px 10px 10px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.player-roster:not([hidden])) .mock-score__value {
    margin-top:4px !important;
    font-size:26px !important;
  }

  /* Once the contract exists, keep Players + Contract together on one row and
     move the score pair directly beneath them. This avoids crushing four cards
     into a single 850-ish pixel row. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) {
    grid-template-columns:1fr !important;
    grid-template-rows:120px 108px !important;
    min-height:240px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) > .col-md-6:first-child {
    display:grid !important;
    grid-template-columns:minmax(0,1.3fr) minmax(210px,.85fr) !important;
    gap:10px !important;
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) > .col-md-6:first-child > .row {
    display:none !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) .player-roster {
    position:relative !important;
    inset:auto !important;
    grid-column:1 !important;
    width:100% !important;
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
    margin:0 !important;
    padding:8px 10px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) .winning-bid-summary {
    position:relative !important;
    inset:auto !important;
    grid-column:2 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    width:100% !important;
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
    margin:0 !important;
    padding:14px 12px !important;
    box-sizing:border-box !important;
    border:1px solid #2b3d4d !important;
    border-radius:13px !important;
    background:linear-gradient(145deg,#111f2b,#0c1821) !important;
    box-shadow:0 16px 36px rgba(0,0,0,.18) !important;
    overflow:hidden !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) .winning-bid-summary__eyebrow {
    margin:0 0 6px !important;
    font-size:9px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) .winning-bid-summary__team {
    font-size:13px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) .winning-bid-summary__detail {
    margin:6px 0 0 !important;
    font-size:11px !important;
    line-height:1.15 !important;
    white-space:normal !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) > .col-md-6:last-child,
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) > .col-md-6:last-child > .row,
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) .team-1-bg,
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child:has(.winning-bid-summary:not([hidden])) .team-2-bg {
    height:108px !important;
    min-height:108px !important;
    max-height:108px !important;
  }

  /* Bidding/choice phases do not need the empty trick station or the 460px
     hand reservation from the generic tablet layout. */
  body[data-pepper-game-started="true"]:not([data-pepper-phase="playing"])
  #pepper-app > div > .row.mb-4.g-0 {
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

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

  body[data-pepper-game-started="true"]:not([data-pepper-phase="playing"])
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child {
    grid-row:1 !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;
  }

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

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