:root { --gold:#c9a34c; --ink:#f8f3e7; --night:#15120e; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#0d0b09; color:var(--ink); font-family:"Sarabun",sans-serif; }
body { display:grid; grid-template-rows:auto 1fr auto; user-select:none; }
.reader-bar, .reader-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; background:rgba(21,18,14,.96); padding:.7rem clamp(.75rem,3vw,1.5rem); border-color:rgba(255,255,255,.1); z-index:5; }
.reader-bar { border-bottom:1px solid rgba(255,255,255,.1); }
.reader-bar a { color:var(--ink); text-decoration:none; }
.reader-bar strong { font-family:"Prompt"; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-actions { display:flex; align-items:center; gap:.45rem; }
.reader-bar button, .reader-controls button { border:1px solid rgba(255,255,255,.16); background:#252018; color:var(--ink); border-radius:10px; min-width:42px; min-height:40px; cursor:pointer; }
.reader-bar button { padding:.45rem .75rem; }
.reader-main { min-height:0; display:grid; place-items:center; padding:1rem; background:radial-gradient(circle at 50% 45%,#3c3428,#17130f 65%,#0d0b09); }
.loader { color:#cfc5b4; }
.book-stage { width:100%; height:100%; display:grid; place-items:center; perspective:1800px; }
.spread { --drag-rotation:0deg; position:relative; display:grid; grid-template-columns:1fr 1fr; height:min(100%,calc(100vw * .708)); max-height:calc(100vh - 145px); aspect-ratio:1.412/1; filter:drop-shadow(0 20px 35px rgba(0,0,0,.5)); transform-style:preserve-3d; touch-action:pan-y; }
.page-slot { position:relative; overflow:hidden; background:#f4efe5; backface-visibility:hidden; }
.page-slot.left { border-radius:7px 0 0 7px; transform-origin:right center; box-shadow:inset -12px 0 22px rgba(38,29,18,.11); }
.page-slot.right { border-radius:0 7px 7px 0; transform-origin:left center; box-shadow:inset 12px 0 22px rgba(38,29,18,.11); }
.page-slot img { width:100%; height:100%; display:block; object-fit:contain; pointer-events:none; }
.book-gutter { position:absolute; z-index:3; top:0; bottom:0; left:50%; width:22px; transform:translateX(-50%); pointer-events:none; background:linear-gradient(90deg,rgba(24,16,8,.18),rgba(255,255,255,.08) 42%,rgba(24,16,8,.2)); filter:blur(2px); opacity:.75; }
.turn-sheet { position:absolute; z-index:6; top:0; width:50%; height:100%; transform-style:preserve-3d; will-change:transform; pointer-events:none; }
.turn-sheet.next { left:50%; transform-origin:left center; animation:page-next .72s cubic-bezier(.24,.64,.34,1) forwards; }
.turn-sheet.prev { left:0; transform-origin:right center; transform:rotateY(180deg); animation:page-prev .72s cubic-bezier(.24,.64,.34,1) forwards; }
.turn-face { position:absolute; inset:0; overflow:hidden; background:#f4efe5; backface-visibility:hidden; }
.turn-face img { width:100%; height:100%; object-fit:contain; display:block; }
.turn-face.front { box-shadow:inset 12px 0 25px rgba(38,29,18,.14),-12px 8px 28px rgba(0,0,0,.2); }
.turn-face.back { transform:rotateY(180deg); box-shadow:inset -12px 0 25px rgba(38,29,18,.16),12px 8px 28px rgba(0,0,0,.2); }
.turn-sheet::after { content:""; position:absolute; inset:0; backface-visibility:hidden; background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(56,39,19,.24) 88%,rgba(19,13,7,.42)); opacity:0; animation:sheet-shade .72s ease-in-out; }
.spread.drag-next .right { transform-origin:left center; transform:perspective(1600px) rotateY(var(--drag-rotation)); filter:brightness(calc(1 + var(--drag-progress, 0) * -.28)); }
.spread.drag-prev .left { transform-origin:right center; transform:perspective(1600px) rotateY(var(--drag-rotation)); filter:brightness(calc(1 + var(--drag-progress, 0) * -.28)); }
@keyframes page-next { 0% { transform:rotateY(0deg) skewY(0deg); } 42% { transform:rotateY(-82deg) skewY(-1.2deg) translateZ(8px); } 58% { transform:rotateY(-103deg) skewY(1deg) translateZ(8px); } 100% { transform:rotateY(-180deg) skewY(0deg); } }
@keyframes page-prev { 0% { transform:rotateY(180deg) skewY(0deg); } 42% { transform:rotateY(103deg) skewY(1deg) translateZ(8px); } 58% { transform:rotateY(82deg) skewY(-1.2deg) translateZ(8px); } 100% { transform:rotateY(0deg) skewY(0deg); } }
@keyframes sheet-shade { 0%,100% { opacity:0; } 45%,58% { opacity:.85; } }
.watermark { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; opacity:.13; color:#5d4824; font:600 clamp(10px,1.2vw,14px)/5.5 "Prompt"; word-spacing:4rem; transform:rotate(-18deg) scale(1.15); display:flex; align-items:center; justify-content:center; text-align:center; }
.reader-controls { border-top:1px solid rgba(255,255,255,.1); justify-content:center; }
.reader-controls input { width:48px; text-align:center; color:var(--ink); background:#252018; border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:.45rem; }
@media (max-width:720px) {
  .reader-bar strong { font-size:.9rem; }
  .reader-bar { gap:.45rem; }
  .reader-actions { gap:.3rem; }
  .reader-bar button { padding:.4rem .55rem; font-size:.82rem; }
  .spread { grid-template-columns:1fr; aspect-ratio:.706/1; height:min(100%,calc((100vw - 2rem) * 1.416)); }
  .page-slot.left { display:none; }
  .page-slot.right { border-radius:7px; }
  .book-gutter { display:none; }
  .turn-sheet, .turn-sheet.next, .turn-sheet.prev { left:0; width:100%; transform-origin:left center; }
  .turn-sheet.prev { transform-origin:right center; }
}
@media (prefers-reduced-motion:reduce) {
  .turn-sheet.next, .turn-sheet.prev, .turn-sheet::after { animation-duration:.01ms !important; }
  .spread.drag-next .right, .spread.drag-prev .left { transform:none !important; filter:none !important; }
}
@media print { body { display:none !important; } }

/* Keep all protected/loading states hidden until selected by the app. */
[hidden] { display: none !important; }