/* Pyramid keeps a fixed table: seven rows overlap in place, and the stock row never changes height. */

.game-root[data-game="pyramid"] {
  min-height: 36rem;
}

.pyramid-board {
  --cols: 7;
  --gap: clamp(0.25rem, 1.4cqw, 0.9rem);
  --row-step: 0.36;
  --card-min: 2.2rem;
  --card-max: 5.8rem;
  /* Leave room for the scroll padding and a gutter, so the pyramid does 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;
}

.pyramid-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  padding: 0.55rem 0.2rem 0.7rem;
}

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

.pyramid {
  position: relative;
  width: calc(var(--card-w) * 7 + var(--gap) * 6);
  height: calc(var(--card-h) * (1 + 6 * var(--row-step)));
  margin-inline: auto;
}

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

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

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

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

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

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

.pyramid-piles {
  display: flex;
  justify-content: center;
  gap: calc(var(--card-w) * 0.8);
  width: calc(var(--card-w) * 7 + var(--gap) * 6);
  max-width: 100%;
  margin: calc(var(--card-h) * 0.22) auto 0;
  min-height: var(--card-h);
}

.pyramid-stock:not([aria-disabled="true"]),
.pyramid-waste:has(.playing-card) {
  cursor: pointer;
}