/* Tri Peaks keeps a fixed table: four overlapping rows, and the stock row never changes height. */

.game-root[data-game="tri-peaks"] {
  min-height: 30rem;
}

.peaks-board {
  --cols: 10;
  --gap: clamp(0.12rem, 0.7cqw, 0.45rem);
  --row-step: 0.4;
  --card-min: 2rem;
  --card-max: 4.4rem;
  /* Leave room for the scroll padding and a gutter, so the peaks do not sit a few pixels too wide. */
  --card-w: clamp(var(--card-min), calc((100cqw - 1.4rem - var(--gap) * (var(--cols) - 1)) / var(--cols)), var(--card-max));
  --card-h: calc(var(--card-w) * 1.452);
  --radius: calc(var(--card-w) * 0.07);
  width: 100%;
  padding: 0.2rem 0 0.4rem;
}

.peaks-status {
  min-height: 2.8em;
  margin: 0 auto 0.85rem;
  max-width: 36rem;
  text-align: center;
  color: #f4f0e8;
  line-height: 1.4;
}

.peaks-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior-x: contain;
  padding: 0.45rem 0.15rem 0.35rem;
}

.peaks {
  position: relative;
  width: calc(var(--card-w) * 10 + var(--gap) * 9);
  height: calc(var(--card-h) * (1 + 3 * var(--row-step)));
  margin-inline: auto;
}

.peaks-slot {
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  z-index: var(--layer, 1);
}

.peaks-slot .playing-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.peaks-slot.is-raised {
  z-index: 30;
}

.peaks-slot.is-covered .playing-card {
  cursor: default;
}

.game-root[data-game="tri-peaks"] .playing-card.is-covered:hover {
  transform: none;
}

.peaks-piles {
  display: flex;
  justify-content: center;
  gap: calc(var(--card-w) * 0.85);
  margin: calc(var(--card-h) * 0.22) auto 0;
  min-height: var(--card-h);
}

.peaks-stock:not([aria-disabled="true"]) {
  cursor: pointer;
}

.peaks-waste.drop-hover .playing-card,
.peaks-waste.drop-hover {
  box-shadow: 0 0 0 2px rgba(240, 207, 106, 0.9), 0 4px 10px rgba(0, 0, 0, 0.35);
}