/* =========================================================
 * NNII 礼包模块样式（领取卡片 / 领取弹窗 / 后台批量导入）
 * 复用主题主色：TapTap 青 #14D9C8 / 珊瑚橙 #FF8C61
 * ========================================================= */

/* 礼包列表容器：游戏详情页 .game-gift 与礼包中心 .game-gift-list 通用 */
.game-gift > ul,
.game-gift-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 礼包中心：外层 tx-box 无内边距，卡片贴容器边。
 * 给列表整体留 15px 呼吸空间（上下同步留出，与标题行对齐）。 */
.game-gift-list {
	padding: 15px;
}

/* 单张礼包卡片（左右留空 24px，呼吸感更好） */
.nnii-gift-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid #eef1f6;
	border-radius: 14px;
	padding: 12px 24px;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.nnii-gift-item:hover {
	box-shadow: 0 6px 18px rgba(40, 80, 180, .10);
	border-color: #dbe4ff;
	transform: translateY(-1px);
}

/* 整卡可点击区域（进详情页） */
.gift-link {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

/* 左侧礼包图标 */
.gift-ico {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #eaf1ff, #f3eeff);
	color: #14D9C8;
	font-size: 20px;
}
.gift-ico .fa { font-size: 20px; }

/* 中间信息 */
.gift-info {
	flex: 1 1 auto;
	min-width: 0;
}
.gift-name {
	font-size: 16px;
	font-weight: 600;
	color: #1f2733;
	margin: 0 0 4px;
	line-height: 1.3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	/* 长礼包名单行省略，箭头固定行尾 */
	white-space: nowrap;
	overflow: hidden;
}
.gift-name .gift-arrow {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 400;
	color: #c0c8d4;
	transition: color .15s, transform .15s;
}
.nnii-gift-item:hover .gift-name { color: #14D9C8; }
.nnii-gift-item:hover .gift-name .gift-arrow { color: #14D9C8; transform: translateX(2px); }
.gift-content {
	font-size: 13px;
	color: #6b7480;
	margin: 0 0 6px;
	line-height: 1.5;
	/* 单行省略：内容太长不换行，避免卡片被撑高、按钮被挤压 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gift-info > .f-12 {
	/* meta 行（模式｜剩余｜限领等）同样单行省略 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gift-meta {
	font-size: 12px;
	color: #9aa3af;
	margin: 0;
}
.gift-meta b { color: #14D9C8; }
.gift-meta .f-orange { color: #FF8C61; }

/* 右侧操作 */
.operate { flex: 0 0 auto; }
.nnii-claim {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 84px;
	padding: 9px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.nnii-claim.loading { opacity: .7; pointer-events: none; }

/* 礼包中心页标题微调 */
.archive-gift .tx-title,
.game-gift .tx-title {
	margin-bottom: 14px;
}

/* =========================================================
 * 领取成功弹窗
 * ========================================================= */
.nnii-modal-mask {
	position: fixed;
	inset: 0;
	background: rgba(20, 28, 46, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}
.nnii-modal-mask.show { opacity: 1; visibility: visible; }

.nnii-modal {
	width: 320px;
	max-width: 90%;
	background: #fff;
	border-radius: 16px;
	padding: 26px 22px;
	text-align: center;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
	transform: translateY(10px);
	transition: transform .2s ease;
}
.nnii-modal-mask.show .nnii-modal { transform: translateY(0); }

.nnii-modal .m-ico {
	font-size: 34px;
	color: #14D9C8;
	margin-bottom: 6px;
}
.nnii-modal h3 { margin: 0 0 6px; font-size: 18px; color: #1f2733; }
.nnii-modal .m-tip { font-size: 13px; color: #9aa3af; margin: 0 0 14px; }

.nnii-code-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #f4f6fb;
	border: 1px dashed #c9d4ee;
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 14px;
}
.nnii-code-box code {
	font-size: 16px;
	font-weight: 700;
	color: #14D9C8;
	letter-spacing: 1px;
	word-break: break-all;
}
.nnii-copy {
	border: none;
	background: #14D9C8;
	color: #fff;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.nnii-copy:hover { background: #0FC2B3; }
.nnii-modal .m-close {
	display: block;
	width: 100%;
	margin-top: 4px;
	border: none;
	background: #eef1f6;
	color: #5b6470;
	border-radius: 8px;
	padding: 9px;
	font-size: 14px;
	cursor: pointer;
}
.nnii-modal .m-close:hover { background: #e3e8f0; }

/* 轻提示 toast */
.nnii-toast {
	position: fixed;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%) translateY(20px);
	background: rgba(31, 39, 51, .92);
	color: #fff;
	padding: 10px 18px;
	border-radius: 10px;
	font-size: 14px;
	z-index: 10000;
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}
.nnii-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =========================================================
 * 后台礼包码批量导入区
 * ========================================================= */
.nnii-codes-import {
	background: #f7f9fc;
	border: 1px solid #e6ebf3;
	border-radius: 10px;
	padding: 14px 16px;
	margin-top: 6px;
}
.nnii-codes-import textarea {
	width: 100%;
	font-family: Consolas, Menlo, monospace;
	font-size: 13px;
	line-height: 1.5;
}
.nnii-codes-import .row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.nnii-codes-import .button-primary { background: #14D9C8; border-color: #14D9C8; }
.nnii-codes-import .stat { font-size: 12px; color: #6b7480; }
.nnii-codes-import .stat b { color: #14D9C8; }
.nnii-codes-import .msg { font-size: 12px; margin-left: auto; }
.nnii-codes-import .msg.ok { color: #14D9C8; }
.nnii-codes-import .msg.err { color: #FF8C61; }

/* =========================================================
 * 礼包详情页（gift-detail）：对齐 nnii.cn 参考版式
 * ========================================================= */
.gift-detail { padding: 24px 26px 26px; }

/* 头部：游戏图标 + 礼包名 + 标签 */
.gift-detail .gd-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
.gift-detail .gd-icon {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eafaf8;
	color: #14D9C8;
	font-size: 30px;
}
.gift-detail .gd-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gift-detail .gd-info { flex: 1 1 auto; min-width: 0; }
.gift-detail .gd-name {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.35;
	color: #1f2733;
	font-weight: 700;
}
.gift-detail .gd-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #6b7480;
}
.gift-detail .gd-meta a { color: #14D9C8; }
.gift-detail .gd-meta .fa-gamepad { color: #14D9C8; }
.gift-detail .gd-tag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	background: #14D9C8;
}
.gift-detail .gd-tag-blue { background: #14D9C8; }
.gift-detail .gd-tag-red { background: #e63946; }

/* 信息面板 */
.gift-detail .gd-panel {
	background: #f7f9fc;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 20px;
}
.gift-detail .gd-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 14px;
	padding: 5px 0;
}
.gift-detail .gd-row-last { padding-bottom: 0; }
.gift-detail .gd-label { color: #8b95a3; }
.gift-detail .gd-label .fa { width: 18px; color: #14D9C8; }
.gift-detail .gd-value { color: #1f2733; font-weight: 600; text-align: right; }
.gift-detail .gd-value b { color: #FF8C61; font-size: 16px; }

/* 区块标题 */
.gift-detail .gd-section { margin-bottom: 20px; }
.gift-detail .gd-section:last-child { margin-bottom: 0; }
.gift-detail .gd-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #1f2733;
	margin-bottom: 10px;
}
.gift-detail .gd-section-title .fa { color: #14D9C8; }
.gift-detail .gd-reward {
	font-size: 14px;
	color: #4a5568;
	line-height: 1.8;
	white-space: pre-line;
}
.gift-detail .gd-reward p { margin: 0 0 6px; }

/* 温馨提示（黄色警示条） */
.gift-detail .gd-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	margin-bottom: 20px;
	background: #fffbeb;
	border: 1px solid rgba(245, 158, 11, .4);
	border-left: 4px solid #f59e0b;
	border-radius: 10px;
}
.gift-detail .gd-notice .fa {
	flex-shrink: 0;
	color: #f59e0b;
	font-size: 20px;
}
.gift-detail .gd-notice span { font-size: 13px; color: #4a5568; font-weight: 500; }

/* 下载按钮 */
.gift-detail .gd-down-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.gift-detail .gd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 26px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: filter .2s ease, transform .2s ease;
}
.gift-detail .gd-btn:hover { filter: brightness(1.08); color: #fff; }
.gift-detail .gd-btn-android { background: #10b981; }
.gift-detail .gd-btn-ios { background: #1f2733; }

/* 领取按钮（通栏） */
.gift-detail .gd-claim {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	border-radius: 10px;
	background: linear-gradient(90deg, #14D9C8, #0FC2B3);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2px;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(20, 217, 200, .35);
	transition: filter .2s ease, transform .2s ease;
}
.gift-detail .gd-claim:hover { filter: brightness(1.06); color: #fff; }
.gift-detail .gd-claim.is-disabled {
	background: #d7dce4;
	color: #8b95a3;
	box-shadow: none;
	cursor: default;
}
.gift-detail .gd-claim.loading { opacity: .7; pointer-events: none; }

/* 手机端 */
@media (max-width: 640px) {
	.gift-detail { padding: 16px 14px 18px; }
	.gift-detail .gd-icon { flex-basis: 60px; width: 60px; height: 60px; border-radius: 12px; }
	.gift-detail .gd-name { font-size: 18px; }
	.gift-detail .gd-row { flex-direction: row; }
	.gift-detail .gd-value { text-align: right; }
	.gift-detail .gd-down-btns .gd-btn { flex: 1 1 auto; }
}

/* 游戏福利块 */
.game-benefits { margin-top: 18px; }
.game-benefits .tx-title { font-size: 18px; margin-bottom: 10px; }
.benefits-content { background: #f6f9ff; border: 1px solid #e6edfb; border-radius: 12px; padding: 14px 16px; color: #334; line-height: 1.9; }
.benefits-content h3 { font-size: 16px; margin: 12px 0 6px; color: #1f2d4d; }
.benefits-content ul { padding-left: 22px; margin: 6px 0; }
.benefits-content img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.benefits-content p { margin: 6px 0; }