:root {
  --bg-1: #041e08;
  --bg-2: #08290f;
  --accent-1: #4ade80;
  --accent-2: #1da84e;
  --accent-3: #240bfd;
  --accent-4: #f6ec5a;
  --surface: rgba(12, 35, 18, 0.88);
  --surface-strong: rgba(10, 25, 15, 0.95);
  --border: rgba(118, 255, 145, 0.16);
  --muted: #e2dfdf;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #f3f3f3;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Ninguna imagen se desborda de su contenedor, sin importar el ancho de
   pantalla; las reglas más específicas (con clase) siguen mandando por
   encima de esta, así que no rompe ningún tamaño ya definido a propósito. */
img {
  max-width: 100%;
  height: auto;
}

/* Regla genérica de ocultamiento: la usan reveal-stage, pack-open-cta,
   reveal-actions, etc. Sin esto esos bloques quedan siempre visibles
   (aunque vacíos) y descuadran todo el layout del modal de sobres. */
.hidden {
  display: none !important;
}

html, body {
  min-height: 100%;
  min-height: 100dvh;
  background-color: var(--bg-1);
  /* OJO: antes acá había "overscroll-behavior-y: none" para evitar el
     rebote/pull-to-refresh. Se sacó porque en algunos navegadores de
     celular (sobre todo cuando la app está agregada a la pantalla de
     inicio como ícono) esa propiedad tiene bugs conocidos que en vez
     de sacar solo el rebote, terminan bloqueando el scroll entero de
     la página. No vale la pena el riesgo por algo puramente estético. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100vw;
}

body {
  margin: 0;
  background-color: var(--bg-1);
  color: inherit;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fondo de pantalla fijo.
   OJO: antes esto estaba puesto directo en "body" con
   background-attachment: fixed. En varios celus (sobre todo iOS
   Safari) ese modo "fixed" se recalcula cada vez que la barra de
   direcciones aparece/desaparece al hacer scroll, y el fondo se ve
   "saltar" o moverse solo. Un elemento aparte con position: fixed de
   verdad (en vez de background-attachment: fixed) es mucho más
   estable en mobile. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--bg-1);
  /* --fondo-detalle-pais: lo pisa el JS solo mientras estás mirando
     el detalle de una selección (ver renderCountryDetail); el resto
     del tiempo usa este de acá, el de siempre. */
  background-image: var(--fondo-detalle-pais, url("imgportadas/VIRTUALFIGUSfondo.png"));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  pointer-events: none;
}

/* En pantallas anchas (compu/web) se usa el fondo horizontal en vez
   del fondo pensado para celular. */
@media (min-width: 900px) {
  body::after {
    background-image: var(--fondo-detalle-pais, url("imgportadas/fondovirtualfiguspc.png"));
  }
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
  opacity: 0.18;
  pointer-events: none;
}

/* Todo el contenido real de la app tiene que ir explícitamente POR
   ENCIMA del fondo. OJO: no usar z-index negativo para el fondo de
   arriba — en algunos navegadores, cuando "html" y "body" tienen su
   propio color de fondo (como acá), un z-index negativo hace que el
   elemento se pinte por detrás de TODO, incluso por detrás del color
   de fondo simple, en vez de solo por detrás del contenido. Por eso
   el fondo va en 0/1 y el contenido real, explícitamente, en 2. */
.app-header,
main,
.app-nav {
  position: relative;
  z-index: 2;
}

.app-header {
  text-align: center;
  padding: 2rem 1.5rem 1rem;
  position: relative;
  z-index: 1;
}

.app-header h1 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #67f47f;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 24px rgba(103, 244, 127, 0.85), 0 0 46px rgba(103, 244, 127, 0.5);
}

.app-header p {
  margin: 0.75rem auto 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.97rem;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 9rem;
}

.view-panel {
  display: none;
}

.view-panel.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-header {
  margin-bottom: 1rem;
  position: relative;
  padding: 0.9rem 1.1rem;
  border-radius: 18px;
  background: rgba(8, 20, 11, 0.82);
  border: 1px solid rgba(103, 244, 127, 0.12);
  backdrop-filter: blur(6px);
}

.view-header #all-stickers-view-toggle {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
}

.view-header h2 {
  margin: 0 0 0.35rem;
  color: var(--accent-1);
  font-size: 1.35rem;
}

