/* Galería de sobres: un sobre por cada mundial/álbum */
.sobres-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.sobre-gallery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
  overflow: visible;
}

.sobre-gallery-card.active {
  filter: drop-shadow(0 10px 20px rgba(47, 168, 94, 0.25));
}

.sobre-gallery-card.active:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 16px 30px rgba(47, 168, 94, 0.35));
}

.sobre-gallery-card.locked {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.85);
}

.sobre-gallery-cover {
  width: 100%;
  height: 130px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(10, 26, 13, 0.9);
  border: 1px solid rgba(103, 244, 127, 0.14);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.sobre-gallery-card.locked .sobre-gallery-cover {
  opacity: 0.6;
}

.sobre-gallery-name {
  color: #f2fbef;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.sobre-gallery-card.locked .sobre-gallery-name {
  color: #9fb59a;
  text-decoration: line-through;
}

.sobre-gallery-count {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f59e0b;
  color: #1c1305;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.sobre-gallery-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 2;
}

/* Casilleros de figuritas del sobre (vista "sobres y figuritas") */
.sticker-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.sticker-slot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1c2e18;
  border: 2px solid var(--rarity-color, #16a34a);
  border-radius: 0;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease;
  aspect-ratio: 720 / 954;
  position: relative;
  overflow: hidden;
}

.sticker-slot-card:hover {
  transform: translateY(-3px);
}

.sticker-slot-card.has-photo {
  padding: 0;
  display: block;
}

.sticker-slot-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.sticker-slot-unique-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f59e0b;
  color: #1c1305;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Numerito en las figuritas del casillero de intercambio: cuántas
   repetidas de esa misma figurita tenés (en vez del "!" de las nuevas). */
.sticker-slot-repeat-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: #38bdf8;
  color: #06232f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Marca las figuritas del casillero de intercambio que ya están
   publicadas en el mercado — esas no cuentan para el canje por sobre
   hasta que se saquen de ahí. */
.sticker-slot-market-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0a1a0d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Fotos horizontales: casilleros donde la foto muestra a dos jugadores
   juntos (una sola imagen apaisada, no recortada a formato vertical). */
.sticker-slot-card.has-photo.landscape {
  aspect-ratio: 954 / 720;
}

.sticker-slot-card.landscape .sticker-slot-photo {
  object-fit: contain;
  background: transparent;
}

.sticker-slot-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rarity-color, #16a34a);
  color: #0d1a0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
}

.sticker-slot-name {
  color: #f2fbef;
  font-size: 13px;
  line-height: 1.2;
}

.sticker-slot-id {
  color: #9fd18f;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.sticker-slot-rarity {
  font-size: 10px;
  font-weight: 700;
  color: #0d1a0b;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Barra de estadísticas: progreso / pegadas / repetidas */
.packs-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.packs-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.7rem 0.5rem;
  border-radius: 16px;
  background: rgba(10, 26, 13, 0.95);
  border: 1px solid rgba(103, 244, 127, 0.16);
}

.packs-stat-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  color: #67f47f;
  font-weight: 700;
}

