.spin-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(0,0,0,0.75);
	backdrop-filter: blur(10px);
}
.spin-modal.active { display: flex; }
.spin-modal-backdrop {
	position: absolute;
	inset: 0;
	cursor: pointer;
}
.spin-modal-card {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: #18181b;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 1.75rem;
	padding: 2.2rem 1.5rem 1.75rem;
	text-align: center;
	box-shadow: 0 30px 80px rgba(0,0,0,0.6);
	animation: spinModalIn 0.45s ease;
	overflow: hidden;
}
@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: 32px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.15);
	background: transparent;
	color: #a1a1aa;
	font-size: 20px;
	cursor: pointer;
	z-index: 5;
	transition: all 0.25s ease;
}
.spin-modal-close:hover { background: #fff; color: #000; }
.spin-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 4px;
	letter-spacing: -0.02em;
}
.spin-subtitle {
	font-size: 0.875rem;
	color: #a1a1aa;
	margin: 0 0 14px;
}
.spin-stage {
	position: relative;
	width: 300px;
	height: 300px;
	margin: 10px auto 6px;
}
.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: 10px;
	z-index: 2;
}
.spin-wheel img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 5s cubic-bezier(0.12, 0.85, 0.14, 1);
	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: 14px;
	padding: 14px 56px;
	border: none;
	border-radius: 9999px;
	background: #fff;
	color: #000;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.25s ease;
}
.spin-btn:hover:not(:disabled) { background: #e4e4e7; transform: scale(1.04); }
.spin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.spin-hint { font-size: 0.75rem; color: #71717a; margin: 10px 0 0; }
.spin-result {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: 12px;
	background: rgba(52,211,153,0.1);
	border: 1px solid rgba(52,211,153,0.35);
	color: #6ee7b7;
	font-size: 0.95rem;
	animation: spinResultPop 0.4s ease;
}
.spin-result strong { font-size: 1.1rem; }
@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: 1.35rem; }
}