/*** page ***/
	:root {
		--dark-gray: #111111;
		--medium-gray: #777777;
		--light-gray: #dddddd;
		--dark-blue: #003377;
		--medium-blue: #0066aa;
		--light-blue: #04b1ff;
		--medium-red: #d94c4c;
		--shadow-size: 5px;
		--font-family: monospace;
		--gap-size: 10px;
		--border-radius: 5px;
		--border-width: 2px;
		--font-size: 25px;
		--image-size: 200px;
		--j-size: 50px;
		--transition-time: 0.5s;
		--menu-width: 500px;
		--player-1:  #e20000;
		--player-3:  #ded00b;
		--player-8:  #8cc43c;
		--player-4:  #029632;
		--player-6: #379494;
		--player-2:  #2f64c1;
		--player-5:  #725dc1;
		--player-7:  #e956aa;
		--player-9:  #694417;
	}

	html, body {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		overflow: hidden;
		margin: 0;
		padding: 0;
		background: var(--dark-gray);
		font-size: 0;
		font-family: var(--font-family);
	}

	svg {
		fill: currentColor;
		height: 100%;
		width: auto;
	}

	details summary::marker {
		display: none;
	}

	details summary {
		list-style-type: none;
		outline: none;
	}

	details summary::-webkit-details-marker {
		display: none;
	}

/*** menu ***/
	#menu {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}

	/* button */
		#menu-button {
			position: absolute;
			top: var(--gap-size);
			left: var(--gap-size);
			font-size: var(--font-size);
			color: var(--dark-gray);
			transition: var(--transition-time);
			cursor: pointer;
			outline: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-o-user-select: none;
			user-select: none;
			width: calc(5 * var(--gap-size));
			height: calc(var(--font-size) + 2 * var(--gap-size));
			padding: var(--gap-size);
			box-sizing: border-box;
			background: var(--medium-gray);
			border-radius: var(--border-radius);
			text-align: center;
			line-height: 1;
		}

		#menu-button:hover, #menu-button:focus, #menu[open] #menu-button {
			background: var(--light-gray);
			box-shadow: 0 0 var(--shadow-size) var(--light-gray);
		}

	/* inner */
		#menu:not([open]) #menu-inner {
			pointer-events: none;
		}

		#menu-inner {
			z-index: 10;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			height: auto;
			max-height: calc(100% - 2 * var(--gap-size));
			width: var(--menu-width);
			max-width: calc(100% - 14 * var(--gap-size));
			padding: var(--gap-size);
			box-sizing: border-box;
			overflow-x: hidden;
			overflow-y: scroll;
			border: none;
			border-radius: var(--border-radius);
			box-shadow: 0 0 var(--shadow-size) var(--medium-gray);
			background: var(--dark-gray);
		}

		#menu-inner svg {
			height: var(--font-size);
			width: var(--font-size);
			vertical-align: middle;
		}

		#menu-start {
			width: 100%;
			background: var(--medium-gray);
			color: var(--dark-gray);
			cursor: pointer;
			outline: none;
			border-radius: var(--border-radius);
			text-transform: uppercase;
			font-size: var(--font-size);
			font-family: var(--font-family);
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-o-user-select: none;
			user-select: none;
			transition: var(--transition-time);
			border: none;
			margin: 0 0 var(--gap-size) 0;
			padding: var(--gap-size);
		}

		#menu-start:hover, #menu-start:focus {
			background: var(--light-gray);
			box-shadow: 0 0 var(--shadow-size) var(--light-gray);
		}

		#menu-error {
			float: left;
			width: 100%;
			height: auto;
			margin-bottom: var(--gap-size);
			font-size: var(--font-size);
			color: var(--medium-red);
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-o-user-select: none;
			user-select: none;
			text-align: center;
			text-transform: uppercase;
		}

		#menu-error:empty {
			display: none;
		}

		#menu-inner label {
			float: left;
			width: 100%;
			margin: 0 0 var(--gap-size) 0;
		}

		#menu-inner label span, #menu-inner div span {
			font-size: var(--font-size);
			color: var(--medium-gray);
			font-family: var(--font-family);
			padding: 0;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-o-user-select: none;
			user-select: none;
			cursor: pointer;
		}

		#menu-inner div > span {
			text-transform: uppercase;
			margin-bottom: var(--gap-size);
		}

		#menu-inner label input:not([type="checkbox"]) {
			font-size: var(--font-size);
			color: var(--dark-gray);
			background: var(--light-gray);
			font-family: var(--font-family);
			transition: var(--transition-time);
			border-radius: var(--border-radius);
			border: none;
			margin: 0 var(--gap-size) 0 0;
			padding: var(--gap-size);
			outline: none;
			width: calc(4 * var(--font-size));
			max-width: 40%;
			box-sizing: border-box;
		}

		#menu-inner label input:focus, #menu-inner label input:hover {
			box-shadow: 0 0 var(--shadow-size) var(--light-gray);
		}

		#menu-inner hr {
			width: 100%;
			height: 0;
			border-radius: var(--border-radius);
			border: var(--border-width) solid var(--medium-gray);
			box-sizing: border-box;
			margin-bottom: var(--gap-size);
		}

		#menu-inner label input[type="checkbox"] {
			margin: 0 var(--gap-size);
			cursor: pointer;
			outline: none;
			transition: var(--transition-time);
		}

		#menu-inner div {
			float: left;
			width: 100%;
		}