.packs-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Casillero de intercambio */
.exchange-binder {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.exchange-binder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.exchange-binder-title {
  color: #f2fbef;
  margin: 0;
}

.exchange-binder-hint {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0 0 14px;
}

/* Zona de canjes: convertir repetidas en sobres o en la figurita elegida */
.canje-zone {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.canje-zone-title {
  color: #f2fbef;
  margin: 0 0 4px;
}

.canje-zone-hint {
  color: var(--muted);
  font-size: 0.86rem;
  margin: 0 0 14px;
}

.canje-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.canje-seleccion-contador {
  color: #67f47f;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Circulito para elegir una figurita repetida para el canje. */
.sticker-slot-select-checkbox {
  position: absolute;
  bottom: 34px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(10, 26, 13, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

.sticker-slot-card.seleccionada-para-canje {
  outline: 3px solid #67f47f;
  outline-offset: -3px;
}

.sticker-slot-card.seleccionada-para-canje .sticker-slot-select-checkbox {
  background: #67f47f;
  border-color: #67f47f;
  color: #06170a;
}

.sticker-slot-select-checkbox.disabled {
  cursor: not-allowed;
  opacity: 0.75;
  background: rgba(10, 26, 13, 0.9);
  border-color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
}

/* Selector +/- de cantidad, para cuando hay más de 1 copia libre de
   la misma figurita (ver createStickerSlotCard). Ocupa el mismo
   lugar que el circulito simple de elegir/sacar. */
.sticker-slot-select-stepper {
  position: absolute;
  bottom: 34px;
  left: 6px;
  z-index: 3;
  display: flex;
  align-items: center;
}

.sticker-slot-select-stepper .sticker-slot-select-checkbox {
  position: static;
}

.sticker-slot-select-stepper.activo {
  gap: 3px;
  background: #67f47f;
  border-radius: 999px;
  padding: 2px;
}

.sticker-slot-stepper-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(6, 23, 10, 0.22);
  color: #06170a;
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.sticker-slot-stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sticker-slot-stepper-count {
  min-width: 18px;
  text-align: center;
  font-weight: 900;
  font-size: 12px;
  color: #06170a;
}

.canje-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 1.1rem 1rem;
  border-radius: 18px;
  background: rgba(10, 26, 13, 0.95);
  border: 1px solid rgba(103, 244, 127, 0.16);
}

.canje-card-ratio {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #f6ec5a;
  text-shadow: 0 0 14px rgba(246, 236, 90, 0.4);
}

.canje-card-body strong {
  display: block;
  color: #f4ffe9;
  font-size: 0.98rem;
  margin-bottom: 2px;
}

.canje-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.canje-select {
  width: 100%;
  margin-top: 8px;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(103, 244, 127, 0.2);
  background: rgba(15, 35, 18, 0.9);
  color: #e8ffe8;
  font-size: 0.85rem;
}

.canje-card button {
  width: 100%;
  margin-top: 4px;
  background: linear-gradient(90deg, #f6ec5a 0%, #d4af37 100%);
  color: #1c1305;
}

.canje-card button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* --- Etapa del sobre: brillo, rayos giratorios y el sobre clickeable --- */
.pack-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 1rem 0.5rem;
  text-align: center;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.pack-stage.hide {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.pack-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(246, 236, 90, 0.4) 24%, rgba(246, 236, 90, 0.14) 42%, transparent 68%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

.pack-rays {
  position: absolute;
  width: 560px;
  height: 560px;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(246, 236, 90, 0.28) 8deg 10deg, transparent 10deg 20deg, rgba(246, 236, 90, 0.16) 20deg 22deg, transparent 22deg 36deg, rgba(246, 236, 90, 0.22) 36deg 38deg, transparent 38deg 52deg, rgba(246, 236, 90, 0.14) 52deg 54deg, transparent 54deg 360deg);
  animation: spinRays 14s linear infinite;
  mask: radial-gradient(circle, transparent 18%, black 45%);
  -webkit-mask: radial-gradient(circle, transparent 18%, black 45%);
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

@keyframes spinRays {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.pack-card {
  position: relative;
  z-index: 2;
  width: min(220px, 70vw);
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 0 0 7px rgba(246, 236, 90, 0.35),
    0 20px 55px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(246, 236, 90, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pack-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    0 0 0 2px white,
    0 0 0 8px rgba(246, 236, 90, 0.5),
    0 26px 65px rgba(0, 0, 0, 0.5),
    0 0 75px rgba(246, 236, 90, 0.6);
}

.pack-card img {
  width: 100%;
  display: block;
}

.pack-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: packShine 2.6s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

@keyframes packShine {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

.pack-card.shake {
  animation: packShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes packShake {
  10%, 90% { transform: translate3d(-2px, 0, 0) rotate(-1deg); }
  20%, 80% { transform: translate3d(4px, 0, 0) rotate(1.5deg); }
  30%, 50%, 70% { transform: translate3d(-8px, 0, 0) rotate(-2deg); }
  40%, 60% { transform: translate3d(8px, 0, 0) rotate(2deg); }
}

.explode-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.pack-flash {
  position: absolute;
  width: 200vmax;
  height: 200vmax;
  background: radial-gradient(circle, white 0%, rgba(255, 255, 255, 0.9) 15%, rgba(255, 240, 150, 0.6) 35%, transparent 70%);
  animation: flashPop 0.7s ease-out forwards;
}

@keyframes flashPop {
  0% { transform: scale(0); opacity: 1; }
  30% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.confetti-bit {
  position: absolute;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  animation: confettiFall 1.1s ease-out forwards;
}

@keyframes confettiFall {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.8); opacity: 0; }
}

.pack-open-cta {
  position: relative;
  z-index: 3;
  margin-top: 1.7rem;
}

.pack-open-cta .open-btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: #10230d;
  background: linear-gradient(180deg, #ffffff 0%, #eaffea 100%);
  border: 0;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pack-open-cta .open-btn:hover {
  transform: translateY(-2px) scale(1.03);
}

.pack-open-cta .hint {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

/* --- Etapa de revelado: figuritas en cuadrícula que se dan vuelta --- */
.reveal-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cards-grid {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 360px;
  margin: 0 auto;
  padding: 0.4rem;
}

/* Fila que envuelve el mazo con una flecha a cada lado para pasar
   a la figurita siguiente/anterior sin tener que ir tocando el mazo. */
.cards-stage-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.card-nav-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #f2fbef;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.card-nav-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  box-shadow: none;
}

.card-nav-btn:active {
  transform: translateY(0) scale(0.94);
}

@media (max-width: 480px) {
  .card-nav-btn { width: 36px; height: 36px; font-size: 18px; }
}

.card-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;
  aspect-ratio: 720 / 954;
  perspective: 1000px;
  opacity: 0;
  --pile: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px));
  transform: var(--pile) translateY(60px) scale(0.6) rotate(var(--rot));
  animation: cardPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Figuritas de doble jugador (una sola foto apaisada con dos personas):
   el casillero completo se vuelve horizontal (más ancho, menos alto) en
   vez de forzar el formato vertical de siempre, así la foto no queda
   con franjas negras arriba y abajo. Como .card-back y .card-front son
   caras de la misma caja (.card-slot), este cambio de tamaño afecta a
   las dos por igual: tanto el frente con la foto como el reverso con
   el logo quedan con la proporción horizontal correcta. */
.card-slot.landscape {
  width: 300px;
  aspect-ratio: 954 / 720;
}

@keyframes cardPop {
  0% { opacity: 0; transform: var(--pile) translateY(90px) scale(0.45) rotate(var(--rot)); }
  60% { opacity: 1; transform: var(--pile) translateY(-10px) scale(1.08) rotate(var(--rot)); }
  100% { opacity: 1; transform: var(--pile) translateY(0) scale(1) rotate(var(--rot)); }
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: grab;
  touch-action: none;
  transform: rotateX(var(--drag-x, 0deg)) rotateY(calc(var(--flip-rotate, 0deg) + var(--drag-y, 0deg)));
}

.card-inner.flipped {
  --flip-rotate: 180deg;
}

/* Mientras se arrastra, que siga al dedo/mouse sin el delay de la
   animación (esa transición de 0.7s es para la vuelta automática, acá
   necesitamos que responda al toque). Al soltar, vuelve suave a 0. */
.card-inner.dragging {
  transition: none;
  cursor: grabbing;
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--glow), 0 10px 26px rgba(0, 0, 0, 0.4);
}

.card-back {
  background-image: url('figuritasatras.png');
  background-size: cover;
  background-position: center;
  background-color: #0d1c0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotateY(0deg);
  border: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

.card-back.card-back-landscape {
  background-image: url('figuritasatrasH.png');
}

.card-front {
  transform: rotateY(180deg);
  background: var(--bottom);
  border: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

/* La foto va sola, sin marco de color: nada de resplandor ni animación
   encima de la imagen. */

.card-photo-full {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--top);
}

.card-photo-full img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0d1c0a;
}

.card-photo-full.landscape img {
  object-fit: contain;
  background: #0d1c0a;
}

.card-photo-full .avatar-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  text-align: center;
}

.card-photo-full .avatar {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  color: #10230d;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.card-photo-full .avatar-fallback-caption {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  line-height: 1.25;
}

.card-zoom-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
}

.reveal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.4rem;
}

.reset-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: white;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}

.reset-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.hint {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

@media (max-width: 480px) {
  .pack-card { width: min(170px, 68vw); }
  .pack-glow { width: 300px; height: 300px; }
  .pack-rays { width: 440px; height: 440px; }
  .cards-grid { gap: 10px; max-width: 300px; height: 300px; }
  .card-slot { width: 172px; aspect-ratio: 720 / 954; }
  .card-slot.landscape { width: 250px; aspect-ratio: 954 / 720; }
  .card-photo .avatar { font-size: 26px; }
}


/* Modal de zoom de figurita */
.sticker-zoom-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.sticker-zoom-modal.hidden {
  display: none;
}

.sticker-zoom-modal:not(.hidden) {
  animation: zoomBackdropIn 0.25s ease;
}

@keyframes zoomBackdropIn {
  from { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); }
  to { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(3px); }
}

.sticker-zoom-content {
  position: relative;
  background: #172813;
  border-radius: 18px;
  padding: 32px 28px;
  width: 94%;
  max-width: min(94vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.sticker-zoom-modal:not(.hidden) .sticker-zoom-content {
  animation: zoomModalIn 0.4s cubic-bezier(0.2, 0.85, 0.3, 1.25);
}

@keyframes zoomModalIn {
  0% { transform: scale(0.2); opacity: 0; }
  65% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.sticker-zoom-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: #f2fbef;
  font-size: 18px;
  cursor: pointer;
}

.sticker-zoom-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.sticker-zoom-avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: var(--rarity-color, #16a34a);
  background-repeat: no-repeat;
  color: #0d1a0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 36px;
  background-size: cover;
  background-position: center;
  transition: width 0.15s ease, height 0.15s ease, border-radius 0.15s ease, transform 0.12s ease-out;
  transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  /* Sin esto, en el celular el navegador toma el arrastre del dedo
     sobre la figurita como un gesto de scroll de toda la página, y
     se termina moviendo la tarjeta entera en vez de solo la foto. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.sticker-zoom-avatar.has-photo {
  width: min(78vw, 460px);
  height: min(72vh, 640px);
  border-radius: 0;
  border: 3px solid var(--rarity-color, #16a34a);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
  background-size: contain;
  background-color: #0d1c0a;
  position: relative;
  overflow: hidden;
}

/* Flota suavemente todo el tiempo (el envoltorio, no la foto en sí,
   para no pisar la inclinación 3D que va en la foto). */
.sticker-zoom-avatar-wrap {
  position: relative;
  display: inline-flex;
  animation: stickerFloat 3.6s ease-in-out infinite;
}
.sticker-zoom-avatar-wrap[data-rarity="epic"] {
  animation-name: stickerFloatMed;
  animation-duration: 3.1s;
}
.sticker-zoom-avatar-wrap[data-rarity="legendary"] {
  animation-name: stickerFloatMed;
  animation-duration: 2.7s;
}
.sticker-zoom-avatar-wrap[data-rarity="mythic"] {
  animation-name: stickerFloatStrong;
  animation-duration: 2.3s;
}

@keyframes stickerFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes stickerFloatMed {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-13px); }
}
@keyframes stickerFloatStrong {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-17px) rotate(1deg); }
}

/* Brillo tipo carta holográfica, recorriendo la foto de lado a lado.
   El punto por donde pasa (--shine-x) lo actualiza el JS según hacia
   dónde apunta el mouse/dedo; si no se tocó nada, queda centrado. */
.sticker-zoom-avatar.has-photo::after {
  content: '';
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.32) var(--shine-x, 50%),
    transparent 60%
  );
  transform: translateX(-100%);
  animation: stickerShineSweep 3.4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.sticker-zoom-avatar[data-rarity="rare"].has-photo::after {
  animation-duration: 3s;
}
.sticker-zoom-avatar[data-rarity="epic"].has-photo::after {
  animation-duration: 2.5s;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.4) var(--shine-x, 50%),
    transparent 65%
  );
}
.sticker-zoom-avatar[data-rarity="legendary"].has-photo::after {
  animation-duration: 2s;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 224, 145, 0.5) var(--shine-x, 50%),
    transparent 70%
  );
}
.sticker-zoom-avatar[data-rarity="mythic"].has-photo::after {
  animation-duration: 1.6s;
  background: linear-gradient(
    115deg,
    transparent 22%,
    rgba(216, 180, 254, 0.55) calc(var(--shine-x, 50%) - 8%),
    rgba(255, 255, 255, 0.6) var(--shine-x, 50%),
    rgba(216, 180, 254, 0.55) calc(var(--shine-x, 50%) + 8%),
    transparent 78%
  );
}
@keyframes stickerShineSweep {
  0%, 12% { transform: translateX(-100%); }
  55%, 65% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* A alguien que no puede mover el mouse (o prefiere menos movimiento
   en pantalla) no le imponemos las animaciones continuas. */
@media (prefers-reduced-motion: reduce) {
  .sticker-zoom-avatar-wrap,
  .sticker-zoom-avatar-wrap[data-rarity="epic"],
  .sticker-zoom-avatar-wrap[data-rarity="legendary"],
  .sticker-zoom-avatar-wrap[data-rarity="mythic"] {
    animation: none;
  }
  .sticker-zoom-avatar.has-photo::after {
    animation: none;
    display: none;
  }
  .sticker-zoom-avatar {
    transition: none;
  }
}

.sticker-zoom-avatar.has-photo.landscape {
  width: min(90vw, 640px);
  height: min(58vh, 440px);
  background-color: #0d1c0a;
}

.sticker-zoom-name {
  color: #f2fbef;
  font-size: 20px;
}

.sticker-zoom-id {
  color: #9fd18f;
  font-size: 13px;
}

.sticker-zoom-tags {
  display: flex;
  gap: 8px;
}

.sticker-zoom-type {
  background: #2c3d26;
  color: #f2fbef;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
}

.sticker-zoom-rarity {
  color: #0d1a0b;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.sticker-zoom-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.sticker-zoom-actions button {
  width: 100%;
}

.sticker-zoom-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .sticker-slot-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
  .sticker-slot-avatar { width: 40px; height: 40px; font-size: 13px; }

  .sticker-zoom-content { padding: 20px 14px; max-width: 96vw; gap: 14px; }
  .sticker-zoom-avatar { width: 100px; height: 100px; font-size: 28px; }
  .sticker-zoom-avatar.has-photo { width: min(80vw, 320px); height: min(64vh, 420px); }
  .sticker-zoom-avatar.has-photo.landscape { width: min(92vw, 380px); height: min(46vh, 280px); }
  .sticker-zoom-name { font-size: 17px; }
}

