/* --- 字体引入 (选择更有手写感的) --- */
@import url('https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap');

/* --- 整体背景：深色木桌 --- */
body {
    margin: 0;
    font-family: 'Zhi Mang Xing', cursive, sans-serif; /* 全局使用手写字体 */
    background-image: url('../images/background.jpg'); /* 你的木纹背景 */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* 书本容器 */
.flip-book-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

/* 书本样式 (移除阴影，靠毛边来体现质感) */
#book {
    box-shadow: none;
}

/* --- 页面设计：手工纸 + 毛边 + 嵌入式花卉 --- */
.page {
    background-image: url('../images/lokta_paper.jpg'); /* 你的手工纸纹理 */
    background-size: cover;
    
    /* === 核心：模拟手工纸毛边 (Deckle Edge) === */
    border: 30px solid transparent; /* 留出足够的边框区域来应用图片 */
    border-image: url('https://i.imgur.com/2lGikdE.png') 30 round; /* 使用一张撕裂边缘的图片作为边框 */
    box-shadow: none; /* 去掉所有阴影，保持原始感 */
}

.page-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px; /* 内边距可以小一些，因为边框很宽 */
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

/* === 核心：模拟嵌入纸张的花卉 === */
.page-content::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 8%;
    width: 35%; /* 根据你的花卉图片大小调整 */
    height: 35%;
    background-image: url('../images/pressed_flower.png'); /* 你的干花PNG */
    background-size: contain;
    background-repeat: no-repeat;
    
    /* 关键：让花看起来像嵌在纸里 */
    opacity: 0.4; /* 降低不透明度 */
    mix-blend-mode: multiply; /* 用正片叠底混合模式，让花的颜色和纸张纹理融合 */
    filter: blur(0.5px); /* 轻微模糊，减少锐利感 */
}
/* 你可以为不同的页面设置不同的装饰 */
.page:nth-of-type(4) .page-content::before {
    background-image: url('../images/pressed_leaf.png'); /* 第4页用叶子 */
    width: 40%;
    height: 25%;
    top: 10%;
    left: auto;
    right: 5%;
}

/* 封面设计：可以加一个麻绳绑带的效果 */
.page--cover .page-content::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 5px;
    background-image: url('https://i.imgur.com/s3aJ9x2.png'); /* 一个麻绳纹理 */
    background-size: cover;
    opacity: 0.7;
}

/* --- 文字和图片样式 --- */
.page-content h1, .page-content h2, .page-content p {
    color: #4a3f35; /* 统一使用深棕色，像墨水渗透的颜色 */
    text-shadow: none;
}

.page-content h1 { font-size: 2.8em; }
.page-content h2 { font-size: 2.2em; }
.page-content p { font-size: 1.2em; line-height: 2; }

.page-content img {
    max-width: 70%;
    max-height: 50%;
    border: none; /* 去掉白边 */
    border-radius: 2px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3); /* 使用更自然的阴影 */
    /* 给图片也加上混合模式，让它和纸张融合得更好 */
    mix-blend-mode: multiply;
    opacity: 0.9;
}


/* --- 手机横屏提示 (保持不变) --- */
#rotate-prompt {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #333; color: white; z-index: 9999;
    flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.phone { width: 60px; height: 120px; border: 3px solid white; border-radius: 10px; margin-bottom: 20px; animation: rotate 1.5s ease-in-out infinite; }
.message { font-size: 1.2em; }
@keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(-90deg); } 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 800px) {
    #rotate-prompt { display: flex; }
    .flip-book-container { display: none; }
}