/* ========== 转盘抽奖弹窗 ========== */
#wheel-overlay{
	display:none;
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	background:rgba(0,0,0,0.88);
	z-index:200;
	justify-content:center;
	align-items:center;
	padding:10px;
}
#wheel-overlay.active{display:flex;}
#wheel-box{
	background:linear-gradient(135deg,#2a1a3a,#1a0d28);
	border:2px solid #FFD700;
	border-radius:16px;
	padding:16px;
	width:100%;
	max-width:400px;
	text-align:center;
	color:#fff;
	box-shadow:0 0 40px rgba(255,215,0,0.2);
}
#wheel-box .wheel-header{margin-bottom:12px;}
#wheel-box .wheel-header h2{
	font-size:20px;
	color:#FFD700;
	margin-bottom:4px;
}
#wheel-box .wheel-header p{
	font-size:12px;
	color:#aaa;
}
.wheel-container{
	position:relative;
	width:280px;
	height:280px;
	margin:0 auto 16px;
}
#wheel-canvas{
	width:280px;
	height:280px;
	border-radius:50%;
	box-shadow:0 0 20px rgba(255,215,0,0.15);
}
.wheel-pointer{
	position:absolute;
	top:-8px;
	left:50%;
	transform:translateX(-50%);
	font-size:28px;
	color:#FF4444;
	text-shadow:0 2px 4px rgba(0,0,0,0.5);
	z-index:10;
}
#wheel-start-btn{
	padding:12px 48px;
	font-size:16px;
	font-weight:bold;
	background:linear-gradient(135deg,#FFD700,#FFA500);
	color:#1a0d28;
	border:none;
	border-radius:24px;
	cursor:pointer;
	box-shadow:0 4px 12px rgba(255,215,0,0.3);
	transition:transform 0.15s;
}
#wheel-start-btn:active{transform:scale(0.95);}
#wheel-start-btn:disabled{
	opacity:0.5;
	cursor:not-allowed;
}
#wheel-result{
	margin-top:12px;
	font-size:16px;
	min-height:24px;
}
#wheel-result .win{color:#FFD700;font-weight:bold;}
#wheel-result .lose{color:#aaa;}

/* ========== 红包弹窗 ========== */
#redpacket-overlay{
	display:none;
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	background:rgba(0,0,0,0.9);
	z-index:300;
	justify-content:center;
	align-items:center;
	padding:10px;
}
#redpacket-overlay.active{display:flex;}
#redpacket-box{
	background:linear-gradient(180deg,#E53935,#B71C1C);
	border-radius:16px;
	padding:32px 24px;
	width:100%;
	max-width:320px;
	text-align:center;
	color:#FFD700;
	box-shadow:0 8px 32px rgba(229,57,53,0.4);
	position:relative;
	overflow:hidden;
}
#redpacket-box::before{
	content:'';
	position:absolute;
	top:-50%;
	left:-50%;
	width:200%;
	height:200%;
	background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 60%);
	pointer-events:none;
}
.redpacket-amount{
	font-size:48px;
	font-weight:bold;
	margin-bottom:8px;
}
.redpacket-amount span{font-size:56px;}
#redpacket-text{
	font-size:16px;
	color:#FFEB3B;
	margin-bottom:20px;
}
#redpacket-withdraw-btn{
	padding:12px 40px;
	font-size:15px;
	font-weight:bold;
	background:#FFD700;
	color:#B71C1C;
	border:none;
	border-radius:24px;
	cursor:pointer;
	margin-bottom:10px;
	box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
#redpacket-withdraw-btn:active{transform:scale(0.97);}
#redpacket-close-btn{
	padding:8px 32px;
	font-size:13px;
	background:rgba(255,255,255,0.15);
	color:#fff;
	border:1px solid rgba(255,255,255,0.3);
	border-radius:20px;
	cursor:pointer;
}

/* ========== 提现弹窗 ========== */
#withdraw-overlay{
	display:none;
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	background:rgba(0,0,0,0.88);
	z-index:400;
	justify-content:center;
	align-items:center;
	padding:10px;
}
#withdraw-overlay.active{display:flex;}
#withdraw-box{
	background:linear-gradient(135deg,#1a3a2a,#0d2818);
	border:2px solid #4CAF50;
	border-radius:12px;
	padding:20px;
	width:100%;
	max-width:360px;
	color:#fff;
	text-align:center;
}
#withdraw-box h3{color:#81C784;margin-bottom:12px;}
#withdraw-box p{font-size:13px;color:#aaa;margin-bottom:16px;line-height:1.6;}
#withdraw-confirm-btn{
	padding:10px 36px;
	font-size:14px;
	background:#4CAF50;
	color:#fff;
	border:none;
	border-radius:8px;
	cursor:pointer;
	margin-right:8px;
}
#withdraw-cancel-btn{
	padding:10px 36px;
	font-size:14px;
	background:rgba(255,255,255,0.1);
	color:#ccc;
	border:1px solid rgba(255,255,255,0.2);
	border-radius:8px;
	cursor:pointer;
}

/* ========== 活动规则弹窗 ========== */
#rules-overlay{
	display:none;
	position:fixed;
	top:0;left:0;
	width:100%;height:100%;
	background:rgba(0,0,0,0.92);
	z-index:10001;
	justify-content:center;
	align-items:center;
	padding:16px;
}
#rules-overlay.active{display:flex;}
#rules-box{
	background:linear-gradient(135deg,#1a2a3a,#0d1828);
	border:2px solid #FFD700;
	border-radius:16px;
	width:100%;
	max-width:420px;
	max-height:90vh;
	color:#fff;
	box-shadow:0 0 40px rgba(255,215,0,0.15);
	overflow:hidden;
	display:flex;
	flex-direction:column;
}
.rules-header{
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	padding:16px 20px 12px;
	border-bottom:1px solid rgba(255,215,0,0.2);
	flex-shrink:0;
}
.rules-header h2{
	font-size:20px;
	color:#FFD700;
	margin:0;
	letter-spacing:3px;
}
#rules-close-btn{
	position:absolute;
	right:12px;
	top:50%;
	transform:translateY(-50%);
	width:32px;height:32px;
	background:rgba(255,255,255,0.1);
	border:1px solid rgba(255,255,255,0.2);
	border-radius:50%;
	color:#aaa;
	font-size:20px;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
}
#rules-close-btn:active{background:rgba(255,255,255,0.2);color:#fff;}
.rules-content{
	padding:16px 20px 20px;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	flex:1;
}
.rules-section{
	margin-bottom:14px;
}
.rules-label{
	font-size:12px;
	color:#FFD700;
	font-weight:bold;
	margin-bottom:4px;
	letter-spacing:1px;
}
.rules-text{
	font-size:13px;
	color:#ddd;
	line-height:1.7;
}
.rules-text ol{
	padding-left:18px;
	margin:0;
}
.rules-text ol li{
	margin-bottom:6px;
}
.rules-text strong{
	color:#FFD700;
}
.rules-divider{
	height:1px;
	background:rgba(255,215,0,0.15);
	margin:16px 0 12px;
}
.rules-footer-text{
	font-size:11px;
	color:#888;
	text-align:center;
	line-height:1.6;
}

/* ========== 小屏适配 ========== */
@media (max-width:380px){
	.wheel-container{width:240px;height:240px;}
	#wheel-canvas{width:240px;height:240px;}
	.redpacket-amount{font-size:40px;}
	.redpacket-amount span{font-size:48px;}
	#rules-box{max-height:85vh;}
	.rules-content{padding:12px 14px 16px;}
	.rules-text{font-size:12px;}
}
