/* Démo interactive
 *
 * CSS n'a pas de "priorité" de placement : le wrap flex suit les largeurs min.
 * Pour que le groupe commandes s'asseye à droite du puzzle dès que possible,
 * sa largeur minimale doit être celle d'UN bloc (colonne), pas des deux côte à côte.
 * Les deux blocs passent en rangée seulement quand le groupe est assez large.
 */

.ps-demo-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; /* centrage vertical puzzle / commandes */
  gap: 1rem 1.5rem;
  width: 100%;
  margin: 1.5rem 0 2rem;
}

#storage_div,
.storage_div {
  flex: 0 0 auto;
  text-align: center;
}

#control_div {
  /* largeur min ≈ un tableau → peut flanquer le puzzle sans fenêtre énorme */
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1rem;
  max-width: 100%;
  text-align: center;
}

.storage {
  border: none;
  width: auto;
  border-collapse: separate;
  border-spacing: 12px;
  margin: 0 auto;
}

.sc {
  border: none;
  width: auto;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  padding: 0;
}

.ssc {
  border: none;
  text-align: center;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 0;
}

.c0 { background: #ddd; }
.c1 { background: #f99; }
.c2 { background: #aaf; }
.c3 { background: #c8c; }
.HI { background: #8c8; }

.ctab {
  border: none;
  width: auto;
  border-collapse: separate;
  border-spacing: 5px;
  padding: 0;
  margin: 0;
}

.fig {
  height: auto;
  width: auto;
  display: block;
  text-align: center;
  padding: 1px;
}