.ladder-details {
	display: flex;
	justify-content: center;
	position: absolute;
	padding: 12px;
	width: 100%;
}

.ladder-details__inner {
	display: flex;
	justify-content: center;
	font-family: sans-serif;
	color: white;
	width: 100%;
}

.ladder-details__card {
	display: flex;
	border-radius: 10px;
	background: var(--color-bg-dark);
	padding: 5px 8px;
	width: fit-content;
	text-shadow: 0 2px 2px #000;
	box-shadow: 0 2px 8px #000;
	opacity: 0.9;
	z-index: 4;
}

.ladder-details__card > div {
	display: flex;
}

.ladder-details__card > .red {
	justify-content: flex-end;
	flex-basis: 100%;
	color: var(--color-red-player);
}

.ladder-details__card > .blue {
	justify-content: flex-start;
	flex-basis: 100%;
	color: var(--color-blue-player);
}

.ladder-details__card > .timer {
	--timer-width: 6em;

	flex-direction: column;
	flex-basis: 0;
	padding: 0 8px;
}

.ladder-details__card .timer .main {
	display: flex;
	align-self: center;
	justify-content: space-between;
	width: var(--timer-width);
}

.ladder-details__card .timer .bar {
	display: flex;
	justify-content: center;
	width: var(--timer-width);
	margin: 0 auto;
}

.ladder-details__card > .timer .bar--red {
	border-bottom: 2px solid var(--color-red-player);
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

.ladder-details__card > .timer .bar--blue {
	border-bottom: 2px solid var(--color-blue-player);
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}

.ladder-details__card .name {
	white-space: nowrap;
	font-weight: bold;
}

@media (max-width: 500px) {
	.ladder-details__card {
		display: block;
	}

	.ladder-details__card > div {
		padding: 2px 0;
	}

	.ladder-details__card > .red,
	.ladder-details__card > .timer,
	.ladder-details__card > .blue {
		justify-content: center;
	}

	.header-container .login-status-container.ladder-game-started {
		visibility: hidden;
	}
}