:root {
	--tile-max-width: 100px;
	--tile-margin: 4px;
	--tile-border: 4px;
	--board-width: calc(min(100vw, (var(--tile-max-width) - var(--tile-border)) * var(--puzzle-width)));
	--tile-width-with-margin: calc(var(--board-width) / var(--puzzle-width));
	--tile-width: calc(var(--tile-width-with-margin) - var(--tile-margin));

	--bg-color: black;
	--fg-color: white;
	--link-color: #b0b0ff;

	@media (prefers-color-scheme: light) {
		--bg-color: white;
		--fg-color: black;
		--link-color: #000080;
	}
}

body {
	background-color: var(--bg-color);
	color: var(--fg-color);
	margin: 0;
}

#app {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a {
	color: var(--link-color);
}

header {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: row;
	padding-bottom: 1em;

	.title {
		flex-grow: 1;
		text-align: center;
		letter-spacing: 0.2em;
		font-size: 32px;
		overflow: hidden;
	}

	button, .button-sized-spacer {
		aspect-ratio: 1 / 1;
		width: 64px;
		font-size: 32px;
		background-color: var(--bg-color);
		color: var(--link-color);
		border-radius: 25%;
		border: var(--tile-border) solid var(--link-color);
	}
	.button-sized-spacer {
		visibility: hidden;
	}
}

main {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	flex: 1;
}

dialog {
	background-color: var(--bg-color);
	color: var(--fg-color);
	border-radius: 16px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);

	h2, h3, h4, h5, h6 {
		margin: 0.5em auto;
		padding: 0.5em 0;
		border-bottom: 1px solid gray;
	}
}

.board,
.mode-palette,
.example-tile-container {
	width: var(--board-width);
	display: grid;
	grid-auto-columns: 1fr;
	max-width: 100%;
}

.board,
.mode-palette {
	user-select: none;
	touch-action: none; /* dragging a finger here isn't a scroll attempt */
}

.tile {
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	width: calc(100% - var(--tile-margin));

	display: flex;
	align-items: center;
	justify-content: center;
	margin: calc(var(--tile-margin) / 2);
	border-radius: 25%;
	border: var(--tile-border) solid transparent;

	img {
		user-select: none;
		touch-action: none; /* dragging a finger here isn't a scroll attempt */
		width: 61.8%;
		height: 61.8%;

		&.draft-added {
			opacity: 50%;
		}
		&.draft-changed {
			opacity: 50%;
		}
		&.draft-deleted {
			opacity: 50%;
			filter: contrast(0%) brightness(0%) blur(4px);
		}
	}

	&.conflicted {
		border: var(--tile-border) solid red;
	}

	&.selected {
		border: var(--tile-border) solid var(--link-color);
	}
}

.mode-palette,
.youre-winner {
	padding-top: 1em;
	margin-top: 1em;
	border-top: 1px solid black;
}

.youre-winner {
	font-size: 1.5em;

	.copy-result-button {
		border-radius: 8px;
		font-size: 1em;
		padding: 0.5em;

		background-color: var(--bg-color);
		color: var(--link-color);
		border: var(--tile-border) solid var(--link-color);
	}
}

.dev-tools {
	>* {
		margin: 0 1em;
	}
}

.about {
	display: grid;
	grid-template-columns: calc(min(200px, 50vw)) 1fr;
	grid-auto-flow: row;
	line-height: 1.5em;

	>h2, >h3, >h4, >h5, >h6, >.credits {
		grid-column-end: span 2;
	}

	>.help-image-half-width, >.help-image-full-width {
		margin: 1em auto;
	}
	>.help-image-half-width {
		width: calc(min(200px, 50vw) / 2);
	}
	>.help-image-full-width {
		width: calc(min(200px, 50vw));
	}

	>.help-text {
		display: flex;
		align-items: center;
		margin-left: 1em;
	}
}

footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100vw;
	margin: 1em 0;
	line-height: 1.5em;
}

.packed-puzzle-data {
	font-size: 1.5em;
	width: 200px;
	overflow: scroll;
}