.wof-container {
	background: url(./img/containerbg.png),
		linear-gradient(180deg, rgba(5, 23, 43, 1) 0%, #05172b 96.84%);
	background-size: cover;
	height: 790px;
	max-height: 100%;
	max-width: 1220px;
	margin: 0 auto;
	position: relative;
	z-index: 15;
	overflow: hidden;
	text-align: center;
}

.wof-container p {
	font-weight: 600;
	font-size: 15px;
	margin: 18px 0 8px 0;
}

.wof-container h1 {
	font-size: 32px;
	font-weight: 800;
	margin: 0 auto 8px auto;
	max-width: 480px;
}

.ui-wheel-of-fortune {
	--_items: 10;
	all: unset;
	aspect-ratio: 1 / 1;
	container-type: inline-size;
	display: grid;
	position: relative;
	width: 90%;
	max-width: 500px;
	margin: 0 auto;
	border-radius: 50%;
}

.ui-wheel-of-fortune>* {
	position: absolute;
}

.spin-button img {
	max-width: 100%;
}

.wofhype {
	animation: hypebutton 1s infinite;
}

#wofwheel {
	clip-path: inset(0 0 0 0 round 50%);
	display: grid;
	inset: 0;
	place-content: center start;
	overflow: hidden;
}

#wofwheel div {
	align-content: center;
	aspect-ratio: 1 / calc(2 * tan(180deg / var(--_items)));
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
	display: grid;
	font-size: 3.3cqi;
	grid-area: 1 / -1;
	rotate: calc(360deg / var(--_items) * calc(var(--_idx) - 1));
	transform-origin: center right;
	user-select: none;
	width: 50cqi;
	background-position: 5% center;
	background-size: 62%;
	background-repeat: no-repeat;
	color: #fff;
	font-weight: 700;
}

#wofwheel div:nth-of-type(1) {
	--_idx: 1;
}

#wofwheel div:nth-of-type(2) {
	--_idx: 2;
}

#wofwheel div:nth-of-type(3) {
	--_idx: 3;
}

#wofwheel div:nth-of-type(4) {
	--_idx: 4;
}

#wofwheel div:nth-of-type(5) {
	--_idx: 5;
}

#wofwheel div:nth-of-type(6) {
	--_idx: 6;
}

#wofwheel div:nth-of-type(7) {
	--_idx: 7;
}

#wofwheel div:nth-of-type(8) {
	--_idx: 8;
}

#wofwheel div:nth-of-type(9) {
	--_idx: 9;
}

#wofwheel div:nth-of-type(10) {
	--_idx: 10;
}

.wheelfield span {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	rotate: 180deg;
	width: 60%;
	text-align: left;
}

.wheelfield span img {
	max-width: 40%;
	min-width: 40%;
	width: 40px;
	height: auto;
	flex-shrink: 0;
	display: block;
}

.wheelfield span div {
	text-align: right;
	font-size: 14px;
	margin-left: auto;
}

.grade1 {
	background: url(./img/wheelfield_p1.png) no-repeat center/cover;
}

.grade2 {
	background: url(./img/wheelfield_p2.png) no-repeat center/cover;
}

.grade3 {
	background: url(./img/wheelfield_p3.png) no-repeat center/cover;
}

.ui-wheel-of-fortune {
	margin-top: 40px;
	z-index: 120;
}

.ui-wheel-of-fortune::before {
	content: "";
	position: absolute;
	top: -11%;
	right: -22%;
	left: -22%;
	bottom: -29%;
	background: url(./img/spinnerbg.png);
	background-size: cover;
}

