/* dice */
.dicerow { display:flex; gap:clamp(10px, 3vw, 24px); justify-content:center; padding:14px 0 18px; flex-wrap:wrap; }
.scene { --s:clamp(64px, 20vw, 96px); width:var(--s); height:var(--s); perspective:520px; }
.die3d { width:100%; height:100%; position:relative; transform-style:preserve-3d; }
.face3d { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:16%; background:linear-gradient(145deg,#fffdf4,#e9e2cc); border:2px solid #c9bf9e; backface-visibility:hidden; }
.face3d.front { transform:translateZ(calc(var(--s) / 2)); } .face3d.back { transform:rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.face3d.right { transform:rotateY(90deg) translateZ(calc(var(--s) / 2)); } .face3d.left { transform:rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.face3d.top { transform:rotateX(90deg) translateZ(calc(var(--s) / 2)); } .face3d.bottom { transform:rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.pips { width:70%; height:70%; display:grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); } .pips i { width:70%; height:70%; border-radius:50%; background:#1a1a1a; place-self:center; }
.pips.p1 i { grid-area:2/2; } .pips.p2 i:nth-child(1) { grid-area:1/1; } .pips.p2 i:nth-child(2) { grid-area:3/3; }
.pips.p3 i:nth-child(1) { grid-area:1/1; } .pips.p3 i:nth-child(2) { grid-area:2/2; } .pips.p3 i:nth-child(3) { grid-area:3/3; }
.pips.p4 i:nth-child(1) { grid-area:1/1; } .pips.p4 i:nth-child(2) { grid-area:1/3; } .pips.p4 i:nth-child(3) { grid-area:3/1; } .pips.p4 i:nth-child(4) { grid-area:3/3; }
.pips.p5 i:nth-child(1) { grid-area:1/1; } .pips.p5 i:nth-child(2) { grid-area:1/3; } .pips.p5 i:nth-child(3) { grid-area:2/2; } .pips.p5 i:nth-child(4) { grid-area:3/1; } .pips.p5 i:nth-child(5) { grid-area:3/3; }
.pips.p6 i:nth-child(1) { grid-area:1/1; } .pips.p6 i:nth-child(2) { grid-area:2/1; } .pips.p6 i:nth-child(3) { grid-area:3/1; } .pips.p6 i:nth-child(4) { grid-area:1/3; } .pips.p6 i:nth-child(5) { grid-area:2/3; } .pips.p6 i:nth-child(6) { grid-area:3/3; }