/* ═══════════════════════════════════════════════════════════
   TARJETAS COLECCIONABLES — Sistema de Rarezas
   nosecomodecirte.com
   ═══════════════════════════════════════════════════════════ */

/* ── Badges de rareza actualizados ─────────────────────────── */
.badge-comun      { background: rgba(148,163,184,.15); color: #94a3b8; border: 1px solid rgba(148,163,184,.2); }
.badge-raro       { background: rgba(99,102,241,.12);  color: #a5b4fc; border: 1px solid rgba(99,102,241,.25); }
.badge-epico      { background: rgba(167,139,250,.12); color: #c4b5fd; border: 1px solid rgba(167,139,250,.25); }
.badge-plata      { background: rgba(226,232,240,.1);  color: #cbd5e1; border: 1px solid rgba(226,232,240,.25); }
.badge-oro        { background: rgba(251,191,36,.1);   color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.badge-platino    { background: rgba(165,243,252,.1);  color: #a5f3fc; border: 1px solid rgba(165,243,252,.25); }
.badge-diamante   { background: rgba(224,242,254,.1);  color: #e0f2fe; border: 1px solid rgba(224,242,254,.3); }
.badge-legendario { background: rgba(245,158,11,.1);   color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }

/* ── Base: tarjeta coleccionable ────────────────────────────── */
.card-coleccionable {
  position: relative;
  border-radius: 20px;
  padding: 32px 24px 28px;
  max-width: 340px; width: 100%;
  text-align: center;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  cursor: default;
  user-select: none;
}

/* Capa de brillo interactivo (foil) */
.card-coleccionable .card-foil {
  position: absolute; inset: 0;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-out;
  z-index: 2;
}
.card-coleccionable:hover .card-foil { opacity: 1; }

/* ── COMÚN ─────────────────────────────────────────────────── */
.card-comun {
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(148,163,184,.2);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.card-comun .card-foil {
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.06) 0%, transparent 60%);
}

/* ── RARO ──────────────────────────────────────────────────── */
.card-raro {
  background: linear-gradient(145deg, #1a1a3e 0%, #1e1b4b 100%);
  border: 1px solid rgba(99,102,241,.35);
  box-shadow: 0 4px 24px rgba(99,102,241,.2), 0 0 0 1px rgba(99,102,241,.1);
}
.card-raro .card-foil {
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(165,180,252,.18) 0%, transparent 55%);
}
.card-raro::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
}

/* ── ÉPICO ─────────────────────────────────────────────────── */
.card-epico {
  background: linear-gradient(145deg, #200A2E 0%, #2D1B4E 100%);
  border: 1px solid rgba(167,139,250,.4);
  box-shadow: 0 4px 28px rgba(167,139,250,.25), 0 0 0 1px rgba(167,139,250,.1);
}
.card-epico .card-foil {
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(196,181,253,.2) 0%, transparent 55%);
}
.card-epico::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #a78bfa, #c4b5fd, #a78bfa, transparent);
}

/* ── PLATA ─────────────────────────────────────────────────── */
.card-plata {
  background: linear-gradient(145deg, #1a1f2e 0%, #1e2535 40%, #1a1f2e 100%);
  border: 1px solid rgba(203,213,225,.35);
  box-shadow: 0 4px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.card-plata .card-foil {
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(226,232,240,.25) 0%, transparent 50%),
    linear-gradient(var(--angle,135deg), transparent 40%, rgba(203,213,225,.15) 50%, transparent 60%);
}
.card-plata::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #94a3b8, #e2e8f0, #94a3b8, transparent);
}

/* ── ORO ───────────────────────────────────────────────────── */
.card-oro {
  background: linear-gradient(145deg, #1a1500 0%, #1f1a00 40%, #1a1500 100%);
  border: 1px solid rgba(251,191,36,.45);
  box-shadow: 0 4px 32px rgba(251,191,36,.2), 0 0 60px rgba(251,191,36,.06), inset 0 1px 0 rgba(255,215,0,.12);
}
.card-oro .card-foil {
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(251,191,36,.3) 0%, transparent 50%),
    linear-gradient(var(--angle,135deg), transparent 35%, rgba(255,215,0,.2) 50%, transparent 65%);
}
.card-oro::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #b7791f, #fbbf24, #f59e0b, #fbbf24, #b7791f, transparent);
}
@keyframes goldShimmer {
  0%,100% { opacity: .6; transform: translateX(-100%) skewX(-15deg); }
  50%      { opacity: 1; }
  to       { transform: translateX(400%) skewX(-15deg); }
}
.card-oro::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,215,0,.18) 50%, transparent 60%);
  animation: goldShimmer 3.5s infinite;
  pointer-events: none; z-index: 1;
}

