/*
 * Gameplay-priority responsive layer.
 *
 * On narrow screens the dealt hand must be visible before secondary controls.
 * This keeps the cards at the top of the local-hand panel once a game starts,
 * then places bidding/sort/trade actions immediately below the cards.
 */

@media (max-width:991px) {
  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 {
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
  }

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

@media (max-width:767px) {
  /* Header: keep the brand clear of the game number and table actions. */
  .site-header__inner {
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:10px !important;
    row-gap:4px !important;
  }

  .brand {
    grid-column:1 !important;
    grid-row:1 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .site-header__actions {
    grid-column:1 !important;
    grid-row:2 !important;
    min-width:0 !important;
  }

  .mock-game-meta {
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    display:grid !important;
    grid-template-columns:auto auto !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    justify-items:end !important;
    gap:3px 8px !important;
    margin:0 !important;
  }

  #mock-game-label:not([hidden]) {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    justify-self:end !important;
    max-width:128px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:10px !important;
    line-height:1.1 !important;
  }

  .mock-game-meta__gear {
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:38px !important;
    min-height:38px !important;
    padding:4px !important;
    font-size:19px !important;
  }

  .mock-game-meta__leave {
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 10px !important;
    border-radius:9px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }

  /* Once play begins, compress the informational strip above the felt so the
     local hand appears in the initial viewport on typical phones. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child {
    gap:6px !important;
    margin-bottom:6px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child > .col-md-6:first-child {
    display:grid !important;
    grid-template-columns:minmax(0,1.35fr) minmax(132px,.85fr) !important;
    align-items:stretch !important;
    gap:6px !important;
    min-height:0 !important;
    padding:6px !important;
  }

  /* The old lobby/button row is no longer useful once the player is seated. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child > .col-md-6:first-child > .row {
    display:none !important;
  }

  body[data-pepper-game-started="true"] .player-roster {
    position:static !important;
    grid-column:1 !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:6px !important;
    overflow:hidden !important;
  }

  body[data-pepper-game-started="true"] .player-roster__header {
    margin-bottom:4px !important;
  }

  body[data-pepper-game-started="true"] .player-roster__eyebrow,
  body[data-pepper-game-started="true"] .player-roster__legend,
  body[data-pepper-game-started="true"] .player-roster__invite {
    display:none !important;
  }

  body[data-pepper-game-started="true"] .player-roster__title {
    font-size:13px !important;
  }

  body[data-pepper-game-started="true"] .player-roster__teams {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4px !important;
  }

  body[data-pepper-game-started="true"] .player-roster__team {
    padding:4px !important;
  }

  body[data-pepper-game-started="true"] .player-roster__team-title {
    margin-bottom:3px !important;
    font-size:8px !important;
  }

  body[data-pepper-game-started="true"] .player-roster__team-list {
    gap:2px !important;
  }

  body[data-pepper-game-started="true"] .player-roster__player {
    height:19px !important;
    padding:1px 3px !important;
  }

  body[data-pepper-game-started="true"] .player-roster__seat {
    width:17px !important;
    font-size:7px !important;
  }

  body[data-pepper-game-started="true"] .player-roster__name {
    font-size:8px !important;
  }

  body[data-pepper-game-started="true"] .player-roster__dealer,
  body[data-pepper-game-started="true"] .player-roster__status,
  body[data-pepper-game-started="true"] .player-roster__you,
  body[data-pepper-game-started="true"] .player-roster__turn {
    font-size:6px !important;
  }

  /* Current Contract becomes a compact peer of the roster instead of a narrow
     free-flowing text column that wraps one word per line. */
  body[data-pepper-game-started="true"] .winning-bid-summary:not([hidden]) {
    position:static !important;
    grid-column:2 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:8px 9px !important;
    border-radius:10px !important;
    overflow:hidden !important;
  }

  body[data-pepper-game-started="true"] .winning-bid-summary__eyebrow {
    margin:0 0 4px !important;
    font-size:8px !important;
    line-height:1.1 !important;
    letter-spacing:.08em !important;
  }

  body[data-pepper-game-started="true"] .winning-bid-summary__team {
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:12px !important;
    line-height:1.1 !important;
  }

  body[data-pepper-game-started="true"] .winning-bid-summary__detail {
    margin-top:4px !important;
    font-size:10px !important;
    line-height:1.25 !important;
  }

  /* Mobile score cards use only the synchronized score overlay. Hiding the
     legacy Vue rows removes the duplicated Team/Score/Tricks text. */
  body[data-pepper-game-started="true"] .team-1-bg,
  body[data-pepper-game-started="true"] .team-2-bg {
    position:relative !important;
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  body[data-pepper-game-started="true"] .team-1-bg > .row,
  body[data-pepper-game-started="true"] .team-2-bg > .row {
    display:none !important;
  }

  body[data-pepper-game-started="true"] .team-1-bg .mock-score,
  body[data-pepper-game-started="true"] .team-2-bg .mock-score {
    position:absolute !important;
    inset:0 !important;
    display:grid !important;
    grid-template-rows:24px 1fr !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:5px 8px 7px !important;
    visibility:visible !important;
  }

  body[data-pepper-game-started="true"] .mock-score__team {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
  }

  body[data-pepper-game-started="true"] .mock-score__stats {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:center !important;
    min-width:0 !important;
  }

  body[data-pepper-game-started="true"] .mock-score__stat {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:0 !important;
    height:34px !important;
    font-size:8px !important;
    line-height:1 !important;
    text-align:center !important;
  }

  body[data-pepper-game-started="true"] .mock-score__stat + .mock-score__stat {
    border-left:1px solid rgba(255,255,255,.18) !important;
  }

  body[data-pepper-game-started="true"] .mock-score__value {
    display:block !important;
    margin-top:2px !important;
    font-size:18px !important;
    line-height:1 !important;
    font-weight:800 !important;
  }

  /* Keep the cards and their immediate actions together. The previous minimum
     height left a large empty felt area between the dealt cards and Sort. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper {
    height:auto !important;
    min-height:0 !important;
    padding-bottom:6px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper > .row {
    height:auto !important;
    min-height:0 !important;
    margin: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 {
    position:static !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin: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 {
    position:static !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:4px 7px 6px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    flex:0 0 178px !important;
    width:100% !important;
    height:178px !important;
    min-height:178px !important;
    margin:0 !important;
    padding-top:22px !important;
  }
}

@media (max-width:479px) {
  .brand__badge {
    padding:4px 6px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child > .col-md-6:first-child {
    grid-template-columns:minmax(0,1.45fr) minmax(120px,.8fr) !important;
  }

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