/* Styles spécifiques au jeu Queens (plateau, cases, couleurs des zones). */
/* ---------- plateau ---------- */
.board-wrap { position: relative; width: min(100%, 62vh); width: min(100%, 62dvh); margin: 10px auto; }
.board {
  --n: 8;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
  user-select: none; -webkit-user-select: none;
  touch-action: none;   /* le glissement sur la grille pose des croix au lieu de faire défiler la page */
}
.cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 1px solid rgba(0, 0, 0, .22); border-radius: 0;
  color: #1a1530; font: inherit; font-size: clamp(14px, 5.5vw, 30px); font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cell.bt { border-top: 3px solid var(--ink); }
.cell.bl { border-left: 3px solid var(--ink); }
.cell:focus-visible { outline: 3px solid #fff; outline-offset: -3px; z-index: 1; }
.cell svg { width: 74%; height: 74%; display: block; }
.cell[data-m="1"] { color: rgba(20, 10, 50, .55); }
.cell.bad {
  background-image: repeating-linear-gradient(135deg, rgba(255, 30, 60, .6) 0 5px, transparent 5px 10px);
}
.cell.bad svg { color: #7a0016; }

/* couleurs des zones (10 maximum) */
.r0 { background-color: #ff9fa8; }
.r1 { background-color: #ffcf8f; }
.r2 { background-color: #fff08a; }
.r3 { background-color: #bfeb8f; }
.r4 { background-color: #8fe3bd; }
.r5 { background-color: #8fd3f2; }
.r6 { background-color: #9eaeff; }
.r7 { background-color: #cfa6ff; }
.r8 { background-color: #f59fdc; }
.r9 { background-color: #d2bd9c; }

/* bouton « Croix auto » : état activé bien visible */
.btn.toggle[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }