.game {
  display: flex;
  flex-direction: column;
  padding: 4px;
  gap: 6px;
  max-width: 100vw;
  box-sizing: border-box;
  touch-action: none; /* Disables default gestures like pan/zoom during drag */
  max-width: 600px;
  margin: 0 auto;
}

#restartBtn {
    padding: 6px 14px;
    font-size: 0.9em;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#restartBtn:hover {
  background-color: #2980b9;
}

/* Top row layout: Freecells and Foundations in one row with space between */
.top-row-split {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
}

/* Group of 4 piles (FreeCells or Foundations) */
.pile-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.freecell-group {
  justify-content: flex-start;
}
.foundation-group {
  justify-content: flex-end;
}

/* Tableau: 8 columns in a single row */
.pile-row.tableau {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  justify-content: center;
}

/* Base pile */
.pile {
  background: #fff;
  border-radius: 4px;
  min-height: 60px;
  width: 36px;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  position: relative;
}

/* Placeholder for empty piles */
.pile:empty::before {
  content: '';
  display: block;
  width: 32px;
  height: 48px;
  border: 2px dashed #ccc;
  border-radius: 4px;
}

/* Card style */
.card {
  width: 32px;
  height: 60px;
  border: 1px solid #000;
  border-radius: 4px;
  background: #fff;
  margin-top: 2px;
  user-select: none;
  font-size: 0.75em;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  padding-top: 6px;
  line-height: 1.2em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: black;
}
.card span {
  padding-left: 4px;
}

.card.red {
  color: red;
}

.card.dragging {
  opacity: 0.5;
  box-shadow: none;
}

/* Overlapping in tableau only */
.pile-row.tableau .pile .card {
  position: relative;
  margin-top: -42px;
  z-index: 1;
}
.pile-row.tableau .pile .card:first-child {
  margin-top: 0;
}

.pile.highlight-valid {
  outline: 2px dashed #2ecc71; /* green for valid */
  outline-offset: -2px;
}

.pile.highlight-invalid {
  outline: 2px dashed #e74c3c; /* red for invalid */
  outline-offset: -2px;
}

/* Overlapping in foundations */
.foundation-group .pile .card {
  position: relative;
  margin-top: -42px;
  z-index: 1;
}

.foundation-group .pile .card:first-child {
  margin-top: 0;
}

/* Overlapping in freecells too (for consistency) */
.freecell-group .pile .card {
  position: relative;
  margin-top: -42px;
  z-index: 1;
}

.freecell-group .pile .card:first-child {
  margin-top: 0;
}