.ventorn-comic-reader{--vcr-bg:#07111f;--vcr-gold:#c99736;--vcr-paper:#f4efe5;--vcr-page-w:400px;--vcr-page-h:600px;--vcr-gap:4px;max-width:1280px;margin:1.5rem auto;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-touch-callout:none;user-select:none}
.vcr-stage{background:radial-gradient(circle at 50% 35%,#1b2a3e 0,#07111f 70%);border-radius:18px;padding:clamp(10px,1.6vw,22px);box-shadow:0 18px 55px rgba(0,0,0,.28);outline:none;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.vcr-book{position:relative;display:flex;gap:var(--vcr-gap);margin:auto;perspective:2600px;perspective-origin:50% 48%;align-items:center;justify-content:center;width:calc(var(--vcr-page-w)*2 + var(--vcr-gap));height:var(--vcr-page-h);min-height:0;max-width:100%;transform-style:preserve-3d}
.vcr-book::before{content:"";position:absolute;left:50%;top:1.5%;bottom:1.5%;width:14px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.28),rgba(255,255,255,.055),rgba(0,0,0,.22),transparent);filter:blur(2px);opacity:.75;pointer-events:none;z-index:4}
.vcr-page{position:relative;flex:0 0 var(--vcr-page-w);width:var(--vcr-page-w);height:var(--vcr-page-h);background:#111;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45);box-sizing:border-box;transform:translateZ(0);will-change:transform,opacity}
.vcr-page::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
.vcr-page img,.vcr-flip img{width:100%;height:100%;object-fit:contain;display:block;background:#111;user-select:none;-webkit-user-drag:none;pointer-events:none}
.vcr-left{border-radius:10px 2px 2px 10px}.vcr-right{border-radius:2px 10px 10px 2px}
.vcr-page.is-empty{visibility:hidden;box-shadow:none;background:transparent}

/*
 * v1.1.3 physical sheet turn.
 * We deliberately do NOT use a permanent front/back 3D pair. Some Chromium builds flatten
 * that composition and show the front artwork again on the reverse side.
 * Instead the moving sheet reaches ~90° edge-on, then its artwork is swapped to the true
 * reverse page (e.g. page 5 -> page 6) before the second half continues.
 */
.vcr-flip{position:absolute;top:0;width:var(--vcr-page-w);height:var(--vcr-page-h);z-index:30;display:none;overflow:hidden;background:#111;will-change:transform,box-shadow;pointer-events:none;transform-style:preserve-3d}
.vcr-flip.is-active{display:block}
.vcr-flip.next{right:0;left:auto;transform-origin:left center;border-radius:2px 10px 10px 2px}
.vcr-flip.prev{left:0;right:auto;transform-origin:right center;border-radius:10px 2px 2px 10px}
.vcr-flip.mobile{left:0!important;right:0!important}
.vcr-flip::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.13),transparent 18%,transparent 72%,rgba(0,0,0,.26));mix-blend-mode:soft-light}
.vcr-flip.next::after,.vcr-flip.prev::after{content:"";position:absolute;top:0;bottom:0;width:32%;z-index:4;pointer-events:none;opacity:.62}
.vcr-flip.next::after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.18),transparent)}
.vcr-flip.prev::after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.62),rgba(0,0,0,.18),transparent)}
.vcr-flip.is-back img{transform:scaleX(-1)}
.vcr-flip.is-back::before{background:linear-gradient(90deg,rgba(0,0,0,.24),transparent 24%,transparent 78%,rgba(255,255,255,.11))}

/* Gentle fallback transition for cover/back-cover edge changes. */
.vcr-book.soft-out-next{animation:vcrSoftOutNext .18s ease-in both}
.vcr-book.soft-out-prev{animation:vcrSoftOutPrev .18s ease-in both}
.vcr-book.soft-in-next{animation:vcrSoftInNext .26s ease-out both}
.vcr-book.soft-in-prev{animation:vcrSoftInPrev .26s ease-out both}
@keyframes vcrSoftOutNext{to{opacity:.16;transform:translateX(-16px) scale(.994)}}
@keyframes vcrSoftOutPrev{to{opacity:.16;transform:translateX(16px) scale(.994)}}
@keyframes vcrSoftInNext{from{opacity:.16;transform:translateX(16px) scale(.994)}to{opacity:1;transform:none}}
@keyframes vcrSoftInPrev{from{opacity:.16;transform:translateX(-16px) scale(.994)}to{opacity:1;transform:none}}

.vcr-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;flex:0 0 auto}
.vcr-controls button{border:1px solid rgba(255,255,255,.22);background:#102238;color:#fff;border-radius:999px;min-width:44px;height:44px;padding:0 14px;font-size:22px;cursor:pointer;transition:border-color .2s ease,color .2s ease,transform .15s ease,opacity .2s ease}
.vcr-controls button:hover{border-color:var(--vcr-gold);color:#ffd47b}.vcr-controls button:active{transform:scale(.96)}.vcr-controls button:disabled{opacity:.3;cursor:default}
.vcr-counter{min-width:150px;text-align:center;font-size:14px;color:#d7dde6}
.vcr-progress{height:3px;background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden;max-width:500px;margin:8px auto 0;flex:0 0 auto;width:min(500px,80%)}.vcr-progress span{display:block;height:100%;width:0;background:var(--vcr-gold);transition:width .28s ease}
.ventorn-comic-reader.is-turning .vcr-controls button{pointer-events:none}
.ventorn-comic-reader:fullscreen{background:#050b12;padding:12px;max-width:none;width:100vw;height:100dvh;margin:0;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}
.ventorn-comic-reader:fullscreen .vcr-stage{flex:1 1 auto;min-height:0;width:100%;padding:10px}
.ventorn-comic-reader:fullscreen .vcr-controls{margin-top:8px}
.ventorn-comic-reader:fullscreen .vcr-progress{margin-top:6px;margin-bottom:2px}
@media(max-width:720px){.ventorn-comic-reader{margin:.75rem auto}.vcr-book{gap:0;width:var(--vcr-page-w)}.vcr-book::before{display:none}.vcr-left{display:none!important}.vcr-right{visibility:visible!important;border-radius:10px}.vcr-flip{left:0!important;right:0!important}.vcr-flip.next{transform-origin:left center}.vcr-flip.prev{transform-origin:right center}.vcr-counter{min-width:110px}.vcr-stage{padding:8px;border-radius:12px}.vcr-controls{gap:8px}.vcr-controls button{min-width:42px;height:42px;padding:0 12px}}
@media(prefers-reduced-motion:reduce){.vcr-book.soft-out-next,.vcr-book.soft-out-prev,.vcr-book.soft-in-next,.vcr-book.soft-in-prev{animation-duration:.01ms!important}.vcr-progress span{transition:none}}
@media print{.ventorn-comic-reader{display:none!important}}