:root{
	--dvg-overlay-z: 80;
}

/* Bonus trigger transition (reels) */
.dv-bonusTriggerShade{
	position: fixed;
	inset: 0;
	z-index: calc(var(--dvg-overlay-z) - 2);
	background: rgba(0,0,0,0.0);
	backdrop-filter: blur(0px);
	opacity: 0;
	transition: opacity 240ms ease-out, background 240ms ease-out, backdrop-filter 240ms ease-out;
	pointer-events: none;
}

.dv-bonusTriggerShade.is-on{
	opacity: 1;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(7px);
}

/* Subtle grid dim/blur; applied to .nh-artWindow */
.dv-bonusTriggering{
	filter: blur(1.8px) brightness(0.85) saturate(0.9);
	transition: filter 240ms ease-out, opacity 240ms ease-out;
}

@keyframes dvBonusReelJitter{
	0%{ transform: translate3d(0,0,0) scale(1); }
	50%{ transform: translate3d(0.2%, -0.2%, 0) scale(1.01); }
	100%{ transform: translate3d(-0.2%, 0.2%, 0) scale(1); }
}

/* Animate reel tiles during the trigger moment */
.nh-artWindow.dv-bonusTriggering .nh-cell{
	animation: dvBonusReelJitter 260ms ease-in-out infinite;
}

.dv-bonusFaded{
	opacity: 0.08;
	transition: opacity 220ms ease-out;
}

@keyframes dvBonusTilePulse{
	0%{ transform: translate3d(0,0,0) scale(1); }
	50%{ transform: translate3d(0,0,0) scale(1.08); }
	100%{ transform: translate3d(0,0,0) scale(1); }
}

.nh-cell.is-bonusTile{
	animation: dvBonusTilePulse 520ms cubic-bezier(0.2,0.8,0.2,1) infinite;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.10) inset, 0 0 26px rgba(124,92,255,0.25);
	border-color: rgba(124,92,255,0.55);
}

.dv-bonusTilePop{
	position: fixed;
	left: 0;
	top: 0;
	width: 10px;
	height: 10px;
	z-index: calc(var(--dvg-overlay-z) - 1);
	pointer-events: none;
	transform: translate3d(0,0,0);
	will-change: transform, opacity;
}

.dv-bonusTilePopImg{
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55)) drop-shadow(0 0 28px rgba(124,92,255,0.18));
}

/* Bonus safe game overlay */
#bonusVaultGame{
	position: fixed;
	inset: 0;
	z-index: var(--dvg-overlay-z);
	display: none;
	place-items: center;
}

#bonusVaultGame[aria-hidden="false"]{
	display: grid;
}

.dvg__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.70);
	backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity 260ms ease-out;
}

#bonusVaultGame.is-open .dvg__backdrop{ opacity: 1; }

.dvg__panel{
	position: relative;
	width: min(92vw, 560px);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: translate3d(0, 10px, 0) scale(0.98);
	transition: opacity 260ms ease-out, transform 260ms cubic-bezier(0.2,0.8,0.2,1);
}

#bonusVaultGame.is-open .dvg__panel{
	opacity: 1;
	transform: translate3d(0, 0px, 0) scale(1);
}

.dvg__safeWrap{
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}

/* Reward anticipation FX layers */
.dvg__fx{
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.dvg__burstLight{
	position: absolute;
	left: 50%;
	top: 54%;
	width: 64%;
	aspect-ratio: 1 / 1;
	transform: translate3d(-50%, -50%, 0) scale(0.25);
	opacity: 0;
	background:
		radial-gradient(circle at 50% 52%, rgba(255, 230, 128, 0.95) 0%, rgba(255, 198, 64, 0.55) 30%, rgba(255, 140, 16, 0.20) 55%, rgba(0,0,0,0.0) 72%);
	filter: blur(0.5px);
	mix-blend-mode: screen;
	will-change: transform, opacity;
}

.dvg__burstLight.is-red{
	background:
		radial-gradient(circle at 50% 52%, rgba(255, 84, 84, 0.75) 0%, rgba(255, 58, 58, 0.32) 36%, rgba(255, 30, 30, 0.16) 56%, rgba(0,0,0,0.0) 72%);
}

.dvg__burstLight.is-play{
	animation: dvgLightBurst 300ms cubic-bezier(0.14, 0.9, 0.18, 1) both;
}

@keyframes dvgLightBurst{
	0%{ opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.25); }
	22%{ opacity: 1; transform: translate3d(-50%, -50%, 0) scale(0.90); }
	60%{ opacity: 0.85; transform: translate3d(-50%, -50%, 0) scale(1.12); }
	100%{ opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.32); }
}

.dvg__coinLayer{
	position: absolute;
	left: 50%;
	top: 56%;
	width: 1px;
	height: 1px;
	transform: translate3d(-50%, -50%, 0);
	will-change: transform;
}

