/*
 * Card-seat visibility correction for the approved table layout.
 * The opponent PepperHand control row also contains the actual .pepper-hand.
 * Hiding that outer row hid all opponent cards. Keep the card row alive and
 * hide only the bidding/action controls for non-owner seats.
 *
 * No cards are created here. These rules only position cards that the Vue game
 * has actually dealt, so a fresh table remains empty until New Game deals.
 */
@media (min-width:1200px) {
  /* Local hand: keep the six real cards above the felt surface. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:45 !important;
    left:50% !important;
    bottom:20px !important;
    width:420px !important;
    height:122px !important;
    min-height:122px !important;
    transform:translateX(-50%) !important;
    overflow:visible !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand img:not(.card-place-holder) {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:46 !important;
  }

  /* Do not label an undealt hand. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .pepper-hand:not(:has(img.card-1))::after {
    content:none !important;
  }

  /* Opponent row is a real Vue row containing exactly the other three seats. */
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) {
    display:block !important;
    visibility:visible !important;
    position:absolute !important;
    z-index:35 !important;
    left:0 !important;
    top:162px !important;
    width:calc(100% - 378px) !important;
    height:520px !important;
    margin:0 !important;
    padding:0 !important;
    pointer-events:none !important;
    overflow:visible !important;
  }

  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"] {
    display:block !important;
    visibility:visible !important;
    position:absolute !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  /* IMPORTANT: the outer .row contains both controls and cards. Keep it visible. */
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .pepper-hand-wrapper,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .pepper-hand-wrapper > .row,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .pepper-hand-wrapper > .row > .col-md-12,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .pepper-hand-wrapper > .row > .col-md-12 > .row {
    display:block !important;
    visibility:visible !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    transform:none !important;
  }

  /* Hide only opponent bid/action UI; the .pepper-hand sibling remains visible. */
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .pepper-hand-wrapper > .row > .col-md-12 > .row > .col.col-12.mt-0,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .suit-picker,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .card-place-holder {
    display:none !important;
  }

  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .pepper-hand {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:36 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    overflow:visible !important;
  }

  #pepper-app > div > .row.g-0:has(> [id^="el_"]) .pepper-hand img:not(.card-place-holder) {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    z-index:37 !important;
    width:72px !important;
    max-width:72px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    border-radius:5px !important;
    filter:drop-shadow(0 4px 4px rgba(0,0,0,.30)) !important;
  }

  /* First rendered opponent: top center, six overlapping backs. */
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) {
    left:50% !important;
    top:12px !important;
    transform:translateX(-50%) !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .pepper-hand {
    width:292px !important;
    height:96px !important;
    min-height:96px !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .pepper-hand img:not(.card-place-holder) { top:0 !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-1 { left:0 !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-2 { left:44px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-3 { left:88px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-4 { left:132px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-5 { left:176px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(1) .card-6 { left:220px !important; }

  /* Second rendered opponent: left edge, six-card vertical stack. */
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) {
    left:30px !important;
    top:112px !important;
    transform:none !important;
  }

  /* Third rendered opponent: right edge. */
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) {
    right:30px !important;
    left:auto !important;
    top:112px !important;
    transform:none !important;
  }

  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .pepper-hand,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .pepper-hand {
    width:72px !important;
    height:282px !important;
    min-height:282px !important;
  }

  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .pepper-hand img:not(.card-place-holder),
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .pepper-hand img:not(.card-place-holder) {
    left:0 !important;
  }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-1,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-1 { top:0 !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-2,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-2 { top:42px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-3,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-3 { top:84px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-4,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-4 { top:126px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-5,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-5 { top:168px !important; }
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(2) .card-6,
  #pepper-app > div > .row.g-0:has(> [id^="el_"]) > [id^="el_"]:nth-child(3) .card-6 { top:210px !important; }
}