/**
 * Sistema de botões — a base define estrutura e lê canais de cor;
 * variantes NUNCA redeclaram estrutura, só atribuem variáveis.
 * Duas dimensões ortogonais: cor (--primary/--outline/...) × forma (--icon).
 */

/* ── Base ── */

.game-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	white-space: nowrap; /* resize em width:fit-content pode computar abaixo do conteúdo — nowrap impede quebra do nó de texto */
	gap: var(--space-8);
	min-height: var(--space-40);
	padding: var(--space-8) var(--space-24);
	border: 2px solid var(--btn-border, transparent);
	border-radius: var(--radius-full);
	font-family: var(--font-heading);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-extrabold);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	background: var(--btn-bg, transparent);
	color: var(--btn-fg, var(--color-primary));
	box-shadow: 0 4px 0 var(--btn-shadow-color, color-mix(in srgb, var(--btn-bg, transparent) 80%, black));
	transition:
		opacity      var(--transition-fast),
		box-shadow   var(--transition-fast),
		transform    var(--transition-fast);
}

/* Hover — afunda levemente (metade do press ativo) */
.game-btn:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--btn-shadow-color, color-mix(in srgb, var(--btn-bg, transparent) 80%, black));
}

.game-btn:active {
	transform: var(--btn-press, translateY(4px));
	box-shadow: none;
}

.game-btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ── Cor ── */

/* Primário — preenchido; sombra auto-derivada via color-mix na base */
.game-btn--primary {
	--btn-bg: var(--color-primary);
	--btn-fg: var(--color-pure-white);
}

/* Outline — sombra = cor do texto/borda */
.game-btn--outline {
	--btn-border:       currentColor;
	--btn-shadow-color: currentColor;
}

/* Ghost — sem borda nem sombra */
.game-btn--ghost {
	--btn-shadow-color: transparent;
	--btn-press:        none;
}

.game-btn--ghost:hover {
	transform: none;
}

/* Accent — destaque amarelo (ex.: CTA da loja sobre fundo colorido) */
.game-btn--accent {
	--btn-bg: var(--color-accent-light);
	--btn-fg: var(--color-text);
}

/* Purple — CTA da dica do dia */
.game-btn--purple {
	--btn-bg: var(--color-purple);
	--btn-fg: var(--color-pure-white);
}

/* Surface — fundo branco; sombra auto-derivada */
.game-btn--surface {
	--btn-bg: var(--color-pure-white);
	--btn-fg: var(--color-text);
}

/* Overlay — translúcido; sombra auto-derivada */
.game-btn--overlay {
	--btn-bg: var(--overlay-white-sm);
	--btn-fg: var(--color-pure-white);
}

/* ── Estado ── */

/* Desabilitado — neutraliza qualquer variante de cor; pointer-events
   também bloqueia o transform de hover da base */
.game-btn:disabled {
	--btn-bg: var(--color-pure-white);
	--btn-fg: var(--color-pastel-grey);
	--btn-border: var(--color-pastel-grey);
	--btn-shadow-color: var(--color-pastel-grey);
	pointer-events: none;
}

/* ── Forma ── */

/* Ícone — circular; o contexto ajusta --btn-size/--btn-icon se precisar */
.game-btn--icon {
	width: var(--btn-size, var(--space-40));
	height: var(--btn-size, var(--space-40));
	min-height: 0;
	padding: 0;
	flex-shrink: 0;
}

.game-btn--icon .game-icon {
	width: var(--btn-icon, var(--space-16));
	height: var(--btn-icon, var(--space-16));
}