.announcement-bar {
	background: #cb93ff;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	padding: 0;
	overflow: hidden;
	border-radius: 5px;
}

.announcement-container {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.announcement-label-img {
	background-color: #8400ff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 25px;
}

.announcement-label-img img {
	height: 18px;
	width: auto;
	display: block;
}

.announcement-content {
	position: relative;
	overflow: hidden;
	flex: 1;
}

.announcement-text {
	font-size: 1.3rem;
	display: inline-block;
	white-space: nowrap;
	animation: scrollText 60s linear infinite;
}

.announcement-text:hover {
	animation-play-state: paused;
	cursor: pointer;
}

@keyframes scrollText {
	from {
		transform: translateX(30%);
	}

	to {
		transform: translateX(-100%);
	}
}

.home-menubar-btns {
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}

.home-menubar-btn {
	background-color: #fff0;
	border: none;
	color: #333;
	font-weight: 600;
	font-size: 14px;
	padding: 8px 30px;
	border-radius: 5px;
	transition: all 0.2s ease;
}

.home-menubar-btn-mobile {
	background-color: #fff0;
	border: none;
	color: #333;
	font-weight: 600;
	font-size: 14px;
	padding: 8px 20px;
	border-radius: 5px;
	transition: all 0.2s ease;
}

.home-menubar-btn.active {
	background-color: #7b00ee;
	color: #fff;
}

.home-menubar-btn-mobile.active {
	background-color: #7b00ee;
	color: #fff;
}

.home-menubar-btn:focus {
	outline: none;
}

.home-menubar-btn-mobile:focus {
	outline: none;
}

.category-content {
	display: none;
}

.category-content-mobile {
	display: none;
}

.promo-nav-bar {
	background-color: #fcebff;
	border-radius: 8px;
}

.promo-nav-btn {
	background: none;
	border: none;
	color: #c002ff;
	font-weight: 600;
	font-size: 15px;
	padding: 10px 20px;
	margin: 0 10px;
	position: relative;
	cursor: pointer;
	transition: color 0.2s ease;
}

.promo-nav-btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #fff0;
	transition: background 0.2s ease;
}

.promo-nav-btn.active {
	color: #c002ff;
}

.promo-nav-btn.active::after {
	background: #c002ff;
}

.desktop-game-image {
	position: relative;
	transition: transform 0.3s ease-in-out;
}

.desktop-game-image:hover {
	transform: scale(1.05);
}

.home-banner {
	width: 100%;
	height: auto;
	display: block;
}

.home-banner-1 {
	width: 100%;
	height: 100%;
}

.home-1 {
	position: relative;
	display: inline-block;
}

.home-2 {
	background: linear-gradient(0deg, #ff0000 0%, #1c377c 56.73%, #3364e2 100%);
}

.jackport-count {
	font-family: "Poppins", sans-serif;
	font-weight: 800;
	position: absolute;
	top: 30%;
	right: 8%;
	font-size: 60px;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	font-style: normal;
	letter-spacing: 1px;
	text-shadow: 0 0 10px rgb(0 0 0 / 0.5);
}

.jackport-mobile {
	position: relative;
}

.jackport-count-mobile {
	font-family: "Poppins", sans-serif;
	position: absolute;
	top: 50%;
	right: 11%;
	font-weight: 700;
	font-size: 5vw;
	color: #fff;
}

.jackpot-digit-mobile {
	display: inline-block;
	position: relative;
	min-width: 0.6em;
	overflow: hidden;
	transform: skew(-10deg);
}

.jackpot-digit-mobile span {
	display: block;
	transition: transform 0.4s ease-in-out;
}

.jackpot-digit-mobile .new {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
}

.live-winlose {
	border: 3px solid #e1e3e7;
	border-radius: 25px;
}

.winlose-table tr td {
	border-top: 0 !important;
	border-bottom: 1px solid #ddd !important;
}

.mySwiper {
	width: 100%;
	height: 330px;
	margin: 0 auto;
	overflow: hidden;
}

.mySwiper .swiper-slide {
	background: #000;
	width: 800px;
	height: 290px;
	border-radius: 20px;
	overflow: hidden;
	transition:
		transform 0.5s ease,
		opacity 0.5s ease;
}

.mySwiper .swiper-slide img {
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

.mySwiper .swiper-slide-active {
	transform: scale(1.1);
	z-index: 10;
}

.mySwiper .swiper-slide-prev,
.mySwiper .swiper-slide-next {
	opacity: 0.8;
}

.content-wrap-home {
	background: #fff;
	background-size: 100% 100%;
	min-height: 520px !important;
}

.promodetail-home {
	min-height: 4rem;
}

.itemTitle-home {
	font-size: 1.3rem;
	font-weight: 700;
	color: #a115f1;
}

.promoBox figure {
	position: relative;
	margin-bottom: 0;
}

.promoBox figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: "";
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left,
			#fff0 0%,
			rgb(255 255 255 / 0.3) 100%);
	background: linear-gradient(to right, #fff0 0%, rgb(255 255 255 / 0.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}

.promoBox figure:hover::before {
	-webkit-animation: shine 0.75s;
	animation: shine 0.75s;
}

.promoBox:hover figure img {
	transform: scale(1.08);
	transition: transform ease 1.5s;
}

.homeGameTitle {
	padding: 10 auto;
}

/* ── 呼吸缩放动画 ── */
@keyframes neonBreathe {

	0%,
	100% {
		transform: scale(0.9);
	}

	50% {
		transform: scale(1);
	}
}

/* ── 流水旋转动画 ── */
@keyframes borderRotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.home-redrict__card {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: #111;
	padding: 8px;
	cursor: pointer;
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

.home-redrict__card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: conic-gradient(transparent,
			#b43cff, #e0aaff, #b43cff,
			transparent 25%,
			transparent 50%,
			#b43cff, #e0aaff, #b43cff,
			transparent 75%
		);
	z-index: 1;
	opacity: 0;
}

.home-redrict__card.is-ready {
	opacity: 1;
	animation: neonBreathe 1s ease-in-out infinite;
}

.home-redrict__card.is-ready::before {
	opacity: 1;
	animation: borderRotate 2s linear infinite;
}

.home-redrict__card.is-pink::before {
	/* #ff00ff: 强力电光粉 (Magenta / Electric Pink)
       #ff007f: 霓虹深粉 (Neon Deep Pink)
    */
	background: conic-gradient(transparent,
			#ff00ff, #ff007f, #ff00ff,
			/* 第一条流水 (更饱和的粉色) */
			transparent 20%,
			/* 缩小发光范围，让线条看起来更锐利、更粉 */
			transparent 50%,
			#ff00ff, #ff007f, #ff00ff,
			/* 第二条流水 (更饱和的粉色) */
			transparent 70%);
}

/* 悬停处理 */
.home-redrict__card.is-ready:hover {
	transform: scale(1.06) translateY(-2px);
	animation-play-state: paused;
}

.home-redrict__card.is-ready:hover::before {
	animation-duration: 1.5s;
}

/* 内部遮罩层级确保在旋转层之上 */
.home-redrict__inner {
	position: relative;
	background: #000;
	border-radius: 10px;
	z-index: 2;
	/* 高于 ::before 的 z-index: 1 */
	width: 100%;
	height: 100%;
	overflow: hidden;
}