*{ 
    box-sizing:border-box; 
}


/* =========================
   整体页面
   ========================= */

body{ 
    margin:0; 
    min-height:100vh; 

    background: 
        radial-gradient( 
            ellipse at top, 
            #26352f, 
            #101814 45%, 
            #050807 100% 
        ); 

    color:#e8dfc8; 

    font-family: 
        "Microsoft YaHei", 
        "Songti SC", 
        serif; 

    position:relative; 

    overflow-x:hidden; 
}


/* =========================
   两侧书本装饰
   ========================= */

body::before, 
body::after{ 
    content:""; 

    position:fixed; 

    top:0; 

    width:260px; 
    height:100vh; 

    opacity:.25; 

    background-repeat:no-repeat; 
    background-size:contain; 

    z-index:-1; 
} 


body::before{ 
    left:0; 

    background-image: 
        url("img/book-left.png"); 
} 


body::after{ 
    right:0; 

    background-image: 
        url("img/book-right.png"); 
}


/* =========================
   顶部标题
   ========================= */

.detail-header{ 
    position:relative; 

    text-align:center; 

    padding:75px 20px 45px; 

    border-bottom: 
        1px solid rgba(220,190,120,.35); 

    box-shadow: 
        0 15px 40px rgba(0,0,0,.7); 
} 


.detail-header h1{ 
    margin:0; 

    font-size:48px; 

    letter-spacing:12px; 

    color:#e6c878; 

    text-shadow: 
        0 0 20px rgba(230,200,120,.4); 
} 


.author{ 
    margin-top:20px; 

    font-size:15px; 

    letter-spacing:5px; 

    color:#bca978; 
}


/* =========================
   返回剧本查阅
   ========================= */

.back-home{ 
    position:absolute; 

    left:40px; 
    top:35px; 

    display:inline-flex; 

    align-items:center; 
    justify-content:center; 

    padding:9px 18px; 

    border: 
        1px solid rgba(220,190,120,.35); 

    border-radius:3px; 

    background: 
        linear-gradient( 
            135deg, 
            rgba(35,48,42,.85), 
            rgba(12,20,17,.9) 
        ); 

    color:#cdb475; 

    text-decoration:none !important; 

    font-family: 
        "Microsoft YaHei", 
        "Songti SC", 
        serif; 

    font-size:14px; 

    letter-spacing:2px; 

    box-shadow: 
        0 5px 18px rgba(0,0,0,.35); 

    transition: 
        color .25s ease, 
        border-color .25s ease, 
        background .25s ease, 
        box-shadow .25s ease, 
        transform .25s ease; 
} 


.back-home:hover{ 
    color:#f0d58b; 

    border-color: 
        rgba(230,200,120,.75); 

    background: 
        linear-gradient( 
            135deg, 
            rgba(55,68,57,.9), 
            rgba(18,27,23,.95) 
        ); 

    box-shadow: 
        0 5px 22px rgba(0,0,0,.55), 
        0 0 12px rgba(230,200,120,.12); 

    transform: 
        translateY(-2px); 
} 


.back-home:active{ 
    transform: 
        translateY(0); 
}


/* =========================
   简介
   ========================= */

.intro{ 
    position:relative; 

    max-width:1100px; 

    margin:55px auto; 

    padding:45px; 

    background: 
        linear-gradient( 
            145deg, 
            rgba(30,45,40,.9), 
            rgba(8,14,12,.95) 
        ); 

    border: 
        1px solid rgba(220,190,120,.35); 

    box-shadow: 
        0 25px 60px rgba(0,0,0,.6); 

    border-radius:12px; 
} 


.intro h2{ 
    text-align:center; 

    font-size:28px; 

    letter-spacing:8px; 

    color:#e6c878; 

    margin-bottom:35px; 
} 


.intro p{ 
    font-size:17px; 

    line-height:2.2; 

    letter-spacing:1px; 

    white-space:pre-line; 

    color:#ded6c4; 
}


/* =========================
   音乐按钮
   位于简介框左上角
   ========================= */

.music-toggle{ 
    position:absolute; 

    left:25px; 
    top:25px; 

    padding:8px 14px; 

    border: 
        1px solid rgba(220,190,120,.35); 

    border-radius:20px; 

    background: 
        rgba(10,18,15,.85); 

    color:#cdb475; 

    font-family: 
        "Microsoft YaHei", 
        "Songti SC", 
        serif; 

    font-size:13px; 

    letter-spacing:1px; 

    cursor:pointer; 

    box-shadow: 
        0 5px 15px rgba(0,0,0,.35); 

    transition:.25s ease; 
} 


.music-toggle:hover{ 
    color:#f0d58b; 

    border-color: 
        rgba(230,200,120,.7); 

    background: 
        rgba(30,45,40,.95); 

    box-shadow: 
        0 5px 20px rgba(0,0,0,.5), 
        0 0 10px rgba(230,200,120,.12); 
} 


.music-toggle:active{ 
    transform:scale(.97); 
}


