.prizeWheel
{
	position:relative;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	width:100%;
}

.prizeWheel .divBorderContainer
{
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:100%;
}

.prizeWheel .svgBorder
{
	animation:rotate 100s linear 0s infinite;
	height:100%;
	left:0px;
	overflow:visible;
	position:absolute;
	top:0px;
	width:100%;
}

.prizeWheel .crlOuter
{
	fill:none;
	stroke:#ffffff;
	stroke-linecap:round;
	stroke-width:8px;
}

.prizeWheel.ice .crlOuter
{
	stroke:none;
}

.prizeWheel .divWheelContainer
{
	border:6px solid #ffffff;
	border-radius:50%;
	bottom:20px;
	box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, inset 0px 0px 15px #01eff9, 0px 0px 15px #01eff9;
	left:20px;
	overflow:hidden;
	position:absolute;
	right:20px;
	top:20px;
	transform:rotate(90deg);
}

.prizeWheel .divWheelSpinner
{
	bottom:30px;
	left:30px;
	position:absolute;
	right:30px;
	top:30px;
}

.prizeWheel .divWheelSlice
{
	align-items:center;
	background-color:#827d8c;
	clip-path:polygon(100% 0, 50% 100%, 0 0);
	color:#ffffff;
	display:flex;
	height:50%;
	justify-content:center;
	left:calc(50% - 53px);
	position:absolute;
	text-shadow:0px 0px 3px #000000, 0px 0px 3px #000000, 0px 0px 3px #000000, 0px 0px 3px #000000;
	transform-origin:bottom;
	width:106px;
}

.prizeWheel.levelUp .divWheelSlice
{
	background-color:#931ad0;
	color:#cffdff;
	text-shadow:0px 0px 3px #01eff9, 0px 0px 3px #01eff9, 0px 0px 3px #01eff9, 0px 0px 3px #01eff9;
}

.prizeWheel .divWheelSlice:nth-child(odd)
{
	background-color:#15111c;
}

.prizeWheel.levelUp .divWheelSlice:nth-child(odd)
{
	background-color:#15111c;
	color:#fbd3ff;
	text-shadow:0px 0px 3px #e600ff, 0px 0px 3px #e600ff, 0px 0px 3px #e600ff, 0px 0px 3px #e600ff;
}

.prizeWheel .divWheelSlice:first-child, .prizeWheel.levelUp .divWheelSlice:nth-child(2)
{
	background-color:#931ad0;
}

.prizeWheel .divWheelSlice:nth-child(2)
{
	background-color:#c285e2;
}

.prizeWheel .divWheelSlice:nth-child(3)
{
	background-color:#d7b0e9;
}

.prizeWheel .divWheelSliceLabel
{
	font-size:16px;
	padding-right:25px;
	position:absolute;
	text-align:center;
	transform:rotate(-90deg);
	width:120%;
}

