/* ==========================================
   AGAMES Button System
   Edit ONLY this file to change button look
   ========================================== */

.ag-btn {
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: 0.2px;
  padding: 10px 16px;
  transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ag-btn-lg {
  padding: 12px 18px;
  font-size: 1.05rem;
}

/* Primary (yellow) */

.ag-btn-primary {
  background: #ffc107;
  color: #582000 !important;
  border: 1px solid rgba(255,193,7,0.6);
}

.ag-btn-primary:hover {
  filter: brightness(0.95);
  background: #ff6007;
  color: #fffcfc !important;
  transform: translateY(-1px);
  border: 1px solid rgba(247,240,221,0.6);
}

/* Ghost (outline) */

.ag-btn-ghost {
  background: rgba(0,25,255,0.25);
  color: #597dff !important;
  border: 1px solid rgba(255,255,255,0.55);
}

.ag-btn-ghost:hover {
  background: rgba(15,241,255,0.52);
  color: #aff8fc !important;
  border-color: rgba(255,255,255,0.8);
  transform: translateY(-1px);
}

/* Optional future FX hooks */

.ag-fx-shake:hover {
  animation: agShake 0.35s linear 1;
}

@keyframes agShake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(2px);
  }
  75% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}