/* ---- Botón "Publicar" en cada repetida (mercado entre usuarios) ---- */
.sticker-slot-publish-btn {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 3;
  padding: 4px 6px;
  border-radius: 10px;
  border: none;
  background: rgba(15, 35, 18, 0.92);
  color: #67f47f;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.sticker-slot-publish-btn:hover {
  background: rgba(103, 244, 127, 0.9);
  color: #0d1a0b;
}

.sticker-slot-publish-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Mercado entre usuarios ---- */
.mercado-p2p {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.mercado-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.mercado-tab {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(103, 244, 127, 0.2);
  background: rgba(10, 26, 13, 0.7);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mercado-tab.active {
  background: rgba(103, 244, 127, 0.16);
  color: #67f47f;
  border-color: rgba(103, 244, 127, 0.5);
}

.mercado-badge {
  background: #f6ec5a;
  color: #1c1305;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mercado-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.mercado-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 1rem 0.8rem;
  border-radius: 18px;
  background: rgba(10, 26, 13, 0.95);
  border: 1px solid rgba(103, 244, 127, 0.16);
  text-align: center;
}

/* Apilados uno debajo del otro (no lado a lado): así cada botón
   siempre tiene el ancho completo de la tarjeta para su texto, sin
   importar cuántas columnas entren en la grilla de arriba. */
.favorito-selector-botones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.favorito-selector-botones .button-small {
  width: 100%;
  white-space: nowrap;
}

.favorito-selector-botones .button-primary {
  width: 100%;
  margin-top: 0;
}

.mercado-card-autor {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.mercado-card button {
  width: 100%;
}

.mercado-mini-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  position: relative;
}

.mercado-mini-sticker-photo {
  width: 72px;
  height: 96px;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid var(--rarity-color, #16a34a);
  background: #1c2e18;
}

/* Foto compartida entre 2 jugadores (o de alineación): es horizontal,
   así que necesita un marco apaisado, no el vertical de siempre —
   si no, queda achicada/recortada rara adentro de un rectángulo
   angosto que no tiene nada que ver con la forma real de la imagen. */
.mercado-mini-sticker-photo.landscape {
  width: 96px;
  height: 72px;
}

.mercado-mini-sticker-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rarity-color, #16a34a);
  color: #0d1a0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

.mercado-mini-sticker-name {
  color: #f2fbef;
  font-size: 0.76rem;
  line-height: 1.2;
}

/* ---- Tarjeta de una propuesta recibida ---- */
.mercado-borrar-historial-btn {
  display: block;
  margin: 0 0 12px auto;
  width: auto;
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.mercado-borrar-una-btn {
  display: block;
  margin: 10px 0 0 auto;
  width: auto;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.mercado-solicitud-card {
  padding: 1rem;
  border-radius: 18px;
  background: rgba(10, 26, 13, 0.95);
  border: 1px solid rgba(103, 244, 127, 0.16);
  margin-bottom: 14px;
}

.mercado-swap-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px 0 14px;
}

.mercado-swap-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  max-width: 130px;
}

.mercado-swap-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.mercado-swap-arrow {
  font-size: 1.4rem;
  color: #67f47f;
}

.mercado-solicitud-botones {
  display: flex;
  gap: 10px;
}

.mercado-solicitud-botones button {
  flex: 1;
}

/* ---- Modal selector: elegir qué repetida ofrecer ---- */
.selector-propuesta-content {
  max-width: 640px;
  width: 100%;
}

.selector-propuesta-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0.75rem 0;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(103, 244, 127, 0.25);
  background: rgba(10, 26, 13, 0.9);
  color: #f2fbef;
  font-family: inherit;
  font-size: 0.9rem;
}

.selector-propuesta-search::placeholder {
  color: var(--muted);
}

/* Lista de filas compactas: mucho más rápida de escanear que tarjetas
   grandes apiladas cuando hay varias repetidas para elegir. */
.selector-propuesta-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 2px;
}

.selector-propuesta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(10, 26, 13, 0.95);
  border: 1px solid rgba(103, 244, 127, 0.16);
  text-align: left;
}

