/* ==========================================================================
   El binder: tapa, hojas, fundas, cartas, efecto holográfico y paso de página.
   Todas las medidas dependen de --card-w (ancho de carta), así escala a cualquier tamaño.
   ========================================================================== */

.binder {
  --cw: var(--card-w, 140px);
  --gap: calc(var(--cw) * .075);
  --pad: calc(var(--cw) * .09);
  --cpad: calc(var(--cw) * .1);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- Tapa ---------- */
.cover {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: var(--cpad);
  border-radius: calc(var(--cw) * .11);
  background:
    radial-gradient(130% 90% at 18% 0%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .28)),
    var(--binder);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 -14px 34px rgba(0, 0, 0, .35),
    0 34px 80px rgba(0, 0, 0, .62),
    0 8px 18px rgba(0, 0, 0, .4);
  perspective: calc(var(--cw) * 14);
}
.cover::before { /* grano tipo polipiel */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--noise);
  background-size: 150px;
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.style-rings .cover::after { /* costura */
  content: "";
  position: absolute;
  inset: calc(var(--cw) * .038);
  border: 1.5px dashed rgba(255, 255, 255, .22);
  border-radius: calc(var(--cw) * .085);
  pointer-events: none;
}

/* ---------- Lomo: el pliegue de la tapa entre las dos páginas ---------- */
.spine { position: relative; flex: none; z-index: 4; }
.style-rings .spine {
  width: calc(var(--cw) * .09);
  background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .16) 35%, rgba(255, 255, 255, .04) 50%, rgba(0, 0, 0, .16) 65%, rgba(0, 0, 0, .5));
}

/* ---------- Hojas ---------- */
.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad) var(--pad) 0;
  background: linear-gradient(180deg, #181a20, #0f1014);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 2px 8px rgba(0, 0, 0, .45);
}
.sheet.left { border-radius: calc(var(--cw) * .05) calc(var(--cw) * .015) calc(var(--cw) * .015) calc(var(--cw) * .05); }
.sheet.right { border-radius: calc(var(--cw) * .015) calc(var(--cw) * .05) calc(var(--cw) * .05) calc(var(--cw) * .015); }
.sheet.solo { border-radius: calc(var(--cw) * .05); }
.sheet.left::after, .sheet.right::before { /* sombra del pliegue */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--cw) * .14);
  pointer-events: none;
  z-index: 5;
}
.sheet.left::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .38)); }
.sheet.right::before { left: 0; background: linear-gradient(270deg, transparent, rgba(0, 0, 0, .38)); }

.pockets { display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); gap: var(--gap); }

.sheet-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: max(24px, calc(var(--cw) * .17));
  font-size: clamp(9.5px, calc(var(--cw) * .075), 12.5px);
  font-weight: 600;
  color: rgba(255, 255, 255, .42);
}
.sheet.right .sheet-foot { flex-direction: row-reverse; }
.sheet-foot .grow { flex: 1; }
.sheet-foot .count { font-variant-numeric: tabular-nums; }
.sheet-foot .count.complete { color: var(--ok); }
.page-menu-btn {
  display: grid;
  place-items: center;
  width: max(22px, calc(var(--cw) * .17));
  height: max(18px, calc(var(--cw) * .12));
  border: 0;
  border-radius: var(--r-sm);
  padding: 0;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .6);
  opacity: 0;
  transition: opacity .15s, background .15s;
}
.page-menu-btn .i { width: 70%; height: 70%; }
.sheet:hover .page-menu-btn, .page-menu-btn:focus-visible { opacity: 1; }
.page-menu-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Hojas sin páginas: interior de la tapa y final del binder */
.sheet.blank .pockets, .sheet.blank .sheet-foot { visibility: hidden; }
.sheet.inner-cover { background: transparent; box-shadow: none; }
.sheet.inner-cover::after, .sheet.inner-cover::before { display: none; }
.blank-content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 10%;
  text-align: center;
  color: rgba(255, 255, 255, .5);
  font-size: clamp(11px, calc(var(--cw) * .085), 14px);
}
.blank-content .btn { color: var(--text); font-size: clamp(11px, calc(var(--cw) * .085), 14px); height: auto; padding: .55em 1em; }

/* ---------- Portada: el interior de la tapa (binder-view.js, coverHtml) ----------
   Todo se mide con el ancho de la hoja (cqw), para que valga igual en un binder de 2 × 2 que en uno
   de 4 × 3. Arriba el nombre y las cifras; en medio la cuenta o la ayuda; abajo la marca. */
.cover-page {
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  /* En %, no en cqw: el relleno se mide con la hoja, que es el contenedor de los hijos */
  padding: 15% 8% 6%;
  color: rgba(255, 255, 255, .74);
}
.cp-title { display: grid; justify-items: center; gap: 3.2cqw; width: 100%; }
.cp-kicker { font-size: clamp(9px, 2.5cqw, 12px); font-weight: 600; font-stretch: var(--label-stretch); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.cp-name {
  margin: 0;
  max-width: 100%;
  font-family: var(--serif);
  font-size: clamp(14px, 9.5cqw, 46px);
  font-weight: 450;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ivory);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .35);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* Las cifras: una línea discreta con icono */
.cp-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqw 4cqw; margin: .6cqw 0 0; padding: 0; list-style: none; font-size: clamp(10px, 2.9cqw, 14px); font-weight: 500; font-variant-numeric: tabular-nums; }
.cp-stats li { display: inline-flex; align-items: center; gap: 1.4cqw; white-space: nowrap; }
.cp-stats .i { width: 1.15em; height: 1.15em; opacity: .6; }
.cover-page .meter { width: 44cqw; height: max(3px, .8cqw); margin-top: 1.2cqw; background: rgba(255, 255, 255, .12); }
/* Tarjeta de la cuenta o de la ayuda: cristal oscuro sobre la polipiel */
.cp-card {
  width: min(100%, 84cqw);
  margin-top: auto;
  padding: 4cqw 4.6cqw;
  border-radius: 2.6cqw;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(8, 8, 9, .34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  text-align: left;
  font-size: clamp(11px, 3cqw, 14px);
  line-height: 1.45;
}
.cp-card b { display: block; color: var(--ivory); font-weight: 600; }
.cp-card p { margin: 1cqw 0 0; color: rgba(255, 255, 255, .66); }
.cp-guest b, .cp-empty b { font-family: var(--serif); font-size: clamp(14px, 4.4cqw, 21px); font-weight: 500; letter-spacing: -.01em; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 2cqw; margin-top: 3.4cqw; }
.cover-page .cp-actions .btn { height: auto; min-height: 32px; padding: .5em 1em; font-size: clamp(11px, 2.9cqw, 13px); }
.cover-page .cp-actions .btn-primary { color: var(--ink-950); }
.cover-page .cp-actions .btn:not(.btn-primary) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.cover-page .cp-actions .btn:not(.btn-primary):hover { background: rgba(255, 255, 255, .12); }
.cover-page .cp-actions .btn .i { width: 1.15em; height: 1.15em; }
/* Con sesión: el mini perfil en una fila */
.cp-user { display: flex; align-items: center; gap: 3cqw; }
.cp-user .avatar { width: clamp(28px, 8cqw, 40px); height: clamp(28px, 8cqw, 40px); font-size: clamp(11px, 2.8cqw, 14px); }
.cp-who { display: grid; gap: .4cqw; flex: 1; min-width: 0; }
.cp-who b, .cp-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-who span { color: rgba(255, 255, 255, .6); font-size: .92em; font-variant-numeric: tabular-nums; }
.cp-user .link-btn { flex: none; font-size: .92em; color: var(--accent-2); }
/* La marca, pequeña, al pie */
.cp-foot { display: flex; align-items: center; gap: 1.8cqw; margin-top: 5cqh; font-size: clamp(9px, 2.3cqw, 11px); font-weight: 500; letter-spacing: .04em; color: rgba(255, 255, 255, .42); }
.cp-card + .cp-foot { margin-top: 5cqh; }
.cp-title + .cp-foot { margin-top: auto; }
.cp-foot .k-mark { width: clamp(11px, 3.4cqw, 16px); height: clamp(11px, 3.4cqw, 16px); opacity: .7; }
/* Solo lectura (todas las páginas, todos los binders): nombre, progreso y marca, centrados */
.cover-page.ro { justify-content: center; gap: 4cqw; padding: 10%; }
.cover-page.ro .cp-name { font-size: clamp(9px, 11cqw, 40px); }
.cover-page.ro .cp-kicker { font-size: clamp(6px, 3cqw, 11px); }
.cover-page.ro .cp-foot { position: absolute; bottom: 6cqh; margin: 0; }

/* ---------- Portada cerrada: la tapa vista desde fuera («Mis binders»; binder-view.js, coverThumbHtml) ----------
   La misma polipiel, costura y letra, con la bisagra de las anillas a la izquierda y una ventana con la
   carta que más vale. Todo se mide con el ancho de su tarjeta (el botón que la lleva es el contenedor). */
.bt-binder { --cw: 34cqi; display: block; transition: transform var(--dur-2) var(--ease); }
.bt-binder .cover {
  display: block;
  aspect-ratio: 4 / 5;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -10px 26px rgba(0, 0, 0, .32), 0 18px 34px -8px rgba(0, 0, 0, .62), 0 4px 10px rgba(0, 0, 0, .35);
}
.bt-hinge {
  position: absolute;
  inset: 0 auto 0 0;
  width: 9%;
  border-radius: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .44), rgba(0, 0, 0, .14) 55%, rgba(255, 255, 255, .07) 82%, rgba(0, 0, 0, .38));
  z-index: 1;
}
.bt-hinge::after { content: ""; position: absolute; top: 4%; bottom: 4%; right: -1px; width: 1px; background: rgba(0, 0, 0, .5); box-shadow: 1px 0 0 rgba(255, 255, 255, .07); }
.bt-face { position: absolute; inset: 0 0 0 9%; z-index: 2; padding: 11% 9% 8%; gap: 0; justify-content: flex-start; }
.bt-face .cp-kicker { display: block; font-size: clamp(8px, 3.4cqw, 11px); }
.bt-face .cp-name {
  display: -webkit-box;
  margin-top: 3cqw;
  font-size: clamp(13px, 11.5cqw, 28px);
  text-align: center;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
/* La ventana: una funda de plástico con la carta dentro */
.bt-window {
  position: relative;
  display: block;
  width: 50cqw;
  margin: auto 0;
  padding: 2.4cqw;
  border-radius: 3cqw;
  background: rgba(8, 8, 10, .32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 16px rgba(0, 0, 0, .28);
}
.bt-window::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 22%, transparent 38%, transparent 76%, rgba(255, 255, 255, .06)); }
.bt-card { position: relative; display: block; aspect-ratio: 63 / 88; border-radius: 2.2cqw; overflow: hidden; background: #0c0e12; box-shadow: 0 2px 6px rgba(0, 0, 0, .55); }
.bt-card img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.bt-card .fallback { font-size: clamp(8px, 3.6cqw, 11px); }
.bt-card.missing img { filter: grayscale(1) brightness(.5); }
.bt-card.empty { display: grid; place-items: center; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .28); }
.bt-card.empty .i { width: 30%; height: 30%; stroke-width: 1.5; }
.bt-face .meter { width: 52cqw; margin-top: 0; }
.bt-face .cp-foot { margin-top: 4cqw; }
.bt-face .cp-foot .k-mark { width: clamp(10px, 5cqw, 15px); height: clamp(10px, 5cqw, 15px); opacity: .55; }

