/* Pool table extras. Points table rules stay in points-rummy-game.css. */

.points-game-stage {
  position: relative;
}

.pool-board {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0;
  padding: 0.45rem 0.65rem;
  min-height: 2.7rem;
  box-sizing: border-box;
  color: #f6f1e4;
  background: rgba(12, 48, 32, 0.72);
  border-bottom: 1px solid rgba(240, 217, 160, 0.35);
}

/*
  F2-2A CLS: LH layout-shifts attributes points-game-stage (~0.17). Timeline
  probe: boot status (~54px) collapsing after DCL moves the stage; under mobile
  throttle, hand mount also grows the rail. Keep boot out of flow by default
  (HTML hidden + failure unhide). Reserve hand space for the dealt 13-card row.
*/
.points-game[data-pool-game] > [data-pool-boot] {
  margin: 0;
}

@media (max-width: 767px) {
  .points-game[data-pool-game] .points-game-bar {
    min-height: 3.9rem;
    box-sizing: border-box;
  }

  .points-game[data-pool-game] .points-game-rail .points-game-hand {
    min-height: 8.75rem;
    box-sizing: border-box;
  }

  .points-game[data-pool-game] .points-game-dock {
    min-height: 6.5rem;
    box-sizing: border-box;
  }
}

.pool-board p {
  margin: 0;
}

.pool-board-mode,
.pool-board-winner {
  font-weight: 700;
}

.points-game[data-pool-game] .points-game-bar {
  padding-bottom: 1.15rem;
}

.points-game[data-pool-game] .points-game-bar .pool-mode,
.points-game[data-pool-game] .points-game-bar [data-act="new"] {
  flex: 0 1 auto;
  min-height: 44px;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  line-height: 1.1;
}

.points-game .pool-mode {
  min-height: 44px;
  touch-action: manipulation;
}

.points-game .pool-mode[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--pg-gold-hi), var(--pg-gold));
  color: var(--pg-deep);
  border-color: var(--pg-gold-hi);
  box-shadow: none;
}

.points-game:has(.points-game-result.is-open) .pool-board,
.points-game:has(.points-game-result.is-open) .pool-confirm {
  display: none;
}

.points-game-seat.is-out .points-game-avatar {
  filter: grayscale(0.85);
}

.points-game-seat.is-pool-winner {
  box-shadow: inset 0 0 0 2px #f0d9a0;
}

.pool-seat-state {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.pool-confirm {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 28, 18, 0.72);
}

.pool-confirm[hidden] {
  display: none;
}

.pool-confirm-card {
  width: min(100%, 22rem);
  margin: 0;
  padding: 1rem;
  color: #1c1914;
  background: #f6f1e4;
  border: 2px solid #c47a3a;
}

.pool-confirm-card p {
  margin: 0 0 0.75rem;
}

.pool-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pool-confirm-actions .points-game-btn {
  min-height: 44px;
  touch-action: manipulation;
}

@media (max-width: 360px) {
  .pool-board {
    gap: 0.15rem 0.4rem;
    padding: 0.3rem 0.45rem;
    font-size: 0.8rem;
  }
}

/*
  Short phones. Measured at 320×568 before this block: the action bar sat 90px
  below the fold. The extra height was the second action row (Arrange alone,
  about 46px), the 31px pool status line, 0.42rem under the top bar, 0.6rem
  padding on your seat, and a 5px felt border. 375×667 was 39px over for the
  same reasons. Desktop heights above 700px keep the original table.
*/
@media (max-width: 767px) and (max-height: 700px) {
  .points-game .points-game-bar {
    gap: 0.15rem 0.35rem;
    padding-bottom: 1.05rem;
  }

  .points-game[data-pool-game] .points-game-bar .pool-mode,
  .points-game[data-pool-game] .points-game-bar [data-act="new"] {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    font-size: 0.72rem;
  }

  .points-game .points-game-bar-links,
  .points-game .points-game-bar-links a {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .pool-board {
    gap: 0.1rem 0.4rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.15;
  }

  .points-game .points-game-felt {
    border-width: 2px;
    padding-top: 0.15rem;
    padding-bottom: 0;
  }

  .points-game .points-game-rail {
    gap: 0.1rem;
  }

  .points-game .points-game-rail .points-game-seat-you {
    gap: 0.2rem 0.35rem;
    margin-bottom: 0;
    padding: 0.1rem 0.35rem;
  }

  .points-game .points-game-seat:not(.points-game-seat-you) .points-game-avatar,
  .points-game .points-game-rail .points-game-seat-you .points-game-avatar {
    width: 1.5rem;
    height: 1.5rem;
  }

  .pool-seat-state {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.1;
  }

  .points-game .points-game-rail .points-game-hand {
    padding-top: 0.5rem;
    row-gap: 0.5rem;
  }

  .points-game .points-game-dock {
    padding-top: 0;
    padding-bottom: 0;
  }

  .points-game .points-game-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.2rem;
    margin-top: 0;
  }

  .points-game .points-game-actions [data-act="discard"],
  .points-game .points-game-actions [data-act="declare"],
  .points-game .points-game-actions [data-act="arrange"] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0.25rem 0.2rem;
    font-size: 0.7rem;
    line-height: 1.15;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .points-game-seat.is-out .points-game-avatar {
    filter: grayscale(0.85);
  }
}