/* Mini Player Card — shared styles for scaled card rendering */

.mini-card-link {
	display: block;
	position: relative;
	text-decoration: none;
}

/* Text fallback — hidden by default, shown on small screens via media query */
.mini-card-name-fallback {
	display: none;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text-2);
	background: rgba(255,255,255,0.05);
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.mini-card-name-fallback .fb-ovr {
	font-size: 0.6875rem;
	color: var(--color-text-3);
	font-weight: 700;
}

.fb-captain {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	font-size: 0.5625rem;
	font-weight: 800;
	color: #fff;
	background: var(--color-orange);
	border-radius: 50%;
}

.fb-ready {
	color: var(--color-jade);
	font-size: 0.75rem;
}

/* Ready/You glow states */
.mini-card-link.is-ready {
	filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.7));
}

.mini-card-link.is-you {
	filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.7));
}

/* Outer wrapper: the SCALED dimensions */
.mini-card-outer {
	width: 108px;
	height: 164px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Inner wrapper: ORIGINAL card size + scale transform */
.mini-card-inner {
	width: 270px;
	height: 410px;
	transform: scale(0.4);
	transform-origin: center center;
	flex-shrink: 0;
}

/* Badges positioned on the link (outer) */
.mini-badge-ready {
	position: absolute;
	top: -4px;
	left: -4px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-jade);
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.4);
	z-index: 20;
}

.mini-badge-ready svg {
	width: 11px;
	height: 11px;
	color: white;
}

.mini-badge-captain {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FBBF24;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.4);
	z-index: 20;
	font-size: 10px;
	font-weight: 800;
	color: #1a1a1a;
}

.mini-badge-you {
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	padding: 2px 6px;
	font-size: 8px;
	font-weight: 800;
	text-transform: uppercase;
	background: var(--color-orange);
	color: white;
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.4);
	z-index: 20;
}