.dice-button{background:transparent;border:none;padding:0;margin:0;outline:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:opacity .2s;-webkit-tap-highlight-color:transparent}.dice-button:disabled{opacity:.55;cursor:not-allowed}.dice-button:active:not(:disabled) .dice-wrapper{transform:scale(.92)}.dice-scene{width:96px;height:96px;perspective:500px;perspective-origin:50% 40%;position:relative;display:flex;align-items:center;justify-content:center}.dice-base-shadow{position:absolute;width:52px;height:14px;background:rgba(0,0,0,.6);border-radius:50%;bottom:4px;left:50%;transform:translateX(-50%);filter:blur(6px);transition:all .25s ease-out;pointer-events:none}.dice-wrapper{position:relative;transition:transform .15s ease-out}.dice-cube,.dice-wrapper{width:70px;height:70px;transform-style:preserve-3d}.dice-cube{position:absolute;transition:transform 1.8s cubic-bezier(.18,.89,.32,1.12)}.dice-cube.rolling{animation:diceSpin .35s linear infinite}@keyframes diceSpin{0%{transform:rotateX(0deg) rotateY(0deg) rotate(0deg)}to{transform:rotateX(1turn) rotateY(1turn) rotate(180deg)}}.dice-scene.rolling .dice-base-shadow{opacity:.15;transform:translateX(-50%) scaleX(.5);animation:shadowRoll .35s ease-in-out infinite alternate}@keyframes shadowRoll{0%{opacity:.1;transform:translateX(-50%) scaleX(.4)}to{opacity:.25;transform:translateX(-50%) scaleX(.65)}}.dice-scene.bounce .dice-wrapper{animation:diceBounce .5s cubic-bezier(.22,1.4,.36,1)}.dice-scene.bounce .dice-base-shadow{animation:shadowImpact .5s ease-out}@keyframes diceBounce{0%{transform:translateY(-18px)}45%{transform:translateY(0) scaleY(.88) scaleX(1.1)}70%{transform:translateY(-6px)}90%{transform:translateY(0) scaleY(.98)}to{transform:translateY(0) scale(1)}}@keyframes shadowImpact{0%{opacity:.15;transform:translateX(-50%) scaleX(.5)}45%{opacity:.7;transform:translateX(-50%) scaleX(1.25)}to{opacity:.55;transform:translateX(-50%) scaleX(1)}}.dice-face{position:absolute;width:70px;height:70px;border-radius:13px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;backface-visibility:hidden;background:linear-gradient(145deg,#f5f0e8,#e8e0d0 50%,#d4c8b4);border:none;box-shadow:inset 0 1px 3px rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.35)}.dice-face--front{transform:translateZ(35px)}.dice-face--back{transform:rotateY(180deg) translateZ(35px)}.dice-face--right{transform:rotateY(90deg) translateZ(35px)}.dice-face--left{transform:rotateY(-90deg) translateZ(35px)}.dice-face--top{transform:rotateX(90deg) translateZ(35px)}.dice-face--bottom{transform:rotateX(-90deg) translateZ(35px)}.dice-button:hover:not(:disabled) .dice-face{box-shadow:inset 0 1px 3px rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,0,0,.18),0 0 18px rgba(243,124,32,.55),0 2px 8px rgba(0,0,0,.35)}.dots-grid{display:grid;width:52px;height:52px;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.dice-dot{width:10px;height:10px;border-radius:50%;justify-self:center;align-self:center;background:radial-gradient(circle at 35% 30%,#ff6b4a 0,#c0392b 50%,#7b1e10 100%);box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 1px 3px rgba(0,0,0,.5),0 0 4px rgba(192,57,43,.3)}.dice-dot--lg{width:14px;height:14px}.dot-c{grid-column:2;grid-row:2}.dot-tr{grid-column:3;grid-row:1}.dot-bl{grid-column:1;grid-row:3}.dot-tl{grid-column:1;grid-row:1}.dot-br{grid-column:3;grid-row:3}.dot-ml{grid-column:1;grid-row:2}.dot-mr{grid-column:3;grid-row:2}