/* ============================================================================
 * 知集 v3 —— 抽奖大转盘（Lottery）前端样式
 * ----------------------------------------------------------------------------
 * 来源：v2 `zhiji/includes/modules/Lottery.php` 内联 nowdoc（原样迁移，样式未改）
 *
 * 设计要点（对应 v2「点击抽奖弹窗闪烁/抖动」BUG 修复，**勿回退**）：
 *   1) 弹窗用 opacity + visibility 控制显隐，**绝不切换 display**，避免重绘闪烁；
 *   2) 初始即预渲染 DOM（visibility:hidden），点击只加 .is-open 做过渡；
 *   3) 隐藏时 pointer-events:none，避免隐形遮罩误挡页面点击；
 *   4) 卡片 transform:translateZ(0) 独立合成层，隔离父主题可能的 transform 上下文；
 *   5) z-index 拉高（100000）且统一 `zhiji-lottery-` 前缀，避免与 Zibll 弹窗冲突。
 * ========================================================================== */

/* ============================================================
 * 知集·大抽奖 前端弹窗样式（交互层）
 * ------------------------------------------------------------
 * 设计要点（对应「点击抽奖弹窗闪烁/抖动」BUG 修复）：
 *  1) 弹窗用 opacity + visibility 控制显隐，绝不切换 display，避免重绘闪烁；
 *  2) 初始即预渲染 DOM（visibility:hidden），点击只加 .is-open 类做过渡；
 *  3) 隐藏时 pointer-events:none，避免隐形遮罩误挡页面点击；
 *  4) 卡片 transform:translateZ(0) 独立合成层，隔离父主题可能存在的 transform 上下文；
 *  5) z-index 拉高（100000）并以 .zhiji-lottery- 前缀命名，避免与 Zibll 弹窗/主题样式冲突。
 * ============================================================ */

