#diceFloat { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; z-index: 30; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; pointer-events: auto; }
.dice-scrim { position: absolute; inset: 0; background: rgba(32,27,19,.5); }
.dice-panel { position: relative; width: min(340px,calc(100% - 28px)); padding: 22px; border: 2px solid var(--card-border); border-radius: 20px; color: var(--card-ink); background: var(--card-surface); box-shadow: var(--card-shadow); display: flex; align-items: center; flex-direction: column; gap: 16px; text-align: center; }
.dice-person { display: flex; align-items: center; gap: 12px; font-size: 21px; }
.dice-portrait { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; overflow: hidden; border: 2px solid var(--pc); border-radius: 50%; background: var(--card-raised); }
.dice-portrait img { width: 100%; height: 100%; object-fit: cover; }
.dice-scene { --die-size: 96px; --die-half: 48px; width: var(--die-size); height: var(--die-size); margin: 22px; perspective: 600px; }
.dice-cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateX(var(--die-x)) rotateY(var(--die-y)); }
.dice-face { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap: 5px; padding: 13px; border: 2px solid #a38d60; border-radius: 12px; background: #fff9e9; box-shadow: inset 0 0 12px rgba(95,67,20,.14); backface-visibility: hidden; }
.dice-face[data-face="1"] { transform: translateZ(var(--die-half)); }
.dice-face[data-face="2"] { transform: rotateY(90deg) translateZ(var(--die-half)); }
.dice-face[data-face="3"] { transform: rotateY(180deg) translateZ(var(--die-half)); }
.dice-face[data-face="4"] { transform: rotateY(-90deg) translateZ(var(--die-half)); }
.dice-face[data-face="5"] { transform: rotateX(90deg) translateZ(var(--die-half)); }
.dice-face[data-face="6"] { transform: rotateX(-90deg) translateZ(var(--die-half)); }
.dice-pip { visibility: hidden; border-radius: 50%; background: #433723; }
.dice-pip.on { visibility: visible; }
.dice-face[data-face="1"] .dice-pip { background: #a33928; }
.dice-cube.tumbling { animation: diceTumble var(--die-roll-ms) cubic-bezier(.15,.6,.3,1) both; }
@keyframes diceTumble { from { transform: rotateX(calc(var(--die-x) - 540deg)) rotateY(calc(var(--die-y) + 540deg)); } to { transform: rotateX(var(--die-x)) rotateY(var(--die-y)); } }
.dice-result { font-size: 34px; line-height: 1.25; font-weight: bold; color: var(--card-action); }
.dice-hint { font-size: 18px; color: var(--card-muted); }
@media (prefers-reduced-motion: reduce) { .dice-cube.tumbling { animation: none; } }