.dvg__coin{
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 999px;
	opacity: 0;
	background:
		radial-gradient(circle at 32% 30%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.0) 34%),
		radial-gradient(circle at 50% 54%, rgba(255, 232, 140, 1) 0%, rgba(255, 190, 64, 1) 52%, rgba(198, 118, 18, 1) 100%);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.12) inset,
		0 10px 18px rgba(0,0,0,0.35);
	filter: drop-shadow(0 0 10px rgba(255, 214, 120, 0.20));
	transform: translate3d(0,0,0) scale(0.6) rotate(0deg);
	will-change: transform, opacity;
	animation: dvgCoinBurst 280ms cubic-bezier(0.16, 0.9, 0.18, 1) both;
}

@keyframes dvgCoinBurst{
	0%{ opacity: 0; transform: translate3d(0,0,0) scale(0.60) rotate(0deg); }
	14%{ opacity: 1; }
	100%{ opacity: 0; transform: translate3d(var(--tx, 50px), var(--ty, -50px), 0) scale(1.10) rotate(var(--rot, 180deg)); }
}

.dvg__safeDoor{
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: translate3d(0,0,0);
	will-change: transform;
	filter: drop-shadow(0 20px 34px rgba(0,0,0,0.55));
}

.dvg__safeDoor.is-opening{
	transform-origin: 16% 50%;
	animation: dvgDoorSwing 900ms cubic-bezier(0.16, 0.9, 0.12, 1) forwards;
}

@keyframes dvgDoorSwing{
	0%{ transform: perspective(900px) rotateY(0deg); }
	60%{ transform: perspective(900px) rotateY(-62deg) translateX(-2%); }
	100%{ transform: perspective(900px) rotateY(-72deg) translateX(-2%); }
}

.dvg__dial{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 38%;
	height: auto;
	transform: translate3d(-50%, -50%, 0) rotate(var(--dvgDialRot, 0deg));
	transform-origin: 50% 50%;
	will-change: transform, filter;
	filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45)) drop-shadow(0 0 var(--dvgDialGlow, 0px) var(--dvgDialGlowColor, rgba(46, 242, 255, 0.45)));
	opacity: 1;
	transition: opacity 180ms ease-out;
	user-select: none;
	-webkit-user-drag: none;
	cursor: grab;
	touch-action: none;
}

.dvg__dial.is-hidden{
	opacity: 0;
}

.dvg__dial.is-dragging{ cursor: grabbing; }

.dvg__reward{
	position: absolute;
	left: 50%;
	top: 58%;
	transform: translate3d(-50%, -50%, 0);
	width: 64%;
	text-align: center;
	display: grid;
	place-items: center;
	gap: 8px;
	font-weight: 1000;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.96);
	text-shadow: 0 4px 18px rgba(0,0,0,0.75);
	opacity: 0;
	transition: opacity 220ms ease-out;
	pointer-events: none;
}

.dvg__pillow{
	display: none;
	width: min(56%, 240px);
	aspect-ratio: 2 / 1.15;
	border-radius: 999px;
	background:
		radial-gradient(circle at 35% 30%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.0) 42%),
		radial-gradient(circle at 50% 70%, rgba(255, 186, 94, 1) 0%, rgba(255, 134, 34, 1) 48%, rgba(196, 78, 8, 1) 100%);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.12) inset,
		0 18px 30px rgba(0,0,0,0.55);
	filter: drop-shadow(0 0 18px rgba(255, 92, 92, 0.10));
}

.dvg__reward[data-kind="empty"] .dvg__pillow{
	display: block;
}

.dvg__reward.is-show{ opacity: 1; }

.dvg__rewardImg{
	width: min(62%, 260px);
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 16px 26px rgba(0,0,0,0.55));
}

.dvg__rewardText{
	font-size: clamp(18px, 4.8vw, 28px);
}

@media (prefers-reduced-motion: reduce) {
	.dvg__reward[data-result="win"].is-show .dvg__rewardImg,
	.dvg__reward[data-result="win"].is-show .dvg__rewardText {
		animation: none !important;
	}
}

@keyframes dvgRewardPopIn {
	0% { transform: translate3d(0, 10px, 0) scale(0.78); opacity: 0; filter: brightness(0.95); }
	60% { transform: translate3d(0, 0px, 0) scale(1.06); opacity: 1; filter: brightness(1.12); }
	100% { transform: translate3d(0, 0px, 0) scale(1); opacity: 1; filter: brightness(1); }
}

@keyframes dvgRewardGlowPulse {
	0% { filter: drop-shadow(0 16px 26px rgba(0,0,0,0.55)) drop-shadow(0 0 0px rgba(46, 242, 255, 0.0)); }
	45% { filter: drop-shadow(0 16px 26px rgba(0,0,0,0.55)) drop-shadow(0 0 26px rgba(46, 242, 255, 0.35)); }
	100% { filter: drop-shadow(0 16px 26px rgba(0,0,0,0.55)) drop-shadow(0 0 0px rgba(46, 242, 255, 0.0)); }
}

