/* El álbum de figuritas (js/album.js, ALBUM.md): hojas de papel con huecos,
   figuritas con borde blanco y brillo, y una bandeja con las que faltan pegar.
   Los colores de texto salen de las variables del tema (css/escenario.css). */

#catalogo { --rz: #22CC55; --papel: var(--tarjeta, #fff); }
#catalogo-vistas { display: flex; gap: 6px; }
#catalogo-vistas button { flex: 1; padding: 6px 4px; border-radius: 10px; border: 2px solid var(--tarjeta-borde, var(--borde)); background: var(--tarjeta, var(--panel)); color: var(--texto);
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.78rem; cursor: pointer; }
#catalogo-vistas button.activo { background: #17703A; border-color: #17703A; color: #fff; }
#lista-vista { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
#lista-vista[hidden], #album-vista[hidden] { display: none; }
#album-vista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 6px; scrollbar-width: thin; }

/* Las secciones por rareza */
.al-secciones { display: flex; gap: 4px; flex-wrap: wrap; }
.al-seccion { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 4px 3px; border-radius: 99px; border: 2px solid var(--tarjeta-borde, var(--borde)); background: var(--tarjeta, var(--panel)); color: var(--texto);
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.68rem; cursor: pointer; white-space: nowrap; min-width: 0; }
.al-seccion small { font-weight: 700; color: var(--texto2); }
.al-seccion.activa { background: var(--rz); border-color: var(--rz); color: #fff; }
.al-seccion.activa small { color: #fff; }
.al-seccion[data-rareza="comun"] { --rz: #17703A; }
.al-seccion[data-rareza="rara"] { --rz: #1565C0; }
.al-seccion[data-rareza="epica"] { --rz: #7A1FC2; }
.al-seccion[data-rareza="legendaria"] { --rz: #9A6200; }

/* El libro: la hoja con una flecha a cada lado */
.al-libro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; align-items: center; }
.al-libro[data-rareza="comun"] { --rz: #22CC55; }
.al-libro[data-rareza="rara"] { --rz: #1188FF; }
.al-libro[data-rareza="epica"] { --rz: #AA00FF; }
.al-libro[data-rareza="legendaria"] { --rz: #FFB800; }
.al-flecha { width: 26px; height: 56px; border-radius: 10px; border: 2px solid var(--tarjeta-borde, var(--borde)); background: var(--tarjeta, var(--panel)); color: var(--texto); font-size: 1.4rem; font-weight: 900; cursor: pointer; }
.al-flecha:disabled { visibility: hidden; }
.al-hoja { position: relative; padding: 10px 10px 12px; border-radius: 16px; background: var(--papel); border: 3px solid var(--rz);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--rz) 70%, #000), inset 0 0 22px color-mix(in srgb, var(--rz) 12%, transparent); }
.al-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.al-cabeza b { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1rem; color: var(--texto); text-transform: uppercase; letter-spacing: 1px; }
.al-cabeza small { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.72rem; color: var(--texto2); }
.al-huecos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.al-hoja.completa { border-color: #FFB800; box-shadow: 0 4px 0 #B07F00, 0 0 18px rgba(255, 184, 0, 0.45); }
.al-hoja.festejo { animation: alFestejo 0.9s ease-out; }
.al-sello { position: absolute; right: 8px; top: -12px; padding: 3px 10px; border-radius: 8px; border: 3px solid #D4381C; color: #D4381C; background: #fff;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; transform: rotate(8deg); animation: alSello 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; }

/* Los huecos */
.al-hueco { position: relative; aspect-ratio: 1 / 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; border-radius: 12px; min-width: 0; }
.al-hueco .al-arte { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; width: 100%; font-size: 36px; }
.al-hueco .pockie-arte { width: 72%; height: auto; max-height: 100%; }
.al-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.7rem; line-height: 1.2; color: var(--texto); }
.al-hueco.falta { border: 2px dashed color-mix(in srgb, var(--texto2) 55%, transparent); background: color-mix(in srgb, var(--texto2) 8%, transparent); }
.al-hueco.falta .al-arte img, .al-hueco.falta .al-arte svg { filter: brightness(0); opacity: 0.16; }
.al-hueco.falta .al-nombre { color: var(--texto2); font-size: 0.95rem; }
.al-hueco.lista { border: 2px dashed var(--rz); background: color-mix(in srgb, var(--rz) 14%, transparent); animation: alEspera 1.8s ease-in-out infinite; }
.al-hueco.lista .al-pista { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.7rem; color: var(--texto); text-align: center; }
.al-hueco.lista.objetivo, .al-hueco.lista.cerca { border-style: solid; animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rz) 45%, transparent); transform: scale(1.04); }
.al-hueco[data-rareza="comun"] { --rz: #22CC55; }
.al-hueco[data-rareza="rara"] { --rz: #1188FF; }
.al-hueco[data-rareza="epica"] { --rz: #AA00FF; }
.al-hueco[data-rareza="legendaria"] { --rz: #FFB800; }
.al-hueco.pegada { padding: 0; }

/* La figurita: papel con borde blanco, sombra y, si es de las raras, brillo */
.al-figu { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; padding: 5px 4px 3px; border-radius: 14px; border: 4px solid #fff;
  background: #FFFDF6; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22), 0 6px 12px rgba(0, 0, 0, 0.22); overflow: hidden; color: #2B1B3D; font: inherit; cursor: pointer; }
.al-figu .al-nombre { color: #2B1B3D; }
.al-figu .al-arte { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; width: 100%; font-size: 44px; }
.al-figu .pockie-arte { width: 70%; height: auto; max-height: 100%; }
.al-figu[data-rareza="comun"] { outline: 2px solid #22CC55; outline-offset: -4px; }
.al-figu[data-rareza="rara"] { outline: 2px solid #1188FF; outline-offset: -4px; background: linear-gradient(160deg, #F4FAFF, #DCEEFF); }
.al-figu[data-rareza="epica"] { outline: 2px solid #AA00FF; outline-offset: -4px; background: linear-gradient(160deg, #FBF3FF, #EBD6FF); }
.al-figu[data-rareza="legendaria"] { outline: 2px solid #FFB800; outline-offset: -4px; background: linear-gradient(160deg, #FFFBE8, #FFE9A8); }
.al-figu.pegada { width: 100%; height: 100%; }
.al-brillo { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.al-figu[data-rareza="epica"] .al-brillo, .al-figu[data-rareza="legendaria"] .al-brillo, .al-figu[data-rareza="rara"] .al-brillo {
  opacity: 0.85; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%); background-size: 260% 100%; mix-blend-mode: soft-light; animation: alBrillo 3.6s ease-in-out infinite; }
.al-figu[data-rareza="legendaria"] .al-brillo { background-image: linear-gradient(115deg, transparent 30%, rgba(255, 120, 200, 0.55) 42%, rgba(255, 255, 255, 0.95) 50%, rgba(80, 220, 255, 0.55) 58%, transparent 70%); mix-blend-mode: normal; opacity: 0.55; }

/* La bandeja con las que faltan pegar */
.al-bandeja { padding: 8px 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--texto2) 10%, transparent); border: 2px solid var(--tarjeta-borde, var(--borde)); }
.al-bandeja-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.al-bandeja h3 { margin: 0; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--texto); }
.al-bandeja h3 span { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 99px; background: #D4381C; color: #fff; font-size: 0.78rem; text-align: center; }
.al-bandeja.vacia h3 span { background: var(--texto2); }
.al-todas { padding: 5px 10px; border-radius: 99px; border: 0; background: #FFD23F; color: #3A2400; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 0.8rem; cursor: pointer; box-shadow: 0 2px 0 #B07F00; }
.al-bandeja-fila { display: flex; gap: 8px; overflow-x: auto; padding: 6px 4px 8px; scrollbar-width: thin; }
.al-bandeja-fila p { margin: 0; padding: 6px; font-weight: 700; font-size: 0.8rem; color: var(--texto2); }
.al-figu.suelta { flex: none; width: 82px; height: 96px; touch-action: pan-x; user-select: none; animation: alFlota 2.6s ease-in-out infinite; }
.al-figu.suelta:nth-child(2n) { animation-delay: -0.9s; }
.al-figu.suelta:nth-child(3n) { animation-delay: -1.7s; }
.al-figu.suelta:hover { transform: translateY(-4px) rotate(-2deg); }
.al-figu.suelta.levantada { opacity: 0.3; animation: none; }
.al-figu.suelta .al-nombre { font-size: 0.62rem; }
.al-fantasma, .al-vuelo { position: fixed; left: 0; top: 0; z-index: 420; pointer-events: none; will-change: transform; box-shadow: 0 12px 22px rgba(0, 0, 0, 0.35); animation: none; }
.al-fantasma.vuelve { transition: opacity 0.2s; opacity: 0; }
.al-vuelo { width: auto; }

/* Los puntos de las hojas */
.al-puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.al-punto { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 2px solid var(--rz, #22CC55); background: transparent; cursor: pointer; }
.al-punto[data-rareza="comun"] { --rz: #22CC55; }
.al-punto[data-rareza="rara"] { --rz: #1188FF; }
.al-punto[data-rareza="epica"] { --rz: #AA00FF; }
.al-punto[data-rareza="legendaria"] { --rz: #FFB800; }
.al-punto.completa { background: var(--rz); }
.al-punto.actual { transform: scale(1.5); }

/* El golpe al pegar: rebote, anillo y chispas */
.al-hueco.golpe .al-figu.pegada { animation: alGolpe 0.5s cubic-bezier(0.25, 1.4, 0.4, 1) both; }
.al-hueco.golpe::after { content: ''; position: absolute; inset: 0; border-radius: 14px; border: 3px solid var(--rz); pointer-events: none; animation: alAnillo 0.55s ease-out both; }
.al-chispas { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.al-chispas i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: #FFD23F; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  transform: rotate(var(--a)) translateY(0); animation: alChispa 0.7s ease-out both; }
.al-chispas i:nth-child(3n) { background: #FF4FA3; }
.al-chispas i:nth-child(3n + 1) { background: #3FE0FF; }

/* El aviso del adelanto y la insignia de la barra */
.aa-por-pegar { display: inline-block; padding: 1px 8px; border-radius: 99px; background: #D4381C; color: #fff; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.72rem; vertical-align: middle; }
.aa-por-pegar[hidden] { display: none; }
#btn-catalogo-hamburguesa, #barra-abajo [data-abre="btn-catalogo-hamburguesa"] { position: relative; }
.al-insignia { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: #D4381C; color: #fff; border: 2px solid var(--fondo, #fff);
  font-family: 'Nunito', sans-serif; font-style: normal; font-weight: 900; font-size: 0.66rem; line-height: 14px; text-align: center; pointer-events: none; }
.al-insignia::after { content: attr(data-n); }

@keyframes alEspera { 50% { background: color-mix(in srgb, var(--rz) 26%, transparent); } }
@keyframes alFlota { 50% { transform: translateY(-3px) rotate(1deg); } }
@keyframes alBrillo { 0% { background-position: 130% 0; } 60%, 100% { background-position: -30% 0; } }
@keyframes alGolpe { 0% { transform: scale(1.7) rotate(-9deg); opacity: 0.2; } 45% { transform: scale(0.9) rotate(2deg); opacity: 1; } 70% { transform: scale(1.07) rotate(-1deg); } 100% { transform: none; } }
@keyframes alAnillo { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes alChispa { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(0); opacity: 0; } }
@keyframes alFestejo { 0%, 100% { transform: none; } 20% { transform: rotate(-1.2deg) scale(1.02); } 40% { transform: rotate(1deg) scale(1.02); } 60% { transform: rotate(-0.6deg); } }
@keyframes alSello { 0% { transform: rotate(8deg) scale(2.2); opacity: 0; } 100% { transform: rotate(8deg) scale(1); opacity: 1; } }

@media (max-width: 720px) {
  /* Más ancho que el cajón de siempre: las hojas necesitan lugar. */
  #catalogo { width: min(94vw, 420px); right: calc(-1 * min(94vw, 420px) - 12px); }
  #catalogo.abierto { right: 0; }
}
@media (min-width: 961px) { #catalogo { width: 350px; } }
@media (prefers-reduced-motion: reduce) {
  .al-hueco.lista, .al-figu.suelta, .al-brillo, .al-hoja.festejo, .al-sello { animation: none !important; }
  .al-hueco.golpe .al-figu.pegada, .al-hueco.golpe::after, .al-chispas i { animation: none !important; }
}
.al-signo { display: grid; place-items: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 2rem; color: var(--texto2); opacity: 0.5; }
.al-aviso { grid-column: 1 / -1; margin: 8px 0 0; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.64rem; line-height: 1.3; color: var(--texto2); }