.solitaire {
  background: radial-gradient(ellipse at top, #185347, #10382f 74%);
  padding: clamp(7px, 1.8vw, 20px);
}
.solitaire-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.solitaire-score { color: var(--muted); font-size: .85rem; margin-right: auto; }
.solitaire-score strong { color: var(--ink); font: 700 1rem var(--mono); }
.solitaire-table { width: min(100%, 820px); margin-inline: auto; }
.solitaire-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, 1vw, 12px);
  align-items: start;
}
.solitaire-row + .solitaire-row { margin-top: clamp(12px, 2vw, 22px); }
.tableau-column { display: flex; flex-direction: column; }
.solitaire-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 5 / 7;
  min-width: 0;
  padding: 0;
  border: 1px solid #b5c5bd;
  border-radius: clamp(3px, .7vw, 8px);
  font: 700 clamp(.8rem, 2.4vw, 1.65rem)/1 var(--mono);
  touch-action: manipulation;
}
.tableau-column .solitaire-card + .solitaire-card { margin-top: -101%; }
.tableau-column .card-back + .solitaire-card { margin-top: -120%; }
.playing-card { background: #faf7ef; color: #17232c; cursor: grab; }
.playing-card[data-color="red"] { color: #ad2038; }
.playing-card[aria-pressed="true"] {
  background: #fff1b8;
  outline: 2px solid #f4d77d;
  outline-offset: -2px;
}
.solitaire-card:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -3px;
}
.card-rank {
  position: absolute;
  top: 5%;
  left: 6%;
  font-size: clamp(.65rem, 1.8vw, 1.24rem);
  white-space: nowrap;
}
.card-suit { font-size: clamp(.85rem, 3vw, 2.3rem); pointer-events: none; }
.card-back {
  background: repeating-linear-gradient(135deg, #26395b 0 6px, #304970 6px 12px);
  color: #fff;
  border-color: #87a3ba;
}
.pile-slot {
  background: #0e352d;
  border: 1px dashed #6b9d8a;
  color: #b0d9c8;
}
@media (hover: hover) {
  button.solitaire-card:hover { border-color: #f4d77d; }
}
.solitaire-guide { margin-top: 16px; }
.solitaire-guide summary { cursor: pointer; font-weight: 700; }

@media (max-width: 420px) {
  .solitaire-toolbar .secondary { font-size: .72rem; padding-inline: 5px; }
  .solitaire-score { font-size: .74rem; }
  .solitaire-score strong { font-size: .8rem; }
  .card-suit { margin-top: 9px; }
}