@import url('https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@800&family=Poppins:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,800&display=swap');
@import url('https://db.onlinewebfonts.com/c/25b8e9fc4aea70ec72f6b5f4a50f3680?family=Spaceland+Ten');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ADLaM+Display&display=swap');

* {
	box-sizing: border-box;
	margin: 0;
}

:root {
	--sparkleColor1: #FF9C82;
	--sparkleColor2: #ff9b824f;
}

body {
	position: relative;
	font-size: 16px;
}

@supports (height: 100dvh) {
	body {
		height: 100dvh
	}
}

main {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(136, 0, 255, 1);
	background: radial-gradient(201.95% 108.06% at 50% 46.09%, #000F4B 0%, #8800FF 83.9%, #0033FF 95.2%);
	overflow: hidden;
}

.svgBg {
	position: absolute;
	z-index: 0;
}
.testpng {
	min-height: 100dvh;
	min-width: 100%;
	position: absolute;
	background: url('/assets/Glow.png');
	background-position: center;
}

.svgSunshine {
	opacity: .4;
	filter: blur(3px);
}


.svgGlow {
	width: 150dvw;
}

.sparkles {
	position: absolute;
	inset: 0;
}

.sparkle {
	position: absolute;
	border-radius: 50%;
	aspect-ratio: 1/1;
}
.sparkleType1 {
	width: 12px;
	height: 12px;
	background-color: var(--sparkleColor1);
}
.sparkleType2 {
	height: 5px;
	width: 5px;
	background-color: var(--sparkleColor1);
}
.sparkleType3 {
	width: 12px;
	height: 12px;
	background-color: var(--sparkleColor2);
}
.sparkleType4 {
	height: 5px;
	width: 5px;
	background-color: var(--sparkleColor2);
}

.scene {
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 8;
	pointer-events: none;
}
@supports (height: 100dvh) {
	.scene {
		height: 100dvh;
	}
}

.layer {
	position: absolute;
	min-width: 140px;
	min-height: 140px;
	border-radius: 16px;
	will-change: transform;
}
.layer-1 {
	width: 140px;
	height: 140px;
	top: 20%; 
	right: 4%;
	background: url('/assets/Cube.png');
}
.layer-2 {
	width: 175px;
	height: 175px;
	top: 65%; 
	right: 7%;
	background: url('/assets/Arrow.png');
}
.layer-3 {
	width: 220px;
	height: 220px;
	bottom: 8%; 
	left: 8%;
	background: url('/assets/Cone.png');
}


.content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5rem;
	z-index: 5;
}

.bonoTextBlock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 5rem;
	max-height: 138px;
}

.bonoText {
	font-family: "Baloo Tammudu 2", system-ui;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
	font-size: 10rem;
	color: white;    
	height: 8rem;
	line-height: 13rem;
	text-shadow: 6px 6px 2px rgba(10, 0, 59, 0.45);

}

.paryajPamLogo {
	font-family: "Poppins", sans-serif;
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	color: #F9F9F9;
	font-size: 1.25rem;
}


.jpPlate {
	font-family: "Spaceland Ten";
	text-transform: uppercase;
	font-size: 5rem;
	position: relative;
	height: auto;
	padding: 1rem 3rem;
	border-radius: 0.75rem;
	background: linear-gradient(90deg, rgba(255, 68, 0, 0.85) 0%, rgba(255, 149, 0, 0.85) 100%);
	transform: rotate(1deg);
	box-shadow: 0px 1.86px 44.15px 0px rgba(170, 85, 0, 1);
	border: 2px solid rgba(255, 157, 0, .5)
}

