/* The button is an accessible hit area; six transformed planes form each die. */
.dice-tray{gap:14px;margin-top:46px;max-width:570px}
.die-wrap{container-type:inline-size;--edge:70cqw}
.die,.die.held{position:relative;display:block;padding:0;border:0;background:none;box-shadow:none;border-radius:12px;transform:none;perspective:650px;overflow:visible;isolation:auto;filter:none;transition:none;touch-action:manipulation}
.die:hover:not(:disabled),.die.held:hover:not(:disabled){transform:none;filter:none}
.die-shadow{position:absolute;width:83%;height:26%;left:9%;bottom:-2%;border-radius:50%;background:#4e376b;filter:blur(5px);opacity:.28;pointer-events:none;transform-origin:center}
.die-lift{position:absolute;width:var(--edge);height:var(--edge);left:15%;top:15%;display:block;transform-style:preserve-3d;transition:translate .18s;pointer-events:none}
.die-view,.die-cube{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.die-view{transform:rotateX(-60deg) rotateY(-25deg)}
.die-face{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:8%;padding:18%;backface-visibility:hidden;border:1px solid #ded3c3;border-radius:7%;background:linear-gradient(140deg,#fffcf3 0%,#f4eddf 85%);box-shadow:inset 0 0 0 1px #ffffff99,inset -3px -3px 8px #bba98d25}
.die-face{background:linear-gradient(140deg,#e7ddcd,#d5c7b5)}
.die-face.is-top{background:linear-gradient(140deg,#fffdf6,#fbf5e8);border-color:#e9decc;box-shadow:inset 0 0 0 1px #fff,inset -2px -2px 6px #dacbb222}
.die .die-face .pip{display:block;position:relative;border-radius:50%;width:100%;height:100%;background:radial-gradient(circle at 65% 75%,#49465d,#282637 75%);box-shadow:inset 1px 2px 2px #15132088,0 1px 0 #fff9;visibility:hidden}
.die .die-face .pip.on{visibility:visible}
.die.held .die-face{background:linear-gradient(140deg,#6254ed,#4031b7);border-color:#3a2b9e;box-shadow:inset 0 0 0 1px #9b90ff55,inset -3px -3px 8px #20136744}
.die.held .die-face{background:linear-gradient(140deg,#4838bd,#2e2385)}
.die.held .die-face.is-top{background:linear-gradient(140deg,#7162f6,#5140d7);border-color:#9c8fff}
.die.held .die-face .pip{background:#fff8e9;box-shadow:inset 0 1px 2px #9f94cd,0 1px 0 #fff6}
.die:not(:disabled):hover .die-face.is-top{border-color:#a99bc5}
.die-label{height:24px;padding-top:14px}
.hold-instruction{margin-top:20px}
@media(max-width:600px){.dice-tray{grid-template-columns:repeat(3,minmax(0,1fr));max-width:300px;gap:16px 18px;margin-top:33px}.die-wrap{--edge:68cqw}.die-lift{left:16%;top:16%}.die-label{padding-top:12px}.table{overflow:visible}.table-doodle{display:none}}
@media(max-width:360px){.site-header{gap:7px}.brand{font-size:15px;gap:4px}.brand-die{font-size:24px}nav{gap:9px}.outline-button{gap:3px;padding:7px}.roll-button{min-width:0;width:100%;gap:12px}.round{font-size:8px;letter-spacing:.5px}.table-heading h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.die-lift{transition:none}.die:not(:disabled):hover .die-lift{translate:0 0}}