/* Selos de capacidade da Habilidade de Companheiro (listagens) e chips de filtro por capacidade. */

.cs-selos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .3rem;
	margin-top: .55rem;
}

.cs-selo {
	--cs: #94a3b8;
	display: inline-grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	font-size: .82rem;
	line-height: 1;
	color: var(--cs);
	background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--cs) 34%, transparent), color-mix(in srgb, var(--cs) 12%, transparent) 70%);
	border: 1px solid color-mix(in srgb, var(--cs) 55%, transparent);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset, 0 2px 8px -3px color-mix(in srgb, var(--cs) 70%, transparent);
	transition: transform .15s ease, box-shadow .15s ease;
	cursor: help;
}

.cs-selo:hover {
	transform: translateY(-2px) scale(1.08);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset, 0 6px 14px -4px color-mix(in srgb, var(--cs) 85%, transparent);
}

.cs-selo img {
	width: 1.15rem;
	height: 1.15rem;
	object-fit: contain;
}

.cs-selo--mais {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--text-dim, #94a3b8);
	background: rgba(148, 163, 184, .12);
	border-color: rgba(148, 163, 184, .35);
	box-shadow: none;
}

/* Chip de filtro: ícone bootstrap na cor da capacidade */
.cs-chip .bi {
	color: var(--chip-color);
	margin-right: .35rem;
	font-size: 1rem;
	vertical-align: -.12em;
}

.cs-chip.active .bi {
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.cs-selo { transition: none; }
	.cs-selo:hover { transform: none; }
}

/* No card de habilidade o texto é alinhado à esquerda */
.skill-list-card .cs-selos {
	justify-content: flex-start;
	margin-top: auto;   /* selos e estatísticas grudam no fim do card: mesma posição nos cards da linha */
	padding-top: .6rem;
}

/* A linha de selos ocupa sempre a mesma altura, com ou sem selos, para os cards vizinhos ficarem alinhados. */
.cs-selos {
	min-height: 1.7rem;
}

/* Linha de duração e recarga também reserva altura, mesmo vazia. */
.skill-list-card .skill-list-stats {
	min-height: 1.9rem;
}

.skill-list-card .cs-selos {
	min-height: calc(1.7rem + .6rem);   /* selo + padding-top */
}