.spin-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.spin-modal.active { display: flex; }
.spin-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
}
.spin-modal-card {
	position: relative;
	width: 100%;
	max-width: 480px;
	background: linear-gradient(180deg, #fff 0%, #fff7ef 100%);
	border-radius: 24px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
	padding: 34px 26px 28px;
	text-align: center;
	overflow: hidden;
	animation: spinModalIn 0.45s ease;
}
@keyframes spinModalIn {
	from { transform: scale(0.6) translateY(40px); opacity: 0; }
	to { transform: scale(1) translateY(0); opacity: 1; }
}
.spin-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 36px;
	height: 36px;
	line-height: 34px;
	border-radius: 50%;
	border: none;
	background: #f1f1f1;
	color: #333;
	font-size: 20px;
	cursor: pointer;
	z-index: 5;
}
.spin-modal-close:hover { background: #ff4b5c; color: #fff; }
.spin-title {
	font-size: 26px;
	font-weight: 800;
	color: #e63946;
	margin: 0 0 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.spin-subtitle {
	font-size: 15px;
	color: #666;
	margin: 0 0 10px;
}
.spin-stage {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 22px auto 12px;
}
.spin-needle {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	width: 100px;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
	pointer-events: none;
}
.spin-needle img { width: 100%; display: block; }
.spin-wheel {
	position: absolute;
	inset: 12px 12px 12px 12px;
	z-index: 2;
	border-radius: 50%;
}
.spin-wheel img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
	display: block;
	transition: transform 5s cubic-bezier(0.13, 0.78, 0.24, 0.98);
	will-change: transform;
}
.spin-wheel img.wobble {
	animation: spinWobble 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) 1;
}
@keyframes spinWobble {
	0%   { transform: rotate(var(--spin-angle, 0deg)); }
	25%  { transform: rotate(calc(var(--spin-angle, 0deg) - 10deg)); }
	50%  { transform: rotate(calc(var(--spin-angle, 0deg) + 5deg)); }
	72%  { transform: rotate(calc(var(--spin-angle, 0deg) - 3deg)); }
	88%  { transform: rotate(calc(var(--spin-angle, 0deg) + 1.5deg)); }
	100% { transform: rotate(var(--spin-angle, 0deg)); }
}
.spin-btn {
	margin-top: 12px;
	padding: 14px 48px;
	border: none;
	border-radius: 50px;
	background: linear-gradient(135deg, #e63946, #ff6b35);
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 2px;
	cursor: pointer;
	text-transform: uppercase;
	box-shadow: 0 10px 24px rgba(230, 57, 70, 0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.spin-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(230, 57, 70, 0.5); }
.spin-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.spin-hint { font-size: 13px; color: #999; margin: 10px 0 0; }
.spin-result {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #eafaf0;
	border: 1px solid #3cba6f;
	color: #1d6f42;
	font-size: 15px;
	animation: spinResultPop 0.4s ease;
}
.spin-result strong { font-size: 18px; }
@keyframes spinResultPop {
	from { transform: scale(0.8); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
@media (max-width: 420px) {
	.spin-stage { width: 250px; height: 250px; }
	.spin-title { font-size: 22px; }
}