/* Global background */
.page-bg{position:fixed;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0;}
.page-overlay{position:fixed;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.6));z-index:1;}
.site-header{background:rgba(17,24,39,.85);backdrop-filter:blur(4px);z-index:200;}
/* Place main UI above bg */
header, #homeView, #chapterView, #readerView, #audioControlPanel{position:relative;z-index:2;}

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar{width:8px}
.custom-scrollbar::-webkit-scrollbar-thumb{background:#A08D6D;border-radius:10px}
.custom-scrollbar::-webkit-scrollbar-track{background:#f7f3e8}

/* Book container */
.book-container{width:90vw;max-width:900px;height:80vh;max-height:700px;perspective:1500px;position:relative;margin-top:5vh}
.book{width:100%;height:100%;position:absolute;transform-style:preserve-3d;box-shadow:0 10px 40px rgba(0,0,0,.3);border-radius:10px}
.book-page{position:absolute;width:50%;height:100%;background:#fff;border:1px solid #ccc;transform-origin:left;backface-visibility:hidden;display:flex;flex-direction:column;padding:1.5rem;box-sizing:border-box}
.left-cover{left:0;background:#3A322C;border-right:none;box-shadow:inset 5px 0 10px rgba(0,0,0,.2);border-top-left-radius:10px;border-bottom-left-radius:10px;transform-origin:right;z-index:100;transition:transform 1.2s ease}
.right-cover{left:50%;background:#3A322C;border-left:none;box-shadow:inset -5px 0 10px rgba(0,0,0,.2);border-top-right-radius:10px;border-bottom-right-radius:10px;transform:rotateY(180deg);z-index:90;transition:transform 1.2s ease}
/* Inner pages upright (no mirroring) */
#leftPage{left:0;transform:none;z-index:80;border-top-right-radius:6px;border-bottom-right-radius:6px;box-shadow:-2px 0 5px rgba(0,0,0,.1)}
#rightPage{left:50%;transform:none;z-index:80;border-top-left-radius:6px;border-bottom-left-radius:6px;box-shadow:2px 0 5px rgba(0,0,0,.1)}
/* Open animation: ONLY covers rotate */
.book-opened .left-cover{transform:rotateY(-180deg)}
.book-opened .right-cover{transform:rotateY(0)}