:root {
	--gold-dark: #ffab00;
	--gold-edge: #d48806;
}

.coin {
	width: 120px;
	height: 120px;
	background: var(--gold-dark);
	border-radius: 50%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;

	box-shadow:
		0 10px 0 var(--gold-edge),
		0 10px 15px rgba(0, 0, 0, 0.3);

	transform: rotateX(50deg);
	cursor: none;
}

.star {
	width: 60px;
	height: 60px;
	background: white;
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.star-point {
	position: absolute;
	width: var(--size);
	height: var(--size);
	background-color: #ffd700;
	clip-path: polygon(50% 5%, 64% 38%, 95% 45%, 72% 65%, 80% 95%, 50% 80%, 20% 95%, 28% 65%, 5% 45%, 36% 38%);
	top: 50%;
	left: 50%;

	transform-origin: center;
	margin-top: calc(var(--size) / -2);
	margin-left: calc(var(--size) / -2);

	animation: star-explode var(--duration, 1s) ease-out forwards;
}

@keyframes star-explode {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 1;
	}

	70% {
		transform: translate(var(--tx), var(--ty)) scale(1);
		opacity: 1;
	}

	100% {
		transform: translate(var(--tx), var(--ty)) scale(var(--final-scale));
		opacity: 0;
	}
}