#solitaire-board {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  user-select: none;
}
.sol-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sol-gap, 6px);
  margin-bottom: var(--sol-gap, 6px);
}
.pile {
  position: relative;
  border: 2px dashed rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  height: var(--card-h, 90px);
}
.pile.tableau { height: auto; min-height: var(--card-h, 90px); padding-bottom: .3rem; }
.pile.foundation::after {
  content: attr(data-suit-symbol);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--card-h, 90px) * .4);
  color: rgba(255,255,255,.15);
  pointer-events: none;
}
.pile.foundation.red::after { color: rgba(200,28,58,.18); }
.pile.spacer { border: none; background: none; }
.pile.valid-target { border-color: var(--accent-3); box-shadow: 0 0 0 2px var(--accent-3) inset; background: rgba(57,255,20,0.08); }

.card {
  position: absolute;
  top: 0; left: 0;
  width: var(--card-w, 64px);
  height: var(--card-h, 90px);
  border-radius: calc(var(--card-w, 64px) * .11);
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  transition: top .14s ease, left .14s ease, box-shadow .1s ease, outline-color .1s ease;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.card.selected { outline-color: var(--accent-3); box-shadow: 0 0 0 3px rgba(57,255,20,.35), 0 4px 10px rgba(0,0,0,.5); transform: translateY(-4px); }

.card-face, .card-back {
  position: absolute; inset: 0;
  border-radius: inherit;
  display: none;
}
.card[data-faceup="true"] .card-face { display: block; }
.card[data-faceup="false"] .card-back { display: block; }

.card-face {
  background: var(--card-face);
  color: var(--card-text);
  padding: 3px 4px;
}
.card-face .corner { display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 800; }
.card-face .corner.top { position: absolute; top: 4px; left: 4px; }
.card-face .corner.bottom { position: absolute; bottom: 4px; right: 4px; transform: rotate(180deg); }
.card-face .corner .rank { font-size: calc(var(--card-w, 64px) * .22); }
.card-face .corner .suit { font-size: calc(var(--card-w, 64px) * .18); }
.card-face .pip-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--card-w, 64px) * .42);
  opacity: .85;
}
.card.red .card-face, .card.red .card-face .pip-center { color: var(--card-red); }
.card.black .card-face, .card.black .card-face .pip-center { color: var(--card-black); }
.card.red .corner { color: var(--card-red); }
.card.black .corner { color: var(--card-black); }

.card-back {
  background: linear-gradient(135deg, var(--card-back), var(--accent-2));
  border: 2px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--card-w, 64px) * .4);
}

.stock-empty-ring, .foundation-empty-mark {
  position: absolute; inset: 8%;
  border: 2px dashed rgba(255,255,255,.25);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: rgba(255,255,255,.35);
  pointer-events: none;
}

.sol-toolbar { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: .8rem; width: 100%; }
.sol-hint { color: var(--text-muted); font-size: .78rem; text-align: center; font-weight: 600; margin-top: .3rem; }

@media (min-width: 560px) {
  :root { --sol-gap: 10px; }
}