@import url("https://fonts.googleapis.com/css2?family=KoHo&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "KoHo", sans-serif;
}

h1 { font-size: 5vh; }
h5 { font-size: 2vh; }
h1, h5 { text-align: center; }

h1, h5, #scores, #mobile-options h4, #mobile-options label {
	color: #fff;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#mobile-options label {	text-shadow: -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000; }
#mobile-options .img-label { font-size: 18px; }

main {
	width: max-content;
	margin: auto;
	--size: 65vh;
	padding-top: 20px;
}

#board {
	--padding: 5px;
	--spacing: 2.5px;
	vertical-align: middle;
	height: var(--size);
	width: var(--size);
	padding: var(--padding);
	margin: 5px auto;
	background-color: rgba(200, 200, 200, 0.85);
	border-radius: var(--padding);
	display: inline-block;
}

.x3 { --mode: 3; }
.x4 { --mode: 4; }
.x5 { --mode: 5; }

.row {
	width: 100%;
	height: calc(100% / var(--mode) - var(--spacing) * (1 - 1 / var(--mode)));
}

.tile {
	height: 100%;
	width: calc(100% / var(--mode) - var(--spacing) * (1 - 1 / var(--mode)));
	display: inline-block;
	background-color: white;
	background-image: url(/media/replit.png);
	background-size: calc(var(--size) - 2 * var(--padding));
	background-repeat: no-repeat;
	transition: transform 150ms;
}

.row:not(:first-child) { margin-top: var(--spacing); }
.row .tile:not(:first-child) { margin-left: var(--spacing); }

.row .col1 { background-position-x: 0; }
.row .col2 { background-position-x: calc((var(--size) / var(--mode) - var(--spacing)) * -1) }
.row .col3 { background-position-x: calc((var(--size) / (var(--mode) / 2) - 2 * var(--spacing)) * -1); }
.row .col4 { background-position-x: calc((var(--size) / (var(--mode) / 3) - 3 * var(--spacing)) * -1); }
.row .col5 { background-position-x: calc((var(--size) / (var(--mode) / 4) - 4 * var(--spacing)) * -1); }

.row1.tile { background-position-y: 0; }
.row2.tile { background-position-y: calc((var(--size) / var(--mode) - var(--spacing)) * -1); }
.row3.tile { background-position-y: calc((var(--size) / (var(--mode) / 2) - 2 * var(--spacing)) * -1); }
.row4.tile { background-position-y: calc((var(--size) / (var(--mode) / 3) - 3 * var(--spacing)) * -1); }
.row5.tile { background-position-y: calc((var(--size) / (var(--mode) / 4) - 4 * var(--spacing)) * -1); }

.tile.right { transform: translateX(calc(var(--size) / var(--mode) - var(--spacing))); }
.tile.left { transform: translateX(calc(var(--size) / var(--mode) * -1 + var(--spacing))); }
.tile.up { transform: translateY(calc(var(--size) / var(--mode) * -1 + var(--spacing))); }
.tile.down { transform: translateY(calc(var(--size) / var(--mode) - var(--spacing))); }
.tile.right, .tile.left, .tile.down, .tile.up { pointer-events: none; }

.x3 .row .col4, .x3 .row .col5, .x3 #row4, .x3 #row5, .x4 .row .col5, .x4 #row5 { display: none !important; }

.blank {
	background-image: none !important;
	background-color: transparent !important;
}

.won {
	pointer-events: none;
	background-color: rgba(0, 225, 0, 0.85) !important;
}

#image-select, #settings {
	--padding: 10px;
	font-size: calc(var(--size) / 35);
	display: inline-block;
	width: calc((var(--size) / 3 + (var(--padding)) * 2) / 1.25);
	height: var(--size);
	vertical-align: middle;
	background-color: rgba(200, 200, 200, 0.85);
	padding: var(--padding);
	border-radius: calc(var(--padding) / 2);
	position: relative;
}

#images {
	margin: auto;
	width: max-content;
}

#images > button, #images label {
	--width: calc((var(--size) / 3.6 - (var(--padding) * 2)) / 1.25);
}