.view-header p {
  margin: 0;
  color: var(--muted);
}

.section-card {
  padding: 1.2rem;
}

.packs-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.summary-box strong {
  margin: 0;
  color: #f3ffe9;
}

.summary-label,
.collection-item p,
.profile-info p {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.collection-list {
  display: grid;
  gap: 0.75rem;
}

.collection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgba(10, 26, 13, 0.95);
  border: 1px solid rgba(103, 244, 127, 0.12);
}

.collection-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(103, 244, 127, 0.16);
  color: #dffedc;
  font-weight: 700;
}

.summary-box {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.packs-summary .button-primary {
  width: auto;
  margin: 0;
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}

.profile-header-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: rgba(10, 26, 13, 0.72);
  border: 1px solid rgba(103, 244, 127, 0.14);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #67f47f, #1da84e);
  color: #08210d;
  font-weight: 800;
  font-size: 1.2rem;
  font-family: inherit;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.15s ease;
}

.profile-avatar:hover {
  transform: scale(1.05);
}

.profile-avatar:active {
  transform: scale(0.96);
}

/* Lapicito chiquito en la esquina, para que se note que se puede tocar. */
.profile-avatar::after {
  content: '✎';
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0d1c0a;
  border: 2px solid var(--bg-1, #041e08);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #dffedc;
}

.profile-info h3 {
  margin: 0;
  color: #f2ffe8;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.profile-grid div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 14px;
  background: rgba(12, 31, 15, 0.78);
}

.profile-album-select {
  background: transparent;
  color: #f2fbef;
  border: 1px solid rgba(103, 244, 127, 0.35);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  max-width: 60%;
}

.profile-album-select option {
  background: #0d1c0a;
  color: #f2fbef;
}

.activar-push-btn {
  width: 100%;
  margin: 0.6rem 0;
  background: rgba(103, 244, 127, 0.14);
  border-color: rgba(103, 244, 127, 0.4);
}

.activar-push-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

/* Cuando las notificaciones ya están prendidas, el botón pasa a
   ofrecer apagarlas — mismo tamaño, otro color para que se note que
   ahora hace lo contrario. */
.activar-push-btn.activo {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.4);
}

.profile-actions-row {
  display: flex;
  gap: 0.6rem;
}

.profile-actions-row .button-small {
  flex: 1;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

/* --- Tus 3 figuritas favoritas --- */
.profile-favorites-title {
  margin: 0 0 0.6rem;
  color: #f2fbef;
  font-size: 0.95rem;
}

.free-pack-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.free-pack-info h3 {
  margin: 0 0 0.25rem;
  color: #f2fbef;
  font-size: 1rem;
}

.free-pack-info p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.free-pack-info p.ready {
  color: #67f47f;
  font-weight: 700;
}

#free-pack-btn {
  width: auto;
  flex-shrink: 0;
}

#free-pack-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.profile-favorites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.profile-favorite-slot {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  border: 2px dashed rgba(103, 244, 127, 0.35);
  background: rgba(12, 31, 15, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.6rem;
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.profile-favorite-slot:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 244, 127, 0.7);
}

.profile-favorite-slot.filled {
  border-style: solid;
  border-color: var(--rarity-color, #16a34a);
  /* Sin esto, en el celular arrastrar el dedo para reordenar la
     favorita termina scrolleando toda la pantalla en vez de mover
     solo el casillero (mismo motivo que .card-inner en el sobre). */
  touch-action: none;
}

/* Mientras se está arrastrando una favorita para reordenarla: se
   "levanta" un poco (sombra + por encima de las demás) y sigue al
   dedo/mouse 1 a 1, sin el suavizado de transición de siempre (que
   quedaría con delay respecto del dedo). */
.favorite-slot-dragging {
  transition: none !important;
  z-index: 5;
  cursor: grabbing;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
}

/* El otro casillero que está "debajo del dedo" mientras arrastrás —
   avisa dónde va a caer si soltás ahora. */
.favorite-slot-drop-target {
  border-color: #f6ec5a;
  box-shadow: 0 0 0 3px rgba(246, 236, 90, 0.35);
}

.profile-favorite-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Las fotos son el escaneo completo de la figurita (con el cartel
     del país y el logo del mundial arriba), no un retrato ya
     recortado — si se centra tal cual, en un casillero chico se ve
     la tarjeta entera reducida en vez de la cara. Corriendo el punto
     de enfoque hacia arriba se recorta la mayor parte de esa franja
     y queda mucho más parecido a un ícono de perfil. */
  object-position: center 15%;
}

