/* =====================================================
   DICE GAME – LAYOUT
===================================================== */
.container-dice {
  width: 70%;
  margin: auto;
  text-align: center;
}

/* =====================================================
   DICE BLOCKS
===================================================== */
.dice {
  display: inline-block;
  padding: 20px;
  text-align: center;
}

.dice img {
  width: 80%;
}

/* Player labels */
.player {
  font-size: 2rem;
  font-family: 'Indie Flower', cursive;
  color: #ffffff;
  padding-bottom: 15px;
}

/* Result text */
.dice-result {
  margin: 20px 0;
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffffff;
}

/* =====================================================
   BUTTON
===================================================== */
.buttonDice {
  appearance: button;
  cursor: pointer;

  margin-top: 20px;
  padding: 0.5rem 1rem;

  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #ffffff;

  background-color: #4D4AE8;
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0));

  border: 1px solid #4D4AE8;
  border-radius: 1rem;

  box-shadow:
    rgba(255, 255, 255, 0.15) 0 1px 0 inset,
    rgba(46, 54, 80, 0.075) 0 1px 1px;

  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* Hover */
.buttonDice:hover {
  background-color: #3733E5;
  border-color: #3733E5;
}

/* Focus */
.buttonDice:focus {
  outline: none;
  background-color: #413FC5;
  border-color: #3E3BBA;
  box-shadow:
    rgba(255, 255, 255, 0.15) 0 1px 0 inset,
    rgba(46, 54, 80, 0.075) 0 1px 1px,
    rgba(104, 101, 235, 0.5) 0 0 0 0.2rem;
}

/* Active */
.buttonDice:active {
  background-color: #3E3BBA;
  border-color: #3A38AE;
  box-shadow: rgba(46, 54, 80, 0.125) 0 3px 5px inset;
}

/* Disabled */
.buttonDice:disabled {
  opacity: 0.65;
  pointer-events: none;
}