*,
::before,
::after {
	box-sizing: border-box;
}

:root {
	--border-color: #e5e5e5;
	--border: 2px solid var(--border-color);
	--color-primary: #000;
	--color-lose: #b60000;
	--color-win: blue;
	--computer: #545454;
	--human: #337ab7;
	background: #fff;
}

body {
	color: var(--color-primary);
}

p {
	margin-block: 0;
	margin-inline: 0;
}

x-board:not(:defined) {
	display: flow-root;
	margin-inline: auto;
	max-inline-size: 320px;
}

x-space:not(:defined) {
	display: none;
}

[type="human"] {
	color: var(--human);
}

[type="computer"] {
	color: var(--computer);
}

.result,
.update-message {
	font-family: system-ui, sans-serif;
	font-size: 1.125em;
	margin-block: 0;
	margin-inline: auto;
	max-inline-size: 320px;
	padding-block: 0;
	padding-inline: 0.625rem;
}

.update-message {
	background-color: var(--border-color);
	margin-block-start: 1.5rem;
	padding-block: 1.25rem;
	padding-inline: 1.5rem;
}

.result-text {
	margin-block: 0.5em;
}

.status:not(:empty)::after {
	color: var(--color-primary);
	content: ".";
}

.status.won:not(:empty)::after {
	content: "!";
}

.won {
	color: var(--color-win);
}

.lost {
	color: var(--color-lose);
}

@supports not (aspect-ratio: 1) {
	x-board:not(:defined)::before {
		content: " ";
		float: left;
		padding-block-start: 100%;
	}
}

@supports (aspect-ratio: 1) {
	x-board:not(:defined) {
		aspect-ratio: 1;
	}
}

@media (max-width: 335px) {
	x-board:not(:defined) {
		max-inline-size: 260;
	}
	.result {
		max-inline-size: 260px;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--border-color: #30363d;
		--color-win: #58a6ff;
		--color-primary: #c1d1d9;
		--color-lose: #e34c26;
		--computer: #8b949e;
		background: #0d1117;
	}
}