#v, #gk {
	font-weight: 400;
	padding: 0.5em;
	position: fixed;

	bottom: 0;
}

#v {
	text-align: left;
	left: 0;
}

#gk {
	text-align: right;
	right: 0;
}

body {
	background: #FFFFFF;
	border-color: currentColor;
	color: #404040;
	font-family: 'Ubuntu Mono', 'Roboto Mono', 'Droid Sans Mono', 'Consolas', monospace;
	margin: 0;
}

body.dark {
	background: #000000;
	color: #C0C0C0;
}

::selection {
	background: #FF400080;
	color: inherit;
}

:focus {
	outline: 0;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

#wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#board * {
	box-sizing: content-box;
	line-height: 0;
}

.g {
	border-color: transparent;
	border-style: solid;
}

#buttons {
	margin-top: auto;
}

#buttons > div {
	border-style: solid;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
}

#buttons > div:hover {
	color: #0040FF;
}

body.muted #buttons > div:hover {
	color: #405080;
}

body.muted.dark #buttons > div:hover {
	color: #80A0FF;
}

@media (pointer: coarse) {

	#buttons > div:hover,
	body.muted #buttons > div:hover,
	body.muted.dark #buttons > div:hover {
		color: inherit;
	}

}

#board,
.g {
	align-content: stretch;
	display: flex;
	flex-direction: column;
}

.g-row,
.m-row {
	display: flex;
	flex: auto;
	flex-direction: row;
	justify-content: space-evenly;
}

.g-box,
.m-box {
	flex: auto;
}

.g-box {
	position: relative;
}

.g {
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.m {
	height: 100%;
	width:  100%;
}

.g-box,
.m-box {
	border-style: solid;
	display: inline-block;

	border-top: 0;
	border-left: 0;
}

.g-box:last-child,
.m-box:last-child {
	border-right: 0;
}

:last-child > .g-box,
:last-child > .m-box {
	border-bottom: 0;
}

.x, .x-ish, .o, .o-ish {
	-webkit-mask-clip: padding-box;
	        mask-clip: padding-box;
	-webkit-mask-size: cover;
	        mask-size: cover;
}

.x,
.x-ish .m:hover:not(.o) {
	background: #FF4000;
	-webkit-mask-image: url('../assets/x.svg');
	        mask-image: url('../assets/x.svg');
}

.o,
.o-ish .m:hover:not(.x) {
	background: #0040FF;
	-webkit-mask-image: url('../assets/o.svg');
	        mask-image: url('../assets/o.svg');
}

body.muted .x,
body.muted .x-ish .m:hover:not(.o) {
	background: #805040;
}

body.muted .o,
body.muted .o-ish .m:hover:not(.x) {
	background: #405080;
}

body.muted.dark .x,
body.muted.dark .x-ish .m:hover:not(.o) {
	background: #FFA080;
}

body.muted.dark .o,
body.muted.dark .o-ish .m:hover:not(.x) {
	background: #80A0FF;
}

.x-ish .m:hover:not(.x):not(.o),
.o-ish .m:hover:not(.x):not(.o) {
	cursor: pointer;
	opacity: 0.25;
}

.x > *,
.o > * {
	visibility: hidden;
}

.g.x-ish {
	border-color: #FF4000C0;
}

.g.o-ish {
	border-color: #0040FFC0;
}

body.muted .g.x-ish {
	border-color: #805040C0;
}

body.muted .g.o-ish {
	border-color: #405080C0;
}

body.muted.dark .g.x-ish {
	border-color: #FFA080C0;
}

body.muted.dark .g.o-ish {
	border-color: #80A0FFC0;
}

.g.nope,
body.muted .g.nope,
body.muted.dark .g.nope {
	border-color: transparent;
}

.cat {
	visibility: hidden;
}

@keyframes delay-cell {
	0%, 100% {
		background: 0;
		-webkit-mask-image: initial;
		        mask-image: initial;
	}
}

@keyframes delay-content {
	0%, 100% {
		visibility: initial;
	}
}

.g.x,
.g.o,
.g.cat {
	animation: 0.5s delay-cell;
}

.g.x > *,
.g.o > *,
.g.cat > * {
	animation: 0.5s delay-content;
}

#board.x,
#board.o,
#board.cat {
	animation: 1s delay-cell;
}

#board.x > *,
#board.o > *,
#board.cat > * {
	animation: 1s delay-content;
}


/* Measurements */

#board {
	margin-top: auto;

	height: 100vw;
	width:  100vw;
	max-height: calc(100vh * 3/4);
	max-width:  calc(100vh * 3/4);
}

.g {
	border-radius: calc(100vw * 4/576);
	border-width:  calc(100vw * 4/576);
	margin:        calc(100vw * 4/576);
	padding:       calc(100vw * 4/576);
}

.g-box {
	border-width: calc(100vw * 3/576);
}

.m-box {
	border-width: calc(100vw * 1/576);
}

#buttons {
	margin-bottom: calc(100vw * 1/24);
}

#buttons > div {
	border-radius: calc(100vw * 1/16);
	border-width:  calc(100vw * 1/288);
	font-size:     calc(100vw * 1/24);
	line-height:   calc(100vw * 1/8);
	margin:        calc(100vw * 1/36);
	margin-top: 0;

	height:        calc(100vw * 1/8);
	width:         calc(100vw * 1/4);
}

#resize,
#recolor {
	max-width: calc(100vw * 1/8);
}

#v, #gk {
	font-size:   calc(100vw * 1/36);
	line-height: calc(100vw * 1/36);
}


@media (orientation: landscape) {

	#board {
		height: calc(100vh * 2/3);
		width:  calc(100vh * 2/3);
	}

	.g {
		border-radius: calc(100vh * 4/864);
		border-width:  calc(100vh * 4/864);
		margin:        calc(100vh * 4/864);
		padding:       calc(100vh * 4/864);
	}

	.g-box {
		border-width: calc(100vh * 3/864);
	}

	.m-box {
		border-width: calc(100vh * 1/864);
	}

	#buttons {
		margin-bottom: calc(100vh * 1/24);
	}

	#buttons > div {
		border-width: calc(100vh * 1/576);
		font-size:    calc(100vh * 1/48);
		line-height:  calc(100vh * 1/16);
		margin:       calc(100vh * 1/72);

		height: calc(100vh * 1/16);
		width:  calc(100vh * 1/8);
	}

	#resize,
	#recolor {
		max-width: calc(100vh * 1/16);
	}

	#v, #gk {
		font-size:   calc(100vh / 48);
		line-height: calc(100vh / 48);
	}

}