/*
 * Narrow-screen polish following device testing.
 *
 * This layer intentionally stays separate while responsive behavior is being
 * tested. It removes the large empty felt runway visible below the local hand,
 * gives all six cards explicit touch-friendly positions, and collapses table
 * regions that have no useful content in the current mobile phase.
 */

@media (max-width:767px) {
  /* During the auction there is no Current Contract yet. Let Players use the
     full top information card instead of leaving an empty second column. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row:first-child > .col-md-6:first-child:not(:has(.winning-bid-summary:not([hidden]))) {
    grid-template-columns:1fr !important;
  }

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

  /* Mobile roster text was too small on real phones. Keep the compact card,
     but make the names and seat labels comfortably readable. */
  body[data-pepper-game-started="true"] .player-roster__team-title {
    font-size:9px !important;
  }

  body[data-pepper-game-started="true"] .player-roster__player {
    height:24px !important;
    padding:2px 5px !important;
  }

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

  body[data-pepper-game-started="true"] .player-roster__name {
    font-size:11px !important;
    line-height:1.1 !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:8px !important;
  }

  /* The mobile table is a vertical sequence, not one tall felt canvas. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 {
    height:fit-content !important;
    min-height:0 !important;
    block-size:fit-content !important;
    grid-template-rows:auto auto auto !important;
    grid-auto-rows:auto !important;
    align-content:start !important;
    align-items:start !important;
    gap:8px !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0::before,
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0::after {
    content:none !important;
    display:none !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child,
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2,
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child {
    height:fit-content !important;
    min-height:0 !important;
    block-size:fit-content !important;
    align-self:start !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* Keep the local hand as its own felt panel. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper {
    height:fit-content !important;
    min-height:0 !important;
    block-size:fit-content !important;
    margin:0 !important;
    background:linear-gradient(145deg,rgba(12,72,50,.98),rgba(7,53,37,.98)) !important;
    border:1px solid rgba(116,167,134,.18) !important;
    box-shadow:inset 0 0 42px rgba(0,0,0,.13) !important;
    overflow:hidden !important;
  }

  /* Reset Bootstrap/flex sizing through the local-hand DOM. On narrow devices
     .pepper-hand is also a .col, and its inherited flex basis could make the
     visual hand occupy only part of the felt even though width:100% was set. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper > .row {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:fit-content !important;
    min-height:0 !important;
    block-size:fit-content !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 {
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    height:fit-content !important;
    min-height:0 !important;
    block-size:fit-content !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Use six absolute percentage slots across the entire local felt. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    position:relative !important;
    display:block !important;
    align-self:stretch !important;
    flex:0 0 auto !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    height:124px !important;
    min-height:124px !important;
    margin:0 auto !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-place-holder {
    display:none !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    position:absolute !important;
    top:12px !important;
    right:auto !important;
    bottom:auto !important;
    grid-area:auto !important;
    width:clamp(58px,16.5vw,68px) !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    transform-origin:center bottom !important;
  }

  body[data-pepper-game-started="true"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-1 {
    left:9% !important;
    z-index:11 !important;
    transform:translateX(-50%) rotate(-2deg) !important;
  }
  body[data-pepper-game-started="true"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-2 {
    left:25.4% !important;
    z-index:12 !important;
    transform:translateX(-50%) rotate(-1deg) !important;
  }
  body[data-pepper-game-started="true"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-3 {
    left:41.8% !important;
    z-index:13 !important;
    transform:translateX(-50%) !important;
  }
  body[data-pepper-game-started="true"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-4 {
    left:58.2% !important;
    z-index:14 !important;
    transform:translateX(-50%) !important;
  }
  body[data-pepper-game-started="true"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-5 {
    left:74.6% !important;
    z-index:15 !important;
    transform:translateX(-50%) rotate(1deg) !important;
  }
  body[data-pepper-game-started="true"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-6 {
    left:91% !important;
    z-index:16 !important;
    transform:translateX(-50%) rotate(2deg) !important;
  }

  /* Before card play begins the center trick station is necessarily empty.
     Do not spend vertical phone space on it. It reappears for actual play. */
  body[data-pepper-phase="bidding"] #pepper-app > div > .row.mb-4.g-0 > .col-md-2,
  body[data-pepper-phase="choose-suit"] #pepper-app > div > .row.mb-4.g-0 > .col-md-2,
  body[data-pepper-phase="partner-choice"] #pepper-app > div > .row.mb-4.g-0 > .col-md-2,
  body[data-pepper-phase="bidder-discard"] #pepper-app > div > .row.mb-4.g-0 > .col-md-2,
  body[data-pepper-phase="partner-discard"] #pepper-app > div > .row.mb-4.g-0 > .col-md-2,
  body[data-pepper-phase="opponent-decision"] #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    display:none !important;
  }

  /* During play the trick pile becomes the next compact felt station. */
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    min-height:88px !important;
    padding:8px !important;
    border:1px solid rgba(116,167,134,.18) !important;
    border-radius:12px !important;
    background:linear-gradient(145deg,rgba(12,72,50,.94),rgba(7,53,37,.94)) !important;
  }

  body[data-pepper-game-started="true"] .play-cards-stack > div {
    min-height:72px !important;
  }
}

@media (max-width:479px) {
  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    height:116px !important;
    min-height:116px !important;
  }

  body[data-pepper-game-started="true"]
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    top:10px !important;
  }
}