/* ===== 游戏详情页 JILI 风格布局 ===== */
/* 参考：https://jiligames.com/PlusIntro/421?showGame=true */
/* 所有样式都挂载在 .slots-game-page--jili 下，避免污染其他页面 */
/* 
 * 重构说明：
 * 1. 完全清空旧的布局结构（.bs-game-main / .bs-game-main__left / .bs-game-main__right）
 * 2. 重建为 JILI 风格的新结构（.slots-game-hero / .slots-game-content）
 * 3. PC 端：游戏容器居中显示，竖版 9:16 比例
 * 4. 移动端：游戏容器占满首屏，9:16 比例
 */

/* ===== 1. 顶部导航/面包屑区域 ===== */
.slots-game-page--jili .slots-breadcrumb-bar {
	position: relative;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(10, 10, 20, 0.4);
	backdrop-filter: blur(10px);
	z-index: 10;
}

.slots-breadcrumb-bar__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: center;
	gap: 1rem;
}

.slots-breadcrumb-bar__left {
	display: flex;
	align-items: center;
}

.slots-breadcrumb-bar__back {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.2s ease;
}

.slots-breadcrumb-bar__back:hover {
	color: #31e1ff;
}

.slots-breadcrumb-bar__center {
	text-align: center;
}

.slots-breadcrumb-bar__title {
	font-size: 1.3rem;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
	line-height: 1.2;
}

.slots-breadcrumb-bar__right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* ===== 2. 页面主区域 ===== */
.slots-game-page--jili .slots-game-layout {
	position: relative;
	width: 100%;
	min-height: 100vh;
}

/* ===== 2.1 游戏首屏区域（核心） ===== */
.slots-game-page--jili .slots-game-hero {
	position: relative;
	width: 100%;
	/* 高度由内部 .slots-game-hero__frame 决定 */
}

/* PC 端：游戏首屏区域居中显示 */
@media (min-width: 1024px) {
	.slots-game-page--jili .slots-game-hero {
		max-width: 1200px;
		margin: 2rem auto;
		padding: 0 1.5rem;
	}
	
	/* PC 端：游戏容器为居中显示的竖版卡片 */
	.slots-game-page--jili .slots-game-hero__frame {
		position: relative;
		width: 100%;
		max-width: 500px; /* PC 端竖版游戏容器最大宽度 */
		margin: 0 auto;
		/* 9:16 比例，高度由宽度决定 */
		aspect-ratio: 9 / 16;
		/* 背景和视觉效果 */
		background: #000;
		border-radius: 16px;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4),
					0 0 0 1px rgba(255, 255, 255, 0.05) inset;
		overflow: hidden;
	}
}

