:root {
	--color-body-background: #0e1e1e;
	--color-body: #dfefef;
	
	--color-board-edging: #ffd700;
	--color-board-edging-tr: black;
	--color-board-edging-bl: white;
	--color-board-background: #592b05;
	--color-board-square-light: #f0d9b5;
	--color-board-square-dark: #b58863;


	--color-marker-move-white: rgba(0, 255, 0, 0.125);
	--color-marker-move-black: rgba(0, 0, 255, 0.125);
	--color-marker-move-both: rgba(0, 255, 255, 0.125);
	--color-marker-move-possible-white: rgba(0, 255, 0, 0.5);
	--color-marker-move-possible-black: rgba(0, 0, 255, 0.5);
	--color-marker-check: rgba(255, 0, 0, 0.4);

	--color-overlay-background: rgba(0, 0, 0, 0.7);
	--color-overlay-content-background: rgba(14, 30, 30, 0.8);

	--color-promotion-overlay-background: rgba(14, 30, 30, 0.875);
	--color-promotion-overlay-piece-hover-background: rgba(0, 255, 255, 0.6);
	
	--color-piece: black;
	--color-piece-background: rgba(223, 239, 239, 0.6);

	--color-thrown-outs-piece-last: rgba(255, 100, 100, 0.6);
	--color-moves-move-no: rgba(255, 255, 255, 0.1);
	--color-moves-marked-background: rgba(123, 139, 139, 0.6);
	--color-moves-future: #9fafaf;

	--color-button-border: rgba(255, 255, 255, 0.8);
	--color-button-disabled: rgba(255, 255, 255, 0.2);
	--color-error: red;

	--scrollbar-color-thumb: #3e4e4e;
	--scrollbar-color-track: #1e2e2e;
	--scrollbar-width: auto;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    :root {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}
body, button, input, textarea {
	margin: 0;
	background-color: var(--color-body-background);
	color: var(--color-body);
	/* font-size: width (or height) of 1 #board .grid square; */
	font-size: calc(100vmin * 3 / 28);
	font-family: serif;
}
a {
	color: var(--color-body);
}
input, textarea {
	padding-top: 0.3em;
	box-sizing: border-box;
}
@font-face {
	font-family: 'FreeSerif-ChessPieces';
	src: url('FreeSerif-ChessPieces.woff2') format('woff2'), url('FreeSerif-ChessPieces.woff') format('woff');
	/* Include only chess pieces. */
	unicode-range: U+2654-265F;
}
.piece {
  font-family: 'FreeSerif-ChessPieces';
	color: var(--color-piece);
}
button {
	display: block;
	border: 2px solid var(--color-button-border);
	border-radius: 0.5em;
	padding: 0.3em 0.8em 0.3em 0.8em;
	margin: 0.5em auto;
	cursor: pointer;
}
button:not(:disabled):active {
	background-color: var(--color-body);
	color: var(--color-body-background);
}
button:disabled {
	cursor: default;
	color: var(--color-button-disabled);
	border-color: var(--color-button-disabled);
}

.hidden {
	display: none !important;
}

/* basic layout */
#header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: calc(100vmin * 2 / 28); 
	height: calc(100vmin * 2 / 28); 
	margin: 0;
	padding: 0;
	padding-left: 0.5em;
	font-size: calc((100vmin * 2 / 28) / 3.3);
	font-weight: bold;
	cursor: pointer;
	z-index: 1;
	line-height: 1.35em;
}
#board {
	position:relative;
	top: 0;
	left: 0;
	width: 100vmin;
	height: 100vmin;
	background-color: var(--color-board-background);
	text-align: center;
	vertical-align: middle;
	user-select: none;
	overflow: hidden;
}
#thrown-outs-container {
	position: relative;
	margin: 0;
	width: 100vmin;
	height: calc(100vmin * 2 / 28);
	line-height: calc(100vmin * 2 / 28);
	font-size: 0.5em;
	overflow: visible;
}
#cover {
	position: relative;
	top: 0.1em;
	margin: 0;
	width: 100vmin;
	height: 100vmin;
	overflow: hidden;
	box-sizing: border-box;
}
#game-status, #move-status {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	padding-right: calc(100% * 0.5 / 28);
}
#move-status {
	font-size: 0.5em;
	background-color: var(--color-body-background);
	display: flex;
	flex-flow: column;
	justify-content: space-between;
}
#export-overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--color-overlay-background);
	display: flex;
	justify-content: center;
	flex-flow: column;
	z-index: 1;
}
#notification-overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: var(--color-overlay-background);
	display: flex;
	justify-content: center;
	flex-flow: column;
	z-index: 2;
}
#footer {
	position: relative;
	font-size:0.3em;
	text-align: right;
	margin-top: 1em;
}

