/* pixel-btn — physical press button with variants */

.pixel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  min-width: 44px;
  font-family: var(--font-pixel);
  font-size: clamp(var(--font-size-pixel-min), 2vw, var(--font-size-pixel-max));
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-dark);
  background-color: var(--btn-gold);
  border: var(--border-width) solid var(--border);
  box-shadow: var(--pixel-shadow);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pixel-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  text-decoration: none;
  color: var(--text-dark);
}

.pixel-btn:active:not(:disabled),
.pixel-btn.is-pressed {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.pixel-btn:disabled,
.pixel-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* Variants */
.pixel-btn--green {
  background-color: var(--btn-green);
}

.pixel-btn--blue {
  background-color: var(--btn-blue);
  color: var(--text-main);
}

.pixel-btn--blue:hover:not(:disabled) {
  color: var(--text-main);
}

.pixel-btn--red {
  background-color: var(--btn-red);
  color: var(--text-main);
}

.pixel-btn--red:hover:not(:disabled) {
  color: var(--text-main);
}

.pixel-btn--gold {
  background-color: var(--btn-gold);
}

/* Size modifiers */
.pixel-btn--sm {
  padding: var(--space-xs) var(--space-sm);
  min-height: 36px;
  font-size: var(--font-size-pixel-min);
}

.pixel-btn--lg {
  padding: var(--space-md) var(--space-lg);
  min-height: 52px;
}

.pixel-btn--block {
  display: flex;
  width: 100%;
}

.pixel-btn__icon {
  font-size: 1.1em;
  line-height: 1;
}

@media (max-width: 479px) {
  .pixel-btn {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-btn {
    transition: none;
  }

  .pixel-btn:active:not(:disabled) {
    transform: none;
    box-shadow: var(--pixel-shadow-sm);
  }
}