/* Floating trigger */
.wheelFortuneFloatBtn {
	position: fixed;
	left: 16px;
	bottom: -34px;
	z-index: 4;
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.wheelFortuneFloatBtn:hover {
	transform: scale(1.06);
}

.wheelFortuneFloatBtn__img {
	display: block;
	width: 80px;
	height: auto;
	pointer-events: none;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.22));
}

/* Modal shell */
.wheelFortuneModal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
	visibility: hidden;
}

.wheelFortuneModal.is-open {
	pointer-events: auto;
	visibility: visible;
}

.wheelFortuneOverlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.wheelFortuneModal.is-open .wheelFortuneOverlay {
	opacity: 1;
}

.wheelFortunePanel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	background: #262635;
	color: #fff;
	overflow: hidden;
	transform: translateX(-100%);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wheelFortuneModal.is-open .wheelFortunePanel {
	transform: translateX(0);
}

.wheelFortuneClose {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat;
}

.wheelFortuneCf7 {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Wheel widget (scoped) */
.wheelFortunePanel .widget,
.wheelFortunePanel .widget-l,
.wheelFortunePanel .widget-r {
	top: 0;
	bottom: 0;
}

.wheelFortunePanel .widget-btn,
.wheelFortunePanel .yes {
	user-select: none;
	cursor: pointer;
}

.wheelFortunePanel .widget-text-shake input,
.wheelFortunePanel .yes-shake {
	backface-visibility: hidden;
	perspective: 1000px;
}

.wheelFortunePanel .widget {
	position: absolute;
	left: 0;
	right: 0;
	background: #262635;
	color: #fff;
	overflow: visible;
}

.wheelFortunePanel .widget-wrap {
	max-width: none;
	width: 100%;
	margin: 0;
	height: 100%;
}

.wheelFortunePanel .widget-desc,
.wheelFortunePanel .widget-text {
	margin-top: 20px;
}

.wheelFortunePanel .widget-head {
	font-weight: 900;
	font-size: 46px;
	line-height: 1em;
}

.wheelFortunePanel .widget-desc {
	font-size: 18px;
}

.wheelFortunePanel .widget-text input {
	width: 100%;
	max-width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0 16px;
	outline: 0;
	background: transparent;
	color: #fff;
	height: 60px;
	border-radius: 10px;
	box-sizing: border-box;
	font-size: 16px;
}

.wheelFortunePanel .widget-text input::placeholder {
	color: #aaa;
}

.wheelFortunePanel .widget-text-shake input {
	animation: wheelFortuneShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	transform: translate3d(0, 0, 0);
	border: 1px solid #ff4949;
	box-shadow: 0 0 10px 0 rgba(255, 73, 73, 0.62);
}

@keyframes wheelFortuneShake {
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0); }
	30%, 70% { transform: translate3d(-4px, 0, 0); }
	40%, 60% { transform: translate3d(4px, 0, 0); }
	50% { transform: translate3d(-4px, 0, 0); border: 1px solid #ff4949; box-shadow: 0 0 10px 0 rgba(255, 73, 73, 0.62); }
	100% { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; }
}

.wheelFortunePanel .widget-btns {
	margin-top: 15px;
}

.wheelFortunePanel .widget-btn {
	display: inline-block;
	overflow: hidden;
	position: relative;
	z-index: 1;
	text-align: center;
	font-weight: 800;
	font-size: 18px;
	border-radius: 10px;
	background-size: 150%;
	color: #fff;
	background-position-x: 0;
	padding: 18px 35px;
}

