@import "theme";

.lobby-status
{
	position: absolute;
	right: $deadzone-x;
	bottom: $deadzone-y;
	z-index: 30;
	pointer-events: none;
	flex-direction: column;
	gap: 14px;
	width: 300px;
	padding: 18px;
	border-radius: 20px;
	background-color: $surface-deep;
	border: 2px solid rgba( 42, 31, 48, 0.06 );
	box-shadow:
		0px 6px 0px rgba( 0, 0, 0, 0.06 ),
		0px 18px 36px $shadow-soft;

	&:intro { transform: translateY( 30px ); opacity: 0; }
	transition: transform 0.4s ease-out, opacity 0.4s ease-out, border-color 0.15s ease-out, bottom 0.35s ease-out;
}

.lobby-status.hidden
{
	display: none;
}

// Clickable (back to the map selector) only with the mouse; inert on a controller.
.lobby-status.mouse
{
	pointer-events: all;
	cursor: pointer;
}

.lobby-status.mouse:hover
{
	transform: translateY( -4px );
	border-color: $accent-red;
	box-shadow:
		0px 8px 0px rgba( 0, 0, 0, 0.08 ),
		0px 22px 40px $shadow-soft;
	sound-in: element_switch;
}

.ls-map
{
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.ls-thumb-wrap
{
	width: 72px;
	height: 54px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	align-items: center;
	justify-content: center;
	background-color: rgba( 42, 31, 48, 0.1 );
}

.ls-thumb
{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.ls-thumb-empty
{
	position: absolute;
	font-family: $display-font;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 1px;
	color: rgba( 42, 31, 48, 0.4 );
}

.ls-map-info
{
	flex-direction: column;
	gap: 2px;
}

.ls-eyebrow
{
	font-family: $display-font;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2px;
	color: $text-muted;
}

.ls-title
{
	font-family: $header-font;
	font-size: 18px;
	font-weight: 800;
	color: $text-default;
}

.ls-slots
{
	gap: 10px;
	padding: 0;
	justify-content: center;

	.slot
	{
		width: 48px;
		height: 48px;
		border-width: 3px;
	}

	.slot.occupied
	{
		border-width: 3px;
	}

	.avatar-wrap
	{
		width: 36px;
		height: 36px;
	}

	.bot-avatar { font-size: 20px; }
	.placeholder { font-size: 22px; }
	.ready-check { font-size: 20px; }

	// Keep the compact card clean - drop the hanging labels and device/number badges.
	.player-label,
	.number,
	.device
	{
		display: none;
	}
}

.ls-status
{
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.ls-state
{
	font-family: $display-font;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	color: $accent-red;
}

.ls-ready
{
	font-family: $display-font;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	color: $text-muted;
}