/* ========== DICE ANIMATION (sidebar mini) ========== */
.dice-anim-panel.rolling #diceAnimFace,
#diceAnimPanel.rolling #diceAnimFace {
    animation: mini-dice-shake 0.16s linear infinite;
}

@keyframes mini-dice-shake {
    0% { transform: rotate(-8deg) scale(0.97); }
    50% { transform: rotate(8deg) scale(1.05); }
    100% { transform: rotate(-8deg) scale(0.97); }
}

/* ========== 3D DICE FULLSCREEN OVERLAY ========== */
.dice-overlay {
    position: fixed; inset: 0; z-index: 100;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    overflow: hidden;
}

.dice-overlay.active { opacity: 1; pointer-events: auto; }

.dice-overlay-label {
    font-size: 18px; font-weight: 800;
    color: var(--text-primary); margin-bottom: 26px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.dice-overlay-result {
    font-size: 0;
    color: var(--accent);
    font-weight: 900;
    margin-top: 24px;
    opacity: 0;
    transition: all 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.dice-overlay-result.show {
    font-size: 32px;
    opacity: 1;
}

.dice-scene {
    width: 140px;
    height: 140px;
    perspective: 560px;
    position: relative;
    z-index: 1;
}

.dice-shadow {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 76px;
    height: 18px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    transform: translateX(-50%) scale(1);
    filter: blur(1.5px);
}

.dice-flash {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid rgba(79, 70, 229, 0.6);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    pointer-events: none;
}

.dice-flash.impact {
    animation: flash-ring 0.48s ease-out;
}

@keyframes flash-ring {
    0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(5.6); }
}

.dice-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.32s cubic-bezier(0.2, 0.85, 0.25, 1);
    will-change: transform;
}

.dice-cube.rolling {
    animation: dice-tumble 1.18s cubic-bezier(0.12, 0.7, 0.2, 1);
    transition: none;
}

.dice-overlay.active .dice-shadow {
    animation: shadow-breathe 0.28s ease-in-out infinite;
}

@keyframes shadow-breathe {
    0% { transform: translateX(-50%) scale(0.86); opacity: 0.3; }
    50% { transform: translateX(-50%) scale(1.12); opacity: 0.5; }
    100% { transform: translateX(-50%) scale(0.86); opacity: 0.3; }
}

@keyframes dice-tumble {
    0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    14%  { transform: rotateX(300deg) rotateY(180deg) rotateZ(70deg); }
    30%  { transform: rotateX(620deg) rotateY(390deg) rotateZ(-55deg); }
    48%  { transform: rotateX(930deg) rotateY(620deg) rotateZ(120deg); }
    68%  { transform: rotateX(1220deg) rotateY(910deg) rotateZ(-40deg); }
    84%  { transform: rotateX(1460deg) rotateY(1170deg) rotateZ(38deg); }
    100% { transform: rotateX(1620deg) rotateY(1440deg) rotateZ(0deg); }
}

.dice-face {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    display: grid;
    padding: 20px;
    box-sizing: border-box;
}

.dice-face .dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #4F46E5, #312E81);
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.15);
}

.face-1 { transform: rotateY(0deg) translateZ(70px); grid-template: 1fr / 1fr; place-items: center; }
.face-1 .dot { width: 34px; height: 34px; }

.face-2 { transform: rotateY(180deg) translateZ(70px); grid-template: 1fr 1fr / 1fr; }
.face-2 .dot:first-child { justify-self: end; align-self: start; }
.face-2 .dot:last-child  { justify-self: start; align-self: end; }

.face-3 { transform: rotateY(-90deg) translateZ(70px); grid-template: 1fr 1fr 1fr / 1fr; }
.face-3 .dot:nth-child(1) { justify-self: end; align-self: start; }
.face-3 .dot:nth-child(2) { justify-self: center; align-self: center; }
.face-3 .dot:nth-child(3) { justify-self: start; align-self: end; }

.face-4 { transform: rotateY(90deg) translateZ(70px); grid-template: 1fr 1fr / 1fr 1fr; place-items: center; }

.face-5 { transform: rotateX(90deg) translateZ(70px); grid-template: 1fr 1fr 1fr / 1fr 1fr; }
.face-5 .dot:nth-child(1) { grid-area: 1/1; align-self: start; justify-self: start; }
.face-5 .dot:nth-child(2) { grid-area: 1/2; align-self: start; justify-self: end; }
.face-5 .dot:nth-child(3) { grid-area: 2/1/2/3; align-self: center; justify-self: center; }
.face-5 .dot:nth-child(4) { grid-area: 3/1; align-self: end; justify-self: start; }
.face-5 .dot:nth-child(5) { grid-area: 3/2; align-self: end; justify-self: end; }

.face-6 { transform: rotateX(-90deg) translateZ(70px); grid-template: 1fr 1fr 1fr / 1fr 1fr; place-items: center; }