@keyframes dvgRewardTextPulse {
	0% { transform: translate3d(-50%, -50%, 0) scale(1); }
	50% { transform: translate3d(-50%, -50%, 0) scale(1.04); }
	100% { transform: translate3d(-50%, -50%, 0) scale(1); }
}

/* Win reveal animation */
.dvg__reward[data-result="win"].is-show .dvg__rewardImg {
	animation:
		dvgRewardPopIn 520ms cubic-bezier(0.16, 0.9, 0.18, 1) both,
		dvgRewardGlowPulse 950ms ease-in-out 520ms infinite;
}

.dvg__reward[data-result="win"].is-show .dvg__rewardText {
	animation: dvgRewardPopIn 520ms cubic-bezier(0.16, 0.9, 0.18, 1) both;
}

/* Cash reward layout: show BG art and overlay a centered amount panel */
.dvg__reward[data-kind="cash"]{
	width: 100%;
	left: 50%;
	top: 56%;
}

.dvg__reward[data-kind="cash"] .dvg__rewardImg{
	width: min(86%, 360px);
	filter: drop-shadow(0 18px 28px rgba(0,0,0,0.60));
}

.dvg__reward[data-kind="cash"] .dvg__rewardText{
	position: absolute;
	left: 50%;
	top: 52%;
	transform: translate3d(-50%, -50%, 0);
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(0,0,0,0.35);
	backdrop-filter: blur(10px);
	font-weight: 1000;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Cash win: make the amount panel feel "jackpot" */
.dvg__reward[data-kind="cash"][data-result="win"].is-show .dvg__rewardText{
	animation:
		dvgRewardPopIn 520ms cubic-bezier(0.16, 0.9, 0.18, 1) both,
		dvgRewardTextPulse 900ms ease-in-out 520ms infinite;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.08) inset,
		0 0 24px rgba(124,92,255,0.14);
}

.dvg__hud{
	position: absolute;
	left: 50%;
	bottom: 6%;
	transform: translateX(-50%);
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.28);
	backdrop-filter: blur(10px);
	color: rgba(255,255,255,0.88);
	font-weight: 800;
	text-align: center;
	max-width: 92%;
}

.dvg__hudTitle{
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.70);
}

.dvg__hudMsg{
	font-size: 14px;
	margin-top: 4px;
}

.dvg__escapeBtn{
	margin-top: 10px;
	appearance: none;
	cursor: pointer;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.20);
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.96);
	padding: 10px 14px;
	font-weight: 1000;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dvg__escapeBtn[disabled]{
	opacity: 0.55;
	cursor: not-allowed;
}

.dvg__shake{
	animation: dvgShake 420ms cubic-bezier(0.2,0.8,0.2,1);
}

@keyframes dvgShake{
	0%{ transform: translate3d(0,0,0) rotate(0deg); }
	18%{ transform: translate3d(-1.5%, 0.2%, 0) rotate(-1deg); }
	36%{ transform: translate3d(1.4%, -0.2%, 0) rotate(1deg); }
	54%{ transform: translate3d(-1.0%, 0.2%, 0) rotate(-0.6deg); }
	72%{ transform: translate3d(0.8%, -0.2%, 0) rotate(0.6deg); }
	100%{ transform: translate3d(0,0,0) rotate(0deg); }
}

@media (max-width: 520px){
	.dvg__panel{ width: min(94vw, 420px); }
	.dvg__hudMsg{ font-size: 13px; }
	.dvg__reward{ font-size: 18px; }
}

/* Mobile landscape: fit by height (square panel) */
@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
	.dvg__panel{
		/* Use viewport height to avoid vertical clipping */
		width: min(86vh, 360px);
		height: min(86vh, 360px);
		transform: translate3d(0, 6px, 0) scale(0.98);
	}

	.dvg__dial{
		width: 34%;
	}

	.dvg__hud{
		bottom: 3.5%;
		padding: 8px 10px;
		border-radius: 12px;
	}
	.dvg__hudTitle{ font-size: 11px; }
	.dvg__hudMsg{ font-size: 12px; }

	.dvg__escapeBtn{
		margin-top: 8px;
		padding: 8px 12px;
		border-radius: 12px;
		letter-spacing: 0.05em;
	}

	.dvg__reward{
		top: 56%;
		width: 70%;
	}
	.dvg__rewardImg{
		width: min(58%, 220px);
	}

	.dvg__reward[data-kind="cash"]{
		top: 54%;
		width: 92%;
	}
	.dvg__reward[data-kind="cash"] .dvg__rewardImg{
		width: min(84%, 320px);
	}
	.dvg__reward[data-kind="cash"] .dvg__rewardText{
		padding: 8px 12px;
		border-radius: 12px;
		font-size: 16px;
	}
}

/* Desktop-ish landscape but short height (e.g. small laptop window) */
@media (max-height: 560px) and (orientation: landscape) {
	.dvg__panel{
		width: min(82vh, 420px);
		height: min(82vh, 420px);
	}
}