/* ===== 移动端：游戏首屏区域放大，铺满首屏宽度（9:16） ===== */
/* 只在移动端生效，不影响 PC 端样式 */
/* 所有规则都只在 body.slots-game-fullscreen 下生效，避免影响其他页面 */
@media (max-width: 768px) {
	/* 1. 把整站主内容壳子完全放开宽度 */
	/* 针对 .nc-shell, .nc-shell__main, .nc-container 等布局容器 */
	body.slots-game-fullscreen .nc-shell,
	body.slots-game-fullscreen .nc-shell__main {
		max-width: 100% !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	/* 去掉 .nc-container 的 max-width 和居中约束 */
	body.slots-game-fullscreen .nc-container {
		max-width: 100% !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	/* 2. 去掉外层 layout 的 padding，让 hero 能拿到接近 100vw */
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-layout {
		padding: 0 !important;
		margin: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
	}
	
	/* 3. hero 区域：宽度铺满，高度占掉首屏高度 */
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero {
		padding: 0 !important;
		margin: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		/* 允许左右贴边，不需要额外 margin */
	}
	
	/* 4. 游戏容器：按 9:16 自动算高度 */
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame {
		position: relative;
		/* 宽度：接近整个内容宽度（100% 或者略减小一点，保留圆角发光边缘） */
		width: calc(100vw - 8px) !important; /* 左右各留 4px 安全边距 */
		max-width: calc(100vw - 8px) !important;
		/* 去掉居中约束，直接贴边 */
		margin: 0 auto !important; /* 居中显示，但宽度已经接近全屏 */
		/* 9:16 比例，高度由宽度决定（宽度决定高度） */
		aspect-ratio: 9 / 16 !important;
		/* 最小高度兜底：确保视觉接近 JILI（80vh 左右） */
		min-height: calc(100vh * 0.8) !important; /* 80% 视口高度 */
		/* 最大高度：视口高度减去顶部导航，防止超出首屏 */
		max-height: calc(100vh - 120px) !important;
		/* 背景和视觉效果 */
		background: #000 !important;
		border-radius: 16px !important;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4),
					0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
		overflow: hidden !important;
	}
}

/* 小屏幕优化（≤480px） */
@media (max-width: 480px) {
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame {
		/* 小屏幕：左右边距更小，最小高度稍减 */
		width: calc(100vw - 6px) !important; /* 左右各留 3px */
		max-width: calc(100vw - 6px) !important;
		min-height: calc(100vh * 0.75) !important; /* 75% 视口高度 */
		max-height: calc(100vh - 110px) !important; /* 小屏幕顶部导航更紧凑 */
	}
}

/* ===== iframe 容器统一样式 ===== */
/* 插件输出的 iframe 容器（.slots-iframe-wrap 或类似） */
/* 注意：插件可能会使用不同的 class 名称，这里列出所有可能的变体 */
.slots-game-page--jili .slots-game-hero__frame > .slots-iframe-wrap,
.slots-game-page--jili .slots-game-hero__frame > .slots-iframe-container,
.slots-game-page--jili .slots-game-hero__frame > .bs-game-frame-inner,
.slots-game-page--jili .slots-game-hero__frame > .slots-game-iframe-wrapper,
.slots-game-page--jili .slots-game-hero__frame .slots-iframe-container {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	border-radius: 16px !important;
	z-index: 50;
}

/* iframe 自身：完全填充父容器 */
.slots-game-page--jili .slots-game-hero__frame iframe,
.slots-game-page--jili .slots-game-hero__frame .slots-game-iframe,
.slots-game-page--jili .slots-game-hero__frame .slots-iframe-container iframe,
.slots-game-page--jili .slots-game-hero__frame .slots-iframe-wrap iframe,
.slots-game-page--jili .slots-game-hero__frame .slots-game-iframe-wrapper iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	/* 不允许在主题侧写任何额外 scale/transform */
	transform: none !important;
	/* 确保主题样式不再给 iframe 本身写固定 px 高度，只由外层容器决定 */
}

/* ===== 移动端：确保 iframe 完全填充容器（额外强化） ===== */
/* 只在 body.slots-game-fullscreen 下生效 */
@media (max-width: 768px) {
	/* iframe 包裹层：完全填充父容器 */
	/* slots-iframe-wrap + iframe.slots-game-iframe：铺满容器 */
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame > .slots-iframe-wrap,
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame > .slots-iframe-container,
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame > .bs-game-frame-inner,
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame > .slots-game-iframe-wrapper,
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame .slots-iframe-container {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		overflow: hidden !important;
		border-radius: 16px !important;
		z-index: 50 !important;
	}
	
	/* iframe 自身：完全填充包裹层 */
	/* iframe 自身宽高都设为 100%，不再有任何固定 px 高度或者缩放 */
	/* 不对 iframe 再做 transform: scale() 之类处理，交给外层容器控制尺寸 */
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame iframe,
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame .slots-game-iframe,
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame .slots-iframe-container iframe,
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame .slots-iframe-wrap iframe,
	body.slots-game-fullscreen .slots-game-page--jili .slots-game-hero__frame .slots-game-iframe-wrapper iframe {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		border: 0 !important;
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
		/* "多大"由 .slots-game-hero__frame 决定，iframe 只负责铺满这个框 */
	}
}

