* {
	box-sizing : border-box;
}

html {
	--cell-size   : calc(100vmin / 10);
	--app-color-0 : #222222;
	--app-color-1 : #999999;
	--app-color-2 : #ededed;
	--app-color-3 : #0d4bbc;
	--app-color-4 : #00fcfc;
	--app-color-5 : #fa0000;
	--app-color-6 : #fcfc00;
	--app-color-7 : gold;
}

body {
	font-family : Helvetica, Arial, sans-serif;
}

.board {
	display               : grid;
	grid-template-columns : repeat(8, var(--cell-size, 3em));
	grid-auto-rows        : var(--cell-size, 3em);
	grid-gap              : 0.2em;
	justify-content       : center;
}

.board a {
	text-decoration : none;
}

.cell {
	border-radius  : calc(var(--cell-size, 3em) / 2);
	line-height    : var(--cell-size);
	text-align     : center;
	vertical-align : middle;
	font-size      : calc(var(--cell-size, 3em) / 2);
	font-weight    : 100;
}

.p0 {
	background-color : var(--app-color-2);
	color            : var(--app-color-1);
}

.p1 {
	background-color : var(--app-color-3);
	color            : var(--app-color-4);
}

.p2 {
	background-color : var(--app-color-5);
	color            : var(--app-color-6);
}

.w1 {
	background  : var(--app-color-7);
	color       : var(--app-color-3);
	font-weight : 300;
}

.w2 {
	background  : var(--app-color-7);
	color       : var(--app-color-5);
	font-weight : 300;
}

/**
 * UI
 */
div#app {
	margin-bottom : 0.2em;
	padding       : 0.2em;
	font-size     : 2em;
	color         : var(--app-color-2);
	background    : var(--app-color-0);
	text-align    : center;
}

div#turn {
	margin     : 0.2em;
	padding    : 0.2em;
	text-align : center;
}

nav#menu {
	display           : grid;
	grid-auto-columns : repeat(auto-fill, var(--cell-size, 3em));
	grid-auto-rows    : var(--cell-size, 3em);
	grid-gap          : 0.2em;
}

nav#menu button {
	background-color : var(--app-color-7);
	color            : var(--app-color-0);
	font-size        : 1.5em;
}

noscript {
	border           : 5px var(--app-color-5) dashed;
	background-color : var(--app-color-6);
	color            : var(--app-color-0);
}