/* Page colors */

:root
{
	--background: #FFFFFF;
	--foreground: #080808;

	--board-border: #545454;
	--board-background: #F4F4F4;

	--board-green-background: #cbe6ca;
	--board-green: #1B9C10;
	--board-red-background: #ebc7c7;
	--board-red: #EA0A0A;

	--board-cell-clickable-hover: rgba(0, 0, 0, 0.1);

	--button-border: #CECECE;
	--button-background: #EEEEEE;
	--button-background-hover: #E6E6E6;

	--flash-default-border: #CECECE;
	--flash-default-background: #EEEEEE;
	--flash-error-border: #CC8585;
	--flash-error-background: #FFA5A5;

	--winner-window-green-border: #89cc85;
	--winner-window-green-background: #aaffa6;
	--winner-window-red-border: #CC8585;
	--winner-window-red-background: #FFA5A5;
}

/* General page styles */

html, body
{
	margin: 0;
	padding: 0;

	background: var(--background);
	color: var(--foreground);

	font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
	font-weight: normal;
}

/* General layout */

body
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	min-height: 100vh;
}
body > main, body > aside
{
	display: block;
	text-align: center;
}
body > aside
{
	width: 25em;
	max-width: 90%;
}

/* Buttons */

a.button, button
{
	transition: background 0.1s ease;
	display: inline-block;

	margin: 1em auto;
	padding: 0.5em 1em;
	width: fit-content;
	border-radius: 0.5em;

	border: solid var(--button-border) thin;
	background: var(--button-background);
	color: var(--foreground);

	font-size: 1em;
	text-decoration: none;
}
a.button:not(:disabled):hover, button:not(:disabled):hover
{
	background: var(--button-background-hover);
}
a.button:not(:disabled), button:not(:disabled)
{
	cursor: pointer;
}

/* Forms */

label
{
	display: block;
	text-align: left;
}
label > input
{
	display: block;
	margin: 0.5em auto;
	padding: 0.5em;

	font-size: 1em;
}

/* Game board component */

table.game-board
{
	margin: 3em 6em 0;
	border-collapse: collapse;

	transform: rotate(45deg);

	font-size: 0.9em;
}
table.game-board th
{
	padding: 0 0.3em;
	font-size: 1.1em;
	font-weight: 500;
	transform: rotate(-45deg);
}
table.game-board td
{
	padding: 0;

	border: solid var(--board-border) thin;
	background: var(--board-background);

	text-align: center;
	vertical-align: middle;

	line-height: 0;
}
table.game-board td.green-target
{
	background: var(--board-green-background);
}
table.game-board td.red-target
{
	background: var(--board-red-background);
}

table.game-board td button
{
	margin: auto;
	width: 2.5em;
	height: 2.5em;
	padding: 0;
	border-radius: 0;

	border: none;
	background: none;
}
table.game-board td button:not(:disabled):hover
{
	background: var(--board-cell-clickable-hover);
}

/* Pawn component */

.pawn
{
	display: block;

	margin: auto;
	width: 1.66em;
	height: 1.66em;
	border-radius: 1.66em;
	box-sizing: border-box;

	background: var(--board-border);
}
.pawn.red
{
	background: var(--board-red);
}
.pawn.green
{
	background: var(--board-green);
}
.pawn.virtual
{
	opacity: 0.5;
	transform: scale(0.75);
}

.move-start .pawn
{
	border: solid var(--foreground) 2px;
}

/* Moves */

ol.moves
{
	margin: auto;
	padding: 0;
}
ol.moves > li
{
	display: inline-block;
	margin: auto;
	padding: 0;
	list-style: none;
}
ol.moves > li:not(:last-of-type)::after
{
	content: ", ";
}

/* Flash */

.flash > p
{
	padding: 0.5em 1em;
	border-radius: 0.5em;

	border: solid var(--flash-default-border) thin;
	background: var(--flash-default-background);

	text-align: center;
}
.flash > p.error
{
	border: solid var(--flash-error-border) thin;
	background: var(--flash-error-background);
	font-weight: 700;
}

/* Winner */

.winner
{
	margin: auto;
	padding: 0.25em 1em;
	width: fit-content;
	border-radius: 1em;
}
.red.winner
{
	border: solid var(--winner-window-red-border) thin;
	background: var(--winner-window-red-background);
}
.green.winner
{
	border: solid var(--winner-window-green-border) thin;
	background: var(--winner-window-green-background);
}

/* Current player */

.current-player.green strong
{
	color: var(--board-green);
}
.current-player.red strong
{
	color: var(--board-red);
}

/* Join page */

#game-url
{
	width: 20em;
}

/* Homepage */

main.home
{
	margin: auto;
}
main.home a.button
{
	display: block;
	margin: 1em auto;
}



@media screen and (min-width: 800px) {
	table.game-board
	{
		font-size: 1.5em;
	}
}