:root {
	--nav-color: #323232;
	--tile-color: cornflowerblue;

	--row-count: 4;
	--col-count: 6;

	--color-a: #57808b;
	--color-b: #31638b;
	--tile-outline: #d8d8d8;
	--tile-label: #ffffff40;
}

@font-face {
  font-family: "fredoka";
  font-weight: 500;
  src: url("/assets/fredoka.ttf") format("truetype");
}


body {
	margin: 0;
	font-family: verdana, arial;
	user-select: none;
}

main {

	background: repeating-linear-gradient(45deg, var(--color-a), var(--color-a) 20px, var(--color-b) 20px, var(--color-b) 40px);
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: absolute;
}

#board {
	display: grid;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 64px;
	padding: 4px;
	z-index: 10;

	grid-template-columns: repeat(var(--col-count), 1fr);
	grid-template-rows: repeat(var(--row-count), 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;



	background: repeating-linear-gradient(45deg, var(--color-a), var(--color-a) 20px, var(--color-b) 20px, var(--color-b) 40px);



}

.tile {
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;

	margin: 4px;
	border: 2px solid var(--tile-outline);
	border-radius: 8px;
	background-color: var(--tile-color);
	box-sizing: border-box;
	position: relative;

	display: flex;
	align-items: center;
	flex-direction: column-reverse;

	transform: rotateY(0deg);
	transition: width 1s, height 1s, left 1s, top 1s, transform 0.5s;

	transform-style: preserve-3d;
}

.tile.flipped {
	transform: rotateY(180deg) !important;
	width: calc(100% - 64px) !important;
	top: 32px !important;
	left: 32px !important;
	height: 100% !important;

	z-index: 10 !important;
}

.tile img {
	width: 100%;
	height: 100%;
	padding: 8px;
	object-fit: scale-down;
	box-sizing: border-box;
	position: absolute;

	grid-column: 1;
	grid-row: 1;

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.tile video {
	position: relative;
	width: 100%;

	grid-column: 1;
	grid-row: 1;

	transform: rotateY(180deg);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	border-radius: 8px;
	background-color: darkblue;

	height: 100%;
	width: 100%;
	object-fit: cover;
	overflow: auto;
}

nav {
	position: fixed;
	background-color: var(--nav-color);
	left: 0;
	right: 0;
	bottom: 0;
	height: 64px;
	z-index: 5;
	box-shadow: 0 0 16px rgba(0, 0, 0, .3);

	display: flex;
}

#nav-boards {
	display: flex;
	justify-content: space-around;
	width: 100%;
	margin-right: 64px;
}

#nav-menu-button {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: rotate(0deg);
	transition: transform .3s;
}

#nav-menu-button.selected {
	transform: rotate(90deg);
}

#nav-menu-button img {
	width: 80%;
	height: 80%;
}

.tab-button {
	flex-grow: 1;
	text-align: center;
	filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.2));
}

.selected {
	filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.5));
}

#config {
	position: absolute;
	top: 0;
	background-color: white;
	z-index: 10;
	width: min(50%, 320px);
	left: min(-50%, -320px);
	height: calc(100% - 64px);
	transition: left .3s;
	background-color: var(--nav-color);
	color: white;
	overflow: overlay;
}

#config-container {
	padding: 0 32px;
}

#config.menu-expanded {
	left: 0;
}

#greet {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: absolute;
	width: 100vw;
}

#greet-box {
	padding: 0 16px;
	border: 2px solid white;
	border-radius: 8px;
	background-color: var(--tile-color);
	position: absolute;
	top: calc(50vh - 64px);
	left: 50vw;
	transform: translate(-50%, -50%);
}

#greet-arrow {
	width: 48px;
	position: absolute;
	top: 60vh;
	left: 50vw;
	transform: translate(-50%, -50%);
}

#debug {
	background-color: white;
	opacity: 50%;
	position: absolute;
	z-index: 500;
	font-family: monospace;
}

#debug video {
	width: 512px;
}

.disabled {
	pointer-events: none !important;
}

#board.has-labels .tile-title {
	display: block;
}

#board.has-labels img {
	height: calc(100% - 1.5em);
	top: 0;
}

#board.has-labels .tile:not(.flipped) {
	overflow: hidden;
}

#board.has-labels .tile.flipped .tile-title {
	display: none;
}

#board .tile-title {
	display: none;

	position: absolute;
	font-size: min(1.5em, 4vw);
	text-align: center;
	overflow: hidden;
	max-width: 100%;
	width: 100%;
	margin-bottom: 2px;

	background-color: var(--tile-label);
	box-shadow: 0 0 4px 4px var(--tile-label);
	font-family: "fredoka";
}

#attributions a {
	color: white;
}