/* Pagat main Iowa Pepper rule UI. */

.pagat-rules-panel[hidden] {
  display:none !important;
}

/* The legacy PepperHand component includes a yellow disabled "Bidding"
   status button for an opponent turn. The redesign already communicates this
   through Current Phase and the roster turn marker, so the old overlay is
   redundant and can cover the mobile bid controls. Hide its container at all
   breakpoints. */
.pepper-hand-wrapper [style*="right: 0.75em"]:has(> .btn.btn-warning[disabled]) {
  display:none !important;
}

/* Keep the ALPHA badge and player identity pill visually separate. */
.site-header__inner {
  gap:14px !important;
}

@media (min-width:1200px) {
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group {
    grid-template-columns:1.1fr repeat(6,minmax(0,1fr)) 1.35fr 1.35fr !important;
  }

  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-8 > .btn-group > .pagat-pepper-bid {
    font-size:14px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }

  /* Exchange Card is longer than the legacy Trade label. Give the action
     controls enough width to keep their text inside the button. */
  #pepper-app > div > .row.mb-4.g-0 > .col-md-5:first-child .col-md-4.text-end .btn-group > .btn {
    min-width:132px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    white-space:nowrap !important;
  }

  .pagat-rules-panel {
    position:absolute;
    z-index:94;
    inset:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto 1fr;
    column-gap:24px;
    align-items:center;
    padding:20px 28px;
    border-radius:16px;
    background:linear-gradient(145deg,#111d27,#0d1821);
    color:#eef3f7;
  }

  .pagat-rules-panel__eyebrow {
    grid-column:1;
    color:#8fa0ae;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .pagat-rules-panel__title {
    grid-column:1;
    margin-top:3px;
    font-size:22px;
    line-height:1.1;
    font-weight:800;
  }

  .pagat-rules-panel__copy {
    grid-column:1;
    max-width:720px;
    margin-top:8px;
    color:#a9b6c3;
    font-size:14px;
    line-height:1.35;
  }

  .pagat-rules-panel__actions {
    grid-column:2;
    grid-row:1 / 4;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .pagat-rules-panel__actions .btn {
    min-width:150px !important;
    min-height:48px !important;
    padding:10px 15px !important;
    font-size:14px !important;
  }
}

.pepper-hand-wrapper.sitting-out {
  opacity:.62;
}

.pepper-hand-wrapper.sitting-out::after {
  content:'SITTING OUT';
  position:absolute;
  z-index:92;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:8px 12px;
  border:1px solid rgba(230,184,75,.55);
  border-radius:999px;
  background:rgba(8,17,25,.88);
  color:#f1c968;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
  white-space:nowrap;
  pointer-events:none;
}

.player-roster__player.is-sitting-out {
  opacity:.72;
}

.player-roster__status {
  flex:0 0 auto;
  margin-left:auto;
  padding-left:6px;
  color:#9aa8b3;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.player-roster__dealer {
  flex:0 0 auto;
  margin-left:5px;
  color:#8fa0ad;
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

html[data-pepper-theme="light"] .pagat-rules-panel {
  background:linear-gradient(145deg,#ffffff,#f5f8f6);
  color:#203129;
}

html[data-pepper-theme="light"] .pagat-rules-panel__eyebrow,
html[data-pepper-theme="light"] .pagat-rules-panel__copy {
  color:#6b7b72;
}

html[data-pepper-theme="light"] .pepper-hand-wrapper.sitting-out::after {
  background:rgba(255,255,255,.94);
  border-color:rgba(155,108,22,.48);
  color:#8a6116;
}

@media (max-width:1199px) {
  .pagat-rules-panel {
    margin:12px 0;
    padding:14px;
    border:1px solid var(--border-strong);
    border-radius:12px;
    background:var(--surface);
  }

  .pagat-rules-panel__eyebrow {
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .pagat-rules-panel__title {
    margin-top:4px;
    font-size:18px;
    font-weight:800;
  }

  .pagat-rules-panel__copy {
    margin-top:6px;
    color:var(--muted);
    font-size:13px;
  }

  .pagat-rules-panel__actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
  }
}