/*********/
/* board */
/*********/
#board.error {
	background: initial;
	color: var(--color-error);
	display: flex;
	justify-content: center;
	align-items: center; 
}
#board div.edging, #board div.grid {
	position: absolute;
	box-sizing: border-box;
}
#board div.edging {
	font-size: calc(1em / 3);
}
#board div.edging.horizontal, #board div.edging.vertical {
	color: var(--color-board-edging);
}
#board div.edging.top {
	top: 0;
	height: calc(100% * 2 / 28);
}
#board div.edging.bottom {
	bottom: 0;
	height: calc(100% * 2 / 28);
}
#board div.edging.left {
	left: 0;
	width: calc(100% * 2 / 28);
}
#board div.edging.right {
	right: 0;
	width: calc(100% * 2 / 28);
}
#board div.edging.horizontal {
	left: calc(100% * 2 / 28);
	width: calc(100% * 24 / 28);
	line-height: calc(100vmin * 2 / 28);
}
#board div.edging.horizontal div {
	float: left;
	width: 12.5%;
	height: 100%;
}
#board div.edging.vertical {
	top: calc(100% * 2 / 28);
	height: calc(100% * 24 / 28);
	line-height: calc(100vmin * 3 / 28);
}
#board div.edging.vertical div {
	width: 100%;
	height: 12.5%;
}
#edging-top div, #edging-right div, #edging-top-right {
	transform: rotate(180deg);
}
#board div.edging.corner {
	line-height: calc(100vmin * 2 / 28);
}
#edging-bottom-left.enabled, #edging-top-right.enabled {
	cursor: pointer;
}
#edging-top-right {
	color: var(--color-board-edging-tr);
}
#edging-bottom-left {
	color: var(--color-board-edging-bl);
}

#board div.grid {
	top: calc(100% * 2 / 28);
	left: calc(100% * 2 / 28);
	/* this is the width of 1 #board div.grid square */
	/* 0 edging +2/28 grid +24/28 edging +2/28 */
	width: calc(100% * 24 / 28);
	height: calc(100% * 24 / 28);
	font-size: calc(1em * 5 / 6);
}
#board div.grid div {
	position: relative;
	float: left;
	width: 12.5%;
	height: 12.5%;
	cursor: pointer;
}
#board div.grid div.light-square {
	background-color: var(--color-board-square-light);
}
#board div.grid div.dark-square {
	background-color: var(--color-board-square-dark);
}
#board div.grid span.piece, #board .grid span.marker {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	box-sizing: border-box;
	line-height: 1.35em;
}
#board div.grid span.marker {
}
#board div.grid span.marker.last-move-white {
	background-color: var(--color-marker-move-white);
}
#board div.grid span.marker.last-move-black {
	background-color: var(--color-marker-move-black);
}
#board div.grid span.marker.check {
	background-color: var(--color-marker-check);
}
#board div.grid span.marker.check-mate {
	background-color: var(--color-marker-check);
	transform: rotate(90deg);
}
#board div.grid span.marker.next-move-white {
	background-color: var(--color-marker-move-white);
}
#board div.grid span.marker.next-move-black {
	background-color: var(--color-marker-move-black);
}
#board div.grid span.marker.last-move.next-move-to {
	background-color: var(--color-marker-move-both);
}
#board div.grid span.marker.next-move-possible-to {
	background-color: transparent;
}
#board div.grid span.marker.last-move-white.next-move-possible-to {
	background-color: var(--color-marker-move-white);
}
#board div.grid span.marker.last-move-black.next-move-possible-to {
	background-color: var(--color-marker-move-black);
}
#board div.grid span.marker.next-move-possible-to::after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	margin: 40%;
	width: 20%;
	height: 20%;
	box-sizing: border-box;
	border-radius: 100%;
}
#board div.grid span.marker.next-move-possible-to.next-move-white::after {
	background-color: var(--color-marker-move-possible-white);
}
#board div.grid span.marker.next-move-possible-to.next-move-black::after {
	background-color: var(--color-marker-move-possible-black);
}
#board div.grid span.marker.next-move-possible-to.next-move-white:hover {
	background-color: var(--color-marker-move-white);
}
#board div.grid span.marker.next-move-possible-to.next-move-black:hover {
	background-color: var(--color-marker-move-black);
}
#board div.grid span.marker.last-move-black.next-move-possible-to.next-move-white:hover,
#board div.grid span.marker.last-move-white.next-move-possible-to.next-move-black:hover {
	background-color: var(--color-marker-move-both);
}
#board div.grid span.marker.next-move-possible-to:hover::after {
	display: none;
}