/*** scores ***/
	#scores {
		position: absolute;
		top: calc(4 * var(--gap-size) + var(--font-size));
		left: var(--gap-size);
		height: auto;
		width: calc(5 * var(--gap-size));
	}

	.scores-player-outer {
		float: left;
		width: 100%;
		height: calc(2 * var(--font-size));
		margin-bottom: var(--gap-size);
		box-sizing: border-box;
		padding: 0;
		border-radius: var(--border-radius);
		color: var(--dark-gray);
		transition: var(--transition-time);
	}

	.scores-player-outer[selected] {
		box-shadow: 0 0 var(--shadow-size) var(--light-gray);
		color: var(--light-gray);
	}

	.scores-player-name {
		float: left;
		height: var(--font-size);
		width: 100%;
		font-size: var(--font-size);
		font-family: var(--font-family);
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		text-align: center;
		line-height: 1;
	}

	.scores-player-inner {
		float: left;
		height: var(--font-size);
		width: 100%;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		font-size: var(--font-size);
		font-family: var(--font-family);
		text-align: center;
		line-height: 1;
	}

	#victory {
		position: absolute;
		top: calc(2 * var(--gap-size));
		left: 50%;
		transform: translateX(-50%);
		width: auto;
		height: auto;
		line-height: 1;
		text-transform: uppercase;
		font-size: var(--font-size);
		font-family: var(--font-family);
		color: var(--light-gray);
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		pointer-events: none;
		text-shadow: 0 0 var(--shadow-size) var(--light-gray);
	}

/*** board ***/
	#board {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		height: calc(100vw - 13 * var(--gap-size));
		width: calc(100vw - 13 * var(--gap-size));
		max-height: calc(100vh - 13 * var(--gap-size));
		max-width: calc(100vh - 13 * var(--gap-size));
		overflow: hidden;
		box-sizing: border-box;
	}

	.board-tile {
		background: var(--medium-gray);
		color: var(--dark-gray);
		cursor: pointer;
		outline: none;
		border-radius: var(--border-radius);
		font-size: var(--font-size);
		font-family: var(--font-family);
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		transition: var(--transition-time);
		border: none;
		margin: calc(var(--gap-size) / 2);
		padding: 0;
	}

	.board-tile:hover, .board-tile:focus {
		background: var(--light-gray);
		box-shadow: 0 0 var(--shadow-size) var(--light-gray);
	}

	.board-tile[selected] {
		background: var(--light-gray);
	}

	.board-tile[player] {
		pointer-events: none;
	}

/*** players ***/
	[player="1"] {
		background: var(--player-1);
	}

	[player="2"] {
		background: var(--player-2);
	}

	[player="3"] {
		background: var(--player-3);
	}

	[player="4"] {
		background: var(--player-4);
	}

	[player="5"] {
		background: var(--player-5);
	}

	[player="6"] {
		background: var(--player-6);
	}

	[player="7"] {
		background: var(--player-7);
	}

	[player="8"] {
		background: var(--player-8);
	}

	[player="9"] {
		background: var(--player-9);
	}

	[player="10"] {
		background: var(--player-10);
	}

/*** j-logo ***/
	#j-logo {
		position: fixed;
		top: 14px;
		right: 7px;
		color: var(--light-blue);
		height: 32px;
		width: 32px;
		cursor: pointer;
		z-index: 1000;
		outline: none;
		transition: var(--transition-time);
	}

	#j-logo svg {
		fill: currentColor;
		height: 100%;
		width: auto;
	}
	
	#j-logo:hover, #j-logo:focus {
		filter: drop-shadow(0 0 var(--shadow-size) var(--light-gray));
	}