.dice{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:22px;max-width:480px;min-height:200px;margin:0;padding:16px 0 0;list-style:none}.die{position:relative;display:grid;place-items:center;width:104px;height:104px;color:var(--pk-ink)}.die svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 0 var(--pk-ink))}.die polygon{fill:#fff;stroke:var(--pk-ink);stroke-width:5}.die-six{position:absolute;inset:4px;display:grid;grid-template:repeat(3,1fr) / repeat(3,1fr);place-items:center;padding:12px;border:4px solid var(--pk-ink);border-radius:22px;background:#fff;box-shadow:0 6px 0 var(--pk-ink)}.die-six i{width:17px;height:17px;border-radius:50%}.die-six i[data-on]{background:var(--pk-ink)}.die-value{position:relative;font-family:var(--pk-display);font-size:38px;font-weight:900;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.die-value[data-shape="4"]{padding-top:26px;font-size:30px}.die-value[data-shape="8"],.die-value[data-shape="10"]{font-size:32px}.die[data-idle]{transform:rotate(calc(var(--die-turn) * 6deg))}.die[data-idle] .die-value{color:var(--pk-cobalt)}.dice[data-rolling] .die{animation:die-tumble .76s cubic-bezier(.3,.7,.3,1.2) var(--die-delay) both}.dice:not([data-rolling]) .die:not([data-idle]){animation:die-settle .26s cubic-bezier(.34,1.56,.64,1) both}@keyframes die-tumble{0%{opacity:0;transform:translate(calc(var(--die-turn) * -40px),-150px) rotate(calc(var(--die-turn) * -300deg)) scale(.7)}20%{opacity:1}70%{transform:translate(calc(var(--die-turn) * 6px),8px) rotate(calc(var(--die-turn) * 12deg)) scale(1.04)}to{transform:none}}@keyframes die-settle{50%{transform:scale(1.08)}}@media(max-width:959px){.dice{gap:14px;min-height:0;padding-top:8px}.die{width:76px;height:76px}.die-six{padding:8px;border-width:3px;border-radius:16px}.die-six i{width:12px;height:12px}.die-value{font-size:28px}.die-value[data-shape="4"]{padding-top:18px;font-size:22px}}@media(prefers-reduced-motion:reduce){.dice[data-rolling] .die,.dice:not([data-rolling]) .die:not([data-idle]){animation:tk-fade .24s ease-out both}}