.selector-propuesta-item-photowrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
}

.selector-propuesta-item-photowrap.clickable {
  cursor: pointer;
}

.selector-propuesta-item-photowrap.clickable:active {
  transform: scale(0.94);
}

.selector-propuesta-item-photo {
  width: 42px;
  height: 56px;
  object-fit: contain;
  border-radius: 6px;
  border: 2px solid var(--rarity-color, #16a34a);
  background: #1c2e18;
  flex-shrink: 0;
}

/* Mismo motivo que en .mercado-mini-sticker-photo.landscape: esta es
   la miniatura usada en las filas del mercado ("Piden", "Mis
   ofertas", el selector de qué ofrecer, etc.) — también necesita el
   marco apaisado para las fotos compartidas/de alineación. */
.selector-propuesta-item-photo.landscape {
  width: 56px;
  height: 42px;
}

.selector-propuesta-item-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rarity-color, #16a34a);
  color: #0d1a0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}

.selector-propuesta-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.selector-propuesta-item-name {
  color: #f2fbef;
  font-size: 0.85rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selector-propuesta-item-code {
  color: var(--muted);
  font-size: 0.7rem;
}

.selector-propuesta-item button {
  flex-shrink: 0;
  width: auto;
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
}

/* ---- Resultados de "Lo que busco" (buscar dentro de un país): con
   planteles enteros (26+ jugadores) la lista de filas de arriba
   quedaba clavada en una sola columna, larguísima en vertical, re
   antiestética. Acá abajo la convertimos en tarjetas de 2 columnas
   SOLO para este listado puntual — el resto de usos compartidos de
   .selector-propuesta-list (mercado, "Piden", el selector de qué
   ofrecer, etc.) no se tocan y siguen siendo filas horizontales. ---- */
#lo-que-busco-buscar-resultados.selector-propuesta-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-content: start;
  max-height: 50vh;
}

/* La foto+nombre quedan en la primera línea (igual que la fila
   original, solo que angosta) y el botón pasa a una segunda línea
   ocupando todo el ancho de la tarjeta — así no se aprieta como pasó
   con los botones del selector de favorita. */
#lo-que-busco-buscar-resultados .selector-propuesta-item {
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 8px;
}