/* ---------- Fundas ---------- */
.pocket {
  position: relative;
  width: var(--cw);
  height: calc(var(--cw) * 1.397);
  border-radius: calc(var(--cw) * .05);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .12);
  cursor: pointer;
  outline: none;
  transition: box-shadow .2s, opacity .25s, filter .25s, transform .2s var(--ease);
}
.pocket::after { /* plástico de la funda: brillo por encima de la carta */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(118deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 20%, transparent 36%, transparent 74%, rgba(255, 255, 255, .06) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pocket:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.pocket.empty .plus {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: calc(var(--cw) * .04);
  color: rgba(255, 255, 255, .16);
  transition: color .2s;
  font-size: clamp(9px, calc(var(--cw) * .075), 13px);
  font-weight: 600;
}
.pocket.empty .plus .i { width: calc(var(--cw) * .22); height: calc(var(--cw) * .22); stroke-width: 1.5; }
.pocket.empty .plus span { opacity: 0; transition: opacity .2s; }
.pocket.empty:hover .plus { color: rgba(255, 255, 255, .55); }
.pocket.empty:hover .plus span { opacity: 1; }
.pocket.empty:hover { background: rgba(255, 255, 255, .05); }
.pocket.selected {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 calc(var(--cw) * .045) color-mix(in srgb, var(--accent) 16%, transparent), 0 0 calc(var(--cw) * .25) color-mix(in srgb, var(--accent) 40%, transparent);
}
.pocket.selected .plus { color: var(--accent-2); }
.pocket.selected .plus span { opacity: 1; }
.pocket.drop-hover { box-shadow: 0 0 0 2px var(--ok), 0 0 calc(var(--cw) * .2) color-mix(in srgb, var(--ok) 45%, transparent); transform: scale(1.025); }
.pocket.dragging { opacity: .35; }
.pocket.flash { animation: pocket-flash 1.5s var(--ease); }
@keyframes pocket-flash { 0%, 55% { box-shadow: 0 0 0 3px var(--accent-2), 0 0 calc(var(--cw) * .3) color-mix(in srgb, var(--accent) 75%, transparent); } }

/* Acabado del hueco (model.js, finishOf). El marco va en ::after: el foco y lo elegido no se tocan.
   Toploader: plástico rígido, con el borde grueso y la boca arriba; la carta queda más adentro.
   Imagen propia: como una funda impresa, la imagen enmarca la carta. */
.pocket.fin-toploader { border-radius: calc(var(--cw) * .028); background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 42%, rgba(255, 255, 255, .07)); }
.pocket.fin-toploader::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .2) 2.6%, transparent 2.6%),
    linear-gradient(118deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .07) 22%, transparent 38%, transparent 70%, rgba(255, 255, 255, .1) 100%);
  box-shadow: inset 0 0 0 calc(var(--cw) * .012) rgba(255, 255, 255, .32), inset 0 0 0 calc(var(--cw) * .034) rgba(255, 255, 255, .07);
}
.pocket.fin-toploader .card { inset: 6.4% 6.6% 4.6%; border-radius: calc(var(--cw) * .026); }
.pocket.fin-image, .pocket.fin-image.empty:hover { background: var(--fin-img) center / cover no-repeat; }
.pocket.fin-image .card { inset: 7% 7.4% 6%; }
.pocket.fin-image.empty .plus { color: rgba(255, 255, 255, .7); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

/* ---------- Carta ---------- */
.card {
  --mx: 50%;
  --my: 50%;
  position: absolute;
  inset: 2.6%;
  border-radius: calc(var(--cw) * .042);
  overflow: hidden;
  background: #0c0e12;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.card img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .35s, opacity .35s;
}
.card .fallback { font-size: clamp(8px, calc(var(--cw) * .075), 12px); }
.card::before, .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 2; }
.card::before { /* reflejo que sigue al ratón */
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 28%, transparent 60%);
  mix-blend-mode: overlay;
}
.card.holo::after { /* irisado de las versiones especiales */
  background:
    repeating-linear-gradient(115deg, rgba(255, 0, 132, .5) 0%, rgba(252, 164, 0, .45) 8%, rgba(255, 255, 0, .4) 16%, rgba(0, 255, 138, .4) 24%, rgba(0, 207, 255, .45) 32%, rgba(204, 76, 250, .5) 40%, rgba(255, 0, 132, .5) 48%);
  background-size: 300% 300%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge;
  filter: brightness(.65) contrast(1.4) saturate(1.2);
}
.pocket.owned.hovering .card::before { opacity: 1; }
.pocket.owned.hovering .card.holo::after { opacity: .5; }
.pocket.owned:hover { transform: translateY(calc(var(--cw) * -.015)); }