.gradtext {
	color: transparent;    
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(181.78deg, #F9F9F9 43.85%, #E57B13 175.18%);
}


.wheelBlock {
	--wheelRadius: 315px;
	--wheelBorderWidth1: 3.65rem;
	--wheelBorderWidth2: 1.2rem;
	height: 60dvh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wheelBg {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--wheelRadius) * 2);
	height: calc(var(--wheelRadius) * 2);
}
.wheelBgLayer1 {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(180deg, #7F94FD 0%, #6B00B2 100%);

	z-index: 1;
}
.wheelBgLayer2 {
	position: absolute;
	width: calc(100% - var(--wheelBorderWidth1));
	height: calc(100% - var(--wheelBorderWidth1));
	border-radius: 50%;
	background: linear-gradient(0deg, #7F94FD 0%, #6B00B2 100%);

	z-index: 2;
}
.wheelBgLayer3 {
	position: absolute;
	width: calc(100% - var(--wheelBorderWidth1) - var(--wheelBorderWidth2));
	height: calc(100% - var(--wheelBorderWidth1) - var(--wheelBorderWidth2));
	background: #081834;
	border-radius: 50%;
	z-index: 3;
}

.wheelLightbulbsBlock {
	position: absolute;
	width: calc(var(--wheelRadius) * 2);
	height: calc(var(--wheelRadius) * 2);
	border-radius: 50%;
	z-index: 5;
	
}

.wheelLightbulb {
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: rgba(241, 239, 255, 1);
	box-shadow: 1.81px -1.81px 3.81px 0px rgba(189, 17, 189, 1) inset;
	backdrop-filter: blur(0.9064327478408813px);
	z-index: 6;
	/* box-shadow: -0.91px 0.91px 1.81px 0px rgba(62, 12, 131, 0.45); */

	transition: all .2s ease;
}

.wheelContent {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--wheelRadius) * 2);
	height: calc(var(--wheelRadius) * 2);
	z-index: 5;
}
#wheelContentImg,
#wheelWinnerCellGlow {
	width: 120%;
	height: 120%;
}
#wheelWinnerCellGlow {
	display: block;
	position: absolute;
	opacity: 0;
	transition: opacity .5s ease-in-out;
}
#wheelContentImg {
	transform: rotate(0deg);

	transition: transform 8s ease-in-out;
}


