.game-board[data-game="freecell"] .freecell-upper,
.game-board[data-game="freecell"] .freecell-tableau {
  grid-template-columns: repeat(8, var(--card-width));
}

.freecell-upper {
  align-items: start;
}

.freecell-pile {
  box-sizing: border-box;
  width: var(--card-width);
  height: var(--card-height);
  min-height: var(--card-height);
  border-radius: clamp(5px, calc(var(--card-width) * .055), 10px);
}

.freecell-pile.is-empty {
  display: grid;
  place-items: center;
  border: clamp(2px, calc(var(--card-width) * .022), 3px) dashed rgba(238,226,189,.5);
  background: rgba(5,31,28,.16);
}

.freecell-pile.is-empty.is-snap-target {
  outline: clamp(3px, calc(var(--card-width) * .035), 5px) solid rgba(238,226,189,.94);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(210,173,82,.22), 0 0 22px rgba(210,173,82,.38);
}

.freecell-placeholder {
  color: rgba(238,226,189,.36);
  font-size: clamp(8px, calc(var(--card-width) * .11), 15px);
  font-weight: 800;
  letter-spacing: .08em;
}

.freecell-tableau {
  margin-top: clamp(22px, 3vw, 42px);
}

.freecell-tableau-pile {
  min-height: var(--card-height);
}

.empty-tableau-slot {
  width: var(--card-width);
  height: var(--card-height);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px dashed rgba(238,226,189,.24);
  border-radius: 4px;
  color: rgba(238,226,189,.28);
  font-size: calc(var(--card-width) * .22);
}

@media (max-width: 760px) {
  .freecell-placeholder { letter-spacing: 0; }
}