.roll-overlay[hidden]{display:none!important}
.roll-overlay{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,#252525 0,#111 48%,#050505 100%);}
.roll-overlay-dice{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,20px);width:min(900px,100%);padding:24px;flex-wrap:wrap;animation:roll-overlay-shake .14s linear infinite alternate;}
.roll-overlay-dice .die{width:clamp(64px,11vw,112px);height:clamp(64px,11vw,112px);flex:0 0 auto;border:6px solid #fff;border-radius:16px;background:#f1f1f1!important;box-shadow:inset 0 -6px 0 #d5d5d5,0 5px 0 #888,0 12px 24px #000b;}
.roll-overlay-dice .die::after{width:17px;height:17px;background:#fff!important;box-shadow:0 1px 3px #777,0 0 0 2px #dedede;}
.roll-overlay-dice .overlay-shaking-die{animation:roll-overlay-die .22s ease-in-out infinite alternate;animation-delay:var(--delay,0ms);}
@keyframes roll-overlay-shake{from{transform:translate(-5px,-2px) rotate(-.7deg)}to{transform:translate(5px,2px) rotate(.7deg)}}
@keyframes roll-overlay-die{from{transform:translateY(-9px) rotate(-8deg)}to{transform:translateY(7px) rotate(8deg)}}
@media(max-width:600px){.roll-overlay-dice{gap:8px;padding:16px}.roll-overlay-dice .die{width:clamp(56px,17vw,84px);height:clamp(56px,17vw,84px);border-width:5px}.roll-overlay-dice .die::after{width:14px;height:14px}}
@media(prefers-reduced-motion:reduce){.roll-overlay-dice,.roll-overlay-dice .overlay-shaking-die{animation-duration:.5s}}