#app {
	align-items: center;
	display: flex;
	justify-content: center;
	width: 100%
}

:root {
	--red: 228, 25, 26;
	--green: 89, 183, 33;
	--blue: 131, 83, 231;
	--yellow: 253, 186, 42;
	--orange: 228, 79, 24;
	--light-blue: 45, 255, 254;
	--pink: 252, 40, 252;
	--maroon: 163, 43, 46;
	--purple: 127, 15, 126;
	--white: 255, 255, 255;
	--grey: 166, 166, 166;
	--light-green: 41, 253, 47;
	--beige: 189, 182, 111;
	--dark-blue: 3, 14, 136;
	--teal: 17, 128, 127;
	--dark-pink: 252, 34, 147
}

.cell {
	aspect-ratio: 1;
	background-image: radial-gradient(ellipse at center, transparent 0%, transparent 20.5%, #000 21.484374%);
	border: 1px solid #666;
	box-sizing: border-box;
	position: relative
}

.cell[data-final] {
	background-image: radial-gradient(ellipse at center, transparent 0%, transparent 20.5%, rgba(0, 0, 0, .5) 21.484374%);
	cursor: pointer;
}

.cell[data-connections] {
	cursor: pointer;
}

.cell.point {
	background-image: radial-gradient(ellipse at center, transparent 0%, transparent 49.5%, #000 50%);
	cursor: pointer;
}

.cell.point[data-final] {
	background-image: radial-gradient(ellipse at center, transparent 0%, transparent 49.5%, transparent 49.5%, rgba(0, 0, 0, .5) 50%)
}

.cell:after,
.cell:before {
	content: "";
	background-color: inherit;
	display: block;
	position: absolute
}

.cell[data-connections~=t]:before {
	width: 30%;
	height: 50%;
	left: 35%;
	top: -1px
}

.cell[data-connections~=b]:before {
	width: 30%;
	height: 50%;
	left: 35%;
	bottom: -1px
}

.cell[data-connections~=l]:before {
	width: 50%;
	height: 30%;
	left: -1px;
	top: 35%
}

.cell[data-connections~=r]:before {
	width: 50%;
	height: 30%;
	right: -1px;
	top: 35%
}

.cell[data-connections~=t][data-connections~=b]:before {
	width: 30%;
	height: calc(100% + 2px);
	left: 35%;
	top: -1px
}

.cell[data-connections~=l][data-connections~=r]:before {
	width: calc(100% + 2px);
	height: 30%;
	left: -1px;
	top: 35%
}

.cell[data-connections~=t][data-connections~=l]:before {
	width: 30%;
	height: 50%;
	left: 35%;
	top: -1px
}

.cell[data-connections~=t][data-connections~=l]:after {
	width: 50%;
	height: 30%;
	left: -1px;
	top: 35%
}

.cell[data-connections~=t][data-connections~=r]:before {
	width: 30%;
	height: 50%;
	left: 35%;
	top: -1px
}

.cell[data-connections~=t][data-connections~=r]:after {
	width: 50%;
	height: 30%;
	right: -1px;
	top: 35%
}

.cell[data-connections~=b][data-connections~=l]:before {
	width: 30%;
	height: 50%;
	left: 35%;
	top: auto;
	bottom: -1px
}

.cell[data-connections~=b][data-connections~=l]:after {
	width: 50%;
	height: 30%;
	left: -1px;
	top: 35%
}

.cell[data-connections~=b][data-connections~=r]:before {
	width: 30%;
	height: 50%;
	left: 35%;
	top: auto;
	bottom: -1px
}

.cell[data-connections~=b][data-connections~=r]:after {
	width: 50%;
	height: 30%;
	right: -1px;
	top: 35%
}

.cell.red {
	background-color: rgb(var(--red))
}

.cell.green {
	background-color: rgb(var(--green))
}

.cell.blue {
	background-color: rgb(var(--blue))
}

.cell.yellow {
	background-color: rgb(var(--yellow))
}

.cell.orange {
	background-color: rgb(var(--orange))
}

.cell.light-blue {
	background-color: rgb(var(--light-blue))
}

.cell.pink {
	background-color: rgb(var(--pink))
}

.cell.maroon {
	background-color: rgb(var(--maroon))
}

.cell.purple {
	background-color: rgb(var(--purple))
}

.cell.white {
	background-color: rgb(var(--white))
}

.cell.grey {
	background-color: rgb(var(--grey))
}

.cell.light-green {
	background-color: rgb(var(--light-green))
}

.cell.beige {
	background-color: rgb(var(--beige))
}

.cell.dark-blue {
	background-color: rgb(var(--dark-blue))
}

.cell.teal {
	background-color: rgb(var(--teal))
}

.cell.dark-pink {
	background-color: rgb(var(--dark-pink))
}

.grid {
	background-color: #000;
	display: grid;
	width: 100%;
	max-width: 500px;
	grid-template-columns: repeat(var(--width), 1fr);
	grid-template-rows: repeat(var(--height), 1fr);
	--unit: min(calc(100% / var(--height)), calc(100% / var(--width)));
	-webkit-user-select: none;
	user-select: none
}

.touch-highlight {
	border-radius: 50%;
	--opacity: .4;
	position: fixed;
	height: calc(1.5 * var(--unit));
	pointer-events: none;
	transform: translate(-50%, -50%);
	--unit: min(calc(100vh / var(--height)), calc(100vw / var(--width)));
	width: calc(1.5 * var(--unit));
	max-width: 100px;
	max-height: 100px;
	z-index: 2
}

.touch-highlight.good {
	--opacity: .6
}

.touch-highlight.invalid {
	--opacity: .1
}

.touch-highlight.red {
	background-color: rgba(var(--red), var(--opacity))
}

.touch-highlight.green {
	background-color: rgba(var(--green), var(--opacity))
}

.touch-highlight.blue {
	background-color: rgba(var(--blue), var(--opacity))
}

.touch-highlight.yellow {
	background-color: rgba(var(--yellow), var(--opacity))
}

.touch-highlight.orange {
	background-color: rgba(var(--orange), var(--opacity))
}

.touch-highlight.light-blue {
	background-color: rgba(var(--light-blue), var(--opacity))
}

.touch-highlight.pink {
	background-color: rgba(var(--pink), var(--opacity))
}

.touch-highlight.maroon {
	background-color: rgba(var(--maroon), var(--opacity))
}

.touch-highlight.purple {
	background-color: rgba(var(--purple), var(--opacity))
}

.touch-highlight.white {
	background-color: rgba(var(--white), var(--opacity))
}

.touch-highlight.grey {
	background-color: rgba(var(--grey), var(--opacity))
}

.touch-highlight.light-green {
	background-color: rgba(var(--light-green), var(--opacity))
}

.touch-highlight.beige {
	background-color: rgba(var(--beige), var(--opacity))
}

.touch-highlight.dark-blue {
	background-color: rgba(var(--dark-blue), var(--opacity))
}

.touch-highlight.teal {
	background-color: rgba(var(--teal), var(--opacity))
}

.touch-highlight.dark-pink {
	background-color: rgba(var(--dark-pink), var(--opacity))
}

/*# sourceMappingURL=app.css.map */