:root {
	color-scheme: light;
}

html, body {
	overflow: hidden;
	overscroll-behavior: none;

	height: 100%;
	padding: 0px;
	margin: 0px;
}

body {
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
		env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);

	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(255,204,95);
}

.gradient-background {
	z-index: -9999;
	position: fixed;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgb(86,197,199) 0%, rgb(255,239,185) 30%,
				rgb(188,144,201) 53%, rgb(255,154,154) 78%, rgb(255,204,95) 100%);
}

#soggycat {
	border-radius: 1.5vh;
	box-shadow: 1.5vh 1.5vh 3vh rgb(41, 41, 41, 0.25);

	width: auto;
	height: auto;
	max-width: 75vw;
	max-height: 75vh;
}

.entercode {
	position: fixed;
	top: 20px; left: 0;
	width: 100%; height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	pointer-events: auto;
}
.entercodehidden {display: none}

.entercodecontent {
	background-color: white;
	border-radius: 10em; padding: 0.5em;
	max-width: 50px; height: 100%;
	display: flex;
	align-items: center;
}
.entercodecontent input {
	border: none; outline: none;
	font-size: 1em;
	font-family: 'Spline Sans Mono', monospace;
	width: 100%; text-align: center;
	background: transparent;
}

.thisisnotactuallymalware {
	font-family: Helvetica, sans-serif;
	font-weight: 1000; font-size: 1em;
	padding: 0.5em; border-radius: 10em;
	top: 1.5em; right: 1.5em; max-width: 50vw;
	text-align: center;
	position: fixed; display: flex;
	background-color: white; color: #02AAF3;
	text-decoration: none;
	box-shadow: 1.5vh 1.5vh 3vh rgb(41, 41, 41, 0.25);
}
@media screen and (max-width: 520px) {
	.thisisnotactuallymalware {display: none}
}

/* click HUD */
.click-hud {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 10000;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	pointer-events: none;
	font-family: Helvetica, Arial, sans-serif;
}

.click-card {
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 18px;
	padding: 12px 16px;
	box-shadow: 1.5vh 1.5vh 3vh rgb(41, 41, 41, 0.25);
	min-width: 145px;
}

.click-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.65;
	margin-bottom: 4px;
}

.click-value {
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
}

.floating-cat {
	position: fixed;
	z-index: 9999;
	pointer-events: none;
	user-select: none;
	transform: translate(-50%, -50%);
	animation: cat-pop 800ms ease-out forwards;
	will-change: transform, opacity;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
}

@keyframes cat-pop {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.45) rotate(0deg);
	}
	15% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1) rotate(calc(var(--spin) * 0.35));
	}
	100% {
		opacity: 0;
		transform:
			translate(calc(-50% + var(--drift-x)), calc(-50% + var(--drift-y)))
			scale(1.12)
			rotate(var(--spin));
	}
}

@media screen and (max-width: 640px) {
	.click-hud {
		top: 12px;
		left: 12px;
		right: 12px;
		gap: 8px;
	}

	.click-card {
		min-width: 120px;
		padding: 10px 12px;
	}

	.click-value {
		font-size: 22px;
	}
}