/*
 * Compact desktop / landscape-tablet polish (992px–1199px).
 *
 * Keep the 1024px layout dense without changing the stacked tablet/phone
 * layouts below 992px. Landing-state rules are deliberately separate from the
 * in-game header so the three start choices can determine their own height.
 */

@media (min-width: 992px) and (max-width: 1199px) {
  /* Never let the compact score column force the landing controls into a fixed
     136px row. The start choices need their natural height or they overflow on
     top of the bidding/table region below. */
  body[data-pepper-game-started="false"] #pepper-app > div > .row:first-child,
  body:not([data-pepper-game-started="true"]) #pepper-app > div > .row:first-child {
    height: auto !important;
    min-height: 0 !important;
    align-items: start !important;
  }

  body[data-pepper-game-started="false"] #pepper-app > div > .row:first-child > .col-md-6:first-child,
  body:not([data-pepper-game-started="true"]) #pepper-app > div > .row:first-child > .col-md-6:first-child {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    align-self: start !important;
  }

  body[data-pepper-game-started="false"] #pepper-app .pepper-start-options,
  body:not([data-pepper-game-started="true"]) #pepper-app .pepper-start-options {
    max-width: 100% !important;
  }

  /* The landing score cards do not need desktop-sized vertical breathing room. */
  body[data-pepper-game-started="false"] #pepper-app > div > .row:first-child > .col-md-6:last-child,
  body[data-pepper-game-started="false"] #pepper-app > div > .row:first-child > .col-md-6:last-child > .row,
  body:not([data-pepper-game-started="true"]) #pepper-app > div > .row:first-child > .col-md-6:last-child,
  body:not([data-pepper-game-started="true"]) #pepper-app > div > .row:first-child > .col-md-6:last-child > .row {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    align-self: start !important;
  }

  body[data-pepper-game-started="false"] #pepper-app .team-1-bg,
  body[data-pepper-game-started="false"] #pepper-app .team-2-bg,
  body:not([data-pepper-game-started="true"]) #pepper-app .team-1-bg,
  body:not([data-pepper-game-started="true"]) #pepper-app .team-2-bg {
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
  }

  body[data-pepper-game-started="false"] #pepper-app .team-1-bg .mock-score,
  body[data-pepper-game-started="false"] #pepper-app .team-2-bg .mock-score,
  body:not([data-pepper-game-started="true"]) #pepper-app .team-1-bg .mock-score,
  body:not([data-pepper-game-started="true"]) #pepper-app .team-2-bg .mock-score {
    grid-template-rows: 22px 1fr !important;
    padding: 7px 12px 8px !important;
  }

  body[data-pepper-game-started="false"] #pepper-app .mock-score__value,
  body:not([data-pepper-game-started="true"]) #pepper-app .mock-score__value {
    margin-bottom: 3px !important;
    font-size: 24px !important;
  }

  /* In-game roster and score cards stay aligned in one compact header row. */
  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child {
    align-items: start !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:first-child {
    display: block !important;
    min-height: 120px !important;
    height: 120px !important;
    max-height: 120px !important;
    padding: 0 !important;
    align-self: start !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:first-child .player-roster {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !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 > .col-md-6:first-child .player-roster__eyebrow {
    display: none !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:first-child .player-roster__header {
    margin-bottom: 5px !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:first-child .player-roster__title {
    font-size: 17px !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:first-child .player-roster__teams {
    gap: 7px !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:first-child .player-roster__team {
    padding: 5px !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:first-child .player-roster__team-title {
    margin-bottom: 3px !important;
    font-size: 10px !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:first-child .player-roster__team-list {
    gap: 2px !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:first-child .player-roster__player {
    height: 21px !important;
    padding: 2px 5px !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:last-child,
  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:last-child > .row {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    align-self: start !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row:first-child > .col-md-6:last-child > .row {
    align-items: stretch !important;
  }

  body[data-pepper-game-started="true"] #pepper-app .team-1-bg,
  body[data-pepper-game-started="true"] #pepper-app .team-2-bg {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }

  body[data-pepper-game-started="true"] #pepper-app .team-1-bg .mock-score,
  body[data-pepper-game-started="true"] #pepper-app .team-2-bg .mock-score {
    grid-template-rows: 24px 1fr !important;
    padding: 7px 12px 8px !important;
  }

  /* The trick station is empty before card play. Remove that reserved center
     column so the local hand can use the full available width beside chat. */
  body[data-pepper-game-started="true"]:not([data-pepper-phase="playing"])
  #pepper-app > div > .row.mb-4.g-0 {
    grid-template-columns: minmax(0, 1fr) minmax(290px, 320px) !important;
    align-items: start !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-column: 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-column: 2 !important;
  }

  /* Reduce the large empty runway between bid controls and the player's hand. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper {
    min-height: 330px !important;
    padding-bottom: 0 !important;
  }

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

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 {
    align-items: start !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child {
    align-self: start !important;
  }

  /* Center the bot setup dialog in the actual modal viewport and keep every
     action reachable at 1024px even when browser chrome reduces usable height. */
  .pepper-bot-game-modal .modal-dialog {
    display: flex !important;
    align-items: center !important;
    width: min(680px, calc(100% - 32px)) !important;
    max-width: 680px !important;
    min-height: calc(100% - 32px) !important;
    margin: 16px auto !important;
  }

  .pepper-bot-game-modal .modal-content {
    width: 100% !important;
    max-height: calc(100vh - 32px) !important;
    overflow: hidden !important;
  }

  .pepper-bot-game-modal .modal-header {
    flex: 0 0 auto !important;
    padding: 15px 20px 12px !important;
  }

  .pepper-bot-game-modal .modal-body {
    min-height: 0 !important;
    padding: 16px 20px 18px !important;
    overflow-y: auto !important;
  }

  .pepper-bot-game-modal__intro {
    margin-bottom: 12px !important;
  }

  .pepper-bot-game-modal__difficulty {
    margin-top: 12px !important;
  }

  .pepper-bot-game-modal__difficulty-option {
    min-height: 70px !important;
    padding-top: 10px !important;
    padding-bottom: 9px !important;
  }

  .pepper-bot-game-modal__teams {
    margin-top: 10px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .pepper-bot-game-modal__start {
    margin-top: 12px !important;
  }
}