/* =========================================================
   ARENA UI — BUTTON SYSTEM (DEFINITIVO)
   Mobile-first, hover desktop-only
   Coerente con arena-ui.css originale
========================================================= */

/* ---------- BASE BUTTON ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.65rem 1.4rem;
  border-radius: 999px; /* come nel file originale */

  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);

  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background var(--aa-time-fast) ease,
    color var(--aa-time-fast) ease,
    box-shadow var(--aa-time-fast) ease,
    transform var(--aa-time-fast) ease;
}

/* Stato disabilitato (mobile-first) */
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Focus/Active mobile — niente glow */
.btn:focus,
.btn:active {
  outline: none;
  box-shadow: none;
}

/* Hover desktop-only */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

/* =========================================================
   PRIMARY BUTTON (VERO!)
   -> btn-cta nel file originale
========================================================= */

.btn-primary,
.btn-cta {
  background: linear-gradient(135deg, var(--aa-cta-from), var(--aa-cta-to));
  color: var(--aa-dark);

  box-shadow: 0 0 18px rgba(249, 115, 22, 0.55); /* uguale al file */
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .btn-cta:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.05);
    box-shadow: 0 0 24px rgba(250, 204, 21, 0.9);
  }
}

/* =========================================================
   SECONDARY BUTTON (VERO!)
   -> gradient cyan/blue
========================================================= */

.btn-secondary {
  background: linear-gradient(135deg, var(--zl-cyan), var(--zl-blue));
  color: var(--aa-dark);

  box-shadow: 0 0 14px rgba(56, 189, 248, 0.55);
}

@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.07);
    box-shadow: 0 0 22px rgba(56, 189, 248, 0.95);
  }
}

/* =========================================================
   CARD CTA (SPECIFICHE DELLE GAME CARD)
   -> rosa/viola, NON primary
========================================================= */

.btn-card {
  width: 100%;
  padding: 10px 12px;

  background: linear-gradient(135deg, var(--aa-pink), var(--aa-violet));
  color: var(--aa-dark);

  border-radius: var(--aa-radius-sm);
  border: 1px solid rgba(255,255,255,.12);

  font-size: 0.9rem;
  font-weight: 900;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.1) inset,
    var(--aa-shadow-neon);
}

@media (hover: hover) and (pointer: fine) {
  .btn-card:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.2) inset,
      0 18px 42px rgba(236,72,153,.65),
      0 0 48px rgba(139,92,246,.55);
  }
}

/* =========================================================
   UTILITIES
========================================================= */

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

.btn-sm {
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem;
}


.btn .label{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

.btn svg{
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}