body
{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

*
{
	box-sizing: border-box;
}

#score-board
{
	display: flex;
	background: steelblue;
}

.ps-all
{
	padding: 1rem;
	font-size: 2rem;
	border: 1px solid sandybrown;
}

#angle
{
	background: steelblue;
}

.tirays
{
	display: flex;
	justify-content: center;
}

.players
{
	display: flex;
	div {
		width: 25%;
		background: slategray;
		text-align: center;
		padding: 1rem 0rem;
		border: 1px solid black;
	}
}

button{
	font-size: 2rem;
}

.sphere
{
	aspect-ratio: 1;
	width: 20%;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
	box-shadow:
	inset -0.2rem -0.2rem 0.6rem rgba(255, 255, 255, 0.2),
	inset 0.2rem 0.2rem 0.6rem rgba(0, 0, 0, 0.4),
	0 0.1rem 0.3rem rgba(0, 0, 0, 0.5);

	font-size: 2.5rem;

/* border-radius: 50% → turns the square div into a circle. */
/* radial-gradient → simulates light hitting the sphere like a diffuse highlight. */
/* box-shadow → adds depth with highlights and shadows. */
/* inset shadows → simulate inner reflections/lights on the surface. */

}




.SolidYellow	{background: radial-gradient(circle at 30% 30%, #ffffff, #FFEA00 40%, #2c3e50 100%);}
.SolidBlue		{background: radial-gradient(circle at 30% 30%, #ffffff, #0000FF 40%, #2c3e50 100%);}
.SolidRed		{background: radial-gradient(circle at 30% 30%, #ffffff, #FF0000 40%, #2c3e50 100%);}
.SolidPurple	{background: radial-gradient(circle at 30% 30%, #ffffff, #800080 40%, #2c3e50 100%);}
.SolidOrange	{background: radial-gradient(circle at 30% 30%, #ffffff, #FFA500 40%, #2c3e50 100%);}
.SolidGreen		{background: radial-gradient(circle at 30% 30%, #ffffff, #008000 40%, #2c3e50 100%);}
.SolidMaroon	{background: radial-gradient(circle at 30% 30%, #ffffff, #800000 40%, #2c3e50 100%);}
.BlackBall8		{background: radial-gradient(circle at 30% 30%, #ffffff, #000000 40%, #2c3e50 100%);}
.StripeYellow	{background: radial-gradient(circle at 30% 30%, #ffffff, #FFEA00 40%, #2c3e50 100%);}
.StripeBlue		{background: radial-gradient(circle at 30% 30%, #ffffff, #0000FF 40%, #2c3e50 100%);}
.StripeRed		{background: radial-gradient(circle at 30% 30%, #ffffff, #FF0000 40%, #2c3e50 100%);}
.StripePurple	{background: radial-gradient(circle at 30% 30%, #ffffff, #800080 40%, #2c3e50 100%);}
.StripeOrange	{background: radial-gradient(circle at 30% 30%, #ffffff, #FFA500 40%, #2c3e50 100%);}
.StripeGreen	{background: radial-gradient(circle at 30% 30%, #ffffff, #008000 40%, #2c3e50 100%);}
.StripeMaroon	{background: radial-gradient(circle at 30% 30%, #ffffff, #800000 40%, #2c3e50 100%);}