@keyframes rotate {
	to {
		transform: rotate(360deg);
	}
}

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: hsl(0deg 0% 50% / 5%);
    border-radius: 30px;
}

::-webkit-scrollbar-thumb {
    background-color: hsl(0deg 0% 50% / 25%);
    border-radius: 30px;
}

::-webkit-scrollbar-corner {
    display: none;
}

html {
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: Arial, Helvetica, sans-serif;
}

body {
	margin: 0;
}

canvas#view {
	background-color: var(--background-color);
	height: 100vh;
	min-height: 240px;
	touch-action: none;
	width: 100vw;
}

:fullscreen canvas#view {
	height: 100% !important;
	max-height: none;
	max-width: none;
	width: 100% !important;
}

bhr-game-container {
	display: block;
	width: fit-content;
	position: relative;
	margin: auto;
	max-height: 100vh;
	max-width: 100vw;
	overflow: hidden;
}

bhr-game-container .ripple {
	overflow: hidden;
	position: relative;
}

bhr-game-container .ripple::before {
	aspect-ratio: 1;
	background-color: hsl(0, 0%, 50%);
	border-radius: 50%;
	content: "";
	inset: 0;
	margin: auto;
	opacity: 0;
	position: absolute;
	scale: 2;
	transition: opacity 1s, scale 800ms ease-out;
}

bhr-game-container .ripple:active::before {
	opacity: 0.5;
	scale: 0;
	transition: 0s;
}

bhr-game-container .replay-progress {
	border: none;
	bottom: 0;
	height: 4px;
	left: 0;
	position: absolute;
	right: 0;
	transition: height 100ms ease 0s;
	width: auto;
}

bhr-game-container .replay-progress:hover {
	cursor: pointer;
	filter: brightness(1.25);
	height: 6px;
}

bhr-game-container .replay-progress::-webkit-progress-value {
	background: var(--border-color);
}

bhr-game-container .replay-progress::-webkit-progress-bar {
	background: var(--background-color);
}

.bhr-dialog {
	backdrop-filter: blur(1rem) brightness(0.75);
	background-color: transparent;
	border: none;
	border-radius: 0.5rem;
	box-shadow: hsl(0deg 0% 0% / 50%) 0px 0px 4px;
}

.input-container {
	position: relative;
}

.input-container:has(> :placeholder-shown)> :last-child {
	visibility: hidden;
}

.input-container > .char-counter {
	-webkit-user-select: none;
	bottom: 0;
	color: hsl(0deg 0% 50% / 85%);
	content: attr(content);
	font-family: monospace;
	padding: .5rem;
	position: absolute;
	pointer-events: none;
	right: 0;
	user-select: none;
}

.input-container > .char-counter::after {
	content: "k";
}

.toast-container {
	border-radius: 4px;
	bottom: 0;
	color: var(--text-color);
	display: grid;
	gap: .25rem;
	margin: .75vmin;
	max-height: 50vmin;
	max-width: 50vmin;
	overflow: hidden;
	position: absolute;
	right: 0;
	scroll-snap-align: end;
}

.toast {
	backdrop-filter: blur(4px) brightness(.5);
	background-color: hsl(0deg 0% 50% / calc(40% - 20% * var(--brightness-multiplier)));
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--text-color);
	font-size: smaller;
	padding: .75rem;
	pointer-events: all;
	width: 100%;
}

.bhr-game-overlay {
	align-items: center;
	backdrop-filter: blur(.75rem) brightness(calc(.75 - .1 * var(--brightness-multiplier)));
	display: flex;
	flex-direction: column;
	inset: 0;
	padding: 1rem;
	pointer-events: all;
	position: absolute;
	visibility: hidden;
}

.bhr-game-overlay nav {
	display: grid;
	font-family: fantasy;
	font-size: clamp(8px, 2cqw, 1rem);
	grid-gap: .25rem;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 50%;
	width: 100vmin;
}

.bhr-game-overlay nav>label {
	-webkit-user-select: none;
	/* background-color: hsl(0deg 0% 50% / 8%); */
	/* border: none; */
	/* border: 1px solid hsl(0deg 0% 50% / 8%); */
	border: 1px solid hsl(0deg 0% 50% / calc(50% - 40% * var(--brightness-multiplier)));
	border-radius: .25rem;
	box-sizing: border-box;
	opacity: .8;
	padding: .25rem .5rem;
	text-align: center;
	transition: background-color 80ms;
	user-select: none;
}

.bhr-game-overlay nav>label:hover {
	/* background-color: hsl(0deg 0% 50% / 20%); */
	background-color: hsl(0deg 0% 50% / calc(50% - 30% * var(--brightness-multiplier)));
	/* cursor: pointer; */
}

