.die-view{width:var(--die-size);height:var(--die-size);flex:none;display:inline-block;position:relative}.die-view__sprite,.die-view__natural{position:absolute;inset:0}.die-view__sprite{background-repeat:no-repeat;background-size:calc(var(--die-size) * var(--die-cells)) var(--die-size);background-position:calc(var(--die-size) * var(--die-rest) * -1) 0}.die-view.is-rolling{animation:.3s steps(3,end) infinite alternate die-hop}.die-view.is-rolling .die-view__sprite{animation:.6s steps(8,end) infinite die-tumble}@keyframes die-tumble{0%{background-position:0 0}to{background-position:calc(var(--die-size) * var(--die-frames) * -1) 0}}@keyframes die-hop{0%{transform:translateY(0)}to{transform:translateY(calc(var(--die-size) * -.16))}}.die-view:not(.is-rolling){animation:.16s steps(2,end) die-land}@keyframes die-land{0%{transform:scale(1.12,.88)}}.die-view__value{left:var(--die-label-x);top:var(--die-label-y);color:var(--c-parchment-3);text-shadow:2px 2px 0 var(--ink);white-space:nowrap;pointer-events:none;line-height:1;position:absolute;transform:translate(-50%,-50%)}.die-view.is-dropped{opacity:.45;filter:grayscale(.7)}@media (prefers-reduced-motion:reduce){.die-view,.die-view.is-rolling,.die-view.is-rolling .die-view__sprite{animation:none}}.die-view__value.is-big{font-size:var(--font-pixel-md);text-shadow:3px 3px 0 var(--ink)}