.dice-widget {
  width: 100%;
  height: 100%;
}

.dice-widget-button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 720px;
}

.dice-widget-button:focus-visible {
  outline: 2px solid rgba(34, 197, 94, 0.55);
  outline-offset: 8px;
}

.dice-scene {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.dice-cube {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  transform-style: preserve-3d;
  will-change: transform;
}

.dice-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -8px 14px rgba(226, 232, 240, 0.4);
  backface-visibility: hidden;
}

.dice-face::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(241, 245, 249, 0.95);
}

.dice-face-front { transform: rotateY(0deg) translateZ(22px); }
.dice-face-back { transform: rotateY(180deg) translateZ(22px); }
.dice-face-right { transform: rotateY(90deg) translateZ(22px); }
.dice-face-left { transform: rotateY(-90deg) translateZ(22px); }
.dice-face-top { transform: rotateX(90deg) translateZ(22px); }
.dice-face-bottom { transform: rotateX(-90deg) translateZ(22px); }

.dice-pips {
  position: relative;
  width: 24px;
  height: 24px;
}

.dice-pip {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #111827;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.dice-pip.pos-tl { top: 0; left: 0; }
.dice-pip.pos-tc { top: 0; left: 50%; transform: translateX(-50%); }
.dice-pip.pos-tr { top: 0; right: 0; }
.dice-pip.pos-cl { top: 50%; left: 0; transform: translateY(-50%); }
.dice-pip.pos-cc { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.dice-pip.pos-cr { top: 50%; right: 0; transform: translateY(-50%); }
.dice-pip.pos-bl { bottom: 0; left: 0; }
.dice-pip.pos-bc { bottom: 0; left: 50%; transform: translateX(-50%); }
.dice-pip.pos-br { bottom: 0; right: 0; }

@media (max-width: 680px) {
  .dice-cube {
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
  }

  .dice-face-front { transform: rotateY(0deg) translateZ(20px); }
  .dice-face-back { transform: rotateY(180deg) translateZ(20px); }
  .dice-face-right { transform: rotateY(90deg) translateZ(20px); }
  .dice-face-left { transform: rotateY(-90deg) translateZ(20px); }
  .dice-face-top { transform: rotateX(90deg) translateZ(20px); }
  .dice-face-bottom { transform: rotateX(-90deg) translateZ(20px); }

  .dice-pips {
    width: 22px;
    height: 22px;
  }
}