/* Keyboard shortcut toast + F/C/R badges — keep the shortcuts, drop the hint. */
#key-hint,
.act-key {
  display: none !important;
}

html.pc-deal-hide-own #s-game .seat.me .seat-holecards,
html.pc-deal-hide-own #s-game .seat.me .seat-holecards .pk,
html.pc-deal-hide-own #g-myseat-cards,
html.pc-deal-hide-own #g-myseat-cards .pk {
  visibility: hidden !important;
  opacity: 0 !important;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  border-color: rgba(160, 172, 196, 0.5) !important;
}

#s-game .raise-amt-field:focus {
  border-color: var(--btn-raise-bg, #4caf50) !important;
}

#pc-table-tools,
#pc-sitout-btn {
  display: none !important;
}

/* End of hand: the official bar swaps All-In for a small "Show". While the
   window is open (.pc-can-show from pc-mobile-table.js) the inert
   Fold/Call/Raise row gives way and Show becomes the single big action. */
#s-game .my-zone.pc-can-show .act-buttons-row {
  display: none !important;
}

#s-game .my-zone.pc-can-show .mid-row {
  flex-wrap: wrap;
}

#s-game .my-zone.pc-can-show .mid-row .btn-action.btn-show {
  order: 99;
  flex: 1 1 100% !important;
  min-height: calc(54px * var(--bar-k, 1) - 10px) !important;
  height: auto !important;
  margin-top: var(--sp-2, 6px);
  font-size: calc(0.95rem * var(--bar-kf, 1)) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  color: #1c1a10 !important;
  background: linear-gradient(180deg, #f6e27a 0%, #d4b520 100%) !important;
  border: 1px solid #f6e27a !important;
  box-shadow: 0 0 0 2px rgba(242, 220, 77, 0.25), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  text-shadow: none !important;
}

#s-game .my-zone.pc-can-show .mid-row .btn-action.btn-show:hover {
  filter: brightness(1.06);
}

/* Header toggle for the detached hand-strength meter. */
#pc-assist-btn.pc-on {
  color: var(--gold-hi, #f2dc4d) !important;
}

/* Lobby empty state: a real call to action instead of a bare sentence. */
#g-list .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 160px;
}

#pc-empty-cta {
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 700;
}

/* Turn clock: under the stack, in the name/money column.
   Official QML centers the bar on the seat (over the name).
   A static extra row on .seat-plate grows the self-box into the board.
   .seat-info is already a column (name → money) on both layouts. */
html[data-seat-struct="qml"] .seat-timer-badge,
#s-game .seat-timer-badge {
  display: none !important;
}

html[data-seat-struct="qml"] .seat-narrow .seat-info {
  flex-wrap: wrap;
}

html[data-seat-struct="qml"] .seat-info > .seat-timeout-bar,
#s-game .seat-info > .seat-timeout-bar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 56px;
  max-width: 100%;
  height: 7px;
  margin: 3px auto 0 !important;
  flex: 0 0 auto;
  z-index: 2;
}

html[data-seat-struct="qml"] .seat-narrow .seat-info > .seat-timeout-bar {
  flex: 1 0 100%;
}

html[data-seat-struct="qml"] .seat.me .seat-self-strip .seat-timeout-bar,
html[data-seat-struct="qml"] .seat-avatar .seat-timeout-bar,
html[data-seat-struct="qml"] .seat-plate > .seat-timeout-bar,
html[data-seat-struct="qml"] .seat-open-strip .seat-timeout-bar,
#s-game .seat.me .seat-self-strip .seat-timeout-bar {
  display: none !important;
}

html[data-seat-struct="qml"] .seat.me .seat-self-strip .seat-action-badge,
#s-game .seat.me .seat-action-badge,
html[data-seat-struct="qml"] .seat-action-badge {
  font-weight: 800;
  color: #fff !important;
  opacity: 1 !important;
}

/* Mobile table chrome. Desktop keeps official seat coordinates. */

