.dice-tray{max-width:520px;height:310px;margin:34px auto 18px;border:6px solid #382318;border-radius:32px;background:radial-gradient(ellipse,#18503f,#0b2d24 67%);box-shadow:inset 0 0 60px #0008,0 25px 50px #0005;display:grid;place-items:center;overflow:hidden}
.dice-tray .dice-stage{display:flex;justify-content:center;align-items:center;gap:42px;width:100%;min-height:180px;margin:0;perspective:800px}
.dice-tray .die{--size:128px;--half:64px;width:var(--size);height:var(--size);position:relative;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(10deg);transition:transform .25s;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.dice-tray .die.rolling{animation:diceThrow var(--duration,1s) cubic-bezier(.16,.72,.2,1) var(--delay,0s) both!important}
.die-face{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:20px;gap:6px;border-radius:16px;overflow:hidden;backface-visibility:hidden;background:linear-gradient(145deg,#fffdf1,#e8dfc5);border:1px solid #cfc5a9;box-shadow:inset -9px -9px 15px #9b927044,3px 7px 14px #0008}
.die-face.front{transform:translateZ(var(--half))}.die-face.back{transform:rotateY(180deg) translateZ(var(--half))}.die-face.right{transform:rotateY(90deg) translateZ(var(--half))}.die-face.left{transform:rotateY(-90deg) translateZ(var(--half))}.die-face.top{transform:rotateX(90deg) translateZ(var(--half))}.die-face.bottom{transform:rotateX(-90deg) translateZ(var(--half))}
.die-face .pip{width:21px;height:21px;align-self:center;justify-self:center;border-radius:50%;background:radial-gradient(circle at 38% 32%,#444 0 16%,#111 58%,#000 100%);box-shadow:inset 2px 3px 4px #000,0 2px 1px #fff}
.die-face[data-face="1"] .pip,.die-face[data-face="5"] .pip:nth-child(3){background:radial-gradient(circle at 38% 32%,#ee514b 0 16%,#b71822 58%,#65060c 100%)}
@keyframes diceThrow{0%{transform:translate3d(calc(0px - var(--drift)),-125px,20px) rotateX(0) rotateY(0) rotateZ(-18deg)}36%{transform:translate3d(var(--drift),5px,0) rotateX(calc(var(--spin-x) - 360deg)) rotateY(calc(var(--spin-y) - 420deg)) rotateZ(65deg)}53%{transform:translate3d(calc(var(--drift) - 12px),-26px,0) rotateX(calc(var(--spin-x) - 240deg)) rotateY(calc(var(--spin-y) - 280deg)) rotateZ(38deg)}70%{transform:translate3d(calc(var(--drift) - 25px),2px,0) rotateX(calc(var(--spin-x) - 120deg)) rotateY(calc(var(--spin-y) - 130deg)) rotateZ(13deg)}82%{transform:translate3d(8px,-8px,0) rotateX(calc(var(--spin-x) - 30deg)) rotateY(calc(var(--spin-y) - 45deg)) rotateZ(5deg)}100%{transform:translate3d(0,0,0) rotateX(calc(var(--spin-x) - 8deg)) rotateY(calc(var(--spin-y) + 10deg)) rotateZ(0)}}
body.reduce-motion .die.rolling{animation:reveal .12s ease both!important}
@media(max-width:600px){.dice-tray{height:245px;border-width:5px}.dice-tray .dice-stage{gap:26px;min-height:140px}.dice-tray .die{--size:94px;--half:47px}.die-face{padding:14px;border-radius:12px}.die-face .pip{width:16px;height:16px}}