Fill see-through corner gaps on rounded dice during rolls

[AdamTyler]

Summary

When dieCornerRadius is large, a rolling die would flash the page background through its 8 corners. A rounded die is a hollow CSS cube — each face carries border-radius, so the rounded-away corners of adjacent faces leave see-through gaps at the vertices while the die spins.

Fix

Render a solid inner core cube in faceColor while the die is mid-roll (new isRolling state). It sits strictly inside the shell silhouette, so it backs the gaps with the die's own color without ever poking past the faces. The fillers:

• Only render during a roll — at rest the die sits face-on and shows no gaps
• Are skipped when dieCornerRadius is 0 or would consume the whole die
• Are marked aria-hidden and carry no pips, so they're purely cosmetic

Notes / trade-off

An earlier iteration also added flat corner-cap discs at each vertex for pixel-perfect corners, but flat discs tilted along the cube diagonal produced visible artifacts (floating circles / a lumpy silhouette) at certain rotation angles. Those were dropped in favor of the core-only approach, which is geometrically robust. The remaining trade-off is that very small dark pinholes can appear right at the 8 vertices during fast spins — a deliberate, far-less-noticeable compromise.

Verification

• npm run build — passes
• npm test — 43/43 pass (includes tests for the core rendering only while rolling, sizing, and the skip conditions)
• ⚠️ Visually checked on the demo by the author; reviewers should confirm the roll looks clean in a browser.

🤖 Generated with Claude Code