/* ============================================================
   DÉS
   ============================================================ */

/* Le vrai dé intégré au thème sombre : fond transparent, pastilles blanches. */
.real-dice {
  width: 32px;
  height: 32px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);

  padding: 4px;

  background: transparent;

  border: 1px solid var(--line);
  border-radius: 6px;
}

.real-dice.face-0 {
  background: rgba(255, 255, 255, .02);

  border: 1px dashed var(--line);
}

.dice-pip {
  display: block;

  width: 5px;
  height: 5px;

  align-self: center;
  justify-self: center;

  background: #ffffff;

  border-radius: 50%;
}

.face-1 .dice-pip:nth-child(1) {
  grid-area: 2 / 2;
}

.face-2 .dice-pip:nth-child(1) {
  grid-area: 1 / 1;
}

.face-2 .dice-pip:nth-child(2) {
  grid-area: 3 / 3;
}

.face-3 .dice-pip:nth-child(1) {
  grid-area: 1 / 1;
}

.face-3 .dice-pip:nth-child(2) {
  grid-area: 2 / 2;
}

.face-3 .dice-pip:nth-child(3) {
  grid-area: 3 / 3;
}

.face-4 .dice-pip:nth-child(1) {
  grid-area: 1 / 1;
}

.face-4 .dice-pip:nth-child(2) {
  grid-area: 1 / 3;
}

.face-4 .dice-pip:nth-child(3) {
  grid-area: 3 / 1;
}

.face-4 .dice-pip:nth-child(4) {
  grid-area: 3 / 3;
}

.face-5 .dice-pip:nth-child(1) {
  grid-area: 1 / 1;
}

.face-5 .dice-pip:nth-child(2) {
  grid-area: 1 / 3;
}

.face-5 .dice-pip:nth-child(3) {
  grid-area: 2 / 2;
}

.face-5 .dice-pip:nth-child(4) {
  grid-area: 3 / 1;
}

.face-5 .dice-pip:nth-child(5) {
  grid-area: 3 / 3;
}

.face-6 .dice-pip:nth-child(1) {
  grid-area: 1 / 1;
}

.face-6 .dice-pip:nth-child(2) {
  grid-area: 1 / 3;
}

.face-6 .dice-pip:nth-child(3) {
  grid-area: 2 / 1;
}

.face-6 .dice-pip:nth-child(4) {
  grid-area: 2 / 3;
}

.face-6 .dice-pip:nth-child(5) {
  grid-area: 3 / 1;
}

.face-6 .dice-pip:nth-child(6) {
  grid-area: 3 / 3;
}