.mmf-die {
    --die-size: 72px;
    --pip-size: 11px;
    --pip-offset: 14px;
    width: var(--die-size);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    border: 2px solid #0f5f2f;
    background: linear-gradient(145deg, #34b86a, #1d8c49);
    box-shadow:
        0 10px 18px rgba(15, 65, 34, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(10, 55, 26, 0.22);
    position: relative;
    transform-style: preserve-3d;
    display: block;
}

.mmf-die.mmf-die-sm {
    --die-size: 56px;
    --pip-size: 8px;
    --pip-offset: 10px;
}

.mmf-die.mmf-die-md {
    --die-size: 72px;
    --pip-size: 11px;
    --pip-offset: 14px;
}

.mmf-die.mmf-die-lg {
    --die-size: 88px;
    --pip-size: 13px;
    --pip-offset: 16px;
}

.mmf-die-3d {
    --die-size: 72px;
    --pip-size: 11px;
    --pip-offset: 14px;
    --cube-depth: calc(var(--die-size) / 2);
    width: var(--die-size);
    height: var(--die-size);
    position: relative;
    perspective: 720px;
    margin: 0 auto;
}

.mmf-die-3d.mmf-die-sm {
    --die-size: 56px;
    --pip-size: 8px;
    --pip-offset: 10px;
}

.mmf-die-3d.mmf-die-md {
    --die-size: 72px;
    --pip-size: 11px;
    --pip-offset: 14px;
}

.mmf-die-3d.mmf-die-lg {
    --die-size: 88px;
    --pip-size: 13px;
    --pip-offset: 16px;
}

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

.mmf-cube.is-rolling {
    animation: mmfDiceCubeTumble 990ms cubic-bezier(0.24, 0.7, 0.28, 1) infinite;
    will-change: transform;
}

.mmf-cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    border: 2px solid #0f5f2f;
    background: linear-gradient(145deg, #32b568, #1d8b49);
    box-shadow:
        0 11px 18px rgba(15, 65, 34, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(10, 55, 26, 0.22);
}

.mmf-face-front { transform: translateZ(var(--cube-depth)); }
.mmf-face-back { transform: rotateY(180deg) translateZ(var(--cube-depth)); }
.mmf-face-right { transform: rotateY(90deg) translateZ(var(--cube-depth)); }
.mmf-face-left { transform: rotateY(-90deg) translateZ(var(--cube-depth)); }
.mmf-face-top { transform: rotateX(90deg) translateZ(var(--cube-depth)); }
.mmf-face-bottom { transform: rotateX(-90deg) translateZ(var(--cube-depth)); }

.mmf-cube-face .pip {
    position: absolute;
    width: var(--pip-size);
    height: var(--pip-size);
    border-radius: 50%;
    background: #ffffff;
    opacity: 0;
    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        0 0 1px rgba(255, 255, 255, 0.5);
}

.mmf-cube-face .pip.tl { top: var(--pip-offset); left: var(--pip-offset); }
.mmf-cube-face .pip.tr { top: var(--pip-offset); right: var(--pip-offset); }
.mmf-cube-face .pip.ml { top: 50%; left: var(--pip-offset); transform: translateY(-50%); }
.mmf-cube-face .pip.mr { top: 50%; right: var(--pip-offset); transform: translateY(-50%); }
.mmf-cube-face .pip.bl { bottom: var(--pip-offset); left: var(--pip-offset); }
.mmf-cube-face .pip.br { bottom: var(--pip-offset); right: var(--pip-offset); }
.mmf-cube-face .pip.c { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.mmf-cube-face[data-face="1"] .pip.c { opacity: 1; }
.mmf-cube-face[data-face="2"] .pip.tl,
.mmf-cube-face[data-face="2"] .pip.br { opacity: 1; }
.mmf-cube-face[data-face="3"] .pip.tl,
.mmf-cube-face[data-face="3"] .pip.c,
.mmf-cube-face[data-face="3"] .pip.br { opacity: 1; }
.mmf-cube-face[data-face="4"] .pip.tl,
.mmf-cube-face[data-face="4"] .pip.tr,
.mmf-cube-face[data-face="4"] .pip.bl,
.mmf-cube-face[data-face="4"] .pip.br { opacity: 1; }
.mmf-cube-face[data-face="5"] .pip.tl,
.mmf-cube-face[data-face="5"] .pip.tr,
.mmf-cube-face[data-face="5"] .pip.bl,
.mmf-cube-face[data-face="5"] .pip.br,
.mmf-cube-face[data-face="5"] .pip.c { opacity: 1; }
.mmf-cube-face[data-face="6"] .pip.tl,
.mmf-cube-face[data-face="6"] .pip.ml,
.mmf-cube-face[data-face="6"] .pip.bl,
.mmf-cube-face[data-face="6"] .pip.tr,
.mmf-cube-face[data-face="6"] .pip.mr,
.mmf-cube-face[data-face="6"] .pip.br { opacity: 1; }

.mmf-die .pip {
    position: absolute;
    width: var(--pip-size);
    height: var(--pip-size);
    border-radius: 50%;
    background: #ffffff;
    opacity: 0;
    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        0 0 1px rgba(255, 255, 255, 0.5);
}

.mmf-die .pip.tl { top: var(--pip-offset); left: var(--pip-offset); }
.mmf-die .pip.tr { top: var(--pip-offset); right: var(--pip-offset); }
.mmf-die .pip.ml { top: 50%; left: var(--pip-offset); transform: translateY(-50%); }
.mmf-die .pip.mr { top: 50%; right: var(--pip-offset); transform: translateY(-50%); }
.mmf-die .pip.bl { bottom: var(--pip-offset); left: var(--pip-offset); }
.mmf-die .pip.br { bottom: var(--pip-offset); right: var(--pip-offset); }
.mmf-die .pip.c { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.mmf-die[data-value="1"] .pip.c { opacity: 1; }
.mmf-die[data-value="2"] .pip.tl,
.mmf-die[data-value="2"] .pip.br { opacity: 1; }
.mmf-die[data-value="3"] .pip.tl,
.mmf-die[data-value="3"] .pip.c,
.mmf-die[data-value="3"] .pip.br { opacity: 1; }
.mmf-die[data-value="4"] .pip.tl,
.mmf-die[data-value="4"] .pip.tr,
.mmf-die[data-value="4"] .pip.bl,
.mmf-die[data-value="4"] .pip.br { opacity: 1; }
.mmf-die[data-value="5"] .pip.tl,
.mmf-die[data-value="5"] .pip.tr,
.mmf-die[data-value="5"] .pip.bl,
.mmf-die[data-value="5"] .pip.br,
.mmf-die[data-value="5"] .pip.c { opacity: 1; }
.mmf-die[data-value="6"] .pip.tl,
.mmf-die[data-value="6"] .pip.ml,
.mmf-die[data-value="6"] .pip.bl,
.mmf-die[data-value="6"] .pip.tr,
.mmf-die[data-value="6"] .pip.mr,
.mmf-die[data-value="6"] .pip.br { opacity: 1; }

.mmf-die.is-rolling {
    animation: mmfDiceTumble 860ms linear infinite;
    will-change: transform;
}

@keyframes mmfDiceTumble {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    20% { transform: rotateX(120deg) rotateY(80deg) rotateZ(110deg); }
    40% { transform: rotateX(240deg) rotateY(160deg) rotateZ(220deg); }
    60% { transform: rotateX(360deg) rotateY(250deg) rotateZ(330deg); }
    80% { transform: rotateX(500deg) rotateY(340deg) rotateZ(440deg); }
    100% { transform: rotateX(640deg) rotateY(460deg) rotateZ(540deg); }
}

@keyframes mmfDiceCubeTumble {
    0% { transform: rotateX(12deg) rotateY(10deg) rotateZ(0deg) translateY(0); }
    25% { transform: rotateX(140deg) rotateY(110deg) rotateZ(70deg) translateY(-2px); }
    50% { transform: rotateX(280deg) rotateY(220deg) rotateZ(145deg) translateY(0); }
    75% { transform: rotateX(410deg) rotateY(320deg) rotateZ(220deg) translateY(2px); }
    100% { transform: rotateX(540deg) rotateY(430deg) rotateZ(300deg) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .mmf-die.is-rolling {
        animation: none;
    }
    .mmf-cube.is-rolling {
        animation: none;
    }
}