/* Shared D6 cube (Farkle-style) — scoped under .dice-page */
.dice-page {
  --farkle-die-size: 100px;
}

.dice-page .farkle-die {
  --farkle-die-depth: calc(var(--farkle-die-size) / 2);
  width: var(--farkle-die-size);
  height: var(--farkle-die-size);
  padding: 0;
  border: none;
  background: transparent;
  cursor: default;
  position: relative;
  transform-style: preserve-3d;
}

.dice-page .farkle-die__cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.dice-page .farkle-die--rolling {
  pointer-events: none;
}

.dice-page .farkle-die__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 18%;
  background: var(--color-base-100);
  border: 2px solid color-mix(in oklch, var(--color-base-content) 75%, transparent);
  box-shadow: inset 0 0 12px color-mix(in oklch, var(--color-base-content) 10%, transparent);
  backface-visibility: visible;
}

.dice-page .farkle-die__face--front { transform: translateZ(var(--farkle-die-depth)); }
.dice-page .farkle-die__face--back { transform: rotateY(180deg) translateZ(var(--farkle-die-depth)); }
.dice-page .farkle-die__face--right { transform: rotateY(90deg) translateZ(var(--farkle-die-depth)); }
.dice-page .farkle-die__face--left { transform: rotateY(-90deg) translateZ(var(--farkle-die-depth)); }
.dice-page .farkle-die__face--top { transform: rotateX(90deg) translateZ(var(--farkle-die-depth)); }
.dice-page .farkle-die__face--bottom { transform: rotateX(-90deg) translateZ(var(--farkle-die-depth)); }

.dice-page .farkle-die .dot {
  width: 0.65rem;
  height: 0.65rem;
  background: var(--color-base-content);
  border-radius: 50%;
  position: absolute;
}

.dice-page .face-value-1 .dot-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.dice-page .face-value-2 .dot-tl { top: 20%; left: 20%; }
.dice-page .face-value-2 .dot-br { bottom: 20%; right: 20%; }
.dice-page .face-value-3 .dot-tl { top: 20%; left: 20%; }
.dice-page .face-value-3 .dot-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.dice-page .face-value-3 .dot-br { bottom: 20%; right: 20%; }
.dice-page .face-value-4 .dot-tl { top: 20%; left: 20%; }
.dice-page .face-value-4 .dot-tr { top: 20%; right: 20%; }
.dice-page .face-value-4 .dot-bl { bottom: 20%; left: 20%; }
.dice-page .face-value-4 .dot-br { bottom: 20%; right: 20%; }
.dice-page .face-value-5 .dot-tl { top: 20%; left: 20%; }
.dice-page .face-value-5 .dot-tr { top: 20%; right: 20%; }
.dice-page .face-value-5 .dot-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.dice-page .face-value-5 .dot-bl { bottom: 20%; left: 20%; }
.dice-page .face-value-5 .dot-br { bottom: 20%; right: 20%; }
.dice-page .face-value-6 .dot-tl { top: 20%; left: 20%; }
.dice-page .face-value-6 .dot-tm { top: 20%; left: 50%; transform: translateX(-50%); }
.dice-page .face-value-6 .dot-tr { top: 20%; right: 20%; }
.dice-page .face-value-6 .dot-bl { bottom: 20%; left: 20%; }
.dice-page .face-value-6 .dot-bm { bottom: 20%; left: 50%; transform: translateX(-50%); }
.dice-page .face-value-6 .dot-br { bottom: 20%; right: 20%; }

.dice-page .farkle-die--large {
  --farkle-die-size: 150px;
}

@media (max-width: 768px) {
  .dice-page {
    --farkle-die-size: 70px;
  }
  .dice-page .farkle-die .dot {
    width: 0.5rem;
    height: 0.5rem;
  }
  .dice-page .farkle-die--large {
    --farkle-die-size: 100px;
  }
}