.klondike-app {
  --card-w: clamp(64px, 9.2vw, 112px);
  --stack-gap: clamp(24px, 3.2vw, 39px);
  --waste-spread: clamp(15px, 2.15vw, 25px);
}

.klondike-top-row {
  align-items: start;
}

@media (min-width: 721px) {
  .klondike-app .game-header {
    padding-left: 140px;
  }
}

.stock-waste {
  grid-template-columns: var(--card-w) calc(var(--card-w) + var(--waste-spread) * 2);
}

.stock-slot,
.waste-slot {
  width: var(--card-w);
  height: var(--card-h);
}

.waste-slot {
  width: calc(var(--card-w) + var(--waste-spread) * 2);
  display: block;
  overflow: visible;
}

.klondike-tableau {
  grid-template-columns: repeat(7, minmax(var(--card-w), 1fr));
}

.klondike-tableau .tableau-column {
  min-height: calc(var(--card-h) + 48vh);
}

.playing-card.card-back {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.12), transparent 42%),
    var(--card-back-image) center / cover no-repeat,
    var(--table-rail);
  border-color: color-mix(in srgb, var(--card-edge) 75%, var(--table-rail));
}

.playing-card.card-back::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(255, 250, 226, 0.36);
  border-radius: calc(var(--card-radius) * 0.72);
  pointer-events: none;
}

.stock-card {
  box-shadow:
    0 11px 22px var(--table-shadow),
    0 0 0 1px rgba(255, 248, 221, 0.12) inset;
}

.stock-recycle {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: rgba(248, 239, 216, 0.76);
  font-size: clamp(1.8rem, calc(var(--card-w) * 0.34), 2.7rem);
  font-weight: 800;
  cursor: pointer;
}

.stock-recycle:disabled {
  cursor: default;
  opacity: 0.28;
}

.stock-recycle:not(:disabled):hover,
.stock-recycle:not(:disabled):focus-visible {
  color: #fff7e4;
}

.waste-card {
  position: absolute;
  left: calc(var(--waste-index) * var(--waste-spread));
  top: 0;
  z-index: calc(var(--waste-index) + 1);
}

.waste-card.is-preview {
  cursor: default;
}

.waste-card.is-preview:hover {
  transform: none;
}

.stacked-card.card-back.is-locked:hover {
  transform: translateX(-50%);
}

.draw-select {
  min-width: 100px;
}

@media (max-width: 820px) {
  .klondike-app {
    --card-w: clamp(48px, 12vw, 82px);
    --stack-gap: 25px;
    --waste-spread: 15px;
  }

  .klondike-tableau {
    gap: 4px;
  }

  .klondike-tableau .tableau-column {
    min-height: calc(var(--card-h) + 390px);
  }
}