.selected {
	opacity: 1;
	-webkit-filter: drop-shadow(0px 0px 10px #fff);
	filter: drop-shadow(0px 0px 10px #fff);
}

.wofbackground {
	height: 790px;
	max-height: 100%;
	width: 1220px;
	max-width: 100%;
	margin: 0 auto;
}

.starfocus {
	background: url(./img/starfocus.png);
	background-repeat: no-repeat;
	background-position: center 90%;
	background-size: 140%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	mix-blend-mode: color-dodge;
	z-index: -7;
	animation: pulseBGwof 5s infinite;
	/* Animation applied */
	animation-timing-function: ease-in-out;
	/* Smooth easing */
}

@keyframes pulseBGwof {
	50% {
		background-size: 140%;
	}

	0%,
	100% {
		background-size: 100%;
	}
}

.starshine {
	background: url(./img/starshine.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	mix-blend-mode: color-burn;
	z-index: -8;
}

.coin-element {
	background: url(./img/coin-elm.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;
	width: 20%;
	height: auto;
	aspect-ratio: 1/1;
	position: absolute;
	/* To allow positioning for animation */
	top: 50%;
	/* Start at the center */
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -2;
}

.diamond-element {
	background: url(./img/diamond-elm.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;
	width: 20%;
	height: auto;
	aspect-ratio: 1/1;
	position: absolute;
	/* To allow positioning for animation */
	top: 50%;
	/* Start at the center */
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -2;
}

.diamond-element:nth-of-type(1) {
	animation:
		flyOut2 2s 0s forwards,
		bounce1 7s 2s infinite alternate cubic-bezier(0.42, 0, 0.58, 1);
}

.diamond-element:nth-of-type(2) {
	animation:
		flyOut3 2.8s 0.2s forwards,
		bounce2 4s 2.8s infinite alternate cubic-bezier(0.42, 0, 0.58, 1);
}

.coin1 {
	animation:
		flyOut1 2.8s 0.3s forwards,
		bounce3 3s 2.8s infinite alternate cubic-bezier(0.42, 0, 0.58, 1);
}

.coin2 {
	animation:
		flyOut4 2.5s 0.4s forwards,
		bounce4 7s 2.5s infinite alternate cubic-bezier(0.42, 0, 0.58, 1);
}

/* Fly out keyframes */
@keyframes flyOut1 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	100% {
		top: 0%;
		left: -10%;
		transform: translate(-100%, 0%) rotate(360deg) scale(0.8);
		filter: blur(3px);
	}
}

@keyframes flyOut2 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	100% {
		top: 100%;
		left: -50%;
		transform: translate(0%, -100%) rotate(305deg) scale(1.7);
		filter: blur(2px);
	}
}

@keyframes flyOut3 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	100% {
		top: 15%;
		left: 110%;
		transform: translate(0%, -100%) rotate(355deg) scale(1);
		filter: blur(0px);
	}
}

@keyframes flyOut4 {
	0% {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	100% {
		top: 85%;
		left: 135%;
		transform: translate(0%, 100%) rotate(360deg);
		filter: blur(0px);
	}
}

/* Bounce keyframes */
@keyframes bounce1 {
	0% {
		left: -50%;
		transform: translate(0%, -100%) rotate(305deg) scale(1.7);
		filter: blur(2px);
	}

	50% {
		transform: translate(0%, -100%) rotate(311deg) scale(1.72);
		filter: blur(1.8px);
	}

	100% {
		transform: translate(0%, -100%) rotate(305deg) scale(1.7);
		filter: blur(2px);
	}
}

@keyframes bounce2 {
	0% {
		left: 110%;
		transform: translate(0%, -100%) rotate(355deg) scale(1);
		filter: blur(0px);
	}

	50% {
		transform: translate(0%, -100%) rotate(357deg) scale(1.02);
		filter: blur(3px);
	}

	100% {
		transform: translate(0%, -100%) rotate(355deg) scale(1);
		filter: blur(0px);
	}
}

@keyframes bounce3 {
	0% {
		left: -10%;
		transform: translate(-100%, 0%) rotate(360deg) scale(0.8);
		filter: blur(3px);
	}

	50% {
		transform: translate(-100%, 0%) rotate(368deg) scale(0.82);
		filter: blur(1px);
	}

	100% {
		transform: translate(-100%, 0%) rotate(360deg) scale(0.8);
		filter: blur(3px);
	}
}

@keyframes bounce4 {
	0% {
		top: 85%;
		left: 135%;
		transform: translate(0%, 100%) rotate(360deg);
		filter: blur(0px);
	}

	50% {
		top: 86%;
		transform: translate(0%, 100%) rotate(365deg);
		filter: blur(0px);
	}

	100% {
		top: 85%;
		transform: translate(0%, 100%) rotate(360deg);
		filter: blur(0px);
	}
}

@keyframes starglowFade1 {

	0%,
	100% {
		opacity: 0;
	}

	50% {
		opacity: 1;
		transform: scale(1.5);
	}
}

@keyframes starglowFade2 {

	0%,
	100% {
		opacity: 0;
	}

	25%,
	75% {
		opacity: 1;
		transform: scale(1.5);
	}
}

@keyframes starglowFade3 {

	0%,
	100% {
		opacity: 0;
	}

	10%,
	40% {
		opacity: 1;
		transform: scale(1.5);
	}
}

.starglow {
	background: url(./img/starglow.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%;
	width: 20%;
	height: auto;
	aspect-ratio: 1/1;
	display: block;
	position: absolute;
	mix-blend-mode: plus-lighter;
	z-index: 4;
	opacity: 0;
	/* Ensure the elements are initially invisible */
}

.starglow1 {
	top: 0;
	right: -10%;
	animation: starglowFade1 2s infinite;
	/* First fade pattern */
}

.starglow2 {
	top: 10%;
	left: -10%;
	animation: starglowFade2 3s infinite;
	/* Second fade pattern */
}

.starglow3 {
	bottom: 5%;
	right: 96%;
	animation: starglowFade3 5s infinite;
	/* Third fade pattern */
}

@keyframes wofbgpulse {
	0% {
		background-size: auto 75%;
		/* Initial size */
	}

	50% {
		background-size: auto 80%;
		/* Slightly larger */
	}

	100% {
		background-size: auto 75%;
		/* Back to original size */
	}
}

.blueellipse {
	background: url(./img/blue_ellipse.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: auto 75%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 10%;
	left: 0;
	mix-blend-mode: plus-lighter;
	z-index: -10;
	animation: wofbgpulse 3s infinite;
	/* Apply the pulse animation */
	transform-origin: center;
	/* Set the origin for scaling */
}

.foxwhole {
	background: url(./img/fox.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	left: auto;
	top: 0;
	bottom: -2%;
	right: 5%;
	margin: 0 auto;
	background-size: contain;
	width: 33%;
	height: auto;
	display: block;
	position: absolute;
	z-index: 120;
}

/* Fox Slide Out (current) */
@keyframes foxSlide {
	0% {
		transform: translateY(0);
		/* Start at its original position */
	}

	30% {
		transform: translateY(-2%);
		/* Moves slightly up for the bounce effect */
	}

	100% {
		transform: translateY(100%);
		/* Slides down off the screen */
	}
}

/* Fox Slide In (new) */
@keyframes foxSlideIn {
	0% {
		transform: translateY(100%);
		/* Start below the screen */
	}

	30% {
		transform: translateY(-2%);
		/* Moves slightly up for the bounce effect */
	}

	100% {
		transform: translateY(0);
		/* Back to its original position */
	}
}

.foxwhole.animate {
	animation: foxSlide 0.4s cubic-bezier(0.25, 0.5, 1, 1) forwards;
	/* Smooth animation with bounce */
}

.foxwhole.animate-in {
	animation: foxSlideIn 0.4s cubic-bezier(0.25, 0.5, 1, 1) forwards;
	/* Smooth reverse animation with bounce */
}

/* Main UI Game Container */
.ui-game {
	position: absolute;
	top: 70%;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 140;
	background: linear-gradient(180deg, rgba(5, 23, 43, 0) 0%, #05172b 96.84%);
	display: -webkit-box;
	/* For older Safari */
	display: -webkit-flex;
	/* For Safari */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: "DM Sans", sans-serif;
	border-radius: 0 0 12px 12px;
}

/* Flex Container for Spins and Button */
.wof-ui-container {
	display: -webkit-box;
	/* For older Safari */
	display: -webkit-flex;
	/* For Safari */
	display: flex;
	align-items: stretch;
	/* Ensure items have the same height */
	gap: 10px;
	/* Space between spins-left and button */
	width: 380px;
	/* Full width within max-width */
	max-width: 90%;
	/* Restrict width */
	padding: 0;
	border-radius: 12px;
}

/* Spins Left Section */
.wof-spinsleft {
	flex: 8;
	/* Occupies 80% of the width */
	display: -webkit-box;
	/* For older Safari */
	display: -webkit-flex;
	/* For Safari */
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 10px;
	backdrop-filter: blur(20px);
	/* Existing blur effect */
	padding: 10px 15px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	/* Subtle background */
	color: white;
	font-family: Arial, sans-serif;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
}

.wof-spinsleft .icon {
	height: fit-content;
}

.wof-spinsleft .text {
	display: -webkit-box;
	/* For older Safari */
	display: -webkit-flex;
	/* For Safari */
	display: flex;
	align-items: center;
	font-weight: 300;
	text-align: left;
}

.wof-spinsleft .number {
	font-size: 2rem;
	/* Make the number prominent */
	margin-right: 5px;
	font-weight: 600;
}

/* Spin Button */
.wof-spinbutton {
	flex: 3;
	border: none;
	border-radius: 8px;
	background: linear-gradient(0deg,
			rgba(140, 205, 255, 0.12),
			rgba(140, 205, 255, 0.12)),
		linear-gradient(180deg, #3a78e0 0%, #52b1ff 150%);
	background-size: 100% 200%;
	/* Double the height of the button */
	background-position: 0 0;
	/* Start at the top */
	color: white;
	font-family: Arial, sans-serif;
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	transition:
		background-position 0.5s ease,
		box-shadow 0.5s ease;
	/* Smooth transition for background and shadow */
	box-shadow:
		inset 0 0 5px rgba(255, 255, 255, 0.6),
		/* Initial inner shadow */
		0 4px 10px rgba(0, 0, 0, 0.2);
	/* Outer shadow */
}

/* Hover State */
.wof-spinbutton:hover {
	background-position: 0 100%;
	/* Shift the gradient down */
	box-shadow:
		inset 0 0 15px rgba(255, 255, 255, 0.8),
		/* Larger and brighter inner shadow */
		0 6px 12px rgba(0, 0, 0, 0.3);
	/* Slightly larger outer shadow */
}

.wof-inactive {
	cursor: auto;
}

@keyframes hypebutton {
	0% {
		box-shadow: 0px 15px 43.8px 0px rgba(255, 27, 149, 1);
	}

	50% {
		box-shadow: 0px 40px 50px 0px rgba(255, 27, 149, 0.8);
	}

	100% {
		box-shadow: 0px 15px 43.8px 0px rgba(255, 27, 149, 1);
	}
}

.wof-toc-style {
	margin: 0 auto;
	width: fit-content;
	text-align: left;
	color: #82a1c3;
	font-size: 0.8em;
	position: absolute;
	background: url(./img/wof-info.svg) no-repeat;
	background-position: center left;
	z-index: 300;
	padding-left: 2em;
	bottom: 1em;
	left: 0;
	right: 0;
	max-width: 380px;
}

.ui-wheel-of-fortune.spin-ended::before {
	filter: brightness(0.7);
	transition: filter 0.5s ease;
	/* Smooth transition for brightness effect */
}

.overlay-text {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.5rem;
	font-weight: bold;
	color: white;
	width: 100%;
	text-shadow:
		0 0 10px #00f,
		0 0 20px #00f,
		0 0 30px #00f;
	opacity: 0;
	pointer-events: none;
	/* Prevent interaction */
	z-index: 1000;
	/* On top of everything */
}

.overlay-text.visible {
	animation: moveUpFadeOut 2s forwards;
}

/* Animation for moving up and fading out */
@keyframes moveUpFadeOut {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%);
	}

	20% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -90%);
		/* Move upwards */
	}
}

:where(.ui-wheel-of-fortune) button {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
	aspect-ratio: 1 / 1;
	/* Maintain a perfect circle */
	border: 4px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	font-size: calc(3vw);
	/* Dynamic font size for better scaling */
	place-self: center;
	width: calc(30vw);
	/* Adjust width to use viewport units */
	max-width: 175px;
	/* Cap width for larger devices */
	min-width: 60px;
	/* Ensure it's not too small */
	height: auto;
	color: #ffffff;
	font-weight: 400;
	background-image: linear-gradient(to right, #ff53bd, #ff7880),
		linear-gradient(to bottom, #ff9fd0, #ea2488);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0px 15px 43.8px 0px #ff1b95;
	z-index: 250;
	transition: all 0.3s ease;
	text-align: center;
	display: -webkit-box;
	/* For older Safari */
	display: -webkit-flex;
	/* For Safari */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	/* No extra padding for better fit */
}

:where(.ui-wheel-of-fortune) button .spin-svg {
	width: 80%;
	/* Ensure SVG fits within the button */
	height: auto;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}

/* Popup container */
#popupOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(5 23 43 / 80%);
	z-index: 998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

#popupContainer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: -webkit-box;
	/* For older Safari */
	display: -webkit-flex;
	/* For Safari */
	display: flex;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#popupContainer h1 {
	font-size: 26px;
	margin: 0 0 8px 0;
	line-height: 33px;
}

#popupContainer p {
	margin: 0;
	font-weight: 600;
}

#popupContainer .claim-cta {
	font-size: 16px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	max-width: 320px;
	width: 100%;
}

/* Show popup */
#popupContainer.popup-visible {
	opacity: 1;
	pointer-events: all;
}

/* Popup content */
.wofpopup {
	display: -webkit-box;
	/* For older Safari */
	display: -webkit-flex;
	/* For Safari */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/*  background-image: url(./img/popbg.png), url(./img/All-bonuses-stars.svg), linear-gradient(180deg, #60a7ff, #3e51ff);*/
	/* background-image: url(https://spints.giordanidis.gr/wp-content/uploads/2024/11/154x159.png), url(https://spints.giordanidis.gr/wp-content/uploads/2024/11/668x398-2.png); */
	background-image: var(--standard-box-desktop);
	background-position: bottom right;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 12px;
	padding: 18px;
	width: 90%;
	height: fit-content;
	min-height: 320px;
	max-width: 400px;
	text-align: left;
	box-shadow: 0 4px 48px rgba(0, 0, 0, 1);
	animation: popupShow 0.3s ease forwards;
	overflow: hidden;
}

.wofpopbottomshade {
	background: linear-gradient(360deg,
			rgba(27, 47, 69, 0.7) 0%,
			rgba(5, 23, 43, 0) 100%);
	position: absolute;
	width: 100%;
	height: 40%;
	box-sizing: border-box;
	bottom: 0;
	left: 0;
	z-index: -1;
}

#wofExitButton {
	/* align-items: flex-start;
  border-radius: 8px;
  border-style: solid;
  border-color: rgb(185, 233, 255);
  border-top-width: 1px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 400;
  height: 44px;
  margin-top: auto;
  line-height: 22px;
  background-image: linear-gradient(180deg, #52b1ff, #4e95ff);
  font-size: 16px;
  color: #fff; */
	margin-left: auto;
}

.woflogolink {
	width: 100%;
	display: -webkit-box;
	/* For older Safari */
	display: -webkit-flex;
	/* For Safari */
	display: flex;
	margin-top: auto;
	align-items: center;
}

.woflogolink img {
	height: 44px;
}

/* Popup animations */
@keyframes popupShow {
	0% {
		transform: scale(0.7);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@media only screen and (max-width: 1024px) {
	.foxwhole {
		background: url(./img/fox.png);
		background-repeat: no-repeat;
		background-position: center bottom;
		left: auto;
		top: 0;
		bottom: 0%;
		right: -12%;
		margin: 0 auto;
		background-size: contain;
		width: 45%;
		height: auto;
		display: block;
		position: absolute;
		z-index: 120;
	}

	.wof-container {
		height: 640px;
	}

	.wof-container h1 {
		font-size: 26px;
	}

	.wofpopup {
		background-image: var(--latest-box), var(--standard-box-mobile);
	}

	.starglow1 {
		top: 0;
		right: -10%;
		animation: starglowFade1 2s infinite;
		/* First fade pattern */
	}

	.starglow2 {
		top: 10%;
		left: -10%;
		animation: starglowFade2 3s infinite;
		/* Second fade pattern */
	}

	.starglow3 {
		bottom: 5%;
		right: 84%;
		animation: starglowFade3 5s infinite;
		/* Third fade pattern */
	}

	.ui-game {
		border-radius: 0;
	}


	/* Fly out keyframes */
	@keyframes flyOut1 {
		0% {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		100% {
			top: 0%;
			left: -10%;
			transform: translate(0%, 0%) rotate(360deg) scale(0.8);
			filter: blur(3px);
		}
	}

	@keyframes flyOut2 {
		0% {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		100% {
			top: 100%;
			left: -50%;
			transform: translate(170%, -140%) rotate(305deg) scale(1.7);
			filter: blur(2px);
		}
	}

	@keyframes flyOut3 {
		0% {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		100% {
			top: 15%;
			left: 110%;
			transform: translate(-65%, -100%) rotate(355deg) scale(1);
			filter: blur(0px);
		}
	}

	@keyframes flyOut4 {
		0% {
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		100% {
			top: 85%;
			left: 135%;
			transform: translate(0%, 100%) rotate(360deg);
			filter: blur(0px);
		}
	}

	/* Bounce keyframes */
	@keyframes bounce1 {
		0% {
			left: -50%;
			transform: translate(170%, -140%) rotate(305deg) scale(1.7);
			filter: blur(2px);
		}

		50% {
			transform: translate(170%, -140%) rotate(311deg) scale(1.72);
			filter: blur(1.8px);
		}

		100% {
			transform: translate(170%, -140%) rotate(305deg) scale(1.7);
			filter: blur(2px);
		}
	}

	@keyframes bounce2 {
		0% {
			left: 110%;
			transform: translate(-65%, -100%) rotate(355deg) scale(1);
			filter: blur(0px);
		}

		50% {
			transform: translate(-65%, -100%) rotate(357deg) scale(1.02);
			filter: blur(3px);
		}

		100% {
			transform: translate(-65%, -100%) rotate(355deg) scale(1);
			filter: blur(0px);
		}
	}

	@keyframes bounce3 {
		0% {
			left: -10%;
			transform: translate(0%, 0%) rotate(360deg) scale(0.8);
			filter: blur(3px);
		}

		50% {
			transform: translate(0%, 0%) rotate(368deg) scale(0.82);
			filter: blur(1px);
		}

		100% {
			transform: translate(0%, 0%) rotate(360deg) scale(0.8);
			filter: blur(3px);
		}
	}

	@keyframes bounce4 {
		0% {
			top: 85%;
			left: 135%;
			transform: translate(0%, 100%) rotate(360deg);
			filter: blur(0px);
		}

		50% {
			top: 86%;
			transform: translate(0%, 100%) rotate(365deg);
			filter: blur(0px);
		}

		100% {
			top: 85%;
			transform: translate(0%, 100%) rotate(360deg);
			filter: blur(0px);
		}
	}
}

@media only screen and (max-width: 767px) {
	.wof-toc-style br {
		display: none;
	}

	.foxwhole {
		background-size: contain;
		width: 50%;
	}

	.wof-ui-container {
		flex-direction: column;
	}

	.wof-spinbutton {
		min-height: 72px;
	}

	.wof-container .wof-toc-style {
		display: none;
	}

	.wof-toc-style {
		position: relative;
	}
}