.wheelBtn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}
.wheelBtn__backdrop {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: linear-gradient(138.9deg, #FFD46E 13.58%, #9A3F00 88.25%);
}

.wheelBtn__backdrop__2 {
	position: absolute;
	width: 145px;
	height: 145px;
	border-radius: 50%;
	background: linear-gradient(149.59deg, #FFB900 13.22%, #FF4D00 87.35%);
}
.wheelBtn__light {
	position: absolute;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: linear-gradient(138.9deg, #FFD46E 13.58%, #9A3F00 88.25%);
	filter: blur(41px)
}
.wheelBtnText {
	position: absolute;
	text-transform: uppercase;
	color: rgba(45, 29, 0, 1);

	/* text-shadow: -0.35px 0.35px 0.87px rgba(255, 255, 255, 1); */
	text-shadow: 0.87px 0.87px 0.87px rgba(166, 70, 0, 1);


	font-family: "Righteous", sans-serif;
	font-size: 2.3rem;
}


.pinImg {
	position: absolute;
	top: -5px;
	left: calc(50% - 17px);
}

.lightbuldOn {
	-webkit-box-shadow: 0px 0px 20px 15px rgba(250,250,250,1); 
	box-shadow: 0px 0px 20px 15px rgba(250,250,250,1);
}

.coinsBlock {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.coinsSmall {
	height: 210px;
	width: 450px;
	background: url('./assets/coins_left.png');
}
.coinsMedium {
	height: 265px;
	width: 455px;
	background: url('./assets/coins_right.png');
}

.winBtnBlock {
	--btnWidth: 650px;
	width: var(--btnWidth);
	position: absolute;
	bottom: 50px;
	left: calc(50% - var(--btnWidth)/2);
	
	z-index: 10;
}
.winBtnBg {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.winBtnBg__layer_1 {
	--h: 80px;
	position: absolute;
	height: var(--h);
	width: var(--btnWidth);
	border-radius: calc(var(--h) / 2);
	background: radial-gradient(50% 50% at 50% 50%, rgba(65, 108, 216, 0.1375) 0%, rgba(0, 81, 255, 0.0125) 100%);
	box-shadow: 0px 0px 60.81px 15.62px rgba(0, 15, 89, 0.85);
	z-index: 1;
}
.winBtnBg__layer_2 {
	--h: 62px;
	position: absolute;
	height: var(--h);
	width: calc(var(--btnWidth) - 15px);
	border-radius: calc(var(--h) / 2);
	background: radial-gradient(50% 50% at 50% 50%, rgba(0, 72, 255, 0.0665) 0%, rgba(0, 149, 255, 0.35) 100%);
	z-index: 2;
}
.winBtnBg__layer_3 {
	--h: 50px;
	position: absolute;
	height: var(--h);
	width: calc(var(--btnWidth) - 25px - 15px);
	border-radius: calc(var(--h) / 2);
	background-color: #4D00FF;
	border: 1px solid #4CA0FF;
	z-index: 3;
}
.winBtnText {
	position: absolute;
	font-family: "ADLaM Display", system-ui;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.75rem;
	font-weight: 400;
	font-style: normal;
	z-index: 4;
}
.winBtnImage {
	width: 100%;
}


#winBtnBlock {
	display: none;
	opacity: 0;
	justify-content: center;
	align-items: center;

	transition: opacity .5s ease-in-out;
}




@media screen and (max-width: 1200px) {
	.bonoTextBlock {
		max-height: unset;
		gap: 3rem;
	}
	.content {
		gap: 4rem;
		padding: 2rem 2rem 4rem 2rem;
		max-height: 100dvh;
	}
}
@media screen and (max-width: 1000px) {
	.layer-1 {
		top: 20%; 
		right: 3%;
	}
	.layer-2 {
		top: 65%; 
		right: -1%;
	}
	.layer-3 {
		bottom: 8%; 
		left: -2%;
	}

}
@media screen and (max-width: 800px) {
	.layer {
		display: none;
	}
	.jpPlate {
		font-size: 4rem;
	}
}
@media screen and (max-width: 650px) {
	.winBtnBlock {
		--btnWidth: 500px;
		bottom: 7%;
	}
	.wheelBlock {
		--wheelRadius: 47vw;
		--wheelBorderWidth1: 1.9rem;
		--wheelBorderWidth2: 1rem;
	}
	#wheelContentImg {
		width: 118vw;
		height: 118vw;
	}
}
@media screen and (max-width: 550px) {
	.jpPlate {
		font-size: 3rem;
	}
	.winBtnBlock {
		--btnWidth: 400px;
		bottom: 50px;
	}
}
@media screen and (max-width: 450px) {
	.content {
		gap: 20px;
	}
	.bonoText {
		font-size: 7rem;
		height: 4rem;
		line-height: 8rem;
	}
	.bonoTextBlock {
		flex-direction: column;
	}
	.jpPlate {
		font-size: 2rem;
	}
	.wheelBlock {
		--wheelRadius: 47vw;
		--wheelBorderWidth1: 1.5rem;
		--wheelBorderWidth2: 0.8rem;
	}
	.wheelLightbulb {
		width: 7px;
		height: 7px;
		background-color: rgba(241, 239, 255, 1);
		box-shadow: 1.81px -1.81px 3.81px 0px rgba(189, 17, 189, 1) inset;
		backdrop-filter: blur(0.9064327478408813px);
	}
	.lightbuldOn {
		-webkit-box-shadow: 0px 0px 10px 6px rgba(250,250,250,1); 
		box-shadow: 0px 0px 10px 6px rgba(250,250,250,1);
	}
	#wheelContentImg {
		width: 117vw;
		height: 117vw;
	}
	.wheelBtn__backdrop {
		width: 30vw;
		height: 30vw;
	}
	.wheelBtn__backdrop__2 {
		width: 27vw;
		height: 27vw;
	}
	.wheelBtn__light {
		width: 28vw;
		height: 28vw;
	}
	.wheelBtnText {
		font-size: 1.75rem;
	}
	.pinImg {
		left: calc(50% - 3.5vw);
		height: 13vw;
		top: 0;
	}
}

@media screen and (max-width: 380px) {
	.bonoTextBlock {
		gap: 10px;
	}
	.bonoText {
		height: 6rem;
		line-height: 9rem;
	}
}