/* Lucky Clover Trail Bonus (game-local overlay) */

.lctr-overlay {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 1000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.lctr-overlay[aria-hidden="false"] {
	opacity: 1;
	pointer-events: auto;
}

.lctr-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 38, 82, 0.35);
	backdrop-filter: blur(3px);
}

.lctr-bonusBg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.lctr-bonusBgImg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lctr-panel {
	position: relative;
	width: min(92vw, 560px);
	max-height: min(86vh, 720px);
	overflow: hidden;
	border-radius: 18px;
	background: rgba(18, 20, 28, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.lctr-panel.lctr-panel--pickone {
	position: absolute;
	inset: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	border-radius: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	max-height: none;
	z-index: 1;
}

.lctr-top {
	padding: 14px 16px;
	text-align: center;
}

.lctr-overlay--pickone .lctr-top {
	display: none;
}

.lctr-title {
	margin: 0;
	font-size: 18px;
	letter-spacing: 0.3px;
}

.lctr-body {
	position: relative;
	padding: 14px 14px 18px;
}

.lctr-overlay--pickone .lctr-body {
	padding: 0;
	width: 100%;
	height: 100%;
}

.lctr-titleImgWrap {
	position: absolute;
	left: 50%;
	top: -20vh;
	transform: translateX(-50%);
	width: min(86vw, 760px);
	z-index: 2;
	pointer-events: none;
}

.lctr-titleImg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}

.lctr-path {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--lctr-cols, 3), 1fr);
	grid-template-rows: repeat(var(--lctr-rows, 7), 1fr);
	gap: 10px 12px;
	align-items: center;
	justify-items: center;
	min-height: 360px;
}

/* Pick-one mode: three large clovers */
.lctr-path.lctr-path--three {
	position: absolute;
	inset: 0;
	display: block;
	min-height: 100%;
}

.lctr-clover {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	width: min(260px, 34vmin);
	height: min(260px, 34vmin);
	cursor: pointer;
	touch-action: manipulation;
	transform: translate3d(0, 0, 0);
	transition: transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 180ms ease;
}

@keyframes lctrFloat {
	0%,
	100% {
		transform: translate(-50%, -50%) translateY(0px);
	}
	50% {
		transform: translate(-50%, -50%) translateY(-10px);
	}
}

.lctr-path.lctr-path--three .lctr-clover {
	position: absolute;
	left: calc(var(--slotX, 50) * 1%);
	top: calc(var(--slotY, 70) * 1%);
	transform: translate(-50%, -50%);
	animation: lctrFloat 2.8s ease-in-out infinite;
}

/* Mobile landscape fit (do not affect desktop) */
@media (hover: none) and (orientation: landscape) and (max-height: 520px) {
	.lctr-titleImgWrap {
		top: -5vh;
		width: min(24vw, 520px);
	}
	.lctr-clover {
		width: min(220px, 30vmin);
		height: min(220px, 30vmin);
	}
	.lctr-path.lctr-path--three .lctr-clover {
		top: calc(var(--slotYLandscape, var(--slotY, 70)) * 1%);
	}
}

.lctr-path.lctr-path--three .lctr-clover:nth-child(2) {
	animation-duration: 3.1s;
}

.lctr-path.lctr-path--three .lctr-clover:nth-child(3) {
	animation-duration: 2.6s;
}


.lctr-clover.is-disabled {
	opacity: 0.55;
	cursor: default;
	filter: grayscale(0.2);
}

.lctr-clover.is-enabled {
	opacity: 1;
}

.lctr-clover.is-activating {
	transform: translate(-50%, -50%) scale(1.06);
}

.lctr-clover.is-glow {
	filter: drop-shadow(0 0 10px rgba(126, 255, 191, 0.65));
}

.lctr-cloverInner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.lctr-face {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	backface-visibility: hidden;
}

.lctr-face--back {
	transform: rotateY(180deg);
}

