:root {
	--star-size: 30px;
	--star-color: #706c5b;
	--star-background: #dea300;
}
/*.Stars {
	--percent: calc(var(--rating) / 5 * 100%);
	display: inline-block;
	font-size: var(--star-size);
	font-family: Times;
	line-height: 1;
	-webkit-text-stroke: 0.5px black;
	margin-top: 15px;
	margin-bottom: 25px;
}
.Stars::before {
	content: "★★★★★";
	letter-spacing: 3px;
	background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}*/
.Stars {
	--percent: calc(var(--rating) / 5 * 100%);
	display: inline-block;
	font-size: var(--star-size);
	font-family: Times;
	line-height: 1;
	/*-webkit-text-stroke: 0.5px black;*/
	margin-top: 15px;
	margin-bottom: 25px;
	position: relative; /* Ensures ::after is positioned relative to the stars */
	width: fit-content; /* Only takes up as much space as the stars */
}
.Stars::before {
	content: "★★★★★";
	letter-spacing: 3px;
	background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.Stars::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; /* Ensure ::after only covers the star area */
	height: 100%; /* Ensure ::after only covers the star area */
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--star-size);
	color: red; /* Skull color */
	opacity: 0; /* Default hidden */
	pointer-events: none; /* Prevent ::after from capturing mouse clicks */
}
.Stars[data-rating="0.0"]::after {
	content: "💀"; /* Skull icon */
	color: white;
	opacity: 1; /* Show only if rating is 0 */
}
.Stars-small {
	--percent: calc(var(--rating) / 5 * 100%);
	display: inline-block;
	font-size: var(--star-size);
	font-family: Times;
	line-height: 1;
	-webkit-text-stroke: 0.5px black;
	margin-top: 0px;
	margin-bottom: 0px;
	--star-size: 24px;
}
.Stars-small::before {
	content: "★★★★★";
	letter-spacing: 3px;
	background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}