/* Carta del pasaje (estampita) y figurita del álbum */
.card {
  --cat: var(--lapislazuli);
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, #FBF4E4, #F3E7CD);
  border-radius: var(--r-carta);
  padding: 9px;
  box-shadow: var(--sombra-carta);
  color: var(--tinta);
}
.card__frame {
  position: relative;
  border-radius: calc(var(--r-carta) - 6px);
  border: 2px solid var(--oro);
  box-shadow: inset 0 0 0 3px #FBF4E4, inset 0 0 0 4px color-mix(in srgb, var(--oro) 55%, transparent);
  overflow: hidden;
  background: #FBF4E4;
}
.card__art { position: relative; margin: 0; aspect-ratio: 3 / 2; background: var(--pergamino-oscuro); border-bottom: 5px solid var(--cat); }
.card__art img { width: 100%; height: 100%; object-fit: cover; }
.card__art::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 30px rgba(59, 42, 30, .25); pointer-events: none; }
.card__num {
  position: absolute; z-index: 1; top: 10px; left: 10px;
  min-width: 56px; padding: 3px 10px 2px;
  background: var(--cat); color: var(--cat-tinta);
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; text-align: center;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--oro-claro), 0 4px 8px -3px rgba(59, 42, 30, .5);
  font-variant-numeric: lining-nums tabular-nums;
}
.card__chapter { position: absolute; z-index: 1; top: 12px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cat); color: var(--cat-tinta); box-shadow: 0 0 0 2px var(--oro-claro); }
.card__chapter .icon { width: 19px; height: 19px; }
.card__body { padding: 14px 16px 12px; }
.card__title { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.35rem, 7cqi, 1.75rem); line-height: 1.05; margin: 0 0 4px; letter-spacing: .01em; }
.card__ref { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 1.08rem; color: color-mix(in srgb, var(--cat) 70%, var(--tinta)); margin: 0 0 10px; }
.card__summary { font-size: 1rem; line-height: 1.55; margin: 0 0 12px; }
.card__key {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 -16px; padding: 10px 16px;
  background: color-mix(in srgb, var(--oro) 15%, #FBF4E4);
  border-top: 1px dashed color-mix(in srgb, var(--oro) 60%, transparent);
  box-shadow: inset 4px 0 0 var(--cat);
  font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; line-height: 1.3;
}
.card__key .icon { color: var(--oro); flex: none; margin-top: 1px; }
.card__note { margin: 10px 0 0; font-size: var(--t-xs); color: var(--tinta-suave); }

/* Al descubrir: la estampita "se pega" en el álbum */
.card.is-stuck { animation: stick .7s cubic-bezier(.2, .8, .3, 1.3); }
.card.is-stuck .card__frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 236, 170, .75) 50%, transparent 65%);
  background-size: 250% 100%; animation: glint 1.1s .25s ease-out both;
}
@keyframes stick { 0% { transform: scale(1.04) rotate(-1.5deg); } 55% { transform: scale(.985) rotate(.3deg); } 100% { transform: none; } }
@keyframes glint { from { background-position: 120% 0; } to { background-position: -60% 0; } }

/* ---------- Figurita (álbum y capítulo) ---------- */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.slot { position: relative; aspect-ratio: 5 / 7; border-radius: 12px; }
.slot a, .slot > div { display: flex; flex-direction: column; height: 100%; border-radius: inherit; text-decoration: none; color: inherit; }
.slot--found a { background: #FBF4E4; box-shadow: 0 0 0 2px var(--oro), var(--sombra-carta); overflow: hidden; transition: transform .15s ease; }
.slot--found a:hover { transform: translateY(-3px) rotate(-.6deg); }
.slot--found img { flex: none; aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; border-bottom: 4px solid var(--cat); }
.slot__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slot__text { padding: 8px 9px; display: grid; gap: 2px; }
.slot__num { font-family: var(--f-titulo); font-weight: 800; font-size: .9rem; color: color-mix(in srgb, var(--cat) 75%, var(--tinta)); }
.slot__title { font-family: var(--f-display); font-weight: 700; font-size: .95rem; line-height: 1.15; }
.slot--empty > div, .slot--next a {
  align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 10px;
  border: 2px dashed color-mix(in srgb, var(--tinta) 25%, transparent);
  background: color-mix(in srgb, var(--pergamino-oscuro) 40%, transparent);
  color: color-mix(in srgb, var(--tinta) 45%, transparent);
}
.slot--empty .slot__big, .slot--next .slot__big { font-family: var(--f-titulo); font-weight: 800; font-size: 2rem; line-height: 1; }
.slot--next a { border: 2px solid var(--cat); background: var(--pergamino-claro); color: var(--tinta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 22%, transparent); }
.slot--next a:hover { background: #FFF8EA; }
.slot--next .slot__cta { font-weight: 700; font-size: var(--t-sm); color: var(--lapislazuli); }
.slot .icon--lock { width: 18px; height: 18px; opacity: .6; }

/* Carta compacta: misma proporción que el dorso (5:8) */
.card--mini { aspect-ratio: 5 / 8; display: flex; }
.card--mini .card__frame { flex: 1; display: flex; flex-direction: column; }
.card--mini .card__art { aspect-ratio: auto; flex: 0 0 52%; }
.card--mini .card__body { flex: 1; display: flex; flex-direction: column; padding: 10px 12px 0; }
.card--mini .card__title { font-size: clamp(1rem, 9cqi, 1.35rem); }
.card--mini .card__ref { font-size: .95rem; margin-bottom: 6px; }
.card--mini .card__key { margin: auto -12px 0; padding: 8px 12px; font-size: .9rem; }