#crosshair {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	pointer-events: none;
	user-select: none;
	z-index: 100;
	font-size: 32px;
}

.viewport {
	perspective: var(--perspective);
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;

	&, * {
		position: absolute;
		transform-style: preserve-3d;
		transform-origin: 0 0;
	}
}

.camera {
	left: 50%;
	top: 50%;
	translate: 0 0 var(--perspective);
}


.tile:has(.edit-handle.hovered) {
	pointer-events: none;
}

#edit-handles {
	display: grid;
	inset: 0;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}

body:not([data-game-mode="EDIT"]) {
	#edit-handles {
		display: none;
	}
	.warp {
		visibility: hidden;
	}
}

body[data-game-mode="EDIT"][data-edit-tool="flip"] .tile {
	backface-visibility: hidden;
}

.edit-handle {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: all;

	:where([data-edit-tool="remove"], [data-edit-tool="move"], [data-edit-tool="shadow"], [data-edit-tool="flip"], [data-edit-tool="turn"]) &,
	:where([data-edit-tool="add"], [data-edit-tool="size"]) &:not(:nth-child(5)),
	:where([data-edit-tool="rotate"]) &:nth-child(even) {
		background-color: color-mix(in hsl, transparent 60%, currentColor);

		&.hovered {
			background-color: currentColor;
		}
	}

	[data-edit-tool="add"] & { color: lime; }
	[data-edit-tool="remove"] & { color: crimson; background-color: currentColor; }
	[data-edit-tool="rotate"] & { color: orange; }
	[data-edit-tool="move"] & { color: skyblue; }
	[data-edit-tool="size"] & { color: purple; }
	[data-edit-tool="shadow"] & { color: gold; }
	[data-edit-tool="turn"] & { color: rgb(3 252 207 / 40%); background-color: currentColor; }
	[data-edit-tool="flip"] & { color: rgb(11 3 252 / 41%); background-color: currentColor; }
}

#player-shadow {
	background-color: #00000030;
	border-radius: 50%;
	box-shadow: 0px 0px 20px 20px #00000030;
}