/* ============================================
   Button Component
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.96);
  transition: transform var(--transition-spring);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---- Sizes ---- */
.btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.btn--sm .icon {
  width: 14px;
  height: 14px;
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

.btn--lg .icon {
  width: 20px;
  height: 20px;
}

.btn--xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
}

.btn--block {
  width: 100%;
}

/* ---- Primary ---- */
.btn--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: #fff;
}

.btn--primary:hover {
  box-shadow: var(--glow-primary);
  filter: brightness(1.1);
}

/* ---- Accent (Play / CTA) ---- */
.btn--accent {
  background: linear-gradient(135deg, var(--color-green) 0%, #34D673 100%);
  color: #fff;
}

.btn--accent:hover {
  box-shadow: var(--glow-green);
  filter: brightness(1.1);
}

/* ---- Gold (Premium) ---- */
.btn--gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, #FFD060 100%);
  color: #1A1A2E;
}

.btn--gold:hover {
  box-shadow: var(--glow-gold);
  filter: brightness(1.1);
}

/* ---- Danger ---- */
.btn--danger {
  background: linear-gradient(135deg, var(--color-red) 0%, #F87171 100%);
  color: #fff;
}

.btn--danger:hover {
  box-shadow: var(--glow-red);
  filter: brightness(1.1);
}

/* ---- Secondary (outlined) ---- */
.btn--secondary {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-primary);
}

.btn--secondary:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary-light);
  background: rgba(var(--color-primary-rgb), 0.08);
}

/* ---- Ghost (text only) ---- */
.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
}

.btn--ghost:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* ---- Icon Only ---- */
.btn--icon {
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.btn--icon.btn--sm {
  padding: var(--space-1);
}

.btn--icon.btn--lg {
  padding: var(--space-3);
}

/* ---- Button Group ---- */
.btn-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.btn-group--center {
  justify-content: center;
}