/* 悬浮抽奖按钮：礼盒图标 —— 白色圆底 + 深橙金大图标，确保清晰可见 */
.zhiji-lottery-open-btn .fa-gift {
	color: #e8850c !important;
	font-size: 28px !important;
	line-height: 46px !important;
	width: 46px !important;
	height: 46px !important;
	text-align: center !important;
	border-radius: 50% !important;
	background: rgba(255,255,255,.95) !important;
	box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
	text-shadow: none !important;
	-webkit-text-stroke: 0 !important;
}
/* 悬停时礼盒图标外圈呼吸感（橙色实线圆环扩散脉冲，视觉明显） */
.zhiji-lottery-open-btn.float-btn .fa-gift {
	position: relative !important;
}
.zhiji-lottery-open-btn.float-btn .fa-gift::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 5px solid rgba(232,133,12,.9);
	box-shadow: 0 0 0 7px rgba(255,107,53,.4);
	opacity: 0;
	pointer-events: none;
}
.zhiji-lottery-open-btn.float-btn:hover .fa-gift::after {
	animation: zhiji-gift-breathe 1.3s ease-out infinite;
}
@keyframes zhiji-gift-breathe {
	0% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.8); opacity: 0; }
}
/* 悬浮抽奖按钮：圆形悬浮球 + 底部胶囊文字标签（替代原瘦长条） */
.zhiji-lottery-open-btn.float-btn {
	width: 58px !important;
	height: 58px !important;
	border-radius: 50% !important;
	padding: 0 !important;
	background: linear-gradient(135deg, #ff9d7a 0%, #ff6f91 100%) !important;
	border: 2px solid rgba(255,255,255,.85) !important;
	box-shadow: 0 4px 16px rgba(255,111,145,.45), inset 0 1px 0 rgba(255,255,255,.4) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	transition: transform .2s ease, box-shadow .2s ease !important;
}
.zhiji-lottery-open-btn.float-btn .fa-gift {
	margin: 0 !important;
}
.zhiji-lottery-open-btn.float-btn span {
	position: absolute !important;
	top: calc(100% + 7px) !important;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: 2px 9px;
	border-radius: 12px;
	background: rgba(255,255,255,.94);
	color: #ff5f85 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.zhiji-lottery-open-btn.float-btn:hover {
	transform: scale(1.06) !important;
	box-shadow: 0 6px 20px rgba(255,111,145,.55), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* 弹窗遮罩层 */
.zhiji-lottery-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: opacity;
}

/* 打开态：仅切换类，平滑显现（无 display 切换、无节点移动） */
.zhiji-lottery-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.zhiji-lottery-modal * {
	box-sizing: border-box;
}

/* 弹窗卡片（白底 + 金色碎屑装饰，参考图风格：径向渐变多点撒金粉） */
.zhiji-lottery-card {
	position: relative;
	width: 94%;
	max-width: 720px;
	max-height: 92vh;
	overflow-y: auto;
	background-color: #fff;
	background-image:
		radial-gradient(circle, rgba(255, 196, 60, .5) 1.5px, transparent 2px),
		radial-gradient(circle, rgba(255, 214, 90, .45) 2px, transparent 2.8px),
		radial-gradient(circle, rgba(255, 182, 30, .4) 1.8px, transparent 2.5px),
		radial-gradient(circle, rgba(255, 224, 130, .4) 1.2px, transparent 1.8px),
		radial-gradient(circle, rgba(255, 205, 70, .45) 1.6px, transparent 2.2px),
		radial-gradient(circle, rgba(255, 190, 50, .38) 2.2px, transparent 3px);
	background-size: 180px 150px, 240px 200px, 130px 160px, 300px 220px, 200px 180px, 260px 140px;
	background-position: 0 0, 40px 30px, 80px 10px, 20px 60px, 110px 40px, 60px 90px;
	border-radius: 16px;
	padding: 24px 20px 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
	transform: translateZ(0); /* 独立合成层，避免与祖先 transform 互相干扰 */
}

/* 关闭按钮 */
.zhiji-lottery-close {
	position: absolute;
	top: 8px;
	right: 14px;
	font-size: 28px;
	line-height: 1;
	color: #bbb;
	text-decoration: none;
	font-weight: 300;
	cursor: pointer;
	transition: color .15s;
}

.zhiji-lottery-close:hover {
	color: #888;
}

.zhiji-lottery-title {
	margin: 0 0 14px;
	text-align: center;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 2px;
	color: #fff;
	background: linear-gradient(135deg, #ffa94d, #ff7a2f 55%, #f2571c);
	border-radius: 40px;
	padding: 10px 18px;
	box-shadow: 0 4px 14px rgba(255, 122, 47, .35);
}

/* 转盘容器与指针 */
.zhiji-lottery-wheel {
	position: relative;
	display: inline-block;
	width: var(--zhiji-lottery-size, 240px);
	max-width: 100%;
}

.zhiji-lottery-pointer {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 24px solid var(--zhiji-danger, #e24b4a);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

.zhiji-lottery-canvas {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	border-radius: 50%;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}

/* ============ 九宫格抽奖样式（参考图：3×3 格子 + 中心按钮 + 右侧账户栏） ============ */
.zhiji-lottery-body {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: center;
	margin-top: 8px;
}

/* 九宫格容器：白底微暖渐变 + 蓝色边框（参考图风格） */
.zhiji-lottery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 9px;
	width: min(calc(var(--zhiji-lottery-size, 240px) * 1.6), 400px);
	flex: 0 0 auto;
	padding: 13px;
	background: linear-gradient(180deg, #fffefb, #faf6ff);
	border: 2px solid #b8d3ff;
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(90, 140, 255, .12);
}

/* 奖品格：柔和彩底 + emoji 图标 + 深色文字，丰富不刺眼 */
.zhiji-grid-cell {
	aspect-ratio: 1/1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	color: #3a3a4d;
	background: var(--cg, #f4f7ff);
	border: 1px solid rgba(0, 0, 0, .05);
	border-radius: 11px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
	transition: transform .12s ease, box-shadow .12s ease;
	padding: 3px;
	word-break: break-word;
	overflow: hidden;
}

.zhiji-grid-cell .zgc-ic {
	font-size: 19px;
	line-height: 1;
}

.zhiji-grid-cell .zgc-ic svg {
	display: block;
	margin: 0 auto;
}

.zhiji-grid-cell .zgc-tx {
	font-size: 12px;
	font-weight: 700;
	padding: 0 2px;
}

.zhiji-grid-cell.is-blank {
	background: #f4f5f7;
	color: #aab0b8;
	font-weight: 500;
	box-shadow: none;
}

.zhiji-grid-cell.is-active {
	transform: scale(1.07);
	box-shadow: 0 0 0 3px rgba(255, 190, 40, .6), 0 6px 16px rgba(255, 170, 40, .28);
	z-index: 2;
}

.zhiji-grid-cell.is-win {
	animation: zhijiGridWin .6s ease infinite alternate;
}

@keyframes zhijiGridWin {
	from { transform: scale(1.03); box-shadow: 0 0 0 3px rgba(255, 190, 40, .5); }
	to { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(255, 110, 40, .5); }
}

/* 中心圆形按钮（橙色） */
.zhiji-grid-btn {
	aspect-ratio: 1/1;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: radial-gradient(circle at 32% 26%, #ffb25e, #ff7a2f 58%, #f2571c);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0 8px 22px rgba(255, 107, 53, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
	transition: transform .12s ease;
	animation: zhijiBtnPulse 2s ease-in-out infinite;
	text-align: center;
	padding: 6px;
}

@keyframes zhijiBtnPulse {
	0%, 100% { box-shadow: 0 8px 22px rgba(255, 107, 53, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
	50% { box-shadow: 0 8px 30px rgba(255, 140, 60, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
}

.zhiji-grid-btn:hover { color: #fff; transform: scale(1.04); }
.zhiji-grid-btn:active { transform: scale(.95); }
.zhiji-grid-btn.is-drawing, .zhiji-grid-btn.is-disabled { opacity: .65; pointer-events: none; }
.zhiji-grid-btn .zgb-sub { font-size: 10px; font-weight: 600; opacity: .95; line-height: 1.2; }

/* 右侧账户/记录栏 */
.zhiji-lottery-side {
	flex: 1 1 236px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zhiji-lottery-account {
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 12px;
	padding: 12px 14px;
}

.zhiji-lottery-account .zla-title {
	font-size: 13px;
	font-weight: 800;
	color: #3c3c4d;
	margin-bottom: 10px;
}

/* 两列统计网格（参考图：余额/积分并排，label 上 value 下） */
.zhiji-lottery-account .zla-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 8px;
}

.zhiji-lottery-account .zla-item {
	text-align: center;
	background: rgba(127, 127, 127, .05); /* fallback（不支持 color-mix 时） */
	background: color-mix(in srgb, var(--zhiji-brand, #2e7cf6) 8%, #fff);
	border: 1px solid rgba(127, 127, 127, .2); /* fallback */
	border-color: color-mix(in srgb, var(--zhiji-brand, #2e7cf6) 30%, transparent);
	border-radius: 10px;
	padding: 9px 4px 8px;
}

.zhiji-lottery-account .zla-item-full { width: 100%; }

.zhiji-lottery-account .zla-label {
	font-size: 11px;
	color: #9a9aa8;
	margin-bottom: 4px;
}

.zhiji-lottery-account .zla-label svg {
	vertical-align: -2px;
	margin-right: 2px;
}

.zhiji-lottery-account .zla-num {
	font-weight: 800;
	color: #2e7cf6; /* fallback */
	color: var(--zhiji-brand, #2e7cf6);
	font-size: 16px;
}

.zhiji-lottery-side .zhiji-lottery-log {
	margin: 0;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 12px;
	padding: 10px 12px;
	max-height: 264px;
	overflow: auto;
}

@media (max-width: 720px) {
	.zhiji-lottery-body { flex-direction: column; align-items: stretch; }
	.zhiji-lottery-grid { width: 100%; max-width: 400px; margin: 0 auto; }
	.zhiji-lottery-side { width: 100%; }
}

/* ============ 九宫格样式结束 ============ */

/* 消息 / 统计文本 */
.zhiji-lottery-msg {
	text-align: center;
	min-height: 22px;
	margin: 10px 0;
	font-size: 12px;
	color: #666;
}

.zhiji-lottery-msg.is-error {
	color: var(--zhiji-danger, #e24b4a);
}

/* 结果区：用 opacity/visibility 控制，禁止 display:none 以免重排闪烁 */
.zhiji-lottery-result {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease;
}

.zhiji-lottery-result.show {
	opacity: 1;
	visibility: visible;
}

.zhiji-lottery-result-inner {
	text-align: center;
	padding: 16px 8px;
}

.zhiji-lottery-result-emoji {
	font-size: 36px;
	margin-bottom: 8px;
}

.zhiji-lottery-result-title {
	font-size: 17px;
	font-weight: 600;
	color: #333;
}

.zhiji-lottery-result-sub {
	font-size: 13px;
	color: #888;
	margin-top: 6px;
}

/* 按钮区 */
.zhiji-lottery-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 6px;
}

.zhiji-btn {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	color: #fff;
	border: none;
	line-height: 1.4;
	transition: filter .15s;
	user-select: none;
}

.zhiji-btn:hover {
	filter: brightness(1.08);
}

.zhiji-btn:active {
	filter: brightness(.95);
}

/* 加载锁视觉态：抽奖进行中按钮变灰且不可点 */
.zhiji-btn.is-drawing {
	opacity: .6;
	pointer-events: none;
}

.zhiji-btn-blue {
	background: #378add;
}

.zhiji-btn-yellow {
	background: #ef9f27;
}

.zhiji-btn-green {
	background: #1d9e75;
}

.zhiji-lottery-stats {
	color: #999;
	font-size: 12px;
	margin-top: 10px;
}

/* 看板记录 */
.zhiji-lottery-log {
	margin-top: 16px;
	text-align: left;
}

.zhiji-lottery-log-title {
	font-size: 12px;
	color: #999;
	font-weight: 600;
	margin-bottom: 6px;
}

.zhiji-lottery-log table {
	width: 100%;
	border-collapse: collapse;
}

.zhiji-lottery-log th,
.zhiji-lottery-log td {
	padding: 5px 8px;
	font-size: 11px;
	text-align: left;
}

/* 背景滚动锁（打开弹窗时加在 body 上） */
.zhiji-lottery-noscroll {
	overflow: hidden;
}

/* 移动端响应式 */
@media (max-width: 480px) {
	.zhiji-lottery-card {
		padding: 20px 14px 16px;
		border-radius: 14px;
	}

	.zhiji-lottery-title {
		font-size: 16px;
	}

	.zhiji-lottery-actions {
		flex-direction: column;
	}

	.zhiji-lottery-actions .zhiji-btn {
		width: 100%;
		text-align: center;
	}
}

/* ============================================================
 * 首页转盘触发器（trigger="wheel"）：可见的 Canvas 转盘，
 * 点击直接弹窗抽奖，全程不离开首页。
 * ============================================================ */
.zhiji-lottery-trigger-wrap {
	display: inline-block;
	text-align: center;
	line-height: 1.4;
}

.zhiji-lottery-trigger-wheel {
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(91, 106, 240, .28);
	transition: transform .2s ease, box-shadow .2s ease;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.zhiji-lottery-trigger-wheel:hover {
	transform: scale(1.04) rotate(8deg);
	box-shadow: 0 12px 30px rgba(91, 106, 240, .42);
}

.zhiji-lottery-trigger-wheel.is-disabled {
	cursor: not-allowed;
}

.zhiji-lottery-trigger-hint {
	margin-top: 12px;
	font-weight: 600;
	font-size: 15px;
	color: #5b6af0;
}

/* 暗夜模式适配：弹窗卡片/转盘/账户记录栏深色化 */
body.dark-theme .zhiji-lottery-card {
	background: #26282b;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
body.dark-theme .zhiji-lottery-title,
body.dark-theme .zhiji-lottery-result-title {
	color: #e5eef7;
}
body.dark-theme .zhiji-lottery-msg,
body.dark-theme .zhiji-lottery-result-sub,
body.dark-theme .zhiji-lottery-stats,
body.dark-theme .zhiji-lottery-log-title {
	color: #9aa3ad;
}
body.dark-theme .zhiji-lottery-close {
	color: #7a828c;
}
body.dark-theme .zhiji-lottery-close:hover {
	color: #aab2bc;
}
body.dark-theme .zhiji-grid-cell {
	background: #33353a !important;
	color: #d8dce2;
	border-color: rgba(255, 255, 255, .08);
	box-shadow: none;
}
body.dark-theme .zhiji-grid-cell.is-blank {
	background: #2c2e32 !important;
	color: #7a828c;
}
body.dark-theme .zhiji-lottery-account {
	background: #33353a;
	border-color: #3a3d42;
}
body.dark-theme .zhiji-lottery-account .zla-title {
	color: #e5eef7;
}
body.dark-theme .zhiji-lottery-account .zla-num,
body.dark-theme .zhiji-lottery-log td {
	color: #c3cad2;
}
body.dark-theme .zhiji-lottery-log th {
	color: #8a929c;
}
body.dark-theme .zhiji-lottery-side .zhiji-lottery-log {
	background: #2f3135;
	border-color: #3a3d42;
}
body.dark-theme .zhiji-lottery-grid {
	background: #2b2d31;
	border-color: #4a5568;
	box-shadow: none;
}