#lo-que-busco-buscar-resultados .selector-propuesta-item-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.15;
}

#lo-que-busco-buscar-resultados .selector-propuesta-item button {
  flex-basis: 100%;
  width: 100%;
}

/* ---- Cartelito de "te falta" (naranja) / "ya la tenés" (celeste) en
   el mercado — cubre tanto si la tenés pegada como si te sobran
   copias, no distingue entre esos dos casos. ---- */
.posesion-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  border: 2px solid #0a1a0d;
  z-index: 2;
}

.posesion-badge-falta {
  background: #f59e0b;
  color: #241804;
}

.posesion-badge-repetida {
  background: #38bdf8;
  color: #04202c;
}

.posesion-badge-repetida::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- Cartelito "🤝 Amigo": marca en el mercado, "Piden" y tus
   propuestas cuando la otra persona ya es tu amigo — distinto del
   resto de usuarios, como pidió el usuario. ---- */
.amigo-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(246, 236, 90, 0.18);
  color: #f6ec5a;
  border: 1px solid rgba(246, 236, 90, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
  width: fit-content;
}

/* ---- Cartelito verde "✓ Le falta": en el paso 2 de "Proponer
   intercambio" (elegir cuál de mis repetidas ofrecer), marca cuáles
   de esas figuritas mi amigo todavía no tiene pegadas — para saber de
   un vistazo cuáles le sirven de verdad. ---- */
.posesion-badge-le-sirve {
  background: #22c55e;
  color: #04240d;
}

.le-falta-badge {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.4);
}

.selector-propuesta-item-le-falta {
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.08);
  border-radius: 10px;
}

/* ============================================================
   Vista "mazo": mostrar las figuritas de a una, deslizando, en vez
   de la grilla de casillero. Se usa en "Todas mis figuritas" y en
   el Mercado.
   ============================================================ */

.view-mode-toggle {
  background: rgba(10, 26, 13, 0.9);
  border: 1px solid rgba(103, 244, 127, 0.3);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mazo-container.hidden {
  display: none;
}

.mazo-container {
  padding-top: 2rem;
}

.mazo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.5rem 0;
}

.mazo-header {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f2fbef;
  font-size: 0.9rem;
  white-space: nowrap;
}

.mazo-header span {
  background: rgba(103, 244, 127, 0.16);
  color: #67f47f;
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 0.78rem;
}

.mazo-stage {
  position: relative;
  width: min(66vw, 260px);
  aspect-ratio: 720 / 954;
  height: auto;
  margin-top: 1.6rem;
  transition: width 0.2s ease;
}

/* Cuando la figurita actual es horizontal (dos jugadores), todo el
   "escenario" pasa a horizontal — así las cartas de atrás (las que
   se ven "espiando" detrás, de fondo) también quedan con la forma
   correcta, en vez de dejar ver un recuadro vertical de más
   alrededor de la foto apaisada. */
.mazo-stage.mazo-stage-landscape {
  width: min(88vw, 340px);
  aspect-ratio: 954 / 720;
}

.mazo-card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.mazo-card-peek {
  background: #1c2e18;
  border: 2px solid rgba(103, 244, 127, 0.18);
  z-index: 1;
}

.mazo-card-peek-1 {
  transform: translate(10px, 10px) scale(0.97);
  z-index: 2;
  opacity: 0.75;
}

.mazo-card-peek-2 {
  transform: translate(20px, 20px) scale(0.94);
  z-index: 1;
  opacity: 0.5;
}

.mazo-card-active {
  z-index: 3;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mazo-card-active.dragging {
  cursor: grabbing;
}

/* La caja se ajusta a la forma real de cada figurita en vez de
   forzar siempre el mismo rectángulo vertical: las normales (un
   jugador) usan la altura completa del mazo, y las "apaisadas" (dos
   jugadores, foto horizontal) usan el ancho completo — así la caja
   siempre termina siendo del mismo tamaño que la imagen, sin fondo
   de sobra alrededor. Como ahora .mazo-stage también cambia de forma
   según corresponda, esto ya no deja ver ningún recuadro de más. */
.mazo-card-active .sticker-slot-card,
.mazo-card-active .mazo-mercado-card {
  aspect-ratio: 720 / 954;
  height: 100%;
  width: auto;
  max-width: 100%;
}

.mazo-card-active .sticker-slot-card.landscape {
  aspect-ratio: 954 / 720;
  width: 100%;
  height: auto;
  max-height: 100%;
}

.mazo-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(103, 244, 127, 0.14);
  color: #67f47f;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mazo-arrow:hover {
  background: rgba(103, 244, 127, 0.28);
}

/* Carta del mazo en el Mercado: foto arriba + nombre/autor + botón,
   todo dentro de una sola tarjeta más grande. */