#promotion-overlay {
	display: none;
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-promotion-overlay-background);
}
#promotion-overlay.show {
	display: flex;
	justify-content: center;
	align-items: center; 
}
#promotion-overlay span.piece {
	display: block;
	margin: 0 calc((100vmin * 3 / 28) / 4);
	background-color: var(--color-piece-background);
	font-size: calc(1em * 5 / 6);
	width: calc(100vmin * 3 / 28);
	height: calc(100vmin * 3 / 28);
	cursor: pointer;
}
#promotion-overlay span.piece:hover {
	background-color: var(--color-promotion-overlay-piece-hover-background);
}

/* board animation */
#board, #promotion-overlay, #board .edging, #board .grid {
	transition-duration: 0.8s;
	transition-property: top, left, margin, padding, width, height, transform, position;
}
#header, #cover, #footer, #board .grid span.piece, #promotion-overlay span { 
	transition-duration: 0.8s;
	transition-property: all;
}
/* board rotation */
#board.rotated180deg {
	transform: rotate(180deg);
}
#board.rotated180deg .grid span.marker span.piece, #board.rotated180deg #promotion-overlay {
	transform: rotate(-180deg);
}
/*********************/
/* thrown out pieces */
/*********************/
#thrown-outs-container div.thrown-outs {
	position: absolute;
	box-sizing: border-box;
	top: 0;
	width: 50%;
	padding: 0 0.5em;
	height: 100%;
}
#thrown-outs-white {
	left: 0;
}
#thrown-outs-black {
	left: 50%;
}
#thrown-outs-container .piececount {
	box-sizing: border-box;
	width: 20%;
	height: 100%;
	float: left;
	text-align: center;
	padding-top: 0.1em;
}
#thrown-outs-black .piececount {
	float: right;
}
#thrown-outs-container .piececount.last-move .piece {
	background-color: var(--color-thrown-outs-piece-last);
}
div.thrown-outs .piece {
	display: inline-block;
	box-sizing: border-box;
	height: 1.2em;
	line-height: 1.35em;
	background-color: var(--color-piece-background);
}
div.thrown-outs .count {
	font-size: 0.7em;
}
/* thrown out pieces flipping at board rotation */
#board, #thrown-outs-container, #thrown-outs-container .thrown-outs, #thrown-outs-container .piececount { 
	transition-duration: 0.8s;
	transition-property: top, left, margin, width, height, transform;
}
#thrown-outs-container.rotated180deg div.thrown-outs {
	transform: rotate(180deg);
}
#thrown-outs-container.rotated180deg #thrown-outs-white {
	left: 50%;
}
#thrown-outs-container.rotated180deg #thrown-outs-black {
	left: 0;
}
#thrown-outs-container.rotated180deg .piececount {
	transform: rotate(-180deg);
}

/***************/
/* game status */
/***************/
#game-status-header {
	height: calc(100% * 4 / 28);
	font-size: calc(1em * 4 / 3);
	display: flex;
	justify-content: space-between;
	cursor: pointer;
	margin-left: 1px;
}
#game-status-header p {
	margin: 0;
}
#game-status-icon {
	font-size: calc(1em * 5 / 6);
	white-space:nowrap;
}
#game-status-icon span.piece {
	display: inline-block;
	background-color: var(--color-piece-background);
	width: calc(1em * 6 / 5);
	height: calc(1em * 6 / 5);
	text-align: center;
	line-height: 1.35em;
}
#game-status-text {
	padding-left: 0.2em;
	font-size: calc(0.5em * 5 / 6);
	display: flex;
	align-items: center;
	text-align: center;
}
#game-status-control {
  box-sizing: border-box;
	width: 100%;
	font-size: calc(1em / 2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	height: calc(100% * 3 / 28);
	padding-top: 0.2em;
}
#game-status-control button {
  position: relative;
	margin: 0;
	padding: 0.5em 2em 0.5em 2em;
	font-size: calc(1em * 2 / 3);
  display: flex;
}
/*
#game-status-control button.start::before {
  content: '⏮️';
}

#game-status-control button.previous::before {
  content: '⏪';
}

#game-status-control button.next::before {
  content: '⏩';
}

#game-status-control button.initial::before {
  content: '↩️';
}*/

/* Arrow to the left */
button.previous::before,
button.start::before,
button.start::after {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 0.5em 0.5em 0.5em 0;
  border-color: transparent currentColor transparent transparent;
  position: relative;
  left: -0.125em;
}
button.start::before {
  margin-right: -0.25em;
}
button.start::after {
  margin-left: 0.25em;
}

/* Arrow to the left */
button.next::before,
button.end::before,
button.end::after {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.5em;
  border-color: transparent transparent transparent currentColor;
  position: relative;
  right: -0.125em;
}
button.end::before {
  margin-right: -0.25em;
}
button.end::after {
  margin-left: 0.25em;
}