/* ===== 2.2 内容区域 ===== */
.slots-game-page--jili .slots-game-content {
	position: relative;
	width: 100%;
	padding: 2rem 0;
}

.slots-game-content__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* PC 端：两列布局 */
@media (min-width: 1024px) {
	.slots-game-page--jili .slots-game-content__container {
		display: grid;
		grid-template-columns: 1fr 350px;
		gap: 2rem;
		align-items: start;
	}
	
	.slots-game-page--jili .slots-game-content__info {
		/* 左列：游戏说明/特性/规则等，宽度较大（60~70%） */
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}
	
	.slots-game-page--jili .slots-game-content__side {
		/* 右列：合作广告和推荐游戏 */
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		position: sticky;
		top: 2rem;
	}
}

/* 移动端：单列纵向堆叠 */
@media (max-width: 1023px) {
	.slots-game-page--jili .slots-game-content__container {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}
	
	.slots-game-page--jili .slots-game-content__info {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}
	
	.slots-game-page--jili .slots-game-content__side {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}
}

/* ===== 信息卡片样式（参考 JILI / BitStarz） ===== */
.slots-game-page--jili .slots-game-info-card {
	background: rgba(15, 15, 25, 0.9);
	border-radius: 16px;
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.slots-game-info-card__title {
	font-size: 1.3rem;
	font-weight: 600;
	color: #ffffff;
	margin: 0 0 1.5rem 0;
	padding-bottom: 1rem;
	border-bottom: 2px solid rgba(49, 225, 255, 0.4);
}

.slots-game-info-card__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.slots-game-info-card__item:last-child {
	border-bottom: none;
}

.slots-game-info-card__label {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 600;
}

.slots-game-info-card__value {
	font-size: 0.95rem;
	color: #ffffff;
	font-weight: 400;
}

.slots-game-info-card__content {
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.75;
}

/* ===== 侧边栏卡片样式 ===== */
.slots-game-page--jili .slots-game-side-card {
	background: rgba(15, 15, 25, 0.9);
	border-radius: 16px;
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.slots-game-side-card__header {
	margin-bottom: 1rem;
}

.slots-game-side-card__title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid rgba(49, 225, 255, 0.4);
}

.slots-game-side-card__content {
	/* 内容区域 */
}

/* ===== 游戏特性列表 ===== */
.slots-game-page--jili .slots-game-features {
	/* 游戏特性列表样式 */
}

/* ===== 游戏容器下方广告区域 ===== */
.slots-game-page--jili .slots-game-hero-ads {
	width: 100%;
	padding: 1rem 0;
	background: transparent;
}

.slots-game-hero-ads__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.slots-game-hero-ads__banner {
	width: 100%;
}

.slots-game-hero-ads__sidebar {
	width: 100%;
}

/* PC 端：隐藏游戏容器下方的广告（在侧边栏显示） */
@media (min-width: 1024px) {
	.slots-game-page--jili .slots-game-hero-ads {
		display: none;
	}
}

/* ===== 游戏截图网格 ===== */
.slots-game-page--jili .slots-game-shots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.slots-game-shot-card {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.slots-game-shot-card__header {
	padding: 0.75rem 1rem;
	background: rgba(0, 0, 0, 0.4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
}

.slots-game-shot-card__image {
	width: 100%;
	padding-top: 56.25%; /* 16:9 比例 */
	position: relative;
	overflow: hidden;
	background: radial-gradient(circle at center, #191927 0, #050509 80%);
}

.slots-game-shot-card__image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ===== 移动端优化 ===== */
@media (max-width: 768px) {
	.slots-game-page--jili .slots-breadcrumb-bar {
		padding: 1rem 0;
	}
	
	.slots-breadcrumb-bar__container {
		padding: 0 1rem;
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	
	.slots-breadcrumb-bar__title {
		font-size: 1.2rem;
	}
	
	/* 游戏容器下方广告区域（移动端显示） */
	.slots-game-page--jili .slots-game-hero-ads {
		display: block;
		padding: 1rem;
	}
	
	.slots-game-hero-ads__container {
		padding: 0;
	}
	
	.slots-game-page--jili .slots-game-content {
		padding: 1.5rem 0;
	}
	
	.slots-game-content__container {
		padding: 0 1rem;
	}
	
	.slots-game-page--jili .slots-game-info-card,
	.slots-game-page--jili .slots-game-side-card {
		padding: 1.25rem;
	}
	
	/* 移动端：游戏截图横向滚动 */
	.slots-game-page--jili .slots-game-shots {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: rgba(49, 225, 255, 0.3) transparent;
		padding-bottom: 0.5rem;
	}
	
	.slots-game-page--jili .slots-game-shots::-webkit-scrollbar {
		height: 4px;
	}
	
	.slots-game-page--jili .slots-game-shots::-webkit-scrollbar-track {
		background: transparent;
	}
	
	.slots-game-page--jili .slots-game-shots::-webkit-scrollbar-thumb {
		background: rgba(49, 225, 255, 0.3);
		border-radius: 2px;
	}
	
	.slots-game-page--jili .slots-game-shots::-webkit-scrollbar-thumb:hover {
		background: rgba(49, 225, 255, 0.5);
	}
	
	.slots-game-page--jili .slots-game-shot-card {
		flex: 0 0 280px; /* 固定宽度，不收缩 */
		min-width: 280px;
		scroll-snap-align: start;
	}
	
	/* 移动端：相关游戏横向滚动 */
	.slots-game-page--jili .slots-game-side-card__content {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: rgba(49, 225, 255, 0.3) transparent;
		padding-bottom: 0.5rem;
		display: flex;
		flex-direction: row;
		gap: 1rem;
	}
	
	.slots-game-page--jili .slots-game-side-card__content::-webkit-scrollbar {
		height: 4px;
	}
	
	.slots-game-page--jili .slots-game-side-card__content::-webkit-scrollbar-track {
		background: transparent;
	}
	
	.slots-game-page--jili .slots-game-side-card__content::-webkit-scrollbar-thumb {
		background: rgba(49, 225, 255, 0.3);
		border-radius: 2px;
	}
	
	.slots-game-page--jili .slots-game-side-card__content::-webkit-scrollbar-thumb:hover {
		background: rgba(49, 225, 255, 0.5);
	}
	
	/* 相关游戏列表横向布局（支持 .bs-related-games__list） */
	.slots-game-page--jili .slots-game-side-card__content .bs-related-games__list,
	.slots-game-page--jili .slots-game-side-card__content > .bs-related-games__list {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
	}
	
	/* 相关游戏卡片固定宽度（支持多种可能的class） */
	.slots-game-page--jili .slots-game-side-card__content .bs-related-game-card,
	.slots-game-page--jili .slots-game-side-card__content .game-card,
	.slots-game-page--jili .slots-game-side-card__content .bs-game-card,
	.slots-game-page--jili .slots-game-side-card__content > a,
	.slots-game-page--jili .slots-game-side-card__content > div,
	.slots-game-page--jili .slots-game-side-card__content article {
		flex: 0 0 160px;
		min-width: 160px;
		scroll-snap-align: start;
		width: 160px;
	}
}

@media (max-width: 480px) {
	.slots-breadcrumb-bar__container {
		padding: 0 0.75rem;
	}
	
	.slots-breadcrumb-bar__title {
		font-size: 1.1rem;
	}
	
	.slots-game-content__container {
		padding: 0 0.75rem;
	}
	
	.slots-game-page--jili .slots-game-info-card,
	.slots-game-page--jili .slots-game-side-card {
		padding: 1rem;
	}
}