Modo libro 3D, tomos con cubiertas reales y ocultar créditos

Libro 3D (app/public/book3d.js): lector WebGL2 con mesa de madera, cubierta,
hojas que giran, cámara real y giroscopio, ahora con más recorrido alrededor
del libro.

Tomos (app/volumes.js): agrupa los capítulos en un solo libro con portada y
contraportada reales. El reparto sale de Wikipedia, MangaDex, M440 y
MangaUpdates, contrastados entre sí. Lo que ninguna fuente sitúa se estima, de
modo que solo quedan sueltos los capítulos del final, y los fuera de orden se
recolocan. Manhwa y manhua no tienen tomos.

Ocultar créditos (app/credits.js): botón por obra en la ficha. Al leer por
tomos oculta, sin borrarlas, la página cero y las dos últimas de cada capítulo
si se repiten en otros capítulos de la obra.

HANDOFF-LIBRO3D.md recoge el estado, las decisiones y las pruebas.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/public/style.css

@@ -79,6 +79,13 @@ input:focus, select:focus { border-color: var(--accent); }
 .chapters a:hover { background: var(--surface-2); }
 .chapters a.read { opacity: .5; }
 .chapters a.current { outline: 1px solid var(--accent); opacity: 1; }
+.chapters .volhead { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
+.chapters .voltoggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 8px; background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.chapters .voltoggle.static { cursor: default; padding: 10px 12px; }
+.chapters .voltoggle img { width: 44px; height: 63px; object-fit: cover; border-radius: 3px; flex: none; }
+.chapters .voltoggle > span { display: grid; gap: 2px; }
+.chapters .voltoggle .meta { text-align: left; }
+.chapters .volhead > .btn { flex: none; }
 .chapters .meta { font-size: .8rem; color: var(--muted); text-align: right; flex: none; }
 
 .history { display: grid; gap: 10px; }
@@ -86,6 +93,8 @@ input:focus, select:focus { border-color: var(--accent); }
 
 .settings { max-width: 480px; display: grid; gap: 16px; }
 .settings section { background: var(--surface); padding: 16px; border-radius: var(--radius); display: grid; gap: 10px; }
+.tableprev { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius); }
+.tableprev[hidden] { display: none; }
 
 .loading { padding: 40px; text-align: center; color: var(--muted); }
 
@@ -450,3 +459,25 @@ body.reading #netbanner { display: none; }
 .tag.hot { color: var(--accent); }
 @media (max-width: 640px) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: 8px; } .banner { height: 120px; } }
 .chapters .meta .cdate.approx { opacity: .7; }
+/* Libro 3D: el canvas dibuja el libro y #pages sigue debajo de los dedos, invisible, para los gestos. */
+#b3d { position: fixed; inset: 0; z-index: 0; }
+#b3d[hidden] { display: none; }
+#b3d canvas { display: block; width: 100%; height: 100%; }
+.reader.b3d { background: #4a2e19; }
+.reader.b3d > #pages { position: relative; z-index: 1; background: transparent; }
+.reader.b3d > #pages img { visibility: hidden; }
+/* Los dedos caen siempre en #pages, que no se quita. Si cayeran en la etapa, al pasar de página el «levantar» no llegaría al lector. */
+.reader.b3d > #pages > * { pointer-events: none; }
+/* El final del capítulo, sobre la contraportada y con sus colores. */
+.reader.b3d .chapter-end { position: absolute; left: 0; top: 0; padding: 10%; align-content: center; gap: 12px; color: var(--end-ink, #fff); filter: var(--page-filter, none);
+  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; will-change: transform; }
+.reader.b3d .chapter-end.on { opacity: 1; visibility: visible; }
+.reader.b3d .chapter-end p { margin: 0; padding: 3px 12px; border-radius: 6px; background: var(--end-surface, transparent); color: var(--end-ink, #fff); font-weight: 600; }
+.reader.b3d .chapter-end .btn { pointer-events: auto; width: 100%; max-width: 320px; min-height: 44px; white-space: normal; text-align: center;
+  background: var(--end-surface, #222); color: var(--end-ink, #fff); border-color: var(--end-line, #888); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
+.reader.b3d .chapter-end .btn.primary { background: var(--end-accent, #e50); color: var(--end-accentInk, #fff); border-color: var(--end-accent, #e50); }
+.reader.b3d .chapter-end .btn:focus-visible { outline: 2px solid var(--end-ink, #fff); outline-offset: 2px; }
+/* Para recortar se ve la página plana. */
+.reader.b3d.b3dcrop { background: #000; }
+.reader.b3d.b3dcrop > #b3d { display: none; }
+.reader.b3d.b3dcrop > #pages img { visibility: visible; }