.profile-favorite-slot .favorite-slot-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.3rem 0.5rem 0.45rem;
  background: linear-gradient(transparent, rgba(3, 10, 4, 0.7) 45%, rgba(3, 10, 4, 0.94));
  color: #f2fbef;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-favorite-slot .favorite-slot-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* --- Selector de avatar --- */
.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  padding: 0.5rem 0;
}

.avatar-picker-option {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid transparent;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.avatar-picker-option:hover {
  transform: scale(1.08);
}

.avatar-picker-option.selected {
  border-color: #f2fbef;
}

/* --- Selector de figurita destacada (reusa el look del mercado) ---
   OJO: antes esto usaba minmax(110px, 1fr), una columna demasiado
   angosta para las 2 tarjetas "Ver de cerca" / "Elegir esta" de al
   lado — el texto quedaba apretado y cortado en 2-3 líneas. Se
   agranda el mínimo y (ver .favorito-selector-botones más abajo) los
   botones pasan a apilarse uno debajo del otro, así siempre tienen
   ancho completo para el texto, sin importar cuántas columnas entren. */
.favorito-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  max-height: 55vh;
  overflow-y: auto;
  width: 100%;
}


.album-collection-grid {
  display: grid;
  gap: 0.75rem;
}

/* Fila de álbumes de Inicio: en vez de acomodarse en grilla, ahora es
   una tira horizontal deslizable hacia los costados (como la barra de
   navegación de abajo), para que todos los álbumes -activos, "próximo"
   y bloqueados- entren uno al lado del otro sin amontonarse. */
.hero-albums-section {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  padding: 2rem calc(50% - 130px) 2.4rem;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hero-albums-section::-webkit-scrollbar {
  display: none;
}

.hero-albums-section .album-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  width: 260px;
  max-width: 260px;
  cursor: pointer;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.hero-albums-section .album-card:hover {
  transform: scale(1.05);
  box-shadow: none;
  filter: drop-shadow(0 24px 56px rgba(0, 0, 0, 0.4));
}

.hero-albums-section .album-card-header,
.hero-albums-section .collection-stats,
.hero-albums-section .album-actions,
.hero-albums-section .player-list,
.hero-albums-section .coming-soon-text {
  display: none;
}

.hero-albums-section .album-cover-card {
  width: 100%;
  height: 330px;
  border-radius: 0;
  object-fit: contain;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.hero-album-progress {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
  padding: 0 0.2rem;
}

.hero-albums-section .hero-album-progress {
  display: flex;
}

.hero-album-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.hero-album-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ade80, #f6ec5a);
  box-shadow: 0 0 10px rgba(103, 244, 127, 0.5);
  transition: width 0.4s ease;
}

.hero-album-progress-label {
  flex-shrink: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: #eafff0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.upcoming-albums-section {
  display: none;
}

/* Álbumes bloqueados (ej. Mundial 2022) ahora aparecen al lado de los
   activos dentro de hero-albums-section, con la tapa tachada y en
   escala de grises, igual que en la galería de Sobres. */
.hero-albums-section .album-card.locked {
  cursor: not-allowed;
  position: relative;
}

.hero-albums-section .album-card.locked:hover {
  transform: none;
  filter: none;
}

.hero-albums-section .album-card.locked .album-cover-card {
  filter: grayscale(0.9) brightness(0.55);
}

.hero-albums-section .album-card.locked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 6%;
  right: 6%;
  height: 4px;
  background: rgba(255, 90, 90, 0.9);
  transform: translateY(-50%) rotate(-18deg);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 2;
  border-radius: 4px;
}

.hero-albums-section .album-card.locked::before {
  content: 'PRÓXIMAMENTE';
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}

/* Álbumes "Próximamente" (PROXIMO1/2/3): a diferencia de los bloqueados
   de arriba, estos NO se tachan con la línea roja. Van al lado del de
   1990, apenas atenuados, y al tocarlos muestran un aviso en vez de
   quedar marcados permanentemente como no disponibles. */
