/*
 * Responsive layout layer for the ALPHA redesign.
 *
 * Large desktop remains owned by game-table-layout.css. This file tightens
 * laptop widths and then takes over below 1200px so tablet and phone layouts
 * are intentional rather than scaled-down desktop tables. Keep this separate
 * while the responsive pass is being tested.
 */

/* Small desktop / laptop: preserve the desktop composition but reduce the
   fixed-width pieces that become cramped between 1200px and 1439px. */
@media (min-width:1200px) and (max-width:1439px) {
  .site-header__inner,
  .game-shell {
    width:calc(100% - 28px) !important;
    max-width:none !important;
  }

  #pepper-app > div {
    grid-template-columns:minmax(0,1fr) 320px !important;
    column-gap:18px !important;
  }

  #pepper-app > div > .row:first-child {
    grid-template-columns:320px minmax(0,1fr) !important;
    gap:18px !important;
  }

  #pepper-app > div > .row:first-child > .col-md-6:last-child {
    padding-left:24px !important;
  }

  #pepper-app > div > .row:first-child > .col-md-6:last-child > .row {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  .team-1-bg,
  .team-2-bg {
    padding-left:20px !important;
    padding-right:20px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 {
    grid-template-columns:minmax(0,1fr) 320px !important;
    gap:18px !important;
    height:500px !important;
    min-height:500px !important;
  }

  #pepper-app > div > .row.mb-4.g-0::before {
    width:calc(100% - 338px) !important;
    height:500px !important;
    font-size:44px !important;
  }

  #pepper-app > div > .row.mb-4.g-0::after {
    left:calc((100% - 338px)/2 - 18px) !important;
    top:180px !important;
    font-size:40px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child {
    height:500px !important;
    min-height:500px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    width:398px !important;
    bottom:16px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    width:82px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-1 { left:0 !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-2 { left:63px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-3 { left:126px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-4 { left:189px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-5 { left:252px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand .card-6 { left:315px !important; }

  #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 {
    top:524px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child {
    width:320px !important;
    height:500px !important;
  }

  #pepper-app .card {
    height:500px !important;
    min-height:500px !important;
  }

  #chat_output {
    height:420px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    top:524px !important;
  }

  #pepper-app > div > .row.g-0:has(> [id^="el_"]) {
    width:calc(100% - 338px) !important;
    height:500px !important;
  }
}

@media (max-width:1199px) {
  html,
  body {
    max-width:100%;
    overflow-x:hidden;
  }

  .site-header {
    height:auto !important;
  }

  .site-header__inner,
  .game-shell {
    width:calc(100% - 24px) !important;
    max-width:1120px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .site-header__inner {
    min-height:68px !important;
    height:auto !important;
    gap:14px !important;
    padding:10px 0 !important;
  }

  .brand,
  .site-header__actions,
  .mock-game-meta {
    min-width:0;
  }

  .game-shell {
    padding:16px 0 32px !important;
  }

  /* Lobby / roster and score cards. */
  #pepper-app > div > .row:first-child {
    display:grid !important;
    grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr) !important;
    gap:14px !important;
    width:100% !important;
    margin:0 0 14px !important;
  }

  #pepper-app > div > .row:first-child > .col-md-6 {
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  #pepper-app > div > .row:first-child > .col-md-6:first-child {
    min-height:124px !important;
    padding:14px !important;
  }

  #pepper-app > div > .row:first-child > .col-md-6:last-child > .row {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
  }

  .team-1-bg,
  .team-2-bg {
    width:100% !important;
    min-width:0 !important;
    min-height:124px !important;
    padding:14px 16px !important;
  }

  /* The game row becomes an explicit responsive grid. */
  #pepper-app > div > .row.mb-4.g-0 {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 112px minmax(270px,320px) !important;
    gap:14px !important;
    width:100% !important;
    margin:0 0 14px !important;
    padding:14px !important;
    align-items:stretch !important;
    overflow:visible !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child {
    grid-column:1 !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    grid-column:2 !important;
    display:grid !important;
    place-items:center !important;
    min-height:220px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child {
    grid-column:3 !important;
    position:relative !important;
  }

  /* Local hand: give the cards room, then keep actions touch friendly. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper {
    min-height:430px !important;
    padding-bottom:8px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    width:min(100%,500px) !important;
    min-height:270px !important;
    padding-top:70px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    max-width:120px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group {
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    padding:12px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group > .btn {
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    margin:0 !important;
    padding:7px 6px !important;
    white-space:normal !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end {
    padding:0 12px 12px !important;
    text-align:left !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end .btn,
  .pagat-rules-panel__actions .btn {
    min-height:44px !important;
  }

  .pagat-rules-panel {
    box-sizing:border-box !important;
  }

  .pagat-rules-panel__actions {
    align-items:stretch !important;
  }

  .suit-picker {
    right:10px !important;
    top:52px !important;
  }

  /* Chat stays readable, but does not dictate the height of the felt. */
  #pepper-app .card {
    height:auto !important;
    min-height:360px !important;
  }

  #chat_output {
    height:auto !important;
    min-height:280px !important;
    max-height:360px !important;
    overflow-y:auto !important;
  }

  /* Current phase remains available below the desktop breakpoint. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-height:116px !important;
    margin-top:12px !important;
    padding:16px 18px !important;
    border:1px solid var(--room-line,#2b3d4d) !important;
    border-radius:14px !important;
    background:linear-gradient(145deg,#111d27,#0d1821) !important;
    color:#b5c0ca !important;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
    font-size:14px !important;
    line-height:1.45 !important;
  }

  body[data-pepper-game-started="false"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after,
  body[data-pepper-phase="getting-started"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ♠  Getting Started\A Create a private game or find a random match.' !important;
  }
  body[data-pepper-phase="bidding"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ⚒  Bidding\A One round: 1–6, Little Pepper, or Big Pepper.' !important;
  }
  body[data-pepper-phase="choose-suit"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ♠  Choose Trump\A High bidder names a suit or No Trump.' !important;
  }
  body[data-pepper-phase="partner-choice"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ⇄  Bidder Choice\A Exchange one card or play with partner.' !important;
  }
  body[data-pepper-phase="bidder-discard"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ⇄  Card Exchange\A Bidder discards exactly one card.' !important;
  }
  body[data-pepper-phase="partner-discard"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ⇄  Card Exchange\A Partner gives one card to the bidder, then sits out.' !important;
  }
  body[data-pepper-phase="opponent-decision"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ?  Defenders Decide\A Opponents choose whether to play or surrender.' !important;
  }
  body[data-pepper-phase="playing"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ♠  Playing\A High bidder leads. Follow suit when possible.' !important;
  }
  body[data-pepper-phase="hand-complete"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ✓  Hand Complete\A Scoring complete. Preparing the next deal.' !important;
  }
  body[data-pepper-phase="game-complete"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    content:'Current Phase\A\A ★  Game Complete\A Highest score at 42 or more wins.' !important;
  }

  /* Other players remain a compact strip instead of three full-height panels. */
  #pepper-app > div > .row.g-0:last-child {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    margin:0 !important;
  }

  #pepper-app > div > .row.g-0:last-child > .col-md-4 {
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  #pepper-app > div > .row.g-0:last-child .pepper-hand-wrapper {
    min-height:210px !important;
  }

  #pepper-app > div > .row.g-0:last-child .pepper-hand {
    min-height:180px !important;
    padding-top:52px !important;
    transform:scale(.82) !important;
    transform-origin:center bottom !important;
  }

  .modal-dialog {
    max-width:min(680px,calc(100% - 24px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Tablet portrait: stack the primary table regions in play order. */
@media (min-width:768px) and (max-width:991px) {
  .site-header__inner,
  .game-shell {
    max-width:900px !important;
  }

  #pepper-app > div > .row:first-child {
    grid-template-columns:1fr !important;
  }

  #pepper-app > div > .row:first-child > .col-md-6:first-child {
    min-height:0 !important;
  }

  #pepper-app > div > .row.mb-4.g-0 {
    grid-template-columns:1fr !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child {
    grid-column:1 !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child { grid-row:1 !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    grid-row:2 !important;
    min-height:130px !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child { grid-row:3 !important; }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper {
    min-height:460px !important;
  }

  #pepper-app .card {
    min-height:320px !important;
  }

  #chat_output {
    min-height:240px !important;
    max-height:320px !important;
  }
}

/* Phones and narrow tablets: prioritize the local hand and touch controls. */
@media (max-width:767px) {
  .site-header__inner,
  .game-shell {
    width:calc(100% - 16px) !important;
  }

  .site-header__inner {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:8px 10px !important;
    min-height:62px !important;
    padding:8px 0 !important;
  }

  .brand {
    grid-column:1 !important;
    min-width:0 !important;
  }

  .brand__mark::after {
    font-size:24px !important;
  }

  .brand__wordmark {
    font-size:18px !important;
  }

  .brand__badge {
    padding:5px 7px !important;
    font-size:8px !important;
  }

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

  .header-player {
    max-width:100% !important;
  }

  .mock-game-meta {
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    gap:8px !important;
  }

  .mock-game-meta__leave {
    min-width:0 !important;
    padding:9px 11px !important;
    font-size:12px !important;
  }

  .mock-game-meta__gear {
    min-width:44px !important;
    min-height:44px !important;
  }

  .game-shell {
    padding-top:10px !important;
  }

  #pepper-app > div > .row:first-child {
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-bottom:10px !important;
  }

  #pepper-app > div > .row:first-child > .col-md-6:first-child {
    min-height:0 !important;
    padding:10px !important;
  }

  #pepper-app > div > .row:first-child > .col-md-6:last-child > .row {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .team-1-bg,
  .team-2-bg {
    min-height:96px !important;
    padding:10px 12px !important;
    border-radius:11px !important;
  }

  .team-1-bg h3,
  .team-2-bg h3 {
    margin-bottom:4px !important;
    font-size:14px !important;
    line-height:1.3 !important;
  }

  .team-1-bg h4,
  .team-2-bg h4 {
    font-size:11px !important;
  }

  .player-roster__header {
    margin-bottom:9px !important;
  }

  .player-roster__title {
    font-size:17px !important;
  }

  .player-roster__teams {
    gap:7px !important;
  }

  .player-roster__team {
    padding:7px !important;
  }

  .player-roster__player {
    height:24px !important;
    padding:2px 4px !important;
  }

  .player-roster__name {
    font-size:10px !important;
  }

  .player-roster__seat,
  .player-roster__dealer,
  .player-roster__status,
  .player-roster__you,
  .player-roster__turn {
    font-size:8px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 {
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:8px !important;
    margin-bottom:10px !important;
    border-radius:14px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2,
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child {
    grid-column:1 !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child { grid-row:1 !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-2 {
    grid-row:2 !important;
    min-height:104px !important;
  }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child { grid-row:3 !important; }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper {
    min-height:430px !important;
    border-radius:12px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    width:100% !important;
    min-height:235px !important;
    padding-top:58px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    width:31% !important;
    max-width:104px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-1 { margin-left:-118px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-2 { margin-left:-74px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-3 { margin-left:-25px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-4 { margin-left:25px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-5 { margin-left:74px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-6 { margin-left:118px !important; }

  /* Trading uses smaller offsets than the legacy mobile fan so cards remain
     selectable without creating horizontal page overflow. */
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-1 { transform:translate(-118px,8px) rotate(-9deg) !important; }
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-2 { transform:translate(-70px,1px) rotate(-5deg) !important; }
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-3 { transform:translate(-23px,-3px) rotate(-2deg) !important; }
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-4 { transform:translate(23px,-3px) rotate(2deg) !important; }
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-5 { transform:translate(70px,1px) rotate(5deg) !important; }
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-6 { transform:translate(118px,8px) rotate(9deg) !important; }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:9px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group > .btn {
    min-height:46px !important;
    font-size:14px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    padding:0 9px 10px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end .btn {
    flex:1 1 120px !important;
    min-width:0 !important;
    min-height:46px !important;
  }

  .pagat-rules-panel {
    padding:12px !important;
  }

  .pagat-rules-panel__actions {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .pagat-rules-panel__actions .btn {
    width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
  }

  .suit-picker {
    top:48px !important;
    right:7px !important;
  }

  .suit-picker .btn {
    min-height:36px !important;
    font-size:10px !important;
  }

  #pepper-app .card {
    min-height:300px !important;
    border-radius:12px !important;
  }

  #chat_output {
    min-height:220px !important;
    max-height:300px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
    min-height:104px !important;
    margin-top:8px !important;
    padding:13px 14px !important;
    font-size:13px !important;
  }

  /* Three compact opponent stations stay visible as a single strip. */
  #pepper-app > div > .row.g-0:last-child {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  #pepper-app > div > .row.g-0:last-child .pepper-hand-wrapper {
    min-height:142px !important;
    border-radius:10px !important;
    overflow:hidden !important;
  }

  #pepper-app > div > .row.g-0:last-child .player-name {
    top:6px !important;
    left:6px !important;
    max-width:calc(100% - 12px) !important;
    padding:4px 6px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:9px !important;
  }

  #pepper-app > div > .row.g-0:last-child .pepper-hand {
    position:relative !important;
    width:100% !important;
    min-height:128px !important;
    padding-top:36px !important;
    transform:none !important;
  }

  #pepper-app > div > .row.g-0:last-child .pepper-hand img:not(.card-place-holder) {
    width:54px !important;
    max-width:46% !important;
  }

  #pepper-app > div > .row.g-0:last-child .card-1 { margin-left:-40px !important; margin-bottom:4px !important; }
  #pepper-app > div > .row.g-0:last-child .card-2 { margin-left:-25px !important; margin-bottom:10px !important; }
  #pepper-app > div > .row.g-0:last-child .card-3 { margin-left:-9px !important; margin-bottom:13px !important; }
  #pepper-app > div > .row.g-0:last-child .card-4 { margin-left:9px !important; margin-bottom:13px !important; }
  #pepper-app > div > .row.g-0:last-child .card-5 { margin-left:25px !important; margin-bottom:10px !important; }
  #pepper-app > div > .row.g-0:last-child .card-6 { margin-left:40px !important; margin-bottom:4px !important; }

  .pepper-matchmaking-actions,
  .pepper-invite-row__controls {
    flex-wrap:wrap !important;
  }

  .settings-menu {
    max-width:calc(100vw - 16px) !important;
  }
}

/* Small phones: keep the six-card hand visible at 320px without page scroll. */
@media (max-width:479px) {
  .brand {
    gap:6px !important;
  }

  .brand__wordmark {
    font-size:16px !important;
  }

  .header-player__label {
    display:none !important;
  }

  #pepper-app > div > .row:first-child > .col-md-6:last-child > .row {
    gap:6px !important;
  }

  .team-1-bg,
  .team-2-bg {
    min-height:88px !important;
    padding:9px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand-wrapper {
    min-height:400px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    min-height:215px !important;
    padding-top:52px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    width:34% !important;
    max-width:88px !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-1 { margin-left:-96px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-2 { margin-left:-60px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-3 { margin-left:-20px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-4 { margin-left:20px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-5 { margin-left:60px !important; }
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .card-6 { margin-left:96px !important; }

  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-1 { transform:translate(-94px,6px) rotate(-8deg) !important; }
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-2 { transform:translate(-56px,1px) rotate(-5deg) !important; }
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-3 { transform:translate(-19px,-2px) rotate(-2deg) !important; }
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-4 { transform:translate(19px,-2px) rotate(2deg) !important; }
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-5 { transform:translate(56px,1px) rotate(5deg) !important; }
  #pepper-app .pepper-hand-wrapper.trading-cards .pepper-hand .card-6 { transform:translate(94px,6px) rotate(8deg) !important; }

  .player-roster__legend,
  .player-roster__dealer {
    display:none !important;
  }

  .player-roster__teams {
    grid-template-columns:1fr !important;
  }

  #pepper-app > div > .row.g-0:last-child .pepper-hand img:not(.card-place-holder) {
    width:46px !important;
  }

  #pepper-app > div > .row.g-0:last-child .card-1 { margin-left:-34px !important; }
  #pepper-app > div > .row.g-0:last-child .card-2 { margin-left:-21px !important; }
  #pepper-app > div > .row.g-0:last-child .card-3 { margin-left:-7px !important; }
  #pepper-app > div > .row.g-0:last-child .card-4 { margin-left:7px !important; }
  #pepper-app > div > .row.g-0:last-child .card-5 { margin-left:21px !important; }
  #pepper-app > div > .row.g-0:last-child .card-6 { margin-left:34px !important; }

  .pepper-matchmaking-actions {
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .pepper-matchmaking-actions .btn {
    width:100% !important;
    min-height:46px !important;
  }
}

html[data-pepper-theme="light"] #pepper-app > div > .row.mb-4.g-0 > .col-md-5:last-child::after {
  background:linear-gradient(145deg,#ffffff,#f5f8f6) !important;
  border-color:#c9d4cd !important;
  color:#526158 !important;
}