.mazo-mercado-card {
  display: flex;
  flex-direction: column;
  background: #1c2e18;
  border: 2px solid var(--rarity-color, #16a34a);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.mazo-mercado-card .sticker-slot-photo {
  position: relative;
  flex: 1;
  min-height: 0;
}

.mazo-mercado-card .sticker-slot-avatar {
  flex: 1;
  width: 100%;
  border-radius: 0;
  font-size: 42px;
}

.mazo-mercado-info {
  padding: 10px 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mazo-mercado-info strong {
  color: #f2fbef;
  font-size: 0.9rem;
}

.mazo-mercado-info span {
  color: var(--muted);
  font-size: 0.72rem;
}

.mazo-mercado-card button {
  margin: 0 12px 12px;
}

@media (max-width: 480px) {
  .mazo-stage { width: min(72vw, 220px); }
  .mazo-stage.mazo-stage-landscape { width: min(92vw, 300px); }
}

/* ---- Filtro por rareza ---- */
.filtro-rareza-container {
  margin-bottom: 12px;
}

.filtro-rareza {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.filtro-rareza-btn {
  flex-shrink: 0;
  background: rgba(10, 26, 13, 0.85);
  border: 1px solid rgba(103, 244, 127, 0.2);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.filtro-rareza-btn[style*="--rarity-color"] {
  border-color: color-mix(in srgb, var(--rarity-color) 45%, transparent);
}

.filtro-rareza-btn.active {
  background: var(--rarity-color, #16a34a);
  color: #06170a;
  border-color: transparent;
}

/* ---- Etiqueta de estado de una propuesta que vos mandaste ---- */
.estado-propuesta-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
}

.estado-propuesta-badge.estado-pendiente {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}

.estado-propuesta-badge.estado-aceptada {
  background: rgba(34, 197, 94, 0.18);
  color: #67f47f;
}

.estado-propuesta-badge.estado-rechazada {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
}

/* ---- Festejo al conseguir una legendaria/divina por primera vez ---- */
.festejo-rareza-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.festejo-rareza-overlay.hidden {
  display: none;
}

.festejo-rareza-overlay.mostrando {
  opacity: 1;
}

.festejo-rareza-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.festejo-rareza-bit {
  position: absolute;
  top: -5%;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  animation-name: festejoConfettiFall;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
}

@keyframes festejoConfettiFall {
  0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
  100% { transform: translateY(115vh) rotate(720deg) translateX(70px); opacity: 0; }
}

.festejo-rareza-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.2, 0.85, 0.3, 1.4), opacity 0.4s ease;
}

.festejo-rareza-overlay.mostrando .festejo-rareza-texto {
  transform: scale(1);
  opacity: 1;
}

.festejo-rareza-tier {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px currentColor, 0 4px 18px rgba(0, 0, 0, 0.6);
  animation: festejoPulso 1.1s ease-in-out infinite;
}

@keyframes festejoPulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.festejo-rareza-nombre {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* ---- Canjear código de regalo (Perfil) ---- */
.codigo-regalo-card {
  margin-top: 1rem;
}

.codigo-regalo-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.codigo-regalo-row input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(103, 244, 127, 0.25);
  background: rgba(10, 26, 13, 0.9);
  color: #e8ffe8;
  font-size: 0.9rem;
}

.codigo-regalo-row input:focus {
  outline: none;
  border-color: rgba(103, 244, 127, 0.6);
}

.codigo-regalo-row .button-small {
  flex-shrink: 0;
}

/* ---- Amigos, solicitudes y ranking ---- */
.friends-card,
.ranking-card {
  margin-top: 1rem;
}

.friends-title {
  color: #f2fbef;
  margin: 0 0 4px;
}

.friends-hint {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 0 0 12px;
}

.friends-subtitle {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 14px 0 6px;
}

.friends-subtitle:first-child {
  margin-top: 0;
}

.friends-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.friends-tab {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(103, 244, 127, 0.2);
  background: rgba(10, 26, 13, 0.7);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
}

.friends-tab.active {
  background: rgba(103, 244, 127, 0.16);
  color: #67f47f;
  border-color: rgba(103, 244, 127, 0.5);
}

.friends-tab-panel.hidden {
  display: none;
}

.friends-search-row {
  margin-bottom: 12px;
}

.friends-search-row input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(103, 244, 127, 0.25);
  background: rgba(10, 26, 13, 0.9);
  color: #e8ffe8;
  font-size: 0.9rem;
}

.friends-search-row input:focus {
  outline: none;
  border-color: rgba(103, 244, 127, 0.6);
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.friends-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(10, 26, 13, 0.85);
  border: 1px solid rgba(103, 244, 127, 0.12);
}

.friends-item-posicion {
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  color: #67f47f;
  font-size: 0.82rem;
}

.friends-item-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  border: none;
  padding: 0;
  cursor: pointer;
}

.friends-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.friends-item-info strong {
  color: #f2fbef;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friends-item-info span {
  color: var(--muted);
  font-size: 0.74rem;
}

.friends-item-actions {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
}

.friends-item-actions button {
  width: auto;
  padding: 0.4rem 0.8rem;
  font-size: 0.76rem;
  white-space: nowrap;
}

/* ---- Perfil público de otro usuario ---- */
.perfil-usuario-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  max-height: 85vh;
  overflow-y: auto;
}

.perfil-usuario-seccion {
  width: 100%;
  text-align: left;
}

.perfil-usuario-avatar {
  width: 80px;
  height: 80px;
  font-size: 2rem;
  margin-bottom: 6px;
  cursor: default;
}

.perfil-usuario-meta {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 0;
}

#perfil-usuario-favoritas {
  margin: 14px 0;
}

#perfil-usuario-accion-btn {
  margin-top: 10px;
  width: 100%;
}

/* ---- "Lo que busco" ---- */
.lo-que-busco-card {
  padding: 1rem;
  border-radius: 16px;
  background: rgba(10, 26, 13, 0.7);
  border: 1px solid rgba(103, 244, 127, 0.14);
  margin-bottom: 18px;
}

#lo-que-busco-lista {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
}

#lo-que-busco-lista .empty-state {
  width: 100%;
}

.lo-que-busco-mini {
  position: relative;
  width: auto;
  flex: 0 0 auto;
}

.lo-que-busco-quitar-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 2px solid #0a1a0d;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

#lo-que-busco-agregar-btn {
  width: auto;
}

#lo-que-busco-agregar-btn.hidden {
  display: none;
}

/* ---- Paso 1 del modal "Lo que busco": elegir país ---- */
.lo-que-busco-paises-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 2px;
}

.lo-que-busco-pais-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(10, 26, 13, 0.8);
  border: 1px solid rgba(103, 244, 127, 0.14);
  cursor: pointer;
}

