@import "theme";
@import "avatar";

// Player palette mapped to theme accents
$p1: $accent-red;
$p2: $accent-blue;
$p3: $accent-yellow;
$p4: $accent-green;
$p5: $accent-orange;
$p6: $accent-pink;
$p7: $accent-cyan;
$p8: $accent-purple;

PlayerSlots
{
	flex-direction: row;
	gap: 18px;
	padding: 4px;
}

.slot
{
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background-color: rgba( 22, 20, 30, 0.35 );
	border: 2px solid $pill-inner;
	align-items: center;
	justify-content: center;
	position: relative;
	box-shadow:
		0px 4px 0px rgba( 0, 0, 0, 0.1 ),
		0px 10px 22px $shadow-soft;
	transition: transform 0.3s ease-out;

	&:intro
	{
		transform: scale( 0.1 ) translateY( 0px );
	}
}

// Empty slots are smoked glass so the background bleeds through.
.slot.empty
{
	background-color: rgba( 22, 20, 30, 0.35 );
	border-color: $pill-inner;
	pointer-events: all;
	cursor: pointer;

	&:intro
	{
		transform: scale( 0 );
	}

	// Hover swaps the ? for a + to hint at inviting friends
	.invite { display: none; }

	&:hover
	{
		background-color: $pill-hover;

		.question { display: none; }
		.invite { display: flex; }
	}
}

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

@keyframes slot-bob
{
	0%   { transform: translateY( 0px ); }
	50%  { transform: translateY( -4px ); }
	100% { transform: translateY( 0px ); }
}

// Per-slot staggered bob (on inner content to not conflict with intro scale)
.slot.slot-1 .avatar-wrap, .slot.slot-1 .placeholder { animation: slot-bob 3s ease-in-out 0s infinite; }
.slot.slot-2 .avatar-wrap, .slot.slot-2 .placeholder { animation: slot-bob 3s ease-in-out 0.4s infinite; }
.slot.slot-3 .avatar-wrap, .slot.slot-3 .placeholder { animation: slot-bob 3s ease-in-out 0.8s infinite; }
.slot.slot-4 .avatar-wrap, .slot.slot-4 .placeholder { animation: slot-bob 3s ease-in-out 1.2s infinite; }
.slot.slot-5 .avatar-wrap, .slot.slot-5 .placeholder { animation: slot-bob 3s ease-in-out 1.6s infinite; }
.slot.slot-6 .avatar-wrap, .slot.slot-6 .placeholder { animation: slot-bob 3s ease-in-out 2.0s infinite; }
.slot.slot-7 .avatar-wrap, .slot.slot-7 .placeholder { animation: slot-bob 3s ease-in-out 2.4s infinite; }
.slot.slot-8 .avatar-wrap, .slot.slot-8 .placeholder { animation: slot-bob 3s ease-in-out 2.8s infinite; }

// Per-player colored ring + chunky shadow

.slot.slot-1.occupied { border-color: $p1; box-shadow: 0px 4px 0px rgba(0,0,0,0.18), 0px 12px 24px rgba( 255, 77, 106, 0.45 ); }
.slot.slot-2.occupied { border-color: $p2; box-shadow: 0px 4px 0px rgba(0,0,0,0.18), 0px 12px 24px rgba( 108, 143, 224, 0.45 ); }
.slot.slot-3.occupied { border-color: $p3; box-shadow: 0px 4px 0px rgba(0,0,0,0.18), 0px 12px 24px rgba( 255, 210, 61, 0.45 ); }
.slot.slot-4.occupied { border-color: $p4; box-shadow: 0px 4px 0px rgba(0,0,0,0.18), 0px 12px 24px rgba( 124, 217, 168, 0.45 ); }
.slot.slot-5.occupied { border-color: $p5; box-shadow: 0px 4px 0px rgba(0,0,0,0.18), 0px 12px 24px rgba( 244, 162, 97, 0.45 ); }
.slot.slot-6.occupied { border-color: $p6; box-shadow: 0px 4px 0px rgba(0,0,0,0.18), 0px 12px 24px rgba( 255, 132, 163, 0.45 ); }
.slot.slot-7.occupied { border-color: $p7; box-shadow: 0px 4px 0px rgba(0,0,0,0.18), 0px 12px 24px rgba( 126, 212, 217, 0.45 ); }
.slot.slot-8.occupied { border-color: $p8; box-shadow: 0px 4px 0px rgba(0,0,0,0.18), 0px 12px 24px rgba( 123, 45, 139, 0.45 ); }

.avatar-wrap
{
	@include avatar(64px);
}

.bot-avatar
{
	background-color: $pill-inner;
	font-size: 34px;
	align-items: center;
	justify-content: center;
}

.placeholder
{
	font-family: $display-font;
	font-size: 38px;
	font-weight: 800;
	color: rgba( 255, 255, 255, 0.45 );
	padding-bottom: 4px;
}

.number
{
	position: absolute;
	bottom: -4px;
	right: -4px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-family: $display-font;
	font-size: 14px;
	font-weight: 800;
	align-items: center;
	justify-content: center;
	padding-bottom: 2px;
	border: 2px solid white;
	box-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.18 );
}

.slot.is-ready
{
	background-color: $accent-green;
	border-color: $accent-green;
}

.ready-check
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: transparent;
	font-family: $display-font;
	font-size: 32px;
	font-weight: 800;
	color: $accent-green;
	text-shadow: 0px 3px 6px rgba( 0, 0, 0, 0.4 );
	align-items: center;
	justify-content: center;
	z-index: 20;
	transition: transform 0.3s ease-out;

	&:intro
	{
		transform: scale( 2.0 );
	}
}

.slot.slot-1 .number { background-color: $p1; color: white; }
.slot.slot-2 .number { background-color: $p2; color: white; }
.slot.slot-3 .number { background-color: $p3; color: $text-on-yellow; }
.slot.slot-4 .number { background-color: $p4; color: $text-on-green; }
.slot.slot-5 .number { background-color: $p5; color: white; }
.slot.slot-6 .number { background-color: $p6; color: white; }
.slot.slot-7 .number { background-color: $p7; color: $text-on-green; }
.slot.slot-8 .number { background-color: $p8; color: white; }

.device
{
	position: absolute;
	top: 80%;
	left: 50%;
	margin-top: -14px;
	margin-left: -14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: white;
	font-size: 14px;
	align-items: center;
	justify-content: center;
	padding-bottom: 2px;
	border: 2px solid rgba( 42, 31, 48, 0.12 );
	box-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.15 );
}

.player-label
{
	position: absolute;
	bottom: -28px;
	left: 50%;
	margin-left: -18px;
	width: 36px;
	height: 18px;
	border-radius: 9px;
	font-family: $display-font;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1px;
	color: white;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 1px;
	box-shadow: 0px 2px 0px rgba( 0, 0, 0, 0.15 );
}

.slot.slot-1 .player-label { background-color: $p1; }
.slot.slot-2 .player-label { background-color: $p2; }
.slot.slot-3 .player-label { background-color: $p3; color: $text-on-yellow; }
.slot.slot-4 .player-label { background-color: $p4; color: $text-on-green; }
.slot.slot-5 .player-label { background-color: $p5; }
.slot.slot-6 .player-label { background-color: $p6; }
.slot.slot-7 .player-label { background-color: $p7; color: $text-on-green; }
.slot.slot-8 .player-label { background-color: $p8; color: white; }