/* Ezidice styles. The shared look (colours, type, app shell) is in jt.css. */

.dice-body {
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.dice {
  display: flex;
  gap: 24px;
}

.die {
  width: 112px;
  height: 112px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 14px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.die--accent {
  background: var(--accent);
}

.die span {
  width: 16px;
  height: 16px;
  place-self: center;
  background: var(--ink);
  visibility: hidden;
}

/* Pips are numbered 1-9 across the 3×3 grid. */
.die[data-face='1'] span:nth-child(5),
.die[data-face='2'] span:is(:nth-child(1), :nth-child(9)),
.die[data-face='3'] span:is(:nth-child(1), :nth-child(5), :nth-child(9)),
.die[data-face='4'] span:is(:nth-child(1), :nth-child(3), :nth-child(7), :nth-child(9)),
.die[data-face='5'] span:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(7), :nth-child(9)),
.die[data-face='6'] span:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(9)) {
  visibility: visible;
}

.die.is-rolling {
  animation: shake 180ms steps(2) infinite;
}

.die.is-rolling + .die.is-rolling {
  animation-delay: -90ms;
}

@keyframes shake {
  0% {
    transform: translate(-3px, 2px) rotate(-4deg);
  }

  100% {
    transform: translate(3px, -2px) rotate(4deg);
  }
}

.total {
  font-size: 16px;
}

.total__value {
  font-size: 44px;
  font-weight: 700;
  vertical-align: middle;
}

@media (max-width: 360px) {
  .die {
    width: 96px;
    height: 96px;
    padding: 12px;
  }
}