:root{
	--rbu-text: rgba(255,255,255,0.92);
	--rbu-muted: rgba(255,255,255,0.70);
	--rbu-border: rgba(255,255,255,0.14);
	--rbu-panel: rgba(12, 14, 30, 0.92);
	--rbu-shadow: 0 22px 60px rgba(0,0,0,0.55);
	--rbu-radius: 18px;
	--rbu-accent: rgba(46, 242, 255, 0.95);
}

*{ box-sizing: border-box; }

.reel-bonus{
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	padding: 0;
	color: var(--rbu-text);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.reel-bonus[aria-hidden="false"]{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 220ms ease;
}

.reel-bonus__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.72);
}

.reel-bonus__panel{
	position: relative;
	width: 100%;
	height: 100%;
	max-height: none;
	overflow: hidden;
	border-radius: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	padding: 0;
	display: grid;
	gap: 0;
	grid-template-rows: 1fr;
	transform: none;
	transition: none;
}

.reel-bonus[aria-hidden="false"] .reel-bonus__panel{ transform: none; }

.reel-bonus__top{
	display: none;
}

.reel-bonus__title{
	margin: 0;
	font-size: 18px;
	letter-spacing: 0.02em;
}

.reel-bonus__meta{
	display: none;
}

.reel-bonus__kv{
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 14px;
	padding: 10px 12px;
	background: rgba(255,255,255,0.04);
}

.reel-bonus__label{
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rbu-muted);
}

.reel-bonus__value{
	font-weight: 900;
	font-size: 18px;
	margin-top: 4px;
}

.reel-bonus__stage{
	display: grid;
	place-items: center;
	padding: 0;
	min-height: 0;
}

.reel-bonus__wheelWrap{
	position: relative;
	width: min(92vmin, 640px);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}

.reel-bonus__wheel,
.reel-bonus__needle{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	pointer-events: none;
}

.reel-bonus__needle{
	--needle-rot: 0deg;
	transform: translate(-50%, -50%) rotate(var(--needle-rot));
	transform-origin: 50% 50%;
	filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55));
}

.reel-bonus__centerBtn{
	position: absolute;
	left: 49%;
	top: 51%;
	transform: translate(-50%, -50%);
	width: min(28%, 160px);
	aspect-ratio: 1 / 1;
	border: 0;
	border-radius: 999px;
	padding: 0;
	background: transparent;
	color: var(--rbu-text);
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 6;
}

.reel-bonus__centerBtn::before{
	content: "";
	position: absolute;
	inset: -18%;
	border-radius: 999px;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(closest-side, rgba(46, 242, 255, 0.28), rgba(46, 242, 255, 0.0) 70%);
	filter: blur(10px);
	transform: scale(0.92);
	z-index: 0;
}

.reel-bonus__centerBtn:disabled{
	opacity: 0.55;
	cursor: not-allowed;
}

.reel-bonus__centerBtnImg{
	position: relative;
	z-index: 1;
	width: 120%;
	height: 120%;
	object-fit: contain;
	user-select: none;
	pointer-events: none;
}

.reel-bonus__centerBtnText{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 10px 24px rgba(0,0,0,0.55);
	user-select: none;
	pointer-events: none;
}

@keyframes rbuCenterBtnPulse {
	0% { transform: scale(0.96); filter: drop-shadow(0 0 0 rgba(46, 242, 255, 0.0)) drop-shadow(0 18px 28px rgba(0,0,0,0.45)); }
	55% { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(46, 242, 255, 0.22)) drop-shadow(0 18px 28px rgba(0,0,0,0.45)); }
	100% { transform: scale(0.96); filter: drop-shadow(0 0 0 rgba(46, 242, 255, 0.0)) drop-shadow(0 18px 28px rgba(0,0,0,0.45)); }
}

@keyframes rbuCenterBtnGlow {
	0% { opacity: 0.18; transform: scale(0.90); }
	55% { opacity: 0.60; transform: scale(1.06); }
	100% { opacity: 0.18; transform: scale(0.90); }
}

.reel-bonus__centerBtn:not(:disabled) .reel-bonus__centerBtnImg{
	animation: rbuCenterBtnPulse 1350ms cubic-bezier(0.2, 0.9, 0.2, 1) infinite;
}

.reel-bonus__centerBtn:not(:disabled)::before{
	opacity: 0.22;
	animation: rbuCenterBtnGlow 1350ms cubic-bezier(0.2, 0.9, 0.2, 1) infinite;
}

.reel-bonus__bottom{
	position: fixed;
	left: 50%;
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	display: grid;
	gap: 10px;
	z-index: 7;
	pointer-events: none;
}

.reel-bonus__msg{
	display: none;
	text-align: center;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.34);
	color: var(--rbu-text);
	backdrop-filter: blur(10px);
}

.reel-bonus[data-rbu-has-result="1"] .reel-bonus__msg{ display: block; }

/* Only show Continue once there is a result */
.reel-bonus__btn--ghost{ display: none; }
.reel-bonus[data-rbu-has-result="1"] .reel-bonus__btn--ghost{ display: inline-flex; }

.reel-bonus__actions{
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	pointer-events: auto;
}

.reel-bonus__btn{
	appearance: none;
	border-radius: 14px;
	padding: 10px 14px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	border: 1px solid rgba(255,255,255,0.16);
	background: rgba(255,255,255,0.06);
	color: var(--rbu-text);
}

.reel-bonus__btn:disabled{
	opacity: 0.55;
	cursor: not-allowed;
}

.reel-bonus__btn--primary{
	border-color: rgba(46, 242, 255, 0.35);
	background: radial-gradient(120% 120% at 20% 20%, rgba(46, 242, 255, 0.22), rgba(255,255,255,0.06));
	box-shadow: 0 0 0 2px rgba(46, 242, 255, 0.12) inset;
}

.reel-bonus__btn--ghost{
	border-color: rgba(255,255,255,0.16);
}


@media (min-width: 921px){
	.reel-bonus__wheelWrap{ width: min(72vmin, 860px); }
	.reel-bonus__centerBtn{ width: min(26%, 220px); }
}

@media (max-width: 560px){
	.reel-bonus__wheelWrap{ width: min(94vmin, 520px); }
	.reel-bonus__centerBtn{ width: min(30%, 150px); }
}

@media (prefers-reduced-motion: reduce){
	.reel-bonus__needle{ transition: none !important; }
	.reel-bonus__centerBtn::before,
	.reel-bonus__centerBtnImg{ animation: none !important; }
}