/* ==========================================================================
   Solitaire — habillage.

   Tout le tapis est dessiné au canevas : sept colonnes, quatre fondations, une
   pioche. La page ne porte que la barre du haut et les deux boutons qui
   comptent — annuler, et recommencer.
   ========================================================================== */
.so { display: flex; flex-direction: column; align-items: center; gap: 8px;
      width: 100%; height: 100%; justify-content: flex-start; padding: 6px; }

.so-barre { display: flex; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap;
            justify-content: center; }
.so-barre b { font-variant-numeric: tabular-nums; }
.so-btn {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: .4rem 1rem; font-size: 13px; font-weight: 600;
  font-family: 'Fredoka', system-ui, sans-serif;
  background: var(--line, #e1e5ec); color: inherit;
}
.so-btn:disabled { opacity: .45; cursor: default; }
.so-btn.vif { background: #2fae6a; color: #fff; }
.so-son { border: 0; border-radius: 999px; cursor: pointer; width: 32px; height: 32px;
          font-size: 15px; background: var(--line, #e1e5ec); color: inherit; }

/* LE TAPIS EST PLUS LARGE QUE HAUT, et il prend toute la place qu'on lui
   donne : sept colonnes de cartes ne se lisent pas sur un mouchoir. */
.so-bloque {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  background: rgba(214, 90, 60, .14); color: #a8412a;
  font-size: 14px; font-weight: 600; text-align: center;
}
.so-bloque[hidden] { display: none; }

.so-tapis {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 7;
  max-height: 76vh;
  border-radius: 14px;
  overflow: hidden;
  background: #1d7a4a;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .25);
  touch-action: none;
}
.so-tapis canvas { display: block; width: 100%; height: 100%; }