@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
	--max-body-width: 1100px;

	--background: #0D1317;
	--transparent-bg: rgba(255, 255, 255, 0.1);
	--foreground: #FFE3DC;
	--focus: #9AE19D;
	--wins: #caf0c7;
	--losses: #eba9be;

	--radius: 0.4rem;
	--gap: 0.5rem;
	--padding: 0.25rem;
	--icon-size: 1.5rem;
}

* {
	color: var(--foreground);
	font-family: Inter, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1.2rem;
}

body {
	width: 100vw;
	max-width: 100%;
	min-width: 150px;
	min-height: 100vh;

	display: flex;
	justify-content: center;

	margin: 0;
	padding: auto;

	background-color: var(--background);
}

#content {
	width: 100%;
	max-width: var(--max-body-width);

	margin: 0;
	padding: 1rem;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--gap);
}

header {
	position: sticky;
	padding: var(--padding);
	display: flex;
	align-items: center;
	gap: var(--gap);
	cursor: pointer;
}

header>img {
	width: 2rem;
}

input {
	max-width: 100%;
	box-sizing: border-box;
}

input,
select,
button {
	background-color: var(--background);
	border: 2px solid var(--focus);
	border-radius: var(--radius);
	padding: var(--padding);
}

form {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	gap: var(--gap);
}

.separator {
	display: flex;
	align-items: center;
	text-align: center;
	margin: var(--gap) 0;
	font-size: 0.8rem;
}

.separator::before,
.separator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid var(--foreground);
	box-sizing: border-box;
}

.separator:not(:empty)::before {
	margin-right: var(--padding);
}

.separator:not(:empty)::after {
	margin-left: var(--padding);
}

#sort_filter {
	display: flex;
	justify-content: flex-start;
	gap: var(--gap);
}

#sort_wrapper,
#filter_wrapper {
	position: relative;
	--height: 2.25rem;
	--icon-size: calc(var(--height) - 2 * var(--padding));

	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--gap);

	min-width: 0;
}

#sort_wrapper {
	flex-shrink: 0;
}

#filter_wrapper {
	flex-shrink: 1;
	flex-grow: 1;
}

#filter_select_value {
	min-width: 0;
	flex-shrink: 1;
	flex-grow: 1;
}

#sort_select,
#filter_select_id {
	height: var(--height);
	padding-left: var(--icon-size);
}

#sort_select,
#filter_select_id,
#filter_select_cmp,
#filter_select_value {
	box-sizing: border-box;
	text-align: right;
}

#filter_select_value {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
}

#sort_direction,
#filter_wrapper::before {
	content: '';
	display: block;

	position: absolute;
	left: var(--padding);
	top: var(--padding);

	width: var(--icon-size);
	height: var(--icon-size);

	background-size: contain;
}

#sort_direction {
	cursor: pointer;
	background-image: url("../static/sort.png");
}

#filter_wrapper::before {
	background-image: url("../static/filter.png");
}

#user * {
	font-size: 2rem;
}

#user,
.opponent_inner {
	display: flex;
	align-items: center;
	gap: var(--gap);
	position: relative;
}

.opponent {
	min-width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--gap);

	padding: calc(2 * var(--padding));
	box-sizing: border-box;

	background-color: var(--transparent-bg);
	border-radius: var(--radius);
}

#user_avatar,
.opponent_avatar {
	width: 5rem;
	aspect-ratio: 1;
	border-radius: var(--radius);
}

#username,
.opponent_username {
	min-width: 8rem;
}

#user_stats,
.opponent_stats {
	flex-grow: 1;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: var(--gap);
}

#user_stats>span,
.opponent_stats>span {
	text-align: center;
}

@media only screen and (max-width: 600px) {

	#user,
	.opponent_inner {
		flex-direction: column;
		min-width: 130px;
	}

	#username,
	.opponent_username {
		min-width: unset;
		text-align: center;
	}

	#user_stats,
	.opponent_stats {
		display: flex;
		flex-direction: column;
		justify-content: stretch;
	}
}

@media only screen and (max-width: 700px) {

	#filter_wrapper,
	#sort_wrapper {
		flex-direction: column;
	}

	#sort_filter {
		flex-direction: column;
	}
}

#opponents {
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	gap: var(--gap);
}

.wins {
	color: var(--wins);
}

.losses {
	color: var(--losses);
}

.floating {
	position: absolute;
	right: 0;

	width: var(--icon-size);
	height: var(--icon-size);

	cursor: pointer;

	padding: var(--padding);
	box-sizing: border-box;
	background-color: var(--transparent-bg);
	border-radius: var(--radius);
}

.floating:before {
	content: '';

	display: block;
	width: 100%;
	height: 100%;

	background-size: contain;
	background-origin: content-box;
	background-repeat: no-repeat;
}

.opponent_link {
	top: 0;
}

.opponent_link:before {
	background-image: url("../static/link.png");
}

.opponent_expand {
	bottom: 0;
}

.opponent_expand:before {
	background-image: url("../static/arrow.png");
	transition: transform 0.3s ease-in-out;
	transform: rotate(-90deg);
}

.opponent_expand.expanded:before {
	transform: rotate(0);
}

.opponent_matches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5rem, auto));
	gap: var(--gap);
}

.opponent_match {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: var(--padding);
	background-color: var(--transparent-bg);
	border-radius: var(--radius);

	text-decoration: none;
}

.match_forfeit {
	width: var(--icon-size);
	height: var(--icon-size);
}