/*
	Icebound Riches Reel — Bonus Game: ICEBOUND TARGET BONUS
	- Replaces the previous Plinko / peg-drop bonus entirely
	- Overlay sits on top of the game and blurs it using backdrop-filter
*/

.itb {
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: none;
	place-items: stretch;
	pointer-events: none;
}

.itb[aria-hidden="false"] {
	display: grid;
	pointer-events: auto;
}

.itb__blur {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.06);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.itb__bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 420ms ease;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: drop-shadow(0 18px 30px rgba(0,0,0,0.25));
}

.itb.is-open .itb__bg {
	opacity: 1;
}

.itb__snow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 420ms ease;
}

.itb.is-open .itb__snow {
	opacity: 1;
}

.itb__snowP {
	position: absolute;
	left: var(--x);
	top: -10px;
	width: calc(2px * var(--s));
	height: calc(2px * var(--s));
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	filter: drop-shadow(0 0 8px rgba(220, 252, 255, 0.35));
	opacity: 0.9;
	animation: itbSnowFall var(--d) linear infinite;
	animation-delay: var(--delay);
}

@keyframes itbSnowFall {
	0% { transform: translate3d(0, 0, 0); opacity: 0; }
	8% { opacity: 0.9; }
	100% { transform: translate3d(-18px, 112vh, 0); opacity: 0.0; }
}

.itb__stage {
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: clamp(10px, 2.5vw, 18px);
	padding: clamp(12px, 3vw, 20px);
}

.itb__top {
	display: grid;
	justify-items: center;
	gap: clamp(8px, 2vw, 12px);
}

.itb__total {
	font-weight: 1000;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: clamp(14px, 3.2vw, 20px);
	color: rgba(255,255,255,0.96);
	text-shadow: 0 3px 18px rgba(0,0,0,0.68);
	padding: 10px 14px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.itb__total.is-pop {
	animation: itbPop 280ms cubic-bezier(0.15, 0.9, 0.2, 1) both;
}

@keyframes itbPop {
	0% { transform: scale(1); }
	45% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

.itb__titles {
	text-align: center;
}

.itb__title {
	font-weight: 1000;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: clamp(22px, 5.6vw, 40px);
	color: rgba(255,255,255,0.95);
	text-shadow: 0 3px 16px rgba(0,0,0,0.62);
}

.itb__subtitle {
	font-weight: 900;
	letter-spacing: 0.02em;
	font-size: clamp(14px, 3.6vw, 18px);
	color: rgba(220,252,255,0.92);
	text-shadow: 0 3px 14px rgba(0,0,0,0.62);
}

.itb__targets {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(10px, 3.2vw, 22px);
	flex-wrap: nowrap;
	width: 100%;
	max-width: min(980px, 96vw);
	margin: 0 auto;
	padding: clamp(8px, 2.4vw, 16px);
}

.itb-target {
	appearance: none;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	width: clamp(54px, 16vw, 140px);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	filter: drop-shadow(0 14px 24px rgba(0,0,0,0.42));
}

.itb-target[disabled] {
	opacity: 0.92;
	cursor: not-allowed;
}

.itb-targetBounce {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	transition: transform 160ms ease, filter 160ms ease;
}

/* HOVER EFFECT (as specified) */
.itb-target:hover .itb-targetBounce {
	transform: scale(1.08);
	filter: drop-shadow(0 0 20px cyan);
	cursor: pointer;
}

/* TARGET HIT ANIMATION (as specified) */
.itb-targetBounce.hit {
	animation: targetBounce 0.3s ease;
}

@keyframes targetBounce {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

.itb-targetSpin {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}

.itb-targetImg,
.itb-rewardImg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.itb-rewardImg[aria-hidden="true"] {
	display: none;
}

.itb__snowball {
	position: absolute;
	width: clamp(44px, 12vw, 86px);
	height: auto;
	left: 0;
	top: 0;
	transform: translate3d(0,0,0);
	will-change: transform;
	pointer-events: none;
	filter: drop-shadow(0 16px 24px rgba(0,0,0,0.40));
	z-index: 6;
}

.itb__impact {
	position: absolute;
	width: clamp(56px, 14vw, 110px);
	height: auto;
	transform: translate3d(-50%, -50%, 0) scale(0.65);
	opacity: 0;
	animation: itbImpact 520ms ease-out both;
	pointer-events: none;
	filter: drop-shadow(0 12px 22px rgba(0,0,0,0.35));
	z-index: 7;
}

@keyframes itbImpact {
	0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.65); }
	30% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.06); }
	100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.12); }
}