/* Half circle/ellipse */
button.initial::before {
  content: "";
  display: inline-block;
  border: 2px solid currentColor;
  border-color: currentColor currentColor currentColor transparent;
  border-radius: 0 50% 50% 0;
  width: 0.971em;
  height: 0.971em;
  box-sizing: border-box;
  position: relative;
}
/* Arrow on the bottom end of half circle/ellipse */
button.initial::after {
  content: "";
  position: absolute;
  bottom: 0.29em;
  border-style: solid;
  border-width: 0.30em 0.30em 0.30em 0;
  border-color: transparent currentColor transparent transparent;
}

#game-status-moves {
  box-sizing: border-box;
	width: 100%;
	height: calc(100% * 21 / 28);
	font-size: calc(1em / 2);
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 0.3em 0;
}
#game-status-moves p {
  box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
}
#game-status-moves p.split {
	color: var(--color-moves-future);
}
#game-status-moves p a,
#game-status-moves p span {
	display: inline-block;
  box-sizing: border-box;
  border: 1px solid var(--color-body-background);
}
#game-status-moves p.move-0 a.move {
	width: calc(100% - 3em);
	padding: 0 1em;
	text-decoration: none;
}
#game-status-moves p span.move-no {
	display: inline-block;
	width: 3em;
	padding: 0 1em;
	background-color: var(--color-moves-move-no);
	text-align: right;
}
#game-status-moves p span.move-no:after {
	content: ".";
}
#game-status-moves p a.move {
	width: calc(50% - (3em / 2));
	background-color: transparent;
	padding: 0 1em;
	cursor: default;
	text-decoration: none;
	position: relative;
}
#game-status-moves p.split span.move-no {
	width: calc(50% + (3em / 2));
	padding: 0 0.5em;
}
#game-status-moves p.split span.move-no:before {
	content: "... ";
	display:inline-block;
	float: left;
}
#game-status-moves p.split a.move {
	width: calc(50% - (3em / 2));
	padding: 0 0.5em;
	color: var(--color-moves-future);
}
#game-status-moves p a.clickable {
	cursor: pointer;
}
#game-status-moves p a.clickable:hover,
#game-status-moves p a.current {
	background-color: var(--color-moves-marked-background);
	cursor: pointer;
}
#game-status-moves p a.clickable.white:hover:after,
#game-status-moves p a.current.white:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-marker-move-white);
}
#game-status-moves p a.clickable.black:hover:after,
#game-status-moves p a.current.black:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-marker-move-black);
}
#game-status-moves p a.initial {
	background-image: linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444);
	background-size: 1em 1em;
	background-position: 0 0, 0.5em 0.5em;
}
#game-status-moves p a.future {
	color: var(--color-moves-future);
}
#game-status-moves p a.splited {
	font-style: italic;
}
#game-status-moves p:last-child {
	margin-bottom: 0.27em;
}
/*************/
/* move status */
/*************/
#move-status button, #move-status input {
	padding-top: 0.3em;
	font-size: 1em;
}
#move-status div:first-child {
	margin-top: calc(100% * 0.7 / 28);
}
#move-status div:last-child {
	margin-bottom: calc(100% * 0.7 / 28);
}
#move-status div.link {
	text-align: center;
	max-height: 8em;
}
#move-status div.link input {
	display: block;
	margin: 0 auto 0.2em;
}
#move-status div.link input {
	width: 100%;
	background-color: transparent;
	text-align: center;
}
#move-status div.actions {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#move-status div.actions a {
	display: block;
	margin: 0 1em;
}

#move-status div.tip {
	text-align: center;
	font-size: 0.5em;
	cursor: pointer;
}

/************************/
/* export overlay */
/************************/
#export-overlay.invisible {
	visibility: hidden;
}
#export-overlay, #export-overlay div.export {
	transition-duration: 0.2s;
	transition-property: height, min-height, padding, border, visibility;
	overflow: scroll;
}
#export-overlay div.export {
	box-sizing: border-box;
	text-align: center;
	background-color: var(--color-overlay-content-background);
	border: 2px solid var(--color-body);
	border-radius: 0.5em;
	padding: 0.8em;
	margin: 0.5em auto;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	font-size: 0.5em;
	width: 90%;

}
#export-overlay #export-tag-round,
#export-overlay #export-tag-result {
	clear: left;
}

#export-overlay div.export textarea {
	font-size: 0.5em;
}
#export-overlay div.export button,
#export-overlay div.export input {
	font-size: 1em;
}
#export-overlay div.export input {
	width: 10em;
}
#export-overlay div.export p.buttons {
	text-align: center;
}
#export-overlay div.export p.buttons button {
	display: inline-block;
	margin: 0.5em 1em;
}
#export-overlay.invisible div.export {
	min-height: 0;
	height: 0;
	padding: 0;
	border: 0;
}

