.solitaire-table {
  --down-step: 13px;
  --up-step: 29px;
  overflow: hidden;
  min-height: clamp(450px, 56vh, 560px);
  border: 1px solid color-mix(in srgb, var(--color-canvas) 13%, transparent);
  border-radius: 1.1rem;
  padding: clamp(0.55rem, 1.2vw, 1rem);
  background:
    radial-gradient(circle at 24% 14%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 28%),
    radial-gradient(circle at 78% 74%, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 34%),
    color-mix(in srgb, var(--color-ink) 91%, var(--color-secondary));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
}

.top-row,
.tableau-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(4px, 0.85vw, 11px);
}

.top-row {
  align-items: start;
  margin-bottom: clamp(0.65rem, 1.5vw, 1.15rem);
}

.foundation-grid {
  display: grid;
  grid-column: 4 / 8;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, 0.85vw, 11px);
}

.card-slot,
.playing-card {
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: clamp(0.3rem, 0.7vw, 0.62rem);
}

.card-slot {
  position: relative;
  display: block;
  border: 1px dashed color-mix(in srgb, var(--color-canvas) 34%, transparent);
  color: color-mix(in srgb, var(--color-canvas) 66%, transparent);
  background: color-mix(in srgb, var(--color-canvas) 4%, transparent);
}

button.card-slot {
  padding: 0;
}

.card-slot::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.85rem, 2vw, 1.45rem);
  opacity: 0.75;
}

.stock-slot.is-empty::before {
  content: "↻";
}

.foundation-slot[data-suit="clubs"]::before {
  content: "♣";
}

.foundation-slot[data-suit="diamonds"]::before {
  content: "♦";
}

.foundation-slot[data-suit="hearts"]::before {
  content: "♥";
}

.foundation-slot[data-suit="spades"]::before {
  content: "♠";
}

.stock-slot:not(.is-empty)::after,
.playing-card.is-face-down::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in srgb, var(--color-canvas) 48%, transparent);
  border-radius: calc(clamp(0.3rem, 0.7vw, 0.62rem) - 2px);
  background:
    linear-gradient(45deg, transparent 44%, color-mix(in srgb, var(--color-ink) 30%, transparent) 45% 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, color-mix(in srgb, var(--color-ink) 30%, transparent) 45% 55%, transparent 56%),
    var(--color-primary);
  background-size: 12px 12px;
}

.stock-slot:not(.is-empty) {
  border-style: solid;
  border-color: color-mix(in srgb, var(--color-ink) 45%, transparent);
  background: var(--color-primary);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--color-ink) 34%, transparent);
}

.waste-slot {
  border: 0;
  background: transparent;
}

.waste-slot .playing-card {
  left: calc(var(--waste-index) * clamp(3px, 0.45vw, 8px));
  width: calc(100% - clamp(0px, 0.9vw, 14px));
}

.tableau-grid {
  min-height: 300px;
}

.tableau-pile {
  position: relative;
  min-width: 0;
  min-height: 100%;
}

.tableau-empty {
  position: absolute;
  inset: 0 auto auto 0;
}

.playing-card {
  position: absolute;
  z-index: calc(var(--layer, 0) + 1);
  top: calc(var(--down-before, 0) * var(--down-step) + var(--up-before, 0) * var(--up-step));
  left: 0;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-ink) 24%, transparent);
  padding: 0;
  color: var(--color-ink);
  background: var(--color-surface-raised);
  box-shadow: 0 3px 9px color-mix(in srgb, black 20%, transparent);
  text-align: left;
  transform-origin: center bottom;
  transition: transform 130ms ease, box-shadow 130ms ease, outline-color 130ms ease;
}

.playing-card.is-red {
  color: var(--color-attention-strong);
}

.playing-card.is-face-down {
  cursor: default;
  border-color: color-mix(in srgb, var(--color-ink) 38%, transparent);
  background: var(--color-primary);
}

.playing-card:not(.is-face-down):hover {
  z-index: 20;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px color-mix(in srgb, black 27%, transparent);
}

.card-corner {
  position: absolute;
  top: 5%;
  left: 8%;
  display: grid;
  justify-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.62rem, 1.55vw, 1rem);
  font-weight: 800;
  line-height: 0.82;
}

.card-corner small {
  font-size: 0.78em;
}

.card-suit-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.9rem, 2.5vw, 2.25rem);
  opacity: 0.82;
}

.playing-card.is-selected {
  z-index: 30;
  outline: 4px solid var(--color-primary);
  outline-offset: 1px;
  box-shadow: 0 0 0 2px var(--color-ink), 0 12px 20px color-mix(in srgb, black 30%, transparent);
  transform: translateY(-7px);
}

.playing-card.is-selected::before {
  content: "SELECTED";
  position: absolute;
  z-index: 2;
  right: 3px;
  bottom: 3px;
  padding: 2px 3px;
  border-radius: 3px;
  color: var(--color-ink);
  background: var(--color-primary);
  font-size: clamp(0.28rem, 0.65vw, 0.5rem);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.playing-card.is-hint-source,
.card-slot.is-hint-source {
  outline: 4px solid var(--color-secondary);
  outline-offset: 2px;
}

.playing-card.is-hint-target,
.card-slot.is-hint-target,
.tableau-pile.is-hint-target .tableau-empty {
  outline: 4px solid var(--color-primary);
  outline-offset: 2px;
  animation: hint-pulse 850ms ease-in-out 2;
}

.foundation-slot .playing-card,
.waste-slot .playing-card {
  top: 0;
}

.pile-count {
  position: absolute;
  z-index: 5;
  right: 3px;
  bottom: 3px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  color: var(--color-canvas);
  background: var(--color-ink);
  font-size: 0.58rem;
  font-weight: 850;
}

@keyframes hint-pulse {
  50% {
    transform: scale(1.035);
  }
}