.wheelFortunePanel .widget-btn-1 {
	background: linear-gradient(to bottom, #4705fb, #4000ee);
	margin-right: 10px;
}

.wheelFortunePanel .widget-btn-2 {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.wheelFortunePanel .widget-page {
	display: none;
	width: 100%;
}

.wheelFortunePanel .widget-page-1 {
	display: inline-block;
}

.wheelFortunePanel .widget-l,
.wheelFortunePanel .widget-r,
.wheelFortunePanel .yes {
	display: flex;
}

.wheelFortunePanel .widget-loader {
	position: relative;
	width: 80px;
	height: 80px;
	margin: 0 auto;
}

.wheelFortunePanel .widget-loader div {
	position: absolute;
	top: 33px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #fff;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.wheelFortunePanel .widget-loader div:first-child { left: 8px; animation: wheelFortuneLoader1 0.6s infinite; }
.wheelFortunePanel .widget-loader div:nth-child(2) { left: 8px; animation: wheelFortuneLoader2 0.6s infinite; }
.wheelFortunePanel .widget-loader div:nth-child(3) { left: 32px; animation: wheelFortuneLoader2 0.6s infinite; }
.wheelFortunePanel .widget-loader div:nth-child(4) { left: 56px; animation: wheelFortuneLoader3 0.6s infinite; }

@keyframes wheelFortuneLoader1 { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes wheelFortuneLoader3 { 0% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes wheelFortuneLoader2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } }

.wheelFortunePanel .widget-r {
	position: absolute;
	left: 310px;
	right: 50px;
	align-items: center;
	text-align: left;
	z-index: 2;
	max-width: 400px;
}

.wheelFortunePanel .widget-r > div {
	width: 100%;
}

.wheelFortunePanel .widget-l {
	position: absolute;
	left: 0;
	align-items: center;
	text-align: center;
	z-index: 1;
}

.wheelFortunePanel .widget-wheel-wrap {
	position: relative;
	width: 500px;
	height: 500px;
	left: -250px;
	background: #aaa;
	border-radius: 1000px;
	transition: 0.5s all;
}

.wheelFortunePanel .widget-wheel-center {
	position: absolute;
	width: 20%;
	height: 20%;
	left: 40%;
	top: 40%;
	background: #fff;
	border-radius: 1000px;
	z-index: 100;
	box-shadow: -1px 1px 7px #888;
}

.wheelFortunePanel .widget-wheel-arrow {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 40px 14px 0;
	border-color: transparent #fff transparent transparent;
	filter: drop-shadow(-3px 3px 3px rgba(0, 0, 0, 0.2));
	position: absolute;
	right: -8px;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 100;
}

.wheelFortunePanel .widget-wheel {
	width: 100%;
	height: 100%;
	position: relative;
	transform: rotate(-22.5deg);
}

.wheelFortunePanel .widget-wheel-wrap * {
	box-sizing: border-box;
	line-height: 1;
	text-align: left;
}

.wheelFortunePanel .widget-wheel-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
}

.wheelFortunePanel .widget-wheel-inner .widget-wheel-part {
	position: absolute;
	width: 50%;
	height: 100%;
	overflow: hidden;
}

.wheelFortunePanel .widget-wheel-inner .widget-wheel-part > div {
	position: absolute;
	width: 200%;
	height: 100%;
}

.wheelFortunePanel .widget-wheel-inner .widget-wheel-part ~ .widget-wheel-part {
	left: 50%;
}

.wheelFortunePanel .widget-wheel-inner .widget-wheel-part ~ .widget-wheel-part > div {
	left: -100%;
}

.wheelFortunePanel .widget-wheel-inner .widget-wheel-slice-1 { background-image: linear-gradient(-45deg, transparent 50%, transparent 50%), linear-gradient(-90deg, transparent 50%, #4000ee 50%); }
.wheelFortunePanel .widget-wheel-inner .widget-wheel-slice-2 { background-image: linear-gradient(0deg, transparent 50%, transparent 50%), linear-gradient(-45deg, transparent 50%, #4705fb 50%); }
.wheelFortunePanel .widget-wheel-inner .widget-wheel-slice-3 { background-image: linear-gradient(45deg, transparent 50%, transparent 50%), linear-gradient(0deg, transparent 50%, #4000ee 50%); }
.wheelFortunePanel .widget-wheel-inner .widget-wheel-slice-4 { background-image: linear-gradient(90deg, transparent 50%, transparent 50%), linear-gradient(45deg, transparent 50%, #4705fb 50%); }
.wheelFortunePanel .widget-wheel-inner .widget-wheel-slice-5 { background-image: linear-gradient(135deg, transparent 50%, transparent 50%), linear-gradient(90deg, transparent 50%, #4000ee 50%); }
.wheelFortunePanel .widget-wheel-inner .widget-wheel-slice-6 { background-image: linear-gradient(180deg, transparent 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #4705fb 50%); }
.wheelFortunePanel .widget-wheel-inner .widget-wheel-slice-7 { background-image: linear-gradient(225deg, transparent 50%, transparent 50%), linear-gradient(180deg, transparent 50%, #4000ee 50%); }
.wheelFortunePanel .widget-wheel-inner .widget-wheel-slice-8 { background-image: linear-gradient(270deg, transparent 50%, transparent 50%), linear-gradient(225deg, transparent 50%, #4705fb 50%); }

.wheelFortunePanel .widget-wheel-text {
	position: absolute;
	z-index: 30;
	transform-origin: 0 0;
	width: 50%;
}

.wheelFortunePanel .widget-wheel-text span {
	position: absolute;
	transform: translateY(-50%) rotate(180deg);
	text-align: center;
	display: block;
	width: 100%;
	padding: 0 8% 1% 36%;
	box-sizing: border-box;
	font-size: 16px;
	color: #fff;
}

.wheelFortunePanel .widget-wheel-text-1 { left: 30.7%; top: 96.3%; transform: rotate(-67.5deg); }
.wheelFortunePanel .widget-wheel-text-2 { left: 3.5%; top: 69.1%; transform: rotate(-22.5deg); }
.wheelFortunePanel .widget-wheel-text-3 { left: 3.4%; top: 30.5%; transform: rotate(22.5deg); }
.wheelFortunePanel .widget-wheel-text-4 { left: 30.9%; top: 3.2%; transform: rotate(67.5deg); }
.wheelFortunePanel .widget-wheel-text-5 { left: 69.4%; top: 3.5%; transform: rotate(112.5deg); }
.wheelFortunePanel .widget-wheel-text-6 { left: 96.3%; top: 30.9%; transform: rotate(157.5deg); }
.wheelFortunePanel .widget-wheel-text-7 { left: 96.5%; top: 69.3%; transform: rotate(202.5deg); }
.wheelFortunePanel .widget-wheel-text-8 { left: 69.2%; top: 96.6%; transform: rotate(247.5deg); }

.wheelFortunePanel .yes {
	align-items: flex-start;
	margin-top: 10px;
}

.wheelFortunePanel .yes-check {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	margin-right: 10px;
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.wheelFortunePanel .yes-d {
	font-size: 12px;
	opacity: 0.7;
	line-height: 1.5em;
}

.wheelFortunePanel .yes-d a {
	color: #fff !important;
	text-decoration: underline;
}

.wheelFortunePanel .yes-check-a {
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0xMS40IDVMMTAgMy42bC00IDQtMi0yTDIuNiA3IDYgMTAuNHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") center center/18px auto no-repeat;
}

.wheelFortunePanel .yes-shake {
	animation: wheelFortuneYesShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	border: 1px solid #ff4949;
	box-shadow: 0 0 10px 0 rgba(255, 73, 73, 0.62);
	border-radius: 10px;
}

@keyframes wheelFortuneYesShake {
	10%, 90% { transform: translate3d(-1px, 0, 0); }
	20%, 80% { transform: translate3d(2px, 0, 0); }
	30%, 70% { transform: translate3d(-4px, 0, 0); }
	40%, 60% { transform: translate3d(4px, 0, 0); }
	50% { transform: translate3d(-4px, 0, 0); }
}

.wheelFortunePanel .widget-wheel.widget-wheel-wait {
	animation: wheelFortuneSpinOnload 30s linear infinite;
}

.wheelFortunePanel .widget-wheel[class*="spin-"] {
	animation-duration: 6.5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes wheelFortuneSpinOnload {
	0% { transform: rotate(0); }
	100% { transform: rotate(360deg); }
}

@keyframes wheelFortuneSpin1 { from { transform: rotate(-22.5deg); } to { transform: rotate(967.5deg); } }
@keyframes wheelFortuneSpin2 { from { transform: rotate(-22.5deg); } to { transform: rotate(922.5deg); } }
@keyframes wheelFortuneSpin3 { from { transform: rotate(-22.5deg); } to { transform: rotate(1237.5deg); } }
@keyframes wheelFortuneSpin4 { from { transform: rotate(-22.5deg); } to { transform: rotate(1192.5deg); } }
@keyframes wheelFortuneSpin5 { from { transform: rotate(-22.5deg); } to { transform: rotate(1147.5deg); } }
@keyframes wheelFortuneSpin6 { from { transform: rotate(-22.5deg); } to { transform: rotate(1102.5deg); } }
@keyframes wheelFortuneSpin7 { from { transform: rotate(-22.5deg); } to { transform: rotate(1057.5deg); } }
@keyframes wheelFortuneSpin8 { from { transform: rotate(-22.5deg); } to { transform: rotate(1012.5deg); } }

.wheelFortunePanel .widget-wheel.spin-1 { animation-name: wheelFortuneSpin1; }
.wheelFortunePanel .widget-wheel.spin-2 { animation-name: wheelFortuneSpin2; }
.wheelFortunePanel .widget-wheel.spin-3 { animation-name: wheelFortuneSpin3; }
.wheelFortunePanel .widget-wheel.spin-4 { animation-name: wheelFortuneSpin4; }
.wheelFortunePanel .widget-wheel.spin-5 { animation-name: wheelFortuneSpin5; }
.wheelFortunePanel .widget-wheel.spin-6 { animation-name: wheelFortuneSpin6; }
.wheelFortunePanel .widget-wheel.spin-7 { animation-name: wheelFortuneSpin7; }
.wheelFortunePanel .widget-wheel.spin-8 { animation-name: wheelFortuneSpin8; }

body.wheel-fortune-open {
	overflow: hidden;
}

@media screen and (max-width: 644px) {
	.wheelFortuneFloatBtn {
		left: 12px;
        bottom: 95px;
        z-index: 1;
	}

	.wheelFortuneFloatBtn__img {
		width: 56px;
	}
}

@media (max-width: 620px) {
	.wheelFortunePanel {
		overflow-x: hidden;
		overflow-y: auto;
	}

	.wheelFortunePanel .widget {
		overflow: visible;
	}

	.wheelFortunePanel .widget-wrap {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.wheelFortunePanel .widget-l {
		position: relative;
		top: 0;
		right: auto;
		bottom: auto;
		left: 0;
		width: 100%;
		padding: 56px 0 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
	}

	.wheelFortunePanel .widget-wheel-wrap {
		width: min(280px, calc(100vw - 32px));
		height: min(280px, calc(100vw - 32px));
		margin: 0 auto;
		left: 0;
		transform: none;
	}

	.wheelFortunePanel .widget-r {
		position: relative;
		top: auto;
		right: 0;
		bottom: auto;
		left: 0;
		padding: 16px 24px 24px;
		margin: 0;
		max-width: none;
		align-items: flex-end;
		flex: 1 1 auto;
	}

	.wheelFortunePanel .widget-wheel-text span {
		font-size: 11px;
	}

	.wheelFortunePanel .widget-head {
		font-size: 20px;
	}

	.wheelFortunePanel.is-wheel-spinning .widget-wrap {
		justify-content: flex-start;
	}

	.wheelFortunePanel.is-wheel-spinning .widget-l {
		padding-top: 72px;
		padding-bottom: 16px;
	}

	.wheelFortunePanel.is-wheel-spinning .widget-wheel-wrap {
		width: min(calc(100vw - 24px), calc(100vh - 160px));
		height: min(calc(100vw - 24px), calc(100vh - 160px));
		max-width: 340px;
		max-height: 340px;
	}

	.wheelFortunePanel.is-wheel-spinning .widget-r {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 32px;
		padding: 0 24px;
		flex: none;
		pointer-events: none;
	}

	.wheelFortunePanel.is-wheel-spinning .widget-page-2 {
		display: flex !important;
		justify-content: center;
		width: 100%;
	}
}

@media (min-width: 621px) {
	.wheelFortunePanel {
		max-width: min(100vw, 1100px);
	}
}