.pocket.missing.style-gray .card img { filter: grayscale(1) brightness(.48) contrast(.95); }
.pocket.missing.style-faded .card img { opacity: .28; }
.pocket.missing:hover .card img { filter: none; opacity: 1; }

/* ---------- Distintivos ---------- */

.own-btn {
  position: absolute;
  z-index: 6;
  right: 5%;
  bottom: 4%;
  width: max(22px, calc(var(--cw) * .19));
  height: max(22px, calc(var(--cw) * .19));
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75);
  background: rgba(8, 10, 15, .72);
  color: rgba(255, 255, 255, .85);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .15s, transform .15s, background .15s, width .2s var(--ease), height .2s var(--ease);
}
.own-btn .i { width: 62%; height: 62%; stroke-width: 3.2; }
.pocket:hover .own-btn, .own-btn:focus-visible { opacity: 1; transform: none; }
/* Sin ratón no hay «pasar por encima»: se ve siempre (si no, un toque en esa esquina la marcaría a ciegas) */
@media (hover: none) { .own-btn { opacity: 1; transform: none; } }
.own-btn:hover { transform: scale(1.12) !important; }
/* Ya conseguida: distintivo pequeño en la esquina (el grande solo sirve para marcar) */
.pocket.owned .own-btn {
  right: 4%;
  bottom: 3%;
  width: max(15px, calc(var(--cw) * .11));
  height: max(15px, calc(var(--cw) * .11));
  border-width: 1.5px;
  opacity: 1;
  transform: none;
  background: var(--ok);
  border-color: #fff;
  color: var(--ok-ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.pocket.owned .own-btn .i { width: 68%; height: 68%; stroke-width: 3.6; }
.note-dot {
  position: absolute;
  z-index: 6;
  top: 5%;
  right: 7%;
  width: max(8px, calc(var(--cw) * .06));
  height: max(8px, calc(var(--cw) * .06));
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55);
}
/* Idioma de la copia (si no es el de por defecto: «JP»), abajo a la izquierda */
.pocket .lang-tag {
  position: absolute;
  z-index: 6;
  left: 5%;
  bottom: 3%;
  min-width: max(18px, calc(var(--cw) * .17));
  height: max(14px, calc(var(--cw) * .115));
  padding: 0 max(3px, calc(var(--cw) * .03));
  border-radius: max(3px, calc(var(--cw) * .025));
  font-size: max(9px, calc(var(--cw) * .075));
}

/* ---------- Resaltar faltantes / conseguidas ---------- */
.hl-missing .pocket:not(.missing), .hl-owned .pocket:not(.owned) { opacity: .16; filter: saturate(.2); }
.hl-missing .pocket.missing .card img { filter: none !important; opacity: 1 !important; }

/* ---------- Paso de página (3D) ----------
   page-turn.js gira la hoja (.leaf) y ajusta las sombras en cada fotograma. */
.leaf {
  position: absolute;
  z-index: 12;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}
.leaf .face { position: absolute; inset: 0; display: flex; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .face > .sheet { flex: 1; }
.leaf .face.back { transform: rotateY(180deg); }
.leaf .shade { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; }
.leaf.next .front .shade, .leaf.prev .back .shade, .leaf.single .front .shade {
  background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, .06));
}
.leaf.next .back .shade, .leaf.prev:not(.single) .front .shade {
  background: linear-gradient(270deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, .06));
}
.turn-shadow { position: absolute; z-index: 11; pointer-events: none; opacity: 0; will-change: opacity, transform; }
.turn-shadow.from-left { transform-origin: left center; background: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .32) 30%, transparent 85%); }
.turn-shadow.from-right { transform-origin: right center; background: linear-gradient(270deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .32) 30%, transparent 85%); }