.lo-que-busco-pais-btn:hover {
  border-color: rgba(103, 244, 127, 0.5);
}

.lo-que-busco-pais-btn img {
  width: 36px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
}

.lo-que-busco-pais-btn span {
  font-size: 0.66rem;
  color: #e8ffe8;
  text-align: center;
  line-height: 1.15;
}

/* ---- Paso 0 (nuevo): elegir álbum, antes de elegir país. Reusa
   .lo-que-busco-pais-btn como base (mismo look) pero la tapa del
   sobre es una imagen vertical, no una banderita apaisada — necesita
   su propio tamaño de imagen y casilleros más anchos. ---- */
#lo-que-busco-albumes-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.lo-que-busco-album-btn img {
  width: 100%;
  max-width: 90px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
}

.lo-que-busco-album-btn span {
  font-size: 0.72rem;
  font-weight: 700;
}

#lo-que-busco-paso-lista.hidden,
#lo-que-busco-paso-paises.hidden,
#lo-que-busco-paso-albumes.hidden {
  display: none;
}

#lo-que-busco-volver-btn,
#lo-que-busco-volver-albumes-btn {
  text-align: left;
  margin: 0 0 10px;
}

/* ============================================================
   Ranking: un solo selector arriba de la lista, en vez de una
   tarjeta fija por álbum.
   ============================================================ */
.ranking-selector-row {
  margin-bottom: 10px;
}

#ranking-album-select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(103, 244, 127, 0.3);
  background: rgba(10, 26, 13, 0.9);
  color: #e8ffe8;
  font-size: 0.9rem;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #67f47f 50%), linear-gradient(135deg, #67f47f 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1.1em), calc(100% - 15px) calc(1.1em);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

#ranking-album-select:focus {
  outline: none;
  border-color: rgba(103, 244, 127, 0.65);
}

/* ============================================================
   Chat con amigos: mensajes libres + intercambios directos.
   ============================================================ */
.chat-amigo-content,
.chat-intercambio-content {
  width: 94%;
  max-width: min(94vw, 480px);
  max-height: 88vh;
}

.chat-amigo-content {
  padding: 24px 18px 16px;
}

.chat-amigo-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(103, 244, 127, 0.16);
}

.chat-amigo-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 22px;
}

.chat-amigo-header-info {
  min-width: 0;
  text-align: left;
}

.chat-amigo-header-info h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #f2fbef;
}

.chat-amigo-racha {
  margin: 2px 0 0;
  font-size: 0.76rem;
  color: #bfd9b5;
}

.chat-amigo-mensajes {
  width: 100%;
  flex: 1;
  min-height: 240px;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 2px;
}

.chat-burbuja {
  max-width: 82%;
  padding: 0.55rem 0.8rem;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.35;
  word-break: break-word;
  white-space: pre-wrap;
}

.chat-burbuja-mia {
  align-self: flex-end;
  background: linear-gradient(90deg, #82ffad 0%, #2fa85e 100%);
  color: #08160f;
  border-bottom-right-radius: 4px;
}

.chat-burbuja-amigo {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  color: #eafff0;
  border-bottom-left-radius: 4px;
}

.chat-burbuja-sistema {
  align-self: center;
  background: transparent;
  color: #9fb99a;
  font-size: 0.76rem;
  text-align: center;
  max-width: 100%;
  padding: 0.2rem 0.6rem;
}

.chat-burbuja-intercambio {
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(246, 236, 90, 0.35);
  background: rgba(12, 31, 15, 0.92);
  color: #f2fbef;
}

.chat-burbuja-intercambio.chat-burbuja-mia,
.chat-burbuja-intercambio.chat-burbuja-amigo {
  background: rgba(12, 31, 15, 0.92);
  color: #f2fbef;
}

.chat-intercambio-titulo {
  margin: 0;
  font-weight: 700;
  font-size: 0.85rem;
}

.chat-intercambio-estado {
  margin: 0;
  font-size: 0.76rem;
  color: #bfd9b5;
}

.chat-intercambio-acciones {
  display: flex;
  gap: 8px;
}

.chat-intercambio-acciones button {
  flex: 1;
  margin: 0;
  padding: 0.5rem 0.6rem;
  font-size: 0.8rem;
}

.chat-amigo-acciones {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 2px;
}

.chat-amigo-acciones button {
  margin: 0;
  width: auto;
}

.chat-amigo-borrar-btn {
  background: rgba(90, 18, 18, 0.55);
  border-color: rgba(255, 140, 140, 0.35);
  color: #ffdada;
}

.chat-amigo-form {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
}

.chat-amigo-form input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(103, 244, 127, 0.25);
  background: rgba(10, 26, 13, 0.9);
  color: #e8ffe8;
  font-size: 0.9rem;
}

.chat-amigo-form input:focus {
  outline: none;
  border-color: rgba(103, 244, 127, 0.6);
}

.chat-amigo-form button {
  margin: 0;
  width: auto;
  flex-shrink: 0;
  padding: 0.65rem 1.1rem;
}

.chat-intercambio-content {
  padding: 26px 18px;
}

#chat-intercambio-lista {
  width: 100%;
  max-height: 56vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .chat-amigo-mensajes { max-height: 42vh; }
}