.itb__stage.is-shake {
	animation: itbShake 240ms ease-in-out both;
}

@keyframes itbShake {
	0% { transform: translate3d(0,0,0); }
	20% { transform: translate3d(-6px, 2px, 0); }
	40% { transform: translate3d(6px, -2px, 0); }
	60% { transform: translate3d(-4px, -1px, 0); }
	80% { transform: translate3d(4px, 1px, 0); }
	100% { transform: translate3d(0,0,0); }
}

.itb__final {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 180ms ease;
}

.itb__final[aria-hidden="false"] {
	opacity: 1;
}

.itb__finalText {
	font-weight: 1000;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: clamp(26px, 7.2vw, 56px);
	color: rgba(255,255,255,0.98);
	text-shadow: 0 4px 26px rgba(0,0,0,0.78);
	animation: itbFinalPop 520ms cubic-bezier(0.15, 0.9, 0.2, 1) both;
}

@keyframes itbFinalPop {
	0% { transform: scale(0.96); opacity: 0; }
	55% { transform: scale(1.06); opacity: 1; }
	100% { transform: scale(1.02); opacity: 1; }
}

/* Small mobile tightening */
@media (max-width: 420px) {
	.itb__targets {
		gap: 10px;
	}
	.itb-target {
		width: clamp(48px, 17vw, 92px);
	}
}

/* Mobile landscape tightening (short viewport height) */
@media (orientation: landscape) and (max-height: 520px) {
	.itb__stage {
		gap: 8px;
		padding: 10px 12px;
		padding:
			calc(10px + env(safe-area-inset-top))
			calc(12px + env(safe-area-inset-right))
			calc(10px + env(safe-area-inset-bottom))
			calc(12px + env(safe-area-inset-left));
	}

	.itb__top {
		gap: 6px;
	}

	.itb__total {
		font-size: clamp(12px, 2.2vw, 16px);
		padding: 6px 10px;
		border-radius: 14px;
	}

	.itb__title {
		font-size: clamp(18px, 4.2vw, 30px);
		letter-spacing: 0.10em;
	}

	.itb__subtitle {
		font-size: clamp(12px, 2.8vw, 16px);
	}

	.itb__targets {
		max-width: 100vw;
		padding: 6px;
		gap: clamp(8px, 2vw, 14px);
	}

	/* Size targets by height in landscape to avoid cropping */
	.itb-target {
		width: clamp(46px, 22vh, 112px);
	}

	.itb__snowball {
		width: clamp(38px, 16vh, 76px);
	}

	.itb__impact {
		width: clamp(48px, 18vh, 96px);
	}
}

/* Extra-tight landscape (very short height) */
@media (orientation: landscape) and (max-height: 380px) {
	.itb__stage {
		gap: 6px;
		padding: 8px 10px;
		padding:
			calc(8px + env(safe-area-inset-top))
			calc(10px + env(safe-area-inset-right))
			calc(8px + env(safe-area-inset-bottom))
			calc(10px + env(safe-area-inset-left));
	}
	.itb__title { font-size: clamp(16px, 4vw, 26px); }
	.itb__total { font-size: clamp(11px, 2vw, 14px); }
	.itb-target { width: clamp(44px, 20vh, 100px); }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
	.itb__snowP,
	.itb__impact,
	.itb__stage.is-shake,
	.itb__total.is-pop,
	.itb__finalText,
	.itb-targetBounce.hit {
		animation: none !important;
		transition: none !important;
	}
}