/* Spider Solitaire page (the card table itself is css/cards.css) */

/* The deck of rows still to deal, and the sets taken away */
.slot-stock { cursor: pointer; font: inherit; touch-action: manipulation; }
.slot-stock:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }

/* Deal a row: the big green button. It looks switched off while a row can't be dealt, but still answers a tap with the reason. */
.btn-deal { font-size: max(22px, 1.2rem); }
.btn.is-disabled { opacity: 0.45; cursor: default; }
.btn.hinting { outline: 5px solid #ffd400; outline-offset: 2px; }

/* The small-screen note stays compact on a phone, or the board would be pushed off the screen: the words, then three buttons in a row */
.size-note { column-gap: 0.4rem; }
.size-note #size-note-text { flex: 1 1 100%; }
.size-note .btn { flex: 1 1 0; min-width: 0; padding-left: 0.3em; padding-right: 0.3em; }
.size-note #size-note-close { flex: 0 0 auto; padding-left: 0.6em; padding-right: 0.6em; white-space: nowrap; }

/* Phones: two columns, so Large and Extra large words never get squeezed, with Deal a row across the top where it can't be missed */
@media (max-width: 640px) {
  .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-deal { grid-column: 1 / -1; order: -1; }
}