/* =========================
   图片区域
   ========================= */

.gallery{ 
    max-width:1200px; 

    margin:auto; 

    padding:20px 30px 80px; 

    display:grid; 

    grid-template-columns: 
        repeat(2,1fr); 

    gap:45px; 
} 


.gallery div{ 
    background:#080d0b; 

    padding:12px; 

    border-radius:8px; 

    border: 
        1px solid rgba(220,190,120,.3); 

    box-shadow: 
        0 20px 50px rgba(0,0,0,.7); 
} 


.gallery img{ 
    width:100%; 

    display:block; 

    cursor:zoom-in; 

    -webkit-tap-highlight-color:transparent; 

    user-select:none; 

    transition: 
        transform .25s ease, 
        box-shadow .25s ease; 
} 


.gallery img:hover{ 
    transform:scale(1.01); 
}


/* =========================
   图片放大层
   电脑 + 手机通用
   ========================= */

.image-lightbox{ 
    display:none; 

    position:fixed; 

    left:0; 
    top:0; 

    width:100vw; 
    height:100vh; 

    z-index:99999; 

    background: 
        rgba(0,0,0,.92); 

    align-items:center; 
    justify-content:center; 

    padding:20px; 

    overflow:hidden; 

    touch-action:none; 
}


/* =========================
   图片放大层打开状态
   ========================= */

.image-lightbox.show{ 
    display:flex; 
}


/* =========================
   放大的图片
   =========================
   
   这里是这次最重要的修改：
   
   max-width / max-height 不再限制图片，
   由 JavaScript 控制缩放比例。
   
   支持：
   电脑鼠标滚轮缩放
   电脑鼠标拖动
   手机双指缩放
   手机单指拖动
   
   ========================= */

.image-lightbox img{
    display:block;

    max-width:90vw;
    max-height:85vh;

    width:auto;
    height:auto;

    object-fit:contain; 

    margin:0; 

    border: 
        1px solid rgba(220,190,120,.45); 

    box-shadow: 
        0 20px 70px rgba(0,0,0,.85), 
        0 0 30px rgba(220,190,120,.1); 

    user-select:none; 

    -webkit-user-select:none; 

    -webkit-touch-callout:none; 

    cursor:grab; 

    transform-origin:center center; 

    touch-action:none; 

    transition: 
        transform .05s linear; 
}


/* 鼠标按住图片 */

.image-lightbox img:active{ 
    cursor:grabbing; 
}


/* =========================
   图片关闭按钮
   ========================= */

.image-lightbox-close{ 
    position:absolute; 

    top:20px; 
    right:25px; 

    z-index:100000; 

    width:44px; 
    height:44px; 

    padding:0; 

    border: 
        1px solid rgba(220,190,120,.5); 

    border-radius:50%; 

    background: 
        rgba(10,18,15,.95); 

    color:#d9bd78; 

    font-size:28px; 

    line-height:40px; 

    text-align:center; 

    cursor:pointer; 

    transition:.25s ease; 

    -webkit-tap-highlight-color:transparent; 
} 


.image-lightbox-close:hover{ 
    color:#f0d58b; 

    border-color: 
        rgba(230,200,120,.8); 

    background: 
        rgba(35,48,42,.95); 

    box-shadow: 
        0 0 15px rgba(230,200,120,.15); 
} 


.image-lightbox-close:active{ 
    transform:scale(.92); 
}


/* =========================
   手机适配
   ========================= */

@media(max-width:700px){ 

    /* 两侧装饰隐藏 */

    body::before, 
    body::after{ 
        display:none; 
    } 


    /* 标题 */

    .detail-header{ 
        padding: 
            70px 20px 35px; 
    } 


    .detail-header h1{ 
        font-size:32px; 

        letter-spacing:6px; 
    } 


    /* 返回按钮 */

    .back-home{ 
        left:18px; 
        top:20px; 

        padding:8px 14px; 

        font-size:13px; 

        letter-spacing:1px; 
    } 


    /* 简介 */

    .intro{ 
        margin: 
            30px 15px; 

        padding: 
            55px 25px 25px; 
    } 


    .intro p{ 
        font-size:16px; 

        line-height:2; 
    } 


    /* 音乐按钮 */

    .music-toggle{ 
        left:15px; 
        top:15px; 

        padding:7px 12px; 

        font-size:12px; 
    } 


    /* 图片 */

    .gallery{ 
        grid-template-columns:1fr; 

        padding: 
            15px 15px 60px; 

        gap:25px; 
    } 


    /* 图片放大层 */

    .image-lightbox{ 
        padding:15px; 
    } 


    /* 手机端同样取消尺寸限制，
       由 JS 控制缩放 */

   .image-lightbox img{
    max-width:90vw;
    max-height:85vh;
}


    /* 关闭按钮 */

    .image-lightbox-close{ 
        top:12px; 
        right:12px; 

        width:42px; 
        height:42px; 

        font-size:25px; 

        line-height:38px; 
    } 

}