@media (max-width: 900px) {
  #s-game {
    height: 100svh !important;
    max-height: 100svh !important;
  }

  #s-game #g-zoom-ctrl {
    display: none !important;
  }

  /* Touch targets: 40px keeps the table name visible next to the icons. */
  #s-game .header .btn-icon,
  #s-game .header .btn-sm.btn-icon {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
  }

  #s-game .header .btn-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  #s-game .g-felt-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }

  #s-game .player-bar,
  body.adv-hide-pbar #s-game .player-bar {
    display: none !important;
  }

  /* Action bar: the official dark, bottom-fixed panel stays; only the
     buttons grow to thumb size. */
  #s-game .my-zone .action-grid {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #s-game .my-zone .act-buttons-row .btn-action {
    min-height: 50px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  #s-game .my-zone .mid-row .btn-pct,
  #s-game .my-zone .mid-row .btn-allin,
  #s-game .my-zone .bet-row .raise-amt-field,
  #s-game .my-zone .mid-row .mode-sel-wrap,
  #s-game .my-zone .mid-row .mode-sel-wrap select {
    min-height: 36px !important;
    height: 36px !important;
  }

  #s-game .dealer-chip,
  #s-game .blind-chip {
    animation: none !important;
    filter: none !important;
  }

  #s-game .my-zone.pc-can-show .mid-row .btn-action.btn-show {
    min-height: 50px !important;
    font-size: 16px !important;
  }

  /* Strength strip on the phone: segments only, no dock/resize chrome. */
  #g-assist-panel .gip-assist-dock-mini,
  #g-assist-panel .win-rsz {
    display: none !important;
  }

  html[data-seat-struct="qml"] #s-game .seat-info,
  html[data-seat-struct="qml"] #s-game .seat-narrow .seat-info,
  #s-game .seat-info {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1px !important;
  }

  html[data-seat-struct="qml"] #s-game .seat-info-row2 {
    justify-content: center;
    width: 100%;
  }

  html[data-seat-struct="qml"] #s-game .seat-name,
  html[data-seat-struct="qml"] #s-game .seat-narrow .seat-name,
  html[data-seat-struct="qml"] #s-game .seat:not(.me) .seat-name,
  #s-game .seat-name {
    max-width: 100% !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    word-break: break-word;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    letter-spacing: 0;
  }

  html[data-seat-struct="qml"] #s-game .seat-money,
  html[data-seat-struct="qml"] #s-game .seat-narrow .seat-money,
  html[data-seat-struct="qml"] #s-game .seat-info-row2 .seat-money,
  #s-game .seat-money {
    text-align: center !important;
    margin-left: 0 !important;
    width: 100%;
  }

  /* WINNER / open-card badges on the highest seat go under the box so they
     stay on the felt instead of sliding under the header + pot strip. */
  html[data-seat-struct="qml"] #s-game .seat.pc-top-seat .seat-winner-badge,
  html[data-seat-struct="qml"] #s-game .seat.winner-below .seat-winner-badge,
  html[data-seat-struct="qml"] #s-game .seat.pc-top-seat .seat-holecards > .seat-winner-badge {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: auto !important;
    top: calc(100% + 4px) !important;
    z-index: 40;
  }

  html[data-seat-struct="qml"] #s-game .seat.pc-top-seat .seat-open-strip,
  html[data-seat-struct="qml"] #s-game .seat.pc-top-seat .seat-open-strip.below {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  #s-game .my-zone .act-buttons-row .btn-action,
  #s-game .my-zone.pc-can-show .mid-row .btn-action.btn-show {
    min-height: 40px !important;
    font-size: 14px !important;
  }
}

/* Phone portrait, fullscreen felt: the renderer writes --comm-scale inline
   from the QML formula and caps it on the (invisible) .felt-oval width, so
   the board lands ~35px wide inside a 300px-tall empty felt. !important on
   the custom property outranks the inline value. Values are local px, the
   table scaler (0.74–0.85) applies on top → ≈50×70 on a 390px phone.
   data-pc-seats comes from pc-mobile-table.js (window._seatCount). */
@media (max-width: 540px) and (orientation: portrait) {
  html[data-table-fs="1"] {
    --comm-scale: 1.45 !important;
  }

  html[data-table-fs="1"][data-pc-seats="7"],
  html[data-table-fs="1"][data-pc-seats="8"],
  html[data-table-fs="1"][data-pc-seats="9"],
  html[data-table-fs="1"][data-pc-seats="10"] {
    --comm-scale: 1.25 !important;
  }
}