.dice-tray{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:linear-gradient(180deg, hsl(var(--tray)) 0%, hsl(var(--tray)) 46%, hsl(var(--tray-floor)) 74%, hsl(var(--tray-floor)) 100%);height:clamp(230px,36dvh,320px);box-shadow:inset 0 2px 0 #ffffff0a, inset 0 -18px 40px hsl(var(--shade) / .22);border-radius:1.5rem;position:relative}.dice-tray--free{height:clamp(280px,46dvh,420px)}.dice-tray:focus-visible{outline:3px solid hsl(var(--gold));outline-offset:4px}.dice-layer{pointer-events:none;position:absolute;inset:0}.die-travel{width:var(--size);height:var(--size);margin-left:calc(var(--size) / -2);position:absolute;top:0;left:0}.die-shadow{left:6%;right:6%;bottom:calc(var(--size) * -.07);height:calc(var(--size) * .2);opacity:.55;background:radial-gradient(closest-side, hsl(var(--shade) / .85), transparent);border-radius:50%;position:absolute}.die-hop{transform-origin:50% 100%;position:absolute;inset:0}.die-persp{perspective:calc(var(--size) * 6);transform:scale(var(--scale,1));transform-origin:50% 100%;position:absolute;inset:0}.cube{transform-style:preserve-3d;position:absolute;inset:0}.core{background:hsl(var(--die-edge));backface-visibility:hidden;position:absolute;inset:5%}.face{backface-visibility:hidden;background:radial-gradient(circle at 30% 24%, #fff 0%, hsl(var(--die)) 46%, hsl(var(--die-edge)) 100%);box-shadow:inset 0 0 0 1px #0000000f, inset 0 calc(var(--size) * -.05) calc(var(--size) * .12) #0000001a;border-radius:19%;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:15%;display:grid;position:absolute;inset:0}.pip{aspect-ratio:1;background:radial-gradient(circle at 36% 30%, hsl(var(--pip) / .7), hsl(var(--pip)) 62%);border-radius:50%;width:76%;margin:auto;box-shadow:inset 0 1px 2px #0000008c}.pip--red{background:radial-gradient(circle at 36% 30%, hsl(var(--pip-red) / .65), hsl(var(--pip-red)) 64%);width:96%}.die-travel.is-win .face{box-shadow:inset 0 0 0 1px #0000000f, 0 0 0 3px hsl(var(--gold))}.dust{background:hsl(var(--muted-foreground));pointer-events:none;border-radius:50%;width:7px;height:7px;position:absolute}.dice-tray{isolation:isolate}.settings-open .dice-layer{visibility:hidden}@media (width<=639px){.dice-tray{height:clamp(180px,28dvh,280px)}.dice-tray--free{height:clamp(220px,36dvh,360px)}}@media (width<=639px) and (height<=700px){.dice-tray:not(.dice-tray--free){height:clamp(160px,25dvh,280px)}}