/* Esquina que se levanta cuando el ratón se acerca al borde: invita a coger la hoja */
.dog-ear {
  --ear: 0px;
  position: absolute;
  z-index: 8;
  bottom: var(--cpad);
  width: var(--ear);
  height: var(--ear);
  pointer-events: none;
  transition: width .3s var(--ease), height .3s var(--ease);
}
.dog-ear.next {
  right: var(--cpad);
  border-bottom-right-radius: calc(var(--cw) * .05);
  background: linear-gradient(to top left, #08090c 0%, #0c0d11 44%, rgba(0, 0, 0, .9) 49.6%, #4a505d 50.4%, #2f333d 72%, #1d2027 100%);
  box-shadow: -3px -3px 8px rgba(0, 0, 0, .45);
}
.dog-ear.prev {
  left: var(--cpad);
  border-bottom-left-radius: calc(var(--cw) * .05);
  background: linear-gradient(to top right, #08090c 0%, #0c0d11 44%, rgba(0, 0, 0, .9) 49.6%, #4a505d 50.4%, #2f333d 72%, #1d2027 100%);
  box-shadow: 3px -3px 8px rgba(0, 0, 0, .45);
}
.peek-next .dog-ear.next, .peek-prev .dog-ear.prev { --ear: calc(var(--cw) * .2); }
.grabbing .peek-next .dog-ear.next, .grabbing .peek-prev .dog-ear.prev { --ear: calc(var(--cw) * .3); }
.turning .dog-ear { display: none; }

/* ---------- Arrastrar cartas ---------- */
.pocket.drag-source { outline: 1.5px dashed rgba(255, 255, 255, .28); outline-offset: calc(var(--cw) * -.03); }
.pocket.drag-source .card { opacity: .18; filter: grayscale(.7); }
.pocket.drag-source .own-btn, .pocket.drag-source .note-dot, .pocket.drag-source .lang-tag { visibility: hidden; }
/* Mientras la carta vuela a su hueco (drop-landing y no landing, que es la portada: landing.css) */
.pocket.drop-landing .card { opacity: 0; }
.pocket.drop-landing, .pocket.drop-landing:hover { transform: none; } /* llega a su sitio, sin el realce de debajo del ratón */
.card-dragging, .card-dragging * { cursor: grabbing !important; }
.card-dragging .pocket.owned:hover { transform: none; }
.card-dragging .pocket .own-btn { opacity: 0 !important; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; will-change: transform; }
.drag-ghost .dg-inner {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--cw) * .045);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .45);
  transition: transform .16s ease-out, box-shadow .23s;
  will-change: transform;
}
.drag-ghost .card { inset: 0; box-shadow: none; }
/* Al volar a su hueco, el fantasma y lo de dentro (el giro y la escala) con la misma curva: así la esquina
   de la carta va en línea recta hasta la del hueco */
