/* CSS File: scavenger-hunt.css
 * Created by Carter (Brother Lovelace) on 2025-01-06 23:00:14
 * Last Updated: 2025-01-06 23:00:14 by Carter (Brother Lovelace)
 * Active Theme: GAMER CHURCH
 */

#top .scavenger-hunt-badge {
     position: absolute;
     top: 15px;
     right: 15px;
     z-index: 9;
     color: transparent;
     pointer-events: none;
     font-size: 0;
     line-height: 1.5em;
     padding: 5px 10px;
     width: 90px;
     height: 90px;
     background-color: red;
     background-size: contain;
}
#top .scavenger-hunt-badge.no-badge {
     display: none;
}
.scavenger-clue {
	position: relative;
     font-size: 0;
     width: 60px;
     height: 60px;
     background-image: url('/wp-content/uploads/2024/12/handwave.gif');
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
     cursor: pointer;
     color: white;
     transition: all 0.3s steps(2);
     z-index: 9;
}
 .scavenger-clue:hover {
     transform: scale(1.15) rotate(10deg);
     filter: brightness(1.1);
}
 #top .scavenger-clue.loading {
     opacity: 0.7;
     pointer-events: none;
}
 #top .scavenger-clue.loading::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 60px;
	 height: 60px;
     border-radius: 100%;
     border: 3px solid var(--body);
     border-left-color: var(--alt);
     border-right-color: var(--alt);
     animation: loadSpin 1s linear infinite;
}
@keyframes loadSpin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes bgbubbles {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 -25vh;
	}
}
 .scavenger-popup {
     position: fixed;
     z-index: 9999;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.5);
     display: grid;
     align-content: center;
     opacity: 0;
     transition: all 0.3s steps(3);
     opacity: 1;
}
.scavenger-popup::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/wp-content/uploads/2024/12/space-3.png');
	z-index: -1;
	opacity: 0.7;
	background-size: auto 25vh;
	animation: bgbubbles 6s steps(60) infinite;
	pointer-events: none;
}
 .scavenger-popup > div {
     max-width: 90vw;
     width: 600px;
     margin: 0 auto;
     font-size: 16px;
	 color: mediumblue;
	 text-shadow: unset;
	 border: 6px double currentcolor;
  min-height: 3em;
  background: white;
  padding: 1em;
  outline: 4px solid white;
	 box-shadow: 10px 10px black;
	 font-family: var(--mono-font);
}
.scavenger-popup > div * {
	text-shadow: none !important;
	font-family: inherit !important;
	font-weight: normal !important;
}
.scavenger-popup button {
  border: 2px solid currentColor !important;
  outline: 3px solid black;
}
 .scavenger-popup h3 {
     margin-top: 0;
     font-size: 1.75em;
}
 .hidden-clue {
     opacity: 0 !important;
     pointer-events: none !important;
     user-select: none !important;
     width: 0;
     height: 0;
     overflow: hidden;
     top: 50%;
     left: 50%;
}
 .scavenger-popup:not(.hidden-clue) > div {
     animation: tada 1.25s steps(4);
     animation-delay: 0.5s;
     animation-fill-mode: forwards;
}
 .scavenger-popup button {
     appearance: none;
     border: none;
     color: var(--body);
     text-transform: uppercase;
     background: var(--main);
     font-size: inherit;
     line-height: 30px;
     cursor: pointer;
     display: block;
     max-width: max-content;
     padding: 5px 10px;
     margin-top: 20px;
     border-radius: var(--radius);
     line-height: 1.5em;
}
 .scavenger-popup button:hover {
     background: var(--alt);
}

@keyframes tada {
     0% {
         transform: scaleX(1);
         opacity: 0;
    }
     30%, 40% {
         transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
         opacity: 1;
    }
     50%, 70%, 90% {
         transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    }
     40%, 60%, 80% {
         transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    }
     to {
         transform: scaleX(1);
         opacity: 1;
    }
}

#clue1 {
	background-image: url('/wp-content/uploads/2025/01/Spoony_left.webp');
	width: 120px;
}