/**
 * Tag de card — indica status ou categoria sobre a thumbnail.
 *
 * Wrapper cria recuo visual sobre a thumbnail; pill contém o rótulo.
 * O modificador define --tag-bg, nunca valor bruto no componente.
 *
 * Uso: <div class="game-card-tag-wrap">
 *          <span class="game-card-tag game-card-tag--done">Feito</span>
 *      </div>
 */

/* ── Wrapper — recuo branco sobre a thumbnail ── */

.game-card-tag-wrap {
	position: absolute;
	top: 0;
	right: 0;
	padding: var(--space-8);
	background: var(--color-pure-white);
	border-radius: 0 0 0 var(--radius-16);
	z-index: 2;
}

/* ── Pill ── */

.game-card-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-8);
	background: var(--tag-bg, var(--color-primary));
	font-family: var(--font-heading);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-extrabold);
	color: var(--color-pure-white);
	white-space: nowrap;
	line-height: 1;
}

/* ── Variantes de status — espelham game_card_status_labels() ── */

.game-card-tag--done { --tag-bg: var(--color-success); }
.game-card-tag--late { --tag-bg: var(--color-danger);  }
.game-card-tag--new  { --tag-bg: var(--color-primary); }