.prizeWheel .divWheelSliceLabel:before
{
	background-color:#6b42de;
    background:linear-gradient(270deg, #01eff9 0%, #e600ff 100%);
	box-shadow:0px 0px 10px #000;
	content:"";
	display:block;
	height:5px;
	left:-6px;
	position:absolute;
	top:-100%;
	transform:rotate(-15deg);
	width:100%;
}

.prizeWheel.ice .divWheelSliceLabel:before
{
	background-image:url('ice/texture.webp');
}

.prizeWheel .divWheelOuter
{
	background-image:url('default/outer.webp');
	background-size:cover;
	bottom:30px;
	left:30px;
	position:absolute;
	right:30px;
	top:30px;
}

.prizeWheel.ice .divWheelOuter
{
	background-image:url('ice/outer.webp');
}

.prizeWheel .divWheelBlinker
{
	bottom:0px;
	left:0px;
	position:absolute;
	right:0px;
	top:0px;
	z-index:1;
}

.prizeWheel .divWheelBlinker:before
{
	animation:pulsateLights 2s linear 0s infinite;
	background-color:#ffffff;
	border:1px solid #ffffff;
	border-radius:50%;
	content:"";
	display:block;
	height:5px;
	left:calc(50% - 4px);
	position:absolute;
	top:11px;
	width:5px;
}

.prizeWheel .divWheelBlinker:after
{
	animation:pulsateLights 2s linear 0s infinite;
	background-color:#ffffff;
	border:1px solid #ffffff;
	border-radius:50%;
	bottom:11px;
	content:"";
	display:block;
	height:5px;
	left:calc(50% - 4px);
	position:absolute;
	width:5px;
}

.prizeWheel .divWheelBlinker:nth-child(2)
{
	transform:rotate(30deg);
}

.prizeWheel .divWheelBlinker:nth-child(3)
{
	transform:rotate(60deg);
}

.prizeWheel .divWheelBlinker:nth-child(4)
{
	transform:rotate(90deg);
}

.prizeWheel .divWheelBlinker:nth-child(5)
{
	transform:rotate(120deg);
}

.prizeWheel .divWheelBlinker:nth-child(6)
{
	transform:rotate(150deg);
}

.prizeWheel .divWheelBlinker:nth-child(2):before, .prizeWheel .divWheelBlinker:nth-child(2):after, .prizeWheel .divWheelBlinker:nth-child(4):before, .prizeWheel .divWheelBlinker:nth-child(4):after, .prizeWheel .divWheelBlinker:nth-child(6):before, .prizeWheel .divWheelBlinker:nth-child(6):after
{
	animation:pulsateLightsPurple 2s linear 1s infinite;
}

.prizeWheel .divArrow
{
	background-image:url('default/arrow.webp');
	background-size:cover;
	height:140px;
	left:50%;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:238px;
}

.prizeWheel.ice .divArrow
{
	background-image:url('ice/arrow.webp');
}

.prizeWheel .btnSpin
{
	background-image:url('default/button.webp');
	background-size:cover;
	filter:grayscale(1);
	height:130px;
	left:50%;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	width:130px;
	z-index:1;
}

.prizeWheel.ice .btnSpin
{
	background-image:url('ice/button.webp');
}

.prizeWheel .btnSpin.enable
{
	cursor:pointer;
	filter:grayscale(0);
}

.prizeWheel .btnSpin:after
{
	background-image:url('default/text.webp');
	background-size:cover;
	content:"";
	display:block;
	filter:drop-shadow(0px 0px 3px #000);
	height:45px;
	left:calc(50% - 36px);
	position:absolute;
	top:calc(50% - 16px);
	width:72px;
}

.prizeWheel .btnSpin.enable:after
{
	animation:pulsateButtonText 1s ease 0s infinite;
}

/* ANIMATION KEY FRAMES */
@keyframes rotate
{
	0%   {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}

@keyframes pulsateLights
{
	0%   {box-shadow:inset 0px 0px 1px #01eff9, 0px 0px 7px 0px #cffdff;}
    50%  {box-shadow:inset 0px 0px 1px #01eff9, 0px 0px 7px 5px #cffdff;}
	100% {box-shadow:inset 0px 0px 1px #01eff9, 0px 0px 7px 0px #cffdff;}
}

@keyframes pulsateLightsPurple
{
	0%   {box-shadow:inset 0px 0px 1px #e600ff, 0px 0px 7px 0px #fbd3ff;}
    50%  {box-shadow:inset 0px 0px 1px #e600ff, 0px 0px 7px 5px #fbd3ff;}
	100% {box-shadow:inset 0px 0px 1px #e600ff, 0px 0px 7px 0px #fbd3ff;}
}

@keyframes pulsateButtonText
{
	0%   {transform:scale(1);}
    50%  {transform:scale(1.1);}
	100% {transform:scale(1);}
}

/* MEDIA QUERIES */
@media (max-width: 500px)
{
	.prizeWheel .crlOuter
	{
		stroke-width:6px;
	}
	
	.prizeWheel .divWheelContainer
	{
		border:4px solid #ffffff;
		bottom:15px;
		left:15px;
		right:15px;
		top:15px;
	}

	.prizeWheel .divWheelSliceLabel
	{
		font-size:11px;
		padding-right:15px;
	}

	.prizeWheel .divWheelSliceLabel:after
	{
		top:calc(-100% - 3px);
	}

	.prizeWheel .divWheelOuter
	{
		bottom:28px;
		left:28px;
		right:28px;
		top:28px;
	}

	.prizeWheel .divWheelBlinker:before
	{
		top:8px;
	}

	.prizeWheel .divWheelBlinker:after
	{
		bottom:8px;
	}

	.prizeWheel .divArrow
	{
		height:105px;
		width:180px;
	}

	.prizeWheel .btnSpin
	{
		height:110px;
		width:110px;
	}

	.prizeWheel .btnSpin:after
	{
		height:40px;
		left:calc(50% - 31px);
		top:calc(50% - 15px);
		width:62px;
	}
}

@media (max-width: 400px)
{
	.prizeWheel .divWheelBlinker:before
	{
		top:7px;
	}

	.prizeWheel .divWheelBlinker:after
	{
		bottom:7px;
	}

	.prizeWheel .divArrow
	{
		height:95px;
		width:160px;
	}

	.prizeWheel .btnSpin
	{
		height:100px;
		width:100px;
	}

	.prizeWheel .btnSpin:after
	{
		height:36px;
		left:calc(50% - 29px);
		top:calc(50% - 13px);
		width:58px;
	}
}