* {
	margin: 0;
}

body {
	--board-size: calc(55 * var(--vh, 1vh));
	--light-square: #E3C7A3;
	--dark-square: #BC926D;
	height: 100%;
	width: 100%;
	position: fixed;
	display: block;
	font-family: clear sans, helvetica neue, Arial, sans-serif;
}
@media (max-aspect-ratio: 2800/2448) {
	body {
		--board-size: calc(46 * var(--vh, 1vh));
	}
	game-container {
		max-width: calc(1.53 * var(--board-size)) !important;
		max-height: 100%;
		flex-wrap: wrap;
		align-items: initial !important;
	}
	sidebar-container {
		width: calc(1.06 * var(--board-size)) !important;
		justify-content: center;
		margin-left: 0 !important;
		margin-top: auto;
		height: initial !important;
	}
	sidebar-container game-card {
		margin: 0 calc(.05 * var(--board-size)) !important;
	}
}
@media (max-aspect-ratio: 12/16) {
	game-container {
		width: calc(1.06 * var(--board-size)) !important;
	}
	move-list-container {
		position: absolute;
		width: 100vw;
		/* top: calc(100% - 20px); */
		height: max-content !important;
		left: 0;
		bottom: calc(-.01 * var(--board-size) - 1px);
	}
	move-list {
		margin: 0 !important;
		width: 100% !important;
		border-radius: 0 !important;
		border-left-width: 0 !important;
		border-right-width: 0 !important;
		flex-wrap: wrap;
	}
	sidebar-step-back,
	sidebar-step-forward,
	move-list > label {
		display: flex !important;
		flex: 1 0 30%;
	}
	move-list-scroll {
		transition: max-height .25s ease-in-out;
		max-height: 40vh;
	}
	move-list > input[type=checkbox]:not(:checked) ~ move-list-scroll {
		max-height: 0;
	}
	move-list-row {
		font-size: calc(.051 * var(--board-size)) !important;
		line-height: calc(.09 * var(--board-size)) !important;
	}
}
@media (max-aspect-ratio: 147/272) {
	body {
		--board-size: calc(85vw);
	}
}
game-container {
	height: 100%;
	max-width: calc(2 * var(--board-size));
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	user-select: none;
	flex-direction: row-reverse;
}
board-container {
	max-height: calc(1.7 * var(--board-size));
	flex: 0 0 calc(1.06 * var(--board-size));
	margin: calc(.1 * var(--board-size)) 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
game-board {
	display: flex;
	position: relative;
	flex: 0 0 var(--board-size);
	height: var(--board-size);
	margin: calc(.1 * var(--board-size)) 0;
	flex-direction: column;
	border: solid calc(.03 * var(--board-size)) transparent;
	border-radius: calc(.03 * var(--board-size));
	background-color: grey;
	transition: background-color .25s ease-in-out;
}
game-container[ongoing]:not([winner="red"]) game-piece[color="blue"],
game-board[history] game-piece[color="blue"] {
	background-color: white;
}
game-container[ongoing]:not([winner="blue"]) game-piece[color="red"],
game-board[history] game-piece[color="red"] {
	background-color: black;
}
game-container[ongoing]:not([winner="red"]) game-piece[color="blue"]::before,
game-board[history] game-piece[color="blue"]::before,
game-container[winner="blue"] game-board:not([history]),
game-board[turn="blue"] {
	background-color: deepskyblue;
}
game-container[ongoing]:not([winner="blue"]) game-piece[color="red"]::before,
game-board[history] game-piece[color="red"]::before,
game-container[winner="red"] game-board:not([history]),
game-board[turn="red"] {
	background-color: red;
}
game-board-row {
	display: flex;
	height: 20%;
	width: 100%;
	position: relative;
}
game-board-cell {
	display: flex;
	position: relative;
	height: 100%;
	width: 20%;
	background-color: var(--dark-square);
}
game-board-row:nth-child(even) > game-board-cell:nth-child(odd),
game-board-row:nth-child(odd) > game-board-cell:nth-child(even) {
	background-color: var(--light-square);
}
game-board-row:nth-child(4n+1) game-board-cell:nth-child(3)::after {
	content: "";
	display: flex;
	width: 20%;
	height: 20%;
	transform: rotate(45deg);
	background-color: var(--light-square);
	margin: auto;
}
game-board:not([flipped]) game-board-row:last-of-type {
	counter-reset: letters 6;
}
game-board:not([flipped]) game-board-row:last-of-type game-board-cell {
	counter-increment: letters -1;
}
game-board:not([flipped]) game-board {
	counter-reset: rows;
}
game-board:not([flipped]) game-board-row {
	counter-increment: rows;
}
game-board[flipped] game-board-row:last-of-type {
	counter-reset: letters;
}
game-board[flipped] game-board-row:last-of-type game-board-cell {
	counter-increment: letters;
}
game-board[flipped] {
	counter-reset: rows 6;
}
game-board[flipped] game-board-row {
	counter-increment: rows -1;
}
game-board-row:last-of-type game-board-cell::before {
	content: counter(letters, lower-alpha);
}
game-board-row::after {
	content: counter(rows);
}
game-board game-board-row:last-of-type game-board-cell::before {
	bottom: 0;
}
/* game-board[flipped] game-board-row:last-of-type game-board-cell::before {
	top: -400%;
	right: 0;
} */
game-board game-board-row::after {
	right: 0;
}
/* game-board[flipped] game-board-row::after {
	bottom: 0;
} */
game-board-row:last-of-type game-board-cell::before,
game-board-row::after {
	position: absolute;
	font-size: calc(.025 * var(--board-size));
	margin: calc(.008 * var(--board-size)) calc(.012 * var(--board-size));
	font-weight: 600;
	color: var(--light-square);
}
game-board-row:last-of-type game-board-cell:nth-child(even)::before,
game-board-row:nth-child(even)::after {
	color: var(--dark-square);
}
board-pieces {
	z-index: 0;
}
board-ghost-pieces {
	z-index: 1;
}
game-ghost-piece,
game-piece {
	left: calc(4% + 20% * var(--x));
	top: calc(4% + 20% * var(--y));
	width: 12%;
	height: 12%;
	display: flex;
	border-radius: 50%;
	position: absolute;
	z-index: 1;
	opacity: 1;
	background-color: lightgrey;
	pointer-events: none;
	transition: opacity ease-in-out .25s, left ease-out .25s, top ease-out .25s, background-color ease-in-out .25s;
}
game-board:not([history]) game-ghost-piece,
game-board:not([history]) game-piece {
	cursor: pointer;
}
game-piece[dead] {
	pointer-events: none;
	opacity: 0 !important;
	z-index: 0;
}
game-board[flipped] game-ghost-piece,
game-board[flipped] game-piece {
	left: calc(4% + 20% * (4 - var(--x)));
	top: calc(4% + 20% * (4 - var(--y)));
}
game-container[playable="blue"] game-board[turn="blue"] game-piece[color="blue"],
game-container[playable="red"] game-board[turn="red"] game-piece[color="red"],
game-ghost-piece {
	pointer-events: all;
}
game-ghost-piece {
	background-color: #C2C93C99;
}
game-ghost-piece::before {
	content: "";
	border: solid #C2C93C calc(.012 * var(--board-size));
	position: absolute;
	width: 80%;
	height: 80%;
	border-radius: 50%;
	transition: background-color .25s ease-in-out;
}
game-piece::before {
	content: "";
	display: flex;
	position: absolute;
	width: 80%;
	height: 80%;
	border-radius: 50%;
	margin: 10%;
	background-color: grey;
	transition: background-color .25s ease-in-out;
}
game-ghost-piece[master]::after,
game-piece[master]::after {
	content: "";
	display: flex;
	position: absolute;
	width: calc(100% / 3);
	height: calc(100% / 3);
	background-color: inherit;
	margin: calc(100% / 3);
	transform: rotate(45deg);
}
game-ghost-piece[master]::after {
	background-color: #C2C93C;
}
game-container board-ghosts {
	opacity: 1;
	transition: opacity .25s ease-in-out;
}
game-container[ongoing] board-ghosts {
	opacity: 0;
}
game-container game-board game-waiting {
	display: none;
}
game-container[waiting-opponent] game-board game-waiting {
	display: flex;
	cursor: pointer;
	position: absolute;
	background: #555c;
	width: calc(.4 * var(--board-size));
	border-radius: calc(.04 * var(--board-size));
	left: calc(50% - .235 * var(--board-size));
	top: calc(50% - .09 * var(--board-size));
	text-align: center;
	font-size: calc(.04 * var(--board-size));
	line-height: calc(.055 * var(--board-size));
	padding: calc(.035 * var(--board-size));
	color: white;
	font-weight: 400;
	z-index: 1;
}
game-container[waiting-opponent] game-board game-waiting::before {
	content: "waiting for second player... (click to join)";
}
game-container[waiting-opponent][playable] game-board game-waiting::before {
	content: "waiting for opponent... (Click to invite)";
}
game-choice-overlay {
	display: block;
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: #0007;
	opacity: 0;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9;
	transform: opacity .25s ease-in-out;
}
game-choice-overlay[visible] {
	pointer-events: all;
	opacity: 1;
}
board-blue-name,
board-red-name {
    position: absolute;
    width: 100%;
    text-align: center;
	font-size: calc(.045 * var(--board-size));
	font-weight: 500;
    transition: top .25s ease-in-out;
}
board-blue-name:empty,
board-red-name:empty {
	top: unset !important;
}
game-board:not([flipped]) board-red-name,
game-board[flipped] board-blue-name {
	top: 105%;
}
game-board:not([flipped]) board-blue-name,
game-board[flipped] board-red-name {
	top: calc(-5% - .045 * var(--board-size));
}
sidebar-container {
	display: flex;
	margin-left: calc(.1 * var(--board-size));
	width: calc(.37 * var(--board-size));
	flex-wrap: wrap;
	height: 100%;
	align-items: center;
	justify-content: center;
}
sidebar-create-button,
sidebar-playing-as,
game-card,
move-list {
	display: flex;
	border: solid calc(.01 * var(--board-size)) grey;
	border-radius: calc(.025 * var(--board-size));
	flex-direction: row;
	width: calc(.35  * var(--board-size));
}
sidebar-create-button,
sidebar-playing-as,
game-card {
	height: calc(.17 * var(--board-size));
	transition: border-color .25s ease-in-out;
}
game-card[owned][highlighted] {
	z-index: 10;
	cursor: pointer;
}
sidebar-container game-card {
	margin: 0;
}
sidebar-create-button,
sidebar-playing-as,
move-list {
	background-color: #FBF7D5;
}
sidebar-create-button,
sidebar-playing-as {
	flex: 1 0 calc(.1 * var(--board-size));
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
	position: relative;
}
sidebar-create-button::before,
sidebar-playing-as::before,
sidebar-playing-as::after {
	text-align: center;
	font-size: calc(.035 * var(--board-size));
	line-height: calc(.045 * var(--board-size));
}
sidebar-clickToFlip::before {
	content: "Click to flip";
	font-size: calc(.02 * var(--board-size));
	position: absolute;
	right: calc(.006 * var(--board-size));
	bottom: calc(.006 * var(--board-size));
}
sidebar-create-button::before,
sidebar-playing-as::after {
	font-weight: 700;
}
sidebar-create-button::before {
	content: "new game";
}
game-container[winner] sidebar-playing-as {
	flex-direction: row-reverse;
	align-items: center;
}
game-container[winner] sidebar-playing-as::before {
	margin-left: calc(.008 * var(--board-size));
	content: "won";
	font-weight: 700;
}
sidebar-playing-as::before {
	content: "spectating";
}
game-container[playable] sidebar-playing-as::before {
	content: "playing as: ";
}
game-container[winner="red"] sidebar-playing-as::after,
game-container[playable="red"] sidebar-playing-as::after {
	content: "red";
	color: red;
}
game-container[winner="blue"] sidebar-playing-as::after,
game-container[playable="blue"] sidebar-playing-as::after {
	content: "blue";
	color: deepskyblue;
}
game-card {
	flex: 0 0 calc(.35  * var(--board-size));
	margin: 0 calc(.05 * var(--board-size));
	background-color: white;
}
game-card[highlighted] {
	border-color: #C2C93C;
}
game-card[flipped] {
	flex-direction: row-reverse;
}
game-card-grid {
	display: flex;
	width: calc(.8 * .17 * var(--board-size));
	height: calc(.8 * .17 * var(--board-size));
	margin: calc(.1 * .17 * var(--board-size));
	border: solid 1px black;
	border-right: 0;
	border-bottom: 0;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	background-color: white;
}
game-card-grid-cell {
	height: 20%;
	flex: 1 0 19%;
	border: solid 1px black;
	border-left: 0;
	border-top: 0;
	box-sizing: border-box;
	transition: background-color .25s ease-in-out;
}
game-card-grid-cell[possible="1"] {
	background-color: #777;
}
/* game-card[highlighted]:not([highlighted-individual]) game-card-grid-cell[possible="1"], */
game-card-grid-cell[possible="1"][highlighted] {
	background-color: #C2C93C;
}
game-card-grid-cell:nth-child(13) {
	background-color: #333;
}
game-card-name {
	flex: 1 0 0;
	text-align: center;
	line-height: calc(.17 * var(--board-size));
	font-weight: 700;
	font-size: calc(.042 * var(--board-size));
}
#copyTextBox {
	position: fixed;
	height: 0;
	width: 0;
	top: -500vh;
}
toast-notification {
	--toast-size: calc(.5 * var(--board-size));
	display: block;
	position: absolute;
	left: 50%;
	top: 70%;
	transform: translate(-50%, -50%);
	margin: auto;
	max-width: var(--toast-size);
	background: #555c;
	z-index: 9;
	color: white;
	border: solid calc(var(--toast-size) * .05) transparent;
	padding: calc(var(--toast-size) * .02);
	border-radius: calc(var(--toast-size) * .11);
	font-weight: normal;
	font-size: calc(var(--toast-size) * .059);
	opacity: 0;
	transition: opacity .5s ease-in-out;
	user-select: none;
	pointer-events: none;
}
toast-notification[visible] {
	opacity: 1;
}
move-list-container {
	margin-right: calc(.1 * var(--board-size));
	height: calc(1.7 * var(--board-size));
	display: flex;
	flex-direction: column;
}
move-list {
    margin: calc(.45 * var(--board-size)) 0;
    flex: 1;
    overflow: hidden;
	display: flex;
}
move-list-scroll {
    display: flex;
    flex-direction: column-reverse;
    overflow-y: scroll;
	overflow-x: hidden;
	height: 100%;
    flex: 0 0 calc(100% + var(--scroll-bar-size));
}
move-list-scroll::before {
	content: "";
	margin-top: auto;
}
sidebar-step-back,
sidebar-step-forward,
move-list > label,
move-list-row {
	font-size: calc(.0255 * var(--board-size));
	border-bottom: solid 1px grey;
}
move-list > label {
	border-left: solid 1px grey;
	border-right: solid 1px grey;
	flex: 3 0 0 !important;
}
move-list-row {
	line-height: calc(.045 * var(--board-size));
	display: flex;
}
move-list-row:first-child {
	margin-bottom: -1px;
}
move-list-row::before,
move-list-move {
	display: flex;
	box-sizing: border-box;
	padding: 0 calc(.0025 * var(--board-size));
	border-right: solid 1px grey;
}
move-list-row::before {
	content: attr(turn);
	text-align: right;
    justify-content: center;
	width: 20%;
}
move-list-move {
	width: 40%;
	display: flex;
	color: #333;
	cursor: pointer;
}
move-list-move::before,
move-list-move::after {
	flex: 1 0 0;
	display: flex;
	color: black;
}
move-list-move::before {
	content: attr(card);
	justify-content: flex-end;
}
move-list-move::after {
	content: attr(move);
}
move-list-move:nth-child(2) {
	border-right: none;
}
move-list-move[selected]::before,
move-list-move[selected]::after {
	font-weight: bold;
}
input[type=checkbox] {
	display: none;
}
sidebar-step-back,
sidebar-step-forward,
move-list > label {
	height: calc(.11 * var(--board-size));
	cursor: pointer;
	flex: 2 0 0;
	display: none;
	margin-top: -1px;
}
move-list > sidebar-step-forward::before,
move-list > sidebar-step-back::before {
	content: "";
	border-top: calc(.02 * var(--board-size)) solid transparent;
	border-left: calc(.02 * var(--board-size)) solid grey;
	border-bottom: calc(.02 * var(--board-size)) solid transparent;
	display: flex;
	margin: auto;
}
move-list > sidebar-step-back::before {
	transform: rotate(180deg);
}
move-list > label::before {
	content: "";
	border-right: calc(.035 * var(--board-size)) solid transparent;
	border-left: calc(.035 * var(--board-size)) solid transparent;
	border-bottom: calc(.035 * var(--board-size)) solid grey;
	display: flex;
	margin: auto;
	transform: scaleY(1);
	transition: transform .25s ease-in-out;
}
move-list > input[type=checkbox]:checked ~ label::before {
	transform: scaleY(-1);
}