#export-overlay div.tags {
	width: 100%;
}
#export-overlay div.tags p.tag {
	float: left;
	text-align: left;
	max-width: 100%;
}
#export-overlay div.tags p.tag input,
#export-overlay div.tags p.tag select {
	display: inline-block;
  margin-right: 0.5em;
  margin-left: 0.5em;
  font-size: 1em;
  max-width: calc(100% - 1em);
}
#export-overlay div.tags p.tag span {
	display: inline-block;
	width: 7em;
  text-align: left;
}
#export-overlay div.tags p.tag span:after {
	content: ": ";
}
#export-overlay div.output textarea {
	display: block;
	width: 100%;
	height: 16em;
}

/************************/
/* notification overlay */
/************************/
#notification-overlay, #notification-overlay div.notification {
	transition-duration: 0.2s;
	transition-property: height, min-height, padding, border, visibility;
	overflow: hidden;
}
#notification-overlay div.notification {
	box-sizing: border-box;
	text-align: center;
	background-color: var(--color-overlay-content-background);
	border: 2px solid var(--color-body);
	border-radius: 0.5em;
	padding: 0.8em 0.8em 0 0.8em;
	margin: 0.5em auto;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	font-size: 0.5em;
}
#notification-overlay div.notification button {
	font-size: 1em;
}
#notification-overlay p {
	margin: 0;
}
#notification-overlay p.message {
	margin-bottom: 0.6em;
}
#notification-overlay p.hint {
	font-size: 0.7em;
}
#notification-overlay.invisible {
	visibility: hidden;
}
#notification-overlay.invisible div.notification {
	min-height: 0;
	height: 0;
	padding: 0;
	border: 0;
}

/*********************/
/* responsive design */
/*********************/
@media (orientation: portrait) {
	#cover {
		margin-top: calc(100vmin / 28);
	}
}
/* 8.4cm = 318px (317.480314961)*/
@media (orientation: portrait) and (min-width: 8.4cm) {

	body, button, input, textarea {
		font-size: calc(8.4cm * 3 / 28);
	}

	#header {
		font-size: calc((100vw - 8.4cm) / 3);
		width: auto;
		height: calc((100vw - 8.4cm) / 2);
		margin-left: calc((100vw - 8.4cm) / 2);
		padding-left: 0;
		justify-content: flex-start;
		align-items: flex-end;
	}
	#board, #cover, #thrown-outs-container {
		margin-left: calc((100vw - 8.4cm) / 2);
		width: 8.4cm;
	}
	#board {
		margin-top: calc((100vw - 8.4cm) / 2);
		height: 8.4cm;
	}
	#cover {
		height: 8.4cm;
		margin-top: calc(8.4cm / 28);
	}
	#thrown-outs-container {
		height: calc((8.4cm * 2) / 28);
		line-height: calc(8.4cm * 2 / 28);
	}

	#board div.edging.horizontal {
		line-height: calc(8.4cm * 2 / 28);
	}
	#board div.edging.vertical {
		line-height: calc(8.4cm * 3 / 28);
	}
	#board div.edging.corner {
		line-height: calc(8.4cm * 2 / 28);
	}
	#promotion-overlay span.piece {
		margin: 0 calc((8.4cm * 3 / 28) / 4);
		width: calc(8.4cm * 3 / 28);
		height: calc(8.4cm * 3 / 28);
		font-size: calc((8.4cm * 3 / 28) * 5 / 6);
	}

}

/* 9.25cm = 350px (349.606299213) */
@media (orientation: portrait) and (min-width: 8.4cm) and (max-width: 9.25cm) {
	#header {
		box-sizing: border-box;
		width: calc(100vmin * 2 / 28); 
		height: calc(100vmin * 2 / 28); 
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: calc((100vmin * 2 / 28) / 3.3);
		margin-top: calc((100vw - 8.4cm) / 2);
		padding: 0;
		padding-left: 0.5em;
	}
}

/* 10.2cm = 386px (385.511811024) */
@media (orientation: portrait) and (min-width: 10.2cm) {
	/* display is wide enugh to rearange trown outs to side */
	#thrown-outs-container {
		height: calc((8.4cm * 3) / 28);
		transform: rotate(-90deg);
		transform-origin: center -4.2cm;
	}
	#thrown-outs-container .piececount {
		transform: rotate(90deg);
	}
	#thrown-outs-white .piececount {
		padding-top: 0.7em
	}
	#thrown-outs-container.rotated180deg .piececount {
		transform: rotate(-90deg);
		padding-top: 0.1em;
	}
	#thrown-outs-container.rotated180deg #thrown-outs-black .piececount {
		padding-top: 0.7em
	}
	#cover {
		top: calc((-8.4cm * 3) / 28);
	}
}
/* 12cm = 454px (453.543307087) */
@media (orientation: portrait) and (min-width: 12cm) {

	body, button, input, textarea {
		font-size: calc(70vmin * 3 / 28);
	}

	#header {
		height: calc((100vw - 70vmin) / 2);
		margin-left: calc((100vw - 70vmin) / 2);
		font-size: calc((100vw - 70vmin) / 3);
	}
	#board, #cover {
		margin-left: calc((100vw - 70vmin) / 2);
		width: 70vmin;
	}
	#board {
		margin-top: calc((100vw - 70vmin) / 2);
		height: 70vmin;
	}
	#cover {
		height: 70vmin;
		top: calc((-70vmin * 3) / 28);
	}
	#thrown-outs-container {
		margin-left: calc((100vw - 70vmin) / 2);
		width: 70vmin;
		height: calc(70vmin * 3 / 28);
		transform-origin: center -35vmin;
	}

	#board div.edging.horizontal {
		line-height: calc(70vmin * 2 / 28);
	}
	#board div.edging.vertical {
		line-height: calc(70vmin * 3 / 28);
	}
	#board div.edging.corner {
		line-height: calc(70vmin * 2 / 28);
	}
	#promotion-overlay span.piece {
		margin: 0 calc((70vmin * 3 / 28) / 4);
		width: calc(70vmin * 3 / 28);
		height: calc(70vmin * 3 / 28);
		font-size: calc((70vmin * 3 / 28) * 5 / 6);
	}

}

@media (orientation: landscape) {
	#board, #thrown-outs-container, #cover {
		margin-left: calc((100vw - 100vh) / 2);
	}
	#header {
		display: initial;
		margin: 0;
		padding: 0;
		font-size: calc((100vw - 100vmin) / 3);
		width: calc((100vw - 100vmin) / 2);
		top: calc((100vh - 100vmin) / 2);
		writing-mode: vertical-rl;
		text-orientation: upright;
		white-space: nowrap;
	}
}
@media (orientation: landscape) and (max-aspect-ratio: 32/28) {
	#header {
		display: flex;
		width: calc(100vmin * 2 / 28); 
		height: calc(100vmin * 2 / 28); 
		margin: 0;
		margin-left: calc((100vw - 100vmin) / 2);
		padding: 0;
		padding-left: 0.5em;
		font-size: calc((100vmin * 2 / 28) / 3.3);
		writing-mode: initial;
		text-orientation: initial;
		white-space: initial;
	}
}
@media (orientation: landscape) and (min-aspect-ratio: 34/28) {
	#header {
		font-size: calc(70vmin * 3 / 28);
	}
	#thrown-outs-container {
		height: calc(100vmin * 3 / 28);
		transform: rotate(-90deg);
		transform-origin: center -50vmin;
	}
	#thrown-outs-container .piececount {
		transform: rotate(90deg);
	}
	#thrown-outs-white .piececount {
		padding-top: 0.7em
	}
	#thrown-outs-container.rotated180deg .piececount {
		transform: rotate(-90deg);
		padding-top: 0.1em;
	}
	#thrown-outs-container.rotated180deg #thrown-outs-black .piececount {
		padding-top: 0.7em
	}
}
@media (orientation: landscape) and (min-aspect-ratio: 51/28) {
	#header {
		display: flex;
		width: calc(100vmin * 2 / 28); 
		height: calc(100vmin * 2 / 28); 
		margin: 0;
		padding: 0;
		padding-left: 0.5em;
		font-size: calc((100vmin * 2 / 28) / 3.3);
		writing-mode: initial;
		text-orientation: initial;
		white-space: initial;
	}
	#board, #thrown-outs-container {
		margin-left: 0;
	}
	#cover {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(100vw - ((100vmin / 28) * 31));
		height: 100vmin;
		margin: 0;
	}
}
@media (orientation: landscape) and (min-aspect-ratio: 60/28) {
	#header {
		/*
		display: initial;
		width: calc((100vw - ((100vmin / 28) * 60)) / 2);
		font-size: calc((100vw - ((100vmin / 28) * 60)) / 2);
	 */
		margin-left: calc((100vw - ((100vmin / 28) * 60)) / 2);
	}
	#board, #thrown-outs-container {
		margin-left: calc((100vw - ((100vmin / 28) * 60)) / 2);
	}
	#cover {
		right: calc((100vw - ((100vmin / 28) * 60)) / 2);
		width: 100vmin;
		height: 100vmin;
	}
}
@media (orientation: landscape) and (min-aspect-ratio: 64/28) {
	#header {
		width: calc((100vw - ((100vmin / 28) * 60)) / 2);
		height: initial;
		font-size: calc((100vmin * 2) / 28);
		margin: 0;
		padding: 0;
		top: calc((100vh - 100vmin) / 2);
		writing-mode: vertical-rl;
		text-orientation: upright;
		display: initial;
		white-space: nowrap;
	}
}