.drag-ghost.drop-landing { transition: transform .23s var(--ease), opacity .23s; }
.drag-ghost.drop-landing .dg-inner { transition: transform .23s var(--ease), box-shadow .23s; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.drag-ghost.fade { opacity: 0; }

/* Móvil: una página cada vez */
.binder.single { --cpad: calc(var(--cw) * .08); }

/* ---------- Vista de todas las páginas ---------- */
.overview .binder { --cw: var(--card-w, 72px); }
.overview .cover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 30px rgba(0, 0, 0, .5); }
.overview .pocket:hover { transform: none; }
.overview .own-btn { width: 20px; height: 20px; }
.overview .pocket.owned .own-btn { width: 12px; height: 12px; border-width: 1px; }

/* Binder vacío: qué hacer primero (centrado con translate: la animación usa transform y, si no, durante ella se salía de la pantalla) */
.empty-cta { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 6; display: grid; gap: 10px; justify-items: center; width: min(440px, calc(100% - 32px)); padding: 22px 24px; border-radius: var(--r-xl); border: 1px solid var(--line-2); background: rgba(16, 16, 18, .92); backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); text-align: center; animation: pop-in .3s var(--ease); }
.empty-cta b { font-size: var(--fs-lg); }
.empty-cta span { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.empty-cta div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }