/**
 * Badge Component
 * 
 * Provides small labeled badges for displaying user status/roles.
 * Used for host indicators and game-specific roles (e.g., Spymaster in secretwords).
 * 
 * Dependencies: variables.css
 * Used by: player-card.css
 */

/* ========================================
   Badge Styles
   ======================================== */

/* Host badge - yellow theme to stand out */
.host-badge {
	background: var(--color-host-badge);
	color: var(--color-text-primary);
	font-size: clamp(0.6rem, 1.2vh, 0.7rem);
	font-weight: var(--font-weight-bold);
	padding: clamp(2px, 0.4vh, 2px) clamp(4px, 0.8vh, 6px);
	border-radius: var(--border-radius-sm);
	letter-spacing: 0.5px;
}

/* Spymaster badge - orange theme for game role */
.spymaster-badge {
	background: var(--color-spymaster-badge);
	color: var(--color-text-inverse);
	font-size: clamp(0.6rem, 1.2vh, 0.7rem);
	font-weight: var(--font-weight-bold);
	padding: clamp(2px, 0.4vh, 2px) clamp(4px, 0.8vh, 6px);
	border-radius: var(--border-radius-sm);
	letter-spacing: 0.5px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}