body { margin: 0; min-height: 100vh; background-color: #EAEAEA; font-family: 'LXGW WenKai TC', cursive; overflow: hidden; }
.hidden { display: none !important; }

/* --- Splash Screen --- */
#splash-screen { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; cursor: pointer; transition: opacity 0.5s ease-out; }
#splash-book-cover { 
    width: 500px; 
    height: 680px; 
    background: url('../images/cover.png') center center / cover; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.3); 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; /* Aligned to top */
    align-items: center; 
    text-align: center; 
    padding: 4em 2em 2em 2em; /* Pushed down from top */
    box-sizing: border-box; 
    transform: perspective(2000px) rotateY(-12deg); 
    transition: transform 1s ease; 
}
#splash-book-cover:hover { transform: perspective(2000px) rotateY(0deg); }
.splash-text { color: white; text-shadow: 2px 2px 8px rgba(0,0,0,0.8); }
.splash-title { font-family: 'ZCOOL KuaiLe', cursive; font-size: 3rem; margin-bottom: 1rem; }
.splash-author { font-size: 1.5rem; }
.click-to-open { position: absolute; bottom: 40px; font-size: 1rem; color: white; background: rgba(0,0,0,0.6); padding: 10px 18px; border-radius: 20px; backdrop-filter: blur(2px); }

/* --- Book --- */
.flip-book-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
.flip-book { box-shadow: 0 0 25px rgba(0,0,0,0.5); }
.page { background-color: #fff; display: flex; flex-direction: column; box-sizing: border-box; position: relative; justify-content: center; align-items: center; }
.paper-texture { background-color: #FDFCF5; background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png'); }

/* --- Page Content --- */
.cover-title-page { padding: 2rem; }
.cover-title-page h1 { font-family: 'ZCOOL KuaiLe', cursive; font-size: 2.8rem; margin-bottom: 1.5rem; text-align: center; }
.cover-title-page .author { font-size: 1.2rem; color: #555; line-height: 1.6; text-align: center; }
.cover-title-page .note { font-size: 1rem; color: #777; margin-top: 3rem; font-style: italic; text-align: center;}

.image-page { padding: 0; width: 100%; height: 100%; }
.image-page img { width: 100%; height: 100%; object-fit: cover; }

.text-page { 
    padding: 3rem 3.5rem; 
}
.text-page p { font-size: 1.4rem; line-height: 1.9; text-align: justify; width: 100%; }
.text-page p::first-letter { font-family: 'ZCOOL KuaiLe', cursive; font-size: 2.5rem; float: left; line-height: 0.8; margin-right: 0.1em; margin-top: 0.05em; }
.drop-cap-color-1::first-letter { color: #2E8B57; }
.drop-cap-color-2::first-letter { color: #4682B4; }
.drop-cap-color-0::first-letter { color: #CD5C5C; }
.emphasis { font-size: 1.2em !important; font-weight: bold !important; color: #2E8B57 !important; }

.back-cover-page, .back-credit-page {
    justify-content: center;
    align-items: center;
    display: flex !important;
}
.back-cover-page p, .back-credit-page p {
    width: 100%;
    text-align: center;
}
.back-cover-page p { font-family: 'ZCOOL KuaiLe', cursive; font-size: 10rem; color: #ccc; }
.back-credit-page p { color: #2E8B57; font-size: 1.2rem; margin: 0; }

/* --- UI --- */
.ui-container { position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; gap: 15px; z-index: 1000; color: white; }
.ui-container button { background: #ddd; border: 1px solid #999; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-family: sans-serif; font-weight: bold; }
.ui-container button:hover { background: #fff; }
#close-btn { background-color: #e57373; color: white; border-color: #d32f2f;}
#close-btn:hover { background-color: #ef5350; }
#progress-bar-container { width: 30%; height: 8px; background: #888; border-radius: 4px; overflow: hidden; }
#progress-bar { width: 0%; height: 100%; background: #eee; transition: width 0.3s ease; }
#page-indicator { font-size: 1rem; min-width: 100px; text-align: center; }