body, input {
	background: var(--bg);
	color: var(--text);

	font-family: "Inter";
	transition: all 0.2s;
}

body {
	margin: 0;
}

:root {
	--bg: #fefefe;
	--bg-1: #fdfdfd;
	--bg-2: #efefef;
	--accent: #008cff;
	--accent-alt: rgb(149, 214, 237);
	--scrollbar: #555;
	--text-light: #333;
	--text: black;
	--error: rgb(255, 203, 203);
	--color-direction: -1;
	--shadow-color: #00000001;
	--shadow-hover-color: #0000000a;
	--win-bg: rgb(171, 228, 186);
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--bg: #111;
		--bg-1: #222;
		--bg-2: #444;
		--accent: #75c0f6;
		--accent-alt: var(--accent);
		--scrollbar: #ccc;
		--text: white;
		--text-light: #aaa;
		--error: rgb(236, 68, 68);
		--color-direction: 1;
		--shadow-hover-color: #ffffff0a;
		--shadow-color: #ffffff01;
		--win-bg: rgb(76, 163, 99);
	}
}

h1 {
	margin: 0;
}

table#game {
	background:var(--bg-2);

	border-collapse:separate;
	border-spacing:0.5rem;
	border: 1px solid lightgray;
	border-radius: 1rem;
}

td {
	padding: 0;
	background:var(--bg-1);
	/* font-size:3rem; */
	/* width: calc(max(2.5ch,4rem)); */
	height: calc(max(3ch,2rem));
	border-radius: .5rem;
	box-sizing: border-box;
	transition: background 0.2s;
}

table#game:not([won]) tbody tr:last-child td {
	background:transparent;
}

td:hover {
	background:hsl(from var(--bg-1) h s calc(l + var(--color-direction) * 5) )
}

td:not(:has(div)) {
	padding:1rem;
}

thead td {
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;

	background: hsl(from var(--bg-1) h s calc(l + var(--color-direction) * 3) );
}

div#input-cell {
	height: 100%;
	display: flex;
	width:20ch;
	background: var(--bg-2);
}

td[colspan]:not([colspan=1]) {
	width:unset;
}

input {
	box-sizing: border-box;
	padding:0;
	margin:0;
	height:100%;
	text-align: center;
	color:unset;
	border:none;
	font-size:inherit;

	min-width: unset;
	width:unset;
	border-radius:.5rem;
	width:100%;
	background: var(--bg-1);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border: 1px solid transparent;
}

input:focus {
	outline:none;
	border: 1px solid var(--accent);
}
input:hover {
	border: 1px solid var(--text-light);
	background: hsl(from var(--bg-2) h s calc(l + 10))
}


#game button {
	background: var(--accent);
	height: 100%;
	margin:0;
	padding:0;
	aspect-ratio: 1;
	font-size:1.25rem;
	border-radius: .5rem;
	border: 1px solid transparent;
	transition: background 0.2s;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

#game button:hover {
	cursor: pointer;
	background: hsl(from var(--accent) h s calc(l + 10));
	border: 1px solid white;
	
}

div#input-cell {
	position:relative;
}

@keyframes shake {
	0% {
		left:0;
	}
	33% {
		left: -1rem;
	}
	67% {
		left: 1rem;
	}
	100% {
		left: 0
	}
}

div#input-cell[data-error] {
	animation: 0.25s ease 0s shake;
	animation-iteration-count: 1;
}

div#input-cell[data-error] input {
	background: var(--error);
}

div#input-cell[data-error] ::placeholder {
	color: var(--text);
}

div#input-cell[data-error] button {
	background: hsl(from var(--accent) h 0 calc( l - var(--color-direction) * 30 ));

	cursor:not-allowed;
}

div.gameContainer {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	height: 100svh;
	width: 100%;
	max-width:100%;
	padding-top:4rem;
	padding-bottom:0.5rem;

	box-sizing: border-box;
	overflow:hidden;
}

sub {
	font-style: italic;
	font-weight:lighter;
	font-size:0.5rem;
	color: var(--text-light);
	text-wrap-mode: nowrap;
}