/* ── PLATINO ───────────────────────────────────────────────── */
.card-platino {
  background: linear-gradient(145deg, #05101a 0%, #0a1628 50%, #05101a 100%);
  border: 1px solid rgba(165,243,252,.4);
  box-shadow: 0 4px 36px rgba(165,243,252,.15), 0 0 80px rgba(6,182,212,.08), inset 0 1px 0 rgba(165,243,252,.12);
}
.card-platino .card-foil {
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(165,243,252,.3) 0%, transparent 50%),
    conic-gradient(from var(--angle,0deg) at 50% 50%,
      rgba(165,243,252,.1) 0deg,
      rgba(192,132,252,.1) 90deg,
      rgba(165,243,252,.1) 180deg,
      rgba(34,211,238,.1) 270deg,
      rgba(165,243,252,.1) 360deg
    );
}
.card-platino::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #0891b2, #a5f3fc, #22d3ee, #a5f3fc, #0891b2, transparent);
}
@keyframes platinoGlow {
  0%,100% { box-shadow: 0 4px 36px rgba(165,243,252,.15), 0 0 80px rgba(6,182,212,.08); }
  50%     { box-shadow: 0 4px 36px rgba(165,243,252,.3),  0 0 100px rgba(6,182,212,.15); }
}
.card-platino { animation: platinoGlow 3s ease-in-out infinite; }

/* ── DIAMANTE ──────────────────────────────────────────────── */
.card-diamante {
  background: #000;
  border: 1px solid rgba(224,242,254,.5);
  box-shadow:
    0 0 0 1px rgba(224,242,254,.15),
    0 4px 40px rgba(224,242,254,.2),
    0 0 100px rgba(186,230,253,.1),
    inset 0 0 40px rgba(224,242,254,.05);
}
.card-diamante .card-foil {
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35) 0%, transparent 45%),
    conic-gradient(from var(--angle,0deg) at 50% 50%,
      rgba(224,242,254,.15) 0deg,
      rgba(186,230,253,.25) 60deg,
      rgba(255,255,255,.15) 120deg,
      rgba(147,197,253,.2) 180deg,
      rgba(224,242,254,.25) 240deg,
      rgba(255,255,255,.15) 300deg,
      rgba(224,242,254,.15) 360deg
    );
}
.card-diamante::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #38bdf8, #ffffff, #bae6fd, #ffffff, #38bdf8, transparent);
}
@keyframes diamondSparks {
  0%,100% { opacity: 0; }
  50%     { opacity: 1; }
}
@keyframes diamondBorder {
  0%,100% {
    box-shadow: 0 0 0 1px rgba(224,242,254,.15), 0 4px 40px rgba(224,242,254,.2), 0 0 100px rgba(186,230,253,.1);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(224,242,254,.4), 0 4px 60px rgba(224,242,254,.4), 0 0 120px rgba(186,230,253,.2);
  }
}
.card-diamante { animation: diamondBorder 2s ease-in-out infinite; }

/* Partículas de destello en diamante */
.diamond-spark {
  position: absolute; width: 3px; height: 3px;
  border-radius: 50%; background: #fff;
  pointer-events: none; z-index: 3;
  animation: diamondSparks 1.5s ease-in-out infinite;
}

