I genuinely believe that Fraud Squad gonna reduce my hours on this project 😭 Heres Why: I spend an hour creating dice . While I know how to create dice under NORMAL circumstance (create a box and put pips in them), these are not normal circumstances, because I will need to manipulate their values. The rightmost die might be a 3 this turn, but in a minute it could become a 5, and I need to adjust for that. Therefore, I need CSS, and if you’ve seen my ChessOS project, you know that CSS and me are no bueno for the most part. Dont understand it at all for the most part, and definitely not incorporating multiple CSS into one element.

1st Attempt

I tried styling the base box, a dice pip and putting multiple pips in a dice, I got this far:
.dice{stuff} .dicepip{stuff} .dice1{ .dice .dicepip}
Shocker, CSS doesn’t work that way

2nd Attempt

On the main div that’ll display dice, I need to just put multiple classes in, and create a second div that contains the dicepip div
<div class="dice dice1 dice2> <div class="dicepip">
That worked for die #1, so I thought, lets do it for the other 6, cus monkey see monkey do . That resulted in one pip per dice in one of the correct spots, because as Gemini told me, It can only include 1 pip. So theres some time over there

3rd Attempt

So AI directed me over to multiple background images, with positioning, with code radial-gradiant... then background-positioning and I only got a singular centre pip for all dice no matter if the code had more than 1 (image to show this) The answer to this one is that radial-gradient naturally wants to take up all the space so only one can fit in.

4th Attempt

radial-gradient(circle at 15% 15%, black 12px, transparent 13px), For all the pips in die, and now it works!!! works, and I can manipulate which dies get which value, which will be hopefully smooth sailing in that aspect