/**
 * Player Card Component
 * 
 * Provides player card display and controls:
 * - Card container with hover effects
 * - Current player highlight state
 * - Name section with role icon and badges
 * - Host controls (team buttons, spymaster toggle)
 * - Current player controls (board toggle)
 * - Slide-in animation
 * 
 * Dependencies: 
 *   - variables.css
 *   - components/badge.css (for player badges)
 *   - components/button.css (for buttons)
 *   - components/form.css (for inputs)
 * 
 * Used by: team-assignment.css
 */

/* ========================================
   Player Card Container
   ======================================== */

.player-card {
	background: var(--color-bg-primary);
	border: var(--border-width) solid var(--color-border-medium);
	border-radius: clamp(4px, 0.8vh, 6px);
	padding: clamp(6px, 1vh, 10px) clamp(8px, 1.2vh, 12px);
	margin: clamp(4px, 0.8vh, 8px) 0;
	box-shadow: var(--shadow-sm);
	transition: all var(--duration-normal) var(--easing-standard);
	animation: playerCardSlideIn var(--duration-medium) var(--easing-enter);
}

.player-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* Current player card highlight */
.player-card.current-player {
	border: var(--border-width-thick) solid var(--color-primary);
	background: var(--color-highlight);
}

/* ========================================
   Player Name Section
   ======================================== */

/* Player name section - contains name display/edit and icons */
.player-name {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1vh, 8px);
	margin-bottom: clamp(4px, 0.8vh, 8px);
}

.role-icon {
	font-size: clamp(16px, 2.5vh, 20px);
	line-height: 1;
}

/* Name text (default display) */
.name-text {
	font-weight: var(--font-weight-medium);
	font-size: clamp(0.85rem, 1.6vh, 1rem);
	color: var(--color-text-primary);
}

/* Name input styles are in components/form.css */

/* Badges container - push to the right */
.player-badges {
	display: flex;
	align-items: center;
	gap: clamp(4px, 0.8vh, 6px);
	margin-left: auto;
}

/* Badge styles are in components/badge.css */
/* Icon button styles (edit/confirm/cancel) are in components/button.css */

/* ========================================
   Current Player Controls
   ======================================== */

/* Current player controls section (board toggle, etc.) */
.current-player-controls {
	margin-bottom: clamp(4px, 0.8vh, 8px);
	padding: clamp(4px, 0.8vh, 6px);
	background: var(--color-bg-tertiary);
	border-radius: var(--border-radius-base);
}

/* Board toggle styles are in components/form.css */

/* ========================================
   Host Player Controls
   ======================================== */

/* Player controls - will only be in DOM for host */
.player-controls {
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 0.8vh, 6px);
}

/* Team buttons row - with Spy button aligned to the right */
.team-buttons {
	display: flex;
	flex-direction: row;
	gap: clamp(4px, 0.8vh, 6px);
	flex-wrap: nowrap;
	align-items: center;
}

/* Team button styles are in components/button.css */

/* Spacer to push Spy button to the right */
.team-buttons-spacer {
	flex: 1;
	min-width: clamp(8px, 1.5vh, 12px);
}

/* Toggle spymaster button styles are in components/button.css */

/* ========================================
   Animations
   ======================================== */

/* Animation for adding/removing players */
@keyframes playerCardSlideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 600px) {
	.player-card {
		padding: clamp(5px, 0.8vh, 8px) clamp(6px, 1vh, 10px);
	}
}