/* Tactile, game-like buttons: a solid bottom "edge" that compresses on
   press, rather than images, so they stay crisp at any size. */

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 600;
	padding: var(--space-3) var(--space-5);
	border: none;
	border-radius: var(--radius-pill);
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.btn--primary {
	background: var(--color-reward);
	color: var(--color-on-reward);
	box-shadow: var(--shadow-button-raised);
}

.btn--primary:hover {
	background: var(--color-reward-strong);
	color: var(--color-on-reward);
	transform: translateY(-2px);
}

.btn--primary:active {
	transform: translateY(2px);
	box-shadow: var(--shadow-button-pressed);
}

.btn--secondary {
	background: var(--color-surface);
	color: var(--color-anchor);
	box-shadow: var(--shadow-button-raised-alt);
	border: 2px solid var(--color-anchor);
}

.btn--secondary:hover {
	color: var(--color-anchor);
	transform: translateY(-2px);
}

.btn--secondary:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--raw-navy-900);
}

.btn--ghost {
	background: transparent;
	color: var(--color-interface-alt);
	padding-inline: var(--space-3);
}

.btn--ghost:hover {
	color: var(--color-link-hover);
}

.btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
	pointer-events: none;
}