/* Specialized for dice container & dice faces */

/* The container for the 5 dice (Dice Game page) */
#diceContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Each dice face box */
.dice-face {
  width: 60px;
  height: 60px;
  border: 3px solid #000; /* or var(--brand-border) if you still want the variable */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
  margin: 0 5px 5px 0; /* small margin for spacing */
}

.dice-face:hover {
  transform: scale(1.05);
}

.dice-face img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
}

.dice-face.blocked {
  border-color: red;
}
.dice-face.winning-dice {
  border: 3px solid gold !important;
  box-shadow: 0 0 10px gold;
}
/* On very small screens (<576px), reduce dice to ~40px wide */
@media (max-width: 576px) {
  #diceContainer .dice-face {
    width: 40px;
    height: 40px;
  }
  #diceContainer .dice-face img {
    width: 38px;
    height: 38px;
  }
}
.chat-die{
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin: 0 2px;
}