#images > button, #mobile-images > button {
	width: var(--width);
	height: var(--width);
	cursor: pointer;
	display: block;
	margin: 10px auto;
	border: 5px solid #16aaec;
	border-radius: 22.5%;
	transition: border-color 0.3s;
}

#images > button:hover, #mobile-images > button:hover {
	border-color: #45cc01;	
}

#images img, #mobile-images img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 22.5%;
}

label {
	cursor: pointer;
	vertical-align: middle;
	user-select: none;
}

.img-label {
	position: absolute;
	bottom: 10px;
	display: block;
	width: var(--width);
	text-align: center;
	background-color: #16aaec;
	color: #fff;
	padding: 5px;
	border-radius: 5px;
	font-weight: 600;
	font-size: calc(var(--size) / 40);
	transition: background-color 0.3s;
}

.img-label:hover {
	background-color: #45cc01;
}

#img-input, #mobile-img-input {
	display: none;
}

#preferences {
	margin-top: 20px;
}

#preferences h4, #mode h4 {
	margin-bottom: 10px;
}

input, select, button, textarea {
	-webkit-appearance: none;
}

input[type="checkbox"], input[type="radio"] {
	display: inline-block;
	position: relative;
	width: calc(var(--size) / 35);
	height: calc(var(--size) / 35);
	font-size: calc(var(--size) / 35);
	margin: 0;
	margin-right: 3px;
	vertical-align: middle;
	border-radius: 25%;
	background-color: #ddd;
	cursor: pointer;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
	background-color: #16aaec;
}

input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
	position: absolute;
	display: block;
	content: "✔";
	color: #fff;
	top: 45%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

input[type="radio"]:checked::before {
	content: "•";
	font-size: 150%;
	top: 36%;
}

input[type="radio"] {
	border-radius: 50%;
}

#start {
	display: block;
	width: var(--size);
	font-size: calc(var(--size) / 12.5);
	padding-bottom: 5px;
	background-color: #16aaec;
	color: #fff;
	border-radius: 30px;
	cursor: pointer;
	font-weight: 600;
	transition: background-color 0.3s;
	border: none;
	margin: auto;
}

#start:hover {
	background-color: #45cc01;
}

#scores {
	width: var(--size);
	margin: auto;
	margin-top: 20px;
}

#current, #best {
	width: 50%;
	display: inline-block;
	padding: 10px;
}

#current { border-right: 2.5px solid #16aaec; }
#best { border-left: 2.5px solid #16aaec; }

#current p {
	text-align: right;
}

#best p {
	text-align: left;
}

#mobile-options { display: none; }

@media screen and (max-width: 1000px) {
	main { --size: 60vh; }
	.img-label { font-size: calc(var(--size) / 45)}
}

@media screen and (max-width: 600px) {
	h1 { font-size: 30px; }
	h5 { font-size: 10px; }

	#mobile-options { display: block; }
	#image-select, #settings { display: none; }

	main {
		--size: 95vw;
		padding-bottom: calc((100vh - var(--size)) / 2 - 75px);
	}

	#scores { width: 100%; }

	#board {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	#mobile-images > button {
		width: 22.5vw;
		height: 22.5vw;
		display: inline-block;
		margin-right: 1vw;
	}

	#mobile-images { margin: auto; }

	.img-label {
		display: block;
		position: static;
		width: var(--size);
		bottom: 0;
	}

	#mobile-options {
		font-size: 20px;
	}

	input[type="checkbox"], input[type="radio"] {		
		width: 15px;
		height: 15px;
	}
}



#background {
	position: fixed;
	height: 100vh;
	width: 100vw;
	z-index: -100;
	overflow: hidden;
}

.bg-row {
	height: 175px;
	width: 100vw;
	white-space: nowrap;
}

.bg-tile {
	width: 175px;
	height: 100%;
	display: inline-block;
	transition: transform 500ms;
}

.bg-blank {
	background: none !important;
}

.bg-tile.up { transform: translateY(-175px); }
.bg-tile.down { transform: translateY(175px); }
.bg-tile.left { transform: translateX(-175px); }
.bg-tile.right { transform: translateX(175px); }