/* ── Texto de rareza en la carta ─────────────────────────── */
.card-rareza-label {
  font-size: 9px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; opacity: .6;
  margin-bottom: 8px;
}
.card-comun    .card-rareza-label { color: #94a3b8; }
.card-raro     .card-rareza-label { color: #a5b4fc; }
.card-epico    .card-rareza-label { color: #c4b5fd; }
.card-plata    .card-rareza-label { color: #e2e8f0; }
.card-oro      .card-rareza-label { color: #fbbf24; }
.card-platino  .card-rareza-label { color: #a5f3fc; }
.card-diamante .card-rareza-label { color: #e0f2fe; }

/* ── Botón "Añadir a colección" ──────────────────────────── */
.btn-collect {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px;
  border-radius: 12px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; letter-spacing: .3px;
  transition: all 0.2s ease; position: relative; overflow: hidden;
}
.btn-collect-comun   { background: rgba(148,163,184,.15); color: #cbd5e1; border: 1px solid rgba(148,163,184,.3); }
.btn-collect-raro    { background: rgba(99,102,241,.2);   color: #a5b4fc; border: 1px solid rgba(99,102,241,.4); }
.btn-collect-epico   { background: rgba(167,139,250,.2);  color: #c4b5fd; border: 1px solid rgba(167,139,250,.4); }
.btn-collect-plata   { background: rgba(226,232,240,.1);  color: #e2e8f0; border: 1px solid rgba(226,232,240,.3); }
.btn-collect-oro     { background: rgba(251,191,36,.15);  color: #fbbf24; border: 1px solid rgba(251,191,36,.4); }
.btn-collect-platino { background: rgba(165,243,252,.12); color: #a5f3fc; border: 1px solid rgba(165,243,252,.4); }
.btn-collect-diamante{ background: rgba(224,242,254,.1);  color: #e0f2fe; border: 1px solid rgba(224,242,254,.4); }
.btn-collect:hover   { transform: translateY(-2px); filter: brightness(1.15); }
.btn-collect:active  { transform: scale(.97); }

/* ── Animación de entrada a la sala ──────────────────────── */
@keyframes cardSlideUp {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(-20px) scale(0.92); opacity: 0; }
}
@keyframes salaFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.preview-card.sliding-out {
  animation: cardSlideUp 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* ── Tarjetón fijado en la sala (mini) ───────────────────── */
.sala-tarjeton {
  flex-shrink: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  animation: salaFadeIn 0.45s ease both;
}
.sala-tarjeton-inner {
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.sala-tarjeton-msg {
  font-size: clamp(17px, 4vw, 22px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.3;
  letter-spacing: -.3px;
  margin-bottom: 10px;
}
.sala-tarjeton-gif {
  max-height: 120px;
  border-radius: 8px;
  display: block;
  margin-top: 8px;
}
.sala-tarjeton-inner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
/* Variantes de color para el tarjetón en sala */
.sala-tarjeton-comun   { background: rgba(148,163,184,.06); border: 1px solid rgba(148,163,184,.12); }
.sala-tarjeton-raro    { background: rgba(99,102,241,.06);  border: 1px solid rgba(99,102,241,.2); }
.sala-tarjeton-epico   { background: rgba(167,139,250,.06); border: 1px solid rgba(167,139,250,.2); }
.sala-tarjeton-plata   { background: rgba(203,213,225,.06); border: 1px solid rgba(203,213,225,.2); }
.sala-tarjeton-oro     { background: rgba(251,191,36,.06);  border: 1px solid rgba(251,191,36,.2); }
.sala-tarjeton-platino { background: rgba(165,243,252,.06); border: 1px solid rgba(165,243,252,.2); }
.sala-tarjeton-diamante{ background: rgba(224,242,254,.04); border: 1px solid rgba(224,242,254,.2); }
.sala-tarjeton-inner.sala-tarjeton-oro::before { background: linear-gradient(90deg, transparent, #fbbf24, transparent); }
.sala-tarjeton-inner.sala-tarjeton-platino::before { background: linear-gradient(90deg, transparent, #a5f3fc, transparent); }
.sala-tarjeton-inner.sala-tarjeton-diamante::before { background: linear-gradient(90deg, transparent, #e0f2fe, transparent); }