.hero-albums-section .album-card.coming-soon {
  cursor: pointer;
}

.hero-albums-section .album-card.coming-soon .album-cover-card {
  filter: brightness(0.88);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.hero-albums-section .album-card.coming-soon:hover .album-cover-card {
  filter: brightness(1.02);
  transform: translateY(-2px);
}

.hero-albums-section .all-stickers-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 280px;
  text-align: center;
  padding: 1.5rem 1.2rem;
  background: linear-gradient(160deg, rgba(15, 55, 24, 0.96), rgba(9, 38, 18, 0.98));
  border: 1px solid rgba(103, 244, 127, 0.22);
}

.all-stickers-icon {
  font-size: 3.2rem;
  line-height: 1;
}

.all-stickers-label {
  font-family: 'Orbitron', sans-serif;
  color: #eafff0;
  font-weight: 700;
  font-size: 1.05rem;
}

.all-stickers-count {
  color: #9fd18f;
  font-size: 0.85rem;
}

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

.album-card {
  overflow: hidden;
  border-radius: 20px;
  background: rgba(10, 26, 13, 0.95);
  border: 1px solid rgba(103, 244, 127, 0.16);
  box-shadow: var(--shadow);
}

.album-cover-card {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Numerito arriba a la derecha de la tapa del álbum: cuántas
   figuritas de ESE álbum tenés esperando para pegar. .album-card ya
   tiene position:relative (ver más abajo), así que esto queda
   flotando sobre la esquina de la tapa sin necesitar ningún wrapper
   nuevo. */
.album-pending-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: #f6ec5a;
  color: #1c1305;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  border: 2px solid #0a1a0d;
}

.album-pending-badge.hidden {
  display: none;
}

.album-card-header {
  padding: 1rem 1rem 0.5rem;
}

.album-card .collection-stats,
.album-card .album-actions,
.album-card .player-list,
.album-card .coming-soon-text {
  padding: 0 1rem 1rem;
}

.collection-slot {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgba(10, 26, 13, 0.95);
  border: 1px solid rgba(103, 244, 127, 0.12);
}

.collection-slot.owned {
  border-color: rgba(103, 244, 127, 0.3);
}

.collection-slot.empty {
  opacity: 0.8;
}

.slot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(103, 244, 127, 0.16);
  color: #dffedc;
  font-weight: 700;
}

.profile-grid span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.pages-list,
.country-buttons {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.pages-grid {
  display: grid;
  gap: 0.75rem;
}

.page-card,
.country-button {
  border: 1px solid rgba(103, 244, 127, 0.16);
  background: rgba(10, 26, 13, 0.95);
  color: #f4ffe9;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  text-align: left;
}

.page-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.page-card.active,
.country-button.active {
  border-color: rgba(103, 244, 127, 0.4);
  background: rgba(15, 78, 35, 0.95);
  box-shadow: inset 0 0 0 1px rgba(103, 244, 127, 0.12);
}

.country-panel {
  padding: 1rem;
  border-radius: 16px;
  background: rgba(12, 31, 15, 0.8);
}

.country-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.country-panel-label {
  margin: 0 0 0.2rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-1);
}

.country-panel h3 {
  margin: 0;
  color: #f4ffe9;
}

.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 0.75rem;
}

#country-detail-view .section-card {
  min-height: 420px;
}

#country-detail-view .view-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.player-tile {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 132px;
  padding: 0.8rem;
  border-radius: 16px;
  border: 2px solid rgba(103, 244, 127, 0.16);
  background: rgba(8, 24, 12, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.player-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #caffcb, #67f47f);
  color: #08210d;
  font-weight: 800;
}

.player-name {
  font-weight: 700;
  color: #f5ffe9;
  line-height: 1.3;
}

.player-rarity {
  margin-top: auto;
  width: fit-content;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--rarity-color, #dffedc);
  border: 1px solid var(--rarity-color, rgba(103, 244, 127, 0.3));
  font-size: 0.75rem;
}

.hero-section {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
  padding: 0 1rem 1.5rem;
}

.hero-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  min-height: 250px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(7, 34, 14, 0.96), rgba(13, 48, 20, 0.92));
  border: 1px solid rgba(103, 244, 127, 0.14);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(103,244,127,0.2), transparent 22%),
              radial-gradient(circle at 85% 110%, rgba(255,255,255,0.05), transparent 18%);
  pointer-events: none;
}