.bhr-game-overlay:has(input[type="radio"]#track:checked) nav>label[for="track"],
.bhr-game-overlay:has(input[type="radio"]#ghost:checked) nav>label[for="ghost"],
.bhr-game-overlay:has(input[type="radio"]#recorder-toggle:checked) nav>label[for="recorder-toggle"],
.bhr-game-overlay:has(input[type="radio"]#settings:checked) nav>label[for="settings"] {
	/* background-color: hsl(0deg 0% 40% / 40%); */
	background-color: hsl(0deg 0% 40% / calc(50% - 10% * var(--brightness-multiplier)));
	opacity: 1;
}

.bhr-game-overlay>section {
	align-items: center;
	display: none;
	flex-direction: column;
	gap: .125rem;
	padding: 1rem;
	/* margin: auto; */
	margin-bottom: auto;
	max-width: 80%;
	min-height: 50%;
}

.bhr-game-overlay section[title]::before {
	content: attr(title);
	display: block;
	font-weight: bold;
	margin-bottom: .5rem;
}

.bhr-game-overlay input:is([type="number"],[type="text"]) {
	backdrop-filter: brightness(0.5);
	background-color: transparent;
	border: none;
	border-radius: .25rem;
	color: var(--text-color);
	outline: none;
	padding: .25rem .5rem;
}

/* section:has(> input:is([type="checkbox"], [type="radio"]):not(:checked)) {
    display: none !important;
} */

:has(> :checked) {
	display: flex !important;
	/* revert-layer !important */
	visibility: visible !important;
}

.bhr-game-overlay label:has(> input) {
	-webkit-user-select: none;
	align-items: center;
	/* background-color: hsl(0deg 0% 40% / 60%); */
	background-color: hsl(0deg 0% 40% / calc(50% + 10% * var(--brightness-multiplier)));
	border-radius: .25rem;
	box-sizing: border-box;
	display: flex;
	font-size: smaller;
	justify-content: center;
	padding: 0.5rem 1rem;
	user-select: none;
	width: -webkit-fill-available;
}

.bhr-game-overlay button,
.toast button {
	-webkit-user-select: none;
	border: none;
	border-radius: 4px;
	color: var(--text-color);
	transition: all 40ms;
	user-select: none;
}

.bhr-game-overlay button {
	/* background-color: hsl(0deg 0% 40% / 60%); */
	background-color: hsl(0deg 0% 40% / calc(50% + 10% * var(--brightness-multiplier)));
	padding: 0.5rem 1rem;
}

.toast button {
	background-color: transparent;
	padding: 0.25rem .5rem;
}

.bhr-game-overlay button:hover {
	filter: brightness(calc(1 + .2 * var(--brightness-multiplier)));
}

.toast button:hover {
	backdrop-filter: brightness(calc(1 + .2 * var(--brightness-multiplier)));
}

.disabled,
:disabled,
:placeholder-shown + * > .hidden-placeholder,
.input-container:has(> :placeholder-shown) + * > .hidden-placeholder {
	opacity: 0.5;
	pointer-events: none;
}

.timebar:not(:hover)::-webkit-slider-thumb {
	visibility: hidden;
}

textarea {
	/* background-color: hsl(0deg 0% 50% / 20%); */
	background-color: hsl(0deg 0% 50% / calc(50% - 30% * var(--brightness-multiplier)));
	border: none;
	border-radius: 5px;
	color: white;
	max-width: -webkit-fill-available;
	outline: none;
	padding: 5px;
	resize: none;
}

bhr-game-toolbar>section {
	backdrop-filter: blur(2px) brightness(.8);
	border: 1px solid var(--accent-color);
	border-radius: 4px;
	overflow: hidden;
	position: absolute;
}

/* experimental animations - add settings to enable/disable */
bhr-game-toolbar>section:hover {
	scale: 1.05;
	transition: scale 200ms;
}

bhr-game-toolbar .toolbar-item:hover:active::before {
	scale: 0.8;
}
/* experimental animations end */

bhr-game-toolbar .bottom {
	bottom: 0;
}

bhr-game-toolbar .left {
	left: 0;
}

bhr-game-toolbar .right {
	right: 0;
}

bhr-game-toolbar .top {
	top: 0;
}

bhr-game-toolbar .center {
	display: flex;
	left: 0;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100vw;
	right: 0;
	width: fit-content;
}

bhr-game-toolbar .middle {
	bottom: 0;
	height: fit-content;
	margin-bottom: auto !important;
	margin-top: auto !important;
	max-height: 100vh;
	top: 0;
}

bhr-game-toolbar .island {
	margin: .75vmin;
	transition: scale 90ms ease-out;
}

bhr-game-toolbar .island.scale:hover {
	scale: 1.075;
	transition: scale 90ms ease-out;
}

bhr-game-toolbar button {
	background-color: transparent;
	border: none;
	color: var(--text-color);
	padding: .25rem 1rem;
}

bhr-game-toolbar .toolbar-item {
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: thin;
	-webkit-user-select: none;
	align-items: center;
	aspect-ratio: 1;
	background-color: transparent;
	border: none;
	box-sizing: content-box;
	color: var(--text-color);
	display: flex;
	font-size: .75rem;
	height: 1rem;
	justify-content: center;
	line-height: 1rem;
	margin: 0;
	max-height: 2vh;
	outline: none;
	padding: 0.5rem;
	pointer-events: all;
	position: relative;
	text-align: center;
	user-select: none;
}

bhr-game-toolbar .toolbar-item:is(.backtrack, .camera, .fullscreen, .line, .playpause, .rewind)::before {
	background-color: var(--text-color);
}

bhr-game-toolbar .editor-tools .toolbar-item::before {
	background-color: transparent;
}

bhr-game-toolbar button:hover,
bhr-game-toolbar .toolbar-item:hover,
bhr-game-toolbar .toolbar-item:has(> input:checked):not(.playpause):hover {
	background-color: hsla(0, 0%, calc(50% - 40% * var(--brightness-multiplier)), 0.8);
	transition: all 40ms;
}

bhr-game-toolbar .toolbar-item:has(> input:checked):not(.playpause) {
	background-color: hsla(0, 0%, calc(50% - 40% * var(--brightness-multiplier)), 0.7);
}

bhr-game-toolbar .toolbar-item::before {
	transition: all 200ms;
}

bhr-game-toolbar .toolbar-item>* {
	display: block;
	pointer-events: none;
	transition: all 200ms;
}

.toolbar-item.disabled {
	opacity: .4;
}

.toolbar-item.disabled:hover {
	cursor: not-allowed;
	pointer-events: none;
}

.playpause::before {
	/* content: "▶"; */
	clip-path: polygon(
		10% 10%,
		50% 30%,
		50% 70%,
		50% 70%,
		50% 30%,
		90% 50%,
		90% 50%,
		10% 90%
	);
}

.playpause:has(> :checked)::before {
	clip-path: polygon(
		10% 10%,
		40% 10%,
		40% 90%,
		60% 90%,
		60% 10%,
		90% 10%,
		90% 90%,
		10% 90%
	);
}

.backtrack::before {
	clip-path: polygon(
		15% 10%,
		25% 10%,
		25% 50%,
		85% 10%,
		85% 90%,
		25% 50%,
		25% 90%,
		15% 90%
	);
}

.rewind::before {
	clip-path: polygon(
		0 10%,
		15% 10%,
		15% 50%,

		/* arrow left midway end */
		60% 10%,
		60% 50%,

		/* arrow left midway arrow left*/
		100% 10%,
		100% 90%,
		50% 50%,
		60% 50%,

		60% 90%,
		15% 50%,
		15% 90%,
		0 90%
	);
}

.wheel:active>svg {
	animation: rotate 1s ease;
}

.scenery {
	color: #aaa !important;
}

.scenery:not(.brush)::before {
	background-color: #aaa !important;
}

.toolbar-item::before,
.powerup.triangle::after,
.grid::after {
	content: "";
	inset: .5rem;
	position: absolute;
}

.line::before {
	border-radius: 4px;
	clip-path: polygon(90% 0,
			0 90%,
			10% 100%,
			100% 10%);
}

.eraser::before {
	clip-path: circle(45%);
	background-color: #ffb6c1;
}

.camera::before {
	clip-path: polygon(50% 0,
			30% 25%,
			45% 25%,
			45% 45%,
			25% 45%,
			25% 30%,
			0 50%,
			25% 70%,
			25% 55%,
			45% 55%,
			45% 75%,
			30% 75%,
			50% 100%,
			70% 75%,
			55% 75%,
			55% 55%,
			75% 55%,
			75% 70%,
			100% 50%,
			75% 30%,
			75% 45%,
			55% 45%,
			55% 25%,
			70% 25%,
			50% 0);
}

.grid::before {
	background-color: hsl(0, 0%, 50%);
	border-radius: 20%;
	clip-path: polygon(55% 45%,
			55% 5%,
			45% 5%,
			45% 45%,
			55% 45%,
			95% 45%,
			95% 55%,
			55% 55%,
			55% 95%,
			45% 95%,
			45% 55%,
			5% 55%,
			5% 45%);
}

.grid::after {
	background-color: hsl(0, 0%, 50%);
	border-radius: 20%;
	clip-path: polygon(30% 80%,
			30% 5%,
			20% 5%,

			20% 20%,
			5% 20%,
			5% 30%,
			20% 30%,

			/* MIDDLE HORIZONTAL
        20% 45%,
        0 45%,
        0 55%,
        20% 55%,
        END MIDDLE HORIZONTAL */

			20% 70%,
			5% 70%,
			5% 80%,
			20% 80%,

			20% 95%,
			30% 95%,
			30% 80%,

			70% 80%,
			70% 95%,
			80% 95%,
			80% 80%,

			95% 80%,
			95% 70%,
			80% 70%,

			80% 30%,
			95% 30%,
			95% 20%,
			80% 20%,

			80% 5%,
			70% 5%,

			70% 70%,
			30% 70%,

			30% 20%,
			70% 20%,
			70% 30%,
			30% 30%,

			30% 70%);
}

.powerup:not(.triangle)::before {
	--text-shadow-color: var(--text-color);
	border: 4px solid var(--text-color);
	border-radius: 50%;
	box-sizing: border-box;
	clip-path: circle(30%);
	text-shadow: -1px -1px 0 var(--text-shadow-color), 1px -1px 0 var(--text-shadow-color), -1px 1px 0 var(--text-shadow-color), 1px 1px 0 var(--text-shadow-color);
}

.powerup.target::before {
	background-color: #ff0;
}

.powerup.checkpoint::before {
	background-color: #00f;
}

.powerup.triangle::before {
	background-color: var(--text-color);
	clip-path: polygon(15% 25%,
			85% 50%,
			15% 75%,
			15% 25%);
}

.powerup.triangle::after {
	clip-path: polygon(25% 35%,
			60% 50%,
			25% 65%,
			25% 35%);
}

.powerup.triangle.boost::after {
	background-color: #ff0;
}

.powerup.triangle.gravity::after {
	background-color: #0f0;
}

.powerup.bomb::before {
	background-color: #f00;
}

.powerup.slowmo::before {
	background-color: #eee;
}

.powerup.antigravity::before {
	background-color: #0ff;
}

.powerup.teleport::before {
	background-color: #f0f;
}

.fullscreen::before {
	/* content: "⛶"; */
	clip-path: polygon(0 40%,
			0 0,
			40% 0,
			40% 20%,
			20% 20%,
			20% 40%,
			0 40%,
			0 100%,
			40% 100%,
			40% 80%,
			20% 80%,
			20% 60%,
			0 60%,
			0 100%,
			100% 100%,
			100% 60%,
			80% 60%,
			80% 80%,
			60% 80%,
			60% 100%,
			100% 100%,
			100% 0,
			60% 0,
			60% 20%,
			80% 20%,
			80% 40%,
			100% 40%,
			100% 100%,
			0 100%);
}

:fullscreen .fullscreen::before {
	clip-path: polygon(0 40%,
			40% 40%,
			40% 0,
			20% 0,
			20% 20%,
			0 20%,
			0 60%,
			40% 60%,
			40% 100%,
			20% 100%,
			20% 80%,
			0 80%,
			0 100%,
			60% 100%,
			60% 60%,
			100% 60%,
			100% 80%,
			80% 80%,
			80% 100%,
			60% 100%,
			100% 100%,
			100% 40%,
			60% 40%,
			60% 0,
			80% 0,
			80% 20%,
			100% 20%,
			100% 40%,
			100% 100%,
			0 100%);
}

.increment::before {
	clip-path: polygon(40% 0,
			40% 40%,
			0 40%,
			0 60%,
			40% 60%,
			40% 100%,
			60% 100%,
			60% 60%,
			100% 60%,
			100% 40%,
			60% 40%,
			60% 0);
}

.decrement::before {
	clip-path: polygon(0 40%,
			100% 40%,
			100% 60%,
			0 60%);
}

window-frame {
	background-color: var(--background-color);
	color: #80808080;
	display: grid;
	grid-template-columns: 1fr auto;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	-webkit-app-region: drag;
}

window-frame label {
	font-size: 10px;
	padding: 0 4px;
	position: relative;
	-webkit-app-region: no-drag;
}

window-frame label:hover {
	color: #808080ad;
}

window-frame div[data-position="left"]>* {
	max-height: 1.25rem;
	padding: 0.25rem;
	vertical-align: middle;
}

window-frame div[data-position="right"] {
	display: flex;
	-webkit-app-region: no-drag;
}

window-frame button {
	aspect-ratio: auto;
	background-color: transparent;
	border-radius: 0;
	height: -webkit-fill-available;
	padding: 0.25rem 1rem;
	position: relative;
	vertical-align: middle;
}

window-frame button:hover {
	background-color: #80808030;
	color: var(--text-color);
}

window-frame button:hover:active {
	background-color: #80808050;
}

window-frame button#maximize[title="Restore"]::before {
	content: "▢";
	position: absolute;
	top: 6px;
	left: 14px;
}

window-frame button#close:hover {
	background-color: #ff0000dd;
}

window-frame button#close:hover:active {
	background-color: #ff000090;
}