/* 8.4cm = 318px (317.480314961)*/
@media (orientation: landscape) and (min-height: 8.4cm) {
	body, button, input, textarea {
		font-size: calc(8.4cm * 3 / 28);
	}

	#header {
		margin-left: calc((100vw - 8.4cm) / 2);
		margin-top: calc((100vh - 8.4cm) / 2);
		/*
		display: initial;
		margin: 0;
		padding: 0;
		font-size: calc((100vw - 8.4cm) / 3);
		width: calc((100vw - 8.4cm) / 2);
		top: calc((100vh - 8.4cm) / 2);
		writing-mode: vertical-rl;
		text-orientation: upright;
		white-space: nowrap;
		*/
	}
	#board, #cover, #thrown-outs-container {
		margin-left: calc((100vw - 8.4cm) / 2);
		width: 8.4cm;
	}
	#board {
		margin-top: calc((100vh - 8.4cm) / 2);
		height: 8.4cm;
	}
	#cover {
		height: 8.4cm;
	}
	#thrown-outs-container {
		height: calc(8.4cm * 2 / 28);
		line-height: calc(8.4cm * 2 / 28);
	}
	

	#board div.edging.horizontal {
		line-height: calc(8.4cm * 2 / 28);
	}
	#board div.edging.vertical {
		line-height: calc(8.4cm * 3 / 28);
	}
	#board div.edging.corner {
		line-height: calc(8.4cm * 2 / 28);
	}
	#promotion-overlay span.piece {
		margin: 0 calc((8.4cm * 3 / 28) / 4);
		width: calc(8.4cm * 3 / 28);
		height: calc(8.4cm * 3 / 28);
		font-size: calc((8.4cm * 3 / 28) * 5 / 6);
	}
}
/* 10.2cm = 386px (385.511811024) */
@media (orientation: landscape) and (min-width: 10.2cm) and (min-height: 8.4cm) {
	#header {
		display: initial;
		top: calc((100vh - 8.4cm) / 2);
		margin: 0;
		padding: 0;
		width: calc((100vw - 8.4cm) / 2);
		height: initial;
		font-size: calc((8.4cm * 2) / 28);
		writing-mode: vertical-rl;
		text-orientation: upright;
		white-space: nowrap;
	}
	#board, #cover, #thrown-outs-container {
		margin-left: calc((100vw - 8.4cm) / 2);
	}
	#thrown-outs-container {
		height: calc(8.4cm * 3 / 28);
		transform: rotate(-90deg);
		transform-origin: center -4.2cm;
	}
	#thrown-outs-container .piececount {
		transform: rotate(90deg);
	}
	#thrown-outs-white .piececount {
		padding-top: 0.7em
	}
	#thrown-outs-container.rotated180deg .piececount {
		transform: rotate(-90deg);
		padding-top: 0.1em;
	}
	#thrown-outs-container.rotated180deg #thrown-outs-black .piececount {
		padding-top: 0.7em
	}
}
/* 12.9cm = 488px (487.559055118) */
@media (orientation: landscape) and (min-width: 15.3cm) and (min-height: 8.4cm) {
	#header {
		display: flex;
		top: calc((100vh - 8.4cm) / 2);
		width: calc(8.4cm * 2 / 28); 
		height: calc(8.4cm * 2 / 28); 
		margin: 0;
		padding: 0;
		padding-left: 0.5em;
		font-size: calc((8.4cm * 2 / 28) / 3.3);
		writing-mode: initial;
		text-orientation: initial;
		white-space: initial;
    /*
		font-size: calc((100vh - 8.4cm) / 3);
    padding-top: 0.5em;
		top: 0;
		left: 0;
		writing-mode: initial;
		text-orientation: initial;
		width: 8.4cm;
		*/
	}
	#board, #thrown-outs-container {
		margin-left: 0;
	}
	#cover {
		position: absolute;
		top: calc((100vh - 8.4cm) / 2);
		left: 9.3cm;
		width: calc(100vw - 9.3cm);
		height: 8.4cm;
		margin: 0;
	}
}
/* 17.7cm = 669px (668.976377953) */
@media (orientation: landscape) and (min-width: 18cm) and (min-height: 8.4cm) {
	#header, #board, #thrown-outs-container {
		margin-left: calc((100vw - ((8.4cm / 28) * 60)) / 2);
	}
	#cover {
		left: calc(((100vw - ((8.4cm / 28) * 60)) / 2) + 9.6cm);
		width: 8.4cm;
		height: 8.4cm;
	}
}
/* 18.6cm = 703px (702.992125984) */
@media (orientation: landscape) and (min-width: 18.6cm) and (min-height: 8.4cm) {
	#header {
		display: initial;
		margin: 0;
		padding: 0;
		font-size: calc((100vw - ((8.4cm / 28) * 60)) / 3);
		width: calc((100vw - ((8.4cm / 28) * 60)) / 2);
		top: calc((100vh - 8.4cm) / 2);
		writing-mode: vertical-rl;
		text-orientation: upright;
		white-space: nowrap;
	}
}
/* 19.5cm = 738px (737.007874016) */
@media (orientation: landscape) and (min-width: 19.5cm) and (min-height: 8.4cm) {
	#header {
		font-size: calc((8.4cm * 2) / 28);
	}
}