.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 110%, rgba(255,255,255,0.04), transparent 20%);
  pointer-events: none;
}

.hero-card .hero-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(15, 79, 38, 0.9);
  color: #b5ffce;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1px solid rgba(103,244,127,0.24);
}

.hero-card .hero-title {
  margin: 1.2rem 0 0.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  color: #fdfdf2;
}

.hero-card .hero-meta {
  color: #bddfb4;
  font-size: 1rem;
  max-width: 30rem;
  line-height: 1.5;
}

.hero-card-small {
  min-height: 240px;
}

.hero-card-small.left-card {
  background-image: radial-gradient(circle at 20% 20%, rgba(103,244,127,0.2), transparent 32%);
}

.hero-card-small.right-card {
  background-image: radial-gradient(circle at 80% 15%, rgba(156,255,179,0.18), transparent 28%);
}

.hero-card-large {
  min-height: 340px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  justify-items: center;
  align-items: center;
  background: linear-gradient(180deg, rgba(9, 38, 18, 0.98), rgba(15, 55, 24, 0.96));
}

.album-cover {
  width: min(100%, 320px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.hero-card-large::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), transparent 22%);
  pointer-events: none;
}

.coming-soon-text {
  margin: 1rem 0 0;
  color: #c8ffd0;
  font-size: 0.96rem;
  line-height: 1.6;
}

.album-form-section,
.albums-list-section {
  margin-bottom: 1rem;
  padding: 1.5rem;
}

.album-form-section h2,
.albums-list-section h2 {
  margin: 0 0 0.65rem;
  color: var(--accent-1);
  font-size: 1.25rem;
}

.album-form-section p,
.albums-list-section p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.field-group {
  display: grid;
  gap: 0.95rem;
  margin-bottom: 1.1rem;
}

label {
  font-weight: 600;
  color: #b7f2c3;
}

input[type='text'],
input[type='password'],
input[type='email'] {
  width: 100%;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(103, 244, 127, 0.16);
  background: rgba(15, 35, 18, 0.82);
  color: #e8ffe8;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input[type='text']::placeholder,
input[type='password']::placeholder,
input[type='email']::placeholder {
  color: #95b48b;
}

input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus {
  border-color: rgba(103, 244, 127, 0.55);
  box-shadow: 0 0 0 3px rgba(103, 244, 127, 0.14);
}

button,
.button-small {
  cursor: pointer;
  border: none;
  border-radius: 16px;
  padding: 0.95rem 1.2rem;
  font-weight: 700;
  color: #08160f;
  background: linear-gradient(90deg, #94ffae 0%, #31b05b 100%);
  box-shadow: 0 18px 32px rgba(43, 145, 76, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

button:hover,
.button-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(43, 145, 76, 0.3);
}

.button-primary {
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 18px;
  background: linear-gradient(90deg, #82ffad 0%, #2fa85e 100%);
  color: #08160f;
}

.albums-grid {
  display: grid;
  gap: 1rem;
}

.album-card {
  position: relative;
  padding: 1rem;
  border-radius: 22px;
  background: rgba(10, 27, 12, 0.95);
  border: 1px solid rgba(103, 244, 127, 0.14);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.32);
}

.empty-state {
  color: #bfd9b5;
  font-size: 0.96rem;
  padding: 0.75rem 1rem;
  background: rgba(8, 20, 11, 0.75);
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.album-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), transparent 25%);
  pointer-events: none;
}

.album-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}

.album-card h3 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  color: #d7ffd7;
  font-size: 1rem;
}

.album-theme {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(18, 66, 31, 0.9);
  color: #b7f2c3;
  border: 1px solid rgba(103, 244, 127, 0.18);
  font-weight: 700;
  font-size: 0.85rem;
}

.collection-stats {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 18px;
  background: rgba(15, 42, 22, 0.9);
  border: 1px solid rgba(103,244,127,0.14);
  color: #c5ffcb;
  font-size: 0.95rem;
  font-weight: 700;
}

.album-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.player-list {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0;
  padding: 0;
}

.player-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: rgba(10, 24, 14, 0.96);
  border: 1px solid rgba(255,255,255,0.04);
}

