/* Styles propres au sudoku (les styles partagés sont dans ../common.css). */

/* ---------- Options ---------- */

.swatch {
  display: inline-grid;
  grid-template-columns: repeat(2, 8px);
  border: 2px solid var(--text);
  border-radius: 4px;
  overflow: hidden;
}
.swatch i { width: 8px; height: 8px; }

/* ---------- Grilles ---------- */

.legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2cqw;
  font-size: 2.8cqw;
  color: var(--line);
}
.legend span { margin-right: 1cqw; }
.legend-item { width: 5.5cqw; height: 5.5cqw; }

.grids {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 3cqw;
}
.per-1 .grids { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.per-2 .grids { grid-template: repeat(2, minmax(0, 1fr)) / minmax(0, 1fr); }
.per-4 .grids { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }
.per-6 .grids { grid-template: repeat(3, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }

/* La grille remplit sa zone sans dépendre de sa taille intrinsèque. */
figure {
  margin: 0;
  position: relative;
  min-height: 0;
  min-width: 0;
}
.grid {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 3.5cqw);
}
figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size: 2.2cqw;
  color: var(--line);
  opacity: .7;
}

/* Économie d'encre : textes plus fins. */
.eco .legend, .eco figcaption { font-weight: 300; }