*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#241b13;color:#f8e9cf;font-family:system-ui,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #fff;outline-offset:3px}.screen{position:fixed;inset:0;display:none;overflow:hidden}.screen.active{display:block}.comic-wrap{width:100%;height:100%}.comic-desk-stage{position:relative}.comic-desk-stage img{width:100%}.comic-back{position:relative;z-index:8}.comic-desk-action{display:block;width:100%;min-height:44px}.comic-red-hotspot{position:absolute;inset:40% 15% 30%;background:transparent;border:0}.comic-book-red{background:#6f2630}.comic-book-blue{background:#29476f}.comic-book-green{background:#345b3d}.comic-desk-hint{text-align:center;font-size:13px;color:#e0cba9}
.volume-page-holder{position:relative;width:min(100%,480px);margin:10px auto 0;aspect-ratio:1055/1491;perspective:1200px}
.volume-page,.volume-turn-sheet{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;backface-visibility:hidden;transform-style:preserve-3d;background:#e8d7b8 url("../assets/comic_book_page_background_na005_939d1e9b2a.webp") center/100% 100% no-repeat;box-shadow:0 9px 22px #000a}
.volume-page.page-cover,.volume-turn-sheet.page-cover{background:#55232b}
.volume-page>img,.volume-turn-sheet>img{display:block;width:100%;height:100%;object-fit:fill}
.volume-page.page-cover>img{border:0}
.volume-turn-sheet{z-index:5;pointer-events:none}
.volume-turn-sheet.forward{transform-origin:left center;animation:volumeForward .58s cubic-bezier(.28,.04,.7,1) forwards}
.volume-turn-sheet.backward{transform-origin:right center;animation:volumeBackward .58s cubic-bezier(.28,.04,.7,1) forwards}
@keyframes volumeForward{0%{transform:rotateY(0);filter:brightness(1)}60%{transform:rotateY(-55deg);filter:brightness(.78)}100%{transform:rotateY(-94deg);filter:brightness(.55)}}
@keyframes volumeBackward{0%{transform:rotateY(0);filter:brightness(1)}60%{transform:rotateY(55deg);filter:brightness(.78)}100%{transform:rotateY(94deg);filter:brightness(.55)}}
.volume-page-contents{position:absolute;inset:10% 10% 8%;color:#38291c;display:flex;flex-direction:column}
.volume-page-contents h3{font:clamp(26px,8vw,38px) Georgia,serif;text-align:center;margin:2% 0 0}
.volume-page-contents .volume-subtitle{text-align:center;font-size:clamp(14px,4vw,19px);margin:2% 0 12%}
.volume-rule{height:1px;background:#785b3d;margin:0 4% 8%}
.volume-toc-heading{font:clamp(18px,5.5vw,24px) Georgia,serif;text-align:center;margin:0 0 6%}
.volume-chapter{display:block;width:100%;min-height:57px;margin:5px 0;padding:7px 2px;border:0;border-bottom:1px solid #9b7a53;background:transparent;color:#342619;text-align:left;font:clamp(15px,4.3vw,19px) Georgia,serif}
.volume-chapter small{display:block;margin-top:4px;font:12px sans-serif;color:#785c3e}
.volume-chapter:focus-visible{outline:2px solid #5d3e24}
.volume-coming{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.volume-controls{display:flex;align-items:center;justify-content:center;gap:8px;width:min(100%,480px);margin:12px auto}
.volume-controls button{min-height:48px;flex:1;padding:6px;border:1px solid #b99c73;border-radius:4px;background:#3b2924;color:#f8e9cf;font-size:14px}
.volume-controls button:disabled{opacity:.45}
.volume-controls span{min-width:58px;text-align:center;font-size:13px;white-space:nowrap}
.volume-hint{text-align:center;font-size:12px;color:#d8c2a2;margin:4px auto}
.comic-return-dialog[hidden]{display:none}
.comic-return-dialog{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:22px;background:#130e0dc9}
.comic-return-card{width:min(100%,340px);padding:25px 20px;background:#e8d4ac;color:#342318;border:3px double #795837;box-shadow:0 16px 45px #000b;text-align:center}
.comic-return-card p{font-size:19px;margin:0 0 22px}
.comic-return-actions{display:flex;gap:10px}
.comic-return-actions button{flex:1;min-height:48px;border:1px solid #74563a;background:#f5e8cf;color:#342318;border-radius:4px;font-size:15px}
.comic-return-actions button:last-child{background:#6b2a32;color:#fff2d8}
@media(prefers-reduced-motion:reduce){.volume-turn-sheet{animation-duration:.01ms!important}}

