/* 抽選ボタンの装飾 */
.main-btn {
	width: 100%;
	max-width: 400px;
	margin: 20px auto;
	padding: 1.5rem;
	font-size: 1.5rem;
	background: linear-gradient(135deg, #1e90ff, #00fa9a);
	color: #fff;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	filter: brightness(1.1);
}

.main-btn:active {
	transform: scale(0.95);
}

.main-btn:disabled {
	background: #555;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* 抽選結果の演出 */
.result-item {
	text-align: center;
	padding: 2rem;
	border: 2px solid #00fa9a;
	background: rgba(255, 255, 255, 0.05);
}

.result-label {
	color: #00fa9a;
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
}

.result-value {
	font-size: 4rem;
	color: #fff;
	text-shadow: 0 0 10px rgba(0, 250, 154, 0.5);
	animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.result-value.animate {
	animation: none;
	display: inline-block;
	/* アニメーション再トリガーのため */
}

.result-value .unit {
	color: #ccc;
	font-size: 1.5rem;
}