.book-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:2000px;background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-radius:1rem;padding:2rem;position:relative}.book-wrapper{width:100%;max-width:900px;height:600px;position:relative;margin-bottom:2rem}.book{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s ease}.page{position:absolute;width:50%;height:100%;background:#fff;box-shadow:0 10px 40px #0003;border-radius:.5rem;overflow:hidden;backface-visibility:hidden}.page-left{left:0;transform-origin:right center;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:inset -5px 0 10px #0000001a,0 10px 40px #0003}.page-right{right:0;transform-origin:left center;border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:inset 5px 0 10px #0000001a,0 10px 40px #0003}.page-flip{right:0;transform-origin:left center;animation:flipPage .6s ease-in-out forwards;z-index:10;border-top-left-radius:0;border-bottom-left-radius:0}@keyframes flipPage{0%{transform:rotateY(0)}50%{transform:rotateY(-90deg);box-shadow:0 20px 60px #0000004d}to{transform:rotateY(-180deg)}}.page-content{width:100%;height:100%;display:flex;flex-direction:column;padding:1.5rem;background:linear-gradient(to bottom,#fff,#fefefe)}.page-flip-front{position:absolute;backface-visibility:hidden}.page-flip-back{position:absolute;backface-visibility:hidden;transform:rotateY(180deg)}.page-image{width:100%;height:60%;position:relative;border-radius:.5rem;overflow:hidden;box-shadow:0 4px 12px #0000001a;margin-bottom:1rem}.page-image img{width:100%;height:100%;object-fit:cover;display:block}.page-text{flex:1;overflow-y:auto;padding:1rem;background:#f3e8ff4d;border-radius:.5rem;border:2px solid rgba(168,85,247,.2)}.page-text p{font-size:1rem;line-height:1.6;color:#374151;margin:0;font-family:Georgia,serif}.audio-button{position:absolute;bottom:.75rem;right:.75rem;background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#7c3aed;padding:.75rem;border-radius:50%;border:2px solid #7c3aed;box-shadow:0 4px 12px #7c3aed4d;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.audio-button:hover:not(:disabled){background:#7c3aed;color:#fff;transform:scale(1.1);box-shadow:0 6px 16px #7c3aed66}.audio-button:disabled{opacity:.5;cursor:not-allowed}.book-cover{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;padding:2rem}.cover-title{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:1rem;font-family:Chewy,cursive;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.cover-decoration{font-size:3rem;margin-top:1rem}.book-controls{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:900px;gap:1rem;padding:0 1rem}.nav-button{display:flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#78350f;font-weight:700;padding:.75rem 1.5rem;border-radius:.75rem;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #fbbf244d;font-size:1rem}.nav-button:hover:not(:disabled){background:linear-gradient(135deg,#f59e0b,#d97706);transform:translateY(-2px);box-shadow:0 6px 16px #fbbf2466}.nav-button:disabled{background:#d1d5db;color:#9ca3af;cursor:not-allowed;box-shadow:none}.page-indicator{flex:1;display:flex;justify-content:center;align-items:center}.page-number{font-size:1.125rem;font-weight:700;color:#7c3aed;background:#fff;padding:.5rem 1.5rem;border-radius:2rem;box-shadow:0 2px 8px #7c3aed33}@media(max-width:768px){.book-wrapper{height:500px}.page-text p{font-size:.875rem}.cover-title{font-size:2rem}.nav-button{padding:.5rem 1rem;font-size:.875rem}.nav-button span{display:none}.page-number{font-size:.875rem;padding:.375rem 1rem}}@media(max-width:640px){.book-container{padding:1rem}.book-wrapper{height:400px}.page-content{padding:1rem}.page-image{height:50%}.page-text{padding:.75rem}.page-text p{font-size:.75rem;line-height:1.4}}.book.flipping{transform:scale(1.02)}.page:before{content:"";position:absolute;top:0;width:20px;height:100%;background:linear-gradient(to right,rgba(0,0,0,.05),transparent);pointer-events:none}.page-left:before{right:0}.page-right:before{left:0;background:linear-gradient(to left,rgba(0,0,0,.05),transparent)}