.lctr-clover.is-flipped .lctr-cloverInner {
	transform: rotateY(180deg);
}

.lctr-cloverImg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: translateZ(0);
}

.lctr-prizeText {
	font-weight: 900;
	font-size: 22px;
	letter-spacing: 0.3px;
	color: rgba(255, 255, 255, 0.98);
	text-shadow:
		0 2px 10px rgba(0, 0, 0, 0.65),
		0 0 14px rgba(126, 255, 191, 0.45);
}

@media (max-width: 420px) {
	.lctr-prizeText {
		font-size: 20px;
	}
}

.lctr-reward {
	position: absolute;
	inset: 8px;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: scale(0.92);
	transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.lctr-clover.is-revealed .lctr-reward {
	opacity: 1;
	transform: scale(1);
}

.lctr-rewardImg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lctr-cashBg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lctr-cashText {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.3px;
	color: rgba(255, 255, 255, 0.96);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
	transform: translateY(1px);
}

.lctr-sparkle {
	position: absolute;
	inset: -6px;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 55%),
		radial-gradient(circle at 70% 65%, rgba(160, 255, 214, 0.65), rgba(160, 255, 214, 0) 58%);
	transform: scale(0.85);
	transition: opacity 180ms ease, transform 240ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* Drop-in entrance (1 at a time) */
@keyframes lctrDropIn {
	0% {
		transform: translate(-50%, -50%) translateY(-56px) scale(0.96);
		opacity: 0;
		filter: drop-shadow(0 0 0 rgba(126, 255, 191, 0));
	}
	70% {
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) translateY(0) scale(1);
		opacity: 1;
		filter: drop-shadow(0 0 12px rgba(126, 255, 191, 0.45));
	}
}

@keyframes lctrPulseGlow {
	0%,
	100% {
		filter: drop-shadow(0 0 10px rgba(126, 255, 191, 0.55));
	}
	50% {
		filter: drop-shadow(0 0 18px rgba(126, 255, 191, 0.85));
	}
}

.lctr-clover.is-entering {
	opacity: 0;
	animation:
		lctrDropIn 620ms cubic-bezier(0.2, 0.9, 0.2, 1) both,
		lctrPulseGlow 1100ms ease-in-out infinite;
	animation-delay:
		calc(var(--enterDelay, 0) * 240ms),
		calc(var(--enterDelay, 0) * 240ms + 520ms);
}

.lctr-clover:not(.is-entering):not(.is-disabled):hover,
.lctr-clover:not(.is-entering):not(.is-disabled):focus-visible {
	filter: drop-shadow(0 0 18px rgba(126, 255, 191, 0.85));
	transform: scale(1.03);
}

.lctr-clover.is-entering .lctr-sparkle {
	opacity: 1;
	transform: scale(1.05);
}

.lctr-clover.is-revealed .lctr-sparkle {
	opacity: 1;
	transform: scale(1.05);
}

.lctr-vine {
	position: absolute;
	height: 30px;
	transform-origin: left center;
	pointer-events: none;
	filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}

.lctr-vineImg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.lctr-vine.is-growing {
	transition: transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.lctr-end {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.52);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.lctr-end.is-show {
	opacity: 1;
	pointer-events: auto;
}

.lctr-endInner {
	width: min(84%, 340px);
	text-align: center;
	padding: 16px 14px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.lctr-endLabel {
	font-weight: 700;
	opacity: 0.9;
	margin-bottom: 8px;
}

.lctr-endValue {
	font-size: 22px;
	font-weight: 900;
	margin-bottom: 12px;
}

/* Fade reels slightly while bonus is active */
body.lctr-bonusActive .nh-artWindow {
	opacity: 0.45;
	transition: opacity 220ms ease;
	filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
	.lctr-overlay,
	.lctr-clover,
	.lctr-reward,
	.lctr-sparkle,
	.lctr-vine.is-growing,
	.lctr-end {
		transition: none !important;
	}
}