/* ================================================================
   RECOMPENSAS — Catalogo de tarjetas de lujo animadas
   ================================================================ */

/* ---- GRID DE TARJETAS ---------------------------------------- */

.rewards-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-4);
  margin-top:            var(--space-5);
}

@media (min-width: 520px) {
  .rewards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .rewards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- TARJETA DE RECOMPENSA ----------------------------------- */

.reward-card {
  position:      relative;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
  padding:       var(--space-5);
  border-radius: var(--radius-xl);
  border:        1px solid var(--border-default);
  background:    var(--bg-surface);
  backdrop-filter: blur(20px);
  overflow:      hidden;
  cursor:        pointer;
  transition:
    transform    var(--transition-normal),
    box-shadow   var(--transition-normal),
    border-color var(--transition-normal);
  animation:     fadeInUp var(--duration-normal) var(--ease-out) both;
}

/* Efecto shimmer al hacer hover */
.reward-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.07) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: -100% 0;
  transition: background-position 0.6s ease;
  pointer-events: none;
}

.reward-card:hover::before { background-position: 200% 0; }

.reward-card:hover {
  transform:  translateY(-6px);
}

/* ---- VARIANTES POR RAREZA ------------------------------------ */

/* Común - Bronce cálido */
.reward-card-comun {
  border-color: rgba(205, 127, 50, 0.35);
  background:   linear-gradient(135deg, var(--bg-surface), rgba(205, 127, 50, 0.06));
}
.reward-card-comun:hover {
  box-shadow: 0 12px 40px rgba(205, 127, 50, 0.25),
              0 0 0 1px rgba(205, 127, 50, 0.4);
  border-color: rgba(205, 127, 50, 0.6);
}

/* Rara - Plata iridiscente */
.reward-card-rara {
  border-color: rgba(148, 163, 184, 0.35);
  background:   linear-gradient(135deg, var(--bg-surface), rgba(148, 163, 184, 0.08));
}
.reward-card-rara:hover {
  box-shadow: 0 12px 40px rgba(148, 163, 184, 0.30),
              0 0 0 1px rgba(148, 163, 184, 0.5);
  border-color: rgba(148, 163, 184, 0.7);
}

/* Épica - Violeta profundo */
.reward-card-epica {
  border-color: rgba(139, 92, 246, 0.40);
  background:   linear-gradient(135deg, var(--bg-surface), rgba(139, 92, 246, 0.10));
}
.reward-card-epica:hover {
  box-shadow: 0 16px 50px rgba(139, 92, 246, 0.40),
              0 0 0 1px rgba(139, 92, 246, 0.6),
              inset 0 1px 0 rgba(167, 139, 250, 0.15);
  border-color: rgba(139, 92, 246, 0.8);
}

/* Legendaria - Oro radiante con shimmer */
.reward-card-legendaria {
  border-color: rgba(253, 224, 71, 0.45);
  background:   linear-gradient(135deg, rgba(15,8,0,0.6), rgba(120, 53, 15, 0.25));
  animation:    fadeInUp var(--duration-normal) var(--ease-out) both,
                breatheGlow 3s ease-in-out infinite;
}
.reward-card-legendaria:hover {
  box-shadow: 0 20px 60px rgba(245, 158, 11, 0.50),
              0 0 0 1px rgba(253, 224, 71, 0.7),
              inset 0 1px 0 rgba(253, 224, 71, 0.2);
  border-color: rgba(253, 224, 71, 0.9);
  transform: translateY(-8px) scale(1.01);
}

/* ---- ICONO / EMOJI DE RECOMPENSA ----------------------------- */

.reward-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            56px;
  height:           56px;
  border-radius:    var(--radius-lg);
  font-size:        1.8rem;
  flex-shrink:      0;
  position:         relative;
}

.reward-card-comun     .reward-icon { background: rgba(205, 127, 50, 0.15); }
.reward-card-rara      .reward-icon { background: rgba(148, 163, 184, 0.15); }
.reward-card-epica     .reward-icon { background: rgba(139, 92, 246, 0.18); }
.reward-card-legendaria .reward-icon { background: rgba(245, 158, 11, 0.18); }

/* ---- TEXTO --------------------------------------------------- */

.reward-name {
  font-size:   var(--text-lg);
  font-weight: var(--weight-bold);
  color:       var(--text-primary);
  margin:      0;
  line-height: 1.3;
}

.reward-desc {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  margin:      0;
  line-height: 1.5;
  flex:        1;
}

.reward-meta {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--space-2);
  margin-top:      auto;
}

.reward-cost {
  font-size:   var(--text-sm);
  font-weight: var(--weight-bold);
  color:       var(--text-primary);
}

.reward-card-comun      .reward-cost { color: #E8A45A; }
.reward-card-rara       .reward-cost { color: #94A3B8; }
.reward-card-epica      .reward-cost { color: #A78BFA; }
.reward-card-legendaria .reward-cost { color: #FCD34D; }

/* ---- ESTADO BLOQUEADO ---------------------------------------- */

.reward-card.locked {
  opacity:   0.55;
  filter:    grayscale(0.4);
  cursor:    not-allowed;
}

.reward-card.locked::after {
  content:     '🔒';
  position:    absolute;
  top:         var(--space-3);
  right:       var(--space-3);
  font-size:   1.1rem;
}

.reward-card.locked:hover { transform: none; }

/* ---- BOTON CTA ----------------------------------------------- */

.reward-cta {
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       7px 16px;
  border-radius: var(--radius-full);
  border:        none;
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
  cursor:        pointer;
  white-space:   nowrap;
  transition:    transform var(--transition-fast), filter var(--transition-fast);
}

.reward-cta.active {
  background:  var(--gradient-primary);
  color:       var(--text-on-color);
  box-shadow:  0 3px 12px var(--color-primary-glow);
}
.reward-cta.active:hover { filter: brightness(1.1); transform: scale(1.04); }

.reward-cta.locked-btn {
  background:  transparent;
  border:      1px solid var(--border-default);
  color:       var(--text-muted);
  cursor:      not-allowed;
}

/* ---- BADGE DE RAREZA ----------------------------------------- */

.reward-rareza {
  font-size:   var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:     2px 9px;
  border-radius: var(--radius-full);
  border:      1px solid;
}

.reward-rareza-comun      { color: #E8A45A; border-color: #E8A45A; background: rgba(205,127,50,0.1); }
.reward-rareza-rara        { color: #94A3B8; border-color: #94A3B8; background: rgba(148,163,184,0.1); }
.reward-rareza-epica       { color: #A78BFA; border-color: #A78BFA; background: rgba(139,92,246,0.1); }
.reward-rareza-legendaria  { color: #FCD34D; border-color: #FCD34D; background: rgba(245,158,11,0.12);
  box-shadow: 0 0 8px rgba(253,224,71,0.3); }