:root {
	--unit: 17;
	--game-base-speed: 0.25;
	--ball-radius: 20px;
}
html,
body {
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #000;
	font-family: 'Times New Roman', Times, serif;
	font-weight: bold;
}
.container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* Add a black vignette around */
}
.container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Add a black vignette around the edges */
	/* background: radial-gradient(circle at 50% 50%, #00000000 0%, #00000000 75%, #000000ff 100%); */
	box-shadow: inset 0 0 50em 2.5em #000000ff;
	pointer-events: none;
	z-index: 5004;
}
.background {
	all: unset;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f00;
	color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: timeout 10s 1 forwards;
	animation-play-state: paused;
	font-size: 4em;
}
@keyframes timeout {
	0% {
		opacity: 0;
	}
	99.9% {
		opacity: 0;
		z-index: 1;
		pointer-events: all;
	}
	100% {
		opacity: 1;
		z-index: 5000;
		pointer-events: none;
	}
}
.background:not(:checked) {
	z-index: 1;
}
.background:checked {
	z-index: 5000;
	opacity: 1;
	pointer-events: none;
	animation-play-state: paused;
	animation: none;
}
.start:checked ~ .background:not(:checked) {
	animation-play-state: running;
}
.balls-container:not(:has(.ball:not(:checked))) ~ .background:not(:checked)::before {
	content: "YOU WON";
}
.background::before {
	content: "GAME OVER";
	animation-play-state: paused;
	animation: none;
}
.balls-container:not(:has(.ball:not(:checked))) ~ .background:not(:checked) {
	background-color: rgb(58, 239, 8);
	z-index: 5000;
	opacity: 1;
	pointer-events: none;
	animation-play-state: paused;
	animation: none;
}
.balls-container:not(:has(.ball:not(:checked))) ~ .counter-container {
	opacity: 1;
}
.balls-container:not(:has(.ball:not(:checked))) ~ .counter-container .counter-seconds {
	animation-play-state: paused;
}
.balls-container:not(:has(.ball:not(:checked))) ~ .counter-container .counter-milliseconds {
	animation-play-state: paused;
}
.balls-container:not(:has(.ball:not(:checked))) ~ .counter-container .counter-microseconds {
	animation-play-state: paused;
}
.start {
	all: unset;
	/* Set the ball radius to be equal to the counter */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	color: #f00;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4em;
	z-index: 1000;
	cursor: pointer;
	/* Add a glow */
	--glow-color: #ff0000f0;
	text-shadow:
		0 0 1em var(--glow-color),
		0 0 2em var(--glow-color),
		0 0 4em var(--glow-color);
}
.start::before {
	content: 'START';
}
.start:checked {
	opacity: 0;
	z-index: -100;
}
.ball {
	all: unset;
	/* Set the ball radius to be equal to the counter */
	position: absolute;
	top: calc(50% - var(--ball-radius) / 2);
	left: calc(50% - var(--ball-radius) / 2);
	width: calc(var(--ball-radius));
	height: calc(var(--ball-radius));
	border-radius: 1000px;
	background: none;
	color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	animation: expand 10s 0s forwards ease-in;
	animation-play-state: paused;
	/* move-ball calc(6s/var(--game-base-speed)) 0s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55), */
	/* counter-increment: balls -1; */
	z-index: 12;
	pointer-events: all;
}
.ball:last-child,
.ball:not(:checked) + .ball:checked {
	background: radial-gradient(circle at 10% 10%, #f00 0%, #300 80%, #c00 250%);
	/* outline: 0.15em solid #ff000075; */
	/* Add a glow */
	filter: drop-shadow(0 0 0.5em #ff111130);
}
/* .ball::after {
	content: '';
	background-color: #f00;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	animation: expand 10s forwards;
}
*/
@keyframes expand {
	0% {
		/* transform: scale(0); */
		top: calc(50% - 0 * var(--ball-radius) / 2);
		left: calc(50% - 0 * var(--ball-radius) / 2);
		width: calc(0 * var(--ball-radius));
		height: calc(0 * var(--ball-radius));
	}
	99.9% {
		/* transform: scale(30); */
		top: calc(50% - 40 * var(--ball-radius) / 2);
		left: calc(50% - 40 * var(--ball-radius) / 2);
		width: calc(40 * var(--ball-radius));
		height: calc(40 * var(--ball-radius));
	}
	100% {
		/* transform: scale(0); */
		top: calc(50% - 0 * var(--ball-radius) / 2);
		left: calc(50% - 0 * var(--ball-radius) / 2);
		width: calc(0 * var(--ball-radius));
		height: calc(0 * var(--ball-radius));
	}
}
.start:not(:checked) ~ .balls-container .ball {
	animation-play-state: paused;
}
.start:checked ~ .balls-container .ball {
	animation-play-state: running;
}
.start:checked ~ .balls-container .balls-container-internal {
	animation-play-state: paused;
}
/* .start:not(:checked) ~ .ball::after {
	animation-play-state: paused;
}
.start:checked ~ .ball::after {
	animation-play-state: running;
} */
@keyframes move-ball {
	0% {
		transform: translate(calc(-2px * var(--unit)), calc(-5px * var(--unit)));
	}
	5% {
		transform: translate(calc(3px * var(--unit)), calc(-9px * var(--unit)));
	}
	10% {
		transform: translate(calc(3px * var(--unit)), calc(-6px * var(--unit)));
	}
	15% {
		transform: translate(calc(-5px * var(--unit)), calc(4px * var(--unit)));
	}
	20% {
		transform: translate(calc(-5px * var(--unit)), calc(10px * var(--unit)));
	}
	25% {
		transform: translate(calc(5px * var(--unit)), calc(4px * var(--unit)));
	}
	30% {
		transform: translate(calc(-5px * var(--unit)), calc(-4px * var(--unit)));
	}
	35% {
		transform: translate(calc(5px * var(--unit)), calc(4px * var(--unit)));
	}
	40% {
		transform: translate(calc(5px * var(--unit)), calc(-2px * var(--unit)));
	}
	45% {
		transform: translate(calc(-5px * var(--unit)), calc(4px * var(--unit)));
	}
	50% {
		transform: translate(calc(5px * var(--unit)), calc(3px * var(--unit)));
	}
	55% {
		transform: translate(calc(-5px * var(--unit)), calc(4px * var(--unit)));
	}
	60% {
		transform: translate(calc(-5px * var(--unit)), calc(4px * var(--unit)));
	}
	65% {
		transform: translate(calc(5px * var(--unit)), calc(4px * var(--unit)));
	}
	70% {
		transform: translate(calc(3px * var(--unit)), calc(-5px * var(--unit)));
	}
	75% {
		transform: translate(calc(-5px * var(--unit)), calc(4px * var(--unit)));
	}
	80% {
		transform: translate(calc(3px * var(--unit)), calc(3px * var(--unit)));
	}
	85% {
		transform: translate(calc(-5px * var(--unit)), calc(4px * var(--unit)));
	}
	90% {
		transform: translate(calc(-5px * var(--unit)), calc(3px * var(--unit)));
	}
	95% {
		transform: translate(calc(-5px * var(--unit)), calc(4px * var(--unit)));
	}
	100% {
		transform: translate(calc(1px * var(--unit)), calc(-5px * var(--unit)));
	}
}
.ball:checked {
	counter-increment: balls -1;
	pointer-events: none;
	z-index: -100;
	background-color: #00000000;
	filter: none;
	transition: z-index 0.01s 0.5s;
}
.ball:checked::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background-color: #000000;
	background: radial-gradient(circle at 10% 10%, #fff 0%, #333 80%, #ccc 250%);
	/* Add a glow */
	/* outline: 0.15em solid #ffffff80; */
	filter: drop-shadow(0 0 0.5em #ffffff50);
	pointer-events: none;
	animation: clicked-ball 0.5s forwards;
	z-index: 15;
}
@keyframes clicked-ball {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* .ball:nth-child(2n) {
	background-color: #00f;
} */
/* .ball::before {
	content: counter(balls);
} */
.balls-container {
	position: absolute;
	--balls-container-size: 1000%;
	top: calc(50% - var(--balls-container-size) / 2);
	left: calc(50% - var(--balls-container-size) / 2);
	width: var(--balls-container-size);
	height: var(--balls-container-size);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	/* animation: balls-container calc(1.25s / var(--game-base-speed)) alternate infinite; */
	animation: balls-container calc(0.67s / var(--game-base-speed)) alternate infinite;
	animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	z-index: 10;
	counter-reset: balls 10;
	pointer-events: none;
}
.balls-container-internal {
	width: 100%;
	height: 100%;
	position: relative;
	pointer-events: none;
}
.balls-container-internal-1 {
	animation: balls-container-random 0.1s infinite alternate;
}
.balls-container-internal-2 {
	animation: balls-container-random 0.25s infinite alternate reverse;
}
.balls-container-internal-3 {
	animation: balls-container-random-direction 0.01s infinite;
}
.balls-container-internal-real {
	width: 100%;
	height: 100%;
	position: relative;
	animation: move-ball calc(6s/var(--game-base-speed)) 0s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
	/* animation: balls-container calc(0.75s / var(--game-base-speed)) alternate infinite; */
	pointer-events: none;
}
@keyframes balls-container {
	0% {
		transform: rotate(0deg);
		background-color: #150000;
	}
	25% {
		background-color: #000;
	}
	50% {
		transform: rotate(90deg);
		background-color: #150000;
	}
	75% {
		background-color: #000;
	}
	100% {
		transform: rotate(180deg);
		background-color: #150000;
	}
}
@keyframes balls-container-random {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes balls-container-random-direction {
	0% {
		transform: scaleX(1);
	}
	50% {
		transform: scaleX(1);
	}
	50.1% {
		transform: scaleX(-1);
	}
	100% {
		transform: scaleX(-1);
	}
}
.score-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	pointer-events: none;
	/* Add a glow */
	--glow-color: #ff111180;
	text-shadow:
		0 0 1em var(--glow-color),
		0 0 2em var(--glow-color),
		0 0 4em var(--glow-color);
}
.score-container::before {
	content: counter(balls);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 100vh;
	color: #f00;
	opacity: 0.15;
	pointer-events: none;
}
.counter-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5001;
	pointer-events: none;
	opacity: 0;
	font-weight: bold;
	color: #000;
}
.counter-container-internal {
	overflow: hidden;
	margin: auto;
	height: 1em;
	width: auto;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	/* background-color: #000; */
	padding: 0 0.25em;
	transform: translateY(2em);
}
.counter-container-internal::before {
	content: 'IN\00A0';
}
.counter-container-internal::after {
	content: '\00A0SECONDS';
}
.counter-digit {
	position: relative;
	display: inline-block;
	margin-top: 0.0em;
	counter-reset: counter-digits -1;
}
.counter-digit span {
	display: block;
	width: 100%;
	height: 1em;
	padding: 0 0.0375em;
	counter-increment: counter-digits;
}
.counter-digit span::before {
	content: counter(counter-digits);
}
.counter-seconds span::after {
	content: '.';
}
.start:checked ~ .counter-container .counter-seconds {
	animation: seconds 10s 1 step-end forwards;
}
.start:checked ~ .counter-container .counter-milliseconds {
	animation: subseconds 1s 10 step-end forwards;
}
.start:checked ~ .counter-container .counter-microseconds {
	animation: subseconds 0.1s 100 step-end forwards;
}
@keyframes seconds {
	0% {
		transform: translateY(1em);
		width: 0;
	}
	10% {
		transform: translateY(-1em);
		width: 100%;
	}
	20% {
		transform: translateY(-2em);
	}
	30% {
		transform: translateY(-3em)
	}
	40% {
		transform: translateY(-4em)
	}
	50% {
		transform: translateY(-5em)
	}
	60% {
		transform: translateY(-6em)
	}
	70% {
		transform: translateY(-7em)
	}
	80% {
		transform: translateY(-8em)
	}
	90% {
		transform: translateY(-9em);
		/* width: 0; */
	}
	100% {
		transform: translateY(-9em);
		/* width: 0; */
		width: 100%;
	}
}
@keyframes subseconds {
	0% {
		transform: translateY(0)
	}
	10% {
		transform: translateY(-1em)
	}
	20% {
		transform: translateY(-2em)
	}
	30% {
		transform: translateY(-3em)
	}
	40% {
		transform: translateY(-4em)
	}
	50% {
		transform: translateY(-5em)
	}
	60% {
		transform: translateY(-6em)
	}
	70% {
		transform: translateY(-7em)
	}
	80% {
		transform: translateY(-8em)
	}
	90% {
		transform: translateY(-9em)
	}
	100% {
		transform: translateY(-9em)
	}
}
.restart {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5005;
	pointer-events: none;
	opacity: 0;
	cursor: default;
	animation: restart-timeout 10s 1 forwards;
	animation-play-state: paused;
}
.start:checked ~ .restart {
	animation-play-state: running;
}
.balls-container:not(:has(.ball:not(:checked))) ~ .restart {
	/* pointer-events: all;
	cursor: pointer; */
	animation: restart-delay 2.5s 1 forwards;
	animation-play-state: running;
}
@keyframes restart-delay {
	0% {
		pointer-events: none;
		cursor: default;
		background-color: #fff;
		opacity: 1;
	}
	99.9% {
		pointer-events: none;
		cursor: default;
		background-color: #fff;
		opacity: 0;
	}
	100% {
		pointer-events: all;
		cursor: pointer;
		opacity: 0;
	}
}
.background:checked ~ .restart {
	pointer-events: all;
	cursor: pointer;
	animation-play-state: paused;
	animation: none;
}
@keyframes restart-timeout {
	0% {
		pointer-events: none;
		cursor: default;
	}
	99.9% {
		pointer-events: none;
		cursor: default;
	}
	100% {
		pointer-events: all;
		cursor: pointer;
	}
}
/* Title screen, keep hidden, only used to export the title graphics */
.title {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f00;
	color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15em;
	z-index: 5010;
	/* Set a special aspect ratio for the itch.io capsule or a normal 16/9 aspect ratio */
	/* NOTE: comment to use a normal cover image */
	/* --aspect-ratio: 16 / 9; */
	--aspect-ratio: 630 / 500;
	width: calc(100vh * var(--aspect-ratio));
	height: 100vh;
}
.title::before {
	content: 'RED \A BUBBLE';
	white-space: pre;
	text-align: center;
}
.title::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Add a black vignette around the edges */
	box-shadow: inset 0 0 6em 0.3em #000000ff;
	pointer-events: none;
	z-index: 5011;
}