sub::before {
	content:"("
}

sub::after {
	content: ")"
}

div#bro {
	max-width: 100%;
	overflow: scroll;
	padding-bottom:1px;
}

div#bro::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 8px;
	height: 8px;
}

div#bro::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background:var(--scrollbar);
	border: 1px solid transparent;
}

div#bro::-webkit-scrollbar-thumb:hover {
	background: hsl(from var(--scrollbar) h s calc(l + var(--color-direction) * 10));
	border: 1px solid hsl(from var(--scrollbar) h s calc(l + var(--color-direction) * 20));
}

.gameContainer>div.top {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom:1rem;
}

button.info, button.close {
	position: absolute;
	font-size:1rem;
	width:2rem;
	height:2rem;
	box-sizing: border-box;

	background:#fff2;
	border:1px solid var(--text-light);
	border-radius:0.5rem;
	padding:0.25rem;
	color:var(--text-light);

	backdrop-filter: blur(1rem);

	box-shadow: 0 0 1rem 1rem var(--shadow-color);
	
	transition: color 0.2s, inset 0.2s, box-shadow 0.2s;
}

button.info {
	bottom:1rem;
	right:1rem;
}

button.close {
	top:1rem;
	right:1rem;
	border-radius: 1rem;
}

button.info:hover, button.close:hover {
	cursor:pointer;
	color:hsl(from var(--textlight) h s calc(l + var(--color-direction) * 10));
	box-shadow: 0 0 1rem 1rem var(--shadow-hover-color);
}

button.info:active {
	bottom: 0.9rem;
}

button.close:active {
	top:1.1rem;
}

dialog {
	opacity: 0;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

dialog[open] {
	animation: fade-in 0.5s ease forwards;
}

dialog {
	background: var(--bg-1);
	color: var(--text-color);
	border:none;
	border-radius:1rem;
	min-width:calc(min(50%, 100vw - 2rem));
	max-width: calc(min(80ch, 100vw - 2rem));
	opacity:0;
	padding:0;
}

dialog::backdrop {
	backdrop-filter: blur(1rem);
	opacity:0;
	animation: fade-in 0.5s ease forwards;
}

dialog .info-inner {
	padding:1rem;
}

dialog footer {
	background: var(--bg-2);
	padding:1rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-top: 1px solid var(--text-light);
	bottom:0;
}

dialog a {
	color: var(--accent);
	text-shadow: 0 0 0 transparent;
	transition: color 0.2s, text-shadow 0.2s;
}

dialog a:hover {
	color:hsl(from var(--accent) h s calc(l + 20));
	text-shadow: 0 0rem 1rem;
}

dialog h2 {
	font-size:2.5rem;
	margin-block:0.5rem;
	text-decoration: underline;
}

a.github-link i {
	color: var(--text);
	margin-right:1ch;
}

dialog h3 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	margin-top: 1.5rem;
}

i.small {
	color: var(--text-light);
}

#game[won=true] tbody tr:last-child td {
	background: var(--win-bg);
}

#play-again {
	width:100%;
	min-height:4rem;
	font-size: 2rem;
	border-radius:0.5rem;
	color:var(--text-color);
	border: 1px solid var(--text-color);
	background: linear-gradient(90deg,var(--accent-alt) 0%, var(--accent-alt) 50%, var(--bg-2) 50%, var(--bg-2) 100%);
	background-repeat:no-repeat;
	background-size:200%;
	background-position-x:100%;
	position:relative;
	top:0;

	transition: background-position 0.2s, inset 0.2s;
}

#play-again:hover {
	cursor:pointer;
	/* background: hsl(from var(--bg-2) h s calc(l + 10)); */
	background-position-x:0%
}

#play-again:active {
	top:0.2rem;
}

#play-again i {
	position:relative;
	left:0;
	transition: left 0.2s;
}

#play-again:active i {
	left:0.5rem;
}

.fa-solid {
	font-style: normal;
}

dialog#you-win {
	animation: fade-in 2s ease forwards;
}

dialog#you-win::backdrop {
	opacity: 0;
	animation: fade-in 0.2s ease forwards;
}