/* 12cm = 454px (453.543307087) */
@media (orientation: landscape) and (min-height: 12cm) {
	body, button, input, textarea {
		font-size: calc(70vmin * 3 / 28);
	}

	#board, #cover, #thrown-outs-container {
		margin-left: calc((100vw - 70vmin) / 2);
		width: 70vmin;
	}
	#header {
		display: initial;
		font-size: calc((100vh - 70vmin) / 3);
		padding-top: 0.4em;
		top: 0;
		left: calc((100vw - 70vmin) / 2);
		writing-mode: initial;
		text-orientation: initial;
		width: auto;
		padding-left: 0;
	}
	#board {
		margin-top: calc((100vh - 70vmin) / 2);
		height: 70vmin;
	}
	#thrown-outs-container {
		height: calc(70vmin * 3 / 28);
		transform-origin: center -35vmin;
	}
	#cover {
		position: relative;
		top: calc((-70vmin * 2) / 28);
		left: 0;
		height: 70vmin;
	}
	

	#board div.edging.horizontal {
		line-height: calc(70vmin * 2 / 28);
	}
	#board div.edging.vertical {
		line-height: calc(70vmin * 3 / 28);
	}
	#board div.edging.corner {
		line-height: calc(70vmin * 2 / 28);
	}
	#promotion-overlay span.piece {
		margin: 0 calc((70vmin * 3 / 28) / 4);
		width: calc(70vmin * 3 / 28);
		height: calc(70vmin * 3 / 28);
		font-size: calc((70vmin * 3 / 28) * 5 / 6);
	}
}
@media (orientation: landscape) and (min-aspect-ratio: 48/40) and (min-height: 12cm) {
	#header {
		left: 0;
	}
	#board, #thrown-outs-container {
		margin-left: 0;
	}
	#cover {
		position: absolute;
		top: calc((100vh - 70vmin) / 2);
		left: calc((70vmin * 31) / 28);
		width: calc(100vw - ((70vmin * 31) / 28));
		height: 70vmin;
		margin: 0;
	}
}
@media (orientation: landscape) and (min-aspect-ratio: 60/40) and (min-height: 12cm) {
	#header {
		left: calc((100vw - ((70vmin * 60) / 28)) / 2);
	}
	#board, #thrown-outs-container {
		margin-left: calc((100vw - ((70vmin * 60) / 28)) / 2);
	}
	#cover {
		left: calc(((100vw - ((70vmin * 60) / 28)) / 2) + ((70vmin * 32) / 28));
		width: 70vmin;
		height: 70vmin;
	}
}

/* zen mode */
body.zen-mode {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
body.zen-mode #header {
	opacity: 0.9;
	z-index: 2;
	top: calc((100vh - 100vmin) / 2);
	left: calc((100vw - 100vmin) / 2);
	margin: 0;
	padding: 0;
	font-size: calc((100vmin * 2 / 28) / 10);
	height: auto;
	color: var(--color-body-background);
}
body.zen-mode #thrown-outs-container,
body.zen-mode #cover,
body.zen-mode #footer { 
	opacity: 0;
	height: 0;
	z-index: 0;
}
body.zen-mode #board {
	font-size: calc(100vmin * 3 / 28);
	top: calc((100vh - 100vmin) / 2);
	left: calc((100vw - 100vmin) / 2);
	width: 100vmin;
	height: 100vmin;
	margin: 0;
	z-index: 1;
}
body.zen-mode #board div.edging.corner {
	width: 0;
	height: 0;
}
body.zen-mode #board div.edging.horizontal {
	left: 0;
	width: 100%;
	height: 1em;
	z-index: 3;
	line-height: normal;
	font-size: calc(1em / 6);
}
body.zen-mode #board div.edging.vertical{
	top: 0;
	width: auto;
	height: 100%;
	z-index: 3;
	line-height: calc(100vmin * 3.5 / 28);
	font-size: calc(1em / 6);
}
body.zen-mode #board div.grid {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 1em;
	z-index: 2;
}
body.zen-mode	#promotion-overlay {
	width: 100vmin;
	height: 100vmin;
	z-index: 4;
}
body.zen-mode #promotion-overlay span.piece {
	margin: 0 calc((100vmin * 3 / 28) / 4);
	width: calc(100vmin * 3 / 28);
	height: calc(100vmin * 3 / 28);
	font-size: calc((100vmin * 3 / 28) * 5 / 6);
}
body.zen-mode #notification-overlay {
	z-index: 5;
}