/* Número da posição no diagrama, visível só enquanto o slot está vazio —
   corresponde ao mesmo número mostrado no selo de cada peça, pra dar pra
   comparar "peça 3 pertence à posição 3" sem precisar verificar pra saber.
   Some sozinho quando uma peça é encaixada (:empty), sem precisar de JS. */
.qci-slot {
  position: relative;
}

.qci-slot:empty::before {
  content: attr(data-pos);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
  font-weight: 700;
  color: #94a3b8;
}

.dark .qci-slot:empty::before {
  color: #475569;
}