.player-list li span {
  flex: 1;
  color: #e6f9e6;
}

.player-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.button-small.open-pack {
  background: linear-gradient(90deg, #8bff96 0%, #2eb86e 100%);
}

.button-small.add-player {
  background: linear-gradient(90deg, #6aeb7a 0%, #1f8e53 100%);
}

.button-small.remove-album {
  background: linear-gradient(90deg, #ff8c5b 0%, #e04e24 100%);
  color: #10100d;
}

.empty-player {
  color: var(--muted);
  font-size: 0.95rem;
}

.sticker-section-header {
  background: linear-gradient(90deg, rgba(103,244,127,0.14), rgba(29,185,88,0.08));
  color: #d2ffdc;
  font-weight: 800;
  text-align: center;
  border-radius: 12px;
  padding: 0.65rem 1rem;
}

.sticker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(11, 28, 15, 0.96);
  border-left: 4px solid;
}

.sticker-item.rarity-common { border-color: #6f8b6f; }
.sticker-item.rarity-rare { border-color: #16a34a; }
.sticker-item.rarity-epic { border-color: #059669; }
.sticker-item.rarity-legendary { border-color: #f59e0b; }
.sticker-item.rarity-mythic { border-color: #8b5cf6; }

.sticker-info {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
}

.sticker-rarity-badge {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}

.sticker-name {
  font-weight: 700;
  color: #ecffe8;
  min-width: 0;
  word-break: break-word;
}

.sticker-type {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  color: #b8ffd0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
}

.pack-modal {
  position: fixed;
  inset: 0;
  background: rgba(1, 10, 5, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.pack-modal.hidden { display: none; }

.pack-modal-content {
  width: min(92%, 760px);
  padding: 1.8rem;
  border-radius: 24px;
  background: rgba(8, 20, 12, 0.98);
  border: 1px solid rgba(103,244,127,0.22);
  box-shadow: var(--shadow);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.06);
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #dbeedd;
  cursor: pointer;
  font-size: 1.2rem;
}

.modal-close:hover { background: rgba(255,255,255,0.12); }

.pack-stickers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.sticker-card {
  position: relative;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(12, 26, 13, 0.92);
  text-align: center;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
  transform: translateY(0);
  overflow: hidden;
}

.sticker-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.32); }

.sticker-card .sticker-photo {
  display: none;
}

.sticker-card.has-photo {
  padding: 0;
  min-height: 220px;
}

.sticker-card.has-photo .sticker-photo {
  display: block;
  position: static;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.sticker-card.has-photo .sticker-card-content {
  padding: 0.8rem;
}

.sticker-card.has-photo .sticker-badge {
  display: none;
}

.sticker-card .sticker-rarity {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.sticker-card .sticker-type { color: #b7f2c3; }
.sticker-card .sticker-name { margin: 0.6rem 0; }

.sticker-card .sticker-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  margin: 0 auto;
}

.app-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
  padding: 0.7rem 0.35rem calc(0.85rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 21, 12, 0.96), rgba(6, 15, 10, 0.98));
  border-top: 1px solid rgba(103,244,127,0.14);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

/* Botón flotante de música. OJO: el offset de abajo tiene que dejar
   lugar de sobra para la barra de navegación (.app-nav), que en
   celulares angostos con las 6 etiquetas en español (ej. "Mercado de
   Figus") puede pasar a 2 líneas y crecer más de lo que ocupa en una
   pantalla ancha — con un offset justo, este botón terminaba pintado
   ENCIMA de la pestaña "Perfil" en vez de flotar arriba de la barra. */
.musica-toggle-btn {
  position: fixed;
  bottom: calc(100px + env(safe-area-inset-bottom));
  right: 14px;
  z-index: 40;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(103, 244, 127, 0.25);
  background: rgba(10, 26, 13, 0.9);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-top));
  padding-top: calc(0.6rem + env(safe-area-inset-top));
  background: linear-gradient(90deg, #16a34a, #0d7a37);
  color: #f2fff0;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.update-banner.hidden {
  display: none;
}

.update-banner button {
  background: #0a1a0d;
  color: #67f47f;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
}

.nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.25rem 0.15rem;
  border: none;
  background: transparent;
  color: #bfeac5;
  font-size: 0.6rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.08;
}

.nav-item .nav-icon {
  position: relative;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-item .nav-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: grayscale(1) brightness(1.4) opacity(0.75);
  transition: filter 0.15s ease;
}

.nav-item .nav-label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.01em;
  word-break: break-word;
}

.nav-item.active {
  color: #ecffd9;
}

.nav-item.active .nav-icon {
  text-shadow: 0 0 12px rgba(103, 244, 127, 0.8);
}

.nav-item.active .nav-icon img {
  filter: none;
  filter: drop-shadow(0 0 6px rgba(103, 244, 127, 0.8));
}

/* Numerito de aviso sobre el ícono del menú de abajo (ej: repetidas
   nuevas sin publicar todavía en el Mercado de Figus). Chiquito, en la
   esquina superior derecha del ícono, para no tapar nada. */
.nav-icon-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: #f6ec5a;
  color: #1c1305;
  font-size: 0.58rem;
  font-weight: 800;
  border-radius: 999px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

@media (max-width: 900px) {
  .hero-section { grid-template-columns: 1fr; }
  main { padding-bottom: 7rem; }
}

@media (max-width: 640px) {
  .app-header { padding-top: 1.6rem; }
  .hero-card { min-height: 200px; }
  .album-form-section, .albums-list-section { padding: 1.2rem; }
}
.country-buttons{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin-top:20px;
}

.country-card{
    background:#111;
    border:2px solid #2dbd2d;
    border-radius:15px;
    overflow:hidden;
    cursor:pointer;
    transition:.3s;
    text-align:center;
}

.country-card:hover{
    transform:scale(1.05);
    border-color:#6cff6c;
}

.country-card img{
    width:100%;
    height:130px;
    object-fit:cover;
}

.country-card h3{
    color:white;
    margin:10px;
    font-size:17px;
}
/* ---- Aviso flotante breve (ej: "ya tenías cuenta, te logueamos") ---- */
.aviso-breve {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 20px);
  max-width: min(90vw, 420px);
  padding: 0.9rem 1.3rem;
  border-radius: 14px;
  background: rgba(15, 78, 35, 0.96);
  border: 1px solid rgba(103, 244, 127, 0.35);
  color: #eafff0;
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 999;
  pointer-events: none;
}

.aviso-breve.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Variantes de color: por default es verde (info/éxito). Para errores
   reales se usa .aviso-breve.error, con tono rojo. */
.aviso-breve.error {
  background: rgba(90, 18, 18, 0.97);
  border-color: rgba(255, 140, 140, 0.4);
  color: #ffecec;
}

/* ---- Spinner chiquito en la tarjeta del sobre, mientras se abre ---- */
.sobre-gallery-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: session-loading-spin 0.7s linear infinite;
  vertical-align: middle;
}

/* ---- Dificultar la descarga fácil de las imágenes de figuritas ---- */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---- Barra de búsqueda del mercado ---- */
.mercado-search-row {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mercado-search-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;
}

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

/* ---- Selector de álbum destino (a qué Mundial mandar un sobre
   ganado: diario gratis, ruleta o canje). Mismo lenguaje visual que
   .pack-modal. ---- */
.selector-album-overlay {
  position: fixed;
  inset: 0;
  background: rgba(1, 10, 5, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 1rem;
}

.selector-album-modal {
  width: min(92%, 420px);
  padding: 1.6rem;
  border-radius: 24px;
  background: rgba(8, 20, 12, 0.98);
  border: 1px solid rgba(103, 244, 127, 0.22);
  box-shadow: var(--shadow);
  text-align: center;
}

.selector-album-modal h3 {
  margin: 0 0 0.4rem;
  color: #f2fbef;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
}

.selector-album-modal p {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.selector-album-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.selector-album-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem;
  border-radius: 18px;
  background: rgba(12, 31, 15, 0.85);
  border: 1px solid rgba(103, 244, 127, 0.18);
  color: #f2fbef;
  font-weight: 700;
  font-size: 0.85rem;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.selector-album-opcion:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 244, 127, 0.6);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.selector-album-opcion img {
  width: 100%;
  max-width: 130px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.selector-album-cancelar {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  color: #dbeedd;
  box-shadow: none;
}

.selector-album-cancelar:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  transform: none;
}